npm - @fluentui/react-switch - Versions diffs - 9.0.17 → 9.0.19 - Mend

@fluentui/react-switch 9.0.17 → 9.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.json +61 -5
package/CHANGELOG.md +27 -6
package/lib/components/Switch/useSwitchStyles.js +14 -163
package/lib/components/Switch/useSwitchStyles.js.map +1 -1
package/lib-amd/components/Switch/useSwitchStyles.js +126 -73
package/lib-amd/components/Switch/useSwitchStyles.js.map +1 -1
package/lib-commonjs/components/Switch/useSwitchStyles.js +13 -162
package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
package/package.json +6 -5

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,63 @@
   "name": "@fluentui/react-switch",
   "entries": [
     {
-      "date": "Mon, 09 Jan 2023 14:31:49 GMT",
+      "date": "Wed, 18 Jan 2023 16:30:58 GMT",
+      "tag": "@fluentui/react-switch_v9.0.19",
+      "version": "9.0.19",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-tabster to v9.4.0",
+            "commit": "13cf1d07a6df4617106c731ba0379b6102a08104"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 16 Jan 2023 08:38:47 GMT",
+      "tag": "@fluentui/react-switch_v9.0.18",
+      "version": "9.0.18",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-switch",
+            "commit": "64bb45980d68de1219c6b36a7db5363f0a9cff9f",
+            "comment": "chore: migrate to packaged scripts"
+          }
+        ],
+        "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-switch",
+            "commit": "25e3d5b8f843b51d1bc7e9deb9f5d4da74dec3cd",
+            "comment": "chore: Update Switch to use griffel reset styles"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.15",
+            "commit": "a870d8360e47f3ea03358c4e75e89e08a74845d7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-label to v9.0.17",
+            "commit": "a870d8360e47f3ea03358c4e75e89e08a74845d7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-switch",
+            "comment": "Bump @fluentui/react-tabster to v9.3.7",
+            "commit": "a870d8360e47f3ea03358c4e75e89e08a74845d7"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 09 Jan 2023 14:35:02 GMT",
       "tag": "@fluentui/react-switch_v9.0.17",
       "version": "9.0.17",
       "comments": {
@@ -11,25 +67,25 @@
             "author": "beachball",
             "package": "@fluentui/react-switch",
             "comment": "Bump @fluentui/react-field to v9.0.0-alpha.14",
-            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-switch",
             "comment": "Bump @fluentui/react-label to v9.0.16",
-            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-switch",
             "comment": "Bump @fluentui/react-tabster to v9.3.6",
-            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-switch",
             "comment": "Bump @fluentui/react-utilities to v9.4.0",
-            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
           }
         ]
       }

package/CHANGELOG.md CHANGED Viewed

@@ -1,20 +1,41 @@
 # Change Log - @fluentui/react-switch
-This log was last generated on Mon, 09 Jan 2023 14:31:49 GMT and should not be manually modified.
+This log was last generated on Wed, 18 Jan 2023 16:30:58 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.0.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.19)
+Wed, 18 Jan 2023 16:30:58 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.18..@fluentui/react-switch_v9.0.19)
+### Patches
+- Bump @fluentui/react-tabster to v9.4.0 ([PR #26377](https://github.com/microsoft/fluentui/pull/26377) by beachball)
+## [9.0.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.18)
+Mon, 16 Jan 2023 08:38:47 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.17..@fluentui/react-switch_v9.0.18)
+### Patches
+- chore: Update Switch to use griffel reset styles ([PR #26007](https://github.com/microsoft/fluentui/pull/26007) by behowell@microsoft.com)
+- Bump @fluentui/react-field to v9.0.0-alpha.15 ([commit](https://github.com/microsoft/fluentui/commit/a870d8360e47f3ea03358c4e75e89e08a74845d7) by beachball)
+- Bump @fluentui/react-label to v9.0.17 ([commit](https://github.com/microsoft/fluentui/commit/a870d8360e47f3ea03358c4e75e89e08a74845d7) by beachball)
+- Bump @fluentui/react-tabster to v9.3.7 ([commit](https://github.com/microsoft/fluentui/commit/a870d8360e47f3ea03358c4e75e89e08a74845d7) by beachball)
 ## [9.0.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.17)
-Mon, 09 Jan 2023 14:31:49 GMT
+Mon, 09 Jan 2023 14:35:02 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.16..@fluentui/react-switch_v9.0.17)
 ### Patches
-- Bump @fluentui/react-field to v9.0.0-alpha.14 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
-- Bump @fluentui/react-label to v9.0.16 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
-- Bump @fluentui/react-tabster to v9.3.6 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
-- Bump @fluentui/react-utilities to v9.4.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-field to v9.0.0-alpha.14 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-label to v9.0.16 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-tabster to v9.3.6 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-utilities to v9.4.0 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
 ## [9.0.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.16)

package/lib/components/Switch/useSwitchStyles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 export const switchClassNames = {
   root: 'fui-Switch',
   indicator: 'fui-Switch__indicator',
@@ -16,164 +16,24 @@ const spaceBetweenThumbAndTrack = 2;
 const trackHeight = 20;
 const trackWidth = 40;
 const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
+const 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;}"]);
 const useRootStyles = /*#__PURE__*/__styles({
-  base: {
-    Bt984gj: "f6jr5hl",
-    B7ck84d: "f1ewtqcl",
-    mc9l5x: "ftuwxu6",
-    qhf8xq: "f10pi13n",
-    Brovlpu: "ftqa4ok",
-    B486eqv: "f2hkw1w",
-    Bssx7fj: "f1b1k54r",
-    uh7if5: ["f4ne723", "fqqcjud"],
-    clntm0: "fh7aioi",
-    Dlk2r6: ["fqqcjud", "f4ne723"],
-    B2j2mmj: "ffht0p2",
-    wigs8: "f1p0ul1q",
-    pbfy6t: "f1c901ms",
-    B0v4ure: "f1alokd7",
-    ghq09: "f78i1la",
-    B24cy0v: ["f1kvsw7t", "f1bw8brt"],
-    Bwckmig: "f8k7e5g",
-    Bvwlmkc: ["f1bw8brt", "f1kvsw7t"],
-    Bbgo44z: "f1pmxfrl",
-    Bil7v7r: ["fszkfcr", "f1ap5ily"],
-    skfxo0: "f57dp0y",
-    jo1ztg: ["f1ap5ily", "fszkfcr"],
-    Ba3ybja: ["f11dm2qb", "f136rfnd"],
-    az1dzo: ["f136rfnd", "f11dm2qb"],
-    vppk2z: ["fdsq1qd", "f1khssms"],
-    B6352mv: ["f1khssms", "fdsq1qd"],
-    nr063g: "fq4eyks",
-    Blmvk6g: ["f1ya6x16", "ftuszwa"],
-    Bsiemmq: "f1e2iu44",
-    B98u21t: ["ftuszwa", "f1ya6x16"],
-    B2pnrqr: "f1xkdug0",
-    Bhhzhcn: "f1m1ywml",
-    Bec0n69: ["f7u4kgv", "f1a36mvi"],
-    B29w5g4: ["f1a36mvi", "f7u4kgv"]
-  },
   vertical: {
     Beiy3e4: "f1vx9l62"
   }
 }, {
-  d: [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1xkdug0[data-fui-focus-within]:focus-within::after{top:-2px;}", ".f1m1ywml[data-fui-focus-within]:focus-within::after{bottom:-2px;}", ".f7u4kgv[data-fui-focus-within]:focus-within::after{left:-2px;}", ".f1a36mvi[data-fui-focus-within]:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"],
-  f: [".ftqa4ok:focus{outline-style:none;}"],
-  i: [".f2hkw1w:focus-visible{outline-style:none;}"]
+  d: [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
 });
+const 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;}}"]);
 const useIndicatorStyles = /*#__PURE__*/__styles({
-  base: {
-    Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
-    Beyfa6y: ["f1nfllo7", "f8fbkgy"],
-    B7oj6ja: ["f1djnp8u", "f1s8kh49"],
-    Btl43ni: ["f1s8kh49", "f1djnp8u"],
-    icvyot: "fzkkow9",
-    vrafjx: ["fcdblym", "fjik90z"],
-    oivjwe: "fg706s2",
-    wvpqe5: ["fjik90z", "fcdblym"],
-    B4j52fo: "f5ogflp",
-    Bekrc4i: ["f1hqa2wf", "finvdd3"],
-    Bn0qgzm: "f1f09k3d",
-    ibv6hh: ["finvdd3", "f1hqa2wf"],
-    Bg96gwp: "fez10in",
-    B7ck84d: "f1ewtqcl",
-    Bkfmm31: "f1w9h62z",
-    Bnnss6s: "fi64zpg",
-    Be2twd7: "fg38ndl",
-    Bqenvij: "fjamq6b",
-    B6of3ja: "frnwi6n",
-    t21cq0: ["f1vcna3q", "foyynoy"],
-    jrapky: "fqcjy3b",
-    Frg6f3: ["foyynoy", "f1vcna3q"],
-    Bkecrkj: "f1aehjj5",
-    B3o57yi: "f1vze9yt",
-    Bkqvd7p: "f17wnm97",
-    Bmy1vo4: "fo99fu7",
-    a9b677: "feqmc2u",
-    Hwfdqs: "f1onx1g3",
-    Hkqiji: "f1h74hm9",
-    Bgrs90m: "f1592id",
-    B0zx559: "f1uwej41",
-    c0im90: "fpz7fqq"
-  },
   labelAbove: {
     B6of3ja: "f1hu3pq6"
   }
 }, {
-  d: [".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fez10in{line-height:0;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".fg38ndl{font-size:18px;}", ".fjamq6b{height:20px;}", ".frnwi6n{margin-top:var(--spacingVerticalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}", ".f1aehjj5{pointer-events:none;}", ".f1vze9yt{transition-duration:var(--durationNormal);}", ".f17wnm97{transition-timing-function:var(--curveEasyEase);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1h74hm9>*{transition-duration:var(--durationNormal);}", ".f1592id>*{transition-timing-function:var(--curveEasyEase);}", ".f1uwej41>*{transition-property:transform;}", ".f1hu3pq6{margin-top:0;}"],
-  m: [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
-    m: "screen and (prefers-reduced-motion: reduce)"
-  }], ["@media screen and (prefers-reduced-motion: reduce){.fpz7fqq>*{transition-duration:0.01ms;}}", {
-    m: "screen and (prefers-reduced-motion: reduce)"
-  }]]
+  d: [".f1hu3pq6{margin-top:0;}"]
 });
+const 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;}}"]);
 const useInputStyles = /*#__PURE__*/__styles({
-  base: {
-    B7ck84d: "f1ewtqcl",
-    Bceei9c: "f1k6fduh",
-    Bqenvij: "f1l02sjl",
-    B6of3ja: "f1hu3pq6",
-    t21cq0: ["f11qmguv", "f1tyq0we"],
-    jrapky: "f19f4twv",
-    Frg6f3: ["f1tyq0we", "f11qmguv"],
-    abs64n: "fk73vx1",
-    qhf8xq: "f1euv43f",
-    a9b677: "f1ry1bn9",
-    fv8x6k: ["f3l1kk6", "f1kez0x4"],
-    ezr58z: "fvxnmui",
-    Blezdol: "f1cxq9o1",
-    k28iui: "f1q9yyk5",
-    B8f96ig: "f1ks1zsm",
-    po7uxr: "fiqfi0i",
-    inq7wv: "f9aagkg",
-    Cdugon: ["fgv8l18", "f1p3jmxb"],
-    ptsei1: "f11yi64e",
-    bl04ud: ["f1p3jmxb", "fgv8l18"],
-    Bu7dm46: "fthrly9",
-    Gwwlnz: "fhdp2ht",
-    wb1her: "f1rzj6jj",
-    Bmieemq: ["f1jywl1l", "f13d626x"],
-    Bdgjgzg: "f1ivtmze",
-    B05cvx7: ["f13d626x", "f1jywl1l"],
-    Bx4eqiv: "f1uvnr57",
-    xhnoxe: "frhcydi",
-    Hnmc4c: ["f1pvt3n7", "f14i0clv"],
-    By8gkvz: "fq9gcw4",
-    lekrm4: ["f14i0clv", "f1pvt3n7"],
-    Bei91sp: "f1se0d6r",
-    Bksztz9: "f8l9son",
-    h3gz1v: "f1c4gun2",
-    Cw6427: ["flhgtcm", "fx1zdd8"],
-    Bpbd9g9: "fayrp2e",
-    ssulyh: ["fx1zdd8", "flhgtcm"],
-    vq7rp1: "f1p715pa",
-    ynrfiu: "firogjh",
-    Bf5tpyt: ["f1crd6p1", "for8100"],
-    Brhic7g: "f1v5j4zb",
-    Cqvc5u: ["for8100", "f1crd6p1"],
-    B4e80u0: "f116zuoq",
-    Bwj41i9: "fxvotg6",
-    B2iiaa1: ["fk9ur30", "f3u5smv"],
-    Bejmxmv: "fdtj07x",
-    rqauf5: ["f3u5smv", "fk9ur30"],
-    wo5z87: "fv5mb1o",
-    B50joxe: ["f1i2l8ou", "fxj1kmv"],
-    Bmuizf1: "fku528b",
-    f4urji: ["fxj1kmv", "f1i2l8ou"],
-    Bxiq1ly: "fabcpc0",
-    vbmdq8: "f17xwy6w",
-    u4vbwo: ["fipwscc", "fab39iv"],
-    Bfjga03: "f1th5z1l",
-    F0s3py: ["fab39iv", "fipwscc"]
-  },
-  highContrast: {
-    Bskmvfo: "f19h63kc",
-    zhypoe: "ffutfdj",
-    Bb6xxwe: ["f72m8yo", "f1ud47z9"],
-    o89t22: "f15xfkur",
-    B7qxyha: ["f1ud47z9", "f72m8yo"],
-    Bhmcd6p: "f1jaqqzs"
-  },
   before: {
     j35jbq: ["f1e31b4d", "f1vgc2s3"],
     Bhzewxz: "f15twtuk"
@@ -188,21 +48,9 @@ const useInputStyles = /*#__PURE__*/__styles({
     a9b677: "fly5x3f"
   }
 }, {
-  d: [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f1ry1bn9{width:calc(40px + 2 * var(--spacingHorizontalS));}", ".f3l1kk6:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".f1kez0x4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1q9yyk5:disabled~.fui-Switch__label{cursor:default;}", ".f1ks1zsm:disabled~.fui-Switch__label{color:var(--colorNeutralForegroundDisabled);}", ".fiqfi0i:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);}", ".f9aagkg:enabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fgv8l18:enabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1p3jmxb:enabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f11yi64e:enabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fthrly9:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".fhdp2ht:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);}", ".f1rzj6jj:enabled:not(:checked):hover~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1jywl1l:enabled:not(:checked):hover~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13d626x:enabled:not(:checked):hover~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1ivtmze:enabled:not(:checked):hover~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1uvnr57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);}", ".frhcydi:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1pvt3n7:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f14i0clv:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fq9gcw4:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1se0d6r:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);}", ".f8l9son:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundInverted);}", ".f1c4gun2:enabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStroke);}", ".flhgtcm:enabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStroke);}", ".fx1zdd8:enabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStroke);}", ".fayrp2e:enabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStroke);}", ".f1p715pa:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".firogjh:enabled:checked:hover~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crd6p1:enabled:checked:hover~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".for8100:enabled:checked:hover~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1v5j4zb:enabled:checked:hover~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f116zuoq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".fxvotg6:enabled:checked:hover:active~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk9ur30:enabled:checked:hover:active~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f3u5smv:enabled:checked:hover:active~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fdtj07x:enabled:checked:hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fv5mb1o:disabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1i2l8ou:disabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fxj1kmv:disabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fku528b:disabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fabcpc0:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);}", ".f17xwy6w:disabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeDisabled);}", ".fipwscc:disabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fab39iv:disabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f1th5z1l:disabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}", ".fly5x3f{width:100%;}"],
-  m: [["@media (forced-colors: active){.f19h63kc:disabled~.fui-Switch__indicator{color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.ffutfdj:disabled~.fui-Switch__indicator{border-top-color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f15xfkur:disabled~.fui-Switch__indicator{border-bottom-color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1jaqqzs:disabled~.fui-Switch__label{color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }]]
+  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__*/__styles({
   base: {
     Bceei9c: "f1k6fduh",
@@ -231,17 +79,20 @@ const useLabelStyles = /*#__PURE__*/__styles({
  * Apply styling to the Switch slots based on the state
  */
 export 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 = mergeClasses(switchClassNames.root, rootStyles.base, labelPosition === 'above' && rootStyles.vertical, state.root.className);
-  state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
-  state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, inputStyles.highContrast, label && inputStyles[labelPosition], state.input.className);
+  state.root.className = mergeClasses(switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
+  state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
+  state.input.className = mergeClasses(switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);
   if (state.label) {
     state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
   }

package/lib/components/Switch/useSwitchStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAIrE,OAAO,MAAMC,gBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE,uBAAuB;EAClCC,KAAK,EAAE,mBAAmB;EAC1BC,KAAK,EAAE;CACR;AAED;;;AAGA,OAAO,MAAMC,eAAe,GAAGL,gBAAgB,CAACC,IAAI;AAEpD;AACA,MAAMK,yBAAyB,GAAG,CAAC;AACnC,MAAMC,WAAW,GAAG,EAAE;AACtB,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,SAAS,GAAGF,WAAW,GAAGD,yBAAyB;AAEzD,MAAMI,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAapB;AAEF,MAAMC,kBAAkB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAoCzB;AAEF,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAiIrB;AAEF,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAsBrB;AAEF;;;AAGA,OAAO,MAAMC,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAMC,UAAU,GAAGN,aAAa,EAAE;EAClC,MAAMO,eAAe,GAAGN,kBAAkB,EAAE;EAC5C,MAAMO,WAAW,GAAGN,cAAc,EAAE;EACpC,MAAMO,WAAW,GAAGN,cAAc,EAAE;EAEpC,MAAM;IAAET,KAAK;IAAEgB;EAAa,CAAE,GAAGL,KAAK;EAEtCA,KAAK,CAACd,IAAI,CAACoB,SAAS,GAAGvB,YAAY,CACjCE,gBAAgB,CAACC,IAAI,EACrBe,UAAU,CAACM,IAAI,EACfF,aAAa,KAAK,OAAO,IAAIJ,UAAU,CAACO,QAAQ,EAChDR,KAAK,CAACd,IAAI,CAACoB,SAAS,CACrB;EAEDN,KAAK,CAACb,SAAS,CAACmB,SAAS,GAAGvB,YAAY,CACtCE,gBAAgB,CAACE,SAAS,EAC1Be,eAAe,CAACK,IAAI,EACpBlB,KAAK,IAAIgB,aAAa,KAAK,OAAO,IAAIH,eAAe,CAACO,UAAU,EAChET,KAAK,CAACb,SAAS,CAACmB,SAAS,CAC1B;EAEDN,KAAK,CAACZ,KAAK,CAACkB,SAAS,GAAGvB,YAAY,CAClCE,gBAAgB,CAACG,KAAK,EACtBe,WAAW,CAACI,IAAI,EAChBJ,WAAW,CAACO,YAAY,EACxBrB,KAAK,IAAIc,WAAW,CAACE,aAAa,CAAC,EACnCL,KAAK,CAACZ,KAAK,CAACkB,SAAS,CACtB;EAED,IAAIN,KAAK,CAACX,KAAK,EAAE;IACfW,KAAK,CAACX,KAAK,CAACiB,SAAS,GAAGvB,YAAY,CAClCE,gBAAgB,CAACI,KAAK,EACtBe,WAAW,CAACG,IAAI,EAChBH,WAAW,CAACC,aAAa,CAAC,EAC1BL,KAAK,CAACX,KAAK,CAACiB,SAAS,CACtB;;EAGH,OAAON,KAAK;AACd,CAAC","names":["createFocusOutlineStyle","tokens","mergeClasses","shorthands","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootStyles","useIndicatorStyles","useInputStyles","useLabelStyles","useSwitchStyles_unstable","state","rootStyles","indicatorStyles","inputStyles","labelStyles","labelPosition","className","base","vertical","labelAbove","highContrast"],"sourceRoot":"../src/","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 { 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 useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n ...shorthands.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\n labelAbove: {\n marginTop: 0,\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n\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 ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.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 ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n ...shorthands.borderColor('GrayText'),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n\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\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 rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { label, labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(\n switchClassNames.indicator,\n indicatorStyles.base,\n label && labelPosition === 'above' && indicatorStyles.labelAbove,\n state.indicator.className,\n );\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\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"]}
1	+ {"version":3,"mappings":"AAAA,SAASA,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,kCAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAItF,OAAO,MAAMC,gBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,SAAS,EAAE,uBAAuB;EAClCC,KAAK,EAAE,mBAAmB;EAC1BC,KAAK,EAAE;CACR;AAED;;;AAGA,OAAO,MAAMC,eAAe,GAAGL,gBAAgB,CAACC,IAAI;AAEpD;AACA,MAAMK,yBAAyB,GAAG,CAAC;AACnC,MAAMC,WAAW,GAAG,EAAE;AACtB,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,SAAS,GAAGF,WAAW,GAAGD,yBAAyB;AAEzD,MAAMI,oBAAoB,gBAAG,6+EAO3B;AAEF,MAAMC,aAAa,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAIpB;AAEF,MAAMC,yBAAyB,gBAAG,yxBA6BhC;AAEF,MAAMC,kBAAkB,gBAAG;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAIzB;AAEF,MAAMC,qBAAqB,gBAAG,6qIA+G5B;AAEF,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAcrB;AAEF;AACA,MAAMC,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAsBrB;AAEF;;;AAGA,OAAO,MAAMC,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAMC,iBAAiB,GAAGT,oBAAoB,EAAE;EAChD,MAAMU,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,GAAG7B,YAAY,CACjCE,gBAAgB,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,GAAG7B,YAAY,CACtCE,gBAAgB,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,GAAG7B,YAAY,CAClCE,gBAAgB,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,GAAG7B,YAAY,CAClCE,gBAAgB,CAACI,KAAK,EACtBqB,WAAW,CAACK,IAAI,EAChBL,WAAW,CAACC,aAAa,CAAC,EAC1BR,KAAK,CAACd,KAAK,CAACuB,SAAS,CACtB;;EAGH,OAAOT,KAAK;AACd,CAAC","names":["createFocusOutlineStyle","tokens","mergeClasses","shorthands","switchClassNames","root","indicator","input","label","switchClassName","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootBaseClassName","useRootStyles","useIndicatorBaseClassName","useIndicatorStyles","useInputBaseClassName","useInputStyles","useLabelStyles","useSwitchStyles_unstable","state","rootBaseClassName","rootStyles","indicatorBaseClassName","indicatorStyles","inputBaseClassName","inputStyles","labelStyles","labelPosition","className","vertical","labelAbove","base"],"sourceRoot":"../src/","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-amd/components/Switch/useSwitchStyles.js CHANGED Viewed

@@ -18,93 +18,142 @@ define(["require", "exports", "tslib", "@fluentui/react-tabster", "@fluentui/rea
     var trackHeight = 20;
     var trackWidth = 40;
     var thumbSize = trackHeight - spaceBetweenThumbAndTrack;
+    var useRootBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ alignItems: 'flex-start', boxSizing: 'border-box', display: 'inline-flex', position: 'relative' }, react_tabster_1.createFocusOutlineStyle({ style: {}, selector: 'focus-within' })));
     var useRootStyles = react_1.makeStyles({
-        base: tslib_1.__assign({ alignItems: 'flex-start', boxSizing: 'border-box', display: 'inline-flex', position: 'relative' }, react_tabster_1.createFocusOutlineStyle({ style: {}, selector: 'focus-within' })),
         vertical: {
             flexDirection: 'column',
         },
     });
-    var useIndicatorStyles = react_1.makeStyles({
-        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), react_1.shorthands.borderStyle('solid')), react_1.shorthands.borderWidth('1px')), { lineHeight: 0, boxSizing: 'border-box', fill: 'currentColor', flexShrink: 0, fontSize: thumbSize + "px", height: trackHeight + "px" }), react_1.shorthands.margin(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalS)), { pointerEvents: 'none', transitionDuration: react_theme_1.tokens.durationNormal, transitionTimingFunction: react_theme_1.tokens.curveEasyEase, transitionProperty: 'background, border, color', width: trackWidth + "px", '@media screen and (prefers-reduced-motion: reduce)': {
+    var useIndicatorBaseClassName = react_1.makeResetStyles({
+        borderRadius: react_theme_1.tokens.borderRadiusCircular,
+        border: '1px solid',
+        lineHeight: 0,
+        boxSizing: 'border-box',
+        fill: 'currentColor',
+        flexShrink: 0,
+        fontSize: thumbSize + "px",
+        height: trackHeight + "px",
+        margin: react_theme_1.tokens.spacingVerticalS + ' ' + react_theme_1.tokens.spacingHorizontalS,
+        pointerEvents: 'none',
+        transitionDuration: react_theme_1.tokens.durationNormal,
+        transitionTimingFunction: react_theme_1.tokens.curveEasyEase,
+        transitionProperty: 'background, border, color',
+        width: trackWidth + "px",
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            transitionDuration: '0.01ms',
+        },
+        '> *': {
+            transitionDuration: react_theme_1.tokens.durationNormal,
+            transitionTimingFunction: react_theme_1.tokens.curveEasyEase,
+            transitionProperty: 'transform',
+            '@media screen and (prefers-reduced-motion: reduce)': {
                 transitionDuration: '0.01ms',
-            }, '> *': {
-                transitionDuration: react_theme_1.tokens.durationNormal,
-                transitionTimingFunction: react_theme_1.tokens.curveEasyEase,
-                transitionProperty: 'transform',
-                '@media screen and (prefers-reduced-motion: reduce)': {
-                    transitionDuration: '0.01ms',
-                },
-            } }),
+            },
+        },
+    });
+    var useIndicatorStyles = react_1.makeStyles({
         labelAbove: {
             marginTop: 0,
         },
     });
-    var useInputStyles = react_1.makeStyles({
-        base: tslib_1.__assign(tslib_1.__assign({ boxSizing: 'border-box', cursor: 'pointer', height: '100%' }, react_1.shorthands.margin(0)), { opacity: 0, position: 'absolute',
-            // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.
-            // This is done so that clicking on that "empty space" still toggles the switch.
-            width: "calc(" + trackWidth + "px + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")",
-            // Checked (both enabled and disabled)
-            ':checked': (_a = {},
-                _a["& ~ ." + exports.switchClassNames.indicator] = {
-                    '> *': {
-                        transform: "translateX(" + (trackWidth - thumbSize - spaceBetweenThumbAndTrack) + "px)",
-                    },
+    var useInputBaseClassName = react_1.makeResetStyles({
+        boxSizing: 'border-box',
+        cursor: 'pointer',
+        height: '100%',
+        margin: 0,
+        opacity: 0,
+        position: 'absolute',
+        // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.
+        // This is done so that clicking on that "empty space" still toggles the switch.
+        width: "calc(" + trackWidth + "px + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")",
+        // Checked (both enabled and disabled)
+        ':checked': (_a = {},
+            _a["& ~ ." + exports.switchClassNames.indicator] = {
+                '> *': {
+                    transform: "translateX(" + (trackWidth - thumbSize - spaceBetweenThumbAndTrack) + "px)",
                 },
-                _a),
-            // Disabled (both checked and unchecked)
-            ':disabled': (_b = {
-                    cursor: 'default'
+            },
+            _a),
+        // Disabled (both checked and unchecked)
+        ':disabled': (_b = {
+                cursor: 'default'
+            },
+            _b["& ~ ." + exports.switchClassNames.indicator] = {
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+            _b["& ~ ." + exports.switchClassNames.label] = {
+                cursor: 'default',
+                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            },
+            _b),
+        // Enabled and unchecked
+        ':enabled:not(:checked)': (_c = {},
+            _c["& ~ ." + exports.switchClassNames.indicator] = {
+                color: react_theme_1.tokens.colorNeutralStrokeAccessible,
+                borderColor: react_theme_1.tokens.colorNeutralStrokeAccessible,
+            },
+            _c["& ~ ." + exports.switchClassNames.label] = {
+                color: react_theme_1.tokens.colorNeutralForeground1,
+            },
+            _c[':hover'] = (_d = {},
+                _d["& ~ ." + exports.switchClassNames.indicator] = {
+                    color: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
+                    borderColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
                 },
-                _b["& ~ ." + exports.switchClassNames.indicator] = {
-                    color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                _d),
+            _c[':hover:active'] = (_e = {},
+                _e["& ~ ." + exports.switchClassNames.indicator] = {
+                    color: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
+                    borderColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
                 },
-                _b["& ~ ." + exports.switchClassNames.label] = {
-                    cursor: 'default',
-                    color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+                _e),
+            _c),
+        // Enabled and checked
+        ':enabled:checked': (_f = {},
+            _f["& ~ ." + exports.switchClassNames.indicator] = {
+                backgroundColor: react_theme_1.tokens.colorCompoundBrandBackground,
+                color: react_theme_1.tokens.colorNeutralForegroundInverted,
+                borderColor: react_theme_1.tokens.colorTransparentStroke,
+            },
+            _f[':hover'] = (_g = {},
+                _g["& ~ ." + exports.switchClassNames.indicator] = {
+                    backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundHover,
+                    borderColor: react_theme_1.tokens.colorTransparentStrokeInteractive,
                 },
-                _b),
-            // Enabled and unchecked
-            ':enabled:not(:checked)': (_c = {},
-                _c["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ color: react_theme_1.tokens.colorNeutralStrokeAccessible }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessible)),
-                _c["& ~ ." + exports.switchClassNames.label] = {
-                    color: react_theme_1.tokens.colorNeutralForeground1,
+                _g),
+            _f[':hover:active'] = (_h = {},
+                _h["& ~ ." + exports.switchClassNames.indicator] = {
+                    backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundPressed,
+                    borderColor: react_theme_1.tokens.colorTransparentStrokeInteractive,
                 },
-                _c[':hover'] = (_d = {},
-                    _d["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ color: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessibleHover)),
-                    _d),
-                _c[':hover:active'] = (_e = {},
-                    _e["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ color: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessiblePressed)),
-                    _e),
-                _c),
-            // Enabled and checked
-            ':enabled:checked': (_f = {},
-                _f["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackground, color: react_theme_1.tokens.colorNeutralForegroundInverted }, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStroke)),
-                _f[':hover'] = (_g = {},
-                    _g["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundHover }, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeInteractive)),
-                    _g),
-                _f[':hover:active'] = (_h = {},
-                    _h["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundPressed }, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeInteractive)),
-                    _h),
-                _f),
-            // Disabled and unchecked
-            ':disabled:not(:checked)': (_j = {},
-                _j["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)),
-                _j),
-            // Disabled and checked
-            ':disabled:checked': (_k = {},
-                _k["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeDisabled)),
-                _k) }),
-        highContrast: {
-            '@media (forced-colors: active)': {
-                ':disabled': (_l = {},
-                    _l["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ color: 'GrayText' }, react_1.shorthands.borderColor('GrayText')),
-                    _l["& ~ ." + exports.switchClassNames.label] = {
-                        color: 'GrayText',
-                    },
-                    _l),
+                _h),
+            _f),
+        // Disabled and unchecked
+        ':disabled:not(:checked)': (_j = {},
+            _j["& ~ ." + exports.switchClassNames.indicator] = {
+                borderColor: react_theme_1.tokens.colorNeutralStrokeDisabled,
             },
+            _j),
+        // Disabled and checked
+        ':disabled:checked': (_k = {},
+            _k["& ~ ." + exports.switchClassNames.indicator] = {
+                backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled,
+                borderColor: react_theme_1.tokens.colorTransparentStrokeDisabled,
+            },
+            _k),
+        '@media (forced-colors: active)': {
+            ':disabled': (_l = {},
+                _l["& ~ ." + exports.switchClassNames.indicator] = {
+                    color: 'GrayText',
+                    borderColor: 'GrayText',
+                },
+                _l["& ~ ." + exports.switchClassNames.label] = {
+                    color: 'GrayText',
+                },
+                _l),
         },
+    });
+    var useInputStyles = react_1.makeStyles({
         before: {
             right: 0,
             top: 0,
@@ -119,6 +168,7 @@ define(["require", "exports", "tslib", "@fluentui/react-tabster", "@fluentui/rea
             width: '100%',
         },
     });
+    // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
     var useLabelStyles = react_1.makeStyles({
         base: tslib_1.__assign({ cursor: 'pointer',
             // Use a (negative) margin to account for the difference between the track's height and the label's line height.
@@ -140,14 +190,17 @@ define(["require", "exports", "tslib", "@fluentui/react-tabster", "@fluentui/rea
      * Apply styling to the Switch slots based on the state
      */
     var useSwitchStyles_unstable = function (state) {
+        var rootBaseClassName = useRootBaseClassName();
         var rootStyles = useRootStyles();
+        var indicatorBaseClassName = useIndicatorBaseClassName();
         var indicatorStyles = useIndicatorStyles();
+        var inputBaseClassName = useInputBaseClassName();
         var inputStyles = useInputStyles();
         var labelStyles = useLabelStyles();
         var label = state.label, labelPosition = state.labelPosition;
-        state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootStyles.base, labelPosition === 'above' && rootStyles.vertical, state.root.className);
-        state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator, indicatorStyles.base, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
-        state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputStyles.base, inputStyles.highContrast, label && inputStyles[labelPosition], state.input.className);
+        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);
         }

package/lib-amd/components/Switch/useSwitchStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSwitchStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts"],"names":[],"mappings":";;;;;IAMa,QAAA,gBAAgB,GAAgC;QAC3D,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,uBAAuB;QAClC,KAAK,EAAE,mBAAmB;QAC1B,KAAK,EAAE,mBAAmB;KAC3B,CAAC;IAEF;;OAEG;IACU,QAAA,eAAe,GAAG,wBAAgB,CAAC,IAAI,CAAC;IAErD,+CAA+C;IAC/C,IAAM,yBAAyB,GAAG,CAAC,CAAC;IACpC,IAAM,WAAW,GAAG,EAAE,CAAC;IACvB,IAAM,UAAU,GAAG,EAAE,CAAC;IACtB,IAAM,SAAS,GAAG,WAAW,GAAG,yBAAyB,CAAC;IAE1D,IAAM,aAAa,GAAG,kBAAU,CAAC;QAC/B,IAAI,qBACF,UAAU,EAAE,YAAY,EACxB,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,UAAU,IAEjB,uCAAuB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,CACpE;QAED,QAAQ,EAAE;YACR,aAAa,EAAE,QAAQ;SACxB;KACF,CAAC,CAAC;IAEH,IAAM,kBAAkB,GAAG,kBAAU,CAAC;QACpC,IAAI,4GACC,kBAAU,CAAC,YAAY,CAAC,oBAAM,CAAC,oBAAoB,CAAC,GACpD,kBAAU,CAAC,WAAW,CAAC,OAAO,CAAC,GAC/B,kBAAU,CAAC,WAAW,CAAC,KAAK,CAAC,KAChC,UAAU,EAAE,CAAC,EACb,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,cAAc,EACpB,UAAU,EAAE,CAAC,EACb,QAAQ,EAAK,SAAS,OAAI,EAC1B,MAAM,EAAK,WAAW,OAAI,KACvB,kBAAU,CAAC,MAAM,CAAC,oBAAM,CAAC,gBAAgB,EAAE,oBAAM,CAAC,kBAAkB,CAAC,KACxE,aAAa,EAAE,MAAM,EACrB,kBAAkB,EAAE,oBAAM,CAAC,cAAc,EACzC,wBAAwB,EAAE,oBAAM,CAAC,aAAa,EAC9C,kBAAkB,EAAE,2BAA2B,EAC/C,KAAK,EAAK,UAAU,OAAI,EAExB,oDAAoD,EAAE;gBACpD,kBAAkB,EAAE,QAAQ;aAC7B,EAED,KAAK,EAAE;gBACL,kBAAkB,EAAE,oBAAM,CAAC,cAAc;gBACzC,wBAAwB,EAAE,oBAAM,CAAC,aAAa;gBAC9C,kBAAkB,EAAE,WAAW;gBAE/B,oDAAoD,EAAE;oBACpD,kBAAkB,EAAE,QAAQ;iBAC7B;aACF,GACF;QAED,UAAU,EAAE;YACV,SAAS,EAAE,CAAC;SACb;KACF,CAAC,CAAC;IAEH,IAAM,cAAc,GAAG,kBAAU,CAAC;QAChC,IAAI,sCACF,SAAS,EAAE,YAAY,EACvB,MAAM,EAAE,SAAS,EACjB,MAAM,EAAE,MAAM,IACX,kBAAU,CAAC,MAAM,CAAC,CAAC,CAAC,KACvB,OAAO,EAAE,CAAC,EACV,QAAQ,EAAE,UAAU;YAEpB,oHAAoH;YACpH,gFAAgF;YAChF,KAAK,EAAE,UAAQ,UAAU,iBAAY,oBAAM,CAAC,kBAAkB,MAAG;YAEjE,sCAAsC;YACtC,UAAU;gBACR,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;oBACtC,KAAK,EAAE;wBACL,SAAS,EAAE,iBAAc,UAAU,GAAG,SAAS,GAAG,yBAAyB,SAAK;qBACjF;iBACF;;YAGH,wCAAwC;YACxC,WAAW;oBACT,MAAM,EAAE,SAAS;;gBAEjB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;oBACtC,KAAK,EAAE,oBAAM,CAAC,8BAA8B;iBAC7C;gBAED,GAAC,UAAQ,wBAAgB,CAAC,KAAO,IAAG;oBAClC,MAAM,EAAE,SAAS;oBACjB,KAAK,EAAE,oBAAM,CAAC,8BAA8B;iBAC7C;;YAGH,wBAAwB;YACxB,wBAAwB;gBACtB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,KAAK,EAAE,oBAAM,CAAC,4BAA4B,IACvC,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,4BAA4B,CAAC,CAC/D;gBAED,GAAC,UAAQ,wBAAgB,CAAC,KAAO,IAAG;oBAClC,KAAK,EAAE,oBAAM,CAAC,uBAAuB;iBACtC;gBAED,YAAQ;oBACN,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,KAAK,EAAE,oBAAM,CAAC,iCAAiC,IAC5C,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,iCAAiC,CAAC,CACpE;uBACF;gBAED,mBAAe;oBACb,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,KAAK,EAAE,oBAAM,CAAC,mCAAmC,IAC9C,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,mCAAmC,CAAC,CACtE;uBACF;;YAGH,sBAAsB;YACtB,kBAAkB;gBAChB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,eAAe,EAAE,oBAAM,CAAC,4BAA4B,EACpD,KAAK,EAAE,oBAAM,CAAC,8BAA8B,IACzC,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,sBAAsB,CAAC,CACzD;gBAED,YAAQ;oBACN,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,eAAe,EAAE,oBAAM,CAAC,iCAAiC,IACtD,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,iCAAiC,CAAC,CACpE;uBACF;gBAED,mBAAe;oBACb,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,eAAe,EAAE,oBAAM,CAAC,mCAAmC,IACxD,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,iCAAiC,CAAC,CACpE;uBACF;;YAGH,yBAAyB;YACzB,yBAAyB;gBACvB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,yBAChC,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,0BAA0B,CAAC,CAC7D;;YAGH,uBAAuB;YACvB,mBAAmB;gBACjB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,eAAe,EAAE,oBAAM,CAAC,8BAA8B,IACnD,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,8BAA8B,CAAC,CACjE;sBAEJ;QAED,YAAY,EAAE;YACZ,gCAAgC,EAAE;gBAChC,WAAW;oBACT,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,KAAK,EAAE,UAAU,IACd,kBAAU,CAAC,WAAW,CAAC,UAAU,CAAC,CACtC;oBAED,GAAC,UAAQ,wBAAgB,CAAC,KAAO,IAAG;wBAClC,KAAK,EAAE,UAAU;qBAClB;uBACF;aACF;SACF;QAED,MAAM,EAAE;YACN,KAAK,EAAE,CAAC;YACR,GAAG,EAAE,CAAC;SACP;QACD,KAAK,EAAE;YACL,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;SACP;QACD,KAAK,EAAE;YACL,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,UAAQ,WAAW,aAAQ,oBAAM,CAAC,gBAAgB,MAAG;YAC7D,KAAK,EAAE,MAAM;SACd;KACF,CAAC,CAAC;IAEH,IAAM,cAAc,GAAG,kBAAU,CAAC;QAChC,IAAI,qBACF,MAAM,EAAE,SAAS;YAEjB,gHAAgH;YAChH,iHAAiH;YACjH,YAAY,EAAE,WAAS,WAAW,aAAQ,oBAAM,CAAC,iBAAiB,WAAQ,EAC1E,SAAS,EAAE,WAAS,WAAW,aAAQ,oBAAM,CAAC,iBAAiB,WAAQ,IAEpE,kBAAU,CAAC,OAAO,CAAC,oBAAM,CAAC,gBAAgB,EAAE,oBAAM,CAAC,kBAAkB,CAAC,CAC1E;QACD,KAAK,EAAE;YACL,UAAU,EAAE,oBAAM,CAAC,iBAAiB;YACpC,aAAa,EAAE,oBAAM,CAAC,iBAAiB;YACvC,KAAK,EAAE,MAAM;SACd;QACD,KAAK,EAAE;YACL,WAAW,EAAE,oBAAM,CAAC,mBAAmB;SACxC;QACD,MAAM,EAAE;YACN,YAAY,EAAE,oBAAM,CAAC,mBAAmB;SACzC;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,wBAAwB,GAAG,UAAC,KAAkB;QACzD,IAAM,UAAU,GAAG,aAAa,EAAE,CAAC;QACnC,IAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;QAC7C,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;QACrC,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;QAE7B,IAAA,KAAK,GAAoB,KAAK,MAAzB,EAAE,aAAa,GAAK,KAAK,cAAV,CAAW;QAEvC,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,wBAAgB,CAAC,IAAI,EACrB,UAAU,CAAC,IAAI,EACf,aAAa,KAAK,OAAO,IAAI,UAAU,CAAC,QAAQ,EAChD,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,oBAAY,CACtC,wBAAgB,CAAC,SAAS,EAC1B,eAAe,CAAC,IAAI,EACpB,KAAK,IAAI,aAAa,KAAK,OAAO,IAAI,eAAe,CAAC,UAAU,EAChE,KAAK,CAAC,SAAS,CAAC,SAAS,CAC1B,CAAC;QAEF,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,oBAAY,CAClC,wBAAgB,CAAC,KAAK,EACtB,WAAW,CAAC,IAAI,EAChB,WAAW,CAAC,YAAY,EACxB,KAAK,IAAI,WAAW,CAAC,aAAa,CAAC,EACnC,KAAK,CAAC,KAAK,CAAC,SAAS,CACtB,CAAC;QAEF,IAAI,KAAK,CAAC,KAAK,EAAE;YACf,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,oBAAY,CAClC,wBAAgB,CAAC,KAAK,EACtB,WAAW,CAAC,IAAI,EAChB,WAAW,CAAC,aAAa,CAAC,EAC1B,KAAK,CAAC,KAAK,CAAC,SAAS,CACtB,CAAC;SACH;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAxCW,QAAA,wBAAwB,4BAwCnC","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { 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 useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n ...shorthands.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\n labelAbove: {\n marginTop: 0,\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n\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 ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.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 ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n ...shorthands.borderColor('GrayText'),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n\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\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 rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { label, labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(\n switchClassNames.indicator,\n indicatorStyles.base,\n label && labelPosition === 'above' && indicatorStyles.labelAbove,\n state.indicator.className,\n );\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\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"]}
1	+ {"version":3,"file":"useSwitchStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","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/Switch/useSwitchStyles.js CHANGED Viewed

@@ -22,164 +22,24 @@ const spaceBetweenThumbAndTrack = 2;
 const trackHeight = 20;
 const trackWidth = 40;
 const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
+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({
-  base: {
-    Bt984gj: "f6jr5hl",
-    B7ck84d: "f1ewtqcl",
-    mc9l5x: "ftuwxu6",
-    qhf8xq: "f10pi13n",
-    Brovlpu: "ftqa4ok",
-    B486eqv: "f2hkw1w",
-    Bssx7fj: "f1b1k54r",
-    uh7if5: ["f4ne723", "fqqcjud"],
-    clntm0: "fh7aioi",
-    Dlk2r6: ["fqqcjud", "f4ne723"],
-    B2j2mmj: "ffht0p2",
-    wigs8: "f1p0ul1q",
-    pbfy6t: "f1c901ms",
-    B0v4ure: "f1alokd7",
-    ghq09: "f78i1la",
-    B24cy0v: ["f1kvsw7t", "f1bw8brt"],
-    Bwckmig: "f8k7e5g",
-    Bvwlmkc: ["f1bw8brt", "f1kvsw7t"],
-    Bbgo44z: "f1pmxfrl",
-    Bil7v7r: ["fszkfcr", "f1ap5ily"],
-    skfxo0: "f57dp0y",
-    jo1ztg: ["f1ap5ily", "fszkfcr"],
-    Ba3ybja: ["f11dm2qb", "f136rfnd"],
-    az1dzo: ["f136rfnd", "f11dm2qb"],
-    vppk2z: ["fdsq1qd", "f1khssms"],
-    B6352mv: ["f1khssms", "fdsq1qd"],
-    nr063g: "fq4eyks",
-    Blmvk6g: ["f1ya6x16", "ftuszwa"],
-    Bsiemmq: "f1e2iu44",
-    B98u21t: ["ftuszwa", "f1ya6x16"],
-    B2pnrqr: "f1xkdug0",
-    Bhhzhcn: "f1m1ywml",
-    Bec0n69: ["f7u4kgv", "f1a36mvi"],
-    B29w5g4: ["f1a36mvi", "f7u4kgv"]
-  },
   vertical: {
     Beiy3e4: "f1vx9l62"
   }
 }, {
-  d: [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1xkdug0[data-fui-focus-within]:focus-within::after{top:-2px;}", ".f1m1ywml[data-fui-focus-within]:focus-within::after{bottom:-2px;}", ".f7u4kgv[data-fui-focus-within]:focus-within::after{left:-2px;}", ".f1a36mvi[data-fui-focus-within]:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"],
-  f: [".ftqa4ok:focus{outline-style:none;}"],
-  i: [".f2hkw1w:focus-visible{outline-style:none;}"]
+  d: [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
 });
+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({
-  base: {
-    Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
-    Beyfa6y: ["f1nfllo7", "f8fbkgy"],
-    B7oj6ja: ["f1djnp8u", "f1s8kh49"],
-    Btl43ni: ["f1s8kh49", "f1djnp8u"],
-    icvyot: "fzkkow9",
-    vrafjx: ["fcdblym", "fjik90z"],
-    oivjwe: "fg706s2",
-    wvpqe5: ["fjik90z", "fcdblym"],
-    B4j52fo: "f5ogflp",
-    Bekrc4i: ["f1hqa2wf", "finvdd3"],
-    Bn0qgzm: "f1f09k3d",
-    ibv6hh: ["finvdd3", "f1hqa2wf"],
-    Bg96gwp: "fez10in",
-    B7ck84d: "f1ewtqcl",
-    Bkfmm31: "f1w9h62z",
-    Bnnss6s: "fi64zpg",
-    Be2twd7: "fg38ndl",
-    Bqenvij: "fjamq6b",
-    B6of3ja: "frnwi6n",
-    t21cq0: ["f1vcna3q", "foyynoy"],
-    jrapky: "fqcjy3b",
-    Frg6f3: ["foyynoy", "f1vcna3q"],
-    Bkecrkj: "f1aehjj5",
-    B3o57yi: "f1vze9yt",
-    Bkqvd7p: "f17wnm97",
-    Bmy1vo4: "fo99fu7",
-    a9b677: "feqmc2u",
-    Hwfdqs: "f1onx1g3",
-    Hkqiji: "f1h74hm9",
-    Bgrs90m: "f1592id",
-    B0zx559: "f1uwej41",
-    c0im90: "fpz7fqq"
-  },
   labelAbove: {
     B6of3ja: "f1hu3pq6"
   }
 }, {
-  d: [".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fez10in{line-height:0;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".fg38ndl{font-size:18px;}", ".fjamq6b{height:20px;}", ".frnwi6n{margin-top:var(--spacingVerticalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}", ".f1aehjj5{pointer-events:none;}", ".f1vze9yt{transition-duration:var(--durationNormal);}", ".f17wnm97{transition-timing-function:var(--curveEasyEase);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1h74hm9>*{transition-duration:var(--durationNormal);}", ".f1592id>*{transition-timing-function:var(--curveEasyEase);}", ".f1uwej41>*{transition-property:transform;}", ".f1hu3pq6{margin-top:0;}"],
-  m: [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
-    m: "screen and (prefers-reduced-motion: reduce)"
-  }], ["@media screen and (prefers-reduced-motion: reduce){.fpz7fqq>*{transition-duration:0.01ms;}}", {
-    m: "screen and (prefers-reduced-motion: reduce)"
-  }]]
+  d: [".f1hu3pq6{margin-top:0;}"]
 });
+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({
-  base: {
-    B7ck84d: "f1ewtqcl",
-    Bceei9c: "f1k6fduh",
-    Bqenvij: "f1l02sjl",
-    B6of3ja: "f1hu3pq6",
-    t21cq0: ["f11qmguv", "f1tyq0we"],
-    jrapky: "f19f4twv",
-    Frg6f3: ["f1tyq0we", "f11qmguv"],
-    abs64n: "fk73vx1",
-    qhf8xq: "f1euv43f",
-    a9b677: "f1ry1bn9",
-    fv8x6k: ["f3l1kk6", "f1kez0x4"],
-    ezr58z: "fvxnmui",
-    Blezdol: "f1cxq9o1",
-    k28iui: "f1q9yyk5",
-    B8f96ig: "f1ks1zsm",
-    po7uxr: "fiqfi0i",
-    inq7wv: "f9aagkg",
-    Cdugon: ["fgv8l18", "f1p3jmxb"],
-    ptsei1: "f11yi64e",
-    bl04ud: ["f1p3jmxb", "fgv8l18"],
-    Bu7dm46: "fthrly9",
-    Gwwlnz: "fhdp2ht",
-    wb1her: "f1rzj6jj",
-    Bmieemq: ["f1jywl1l", "f13d626x"],
-    Bdgjgzg: "f1ivtmze",
-    B05cvx7: ["f13d626x", "f1jywl1l"],
-    Bx4eqiv: "f1uvnr57",
-    xhnoxe: "frhcydi",
-    Hnmc4c: ["f1pvt3n7", "f14i0clv"],
-    By8gkvz: "fq9gcw4",
-    lekrm4: ["f14i0clv", "f1pvt3n7"],
-    Bei91sp: "f1se0d6r",
-    Bksztz9: "f8l9son",
-    h3gz1v: "f1c4gun2",
-    Cw6427: ["flhgtcm", "fx1zdd8"],
-    Bpbd9g9: "fayrp2e",
-    ssulyh: ["fx1zdd8", "flhgtcm"],
-    vq7rp1: "f1p715pa",
-    ynrfiu: "firogjh",
-    Bf5tpyt: ["f1crd6p1", "for8100"],
-    Brhic7g: "f1v5j4zb",
-    Cqvc5u: ["for8100", "f1crd6p1"],
-    B4e80u0: "f116zuoq",
-    Bwj41i9: "fxvotg6",
-    B2iiaa1: ["fk9ur30", "f3u5smv"],
-    Bejmxmv: "fdtj07x",
-    rqauf5: ["f3u5smv", "fk9ur30"],
-    wo5z87: "fv5mb1o",
-    B50joxe: ["f1i2l8ou", "fxj1kmv"],
-    Bmuizf1: "fku528b",
-    f4urji: ["fxj1kmv", "f1i2l8ou"],
-    Bxiq1ly: "fabcpc0",
-    vbmdq8: "f17xwy6w",
-    u4vbwo: ["fipwscc", "fab39iv"],
-    Bfjga03: "f1th5z1l",
-    F0s3py: ["fab39iv", "fipwscc"]
-  },
-  highContrast: {
-    Bskmvfo: "f19h63kc",
-    zhypoe: "ffutfdj",
-    Bb6xxwe: ["f72m8yo", "f1ud47z9"],
-    o89t22: "f15xfkur",
-    B7qxyha: ["f1ud47z9", "f72m8yo"],
-    Bhmcd6p: "f1jaqqzs"
-  },
   before: {
     j35jbq: ["f1e31b4d", "f1vgc2s3"],
     Bhzewxz: "f15twtuk"
@@ -194,21 +54,9 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
     a9b677: "fly5x3f"
   }
 }, {
-  d: [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f1ry1bn9{width:calc(40px + 2 * var(--spacingHorizontalS));}", ".f3l1kk6:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".f1kez0x4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1q9yyk5:disabled~.fui-Switch__label{cursor:default;}", ".f1ks1zsm:disabled~.fui-Switch__label{color:var(--colorNeutralForegroundDisabled);}", ".fiqfi0i:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);}", ".f9aagkg:enabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fgv8l18:enabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1p3jmxb:enabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f11yi64e:enabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fthrly9:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".fhdp2ht:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);}", ".f1rzj6jj:enabled:not(:checked):hover~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1jywl1l:enabled:not(:checked):hover~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13d626x:enabled:not(:checked):hover~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1ivtmze:enabled:not(:checked):hover~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1uvnr57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);}", ".frhcydi:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1pvt3n7:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f14i0clv:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fq9gcw4:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1se0d6r:enabled:checked~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackground);}", ".f8l9son:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundInverted);}", ".f1c4gun2:enabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStroke);}", ".flhgtcm:enabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStroke);}", ".fx1zdd8:enabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStroke);}", ".fayrp2e:enabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStroke);}", ".f1p715pa:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundHover);}", ".firogjh:enabled:checked:hover~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crd6p1:enabled:checked:hover~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".for8100:enabled:checked:hover~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1v5j4zb:enabled:checked:hover~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f116zuoq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorCompoundBrandBackgroundPressed);}", ".fxvotg6:enabled:checked:hover:active~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk9ur30:enabled:checked:hover:active~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f3u5smv:enabled:checked:hover:active~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fdtj07x:enabled:checked:hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fv5mb1o:disabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1i2l8ou:disabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fxj1kmv:disabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fku528b:disabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fabcpc0:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);}", ".f17xwy6w:disabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeDisabled);}", ".fipwscc:disabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fab39iv:disabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f1th5z1l:disabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".f1aar7gd{height:calc(20px + var(--spacingVerticalS));}", ".fly5x3f{width:100%;}"],
-  m: [["@media (forced-colors: active){.f19h63kc:disabled~.fui-Switch__indicator{color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.ffutfdj:disabled~.fui-Switch__indicator{border-top-color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f15xfkur:disabled~.fui-Switch__indicator{border-bottom-color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1jaqqzs:disabled~.fui-Switch__label{color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }]]
+  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__*/react_1.__styles({
   base: {
     Bceei9c: "f1k6fduh",
@@ -237,17 +85,20 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
  * 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, rootStyles.base, labelPosition === 'above' && rootStyles.vertical, state.root.className);
-  state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator, indicatorStyles.base, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
-  state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputStyles.base, inputStyles.highContrast, label && inputStyles[labelPosition], state.input.className);
+  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);
   }

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"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","names":["exports","root","indicator","input","label","spaceBetweenThumbAndTrack","trackHeight","trackWidth","thumbSize","useRootStyles","react_1","useIndicatorStyles","useInputStyles","useLabelStyles","useSwitchStyles_unstable","state","rootStyles","indicatorStyles","inputStyles","labelStyles","labelPosition","className","base","vertical","labelAbove","highContrast"],"sourceRoot":"../src/","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 { 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 useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n lineHeight: 0,\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n ...shorthands.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\n labelAbove: {\n marginTop: 0,\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n\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 ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.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 ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n ...shorthands.borderColor('GrayText'),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n\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\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 rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { label, labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(\n switchClassNames.indicator,\n indicatorStyles.base,\n label && labelPosition === 'above' && indicatorStyles.labelAbove,\n state.indicator.className,\n );\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\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"]}
1	+ {"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":"../src/","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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-switch",
-  "version": "9.0.17",
+  "version": "9.0.19",
   "description": "Fluent UI React Switch component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,13 +28,14 @@
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
-    "@fluentui/scripts": "*"
+    "@fluentui/scripts-api-extractor": "*",
+    "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "9.0.0-alpha.14",
+    "@fluentui/react-field": "9.0.0-alpha.15",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "^9.0.16",
-    "@fluentui/react-tabster": "^9.3.6",
+    "@fluentui/react-label": "^9.0.17",
+    "@fluentui/react-tabster": "^9.4.0",
     "@fluentui/react-theme": "^9.1.5",
     "@fluentui/react-utilities": "^9.4.0",
     "@griffel/react": "^1.5.2",