@fluentui/react-switch 9.4.4 → 9.4.6

package/CHANGELOG.md

@@ -1,22 +1,54 @@
 # Change Log - @fluentui/react-switch
 
-This log was last generated on Thu, 21 Aug 2025 12:20:23 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:07:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.4.6)
+
+Thu, 02 Oct 2025 15:07:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.4.5..@fluentui/react-switch_v9.4.6)
+
+### Patches
+
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-field to v9.4.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-label to v9.3.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+
+## [9.4.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.4.5)
+
+Mon, 08 Sep 2025 12:50:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.4.4..@fluentui/react-switch_v9.4.5)
+
+### Patches
+
+- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
+- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
+- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-field to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-label to v9.3.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-tabster to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+
 ## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.4.4)
 
-Thu, 21 Aug 2025 12:20:23 GMT 
+Thu, 21 Aug 2025 12:25:19 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.4.3..@fluentui/react-switch_v9.4.4)
 
 ### Patches
 
-- Bump @fluentui/react-field to v9.4.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-label to v9.3.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-field to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-label to v9.3.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
 
 ## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.4.3)
 

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
@@ -9,7 +10,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 /**
  * Render a Switch component by passing the state defined props to the appropriate slots.
  */
-export declare const renderSwitch_unstable: (state: SwitchState) => JSX.Element;
+export declare const renderSwitch_unstable: (state: SwitchState) => JSXElement;
 
 /**
  * Switches enable users to trigger an option on or off through pressing the component.

package/lib/components/Switch/Switch.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useSwitch_unstable } from './useSwitch';
 import { renderSwitch_unstable } from './renderSwitch';

package/lib/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSwitch_unstable } from './useSwitch';\nimport { renderSwitch_unstable } from './renderSwitch';\nimport { useSwitchStyles_unstable } from './useSwitchStyles.styles';\nimport type { SwitchProps } from './Switch.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Switches enable users to trigger an option on or off through pressing the component.\n */\nexport const Switch: ForwardRefComponent<SwitchProps> = React.forwardRef((props, ref) => {\n  const state = useSwitch_unstable(props, ref);\n\n  useSwitchStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSwitchStyles_unstable')(state);\n\n  return renderSwitch_unstable(state);\n});\n\nSwitch.displayName = 'Switch';\n"],"names":["React","useSwitch_unstable","renderSwitch_unstable","useSwitchStyles_unstable","useCustomStyleHook_unstable","Switch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSwitch_unstable } from './useSwitch';\nimport { renderSwitch_unstable } from './renderSwitch';\nimport { useSwitchStyles_unstable } from './useSwitchStyles.styles';\nimport type { SwitchProps } from './Switch.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Switches enable users to trigger an option on or off through pressing the component.\n */\nexport const Switch: ForwardRefComponent<SwitchProps> = React.forwardRef((props, ref) => {\n  const state = useSwitch_unstable(props, ref);\n\n  useSwitchStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSwitchStyles_unstable')(state);\n\n  return renderSwitch_unstable(state);\n});\n\nSwitch.displayName = 'Switch';\n"],"names":["React","useSwitch_unstable","renderSwitch_unstable","useSwitchStyles_unstable","useCustomStyleHook_unstable","Switch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

package/lib/components/Switch/renderSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/renderSwitch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchState) => {\n  assertSlots<SwitchSlots>(state);\n  const { labelPosition } = state;\n\n  return (\n    <state.root>\n      <state.input />\n      {labelPosition !== 'after' && state.label && <state.label />}\n      <state.indicator />\n      {labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSwitch_unstable","state","labelPosition","root","input","label","indicator"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,qBACE,MAACA,MAAME,IAAI;;0BACT,KAACF,MAAMG,KAAK;YACXF,kBAAkB,WAAWD,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;0BACzD,KAACJ,MAAMK,SAAS;YACfJ,kBAAkB,WAAWD,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAG/D,EAAE"}
+{"version":3,"sources":["../src/components/Switch/renderSwitch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchState): JSXElement => {\n  assertSlots<SwitchSlots>(state);\n  const { labelPosition } = state;\n\n  return (\n    <state.root>\n      <state.input />\n      {labelPosition !== 'after' && state.label && <state.label />}\n      <state.indicator />\n      {labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSwitch_unstable","state","labelPosition","root","input","label","indicator"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,qBACE,MAACA,MAAME,IAAI;;0BACT,KAACF,MAAMG,KAAK;YACXF,kBAAkB,WAAWD,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;0BACzD,KAACJ,MAAMK,SAAS;YACfJ,kBAAkB,WAAWD,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAG/D,EAAE"}

package/lib/components/Switch/useSwitch.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { CircleFilled } from '@fluentui/react-icons';

package/lib/components/Switch/useSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/useSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const id = useId('switch-', nativeProps.primary.id);\n\n  const root = slot.always(props.root, {\n    defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n    elementType: 'div',\n  });\n  const indicator = slot.always(props.indicator, {\n    defaultProps: { 'aria-hidden': true, children: <CircleFilled /> },\n    elementType: 'div',\n  });\n  const input = slot.always(props.input, {\n    defaultProps: { checked, defaultChecked, id, ref, role: 'switch', type: 'checkbox', ...nativeProps.primary },\n    elementType: 'input',\n  });\n  input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n  const label = slot.optional(props.label, {\n    defaultProps: { disabled, htmlFor: id, required, size: 'medium' },\n    elementType: Label,\n  });\n  return {\n    labelPosition, //Slots definition\n    components: { root: 'div', indicator: 'div', input: 'input', label: Label },\n\n    root,\n    indicator,\n    input,\n    label,\n  };\n};\n"],"names":["React","useFieldControlProps_unstable","CircleFilled","Label","useFocusWithin","getPartitionedNativeProps","mergeCallbacks","useId","slot","useSwitch_unstable","props","ref","supportsLabelFor","supportsRequired","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","always","defaultProps","elementType","indicator","children","input","role","type","ev","currentTarget","label","optional","htmlFor","size","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGnG;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQT,8BAA8BS,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGT;IAE3F,MAAMU,cAAcf,0BAA0B;QAC5CK;QACAW,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,KAAKhB,MAAM,WAAWa,YAAYI,OAAO,CAACD,EAAE;IAElD,MAAME,OAAOjB,KAAKkB,MAAM,CAAChB,MAAMe,IAAI,EAAE;QACnCE,cAAc;YAAEhB,KAAKP;YAAkC,GAAGgB,YAAYK,IAAI;QAAC;QAC3EG,aAAa;IACf;IACA,MAAMC,YAAYrB,KAAKkB,MAAM,CAAChB,MAAMmB,SAAS,EAAE;QAC7CF,cAAc;YAAE,eAAe;YAAMG,wBAAU,oBAAC5B;QAAgB;QAChE0B,aAAa;IACf;IACA,MAAMG,QAAQvB,KAAKkB,MAAM,CAAChB,MAAMqB,KAAK,EAAE;QACrCJ,cAAc;YAAEb;YAASC;YAAgBQ;YAAIZ;YAAKqB,MAAM;YAAUC,MAAM;YAAY,GAAGb,YAAYI,OAAO;QAAC;QAC3GI,aAAa;IACf;IACAG,MAAMb,QAAQ,GAAGZ,eAAeyB,MAAMb,QAAQ,EAAEgB,CAAAA,KAAMhB,qBAAAA,+BAAAA,SAAWgB,IAAI;YAAEpB,SAASoB,GAAGC,aAAa,CAACrB,OAAO;QAAC;IACzG,MAAMsB,QAAQ5B,KAAK6B,QAAQ,CAAC3B,MAAM0B,KAAK,EAAE;QACvCT,cAAc;YAAEX;YAAUsB,SAASf;YAAIJ;YAAUoB,MAAM;QAAS;QAChEX,aAAazB;IACf;IACA,OAAO;QACLc;QACAuB,YAAY;YAAEf,MAAM;YAAOI,WAAW;YAAOE,OAAO;YAASK,OAAOjC;QAAM;QAE1EsB;QACAI;QACAE;QACAK;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Switch/useSwitch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const id = useId('switch-', nativeProps.primary.id);\n\n  const root = slot.always(props.root, {\n    defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n    elementType: 'div',\n  });\n  const indicator = slot.always(props.indicator, {\n    defaultProps: { 'aria-hidden': true, children: <CircleFilled /> },\n    elementType: 'div',\n  });\n  const input = slot.always(props.input, {\n    defaultProps: { checked, defaultChecked, id, ref, role: 'switch', type: 'checkbox', ...nativeProps.primary },\n    elementType: 'input',\n  });\n  input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n  const label = slot.optional(props.label, {\n    defaultProps: { disabled, htmlFor: id, required, size: 'medium' },\n    elementType: Label,\n  });\n  return {\n    labelPosition, //Slots definition\n    components: { root: 'div', indicator: 'div', input: 'input', label: Label },\n\n    root,\n    indicator,\n    input,\n    label,\n  };\n};\n"],"names":["React","useFieldControlProps_unstable","CircleFilled","Label","useFocusWithin","getPartitionedNativeProps","mergeCallbacks","useId","slot","useSwitch_unstable","props","ref","supportsLabelFor","supportsRequired","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","always","defaultProps","elementType","indicator","children","input","role","type","ev","currentTarget","label","optional","htmlFor","size","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,yBAAyB,EAAEC,cAAc,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGnG;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQT,8BAA8BS,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGT;IAE3F,MAAMU,cAAcf,0BAA0B;QAC5CK;QACAW,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,KAAKhB,MAAM,WAAWa,YAAYI,OAAO,CAACD,EAAE;IAElD,MAAME,OAAOjB,KAAKkB,MAAM,CAAChB,MAAMe,IAAI,EAAE;QACnCE,cAAc;YAAEhB,KAAKP;YAAkC,GAAGgB,YAAYK,IAAI;QAAC;QAC3EG,aAAa;IACf;IACA,MAAMC,YAAYrB,KAAKkB,MAAM,CAAChB,MAAMmB,SAAS,EAAE;QAC7CF,cAAc;YAAE,eAAe;YAAMG,wBAAU,oBAAC5B;QAAgB;QAChE0B,aAAa;IACf;IACA,MAAMG,QAAQvB,KAAKkB,MAAM,CAAChB,MAAMqB,KAAK,EAAE;QACrCJ,cAAc;YAAEb;YAASC;YAAgBQ;YAAIZ;YAAKqB,MAAM;YAAUC,MAAM;YAAY,GAAGb,YAAYI,OAAO;QAAC;QAC3GI,aAAa;IACf;IACAG,MAAMb,QAAQ,GAAGZ,eAAeyB,MAAMb,QAAQ,EAAEgB,CAAAA,KAAMhB,qBAAAA,+BAAAA,SAAWgB,IAAI;YAAEpB,SAASoB,GAAGC,aAAa,CAACrB,OAAO;QAAC;IACzG,MAAMsB,QAAQ5B,KAAK6B,QAAQ,CAAC3B,MAAM0B,KAAK,EAAE;QACvCT,cAAc;YAAEX;YAAUsB,SAASf;YAAIJ;YAAUoB,MAAM;QAAS;QAChEX,aAAazB;IACf;IACA,OAAO;QACLc;QACAuB,YAAY;YAAEf,MAAM;YAAOI,WAAW;YAAOE,OAAO;YAASK,OAAOjC;QAAM;QAE1EsB;QACAI;QACAE;QACAK;IACF;AACF,EAAE"}

package/lib/components/Switch/useSwitchStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { __resetStyles, __styles, mergeClasses } from '@griffel/react';

package/lib/components/Switch/useSwitchStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className"],"sources":["useSwitchStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n    root: 'fui-Switch',\n    indicator: 'fui-Switch__indicator',\n    input: 'fui-Switch__input',\n    label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */ export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n    alignItems: 'flex-start',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    position: 'relative',\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column'\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    borderRadius: tokens.borderRadiusCircular,\n    border: '1px solid',\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize}px`,\n    height: `${trackHeight}px`,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    pointerEvents: 'none',\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'background, border, color',\n    width: `${trackWidth}px`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    '@media (forced-colors: active)': {\n        color: 'CanvasText',\n        '> i': {\n            forcedColorAdjust: 'none'\n        }\n    },\n    '> *': {\n        transitionDuration: tokens.durationNormal,\n        transitionTimingFunction: tokens.curveEasyEase,\n        transitionProperty: 'transform',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    }\n});\nconst useIndicatorStyles = makeStyles({\n    labelAbove: {\n        marginTop: 0\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    // 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 switch.\n    width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n    // Checked (both enabled and disabled)\n    ':checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            '> *': {\n                transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n            }\n        }\n    },\n    // Disabled (both checked and unchecked)\n    ':disabled': {\n        cursor: 'default',\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            cursor: 'default',\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    // Enabled and unchecked\n    ':enabled:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralStrokeAccessible,\n            borderColor: tokens.colorNeutralStrokeAccessible\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            color: tokens.colorNeutralForeground1\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessibleHover,\n                borderColor: tokens.colorNeutralStrokeAccessibleHover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessiblePressed,\n                borderColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        }\n    },\n    // Enabled and checked\n    ':enabled:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorCompoundBrandBackground,\n            color: tokens.colorNeutralForegroundInverted,\n            borderColor: tokens.colorTransparentStroke\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        }\n    },\n    // Disabled and unchecked\n    ':disabled:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled\n        }\n    },\n    // Disabled and checked\n    ':disabled:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            borderColor: tokens.colorTransparentStrokeDisabled\n        }\n    },\n    '@media (forced-colors: active)': {\n        ':disabled': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: 'GrayText',\n                borderColor: 'GrayText'\n            },\n            [`& ~ .${switchClassNames.label}`]: {\n                color: 'GrayText'\n            }\n        },\n        ':hover': {\n            color: 'CanvasText'\n        },\n        ':hover:active': {\n            color: 'CanvasText'\n        },\n        ':enabled:checked': {\n            ':hover': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: 'Highlight',\n                color: 'Canvas'\n            }\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    before: {\n        right: 0,\n        top: 0\n    },\n    after: {\n        left: 0,\n        top: 0\n    },\n    above: {\n        bottom: 0,\n        height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n        width: '100%'\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        cursor: 'pointer',\n        // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n        // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n        marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n        marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    above: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS,\n        width: '100%'\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    before: {\n        paddingRight: tokens.spacingHorizontalXS\n    }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    const indicatorStyles = useIndicatorStyles();\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    const labelStyles = useLabelStyles();\n    const { label, labelPosition } = state;\n    state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n    state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);\n    state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);\n    if (state.label) {\n        state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className"],"sources":["useSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n    root: 'fui-Switch',\n    indicator: 'fui-Switch__indicator',\n    input: 'fui-Switch__input',\n    label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */ export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n    alignItems: 'flex-start',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    position: 'relative',\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column'\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    borderRadius: tokens.borderRadiusCircular,\n    border: '1px solid',\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize}px`,\n    height: `${trackHeight}px`,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    pointerEvents: 'none',\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'background, border, color',\n    width: `${trackWidth}px`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    '@media (forced-colors: active)': {\n        color: 'CanvasText',\n        '> i': {\n            forcedColorAdjust: 'none'\n        }\n    },\n    '> *': {\n        transitionDuration: tokens.durationNormal,\n        transitionTimingFunction: tokens.curveEasyEase,\n        transitionProperty: 'transform',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    }\n});\nconst useIndicatorStyles = makeStyles({\n    labelAbove: {\n        marginTop: 0\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    // 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 switch.\n    width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n    // Checked (both enabled and disabled)\n    ':checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            '> *': {\n                transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n            }\n        }\n    },\n    // Disabled (both checked and unchecked)\n    ':disabled': {\n        cursor: 'default',\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            cursor: 'default',\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    // Enabled and unchecked\n    ':enabled:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralStrokeAccessible,\n            borderColor: tokens.colorNeutralStrokeAccessible\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            color: tokens.colorNeutralForeground1\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessibleHover,\n                borderColor: tokens.colorNeutralStrokeAccessibleHover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessiblePressed,\n                borderColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        }\n    },\n    // Enabled and checked\n    ':enabled:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorCompoundBrandBackground,\n            color: tokens.colorNeutralForegroundInverted,\n            borderColor: tokens.colorTransparentStroke\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        }\n    },\n    // Disabled and unchecked\n    ':disabled:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled\n        }\n    },\n    // Disabled and checked\n    ':disabled:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            borderColor: tokens.colorTransparentStrokeDisabled\n        }\n    },\n    '@media (forced-colors: active)': {\n        ':disabled': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: 'GrayText',\n                borderColor: 'GrayText'\n            },\n            [`& ~ .${switchClassNames.label}`]: {\n                color: 'GrayText'\n            }\n        },\n        ':hover': {\n            color: 'CanvasText'\n        },\n        ':hover:active': {\n            color: 'CanvasText'\n        },\n        ':enabled:checked': {\n            ':hover': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: 'Highlight',\n                color: 'Canvas'\n            }\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    before: {\n        right: 0,\n        top: 0\n    },\n    after: {\n        left: 0,\n        top: 0\n    },\n    above: {\n        bottom: 0,\n        height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n        width: '100%'\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        cursor: 'pointer',\n        // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n        // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n        marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n        marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    above: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS,\n        width: '100%'\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    before: {\n        paddingRight: tokens.spacingHorizontalXS\n    }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    const indicatorStyles = useIndicatorStyles();\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    const labelStyles = useLabelStyles();\n    const { label, labelPosition } = state;\n    state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n    state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);\n    state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);\n    if (state.label) {\n        state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Switch/useSwitchStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';

package/lib/components/Switch/useSwitchStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/useSwitchStyles.styles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n  root: 'fui-Switch',\n  indicator: 'fui-Switch__indicator',\n  input: 'fui-Switch__input',\n  label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'flex-start',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  position: 'relative',\n\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  borderRadius: tokens.borderRadiusCircular,\n  border: '1px solid',\n  lineHeight: 0,\n  boxSizing: 'border-box',\n  fill: 'currentColor',\n  flexShrink: 0,\n  fontSize: `${thumbSize}px`,\n  height: `${trackHeight}px`,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  pointerEvents: 'none',\n  transitionDuration: tokens.durationNormal,\n  transitionTimingFunction: tokens.curveEasyEase,\n  transitionProperty: 'background, border, color',\n  width: `${trackWidth}px`,\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  '@media (forced-colors: active)': {\n    color: 'CanvasText',\n    '> i': {\n      forcedColorAdjust: 'none',\n    },\n  },\n\n  '> *': {\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'transform',\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  labelAbove: {\n    marginTop: 0,\n  },\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\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 switch.\n  width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n\n  // Checked (both enabled and disabled)\n  ':checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      '> *': {\n        transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n      },\n    },\n  },\n\n  // Disabled (both checked and unchecked)\n  ':disabled': {\n    cursor: 'default',\n\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      cursor: 'default',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Enabled and unchecked\n  ':enabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralStrokeAccessible,\n      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Enabled and checked\n  ':enabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      borderColor: tokens.colorTransparentStroke,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n  },\n\n  // Disabled and unchecked\n  ':disabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n    },\n  },\n\n  // Disabled and checked\n  ':disabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      borderColor: tokens.colorTransparentStrokeDisabled,\n    },\n  },\n\n  '@media (forced-colors: active)': {\n    ':disabled': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: 'GrayText',\n        borderColor: 'GrayText',\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: 'GrayText',\n      },\n    },\n    ':hover': {\n      color: 'CanvasText',\n    },\n    ':hover:active': {\n      color: 'CanvasText',\n    },\n    ':enabled:checked': {\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: 'Highlight',\n        color: 'Canvas',\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n    top: 0,\n  },\n  after: {\n    left: 0,\n    top: 0,\n  },\n  above: {\n    bottom: 0,\n    height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n    width: '100%',\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    cursor: 'pointer',\n\n    // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n    // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n    marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n    marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n  above: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n    width: '100%',\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  const labelStyles = useLabelStyles();\n\n  const { label, labelPosition } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'above' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(\n    switchClassNames.indicator,\n    indicatorBaseClassName,\n    label && labelPosition === 'above' && indicatorStyles.labelAbove,\n    state.indicator.className,\n  );\n\n  state.input.className = mergeClasses(\n    switchClassNames.input,\n    inputBaseClassName,\n    label && inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  if (state.label) {\n    state.label.className = mergeClasses(\n      switchClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","alignItems","boxSizing","display","position","style","selector","useRootStyles","vertical","flexDirection","useIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","lineHeight","fill","flexShrink","fontSize","height","margin","spacingVerticalS","spacingHorizontalS","pointerEvents","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","color","forcedColorAdjust","useIndicatorStyles","labelAbove","marginTop","useInputBaseClassName","cursor","opacity","transform","colorNeutralForegroundDisabled","colorNeutralStrokeAccessible","borderColor","colorNeutralForeground1","colorNeutralStrokeAccessibleHover","colorNeutralStrokeAccessiblePressed","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","colorNeutralStrokeDisabled","colorNeutralBackgroundDisabled","colorTransparentStrokeDisabled","useInputStyles","before","right","top","after","left","above","bottom","useLabelStyles","base","marginBottom","lineHeightBase300","padding","paddingTop","spacingVerticalXS","paddingBottom","paddingLeft","spacingHorizontalXS","paddingRight","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Switch/useSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n  root: 'fui-Switch',\n  indicator: 'fui-Switch__indicator',\n  input: 'fui-Switch__input',\n  label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'flex-start',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  position: 'relative',\n\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  borderRadius: tokens.borderRadiusCircular,\n  border: '1px solid',\n  lineHeight: 0,\n  boxSizing: 'border-box',\n  fill: 'currentColor',\n  flexShrink: 0,\n  fontSize: `${thumbSize}px`,\n  height: `${trackHeight}px`,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  pointerEvents: 'none',\n  transitionDuration: tokens.durationNormal,\n  transitionTimingFunction: tokens.curveEasyEase,\n  transitionProperty: 'background, border, color',\n  width: `${trackWidth}px`,\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  '@media (forced-colors: active)': {\n    color: 'CanvasText',\n    '> i': {\n      forcedColorAdjust: 'none',\n    },\n  },\n\n  '> *': {\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'transform',\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  labelAbove: {\n    marginTop: 0,\n  },\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\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 switch.\n  width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n\n  // Checked (both enabled and disabled)\n  ':checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      '> *': {\n        transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n      },\n    },\n  },\n\n  // Disabled (both checked and unchecked)\n  ':disabled': {\n    cursor: 'default',\n\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      cursor: 'default',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Enabled and unchecked\n  ':enabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralStrokeAccessible,\n      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Enabled and checked\n  ':enabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      borderColor: tokens.colorTransparentStroke,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n  },\n\n  // Disabled and unchecked\n  ':disabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n    },\n  },\n\n  // Disabled and checked\n  ':disabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      borderColor: tokens.colorTransparentStrokeDisabled,\n    },\n  },\n\n  '@media (forced-colors: active)': {\n    ':disabled': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: 'GrayText',\n        borderColor: 'GrayText',\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: 'GrayText',\n      },\n    },\n    ':hover': {\n      color: 'CanvasText',\n    },\n    ':hover:active': {\n      color: 'CanvasText',\n    },\n    ':enabled:checked': {\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: 'Highlight',\n        color: 'Canvas',\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n    top: 0,\n  },\n  after: {\n    left: 0,\n    top: 0,\n  },\n  above: {\n    bottom: 0,\n    height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n    width: '100%',\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    cursor: 'pointer',\n\n    // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n    // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n    marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n    marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n  above: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n    width: '100%',\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  const labelStyles = useLabelStyles();\n\n  const { label, labelPosition } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'above' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(\n    switchClassNames.indicator,\n    indicatorBaseClassName,\n    label && labelPosition === 'above' && indicatorStyles.labelAbove,\n    state.indicator.className,\n  );\n\n  state.input.className = mergeClasses(\n    switchClassNames.input,\n    inputBaseClassName,\n    label && inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  if (state.label) {\n    state.label.className = mergeClasses(\n      switchClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","alignItems","boxSizing","display","position","style","selector","useRootStyles","vertical","flexDirection","useIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","lineHeight","fill","flexShrink","fontSize","height","margin","spacingVerticalS","spacingHorizontalS","pointerEvents","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","color","forcedColorAdjust","useIndicatorStyles","labelAbove","marginTop","useInputBaseClassName","cursor","opacity","transform","colorNeutralForegroundDisabled","colorNeutralStrokeAccessible","borderColor","colorNeutralForeground1","colorNeutralStrokeAccessibleHover","colorNeutralStrokeAccessiblePressed","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","colorNeutralStrokeDisabled","colorNeutralBackgroundDisabled","colorTransparentStrokeDisabled","useInputStyles","before","right","top","after","left","above","bottom","useLabelStyles","base","marginBottom","lineHeightBase300","padding","paddingTop","spacingVerticalXS","paddingBottom","paddingLeft","spacingHorizontalXS","paddingRight","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSwitch_unstable } from './useSwitch';\nimport { renderSwitch_unstable } from './renderSwitch';\nimport { useSwitchStyles_unstable } from './useSwitchStyles.styles';\nimport type { SwitchProps } from './Switch.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Switches enable users to trigger an option on or off through pressing the component.\n */\nexport const Switch: ForwardRefComponent<SwitchProps> = React.forwardRef((props, ref) => {\n  const state = useSwitch_unstable(props, ref);\n\n  useSwitchStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSwitchStyles_unstable')(state);\n\n  return renderSwitch_unstable(state);\n});\n\nSwitch.displayName = 'Switch';\n"],"names":["React","useSwitch_unstable","renderSwitch_unstable","useSwitchStyles_unstable","useCustomStyleHook_unstable","Switch","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;2BACI,cAAc;8BACX,iBAAiB;uCACd,2BAA2B;qCAGxB,kCAAkC;AAKvE,eAAMA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,iCAAAA,EAAmBM,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOP,mCAAAA,EAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSwitch_unstable } from './useSwitch';\nimport { renderSwitch_unstable } from './renderSwitch';\nimport { useSwitchStyles_unstable } from './useSwitchStyles.styles';\nimport type { SwitchProps } from './Switch.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Switches enable users to trigger an option on or off through pressing the component.\n */\nexport const Switch: ForwardRefComponent<SwitchProps> = React.forwardRef((props, ref) => {\n  const state = useSwitch_unstable(props, ref);\n\n  useSwitchStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSwitchStyles_unstable')(state);\n\n  return renderSwitch_unstable(state);\n});\n\nSwitch.displayName = 'Switch';\n"],"names":["React","useSwitch_unstable","renderSwitch_unstable","useSwitchStyles_unstable","useCustomStyleHook_unstable","Switch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2BACI,cAAc;8BACX,iBAAiB;uCACd,2BAA2B;qCAGxB,kCAAkC;AAKvE,MAAMK,SAAAA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQR,6BAAAA,EAAmBM,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOP,mCAAAA,EAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

package/lib-commonjs/components/Switch/renderSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/renderSwitch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchState) => {\n  assertSlots<SwitchSlots>(state);\n  const { labelPosition } = state;\n\n  return (\n    <state.root>\n      <state.input />\n      {labelPosition !== 'after' && state.label && <state.label />}\n      <state.indicator />\n      {labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSwitch_unstable","state","labelPosition","root","input","label","indicator"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IACzB,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;8BACT,eAAA,EAACF,MAAMG,KAAK,EAAA,CAAA;YACXF,kBAAkB,WAAWD,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;8BACzD,eAAA,EAACJ,MAAMK,SAAS,EAAA,CAAA;YACfJ,kBAAkB,WAAWD,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;;;AAG/D,EAAE"}
+{"version":3,"sources":["../src/components/Switch/renderSwitch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchState): JSXElement => {\n  assertSlots<SwitchSlots>(state);\n  const { labelPosition } = state;\n\n  return (\n    <state.root>\n      <state.input />\n      {labelPosition !== 'after' && state.label && <state.label />}\n      <state.indicator />\n      {labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSwitch_unstable","state","labelPosition","root","input","label","indicator"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IACzB,MAAM,EAAEC,aAAa,EAAE,GAAGD;IAE1B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;8BACT,eAAA,EAACF,MAAMG,KAAK,EAAA,CAAA;YACXF,kBAAkB,WAAWD,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;8BACzD,eAAA,EAACJ,MAAMK,SAAS,EAAA,CAAA;YACfJ,kBAAkB,WAAWD,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;;;AAG/D,EAAE"}

package/lib-commonjs/components/Switch/useSwitch.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Switch/useSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/useSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const id = useId('switch-', nativeProps.primary.id);\n\n  const root = slot.always(props.root, {\n    defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n    elementType: 'div',\n  });\n  const indicator = slot.always(props.indicator, {\n    defaultProps: { 'aria-hidden': true, children: <CircleFilled /> },\n    elementType: 'div',\n  });\n  const input = slot.always(props.input, {\n    defaultProps: { checked, defaultChecked, id, ref, role: 'switch', type: 'checkbox', ...nativeProps.primary },\n    elementType: 'input',\n  });\n  input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n  const label = slot.optional(props.label, {\n    defaultProps: { disabled, htmlFor: id, required, size: 'medium' },\n    elementType: Label,\n  });\n  return {\n    labelPosition, //Slots definition\n    components: { root: 'div', indicator: 'div', input: 'input', label: Label },\n\n    root,\n    indicator,\n    input,\n    label,\n  };\n};\n"],"names":["React","useFieldControlProps_unstable","CircleFilled","Label","useFocusWithin","getPartitionedNativeProps","mergeCallbacks","useId","slot","useSwitch_unstable","props","ref","supportsLabelFor","supportsRequired","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","always","defaultProps","elementType","indicator","children","input","role","type","ev","currentTarget","label","optional","htmlFor","size","components"],"mappings":";;;;+BAiBaS;;;;;;;iEAjBU,QAAQ;4BACe,wBAAwB;4BACzC,wBAAwB;4BAC/B,wBAAwB;8BACf,0BAA0B;gCACc,4BAA4B;AAY5F,2BAA2B,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,YAAQT,yCAAAA,EAA8BS,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGT;IAE3F,MAAMU,kBAAcf,yCAAAA,EAA0B;QAC5CK;QACAW,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,SAAKhB,qBAAAA,EAAM,WAAWa,YAAYI,OAAO,CAACD,EAAE;IAElD,MAAME,OAAOjB,oBAAAA,CAAKkB,MAAM,CAAChB,MAAMe,IAAI,EAAE;QACnCE,cAAc;YAAEhB,SAAKP,4BAAAA;YAAkC,GAAGgB,YAAYK,IAAI;QAAC;QAC3EG,aAAa;IACf;IACA,MAAMC,YAAYrB,oBAAAA,CAAKkB,MAAM,CAAChB,MAAMmB,SAAS,EAAE;QAC7CF,cAAc;YAAE,eAAe;YAAMG,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAAC5B,wBAAAA,EAAAA;QAAgB;QAChE0B,aAAa;IACf;IACA,MAAMG,QAAQvB,oBAAAA,CAAKkB,MAAM,CAAChB,MAAMqB,KAAK,EAAE;QACrCJ,cAAc;YAAEb;YAASC;YAAgBQ;YAAIZ;YAAKqB,MAAM;YAAUC,MAAM;YAAY,GAAGb,YAAYI,OAAO;QAAC;QAC3GI,aAAa;IACf;IACAG,MAAMb,QAAQ,OAAGZ,8BAAAA,EAAeyB,MAAMb,QAAQ,EAAEgB,CAAAA,KAAMhB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWgB,IAAI;YAAEpB,SAASoB,GAAGC,aAAa,CAACrB,OAAO;QAAC;IACzG,MAAMsB,QAAQ5B,oBAAAA,CAAK6B,QAAQ,CAAC3B,MAAM0B,KAAK,EAAE;QACvCT,cAAc;YAAEX;YAAUsB,SAASf;YAAIJ;YAAUoB,MAAM;QAAS;QAChEX,aAAazB,iBAAAA;IACf;IACA,OAAO;QACLc;QACAuB,YAAY;YAAEf,MAAM;YAAOI,WAAW;YAAOE,OAAO;YAASK,OAAOjC,iBAAAA;QAAM;QAE1EsB;QACAI;QACAE;QACAK;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Switch/useSwitch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const id = useId('switch-', nativeProps.primary.id);\n\n  const root = slot.always(props.root, {\n    defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n    elementType: 'div',\n  });\n  const indicator = slot.always(props.indicator, {\n    defaultProps: { 'aria-hidden': true, children: <CircleFilled /> },\n    elementType: 'div',\n  });\n  const input = slot.always(props.input, {\n    defaultProps: { checked, defaultChecked, id, ref, role: 'switch', type: 'checkbox', ...nativeProps.primary },\n    elementType: 'input',\n  });\n  input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n  const label = slot.optional(props.label, {\n    defaultProps: { disabled, htmlFor: id, required, size: 'medium' },\n    elementType: Label,\n  });\n  return {\n    labelPosition, //Slots definition\n    components: { root: 'div', indicator: 'div', input: 'input', label: Label },\n\n    root,\n    indicator,\n    input,\n    label,\n  };\n};\n"],"names":["React","useFieldControlProps_unstable","CircleFilled","Label","useFocusWithin","getPartitionedNativeProps","mergeCallbacks","useId","slot","useSwitch_unstable","props","ref","supportsLabelFor","supportsRequired","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","primarySlotTagName","excludedPropNames","id","primary","root","always","defaultProps","elementType","indicator","children","input","role","type","ev","currentTarget","label","optional","htmlFor","size","components"],"mappings":"AAAA;;;;;+BAmBaS;;;;;;;iEAjBU,QAAQ;4BACe,wBAAwB;4BACzC,wBAAwB;4BAC/B,wBAAwB;8BACf,0BAA0B;gCACc,4BAA4B;AAY5F,2BAA2B,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,YAAQT,yCAAAA,EAA8BS,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,gBAAgB,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGT;IAE3F,MAAMU,kBAAcf,yCAAAA,EAA0B;QAC5CK;QACAW,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IAEA,MAAMC,SAAKhB,qBAAAA,EAAM,WAAWa,YAAYI,OAAO,CAACD,EAAE;IAElD,MAAME,OAAOjB,oBAAAA,CAAKkB,MAAM,CAAChB,MAAMe,IAAI,EAAE;QACnCE,cAAc;YAAEhB,SAAKP,4BAAAA;YAAkC,GAAGgB,YAAYK,IAAI;QAAC;QAC3EG,aAAa;IACf;IACA,MAAMC,YAAYrB,oBAAAA,CAAKkB,MAAM,CAAChB,MAAMmB,SAAS,EAAE;QAC7CF,cAAc;YAAE,eAAe;YAAMG,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAAC5B,wBAAAA,EAAAA;QAAgB;QAChE0B,aAAa;IACf;IACA,MAAMG,QAAQvB,oBAAAA,CAAKkB,MAAM,CAAChB,MAAMqB,KAAK,EAAE;QACrCJ,cAAc;YAAEb;YAASC;YAAgBQ;YAAIZ;YAAKqB,MAAM;YAAUC,MAAM;YAAY,GAAGb,YAAYI,OAAO;QAAC;QAC3GI,aAAa;IACf;IACAG,MAAMb,QAAQ,OAAGZ,8BAAAA,EAAeyB,MAAMb,QAAQ,EAAEgB,CAAAA,KAAMhB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWgB,IAAI;YAAEpB,SAASoB,GAAGC,aAAa,CAACrB,OAAO;QAAC;IACzG,MAAMsB,QAAQ5B,oBAAAA,CAAK6B,QAAQ,CAAC3B,MAAM0B,KAAK,EAAE;QACvCT,cAAc;YAAEX;YAAUsB,SAASf;YAAIJ;YAAUoB,MAAM;QAAS;QAChEX,aAAazB,iBAAAA;IACf;IACA,OAAO;QACLc;QACAuB,YAAY;YAAEf,MAAM;YAAOI,WAAW;YAAOE,OAAO;YAASK,OAAOjC,iBAAAA;QAAM;QAE1EsB;QACAI;QACAE;QACAK;IACF;AACF,EAAE"}

package/lib-commonjs/components/Switch/useSwitchStyles.styles.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Switch/useSwitchStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSwitchStyles.styles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n    root: 'fui-Switch',\n    indicator: 'fui-Switch__indicator',\n    input: 'fui-Switch__input',\n    label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */ export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n    alignItems: 'flex-start',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    position: 'relative',\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column'\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    borderRadius: tokens.borderRadiusCircular,\n    border: '1px solid',\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize}px`,\n    height: `${trackHeight}px`,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    pointerEvents: 'none',\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'background, border, color',\n    width: `${trackWidth}px`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    '@media (forced-colors: active)': {\n        color: 'CanvasText',\n        '> i': {\n            forcedColorAdjust: 'none'\n        }\n    },\n    '> *': {\n        transitionDuration: tokens.durationNormal,\n        transitionTimingFunction: tokens.curveEasyEase,\n        transitionProperty: 'transform',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    }\n});\nconst useIndicatorStyles = makeStyles({\n    labelAbove: {\n        marginTop: 0\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    // 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 switch.\n    width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n    // Checked (both enabled and disabled)\n    ':checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            '> *': {\n                transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n            }\n        }\n    },\n    // Disabled (both checked and unchecked)\n    ':disabled': {\n        cursor: 'default',\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            cursor: 'default',\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    // Enabled and unchecked\n    ':enabled:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralStrokeAccessible,\n            borderColor: tokens.colorNeutralStrokeAccessible\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            color: tokens.colorNeutralForeground1\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessibleHover,\n                borderColor: tokens.colorNeutralStrokeAccessibleHover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessiblePressed,\n                borderColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        }\n    },\n    // Enabled and checked\n    ':enabled:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorCompoundBrandBackground,\n            color: tokens.colorNeutralForegroundInverted,\n            borderColor: tokens.colorTransparentStroke\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        }\n    },\n    // Disabled and unchecked\n    ':disabled:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled\n        }\n    },\n    // Disabled and checked\n    ':disabled:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            borderColor: tokens.colorTransparentStrokeDisabled\n        }\n    },\n    '@media (forced-colors: active)': {\n        ':disabled': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: 'GrayText',\n                borderColor: 'GrayText'\n            },\n            [`& ~ .${switchClassNames.label}`]: {\n                color: 'GrayText'\n            }\n        },\n        ':hover': {\n            color: 'CanvasText'\n        },\n        ':hover:active': {\n            color: 'CanvasText'\n        },\n        ':enabled:checked': {\n            ':hover': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: 'Highlight',\n                color: 'Canvas'\n            }\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    before: {\n        right: 0,\n        top: 0\n    },\n    after: {\n        left: 0,\n        top: 0\n    },\n    above: {\n        bottom: 0,\n        height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n        width: '100%'\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        cursor: 'pointer',\n        // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n        // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n        marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n        marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    above: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS,\n        width: '100%'\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    before: {\n        paddingRight: tokens.spacingHorizontalXS\n    }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    const indicatorStyles = useIndicatorStyles();\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    const labelStyles = useLabelStyles();\n    const { label, labelPosition } = state;\n    state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n    state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);\n    state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);\n    if (state.label) {\n        state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n    }\n    return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className"],"mappings":"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"}
+{"version":3,"sources":["useSwitchStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const switchClassNames = {\n    root: 'fui-Switch',\n    indicator: 'fui-Switch__indicator',\n    input: 'fui-Switch__input',\n    label: 'fui-Switch__label'\n};\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */ export const switchClassName = switchClassNames.root;\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\nconst useRootBaseClassName = makeResetStyles({\n    alignItems: 'flex-start',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    position: 'relative',\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column'\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    borderRadius: tokens.borderRadiusCircular,\n    border: '1px solid',\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize}px`,\n    height: `${trackHeight}px`,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    pointerEvents: 'none',\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'background, border, color',\n    width: `${trackWidth}px`,\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms'\n    },\n    '@media (forced-colors: active)': {\n        color: 'CanvasText',\n        '> i': {\n            forcedColorAdjust: 'none'\n        }\n    },\n    '> *': {\n        transitionDuration: tokens.durationNormal,\n        transitionTimingFunction: tokens.curveEasyEase,\n        transitionProperty: 'transform',\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            transitionDuration: '0.01ms'\n        }\n    }\n});\nconst useIndicatorStyles = makeStyles({\n    labelAbove: {\n        marginTop: 0\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    // 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 switch.\n    width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n    // Checked (both enabled and disabled)\n    ':checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            '> *': {\n                transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`\n            }\n        }\n    },\n    // Disabled (both checked and unchecked)\n    ':disabled': {\n        cursor: 'default',\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            cursor: 'default',\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    // Enabled and unchecked\n    ':enabled:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            color: tokens.colorNeutralStrokeAccessible,\n            borderColor: tokens.colorNeutralStrokeAccessible\n        },\n        [`& ~ .${switchClassNames.label}`]: {\n            color: tokens.colorNeutralForeground1\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessibleHover,\n                borderColor: tokens.colorNeutralStrokeAccessibleHover\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: tokens.colorNeutralStrokeAccessiblePressed,\n                borderColor: tokens.colorNeutralStrokeAccessiblePressed\n            }\n        }\n    },\n    // Enabled and checked\n    ':enabled:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorCompoundBrandBackground,\n            color: tokens.colorNeutralForegroundInverted,\n            borderColor: tokens.colorTransparentStroke\n        },\n        ':hover': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        },\n        ':hover:active': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n                borderColor: tokens.colorTransparentStrokeInteractive\n            }\n        }\n    },\n    // Disabled and unchecked\n    ':disabled:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled\n        }\n    },\n    // Disabled and checked\n    ':disabled:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            borderColor: tokens.colorTransparentStrokeDisabled\n        }\n    },\n    '@media (forced-colors: active)': {\n        ':disabled': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                color: 'GrayText',\n                borderColor: 'GrayText'\n            },\n            [`& ~ .${switchClassNames.label}`]: {\n                color: 'GrayText'\n            }\n        },\n        ':hover': {\n            color: 'CanvasText'\n        },\n        ':hover:active': {\n            color: 'CanvasText'\n        },\n        ':enabled:checked': {\n            ':hover': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                [`& ~ .${switchClassNames.indicator}`]: {\n                    backgroundColor: 'Highlight',\n                    color: 'Canvas'\n                }\n            },\n            [`& ~ .${switchClassNames.indicator}`]: {\n                backgroundColor: 'Highlight',\n                color: 'Canvas'\n            }\n        }\n    }\n});\nconst useInputStyles = makeStyles({\n    before: {\n        right: 0,\n        top: 0\n    },\n    after: {\n        left: 0,\n        top: 0\n    },\n    above: {\n        bottom: 0,\n        height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n        width: '100%'\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        cursor: 'pointer',\n        // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n        // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n        marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n        marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    above: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS,\n        width: '100%'\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    before: {\n        paddingRight: tokens.spacingHorizontalXS\n    }\n});\n/**\n * Apply styling to the Switch slots based on the state\n */ export const useSwitchStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    const indicatorStyles = useIndicatorStyles();\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    const labelStyles = useLabelStyles();\n    const { label, labelPosition } = state;\n    state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n    state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);\n    state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);\n    if (state.label) {\n        state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);\n    }\n    return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAYKU,eAAe;;;IARnBL,gBAAgB;;;IAkOZ0C,wBAAwB;;;;uBAnOiB,gBAAgB;AACnE,yBAAyB;IAC5BzC,IAAI,EAAE,YAAY;IAClBC,SAAS,EAAE,uBAAuB;IAClCC,KAAK,EAAE,mBAAmB;IAC1BC,KAAK,EAAE;AACX,CAAC;AAGU,wBAAwBJ,gBAAgB,CAACC,IAAI;AACxD,+CAAA;AACA,MAAMK,yBAAyB,GAAG,CAAC;AACnC,MAAMC,WAAW,GAAG,EAAE;AACtB,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,SAAS,GAAGF,WAAW,GAAGD,yBAAyB;AACzD,MAAMI,oBAAoB,GAAA,WAAA,OAAGb,oBAAA,EAAA,WAAA,WAAA;IAAAc,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAS5B,CAAC;AACF,MAAMC,aAAa,GAAA,WAAA,GAAGf,mBAAA,EAAA;IAAAgB,QAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIrB,CAAC;AACF,MAAMC,yBAAyB,GAAA,WAAA,OAAGpB,oBAAA,EAAA,YAAA,MAAA;IAAAc,CAAA,EAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAgCjC,CAAC;AACF,MAAMM,kBAAkB,GAAA,WAAA,OAAGpB,eAAA,EAAA;IAAAqB,UAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAJ,CAAA,EAAA;QAAA;KAAA;AAAA,CAI1B,CAAC;AACF,MAAMK,qBAAqB,GAAA,WAAA,OAAGxB,oBAAA,EAAA,WAAA,YAAA;IAAAc,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAuH7B,CAAC;AACF,MAAMU,cAAc,GAAA,WAAA,OAAGxB,eAAA,EAAA;IAAAyB,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAF,OAAA,EAAA;IAAA;IAAAG,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAf,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CActB,CAAC;AACF,mGAAA;AACA,MAAMgB,cAAc,GAAA,WAAA,OAAGlC,eAAA,EAAA;IAAAmC,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAf,OAAA,EAAA;QAAAgB,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAZ,KAAA,EAAA;QAAAW,MAAA,EAAA;QAAAH,OAAA,EAAA;QAAAL,MAAA,EAAA;IAAA;IAAAL,KAAA,EAAA;QAAAW,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAd,MAAA,EAAA;QAAAe,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAtB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAyB,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAoBtB,CAAC;AAGS,kCAAkCE,KAAK,IAAG;IACjD,aAAa;IACb,MAAMC,iBAAiB,GAAGlC,oBAAoB,CAAC,CAAC;IAChD,MAAMmC,UAAU,GAAGhC,aAAa,CAAC,CAAC;IAClC,MAAMiC,sBAAsB,GAAG7B,yBAAyB,CAAC,CAAC;IAC1D,MAAM8B,eAAe,GAAG7B,kBAAkB,CAAC,CAAC;IAC5C,MAAM8B,kBAAkB,GAAG3B,qBAAqB,CAAC,CAAC;IAClD,MAAM4B,WAAW,GAAG3B,cAAc,CAAC,CAAC;IACpC,MAAM4B,WAAW,GAAGlB,cAAc,CAAC,CAAC;IACpC,MAAM,EAAE5B,KAAK,EAAE+C,aAAAA,EAAe,GAAGR,KAAK;IACtCA,KAAK,CAAC1C,IAAI,CAACmD,SAAS,OAAGrD,mBAAY,EAACC,gBAAgB,CAACC,IAAI,EAAE2C,iBAAiB,EAAEO,aAAa,KAAK,OAAO,IAAIN,UAAU,CAAC/B,QAAQ,EAAE6B,KAAK,CAAC1C,IAAI,CAACmD,SAAS,CAAC;IACrJT,KAAK,CAACzC,SAAS,CAACkD,SAAS,OAAGrD,mBAAY,EAACC,gBAAgB,CAACE,SAAS,EAAE4C,sBAAsB,EAAE1C,KAAK,IAAI+C,aAAa,KAAK,OAAO,IAAIJ,eAAe,CAAC5B,UAAU,EAAEwB,KAAK,CAACzC,SAAS,CAACkD,SAAS,CAAC;IACzLT,KAAK,CAACxC,KAAK,CAACiD,SAAS,OAAGrD,mBAAY,EAACC,gBAAgB,CAACG,KAAK,EAAE6C,kBAAkB,EAAE5C,KAAK,IAAI6C,WAAW,CAACE,aAAa,CAAC,EAAER,KAAK,CAACxC,KAAK,CAACiD,SAAS,CAAC;IAC5I,IAAIT,KAAK,CAACvC,KAAK,EAAE;QACbuC,KAAK,CAACvC,KAAK,CAACgD,SAAS,OAAGrD,mBAAY,EAACC,gBAAgB,CAACI,KAAK,EAAE8C,WAAW,CAACjB,IAAI,EAAEiB,WAAW,CAACC,aAAa,CAAC,EAAER,KAAK,CAACvC,KAAK,CAACgD,SAAS,CAAC;IACrI;IACA,OAAOT,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/Switch/useSwitchStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Switch/useSwitchStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/useSwitchStyles.styles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n  root: 'fui-Switch',\n  indicator: 'fui-Switch__indicator',\n  input: 'fui-Switch__input',\n  label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'flex-start',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  position: 'relative',\n\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  borderRadius: tokens.borderRadiusCircular,\n  border: '1px solid',\n  lineHeight: 0,\n  boxSizing: 'border-box',\n  fill: 'currentColor',\n  flexShrink: 0,\n  fontSize: `${thumbSize}px`,\n  height: `${trackHeight}px`,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  pointerEvents: 'none',\n  transitionDuration: tokens.durationNormal,\n  transitionTimingFunction: tokens.curveEasyEase,\n  transitionProperty: 'background, border, color',\n  width: `${trackWidth}px`,\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  '@media (forced-colors: active)': {\n    color: 'CanvasText',\n    '> i': {\n      forcedColorAdjust: 'none',\n    },\n  },\n\n  '> *': {\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'transform',\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  labelAbove: {\n    marginTop: 0,\n  },\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\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 switch.\n  width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n\n  // Checked (both enabled and disabled)\n  ':checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      '> *': {\n        transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n      },\n    },\n  },\n\n  // Disabled (both checked and unchecked)\n  ':disabled': {\n    cursor: 'default',\n\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      cursor: 'default',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Enabled and unchecked\n  ':enabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralStrokeAccessible,\n      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Enabled and checked\n  ':enabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      borderColor: tokens.colorTransparentStroke,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n  },\n\n  // Disabled and unchecked\n  ':disabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n    },\n  },\n\n  // Disabled and checked\n  ':disabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      borderColor: tokens.colorTransparentStrokeDisabled,\n    },\n  },\n\n  '@media (forced-colors: active)': {\n    ':disabled': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: 'GrayText',\n        borderColor: 'GrayText',\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: 'GrayText',\n      },\n    },\n    ':hover': {\n      color: 'CanvasText',\n    },\n    ':hover:active': {\n      color: 'CanvasText',\n    },\n    ':enabled:checked': {\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: 'Highlight',\n        color: 'Canvas',\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n    top: 0,\n  },\n  after: {\n    left: 0,\n    top: 0,\n  },\n  above: {\n    bottom: 0,\n    height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n    width: '100%',\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    cursor: 'pointer',\n\n    // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n    // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n    marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n    marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n  above: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n    width: '100%',\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  const labelStyles = useLabelStyles();\n\n  const { label, labelPosition } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'above' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(\n    switchClassNames.indicator,\n    indicatorBaseClassName,\n    label && labelPosition === 'above' && indicatorStyles.labelAbove,\n    state.indicator.className,\n  );\n\n  state.input.className = mergeClasses(\n    switchClassNames.input,\n    inputBaseClassName,\n    label && inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  if (state.label) {\n    state.label.className = mergeClasses(\n      switchClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","alignItems","boxSizing","display","position","style","selector","useRootStyles","vertical","flexDirection","useIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","lineHeight","fill","flexShrink","fontSize","height","margin","spacingVerticalS","spacingHorizontalS","pointerEvents","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","color","forcedColorAdjust","useIndicatorStyles","labelAbove","marginTop","useInputBaseClassName","cursor","opacity","transform","colorNeutralForegroundDisabled","colorNeutralStrokeAccessible","borderColor","colorNeutralForeground1","colorNeutralStrokeAccessibleHover","colorNeutralStrokeAccessiblePressed","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","colorNeutralStrokeDisabled","colorNeutralBackgroundDisabled","colorTransparentStrokeDisabled","useInputStyles","before","right","top","after","left","above","bottom","useLabelStyles","base","marginBottom","lineHeightBase300","padding","paddingTop","spacingVerticalXS","paddingBottom","paddingLeft","spacingHorizontalXS","paddingRight","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Switch/useSwitchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n  root: 'fui-Switch',\n  indicator: 'fui-Switch__indicator',\n  input: 'fui-Switch__input',\n  label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'flex-start',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  position: 'relative',\n\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  borderRadius: tokens.borderRadiusCircular,\n  border: '1px solid',\n  lineHeight: 0,\n  boxSizing: 'border-box',\n  fill: 'currentColor',\n  flexShrink: 0,\n  fontSize: `${thumbSize}px`,\n  height: `${trackHeight}px`,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  pointerEvents: 'none',\n  transitionDuration: tokens.durationNormal,\n  transitionTimingFunction: tokens.curveEasyEase,\n  transitionProperty: 'background, border, color',\n  width: `${trackWidth}px`,\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  '@media (forced-colors: active)': {\n    color: 'CanvasText',\n    '> i': {\n      forcedColorAdjust: 'none',\n    },\n  },\n\n  '> *': {\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'transform',\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  labelAbove: {\n    marginTop: 0,\n  },\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\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 switch.\n  width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n\n  // Checked (both enabled and disabled)\n  ':checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      '> *': {\n        transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n      },\n    },\n  },\n\n  // Disabled (both checked and unchecked)\n  ':disabled': {\n    cursor: 'default',\n\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      cursor: 'default',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Enabled and unchecked\n  ':enabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralStrokeAccessible,\n      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Enabled and checked\n  ':enabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      borderColor: tokens.colorTransparentStroke,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n  },\n\n  // Disabled and unchecked\n  ':disabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n    },\n  },\n\n  // Disabled and checked\n  ':disabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      borderColor: tokens.colorTransparentStrokeDisabled,\n    },\n  },\n\n  '@media (forced-colors: active)': {\n    ':disabled': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: 'GrayText',\n        borderColor: 'GrayText',\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: 'GrayText',\n      },\n    },\n    ':hover': {\n      color: 'CanvasText',\n    },\n    ':hover:active': {\n      color: 'CanvasText',\n    },\n    ':enabled:checked': {\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: 'Highlight',\n          color: 'Canvas',\n        },\n      },\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: 'Highlight',\n        color: 'Canvas',\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n    top: 0,\n  },\n  after: {\n    left: 0,\n    top: 0,\n  },\n  above: {\n    bottom: 0,\n    height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n    width: '100%',\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    cursor: 'pointer',\n\n    // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n    // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n    marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n    marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n  above: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n    width: '100%',\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  const labelStyles = useLabelStyles();\n\n  const { label, labelPosition } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'above' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(\n    switchClassNames.indicator,\n    indicatorBaseClassName,\n    label && labelPosition === 'above' && indicatorStyles.labelAbove,\n    state.indicator.className,\n  );\n\n  state.input.className = mergeClasses(\n    switchClassNames.input,\n    inputBaseClassName,\n    label && inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  if (state.label) {\n    state.label.className = mergeClasses(\n      switchClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","makeResetStyles","makeStyles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","alignItems","boxSizing","display","position","style","selector","useRootStyles","vertical","flexDirection","useIndicatorBaseClassName","borderRadius","borderRadiusCircular","border","lineHeight","fill","flexShrink","fontSize","height","margin","spacingVerticalS","spacingHorizontalS","pointerEvents","transitionDuration","durationNormal","transitionTimingFunction","curveEasyEase","transitionProperty","width","color","forcedColorAdjust","useIndicatorStyles","labelAbove","marginTop","useInputBaseClassName","cursor","opacity","transform","colorNeutralForegroundDisabled","colorNeutralStrokeAccessible","borderColor","colorNeutralForeground1","colorNeutralStrokeAccessibleHover","colorNeutralStrokeAccessiblePressed","backgroundColor","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorTransparentStroke","colorCompoundBrandBackgroundHover","colorTransparentStrokeInteractive","colorCompoundBrandBackgroundPressed","colorNeutralStrokeDisabled","colorNeutralBackgroundDisabled","colorTransparentStrokeDisabled","useInputStyles","before","right","top","after","left","above","bottom","useLabelStyles","base","marginBottom","lineHeightBase300","padding","paddingTop","spacingVerticalXS","paddingBottom","paddingLeft","spacingHorizontalXS","paddingRight","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-switch",
-  "version": "9.4.4",
+  "version": "9.4.6",
   "description": "Fluent UI React Switch component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,22 +18,22 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.4.4",
+    "@fluentui/react-field": "^9.4.6",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.1.6",
-    "@fluentui/react-label": "^9.3.4",
-    "@fluentui/react-shared-contexts": "^9.25.0",
-    "@fluentui/react-tabster": "^9.26.4",
+    "@fluentui/react-jsx-runtime": "^9.2.1",
+    "@fluentui/react-label": "^9.3.6",
+    "@fluentui/react-shared-contexts": "^9.25.2",
+    "@fluentui/react-tabster": "^9.26.6",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.24.0",
+    "@fluentui/react-utilities": "^9.25.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.9.0 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.14.0 <19.0.0"
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [