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

package/ForgeLayout/index.js

@@ -33,25 +33,223 @@ var __objRest = (source, exclude) => {
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const utilities_css = require("../utilities/css.js");
-const Button = require("../__chunks__/Button-jgkOum0d.js");
-const HorizontalStack = require("../__chunks__/HorizontalStack-_DnrRlDb.js");
-const Icon = require("../__chunks__/Icon-DJ8CpeVT.js");
-const Menu = require("../__chunks__/Menu-CkQaJJAH.js");
-const Text = require("../__chunks__/Text-Dfbyoxsz.js");
+const Button = require("../__chunks__/Button-BvLvcmfd.js");
+const HorizontalStack = require("../__chunks__/HorizontalStack-D4ecxt6R.js");
+const Icon = require("../__chunks__/Icon-Pxk1cmPj.js");
+const Menu = require("../__chunks__/Menu-D8tCyOf5.js");
+const Text = require("../__chunks__/Text-Bbhl1fdd.js");
 const useFocusRing = require("../__chunks__/useFocusRing-DFRFvht_.js");
 const useHover = require("../__chunks__/useHover-BIKwjrCT.js");
-const usePress = require("../__chunks__/usePress-Dz8YYpge.js");
+const usePress = require("../__chunks__/usePress-DNETV97g.js");
 const mergeProps = require("../__chunks__/mergeProps-DniMwM6P.js");
-const useLink = require("../__chunks__/useLink-BOdtE_Mk.js");
-const VerticalStack = require("../__chunks__/VerticalStack-_gyNJbOa.js");
-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 = {
+const useLink = require("../__chunks__/useLink-DSnaSTQf.js");
+const VerticalStack = require("../__chunks__/VerticalStack-BkqSVZuy.js");
+const utils = require("../__chunks__/utils-DIF5XAA2.js");
+const filterDOMProps = require("../__chunks__/filterDOMProps-D3iOHP0H.js");
+const Overlay = require("../__chunks__/Overlay-Dmwy9VjC.js");
+const utilities = require("../__chunks__/utilities-CaBPUKEB.js");
+const useOverlayTrigger = require("../__chunks__/useOverlayTrigger-Dp7RXQ9B.js");
+const useDialog = require("../__chunks__/useDialog-wy_ru95P.js");
+const ArrowBack = require("../__chunks__/ArrowBack-C_LSatif.js");
+const Search = require("../__chunks__/Search-BY7IgEyX.js");
+const ExpandMore400 = require("../__chunks__/ExpandMore400-CJpvxyJm.js");
+const UnstyledButton = require("../__chunks__/UnstyledButton-DfjYrePV.js");
+const RadioGroup = require("../__chunks__/RadioGroup-CCObCqda.js");
+const TextField = require("../__chunks__/TextField-Mi3s9lvx.js");
+const utilities_react = require("../utilities/react.js");
+React.createContext(null);
+React.createContext(null);
+React.createContext(null);
+React.createContext(null);
+React.createContext(null);
+const $4e85f108e88277b8$export$d688439359537581 = React.createContext({});
+const $44f671af83e7d9e0$export$2de4954e8ae13b9f = /* @__PURE__ */ React.createContext({
+  placement: "bottom"
+});
+const $07b14b47974efb58$export$9b9a0cd73afb7ca4 = /* @__PURE__ */ React.createContext(null);
+function $07b14b47974efb58$var$Popover(props, ref) {
+  [props, ref] = utils.$64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $07b14b47974efb58$export$9b9a0cd73afb7ca4);
+  let contextState = React.useContext($de32f1b87079253c$export$d2f961adcb0afbe);
+  let localState = Overlay.$fc909762b330b746$export$61c6a8c84e605fb6(props);
+  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
+  let isExiting = utils.$64fa3d84918910a7$export$45fda7c47f93fd48(ref, state.isOpen) || props.isExiting || false;
+  let isHidden = Button.$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.createElement(React.Fragment, null, children);
+  }
+  if (state && !state.isOpen && !isExiting) return null;
+  return /* @__PURE__ */ React.createElement($07b14b47974efb58$var$PopoverInner, __spreadProps(__spreadValues({}, props), {
+    triggerRef: props.triggerRef,
+    state,
+    popoverRef: ref,
+    isExiting
+  }));
+}
+const $07b14b47974efb58$export$5b6b19405a83ff9d = /* @__PURE__ */ React.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 = React.useRef(null);
+  let [arrowWidth, setArrowWidth] = React.useState(0);
+  mergeProps.$f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    if (arrowRef.current && state.isOpen) setArrowWidth(arrowRef.current.getBoundingClientRect().width);
+  }, [
+    state.isOpen,
+    arrowRef
+  ]);
+  var _props_offset;
+  let { popoverProps, underlayProps, arrowProps, placement } = utilities.$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 = utils.$64fa3d84918910a7$export$6d3443f2c48bfc20(ref, !!placement) || props.isEntering || false;
+  let renderProps = utils.$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.createElement(Overlay.$337b884510726a0d$export$c6fdb837b070b4ff, __spreadProps(__spreadValues({}, props), {
+    isExiting,
+    portalContainer: UNSTABLE_portalContainer
+  }), !props.isNonModal && state.isOpen && /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
+    "data-testid": "underlay"
+  }, underlayProps), {
+    style: {
+      position: "fixed",
+      inset: 0
+    }
+  })), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadValues({}, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(filterDOMProps.$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.createElement(utilities.$86ea4cb521eb2e37$export$2317d149ed6f78c4, {
+    onDismiss: state.close
+  }), /* @__PURE__ */ React.createElement($44f671af83e7d9e0$export$2de4954e8ae13b9f.Provider, {
+    value: __spreadProps(__spreadValues({}, arrowProps), {
+      placement,
+      ref: arrowRef
+    })
+  }, renderProps.children), /* @__PURE__ */ React.createElement(utilities.$86ea4cb521eb2e37$export$2317d149ed6f78c4, {
+    onDismiss: state.close
+  })));
+}
+const $3674c52c6b3c5bce$export$795aec4671cbae19 = /* @__PURE__ */ React.createContext(null);
+const $de32f1b87079253c$export$8b93a07348a7730c = /* @__PURE__ */ React.createContext(null);
+const $de32f1b87079253c$export$d2f961adcb0afbe = /* @__PURE__ */ React.createContext(null);
+function $de32f1b87079253c$export$2e1e1122cf0cba88(props) {
+  let state = Menu.$a28c903ee9ad8dc5$export$79fefeb1c2091ac3(props);
+  let buttonRef = React.useRef(null);
+  let { triggerProps, overlayProps } = useOverlayTrigger.$628037886ba31236$export$f9d5c8beee7d008d({
+    type: "dialog"
+  }, state, buttonRef);
+  triggerProps.id = mergeProps.$bdb11010cef70236$export$f680877a34711e37();
+  overlayProps["aria-labelledby"] = triggerProps.id;
+  return /* @__PURE__ */ React.createElement(utils.$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.createElement(Overlay.$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] = utils.$64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $de32f1b87079253c$export$8b93a07348a7730c);
+  let { dialogProps, titleProps } = useDialog.$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 = React.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 = utils.$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.createElement("section", __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, filterDOMProps.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props)), dialogProps), renderProps), {
+    ref,
+    slot: props.slot || void 0
+  }), /* @__PURE__ */ React.createElement(utils.$64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $4e85f108e88277b8$export$d688439359537581,
+        {
+          slots: {
+            [utils.$64fa3d84918910a7$export$c62b8e45d58ddad9]: {},
+            title: __spreadProps(__spreadValues({}, titleProps), {
+              level: 2
+            })
+          }
+        }
+      ],
+      [
+        Button.$d2b4bc8c273e7be6$export$24d547caef80ccd1,
+        {
+          slots: {
+            [utils.$64fa3d84918910a7$export$c62b8e45d58ddad9]: {},
+            close: {
+              onPress: () => state === null || state === void 0 ? void 0 : state.close()
+            }
+          }
+        }
+      ]
+    ]
+  }, renderProps.children));
+}
+const $de32f1b87079253c$export$3ddf2d174ce01153 = /* @__PURE__ */ React.forwardRef($de32f1b87079253c$var$Dialog);
+const button = "_button_7xz3w_5";
+const focused$1 = "_focused_7xz3w_26";
+const hovered$1 = "_hovered_7xz3w_40";
+const selected$1 = "_selected_7xz3w_45";
+const open = "_open_7xz3w_46";
+const badgeContainer = "_badgeContainer_7xz3w_51";
+const badge = "_badge_7xz3w_51";
+const styles$4 = {
   button,
   focused: focused$1,
   hovered: hovered$1,
@@ -76,7 +274,7 @@ function ForgeLayoutMenuAction(props) {
   }, []);
   const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f({});
   const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456({});
-  const className = utilities_css.classNames(styles$2.button, isFocusVisible && styles$2.focused, isHovered && styles$2.hovered, isOpen && styles$2.open);
+  const className = utilities_css.classNames(styles$4.button, isFocusVisible && styles$4.focused, isHovered && styles$4.hovered, isOpen && styles$4.open);
   return React.createElement(Menu.Menu, {
     isOpen,
     onOpenChange: handleOpenChange
@@ -87,7 +285,7 @@ function ForgeLayoutMenuAction(props) {
   }, accessibilityLabel), React.createElement(Icon.Icon, {
     symbol: iconSymbol
   }), renderBadge && React.createElement("div", {
-    className: styles$2.badgeContainer
+    className: styles$4.badgeContainer
   }, renderBadge()))), children);
 }
 function ForgeLayoutLinkAction(props) {
@@ -96,7 +294,7 @@ function ForgeLayoutLinkAction(props) {
   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$2.button, isFocusVisible && styles$2.focused, isHovered && styles$2.hovered, isSelected && styles$2.selected);
+  const className = utilities_css.classNames(styles$4.button, isFocusVisible && styles$4.focused, isHovered && styles$4.hovered, isSelected && styles$4.selected);
   return React.createElement("a", __spreadProps(__spreadValues({
     ref,
     className
@@ -107,13 +305,13 @@ function ForgeLayoutLinkAction(props) {
   }, accessibilityLabel), React.createElement(Icon.Icon, {
     symbol: iconSymbol
   }), renderBadge && React.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 = React.useRef(null);
-  const className = utilities_css.classNames(styles$2.button, isSelected && styles$2.selected);
+  const className = utilities_css.classNames(styles$4.button, isSelected && styles$4.selected);
   return React.createElement(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, __spreadValues({
     ref,
     className,
@@ -123,13 +321,13 @@ function ForgeLayoutButtonAction(props) {
   }, accessibilityLabel), React.createElement(Icon.Icon, {
     symbol: iconSymbol
   }), renderBadge && React.createElement("div", {
-    className: styles$2.badgeContainer
+    className: styles$4.badgeContainer
   }, renderBadge()));
 }
 function ForgeLayoutActionBadge(props) {
   const { children } = props;
   return React.createElement("div", {
-    className: styles$2.badge
+    className: styles$4.badge
   }, children);
 }
 const PressableButton = React.forwardRef((props, ref) => {
@@ -140,12 +338,12 @@ const PressableButton = React.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_7j1y3_5";
+const link = "_link_7j1y3_18";
+const focused = "_focused_7j1y3_27";
+const hovered = "_hovered_7j1y3_39";
+const selected = "_selected_7j1y3_43";
+const styles$3 = {
   nav,
   link,
   focused,
@@ -174,7 +372,7 @@ function ForgeLayoutNav(props) {
   return React.createElement(ForgeLayoutNavContext.Provider, {
     value: context
   }, React.createElement("div", {
-    className: styles$1.nav
+    className: styles$3.nav
   }, React.createElement(VerticalStack.VerticalStack, {
     as: "nav",
     "aria-label": title,
@@ -200,7 +398,7 @@ function ForgeLayoutNavLink(props) {
   const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f(props);
   const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
   const isSelected = href === selectedHref;
-  const className = utilities_css.classNames(styles$1.link, isFocusVisible && styles$1.focused, isHovered && styles$1.hovered, isSelected && styles$1.selected);
+  const className = utilities_css.classNames(styles$3.link, isFocusVisible && styles$3.focused, isHovered && styles$3.hovered, isSelected && styles$3.selected);
   return React.createElement("a", __spreadProps(__spreadValues({
     ref,
     className
@@ -233,25 +431,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_amg0k_5";
+const headerBg = "_headerBg_amg0k_19";
+const styles$2 = {
+  header,
+  headerBg
+};
+const ForgeLayoutHeaderContext = React.createContext(null);
+const useForgeLayoutHeader = () => {
+  const context = React.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.createElement(ForgeLayoutHeaderContext.Provider, {
+    value: {
+      areControlsGrouped
+    }
+  }, React.createElement("header", {
+    className: styles$2.header
+  }, React.createElement("div", {
+    className: styles$2.headerBg
+  }), children));
+}
+const controls = "_controls_1uwc3_5";
+const breadcrumbNavigationContainer = "_breadcrumbNavigationContainer_1uwc3_12";
+const backButtonContainer = "_backButtonContainer_1uwc3_19";
+const backButton = "_backButton_1uwc3_19";
+const breadcrumbsContainer = "_breadcrumbsContainer_1uwc3_34";
+const trigger = "_trigger_1uwc3_38";
+const triggerPopoverOpen = "_triggerPopoverOpen_1uwc3_60";
+const popover = "_popover_1uwc3_64";
+const searchContainer = "_searchContainer_1uwc3_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.createElement(React.Fragment, null, areControlsGrouped ? React.createElement("div", {
+    className: styles$1.controls
+  }, children) : React.createElement(React.Fragment, null, children));
+}
+function ForgeLayoutBreadcrumbsNavigation(props) {
+  const { children } = props;
+  const { backButton: backButton2, breadcrumbs } = React.useMemo(() => {
+    const breadcrumbNavigationChildren = utilities_react.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.createElement("div", {
+    className: styles$1.breadcrumbNavigationContainer
+  }, React.createElement("div", {
+    className: styles$1.backButtonContainer
+  }, backButton2), React.createElement("div", {
+    className: styles$1.breadcrumbsContainer
+  }, breadcrumbs));
+}
+function ForgeLayoutBackButton(props) {
+  const _a = props, { children } = _a, restButtonProps = __objRest(_a, ["children"]);
+  return React.createElement(UnstyledButton.UnstyledButton, __spreadProps(__spreadValues({}, restButtonProps), {
+    className: styles$1.backButton
+  }), React.createElement(Icon.Icon, {
+    symbol: ArrowBack.ArrowBack,
+    size: "sm"
+  }), React.createElement(Text.Text, {
+    variant: "subtitle1"
+  }, children));
+}
+function ForgeLayoutBreadcrumbs(props) {
+  const { children } = props;
+  const breadcrumbs = React.useMemo(() => utilities_react.flattenChildren(children), [children]);
+  return React.createElement(HorizontalStack.HorizontalStack, {
+    blockAlign: "center",
+    gap: "0.5"
+  }, breadcrumbs.map((breadcrumb, idx) => {
+    if (idx === 0) {
+      return React.createElement(React.Fragment, {
+        key: idx
+      }, breadcrumb);
+    } else {
+      return React.createElement(React.Fragment, {
+        key: idx
+      }, React.createElement(ForgeLayoutBreadcrumb, {
+        key: idx
+      }, ">"), breadcrumb);
+    }
+  }));
+}
+function ForgeLayoutBreadcrumb(props) {
+  const { children } = props;
+  return React.createElement(Text.Text, {
+    variant: "body1",
+    color: "neutral.700"
+  }, children);
+}
+function ForgeLayoutModeSwitcher(props) {
+  const { onModeChange } = props;
+  const { mode } = useForgeLayout();
+  const [isOpen, setIsOpen] = React.useState(false);
+  return React.createElement($de32f1b87079253c$export$2e1e1122cf0cba88, null, React.createElement(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+    className: utilities_css.classNames(styles$1.trigger, isOpen && styles$1.triggerPopoverOpen),
+    onPress: () => setIsOpen(true)
+  }, React.createElement(Text.Text, {
+    variant: "subtitle1",
+    color: mode === "test" ? "warning.600" : "positive.600",
+    truncate: true
+  }, mode === "test" ? TEST_MODE : PRODUCTION_MODE), React.createElement(Icon.Icon, {
+    symbol: ExpandMore400.ExpandMore400,
+    size: "md",
+    color: "neutral.500"
+  })), React.createElement($07b14b47974efb58$export$5b6b19405a83ff9d, {
+    className: styles$1.popover,
+    offset: POPOVER_OFFSET,
+    crossOffset: POPOVER_CROSS_OFFSET,
+    isOpen,
+    onOpenChange: setIsOpen
+  }, React.createElement($de32f1b87079253c$export$3ddf2d174ce01153, null, React.createElement(VerticalStack.VerticalStack, {
+    gap: "1"
+  }, React.createElement(Text.Text, {
+    variant: "subtitle1",
+    color: "neutral.800"
+  }, "Instance Switcher"), React.createElement(RadioGroup.RadioGroup, {
+    "aria-label": "Select a mode",
+    onChange: onModeChange,
+    value: mode
+  }, React.createElement(ForgeLayoutModeSwitcherRadioGroupItem, {
+    value: "test"
+  }), React.createElement(ForgeLayoutModeSwitcherRadioGroupItem, {
+    value: "production"
+  }))))));
+}
+function ForgeLayoutModeSwitcherRadioGroupItem(props) {
+  const _a = props, { value } = _a, restProps = __objRest(_a, ["value"]);
+  const state = RadioGroup.useRadioGroupContext();
+  const isSelected = value === state.selectedValue;
+  return React.createElement(RadioGroup.RadioGroup.Item, __spreadValues({
+    value
+  }, restProps), React.createElement(VerticalStack.VerticalStack, null, React.createElement(Text.Text, {
+    variant: "subtitle2",
+    color: isSelected ? "primary.800" : "primary.700"
+  }, value === "test" ? TEST_MODE : PRODUCTION_MODE), React.createElement(Text.Text, {
+    variant: "overline"
+  }, "View data using the", " ", React.createElement(Text.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.createElement("div", {
+    className: styles$1.searchContainer
+  }, React.createElement(TextField.TextField, __spreadValues({
+    size: "sm",
+    type: "search",
+    "aria-label": ariaLabel,
+    placeholder: "/ search",
+    iconAtStart: Search.Search
+  }, textFieldProps)));
+}
+const ForgeLayout$1 = "_ForgeLayout_1l8o7_5";
+const modeTest = "_modeTest_1l8o7_22";
+const bg = "_bg_1l8o7_28";
+const backgroundDecoration01 = "_backgroundDecoration01_1l8o7_37";
+const body = "_body_1l8o7_43";
+const content = "_content_1l8o7_49";
 const styles = {
   ForgeLayout: ForgeLayout$1,
   modeTest,
   bg,
   backgroundDecoration01,
   body,
-  header,
-  headerBg,
-  content,
-  controls
+  content
 };
 const ForgeLayoutContext = React.createContext(null);
 const useForgeLayout = () => {
@@ -279,24 +655,6 @@ function ForgeLayout(props) {
     className
   }, children));
 }
-function ForgeLayoutHeader(props) {
-  const { children } = props;
-  return React.createElement("header", {
-    className: styles.header
-  }, React.createElement("div", {
-    className: styles.headerBg
-  }), children);
-}
-function ForgeLayoutControls(props) {
-  const { navState } = useForgeLayout();
-  const { children, visibleWhenNavStateIs = "expanded" } = props;
-  if (navState !== visibleWhenNavStateIs) {
-    return null;
-  }
-  return React.createElement("div", {
-    className: styles.controls
-  }, children);
-}
 function ForgeLayoutBody(props) {
   const { children } = props;
   return React.createElement("div", {
@@ -315,6 +673,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;