@fluentui/react-checkbox 9.6.1 → 9.6.3

package/CHANGELOG.md

@@ -1,21 +1,49 @@
 # Change Log - @fluentui/react-checkbox
 
-This log was last generated on Thu, 23 Apr 2026 11:59:57 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Jun 2026 11:03:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.6.3)
+
+Wed, 24 Jun 2026 11:03:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.6.2..@fluentui/react-checkbox_v9.6.3)
+
+### Patches
+
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- fix: move Field control props to base hooks ([PR #36312](https://github.com/microsoft/fluentui/pull/36312) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-field to v9.5.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-label to v9.4.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
+## [9.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.6.2)
+
+Tue, 26 May 2026 09:39:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.6.1..@fluentui/react-checkbox_v9.6.2)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-label to v9.4.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
 ## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.6.1)
 
-Thu, 23 Apr 2026 11:59:57 GMT 
+Thu, 23 Apr 2026 14:21:19 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.6.0..@fluentui/react-checkbox_v9.6.1)
 
 ### Patches
 
-- Bump @fluentui/react-field to v9.5.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-label to v9.4.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-label to v9.4.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 
 ## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.6.0)
 

package/lib/components/Checkbox/useCheckbox.js

@@ -14,12 +14,6 @@ import { useFocusWithin } from '@fluentui/react-tabster';
  * @param props - props from this instance of Checkbox
  * @param ref - reference to `<input>` element of Checkbox
  */ export const useCheckbox_unstable = (props, ref)=>{
-    'use no memo';
-    // Merge props from surrounding <Field>, if any
-    props = useFieldControlProps_unstable(props, {
-        supportsLabelFor: true,
-        supportsRequired: true
-    });
     const { shape = 'square', size = 'medium', ...checkboxProps } = props;
     const state = useCheckboxBase_unstable(checkboxProps, ref);
     // Override indicator children with size+shape-appropriate icon
@@ -64,7 +58,12 @@ import { useFocusWithin } from '@fluentui/react-tabster';
  * @param props - props from this instance of Checkbox
  * @param ref - reference to `<input>` element of Checkbox
  */ export const useCheckboxBase_unstable = (props, ref)=>{
-    'use no memo';
+    'use no memo'; // justified: compiler would optimize useCheckboxBase_unstable — manual opt-out to preserve runtime behavior
+    // Merge props from surrounding <Field>, if any
+    props = useFieldControlProps_unstable(props, {
+        supportsLabelFor: true,
+        supportsRequired: true
+    });
     const { disabled = false, required, labelPosition = 'after', onChange } = props;
     const [checked, setChecked] = useControllableState({
         defaultState: props.defaultChecked,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n  getPartitionedNativeProps,\n  useControllableState,\n  mergeCallbacks,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { CheckboxBaseProps, CheckboxBaseState, CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n  Checkmark12Filled,\n  Checkmark16Filled,\n  Square12Filled,\n  Square16Filled,\n  CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { shape = 'square', size = 'medium', ...checkboxProps } = props;\n\n  const state = useCheckboxBase_unstable(checkboxProps, ref);\n\n  // Override indicator children with size+shape-appropriate icon\n  const mixed = state.checked === 'mixed';\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = <CircleFilled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else if (state.checked) {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  if (state.indicator) {\n    state.indicator.children ??= checkmarkIcon;\n  }\n\n  return {\n    shape,\n    size,\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      label: Label,\n    },\n    label: slot.optional(props.label, {\n      defaultProps: {\n        ...state.label,\n        size: 'medium',\n      },\n      elementType: Label,\n    }),\n  };\n};\n\n/**\n * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,\n * focus management, and slot structure without design props.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckboxBase_unstable = (\n  props: CheckboxBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): CheckboxBaseState => {\n  'use no memo';\n\n  const { disabled = false, required, 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', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  const state: CheckboxBaseState = {\n    checked,\n    disabled,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: 'label',\n    },\n    root: slot.always(props.root, {\n      defaultProps: {\n        ref: useFocusWithin<HTMLSpanElement>(),\n        ...nativeProps.root,\n      },\n      elementType: 'span',\n    }),\n    input: slot.always(props.input, {\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    label: slot.optional(props.label, {\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n      },\n      elementType: 'label',\n    }),\n    indicator: slot.optional(props.indicator, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n      },\n      elementType: 'div',\n    }),\n  };\n\n  state.input.onChange = mergeCallbacks(state.input.onChange, 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"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","mergeCallbacks","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","supportsLabelFor","supportsRequired","shape","size","checkboxProps","state","useCheckboxBase_unstable","mixed","checked","checkmarkIcon","indicator","children","components","label","optional","defaultProps","elementType","disabled","required","labelPosition","onChange","setChecked","defaultState","defaultChecked","initialState","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","input","always","type","htmlFor","renderByDefault","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n  getPartitionedNativeProps,\n  useControllableState,\n  mergeCallbacks,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { CheckboxBaseProps, CheckboxBaseState, CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n  Checkmark12Filled,\n  Checkmark16Filled,\n  Square12Filled,\n  Square16Filled,\n  CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n  const { shape = 'square', size = 'medium', ...checkboxProps } = props;\n\n  const state = useCheckboxBase_unstable(checkboxProps, ref);\n\n  // Override indicator children with size+shape-appropriate icon\n  const mixed = state.checked === 'mixed';\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = <CircleFilled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else if (state.checked) {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  if (state.indicator) {\n    state.indicator.children ??= checkmarkIcon;\n  }\n\n  return {\n    shape,\n    size,\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      label: Label,\n    },\n    label: slot.optional(props.label, {\n      defaultProps: {\n        ...state.label,\n        size: 'medium',\n      },\n      elementType: Label,\n    }),\n  };\n};\n\n/**\n * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,\n * focus management, and slot structure without design props.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckboxBase_unstable = (\n  props: CheckboxBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): CheckboxBaseState => {\n  'use no memo'; // justified: compiler would optimize useCheckboxBase_unstable — manual opt-out to preserve runtime behavior\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { disabled = false, required, 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', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  const state: CheckboxBaseState = {\n    checked,\n    disabled,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: 'label',\n    },\n    root: slot.always(props.root, {\n      defaultProps: {\n        ref: useFocusWithin<HTMLSpanElement>(),\n        ...nativeProps.root,\n      },\n      elementType: 'span',\n    }),\n    input: slot.always(props.input, {\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    label: slot.optional(props.label, {\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n      },\n      elementType: 'label',\n    }),\n    indicator: slot.optional(props.indicator, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n      },\n      elementType: 'div',\n    }),\n  };\n\n  state.input.onChange = mergeCallbacks(state.input.onChange, 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"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","mergeCallbacks","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","shape","size","checkboxProps","state","useCheckboxBase_unstable","mixed","checked","checkmarkIcon","indicator","children","components","label","optional","defaultProps","elementType","supportsLabelFor","supportsRequired","disabled","required","labelPosition","onChange","setChecked","defaultState","defaultChecked","initialState","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","input","always","type","htmlFor","renderByDefault","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"}

package/lib/components/Checkbox/useCheckboxStyles.styles.js

@@ -134,8 +134,6 @@ const useLabelStyles = /*#__PURE__*/__styles({
  * Apply styling to the Checkbox slots based on the state
  */
 export const useCheckboxStyles_unstable = state => {
-  'use no memo';
-
   const {
     checked,
     disabled,
@@ -145,17 +143,21 @@ export const useCheckboxStyles_unstable = state => {
   } = state;
   const rootBaseClassName = useRootBaseClassName();
   const rootStyles = useRootStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);
   const inputBaseClassName = useInputBaseClassName();
   const inputStyles = useInputStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
   const indicatorBaseClassName = useIndicatorBaseClassName();
   const indicatorStyles = useIndicatorStyles();
   if (state.indicator) {
+    // eslint-disable-next-line react-hooks/immutability
     state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
   }
   const labelStyles = useLabelStyles();
   if (state.label) {
+    // eslint-disable-next-line react-hooks/immutability
     state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
   }
   return state;

package/lib/components/Checkbox/useCheckboxStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","r","s","useRootStyles","unchecked","Bi91k9c","pv5h1i","lj723h","Hnthvo","checked","sj55zd","wkncrt","zxk7z7","Hmsnfy","e6czan","qbydtz","mixed","Bunfa6h","B15ykmv","disabled","Bceei9c","B7iucu3","Bptavk6","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","p","useLabelStyles","base","qb2dma","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","B6of3ja","jrapky","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n    root: 'fui-Checkbox',\n    label: 'fui-Checkbox__label',\n    input: 'fui-Checkbox__input',\n    indicator: 'fui-Checkbox__indicator'\n};\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n    indicatorColor: '--fui-Checkbox__indicator--color',\n    indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n    indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = makeResetStyles({\n    position: 'relative',\n    display: 'inline-flex',\n    cursor: 'pointer',\n    maxWidth: 'fit-content',\n    verticalAlign: 'middle',\n    color: tokens.colorNeutralForeground3,\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    unchecked: {\n        ':hover': {\n            color: tokens.colorNeutralForeground2,\n            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover\n        },\n        ':active': {\n            color: tokens.colorNeutralForeground1,\n            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    checked: {\n        color: tokens.colorNeutralForeground1,\n        [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n        [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n        [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n        ':hover': {\n            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover\n        },\n        ':active': {\n            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed\n        }\n    },\n    mixed: {\n        color: tokens.colorNeutralForeground1,\n        [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n        [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n        ':hover': {\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed\n        }\n    },\n    disabled: {\n        cursor: 'default',\n        color: tokens.colorNeutralForegroundDisabled,\n        [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n        [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            [vars.indicatorColor]: 'GrayText'\n        }\n    }\n});\nconst useInputBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    cursor: 'inherit',\n    height: '100%',\n    margin: 0,\n    opacity: 0,\n    position: 'absolute',\n    top: 0,\n    // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n    // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n    width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`\n});\nconst useInputStyles = makeStyles({\n    before: {\n        right: 0\n    },\n    after: {\n        left: 0\n    },\n    large: {\n        width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    alignSelf: 'flex-start',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    color: `var(${vars.indicatorColor})`,\n    backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n    borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n    borderStyle: 'solid',\n    borderWidth: tokens.strokeWidthThin,\n    borderRadius: tokens.borderRadiusSmall,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    fill: 'currentColor',\n    pointerEvents: 'none',\n    fontSize: '12px',\n    height: indicatorSizeMedium,\n    width: indicatorSizeMedium\n});\nconst useIndicatorStyles = makeStyles({\n    large: {\n        fontSize: '16px',\n        height: indicatorSizeLarge,\n        width: indicatorSizeLarge\n    },\n    circular: {\n        borderRadius: tokens.borderRadiusCircular\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        alignSelf: 'center',\n        color: 'inherit',\n        cursor: 'inherit',\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    before: {\n        paddingRight: tokens.spacingHorizontalXS\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n    medium: {\n        marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`\n    },\n    large: {\n        marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`\n    }\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */ export const useCheckboxStyles_unstable = (state)=>{\n    'use no memo';\n    const { checked, disabled, labelPosition, shape, size } = state;\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    const indicatorStyles = useIndicatorStyles();\n    if (state.indicator) {\n        state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n    }\n    const labelStyles = useLabelStyles();\n    if (state.label) {\n        state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","r","s","useRootStyles","unchecked","Bi91k9c","pv5h1i","lj723h","Hnthvo","checked","sj55zd","wkncrt","zxk7z7","Hmsnfy","e6czan","qbydtz","mixed","Bunfa6h","B15ykmv","disabled","Bceei9c","B7iucu3","Bptavk6","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","p","useLabelStyles","base","qb2dma","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","B6of3ja","jrapky","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n    root: 'fui-Checkbox',\n    label: 'fui-Checkbox__label',\n    input: 'fui-Checkbox__input',\n    indicator: 'fui-Checkbox__indicator'\n};\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n    indicatorColor: '--fui-Checkbox__indicator--color',\n    indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n    indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = makeResetStyles({\n    position: 'relative',\n    display: 'inline-flex',\n    cursor: 'pointer',\n    maxWidth: 'fit-content',\n    verticalAlign: 'middle',\n    color: tokens.colorNeutralForeground3,\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    unchecked: {\n        ':hover': {\n            color: tokens.colorNeutralForeground2,\n            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover\n        },\n        ':active': {\n            color: tokens.colorNeutralForeground1,\n            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    checked: {\n        color: tokens.colorNeutralForeground1,\n        [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n        [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n        [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n        ':hover': {\n            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover\n        },\n        ':active': {\n            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed\n        }\n    },\n    mixed: {\n        color: tokens.colorNeutralForeground1,\n        [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n        [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n        ':hover': {\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed\n        }\n    },\n    disabled: {\n        cursor: 'default',\n        color: tokens.colorNeutralForegroundDisabled,\n        [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n        [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            [vars.indicatorColor]: 'GrayText'\n        }\n    }\n});\nconst useInputBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    cursor: 'inherit',\n    height: '100%',\n    margin: 0,\n    opacity: 0,\n    position: 'absolute',\n    top: 0,\n    // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n    // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n    width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`\n});\nconst useInputStyles = makeStyles({\n    before: {\n        right: 0\n    },\n    after: {\n        left: 0\n    },\n    large: {\n        width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    alignSelf: 'flex-start',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    color: `var(${vars.indicatorColor})`,\n    backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n    borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n    borderStyle: 'solid',\n    borderWidth: tokens.strokeWidthThin,\n    borderRadius: tokens.borderRadiusSmall,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    fill: 'currentColor',\n    pointerEvents: 'none',\n    fontSize: '12px',\n    height: indicatorSizeMedium,\n    width: indicatorSizeMedium\n});\nconst useIndicatorStyles = makeStyles({\n    large: {\n        fontSize: '16px',\n        height: indicatorSizeLarge,\n        width: indicatorSizeLarge\n    },\n    circular: {\n        borderRadius: tokens.borderRadiusCircular\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        alignSelf: 'center',\n        color: 'inherit',\n        cursor: 'inherit',\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    before: {\n        paddingRight: tokens.spacingHorizontalXS\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n    medium: {\n        marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`\n    },\n    large: {\n        marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`\n    }\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */ export const useCheckboxStyles_unstable = (state)=>{\n    const { checked, disabled, labelPosition, shape, size } = state;\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    const indicatorStyles = useIndicatorStyles();\n    if (state.indicator) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n    }\n    const labelStyles = useLabelStyles();\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Checkbox/useCheckboxStyles.styles.raw.js

@@ -160,21 +160,24 @@ const useLabelStyles = makeStyles({
 /**
  * Apply styling to the Checkbox slots based on the state
  */ export const useCheckboxStyles_unstable = (state)=>{
-    'use no memo';
     const { checked, disabled, labelPosition, shape, size } = state;
     const rootBaseClassName = useRootBaseClassName();
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);
     const inputBaseClassName = useInputBaseClassName();
     const inputStyles = useInputStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
     const indicatorBaseClassName = useIndicatorBaseClassName();
     const indicatorStyles = useIndicatorStyles();
     if (state.indicator) {
+        // eslint-disable-next-line react-hooks/immutability
         state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
     }
     const labelStyles = useLabelStyles();
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
     }
     return state;

package/lib/components/Checkbox/useCheckboxStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/useCheckboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n  root: 'fui-Checkbox',\n  label: 'fui-Checkbox__label',\n  input: 'fui-Checkbox__input',\n  indicator: 'fui-Checkbox__indicator',\n};\n\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n  indicatorColor: '--fui-Checkbox__indicator--color',\n  indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n  indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor',\n} as const;\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  position: 'relative',\n  display: 'inline-flex',\n  cursor: 'pointer',\n  maxWidth: 'fit-content',\n  verticalAlign: 'middle',\n  color: tokens.colorNeutralForeground3,\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  unchecked: {\n    ':hover': {\n      color: tokens.colorNeutralForeground2,\n      [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      color: tokens.colorNeutralForeground1,\n      [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n\n  checked: {\n    color: tokens.colorNeutralForeground1,\n    [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n    [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n    [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n\n    ':hover': {\n      [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover,\n    },\n\n    ':active': {\n      [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed,\n    },\n  },\n\n  mixed: {\n    color: tokens.colorNeutralForeground1,\n    [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n    [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n\n    ':hover': {\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n      [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover,\n    },\n\n    ':active': {\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n      [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n\n  disabled: {\n    cursor: 'default',\n\n    color: tokens.colorNeutralForegroundDisabled,\n    [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n    [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      [vars.indicatorColor]: 'GrayText',\n    },\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'inherit',\n  height: '100%',\n  margin: 0,\n  opacity: 0,\n  position: 'absolute',\n  top: 0,\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n  width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n  },\n  after: {\n    left: 0,\n  },\n\n  large: {\n    width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  alignSelf: 'flex-start',\n  boxSizing: 'border-box',\n  flexShrink: 0,\n\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'hidden',\n\n  color: `var(${vars.indicatorColor})`,\n  backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n  borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n  borderStyle: 'solid',\n  borderWidth: tokens.strokeWidthThin,\n  borderRadius: tokens.borderRadiusSmall,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  fill: 'currentColor',\n  pointerEvents: 'none',\n\n  fontSize: '12px',\n  height: indicatorSizeMedium,\n  width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n  large: {\n    fontSize: '16px',\n    height: indicatorSizeLarge,\n    width: indicatorSizeLarge,\n  },\n\n  circular: { borderRadius: tokens.borderRadiusCircular },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    color: 'inherit',\n    cursor: 'inherit',\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  'use no memo';\n\n  const { checked, disabled, labelPosition, shape, size } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    checkboxClassNames.root,\n    rootBaseClassName,\n    disabled\n      ? rootStyles.disabled\n      : checked === 'mixed'\n      ? rootStyles.mixed\n      : checked\n      ? rootStyles.checked\n      : rootStyles.unchecked,\n    state.root.className,\n  );\n\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(\n    checkboxClassNames.input,\n    inputBaseClassName,\n    size === 'large' && inputStyles.large,\n    inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      checkboxClassNames.indicator,\n      indicatorBaseClassName,\n      size === 'large' && indicatorStyles.large,\n      shape === 'circular' && indicatorStyles.circular,\n      state.indicator.className,\n    );\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      checkboxClassNames.label,\n      labelStyles.base,\n      labelStyles[size],\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","position","display","cursor","maxWidth","verticalAlign","color","colorNeutralForeground3","style","selector","useRootStyles","unchecked","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","checked","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","mixed","colorCompoundBrandStroke","colorCompoundBrandForeground1","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","disabled","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputBaseClassName","boxSizing","height","margin","opacity","top","width","spacingHorizontalS","useInputStyles","before","right","after","left","large","useIndicatorBaseClassName","alignSelf","flexShrink","alignItems","justifyContent","overflow","backgroundColor","borderColor","colorNeutralStrokeAccessible","borderStyle","borderWidth","strokeWidthThin","borderRadius","borderRadiusSmall","spacingVerticalS","fill","pointerEvents","fontSize","useIndicatorStyles","circular","borderRadiusCircular","useLabelStyles","base","padding","paddingRight","spacingHorizontalXS","paddingLeft","medium","marginTop","lineHeightBase300","marginBottom","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,WAAW;AACb,EAAE;AAEF,qDAAqD;AACrD,MAAMC,OAAO;IACXC,gBAAgB;IAChBC,sBAAsB;IACtBC,0BAA0B;AAC5B;AAEA,+DAA+D;AAC/D,MAAMC,sBAAsB;AAC5B,MAAMC,qBAAqB;AAE3B,MAAMC,uBAAuBhB,gBAAgB;IAC3CiB,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACVC,eAAe;IACfC,OAAOlB,OAAOmB,uBAAuB;IACrC,GAAGpB,wBAAwB;QAAEqB,OAAO,CAAC;QAAGC,UAAU;IAAe,EAAE;AACrE;AAEA,MAAMC,gBAAgBzB,WAAW;IAC/B0B,WAAW;QACT,UAAU;YACRL,OAAOlB,OAAOwB,uBAAuB;YACrC,CAAClB,KAAKE,oBAAoB,CAAC,EAAER,OAAOyB,iCAAiC;QACvE;QAEA,WAAW;YACTP,OAAOlB,OAAO0B,uBAAuB;YACrC,CAACpB,KAAKE,oBAAoB,CAAC,EAAER,OAAO2B,mCAAmC;QACzE;IACF;IAEAC,SAAS;QACPV,OAAOlB,OAAO0B,uBAAuB;QACrC,CAACpB,KAAKG,wBAAwB,CAAC,EAAET,OAAO6B,4BAA4B;QACpE,CAACvB,KAAKC,cAAc,CAAC,EAAEP,OAAO8B,8BAA8B;QAC5D,CAACxB,KAAKE,oBAAoB,CAAC,EAAER,OAAO6B,4BAA4B;QAEhE,UAAU;YACR,CAACvB,KAAKG,wBAAwB,CAAC,EAAET,OAAO+B,iCAAiC;YACzE,CAACzB,KAAKE,oBAAoB,CAAC,EAAER,OAAO+B,iCAAiC;QACvE;QAEA,WAAW;YACT,CAACzB,KAAKG,wBAAwB,CAAC,EAAET,OAAOgC,mCAAmC;YAC3E,CAAC1B,KAAKE,oBAAoB,CAAC,EAAER,OAAOgC,mCAAmC;QACzE;IACF;IAEAC,OAAO;QACLf,OAAOlB,OAAO0B,uBAAuB;QACrC,CAACpB,KAAKE,oBAAoB,CAAC,EAAER,OAAOkC,wBAAwB;QAC5D,CAAC5B,KAAKC,cAAc,CAAC,EAAEP,OAAOmC,6BAA6B;QAE3D,UAAU;YACR,CAAC7B,KAAKE,oBAAoB,CAAC,EAAER,OAAOoC,6BAA6B;YACjE,CAAC9B,KAAKC,cAAc,CAAC,EAAEP,OAAOqC,kCAAkC;QAClE;QAEA,WAAW;YACT,CAAC/B,KAAKE,oBAAoB,CAAC,EAAER,OAAOsC,+BAA+B;YACnE,CAAChC,KAAKC,cAAc,CAAC,EAAEP,OAAOuC,oCAAoC;QACpE;IACF;IAEAC,UAAU;QACRzB,QAAQ;QAERG,OAAOlB,OAAOyC,8BAA8B;QAC5C,CAACnC,KAAKE,oBAAoB,CAAC,EAAER,OAAO0C,0BAA0B;QAC9D,CAACpC,KAAKC,cAAc,CAAC,EAAEP,OAAOyC,8BAA8B;QAE5D,kCAAkC;YAChCvB,OAAO;YACP,CAACZ,KAAKC,cAAc,CAAC,EAAE;QACzB;IACF;AACF;AAEA,MAAMoC,wBAAwB/C,gBAAgB;IAC5CgD,WAAW;IACX7B,QAAQ;IACR8B,QAAQ;IACRC,QAAQ;IACRC,SAAS;IACTlC,UAAU;IACVmC,KAAK;IACL,oHAAoH;IACpH,kFAAkF;IAClFC,OAAO,CAAC,KAAK,EAAEvC,oBAAoB,OAAO,EAAEV,OAAOkD,kBAAkB,CAAC,CAAC,CAAC;AAC1E;AAEA,MAAMC,iBAAiBtD,WAAW;IAChCuD,QAAQ;QACNC,OAAO;IACT;IACAC,OAAO;QACLC,MAAM;IACR;IAEAC,OAAO;QACLP,OAAO,CAAC,KAAK,EAAEtC,mBAAmB,OAAO,EAAEX,OAAOkD,kBAAkB,CAAC,CAAC,CAAC;IACzE;AACF;AAEA,MAAMO,4BAA4B7D,gBAAgB;IAChD8D,WAAW;IACXd,WAAW;IACXe,YAAY;IAEZ7C,SAAS;IACT8C,YAAY;IACZC,gBAAgB;IAChBC,UAAU;IAEV5C,OAAO,CAAC,IAAI,EAAEZ,KAAKC,cAAc,CAAC,CAAC,CAAC;IACpCwD,iBAAiB,CAAC,IAAI,EAAEzD,KAAKG,wBAAwB,CAAC,CAAC,CAAC;IACxDuD,aAAa,CAAC,IAAI,EAAE1D,KAAKE,oBAAoB,CAAC,EAAE,EAAER,OAAOiE,4BAA4B,CAAC,CAAC,CAAC;IACxFC,aAAa;IACbC,aAAanE,OAAOoE,eAAe;IACnCC,cAAcrE,OAAOsE,iBAAiB;IACtCxB,QAAQ9C,OAAOuE,gBAAgB,GAAG,MAAMvE,OAAOkD,kBAAkB;IACjEsB,MAAM;IACNC,eAAe;IAEfC,UAAU;IACV7B,QAAQnC;IACRuC,OAAOvC;AACT;AAEA,MAAMiE,qBAAqB9E,WAAW;IACpC2D,OAAO;QACLkB,UAAU;QACV7B,QAAQlC;QACRsC,OAAOtC;IACT;IAEAiE,UAAU;QAAEP,cAAcrE,OAAO6E,oBAAoB;IAAC;AACxD;AAEA,mGAAmG;AACnG,MAAMC,iBAAiBjF,WAAW;IAChCkF,MAAM;QACJrB,WAAW;QACXxC,OAAO;QACPH,QAAQ;QACRiE,SAAS,GAAGhF,OAAOuE,gBAAgB,CAAC,CAAC,EAAEvE,OAAOkD,kBAAkB,EAAE;IACpE;IAEAE,QAAQ;QACN6B,cAAcjF,OAAOkF,mBAAmB;IAC1C;IACA5B,OAAO;QACL6B,aAAanF,OAAOkF,mBAAmB;IACzC;IAEA,oHAAoH;IACpH,mHAAmH;IACnHE,QAAQ;QACNC,WAAW,CAAC,MAAM,EAAE3E,oBAAoB,GAAG,EAAEV,OAAOsF,iBAAiB,CAAC,MAAM,CAAC;QAC7EC,cAAc,CAAC,MAAM,EAAE7E,oBAAoB,GAAG,EAAEV,OAAOsF,iBAAiB,CAAC,MAAM,CAAC;IAClF;IACA9B,OAAO;QACL6B,WAAW,CAAC,MAAM,EAAE1E,mBAAmB,GAAG,EAAEX,OAAOsF,iBAAiB,CAAC,MAAM,CAAC;QAC5EC,cAAc,CAAC,MAAM,EAAE5E,mBAAmB,GAAG,EAAEX,OAAOsF,iBAAiB,CAAC,MAAM,CAAC;IACjF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,6BAA6B,CAACC;IACzC;IAEA,MAAM,EAAE7D,OAAO,EAAEY,QAAQ,EAAEkD,aAAa,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGH;IAE1D,MAAMI,oBAAoBjF;IAC1B,MAAMkF,aAAaxE;IACnBmE,MAAMvF,IAAI,CAAC6F,SAAS,GAAGjG,aACrBG,mBAAmBC,IAAI,EACvB2F,mBACArD,WACIsD,WAAWtD,QAAQ,GACnBZ,YAAY,UACZkE,WAAW7D,KAAK,GAChBL,UACAkE,WAAWlE,OAAO,GAClBkE,WAAWvE,SAAS,EACxBkE,MAAMvF,IAAI,CAAC6F,SAAS;IAGtB,MAAMC,qBAAqBrD;IAC3B,MAAMsD,cAAc9C;IACpBsC,MAAMrF,KAAK,CAAC2F,SAAS,GAAGjG,aACtBG,mBAAmBG,KAAK,EACxB4F,oBACAJ,SAAS,WAAWK,YAAYzC,KAAK,EACrCyC,WAAW,CAACP,cAAc,EAC1BD,MAAMrF,KAAK,CAAC2F,SAAS;IAGvB,MAAMG,yBAAyBzC;IAC/B,MAAM0C,kBAAkBxB;IACxB,IAAIc,MAAMpF,SAAS,EAAE;QACnBoF,MAAMpF,SAAS,CAAC0F,SAAS,GAAGjG,aAC1BG,mBAAmBI,SAAS,EAC5B6F,wBACAN,SAAS,WAAWO,gBAAgB3C,KAAK,EACzCmC,UAAU,cAAcQ,gBAAgBvB,QAAQ,EAChDa,MAAMpF,SAAS,CAAC0F,SAAS;IAE7B;IAEA,MAAMK,cAActB;IACpB,IAAIW,MAAMtF,KAAK,EAAE;QACfsF,MAAMtF,KAAK,CAAC4F,SAAS,GAAGjG,aACtBG,mBAAmBE,KAAK,EACxBiG,YAAYrB,IAAI,EAChBqB,WAAW,CAACR,KAAK,EACjBQ,WAAW,CAACV,cAAc,EAC1BD,MAAMtF,KAAK,CAAC4F,SAAS;IAEzB;IAEA,OAAON;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Checkbox/useCheckboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n  root: 'fui-Checkbox',\n  label: 'fui-Checkbox__label',\n  input: 'fui-Checkbox__input',\n  indicator: 'fui-Checkbox__indicator',\n};\n\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n  indicatorColor: '--fui-Checkbox__indicator--color',\n  indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n  indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor',\n} as const;\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  position: 'relative',\n  display: 'inline-flex',\n  cursor: 'pointer',\n  maxWidth: 'fit-content',\n  verticalAlign: 'middle',\n  color: tokens.colorNeutralForeground3,\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  unchecked: {\n    ':hover': {\n      color: tokens.colorNeutralForeground2,\n      [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      color: tokens.colorNeutralForeground1,\n      [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n\n  checked: {\n    color: tokens.colorNeutralForeground1,\n    [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n    [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n    [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n\n    ':hover': {\n      [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover,\n    },\n\n    ':active': {\n      [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed,\n    },\n  },\n\n  mixed: {\n    color: tokens.colorNeutralForeground1,\n    [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n    [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n\n    ':hover': {\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n      [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover,\n    },\n\n    ':active': {\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n      [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n\n  disabled: {\n    cursor: 'default',\n\n    color: tokens.colorNeutralForegroundDisabled,\n    [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n    [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      [vars.indicatorColor]: 'GrayText',\n    },\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'inherit',\n  height: '100%',\n  margin: 0,\n  opacity: 0,\n  position: 'absolute',\n  top: 0,\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n  width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n  },\n  after: {\n    left: 0,\n  },\n\n  large: {\n    width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  alignSelf: 'flex-start',\n  boxSizing: 'border-box',\n  flexShrink: 0,\n\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'hidden',\n\n  color: `var(${vars.indicatorColor})`,\n  backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n  borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n  borderStyle: 'solid',\n  borderWidth: tokens.strokeWidthThin,\n  borderRadius: tokens.borderRadiusSmall,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  fill: 'currentColor',\n  pointerEvents: 'none',\n\n  fontSize: '12px',\n  height: indicatorSizeMedium,\n  width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n  large: {\n    fontSize: '16px',\n    height: indicatorSizeLarge,\n    width: indicatorSizeLarge,\n  },\n\n  circular: { borderRadius: tokens.borderRadiusCircular },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    color: 'inherit',\n    cursor: 'inherit',\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  const { checked, disabled, labelPosition, shape, size } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    checkboxClassNames.root,\n    rootBaseClassName,\n    disabled\n      ? rootStyles.disabled\n      : checked === 'mixed'\n      ? rootStyles.mixed\n      : checked\n      ? rootStyles.checked\n      : rootStyles.unchecked,\n    state.root.className,\n  );\n\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(\n    checkboxClassNames.input,\n    inputBaseClassName,\n    size === 'large' && inputStyles.large,\n    inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.indicator.className = mergeClasses(\n      checkboxClassNames.indicator,\n      indicatorBaseClassName,\n      size === 'large' && indicatorStyles.large,\n      shape === 'circular' && indicatorStyles.circular,\n      state.indicator.className,\n    );\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.label.className = mergeClasses(\n      checkboxClassNames.label,\n      labelStyles.base,\n      labelStyles[size],\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","position","display","cursor","maxWidth","verticalAlign","color","colorNeutralForeground3","style","selector","useRootStyles","unchecked","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","checked","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","mixed","colorCompoundBrandStroke","colorCompoundBrandForeground1","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","disabled","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputBaseClassName","boxSizing","height","margin","opacity","top","width","spacingHorizontalS","useInputStyles","before","right","after","left","large","useIndicatorBaseClassName","alignSelf","flexShrink","alignItems","justifyContent","overflow","backgroundColor","borderColor","colorNeutralStrokeAccessible","borderStyle","borderWidth","strokeWidthThin","borderRadius","borderRadiusSmall","spacingVerticalS","fill","pointerEvents","fontSize","useIndicatorStyles","circular","borderRadiusCircular","useLabelStyles","base","padding","paddingRight","spacingHorizontalXS","paddingLeft","medium","marginTop","lineHeightBase300","marginBottom","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"}

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

@@ -25,12 +25,6 @@ const _reacticons = require("@fluentui/react-icons");
 const _reactlabel = require("@fluentui/react-label");
 const _reacttabster = require("@fluentui/react-tabster");
 const useCheckbox_unstable = (props, ref)=>{
-    'use no memo';
-    // Merge props from surrounding <Field>, if any
-    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
-        supportsLabelFor: true,
-        supportsRequired: true
-    });
     const { shape = 'square', size = 'medium', ...checkboxProps } = props;
     const state = useCheckboxBase_unstable(checkboxProps, ref);
     // Override indicator children with size+shape-appropriate icon
@@ -69,7 +63,12 @@ const useCheckbox_unstable = (props, ref)=>{
     };
 };
 const useCheckboxBase_unstable = (props, ref)=>{
-    'use no memo';
+    'use no memo'; // justified: compiler would optimize useCheckboxBase_unstable — manual opt-out to preserve runtime behavior
+    // Merge props from surrounding <Field>, if any
+    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true,
+        supportsRequired: true
+    });
     const { disabled = false, required, labelPosition = 'after', onChange } = props;
     const [checked, setChecked] = (0, _reactutilities.useControllableState)({
         defaultState: props.defaultChecked,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n  getPartitionedNativeProps,\n  useControllableState,\n  mergeCallbacks,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { CheckboxBaseProps, CheckboxBaseState, CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n  Checkmark12Filled,\n  Checkmark16Filled,\n  Square12Filled,\n  Square16Filled,\n  CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { shape = 'square', size = 'medium', ...checkboxProps } = props;\n\n  const state = useCheckboxBase_unstable(checkboxProps, ref);\n\n  // Override indicator children with size+shape-appropriate icon\n  const mixed = state.checked === 'mixed';\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = <CircleFilled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else if (state.checked) {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  if (state.indicator) {\n    state.indicator.children ??= checkmarkIcon;\n  }\n\n  return {\n    shape,\n    size,\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      label: Label,\n    },\n    label: slot.optional(props.label, {\n      defaultProps: {\n        ...state.label,\n        size: 'medium',\n      },\n      elementType: Label,\n    }),\n  };\n};\n\n/**\n * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,\n * focus management, and slot structure without design props.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckboxBase_unstable = (\n  props: CheckboxBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): CheckboxBaseState => {\n  'use no memo';\n\n  const { disabled = false, required, 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', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  const state: CheckboxBaseState = {\n    checked,\n    disabled,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: 'label',\n    },\n    root: slot.always(props.root, {\n      defaultProps: {\n        ref: useFocusWithin<HTMLSpanElement>(),\n        ...nativeProps.root,\n      },\n      elementType: 'span',\n    }),\n    input: slot.always(props.input, {\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    label: slot.optional(props.label, {\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n      },\n      elementType: 'label',\n    }),\n    indicator: slot.optional(props.indicator, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n      },\n      elementType: 'div',\n    }),\n  };\n\n  state.input.onChange = mergeCallbacks(state.input.onChange, 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"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","mergeCallbacks","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","supportsLabelFor","supportsRequired","shape","size","checkboxProps","state","useCheckboxBase_unstable","mixed","checked","checkmarkIcon","indicator","children","components","label","optional","defaultProps","elementType","disabled","required","labelPosition","onChange","setChecked","defaultState","defaultChecked","initialState","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","input","always","type","htmlFor","renderByDefault","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n  getPartitionedNativeProps,\n  useControllableState,\n  mergeCallbacks,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport type { CheckboxBaseProps, CheckboxBaseState, CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n  Checkmark12Filled,\n  Checkmark16Filled,\n  Square12Filled,\n  Square16Filled,\n  CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n  const { shape = 'square', size = 'medium', ...checkboxProps } = props;\n\n  const state = useCheckboxBase_unstable(checkboxProps, ref);\n\n  // Override indicator children with size+shape-appropriate icon\n  const mixed = state.checked === 'mixed';\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = <CircleFilled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else if (state.checked) {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  if (state.indicator) {\n    state.indicator.children ??= checkmarkIcon;\n  }\n\n  return {\n    shape,\n    size,\n    ...state,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...state.components,\n      label: Label,\n    },\n    label: slot.optional(props.label, {\n      defaultProps: {\n        ...state.label,\n        size: 'medium',\n      },\n      elementType: Label,\n    }),\n  };\n};\n\n/**\n * Base hook for Checkbox component, which manages state related to checked state, ARIA attributes,\n * focus management, and slot structure without design props.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckboxBase_unstable = (\n  props: CheckboxBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): CheckboxBaseState => {\n  'use no memo'; // justified: compiler would optimize useCheckboxBase_unstable — manual opt-out to preserve runtime behavior\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { disabled = false, required, 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', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  const state: CheckboxBaseState = {\n    checked,\n    disabled,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: 'label',\n    },\n    root: slot.always(props.root, {\n      defaultProps: {\n        ref: useFocusWithin<HTMLSpanElement>(),\n        ...nativeProps.root,\n      },\n      elementType: 'span',\n    }),\n    input: slot.always(props.input, {\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    label: slot.optional(props.label, {\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n      },\n      elementType: 'label',\n    }),\n    indicator: slot.optional(props.indicator, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n      },\n      elementType: 'div',\n    }),\n  };\n\n  state.input.onChange = mergeCallbacks(state.input.onChange, 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"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","mergeCallbacks","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","shape","size","checkboxProps","state","useCheckboxBase_unstable","mixed","checked","checkmarkIcon","indicator","children","components","label","optional","defaultProps","elementType","supportsLabelFor","supportsRequired","disabled","required","labelPosition","onChange","setChecked","defaultState","defaultChecked","initialState","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","input","always","type","htmlFor","renderByDefault","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"}

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

@@ -236,21 +236,24 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useCheckboxStyles_unstable = (state)=>{
-    'use no memo';
     const { checked, disabled, labelPosition, shape, size } = state;
     const rootBaseClassName = useRootBaseClassName();
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);
     const inputBaseClassName = useInputBaseClassName();
     const inputStyles = useInputStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
     const indicatorBaseClassName = useIndicatorBaseClassName();
     const indicatorStyles = useIndicatorStyles();
     if (state.indicator) {
+        // eslint-disable-next-line react-hooks/immutability
         state.indicator.className = (0, _react.mergeClasses)(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
     }
     const labelStyles = useLabelStyles();
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = (0, _react.mergeClasses)(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
     }
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n    root: 'fui-Checkbox',\n    label: 'fui-Checkbox__label',\n    input: 'fui-Checkbox__input',\n    indicator: 'fui-Checkbox__indicator'\n};\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n    indicatorColor: '--fui-Checkbox__indicator--color',\n    indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n    indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = makeResetStyles({\n    position: 'relative',\n    display: 'inline-flex',\n    cursor: 'pointer',\n    maxWidth: 'fit-content',\n    verticalAlign: 'middle',\n    color: tokens.colorNeutralForeground3,\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    unchecked: {\n        ':hover': {\n            color: tokens.colorNeutralForeground2,\n            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover\n        },\n        ':active': {\n            color: tokens.colorNeutralForeground1,\n            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    checked: {\n        color: tokens.colorNeutralForeground1,\n        [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n        [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n        [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n        ':hover': {\n            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover\n        },\n        ':active': {\n            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed\n        }\n    },\n    mixed: {\n        color: tokens.colorNeutralForeground1,\n        [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n        [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n        ':hover': {\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed\n        }\n    },\n    disabled: {\n        cursor: 'default',\n        color: tokens.colorNeutralForegroundDisabled,\n        [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n        [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            [vars.indicatorColor]: 'GrayText'\n        }\n    }\n});\nconst useInputBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    cursor: 'inherit',\n    height: '100%',\n    margin: 0,\n    opacity: 0,\n    position: 'absolute',\n    top: 0,\n    // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n    // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n    width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`\n});\nconst useInputStyles = makeStyles({\n    before: {\n        right: 0\n    },\n    after: {\n        left: 0\n    },\n    large: {\n        width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    alignSelf: 'flex-start',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    color: `var(${vars.indicatorColor})`,\n    backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n    borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n    borderStyle: 'solid',\n    borderWidth: tokens.strokeWidthThin,\n    borderRadius: tokens.borderRadiusSmall,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    fill: 'currentColor',\n    pointerEvents: 'none',\n    fontSize: '12px',\n    height: indicatorSizeMedium,\n    width: indicatorSizeMedium\n});\nconst useIndicatorStyles = makeStyles({\n    large: {\n        fontSize: '16px',\n        height: indicatorSizeLarge,\n        width: indicatorSizeLarge\n    },\n    circular: {\n        borderRadius: tokens.borderRadiusCircular\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        alignSelf: 'center',\n        color: 'inherit',\n        cursor: 'inherit',\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    before: {\n        paddingRight: tokens.spacingHorizontalXS\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n    medium: {\n        marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`\n    },\n    large: {\n        marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`\n    }\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */ export const useCheckboxStyles_unstable = (state)=>{\n    'use no memo';\n    const { checked, disabled, labelPosition, shape, size } = state;\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    const indicatorStyles = useIndicatorStyles();\n    if (state.indicator) {\n        state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n    }\n    const labelStyles = useLabelStyles();\n    if (state.label) {\n        state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n    }\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","r","s","useRootStyles","unchecked","Bi91k9c","pv5h1i","lj723h","Hnthvo","checked","sj55zd","wkncrt","zxk7z7","Hmsnfy","e6czan","qbydtz","mixed","Bunfa6h","B15ykmv","disabled","Bceei9c","B7iucu3","Bptavk6","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","p","useLabelStyles","base","qb2dma","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","B6of3ja","jrapky","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,kBAAkB;;;8BA6JY;eAA1BoE;;;uBAhKyC,gBAAgB;AAGnE,2BAA2B;IAC9BnE,IAAI,EAAE,cAAc;IACpBC,KAAK,EAAE,qBAAqB;IAC5BC,KAAK,EAAE,qBAAqB;IAC5BC,SAAS,EAAE;AACf,CAAC;AACD,qDAAA;AACA,MAAMC,IAAI,GAAG;IACTC,cAAc,EAAE,kCAAkC;IAClDC,oBAAoB,EAAE,wCAAwC;IAC9DC,wBAAwB,EAAE;AAC9B,CAAC;AACD,+DAAA;AACA,MAAMC,mBAAmB,GAAG,MAAM;AAClC,MAAMC,kBAAkB,GAAG,MAAM;AACjC,MAAMC,oBAAoB,GAAA,WAAA,OAAGhB,oBAAA,EAAA,YAAA,YAAA;IAAAiB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAW5B,CAAC;AACF,MAAMC,aAAa,GAAA,WAAA,OAAGlB,eAAA,EAAA;IAAAmB,SAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAR,MAAA,EAAA;QAAAS,MAAA,EAAA;QAAAP,MAAA,EAAA;IAAA;IAAAQ,KAAA,EAAA;QAAAN,MAAA,EAAA;QAAAG,MAAA,EAAA;QAAAD,MAAA,EAAA;QAAAN,MAAA,EAAA;QAAAW,OAAA,EAAA;QAAAT,MAAA,EAAA;QAAAU,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAV,MAAA,EAAA;QAAAG,MAAA,EAAA;QAAAD,MAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAgDrB,CAAC;AACF,MAAMC,qBAAqB,GAAA,WAAA,OAAG3C,oBAAA,EAAA,WAAA,MAAA;IAAA;CAW7B,CAAC;AACF,MAAM4C,cAAc,GAAA,WAAA,OAAG3C,eAAA,EAAA;IAAA4C,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAT,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUtB,CAAC;AACF,MAAMU,yBAAyB,GAAA,WAAA,OAAGnD,oBAAA,EAAA,WAAA,MAAA;IAAA;CAoBjC,CAAC;AACF,MAAMoD,kBAAkB,GAAA,WAAA,OAAGnD,eAAA,EAAA;IAAAgD,KAAA,EAAA;QAAAI,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;IAAAK,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAnB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAoB,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAS1B,CAAC;AACF,mGAAA;AACA,MAAMC,cAAc,GAAA,WAAA,OAAG7D,eAAA,EAAA;IAAA8D,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAtC,MAAA,EAAA;QAAAU,OAAA,EAAA;QAAA6B,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAxB,MAAA,EAAA;QAAAsB,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAApB,KAAA,EAAA;QAAAmB,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAI,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAvB,KAAA,EAAA;QAAAsB,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAA/B,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAoB,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAuBtB,CAAC;AAGS,oCAAoCa,KAAK,IAAG;IACnD,aAAa;IACb,MAAM,EAAEjD,OAAO,EAAEU,QAAQ,EAAEwC,aAAa,EAAEC,KAAK,EAAEC,IAAAA,EAAM,GAAGH,KAAK;IAC/D,MAAMI,iBAAiB,GAAG9D,oBAAoB,CAAC,CAAC;IAChD,MAAM+D,UAAU,GAAG5D,aAAa,CAAC,CAAC;IAClCuD,KAAK,CAACpE,IAAI,CAAC0E,SAAS,OAAG9E,mBAAY,EAACG,kBAAkB,CAACC,IAAI,EAAEwE,iBAAiB,EAAE3C,QAAQ,GAAG4C,UAAU,CAAC5C,QAAQ,GAAGV,OAAO,KAAK,OAAO,GAAGsD,UAAU,CAAC/C,KAAK,GAAGP,OAAO,GAAGsD,UAAU,CAACtD,OAAO,GAAGsD,UAAU,CAAC3D,SAAS,EAAEsD,KAAK,CAACpE,IAAI,CAAC0E,SAAS,CAAC;IACpO,MAAMC,kBAAkB,GAAGtC,qBAAqB,CAAC,CAAC;IAClD,MAAMuC,WAAW,GAAGtC,cAAc,CAAC,CAAC;IACpC8B,KAAK,CAAClE,KAAK,CAACwE,SAAS,OAAG9E,mBAAY,EAACG,kBAAkB,CAACG,KAAK,EAAEyE,kBAAkB,EAAEJ,IAAI,KAAK,OAAO,IAAIK,WAAW,CAACjC,KAAK,EAAEiC,WAAW,CAACP,aAAa,CAAC,EAAED,KAAK,CAAClE,KAAK,CAACwE,SAAS,CAAC;IAC5K,MAAMG,sBAAsB,GAAGhC,yBAAyB,CAAC,CAAC;IAC1D,MAAMiC,eAAe,GAAGhC,kBAAkB,CAAC,CAAC;IAC5C,IAAIsB,KAAK,CAACjE,SAAS,EAAE;QACjBiE,KAAK,CAACjE,SAAS,CAACuE,SAAS,OAAG9E,mBAAY,EAACG,kBAAkB,CAACI,SAAS,EAAE0E,sBAAsB,EAAEN,IAAI,KAAK,OAAO,IAAIO,eAAe,CAACnC,KAAK,EAAE2B,KAAK,KAAK,UAAU,IAAIQ,eAAe,CAAC7B,QAAQ,EAAEmB,KAAK,CAACjE,SAAS,CAACuE,SAAS,CAAC;IAC1N;IACA,MAAMK,WAAW,GAAGvB,cAAc,CAAC,CAAC;IACpC,IAAIY,KAAK,CAACnE,KAAK,EAAE;QACbmE,KAAK,CAACnE,KAAK,CAACyE,SAAS,OAAG9E,mBAAY,EAACG,kBAAkB,CAACE,KAAK,EAAE8E,WAAW,CAACtB,IAAI,EAAEsB,WAAW,CAACR,IAAI,CAAC,EAAEQ,WAAW,CAACV,aAAa,CAAC,EAAED,KAAK,CAACnE,KAAK,CAACyE,SAAS,CAAC;IAC1J;IACA,OAAON,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n    root: 'fui-Checkbox',\n    label: 'fui-Checkbox__label',\n    input: 'fui-Checkbox__input',\n    indicator: 'fui-Checkbox__indicator'\n};\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n    indicatorColor: '--fui-Checkbox__indicator--color',\n    indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n    indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = makeResetStyles({\n    position: 'relative',\n    display: 'inline-flex',\n    cursor: 'pointer',\n    maxWidth: 'fit-content',\n    verticalAlign: 'middle',\n    color: tokens.colorNeutralForeground3,\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    unchecked: {\n        ':hover': {\n            color: tokens.colorNeutralForeground2,\n            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover\n        },\n        ':active': {\n            color: tokens.colorNeutralForeground1,\n            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    checked: {\n        color: tokens.colorNeutralForeground1,\n        [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n        [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n        [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n        ':hover': {\n            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover\n        },\n        ':active': {\n            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed\n        }\n    },\n    mixed: {\n        color: tokens.colorNeutralForeground1,\n        [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n        [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n        ':hover': {\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed\n        }\n    },\n    disabled: {\n        cursor: 'default',\n        color: tokens.colorNeutralForegroundDisabled,\n        [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n        [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            [vars.indicatorColor]: 'GrayText'\n        }\n    }\n});\nconst useInputBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    cursor: 'inherit',\n    height: '100%',\n    margin: 0,\n    opacity: 0,\n    position: 'absolute',\n    top: 0,\n    // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n    // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n    width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`\n});\nconst useInputStyles = makeStyles({\n    before: {\n        right: 0\n    },\n    after: {\n        left: 0\n    },\n    large: {\n        width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    alignSelf: 'flex-start',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    color: `var(${vars.indicatorColor})`,\n    backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n    borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n    borderStyle: 'solid',\n    borderWidth: tokens.strokeWidthThin,\n    borderRadius: tokens.borderRadiusSmall,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    fill: 'currentColor',\n    pointerEvents: 'none',\n    fontSize: '12px',\n    height: indicatorSizeMedium,\n    width: indicatorSizeMedium\n});\nconst useIndicatorStyles = makeStyles({\n    large: {\n        fontSize: '16px',\n        height: indicatorSizeLarge,\n        width: indicatorSizeLarge\n    },\n    circular: {\n        borderRadius: tokens.borderRadiusCircular\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        alignSelf: 'center',\n        color: 'inherit',\n        cursor: 'inherit',\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    before: {\n        paddingRight: tokens.spacingHorizontalXS\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n    medium: {\n        marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`\n    },\n    large: {\n        marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`\n    }\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */ export const useCheckboxStyles_unstable = (state)=>{\n    const { checked, disabled, labelPosition, shape, size } = state;\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    const indicatorStyles = useIndicatorStyles();\n    if (state.indicator) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n    }\n    const labelStyles = useLabelStyles();\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n    }\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","r","s","useRootStyles","unchecked","Bi91k9c","pv5h1i","lj723h","Hnthvo","checked","sj55zd","wkncrt","zxk7z7","Hmsnfy","e6czan","qbydtz","mixed","Bunfa6h","B15ykmv","disabled","Bceei9c","B7iucu3","Bptavk6","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","p","useLabelStyles","base","qb2dma","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","B6of3ja","jrapky","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"}

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

@@ -176,21 +176,24 @@ const useLabelStyles = (0, _react.makeStyles)({
     }
 });
 const useCheckboxStyles_unstable = (state)=>{
-    'use no memo';
     const { checked, disabled, labelPosition, shape, size } = state;
     const rootBaseClassName = useRootBaseClassName();
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);
     const inputBaseClassName = useInputBaseClassName();
     const inputStyles = useInputStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
     const indicatorBaseClassName = useIndicatorBaseClassName();
     const indicatorStyles = useIndicatorStyles();
     if (state.indicator) {
+        // eslint-disable-next-line react-hooks/immutability
         state.indicator.className = (0, _react.mergeClasses)(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
     }
     const labelStyles = useLabelStyles();
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = (0, _react.mergeClasses)(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
     }
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/useCheckboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n  root: 'fui-Checkbox',\n  label: 'fui-Checkbox__label',\n  input: 'fui-Checkbox__input',\n  indicator: 'fui-Checkbox__indicator',\n};\n\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n  indicatorColor: '--fui-Checkbox__indicator--color',\n  indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n  indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor',\n} as const;\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  position: 'relative',\n  display: 'inline-flex',\n  cursor: 'pointer',\n  maxWidth: 'fit-content',\n  verticalAlign: 'middle',\n  color: tokens.colorNeutralForeground3,\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  unchecked: {\n    ':hover': {\n      color: tokens.colorNeutralForeground2,\n      [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      color: tokens.colorNeutralForeground1,\n      [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n\n  checked: {\n    color: tokens.colorNeutralForeground1,\n    [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n    [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n    [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n\n    ':hover': {\n      [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover,\n    },\n\n    ':active': {\n      [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed,\n    },\n  },\n\n  mixed: {\n    color: tokens.colorNeutralForeground1,\n    [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n    [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n\n    ':hover': {\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n      [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover,\n    },\n\n    ':active': {\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n      [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n\n  disabled: {\n    cursor: 'default',\n\n    color: tokens.colorNeutralForegroundDisabled,\n    [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n    [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      [vars.indicatorColor]: 'GrayText',\n    },\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'inherit',\n  height: '100%',\n  margin: 0,\n  opacity: 0,\n  position: 'absolute',\n  top: 0,\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n  width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n  },\n  after: {\n    left: 0,\n  },\n\n  large: {\n    width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  alignSelf: 'flex-start',\n  boxSizing: 'border-box',\n  flexShrink: 0,\n\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'hidden',\n\n  color: `var(${vars.indicatorColor})`,\n  backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n  borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n  borderStyle: 'solid',\n  borderWidth: tokens.strokeWidthThin,\n  borderRadius: tokens.borderRadiusSmall,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  fill: 'currentColor',\n  pointerEvents: 'none',\n\n  fontSize: '12px',\n  height: indicatorSizeMedium,\n  width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n  large: {\n    fontSize: '16px',\n    height: indicatorSizeLarge,\n    width: indicatorSizeLarge,\n  },\n\n  circular: { borderRadius: tokens.borderRadiusCircular },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    color: 'inherit',\n    cursor: 'inherit',\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  'use no memo';\n\n  const { checked, disabled, labelPosition, shape, size } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    checkboxClassNames.root,\n    rootBaseClassName,\n    disabled\n      ? rootStyles.disabled\n      : checked === 'mixed'\n      ? rootStyles.mixed\n      : checked\n      ? rootStyles.checked\n      : rootStyles.unchecked,\n    state.root.className,\n  );\n\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(\n    checkboxClassNames.input,\n    inputBaseClassName,\n    size === 'large' && inputStyles.large,\n    inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      checkboxClassNames.indicator,\n      indicatorBaseClassName,\n      size === 'large' && indicatorStyles.large,\n      shape === 'circular' && indicatorStyles.circular,\n      state.indicator.className,\n    );\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      checkboxClassNames.label,\n      labelStyles.base,\n      labelStyles[size],\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","position","display","cursor","maxWidth","verticalAlign","color","colorNeutralForeground3","style","selector","useRootStyles","unchecked","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","checked","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","mixed","colorCompoundBrandStroke","colorCompoundBrandForeground1","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","disabled","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputBaseClassName","boxSizing","height","margin","opacity","top","width","spacingHorizontalS","useInputStyles","before","right","after","left","large","useIndicatorBaseClassName","alignSelf","flexShrink","alignItems","justifyContent","overflow","backgroundColor","borderColor","colorNeutralStrokeAccessible","borderStyle","borderWidth","strokeWidthThin","borderRadius","borderRadiusSmall","spacingVerticalS","fill","pointerEvents","fontSize","useIndicatorStyles","circular","borderRadiusCircular","useLabelStyles","base","padding","paddingRight","spacingHorizontalXS","paddingLeft","medium","marginTop","lineHeightBase300","marginBottom","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,kBAAAA;;;8BAoLAuF;;;;uBA1L6C,iBAAiB;8BACnC,0BAA0B;4BAC3C,wBAAwB;AAIxC,2BAA0D;IAC/DtF,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,WAAW;AACb,EAAE;AAEF,qDAAqD;AACrD,MAAMC,OAAO;IACXC,gBAAgB;IAChBC,sBAAsB;IACtBC,0BAA0B;AAC5B;AAEA,+DAA+D;AAC/D,MAAMC,sBAAsB;AAC5B,MAAMC,qBAAqB;AAE3B,MAAMC,2BAAuBhB,sBAAAA,EAAgB;IAC3CiB,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACVC,eAAe;IACfC,OAAOlB,kBAAAA,CAAOmB,uBAAuB;IACrC,OAAGpB,qCAAAA,EAAwB;QAAEqB,OAAO,CAAC;QAAGC,UAAU;IAAe,EAAE;AACrE;AAEA,MAAMC,oBAAgBzB,iBAAAA,EAAW;IAC/B0B,WAAW;QACT,UAAU;YACRL,OAAOlB,kBAAAA,CAAOwB,uBAAuB;YACrC,CAAClB,KAAKE,oBAAoB,CAAC,EAAER,kBAAAA,CAAOyB,iCAAiC;QACvE;QAEA,WAAW;YACTP,OAAOlB,kBAAAA,CAAO0B,uBAAuB;YACrC,CAACpB,KAAKE,oBAAoB,CAAC,EAAER,kBAAAA,CAAO2B,mCAAmC;QACzE;IACF;IAEAC,SAAS;QACPV,OAAOlB,kBAAAA,CAAO0B,uBAAuB;QACrC,CAACpB,KAAKG,wBAAwB,CAAC,EAAET,kBAAAA,CAAO6B,4BAA4B;QACpE,CAACvB,KAAKC,cAAc,CAAC,EAAEP,kBAAAA,CAAO8B,8BAA8B;QAC5D,CAACxB,KAAKE,oBAAoB,CAAC,EAAER,kBAAAA,CAAO6B,4BAA4B;QAEhE,UAAU;YACR,CAACvB,KAAKG,wBAAwB,CAAC,EAAET,kBAAAA,CAAO+B,iCAAiC;YACzE,CAACzB,KAAKE,oBAAoB,CAAC,EAAER,kBAAAA,CAAO+B,iCAAiC;QACvE;QAEA,WAAW;YACT,CAACzB,KAAKG,wBAAwB,CAAC,EAAET,kBAAAA,CAAOgC,mCAAmC;YAC3E,CAAC1B,KAAKE,oBAAoB,CAAC,EAAER,kBAAAA,CAAOgC,mCAAmC;QACzE;IACF;IAEAC,OAAO;QACLf,OAAOlB,kBAAAA,CAAO0B,uBAAuB;QACrC,CAACpB,KAAKE,oBAAoB,CAAC,EAAER,kBAAAA,CAAOkC,wBAAwB;QAC5D,CAAC5B,KAAKC,cAAc,CAAC,EAAEP,kBAAAA,CAAOmC,6BAA6B;QAE3D,UAAU;YACR,CAAC7B,KAAKE,oBAAoB,CAAC,EAAER,kBAAAA,CAAOoC,6BAA6B;YACjE,CAAC9B,KAAKC,cAAc,CAAC,EAAEP,kBAAAA,CAAOqC,kCAAkC;QAClE;QAEA,WAAW;YACT,CAAC/B,KAAKE,oBAAoB,CAAC,EAAER,kBAAAA,CAAOsC,+BAA+B;YACnE,CAAChC,KAAKC,cAAc,CAAC,EAAEP,kBAAAA,CAAOuC,oCAAoC;QACpE;IACF;IAEAC,UAAU;QACRzB,QAAQ;QAERG,OAAOlB,kBAAAA,CAAOyC,8BAA8B;QAC5C,CAACnC,KAAKE,oBAAoB,CAAC,EAAER,kBAAAA,CAAO0C,0BAA0B;QAC9D,CAACpC,KAAKC,cAAc,CAAC,EAAEP,kBAAAA,CAAOyC,8BAA8B;QAE5D,kCAAkC;YAChCvB,OAAO;YACP,CAACZ,KAAKC,cAAc,CAAC,EAAE;QACzB;IACF;AACF;AAEA,MAAMoC,4BAAwB/C,sBAAAA,EAAgB;IAC5CgD,WAAW;IACX7B,QAAQ;IACR8B,QAAQ;IACRC,QAAQ;IACRC,SAAS;IACTlC,UAAU;IACVmC,KAAK;IACL,oHAAoH;IACpH,kFAAkF;IAClFC,OAAO,CAAC,KAAK,EAAEvC,oBAAoB,OAAO,EAAEV,kBAAAA,CAAOkD,kBAAkB,CAAC,CAAC,CAAC;AAC1E;AAEA,MAAMC,iBAAiBtD,qBAAAA,EAAW;IAChCuD,QAAQ;QACNC,OAAO;IACT;IACAC,OAAO;QACLC,MAAM;IACR;IAEAC,OAAO;QACLP,OAAO,CAAC,KAAK,EAAEtC,mBAAmB,OAAO,EAAEX,kBAAAA,CAAOkD,kBAAkB,CAAC,CAAC,CAAC;IACzE;AACF;AAEA,MAAMO,gCAA4B7D,sBAAAA,EAAgB;IAChD8D,WAAW;IACXd,WAAW;IACXe,YAAY;IAEZ7C,SAAS;IACT8C,YAAY;IACZC,gBAAgB;IAChBC,UAAU;IAEV5C,OAAO,CAAC,IAAI,EAAEZ,KAAKC,cAAc,CAAC,CAAC,CAAC;IACpCwD,iBAAiB,CAAC,IAAI,EAAEzD,KAAKG,wBAAwB,CAAC,CAAC,CAAC;IACxDuD,aAAa,CAAC,IAAI,EAAE1D,KAAKE,oBAAoB,CAAC,EAAE,EAAER,kBAAAA,CAAOiE,4BAA4B,CAAC,CAAC,CAAC;IACxFC,aAAa;IACbC,aAAanE,kBAAAA,CAAOoE,eAAe;IACnCC,cAAcrE,kBAAAA,CAAOsE,iBAAiB;IACtCxB,QAAQ9C,kBAAAA,CAAOuE,gBAAgB,GAAG,MAAMvE,kBAAAA,CAAOkD,kBAAkB;IACjEsB,MAAM;IACNC,eAAe;IAEfC,UAAU;IACV7B,QAAQnC;IACRuC,OAAOvC;AACT;AAEA,MAAMiE,yBAAqB9E,iBAAAA,EAAW;IACpC2D,OAAO;QACLkB,UAAU;QACV7B,QAAQlC;QACRsC,OAAOtC;IACT;IAEAiE,UAAU;QAAEP,cAAcrE,kBAAAA,CAAO6E,oBAAoB;IAAC;AACxD;AAEA,mGAAmG;AACnG,MAAMC,qBAAiBjF,iBAAAA,EAAW;IAChCkF,MAAM;QACJrB,WAAW;QACXxC,OAAO;QACPH,QAAQ;QACRiE,SAAS,GAAGhF,kBAAAA,CAAOuE,gBAAgB,CAAC,CAAC,EAAEvE,kBAAAA,CAAOkD,kBAAkB,EAAE;IACpE;IAEAE,QAAQ;QACN6B,cAAcjF,kBAAAA,CAAOkF,mBAAmB;IAC1C;IACA5B,OAAO;QACL6B,aAAanF,kBAAAA,CAAOkF,mBAAmB;IACzC;IAEA,oHAAoH;IACpH,mHAAmH;IACnHE,QAAQ;QACNC,WAAW,CAAC,MAAM,EAAE3E,oBAAoB,GAAG,EAAEV,kBAAAA,CAAOsF,iBAAiB,CAAC,MAAM,CAAC;QAC7EC,cAAc,CAAC,MAAM,EAAE7E,oBAAoB,GAAG,EAAEV,kBAAAA,CAAOsF,iBAAiB,CAAC,MAAM,CAAC;IAClF;IACA9B,OAAO;QACL6B,WAAW,CAAC,MAAM,EAAE1E,mBAAmB,GAAG,EAAEX,kBAAAA,CAAOsF,iBAAiB,CAAC,MAAM,CAAC;QAC5EC,cAAc,CAAC,MAAM,EAAE5E,mBAAmB,GAAG,EAAEX,kBAAAA,CAAOsF,iBAAiB,CAAC,MAAM,CAAC;IACjF;AACF;AAKO,MAAME,6BAA6B,CAACC;IACzC;IAEA,MAAM,EAAE7D,OAAO,EAAEY,QAAQ,EAAEkD,aAAa,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGH;IAE1D,MAAMI,oBAAoBjF;IAC1B,MAAMkF,aAAaxE;IACnBmE,MAAMvF,IAAI,CAAC6F,SAAS,OAAGjG,mBAAAA,EACrBG,mBAAmBC,IAAI,EACvB2F,mBACArD,WACIsD,WAAWtD,QAAQ,GACnBZ,YAAY,UACZkE,WAAW7D,KAAK,GAChBL,UACAkE,WAAWlE,OAAO,GAClBkE,WAAWvE,SAAS,EACxBkE,MAAMvF,IAAI,CAAC6F,SAAS;IAGtB,MAAMC,qBAAqBrD;IAC3B,MAAMsD,cAAc9C;IACpBsC,MAAMrF,KAAK,CAAC2F,SAAS,OAAGjG,mBAAAA,EACtBG,mBAAmBG,KAAK,EACxB4F,oBACAJ,SAAS,WAAWK,YAAYzC,KAAK,EACrCyC,WAAW,CAACP,cAAc,EAC1BD,MAAMrF,KAAK,CAAC2F,SAAS;IAGvB,MAAMG,yBAAyBzC;IAC/B,MAAM0C,kBAAkBxB;IACxB,IAAIc,MAAMpF,SAAS,EAAE;QACnBoF,MAAMpF,SAAS,CAAC0F,SAAS,OAAGjG,mBAAAA,EAC1BG,mBAAmBI,SAAS,EAC5B6F,wBACAN,SAAS,WAAWO,gBAAgB3C,KAAK,EACzCmC,UAAU,cAAcQ,gBAAgBvB,QAAQ,EAChDa,MAAMpF,SAAS,CAAC0F,SAAS;IAE7B;IAEA,MAAMK,cAActB;IACpB,IAAIW,MAAMtF,KAAK,EAAE;QACfsF,MAAMtF,KAAK,CAAC4F,SAAS,OAAGjG,mBAAAA,EACtBG,mBAAmBE,KAAK,EACxBiG,YAAYrB,IAAI,EAChBqB,WAAW,CAACR,KAAK,EACjBQ,WAAW,CAACV,cAAc,EAC1BD,MAAMtF,KAAK,CAAC4F,SAAS;IAEzB;IAEA,OAAON;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Checkbox/useCheckboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n  root: 'fui-Checkbox',\n  label: 'fui-Checkbox__label',\n  input: 'fui-Checkbox__input',\n  indicator: 'fui-Checkbox__indicator',\n};\n\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n  indicatorColor: '--fui-Checkbox__indicator--color',\n  indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n  indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor',\n} as const;\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  position: 'relative',\n  display: 'inline-flex',\n  cursor: 'pointer',\n  maxWidth: 'fit-content',\n  verticalAlign: 'middle',\n  color: tokens.colorNeutralForeground3,\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  unchecked: {\n    ':hover': {\n      color: tokens.colorNeutralForeground2,\n      [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      color: tokens.colorNeutralForeground1,\n      [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n\n  checked: {\n    color: tokens.colorNeutralForeground1,\n    [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n    [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n    [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n\n    ':hover': {\n      [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover,\n    },\n\n    ':active': {\n      [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed,\n    },\n  },\n\n  mixed: {\n    color: tokens.colorNeutralForeground1,\n    [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n    [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n\n    ':hover': {\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n      [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover,\n    },\n\n    ':active': {\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n      [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n\n  disabled: {\n    cursor: 'default',\n\n    color: tokens.colorNeutralForegroundDisabled,\n    [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n    [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      [vars.indicatorColor]: 'GrayText',\n    },\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'inherit',\n  height: '100%',\n  margin: 0,\n  opacity: 0,\n  position: 'absolute',\n  top: 0,\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n  width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n  },\n  after: {\n    left: 0,\n  },\n\n  large: {\n    width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  alignSelf: 'flex-start',\n  boxSizing: 'border-box',\n  flexShrink: 0,\n\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'hidden',\n\n  color: `var(${vars.indicatorColor})`,\n  backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n  borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n  borderStyle: 'solid',\n  borderWidth: tokens.strokeWidthThin,\n  borderRadius: tokens.borderRadiusSmall,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  fill: 'currentColor',\n  pointerEvents: 'none',\n\n  fontSize: '12px',\n  height: indicatorSizeMedium,\n  width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n  large: {\n    fontSize: '16px',\n    height: indicatorSizeLarge,\n    width: indicatorSizeLarge,\n  },\n\n  circular: { borderRadius: tokens.borderRadiusCircular },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    color: 'inherit',\n    cursor: 'inherit',\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  const { checked, disabled, labelPosition, shape, size } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    checkboxClassNames.root,\n    rootBaseClassName,\n    disabled\n      ? rootStyles.disabled\n      : checked === 'mixed'\n      ? rootStyles.mixed\n      : checked\n      ? rootStyles.checked\n      : rootStyles.unchecked,\n    state.root.className,\n  );\n\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(\n    checkboxClassNames.input,\n    inputBaseClassName,\n    size === 'large' && inputStyles.large,\n    inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.indicator.className = mergeClasses(\n      checkboxClassNames.indicator,\n      indicatorBaseClassName,\n      size === 'large' && indicatorStyles.large,\n      shape === 'circular' && indicatorStyles.circular,\n      state.indicator.className,\n    );\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.label.className = mergeClasses(\n      checkboxClassNames.label,\n      labelStyles.base,\n      labelStyles[size],\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","position","display","cursor","maxWidth","verticalAlign","color","colorNeutralForeground3","style","selector","useRootStyles","unchecked","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","checked","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","mixed","colorCompoundBrandStroke","colorCompoundBrandForeground1","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","disabled","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputBaseClassName","boxSizing","height","margin","opacity","top","width","spacingHorizontalS","useInputStyles","before","right","after","left","large","useIndicatorBaseClassName","alignSelf","flexShrink","alignItems","justifyContent","overflow","backgroundColor","borderColor","colorNeutralStrokeAccessible","borderStyle","borderWidth","strokeWidthThin","borderRadius","borderRadiusSmall","spacingVerticalS","fill","pointerEvents","fontSize","useIndicatorStyles","circular","borderRadiusCircular","useLabelStyles","base","padding","paddingRight","spacingHorizontalXS","paddingLeft","medium","marginTop","lineHeightBase300","marginBottom","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-checkbox",
-  "version": "9.6.1",
+  "version": "9.6.3",
   "description": "Fluent UI checkbox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,14 +12,14 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.5.1",
+    "@fluentui/react-field": "^9.5.3",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
-    "@fluentui/react-label": "^9.4.1",
+    "@fluentui/react-jsx-runtime": "^9.4.4",
+    "@fluentui/react-label": "^9.4.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-tabster": "^9.26.14",
+    "@fluentui/react-tabster": "^9.26.16",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.5",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },