@easypost/easy-ui 1.0.0-alpha.12 → 1.0.0-alpha.121

package/Textarea/index.js

@@ -28,23 +28,13 @@ var __objRest = (source, exclude) => {
   return target;
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const InputField_index = require("../InputField/index.js");
-require("../utilities/css.js");
-require("../__chunks__/InputIcon-d7449227.js");
-require("../Text/index.js");
-require("../Icon/index.js");
-require("../__chunks__/index-fd91868d.js");
-require("../__chunks__/import-109dab60.js");
-require("../__chunks__/omit-fca26542.js");
-require("../__chunks__/import-313d3d73.js");
-require("../__chunks__/import-db7a850c.js");
+const jsxRuntime = require("react/jsx-runtime");
+const InputField = require("../__chunks__/InputField-DGb4ZDoR.js");
 function Textarea(props) {
-  const _a = props, { size = "md", isLabelVisuallyHidden = false, isDisabled = false, isRequired = false, validationState = "valid", isLabelEmphasized = false, autoFocus = false, rows = 1 } = _a, restProps = __objRest(_a, ["size", "isLabelVisuallyHidden", "isDisabled", "isRequired", "validationState", "isLabelEmphasized", "autoFocus", "rows"]);
-  return React.createElement(InputField_index.InputField, __spreadValues({
+  const _a = props, { size = "md", isDisabled = false, isRequired = false, validationState = "valid", isLabelEmphasized = false, autoFocus = false, rows = 1 } = _a, restProps = __objRest(_a, ["size", "isDisabled", "isRequired", "validationState", "isLabelEmphasized", "autoFocus", "rows"]);
+  return jsxRuntime.jsx(InputField.InputField, __spreadValues({
     isMultiline: true,
     size,
-    isLabelVisuallyHidden,
     isDisabled,
     isRequired,
     validationState,

package/Textarea/index.mjs

@@ -26,23 +26,13 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React__default from "react";
-import { InputField } from "../InputField/index.mjs";
-import "../utilities/css.mjs";
-import "../__chunks__/InputIcon-42b83782.mjs";
-import "../Text/index.mjs";
-import "../Icon/index.mjs";
-import "../__chunks__/index-307aca2b.mjs";
-import "../__chunks__/import-1f82f104.mjs";
-import "../__chunks__/omit-f17deb8f.mjs";
-import "../__chunks__/import-3306af6d.mjs";
-import "../__chunks__/import-ac0be4fd.mjs";
+import { jsx } from "react/jsx-runtime";
+import { I as InputField } from "../__chunks__/InputField-CAY9O90X.mjs";
 function Textarea(props) {
-  const _a = props, { size = "md", isLabelVisuallyHidden = false, isDisabled = false, isRequired = false, validationState = "valid", isLabelEmphasized = false, autoFocus = false, rows = 1 } = _a, restProps = __objRest(_a, ["size", "isLabelVisuallyHidden", "isDisabled", "isRequired", "validationState", "isLabelEmphasized", "autoFocus", "rows"]);
-  return React__default.createElement(InputField, __spreadValues({
+  const _a = props, { size = "md", isDisabled = false, isRequired = false, validationState = "valid", isLabelEmphasized = false, autoFocus = false, rows = 1 } = _a, restProps = __objRest(_a, ["size", "isDisabled", "isRequired", "validationState", "isLabelEmphasized", "autoFocus", "rows"]);
+  return jsx(InputField, __spreadValues({
     isMultiline: true,
     size,
-    isLabelVisuallyHidden,
     isDisabled,
     isRequired,
     validationState,

package/Theme/Theme.d.ts

@@ -9,7 +9,8 @@ export type ThemeableColorScheme = Extract<ColorScheme, "light" | "dark">;
 export type ThemePreferences = {
     colorScheme: ThemeableColorScheme;
 };
-export type ThemeCreator = (preferences: ThemePreferences) => Theme;
+export type ThemeOverride = Partial<Theme>;
+export type ThemeCreator = (preferences: ThemePreferences) => ThemeOverride;
 export type ThemeProviderProps = {
     /** Component tree to apply specified theme. */
     children: ReactNode;

package/Theme/Theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,SAAS,EAIV,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAGlD,MAAM,MAAM,KAAK,GAAG;KACjB,GAAG,IAAI,iBAAiB,GAAG,MAAM;CACnC,CAAC;AACF,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnE,eAAO,MAAM,YAAY,cAEvB,CAAC;AASH,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAC1E,MAAM,MAAM,gBAAgB,GAAG;IAAE,WAAW,EAAE,oBAAoB,CAAA;CAAE,CAAC;AACrE,MAAM,MAAM,YAAY,GAAG,CAAC,WAAW,EAAE,gBAAgB,KAAK,KAAK,CAAC;AAEpE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB,CAAC;AA4BF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,WAAW,EAAE,mBAAmB,EAChC,KAAK,EAAE,aAAa,GACrB,EAAE,kBAAkB,qBAgCpB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,YAAY,EAAE,YAAY,gBAErD;AAqHD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,YAEnD"}
+{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,SAAS,EAIV,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAGlD,MAAM,MAAM,KAAK,GAAG;KACjB,GAAG,IAAI,iBAAiB,GAAG,MAAM;CACnC,CAAC;AACF,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnE,eAAO,MAAM,YAAY,cAEvB,CAAC;AASH,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAC1E,MAAM,MAAM,gBAAgB,GAAG;IAAE,WAAW,EAAE,oBAAoB,CAAA;CAAE,CAAC;AACrE,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,MAAM,YAAY,GAAG,CAAC,WAAW,EAAE,gBAAgB,KAAK,aAAa,CAAC;AAE5E,MAAM,MAAM,kBAAkB,GAAG;IAC/B,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB,CAAC;AA4BF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,WAAW,EAAE,mBAAmB,EAChC,KAAK,EAAE,aAAa,GACrB,EAAE,kBAAkB,qBAgCpB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,YAAY,EAAE,YAAY,gBAErD;AAqHD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,MAAM,YAEnD"}

package/Theme/Theme.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { ThemeProvider } from ".";
+type Story = StoryObj<typeof ThemeProvider>;
+declare const meta: Meta<typeof ThemeProvider>;
+export default meta;
+export declare const Default: Story;
+export declare const DarkOrLightMode: Story;
+//# sourceMappingURL=Theme.stories.d.ts.map

package/Theme/Theme.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.stories.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAGlC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAE5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAGpC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAO7B,CAAC"}

package/Theme/index.js

@@ -1,147 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const tokens = require("../__chunks__/tokens-645c903d.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;
+const Theme = require("../__chunks__/Theme-C2nSZUpG.js");
+exports.ThemeProvider = Theme.ThemeProvider;
+exports.createTheme = Theme.createTheme;
+exports.defaultTheme = Theme.defaultTheme;
+exports.getThemeTokenAliases = Theme.getThemeTokenAliases;

package/Theme/index.mjs

@@ -1,147 +1,7 @@
-import React__default, { createContext, useContext, useState, useMemo } from "react";
-import { e as ezuiTokens } from "../__chunks__/tokens-57cf84c2.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);
-}
+import { T, c, d, g } from "../__chunks__/Theme-M__gFMM3.mjs";
 export {
-  ThemeProvider,
-  createTheme,
-  defaultTheme,
-  getThemeTokenAliases
+  T as ThemeProvider,
+  c as createTheme,
+  d as defaultTheme,
+  g as getThemeTokenAliases
 };

package/Toggle/Switch.d.ts

@@ -1,5 +1,9 @@
 import React from "react";
 export type SwitchProps = {
+    /**
+     * The color variant for the background of the switch when enabled
+     */
+    variant: "primary" | "success" | "danger";
     /**
      * Whether the switch should be disabled.
      */

package/Toggle/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Toggle/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBA+BxC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Toggle/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAE1C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBAgCxC"}

package/Toggle/Toggle.d.ts

@@ -33,6 +33,10 @@ export type ToggleProps = AriaLabelingProps & {
      * The value of the toggle, used when submitting an HTML form.
      */
     value?: string;
+    /**
+     * The color variant for the background of the switch when enabled
+     */
+    variant?: "primary" | "success" | "danger";
 };
 /**
  * An interactive binary control.
@@ -68,5 +72,42 @@ export type ToggleProps = AriaLabelingProps & {
  * <Toggle isDisabled>Toggle item</Toggle>
  * ```
  */
-export declare function Toggle(props: ToggleProps): React.JSX.Element;
+export declare const Toggle: React.ForwardRefExoticComponent<AriaLabelingProps & {
+    /**
+     * The label for the toggle.
+     */
+    children?: ReactNode;
+    /**
+     * Whether the toggle should be selected (uncontrolled).
+     */
+    defaultSelected?: boolean;
+    /**
+     * Disables the toggle.
+     */
+    isDisabled?: boolean;
+    /**
+     * Marks the toggle as immutable.
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the toggle should be selected (controlled).
+     */
+    isSelected?: boolean;
+    /**
+     * The name of the toggle, used when submitting an HTML form.
+     */
+    name?: string;
+    /**
+     * Handler that is called when the toggle's selection state changes.
+     */
+    onChange?: (isSelected: boolean) => void;
+    /**
+     * The value of the toggle, used when submitting an HTML form.
+     */
+    value?: string;
+    /**
+     * The color variant for the background of the switch when enabled
+     */
+    variant?: "primary" | "success" | "danger";
+} & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Toggle.d.ts.map

package/Toggle/Toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASzC,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBAqCxC"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAUrD,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;CAC5C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,MAAM;IAhFjB;;OAEG;eACQ,SAAS;IAEpB;;OAEG;sBACe,OAAO;IAEzB;;OAEG;iBACU,OAAO;IAEpB;;OAEG;iBACU,OAAO;IAEpB;;OAEG;iBACU,OAAO;IAEpB;;OAEG;WACI,MAAM;IAEb;;OAEG;eACQ,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI;IAExC;;OAEG;YACK,MAAM;IAEd;;OAEG;cACO,SAAS,GAAG,SAAS,GAAG,QAAQ;0CA6F3C,CAAC"}

package/Toggle/Toggle.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import { Toggle } from "./Toggle";
 type Story = StoryObj<typeof Toggle>;
 declare const meta: Meta<typeof Toggle>;
@@ -7,4 +7,5 @@ export declare const Default: Story;
 export declare const Selected: Story;
 export declare const Disabled: Story;
 export declare const Standalone: Story;
+export declare const Variants: Story;
 //# sourceMappingURL=Toggle.stories.d.ts.map

package/Toggle/Toggle.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../src/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAE/C,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAIrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAkB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC"}
+{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../src/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAIvD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAE/C,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAIrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAwB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAC"}

package/Toggle/index.js

@@ -1,119 +1,4 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const Text_index = require("../Text/index.js");
-const utilities_css = require("../utilities/css.js");
-const _import = require("../__chunks__/import-5b668da0.js");
-const _import$1 = require("../__chunks__/import-313d3d73.js");
-const _import$2 = require("../__chunks__/import-109dab60.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 {
-    inputProps: __spreadProps(__spreadValues({}, inputProps), {
-      role: "switch",
-      checked: isSelected
-    }),
-    isSelected,
-    isPressed,
-    isDisabled,
-    isReadOnly
-  };
-}
-const Switch$1 = "_Switch_1dkwb_5";
-const focusVisible = "_focusVisible_1dkwb_13";
-const track = "_track_1dkwb_25";
-const thumb = "_thumb_1dkwb_29";
-const hovered = "_hovered_1dkwb_33";
-const disabled = "_disabled_1dkwb_33";
-const selected = "_selected_1dkwb_37";
-const styles$1 = {
-  Switch: Switch$1,
-  focusVisible,
-  track,
-  thumb,
-  hovered,
-  disabled,
-  selected
-};
-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 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_mzar2_5";
-const text = "_text_mzar2_25";
-const input = "_input_mzar2_26";
-const styles = {
-  Toggle: Toggle$1,
-  text,
-  input
-};
-function Toggle(props) {
-  const { children, isDisabled } = props;
-  const ref = React.useRef(null);
-  const state = _import.$3017fa7ffdddec74$export$8042c6c013fd5226(props);
-  const { inputProps: inputPropsFromSwitch } = $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref);
-  const { isFocusVisible, focusProps } = _import$1.$f7dceffc5ad7768b$export$4e328f61c538687f();
-  const { isHovered, hoverProps } = _import$1.$6179b936705e76d3$export$ae780daf29e6d456(props);
-  const isSelected = state.isSelected;
-  const className = utilities_css.classNames(styles.Toggle, !children && styles.standalone);
-  const textColor = isDisabled ? "disabled" : "primary";
-  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 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;
+const Toggle = require("../__chunks__/Toggle-BmJjrdVn.js");
+exports.Toggle = Toggle.Toggle;