@fluentui/react-switch 0.0.0-nightly-20230223-2115.1 → 0.0.0-nightly-20230227-0424.1

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

@@ -1,82 +1,89 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useSwitch_unstable", {
-    enumerable: true,
-    get: ()=>useSwitch_unstable
+  value: true
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _reactIcons = require("@fluentui/react-icons");
-const _reactLabel = require("@fluentui/react-label");
-const _reactTabster = require("@fluentui/react-tabster");
-const _reactUtilities = require("@fluentui/react-utilities");
-const useSwitch_unstable = (props, ref)=>{
-    const { checked , defaultChecked , disabled , labelPosition ='after' , onChange , required  } = props;
-    const nativeProps = (0, _reactUtilities.getPartitionedNativeProps)({
-        props,
-        primarySlotTagName: 'input',
-        excludedPropNames: [
-            'checked',
-            'defaultChecked',
-            'onChange'
-        ]
-    });
-    const id = (0, _reactUtilities.useId)('switch-', nativeProps.primary.id);
-    const root = (0, _reactUtilities.resolveShorthand)(props.root, {
-        defaultProps: {
-            ref: (0, _reactTabster.useFocusWithin)(),
-            ...nativeProps.root
-        },
-        required: true
-    });
-    const indicator = (0, _reactUtilities.resolveShorthand)(props.indicator, {
-        defaultProps: {
-            'aria-hidden': true,
-            children: /*#__PURE__*/ _react.createElement(_reactIcons.CircleFilled, null)
-        },
-        required: true
-    });
-    const input = (0, _reactUtilities.resolveShorthand)(props.input, {
-        defaultProps: {
-            checked,
-            defaultChecked,
-            id,
-            ref,
-            role: 'switch',
-            type: 'checkbox',
-            ...nativeProps.primary
-        },
-        required: true
-    });
-    input.onChange = (0, _reactUtilities.mergeCallbacks)(input.onChange, (ev)=>{
-        return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
-            checked: ev.currentTarget.checked
-        });
-    });
-    const label = (0, _reactUtilities.resolveShorthand)(props.label, {
-        defaultProps: {
-            disabled,
-            htmlFor: id,
-            required,
-            size: 'medium'
-        }
-    });
-    return {
-        labelPosition,
-        //Slots definition
-        components: {
-            root: 'div',
-            indicator: 'div',
-            input: 'input',
-            label: _reactLabel.Label
-        },
-        root,
-        indicator,
-        input,
-        label
-    };
-}; //# sourceMappingURL=useSwitch.js.map
-
+exports.useSwitch_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
+const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * 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
+ */
+const useSwitch_unstable = (props, ref) => {
+  const {
+    checked,
+    defaultChecked,
+    disabled,
+    labelPosition = 'after',
+    onChange,
+    required
+  } = props;
+  const nativeProps = react_utilities_1.getPartitionedNativeProps({
+    props,
+    primarySlotTagName: 'input',
+    excludedPropNames: ['checked', 'defaultChecked', 'onChange']
+  });
+  const id = react_utilities_1.useId('switch-', nativeProps.primary.id);
+  const root = react_utilities_1.resolveShorthand(props.root, {
+    defaultProps: {
+      ref: react_tabster_1.useFocusWithin(),
+      ...nativeProps.root
+    },
+    required: true
+  });
+  const indicator = react_utilities_1.resolveShorthand(props.indicator, {
+    defaultProps: {
+      'aria-hidden': true,
+      children: React.createElement(react_icons_1.CircleFilled, null)
+    },
+    required: true
+  });
+  const input = react_utilities_1.resolveShorthand(props.input, {
+    defaultProps: {
+      checked,
+      defaultChecked,
+      id,
+      ref,
+      role: 'switch',
+      type: 'checkbox',
+      ...nativeProps.primary
+    },
+    required: true
+  });
+  input.onChange = react_utilities_1.mergeCallbacks(input.onChange, ev => onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+    checked: ev.currentTarget.checked
+  }));
+  const label = react_utilities_1.resolveShorthand(props.label, {
+    defaultProps: {
+      disabled,
+      htmlFor: id,
+      required,
+      size: 'medium'
+    }
+  });
+  return {
+    labelPosition,
+    //Slots definition
+    components: {
+      root: 'div',
+      indicator: 'div',
+      input: 'input',
+      label: react_label_1.Label
+    },
+    root,
+    indicator,
+    input,
+    label
+  };
+};
+exports.useSwitch_unstable = useSwitch_unstable;
 //# sourceMappingURL=useSwitch.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Switch/useSwitch.js"],"sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\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, ref) => {\n  const {\n    checked,\n    defaultChecked,\n    disabled,\n    labelPosition = 'after',\n    onChange,\n    required\n  } = props;\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange']\n  });\n  const id = useId('switch-', nativeProps.primary.id);\n  const root = resolveShorthand(props.root, {\n    defaultProps: {\n      ref: useFocusWithin(),\n      ...nativeProps.root\n    },\n    required: true\n  });\n  const indicator = resolveShorthand(props.indicator, {\n    defaultProps: {\n      'aria-hidden': true,\n      children: /*#__PURE__*/React.createElement(CircleFilled, null)\n    },\n    required: true\n  });\n  const input = resolveShorthand(props.input, {\n    defaultProps: {\n      checked,\n      defaultChecked,\n      id,\n      ref,\n      role: 'switch',\n      type: 'checkbox',\n      ...nativeProps.primary\n    },\n    required: true\n  });\n  input.onChange = mergeCallbacks(input.onChange, ev => {\n    return onChange === null || onChange === void 0 ? void 0 : onChange(ev, {\n      checked: ev.currentTarget.checked\n    });\n  });\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      disabled,\n      htmlFor: id,\n      required,\n      size: 'medium'\n    }\n  });\n  return {\n    labelPosition,\n    //Slots definition\n    components: {\n      root: 'div',\n      indicator: 'div',\n      input: 'input',\n      label: Label\n    },\n    root,\n    indicator,\n    input,\n    label\n  };\n};\n//# sourceMappingURL=useSwitch.js.map"],"names":["useSwitch_unstable","props","ref","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","id","useId","primary","root","resolveShorthand","defaultProps","useFocusWithin","indicator","children","React","createElement","CircleFilled","input","role","type","mergeCallbacks","ev","currentTarget","label","htmlFor","size","components","Label"],"mappings":";;;;+BAcaA;;aAAAA;;;6DAdU;4BACM;4BACP;8BACS;gCACoD;AAU5E,MAAMA,qBAAqB,CAACC,OAAOC,MAAQ;IAChD,MAAM,EACJC,QAAO,EACPC,eAAc,EACdC,SAAQ,EACRC,eAAgB,QAAO,EACvBC,SAAQ,EACRC,SAAQ,EACT,GAAGP;IACJ,MAAMQ,cAAcC,IAAAA,yCAAyB,EAAC;QAC5CT;QACAU,oBAAoB;QACpBC,mBAAmB;YAAC;YAAW;YAAkB;SAAW;IAC9D;IACA,MAAMC,KAAKC,IAAAA,qBAAK,EAAC,WAAWL,YAAYM,OAAO,CAACF,EAAE;IAClD,MAAMG,OAAOC,IAAAA,gCAAgB,EAAChB,MAAMe,IAAI,EAAE;QACxCE,cAAc;YACZhB,KAAKiB,IAAAA,4BAAc;YACnB,GAAGV,YAAYO,IAAI;QACrB;QACAR,UAAU,IAAI;IAChB;IACA,MAAMY,YAAYH,IAAAA,gCAAgB,EAAChB,MAAMmB,SAAS,EAAE;QAClDF,cAAc;YACZ,eAAe,IAAI;YACnBG,UAAU,WAAW,GAAEC,OAAMC,aAAa,CAACC,wBAAY,EAAE,IAAI;QAC/D;QACAhB,UAAU,IAAI;IAChB;IACA,MAAMiB,QAAQR,IAAAA,gCAAgB,EAAChB,MAAMwB,KAAK,EAAE;QAC1CP,cAAc;YACZf;YACAC;YACAS;YACAX;YACAwB,MAAM;YACNC,MAAM;YACN,GAAGlB,YAAYM,OAAO;QACxB;QACAP,UAAU,IAAI;IAChB;IACAiB,MAAMlB,QAAQ,GAAGqB,IAAAA,8BAAc,EAACH,MAAMlB,QAAQ,EAAEsB,CAAAA,KAAM;QACpD,OAAOtB,aAAa,IAAI,IAAIA,aAAa,KAAK,IAAI,KAAK,IAAIA,SAASsB,IAAI;YACtE1B,SAAS0B,GAAGC,aAAa,CAAC3B,OAAO;QACnC,EAAE;IACJ;IACA,MAAM4B,QAAQd,IAAAA,gCAAgB,EAAChB,MAAM8B,KAAK,EAAE;QAC1Cb,cAAc;YACZb;YACA2B,SAASnB;YACTL;YACAyB,MAAM;QACR;IACF;IACA,OAAO;QACL3B;QACA,kBAAkB;QAClB4B,YAAY;YACVlB,MAAM;YACNI,WAAW;YACXK,OAAO;YACPM,OAAOI,iBAAK;QACd;QACAnB;QACAI;QACAK;QACAM;IACF;AACF,GACA,qCAAqC"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAGA;;;;;;;;;AASO,MAAMA,kBAAkB,GAAG,CAACC,KAAkB,EAAEC,GAAgC,KAAiB;EACtG,MAAM;IAAEC,OAAO;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,aAAa,GAAG,OAAO;IAAEC,QAAQ;IAAEC;EAAQ,CAAE,GAAGP,KAAK;EAEhG,MAAMQ,WAAW,GAAGC,2CAAyB,CAAC;IAC5CT,KAAK;IACLU,kBAAkB,EAAE,OAAO;IAC3BC,iBAAiB,EAAE,CAAC,SAAS,EAAE,gBAAgB,EAAE,UAAU;GAC5D,CAAC;EAEF,MAAMC,EAAE,GAAGH,uBAAK,CAAC,SAAS,EAAED,WAAW,CAACK,OAAO,CAACD,EAAE,CAAC;EAEnD,MAAME,IAAI,GAAGL,kCAAgB,CAACT,KAAK,CAACc,IAAI,EAAE;IACxCC,YAAY,EAAE;MAAEd,GAAG,EAAEe,8BAAc,EAAkB;MAAE,GAAGR,WAAW,CAACM;IAAI,CAAE;IAC5EP,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMU,SAAS,GAAGR,kCAAgB,CAACT,KAAK,CAACiB,SAAS,EAAE;IAClDF,YAAY,EAAE;MACZ,aAAa,EAAE,IAAI;MACnBG,QAAQ,EAAEC,oBAACC,0BAAY;KACxB;IACDb,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMc,KAAK,GAAGZ,kCAAgB,CAACT,KAAK,CAACqB,KAAK,EAAE;IAC1CN,YAAY,EAAE;MACZb,OAAO;MACPC,cAAc;MACdS,EAAE;MACFX,GAAG;MACHqB,IAAI,EAAE,QAAQ;MACdC,IAAI,EAAE,UAAU;MAChB,GAAGf,WAAW,CAACK;KAChB;IACDN,QAAQ,EAAE;GACX,CAAC;EACFc,KAAK,CAACf,QAAQ,GAAGG,gCAAc,CAACY,KAAK,CAACf,QAAQ,EAAEkB,EAAE,IAAIlB,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGkB,EAAE,EAAE;IAAEtB,OAAO,EAAEsB,EAAE,CAACC,aAAa,CAACvB;EAAO,CAAE,CAAC,CAAC;EAE5G,MAAMwB,KAAK,GAAGjB,kCAAgB,CAACT,KAAK,CAAC0B,KAAK,EAAE;IAC1CX,YAAY,EAAE;MACZX,QAAQ;MACRuB,OAAO,EAAEf,EAAE;MACXL,QAAQ;MACRqB,IAAI,EAAE;;GAET,CAAC;EAEF,OAAO;IACLvB,aAAa;IAEb;IACAwB,UAAU,EAAE;MACVf,IAAI,EAAE,KAAK;MACXG,SAAS,EAAE,KAAK;MAChBI,KAAK,EAAE,OAAO;MACdK,KAAK,EAAEI;KACR;IAEDhB,IAAI;IACJG,SAAS;IACTI,KAAK;IACLK;GACD;AACH,CAAC;AA/DYK,0BAAkB","names":["useSwitch_unstable","props","ref","checked","defaultChecked","disabled","labelPosition","onChange","required","nativeProps","react_utilities_1","primarySlotTagName","excludedPropNames","id","primary","root","defaultProps","react_tabster_1","indicator","children","React","react_icons_1","input","role","type","ev","currentTarget","label","htmlFor","size","components","react_label_1","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-switch/src/components/Switch/useSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } 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  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 = resolveShorthand(props.root, {\n    defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n    required: true,\n  });\n\n  const indicator = resolveShorthand(props.indicator, {\n    defaultProps: {\n      'aria-hidden': true,\n      children: <CircleFilled />,\n    },\n    required: true,\n  });\n\n  const input = resolveShorthand(props.input, {\n    defaultProps: {\n      checked,\n      defaultChecked,\n      id,\n      ref,\n      role: 'switch',\n      type: 'checkbox',\n      ...nativeProps.primary,\n    },\n    required: true,\n  });\n  input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      disabled,\n      htmlFor: id,\n      required,\n      size: 'medium',\n    },\n  });\n\n  return {\n    labelPosition,\n\n    //Slots definition\n    components: {\n      root: 'div',\n      indicator: 'div',\n      input: 'input',\n      label: Label,\n    },\n\n    root,\n    indicator,\n    input,\n    label,\n  };\n};\n"]}

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

@@ -1,195 +1,108 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    switchClassNames: ()=>switchClassNames,
-    switchClassName: ()=>switchClassName,
-    useSwitchStyles_unstable: ()=>useSwitchStyles_unstable
+  value: true
 });
-const _react = require("@griffel/react");
-const switchClassNames = {
-    root: 'fui-Switch',
-    indicator: 'fui-Switch__indicator',
-    input: 'fui-Switch__input',
-    label: 'fui-Switch__label'
+exports.useSwitchStyles_unstable = exports.switchClassName = exports.switchClassNames = void 0;
+const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+const react_1 = /*#__PURE__*/require("@griffel/react");
+exports.switchClassNames = {
+  root: 'fui-Switch',
+  indicator: 'fui-Switch__indicator',
+  input: 'fui-Switch__input',
+  label: 'fui-Switch__label'
 };
-const switchClassName = switchClassNames.root;
+/**
+ * @deprecated Use `switchClassNames.root` instead.
+ */
+exports.switchClassName = exports.switchClassNames.root;
 // Thumb and track sizes used by the component.
 const spaceBetweenThumbAndTrack = 2;
 const trackHeight = 20;
 const trackWidth = 40;
 const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
-const useRootBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r1u7w45w", "rlzel8d", [
-    ".r1u7w45w{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}",
-    ".r1u7w45w:focus{outline-style:none;}",
-    ".r1u7w45w:focus-visible{outline-style:none;}",
-    ".r1u7w45w[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
-    ".r1u7w45w[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}",
-    ".rlzel8d{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}",
-    ".rlzel8d:focus{outline-style:none;}",
-    ".rlzel8d:focus-visible{outline-style:none;}",
-    ".rlzel8d[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
-    ".rlzel8d[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"
-]);
-const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    vertical: {
-        Beiy3e4: "f1vx9l62"
-    }
+const useRootBaseClassName = /*#__PURE__*/react_1.__resetStyles("r1u7w45w", "rlzel8d", [".r1u7w45w{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r1u7w45w:focus{outline-style:none;}", ".r1u7w45w:focus-visible{outline-style:none;}", ".r1u7w45w[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1u7w45w[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}", ".rlzel8d{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".rlzel8d:focus{outline-style:none;}", ".rlzel8d:focus-visible{outline-style:none;}", ".rlzel8d[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".rlzel8d[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
+const useRootStyles = /*#__PURE__*/react_1.__styles({
+  vertical: {
+    Beiy3e4: "f1vx9l62"
+  }
 }, {
-    d: [
-        ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"
-    ]
+  d: [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
 });
-const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r13wlxb8", null, [
-    ".r13wlxb8{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:18px;height:20px;margin:var(--spacingVerticalS) var(--spacingHorizontalS);pointer-events:none;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;}",
-    "@media screen and (prefers-reduced-motion: reduce){.r13wlxb8{transition-duration:0.01ms;}}",
-    ".r13wlxb8>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}",
-    "@media screen and (prefers-reduced-motion: reduce){.r13wlxb8>*{transition-duration:0.01ms;}}"
-]);
-const useIndicatorStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    labelAbove: {
-        B6of3ja: "f1hu3pq6"
-    }
+const useIndicatorBaseClassName = /*#__PURE__*/react_1.__resetStyles("r13wlxb8", null, [".r13wlxb8{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:18px;height:20px;margin:var(--spacingVerticalS) var(--spacingHorizontalS);pointer-events:none;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;}", "@media screen and (prefers-reduced-motion: reduce){.r13wlxb8{transition-duration:0.01ms;}}", ".r13wlxb8>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}", "@media screen and (prefers-reduced-motion: reduce){.r13wlxb8>*{transition-duration:0.01ms;}}"]);
+const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
+  labelAbove: {
+    B6of3ja: "f1hu3pq6"
+  }
 }, {
-    d: [
-        ".f1hu3pq6{margin-top:0;}"
-    ]
+  d: [".f1hu3pq6{margin-top:0;}"]
 });
-const useInputBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r92li9d", "rxjpw57", [
-    ".r92li9d{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
-    ".r92li9d:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}",
-    ".r92li9d:disabled{cursor:default;}",
-    ".r92li9d:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
-    ".r92li9d:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
-    ".r92li9d:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
-    ".r92li9d:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
-    ".r92li9d:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
-    ".r92li9d:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
-    ".r92li9d:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
-    ".r92li9d:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
-    ".r92li9d:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
-    ".r92li9d:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
-    ".r92li9d:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}",
-    "@media (forced-colors: active){.r92li9d:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r92li9d:disabled~.fui-Switch__label{color:GrayText;}}",
-    ".rxjpw57{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}",
-    ".rxjpw57:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}",
-    ".rxjpw57:disabled{cursor:default;}",
-    ".rxjpw57:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}",
-    ".rxjpw57:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}",
-    ".rxjpw57:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}",
-    ".rxjpw57:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}",
-    ".rxjpw57:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}",
-    ".rxjpw57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}",
-    ".rxjpw57:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}",
-    ".rxjpw57:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}",
-    ".rxjpw57:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}",
-    ".rxjpw57:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}",
-    ".rxjpw57:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}",
-    "@media (forced-colors: active){.rxjpw57:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rxjpw57:disabled~.fui-Switch__label{color:GrayText;}}"
-]);
-const useInputStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    before: {
-        j35jbq: [
-            "f1e31b4d",
-            "f1vgc2s3"
-        ],
-        Bhzewxz: "f15twtuk"
-    },
-    after: {
-        oyh7mz: [
-            "f1vgc2s3",
-            "f1e31b4d"
-        ],
-        Bhzewxz: "f15twtuk"
-    },
-    above: {
-        B5kzvoi: "f1yab3r1",
-        Bqenvij: "f1aar7gd",
-        a9b677: "fly5x3f"
-    }
+const useInputBaseClassName = /*#__PURE__*/react_1.__resetStyles("r92li9d", "rxjpw57", [".r92li9d{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".r92li9d:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".r92li9d:disabled{cursor:default;}", ".r92li9d:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".r92li9d:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".r92li9d:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".r92li9d:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".r92li9d:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r92li9d:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r92li9d:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".r92li9d:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".r92li9d:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".r92li9d:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".r92li9d:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", "@media (forced-colors: active){.r92li9d:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r92li9d:disabled~.fui-Switch__label{color:GrayText;}}", ".rxjpw57{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}", ".rxjpw57:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".rxjpw57:disabled{cursor:default;}", ".rxjpw57:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".rxjpw57:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}", ".rxjpw57:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}", ".rxjpw57:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".rxjpw57:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}", ".rxjpw57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".rxjpw57:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}", ".rxjpw57:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}", ".rxjpw57:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}", ".rxjpw57:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}", ".rxjpw57:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}", "@media (forced-colors: active){.rxjpw57:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rxjpw57:disabled~.fui-Switch__label{color:GrayText;}}"]);
+const useInputStyles = /*#__PURE__*/react_1.__styles({
+  before: {
+    j35jbq: ["f1e31b4d", "f1vgc2s3"],
+    Bhzewxz: "f15twtuk"
+  },
+  after: {
+    oyh7mz: ["f1vgc2s3", "f1e31b4d"],
+    Bhzewxz: "f15twtuk"
+  },
+  above: {
+    B5kzvoi: "f1yab3r1",
+    Bqenvij: "f1aar7gd",
+    a9b677: "fly5x3f"
+  }
 }, {
-    d: [
-        ".f1e31b4d{right:0;}",
-        ".f1vgc2s3{left:0;}",
-        ".f15twtuk{top:0;}",
-        ".f1yab3r1{bottom:0;}",
-        ".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}",
-        ".fly5x3f{width:100%;}"
-    ]
+  d: [".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}", ".fly5x3f{width:100%;}"]
 });
 // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
-const useLabelStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    base: {
-        Bceei9c: "f1k6fduh",
-        jrapky: "f49ad5g",
-        B6of3ja: "f1xlvstr",
-        z8tnut: "f1kwiid1",
-        z189sj: [
-            "f1vdfbxk",
-            "f1f5gg8d"
-        ],
-        Byoj8tv: "f5b47ha",
-        uwmqm3: [
-            "f1f5gg8d",
-            "f1vdfbxk"
-        ]
-    },
-    above: {
-        z8tnut: "f1ywm7hm",
-        Byoj8tv: "f14wxoun",
-        a9b677: "fly5x3f"
-    },
-    after: {
-        uwmqm3: [
-            "fruq291",
-            "f7x41pl"
-        ]
-    },
-    before: {
-        z189sj: [
-            "f7x41pl",
-            "fruq291"
-        ]
-    }
+const useLabelStyles = /*#__PURE__*/react_1.__styles({
+  base: {
+    Bceei9c: "f1k6fduh",
+    jrapky: "f49ad5g",
+    B6of3ja: "f1xlvstr",
+    z8tnut: "f1kwiid1",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "f5b47ha",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  },
+  above: {
+    z8tnut: "f1ywm7hm",
+    Byoj8tv: "f14wxoun",
+    a9b677: "fly5x3f"
+  },
+  after: {
+    uwmqm3: ["fruq291", "f7x41pl"]
+  },
+  before: {
+    z189sj: ["f7x41pl", "fruq291"]
+  }
 }, {
-    d: [
-        ".f1k6fduh{cursor:pointer;}",
-        ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}",
-        ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}",
-        ".f1kwiid1{padding-top:var(--spacingVerticalS);}",
-        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
-        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
-        ".f5b47ha{padding-bottom:var(--spacingVerticalS);}",
-        ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
-        ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}",
-        ".fly5x3f{width:100%;}",
-        ".fruq291{padding-left:var(--spacingHorizontalXS);}",
-        ".f7x41pl{padding-right:var(--spacingHorizontalXS);}"
-    ]
+  d: [".f1k6fduh{cursor:pointer;}", ".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}", ".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".fly5x3f{width:100%;}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}"]
 });
-const useSwitchStyles_unstable = (state)=>{
-    const rootBaseClassName = useRootBaseClassName();
-    const rootStyles = useRootStyles();
-    const indicatorBaseClassName = useIndicatorBaseClassName();
-    const indicatorStyles = useIndicatorStyles();
-    const inputBaseClassName = useInputBaseClassName();
-    const inputStyles = useInputStyles();
-    const labelStyles = useLabelStyles();
-    const { label , labelPosition  } = state;
-    state.root.className = (0, _react.mergeClasses)(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
-    state.indicator.className = (0, _react.mergeClasses)(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
-    state.input.className = (0, _react.mergeClasses)(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);
-    if (state.label) {
-        state.label.className = (0, _react.mergeClasses)(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
-    }
-    return state;
-}; //# sourceMappingURL=useSwitchStyles.js.map
-
+/**
+ * Apply styling to the Switch slots based on the state
+ */
+const useSwitchStyles_unstable = state => {
+  const rootBaseClassName = useRootBaseClassName();
+  const rootStyles = useRootStyles();
+  const indicatorBaseClassName = useIndicatorBaseClassName();
+  const indicatorStyles = useIndicatorStyles();
+  const inputBaseClassName = useInputBaseClassName();
+  const inputStyles = useInputStyles();
+  const labelStyles = useLabelStyles();
+  const {
+    label,
+    labelPosition
+  } = state;
+  state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
+  state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
+  state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);
+  if (state.label) {
+    state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
+  }
+  return state;
+};
+exports.useSwitchStyles_unstable = useSwitchStyles_unstable;
 //# sourceMappingURL=useSwitchStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Switch/useSwitchStyles.js"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses, shorthands } 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 */\nexport 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 = /*#__PURE__*/__resetStyles(\"r1u7w45w\", \"rlzel8d\", [\".r1u7w45w{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}\", \".r1u7w45w:focus{outline-style:none;}\", \".r1u7w45w:focus-visible{outline-style:none;}\", \".r1u7w45w[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1u7w45w[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}\", \".rlzel8d{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}\", \".rlzel8d:focus{outline-style:none;}\", \".rlzel8d:focus-visible{outline-style:none;}\", \".rlzel8d[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".rlzel8d[data-fui-focus-within]:focus-within::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n  vertical: {\n    Beiy3e4: \"f1vx9l62\"\n  }\n}, {\n  d: [\".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\"]\n});\nconst useIndicatorBaseClassName = /*#__PURE__*/__resetStyles(\"r13wlxb8\", null, [\".r13wlxb8{border-radius:var(--borderRadiusCircular);border:1px solid;line-height:0;box-sizing:border-box;fill:currentColor;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:18px;height:20px;margin:var(--spacingVerticalS) var(--spacingHorizontalS);pointer-events:none;transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:background,border,color;width:40px;}\", \"@media screen and (prefers-reduced-motion: reduce){.r13wlxb8{transition-duration:0.01ms;}}\", \".r13wlxb8>*{transition-duration:var(--durationNormal);transition-timing-function:var(--curveEasyEase);transition-property:transform;}\", \"@media screen and (prefers-reduced-motion: reduce){.r13wlxb8>*{transition-duration:0.01ms;}}\"]);\nconst useIndicatorStyles = /*#__PURE__*/__styles({\n  labelAbove: {\n    B6of3ja: \"f1hu3pq6\"\n  }\n}, {\n  d: [\".f1hu3pq6{margin-top:0;}\"]\n});\nconst useInputBaseClassName = /*#__PURE__*/__resetStyles(\"r92li9d\", \"rxjpw57\", [\".r92li9d{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}\", \".r92li9d:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}\", \".r92li9d:disabled{cursor:default;}\", \".r92li9d:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}\", \".r92li9d:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}\", \".r92li9d:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}\", \".r92li9d:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}\", \".r92li9d:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".r92li9d:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".r92li9d:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}\", \".r92li9d:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}\", \".r92li9d:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}\", \".r92li9d:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}\", \".r92li9d:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}\", \"@media (forced-colors: active){.r92li9d:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.r92li9d:disabled~.fui-Switch__label{color:GrayText;}}\", \".rxjpw57{box-sizing:border-box;cursor:pointer;height:100%;margin:0;opacity:0;position:absolute;width:calc(40px + 2 * var(--spacingHorizontalS));}\", \".rxjpw57:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}\", \".rxjpw57:disabled{cursor:default;}\", \".rxjpw57:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}\", \".rxjpw57:disabled~.fui-Switch__label{cursor:default;color:var(--colorNeutralForegroundDisabled);}\", \".rxjpw57:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);border-color:var(--colorNeutralStrokeAccessible);}\", \".rxjpw57:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}\", \".rxjpw57:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);border-color:var(--colorNeutralStrokeAccessibleHover);}\", \".rxjpw57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);border-color:var(--colorNeutralStrokeAccessiblePressed);}\", \".rxjpw57:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);color:var(--colorNeutralForegroundInverted);border-color:var(--colorTransparentStroke);}\", \".rxjpw57:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);border-color:var(--colorTransparentStrokeInteractive);}\", \".rxjpw57:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);border-color:var(--colorTransparentStrokeInteractive);}\", \".rxjpw57:disabled:not(:checked)~.fui-Switch__indicator{border-color:var(--colorNeutralStrokeDisabled);}\", \".rxjpw57:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);border-color:var(--colorTransparentStrokeDisabled);}\", \"@media (forced-colors: active){.rxjpw57:disabled~.fui-Switch__indicator{color:GrayText;border-color:GrayText;}.rxjpw57:disabled~.fui-Switch__label{color:GrayText;}}\"]);\nconst useInputStyles = /*#__PURE__*/__styles({\n  before: {\n    j35jbq: [\"f1e31b4d\", \"f1vgc2s3\"],\n    Bhzewxz: \"f15twtuk\"\n  },\n  after: {\n    oyh7mz: [\"f1vgc2s3\", \"f1e31b4d\"],\n    Bhzewxz: \"f15twtuk\"\n  },\n  above: {\n    B5kzvoi: \"f1yab3r1\",\n    Bqenvij: \"f1aar7gd\",\n    a9b677: \"fly5x3f\"\n  }\n}, {\n  d: [\".f1e31b4d{right:0;}\", \".f1vgc2s3{left:0;}\", \".f15twtuk{top:0;}\", \".f1yab3r1{bottom:0;}\", \".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}\", \".fly5x3f{width:100%;}\"]\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = /*#__PURE__*/__styles({\n  base: {\n    Bceei9c: \"f1k6fduh\",\n    jrapky: \"f49ad5g\",\n    B6of3ja: \"f1xlvstr\",\n    z8tnut: \"f1kwiid1\",\n    z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n    Byoj8tv: \"f5b47ha\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  },\n  above: {\n    z8tnut: \"f1ywm7hm\",\n    Byoj8tv: \"f14wxoun\",\n    a9b677: \"fly5x3f\"\n  },\n  after: {\n    uwmqm3: [\"fruq291\", \"f7x41pl\"]\n  },\n  before: {\n    z189sj: [\"f7x41pl\", \"fruq291\"]\n  }\n}, {\n  d: [\".f1k6fduh{cursor:pointer;}\", \".f49ad5g{margin-bottom:calc((20px - var(--lineHeightBase300)) / 2);}\", \".f1xlvstr{margin-top:calc((20px - var(--lineHeightBase300)) / 2);}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".f14wxoun{padding-bottom:var(--spacingVerticalXS);}\", \".fly5x3f{width:100%;}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\"]\n});\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport 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 {\n    label,\n    labelPosition\n  } = 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//# sourceMappingURL=useSwitchStyles.js.map"],"names":["switchClassNames","switchClassName","useSwitchStyles_unstable","root","indicator","input","label","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","__resetStyles","useRootStyles","__styles","vertical","Beiy3e4","d","useIndicatorBaseClassName","useIndicatorStyles","labelAbove","B6of3ja","useInputBaseClassName","useInputStyles","before","j35jbq","Bhzewxz","after","oyh7mz","above","B5kzvoi","Bqenvij","a9b677","useLabelStyles","base","Bceei9c","jrapky","z8tnut","z189sj","Byoj8tv","uwmqm3","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className","mergeClasses"],"mappings":";;;;;;;;;;;IAGaA,gBAAgB,MAAhBA;IASAC,eAAe,MAAfA;IAoEAC,wBAAwB,MAAxBA;;uBA9EqD;AAC3D,MAAMF,mBAAmB;IAC9BG,MAAM;IACNC,WAAW;IACXC,OAAO;IACPC,OAAO;AACT;AAIO,MAAML,kBAAkBD,iBAAiBG,IAAI;AACpD,+CAA+C;AAC/C,MAAMI,4BAA4B;AAClC,MAAMC,cAAc;AACpB,MAAMC,aAAa;AACnB,MAAMC,YAAYF,cAAcD;AAChC,MAAMI,uBAAuB,WAAW,GAAEC,IAAAA,uBAAa,EAAC,YAAY,WAAW;IAAC;IAA0Q;IAAwC;IAAgD;IAA6K;IAAutB;IAAyQ;IAAuC;IAA+C;IAA4K;CAAqtB;AACthF,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAC1CC,UAAU;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;KAA4F;AAClG;AACA,MAAMC,4BAA4B,WAAW,GAAEN,IAAAA,uBAAa,EAAC,YAAY,IAAI,EAAE;IAAC;IAAib;IAA8F;IAAyI;CAA+F;AACv0B,MAAMO,qBAAqB,WAAW,GAAEL,IAAAA,kBAAQ,EAAC;IAC/CM,YAAY;QACVC,SAAS;IACX;AACF,GAAG;IACDJ,GAAG;QAAC;KAA2B;AACjC;AACA,MAAMK,wBAAwB,WAAW,GAAEV,IAAAA,uBAAa,EAAC,WAAW,WAAW;IAAC;IAAqJ;IAA4K;IAAsC;IAA0F;IAAqG;IAAsJ;IAA4F;IAAsK;IAAiL;IAAiM;IAA2K;IAAoL;IAA2G;IAAgK;IAAwK;IAAqJ;IAAgL;IAAsC;IAA0F;IAAqG;IAAsJ;IAA4F;IAAsK;IAAiL;IAAiM;IAA2K;IAAoL;IAA2G;IAAgK;CAAuK;AACvtI,MAAMW,iBAAiB,WAAW,GAAET,IAAAA,kBAAQ,EAAC;IAC3CU,QAAQ;QACNC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;IACX;IACAC,OAAO;QACLC,QAAQ;YAAC;YAAY;SAAW;QAChCF,SAAS;IACX;IACAG,OAAO;QACLC,SAAS;QACTC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDf,GAAG;QAAC;QAAuB;QAAsB;QAAqB;QAAwB;QAA2D;KAAwB;AACnL;AACA,mGAAmG;AACnG,MAAMgB,iBAAiB,WAAW,GAAEnB,IAAAA,kBAAQ,EAAC;IAC3CoB,MAAM;QACJC,SAAS;QACTC,QAAQ;QACRf,SAAS;QACTgB,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAW;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAW;IAClC;IACAX,OAAO;QACLQ,QAAQ;QACRE,SAAS;QACTP,QAAQ;IACV;IACAL,OAAO;QACLa,QAAQ;YAAC;YAAW;SAAU;IAChC;IACAhB,QAAQ;QACNc,QAAQ;YAAC;YAAW;SAAU;IAChC;AACF,GAAG;IACDrB,GAAG;QAAC;QAA8B;QAAwE;QAAsE;QAAmD;QAAuD;QAAsD;QAAqD;QAAoD;QAAuD;QAAyB;QAAsD;KAAsD;AACvnB;AAIO,MAAMf,2BAA2BuC,CAAAA,QAAS;IAC/C,MAAMC,oBAAoB/B;IAC1B,MAAMgC,aAAa9B;IACnB,MAAM+B,yBAAyB1B;IAC/B,MAAM2B,kBAAkB1B;IACxB,MAAM2B,qBAAqBxB;IAC3B,MAAMyB,cAAcxB;IACpB,MAAMyB,cAAcf;IACpB,MAAM,EACJ3B,MAAK,EACL2C,cAAa,EACd,GAAGR;IACJA,MAAMtC,IAAI,CAAC+C,SAAS,GAAGC,IAAAA,mBAAY,EAACnD,iBAAiBG,IAAI,EAAEuC,mBAAmBO,kBAAkB,WAAWN,WAAW5B,QAAQ,EAAE0B,MAAMtC,IAAI,CAAC+C,SAAS;IACpJT,MAAMrC,SAAS,CAAC8C,SAAS,GAAGC,IAAAA,mBAAY,EAACnD,iBAAiBI,SAAS,EAAEwC,wBAAwBtC,SAAS2C,kBAAkB,WAAWJ,gBAAgBzB,UAAU,EAAEqB,MAAMrC,SAAS,CAAC8C,SAAS;IACxLT,MAAMpC,KAAK,CAAC6C,SAAS,GAAGC,IAAAA,mBAAY,EAACnD,iBAAiBK,KAAK,EAAEyC,oBAAoBxC,SAASyC,WAAW,CAACE,cAAc,EAAER,MAAMpC,KAAK,CAAC6C,SAAS;IAC3I,IAAIT,MAAMnC,KAAK,EAAE;QACfmC,MAAMnC,KAAK,CAAC4C,SAAS,GAAGC,IAAAA,mBAAY,EAACnD,iBAAiBM,KAAK,EAAE0C,YAAYd,IAAI,EAAEc,WAAW,CAACC,cAAc,EAAER,MAAMnC,KAAK,CAAC4C,SAAS;IAClI,CAAC;IACD,OAAOT;AACT,GACA,2CAA2C"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,wBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE,uBAAuB;EAClCC,KAAK,EAAE,mBAAmB;EAC1BC,KAAK,EAAE;CACR;AAED;;;AAGaJ,uBAAe,GAAGA,wBAAgB,CAACC,IAAI;AAEpD;AACA,MAAMI,yBAAyB,GAAG,CAAC;AACnC,MAAMC,WAAW,GAAG,EAAE;AACtB,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,SAAS,GAAGF,WAAW,GAAGD,yBAAyB;AAEzD,MAAMI,oBAAoB,gBAAGC,qBAAe,g+EAO1C;AAEF,MAAMC,aAAa,gBAAGD,gBAAU;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAI9B;AAEF,MAAME,yBAAyB,gBAAGF,qBAAe,4wBA6B/C;AAEF,MAAMG,kBAAkB,gBAAGH,gBAAU;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAInC;AAEF,MAAMI,qBAAqB,gBAAGJ,qBAAe,gqIA+G3C;AAEF,MAAMK,cAAc,gBAAGL,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAc/B;AAEF;AACA,MAAMM,cAAc,gBAAGN,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAsB/B;AAEF;;;AAGO,MAAMO,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAMC,iBAAiB,GAAGV,oBAAoB,EAAE;EAChD,MAAMW,UAAU,GAAGT,aAAa,EAAE;EAClC,MAAMU,sBAAsB,GAAGT,yBAAyB,EAAE;EAC1D,MAAMU,eAAe,GAAGT,kBAAkB,EAAE;EAC5C,MAAMU,kBAAkB,GAAGT,qBAAqB,EAAE;EAClD,MAAMU,WAAW,GAAGT,cAAc,EAAE;EACpC,MAAMU,WAAW,GAAGT,cAAc,EAAE;EAEpC,MAAM;IAAEZ,KAAK;IAAEsB;EAAa,CAAE,GAAGR,KAAK;EAEtCA,KAAK,CAACjB,IAAI,CAAC0B,SAAS,GAAGjB,oBAAY,CACjCV,wBAAgB,CAACC,IAAI,EACrBkB,iBAAiB,EACjBO,aAAa,KAAK,OAAO,IAAIN,UAAU,CAACQ,QAAQ,EAChDV,KAAK,CAACjB,IAAI,CAAC0B,SAAS,CACrB;EAEDT,KAAK,CAAChB,SAAS,CAACyB,SAAS,GAAGjB,oBAAY,CACtCV,wBAAgB,CAACE,SAAS,EAC1BmB,sBAAsB,EACtBjB,KAAK,IAAIsB,aAAa,KAAK,OAAO,IAAIJ,eAAe,CAACO,UAAU,EAChEX,KAAK,CAAChB,SAAS,CAACyB,SAAS,CAC1B;EAEDT,KAAK,CAACf,KAAK,CAACwB,SAAS,GAAGjB,oBAAY,CAClCV,wBAAgB,CAACG,KAAK,EACtBoB,kBAAkB,EAClBnB,KAAK,IAAIoB,WAAW,CAACE,aAAa,CAAC,EACnCR,KAAK,CAACf,KAAK,CAACwB,SAAS,CACtB;EAED,IAAIT,KAAK,CAACd,KAAK,EAAE;IACfc,KAAK,CAACd,KAAK,CAACuB,SAAS,GAAGjB,oBAAY,CAClCV,wBAAgB,CAACI,KAAK,EACtBqB,WAAW,CAACK,IAAI,EAChBL,WAAW,CAACC,aAAa,CAAC,EAC1BR,KAAK,CAACd,KAAK,CAACuB,SAAS,CACtB;;EAGH,OAAOT,KAAK;AACd,CAAC;AA1CYlB,gCAAwB","names":["exports","root","indicator","input","label","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","react_1","useRootStyles","useIndicatorBaseClassName","useIndicatorStyles","useInputBaseClassName","useInputStyles","useLabelStyles","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className","vertical","labelAbove","base"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts"],"sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } 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  '> *': {\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  },\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\n    ...shorthands.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  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"]}

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

@@ -1,20 +1,14 @@
-/* eslint-disable deprecation/deprecation */ "use strict";
+"use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    switchFieldClassNames: ()=>switchFieldClassNames,
-    SwitchField: ()=>SwitchField
+  value: true
 });
-const _reactField = require("@fluentui/react-field");
-const _switch = require("../../Switch");
-const switchFieldClassNames = /*#__PURE__*/ (0, _reactField.getDeprecatedFieldClassNames)(_switch.switchClassNames.root);
-const SwitchField = /*#__PURE__*/ (0, _reactField.makeDeprecatedField)(_switch.Switch); //# sourceMappingURL=SwitchField.js.map
-
+exports.SwitchField = exports.switchFieldClassNames = void 0;
+/* eslint-disable deprecation/deprecation */
+const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
+const Switch_1 = /*#__PURE__*/require("../../Switch");
+/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */
+exports.switchFieldClassNames = /*#__PURE__*/react_field_1.getDeprecatedFieldClassNames(Switch_1.switchClassNames.root);
+/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */
+exports.SwitchField = /*#__PURE__*/react_field_1.makeDeprecatedField(Switch_1.Switch);
 //# sourceMappingURL=SwitchField.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/SwitchField/SwitchField.js"],"sourcesContent":["/* eslint-disable deprecation/deprecation */import { getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport { Switch, switchClassNames } from '../../Switch';\n/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */\nexport const switchFieldClassNames = /*#__PURE__*/getDeprecatedFieldClassNames(switchClassNames.root);\n/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */\nexport const SwitchField = /*#__PURE__*/makeDeprecatedField(Switch);\n//# sourceMappingURL=SwitchField.js.map"],"names":["switchFieldClassNames","SwitchField","getDeprecatedFieldClassNames","switchClassNames","root","makeDeprecatedField","Switch"],"mappings":"AAAA,0CAA0C;;;;;;;;;;;IAG7BA,qBAAqB,MAArBA;IAEAC,WAAW,MAAXA;;4BALiG;wBACrE;AAElC,MAAMD,wBAAwB,WAAW,GAAEE,IAAAA,wCAA4B,EAACC,wBAAgB,CAACC,IAAI;AAE7F,MAAMH,cAAc,WAAW,GAAEI,IAAAA,+BAAmB,EAACC,cAAM,GAClE,uCAAuC"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAIA;AACaA,6BAAqB,gBAAGC,0CAA4B,CAACC,yBAAgB,CAACC,IAAI,CAAC;AACxF;AACaH,mBAAW,gBAA0CC,iCAAmB,CAACC,eAAM,CAAC","names":["exports","react_field_1","Switch_1","root"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-switch/src/components/SwitchField/SwitchField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Switch, switchClassNames, SwitchProps } from '../../Switch';\n\n/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */\nexport type SwitchFieldProps = DeprecatedFieldProps<SwitchProps>;\n/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */\nexport const switchFieldClassNames = getDeprecatedFieldClassNames(switchClassNames.root);\n/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */\nexport const SwitchField: ForwardRefComponent<SwitchFieldProps> = makeDeprecatedField(Switch);\n"]}