@fluentui/react-checkbox 9.1.6 → 9.1.8

package/CHANGELOG.json

@@ -2,34 +2,67 @@
   "name": "@fluentui/react-checkbox",
   "entries": [
     {
-      "date": "Thu, 23 Mar 2023 12:28:45 GMT",
-      "tag": "@fluentui/react-checkbox_v9.1.6",
-      "version": "9.1.6",
+      "date": "Thu, 06 Apr 2023 23:59:45 GMT",
+      "tag": "@fluentui/react-checkbox_v9.1.8",
+      "version": "9.1.8",
       "comments": {
         "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "5a8d7a29645b3b500eb7145d2e42ac34fcafc4c6",
+            "comment": "chore: Hook up FieldContext for use inside a Field"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "eee5716e76dc6a5bef9316546a352694bbe5750a",
+            "comment": "chore: Update package version of react-field"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-beta.1",
+            "commit": "7a46cab3d31a233b89b7188e994b24712af5393c"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 04 Apr 2023 18:44:47 GMT",
+      "tag": "@fluentui/react-checkbox_v9.1.7",
+      "version": "9.1.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "4fad4cbbcbdb48847857c388135a3abda472add7",
+            "comment": "fix: Fix vertical alignment of inline Checkbox when checked vs. unchecked"
+          },
           {
             "author": "beachball",
             "package": "@fluentui/react-checkbox",
-            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.28",
-            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.29",
+            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-checkbox",
-            "comment": "Bump @fluentui/react-label to v9.1.6",
-            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+            "comment": "Bump @fluentui/react-label to v9.1.7",
+            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-checkbox",
-            "comment": "Bump @fluentui/react-shared-contexts to v9.3.3",
-            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+            "comment": "Bump @fluentui/react-tabster to v9.6.3",
+            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-checkbox",
-            "comment": "Bump @fluentui/react-tabster to v9.6.2",
-            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+            "comment": "Bump @fluentui/react-utilities to v9.7.3",
+            "commit": "6778d76bbbad7e1975c151c797f28c2708cde2ce"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,20 +1,32 @@
 # Change Log - @fluentui/react-checkbox
 
-This log was last generated on Thu, 23 Mar 2023 12:28:45 GMT and should not be manually modified.
+This log was last generated on Thu, 06 Apr 2023 23:59:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [9.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.6)
+## [9.1.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.8)
 
-Thu, 23 Mar 2023 12:28:45 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.5..@fluentui/react-checkbox_v9.1.6)
+Thu, 06 Apr 2023 23:59:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.7..@fluentui/react-checkbox_v9.1.8)
 
 ### Patches
 
-- Bump @fluentui/react-field to v9.0.0-alpha.28 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
-- Bump @fluentui/react-label to v9.1.6 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.3.3 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
-- Bump @fluentui/react-tabster to v9.6.2 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
+- chore: Hook up FieldContext for use inside a Field ([PR #27399](https://github.com/microsoft/fluentui/pull/27399) by behowell@microsoft.com)
+- chore: Update package version of react-field ([PR #27458](https://github.com/microsoft/fluentui/pull/27458) by behowell@microsoft.com)
+- Bump @fluentui/react-field to v9.0.0-beta.1 ([PR #27420](https://github.com/microsoft/fluentui/pull/27420) by beachball)
+
+## [9.1.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.7)
+
+Tue, 04 Apr 2023 18:44:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.1.5..@fluentui/react-checkbox_v9.1.7)
+
+### Patches
+
+- fix: Fix vertical alignment of inline Checkbox when checked vs. unchecked ([PR #27324](https://github.com/microsoft/fluentui/pull/27324) by behowell@microsoft.com)
+- Bump @fluentui/react-field to v9.0.0-alpha.29 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
+- Bump @fluentui/react-label to v9.1.7 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
+- Bump @fluentui/react-tabster to v9.6.3 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
+- Bump @fluentui/react-utilities to v9.7.3 ([PR #27434](https://github.com/microsoft/fluentui/pull/27434) by beachball)
 
 ## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.1.5)
 

package/lib/components/Checkbox/useCheckbox.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { getPartitionedNativeProps, resolveShorthand, useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
 import { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, CircleFilled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
@@ -13,6 +14,11 @@ import { useFocusWithin } from '@fluentui/react-tabster';
  * @param ref - reference to `<input>` element of Checkbox
  */
 export const useCheckbox_unstable = (props, ref) => {
+  // Merge props from surrounding <Field>, if any
+  props = useFieldControlProps_unstable(props, {
+    supportsLabelFor: true,
+    supportsRequired: true
+  });
   const {
     disabled = false,
     required,

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

@@ -1 +1 @@
-{"version":3,"names":["React","getPartitionedNativeProps","resolveShorthand","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useMergedRefs","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","createElement","components","root","input","indicator","label","defaultProps","type","htmlFor","children","ev","val","currentTarget","indeterminate","inputRef","current"],"sources":["../../../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n  Checkmark12Filled,\n  Checkmark16Filled,\n  Square12Filled,\n  Square16Filled,\n  CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n  const { disabled = false, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n\n  const [checked, setChecked] = useControllableState({\n    defaultState: props.defaultChecked,\n    state: props.checked,\n    initialState: false,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = <CircleFilled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else if (checked) {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  const state: CheckboxState = {\n    shape,\n    checked,\n    disabled,\n    size,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: Label,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        ref: useFocusWithin<HTMLSpanElement>(),\n        ...nativeProps.root,\n      },\n    }),\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary,\n      },\n    }),\n    label: resolveShorthand(props.label, {\n      required: false,\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n        size: 'medium', // Even if the checkbox itself is large\n      },\n    }),\n    indicator: resolveShorthand(props.indicator, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': true,\n        children: checkmarkIcon,\n      },\n    }),\n  };\n\n  state.input.onChange = useEventCallback(ev => {\n    const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n    onChange?.(ev, { checked: val });\n    setChecked(val);\n  });\n\n  // Create a ref object for the input element so we can use it to set the indeterminate prop.\n  // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n  const inputRef = useMergedRefs(state.input.ref);\n  state.input.ref = inputRef;\n\n  // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n  // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n  useIsomorphicLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = mixed;\n    }\n  }, [inputRef, mixed]);\n\n  return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","resolveShorthand","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useMergedRefs","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","supportsLabelFor","supportsRequired","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","createElement","components","root","input","indicator","label","defaultProps","type","htmlFor","children","ev","val","currentTarget","indeterminate","inputRef","current"],"sources":["../../../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n  Checkmark12Filled,\n  Checkmark16Filled,\n  Square12Filled,\n  Square16Filled,\n  CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { disabled = false, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n\n  const [checked, setChecked] = useControllableState({\n    defaultState: props.defaultChecked,\n    state: props.checked,\n    initialState: false,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = <CircleFilled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else if (checked) {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  const state: CheckboxState = {\n    shape,\n    checked,\n    disabled,\n    size,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: Label,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        ref: useFocusWithin<HTMLSpanElement>(),\n        ...nativeProps.root,\n      },\n    }),\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary,\n      },\n    }),\n    label: resolveShorthand(props.label, {\n      required: false,\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n        size: 'medium', // Even if the checkbox itself is large\n      },\n    }),\n    indicator: resolveShorthand(props.indicator, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': true,\n        children: checkmarkIcon,\n      },\n    }),\n  };\n\n  state.input.onChange = useEventCallback(ev => {\n    const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n    onChange?.(ev, { checked: val });\n    setChecked(val);\n  });\n\n  // Create a ref object for the input element so we can use it to set the indeterminate prop.\n  // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n  const inputRef = useMergedRefs(state.input.ref);\n  state.input.ref = inputRef;\n\n  // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n  // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n  useIsomorphicLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = mixed;\n    }\n  }, [inputRef, mixed]);\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/Checkbox/useCheckboxStyles.js

@@ -10,7 +10,7 @@ export const checkboxClassNames = {
 // The indicator size is used by the indicator and label styles
 const indicatorSizeMedium = '16px';
 const indicatorSizeLarge = '20px';
-const useRootBaseClassName = /*#__PURE__*/__resetStyles("ripp6we", "r1b86e4p", [".ripp6we{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;color:var(--colorNeutralForeground3);}", ".ripp6we:focus{outline-style:none;}", ".ripp6we:focus-visible{outline-style:none;}", ".ripp6we[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".ripp6we[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}", ".r1b86e4p{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;color:var(--colorNeutralForeground3);}", ".r1b86e4p:focus{outline-style:none;}", ".r1b86e4p:focus-visible{outline-style:none;}", ".r1b86e4p[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1b86e4p[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r113b80b", "r1qhrryh", [".r113b80b{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}", ".r113b80b:focus{outline-style:none;}", ".r113b80b:focus-visible{outline-style:none;}", ".r113b80b[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r113b80b[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}", ".r1qhrryh{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}", ".r1qhrryh:focus{outline-style:none;}", ".r1qhrryh:focus-visible{outline-style:none;}", ".r1qhrryh[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1qhrryh[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
 const useRootStyles = /*#__PURE__*/__styles({
   unchecked: {
     Bi91k9c: "f3p8bqa",

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","useRootStyles","unchecked","Bi91k9c","ns3gzv","n5iecx","Bq2lx2j","Bv7p3up","lj723h","B6u2zzw","Be5wueo","Cgwcxn","Btnvhkj","checked","sj55zd","Bvs3sgl","opw9sb","C5wppx","B32epof","Bphahg7","Jctw66","Bq0zqd5","Bgesukf","mixed","cc1l3s","km5s60","disabled","Bceei9c","Bbusuzp","B7bxudy","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"sources":["../../../src/components/Checkbox/useCheckboxStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n  root: 'fui-Checkbox',\n  label: 'fui-Checkbox__label',\n  input: 'fui-Checkbox__input',\n  indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  position: 'relative',\n  display: 'inline-flex',\n  cursor: 'pointer',\n  color: tokens.colorNeutralForeground3,\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  unchecked: {\n    ':hover': {\n      color: tokens.colorNeutralForeground2,\n      [`> .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n      },\n    },\n\n    ':active': {\n      color: tokens.colorNeutralForeground1,\n      [`> .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n      },\n    },\n  },\n\n  checked: {\n    color: tokens.colorNeutralForeground1,\n\n    [`> .${checkboxClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n    },\n\n    ':hover': {\n      [`> .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n      },\n    },\n\n    ':active': {\n      [`> .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n      },\n    },\n  },\n\n  mixed: {\n    color: tokens.colorNeutralForeground1,\n\n    [`> .${checkboxClassNames.indicator}`]: {\n      ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n      color: tokens.colorCompoundBrandForeground1,\n    },\n\n    ':hover': {\n      [`> .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':active': {\n      [`> .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n        color: tokens.colorCompoundBrandForeground1Pressed,\n      },\n    },\n  },\n\n  disabled: {\n    cursor: 'default',\n\n    color: tokens.colorNeutralForegroundDisabled,\n\n    [`> .${checkboxClassNames.indicator}`]: {\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      [`> .${checkboxClassNames.indicator}`]: {\n        color: 'GrayText',\n      },\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  border: tokens.strokeWidthThin + ' solid ' + tokens.colorNeutralStrokeAccessible,\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: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\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    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  const { 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"],"mappings":"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"}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","useRootStyles","unchecked","Bi91k9c","ns3gzv","n5iecx","Bq2lx2j","Bv7p3up","lj723h","B6u2zzw","Be5wueo","Cgwcxn","Btnvhkj","checked","sj55zd","Bvs3sgl","opw9sb","C5wppx","B32epof","Bphahg7","Jctw66","Bq0zqd5","Bgesukf","mixed","cc1l3s","km5s60","disabled","Bceei9c","Bbusuzp","B7bxudy","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"sources":["../../../src/components/Checkbox/useCheckboxStyles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n  root: 'fui-Checkbox',\n  label: 'fui-Checkbox__label',\n  input: 'fui-Checkbox__input',\n  indicator: 'fui-Checkbox__indicator',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  position: 'relative',\n  display: 'inline-flex',\n  cursor: 'pointer',\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      [`> .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n      },\n    },\n\n    ':active': {\n      color: tokens.colorNeutralForeground1,\n      [`> .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n      },\n    },\n  },\n\n  checked: {\n    color: tokens.colorNeutralForeground1,\n\n    [`> .${checkboxClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n    },\n\n    ':hover': {\n      [`> .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),\n      },\n    },\n\n    ':active': {\n      [`> .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),\n      },\n    },\n  },\n\n  mixed: {\n    color: tokens.colorNeutralForeground1,\n\n    [`> .${checkboxClassNames.indicator}`]: {\n      ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n      color: tokens.colorCompoundBrandForeground1,\n    },\n\n    ':hover': {\n      [`> .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':active': {\n      [`> .${checkboxClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n        color: tokens.colorCompoundBrandForeground1Pressed,\n      },\n    },\n  },\n\n  disabled: {\n    cursor: 'default',\n\n    color: tokens.colorNeutralForegroundDisabled,\n\n    [`> .${checkboxClassNames.indicator}`]: {\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      [`> .${checkboxClassNames.indicator}`]: {\n        color: 'GrayText',\n      },\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  border: tokens.strokeWidthThin + ' solid ' + tokens.colorNeutralStrokeAccessible,\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: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\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    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  const { 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"],"mappings":"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"}

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

@@ -8,11 +8,17 @@ Object.defineProperty(exports, "useCheckbox_unstable", {
 });
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactField = require("@fluentui/react-field");
 const _reactUtilities = require("@fluentui/react-utilities");
 const _reactIcons = require("@fluentui/react-icons");
 const _reactLabel = require("@fluentui/react-label");
 const _reactTabster = require("@fluentui/react-tabster");
 const useCheckbox_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = (0, _reactField.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true,
+        supportsRequired: true
+    });
     const { disabled =false , required , shape ='square' , size ='medium' , 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":["../../../lib/components/Checkbox/useCheckbox.js"],"sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\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, ref) => {\n  const {\n    disabled = false,\n    required,\n    shape = 'square',\n    size = 'medium',\n    labelPosition = 'after',\n    onChange\n  } = props;\n  const [checked, setChecked] = useControllableState({\n    defaultState: props.defaultChecked,\n    state: props.checked,\n    initialState: false\n  });\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange']\n  });\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = /*#__PURE__*/React.createElement(CircleFilled, null);\n    } else {\n      checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Square16Filled, null) : /*#__PURE__*/React.createElement(Square12Filled, null);\n    }\n  } else if (checked) {\n    checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Checkmark16Filled, null) : /*#__PURE__*/React.createElement(Checkmark12Filled, null);\n  }\n  const state = {\n    shape,\n    checked,\n    disabled,\n    size,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: Label\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        ref: useFocusWithin(),\n        ...nativeProps.root\n      }\n    }),\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary\n      }\n    }),\n    label: resolveShorthand(props.label, {\n      required: false,\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n        size: 'medium'\n      }\n    }),\n    indicator: resolveShorthand(props.indicator, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': true,\n        children: checkmarkIcon\n      }\n    })\n  };\n  state.input.onChange = useEventCallback(ev => {\n    const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n    onChange === null || onChange === void 0 ? void 0 : onChange(ev, {\n      checked: val\n    });\n    setChecked(val);\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  // 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  return state;\n};\n//# sourceMappingURL=useCheckbox.js.map"],"names":["useCheckbox_unstable","props","ref","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","useControllableState","defaultState","defaultChecked","state","initialState","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","mixed","id","useId","primary","checkmarkIcon","React","createElement","CircleFilled","Square16Filled","Square12Filled","Checkmark16Filled","Checkmark12Filled","components","root","input","indicator","label","Label","resolveShorthand","defaultProps","useFocusWithin","type","htmlFor","children","useEventCallback","ev","val","currentTarget","indeterminate","inputRef","useMergedRefs","useIsomorphicLayoutEffect","current"],"mappings":"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"}
+{"version":3,"sources":["../../../lib/components/Checkbox/useCheckbox.js"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, resolveShorthand, useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport { Checkmark12Filled, Checkmark16Filled, Square12Filled, Square16Filled, CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\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, ref) => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, {\n    supportsLabelFor: true,\n    supportsRequired: true\n  });\n  const {\n    disabled = false,\n    required,\n    shape = 'square',\n    size = 'medium',\n    labelPosition = 'after',\n    onChange\n  } = props;\n  const [checked, setChecked] = useControllableState({\n    defaultState: props.defaultChecked,\n    state: props.checked,\n    initialState: false\n  });\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange']\n  });\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = /*#__PURE__*/React.createElement(CircleFilled, null);\n    } else {\n      checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Square16Filled, null) : /*#__PURE__*/React.createElement(Square12Filled, null);\n    }\n  } else if (checked) {\n    checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Checkmark16Filled, null) : /*#__PURE__*/React.createElement(Checkmark12Filled, null);\n  }\n  const state = {\n    shape,\n    checked,\n    disabled,\n    size,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: Label\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        ref: useFocusWithin(),\n        ...nativeProps.root\n      }\n    }),\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary\n      }\n    }),\n    label: resolveShorthand(props.label, {\n      required: false,\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n        size: 'medium'\n      }\n    }),\n    indicator: resolveShorthand(props.indicator, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': true,\n        children: checkmarkIcon\n      }\n    })\n  };\n  state.input.onChange = useEventCallback(ev => {\n    const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n    onChange === null || onChange === void 0 ? void 0 : onChange(ev, {\n      checked: val\n    });\n    setChecked(val);\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  // 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  return state;\n};\n//# sourceMappingURL=useCheckbox.js.map"],"names":["useCheckbox_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","useControllableState","defaultState","defaultChecked","state","initialState","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","mixed","id","useId","primary","checkmarkIcon","React","createElement","CircleFilled","Square16Filled","Square12Filled","Checkmark16Filled","Checkmark12Filled","components","root","input","indicator","label","Label","resolveShorthand","defaultProps","useFocusWithin","type","htmlFor","children","useEventCallback","ev","val","currentTarget","indeterminate","inputRef","useMergedRefs","useIsomorphicLayoutEffect","current"],"mappings":"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"}

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

@@ -22,17 +22,17 @@ const checkboxClassNames = {
 // The indicator size is used by the indicator and label styles
 const indicatorSizeMedium = '16px';
 const indicatorSizeLarge = '20px';
-const useRootBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("ripp6we", "r1b86e4p", [
-    ".ripp6we{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;color:var(--colorNeutralForeground3);}",
-    ".ripp6we:focus{outline-style:none;}",
-    ".ripp6we:focus-visible{outline-style:none;}",
-    ".ripp6we[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
-    ".ripp6we[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}",
-    ".r1b86e4p{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;color:var(--colorNeutralForeground3);}",
-    ".r1b86e4p:focus{outline-style:none;}",
-    ".r1b86e4p:focus-visible{outline-style:none;}",
-    ".r1b86e4p[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
-    ".r1b86e4p[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"
+const useRootBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r113b80b", "r1qhrryh", [
+    ".r113b80b{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}",
+    ".r113b80b:focus{outline-style:none;}",
+    ".r113b80b:focus-visible{outline-style:none;}",
+    ".r113b80b[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
+    ".r113b80b[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}",
+    ".r1qhrryh{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}",
+    ".r1qhrryh:focus{outline-style:none;}",
+    ".r1qhrryh:focus-visible{outline-style:none;}",
+    ".r1qhrryh[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
+    ".r1qhrryh[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"
 ]);
 const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
     unchecked: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Checkbox/useCheckboxStyles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } 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// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"ripp6we\", \"r1b86e4p\", [\".ripp6we{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;color:var(--colorNeutralForeground3);}\", \".ripp6we:focus{outline-style:none;}\", \".ripp6we:focus-visible{outline-style:none;}\", \".ripp6we[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".ripp6we[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}\", \".r1b86e4p{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;color:var(--colorNeutralForeground3);}\", \".r1b86e4p:focus{outline-style:none;}\", \".r1b86e4p:focus-visible{outline-style:none;}\", \".r1b86e4p[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1b86e4p[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n  unchecked: {\n    Bi91k9c: \"f3p8bqa\",\n    ns3gzv: \"ffqb913\",\n    n5iecx: [\"f42z0vd\", \"f1j37kh1\"],\n    Bq2lx2j: \"f10v6cc1\",\n    Bv7p3up: [\"f1j37kh1\", \"f42z0vd\"],\n    lj723h: \"f1r2dosr\",\n    B6u2zzw: \"f1oarbgq\",\n    Be5wueo: [\"fo8gord\", \"f18ci1af\"],\n    Cgwcxn: \"fviagcr\",\n    Btnvhkj: [\"f18ci1af\", \"fo8gord\"]\n  },\n  checked: {\n    sj55zd: \"f19n0e5\",\n    Bvs3sgl: \"f5opsb9\",\n    opw9sb: \"fpaw01r\",\n    C5wppx: \"f1gqj827\",\n    B32epof: [\"fub94a2\", \"f13mj44e\"],\n    Bphahg7: \"f1qq5vh1\",\n    Jctw66: [\"f13mj44e\", \"fub94a2\"],\n    Bq0zqd5: \"f5x9vvn\",\n    ns3gzv: \"fub8hyy\",\n    n5iecx: [\"fffzknn\", \"f172bh4s\"],\n    Bq2lx2j: \"f6tipb1\",\n    Bv7p3up: [\"f172bh4s\", \"fffzknn\"],\n    Bgesukf: \"f8adco2\",\n    B6u2zzw: \"f1lepnt8\",\n    Be5wueo: [\"f80ygm0\", \"frrkusm\"],\n    Cgwcxn: \"f1gg953z\",\n    Btnvhkj: [\"frrkusm\", \"f80ygm0\"]\n  },\n  mixed: {\n    sj55zd: \"f19n0e5\",\n    C5wppx: \"f12fgbth\",\n    B32epof: [\"f171e6fm\", \"fttsnhr\"],\n    Bphahg7: \"f1fyk1ks\",\n    Jctw66: [\"fttsnhr\", \"f171e6fm\"],\n    opw9sb: \"fvvg2h8\",\n    ns3gzv: \"f1nlwys0\",\n    n5iecx: [\"f1bhstg2\", \"f6tsdgz\"],\n    Bq2lx2j: \"fqxbw9v\",\n    Bv7p3up: [\"f6tsdgz\", \"f1bhstg2\"],\n    cc1l3s: \"f1r38qqt\",\n    B6u2zzw: \"f12q3i2l\",\n    Be5wueo: [\"f9g1hxu\", \"f1o4ic5t\"],\n    Cgwcxn: \"f1c3thm1\",\n    Btnvhkj: [\"f1o4ic5t\", \"f9g1hxu\"],\n    km5s60: \"ffd07pq\"\n  },\n  disabled: {\n    Bceei9c: \"f158kwzp\",\n    sj55zd: \"f1s2aq7o\",\n    C5wppx: \"fgiuqeu\",\n    B32epof: [\"f1q4sfkt\", \"f71co73\"],\n    Bphahg7: \"f1u7lsiy\",\n    Jctw66: [\"f71co73\", \"f1q4sfkt\"],\n    opw9sb: \"f3vxa14\",\n    Bbusuzp: \"f1dcs8yz\",\n    B7bxudy: \"f1lmtjkn\"\n  }\n}, {\n  h: [\".f3p8bqa:hover{color:var(--colorNeutralForeground2);}\", \".ffqb913:hover>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f42z0vd:hover>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f1j37kh1:hover>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f10v6cc1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f5x9vvn:hover>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}\", \".fub8hyy:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}\", \".fffzknn:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}\", \".f172bh4s:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}\", \".f6tipb1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}\", \".f1nlwys0:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}\", \".f1bhstg2:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}\", \".f6tsdgz:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}\", \".fqxbw9v:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}\", \".f1r38qqt:hover>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}\"],\n  a: [\".f1r2dosr:active{color:var(--colorNeutralForeground1);}\", \".f1oarbgq:active>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".fo8gord:active>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".f18ci1af:active>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".fviagcr:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".f8adco2:active>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f1lepnt8:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f80ygm0:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}\", \".frrkusm:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f1gg953z:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f12q3i2l:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}\", \".f9g1hxu:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}\", \".f1o4ic5t:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}\", \".f1c3thm1:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}\", \".ffd07pq:active>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}\"],\n  d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f5opsb9>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}\", \".fpaw01r>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundInverted);}\", \".f1gqj827>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}\", \".fub94a2>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}\", \".f13mj44e>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}\", \".f1qq5vh1>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}\", \".f12fgbth>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}\", \".f171e6fm>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}\", \".fttsnhr>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}\", \".f1fyk1ks>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}\", \".fvvg2h8>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}\", \".f158kwzp{cursor:default;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".fgiuqeu>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}\", \".f1q4sfkt>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}\", \".f71co73>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}\", \".f1u7lsiy>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}\", \".f3vxa14>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}\"],\n  m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1lmtjkn>.fui-Checkbox__indicator{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"ruo9svu\", null, [\".ruo9svu{box-sizing:border-box;cursor:inherit;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n  before: {\n    j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"]\n  },\n  after: {\n    oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"]\n  },\n  large: {\n    a9b677: \"f1mq5jt6\"\n  }\n}, {\n  d: [\".f1e31b4d{right:0;}\", \".f1vgc2s3{left:0;}\", \".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rrh91wr\", null, [\".rrh91wr{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}\"]);\nconst useIndicatorStyles = /*#__PURE__*/__styles({\n  large: {\n    Be2twd7: \"f4ybsrx\",\n    Bqenvij: \"fjamq6b\",\n    a9b677: \"f64fuq3\"\n  },\n  circular: {\n    Bbmb7ep: [\"f8fbkgy\", \"f1nfllo7\"],\n    Beyfa6y: [\"f1nfllo7\", \"f8fbkgy\"],\n    B7oj6ja: [\"f1djnp8u\", \"f1s8kh49\"],\n    Btl43ni: [\"f1s8kh49\", \"f1djnp8u\"]\n  }\n}, {\n  d: [\".f4ybsrx{font-size:16px;}\", \".fjamq6b{height:20px;}\", \".f64fuq3{width:20px;}\", \".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}\", \".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}\"]\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n  base: {\n    qb2dma: \"f7nlbp4\",\n    sj55zd: \"f1ym3bx4\",\n    Bceei9c: \"fpo1scq\",\n    z8tnut: \"f1kwiid1\",\n    z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n    Byoj8tv: \"f5b47ha\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  },\n  before: {\n    z189sj: [\"f7x41pl\", \"fruq291\"]\n  },\n  after: {\n    uwmqm3: [\"fruq291\", \"f7x41pl\"]\n  },\n  medium: {\n    B6of3ja: \"fjzwpt6\",\n    jrapky: \"fh6j2fo\"\n  },\n  large: {\n    B6of3ja: \"f1xlvstr\",\n    jrapky: \"f49ad5g\"\n  }\n}, {\n  d: [\".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}\", \".f1ym3bx4{color:inherit;}\", \".fpo1scq{cursor:inherit;}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}\", \".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}\", \".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}\", \".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}\"]\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = state => {\n  const {\n    checked,\n    disabled,\n    labelPosition,\n    shape,\n    size\n  } = 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//# sourceMappingURL=useCheckboxStyles.js.map"],"names":["checkboxClassNames","useCheckboxStyles_unstable","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","__resetStyles","useRootStyles","__styles","unchecked","Bi91k9c","ns3gzv","n5iecx","Bq2lx2j","Bv7p3up","lj723h","B6u2zzw","Be5wueo","Cgwcxn","Btnvhkj","checked","sj55zd","Bvs3sgl","opw9sb","C5wppx","B32epof","Bphahg7","Jctw66","Bq0zqd5","Bgesukf","mixed","cc1l3s","km5s60","disabled","Bceei9c","Bbusuzp","B7bxudy","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"}
+{"version":3,"sources":["../../../lib/components/Checkbox/useCheckboxStyles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } 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// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r113b80b\", \"r1qhrryh\", [\".r113b80b{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".r113b80b:focus{outline-style:none;}\", \".r113b80b:focus-visible{outline-style:none;}\", \".r113b80b[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r113b80b[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}\", \".r1qhrryh{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;vertical-align:middle;color:var(--colorNeutralForeground3);}\", \".r1qhrryh:focus{outline-style:none;}\", \".r1qhrryh:focus-visible{outline-style:none;}\", \".r1qhrryh[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1qhrryh[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n  unchecked: {\n    Bi91k9c: \"f3p8bqa\",\n    ns3gzv: \"ffqb913\",\n    n5iecx: [\"f42z0vd\", \"f1j37kh1\"],\n    Bq2lx2j: \"f10v6cc1\",\n    Bv7p3up: [\"f1j37kh1\", \"f42z0vd\"],\n    lj723h: \"f1r2dosr\",\n    B6u2zzw: \"f1oarbgq\",\n    Be5wueo: [\"fo8gord\", \"f18ci1af\"],\n    Cgwcxn: \"fviagcr\",\n    Btnvhkj: [\"f18ci1af\", \"fo8gord\"]\n  },\n  checked: {\n    sj55zd: \"f19n0e5\",\n    Bvs3sgl: \"f5opsb9\",\n    opw9sb: \"fpaw01r\",\n    C5wppx: \"f1gqj827\",\n    B32epof: [\"fub94a2\", \"f13mj44e\"],\n    Bphahg7: \"f1qq5vh1\",\n    Jctw66: [\"f13mj44e\", \"fub94a2\"],\n    Bq0zqd5: \"f5x9vvn\",\n    ns3gzv: \"fub8hyy\",\n    n5iecx: [\"fffzknn\", \"f172bh4s\"],\n    Bq2lx2j: \"f6tipb1\",\n    Bv7p3up: [\"f172bh4s\", \"fffzknn\"],\n    Bgesukf: \"f8adco2\",\n    B6u2zzw: \"f1lepnt8\",\n    Be5wueo: [\"f80ygm0\", \"frrkusm\"],\n    Cgwcxn: \"f1gg953z\",\n    Btnvhkj: [\"frrkusm\", \"f80ygm0\"]\n  },\n  mixed: {\n    sj55zd: \"f19n0e5\",\n    C5wppx: \"f12fgbth\",\n    B32epof: [\"f171e6fm\", \"fttsnhr\"],\n    Bphahg7: \"f1fyk1ks\",\n    Jctw66: [\"fttsnhr\", \"f171e6fm\"],\n    opw9sb: \"fvvg2h8\",\n    ns3gzv: \"f1nlwys0\",\n    n5iecx: [\"f1bhstg2\", \"f6tsdgz\"],\n    Bq2lx2j: \"fqxbw9v\",\n    Bv7p3up: [\"f6tsdgz\", \"f1bhstg2\"],\n    cc1l3s: \"f1r38qqt\",\n    B6u2zzw: \"f12q3i2l\",\n    Be5wueo: [\"f9g1hxu\", \"f1o4ic5t\"],\n    Cgwcxn: \"f1c3thm1\",\n    Btnvhkj: [\"f1o4ic5t\", \"f9g1hxu\"],\n    km5s60: \"ffd07pq\"\n  },\n  disabled: {\n    Bceei9c: \"f158kwzp\",\n    sj55zd: \"f1s2aq7o\",\n    C5wppx: \"fgiuqeu\",\n    B32epof: [\"f1q4sfkt\", \"f71co73\"],\n    Bphahg7: \"f1u7lsiy\",\n    Jctw66: [\"f71co73\", \"f1q4sfkt\"],\n    opw9sb: \"f3vxa14\",\n    Bbusuzp: \"f1dcs8yz\",\n    B7bxudy: \"f1lmtjkn\"\n  }\n}, {\n  h: [\".f3p8bqa:hover{color:var(--colorNeutralForeground2);}\", \".ffqb913:hover>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f42z0vd:hover>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f1j37kh1:hover>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f10v6cc1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}\", \".f5x9vvn:hover>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}\", \".fub8hyy:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundHover);}\", \".fffzknn:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundHover);}\", \".f172bh4s:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundHover);}\", \".f6tipb1:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundHover);}\", \".f1nlwys0:hover>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokeHover);}\", \".f1bhstg2:hover>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokeHover);}\", \".f6tsdgz:hover>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokeHover);}\", \".fqxbw9v:hover>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokeHover);}\", \".f1r38qqt:hover>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Hover);}\"],\n  a: [\".f1r2dosr:active{color:var(--colorNeutralForeground1);}\", \".f1oarbgq:active>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".fo8gord:active>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".f18ci1af:active>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".fviagcr:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".f8adco2:active>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f1lepnt8:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f80ygm0:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackgroundPressed);}\", \".frrkusm:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f1gg953z:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackgroundPressed);}\", \".f12q3i2l:active>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStrokePressed);}\", \".f9g1hxu:active>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStrokePressed);}\", \".f1o4ic5t:active>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStrokePressed);}\", \".f1c3thm1:active>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStrokePressed);}\", \".ffd07pq:active>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1Pressed);}\"],\n  d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f5opsb9>.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);}\", \".fpaw01r>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundInverted);}\", \".f1gqj827>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandBackground);}\", \".fub94a2>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandBackground);}\", \".f13mj44e>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandBackground);}\", \".f1qq5vh1>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandBackground);}\", \".f12fgbth>.fui-Checkbox__indicator{border-top-color:var(--colorCompoundBrandStroke);}\", \".f171e6fm>.fui-Checkbox__indicator{border-right-color:var(--colorCompoundBrandStroke);}\", \".fttsnhr>.fui-Checkbox__indicator{border-left-color:var(--colorCompoundBrandStroke);}\", \".f1fyk1ks>.fui-Checkbox__indicator{border-bottom-color:var(--colorCompoundBrandStroke);}\", \".fvvg2h8>.fui-Checkbox__indicator{color:var(--colorCompoundBrandForeground1);}\", \".f158kwzp{cursor:default;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".fgiuqeu>.fui-Checkbox__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}\", \".f1q4sfkt>.fui-Checkbox__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}\", \".f71co73>.fui-Checkbox__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}\", \".f1u7lsiy>.fui-Checkbox__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}\", \".f3vxa14>.fui-Checkbox__indicator{color:var(--colorNeutralForegroundDisabled);}\"],\n  m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1lmtjkn>.fui-Checkbox__indicator{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"ruo9svu\", null, [\".ruo9svu{box-sizing:border-box;cursor:inherit;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n  before: {\n    j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"]\n  },\n  after: {\n    oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"]\n  },\n  large: {\n    a9b677: \"f1mq5jt6\"\n  }\n}, {\n  d: [\".f1e31b4d{right:0;}\", \".f1vgc2s3{left:0;}\", \".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"rrh91wr\", null, [\".rrh91wr{-webkit-align-self:flex-start;-ms-flex-item-align:flex-start;align-self:flex-start;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}\"]);\nconst useIndicatorStyles = /*#__PURE__*/__styles({\n  large: {\n    Be2twd7: \"f4ybsrx\",\n    Bqenvij: \"fjamq6b\",\n    a9b677: \"f64fuq3\"\n  },\n  circular: {\n    Bbmb7ep: [\"f8fbkgy\", \"f1nfllo7\"],\n    Beyfa6y: [\"f1nfllo7\", \"f8fbkgy\"],\n    B7oj6ja: [\"f1djnp8u\", \"f1s8kh49\"],\n    Btl43ni: [\"f1s8kh49\", \"f1djnp8u\"]\n  }\n}, {\n  d: [\".f4ybsrx{font-size:16px;}\", \".fjamq6b{height:20px;}\", \".f64fuq3{width:20px;}\", \".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}\", \".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}\", \".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}\", \".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}\"]\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n  base: {\n    qb2dma: \"f7nlbp4\",\n    sj55zd: \"f1ym3bx4\",\n    Bceei9c: \"fpo1scq\",\n    z8tnut: \"f1kwiid1\",\n    z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n    Byoj8tv: \"f5b47ha\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  },\n  before: {\n    z189sj: [\"f7x41pl\", \"fruq291\"]\n  },\n  after: {\n    uwmqm3: [\"fruq291\", \"f7x41pl\"]\n  },\n  medium: {\n    B6of3ja: \"fjzwpt6\",\n    jrapky: \"fh6j2fo\"\n  },\n  large: {\n    B6of3ja: \"f1xlvstr\",\n    jrapky: \"f49ad5g\"\n  }\n}, {\n  d: [\".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}\", \".f1ym3bx4{color:inherit;}\", \".fpo1scq{cursor:inherit;}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}\", \".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}\", \".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}\", \".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}\"]\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = state => {\n  const {\n    checked,\n    disabled,\n    labelPosition,\n    shape,\n    size\n  } = 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//# sourceMappingURL=useCheckboxStyles.js.map"],"names":["checkboxClassNames","useCheckboxStyles_unstable","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","__resetStyles","useRootStyles","__styles","unchecked","Bi91k9c","ns3gzv","n5iecx","Bq2lx2j","Bv7p3up","lj723h","B6u2zzw","Be5wueo","Cgwcxn","Btnvhkj","checked","sj55zd","Bvs3sgl","opw9sb","C5wppx","B32epof","Bphahg7","Jctw66","Bq0zqd5","Bgesukf","mixed","cc1l3s","km5s60","disabled","Bceei9c","Bbusuzp","B7bxudy","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","useLabelStyles","base","qb2dma","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","B6of3ja","jrapky","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-checkbox",
-  "version": "9.1.6",
+  "version": "9.1.8",
   "description": "Fluent UI checkbox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,13 +32,13 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "9.0.0-alpha.28",
+    "@fluentui/react-field": "9.0.0-beta.1",
     "@fluentui/react-icons": "^2.0.196",
-    "@fluentui/react-label": "^9.1.6",
+    "@fluentui/react-label": "^9.1.7",
     "@fluentui/react-shared-contexts": "^9.3.3",
-    "@fluentui/react-tabster": "^9.6.2",
+    "@fluentui/react-tabster": "^9.6.3",
     "@fluentui/react-theme": "^9.1.7",
-    "@fluentui/react-utilities": "^9.7.2",
+    "@fluentui/react-utilities": "^9.7.3",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },