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

package/HorizontalGrid/index.mjs

@@ -18,14 +18,7 @@ import React__default, { forwardRef } from "react";
 import { getResponsiveValue, getResponsiveDesignToken, getComponentToken } from "../utilities/css.mjs";
 function formatHorizontalGrid(columns) {
   if (typeof columns === "object" && columns !== null && !Array.isArray(columns)) {
-    return Object.fromEntries(
-      Object.entries(columns).map(
-        ([breakpointAlias, breakpointHorizontalGrid]) => [
-          breakpointAlias,
-          getColumnValue(breakpointHorizontalGrid)
-        ]
-      )
-    );
+    return Object.fromEntries(Object.entries(columns).map(([breakpointAlias, breakpointHorizontalGrid]) => [breakpointAlias, getColumnValue(breakpointHorizontalGrid)]));
   }
   return getColumnValue(columns);
 }
@@ -52,32 +45,19 @@ function getColumnValue(columns) {
     }
   }).join(" ");
 }
-const HorizontalGrid$1 = "_HorizontalGrid_vzocn_5";
+const HorizontalGrid$1 = "_HorizontalGrid_1wcnj_5";
 const styles = {
   HorizontalGrid: HorizontalGrid$1
 };
-const HorizontalGrid = forwardRef(
-  (props, ref) => {
-    const {
-      alignItems,
-      as: As = "div",
-      children,
-      columns,
-      gap,
-      inline
-    } = props;
-    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getResponsiveValue(
-      "horizontal-grid",
-      "grid-template-columns",
-      formatHorizontalGrid(columns)
-    )), getResponsiveDesignToken("horizontal-grid", "gap", "space", gap)), getComponentToken("horizontal-grid", "align-items", alignItems)), getComponentToken(
-      "horizontal-grid",
-      "display",
-      inline ? "inline-grid" : "grid"
-    ));
-    return /* @__PURE__ */ React__default.createElement(As, { className: styles.HorizontalGrid, style, ref }, children);
-  }
-);
+const HorizontalGrid = forwardRef((props, ref) => {
+  const { alignItems, as: As = "div", children, columns, gap, inline } = props;
+  const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getResponsiveValue("horizontal-grid", "grid-template-columns", formatHorizontalGrid(columns))), getResponsiveDesignToken("horizontal-grid", "gap", "space", gap)), getComponentToken("horizontal-grid", "align-items", alignItems)), getComponentToken("horizontal-grid", "display", inline ? "inline-grid" : "grid"));
+  return React__default.createElement(As, {
+    className: styles.HorizontalGrid,
+    style,
+    ref
+  }, children);
+});
 HorizontalGrid.displayName = "HorizontalGrid";
 export {
   HorizontalGrid

package/HorizontalStack/index.js

@@ -1,6 +1,50 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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 HorizontalStack = require("../__chunks__/HorizontalStack-a862839b.js");
-require("react");
-require("../utilities/css.js");
-exports.HorizontalStack = HorizontalStack.HorizontalStack;
+const React = require("react");
+const utilities_css = require("../utilities/css.js");
+const HorizontalStack$1 = "_HorizontalStack_7gzzs_5";
+const styles = {
+  HorizontalStack: HorizontalStack$1
+};
+const HorizontalStack = React.forwardRef((props, ref) => {
+  const _a = props, { as: As = "div", align, blockAlign, gap, wrap = true, children, inline } = _a, restProps = __objRest(_a, ["as", "align", "blockAlign", "gap", "wrap", "children", "inline"]);
+  const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, utilities_css.getResponsiveDesignToken("horizontal-stack", "gap", "space", gap)), utilities_css.getComponentToken("horizontal-stack", "align", align)), utilities_css.getComponentToken("horizontal-stack", "block-align", blockAlign)), utilities_css.getComponentToken("horizontal-stack", "wrap", wrap ? "wrap" : "nowrap")), utilities_css.getComponentToken("horizontal-stack", "display", inline ? "inline-flex" : "flex"));
+  return React.createElement(As, __spreadProps(__spreadValues({}, restProps), {
+    className: styles.HorizontalStack,
+    style,
+    ref
+  }), children);
+});
+HorizontalStack.displayName = "HorizontalStack";
+exports.HorizontalStack = HorizontalStack;

package/HorizontalStack/index.mjs

@@ -1,6 +1,50 @@
-import { H } from "../__chunks__/HorizontalStack-a441c63f.mjs";
-import "react";
-import "../utilities/css.mjs";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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 React__default, { forwardRef } from "react";
+import { getResponsiveDesignToken, getComponentToken } from "../utilities/css.mjs";
+const HorizontalStack$1 = "_HorizontalStack_7gzzs_5";
+const styles = {
+  HorizontalStack: HorizontalStack$1
+};
+const HorizontalStack = forwardRef((props, ref) => {
+  const _a = props, { as: As = "div", align, blockAlign, gap, wrap = true, children, inline } = _a, restProps = __objRest(_a, ["as", "align", "blockAlign", "gap", "wrap", "children", "inline"]);
+  const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getResponsiveDesignToken("horizontal-stack", "gap", "space", gap)), getComponentToken("horizontal-stack", "align", align)), getComponentToken("horizontal-stack", "block-align", blockAlign)), getComponentToken("horizontal-stack", "wrap", wrap ? "wrap" : "nowrap")), getComponentToken("horizontal-stack", "display", inline ? "inline-flex" : "flex"));
+  return React__default.createElement(As, __spreadProps(__spreadValues({}, restProps), {
+    className: styles.HorizontalStack,
+    style,
+    ref
+  }), children);
+});
+HorizontalStack.displayName = "HorizontalStack";
 export {
-  H as HorizontalStack
+  HorizontalStack
 };

package/Icon/Icon.d.ts

@@ -13,5 +13,56 @@ export type IconProps = {
     /** Description of icon for informative symbols */
     accessibilityLabel?: string;
 };
+/**
+ * Icons are helpful and familiar visual symbols used to communicate
+ * ideas and represent objects and actions.
+ *
+ * @remarks
+ * Can accept any Easy UI icon via `symbol` prop. Supports customizable
+ * responsive sizing, theme and design token colors, and an accessibility
+ * label for informative symbols.
+ *
+ * @example
+ * _Default:_
+ * ```tsx
+ * import { Icon } from "@easypost/easy-ui/Icon";
+ * import AddIcon from "@easypost/easy-ui-icons/Add";
+ *
+ * export function Component() {
+ *  return <Icon symbol={AddIcon} />;
+ * }
+ * ```
+ *
+ * @example
+ * _With accessibility label:_
+ * ```tsx
+ * import { Icon } from "@easypost/easy-ui/Icon";
+ * import AddIcon from "@easypost/easy-ui-icons/Add";
+ *
+ * export function Component() {
+ *  return <Icon symbol={AddIcon} accessibilityLabel="Add item" />;
+ * }
+ * ```
+ * @example
+ * _With color and size:_
+ * ```tsx
+ * import { Icon } from "@easypost/easy-ui/Icon";
+ * import AddIcon from "@easypost/easy-ui-icons/Add";
+ *
+ * export function Component() {
+ *  return <Icon symbol={AddIcon} color="success.inverse" size="sm" />;
+ * }
+ * ```
+ * @example
+ * _With responsive sizing:_
+ * ```tsx
+ * import { Icon } from "@easypost/easy-ui/Icon";
+ * import AddIcon from "@easypost/easy-ui-icons/Add";
+ *
+ * export function Component() {
+ *  return <Icon symbol={AddIcon} size={{ sm: "sm", md: "md", lg: "lg" }} />;
+ * }
+ * ```
+ */
 export declare function Icon({ symbol: Symbol, size, color, accessibilityLabel, }: IconProps): React.JSX.Element;
 //# sourceMappingURL=Icon.d.ts.map

package/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,UAAU,EACV,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,UAAU,CAAC;AAClB,OAAO,EAGL,cAAc,EACf,MAAM,kBAAkB,CAAC;AAI1B,MAAM,MAAM,QAAQ,GAAG,oBAAoB,CAAC,WAAW,CAAC,CAAC;AACzD,MAAM,MAAM,SAAS,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;AAE1D,MAAM,MAAM,SAAS,GAAG;IACtB,0DAA0D;IAC1D,MAAM,EAAE,UAAU,CAAC;IACnB,uBAAuB;IACvB,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAChC,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,wBAAgB,IAAI,CAAC,EACnB,MAAM,EAAE,MAAM,EACd,IAAW,EACX,KAAK,EACL,kBAAkB,GACnB,EAAE,SAAS,qBAgBX"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,UAAU,EACV,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,UAAU,CAAC;AAClB,OAAO,EAGL,cAAc,EACf,MAAM,kBAAkB,CAAC;AAI1B,MAAM,MAAM,QAAQ,GAAG,oBAAoB,CAAC,WAAW,CAAC,CAAC;AACzD,MAAM,MAAM,SAAS,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;AAE1D,MAAM,MAAM,SAAS,GAAG;IACtB,0DAA0D;IAC1D,MAAM,EAAE,UAAU,CAAC;IACnB,uBAAuB;IACvB,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAChC,wBAAwB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,IAAI,CAAC,EACnB,MAAM,EAAE,MAAM,EACd,IAAW,EACX,KAAK,EACL,kBAAkB,GACnB,EAAE,SAAS,qBAgBX"}

package/Icon/index.js

@@ -1,6 +1,40 @@
 "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;
+};
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Icon = require("../__chunks__/Icon-3d00481a.js");
-require("react");
-require("../utilities/css.js");
-exports.Icon = Icon.Icon;
+const React = require("react");
+const utilities_css = require("../utilities/css.js");
+const Icon$1 = "_Icon_1i611_5";
+const Svg = "_Svg_1i611_54";
+const styles = {
+  Icon: Icon$1,
+  Svg
+};
+function Icon({ symbol: Symbol2, size = "md", color, accessibilityLabel }) {
+  const style = __spreadValues(__spreadValues({}, utilities_css.getComponentThemeToken("icon", "color", "color.text", color)), utilities_css.getResponsiveDesignToken("icon", "size", "size.icon", size));
+  return React.createElement("span", {
+    className: styles.Icon,
+    style
+  }, React.createElement(Symbol2, {
+    className: styles.Svg,
+    focusable: "false",
+    role: "img",
+    title: accessibilityLabel,
+    "aria-hidden": !accessibilityLabel ? "true" : void 0
+  }));
+}
+exports.Icon = Icon;

package/Icon/index.mjs

@@ -1,6 +1,40 @@
-import { I } from "../__chunks__/Icon-a75b5201.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;
+};
+import React__default from "react";
+import { getComponentThemeToken, getResponsiveDesignToken } from "../utilities/css.mjs";
+const Icon$1 = "_Icon_1i611_5";
+const Svg = "_Svg_1i611_54";
+const styles = {
+  Icon: Icon$1,
+  Svg
+};
+function Icon({ symbol: Symbol2, size = "md", color, accessibilityLabel }) {
+  const style = __spreadValues(__spreadValues({}, getComponentThemeToken("icon", "color", "color.text", color)), getResponsiveDesignToken("icon", "size", "size.icon", size));
+  return React__default.createElement("span", {
+    className: styles.Icon,
+    style
+  }, React__default.createElement(Symbol2, {
+    className: styles.Svg,
+    focusable: "false",
+    role: "img",
+    title: accessibilityLabel,
+    "aria-hidden": !accessibilityLabel ? "true" : void 0
+  }));
+}
 export {
-  I as Icon
+  Icon
 };

package/IconButton/IconButton.d.ts

@@ -15,6 +15,68 @@ export type IconButtonProps = AriaButtonProps & {
     /** Disables button */
     isDisabled?: boolean;
 };
+/**
+ * Button element that represents its behavior with a contextually
+ * appropriate icon instead of text.
+ *
+ * @remarks
+ * Use to communicate an action the user can take in order to continue
+ * flow in the UI. Supports multiple colors, an outlined variation, and
+ * an accessibility label that describes the icon. Underlying element
+ * is a button.
+ *
+ * @example
+ * _Default:_
+ * ```tsx
+ * import { IconButton } from "@easypost/easy-ui/IconButton";
+ * import ArrowBackIcon from "@easypost/easy-ui-icons/ArrowBack";
+ *
+ * export function Component() {
+ *  return (
+ *    <IconButton
+ *      onPress={() => alert("clicked")}
+ *      icon={ArrowBackIcon}
+ *      accessibilityLabel="Back"
+ *    />
+ *  );
+ * }
+ * ```
+ *
+ * @example
+ * _Outlined variant:_
+ * ```tsx
+ * import { IconButton } from "@easypost/easy-ui/IconButton";
+ * import ArrowBackIcon from "@easypost/easy-ui-icons/ArrowBack";
+ *
+ * export function Component() {
+ *  return (
+ *    <IconButton
+ *      onPress={() => alert("clicked")}
+ *      icon={ArrowBackIcon}
+ *      accessibilityLabel="Back"
+ *      variant="outlined"
+ *    />
+ *  );
+ * }
+ * ```
+ * @example
+ * _Success color:_
+ * ```tsx
+ * import { IconButton } from "@easypost/easy-ui/IconButton";
+ * import ArrowBackIcon from "@easypost/easy-ui-icons/ArrowBack";
+ *
+ * export function Component() {
+ *  return (
+ *    <IconButton
+ *      onPress={() => alert("clicked")}
+ *      icon={ArrowBackIcon}
+ *      accessibilityLabel="Back"
+ *      color="success"
+ *    />
+ *  );
+ * }
+ * ```
+ */
 export declare const IconButton: React.ForwardRefExoticComponent<AriaButtonProps<"button"> & {
     /** Button color */
     color?: ButtonColor | undefined;

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,eAAO,MAAM,UAAU;IAZrB,mBAAmB;;IAEnB,qBAAqB;;IAErB,kBAAkB;UACZ,UAAU;IAChB,0BAA0B;wBACN,MAAM;IAC1B,sBAAsB;;8BA+BtB,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;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;;IAEnB,qBAAqB;;IAErB,kBAAkB;UACZ,UAAU;IAChB,0BAA0B;wBACN,MAAM;IAC1B,sBAAsB;;8BA6FtB,CAAC"}

package/IconButton/index.js

@@ -29,23 +29,23 @@ 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 Text = require("../__chunks__/Text-1ae70c19.js");
+const UnstyledButton_index = require("../__chunks__/index-3985350a.js");
+const Icon_index = require("../Icon/index.js");
+const Text_index = require("../Text/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 IconButton$1 = "_IconButton_9zpqn_5";
-const colorPrimary = "_colorPrimary_9zpqn_20";
-const colorSecondary = "_colorSecondary_9zpqn_28";
-const colorSuccess = "_colorSuccess_9zpqn_36";
-const colorWarning = "_colorWarning_9zpqn_44";
-const colorNeutral = "_colorNeutral_9zpqn_52";
-const colorSupport = "_colorSupport_9zpqn_60";
-const colorInverse = "_colorInverse_9zpqn_66";
-const variantOutlined = "_variantOutlined_9zpqn_72";
-const variantFilled = "_variantFilled_9zpqn_103";
+require("../__chunks__/import-2b302763.js");
+const IconButton$1 = "_IconButton_1yv50_5";
+const colorPrimary = "_colorPrimary_1yv50_20";
+const colorSecondary = "_colorSecondary_1yv50_28";
+const colorSuccess = "_colorSuccess_1yv50_36";
+const colorWarning = "_colorWarning_1yv50_44";
+const colorNeutral = "_colorNeutral_1yv50_52";
+const colorSupport = "_colorSupport_1yv50_60";
+const colorInverse = "_colorInverse_1yv50_66";
+const variantOutlined = "_variantOutlined_1yv50_72";
+const variantFilled = "_variantFilled_1yv50_103";
 const styles = {
   IconButton: IconButton$1,
   colorPrimary,
@@ -59,34 +59,17 @@ const styles = {
   variantFilled
 };
 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"
-  ]);
-  UnstyledButton.logWarningIfInvalidColorVariantCombination(color, variant);
-  return /* @__PURE__ */ 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)]
-      )
-    }, restProps),
-    /* @__PURE__ */ React.createElement(Text.Text, { visuallyHidden: true }, accessibilityLabel),
-    /* @__PURE__ */ React.createElement(Icon.Icon, { symbol: icon })
-  );
+  const _a = props, { color = "primary", variant = "filled", icon, accessibilityLabel, isDisabled = false } = _a, restProps = __objRest(_a, ["color", "variant", "icon", "accessibilityLabel", "isDisabled"]);
+  UnstyledButton_index.logWarningIfInvalidColorVariantCombination(color, variant);
+  return React.createElement(UnstyledButton_index.UnstyledButton, __spreadValues({
+    isDisabled,
+    ref: inRef,
+    className: utilities_css.classNames(styles.IconButton, styles[utilities_css.variationName("variant", variant)], styles[utilities_css.variationName("color", color)])
+  }, restProps), React.createElement(Text_index.Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React.createElement(Icon_index.Icon, {
+    symbol: icon
+  }));
 });
 IconButton.displayName = "IconButton";
 exports.IconButton = IconButton;

package/IconButton/index.mjs

@@ -27,23 +27,23 @@ 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 { T as Text } from "../__chunks__/Text-4ae50d5c.mjs";
+import { l as logWarningIfInvalidColorVariantCombination, U as UnstyledButton } from "../__chunks__/index-29d7bca9.mjs";
+import { Icon } from "../Icon/index.mjs";
+import { Text } from "../Text/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 IconButton$1 = "_IconButton_9zpqn_5";
-const colorPrimary = "_colorPrimary_9zpqn_20";
-const colorSecondary = "_colorSecondary_9zpqn_28";
-const colorSuccess = "_colorSuccess_9zpqn_36";
-const colorWarning = "_colorWarning_9zpqn_44";
-const colorNeutral = "_colorNeutral_9zpqn_52";
-const colorSupport = "_colorSupport_9zpqn_60";
-const colorInverse = "_colorInverse_9zpqn_66";
-const variantOutlined = "_variantOutlined_9zpqn_72";
-const variantFilled = "_variantFilled_9zpqn_103";
+import "../__chunks__/import-3d962a94.mjs";
+const IconButton$1 = "_IconButton_1yv50_5";
+const colorPrimary = "_colorPrimary_1yv50_20";
+const colorSecondary = "_colorSecondary_1yv50_28";
+const colorSuccess = "_colorSuccess_1yv50_36";
+const colorWarning = "_colorWarning_1yv50_44";
+const colorNeutral = "_colorNeutral_1yv50_52";
+const colorSupport = "_colorSupport_1yv50_60";
+const colorInverse = "_colorInverse_1yv50_66";
+const variantOutlined = "_variantOutlined_1yv50_72";
+const variantFilled = "_variantFilled_1yv50_103";
 const styles = {
   IconButton: IconButton$1,
   colorPrimary,
@@ -57,34 +57,17 @@ const styles = {
   variantFilled
 };
 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, accessibilityLabel, isDisabled = false } = _a, restProps = __objRest(_a, ["color", "variant", "icon", "accessibilityLabel", "isDisabled"]);
   logWarningIfInvalidColorVariantCombination(color, variant);
-  return /* @__PURE__ */ React__default.createElement(
-    UnstyledButton,
-    __spreadValues({
-      isDisabled,
-      ref: inRef,
-      className: classNames(
-        styles.IconButton,
-        styles[variationName("variant", variant)],
-        styles[variationName("color", color)]
-      )
-    }, restProps),
-    /* @__PURE__ */ React__default.createElement(Text, { visuallyHidden: true }, accessibilityLabel),
-    /* @__PURE__ */ React__default.createElement(Icon, { symbol: icon })
-  );
+  return React__default.createElement(UnstyledButton, __spreadValues({
+    isDisabled,
+    ref: inRef,
+    className: classNames(styles.IconButton, styles[variationName("variant", variant)], styles[variationName("color", color)])
+  }, restProps), React__default.createElement(Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React__default.createElement(Icon, {
+    symbol: icon
+  }));
 });
 IconButton.displayName = "IconButton";
 export {

package/InputField/Label.d.ts

@@ -12,10 +12,10 @@ export type LabelProps = {
      */
     isLabelEmphasized?: boolean;
     /**
-     * Size of associated input.
+     * Size of associated field.
      * @default 'md'
      */
-    inputSize?: InputSize;
+    fieldSize?: InputSize;
     /**
      * Label text displays with error styles.
      * @default false