@fluentui/react-checkbox 9.0.15 → 9.0.17

package/CHANGELOG.json

@@ -2,7 +2,107 @@
   "name": "@fluentui/react-checkbox",
   "entries": [
     {
-      "date": "Tue, 20 Dec 2022 14:55:47 GMT",
+      "date": "Wed, 04 Jan 2023 01:36:16 GMT",
+      "tag": "@fluentui/react-checkbox_v9.0.17",
+      "version": "9.0.17",
+      "comments": {
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.13",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-label to v9.0.15",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-tabster to v9.3.5",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-utilities to v9.3.1",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
+            "commit": "3e322d15529451be153e97298873253e21af4082"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
+            "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
+            "comment": "chore(scripts): move index.ts to  to follow sub-folder domain packaging"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 21 Dec 2022 10:20:28 GMT",
+      "tag": "@fluentui/react-checkbox_v9.0.16",
+      "version": "9.0.16",
+      "comments": {
+        "none": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "68505ab8eb1b05f45ab09c21b9d66c177d1e50f5",
+            "comment": "chore: Add bundle size tests for Fields"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.12",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-label to v9.0.14",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-tabster to v9.3.4",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-theme to v9.1.5",
+            "commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 20 Dec 2022 14:59:22 GMT",
       "tag": "@fluentui/react-checkbox_v9.0.15",
       "version": "9.0.15",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @fluentui/react-checkbox
 
-This log was last generated on Tue, 20 Dec 2022 14:55:47 GMT and should not be manually modified.
+This log was last generated on Wed, 04 Jan 2023 01:36:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.17)
+
+Wed, 04 Jan 2023 01:36:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.16..@fluentui/react-checkbox_v9.0.17)
+
+### Patches
+
+- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
+- Bump @fluentui/react-field to v9.0.0-alpha.13 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-label to v9.0.15 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-tabster to v9.3.5 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
+
+## [9.0.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.16)
+
+Wed, 21 Dec 2022 10:20:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.15..@fluentui/react-checkbox_v9.0.16)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.0.0-alpha.12 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+- Bump @fluentui/react-label to v9.0.14 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+- Bump @fluentui/react-tabster to v9.3.4 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+- Bump @fluentui/react-theme to v9.1.5 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
+
 ## [9.0.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.15)
 
-Tue, 20 Dec 2022 14:55:47 GMT 
+Tue, 20 Dec 2022 14:59:22 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.14..@fluentui/react-checkbox_v9.0.15)
 
 ### Patches

package/lib/components/Checkbox/Checkbox.js

@@ -6,7 +6,6 @@ import { useCheckboxStyles_unstable } from './useCheckboxStyles';
  * Checkboxes give people a way to select one or more items from a group,
  * or switch between two mutually exclusive options (checked or unchecked).
  */
-
 export const Checkbox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useCheckbox_unstable(props, ref);
   useCheckboxStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;;AAGG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;EAEA,0BAA0B,CAAC,KAAD,CAA1B;EACA,OAAO,uBAAuB,CAAC,KAAD,CAA9B;AACD,CAL2D,CAArD;AAOP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useCheckbox_unstable(props, ref);\n\n  useCheckboxStyles_unstable(state);\n  return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAIhE;;;;AAIA,OAAO,MAAMC,QAAQ,gBAAuCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGP,oBAAoB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAE9CJ,0BAA0B,CAACK,KAAK,CAAC;EACjC,OAAON,uBAAuB,CAACM,KAAK,CAAC;AACvC,CAAC,CAAC;AAEFJ,QAAQ,CAACK,WAAW,GAAG,UAAU","names":["React","useCheckbox_unstable","renderCheckbox_unstable","useCheckboxStyles_unstable","Checkbox","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useCheckbox_unstable(props, ref);\n\n  useCheckboxStyles_unstable(state);\n  return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"]}

package/lib/components/Checkbox/renderCheckbox.js

@@ -5,11 +5,16 @@ export const renderCheckbox_unstable = state => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, /*#__PURE__*/React.createElement(slots.input, { ...slotProps.input
-  }), state.labelPosition === 'before' && slots.label && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
-  }), /*#__PURE__*/React.createElement(slots.indicator, { ...slotProps.indicator
-  }), state.labelPosition === 'after' && slots.label && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.input, {
+    ...slotProps.input
+  }), state.labelPosition === 'before' && slots.label && /*#__PURE__*/React.createElement(slots.label, {
+    ...slotProps.label
+  }), /*#__PURE__*/React.createElement(slots.indicator, {
+    ...slotProps.indicator
+  }), state.labelPosition === 'after' && slots.label && /*#__PURE__*/React.createElement(slots.label, {
+    ...slotProps.label
   }));
 };
 //# sourceMappingURL=renderCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,iBAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFtD,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CAHF,EAIG,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,KAAK,CAAC,KAAzC,iBAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJrD,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n  const { slots, slotProps } = getSlots<CheckboxSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD,OAAO,MAAMC,uBAAuB,GAAIC,KAAoB,IAAI;EAC9D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAgBE,KAAK,CAAC;EAE3D,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BN,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,EACnCJ,KAAK,CAACK,aAAa,KAAK,QAAQ,IAAIJ,KAAK,CAACK,KAAK,iBAAIT,oBAACI,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,eACxFT,oBAACI,KAAK,CAACM,SAAS;IAAA,GAAKL,SAAS,CAACK;EAAS,EAAI,EAC3CP,KAAK,CAACK,aAAa,KAAK,OAAO,IAAIJ,KAAK,CAACK,KAAK,iBAAIT,oBAACI,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,CAC5E;AAEjB,CAAC","names":["React","getSlots","renderCheckbox_unstable","state","slots","slotProps","root","input","labelPosition","label","indicator"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n  const { slots, slotProps } = getSlots<CheckboxSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"]}

package/lib/components/Checkbox/useCheckbox.js

@@ -12,7 +12,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) => {
   const {
     disabled,
@@ -35,7 +34,6 @@ export const useCheckbox_unstable = (props, ref) => {
   const mixed = checked === 'mixed';
   const id = useId('checkbox-', nativeProps.primary.id);
   let checkmarkIcon;
-
   if (mixed) {
     if (shape === 'circular') {
       checkmarkIcon = /*#__PURE__*/React.createElement(CircleFilled, null);
@@ -45,7 +43,6 @@ export const useCheckbox_unstable = (props, ref) => {
   } else {
     checkmarkIcon = size === 'large' ? /*#__PURE__*/React.createElement(Checkmark16Filled, null) : /*#__PURE__*/React.createElement(Checkmark12Filled, null);
   }
-
   const state = {
     shape,
     checked,
@@ -81,9 +78,9 @@ export const useCheckbox_unstable = (props, ref) => {
         disabled,
         required,
         size: 'medium' // Even if the checkbox itself is large
-
       }
     }),
+
     indicator: resolveShorthand(props.indicator, {
       required: true,
       defaultProps: {
@@ -98,13 +95,13 @@ export const useCheckbox_unstable = (props, ref) => {
       checked: val
     });
     setChecked(val);
-  }); // Create a ref object for the input element so we can use it to set the indeterminate prop.
+  });
+  // Create a ref object for the input element so we can use it to set the indeterminate prop.
   // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)
-
   const inputRef = useMergedRefs(state.input.ref);
-  state.input.ref = inputRef; // Set the <input> element's checked and indeterminate properties based on our tri-state property.
+  state.input.ref = inputRef;
+  // Set the <input> element's checked and indeterminate properties based on our tri-state property.
   // Since indeterminate can only be set via javascript, it has to be done in a layout effect.
-
   useIsomorphicLayoutEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = mixed;

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

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

package/lib/components/Checkbox/useCheckboxStyles.js

@@ -6,79 +6,71 @@ export const checkboxClassNames = {
   label: 'fui-Checkbox__label',
   input: 'fui-Checkbox__input',
   indicator: 'fui-Checkbox__indicator'
-}; // The indicator size is used by the indicator and label styles
-
+};
+// The indicator size is used by the indicator and label styles
 const indicatorSizeMedium = '16px';
 const indicatorSizeLarge = '20px';
-
 const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1o1qdo1", "r1niodl4", [".r1o1qdo1{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1o1qdo1:focus{outline-style:none;}", ".r1o1qdo1:focus-visible{outline-style:none;}", ".r1o1qdo1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1o1qdo1[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;}", ".r1niodl4{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1niodl4:focus{outline-style:none;}", ".r1niodl4:focus-visible{outline-style:none;}", ".r1niodl4[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1niodl4[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 useInputBaseClassName = /*#__PURE__*/__resetStyles("rfcvz6l", null, [".rfcvz6l{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}", ".rfcvz6l:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorCompoundBrandBackground);}", ".rfcvz6l:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorCompoundBrandBackgroundHover);}", ".rfcvz6l:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorCompoundBrandBackgroundPressed);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".rfcvz6l:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".rfcvz6l:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".rfcvz6l:disabled{cursor:default;}", ".rfcvz6l:disabled~.fui-Checkbox__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__label{color:GrayText;}}", ".rfcvz6l:disabled~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator{color:GrayText;}}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator svg{color:GrayText;}}"]);
-
 const useInputStyles = /*#__PURE__*/__styles({
-  "before": {
-    "j35jbq": ["f1e31b4d", "f1vgc2s3"]
+  before: {
+    j35jbq: ["f1e31b4d", "f1vgc2s3"]
   },
-  "after": {
-    "oyh7mz": ["f1vgc2s3", "f1e31b4d"]
+  after: {
+    oyh7mz: ["f1vgc2s3", "f1e31b4d"]
   },
-  "large": {
-    "a9b677": "f1mq5jt6"
+  large: {
+    a9b677: "f1mq5jt6"
   }
 }, {
-  "d": [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"]
+  d: [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"]
 });
-
 const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r1jvlehe", null, [".r1jvlehe{-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;border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}"]);
-
 const useIndicatorStyles = /*#__PURE__*/__styles({
-  "large": {
-    "Be2twd7": "f4ybsrx",
-    "Bqenvij": "fjamq6b",
-    "a9b677": "f64fuq3"
+  large: {
+    Be2twd7: "f4ybsrx",
+    Bqenvij: "fjamq6b",
+    a9b677: "f64fuq3"
   },
-  "circular": {
-    "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
-    "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
-    "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
-    "Btl43ni": ["f1s8kh49", "f1djnp8u"]
+  circular: {
+    Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
+    Beyfa6y: ["f1nfllo7", "f8fbkgy"],
+    B7oj6ja: ["f1djnp8u", "f1s8kh49"],
+    Btl43ni: ["f1s8kh49", "f1djnp8u"]
   }
 }, {
-  "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);}"]
-}); // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
-
-
+  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);}"]
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
 const useLabelStyles = /*#__PURE__*/__styles({
-  "base": {
-    "qb2dma": "f7nlbp4",
-    "Bceei9c": "f1k6fduh",
-    "z8tnut": "f1kwiid1",
-    "z189sj": ["f1vdfbxk", "f1f5gg8d"],
-    "Byoj8tv": "f5b47ha",
-    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
+  base: {
+    qb2dma: "f7nlbp4",
+    Bceei9c: "f1k6fduh",
+    z8tnut: "f1kwiid1",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "f5b47ha",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   },
-  "before": {
-    "z189sj": ["f7x41pl", "fruq291"]
+  before: {
+    z189sj: ["f7x41pl", "fruq291"]
   },
-  "after": {
-    "uwmqm3": ["fruq291", "f7x41pl"]
+  after: {
+    uwmqm3: ["fruq291", "f7x41pl"]
   },
-  "medium": {
-    "B6of3ja": "fjzwpt6",
-    "jrapky": "fh6j2fo"
+  medium: {
+    B6of3ja: "fjzwpt6",
+    jrapky: "fh6j2fo"
   },
-  "large": {
-    "B6of3ja": "f1xlvstr",
-    "jrapky": "f49ad5g"
+  large: {
+    B6of3ja: "f1xlvstr",
+    jrapky: "f49ad5g"
   }
 }, {
-  "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1k6fduh{cursor:pointer;}", ".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);}"]
+  d: [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1k6fduh{cursor:pointer;}", ".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);}"]
 });
 /**
  * Apply styling to the Checkbox slots based on the state
  */
-
-
 export const useCheckboxStyles_unstable = state => {
   const {
     labelPosition,
@@ -92,17 +84,13 @@ export const useCheckboxStyles_unstable = state => {
   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) {
     state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
   }
-
   const labelStyles = useLabelStyles();
-
   if (state.label) {
     state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
   }
-
   return state;
 };
 //# sourceMappingURL=useCheckboxStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"AAAA,kCAAsC,YAAtC,EAAoD,UAApD,QAAsE,gBAAtE;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,KAAK,EAAE,qBAFwD;EAG/D,KAAK,EAAE,qBAHwD;EAI/D,SAAS,EAAE;AAJoD,CAA1D,C,CAOP;;AACA,MAAM,mBAAmB,GAAG,MAA5B;AACA,MAAM,kBAAkB,GAAG,MAA3B;;AAEA,MAAM,oBAAoB,gBAAG,6uEAA7B;;AAMA,MAAM,qBAAqB,gBAAG,i3FAA9B;;AAyHA,MAAM,cAAc,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;;AAaA,MAAM,yBAAyB,gBAAG,2rBAAlC;;AAqBA,MAAM,kBAAkB,gBAAG;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA3B,C,CAYA;;;AACA,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;AA0BA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM;IAAE,aAAF;IAAiB,KAAjB;IAAwB;EAAxB,IAAiC,KAAvC;EAEA,MAAM,iBAAiB,GAAG,oBAAoB,EAA9C;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,kBAAkB,CAAC,IAApB,EAA0B,iBAA1B,EAA6C,KAAK,CAAC,IAAN,CAAW,SAAxD,CAAnC;EAEA,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,kBAAkB,CAAC,KADe,EAElC,kBAFkC,EAGlC,IAAI,KAAK,OAAT,IAAoB,WAAW,CAAC,KAHE,EAIlC,WAAW,CAAC,aAAD,CAJuB,EAKlC,KAAK,CAAC,KAAN,CAAY,SALsB,CAApC;EAQA,MAAM,sBAAsB,GAAG,yBAAyB,EAAxD;EACA,MAAM,eAAe,GAAG,kBAAkB,EAA1C;;EACA,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CACtC,kBAAkB,CAAC,SADmB,EAEtC,sBAFsC,EAGtC,IAAI,KAAK,OAAT,IAAoB,eAAe,CAAC,KAHE,EAItC,KAAK,KAAK,UAAV,IAAwB,eAAe,CAAC,QAJF,EAKtC,KAAK,CAAC,SAAN,CAAgB,SALsB,CAAxC;EAOD;;EAED,MAAM,WAAW,GAAG,cAAc,EAAlC;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,kBAAkB,CAAC,KADe,EAElC,WAAW,CAAC,IAFsB,EAGlC,WAAW,CAAC,IAAD,CAHuB,EAIlC,WAAW,CAAC,aAAD,CAJuB,EAKlC,KAAK,CAAC,KAAN,CAAY,SALsB,CAApC;EAOD;;EAED,OAAO,KAAP;AACD,CAxCM","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  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'pointer',\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  // When unchecked, hide the the checkmark icon (child of the indicator slot)\n  [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n    opacity: 0,\n  },\n\n  // Colors for the unchecked state\n  ':enabled:not(:checked):not(:indeterminate)': {\n    [`& ~ .${checkboxClassNames.label}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    ':hover': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':active:hover': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Colors for the checked state\n  ':enabled:checked:not(:indeterminate)': {\n    [`& ~ .${checkboxClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      borderColor: tokens.colorCompoundBrandBackground,\n    },\n\n    ':hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        borderColor: tokens.colorCompoundBrandBackgroundHover,\n      },\n    },\n\n    ':active:hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        borderColor: tokens.colorCompoundBrandBackgroundPressed,\n      },\n    },\n  },\n\n  // Colors for the mixed state\n  ':enabled:indeterminate': {\n    [`& ~ .${checkboxClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      borderColor: tokens.colorCompoundBrandStroke,\n      color: tokens.colorCompoundBrandForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokeHover,\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':active:hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokePressed,\n        color: tokens.colorCompoundBrandForeground1Pressed,\n      },\n    },\n  },\n\n  ':disabled': {\n    cursor: 'default',\n\n    [`& ~ .${checkboxClassNames.label}`]: {\n      cursor: 'default',\n      color: tokens.colorNeutralForegroundDisabled,\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n      color: tokens.colorNeutralForegroundDisabled,\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n    [`& ~ .${checkboxClassNames.indicator} svg`]: {\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n  },\n});\n\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',\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    cursor: 'pointer',\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  const { labelPosition, shape, size } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,kCAAsCA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAI9C,OAAO,MAAMC,kBAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,KAAK,EAAE,qBAAqB;EAC5BC,SAAS,EAAE;CACZ;AAED;AACA,MAAMC,mBAAmB,GAAG,MAAM;AAClC,MAAMC,kBAAkB,GAAG,MAAM;AAEjC,MAAMC,oBAAoB,gBAAG,6uEAI3B;AAEF,MAAMC,qBAAqB,gBAAG,i3FAuH5B;AAEF,MAAMC,cAAc,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAWrB;AAEF,MAAMC,yBAAyB,gBAAG,2rBAmBhC;AAEF,MAAMC,kBAAkB,gBAAG;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAUzB;AAEF;AACA,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAwBrB;AAEF;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAM;IAAEC,aAAa;IAAEC,KAAK;IAAEC;EAAI,CAAE,GAAGH,KAAK;EAE5C,MAAMI,iBAAiB,GAAGX,oBAAoB,EAAE;EAChDO,KAAK,CAACb,IAAI,CAACkB,SAAS,GAAGvB,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAEiB,iBAAiB,EAAEJ,KAAK,CAACb,IAAI,CAACkB,SAAS,CAAC;EAErG,MAAMC,kBAAkB,GAAGZ,qBAAqB,EAAE;EAClD,MAAMa,WAAW,GAAGZ,cAAc,EAAE;EACpCK,KAAK,CAACX,KAAK,CAACgB,SAAS,GAAGvB,YAAY,CAClCI,kBAAkB,CAACG,KAAK,EACxBiB,kBAAkB,EAClBH,IAAI,KAAK,OAAO,IAAII,WAAW,CAACC,KAAK,EACrCD,WAAW,CAACN,aAAa,CAAC,EAC1BD,KAAK,CAACX,KAAK,CAACgB,SAAS,CACtB;EAED,MAAMI,sBAAsB,GAAGb,yBAAyB,EAAE;EAC1D,MAAMc,eAAe,GAAGb,kBAAkB,EAAE;EAC5C,IAAIG,KAAK,CAACV,SAAS,EAAE;IACnBU,KAAK,CAACV,SAAS,CAACe,SAAS,GAAGvB,YAAY,CACtCI,kBAAkB,CAACI,SAAS,EAC5BmB,sBAAsB,EACtBN,IAAI,KAAK,OAAO,IAAIO,eAAe,CAACF,KAAK,EACzCN,KAAK,KAAK,UAAU,IAAIQ,eAAe,CAACC,QAAQ,EAChDX,KAAK,CAACV,SAAS,CAACe,SAAS,CAC1B;;EAGH,MAAMO,WAAW,GAAGd,cAAc,EAAE;EACpC,IAAIE,KAAK,CAACZ,KAAK,EAAE;IACfY,KAAK,CAACZ,KAAK,CAACiB,SAAS,GAAGvB,YAAY,CAClCI,kBAAkB,CAACE,KAAK,EACxBwB,WAAW,CAACC,IAAI,EAChBD,WAAW,CAACT,IAAI,CAAC,EACjBS,WAAW,CAACX,aAAa,CAAC,EAC1BD,KAAK,CAACZ,KAAK,CAACiB,SAAS,CACtB;;EAGH,OAAOL,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","useInputBaseClassName","useInputStyles","useIndicatorBaseClassName","useIndicatorStyles","useLabelStyles","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","className","inputBaseClassName","inputStyles","large","indicatorBaseClassName","indicatorStyles","circular","labelStyles","base"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/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  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'pointer',\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  // When unchecked, hide the the checkmark icon (child of the indicator slot)\n  [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n    opacity: 0,\n  },\n\n  // Colors for the unchecked state\n  ':enabled:not(:checked):not(:indeterminate)': {\n    [`& ~ .${checkboxClassNames.label}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    ':hover': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':active:hover': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Colors for the checked state\n  ':enabled:checked:not(:indeterminate)': {\n    [`& ~ .${checkboxClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      borderColor: tokens.colorCompoundBrandBackground,\n    },\n\n    ':hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        borderColor: tokens.colorCompoundBrandBackgroundHover,\n      },\n    },\n\n    ':active:hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        borderColor: tokens.colorCompoundBrandBackgroundPressed,\n      },\n    },\n  },\n\n  // Colors for the mixed state\n  ':enabled:indeterminate': {\n    [`& ~ .${checkboxClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      borderColor: tokens.colorCompoundBrandStroke,\n      color: tokens.colorCompoundBrandForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokeHover,\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':active:hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokePressed,\n        color: tokens.colorCompoundBrandForeground1Pressed,\n      },\n    },\n  },\n\n  ':disabled': {\n    cursor: 'default',\n\n    [`& ~ .${checkboxClassNames.label}`]: {\n      cursor: 'default',\n      color: tokens.colorNeutralForegroundDisabled,\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n      color: tokens.colorNeutralForegroundDisabled,\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n    [`& ~ .${checkboxClassNames.indicator} svg`]: {\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n  },\n});\n\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',\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    cursor: 'pointer',\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  const { labelPosition, shape, size } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\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"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SACE,kBADF,EAEE,oBAFF,EAGE,uBAHF,EAIE,iBAJF,QAKO,uBALP;AAQA,SAAS,QAAT,QAAyB,gBAAzB;AAeA,OAAO,MAAM,uBAAuB,gBAAG,kBAAkB,CAAC,eAAD,CAAlD;AAEP,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB,KAAxB;IAA+B,OAA/B;IAAwC,GAAG;EAA3C,IAA2D,KAAjE;EAEA,KAAK,GAAG;IACN;IACA,KAAK,EAAE,UAFD;IAGN;IACA,OAAO,EAAE;MAAE,KAAF;MAAS,QAAT;MAAmB,GAAG;IAAtB,CAJH;IAKN,GAAG;EALG,CAAR;EAQA,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAAE,SAAS,EAAE,QAAb;IAAuB,UAAU,EAAE;EAAnC,CAAb,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAdqE,CAA/D;AAgBP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CheckboxProps } from '../../Checkbox';\nimport { Checkbox } from '../../Checkbox';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n  /**\n   * The Checkbox's label.\n   */\n  label?: CheckboxProps['label'];\n\n  /**\n   * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n   * It is recommended to only set the `label` prop, and not `fieldLabel`.\n   */\n  fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n  const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n  props = {\n    // Use the fieldLabel prop as the Field's label\n    label: fieldLabel,\n    // Use the label prop as the Checkbox's label\n    control: { label, required, ...control },\n    ...restOfProps,\n  };\n\n  const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SACEC,kBAAkB,EAClBC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,uBAAuB;AAG9B,SAASC,QAAQ,QAAQ,gBAAgB;AAezC,OAAO,MAAMC,uBAAuB,gBAAGL,kBAAkB,CAAC,eAAe,CAAC;AAE1E,OAAO,MAAMM,aAAa,gBAA4CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAM;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,OAAO;IAAE,GAAGC;EAAW,CAAE,GAAGN,KAAK;EAEtEA,KAAK,GAAG;IACN;IACAI,KAAK,EAAEF,UAAU;IACjB;IACAG,OAAO,EAAE;MAAED,KAAK;MAAED,QAAQ;MAAE,GAAGE;IAAO,CAAE;IACxC,GAAGC;GACJ;EAED,MAAMC,KAAK,GAAGZ,iBAAiB,CAACK,KAAK,EAAEC,GAAG,EAAE;IAAEO,SAAS,EAAEZ,QAAQ;IAAEa,UAAU,EAAEZ;EAAuB,CAAE,CAAC;EACzGH,uBAAuB,CAACa,KAAK,CAAC;EAC9B,OAAOd,oBAAoB,CAACc,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFT,aAAa,CAACY,WAAW,GAAG,eAAe","names":["React","getFieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","Checkbox","checkboxFieldClassNames","CheckboxField","forwardRef","props","ref","fieldLabel","required","label","control","restOfProps","state","component","classNames","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CheckboxProps } from '../../Checkbox';\nimport { Checkbox } from '../../Checkbox';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n  /**\n   * The Checkbox's label.\n   */\n  label?: CheckboxProps['label'];\n\n  /**\n   * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n   * It is recommended to only set the `label` prop, and not `fieldLabel`.\n   */\n  fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n  const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n  props = {\n    // Use the fieldLabel prop as the Field's label\n    label: fieldLabel,\n    // Use the label prop as the Checkbox's label\n    control: { label, required, ...control },\n    ...restOfProps,\n  };\n\n  const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"]}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-checkbox/src/index.ts"],"names":[],"mappings":"AAAA,SACE,QADF,EAEE,kBAFF,EAGE,uBAHF,EAIE,0BAJF,EAKE,oBALF,QAMO,YANP;AASA,SAAS,aAAa,IAAI,sBAA1B,EAAkD,uBAAlD,QAAiF,iBAAjF","sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n\nexport { CheckboxField as CheckboxField_unstable, checkboxFieldClassNames } from './CheckboxField';\nexport type { CheckboxFieldProps as CheckboxFieldProps_unstable } from './CheckboxField';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AAGnB,SAASC,aAAa,IAAIC,sBAAsB,EAAEC,uBAAuB,QAAQ,iBAAiB","names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable","CheckboxField","CheckboxField_unstable","checkboxFieldClassNames"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/index.ts"],"sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n\nexport { CheckboxField as CheckboxField_unstable, checkboxFieldClassNames } from './CheckboxField';\nexport type { CheckboxFieldProps as CheckboxFieldProps_unstable } from './CheckboxField';\n"]}

package/lib-commonjs/Checkbox.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/Checkbox/index"), exports);
 //# sourceMappingURL=Checkbox.js.map

package/lib-commonjs/Checkbox.js.map

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

package/lib-commonjs/CheckboxField.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/CheckboxField/index"), exports);
 //# sourceMappingURL=CheckboxField.js.map

package/lib-commonjs/CheckboxField.js.map

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

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

@@ -4,20 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Checkbox = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useCheckbox_1 = /*#__PURE__*/require("./useCheckbox");
-
 const renderCheckbox_1 = /*#__PURE__*/require("./renderCheckbox");
-
 const useCheckboxStyles_1 = /*#__PURE__*/require("./useCheckboxStyles");
 /**
  * Checkboxes give people a way to select one or more items from a group,
  * or switch between two mutually exclusive options (checked or unchecked).
  */
-
-
 exports.Checkbox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useCheckbox_1.useCheckbox_unstable(props, ref);
   useCheckboxStyles_1.useCheckboxStyles_unstable(state);

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./Checkbox"), exports);
-
 tslib_1.__exportStar(require("./Checkbox.types"), exports);
-
 tslib_1.__exportStar(require("./renderCheckbox"), exports);
-
 tslib_1.__exportStar(require("./useCheckbox"), exports);
-
 tslib_1.__exportStar(require("./useCheckboxStyles"), exports);
 //# sourceMappingURL=index.js.map

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

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

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

@@ -4,23 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderCheckbox_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const renderCheckbox_unstable = state => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
-  }, React.createElement(slots.input, { ...slotProps.input
-  }), state.labelPosition === 'before' && slots.label && React.createElement(slots.label, { ...slotProps.label
-  }), React.createElement(slots.indicator, { ...slotProps.indicator
-  }), state.labelPosition === 'after' && slots.label && React.createElement(slots.label, { ...slotProps.label
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, React.createElement(slots.input, {
+    ...slotProps.input
+  }), state.labelPosition === 'before' && slots.label && React.createElement(slots.label, {
+    ...slotProps.label
+  }), React.createElement(slots.indicator, {
+    ...slotProps.indicator
+  }), state.labelPosition === 'after' && slots.label && React.createElement(slots.label, {
+    ...slotProps.label
   }));
 };
-
 exports.renderCheckbox_unstable = renderCheckbox_unstable;
 //# sourceMappingURL=renderCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAwB,KAAxB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,aAAN,KAAwB,QAAxB,IAAoC,KAAK,CAAC,KAA1C,IAAmD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAFtD,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CAHF,EAIG,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,KAAK,CAAC,KAAzC,IAAkD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJrD,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n  const { slots, slotProps } = getSlots<CheckboxSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGO,MAAMA,uBAAuB,GAAIC,KAAoB,IAAI;EAC9D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAgBH,KAAK,CAAC;EAE3D,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EACnCN,KAAK,CAACO,aAAa,KAAK,QAAQ,IAAIN,KAAK,CAACO,KAAK,IAAIJ,oBAACH,KAAK,CAACO,KAAK;IAAA,GAAKN,SAAS,CAACM;EAAK,EAAI,EACxFJ,oBAACH,KAAK,CAACQ,SAAS;IAAA,GAAKP,SAAS,CAACO;EAAS,EAAI,EAC3CT,KAAK,CAACO,aAAa,KAAK,OAAO,IAAIN,KAAK,CAACO,KAAK,IAAIJ,oBAACH,KAAK,CAACO,KAAK;IAAA,GAAKN,SAAS,CAACM;EAAK,EAAI,CAC5E;AAEjB,CAAC;AAXYE,+BAAuB","names":["renderCheckbox_unstable","state","slots","slotProps","react_utilities_1","React","root","input","labelPosition","label","indicator","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n  const { slots, slotProps } = getSlots<CheckboxSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"]}

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

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCheckbox_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
-
 const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
-
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
 /**
  * Create the state required to render Checkbox.
@@ -23,8 +18,6 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
  * @param props - props from this instance of Checkbox
  * @param ref - reference to `<input>` element of Checkbox
  */
-
-
 const useCheckbox_unstable = (props, ref) => {
   const {
     disabled,
@@ -47,7 +40,6 @@ const useCheckbox_unstable = (props, ref) => {
   const mixed = checked === 'mixed';
   const id = react_utilities_1.useId('checkbox-', nativeProps.primary.id);
   let checkmarkIcon;
-
   if (mixed) {
     if (shape === 'circular') {
       checkmarkIcon = React.createElement(react_icons_1.CircleFilled, null);
@@ -57,7 +49,6 @@ const useCheckbox_unstable = (props, ref) => {
   } else {
     checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Checkmark16Filled, null) : React.createElement(react_icons_1.Checkmark12Filled, null);
   }
-
   const state = {
     shape,
     checked,
@@ -93,9 +84,9 @@ const useCheckbox_unstable = (props, ref) => {
         disabled,
         required,
         size: 'medium' // Even if the checkbox itself is large
-
       }
     }),
+
     indicator: react_utilities_1.resolveShorthand(props.indicator, {
       required: true,
       defaultProps: {
@@ -110,13 +101,13 @@ const useCheckbox_unstable = (props, ref) => {
       checked: val
     });
     setChecked(val);
-  }); // Create a ref object for the input element so we can use it to set the indeterminate prop.
+  });
+  // Create a ref object for the input element so we can use it to set the indeterminate prop.
   // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)
-
   const inputRef = react_utilities_1.useMergedRefs(state.input.ref);
-  state.input.ref = inputRef; // Set the <input> element's checked and indeterminate properties based on our tri-state property.
+  state.input.ref = inputRef;
+  // Set the <input> element's checked and indeterminate properties based on our tri-state property.
   // Since indeterminate can only be set via javascript, it has to be done in a layout effect.
-
   react_utilities_1.useIsomorphicLayoutEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = mixed;
@@ -124,6 +115,5 @@ const useCheckbox_unstable = (props, ref) => {
   }, [inputRef, mixed]);
   return state;
 };
-
 exports.useCheckbox_unstable = useCheckbox_unstable;
 //# sourceMappingURL=useCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n  Checkmark12Filled,\n  Checkmark16Filled,\n  Square12Filled,\n  Square16Filled,\n  CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n  const { disabled, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n\n  const [checked, setChecked] = useControllableState({\n    defaultState: props.defaultChecked,\n    state: props.checked,\n    initialState: false,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = <CircleFilled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  const state: CheckboxState = {\n    shape,\n    checked,\n    size,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: Label,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        ref: useFocusWithin<HTMLSpanElement>(),\n        ...nativeProps.root,\n      },\n    }),\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary,\n      },\n    }),\n    label: resolveShorthand(props.label, {\n      required: false,\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n        size: 'medium', // Even if the checkbox itself is large\n      },\n    }),\n    indicator: resolveShorthand(props.indicator, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': true,\n        children: checkmarkIcon,\n      },\n    }),\n  };\n\n  state.input.onChange = useEventCallback(ev => {\n    const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n    onChange?.(ev, { checked: val });\n    setChecked(val);\n  });\n\n  // Create a ref object for the input element so we can use it to set the indeterminate prop.\n  // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n  const inputRef = useMergedRefs(state.input.ref);\n  state.input.ref = inputRef;\n\n  // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n  // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n  useIsomorphicLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = mixed;\n    }\n  }, [inputRef, mixed]);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAUA;AAOA;AACA;AAEA;;;;;;;;;AASO,MAAMA,oBAAoB,GAAG,CAACC,KAAoB,EAAEC,GAAgC,KAAmB;EAC5G,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,KAAK,GAAG,QAAQ;IAAEC,IAAI,GAAG,QAAQ;IAAEC,aAAa,GAAG,OAAO;IAAEC;EAAQ,CAAE,GAAGP,KAAK;EAE1G,MAAM,CAACQ,OAAO,EAAEC,UAAU,CAAC,GAAGC,sCAAoB,CAAC;IACjDC,YAAY,EAAEX,KAAK,CAACY,cAAc;IAClCC,KAAK,EAAEb,KAAK,CAACQ,OAAO;IACpBM,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,WAAW,GAAGL,2CAAyB,CAAC;IAC5CV,KAAK;IACLgB,kBAAkB,EAAE,OAAO;IAC3BC,iBAAiB,EAAE,CAAC,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU;GACpE,CAAC;EAEF,MAAMC,KAAK,GAAGV,OAAO,KAAK,OAAO;EACjC,MAAMW,EAAE,GAAGT,uBAAK,CAAC,WAAW,EAAEK,WAAW,CAACK,OAAO,CAACD,EAAE,CAAC;EAErD,IAAIE,aAAa;EACjB,IAAIH,KAAK,EAAE;IACT,IAAId,KAAK,KAAK,UAAU,EAAE;MACxBiB,aAAa,GAAGC,oBAACC,0BAAY,OAAG;KACjC,MAAM;MACLF,aAAa,GAAGhB,IAAI,KAAK,OAAO,GAAGiB,oBAACC,4BAAc,OAAG,GAAGD,oBAACC,4BAAc,OAAG;;GAE7E,MAAM;IACLF,aAAa,GAAGhB,IAAI,KAAK,OAAO,GAAGiB,oBAACC,+BAAiB,OAAG,GAAGD,oBAACC,+BAAiB,OAAG;;EAGlF,MAAMV,KAAK,GAAkB;IAC3BT,KAAK;IACLI,OAAO;IACPH,IAAI;IACJC,aAAa;IACbkB,UAAU,EAAE;MACVC,IAAI,EAAE,MAAM;MACZC,KAAK,EAAE,OAAO;MACdC,SAAS,EAAE,KAAK;MAChBC,KAAK,EAAEC;KACR;IACDJ,IAAI,EAAEf,kCAAgB,CAACV,KAAK,CAACyB,IAAI,EAAE;MACjCtB,QAAQ,EAAE,IAAI;MACd2B,YAAY,EAAE;QACZ7B,GAAG,EAAE8B,8BAAc,EAAmB;QACtC,GAAGhB,WAAW,CAACU;;KAElB,CAAC;IACFC,KAAK,EAAEhB,kCAAgB,CAACV,KAAK,CAAC0B,KAAK,EAAE;MACnCvB,QAAQ,EAAE,IAAI;MACd2B,YAAY,EAAE;QACZE,IAAI,EAAE,UAAU;QAChBb,EAAE;QACFlB,GAAG;QACHO,OAAO,EAAEA,OAAO,KAAK,IAAI;QACzB,GAAGO,WAAW,CAACK;;KAElB,CAAC;IACFQ,KAAK,EAAElB,kCAAgB,CAACV,KAAK,CAAC4B,KAAK,EAAE;MACnCzB,QAAQ,EAAE,KAAK;MACf2B,YAAY,EAAE;QACZG,OAAO,EAAEd,EAAE;QACXjB,QAAQ;QACRC,QAAQ;QACRE,IAAI,EAAE,QAAQ,CAAE;;KAEnB,CAAC;;IACFsB,SAAS,EAAEjB,kCAAgB,CAACV,KAAK,CAAC2B,SAAS,EAAE;MAC3CxB,QAAQ,EAAE,IAAI;MACd2B,YAAY,EAAE;QACZ,aAAa,EAAE,IAAI;QACnBI,QAAQ,EAAEb;;KAEb;GACF;EAEDR,KAAK,CAACa,KAAK,CAACnB,QAAQ,GAAGG,kCAAgB,CAACyB,EAAE,IAAG;IAC3C,MAAMC,GAAG,GAAGD,EAAE,CAACE,aAAa,CAACC,aAAa,GAAG,OAAO,GAAGH,EAAE,CAACE,aAAa,CAAC7B,OAAO;IAC/ED,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG4B,EAAE,EAAE;MAAE3B,OAAO,EAAE4B;IAAG,CAAE,CAAC;IAChC3B,UAAU,CAAC2B,GAAG,CAAC;EACjB,CAAC,CAAC;EAEF;EACA;EACA,MAAMG,QAAQ,GAAG7B,+BAAa,CAACG,KAAK,CAACa,KAAK,CAACzB,GAAG,CAAC;EAC/CY,KAAK,CAACa,KAAK,CAACzB,GAAG,GAAGsC,QAAQ;EAE1B;EACA;EACA7B,2CAAyB,CAAC,MAAK;IAC7B,IAAI6B,QAAQ,CAACC,OAAO,EAAE;MACpBD,QAAQ,CAACC,OAAO,CAACF,aAAa,GAAGpB,KAAK;;EAE1C,CAAC,EAAE,CAACqB,QAAQ,EAAErB,KAAK,CAAC,CAAC;EAErB,OAAOL,KAAK;AACd,CAAC;AA/FY4B,4BAAoB","names":["useCheckbox_unstable","props","ref","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","react_utilities_1","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","React","react_icons_1","components","root","input","indicator","label","react_label_1","defaultProps","react_tabster_1","type","htmlFor","children","ev","val","currentTarget","indeterminate","inputRef","current","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/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, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n\n  const [checked, setChecked] = useControllableState({\n    defaultState: props.defaultChecked,\n    state: props.checked,\n    initialState: false,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = <CircleFilled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  const state: CheckboxState = {\n    shape,\n    checked,\n    size,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: Label,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        ref: useFocusWithin<HTMLSpanElement>(),\n        ...nativeProps.root,\n      },\n    }),\n    input: resolveShorthand(props.input, {\n      required: true,\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary,\n      },\n    }),\n    label: resolveShorthand(props.label, {\n      required: false,\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n        size: 'medium', // Even if the checkbox itself is large\n      },\n    }),\n    indicator: resolveShorthand(props.indicator, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': true,\n        children: checkmarkIcon,\n      },\n    }),\n  };\n\n  state.input.onChange = useEventCallback(ev => {\n    const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n    onChange?.(ev, { checked: val });\n    setChecked(val);\n  });\n\n  // Create a ref object for the input element so we can use it to set the indeterminate prop.\n  // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n  const inputRef = useMergedRefs(state.input.ref);\n  state.input.ref = inputRef;\n\n  // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n  // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n  useIsomorphicLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = mixed;\n    }\n  }, [inputRef, mixed]);\n\n  return state;\n};\n"]}

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

@@ -4,91 +4,79 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCheckboxStyles_unstable = exports.checkboxClassNames = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
-
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
 exports.checkboxClassNames = {
   root: 'fui-Checkbox',
   label: 'fui-Checkbox__label',
   input: 'fui-Checkbox__input',
   indicator: 'fui-Checkbox__indicator'
-}; // The indicator size is used by the indicator and label styles
-
+};
+// The indicator size is used by the indicator and label styles
 const indicatorSizeMedium = '16px';
 const indicatorSizeLarge = '20px';
-
 const useRootBaseClassName = /*#__PURE__*/react_1.__resetStyles("r1o1qdo1", "r1niodl4", [".r1o1qdo1{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1o1qdo1:focus{outline-style:none;}", ".r1o1qdo1:focus-visible{outline-style:none;}", ".r1o1qdo1[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1o1qdo1[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;}", ".r1niodl4{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".r1niodl4:focus{outline-style:none;}", ".r1niodl4:focus-visible{outline-style:none;}", ".r1niodl4[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1niodl4[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 useInputBaseClassName = /*#__PURE__*/react_1.__resetStyles("rfcvz6l", null, [".rfcvz6l{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));}", ".rfcvz6l:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator>*{opacity:0;}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground3);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate)~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__label{color:var(--colorNeutralForeground2);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:not(:checked):not(:indeterminate):active:hover~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:checked:not(:indeterminate)~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorCompoundBrandBackground);}", ".rfcvz6l:enabled:checked:not(:indeterminate):hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorCompoundBrandBackgroundHover);}", ".rfcvz6l:enabled:checked:not(:indeterminate):active:hover~.fui-Checkbox__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorCompoundBrandBackgroundPressed);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__label{color:var(--colorNeutralForeground1);}", ".rfcvz6l:enabled:indeterminate~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".rfcvz6l:enabled:indeterminate:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".rfcvz6l:enabled:indeterminate:active:hover~.fui-Checkbox__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".rfcvz6l:disabled{cursor:default;}", ".rfcvz6l:disabled~.fui-Checkbox__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__label{color:GrayText;}}", ".rfcvz6l:disabled~.fui-Checkbox__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator{color:GrayText;}}", "@media (forced-colors: active){.rfcvz6l:disabled~.fui-Checkbox__indicator svg{color:GrayText;}}"]);
-
 const useInputStyles = /*#__PURE__*/react_1.__styles({
-  "before": {
-    "j35jbq": ["f1e31b4d", "f1vgc2s3"]
+  before: {
+    j35jbq: ["f1e31b4d", "f1vgc2s3"]
   },
-  "after": {
-    "oyh7mz": ["f1vgc2s3", "f1e31b4d"]
+  after: {
+    oyh7mz: ["f1vgc2s3", "f1e31b4d"]
   },
-  "large": {
-    "a9b677": "f1mq5jt6"
+  large: {
+    a9b677: "f1mq5jt6"
   }
 }, {
-  "d": [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"]
+  d: [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1mq5jt6{width:calc(20px + 2 * var(--spacingHorizontalS));}"]
 });
-
 const useIndicatorBaseClassName = /*#__PURE__*/react_1.__resetStyles("r1jvlehe", null, [".r1jvlehe{-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;border-radius:var(--borderRadiusSmall);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;font-size:12px;height:16px;width:16px;}"]);
-
 const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
-  "large": {
-    "Be2twd7": "f4ybsrx",
-    "Bqenvij": "fjamq6b",
-    "a9b677": "f64fuq3"
+  large: {
+    Be2twd7: "f4ybsrx",
+    Bqenvij: "fjamq6b",
+    a9b677: "f64fuq3"
   },
-  "circular": {
-    "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
-    "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
-    "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
-    "Btl43ni": ["f1s8kh49", "f1djnp8u"]
+  circular: {
+    Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
+    Beyfa6y: ["f1nfllo7", "f8fbkgy"],
+    B7oj6ja: ["f1djnp8u", "f1s8kh49"],
+    Btl43ni: ["f1s8kh49", "f1djnp8u"]
   }
 }, {
-  "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);}"]
-}); // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
-
-
+  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);}"]
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
 const useLabelStyles = /*#__PURE__*/react_1.__styles({
-  "base": {
-    "qb2dma": "f7nlbp4",
-    "Bceei9c": "f1k6fduh",
-    "z8tnut": "f1kwiid1",
-    "z189sj": ["f1vdfbxk", "f1f5gg8d"],
-    "Byoj8tv": "f5b47ha",
-    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
+  base: {
+    qb2dma: "f7nlbp4",
+    Bceei9c: "f1k6fduh",
+    z8tnut: "f1kwiid1",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "f5b47ha",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   },
-  "before": {
-    "z189sj": ["f7x41pl", "fruq291"]
+  before: {
+    z189sj: ["f7x41pl", "fruq291"]
   },
-  "after": {
-    "uwmqm3": ["fruq291", "f7x41pl"]
+  after: {
+    uwmqm3: ["fruq291", "f7x41pl"]
   },
-  "medium": {
-    "B6of3ja": "fjzwpt6",
-    "jrapky": "fh6j2fo"
+  medium: {
+    B6of3ja: "fjzwpt6",
+    jrapky: "fh6j2fo"
   },
-  "large": {
-    "B6of3ja": "f1xlvstr",
-    "jrapky": "f49ad5g"
+  large: {
+    B6of3ja: "f1xlvstr",
+    jrapky: "f49ad5g"
   }
 }, {
-  "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1k6fduh{cursor:pointer;}", ".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);}"]
+  d: [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1k6fduh{cursor:pointer;}", ".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);}"]
 });
 /**
  * Apply styling to the Checkbox slots based on the state
  */
-
-
 const useCheckboxStyles_unstable = state => {
   const {
     labelPosition,
@@ -102,19 +90,14 @@ const useCheckboxStyles_unstable = state => {
   state.input.className = react_1.mergeClasses(exports.checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
   const indicatorBaseClassName = useIndicatorBaseClassName();
   const indicatorStyles = useIndicatorStyles();
-
   if (state.indicator) {
     state.indicator.className = react_1.mergeClasses(exports.checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
   }
-
   const labelStyles = useLabelStyles();
-
   if (state.label) {
     state.label.className = react_1.mergeClasses(exports.checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
   }
-
   return state;
 };
-
 exports.useCheckboxStyles_unstable = useCheckboxStyles_unstable;
 //# sourceMappingURL=useCheckboxStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts"],"names":[],"mappings":"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","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  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'pointer',\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  // When unchecked, hide the the checkmark icon (child of the indicator slot)\n  [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n    opacity: 0,\n  },\n\n  // Colors for the unchecked state\n  ':enabled:not(:checked):not(:indeterminate)': {\n    [`& ~ .${checkboxClassNames.label}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    ':hover': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':active:hover': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Colors for the checked state\n  ':enabled:checked:not(:indeterminate)': {\n    [`& ~ .${checkboxClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      borderColor: tokens.colorCompoundBrandBackground,\n    },\n\n    ':hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        borderColor: tokens.colorCompoundBrandBackgroundHover,\n      },\n    },\n\n    ':active:hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        borderColor: tokens.colorCompoundBrandBackgroundPressed,\n      },\n    },\n  },\n\n  // Colors for the mixed state\n  ':enabled:indeterminate': {\n    [`& ~ .${checkboxClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      borderColor: tokens.colorCompoundBrandStroke,\n      color: tokens.colorCompoundBrandForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokeHover,\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':active:hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokePressed,\n        color: tokens.colorCompoundBrandForeground1Pressed,\n      },\n    },\n  },\n\n  ':disabled': {\n    cursor: 'default',\n\n    [`& ~ .${checkboxClassNames.label}`]: {\n      cursor: 'default',\n      color: tokens.colorNeutralForegroundDisabled,\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n      color: tokens.colorNeutralForegroundDisabled,\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n    [`& ~ .${checkboxClassNames.indicator} svg`]: {\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n  },\n});\n\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',\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    cursor: 'pointer',\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  const { labelPosition, shape, size } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,0BAAkB,GAAkC;EAC/DC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,qBAAqB;EAC5BC,KAAK,EAAE,qBAAqB;EAC5BC,SAAS,EAAE;CACZ;AAED;AACA,MAAMC,mBAAmB,GAAG,MAAM;AAClC,MAAMC,kBAAkB,GAAG,MAAM;AAEjC,MAAMC,oBAAoB,gBAAGC,qBAAe,guEAI1C;AAEF,MAAMC,qBAAqB,gBAAGD,qBAAe,o2FAuH3C;AAEF,MAAME,cAAc,gBAAGF,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAW/B;AAEF,MAAMG,yBAAyB,gBAAGH,qBAAe,8qBAmB/C;AAEF,MAAMI,kBAAkB,gBAAGJ,gBAAU;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAUnC;AAEF;AACA,MAAMK,cAAc,gBAAGL,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAwB/B;AAEF;;;AAGO,MAAMM,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAM;IAAEC,aAAa;IAAEC,KAAK;IAAEC;EAAI,CAAE,GAAGH,KAAK;EAE5C,MAAMI,iBAAiB,GAAGZ,oBAAoB,EAAE;EAChDQ,KAAK,CAACd,IAAI,CAACmB,SAAS,GAAGZ,oBAAY,CAACR,0BAAkB,CAACC,IAAI,EAAEkB,iBAAiB,EAAEJ,KAAK,CAACd,IAAI,CAACmB,SAAS,CAAC;EAErG,MAAMC,kBAAkB,GAAGZ,qBAAqB,EAAE;EAClD,MAAMa,WAAW,GAAGZ,cAAc,EAAE;EACpCK,KAAK,CAACZ,KAAK,CAACiB,SAAS,GAAGZ,oBAAY,CAClCR,0BAAkB,CAACG,KAAK,EACxBkB,kBAAkB,EAClBH,IAAI,KAAK,OAAO,IAAII,WAAW,CAACC,KAAK,EACrCD,WAAW,CAACN,aAAa,CAAC,EAC1BD,KAAK,CAACZ,KAAK,CAACiB,SAAS,CACtB;EAED,MAAMI,sBAAsB,GAAGb,yBAAyB,EAAE;EAC1D,MAAMc,eAAe,GAAGb,kBAAkB,EAAE;EAC5C,IAAIG,KAAK,CAACX,SAAS,EAAE;IACnBW,KAAK,CAACX,SAAS,CAACgB,SAAS,GAAGZ,oBAAY,CACtCR,0BAAkB,CAACI,SAAS,EAC5BoB,sBAAsB,EACtBN,IAAI,KAAK,OAAO,IAAIO,eAAe,CAACF,KAAK,EACzCN,KAAK,KAAK,UAAU,IAAIQ,eAAe,CAACC,QAAQ,EAChDX,KAAK,CAACX,SAAS,CAACgB,SAAS,CAC1B;;EAGH,MAAMO,WAAW,GAAGd,cAAc,EAAE;EACpC,IAAIE,KAAK,CAACb,KAAK,EAAE;IACfa,KAAK,CAACb,KAAK,CAACkB,SAAS,GAAGZ,oBAAY,CAClCR,0BAAkB,CAACE,KAAK,EACxByB,WAAW,CAACC,IAAI,EAChBD,WAAW,CAACT,IAAI,CAAC,EACjBS,WAAW,CAACX,aAAa,CAAC,EAC1BD,KAAK,CAACb,KAAK,CAACkB,SAAS,CACtB;;EAGH,OAAOL,KAAK;AACd,CAAC;AAxCYf,kCAA0B","names":["exports","root","label","input","indicator","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","react_1","useInputBaseClassName","useInputStyles","useIndicatorBaseClassName","useIndicatorStyles","useLabelStyles","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","className","inputBaseClassName","inputStyles","large","indicatorBaseClassName","indicatorStyles","circular","labelStyles","base"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/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  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'pointer',\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  // When unchecked, hide the the checkmark icon (child of the indicator slot)\n  [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {\n    opacity: 0,\n  },\n\n  // Colors for the unchecked state\n  ':enabled:not(:checked):not(:indeterminate)': {\n    [`& ~ .${checkboxClassNames.label}`]: {\n      color: tokens.colorNeutralForeground3,\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    ':hover': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground2,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':active:hover': {\n      [`& ~ .${checkboxClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Colors for the checked state\n  ':enabled:checked:not(:indeterminate)': {\n    [`& ~ .${checkboxClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      borderColor: tokens.colorCompoundBrandBackground,\n    },\n\n    ':hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        borderColor: tokens.colorCompoundBrandBackgroundHover,\n      },\n    },\n\n    ':active:hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        borderColor: tokens.colorCompoundBrandBackgroundPressed,\n      },\n    },\n  },\n\n  // Colors for the mixed state\n  ':enabled:indeterminate': {\n    [`& ~ .${checkboxClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      borderColor: tokens.colorCompoundBrandStroke,\n      color: tokens.colorCompoundBrandForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokeHover,\n        color: tokens.colorCompoundBrandForeground1Hover,\n      },\n    },\n\n    ':active:hover': {\n      [`& ~ .${checkboxClassNames.indicator}`]: {\n        borderColor: tokens.colorCompoundBrandStrokePressed,\n        color: tokens.colorCompoundBrandForeground1Pressed,\n      },\n    },\n  },\n\n  ':disabled': {\n    cursor: 'default',\n\n    [`& ~ .${checkboxClassNames.label}`]: {\n      cursor: 'default',\n      color: tokens.colorNeutralForegroundDisabled,\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n    [`& ~ .${checkboxClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n      color: tokens.colorNeutralForegroundDisabled,\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n    [`& ~ .${checkboxClassNames.indicator} svg`]: {\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n  },\n});\n\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',\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    cursor: 'pointer',\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  const { labelPosition, shape, size } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className);\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"]}

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

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CheckboxField = exports.checkboxFieldClassNames = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
-
 const Checkbox_1 = /*#__PURE__*/require("../../Checkbox");
-
 exports.checkboxFieldClassNames = /*#__PURE__*/react_field_1.getFieldClassNames('CheckboxField');
 exports.CheckboxField = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAQA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAea,OAAA,CAAA,uBAAA,gBAA0B,aAAA,CAAA,kBAAA,CAAmB,eAAnB,CAA1B;AAEA,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM;IAAE,UAAF;IAAc,QAAd;IAAwB,KAAxB;IAA+B,OAA/B;IAAwC,GAAG;EAA3C,IAA2D,KAAjE;EAEA,KAAK,GAAG;IACN;IACA,KAAK,EAAE,UAFD;IAGN;IACA,OAAO,EAAE;MAAE,KAAF;MAAS,QAAT;MAAmB,GAAG;IAAtB,CAJH;IAKN,GAAG;EALG,CAAR;EAQA,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,UAAA,CAAA,QAAb;IAAuB,UAAU,EAAE,OAAA,CAAA;EAAnC,CAA9B,CAAd;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAdqE,CAAzD;AAgBb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CheckboxProps } from '../../Checkbox';\nimport { Checkbox } from '../../Checkbox';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n  /**\n   * The Checkbox's label.\n   */\n  label?: CheckboxProps['label'];\n\n  /**\n   * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n   * It is recommended to only set the `label` prop, and not `fieldLabel`.\n   */\n  fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n  const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n  props = {\n    // Use the fieldLabel prop as the Field's label\n    label: fieldLabel,\n    // Use the label prop as the Checkbox's label\n    control: { label, required, ...control },\n    ...restOfProps,\n  };\n\n  const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAEA;AAQA;AAeaA,+BAAuB,gBAAGC,gCAAkB,CAAC,eAAe,CAAC;AAE7DD,qBAAa,gBAA4CE,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpG,MAAM;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,OAAO;IAAE,GAAGC;EAAW,CAAE,GAAGN,KAAK;EAEtEA,KAAK,GAAG;IACN;IACAI,KAAK,EAAEF,UAAU;IACjB;IACAG,OAAO,EAAE;MAAED,KAAK;MAAED,QAAQ;MAAE,GAAGE;IAAO,CAAE;IACxC,GAAGC;GACJ;EAED,MAAMC,KAAK,GAAGV,+BAAiB,CAACG,KAAK,EAAEC,GAAG,EAAE;IAAEO,SAAS,EAAEC,mBAAQ;IAAEC,UAAU,EAAEd;EAAuB,CAAE,CAAC;EACzGC,qCAAuB,CAACU,KAAK,CAAC;EAC9B,OAAOV,kCAAoB,CAACU,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFX,qBAAa,CAACe,WAAW,GAAG,eAAe","names":["exports","react_field_1","React","forwardRef","props","ref","fieldLabel","required","label","control","restOfProps","state","component","Checkbox_1","classNames","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CheckboxProps } from '../../Checkbox';\nimport { Checkbox } from '../../Checkbox';\n\nexport type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {\n  /**\n   * The Checkbox's label.\n   */\n  label?: CheckboxProps['label'];\n\n  /**\n   * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.\n   * It is recommended to only set the `label` prop, and not `fieldLabel`.\n   */\n  fieldLabel?: FieldProps<typeof Checkbox>['label'];\n};\n\nexport const checkboxFieldClassNames = getFieldClassNames('CheckboxField');\n\nexport const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {\n  const { fieldLabel, required, label, control, ...restOfProps } = props;\n\n  props = {\n    // Use the fieldLabel prop as the Field's label\n    label: fieldLabel,\n    // Use the label prop as the Checkbox's label\n    control: { label, required, ...control },\n    ...restOfProps,\n  };\n\n  const state = useField_unstable(props, ref, { component: Checkbox, classNames: checkboxFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nCheckboxField.displayName = 'CheckboxField';\n"]}

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

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./CheckboxField"), exports);
 //# sourceMappingURL=index.js.map

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

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

package/lib-commonjs/index.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.checkboxFieldClassNames = exports.CheckboxField_unstable = exports.useCheckbox_unstable = exports.useCheckboxStyles_unstable = exports.renderCheckbox_unstable = exports.checkboxClassNames = exports.Checkbox = void 0;
-
 var Checkbox_1 = /*#__PURE__*/require("./Checkbox");
-
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function () {
@@ -37,9 +35,7 @@ Object.defineProperty(exports, "useCheckbox_unstable", {
     return Checkbox_1.useCheckbox_unstable;
   }
 });
-
 var CheckboxField_1 = /*#__PURE__*/require("./CheckboxField");
-
 Object.defineProperty(exports, "CheckboxField_unstable", {
   enumerable: true,
   get: function () {

package/lib-commonjs/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-checkbox",
-  "version": "9.0.15",
+  "version": "9.0.17",
   "description": "Fluent UI checkbox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,17 +27,17 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
-    "@fluentui/scripts": "^1.0.0"
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
+    "@fluentui/scripts": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "9.0.0-alpha.11",
+    "@fluentui/react-field": "9.0.0-alpha.13",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "^9.0.13",
-    "@fluentui/react-tabster": "^9.3.3",
-    "@fluentui/react-theme": "^9.1.4",
-    "@fluentui/react-utilities": "^9.3.0",
-    "@griffel/react": "^1.4.2",
+    "@fluentui/react-label": "^9.0.15",
+    "@fluentui/react-tabster": "^9.3.5",
+    "@fluentui/react-theme": "^9.1.5",
+    "@fluentui/react-utilities": "^9.3.1",
+    "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {