@easypost/easy-ui 1.0.0-alpha.112 → 1.0.0-alpha.114

package/ForgeLayout/index.js

@@ -31,26 +31,27 @@ var __objRest = (source, exclude) => {
   return target;
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const utilities_css = require("../utilities/css.js");
 const Button = require("../__chunks__/Button-BpQFyL49.js");
-const HorizontalStack = require("../__chunks__/HorizontalStack-CXpjASZi.js");
-const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
-const Menu = require("../__chunks__/Menu-Kfc6nxFP.js");
-const Text = require("../__chunks__/Text-CSESKR_s.js");
+const HorizontalStack = require("../__chunks__/HorizontalStack-CWdKKY8L.js");
+const Icon = require("../__chunks__/Icon-BRlbo3RF.js");
+const Menu = require("../__chunks__/Menu-MGDv1tob.js");
+const Text = require("../__chunks__/Text-DkzMEqky.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");
-const VerticalStack = require("../__chunks__/VerticalStack-Dzpv3O67.js");
+const VerticalStack = require("../__chunks__/VerticalStack-BHkiocKU.js");
 const Dialog = require("../__chunks__/Dialog-iU9BJB0o.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-BFpQ2Irc.js");
-const RadioGroup = require("../__chunks__/RadioGroup-CGQKZwDU.js");
-const TextField = require("../__chunks__/TextField-94cCP805.js");
+const UnstyledButton = require("../__chunks__/UnstyledButton-DW8CjaXN.js");
+const RadioGroup = require("../__chunks__/RadioGroup-BiCqtR0F.js");
+const TextField = require("../__chunks__/TextField-DKQVJPP_.js");
 const utilities_react = require("../utilities/react.js");
 const button = "_button_1sch8_4";
 const focused$1 = "_focused_1sch8_25";
@@ -70,11 +71,12 @@ const styles$4 = {
 };
 function ForgeLayoutActions(props) {
   const { children } = props;
-  return React.createElement(HorizontalStack.HorizontalStack, {
+  return jsxRuntime.jsx(HorizontalStack.HorizontalStack, {
     wrap: false,
     gap: "1",
-    align: "end"
-  }, children);
+    align: "end",
+    children
+  });
 }
 function ForgeLayoutMenuAction(props) {
   const { accessibilityLabel = "Actions", iconSymbol, children, renderBadge } = props;
@@ -85,18 +87,25 @@ function ForgeLayoutMenuAction(props) {
   const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f({});
   const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456({});
   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, {
+  return jsxRuntime.jsxs(Menu.Menu, {
     isOpen,
-    onOpenChange: handleOpenChange
-  }, React.createElement(Menu.Menu.Trigger, null, React.createElement(PressableButton, __spreadValues({
-    className
-  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, hoverProps)), React.createElement(Text.Text, {
-    visuallyHidden: true
-  }, accessibilityLabel), React.createElement(Icon.Icon, {
-    symbol: iconSymbol
-  }), renderBadge && React.createElement("div", {
-    className: styles$4.badgeContainer
-  }, renderBadge()))), children);
+    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$4.badgeContainer,
+          children: renderBadge()
+        })]
+      }))
+    }), children]
+  });
 }
 function ForgeLayoutLinkAction(props) {
   const { accessibilityLabel = "Actions", iconSymbol, renderBadge, isSelected } = props;
@@ -105,44 +114,52 @@ function ForgeLayoutLinkAction(props) {
   const { focusProps, isFocusVisible } = useFocusRing.$f7dceffc5ad7768b$export$4e328f61c538687f(props);
   const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
   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({
+  return jsxRuntime.jsxs("a", __spreadProps(__spreadValues({
     ref,
     className
   }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
-    "aria-current": isSelected ? "true" : void 0
-  }), React.createElement(Text.Text, {
-    visuallyHidden: true
-  }, accessibilityLabel), React.createElement(Icon.Icon, {
-    symbol: iconSymbol
-  }), renderBadge && React.createElement("div", {
-    className: styles$4.badgeContainer
-  }, renderBadge()));
+    "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$4.badgeContainer,
+      children: 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$4.button, isSelected && styles$4.selected);
-  return React.createElement(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, __spreadValues({
+  return jsxRuntime.jsxs(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, __spreadProps(__spreadValues({
     ref,
     className,
     "aria-current": isSelected ? "true" : void 0
-  }, buttonProps), React.createElement(Text.Text, {
-    visuallyHidden: true
-  }, accessibilityLabel), React.createElement(Icon.Icon, {
-    symbol: iconSymbol
-  }), renderBadge && React.createElement("div", {
-    className: styles$4.badgeContainer
-  }, renderBadge()));
+  }, buttonProps), {
+    children: [jsxRuntime.jsx(Text.Text, {
+      visuallyHidden: true,
+      children: accessibilityLabel
+    }), jsxRuntime.jsx(Icon.Icon, {
+      symbol: iconSymbol
+    }), renderBadge && jsxRuntime.jsx("div", {
+      className: styles$4.badgeContainer,
+      children: renderBadge()
+    })]
+  }));
 }
 function ForgeLayoutActionBadge(props) {
   const { children } = props;
-  return React.createElement("div", {
-    className: styles$4.badge
-  }, children);
+  return jsxRuntime.jsx("div", {
+    className: styles$4.badge,
+    children
+  });
 }
 const PressableButton = React.forwardRef((props, ref) => {
   const { pressProps } = usePress.$f6c31cce2adf654f$export$45712eceda6fad21(props);
-  return React.createElement("button", __spreadProps(__spreadValues({}, pressProps), {
+  return jsxRuntime.jsx("button", __spreadProps(__spreadValues({}, pressProps), {
     ref,
     className: utilities_css.classNames(pressProps.className)
   }));
@@ -179,26 +196,31 @@ function ForgeLayoutNav(props) {
   if (navState === "collapsed") {
     return null;
   }
-  return React.createElement(ForgeLayoutNavContext.Provider, {
-    value: context
-  }, React.createElement("div", {
-    className: styles$3.nav
-  }, React.createElement(VerticalStack.VerticalStack, {
-    as: "nav",
-    "aria-label": title,
-    gap: "1",
-    inlineAlign: "start"
-  }, React.createElement(Logo, null), children)));
+  return jsxRuntime.jsx(ForgeLayoutNavContext.Provider, {
+    value: context,
+    children: jsxRuntime.jsx("div", {
+      className: styles$3.nav,
+      children: jsxRuntime.jsxs(VerticalStack.VerticalStack, {
+        as: "nav",
+        "aria-label": title,
+        gap: "1",
+        inlineAlign: "start",
+        children: [jsxRuntime.jsx(Logo, {}), children]
+      })
+    })
+  });
 }
 function ForgeLayoutNavSection(props) {
   const { title, children } = props;
-  return React.createElement(VerticalStack.VerticalStack, {
+  return jsxRuntime.jsxs(VerticalStack.VerticalStack, {
     gap: "1",
-    inlineAlign: "start"
-  }, React.createElement(Text.Text, {
-    variant: "overline",
-    color: "primary.600"
-  }, title), children);
+    inlineAlign: "start",
+    children: [jsxRuntime.jsx(Text.Text, {
+      variant: "overline",
+      color: "primary.600",
+      children: title
+    }), children]
+  });
 }
 function ForgeLayoutNavLink(props) {
   const { href, iconSymbol, children } = props;
@@ -209,67 +231,75 @@ function ForgeLayoutNavLink(props) {
   const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
   const isSelected = href === selectedHref;
   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({
+  return jsxRuntime.jsxs("a", __spreadProps(__spreadValues({
     ref,
     className
   }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
-    "aria-current": isSelected ? "page" : void 0
-  }), React.createElement(Icon.Icon, {
-    symbol: iconSymbol
-  }), React.createElement(Text.Text, {
-    variant: "subtitle2"
-  }, children));
+    "aria-current": isSelected ? "page" : void 0,
+    children: [jsxRuntime.jsx(Icon.Icon, {
+      symbol: iconSymbol
+    }), jsxRuntime.jsx(Text.Text, {
+      variant: "subtitle2",
+      children
+    })]
+  }));
 }
 function Logo() {
-  return React.createElement("svg", {
+  return jsxRuntime.jsxs("svg", {
     width: "95",
     height: "24",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React.createElement("g", {
-    clipPath: "url(#clip0_1141_3360)"
-  }, React.createElement("path", {
-    d: "M21.036 17.22v-1.548l-10.037 5.851a.919.919 0 0 1-.927 0l-4.786-2.79v-2.448l4.786 2.79c.287.167.64.167.927 0l10.037-5.85v-2.448l-10.037 5.85a.919.919 0 0 1-.927 0l-4.786-2.79V11.39l4.786 2.79c.287.167.64.167.927 0l10.037-5.851V6.78a1.56 1.56 0 0 0-.772-1.35L11.308.209a1.528 1.528 0 0 0-1.543 0L.808 5.43a1.56 1.56 0 0 0-.772 1.35v10.44c0 .557.294 1.072.772 1.35l8.956 5.22a1.528 1.528 0 0 0 1.543 0l8.956-5.22a1.56 1.56 0 0 0 .772-1.35h.001z",
-    fill: "url(#paint0_linear_1141_3360)"
-  }), React.createElement("path", {
-    d: "M33.126 8.058v2.762h3.907v1.788h-3.907v4.725H31V6.16h6.868v1.9h-4.742zm20.575 3.689c0 3.384-2.678 5.746-5.703 5.746-3.024 0-5.702-2.362-5.702-5.746C42.296 8.363 44.974 6 47.998 6c3.025 0 5.703 2.363 5.703 5.747zm-2.158 0c0-2.203-1.622-3.784-3.545-3.784-1.922 0-3.56 1.58-3.56 3.784 0 2.204 1.622 3.784 3.56 3.784 1.939 0 3.545-1.58 3.545-3.784zm13.642 5.586l-2.457-3.8h-1.827v3.8h-2.064V6.16h3.797c2.473 0 4.033 1.532 4.033 3.752 0 1.548-.757 2.698-2.048 3.257l2.757 4.167h-2.19l-.001-.002zm-4.286-5.604h1.622c1.245 0 2.08-.543 2.08-1.82 0-1.276-.835-1.82-2.08-1.82H60.9v3.64zm16.134 5.764c-3.089 0-5.702-2.362-5.702-5.746C71.33 8.363 74.008 6 77.033 6c1.434 0 2.725.48 3.685 1.324l-1.244 1.437c-.63-.48-1.465-.798-2.316-.798-2.064 0-3.687 1.58-3.687 3.784 0 2.204 1.544 3.784 3.592 3.784 1.528 0 2.71-.67 3.008-2.427h-2.756v-1.74h4.648c.457 3.816-1.986 6.13-4.932 6.13h.002zM94 15.402v1.932h-6.868V6.16h6.727v1.931h-4.664v2.682h3.545v1.883h-3.545v2.746H94z",
-    fill: "#061340"
-  })), React.createElement("defs", null, React.createElement("linearGradient", {
-    id: "paint0_linear_1141_3360",
-    x1: "2.381",
-    y1: "20.234",
-    x2: "18.847",
-    y2: "3.923",
-    gradientUnits: "userSpaceOnUse"
-  }, React.createElement("stop", {
-    stopColor: "#BC4543"
-  }), React.createElement("stop", {
-    offset: ".5",
-    stopColor: "#F95C59"
-  }), React.createElement("stop", {
-    offset: ".59",
-    stopColor: "#F86059"
-  }), React.createElement("stop", {
-    offset: ".68",
-    stopColor: "#F86C59"
-  }), React.createElement("stop", {
-    offset: ".78",
-    stopColor: "#F7815A"
-  }), React.createElement("stop", {
-    offset: ".87",
-    stopColor: "#F69E5B"
-  }), React.createElement("stop", {
-    offset: ".97",
-    stopColor: "#F4C35D"
-  }), React.createElement("stop", {
-    offset: "1",
-    stopColor: "#F4D35E"
-  })), React.createElement("clipPath", {
-    id: "clip0_1141_3360"
-  }, React.createElement("path", {
-    fill: "#fff",
-    d: "M0 0H95V24H0z"
-  }))));
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [jsxRuntime.jsxs("g", {
+      clipPath: "url(#clip0_1141_3360)",
+      children: [jsxRuntime.jsx("path", {
+        d: "M21.036 17.22v-1.548l-10.037 5.851a.919.919 0 0 1-.927 0l-4.786-2.79v-2.448l4.786 2.79c.287.167.64.167.927 0l10.037-5.85v-2.448l-10.037 5.85a.919.919 0 0 1-.927 0l-4.786-2.79V11.39l4.786 2.79c.287.167.64.167.927 0l10.037-5.851V6.78a1.56 1.56 0 0 0-.772-1.35L11.308.209a1.528 1.528 0 0 0-1.543 0L.808 5.43a1.56 1.56 0 0 0-.772 1.35v10.44c0 .557.294 1.072.772 1.35l8.956 5.22a1.528 1.528 0 0 0 1.543 0l8.956-5.22a1.56 1.56 0 0 0 .772-1.35h.001z",
+        fill: "url(#paint0_linear_1141_3360)"
+      }), jsxRuntime.jsx("path", {
+        d: "M33.126 8.058v2.762h3.907v1.788h-3.907v4.725H31V6.16h6.868v1.9h-4.742zm20.575 3.689c0 3.384-2.678 5.746-5.703 5.746-3.024 0-5.702-2.362-5.702-5.746C42.296 8.363 44.974 6 47.998 6c3.025 0 5.703 2.363 5.703 5.747zm-2.158 0c0-2.203-1.622-3.784-3.545-3.784-1.922 0-3.56 1.58-3.56 3.784 0 2.204 1.622 3.784 3.56 3.784 1.939 0 3.545-1.58 3.545-3.784zm13.642 5.586l-2.457-3.8h-1.827v3.8h-2.064V6.16h3.797c2.473 0 4.033 1.532 4.033 3.752 0 1.548-.757 2.698-2.048 3.257l2.757 4.167h-2.19l-.001-.002zm-4.286-5.604h1.622c1.245 0 2.08-.543 2.08-1.82 0-1.276-.835-1.82-2.08-1.82H60.9v3.64zm16.134 5.764c-3.089 0-5.702-2.362-5.702-5.746C71.33 8.363 74.008 6 77.033 6c1.434 0 2.725.48 3.685 1.324l-1.244 1.437c-.63-.48-1.465-.798-2.316-.798-2.064 0-3.687 1.58-3.687 3.784 0 2.204 1.544 3.784 3.592 3.784 1.528 0 2.71-.67 3.008-2.427h-2.756v-1.74h4.648c.457 3.816-1.986 6.13-4.932 6.13h.002zM94 15.402v1.932h-6.868V6.16h6.727v1.931h-4.664v2.682h3.545v1.883h-3.545v2.746H94z",
+        fill: "#061340"
+      })]
+    }), jsxRuntime.jsxs("defs", {
+      children: [jsxRuntime.jsxs("linearGradient", {
+        id: "paint0_linear_1141_3360",
+        x1: "2.381",
+        y1: "20.234",
+        x2: "18.847",
+        y2: "3.923",
+        gradientUnits: "userSpaceOnUse",
+        children: [jsxRuntime.jsx("stop", {
+          stopColor: "#BC4543"
+        }), jsxRuntime.jsx("stop", {
+          offset: ".5",
+          stopColor: "#F95C59"
+        }), jsxRuntime.jsx("stop", {
+          offset: ".59",
+          stopColor: "#F86059"
+        }), jsxRuntime.jsx("stop", {
+          offset: ".68",
+          stopColor: "#F86C59"
+        }), jsxRuntime.jsx("stop", {
+          offset: ".78",
+          stopColor: "#F7815A"
+        }), jsxRuntime.jsx("stop", {
+          offset: ".87",
+          stopColor: "#F69E5B"
+        }), jsxRuntime.jsx("stop", {
+          offset: ".97",
+          stopColor: "#F4C35D"
+        }), jsxRuntime.jsx("stop", {
+          offset: "1",
+          stopColor: "#F4D35E"
+        })]
+      }), jsxRuntime.jsx("clipPath", {
+        id: "clip0_1141_3360",
+        children: jsxRuntime.jsx("path", {
+          fill: "#fff",
+          d: "M0 0H95V24H0z"
+        })
+      })]
+    })]
+  });
 }
 const header = "_header_otc59_4";
 const headerBg = "_headerBg_otc59_18";
@@ -287,15 +317,17 @@ const useForgeLayoutHeader = () => {
 };
 function ForgeLayoutHeader(props) {
   const { areControlsGrouped = true, children } = props;
-  return React.createElement(ForgeLayoutHeaderContext.Provider, {
+  return jsxRuntime.jsx(ForgeLayoutHeaderContext.Provider, {
     value: {
       areControlsGrouped
-    }
-  }, React.createElement("header", {
-    className: styles$2.header
-  }, React.createElement("div", {
-    className: styles$2.headerBg
-  }), children));
+    },
+    children: jsxRuntime.jsxs("header", {
+      className: styles$2.header,
+      children: [jsxRuntime.jsx("div", {
+        className: styles$2.headerBg
+      }), children]
+    })
+  });
 }
 const controls = "_controls_1moaa_4";
 const breadcrumbNavigationContainer = "_breadcrumbNavigationContainer_1moaa_11";
@@ -328,9 +360,14 @@ function ForgeLayoutControls(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));
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: areControlsGrouped ? jsxRuntime.jsx("div", {
+      className: styles$1.controls,
+      children
+    }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children
+    })
+  });
 }
 function ForgeLayoutBreadcrumbsNavigation(props) {
   const { children } = props;
@@ -346,114 +383,139 @@ function ForgeLayoutBreadcrumbsNavigation(props) {
       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));
+  return jsxRuntime.jsxs("div", {
+    className: styles$1.breadcrumbNavigationContainer,
+    children: [jsxRuntime.jsx("div", {
+      className: styles$1.backButtonContainer,
+      children: backButton2
+    }), jsxRuntime.jsx("div", {
+      className: styles$1.breadcrumbsContainer,
+      children: 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));
+  return jsxRuntime.jsxs(UnstyledButton.UnstyledButton, __spreadProps(__spreadValues({}, restButtonProps), {
+    className: styles$1.backButton,
+    children: [jsxRuntime.jsx(Icon.Icon, {
+      symbol: ArrowBack.ArrowBack,
+      size: "sm"
+    }), jsxRuntime.jsx(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, {
+  return jsxRuntime.jsx(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);
-    }
-  }));
+    gap: "0.5",
+    children: breadcrumbs.map((breadcrumb, idx) => {
+      if (idx === 0) {
+        return jsxRuntime.jsx(React.Fragment, {
+          children: breadcrumb
+        }, idx);
+      } else {
+        return jsxRuntime.jsxs(React.Fragment, {
+          children: [jsxRuntime.jsx(ForgeLayoutBreadcrumb, {
+            children: ">"
+          }, idx), breadcrumb]
+        }, idx);
+      }
+    })
+  });
 }
 function ForgeLayoutBreadcrumb(props) {
   const { children } = props;
-  return React.createElement(Text.Text, {
+  return jsxRuntime.jsx(Text.Text, {
     variant: "body1",
-    color: "neutral.700"
-  }, children);
+    color: "neutral.700",
+    children
+  });
 }
 function ForgeLayoutModeSwitcher(props) {
   const { onModeChange } = props;
   const { mode } = useForgeLayout();
   const [isOpen, setIsOpen] = React.useState(false);
-  return React.createElement(Dialog.$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(Dialog.$07b14b47974efb58$export$5b6b19405a83ff9d, {
-    className: styles$1.popover,
-    offset: POPOVER_OFFSET,
-    crossOffset: POPOVER_CROSS_OFFSET,
-    isOpen,
-    onOpenChange: setIsOpen
-  }, React.createElement(Dialog.$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"
-  }))))));
+  return jsxRuntime.jsxs(Dialog.$de32f1b87079253c$export$2e1e1122cf0cba88, {
+    children: [jsxRuntime.jsxs(Button.$d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+      className: utilities_css.classNames(styles$1.trigger, isOpen && styles$1.triggerPopoverOpen),
+      onPress: () => setIsOpen(true),
+      children: [jsxRuntime.jsx(Text.Text, {
+        variant: "subtitle1",
+        color: mode === "test" ? "warning.600" : "positive.600",
+        truncate: true,
+        children: mode === "test" ? TEST_MODE : PRODUCTION_MODE
+      }), jsxRuntime.jsx(Icon.Icon, {
+        symbol: ExpandMore400.ExpandMore400,
+        size: "md",
+        color: "neutral.500"
+      })]
+    }), jsxRuntime.jsx(Dialog.$07b14b47974efb58$export$5b6b19405a83ff9d, {
+      className: styles$1.popover,
+      offset: POPOVER_OFFSET,
+      crossOffset: POPOVER_CROSS_OFFSET,
+      isOpen,
+      onOpenChange: setIsOpen,
+      children: jsxRuntime.jsx(Dialog.$de32f1b87079253c$export$3ddf2d174ce01153, {
+        children: jsxRuntime.jsxs(VerticalStack.VerticalStack, {
+          gap: "1",
+          children: [jsxRuntime.jsx(Text.Text, {
+            variant: "subtitle1",
+            color: "neutral.800",
+            children: "Instance Switcher"
+          }), jsxRuntime.jsxs(RadioGroup.RadioGroup, {
+            "aria-label": "Select a mode",
+            onChange: onModeChange,
+            value: mode,
+            children: [jsxRuntime.jsx(ForgeLayoutModeSwitcherRadioGroupItem, {
+              value: "test"
+            }), jsxRuntime.jsx(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({
+  return jsxRuntime.jsx(RadioGroup.RadioGroup.Item, __spreadProps(__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")));
+  }, restProps), {
+    children: jsxRuntime.jsxs(VerticalStack.VerticalStack, {
+      children: [jsxRuntime.jsx(Text.Text, {
+        variant: "subtitle2",
+        color: isSelected ? "primary.800" : "primary.700",
+        children: value === "test" ? TEST_MODE : PRODUCTION_MODE
+      }), jsxRuntime.jsxs(Text.Text, {
+        variant: "overline",
+        children: ["View data using the", " ", jsxRuntime.jsxs(Text.Text, {
+          color: value === "test" ? "warning.600" : "positive.600",
+          children: [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)));
+  return jsxRuntime.jsx("div", {
+    className: styles$1.searchContainer,
+    children: jsxRuntime.jsx(TextField.TextField, __spreadValues({
+      size: "sm",
+      type: "search",
+      "aria-label": ariaLabel,
+      placeholder: "/ search",
+      iconAtStart: Search.Search
+    }, textFieldProps))
+  });
 }
 const ForgeLayout$1 = "_ForgeLayout_irfr5_4";
 const modeTest = "_modeTest_irfr5_21";
@@ -487,25 +549,29 @@ function ForgeLayout(props) {
       navState
     };
   }, [mode, navState]);
-  return React.createElement(ForgeLayoutContext.Provider, {
-    value: context
-  }, React.createElement("div", {
-    className: bgClassName
-  }), React.createElement("div", {
-    className
-  }, children));
+  return jsxRuntime.jsxs(ForgeLayoutContext.Provider, {
+    value: context,
+    children: [jsxRuntime.jsx("div", {
+      className: bgClassName
+    }), jsxRuntime.jsx("div", {
+      className,
+      children
+    })]
+  });
 }
 function ForgeLayoutBody(props) {
   const { children } = props;
-  return React.createElement("div", {
-    className: styles.body
-  }, children);
+  return jsxRuntime.jsx("div", {
+    className: styles.body,
+    children
+  });
 }
 function ForgeLayoutContent(props) {
   const { children } = props;
-  return React.createElement("main", {
-    className: styles.content
-  }, children);
+  return jsxRuntime.jsx("main", {
+    className: styles.content,
+    children
+  });
 }
 ForgeLayout.Nav = ForgeLayoutNav;
 ForgeLayout.NavSection = ForgeLayoutNavSection;