@primer/react 38.0.0-rc.195178541 → 38.0.0-rc.2

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -2,33 +2,20 @@
 
 var reactCompilerRuntime = require('react-compiler-runtime');
 var React = require('react');
-var styled = require('styled-components');
-var styledSystem = require('styled-system');
-var constants = require('../constants.js');
-var sx = require('../sx.js');
-var getGlobalFocusStyles = require('../internal/utils/getGlobalFocusStyles.js');
+var clsx = require('clsx');
+var _VisuallyHidden = require('../_VisuallyHidden.js');
+var useSafeTimeout = require('../hooks/useSafeTimeout.js');
+var ToggleSwitch_module = require('./ToggleSwitch.module.css.js');
 var jsxRuntime = require('react/jsx-runtime');
 var useProvidedStateOrCreate = require('../hooks/useProvidedStateOrCreate.js');
-var Box = require('../Box/Box.js');
+var useId = require('../hooks/useId.js');
+var AriaStatus = require('../live-region/AriaStatus.js');
 var Spinner = require('../Spinner/Spinner.js');
-var Text = require('../Text/Text.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
-var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-const TRANSITION_DURATION = '80ms';
-const EASE_OUT_QUAD_CURVE = 'cubic-bezier(0.5, 1, 0.89, 1)';
-const sizeVariants = styledSystem.variant({
-  prop: 'size',
-  variants: {
-    small: {
-      height: '24px',
-      width: '48px'
-    }
-  }
-});
 const CircleIcon = t0 => {
   const $ = reactCompilerRuntime.c(4);
   const {
@@ -101,49 +88,23 @@ const LineIcon = t0 => {
   }
   return t4;
 };
-const SwitchButton = styled__default.default.button.withConfig({
-  displayName: "ToggleSwitch__SwitchButton",
-  componentId: "sc-e6gszy-0"
-})(["vertical-align:middle;cursor:pointer;user-select:none;appearance:none;text-decoration:none;padding:0;transition-property:background-color,border-color;transition-duration:", ";transition-timing-function:", ";border-radius:", ";border-style:solid;border-width:1px;display:block;height:32px;width:64px;position:relative;overflow:hidden;", ";@media (pointer:coarse){&:before{content:'';position:absolute;left:0;right:0;transform:translateY(-50%);top:50%;min-height:44px;}}@media (prefers-reduced-motion){transition:none;*{transition:none;}}&:hover:not(:disabled),&:focus:focus-visible{background-color:", ";}&:active,&:active:focus-visible{background-color:", ";}", " ", " ", ""], TRANSITION_DURATION, EASE_OUT_QUAD_CURVE, constants.get('radii.2'), getGlobalFocusStyles('3px'), constants.get('colors.switchTrack.hoverBg'), constants.get('colors.switchTrack.activeBg'), props => {
-  if (props.disabled) {
-    return styled.css(["background-color:", ";border-color:transparent;cursor:not-allowed;transition-property:none;"], constants.get('colors.switchTrack.disabledBg'));
-  }
-  if (props.checked) {
-    return styled.css(["background-color:", ";border-color:var(--control-checked-borderColor-rest,transparent);&:hover:not(:disabled),&:focus:focus-visible{background-color:", ";}&:active,&:active:focus-visible{background-color:", ";}"], constants.get('colors.switchTrack.checked.bg'), constants.get('colors.switchTrack.checked.hoverBg'), constants.get('colors.switchTrack.checked.activeBg'));
-  } else {
-    return styled.css(["background-color:", ";border-color:var(--controlTrack-borderColor-rest,transparent);&:active{background-color:", ";}"], constants.get('colors.switchTrack.bg'), constants.get('colors.switchTrack.activeBg'));
-  }
-}, sx.default, sizeVariants);
-const ToggleKnob = styled__default.default.div.withConfig({
-  displayName: "ToggleSwitch__ToggleKnob",
-  componentId: "sc-e6gszy-1"
-})(["background-color:", ";border-width:1px;border-style:solid;border-color:", ";border-radius:calc(", " - 1px);width:50%;position:absolute;top:0;bottom:0;transition-property:transform;transition-duration:", ";transition-timing-function:", ";transform:", ";z-index:1;@media (prefers-reduced-motion){transition:none;}", ""], constants.get('colors.switchKnob.bg'), props => props.disabled ? constants.get('colors.switchTrack.disabledBg') : constants.get('colors.switchKnob.border'), constants.get('radii.2'), TRANSITION_DURATION, EASE_OUT_QUAD_CURVE, props => `translateX(${props.checked ? '100%' : '0px'})`, props => {
-  if (props.disabled) {
-    return styled.css(["border-color:", ";"], constants.get('colors.switchTrack.disabledBg'));
-  }
-  if (props.checked) {
-    return styled.css(["border-color:", ";"], constants.get('colors.switchKnob.checked.border'));
-  }
-});
-const hiddenTextStyles = {
-  visibility: 'hidden',
-  height: 0
-};
 const ToggleSwitch = /*#__PURE__*/React__default.default.forwardRef(function ToggleSwitch(props, ref) {
-  const $ = reactCompilerRuntime.c(81);
+  const $ = reactCompilerRuntime.c(91);
   let ariaDescribedby;
   let ariaLabelledby;
   let checked;
+  let className;
   let defaultChecked;
   let disabled;
   let loading;
   let onChange;
   let onClick;
   let rest;
-  let sxProp;
   let t0;
   let t1;
   let t2;
+  let t3;
+  let t4;
   if ($[0] !== props) {
     ({
       "aria-labelledby": ariaLabelledby,
@@ -157,321 +118,348 @@ const ToggleSwitch = /*#__PURE__*/React__default.default.forwardRef(function Tog
       buttonType: t0,
       size: t1,
       statusLabelPosition: t2,
-      sx: sxProp,
+      loadingLabelDelay: t3,
+      loadingLabel: t4,
+      className,
       ...rest
     } = props);
     $[0] = props;
     $[1] = ariaDescribedby;
     $[2] = ariaLabelledby;
     $[3] = checked;
-    $[4] = defaultChecked;
-    $[5] = disabled;
-    $[6] = loading;
-    $[7] = onChange;
-    $[8] = onClick;
-    $[9] = rest;
-    $[10] = sxProp;
+    $[4] = className;
+    $[5] = defaultChecked;
+    $[6] = disabled;
+    $[7] = loading;
+    $[8] = onChange;
+    $[9] = onClick;
+    $[10] = rest;
     $[11] = t0;
     $[12] = t1;
     $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
   } else {
     ariaDescribedby = $[1];
     ariaLabelledby = $[2];
     checked = $[3];
-    defaultChecked = $[4];
-    disabled = $[5];
-    loading = $[6];
-    onChange = $[7];
-    onClick = $[8];
-    rest = $[9];
-    sxProp = $[10];
+    className = $[4];
+    defaultChecked = $[5];
+    disabled = $[6];
+    loading = $[7];
+    onChange = $[8];
+    onClick = $[9];
+    rest = $[10];
     t0 = $[11];
     t1 = $[12];
     t2 = $[13];
+    t3 = $[14];
+    t4 = $[15];
   }
   const buttonType = t0 === undefined ? "button" : t0;
   const size = t1 === undefined ? "medium" : t1;
   const statusLabelPosition = t2 === undefined ? "start" : t2;
+  const loadingLabelDelay = t3 === undefined ? 2000 : t3;
+  const loadingLabel = t4 === undefined ? "Loading" : t4;
   const isControlled = typeof checked !== "undefined";
   const [isOn, setIsOn] = useProvidedStateOrCreate.useProvidedStateOrCreate(checked, onChange, Boolean(defaultChecked));
   const acceptsInteraction = !disabled && !loading;
-  let t3;
-  if ($[14] !== isControlled || $[15] !== isOn || $[16] !== onClick || $[17] !== setIsOn) {
-    t3 = e => {
+  const [isLoadingLabelVisible, setIsLoadingLabelVisible] = React__default.default.useState(false);
+  const loadingLabelId = useId.useId("loadingLabel");
+  const {
+    safeSetTimeout
+  } = useSafeTimeout();
+  let t5;
+  if ($[16] !== disabled || $[17] !== isControlled || $[18] !== isOn || $[19] !== loading || $[20] !== onClick || $[21] !== setIsOn) {
+    t5 = e => {
+      if (disabled || loading) {
+        return;
+      }
       if (!isControlled) {
         setIsOn(!isOn);
       }
       onClick && onClick(e);
     };
-    $[14] = isControlled;
-    $[15] = isOn;
-    $[16] = onClick;
-    $[17] = setIsOn;
-    $[18] = t3;
+    $[16] = disabled;
+    $[17] = isControlled;
+    $[18] = isOn;
+    $[19] = loading;
+    $[20] = onClick;
+    $[21] = setIsOn;
+    $[22] = t5;
   } else {
-    t3 = $[18];
+    t5 = $[22];
   }
-  const handleToggleClick = t3;
-  let t4;
-  if ($[19] !== checked || $[20] !== isControlled || $[21] !== onChange) {
-    t4 = () => {
-      if (onChange && isControlled) {
+  const handleToggleClick = t5;
+  let t6;
+  let t7;
+  if ($[23] !== checked || $[24] !== disabled || $[25] !== isControlled || $[26] !== onChange) {
+    t6 = () => {
+      if (onChange && isControlled && !disabled) {
         onChange(Boolean(checked));
       }
     };
-    $[19] = checked;
-    $[20] = isControlled;
-    $[21] = onChange;
-    $[22] = t4;
-  } else {
-    t4 = $[22];
-  }
-  let t5;
-  if ($[23] !== buttonType || $[24] !== checked || $[25] !== isControlled || $[26] !== onChange) {
-    t5 = [onChange, checked, isControlled, buttonType];
-    $[23] = buttonType;
-    $[24] = checked;
+    t7 = [onChange, checked, isControlled, disabled];
+    $[23] = checked;
+    $[24] = disabled;
     $[25] = isControlled;
     $[26] = onChange;
-    $[27] = t5;
+    $[27] = t6;
+    $[28] = t7;
   } else {
-    t5 = $[27];
+    t6 = $[27];
+    t7 = $[28];
   }
-  React.useEffect(t4, t5);
-  const t6 = statusLabelPosition === "start" ? "row" : "row-reverse";
-  let t7;
-  if ($[28] !== loading) {
-    t7 = loading ? /*#__PURE__*/jsxRuntime.jsx(Spinner, {
-      size: "small"
-    }) : null;
-    $[28] = loading;
-    $[29] = t7;
+  React.useEffect(t6, t7);
+  let t8;
+  let t9;
+  if ($[29] !== isLoadingLabelVisible || $[30] !== loading || $[31] !== loadingLabelDelay || $[32] !== safeSetTimeout) {
+    t8 = () => {
+      if (!loading && isLoadingLabelVisible) {
+        setIsLoadingLabelVisible(false);
+      } else {
+        if (loading && !isLoadingLabelVisible) {
+          safeSetTimeout(() => {
+            setIsLoadingLabelVisible(true);
+          }, loadingLabelDelay);
+        }
+      }
+    };
+    t9 = [loading, isLoadingLabelVisible, loadingLabelDelay, safeSetTimeout];
+    $[29] = isLoadingLabelVisible;
+    $[30] = loading;
+    $[31] = loadingLabelDelay;
+    $[32] = safeSetTimeout;
+    $[33] = t8;
+    $[34] = t9;
   } else {
-    t7 = $[29];
+    t8 = $[33];
+    t9 = $[34];
+  }
+  React.useEffect(t8, t9);
+  let switchButtonDescribedBy = loadingLabelId;
+  if (ariaDescribedby) {
+    switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`;
   }
-  const t8 = acceptsInteraction ? "fg.default" : "fg.muted";
-  const t9 = size === "small" ? 0 : 1;
   let t10;
-  if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = {
-      position: "relative",
-      cursor: "pointer"
-    };
-    $[30] = t10;
+  if ($[35] !== className) {
+    t10 = clsx.clsx(ToggleSwitch_module.ToggleSwitch, className);
+    $[35] = className;
+    $[36] = t10;
   } else {
-    t10 = $[30];
+    t10 = $[36];
   }
-  const t11 = isOn ? null : hiddenTextStyles;
+  const t11 = isLoadingLabelVisible && loadingLabel;
   let t12;
-  if ($[31] !== t11) {
-    t12 = /*#__PURE__*/jsxRuntime.jsx(Box, {
-      textAlign: "right",
-      sx: t11,
+  if ($[37] !== loadingLabelId || $[38] !== t11) {
+    t12 = /*#__PURE__*/jsxRuntime.jsx(_VisuallyHidden, {
+      children: /*#__PURE__*/jsxRuntime.jsx(AriaStatus.AriaStatus, {
+        announceOnShow: true,
+        id: loadingLabelId,
+        children: t11
+      })
+    });
+    $[37] = loadingLabelId;
+    $[38] = t11;
+    $[39] = t12;
+  } else {
+    t12 = $[39];
+  }
+  let t13;
+  if ($[40] !== loading || $[41] !== statusLabelPosition) {
+    t13 = loading ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: ToggleSwitch_module.LoadingSpinner,
+      "data-status-label-position": statusLabelPosition,
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {
+        size: "small",
+        srText: null
+      })
+    }) : null;
+    $[40] = loading;
+    $[41] = statusLabelPosition;
+    $[42] = t13;
+  } else {
+    t13 = $[42];
+  }
+  const t14 = !acceptsInteraction;
+  const t15 = !isOn;
+  let t16;
+  if ($[43] !== t15) {
+    t16 = /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: ToggleSwitch_module.StatusTextItem,
+      "data-hidden": t15,
       children: "On"
     });
-    $[31] = t11;
-    $[32] = t12;
+    $[43] = t15;
+    $[44] = t16;
   } else {
-    t12 = $[32];
+    t16 = $[44];
   }
-  const t13 = isOn ? hiddenTextStyles : null;
-  let t14;
-  if ($[33] !== t13) {
-    t14 = /*#__PURE__*/jsxRuntime.jsx(Box, {
-      textAlign: "right",
-      sx: t13,
+  let t17;
+  if ($[45] !== isOn) {
+    t17 = /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: ToggleSwitch_module.StatusTextItem,
+      "data-hidden": isOn,
       children: "Off"
     });
-    $[33] = t13;
-    $[34] = t14;
+    $[45] = isOn;
+    $[46] = t17;
   } else {
-    t14 = $[34];
+    t17 = $[46];
   }
-  let t15;
-  if ($[35] !== handleToggleClick || $[36] !== t12 || $[37] !== t14 || $[38] !== t8 || $[39] !== t9) {
-    t15 = /*#__PURE__*/jsxRuntime.jsxs(Text, {
-      color: t8,
-      fontSize: t9,
-      mx: 2,
+  let t18;
+  if ($[47] !== handleToggleClick || $[48] !== size || $[49] !== t14 || $[50] !== t16 || $[51] !== t17) {
+    t18 = /*#__PURE__*/jsxRuntime.jsxs("span", {
+      className: ToggleSwitch_module.StatusText,
+      "data-size": size,
+      "data-disabled": t14,
       "aria-hidden": "true",
-      sx: t10,
       onClick: handleToggleClick,
-      children: [t12, t14]
+      children: [t16, t17]
     });
-    $[35] = handleToggleClick;
-    $[36] = t12;
-    $[37] = t14;
-    $[38] = t8;
-    $[39] = t9;
-    $[40] = t15;
+    $[47] = handleToggleClick;
+    $[48] = size;
+    $[49] = t14;
+    $[50] = t16;
+    $[51] = t17;
+    $[52] = t18;
   } else {
-    t15 = $[40];
+    t18 = $[52];
   }
-  const t16 = !acceptsInteraction;
-  const t17 = acceptsInteraction ? "switchTrack.checked.fg" : "switchTrack.checked.disabledFg";
-  const t18 = `translateX(${isOn ? "0" : "-100%"})`;
-  let t19;
-  if ($[41] !== t18) {
-    t19 = {
-      transform: t18,
-      transitionProperty: "transform",
-      transitionDuration: TRANSITION_DURATION
-    };
-    $[41] = t18;
-    $[42] = t19;
-  } else {
-    t19 = $[42];
-  }
-  let t20;
-  if ($[43] !== size) {
-    t20 = /*#__PURE__*/jsxRuntime.jsx(LineIcon, {
+  const t19 = !acceptsInteraction;
+  const t20 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : undefined;
+  const t21 = !acceptsInteraction;
+  const t22 = !acceptsInteraction;
+  let t23;
+  if ($[53] !== size) {
+    t23 = /*#__PURE__*/jsxRuntime.jsx(LineIcon, {
       size: size
     });
-    $[43] = size;
-    $[44] = t20;
-  } else {
-    t20 = $[44];
-  }
-  let t21;
-  if ($[45] !== t17 || $[46] !== t19 || $[47] !== t20) {
-    t21 = /*#__PURE__*/jsxRuntime.jsx(Box, {
-      flexGrow: 1,
-      flexShrink: 0,
-      flexBasis: "50%",
-      color: t17,
-      lineHeight: "0",
-      sx: t19,
-      children: t20
-    });
-    $[45] = t17;
-    $[46] = t19;
-    $[47] = t20;
-    $[48] = t21;
+    $[53] = size;
+    $[54] = t23;
   } else {
-    t21 = $[48];
+    t23 = $[54];
   }
-  const t22 = acceptsInteraction ? "switchTrack.fg" : "switchTrack.disabledFg";
-  const t23 = `translateX(${isOn ? "100%" : "0"})`;
   let t24;
-  if ($[49] !== t23) {
-    t24 = {
-      transform: t23,
-      transitionProperty: "transform",
-      transitionDuration: TRANSITION_DURATION
-    };
-    $[49] = t23;
-    $[50] = t24;
-  } else {
-    t24 = $[50];
-  }
-  let t25;
-  if ($[51] !== size) {
-    t25 = /*#__PURE__*/jsxRuntime.jsx(CircleIcon, {
-      size: size
+  if ($[55] !== isOn || $[56] !== t22 || $[57] !== t23) {
+    t24 = /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: `${ToggleSwitch_module.IconContainer} ${ToggleSwitch_module.LineIconContainer}`,
+      "data-checked": isOn,
+      "data-disabled": t22,
+      children: t23
     });
-    $[51] = size;
-    $[52] = t25;
+    $[55] = isOn;
+    $[56] = t22;
+    $[57] = t23;
+    $[58] = t24;
   } else {
-    t25 = $[52];
+    t24 = $[58];
   }
+  const t25 = !acceptsInteraction;
   let t26;
-  if ($[53] !== t22 || $[54] !== t24 || $[55] !== t25) {
-    t26 = /*#__PURE__*/jsxRuntime.jsx(Box, {
-      flexGrow: 1,
-      flexShrink: 0,
-      flexBasis: "50%",
-      color: t22,
-      lineHeight: "0",
-      sx: t24,
-      children: t25
+  if ($[59] !== size) {
+    t26 = /*#__PURE__*/jsxRuntime.jsx(CircleIcon, {
+      size: size
     });
-    $[53] = t22;
-    $[54] = t24;
-    $[55] = t25;
-    $[56] = t26;
+    $[59] = size;
+    $[60] = t26;
   } else {
-    t26 = $[56];
+    t26 = $[60];
   }
   let t27;
-  if ($[57] !== t21 || $[58] !== t26) {
-    t27 = /*#__PURE__*/jsxRuntime.jsxs(Box, {
-      "aria-hidden": "true",
-      display: "flex",
-      alignItems: "center",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      children: [t21, t26]
+  if ($[61] !== isOn || $[62] !== t25 || $[63] !== t26) {
+    t27 = /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: `${ToggleSwitch_module.IconContainer} ${ToggleSwitch_module.CircleIconContainer}`,
+      "data-checked": isOn,
+      "data-disabled": t25,
+      children: t26
     });
-    $[57] = t21;
-    $[58] = t26;
-    $[59] = t27;
+    $[61] = isOn;
+    $[62] = t25;
+    $[63] = t26;
+    $[64] = t27;
   } else {
-    t27 = $[59];
+    t27 = $[64];
   }
-  const t28 = !acceptsInteraction;
-  let t29;
-  if ($[60] !== isOn || $[61] !== t28) {
-    t29 = /*#__PURE__*/jsxRuntime.jsx(ToggleKnob, {
+  let t28;
+  if ($[65] !== t24 || $[66] !== t27) {
+    t28 = /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: ToggleSwitch_module.SwitchButtonContent,
       "aria-hidden": "true",
-      disabled: t28,
-      checked: isOn
+      children: [t24, t27]
     });
-    $[60] = isOn;
-    $[61] = t28;
-    $[62] = t29;
+    $[65] = t24;
+    $[66] = t27;
+    $[67] = t28;
   } else {
-    t29 = $[62];
+    t28 = $[67];
   }
+  const t29 = !acceptsInteraction;
   let t30;
-  if ($[63] !== ariaDescribedby || $[64] !== ariaLabelledby || $[65] !== buttonType || $[66] !== handleToggleClick || $[67] !== isOn || $[68] !== ref || $[69] !== size || $[70] !== t16 || $[71] !== t27 || $[72] !== t29) {
-    t30 = /*#__PURE__*/jsxRuntime.jsxs(SwitchButton, {
+  if ($[68] !== isOn || $[69] !== t29) {
+    t30 = /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: ToggleSwitch_module.ToggleKnob,
+      "data-checked": isOn,
+      "data-disabled": t29,
+      "aria-hidden": "true"
+    });
+    $[68] = isOn;
+    $[69] = t29;
+    $[70] = t30;
+  } else {
+    t30 = $[70];
+  }
+  let t31;
+  if ($[71] !== ariaLabelledby || $[72] !== buttonType || $[73] !== handleToggleClick || $[74] !== isOn || $[75] !== ref || $[76] !== size || $[77] !== t19 || $[78] !== t20 || $[79] !== t21 || $[80] !== t28 || $[81] !== t30) {
+    t31 = /*#__PURE__*/jsxRuntime.jsxs("button", {
       ref: ref,
       type: buttonType,
+      className: ToggleSwitch_module.SwitchButton,
+      "data-size": size,
+      "data-checked": isOn,
+      "data-disabled": t19,
       onClick: handleToggleClick,
       "aria-labelledby": ariaLabelledby,
-      "aria-describedby": ariaDescribedby,
+      "aria-describedby": t20,
       "aria-pressed": isOn,
-      checked: isOn,
-      size: size,
-      disabled: t16,
-      children: [t27, t29]
+      "aria-disabled": t21,
+      children: [t28, t30]
     });
-    $[63] = ariaDescribedby;
-    $[64] = ariaLabelledby;
-    $[65] = buttonType;
-    $[66] = handleToggleClick;
-    $[67] = isOn;
-    $[68] = ref;
-    $[69] = size;
-    $[70] = t16;
-    $[71] = t27;
-    $[72] = t29;
-    $[73] = t30;
+    $[71] = ariaLabelledby;
+    $[72] = buttonType;
+    $[73] = handleToggleClick;
+    $[74] = isOn;
+    $[75] = ref;
+    $[76] = size;
+    $[77] = t19;
+    $[78] = t20;
+    $[79] = t21;
+    $[80] = t28;
+    $[81] = t30;
+    $[82] = t31;
   } else {
-    t30 = $[73];
+    t31 = $[82];
   }
-  let t31;
-  if ($[74] !== rest || $[75] !== sxProp || $[76] !== t15 || $[77] !== t30 || $[78] !== t6 || $[79] !== t7) {
-    t31 = /*#__PURE__*/jsxRuntime.jsxs(Box, {
-      display: "inline-flex",
-      alignItems: "center",
-      flexDirection: t6,
-      sx: sxProp,
+  let t32;
+  if ($[83] !== rest || $[84] !== statusLabelPosition || $[85] !== t10 || $[86] !== t12 || $[87] !== t13 || $[88] !== t18 || $[89] !== t31) {
+    t32 = /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: t10,
+      "data-status-label-position": statusLabelPosition,
       ...rest,
-      children: [t7, t15, t30]
+      children: [t12, t13, t18, t31]
     });
-    $[74] = rest;
-    $[75] = sxProp;
-    $[76] = t15;
-    $[77] = t30;
-    $[78] = t6;
-    $[79] = t7;
-    $[80] = t31;
+    $[83] = rest;
+    $[84] = statusLabelPosition;
+    $[85] = t10;
+    $[86] = t12;
+    $[87] = t13;
+    $[88] = t18;
+    $[89] = t31;
+    $[90] = t32;
   } else {
-    t31 = $[80];
+    t32 = $[90];
   }
-  return t31;
+  return t32;
 });
 if (process.env.NODE_ENV !== "production") {
   ToggleSwitch.displayName = 'ToggleSwitch';

package/lib/ToggleSwitch/ToggleSwitch.module.css.js

@@ -0,0 +1,7 @@
+'use strict';
+
+require('./ToggleSwitch-4b23d166.css');
+
+var classes = {"ToggleSwitch":"prc-ToggleSwitch-ToggleSwitch-E4lp0","LoadingSpinner":"prc-ToggleSwitch-LoadingSpinner-jCYtC","StatusText":"prc-ToggleSwitch-StatusText-hWpj2","StatusTextItem":"prc-ToggleSwitch-StatusTextItem-fvvXa","SwitchButton":"prc-ToggleSwitch-SwitchButton-5LRHX","SwitchButtonContent":"prc-ToggleSwitch-SwitchButtonContent-nv4lE","IconContainer":"prc-ToggleSwitch-IconContainer-zLC02","LineIconContainer":"prc-ToggleSwitch-LineIconContainer-7sQm8","CircleIconContainer":"prc-ToggleSwitch-CircleIconContainer-gHYvi","ToggleKnob":"prc-ToggleSwitch-ToggleKnob-2e7Rm"};
+
+module.exports = classes;