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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @easypost/easy-ui
 
+## 1.0.0-alpha.82
+
+### Patch Changes
+
+- Updated dependencies [58b4d44]
+  - @easypost/easy-ui-icons@1.0.0-alpha.41
+
+## 1.0.0-alpha.81
+
+### Minor Changes
+
+- 5710284: feat: support test mode and displaying logo for HostedUILayout
+
+### Patch Changes
+
+- Updated dependencies [5710284]
+  - @easypost/easy-ui-icons@1.0.0-alpha.40
+
 ## 1.0.0-alpha.80
 
 ### Patch Changes

package/HostedUILayout/HostedUILayout.d.ts

@@ -1,6 +1,19 @@
 import React, { ReactNode } from "react";
 import { HostedUILayoutActionBadge, HostedUILayoutActions, HostedUILayoutButtonAction, HostedUILayoutLinkAction, HostedUILayoutMenuAction } from "./HostedUILayoutActions";
+export type Mode = "test" | "production";
 export type HostedUILayoutProps = {
+    /**
+     * 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;
 };
@@ -20,12 +33,20 @@ export type HostedUILayoutContentProps = {
     /** Content children. */
     children: ReactNode;
 };
+export type HostedUILayoutContextType = {
+    shouldDisplayEasyPostLogo?: boolean;
+    mode?: Mode;
+};
+export declare const useHostedUILayout: () => HostedUILayoutContextType;
 /**
  * `HostedUILayout` defines a header and main content area for a HostedUI product page.
  *
+ * @remarks
+ * `HostedUILayout` can be combined with `MultipageSection` to render a multipage navigational container.
+ *
  * @example
  * ```tsx
- * <HostedUILayout>
+ * <HostedUILayout mode="test">
  *   <HostedUILayout.Header>
  *    <HostedUILayout.LogoContainer>
  *      <HostedUILayout.Logo>

package/HostedUILayout/HostedUILayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HostedUILayout.d.ts","sourceRoot":"","sources":["../../src/HostedUILayout/HostedUILayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EACL,yBAAyB,EACzB,qBAAqB,EACrB,0BAA0B,EAC1B,wBAAwB,EACxB,wBAAwB,EACzB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,mBAAmB,GAAG;IAChC,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C,8BAA8B;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAGxD;yBAHe,cAAc;;;;;;;;;;;AAK9B,iBAAS,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBAG7D;AAED,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAIzD;AAED,iBAAS,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,qBAU3E;AAED,iBAAS,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAG/D"}
+{"version":3,"file":"HostedUILayout.d.ts","sourceRoot":"","sources":["../../src/HostedUILayout/HostedUILayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAM9D,OAAO,EACL,yBAAyB,EACzB,qBAAqB,EACrB,0BAA0B,EAC1B,wBAAwB,EACxB,wBAAwB,EACzB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,IAAI,GAAG,MAAM,GAAG,YAAY,CAAC;AAEzC,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;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,yBAAyB,GAAG;IACtC,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C,8BAA8B;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAKF,eAAO,MAAM,iBAAiB,iCAM7B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAexD;yBAfe,cAAc;;;;;;;;;;;AA8B9B,iBAAS,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,qBAU7D;AAED,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAIzD;AAED,iBAAS,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,qBAa3E;AAED,iBAAS,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAG/D"}

package/HostedUILayout/HostedUILayout.stories.d.ts

@@ -4,5 +4,7 @@ type Story = StoryObj<typeof HostedUILayout>;
 declare const meta: Meta<typeof HostedUILayout>;
 export default meta;
 export declare const StandardContent: Story;
+export declare const TestMode: Story;
+export declare const DisplayEasyPostLogo: Story;
 export declare const WithMultipageSection: Story;
 //# sourceMappingURL=HostedUILayout.stories.d.ts.map

package/HostedUILayout/HostedUILayout.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HostedUILayout.stories.d.ts","sourceRoot":"","sources":["../../src/HostedUILayout/HostedUILayout.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOlD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAUrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,eAAe,EAAE,KA4B7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAoFlC,CAAC"}
+{"version":3,"file":"HostedUILayout.stories.d.ts","sourceRoot":"","sources":["../../src/HostedUILayout/HostedUILayout.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOlD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAUrC,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/HostedUILayout/index.js

@@ -34,16 +34,70 @@ 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 Text = require("../__chunks__/Text-B1xglKFU.js");
 const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
+const Button = require("../__chunks__/Button-2GplvjoR.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");
+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";
@@ -140,27 +194,66 @@ const PressableButton = React.forwardRef((props, ref) => {
   }));
 });
 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 HostedUILayout$1 = "_HostedUILayout_ikal9_4";
+const logo = "_logo_ikal9_15";
+const testModeBanner = "_testModeBanner_ikal9_19";
+const header = "_header_ikal9_27";
+const logoAndActions = "_logoAndActions_ikal9_37";
+const content = "_content_ikal9_45";
 const styles = {
   HostedUILayout: HostedUILayout$1,
   logo,
+  testModeBanner,
   header,
+  logoAndActions,
   content
 };
+const HostedUILayoutContext = React.createContext(null);
+const useHostedUILayout = () => {
+  const context = React.useContext(HostedUILayoutContext);
+  if (!context) {
+    throw new Error("useHostedUILayout must be used within a HostedUILayout");
+  }
+  return context;
+};
 function HostedUILayout(props) {
-  const { children } = props;
-  return React.createElement("div", {
+  const { children, mode = "production", shouldDisplayEasyPostLogo = true } = props;
+  const context = React.useMemo(() => {
+    return {
+      mode,
+      shouldDisplayEasyPostLogo
+    };
+  }, [mode, shouldDisplayEasyPostLogo]);
+  return React.createElement(HostedUILayoutContext.Provider, {
+    value: context
+  }, React.createElement("div", {
     className: styles.HostedUILayout
-  }, children);
+  }, children));
+}
+function TestModeBanner() {
+  return React.createElement("div", {
+    className: styles.testModeBanner
+  }, React.createElement(HorizontalStack.HorizontalStack, {
+    gap: "1",
+    blockAlign: "center"
+  }, React.createElement(Icon.Icon, {
+    symbol: Experiment,
+    color: "primary.700",
+    size: "lg"
+  }), React.createElement(Text.Text, {
+    variant: "subtitle1",
+    color: "warning.900"
+  }, "This Environment is in Test Mode")));
 }
 function HostedUILayoutHeader(props) {
   const { children } = props;
+  const { mode } = useHostedUILayout();
+  const isTestMode = mode === "test";
   return React.createElement("header", {
     className: styles.header
-  }, children);
+  }, isTestMode && React.createElement(TestModeBanner, null), React.createElement("div", {
+    className: styles.logoAndActions
+  }, children));
 }
 function HostedUILayoutLogo(props) {
   const { children } = props;
@@ -170,12 +263,13 @@ function HostedUILayoutLogo(props) {
 }
 function HostedUILayoutLogoContainer(props) {
   const { children } = props;
+  const { shouldDisplayEasyPostLogo } = useHostedUILayout();
   return React.createElement(HorizontalStack.HorizontalStack, {
     gap: "1",
     blockAlign: "center",
     align: "start",
     wrap: false
-  }, React.createElement(HostedUILayoutLogo, null, React.createElement(EasyPostLogo.EasyPostLogo, null)), children);
+  }, shouldDisplayEasyPostLogo && React.createElement(HostedUILayoutLogo, null, React.createElement(EasyPostLogo.EasyPostLogo, null)), children);
 }
 function HostedUILayoutContent(props) {
   const { children } = props;
@@ -193,3 +287,4 @@ HostedUILayout.LinkAction = HostedUILayoutLinkAction;
 HostedUILayout.ButtonAction = HostedUILayoutButtonAction;
 HostedUILayout.Content = HostedUILayoutContent;
 exports.HostedUILayout = HostedUILayout;
+exports.useHostedUILayout = useHostedUILayout;

package/HostedUILayout/index.mjs

@@ -29,19 +29,57 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React__default, { useState, useCallback, forwardRef, useRef } from "react";
+import * as React from "react";
+import React__default, { useState, useCallback, forwardRef, useRef, useContext, useMemo } 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 { T as Text } from "../__chunks__/Text-CX5GoBTS.mjs";
 import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../__chunks__/Button-BpGjkRZu.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";
+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.createElement("svg", __spreadValues2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 -960 960 960",
+    "aria-labelledby": titleId
+  }, props), title ? React.createElement("title", {
+    id: titleId
+  }, title) : null, React.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";
@@ -138,27 +176,66 @@ const PressableButton = forwardRef((props, ref) => {
   }));
 });
 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 HostedUILayout$1 = "_HostedUILayout_ikal9_4";
+const logo = "_logo_ikal9_15";
+const testModeBanner = "_testModeBanner_ikal9_19";
+const header = "_header_ikal9_27";
+const logoAndActions = "_logoAndActions_ikal9_37";
+const content = "_content_ikal9_45";
 const styles = {
   HostedUILayout: HostedUILayout$1,
   logo,
+  testModeBanner,
   header,
+  logoAndActions,
   content
 };
+const HostedUILayoutContext = React__default.createContext(null);
+const useHostedUILayout = () => {
+  const context = useContext(HostedUILayoutContext);
+  if (!context) {
+    throw new Error("useHostedUILayout must be used within a HostedUILayout");
+  }
+  return context;
+};
 function HostedUILayout(props) {
-  const { children } = props;
-  return React__default.createElement("div", {
+  const { children, mode = "production", shouldDisplayEasyPostLogo = true } = props;
+  const context = useMemo(() => {
+    return {
+      mode,
+      shouldDisplayEasyPostLogo
+    };
+  }, [mode, shouldDisplayEasyPostLogo]);
+  return React__default.createElement(HostedUILayoutContext.Provider, {
+    value: context
+  }, React__default.createElement("div", {
     className: styles.HostedUILayout
-  }, children);
+  }, children));
+}
+function TestModeBanner() {
+  return React__default.createElement("div", {
+    className: styles.testModeBanner
+  }, React__default.createElement(HorizontalStack, {
+    gap: "1",
+    blockAlign: "center"
+  }, React__default.createElement(Icon, {
+    symbol: Experiment,
+    color: "primary.700",
+    size: "lg"
+  }), React__default.createElement(Text, {
+    variant: "subtitle1",
+    color: "warning.900"
+  }, "This Environment is in Test Mode")));
 }
 function HostedUILayoutHeader(props) {
   const { children } = props;
+  const { mode } = useHostedUILayout();
+  const isTestMode = mode === "test";
   return React__default.createElement("header", {
     className: styles.header
-  }, children);
+  }, isTestMode && React__default.createElement(TestModeBanner, null), React__default.createElement("div", {
+    className: styles.logoAndActions
+  }, children));
 }
 function HostedUILayoutLogo(props) {
   const { children } = props;
@@ -168,12 +245,13 @@ function HostedUILayoutLogo(props) {
 }
 function HostedUILayoutLogoContainer(props) {
   const { children } = props;
+  const { shouldDisplayEasyPostLogo } = useHostedUILayout();
   return React__default.createElement(HorizontalStack, {
     gap: "1",
     blockAlign: "center",
     align: "start",
     wrap: false
-  }, React__default.createElement(HostedUILayoutLogo, null, React__default.createElement(EasyPostLogo, null)), children);
+  }, shouldDisplayEasyPostLogo && React__default.createElement(HostedUILayoutLogo, null, React__default.createElement(EasyPostLogo, null)), children);
 }
 function HostedUILayoutContent(props) {
   const { children } = props;
@@ -191,5 +269,6 @@ HostedUILayout.LinkAction = HostedUILayoutLinkAction;
 HostedUILayout.ButtonAction = HostedUILayoutButtonAction;
 HostedUILayout.Content = HostedUILayoutContent;
 export {
-  HostedUILayout
+  HostedUILayout,
+  useHostedUILayout
 };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@easypost/easy-ui",
-  "version": "1.0.0-alpha.80",
+  "version": "1.0.0-alpha.82",
   "sideEffects": [
     "**/*.css"
   ],
   "dependencies": {
-    "@easypost/easy-ui-icons": "1.0.0-alpha.39",
+    "@easypost/easy-ui-icons": "1.0.0-alpha.41",
     "@easypost/easy-ui-tokens": "1.0.0-alpha.16",
     "@react-aria/toast": "^3.0.1",
     "@react-aria/utils": "^3.28.2",

package/style.css

@@ -4839,7 +4839,7 @@ textarea {
 }/**
  * Do not edit directly, this file was auto-generated.
  */
-._HostedUILayout_1ls9o_4 {
+._HostedUILayout_ikal9_4 {
   --ezui-c-hostedui-layout-max-width: 1369px;
   display: flex;
   flex-direction: column;
@@ -4850,26 +4850,37 @@ textarea {
   background-position: -40px -90px, calc(100% + 24px) calc(100% + 24px);
 }
 
-._logo_1ls9o_15 {
+._logo_ikal9_15 {
   display: inline-flex;
 }
 
-._header_1ls9o_19 {
+._testModeBanner_ikal9_19 {
+  width: 100%;
+  background: var(--ezui-color-warning-100);
+  padding: var(--ezui-space-1) var(--ezui-space-2) var(--ezui-space-1) var(--ezui-space-1);
+  border-radius: 0 0 var(--ezui-shape-border-radius-lg) var(--ezui-shape-border-radius-lg);
+  box-shadow: var(--ezui-shadow-level-1);
+}
+
+._header_ikal9_27 {
   z-index: var(--ezui-z-index-nav);
   position: sticky;
   top: 0;
+  min-width: 0;
+  background-color: var(--ezui-color-neutral-050);
+  border-bottom: 1px solid var(--ezui-color-neutral-300);
+  padding: 0 var(--ezui-space-3);
+}
+
+._logoAndActions_ikal9_37 {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: space-between;
-  min-width: 0;
-  background-color: var(--ezui-color-neutral-050);
-  border-bottom: 1px solid var(--ezui-color-neutral-300);
   height: var(--ezui-space-7);
-  padding: 0 var(--ezui-space-3);
 }
 
-._content_1ls9o_34 {
+._content_ikal9_45 {
   padding: var(--ezui-space-3);
   max-width: var(--ezui-c-hostedui-layout-max-width);
   width: 100%;