@easypost/easy-ui 1.0.0-alpha.12 → 1.0.0-alpha.120

package/VerticalNav/SubnavItemDot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubnavItemDot.d.ts","sourceRoot":"","sources":["../../src/VerticalNav/SubnavItemDot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,kBAAkB,qBAOtE"}

package/VerticalNav/SupplementaryAction.d.ts

@@ -0,0 +1,26 @@
+import { DOMRef } from "@react-types/shared";
+import { ComponentProps, ElementType, ReactElement, ReactNode } from "react";
+export type SupplementaryActionProps<T extends ElementType = "button"> = ComponentProps<T> & {
+    /**
+     * Custom element to render the supplementary action as.
+     */
+    as?: T;
+    /**
+     * Text content to render in the supplementary action.
+     */
+    children: ReactNode;
+};
+/**
+ * Represents a default supplementary action for a vertical navigation. Renders
+ * as a text with arrow.
+ *
+ * The `supplementaryAction` slot can be rendered with a custom action component
+ * if this one doesn't suffice.
+ */
+export declare const SupplementaryAction: {
+    <T extends ElementType = "button">(props: SupplementaryActionProps<T> & {
+        ref?: DOMRef;
+    }): ReactElement;
+    displayName?: string;
+};
+//# sourceMappingURL=SupplementaryAction.d.ts.map

package/VerticalNav/SupplementaryAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupplementaryAction.d.ts","sourceRoot":"","sources":["../../src/VerticalNav/SupplementaryAction.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAc,EACZ,cAAc,EACd,WAAW,EACX,YAAY,EACZ,SAAS,EAEV,MAAM,OAAO,CAAC;AAMf,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IACnE,cAAc,CAAC,CAAC,CAAC,GAAG;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEJ;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,EAW1B;IACJ,CAAC,CAAgC,SAAtB,WAAW,GAAG,QAAQ,EAC/B,KAAK,EAAE,wBAAwB,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,GACpD,YAAY,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/VerticalNav/TreeVerticalNav.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+import { Key } from "react-aria";
+import { TreeProps } from "react-stately";
+import type { BaseVerticalNavProps } from "./types";
+export type TreeVerticalNavProps = BaseVerticalNavProps & {
+    /**
+     * List of navigation items to render within the navigation.
+     */
+    children?: TreeProps<object>["children"];
+    /**
+     * The initial expanded keys in the navigation (uncontrolled).
+     */
+    defaultExpandedKeys?: TreeProps<object>["defaultExpandedKeys"];
+    /**
+     * The currently expanded keys in the navigation (controlled).
+     */
+    expandedKeys?: TreeProps<object>["expandedKeys"];
+    /**
+     * Handler that is called when navigation items are expanded or collapsed.
+     */
+    onExpandedChange?: TreeProps<object>["onExpandedChange"];
+    /**
+     * The currently selected key in the navigation list.
+     */
+    selectedKey?: Key;
+};
+/**
+ * A vertical list of expandable navigation links.
+ *
+ * @example
+ * ```tsx
+ * <ExpandableVerticalNav
+ *   aria-label="Sidebar"
+ *   selectedKey="1"
+ *   expandedKeys={expandedKeys}
+ *   onExpandedChange={(keys) => {
+ *     setExpandedKeys(keys);
+ *   }}
+ * >
+ *   <VerticalNav.Item key="1" href="/item-1" icon={Symbol} label="Item 1" />
+ *   <VerticalNav.Item key="2" href="/item-2" icon={Symbol} label="Item 2">
+ *     <VerticalNav.Subnav selectedKey="2a">
+ *       <VerticalNav.Item key="2a" href="/subitem-1" label="Subitem 1">
+ *         <VerticalNav.Subnav selectedKey="2a1">
+ *           <VerticalNav.Item key="2a1" href="/subitem-1a" label="Item 1" />
+ *           <VerticalNav.Item key="2a2" href="/subitem-1b" label="Item 2" />
+ *         </VerticalNav.Subnav>
+ *       </VerticalNav.Item>
+ *       <VerticalNav.Item key="2b" href="/subitem-2" label="Subitem 2" />
+ *     </VerticalNav.Subnav>
+ *   </VerticalNav.Item>
+ *   <VerticalNav.Item key="3" href="/item-3" icon={Symbol} label="Item 3" />
+ *   <VerticalNav.Item key="4" href="/item-4" icon={Symbol} label="Item 4" />
+ * </ExpandableVerticalNav>
+ * ```
+ */
+export declare function TreeVerticalNav(props: TreeVerticalNavProps): React.JSX.Element;
+//# sourceMappingURL=TreeVerticalNav.d.ts.map

package/VerticalNav/TreeVerticalNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeVerticalNav.d.ts","sourceRoot":"","sources":["../../src/VerticalNav/TreeVerticalNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAQ,SAAS,EAA2B,MAAM,eAAe,CAAC;AAMzE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAIpD,MAAM,MAAM,oBAAoB,GAAG,oBAAoB,GAAG;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC;IAEzC;;OAEG;IACH,mBAAmB,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,qBAAqB,CAAC,CAAC;IAE/D;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC;IAEjD;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAEzD;;OAEG;IACH,WAAW,CAAC,EAAE,GAAG,CAAC;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAgB1D"}

package/VerticalNav/VerticalNav.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { ListVerticalNavProps } from "./ListVerticalNav";
+import { TreeVerticalNav } from "./TreeVerticalNav";
+/**
+ * A vertical list of navigation links.
+ *
+ * @example
+ * ```tsx
+ * <VerticalNav aria-label="Sidebar" selectedKey="1">
+ *   <VerticalNav.Item key="1" href="/item-1" icon={Symbol} label="Item 1" />
+ *   <VerticalNav.Item key="2" href="/item-2" icon={Symbol} label="Item 2" />
+ *   <VerticalNav.Item key="3" href="/item-3" icon={Symbol} label="Item 3" />
+ *   <VerticalNav.Item key="4" href="/item-4" icon={Symbol} label="Item 4" />
+ * </VerticalNav>
+ * ```
+ */
+export declare function VerticalNav(props: ListVerticalNavProps): React.JSX.Element;
+export declare namespace VerticalNav {
+    var Item: typeof import("./Item").Item;
+    var Subnav: typeof import("./Subnav").Subnav;
+    var SupplementaryAction: {
+        <T extends React.ElementType = "button">(props: import("./SupplementaryAction").SupplementaryActionProps<T> & {
+            ref?: import("@react-types/shared").DOMRef;
+        }): React.ReactElement;
+        displayName?: string;
+    };
+}
+export { TreeVerticalNav as ExpandableVerticalNav };
+//# sourceMappingURL=VerticalNav.d.ts.map

package/VerticalNav/VerticalNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNav.d.ts","sourceRoot":"","sources":["../../src/VerticalNav/VerticalNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG1E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,oBAAoB,qBAEtD;yBAFe,WAAW;;;;;eAoB6G,CAAC;;;;;AADzI,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,CAAC"}

package/VerticalNav/VerticalNav.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { ExpandableVerticalNav, VerticalNav } from "./VerticalNav";
+type ListStory = StoryObj<typeof VerticalNav>;
+type TreeStory = StoryObj<typeof ExpandableVerticalNav>;
+declare const meta: Meta<typeof VerticalNav>;
+export default meta;
+export declare const Simple: ListStory;
+export declare const Nested: ListStory;
+export declare const Expandable: TreeStory;
+export declare const WithSupplementaryAction: ListStory;
+export declare const WithBanner: ListStory;
+export declare const WithinACard: TreeStory;
+//# sourceMappingURL=VerticalNav.stories.d.ts.map

package/VerticalNav/VerticalNav.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNav.stories.d.ts","sourceRoot":"","sources":["../../src/VerticalNav/VerticalNav.stories.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AASvD,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,SAAS,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAC9C,KAAK,SAAS,GAAG,QAAQ,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAUxD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAoClC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,MAAM,EAAE,SAGpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,SA6BpB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,SAQxB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,SAmBrC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,SAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,SAgBzB,CAAC"}

package/VerticalNav/VerticalNav.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=VerticalNav.test.d.ts.map

package/VerticalNav/VerticalNav.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNav.test.d.ts","sourceRoot":"","sources":["../../src/VerticalNav/VerticalNav.test.tsx"],"names":[],"mappings":""}

package/VerticalNav/context.d.ts

@@ -0,0 +1,4 @@
+export type VerticalNavType = "list" | "tree";
+export declare const VerticalNavTypeContext: import("react").Context<VerticalNavType | null>;
+export declare const useVerticalNavType: () => VerticalNavType;
+//# sourceMappingURL=context.d.ts.map

package/VerticalNav/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/VerticalNav/context.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AAE9C,eAAO,MAAM,sBAAsB,iDAElC,CAAC;AAEF,eAAO,MAAM,kBAAkB,uBAM9B,CAAC"}

package/VerticalNav/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./VerticalNav";
+//# sourceMappingURL=index.d.ts.map

package/VerticalNav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/VerticalNav/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/VerticalNav/index.js

@@ -0,0 +1,320 @@
+"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;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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-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-DW8CjaXN.js");
+const useTreeState = require("../__chunks__/useTreeState-Cb1U-iBl.js");
+function Item(_props) {
+  return null;
+}
+const originalGetCollectionNode = Item$1.$c1d7fb2ec91bae71$export$6d08773d2e66f8f2.getCollectionNode;
+const getCollectionNode = (props, context) => originalGetCollectionNode(__spreadProps(__spreadValues({}, props), {
+  textValue: props.label
+}), context);
+Object.assign(Item, Item$1.$c1d7fb2ec91bae71$export$6d08773d2e66f8f2, {
+  getCollectionNode
+});
+const Container$1 = "_Container_17nvh_4";
+const banner = "_banner_17nvh_15";
+const logo = "_logo_17nvh_19";
+const nav = "_nav_17nvh_30";
+const supplementaryActionContainer = "_supplementaryActionContainer_17nvh_37";
+const styles$5 = {
+  Container: Container$1,
+  banner,
+  logo,
+  nav,
+  supplementaryActionContainer
+};
+function Container(props) {
+  const { renderBanner, renderLogo, supplementaryAction, ["aria-label"]: ariaLabel, ["aria-labelledby"]: ariaLabelledBy, ["aria-describedby"]: ariaDescribedBy, ["aria-details"]: ariaDetails, children } = props;
+  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";
+const selectedTree = "_selectedTree_1qxcs_15";
+const selectedList = "_selectedList_1qxcs_19";
+const linkContainer = "_linkContainer_1qxcs_23";
+const link$1 = "_link_1qxcs_23";
+const navItemStyles = {
+  NavItem: NavItem$1,
+  hovered: hovered$1,
+  selectedTree,
+  selectedList,
+  linkContainer,
+  link: link$1
+};
+function NavItem(props) {
+  const { className: classNameFromParent, expansionSlot, isChildrenVisible, isExpanded, isSelected, item } = 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 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 = () => {
+  const verticalNavTypeContext = React.useContext(VerticalNavTypeContext);
+  if (!verticalNavTypeContext) {
+    throw new Error("useVerticalNavType must be used within a VerticalNav");
+  }
+  return verticalNavTypeContext;
+};
+function ListVerticalNav(props) {
+  const _a = props, { selectedKey } = _a, listStateProps = __objRest(_a, ["selectedKey"]);
+  const state = useListState.$e72dd72e1c76a225$export$2f645645f7bca764(__spreadProps(__spreadValues({}, listStateProps), {
+    selectedKeys: selectedKey ? [selectedKey] : [],
+    selectionMode: "single"
+  }));
+  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 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";
+const visible = "_visible_145t2_20";
+const styles$4 = {
+  SubnavItemDot: SubnavItemDot$1,
+  cozy,
+  visible
+};
+function SubnavItemDot({ isCozy, isVisible }) {
+  const className = utilities_css.classNames(styles$4.SubnavItemDot, isCozy && styles$4.cozy, isVisible && styles$4.visible);
+  return jsxRuntime.jsx("span", {
+    className
+  });
+}
+const SubnavItem$1 = "_SubnavItem_1ewbt_4";
+const link = "_link_1ewbt_10";
+const hovered = "_hovered_1ewbt_26";
+const selected = "_selected_1ewbt_30";
+const styles$3 = {
+  SubnavItem: SubnavItem$1,
+  link,
+  hovered,
+  selected
+};
+function SubnavItem(props) {
+  const { item, level, state } = props;
+  const type = useVerticalNavType();
+  const _a = item.props, { as: As = "a", label, icon, textValue: _textValue } = _a, linkProps = __objRest(_a, ["as", "label", "icon", "textValue"]);
+  const isSelected = state.selectionManager.isSelected(item.key);
+  const { hoverProps, isHovered } = useHover.$6179b936705e76d3$export$ae780daf29e6d456({});
+  const className = utilities_css.classNames(styles$3.SubnavItem, isSelected && styles$3.selected, isHovered && styles$3.hovered);
+  if (icon) {
+    throw new Error("icon is unsupported on <Subnav.Item />s");
+  }
+  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 = {
+  Subnav: Subnav$1
+};
+const SubnavLevelContext = React.createContext(0);
+function Subnav(props) {
+  const _a = props, { selectedKey } = _a, listStateProps = __objRest(_a, ["selectedKey"]);
+  const levelContext = React.useContext(SubnavLevelContext);
+  const level = React.useMemo(() => levelContext + 1, [levelContext]);
+  const state = useListState.$e72dd72e1c76a225$export$2f645645f7bca764(__spreadProps(__spreadValues({}, listStateProps), {
+    selectedKeys: selectedKey ? [selectedKey] : [],
+    selectionMode: "single"
+  }));
+  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 = {
+  SupplementaryAction: SupplementaryAction$1
+};
+const SupplementaryAction = React.forwardRef((props, ref) => {
+  const _a = props, { as: As = "button", children } = _a, elementProps = __objRest(_a, ["as", "children"]);
+  return jsxRuntime.jsxs(As, __spreadProps(__spreadValues({
+    ref,
+    className: styles$1.SupplementaryAction
+  }, elementProps), {
+    children: [jsxRuntime.jsx(Text.Text, {
+      variant: "subtitle2",
+      children
+    }), jsxRuntime.jsx(Icon.Icon, {
+      symbol: ArrowForwardIos.ArrowForwardIos,
+      size: "xs"
+    })]
+  }));
+});
+SupplementaryAction.displayName = "SupplementaryAction";
+const ExpandButton$1 = "_ExpandButton_1752t_4";
+const expanded = "_expanded_1752t_8";
+const styles = {
+  ExpandButton: ExpandButton$1,
+  expanded
+};
+function ExpandButton(_a) {
+  var _b = _a, { isExpanded } = _b, props = __objRest(_b, ["isExpanded"]);
+  return jsxRuntime.jsxs(UnstyledButton.UnstyledButton, __spreadProps(__spreadValues({
+    className: utilities_css.classNames(styles.ExpandButton, isExpanded && styles.expanded)
+  }, 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"]);
+  const state = useTreeState.$875d6693e12af071$export$728d6ba534403756(__spreadProps(__spreadValues({}, treeStateProps), {
+    selectedKeys: selectedKey ? [selectedKey] : [],
+    selectionMode: "single"
+  }));
+  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 jsxRuntime.jsx(NavItem, {
+    item,
+    className: utilities_css.classNames(isSelected && navItemStyles[utilities_css.variationName("selected", "tree")]),
+    isChildrenVisible: isExpanded,
+    isSelected,
+    isExpanded,
+    expansionSlot: item.props.children && jsxRuntime.jsx(ExpandButton, {
+      isExpanded,
+      onPress: () => {
+        state.toggleKey(item.key);
+      }
+    })
+  });
+}
+function VerticalNav(props) {
+  return jsxRuntime.jsx(ListVerticalNav, __spreadValues({}, props));
+}
+VerticalNav.Item = Item;
+VerticalNav.Subnav = Subnav;
+VerticalNav.SupplementaryAction = SupplementaryAction;
+exports.ExpandableVerticalNav = TreeVerticalNav;
+exports.VerticalNav = VerticalNav;