silver-ui 0.4.0 → 0.6.0

package/dist/{chunk-SOCSUNIM.js → chunk-LDYUVGD4.js}

@@ -1,12 +1,12 @@
-import { MobileNav, useAppShellMobile } from './chunk-SSAYBCAD.js';
-import { Item } from './chunk-QY6OMQW6.js';
-import { Button } from './chunk-2LABTS4P.js';
-import { Text } from './chunk-QRFDPG34.js';
-import { useLinkComponent } from './chunk-MI5QU37D.js';
-import { VisuallyHidden } from './chunk-7BSFKG7N.js';
+import { MobileNav, useAppShellMobile } from './chunk-RXKDRZF3.js';
+import { Item } from './chunk-ERVWZILR.js';
+import { Button } from './chunk-HMJINNXZ.js';
+import { VisuallyHidden } from './chunk-V2V5TTTL.js';
+import { Text } from './chunk-NXTDP6AX.js';
+import { useLinkComponent, ActionElement } from './chunk-PG4CZRTU.js';
 import { isReactNode } from './chunk-2PSZAWLC.js';
-import { Icon } from './chunk-7T3SWOY7.js';
-import { cva } from './chunk-FMEIPGUP.js';
+import { Icon } from './chunk-IUW777WZ.js';
+import { sva } from './chunk-IAVZKGZS.js';
 import { css } from './chunk-OD4DHHZH.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { createContext, useState, useCallback, useMemo, useId, use } from 'react';
@@ -14,30 +14,101 @@ import { ChevronDown, ChevronRight, ChevronLeft } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/components/SideNav/SideNav.recipe.ts
-var sideNavRecipe = cva({
+var sideNavRecipe = 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%"
+        }
       }
     }
   },
@@ -87,64 +158,6 @@ function SideNavCollapseButton() {
   );
 }
 SideNavCollapseButton.displayName = "SideNavCollapseButton";
-var styles2 = {
-  stickyTop: css({
-    display: "flex",
-    flexDirection: "column",
-    flexShrink: 0,
-    p: "2",
-    gap: "2"
-  }),
-  scrollable: css({
-    flex: 1,
-    overflowY: "auto",
-    overflowX: "hidden",
-    px: "2"
-  }),
-  scrollableCollapsed: css({
-    flex: "none",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center"
-  }),
-  stickyBottom: css({
-    display: "flex",
-    flexDirection: "column",
-    flexShrink: 0,
-    mt: "auto",
-    p: "2",
-    gap: "2",
-    borderBlockStartWidth: "default",
-    borderBlockStartStyle: "solid",
-    borderBlockStartColor: "border"
-  }),
-  footerRow: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "1"
-  }),
-  footerRowCollapsed: css({
-    flexDirection: "column-reverse",
-    alignItems: "center"
-  }),
-  footerIcons: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "1",
-    ms: "auto"
-  }),
-  footerIconsCollapsed: css({
-    flexDirection: "column",
-    alignItems: "center",
-    ms: "0"
-  }),
-  topbarIcons: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "1",
-    ms: "auto"
-  })
-};
 function SideNav({
   children,
   className,
@@ -167,26 +180,36 @@ function SideNav({
     [isCollapsed, isCollapsible, toggle]
   );
   if (renderMode === "topbar") {
+    const classes2 = sideNavRecipe({ mode: "topbar" });
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cx(sideNavRecipe({ mode: "topbar" }), className),
+        className: cx(classes2.root, className),
         "data-testid": dataTestId,
+        ref,
         style,
         children: [
           header,
-          /* @__PURE__ */ jsx("div", { className: styles2.topbarIcons, children: footerIcons })
+          /* @__PURE__ */ jsx("div", { className: classes2.topbarIcons, children: footerIcons })
         ]
       }
     );
   }
   if (renderMode === "drawer") {
-    return /* @__PURE__ */ jsxs(MobileNav, { "data-testid": dataTestId, header, children: [
-      topContent,
-      children,
-      footer,
-      footerIcons
-    ] });
+    return /* @__PURE__ */ jsxs(
+      MobileNav,
+      {
+        "data-testid": dataTestId,
+        header,
+        ref,
+        children: [
+          topContent,
+          children,
+          footer,
+          footerIcons
+        ]
+      }
+    );
   }
   if (renderMode === "drawer-content") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -196,61 +219,34 @@ function SideNav({
       footerIcons
     ] });
   }
+  const classes = sideNavRecipe({ isCollapsed });
   return /* @__PURE__ */ jsx(SideNavCollapseContext, { value: collapseContext, children: /* @__PURE__ */ jsxs(
     "nav",
     {
       "aria-label": "Side navigation",
-      className: cx(sideNavRecipe({ isCollapsed }), className),
+      className: cx(classes.root, className),
       "data-testid": dataTestId,
       ref,
-      role: "navigation",
       style,
       children: [
-        isReactNode(header) || !isCollapsed && isReactNode(topContent) ? /* @__PURE__ */ jsxs("div", { className: styles2.stickyTop, children: [
+        isReactNode(header) || !isCollapsed && isReactNode(topContent) ? /* @__PURE__ */ jsxs("div", { className: classes.stickyTop, children: [
           header,
           !isCollapsed ? topContent : null
         ] }) : null,
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cx(
-              styles2.scrollable,
-              isCollapsed && styles2.scrollableCollapsed
-            ),
-            children
-          }
-        ),
-        isReactNode(footer) || isReactNode(footerIcons) || isCollapsible ? /* @__PURE__ */ jsxs("div", { className: styles2.stickyBottom, children: [
+        /* @__PURE__ */ jsx("div", { className: classes.scrollable, children }),
+        isReactNode(footer) || isReactNode(footerIcons) || isCollapsible ? /* @__PURE__ */ jsxs("div", { className: classes.stickyBottom, children: [
           footer,
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cx(
-                styles2.footerRow,
-                isCollapsed && styles2.footerRowCollapsed
-              ),
-              children: [
-                isCollapsible ? /* @__PURE__ */ jsx(SideNavCollapseButton, {}) : null,
-                isReactNode(footerIcons) ? /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cx(
-                      styles2.footerIcons,
-                      isCollapsed && styles2.footerIconsCollapsed
-                    ),
-                    children: footerIcons
-                  }
-                ) : null
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxs("div", { className: classes.footerRow, children: [
+            isCollapsible ? /* @__PURE__ */ jsx(SideNavCollapseButton, {}) : null,
+            isReactNode(footerIcons) ? /* @__PURE__ */ jsx("div", { className: classes.footerIcons, children: footerIcons }) : null
+          ] })
         ] }) : null
       ]
     }
   ) });
 }
 SideNav.displayName = "SideNav";
-var styles3 = {
+var styles2 = {
   root: css({
     display: "flex",
     alignItems: "center",
@@ -305,142 +301,172 @@ function SideNavHeading({
     Element,
     {
       "aria-label": isCollapsed && resolvedHref != null ? heading : void 0,
-      className: cx(styles3.root, isCollapsed && styles3.collapsed, className),
+      className: cx(styles2.root, isCollapsed && styles2.collapsed, className),
       "data-testid": dataTestId,
       href: resolvedHref,
       ref,
       style,
       to: Element === "a" ? void 0 : resolvedHref,
       children: [
-        isReactNode(logo) ? /* @__PURE__ */ jsx("span", { className: styles3.logo, children: logo }) : null,
-        !isCollapsed ? /* @__PURE__ */ jsxs("span", { className: styles3.text, children: [
+        isReactNode(logo) ? /* @__PURE__ */ jsx("span", { className: styles2.logo, children: logo }) : null,
+        !isCollapsed ? /* @__PURE__ */ jsxs("span", { className: styles2.text, children: [
           superheading != null ? /* @__PURE__ */ jsx(Text, { color: "secondary", type: "supporting", children: superheading }) : null,
           heading != null ? /* @__PURE__ */ jsx(Text, { type: "large", weight: "semibold", children: heading }) : null,
           subheading != null ? /* @__PURE__ */ jsx(Text, { color: "secondary", type: "supporting", children: subheading }) : null
         ] }) : null,
-        !isCollapsed && isReactNode(headerEndContent) ? /* @__PURE__ */ jsx("span", { className: styles3.endContent, children: headerEndContent }) : null
+        !isCollapsed && isReactNode(headerEndContent) ? /* @__PURE__ */ jsx("span", { className: styles2.endContent, children: headerEndContent }) : null
       ]
     }
   );
 }
 SideNavHeading.displayName = "SideNavHeading";
-var styles4 = {
-  navItem: 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: css({
-    bg: "bg.hover",
-    color: "fg",
-    fontWeight: "semibold"
-  }),
-  icon: css({
-    flexShrink: 0,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "var(--silver-sizes-icon-md)"
-  }),
-  collapsed: 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: css({
-    bg: "bg.hover",
-    color: "fg"
-  }),
-  collapsedDisabled: css({
-    opacity: 0.5,
-    cursor: "not-allowed",
-    pointerEvents: "none"
-  }),
-  toggleRow: 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 = 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: css({
-    opacity: 0.5,
-    cursor: "not-allowed",
-    pointerEvents: "none"
-  }),
-  chevron: css({
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    transitionProperty: "transform",
-    transitionDuration: "fast",
-    transitionTimingFunction: "default"
-  }),
-  chevronExpanded: css({
-    transform: "rotate(180deg)"
-  }),
-  toggleButton: 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: css({
-    display: "grid",
-    gridTemplateRows: "1fr",
-    transitionProperty: "grid-template-rows",
-    transitionDuration: "fast",
-    transitionTimingFunction: "default"
-  }),
-  childrenCollapsed: css({
-    gridTemplateRows: "0fr"
-  }),
-  childrenInner: css({
-    overflow: "hidden",
-    ps: "6"
-  })
-};
+  },
+  defaultVariants: {
+    isSelected: false,
+    isDisabled: false,
+    isExpanded: true
+  }
+});
 function SideNavItem({
   as,
   children,
@@ -458,14 +484,20 @@ function SideNavItem({
   ref,
   style
 }) {
-  const LinkComponent = useLinkComponent(as);
-  const { closeMobileNav } = useAppShellMobile();
+  const { closeMobileNav, isMobileNavOpen } = useAppShellMobile();
   const { isCollapsed } = useSideNavCollapse();
   const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
   const childrenId = useId();
   const hasChildren = 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 = useCallback(() => {
     setIsExpanded((prev) => !prev);
   }, []);
@@ -475,41 +507,24 @@ function SideNavItem({
       return;
     }
     onClick?.(event);
-    closeMobileNav();
+    if (isMobileNavOpen) {
+      closeMobileNav();
+    }
   };
-  const iconSlot = icon != null ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles4.icon, children: /* @__PURE__ */ jsx(Icon, { icon, size: "sm" }) }) : void 0;
+  const iconSlot = icon != null ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: classes.icon, children: /* @__PURE__ */ jsx(Icon, { icon, size: "sm" }) }) : void 0;
   if (isCollapsed) {
-    const collapsedClassNames = cx(
-      styles4.collapsed,
-      isSelected && styles4.collapsedSelected,
-      isDisabled && styles4.collapsedDisabled,
-      className
-    );
-    if (href != null && !isDisabled) {
-      return /* @__PURE__ */ 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 = cx(classes.collapsed, className);
     return /* @__PURE__ */ jsx(
-      "button",
+      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,
@@ -518,19 +533,8 @@ function SideNavItem({
       }
     );
   }
-  const chevronSlot = isExpandable ? /* @__PURE__ */ jsx("span", { className: cx(styles4.chevron, isExpanded && styles4.chevronExpanded), children: /* @__PURE__ */ jsx(Icon, { icon: ChevronDown, size: "sm" }) }) : null;
-  const childrenContainer = isReactNode(children) ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cx(
-        styles4.childrenContainer,
-        isExpandable && !isExpanded && styles4.childrenCollapsed
-      ),
-      id: childrenId,
-      role: "group",
-      children: /* @__PURE__ */ jsx("div", { className: styles4.childrenInner, children })
-    }
-  ) : null;
+  const chevronSlot = isExpandable ? /* @__PURE__ */ jsx("span", { className: classes.chevron, children: /* @__PURE__ */ jsx(Icon, { icon: ChevronDown, size: "sm" }) }) : null;
+  const childrenContainer = isReactNode(children) ? /* @__PURE__ */ jsx("div", { className: classes.childrenContainer, id: childrenId, role: "group", children: /* @__PURE__ */ jsx("div", { className: classes.childrenInner, children }) }) : null;
   if (isExpandable && !hasPrimaryAction) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -538,12 +542,7 @@ function SideNavItem({
         {
           "aria-controls": childrenId,
           "aria-expanded": isExpanded,
-          className: cx(
-            styles4.toggleRow,
-            isSelected && styles4.navItemSelected,
-            isDisabled && styles4.toggleRowDisabled,
-            className
-          ),
+          className: cx(classes.toggleRow, className),
           "data-testid": dataTestId,
           disabled: isDisabled,
           onClick: toggleExpanded,
@@ -554,7 +553,7 @@ function SideNavItem({
             Item,
             {
               as: "span",
-              className: styles4.navItem,
+              className: classes.toggleLabel,
               endContent: chevronSlot,
               label,
               startContent: iconSlot
@@ -571,11 +570,7 @@ function SideNavItem({
         Item,
         {
           "aria-current": isSelected ? "page" : void 0,
-          className: cx(
-            styles4.navItem,
-            isSelected && styles4.navItemSelected,
-            className
-          ),
+          className: cx(classes.item, className),
           "data-testid": dataTestId,
           endContent,
           href: isDisabled ? void 0 : href,
@@ -592,7 +587,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
@@ -608,11 +603,7 @@ function SideNavItem({
       Item,
       {
         "aria-current": isSelected ? "page" : void 0,
-        className: cx(
-          styles4.navItem,
-          isSelected && styles4.navItemSelected,
-          className
-        ),
+        className: cx(classes.item, className),
         "data-testid": dataTestId,
         endContent,
         href: isDisabled ? void 0 : href,
@@ -629,7 +620,7 @@ function SideNavItem({
   ] });
 }
 SideNavItem.displayName = "SideNavItem";
-var styles5 = {
+var styles3 = {
   root: css({
     display: "flex",
     flexDirection: "column",
@@ -677,14 +668,13 @@ function SideNavSection({
   const id = useId();
   const titleId = `${id}-title`;
   const shouldHideHeader = isHeaderHidden || isCollapsed;
-  const header = /* @__PURE__ */ jsxs("div", { className: styles5.header, children: [
-    /* @__PURE__ */ jsxs("span", { className: styles5.titleContainer, children: [
+  const header = /* @__PURE__ */ jsxs("div", { className: styles3.header, children: [
+    /* @__PURE__ */ jsxs("span", { className: styles3.titleContainer, children: [
       /* @__PURE__ */ jsx(
         Text,
         {
           as: "span",
           color: "secondary",
-          "data-testid": void 0,
           id: titleId,
           type: "supporting",
           weight: "semibold",
@@ -693,15 +683,15 @@ function SideNavSection({
       ),
       subtitle != null ? /* @__PURE__ */ jsx(Text, { as: "span", color: "secondary", type: "supporting", children: subtitle }) : null
     ] }),
-    isReactNode(endContent) ? /* @__PURE__ */ jsx("span", { className: styles5.endContent, children: endContent }) : null
+    isReactNode(endContent) ? /* @__PURE__ */ jsx("span", { className: styles3.endContent, children: endContent }) : null
   ] });
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "aria-labelledby": titleId,
       className: cx(
-        styles5.root,
-        isCollapsed && styles5.rootCollapsed,
+        styles3.root,
+        isCollapsed && styles3.rootCollapsed,
         className
       ),
       "data-testid": dataTestId,
@@ -710,7 +700,7 @@ function SideNavSection({
       style,
       children: [
         shouldHideHeader ? /* @__PURE__ */ jsx(VisuallyHidden, { children: header }) : header,
-        /* @__PURE__ */ jsx("div", { className: styles5.items, children })
+        /* @__PURE__ */ jsx("div", { className: styles3.items, children })
       ]
     }
   );
@@ -718,5 +708,5 @@ function SideNavSection({
 SideNavSection.displayName = "SideNavSection";
 
 export { SideNav, SideNavCollapseContext, SideNavHeading, SideNavItem, SideNavRenderContext, SideNavSection };
-//# sourceMappingURL=chunk-SOCSUNIM.js.map
-//# sourceMappingURL=chunk-SOCSUNIM.js.map
+//# sourceMappingURL=chunk-LDYUVGD4.js.map
+//# sourceMappingURL=chunk-LDYUVGD4.js.map