@easypost/easy-ui 1.0.0-alpha.100 → 1.0.0-alpha.101

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @easypost/easy-ui
 
+## 1.0.0-alpha.101
+
+### Minor Changes
+
+- cbda521: Adds `variant` prop to `Toggle` component
+
 ## 1.0.0-alpha.100
 
 ### Patch Changes

package/SplitToggleCard/index.js

@@ -32,7 +32,7 @@ const React = require("react");
 const Card = require("../__chunks__/Card-BM2DKiVA.js");
 const HorizontalGrid = require("../__chunks__/HorizontalGrid-CAwv7zKY.js");
 const HorizontalStack = require("../__chunks__/HorizontalStack-CXpjASZi.js");
-const Toggle = require("../__chunks__/Toggle-BgiXZL7t.js");
+const Toggle = require("../__chunks__/Toggle-D4oY2Hoe.js");
 const SplitToggleCard = (props) => {
   const _a = props, { children } = _a, toggleProps = __objRest(_a, ["children"]);
   return React.createElement(Card.Card.Container, null, React.createElement(HorizontalGrid.HorizontalGrid, {

package/SplitToggleCard/index.mjs

@@ -30,7 +30,7 @@ import React__default from "react";
 import { C as Card } from "../__chunks__/Card-CJug4GMX.mjs";
 import { H as HorizontalGrid } from "../__chunks__/HorizontalGrid-Dz8EFgmu.mjs";
 import { H as HorizontalStack } from "../__chunks__/HorizontalStack-CxE8tPx_.mjs";
-import { T as Toggle } from "../__chunks__/Toggle-D6xQyE8l.mjs";
+import { T as Toggle } from "../__chunks__/Toggle-Bfffyi8v.mjs";
 const SplitToggleCard = (props) => {
   const _a = props, { children } = _a, toggleProps = __objRest(_a, ["children"]);
   return React__default.createElement(Card.Container, null, React__default.createElement(HorizontalGrid, {

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.
@@ -101,5 +105,9 @@ export declare const Toggle: React.ForwardRefExoticComponent<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";
 } & 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":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AASrD,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,eAAO,MAAM,MAAM;IA3EjB;;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;0CAuFf,CAAC"}
+{"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

@@ -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,uBAAuB,CAAC;AAEvD,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,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Toggle = require("../__chunks__/Toggle-BgiXZL7t.js");
+const Toggle = require("../__chunks__/Toggle-D4oY2Hoe.js");
 exports.Toggle = Toggle.Toggle;

package/Toggle/index.mjs

@@ -1,4 +1,4 @@
-import { T } from "../__chunks__/Toggle-D6xQyE8l.mjs";
+import { T } from "../__chunks__/Toggle-Bfffyi8v.mjs";
 export {
   T as Toggle
 };

package/Toggle/utils.d.ts

@@ -0,0 +1,7 @@
+import { ToggleProps } from "./Toggle";
+export declare const getTextColorFromProps: ({ variant, isDisabled, isSelected, }: {
+    variant: NonNullable<ToggleProps["variant"]>;
+    isDisabled: boolean;
+    isSelected: boolean;
+}) => "primary.800" | "neutral.300" | "positive.700" | "negative.700";
+//# sourceMappingURL=utils.d.ts.map

package/Toggle/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/Toggle/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,eAAO,MAAM,qBAAqB,yCAI/B;IACD,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7C,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB,oEAYA,CAAC"}

package/__chunks__/{Toggle-D6xQyE8l.mjs → Toggle-Bfffyi8v.mjs}

@@ -34,7 +34,7 @@ import { $ as $5dc95899b306f630$export$c9058316764c140e } from "./mergeRefs-ClQj
 import { $ as $df56164dff5785e2$export$4338b53315abf666 } from "./useObjectRef-77h4G8qk.mjs";
 import React__default, { forwardRef } from "react";
 import { T as Text } from "./Text-YOL3isF4.mjs";
-import { classNames } from "../utilities/css.mjs";
+import { classNames, variationName } from "../utilities/css.mjs";
 import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "./useToggleState-1Mo_p5l0.mjs";
 import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "./useToggle-DOBadbRi.mjs";
 import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-I6O2iIqT.mjs";
@@ -53,13 +53,16 @@ function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
     isReadOnly
   };
 }
-const Switch$1 = "_Switch_gca6y_4";
-const focusVisible = "_focusVisible_gca6y_12";
-const track = "_track_gca6y_24";
-const thumb = "_thumb_gca6y_28";
-const hovered = "_hovered_gca6y_32";
-const disabled = "_disabled_gca6y_32";
-const selected = "_selected_gca6y_36";
+const Switch$1 = "_Switch_p9bua_4";
+const focusVisible = "_focusVisible_p9bua_12";
+const track = "_track_p9bua_24";
+const thumb = "_thumb_p9bua_28";
+const hovered = "_hovered_p9bua_32";
+const disabled = "_disabled_p9bua_32";
+const selected = "_selected_p9bua_36";
+const variantPrimary = "_variantPrimary_p9bua_45";
+const variantSuccess = "_variantSuccess_p9bua_53";
+const variantDanger = "_variantDanger_p9bua_61";
 const styles$1 = {
   Switch: Switch$1,
   focusVisible,
@@ -67,11 +70,14 @@ const styles$1 = {
   thumb,
   hovered,
   disabled,
-  selected
+  selected,
+  variantPrimary,
+  variantSuccess,
+  variantDanger
 };
 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);
+  const { isDisabled, isFocusVisible, isHovered, isSelected, variant } = props;
+  const className = classNames(styles$1.Switch, isDisabled && styles$1.disabled, styles$1[variationName("variant", variant)], isFocusVisible && styles$1.focusVisible, isHovered && styles$1.hovered, isSelected && styles$1.selected);
   return React__default.createElement("span", {
     className
   }, React__default.createElement("svg", {
@@ -100,7 +106,21 @@ const styles = {
   text,
   input
 };
+const getTextColorFromProps = ({ variant, isDisabled, isSelected }) => {
+  switch (true) {
+    case isDisabled:
+      return "neutral.300";
+    case (variant === "success" && isSelected):
+      return "positive.700";
+    case (variant === "danger" && isSelected):
+      return "negative.700";
+    case (variant === "primary" && isSelected):
+    default:
+      return "primary.800";
+  }
+};
 const Toggle = forwardRef((props, externalRef) => {
+  var _b;
   const _a = props, { children, isDisabled, defaultSelected: _defaultSelected, isReadOnly: _isReadOnly, isSelected: _isSelected, name: _name, onChange: _onChange, value: _value } = _a, restProps = __objRest(_a, ["children", "isDisabled", "defaultSelected", "isReadOnly", "isSelected", "name", "onChange", "value"]);
   const ref = React__default.useRef(null);
   const mergedRef = $df56164dff5785e2$export$4338b53315abf666($5dc95899b306f630$export$c9058316764c140e(ref, externalRef));
@@ -109,8 +129,13 @@ const Toggle = forwardRef((props, externalRef) => {
   const { isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
   const { isHovered, hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456(props);
   const isSelected = state.isSelected;
+  const variant = (_b = props.variant) != null ? _b : "primary";
   const className = classNames(styles.Toggle, !children && styles.standalone);
-  const textColor = isDisabled ? "neutral.300" : "primary.800";
+  const textColor = getTextColorFromProps({
+    variant,
+    isDisabled: !!isDisabled,
+    isSelected
+  });
   const RootComponent = children ? "label" : "span";
   const rootProps = children ? hoverProps : {};
   const inputProps = children ? $3ef42575df84b30b$export$9d1611c77c2fe928(restProps, inputPropsFromSwitch, focusProps) : $3ef42575df84b30b$export$9d1611c77c2fe928(restProps, inputPropsFromSwitch, focusProps, hoverProps);
@@ -123,7 +148,8 @@ const Toggle = forwardRef((props, externalRef) => {
     isDisabled,
     isFocusVisible,
     isHovered,
-    isSelected
+    isSelected,
+    variant
   }), children && React__default.createElement("span", {
     className: styles.text
   }, React__default.createElement(Text, {

package/__chunks__/{Toggle-BgiXZL7t.js → Toggle-D4oY2Hoe.js}

@@ -54,13 +54,16 @@ function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
     isReadOnly
   };
 }
-const Switch$1 = "_Switch_gca6y_4";
-const focusVisible = "_focusVisible_gca6y_12";
-const track = "_track_gca6y_24";
-const thumb = "_thumb_gca6y_28";
-const hovered = "_hovered_gca6y_32";
-const disabled = "_disabled_gca6y_32";
-const selected = "_selected_gca6y_36";
+const Switch$1 = "_Switch_p9bua_4";
+const focusVisible = "_focusVisible_p9bua_12";
+const track = "_track_p9bua_24";
+const thumb = "_thumb_p9bua_28";
+const hovered = "_hovered_p9bua_32";
+const disabled = "_disabled_p9bua_32";
+const selected = "_selected_p9bua_36";
+const variantPrimary = "_variantPrimary_p9bua_45";
+const variantSuccess = "_variantSuccess_p9bua_53";
+const variantDanger = "_variantDanger_p9bua_61";
 const styles$1 = {
   Switch: Switch$1,
   focusVisible,
@@ -68,11 +71,14 @@ const styles$1 = {
   thumb,
   hovered,
   disabled,
-  selected
+  selected,
+  variantPrimary,
+  variantSuccess,
+  variantDanger
 };
 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);
+  const { isDisabled, isFocusVisible, isHovered, isSelected, variant } = props;
+  const className = utilities_css.classNames(styles$1.Switch, isDisabled && styles$1.disabled, styles$1[utilities_css.variationName("variant", variant)], isFocusVisible && styles$1.focusVisible, isHovered && styles$1.hovered, isSelected && styles$1.selected);
   return React.createElement("span", {
     className
   }, React.createElement("svg", {
@@ -101,7 +107,21 @@ const styles = {
   text,
   input
 };
+const getTextColorFromProps = ({ variant, isDisabled, isSelected }) => {
+  switch (true) {
+    case isDisabled:
+      return "neutral.300";
+    case (variant === "success" && isSelected):
+      return "positive.700";
+    case (variant === "danger" && isSelected):
+      return "negative.700";
+    case (variant === "primary" && isSelected):
+    default:
+      return "primary.800";
+  }
+};
 const Toggle = React.forwardRef((props, externalRef) => {
+  var _b;
   const _a = props, { children, isDisabled, defaultSelected: _defaultSelected, isReadOnly: _isReadOnly, isSelected: _isSelected, name: _name, onChange: _onChange, value: _value } = _a, restProps = __objRest(_a, ["children", "isDisabled", "defaultSelected", "isReadOnly", "isSelected", "name", "onChange", "value"]);
   const ref = React.useRef(null);
   const mergedRef = useObjectRef.$df56164dff5785e2$export$4338b53315abf666(mergeRefs.$5dc95899b306f630$export$c9058316764c140e(ref, externalRef));
@@ -110,8 +130,13 @@ const Toggle = React.forwardRef((props, externalRef) => {
   const { isFocusVisible, focusProps } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f();
   const { isHovered, hoverProps } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
   const isSelected = state.isSelected;
+  const variant = (_b = props.variant) != null ? _b : "primary";
   const className = utilities_css.classNames(styles.Toggle, !children && styles.standalone);
-  const textColor = isDisabled ? "neutral.300" : "primary.800";
+  const textColor = getTextColorFromProps({
+    variant,
+    isDisabled: !!isDisabled,
+    isSelected
+  });
   const RootComponent = children ? "label" : "span";
   const rootProps = children ? hoverProps : {};
   const inputProps = children ? mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(restProps, inputPropsFromSwitch, focusProps) : mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(restProps, inputPropsFromSwitch, focusProps, hoverProps);
@@ -124,7 +149,8 @@ const Toggle = React.forwardRef((props, externalRef) => {
     isDisabled,
     isFocusVisible,
     isHovered,
-    isSelected
+    isSelected,
+    variant
   }), children && React.createElement("span", {
     className: styles.text
   }, React.createElement(Text.Text, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easypost/easy-ui",
-  "version": "1.0.0-alpha.100",
+  "version": "1.0.0-alpha.101",
   "sideEffects": [
     "**/*.css"
   ],

package/style.css

@@ -419,7 +419,7 @@
 }/**
  * Do not edit directly, this file was auto-generated.
  */
-._Switch_gca6y_4 {
+._Switch_p9bua_4 {
   --ezui-c-switch-color-track: var(--ezui-color-neutral-100);
   --ezui-c-switch-color-thumb: var(--ezui-color-primary-800);
   --ezui-c-switch-border-radius: 99px;
@@ -427,42 +427,61 @@
   border-radius: var(--ezui-c-switch-border-radius);
 }
 
-._focusVisible_gca6y_12 {
+._focusVisible_p9bua_12 {
   outline-width: 2px;
   outline-style: solid;
   outline-color: Highlight;
 }
 @media (-webkit-min-device-pixel-ratio: 0) {
-  ._focusVisible_gca6y_12 {
+  ._focusVisible_p9bua_12 {
     outline-color: -webkit-focus-ring-color;
     outline-style: auto;
   }
 }
 
-._track_gca6y_24 {
+._track_p9bua_24 {
   fill: var(--ezui-c-switch-color-track);
 }
 
-._thumb_gca6y_28 {
+._thumb_p9bua_28 {
   fill: var(--ezui-c-switch-color-thumb);
 }
 
-._hovered_gca6y_32:not(._disabled_gca6y_32) {
+._hovered_p9bua_32:not(._disabled_p9bua_32) {
   --ezui-c-switch-color-track: var(--ezui-color-neutral-200);
 }
 
-._selected_gca6y_36 {
-  --ezui-c-switch-color-track: var(--ezui-color-primary-500);
+._selected_p9bua_36 {
   --ezui-c-switch-color-thumb: var(--ezui-color-neutral-000);
 }
 
-._selected_gca6y_36._hovered_gca6y_32:not(._disabled_gca6y_32) {
+._disabled_p9bua_32 {
+  --ezui-c-switch-color-track: var(--ezui-color-neutral-050);
+  --ezui-c-switch-color-thumb: var(--ezui-color-neutral-300);
+}
+
+._variantPrimary_p9bua_45._selected_p9bua_36:not(._disabled_p9bua_32) {
+  --ezui-c-switch-color-track: var(--ezui-color-primary-500);
+}
+
+._variantPrimary_p9bua_45._selected_p9bua_36._hovered_p9bua_32:not(._disabled_p9bua_32) {
   --ezui-c-switch-color-track: var(--ezui-color-primary-600);
 }
 
-._disabled_gca6y_32 {
-  --ezui-c-switch-color-track: var(--ezui-color-neutral-050);
-  --ezui-c-switch-color-thumb: var(--ezui-color-neutral-300);
+._variantSuccess_p9bua_53._selected_p9bua_36:not(._disabled_p9bua_32) {
+  --ezui-c-switch-color-track: var(--ezui-color-positive-600);
+}
+
+._variantSuccess_p9bua_53._selected_p9bua_36._hovered_p9bua_32:not(._disabled_p9bua_32) {
+  --ezui-c-switch-color-track: var(--ezui-color-positive-700);
+}
+
+._variantDanger_p9bua_61._selected_p9bua_36:not(._disabled_p9bua_32) {
+  --ezui-c-switch-color-track: var(--ezui-color-negative-600);
+}
+
+._variantDanger_p9bua_61._selected_p9bua_36._hovered_p9bua_32:not(._disabled_p9bua_32) {
+  --ezui-c-switch-color-track: var(--ezui-color-negative-700);
 }/**
  * Do not edit directly, this file was auto-generated.
  */