@fluentui/react-switch 9.0.0-rc.1 → 9.0.0-rc.5

package/lib/components/Switch/useSwitchStyles.js

@@ -1,45 +1,34 @@
-import { shorthands, __styles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-export const switchClassName = 'fui-Switch';
-const trackClassName = `${switchClassName}-track`;
-const thumbClassName = `${switchClassName}-thumb`;
-/**
- * Styles for the root slot
- */
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+export const switchClassNames = {
+  root: 'fui-Switch',
+  indicator: 'fui-Switch__indicator',
+  input: 'fui-Switch__input',
+  label: 'fui-Switch__label'
+}; // TODO temporary export to pass conformance test.
+
+export const switchClassName = switchClassNames.root; // TODO replace these spacing constants with theme values once they're on the theme.
+
+const spacingXS = 4;
+const spacingS = 8;
+const spacingM = 12; // Thumb and track sizes used by the component.
+
+const spaceBetweenThumbAndTrack = 2;
+const thumbSize = 14;
+const trackHeight = 20;
+const trackWidth = 40;
 
 const useRootStyles = /*#__PURE__*/__styles({
-  "root": {
-    "B64q66w": "frxo1y7",
-    "yvbau0": "fe5s2ct",
-    "k3w5al": "f1n6k660",
-    "mt6sm6": "f17m95gg",
-    "Bjtifd4": "fp7zjh8",
+  "base": {
+    "B7ck84d": "f1ewtqcl",
+    "i8kkvl": "f4akndk",
+    "mc9l5x": "ftuwxu6",
+    "z8tnut": "fp9bwmr",
+    "z189sj": ["f19lj068", "f177v4lu"],
+    "Byoj8tv": "f150uoa4",
+    "uwmqm3": ["f177v4lu", "f19lj068"],
     "qhf8xq": "f10pi13n",
-    "a9b677": "fnceurk",
-    "Bqenvij": "f15da5dy",
-    "mc9l5x": "f14t3ns0",
-    "famaaq": "f1xqy1su",
-    "lpbzjs": "f1sdsnyy",
-    "ha4doy": "f1qdqbpl"
-  },
-  "unchecked": {
-    "d48c0s": "frinyyk",
-    "Bc6qnd8": "f1g8lwx2"
-  },
-  "checked": {
-    "Banj4pq": "fpfyfb6",
-    "Brktkwq": "f3vtzeg"
-  },
-  "enabled": {
-    "H36rlo": "felqjlh",
-    "Bceei9c": "f1k6fduh"
-  },
-  "disabled": {
-    "Bceei9c": "fdrzuqr",
-    "Bkecrkj": "f1aehjj5"
-  },
-  "focusIndicator": {
     "B486eqv": "f2hkw1w",
     "c2y4jd": "fsofd9k",
     "B8vm7ur": "f12sql3b",
@@ -51,239 +40,133 @@ const useRootStyles = /*#__PURE__*/__styles({
     "sfhsbh": "f1pke3uf",
     "Bugh3ej": "f18xdlq9",
     "hpanx6": "f1114nks",
-    "Bjkpy09": "f1rh66yx",
-    "Jxg1p8": "f19ibq92",
-    "Bc94xmo": ["fc3tncn", "f1veb610"],
-    "Bj23z95": ["f1veb610", "fc3tncn"]
-  }
-}, {
-  "d": [".frxo1y7{--switch-width:40px;}", ".fe5s2ct{--switch-height:20px;}", ".f1n6k660{--switch-thumb-size:14px;}", ".f17m95gg{--switch-checked-opacity:0;}", ".fp7zjh8{--switch-unchecked-opacity:0;}", ".f10pi13n{position:relative;}", ".fnceurk{width:var(--switch-width);}", ".f15da5dy{height:var(--switch-height);}", ".f14t3ns0{display:inline-block;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f1sdsnyy{touch-action:none;}", ".f1qdqbpl{vertical-align:bottom;}", ".felqjlh{-webkit-tap-highlight-color:rgba(0,0,0,0);}", ".f1k6fduh{cursor:pointer;}", ".fdrzuqr{cursor:not-allowed;}", ".f1aehjj5{pointer-events:none;}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1rh66yx:focus-within:after{top:calc(0px - 2px - 8px);}", "[data-keyboard-nav] .f19ibq92:focus-within:after{bottom:calc(0px - 2px - 8px);}", "[data-keyboard-nav] .fc3tncn:focus-within:after{left:calc(0px - 2px - 8px);}", "[data-keyboard-nav] .f1veb610:focus-within:after{right:calc(0px - 2px - 8px);}"],
-  "h": [".frinyyk:hover .fui-Switch-thumb:before{background-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1g8lwx2:hover .fui-Switch-track:before{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".fpfyfb6:hover .fui-Switch-track:after{background-color:var(--colorBrandBackgroundHover);}"],
-  "a": [".f3vtzeg:active .fui-Switch-track:after{background-color:var(--colorBrandBackgroundPressed);}"],
-  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
-});
-/**
- * Styles for the track slot
- */
-
-
-const useTrackStyles = /*#__PURE__*/__styles({
-  "track": {
-    "qhf8xq": "f1euv43f",
-    "a9b677": "fly5x3f",
-    "Bqenvij": "f1l02sjl",
-    "Bmy1vo4": "fmslzlq",
-    "B3o57yi": "f15vu5tu",
-    "Bkqvd7p": "f1e1a42z",
-    "lpbzjs": "f1sdsnyy",
-    "Bkecrkj": "f1aehjj5",
-    "xx9plb": "fxf9f1y",
-    "Bf8kmfk": "frdto5n",
-    "Byque4d": ["f8g0ba1", "ff0gctb"],
-    "Bj2wrql": "f3zr33r",
-    "qd6xl9": ["ff0gctb", "f8g0ba1"],
-    "Bmqnesq": "f170vdtw",
-    "px8gyy": ["f7lyffi", "fmk9c8u"],
-    "B5c9fhp": ["fmk9c8u", "f7lyffi"],
-    "Bhe99jt": ["f1nat4im", "fw5qzmy"],
-    "B2r1szc": ["fw5qzmy", "f1nat4im"],
-    "rurcny": "f99sooz",
-    "ngabwx": "f1uhpfti",
-    "Hdbjpj": "f11ef69",
-    "u6d25": "f1yuyem3",
-    "jc51t6": ["f1bp8q63", "f1oarbwq"],
-    "Bj55yzk": "f13gddrr",
-    "cnmfks": ["f1oarbwq", "f1bp8q63"],
-    "oqd9ik": "ffdc0f3",
-    "frdscb": ["f1xuwyw0", "f12j4hro"],
-    "B9nohqn": ["f12j4hro", "f1xuwyw0"],
-    "B1dhsta": ["f1mf29j", "f1nzm45q"],
-    "Bjdmjzx": ["f1nzm45q", "f1mf29j"],
-    "Bs6t6z0": "f77y9vx",
-    "Bmyypfa": "frd86tk"
+    "Bjkpy09": "f1unftzx",
+    "Jxg1p8": "f8rjbh6",
+    "Bc94xmo": ["fxfgh6q", "f8l10fm"],
+    "Bj23z95": ["f8l10fm", "fxfgh6q"]
   },
-  "unchecked": {
-    "dj0dih": "f199l62q",
-    "D4ky5z": ["f1pa2qi2", "f1ooiv2t"],
-    "k1i1uq": "fyqop9u",
-    "Bcasopp": ["f1ooiv2t", "f1pa2qi2"],
-    "Bdixowu": "f1bwkb58",
-    "cqycoz": ["fiio4mc", "fc8z0qo"],
-    "Epwjcz": "f1m5ya7j",
-    "Bwdktmn": ["fc8z0qo", "fiio4mc"],
-    "ijj6k": "f1gqzwee",
-    "I89eb": ["f149mt9j", "fs3bzhx"],
-    "Bp1vogq": "f14z72z2",
-    "Bohd3ja": ["fs3bzhx", "f149mt9j"],
-    "B1dvbpk": "f1k1dzc6"
+  "above": {
+    "Beiy3e4": "f1vx9l62",
+    "z8tnut": "f10ra9hq",
+    "Belr9w4": "f1ma2n7n"
   },
-  "checked": {
-    "Bkbwdz4": "f8mks4l",
-    "rskduk": "f1so6udy",
-    "Dctjco": ["f1faxgr0", "f1wf3et7"],
-    "J4s2b0": "f124kgxn",
-    "svcy3r": ["f1wf3et7", "f1faxgr0"]
+  "after": {
+    "Bt984gj": "f6jr5hl",
+    "i8kkvl": "f4akndk",
+    "Beiy3e4": "f1063pyq"
   },
-  "disabledUnchecked": {
-    "dj0dih": "f199l62q",
-    "D4ky5z": ["f1pa2qi2", "f1ooiv2t"],
-    "k1i1uq": "fyqop9u",
-    "Bcasopp": ["f1ooiv2t", "f1pa2qi2"],
-    "Bdixowu": "f1bwkb58",
-    "cqycoz": ["fiio4mc", "fc8z0qo"],
-    "Epwjcz": "f1m5ya7j",
-    "Bwdktmn": ["fc8z0qo", "fiio4mc"],
-    "ijj6k": "fntj282",
-    "I89eb": ["fzta9nb", "f17m9iy5"],
-    "Bp1vogq": "f1k4exvn",
-    "Bohd3ja": ["f17m9iy5", "fzta9nb"]
-  },
-  "disabledChecked": {
-    "Bouo9z4": "f1l5cenb",
-    "Bjz4wo8": ["f1jvubu3", "f1q1uvzd"],
-    "B3zxwmv": "f2fxry3",
-    "exdlgl": ["f1q1uvzd", "f1jvubu3"],
-    "rskduk": "f1iq3fds",
-    "Dctjco": ["f1r2jemi", "f11olovk"],
-    "J4s2b0": "fd0py6g",
-    "svcy3r": ["f11olovk", "f1r2jemi"],
-    "F7kzw7": "f2uxs13",
-    "B13j16c": ["f11zx3qq", "fqewq1t"],
-    "Bk8j60v": "fmewjpk",
-    "Bpbi4o9": ["fqewq1t", "f11zx3qq"],
-    "Bkbwdz4": "f132yvl5"
+  "before": {
+    "Bt984gj": "f6jr5hl",
+    "i8kkvl": "f4akndk",
+    "Beiy3e4": "f1063pyq"
   }
 }, {
-  "d": [".f1euv43f{position:absolute;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".fmslzlq{transition-property:backgroundColor;}", ".f15vu5tu{transition-duration:0.1s;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1sdsnyy{touch-action:none;}", ".f1aehjj5{pointer-events:none;}", ".fxf9f1y:before{position:absolute;}", ".frdto5n:before{top:0px;}", ".f8g0ba1:before{left:0px;}", ".ff0gctb:before{right:0px;}", ".f3zr33r:before{bottom:0px;}", ".f170vdtw:before{box-sizing:border-box;}", ".f7lyffi:before{border-bottom-right-radius:999px;}", ".fmk9c8u:before{border-bottom-left-radius:999px;}", ".f1nat4im:before{border-top-right-radius:999px;}", ".fw5qzmy:before{border-top-left-radius:999px;}", ".f99sooz:before{content:'';}", ".f1uhpfti:before{opacity:var(--switch-unchecked-opacity);}", ".f11ef69:after{position:absolute;}", ".f1yuyem3:after{top:0px;}", ".f1bp8q63:after{left:0px;}", ".f1oarbwq:after{right:0px;}", ".f13gddrr:after{bottom:0px;}", ".ffdc0f3:after{box-sizing:border-box;}", ".f1xuwyw0:after{border-bottom-right-radius:999px;}", ".f12j4hro:after{border-bottom-left-radius:999px;}", ".f1mf29j:after{border-top-right-radius:999px;}", ".f1nzm45q:after{border-top-left-radius:999px;}", ".f77y9vx:after{content:'';}", ".frd86tk:after{opacity:var(--switch-checked-opacity);}", ".f199l62q:before{border-top-width:1px;}", ".f1pa2qi2:before{border-right-width:1px;}", ".f1ooiv2t:before{border-left-width:1px;}", ".fyqop9u:before{border-bottom-width:1px;}", ".f1bwkb58:before{border-top-style:solid;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".f1gqzwee:before{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f149mt9j:before{border-right-color:var(--colorNeutralStrokeAccessible);}", ".fs3bzhx:before{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f14z72z2:before{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1k1dzc6:before{background-color:transparent;}", ".f8mks4l:after{background-color:var(--colorBrandBackground);}", ".f1so6udy:after{border-top-style:none;}", ".f1faxgr0:after{border-right-style:none;}", ".f1wf3et7:after{border-left-style:none;}", ".f124kgxn:after{border-bottom-style:none;}", ".fntj282:before{border-top-color:var(--colorNeutralStrokeDisabled);}", ".fzta9nb:before{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f17m9iy5:before{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1k4exvn:before{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1l5cenb:after{border-top-width:1px;}", ".f1jvubu3:after{border-right-width:1px;}", ".f1q1uvzd:after{border-left-width:1px;}", ".f2fxry3:after{border-bottom-width:1px;}", ".f1iq3fds:after{border-top-style:solid;}", ".f1r2jemi:after{border-right-style:solid;}", ".f11olovk:after{border-left-style:solid;}", ".fd0py6g:after{border-bottom-style:solid;}", ".f2uxs13:after{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f11zx3qq:after{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fqewq1t:after{border-left-color:var(--colorTransparentStrokeDisabled);}", ".fmewjpk:after{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".f132yvl5:after{background-color:var(--colorNeutralBackgroundDisabled);}"]
-});
-/**
- * Styles for the thumb wrapper slot
- */
-
-
-const useThumbWrapperStyles = /*#__PURE__*/__styles({
-  "thumbWrapper": {
-    "qhf8xq": "f1euv43f",
-    "Bhzewxz": "f15twtuk",
-    "B5kzvoi": "f1yab3r1",
-    "oyh7mz": ["fhpx7ww", "f1kctpth"],
-    "j35jbq": ["f1kctpth", "fhpx7ww"],
-    "lpbzjs": "f1sdsnyy",
-    "Bkecrkj": "f1aehjj5"
-  }
-}, {
-  "d": [".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fhpx7ww{left:calc(var(--switch-thumb-size) * .7);}", ".f1kctpth{right:calc(var(--switch-thumb-size) * .7);}", ".f1sdsnyy{touch-action:none;}", ".f1aehjj5{pointer-events:none;}"]
+  "d": [".f1ewtqcl{box-sizing:border-box;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f10pi13n{position:relative;}", "[data-keyboard-nav] .fsofd9k:focus-within{border-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .ft464mn:focus-within:after{box-sizing:outline-box;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f2gy8jn:focus-within:after{border-style:solid;}", "[data-keyboard-nav] .f1pke3uf:focus-within:after{border-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1114nks:focus-within:after{border-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f10ra9hq{padding-top:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });
-/**
- * Styles for the thumb slot
- */
-
 
-const useThumbStyles = /*#__PURE__*/__styles({
-  "thumb": {
-    "qhf8xq": "f1euv43f",
-    "a9b677": "fcjrtee",
-    "Bqenvij": "fili5n9",
-    "B7ck84d": "f1ewtqcl",
+const useIndicatorStyles = /*#__PURE__*/__styles({
+  "base": {
     "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
     "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
     "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
     "Btl43ni": ["f1s8kh49", "f1djnp8u"],
-    "Bhzewxz": "f1i1t8d1",
-    "Bz10aip": ["foouk8k", "fd9rb4b"],
-    "Bmy1vo4": "fmslzlq",
-    "B3o57yi": "f15vu5tu",
-    "Bkqvd7p": "f1e1a42z",
-    "lpbzjs": "f1sdsnyy",
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "B4j52fo": "f5ogflp",
+    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
+    "Bn0qgzm": "f1f09k3d",
+    "ibv6hh": ["finvdd3", "f1hqa2wf"],
+    "B7ck84d": "f1ewtqcl",
+    "Bkfmm31": "f1w9h62z",
+    "Bnnss6s": "fi64zpg",
+    "Be2twd7": "f4ybsrx",
+    "Bqenvij": "fjamq6b",
     "Bkecrkj": "f1aehjj5",
-    "xx9plb": "fxf9f1y",
-    "Bf8kmfk": "frdto5n",
-    "Byque4d": ["f8g0ba1", "ff0gctb"],
-    "Bj2wrql": "f3zr33r",
-    "qd6xl9": ["ff0gctb", "f8g0ba1"],
-    "px8gyy": ["fu724ry", "f1ufhb3r"],
-    "B5c9fhp": ["f1ufhb3r", "fu724ry"],
-    "Bhe99jt": ["fiow2ne", "f13lz1i8"],
-    "B2r1szc": ["f13lz1i8", "fiow2ne"],
-    "rurcny": "f99sooz",
-    "ngabwx": "f1uhpfti",
-    "Hdbjpj": "f11ef69",
-    "u6d25": "f1yuyem3",
-    "jc51t6": ["f1bp8q63", "f1oarbwq"],
-    "Bj55yzk": "f13gddrr",
-    "cnmfks": ["f1oarbwq", "f1bp8q63"],
-    "frdscb": ["fc4gh2t", "flndy84"],
-    "B9nohqn": ["flndy84", "fc4gh2t"],
-    "B1dhsta": ["fxgx2h0", "fh20ihy"],
-    "Bjdmjzx": ["fh20ihy", "fxgx2h0"],
-    "Bs6t6z0": "f77y9vx",
-    "Bmyypfa": "frd86tk"
-  },
-  "unchecked": {
-    "B1dvbpk": "f1n7m28n"
-  },
-  "checked": {
-    "Bkbwdz4": "f1261hx1"
-  },
-  "disabledUnchecked": {
-    "dj0dih": "f199l62q",
-    "D4ky5z": ["f1pa2qi2", "f1ooiv2t"],
-    "k1i1uq": "fyqop9u",
-    "Bcasopp": ["f1ooiv2t", "f1pa2qi2"],
-    "Bdixowu": "f1bwkb58",
-    "cqycoz": ["fiio4mc", "fc8z0qo"],
-    "Epwjcz": "f1m5ya7j",
-    "Bwdktmn": ["fc8z0qo", "fiio4mc"],
-    "ijj6k": "f1k21dld",
-    "I89eb": ["f1yueqd5", "f16ep8jm"],
-    "Bp1vogq": "flh92r5",
-    "Bohd3ja": ["f16ep8jm", "f1yueqd5"],
-    "B1dvbpk": "fj528n6"
-  },
-  "disabledChecked": {
-    "Bkbwdz4": "f18jltdj"
-  }
-}, {
-  "d": [".f1euv43f{position:absolute;}", ".fcjrtee{width:var(--switch-thumb-size);}", ".fili5n9{height:var(--switch-thumb-size);}", ".f1ewtqcl{box-sizing:border-box;}", ".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);}", ".f1i1t8d1{top:50%;}", ".foouk8k{-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}", ".fd9rb4b{-webkit-transform:translate(50%, -50%);-moz-transform:translate(50%, -50%);-ms-transform:translate(50%, -50%);transform:translate(50%, -50%);}", ".fmslzlq{transition-property:backgroundColor;}", ".f15vu5tu{transition-duration:0.1s;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1sdsnyy{touch-action:none;}", ".f1aehjj5{pointer-events:none;}", ".fxf9f1y:before{position:absolute;}", ".frdto5n:before{top:0px;}", ".f8g0ba1:before{left:0px;}", ".ff0gctb:before{right:0px;}", ".f3zr33r:before{bottom:0px;}", ".fu724ry:before{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1ufhb3r:before{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fiow2ne:before{border-top-right-radius:var(--borderRadiusCircular);}", ".f13lz1i8:before{border-top-left-radius:var(--borderRadiusCircular);}", ".f99sooz:before{content:'';}", ".f1uhpfti:before{opacity:var(--switch-unchecked-opacity);}", ".f11ef69:after{position:absolute;}", ".f1yuyem3:after{top:0px;}", ".f1bp8q63:after{left:0px;}", ".f1oarbwq:after{right:0px;}", ".f13gddrr:after{bottom:0px;}", ".fc4gh2t:after{border-bottom-right-radius:var(--borderRadiusCircular);}", ".flndy84:after{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fxgx2h0:after{border-top-right-radius:var(--borderRadiusCircular);}", ".fh20ihy:after{border-top-left-radius:var(--borderRadiusCircular);}", ".f77y9vx:after{content:'';}", ".frd86tk:after{opacity:var(--switch-checked-opacity);}", ".f1n7m28n:before{background-color:var(--colorNeutralStrokeAccessible);}", ".f1261hx1:after{background-color:var(--colorNeutralForegroundOnBrand);}", ".f199l62q:before{border-top-width:1px;}", ".f1pa2qi2:before{border-right-width:1px;}", ".f1ooiv2t:before{border-left-width:1px;}", ".fyqop9u:before{border-bottom-width:1px;}", ".f1bwkb58:before{border-top-style:solid;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".f1k21dld:before{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1yueqd5:before{border-right-color:var(--colorNeutralForegroundDisabled);}", ".f16ep8jm:before{border-left-color:var(--colorNeutralForegroundDisabled);}", ".flh92r5:before{border-bottom-color:var(--colorNeutralForegroundDisabled);}", ".fj528n6:before{background-color:var(--colorNeutralBackground1);}", ".f18jltdj:after{background-color:var(--colorNeutralForegroundDisabled);}"]
-});
-/**
- * Styles for the activeRail slot
- */
-
-
-const useActiveRailStyles = /*#__PURE__*/__styles({
-  "activeRail": {
-    "qhf8xq": "f1euv43f",
-    "oyh7mz": ["fhpx7ww", "f1kctpth"],
-    "j35jbq": ["f1kctpth", "fhpx7ww"]
+    "B3o57yi": "f1bnoopa",
+    "Bkqvd7p": "f1e1a42z",
+    "Bmy1vo4": "fo99fu7",
+    "a9b677": "feqmc2u",
+    "Hkqiji": "f1wkgtgk",
+    "Bgrs90m": "f17f8g0y",
+    "B0zx559": "f1uwej41"
   }
 }, {
-  "d": [".f1euv43f{position:absolute;}", ".fhpx7ww{left:calc(var(--switch-thumb-size) * .7);}", ".f1kctpth{right:calc(var(--switch-thumb-size) * .7);}"]
+  "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;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f4ybsrx{font-size:16px;}", ".fjamq6b{height:20px;}", ".f1aehjj5{pointer-events:none;}", ".f1bnoopa{transition-duration:200ms;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1wkgtgk>*{transition-duration:200ms;}", ".f17f8g0y>*{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1uwej41>*{transition-property:transform;}"]
 });
-/**
- * Styles for the hidden input slot
- */
 
-
-const useInputStyle = /*#__PURE__*/__styles({
-  "input": {
-    "abs64n": "fk73vx1",
-    "qhf8xq": "f1euv43f",
-    "z8tnut": "f1g0x7ka",
-    "z189sj": ["fhxju0i", "f1cnd47f"],
-    "Byoj8tv": "f1qch9an",
-    "uwmqm3": ["f1cnd47f", "fhxju0i"],
+const useInputStyles = /*#__PURE__*/__styles({
+  "base": {
+    "B7ck84d": "f1ewtqcl",
+    "Bceei9c": "f1k6fduh",
+    "Bqenvij": "f1l02sjl",
+    "oyh7mz": ["f1vgc2s3", "f1e31b4d"],
     "B6of3ja": "f1hu3pq6",
     "t21cq0": ["f11qmguv", "f1tyq0we"],
     "jrapky": "f19f4twv",
     "Frg6f3": ["f1tyq0we", "f11qmguv"],
+    "abs64n": "fk73vx1",
+    "qhf8xq": "f1euv43f",
+    "Bhzewxz": "f15twtuk",
     "a9b677": "fly5x3f",
-    "Bqenvij": "f1l02sjl",
-    "lpbzjs": "f1sdsnyy",
-    "Bkecrkj": "f1aehjj5"
+    "fv8x6k": ["f1owqbgs", "f1a7g3i4"],
+    "ezr58z": "fvxnmui",
+    "Blezdol": "f1cxq9o1",
+    "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": "fft44l1",
+    "Bksztz9": "fwlrvmy",
+    "h3gz1v": "f1c4gun2",
+    "Cw6427": ["flhgtcm", "fx1zdd8"],
+    "Bpbd9g9": "fayrp2e",
+    "ssulyh": ["fx1zdd8", "flhgtcm"],
+    "vq7rp1": "f1vk2knj",
+    "ynrfiu": "firogjh",
+    "Bf5tpyt": ["f1crd6p1", "for8100"],
+    "Brhic7g": "f1v5j4zb",
+    "Cqvc5u": ["for8100", "f1crd6p1"],
+    "B4e80u0": "f1rt7qcq",
+    "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"]
   }
 }, {
-  "d": [".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1sdsnyy{touch-action:none;}", ".f1aehjj5{pointer-events:none;}"]
+  "d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1owqbgs:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(22px);-moz-transform:translateX(22px);-ms-transform:translateX(22px);transform:translateX(22px);}", ".f1a7g3i4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-22px);-moz-transform:translateX(-22px);-ms-transform:translateX(-22px);transform:translateX(-22px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".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);}", ".fft44l1:enabled:checked~.fui-Switch__indicator{background-color:var(--colorBrandBackground);}", ".fwlrvmy:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".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);}", ".f1vk2knj:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundHover);}", ".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);}", ".f1rt7qcq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundPressed);}", ".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);}"]
+});
+
+const useLabelStyles = /*#__PURE__*/__styles({
+  "base": {
+    "famaaq": "f1xqy1su"
+  }
+}, {
+  "d": [".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]
 });
 /**
  * Apply styling to the Switch slots based on the state
@@ -291,22 +174,21 @@ const useInputStyle = /*#__PURE__*/__styles({
 
 
 export const useSwitchStyles_unstable = state => {
-  const {
-    checked,
-    disabled
-  } = state.input;
   const rootStyles = useRootStyles();
-  const trackStyles = useTrackStyles();
-  const thumbWrapperStyles = useThumbWrapperStyles();
-  const thumbStyles = useThumbStyles();
-  const activeRailStyles = useActiveRailStyles();
-  const inputStyles = useInputStyle();
-  state.root.className = mergeClasses(switchClassName + (checked ? ' checked' : ''), rootStyles.root, rootStyles.focusIndicator, !disabled && rootStyles.checked, !disabled && rootStyles.unchecked, disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);
-  state.track.className = mergeClasses(trackClassName, trackStyles.track, !disabled && trackStyles.checked, !disabled && trackStyles.unchecked, disabled && trackStyles.disabledChecked, disabled && trackStyles.disabledUnchecked, state.track.className);
-  state.thumbWrapper.className = mergeClasses(thumbWrapperStyles.thumbWrapper, state.thumbWrapper.className);
-  state.thumb.className = mergeClasses(thumbClassName, thumbStyles.thumb, !disabled && thumbStyles.checked, !disabled && thumbStyles.unchecked, disabled && thumbStyles.disabledChecked, disabled && thumbStyles.disabledUnchecked, state.thumb.className);
-  state.activeRail.className = mergeClasses(activeRailStyles.activeRail, state.activeRail.className);
-  state.input.className = mergeClasses(inputStyles.input, state.input.className);
+  const indicatorStyles = useIndicatorStyles();
+  const inputStyles = useInputStyles();
+  const labelStyles = useLabelStyles();
+  const {
+    labelPosition
+  } = state;
+  state.root.className = mergeClasses(switchClassNames.root, rootStyles.base, rootStyles[labelPosition], state.root.className);
+  state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);
+  state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, state.input.className);
+
+  if (state.label) {
+    state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);
+  }
+
   return state;
 };
 //# sourceMappingURL=useSwitchStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
+{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","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// TODO temporary export to pass conformance test.\nexport const switchClassName = switchClassNames.root;\n\n// TODO replace these spacing constants with theme values once they're on the theme.\nconst spacingXS = 4;\nconst spacingS = 8;\nconst spacingM = 12;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst thumbSize = 14;\nconst trackHeight = 20;\nconst trackWidth = 40;\n\nconst useRootStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    columnGap: `${spacingM}px`,\n    display: 'inline-flex',\n    ...shorthands.padding(`${spacingS}px`),\n    position: 'relative',\n\n    ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n  },\n\n  // Label position variations\n  above: {\n    flexDirection: 'column',\n    paddingTop: `${spacingXS}px`,\n    rowGap: `${spacingXS}px`,\n  },\n  after: {\n    alignItems: 'flex-start',\n    columnGap: `${spacingM}px`,\n    flexDirection: 'row',\n  },\n  before: {\n    alignItems: 'flex-start',\n    columnGap: `${spacingM}px`,\n    flexDirection: 'row',\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.borderWidth('1px'),\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize + spaceBetweenThumbAndTrack}px`,\n    height: `${trackHeight}px`,\n    pointerEvents: 'none',\n    transitionDuration: '200ms',\n    transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n    transitionProperty: 'background, border, color',\n    width: `${trackWidth}px`,\n\n    '> *': {\n      transitionDuration: '200ms',\n      transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n      transitionProperty: 'transform',\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    left: 0,\n    ...shorthands.margin(0),\n    opacity: 0,\n    position: 'absolute',\n    top: 0,\n    width: '100%',\n\n    // Checked (both enabled and disabled)\n    ':checked': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        '> *': {\n          transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack * 2}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        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.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand,\n        ...shorthands.borderColor(tokens.colorTransparentStroke),\n      },\n\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: tokens.colorBrandBackgroundHover,\n          ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: tokens.colorBrandBackgroundPressed,\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\nconst useLabelStyles = makeStyles({\n  base: {\n    userSelect: 'none',\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 { labelPosition } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootStyles.base,\n    rootStyles[labelPosition],\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n  state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, state.input.className);\n\n  if (state.label) {\n    state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC","sourcesContent":["export {};\nexport * from './Switch';\n"]}

package/lib-commonjs/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Switch.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["Switch.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Switch/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Switch/Switch.d.ts

@@ -1,6 +1,6 @@
 import type { SwitchProps } from './Switch.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
- * The Switch control enables users to trigger an option on or off through pressing on the component.
+ * Switches enable users to trigger an option on or off through pressing the component.
  */
 export declare const Switch: ForwardRefComponent<SwitchProps>;

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

@@ -13,7 +13,7 @@ const renderSwitch_1 = /*#__PURE__*/require("./renderSwitch");
 
 const useSwitchStyles_1 = /*#__PURE__*/require("./useSwitchStyles");
 /**
- * The Switch control enables users to trigger an option on or off through pressing on the component.
+ * Switches enable users to trigger an option on or off through pressing the component.
  */
 
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;AAEA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CANuD,CAA3C;AAQb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourceRoot":""}
+{"version":3,"sources":["components/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;AAEA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AAEA,SAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CANuD,CAA3C;AAQb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSwitch_unstable } from './useSwitch';\nimport { renderSwitch_unstable } from './renderSwitch';\nimport { useSwitchStyles_unstable } from './useSwitchStyles';\nimport type { SwitchProps } from './Switch.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Switches enable users to trigger an option on or off through pressing the component.\n */\nexport const Switch: ForwardRefComponent<SwitchProps> = React.forwardRef((props, ref) => {\n  const state = useSwitch_unstable(props, ref);\n\n  useSwitchStyles_unstable(state);\n\n  return renderSwitch_unstable(state);\n});\n\nSwitch.displayName = 'Switch';\n"],"sourceRoot":"../src/"}