@fluentui/react-checkbox 9.0.12 → 9.0.14

package/CHANGELOG.json

@@ -2,7 +2,81 @@
   "name": "@fluentui/react-checkbox",
   "entries": [
     {
-      "date": "Fri, 11 Nov 2022 14:53:44 GMT",
+      "date": "Mon, 05 Dec 2022 18:25:37 GMT",
+      "tag": "@fluentui/react-checkbox_v9.0.14",
+      "version": "9.0.14",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.10",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-label to v9.0.12",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-tabster to v9.3.2",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-theme to v9.1.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 17 Nov 2022 23:05:35 GMT",
+      "tag": "@fluentui/react-checkbox_v9.0.13",
+      "version": "9.0.13",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-checkbox",
+            "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
+            "comment": "chore: update package scaffold"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.9",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-label to v9.0.11",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-tabster to v9.3.1",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-checkbox",
+            "comment": "Bump @fluentui/react-utilities to v9.2.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 11 Nov 2022 14:57:57 GMT",
       "tag": "@fluentui/react-checkbox_v9.0.12",
       "version": "9.0.12",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-checkbox
 
-This log was last generated on Fri, 11 Nov 2022 14:53:44 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Dec 2022 18:25:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.14)
+
+Mon, 05 Dec 2022 18:25:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.13..@fluentui/react-checkbox_v9.0.14)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.0.0-alpha.10 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-label to v9.0.12 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-tabster to v9.3.2 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+
+## [9.0.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.13)
+
+Thu, 17 Nov 2022 23:05:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.12..@fluentui/react-checkbox_v9.0.13)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.0.0-alpha.9 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-label to v9.0.11 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-tabster to v9.3.1 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+
 ## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.12)
 
-Fri, 11 Nov 2022 14:53:44 GMT 
+Fri, 11 Nov 2022 14:57:57 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.11..@fluentui/react-checkbox_v9.0.12)
 
 ### Patches

package/lib/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"../src/","sources":["Checkbox.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/Checkbox/index';\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/Checkbox.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/Checkbox/index';\n"]}

package/lib/CheckboxField.js.map

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

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

@@ -1 +1 @@
-{"version":3,"sources":["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,"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/"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './Checkbox';\nexport * from './Checkbox.types';\nexport * from './renderCheckbox';\nexport * from './useCheckbox';\nexport * from './useCheckboxStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-checkbox/src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './Checkbox';\nexport * from './Checkbox.types';\nexport * from './renderCheckbox';\nexport * from './useCheckbox';\nexport * from './useCheckboxStyles';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;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,"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/"}

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

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

package/lib/components/Checkbox/useCheckboxStyles.js

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["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,"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/"}

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

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

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["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,"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/"}

package/lib-amd/Checkbox.js

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

package/lib-amd/Checkbox.js.map

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

package/lib-amd/CheckboxField.js

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

package/lib-amd/CheckboxField.js.map

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

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

@@ -0,0 +1,16 @@
+define(["require", "exports", "react", "./useCheckbox", "./renderCheckbox", "./useCheckboxStyles"], function (require, exports, React, useCheckbox_1, renderCheckbox_1, useCheckboxStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Checkbox = void 0;
+    /**
+     * 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 = React.forwardRef(function (props, ref) {
+        var state = useCheckbox_1.useCheckbox_unstable(props, ref);
+        useCheckboxStyles_1.useCheckboxStyles_unstable(state);
+        return renderCheckbox_1.renderCheckbox_unstable(state);
+    });
+    exports.Checkbox.displayName = 'Checkbox';
+});
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;IAOA;;;OAGG;IACU,QAAA,QAAQ,GAAuC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACtF,IAAM,KAAK,GAAG,kCAAoB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE/C,8CAA0B,CAAC,KAAK,CAAC,CAAC;QAClC,OAAO,wCAAuB,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","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-amd/components/Checkbox/Checkbox.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=Checkbox.types.js.map

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

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

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

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./Checkbox", "./Checkbox.types", "./renderCheckbox", "./useCheckbox", "./useCheckboxStyles"], function (require, exports, tslib_1, Checkbox_1, Checkbox_types_1, renderCheckbox_1, useCheckbox_1, useCheckboxStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Checkbox_1, exports);
+    tslib_1.__exportStar(Checkbox_types_1, exports);
+    tslib_1.__exportStar(renderCheckbox_1, exports);
+    tslib_1.__exportStar(useCheckbox_1, exports);
+    tslib_1.__exportStar(useCheckboxStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-checkbox/src/components/Checkbox/index.ts"],"names":[],"mappings":";;;IAAA,0CAA2B;IAC3B,gDAAiC;IACjC,gDAAiC;IACjC,6CAA8B;IAC9B,mDAAoC","sourcesContent":["export * from './Checkbox';\nexport * from './Checkbox.types';\nexport * from './renderCheckbox';\nexport * from './useCheckbox';\nexport * from './useCheckboxStyles';\n"]}

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

@@ -0,0 +1,15 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderCheckbox_unstable = void 0;
+    var renderCheckbox_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            React.createElement(slots.input, tslib_1.__assign({}, slotProps.input)),
+            state.labelPosition === 'before' && slots.label && React.createElement(slots.label, tslib_1.__assign({}, slotProps.label)),
+            React.createElement(slots.indicator, tslib_1.__assign({}, slotProps.indicator)),
+            state.labelPosition === 'after' && slots.label && React.createElement(slots.label, tslib_1.__assign({}, slotProps.label))));
+    };
+    exports.renderCheckbox_unstable = renderCheckbox_unstable;
+});
+//# sourceMappingURL=renderCheckbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderCheckbox.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-checkbox/src/components/Checkbox/renderCheckbox.tsx"],"names":[],"mappings":";;;;IAIO,IAAM,uBAAuB,GAAG,UAAC,KAAoB;QACpD,IAAA,KAAuB,0BAAQ,CAAgB,KAAK,CAAC,EAAnD,KAAK,WAAA,EAAE,SAAS,eAAmC,CAAC;QAE5D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACnC,KAAK,CAAC,aAAa,KAAK,QAAQ,IAAI,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACxF,oBAAC,KAAK,CAAC,SAAS,uBAAK,SAAS,CAAC,SAAS,EAAI;YAC3C,KAAK,CAAC,aAAa,KAAK,OAAO,IAAI,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI,CAC5E,CACd,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,uBAAuB,2BAWlC","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-amd/components/Checkbox/useCheckbox.js

@@ -0,0 +1,96 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-icons", "@fluentui/react-label", "@fluentui/react-tabster"], function (require, exports, tslib_1, React, react_utilities_1, react_icons_1, react_label_1, react_tabster_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCheckbox_unstable = void 0;
+    /**
+     * Create the state required to render Checkbox.
+     *
+     * The returned state can be modified with hooks such as useCheckboxStyles_unstable,
+     * before being passed to renderCheckbox_unstable.
+     *
+     * @param props - props from this instance of Checkbox
+     * @param ref - reference to `<input>` element of Checkbox
+     */
+    var useCheckbox_unstable = function (props, ref) {
+        var disabled = props.disabled, required = props.required, _a = props.shape, shape = _a === void 0 ? 'square' : _a, _b = props.size, size = _b === void 0 ? 'medium' : _b, _c = props.labelPosition, labelPosition = _c === void 0 ? 'after' : _c, onChange = props.onChange;
+        var _d = react_utilities_1.useControllableState({
+            defaultState: props.defaultChecked,
+            state: props.checked,
+            initialState: false,
+        }), checked = _d[0], setChecked = _d[1];
+        var nativeProps = react_utilities_1.getPartitionedNativeProps({
+            props: props,
+            primarySlotTagName: 'input',
+            excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],
+        });
+        var mixed = checked === 'mixed';
+        var id = react_utilities_1.useId('checkbox-', nativeProps.primary.id);
+        var checkmarkIcon;
+        if (mixed) {
+            if (shape === 'circular') {
+                checkmarkIcon = React.createElement(react_icons_1.CircleFilled, null);
+            }
+            else {
+                checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Square16Filled, null) : React.createElement(react_icons_1.Square12Filled, null);
+            }
+        }
+        else {
+            checkmarkIcon = size === 'large' ? React.createElement(react_icons_1.Checkmark16Filled, null) : React.createElement(react_icons_1.Checkmark12Filled, null);
+        }
+        var state = {
+            shape: shape,
+            checked: checked,
+            size: size,
+            labelPosition: labelPosition,
+            components: {
+                root: 'span',
+                input: 'input',
+                indicator: 'div',
+                label: react_label_1.Label,
+            },
+            root: react_utilities_1.resolveShorthand(props.root, {
+                required: true,
+                defaultProps: tslib_1.__assign({ ref: react_tabster_1.useFocusWithin() }, nativeProps.root),
+            }),
+            input: react_utilities_1.resolveShorthand(props.input, {
+                required: true,
+                defaultProps: tslib_1.__assign({ type: 'checkbox', id: id, ref: ref, checked: checked === true }, nativeProps.primary),
+            }),
+            label: react_utilities_1.resolveShorthand(props.label, {
+                required: false,
+                defaultProps: {
+                    htmlFor: id,
+                    disabled: disabled,
+                    required: required,
+                    size: 'medium', // Even if the checkbox itself is large
+                },
+            }),
+            indicator: react_utilities_1.resolveShorthand(props.indicator, {
+                required: true,
+                defaultProps: {
+                    'aria-hidden': true,
+                    children: checkmarkIcon,
+                },
+            }),
+        };
+        state.input.onChange = react_utilities_1.useEventCallback(function (ev) {
+            var val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;
+            onChange === null || onChange === void 0 ? void 0 : onChange(ev, { checked: val });
+            setChecked(val);
+        });
+        // 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)
+        var 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.
+        // Since indeterminate can only be set via javascript, it has to be done in a layout effect.
+        react_utilities_1.useIsomorphicLayoutEffect(function () {
+            if (inputRef.current) {
+                inputRef.current.indeterminate = mixed;
+            }
+        }, [inputRef, mixed]);
+        return state;
+    };
+    exports.useCheckbox_unstable = useCheckbox_unstable;
+});
+//# sourceMappingURL=useCheckbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCheckbox.js","sourceRoot":"","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"]}