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

package/PlanCard/index.js

@@ -1,5 +1,7 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -15,6 +17,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -28,11 +31,12 @@ var __objRest = (source, exclude) => {
   return target;
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const Card = require("../__chunks__/Card-BM2DKiVA.js");
-const Text = require("../__chunks__/Text-CSESKR_s.js");
-const VerticalStack = require("../__chunks__/VerticalStack-Dzpv3O67.js");
-const UnstyledButton = require("../__chunks__/UnstyledButton-BFpQ2Irc.js");
+const Card = require("../__chunks__/Card-LPIW5drP.js");
+const Text = require("../__chunks__/Text-DkzMEqky.js");
+const VerticalStack = require("../__chunks__/VerticalStack-BHkiocKU.js");
+const UnstyledButton = require("../__chunks__/UnstyledButton-DW8CjaXN.js");
 const useHover = require("../__chunks__/useHover-Ck1otl-j.js");
 const mergeProps = require("../__chunks__/mergeProps-DLPcevok.js");
 const useLink = require("../__chunks__/useLink-CChqhQkC.js");
@@ -48,90 +52,109 @@ const styles = {
 };
 function PlanCard(props) {
   const _a = props, { children } = _a, cardProps = __objRest(_a, ["children"]);
-  return React.createElement(Card.Card, __spreadValues({
+  return jsxRuntime.jsx(Card.Card, __spreadProps(__spreadValues({
     variant: "outlined",
     background: "neutral.000",
     borderColor: "neutral.200",
     borderRadius: "lg",
     paddingY: "2",
     paddingX: "4"
-  }, cardProps), React.createElement(VerticalStack.VerticalStack, {
-    gap: "3"
-  }, children));
+  }, cardProps), {
+    children: jsxRuntime.jsx(VerticalStack.VerticalStack, {
+      gap: "3",
+      children
+    })
+  }));
 }
 function PlanCardLink(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   const ref = React.useRef(null);
   const { isHovered, hoverProps } = useHover.$6179b936705e76d3$export$ae780daf29e6d456(props);
   const { linkProps } = useLink.$298d61e98472621b$export$dcf14c9974fe2767(props, ref);
-  return React.createElement("a", __spreadValues({
+  return jsxRuntime.jsx("a", __spreadProps(__spreadValues({
     ref,
     className: styles.link
-  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, linkProps)), typeof children === "function" ? children({
-    isHovered
-  }) : children);
+  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, linkProps)), {
+    children: typeof children === "function" ? children({
+      isHovered
+    }) : children
+  }));
 }
 function PlanCardButton(_c) {
   var _d = _c, { children } = _d, props = __objRest(_d, ["children"]);
   const { isHovered, hoverProps } = useHover.$6179b936705e76d3$export$ae780daf29e6d456({});
-  return React.createElement(UnstyledButton.UnstyledButton, __spreadValues({
+  return jsxRuntime.jsx(UnstyledButton.UnstyledButton, __spreadProps(__spreadValues({
     className: styles.button
-  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, props)), typeof children === "function" ? children({
-    isHovered
-  }) : children);
+  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, props)), {
+    children: typeof children === "function" ? children({
+      isHovered
+    }) : children
+  }));
 }
 function PlanCardHeader({ children }) {
-  return React.createElement(VerticalStack.VerticalStack, {
+  return jsxRuntime.jsx(VerticalStack.VerticalStack, {
     gap: "0.5",
-    inlineAlign: "center"
-  }, children);
+    inlineAlign: "center",
+    children
+  });
 }
 function PlanCardCallout({ children }) {
-  return React.createElement("div", {
-    className: styles.callout
-  }, children);
+  return jsxRuntime.jsx("div", {
+    className: styles.callout,
+    children
+  });
 }
 function PlanCardTitle(_e) {
   var _f = _e, { children } = _f, textProps = __objRest(_f, ["children"]);
-  return React.createElement(Text.Text, __spreadValues({
+  return jsxRuntime.jsx(Text.Text, __spreadProps(__spreadValues({
     as: "h3",
     variant: "heading5",
     color: "neutral.600"
-  }, textProps), children);
+  }, textProps), {
+    children
+  }));
 }
 function PlanCardPrice(_g) {
   var _h = _g, { children } = _h, textProps = __objRest(_h, ["children"]);
-  return React.createElement(Text.Text, __spreadValues({
+  return jsxRuntime.jsx(Text.Text, __spreadProps(__spreadValues({
     variant: "heading2",
     weight: "normal",
     color: "neutral.800",
     fontVariantNumeric: "tabular-nums"
-  }, textProps), children);
+  }, textProps), {
+    children
+  }));
 }
 function PlanCardCaption(_i) {
   var _j = _i, { children } = _j, textProps = __objRest(_j, ["children"]);
-  return React.createElement(Text.Text, __spreadValues({
+  return jsxRuntime.jsx(Text.Text, __spreadProps(__spreadValues({
     variant: "caption",
     color: "primary.800"
-  }, textProps), children);
+  }, textProps), {
+    children
+  }));
 }
 function PlanCardFeatures({ children }) {
-  return React.createElement(VerticalStack.VerticalStack, {
+  return jsxRuntime.jsx(VerticalStack.VerticalStack, {
     gap: "1",
-    inlineAlign: "center"
-  }, children);
+    inlineAlign: "center",
+    children
+  });
 }
 function PlanCardFeature(_k) {
   var _l = _k, { children } = _l, textProps = __objRest(_l, ["children"]);
-  return React.createElement(Text.Text, __spreadValues({
+  return jsxRuntime.jsx(Text.Text, __spreadProps(__spreadValues({
     variant: "body2",
     color: "primary.800"
-  }, textProps), children);
+  }, textProps), {
+    children
+  }));
 }
 function PlanCardIllustration({ children }) {
-  return React.createElement("div", {
-    className: styles.illustration
-  }, children);
+  return jsxRuntime.jsx("div", {
+    className: styles.illustration,
+    children
+  });
 }
 PlanCard.Button = PlanCardButton;
 PlanCard.Link = PlanCardLink;

package/PlanCard/index.mjs

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -26,11 +29,12 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React__default, { useRef } from "react";
-import { C as Card } from "../__chunks__/Card-CJug4GMX.mjs";
-import { T as Text } from "../__chunks__/Text-YOL3isF4.mjs";
-import { V as VerticalStack } from "../__chunks__/VerticalStack-C2yDQVHD.mjs";
-import { U as UnstyledButton } from "../__chunks__/UnstyledButton-DpQ5Ic9D.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { C as Card } from "../__chunks__/Card-BgjWYPVY.mjs";
+import { T as Text } from "../__chunks__/Text-D6oT5WJQ.mjs";
+import { V as VerticalStack } from "../__chunks__/VerticalStack-DoMqBfYD.mjs";
+import { U as UnstyledButton } from "../__chunks__/UnstyledButton-DxJLvL-G.mjs";
 import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/useHover-FWU5y5-k.mjs";
 import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/mergeProps-COnPag8r.mjs";
 import { $ as $298d61e98472621b$export$dcf14c9974fe2767 } from "../__chunks__/useLink-y6WGv96n.mjs";
@@ -46,90 +50,109 @@ const styles = {
 };
 function PlanCard(props) {
   const _a = props, { children } = _a, cardProps = __objRest(_a, ["children"]);
-  return React__default.createElement(Card, __spreadValues({
+  return jsx(Card, __spreadProps(__spreadValues({
     variant: "outlined",
     background: "neutral.000",
     borderColor: "neutral.200",
     borderRadius: "lg",
     paddingY: "2",
     paddingX: "4"
-  }, cardProps), React__default.createElement(VerticalStack, {
-    gap: "3"
-  }, children));
+  }, cardProps), {
+    children: jsx(VerticalStack, {
+      gap: "3",
+      children
+    })
+  }));
 }
 function PlanCardLink(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   const ref = useRef(null);
   const { isHovered, hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456(props);
   const { linkProps } = $298d61e98472621b$export$dcf14c9974fe2767(props, ref);
-  return React__default.createElement("a", __spreadValues({
+  return jsx("a", __spreadProps(__spreadValues({
     ref,
     className: styles.link
-  }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, linkProps)), typeof children === "function" ? children({
-    isHovered
-  }) : children);
+  }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, linkProps)), {
+    children: typeof children === "function" ? children({
+      isHovered
+    }) : children
+  }));
 }
 function PlanCardButton(_c) {
   var _d = _c, { children } = _d, props = __objRest(_d, ["children"]);
   const { isHovered, hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({});
-  return React__default.createElement(UnstyledButton, __spreadValues({
+  return jsx(UnstyledButton, __spreadProps(__spreadValues({
     className: styles.button
-  }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, props)), typeof children === "function" ? children({
-    isHovered
-  }) : children);
+  }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, props)), {
+    children: typeof children === "function" ? children({
+      isHovered
+    }) : children
+  }));
 }
 function PlanCardHeader({ children }) {
-  return React__default.createElement(VerticalStack, {
+  return jsx(VerticalStack, {
     gap: "0.5",
-    inlineAlign: "center"
-  }, children);
+    inlineAlign: "center",
+    children
+  });
 }
 function PlanCardCallout({ children }) {
-  return React__default.createElement("div", {
-    className: styles.callout
-  }, children);
+  return jsx("div", {
+    className: styles.callout,
+    children
+  });
 }
 function PlanCardTitle(_e) {
   var _f = _e, { children } = _f, textProps = __objRest(_f, ["children"]);
-  return React__default.createElement(Text, __spreadValues({
+  return jsx(Text, __spreadProps(__spreadValues({
     as: "h3",
     variant: "heading5",
     color: "neutral.600"
-  }, textProps), children);
+  }, textProps), {
+    children
+  }));
 }
 function PlanCardPrice(_g) {
   var _h = _g, { children } = _h, textProps = __objRest(_h, ["children"]);
-  return React__default.createElement(Text, __spreadValues({
+  return jsx(Text, __spreadProps(__spreadValues({
     variant: "heading2",
     weight: "normal",
     color: "neutral.800",
     fontVariantNumeric: "tabular-nums"
-  }, textProps), children);
+  }, textProps), {
+    children
+  }));
 }
 function PlanCardCaption(_i) {
   var _j = _i, { children } = _j, textProps = __objRest(_j, ["children"]);
-  return React__default.createElement(Text, __spreadValues({
+  return jsx(Text, __spreadProps(__spreadValues({
     variant: "caption",
     color: "primary.800"
-  }, textProps), children);
+  }, textProps), {
+    children
+  }));
 }
 function PlanCardFeatures({ children }) {
-  return React__default.createElement(VerticalStack, {
+  return jsx(VerticalStack, {
     gap: "1",
-    inlineAlign: "center"
-  }, children);
+    inlineAlign: "center",
+    children
+  });
 }
 function PlanCardFeature(_k) {
   var _l = _k, { children } = _l, textProps = __objRest(_l, ["children"]);
-  return React__default.createElement(Text, __spreadValues({
+  return jsx(Text, __spreadProps(__spreadValues({
     variant: "body2",
     color: "primary.800"
-  }, textProps), children);
+  }, textProps), {
+    children
+  }));
 }
 function PlanCardIllustration({ children }) {
-  return React__default.createElement("div", {
-    className: styles.illustration
-  }, children);
+  return jsx("div", {
+    className: styles.illustration,
+    children
+  });
 }
 PlanCard.Button = PlanCardButton;
 PlanCard.Link = PlanCardLink;

package/ProductLayout/index.js

@@ -31,19 +31,20 @@ var __objRest = (source, exclude) => {
   return target;
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const Menu = require("../__chunks__/Menu-OacI_98l.js");
-const Button = require("../__chunks__/Button-5AuHgwU3.js");
-const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
-const Text = require("../__chunks__/Text-CSESKR_s.js");
-const UnstyledButton = require("../__chunks__/UnstyledButton-BFpQ2Irc.js");
+const Button = require("../__chunks__/Button-CQdi4TMV.js");
+const Icon = require("../__chunks__/Icon-BRlbo3RF.js");
+const Text = require("../__chunks__/Text-DkzMEqky.js");
+const UnstyledButton = require("../__chunks__/UnstyledButton-DW8CjaXN.js");
 const utilities_css = require("../utilities/css.js");
-const HelpMenu = require("../__chunks__/HelpMenu-nihaGEVy.js");
+const HelpMenu = require("../__chunks__/HelpMenu-C2t8KQuU.js");
 const tokens = require("../__chunks__/tokens-CJGKzS0r.js");
 const useModalOverlay = require("../__chunks__/useModalOverlay-C4Gci3MA.js");
 const Overlay = require("../__chunks__/Overlay-BNP_t3v4.js");
 const useDialog = require("../__chunks__/useDialog-uxNR0maK.js");
-const TabNav = require("../__chunks__/TabNav-B8aEzVyr.js");
+const TabNav = require("../__chunks__/TabNav-bVgyfEV7.js");
 const useOverlayTrigger = require("../__chunks__/useOverlayTrigger-DP9RbCAF.js");
 const ProductLayout$1 = "_ProductLayout_1orpb_4";
 const body = "_body_1orpb_10";
@@ -53,9 +54,10 @@ const styles$4 = {
 };
 function ProductLayoutContent(props) {
   const { children } = props;
-  return React.createElement("main", {
-    className: styles$4.content
-  }, children);
+  return jsxRuntime.jsx("main", {
+    className: styles$4.content,
+    children
+  });
 }
 const productLayoutMediaQuery = `(min-width: ${tokens.ezuiTokens["breakpoint.lg"]})`;
 const largeScreen$1 = "_largeScreen_1tr81_4";
@@ -77,11 +79,15 @@ function LayoutScreenSizeRenderer(props) {
       mediaQueries.removeEventListener("change", handleChange);
     };
   }, [onChange]);
-  return React.createElement(React.Fragment, null, React.createElement("div", {
-    className: styles$3.largeScreen
-  }, renderOnLargeScreen()), React.createElement("div", {
-    className: styles$3.smallScreen
-  }, renderOnSmallScreen()));
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx("div", {
+      className: styles$3.largeScreen,
+      children: renderOnLargeScreen()
+    }), jsxRuntime.jsx("div", {
+      className: styles$3.smallScreen,
+      children: renderOnSmallScreen()
+    })]
+  });
 }
 const ProductLayoutContext = React.createContext(null);
 const useProductLayout = () => {
@@ -110,64 +116,80 @@ const styles$2 = {
   actions
 };
 function ProductLayoutHeader(props) {
-  return React.createElement("header", null, React.createElement(LayoutScreenSizeRenderer, {
-    renderOnLargeScreen: () => React.createElement(LargeScreenHeader, __spreadValues({}, props)),
-    renderOnSmallScreen: () => React.createElement(SmallScreenHeader, __spreadValues({}, props))
-  }));
+  return jsxRuntime.jsx("header", {
+    children: jsxRuntime.jsx(LayoutScreenSizeRenderer, {
+      renderOnLargeScreen: () => jsxRuntime.jsx(LargeScreenHeader, __spreadValues({}, props)),
+      renderOnSmallScreen: () => jsxRuntime.jsx(SmallScreenHeader, __spreadValues({}, props))
+    })
+  });
 }
 function SmallScreenHeader(props) {
   const { helpMenuItems, onHelpMenuAction, primaryAction, renderSmallScreenLogo, title } = props;
   const { sidebarTriggerProps } = useProductLayout();
-  return React.createElement("div", {
-    className: utilities_css.classNames(styles$2.ProductLayoutHeader, styles$2.smallScreen)
-  }, React.createElement("div", {
-    className: styles$2.smallScreenTopBar
-  }, React.createElement("div", {
-    className: styles$2.logoMenu
-  }, React.createElement(UnstyledButton.UnstyledButton, __spreadValues({
-    className: styles$2.logoMenuBtn
-  }, sidebarTriggerProps), React.createElement(Icon.Icon, {
-    symbol: Menu.Menu
-  }), React.createElement(Text.Text, {
-    visuallyHidden: true
-  }, "Menu")), renderSmallScreenLogo()), React.createElement("div", {
-    className: styles$2.actions
-  }, primaryAction ? React.createElement(Button.Button, {
-    size: "sm",
-    onPress: primaryAction.onAction,
-    isDisabled: primaryAction.isDisabled
-  }, primaryAction.content) : React.createElement(HelpMenu.HelpMenu, {
-    items: helpMenuItems,
-    onAction: onHelpMenuAction
-  }))), React.createElement(Text.Text, {
-    as: "h2",
-    variant: "heading4"
-  }, title));
+  return jsxRuntime.jsxs("div", {
+    className: utilities_css.classNames(styles$2.ProductLayoutHeader, styles$2.smallScreen),
+    children: [jsxRuntime.jsxs("div", {
+      className: styles$2.smallScreenTopBar,
+      children: [jsxRuntime.jsxs("div", {
+        className: styles$2.logoMenu,
+        children: [jsxRuntime.jsxs(UnstyledButton.UnstyledButton, __spreadProps(__spreadValues({
+          className: styles$2.logoMenuBtn
+        }, sidebarTriggerProps), {
+          children: [jsxRuntime.jsx(Icon.Icon, {
+            symbol: Menu.Menu
+          }), jsxRuntime.jsx(Text.Text, {
+            visuallyHidden: true,
+            children: "Menu"
+          })]
+        })), renderSmallScreenLogo()]
+      }), jsxRuntime.jsx("div", {
+        className: styles$2.actions,
+        children: primaryAction ? jsxRuntime.jsx(Button.Button, {
+          size: "sm",
+          onPress: primaryAction.onAction,
+          isDisabled: primaryAction.isDisabled,
+          children: primaryAction.content
+        }) : jsxRuntime.jsx(HelpMenu.HelpMenu, {
+          items: helpMenuItems,
+          onAction: onHelpMenuAction
+        })
+      })]
+    }), jsxRuntime.jsx(Text.Text, {
+      as: "h2",
+      variant: "heading4",
+      children: title
+    })]
+  });
 }
 function LargeScreenHeader(props) {
   const { helpMenuItems, onHelpMenuAction, primaryAction, secondaryAction, title } = props;
-  return React.createElement("div", {
-    className: utilities_css.classNames(styles$2.ProductLayoutHeader, styles$2.largeScreen)
-  }, React.createElement(Text.Text, {
-    as: "h2",
-    variant: "heading4"
-  }, title), React.createElement("div", {
-    className: styles$2.actions
-  }, React.createElement(HelpMenu.HelpMenu, {
-    items: helpMenuItems,
-    onAction: onHelpMenuAction
-  }), (primaryAction || secondaryAction) && React.createElement(ActionDivider, null), secondaryAction && React.createElement(Button.Button, {
-    variant: "outlined",
-    color: "support",
-    onPress: secondaryAction.onAction,
-    isDisabled: secondaryAction.isDisabled
-  }, secondaryAction.content), primaryAction && React.createElement(Button.Button, {
-    onPress: primaryAction.onAction,
-    isDisabled: primaryAction.isDisabled
-  }, primaryAction.content)));
+  return jsxRuntime.jsxs("div", {
+    className: utilities_css.classNames(styles$2.ProductLayoutHeader, styles$2.largeScreen),
+    children: [jsxRuntime.jsx(Text.Text, {
+      as: "h2",
+      variant: "heading4",
+      children: title
+    }), jsxRuntime.jsxs("div", {
+      className: styles$2.actions,
+      children: [jsxRuntime.jsx(HelpMenu.HelpMenu, {
+        items: helpMenuItems,
+        onAction: onHelpMenuAction
+      }), (primaryAction || secondaryAction) && jsxRuntime.jsx(ActionDivider, {}), secondaryAction && jsxRuntime.jsx(Button.Button, {
+        variant: "outlined",
+        color: "support",
+        onPress: secondaryAction.onAction,
+        isDisabled: secondaryAction.isDisabled,
+        children: secondaryAction.content
+      }), primaryAction && jsxRuntime.jsx(Button.Button, {
+        onPress: primaryAction.onAction,
+        isDisabled: primaryAction.isDisabled,
+        children: primaryAction.content
+      })]
+    })]
+  });
 }
 function ActionDivider() {
-  return React.createElement("div", {
+  return jsxRuntime.jsx("div", {
     className: styles$2.divider
   });
 }
@@ -186,26 +208,31 @@ function ProductLayoutSidebar(props) {
       sidebarTriggerState.close();
     }
   }, [sidebarTriggerState]);
-  return React.createElement(LayoutScreenSizeRenderer, {
+  return jsxRuntime.jsx(LayoutScreenSizeRenderer, {
     onChange: handleScreenSizeChange,
-    renderOnLargeScreen: () => React.createElement(LargeScreenSidebar, __spreadValues({}, props)),
-    renderOnSmallScreen: () => React.createElement(SmallScreenSidebar, __spreadValues({}, props))
+    renderOnLargeScreen: () => jsxRuntime.jsx(LargeScreenSidebar, __spreadValues({}, props)),
+    renderOnSmallScreen: () => jsxRuntime.jsx(SmallScreenSidebar, __spreadValues({}, props))
   });
 }
 function LargeScreenSidebar(props) {
   const { children } = props;
   const { sidebarTriggerState } = useProductLayout();
   const className = utilities_css.classNames(styles$1.ProductLayoutSidebar, sidebarTriggerState.isOpen && styles$1.open);
-  return React.createElement("div", {
+  return jsxRuntime.jsx("div", {
     role: "region",
     "aria-label": "Sidebar",
-    className
-  }, children);
+    className,
+    children
+  });
 }
 function SmallScreenSidebar(props) {
   const { children } = props;
   const { sidebarTriggerState } = useProductLayout();
-  return sidebarTriggerState.isOpen ? React.createElement(DialogSidebarOverlay, null, React.createElement(DialogSidebar, null, children)) : null;
+  return sidebarTriggerState.isOpen ? jsxRuntime.jsx(DialogSidebarOverlay, {
+    children: jsxRuntime.jsx(DialogSidebar, {
+      children
+    })
+  }) : null;
 }
 function DialogSidebar(props) {
   const { children } = props;
@@ -215,10 +242,11 @@ function DialogSidebar(props) {
     "aria-label": "Sidebar"
   }, ref);
   const className = utilities_css.classNames(styles$1.ProductLayoutSidebar, styles$1.open);
-  return React.createElement("div", __spreadProps(__spreadValues({}, dialogProps), {
+  return jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, dialogProps), {
     ref,
-    className
-  }), children);
+    className,
+    children
+  }));
 }
 function DialogSidebarOverlay(props) {
   var _a;
@@ -229,13 +257,18 @@ function DialogSidebarOverlay(props) {
     isDismissable: true,
     isKeyboardDismissDisabled: false
   }, sidebarTriggerState, ref);
-  return React.createElement(Overlay.$337b884510726a0d$export$c6fdb837b070b4ff, {
-    portalContainer: (_a = layoutContainerRef.current) != null ? _a : void 0
-  }, React.createElement("div", __spreadValues({
-    className: styles$1.overlay
-  }, underlayProps), React.createElement("div", __spreadValues({
-    ref
-  }, modalProps), children)));
+  return jsxRuntime.jsx(Overlay.$337b884510726a0d$export$c6fdb837b070b4ff, {
+    portalContainer: (_a = layoutContainerRef.current) != null ? _a : void 0,
+    children: jsxRuntime.jsx("div", __spreadProps(__spreadValues({
+      className: styles$1.overlay
+    }, underlayProps), {
+      children: jsxRuntime.jsx("div", __spreadProps(__spreadValues({
+        ref
+      }, modalProps), {
+        children
+      }))
+    }))
+  });
 }
 const ProductLayoutTabbedContent$1 = "_ProductLayoutTabbedContent_1nnkc_4";
 const styles = {
@@ -243,9 +276,14 @@ const styles = {
 };
 function ProductLayoutTabbedContent(props) {
   const _a = props, { children, tabs } = _a, tabNavProps = __objRest(_a, ["children", "tabs"]);
-  return React.createElement("div", {
-    className: styles.ProductLayoutTabbedContent
-  }, React.createElement(TabNav.TabNav, __spreadValues({}, tabNavProps), tabs), React.createElement("main", null, children));
+  return jsxRuntime.jsxs("div", {
+    className: styles.ProductLayoutTabbedContent,
+    children: [jsxRuntime.jsx(TabNav.TabNav, __spreadProps(__spreadValues({}, tabNavProps), {
+      children: tabs
+    })), jsxRuntime.jsx("main", {
+      children
+    })]
+  });
 }
 function ProductLayout(props) {
   const { sidebar, header, content } = props;
@@ -262,14 +300,17 @@ function ProductLayout(props) {
       sidebarOverlayProps: overlayProps
     };
   }, [state, triggerProps, overlayProps]);
-  return React.createElement(ProductLayoutContext.Provider, {
-    value: context
-  }, React.createElement("div", {
-    className: styles$4.ProductLayout,
-    ref: layoutContainerRef
-  }, sidebar, React.createElement("div", {
-    className: styles$4.body
-  }, header, content)));
+  return jsxRuntime.jsx(ProductLayoutContext.Provider, {
+    value: context,
+    children: jsxRuntime.jsxs("div", {
+      className: styles$4.ProductLayout,
+      ref: layoutContainerRef,
+      children: [sidebar, jsxRuntime.jsxs("div", {
+        className: styles$4.body,
+        children: [header, content]
+      })]
+    })
+  });
 }
 ProductLayout.Sidebar = ProductLayoutSidebar;
 ProductLayout.Header = ProductLayoutHeader;