silver-ui 0.4.0 → 0.6.0

package/dist/{chunk-YVHWOKR7.cjs → chunk-ENVDR66N.cjs}

@@ -1,14 +1,14 @@
 'use strict';
 
-var chunk5D2OR64D_cjs = require('./chunk-5D2OR64D.cjs');
-var chunkDVGLYE3G_cjs = require('./chunk-DVGLYE3G.cjs');
-var chunkQOKEU3DC_cjs = require('./chunk-QOKEU3DC.cjs');
-var chunkM26XECB2_cjs = require('./chunk-M26XECB2.cjs');
-var chunkFNZOICR4_cjs = require('./chunk-FNZOICR4.cjs');
-var chunkGYVWTH3U_cjs = require('./chunk-GYVWTH3U.cjs');
+var chunkCNDUYO7I_cjs = require('./chunk-CNDUYO7I.cjs');
+var chunkSKZNSOB7_cjs = require('./chunk-SKZNSOB7.cjs');
+var chunkVXOIOPGZ_cjs = require('./chunk-VXOIOPGZ.cjs');
+var chunk2MXK2SDR_cjs = require('./chunk-2MXK2SDR.cjs');
+var chunkMHAXS4GO_cjs = require('./chunk-MHAXS4GO.cjs');
+var chunkVPWNRWNO_cjs = require('./chunk-VPWNRWNO.cjs');
 var chunkQAO6QMNQ_cjs = require('./chunk-QAO6QMNQ.cjs');
-var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
-var chunkJRBQKFVO_cjs = require('./chunk-JRBQKFVO.cjs');
+var chunkJ4PIYOWT_cjs = require('./chunk-J4PIYOWT.cjs');
+var chunkZ6RT3WPE_cjs = require('./chunk-Z6RT3WPE.cjs');
 var chunkRU6JG3FS_cjs = require('./chunk-RU6JG3FS.cjs');
 var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
 var react = require('react');
@@ -16,30 +16,101 @@ var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/SideNav/SideNav.recipe.ts
-var sideNavRecipe = chunkJRBQKFVO_cjs.cva({
+var sideNavRecipe = chunkZ6RT3WPE_cjs.sva({
+  slots: [
+    "root",
+    "stickyTop",
+    "scrollable",
+    "stickyBottom",
+    "footerRow",
+    "footerIcons",
+    "topbarIcons"
+  ],
   base: {
-    display: "flex",
-    flexDirection: "column",
-    h: "100%",
-    w: "260px",
-    bg: "inherit",
-    overflow: "hidden"
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      h: "100%",
+      w: "260px",
+      bg: "inherit",
+      overflow: "hidden"
+    },
+    stickyTop: {
+      display: "flex",
+      flexDirection: "column",
+      flexShrink: 0,
+      p: "2",
+      gap: "2"
+    },
+    scrollable: {
+      flex: 1,
+      overflowY: "auto",
+      overflowX: "hidden",
+      px: "2"
+    },
+    stickyBottom: {
+      display: "flex",
+      flexDirection: "column",
+      flexShrink: 0,
+      mt: "auto",
+      p: "2",
+      gap: "2",
+      borderBlockStartWidth: "default",
+      borderBlockStartStyle: "solid",
+      borderBlockStartColor: "border"
+    },
+    footerRow: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1"
+    },
+    footerIcons: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1",
+      ms: "auto"
+    },
+    topbarIcons: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1",
+      ms: "auto"
+    }
   },
   variants: {
     isCollapsed: {
       true: {
-        w: "12"
+        root: {
+          w: "12"
+        },
+        scrollable: {
+          flex: "none",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center"
+        },
+        footerRow: {
+          flexDirection: "column-reverse",
+          alignItems: "center"
+        },
+        footerIcons: {
+          flexDirection: "column",
+          alignItems: "center",
+          ms: "0"
+        }
       },
       false: {}
     },
     mode: {
       default: {},
       topbar: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        h: "12",
-        w: "100%"
+        root: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          h: "12",
+          w: "100%"
+        }
       }
     }
   },
@@ -75,7 +146,7 @@ function SideNavCollapseButton() {
   }
   const tooltipLabel = isCollapsed ? "Expand sidebar" : "Collapse sidebar";
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkQOKEU3DC_cjs.Button,
+    chunkVXOIOPGZ_cjs.Button,
     {
       className: isCollapsed ? void 0 : styles.expanded,
       icon: isCollapsed ? lucideReact.ChevronRight : lucideReact.ChevronLeft,
@@ -89,64 +160,6 @@ function SideNavCollapseButton() {
   );
 }
 SideNavCollapseButton.displayName = "SideNavCollapseButton";
-var styles2 = {
-  stickyTop: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    flexDirection: "column",
-    flexShrink: 0,
-    p: "2",
-    gap: "2"
-  }),
-  scrollable: chunkRU6JG3FS_cjs.css({
-    flex: 1,
-    overflowY: "auto",
-    overflowX: "hidden",
-    px: "2"
-  }),
-  scrollableCollapsed: chunkRU6JG3FS_cjs.css({
-    flex: "none",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center"
-  }),
-  stickyBottom: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    flexDirection: "column",
-    flexShrink: 0,
-    mt: "auto",
-    p: "2",
-    gap: "2",
-    borderBlockStartWidth: "default",
-    borderBlockStartStyle: "solid",
-    borderBlockStartColor: "border"
-  }),
-  footerRow: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    gap: "1"
-  }),
-  footerRowCollapsed: chunkRU6JG3FS_cjs.css({
-    flexDirection: "column-reverse",
-    alignItems: "center"
-  }),
-  footerIcons: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    gap: "1",
-    ms: "auto"
-  }),
-  footerIconsCollapsed: chunkRU6JG3FS_cjs.css({
-    flexDirection: "column",
-    alignItems: "center",
-    ms: "0"
-  }),
-  topbarIcons: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    gap: "1",
-    ms: "auto"
-  })
-};
 function SideNav({
   children,
   className,
@@ -169,26 +182,36 @@ function SideNav({
     [isCollapsed, isCollapsible, toggle]
   );
   if (renderMode === "topbar") {
+    const classes2 = sideNavRecipe({ mode: "topbar" });
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: chunkSPDVNY2Z_cjs.cx(sideNavRecipe({ mode: "topbar" }), className),
+        className: chunkSPDVNY2Z_cjs.cx(classes2.root, className),
         "data-testid": dataTestId,
+        ref,
         style,
         children: [
           header,
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles2.topbarIcons, children: footerIcons })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes2.topbarIcons, children: footerIcons })
         ]
       }
     );
   }
   if (renderMode === "drawer") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(chunk5D2OR64D_cjs.MobileNav, { "data-testid": dataTestId, header, children: [
-      topContent,
-      children,
-      footer,
-      footerIcons
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      chunkCNDUYO7I_cjs.MobileNav,
+      {
+        "data-testid": dataTestId,
+        header,
+        ref,
+        children: [
+          topContent,
+          children,
+          footer,
+          footerIcons
+        ]
+      }
+    );
   }
   if (renderMode === "drawer-content") {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -198,61 +221,34 @@ function SideNav({
       footerIcons
     ] });
   }
+  const classes = sideNavRecipe({ isCollapsed });
   return /* @__PURE__ */ jsxRuntime.jsx(SideNavCollapseContext, { value: collapseContext, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
       "aria-label": "Side navigation",
-      className: chunkSPDVNY2Z_cjs.cx(sideNavRecipe({ isCollapsed }), className),
+      className: chunkSPDVNY2Z_cjs.cx(classes.root, className),
       "data-testid": dataTestId,
       ref,
-      role: "navigation",
       style,
       children: [
-        chunkQAO6QMNQ_cjs.isReactNode(header) || !isCollapsed && chunkQAO6QMNQ_cjs.isReactNode(topContent) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.stickyTop, children: [
+        chunkQAO6QMNQ_cjs.isReactNode(header) || !isCollapsed && chunkQAO6QMNQ_cjs.isReactNode(topContent) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.stickyTop, children: [
           header,
           !isCollapsed ? topContent : null
         ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: chunkSPDVNY2Z_cjs.cx(
-              styles2.scrollable,
-              isCollapsed && styles2.scrollableCollapsed
-            ),
-            children
-          }
-        ),
-        chunkQAO6QMNQ_cjs.isReactNode(footer) || chunkQAO6QMNQ_cjs.isReactNode(footerIcons) || isCollapsible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles2.stickyBottom, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.scrollable, children }),
+        chunkQAO6QMNQ_cjs.isReactNode(footer) || chunkQAO6QMNQ_cjs.isReactNode(footerIcons) || isCollapsible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.stickyBottom, children: [
           footer,
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: chunkSPDVNY2Z_cjs.cx(
-                styles2.footerRow,
-                isCollapsed && styles2.footerRowCollapsed
-              ),
-              children: [
-                isCollapsible ? /* @__PURE__ */ jsxRuntime.jsx(SideNavCollapseButton, {}) : null,
-                chunkQAO6QMNQ_cjs.isReactNode(footerIcons) ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: chunkSPDVNY2Z_cjs.cx(
-                      styles2.footerIcons,
-                      isCollapsed && styles2.footerIconsCollapsed
-                    ),
-                    children: footerIcons
-                  }
-                ) : null
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.footerRow, children: [
+            isCollapsible ? /* @__PURE__ */ jsxRuntime.jsx(SideNavCollapseButton, {}) : null,
+            chunkQAO6QMNQ_cjs.isReactNode(footerIcons) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.footerIcons, children: footerIcons }) : null
+          ] })
         ] }) : null
       ]
     }
   ) });
 }
 SideNav.displayName = "SideNav";
-var styles3 = {
+var styles2 = {
   root: chunkRU6JG3FS_cjs.css({
     display: "flex",
     alignItems: "center",
@@ -296,7 +292,7 @@ function SideNavHeading({
   subheading,
   superheading
 }) {
-  const LinkComponent = chunkFNZOICR4_cjs.useLinkComponent(as);
+  const LinkComponent = chunkVPWNRWNO_cjs.useLinkComponent(as);
   const { isCollapsed } = useSideNavCollapse();
   const resolvedHref = headingHref ?? href;
   const Element = resolvedHref != null ? LinkComponent : "div";
@@ -307,142 +303,172 @@ function SideNavHeading({
     Element,
     {
       "aria-label": isCollapsed && resolvedHref != null ? heading : void 0,
-      className: chunkSPDVNY2Z_cjs.cx(styles3.root, isCollapsed && styles3.collapsed, className),
+      className: chunkSPDVNY2Z_cjs.cx(styles2.root, isCollapsed && styles2.collapsed, className),
       "data-testid": dataTestId,
       href: resolvedHref,
       ref,
       style,
       to: Element === "a" ? void 0 : resolvedHref,
       children: [
-        chunkQAO6QMNQ_cjs.isReactNode(logo) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles3.logo, children: logo }) : null,
-        !isCollapsed ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles3.text, children: [
-          superheading != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkM26XECB2_cjs.Text, { color: "secondary", type: "supporting", children: superheading }) : null,
-          heading != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkM26XECB2_cjs.Text, { type: "large", weight: "semibold", children: heading }) : null,
-          subheading != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkM26XECB2_cjs.Text, { color: "secondary", type: "supporting", children: subheading }) : null
+        chunkQAO6QMNQ_cjs.isReactNode(logo) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.logo, children: logo }) : null,
+        !isCollapsed ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles2.text, children: [
+          superheading != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAXS4GO_cjs.Text, { color: "secondary", type: "supporting", children: superheading }) : null,
+          heading != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAXS4GO_cjs.Text, { type: "large", weight: "semibold", children: heading }) : null,
+          subheading != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAXS4GO_cjs.Text, { color: "secondary", type: "supporting", children: subheading }) : null
         ] }) : null,
-        !isCollapsed && chunkQAO6QMNQ_cjs.isReactNode(headerEndContent) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles3.endContent, children: headerEndContent }) : null
+        !isCollapsed && chunkQAO6QMNQ_cjs.isReactNode(headerEndContent) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.endContent, children: headerEndContent }) : null
       ]
     }
   );
 }
 SideNavHeading.displayName = "SideNavHeading";
-var styles4 = {
-  navItem: chunkRU6JG3FS_cjs.css({
-    color: "fg.muted",
-    fontSize: "sm",
-    fontWeight: "medium",
-    minH: "8",
-    py: "0.5",
-    // Override Item's default `bg.subtle` hover, which is invisible when the
-    // SideNav sits on the AppShell's `bg.subtle` surface. Match TopNavItem's
-    // darker `bg.hover` so the hover is visible in both navs.
-    _hover: { bg: "bg.hover" }
-  }),
-  navItemSelected: chunkRU6JG3FS_cjs.css({
-    bg: "bg.hover",
-    color: "fg",
-    fontWeight: "semibold"
-  }),
-  icon: chunkRU6JG3FS_cjs.css({
-    flexShrink: 0,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "var(--silver-sizes-icon-md)"
-  }),
-  collapsed: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    w: "10",
-    minH: "8",
-    px: 0,
-    py: "1.5",
-    borderRadius: "md",
-    color: "fg.muted",
-    textDecoration: "none",
-    bg: "transparent",
-    borderWidth: 0,
-    cursor: "pointer",
-    _hover: { bg: "bg.hover" },
-    _focusVisible: {
-      outlineWidth: "focus",
-      outlineStyle: "solid",
-      outlineColor: "primary",
-      outlineOffset: "focusOffset"
-    }
-  }),
-  collapsedSelected: chunkRU6JG3FS_cjs.css({
-    bg: "bg.hover",
-    color: "fg"
-  }),
-  collapsedDisabled: chunkRU6JG3FS_cjs.css({
-    opacity: 0.5,
-    cursor: "not-allowed",
-    pointerEvents: "none"
-  }),
-  toggleRow: chunkRU6JG3FS_cjs.css({
-    display: "flex",
-    w: "100%",
-    cursor: "pointer",
-    borderRadius: "md",
-    _hover: { bg: "bg.hover" },
-    _focusVisible: {
-      outlineWidth: "focus",
-      outlineStyle: "solid",
-      outlineColor: "primary",
-      outlineOffset: "focusOffset"
+
+// src/components/SideNav/SideNavItem.recipe.ts
+var expandedLabelBase = {
+  color: "fg.muted",
+  fontSize: "sm",
+  fontWeight: "medium",
+  minH: "8",
+  py: "0.5",
+  // Override Item's default `bg.subtle` hover, which is invisible when the
+  // SideNav sits on the AppShell's `bg.subtle` surface. Match TopNavItem's
+  // darker `bg.hover` so the hover is visible in both navs.
+  _hover: { bg: "bg.hover" }
+};
+var sideNavItemRecipe = chunkZ6RT3WPE_cjs.sva({
+  slots: [
+    "item",
+    "icon",
+    "collapsed",
+    "toggleRow",
+    "toggleLabel",
+    "toggleButton",
+    "chevron",
+    "childrenContainer",
+    "childrenInner"
+  ],
+  base: {
+    item: expandedLabelBase,
+    toggleLabel: expandedLabelBase,
+    icon: {
+      flexShrink: 0,
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: "var(--silver-sizes-icon-md)"
+    },
+    collapsed: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      w: "10",
+      minH: "8",
+      px: 0,
+      py: "1.5",
+      borderRadius: "md",
+      color: "fg.muted",
+      textDecoration: "none",
+      bg: "transparent",
+      borderWidth: 0,
+      cursor: "pointer",
+      _hover: { bg: "bg.hover" },
+      _focusVisible: {
+        outlineWidth: "focus",
+        outlineStyle: "solid",
+        outlineColor: "primary",
+        outlineOffset: "focusOffset"
+      }
+    },
+    toggleRow: {
+      display: "flex",
+      w: "100%",
+      cursor: "pointer",
+      borderRadius: "md",
+      _hover: { bg: "bg.hover" },
+      _focusVisible: {
+        outlineWidth: "focus",
+        outlineStyle: "solid",
+        outlineColor: "primary",
+        outlineOffset: "focusOffset"
+      }
+    },
+    toggleButton: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      w: "7",
+      h: "7",
+      borderRadius: "md",
+      cursor: "pointer",
+      color: "fg.muted",
+      _hover: { bg: "bg.hover" },
+      _focusVisible: {
+        outlineWidth: "focus",
+        outlineStyle: "solid",
+        outlineColor: "primary",
+        outlineOffset: "focusOffset"
+      }
+    },
+    chevron: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      transitionProperty: "transform",
+      transitionDuration: "fast",
+      transitionTimingFunction: "default"
+    },
+    childrenContainer: {
+      display: "grid",
+      gridTemplateRows: "1fr",
+      transitionProperty: "grid-template-rows",
+      transitionDuration: "fast",
+      transitionTimingFunction: "default"
+    },
+    childrenInner: {
+      overflow: "hidden",
+      ps: "6"
     }
-  }),
-  toggleRowDisabled: chunkRU6JG3FS_cjs.css({
-    opacity: 0.5,
-    cursor: "not-allowed",
-    pointerEvents: "none"
-  }),
-  chevron: chunkRU6JG3FS_cjs.css({
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    transitionProperty: "transform",
-    transitionDuration: "fast",
-    transitionTimingFunction: "default"
-  }),
-  chevronExpanded: chunkRU6JG3FS_cjs.css({
-    transform: "rotate(180deg)"
-  }),
-  toggleButton: chunkRU6JG3FS_cjs.css({
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-    w: "7",
-    h: "7",
-    borderRadius: "md",
-    cursor: "pointer",
-    color: "fg.muted",
-    _hover: { bg: "bg.hover" },
-    _focusVisible: {
-      outlineWidth: "focus",
-      outlineStyle: "solid",
-      outlineColor: "primary",
-      outlineOffset: "focusOffset"
+  },
+  variants: {
+    isSelected: {
+      true: {
+        item: { bg: "bg.hover", color: "fg", fontWeight: "semibold" },
+        toggleRow: { bg: "bg.hover", color: "fg", fontWeight: "semibold" },
+        collapsed: { bg: "bg.hover", color: "fg" }
+      },
+      false: {}
+    },
+    isDisabled: {
+      true: {
+        collapsed: {
+          opacity: 0.5,
+          cursor: "not-allowed",
+          pointerEvents: "none"
+        },
+        toggleRow: {
+          opacity: 0.5,
+          cursor: "not-allowed",
+          pointerEvents: "none"
+        }
+      },
+      false: {}
+    },
+    isExpanded: {
+      true: {
+        chevron: { transform: "rotate(180deg)" }
+      },
+      false: {
+        childrenContainer: { gridTemplateRows: "0fr" }
+      }
     }
-  }),
-  childrenContainer: chunkRU6JG3FS_cjs.css({
-    display: "grid",
-    gridTemplateRows: "1fr",
-    transitionProperty: "grid-template-rows",
-    transitionDuration: "fast",
-    transitionTimingFunction: "default"
-  }),
-  childrenCollapsed: chunkRU6JG3FS_cjs.css({
-    gridTemplateRows: "0fr"
-  }),
-  childrenInner: chunkRU6JG3FS_cjs.css({
-    overflow: "hidden",
-    ps: "6"
-  })
-};
+  },
+  defaultVariants: {
+    isSelected: false,
+    isDisabled: false,
+    isExpanded: true
+  }
+});
 function SideNavItem({
   as,
   children,
@@ -460,14 +486,20 @@ function SideNavItem({
   ref,
   style
 }) {
-  const LinkComponent = chunkFNZOICR4_cjs.useLinkComponent(as);
-  const { closeMobileNav } = chunk5D2OR64D_cjs.useAppShellMobile();
+  const { closeMobileNav, isMobileNavOpen } = chunkCNDUYO7I_cjs.useAppShellMobile();
   const { isCollapsed } = useSideNavCollapse();
   const [isExpanded, setIsExpanded] = react.useState(isDefaultExpanded);
   const childrenId = react.useId();
   const hasChildren = chunkQAO6QMNQ_cjs.isReactNode(children);
   const isExpandable = hasChildren && isItemCollapsible;
   const hasPrimaryAction = href != null || onClick != null;
+  const classes = sideNavItemRecipe({
+    isSelected,
+    isDisabled,
+    // Only expandable items animate their children open/closed and rotate a
+    // chevron; non-expandable items keep their children fully shown.
+    isExpanded: !isExpandable || isExpanded
+  });
   const toggleExpanded = react.useCallback(() => {
     setIsExpanded((prev) => !prev);
   }, []);
@@ -477,41 +509,24 @@ function SideNavItem({
       return;
     }
     onClick?.(event);
-    closeMobileNav();
+    if (isMobileNavOpen) {
+      closeMobileNav();
+    }
   };
-  const iconSlot = icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: styles4.icon, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { icon, size: "sm" }) }) : void 0;
+  const iconSlot = icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: classes.icon, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { icon, size: "sm" }) }) : void 0;
   if (isCollapsed) {
-    const collapsedClassNames = chunkSPDVNY2Z_cjs.cx(
-      styles4.collapsed,
-      isSelected && styles4.collapsedSelected,
-      isDisabled && styles4.collapsedDisabled,
-      className
-    );
-    if (href != null && !isDisabled) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        LinkComponent,
-        {
-          "aria-current": isSelected ? "page" : void 0,
-          "aria-label": label,
-          className: collapsedClassNames,
-          "data-testid": dataTestId,
-          href,
-          onClick: handleClick,
-          ref,
-          style,
-          to: LinkComponent === "a" ? void 0 : href,
-          children: iconSlot
-        }
-      );
-    }
+    const collapsedClassNames = chunkSPDVNY2Z_cjs.cx(classes.collapsed, className);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+      chunkVPWNRWNO_cjs.ActionElement,
       {
         "aria-current": isSelected ? "page" : void 0,
         "aria-label": label,
+        as,
         className: collapsedClassNames,
         "data-testid": dataTestId,
-        disabled: isDisabled,
+        href: isDisabled ? void 0 : href,
+        isDisabled: href == null || isDisabled ? isDisabled : void 0,
+        isLink: href != null && !isDisabled,
         onClick: handleClick,
         ref,
         style,
@@ -520,19 +535,8 @@ function SideNavItem({
       }
     );
   }
-  const chevronSlot = isExpandable ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkSPDVNY2Z_cjs.cx(styles4.chevron, isExpanded && styles4.chevronExpanded), children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { icon: lucideReact.ChevronDown, size: "sm" }) }) : null;
-  const childrenContainer = chunkQAO6QMNQ_cjs.isReactNode(children) ? /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: chunkSPDVNY2Z_cjs.cx(
-        styles4.childrenContainer,
-        isExpandable && !isExpanded && styles4.childrenCollapsed
-      ),
-      id: childrenId,
-      role: "group",
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles4.childrenInner, children })
-    }
-  ) : null;
+  const chevronSlot = isExpandable ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.chevron, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { icon: lucideReact.ChevronDown, size: "sm" }) }) : null;
+  const childrenContainer = chunkQAO6QMNQ_cjs.isReactNode(children) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.childrenContainer, id: childrenId, role: "group", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.childrenInner, children }) }) : null;
   if (isExpandable && !hasPrimaryAction) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -540,12 +544,7 @@ function SideNavItem({
         {
           "aria-controls": childrenId,
           "aria-expanded": isExpanded,
-          className: chunkSPDVNY2Z_cjs.cx(
-            styles4.toggleRow,
-            isSelected && styles4.navItemSelected,
-            isDisabled && styles4.toggleRowDisabled,
-            className
-          ),
+          className: chunkSPDVNY2Z_cjs.cx(classes.toggleRow, className),
           "data-testid": dataTestId,
           disabled: isDisabled,
           onClick: toggleExpanded,
@@ -553,10 +552,10 @@ function SideNavItem({
           style,
           type: "button",
           children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunkDVGLYE3G_cjs.Item,
+            chunkSKZNSOB7_cjs.Item,
             {
               as: "span",
-              className: styles4.navItem,
+              className: classes.toggleLabel,
               endContent: chevronSlot,
               label,
               startContent: iconSlot
@@ -570,14 +569,10 @@ function SideNavItem({
   if (isExpandable && hasPrimaryAction) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkDVGLYE3G_cjs.Item,
+        chunkSKZNSOB7_cjs.Item,
         {
           "aria-current": isSelected ? "page" : void 0,
-          className: chunkSPDVNY2Z_cjs.cx(
-            styles4.navItem,
-            isSelected && styles4.navItemSelected,
-            className
-          ),
+          className: chunkSPDVNY2Z_cjs.cx(classes.item, className),
           "data-testid": dataTestId,
           endContent,
           href: isDisabled ? void 0 : href,
@@ -594,7 +589,7 @@ function SideNavItem({
               "aria-controls": childrenId,
               "aria-expanded": isExpanded,
               "aria-label": isExpanded ? `Collapse ${label}` : `Expand ${label}`,
-              className: styles4.toggleButton,
+              className: classes.toggleButton,
               onClick: toggleExpanded,
               type: "button",
               children: chevronSlot
@@ -607,14 +602,10 @@ function SideNavItem({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkDVGLYE3G_cjs.Item,
+      chunkSKZNSOB7_cjs.Item,
       {
         "aria-current": isSelected ? "page" : void 0,
-        className: chunkSPDVNY2Z_cjs.cx(
-          styles4.navItem,
-          isSelected && styles4.navItemSelected,
-          className
-        ),
+        className: chunkSPDVNY2Z_cjs.cx(classes.item, className),
         "data-testid": dataTestId,
         endContent,
         href: isDisabled ? void 0 : href,
@@ -631,7 +622,7 @@ function SideNavItem({
   ] });
 }
 SideNavItem.displayName = "SideNavItem";
-var styles5 = {
+var styles3 = {
   root: chunkRU6JG3FS_cjs.css({
     display: "flex",
     flexDirection: "column",
@@ -679,31 +670,30 @@ function SideNavSection({
   const id = react.useId();
   const titleId = `${id}-title`;
   const shouldHideHeader = isHeaderHidden || isCollapsed;
-  const header = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles5.header, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles5.titleContainer, children: [
+  const header = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles3.header, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles3.titleContainer, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkM26XECB2_cjs.Text,
+        chunkMHAXS4GO_cjs.Text,
         {
           as: "span",
           color: "secondary",
-          "data-testid": void 0,
           id: titleId,
           type: "supporting",
           weight: "semibold",
           children: title
         }
       ),
-      subtitle != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkM26XECB2_cjs.Text, { as: "span", color: "secondary", type: "supporting", children: subtitle }) : null
+      subtitle != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkMHAXS4GO_cjs.Text, { as: "span", color: "secondary", type: "supporting", children: subtitle }) : null
     ] }),
-    chunkQAO6QMNQ_cjs.isReactNode(endContent) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles5.endContent, children: endContent }) : null
+    chunkQAO6QMNQ_cjs.isReactNode(endContent) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles3.endContent, children: endContent }) : null
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "aria-labelledby": titleId,
       className: chunkSPDVNY2Z_cjs.cx(
-        styles5.root,
-        isCollapsed && styles5.rootCollapsed,
+        styles3.root,
+        isCollapsed && styles3.rootCollapsed,
         className
       ),
       "data-testid": dataTestId,
@@ -711,8 +701,8 @@ function SideNavSection({
       role: "group",
       style,
       children: [
-        shouldHideHeader ? /* @__PURE__ */ jsxRuntime.jsx(chunkGYVWTH3U_cjs.VisuallyHidden, { children: header }) : header,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles5.items, children })
+        shouldHideHeader ? /* @__PURE__ */ jsxRuntime.jsx(chunk2MXK2SDR_cjs.VisuallyHidden, { children: header }) : header,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles3.items, children })
       ]
     }
   );
@@ -725,5 +715,5 @@ exports.SideNavHeading = SideNavHeading;
 exports.SideNavItem = SideNavItem;
 exports.SideNavRenderContext = SideNavRenderContext;
 exports.SideNavSection = SideNavSection;
-//# sourceMappingURL=chunk-YVHWOKR7.cjs.map
-//# sourceMappingURL=chunk-YVHWOKR7.cjs.map
+//# sourceMappingURL=chunk-ENVDR66N.cjs.map
+//# sourceMappingURL=chunk-ENVDR66N.cjs.map