@strapi/design-system 2.0.0-beta.5 → 2.0.0-beta.6

package/dist/index.js

@@ -25,7 +25,9 @@ const Dialog$1 = require("@radix-ui/react-dialog");
 const ScrollArea = require("@radix-ui/react-scroll-area");
 const number = require("@internationalized/number");
 const Popover$1 = require("@radix-ui/react-popover");
+const Progress = require("@radix-ui/react-progress");
 const RadioGroup = require("@radix-ui/react-radio-group");
+const Switch = require("@radix-ui/react-switch");
 const Tabs$1 = require("@radix-ui/react-tabs");
 function _interopNamespace(e) {
   if (e && e.__esModule)
@@ -56,7 +58,9 @@ const AlertDialog__namespace = /* @__PURE__ */ _interopNamespace(AlertDialog);
 const Dialog__namespace = /* @__PURE__ */ _interopNamespace(Dialog$1);
 const ScrollArea__namespace = /* @__PURE__ */ _interopNamespace(ScrollArea);
 const Popover__namespace = /* @__PURE__ */ _interopNamespace(Popover$1);
+const Progress__namespace = /* @__PURE__ */ _interopNamespace(Progress);
 const RadioGroup__namespace = /* @__PURE__ */ _interopNamespace(RadioGroup);
+const Switch__namespace = /* @__PURE__ */ _interopNamespace(Switch);
 const Tabs__namespace = /* @__PURE__ */ _interopNamespace(Tabs$1);
 const createContext = (rootComponentName, defaultContext) => {
   const Context = React__namespace.createContext(defaultContext);
@@ -1515,7 +1519,7 @@ const ButtonWrapper = styledComponents.styled(BaseButton)`
   }
 `;
 const Link = forwardRef(
-  ({ children, href, disabled = false, startIcon, endIcon, isExternal = true, ...props }, ref) => {
+  ({ children, href, disabled = false, startIcon, endIcon, isExternal = false, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(LinkWrapper$2, { ref, href, disabled, isExternal, ...props, children: [
       startIcon,
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { textColor: disabled ? "neutral600" : "primary600", children }),
@@ -7862,6 +7866,7 @@ const Input$2 = React__namespace.forwardRef(
     hasError: hasErrorProp,
     required: requiredProp,
     className,
+    size = "M",
     ...props
   }, ref) => {
     const { id, error, hint, name, required } = useField("Input");
@@ -7880,10 +7885,6 @@ const Input$2 = React__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       InputWrapper,
       {
-        paddingLeft: 3,
-        paddingRight: 3,
-        paddingTop: 2,
-        paddingBottom: 2,
         gap: 2,
         justifyContent: "space-between",
         $hasError: hasError || hasErrorProp,
@@ -7897,13 +7898,14 @@ const Input$2 = React__namespace.forwardRef(
               id,
               name,
               ref,
+              $hasLeftAction: Boolean(startAction),
+              $hasRightAction: Boolean(endAction),
+              $size: size,
               "aria-describedby": ariaDescription,
               "aria-invalid": hasError || hasErrorProp,
               "aria-disabled": disabled,
               disabled,
               "data-disabled": disabled ? "" : void 0,
-              $hasLeftAction: Boolean(startAction),
-              $hasRightAction: Boolean(endAction),
               onChange: handleChange,
               "aria-required": required || requiredProp,
               ...props
@@ -7928,6 +7930,23 @@ const InputElement = styledComponents.styled.input`
   width: 100%;
   background: inherit;
 
+  ${(props) => {
+  switch (props.$size) {
+    case "S":
+      return styledComponents.css`
+          padding-inline-start: ${props.$hasLeftAction ? props.theme.spaces[3] : props.theme.spaces[4]};
+          padding-inline-end: ${props.$hasRightAction ? props.theme.spaces[3] : props.theme.spaces[4]};
+          padding-block: ${props.theme.spaces[1]};
+        `;
+    default:
+      return styledComponents.css`
+          padding-inline-start: ${props.$hasLeftAction ? props.theme.spaces[3] : props.theme.spaces[4]};
+          padding-inline-end: ${props.$hasRightAction ? props.theme.spaces[3] : props.theme.spaces[4]};
+          padding-block: ${props.theme.spaces[2]};
+        `;
+  }
+}};
+
   ::placeholder {
     color: ${({ theme }) => theme.colors.neutral500};
     opacity: 1;
@@ -8131,6 +8150,7 @@ const Combobox = React__namespace.forwardRef(
     onLoadMore,
     placeholder = "Select or enter a value",
     required: requiredProp = false,
+    size = "M",
     startIcon,
     textValue,
     value,
@@ -8230,7 +8250,7 @@ const Combobox = React__namespace.forwardRef(
         onFilterValueChange: handleFilterValueChange,
         isPrintableCharacter: isPrintableCharacter2,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Trigger$5, { $hasError: hasError, className, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Trigger$5, { $hasError: hasError, $size: size, className, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(Flex, { flex: "1", tag: "span", gap: 3, children: [
               startIcon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: "0 0 1.6rem", tag: "span", "aria-hidden": true, children: startIcon }) : null,
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -8295,10 +8315,6 @@ const IconBox$3 = styledComponents.styled(Box)`
 const Trigger$5 = styledComponents.styled(uiPrimitives.Combobox.Trigger)`
   position: relative;
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
-  padding-right: ${({ theme }) => theme.spaces[3]};
-  padding-left: ${({ theme }) => theme.spaces[3]};
-  padding-top: ${({ theme }) => theme.spaces[2]};
-  padding-bottom: ${({ theme }) => theme.spaces[2]};
   border-radius: ${({ theme }) => theme.borderRadius};
   background: ${({ theme }) => theme.colors.neutral0};
   overflow: hidden;
@@ -8307,6 +8323,23 @@ const Trigger$5 = styledComponents.styled(uiPrimitives.Combobox.Trigger)`
   justify-content: space-between;
   gap: ${({ theme }) => theme.spaces[4]};
 
+  ${(props) => {
+  switch (props.$size) {
+    case "S":
+      return styledComponents.css`
+          padding-inline-start: ${({ theme }) => theme.spaces[4]};
+          padding-inline-end: ${({ theme }) => theme.spaces[3]};
+          padding-block: ${({ theme }) => theme.spaces[1]};
+        `;
+    default:
+      return styledComponents.css`
+          padding-inline-start: ${({ theme }) => theme.spaces[4]};
+          padding-inline-end: ${({ theme }) => theme.spaces[3]};
+          padding-block: ${({ theme }) => theme.spaces[2]};
+        `;
+  }
+}}
+
   &[data-disabled] {
     color: ${({ theme }) => theme.colors.neutral600};
     background: ${({ theme }) => theme.colors.neutral150};
@@ -8767,7 +8800,7 @@ const Portal$1 = React__namespace.forwardRef(
 );
 Portal$1.displayName = "Portal";
 const SelectTrigger = React__namespace.forwardRef(
-  ({ onClear, clearLabel = "Clear", startIcon, disabled, hasError, children, id, ...restProps }, ref) => {
+  ({ onClear, clearLabel = "Clear", startIcon, disabled, hasError, children, id, size = "M", withTags, ...restProps }, ref) => {
     const triggerRef = React__namespace.useRef(null);
     const handleClearClick = (e) => {
       if (onClear && !disabled) {
@@ -8789,13 +8822,11 @@ const SelectTrigger = React__namespace.forwardRef(
         overflow: "hidden",
         hasRadius: true,
         background: disabled ? "neutral150" : "neutral0",
-        paddingLeft: 3,
-        paddingRight: 3,
-        paddingTop: 2,
-        paddingBottom: 2,
         gap: 4,
         cursor: "default",
         "aria-labelledby": labelNode ? `${id}-label` : void 0,
+        $size: size,
+        $withTags: withTags,
         ...restProps,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Flex, { flex: "1", tag: "span", gap: 3, children: [
@@ -8840,6 +8871,22 @@ const IconBox$2 = styledComponents.styled(Box)`
 `;
 const StyledTrigger = styledComponents.styled(Flex)`
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
+  ${(props) => {
+  switch (props.$size) {
+    case "S":
+      return styledComponents.css`
+          padding-block: ${props.theme.spaces[1]};
+          padding-inline-start: ${props.$withTags ? props.theme.spaces[1] : props.theme.spaces[4]};
+          padding-inline-end: ${props.theme.spaces[3]};
+        `;
+    default:
+      return styledComponents.css`
+          padding-block: ${props.$withTags ? "0.3rem" : props.theme.spaces[2]};
+          padding-inline-start: ${props.$withTags ? props.theme.spaces[1] : props.theme.spaces[4]};
+          padding-inline-end: ${props.theme.spaces[3]};
+        `;
+  }
+}}
 
   &[aria-disabled='true'] {
     color: ${(props) => props.theme.colors.neutral600};
@@ -8959,6 +9006,7 @@ const SingleSelect = React__namespace.forwardRef(
     onReachEnd,
     placeholder,
     required: requiredProp,
+    size,
     startIcon,
     value: passedValue,
     ...restProps
@@ -9034,6 +9082,7 @@ const SingleSelect = React__namespace.forwardRef(
               onClear: value && onClear ? handleOnClear : void 0,
               "aria-label": restProps["aria-label"],
               "aria-describedby": ariaDescription ?? restProps["aria-describedby"],
+              size,
               children: /* @__PURE__ */ jsxRuntime.jsx(Value, { placeholder, textColor: value ? "neutral800" : "neutral600", children: value && customizeContent ? customizeContent(value) : void 0 })
             }
           ),
@@ -9082,6 +9131,7 @@ const DatePicker$1 = React__namespace.forwardRef(
     required: requiredProp = false,
     onClear,
     clearLabel = "Clear",
+    size = "M",
     ...restProps
   }, ref) => {
     const timeZone = date.getLocalTimeZone();
@@ -9192,7 +9242,7 @@ const DatePicker$1 = React__namespace.forwardRef(
         trigger,
         value,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(DatePickerTrigger, { className, hasError, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(DatePickerTrigger, { className, hasError, size, children: [
             /* @__PURE__ */ jsxRuntime.jsx(icons.Calendar, { fill: "neutral500", "aria-hidden": true }),
             /* @__PURE__ */ jsxRuntime.jsx(DatePickerTextInput, { ref, "aria-describedby": ariaDescription, id, name, ...restProps }),
             textValue && onClear ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -9238,7 +9288,7 @@ const makeInitialCalendarDate = ({ currentValue, minDate, maxDate }) => {
 };
 const DATE_PICKER_TRIGGER_NAME = "DatePickerTrigger";
 const DatePickerTrigger = React__namespace.forwardRef(
-  ({ hasError, ...restProps }, forwardedRef) => {
+  ({ hasError, size, ...restProps }, forwardedRef) => {
     const context = useDatePickerContext(DATE_PICKER_TRIGGER_NAME);
     const composedRefs = useComposedRefs(forwardedRef, (node) => context.onTriggerChange(node));
     const handleOpenChange = () => {
@@ -9263,9 +9313,8 @@ const DatePickerTrigger = React__namespace.forwardRef(
           {
             ref: composedRefs,
             $hasError: hasError,
+            $size: size,
             ...restProps,
-            paddingLeft: 3,
-            paddingRight: 3,
             hasRadius: true,
             gap: 3,
             overflow: "hidden",
@@ -9295,7 +9344,20 @@ const DatePickerTrigger = React__namespace.forwardRef(
 );
 const TriggerElement = styledComponents.styled(Flex)`
   border: 1px solid ${({ theme, $hasError }) => $hasError ? theme.colors.danger600 : theme.colors.neutral200};
-  padding-block: ${({ theme }) => theme.spaces[2]};
+  ${(props) => {
+  switch (props.$size) {
+    case "S":
+      return styledComponents.css`
+          padding-block: ${props.theme.spaces[1]};
+          padding-inline: ${props.theme.spaces[3]};
+        `;
+    default:
+      return styledComponents.css`
+          padding-block: ${props.theme.spaces[2]};
+          padding-inline: ${props.theme.spaces[3]};
+        `;
+  }
+}}
 
   & > svg {
     flex: 1 0 auto;
@@ -9912,6 +9974,7 @@ const DateTimePicker = React__namespace.forwardRef(
     step,
     value,
     initialDate,
+    size,
     ...props
   }, forwardedRef) => {
     const DatePickerElement2 = React__namespace.useRef(null);
@@ -9971,6 +10034,7 @@ const DateTimePicker = React__namespace.forwardRef(
         DatePicker,
         {
           ...props,
+          size,
           value: dateValue?.toDate("UTC"),
           onChange: handleDateChange,
           required,
@@ -9984,6 +10048,7 @@ const DateTimePicker = React__namespace.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(Root$6, { children: /* @__PURE__ */ jsxRuntime.jsx(
         TimePicker,
         {
+          size,
           hasError,
           value: timeValue,
           onChange: handleTimeChange,
@@ -10460,7 +10525,7 @@ const LinkButton = forwardRef(
         ...props,
         children: [
           startIcon && /* @__PURE__ */ jsxRuntime.jsx(Flex, { "aria-hidden": true, children: startIcon }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: size === "S" ? "pi" : void 0, fontWeight: "bold", textColor: "buttonNeutral0", children }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: size === "S" ? "pi" : void 0, fontWeight: "bold", children }),
           endIcon && /* @__PURE__ */ jsxRuntime.jsx(Flex, { "aria-hidden": true, children: endIcon })
         ]
       }
@@ -10547,7 +10612,7 @@ const ScrollAreaRoot = styledComponents.styled(ScrollArea__namespace.Root)`
 `;
 const ScrollAreaViewport = styledComponents.styled(ScrollArea__namespace.Viewport)`
   min-width: 100%;
-  padding-inline-end: 4px;
+  padding-inline: 4px;
 `;
 const Scrollbar = styledComponents.styled(ScrollArea__namespace.Scrollbar)`
   display: flex;
@@ -10794,7 +10859,7 @@ const NumberInput = React__namespace.forwardRef(
         onKeyDown: handleKeyDown,
         onBlur: handleBlur,
         value: inputValue,
-        endAction: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        endAction: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             ArrowButton,
             {
@@ -10828,13 +10893,14 @@ const NumberInput = React__namespace.forwardRef(
 );
 const ArrowButton = styledComponents.styled.button`
   display: flex;
-  height: 1rem;
-  align-items: ${({ $reverse }) => $reverse ? "flex-end" : "flex-start"};
+  justify-content: center;
+  align-items: center;
   transform: translateY(${({ $reverse }) => $reverse ? `-2px` : `2px`});
   cursor: ${({ disabled }) => disabled ? "not-allowed" : void 0};
+  height: 1.1rem;
+
   svg {
-    display: block;
-    height: 0.4rem;
+    width: 1.2rem;
     transform: ${({ $reverse }) => $reverse ? "rotateX(180deg)" : void 0};
   }
 `;
@@ -11010,36 +11076,34 @@ const Popover = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   ScrollArea: ScrollAreaImpl,
   Trigger: Trigger$1
 }, Symbol.toStringTag, { value: "Module" }));
-const ProgressbarBase = styledComponents.styled(Box)`
-  &:before {
-    background-color: ${({ theme }) => theme.colors.neutral0};
-    border-radius: ${({ theme }) => theme.borderRadius};
-    bottom: 0;
-    content: '';
-    position: absolute;
-    top: 0;
-    width: ${({ $value }) => `${$value}%`};
+const ProgressBar = React__namespace.forwardRef(
+  ({ size = "M", value, ...restProps }, forwardedRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(ProgressRoot, { ref: forwardedRef, $size: size, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, { style: { transform: `translate3D(-${100 - (value ?? 0)}%, 0, 0)` } }) });
+  }
+);
+const ProgressRoot = styledComponents.styled(Progress__namespace.Root)`
+  position: relative;
+  overflow: hidden;
+  width: ${(props) => props.$size === "S" ? "7.8rem" : "10.2rem"};
+  height: ${(props) => props.$size === "S" ? "0.4rem" : "0.8rem"};
+  background-color: ${(props) => props.theme.colors.neutral600};
+  border-radius: ${(props) => props.theme.borderRadius};
+
+  /* Fix overflow clipping in Safari */
+  /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
+  transform: translateZ(0);
+`;
+const ProgressIndicator = styledComponents.styled(Progress__namespace.Indicator)`
+  background-color: ${({ theme }) => theme.colors.neutral0};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  width: 100%;
+  height: 100%;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform ${(props) => props.theme.motion.timings["320"]}
+      ${(props) => props.theme.motion.easings.authenticMotion};
   }
 `;
-const ProgressBar = ({ min = 0, max = 100, value = 0, children, size = "M", ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ProgressbarBase,
-    {
-      background: "neutral600",
-      hasRadius: true,
-      "aria-label": children,
-      "aria-valuemax": max,
-      "aria-valuemin": min,
-      "aria-valuenow": value,
-      height: size === "S" ? 1 : 2,
-      position: "relative",
-      role: "progressbar",
-      $value: value,
-      width: size === "S" ? "78px" : "102px",
-      ...props
-    }
-  );
-};
 const Group = React__namespace.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupRoot, { ref: forwardedRef, ...props });
 });
@@ -11445,6 +11509,7 @@ const MultiSelect = React__namespace.forwardRef(
     onReachEnd,
     placeholder,
     required: requiredProp,
+    size,
     startIcon,
     value: passedValue,
     withTags,
@@ -11528,7 +11593,8 @@ const MultiSelect = React__namespace.forwardRef(
               disabled,
               clearLabel,
               onClear: value?.length ? onClear : void 0,
-              paddingLeft: withTags && value?.length ? 1 : 3,
+              withTags: Boolean(withTags && (value?.length ?? 0 > 0)),
+              size,
               children: /* @__PURE__ */ jsxRuntime.jsx(Value, { placeholder, textColor: value?.length ? "neutral800" : "neutral600", children: value?.length ? withTags ? renderTags : customizeContent ? customizeContent(value) : void 0 : void 0 })
             }
           ),
@@ -11720,6 +11786,12 @@ const SubNavLink = forwardRef(
     );
   }
 );
+const CustomBullet = styledComponents.styled.span`
+  width: 0.4rem;
+  height: 0.4rem;
+  background-color: ${({ theme, $active }) => $active ? theme.colors.primary600 : theme.colors.neutral600};
+  border-radius: 50%;
+`;
 const SubNavLinkWrapper = styledComponents.styled(BaseLink)`
   display: flex;
   align-items: center;
@@ -11739,18 +11811,16 @@ const SubNavLinkWrapper = styledComponents.styled(BaseLink)`
         font-weight: 500;
       `;
 }}
+
+    ${CustomBullet} {
+      background-color: ${({ theme }) => theme.colors.primary600};
+    }
   }
 
   &:focus-visible {
     outline-offset: -2px;
   }
 `;
-const CustomBullet = styledComponents.styled.span`
-  width: 0.4rem;
-  height: 0.4rem;
-  background-color: ${({ theme, $active }) => $active ? theme.colors.primary600 : theme.colors.neutral600};
-  border-radius: 50%;
-`;
 const IconWrapper = styledComponents.styled.div`
   svg {
     height: 1.6rem;
@@ -11881,70 +11951,84 @@ const SubNavSections = ({ children, spacing = 2, horizontal = false, ...props })
     }
   ) });
 };
-const Switch = React__namespace.forwardRef(
-  ({ label, onChange, onLabel = "On", offLabel = "Off", selected, visibleLabels = false, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      SwitchButton,
-      {
-        ref,
-        role: "switch",
-        "aria-checked": selected,
-        "aria-label": label,
-        onClick: onChange,
-        type: "button",
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(SwitchContent, { $visibleLabels: visibleLabels, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: onLabel }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: offLabel })
-          ] }),
-          visibleLabels && /* @__PURE__ */ jsxRuntime.jsx(Box, { tag: "span", "aria-hidden": true, paddingLeft: 2, color: selected ? "success600" : "danger600", children: selected ? onLabel : offLabel })
-        ] })
-      }
-    );
+const SwitchImpl = React__namespace.forwardRef(
+  ({
+    visibleLabels,
+    onLabel = "On",
+    offLabel = "Off",
+    onCheckedChange: onCheckedChangeProp,
+    checked: checkedProp,
+    defaultChecked,
+    disabled,
+    ...restProps
+  }, forwardedRef) => {
+    const [internalChecked, setInternalChecked] = useControllableState$1({
+      prop: checkedProp,
+      defaultProp: defaultChecked
+    });
+    const handleCheckChange = (checked) => {
+      setInternalChecked(checked);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SwitchRoot,
+        {
+          ref: forwardedRef,
+          onCheckedChange: uiPrimitives.composeEventHandlers(onCheckedChangeProp, handleCheckChange),
+          checked: internalChecked,
+          disabled,
+          ...restProps,
+          children: /* @__PURE__ */ jsxRuntime.jsx(SwitchThumb, {})
+        }
+      ),
+      visibleLabels ? /* @__PURE__ */ jsxRuntime.jsx(LabelTypography, { "aria-hidden": true, "data-disabled": disabled, "data-state": internalChecked ? "checked" : "unchecked", children: internalChecked ? onLabel : offLabel }) : null
+    ] });
   }
 );
-const SwitchContent = styledComponents.styled.div`
-  background: ${({ theme }) => theme.colors.danger500};
-  border: none;
-  border-radius: 16px;
-  position: relative;
-  height: 2.4rem;
+const SwitchRoot = styledComponents.styled(Switch__namespace.Root)`
   width: 4rem;
+  height: 2.4rem;
+  border-radius: 1.2rem;
+  background-color: ${({ theme }) => theme.colors.danger500};
 
-  & > span {
-    font-size: ${({ $visibleLabels }) => $visibleLabels ? "1rem" : 0};
+  &[data-state='checked'] {
+    background-color: ${({ theme }) => theme.colors.success500};
   }
 
-  &:before {
-    content: '';
-    background: ${({ theme }) => theme.colors.neutral0};
-    width: 1rem;
-    height: 1rem;
-    border-radius: 50%;
-    position: absolute;
-    transition: all 0.5s;
-    left: ${({ theme }) => theme.spaces[1]};
-    top: ${({ theme }) => theme.spaces[1]};
+  &[data-disabled] {
+    background-color: ${({ theme }) => theme.colors.neutral300};
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    &:before {
-      transition: none;
-    }
+  @media (prefers-reduced-motion: no-preference) {
+    transition: ${(props) => props.theme.transitions.backgroundColor};
   }
 `;
-const SwitchButton = styledComponents.styled.button`
-  background: transparent;
-  padding: 0;
-  border: none;
+const SwitchThumb = styledComponents.styled(Switch__namespace.Thumb)`
+  display: block;
+  height: 1.6rem;
+  width: 1.6rem;
+  border-radius: 50%;
+  background-color: ${({ theme }) => theme.colors.neutral0};
+  transform: translateX(4px);
 
-  &[aria-checked='true'] ${SwitchContent} {
-    background: ${({ theme }) => theme.colors.success500};
+  &[data-state='checked'] {
+    transform: translateX(20px);
   }
 
-  &[aria-checked='true'] ${SwitchContent}:before {
-    transform: translateX(1rem);
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform ${(props) => props.theme.motion.timings["120"]}
+      ${(props) => props.theme.motion.easings.authenticMotion};
+  }
+`;
+const LabelTypography = styledComponents.styled(Typography)`
+  color: ${(props) => props.theme.colors.danger600};
+
+  &[data-state='checked'] {
+    color: ${(props) => props.theme.colors.success600};
+  }
+
+  &[data-disabled='true'] {
+    color: ${({ theme }) => theme.colors.neutral500};
   }
 `;
 const [TabsProvider, useTabs] = createContext("Tabs");
@@ -12673,7 +12757,7 @@ exports.SubNavLink = SubNavLink;
 exports.SubNavLinkSection = SubNavLinkSection;
 exports.SubNavSection = SubNavSection;
 exports.SubNavSections = SubNavSections;
-exports.Switch = Switch;
+exports.Switch = SwitchImpl;
 exports.TFooter = TFooter;
 exports.Table = Table;
 exports.Tabs = Tabs;