@fluentui/react-switch 9.0.0-alpha.7 → 9.0.0-beta.2

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

@@ -9,7 +9,16 @@ var React = /*#__PURE__*/require("react");
 
 var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
-var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts"); // TODO: This should be replaced with a useEvent hook
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+var on = function (element, eventName, callback) {
+  element.addEventListener(eventName, callback);
+  return function () {
+    return element.removeEventListener(eventName, callback);
+  };
+};
 
 var useSwitchState = function (state) {
   var _a = state.defaultChecked,
@@ -18,39 +27,136 @@ var useSwitchState = function (state) {
       _b = state.disabled,
       disabled = _b === void 0 ? false : _b,
       onChange = state.onChange;
+  var _c = state.root,
+      onPointerDownCallback = _c.onPointerDown,
+      onKeyDownCallback = _c.onKeyDown;
   var dir = react_shared_contexts_1.useFluent().dir;
   var inputRef = react_utilities_1.useMergedRefs(state.input.ref);
+  var railRef = React.useRef(null);
+  var internalState = React.useRef({
+    internalValue: checked ? checked : defaultChecked,
+    thumbIsDragging: false,
+    disposables: []
+  });
 
-  var _c = react_utilities_1.useControllableState({
+  var _d = react_utilities_1.useControllableState({
     defaultState: defaultChecked,
     state: checked,
     initialState: false
   }),
-      internalValue = _c[0],
-      setInternalValue = _c[1];
+      currentValue = _d[0],
+      setCurrentValue = _d[1];
+
+  var _e = react_utilities_1.useBoolean(true),
+      thumbAnimation = _e[0],
+      _f = _e[1],
+      showThumbAnimation = _f.setTrue,
+      hideThumbAnimation = _f.setFalse;
+
+  var _g = React.useState(currentValue === true ? 100 : 0),
+      renderedPosition = _g[0],
+      setRenderedPosition = _g[1];
 
-  var setChecked = React.useCallback(function (ev, incomingValue) {
+  var setChecked = react_utilities_1.useEventCallback(function (ev, incomingValue) {
+    ev.stopPropagation();
+    ev.preventDefault();
+    internalState.current.internalValue = incomingValue;
     onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
       checked: incomingValue
     });
-    setInternalValue(incomingValue);
-  }, [onChange, setInternalValue]);
-  var userOnChange = state.input.onChange;
-  var onInputChange = react_utilities_1.useEventCallback(function (ev) {
-    ev.stopPropagation();
-    userOnChange === null || userOnChange === void 0 ? void 0 : userOnChange(ev);
-    setChecked(ev, ev.currentTarget.checked);
+    setCurrentValue(incomingValue);
+    setRenderedPosition(undefined);
   });
+  var calculatePosition = React.useCallback(function (ev) {
+    var _a;
+
+    var currentBounds = (_a = railRef === null || railRef === void 0 ? void 0 : railRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    var railWidth = currentBounds.width;
+    var railPosition = dir === 'rtl' ? currentBounds.right : currentBounds.left;
+    var distance = dir === 'rtl' ? railPosition - ev.clientX : ev.clientX - railPosition;
+    return react_utilities_1.clamp(distance / railWidth * 100, 0, 100);
+  }, [dir]);
+  var onPointerMove = React.useCallback(function (ev) {
+    var incomingPosition = calculatePosition(ev);
+    internalState.current.thumbIsDragging = true;
+    hideThumbAnimation();
+    setRenderedPosition(incomingPosition); // If the Switch reaches a new position of 0% or 100%, update the state and fire change.
+
+    if (incomingPosition === 100 && internalState.current.internalValue !== true) {
+      setChecked(ev, true);
+    } else if (incomingPosition === 0 && internalState.current.internalValue !== false) {
+      setChecked(ev, false);
+    }
+  }, [calculatePosition, hideThumbAnimation, setChecked]);
+  var onPointerUp = React.useCallback(function (ev) {
+    internalState.current.disposables.forEach(function (dispose) {
+      return dispose();
+    });
+    internalState.current.disposables = [];
+    inputRef.current.focus();
+
+    if (internalState.current.thumbIsDragging) {
+      var roundedPosition = Math.round(calculatePosition(ev) / 100) * 100;
+      showThumbAnimation();
+
+      if (roundedPosition === 100) {
+        setChecked(ev, true);
+      } else if (roundedPosition === 0) {
+        setChecked(ev, false);
+      }
+    } else {
+      setChecked(ev, !internalState.current.internalValue);
+    }
+  }, [calculatePosition, inputRef, setChecked, showThumbAnimation]);
+  var onPointerDown = React.useCallback(function (ev) {
+    var _a;
+
+    var pointerId = ev.pointerId;
+    var target = ev.target;
+    onPointerDownCallback === null || onPointerDownCallback === void 0 ? void 0 : onPointerDownCallback(ev);
+    showThumbAnimation();
+    (_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
+    internalState.current.thumbIsDragging = false;
+    internalState.current.disposables.push(on(target, 'pointermove', onPointerMove), on(target, 'pointerup', onPointerUp), function () {
+      var _a;
+
+      (_a = target.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
+    });
+  }, [onPointerDownCallback, onPointerMove, onPointerUp, showThumbAnimation]);
+  var onKeyDown = React.useCallback(function (ev) {
+    onKeyDownCallback === null || onKeyDownCallback === void 0 ? void 0 : onKeyDownCallback(ev);
+
+    if (ev.key === ' ') {
+      setChecked(ev, !internalState.current.internalValue);
+    }
+  }, [onKeyDownCallback, setChecked]);
+  var currentPosition = renderedPosition !== undefined ? renderedPosition : currentValue ? 100 : 0;
+  var rootStyles = {
+    '--switch-checked-opacity': currentPosition / 100,
+    '--switch-unchecked-opacity': (100 - currentPosition) / 100
+  };
   var thumbWrapperStyles = {
-    transform: dir === 'rtl' ? internalValue ? 'translate(-100%)' : 'translate(0%)' : internalValue ? 'translate(100%)' : 'translate(0%)'
-  }; // Input Props
+    transform: "translate(" + (dir === 'rtl' ? -currentPosition : currentPosition) + "%)",
+    transition: thumbAnimation ? 'transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), opacity .1s cubic-bezier(0.33, 0.0, 0.67, 1)' : 'none'
+  }; // Root Props
+
+  state.root.style = rootStyles;
+
+  if (!disabled) {
+    state.root.onPointerDown = onPointerDown;
+    state.root.onKeyDown = onKeyDown;
+  } // Input Props
 
-  state.input.onChange = onInputChange;
-  state.input.checked = internalValue;
+
+  state.input.checked = currentValue;
   state.input.disabled = disabled;
-  state.input.ref = inputRef; // thumbContainer Props
+  state.input.ref = inputRef;
+  state.input.readOnly = true;
+  state.input.role = 'switch'; // Thumb Container Props
+
+  state.thumbWrapper.style = thumbWrapperStyles; // Active Rail Props
 
-  state.thumbWrapper.style = thumbWrapperStyles;
+  state.activeRail.ref = railRef;
   return state;
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Switch/useSwitchState.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAGO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAmB;AACvC,MAAA,EAAA,GAAgE,KAAK,CAA/C,cAAtB;AAAA,MAAA,cAAc,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAtB;AAAA,MAAwB,OAAO,GAAiC,KAAK,CAAtC,OAA/B;AAAA,MAAiC,EAAA,GAA+B,KAAK,CAApB,QAAjD;AAAA,MAAiC,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAjD;AAAA,MAAmD,QAAQ,GAAK,KAAK,CAAV,QAA3D;AAEA,MAAA,GAAG,GAAK,uBAAA,CAAA,SAAA,GAAL,GAAH;AACR,MAAM,QAAQ,GAAG,iBAAA,CAAA,aAAA,CAAc,KAAK,CAAC,KAAN,CAAY,GAA1B,CAAjB;;AACM,MAAA,EAAA,GAAoC,iBAAA,CAAA,oBAAA,CAAqB;AAC7D,IAAA,YAAY,EAAE,cAD+C;AAE7D,IAAA,KAAK,EAAE,OAFsD;AAG7D,IAAA,YAAY,EAAE;AAH+C,GAArB,CAApC;AAAA,MAAC,aAAa,GAAA,EAAA,CAAA,CAAA,CAAd;AAAA,MAAgB,gBAAgB,GAAA,EAAA,CAAA,CAAA,CAAhC;;AAMN,MAAM,UAAU,GAAG,KAAK,CAAC,WAAN,CACjB,UAAC,EAAD,EAA0C,aAA1C,EAAgE;AAC9D,IAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;AAAE,MAAA,OAAO,EAAE;AAAX,KAAP,CAAR;AACA,IAAA,gBAAgB,CAAC,aAAD,CAAhB;AACD,GAJgB,EAKjB,CAAC,QAAD,EAAW,gBAAX,CALiB,CAAnB;AAQA,MAAM,YAAY,GAAG,KAAK,CAAC,KAAN,CAAY,QAAjC;AAEA,MAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAC,EAAD,EAAwC;AAC7E,IAAA,EAAE,CAAC,eAAH;AACA,IAAA,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,EAAH,CAAZ;AACA,IAAA,UAAU,CAAC,EAAD,EAAK,EAAE,CAAC,aAAH,CAAiB,OAAtB,CAAV;AACD,GAJqB,CAAtB;AAMA,MAAM,kBAAkB,GAAG;AACzB,IAAA,SAAS,EACP,GAAG,KAAK,KAAR,GACI,aAAa,GACX,kBADW,GAEX,eAHN,GAII,aAAa,GACb,iBADa,GAEb;AARmB,GAA3B,CA3B+C,CAsC/C;;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,aAAvB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,OAAZ,GAAsB,aAAtB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,QAAZ,GAAuB,QAAvB;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,GAAZ,GAAkB,QAAlB,CA1C+C,CA4C/C;;AACA,EAAA,KAAK,CAAC,YAAN,CAAmB,KAAnB,GAA2B,kBAA3B;AAEA,SAAO,KAAP;AACD,CAhDM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport type { SwitchState } from './Switch.types';\n\nexport const useSwitchState = (state: SwitchState) => {\n  const { defaultChecked = false, checked, disabled = false, onChange } = state;\n\n  const { dir } = useFluent();\n  const inputRef = useMergedRefs(state.input.ref);\n  const [internalValue, setInternalValue] = useControllableState({\n    defaultState: defaultChecked,\n    state: checked,\n    initialState: false,\n  });\n\n  const setChecked = React.useCallback(\n    (ev: React.ChangeEvent<HTMLInputElement>, incomingValue: boolean) => {\n      onChange?.(ev, { checked: incomingValue });\n      setInternalValue(incomingValue);\n    },\n    [onChange, setInternalValue],\n  );\n\n  const userOnChange = state.input.onChange;\n\n  const onInputChange = useEventCallback((ev: React.ChangeEvent<HTMLInputElement>) => {\n    ev.stopPropagation();\n    userOnChange?.(ev);\n    setChecked(ev, ev.currentTarget.checked);\n  });\n\n  const thumbWrapperStyles = {\n    transform:\n      dir === 'rtl'\n        ? internalValue\n          ? 'translate(-100%)'\n          : 'translate(0%)'\n        : internalValue\n        ? 'translate(100%)'\n        : 'translate(0%)',\n  };\n\n  // Input Props\n  state.input.onChange = onInputChange;\n  state.input.checked = internalValue;\n  state.input.disabled = disabled;\n  state.input.ref = inputRef;\n\n  // thumbContainer Props\n  state.thumbWrapper.style = thumbWrapperStyles;\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Switch/useSwitchState.ts"],"names":[],"mappings":"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","sourceRoot":""}

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

@@ -21,6 +21,8 @@ var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "B64q66w": "frxo1y7",
     "yvbau0": "fe5s2ct",
     "k3w5al": "f1n6k660",
+    "mt6sm6": "f17m95gg",
+    "Bjtifd4": "fp7zjh8",
     "qhf8xq": "f10pi13n",
     "a9b677": "fnceurk",
     "Bqenvij": "f15da5dy",
@@ -30,21 +32,58 @@ var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "ha4doy": "f1qdqbpl"
   },
   "unchecked": {
-    "Bqjqakx": "f1d44w5f",
-    "Bd0vrip": "f1j7dw8k",
-    "y7yju5": ["f1r94r6s", "f1fmnyxd"],
-    "B07fonl": "fyho6do",
-    "lc79a6": ["f1fmnyxd", "f1r94r6s"]
+    "Blms9gb": "f5twets",
+    "B786czj": "f1dad01o",
+    "Bjuc0nl": ["f687y2r", "f1edjd92"],
+    "B5yqodl": "f1f3tlu1",
+    "kjlpdb": ["f1edjd92", "f687y2r"]
   },
   "checked": {
-    "ot2k7a": "fbufzf2",
-    "Bhph27x": "fvfzge"
+    "B4o7b9o": "fnm6wgb",
+    "puz9ln": "fi8bwd9"
   },
-  "focusIndicator": {}
+  "enabled": {
+    "H36rlo": "felqjlh",
+    "Bceei9c": "f1k6fduh"
+  },
+  "disabled": {
+    "Bceei9c": "fdrzuqr",
+    "Bkecrkj": "f1aehjj5"
+  },
+  "focusIndicator": {
+    "B486eqv": "f2hkw1w",
+    "vchsgm": "fbiesyy",
+    "ozrjjd": ["fq2kn9", "f1jxwnad"],
+    "B7lelfh": "f1il7mou",
+    "Bp3tz3o": ["f1jxwnad", "fq2kn9"],
+    "B8vm7ur": "f12sql3b",
+    "f4hv8x": "f1i4q40k",
+    "Gpan81": "fcrbge9",
+    "z7afg": "ft464mn",
+    "rsjj6t": "fskqmiq",
+    "E86f5s": "f1kbdjx9",
+    "f5nhos": ["fw1d893", "fpuz8dn"],
+    "Bhtq6h7": "f14hlsw1",
+    "Bubk9yy": ["fpuz8dn", "fw1d893"],
+    "dzajus": "f1bkt4b4",
+    "B8gmrwi": ["f16hf5f2", "f1qhqcal"],
+    "Byq6oy9": "fyyqeim",
+    "Bdy2j38": ["f1qhqcal", "f16hf5f2"],
+    "Bugh3ej": "f18xdlq9",
+    "epcuuz": "filx0we",
+    "Ba33l6n": ["f1horip2", "fgnx9ah"],
+    "va7z1g": "fkii2tb",
+    "Bmi6mq9": ["fgnx9ah", "f1horip2"],
+    "Bjkpy09": "f1rh66yx",
+    "Jxg1p8": "f19ibq92",
+    "Bc94xmo": ["fc3tncn", "f1veb610"],
+    "Bj23z95": ["f1veb610", "fc3tncn"]
+  }
 }, {
-  "d": [".frxo1y7{--switch-width:40px;}", ".fe5s2ct{--switch-height:20px;}", ".f1n6k660{--switch-thumb-size:14px;}", ".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;}"],
-  "h": [".f1d44w5f:hover .ms-Switch-thumb{background:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".f1j7dw8k:hover .ms-Switch-track{border-top-color:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".f1r94r6s:hover .ms-Switch-track{border-right-color:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".f1fmnyxd:hover .ms-Switch-track{border-left-color:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".fyho6do:hover .ms-Switch-track{border-bottom-color:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".fbufzf2:hover .ms-Switch-track{background:var(--alias-color-neutral-brandBackgroundHover);}"],
-  "a": [".fvfzge:active .ms-Switch-track{background:var(--alias-color-neutral-brandBackgroundPressed);}"]
+  "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] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-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] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f18xdlq9:focus-within:after{border-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-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": [".f5twets:hover .ms-Switch-thumb:before{background:var(--colorNeutralStrokeAccessibleHover);}", ".f1dad01o:hover .ms-Switch-track:before{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f687y2r:hover .ms-Switch-track:before{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1edjd92:hover .ms-Switch-track:before{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1f3tlu1:hover .ms-Switch-track:before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".fnm6wgb:hover .ms-Switch-track:after{background:var(--colorBrandBackgroundHover);}"],
+  "a": [".fi8bwd9:active .ms-Switch-track:after{background:var(--colorBrandBackgroundPressed);}"],
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });
 /**
  * Styles for the track slot
@@ -56,64 +95,81 @@ var useTrackStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "qhf8xq": "f1euv43f",
     "a9b677": "fly5x3f",
     "Bqenvij": "f1l02sjl",
-    "B7ck84d": "f1ewtqcl",
-    "Dimara": "f8ff6pf",
-    "Bi2q7bf": "f1tuovvr",
-    "Bkecrkj": "f1aehjj5"
+    "Bi2q7bf": "f11zxivh",
+    "lpbzjs": "f1sdsnyy",
+    "Bkecrkj": "f1aehjj5",
+    "xx9plb": "fxf9f1y",
+    "Bf8kmfk": "frdto5n",
+    "Byque4d": ["f8g0ba1", "ff0gctb"],
+    "Bj2wrql": "f3zr33r",
+    "qd6xl9": ["ff0gctb", "f8g0ba1"],
+    "Bmqnesq": "f170vdtw",
+    "zf3lio": "f1jua1m0",
+    "rurcny": "f99sooz",
+    "ngabwx": "f1uhpfti",
+    "Hdbjpj": "f11ef69",
+    "u6d25": "f1yuyem3",
+    "jc51t6": ["f1bp8q63", "f1oarbwq"],
+    "Bj55yzk": "f13gddrr",
+    "cnmfks": ["f1oarbwq", "f1bp8q63"],
+    "oqd9ik": "ffdc0f3",
+    "c4kunb": "fsn1tsw",
+    "Bs6t6z0": "f77y9vx",
+    "Bmyypfa": "frd86tk"
   },
   "unchecked": {
-    "B4j52fo": "f5ogflp",
-    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
-    "Bn0qgzm": "f1f09k3d",
-    "ibv6hh": ["finvdd3", "f1hqa2wf"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "g2u3we": "f1q58nl0",
-    "h3c5rm": ["f1gj82os", "f97e4i"],
-    "B9xav0g": "f117jeii",
-    "zhjwy3": ["f97e4i", "f1gj82os"],
-    "ayd6f0": "f1k2sg7s"
+    "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"],
+    "B4zgs9e": "f1ntlsrl"
   },
   "checked": {
-    "ayd6f0": "f1fw6kzu",
-    "icvyot": "f1ern45e",
-    "vrafjx": ["f1n71otn", "f1deefiw"],
-    "oivjwe": "f1h8hb77",
-    "wvpqe5": ["f1deefiw", "f1n71otn"]
+    "Bpudnjh": "f1lhwn2z",
+    "rskduk": "f1so6udy",
+    "Dctjco": ["f1faxgr0", "f1wf3et7"],
+    "J4s2b0": "f124kgxn",
+    "svcy3r": ["f1wf3et7", "f1faxgr0"]
   },
   "disabledUnchecked": {
-    "B4j52fo": "f5ogflp",
-    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
-    "Bn0qgzm": "f1f09k3d",
-    "ibv6hh": ["finvdd3", "f1hqa2wf"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "g2u3we": "fh008h3",
-    "h3c5rm": ["fgf1gi4", "ffgazsd"],
-    "B9xav0g": "f1nmao14",
-    "zhjwy3": ["ffgazsd", "fgf1gi4"]
+    "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": {
-    "B4j52fo": "f5ogflp",
-    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
-    "Bn0qgzm": "f1f09k3d",
-    "ibv6hh": ["finvdd3", "f1hqa2wf"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "g2u3we": "fijmamb",
-    "h3c5rm": ["f13mpk6g", "f1sy8snd"],
-    "B9xav0g": "f1l53k52",
-    "zhjwy3": ["f1sy8snd", "f13mpk6g"],
-    "ayd6f0": "f7vsd9j"
+    "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"],
+    "Bpudnjh": "fq2pbzm"
   }
 }, {
-  "d": [".f1euv43f{position:absolute;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f8ff6pf{border-radius:999px;}", ".f1tuovvr{-webkit-transition:background .1s cubic-bezier(0.33, 0.0, 0.67, 1),borderColor .1s cubic-bezier(0.33, 0.0, 0.67, 1);transition:background .1s cubic-bezier(0.33, 0.0, 0.67, 1),borderColor .1s cubic-bezier(0.33, 0.0, 0.67, 1);}", ".f1aehjj5{pointer-events:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1q58nl0{border-top-color:var(--alias-color-neutral-neutralStrokeAccessible);}", ".f1gj82os{border-right-color:var(--alias-color-neutral-neutralStrokeAccessible);}", ".f97e4i{border-left-color:var(--alias-color-neutral-neutralStrokeAccessible);}", ".f117jeii{border-bottom-color:var(--alias-color-neutral-neutralStrokeAccessible);}", ".f1k2sg7s{background:none;}", ".f1fw6kzu{background:var(--alias-color-neutral-brandBackground);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".fh008h3{border-top-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".fgf1gi4{border-right-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".ffgazsd{border-left-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".f1nmao14{border-bottom-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".fijmamb{border-top-color:var(--alias-color-neutral-transparentStrokeDisabled);}", ".f13mpk6g{border-right-color:var(--alias-color-neutral-transparentStrokeDisabled);}", ".f1sy8snd{border-left-color:var(--alias-color-neutral-transparentStrokeDisabled);}", ".f1l53k52{border-bottom-color:var(--alias-color-neutral-transparentStrokeDisabled);}", ".f7vsd9j{background:var(--alias-color-neutral-neutralBackgroundDisabled);}"]
+  "d": [".f1euv43f{position:absolute;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f11zxivh{-webkit-transition:background .1s cubic-bezier(0.33, 0.0, 0.67, 1);transition:background .1s cubic-bezier(0.33, 0.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;}", ".f1jua1m0:before{border-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;}", ".fsn1tsw:after{border-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);}", ".f1ntlsrl:before{background:none;}", ".f1lhwn2z:after{background: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);}", ".fq2pbzm:after{background:var(--colorNeutralBackgroundDisabled);}"]
 });
 /**
  * Styles for the thumb wrapper slot
@@ -127,11 +183,11 @@ var useThumbWrapperStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "B5kzvoi": "f1yab3r1",
     "oyh7mz": ["fhpx7ww", "f1kctpth"],
     "j35jbq": ["f1kctpth", "fhpx7ww"],
-    "Bi2q7bf": "f1xvpgc6",
+    "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);}", ".f1xvpgc6{-webkit-transition:-webkit-transform .1s cubic-bezier(0.33, 0.0, 0.67, 1),background .1s cubic-bezier(0.33, 0.0, 0.67, 1);transition:transform .1s cubic-bezier(0.33, 0.0, 0.67, 1),background .1s cubic-bezier(0.33, 0.0, 0.67, 1);}", ".f1aehjj5{pointer-events:none;}"]
+  "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;}"]
 });
 /**
  * Styles for the thumb slot
@@ -144,37 +200,69 @@ var useThumbStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "a9b677": "fcjrtee",
     "Bqenvij": "fili5n9",
     "B7ck84d": "f1ewtqcl",
-    "Dimara": "f1ytn4vn",
+    "Dimara": "f44lkw9",
     "Bhzewxz": "f1i1t8d1",
     "Bz10aip": ["foouk8k", "fd9rb4b"],
-    "Bkecrkj": "f1aehjj5"
+    "Bi2q7bf": "f11zxivh",
+    "lpbzjs": "f1sdsnyy",
+    "Bkecrkj": "f1aehjj5",
+    "xx9plb": "fxf9f1y",
+    "Bf8kmfk": "frdto5n",
+    "Byque4d": ["f8g0ba1", "ff0gctb"],
+    "Bj2wrql": "f3zr33r",
+    "qd6xl9": ["ff0gctb", "f8g0ba1"],
+    "zf3lio": "fmrqcwg",
+    "rurcny": "f99sooz",
+    "ngabwx": "f1uhpfti",
+    "Hdbjpj": "f11ef69",
+    "u6d25": "f1yuyem3",
+    "jc51t6": ["f1bp8q63", "f1oarbwq"],
+    "Bj55yzk": "f13gddrr",
+    "cnmfks": ["f1oarbwq", "f1bp8q63"],
+    "c4kunb": "f1y5o2fm",
+    "Bs6t6z0": "f77y9vx",
+    "Bmyypfa": "frd86tk"
   },
   "unchecked": {
-    "ayd6f0": "fchusbt"
+    "B4zgs9e": "f1imqj0g"
   },
   "checked": {
-    "ayd6f0": "fhupcpt"
+    "Bpudnjh": "fe3g45j"
   },
   "disabledUnchecked": {
-    "B4j52fo": "f5ogflp",
-    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
-    "Bn0qgzm": "f1f09k3d",
-    "ibv6hh": ["finvdd3", "f1hqa2wf"],
-    "icvyot": "fzkkow9",
-    "vrafjx": ["fcdblym", "fjik90z"],
-    "oivjwe": "fg706s2",
-    "wvpqe5": ["fjik90z", "fcdblym"],
-    "g2u3we": "fjap463",
-    "h3c5rm": ["fto8b0z", "f14er8zu"],
-    "B9xav0g": "f1u5oejo",
-    "zhjwy3": ["f14er8zu", "fto8b0z"],
-    "ayd6f0": "f1tv6yd0"
+    "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"],
+    "B4zgs9e": "fer8lxq"
   },
   "disabledChecked": {
-    "ayd6f0": "f1dd8iac"
+    "Bpudnjh": "fz051tx"
+  }
+}, {
+  "d": [".f1euv43f{position:absolute;}", ".fcjrtee{width:var(--switch-thumb-size);}", ".fili5n9{height:var(--switch-thumb-size);}", ".f1ewtqcl{box-sizing:border-box;}", ".f44lkw9{border-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%);}", ".f11zxivh{-webkit-transition:background .1s cubic-bezier(0.33, 0.0, 0.67, 1);transition:background .1s cubic-bezier(0.33, 0.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;}", ".fmrqcwg:before{border-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;}", ".f1y5o2fm:after{border-radius:var(--borderRadiusCircular);}", ".f77y9vx:after{content:'';}", ".frd86tk:after{opacity:var(--switch-checked-opacity);}", ".f1imqj0g:before{background:var(--colorNeutralStrokeAccessible);}", ".fe3g45j:after{background: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);}", ".fer8lxq:before{background:var(--colorNeutralBackground1);}", ".fz051tx:after{background:var(--colorNeutralForegroundDisabled);}"]
+});
+/**
+ * Styles for the activeRail slot
+ */
+
+
+var useActiveRailStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "activeRail": {
+    "qhf8xq": "f1euv43f",
+    "oyh7mz": ["fhpx7ww", "f1kctpth"],
+    "j35jbq": ["f1kctpth", "fhpx7ww"]
   }
 }, {
-  "d": [".f1euv43f{position:absolute;}", ".fcjrtee{width:var(--switch-thumb-size);}", ".fili5n9{height:var(--switch-thumb-size);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1ytn4vn{border-radius:var(--global-borderRadius-circular);}", ".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%);}", ".f1aehjj5{pointer-events:none;}", ".fchusbt{background:var(--alias-color-neutral-neutralStrokeAccessible);}", ".fhupcpt{background:var(--alias-color-neutral-neutralForegroundOnBrand);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fjap463{border-top-color:var(--alias-color-neutral-neutralForegroundDisabled);}", ".fto8b0z{border-right-color:var(--alias-color-neutral-neutralForegroundDisabled);}", ".f14er8zu{border-left-color:var(--alias-color-neutral-neutralForegroundDisabled);}", ".f1u5oejo{border-bottom-color:var(--alias-color-neutral-neutralForegroundDisabled);}", ".f1tv6yd0{background:var(--alias-color-neutral-neutralBackground1);}", ".f1dd8iac{background:var(--alias-color-neutral-neutralForegroundDisabled);}"]
+  "d": [".f1euv43f{position:absolute;}", ".fhpx7ww{left:calc(var(--switch-thumb-size) * .7);}", ".f1kctpth{right:calc(var(--switch-thumb-size) * .7);}"]
 });
 /**
  * Styles for the hidden input slot
@@ -184,21 +272,22 @@ var useThumbStyles = /*#__PURE__*/react_make_styles_1.__styles({
 var useInputStyle = /*#__PURE__*/react_make_styles_1.__styles({
   "input": {
     "abs64n": "fk73vx1",
-    "a9b677": "fly5x3f",
-    "Bqenvij": "f1l02sjl",
+    "qhf8xq": "f1euv43f",
+    "z8tnut": "f1g0x7ka",
+    "z189sj": ["fhxju0i", "f1cnd47f"],
+    "Byoj8tv": "f1qch9an",
+    "uwmqm3": ["f1cnd47f", "fhxju0i"],
     "B6of3ja": "f1hu3pq6",
     "t21cq0": ["f11qmguv", "f1tyq0we"],
     "jrapky": "f19f4twv",
-    "Frg6f3": ["f1tyq0we", "f11qmguv"]
-  },
-  "enabled": {
-    "Bceei9c": "f1k6fduh"
-  },
-  "disabled": {
-    "Bceei9c": "fdrzuqr"
+    "Frg6f3": ["f1tyq0we", "f11qmguv"],
+    "a9b677": "fly5x3f",
+    "Bqenvij": "f1l02sjl",
+    "lpbzjs": "f1sdsnyy",
+    "Bkecrkj": "f1aehjj5"
   }
 }, {
-  "d": [".fk73vx1{opacity:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1k6fduh{cursor:pointer;}", ".fdrzuqr{cursor:not-allowed;}"]
+  "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;}"]
 });
 /**
  * Apply styling to the Switch slots based on the state
@@ -213,12 +302,14 @@ var useSwitchStyles = function (state) {
   var trackStyles = useTrackStyles();
   var thumbWrapperStyles = useThumbWrapperStyles();
   var thumbStyles = useThumbStyles();
+  var activeRailStyles = useActiveRailStyles();
   var inputStyles = useInputStyle();
-  state.root.className = react_make_styles_1.mergeClasses(rootClassName + (checked ? ' checked' : ''), rootStyles.root, rootStyles.focusIndicator, !disabled && (checked ? rootStyles.checked : rootStyles.unchecked), state.root.className);
-  state.track.className = react_make_styles_1.mergeClasses(trackClassName, trackStyles.track, !disabled && (checked ? trackStyles.checked : trackStyles.unchecked), disabled && (checked ? trackStyles.disabledChecked : trackStyles.disabledUnchecked), state.track.className);
+  state.root.className = react_make_styles_1.mergeClasses(rootClassName + (checked ? ' checked' : ''), rootStyles.root, rootStyles.focusIndicator, !disabled && rootStyles.checked, !disabled && rootStyles.unchecked, disabled ? rootStyles.disabled : rootStyles.enabled, state.root.className);
+  state.track.className = react_make_styles_1.mergeClasses(trackClassName, trackStyles.track, !disabled && trackStyles.checked, !disabled && trackStyles.unchecked, disabled && trackStyles.disabledChecked, disabled && trackStyles.disabledUnchecked, state.track.className);
   state.thumbWrapper.className = react_make_styles_1.mergeClasses(thumbWrapperStyles.thumbWrapper, state.thumbWrapper.className);
-  state.thumb.className = react_make_styles_1.mergeClasses(thumbClassName, thumbStyles.thumb, !disabled && (checked ? thumbStyles.checked : thumbStyles.unchecked), disabled && (checked ? thumbStyles.disabledChecked : thumbStyles.disabledUnchecked), state.thumb.className);
-  state.input.className = react_make_styles_1.mergeClasses(inputStyles.input, disabled ? inputStyles.disabled : inputStyles.enabled, state.input.className);
+  state.thumb.className = react_make_styles_1.mergeClasses(thumbClassName, thumbStyles.thumb, !disabled && thumbStyles.checked, !disabled && thumbStyles.unchecked, disabled && thumbStyles.disabledChecked, disabled && thumbStyles.disabledUnchecked, state.thumb.className);
+  state.activeRail.className = react_make_styles_1.mergeClasses(activeRailStyles.activeRail, state.activeRail.className);
+  state.input.className = react_make_styles_1.mergeClasses(inputStyles.input, state.input.className);
   return state;
 };