@stenajs-webui/panels 21.8.3 → 21.8.5

package/dist/index.es.js

@@ -1,54 +1,58 @@
 (function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.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_b3x3w_1:hover{background:var(--lhds-color-ui-100)}._navBarButton_b3x3w_1:focus-visible{background:var(--lhds-color-ui-200)}._navBarButton_b3x3w_1:active{background:var(--lhds-color-ui-200)}._navBarButton_b3x3w_1._selected_b3x3w_14{background:var(--lhds-color-blue-200)}._navBarButton_b3x3w_1._selected_b3x3w_14:hover{background:var(--lhds-color-blue-100)}._navBarButton_b3x3w_1._selected_b3x3w_14:focus-visible{background:var(--lhds-color-blue-300)}._navBarButton_b3x3w_1._selected_b3x3w_14:active{background:var(--lhds-color-blue-200)}._navBarNotificationButton_1wt3y_1{--current-background-color: var(--lhds-color-ui-400);--current-outline-color: var(--modern-blue);background-color:var(--current-background-color);border-color:transparent;color:var(--lhds-color-ui-50);--swui-nav-bar-notification-shake-count: 3;transition:.5s width}._navBarNotificationButton_1wt3y_1:hover{--current-background-color: var(--lhds-color-red-500);--current-outline-color: var(--lhds-color-red-500)}._navBarNotificationButton_1wt3y_1:active{--current-background-color: var(--lhds-color-red-600);--current-outline-color: var(--lhds-color-red-600)}._navBarNotificationButton_1wt3y_1._unread_1wt3y_23 ._icon_1wt3y_23{transform-origin:top center;animation:_shake_1wt3y_1 1.5s ease-in-out var(--swui-nav-bar-notification-shake-count)}._navBarNotificationButton_1wt3y_1._unread_1wt3y_23{--current-background-color: var(--lhds-color-red-500);--current-outline-color: var(--lhds-color-red-500)}._navBarNotificationButton_1wt3y_1._unread_1wt3y_23:hover{--current-background-color: var(--lhds-color-red-600);--current-outline-color: var(--lhds-color-red-600)}._navBarNotificationButton_1wt3y_1._unread_1wt3y_23:active{--current-background-color: var(--lhds-color-red-700);--current-outline-color: var(--lhds-color-red-700)}._navBarNotificationButton_1wt3y_1:focus-visible{outline:var(--swui-focus-outline);outline-color:var(--current-outline-color);outline-offset:var(--swui-focus-outline-width)}@keyframes _shake_1wt3y_1{0%{transform:rotate(0)}7%{transform:rotate(20deg)}15%{transform:rotate(-20deg)}22%{transform:rotate(16deg)}30%{transform:rotate(-16deg)}38%{transform:rotate(6deg)}42%{transform:rotate(-6deg)}46%{transform:rotate(2deg)}to{transform:rotate(0)}}._navBarSearchFieldInput_1rp8g_1._navBarSearchFieldInput_1rp8g_1{line-height:2.7rem;color:var(--lhds-color-ui-800)}._navBarSearchFieldInput_1rp8g_1._navBarSearchFieldInput_1rp8g_1::placeholder{color:var(--lhds-color-blue-600)}._navBarSearchFieldInput_1rp8g_1._navBarSearchFieldInput_1rp8g_1{padding:0 var(--swui-metrics-indent)}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12{background:var(--lhds-color-ui-200);border-color:transparent}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12:hover{border-color:transparent}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12{padding:0 var(--swui-metrics-indent);border-radius:var(--swui-max-border-radius)}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12._withButton_1rp8g_24{padding-right:1px}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12:focus-within{color:var(--lhds-color-ui-800);background:var(--lhds-color-ui-50)}._navBarSearchFieldWrapper_1rp8g_12._navBarSearchFieldWrapper_1rp8g_12 ._clearButton_1rp8g_33{border-radius:var(--swui-max-border-radius)}._navBarUserButton_10f9z_1:hover{background:var(--lhds-color-ui-100)}._navBarUserButton_10f9z_1:focus-visible{background:var(--lhds-color-ui-200)}._navBarUserButton_10f9z_1:active{background:var(--lhds-color-ui-200)}._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_1bx5w_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-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 )}._sidebarMenu_1bx5w_1 ._sidebarItems_1bx5w_38{--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)}._sidebarMenu_1bx5w_1{background-color:var(--current-background-color);height:100dvh}._sidebarMenu_1bx5w_1 ._scrollContainer_1bx5w_48{background:var(--current-background-color);height:100%;overflow:auto}._stenaFlag_108h7_1{height:32px}")),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
 import { jsx as n, Fragment as B, jsxs as o } from "react/jsx-runtime";
-import { ActionMenu as U, ActionMenuContext as rn, stenaAngleDown as D, PrimaryButton as on, SecondaryButton as an, FlatButton as k, stenaHamburger as W, BaseButton as ln, stenaBellFilled as cn, TextInputButton as sn, stenaTimes as dn, stenaUserCircle as un, CircledIcon as j, CloseButton as E, Icon as hn, stenaMail as pn, MenuButton as L, Card as gn, CardBody as mn, stenaTripFerryXl as fn, Spinner as bn, StenaFlag as vn, stenaAngleLeftDouble as q, stenaPin as _n, IconMenuButton as P, IconMenuButtonLink as Bn, MenuButtonLink as Cn } from "@stenajs-webui/elements";
-import * as xn from "react";
-import { useRef as In, useMemo as yn, forwardRef as O, createContext as wn, useContext as Nn, useState as kn } from "react";
-import { useBoolean as G, Row as s, Indent as x, Column as h, Heading as S, Box as u, Text as f, Space as g, SeparatorLine as Sn } from "@stenajs-webui/core";
-import { ControlledPopover as X, Popover as J, Tooltip as K } from "@stenajs-webui/tooltip";
-import { Checkbox as Q, TextInput as Mn } from "@stenajs-webui/forms";
-import p from "classnames";
+import { ActionMenu as W, ActionMenuContext as an, stenaAngleDown as E, PrimaryButton as ln, SecondaryButton as cn, FlatButton as k, stenaHamburger as q, BaseButton as sn, stenaBellFilled as dn, TextInputButton as un, stenaTimes as hn, stenaUserCircle as pn, CircledIcon as j, CloseButton as O, Icon as gn, stenaMail as mn, MenuButton as L, Card as fn, CardBody as bn, stenaTripFerryXl as vn, Spinner as _n, StenaFlag as Bn, stenaAngleLeftDouble as G, stenaPin as Cn, IconMenuButton as P, IconMenuButtonLink as xn, MenuButtonLink as In } from "@stenajs-webui/elements";
+import * as yn from "react";
+import { useRef as wn, useMemo as Nn, forwardRef as A, createContext as kn, useContext as Sn, useState as Mn } from "react";
+import { useBoolean as X, Row as s, Indent as x, Column as h, Heading as S, Box as u, Text as f, Space as m, SeparatorLine as Rn } from "@stenajs-webui/core";
+import { ControlledPopover as J, Popover as K, Tooltip as Q } from "@stenajs-webui/tooltip";
+import { Checkbox as V, TextInput as Fn } from "@stenajs-webui/forms";
+import g from "classnames";
 import { cssColor as b } from "@stenajs-webui/theme";
-const A = ({
+const $ = ({
   renderItems: e,
   placement: t = "bottom",
   buttonComponent: r,
-  rightIcon: i = D,
+  rightIcon: i = E,
   menuWidth: a,
   menuTop: l,
   onClick: c,
   disableArrow: d = !1,
-  buttonRef: m,
-  ...v
+  buttonRef: p,
+  appendTo: v,
+  zIndex: _,
+  ...Z
 }) => {
-  const [_, z, I, Y] = G(!1), Z = In(null), nn = m ?? Z, en = yn(() => ({ open: z, close: I }), [z, I]), tn = (M) => {
-    c == null || c(M), Y();
+  const [H, T, I, nn] = X(!1), en = wn(null), tn = p ?? en, rn = Nn(() => ({ open: T, close: I }), [T, I]), on = (M) => {
+    c == null || c(M), nn();
   };
   return /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(
-    X,
+    J,
     {
       renderTrigger: (M) => /* @__PURE__ */ n(
         r,
         {
           rightIcon: d ? void 0 : i,
-          ...v,
-          ref: nn,
-          onClick: tn,
+          ...Z,
+          ref: tn,
+          onClick: on,
           ...M
         }
       ),
       hideArrow: !0,
       disablePadding: !0,
-      open: _,
+      open: H,
       onRequestClose: I,
       placement: t,
-      children: _ && /* @__PURE__ */ n(U, { width: a, top: l, trapFocus: !0, children: /* @__PURE__ */ n(rn.Provider, { value: en, children: e(I) }) })
+      appendTo: v,
+      zIndex: _,
+      children: H && /* @__PURE__ */ n(W, { width: a, top: l, trapFocus: !0, children: /* @__PURE__ */ n(an.Provider, { value: rn, children: e(I) }) })
     }
   ) });
-}, Re = (e) => /* @__PURE__ */ n(A, { buttonComponent: on, ...e }), Fe = (e) => /* @__PURE__ */ n(A, { buttonComponent: an, ...e }), Rn = (e) => /* @__PURE__ */ n(A, { buttonComponent: k, ...e }), Fn = "1px solid var(--lhds-color-ui-300)", je = ({
+}, je = (e) => /* @__PURE__ */ n($, { buttonComponent: ln, ...e }), Le = (e) => /* @__PURE__ */ n($, { buttonComponent: cn, ...e }), jn = (e) => /* @__PURE__ */ n($, { buttonComponent: k, ...e }), Ln = "1px solid var(--lhds-color-ui-300)", Pe = ({
   renderMenu: e,
   ...t
 }) => /* @__PURE__ */ n(
-  J,
+  K,
   {
     trigger: "click",
     renderTrigger: (r) => /* @__PURE__ */ n(s, { children: /* @__PURE__ */ o(
@@ -57,33 +61,33 @@ const A = ({
         spacing: 0.5,
         indent: !0,
         alignItems: "center",
-        border: Fn,
+        border: Ln,
         borderRadius: "4px",
         children: [
-          /* @__PURE__ */ n(Q, { ...t }),
+          /* @__PURE__ */ n(V, { ...t }),
           /* @__PURE__ */ n(x, { num: 0.5 }),
-          /* @__PURE__ */ n(k, { size: "small", leftIcon: D, ...r })
+          /* @__PURE__ */ n(k, { size: "small", leftIcon: E, ...r })
         ]
       }
     ) }),
     hideArrow: !0,
     disablePadding: !0,
     placement: "bottom-start",
-    children: ({ onRequestClose: r }) => /* @__PURE__ */ n(h, { children: /* @__PURE__ */ n(U, { children: e(r) }) })
+    children: ({ onRequestClose: r }) => /* @__PURE__ */ n(h, { children: /* @__PURE__ */ n(W, { children: e(r) }) })
   }
-), jn = "_navBar_kzibd_1", Ln = {
-  navBar: jn
-}, Pn = ({
+), Pn = "_navBar_kzibd_1", An = {
+  navBar: Pn
+}, $n = ({
   className: e,
   onClick: t
 }) => /* @__PURE__ */ n(
   k,
   {
-    leftIcon: W,
+    leftIcon: q,
     className: e,
     onClick: t
   }
-), Le = ({
+), Ae = ({
   left: e,
   className: t,
   showMenuButton: r = !1,
@@ -97,7 +101,7 @@ const A = ({
     s,
     {
       justifyContent: "space-between",
-      className: p(Ln.navBar, t),
+      className: g(An.navBar, t),
       children: [
         /* @__PURE__ */ o(
           s,
@@ -108,15 +112,15 @@ const A = ({
             children: [
               /* @__PURE__ */ o(s, { width: "86px", alignItems: "center", children: [
                 /* @__PURE__ */ n(x, {}),
-                r && /* @__PURE__ */ n(Pn, { onClick: c })
+                r && /* @__PURE__ */ n($n, { onClick: c })
               ] }),
               e && /* @__PURE__ */ o(B, { children: [
                 e,
                 /* @__PURE__ */ n(x, { num: 2 })
               ] }),
-              i && /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(s, { justifyContent: "center", alignItems: "center", children: xn.Children.map(i, (m, v) => /* @__PURE__ */ o(B, { children: [
+              i && /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(s, { justifyContent: "center", alignItems: "center", children: yn.Children.map(i, (p, v) => /* @__PURE__ */ o(B, { children: [
                 v > 0 && /* @__PURE__ */ n(x, {}),
-                m
+                p
               ] })) }) })
             ]
           }
@@ -129,36 +133,36 @@ const A = ({
       ]
     }
   );
-}, An = "_navBarButton_b3x3w_1", $n = "_selected_b3x3w_14", H = {
-  navBarButton: An,
-  selected: $n
-}, zn = O(
+}, zn = "_navBarButton_b3x3w_1", Hn = "_selected_b3x3w_14", U = {
+  navBarButton: zn,
+  selected: Hn
+}, Tn = A(
   function({ selected: e, className: t, ...r }, i) {
     return /* @__PURE__ */ n(
       k,
       {
         ...r,
         ref: i,
-        className: p(
-          H.navBarButton,
-          e && H.selected,
+        className: g(
+          U.navBarButton,
+          e && U.selected,
           t
         )
       }
     );
   }
-), Pe = (e) => /* @__PURE__ */ n(S, { whiteSpace: "nowrap", variant: "h4", as: "h1", ...e }), Ae = ({
+), $e = (e) => /* @__PURE__ */ n(S, { whiteSpace: "nowrap", variant: "h4", as: "h1", ...e }), ze = ({
   content: e,
   children: t,
   appendTo: r,
   zIndex: i,
   ...a
 }) => {
-  const [l, , c, d] = G(!1);
+  const [l, , c, d] = X(!1);
   return /* @__PURE__ */ n(
-    X,
+    J,
     {
-      renderTrigger: (m) => /* @__PURE__ */ n(zn, { ...a, ...m, onClick: d }),
+      renderTrigger: (p) => /* @__PURE__ */ n(Tn, { ...a, ...p, onClick: d }),
       open: l,
       onRequestClose: c,
       zIndex: i,
@@ -169,43 +173,44 @@ const A = ({
       ] })
     }
   );
-}, Hn = "_navBarNotificationButton_1wt3y_1", Tn = "_unread_1wt3y_23", Un = "_icon_1wt3y_23", Dn = "_shake_1wt3y_1", C = {
-  navBarNotificationButton: Hn,
-  unread: Tn,
-  icon: Un,
-  shake: Dn
-}, $e = ({
+}, Un = "_navBarNotificationButton_1wt3y_1", Dn = "_unread_1wt3y_23", Wn = "_icon_1wt3y_23", En = "_shake_1wt3y_1", C = {
+  navBarNotificationButton: Un,
+  unread: Dn,
+  icon: Wn,
+  shake: En
+}, He = A(function({
   count: e,
   unread: t = !1,
   className: r,
   labelClassName: i,
   iconClassName: a,
-  icon: l = cn,
+  icon: l = dn,
   ...c
-}) => {
-  const d = e > 1;
+}, d) {
+  const p = e > 1;
   return /* @__PURE__ */ n(
-    ln,
+    sn,
     {
       ...c,
+      ref: d,
       leftIcon: l,
-      className: p(
+      className: g(
         C.navBarNotificationButton,
         t && C.unread,
-        d && C.hasCount,
+        p && C.hasCount,
         r
       ),
-      label: d ? String(e) : void 0,
-      labelClassName: p(i, C.label),
-      iconClassName: p(a, C.icon)
+      label: p ? String(e) : void 0,
+      labelClassName: g(i, C.label),
+      iconClassName: g(a, C.icon)
     }
   );
-}, Wn = "_navBarSearchFieldInput_1rp8g_1", En = "_navBarSearchFieldWrapper_1rp8g_12", qn = "_withButton_1rp8g_24", On = "_clearButton_1rp8g_33", y = {
-  navBarSearchFieldInput: Wn,
-  navBarSearchFieldWrapper: En,
-  withButton: qn,
-  clearButton: On
-}, ze = ({
+}), qn = "_navBarSearchFieldInput_1rp8g_1", On = "_navBarSearchFieldWrapper_1rp8g_12", Gn = "_withButton_1rp8g_24", Xn = "_clearButton_1rp8g_33", y = {
+  navBarSearchFieldInput: qn,
+  navBarSearchFieldWrapper: On,
+  withButton: Gn,
+  clearButton: Xn
+}, Te = ({
   placeholder: e = "Search",
   className: t,
   wrapperClassName: r,
@@ -214,54 +219,54 @@ const A = ({
   value: l,
   ...c
 }) => /* @__PURE__ */ n(
-  Mn,
+  Fn,
   {
-    wrapperClassName: p(
+    wrapperClassName: g(
       y.navBarSearchFieldWrapper,
       i ? y.withButton : void 0,
       r
     ),
-    className: p(y.navBarSearchFieldInput, t),
+    className: g(y.navBarSearchFieldInput, t),
     placeholder: e,
     value: l,
     buttonRight: l && i ? /* @__PURE__ */ n(
-      sn,
+      un,
       {
         className: y.clearButton,
-        icon: dn,
+        icon: hn,
         variant: "error",
         onClick: a
       }
     ) : void 0,
     ...c
   }
-), Gn = "_navBarUserButton_10f9z_1", Xn = {
-  navBarUserButton: Gn
-}, He = ({
+), Jn = "_navBarUserButton_10f9z_1", Kn = {
+  navBarUserButton: Jn
+}, Ue = ({
   className: e,
   username: t,
   initials: r,
-  icon: i = un,
+  icon: i = pn,
   responsiveIconOnly: a = r == null,
   ...l
 }) => /* @__PURE__ */ n(
-  Rn,
+  jn,
   {
     ...l,
-    className: p(Xn.navBarUserButton, e),
+    className: g(Kn.navBarUserButton, e),
     leftIcon: t != null ? i : void 0,
     label: r ?? t,
     forceRound: r != null,
     responsiveIconOnly: a,
     disableArrow: !0
   }
-), Jn = "_unreadDot_l8bni_1", Kn = "_dot_l8bni_4", T = {
-  unreadDot: Jn,
-  dot: Kn
-}, Qn = ({ children: e }) => /* @__PURE__ */ o("div", { className: T.unreadDot, children: [
+), Qn = "_unreadDot_l8bni_1", Vn = "_dot_l8bni_4", D = {
+  unreadDot: Qn,
+  dot: Vn
+}, Yn = ({ children: e }) => /* @__PURE__ */ o("div", { className: D.unreadDot, children: [
   e,
-  /* @__PURE__ */ n("div", { className: T.dot })
-] }), V = ({
+  /* @__PURE__ */ n("div", { className: D.dot })
+] }), Y = ({
   text: e,
   timestamp: t,
   icon: r,
@@ -270,7 +275,7 @@ const A = ({
   contentRight: l,
   onClose: c,
   unread: d = !1,
-  variant: m,
+  variant: p,
   iconBackgroundColor: v
 }) => {
   const _ = r ? /* @__PURE__ */ n(
@@ -279,13 +284,13 @@ const A = ({
       size: "small",
       icon: r,
       "aria-label": i,
-      backgroundColor: v || Vn(d, m)
+      backgroundColor: v || Zn(d, p)
     }
   ) : void 0;
   return /* @__PURE__ */ o(s, { alignItems: "flex-start", indent: 2, spacing: !0, children: [
     /* @__PURE__ */ o(s, { spacing: !0, gap: 2, flex: 1, alignItems: "flex-start", children: [
       a && /* @__PURE__ */ n(u, { minHeight: 20, justifyContent: "center", children: a }),
-      !a && _ && (d ? /* @__PURE__ */ n(Qn, { children: _ }) : _),
+      !a && _ && (d ? /* @__PURE__ */ n(Yn, { children: _ }) : _),
       /* @__PURE__ */ o(u, { minHeight: 20, justifyContent: "center", flex: 1, gap: 0.5, children: [
         /* @__PURE__ */ n(f, { variant: "bold", children: e }),
         t && /* @__PURE__ */ n(
@@ -307,20 +312,20 @@ const A = ({
         flex: "none",
         justifyContent: "center",
         height: "calc(20px + 2 * var(--swui-metrics-spacing))",
-        children: /* @__PURE__ */ n(E, { onClick: c })
+        children: /* @__PURE__ */ n(O, { onClick: c })
       }
     )
   ] });
-}, Vn = (e, t) => {
+}, Zn = (e, t) => {
   if (!(!e && t === "standard"))
     return "--lhds-color-ui-50";
-}, Yn = "_notification_1hao0_1", Zn = "_body_1hao0_7", ne = "_standard_1hao0_13", ee = "_unread_1hao0_14", te = "_danger_1hao0_19", w = {
-  notification: Yn,
-  body: Zn,
-  standard: ne,
-  unread: ee,
-  danger: te
-}, Te = ({
+}, ne = "_notification_1hao0_1", ee = "_body_1hao0_7", te = "_standard_1hao0_13", re = "_unread_1hao0_14", ie = "_danger_1hao0_19", w = {
+  notification: ne,
+  body: ee,
+  standard: te,
+  unread: re,
+  danger: ie
+}, De = ({
   variant: e = "standard",
   children: t,
   unread: r,
@@ -328,27 +333,27 @@ const A = ({
 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: p(
+    className: g(
       w.notification,
       w[e],
       r && w.unread
     ),
     children: [
-      /* @__PURE__ */ n(V, { ...i, unread: r, variant: e }),
+      /* @__PURE__ */ n(Y, { ...i, unread: r, variant: e }),
       t && /* @__PURE__ */ n(h, { className: w.body, children: t })
     ]
   }
-), re = "_notificationList_1rkvu_1", ie = {
-  notificationList: re
-}, Ue = ({
+), oe = "_notificationList_1rkvu_1", ae = {
+  notificationList: oe
+}, We = ({
   children: e
-}) => /* @__PURE__ */ o("div", { className: ie.notificationList, children: [
+}) => /* @__PURE__ */ o("div", { className: ae.notificationList, children: [
   e,
   /* @__PURE__ */ n("div", {})
-] }), oe = "_clickable_1ijxc_1", ae = "_nonClickable_1ijxc_27", R = {
-  clickable: oe,
-  nonClickable: ae
-}, De = ({
+] }), le = "_clickable_1ijxc_1", ce = "_nonClickable_1ijxc_27", R = {
+  clickable: le,
+  nonClickable: ce
+}, Ee = ({
   onClick: e,
   onClickAriaLabel: t,
   children: r,
@@ -366,10 +371,10 @@ const A = ({
     role: "alert",
     position: "relative",
     children: [
-      /* @__PURE__ */ n(u, { className: p({ [R.nonClickable]: e }), children: /* @__PURE__ */ n(V, { ...l }) }),
-      r && /* @__PURE__ */ o(u, { indent: 3, className: p({ [R.nonClickable]: e }), children: [
+      /* @__PURE__ */ n(u, { className: g({ [R.nonClickable]: e }), children: /* @__PURE__ */ n(Y, { ...l }) }),
+      r && /* @__PURE__ */ o(u, { indent: 3, className: g({ [R.nonClickable]: e }), children: [
         r,
-        /* @__PURE__ */ n(g, { num: 2 })
+        /* @__PURE__ */ n(m, { num: 2 })
       ] }),
       e && /* @__PURE__ */ n(
         "button",
@@ -381,11 +386,11 @@ const A = ({
       )
     ]
   }
-), le = () => /* @__PURE__ */ o(h, { indent: !0, spacing: !0, flex: 1, alignItems: "center", children: [
-  /* @__PURE__ */ n(hn, { icon: pn, color: b("--lhds-color-ui-500") }),
-  /* @__PURE__ */ n(g, {}),
+), se = () => /* @__PURE__ */ o(h, { indent: !0, spacing: !0, flex: 1, alignItems: "center", children: [
+  /* @__PURE__ */ n(gn, { icon: mn, color: b("--lhds-color-ui-500") }),
+  /* @__PURE__ */ n(m, {}),
   /* @__PURE__ */ n(f, { size: "small", color: b("--lhds-color-ui-500"), children: "No content" })
-] }), ce = O(
+] }), de = A(
   function({
     label: t,
     contentLeft: r,
@@ -394,14 +399,14 @@ const A = ({
     onClick: l,
     disabled: c = !1,
     children: d,
-    autoFocus: m = !1,
+    autoFocus: p = !1,
     ...v
   }, _) {
     return /* @__PURE__ */ n(
       L,
       {
         ...v,
-        autoFocus: m,
+        autoFocus: p,
         ref: _,
         label: t,
         onClick: l,
@@ -411,13 +416,13 @@ const A = ({
         selected: !a,
         left: r,
         right: i,
-        children: d ?? /* @__PURE__ */ n(le, {})
+        children: d ?? /* @__PURE__ */ n(se, {})
       }
     );
   }
-), We = ({
+), qe = ({
   children: e
-}) => /* @__PURE__ */ n(h, { gap: 1, children: e }), Ee = ({
+}) => /* @__PURE__ */ n(h, { gap: 1, children: e }), Oe = ({
   value: e,
   onValueChange: t,
   onChange: r,
@@ -425,10 +430,10 @@ const A = ({
   checkboxDisabled: a,
   ...l
 }) => /* @__PURE__ */ n(
-  ce,
+  de,
   {
     contentLeft: /* @__PURE__ */ n(
-      Q,
+      V,
       {
         value: e,
         indeterminate: i,
@@ -440,54 +445,54 @@ const A = ({
     ),
     ...l
   }
-), qe = ({ children: e }) => /* @__PURE__ */ n(u, { spacing: !0, indent: !0, children: /* @__PURE__ */ n(f, { variant: "overline", size: "smaller", children: e }) }), se = ({
+), Ge = ({ children: e }) => /* @__PURE__ */ n(u, { spacing: !0, indent: !0, children: /* @__PURE__ */ n(f, { variant: "overline", size: "smaller", children: e }) }), ue = ({
   text: e,
   heading: t,
   children: r,
   buttons: i,
-  icon: a = fn,
+  icon: a = vn,
   headingLevel: l = "h3",
   ...c
 }) => {
   const d = !e && !t ? "Something unexpected happened." : e;
-  return /* @__PURE__ */ n(gn, { ...c, children: /* @__PURE__ */ n(mn, { children: /* @__PURE__ */ o(h, { spacing: 1, gap: 3, alignItems: "center", children: [
+  return /* @__PURE__ */ n(fn, { ...c, children: /* @__PURE__ */ n(bn, { children: /* @__PURE__ */ o(h, { spacing: 1, gap: 3, alignItems: "center", children: [
     /* @__PURE__ */ o(h, { alignItems: "center", children: [
-      /* @__PURE__ */ n(g, { num: 1 }),
+      /* @__PURE__ */ n(m, { num: 1 }),
       /* @__PURE__ */ n(j, { icon: a, size: "xl" })
     ] }),
     t && /* @__PURE__ */ n(S, { as: l, children: t }),
     d && /* @__PURE__ */ n(f, { children: d }),
     r,
     i && /* @__PURE__ */ o(u, { children: [
-      /* @__PURE__ */ n(g, { num: 2 }),
+      /* @__PURE__ */ n(m, { num: 2 }),
       i
     ] })
   ] }) }) });
-}, Oe = (e) => /* @__PURE__ */ n(
+}, Xe = (e) => /* @__PURE__ */ n(
   u,
   {
     width: "100%",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
-    children: /* @__PURE__ */ n(se, { ...e })
+    children: /* @__PURE__ */ n(ue, { ...e })
   }
-), de = ({
+), he = ({
   text: e = "Loading..."
 }) => /* @__PURE__ */ o(u, { alignItems: "center", children: [
-  /* @__PURE__ */ n(bn, { size: "small" }),
-  /* @__PURE__ */ n(g, { num: 4 }),
+  /* @__PURE__ */ n(_n, { size: "small" }),
+  /* @__PURE__ */ n(m, { num: 4 }),
   /* @__PURE__ */ n(S, { variant: "h4", children: e })
-] }), Ge = (e) => /* @__PURE__ */ n(
+] }), Je = (e) => /* @__PURE__ */ n(
   u,
   {
     width: "100%",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
-    children: /* @__PURE__ */ n(de, { ...e })
+    children: /* @__PURE__ */ n(he, { ...e })
   }
-), Xe = ({
+), Ke = ({
   renderBreadCrumbs: e,
   renderPageHeading: t,
   renderTabs: r,
@@ -499,11 +504,11 @@ const A = ({
       e()
     ] }),
     t == null ? void 0 : t(),
-    r && /* @__PURE__ */ n(g, {}),
+    r && /* @__PURE__ */ n(m, {}),
     r == null ? void 0 : r()
   ] }),
   i
-] }), Je = (e) => /* @__PURE__ */ n(s, { indent: 3, spacing: !0, ...e }), Ke = ({
+] }), Qe = (e) => /* @__PURE__ */ n(s, { indent: 3, spacing: !0, ...e }), Ve = ({
   icon: e,
   heading: t,
   headingLevel: r = "h2",
@@ -516,14 +521,14 @@ const A = ({
   ] }),
   /* @__PURE__ */ n(s, { alignItems: "center", children: i }),
   /* @__PURE__ */ n(s, { style: { marginLeft: "auto" }, alignItems: "center", children: a })
-] }), ue = "_sidebarMenu_1bx5w_1", he = "_sidebarItems_1bx5w_38", pe = "_scrollContainer_1bx5w_48", F = {
-  sidebarMenu: ue,
-  sidebarItems: he,
-  scrollContainer: pe
-}, ge = "_stenaFlag_108h7_1", me = {
-  stenaFlag: ge
-}, fe = ({ onClick: e }) => /* @__PURE__ */ o(h, { background: b("--lhds-color-ui-50"), children: [
-  /* @__PURE__ */ n(g, {}),
+] }), pe = "_sidebarMenu_1bx5w_1", ge = "_sidebarItems_1bx5w_38", me = "_scrollContainer_1bx5w_48", F = {
+  sidebarMenu: pe,
+  sidebarItems: ge,
+  scrollContainer: me
+}, fe = "_stenaFlag_108h7_1", be = {
+  stenaFlag: fe
+}, ve = ({ onClick: e }) => /* @__PURE__ */ o(h, { background: b("--lhds-color-ui-50"), children: [
+  /* @__PURE__ */ n(m, {}),
   /* @__PURE__ */ o(
     s,
     {
@@ -533,16 +538,16 @@ const A = ({
       indent: 1,
       minHeight: "48px",
       children: [
-        /* @__PURE__ */ n(E, { onClick: e }),
-        /* @__PURE__ */ n(vn, { className: me.stenaFlag })
+        /* @__PURE__ */ n(O, { onClick: e }),
+        /* @__PURE__ */ n(Bn, { className: be.stenaFlag })
       ]
     }
   )
-] }), be = ({
+] }), _e = ({
   isPinned: e,
   onClick: t,
   label: r
-}) => /* @__PURE__ */ n(L, { onClick: t, label: r ?? (e ? "Unpin menu" : "Pin menu"), leftIcon: e ? q : _n }), Qe = ({
+}) => /* @__PURE__ */ n(L, { onClick: t, label: r ?? (e ? "Unpin menu" : "Pin menu"), leftIcon: e ? G : Cn }), Ye = ({
   className: e,
   children: t,
   onCloseClick: r,
@@ -551,8 +556,8 @@ const A = ({
   bottomItems: l,
   isPinned: c,
   ...d
-}) => /* @__PURE__ */ o(u, { ...d, className: p(F.sidebarMenu, e), children: [
-  /* @__PURE__ */ n(fe, { onClick: r }),
+}) => /* @__PURE__ */ o(u, { ...d, className: g(F.sidebarMenu, e), children: [
+  /* @__PURE__ */ n(ve, { onClick: r }),
   /* @__PURE__ */ n(u, { className: F.scrollContainer, children: /* @__PURE__ */ o(
     h,
     {
@@ -566,24 +571,24 @@ const A = ({
         (l || i) && /* @__PURE__ */ o(h, { gap: 1, children: [
           l,
           i && /* @__PURE__ */ n(
-            be,
+            _e,
             {
               isPinned: c,
               onClick: a
             }
           ),
-          /* @__PURE__ */ n(g, {})
+          /* @__PURE__ */ n(m, {})
         ] })
       ]
     }
   ) })
-] }), N = wn(!1), $ = () => Nn(N), ve = ({
+] }), N = kn(!1), z = () => Sn(N), Be = ({
   label: e,
   ...t
-}) => /* @__PURE__ */ n(K, { label: e + `    <Tooltip label={label2} placement={"right"} visible>
+}) => /* @__PURE__ */ n(Q, { label: e + `    <Tooltip label={label2} placement={"right"} visible>
       <IconMenuButton {...menuButtonLinkProps} />
     </Tooltip>
-`, placement: "right", visible: !0, children: /* @__PURE__ */ n(P, { ...t }) }), Ve = ({
+`, placement: "right", visible: !0, children: /* @__PURE__ */ n(P, { ...t }) }), Ze = ({
   closeButtonVisible: e,
   onClickCloseButton: t,
   onClickMenuButton: r,
@@ -603,15 +608,15 @@ const A = ({
     shadow: "popover",
     background: b("--lhds-color-ui-50"),
     children: [
-      /* @__PURE__ */ n(P, { onClick: r, icon: W }),
+      /* @__PURE__ */ n(P, { onClick: r, icon: q }),
       /* @__PURE__ */ o(h, { justifyContent: "space-between", flex: 1, gap: 1, children: [
         /* @__PURE__ */ n(h, { gap: 1, children: /* @__PURE__ */ n(N.Provider, { value: !0, children: i }) }),
         /* @__PURE__ */ n(h, { gap: 1, children: (a || e) && /* @__PURE__ */ o(N.Provider, { value: !0, children: [
           a,
           e && /* @__PURE__ */ n(
-            ve,
+            Be,
             {
-              icon: q,
+              icon: G,
               label: l,
               onClick: t
             }
@@ -620,22 +625,22 @@ const A = ({
       ] })
     ]
   }
-), _e = ({
+), Ce = ({
   label: e
-}) => $() ? null : /* @__PURE__ */ o(u, { height: "32px", justifyContent: "center", indent: 1, children: [
-  /* @__PURE__ */ n(g, {}),
+}) => z() ? null : /* @__PURE__ */ o(u, { height: "32px", justifyContent: "center", indent: 1, children: [
+  /* @__PURE__ */ n(m, {}),
   /* @__PURE__ */ n(f, { variant: "overline", size: "smaller", children: e })
-] }), Be = ({
+] }), xe = ({
   label: e,
   leftIcon: t,
   ...r
-}) => t == null ? null : /* @__PURE__ */ n(K, { label: e, placement: "right", children: /* @__PURE__ */ n(Bn, { icon: t, ...r }) }), Ye = (e) => $() ? /* @__PURE__ */ n(Be, { ...e }) : /* @__PURE__ */ n(Cn, { ...e }), Ce = ({
+}) => t == null ? null : /* @__PURE__ */ n(Q, { label: e, placement: "right", children: /* @__PURE__ */ n(xn, { icon: t, ...r }) }), nt = (e) => z() ? /* @__PURE__ */ n(xe, { ...e }) : /* @__PURE__ */ n(In, { ...e }), Ie = ({
   children: e,
   label: t,
   icon: r,
   popupMinWidth: i = "200px"
 }) => /* @__PURE__ */ n(
-  J,
+  K,
   {
     renderTrigger: (a) => /* @__PURE__ */ n(P, { icon: r, ...a }),
     placement: "right-start",
@@ -650,21 +655,21 @@ const A = ({
         indent: 1,
         gap: 2,
         children: /* @__PURE__ */ o(N.Provider, { value: !1, children: [
-          /* @__PURE__ */ n(_e, { label: t }),
+          /* @__PURE__ */ n(Ce, { label: t }),
           e
         ] })
       }
     )
   }
-), Ze = ({
+), et = ({
   children: e,
   label: t,
   leftIcon: r,
   className: i,
   initialExpand: a = !1
 }) => {
-  const [l, c] = kn(a);
-  return $() ? r == null ? null : /* @__PURE__ */ n(Ce, { label: t, icon: r, children: e }) : /* @__PURE__ */ n(
+  const [l, c] = Mn(a);
+  return z() ? r == null ? null : /* @__PURE__ */ n(Ie, { label: t, icon: r, children: e }) : /* @__PURE__ */ n(
     L,
     {
       label: t,
@@ -677,13 +682,13 @@ const A = ({
       children: e
     }
   );
-}, nt = (e) => /* @__PURE__ */ n(
-  Sn,
+}, tt = (e) => /* @__PURE__ */ n(
+  Rn,
   {
     color: b("--lhds-color-ui-400"),
     ...e
   }
-), et = ({ numItemsSelected: e, label: t, afterLabelContent: r, rightContent: i }) => /* @__PURE__ */ o(
+), rt = ({ numItemsSelected: e, label: t, afterLabelContent: r, rightContent: i }) => /* @__PURE__ */ o(
   s,
   {
     indent: 3,
@@ -699,7 +704,7 @@ const A = ({
       /* @__PURE__ */ o(s, { alignItems: "center", gap: 2, children: [
         e != null || t != null ? /* @__PURE__ */ n(s, { alignItems: "center", children: e != null ? /* @__PURE__ */ o(B, { children: [
           /* @__PURE__ */ n(f, { children: e }),
-          /* @__PURE__ */ n(g, {}),
+          /* @__PURE__ */ n(m, {}),
           /* @__PURE__ */ o(f, { children: [
             "item",
             e === 1 ? "" : "s",
@@ -711,44 +716,44 @@ const A = ({
       /* @__PURE__ */ n(s, { gap: 2, children: i })
     ]
   }
-), tt = ({ children: e }) => /* @__PURE__ */ n(s, { spacing: 0.5, indent: 0.5, flex: 1, children: e });
+), it = ({ children: e }) => /* @__PURE__ */ n(s, { spacing: 0.5, indent: 0.5, flex: 1, children: e });
 export {
-  Rn as ActionMenuFlatButton,
-  Re as ActionMenuPrimaryButton,
-  Fe as ActionMenuSecondaryButton,
-  je as CheckboxMenu,
-  ce as Collapsible,
-  le as CollapsibleEmptyContent,
-  qe as CollapsibleGroupHeading,
-  We as CollapsibleList,
-  Ee as CollapsibleWithCheckbox,
-  se as ErrorPanel,
-  Oe as ErrorScreen,
-  de as LoadingPanel,
-  Ge as LoadingScreen,
-  Le as NavBar,
-  zn as NavBarButton,
-  Pe as NavBarHeading,
-  $e as NavBarNotificationButton,
-  Ae as NavBarPopoverButton,
-  ze as NavBarSearchField,
-  He as NavBarUserButton,
-  Te as Notification,
-  V as NotificationHeader,
-  Ue as NotificationList,
-  Xe as PageHeader,
-  Je as PageHeaderRow,
-  Ke as PageHeading,
-  tt as SelectedItemsActionsPadding,
-  et as SelectedItemsActionsPanel,
-  Qe as SidebarMenu,
-  Ze as SidebarMenuCollapsible,
-  _e as SidebarMenuHeading,
-  Ye as SidebarMenuLink,
-  nt as SidebarMenuSeparator,
-  Ve as SidebarRailMenu,
-  De as Toast,
-  Qn as UnreadDot,
-  Vn as getIconBgColorFromVariant
+  jn as ActionMenuFlatButton,
+  je as ActionMenuPrimaryButton,
+  Le as ActionMenuSecondaryButton,
+  Pe as CheckboxMenu,
+  de as Collapsible,
+  se as CollapsibleEmptyContent,
+  Ge as CollapsibleGroupHeading,
+  qe as CollapsibleList,
+  Oe as CollapsibleWithCheckbox,
+  ue as ErrorPanel,
+  Xe as ErrorScreen,
+  he as LoadingPanel,
+  Je as LoadingScreen,
+  Ae as NavBar,
+  Tn as NavBarButton,
+  $e as NavBarHeading,
+  He as NavBarNotificationButton,
+  ze as NavBarPopoverButton,
+  Te as NavBarSearchField,
+  Ue as NavBarUserButton,
+  De as Notification,
+  Y as NotificationHeader,
+  We as NotificationList,
+  Ke as PageHeader,
+  Qe as PageHeaderRow,
+  Ve as PageHeading,
+  it as SelectedItemsActionsPadding,
+  rt as SelectedItemsActionsPanel,
+  Ye as SidebarMenu,
+  et as SidebarMenuCollapsible,
+  Ce as SidebarMenuHeading,
+  nt as SidebarMenuLink,
+  tt as SidebarMenuSeparator,
+  Ze as SidebarRailMenu,
+  Ee as Toast,
+  Yn as UnreadDot,
+  Zn as getIconBgColorFromVariant
 };
 //# sourceMappingURL=index.es.js.map