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

package/CHANGELOG.md

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

package/IconButton/IconButton.d.ts

@@ -3,6 +3,7 @@ import { AriaButtonProps } from "react-aria";
 import { ButtonColor } from "../Button";
 import { IconSymbol } from "../types";
 export type IconButtonVariant = "filled" | "outlined";
+export type IconButtonSize = "sm" | "md";
 export type IconButtonProps = AriaButtonProps & {
     /** Button color */
     color?: ButtonColor;
@@ -10,6 +11,8 @@ export type IconButtonProps = AriaButtonProps & {
     variant?: IconButtonVariant;
     /** Icon symbol */
     icon: IconSymbol;
+    /** Button size */
+    size?: IconButtonSize;
     /** Description of icon */
     accessibilityLabel: string;
     /** Disables button */
@@ -84,6 +87,8 @@ export declare const IconButton: React.ForwardRefExoticComponent<AriaButtonProps
     variant?: IconButtonVariant;
     /** Icon symbol */
     icon: IconSymbol;
+    /** Button size */
+    size?: IconButtonSize;
     /** Description of icon */
     accessibilityLabel: string;
     /** Disables button */

package/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAIxC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG,eAAe,GAAG;IAC9C,mBAAmB;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,kBAAkB;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,0BAA0B;IAC1B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,eAAO,MAAM,UAAU;IA1ErB,mBAAmB;YACX,WAAW;IACnB,qBAAqB;cACX,iBAAiB;IAC3B,kBAAkB;UACZ,UAAU;IAChB,0BAA0B;wBACN,MAAM;IAC1B,sBAAsB;iBACT,OAAO;8BA4FpB,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAIxC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,MAAM,eAAe,GAAG,eAAe,GAAG;IAC9C,mBAAmB;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,kBAAkB;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,kBAAkB;IAClB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,0BAA0B;IAC1B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,eAAO,MAAM,UAAU;IA5ErB,mBAAmB;YACX,WAAW;IACnB,qBAAqB;cACX,iBAAiB;IAC3B,kBAAkB;UACZ,UAAU;IAChB,kBAAkB;WACX,cAAc;IACrB,0BAA0B;wBACN,MAAM;IAC1B,sBAAsB;iBACT,OAAO;8BAiGpB,CAAC"}

package/IconButton/IconButton.stories.d.ts

@@ -6,6 +6,7 @@ export default meta;
 export declare const Filled: Story;
 export declare const Outlined: Story;
 export declare const Inverse: Story;
+export declare const Small: Story;
 export declare const Disabled: Story;
 export declare const ClickEvent: Story;
 export declare const Controls: Story;

package/IconButton/IconButton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AASvD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAE3D,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AASzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CASjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAMF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAMF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}
+{"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AASvD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAE3D,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AASzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CASjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAMF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAMF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}

package/IconButton/index.js

@@ -33,16 +33,18 @@ const UnstyledButton = require("../__chunks__/UnstyledButton-DaRYVyfB.js");
 const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
 const Text = require("../__chunks__/Text-CSESKR_s.js");
 const utilities_css = require("../utilities/css.js");
-const IconButton$1 = "_IconButton_16fh0_4";
-const colorPrimary = "_colorPrimary_16fh0_19";
-const colorSecondary = "_colorSecondary_16fh0_27";
-const colorSuccess = "_colorSuccess_16fh0_35";
-const colorWarning = "_colorWarning_16fh0_43";
-const colorNeutral = "_colorNeutral_16fh0_51";
-const colorSupport = "_colorSupport_16fh0_59";
-const colorInverse = "_colorInverse_16fh0_65";
-const variantOutlined = "_variantOutlined_16fh0_71";
-const variantFilled = "_variantFilled_16fh0_100";
+const IconButton$1 = "_IconButton_ghgsb_4";
+const colorPrimary = "_colorPrimary_ghgsb_19";
+const colorSecondary = "_colorSecondary_ghgsb_27";
+const colorSuccess = "_colorSuccess_ghgsb_35";
+const colorWarning = "_colorWarning_ghgsb_43";
+const colorNeutral = "_colorNeutral_ghgsb_51";
+const colorSupport = "_colorSupport_ghgsb_59";
+const colorInverse = "_colorInverse_ghgsb_65";
+const variantOutlined = "_variantOutlined_ghgsb_71";
+const variantFilled = "_variantFilled_ghgsb_100";
+const sizeMd = "_sizeMd_ghgsb_127";
+const sizeSm = "_sizeSm_ghgsb_134";
 const styles = {
   IconButton: IconButton$1,
   colorPrimary,
@@ -53,19 +55,23 @@ const styles = {
   colorSupport,
   colorInverse,
   variantOutlined,
-  variantFilled
+  variantFilled,
+  sizeMd,
+  sizeSm
 };
 const IconButton = React.forwardRef((props, inRef) => {
-  const _a = props, { color = "primary", variant = "filled", icon, accessibilityLabel, isDisabled = false } = _a, restProps = __objRest(_a, ["color", "variant", "icon", "accessibilityLabel", "isDisabled"]);
+  const _a = props, { color = "primary", variant = "filled", icon, size = "md", accessibilityLabel, isDisabled = false } = _a, restProps = __objRest(_a, ["color", "variant", "icon", "size", "accessibilityLabel", "isDisabled"]);
   UnstyledButton.logWarningIfInvalidColorVariantCombination(color, variant);
+  const iconSize = size === "sm" ? "xs" : "md";
   return React.createElement(UnstyledButton.UnstyledButton, __spreadValues({
     isDisabled,
     ref: inRef,
-    className: utilities_css.classNames(styles.IconButton, styles[utilities_css.variationName("variant", variant)], styles[utilities_css.variationName("color", color)])
+    className: utilities_css.classNames(styles.IconButton, styles[utilities_css.variationName("variant", variant)], styles[utilities_css.variationName("color", color)], styles[utilities_css.variationName("size", size)])
   }, restProps), React.createElement(Text.Text, {
     visuallyHidden: true
   }, accessibilityLabel), React.createElement(Icon.Icon, {
-    symbol: icon
+    symbol: icon,
+    size: iconSize
   }));
 });
 IconButton.displayName = "IconButton";

package/IconButton/index.mjs

@@ -31,16 +31,18 @@ import { l as logWarningIfInvalidColorVariantCombination, U as UnstyledButton }
 import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
 import { T as Text } from "../__chunks__/Text-YOL3isF4.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
-const IconButton$1 = "_IconButton_16fh0_4";
-const colorPrimary = "_colorPrimary_16fh0_19";
-const colorSecondary = "_colorSecondary_16fh0_27";
-const colorSuccess = "_colorSuccess_16fh0_35";
-const colorWarning = "_colorWarning_16fh0_43";
-const colorNeutral = "_colorNeutral_16fh0_51";
-const colorSupport = "_colorSupport_16fh0_59";
-const colorInverse = "_colorInverse_16fh0_65";
-const variantOutlined = "_variantOutlined_16fh0_71";
-const variantFilled = "_variantFilled_16fh0_100";
+const IconButton$1 = "_IconButton_ghgsb_4";
+const colorPrimary = "_colorPrimary_ghgsb_19";
+const colorSecondary = "_colorSecondary_ghgsb_27";
+const colorSuccess = "_colorSuccess_ghgsb_35";
+const colorWarning = "_colorWarning_ghgsb_43";
+const colorNeutral = "_colorNeutral_ghgsb_51";
+const colorSupport = "_colorSupport_ghgsb_59";
+const colorInverse = "_colorInverse_ghgsb_65";
+const variantOutlined = "_variantOutlined_ghgsb_71";
+const variantFilled = "_variantFilled_ghgsb_100";
+const sizeMd = "_sizeMd_ghgsb_127";
+const sizeSm = "_sizeSm_ghgsb_134";
 const styles = {
   IconButton: IconButton$1,
   colorPrimary,
@@ -51,19 +53,23 @@ const styles = {
   colorSupport,
   colorInverse,
   variantOutlined,
-  variantFilled
+  variantFilled,
+  sizeMd,
+  sizeSm
 };
 const IconButton = forwardRef((props, inRef) => {
-  const _a = props, { color = "primary", variant = "filled", icon, accessibilityLabel, isDisabled = false } = _a, restProps = __objRest(_a, ["color", "variant", "icon", "accessibilityLabel", "isDisabled"]);
+  const _a = props, { color = "primary", variant = "filled", icon, size = "md", accessibilityLabel, isDisabled = false } = _a, restProps = __objRest(_a, ["color", "variant", "icon", "size", "accessibilityLabel", "isDisabled"]);
   logWarningIfInvalidColorVariantCombination(color, variant);
+  const iconSize = size === "sm" ? "xs" : "md";
   return React__default.createElement(UnstyledButton, __spreadValues({
     isDisabled,
     ref: inRef,
-    className: classNames(styles.IconButton, styles[variationName("variant", variant)], styles[variationName("color", color)])
+    className: classNames(styles.IconButton, styles[variationName("variant", variant)], styles[variationName("color", color)], styles[variationName("size", size)])
   }, restProps), React__default.createElement(Text, {
     visuallyHidden: true
   }, accessibilityLabel), React__default.createElement(Icon, {
-    symbol: icon
+    symbol: icon,
+    size: iconSize
   }));
 });
 IconButton.displayName = "IconButton";

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.102",
   "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.
  */
@@ -3804,22 +3823,22 @@ textarea {
 }/**
  * Do not edit directly, this file was auto-generated.
  */
-._IconButton_16fh0_4 {
+._IconButton_ghgsb_4 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--ezui-shape-border-radius-md);
   cursor: pointer;
 }
-._IconButton_16fh0_4:focus {
+._IconButton_ghgsb_4:focus {
   box-shadow: var(--ezui-shadow-button);
   outline: none;
 }
-._IconButton_16fh0_4:disabled {
+._IconButton_ghgsb_4:disabled {
   pointer-events: none;
 }
 
-._colorPrimary_16fh0_19 {
+._colorPrimary_ghgsb_19 {
   --ezui-c-button-filled-font-color: var(--ezui-color-neutral-000);
   --ezui-c-button-filled-active-font-color: var(--ezui-color-neutral-000);
   --ezui-c-button-resting-color: var(--ezui-color-primary-500);
@@ -3827,7 +3846,7 @@ textarea {
   --ezui-c-button-active-color: var(--ezui-color-primary-700);
 }
 
-._colorSecondary_16fh0_27 {
+._colorSecondary_ghgsb_27 {
   --ezui-c-button-filled-font-color: var(--ezui-color-neutral-000);
   --ezui-c-button-filled-active-font-color: var(--ezui-color-neutral-000);
   --ezui-c-button-resting-color: var(--ezui-color-secondary-500);
@@ -3835,7 +3854,7 @@ textarea {
   --ezui-c-button-active-color: var(--ezui-color-secondary-700);
 }
 
-._colorSuccess_16fh0_35 {
+._colorSuccess_ghgsb_35 {
   --ezui-c-button-filled-font-color: var(--ezui-color-primary-800);
   --ezui-c-button-filled-active-font-color: var(--ezui-color-neutral-000);
   --ezui-c-button-resting-color: var(--ezui-color-positive-500);
@@ -3843,7 +3862,7 @@ textarea {
   --ezui-c-button-active-color: var(--ezui-color-positive-700);
 }
 
-._colorWarning_16fh0_43 {
+._colorWarning_ghgsb_43 {
   --ezui-c-button-filled-font-color: var(--ezui-color-primary-800);
   --ezui-c-button-filled-active-font-color: var(--ezui-color-primary-800);
   --ezui-c-button-resting-color: var(--ezui-color-negative-500);
@@ -3851,7 +3870,7 @@ textarea {
   --ezui-c-button-active-color: var(--ezui-color-negative-700);
 }
 
-._colorNeutral_16fh0_51 {
+._colorNeutral_ghgsb_51 {
   --ezui-c-button-filled-font-color: var(--ezui-color-neutral-000);
   --ezui-c-button-filled-active-font-color: var(--ezui-color-neutral-000);
   --ezui-c-button-resting-color: var(--ezui-color-primary-800);
@@ -3859,72 +3878,94 @@ textarea {
   --ezui-c-button-active-color: var(--ezui-color-primary-700);
 }
 
-._colorSupport_16fh0_59 {
+._colorSupport_ghgsb_59 {
   --ezui-c-button-resting-color: var(--ezui-color-primary-800);
   --ezui-c-button-hover-focus-color: var(--ezui-color-neutral-900);
   --ezui-c-button-active-color: var(--ezui-color-neutral-700);
 }
 
-._colorInverse_16fh0_65 {
+._colorInverse_ghgsb_65 {
   --ezui-c-button-resting-color: var(--ezui-color-neutral-000);
   --ezui-c-button-hover-focus-color: var(--ezui-color-neutral-100);
   --ezui-c-button-active-color: var(--ezui-color-neutral-200);
 }
 
-._variantOutlined_16fh0_71 {
+._variantOutlined_ghgsb_71 {
   padding: calc(var(--ezui-space-1-5) - var(--ezui-shape-border-width-1));
   background-color: transparent;
   border: var(--ezui-shape-border-width-1) solid var(--ezui-c-button-resting-color);
   color: var(--ezui-c-button-resting-color);
 }
-._variantOutlined_16fh0_71:focus {
+._variantOutlined_ghgsb_71:focus {
   border: var(--ezui-shape-border-width-1) solid var(--ezui-c-button-hover-focus-color);
   color: var(--ezui-c-button-hover-focus-color);
 }
-._variantOutlined_16fh0_71:disabled {
+._variantOutlined_ghgsb_71:disabled {
   color: var(--ezui-color-neutral-300);
   border: var(--ezui-shape-border-width-1) solid var(--ezui-color-neutral-300);
 }
-._variantOutlined_16fh0_71:link {
+._variantOutlined_ghgsb_71:link {
   text-decoration: none;
 }
-._variantOutlined_16fh0_71:active:not(:disabled) {
+._variantOutlined_ghgsb_71:active:not(:disabled) {
   color: var(--ezui-c-button-active-color);
   border: var(--ezui-shape-border-width-1) solid var(--ezui-c-button-active-color);
 }
-._variantOutlined_16fh0_71:active:not(:disabled):focus {
+._variantOutlined_ghgsb_71:active:not(:disabled):focus {
   box-shadow: none;
 }
-._variantOutlined_16fh0_71:hover:not(:disabled):not(:active) {
+._variantOutlined_ghgsb_71:hover:not(:disabled):not(:active) {
   border: var(--ezui-shape-border-width-1) solid var(--ezui-c-button-hover-focus-color);
   color: var(--ezui-c-button-hover-focus-color);
 }
 
-._variantFilled_16fh0_100 {
+._variantFilled_ghgsb_100 {
   padding: var(--ezui-space-1-5);
   background-color: var(--ezui-c-button-resting-color);
   color: var(--ezui-c-button-filled-font-color);
 }
-._variantFilled_16fh0_100:focus {
+._variantFilled_ghgsb_100:focus {
   background-color: var(--ezui-c-button-hover-focus-color);
 }
-._variantFilled_16fh0_100:disabled {
+._variantFilled_ghgsb_100:disabled {
   color: var(--ezui-color-neutral-000);
   background-color: var(--ezui-color-neutral-200);
 }
-._variantFilled_16fh0_100:link {
+._variantFilled_ghgsb_100:link {
   text-decoration: none;
 }
-._variantFilled_16fh0_100:not(:disabled):active {
+._variantFilled_ghgsb_100:not(:disabled):active {
   color: var(--ezui-c-button-filled-active-font-color);
   background-color: var(--ezui-c-button-active-color);
 }
-._variantFilled_16fh0_100:not(:disabled):active:focus {
+._variantFilled_ghgsb_100:not(:disabled):active:focus {
   box-shadow: none;
 }
-._variantFilled_16fh0_100:hover:not(:disabled):not(:active) {
+._variantFilled_ghgsb_100:hover:not(:disabled):not(:active) {
   background-color: var(--ezui-c-button-hover-focus-color);
   color: var(--ezui-c-button-filled-font-color);
+}
+
+._sizeMd_ghgsb_127 {
+  font-weight: 500;
+  font-size: 0.9375rem;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+}
+
+._sizeSm_ghgsb_134 {
+  font-weight: 500;
+  font-size: 0.75rem;
+  letter-spacing: 0;
+  line-height: 1rem;
+}
+
+._sizeSm_ghgsb_134._variantFilled_ghgsb_100 {
+  padding: var(--ezui-space-1);
+}
+
+._sizeSm_ghgsb_134._variantOutlined_ghgsb_71 {
+  padding: calc(var(--ezui-space-1) - var(--ezui-shape-border-width-1));
 }/**
  * Do not edit directly, this file was auto-generated.
  */