@easypost/easy-ui 1.0.0-alpha.12 → 1.0.0-alpha.121

package/CustomerPortalLayout/CustomerPortalLayout.d.ts

@@ -0,0 +1,97 @@
+import React, { ReactNode } from "react";
+import { CustomerPortalLayoutActionBadge, CustomerPortalLayoutActions, CustomerPortalLayoutButtonAction, CustomerPortalLayoutLinkAction, CustomerPortalLayoutMenuAction } from "./CustomerPortalLayoutActions";
+export type Mode = "test" | "production";
+export type CustomerPortalLayoutProps = {
+    /**
+     * Displays a prominent message with an icon when in test mode.
+     *
+     * @default production
+     */
+    mode?: Mode;
+    /**
+     * Controls whether the EasyPost logo displays.
+     *
+     * @default true
+     */
+    shouldDisplayEasyPostLogo?: boolean;
+    /** Layout children. */
+    children: ReactNode;
+};
+export type CustomerPortalLayoutHeaderProps = {
+    /** Header children. */
+    children: ReactNode;
+};
+export type CustomerPortalLayoutLogoContainerProps = {
+    /** Logo container children */
+    children: ReactNode;
+};
+export type CustomerPortalLayoutLogoProps = {
+    /** Logo children. */
+    children: ReactNode;
+};
+export type CustomerPortalLayoutContentProps = {
+    /** Content children. */
+    children: ReactNode;
+};
+export type CustomerPortalLayoutContextType = {
+    shouldDisplayEasyPostLogo?: boolean;
+    mode?: Mode;
+};
+export declare const useCustomerPortalLayout: () => CustomerPortalLayoutContextType;
+/**
+ * `CustomerPortalLayout` defines a header and main content area for a CustomerPortal product page.
+ *
+ * @remarks
+ * `CustomerPortalLayout` can be combined with `MultipageSection` to render a multipage navigational container.
+ *
+ * @example
+ * ```tsx
+ * <CustomerPortalLayout mode="test">
+ *   <CustomerPortalLayout.Header>
+ *    <CustomerPortalLayout.LogoContainer>
+ *      <CustomerPortalLayout.Logo>
+ *        <SomeLogo />
+ *      </CustomerPortalLayout.Logo>
+ *    </CustomerPortalLayout.LogoContainer>
+ *    <CustomerPortalLayout.Actions>
+ *      <CustomerPortalLayout.MenuAction
+ *        accessibilityLabel="Menu Action"
+ *        iconSymbol={Icon}
+ *        renderBadge={() => <CustomerPortalLayout.ActionBadge />}
+ *      >
+ *        <Menu.Overlay onAction={() => {}}>
+ *          <Menu.Item>Action 1</Menu.Item>
+ *          <Menu.Item>Action 2</Menu.Item>
+ *        </Menu.Overlay>
+ *      </CustomerPortalLayout.MenuAction>
+ *      <CustomerPortalLayout.ButtonAction
+ *        accessibilityLabel="Button Action"
+ *        iconSymbol={Icon}
+ *        onPress={() => {}}
+ *      />
+ *    </CustomerPortalLayout.Actions>
+ *   </CustomerPortalLayout.Header>
+ *     <CustomerPortalLayout.Content>
+ *        CustomerPortal Content
+ *     </CustomerPortalLayout.Content>
+ *  </CustomerPortalLayout>
+ * ```
+ */
+export declare function CustomerPortalLayout(props: CustomerPortalLayoutProps): React.JSX.Element;
+export declare namespace CustomerPortalLayout {
+    var Header: typeof CustomerPortalLayoutHeader;
+    var Logo: typeof CustomerPortalLayoutLogo;
+    var LogoContainer: typeof CustomerPortalLayoutLogoContainer;
+    var Actions: typeof CustomerPortalLayoutActions;
+    var ActionBadge: typeof CustomerPortalLayoutActionBadge;
+    var MenuAction: typeof CustomerPortalLayoutMenuAction;
+    var LinkAction: typeof CustomerPortalLayoutLinkAction;
+    var ButtonAction: typeof CustomerPortalLayoutButtonAction;
+    var Content: typeof CustomerPortalLayoutContent;
+}
+declare function CustomerPortalLayoutHeader(props: CustomerPortalLayoutHeaderProps): React.JSX.Element;
+declare function CustomerPortalLayoutLogo(props: CustomerPortalLayoutLogoProps): React.JSX.Element;
+declare function CustomerPortalLayoutLogoContainer(props: CustomerPortalLayoutLogoContainerProps): React.JSX.Element;
+declare function CustomerPortalLayoutContent(props: CustomerPortalLayoutContentProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=CustomerPortalLayout.d.ts.map

package/CustomerPortalLayout/CustomerPortalLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomerPortalLayout.d.ts","sourceRoot":"","sources":["../../src/CustomerPortalLayout/CustomerPortalLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAM9D,OAAO,EACL,+BAA+B,EAC/B,2BAA2B,EAC3B,gCAAgC,EAChC,8BAA8B,EAC9B,8BAA8B,EAC/B,MAAM,+BAA+B,CAAC;AAIvC,MAAM,MAAM,IAAI,GAAG,MAAM,GAAG,YAAY,CAAC;AAEzC,MAAM,MAAM,yBAAyB,GAAG;IACtC;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,sCAAsC,GAAG;IACnD,8BAA8B;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAKF,eAAO,MAAM,uBAAuB,uCAQnC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBAepE;yBAfe,oBAAoB;;;;;;;;;;;AA8BpC,iBAAS,0BAA0B,CAAC,KAAK,EAAE,+BAA+B,qBAUzE;AAED,iBAAS,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,qBAIrE;AAED,iBAAS,iCAAiC,CACxC,KAAK,EAAE,sCAAsC,qBAc9C;AAED,iBAAS,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,qBAG3E"}

package/CustomerPortalLayout/CustomerPortalLayout.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { CustomerPortalLayout } from "./CustomerPortalLayout";
+type Story = StoryObj<typeof CustomerPortalLayout>;
+declare const meta: Meta<typeof CustomerPortalLayout>;
+export default meta;
+export declare const StandardContent: Story;
+export declare const TestMode: Story;
+export declare const DisplayEasyPostLogo: Story;
+export declare const WithMultipageSection: Story;
+//# sourceMappingURL=CustomerPortalLayout.stories.d.ts.map

package/CustomerPortalLayout/CustomerPortalLayout.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomerPortalLayout.stories.d.ts","sourceRoot":"","sources":["../../src/CustomerPortalLayout/CustomerPortalLayout.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAOvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAEnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAU3C,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,eAAe,EAAE,KA4B7B,CAAC;AACF,eAAO,MAAM,QAAQ,EAAE,KA4BtB,CAAC;AACF,eAAO,MAAM,mBAAmB,EAAE,KA4BjC,CAAC;AAIF,eAAO,MAAM,oBAAoB,EAAE,KAoFlC,CAAC"}

package/CustomerPortalLayout/CustomerPortalLayout.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CustomerPortalLayout.test.d.ts.map

package/CustomerPortalLayout/CustomerPortalLayout.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomerPortalLayout.test.d.ts","sourceRoot":"","sources":["../../src/CustomerPortalLayout/CustomerPortalLayout.test.tsx"],"names":[],"mappings":""}

package/CustomerPortalLayout/CustomerPortalLayoutActions.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 CustomerPortalLayoutActionsProps = {
+    /** Actions children. */
+    children: ReactNode;
+};
+export type CustomerPortalLayoutActionBadgeProps = {
+    /** Badge children. */
+    children?: ReactNode;
+};
+export type CustomerPortalLayoutMenuActionProps = {
+    /** 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 CustomerPortalLayoutLinkActionProps = {
+    /** 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 CustomerPortalLayoutButtonActionProps = {
+    /** 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 CustomerPortalLayoutActions(props: CustomerPortalLayoutActionsProps): React.JSX.Element;
+export declare function CustomerPortalLayoutMenuAction(props: CustomerPortalLayoutMenuActionProps): React.JSX.Element;
+export declare function CustomerPortalLayoutLinkAction(props: CustomerPortalLayoutLinkActionProps): React.JSX.Element;
+export declare function CustomerPortalLayoutButtonAction(props: CustomerPortalLayoutButtonActionProps): React.JSX.Element;
+export declare function CustomerPortalLayoutActionBadge(props: CustomerPortalLayoutActionBadgeProps): 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=CustomerPortalLayoutActions.d.ts.map

package/CustomerPortalLayout/CustomerPortalLayoutActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomerPortalLayoutActions.d.ts","sourceRoot":"","sources":["../../src/CustomerPortalLayout/CustomerPortalLayoutActions.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,gCAAgC,GAAG;IAC7C,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oCAAoC,GAAG;IACjD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG;IAChD,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,mCAAmC,GAAG;IAChD,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,qCAAqC,GAAG;IAClD,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,2BAA2B,CACzC,KAAK,EAAE,gCAAgC,qBAQxC;AAED,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,mCAAmC,qBAqC3C;AAED,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,mCAAmC,qBAgC3C;AAED,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,qCAAqC,qBAyB7C;AAED,wBAAgB,+BAA+B,CAC7C,KAAK,EAAE,oCAAoC,qBAI5C;AAED,+DAA+D;AAC/D,eAAO,MAAM,eAAe,kMAY1B,CAAC"}

package/CustomerPortalLayout/index.d.ts

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

package/CustomerPortalLayout/index.d.ts.map

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

package/CustomerPortalLayout/index.js

@@ -0,0 +1,319 @@
+"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 jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const EasyPostLogo = require("../__chunks__/EasyPostLogo-C9-Q0lSn.js");
+const HorizontalStack = require("../__chunks__/HorizontalStack-CWdKKY8L.js");
+const Text = require("../__chunks__/Text-DkzMEqky.js");
+const Icon = require("../__chunks__/Icon-BRlbo3RF.js");
+const Button = require("../__chunks__/Button-BpQFyL49.js");
+const Menu = require("../__chunks__/Menu-MGDv1tob.js");
+const utilities_css = require("../utilities/css.js");
+const useFocusRing = require("../__chunks__/useFocusRing-DbC9E5wC.js");
+const mergeProps = require("../__chunks__/mergeProps-DLPcevok.js");
+const useHover = require("../__chunks__/useHover-Ck1otl-j.js");
+const usePress = require("../__chunks__/usePress-B5G5CgVn.js");
+const useLink = require("../__chunks__/useLink-CChqhQkC.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {})) if (__hasOwnProp2.call(b, prop)) __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2) for (var prop of __getOwnPropSymbols2(b)) {
+    if (__propIsEnum2.call(b, prop)) __defNormalProp2(a, prop, b[prop]);
+  }
+  return a;
+};
+var __objRest2 = (source, exclude) => {
+  var target = {};
+  for (var prop in source) if (__hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols2) for (var prop of __getOwnPropSymbols2(source)) {
+    if (exclude.indexOf(prop) < 0 && __propIsEnum2.call(source, prop)) target[prop] = source[prop];
+  }
+  return target;
+};
+const Experiment = (_a) => {
+  var _b = _a, { title, titleId } = _b, props = __objRest2(_b, ["title", "titleId"]);
+  return React__namespace.createElement("svg", __spreadValues2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 -960 960 960",
+    "aria-labelledby": titleId
+  }, props), title ? React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, React__namespace.createElement("path", {
+    d: "M179.69-140q-31.76 0-45.15-29.39-13.38-29.38 8.69-53.69l245.69-282.69v-268.84h-56.61q-9.65 0-16.17-6.59-6.52-6.58-6.52-16.3 0-9.73 6.52-16.11 6.52-6.39 16.17-6.39h295.38q9.65 0 16.17 6.58 6.52 6.58 6.52 16.31 0 9.73-6.52 16.11-6.52 6.39-16.17 6.39h-56.61v268.84l245.69 282.69q22.07 24.31 8.69 53.69Q812.07-140 780.31-140H179.69Zm72.7-78.08h455.22L554.15-396.54h-148.3L252.39-218.08Zm-81.62 32.69h618.46L525.69-489.15v-285.46h-91.38v285.46L170.77-185.39ZM480-480Z"
+  }));
+};
+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 CustomerPortalLayoutActions(props) {
+  const { children } = props;
+  return jsxRuntime.jsx(HorizontalStack.HorizontalStack, {
+    wrap: false,
+    gap: "1",
+    align: "end",
+    children
+  });
+}
+function CustomerPortalLayoutMenuAction(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 jsxRuntime.jsxs(Menu.Menu, {
+    isOpen,
+    onOpenChange: handleOpenChange,
+    children: [jsxRuntime.jsx(Menu.Menu.Trigger, {
+      children: jsxRuntime.jsxs(PressableButton, __spreadProps(__spreadValues({
+        className
+      }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, hoverProps)), {
+        children: [jsxRuntime.jsx(Text.Text, {
+          visuallyHidden: true,
+          children: accessibilityLabel
+        }), jsxRuntime.jsx(Icon.Icon, {
+          symbol: iconSymbol
+        }), renderBadge && jsxRuntime.jsx("div", {
+          className: styles$1.badgeContainer,
+          children: renderBadge()
+        })]
+      }))
+    }), children]
+  });
+}
+function CustomerPortalLayoutLinkAction(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 jsxRuntime.jsxs("a", __spreadProps(__spreadValues({
+    ref,
+    className
+  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
+    "aria-current": isSelected ? "true" : void 0,
+    children: [jsxRuntime.jsx(Text.Text, {
+      visuallyHidden: true,
+      children: accessibilityLabel
+    }), jsxRuntime.jsx(Icon.Icon, {
+      symbol: iconSymbol
+    }), renderBadge && jsxRuntime.jsx("div", {
+      className: styles$1.badgeContainer,
+      children: renderBadge()
+    })]
+  }));
+}
+function CustomerPortalLayoutButtonAction(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 jsxRuntime.jsxs(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, __spreadProps(__spreadValues({
+    ref,
+    className,
+    "aria-current": isSelected ? "true" : void 0
+  }, buttonProps), {
+    children: [jsxRuntime.jsx(Text.Text, {
+      visuallyHidden: true,
+      children: accessibilityLabel
+    }), jsxRuntime.jsx(Icon.Icon, {
+      symbol: iconSymbol
+    }), renderBadge && jsxRuntime.jsx("div", {
+      className: styles$1.badgeContainer,
+      children: renderBadge()
+    })]
+  }));
+}
+function CustomerPortalLayoutActionBadge(props) {
+  const { children } = props;
+  return jsxRuntime.jsx("div", {
+    className: styles$1.badge,
+    children
+  });
+}
+const PressableButton = React.forwardRef((props, ref) => {
+  const { pressProps } = usePress.$f6c31cce2adf654f$export$45712eceda6fad21(props);
+  return jsxRuntime.jsx("button", __spreadProps(__spreadValues({}, pressProps), {
+    ref,
+    className: utilities_css.classNames(pressProps.className)
+  }));
+});
+PressableButton.displayName = "PressableButton";
+const CustomerPortalLayout$1 = "_CustomerPortalLayout_h0niy_4";
+const logo = "_logo_h0niy_15";
+const testModeBanner = "_testModeBanner_h0niy_19";
+const header = "_header_h0niy_27";
+const logoAndActions = "_logoAndActions_h0niy_37";
+const content = "_content_h0niy_45";
+const styles = {
+  CustomerPortalLayout: CustomerPortalLayout$1,
+  logo,
+  testModeBanner,
+  header,
+  logoAndActions,
+  content
+};
+const CustomerPortalLayoutContext = React.createContext(null);
+const useCustomerPortalLayout = () => {
+  const context = React.useContext(CustomerPortalLayoutContext);
+  if (!context) {
+    throw new Error("useCustomerPortalLayout must be used within a CustomerPortalLayout");
+  }
+  return context;
+};
+function CustomerPortalLayout(props) {
+  const { children, mode = "production", shouldDisplayEasyPostLogo = true } = props;
+  const context = React.useMemo(() => {
+    return {
+      mode,
+      shouldDisplayEasyPostLogo
+    };
+  }, [mode, shouldDisplayEasyPostLogo]);
+  return jsxRuntime.jsx(CustomerPortalLayoutContext.Provider, {
+    value: context,
+    children: jsxRuntime.jsx("div", {
+      className: styles.CustomerPortalLayout,
+      children
+    })
+  });
+}
+function TestModeBanner() {
+  return jsxRuntime.jsx("div", {
+    className: styles.testModeBanner,
+    children: jsxRuntime.jsxs(HorizontalStack.HorizontalStack, {
+      gap: "1",
+      blockAlign: "center",
+      children: [jsxRuntime.jsx(Icon.Icon, {
+        symbol: Experiment,
+        color: "primary.700",
+        size: "lg"
+      }), jsxRuntime.jsx(Text.Text, {
+        variant: "subtitle1",
+        color: "warning.900",
+        children: "This Environment is in Test Mode"
+      })]
+    })
+  });
+}
+function CustomerPortalLayoutHeader(props) {
+  const { children } = props;
+  const { mode } = useCustomerPortalLayout();
+  const isTestMode = mode === "test";
+  return jsxRuntime.jsxs("header", {
+    className: styles.header,
+    children: [isTestMode && jsxRuntime.jsx(TestModeBanner, {}), jsxRuntime.jsx("div", {
+      className: styles.logoAndActions,
+      children
+    })]
+  });
+}
+function CustomerPortalLayoutLogo(props) {
+  const { children } = props;
+  return jsxRuntime.jsx("div", {
+    className: styles.logo,
+    children
+  });
+}
+function CustomerPortalLayoutLogoContainer(props) {
+  const { children } = props;
+  const { shouldDisplayEasyPostLogo } = useCustomerPortalLayout();
+  return jsxRuntime.jsxs(HorizontalStack.HorizontalStack, {
+    gap: "1",
+    blockAlign: "center",
+    align: "start",
+    wrap: false,
+    children: [shouldDisplayEasyPostLogo && jsxRuntime.jsx(CustomerPortalLayoutLogo, {
+      children: jsxRuntime.jsx(EasyPostLogo.EasyPostLogo, {})
+    }), children]
+  });
+}
+function CustomerPortalLayoutContent(props) {
+  const { children } = props;
+  return jsxRuntime.jsx("main", {
+    className: styles.content,
+    children
+  });
+}
+CustomerPortalLayout.Header = CustomerPortalLayoutHeader;
+CustomerPortalLayout.Logo = CustomerPortalLayoutLogo;
+CustomerPortalLayout.LogoContainer = CustomerPortalLayoutLogoContainer;
+CustomerPortalLayout.Actions = CustomerPortalLayoutActions;
+CustomerPortalLayout.ActionBadge = CustomerPortalLayoutActionBadge;
+CustomerPortalLayout.MenuAction = CustomerPortalLayoutMenuAction;
+CustomerPortalLayout.LinkAction = CustomerPortalLayoutLinkAction;
+CustomerPortalLayout.ButtonAction = CustomerPortalLayoutButtonAction;
+CustomerPortalLayout.Content = CustomerPortalLayoutContent;
+exports.CustomerPortalLayout = CustomerPortalLayout;
+exports.useCustomerPortalLayout = useCustomerPortalLayout;