@stenajs-webui/panels 21.44.0 → 21.44.1

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

@@ -1,11 +1,16 @@
 import { ButtonElementProps } from "@stenajs-webui/core";
 import * as React from "react";
-export interface CollapsibleProps extends Omit<ButtonElementProps, "value"> {
-    label: string;
-    contentLeft?: React.ReactNode;
-    contentRight?: React.ReactNode;
+import { ReactNode } from "react";
+export type CollapsibleProps = CollapsibleLabelProps | CollapsibleRenderLabelProps;
+export interface CollapsibleCommonProps extends Omit<ButtonElementProps, "value"> {
+    contentLeft?: ReactNode;
+    contentRight?: ReactNode;
     collapsed?: boolean;
-    disabled?: boolean;
-    autoFocus?: boolean;
+}
+export interface CollapsibleLabelProps extends CollapsibleCommonProps {
+    label: string;
+}
+export interface CollapsibleRenderLabelProps extends CollapsibleCommonProps {
+    renderLabel: () => ReactNode;
 }
 export declare const Collapsible: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,7 +1,15 @@
 import { CheckboxProps } from "@stenajs-webui/forms";
 import * as React from "react";
+import { ReactNode } from "react";
 import { CollapsibleProps } from "./Collapsible";
-export interface CollapsibleWithCheckboxProps extends Omit<CollapsibleProps, "contentLeft" | "onChange">, Pick<CheckboxProps, "value" | "onValueChange" | "onChange" | "indeterminate"> {
+export type CollapsibleWithCheckboxProps = CollapsibleWithCheckboxLabelProps | CollapsibleWithCheckboxRenderLabelProps;
+export interface CollapsibleWithCheckboxCommonProps extends Omit<CollapsibleProps, "contentLeft" | "onChange">, Pick<CheckboxProps, "value" | "onValueChange" | "onChange" | "indeterminate"> {
     checkboxDisabled?: CheckboxProps["disabled"];
 }
+export interface CollapsibleWithCheckboxLabelProps extends CollapsibleWithCheckboxCommonProps {
+    label: string;
+}
+export interface CollapsibleWithCheckboxRenderLabelProps extends CollapsibleWithCheckboxCommonProps {
+    renderLabel: () => ReactNode;
+}
 export declare const CollapsibleWithCheckbox: React.FC<CollapsibleWithCheckboxProps>;

package/dist/index.es.js

@@ -1,12 +1,12 @@
 (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}._sidebarMenuCollapsibleGroupBox_ikek9_1{background:var(--lhds-color-ui-200);border-radius:var(--swui-border-radius);gap:var(--swui-metrics-space);display:flex;flex-direction:column;padding:var(--swui-metrics-space);--current-text-size: var(--swui-font-size-small)}._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 v, jsxs as o } from "react/jsx-runtime";
+import { jsx as n, Fragment as _, jsxs as o } from "react/jsx-runtime";
 import { ActionMenu as G, ActionMenuContext as an, stenaAngleDown as W, PrimaryButton as ln, SecondaryButton as cn, FlatButton as k, stenaHamburger as E, BaseButton as sn, stenaBellFilled as dn, TextInputButton as un, stenaTimes as hn, stenaUserCircle as pn, CircledIcon as j, CloseButton as q, MenuButton as L, Icon as gn, stenaMail as mn, Card as bn, CardBody as fn, stenaTripFerryXl as Bn, Spinner as _n, StenaFlag as vn, stenaAngleLeftDouble as O, stenaPin as Cn, IconMenuButton as P, IconMenuButtonLink as xn, MenuButtonLink as yn } from "@stenajs-webui/elements";
 import * as In from "react";
 import { useRef as wn, useMemo as Nn, forwardRef as A, createContext as kn, useContext as Mn, useState as Sn } from "react";
-import { useBoolean as X, Row as s, Indent as x, Column as h, Heading as M, Box as u, Text as b, Space as m, SeparatorLine as Rn } from "@stenajs-webui/core";
+import { useBoolean as X, Row as c, Indent as x, Column as h, Heading as M, Box as d, Text as b, 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 p from "classnames";
 import { cssColor as f } from "@stenajs-webui/theme";
 const $ = ({
   renderItems: e,
@@ -15,23 +15,23 @@ const $ = ({
   rightIcon: i = W,
   menuWidth: a,
   menuTop: l,
-  onClick: c,
-  disableArrow: d = !1,
-  buttonRef: p,
+  onClick: s,
+  disableArrow: u = !1,
+  buttonRef: g,
   appendTo: B,
-  zIndex: _,
+  zIndex: v,
   ...Z
 }) => {
-  const [H, T, y, nn] = X(!1), en = wn(null), tn = p ?? en, rn = Nn(() => ({ open: T, close: y }), [T, y]), on = (S) => {
-    c == null || c(S), nn();
+  const [H, T, y, nn] = X(!1), en = wn(null), tn = g ?? en, rn = Nn(() => ({ open: T, close: y }), [T, y]), on = (S) => {
+    s == null || s(S), nn();
   };
-  return /* @__PURE__ */ n(v, { children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(_, { children: /* @__PURE__ */ n(
     J,
     {
       renderTrigger: (S) => /* @__PURE__ */ n(
         r,
         {
-          rightIcon: d ? void 0 : i,
+          rightIcon: u ? void 0 : i,
           ...Z,
           ref: tn,
           onClick: on,
@@ -44,7 +44,7 @@ const $ = ({
       onRequestClose: y,
       placement: t,
       appendTo: B,
-      zIndex: _,
+      zIndex: v,
       children: H && /* @__PURE__ */ n(G, { width: a, top: l, trapFocus: !0, children: /* @__PURE__ */ n(an.Provider, { value: rn, children: e(y) }) })
     }
   ) });
@@ -55,8 +55,8 @@ const $ = ({
   K,
   {
     trigger: "click",
-    renderTrigger: (r) => /* @__PURE__ */ n(s, { children: /* @__PURE__ */ o(
-      s,
+    renderTrigger: (r) => /* @__PURE__ */ n(c, { children: /* @__PURE__ */ o(
+      c,
       {
         spacing: 0.5,
         indent: !0,
@@ -94,39 +94,39 @@ const $ = ({
   children: i,
   right: a,
   center: l,
-  onClickMenuButton: c
+  onClickMenuButton: s
 }) => {
-  const d = l ? 1 : void 0;
+  const u = l ? 1 : void 0;
   return /* @__PURE__ */ o(
-    s,
+    c,
     {
       justifyContent: "space-between",
-      className: g(An.navBar, t),
+      className: p(An.navBar, t),
       children: [
         /* @__PURE__ */ o(
-          s,
+          c,
           {
-            flex: d,
+            flex: u,
             justifyContent: "flex-start",
             alignItems: "center",
             children: [
-              /* @__PURE__ */ o(s, { width: "86px", alignItems: "center", children: [
+              /* @__PURE__ */ o(c, { width: "86px", alignItems: "center", children: [
                 /* @__PURE__ */ n(x, {}),
-                r && /* @__PURE__ */ n($n, { onClick: c })
+                r && /* @__PURE__ */ n($n, { onClick: s })
               ] }),
-              e && /* @__PURE__ */ o(v, { children: [
+              e && /* @__PURE__ */ o(_, { children: [
                 e,
                 /* @__PURE__ */ n(x, { num: 2 })
               ] }),
-              i && /* @__PURE__ */ n(v, { children: /* @__PURE__ */ n(s, { justifyContent: "center", alignItems: "center", children: In.Children.map(i, (p, B) => /* @__PURE__ */ o(v, { children: [
+              i && /* @__PURE__ */ n(_, { children: /* @__PURE__ */ n(c, { justifyContent: "center", alignItems: "center", children: In.Children.map(i, (g, B) => /* @__PURE__ */ o(_, { children: [
                 B > 0 && /* @__PURE__ */ n(x, {}),
-                p
+                g
               ] })) }) })
             ]
           }
         ),
-        l && /* @__PURE__ */ n(s, { justifyContent: "center", alignItems: "center", children: l }),
-        /* @__PURE__ */ o(s, { justifyContent: "flex-end", alignItems: "center", flex: d, children: [
+        l && /* @__PURE__ */ n(c, { justifyContent: "center", alignItems: "center", children: l }),
+        /* @__PURE__ */ o(c, { justifyContent: "flex-end", alignItems: "center", flex: u, children: [
           a,
           /* @__PURE__ */ n(x, { num: 2 })
         ] })
@@ -143,7 +143,7 @@ const $ = ({
       {
         ...r,
         ref: i,
-        className: g(
+        className: p(
           U.navBarButton,
           e && U.selected,
           t
@@ -158,17 +158,17 @@ const $ = ({
   zIndex: i,
   ...a
 }) => {
-  const [l, , c, d] = X(!1);
+  const [l, , s, u] = X(!1);
   return /* @__PURE__ */ n(
     J,
     {
-      renderTrigger: (p) => /* @__PURE__ */ n(Tn, { ...a, ...p, onClick: d }),
+      renderTrigger: (g) => /* @__PURE__ */ n(Tn, { ...a, ...g, onClick: u }),
       open: l,
-      onRequestClose: c,
+      onRequestClose: s,
       zIndex: i,
       appendTo: r,
-      children: /* @__PURE__ */ o(u, { children: [
-        e && e({ close: c }),
+      children: /* @__PURE__ */ o(d, { children: [
+        e && e({ close: s }),
         t
       ] })
     }
@@ -185,24 +185,24 @@ const $ = ({
   labelClassName: i,
   iconClassName: a,
   icon: l = dn,
-  ...c
-}, d) {
-  const p = e > 1;
+  ...s
+}, u) {
+  const g = e > 1;
   return /* @__PURE__ */ n(
     sn,
     {
-      ...c,
-      ref: d,
+      ...s,
+      ref: u,
       leftIcon: l,
-      className: g(
+      className: p(
         C.navBarNotificationButton,
         t && C.unread,
-        p && C.hasCount,
+        g && C.hasCount,
         r
       ),
-      label: p ? String(e) : void 0,
-      labelClassName: g(i, C.label),
-      iconClassName: g(a, C.icon)
+      label: g ? String(e) : void 0,
+      labelClassName: p(i, C.label),
+      iconClassName: p(a, C.icon)
     }
   );
 }), En = "_navBarSearchFieldInput_1rp8g_1", qn = "_navBarSearchFieldWrapper_1rp8g_12", On = "_withButton_1rp8g_24", Xn = "_clearButton_1rp8g_33", I = {
@@ -217,16 +217,16 @@ const $ = ({
   showClearButton: i,
   onClickClearButton: a,
   value: l,
-  ...c
+  ...s
 }) => /* @__PURE__ */ n(
   Fn,
   {
-    wrapperClassName: g(
+    wrapperClassName: p(
       I.navBarSearchFieldWrapper,
       i ? I.withButton : void 0,
       r
     ),
-    className: g(I.navBarSearchFieldInput, t),
+    className: p(I.navBarSearchFieldInput, t),
     placeholder: e,
     value: l,
     buttonRight: l && i ? /* @__PURE__ */ n(
@@ -238,7 +238,7 @@ const $ = ({
         onClick: a
       }
     ) : void 0,
-    ...c
+    ...s
   }
 ), Jn = "_navBarUserButton_10f9z_1", Kn = {
   navBarUserButton: Jn
@@ -253,7 +253,7 @@ const $ = ({
   jn,
   {
     ...l,
-    className: g(Kn.navBarUserButton, e),
+    className: p(Kn.navBarUserButton, e),
     leftIcon: t != null ? i : void 0,
     label: r ?? t,
     forceRound: r != null,
@@ -273,32 +273,32 @@ const $ = ({
   iconAriaLabel: i,
   contentLeft: a,
   contentRight: l,
-  onClose: c,
-  unread: d = !1,
-  variant: p,
+  onClose: s,
+  unread: u = !1,
+  variant: g,
   iconBackgroundColor: B
 }) => {
-  const _ = r ? /* @__PURE__ */ n(
+  const v = r ? /* @__PURE__ */ n(
     j,
     {
       size: "small",
       icon: r,
       "aria-label": i,
-      backgroundColor: B || Zn(d, p)
+      backgroundColor: B || Zn(u, g)
     }
   ) : 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(Yn, { children: _ }) : _),
-      /* @__PURE__ */ o(u, { minHeight: 20, justifyContent: "center", flex: 1, gap: 0.5, children: [
+  return /* @__PURE__ */ o(c, { alignItems: "flex-start", indent: 2, spacing: !0, children: [
+    /* @__PURE__ */ o(c, { spacing: !0, gap: 2, flex: 1, alignItems: "flex-start", children: [
+      a && /* @__PURE__ */ n(d, { minHeight: 20, justifyContent: "center", children: a }),
+      !a && v && (u ? /* @__PURE__ */ n(Yn, { children: v }) : v),
+      /* @__PURE__ */ o(d, { minHeight: 20, justifyContent: "center", flex: 1, gap: 0.5, children: [
         /* @__PURE__ */ n(b, { variant: "bold", children: e }),
         t && /* @__PURE__ */ n(
           b,
           {
             size: "small",
             color: f(
-              d ? "--lhds-color-blue-600" : "--lhds-color-ui-600"
+              u ? "--lhds-color-blue-600" : "--lhds-color-ui-600"
             ),
             children: t
           }
@@ -306,13 +306,13 @@ const $ = ({
       ] }),
       l
     ] }),
-    c && /* @__PURE__ */ n(
-      u,
+    s && /* @__PURE__ */ n(
+      d,
       {
         flex: "none",
         justifyContent: "center",
         height: "calc(20px + 2 * var(--swui-metrics-spacing))",
-        children: /* @__PURE__ */ n(q, { onClick: c })
+        children: /* @__PURE__ */ n(q, { onClick: s })
       }
     )
   ] });
@@ -333,7 +333,7 @@ const $ = ({
 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: g(
+    className: p(
       w.notification,
       w[e],
       r && w.unread
@@ -361,7 +361,7 @@ const $ = ({
   maxWidth: a,
   ...l
 }) => /* @__PURE__ */ o(
-  u,
+  d,
   {
     borderRadius: 8,
     background: f("--lhds-color-ui-50"),
@@ -371,8 +371,8 @@ const $ = ({
     role: "alert",
     position: "relative",
     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: [
+      /* @__PURE__ */ n(d, { className: p({ [R.nonClickable]: e }), children: /* @__PURE__ */ n(Y, { ...l }) }),
+      r && /* @__PURE__ */ o(d, { indent: 3, className: p({ [R.nonClickable]: e }), children: [
         r,
         /* @__PURE__ */ n(m, { num: 2 })
       ] }),
@@ -387,35 +387,18 @@ const $ = ({
     ]
   }
 ), se = A(
-  function({
-    label: t,
-    contentLeft: r,
-    contentRight: i,
-    collapsed: a = !1,
-    onClick: l,
-    disabled: c = !1,
-    children: d,
-    autoFocus: p = !1,
-    ...B
-  }, _) {
-    return /* @__PURE__ */ n(
-      L,
-      {
-        ...B,
-        autoFocus: p,
-        ref: _,
-        label: t,
-        onClick: l,
-        disabled: c,
-        expandable: !0,
-        expanded: !a,
-        selected: !a,
-        left: r,
-        right: i,
-        children: d
-      }
-    );
-  }
+  ({ contentLeft: e, contentRight: t, collapsed: r = !1, ...i }, a) => /* @__PURE__ */ n(
+    L,
+    {
+      ref: a,
+      expandable: !0,
+      expanded: !r,
+      selected: !r,
+      left: e,
+      right: t,
+      ...i
+    }
+  )
 ), Oe = ({
   children: e
 }) => /* @__PURE__ */ n(h, { gap: 1, children: e }), Xe = ({
@@ -436,14 +419,14 @@ const $ = ({
         onValueChange: t,
         onChange: r,
         disabled: a,
-        onClick: (c) => c.stopPropagation()
+        onClick: (s) => s.stopPropagation()
       }
     ),
     ...l
   }
 ), de = "_sidebarMenuCollapsibleGroupBox_ikek9_1", ue = {
   sidebarMenuCollapsibleGroupBox: de
-}, he = ({ children: e }) => /* @__PURE__ */ n("div", { className: ue.sidebarMenuCollapsibleGroupBox, children: e }), Je = ({ children: e }) => /* @__PURE__ */ n(u, { spacing: !0, indent: !0, children: /* @__PURE__ */ n(b, { variant: "overline", size: "smaller", children: e }) }), Ke = ({ text: e = "No content" }) => /* @__PURE__ */ o(h, { indent: !0, spacing: !0, flex: 1, alignItems: "center", children: [
+}, he = ({ children: e }) => /* @__PURE__ */ n("div", { className: ue.sidebarMenuCollapsibleGroupBox, children: e }), Je = ({ children: e }) => /* @__PURE__ */ n(d, { spacing: !0, indent: !0, children: /* @__PURE__ */ n(b, { variant: "overline", size: "smaller", children: e }) }), Ke = ({ text: e = "No content" }) => /* @__PURE__ */ o(h, { indent: !0, spacing: !0, flex: 1, alignItems: "center", children: [
   /* @__PURE__ */ n(gn, { icon: mn, color: f("--lhds-color-ui-500") }),
   /* @__PURE__ */ n(m, {}),
   /* @__PURE__ */ n(b, { size: "small", color: f("--lhds-color-ui-500"), children: e })
@@ -454,24 +437,24 @@ const $ = ({
   buttons: i,
   icon: a = Bn,
   headingLevel: l = "h3",
-  ...c
+  ...s
 }) => {
-  const d = !e && !t ? "Something unexpected happened." : e;
-  return /* @__PURE__ */ n(bn, { ...c, children: /* @__PURE__ */ n(fn, { children: /* @__PURE__ */ o(h, { spacing: 1, gap: 3, alignItems: "center", children: [
+  const u = !e && !t ? "Something unexpected happened." : e;
+  return /* @__PURE__ */ n(bn, { ...s, children: /* @__PURE__ */ n(fn, { children: /* @__PURE__ */ o(h, { spacing: 1, gap: 3, alignItems: "center", children: [
     /* @__PURE__ */ o(h, { alignItems: "center", children: [
       /* @__PURE__ */ n(m, { num: 1 }),
       /* @__PURE__ */ n(j, { icon: a, size: "xl" })
     ] }),
     t && /* @__PURE__ */ n(M, { as: l, children: t }),
-    d && /* @__PURE__ */ n(b, { children: d }),
+    u && /* @__PURE__ */ n(b, { children: u }),
     r,
-    i && /* @__PURE__ */ o(u, { children: [
+    i && /* @__PURE__ */ o(d, { children: [
       /* @__PURE__ */ n(m, { num: 2 }),
       i
     ] })
   ] }) }) });
 }, Qe = (e) => /* @__PURE__ */ n(
-  u,
+  d,
   {
     width: "100%",
     height: "100%",
@@ -481,12 +464,12 @@ const $ = ({
   }
 ), ge = ({
   text: e = "Loading..."
-}) => /* @__PURE__ */ o(u, { alignItems: "center", children: [
+}) => /* @__PURE__ */ o(d, { alignItems: "center", children: [
   /* @__PURE__ */ n(_n, { size: "small" }),
   /* @__PURE__ */ n(m, { num: 4 }),
   /* @__PURE__ */ n(M, { variant: "h4", children: e })
 ] }), Ve = (e) => /* @__PURE__ */ n(
-  u,
+  d,
   {
     width: "100%",
     height: "100%",
@@ -499,10 +482,10 @@ const $ = ({
   renderPageHeading: t,
   renderTabs: r,
   children: i
-}) => /* @__PURE__ */ o(u, { shadow: "bottom", background: f("--lhds-color-ui-50"), gap: 2, children: [
-  /* @__PURE__ */ o(u, { indent: 3, children: [
-    e && /* @__PURE__ */ o(s, { spacing: 1, alignItems: "center", children: [
-      /* @__PURE__ */ n(s, { width: "64px", height: "16px" }),
+}) => /* @__PURE__ */ o(d, { shadow: "bottom", background: f("--lhds-color-ui-50"), gap: 2, children: [
+  /* @__PURE__ */ o(d, { indent: 3, children: [
+    e && /* @__PURE__ */ o(c, { spacing: 1, alignItems: "center", children: [
+      /* @__PURE__ */ n(c, { width: "64px", height: "16px" }),
       e()
     ] }),
     t == null ? void 0 : t(),
@@ -510,19 +493,19 @@ const $ = ({
     r == null ? void 0 : r()
   ] }),
   i
-] }), Ze = (e) => /* @__PURE__ */ n(s, { indent: 3, spacing: !0, ...e }), nt = ({
+] }), Ze = (e) => /* @__PURE__ */ n(c, { indent: 3, spacing: !0, ...e }), nt = ({
   icon: e,
   heading: t,
   headingLevel: r = "h2",
   contentLeft: i,
   contentRight: a
-}) => /* @__PURE__ */ o(s, { alignItems: "center", gap: 2, height: "64px", children: [
-  /* @__PURE__ */ o(s, { alignItems: "center", children: [
-    /* @__PURE__ */ n(s, { width: "64px", alignItems: "center", children: e && /* @__PURE__ */ n(j, { icon: e }) }),
+}) => /* @__PURE__ */ o(c, { alignItems: "center", gap: 2, height: "64px", children: [
+  /* @__PURE__ */ o(c, { alignItems: "center", children: [
+    /* @__PURE__ */ n(c, { width: "64px", alignItems: "center", children: e && /* @__PURE__ */ n(j, { icon: e }) }),
     /* @__PURE__ */ n(M, { variant: "h3", as: r, children: t })
   ] }),
-  /* @__PURE__ */ n(s, { alignItems: "center", children: i }),
-  /* @__PURE__ */ n(s, { style: { marginLeft: "auto" }, alignItems: "center", children: a })
+  /* @__PURE__ */ n(c, { alignItems: "center", children: i }),
+  /* @__PURE__ */ n(c, { style: { marginLeft: "auto" }, alignItems: "center", children: a })
 ] }), me = "_sidebarMenu_1bx5w_1", be = "_sidebarItems_1bx5w_38", fe = "_scrollContainer_1bx5w_48", F = {
   sidebarMenu: me,
   sidebarItems: be,
@@ -532,7 +515,7 @@ const $ = ({
 }, ve = ({ onClick: e }) => /* @__PURE__ */ o(h, { background: f("--lhds-color-ui-50"), children: [
   /* @__PURE__ */ n(m, {}),
   /* @__PURE__ */ o(
-    s,
+    c,
     {
       justifyContent: "space-between",
       alignItems: "center",
@@ -556,11 +539,11 @@ const $ = ({
   pinButtonVisible: i,
   onClickPinButton: a,
   bottomItems: l,
-  isPinned: c,
-  ...d
-}) => /* @__PURE__ */ o(u, { ...d, className: g(F.sidebarMenu, e), children: [
+  isPinned: s,
+  ...u
+}) => /* @__PURE__ */ o(d, { ...u, className: p(F.sidebarMenu, e), children: [
   /* @__PURE__ */ n(ve, { onClick: r }),
-  /* @__PURE__ */ n(u, { className: F.scrollContainer, children: /* @__PURE__ */ o(
+  /* @__PURE__ */ n(d, { className: F.scrollContainer, children: /* @__PURE__ */ o(
     h,
     {
       className: F.sidebarItems,
@@ -575,7 +558,7 @@ const $ = ({
           i && /* @__PURE__ */ n(
             Ce,
             {
-              isPinned: c,
+              isPinned: s,
               onClick: a
             }
           ),
@@ -598,7 +581,7 @@ const $ = ({
   bottomItems: a,
   closeButtonTitle: l = "Unpin menu"
 }) => /* @__PURE__ */ o(
-  u,
+  d,
   {
     position: "fixed",
     left: 0,
@@ -629,7 +612,7 @@ const $ = ({
   }
 ), ye = ({
   label: e
-}) => z() ? null : /* @__PURE__ */ o(u, { height: "32px", justifyContent: "center", indent: 1, children: [
+}) => z() ? null : /* @__PURE__ */ o(d, { height: "32px", justifyContent: "center", indent: 1, children: [
   /* @__PURE__ */ n(m, {}),
   /* @__PURE__ */ n(b, { variant: "overline", size: "smaller", children: e })
 ] }), Ie = ({
@@ -649,7 +632,7 @@ const $ = ({
     trigger: ["hover", "focus"],
     disablePadding: !0,
     children: /* @__PURE__ */ n(
-      u,
+      d,
       {
         minWidth: i,
         shadow: "popover",
@@ -670,12 +653,12 @@ const $ = ({
   className: i,
   initialExpand: a = !1
 }) => {
-  const [l, c] = Sn(a);
+  const [l, s] = Sn(a);
   return z() ? r == null ? null : /* @__PURE__ */ n(we, { label: t, icon: r, children: e }) : /* @__PURE__ */ n(
     L,
     {
       label: t,
-      onClick: () => c(!l),
+      onClick: () => s(!l),
       leftIcon: r,
       className: i,
       expandable: !0,
@@ -691,7 +674,7 @@ const $ = ({
     ...e
   }
 ), at = ({ numItemsSelected: e, label: t, afterLabelContent: r, rightContent: i }) => /* @__PURE__ */ o(
-  s,
+  c,
   {
     indent: 3,
     spacing: !0,
@@ -703,8 +686,8 @@ const $ = ({
     flex: 1,
     borderRadius: "var(--swui-border-radius)",
     children: [
-      /* @__PURE__ */ o(s, { alignItems: "center", gap: 2, children: [
-        e != null || t != null ? /* @__PURE__ */ n(s, { alignItems: "center", children: e != null ? /* @__PURE__ */ o(v, { children: [
+      /* @__PURE__ */ o(c, { alignItems: "center", gap: 2, children: [
+        e != null || t != null ? /* @__PURE__ */ n(c, { alignItems: "center", children: e != null ? /* @__PURE__ */ o(_, { children: [
           /* @__PURE__ */ n(b, { children: e }),
           /* @__PURE__ */ n(m, {}),
           /* @__PURE__ */ o(b, { children: [
@@ -712,13 +695,13 @@ const $ = ({
             e === 1 ? "" : "s",
             " selected"
           ] })
-        ] }) : t != null ? /* @__PURE__ */ n(v, { children: typeof t == "string" ? /* @__PURE__ */ n(b, { children: t }) : t }) : null }) : null,
-        r && /* @__PURE__ */ n(s, { children: r })
+        ] }) : t != null ? /* @__PURE__ */ n(_, { children: typeof t == "string" ? /* @__PURE__ */ n(b, { children: t }) : t }) : null }) : null,
+        r && /* @__PURE__ */ n(c, { children: r })
       ] }),
-      /* @__PURE__ */ n(s, { gap: 2, children: i })
+      /* @__PURE__ */ n(c, { gap: 2, children: i })
     ]
   }
-), lt = ({ children: e }) => /* @__PURE__ */ n(s, { spacing: 0.5, indent: 0.5, flex: 1, children: e });
+), lt = ({ children: e }) => /* @__PURE__ */ n(c, { spacing: 0.5, indent: 0.5, flex: 1, children: e });
 export {
   jn as ActionMenuFlatButton,
   Pe as ActionMenuPrimaryButton,