@easypost/easy-ui 1.0.0-alpha.5 → 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-1a25dcae.js");
-const Text = require("../__chunks__/Text-2efbe1fe.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_1s481_5";
-const primary = "_primary_1s481_16";
-const secondary = "_secondary_1s481_17";
-const text = "_text_1s481_32";
-const variantPrimary = "_variantPrimary_1s481_37";
-const variantSecondary = "_variantSecondary_1s481_44";
-const variantBlack = "_variantBlack_1s481_51";
-const variantInverse = "_variantInverse_1s481_58";
-const variantGray = "_variantGray_1s481_65";
-const variantSuccess = "_variantSuccess_1s481_72";
-const variantWarning = "_variantWarning_1s481_79";
-const variantDanger = "_variantDanger_1s481_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,
@@ -45,11 +45,11 @@ function Badge(props) {
   }
   return React.createElement("span", {
     className
-  }, accessibilityLabel && React.createElement(Text.Text, {
+  }, accessibilityLabel && React.createElement(Text_index.Text, {
     visuallyHidden: true
   }, accessibilityLabel), React.createElement("span", {
     className: styles.primary
-  }, icon ? React.createElement(Icon.Icon, {
+  }, icon ? React.createElement(Icon_index.Icon, {
     symbol: icon,
     size: "sm"
   }) : React.createElement("span", {

package/Badge/index.mjs

@@ -1,19 +1,19 @@
 import React__default from "react";
-import { I as Icon } from "../__chunks__/Icon-6eb724b4.mjs";
-import { T as Text } from "../__chunks__/Text-ec2b8d8a.mjs";
+import { Icon } from "../Icon/index.mjs";
+import { Text } from "../Text/index.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
-const root = "_root_1s481_5";
-const primary = "_primary_1s481_16";
-const secondary = "_secondary_1s481_17";
-const text = "_text_1s481_32";
-const variantPrimary = "_variantPrimary_1s481_37";
-const variantSecondary = "_variantSecondary_1s481_44";
-const variantBlack = "_variantBlack_1s481_51";
-const variantInverse = "_variantInverse_1s481_58";
-const variantGray = "_variantGray_1s481_65";
-const variantSuccess = "_variantSuccess_1s481_72";
-const variantWarning = "_variantWarning_1s481_79";
-const variantDanger = "_variantDanger_1s481_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,

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-2efbe1fe.js");
+const Text_index = require("../Text/index.js");
 const utilities_css = require("../utilities/css.js");
-const colorSuccess = "_colorSuccess_drlk7_5";
-const colorPrimary = "_colorPrimary_drlk7_10";
-const colorNeutral = "_colorNeutral_drlk7_11";
-const Banner$1 = "_Banner_drlk7_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,
@@ -17,11 +17,11 @@ function Banner(props) {
   const { color = "success", emphasisText, children } = props;
   return React.createElement("div", {
     className: utilities_css.classNames(styles.Banner, styles[utilities_css.variationName("color", color)])
-  }, emphasisText && React.createElement(Text.Text, {
+  }, 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.Text, {
+  }, !children ? React.createElement(React.Fragment, null, emphasisText) : React.createElement(React.Fragment, null, emphasisText, ": ")), children && React.createElement(Text_index.Text, {
     variant: "body1",
     alignment: "center"
   }, children));

package/Banner/index.mjs

@@ -1,10 +1,10 @@
 import React__default from "react";
-import { T as Text } from "../__chunks__/Text-ec2b8d8a.mjs";
+import { Text } from "../Text/index.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
-const colorSuccess = "_colorSuccess_drlk7_5";
-const colorPrimary = "_colorPrimary_drlk7_10";
-const colorNeutral = "_colorNeutral_drlk7_11";
-const Banner$1 = "_Banner_drlk7_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,

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-5bbb3c5e.js");
-const Icon = require("../__chunks__/Icon-1a25dcae.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-a1e0f814.js");
 require("../__chunks__/omit-fca26542.js");
-require("../__chunks__/import-9581a2dc.js");
-const Button$1 = "_Button_1nmzk_5";
-const colorPrimary = "_colorPrimary_1nmzk_20";
-const colorSecondary = "_colorSecondary_1nmzk_28";
-const colorSuccess = "_colorSuccess_1nmzk_36";
-const colorWarning = "_colorWarning_1nmzk_44";
-const colorNeutral = "_colorNeutral_1nmzk_52";
-const colorSupport = "_colorSupport_1nmzk_60";
-const colorInverse = "_colorInverse_1nmzk_66";
-const variantFilled = "_variantFilled_1nmzk_72";
-const variantOutlined = "_variantOutlined_1nmzk_99";
-const variantLink = "_variantLink_1nmzk_127";
-const sizeMd = "_sizeMd_1nmzk_153";
-const sizeSm = "_sizeSm_1nmzk_161";
-const block = "_block_1nmzk_180";
-const iconAtStart = "_iconAtStart_1nmzk_185";
-const iconAtEnd = "_iconAtEnd_1nmzk_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,
@@ -76,17 +76,17 @@ const Button = React.forwardRef((props, inRef) => {
     console.warn("Cannot simultaneously define `iconAtEnd` and `iconAtStart`");
   }
   const canUseIcon = (iconAtEnd2 || iconAtStart2) && !bothIconPropsDefined && variant !== "link" && size !== "sm";
-  UnstyledButton.logWarningIfInvalidColorVariantCombination(color, variant);
-  return React.createElement(UnstyledButton.UnstyledButton, __spreadValues({
+  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.Icon, {
+  }, 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.Icon, {
+  }, children), iconAtEnd2 && canUseIcon && React.createElement(Icon_index.Icon, {
     symbol: iconAtEnd2
   }));
 });

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-981cd9af.mjs";
-import { I as Icon } from "../__chunks__/Icon-6eb724b4.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-fbe7cc7e.mjs";
+import "../__chunks__/import-19bc38ac.mjs";
 import "../__chunks__/omit-f17deb8f.mjs";
-import "../__chunks__/import-a6cadfe8.mjs";
-const Button$1 = "_Button_1nmzk_5";
-const colorPrimary = "_colorPrimary_1nmzk_20";
-const colorSecondary = "_colorSecondary_1nmzk_28";
-const colorSuccess = "_colorSuccess_1nmzk_36";
-const colorWarning = "_colorWarning_1nmzk_44";
-const colorNeutral = "_colorNeutral_1nmzk_52";
-const colorSupport = "_colorSupport_1nmzk_60";
-const colorInverse = "_colorInverse_1nmzk_66";
-const variantFilled = "_variantFilled_1nmzk_72";
-const variantOutlined = "_variantOutlined_1nmzk_99";
-const variantLink = "_variantLink_1nmzk_127";
-const sizeMd = "_sizeMd_1nmzk_153";
-const sizeSm = "_sizeSm_1nmzk_161";
-const block = "_block_1nmzk_180";
-const iconAtStart = "_iconAtStart_1nmzk_185";
-const iconAtEnd = "_iconAtEnd_1nmzk_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,

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

package/Card/index.js

@@ -1,7 +1,86 @@
 "use strict";
+var __defProp = Object.defineProperty;
+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 __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Card = require("../__chunks__/Card-2bd533c4.js");
-require("../__chunks__/omit-fca26542.js");
-require("react");
-require("../utilities/css.js");
-exports.Card = Card.Card;
+const omit = require("../__chunks__/omit-fca26542.js");
+const React = require("react");
+const utilities_css = require("../utilities/css.js");
+const container = "_container_p14mb_5";
+const area = "_area_p14mb_22";
+const variantOutlined = "_variantOutlined_p14mb_58";
+const variantFlagged = "_variantFlagged_p14mb_59";
+const selected = "_selected_p14mb_71";
+const disabled = "_disabled_p14mb_75";
+const statusDanger = "_statusDanger_p14mb_79";
+const statusWarning = "_statusWarning_p14mb_83";
+const statusSuccess = "_statusSuccess_p14mb_87";
+const styles = {
+  container,
+  area,
+  variantOutlined,
+  variantFlagged,
+  selected,
+  disabled,
+  statusDanger,
+  statusWarning,
+  statusSuccess
+};
+const DEFAULT_ELEMENT_TYPE = "div";
+const DEFAULT_VARIANT = "outlined";
+function CardContainer(props) {
+  const _a = props, { as: As = DEFAULT_ELEMENT_TYPE, children, isDisabled, isSelected, status, variant = DEFAULT_VARIANT } = _a, restProps = __objRest(_a, ["as", "children", "isDisabled", "isSelected", "status", "variant"]);
+  const className = utilities_css.classNames(styles.container, styles[utilities_css.variationName("variant", variant)], variant === "flagged" && status && styles[utilities_css.variationName("status", status)], variant === "outlined" && isDisabled && styles.disabled, variant === "outlined" && isSelected && styles.selected);
+  if (variant !== "flagged" && status) {
+    console.warn("status is only applicable for flagged cards");
+  }
+  if (variant !== "outlined" && isSelected) {
+    console.warn("isSelected is only applicable for outlined cards");
+  }
+  return React.createElement(As, __spreadValues({
+    className,
+    disabled: isDisabled
+  }, omit.omit(restProps, ["className"])), children);
+}
+function CardArea({ background, children, padding = "2" }) {
+  const style = __spreadValues(__spreadValues({}, utilities_css.getComponentThemeToken("card-area", "background", "color.surface.card", background)), utilities_css.getResponsiveDesignToken("card-area", "padding", "space", padding));
+  return React.createElement("div", {
+    className: styles.area,
+    style
+  }, children);
+}
+function Card(props) {
+  const _a = props, { background, children, padding } = _a, containerProps = __objRest(_a, ["background", "children", "padding"]);
+  return React.createElement(CardContainer, __spreadValues({}, containerProps), React.createElement(CardArea, {
+    background,
+    padding
+  }, children));
+}
+Card.Container = CardContainer;
+Card.Area = CardArea;
+exports.Card = Card;

package/Card/index.mjs

@@ -1,7 +1,86 @@
-import { C } from "../__chunks__/Card-4ad318ba.mjs";
-import "../__chunks__/omit-f17deb8f.mjs";
-import "react";
-import "../utilities/css.mjs";
+var __defProp = Object.defineProperty;
+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 __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { o as omit } from "../__chunks__/omit-f17deb8f.mjs";
+import React__default from "react";
+import { classNames, variationName, getComponentThemeToken, getResponsiveDesignToken } from "../utilities/css.mjs";
+const container = "_container_p14mb_5";
+const area = "_area_p14mb_22";
+const variantOutlined = "_variantOutlined_p14mb_58";
+const variantFlagged = "_variantFlagged_p14mb_59";
+const selected = "_selected_p14mb_71";
+const disabled = "_disabled_p14mb_75";
+const statusDanger = "_statusDanger_p14mb_79";
+const statusWarning = "_statusWarning_p14mb_83";
+const statusSuccess = "_statusSuccess_p14mb_87";
+const styles = {
+  container,
+  area,
+  variantOutlined,
+  variantFlagged,
+  selected,
+  disabled,
+  statusDanger,
+  statusWarning,
+  statusSuccess
+};
+const DEFAULT_ELEMENT_TYPE = "div";
+const DEFAULT_VARIANT = "outlined";
+function CardContainer(props) {
+  const _a = props, { as: As = DEFAULT_ELEMENT_TYPE, children, isDisabled, isSelected, status, variant = DEFAULT_VARIANT } = _a, restProps = __objRest(_a, ["as", "children", "isDisabled", "isSelected", "status", "variant"]);
+  const className = classNames(styles.container, styles[variationName("variant", variant)], variant === "flagged" && status && styles[variationName("status", status)], variant === "outlined" && isDisabled && styles.disabled, variant === "outlined" && isSelected && styles.selected);
+  if (variant !== "flagged" && status) {
+    console.warn("status is only applicable for flagged cards");
+  }
+  if (variant !== "outlined" && isSelected) {
+    console.warn("isSelected is only applicable for outlined cards");
+  }
+  return React__default.createElement(As, __spreadValues({
+    className,
+    disabled: isDisabled
+  }, omit(restProps, ["className"])), children);
+}
+function CardArea({ background, children, padding = "2" }) {
+  const style = __spreadValues(__spreadValues({}, getComponentThemeToken("card-area", "background", "color.surface.card", background)), getResponsiveDesignToken("card-area", "padding", "space", padding));
+  return React__default.createElement("div", {
+    className: styles.area,
+    style
+  }, children);
+}
+function Card(props) {
+  const _a = props, { background, children, padding } = _a, containerProps = __objRest(_a, ["background", "children", "padding"]);
+  return React__default.createElement(CardContainer, __spreadValues({}, containerProps), React__default.createElement(CardArea, {
+    background,
+    padding
+  }, children));
+}
+Card.Container = CardContainer;
+Card.Area = CardArea;
 export {
-  C as Card
+  Card
 };

package/Checkbox/index.js

@@ -20,14 +20,14 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Icon = require("../__chunks__/Icon-1a25dcae.js");
-const SelectorErrorTooltip = require("../__chunks__/SelectorErrorTooltip-b7bb5b9d.js");
-const Text = require("../__chunks__/Text-2efbe1fe.js");
+const Icon_index = require("../Icon/index.js");
+const SelectorErrorTooltip_index = require("../SelectorErrorTooltip/index.js");
+const Text_index = require("../Text/index.js");
 const utilities_css = require("../utilities/css.js");
-const _import = require("../__chunks__/import-d52cd5cf.js");
-const _import$1 = require("../__chunks__/import-9581a2dc.js");
-require("../__chunks__/Tooltip-c5076ca7.js");
-require("../__chunks__/import-87c465c9.js");
+const _import = require("../__chunks__/import-8b6c0bc7.js");
+const _import$1 = require("../__chunks__/import-2b302763.js");
+require("../Tooltip/index.js");
+require("../__chunks__/import-a2023d8f.js");
 require("../__chunks__/import-a1e0f814.js");
 require("react-dom");
 require("../__chunks__/import-dea5a24d.js");
@@ -156,21 +156,21 @@ const Remove600 = (_a) => {
     d: "M190.391-440.391v-79.218h579.218v79.218H190.391Z"
   }));
 };
-const Checkbox$1 = "_Checkbox_ascbx_5";
-const label = "_label_ascbx_17";
-const box = "_box_ascbx_40";
-const check = "_check_ascbx_41";
-const focusVisible = "_focusVisible_ascbx_56";
-const text = "_text_ascbx_72";
-const indeterminateSvg = "_indeterminateSvg_ascbx_77";
-const nested = "_nested_ascbx_81";
-const sizeLg = "_sizeLg_ascbx_85";
-const invalid = "_invalid_ascbx_91";
-const disabled = "_disabled_ascbx_95";
-const indeterminate = "_indeterminate_ascbx_77";
-const selected = "_selected_ascbx_100";
-const hovered = "_hovered_ascbx_116";
-const readOnly = "_readOnly_ascbx_116";
+const Checkbox$1 = "_Checkbox_1r930_5";
+const label = "_label_1r930_17";
+const box = "_box_1r930_40";
+const check = "_check_1r930_41";
+const focusVisible = "_focusVisible_1r930_56";
+const text = "_text_1r930_72";
+const indeterminateSvg = "_indeterminateSvg_1r930_77";
+const nested = "_nested_1r930_81";
+const sizeLg = "_sizeLg_1r930_85";
+const invalid = "_invalid_1r930_91";
+const disabled = "_disabled_1r930_95";
+const indeterminate = "_indeterminate_1r930_77";
+const selected = "_selected_1r930_100";
+const hovered = "_hovered_1r930_116";
+const readOnly = "_readOnly_1r930_116";
 const styles = {
   Checkbox: Checkbox$1,
   label,
@@ -214,18 +214,18 @@ function Checkbox(props) {
     className: styles.box
   }, (isIndeterminate || isSelected) && React.createElement("span", {
     className: styles.check
-  }, isIndeterminate ? React.createElement(Icon.Icon, {
+  }, isIndeterminate ? React.createElement(Icon_index.Icon, {
     symbol: Remove600,
     size: size === "lg" ? "md" : "xs"
-  }) : React.createElement(Icon.Icon, {
+  }) : React.createElement(Icon_index.Icon, {
     symbol: Check600,
     size: size === "lg" ? "md" : "xs"
   }))), React.createElement("span", {
     className: styles.text
-  }, React.createElement(Text.Text, {
+  }, React.createElement(Text_index.Text, {
     variant: textVariant,
     color: textColor
-  }, children))), validationState === "invalid" && errorText && React.createElement(SelectorErrorTooltip.SelectorErrorTooltip, {
+  }, children))), validationState === "invalid" && errorText && React.createElement(SelectorErrorTooltip_index.SelectorErrorTooltip, {
     content: errorText
   }));
 }