@stenajs-webui/panels 19.0.0-next.53 → 19.0.0-next.54

package/dist/index.es.js

@@ -1,18 +1,18 @@
-(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_q4zl6_1._navBarSearchFieldInput_q4zl6_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:0 var(--swui-metrics-indent)}._navBarSearchFieldInput_q4zl6_1._navBarSearchFieldInput_q4zl6_1:focus{--swui-textinput-text-color: var(--lhds-color-ui-800)}._navBarSearchField_q4zl6_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:0 var(--swui-metrics-indent);border-radius:var(--swui-max-border-radius)}._navBarSearchField_q4zl6_1._withButton_q4zl6_25{padding-right:1px}._navBarSearchField_q4zl6_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)}._clearButton_q4zl6_36{border-radius:var(--swui-max-border-radius)}._navBarUserButton_afv8h_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 )}._navBarUserButton_afv8h_1._initials_afv8h_28{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_11tso_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}._stenaFlag_108h7_1{height:32px}")),document.head.appendChild(o)}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+(function(){"use strict";try{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_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_asssm_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_asssm_1._unread_asssm_13,._navBarNotificationButton_asssm_1:hover{--current-background-color: var(--lhds-color-red-500);--current-outline-color: var(--lhds-color-red-500)}._navBarNotificationButton_asssm_1._unread_asssm_13:active,._navBarNotificationButton_asssm_1:hover:active{--current-background-color: var(--lhds-color-red-600);--current-outline-color: var(--lhds-color-red-600)}._navBarNotificationButton_asssm_1._unread_asssm_13 ._icon_asssm_24{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation:_shake_asssm_1 1.5s ease-in-out var(--swui-nav-bar-notification-shake-count);animation:_shake_asssm_1 1.5s ease-in-out var(--swui-nav-bar-notification-shake-count)}._navBarNotificationButton_asssm_1._unread_asssm_13._hasCount_asssm_30{--current-background-color: var(--lhds-color-red-600);--current-outline-color: var(--lhds-color-red-600)}._navBarNotificationButton_asssm_1._unread_asssm_13._hasCount_asssm_30:hover{--current-background-color: var(--lhds-color-red-700);--current-outline-color: var(--lhds-color-red-700)}._navBarNotificationButton_asssm_1._unread_asssm_13._hasCount_asssm_30:active{--current-background-color: var(--lhds-color-red-800);--current-outline-color: var(--lhds-color-red-800)}._navBarNotificationButton_asssm_1:focus-visible{outline:var(--swui-focus-outline);outline-color:var(--current-outline-color);outline-offset:var(--swui-focus-outline-width)}@-webkit-keyframes _shake_asssm_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_asssm_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_q4zl6_1._navBarSearchFieldInput_q4zl6_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:0 var(--swui-metrics-indent)}._navBarSearchFieldInput_q4zl6_1._navBarSearchFieldInput_q4zl6_1:focus{--swui-textinput-text-color: var(--lhds-color-ui-800)}._navBarSearchField_q4zl6_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:0 var(--swui-metrics-indent);border-radius:var(--swui-max-border-radius)}._navBarSearchField_q4zl6_1._withButton_q4zl6_25{padding-right:1px}._navBarSearchField_q4zl6_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)}._clearButton_q4zl6_36{border-radius:var(--swui-max-border-radius)}._navBarUserButton_1yjji_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 )}._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_11tso_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}._stenaFlag_108h7_1{height:32px}")),document.head.appendChild(r)}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
 import { jsxs as a, Fragment as v, jsx as n } from "react/jsx-runtime";
-import { ActionMenu as J, ActionMenuContext as rn, stenaAngleDown as K, PrimaryButton as an, SecondaryButton as cn, FlatButton as B, stenaHamburger as Q, stenaBellFilled as ln, stenaTimes as z, stenaUserCircle as sn, CircledIcon as V, Icon as dn, stenaMail as un, MenuButton as P, Banner as hn, Spinner as pn, StenaFlag as gn, stenaAngleLeftDouble as X, stenaPin as fn, IconMenuButton as $, IconMenuButtonLink as mn, MenuButtonLink as vn } from "@stenajs-webui/elements";
+import { ActionMenu as G, ActionMenuContext as on, stenaAngleDown as J, PrimaryButton as rn, SecondaryButton as an, FlatButton as x, stenaHamburger as K, BaseButton as cn, stenaBellFilled as ln, stenaTimes as z, stenaUserCircle as sn, CircledIcon as Q, Icon as dn, stenaMail as un, MenuButton as P, Banner as hn, Spinner as pn, StenaFlag as gn, stenaAngleLeftDouble as V, stenaPin as fn, IconMenuButton as $, IconMenuButtonLink as mn, MenuButtonLink as vn } from "@stenajs-webui/elements";
 import * as bn from "react";
-import { useRef as _n, useMemo as Bn, forwardRef as Cn, createContext as xn, useContext as yn, useState as kn } from "react";
-import { useBoolean as A, Column as g, Box as l, Row as s, Indent as x, Heading as H, Text as b, Space as _, SeparatorLine as In } from "@stenajs-webui/core";
-import { Popover as R, Tooltip as Y } from "@stenajs-webui/tooltip";
-import { Checkbox as Z, TextInput as Nn, TextInputButton as wn } from "@stenajs-webui/forms";
+import { useRef as Bn, useMemo as _n, forwardRef as Cn, createContext as xn, useContext as yn, useState as kn } from "react";
+import { useBoolean as A, Column as g, Box as l, Row as s, Indent as C, Heading as H, Text as b, Space as B, SeparatorLine as In } from "@stenajs-webui/core";
+import { Popover as j, Tooltip as X } from "@stenajs-webui/tooltip";
+import { Checkbox as Y, TextInput as Nn, TextInputButton as wn } from "@stenajs-webui/forms";
 import h from "classnames";
 import { cssColor as f } from "@stenajs-webui/theme";
 const E = ({
   renderItems: e,
   placement: t = "bottom",
   buttonComponent: o,
-  rightIcon: r = K,
+  rightIcon: r = J,
   portalTarget: i = "parent",
   zIndex: c,
   menuWidth: d,
@@ -21,13 +21,13 @@ const E = ({
   disableArrow: m = !1,
   ...F
 }) => {
-  const [D, T, y, en] = A(!1), N = _n(null), tn = {
+  const [D, T, y, nn] = A(!1), N = Bn(null), en = {
     name: "focusManager",
     defaultValue: !0,
     fn({ popper: k }) {
       let w = !1;
-      const O = (C) => {
-        C.key === "Escape" && (w = !0, y()), (C.key === "Enter" || C.key === " ") && (w = !0);
+      const O = (_) => {
+        _.key === "Escape" && (w = !0, y()), (_.key === "Enter" || _.key === " ") && (w = !0);
       };
       return {
         onCreate() {
@@ -37,15 +37,15 @@ const E = ({
           k.removeEventListener("keydown", O);
         },
         onMount() {
-          var C;
-          w = !1, (C = k.querySelector("button:not([disabled]), a[href]")) == null || C.focus();
+          var _;
+          w = !1, (_ = k.querySelector("button:not([disabled]), a[href]")) == null || _.focus();
         },
         onHide() {
           N.current && w && N.current.focus();
         }
       };
     }
-  }, on = Bn(() => ({ open: T, close: y }), [T, y]);
+  }, tn = _n(() => ({ open: T, close: y }), [T, y]);
   return /* @__PURE__ */ a(v, { children: [
     /* @__PURE__ */ n(
       o,
@@ -54,40 +54,40 @@ const E = ({
         ...F,
         ref: N,
         onClick: (k) => {
-          p == null || p(k), en();
+          p == null || p(k), nn();
         }
       }
     ),
     /* @__PURE__ */ n(
-      R,
+      j,
       {
         disablePadding: !0,
         visible: D,
         onClickOutside: y,
         placement: t,
-        content: D && /* @__PURE__ */ n(J, { width: d, top: u, trapFocus: !0, children: /* @__PURE__ */ n(rn.Provider, { value: on, children: e(y) }) }),
+        content: D && /* @__PURE__ */ n(G, { width: d, top: u, trapFocus: !0, children: /* @__PURE__ */ n(on.Provider, { value: tn, children: e(y) }) }),
         arrow: !1,
         appendTo: i,
         zIndex: c,
-        plugins: [tn],
+        plugins: [en],
         lazy: !0,
         reference: N
       }
     )
   ] });
-}, je = (e) => /* @__PURE__ */ n(E, { buttonComponent: an, ...e }), Re = (e) => /* @__PURE__ */ n(E, { buttonComponent: cn, ...e }), Mn = (e) => /* @__PURE__ */ n(E, { buttonComponent: B, ...e }), Sn = "1px solid var(--lhds-color-ui-300)", Fe = ({
+}, Re = (e) => /* @__PURE__ */ n(E, { buttonComponent: rn, ...e }), je = (e) => /* @__PURE__ */ n(E, { buttonComponent: an, ...e }), Mn = (e) => /* @__PURE__ */ n(E, { buttonComponent: x, ...e }), Sn = "1px solid var(--lhds-color-ui-300)", Fe = ({
   renderMenu: e,
   ...t
 }) => {
   const [o, r, i] = A(!1);
   return /* @__PURE__ */ n(
-    R,
+    j,
     {
       onClickOutside: i,
       arrow: !1,
       visible: o,
       disablePadding: !0,
-      content: e ? /* @__PURE__ */ n(g, { children: /* @__PURE__ */ n(J, { children: e(i) }) }) : void 0,
+      content: e ? /* @__PURE__ */ n(g, { children: /* @__PURE__ */ n(G, { children: e(i) }) }) : void 0,
       placement: "bottom-start",
       children: /* @__PURE__ */ n(l, { display: "inline-block", children: /* @__PURE__ */ a(
         s,
@@ -98,23 +98,23 @@ const E = ({
           border: Sn,
           borderRadius: "4px",
           children: [
-            /* @__PURE__ */ n(Z, { ...t }),
-            /* @__PURE__ */ n(x, { num: 0.5 }),
-            /* @__PURE__ */ n(B, { size: "small", onClick: r, leftIcon: K })
+            /* @__PURE__ */ n(Y, { ...t }),
+            /* @__PURE__ */ n(C, { num: 0.5 }),
+            /* @__PURE__ */ n(x, { size: "small", onClick: r, leftIcon: J })
           ]
         }
       ) })
     }
   );
-}, jn = "_navBar_kzibd_1", Rn = {
-  navBar: jn
+}, Rn = "_navBar_kzibd_1", jn = {
+  navBar: Rn
 }, Fn = ({
   className: e,
   onClick: t
 }) => /* @__PURE__ */ n(
-  B,
+  x,
   {
-    leftIcon: Q,
+    leftIcon: K,
     className: e,
     onClick: t
   }
@@ -132,7 +132,7 @@ const E = ({
     s,
     {
       justifyContent: "space-between",
-      className: h(Rn.navBar, t),
+      className: h(jn.navBar, t),
       children: [
         /* @__PURE__ */ a(
           s,
@@ -142,15 +142,15 @@ const E = ({
             alignItems: "center",
             children: [
               /* @__PURE__ */ a(s, { width: "86px", alignItems: "center", children: [
-                /* @__PURE__ */ n(x, {}),
+                /* @__PURE__ */ n(C, {}),
                 o && /* @__PURE__ */ n(Fn, { onClick: d })
               ] }),
               e && /* @__PURE__ */ a(v, { children: [
                 e,
-                /* @__PURE__ */ n(x, { num: 2 })
+                /* @__PURE__ */ n(C, { num: 2 })
               ] }),
               r && /* @__PURE__ */ n(v, { children: /* @__PURE__ */ n(s, { justifyContent: "center", alignItems: "center", children: bn.Children.map(r, (p, m) => /* @__PURE__ */ a(v, { children: [
-                m > 0 && /* @__PURE__ */ n(x, {}),
+                m > 0 && /* @__PURE__ */ n(C, {}),
                 p
               ] })) }) })
             ]
@@ -159,7 +159,7 @@ const E = ({
         c && /* @__PURE__ */ n(s, { justifyContent: "center", alignItems: "center", children: c }),
         /* @__PURE__ */ a(s, { justifyContent: "flex-end", alignItems: "center", flex: u, children: [
           i,
-          /* @__PURE__ */ n(x, { num: 2 })
+          /* @__PURE__ */ n(C, { num: 2 })
         ] })
       ]
     }
@@ -172,7 +172,7 @@ const E = ({
   className: t,
   ...o
 }) => /* @__PURE__ */ n(
-  B,
+  x,
   {
     ...o,
     className: h(
@@ -188,7 +188,7 @@ const E = ({
 }) => {
   const [r, , i, c] = A(!1);
   return /* @__PURE__ */ n(
-    R,
+    j,
     {
       onClickOutside: i,
       triggerTarget: document.body,
@@ -200,12 +200,12 @@ const E = ({
       children: /* @__PURE__ */ n(Pn, { ...o, onClick: c })
     }
   );
-}, $n = "_navBarNotificationButton_8ej1j_1", An = "_unread_8ej1j_54", Hn = "_hasCount_8ej1j_68", En = "_icon_8ej1j_69", Un = "_shake_8ej1j_1", I = {
+}, $n = "_navBarNotificationButton_asssm_1", An = "_unread_asssm_13", Hn = "_icon_asssm_24", En = "_shake_asssm_1", Un = "_hasCount_asssm_30", I = {
   navBarNotificationButton: $n,
   unread: An,
-  hasCount: Hn,
-  icon: En,
-  shake: Un
+  icon: Hn,
+  shake: En,
+  hasCount: Un
 }, $e = ({
   count: e,
   unread: t = !1,
@@ -215,16 +215,16 @@ const E = ({
   icon: c = ln,
   ...d
 }) => {
-  const u = e > 0;
+  const u = e > 1;
   return /* @__PURE__ */ n(
-    B,
+    cn,
     {
       ...d,
       leftIcon: c,
       className: h(
+        I.navBarNotificationButton,
         t && I.unread,
         u && I.hasCount,
-        I.navBarNotificationButton,
         o
       ),
       label: u ? String(e) : void 0,
@@ -265,9 +265,8 @@ const E = ({
     ) : void 0,
     ...c
   }
-), Wn = "_navBarUserButton_afv8h_1", Gn = "_initials_afv8h_28", W = {
-  navBarUserButton: Wn,
-  initials: Gn
+), Wn = "_navBarUserButton_1yjji_1", Gn = {
+  navBarUserButton: Wn
 }, He = ({
   className: e,
   username: t,
@@ -280,23 +279,20 @@ const E = ({
   Mn,
   {
     ...d,
-    className: h(
-      { [W.initials]: o != null },
-      W.navBarUserButton,
-      e
-    ),
+    className: h(Gn.navBarUserButton, e),
     leftIcon: t != null ? r : void 0,
     label: o != null ? o : t,
+    forceRound: o != null,
     responsiveIconOnly: c,
     disableArrow: !0
   }
-), Jn = "_unreadDot_l8bni_1", Kn = "_dot_l8bni_4", G = {
+), Jn = "_unreadDot_l8bni_1", Kn = "_dot_l8bni_4", W = {
   unreadDot: Jn,
   dot: Kn
-}, Qn = ({ children: e }) => /* @__PURE__ */ a("div", { className: G.unreadDot, children: [
+}, Qn = ({ children: e }) => /* @__PURE__ */ a("div", { className: W.unreadDot, children: [
   e,
-  /* @__PURE__ */ n("div", { className: G.dot })
-] }), nn = ({
+  /* @__PURE__ */ n("div", { className: W.dot })
+] }), Z = ({
   text: e,
   timestamp: t,
   icon: o,
@@ -308,7 +304,7 @@ const E = ({
   variant: p
 }) => {
   const m = o ? /* @__PURE__ */ n(
-    V,
+    Q,
     {
       size: "small",
       icon: o,
@@ -342,7 +338,7 @@ const E = ({
         justifyContent: "center",
         height: "calc(20px + 2 * var(--swui-metrics-spacing))",
         children: /* @__PURE__ */ n(
-          B,
+          x,
           {
             leftIcon: z,
             onClick: d,
@@ -376,7 +372,7 @@ const E = ({
       o && S.unread
     ),
     children: [
-      /* @__PURE__ */ n(nn, { ...r, unread: o, variant: e }),
+      /* @__PURE__ */ n(Z, { ...r, unread: o, variant: e }),
       t && /* @__PURE__ */ n(g, { className: S.body, children: t })
     ]
   }
@@ -408,10 +404,10 @@ const E = ({
     role: "alert",
     position: "relative",
     children: [
-      /* @__PURE__ */ n(l, { className: h({ [L.nonClickable]: e }), children: /* @__PURE__ */ n(nn, { ...c }) }),
+      /* @__PURE__ */ n(l, { className: h({ [L.nonClickable]: e }), children: /* @__PURE__ */ n(Z, { ...c }) }),
       o && /* @__PURE__ */ a(l, { indent: 3, className: h({ [L.nonClickable]: e }), children: [
         o,
-        /* @__PURE__ */ n(_, { num: 2 })
+        /* @__PURE__ */ n(B, { num: 2 })
       ] }),
       e && /* @__PURE__ */ n(
         "button",
@@ -425,7 +421,7 @@ const E = ({
   }
 ), ie = () => /* @__PURE__ */ a(g, { indent: !0, spacing: !0, flex: 1, alignItems: "center", children: [
   /* @__PURE__ */ n(dn, { icon: un, color: f("--lhds-color-ui-500") }),
-  /* @__PURE__ */ n(_, {}),
+  /* @__PURE__ */ n(B, {}),
   /* @__PURE__ */ n(b, { size: "small", color: f("--lhds-color-ui-500"), children: "No content" })
 ] }), ce = Cn(
   function({
@@ -470,7 +466,7 @@ const E = ({
   ce,
   {
     contentLeft: /* @__PURE__ */ n(
-      Z,
+      Y,
       {
         value: e,
         indeterminate: r,
@@ -497,7 +493,7 @@ const E = ({
   text: e = "Loading..."
 }) => /* @__PURE__ */ a(l, { alignItems: "center", children: [
   /* @__PURE__ */ n(pn, { size: "small" }),
-  /* @__PURE__ */ n(_, { num: 4 }),
+  /* @__PURE__ */ n(B, { num: 4 }),
   /* @__PURE__ */ n(H, { variant: "h4", children: e })
 ] }), Ge = (e) => /* @__PURE__ */ n(
   l,
@@ -520,7 +516,7 @@ const E = ({
       e()
     ] }),
     t == null ? void 0 : t(),
-    o && /* @__PURE__ */ n(_, {}),
+    o && /* @__PURE__ */ n(B, {}),
     o == null ? void 0 : o()
   ] }),
   r
@@ -532,7 +528,7 @@ const E = ({
   contentRight: i
 }) => /* @__PURE__ */ a(s, { alignItems: "center", gap: 2, height: "64px", children: [
   /* @__PURE__ */ a(s, { alignItems: "center", children: [
-    /* @__PURE__ */ n(s, { width: "64px", alignItems: "center", children: e && /* @__PURE__ */ n(V, { icon: e }) }),
+    /* @__PURE__ */ n(s, { width: "64px", alignItems: "center", children: e && /* @__PURE__ */ n(Q, { icon: e }) }),
     /* @__PURE__ */ n(H, { variant: "h3", as: o, children: t })
   ] }),
   /* @__PURE__ */ n(s, { alignItems: "center", children: r }),
@@ -542,7 +538,7 @@ const E = ({
 }, he = "_stenaFlag_108h7_1", pe = {
   stenaFlag: he
 }, ge = ({ onClick: e }) => /* @__PURE__ */ a(g, { background: f("--lhds-color-ui-50"), children: [
-  /* @__PURE__ */ n(_, {}),
+  /* @__PURE__ */ n(B, {}),
   /* @__PURE__ */ a(
     s,
     {
@@ -553,7 +549,7 @@ const E = ({
       minHeight: "48px",
       children: [
         /* @__PURE__ */ n(
-          B,
+          x,
           {
             leftIcon: z,
             onClick: e,
@@ -570,7 +566,7 @@ const E = ({
   label: o
 }) => {
   const r = e ? "Unpin menu" : "Pin menu", i = o != null ? o : r;
-  return /* @__PURE__ */ n(P, { onClick: t, label: i, leftIcon: e ? X : fn });
+  return /* @__PURE__ */ n(P, { onClick: t, label: i, leftIcon: e ? V : fn });
 }, Ve = ({
   className: e,
   children: t,
@@ -608,17 +604,17 @@ const E = ({
                   onClick: c
                 }
               ),
-              /* @__PURE__ */ n(_, {})
+              /* @__PURE__ */ n(B, {})
             ] })
           ] })
         }
       )
     ]
   }
-), j = xn(!1), U = () => yn(j), me = ({
+), R = xn(!1), U = () => yn(R), me = ({
   label: e,
   ...t
-}) => /* @__PURE__ */ n(Y, { label: e, placement: "right", appendTo: document.body, children: /* @__PURE__ */ n($, { ...t }) }), Xe = ({
+}) => /* @__PURE__ */ n(X, { label: e, placement: "right", appendTo: document.body, children: /* @__PURE__ */ n($, { ...t }) }), Xe = ({
   closeButtonVisible: e,
   onClickCloseButton: t,
   onClickMenuButton: o,
@@ -638,15 +634,15 @@ const E = ({
     shadow: "popover",
     background: f("--lhds-color-ui-50"),
     children: [
-      /* @__PURE__ */ n($, { onClick: o, icon: Q }),
+      /* @__PURE__ */ n($, { onClick: o, icon: K }),
       /* @__PURE__ */ a(g, { justifyContent: "space-between", flex: 1, gap: 1, children: [
-        /* @__PURE__ */ n(g, { gap: 1, children: /* @__PURE__ */ n(j.Provider, { value: !0, children: r }) }),
-        /* @__PURE__ */ n(g, { gap: 1, children: (i || e) && /* @__PURE__ */ a(j.Provider, { value: !0, children: [
+        /* @__PURE__ */ n(g, { gap: 1, children: /* @__PURE__ */ n(R.Provider, { value: !0, children: r }) }),
+        /* @__PURE__ */ n(g, { gap: 1, children: (i || e) && /* @__PURE__ */ a(R.Provider, { value: !0, children: [
           i,
           e && /* @__PURE__ */ n(
             me,
             {
-              icon: X,
+              icon: V,
               label: c,
               onClick: t
             }
@@ -658,19 +654,19 @@ const E = ({
 ), ve = ({
   label: e
 }) => U() ? null : /* @__PURE__ */ a(l, { height: "32px", justifyContent: "center", indent: 1, children: [
-  /* @__PURE__ */ n(_, {}),
+  /* @__PURE__ */ n(B, {}),
   /* @__PURE__ */ n(b, { variant: "overline", size: "smaller", children: e })
 ] }), be = ({
   label: e,
   leftIcon: t,
   ...o
-}) => t == null ? null : /* @__PURE__ */ n(Y, { label: e, placement: "right", appendTo: document.body, children: /* @__PURE__ */ n(mn, { icon: t, ...o }) }), Ye = (e) => U() ? /* @__PURE__ */ n(be, { ...e }) : /* @__PURE__ */ n(vn, { ...e }), _e = ({
+}) => t == null ? null : /* @__PURE__ */ n(X, { label: e, placement: "right", appendTo: document.body, children: /* @__PURE__ */ n(mn, { icon: t, ...o }) }), Ye = (e) => U() ? /* @__PURE__ */ n(be, { ...e }) : /* @__PURE__ */ n(vn, { ...e }), Be = ({
   children: e,
   label: t,
   icon: o,
   popupMinWidth: r = "200px"
 }) => /* @__PURE__ */ n(
-  R,
+  j,
   {
     appendTo: "parent",
     arrow: !1,
@@ -687,7 +683,7 @@ const E = ({
         spacing: 1,
         indent: 1,
         gap: 2,
-        children: /* @__PURE__ */ a(j.Provider, { value: !1, children: [
+        children: /* @__PURE__ */ a(R.Provider, { value: !1, children: [
           /* @__PURE__ */ n(ve, { label: t }),
           e
         ] })
@@ -703,7 +699,7 @@ const E = ({
   initialExpand: i = !1
 }) => {
   const [c, d] = kn(i);
-  return U() ? o == null ? null : /* @__PURE__ */ n(_e, { label: t, icon: o, children: e }) : /* @__PURE__ */ n(
+  return U() ? o == null ? null : /* @__PURE__ */ n(Be, { label: t, icon: o, children: e }) : /* @__PURE__ */ n(
     P,
     {
       label: t,
@@ -722,7 +718,7 @@ const E = ({
     color: f("--lhds-color-ui-400"),
     ...e
   }
-), Be = `1px solid ${f("--lhds-color-orange-400")}`, et = ({
+), _e = `1px solid ${f("--lhds-color-orange-400")}`, et = ({
   numItemsSelected: e,
   label: t,
   afterLabelContent: o,
@@ -735,13 +731,13 @@ const E = ({
     minHeight: "56px",
     justifyContent: "space-between",
     alignItems: "center",
-    borderTop: Be,
+    borderTop: _e,
     background: f("--lhds-color-orange-50"),
     children: [
       /* @__PURE__ */ a(s, { alignItems: "center", children: [
         e != null || t != null ? /* @__PURE__ */ n(v, { children: e != null ? /* @__PURE__ */ a(v, { children: [
           /* @__PURE__ */ n(b, { variant: "bold", children: e }),
-          /* @__PURE__ */ n(_, {}),
+          /* @__PURE__ */ n(B, {}),
           /* @__PURE__ */ a(b, { children: [
             "item",
             e === 1 ? "" : "s",
@@ -749,7 +745,7 @@ const E = ({
           ] })
         ] }) : t != null ? /* @__PURE__ */ n(v, { children: typeof t == "string" ? /* @__PURE__ */ n(b, { children: t }) : t }) : null }) : null,
         o ? /* @__PURE__ */ a(v, { children: [
-          /* @__PURE__ */ n(x, {}),
+          /* @__PURE__ */ n(C, {}),
           /* @__PURE__ */ n(l, { children: o })
         ] }) : null
       ] }),
@@ -759,8 +755,8 @@ const E = ({
 );
 export {
   Mn as ActionMenuFlatButton,
-  je as ActionMenuPrimaryButton,
-  Re as ActionMenuSecondaryButton,
+  Re as ActionMenuPrimaryButton,
+  je as ActionMenuSecondaryButton,
   Fe as CheckboxMenu,
   ce as Collapsible,
   ie as CollapsibleEmptyContent,
@@ -779,7 +775,7 @@ export {
   Ae as NavBarSearchField,
   He as NavBarUserButton,
   Ee as Notification,
-  nn as NotificationHeader,
+  Z as NotificationHeader,
   Ue as NotificationList,
   Je as PageHeader,
   Ke as PageHeaderRow,