@fluentui/react-checkbox 9.0.0-beta.8 → 9.0.0-beta.9

package/CHANGELOG.json

@@ -2,7 +2,52 @@
   "name": "@fluentui/react-checkbox",
   "entries": [
     {
-      "date": "Fri, 18 Feb 2022 13:33:45 GMT",
+      "date": "Tue, 01 Mar 2022 02:16:09 GMT",
+      "tag": "@fluentui/react-checkbox_v9.0.0-beta.9",
+      "version": "9.0.0-beta.9",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "084d7408855f3e52b67cbca172da1acef9dcb98f",
+            "comment": "fix: Add react-theme as dependency"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "17618b2b24ce013569c74a505b2212eba18caf54",
+            "comment": "Refactor Checkbox styles to use CSS pseudo-classes"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "2170ed575f77bc6852cfe5a2fe4974c7f9a64a9e",
+            "comment": "Rename `circular` prop to `shape`"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-label to v9.0.0-beta.8",
+            "commit": "0bc1e755543ed69443d5d03e1976c630583242f7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.4",
+            "commit": "0bc1e755543ed69443d5d03e1976c630583242f7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.4",
+            "commit": "0bc1e755543ed69443d5d03e1976c630583242f7"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 18 Feb 2022 13:35:30 GMT",
       "tag": "@fluentui/react-checkbox_v9.0.0-beta.8",
       "version": "9.0.0-beta.8",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @fluentui/react-checkbox
 
-This log was last generated on Fri, 18 Feb 2022 13:33:45 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Mar 2022 02:16:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.0-beta.9)
+
+Tue, 01 Mar 2022 02:16:09 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.0-beta.8..@fluentui/react-checkbox_v9.0.0-beta.9)
+
+### Changes
+
+- fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
+- Refactor Checkbox styles to use CSS pseudo-classes ([PR #21837](https://github.com/microsoft/fluentui/pull/21837) by behowell@microsoft.com)
+- Rename `circular` prop to `shape` ([PR #21834](https://github.com/microsoft/fluentui/pull/21834) by behowell@microsoft.com)
+- Bump @fluentui/react-label to v9.0.0-beta.8 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
+- Bump @fluentui/react-tabster to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
+
 ## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.0-beta.8)
 
-Fri, 18 Feb 2022 13:33:45 GMT 
+Fri, 18 Feb 2022 13:35:30 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.0-beta.6..@fluentui/react-checkbox_v9.0.0-beta.8)
 
 ### Changes

package/dist/react-checkbox.d.ts

@@ -15,24 +15,29 @@ export declare const checkboxClassName = "fui-Checkbox";
 
 declare interface CheckboxCommons {
     /**
-     * Whether to render the checkbox in a circular shape instead of square.
-     * This variant is only recommended to be used in a tasks-style UI (checklist),
+     * The shape of the checkbox indicator.
+     *
+     * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),
      * since it otherwise could be confused for a `RadioItem`.
-     * @defaultvalue false
+     *
+     * @defaultvalue square
      */
-    circular: boolean;
+    shape: 'square' | 'circular';
     /**
-     * A checkbox's state can be controlled.
+     * The controlled value for the checkbox.
+     *
      * @defaultvalue false
      */
     checked: 'mixed' | boolean;
     /**
-     * Checkbox supports two different checkbox sizes.
+     * The size of the checkbox indicator.
+     *
      * @defaultvalue medium
      */
     size: 'medium' | 'large';
     /**
-     * Determines whether the label should be positioned before or after the checkbox.
+     * The position of the label relative to the checkbox indicator.
+     *
      * @defaultvalue after
      */
     labelPosition: 'before' | 'after';
@@ -83,7 +88,7 @@ export declare type CheckboxSlots = {
      */
     input: NonNullable<Slot<'input'>>;
     /**
-     * Renders the checkbox, with the checkmark icon as its child when checked.
+     * The checkbox, with the checkmark icon as its child when checked.
      */
     indicator: Slot<'div'>;
 };

package/lib/components/Checkbox/Checkbox.types.d.ts

@@ -3,24 +3,29 @@ import { Label } from '@fluentui/react-label';
 import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 interface CheckboxCommons {
     /**
-     * Whether to render the checkbox in a circular shape instead of square.
-     * This variant is only recommended to be used in a tasks-style UI (checklist),
+     * The shape of the checkbox indicator.
+     *
+     * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),
      * since it otherwise could be confused for a `RadioItem`.
-     * @defaultvalue false
+     *
+     * @defaultvalue square
      */
-    circular: boolean;
+    shape: 'square' | 'circular';
     /**
-     * A checkbox's state can be controlled.
+     * The controlled value for the checkbox.
+     *
      * @defaultvalue false
      */
     checked: 'mixed' | boolean;
     /**
-     * Checkbox supports two different checkbox sizes.
+     * The size of the checkbox indicator.
+     *
      * @defaultvalue medium
      */
     size: 'medium' | 'large';
     /**
-     * Determines whether the label should be positioned before or after the checkbox.
+     * The position of the label relative to the checkbox indicator.
+     *
      * @defaultvalue after
      */
     labelPosition: 'before' | 'after';
@@ -51,7 +56,7 @@ export declare type CheckboxSlots = {
      */
     input: NonNullable<Slot<'input'>>;
     /**
-     * Renders the checkbox, with the checkmark icon as its child when checked.
+     * The checkbox, with the checkmark icon as its child when checked.
      */
     indicator: Slot<'div'>;
 };

package/lib/components/Checkbox/Checkbox.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.js","sourceRoot":"../src/","sources":["components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\ninterface CheckboxCommons {\n  /**\n   * Whether to render the checkbox in a circular shape instead of square.\n   * This variant is only recommended to be used in a tasks-style UI (checklist),\n   * since it otherwise could be confused for a `RadioItem`.\n   * @defaultvalue false\n   */\n  circular: boolean;\n\n  /**\n   * A checkbox's state can be controlled.\n   * @defaultvalue false\n   */\n  checked: 'mixed' | boolean;\n\n  /**\n   * Checkbox supports two different checkbox sizes.\n   * @defaultvalue medium\n   */\n  size: 'medium' | 'large';\n\n  /**\n   * Determines whether the label should be positioned before or after the checkbox.\n   * @defaultvalue after\n   */\n  labelPosition: 'before' | 'after';\n}\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n  checked: 'mixed' | boolean;\n}\n\nexport type CheckboxSlots = {\n  /**\n   * The root element of the Checkbox.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Checkbox's label.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the checkbox's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * Renders the checkbox, with the checkmark icon as its child when checked.\n   */\n  indicator: Slot<'div'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n  ComponentProps<Partial<CheckboxSlots>, 'input'>,\n  'size' | 'checked' | 'defaultChecked' | 'onChange'\n> &\n  Partial<CheckboxCommons> & {\n    /**\n     * Checkboxes don't support children. To add a label, use the `label` prop.\n     */\n    children?: never;\n\n    /**\n     * Callback to be called when the checked state value changes.\n     */\n    onChange?: (ev: React.FormEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n    /**\n     * Whether the checkbox should be rendered as checked by default.\n     */\n    defaultChecked?: 'mixed' | boolean;\n  };\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons;\n"]}
+{"version":3,"file":"Checkbox.types.js","sourceRoot":"../src/","sources":["components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\ninterface CheckboxCommons {\n  /**\n   * The shape of the checkbox indicator.\n   *\n   * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n   * since it otherwise could be confused for a `RadioItem`.\n   *\n   * @defaultvalue square\n   */\n  shape: 'square' | 'circular';\n\n  /**\n   * The controlled value for the checkbox.\n   *\n   * @defaultvalue false\n   */\n  checked: 'mixed' | boolean;\n\n  /**\n   * The size of the checkbox indicator.\n   *\n   * @defaultvalue medium\n   */\n  size: 'medium' | 'large';\n\n  /**\n   * The position of the label relative to the checkbox indicator.\n   *\n   * @defaultvalue after\n   */\n  labelPosition: 'before' | 'after';\n}\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n  checked: 'mixed' | boolean;\n}\n\nexport type CheckboxSlots = {\n  /**\n   * The root element of the Checkbox.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Checkbox's label.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the checkbox's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The checkbox, with the checkmark icon as its child when checked.\n   */\n  indicator: Slot<'div'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n  ComponentProps<Partial<CheckboxSlots>, 'input'>,\n  'size' | 'checked' | 'defaultChecked' | 'onChange'\n> &\n  Partial<CheckboxCommons> & {\n    /**\n     * Checkboxes don't support children. To add a label, use the `label` prop.\n     */\n    children?: never;\n\n    /**\n     * Callback to be called when the checked state value changes.\n     */\n    onChange?: (ev: React.FormEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n    /**\n     * Whether the checkbox should be rendered as checked by default.\n     */\n    defaultChecked?: 'mixed' | boolean;\n  };\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> & CheckboxCommons;\n"]}

package/lib/components/Checkbox/renderCheckbox.js

@@ -6,9 +6,9 @@ export const renderCheckbox_unstable = state => {
     slotProps
   } = getSlots(state);
   return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, state.labelPosition === 'before' && slots.label && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
+  }, /*#__PURE__*/React.createElement(slots.input, { ...slotProps.input
+  }), state.labelPosition === 'before' && slots.label && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
   }), /*#__PURE__*/React.createElement(slots.indicator, { ...slotProps.indicator
-  }), /*#__PURE__*/React.createElement(slots.input, { ...slotProps.input
   }), state.labelPosition === 'after' && slots.label && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;AAC9D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAgB,KAAhB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,iBAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADtD,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAHF,EAIG,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,KAAK,CAAC,KAAzC,iBAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAJrD,CADF;AAQD,CAXM","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      {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      <slots.input {...slotProps.input} />\n      {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;AAC9D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAgB,KAAhB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,EAEG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,iBAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAFtD,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CAHF,EAIG,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,KAAK,CAAC,KAAzC,iBAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAJrD,CADF;AAQD,CAXM","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/components/Checkbox/useCheckbox.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getPartitionedNativeProps, resolveShorthand, useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
-import { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, Circle12Filled, Circle16Filled } from '@fluentui/react-icons';
+import { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, CircleFilled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
 /**
  * Create the state required to render Checkbox.
@@ -16,7 +16,7 @@ export const useCheckbox_unstable = (props, ref) => {
   const {
     disabled,
     required,
-    circular = false,
+    shape = 'square',
     size = 'medium',
     labelPosition = 'after',
     onChange
@@ -36,8 +36,8 @@ export const useCheckbox_unstable = (props, ref) => {
   let checkmarkIcon;
 
   if (mixed) {
-    if (circular) {
-      checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Circle16Filled, null) : /*#__PURE__*/React.createElement(Circle12Filled, null);
+    if (shape === 'circular') {
+      checkmarkIcon = /*#__PURE__*/React.createElement(CircleFilled, null);
     } else {
       checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Square16Filled, null) : /*#__PURE__*/React.createElement(Square12Filled, null);
     }
@@ -46,7 +46,7 @@ export const useCheckbox_unstable = (props, ref) => {
   }
 
   const state = {
-    circular,
+    shape,
     checked,
     size,
     labelPosition,

package/lib/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  Circle12Filled,\n  Circle16Filled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\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, circular = false, 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 (circular) {\n      checkmarkIcon = size === 'large' ? <Circle16Filled /> : <Circle12Filled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  const state: CheckboxState = {\n    circular,\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: nativeProps.root,\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":["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';\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: nativeProps.root,\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/components/Checkbox/useCheckboxStyles.js

@@ -2,33 +2,24 @@ import { shorthands, __styles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 export const checkboxClassName = 'fui-Checkbox';
-const indicatorClassName = 'fui-Checkbox-indicator'; // TODO replace these spacing constants with theme values once they're on the theme
+const indicatorClassName = 'fui-Checkbox__indicator';
+const labelClassName = 'fui-Checkbox__label'; // TODO replace these spacing constants with theme values once they're on the theme
 
 const spacingHorizontalS = '8px';
 const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
 
 const indicatorSizeMedium = '16px';
 const indicatorSizeLarge = '20px';
-/**
- * Styles for the root slot
- */
 
 const useRootStyles = /*#__PURE__*/__styles({
   "base": {
     "qhf8xq": "f10pi13n",
     "mc9l5x": "ftuwxu6",
-    "Beiy3e4": "f1063pyq",
-    "Bceei9c": "f1k6fduh",
     "i8kkvl": "f4akndk",
     "z8tnut": "fp9bwmr",
     "z189sj": ["f19lj068", "f177v4lu"],
     "Byoj8tv": "f150uoa4",
-    "uwmqm3": ["f177v4lu", "f19lj068"]
-  },
-  "disabled": {
-    "Bceei9c": "f158kwzp"
-  },
-  "focusIndicator": {
+    "uwmqm3": ["f177v4lu", "f19lj068"],
     "B486eqv": "f2hkw1w",
     "c2y4jd": "fsofd9k",
     "B8vm7ur": "f12sql3b",
@@ -44,74 +35,10 @@ const useRootStyles = /*#__PURE__*/__styles({
     "Jxg1p8": "f8rjbh6",
     "Bc94xmo": ["fxfgh6q", "f8l10fm"],
     "Bj23z95": ["f8l10fm", "fxfgh6q"]
-  },
-  "uncheckedColors": {
-    "sj55zd": "f11d4kpn",
-    "B2uuno9": "fwkyayc",
-    "qasus0": ["f7aqmyg", "ft2adke"],
-    "joesme": "f1w1qo1y",
-    "qcmoe7": ["ft2adke", "f7aqmyg"],
-    "Bi91k9c": "f3p8bqa",
-    "vpay66": "fft1thc",
-    "fgdpeo": ["f1w8do5y", "fepve6s"],
-    "ooapsn": "fdf0l0r",
-    "ev9ftv": ["fepve6s", "f1w8do5y"],
-    "Bfw6nra": "fesph6q",
-    "Brbcl2": "f1mhtrce",
-    "E16u1b": ["f17v52hn", "fg62ii9"],
-    "c4amgi": "f1r1cpih",
-    "Bepp5ky": ["fg62ii9", "f17v52hn"]
-  },
-  "checkedColors": {
-    "sj55zd": "f19n0e5",
-    "mrtg77": "f1nckptt",
-    "bxuuxi": "f19uhq4u",
-    "B2uuno9": "ffzu9nk",
-    "qasus0": ["f1g19ujf", "fvb8adx"],
-    "joesme": "f1emw82k",
-    "qcmoe7": ["fvb8adx", "f1g19ujf"],
-    "Bqcm5gq": "fc90h92",
-    "vpay66": "f1gd0goh",
-    "fgdpeo": ["f926psx", "f1pjby8k"],
-    "ooapsn": "f1b2jcp4",
-    "ev9ftv": ["f1pjby8k", "f926psx"],
-    "Bn43wis": "f8zpi21",
-    "Brbcl2": "f1irvqu2",
-    "E16u1b": ["f5uvb4g", "f1vydb2"],
-    "c4amgi": "fgkonep",
-    "Bepp5ky": ["f1vydb2", "f5uvb4g"]
-  },
-  "mixedColors": {
-    "sj55zd": "f19n0e5",
-    "B2uuno9": "fkebysb",
-    "qasus0": ["f1k0bg1", "f4oydaf"],
-    "joesme": "fi1mkuk",
-    "qcmoe7": ["f4oydaf", "f1k0bg1"],
-    "bxuuxi": "f1n04o3z",
-    "vpay66": "fdfakjf",
-    "fgdpeo": ["fvqbddr", "f1babrrv"],
-    "ooapsn": "f1jbek0d",
-    "ev9ftv": ["f1babrrv", "fvqbddr"],
-    "Iwvt79": "f1mps0ds",
-    "Brbcl2": "f1tallx",
-    "E16u1b": ["f9cmnyc", "f1skyj24"],
-    "c4amgi": "f12y7q7q",
-    "Bepp5ky": ["f1skyj24", "f9cmnyc"],
-    "Ewzbd8": "f135b915"
-  },
-  "disabledColors": {
-    "sj55zd": "f1s2aq7o",
-    "B2uuno9": "f1bezmwk",
-    "qasus0": ["fb9vlya", "f1ubioqa"],
-    "joesme": "fu4x4v",
-    "qcmoe7": ["f1ubioqa", "fb9vlya"],
-    "bxuuxi": "fpjy2vv"
   }
 }, {
-  "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f1k6fduh{cursor:pointer;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f158kwzp{cursor:default;}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fwkyayc .fui-Checkbox-indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f7aqmyg .fui-Checkbox-indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".ft2adke .fui-Checkbox-indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1w1qo1y .fui-Checkbox-indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1nckptt .fui-Checkbox-indicator{background-color:var(--colorCompoundBrandBackground);}", ".f19uhq4u .fui-Checkbox-indicator{color:var(--colorNeutralForegroundOnBrand);}", ".ffzu9nk .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandBackground);}", ".f1g19ujf .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandBackground);}", ".fvb8adx .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandBackground);}", ".f1emw82k .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandBackground);}", ".fkebysb .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".f1k0bg1 .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".f4oydaf .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".fi1mkuk .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f1n04o3z .fui-Checkbox-indicator{color:var(--colorCompoundBrandForeground1);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1bezmwk .fui-Checkbox-indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".fb9vlya .fui-Checkbox-indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1ubioqa .fui-Checkbox-indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fu4x4v .fui-Checkbox-indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fpjy2vv .fui-Checkbox-indicator{color:var(--colorNeutralForegroundDisabled);}"],
-  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
-  "h": [".f3p8bqa:hover{color:var(--colorNeutralForeground2);}", ".fft1thc:hover .fui-Checkbox-indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1w8do5y:hover .fui-Checkbox-indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".fepve6s:hover .fui-Checkbox-indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".fdf0l0r:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".fc90h92:hover .fui-Checkbox-indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".f1gd0goh:hover .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}", ".f926psx:hover .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}", ".f1pjby8k:hover .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}", ".f1b2jcp4:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}", ".fdfakjf:hover .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".fvqbddr:hover .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".f1babrrv:hover .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".f1jbek0d:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".f1mps0ds:hover .fui-Checkbox-indicator{color:var(--colorCompoundBrandForeground1Hover);}"],
-  "a": [".fesph6q:active:hover{color:var(--colorNeutralForeground1);}", ".f1mhtrce:active:hover .fui-Checkbox-indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f17v52hn:active:hover .fui-Checkbox-indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fg62ii9:active:hover .fui-Checkbox-indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1r1cpih:active:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f8zpi21:active:hover .fui-Checkbox-indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1irvqu2:active:hover .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}", ".f5uvb4g:active:hover .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1vydb2:active:hover .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}", ".fgkonep:active:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1tallx:active:hover .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f9cmnyc:active:hover .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".f1skyj24:active:hover .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".f12y7q7q:active:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f135b915:active:hover .fui-Checkbox-indicator{color:var(--colorCompoundBrandForeground1Pressed);}"]
+  "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });
 
 const useInputStyles = /*#__PURE__*/__styles({
@@ -127,10 +54,66 @@ const useInputStyles = /*#__PURE__*/__styles({
     "jrapky": "f19f4twv",
     "Frg6f3": ["f1tyq0we", "f11qmguv"],
     "abs64n": "fk73vx1",
-    "Bceei9c": "fpo1scq"
+    "Bceei9c": "f1k6fduh",
+    "B26k0as": "f1yrrd5t",
+    "k0xvi9": "fvfr0er",
+    "Bqb28oy": "fcwiijr",
+    "Fszymg": ["f11s8ldy", "f37mzfx"],
+    "s5xoki": "forfpyi",
+    "cfw8t2": ["f37mzfx", "f11s8ldy"],
+    "b9fajx": "f1vd61pd",
+    "pff03s": "f1mzgjal",
+    "Bk0s23q": ["f1iwu0i3", "f6umev3"],
+    "Bfc5gcl": "femu9zt",
+    "a4vgqw": ["f6umev3", "f1iwu0i3"],
+    "Fum7gy": "f1s8s9qo",
+    "B5tev9i": "fuvx3by",
+    "ecjak0": ["fuqx993", "f1akce7s"],
+    "B006ete": "feccz1o",
+    "Bxlzfhf": ["f1akce7s", "fuqx993"],
+    "qzqrip": "fqgvcms",
+    "xmoia3": "f1wvbx6q",
+    "i1phtq": "fcsc0bc",
+    "Bi8r3f5": "fkf9h0q",
+    "yvncz7": ["faeo8p5", "f4rpdul"],
+    "D2mvea": "fsk3itm",
+    "Bjmkmyo": ["f4rpdul", "faeo8p5"],
+    "B525uqd": "f4wqdms",
+    "B5z3g6i": "ftufdon",
+    "Bwnzx1a": ["f1ni78ii", "f1pe82pw"],
+    "w3j1jp": "fxl8eb7",
+    "n2zbqb": ["f1pe82pw", "f1ni78ii"],
+    "Bek439x": "f12pgwe7",
+    "Bgt4g9q": "f1c5u0pt",
+    "Bkzkukt": ["fyfn4nz", "f1aaeu2t"],
+    "wg1kw8": "ffzx9q8",
+    "Bh7u92y": ["f1aaeu2t", "fyfn4nz"],
+    "B40413r": "f1rm0htn",
+    "B9f5amx": "fpb7n6l",
+    "gbnyp0": ["f1uwkm0d", "fakdbj6"],
+    "ilwfws": "f180qsza",
+    "Fk4w3x": ["fakdbj6", "f1uwkm0d"],
+    "tfmijd": "f3nyagc",
+    "Bketd8w": "f1eh922j",
+    "s1clob": ["f1f3l6lh", "faa1us6"],
+    "B8s8lrk": "f1g6jlfz",
+    "Bp3qae9": ["faa1us6", "f1f3l6lh"],
+    "c4h28b": "f1d2ycii",
+    "Bvff7ki": "f18ruat1",
+    "B0usqpl": ["f18b6ltw", "fd6ao2z"],
+    "ckdfsi": "fdz9k82",
+    "B2hfjzz": ["fd6ao2z", "f18b6ltw"],
+    "B0rx68v": "f8c3d4w",
+    "ezr58z": "fvxnmui",
+    "Bdfu378": "f1ceq7vh",
+    "fvfg5q": "f4ohyq5",
+    "Bbnnodr": ["f1kakd2g", "f3ulah5"],
+    "B7y28oj": "f5fda5m",
+    "Dpxclb": ["f3ulah5", "f1kakd2g"],
+    "E1kcat": "f1c3drxw"
   }
 }, {
-  "d": [".f1euv43f{position:absolute;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".fpo1scq{cursor:inherit;}"]
+  "d": [".f1euv43f{position:absolute;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1k6fduh{cursor:pointer;}", ".f1yrrd5t:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".fvfr0er:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".fcwiijr:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f11s8ldy:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f37mzfx:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".forfpyi:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1vd61pd:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".f1mzgjal:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1iwu0i3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f6umev3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".femu9zt:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1s8s9qo:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fuvx3by:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fuqx993:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1akce7s:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".feccz1o:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqgvcms:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".f1wvbx6q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}", ".fcsc0bc:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".fkf9h0q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}", ".faeo8p5:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}", ".f4rpdul:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}", ".fsk3itm:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}", ".f4wqdms:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".ftufdon:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}", ".f1ni78ii:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}", ".f1pe82pw:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}", ".fxl8eb7:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}", ".f12pgwe7:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1c5u0pt:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}", ".fyfn4nz:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1aaeu2t:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}", ".ffzx9q8:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1rm0htn:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fpb7n6l:enabled:indeterminate~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".f1uwkm0d:enabled:indeterminate~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".fakdbj6:enabled:indeterminate~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f180qsza:enabled:indeterminate~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f3nyagc:enabled:indeterminate~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1eh922j:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".f1f3l6lh:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".faa1us6:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".f1g6jlfz:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".f1d2ycii:enabled:indeterminate:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".f18ruat1:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f18b6ltw:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fd6ao2z:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".fdz9k82:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f8c3d4w:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".fvxnmui:disabled{cursor:default;}", ".f1ceq7vh:disabled~.fui-Checkbox__label{color:var(--colorNeutralForegroundDisabled);}", ".f4ohyq5:disabled~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1kakd2g:disabled~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f3ulah5:disabled~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f5fda5m:disabled~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1c3drxw:disabled~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}"]
 });
 
 const useIndicatorStyles = /*#__PURE__*/__styles({
@@ -156,27 +139,26 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
     "B7oj6ja": ["f1rstyi9", "f1s4nn1u"],
     "Btl43ni": ["f1s4nn1u", "f1rstyi9"],
     "Bkfmm31": "f1w9h62z",
-    "Bceei9c": "fpo1scq"
+    "Bkecrkj": "f1aehjj5"
   },
   "medium": {
     "a9b677": "fjw5fx7",
-    "Bqenvij": "fd461yt"
+    "Bqenvij": "fd461yt",
+    "Be2twd7": "f1ugzwwg"
   },
   "large": {
     "a9b677": "f64fuq3",
-    "Bqenvij": "fjamq6b"
+    "Bqenvij": "fjamq6b",
+    "Be2twd7": "f4ybsrx"
   },
   "circular": {
     "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
     "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
     "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
     "Btl43ni": ["f1s8kh49", "f1djnp8u"]
-  },
-  "unchecked": {
-    "Bm7m4lb": "f1byn578"
   }
 }, {
-  "d": [".fjgzulp{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1w9h62z{fill:currentColor;}", ".fpo1scq{cursor:inherit;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1byn578>*{opacity:0;}"]
+  "d": [".fjgzulp{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1w9h62z{fill:currentColor;}", ".f1aehjj5{pointer-events:none;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1ugzwwg{font-size:12px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".f4ybsrx{font-size:16px;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}"]
 });
 
 const useLabelStyles = /*#__PURE__*/__styles({
@@ -208,20 +190,19 @@ const useLabelStyles = /*#__PURE__*/__styles({
 
 export const useCheckboxStyles_unstable = state => {
   const rootStyles = useRootStyles();
-  state.root.className = mergeClasses(checkboxClassName, rootStyles.base, rootStyles.focusIndicator, state.input.disabled && rootStyles.disabled, // Pick exactly one of the color classes, based on `disabled` and `checked`
-  state.input.disabled ? rootStyles.disabledColors : state.checked === 'mixed' ? rootStyles.mixedColors : state.checked ? rootStyles.checkedColors : rootStyles.uncheckedColors, state.root.className);
+  state.root.className = mergeClasses(checkboxClassName, rootStyles.base, state.root.className);
   const inputStyles = useInputStyles();
   state.input.className = mergeClasses(inputStyles.base, state.input.className);
   const indicatorStyles = useIndicatorStyles();
 
   if (state.indicator) {
-    state.indicator.className = mergeClasses(indicatorClassName, indicatorStyles.base, indicatorStyles[state.size], state.circular && indicatorStyles.circular, !state.checked && indicatorStyles.unchecked, state.indicator.className);
+    state.indicator.className = mergeClasses(indicatorClassName, indicatorStyles.base, indicatorStyles[state.size], state.shape === 'circular' && indicatorStyles.circular, state.indicator.className);
   }
 
   const labelStyles = useLabelStyles();
 
   if (state.label) {
-    state.label.className = mergeClasses(labelStyles.base, labelStyles[state.size], state.label.className);
+    state.label.className = mergeClasses(labelClassName, labelStyles.base, labelStyles[state.size], state.label.className);
   }
 
   return state;

package/lib/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 { CheckboxState } from './Checkbox.types';\n\nexport const checkboxClassName = 'fui-Checkbox';\nconst indicatorClassName = 'fui-Checkbox-indicator';\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    position: 'relative',\n    display: 'inline-flex',\n    flexDirection: 'row',\n    cursor: 'pointer',\n    columnGap: spacingHorizontalM,\n    ...shorthands.padding(spacingHorizontalS),\n  },\n\n  disabled: {\n    cursor: 'default',\n  },\n\n  focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n\n  // These `__Colors` styles are mutually exclusive: exactly one should be applied at any time\n  uncheckedColors: {\n    color: tokens.colorNeutralForeground3,\n    [`& .${indicatorClassName}`]: {\n      ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n    },\n\n    ':hover': {\n      color: tokens.colorNeutralForeground2,\n      [`& .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n      },\n    },\n\n    ':active:hover': {\n      color: tokens.colorNeutralForeground1,\n      [`& .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n      },\n    },\n  },\n\n  checkedColors: {\n    color: tokens.colorNeutralForeground1,\n    [`& .${indicatorClassName}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundOnBrand,\n      ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n    },\n\n    ':hover': {\n      [`& .${indicatorClassName}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n      },\n    },\n\n    ':active:hover': {\n      [`& .${indicatorClassName}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n      },\n    },\n  },\n\n  mixedColors: {\n    color: tokens.colorNeutralForeground1,\n    [`& .${indicatorClassName}`]: {\n      ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n      color: tokens.colorCompoundBrandForeground1,\n    },\n\n    ':hover': {\n      [`& .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':active:hover': {\n      [`& .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n        color: tokens.colorCompoundBrandForeground1Pressed,\n      },\n    },\n  },\n\n  disabledColors: {\n    color: tokens.colorNeutralForegroundDisabled,\n    [`& .${indicatorClassName}`]: {\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: '100%',\n    height: '100%',\n    boxSizing: 'border-box',\n    ...shorthands.margin(0),\n    opacity: 0,\n    cursor: 'inherit',\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    fill: 'currentColor',\n    cursor: 'inherit',\n  },\n\n  medium: {\n    width: indicatorSizeMedium,\n    height: indicatorSizeMedium,\n  },\n\n  large: {\n    width: indicatorSizeLarge,\n    height: indicatorSizeLarge,\n  },\n\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n\n  unchecked: {\n    '& > *': {\n      opacity: '0',\n    },\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    userSelect: 'none',\n    cursor: 'inherit',\n    color: 'inherit',\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    ...shorthands.margin(`calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`, 0),\n  },\n  large: {\n    ...shorthands.margin(`calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`, 0),\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(\n    checkboxClassName,\n    rootStyles.base,\n    rootStyles.focusIndicator,\n    state.input.disabled && rootStyles.disabled,\n    // Pick exactly one of the color classes, based on `disabled` and `checked`\n    state.input.disabled\n      ? rootStyles.disabledColors\n      : state.checked === 'mixed'\n      ? rootStyles.mixedColors\n      : state.checked\n      ? rootStyles.checkedColors\n      : rootStyles.uncheckedColors,\n    state.root.className,\n  );\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(inputStyles.base, state.input.className);\n\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      indicatorClassName,\n      indicatorStyles.base,\n      indicatorStyles[state.size],\n      state.circular && indicatorStyles.circular,\n      !state.checked && indicatorStyles.unchecked,\n      state.indicator.className,\n    );\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(labelStyles.base, labelStyles[state.size], state.label.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"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 { CheckboxState } from './Checkbox.types';\n\nexport const checkboxClassName = 'fui-Checkbox';\nconst indicatorClassName = 'fui-Checkbox__indicator';\nconst labelClassName = 'fui-Checkbox__label';\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\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    columnGap: spacingHorizontalM,\n    ...shorthands.padding(spacingHorizontalS),\n    ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: '100%',\n    height: '100%',\n    boxSizing: 'border-box',\n    ...shorthands.margin(0),\n    opacity: 0,\n    cursor: 'pointer',\n\n    // When unchecked, hide the the checkmark icon (child of the indicator slot)\n    [`:not(:checked):not(:indeterminate) ~ .${indicatorClassName} > *`]: {\n      opacity: 0,\n    },\n\n    // Colors for the unchecked state\n    ':enabled:not(:checked):not(:indeterminate)': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground3,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      ':hover': {\n        [`& ~ .${labelClassName}`]: {\n          color: tokens.colorNeutralForeground2,\n        },\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${labelClassName}`]: {\n          color: tokens.colorNeutralForeground1,\n        },\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Colors for the checked state\n    ':enabled:checked:not(:indeterminate)': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n      },\n\n      ':hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n        },\n      },\n    },\n\n    // Colors for the mixed state\n    ':enabled:indeterminate': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n        color: tokens.colorCompoundBrandForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n          color: tokens.colorCompoundBrandForeground1Hover,\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n          color: tokens.colorCompoundBrandForeground1Pressed,\n        },\n      },\n    },\n\n    ':disabled': {\n      cursor: 'default',\n\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\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    fill: 'currentColor',\n    pointerEvents: 'none',\n  },\n\n  medium: {\n    width: indicatorSizeMedium,\n    height: indicatorSizeMedium,\n    fontSize: '12px',\n  },\n\n  large: {\n    width: indicatorSizeLarge,\n    height: indicatorSizeLarge,\n    fontSize: '16px',\n  },\n\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    userSelect: 'none',\n    cursor: 'inherit',\n    color: 'inherit',\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    ...shorthands.margin(`calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`, 0),\n  },\n  large: {\n    ...shorthands.margin(`calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`, 0),\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(checkboxClassName, rootStyles.base, state.root.className);\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(inputStyles.base, state.input.className);\n\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      indicatorClassName,\n      indicatorStyles.base,\n      indicatorStyles[state.size],\n      state.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      labelClassName,\n      labelStyles.base,\n      labelStyles[state.size],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Checkbox/Checkbox.types.d.ts

@@ -3,24 +3,29 @@ import { Label } from '@fluentui/react-label';
 import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 interface CheckboxCommons {
     /**
-     * Whether to render the checkbox in a circular shape instead of square.
-     * This variant is only recommended to be used in a tasks-style UI (checklist),
+     * The shape of the checkbox indicator.
+     *
+     * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),
      * since it otherwise could be confused for a `RadioItem`.
-     * @defaultvalue false
+     *
+     * @defaultvalue square
      */
-    circular: boolean;
+    shape: 'square' | 'circular';
     /**
-     * A checkbox's state can be controlled.
+     * The controlled value for the checkbox.
+     *
      * @defaultvalue false
      */
     checked: 'mixed' | boolean;
     /**
-     * Checkbox supports two different checkbox sizes.
+     * The size of the checkbox indicator.
+     *
      * @defaultvalue medium
      */
     size: 'medium' | 'large';
     /**
-     * Determines whether the label should be positioned before or after the checkbox.
+     * The position of the label relative to the checkbox indicator.
+     *
      * @defaultvalue after
      */
     labelPosition: 'before' | 'after';
@@ -51,7 +56,7 @@ export declare type CheckboxSlots = {
      */
     input: NonNullable<Slot<'input'>>;
     /**
-     * Renders the checkbox, with the checkmark icon as its child when checked.
+     * The checkbox, with the checkmark icon as its child when checked.
      */
     indicator: Slot<'div'>;
 };

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

@@ -15,9 +15,9 @@ const renderCheckbox_unstable = state => {
     slotProps
   } = react_utilities_1.getSlots(state);
   return React.createElement(slots.root, { ...slotProps.root
-  }, state.labelPosition === 'before' && slots.label && React.createElement(slots.label, { ...slotProps.label
+  }, React.createElement(slots.input, { ...slotProps.input
+  }), state.labelPosition === 'before' && slots.label && React.createElement(slots.label, { ...slotProps.label
   }), React.createElement(slots.indicator, { ...slotProps.indicator
-  }), React.createElement(slots.input, { ...slotProps.input
   }), state.labelPosition === 'after' && slots.label && React.createElement(slots.label, { ...slotProps.label
   }));
 };

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;AAC9D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,IAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADtD,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CAFF,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAHF,EAIG,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,KAAK,CAAC,KAAzC,IAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,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      {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      <slots.input {...slotProps.input} />\n      {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"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;AAC9D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CADF,EAEG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,IAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAFtD,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAhB,CAHF,EAIG,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,KAAK,CAAC,KAAzC,IAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,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

@@ -27,7 +27,7 @@ const useCheckbox_unstable = (props, ref) => {
   const {
     disabled,
     required,
-    circular = false,
+    shape = 'square',
     size = 'medium',
     labelPosition = 'after',
     onChange
@@ -47,8 +47,8 @@ const useCheckbox_unstable = (props, ref) => {
   let checkmarkIcon;
 
   if (mixed) {
-    if (circular) {
-      checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Circle16Filled, null) : React.createElement(react_icons_1.Circle12Filled, null);
+    if (shape === 'circular') {
+      checkmarkIcon = React.createElement(react_icons_1.CircleFilled, null);
     } else {
       checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Square16Filled, null) : React.createElement(react_icons_1.Square12Filled, null);
     }
@@ -57,7 +57,7 @@ const useCheckbox_unstable = (props, ref) => {
   }
 
   const state = {
-    circular,
+    shape,
     checked,
     size,
     labelPosition,

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  Circle12Filled,\n  Circle16Filled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\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, circular = false, 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 (circular) {\n      checkmarkIcon = size === 'large' ? <Circle16Filled /> : <Circle12Filled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  const state: CheckboxState = {\n    circular,\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: nativeProps.root,\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":["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';\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: nativeProps.root,\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

@@ -12,33 +12,24 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
 exports.checkboxClassName = 'fui-Checkbox';
-const indicatorClassName = 'fui-Checkbox-indicator'; // TODO replace these spacing constants with theme values once they're on the theme
+const indicatorClassName = 'fui-Checkbox__indicator';
+const labelClassName = 'fui-Checkbox__label'; // TODO replace these spacing constants with theme values once they're on the theme
 
 const spacingHorizontalS = '8px';
 const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
 
 const indicatorSizeMedium = '16px';
 const indicatorSizeLarge = '20px';
-/**
- * Styles for the root slot
- */
 
 const useRootStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "qhf8xq": "f10pi13n",
     "mc9l5x": "ftuwxu6",
-    "Beiy3e4": "f1063pyq",
-    "Bceei9c": "f1k6fduh",
     "i8kkvl": "f4akndk",
     "z8tnut": "fp9bwmr",
     "z189sj": ["f19lj068", "f177v4lu"],
     "Byoj8tv": "f150uoa4",
-    "uwmqm3": ["f177v4lu", "f19lj068"]
-  },
-  "disabled": {
-    "Bceei9c": "f158kwzp"
-  },
-  "focusIndicator": {
+    "uwmqm3": ["f177v4lu", "f19lj068"],
     "B486eqv": "f2hkw1w",
     "c2y4jd": "fsofd9k",
     "B8vm7ur": "f12sql3b",
@@ -54,74 +45,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "Jxg1p8": "f8rjbh6",
     "Bc94xmo": ["fxfgh6q", "f8l10fm"],
     "Bj23z95": ["f8l10fm", "fxfgh6q"]
-  },
-  "uncheckedColors": {
-    "sj55zd": "f11d4kpn",
-    "B2uuno9": "fwkyayc",
-    "qasus0": ["f7aqmyg", "ft2adke"],
-    "joesme": "f1w1qo1y",
-    "qcmoe7": ["ft2adke", "f7aqmyg"],
-    "Bi91k9c": "f3p8bqa",
-    "vpay66": "fft1thc",
-    "fgdpeo": ["f1w8do5y", "fepve6s"],
-    "ooapsn": "fdf0l0r",
-    "ev9ftv": ["fepve6s", "f1w8do5y"],
-    "Bfw6nra": "fesph6q",
-    "Brbcl2": "f1mhtrce",
-    "E16u1b": ["f17v52hn", "fg62ii9"],
-    "c4amgi": "f1r1cpih",
-    "Bepp5ky": ["fg62ii9", "f17v52hn"]
-  },
-  "checkedColors": {
-    "sj55zd": "f19n0e5",
-    "mrtg77": "f1nckptt",
-    "bxuuxi": "f19uhq4u",
-    "B2uuno9": "ffzu9nk",
-    "qasus0": ["f1g19ujf", "fvb8adx"],
-    "joesme": "f1emw82k",
-    "qcmoe7": ["fvb8adx", "f1g19ujf"],
-    "Bqcm5gq": "fc90h92",
-    "vpay66": "f1gd0goh",
-    "fgdpeo": ["f926psx", "f1pjby8k"],
-    "ooapsn": "f1b2jcp4",
-    "ev9ftv": ["f1pjby8k", "f926psx"],
-    "Bn43wis": "f8zpi21",
-    "Brbcl2": "f1irvqu2",
-    "E16u1b": ["f5uvb4g", "f1vydb2"],
-    "c4amgi": "fgkonep",
-    "Bepp5ky": ["f1vydb2", "f5uvb4g"]
-  },
-  "mixedColors": {
-    "sj55zd": "f19n0e5",
-    "B2uuno9": "fkebysb",
-    "qasus0": ["f1k0bg1", "f4oydaf"],
-    "joesme": "fi1mkuk",
-    "qcmoe7": ["f4oydaf", "f1k0bg1"],
-    "bxuuxi": "f1n04o3z",
-    "vpay66": "fdfakjf",
-    "fgdpeo": ["fvqbddr", "f1babrrv"],
-    "ooapsn": "f1jbek0d",
-    "ev9ftv": ["f1babrrv", "fvqbddr"],
-    "Iwvt79": "f1mps0ds",
-    "Brbcl2": "f1tallx",
-    "E16u1b": ["f9cmnyc", "f1skyj24"],
-    "c4amgi": "f12y7q7q",
-    "Bepp5ky": ["f1skyj24", "f9cmnyc"],
-    "Ewzbd8": "f135b915"
-  },
-  "disabledColors": {
-    "sj55zd": "f1s2aq7o",
-    "B2uuno9": "f1bezmwk",
-    "qasus0": ["fb9vlya", "f1ubioqa"],
-    "joesme": "fu4x4v",
-    "qcmoe7": ["f1ubioqa", "fb9vlya"],
-    "bxuuxi": "fpjy2vv"
   }
 }, {
-  "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f1k6fduh{cursor:pointer;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f158kwzp{cursor:default;}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fwkyayc .fui-Checkbox-indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f7aqmyg .fui-Checkbox-indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".ft2adke .fui-Checkbox-indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1w1qo1y .fui-Checkbox-indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1nckptt .fui-Checkbox-indicator{background-color:var(--colorCompoundBrandBackground);}", ".f19uhq4u .fui-Checkbox-indicator{color:var(--colorNeutralForegroundOnBrand);}", ".ffzu9nk .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandBackground);}", ".f1g19ujf .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandBackground);}", ".fvb8adx .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandBackground);}", ".f1emw82k .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandBackground);}", ".fkebysb .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".f1k0bg1 .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".f4oydaf .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".fi1mkuk .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f1n04o3z .fui-Checkbox-indicator{color:var(--colorCompoundBrandForeground1);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1bezmwk .fui-Checkbox-indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".fb9vlya .fui-Checkbox-indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1ubioqa .fui-Checkbox-indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fu4x4v .fui-Checkbox-indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fpjy2vv .fui-Checkbox-indicator{color:var(--colorNeutralForegroundDisabled);}"],
-  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
-  "h": [".f3p8bqa:hover{color:var(--colorNeutralForeground2);}", ".fft1thc:hover .fui-Checkbox-indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1w8do5y:hover .fui-Checkbox-indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".fepve6s:hover .fui-Checkbox-indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".fdf0l0r:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".fc90h92:hover .fui-Checkbox-indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".f1gd0goh:hover .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}", ".f926psx:hover .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}", ".f1pjby8k:hover .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}", ".f1b2jcp4:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}", ".fdfakjf:hover .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".fvqbddr:hover .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".f1babrrv:hover .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".f1jbek0d:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".f1mps0ds:hover .fui-Checkbox-indicator{color:var(--colorCompoundBrandForeground1Hover);}"],
-  "a": [".fesph6q:active:hover{color:var(--colorNeutralForeground1);}", ".f1mhtrce:active:hover .fui-Checkbox-indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f17v52hn:active:hover .fui-Checkbox-indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fg62ii9:active:hover .fui-Checkbox-indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1r1cpih:active:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f8zpi21:active:hover .fui-Checkbox-indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1irvqu2:active:hover .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}", ".f5uvb4g:active:hover .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1vydb2:active:hover .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}", ".fgkonep:active:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1tallx:active:hover .fui-Checkbox-indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f9cmnyc:active:hover .fui-Checkbox-indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".f1skyj24:active:hover .fui-Checkbox-indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".f12y7q7q:active:hover .fui-Checkbox-indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f135b915:active:hover .fui-Checkbox-indicator{color:var(--colorCompoundBrandForeground1Pressed);}"]
+  "d": [".f10pi13n{position:relative;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });
 
 const useInputStyles = /*#__PURE__*/react_1.__styles({
@@ -137,10 +64,66 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
     "jrapky": "f19f4twv",
     "Frg6f3": ["f1tyq0we", "f11qmguv"],
     "abs64n": "fk73vx1",
-    "Bceei9c": "fpo1scq"
+    "Bceei9c": "f1k6fduh",
+    "B26k0as": "f1yrrd5t",
+    "k0xvi9": "fvfr0er",
+    "Bqb28oy": "fcwiijr",
+    "Fszymg": ["f11s8ldy", "f37mzfx"],
+    "s5xoki": "forfpyi",
+    "cfw8t2": ["f37mzfx", "f11s8ldy"],
+    "b9fajx": "f1vd61pd",
+    "pff03s": "f1mzgjal",
+    "Bk0s23q": ["f1iwu0i3", "f6umev3"],
+    "Bfc5gcl": "femu9zt",
+    "a4vgqw": ["f6umev3", "f1iwu0i3"],
+    "Fum7gy": "f1s8s9qo",
+    "B5tev9i": "fuvx3by",
+    "ecjak0": ["fuqx993", "f1akce7s"],
+    "B006ete": "feccz1o",
+    "Bxlzfhf": ["f1akce7s", "fuqx993"],
+    "qzqrip": "fqgvcms",
+    "xmoia3": "f1wvbx6q",
+    "i1phtq": "fcsc0bc",
+    "Bi8r3f5": "fkf9h0q",
+    "yvncz7": ["faeo8p5", "f4rpdul"],
+    "D2mvea": "fsk3itm",
+    "Bjmkmyo": ["f4rpdul", "faeo8p5"],
+    "B525uqd": "f4wqdms",
+    "B5z3g6i": "ftufdon",
+    "Bwnzx1a": ["f1ni78ii", "f1pe82pw"],
+    "w3j1jp": "fxl8eb7",
+    "n2zbqb": ["f1pe82pw", "f1ni78ii"],
+    "Bek439x": "f12pgwe7",
+    "Bgt4g9q": "f1c5u0pt",
+    "Bkzkukt": ["fyfn4nz", "f1aaeu2t"],
+    "wg1kw8": "ffzx9q8",
+    "Bh7u92y": ["f1aaeu2t", "fyfn4nz"],
+    "B40413r": "f1rm0htn",
+    "B9f5amx": "fpb7n6l",
+    "gbnyp0": ["f1uwkm0d", "fakdbj6"],
+    "ilwfws": "f180qsza",
+    "Fk4w3x": ["fakdbj6", "f1uwkm0d"],
+    "tfmijd": "f3nyagc",
+    "Bketd8w": "f1eh922j",
+    "s1clob": ["f1f3l6lh", "faa1us6"],
+    "B8s8lrk": "f1g6jlfz",
+    "Bp3qae9": ["faa1us6", "f1f3l6lh"],
+    "c4h28b": "f1d2ycii",
+    "Bvff7ki": "f18ruat1",
+    "B0usqpl": ["f18b6ltw", "fd6ao2z"],
+    "ckdfsi": "fdz9k82",
+    "B2hfjzz": ["fd6ao2z", "f18b6ltw"],
+    "B0rx68v": "f8c3d4w",
+    "ezr58z": "fvxnmui",
+    "Bdfu378": "f1ceq7vh",
+    "fvfg5q": "f4ohyq5",
+    "Bbnnodr": ["f1kakd2g", "f3ulah5"],
+    "B7y28oj": "f5fda5m",
+    "Dpxclb": ["f3ulah5", "f1kakd2g"],
+    "E1kcat": "f1c3drxw"
   }
 }, {
-  "d": [".f1euv43f{position:absolute;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".fpo1scq{cursor:inherit;}"]
+  "d": [".f1euv43f{position:absolute;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1k6fduh{cursor:pointer;}", ".f1yrrd5t:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".fvfr0er:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".fcwiijr:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f11s8ldy:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f37mzfx:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".forfpyi:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1vd61pd:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".f1mzgjal:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1iwu0i3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f6umev3:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".femu9zt:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1s8s9qo:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fuvx3by:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fuqx993:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1akce7s:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".feccz1o:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fqgvcms:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".f1wvbx6q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}", ".fcsc0bc:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".fkf9h0q:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}", ".faeo8p5:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}", ".f4rpdul:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}", ".fsk3itm:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}", ".f4wqdms:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".ftufdon:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}", ".f1ni78ii:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}", ".f1pe82pw:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}", ".fxl8eb7:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}", ".f12pgwe7:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1c5u0pt:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}", ".fyfn4nz:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1aaeu2t:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}", ".ffzx9q8:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}", ".f1rm0htn:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".fpb7n6l:enabled:indeterminate~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}", ".f1uwkm0d:enabled:indeterminate~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}", ".fakdbj6:enabled:indeterminate~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}", ".f180qsza:enabled:indeterminate~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}", ".f3nyagc:enabled:indeterminate~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}", ".f1eh922j:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}", ".f1f3l6lh:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}", ".faa1us6:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}", ".f1g6jlfz:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}", ".f1d2ycii:enabled:indeterminate:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}", ".f18ruat1:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}", ".f18b6ltw:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}", ".fd6ao2z:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}", ".fdz9k82:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f8c3d4w:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}", ".fvxnmui:disabled{cursor:default;}", ".f1ceq7vh:disabled~.fui-Checkbox__label{color:var(--colorNeutralForegroundDisabled);}", ".f4ohyq5:disabled~.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1kakd2g:disabled~.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f3ulah5:disabled~.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f5fda5m:disabled~.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1c3drxw:disabled~.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}"]
 });
 
 const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
@@ -166,27 +149,26 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
     "B7oj6ja": ["f1rstyi9", "f1s4nn1u"],
     "Btl43ni": ["f1s4nn1u", "f1rstyi9"],
     "Bkfmm31": "f1w9h62z",
-    "Bceei9c": "fpo1scq"
+    "Bkecrkj": "f1aehjj5"
   },
   "medium": {
     "a9b677": "fjw5fx7",
-    "Bqenvij": "fd461yt"
+    "Bqenvij": "fd461yt",
+    "Be2twd7": "f1ugzwwg"
   },
   "large": {
     "a9b677": "f64fuq3",
-    "Bqenvij": "fjamq6b"
+    "Bqenvij": "fjamq6b",
+    "Be2twd7": "f4ybsrx"
   },
   "circular": {
     "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
     "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
     "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
     "Btl43ni": ["f1s8kh49", "f1djnp8u"]
-  },
-  "unchecked": {
-    "Bm7m4lb": "f1byn578"
   }
 }, {
-  "d": [".fjgzulp{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1w9h62z{fill:currentColor;}", ".fpo1scq{cursor:inherit;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1byn578>*{opacity:0;}"]
+  "d": [".fjgzulp{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1w9h62z{fill:currentColor;}", ".f1aehjj5{pointer-events:none;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1ugzwwg{font-size:12px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".f4ybsrx{font-size:16px;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}"]
 });
 
 const useLabelStyles = /*#__PURE__*/react_1.__styles({
@@ -218,20 +200,19 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
 
 const useCheckboxStyles_unstable = state => {
   const rootStyles = useRootStyles();
-  state.root.className = react_1.mergeClasses(exports.checkboxClassName, rootStyles.base, rootStyles.focusIndicator, state.input.disabled && rootStyles.disabled, // Pick exactly one of the color classes, based on `disabled` and `checked`
-  state.input.disabled ? rootStyles.disabledColors : state.checked === 'mixed' ? rootStyles.mixedColors : state.checked ? rootStyles.checkedColors : rootStyles.uncheckedColors, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.checkboxClassName, rootStyles.base, state.root.className);
   const inputStyles = useInputStyles();
   state.input.className = react_1.mergeClasses(inputStyles.base, state.input.className);
   const indicatorStyles = useIndicatorStyles();
 
   if (state.indicator) {
-    state.indicator.className = react_1.mergeClasses(indicatorClassName, indicatorStyles.base, indicatorStyles[state.size], state.circular && indicatorStyles.circular, !state.checked && indicatorStyles.unchecked, state.indicator.className);
+    state.indicator.className = react_1.mergeClasses(indicatorClassName, indicatorStyles.base, indicatorStyles[state.size], state.shape === 'circular' && indicatorStyles.circular, state.indicator.className);
   }
 
   const labelStyles = useLabelStyles();
 
   if (state.label) {
-    state.label.className = react_1.mergeClasses(labelStyles.base, labelStyles[state.size], state.label.className);
+    state.label.className = react_1.mergeClasses(labelClassName, labelStyles.base, labelStyles[state.size], state.label.className);
   }
 
   return state;

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 { CheckboxState } from './Checkbox.types';\n\nexport const checkboxClassName = 'fui-Checkbox';\nconst indicatorClassName = 'fui-Checkbox-indicator';\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    position: 'relative',\n    display: 'inline-flex',\n    flexDirection: 'row',\n    cursor: 'pointer',\n    columnGap: spacingHorizontalM,\n    ...shorthands.padding(spacingHorizontalS),\n  },\n\n  disabled: {\n    cursor: 'default',\n  },\n\n  focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n\n  // These `__Colors` styles are mutually exclusive: exactly one should be applied at any time\n  uncheckedColors: {\n    color: tokens.colorNeutralForeground3,\n    [`& .${indicatorClassName}`]: {\n      ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n    },\n\n    ':hover': {\n      color: tokens.colorNeutralForeground2,\n      [`& .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n      },\n    },\n\n    ':active:hover': {\n      color: tokens.colorNeutralForeground1,\n      [`& .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n      },\n    },\n  },\n\n  checkedColors: {\n    color: tokens.colorNeutralForeground1,\n    [`& .${indicatorClassName}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundOnBrand,\n      ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n    },\n\n    ':hover': {\n      [`& .${indicatorClassName}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n      },\n    },\n\n    ':active:hover': {\n      [`& .${indicatorClassName}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n      },\n    },\n  },\n\n  mixedColors: {\n    color: tokens.colorNeutralForeground1,\n    [`& .${indicatorClassName}`]: {\n      ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n      color: tokens.colorCompoundBrandForeground1,\n    },\n\n    ':hover': {\n      [`& .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':active:hover': {\n      [`& .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n        color: tokens.colorCompoundBrandForeground1Pressed,\n      },\n    },\n  },\n\n  disabledColors: {\n    color: tokens.colorNeutralForegroundDisabled,\n    [`& .${indicatorClassName}`]: {\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: '100%',\n    height: '100%',\n    boxSizing: 'border-box',\n    ...shorthands.margin(0),\n    opacity: 0,\n    cursor: 'inherit',\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    fill: 'currentColor',\n    cursor: 'inherit',\n  },\n\n  medium: {\n    width: indicatorSizeMedium,\n    height: indicatorSizeMedium,\n  },\n\n  large: {\n    width: indicatorSizeLarge,\n    height: indicatorSizeLarge,\n  },\n\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n\n  unchecked: {\n    '& > *': {\n      opacity: '0',\n    },\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    userSelect: 'none',\n    cursor: 'inherit',\n    color: 'inherit',\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    ...shorthands.margin(`calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`, 0),\n  },\n  large: {\n    ...shorthands.margin(`calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`, 0),\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(\n    checkboxClassName,\n    rootStyles.base,\n    rootStyles.focusIndicator,\n    state.input.disabled && rootStyles.disabled,\n    // Pick exactly one of the color classes, based on `disabled` and `checked`\n    state.input.disabled\n      ? rootStyles.disabledColors\n      : state.checked === 'mixed'\n      ? rootStyles.mixedColors\n      : state.checked\n      ? rootStyles.checkedColors\n      : rootStyles.uncheckedColors,\n    state.root.className,\n  );\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(inputStyles.base, state.input.className);\n\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      indicatorClassName,\n      indicatorStyles.base,\n      indicatorStyles[state.size],\n      state.circular && indicatorStyles.circular,\n      !state.checked && indicatorStyles.unchecked,\n      state.indicator.className,\n    );\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(labelStyles.base, labelStyles[state.size], state.label.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"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 { CheckboxState } from './Checkbox.types';\n\nexport const checkboxClassName = 'fui-Checkbox';\nconst indicatorClassName = 'fui-Checkbox__indicator';\nconst labelClassName = 'fui-Checkbox__label';\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\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    columnGap: spacingHorizontalM,\n    ...shorthands.padding(spacingHorizontalS),\n    ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: '100%',\n    height: '100%',\n    boxSizing: 'border-box',\n    ...shorthands.margin(0),\n    opacity: 0,\n    cursor: 'pointer',\n\n    // When unchecked, hide the the checkmark icon (child of the indicator slot)\n    [`:not(:checked):not(:indeterminate) ~ .${indicatorClassName} > *`]: {\n      opacity: 0,\n    },\n\n    // Colors for the unchecked state\n    ':enabled:not(:checked):not(:indeterminate)': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground3,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      ':hover': {\n        [`& ~ .${labelClassName}`]: {\n          color: tokens.colorNeutralForeground2,\n        },\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${labelClassName}`]: {\n          color: tokens.colorNeutralForeground1,\n        },\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n        },\n      },\n    },\n\n    // Colors for the checked state\n    ':enabled:checked:not(:indeterminate)': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n      },\n\n      ':hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n          ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n        },\n      },\n    },\n\n    // Colors for the mixed state\n    ':enabled:indeterminate': {\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n        color: tokens.colorCompoundBrandForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n          color: tokens.colorCompoundBrandForeground1Hover,\n        },\n      },\n\n      ':active:hover': {\n        [`& ~ .${indicatorClassName}`]: {\n          ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n          color: tokens.colorCompoundBrandForeground1Pressed,\n        },\n      },\n    },\n\n    ':disabled': {\n      cursor: 'default',\n\n      [`& ~ .${labelClassName}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n      [`& ~ .${indicatorClassName}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\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    fill: 'currentColor',\n    pointerEvents: 'none',\n  },\n\n  medium: {\n    width: indicatorSizeMedium,\n    height: indicatorSizeMedium,\n    fontSize: '12px',\n  },\n\n  large: {\n    width: indicatorSizeLarge,\n    height: indicatorSizeLarge,\n    fontSize: '16px',\n  },\n\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    userSelect: 'none',\n    cursor: 'inherit',\n    color: 'inherit',\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    ...shorthands.margin(`calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`, 0),\n  },\n  large: {\n    ...shorthands.margin(`calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`, 0),\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(checkboxClassName, rootStyles.base, state.root.className);\n\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(inputStyles.base, state.input.className);\n\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      indicatorClassName,\n      indicatorStyles.base,\n      indicatorStyles[state.size],\n      state.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      labelClassName,\n      labelStyles.base,\n      labelStyles[state.size],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-checkbox",
-  "version": "9.0.0-beta.8",
+  "version": "9.0.0-beta.9",
   "description": "Fluent UI checkbox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -42,9 +42,10 @@
   },
   "dependencies": {
     "@fluentui/react-icons": "^2.0.159-beta.10",
-    "@fluentui/react-label": "9.0.0-beta.7",
-    "@fluentui/react-tabster": "9.0.0-rc.3",
-    "@fluentui/react-utilities": "9.0.0-rc.3",
+    "@fluentui/react-label": "9.0.0-beta.8",
+    "@fluentui/react-tabster": "9.0.0-rc.4",
+    "@fluentui/react-theme": "9.0.0-rc.3",
+    "@fluentui/react-utilities": "9.0.0-rc.4",
     "@griffel/react": "1.0.0",
     "tslib": "^2.1.0"
   },