@fluentui/react-switch 9.7.4 → 9.7.5

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @fluentui/react-switch
 
-This log was last generated on Wed, 24 Jun 2026 11:03:46 GMT and should not be manually modified.
+<!-- This log was last generated on Tue, 11 Aug 2026 17:16:02 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## [9.7.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.7.5)
+
+Tue, 11 Aug 2026 17:16:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.7.4..@fluentui/react-switch_v9.7.5)
+
+### Patches
+
+- Ship ESM-first (type:module): valid ESM under lib/, CommonJS under lib-commonjs/*.cjs, and drop the `node` export condition - bare-Node `import` resolves ESM, `require` resolves CJS; node-targeted bundlers tree-shake. ([PR #36327](https://github.com/microsoft/fluentui/pull/36327) by martinhochel@microsoft.com)
+- Bump @fluentui/react-field to v9.5.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-label to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.3 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.17 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.2.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
 ## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.7.4)
 
-Wed, 24 Jun 2026 11:03:46 GMT 
+Wed, 24 Jun 2026 11:09:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.7.3..@fluentui/react-switch_v9.7.4)
 
 ### Patches

package/dist/index.d.cts

@@ -0,0 +1,139 @@
+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 type { Label } from '@fluentui/react-label';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+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: SwitchBaseState) => JSXElement;
+
+/**
+ * Switches enable users to trigger an option on or off through pressing the component.
+ */
+export declare const Switch: ForwardRefComponent<SwitchProps>;
+
+/**
+ * Switch base props, excluding design-related props like size
+ */
+export declare type SwitchBaseProps = Omit<SwitchProps, 'size'>;
+
+/**
+ * Switch base state, excluding design-related state like size
+ */
+export declare type SwitchBaseState = Omit<SwitchState, 'size'>;
+
+/**
+ * @deprecated Use `switchClassNames.root` instead.
+ */
+export declare const switchClassName: string;
+
+export declare const switchClassNames: SlotClassNames<SwitchSlots>;
+
+export declare type SwitchOnChangeData = {
+    checked: boolean;
+};
+
+/**
+ * Switch Props
+ */
+export declare type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'checked' | 'defaultChecked' | 'onChange' | 'size'> & {
+    /**
+     * Defines the controlled checked state of the Switch.
+     * If passed, Switch ignores the `defaultChecked` property.
+     * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the
+     * correct value based on handling `onChange` events and re-rendering.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * When set, allows the Switch to be focusable even when it has been disabled. This is used in scenarios where it is
+     * important to keep a consistent tab order for screen reader and keyboard users.
+     *
+     * @default false
+     */
+    disabledFocusable?: boolean;
+    /**
+     * Defines whether the Switch is initially in a checked state or not when rendered.
+     *
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * The position of the label relative to the Switch.
+     *
+     * @default after
+     */
+    labelPosition?: 'above' | 'after' | 'before';
+    /**
+     * The size of the Switch.
+     *
+     *  @default 'medium'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Callback to be called when the checked state value changes.
+     */
+    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void;
+};
+
+export declare type SwitchSlots = {
+    /**
+     * The root element of the Switch.
+     *
+     * The root slot receives the `className` and `style` specified directly on the `<Switch>` tag.
+     * All other native props will be applied to the primary slot: `input`.
+     */
+    root: NonNullable<Slot<'div'>>;
+    /**
+     * The track and the thumb sliding over it indicating the on and off status of the Switch.
+     */
+    indicator: NonNullable<Slot<'div'>>;
+    /**
+     * Hidden input that handles the Switch's functionality.
+     *
+     * This is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this
+     * slot, except `className` and `style`, which remain on the root slot.
+     */
+    input: NonNullable<Slot<'input'>>;
+    /**
+     * The Switch's label.
+     */
+    label?: Slot<typeof Label>;
+};
+
+/**
+ * State used in rendering Switch
+ */
+export declare type SwitchState = ComponentState<SwitchSlots> & Required<Pick<SwitchProps, 'disabledFocusable' | 'labelPosition' | 'size'>>;
+
+/**
+ * Create the state required to render Switch.
+ *
+ * The returned state can be modified with hooks such as useSwitchStyles_unstable,
+ * before being passed to renderSwitch_unstable.
+ *
+ * @param props - props from this instance of Switch
+ * @param ref - reference to `<input>` element of Switch
+ */
+export declare const useSwitch_unstable: (props: SwitchProps, ref: React_2.Ref<HTMLInputElement>) => SwitchState;
+
+/**
+ * Base hook for Switch component, manages state and structure common to all variants of Switch
+ *
+ * @param props - base props from this instance of Switch
+ * @param ref - reference to `<input>` element of Switch
+ */
+export declare const useSwitchBase_unstable: (props: SwitchBaseProps, ref?: React_2.Ref<HTMLInputElement>) => SwitchBaseState;
+
+/**
+ * Apply styling to the Switch slots based on the state
+ */
+export declare const useSwitchStyles_unstable: (state: SwitchState) => SwitchState;
+
+export { }

package/lib/Switch.js

@@ -1,2 +1,2 @@
 export { Switch, renderSwitch_unstable, // eslint-disable-next-line @typescript-eslint/no-deprecated
-switchClassName, switchClassNames, useSwitchStyles_unstable, useSwitch_unstable, useSwitchBase_unstable } from './components/Switch/index';
+switchClassName, switchClassNames, useSwitchStyles_unstable, useSwitch_unstable, useSwitchBase_unstable } from "./components/Switch/index.js";

package/lib/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Switch.ts"],"sourcesContent":["export type {\n  SwitchBaseProps,\n  SwitchBaseState,\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n} from './components/Switch/index';\nexport {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n  useSwitchBase_unstable,\n} from './components/Switch/index';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","useSwitchBase_unstable"],"mappings":"AAQA,SACEA,MAAM,EACNC,qBAAqB,EACrB,4DAA4D;AAC5DC,eAAe,EACfC,gBAAgB,EAChBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,4BAA4B"}
+{"version":3,"sources":["../src/Switch.ts"],"sourcesContent":["export type {\n  SwitchBaseProps,\n  SwitchBaseState,\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n} from './components/Switch/index';\nexport {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n  useSwitchBase_unstable,\n} from './components/Switch/index';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","useSwitchBase_unstable"],"mappings":"AAQA,SACEA,MAAM,EACNC,qBAAqB,EACrB,4DAA4D;AAC5DC,eAAe,EACfC,gBAAgB,EAChBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,+BAA4B"}

package/lib/components/Switch/Switch.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useSwitch_unstable } from './useSwitch';
-import { renderSwitch_unstable } from './renderSwitch';
-import { useSwitchStyles_unstable } from './useSwitchStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useSwitch_unstable } from "./useSwitch.js";
+import { renderSwitch_unstable } from "./renderSwitch.js";
+import { useSwitchStyles_unstable } from "./useSwitchStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * Switches enable users to trigger an option on or off through pressing the component.
  */ export const Switch = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

@@ -1 +1 @@
-{"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"}
+{"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,iBAAc;AACjD,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,wBAAwB,QAAQ,8BAA2B;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/index.js

@@ -1,5 +1,5 @@
-export { Switch } from './Switch';
-export { renderSwitch_unstable } from './renderSwitch';
-export { useSwitch_unstable, useSwitchBase_unstable } from './useSwitch';
+export { Switch } from "./Switch.js";
+export { renderSwitch_unstable } from "./renderSwitch.js";
+export { useSwitch_unstable, useSwitchBase_unstable } from "./useSwitch.js";
 export { // eslint-disable-next-line @typescript-eslint/no-deprecated
-switchClassName, switchClassNames, useSwitchStyles_unstable } from './useSwitchStyles.styles';
+switchClassName, switchClassNames, useSwitchStyles_unstable } from "./useSwitchStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/index.ts"],"sourcesContent":["export { Switch } from './Switch';\nexport type {\n  SwitchBaseProps,\n  SwitchBaseState,\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n} from './Switch.types';\nexport { renderSwitch_unstable } from './renderSwitch';\nexport { useSwitch_unstable, useSwitchBase_unstable } from './useSwitch';\nexport {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n} from './useSwitchStyles.styles';\n"],"names":["Switch","renderSwitch_unstable","useSwitch_unstable","useSwitchBase_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AASlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,cAAc;AACzE,SACE,4DAA4D;AAC5DC,eAAe,EACfC,gBAAgB,EAChBC,wBAAwB,QACnB,2BAA2B"}
+{"version":3,"sources":["../src/components/Switch/index.ts"],"sourcesContent":["export { Switch } from './Switch';\nexport type {\n  SwitchBaseProps,\n  SwitchBaseState,\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n} from './Switch.types';\nexport { renderSwitch_unstable } from './renderSwitch';\nexport { useSwitch_unstable, useSwitchBase_unstable } from './useSwitch';\nexport {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n} from './useSwitchStyles.styles';\n"],"names":["Switch","renderSwitch_unstable","useSwitch_unstable","useSwitchBase_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAW;AASlC,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,iBAAc;AACzE,SACE,4DAA4D;AAC5DC,eAAe,EACfC,gBAAgB,EAChBC,wBAAwB,QACnB,8BAA2B"}

package/lib/components/Switch/renderSwitch.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render a Switch component by passing the state defined props to the appropriate slots.
  */ export const renderSwitch_unstable = (state)=>{

package/lib/components/Switch/useSwitch.js

@@ -1,10 +1,10 @@
 'use client';
-import * as React from 'react';
-import { useFieldControlProps_unstable } from '@fluentui/react-field';
-import { CircleFilled } from '@fluentui/react-icons';
-import { Label } from '@fluentui/react-label';
-import { useFocusWithin } from '@fluentui/react-tabster';
-import { getPartitionedNativeProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
+import * as React from "react";
+import { useFieldControlProps_unstable } from "@fluentui/react-field";
+import { CircleFilled } from "@fluentui/react-icons";
+import { Label } from "@fluentui/react-label";
+import { useFocusWithin } from "@fluentui/react-tabster";
+import { getPartitionedNativeProps, mergeCallbacks, useId, slot } from "@fluentui/react-utilities";
 /**
  * Create the state required to render Switch.
  *

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { createFocusOutlineStyle } from '@fluentui/react-tabster';
-import { tokens } from '@fluentui/react-theme';
-import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { createFocusOutlineStyle } from "@fluentui/react-tabster";
+import { tokens } from "@fluentui/react-theme";
+import { __resetStyles, __styles, mergeClasses } from "@griffel/react";
 export const switchClassNames = {
   root: 'fui-Switch',
   indicator: 'fui-Switch__indicator',

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","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","sizeSmall","Be2twd7","Bqenvij","a9b677","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","oedwrj","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bg96gwp","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","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;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - 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: `${thumbSizeMedium}px`,\n    height: `${trackHeightMedium}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: `${trackWidthMedium}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    sizeSmall: {\n        fontSize: `${thumbSizeSmall}px`,\n        height: `${trackHeightSmall}px`,\n        width: `${trackWidthSmall}px`\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(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n    // Checked (both enabled and disabled)\n    ':checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            '> *': {\n                transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`\n            }\n        }\n    },\n    // Disabled (both checked and unchecked)\n    ':disabled, &[aria-disabled=\"true\"]': {\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):not([aria-disabled=\"true\"])': {\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:not([aria-disabled=\"true\"])': {\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), &[aria-disabled=\"true\"]:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled\n        }\n    },\n    // Disabled and checked\n    ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            borderColor: tokens.colorTransparentStrokeDisabled\n        }\n    },\n    '@media (forced-colors: active)': {\n        ':disabled, &[aria-disabled=\"true\"]': {\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:not([aria-disabled=\"true\"])': {\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(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n        width: '100%'\n    },\n    sizeSmall: {\n        width: `calc(${trackWidthSmall}px + 2 * ${tokens.spacingHorizontalS})`,\n        ':checked': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                '> *': {\n                    transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`\n                }\n            }\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        // 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((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    sizeSmall: {\n        fontSize: tokens.fontSizeBase200,\n        lineHeight: tokens.lineHeightBase200,\n        marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n        marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`\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    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, size } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, 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","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","sizeSmall","Be2twd7","Bqenvij","a9b677","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","oedwrj","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bg96gwp","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","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;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - 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: `${thumbSizeMedium}px`,\n    height: `${trackHeightMedium}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: `${trackWidthMedium}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    sizeSmall: {\n        fontSize: `${thumbSizeSmall}px`,\n        height: `${trackHeightSmall}px`,\n        width: `${trackWidthSmall}px`\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(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n    // Checked (both enabled and disabled)\n    ':checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            '> *': {\n                transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`\n            }\n        }\n    },\n    // Disabled (both checked and unchecked)\n    ':disabled, &[aria-disabled=\"true\"]': {\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):not([aria-disabled=\"true\"])': {\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:not([aria-disabled=\"true\"])': {\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), &[aria-disabled=\"true\"]:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled\n        }\n    },\n    // Disabled and checked\n    ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            borderColor: tokens.colorTransparentStrokeDisabled\n        }\n    },\n    '@media (forced-colors: active)': {\n        ':disabled, &[aria-disabled=\"true\"]': {\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:not([aria-disabled=\"true\"])': {\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(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n        width: '100%'\n    },\n    sizeSmall: {\n        width: `calc(${trackWidthSmall}px + 2 * ${tokens.spacingHorizontalS})`,\n        ':checked': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                '> *': {\n                    transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`\n                }\n            }\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        // 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((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    sizeSmall: {\n        fontSize: tokens.fontSizeBase200,\n        lineHeight: tokens.lineHeightBase200,\n        marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n        marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`\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    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, size } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 'use client';
-import { createFocusOutlineStyle } from '@fluentui/react-tabster';
-import { tokens } from '@fluentui/react-theme';
-import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { createFocusOutlineStyle } from "@fluentui/react-tabster";
+import { tokens } from "@fluentui/react-theme";
+import { makeResetStyles, makeStyles, mergeClasses } from "@griffel/react";
 export const switchClassNames = {
     root: 'fui-Switch',
     indicator: 'fui-Switch__indicator',

package/lib/index.js

@@ -1,2 +1,2 @@
 export { Switch, renderSwitch_unstable, // eslint-disable-next-line @typescript-eslint/no-deprecated
-switchClassName, switchClassNames, useSwitchStyles_unstable, useSwitch_unstable, useSwitchBase_unstable } from './Switch';
+switchClassName, switchClassNames, useSwitchStyles_unstable, useSwitch_unstable, useSwitchBase_unstable } from "./Switch.js";

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n  useSwitchBase_unstable,\n} from './Switch';\nexport type {\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n  SwitchBaseProps,\n  SwitchBaseState,\n} from './Switch';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","useSwitchBase_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,qBAAqB,EACrB,4DAA4D;AAC5DC,eAAe,EACfC,gBAAgB,EAChBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,WAAW"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n  useSwitchBase_unstable,\n} from './Switch';\nexport type {\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n  SwitchBaseProps,\n  SwitchBaseState,\n} from './Switch';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","useSwitchBase_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,qBAAqB,EACrB,4DAA4D;AAC5DC,eAAe,EACfC,gBAAgB,EAChBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,cAAW"}

package/lib-commonjs/{Switch.js → Switch.cjs}

@@ -31,4 +31,4 @@ _export(exports, {
         return _index.useSwitch_unstable;
     }
 });
-const _index = require("./components/Switch/index");
+const _index = require("./components/Switch/index.cjs");

package/lib-commonjs/{Switch.js.map → Switch.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/Switch.ts"],"sourcesContent":["export type {\n  SwitchBaseProps,\n  SwitchBaseState,\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n} from './components/Switch/index';\nexport {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n  useSwitchBase_unstable,\n} from './components/Switch/index';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","useSwitchBase_unstable"],"mappings":";;;;;;;;;;;;eASEA,aAAM;;;eACNC,4BAAqB,EACrB,4DAA4D;;;eAC5DC,sBAAe;;;eACfC,uBAAgB;;;eAGhBG,6BAAsB;;;eAFtBF,+BAAwB;;;eACxBC,yBAAkB;;;uBAEb,4BAA4B"}
+{"version":3,"sources":["../src/Switch.ts"],"sourcesContent":["export type {\n  SwitchBaseProps,\n  SwitchBaseState,\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n} from './components/Switch/index';\nexport {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n  useSwitchBase_unstable,\n} from './components/Switch/index';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","useSwitchBase_unstable"],"mappings":";;;;;;;;;;;;eASEA,aAAM;;;eACNC,4BAAqB,EACrB,4DAA4D;;;eAC5DC,sBAAe;;;eACfC,uBAAgB;;;eAGhBG,6BAAsB;;;eAFtBF,+BAAwB;;;eACxBC,yBAAkB;;;uBAEb,+BAA4B"}

package/lib-commonjs/components/Switch/{Switch.js → Switch.cjs}

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "Switch", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useSwitch = require("./useSwitch");
-const _renderSwitch = require("./renderSwitch");
-const _useSwitchStylesstyles = require("./useSwitchStyles.styles");
+const _useSwitch = require("./useSwitch.cjs");
+const _renderSwitch = require("./renderSwitch.cjs");
+const _useSwitchStylesstyles = require("./useSwitchStyles.styles.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const Switch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useSwitch.useSwitch_unstable)(props, ref);

package/lib-commonjs/components/Switch/{Switch.js.map → Switch.cjs.map}

@@ -1 +1 @@
-{"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"}
+{"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,iBAAc;8BACX,oBAAiB;uCACd,8BAA2B;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/{index.js → index.cjs}

@@ -31,7 +31,7 @@ _export(exports, {
         return _useSwitch.useSwitch_unstable;
     }
 });
-const _Switch = require("./Switch");
-const _renderSwitch = require("./renderSwitch");
-const _useSwitch = require("./useSwitch");
-const _useSwitchStylesstyles = require("./useSwitchStyles.styles");
+const _Switch = require("./Switch.cjs");
+const _renderSwitch = require("./renderSwitch.cjs");
+const _useSwitch = require("./useSwitch.cjs");
+const _useSwitchStylesstyles = require("./useSwitchStyles.styles.cjs");

package/lib-commonjs/components/Switch/{index.js.map → index.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Switch/index.ts"],"sourcesContent":["export { Switch } from './Switch';\nexport type {\n  SwitchBaseProps,\n  SwitchBaseState,\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n} from './Switch.types';\nexport { renderSwitch_unstable } from './renderSwitch';\nexport { useSwitch_unstable, useSwitchBase_unstable } from './useSwitch';\nexport {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n} from './useSwitchStyles.styles';\n"],"names":["Switch","renderSwitch_unstable","useSwitch_unstable","useSwitchBase_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eASNC,mCAAqB;;;eAI5BG,sCAAe;;;eACfC,uCAAgB;;;eAJWF,iCAAsB;;;eAKjDG,+CAAwB;;;eALjBJ,6BAAkB;;;wBAVJ,WAAW;8BASI,iBAAiB;2BACI,cAAc;uCAMlE,2BAA2B"}
+{"version":3,"sources":["../src/components/Switch/index.ts"],"sourcesContent":["export { Switch } from './Switch';\nexport type {\n  SwitchBaseProps,\n  SwitchBaseState,\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n} from './Switch.types';\nexport { renderSwitch_unstable } from './renderSwitch';\nexport { useSwitch_unstable, useSwitchBase_unstable } from './useSwitch';\nexport {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n} from './useSwitchStyles.styles';\n"],"names":["Switch","renderSwitch_unstable","useSwitch_unstable","useSwitchBase_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eASNC,mCAAqB;;;eAI5BG,sCAAe;;;eACfC,uCAAgB;;;eAJWF,iCAAsB;;;eAKjDG,+CAAwB;;;eALjBJ,6BAAkB;;;wBAVJ,cAAW;8BASI,oBAAiB;2BACI,iBAAc;uCAMlE,8BAA2B"}

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

@@ -0,0 +1 @@
+{"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;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - 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: `${thumbSizeMedium}px`,\n    height: `${trackHeightMedium}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: `${trackWidthMedium}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    sizeSmall: {\n        fontSize: `${thumbSizeSmall}px`,\n        height: `${trackHeightSmall}px`,\n        width: `${trackWidthSmall}px`\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(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n    // Checked (both enabled and disabled)\n    ':checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            '> *': {\n                transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`\n            }\n        }\n    },\n    // Disabled (both checked and unchecked)\n    ':disabled, &[aria-disabled=\"true\"]': {\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):not([aria-disabled=\"true\"])': {\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:not([aria-disabled=\"true\"])': {\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), &[aria-disabled=\"true\"]:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled\n        }\n    },\n    // Disabled and checked\n    ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            borderColor: tokens.colorTransparentStrokeDisabled\n        }\n    },\n    '@media (forced-colors: active)': {\n        ':disabled, &[aria-disabled=\"true\"]': {\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:not([aria-disabled=\"true\"])': {\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(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n        width: '100%'\n    },\n    sizeSmall: {\n        width: `calc(${trackWidthSmall}px + 2 * ${tokens.spacingHorizontalS})`,\n        ':checked': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                '> *': {\n                    transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`\n                }\n            }\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        // 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((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    sizeSmall: {\n        fontSize: tokens.fontSizeBase200,\n        lineHeight: tokens.lineHeightBase200,\n        marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n        marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`\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    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, size } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);\n    }\n    return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","sizeSmall","Be2twd7","Bqenvij","a9b677","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","oedwrj","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bg96gwp","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAYKU,eAAe;;;IARnBL,gBAAgB;;;IA4PZiD,wBAAwB;;;;uBA7PiB,gBAAgB;AACnE,yBAAyB;IAC5BhD,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,yBAAA;AACA,MAAMC,iBAAiB,GAAG,EAAE;AAC5B,MAAMC,gBAAgB,GAAG,EAAE;AAC3B,MAAMC,eAAe,GAAGF,iBAAiB,GAAGD,yBAAyB;AACrE,6CAAA;AACA,MAAMI,gBAAgB,GAAG,EAAE;AAC3B,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,cAAc,GAAGF,gBAAgB,GAAGJ,yBAAyB;AACnE,MAAMO,oBAAoB,GAAA,WAAA,OAAGhB,oBAAA,EAAA,WAAA,WAAA;IAAAiB,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,OAAGlB,eAAA,EAAA;IAAAmB,QAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIrB,CAAC;AACF,MAAMC,yBAAyB,GAAA,WAAA,OAAGvB,oBAAA,EAAA,YAAA,MAAA;IAAAiB,CAAA,EAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAgCjC,CAAC;AACF,MAAMM,kBAAkB,GAAA,WAAA,OAAGvB,eAAA,EAAA;IAAAwB,UAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,SAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAR,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAS1B,CAAC;AACF,MAAMS,qBAAqB,GAAA,WAAA,OAAG/B,oBAAA,EAAA,YAAA,WAAA;IAAAiB,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,MAAMc,cAAc,GAAA,WAAA,OAAG/B,eAAA,EAAA;IAAAgC,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;QAAAV,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAH,SAAA,EAAA;QAAAG,MAAA,EAAA;QAAAU,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAlB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAwBtB,CAAC;AACF,mGAAA;AACA,MAAMmB,cAAc,GAAA,WAAA,OAAGxC,eAAA,EAAA;IAAAyC,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAlB,OAAA,EAAA;QAAAmB,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAtB,SAAA,EAAA;QAAAC,OAAA,EAAA;QAAAsB,OAAA,EAAA;QAAAN,MAAA,EAAA;QAAAlB,OAAA,EAAA;IAAA;IAAAY,KAAA,EAAA;QAAAU,MAAA,EAAA;QAAAH,OAAA,EAAA;QAAAf,MAAA,EAAA;IAAA;IAAAM,KAAA,EAAA;QAAAU,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAb,MAAA,EAAA;QAAAc,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAzB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAA6B,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA0BtB,CAAC;AAGS,kCAAkCE,KAAK,IAAG;IACjD,MAAMC,iBAAiB,GAAGtC,oBAAoB,CAAC,CAAC;IAChD,MAAMuC,UAAU,GAAGpC,aAAa,CAAC,CAAC;IAClC,MAAMqC,sBAAsB,GAAGjC,yBAAyB,CAAC,CAAC;IAC1D,MAAMkC,eAAe,GAAGjC,kBAAkB,CAAC,CAAC;IAC5C,MAAMkC,kBAAkB,GAAG3B,qBAAqB,CAAC,CAAC;IAClD,MAAM4B,WAAW,GAAG3B,cAAc,CAAC,CAAC;IACpC,MAAM4B,WAAW,GAAGnB,cAAc,CAAC,CAAC;IACpC,MAAM,EAAElC,KAAK,EAAEsD,aAAa,EAAEC,IAAAA,EAAM,GAAGT,KAAK;IAC5C,oDAAA;IACAA,KAAK,CAACjD,IAAI,CAAC2D,SAAS,OAAG7D,mBAAY,EAACC,gBAAgB,CAACC,IAAI,EAAEkD,iBAAiB,EAAEO,aAAa,KAAK,OAAO,IAAIN,UAAU,CAACnC,QAAQ,EAAEiC,KAAK,CAACjD,IAAI,CAAC2D,SAAS,CAAC;IACrJ,oDAAA;IACAV,KAAK,CAAChD,SAAS,CAAC0D,SAAS,OAAG7D,mBAAY,EAACC,gBAAgB,CAACE,SAAS,EAAEmD,sBAAsB,EAAEjD,KAAK,IAAIsD,aAAa,KAAK,OAAO,IAAIJ,eAAe,CAAChC,UAAU,EAAEqC,IAAI,KAAK,OAAO,IAAIL,eAAe,CAAC9B,SAAS,EAAE0B,KAAK,CAAChD,SAAS,CAAC0D,SAAS,CAAC;IACxO,oDAAA;IACAV,KAAK,CAAC/C,KAAK,CAACyD,SAAS,OAAG7D,mBAAY,EAACC,gBAAgB,CAACG,KAAK,EAAEoD,kBAAkB,EAAEnD,KAAK,IAAIoD,WAAW,CAACE,aAAa,CAAC,EAAEC,IAAI,KAAK,OAAO,IAAIH,WAAW,CAAChC,SAAS,EAAE0B,KAAK,CAAC/C,KAAK,CAACyD,SAAS,CAAC;IACvL,IAAIV,KAAK,CAAC9C,KAAK,EAAE;QACb,oDAAA;QACA8C,KAAK,CAAC9C,KAAK,CAACwD,SAAS,OAAG7D,mBAAY,EAACC,gBAAgB,CAACI,KAAK,EAAEqD,WAAW,CAAClB,IAAI,EAAEkB,WAAW,CAACC,aAAa,CAAC,EAAEC,IAAI,KAAK,OAAO,IAAIF,WAAW,CAACjC,SAAS,EAAE0B,KAAK,CAAC9C,KAAK,CAACwD,SAAS,CAAC;IAChL;IACA,OAAOV,KAAK;AAChB,CAAC"}

package/lib-commonjs/{index.js → index.cjs}

@@ -31,4 +31,4 @@ _export(exports, {
         return _Switch.useSwitch_unstable;
     }
 });
-const _Switch = require("./Switch");
+const _Switch = require("./Switch.cjs");

package/lib-commonjs/{index.js.map → index.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n  useSwitchBase_unstable,\n} from './Switch';\nexport type {\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n  SwitchBaseProps,\n  SwitchBaseState,\n} from './Switch';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","useSwitchBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,cAAM;;;eACNC,6BAAqB,EACrB,4DAA4D;;;eAC5DC,uBAAe;;;eACfC,wBAAgB;;;eAGhBG,8BAAsB;;;eAFtBF,gCAAwB;;;eACxBC,0BAAkB;;;wBAEb,WAAW"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n  useSwitchBase_unstable,\n} from './Switch';\nexport type {\n  SwitchOnChangeData,\n  SwitchProps,\n  SwitchSlots,\n  SwitchState,\n  SwitchBaseProps,\n  SwitchBaseState,\n} from './Switch';\n"],"names":["Switch","renderSwitch_unstable","switchClassName","switchClassNames","useSwitchStyles_unstable","useSwitch_unstable","useSwitchBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,cAAM;;;eACNC,6BAAqB,EACrB,4DAA4D;;;eAC5DC,uBAAe;;;eACfC,wBAAgB;;;eAGhBG,8BAAsB;;;eAFtBF,gCAAwB;;;eACxBC,0BAAkB;;;wBAEb,cAAW"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@fluentui/react-switch",
-  "version": "9.7.4",
+  "version": "9.7.5",
   "description": "Fluent UI React Switch component.",
-  "main": "lib-commonjs/index.js",
+  "main": "lib-commonjs/index.cjs",
   "module": "lib/index.js",
   "typings": "./dist/index.d.ts",
   "sideEffects": false,
@@ -12,14 +12,14 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.5.3",
+    "@fluentui/react-field": "^9.5.4",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.4",
-    "@fluentui/react-label": "^9.4.3",
-    "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-tabster": "^9.26.16",
-    "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.5",
+    "@fluentui/react-jsx-runtime": "^9.4.5",
+    "@fluentui/react-label": "^9.4.4",
+    "@fluentui/react-shared-contexts": "^9.26.3",
+    "@fluentui/react-tabster": "^9.26.17",
+    "@fluentui/react-theme": "^9.2.2",
+    "@fluentui/react-utilities": "^9.26.6",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },
@@ -37,17 +37,23 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "node": "./lib-commonjs/index.js",
-      "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./lib/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./lib-commonjs/index.cjs"
+      }
     },
     "./package.json": "./package.json"
   },
   "files": [
     "*.md",
     "dist/*.d.ts",
+    "dist/*.d.cts",
     "lib",
     "lib-commonjs"
-  ]
+  ],
+  "type": "module"
 }

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

@@ -1 +0,0 @@
-{"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;\n// Medium size dimensions\nconst trackHeightMedium = 20;\nconst trackWidthMedium = 40;\nconst thumbSizeMedium = trackHeightMedium - spaceBetweenThumbAndTrack;\n// Small size dimensions (from design mockup)\nconst trackHeightSmall = 16;\nconst trackWidthSmall = 32;\nconst thumbSizeSmall = trackHeightSmall - 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: `${thumbSizeMedium}px`,\n    height: `${trackHeightMedium}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: `${trackWidthMedium}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    sizeSmall: {\n        fontSize: `${thumbSizeSmall}px`,\n        height: `${trackHeightSmall}px`,\n        width: `${trackWidthSmall}px`\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(${trackWidthMedium}px + 2 * ${tokens.spacingHorizontalS})`,\n    // Checked (both enabled and disabled)\n    ':checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            '> *': {\n                transform: `translateX(${trackWidthMedium - thumbSizeMedium - spaceBetweenThumbAndTrack}px)`\n            }\n        }\n    },\n    // Disabled (both checked and unchecked)\n    ':disabled, &[aria-disabled=\"true\"]': {\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):not([aria-disabled=\"true\"])': {\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:not([aria-disabled=\"true\"])': {\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), &[aria-disabled=\"true\"]:not(:checked)': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            borderColor: tokens.colorNeutralStrokeDisabled\n        }\n    },\n    // Disabled and checked\n    ':disabled:checked, &[aria-disabled=\"true\"]:checked': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n            backgroundColor: tokens.colorNeutralBackgroundDisabled,\n            borderColor: tokens.colorTransparentStrokeDisabled\n        }\n    },\n    '@media (forced-colors: active)': {\n        ':disabled, &[aria-disabled=\"true\"]': {\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:not([aria-disabled=\"true\"])': {\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(${trackHeightMedium}px + ${tokens.spacingVerticalS})`,\n        width: '100%'\n    },\n    sizeSmall: {\n        width: `calc(${trackWidthSmall}px + 2 * ${tokens.spacingHorizontalS})`,\n        ':checked': {\n            [`& ~ .${switchClassNames.indicator}`]: {\n                '> *': {\n                    transform: `translateX(${trackWidthSmall - thumbSizeSmall - spaceBetweenThumbAndTrack}px)`\n                }\n            }\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        // 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((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        marginTop: `calc((${trackHeightMedium}px - ${tokens.lineHeightBase300}) / 2)`,\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    sizeSmall: {\n        fontSize: tokens.fontSizeBase200,\n        lineHeight: tokens.lineHeightBase200,\n        marginBottom: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`,\n        marginTop: `calc((${trackHeightSmall}px - ${tokens.lineHeightBase200}) / 2)`\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    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, size } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, size === 'small' && indicatorStyles.sizeSmall, state.indicator.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], size === 'small' && inputStyles.sizeSmall, state.input.className);\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], size === 'small' && labelStyles.sizeSmall, state.label.className);\n    }\n    return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","__resetStyles","__styles","mergeClasses","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeightMedium","trackWidthMedium","thumbSizeMedium","trackHeightSmall","trackWidthSmall","thumbSizeSmall","useRootBaseClassName","r","s","useRootStyles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","sizeSmall","Be2twd7","Bqenvij","a9b677","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","oedwrj","useLabelStyles","base","Bceei9c","jrapky","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Bg96gwp","p","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","size","className"],"mappings":"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"}