first commit

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroup.base.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { IChoiceGroupProps } from './ChoiceGroup.types';
+export declare const ChoiceGroupBase: React.FunctionComponent<IChoiceGroupProps>;

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroup.base.js

@@ -0,0 +1,97 @@
+define(["require", "exports", "tslib", "react", "../../Label", "../../Utilities", "./ChoiceGroupOption/index", "@fluentui/react-hooks", "../../utilities/dom"], function (require, exports, tslib_1, React, Label_1, Utilities_1, index_1, react_hooks_1, dom_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ChoiceGroupBase = void 0;
+    var getClassNames = (0, Utilities_1.classNamesFunction)();
+    var getOptionId = function (option, id) {
+        return "".concat(id, "-").concat(option.key);
+    };
+    var findOption = function (options, key) {
+        return key === undefined ? undefined : (0, Utilities_1.find)(options, function (value) { return value.key === key; });
+    };
+    var focusSelectedOption = function (options, keyChecked, id, focusProviders, doc) {
+        var optionToFocus = findOption(options, keyChecked) || options.filter(function (option) { return !option.disabled; })[0];
+        var elementToFocus = optionToFocus && (doc === null || doc === void 0 ? void 0 : doc.getElementById(getOptionId(optionToFocus, id)));
+        if (elementToFocus) {
+            elementToFocus.focus();
+            (0, Utilities_1.setFocusVisibility)(true, elementToFocus, focusProviders);
+        }
+    };
+    var focusFromFocusTrapZone = function (evt) {
+        return evt.relatedTarget instanceof HTMLElement && evt.relatedTarget.dataset.isFocusTrapZoneBumper === 'true';
+    };
+    var useComponentRef = function (options, keyChecked, id, componentRef, focusProviders) {
+        var doc = (0, dom_1.useDocumentEx)();
+        React.useImperativeHandle(componentRef, function () { return ({
+            get checkedOption() {
+                return findOption(options, keyChecked);
+            },
+            focus: function () {
+                focusSelectedOption(options, keyChecked, id, focusProviders, doc);
+            },
+        }); }, [options, keyChecked, id, focusProviders, doc]);
+    };
+    var COMPONENT_NAME = 'ChoiceGroup';
+    exports.ChoiceGroupBase = React.forwardRef(function (props, forwardedRef) {
+        var className = props.className, theme = props.theme, styles = props.styles, _a = props.options, options = _a === void 0 ? [] : _a, label = props.label, required = props.required, disabled = props.disabled, name = props.name, defaultSelectedKey = props.defaultSelectedKey, componentRef = props.componentRef, onChange = props.onChange;
+        var id = (0, react_hooks_1.useId)('ChoiceGroup');
+        var labelId = (0, react_hooks_1.useId)('ChoiceGroupLabel');
+        var divProps = (0, Utilities_1.getNativeProps)(props, Utilities_1.divProperties, [
+            'onChange',
+            'className',
+            'required',
+        ]);
+        var classNames = getClassNames(styles, {
+            theme: theme,
+            className: className,
+            optionsContainIconOrImage: options.some(function (option) { return !!(option.iconProps || option.imageSrc); }),
+        });
+        var ariaLabelledBy = props.ariaLabelledBy || (label ? labelId : props['aria-labelledby']);
+        var _b = (0, react_hooks_1.useControllableValue)(props.selectedKey, defaultSelectedKey), keyChecked = _b[0], setKeyChecked = _b[1];
+        var _c = React.useState(), keyFocused = _c[0], setKeyFocused = _c[1];
+        var rootRef = React.useRef(null);
+        var mergedRootRefs = (0, react_hooks_1.useMergedRefs)(rootRef, forwardedRef);
+        var focusContext = React.useContext(Utilities_1.FocusRectsContext);
+        useDebugWarnings(props);
+        useComponentRef(options, keyChecked, id, componentRef, focusContext === null || focusContext === void 0 ? void 0 : focusContext.registeredProviders);
+        (0, Utilities_1.useFocusRects)(rootRef);
+        var onFocus = React.useCallback(function (ev, option) {
+            var _a;
+            if (option) {
+                setKeyFocused(option.itemKey);
+                (_a = option.onFocus) === null || _a === void 0 ? void 0 : _a.call(option, ev);
+            }
+        }, []);
+        var onBlur = React.useCallback(function (ev, option) {
+            var _a;
+            setKeyFocused(undefined);
+            (_a = option === null || option === void 0 ? void 0 : option.onBlur) === null || _a === void 0 ? void 0 : _a.call(option, ev);
+        }, []);
+        var onOptionChange = React.useCallback(function (evt, option) {
+            var _a;
+            if (!option) {
+                return;
+            }
+            setKeyChecked(option.itemKey);
+            (_a = option.onChange) === null || _a === void 0 ? void 0 : _a.call(option, evt);
+            onChange === null || onChange === void 0 ? void 0 : onChange(evt, findOption(options, option.itemKey));
+        }, [onChange, options, setKeyChecked]);
+        var onRadioFocus = React.useCallback(function (evt) {
+            // Handles scenarios like this bug: https://github.com/microsoft/fluentui/issues/20173
+            if (focusFromFocusTrapZone(evt)) {
+                focusSelectedOption(options, keyChecked, id, focusContext === null || focusContext === void 0 ? void 0 : focusContext.registeredProviders);
+            }
+        }, [options, keyChecked, id, focusContext]);
+        return (React.createElement("div", tslib_1.__assign({ className: classNames.root }, divProps, { ref: mergedRootRefs }),
+            React.createElement("div", tslib_1.__assign({ role: "radiogroup" }, (ariaLabelledBy && { 'aria-labelledby': ariaLabelledBy }), { onFocus: onRadioFocus }),
+                label && (React.createElement(Label_1.Label, { className: classNames.label, required: required, id: labelId, disabled: disabled }, label)),
+                React.createElement("div", { className: classNames.flexContainer }, options.map(function (option) {
+                    return (React.createElement(index_1.ChoiceGroupOption, tslib_1.__assign({ itemKey: option.key }, option, { key: option.key, onBlur: onBlur, onFocus: onFocus, onChange: onOptionChange, focused: option.key === keyFocused, checked: option.key === keyChecked, disabled: option.disabled || disabled, id: getOptionId(option, id), labelId: option.labelId || "".concat(labelId, "-").concat(option.key), name: name || id, required: required })));
+                })))));
+    });
+    exports.ChoiceGroupBase.displayName = COMPONENT_NAME;
+    function useDebugWarnings(props) {
+        
+    }
+});
+//# sourceMappingURL=ChoiceGroup.base.js.map

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroup.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { IChoiceGroupProps } from './ChoiceGroup.types';
+export declare const ChoiceGroup: React.FunctionComponent<IChoiceGroupProps>;

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroup.js

@@ -0,0 +1,7 @@
+define(["require", "exports", "../../Utilities", "./ChoiceGroup.base", "./ChoiceGroup.styles"], function (require, exports, Utilities_1, ChoiceGroup_base_1, ChoiceGroup_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ChoiceGroup = void 0;
+    exports.ChoiceGroup = (0, Utilities_1.styled)(ChoiceGroup_base_1.ChoiceGroupBase, ChoiceGroup_styles_1.getStyles, undefined, { scope: 'ChoiceGroup' });
+});
+//# sourceMappingURL=ChoiceGroup.js.map

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceGroup.js","sourceRoot":"../src/","sources":["components/ChoiceGroup/ChoiceGroup.tsx"],"names":[],"mappings":";;;;IAMa,QAAA,WAAW,GAA+C,IAAA,kBAAM,EAI3E,kCAAe,EAAE,8BAAS,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { ChoiceGroupBase } from './ChoiceGroup.base';\nimport { getStyles } from './ChoiceGroup.styles';\nimport type { IChoiceGroupProps, IChoiceGroupStyles, IChoiceGroupStyleProps } from './ChoiceGroup.types';\n\nexport const ChoiceGroup: React.FunctionComponent<IChoiceGroupProps> = styled<\n  IChoiceGroupProps,\n  IChoiceGroupStyleProps,\n  IChoiceGroupStyles\n>(ChoiceGroupBase, getStyles, undefined, { scope: 'ChoiceGroup' });\n"]}

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroup.styles.d.ts

@@ -0,0 +1,2 @@
+import type { IChoiceGroupStyleProps, IChoiceGroupStyles } from './ChoiceGroup.types';
+export declare const getStyles: (props: IChoiceGroupStyleProps) => IChoiceGroupStyles;

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroup.styles.js

@@ -0,0 +1,33 @@
+define(["require", "exports", "../../Styling"], function (require, exports, Styling_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    var GlobalClassNames = {
+        root: 'ms-ChoiceFieldGroup',
+        flexContainer: 'ms-ChoiceFieldGroup-flexContainer',
+    };
+    var getStyles = function (props) {
+        var className = props.className, optionsContainIconOrImage = props.optionsContainIconOrImage, theme = props.theme;
+        var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
+        return {
+            root: [
+                className,
+                classNames.root,
+                theme.fonts.medium,
+                {
+                    display: 'block',
+                },
+            ],
+            flexContainer: [
+                classNames.flexContainer,
+                optionsContainIconOrImage && {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                },
+            ],
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=ChoiceGroup.styles.js.map

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceGroup.styles.js","sourceRoot":"../src/","sources":["components/ChoiceGroup/ChoiceGroup.styles.ts"],"names":[],"mappings":";;;;IAGA,IAAM,gBAAgB,GAAG;QACvB,IAAI,EAAE,qBAAqB;QAC3B,aAAa,EAAE,mCAAmC;KACnD,CAAC;IAEK,IAAM,SAAS,GAAG,UAAC,KAA6B;QAC7C,IAAA,SAAS,GAAuC,KAAK,UAA5C,EAAE,yBAAyB,GAAY,KAAK,0BAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAE9D,IAAM,UAAU,GAAG,IAAA,6BAAmB,EAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;QAEhE,OAAO;YACL,IAAI,EAAE;gBACJ,SAAS;gBACT,UAAU,CAAC,IAAI;gBACf,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB;oBACE,OAAO,EAAE,OAAO;iBACjB;aACF;YACD,aAAa,EAAE;gBACb,UAAU,CAAC,aAAa;gBACxB,yBAAyB,IAAI;oBAC3B,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,MAAM;iBACjB;aACF;SACF,CAAC;IACJ,CAAC,CAAC;IAvBW,QAAA,SAAS,aAuBpB","sourcesContent":["import { getGlobalClassNames } from '../../Styling';\nimport type { IChoiceGroupStyleProps, IChoiceGroupStyles } from './ChoiceGroup.types';\n\nconst GlobalClassNames = {\n  root: 'ms-ChoiceFieldGroup',\n  flexContainer: 'ms-ChoiceFieldGroup-flexContainer',\n};\n\nexport const getStyles = (props: IChoiceGroupStyleProps): IChoiceGroupStyles => {\n  const { className, optionsContainIconOrImage, theme } = props;\n\n  const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n  return {\n    root: [\n      className,\n      classNames.root,\n      theme.fonts.medium,\n      {\n        display: 'block',\n      },\n    ],\n    flexContainer: [\n      classNames.flexContainer,\n      optionsContainIconOrImage && {\n        display: 'flex',\n        flexDirection: 'row',\n        flexWrap: 'wrap',\n      },\n    ],\n  };\n};\n"]}

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroup.types.d.ts

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import type { IIconProps } from '../../Icon';
+import type { IStyle, ITheme } from '../../Styling';
+import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';
+import type { IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles, IChoiceGroupOptionProps } from './ChoiceGroupOption/ChoiceGroupOption.types';
+/**
+ * {@docCategory ChoiceGroup}
+ */
+export interface IChoiceGroup {
+    /**
+     * Gets the current checked option.
+     */
+    checkedOption: IChoiceGroupOption | undefined;
+    /**
+     * Sets focus to the checked option or the first enabled option in the ChoiceGroup.
+     */
+    focus: () => void;
+}
+/**
+ * {@docCategory ChoiceGroup}
+ */
+export interface IChoiceGroupProps extends React.InputHTMLAttributes<HTMLElement | HTMLInputElement>, React.RefAttributes<HTMLDivElement> {
+    /**
+     * Optional callback to access the `IChoiceGroup` interface. Use this instead of `ref` for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<IChoiceGroup>;
+    /**
+     * The options for the choice group.
+     */
+    options?: IChoiceGroupOption[];
+    /**
+     * The key of the option that will be initially checked.
+     */
+    defaultSelectedKey?: string | number;
+    /**
+     * The key of the selected option. If you provide this, you must maintain selection
+     * state by observing onChange events and passing a new value in when changed.
+     */
+    selectedKey?: string | number | null;
+    /**
+     * A callback for receiving a notification when the choice has been changed.
+     */
+    onChange?: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => void;
+    /**
+     * Descriptive label for the choice group.
+     */
+    label?: string;
+    /**
+     * Theme (provided through customization).
+     */
+    theme?: ITheme;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IChoiceGroupStyleProps, IChoiceGroupStyles>;
+    /**
+     * ID of an element to use as the aria label for this ChoiceGroup.
+     */
+    ariaLabelledBy?: string;
+}
+/**
+ * {@docCategory ChoiceGroup}
+ */
+export interface IChoiceGroupOption extends Omit<React.InputHTMLAttributes<HTMLElement | HTMLInputElement>, 'checked'> {
+    /**
+     * A required key to uniquely identify the option.
+     */
+    key: string;
+    /**
+     * The text string for the option.
+     */
+    text: string;
+    /**
+     * Used to customize option rendering.
+     */
+    onRenderField?: IRenderFunction<IChoiceGroupOption & IChoiceGroupOptionProps>;
+    /**
+     * Used to customize label rendering.
+     */
+    onRenderLabel?: IRenderFunction<IChoiceGroupOption & IChoiceGroupOptionProps>;
+    /**
+     * Props for an icon to display with this option.
+     */
+    iconProps?: IIconProps;
+    /**
+     * Image to display with this option.
+     */
+    imageSrc?: string;
+    /**
+     * Alt text if the option is an image.
+     * @default `''` (empty string)
+     */
+    imageAlt?: string;
+    /**
+     * The src of image for choice field which is selected.
+     */
+    selectedImageSrc?: string;
+    /**
+     * The width and height of the image in px for choice field.
+     * @defaultvalue `{ width: 32, height: 32 }`
+     */
+    imageSize?: {
+        width: number;
+        height: number;
+    };
+    /**
+     * Whether or not the option is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * ID used on the option's input element.
+     */
+    id?: string;
+    /**
+     * ID used on the option's label.
+     */
+    labelId?: string;
+    /**
+     * Aria label of the option for the benefit of screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles>;
+}
+/**
+ * {@docCategory ChoiceGroup}
+ */
+export interface IChoiceGroupStyleProps {
+    theme: ITheme;
+    className?: string;
+    optionsContainIconOrImage?: boolean;
+}
+/**
+ * {@docCategory ChoiceGroup}
+ */
+export interface IChoiceGroupStyles {
+    root?: IStyle;
+    label?: IStyle;
+    flexContainer?: IStyle;
+}

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroup.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=ChoiceGroup.types.js.map

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceGroup.types.js","sourceRoot":"../src/","sources":["components/ChoiceGroup/ChoiceGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IIconProps } from '../../Icon';\nimport type { IStyle, ITheme } from '../../Styling';\nimport type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';\nimport type {\n  IChoiceGroupOptionStyleProps,\n  IChoiceGroupOptionStyles,\n  IChoiceGroupOptionProps,\n} from './ChoiceGroupOption/ChoiceGroupOption.types';\n\n/**\n * {@docCategory ChoiceGroup}\n */\nexport interface IChoiceGroup {\n  /**\n   * Gets the current checked option.\n   */\n  checkedOption: IChoiceGroupOption | undefined;\n\n  /**\n   * Sets focus to the checked option or the first enabled option in the ChoiceGroup.\n   */\n  focus: () => void;\n}\n\n/**\n * {@docCategory ChoiceGroup}\n */\nexport interface IChoiceGroupProps\n  extends React.InputHTMLAttributes<HTMLElement | HTMLInputElement>,\n    React.RefAttributes<HTMLDivElement> {\n  /**\n   * Optional callback to access the `IChoiceGroup` interface. Use this instead of `ref` for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: IRefObject<IChoiceGroup>;\n\n  /**\n   * The options for the choice group.\n   */\n  options?: IChoiceGroupOption[];\n\n  /**\n   * The key of the option that will be initially checked.\n   */\n  // TODO (Fabric 8?): defaultSelectedKey/selectedKey allow numbers but IChoiceGroupOption doesn't.\n  // This should be consistent one way or the other everywhere.\n  defaultSelectedKey?: string | number;\n\n  /**\n   * The key of the selected option. If you provide this, you must maintain selection\n   * state by observing onChange events and passing a new value in when changed.\n   */\n  selectedKey?: string | number | null;\n\n  /**\n   * A callback for receiving a notification when the choice has been changed.\n   */\n  onChange?: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => void;\n\n  /**\n   * Descriptive label for the choice group.\n   */\n  label?: string;\n\n  /**\n   * Theme (provided through customization).\n   */\n  theme?: ITheme;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IChoiceGroupStyleProps, IChoiceGroupStyles>;\n\n  /**\n   * ID of an element to use as the aria label for this ChoiceGroup.\n   */\n  ariaLabelledBy?: string;\n}\n\n/**\n * {@docCategory ChoiceGroup}\n */\nexport interface IChoiceGroupOption extends Omit<React.InputHTMLAttributes<HTMLElement | HTMLInputElement>, 'checked'> {\n  /**\n   * A required key to uniquely identify the option.\n   */\n  key: string;\n\n  /**\n   * The text string for the option.\n   */\n  text: string;\n\n  /**\n   * Used to customize option rendering.\n   */\n  onRenderField?: IRenderFunction<IChoiceGroupOption & IChoiceGroupOptionProps>;\n\n  /**\n   * Used to customize label rendering.\n   */\n  onRenderLabel?: IRenderFunction<IChoiceGroupOption & IChoiceGroupOptionProps>;\n\n  /**\n   * Props for an icon to display with this option.\n   */\n  iconProps?: IIconProps;\n\n  /**\n   * Image to display with this option.\n   */\n  imageSrc?: string;\n\n  /**\n   * Alt text if the option is an image.\n   * @default `''` (empty string)\n   */\n  imageAlt?: string;\n\n  /**\n   * The src of image for choice field which is selected.\n   */\n  selectedImageSrc?: string;\n\n  /**\n   * The width and height of the image in px for choice field.\n   * @defaultvalue `{ width: 32, height: 32 }`\n   */\n  imageSize?: { width: number; height: number };\n\n  /**\n   * Whether or not the option is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * ID used on the option's input element.\n   */\n  id?: string;\n\n  /**\n   * ID used on the option's label.\n   */\n  labelId?: string;\n\n  /**\n   * Aria label of the option for the benefit of screen reader users.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles>;\n}\n\n/**\n * {@docCategory ChoiceGroup}\n */\nexport interface IChoiceGroupStyleProps {\n  theme: ITheme;\n  className?: string;\n  optionsContainIconOrImage?: boolean;\n}\n\n/**\n * {@docCategory ChoiceGroup}\n */\nexport interface IChoiceGroupStyles {\n  root?: IStyle;\n  label?: IStyle;\n  flexContainer?: IStyle;\n}\n"]}

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { IChoiceGroupOptionProps } from './ChoiceGroupOption.types';
+export declare const ChoiceGroupOptionBase: React.FunctionComponent<IChoiceGroupOptionProps>;

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.js

@@ -0,0 +1,68 @@
+define(["require", "exports", "tslib", "react", "../../../Image", "../../../Icon", "../../../Utilities"], function (require, exports, tslib_1, React, Image_1, Icon_1, Utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ChoiceGroupOptionBase = void 0;
+    var getClassNames = (0, Utilities_1.classNamesFunction)();
+    var LARGE_IMAGE_SIZE = 71;
+    var DEFAULT_PROPS = {
+        // This ensures default imageSize value doesn't mutate. Mutation can cause style re-calcuation.
+        imageSize: { width: 32, height: 32 },
+    };
+    var ChoiceGroupOptionBase = function (propsWithoutDefaults) {
+        // Mix the `key` prop back in since custom render functions may be expecting it
+        // (React uses `key` internally rather than passing it through to the component)
+        var props = (0, Utilities_1.getPropsWithDefaults)(tslib_1.__assign(tslib_1.__assign({}, DEFAULT_PROPS), { key: propsWithoutDefaults.itemKey }), propsWithoutDefaults);
+        var ariaLabel = props.ariaLabel, focused = props.focused, required = props.required, theme = props.theme, iconProps = props.iconProps, imageSrc = props.imageSrc, imageSize = props.imageSize, disabled = props.disabled, checked = props.checked, id = props.id, styles = props.styles, name = props.name, rest = tslib_1.__rest(props, ["ariaLabel", "focused", "required", "theme", "iconProps", "imageSrc", "imageSize", "disabled", "checked", "id", "styles", "name"]);
+        var classNames = getClassNames(styles, {
+            theme: theme,
+            hasIcon: !!iconProps,
+            hasImage: !!imageSrc,
+            checked: checked,
+            disabled: disabled,
+            imageIsLarge: !!imageSrc && (imageSize.width > LARGE_IMAGE_SIZE || imageSize.height > LARGE_IMAGE_SIZE),
+            imageSize: imageSize,
+            focused: focused,
+        });
+        var _a = (0, Utilities_1.getNativeProps)(rest, Utilities_1.inputProperties), className = _a.className, nativeProps = tslib_1.__rest(_a, ["className"]);
+        var defaultOnRenderLabel = function () {
+            return (React.createElement("span", { id: props.labelId, className: "ms-ChoiceFieldLabel" }, props.text));
+        };
+        var defaultOnRenderField = function () {
+            var _a = props.imageAlt, imageAlt = _a === void 0 ? '' : _a, selectedImageSrc = props.selectedImageSrc;
+            var onRenderLabel = props.onRenderLabel
+                ? (0, Utilities_1.composeRenderFunction)(props.onRenderLabel, defaultOnRenderLabel)
+                : defaultOnRenderLabel;
+            var label = onRenderLabel(tslib_1.__assign(tslib_1.__assign({}, props), { key: props.itemKey }));
+            return (React.createElement("label", { htmlFor: id, className: classNames.field },
+                imageSrc && (React.createElement("div", { className: classNames.innerField },
+                    React.createElement("div", { className: classNames.imageWrapper },
+                        React.createElement(Image_1.Image, tslib_1.__assign({ src: imageSrc, alt: imageAlt }, imageSize))),
+                    React.createElement("div", { className: classNames.selectedImageWrapper },
+                        React.createElement(Image_1.Image, tslib_1.__assign({ src: selectedImageSrc, alt: imageAlt }, imageSize))))),
+                iconProps && (React.createElement("div", { className: classNames.innerField },
+                    React.createElement("div", { className: classNames.iconWrapper },
+                        React.createElement(Icon_1.Icon, tslib_1.__assign({}, iconProps))))),
+                imageSrc || iconProps ? React.createElement("div", { className: classNames.labelWrapper }, label) : label));
+        };
+        var _b = props.onRenderField, onRenderField = _b === void 0 ? defaultOnRenderField : _b;
+        var onChange = function (evt) {
+            var _a;
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, evt, tslib_1.__assign(tslib_1.__assign({}, props), { key: props.itemKey }));
+        };
+        var onBlur = function (evt) {
+            var _a;
+            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, evt);
+        };
+        var onFocus = function (evt) {
+            var _a;
+            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, evt, tslib_1.__assign(tslib_1.__assign({}, props), { key: props.itemKey }));
+        };
+        return (React.createElement("div", { className: classNames.root },
+            React.createElement("div", { className: classNames.choiceFieldWrapper },
+                React.createElement("input", tslib_1.__assign({ "aria-label": ariaLabel, id: id, className: (0, Utilities_1.css)(classNames.input, className), type: "radio", name: name, disabled: disabled, checked: checked, required: required }, nativeProps, { onChange: onChange, onFocus: onFocus, onBlur: onBlur })),
+                onRenderField(tslib_1.__assign(tslib_1.__assign({}, props), { key: props.itemKey }), defaultOnRenderField))));
+    };
+    exports.ChoiceGroupOptionBase = ChoiceGroupOptionBase;
+    exports.ChoiceGroupOptionBase.displayName = 'ChoiceGroupOption';
+});
+//# sourceMappingURL=ChoiceGroupOption.base.js.map

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { IChoiceGroupOptionProps } from './ChoiceGroupOption.types';
+export declare const ChoiceGroupOption: React.FunctionComponent<IChoiceGroupOptionProps>;

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.js

@@ -0,0 +1,7 @@
+define(["require", "exports", "../../../Utilities", "./ChoiceGroupOption.base", "./ChoiceGroupOption.styles"], function (require, exports, Utilities_1, ChoiceGroupOption_base_1, ChoiceGroupOption_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ChoiceGroupOption = void 0;
+    exports.ChoiceGroupOption = (0, Utilities_1.styled)(ChoiceGroupOption_base_1.ChoiceGroupOptionBase, ChoiceGroupOption_styles_1.getStyles, undefined, { scope: 'ChoiceGroupOption' });
+});
+//# sourceMappingURL=ChoiceGroupOption.js.map

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceGroupOption.js","sourceRoot":"../src/","sources":["components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.tsx"],"names":[],"mappings":";;;;IAUa,QAAA,iBAAiB,GAAqD,IAAA,kBAAM,EAIvF,8CAAqB,EAAE,oCAAS,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { ChoiceGroupOptionBase } from './ChoiceGroupOption.base';\nimport { getStyles } from './ChoiceGroupOption.styles';\nimport type {\n  IChoiceGroupOptionProps,\n  IChoiceGroupOptionStyleProps,\n  IChoiceGroupOptionStyles,\n} from './ChoiceGroupOption.types';\n\nexport const ChoiceGroupOption: React.FunctionComponent<IChoiceGroupOptionProps> = styled<\n  IChoiceGroupOptionProps,\n  IChoiceGroupOptionStyleProps,\n  IChoiceGroupOptionStyles\n>(ChoiceGroupOptionBase, getStyles, undefined, { scope: 'ChoiceGroupOption' });\n"]}

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.styles.d.ts

@@ -0,0 +1,2 @@
+import type { IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles } from './ChoiceGroupOption.types';
+export declare const getStyles: (props: IChoiceGroupOptionStyleProps) => IChoiceGroupOptionStyles;

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.styles.js

@@ -0,0 +1,408 @@
+define(["require", "exports", "tslib", "../../../Styling", "../../../Utilities"], function (require, exports, tslib_1, Styling_1, Utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    var GlobalClassNames = {
+        root: 'ms-ChoiceField',
+        choiceFieldWrapper: 'ms-ChoiceField-wrapper',
+        input: 'ms-ChoiceField-input',
+        field: 'ms-ChoiceField-field',
+        innerField: 'ms-ChoiceField-innerField',
+        imageWrapper: 'ms-ChoiceField-imageWrapper',
+        iconWrapper: 'ms-ChoiceField-iconWrapper',
+        labelWrapper: 'ms-ChoiceField-labelWrapper',
+        checked: 'is-checked',
+    };
+    var labelWrapperLineHeight = 15;
+    var labelWrapperHeight = labelWrapperLineHeight * 2 + 2; // adding 2px height to ensure text doesn't get cutoff
+    var iconSize = 32;
+    var choiceFieldSize = 20;
+    var choiceFieldTransitionDuration = '200ms';
+    var choiceFieldTransitionTiming = 'cubic-bezier(.4, 0, .23, 1)';
+    var radioButtonSpacing = 3;
+    var radioButtonInnerSize = 5;
+    function getChoiceGroupFocusStyle(focusBorderColor, hasIconOrImage) {
+        var _a, _b;
+        return [
+            'is-inFocus',
+            {
+                selectors: (_a = {},
+                    _a[".".concat(Utilities_1.IsFocusVisibleClassName, " &, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &")] = {
+                        position: 'relative',
+                        outline: 'transparent',
+                        selectors: {
+                            '::-moz-focus-inner': {
+                                border: 0,
+                            },
+                            ':after': {
+                                content: '""',
+                                top: -2,
+                                right: -2,
+                                bottom: -2,
+                                left: -2,
+                                pointerEvents: 'none',
+                                border: "1px solid ".concat(focusBorderColor),
+                                position: 'absolute',
+                                selectors: (_b = {},
+                                    _b[Styling_1.HighContrastSelector] = {
+                                        borderColor: 'WindowText',
+                                        borderWidth: hasIconOrImage ? 1 : 2,
+                                    },
+                                    _b),
+                            },
+                        },
+                    },
+                    _a),
+            },
+        ];
+    }
+    function getImageWrapperStyle(isSelectedImageWrapper, className, checked) {
+        return [
+            className,
+            {
+                paddingBottom: 2,
+                transitionProperty: 'opacity',
+                transitionDuration: choiceFieldTransitionDuration,
+                transitionTimingFunction: 'ease',
+                selectors: {
+                    '.ms-Image': {
+                        display: 'inline-block',
+                        borderStyle: 'none',
+                    },
+                },
+            },
+            (checked ? !isSelectedImageWrapper : isSelectedImageWrapper) && [
+                'is-hidden',
+                {
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    width: '100%',
+                    height: '100%',
+                    overflow: 'hidden',
+                    opacity: 0,
+                },
+            ],
+        ];
+    }
+    var getStyles = function (props) {
+        var _a, _b, _c, _d, _e;
+        var theme = props.theme, hasIcon = props.hasIcon, hasImage = props.hasImage, checked = props.checked, disabled = props.disabled, imageIsLarge = props.imageIsLarge, focused = props.focused, imageSize = props.imageSize;
+        var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;
+        var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
+        // Tokens
+        // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.smallInputBorder
+        var circleBorderColor = palette.neutralPrimary;
+        var circleHoveredBorderColor = semanticColors.inputBorderHovered;
+        var circleCheckedBorderColor = semanticColors.inputBackgroundChecked;
+        // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered
+        var circleCheckedHoveredBorderColor = palette.themeDark;
+        var circleDisabledBorderColor = semanticColors.disabledBodySubtext;
+        var circleBackgroundColor = semanticColors.bodyBackground;
+        var dotUncheckedHoveredColor = palette.neutralSecondary;
+        var dotCheckedColor = semanticColors.inputBackgroundChecked;
+        // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered
+        var dotCheckedHoveredColor = palette.themeDark;
+        var dotDisabledColor = semanticColors.disabledBodySubtext;
+        // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.bodyTextChecked
+        var labelHoverFocusColor = palette.neutralDark;
+        var focusBorderColor = semanticColors.focusBorder;
+        var iconOrImageChoiceBorderUncheckedHoveredColor = semanticColors.inputBorderHovered;
+        // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered
+        var iconOrImageChoiceBorderCheckedColor = semanticColors.inputBackgroundChecked;
+        var iconOrImageChoiceBorderCheckedHoveredColor = palette.themeDark;
+        var iconOrImageChoiceBackgroundColor = palette.neutralLighter;
+        var fieldHoverOrFocusProperties = {
+            selectors: {
+                '.ms-ChoiceFieldLabel': {
+                    color: labelHoverFocusColor,
+                },
+                ':before': {
+                    borderColor: checked ? circleCheckedHoveredBorderColor : circleHoveredBorderColor,
+                },
+                ':after': [
+                    !hasIcon &&
+                        !hasImage &&
+                        !checked && {
+                        content: '""',
+                        transitionProperty: 'background-color',
+                        left: 5,
+                        top: 5,
+                        width: 10,
+                        height: 10,
+                        backgroundColor: dotUncheckedHoveredColor,
+                    },
+                    checked && {
+                        borderColor: dotCheckedHoveredColor,
+                        background: dotCheckedHoveredColor,
+                    },
+                ],
+            },
+        };
+        var enabledFieldWithImageHoverOrFocusProperties = {
+            borderColor: checked ? iconOrImageChoiceBorderCheckedHoveredColor : iconOrImageChoiceBorderUncheckedHoveredColor,
+            selectors: {
+                ':before': {
+                    opacity: 1,
+                    borderColor: checked ? circleCheckedHoveredBorderColor : circleHoveredBorderColor,
+                },
+            },
+        };
+        var circleAreaProperties = [
+            {
+                content: '""',
+                display: 'inline-block',
+                backgroundColor: circleBackgroundColor,
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: circleBorderColor,
+                width: choiceFieldSize,
+                height: choiceFieldSize,
+                fontWeight: 'normal',
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                boxSizing: 'border-box',
+                transitionProperty: 'border-color',
+                transitionDuration: choiceFieldTransitionDuration,
+                transitionTimingFunction: choiceFieldTransitionTiming,
+                borderRadius: '50%',
+            },
+            disabled && {
+                borderColor: circleDisabledBorderColor,
+                selectors: (_a = {},
+                    _a[Styling_1.HighContrastSelector] = tslib_1.__assign({ borderColor: 'GrayText', background: 'Window' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
+                    _a),
+            },
+            checked && {
+                borderColor: disabled ? circleDisabledBorderColor : circleCheckedBorderColor,
+                selectors: (_b = {},
+                    _b[Styling_1.HighContrastSelector] = {
+                        borderColor: 'Highlight',
+                        background: 'Window',
+                        forcedColorAdjust: 'none',
+                    },
+                    _b),
+            },
+            (hasIcon || hasImage) && {
+                top: radioButtonSpacing,
+                right: radioButtonSpacing,
+                left: 'auto', // To reset the value of 'left' to its default value, so that 'right' works
+                opacity: checked ? 1 : 0,
+            },
+        ];
+        var dotAreaProperties = [
+            {
+                content: '""',
+                width: 0,
+                height: 0,
+                borderRadius: '50%',
+                position: 'absolute',
+                left: choiceFieldSize / 2,
+                right: 0,
+                transitionProperty: 'border-width',
+                transitionDuration: choiceFieldTransitionDuration,
+                transitionTimingFunction: choiceFieldTransitionTiming,
+                boxSizing: 'border-box',
+            },
+            checked && {
+                borderWidth: 5,
+                borderStyle: 'solid',
+                borderColor: disabled ? dotDisabledColor : dotCheckedColor,
+                background: dotCheckedColor,
+                left: 5,
+                top: 5,
+                width: 10,
+                height: 10,
+                selectors: (_c = {},
+                    _c[Styling_1.HighContrastSelector] = {
+                        borderColor: 'Highlight',
+                        forcedColorAdjust: 'none',
+                    },
+                    _c),
+            },
+            checked &&
+                (hasIcon || hasImage) && {
+                top: radioButtonSpacing + radioButtonInnerSize,
+                right: radioButtonSpacing + radioButtonInnerSize,
+                left: 'auto', // To reset the value of 'left' to its default value, so that 'right' works
+            },
+        ];
+        return {
+            root: [
+                classNames.root,
+                theme.fonts.medium,
+                {
+                    display: 'flex',
+                    alignItems: 'center',
+                    boxSizing: 'border-box',
+                    color: semanticColors.bodyText,
+                    minHeight: 26,
+                    border: 'none',
+                    position: 'relative',
+                    marginTop: 8,
+                    selectors: {
+                        '.ms-ChoiceFieldLabel': {
+                            display: 'inline-block',
+                        },
+                    },
+                },
+                !hasIcon &&
+                    !hasImage && {
+                    selectors: {
+                        '.ms-ChoiceFieldLabel': {
+                            paddingLeft: '26px',
+                        },
+                    },
+                },
+                hasImage && 'ms-ChoiceField--image',
+                hasIcon && 'ms-ChoiceField--icon',
+                (hasIcon || hasImage) && {
+                    display: 'inline-flex',
+                    fontSize: 0,
+                    margin: '0 4px 4px 0',
+                    paddingLeft: 0,
+                    backgroundColor: iconOrImageChoiceBackgroundColor,
+                    height: '100%',
+                },
+            ],
+            choiceFieldWrapper: [
+                classNames.choiceFieldWrapper,
+                focused && getChoiceGroupFocusStyle(focusBorderColor, hasIcon || hasImage),
+            ],
+            // The hidden input
+            input: [
+                classNames.input,
+                {
+                    position: 'absolute',
+                    opacity: 0,
+                    top: 0,
+                    right: 0,
+                    width: '100%',
+                    height: '100%',
+                    margin: 0,
+                },
+                disabled && 'is-disabled',
+            ],
+            field: [
+                classNames.field,
+                checked && classNames.checked,
+                {
+                    display: 'inline-block',
+                    cursor: 'pointer',
+                    marginTop: 0,
+                    position: 'relative',
+                    verticalAlign: 'top',
+                    userSelect: 'none',
+                    minHeight: 20,
+                    selectors: {
+                        ':hover': !disabled && fieldHoverOrFocusProperties,
+                        ':focus': !disabled && fieldHoverOrFocusProperties,
+                        // The circle
+                        ':before': circleAreaProperties,
+                        // The dot
+                        ':after': dotAreaProperties,
+                    },
+                },
+                hasIcon && 'ms-ChoiceField--icon',
+                hasImage && 'ms-ChoiceField-field--image',
+                (hasIcon || hasImage) && {
+                    boxSizing: 'content-box',
+                    cursor: 'pointer',
+                    paddingTop: 22,
+                    margin: 0,
+                    textAlign: 'center',
+                    transitionProperty: 'all',
+                    transitionDuration: choiceFieldTransitionDuration,
+                    transitionTimingFunction: 'ease',
+                    border: '1px solid transparent',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                },
+                checked && {
+                    borderColor: iconOrImageChoiceBorderCheckedColor,
+                },
+                (hasIcon || hasImage) &&
+                    !disabled && {
+                    selectors: {
+                        ':hover': enabledFieldWithImageHoverOrFocusProperties,
+                        ':focus': enabledFieldWithImageHoverOrFocusProperties,
+                    },
+                },
+                disabled && {
+                    cursor: 'default',
+                    selectors: {
+                        '.ms-ChoiceFieldLabel': {
+                            color: semanticColors.disabledBodyText,
+                            selectors: (_d = {},
+                                _d[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'GrayText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
+                                _d),
+                        },
+                    },
+                },
+                checked &&
+                    disabled && {
+                    borderColor: iconOrImageChoiceBackgroundColor,
+                },
+            ],
+            innerField: [
+                classNames.innerField,
+                hasImage && {
+                    // using non-null assertion because we have a default in `ChoiceGroupOptionBase` class.
+                    height: imageSize.height,
+                    width: imageSize.width,
+                },
+                (hasIcon || hasImage) && {
+                    position: 'relative',
+                    display: 'inline-block',
+                    paddingLeft: 30,
+                    paddingRight: 30,
+                },
+                (hasIcon || hasImage) &&
+                    imageIsLarge && {
+                    paddingLeft: 24,
+                    paddingRight: 24,
+                },
+                (hasIcon || hasImage) &&
+                    disabled && {
+                    opacity: 0.25,
+                    selectors: (_e = {},
+                        _e[Styling_1.HighContrastSelector] = {
+                            color: 'GrayText',
+                            opacity: 1,
+                        },
+                        _e),
+                },
+            ],
+            imageWrapper: getImageWrapperStyle(false, classNames.imageWrapper, checked),
+            selectedImageWrapper: getImageWrapperStyle(true, classNames.imageWrapper, checked),
+            iconWrapper: [
+                classNames.iconWrapper,
+                {
+                    fontSize: iconSize,
+                    lineHeight: iconSize,
+                    height: iconSize,
+                },
+            ],
+            labelWrapper: [
+                classNames.labelWrapper,
+                fonts.medium,
+                (hasIcon || hasImage) && {
+                    display: 'block',
+                    position: 'relative',
+                    margin: '4px 8px 2px 8px',
+                    height: labelWrapperHeight,
+                    lineHeight: labelWrapperLineHeight,
+                    // using non-null assertion because we have a default in `ChoiceGroupOptionBase` class.
+                    maxWidth: imageSize.width * 2,
+                    overflow: 'hidden',
+                    whiteSpace: 'pre-wrap',
+                },
+            ],
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=ChoiceGroupOption.styles.js.map

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.types.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import type { ITheme, IStyle } from '../../../Styling';
+import type { IRefObject } from '../../../Utilities';
+import type { IChoiceGroupOption } from '../ChoiceGroup.types';
+/**
+ * {@docCategory ChoiceGroup}
+ */
+export interface IChoiceGroupOptionProps extends Omit<IChoiceGroupOption, 'key'> {
+    /**
+     * @deprecated Not used.
+     */
+    componentRef?: IRefObject<IChoiceGroupOption>;
+    /**
+     * Unique key for the option, set based on `IChoiceGroupOption.key`.
+     */
+    itemKey: string;
+    /**
+     * The option key. This will always be provided for callbacks (copied from `itemKey`) but is
+     * optional when manually creating ChoiceGroupOptions.
+     */
+    key?: string;
+    /**
+     * Whether or not the option is checked. Set by `ChoiceGroup` based on `selectedKey` or
+     * `defaultSelectedKey` from `IChoiceGroupProps`.
+     */
+    checked?: boolean;
+    /**
+     * Callback for the ChoiceGroup creating the option to be notified when the choice has been changed.
+     */
+    onChange?: (evt?: React.FormEvent<HTMLElement | HTMLInputElement>, props?: IChoiceGroupOption & IChoiceGroupOptionProps) => void;
+    /**
+     * Callback for the ChoiceGroup creating the option to be notified when the choice has received focus.
+     */
+    onFocus?: (ev?: React.FocusEvent<HTMLElement | HTMLInputElement>, props?: IChoiceGroupOption & IChoiceGroupOptionProps) => void | undefined;
+    /**
+     * Callback for the ChoiceGroup creating the option to be notified when the choice has lost focus.
+     */
+    onBlur?: (ev?: React.FocusEvent<HTMLElement>, props?: IChoiceGroupOption & IChoiceGroupOptionProps) => void;
+    /**
+     * Indicates if the ChoiceGroupOption should appear focused, visually
+     */
+    focused?: boolean;
+    /**
+     * Theme (provided through customization).
+     */
+    theme?: ITheme;
+    /**
+     * If true, an option must be selected in the ChoiceGroup.
+     */
+    required?: boolean;
+    /**
+     * This value is used to group each ChoiceGroupOption into the same logical ChoiceGroup
+     */
+    name?: string;
+}
+/**
+ * Defines props needed to construct styles.
+ * {@docCategory ChoiceGroup}
+ */
+export interface IChoiceGroupOptionStyleProps {
+    /** Theme provided by High-Order Component. */
+    theme: ITheme;
+    /** Whether the option has an icon. */
+    hasIcon?: boolean;
+    /** Whether the option icon is an image. */
+    hasImage?: boolean;
+    /** Whether the option is checked or not. */
+    checked?: boolean;
+    /** Whether the option is disabled or not. */
+    disabled?: boolean;
+    /** Whether the image width or height are higher than `71`. */
+    imageIsLarge?: boolean;
+    /**
+     * Image sizes used when `hasImage` or `hasIcon` style props are enabled.
+     * @defaultvalue `{ height: 32, width: 32 }`
+     */
+    imageSize?: {
+        height: number;
+        width: number;
+    };
+    /** Whether the option is in focus or not. */
+    focused?: boolean;
+}
+/**
+ * {@docCategory ChoiceGroup}
+ */
+export interface IChoiceGroupOptionStyles {
+    root?: IStyle;
+    choiceFieldWrapper?: IStyle;
+    input?: IStyle;
+    field?: IStyle;
+    innerField?: IStyle;
+    imageWrapper?: IStyle;
+    selectedImageWrapper?: IStyle;
+    iconWrapper?: IStyle;
+    labelWrapper?: IStyle;
+}

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=ChoiceGroupOption.types.js.map

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceGroupOption.types.js","sourceRoot":"../src/","sources":["components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ITheme, IStyle } from '../../../Styling';\nimport type { IRefObject } from '../../../Utilities';\nimport type { IChoiceGroupOption } from '../ChoiceGroup.types';\n\n/**\n * {@docCategory ChoiceGroup}\n */\nexport interface IChoiceGroupOptionProps extends Omit<IChoiceGroupOption, 'key'> {\n  /**\n   * @deprecated Not used.\n   */\n  componentRef?: IRefObject<IChoiceGroupOption>;\n\n  /**\n   * Unique key for the option, set based on `IChoiceGroupOption.key`.\n   */\n  itemKey: string;\n\n  /**\n   * The option key. This will always be provided for callbacks (copied from `itemKey`) but is\n   * optional when manually creating ChoiceGroupOptions.\n   */\n  key?: string;\n\n  /**\n   * Whether or not the option is checked. Set by `ChoiceGroup` based on `selectedKey` or\n   * `defaultSelectedKey` from `IChoiceGroupProps`.\n   */\n  checked?: boolean;\n\n  /**\n   * Callback for the ChoiceGroup creating the option to be notified when the choice has been changed.\n   */\n  onChange?: (\n    evt?: React.FormEvent<HTMLElement | HTMLInputElement>,\n    props?: IChoiceGroupOption & IChoiceGroupOptionProps,\n  ) => void;\n\n  /**\n   * Callback for the ChoiceGroup creating the option to be notified when the choice has received focus.\n   */\n  onFocus?: (\n    ev?: React.FocusEvent<HTMLElement | HTMLInputElement>,\n    props?: IChoiceGroupOption & IChoiceGroupOptionProps,\n  ) => void | undefined;\n\n  /**\n   * Callback for the ChoiceGroup creating the option to be notified when the choice has lost focus.\n   */\n  onBlur?: (ev?: React.FocusEvent<HTMLElement>, props?: IChoiceGroupOption & IChoiceGroupOptionProps) => void;\n\n  /**\n   * Indicates if the ChoiceGroupOption should appear focused, visually\n   */\n  focused?: boolean;\n\n  /**\n   * Theme (provided through customization).\n   */\n  theme?: ITheme;\n\n  /**\n   * If true, an option must be selected in the ChoiceGroup.\n   */\n  required?: boolean;\n\n  /**\n   * This value is used to group each ChoiceGroupOption into the same logical ChoiceGroup\n   */\n  name?: string;\n}\n\n/**\n * Defines props needed to construct styles.\n * {@docCategory ChoiceGroup}\n */\nexport interface IChoiceGroupOptionStyleProps {\n  /** Theme provided by High-Order Component. */\n  theme: ITheme;\n\n  /** Whether the option has an icon. */\n  hasIcon?: boolean;\n\n  /** Whether the option icon is an image. */\n  hasImage?: boolean;\n\n  /** Whether the option is checked or not. */\n  checked?: boolean;\n\n  /** Whether the option is disabled or not. */\n  disabled?: boolean;\n\n  /** Whether the image width or height are higher than `71`. */\n  imageIsLarge?: boolean;\n\n  /**\n   * Image sizes used when `hasImage` or `hasIcon` style props are enabled.\n   * @defaultvalue `{ height: 32, width: 32 }`\n   */\n  imageSize?: { height: number; width: number };\n\n  /** Whether the option is in focus or not. */\n  focused?: boolean;\n}\n\n/**\n * {@docCategory ChoiceGroup}\n */\nexport interface IChoiceGroupOptionStyles {\n  root?: IStyle;\n  choiceFieldWrapper?: IStyle;\n  input?: IStyle;\n  field?: IStyle;\n  innerField?: IStyle;\n  imageWrapper?: IStyle;\n  selectedImageWrapper?: IStyle;\n  iconWrapper?: IStyle;\n  labelWrapper?: IStyle;\n}\n"]}

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroupOption/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChoiceGroupOption';
+export * from './ChoiceGroupOption.types';

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroupOption/index.js

@@ -0,0 +1,7 @@
+define(["require", "exports", "tslib", "./ChoiceGroupOption", "./ChoiceGroupOption.types"], function (require, exports, tslib_1, ChoiceGroupOption_1, ChoiceGroupOption_types_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(ChoiceGroupOption_1, exports);
+    tslib_1.__exportStar(ChoiceGroupOption_types_1, exports);
+});
+//# sourceMappingURL=index.js.map

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/ChoiceGroupOption/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ChoiceGroup/ChoiceGroupOption/index.ts"],"names":[],"mappings":";;;IAAA,mDAAoC;IACpC,yDAA0C","sourcesContent":["export * from './ChoiceGroupOption';\nexport * from './ChoiceGroupOption.types';\n"]}

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ChoiceGroup';
+export * from './ChoiceGroup.base';
+export * from './ChoiceGroup.types';
+export * from './ChoiceGroupOption/index';

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/index.js

@@ -0,0 +1,9 @@
+define(["require", "exports", "tslib", "./ChoiceGroup", "./ChoiceGroup.base", "./ChoiceGroup.types", "./ChoiceGroupOption/index"], function (require, exports, tslib_1, ChoiceGroup_1, ChoiceGroup_base_1, ChoiceGroup_types_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(ChoiceGroup_1, exports);
+    tslib_1.__exportStar(ChoiceGroup_base_1, exports);
+    tslib_1.__exportStar(ChoiceGroup_types_1, exports);
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=index.js.map

node_modules/@fluentui/react/lib-amd/components/ChoiceGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ChoiceGroup/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B;IAC9B,kDAAmC;IACnC,mDAAoC;IACpC,uCAA0C","sourcesContent":["export * from './ChoiceGroup';\nexport * from './ChoiceGroup.base';\nexport * from './ChoiceGroup.types';\nexport * from './ChoiceGroupOption/index';\n"]}