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

package/VerticalNav/index.js

@@ -31,16 +31,17 @@ var __objRest = (source, exclude) => {
   return target;
 };
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
+const jsxRuntime = require("react/jsx-runtime");
 const Item$1 = require("../__chunks__/Item-h_oPjYVR.js");
 const utilities_css = require("../utilities/css.js");
-const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
-const Text = require("../__chunks__/Text-CSESKR_s.js");
+const Icon = require("../__chunks__/Icon-BRlbo3RF.js");
+const Text = require("../__chunks__/Text-DkzMEqky.js");
 const useHover = require("../__chunks__/useHover-Ck1otl-j.js");
 const mergeProps = require("../__chunks__/mergeProps-DLPcevok.js");
+const React = require("react");
 const useListState = require("../__chunks__/useListState-DDaaA7mG.js");
 const ArrowForwardIos = require("../__chunks__/ArrowForwardIos-DpRiDPNZ.js");
-const UnstyledButton = require("../__chunks__/UnstyledButton-BFpQ2Irc.js");
+const UnstyledButton = require("../__chunks__/UnstyledButton-DW8CjaXN.js");
 const useTreeState = require("../__chunks__/useTreeState-Cb1U-iBl.js");
 function Item(_props) {
   return null;
@@ -66,21 +67,26 @@ const styles$5 = {
 };
 function Container(props) {
   const { renderBanner, renderLogo, supplementaryAction, ["aria-label"]: ariaLabel, ["aria-labelledby"]: ariaLabelledBy, ["aria-describedby"]: ariaDescribedBy, ["aria-details"]: ariaDetails, children } = props;
-  return React.createElement("div", {
-    className: styles$5.Container
-  }, renderBanner && React.createElement("div", {
-    className: styles$5.banner
-  }, renderBanner()), renderLogo && React.createElement("div", {
-    className: styles$5.logo
-  }, renderLogo()), React.createElement("nav", {
-    className: styles$5.nav,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    "aria-details": ariaDetails
-  }, children), supplementaryAction && React.createElement("div", {
-    className: styles$5.supplementaryActionContainer
-  }, supplementaryAction));
+  return jsxRuntime.jsxs("div", {
+    className: styles$5.Container,
+    children: [renderBanner && jsxRuntime.jsx("div", {
+      className: styles$5.banner,
+      children: renderBanner()
+    }), renderLogo && jsxRuntime.jsx("div", {
+      className: styles$5.logo,
+      children: renderLogo()
+    }), jsxRuntime.jsx("nav", {
+      className: styles$5.nav,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-details": ariaDetails,
+      children
+    }), supplementaryAction && jsxRuntime.jsx("div", {
+      className: styles$5.supplementaryActionContainer,
+      children: supplementaryAction
+    })]
+  });
 }
 const NavItem$1 = "_NavItem_1qxcs_4";
 const hovered$1 = "_hovered_1qxcs_11";
@@ -101,19 +107,26 @@ function NavItem(props) {
   const _a = item.props, { as: As = "a", children, icon, label, textValue: _textValue } = _a, linkProps = __objRest(_a, ["as", "children", "icon", "label", "textValue"]);
   const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456({});
   const className = utilities_css.classNames(navItemStyles.NavItem, isHovered && navItemStyles.hovered, classNameFromParent);
-  return React.createElement("div", {
-    className
-  }, React.createElement("div", {
-    className: navItemStyles.linkContainer
-  }, React.createElement(As, __spreadValues({
-    className: navItemStyles.link,
-    "aria-current": isSelected ? "true" : void 0,
-    "aria-expanded": isExpanded ? "true" : void 0
-  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, linkProps)), icon && React.createElement(Icon.Icon, {
-    symbol: icon
-  }), React.createElement(Text.Text, {
-    variant: "subtitle2"
-  }, label)), expansionSlot), children && isChildrenVisible && React.createElement(React.Fragment, null, item.rendered));
+  return jsxRuntime.jsxs("div", {
+    className,
+    children: [jsxRuntime.jsxs("div", {
+      className: navItemStyles.linkContainer,
+      children: [jsxRuntime.jsxs(As, __spreadProps(__spreadValues({
+        className: navItemStyles.link,
+        "aria-current": isSelected ? "true" : void 0,
+        "aria-expanded": isExpanded ? "true" : void 0
+      }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, linkProps)), {
+        children: [icon && jsxRuntime.jsx(Icon.Icon, {
+          symbol: icon
+        }), jsxRuntime.jsx(Text.Text, {
+          variant: "subtitle2",
+          children: label
+        })]
+      })), expansionSlot]
+    }), children && isChildrenVisible && jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: item.rendered
+    })]
+  });
 }
 const VerticalNavTypeContext = React.createContext(null);
 const useVerticalNavType = () => {
@@ -129,23 +142,24 @@ function ListVerticalNav(props) {
     selectedKeys: selectedKey ? [selectedKey] : [],
     selectionMode: "single"
   }));
-  return React.createElement(VerticalNavTypeContext.Provider, {
-    value: "list"
-  }, React.createElement(Container, __spreadValues({}, props), [...state.collection].map((item) => React.createElement(ListNavItem, {
-    key: item.key,
-    item,
-    state
-  }))));
+  return jsxRuntime.jsx(VerticalNavTypeContext.Provider, {
+    value: "list",
+    children: jsxRuntime.jsx(Container, __spreadProps(__spreadValues({}, props), {
+      children: [...state.collection].map((item) => jsxRuntime.jsx(ListNavItem, {
+        item,
+        state
+      }, item.key))
+    }))
+  });
 }
 function ListNavItem({ item, state }) {
   const isSelected = state.selectionManager.isSelected(item.key);
-  return React.createElement(NavItem, {
-    key: item.key,
+  return jsxRuntime.jsx(NavItem, {
     item,
     className: utilities_css.classNames(isSelected && navItemStyles[utilities_css.variationName("selected", "list")]),
     isChildrenVisible: isSelected,
     isSelected
-  });
+  }, item.key);
 }
 const SubnavItemDot$1 = "_SubnavItemDot_145t2_4";
 const cozy = "_cozy_145t2_16";
@@ -157,7 +171,7 @@ const styles$4 = {
 };
 function SubnavItemDot({ isCozy, isVisible }) {
   const className = utilities_css.classNames(styles$4.SubnavItemDot, isCozy && styles$4.cozy, isVisible && styles$4.visible);
-  return React.createElement("span", {
+  return jsxRuntime.jsx("span", {
     className
   });
 }
@@ -181,18 +195,22 @@ function SubnavItem(props) {
   if (icon) {
     throw new Error("icon is unsupported on <Subnav.Item />s");
   }
-  return React.createElement("div", {
-    className
-  }, React.createElement(As, __spreadValues({
-    className: styles$3.link,
-    "aria-current": isSelected ? "true" : void 0
-  }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, linkProps)), (type === "list" || level > 1) && React.createElement(SubnavItemDot, {
-    isCozy: type === "list",
-    isVisible: isSelected
-  }), React.createElement(Text.Text, {
-    variant: "body2",
-    weight: isSelected && level === 1 ? "medium" : "normal"
-  }, label)), item.props.children && item.rendered);
+  return jsxRuntime.jsxs("div", {
+    className,
+    children: [jsxRuntime.jsxs(As, __spreadProps(__spreadValues({
+      className: styles$3.link,
+      "aria-current": isSelected ? "true" : void 0
+    }, mergeProps.$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, linkProps)), {
+      children: [(type === "list" || level > 1) && jsxRuntime.jsx(SubnavItemDot, {
+        isCozy: type === "list",
+        isVisible: isSelected
+      }), jsxRuntime.jsx(Text.Text, {
+        variant: "body2",
+        weight: isSelected && level === 1 ? "medium" : "normal",
+        children: label
+      })]
+    })), item.props.children && item.rendered]
+  });
 }
 const Subnav$1 = "_Subnav_1eh4a_4";
 const styles$2 = {
@@ -207,16 +225,17 @@ function Subnav(props) {
     selectedKeys: selectedKey ? [selectedKey] : [],
     selectionMode: "single"
   }));
-  return React.createElement(SubnavLevelContext.Provider, {
-    value: level
-  }, React.createElement("div", {
-    className: styles$2.Subnav
-  }, [...state.collection].map((item, i) => React.createElement(SubnavItem, {
-    key: String(i),
-    level,
-    state,
-    item
-  }))));
+  return jsxRuntime.jsx(SubnavLevelContext.Provider, {
+    value: level,
+    children: jsxRuntime.jsx("div", {
+      className: styles$2.Subnav,
+      children: [...state.collection].map((item, i) => jsxRuntime.jsx(SubnavItem, {
+        level,
+        state,
+        item
+      }, String(i)))
+    })
+  });
 }
 const SupplementaryAction$1 = "_SupplementaryAction_1i552_4";
 const styles$1 = {
@@ -224,14 +243,17 @@ const styles$1 = {
 };
 const SupplementaryAction = React.forwardRef((props, ref) => {
   const _a = props, { as: As = "button", children } = _a, elementProps = __objRest(_a, ["as", "children"]);
-  return React.createElement(As, __spreadValues({
+  return jsxRuntime.jsxs(As, __spreadProps(__spreadValues({
     ref,
     className: styles$1.SupplementaryAction
-  }, elementProps), React.createElement(Text.Text, {
-    variant: "subtitle2"
-  }, children), React.createElement(Icon.Icon, {
-    symbol: ArrowForwardIos.ArrowForwardIos,
-    size: "xs"
+  }, elementProps), {
+    children: [jsxRuntime.jsx(Text.Text, {
+      variant: "subtitle2",
+      children
+    }), jsxRuntime.jsx(Icon.Icon, {
+      symbol: ArrowForwardIos.ArrowForwardIos,
+      size: "xs"
+    })]
   }));
 });
 SupplementaryAction.displayName = "SupplementaryAction";
@@ -243,14 +265,17 @@ const styles = {
 };
 function ExpandButton(_a) {
   var _b = _a, { isExpanded } = _b, props = __objRest(_b, ["isExpanded"]);
-  return React.createElement(UnstyledButton.UnstyledButton, __spreadValues({
+  return jsxRuntime.jsxs(UnstyledButton.UnstyledButton, __spreadProps(__spreadValues({
     className: utilities_css.classNames(styles.ExpandButton, isExpanded && styles.expanded)
-  }, props), React.createElement(Icon.Icon, {
-    symbol: ArrowForwardIos.ArrowForwardIos,
-    size: "2xs"
-  }), React.createElement(Text.Text, {
-    visuallyHidden: true
-  }, "Expand"));
+  }, props), {
+    children: [jsxRuntime.jsx(Icon.Icon, {
+      symbol: ArrowForwardIos.ArrowForwardIos,
+      size: "2xs"
+    }), jsxRuntime.jsx(Text.Text, {
+      visuallyHidden: true,
+      children: "Expand"
+    })]
+  }));
 }
 function TreeVerticalNav(props) {
   const _a = props, { selectedKey } = _a, treeStateProps = __objRest(_a, ["selectedKey"]);
@@ -258,24 +283,26 @@ function TreeVerticalNav(props) {
     selectedKeys: selectedKey ? [selectedKey] : [],
     selectionMode: "single"
   }));
-  return React.createElement(VerticalNavTypeContext.Provider, {
-    value: "tree"
-  }, React.createElement(Container, __spreadValues({}, props), [...state.collection].map((item) => React.createElement(TreeNavItem, {
-    key: item.key,
-    item,
-    state
-  }))));
+  return jsxRuntime.jsx(VerticalNavTypeContext.Provider, {
+    value: "tree",
+    children: jsxRuntime.jsx(Container, __spreadProps(__spreadValues({}, props), {
+      children: [...state.collection].map((item) => jsxRuntime.jsx(TreeNavItem, {
+        item,
+        state
+      }, item.key))
+    }))
+  });
 }
 function TreeNavItem({ item, state }) {
   const isSelected = state.selectionManager.isSelected(item.key);
   const isExpanded = state.expandedKeys.has(item.key);
-  return React.createElement(NavItem, {
+  return jsxRuntime.jsx(NavItem, {
     item,
     className: utilities_css.classNames(isSelected && navItemStyles[utilities_css.variationName("selected", "tree")]),
     isChildrenVisible: isExpanded,
     isSelected,
     isExpanded,
-    expansionSlot: item.props.children && React.createElement(ExpandButton, {
+    expansionSlot: item.props.children && jsxRuntime.jsx(ExpandButton, {
       isExpanded,
       onPress: () => {
         state.toggleKey(item.key);
@@ -284,7 +311,7 @@ function TreeNavItem({ item, state }) {
   });
 }
 function VerticalNav(props) {
-  return React.createElement(ListVerticalNav, __spreadValues({}, props));
+  return jsxRuntime.jsx(ListVerticalNav, __spreadValues({}, props));
 }
 VerticalNav.Item = Item;
 VerticalNav.Subnav = Subnav;

package/VerticalNav/index.mjs

@@ -29,16 +29,17 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React__default, { createContext, useContext, useMemo, forwardRef } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { $ as $c1d7fb2ec91bae71$export$6d08773d2e66f8f2 } from "../__chunks__/Item-FD89BR0i.mjs";
 import { classNames, variationName } from "../utilities/css.mjs";
-import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
-import { T as Text } from "../__chunks__/Text-YOL3isF4.mjs";
+import { I as Icon } from "../__chunks__/Icon-BIpaQJ_I.mjs";
+import { T as Text } from "../__chunks__/Text-D6oT5WJQ.mjs";
 import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/useHover-FWU5y5-k.mjs";
 import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/mergeProps-COnPag8r.mjs";
+import { createContext, useContext, useMemo, forwardRef } from "react";
 import { $ as $e72dd72e1c76a225$export$2f645645f7bca764 } from "../__chunks__/useListState-3s3ZON5A.mjs";
 import { A as ArrowForwardIos } from "../__chunks__/ArrowForwardIos-DSeLeLhY.mjs";
-import { U as UnstyledButton } from "../__chunks__/UnstyledButton-DpQ5Ic9D.mjs";
+import { U as UnstyledButton } from "../__chunks__/UnstyledButton-DxJLvL-G.mjs";
 import { $ as $875d6693e12af071$export$728d6ba534403756 } from "../__chunks__/useTreeState-B9z3iENl.mjs";
 function Item(_props) {
   return null;
@@ -64,21 +65,26 @@ const styles$5 = {
 };
 function Container(props) {
   const { renderBanner, renderLogo, supplementaryAction, ["aria-label"]: ariaLabel, ["aria-labelledby"]: ariaLabelledBy, ["aria-describedby"]: ariaDescribedBy, ["aria-details"]: ariaDetails, children } = props;
-  return React__default.createElement("div", {
-    className: styles$5.Container
-  }, renderBanner && React__default.createElement("div", {
-    className: styles$5.banner
-  }, renderBanner()), renderLogo && React__default.createElement("div", {
-    className: styles$5.logo
-  }, renderLogo()), React__default.createElement("nav", {
-    className: styles$5.nav,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    "aria-details": ariaDetails
-  }, children), supplementaryAction && React__default.createElement("div", {
-    className: styles$5.supplementaryActionContainer
-  }, supplementaryAction));
+  return jsxs("div", {
+    className: styles$5.Container,
+    children: [renderBanner && jsx("div", {
+      className: styles$5.banner,
+      children: renderBanner()
+    }), renderLogo && jsx("div", {
+      className: styles$5.logo,
+      children: renderLogo()
+    }), jsx("nav", {
+      className: styles$5.nav,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-details": ariaDetails,
+      children
+    }), supplementaryAction && jsx("div", {
+      className: styles$5.supplementaryActionContainer,
+      children: supplementaryAction
+    })]
+  });
 }
 const NavItem$1 = "_NavItem_1qxcs_4";
 const hovered$1 = "_hovered_1qxcs_11";
@@ -99,19 +105,26 @@ function NavItem(props) {
   const _a = item.props, { as: As = "a", children, icon, label, textValue: _textValue } = _a, linkProps = __objRest(_a, ["as", "children", "icon", "label", "textValue"]);
   const { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({});
   const className = classNames(navItemStyles.NavItem, isHovered && navItemStyles.hovered, classNameFromParent);
-  return React__default.createElement("div", {
-    className
-  }, React__default.createElement("div", {
-    className: navItemStyles.linkContainer
-  }, React__default.createElement(As, __spreadValues({
-    className: navItemStyles.link,
-    "aria-current": isSelected ? "true" : void 0,
-    "aria-expanded": isExpanded ? "true" : void 0
-  }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, linkProps)), icon && React__default.createElement(Icon, {
-    symbol: icon
-  }), React__default.createElement(Text, {
-    variant: "subtitle2"
-  }, label)), expansionSlot), children && isChildrenVisible && React__default.createElement(React__default.Fragment, null, item.rendered));
+  return jsxs("div", {
+    className,
+    children: [jsxs("div", {
+      className: navItemStyles.linkContainer,
+      children: [jsxs(As, __spreadProps(__spreadValues({
+        className: navItemStyles.link,
+        "aria-current": isSelected ? "true" : void 0,
+        "aria-expanded": isExpanded ? "true" : void 0
+      }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, linkProps)), {
+        children: [icon && jsx(Icon, {
+          symbol: icon
+        }), jsx(Text, {
+          variant: "subtitle2",
+          children: label
+        })]
+      })), expansionSlot]
+    }), children && isChildrenVisible && jsx(Fragment, {
+      children: item.rendered
+    })]
+  });
 }
 const VerticalNavTypeContext = createContext(null);
 const useVerticalNavType = () => {
@@ -127,23 +140,24 @@ function ListVerticalNav(props) {
     selectedKeys: selectedKey ? [selectedKey] : [],
     selectionMode: "single"
   }));
-  return React__default.createElement(VerticalNavTypeContext.Provider, {
-    value: "list"
-  }, React__default.createElement(Container, __spreadValues({}, props), [...state.collection].map((item) => React__default.createElement(ListNavItem, {
-    key: item.key,
-    item,
-    state
-  }))));
+  return jsx(VerticalNavTypeContext.Provider, {
+    value: "list",
+    children: jsx(Container, __spreadProps(__spreadValues({}, props), {
+      children: [...state.collection].map((item) => jsx(ListNavItem, {
+        item,
+        state
+      }, item.key))
+    }))
+  });
 }
 function ListNavItem({ item, state }) {
   const isSelected = state.selectionManager.isSelected(item.key);
-  return React__default.createElement(NavItem, {
-    key: item.key,
+  return jsx(NavItem, {
     item,
     className: classNames(isSelected && navItemStyles[variationName("selected", "list")]),
     isChildrenVisible: isSelected,
     isSelected
-  });
+  }, item.key);
 }
 const SubnavItemDot$1 = "_SubnavItemDot_145t2_4";
 const cozy = "_cozy_145t2_16";
@@ -155,7 +169,7 @@ const styles$4 = {
 };
 function SubnavItemDot({ isCozy, isVisible }) {
   const className = classNames(styles$4.SubnavItemDot, isCozy && styles$4.cozy, isVisible && styles$4.visible);
-  return React__default.createElement("span", {
+  return jsx("span", {
     className
   });
 }
@@ -179,18 +193,22 @@ function SubnavItem(props) {
   if (icon) {
     throw new Error("icon is unsupported on <Subnav.Item />s");
   }
-  return React__default.createElement("div", {
-    className
-  }, React__default.createElement(As, __spreadValues({
-    className: styles$3.link,
-    "aria-current": isSelected ? "true" : void 0
-  }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, linkProps)), (type === "list" || level > 1) && React__default.createElement(SubnavItemDot, {
-    isCozy: type === "list",
-    isVisible: isSelected
-  }), React__default.createElement(Text, {
-    variant: "body2",
-    weight: isSelected && level === 1 ? "medium" : "normal"
-  }, label)), item.props.children && item.rendered);
+  return jsxs("div", {
+    className,
+    children: [jsxs(As, __spreadProps(__spreadValues({
+      className: styles$3.link,
+      "aria-current": isSelected ? "true" : void 0
+    }, $3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, linkProps)), {
+      children: [(type === "list" || level > 1) && jsx(SubnavItemDot, {
+        isCozy: type === "list",
+        isVisible: isSelected
+      }), jsx(Text, {
+        variant: "body2",
+        weight: isSelected && level === 1 ? "medium" : "normal",
+        children: label
+      })]
+    })), item.props.children && item.rendered]
+  });
 }
 const Subnav$1 = "_Subnav_1eh4a_4";
 const styles$2 = {
@@ -205,16 +223,17 @@ function Subnav(props) {
     selectedKeys: selectedKey ? [selectedKey] : [],
     selectionMode: "single"
   }));
-  return React__default.createElement(SubnavLevelContext.Provider, {
-    value: level
-  }, React__default.createElement("div", {
-    className: styles$2.Subnav
-  }, [...state.collection].map((item, i) => React__default.createElement(SubnavItem, {
-    key: String(i),
-    level,
-    state,
-    item
-  }))));
+  return jsx(SubnavLevelContext.Provider, {
+    value: level,
+    children: jsx("div", {
+      className: styles$2.Subnav,
+      children: [...state.collection].map((item, i) => jsx(SubnavItem, {
+        level,
+        state,
+        item
+      }, String(i)))
+    })
+  });
 }
 const SupplementaryAction$1 = "_SupplementaryAction_1i552_4";
 const styles$1 = {
@@ -222,14 +241,17 @@ const styles$1 = {
 };
 const SupplementaryAction = forwardRef((props, ref) => {
   const _a = props, { as: As = "button", children } = _a, elementProps = __objRest(_a, ["as", "children"]);
-  return React__default.createElement(As, __spreadValues({
+  return jsxs(As, __spreadProps(__spreadValues({
     ref,
     className: styles$1.SupplementaryAction
-  }, elementProps), React__default.createElement(Text, {
-    variant: "subtitle2"
-  }, children), React__default.createElement(Icon, {
-    symbol: ArrowForwardIos,
-    size: "xs"
+  }, elementProps), {
+    children: [jsx(Text, {
+      variant: "subtitle2",
+      children
+    }), jsx(Icon, {
+      symbol: ArrowForwardIos,
+      size: "xs"
+    })]
   }));
 });
 SupplementaryAction.displayName = "SupplementaryAction";
@@ -241,14 +263,17 @@ const styles = {
 };
 function ExpandButton(_a) {
   var _b = _a, { isExpanded } = _b, props = __objRest(_b, ["isExpanded"]);
-  return React__default.createElement(UnstyledButton, __spreadValues({
+  return jsxs(UnstyledButton, __spreadProps(__spreadValues({
     className: classNames(styles.ExpandButton, isExpanded && styles.expanded)
-  }, props), React__default.createElement(Icon, {
-    symbol: ArrowForwardIos,
-    size: "2xs"
-  }), React__default.createElement(Text, {
-    visuallyHidden: true
-  }, "Expand"));
+  }, props), {
+    children: [jsx(Icon, {
+      symbol: ArrowForwardIos,
+      size: "2xs"
+    }), jsx(Text, {
+      visuallyHidden: true,
+      children: "Expand"
+    })]
+  }));
 }
 function TreeVerticalNav(props) {
   const _a = props, { selectedKey } = _a, treeStateProps = __objRest(_a, ["selectedKey"]);
@@ -256,24 +281,26 @@ function TreeVerticalNav(props) {
     selectedKeys: selectedKey ? [selectedKey] : [],
     selectionMode: "single"
   }));
-  return React__default.createElement(VerticalNavTypeContext.Provider, {
-    value: "tree"
-  }, React__default.createElement(Container, __spreadValues({}, props), [...state.collection].map((item) => React__default.createElement(TreeNavItem, {
-    key: item.key,
-    item,
-    state
-  }))));
+  return jsx(VerticalNavTypeContext.Provider, {
+    value: "tree",
+    children: jsx(Container, __spreadProps(__spreadValues({}, props), {
+      children: [...state.collection].map((item) => jsx(TreeNavItem, {
+        item,
+        state
+      }, item.key))
+    }))
+  });
 }
 function TreeNavItem({ item, state }) {
   const isSelected = state.selectionManager.isSelected(item.key);
   const isExpanded = state.expandedKeys.has(item.key);
-  return React__default.createElement(NavItem, {
+  return jsx(NavItem, {
     item,
     className: classNames(isSelected && navItemStyles[variationName("selected", "tree")]),
     isChildrenVisible: isExpanded,
     isSelected,
     isExpanded,
-    expansionSlot: item.props.children && React__default.createElement(ExpandButton, {
+    expansionSlot: item.props.children && jsx(ExpandButton, {
       isExpanded,
       onPress: () => {
         state.toggleKey(item.key);
@@ -282,7 +309,7 @@ function TreeNavItem({ item, state }) {
   });
 }
 function VerticalNav(props) {
-  return React__default.createElement(ListVerticalNav, __spreadValues({}, props));
+  return jsx(ListVerticalNav, __spreadValues({}, props));
 }
 VerticalNav.Item = Item;
 VerticalNav.Subnav = Subnav;

package/VerticalStack/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const VerticalStack = require("../__chunks__/VerticalStack-Dzpv3O67.js");
+const VerticalStack = require("../__chunks__/VerticalStack-BHkiocKU.js");
 exports.VerticalStack = VerticalStack.VerticalStack;

package/VerticalStack/index.mjs

@@ -1,4 +1,4 @@
-import { V } from "../__chunks__/VerticalStack-C2yDQVHD.mjs";
+import { V } from "../__chunks__/VerticalStack-DoMqBfYD.mjs";
 export {
   V as VerticalStack
 };