@easypost/easy-ui 1.0.0-alpha.8 → 1.0.0-alpha.80

package/HostedUILayout/HostedUILayoutActions.d.ts

@@ -0,0 +1,50 @@
+import React, { ReactNode } from "react";
+import { AriaLinkOptions, PressHookProps } from "react-aria";
+import { ButtonProps } from "../Button";
+import { IconSymbol } from "../types";
+export type HostedUILayoutActionsProps = {
+    /** Actions children. */
+    children: ReactNode;
+};
+export type HostedUILayoutActionBadgeProps = {
+    /** Badge children. */
+    children?: ReactNode;
+};
+export type HostedUILayoutMenuActionProps = {
+    /** Optional custom accessibility label describing the menu action. */
+    accessibilityLabel?: string;
+    /** Icon symbol for the action. */
+    iconSymbol: IconSymbol;
+    /** Badge for the action. */
+    renderBadge?: () => ReactNode;
+    /** Render the menu overlay. */
+    children: ReactNode;
+};
+export type HostedUILayoutLinkActionProps = {
+    /** Optional custom accessibility label describing the menu action. */
+    accessibilityLabel?: string;
+    /** Action link icon symbol. */
+    iconSymbol: IconSymbol;
+    /** Whether or not action link is selected. */
+    isSelected?: boolean;
+    /** Badge for the action. */
+    renderBadge?: () => ReactNode;
+} & AriaLinkOptions;
+export type HostedUILayoutButtonActionProps = {
+    /** Optional custom accessibility label describing the menu action. */
+    accessibilityLabel?: string;
+    /** Action button icon symbol. */
+    iconSymbol: IconSymbol;
+    /** Whether or not action button is selected. */
+    isSelected?: boolean;
+    /** Badge for the action. */
+    renderBadge?: () => ReactNode;
+} & ButtonProps & React.RefAttributes<HTMLButtonElement>;
+export declare function HostedUILayoutActions(props: HostedUILayoutActionsProps): React.JSX.Element;
+export declare function HostedUILayoutMenuAction(props: HostedUILayoutMenuActionProps): React.JSX.Element;
+export declare function HostedUILayoutLinkAction(props: HostedUILayoutLinkActionProps): React.JSX.Element;
+export declare function HostedUILayoutButtonAction(props: HostedUILayoutButtonActionProps): React.JSX.Element;
+export declare function HostedUILayoutActionBadge(props: HostedUILayoutActionBadgeProps): React.JSX.Element;
+/** TODO: Figure out how to work with UnstyledButton instead */
+export declare const PressableButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & PressHookProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=HostedUILayoutActions.d.ts.map

package/HostedUILayout/HostedUILayoutActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HostedUILayoutActions.d.ts","sourceRoot":"","sources":["../../src/HostedUILayout/HostedUILayoutActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,SAAS,EAIV,MAAM,OAAO,CAAC;AACf,OAAO,EACL,eAAe,EAEf,cAAc,EAKf,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAKxC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,MAAM,MAAM,0BAA0B,GAAG;IACvC,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,sBAAsB;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kCAAkC;IAClC,UAAU,EAAE,UAAU,CAAC;IACvB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,SAAS,CAAC;IAC9B,+BAA+B;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+BAA+B;IAC/B,UAAU,EAAE,UAAU,CAAC;IACvB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,SAAS,CAAC;CAC/B,GAAG,eAAe,CAAC;AAEpB,MAAM,MAAM,+BAA+B,GAAG;IAC5C,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iCAAiC;IACjC,UAAU,EAAE,UAAU,CAAC;IACvB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,SAAS,CAAC;CAC/B,GAAG,WAAW,GACb,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAEzC,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAOtE;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,qBAoC5E;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,qBA+B5E;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,+BAA+B,qBAyBvC;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,8BAA8B,qBAItC;AAED,+DAA+D;AAC/D,eAAO,MAAM,eAAe,kMAY1B,CAAC"}

package/HostedUILayout/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./HostedUILayout";
+//# sourceMappingURL=index.d.ts.map

package/HostedUILayout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/HostedUILayout/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/HostedUILayout/index.js

@@ -0,0 +1,195 @@
+"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 React = require("react");
+const EasyPostLogo = require("../__chunks__/EasyPostLogo-DQt5KlFX.js");
+const HorizontalStack = require("../__chunks__/HorizontalStack-CXpjASZi.js");
+const Button = require("../__chunks__/Button-2GplvjoR.js");
+const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
+const Menu = require("../__chunks__/Menu-CivAepFq.js");
+const Text = require("../__chunks__/Text-B1xglKFU.js");
+const utilities_css = require("../utilities/css.js");
+const useFocusRing = require("../__chunks__/useFocusRing-ygRrwBu3.js");
+const mergeProps = require("../__chunks__/mergeProps-d7wJkv71.js");
+const useHover = require("../__chunks__/useHover-BMIowV0x.js");
+const usePress = require("../__chunks__/usePress-Btah4Wrd.js");
+const useLink = require("../__chunks__/useLink-CcRvXaFq.js");
+const button = "_button_zvh9c_4";
+const focused = "_focused_zvh9c_26";
+const hovered = "_hovered_zvh9c_40";
+const selected = "_selected_zvh9c_45";
+const open = "_open_zvh9c_46";
+const badgeContainer = "_badgeContainer_zvh9c_51";
+const badge = "_badge_zvh9c_51";
+const styles$1 = {
+  button,
+  focused,
+  hovered,
+  selected,
+  open,
+  badgeContainer,
+  badge
+};
+function HostedUILayoutActions(props) {
+  const { children } = props;
+  return React.createElement(HorizontalStack.HorizontalStack, {
+    wrap: false,
+    gap: "1",
+    align: "end"
+  }, children);
+}
+function HostedUILayoutMenuAction(props) {
+  const { accessibilityLabel = "Actions", iconSymbol, children, renderBadge } = props;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const handleOpenChange = React.useCallback((isOpen2) => {
+    setIsOpen(isOpen2);
+  }, []);
+  const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f({});
+  const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456({});
+  const className = utilities_css.classNames(styles$1.button, isFocusVisible && styles$1.focused, isHovered && styles$1.hovered, isOpen && styles$1.open);
+  return React.createElement(Menu.Menu, {
+    isOpen,
+    onOpenChange: handleOpenChange
+  }, React.createElement(Menu.Menu.Trigger, null, React.createElement(PressableButton, __spreadValues({
+    className
+  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, hoverProps)), React.createElement(Text.Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React.createElement(Icon.Icon, {
+    symbol: iconSymbol
+  }), renderBadge && React.createElement("div", {
+    className: styles$1.badgeContainer
+  }, renderBadge()))), children);
+}
+function HostedUILayoutLinkAction(props) {
+  const { accessibilityLabel = "Actions", iconSymbol, renderBadge, isSelected } = props;
+  const ref = React.useRef(null);
+  const { linkProps } = useLink.$298d61e98472621b$export$dcf14c9974fe2767(props, ref);
+  const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f(props);
+  const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
+  const className = utilities_css.classNames(styles$1.button, isFocusVisible && styles$1.focused, isHovered && styles$1.hovered, isSelected && styles$1.selected);
+  return React.createElement("a", __spreadProps(__spreadValues({
+    ref,
+    className
+  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
+    "aria-current": isSelected ? "true" : void 0
+  }), React.createElement(Text.Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React.createElement(Icon.Icon, {
+    symbol: iconSymbol
+  }), renderBadge && React.createElement("div", {
+    className: styles$1.badgeContainer
+  }, renderBadge()));
+}
+function HostedUILayoutButtonAction(props) {
+  const _a = props, { accessibilityLabel = "Actions", iconSymbol, renderBadge, isSelected } = _a, buttonProps = __objRest(_a, ["accessibilityLabel", "iconSymbol", "renderBadge", "isSelected"]);
+  const ref = React.useRef(null);
+  const className = utilities_css.classNames(styles$1.button, isSelected && styles$1.selected);
+  return React.createElement(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, __spreadValues({
+    ref,
+    className,
+    "aria-current": isSelected ? "true" : void 0
+  }, buttonProps), React.createElement(Text.Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React.createElement(Icon.Icon, {
+    symbol: iconSymbol
+  }), renderBadge && React.createElement("div", {
+    className: styles$1.badgeContainer
+  }, renderBadge()));
+}
+function HostedUILayoutActionBadge(props) {
+  const { children } = props;
+  return React.createElement("div", {
+    className: styles$1.badge
+  }, children);
+}
+const PressableButton = React.forwardRef((props, ref) => {
+  const { pressProps } = usePress.$f6c31cce2adf654f$export$45712eceda6fad21(props);
+  return React.createElement("button", __spreadProps(__spreadValues({}, pressProps), {
+    ref,
+    className: utilities_css.classNames(pressProps.className)
+  }));
+});
+PressableButton.displayName = "PressableButton";
+const HostedUILayout$1 = "_HostedUILayout_1ls9o_4";
+const logo = "_logo_1ls9o_15";
+const header = "_header_1ls9o_19";
+const content = "_content_1ls9o_34";
+const styles = {
+  HostedUILayout: HostedUILayout$1,
+  logo,
+  header,
+  content
+};
+function HostedUILayout(props) {
+  const { children } = props;
+  return React.createElement("div", {
+    className: styles.HostedUILayout
+  }, children);
+}
+function HostedUILayoutHeader(props) {
+  const { children } = props;
+  return React.createElement("header", {
+    className: styles.header
+  }, children);
+}
+function HostedUILayoutLogo(props) {
+  const { children } = props;
+  return React.createElement("div", {
+    className: styles.logo
+  }, children);
+}
+function HostedUILayoutLogoContainer(props) {
+  const { children } = props;
+  return React.createElement(HorizontalStack.HorizontalStack, {
+    gap: "1",
+    blockAlign: "center",
+    align: "start",
+    wrap: false
+  }, React.createElement(HostedUILayoutLogo, null, React.createElement(EasyPostLogo.EasyPostLogo, null)), children);
+}
+function HostedUILayoutContent(props) {
+  const { children } = props;
+  return React.createElement("main", {
+    className: styles.content
+  }, children);
+}
+HostedUILayout.Header = HostedUILayoutHeader;
+HostedUILayout.Logo = HostedUILayoutLogo;
+HostedUILayout.LogoContainer = HostedUILayoutLogoContainer;
+HostedUILayout.Actions = HostedUILayoutActions;
+HostedUILayout.ActionBadge = HostedUILayoutActionBadge;
+HostedUILayout.MenuAction = HostedUILayoutMenuAction;
+HostedUILayout.LinkAction = HostedUILayoutLinkAction;
+HostedUILayout.ButtonAction = HostedUILayoutButtonAction;
+HostedUILayout.Content = HostedUILayoutContent;
+exports.HostedUILayout = HostedUILayout;

package/HostedUILayout/index.mjs

@@ -0,0 +1,195 @@
+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, { useState, useCallback, forwardRef, useRef } from "react";
+import { E as EasyPostLogo } from "../__chunks__/EasyPostLogo-B3Um5vvS.mjs";
+import { H as HorizontalStack } from "../__chunks__/HorizontalStack-CxE8tPx_.mjs";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../__chunks__/Button-BpGjkRZu.mjs";
+import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
+import { M as Menu } from "../__chunks__/Menu-CfHK_0Sr.mjs";
+import { T as Text } from "../__chunks__/Text-CX5GoBTS.mjs";
+import { classNames } from "../utilities/css.mjs";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../__chunks__/useFocusRing-DAMeUI3t.mjs";
+import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/mergeProps-CORsYhTp.mjs";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/useHover-CwJuylzq.mjs";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../__chunks__/usePress-BGHDb_ce.mjs";
+import { $ as $298d61e98472621b$export$dcf14c9974fe2767 } from "../__chunks__/useLink-CxFvWxcs.mjs";
+const button = "_button_zvh9c_4";
+const focused = "_focused_zvh9c_26";
+const hovered = "_hovered_zvh9c_40";
+const selected = "_selected_zvh9c_45";
+const open = "_open_zvh9c_46";
+const badgeContainer = "_badgeContainer_zvh9c_51";
+const badge = "_badge_zvh9c_51";
+const styles$1 = {
+  button,
+  focused,
+  hovered,
+  selected,
+  open,
+  badgeContainer,
+  badge
+};
+function HostedUILayoutActions(props) {
+  const { children } = props;
+  return React__default.createElement(HorizontalStack, {
+    wrap: false,
+    gap: "1",
+    align: "end"
+  }, children);
+}
+function HostedUILayoutMenuAction(props) {
+  const { accessibilityLabel = "Actions", iconSymbol, children, renderBadge } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const handleOpenChange = useCallback((isOpen2) => {
+    setIsOpen(isOpen2);
+  }, []);
+  const { focusProps, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f({});
+  const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({});
+  const className = classNames(styles$1.button, isFocusVisible && styles$1.focused, isHovered && styles$1.hovered, isOpen && styles$1.open);
+  return React__default.createElement(Menu, {
+    isOpen,
+    onOpenChange: handleOpenChange
+  }, React__default.createElement(Menu.Trigger, null, React__default.createElement(PressableButton, __spreadValues({
+    className
+  }, $3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, hoverProps)), React__default.createElement(Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React__default.createElement(Icon, {
+    symbol: iconSymbol
+  }), renderBadge && React__default.createElement("div", {
+    className: styles$1.badgeContainer
+  }, renderBadge()))), children);
+}
+function HostedUILayoutLinkAction(props) {
+  const { accessibilityLabel = "Actions", iconSymbol, renderBadge, isSelected } = props;
+  const ref = useRef(null);
+  const { linkProps } = $298d61e98472621b$export$dcf14c9974fe2767(props, ref);
+  const { focusProps, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f(props);
+  const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
+  const className = classNames(styles$1.button, isFocusVisible && styles$1.focused, isHovered && styles$1.hovered, isSelected && styles$1.selected);
+  return React__default.createElement("a", __spreadProps(__spreadValues({
+    ref,
+    className
+  }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
+    "aria-current": isSelected ? "true" : void 0
+  }), React__default.createElement(Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React__default.createElement(Icon, {
+    symbol: iconSymbol
+  }), renderBadge && React__default.createElement("div", {
+    className: styles$1.badgeContainer
+  }, renderBadge()));
+}
+function HostedUILayoutButtonAction(props) {
+  const _a = props, { accessibilityLabel = "Actions", iconSymbol, renderBadge, isSelected } = _a, buttonProps = __objRest(_a, ["accessibilityLabel", "iconSymbol", "renderBadge", "isSelected"]);
+  const ref = useRef(null);
+  const className = classNames(styles$1.button, isSelected && styles$1.selected);
+  return React__default.createElement($d2b4bc8c273e7be6$export$353f5b6fc5456de1, __spreadValues({
+    ref,
+    className,
+    "aria-current": isSelected ? "true" : void 0
+  }, buttonProps), React__default.createElement(Text, {
+    visuallyHidden: true
+  }, accessibilityLabel), React__default.createElement(Icon, {
+    symbol: iconSymbol
+  }), renderBadge && React__default.createElement("div", {
+    className: styles$1.badgeContainer
+  }, renderBadge()));
+}
+function HostedUILayoutActionBadge(props) {
+  const { children } = props;
+  return React__default.createElement("div", {
+    className: styles$1.badge
+  }, children);
+}
+const PressableButton = forwardRef((props, ref) => {
+  const { pressProps } = $f6c31cce2adf654f$export$45712eceda6fad21(props);
+  return React__default.createElement("button", __spreadProps(__spreadValues({}, pressProps), {
+    ref,
+    className: classNames(pressProps.className)
+  }));
+});
+PressableButton.displayName = "PressableButton";
+const HostedUILayout$1 = "_HostedUILayout_1ls9o_4";
+const logo = "_logo_1ls9o_15";
+const header = "_header_1ls9o_19";
+const content = "_content_1ls9o_34";
+const styles = {
+  HostedUILayout: HostedUILayout$1,
+  logo,
+  header,
+  content
+};
+function HostedUILayout(props) {
+  const { children } = props;
+  return React__default.createElement("div", {
+    className: styles.HostedUILayout
+  }, children);
+}
+function HostedUILayoutHeader(props) {
+  const { children } = props;
+  return React__default.createElement("header", {
+    className: styles.header
+  }, children);
+}
+function HostedUILayoutLogo(props) {
+  const { children } = props;
+  return React__default.createElement("div", {
+    className: styles.logo
+  }, children);
+}
+function HostedUILayoutLogoContainer(props) {
+  const { children } = props;
+  return React__default.createElement(HorizontalStack, {
+    gap: "1",
+    blockAlign: "center",
+    align: "start",
+    wrap: false
+  }, React__default.createElement(HostedUILayoutLogo, null, React__default.createElement(EasyPostLogo, null)), children);
+}
+function HostedUILayoutContent(props) {
+  const { children } = props;
+  return React__default.createElement("main", {
+    className: styles.content
+  }, children);
+}
+HostedUILayout.Header = HostedUILayoutHeader;
+HostedUILayout.Logo = HostedUILayoutLogo;
+HostedUILayout.LogoContainer = HostedUILayoutLogoContainer;
+HostedUILayout.Actions = HostedUILayoutActions;
+HostedUILayout.ActionBadge = HostedUILayoutActionBadge;
+HostedUILayout.MenuAction = HostedUILayoutMenuAction;
+HostedUILayout.LinkAction = HostedUILayoutLinkAction;
+HostedUILayout.ButtonAction = HostedUILayoutButtonAction;
+HostedUILayout.Content = HostedUILayoutContent;
+export {
+  HostedUILayout
+};

package/Icon/Icon.d.ts

@@ -1,10 +1,15 @@
 import React from "react";
-import { IconSymbol, ThemeTokenNamespace, DesignTokenNamespace } from "../types";
+import { DesignTokenNamespace, IconSymbol, ThemeColorAliases } from "../types";
 import { ResponsiveProp } from "../utilities/css";
 export type IconSize = DesignTokenNamespace<"size.icon">;
-export type IconColor = ThemeTokenNamespace<"color.text">;
+export type IconColor = ThemeColorAliases | "action" | "code.selector" | "danger" | "disabled" | "gray.resting" | "inverse" | "primary" | "primary-inverse";
 export type IconProps = {
-    /** Icon symbol SVG source from @easypost/easy-ui-icons */
+    /**
+     * Icon symbol.
+     *
+     * This can be an SVG source from @easypost/easy-ui-icons or a React
+     * element that renders to an img.
+     */
     symbol: IconSymbol;
     /** Size of the icon */
     size?: ResponsiveProp<IconSize>;
@@ -50,7 +55,7 @@ export type IconProps = {
  * import AddIcon from "@easypost/easy-ui-icons/Add";
  *
  * export function Component() {
- *  return <Icon symbol={AddIcon} color="success.inverse" size="sm" />;
+ *  return <Icon symbol={AddIcon} color="positive.600" size="sm" />;
  * }
  * ```
  * @example
@@ -63,6 +68,16 @@ export type IconProps = {
  *  return <Icon symbol={AddIcon} size={{ sm: "sm", md: "md", lg: "lg" }} />;
  * }
  * ```
+ * @example
+ * _With image symbol:_
+ * ```tsx
+ * import { Icon } from "@easypost/easy-ui/Icon";
+ *
+ * export function Component() {
+ *   const CarrierLogo = (props) => <img src="/carrier-logo.png" {...props} />;
+ *   return <Icon symbol={CarrierLogo} />;
+ * }
+ * ```
  */
 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,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,EAAE,oBAAoB,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC/E,OAAO,EACL,cAAc,EAIf,MAAM,kBAAkB,CAAC;AAI1B,MAAM,MAAM,QAAQ,GAAG,oBAAoB,CAAC,WAAW,CAAC,CAAC;AACzD,MAAM,MAAM,SAAS,GACjB,iBAAiB,GACjB,QAAQ,GACR,eAAe,GACf,QAAQ,GACR,UAAU,GACV,cAAc,GACd,SAAS,GACT,SAAS,GACT,iBAAiB,CAAC;AAEtB,MAAM,MAAM,SAAS,GAAG;IACtB;;;;;OAKG;IACH,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,wBAAgB,IAAI,CAAC,EACnB,MAAM,EAAE,MAAM,EACd,IAAW,EACX,KAAK,EACL,kBAAkB,GACnB,EAAE,SAAS,qBAqBX"}

package/Icon/Icon.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMlD,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AAEzC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAyB3B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}
+{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOlD,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AAEzC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA+B3B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}

package/Icon/index.js

@@ -1,40 +1,4 @@
 "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 React = require("react");
-const utilities_css = require("../utilities/css.js");
-const Icon$1 = "_Icon_1etrf_5";
-const Svg = "_Svg_1etrf_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;
+const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
+exports.Icon = Icon.Icon;

package/Icon/index.mjs

@@ -1,40 +1,4 @@
-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_1etrf_5";
-const Svg = "_Svg_1etrf_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
-  }));
-}
+import { I } from "../__chunks__/Icon-0SN9dbwU.mjs";
 export {
-  Icon
+  I as Icon
 };

package/IconButton/IconButton.d.ts

@@ -79,14 +79,14 @@ export type IconButtonProps = AriaButtonProps & {
  */
 export declare const IconButton: React.ForwardRefExoticComponent<AriaButtonProps<"button"> & {
     /** Button color */
-    color?: ButtonColor | undefined;
+    color?: ButtonColor;
     /** Button variant */
-    variant?: IconButtonVariant | undefined;
+    variant?: IconButtonVariant;
     /** Icon symbol */
     icon: IconSymbol;
     /** Description of icon */
     accessibilityLabel: string;
     /** Disables button */
-    isDisabled?: boolean | undefined;
+    isDisabled?: boolean;
 } & React.RefAttributes<null>>;
 //# sourceMappingURL=IconButton.d.ts.map

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;;IAEnB,qBAAqB;;IAErB,kBAAkB;UACZ,UAAU;IAChB,0BAA0B;wBACN,MAAM;IAC1B,sBAAsB;;8BA6FtB,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;YACX,WAAW;IACnB,qBAAqB;cACX,iBAAiB;IAC3B,kBAAkB;UACZ,UAAU;IAChB,0BAA0B;wBACN,MAAM;IAC1B,sBAAsB;iBACT,OAAO;8BA4FpB,CAAC"}

package/IconButton/IconButton.stories.d.ts

@@ -3,10 +3,10 @@ import { IconButton } from "./IconButton";
 type Story = StoryObj<typeof IconButton>;
 declare const meta: Meta<typeof IconButton>;
 export default meta;
-export declare const Controls: Story;
-export declare const FilledButtons: Story;
-export declare const OutlinedButtons: Story;
-export declare const InverseButton: Story;
-export declare const DisabledButtons: Story;
+export declare const Filled: Story;
+export declare const Outlined: Story;
+export declare const Inverse: Story;
+export declare const Disabled: Story;
 export declare const ClickEvent: Story;
+export declare const Controls: Story;
 //# sourceMappingURL=IconButton.stories.d.ts.map

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,kBAAkB,CAAC;AAOlD,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,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAW3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAiB7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,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,kBAAkB,CAAC;AASlD,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"}