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

package/Badge/index.js

@@ -1,21 +1,21 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Icon = require("../__chunks__/Icon-3d00481a.js");
-const Text = require("../__chunks__/Text-1ae70c19.js");
+const Icon_index = require("../Icon/index.js");
+const Text_index = require("../Text/index.js");
 const utilities_css = require("../utilities/css.js");
-const root = "_root_noufd_5";
-const primary = "_primary_noufd_16";
-const secondary = "_secondary_noufd_17";
-const text = "_text_noufd_32";
-const variantPrimary = "_variantPrimary_noufd_37";
-const variantSecondary = "_variantSecondary_noufd_44";
-const variantBlack = "_variantBlack_noufd_51";
-const variantInverse = "_variantInverse_noufd_58";
-const variantGray = "_variantGray_noufd_65";
-const variantSuccess = "_variantSuccess_noufd_72";
-const variantWarning = "_variantWarning_noufd_79";
-const variantDanger = "_variantDanger_noufd_86";
+const root = "_root_w4lra_5";
+const primary = "_primary_w4lra_16";
+const secondary = "_secondary_w4lra_17";
+const text = "_text_w4lra_32";
+const variantPrimary = "_variantPrimary_w4lra_37";
+const variantSecondary = "_variantSecondary_w4lra_44";
+const variantBlack = "_variantBlack_w4lra_51";
+const variantInverse = "_variantInverse_w4lra_58";
+const variantGray = "_variantGray_w4lra_65";
+const variantSuccess = "_variantSuccess_w4lra_72";
+const variantWarning = "_variantWarning_w4lra_79";
+const variantDanger = "_variantDanger_w4lra_86";
 const styles = {
   root,
   primary,
@@ -32,17 +32,8 @@ const styles = {
 };
 const DEFAULT_VARIANT = "primary";
 function Badge(props) {
-  const {
-    accessibilityLabel,
-    children,
-    secondaryLabel,
-    icon,
-    variant = DEFAULT_VARIANT
-  } = props;
-  const className = utilities_css.classNames(
-    styles.root,
-    styles[utilities_css.variationName("variant", variant)]
-  );
+  const { accessibilityLabel, children, secondaryLabel, icon, variant = DEFAULT_VARIANT } = props;
+  const className = utilities_css.classNames(styles.root, styles[utilities_css.variationName("variant", variant)]);
   if (!icon && !children) {
     console.warn("Badge requires one of children or icon");
   }
@@ -52,7 +43,22 @@ function Badge(props) {
   if (icon && !children && !accessibilityLabel) {
     console.warn("Badge with only icon must have accessibilityLabel");
   }
-  return /* @__PURE__ */ React.createElement("span", { className, "data-testid": "root" }, accessibilityLabel && /* @__PURE__ */ React.createElement(Text.Text, { visuallyHidden: true }, accessibilityLabel), /* @__PURE__ */ React.createElement("span", { className: styles.primary }, icon ? /* @__PURE__ */ React.createElement(Icon.Icon, { symbol: icon, size: "sm" }) : /* @__PURE__ */ React.createElement("span", { className: styles.text }, children)), children && (icon || secondaryLabel) && /* @__PURE__ */ React.createElement("span", { className: styles.secondary }, /* @__PURE__ */ React.createElement("span", { className: styles.text }, icon ? /* @__PURE__ */ React.createElement(React.Fragment, null, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, secondaryLabel))));
+  return React.createElement("span", {
+    className
+  }, accessibilityLabel && React.createElement(Text_index.Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React.createElement("span", {
+    className: styles.primary
+  }, icon ? React.createElement(Icon_index.Icon, {
+    symbol: icon,
+    size: "sm"
+  }) : React.createElement("span", {
+    className: styles.text
+  }, children)), children && (icon || secondaryLabel) && React.createElement("span", {
+    className: styles.secondary
+  }, React.createElement("span", {
+    className: styles.text
+  }, icon ? React.createElement(React.Fragment, null, children) : React.createElement(React.Fragment, null, secondaryLabel))));
 }
 exports.Badge = Badge;
 exports.DEFAULT_VARIANT = DEFAULT_VARIANT;

package/Badge/index.mjs

@@ -1,19 +1,19 @@
 import React__default from "react";
-import { I as Icon } from "../__chunks__/Icon-a75b5201.mjs";
-import { T as Text } from "../__chunks__/Text-4ae50d5c.mjs";
+import { Icon } from "../Icon/index.mjs";
+import { Text } from "../Text/index.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
-const root = "_root_noufd_5";
-const primary = "_primary_noufd_16";
-const secondary = "_secondary_noufd_17";
-const text = "_text_noufd_32";
-const variantPrimary = "_variantPrimary_noufd_37";
-const variantSecondary = "_variantSecondary_noufd_44";
-const variantBlack = "_variantBlack_noufd_51";
-const variantInverse = "_variantInverse_noufd_58";
-const variantGray = "_variantGray_noufd_65";
-const variantSuccess = "_variantSuccess_noufd_72";
-const variantWarning = "_variantWarning_noufd_79";
-const variantDanger = "_variantDanger_noufd_86";
+const root = "_root_w4lra_5";
+const primary = "_primary_w4lra_16";
+const secondary = "_secondary_w4lra_17";
+const text = "_text_w4lra_32";
+const variantPrimary = "_variantPrimary_w4lra_37";
+const variantSecondary = "_variantSecondary_w4lra_44";
+const variantBlack = "_variantBlack_w4lra_51";
+const variantInverse = "_variantInverse_w4lra_58";
+const variantGray = "_variantGray_w4lra_65";
+const variantSuccess = "_variantSuccess_w4lra_72";
+const variantWarning = "_variantWarning_w4lra_79";
+const variantDanger = "_variantDanger_w4lra_86";
 const styles = {
   root,
   primary,
@@ -30,17 +30,8 @@ const styles = {
 };
 const DEFAULT_VARIANT = "primary";
 function Badge(props) {
-  const {
-    accessibilityLabel,
-    children,
-    secondaryLabel,
-    icon,
-    variant = DEFAULT_VARIANT
-  } = props;
-  const className = classNames(
-    styles.root,
-    styles[variationName("variant", variant)]
-  );
+  const { accessibilityLabel, children, secondaryLabel, icon, variant = DEFAULT_VARIANT } = props;
+  const className = classNames(styles.root, styles[variationName("variant", variant)]);
   if (!icon && !children) {
     console.warn("Badge requires one of children or icon");
   }
@@ -50,7 +41,22 @@ function Badge(props) {
   if (icon && !children && !accessibilityLabel) {
     console.warn("Badge with only icon must have accessibilityLabel");
   }
-  return /* @__PURE__ */ React__default.createElement("span", { className, "data-testid": "root" }, accessibilityLabel && /* @__PURE__ */ React__default.createElement(Text, { visuallyHidden: true }, accessibilityLabel), /* @__PURE__ */ React__default.createElement("span", { className: styles.primary }, icon ? /* @__PURE__ */ React__default.createElement(Icon, { symbol: icon, size: "sm" }) : /* @__PURE__ */ React__default.createElement("span", { className: styles.text }, children)), children && (icon || secondaryLabel) && /* @__PURE__ */ React__default.createElement("span", { className: styles.secondary }, /* @__PURE__ */ React__default.createElement("span", { className: styles.text }, icon ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, secondaryLabel))));
+  return React__default.createElement("span", {
+    className
+  }, accessibilityLabel && React__default.createElement(Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React__default.createElement("span", {
+    className: styles.primary
+  }, icon ? React__default.createElement(Icon, {
+    symbol: icon,
+    size: "sm"
+  }) : React__default.createElement("span", {
+    className: styles.text
+  }, children)), children && (icon || secondaryLabel) && React__default.createElement("span", {
+    className: styles.secondary
+  }, React__default.createElement("span", {
+    className: styles.text
+  }, icon ? React__default.createElement(React__default.Fragment, null, children) : React__default.createElement(React__default.Fragment, null, secondaryLabel))));
 }
 export {
   Badge,

package/Banner/index.js

@@ -1,12 +1,12 @@
 "use strict";
 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 colorSuccess = "_colorSuccess_o7uwl_5";
-const colorPrimary = "_colorPrimary_o7uwl_10";
-const colorNeutral = "_colorNeutral_o7uwl_11";
-const Banner$1 = "_Banner_o7uwl_23";
+const colorSuccess = "_colorSuccess_7ilj4_5";
+const colorPrimary = "_colorPrimary_7ilj4_10";
+const colorNeutral = "_colorNeutral_7ilj4_11";
+const Banner$1 = "_Banner_7ilj4_23";
 const styles = {
   colorSuccess,
   colorPrimary,
@@ -15,16 +15,15 @@ const styles = {
 };
 function Banner(props) {
   const { color = "success", emphasisText, children } = props;
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: utilities_css.classNames(
-        styles.Banner,
-        styles[utilities_css.variationName("color", color)]
-      )
-    },
-    emphasisText && /* @__PURE__ */ React.createElement(Text.Text, { as: "strong", variant: "subtitle1", alignment: "center" }, !children ? /* @__PURE__ */ React.createElement(React.Fragment, null, emphasisText) : /* @__PURE__ */ React.createElement(React.Fragment, null, emphasisText, ": ")),
-    children && /* @__PURE__ */ React.createElement(Text.Text, { variant: "body1", alignment: "center" }, children)
-  );
+  return React.createElement("div", {
+    className: utilities_css.classNames(styles.Banner, styles[utilities_css.variationName("color", color)])
+  }, emphasisText && React.createElement(Text_index.Text, {
+    as: "strong",
+    variant: "subtitle1",
+    alignment: "center"
+  }, !children ? React.createElement(React.Fragment, null, emphasisText) : React.createElement(React.Fragment, null, emphasisText, ": ")), children && React.createElement(Text_index.Text, {
+    variant: "body1",
+    alignment: "center"
+  }, children));
 }
 exports.Banner = Banner;

package/Banner/index.mjs

@@ -1,10 +1,10 @@
 import React__default from "react";
-import { T as Text } from "../__chunks__/Text-4ae50d5c.mjs";
+import { Text } from "../Text/index.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
-const colorSuccess = "_colorSuccess_o7uwl_5";
-const colorPrimary = "_colorPrimary_o7uwl_10";
-const colorNeutral = "_colorNeutral_o7uwl_11";
-const Banner$1 = "_Banner_o7uwl_23";
+const colorSuccess = "_colorSuccess_7ilj4_5";
+const colorPrimary = "_colorPrimary_7ilj4_10";
+const colorNeutral = "_colorNeutral_7ilj4_11";
+const Banner$1 = "_Banner_7ilj4_23";
 const styles = {
   colorSuccess,
   colorPrimary,
@@ -13,17 +13,16 @@ const styles = {
 };
 function Banner(props) {
   const { color = "success", emphasisText, children } = props;
-  return /* @__PURE__ */ React__default.createElement(
-    "div",
-    {
-      className: classNames(
-        styles.Banner,
-        styles[variationName("color", color)]
-      )
-    },
-    emphasisText && /* @__PURE__ */ React__default.createElement(Text, { as: "strong", variant: "subtitle1", alignment: "center" }, !children ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, emphasisText) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, emphasisText, ": ")),
-    children && /* @__PURE__ */ React__default.createElement(Text, { variant: "body1", alignment: "center" }, children)
-  );
+  return React__default.createElement("div", {
+    className: classNames(styles.Banner, styles[variationName("color", color)])
+  }, emphasisText && React__default.createElement(Text, {
+    as: "strong",
+    variant: "subtitle1",
+    alignment: "center"
+  }, !children ? React__default.createElement(React__default.Fragment, null, emphasisText) : React__default.createElement(React__default.Fragment, null, emphasisText, ": ")), children && React__default.createElement(Text, {
+    variant: "body1",
+    alignment: "center"
+  }, children));
 }
 export {
   Banner

package/Button/Button.d.ts

@@ -24,6 +24,67 @@ export type ButtonProps = AriaButtonProps & {
     /** Link's destination */
     href?: string;
 };
+/**
+ * Allow users to perform an action or to navigate to another page.
+ *
+ * @remarks
+ * Use to communicate an action the user can take in order to continue
+ * flow in the UI. Supports icons, multiple colors, outlined and link variations,
+ * and small size buttons. Underlying element is a button, but becomes an
+ * anchor when `href` is provided.
+ *
+ * @example
+ * _Default:_
+ * ```tsx
+ * import { Button } from "@easypost/easy-ui/Button";
+ *
+ * export function Component() {
+ *  return <Button onPress={() => alert("clicked")}>Button</Button>;
+ * }
+ * ```
+ *
+ * @example
+ * _Outlined variant:_
+ * ```tsx
+ * import { Button } from "@easypost/easy-ui/Button";
+ *
+ * export function Component() {
+ *   return (
+ *    <Button onPress={() => alert("clicked")} variant="outlined">
+ *      Button
+ *    </Button>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * _Success color:_
+ * ```tsx
+ * import { Button } from "@easypost/easy-ui/Button";
+ *
+ * export function Component() {
+ *   return (
+ *    <Button onPress={() => alert("clicked")} color="success">
+ *      Button
+ *    </Button>
+ *   );
+ * }
+ * ```
+ * @example
+ * _With href and icon:_
+ * ```tsx
+ * import { Button } from "@easypost/easy-ui/Button";
+ * import ArrowBackIcon from "@easypost/easy-ui-icons/ArrowBack";
+ *
+ * export function Component() {
+ *   return (
+ *    <Button href="https://www.easypost.com/" iconAtEnd={ArrowBackIcon}>
+ *      Button
+ *    </Button>
+ *   );
+ * }
+ * ```
+ */
 export declare const Button: React.ForwardRefExoticComponent<AriaButtonProps<"button"> & {
     /** Button color */
     color?: ButtonColor | undefined;

package/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAK7C,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C,mBAAmB;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,kBAAkB;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,MAAM;IApBjB,mBAAmB;;IAEnB,qBAAqB;;IAErB,kBAAkB;;IAElB,sBAAsB;;IAEtB,6CAA6C;;IAE7C,4CAA4C;;IAE5C,2CAA2C;;IAE3C,6BAA6B;eAClB,SAAS;IACpB,yBAAyB;;8BA0DzB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAK7C,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAC3D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C,mBAAmB;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,kBAAkB;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,eAAO,MAAM,MAAM;IAjFjB,mBAAmB;;IAEnB,qBAAqB;;IAErB,kBAAkB;;IAElB,sBAAsB;;IAEtB,6CAA6C;;IAE7C,4CAA4C;;IAE5C,2CAA2C;;IAE3C,6BAA6B;eAClB,SAAS;IACpB,yBAAyB;;8BAuHzB,CAAC"}

package/Button/index.js

@@ -29,28 +29,28 @@ var __objRest = (source, exclude) => {
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const UnstyledButton = require("../__chunks__/UnstyledButton-96172ec0.js");
-const Icon = require("../__chunks__/Icon-3d00481a.js");
+const UnstyledButton_index = require("../__chunks__/index-3985350a.js");
+const Icon_index = require("../Icon/index.js");
 const utilities_css = require("../utilities/css.js");
-require("../__chunks__/import-63bf0645.js");
+require("../__chunks__/import-a1e0f814.js");
 require("../__chunks__/omit-fca26542.js");
-require("../__chunks__/import-0d1b4d93.js");
-const Button$1 = "_Button_1f8mn_5";
-const colorPrimary = "_colorPrimary_1f8mn_20";
-const colorSecondary = "_colorSecondary_1f8mn_28";
-const colorSuccess = "_colorSuccess_1f8mn_36";
-const colorWarning = "_colorWarning_1f8mn_44";
-const colorNeutral = "_colorNeutral_1f8mn_52";
-const colorSupport = "_colorSupport_1f8mn_60";
-const colorInverse = "_colorInverse_1f8mn_66";
-const variantFilled = "_variantFilled_1f8mn_72";
-const variantOutlined = "_variantOutlined_1f8mn_99";
-const variantLink = "_variantLink_1f8mn_127";
-const sizeMd = "_sizeMd_1f8mn_153";
-const sizeSm = "_sizeSm_1f8mn_161";
-const block = "_block_1f8mn_180";
-const iconAtStart = "_iconAtStart_1f8mn_185";
-const iconAtEnd = "_iconAtEnd_1f8mn_189";
+require("../__chunks__/import-2b302763.js");
+const Button$1 = "_Button_l4y1n_5";
+const colorPrimary = "_colorPrimary_l4y1n_20";
+const colorSecondary = "_colorSecondary_l4y1n_28";
+const colorSuccess = "_colorSuccess_l4y1n_36";
+const colorWarning = "_colorWarning_l4y1n_44";
+const colorNeutral = "_colorNeutral_l4y1n_52";
+const colorSupport = "_colorSupport_l4y1n_60";
+const colorInverse = "_colorInverse_l4y1n_66";
+const variantFilled = "_variantFilled_l4y1n_72";
+const variantOutlined = "_variantOutlined_l4y1n_99";
+const variantLink = "_variantLink_l4y1n_127";
+const sizeMd = "_sizeMd_l4y1n_153";
+const sizeSm = "_sizeSm_l4y1n_161";
+const block = "_block_l4y1n_180";
+const iconAtStart = "_iconAtStart_l4y1n_185";
+const iconAtEnd = "_iconAtEnd_l4y1n_189";
 const styles = {
   Button: Button$1,
   colorPrimary,
@@ -70,60 +70,25 @@ const styles = {
   iconAtEnd
 };
 const Button = React.forwardRef((props, inRef) => {
-  const _a = props, {
-    color = "primary",
-    variant = "filled",
-    size = "md",
-    isDisabled = false,
-    isBlock = false,
-    iconAtStart: iconAtStart2,
-    iconAtEnd: iconAtEnd2,
-    children = "Button",
-    href = ""
-  } = _a, restProps = __objRest(_a, [
-    "color",
-    "variant",
-    "size",
-    "isDisabled",
-    "isBlock",
-    "iconAtStart",
-    "iconAtEnd",
-    "children",
-    "href"
-  ]);
+  const _a = props, { color = "primary", variant = "filled", size = "md", isDisabled = false, isBlock = false, iconAtStart: iconAtStart2, iconAtEnd: iconAtEnd2, children = "Button", href = "" } = _a, restProps = __objRest(_a, ["color", "variant", "size", "isDisabled", "isBlock", "iconAtStart", "iconAtEnd", "children", "href"]);
   const bothIconPropsDefined = iconAtEnd2 && iconAtStart2;
   if (bothIconPropsDefined) {
     console.warn("Cannot simultaneously define `iconAtEnd` and `iconAtStart`");
   }
   const canUseIcon = (iconAtEnd2 || iconAtStart2) && !bothIconPropsDefined && variant !== "link" && size !== "sm";
-  UnstyledButton.logWarningIfInvalidColorVariantCombination(color, variant);
-  return /* @__PURE__ */ React.createElement(
-    UnstyledButton.UnstyledButton,
-    __spreadValues({
-      isDisabled,
-      ref: inRef,
-      className: utilities_css.classNames(
-        styles.Button,
-        styles[utilities_css.variationName("color", color)],
-        styles[utilities_css.variationName("variant", variant)],
-        styles[utilities_css.variationName("size", size)],
-        isBlock && styles.block
-      ),
-      href
-    }, restProps),
-    iconAtStart2 && canUseIcon && /* @__PURE__ */ React.createElement(Icon.Icon, { symbol: iconAtStart2 }),
-    /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: utilities_css.classNames(
-          iconAtStart2 && canUseIcon && styles.iconAtStart,
-          iconAtEnd2 && canUseIcon && styles.iconAtEnd
-        )
-      },
-      children
-    ),
-    iconAtEnd2 && canUseIcon && /* @__PURE__ */ React.createElement(Icon.Icon, { symbol: iconAtEnd2 })
-  );
+  UnstyledButton_index.logWarningIfInvalidColorVariantCombination(color, variant);
+  return React.createElement(UnstyledButton_index.UnstyledButton, __spreadValues({
+    isDisabled,
+    ref: inRef,
+    className: utilities_css.classNames(styles.Button, styles[utilities_css.variationName("color", color)], styles[utilities_css.variationName("variant", variant)], styles[utilities_css.variationName("size", size)], isBlock && styles.block),
+    href
+  }, restProps), iconAtStart2 && canUseIcon && React.createElement(Icon_index.Icon, {
+    symbol: iconAtStart2
+  }), React.createElement("span", {
+    className: utilities_css.classNames(iconAtStart2 && canUseIcon && styles.iconAtStart, iconAtEnd2 && canUseIcon && styles.iconAtEnd)
+  }, children), iconAtEnd2 && canUseIcon && React.createElement(Icon_index.Icon, {
+    symbol: iconAtEnd2
+  }));
 });
 Button.displayName = "Button";
 exports.Button = Button;

package/Button/index.mjs

@@ -27,28 +27,28 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import React__default, { forwardRef } from "react";
-import { l as logWarningIfInvalidColorVariantCombination, U as UnstyledButton } from "../__chunks__/UnstyledButton-883f0c6c.mjs";
-import { I as Icon } from "../__chunks__/Icon-a75b5201.mjs";
+import { l as logWarningIfInvalidColorVariantCombination, U as UnstyledButton } from "../__chunks__/index-29d7bca9.mjs";
+import { Icon } from "../Icon/index.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
-import "../__chunks__/import-b7971a11.mjs";
+import "../__chunks__/import-19bc38ac.mjs";
 import "../__chunks__/omit-f17deb8f.mjs";
-import "../__chunks__/import-ab878fb6.mjs";
-const Button$1 = "_Button_1f8mn_5";
-const colorPrimary = "_colorPrimary_1f8mn_20";
-const colorSecondary = "_colorSecondary_1f8mn_28";
-const colorSuccess = "_colorSuccess_1f8mn_36";
-const colorWarning = "_colorWarning_1f8mn_44";
-const colorNeutral = "_colorNeutral_1f8mn_52";
-const colorSupport = "_colorSupport_1f8mn_60";
-const colorInverse = "_colorInverse_1f8mn_66";
-const variantFilled = "_variantFilled_1f8mn_72";
-const variantOutlined = "_variantOutlined_1f8mn_99";
-const variantLink = "_variantLink_1f8mn_127";
-const sizeMd = "_sizeMd_1f8mn_153";
-const sizeSm = "_sizeSm_1f8mn_161";
-const block = "_block_1f8mn_180";
-const iconAtStart = "_iconAtStart_1f8mn_185";
-const iconAtEnd = "_iconAtEnd_1f8mn_189";
+import "../__chunks__/import-3d962a94.mjs";
+const Button$1 = "_Button_l4y1n_5";
+const colorPrimary = "_colorPrimary_l4y1n_20";
+const colorSecondary = "_colorSecondary_l4y1n_28";
+const colorSuccess = "_colorSuccess_l4y1n_36";
+const colorWarning = "_colorWarning_l4y1n_44";
+const colorNeutral = "_colorNeutral_l4y1n_52";
+const colorSupport = "_colorSupport_l4y1n_60";
+const colorInverse = "_colorInverse_l4y1n_66";
+const variantFilled = "_variantFilled_l4y1n_72";
+const variantOutlined = "_variantOutlined_l4y1n_99";
+const variantLink = "_variantLink_l4y1n_127";
+const sizeMd = "_sizeMd_l4y1n_153";
+const sizeSm = "_sizeSm_l4y1n_161";
+const block = "_block_l4y1n_180";
+const iconAtStart = "_iconAtStart_l4y1n_185";
+const iconAtEnd = "_iconAtEnd_l4y1n_189";
 const styles = {
   Button: Button$1,
   colorPrimary,
@@ -68,60 +68,25 @@ const styles = {
   iconAtEnd
 };
 const Button = forwardRef((props, inRef) => {
-  const _a = props, {
-    color = "primary",
-    variant = "filled",
-    size = "md",
-    isDisabled = false,
-    isBlock = false,
-    iconAtStart: iconAtStart2,
-    iconAtEnd: iconAtEnd2,
-    children = "Button",
-    href = ""
-  } = _a, restProps = __objRest(_a, [
-    "color",
-    "variant",
-    "size",
-    "isDisabled",
-    "isBlock",
-    "iconAtStart",
-    "iconAtEnd",
-    "children",
-    "href"
-  ]);
+  const _a = props, { color = "primary", variant = "filled", size = "md", isDisabled = false, isBlock = false, iconAtStart: iconAtStart2, iconAtEnd: iconAtEnd2, children = "Button", href = "" } = _a, restProps = __objRest(_a, ["color", "variant", "size", "isDisabled", "isBlock", "iconAtStart", "iconAtEnd", "children", "href"]);
   const bothIconPropsDefined = iconAtEnd2 && iconAtStart2;
   if (bothIconPropsDefined) {
     console.warn("Cannot simultaneously define `iconAtEnd` and `iconAtStart`");
   }
   const canUseIcon = (iconAtEnd2 || iconAtStart2) && !bothIconPropsDefined && variant !== "link" && size !== "sm";
   logWarningIfInvalidColorVariantCombination(color, variant);
-  return /* @__PURE__ */ React__default.createElement(
-    UnstyledButton,
-    __spreadValues({
-      isDisabled,
-      ref: inRef,
-      className: classNames(
-        styles.Button,
-        styles[variationName("color", color)],
-        styles[variationName("variant", variant)],
-        styles[variationName("size", size)],
-        isBlock && styles.block
-      ),
-      href
-    }, restProps),
-    iconAtStart2 && canUseIcon && /* @__PURE__ */ React__default.createElement(Icon, { symbol: iconAtStart2 }),
-    /* @__PURE__ */ React__default.createElement(
-      "span",
-      {
-        className: classNames(
-          iconAtStart2 && canUseIcon && styles.iconAtStart,
-          iconAtEnd2 && canUseIcon && styles.iconAtEnd
-        )
-      },
-      children
-    ),
-    iconAtEnd2 && canUseIcon && /* @__PURE__ */ React__default.createElement(Icon, { symbol: iconAtEnd2 })
-  );
+  return React__default.createElement(UnstyledButton, __spreadValues({
+    isDisabled,
+    ref: inRef,
+    className: classNames(styles.Button, styles[variationName("color", color)], styles[variationName("variant", variant)], styles[variationName("size", size)], isBlock && styles.block),
+    href
+  }, restProps), iconAtStart2 && canUseIcon && React__default.createElement(Icon, {
+    symbol: iconAtStart2
+  }), React__default.createElement("span", {
+    className: classNames(iconAtStart2 && canUseIcon && styles.iconAtStart, iconAtEnd2 && canUseIcon && styles.iconAtEnd)
+  }, children), iconAtEnd2 && canUseIcon && React__default.createElement(Icon, {
+    symbol: iconAtEnd2
+  }));
 });
 Button.displayName = "Button";
 export {

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @easypost/easy-ui
 
+## 1.0.0-alpha.6
+
+### Patch Changes
+
+- Updated dependencies [f03de81]
+- Updated dependencies [b652cd3]
+  - @easypost/easy-ui-icons@1.0.0-alpha.6
+
+## 1.0.0-alpha.5
+
+### Minor Changes
+
+- 1bdf32b: Add `Select` component
+
+### Patch Changes
+
+- 88673e3: Add layout primitive stories
+- Updated dependencies [1bdf32b]
+- Updated dependencies
+  - @easypost/easy-ui-icons@1.0.0-alpha.5
+
 ## 1.0.0-alpha.4
 
 ### Minor Changes