@easypost/easy-ui 1.0.0-alpha.111 → 1.0.0-alpha.113

package/NexusLayout/index.mjs

@@ -17,19 +17,20 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import React__default, { useState, useCallback, forwardRef, useRef, useId, useMemo, useContext } from "react";
+import { j as jsxRuntimeExports } from "../__chunks__/jsx-runtime-DTpFD6nx.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
-import { E as EasyPostLogo } from "../__chunks__/EasyPostLogo-B3Um5vvS.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 { E as EasyPostLogo } from "../__chunks__/EasyPostLogo-tf6CCEAq.mjs";
+import React__default, { useState, useCallback, forwardRef, useRef, useId, useMemo, useContext } from "react";
+import { H as HorizontalStack } from "../__chunks__/HorizontalStack-BkE82C73.mjs";
+import { I as Icon } from "../__chunks__/Icon-DzTns8u5.mjs";
+import { M as Menu } from "../__chunks__/Menu-C2F4fvhd.mjs";
+import { T as Text } from "../__chunks__/Text-u9mYLeWj.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-Cbdpucbh.mjs";
 const button = "_button_14248_4";
 const focused$2 = "_focused_14248_25";
 const hovered$2 = "_hovered_14248_37";
@@ -48,11 +49,12 @@ const styles$4 = {
 };
 function NexusLayoutActions(props) {
   const { children } = props;
-  return React__default.createElement(HorizontalStack, {
+  return jsxRuntimeExports.jsx(HorizontalStack, {
     wrap: false,
     gap: "0.5",
-    align: "end"
-  }, children);
+    align: "end",
+    children
+  });
 }
 function NexusLayoutMenuAction(props) {
   const { accessibilityLabel = "Actions", iconSymbol, children, renderBadge } = props;
@@ -63,18 +65,25 @@ function NexusLayoutMenuAction(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 jsxRuntimeExports.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: [jsxRuntimeExports.jsx(Menu.Trigger, {
+      children: jsxRuntimeExports.jsxs(PressableButton, __spreadProps(__spreadValues({
+        className
+      }, $3ef42575df84b30b$export$9d1611c77c2fe928(focusProps, hoverProps)), {
+        children: [jsxRuntimeExports.jsx(Text, {
+          visuallyHidden: true,
+          children: accessibilityLabel
+        }), jsxRuntimeExports.jsx(Icon, {
+          symbol: iconSymbol
+        }), renderBadge && jsxRuntimeExports.jsx("div", {
+          className: styles$4.badgeContainer,
+          children: renderBadge()
+        })]
+      }))
+    }), children]
+  });
 }
 function NexusLayoutLinkAction(props) {
   const { accessibilityLabel = "Actions", iconSymbol, renderBadge, isSelected } = props;
@@ -83,28 +92,32 @@ function NexusLayoutLinkAction(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 jsxRuntimeExports.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: [jsxRuntimeExports.jsx(Text, {
+      visuallyHidden: true,
+      children: accessibilityLabel
+    }), jsxRuntimeExports.jsx(Icon, {
+      symbol: iconSymbol
+    }), renderBadge && jsxRuntimeExports.jsx("div", {
+      className: styles$4.badgeContainer,
+      children: renderBadge()
+    })]
+  }));
 }
 function NexusLayoutActionBadge(props) {
   const { children } = props;
-  return React__default.createElement("div", {
-    className: styles$4.badge
-  }, children);
+  return jsxRuntimeExports.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 jsxRuntimeExports.jsx("button", __spreadProps(__spreadValues({}, pressProps), {
     ref,
     className: classNames(pressProps.className)
   }));
@@ -120,39 +133,45 @@ const styles$3 = {
 };
 function NexusLayoutMultipageContainer(props) {
   const { children } = props;
-  return React__default.createElement("div", {
-    className: styles$3.container
-  }, children);
+  return jsxRuntimeExports.jsx("div", {
+    className: styles$3.container,
+    children
+  });
 }
 function NexusLayoutMultipageSidebar(props) {
   const { children } = props;
-  return React__default.createElement("div", {
+  return jsxRuntimeExports.jsx("div", {
     role: "region",
-    className: styles$3.sidebar
-  }, children);
+    className: styles$3.sidebar,
+    children
+  });
 }
 function NexusLayoutMultipageContent(props) {
   const { children } = props;
-  return React__default.createElement("div", {
-    className: styles$3.content
-  }, React__default.createElement(VerticalStack, {
-    gap: "2"
-  }, children));
+  return jsxRuntimeExports.jsx("div", {
+    className: styles$3.content,
+    children: jsxRuntimeExports.jsx(VerticalStack, {
+      gap: "2",
+      children
+    })
+  });
 }
 function NexusLayoutMultipageHeader(props) {
   const { children } = props;
-  return React__default.createElement(HorizontalStack, {
+  return jsxRuntimeExports.jsx(HorizontalStack, {
     as: "header",
     blockAlign: "center",
-    align: "space-between"
-  }, children);
+    align: "space-between",
+    children
+  });
 }
 function NexusLayoutMultipageTitle(props) {
   const { children } = props;
-  return React__default.createElement(Text, {
+  return jsxRuntimeExports.jsx(Text, {
     as: "h3",
-    variant: "heading5"
-  }, children);
+    variant: "heading5",
+    children
+  });
 }
 const link$1 = "_link_os35m_4";
 const focused$1 = "_focused_os35m_13";
@@ -180,26 +199,31 @@ function NexusLayoutMultipageSidebarNav(props) {
       selectedHref
     };
   }, [selectedHref]);
-  return React__default.createElement(SidebarNavContext.Provider, {
-    value: context
-  }, React__default.createElement(VerticalStack, {
-    as: "nav",
-    gap: "2",
-    "aria-labelledby": titleId
-  }, React__default.createElement(Text, {
-    as: "h2",
-    variant: "heading4",
-    id: titleId
-  }, title), children));
+  return jsxRuntimeExports.jsx(SidebarNavContext.Provider, {
+    value: context,
+    children: jsxRuntimeExports.jsxs(VerticalStack, {
+      as: "nav",
+      gap: "2",
+      "aria-labelledby": titleId,
+      children: [jsxRuntimeExports.jsx(Text, {
+        as: "h2",
+        variant: "heading4",
+        id: titleId,
+        children: title
+      }), children]
+    })
+  });
 }
 function NexusLayoutMultipageSidebarNavSection(props) {
   const { title, children } = props;
-  return React__default.createElement(VerticalStack, {
+  return jsxRuntimeExports.jsxs(VerticalStack, {
     gap: "2",
-    inlineAlign: "start"
-  }, React__default.createElement(Text, {
-    variant: "overline"
-  }, title), children);
+    inlineAlign: "start",
+    children: [jsxRuntimeExports.jsx(Text, {
+      variant: "overline",
+      children: title
+    }), children]
+  });
 }
 function NexusLayoutMultipageSidebarNavLink(props) {
   const { href, iconSymbol, children } = props;
@@ -210,17 +234,19 @@ function NexusLayoutMultipageSidebarNavLink(props) {
   const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
   const isSelected = href === selectedHref;
   const className = classNames(styles$2.link, isFocusVisible && styles$2.focused, isHovered && styles$2.hovered, isSelected && styles$2.selected);
-  return React__default.createElement("a", __spreadProps(__spreadValues({
+  return jsxRuntimeExports.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: "body2",
-    weight: isSelected ? "semibold" : void 0
-  }, children));
+    "aria-current": isSelected ? "page" : void 0,
+    children: [jsxRuntimeExports.jsx(Icon, {
+      symbol: iconSymbol
+    }), jsxRuntimeExports.jsx(Text, {
+      variant: "body2",
+      weight: isSelected ? "semibold" : void 0,
+      children
+    })]
+  }));
 }
 const link = "_link_q3unw_4";
 const focused = "_focused_q3unw_23";
@@ -247,12 +273,14 @@ function NexusLayoutNav(props) {
       selectedHref
     };
   }, [selectedHref]);
-  return React__default.createElement(NexusLayoutNavContext.Provider, {
-    value: context
-  }, React__default.createElement(HorizontalStack, {
-    as: "nav",
-    "aria-label": ariaLabel
-  }, children));
+  return jsxRuntimeExports.jsx(NexusLayoutNavContext.Provider, {
+    value: context,
+    children: jsxRuntimeExports.jsx(HorizontalStack, {
+      as: "nav",
+      "aria-label": ariaLabel,
+      children
+    })
+  });
 }
 function NexusLayoutNavLink(props) {
   const { href, iconSymbol, children } = props;
@@ -263,17 +291,19 @@ function NexusLayoutNavLink(props) {
   const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
   const isSelected = href === selectedHref;
   const className = classNames(styles$1.link, isFocusVisible && styles$1.focused, isHovered && styles$1.hovered, isSelected && styles$1.selected);
-  return React__default.createElement("a", __spreadProps(__spreadValues({
+  return jsxRuntimeExports.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",
-    weight: "semibold"
-  }, children));
+    "aria-current": isSelected ? "page" : void 0,
+    children: [jsxRuntimeExports.jsx(Icon, {
+      symbol: iconSymbol
+    }), jsxRuntimeExports.jsx(Text, {
+      variant: "subtitle2",
+      weight: "semibold",
+      children
+    })]
+  }));
 }
 const NexusLayout$1 = "_NexusLayout_1gn4l_4";
 const backgroundDecoration01 = "_backgroundDecoration01_1gn4l_13";
@@ -290,27 +320,31 @@ const styles = {
 function NexusLayout(props) {
   const { backgroundDecoration = "01", children } = props;
   const className = classNames(styles.NexusLayout, styles[variationName("backgroundDecoration", backgroundDecoration)]);
-  return React__default.createElement("div", {
-    className
-  }, children);
+  return jsxRuntimeExports.jsx("div", {
+    className,
+    children
+  });
 }
 function NexusLayoutHeader(props) {
   const { children } = props;
-  return React__default.createElement("header", {
-    className: styles.header
-  }, children);
+  return jsxRuntimeExports.jsx("header", {
+    className: styles.header,
+    children
+  });
 }
 function NexusLayoutLogo(props) {
-  const { children = React__default.createElement(EasyPostLogo, null) } = props;
-  return React__default.createElement("div", {
-    className: styles.logo
-  }, children);
+  const { children = jsxRuntimeExports.jsx(EasyPostLogo, {}) } = props;
+  return jsxRuntimeExports.jsx("div", {
+    className: styles.logo,
+    children
+  });
 }
 function NexusLayoutContent(props) {
   const { children } = props;
-  return React__default.createElement("main", {
-    className: styles.content
-  }, children);
+  return jsxRuntimeExports.jsx("main", {
+    className: styles.content,
+    children
+  });
 }
 NexusLayout.Header = NexusLayoutHeader;
 NexusLayout.Logo = NexusLayoutLogo;

package/Notification/NotificationTransition.d.ts

@@ -5,7 +5,7 @@ export type NotificationTransitionProps = {
      * Children function that receives a ref to the node being transitioned.
      */
     children: ChildrenFunction<{
-        nodeRef: RefObject<HTMLDivElement>;
+        nodeRef: RefObject<HTMLDivElement | null>;
     }>;
     /**
      * Unique key for the transition.

package/Notification/NotificationTransition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationTransition.d.ts","sourceRoot":"","sources":["../../src/Notification/NotificationTransition.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAY,SAAS,EAAe,MAAM,OAAO,CAAC;AAIhF,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;AAElD,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,QAAQ,EAAE,gBAAgB,CAAC;QAAE,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,CAAA;KAAE,CAAC,CAAC;IAEnE;;OAEG;IACH,aAAa,EAAE,GAAG,CAAC;IAEnB;;OAEG;IACH,yBAAyB,CAAC,EAAE,CAAC,mBAAmB,EAAE,OAAO,KAAK,IAAI,CAAC;CACpE,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,aAAa,EACb,yBAAoC,EACpC,GAAG,oBAAoB,EACxB,EAAE,2BAA2B,qBAiC7B;AAED;;;GAGG;AACH,wBAAgB,iCAAiC;;qDAES,OAAO;EAShE"}
+{"version":3,"file":"NotificationTransition.d.ts","sourceRoot":"","sources":["../../src/Notification/NotificationTransition.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAY,SAAS,EAAe,MAAM,OAAO,CAAC;AAIhF,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;AAElD,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,QAAQ,EAAE,gBAAgB,CAAC;QAAE,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;KAAE,CAAC,CAAC;IAE1E;;OAEG;IACH,aAAa,EAAE,GAAG,CAAC;IAEnB;;OAEG;IACH,yBAAyB,CAAC,EAAE,CAAC,mBAAmB,EAAE,OAAO,KAAK,IAAI,CAAC;CACpE,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,aAAa,EACb,yBAAoC,EACpC,GAAG,oBAAoB,EACxB,EAAE,2BAA2B,qBAiC7B;AAED;;;GAGG;AACH,wBAAgB,iCAAiC;;qDAES,OAAO;EAShE"}

package/Notification/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Notification = require("../__chunks__/Notification-vF_YGVIP.js");
+const Notification = require("../__chunks__/Notification-CeJn5Qq1.js");
 exports.Notification = Notification.Notification;
 exports.NotificationContext = Notification.NotificationContext;
 exports.NotificationProvider = Notification.NotificationProvider;

package/Notification/index.mjs

@@ -1,4 +1,4 @@
-import { N, a, b, u } from "../__chunks__/Notification-BoT3Hm0B.mjs";
+import { N, a, b, u } from "../__chunks__/Notification-CgUT2gv6.mjs";
 export {
   N as Notification,
   a as NotificationContext,

package/Pagination/index.js

@@ -31,14 +31,15 @@ var __objRest = (source, exclude) => {
   return target;
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../__chunks__/jsx-runtime-CH1d66I3.js");
 const React = require("react");
 const KeyboardDoubleArrowRight = require("../__chunks__/KeyboardDoubleArrowRight-Ber8mUIO.js");
-const HorizontalStack = require("../__chunks__/HorizontalStack-CXpjASZi.js");
-const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
-const UnstyledButton = require("../__chunks__/UnstyledButton-BFpQ2Irc.js");
+const HorizontalStack = require("../__chunks__/HorizontalStack-DidoI4Ks.js");
+const Icon = require("../__chunks__/Icon-BVa5ddiD.js");
+const UnstyledButton = require("../__chunks__/UnstyledButton-_YQekhlm.js");
 const ExpandMore400 = require("../__chunks__/ExpandMore400-CJpvxyJm.js");
-const Text = require("../__chunks__/Text-CSESKR_s.js");
-const Menu = require("../__chunks__/Menu-Kfc6nxFP.js");
+const Text = require("../__chunks__/Text-C4CEsglh.js");
+const Menu = require("../__chunks__/Menu-Du8SsMeJ.js");
 const utilities_react = require("../utilities/react.js");
 const utilities_css = require("../utilities/css.js");
 const menuButton = "_menuButton_bdft3_4";
@@ -51,38 +52,47 @@ const styles = {
 };
 function PaginationButton(props) {
   const _a = props, { symbol } = _a, buttonProps = __objRest(_a, ["symbol"]);
-  return React.createElement(UnstyledButton.UnstyledButton, __spreadProps(__spreadValues({}, buttonProps), {
-    className: styles.arrowButton
-  }), React.createElement(Icon.Icon, {
-    symbol,
-    size: "md"
+  return jsxRuntime.jsxRuntimeExports.jsx(UnstyledButton.UnstyledButton, __spreadProps(__spreadValues({}, buttonProps), {
+    className: styles.arrowButton,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, {
+      symbol,
+      size: "md"
+    })
   }));
 }
 function PaginationDropdown(props) {
   const { page, count, onSelect, isDisabled } = props;
-  return React.createElement(Menu.Menu, {
-    isDisabled
-  }, React.createElement(Menu.Menu.Trigger, null, React.createElement(UnstyledButton.UnstyledButton, {
-    "aria-label": "dropdown",
-    className: styles.menuButton,
-    isDisabled
-  }, React.createElement(HorizontalStack.HorizontalStack, {
-    blockAlign: "center",
-    wrap: false
-  }, React.createElement(Text.Text, {
-    variant: "body2"
-  }, `${page} of ${count}`), React.createElement(Icon.Icon, {
-    symbol: ExpandMore400.ExpandMore400,
-    size: "2xs"
-  })))), React.createElement(Menu.Menu.Overlay, {
-    onAction: (key) => onSelect(Number(key))
-  }, numberToArray(count).map((pageNumber) => React.createElement(Menu.Menu.Item, {
-    key: pageNumber,
-    "aria-label": `${pageNumber} of ${count}`
-  }, React.createElement(Text.Text, {
-    variant: "body2",
-    color: "neutral.900"
-  }, `${pageNumber} of ${count}`)))));
+  return jsxRuntime.jsxRuntimeExports.jsxs(Menu.Menu, {
+    isDisabled,
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Menu.Menu.Trigger, {
+      children: jsxRuntime.jsxRuntimeExports.jsx(UnstyledButton.UnstyledButton, {
+        "aria-label": "dropdown",
+        className: styles.menuButton,
+        isDisabled,
+        children: jsxRuntime.jsxRuntimeExports.jsxs(HorizontalStack.HorizontalStack, {
+          blockAlign: "center",
+          wrap: false,
+          children: [jsxRuntime.jsxRuntimeExports.jsx(Text.Text, {
+            variant: "body2",
+            children: `${page} of ${count}`
+          }), jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, {
+            symbol: ExpandMore400.ExpandMore400,
+            size: "2xs"
+          })]
+        })
+      })
+    }), jsxRuntime.jsxRuntimeExports.jsx(Menu.Menu.Overlay, {
+      onAction: (key) => onSelect(Number(key)),
+      children: numberToArray(count).map((pageNumber) => jsxRuntime.jsxRuntimeExports.jsx(Menu.Menu.Item, {
+        "aria-label": `${pageNumber} of ${count}`,
+        children: jsxRuntime.jsxRuntimeExports.jsx(Text.Text, {
+          variant: "body2",
+          color: "neutral.900",
+          children: `${pageNumber} of ${count}`
+        })
+      }, pageNumber))
+    })]
+  });
 }
 function numberToArray(num) {
   return Array.from({
@@ -96,24 +106,26 @@ function Pagination(props) {
   if (children && utilities_react.getDisplayNameFromReactNode(children) !== PaginationDropdown.displayName) {
     throw new Error(`children must be ${PaginationDropdown.displayName}`);
   }
-  return React.createElement("nav", {
+  return jsxRuntime.jsxRuntimeExports.jsx("nav", {
     "aria-label": label,
-    className
-  }, React.createElement(HorizontalStack.HorizontalStack, {
-    wrap: false
-  }, React.createElement(PaginationButton, {
-    "aria-label": "Previous",
-    onPress: onPrevious,
-    isDisabled: !hasPrevious || isDisabled,
-    symbol: KeyboardDoubleArrowRight.KeyboardDoubleArrowLeft
-  }), children && React.cloneElement(children, {
-    isDisabled
-  }), React.createElement(PaginationButton, {
-    "aria-label": "Next",
-    onPress: onNext,
-    isDisabled: !hasNext || isDisabled,
-    symbol: KeyboardDoubleArrowRight.KeyboardDoubleArrowRight
-  })));
+    className,
+    children: jsxRuntime.jsxRuntimeExports.jsxs(HorizontalStack.HorizontalStack, {
+      wrap: false,
+      children: [jsxRuntime.jsxRuntimeExports.jsx(PaginationButton, {
+        "aria-label": "Previous",
+        onPress: onPrevious,
+        isDisabled: !hasPrevious || isDisabled,
+        symbol: KeyboardDoubleArrowRight.KeyboardDoubleArrowLeft
+      }), children && React.cloneElement(children, {
+        isDisabled
+      }), jsxRuntime.jsxRuntimeExports.jsx(PaginationButton, {
+        "aria-label": "Next",
+        onPress: onNext,
+        isDisabled: !hasNext || isDisabled,
+        symbol: KeyboardDoubleArrowRight.KeyboardDoubleArrowRight
+      })]
+    })
+  });
 }
 Pagination.Dropdown = PaginationDropdown;
 exports.Pagination = Pagination;