@easypost/easy-ui 1.0.0-alpha.4 → 1.0.0-alpha.6

package/Textarea/index.mjs

@@ -1,50 +1,33 @@
 import React__default from "react";
-import { I as InputField } from "../__chunks__/InputField-a272f602.mjs";
+import { InputField } from "../InputField/index.mjs";
 import "../utilities/css.mjs";
-import "../__chunks__/Text-4ae50d5c.mjs";
-import "../__chunks__/Icon-a75b5201.mjs";
-import "../__chunks__/UnstyledButton-883f0c6c.mjs";
-import "../__chunks__/import-b7971a11.mjs";
+import "../__chunks__/InputIcon-2317befd.mjs";
+import "../Text/index.mjs";
+import "../Icon/index.mjs";
+import "../__chunks__/index-29d7bca9.mjs";
+import "../__chunks__/import-19bc38ac.mjs";
 import "../__chunks__/omit-f17deb8f.mjs";
-import "../__chunks__/import-ab878fb6.mjs";
-import "../__chunks__/import-baa3cd0c.mjs";
+import "../__chunks__/import-3d962a94.mjs";
+import "../__chunks__/import-29af6941.mjs";
 function Textarea(props) {
-  const {
-    size = "md",
-    isLabelVisuallyHidden = false,
-    isDisabled = false,
-    isRequired = false,
-    validationState = "valid",
-    isLabelEmphasized = false,
-    autoFocus = false,
+  const { size = "md", isLabelVisuallyHidden = false, isDisabled = false, isRequired = false, validationState = "valid", isLabelEmphasized = false, autoFocus = false, label, errorText, helperText, placeholder, value, defaultValue, rows = 1 } = props;
+  return React__default.createElement(InputField, {
+    isMultiline: true,
+    size,
+    isLabelVisuallyHidden,
+    isDisabled,
+    isRequired,
+    validationState,
+    isLabelEmphasized,
+    autoFocus,
     label,
     errorText,
     helperText,
     placeholder,
     value,
     defaultValue,
-    rows = 1
-  } = props;
-  return /* @__PURE__ */ React__default.createElement(
-    InputField,
-    {
-      isMultiline: true,
-      size,
-      isLabelVisuallyHidden,
-      isDisabled,
-      isRequired,
-      validationState,
-      isLabelEmphasized,
-      autoFocus,
-      label,
-      errorText,
-      helperText,
-      placeholder,
-      value,
-      defaultValue,
-      rows
-    }
-  );
+    rows
+  });
 }
 export {
   Textarea

package/Theme/index.js

@@ -1,11 +1,147 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Theme = require("../__chunks__/Theme-751e5575.js");
-require("react");
-require("../__chunks__/tokens-e696ca96.js");
-require("../utilities/tokens.js");
-require("../utilities/css.js");
-exports.ThemeProvider = Theme.ThemeProvider;
-exports.createTheme = Theme.createTheme;
-exports.defaultTheme = Theme.defaultTheme;
-exports.getThemeTokenAliases = Theme.getThemeTokenAliases;
+const React = require("react");
+const tokens = require("../__chunks__/tokens-e696ca96.js");
+const utilities_tokens = require("../utilities/tokens.js");
+const utilities_css = require("../utilities/css.js");
+const defaultTheme = createTheme(() => {
+  return getThemeFromTokens("theme.base");
+});
+const invertedColorSchemes = {
+  light: "dark",
+  dark: "light",
+  system: "inverted",
+  inverted: "system"
+};
+function NoopComponent(props) {
+  return React.createElement(React.Fragment, null, props.children);
+}
+const TrackerContext = React.createContext(0);
+const ThemeContext = React.createContext(null);
+const ColorSchemeContext = React.createContext(null);
+function ThemeProvider({ children, colorScheme: colorSchemeFromUser, theme: themeFromUser }) {
+  const parentTheme = React.useContext(ThemeContext);
+  const isRoot = !parentTheme;
+  if (!isRoot && !themeFromUser && !colorSchemeFromUser) {
+    throw new Error("Must supply theme or colorScheme to ThemeProvider");
+  }
+  const parentContext = React.useContext(TrackerContext);
+  const [count] = React.useState(() => parentContext + 1);
+  const ThemeContextComponent = isRoot || themeFromUser ? ThemeContextProvider : NoopComponent;
+  const ColorSchemeContextComponent = isRoot || colorSchemeFromUser ? ColorSchemeContextProvider : NoopComponent;
+  const theme = themeFromUser ? themeFromUser : defaultTheme;
+  const colorScheme = colorSchemeFromUser ? colorSchemeFromUser : "system";
+  return React.createElement(TrackerContext.Provider, {
+    value: count
+  }, React.createElement(ThemeContextComponent, {
+    theme
+  }, React.createElement(ColorSchemeContextComponent, {
+    colorScheme
+  }, React.createElement(React.Fragment, null, React.createElement(Style, {
+    isRoot
+  }), children))));
+}
+function createTheme(themeCreator) {
+  return themeCreator;
+}
+function useTheme() {
+  const themeContext = React.useContext(ThemeContext);
+  if (!themeContext) {
+    throw new Error("useTheme() must be used within a ThemeProvier");
+  }
+  return themeContext;
+}
+function useColorScheme() {
+  const colorSchemeContext = React.useContext(ColorSchemeContext);
+  if (!colorSchemeContext) {
+    throw new Error("useColorScheme() must be used within a ThemeProvider");
+  }
+  return colorSchemeContext;
+}
+function Style({ isRoot }) {
+  const parentContext = React.useContext(TrackerContext);
+  const themeCreator = useTheme();
+  const { resolvedColorScheme } = useColorScheme();
+  const fingerprint = React.useMemo(() => {
+    return `ezui-theme-style-level-${parentContext}`;
+  }, [parentContext]);
+  const selector = isRoot ? ":root" : `#${fingerprint} ~ *`;
+  const css = React.useMemo(() => {
+    return resolvedColorScheme === "system" ? `${selector} {
+        ${renderThemeVariables(themeCreator({
+      colorScheme: "light"
+    }))}
+      }
+      @media (prefers-color-scheme: dark) {
+        ${selector} {
+          ${renderThemeVariables(themeCreator({
+      colorScheme: "dark"
+    }))}
+        }
+      }` : resolvedColorScheme === "inverted" ? `${selector} {
+        ${renderThemeVariables(themeCreator({
+      colorScheme: "dark"
+    }))}
+      }
+      @media (prefers-color-scheme: dark) {
+        ${selector} {
+          ${renderThemeVariables(themeCreator({
+      colorScheme: "light"
+    }))}
+        }
+      }` : `${selector} {
+        ${renderThemeVariables(themeCreator({
+      colorScheme: resolvedColorScheme
+    }))}
+      }`;
+  }, [resolvedColorScheme, selector, themeCreator]);
+  return React.createElement("style", {
+    id: fingerprint,
+    dangerouslySetInnerHTML: {
+      __html: css
+    }
+  });
+}
+function ThemeContextProvider({ theme, children }) {
+  return React.createElement(ThemeContext.Provider, {
+    value: theme
+  }, children);
+}
+function ColorSchemeContextProvider({ colorScheme, children }) {
+  const parentColorSchemeContext = React.useContext(ColorSchemeContext);
+  const colorSchemeContextValue = React.useMemo(() => {
+    const resolvedColorScheme = colorScheme === "inverted" && parentColorSchemeContext ? invertedColorSchemes[parentColorSchemeContext.resolvedColorScheme] : colorScheme;
+    return {
+      userColorScheme: colorScheme,
+      resolvedColorScheme
+    };
+  }, [colorScheme, parentColorSchemeContext]);
+  return React.createElement(ColorSchemeContext.Provider, {
+    value: colorSchemeContextValue
+  }, children);
+}
+function getThemeInstanceVariables(theme) {
+  return Object.fromEntries(Object.entries(theme).map(([key, value]) => {
+    const property = utilities_css.tokenSafeKebabCase(key);
+    return [`--ezui-t-${property}`, value];
+  }));
+}
+function renderThemeVariables(theme) {
+  const variables = getThemeInstanceVariables(theme);
+  const css = Object.entries(variables).map((entry) => entry.join(": ") + ";").join("\n");
+  return css;
+}
+function getThemeFromTokens(prefix) {
+  const theme = Object.fromEntries(Object.keys(tokens.ezuiTokens).filter((key) => key.startsWith(`${prefix}.`)).map((key) => key.replace(new RegExp(`^${prefix}.`), "")).map((key) => {
+    const value = `var(--ezui-${utilities_css.tokenSafeKebabCase(prefix)}-${utilities_css.tokenSafeKebabCase(key)})`;
+    return [key, value];
+  }));
+  return theme;
+}
+function getThemeTokenAliases(pattern) {
+  return utilities_tokens.getTokenAliases(getThemeFromTokens("theme.base"), pattern);
+}
+exports.ThemeProvider = ThemeProvider;
+exports.createTheme = createTheme;
+exports.defaultTheme = defaultTheme;
+exports.getThemeTokenAliases = getThemeTokenAliases;

package/Theme/index.mjs

@@ -1,11 +1,147 @@
-import { T, c, d, g } from "../__chunks__/Theme-4e498252.mjs";
-import "react";
-import "../__chunks__/tokens-6be8e137.mjs";
-import "../utilities/tokens.mjs";
-import "../utilities/css.mjs";
+import React__default, { createContext, useContext, useState, useMemo } from "react";
+import { e as ezuiTokens } from "../__chunks__/tokens-6be8e137.mjs";
+import { getTokenAliases } from "../utilities/tokens.mjs";
+import { tokenSafeKebabCase } from "../utilities/css.mjs";
+const defaultTheme = createTheme(() => {
+  return getThemeFromTokens("theme.base");
+});
+const invertedColorSchemes = {
+  light: "dark",
+  dark: "light",
+  system: "inverted",
+  inverted: "system"
+};
+function NoopComponent(props) {
+  return React__default.createElement(React__default.Fragment, null, props.children);
+}
+const TrackerContext = createContext(0);
+const ThemeContext = createContext(null);
+const ColorSchemeContext = createContext(null);
+function ThemeProvider({ children, colorScheme: colorSchemeFromUser, theme: themeFromUser }) {
+  const parentTheme = useContext(ThemeContext);
+  const isRoot = !parentTheme;
+  if (!isRoot && !themeFromUser && !colorSchemeFromUser) {
+    throw new Error("Must supply theme or colorScheme to ThemeProvider");
+  }
+  const parentContext = useContext(TrackerContext);
+  const [count] = useState(() => parentContext + 1);
+  const ThemeContextComponent = isRoot || themeFromUser ? ThemeContextProvider : NoopComponent;
+  const ColorSchemeContextComponent = isRoot || colorSchemeFromUser ? ColorSchemeContextProvider : NoopComponent;
+  const theme = themeFromUser ? themeFromUser : defaultTheme;
+  const colorScheme = colorSchemeFromUser ? colorSchemeFromUser : "system";
+  return React__default.createElement(TrackerContext.Provider, {
+    value: count
+  }, React__default.createElement(ThemeContextComponent, {
+    theme
+  }, React__default.createElement(ColorSchemeContextComponent, {
+    colorScheme
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Style, {
+    isRoot
+  }), children))));
+}
+function createTheme(themeCreator) {
+  return themeCreator;
+}
+function useTheme() {
+  const themeContext = useContext(ThemeContext);
+  if (!themeContext) {
+    throw new Error("useTheme() must be used within a ThemeProvier");
+  }
+  return themeContext;
+}
+function useColorScheme() {
+  const colorSchemeContext = useContext(ColorSchemeContext);
+  if (!colorSchemeContext) {
+    throw new Error("useColorScheme() must be used within a ThemeProvider");
+  }
+  return colorSchemeContext;
+}
+function Style({ isRoot }) {
+  const parentContext = useContext(TrackerContext);
+  const themeCreator = useTheme();
+  const { resolvedColorScheme } = useColorScheme();
+  const fingerprint = useMemo(() => {
+    return `ezui-theme-style-level-${parentContext}`;
+  }, [parentContext]);
+  const selector = isRoot ? ":root" : `#${fingerprint} ~ *`;
+  const css = useMemo(() => {
+    return resolvedColorScheme === "system" ? `${selector} {
+        ${renderThemeVariables(themeCreator({
+      colorScheme: "light"
+    }))}
+      }
+      @media (prefers-color-scheme: dark) {
+        ${selector} {
+          ${renderThemeVariables(themeCreator({
+      colorScheme: "dark"
+    }))}
+        }
+      }` : resolvedColorScheme === "inverted" ? `${selector} {
+        ${renderThemeVariables(themeCreator({
+      colorScheme: "dark"
+    }))}
+      }
+      @media (prefers-color-scheme: dark) {
+        ${selector} {
+          ${renderThemeVariables(themeCreator({
+      colorScheme: "light"
+    }))}
+        }
+      }` : `${selector} {
+        ${renderThemeVariables(themeCreator({
+      colorScheme: resolvedColorScheme
+    }))}
+      }`;
+  }, [resolvedColorScheme, selector, themeCreator]);
+  return React__default.createElement("style", {
+    id: fingerprint,
+    dangerouslySetInnerHTML: {
+      __html: css
+    }
+  });
+}
+function ThemeContextProvider({ theme, children }) {
+  return React__default.createElement(ThemeContext.Provider, {
+    value: theme
+  }, children);
+}
+function ColorSchemeContextProvider({ colorScheme, children }) {
+  const parentColorSchemeContext = useContext(ColorSchemeContext);
+  const colorSchemeContextValue = useMemo(() => {
+    const resolvedColorScheme = colorScheme === "inverted" && parentColorSchemeContext ? invertedColorSchemes[parentColorSchemeContext.resolvedColorScheme] : colorScheme;
+    return {
+      userColorScheme: colorScheme,
+      resolvedColorScheme
+    };
+  }, [colorScheme, parentColorSchemeContext]);
+  return React__default.createElement(ColorSchemeContext.Provider, {
+    value: colorSchemeContextValue
+  }, children);
+}
+function getThemeInstanceVariables(theme) {
+  return Object.fromEntries(Object.entries(theme).map(([key, value]) => {
+    const property = tokenSafeKebabCase(key);
+    return [`--ezui-t-${property}`, value];
+  }));
+}
+function renderThemeVariables(theme) {
+  const variables = getThemeInstanceVariables(theme);
+  const css = Object.entries(variables).map((entry) => entry.join(": ") + ";").join("\n");
+  return css;
+}
+function getThemeFromTokens(prefix) {
+  const theme = Object.fromEntries(Object.keys(ezuiTokens).filter((key) => key.startsWith(`${prefix}.`)).map((key) => key.replace(new RegExp(`^${prefix}.`), "")).map((key) => {
+    const value = `var(--ezui-${tokenSafeKebabCase(prefix)}-${tokenSafeKebabCase(key)})`;
+    return [key, value];
+  }));
+  return theme;
+}
+function getThemeTokenAliases(pattern) {
+  return getTokenAliases(getThemeFromTokens("theme.base"), pattern);
+}
 export {
-  T as ThemeProvider,
-  c as createTheme,
-  d as defaultTheme,
-  g as getThemeTokenAliases
+  ThemeProvider,
+  createTheme,
+  defaultTheme,
+  getThemeTokenAliases
 };

package/Toggle/index.js

@@ -20,12 +20,12 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Text = require("../__chunks__/Text-1ae70c19.js");
+const Text_index = require("../Text/index.js");
 const utilities_css = require("../utilities/css.js");
-const _import = require("../__chunks__/import-7545401a.js");
-const _import$1 = require("../__chunks__/import-0d1b4d93.js");
-const _import$2 = require("../__chunks__/import-63bf0645.js");
-require("../__chunks__/import-76076ca6.js");
+const _import = require("../__chunks__/import-8b6c0bc7.js");
+const _import$1 = require("../__chunks__/import-2b302763.js");
+const _import$2 = require("../__chunks__/import-a1e0f814.js");
+require("../__chunks__/import-dea5a24d.js");
 function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
   let { inputProps, isSelected, isPressed, isDisabled, isReadOnly } = _import.$d2c8e2b0480f3f34$export$cbe85ee05b554577(props, state, ref);
   return {
@@ -39,13 +39,13 @@ function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
     isReadOnly
   };
 }
-const Switch$1 = "_Switch_vicyu_5";
-const focusVisible = "_focusVisible_vicyu_13";
-const track = "_track_vicyu_25";
-const thumb = "_thumb_vicyu_29";
-const hovered = "_hovered_vicyu_33";
-const disabled = "_disabled_vicyu_33";
-const selected = "_selected_vicyu_37";
+const Switch$1 = "_Switch_1au2a_5";
+const focusVisible = "_focusVisible_1au2a_13";
+const track = "_track_1au2a_25";
+const thumb = "_thumb_1au2a_29";
+const hovered = "_hovered_1au2a_33";
+const disabled = "_disabled_1au2a_33";
+const selected = "_selected_1au2a_37";
 const styles$1 = {
   Switch: Switch$1,
   focusVisible,
@@ -57,36 +57,30 @@ const styles$1 = {
 };
 function Switch(props) {
   const { isDisabled, isFocusVisible, isHovered, isSelected } = props;
-  const className = utilities_css.classNames(
-    styles$1.Switch,
-    isDisabled && styles$1.disabled,
-    isFocusVisible && styles$1.focusVisible,
-    isHovered && styles$1.hovered,
-    isSelected && styles$1.selected
-  );
-  return /* @__PURE__ */ React.createElement("span", { className }, /* @__PURE__ */ React.createElement("svg", { width: 32, height: 16, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement(
-    "rect",
-    {
-      className: styles$1.track,
-      x: 0,
-      y: 0,
-      width: 32,
-      height: 16,
-      rx: 8
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "circle",
-    {
-      className: styles$1.thumb,
-      cx: isSelected ? 32 - 8 : 8,
-      cy: 8,
-      r: 6
-    }
-  )));
+  const className = utilities_css.classNames(styles$1.Switch, isDisabled && styles$1.disabled, isFocusVisible && styles$1.focusVisible, isHovered && styles$1.hovered, isSelected && styles$1.selected);
+  return React.createElement("span", {
+    className
+  }, React.createElement("svg", {
+    width: 32,
+    height: 16,
+    "aria-hidden": "true"
+  }, React.createElement("rect", {
+    className: styles$1.track,
+    x: 0,
+    y: 0,
+    width: 32,
+    height: 16,
+    rx: 8
+  }), React.createElement("circle", {
+    className: styles$1.thumb,
+    cx: isSelected ? 32 - 8 : 8,
+    cy: 8,
+    r: 6
+  })));
 }
-const Toggle$1 = "_Toggle_1mouc_5";
-const text = "_text_1mouc_24";
-const input = "_input_1mouc_25";
+const Toggle$1 = "_Toggle_sl5qh_5";
+const text = "_text_sl5qh_24";
+const input = "_input_sl5qh_25";
 const styles = {
   Toggle: Toggle$1,
   text,
@@ -105,14 +99,21 @@ function Toggle(props) {
   const RootComponent = children ? "label" : "span";
   const rootProps = children ? hoverProps : {};
   const inputProps = children ? _import$2.$3ef42575df84b30b$export$9d1611c77c2fe928(inputPropsFromSwitch, focusProps) : _import$2.$3ef42575df84b30b$export$9d1611c77c2fe928(inputPropsFromSwitch, focusProps, hoverProps);
-  return /* @__PURE__ */ React.createElement(RootComponent, __spreadProps(__spreadValues({}, rootProps), { className }), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, inputProps), { className: styles.input, ref })), /* @__PURE__ */ React.createElement(
-    Switch,
-    {
-      isDisabled,
-      isFocusVisible,
-      isHovered,
-      isSelected
-    }
-  ), children && /* @__PURE__ */ React.createElement("span", { className: styles.text }, /* @__PURE__ */ React.createElement(Text.Text, { variant: "body1", color: textColor }, children)));
+  return React.createElement(RootComponent, __spreadProps(__spreadValues({}, rootProps), {
+    className
+  }), React.createElement("input", __spreadProps(__spreadValues({}, inputProps), {
+    className: styles.input,
+    ref
+  })), React.createElement(Switch, {
+    isDisabled,
+    isFocusVisible,
+    isHovered,
+    isSelected
+  }), children && React.createElement("span", {
+    className: styles.text
+  }, React.createElement(Text_index.Text, {
+    variant: "body1",
+    color: textColor
+  }, children)));
 }
 exports.Toggle = Toggle;

package/Toggle/index.mjs

@@ -18,12 +18,12 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import React__default from "react";
-import { T as Text } from "../__chunks__/Text-4ae50d5c.mjs";
+import { Text } from "../Text/index.mjs";
 import { classNames } from "../utilities/css.mjs";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577, a as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../__chunks__/import-e7f45c7e.mjs";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f, a as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/import-ab878fb6.mjs";
-import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/import-b7971a11.mjs";
-import "../__chunks__/import-86330a7c.mjs";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577, a as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../__chunks__/import-0561e1ba.mjs";
+import { e as $f7dceffc5ad7768b$export$4e328f61c538687f, f as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/import-3d962a94.mjs";
+import { a as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/import-19bc38ac.mjs";
+import "../__chunks__/import-6a831ca1.mjs";
 function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
   let { inputProps, isSelected, isPressed, isDisabled, isReadOnly } = $d2c8e2b0480f3f34$export$cbe85ee05b554577(props, state, ref);
   return {
@@ -37,13 +37,13 @@ function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
     isReadOnly
   };
 }
-const Switch$1 = "_Switch_vicyu_5";
-const focusVisible = "_focusVisible_vicyu_13";
-const track = "_track_vicyu_25";
-const thumb = "_thumb_vicyu_29";
-const hovered = "_hovered_vicyu_33";
-const disabled = "_disabled_vicyu_33";
-const selected = "_selected_vicyu_37";
+const Switch$1 = "_Switch_1au2a_5";
+const focusVisible = "_focusVisible_1au2a_13";
+const track = "_track_1au2a_25";
+const thumb = "_thumb_1au2a_29";
+const hovered = "_hovered_1au2a_33";
+const disabled = "_disabled_1au2a_33";
+const selected = "_selected_1au2a_37";
 const styles$1 = {
   Switch: Switch$1,
   focusVisible,
@@ -55,36 +55,30 @@ const styles$1 = {
 };
 function Switch(props) {
   const { isDisabled, isFocusVisible, isHovered, isSelected } = props;
-  const className = classNames(
-    styles$1.Switch,
-    isDisabled && styles$1.disabled,
-    isFocusVisible && styles$1.focusVisible,
-    isHovered && styles$1.hovered,
-    isSelected && styles$1.selected
-  );
-  return /* @__PURE__ */ React__default.createElement("span", { className }, /* @__PURE__ */ React__default.createElement("svg", { width: 32, height: 16, "aria-hidden": "true" }, /* @__PURE__ */ React__default.createElement(
-    "rect",
-    {
-      className: styles$1.track,
-      x: 0,
-      y: 0,
-      width: 32,
-      height: 16,
-      rx: 8
-    }
-  ), /* @__PURE__ */ React__default.createElement(
-    "circle",
-    {
-      className: styles$1.thumb,
-      cx: isSelected ? 32 - 8 : 8,
-      cy: 8,
-      r: 6
-    }
-  )));
+  const className = classNames(styles$1.Switch, isDisabled && styles$1.disabled, isFocusVisible && styles$1.focusVisible, isHovered && styles$1.hovered, isSelected && styles$1.selected);
+  return React__default.createElement("span", {
+    className
+  }, React__default.createElement("svg", {
+    width: 32,
+    height: 16,
+    "aria-hidden": "true"
+  }, React__default.createElement("rect", {
+    className: styles$1.track,
+    x: 0,
+    y: 0,
+    width: 32,
+    height: 16,
+    rx: 8
+  }), React__default.createElement("circle", {
+    className: styles$1.thumb,
+    cx: isSelected ? 32 - 8 : 8,
+    cy: 8,
+    r: 6
+  })));
 }
-const Toggle$1 = "_Toggle_1mouc_5";
-const text = "_text_1mouc_24";
-const input = "_input_1mouc_25";
+const Toggle$1 = "_Toggle_sl5qh_5";
+const text = "_text_sl5qh_24";
+const input = "_input_sl5qh_25";
 const styles = {
   Toggle: Toggle$1,
   text,
@@ -103,15 +97,22 @@ function Toggle(props) {
   const RootComponent = children ? "label" : "span";
   const rootProps = children ? hoverProps : {};
   const inputProps = children ? $3ef42575df84b30b$export$9d1611c77c2fe928(inputPropsFromSwitch, focusProps) : $3ef42575df84b30b$export$9d1611c77c2fe928(inputPropsFromSwitch, focusProps, hoverProps);
-  return /* @__PURE__ */ React__default.createElement(RootComponent, __spreadProps(__spreadValues({}, rootProps), { className }), /* @__PURE__ */ React__default.createElement("input", __spreadProps(__spreadValues({}, inputProps), { className: styles.input, ref })), /* @__PURE__ */ React__default.createElement(
-    Switch,
-    {
-      isDisabled,
-      isFocusVisible,
-      isHovered,
-      isSelected
-    }
-  ), children && /* @__PURE__ */ React__default.createElement("span", { className: styles.text }, /* @__PURE__ */ React__default.createElement(Text, { variant: "body1", color: textColor }, children)));
+  return React__default.createElement(RootComponent, __spreadProps(__spreadValues({}, rootProps), {
+    className
+  }), React__default.createElement("input", __spreadProps(__spreadValues({}, inputProps), {
+    className: styles.input,
+    ref
+  })), React__default.createElement(Switch, {
+    isDisabled,
+    isFocusVisible,
+    isHovered,
+    isSelected
+  }), children && React__default.createElement("span", {
+    className: styles.text
+  }, React__default.createElement(Text, {
+    variant: "body1",
+    color: textColor
+  }, children)));
 }
 export {
   Toggle