@easypost/easy-ui 1.0.0-alpha.61 → 1.0.0-alpha.63

package/ForgeLayout/index.mjs

@@ -29,27 +29,225 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React__default, { useState, useCallback, useRef, forwardRef, useContext, useMemo } from "react";
+import React__default, { createContext, forwardRef, useContext, useRef, useState, useCallback, useMemo, Fragment } from "react";
 import { classNames, variationName } from "../utilities/css.mjs";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../__chunks__/Button-DcYNVtp7.mjs";
-import { H as HorizontalStack } from "../__chunks__/HorizontalStack-BDZp8p9E.mjs";
-import { I as Icon } from "../__chunks__/Icon-BdtOD2WX.mjs";
-import { M as Menu } from "../__chunks__/Menu-LzJveIa-.mjs";
-import { T as Text } from "../__chunks__/Text-CQ_8wg0t.mjs";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../__chunks__/useFocusRing-BUwbt1Yv.mjs";
+import { $ as $f39a9eba43920ace$export$b5d7cc18bb8d2b59, a as $d2b4bc8c273e7be6$export$24d547caef80ccd1, b as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../__chunks__/Button-CDRssWxC.mjs";
+import { H as HorizontalStack } from "../__chunks__/HorizontalStack-F_QqY0Nh.mjs";
+import { I as Icon } from "../__chunks__/Icon-BP2sMOEQ.mjs";
+import { $ as $a28c903ee9ad8dc5$export$79fefeb1c2091ac3, M as Menu } from "../__chunks__/Menu-BTop6cMU.mjs";
+import { T as Text } from "../__chunks__/Text-D_RgAqQT.mjs";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../__chunks__/useFocusRing-YOWeCHgO.mjs";
 import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/useHover-BOYR4wqI.mjs";
-import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../__chunks__/usePress-BAsZaqDB.mjs";
-import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/mergeProps-T961Q1yJ.mjs";
-import { $ as $298d61e98472621b$export$dcf14c9974fe2767 } from "../__chunks__/useLink-B_g4ae9e.mjs";
-import { V as VerticalStack } from "../__chunks__/VerticalStack-eKUWFHU3.mjs";
-const button = "_button_1t3wf_5";
-const focused$1 = "_focused_1t3wf_26";
-const hovered$1 = "_hovered_1t3wf_40";
-const selected$1 = "_selected_1t3wf_45";
-const open = "_open_1t3wf_46";
-const badgeContainer = "_badgeContainer_1t3wf_51";
-const badge = "_badge_1t3wf_51";
-const styles$2 = {
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../__chunks__/usePress-Db4pSZfY.mjs";
+import { d as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, $ as $3ef42575df84b30b$export$9d1611c77c2fe928, c as $bdb11010cef70236$export$f680877a34711e37 } from "../__chunks__/mergeProps-DSi85raC.mjs";
+import { $ as $298d61e98472621b$export$dcf14c9974fe2767 } from "../__chunks__/useLink-xdTgcuUM.mjs";
+import { V as VerticalStack } from "../__chunks__/VerticalStack-jXfiEwjb.mjs";
+import { $ as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$45fda7c47f93fd48, c as $64fa3d84918910a7$export$6d3443f2c48bfc20, a as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $64fa3d84918910a7$export$2881499e37b75b9a, e as $64fa3d84918910a7$export$c62b8e45d58ddad9 } from "../__chunks__/utils-D4ddhsBL.mjs";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../__chunks__/filterDOMProps-EDDcM64A.mjs";
+import { c as $fc909762b330b746$export$61c6a8c84e605fb6, d as $337b884510726a0d$export$c6fdb837b070b4ff, e as $f1ab8c75478c6f73$export$3351871ee4b288b8 } from "../__chunks__/Overlay-DyfvFsGi.mjs";
+import { $ as $f2f8a6077418541e$export$542a6fd13ac93354, a as $86ea4cb521eb2e37$export$2317d149ed6f78c4 } from "../__chunks__/utilities-DASknbaa.mjs";
+import { $ as $628037886ba31236$export$f9d5c8beee7d008d } from "../__chunks__/useOverlayTrigger-DDcXdZOM.mjs";
+import { $ as $40df3f8667284809$export$d55e7ee900f34e93 } from "../__chunks__/useDialog-c-C07qhw.mjs";
+import { A as ArrowBack } from "../__chunks__/ArrowBack-BFS-tCpV.mjs";
+import { S as Search } from "../__chunks__/Search-Cyblmqo5.mjs";
+import { E as ExpandMore400 } from "../__chunks__/ExpandMore400-CH7GNxqk.mjs";
+import { U as UnstyledButton } from "../__chunks__/UnstyledButton-Ctqv-3bt.mjs";
+import { R as RadioGroup, u as useRadioGroupContext } from "../__chunks__/RadioGroup-BGkcZ05k.mjs";
+import { T as TextField } from "../__chunks__/TextField-CTG1CCY2.mjs";
+import { flattenChildren } from "../utilities/react.mjs";
+createContext(null);
+createContext(null);
+createContext(null);
+createContext(null);
+createContext(null);
+const $4e85f108e88277b8$export$d688439359537581 = createContext({});
+const $44f671af83e7d9e0$export$2de4954e8ae13b9f = /* @__PURE__ */ createContext({
+  placement: "bottom"
+});
+const $07b14b47974efb58$export$9b9a0cd73afb7ca4 = /* @__PURE__ */ createContext(null);
+function $07b14b47974efb58$var$Popover(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $07b14b47974efb58$export$9b9a0cd73afb7ca4);
+  let contextState = useContext($de32f1b87079253c$export$d2f961adcb0afbe);
+  let localState = $fc909762b330b746$export$61c6a8c84e605fb6(props);
+  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
+  let isExiting = $64fa3d84918910a7$export$45fda7c47f93fd48(ref, state.isOpen) || props.isExiting || false;
+  let isHidden = $f39a9eba43920ace$export$b5d7cc18bb8d2b59();
+  if (isHidden) {
+    let children = props.children;
+    if (typeof children === "function") children = children({
+      trigger: props.trigger || null,
+      placement: "bottom",
+      isEntering: false,
+      isExiting: false,
+      defaultChildren: null
+    });
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
+  }
+  if (state && !state.isOpen && !isExiting) return null;
+  return /* @__PURE__ */ React__default.createElement($07b14b47974efb58$var$PopoverInner, __spreadProps(__spreadValues({}, props), {
+    triggerRef: props.triggerRef,
+    state,
+    popoverRef: ref,
+    isExiting
+  }));
+}
+const $07b14b47974efb58$export$5b6b19405a83ff9d = /* @__PURE__ */ forwardRef($07b14b47974efb58$var$Popover);
+function $07b14b47974efb58$var$PopoverInner(_a) {
+  var _b = _a, { state, isExiting, UNSTABLE_portalContainer } = _b, props = __objRest(_b, ["state", "isExiting", "UNSTABLE_portalContainer"]);
+  let arrowRef = useRef(null);
+  let [arrowWidth, setArrowWidth] = useState(0);
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    if (arrowRef.current && state.isOpen) setArrowWidth(arrowRef.current.getBoundingClientRect().width);
+  }, [
+    state.isOpen,
+    arrowRef
+  ]);
+  var _props_offset;
+  let { popoverProps, underlayProps, arrowProps, placement } = $f2f8a6077418541e$export$542a6fd13ac93354(__spreadProps(__spreadValues({}, props), {
+    offset: (_props_offset = props.offset) !== null && _props_offset !== void 0 ? _props_offset : 8,
+    arrowSize: arrowWidth
+  }), state);
+  let ref = props.popoverRef;
+  let isEntering = $64fa3d84918910a7$export$6d3443f2c48bfc20(ref, !!placement) || props.isEntering || false;
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3(__spreadProps(__spreadValues({}, props), {
+    defaultClassName: "react-aria-Popover",
+    values: {
+      trigger: props.trigger || null,
+      placement,
+      isEntering,
+      isExiting
+    }
+  }));
+  let style = __spreadValues(__spreadValues({}, popoverProps.style), renderProps.style);
+  return /* @__PURE__ */ React__default.createElement($337b884510726a0d$export$c6fdb837b070b4ff, __spreadProps(__spreadValues({}, props), {
+    isExiting,
+    portalContainer: UNSTABLE_portalContainer
+  }), !props.isNonModal && state.isOpen && /* @__PURE__ */ React__default.createElement("div", __spreadProps(__spreadValues({
+    "data-testid": "underlay"
+  }, underlayProps), {
+    style: {
+      position: "fixed",
+      inset: 0
+    }
+  })), /* @__PURE__ */ React__default.createElement("div", __spreadProps(__spreadValues(__spreadValues({}, $3ef42575df84b30b$export$9d1611c77c2fe928($65484d02dcb7eb3e$export$457c3d6518dd4c6f(props), popoverProps)), renderProps), {
+    ref,
+    slot: props.slot || void 0,
+    style,
+    "data-trigger": props.trigger,
+    "data-placement": placement,
+    "data-entering": isEntering || void 0,
+    "data-exiting": isExiting || void 0
+  }), !props.isNonModal && /* @__PURE__ */ React__default.createElement($86ea4cb521eb2e37$export$2317d149ed6f78c4, {
+    onDismiss: state.close
+  }), /* @__PURE__ */ React__default.createElement($44f671af83e7d9e0$export$2de4954e8ae13b9f.Provider, {
+    value: __spreadProps(__spreadValues({}, arrowProps), {
+      placement,
+      ref: arrowRef
+    })
+  }, renderProps.children), /* @__PURE__ */ React__default.createElement($86ea4cb521eb2e37$export$2317d149ed6f78c4, {
+    onDismiss: state.close
+  })));
+}
+const $3674c52c6b3c5bce$export$795aec4671cbae19 = /* @__PURE__ */ createContext(null);
+const $de32f1b87079253c$export$8b93a07348a7730c = /* @__PURE__ */ createContext(null);
+const $de32f1b87079253c$export$d2f961adcb0afbe = /* @__PURE__ */ createContext(null);
+function $de32f1b87079253c$export$2e1e1122cf0cba88(props) {
+  let state = $a28c903ee9ad8dc5$export$79fefeb1c2091ac3(props);
+  let buttonRef = useRef(null);
+  let { triggerProps, overlayProps } = $628037886ba31236$export$f9d5c8beee7d008d({
+    type: "dialog"
+  }, state, buttonRef);
+  triggerProps.id = $bdb11010cef70236$export$f680877a34711e37();
+  overlayProps["aria-labelledby"] = triggerProps.id;
+  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $de32f1b87079253c$export$d2f961adcb0afbe,
+        state
+      ],
+      [
+        $3674c52c6b3c5bce$export$795aec4671cbae19,
+        state
+      ],
+      [
+        $de32f1b87079253c$export$8b93a07348a7730c,
+        overlayProps
+      ],
+      [
+        $07b14b47974efb58$export$9b9a0cd73afb7ca4,
+        {
+          trigger: "DialogTrigger",
+          triggerRef: buttonRef
+        }
+      ]
+    ]
+  }, /* @__PURE__ */ React__default.createElement($f1ab8c75478c6f73$export$3351871ee4b288b8, __spreadProps(__spreadValues({}, triggerProps), {
+    ref: buttonRef,
+    isPressed: state.isOpen
+  }), props.children));
+}
+function $de32f1b87079253c$var$Dialog(props, ref) {
+  let originalAriaLabelledby = props["aria-labelledby"];
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $de32f1b87079253c$export$8b93a07348a7730c);
+  let { dialogProps, titleProps } = $40df3f8667284809$export$d55e7ee900f34e93(__spreadProps(__spreadValues({}, props), {
+    // Only pass aria-labelledby from props, not context.
+    // Context is used as a fallback below.
+    "aria-labelledby": originalAriaLabelledby
+  }), ref);
+  let state = useContext($de32f1b87079253c$export$d2f961adcb0afbe);
+  if (!dialogProps["aria-label"] && !dialogProps["aria-labelledby"]) {
+    if (props["aria-labelledby"]) dialogProps["aria-labelledby"] = props["aria-labelledby"];
+    else console.warn('If a Dialog does not contain a <Heading slot="title">, it must have an aria-label or aria-labelledby attribute for accessibility.');
+  }
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    defaultClassName: "react-aria-Dialog",
+    className: props.className,
+    style: props.style,
+    children: props.children,
+    values: {
+      close: (state === null || state === void 0 ? void 0 : state.close) || (() => {
+      })
+    }
+  });
+  return /* @__PURE__ */ React__default.createElement("section", __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props)), dialogProps), renderProps), {
+    ref,
+    slot: props.slot || void 0
+  }), /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $4e85f108e88277b8$export$d688439359537581,
+        {
+          slots: {
+            [$64fa3d84918910a7$export$c62b8e45d58ddad9]: {},
+            title: __spreadProps(__spreadValues({}, titleProps), {
+              level: 2
+            })
+          }
+        }
+      ],
+      [
+        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
+        {
+          slots: {
+            [$64fa3d84918910a7$export$c62b8e45d58ddad9]: {},
+            close: {
+              onPress: () => state === null || state === void 0 ? void 0 : state.close()
+            }
+          }
+        }
+      ]
+    ]
+  }, renderProps.children));
+}
+const $de32f1b87079253c$export$3ddf2d174ce01153 = /* @__PURE__ */ forwardRef($de32f1b87079253c$var$Dialog);
+const button = "_button_15pb8_5";
+const focused$1 = "_focused_15pb8_26";
+const hovered$1 = "_hovered_15pb8_40";
+const selected$1 = "_selected_15pb8_45";
+const open = "_open_15pb8_46";
+const badgeContainer = "_badgeContainer_15pb8_51";
+const badge = "_badge_15pb8_51";
+const styles$4 = {
   button,
   focused: focused$1,
   hovered: hovered$1,
@@ -74,7 +272,7 @@ function ForgeLayoutMenuAction(props) {
   }, []);
   const { focusProps, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f({});
   const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({});
-  const className = classNames(styles$2.button, isFocusVisible && styles$2.focused, isHovered && styles$2.hovered, isOpen && styles$2.open);
+  const className = classNames(styles$4.button, isFocusVisible && styles$4.focused, isHovered && styles$4.hovered, isOpen && styles$4.open);
   return React__default.createElement(Menu, {
     isOpen,
     onOpenChange: handleOpenChange
@@ -85,7 +283,7 @@ function ForgeLayoutMenuAction(props) {
   }, accessibilityLabel), React__default.createElement(Icon, {
     symbol: iconSymbol
   }), renderBadge && React__default.createElement("div", {
-    className: styles$2.badgeContainer
+    className: styles$4.badgeContainer
   }, renderBadge()))), children);
 }
 function ForgeLayoutLinkAction(props) {
@@ -94,7 +292,7 @@ function ForgeLayoutLinkAction(props) {
   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$2.button, isFocusVisible && styles$2.focused, isHovered && styles$2.hovered, isSelected && styles$2.selected);
+  const className = classNames(styles$4.button, isFocusVisible && styles$4.focused, isHovered && styles$4.hovered, isSelected && styles$4.selected);
   return React__default.createElement("a", __spreadProps(__spreadValues({
     ref,
     className
@@ -105,13 +303,13 @@ function ForgeLayoutLinkAction(props) {
   }, accessibilityLabel), React__default.createElement(Icon, {
     symbol: iconSymbol
   }), renderBadge && React__default.createElement("div", {
-    className: styles$2.badgeContainer
+    className: styles$4.badgeContainer
   }, renderBadge()));
 }
 function ForgeLayoutButtonAction(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$2.button, isSelected && styles$2.selected);
+  const className = classNames(styles$4.button, isSelected && styles$4.selected);
   return React__default.createElement($d2b4bc8c273e7be6$export$353f5b6fc5456de1, __spreadValues({
     ref,
     className,
@@ -121,13 +319,13 @@ function ForgeLayoutButtonAction(props) {
   }, accessibilityLabel), React__default.createElement(Icon, {
     symbol: iconSymbol
   }), renderBadge && React__default.createElement("div", {
-    className: styles$2.badgeContainer
+    className: styles$4.badgeContainer
   }, renderBadge()));
 }
 function ForgeLayoutActionBadge(props) {
   const { children } = props;
   return React__default.createElement("div", {
-    className: styles$2.badge
+    className: styles$4.badge
   }, children);
 }
 const PressableButton = forwardRef((props, ref) => {
@@ -138,12 +336,12 @@ const PressableButton = forwardRef((props, ref) => {
   }));
 });
 PressableButton.displayName = "PressableButton";
-const nav = "_nav_1a55q_5";
-const link = "_link_1a55q_18";
-const focused = "_focused_1a55q_27";
-const hovered = "_hovered_1a55q_39";
-const selected = "_selected_1a55q_43";
-const styles$1 = {
+const nav = "_nav_kupyp_5";
+const link = "_link_kupyp_18";
+const focused = "_focused_kupyp_27";
+const hovered = "_hovered_kupyp_39";
+const selected = "_selected_kupyp_43";
+const styles$3 = {
   nav,
   link,
   focused,
@@ -172,7 +370,7 @@ function ForgeLayoutNav(props) {
   return React__default.createElement(ForgeLayoutNavContext.Provider, {
     value: context
   }, React__default.createElement("div", {
-    className: styles$1.nav
+    className: styles$3.nav
   }, React__default.createElement(VerticalStack, {
     as: "nav",
     "aria-label": title,
@@ -198,7 +396,7 @@ function ForgeLayoutNavLink(props) {
   const { focusProps, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f(props);
   const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
   const isSelected = href === selectedHref;
-  const className = classNames(styles$1.link, isFocusVisible && styles$1.focused, isHovered && styles$1.hovered, isSelected && styles$1.selected);
+  const className = classNames(styles$3.link, isFocusVisible && styles$3.focused, isHovered && styles$3.hovered, isSelected && styles$3.selected);
   return React__default.createElement("a", __spreadProps(__spreadValues({
     ref,
     className
@@ -231,25 +429,203 @@ function Logo() {
     fill: "#0B2780"
   }));
 }
-const ForgeLayout$1 = "_ForgeLayout_192uk_5";
-const modeTest = "_modeTest_192uk_22";
-const bg = "_bg_192uk_28";
-const backgroundDecoration01 = "_backgroundDecoration01_192uk_37";
-const body = "_body_192uk_43";
-const header = "_header_192uk_49";
-const headerBg = "_headerBg_192uk_62";
-const content = "_content_192uk_72";
-const controls = "_controls_192uk_77";
+const header = "_header_ky32d_5";
+const headerBg = "_headerBg_ky32d_19";
+const styles$2 = {
+  header,
+  headerBg
+};
+const ForgeLayoutHeaderContext = createContext(null);
+const useForgeLayoutHeader = () => {
+  const context = useContext(ForgeLayoutHeaderContext);
+  if (!context) {
+    throw new Error("useForgeLayoutHeader must be used within a ForgeLayoutHeader");
+  }
+  return context;
+};
+function ForgeLayoutHeader(props) {
+  const { areControlsGrouped = true, children } = props;
+  return React__default.createElement(ForgeLayoutHeaderContext.Provider, {
+    value: {
+      areControlsGrouped
+    }
+  }, React__default.createElement("header", {
+    className: styles$2.header
+  }, React__default.createElement("div", {
+    className: styles$2.headerBg
+  }), children));
+}
+const controls = "_controls_5yy4h_5";
+const breadcrumbNavigationContainer = "_breadcrumbNavigationContainer_5yy4h_12";
+const backButtonContainer = "_backButtonContainer_5yy4h_19";
+const backButton = "_backButton_5yy4h_19";
+const breadcrumbsContainer = "_breadcrumbsContainer_5yy4h_34";
+const trigger = "_trigger_5yy4h_38";
+const triggerPopoverOpen = "_triggerPopoverOpen_5yy4h_60";
+const popover = "_popover_5yy4h_64";
+const searchContainer = "_searchContainer_5yy4h_72";
+const styles$1 = {
+  controls,
+  breadcrumbNavigationContainer,
+  backButtonContainer,
+  backButton,
+  breadcrumbsContainer,
+  trigger,
+  triggerPopoverOpen,
+  popover,
+  searchContainer
+};
+const TEST_MODE = "Test";
+const PRODUCTION_MODE = "Production";
+const POPOVER_CROSS_OFFSET = 116;
+const POPOVER_OFFSET = 2;
+function ForgeLayoutControls(props) {
+  const { navState } = useForgeLayout();
+  const { areControlsGrouped } = useForgeLayoutHeader();
+  const { children, visibleWhenNavStateIs = "expanded" } = props;
+  if (navState !== visibleWhenNavStateIs) {
+    return null;
+  }
+  return React__default.createElement(React__default.Fragment, null, areControlsGrouped ? React__default.createElement("div", {
+    className: styles$1.controls
+  }, children) : React__default.createElement(React__default.Fragment, null, children));
+}
+function ForgeLayoutBreadcrumbsNavigation(props) {
+  const { children } = props;
+  const { backButton: backButton2, breadcrumbs } = useMemo(() => {
+    const breadcrumbNavigationChildren = flattenChildren(children);
+    const backButton22 = breadcrumbNavigationChildren.length > 0 ? breadcrumbNavigationChildren[0] : null;
+    const breadcrumbs2 = breadcrumbNavigationChildren.length > 1 ? breadcrumbNavigationChildren[1] : null;
+    if (!backButton22 || !breadcrumbs2) {
+      throw new Error("ForgeLayout.BreadcrumbNavigation must contain ForgeLayout.BackButton and ForgeLayout.Breadcrumbs");
+    }
+    return {
+      backButton: backButton22,
+      breadcrumbs: breadcrumbs2
+    };
+  }, [children]);
+  return React__default.createElement("div", {
+    className: styles$1.breadcrumbNavigationContainer
+  }, React__default.createElement("div", {
+    className: styles$1.backButtonContainer
+  }, backButton2), React__default.createElement("div", {
+    className: styles$1.breadcrumbsContainer
+  }, breadcrumbs));
+}
+function ForgeLayoutBackButton(props) {
+  const _a = props, { children } = _a, restButtonProps = __objRest(_a, ["children"]);
+  return React__default.createElement(UnstyledButton, __spreadProps(__spreadValues({}, restButtonProps), {
+    className: styles$1.backButton
+  }), React__default.createElement(Icon, {
+    symbol: ArrowBack,
+    size: "sm"
+  }), React__default.createElement(Text, {
+    variant: "subtitle1"
+  }, children));
+}
+function ForgeLayoutBreadcrumbs(props) {
+  const { children } = props;
+  const breadcrumbs = useMemo(() => flattenChildren(children), [children]);
+  return React__default.createElement(HorizontalStack, {
+    blockAlign: "center",
+    gap: "0.5"
+  }, breadcrumbs.map((breadcrumb, idx) => {
+    if (idx === 0) {
+      return React__default.createElement(Fragment, {
+        key: idx
+      }, breadcrumb);
+    } else {
+      return React__default.createElement(Fragment, {
+        key: idx
+      }, React__default.createElement(ForgeLayoutBreadcrumb, {
+        key: idx
+      }, ">"), breadcrumb);
+    }
+  }));
+}
+function ForgeLayoutBreadcrumb(props) {
+  const { children } = props;
+  return React__default.createElement(Text, {
+    variant: "body1",
+    color: "neutral.700"
+  }, children);
+}
+function ForgeLayoutModeSwitcher(props) {
+  const { onModeChange } = props;
+  const { mode } = useForgeLayout();
+  const [isOpen, setIsOpen] = useState(false);
+  return React__default.createElement($de32f1b87079253c$export$2e1e1122cf0cba88, null, React__default.createElement($d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+    className: classNames(styles$1.trigger, isOpen && styles$1.triggerPopoverOpen),
+    onPress: () => setIsOpen(true)
+  }, React__default.createElement(Text, {
+    variant: "subtitle1",
+    color: mode === "test" ? "warning.600" : "positive.600",
+    truncate: true
+  }, mode === "test" ? TEST_MODE : PRODUCTION_MODE), React__default.createElement(Icon, {
+    symbol: ExpandMore400,
+    size: "md",
+    color: "neutral.500"
+  })), React__default.createElement($07b14b47974efb58$export$5b6b19405a83ff9d, {
+    className: styles$1.popover,
+    offset: POPOVER_OFFSET,
+    crossOffset: POPOVER_CROSS_OFFSET,
+    isOpen,
+    onOpenChange: setIsOpen
+  }, React__default.createElement($de32f1b87079253c$export$3ddf2d174ce01153, null, React__default.createElement(VerticalStack, {
+    gap: "1"
+  }, React__default.createElement(Text, {
+    variant: "subtitle1",
+    color: "neutral.800"
+  }, "Instance Switcher"), React__default.createElement(RadioGroup, {
+    "aria-label": "Select a mode",
+    onChange: onModeChange,
+    value: mode
+  }, React__default.createElement(ForgeLayoutModeSwitcherRadioGroupItem, {
+    value: "test"
+  }), React__default.createElement(ForgeLayoutModeSwitcherRadioGroupItem, {
+    value: "production"
+  }))))));
+}
+function ForgeLayoutModeSwitcherRadioGroupItem(props) {
+  const _a = props, { value } = _a, restProps = __objRest(_a, ["value"]);
+  const state = useRadioGroupContext();
+  const isSelected = value === state.selectedValue;
+  return React__default.createElement(RadioGroup.Item, __spreadValues({
+    value
+  }, restProps), React__default.createElement(VerticalStack, null, React__default.createElement(Text, {
+    variant: "subtitle2",
+    color: isSelected ? "primary.800" : "primary.700"
+  }, value === "test" ? TEST_MODE : PRODUCTION_MODE), React__default.createElement(Text, {
+    variant: "overline"
+  }, "View data using the", " ", React__default.createElement(Text, {
+    color: value === "test" ? "warning.600" : "positive.600"
+  }, value === "test" ? TEST_MODE.toUpperCase() : PRODUCTION_MODE.toUpperCase(), " ", "API", " "), "keys")));
+}
+function ForgeLayoutSearch(props) {
+  const _a = props, { "aria-label": ariaLabel = "Search for content" } = _a, textFieldProps = __objRest(_a, ["aria-label"]);
+  return React__default.createElement("div", {
+    className: styles$1.searchContainer
+  }, React__default.createElement(TextField, __spreadValues({
+    size: "sm",
+    type: "search",
+    "aria-label": ariaLabel,
+    placeholder: "/ search",
+    iconAtStart: Search
+  }, textFieldProps)));
+}
+const ForgeLayout$1 = "_ForgeLayout_si9oh_5";
+const modeTest = "_modeTest_si9oh_22";
+const bg = "_bg_si9oh_28";
+const backgroundDecoration01 = "_backgroundDecoration01_si9oh_37";
+const body = "_body_si9oh_43";
+const content = "_content_si9oh_49";
 const styles = {
   ForgeLayout: ForgeLayout$1,
   modeTest,
   bg,
   backgroundDecoration01,
   body,
-  header,
-  headerBg,
-  content,
-  controls
+  content
 };
 const ForgeLayoutContext = React__default.createContext(null);
 const useForgeLayout = () => {
@@ -277,24 +653,6 @@ function ForgeLayout(props) {
     className
   }, children));
 }
-function ForgeLayoutHeader(props) {
-  const { children } = props;
-  return React__default.createElement("header", {
-    className: styles.header
-  }, React__default.createElement("div", {
-    className: styles.headerBg
-  }), children);
-}
-function ForgeLayoutControls(props) {
-  const { navState } = useForgeLayout();
-  const { children, visibleWhenNavStateIs = "expanded" } = props;
-  if (navState !== visibleWhenNavStateIs) {
-    return null;
-  }
-  return React__default.createElement("div", {
-    className: styles.controls
-  }, children);
-}
 function ForgeLayoutBody(props) {
   const { children } = props;
   return React__default.createElement("div", {
@@ -313,6 +671,12 @@ ForgeLayout.NavLink = ForgeLayoutNavLink;
 ForgeLayout.Body = ForgeLayoutBody;
 ForgeLayout.Header = ForgeLayoutHeader;
 ForgeLayout.Controls = ForgeLayoutControls;
+ForgeLayout.BreadcrumbsNavigation = ForgeLayoutBreadcrumbsNavigation;
+ForgeLayout.BackButton = ForgeLayoutBackButton;
+ForgeLayout.Breadcrumbs = ForgeLayoutBreadcrumbs;
+ForgeLayout.Breadcrumb = ForgeLayoutBreadcrumb;
+ForgeLayout.ModeSwitcher = ForgeLayoutModeSwitcher;
+ForgeLayout.Search = ForgeLayoutSearch;
 ForgeLayout.Actions = ForgeLayoutActions;
 ForgeLayout.ActionBadge = ForgeLayoutActionBadge;
 ForgeLayout.MenuAction = ForgeLayoutMenuAction;

package/FormLayout/index.js

@@ -30,8 +30,8 @@ var __objRest = (source, exclude) => {
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const utilities_css = require("../utilities/css.js");
-const HorizontalGrid = require("../__chunks__/HorizontalGrid-Bhj16LbM.js");
-const Text = require("../__chunks__/Text-Dfbyoxsz.js");
+const HorizontalGrid = require("../__chunks__/HorizontalGrid-B5UdZtSD.js");
+const Text = require("../__chunks__/Text-D2pJpElk.js");
 const utilities_react = require("../utilities/react.js");
 function Grid(props) {
   const { children, columns } = props;
@@ -40,7 +40,7 @@ function Grid(props) {
     gap: "2"
   }, children);
 }
-const Header$1 = "_Header_1r47j_5";
+const Header$1 = "_Header_1e4tv_5";
 const styles$2 = {
   Header: Header$1
 };
@@ -58,7 +58,7 @@ function HelperText(props) {
   }, children);
 }
 const WithinSectionContext = React.createContext(false);
-const Section$1 = "_Section_1i0bx_5";
+const Section$1 = "_Section_ondio_5";
 const styles$1 = {
   Section: Section$1
 };
@@ -107,7 +107,7 @@ function Title(props) {
   }, restProps), textProps), children);
 }
 Title.displayName = "FormLayout.Title";
-const FormLayout$1 = "_FormLayout_afjwp_5";
+const FormLayout$1 = "_FormLayout_1g6qy_5";
 const styles = {
   FormLayout: FormLayout$1
 };

package/FormLayout/index.mjs

@@ -28,8 +28,8 @@ var __objRest = (source, exclude) => {
 };
 import React__default, { createContext, useMemo, isValidElement, useContext } from "react";
 import { classNames } from "../utilities/css.mjs";
-import { H as HorizontalGrid } from "../__chunks__/HorizontalGrid-D4bJqbQV.mjs";
-import { T as Text } from "../__chunks__/Text-CQ_8wg0t.mjs";
+import { H as HorizontalGrid } from "../__chunks__/HorizontalGrid-CQJNpH_g.mjs";
+import { T as Text } from "../__chunks__/Text-D_RgAqQT.mjs";
 import { deepFind } from "../utilities/react.mjs";
 function Grid(props) {
   const { children, columns } = props;
@@ -38,7 +38,7 @@ function Grid(props) {
     gap: "2"
   }, children);
 }
-const Header$1 = "_Header_1r47j_5";
+const Header$1 = "_Header_1e4tv_5";
 const styles$2 = {
   Header: Header$1
 };
@@ -56,7 +56,7 @@ function HelperText(props) {
   }, children);
 }
 const WithinSectionContext = createContext(false);
-const Section$1 = "_Section_1i0bx_5";
+const Section$1 = "_Section_ondio_5";
 const styles$1 = {
   Section: Section$1
 };
@@ -105,7 +105,7 @@ function Title(props) {
   }, restProps), textProps), children);
 }
 Title.displayName = "FormLayout.Title";
-const FormLayout$1 = "_FormLayout_afjwp_5";
+const FormLayout$1 = "_FormLayout_1g6qy_5";
 const styles = {
   FormLayout: FormLayout$1
 };

package/HorizontalGrid/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const HorizontalGrid = require("../__chunks__/HorizontalGrid-Bhj16LbM.js");
+const HorizontalGrid = require("../__chunks__/HorizontalGrid-B5UdZtSD.js");
 exports.HorizontalGrid = HorizontalGrid.HorizontalGrid;