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

package/ForgeLayout/index.mjs

@@ -29,26 +29,27 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React__default, { useState, useCallback, forwardRef, useRef, useMemo, useContext, createContext, Fragment } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { useState, useCallback, forwardRef, useRef, useMemo, useContext, createContext, Fragment as Fragment$1 } from "react";
 import { classNames, variationName } from "../utilities/css.mjs";
 import { a as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../__chunks__/Button-B4DxcTvZ.mjs";
-import { H as HorizontalStack } from "../__chunks__/HorizontalStack-CxE8tPx_.mjs";
-import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
-import { M as Menu } from "../__chunks__/Menu-DHwqwFlg.mjs";
-import { T as Text } from "../__chunks__/Text-YOL3isF4.mjs";
+import { H as HorizontalStack } from "../__chunks__/HorizontalStack-CJavrBHm.mjs";
+import { I as Icon } from "../__chunks__/Icon-BIpaQJ_I.mjs";
+import { M as Menu } from "../__chunks__/Menu-Ci1FGh8B.mjs";
+import { T as Text } from "../__chunks__/Text-D6oT5WJQ.mjs";
 import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../__chunks__/useFocusRing-BWKhJSvH.mjs";
 import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/mergeProps-COnPag8r.mjs";
 import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/useHover-FWU5y5-k.mjs";
 import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../__chunks__/usePress-Cw67P1FM.mjs";
 import { $ as $298d61e98472621b$export$dcf14c9974fe2767 } from "../__chunks__/useLink-y6WGv96n.mjs";
-import { V as VerticalStack } from "../__chunks__/VerticalStack-C2yDQVHD.mjs";
+import { V as VerticalStack } from "../__chunks__/VerticalStack-DoMqBfYD.mjs";
 import { $ as $de32f1b87079253c$export$2e1e1122cf0cba88, a as $07b14b47974efb58$export$5b6b19405a83ff9d, b as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../__chunks__/Dialog-DIhV589X.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-DpQ5Ic9D.mjs";
-import { R as RadioGroup, u as useRadioGroupContext } from "../__chunks__/RadioGroup-DUu5GEpn.mjs";
-import { T as TextField } from "../__chunks__/TextField-D2QhDAdD.mjs";
+import { U as UnstyledButton } from "../__chunks__/UnstyledButton-DxJLvL-G.mjs";
+import { R as RadioGroup, u as useRadioGroupContext } from "../__chunks__/RadioGroup-BfKaJnSo.mjs";
+import { T as TextField } from "../__chunks__/TextField-818kTElu.mjs";
 import { flattenChildren } from "../utilities/react.mjs";
 const button = "_button_1sch8_4";
 const focused$1 = "_focused_1sch8_25";
@@ -68,11 +69,12 @@ const styles$4 = {
 };
 function ForgeLayoutActions(props) {
   const { children } = props;
-  return React__default.createElement(HorizontalStack, {
+  return jsx(HorizontalStack, {
     wrap: false,
     gap: "1",
-    align: "end"
-  }, children);
+    align: "end",
+    children
+  });
 }
 function ForgeLayoutMenuAction(props) {
   const { accessibilityLabel = "Actions", iconSymbol, children, renderBadge } = props;
@@ -83,18 +85,25 @@ function ForgeLayoutMenuAction(props) {
   const { focusProps, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f({});
   const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({});
   const className = classNames(styles$4.button, isFocusVisible && styles$4.focused, isHovered && styles$4.hovered, isOpen && styles$4.open);
-  return React__default.createElement(Menu, {
+  return jsxs(Menu, {
     isOpen,
-    onOpenChange: handleOpenChange
-  }, React__default.createElement(Menu.Trigger, null, React__default.createElement(PressableButton, __spreadValues({
-    className
-  }, $3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, hoverProps)), React__default.createElement(Text, {
-    visuallyHidden: true
-  }, accessibilityLabel), React__default.createElement(Icon, {
-    symbol: iconSymbol
-  }), renderBadge && React__default.createElement("div", {
-    className: styles$4.badgeContainer
-  }, renderBadge()))), children);
+    onOpenChange: handleOpenChange,
+    children: [jsx(Menu.Trigger, {
+      children: jsxs(PressableButton, __spreadProps(__spreadValues({
+        className
+      }, $3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, hoverProps)), {
+        children: [jsx(Text, {
+          visuallyHidden: true,
+          children: accessibilityLabel
+        }), jsx(Icon, {
+          symbol: iconSymbol
+        }), renderBadge && jsx("div", {
+          className: styles$4.badgeContainer,
+          children: renderBadge()
+        })]
+      }))
+    }), children]
+  });
 }
 function ForgeLayoutLinkAction(props) {
   const { accessibilityLabel = "Actions", iconSymbol, renderBadge, isSelected } = props;
@@ -103,44 +112,52 @@ function ForgeLayoutLinkAction(props) {
   const { focusProps, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f(props);
   const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
   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({
+  return jsxs("a", __spreadProps(__spreadValues({
     ref,
     className
   }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
-    "aria-current": isSelected ? "true" : void 0
-  }), React__default.createElement(Text, {
-    visuallyHidden: true
-  }, accessibilityLabel), React__default.createElement(Icon, {
-    symbol: iconSymbol
-  }), renderBadge && React__default.createElement("div", {
-    className: styles$4.badgeContainer
-  }, renderBadge()));
+    "aria-current": isSelected ? "true" : void 0,
+    children: [jsx(Text, {
+      visuallyHidden: true,
+      children: accessibilityLabel
+    }), jsx(Icon, {
+      symbol: iconSymbol
+    }), renderBadge && 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 = useRef(null);
   const className = classNames(styles$4.button, isSelected && styles$4.selected);
-  return React__default.createElement($d2b4bc8c273e7be6$export$353f5b6fc5456de1, __spreadValues({
+  return jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, __spreadProps(__spreadValues({
     ref,
     className,
     "aria-current": isSelected ? "true" : void 0
-  }, buttonProps), React__default.createElement(Text, {
-    visuallyHidden: true
-  }, accessibilityLabel), React__default.createElement(Icon, {
-    symbol: iconSymbol
-  }), renderBadge && React__default.createElement("div", {
-    className: styles$4.badgeContainer
-  }, renderBadge()));
+  }, buttonProps), {
+    children: [jsx(Text, {
+      visuallyHidden: true,
+      children: accessibilityLabel
+    }), jsx(Icon, {
+      symbol: iconSymbol
+    }), renderBadge && jsx("div", {
+      className: styles$4.badgeContainer,
+      children: renderBadge()
+    })]
+  }));
 }
 function ForgeLayoutActionBadge(props) {
   const { children } = props;
-  return React__default.createElement("div", {
-    className: styles$4.badge
-  }, children);
+  return jsx("div", {
+    className: styles$4.badge,
+    children
+  });
 }
 const PressableButton = forwardRef((props, ref) => {
   const { pressProps } = $f6c31cce2adf654f$export$45712eceda6fad21(props);
-  return React__default.createElement("button", __spreadProps(__spreadValues({}, pressProps), {
+  return jsx("button", __spreadProps(__spreadValues({}, pressProps), {
     ref,
     className: classNames(pressProps.className)
   }));
@@ -177,26 +194,31 @@ function ForgeLayoutNav(props) {
   if (navState === "collapsed") {
     return null;
   }
-  return React__default.createElement(ForgeLayoutNavContext.Provider, {
-    value: context
-  }, React__default.createElement("div", {
-    className: styles$3.nav
-  }, React__default.createElement(VerticalStack, {
-    as: "nav",
-    "aria-label": title,
-    gap: "1",
-    inlineAlign: "start"
-  }, React__default.createElement(Logo, null), children)));
+  return jsx(ForgeLayoutNavContext.Provider, {
+    value: context,
+    children: jsx("div", {
+      className: styles$3.nav,
+      children: jsxs(VerticalStack, {
+        as: "nav",
+        "aria-label": title,
+        gap: "1",
+        inlineAlign: "start",
+        children: [jsx(Logo, {}), children]
+      })
+    })
+  });
 }
 function ForgeLayoutNavSection(props) {
   const { title, children } = props;
-  return React__default.createElement(VerticalStack, {
+  return jsxs(VerticalStack, {
     gap: "1",
-    inlineAlign: "start"
-  }, React__default.createElement(Text, {
-    variant: "overline",
-    color: "primary.600"
-  }, title), children);
+    inlineAlign: "start",
+    children: [jsx(Text, {
+      variant: "overline",
+      color: "primary.600",
+      children: title
+    }), children]
+  });
 }
 function ForgeLayoutNavLink(props) {
   const { href, iconSymbol, children } = props;
@@ -207,67 +229,75 @@ function ForgeLayoutNavLink(props) {
   const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
   const isSelected = href === selectedHref;
   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({
+  return jsxs("a", __spreadProps(__spreadValues({
     ref,
     className
   }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusProps, linkProps)), {
-    "aria-current": isSelected ? "page" : void 0
-  }), React__default.createElement(Icon, {
-    symbol: iconSymbol
-  }), React__default.createElement(Text, {
-    variant: "subtitle2"
-  }, children));
+    "aria-current": isSelected ? "page" : void 0,
+    children: [jsx(Icon, {
+      symbol: iconSymbol
+    }), jsx(Text, {
+      variant: "subtitle2",
+      children
+    })]
+  }));
 }
 function Logo() {
-  return React__default.createElement("svg", {
+  return jsxs("svg", {
     width: "95",
     height: "24",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("g", {
-    clipPath: "url(#clip0_1141_3360)"
-  }, React__default.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__default.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__default.createElement("defs", null, React__default.createElement("linearGradient", {
-    id: "paint0_linear_1141_3360",
-    x1: "2.381",
-    y1: "20.234",
-    x2: "18.847",
-    y2: "3.923",
-    gradientUnits: "userSpaceOnUse"
-  }, React__default.createElement("stop", {
-    stopColor: "#BC4543"
-  }), React__default.createElement("stop", {
-    offset: ".5",
-    stopColor: "#F95C59"
-  }), React__default.createElement("stop", {
-    offset: ".59",
-    stopColor: "#F86059"
-  }), React__default.createElement("stop", {
-    offset: ".68",
-    stopColor: "#F86C59"
-  }), React__default.createElement("stop", {
-    offset: ".78",
-    stopColor: "#F7815A"
-  }), React__default.createElement("stop", {
-    offset: ".87",
-    stopColor: "#F69E5B"
-  }), React__default.createElement("stop", {
-    offset: ".97",
-    stopColor: "#F4C35D"
-  }), React__default.createElement("stop", {
-    offset: "1",
-    stopColor: "#F4D35E"
-  })), React__default.createElement("clipPath", {
-    id: "clip0_1141_3360"
-  }, React__default.createElement("path", {
-    fill: "#fff",
-    d: "M0 0H95V24H0z"
-  }))));
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [jsxs("g", {
+      clipPath: "url(#clip0_1141_3360)",
+      children: [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)"
+      }), 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"
+      })]
+    }), jsxs("defs", {
+      children: [jsxs("linearGradient", {
+        id: "paint0_linear_1141_3360",
+        x1: "2.381",
+        y1: "20.234",
+        x2: "18.847",
+        y2: "3.923",
+        gradientUnits: "userSpaceOnUse",
+        children: [jsx("stop", {
+          stopColor: "#BC4543"
+        }), jsx("stop", {
+          offset: ".5",
+          stopColor: "#F95C59"
+        }), jsx("stop", {
+          offset: ".59",
+          stopColor: "#F86059"
+        }), jsx("stop", {
+          offset: ".68",
+          stopColor: "#F86C59"
+        }), jsx("stop", {
+          offset: ".78",
+          stopColor: "#F7815A"
+        }), jsx("stop", {
+          offset: ".87",
+          stopColor: "#F69E5B"
+        }), jsx("stop", {
+          offset: ".97",
+          stopColor: "#F4C35D"
+        }), jsx("stop", {
+          offset: "1",
+          stopColor: "#F4D35E"
+        })]
+      }), jsx("clipPath", {
+        id: "clip0_1141_3360",
+        children: jsx("path", {
+          fill: "#fff",
+          d: "M0 0H95V24H0z"
+        })
+      })]
+    })]
+  });
 }
 const header = "_header_otc59_4";
 const headerBg = "_headerBg_otc59_18";
@@ -285,15 +315,17 @@ const useForgeLayoutHeader = () => {
 };
 function ForgeLayoutHeader(props) {
   const { areControlsGrouped = true, children } = props;
-  return React__default.createElement(ForgeLayoutHeaderContext.Provider, {
+  return jsx(ForgeLayoutHeaderContext.Provider, {
     value: {
       areControlsGrouped
-    }
-  }, React__default.createElement("header", {
-    className: styles$2.header
-  }, React__default.createElement("div", {
-    className: styles$2.headerBg
-  }), children));
+    },
+    children: jsxs("header", {
+      className: styles$2.header,
+      children: [jsx("div", {
+        className: styles$2.headerBg
+      }), children]
+    })
+  });
 }
 const controls = "_controls_1moaa_4";
 const breadcrumbNavigationContainer = "_breadcrumbNavigationContainer_1moaa_11";
@@ -326,9 +358,14 @@ function ForgeLayoutControls(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));
+  return jsx(Fragment, {
+    children: areControlsGrouped ? jsx("div", {
+      className: styles$1.controls,
+      children
+    }) : jsx(Fragment, {
+      children
+    })
+  });
 }
 function ForgeLayoutBreadcrumbsNavigation(props) {
   const { children } = props;
@@ -344,114 +381,139 @@ function ForgeLayoutBreadcrumbsNavigation(props) {
       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));
+  return jsxs("div", {
+    className: styles$1.breadcrumbNavigationContainer,
+    children: [jsx("div", {
+      className: styles$1.backButtonContainer,
+      children: backButton2
+    }), jsx("div", {
+      className: styles$1.breadcrumbsContainer,
+      children: 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));
+  return jsxs(UnstyledButton, __spreadProps(__spreadValues({}, restButtonProps), {
+    className: styles$1.backButton,
+    children: [jsx(Icon, {
+      symbol: ArrowBack,
+      size: "sm"
+    }), jsx(Text, {
+      variant: "subtitle1",
+      children
+    })]
+  }));
 }
 function ForgeLayoutBreadcrumbs(props) {
   const { children } = props;
   const breadcrumbs = useMemo(() => flattenChildren(children), [children]);
-  return React__default.createElement(HorizontalStack, {
+  return jsx(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);
-    }
-  }));
+    gap: "0.5",
+    children: breadcrumbs.map((breadcrumb, idx) => {
+      if (idx === 0) {
+        return jsx(Fragment$1, {
+          children: breadcrumb
+        }, idx);
+      } else {
+        return jsxs(Fragment$1, {
+          children: [jsx(ForgeLayoutBreadcrumb, {
+            children: ">"
+          }, idx), breadcrumb]
+        }, idx);
+      }
+    })
+  });
 }
 function ForgeLayoutBreadcrumb(props) {
   const { children } = props;
-  return React__default.createElement(Text, {
+  return jsx(Text, {
     variant: "body1",
-    color: "neutral.700"
-  }, children);
+    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"
-  }))))));
+  return jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, {
+    children: [jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+      className: classNames(styles$1.trigger, isOpen && styles$1.triggerPopoverOpen),
+      onPress: () => setIsOpen(true),
+      children: [jsx(Text, {
+        variant: "subtitle1",
+        color: mode === "test" ? "warning.600" : "positive.600",
+        truncate: true,
+        children: mode === "test" ? TEST_MODE : PRODUCTION_MODE
+      }), jsx(Icon, {
+        symbol: ExpandMore400,
+        size: "md",
+        color: "neutral.500"
+      })]
+    }), jsx($07b14b47974efb58$export$5b6b19405a83ff9d, {
+      className: styles$1.popover,
+      offset: POPOVER_OFFSET,
+      crossOffset: POPOVER_CROSS_OFFSET,
+      isOpen,
+      onOpenChange: setIsOpen,
+      children: jsx($de32f1b87079253c$export$3ddf2d174ce01153, {
+        children: jsxs(VerticalStack, {
+          gap: "1",
+          children: [jsx(Text, {
+            variant: "subtitle1",
+            color: "neutral.800",
+            children: "Instance Switcher"
+          }), jsxs(RadioGroup, {
+            "aria-label": "Select a mode",
+            onChange: onModeChange,
+            value: mode,
+            children: [jsx(ForgeLayoutModeSwitcherRadioGroupItem, {
+              value: "test"
+            }), jsx(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({
+  return jsx(RadioGroup.Item, __spreadProps(__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")));
+  }, restProps), {
+    children: jsxs(VerticalStack, {
+      children: [jsx(Text, {
+        variant: "subtitle2",
+        color: isSelected ? "primary.800" : "primary.700",
+        children: value === "test" ? TEST_MODE : PRODUCTION_MODE
+      }), jsxs(Text, {
+        variant: "overline",
+        children: ["View data using the", " ", jsxs(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__default.createElement("div", {
-    className: styles$1.searchContainer
-  }, React__default.createElement(TextField, __spreadValues({
-    size: "sm",
-    type: "search",
-    "aria-label": ariaLabel,
-    placeholder: "/ search",
-    iconAtStart: Search
-  }, textFieldProps)));
+  return jsx("div", {
+    className: styles$1.searchContainer,
+    children: jsx(TextField, __spreadValues({
+      size: "sm",
+      type: "search",
+      "aria-label": ariaLabel,
+      placeholder: "/ search",
+      iconAtStart: Search
+    }, textFieldProps))
+  });
 }
 const ForgeLayout$1 = "_ForgeLayout_irfr5_4";
 const modeTest = "_modeTest_irfr5_21";
@@ -485,25 +547,29 @@ function ForgeLayout(props) {
       navState
     };
   }, [mode, navState]);
-  return React__default.createElement(ForgeLayoutContext.Provider, {
-    value: context
-  }, React__default.createElement("div", {
-    className: bgClassName
-  }), React__default.createElement("div", {
-    className
-  }, children));
+  return jsxs(ForgeLayoutContext.Provider, {
+    value: context,
+    children: [jsx("div", {
+      className: bgClassName
+    }), jsx("div", {
+      className,
+      children
+    })]
+  });
 }
 function ForgeLayoutBody(props) {
   const { children } = props;
-  return React__default.createElement("div", {
-    className: styles.body
-  }, children);
+  return jsx("div", {
+    className: styles.body,
+    children
+  });
 }
 function ForgeLayoutContent(props) {
   const { children } = props;
-  return React__default.createElement("main", {
-    className: styles.content
-  }, children);
+  return jsx("main", {
+    className: styles.content,
+    children
+  });
 }
 ForgeLayout.Nav = ForgeLayoutNav;
 ForgeLayout.NavSection = ForgeLayoutNavSection;