@fluentui/react-checkbox 9.0.12 → 9.0.14

package/lib-amd/components/Checkbox/useCheckboxStyles.js

@@ -0,0 +1,154 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-tabster", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_tabster_1, react_theme_1) {
+    "use strict";
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCheckboxStyles_unstable = exports.checkboxClassNames = void 0;
+    exports.checkboxClassNames = {
+        root: 'fui-Checkbox',
+        label: 'fui-Checkbox__label',
+        input: 'fui-Checkbox__input',
+        indicator: 'fui-Checkbox__indicator',
+    };
+    // The indicator size is used by the indicator and label styles
+    var indicatorSizeMedium = '16px';
+    var indicatorSizeLarge = '20px';
+    var useRootStyles = react_1.makeStyles({
+        base: tslib_1.__assign({ position: 'relative', display: 'inline-flex' }, react_tabster_1.createFocusOutlineStyle({ style: {}, selector: 'focus-within' })),
+    });
+    var useInputStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign({ boxSizing: 'border-box', cursor: 'pointer', height: '100%' }, react_1.shorthands.margin(0)), (_a = { opacity: 0, position: 'absolute', top: 0 }, _a[":not(:checked):not(:indeterminate) ~ ." + exports.checkboxClassNames.indicator + " > *"] = {
+            opacity: 0,
+        }, 
+        // Colors for the unchecked state
+        _a[':enabled:not(:checked):not(:indeterminate)'] = (_b = {},
+            _b["& ~ ." + exports.checkboxClassNames.label] = {
+                color: react_theme_1.tokens.colorNeutralForeground3,
+            },
+            _b["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessible)),
+            _b[':hover'] = (_c = {},
+                _c["& ~ ." + exports.checkboxClassNames.label] = {
+                    color: react_theme_1.tokens.colorNeutralForeground2,
+                },
+                _c["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessibleHover)),
+                _c),
+            _b[':active:hover'] = (_d = {},
+                _d["& ~ ." + exports.checkboxClassNames.label] = {
+                    color: react_theme_1.tokens.colorNeutralForeground1,
+                },
+                _d["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessiblePressed)),
+                _d),
+            _b), 
+        // Colors for the checked state
+        _a[':enabled:checked:not(:indeterminate)'] = (_e = {},
+            _e["& ~ ." + exports.checkboxClassNames.label] = {
+                color: react_theme_1.tokens.colorNeutralForeground1,
+            },
+            _e["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackground, color: react_theme_1.tokens.colorNeutralForegroundInverted }, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandBackground)),
+            _e[':hover'] = (_f = {},
+                _f["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundHover }, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandBackgroundHover)),
+                _f),
+            _e[':active:hover'] = (_g = {},
+                _g["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundPressed }, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandBackgroundPressed)),
+                _g),
+            _e), 
+        // Colors for the mixed state
+        _a[':enabled:indeterminate'] = (_h = {},
+            _h["& ~ ." + exports.checkboxClassNames.label] = {
+                color: react_theme_1.tokens.colorNeutralForeground1,
+            },
+            _h["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStroke)), { color: react_theme_1.tokens.colorCompoundBrandForeground1 }),
+            _h[':hover'] = (_j = {},
+                _j["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStrokeHover)), { color: react_theme_1.tokens.colorCompoundBrandForeground1Hover }),
+                _j),
+            _h[':active:hover'] = (_k = {},
+                _k["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandStrokePressed)), { color: react_theme_1.tokens.colorCompoundBrandForeground1Pressed }),
+                _k),
+            _h), _a[':disabled'] = (_l = {
+                cursor: 'default'
+            },
+            _l["& ~ ." + exports.checkboxClassNames.label] = {
+                cursor: 'default',
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                '@media (forced-colors: active)': {
+                    color: 'GrayText',
+                },
+            },
+            _l["& ~ ." + exports.checkboxClassNames.indicator] = tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { color: react_theme_1.tokens.colorNeutralForegroundDisabled, '@media (forced-colors: active)': {
+                    color: 'GrayText',
+                } }),
+            _l["& ~ ." + exports.checkboxClassNames.indicator + " svg"] = {
+                '@media (forced-colors: active)': {
+                    color: 'GrayText',
+                },
+            },
+            _l), _a)),
+        before: {
+            right: 0,
+        },
+        after: {
+            left: 0,
+        },
+        // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.
+        // This is done so that clicking on that "empty space" still toggles the checkbox.
+        medium: {
+            width: "calc(" + indicatorSizeMedium + " + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")",
+        },
+        large: {
+            width: "calc(" + indicatorSizeLarge + " + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")",
+        },
+    });
+    var useIndicatorStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ alignSelf: 'flex-start', boxSizing: 'border-box', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }, react_1.shorthands.overflow('hidden')), react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid')), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusSmall)), react_1.shorthands.margin(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalS)), { fill: 'currentColor', pointerEvents: 'none' }),
+        medium: {
+            fontSize: '12px',
+            height: indicatorSizeMedium,
+            width: indicatorSizeMedium,
+        },
+        large: {
+            fontSize: '16px',
+            height: indicatorSizeLarge,
+            width: indicatorSizeLarge,
+        },
+        circular: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)),
+    });
+    var useLabelStyles = react_1.makeStyles({
+        base: tslib_1.__assign({ alignSelf: 'center', color: 'inherit', cursor: 'pointer' }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalS)),
+        before: {
+            paddingRight: react_theme_1.tokens.spacingHorizontalXS,
+        },
+        after: {
+            paddingLeft: react_theme_1.tokens.spacingHorizontalXS,
+        },
+        // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.
+        // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.
+        medium: {
+            marginTop: "calc((" + indicatorSizeMedium + " - " + react_theme_1.tokens.lineHeightBase300 + ") / 2)",
+            marginBottom: "calc((" + indicatorSizeMedium + " - " + react_theme_1.tokens.lineHeightBase300 + ") / 2)",
+        },
+        large: {
+            marginTop: "calc((" + indicatorSizeLarge + " - " + react_theme_1.tokens.lineHeightBase300 + ") / 2)",
+            marginBottom: "calc((" + indicatorSizeLarge + " - " + react_theme_1.tokens.lineHeightBase300 + ") / 2)",
+        },
+    });
+    /**
+     * Apply styling to the Checkbox slots based on the state
+     */
+    var useCheckboxStyles_unstable = function (state) {
+        var rootStyles = useRootStyles();
+        state.root.className = react_1.mergeClasses(exports.checkboxClassNames.root, rootStyles.base, state.root.className);
+        var labelPosition = state.labelPosition, shape = state.shape, size = state.size;
+        var inputStyles = useInputStyles();
+        state.input.className = react_1.mergeClasses(exports.checkboxClassNames.input, inputStyles.base, inputStyles[size], inputStyles[labelPosition], state.input.className);
+        var indicatorStyles = useIndicatorStyles();
+        if (state.indicator) {
+            state.indicator.className = react_1.mergeClasses(exports.checkboxClassNames.indicator, indicatorStyles.base, indicatorStyles[size], shape === 'circular' && indicatorStyles.circular, state.indicator.className);
+        }
+        var labelStyles = useLabelStyles();
+        if (state.label) {
+            state.label.className = react_1.mergeClasses(exports.checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
+        }
+        return state;
+    };
+    exports.useCheckboxStyles_unstable = useCheckboxStyles_unstable;
+});
+//# sourceMappingURL=useCheckboxStyles.js.map

package/lib-amd/components/Checkbox/useCheckboxStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCheckboxStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n  root: 'fui-Checkbox',\n  label: 'fui-Checkbox__label',\n  input: 'fui-Checkbox__input',\n  indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootStyles = makeStyles({\n  base: {\n    position: 'relative',\n    display: 'inline-flex',\n    ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    ...shorthands.margin(0),\n    opacity: 0,\n    position: 'absolute',\n    top: 0,\n\n    // When unchecked, hide the the checkmark icon (child of the indicator slot)\n    [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n      opacity: 0,\n    },\n\n    // Colors for the unchecked state\n    ':enabled:not(:checked):not(:indeterminate)': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground3,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.label}`]: {\n          color: tokens.colorNeutralForeground2,\n        },\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.label}`]: {\n          color: tokens.colorNeutralForeground1,\n        },\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Colors for the checked state\n    ':enabled:checked:not(:indeterminate)': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n        },\n      },\n    },\n\n    // Colors for the mixed state\n    ':enabled:indeterminate': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n        color: tokens.colorCompoundBrandForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n          color: tokens.colorCompoundBrandForeground1Hover,\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n          color: tokens.colorCompoundBrandForeground1Pressed,\n        },\n      },\n    },\n\n    ':disabled': {\n      cursor: 'default',\n\n      [`& ~ .${checkboxClassNames.label}`]: {\n        cursor: 'default',\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n          color: 'GrayText',\n        },\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n          color: 'GrayText',\n        },\n      },\n      [`& ~ .${checkboxClassNames.indicator} svg`]: {\n        '@media (forced-colors: active)': {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n\n  before: {\n    right: 0,\n  },\n  after: {\n    left: 0,\n  },\n\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n  medium: {\n    width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n  large: {\n    width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-start',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n\n    ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n    ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n    fill: 'currentColor',\n    pointerEvents: 'none',\n  },\n\n  medium: {\n    fontSize: '12px',\n    height: indicatorSizeMedium,\n    width: indicatorSizeMedium,\n  },\n\n  large: {\n    fontSize: '16px',\n    height: indicatorSizeLarge,\n    width: indicatorSizeLarge,\n  },\n\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    color: 'inherit',\n    cursor: 'pointer',\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n  const { labelPosition, shape, size } = state;\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(\n    checkboxClassNames.input,\n    inputStyles.base,\n    inputStyles[size],\n    inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      checkboxClassNames.indicator,\n      indicatorStyles.base,\n      indicatorStyles[size],\n      shape === 'circular' && indicatorStyles.circular,\n      state.indicator.className,\n    );\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      checkboxClassNames.label,\n      labelStyles.base,\n      labelStyles[size],\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"]}

package/lib-amd/components/CheckboxField/CheckboxField.js

@@ -0,0 +1,19 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-field", "../../Checkbox"], function (require, exports, tslib_1, React, react_field_1, Checkbox_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CheckboxField = exports.checkboxFieldClassNames = void 0;
+    exports.checkboxFieldClassNames = react_field_1.getFieldClassNames('CheckboxField');
+    exports.CheckboxField = React.forwardRef(function (props, ref) {
+        var fieldLabel = props.fieldLabel, required = props.required, label = props.label, control = props.control, restOfProps = tslib_1.__rest(props, ["fieldLabel", "required", "label", "control"]);
+        props = tslib_1.__assign({ 
+            // Use the fieldLabel prop as the Field's label
+            label: fieldLabel, 
+            // Use the label prop as the Checkbox's label
+            control: tslib_1.__assign({ label: label, required: required }, control) }, restOfProps);
+        var state = react_field_1.useField_unstable(props, ref, { component: Checkbox_1.Checkbox, classNames: exports.checkboxFieldClassNames });
+        react_field_1.useFieldStyles_unstable(state);
+        return react_field_1.renderField_unstable(state);
+    });
+    exports.CheckboxField.displayName = 'CheckboxField';
+});
+//# sourceMappingURL=CheckboxField.js.map

package/lib-amd/components/CheckboxField/CheckboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx"],"names":[],"mappings":";;;;IAyBa,QAAA,uBAAuB,GAAG,gCAAkB,CAAC,eAAe,CAAC,CAAC;IAE9D,QAAA,aAAa,GAA4C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACxF,IAAA,UAAU,GAA+C,KAAK,WAApD,EAAE,QAAQ,GAAqC,KAAK,SAA1C,EAAE,KAAK,GAA8B,KAAK,MAAnC,EAAE,OAAO,GAAqB,KAAK,QAA1B,EAAK,WAAW,kBAAK,KAAK,EAAhE,8CAAwD,CAAF,CAAW;QAEvE,KAAK;YACH,+CAA+C;YAC/C,KAAK,EAAE,UAAU;YACjB,6CAA6C;YAC7C,OAAO,qBAAI,KAAK,OAAA,EAAE,QAAQ,UAAA,IAAK,OAAO,KACnC,WAAW,CACf,CAAC;QAEF,IAAM,KAAK,GAAG,+BAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,SAAS,EAAE,mBAAQ,EAAE,UAAU,EAAE,+BAAuB,EAAE,CAAC,CAAC;QAC1G,qCAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,kCAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CheckboxProps } from '../../Checkbox';\nimport { Checkbox } from '../../Checkbox';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n  /**\n   * The Checkbox's label.\n   */\n  label?: CheckboxProps['label'];\n\n  /**\n   * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n   * It is recommended to only set the `label` prop, and not `fieldLabel`.\n   */\n  fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n  const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n  props = {\n    // Use the fieldLabel prop as the Field's label\n    label: fieldLabel,\n    // Use the label prop as the Checkbox's label\n    control: { label, required, ...control },\n    ...restOfProps,\n  };\n\n  const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"]}

package/lib-amd/components/CheckboxField/index.js

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

package/lib-amd/components/CheckboxField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-checkbox/src/components/CheckboxField/index.ts"],"names":[],"mappings":";;;IAAA,+CAAgC","sourcesContent":["export * from './CheckboxField';\n"]}

package/lib-amd/index.js

@@ -0,0 +1,13 @@
+define(["require", "exports", "./Checkbox", "./CheckboxField"], function (require, exports, Checkbox_1, CheckboxField_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.checkboxFieldClassNames = exports.CheckboxField_unstable = exports.useCheckbox_unstable = exports.useCheckboxStyles_unstable = exports.renderCheckbox_unstable = exports.checkboxClassNames = exports.Checkbox = void 0;
+    Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
+    Object.defineProperty(exports, "checkboxClassNames", { enumerable: true, get: function () { return Checkbox_1.checkboxClassNames; } });
+    Object.defineProperty(exports, "renderCheckbox_unstable", { enumerable: true, get: function () { return Checkbox_1.renderCheckbox_unstable; } });
+    Object.defineProperty(exports, "useCheckboxStyles_unstable", { enumerable: true, get: function () { return Checkbox_1.useCheckboxStyles_unstable; } });
+    Object.defineProperty(exports, "useCheckbox_unstable", { enumerable: true, get: function () { return Checkbox_1.useCheckbox_unstable; } });
+    Object.defineProperty(exports, "CheckboxField_unstable", { enumerable: true, get: function () { return CheckboxField_1.CheckboxField; } });
+    Object.defineProperty(exports, "checkboxFieldClassNames", { enumerable: true, get: function () { return CheckboxField_1.checkboxFieldClassNames; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-checkbox/src/index.ts"],"names":[],"mappings":";;;;IACE,oGAAA,QAAQ,OAAA;IACR,8GAAA,kBAAkB,OAAA;IAClB,mHAAA,uBAAuB,OAAA;IACvB,sHAAA,0BAA0B,OAAA;IAC1B,gHAAA,oBAAoB,OAAA;IAIb,uHAAA,aAAa,OAA0B;IAAE,wHAAA,uBAAuB,OAAA","sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n\nexport { CheckboxField as CheckboxField_unstable, checkboxFieldClassNames } from './CheckboxField';\nexport type { CheckboxFieldProps as CheckboxFieldProps_unstable } from './CheckboxField';\n"]}

package/lib-commonjs/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Checkbox.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Checkbox/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/Checkbox.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Checkbox/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/CheckboxField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CheckboxField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/CheckboxField/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/CheckboxField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/CheckboxField/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useCheckbox_unstable(props, ref);\n\n  useCheckboxStyles_unstable(state);\n  return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,QAAA,gBAA+C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,GAA5B,CAAd;EAEA,mBAAA,CAAA,0BAAA,CAA2B,KAA3B;EACA,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAL2D,CAA/C;AAOb,OAAA,CAAA,QAAA,CAAS,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useCheckbox_unstable(props, ref);\n\n  useCheckboxStyles_unstable(state);\n  return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Checkbox/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Checkbox';\nexport * from './Checkbox.types';\nexport * from './renderCheckbox';\nexport * from './useCheckbox';\nexport * from './useCheckboxStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Checkbox';\nexport * from './Checkbox.types';\nexport * from './renderCheckbox';\nexport * from './useCheckbox';\nexport * from './useCheckboxStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Checkbox/renderCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,IAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFtD,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CAHF,EAIG,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,KAAK,CAAC,KAAzC,IAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJrD,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n  const { slots, slotProps } = getSlots<CheckboxSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,IAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFtD,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CAHF,EAIG,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,KAAK,CAAC,KAAzC,IAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJrD,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n  const { slots, slotProps } = getSlots<CheckboxSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Checkbox/useCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Checkbox/useCheckbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n  Checkmark12Filled,\n  Checkmark16Filled,\n  Square12Filled,\n  Square16Filled,\n  CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n  const { disabled, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n\n  const [checked, setChecked] = useControllableState({\n    defaultState: props.defaultChecked,\n    state: props.checked,\n    initialState: false,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = <CircleFilled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  const state: CheckboxState = {\n    shape,\n    checked,\n    size,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: Label,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        ref: useFocusWithin<HTMLSpanElement>(),\n        ...nativeProps.root,\n      },\n    }),\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary,\n      },\n    }),\n    label: resolveShorthand(props.label, {\n      required: false,\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n        size: 'medium', // Even if the checkbox itself is large\n      },\n    }),\n    indicator: resolveShorthand(props.indicator, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': true,\n        children: checkmarkIcon,\n      },\n    }),\n  };\n\n  state.input.onChange = useEventCallback(ev => {\n    const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n    onChange?.(ev, { checked: val });\n    setChecked(val);\n  });\n\n  // Create a ref object for the input element so we can use it to set the indeterminate prop.\n  // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n  const inputRef = useMergedRefs(state.input.ref);\n  state.input.ref = inputRef;\n\n  // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n  // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n  useIsomorphicLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = mixed;\n    }\n  }, [inputRef, mixed]);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAUA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAA0E;EAC5G,MAAM;IAAE,QAAF;IAAY,QAAZ;IAAsB,KAAK,GAAG,QAA9B;IAAwC,IAAI,GAAG,QAA/C;IAAyD,aAAa,GAAG,OAAzE;IAAkF;EAAlF,IAA+F,KAArG;EAEA,MAAM,CAAC,OAAD,EAAU,UAAV,IAAwB,iBAAA,CAAA,oBAAA,CAAqB;IACjD,YAAY,EAAE,KAAK,CAAC,cAD6B;IAEjD,KAAK,EAAE,KAAK,CAAC,OAFoC;IAGjD,YAAY,EAAE;EAHmC,CAArB,CAA9B;EAMA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,MAA9B,EAAsC,UAAtC;EAHyB,CAA1B,CAApB;EAMA,MAAM,KAAK,GAAG,OAAO,KAAK,OAA1B;EACA,MAAM,EAAE,GAAG,iBAAA,CAAA,KAAA,CAAM,WAAN,EAAmB,WAAW,CAAC,OAAZ,CAAoB,EAAvC,CAAX;EAEA,IAAI,aAAJ;;EACA,IAAI,KAAJ,EAAW;IACT,IAAI,KAAK,KAAK,UAAd,EAA0B;MACxB,aAAa,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,YAAD,EAAa,IAAb,CAAhB;IACD,CAFD,MAEO;MACL,aAAa,GAAG,IAAI,KAAK,OAAT,GAAmB,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,cAAD,EAAe,IAAf,CAAnB,GAAwC,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,cAAD,EAAe,IAAf,CAAxD;IACD;EACF,CAND,MAMO;IACL,aAAa,GAAG,IAAI,KAAK,OAAT,GAAmB,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,iBAAD,EAAkB,IAAlB,CAAnB,GAA2C,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,iBAAD,EAAkB,IAAlB,CAA3D;EACD;;EAED,MAAM,KAAK,GAAkB;IAC3B,KAD2B;IAE3B,OAF2B;IAG3B,IAH2B;IAI3B,aAJ2B;IAK3B,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,KAAK,EAAE,OAFG;MAGV,SAAS,EAAE,KAHD;MAIV,KAAK,EAAE,aAAA,CAAA;IAJG,CALe;IAW3B,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE;QACZ,GAAG,EAAE,eAAA,CAAA,cAAA,EADO;QAEZ,GAAG,WAAW,CAAC;MAFH;IAFmB,CAA7B,CAXqB;IAkB3B,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;MACnC,QAAQ,EAAE,IADyB;MAEnC,YAAY,EAAE;QACZ,IAAI,EAAE,UADM;QAEZ,EAFY;QAGZ,GAHY;QAIZ,OAAO,EAAE,OAAO,KAAK,IAJT;QAKZ,GAAG,WAAW,CAAC;MALH;IAFqB,CAA9B,CAlBoB;IA4B3B,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;MACnC,QAAQ,EAAE,KADyB;MAEnC,YAAY,EAAE;QACZ,OAAO,EAAE,EADG;QAEZ,QAFY;QAGZ,QAHY;QAIZ,IAAI,EAAE,QAJM,CAII;;MAJJ;IAFqB,CAA9B,CA5BoB;IAqC3B,SAAS,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,SAAvB,EAAkC;MAC3C,QAAQ,EAAE,IADiC;MAE3C,YAAY,EAAE;QACZ,eAAe,IADH;QAEZ,QAAQ,EAAE;MAFE;IAF6B,CAAlC;EArCgB,CAA7B;EA8CA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,iBAAA,CAAA,gBAAA,CAAiB,EAAE,IAAG;IAC3C,MAAM,GAAG,GAAG,EAAE,CAAC,aAAH,CAAiB,aAAjB,GAAiC,OAAjC,GAA2C,EAAE,CAAC,aAAH,CAAiB,OAAxE;IACA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;MAAE,OAAO,EAAE;IAAX,CAAP,CAAR;IACA,UAAU,CAAC,GAAD,CAAV;EACD,CAJsB,CAAvB,CA3E4G,CAiF5G;EACA;;EACA,MAAM,QAAQ,GAAG,iBAAA,CAAA,aAAA,CAAc,KAAK,CAAC,KAAN,CAAY,GAA1B,CAAjB;EACA,KAAK,CAAC,KAAN,CAAY,GAAZ,GAAkB,QAAlB,CApF4G,CAsF5G;EACA;;EACA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,QAAQ,CAAC,OAAb,EAAsB;MACpB,QAAQ,CAAC,OAAT,CAAiB,aAAjB,GAAiC,KAAjC;IACD;EACF,CAJD,EAIG,CAAC,QAAD,EAAW,KAAX,CAJH;EAMA,OAAO,KAAP;AACD,CA/FM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n  Checkmark12Filled,\n  Checkmark16Filled,\n  Square12Filled,\n  Square16Filled,\n  CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n  const { disabled, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n\n  const [checked, setChecked] = useControllableState({\n    defaultState: props.defaultChecked,\n    state: props.checked,\n    initialState: false,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = <CircleFilled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  const state: CheckboxState = {\n    shape,\n    checked,\n    size,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: Label,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        ref: useFocusWithin<HTMLSpanElement>(),\n        ...nativeProps.root,\n      },\n    }),\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary,\n      },\n    }),\n    label: resolveShorthand(props.label, {\n      required: false,\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n        size: 'medium', // Even if the checkbox itself is large\n      },\n    }),\n    indicator: resolveShorthand(props.indicator, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': true,\n        children: checkmarkIcon,\n      },\n    }),\n  };\n\n  state.input.onChange = useEventCallback(ev => {\n    const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n    onChange?.(ev, { checked: val });\n    setChecked(val);\n  });\n\n  // Create a ref object for the input element so we can use it to set the indeterminate prop.\n  // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n  const inputRef = useMergedRefs(state.input.ref);\n  state.input.ref = inputRef;\n\n  // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n  // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n  useIsomorphicLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = mixed;\n    }\n  }, [inputRef, mixed]);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Checkbox/useCheckboxStyles.js

@@ -27,37 +27,37 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "mc9l5x": "ftuwxu6",
     "Brovlpu": "ftqa4ok",
     "B486eqv": "f2hkw1w",
-    "n9p9qa": "f1fu8s9w",
-    "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
-    "r10ruj": "f1c1apvh",
-    "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
-    "gjlbkn": "fyrlc8h",
-    "B1kt0iq": "f28z38y",
-    "Boi8ppg": "f1edqc4x",
-    "Btfhvw2": "f19bnj08",
-    "B55xfkk": "f17wg1r9",
-    "i1dkbe": ["fgiioun", "fnx45sh"],
-    "Bozs2tv": "f1ljqnps",
-    "snkem8": ["fnx45sh", "fgiioun"],
-    "Bjilewg": "fsacsau",
-    "wht04d": ["flcxmxr", "f138axrn"],
-    "vikdft": "f1f4bc3q",
-    "Bwdhxlo": ["f138axrn", "flcxmxr"],
-    "B167d6d": ["f5m7f7q", "f175edhc"],
-    "Bpdw69r": ["f175edhc", "f5m7f7q"],
-    "Bsdv7io": ["fhfahiz", "fnreirl"],
-    "Bd353ur": ["fnreirl", "fhfahiz"],
-    "Bcnuwmc": "fn9i64i",
-    "dyfsa2": ["f1pylbqb", "f3dy9ja"],
-    "Bdcx1rh": "f1v06qdr",
-    "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
-    "Bbretkc": "fm1yk70",
-    "rnyfg7": "f1itvegt",
-    "Bg18gms": ["f17e4q3j", "foxjjqz"],
-    "Bym00rn": ["foxjjqz", "f17e4q3j"]
+    "Bssx7fj": "f1b1k54r",
+    "uh7if5": ["f4ne723", "fqqcjud"],
+    "clntm0": "fh7aioi",
+    "Dlk2r6": ["fqqcjud", "f4ne723"],
+    "B2j2mmj": "ffht0p2",
+    "wigs8": "f1p0ul1q",
+    "pbfy6t": "f1c901ms",
+    "B0v4ure": "f1alokd7",
+    "ghq09": "f78i1la",
+    "B24cy0v": ["f1kvsw7t", "f1bw8brt"],
+    "Bwckmig": "f8k7e5g",
+    "Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
+    "Bbgo44z": "f1pmxfrl",
+    "Bil7v7r": ["fszkfcr", "f1ap5ily"],
+    "skfxo0": "f57dp0y",
+    "jo1ztg": ["f1ap5ily", "fszkfcr"],
+    "Ba3ybja": ["f11dm2qb", "f136rfnd"],
+    "az1dzo": ["f136rfnd", "f11dm2qb"],
+    "vppk2z": ["fdsq1qd", "f1khssms"],
+    "B6352mv": ["f1khssms", "fdsq1qd"],
+    "nr063g": "fq4eyks",
+    "Blmvk6g": ["f1ya6x16", "ftuszwa"],
+    "Bsiemmq": "f1e2iu44",
+    "B98u21t": ["ftuszwa", "f1ya6x16"],
+    "B2pnrqr": "f1xkdug0",
+    "Bhhzhcn": "f1m1ywml",
+    "Bec0n69": ["f7u4kgv", "f1a36mvi"],
+    "B29w5g4": ["f1a36mvi", "f7u4kgv"]
   }
 }, {
-  "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1fu8s9w[data-fui-focus-visible]:focus-within{border-top-color:transparent;}", ".f8rbx7c[data-fui-focus-visible]:focus-within{border-right-color:transparent;}", ".f1jcuzx9[data-fui-focus-visible]:focus-within{border-left-color:transparent;}", ".f1c1apvh[data-fui-focus-visible]:focus-within{border-bottom-color:transparent;}", ".fyrlc8h[data-fui-focus-visible]:focus-within::after{content:\"\";}", ".f28z38y[data-fui-focus-visible]:focus-within::after{position:absolute;}", ".f1edqc4x[data-fui-focus-visible]:focus-within::after{pointer-events:none;}", ".f19bnj08[data-fui-focus-visible]:focus-within::after{z-index:1;}", ".f17wg1r9[data-fui-focus-visible]:focus-within::after{border-top-style:solid;}", ".fgiioun[data-fui-focus-visible]:focus-within::after{border-right-style:solid;}", ".fnx45sh[data-fui-focus-visible]:focus-within::after{border-left-style:solid;}", ".f1ljqnps[data-fui-focus-visible]:focus-within::after{border-bottom-style:solid;}", ".fsacsau[data-fui-focus-visible]:focus-within::after{border-top-width:2px;}", ".flcxmxr[data-fui-focus-visible]:focus-within::after{border-right-width:2px;}", ".f138axrn[data-fui-focus-visible]:focus-within::after{border-left-width:2px;}", ".f1f4bc3q[data-fui-focus-visible]:focus-within::after{border-bottom-width:2px;}", ".f5m7f7q[data-fui-focus-visible]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f175edhc[data-fui-focus-visible]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fhfahiz[data-fui-focus-visible]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fnreirl[data-fui-focus-visible]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fn9i64i[data-fui-focus-visible]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1pylbqb[data-fui-focus-visible]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f3dy9ja[data-fui-focus-visible]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1v06qdr[data-fui-focus-visible]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fm1yk70[data-fui-focus-visible]:focus-within::after{top:-2px;}", ".f1itvegt[data-fui-focus-visible]:focus-within::after{bottom:-2px;}", ".f17e4q3j[data-fui-focus-visible]:focus-within::after{left:-2px;}", ".foxjjqz[data-fui-focus-visible]:focus-within::after{right:-2px;}"],
+  "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1xkdug0[data-fui-focus-within]:focus-within::after{top:-2px;}", ".f1m1ywml[data-fui-focus-within]:focus-within::after{bottom:-2px;}", ".f7u4kgv[data-fui-focus-within]:focus-within::after{left:-2px;}", ".f1a36mvi[data-fui-focus-within]:focus-within::after{right:-2px;}"],
   "f": [".ftqa4ok:focus{outline-style:none;}"],
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });

package/lib-commonjs/components/Checkbox/useCheckboxStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n  root: 'fui-Checkbox',\n  label: 'fui-Checkbox__label',\n  input: 'fui-Checkbox__input',\n  indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootStyles = makeStyles({\n  base: {\n    position: 'relative',\n    display: 'inline-flex',\n    ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    ...shorthands.margin(0),\n    opacity: 0,\n    position: 'absolute',\n    top: 0,\n\n    // When unchecked, hide the the checkmark icon (child of the indicator slot)\n    [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n      opacity: 0,\n    },\n\n    // Colors for the unchecked state\n    ':enabled:not(:checked):not(:indeterminate)': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground3,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.label}`]: {\n          color: tokens.colorNeutralForeground2,\n        },\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.label}`]: {\n          color: tokens.colorNeutralForeground1,\n        },\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Colors for the checked state\n    ':enabled:checked:not(:indeterminate)': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n        },\n      },\n    },\n\n    // Colors for the mixed state\n    ':enabled:indeterminate': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n        color: tokens.colorCompoundBrandForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n          color: tokens.colorCompoundBrandForeground1Hover,\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n          color: tokens.colorCompoundBrandForeground1Pressed,\n        },\n      },\n    },\n\n    ':disabled': {\n      cursor: 'default',\n\n      [`& ~ .${checkboxClassNames.label}`]: {\n        cursor: 'default',\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n          color: 'GrayText',\n        },\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n          color: 'GrayText',\n        },\n      },\n      [`& ~ .${checkboxClassNames.indicator} svg`]: {\n        '@media (forced-colors: active)': {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n\n  before: {\n    right: 0,\n  },\n  after: {\n    left: 0,\n  },\n\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n  medium: {\n    width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n  large: {\n    width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-start',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n\n    ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n    ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n    fill: 'currentColor',\n    pointerEvents: 'none',\n  },\n\n  medium: {\n    fontSize: '12px',\n    height: indicatorSizeMedium,\n    width: indicatorSizeMedium,\n  },\n\n  large: {\n    fontSize: '16px',\n    height: indicatorSizeLarge,\n    width: indicatorSizeLarge,\n  },\n\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    color: 'inherit',\n    cursor: 'pointer',\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n  const { labelPosition, shape, size } = state;\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(\n    checkboxClassNames.input,\n    inputStyles.base,\n    inputStyles[size],\n    inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      checkboxClassNames.indicator,\n      indicatorStyles.base,\n      indicatorStyles[size],\n      shape === 'circular' && indicatorStyles.circular,\n      state.indicator.className,\n    );\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      checkboxClassNames.label,\n      labelStyles.base,\n      labelStyles[size],\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,kBAAA,GAAoD;EAC/D,IAAI,EAAE,cADyD;EAE/D,KAAK,EAAE,qBAFwD;EAG/D,KAAK,EAAE,qBAHwD;EAI/D,SAAS,EAAE;AAJoD,CAApD,C,CAOb;;AACA,MAAM,mBAAmB,GAAG,MAA5B;AACA,MAAM,kBAAkB,GAAG,MAA3B;;AAEA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAtB;;AAQA,MAAM,cAAc,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAvB;;AAwIA,MAAM,kBAAkB,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA3B;;AAmCA,MAAM,cAAc,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;AA2BA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,kBAAA,CAAmB,IAAhC,EAAsC,UAAU,CAAC,IAAjD,EAAuD,KAAK,CAAC,IAAN,CAAW,SAAlE,CAAvB;EAEA,MAAM;IAAE,aAAF;IAAiB,KAAjB;IAAwB;EAAxB,IAAiC,KAAvC;EAEA,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,kBAAA,CAAmB,KADG,EAEtB,WAAW,CAAC,IAFU,EAGtB,WAAW,CAAC,IAAD,CAHW,EAItB,WAAW,CAAC,aAAD,CAJW,EAKtB,KAAK,CAAC,KAAN,CAAY,SALU,CAAxB;EAQA,MAAM,eAAe,GAAG,kBAAkB,EAA1C;;EACA,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,OAAA,CAAA,YAAA,CAC1B,OAAA,CAAA,kBAAA,CAAmB,SADO,EAE1B,eAAe,CAAC,IAFU,EAG1B,eAAe,CAAC,IAAD,CAHW,EAI1B,KAAK,KAAK,UAAV,IAAwB,eAAe,CAAC,QAJd,EAK1B,KAAK,CAAC,SAAN,CAAgB,SALU,CAA5B;EAOD;;EAED,MAAM,WAAW,GAAG,cAAc,EAAlC;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,kBAAA,CAAmB,KADG,EAEtB,WAAW,CAAC,IAFU,EAGtB,WAAW,CAAC,IAAD,CAHW,EAItB,WAAW,CAAC,aAAD,CAJW,EAKtB,KAAK,CAAC,KAAN,CAAY,SALU,CAAxB;EAOD;;EAED,OAAO,KAAP;AACD,CAtCM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n  root: 'fui-Checkbox',\n  label: 'fui-Checkbox__label',\n  input: 'fui-Checkbox__input',\n  indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootStyles = makeStyles({\n  base: {\n    position: 'relative',\n    display: 'inline-flex',\n    ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    ...shorthands.margin(0),\n    opacity: 0,\n    position: 'absolute',\n    top: 0,\n\n    // When unchecked, hide the the checkmark icon (child of the indicator slot)\n    [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n      opacity: 0,\n    },\n\n    // Colors for the unchecked state\n    ':enabled:not(:checked):not(:indeterminate)': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground3,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.label}`]: {\n          color: tokens.colorNeutralForeground2,\n        },\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.label}`]: {\n          color: tokens.colorNeutralForeground1,\n        },\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Colors for the checked state\n    ':enabled:checked:not(:indeterminate)': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n        },\n      },\n    },\n\n    // Colors for the mixed state\n    ':enabled:indeterminate': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n        color: tokens.colorCompoundBrandForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n          color: tokens.colorCompoundBrandForeground1Hover,\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${checkboxClassNames.indicator}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n          color: tokens.colorCompoundBrandForeground1Pressed,\n        },\n      },\n    },\n\n    ':disabled': {\n      cursor: 'default',\n\n      [`& ~ .${checkboxClassNames.label}`]: {\n        cursor: 'default',\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n          color: 'GrayText',\n        },\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n          color: 'GrayText',\n        },\n      },\n      [`& ~ .${checkboxClassNames.indicator} svg`]: {\n        '@media (forced-colors: active)': {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n\n  before: {\n    right: 0,\n  },\n  after: {\n    left: 0,\n  },\n\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n  medium: {\n    width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n  large: {\n    width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-start',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.overflow('hidden'),\n\n    ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n    ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n    fill: 'currentColor',\n    pointerEvents: 'none',\n  },\n\n  medium: {\n    fontSize: '12px',\n    height: indicatorSizeMedium,\n    width: indicatorSizeMedium,\n  },\n\n  large: {\n    fontSize: '16px',\n    height: indicatorSizeLarge,\n    width: indicatorSizeLarge,\n  },\n\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    color: 'inherit',\n    cursor: 'pointer',\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);\n\n  const { labelPosition, shape, size } = state;\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(\n    checkboxClassNames.input,\n    inputStyles.base,\n    inputStyles[size],\n    inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      checkboxClassNames.indicator,\n      indicatorStyles.base,\n      indicatorStyles[size],\n      shape === 'circular' && indicatorStyles.circular,\n      state.indicator.className,\n    );\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      checkboxClassNames.label,\n      labelStyles.base,\n      labelStyles[size],\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/CheckboxField/CheckboxField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/CheckboxField/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAQA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAea,OAAA,CAAA,uBAAA,gBAA0B,aAAA,CAAA,kBAAA,CAAmB,eAAnB,CAA1B;AAEA,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB,KAAxB;IAA+B,OAA/B;IAAwC,GAAG;EAA3C,IAA2D,KAAjE;EAEA,KAAK,GAAG;IACN;IACA,KAAK,EAAE,UAFD;IAGN;IACA,OAAO,EAAE;MAAE,KAAF;MAAS,QAAT;MAAmB,GAAG;IAAtB,CAJH;IAKN,GAAG;EALG,CAAR;EAQA,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,UAAA,CAAA,QAAb;IAAuB,UAAU,EAAE,OAAA,CAAA;EAAnC,CAA9B,CAAd;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAdqE,CAAzD;AAgBb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CheckboxProps } from '../../Checkbox';\nimport { Checkbox } from '../../Checkbox';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n  /**\n   * The Checkbox's label.\n   */\n  label?: CheckboxProps['label'];\n\n  /**\n   * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n   * It is recommended to only set the `label` prop, and not `fieldLabel`.\n   */\n  fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n  const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n  props = {\n    // Use the fieldLabel prop as the Field's label\n    label: fieldLabel,\n    // Use the label prop as the Checkbox's label\n    control: { label, required, ...control },\n    ...restOfProps,\n  };\n\n  const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAQA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAea,OAAA,CAAA,uBAAA,gBAA0B,aAAA,CAAA,kBAAA,CAAmB,eAAnB,CAA1B;AAEA,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB,KAAxB;IAA+B,OAA/B;IAAwC,GAAG;EAA3C,IAA2D,KAAjE;EAEA,KAAK,GAAG;IACN;IACA,KAAK,EAAE,UAFD;IAGN;IACA,OAAO,EAAE;MAAE,KAAF;MAAS,QAAT;MAAmB,GAAG;IAAtB,CAJH;IAKN,GAAG;EALG,CAAR;EAQA,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,UAAA,CAAA,QAAb;IAAuB,UAAU,EAAE,OAAA,CAAA;EAAnC,CAA9B,CAAd;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAdqE,CAAzD;AAgBb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CheckboxProps } from '../../Checkbox';\nimport { Checkbox } from '../../Checkbox';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n  /**\n   * The Checkbox's label.\n   */\n  label?: CheckboxProps['label'];\n\n  /**\n   * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n   * It is recommended to only set the `label` prop, and not `fieldLabel`.\n   */\n  fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n  const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n  props = {\n    // Use the fieldLabel prop as the Field's label\n    label: fieldLabel,\n    // Use the label prop as the Checkbox's label\n    control: { label, required, ...control },\n    ...restOfProps,\n  };\n\n  const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/CheckboxField/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/CheckboxField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './CheckboxField';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/components/CheckboxField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './CheckboxField';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;;AAIF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AAAyC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA","sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n\nexport { CheckboxField as CheckboxField_unstable, checkboxFieldClassNames } from './CheckboxField';\nexport type { CheckboxFieldProps as CheckboxFieldProps_unstable } from './CheckboxField';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-checkbox/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;;AAIF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AAAyC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA","sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n\nexport { CheckboxField as CheckboxField_unstable, checkboxFieldClassNames } from './CheckboxField';\nexport type { CheckboxFieldProps as CheckboxFieldProps_unstable } from './CheckboxField';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-checkbox",
-  "version": "9.0.12",
+  "version": "9.0.14",
   "description": "Fluent UI checkbox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,10 +19,9 @@
     "lint": "just-scripts lint",
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-checkbox/src && yarn docs",
     "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -31,12 +30,12 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-field": "9.0.0-alpha.8",
+    "@fluentui/react-field": "9.0.0-alpha.10",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "^9.0.10",
-    "@fluentui/react-tabster": "^9.3.0",
-    "@fluentui/react-theme": "^9.1.2",
-    "@fluentui/react-utilities": "^9.2.1",
+    "@fluentui/react-label": "^9.0.12",
+    "@fluentui/react-tabster": "^9.3.2",
+    "@fluentui/react-theme": "^9.1.3",
+    "@fluentui/react-utilities": "^9.2.2",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },