@stenajs-webui/panels 19.0.0-next.18 → 19.0.0-next.19

package/dist/components/collapsible/Collapsible.d.ts

@@ -1,8 +1,7 @@
-import { ButtonElementProps, DivProps } from "@stenajs-webui/core";
+import { ButtonElementProps } from "@stenajs-webui/core";
 import * as React from "react";
-export interface CollapsibleProps extends Omit<DivProps, "onClick"> {
+export interface CollapsibleProps extends Omit<ButtonElementProps, "value"> {
     label: string;
-    onClick?: ButtonElementProps["onClick"];
     contentLeft?: React.ReactNode;
     contentRight?: React.ReactNode;
     collapsed?: boolean;

package/dist/index.es.js

@@ -1,61 +1,61 @@
 (function(){"use strict";try{var o=document.createElement("style");o.appendChild(document.createTextNode("._navBar_kzibd_1{--swui-navbar-background-color: var(--lhds-color-ui-50);--swui-navbar-item-background-color-hover: var(--lhds-color-blue-700);--swui-navbar-item-background-color-selected: var(--lhds-color-blue-600);--swui-navbar-item-background-color-selected-hover: var( --lhds-color-blue-700 );--swui-nav-bar-height: 48px;background-color:var(--swui-navbar-background-color);height:var(--swui-nav-bar-height);min-height:var(--swui-nav-bar-height)}._navBarButton_18iz9_1{--swui-nav-bar-button-text-color: var(--lhds-color-blue-600);--swui-nav-bar-button-background-color: transparent;--swui-nav-bar-button-background-color-hover: var(--lhds-color-ui-100);--swui-nav-bar-button-background-color-focus: var(--lhds-color-ui-200);--swui-nav-bar-button-background-color-active: var(--lhds-color-ui-200);--swui-nav-bar-button-background-color-selected: var(--lhds-color-blue-200);--swui-nav-bar-button-background-color-selected-hover: var( --lhds-color-blue-100 );--swui-nav-bar-button-background-color-selected-focus: var( --lhds-color-blue-300 );--swui-nav-bar-button-background-color-selected-active: var( --lhds-color-blue-200 );--swui-flat-button-text-color: var(--swui-nav-bar-button-text-color);--swui-flat-button-icon-color: var(--swui-nav-bar-button-text-color);--swui-flat-button-text-color-active: var(--swui-nav-bar-button-text-color);--swui-flat-button-background-color: var( --swui-nav-bar-button-background-color );--swui-flat-button-background-color-hover: var( --swui-nav-bar-button-background-color-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-button-background-color-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-button-background-color-active )}._navBarButton_18iz9_1._selected_18iz9_36{--swui-flat-button-background-color: var( --swui-nav-bar-button-background-color-selected );--swui-flat-button-background-color-hover: var( --swui-nav-bar-button-background-color-selected-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-button-background-color-selected-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-button-background-color-selected-active )}._navBarNotificationButton_8ej1j_1{--swui-nav-bar-notification-button-text-color: var(--lhds-color-ui-50);--swui-nav-bar-notification-button-background-color: var(--lhds-color-ui-400);--swui-nav-bar-notification-button-background-color-hover: var( --lhds-color-blue-900 );--swui-nav-bar-notification-button-background-color-focus: var( --lhds-color-blue-700 );--swui-nav-bar-notification-button-background-color-active: var( --lhds-color-blue-800 );--swui-nav-bar-notification-button-background-color-unread: var( --lhds-color-red-500 );--swui-nav-bar-notification-button-background-color-unread-hover: var( --lhds-color-red-700 );--swui-nav-bar-notification-button-background-color-unread-focus: var( --lhds-color-red-700 );--swui-nav-bar-notification-button-background-color-unread-active: var( --lhds-color-red-800 );--swui-flat-button-text-color: var( --swui-nav-bar-notification-button-text-color );--swui-flat-button-icon-color: var( --swui-nav-bar-notification-button-text-color );--swui-flat-button-text-color-active: var( --swui-nav-bar-notification-button-text-color );--swui-flat-button-background-color: var( --swui-nav-bar-notification-button-background-color );--swui-flat-button-background-color-hover: var( --swui-nav-bar-notification-button-background-color-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-notification-button-background-color-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-notification-button-background-color-active );--swui-nav-bar-notification-shake-count: 3;transition:.5s width}._navBarNotificationButton_8ej1j_1._unread_8ej1j_54{--swui-flat-button-background-color: var( --swui-nav-bar-notification-button-background-color-unread );--swui-flat-button-background-color-hover: var( --swui-nav-bar-notification-button-background-color-unread-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-notification-button-background-color-unread-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-notification-button-background-color-unread-active )}._navBarNotificationButton_8ej1j_1._unread_8ej1j_54._hasCount_8ej1j_68 ._icon_8ej1j_69{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:_shake_8ej1j_1 1.5s ease-in-out var(--swui-nav-bar-notification-shake-count);animation:_shake_8ej1j_1 1.5s ease-in-out var(--swui-nav-bar-notification-shake-count)}@-webkit-keyframes _shake_8ej1j_1{0%{-webkit-transform:rotate(0);transform:rotate(0)}7%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}15%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}22%{-webkit-transform:rotate(16deg);transform:rotate(16deg)}30%{-webkit-transform:rotate(-16deg);transform:rotate(-16deg)}38%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}42%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}46%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}to{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes _shake_8ej1j_1{0%{-webkit-transform:rotate(0);transform:rotate(0)}7%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}15%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}22%{-webkit-transform:rotate(16deg);transform:rotate(16deg)}30%{-webkit-transform:rotate(-16deg);transform:rotate(-16deg)}38%{-webkit-transform:rotate(6deg);transform:rotate(6deg)}42%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}46%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}to{-webkit-transform:rotate(0);transform:rotate(0)}}._navBarSearchFieldInput_16tw5_1._navBarSearchFieldInput_16tw5_1{--swui-textinput-line-height: 2.7rem;--swui-textinput-text-color: var(--lhds-color-ui-50);--swui-textinput-placeholder-color: var(--lhds-color-blue-800);padding:1px var(--swui-metrics-indent)}._navBarSearchFieldInput_16tw5_1._navBarSearchFieldInput_16tw5_1:focus{--swui-textinput-text-color: var(--lhds-color-ui-800)}._navBarSearchField_16tw5_1{--swui-textinput-animation-time: var(--swui-animation-time-fast);--swui-textinput-placeholder-color: var(--lhds-color-ui-500);--swui-textinput-bg-color: var(--lhds-color-ui-200);--swui-textinput-border-color: transparent;--swui-textinput-border-color-hover: transparent;padding:1px var(--swui-metrics-indent) 0;border-radius:var(--swui-max-border-radius)}._navBarSearchField_16tw5_1:focus-within{--swui-textinput-text-color: var(--lhds-color-ui-800);--swui-field-text-color: var(--swui-field-text-color);--swui-textinput-bg-color: var(--lhds-color-ui-50)}._navBarUserButton_1cwhm_1{--swui-nav-bar-user-button-text-color: var(--lhds-color-blue-600);--swui-nav-bar-user-button-background-color: var(--lhds-color-ui-50);--swui-nav-bar-user-button-background-color-hover: var(--lhds-color-ui-100);--swui-nav-bar-user-button-background-color-focus: var(--lhds-color-ui-100);--swui-nav-bar-user-button-background-color-active: var(--lhds-color-ui-200);--swui-flat-button-text-color: var(--swui-nav-bar-user-button-text-color);--swui-flat-button-icon-color: var(--swui-nav-bar-user-button-text-color);--swui-flat-button-text-color-active: var( --swui-nav-bar-user-button-text-color );--swui-flat-button-background-color: var( --swui-nav-bar-user-button-background-color );--swui-flat-button-background-color-hover: var( --swui-nav-bar-user-button-background-color-hover );--swui-flat-button-background-color-focus: var( --swui-nav-bar-user-button-background-color-focus );--swui-flat-button-background-color-active: var( --swui-nav-bar-user-button-background-color-active );--swui-button-border-radius: 16px;--swui-button-border-radius-icon-only: 16px}._navBarUserButton_1cwhm_1._initials_1cwhm_31{width:32px}._unreadDot_l8bni_1{position:relative}._unreadDot_l8bni_1 ._dot_l8bni_4{top:1px;right:1px;position:absolute;width:8px;height:8px;border-radius:var(--swui-max-border-radius);background:var(--lhds-color-blue-500)}._notification_1hao0_1{display:flex;flex-direction:column;width:100%;background:var(--lhds-color-ui-50)}._notification_1hao0_1 ._body_1hao0_7{padding-left:64px;padding-right:24px;padding-bottom:16px}._notification_1hao0_1._standard_1hao0_13._unread_1hao0_14{background:var(--lhds-color-blue-50)}._notification_1hao0_1._danger_1hao0_19{background:var(--lhds-color-red-100)}._notificationList_1rkvu_1{display:flex;flex-direction:column;gap:2px;background:var(--lhds-color-ui-200)}._clickable_1ijxc_1{--swui-toast-border-color: transparent;--swui-toast-item-border-color-hover: var(--lhds-color-blue-500);--current-border-color: var(--swui-toast-border-color);border-width:1px;border-style:solid;border-color:var(--current-border-color);position:absolute;top:0;left:0;right:0;bottom:0;border-radius:8px;background-color:transparent;width:100%;cursor:pointer}._clickable_1ijxc_1:hover{--current-border-color: var(--swui-toast-item-border-color-hover)}._nonClickable_1ijxc_27{position:relative;z-index:1;pointer-events:none}._nonClickable_1ijxc_27 a,._nonClickable_1ijxc_27 button{pointer-events:auto}._sidebarMenu_iwe92_1{--swui-sidebar-menu-separator-color: var(--swui-white);--swui-sidebar-menu-text-color: var(--lhds-color-ui-900);--swui-sidebar-menu-icon-color: var(--lhds-color-ui-900);--swui-sidebar-menu-background-color: transparent;--swui-sidebar-menu-background-color-hover: var(--lhds-color-ui-400);--swui-sidebar-menu-background-color-focus: var(--lhds-color-ui-400);--swui-sidebar-menu-background-color-active: var(--lhds-color-ui-300);--swui-sidebar-menu-background-selected: var(--lhds-color-blue-100);--swui-sidebar-menu-background-selected-hover: var(--lhds-color-blue-200);--swui-sidebar-menu-background-selected-focus: var(--lhds-color-blue-200);--swui-sidebar-menu-background-selected-active: var(--lhds-color-blue-100);--current-separator-color: var(--swui-sidebar-menu-separator-color);--current-text-color: var(--swui-sidebar-menu-text-color);--current-icon-color: var(--swui-sidebar-menu-icon-color);--current-background-color: var(--swui-sidebar-menu-background-color);--current-background-color-hover: var( --swui-sidebar-menu-background-color-hover );--current-background-color-focus: var( --swui-sidebar-menu-background-color-focus );--current-background-color-active: var( --swui-sidebar-menu-background-color-active );--current-background-selected: var(--swui-sidebar-menu-background-selected);--current-background-selected-hover: var( --swui-sidebar-menu-background-selected-hover );--current-background-selected-focus: var( --swui-sidebar-menu-background-selected-focus );--current-background-selected-active: var( --swui-sidebar-menu-background-selected-active );background-color:var(--current-background-color);height:100dvh}._sidebarMenu_iwe92_1 button{--swui-button-text-color: var(--swui-white);--swui-button-background-color-hover: var( --swui-sidebar-menu-background-color-hover )}._stenaFlag_108h7_1{height:32px}")),document.head.appendChild(o)}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
 import { jsx as n, jsxs as a, Fragment as b } from "react/jsx-runtime";
-import { ActionMenu as q, ActionMenuContext as rn, stenaAngleDown as G, PrimaryButton as cn, SecondaryButton as sn, FlatButton as C, stenaHamburger as J, stenaBellFilled as ln, stenaUserCircle as dn, CircledIcon as K, stenaTimes as Q, Icon as un, stenaMail as hn, MenuButton as R, Banner as pn, Spinner as gn, StenaFlag as fn, stenaAngleLeftDouble as X, stenaPin as mn, IconMenuButton as F, IconMenuButtonLink as bn, MenuButtonLink as vn } from "@stenajs-webui/elements";
+import { ActionMenu as G, ActionMenuContext as rn, stenaAngleDown as J, PrimaryButton as cn, SecondaryButton as sn, FlatButton as C, stenaHamburger as K, stenaBellFilled as ln, stenaUserCircle as dn, CircledIcon as Q, stenaTimes as X, Icon as un, stenaMail as hn, MenuButton as L, Banner as pn, Spinner as gn, StenaFlag as fn, stenaAngleLeftDouble as Y, stenaPin as mn, IconMenuButton as R, IconMenuButtonLink as bn, MenuButtonLink as vn } from "@stenajs-webui/elements";
 import * as _n from "react";
 import { useRef as Cn, useMemo as Bn, forwardRef as xn, createContext as yn, useContext as kn, useState as In } from "react";
-import { useBoolean as L, Column as f, Box as s, Row as l, Indent as x, Heading as P, Text as v, Space as _, SeparatorLine as Nn } from "@stenajs-webui/core";
+import { useBoolean as P, Column as f, Box as s, Row as l, Indent as x, Heading as z, Text as v, Space as _, SeparatorLine as Nn } from "@stenajs-webui/core";
 import { Popover as M, Tooltip as wn } from "@stenajs-webui/tooltip";
-import { Checkbox as Y, TextInput as Mn } from "@stenajs-webui/forms";
+import { Checkbox as Z, TextInput as Mn } from "@stenajs-webui/forms";
 import h from "classnames";
 import { cssColor as m } from "@stenajs-webui/theme";
-const z = ({
+const $ = ({
   renderItems: e,
   placement: t = "bottom",
   buttonComponent: o,
-  rightIcon: i = G,
+  rightIcon: i = J,
   portalTarget: r = "parent",
   zIndex: c,
   menuWidth: u,
   menuTop: d,
   onClick: p,
   disableArrow: g = !1,
-  ...nn
+  ...S
 }) => {
-  const [H, E, y, en] = L(!1), S = Cn(null), tn = {
+  const [E, D, y, en] = P(!1), j = Cn(null), tn = {
     name: "focusManager",
     defaultValue: !0,
     fn({ popper: k }) {
       let N = !1;
-      const D = (B) => {
+      const U = (B) => {
         B.key === "Escape" && (N = !0, y()), (B.key === "Enter" || B.key === " ") && (N = !0);
       };
       return {
         onCreate() {
-          k.addEventListener("keydown", D);
+          k.addEventListener("keydown", U);
         },
         onDestroy() {
-          k.removeEventListener("keydown", D);
+          k.removeEventListener("keydown", U);
         },
         onMount() {
           var B;
           N = !1, (B = k.querySelector("button:not([disabled]), a[href]")) == null || B.focus();
         },
         onHide() {
-          S.current && N && S.current.focus();
+          j.current && N && j.current.focus();
         }
       };
     }
-  }, on = Bn(() => ({ open: E, close: y }), [E, y]), an = (k) => {
+  }, on = Bn(() => ({ open: D, close: y }), [D, y]), an = (k) => {
     p == null || p(k), en();
   };
   return /* @__PURE__ */ n(
     M,
     {
       disablePadding: !0,
-      visible: H,
+      visible: E,
       onClickOutside: y,
       placement: t,
-      content: H && /* @__PURE__ */ n(q, { width: u, top: d, trapFocus: !0, children: /* @__PURE__ */ n(rn.Provider, { value: on, children: e(y) }) }),
+      content: E && /* @__PURE__ */ n(G, { width: u, top: d, trapFocus: !0, children: /* @__PURE__ */ n(rn.Provider, { value: on, children: e(y) }) }),
       arrow: !1,
       appendTo: r,
       zIndex: c,
@@ -65,18 +65,18 @@ const z = ({
         o,
         {
           rightIcon: g ? void 0 : i,
-          ...nn,
-          ref: S,
+          ...S,
+          ref: j,
           onClick: an
         }
       )
     }
   );
-}, Ne = (e) => /* @__PURE__ */ n(z, { buttonComponent: cn, ...e }), we = (e) => /* @__PURE__ */ n(z, { buttonComponent: sn, ...e }), Sn = (e) => /* @__PURE__ */ n(z, { buttonComponent: C, ...e }), jn = "1px solid var(--lhds-color-ui-300)", Me = ({
+}, Ne = (e) => /* @__PURE__ */ n($, { buttonComponent: cn, ...e }), we = (e) => /* @__PURE__ */ n($, { buttonComponent: sn, ...e }), Sn = (e) => /* @__PURE__ */ n($, { buttonComponent: C, ...e }), jn = "1px solid var(--lhds-color-ui-300)", Me = ({
   renderMenu: e,
   ...t
 }) => {
-  const [o, i, r] = L(!1);
+  const [o, i, r] = P(!1);
   return /* @__PURE__ */ n(
     M,
     {
@@ -84,7 +84,7 @@ const z = ({
       arrow: !1,
       visible: o,
       disablePadding: !0,
-      content: e ? /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(q, { children: e(r) }) }) : void 0,
+      content: e ? /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(G, { children: e(r) }) }) : void 0,
       placement: "bottom-start",
       children: /* @__PURE__ */ n(s, { display: "inline-block", children: /* @__PURE__ */ a(
         l,
@@ -95,9 +95,9 @@ const z = ({
           border: jn,
           borderRadius: "4px",
           children: [
-            /* @__PURE__ */ n(Y, { ...t }),
+            /* @__PURE__ */ n(Z, { ...t }),
             /* @__PURE__ */ n(x, { num: 0.5 }),
-            /* @__PURE__ */ n(C, { size: "small", onClick: i, leftIcon: G })
+            /* @__PURE__ */ n(C, { size: "small", onClick: i, leftIcon: J })
           ]
         }
       ) })
@@ -111,7 +111,7 @@ const z = ({
 }) => /* @__PURE__ */ n(
   C,
   {
-    leftIcon: J,
+    leftIcon: K,
     className: e,
     onClick: t
   }
@@ -161,7 +161,7 @@ const z = ({
       ]
     }
   );
-}, Pn = "_navBarButton_18iz9_1", zn = "_selected_18iz9_36", U = {
+}, Pn = "_navBarButton_18iz9_1", zn = "_selected_18iz9_36", O = {
   navBarButton: Pn,
   selected: zn
 }, $n = ({
@@ -173,17 +173,17 @@ const z = ({
   {
     ...o,
     className: h(
-      U.navBarButton,
-      e && U.selected,
+      O.navBarButton,
+      e && O.selected,
       t
     )
   }
-), je = (e) => /* @__PURE__ */ n(P, { whiteSpace: "nowrap", variant: "h4", as: "h1", ...e }), Fe = ({
+), je = (e) => /* @__PURE__ */ n(z, { whiteSpace: "nowrap", variant: "h4", as: "h1", ...e }), Fe = ({
   content: e,
   children: t,
   ...o
 }) => {
-  const [i, , r, c] = L(!1);
+  const [i, , r, c] = P(!1);
   return /* @__PURE__ */ n(
     M,
     {
@@ -229,7 +229,7 @@ const z = ({
       iconClassName: h(r, I.icon)
     }
   );
-}, On = "_navBarSearchFieldInput_16tw5_1", Tn = "_navBarSearchField_16tw5_1", O = {
+}, On = "_navBarSearchFieldInput_16tw5_1", Tn = "_navBarSearchField_16tw5_1", T = {
   navBarSearchFieldInput: On,
   navBarSearchField: Tn
 }, Le = ({
@@ -240,12 +240,12 @@ const z = ({
 }) => /* @__PURE__ */ n(
   Mn,
   {
-    wrapperClassName: h(O.navBarSearchField, o),
-    className: h(O.navBarSearchFieldInput, t),
+    wrapperClassName: h(T.navBarSearchField, o),
+    className: h(T.navBarSearchFieldInput, t),
     placeholder: e,
     ...i
   }
-), Vn = "_navBarUserButton_1cwhm_1", Wn = "_initials_1cwhm_31", T = {
+), Vn = "_navBarUserButton_1cwhm_1", Wn = "_initials_1cwhm_31", V = {
   navBarUserButton: Vn,
   initials: Wn
 }, Pe = ({
@@ -260,21 +260,21 @@ const z = ({
   {
     ...c,
     className: h(
-      { [T.initials]: o != null },
-      T.navBarUserButton,
+      { [V.initials]: o != null },
+      V.navBarUserButton,
       e
     ),
     leftIcon: t != null ? i : void 0,
     label: o != null ? o : t,
     disableArrow: !0
   }
-), qn = "_unreadDot_l8bni_1", Gn = "_dot_l8bni_4", V = {
+), qn = "_unreadDot_l8bni_1", Gn = "_dot_l8bni_4", W = {
   unreadDot: qn,
   dot: Gn
-}, Jn = ({ children: e }) => /* @__PURE__ */ a("div", { className: V.unreadDot, children: [
+}, Jn = ({ children: e }) => /* @__PURE__ */ a("div", { className: W.unreadDot, children: [
   e,
-  /* @__PURE__ */ n("div", { className: V.dot })
-] }), Z = ({
+  /* @__PURE__ */ n("div", { className: W.dot })
+] }), nn = ({
   text: e,
   timestamp: t,
   icon: o,
@@ -286,7 +286,7 @@ const z = ({
   variant: p
 }) => {
   const g = o ? /* @__PURE__ */ n(
-    K,
+    Q,
     {
       size: "small",
       icon: o,
@@ -322,7 +322,7 @@ const z = ({
         children: /* @__PURE__ */ n(
           C,
           {
-            leftIcon: Q,
+            leftIcon: X,
             onClick: u,
             "aria-label": "Close",
             variant: "danger"
@@ -354,7 +354,7 @@ const z = ({
       o && w.unread
     ),
     children: [
-      /* @__PURE__ */ n(Z, { ...i, unread: o, variant: e }),
+      /* @__PURE__ */ n(nn, { ...i, unread: o, variant: e }),
       t && /* @__PURE__ */ n(f, { className: w.body, children: t })
     ]
   }
@@ -365,7 +365,7 @@ const z = ({
 }) => /* @__PURE__ */ a("div", { className: te.notificationList, children: [
   e,
   /* @__PURE__ */ n("div", {})
-] }), oe = "_clickable_1ijxc_1", ie = "_nonClickable_1ijxc_27", j = {
+] }), oe = "_clickable_1ijxc_1", ie = "_nonClickable_1ijxc_27", F = {
   clickable: oe,
   nonClickable: ie
 }, Ae = ({
@@ -386,8 +386,8 @@ const z = ({
     role: "alert",
     position: "relative",
     children: [
-      /* @__PURE__ */ n(s, { className: h({ [j.nonClickable]: e }), children: /* @__PURE__ */ n(Z, { ...c }) }),
-      o && /* @__PURE__ */ a(s, { indent: 3, className: h({ [j.nonClickable]: e }), children: [
+      /* @__PURE__ */ n(s, { className: h({ [F.nonClickable]: e }), children: /* @__PURE__ */ n(nn, { ...c }) }),
+      o && /* @__PURE__ */ a(s, { indent: 3, className: h({ [F.nonClickable]: e }), children: [
         o,
         /* @__PURE__ */ n(_, { num: 2 })
       ] }),
@@ -395,7 +395,7 @@ const z = ({
         "button",
         {
           onClick: e,
-          className: j.clickable,
+          className: F.clickable,
           "aria-label": t
         }
       )
@@ -414,13 +414,15 @@ const z = ({
     onClick: c,
     disabled: u = !1,
     children: d,
-    autoFocus: p = !1
-  }, g) {
+    autoFocus: p = !1,
+    ...g
+  }, S) {
     return /* @__PURE__ */ n(
-      R,
+      L,
       {
+        ...g,
         autoFocus: p,
-        ref: g,
+        ref: S,
         label: t,
         onClick: c,
         disabled: u,
@@ -446,7 +448,7 @@ const z = ({
   re,
   {
     contentLeft: /* @__PURE__ */ n(
-      Y,
+      Z,
       {
         value: e,
         indeterminate: i,
@@ -474,7 +476,7 @@ const z = ({
 }) => /* @__PURE__ */ a(s, { alignItems: "center", children: [
   /* @__PURE__ */ n(gn, { size: "small" }),
   /* @__PURE__ */ n(_, { num: 4 }),
-  /* @__PURE__ */ n(P, { variant: "h4", children: e })
+  /* @__PURE__ */ n(z, { variant: "h4", children: e })
 ] }), Oe = (e) => /* @__PURE__ */ n(
   s,
   {
@@ -508,12 +510,12 @@ const z = ({
   contentRight: r
 }) => /* @__PURE__ */ a(l, { alignItems: "center", gap: 2, height: "64px", children: [
   /* @__PURE__ */ a(l, { alignItems: "center", children: [
-    /* @__PURE__ */ n(l, { width: "64px", alignItems: "center", children: e && /* @__PURE__ */ n(K, { icon: e }) }),
-    /* @__PURE__ */ n(P, { variant: "h3", as: o, children: t })
+    /* @__PURE__ */ n(l, { width: "64px", alignItems: "center", children: e && /* @__PURE__ */ n(Q, { icon: e }) }),
+    /* @__PURE__ */ n(z, { variant: "h3", as: o, children: t })
   ] }),
   /* @__PURE__ */ n(l, { alignItems: "center", children: i }),
   /* @__PURE__ */ n(l, { style: { marginLeft: "auto" }, alignItems: "center", children: r })
-] }), le = "_sidebarMenu_iwe92_1", W = {
+] }), le = "_sidebarMenu_iwe92_1", q = {
   sidebarMenu: le
 }, de = "_stenaFlag_108h7_1", ue = {
   stenaFlag: de
@@ -526,7 +528,7 @@ const z = ({
     indent: 1,
     minHeight: "48px",
     children: [
-      /* @__PURE__ */ n(C, { leftIcon: Q, onClick: e, variant: "danger" }),
+      /* @__PURE__ */ n(C, { leftIcon: X, onClick: e, variant: "danger" }),
       /* @__PURE__ */ n(fn, { className: ue.stenaFlag })
     ]
   }
@@ -536,7 +538,7 @@ const z = ({
   label: o
 }) => {
   const i = e ? "Unpin menu" : "Pin menu", r = o != null ? o : i;
-  return /* @__PURE__ */ n(R, { onClick: t, label: r, leftIcon: e ? X : mn });
+  return /* @__PURE__ */ n(L, { onClick: t, label: r, leftIcon: e ? Y : mn });
 }, qe = ({
   className: e,
   children: t,
@@ -550,7 +552,7 @@ const z = ({
   s,
   {
     indent: 1,
-    className: h(W.sidebarMenu, e),
+    className: h(q.sidebarMenu, e),
     style: {
       ["--swui-sidebar-menu-item-height"]: "40px"
     },
@@ -561,7 +563,7 @@ const z = ({
       /* @__PURE__ */ n(
         s,
         {
-          className: W.sidebarMenuContent,
+          className: q.sidebarMenuContent,
           height: "100%",
           background: "var(--current-background-color)",
           children: /* @__PURE__ */ a(f, { justifyContent: "space-between", flex: 1, gap: 1, children: [
@@ -581,7 +583,7 @@ const z = ({
       )
     ]
   }
-), $ = yn(!1), A = () => kn($), Ge = ({
+), A = yn(!1), H = () => kn(A), Ge = ({
   closeButtonVisible: e,
   onClickCloseButton: t,
   onClickMenuButton: o,
@@ -599,13 +601,13 @@ const z = ({
     shadow: "popover",
     background: m("--lhds-color-ui-50"),
     children: [
-      /* @__PURE__ */ n(F, { onClick: o, icon: J }),
+      /* @__PURE__ */ n(R, { onClick: o, icon: K }),
       /* @__PURE__ */ a(f, { justifyContent: "space-between", flex: 1, gap: 1, children: [
-        /* @__PURE__ */ n(f, { gap: 1, children: /* @__PURE__ */ n($.Provider, { value: !0, children: i }) }),
+        /* @__PURE__ */ n(f, { gap: 1, children: /* @__PURE__ */ n(A.Provider, { value: !0, children: i }) }),
         e && /* @__PURE__ */ n(
-          F,
+          R,
           {
-            icon: X,
+            icon: Y,
             onClick: t
           }
         )
@@ -614,14 +616,14 @@ const z = ({
   }
 ), ge = ({
   label: e
-}) => A() ? null : /* @__PURE__ */ a(s, { height: "32px", justifyContent: "center", indent: 1, children: [
+}) => H() ? null : /* @__PURE__ */ a(s, { height: "32px", justifyContent: "center", indent: 1, children: [
   /* @__PURE__ */ n(_, {}),
   /* @__PURE__ */ n(v, { variant: "overline", size: "smaller", children: e })
 ] }), fe = ({
   label: e,
   leftIcon: t,
   ...o
-}) => t == null ? null : /* @__PURE__ */ n(wn, { label: e, placement: "right", appendTo: document.body, children: /* @__PURE__ */ n(bn, { icon: t, ...o }) }), Je = (e) => A() ? /* @__PURE__ */ n(fe, { ...e }) : /* @__PURE__ */ n(vn, { ...e }), me = ({
+}) => t == null ? null : /* @__PURE__ */ n(wn, { label: e, placement: "right", appendTo: document.body, children: /* @__PURE__ */ n(bn, { icon: t, ...o }) }), Je = (e) => H() ? /* @__PURE__ */ n(fe, { ...e }) : /* @__PURE__ */ n(vn, { ...e }), me = ({
   children: e,
   label: t,
   icon: o,
@@ -644,13 +646,13 @@ const z = ({
         spacing: 1,
         indent: 1,
         gap: 2,
-        children: /* @__PURE__ */ a($.Provider, { value: !1, children: [
+        children: /* @__PURE__ */ a(A.Provider, { value: !1, children: [
           /* @__PURE__ */ n(ge, { label: t }),
           e
         ] })
       }
     ),
-    children: /* @__PURE__ */ n(F, { icon: o })
+    children: /* @__PURE__ */ n(R, { icon: o })
   }
 ), Ke = ({
   children: e,
@@ -660,8 +662,8 @@ const z = ({
   initialExpand: r = !1
 }) => {
   const [c, u] = In(r);
-  return A() ? o == null ? null : /* @__PURE__ */ n(me, { label: t, icon: o, children: e }) : /* @__PURE__ */ n(
-    R,
+  return H() ? o == null ? null : /* @__PURE__ */ n(me, { label: t, icon: o, children: e }) : /* @__PURE__ */ n(
+    L,
     {
       label: t,
       onClick: () => u(!c),
@@ -736,7 +738,7 @@ export {
   Le as NavBarSearchField,
   Pe as NavBarUserButton,
   ze as Notification,
-  Z as NotificationHeader,
+  nn as NotificationHeader,
   $e as NotificationList,
   Te as PageHeader,
   Ve as PageHeaderRow,