@stenajs-webui/panels 19.0.0-next.20 → 19.0.0-next.21

package/dist/index.es.js

@@ -1,5 +1,5 @@
 (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 { jsx as n, jsxs as i, Fragment as b } from "react/jsx-runtime";
 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";
@@ -12,11 +12,11 @@ const $ = ({
   renderItems: e,
   placement: t = "bottom",
   buttonComponent: o,
-  rightIcon: i = J,
+  rightIcon: a = J,
   portalTarget: r = "parent",
   zIndex: c,
-  menuWidth: u,
-  menuTop: d,
+  menuWidth: d,
+  menuTop: u,
   onClick: p,
   disableArrow: g = !1,
   ...S
@@ -55,7 +55,7 @@ const $ = ({
       visible: E,
       onClickOutside: y,
       placement: t,
-      content: E && /* @__PURE__ */ n(G, { width: u, top: d, trapFocus: !0, children: /* @__PURE__ */ n(rn.Provider, { value: on, children: e(y) }) }),
+      content: E && /* @__PURE__ */ n(G, { width: d, top: u, trapFocus: !0, children: /* @__PURE__ */ n(rn.Provider, { value: on, children: e(y) }) }),
       arrow: !1,
       appendTo: r,
       zIndex: c,
@@ -64,7 +64,7 @@ const $ = ({
       children: /* @__PURE__ */ n(
         o,
         {
-          rightIcon: g ? void 0 : i,
+          rightIcon: g ? void 0 : a,
           ...S,
           ref: j,
           onClick: an
@@ -76,7 +76,7 @@ const $ = ({
   renderMenu: e,
   ...t
 }) => {
-  const [o, i, r] = P(!1);
+  const [o, a, r] = P(!1);
   return /* @__PURE__ */ n(
     M,
     {
@@ -86,7 +86,7 @@ const $ = ({
       disablePadding: !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(
+      children: /* @__PURE__ */ n(s, { display: "inline-block", children: /* @__PURE__ */ i(
         l,
         {
           spacing: 0.5,
@@ -97,7 +97,7 @@ const $ = ({
           children: [
             /* @__PURE__ */ n(Z, { ...t }),
             /* @__PURE__ */ n(x, { num: 0.5 }),
-            /* @__PURE__ */ n(C, { size: "small", onClick: i, leftIcon: J })
+            /* @__PURE__ */ n(C, { size: "small", onClick: a, leftIcon: J })
           ]
         }
       ) })
@@ -119,34 +119,34 @@ const $ = ({
   left: e,
   className: t,
   showMenuButton: o = !1,
-  children: i,
+  children: a,
   right: r,
   center: c,
-  onClickMenuButton: u
+  onClickMenuButton: d
 }) => {
-  const d = c ? 1 : void 0;
-  return /* @__PURE__ */ a(
+  const u = c ? 1 : void 0;
+  return /* @__PURE__ */ i(
     l,
     {
       justifyContent: "space-between",
       className: h(Rn.navBar, t),
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ i(
           l,
           {
-            flex: d,
+            flex: u,
             justifyContent: "flex-start",
             alignItems: "center",
             children: [
-              /* @__PURE__ */ a(l, { width: "86px", alignItems: "center", children: [
+              /* @__PURE__ */ i(l, { width: "86px", alignItems: "center", children: [
                 /* @__PURE__ */ n(x, {}),
-                o && /* @__PURE__ */ n(Ln, { onClick: u })
+                o && /* @__PURE__ */ n(Ln, { onClick: d })
               ] }),
-              e && /* @__PURE__ */ a(b, { children: [
+              e && /* @__PURE__ */ i(b, { children: [
                 e,
                 /* @__PURE__ */ n(x, { num: 2 })
               ] }),
-              i && /* @__PURE__ */ n(b, { children: /* @__PURE__ */ n(l, { justifyContent: "center", alignItems: "center", children: _n.Children.map(i, (p, g) => /* @__PURE__ */ a(b, { children: [
+              a && /* @__PURE__ */ n(b, { children: /* @__PURE__ */ n(l, { justifyContent: "center", alignItems: "center", children: _n.Children.map(a, (p, g) => /* @__PURE__ */ i(b, { children: [
                 g > 0 && /* @__PURE__ */ n(x, {}),
                 p
               ] })) }) })
@@ -154,7 +154,7 @@ const $ = ({
           }
         ),
         c && /* @__PURE__ */ n(l, { justifyContent: "center", alignItems: "center", children: c }),
-        /* @__PURE__ */ a(l, { justifyContent: "flex-end", alignItems: "center", flex: d, children: [
+        /* @__PURE__ */ i(l, { justifyContent: "flex-end", alignItems: "center", flex: u, children: [
           r,
           /* @__PURE__ */ n(x, { num: 2 })
         ] })
@@ -183,14 +183,14 @@ const $ = ({
   children: t,
   ...o
 }) => {
-  const [i, , r, c] = P(!1);
+  const [a, , r, c] = P(!1);
   return /* @__PURE__ */ n(
     M,
     {
       onClickOutside: r,
       triggerTarget: document.body,
-      visible: i,
-      content: /* @__PURE__ */ a(b, { children: [
+      visible: a,
+      content: /* @__PURE__ */ i(b, { children: [
         e && e({ close: r }),
         t
       ] }),
@@ -207,25 +207,25 @@ const $ = ({
   count: e,
   unread: t = !1,
   className: o,
-  labelClassName: i,
+  labelClassName: a,
   iconClassName: r,
   icon: c = ln,
-  ...u
+  ...d
 }) => {
-  const d = e > 0;
+  const u = e > 0;
   return /* @__PURE__ */ n(
     C,
     {
-      ...u,
+      ...d,
       leftIcon: c,
       className: h(
         t && I.unread,
-        d && I.hasCount,
+        u && I.hasCount,
         I.navBarNotificationButton,
         o
       ),
-      label: d ? String(e) : void 0,
-      labelClassName: h(i, I.label),
+      label: u ? String(e) : void 0,
+      labelClassName: h(a, I.label),
       iconClassName: h(r, I.icon)
     }
   );
@@ -236,14 +236,14 @@ const $ = ({
   placeholder: e = "Search",
   className: t,
   wrapperClassName: o,
-  ...i
+  ...a
 }) => /* @__PURE__ */ n(
   Mn,
   {
     wrapperClassName: h(T.navBarSearchField, o),
     className: h(T.navBarSearchFieldInput, t),
     placeholder: e,
-    ...i
+    ...a
   }
 ), Vn = "_navBarUserButton_1cwhm_1", Wn = "_initials_1cwhm_31", V = {
   navBarUserButton: Vn,
@@ -252,37 +252,39 @@ const $ = ({
   className: e,
   username: t,
   initials: o,
-  icon: i = dn,
+  icon: a = dn,
   iconClassName: r,
-  ...c
+  responsiveIconOnly: c = o == null,
+  ...d
 }) => /* @__PURE__ */ n(
   Sn,
   {
-    ...c,
+    ...d,
     className: h(
       { [V.initials]: o != null },
       V.navBarUserButton,
       e
     ),
-    leftIcon: t != null ? i : void 0,
+    leftIcon: t != null ? a : void 0,
     label: o != null ? o : t,
+    responsiveIconOnly: c,
     disableArrow: !0
   }
 ), qn = "_unreadDot_l8bni_1", Gn = "_dot_l8bni_4", W = {
   unreadDot: qn,
   dot: Gn
-}, Jn = ({ children: e }) => /* @__PURE__ */ a("div", { className: W.unreadDot, children: [
+}, Jn = ({ children: e }) => /* @__PURE__ */ i("div", { className: W.unreadDot, children: [
   e,
   /* @__PURE__ */ n("div", { className: W.dot })
 ] }), nn = ({
   text: e,
   timestamp: t,
   icon: o,
-  iconAriaLabel: i,
+  iconAriaLabel: a,
   contentLeft: r,
   contentRight: c,
-  onClose: u,
-  unread: d = !1,
+  onClose: d,
+  unread: u = !1,
   variant: p
 }) => {
   const g = o ? /* @__PURE__ */ n(
@@ -290,22 +292,22 @@ const $ = ({
     {
       size: "small",
       icon: o,
-      "aria-label": i,
-      backgroundColor: Kn(d, p)
+      "aria-label": a,
+      backgroundColor: Kn(u, p)
     }
   ) : void 0;
-  return /* @__PURE__ */ a(l, { alignItems: "flex-start", indent: 2, spacing: !0, children: [
-    /* @__PURE__ */ a(l, { spacing: !0, gap: 2, flex: 1, alignItems: "flex-start", children: [
+  return /* @__PURE__ */ i(l, { alignItems: "flex-start", indent: 2, spacing: !0, children: [
+    /* @__PURE__ */ i(l, { spacing: !0, gap: 2, flex: 1, alignItems: "flex-start", children: [
       r && /* @__PURE__ */ n(s, { minHeight: 20, justifyContent: "center", children: r }),
-      !r && g && (d ? /* @__PURE__ */ n(Jn, { children: g }) : g),
-      /* @__PURE__ */ a(s, { minHeight: 20, justifyContent: "center", flex: 1, gap: 0.5, children: [
+      !r && g && (u ? /* @__PURE__ */ n(Jn, { children: g }) : g),
+      /* @__PURE__ */ i(s, { minHeight: 20, justifyContent: "center", flex: 1, gap: 0.5, children: [
         /* @__PURE__ */ n(v, { variant: "bold", children: e }),
         t && /* @__PURE__ */ n(
           v,
           {
             size: "small",
             color: m(
-              d ? "--lhds-color-blue-600" : "--lhds-color-ui-600"
+              u ? "--lhds-color-blue-600" : "--lhds-color-ui-600"
             ),
             children: t
           }
@@ -313,7 +315,7 @@ const $ = ({
       ] }),
       c
     ] }),
-    u && /* @__PURE__ */ n(
+    d && /* @__PURE__ */ n(
       s,
       {
         flex: "none",
@@ -323,7 +325,7 @@ const $ = ({
           C,
           {
             leftIcon: X,
-            onClick: u,
+            onClick: d,
             "aria-label": "Close",
             variant: "danger"
           }
@@ -344,8 +346,8 @@ const $ = ({
   variant: e = "standard",
   children: t,
   unread: o,
-  ...i
-}) => /* @__PURE__ */ a(
+  ...a
+}) => /* @__PURE__ */ i(
   "div",
   {
     className: h(
@@ -354,7 +356,7 @@ const $ = ({
       o && w.unread
     ),
     children: [
-      /* @__PURE__ */ n(nn, { ...i, unread: o, variant: e }),
+      /* @__PURE__ */ n(nn, { ...a, unread: o, variant: e }),
       t && /* @__PURE__ */ n(f, { className: w.body, children: t })
     ]
   }
@@ -362,32 +364,32 @@ const $ = ({
   notificationList: ee
 }, $e = ({
   children: e
-}) => /* @__PURE__ */ a("div", { className: te.notificationList, children: [
+}) => /* @__PURE__ */ i("div", { className: te.notificationList, children: [
   e,
   /* @__PURE__ */ n("div", {})
-] }), oe = "_clickable_1ijxc_1", ie = "_nonClickable_1ijxc_27", F = {
+] }), oe = "_clickable_1ijxc_1", ae = "_nonClickable_1ijxc_27", F = {
   clickable: oe,
-  nonClickable: ie
+  nonClickable: ae
 }, Ae = ({
   onClick: e,
   onClickAriaLabel: t,
   children: o,
-  width: i = 264,
+  width: a = 264,
   maxWidth: r,
   ...c
-}) => /* @__PURE__ */ a(
+}) => /* @__PURE__ */ i(
   s,
   {
     borderRadius: 8,
     background: m("--lhds-color-ui-50"),
     shadow: "popover",
-    width: i,
+    width: a,
     maxWidth: r,
     role: "alert",
     position: "relative",
     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__ */ i(s, { indent: 3, className: h({ [F.nonClickable]: e }), children: [
         o,
         /* @__PURE__ */ n(_, { num: 2 })
       ] }),
@@ -401,7 +403,7 @@ const $ = ({
       )
     ]
   }
-), ae = () => /* @__PURE__ */ a(f, { indent: !0, spacing: !0, flex: 1, alignItems: "center", children: [
+), ie = () => /* @__PURE__ */ i(f, { indent: !0, spacing: !0, flex: 1, alignItems: "center", children: [
   /* @__PURE__ */ n(un, { icon: hn, color: m("--lhds-color-ui-500") }),
   /* @__PURE__ */ n(_, {}),
   /* @__PURE__ */ n(v, { size: "small", color: m("--lhds-color-ui-500"), children: "No content" })
@@ -409,11 +411,11 @@ const $ = ({
   function({
     label: t,
     contentLeft: o,
-    contentRight: i,
+    contentRight: a,
     collapsed: r = !1,
     onClick: c,
-    disabled: u = !1,
-    children: d,
+    disabled: d = !1,
+    children: u,
     autoFocus: p = !1,
     ...g
   }, S) {
@@ -425,13 +427,13 @@ const $ = ({
         ref: S,
         label: t,
         onClick: c,
-        disabled: u,
+        disabled: d,
         expandable: !0,
         expanded: !r,
         selected: !r,
         left: o,
-        right: i,
-        children: d != null ? d : /* @__PURE__ */ n(ae, {})
+        right: a,
+        children: u != null ? u : /* @__PURE__ */ n(ie, {})
       }
     );
   }
@@ -441,7 +443,7 @@ const $ = ({
   value: e,
   onValueChange: t,
   onChange: o,
-  indeterminate: i,
+  indeterminate: a,
   checkboxDisabled: r,
   ...c
 }) => /* @__PURE__ */ n(
@@ -451,11 +453,11 @@ const $ = ({
       Z,
       {
         value: e,
-        indeterminate: i,
+        indeterminate: a,
         onValueChange: t,
         onChange: o,
         disabled: r,
-        onClick: (u) => u.stopPropagation()
+        onClick: (d) => d.stopPropagation()
       }
     ),
     ...c
@@ -473,7 +475,7 @@ const $ = ({
   }
 ), se = ({
   text: e = "Loading..."
-}) => /* @__PURE__ */ a(s, { alignItems: "center", children: [
+}) => /* @__PURE__ */ i(s, { alignItems: "center", children: [
   /* @__PURE__ */ n(gn, { size: "small" }),
   /* @__PURE__ */ n(_, { num: 4 }),
   /* @__PURE__ */ n(z, { variant: "h4", children: e })
@@ -490,10 +492,10 @@ const $ = ({
   renderBreadCrumbs: e,
   renderPageHeading: t,
   renderTabs: o,
-  children: i
-}) => /* @__PURE__ */ a(s, { shadow: "bottom", background: m("--lhds-color-ui-50"), gap: 2, children: [
-  /* @__PURE__ */ a(s, { indent: 3, children: [
-    e && /* @__PURE__ */ a(l, { spacing: 1, alignItems: "center", children: [
+  children: a
+}) => /* @__PURE__ */ i(s, { shadow: "bottom", background: m("--lhds-color-ui-50"), gap: 2, children: [
+  /* @__PURE__ */ i(s, { indent: 3, children: [
+    e && /* @__PURE__ */ i(l, { spacing: 1, alignItems: "center", children: [
       /* @__PURE__ */ n(l, { width: "64px", height: "16px" }),
       e()
     ] }),
@@ -501,25 +503,25 @@ const $ = ({
     o && /* @__PURE__ */ n(_, {}),
     o == null ? void 0 : o()
   ] }),
-  i
+  a
 ] }), Ve = (e) => /* @__PURE__ */ n(l, { indent: 3, spacing: !0, ...e }), We = ({
   icon: e,
   heading: t,
   headingLevel: o = "h2",
-  contentLeft: i,
+  contentLeft: a,
   contentRight: r
-}) => /* @__PURE__ */ a(l, { alignItems: "center", gap: 2, height: "64px", children: [
-  /* @__PURE__ */ a(l, { alignItems: "center", children: [
+}) => /* @__PURE__ */ i(l, { alignItems: "center", gap: 2, height: "64px", children: [
+  /* @__PURE__ */ i(l, { alignItems: "center", children: [
     /* @__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, { alignItems: "center", children: a }),
   /* @__PURE__ */ n(l, { style: { marginLeft: "auto" }, alignItems: "center", children: r })
 ] }), le = "_sidebarMenu_iwe92_1", q = {
   sidebarMenu: le
 }, de = "_stenaFlag_108h7_1", ue = {
   stenaFlag: de
-}, he = ({ onClick: e }) => /* @__PURE__ */ a(
+}, he = ({ onClick: e }) => /* @__PURE__ */ i(
   l,
   {
     justifyContent: "space-between",
@@ -537,18 +539,18 @@ const $ = ({
   onClick: t,
   label: o
 }) => {
-  const i = e ? "Unpin menu" : "Pin menu", r = o != null ? o : i;
+  const a = e ? "Unpin menu" : "Pin menu", r = o != null ? o : a;
   return /* @__PURE__ */ n(L, { onClick: t, label: r, leftIcon: e ? Y : mn });
 }, qe = ({
   className: e,
   children: t,
   onCloseClick: o,
-  variant: i = "standard",
+  variant: a = "standard",
   pinButtonVisible: r,
   onClickPinButton: c,
-  isPinned: u,
-  ...d
-}) => /* @__PURE__ */ a(
+  isPinned: d,
+  ...u
+}) => /* @__PURE__ */ i(
   s,
   {
     indent: 1,
@@ -556,7 +558,7 @@ const $ = ({
     style: {
       ["--swui-sidebar-menu-item-height"]: "40px"
     },
-    ...d,
+    ...u,
     children: [
       /* @__PURE__ */ n(_, { num: 1 }),
       /* @__PURE__ */ n(he, { onClick: o }),
@@ -566,13 +568,13 @@ const $ = ({
           className: q.sidebarMenuContent,
           height: "100%",
           background: "var(--current-background-color)",
-          children: /* @__PURE__ */ a(f, { justifyContent: "space-between", flex: 1, gap: 1, children: [
+          children: /* @__PURE__ */ i(f, { justifyContent: "space-between", flex: 1, gap: 1, children: [
             /* @__PURE__ */ n(f, { gap: 1, children: t }),
-            r && /* @__PURE__ */ a(f, { children: [
+            r && /* @__PURE__ */ i(f, { children: [
               /* @__PURE__ */ n(
                 pe,
                 {
-                  isPinned: u,
+                  isPinned: d,
                   onClick: c
                 }
               ),
@@ -587,8 +589,8 @@ const $ = ({
   closeButtonVisible: e,
   onClickCloseButton: t,
   onClickMenuButton: o,
-  children: i
-}) => /* @__PURE__ */ a(
+  children: a
+}) => /* @__PURE__ */ i(
   s,
   {
     position: "fixed",
@@ -602,8 +604,8 @@ const $ = ({
     background: m("--lhds-color-ui-50"),
     children: [
       /* @__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(A.Provider, { value: !0, children: i }) }),
+      /* @__PURE__ */ i(f, { justifyContent: "space-between", flex: 1, gap: 1, children: [
+        /* @__PURE__ */ n(f, { gap: 1, children: /* @__PURE__ */ n(A.Provider, { value: !0, children: a }) }),
         e && /* @__PURE__ */ n(
           R,
           {
@@ -616,7 +618,7 @@ const $ = ({
   }
 ), ge = ({
   label: e
-}) => H() ? null : /* @__PURE__ */ a(s, { height: "32px", justifyContent: "center", indent: 1, children: [
+}) => H() ? null : /* @__PURE__ */ i(s, { height: "32px", justifyContent: "center", indent: 1, children: [
   /* @__PURE__ */ n(_, {}),
   /* @__PURE__ */ n(v, { variant: "overline", size: "smaller", children: e })
 ] }), fe = ({
@@ -627,7 +629,7 @@ const $ = ({
   children: e,
   label: t,
   icon: o,
-  popupMinWidth: i = "200px"
+  popupMinWidth: a = "200px"
 }) => /* @__PURE__ */ n(
   M,
   {
@@ -641,12 +643,12 @@ const $ = ({
     content: /* @__PURE__ */ n(
       s,
       {
-        minWidth: i,
+        minWidth: a,
         shadow: "popover",
         spacing: 1,
         indent: 1,
         gap: 2,
-        children: /* @__PURE__ */ a(A.Provider, { value: !1, children: [
+        children: /* @__PURE__ */ i(A.Provider, { value: !1, children: [
           /* @__PURE__ */ n(ge, { label: t }),
           e
         ] })
@@ -658,17 +660,17 @@ const $ = ({
   children: e,
   label: t,
   leftIcon: o,
-  className: i,
+  className: a,
   initialExpand: r = !1
 }) => {
-  const [c, u] = In(r);
+  const [c, d] = In(r);
   return H() ? o == null ? null : /* @__PURE__ */ n(me, { label: t, icon: o, children: e }) : /* @__PURE__ */ n(
     L,
     {
       label: t,
-      onClick: () => u(!c),
+      onClick: () => d(!c),
       leftIcon: o,
-      className: i,
+      className: a,
       expandable: !0,
       expanded: c,
       selected: c,
@@ -685,8 +687,8 @@ const $ = ({
   numItemsSelected: e,
   label: t,
   afterLabelContent: o,
-  rightContent: i
-}) => /* @__PURE__ */ a(
+  rightContent: a
+}) => /* @__PURE__ */ i(
   l,
   {
     indent: 3,
@@ -697,22 +699,22 @@ const $ = ({
     borderTop: be,
     background: m("--lhds-color-orange-50"),
     children: [
-      /* @__PURE__ */ a(l, { alignItems: "center", children: [
-        e != null || t != null ? /* @__PURE__ */ n(b, { children: e != null ? /* @__PURE__ */ a(b, { children: [
+      /* @__PURE__ */ i(l, { alignItems: "center", children: [
+        e != null || t != null ? /* @__PURE__ */ n(b, { children: e != null ? /* @__PURE__ */ i(b, { children: [
           /* @__PURE__ */ n(v, { variant: "bold", children: e }),
           /* @__PURE__ */ n(_, {}),
-          /* @__PURE__ */ a(v, { children: [
+          /* @__PURE__ */ i(v, { children: [
             "item",
             e === 1 ? "" : "s",
             " selected"
           ] })
         ] }) : t != null ? /* @__PURE__ */ n(b, { children: typeof t == "string" ? /* @__PURE__ */ n(v, { children: t }) : t }) : null }) : null,
-        o ? /* @__PURE__ */ a(b, { children: [
+        o ? /* @__PURE__ */ i(b, { children: [
           /* @__PURE__ */ n(x, {}),
           /* @__PURE__ */ n(s, { children: o })
         ] }) : null
       ] }),
-      /* @__PURE__ */ n(s, { children: i })
+      /* @__PURE__ */ n(s, { children: a })
     ]
   }
 );
@@ -722,7 +724,7 @@ export {
   we as ActionMenuSecondaryButton,
   Me as CheckboxMenu,
   re as Collapsible,
-  ae as CollapsibleEmptyContent,
+  ie as CollapsibleEmptyContent,
   De as CollapsibleGroupHeading,
   He as CollapsibleList,
   Ee as CollapsibleWithCheckbox,