@stenajs-webui/panels 22.3.0 → 22.4.1

package/dist/index.es.js

@@ -1,529 +1,536 @@
-(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 B, jsxs as o } from "react/jsx-runtime";
-import { ActionMenu as G, ActionMenuContext as ln, stenaAngleDown as W, PrimaryButton as cn, SecondaryButton as sn, FlatButton as k, stenaHamburger as E, BaseButton as dn, stenaBellFilled as un, TextInputButton as hn, stenaTimes as pn, stenaUserCircle as gn, CircledIcon as j, CloseButton as q, MenuButton as L, Icon as mn, stenaMail as fn, Card as bn, CardBody as _n, stenaTripFerryXl as Bn, Spinner as vn, StenaFlag as Cn, stenaAngleLeftDouble as O, stenaPin as xn, IconMenuButton as P, IconMenuButtonLink as yn, MenuButtonLink as In } from "@stenajs-webui/elements";
-import * as wn from "react";
-import { useRef as Nn, useMemo as kn, forwardRef as A, createContext as Mn, useContext as Sn, useState as Rn } from "react";
-import { useBoolean as X, Row as c, Indent as x, Column as h, Heading as M, Box as d, Text as f, Space as m, SeparatorLine as Fn } from "@stenajs-webui/core";
-import { ControlledPopover as J, Popover as K, Tooltip as Q } from "@stenajs-webui/tooltip";
-import { Checkbox as V, TextInput as jn } from "@stenajs-webui/forms";
-import p from "classnames";
-import { cssColor as b } from "@stenajs-webui/theme";
-const $ = ({
-  renderItems: e,
+(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}._productCard_19x6b_1{max-width:560px}@media (max-width: 768px){._productCard_19x6b_1{max-width:unset}}")),document.head.appendChild(r)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+import { jsx as e, Fragment as M, jsxs as r } from "react/jsx-runtime";
+import { ActionMenu as ue, ActionMenuContext as ke, stenaAngleDown as he, PrimaryButton as pe, SecondaryButton as I, FlatButton as E, stenaHamburger as me, BaseButton as Ie, stenaBellFilled as Se, TextInputButton as Ne, stenaTimes as Me, stenaUserCircle as Re, CircledIcon as G, CloseButton as ge, MenuButton as T, Icon as X, stenaMail as ze, Card as je, CardBody as Fe, stenaTripFerryXl as Pe, Spinner as J, StenaFlag as Ae, stenaAngleLeftDouble as be, stenaPin as $e, IconMenuButton as Y, IconMenuButtonLink as Le, MenuButtonLink as De, Tag as We, ShimmerBox as R, stenaAngleLeft as re, stenaAngleRight as oe, stenaSearchPlus as He, stenaSearchMinus as Ue, stenaTimesThick as qe } from "@stenajs-webui/elements";
+import * as Ee from "react";
+import { useRef as Q, useMemo as U, forwardRef as ee, createContext as Ge, useContext as Oe, useState as H, useCallback as le } from "react";
+import { useBoolean as fe, Row as c, Indent as y, Column as p, Heading as z, Box as d, Text as f, Space as x, SeparatorLine as Ve, getDataProps as ne, Spacing as Ke, isEmptyFragment as Ze, useAccessibleFontSizeContext as Qe, exhaustSwitchCaseElseThrow as xe, BlockKeyboardEvents as Te } from "@stenajs-webui/core";
+import { ControlledPopover as ve, Popover as Ce, Tooltip as _e } from "@stenajs-webui/tooltip";
+import { Checkbox as ye, TextInput as Xe } from "@stenajs-webui/forms";
+import v from "classnames";
+import { cssColor as m } from "@stenajs-webui/theme";
+import { useMediaQuery as N } from "react-responsive";
+import ae from "yet-another-react-lightbox";
+import Je from "yet-another-react-lightbox/plugins/inline";
+import Ye from "yet-another-react-lightbox/plugins/captions";
+import en from "yet-another-react-lightbox/plugins/counter";
+import nn from "yet-another-react-lightbox/plugins/zoom";
+import "yet-another-react-lightbox/styles.css";
+const te = ({
+  renderItems: n,
   placement: t = "bottom",
-  buttonComponent: r,
-  rightIcon: i = W,
-  menuWidth: a,
-  menuTop: l,
+  buttonComponent: i,
+  rightIcon: o = he,
+  menuWidth: l,
+  menuTop: a,
   onClick: s,
   disableArrow: u = !1,
   buttonRef: g,
-  appendTo: _,
-  zIndex: v,
-  disableTrapFocus: Z = !1,
-  ...nn
+  appendTo: b,
+  zIndex: C,
+  disableTrapFocus: B = !1,
+  ...k
 }) => {
-  const [H, U, y, en] = X(!1), tn = Nn(null), rn = g ?? tn, on = kn(() => ({ open: U, close: y }), [U, y]), an = (S) => {
-    s == null || s(S), en();
+  const [S, w, _, j] = fe(!1), F = Q(null), P = g ?? F, O = U(() => ({ open: w, close: _ }), [w, _]), L = (A) => {
+    s == null || s(A), j();
   };
-  return /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(
-    J,
+  return /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
+    ve,
     {
-      renderTrigger: (S) => /* @__PURE__ */ n(
-        r,
+      renderTrigger: (A) => /* @__PURE__ */ e(
+        i,
         {
-          rightIcon: u ? void 0 : i,
-          ...nn,
-          ref: rn,
-          onClick: an,
-          ...S
+          rightIcon: u ? void 0 : o,
+          ...k,
+          ref: P,
+          onClick: L,
+          ...A
         }
       ),
       hideArrow: !0,
       disablePadding: !0,
-      open: H,
-      onRequestClose: y,
+      open: S,
+      onRequestClose: _,
       placement: t,
-      appendTo: _,
-      zIndex: v,
-      children: H && /* @__PURE__ */ n(
-        G,
+      appendTo: b,
+      zIndex: C,
+      children: S && /* @__PURE__ */ e(
+        ue,
         {
-          width: a,
-          top: l,
-          trapFocus: !Z,
-          children: /* @__PURE__ */ n(ln.Provider, { value: on, children: e(y) })
+          width: l,
+          top: a,
+          trapFocus: !B,
+          children: /* @__PURE__ */ e(ke.Provider, { value: O, children: n(_) })
         }
       )
     }
   ) });
-}, Ae = (e) => /* @__PURE__ */ n($, { buttonComponent: cn, ...e }), $e = (e) => /* @__PURE__ */ n($, { buttonComponent: sn, ...e }), Ln = (e) => /* @__PURE__ */ n($, { buttonComponent: k, ...e }), Pn = "1px solid var(--lhds-color-ui-300)", ze = ({
-  renderMenu: e,
+}, xt = (n) => /* @__PURE__ */ e(te, { buttonComponent: pe, ...n }), vt = (n) => /* @__PURE__ */ e(te, { buttonComponent: I, ...n }), tn = (n) => /* @__PURE__ */ e(te, { buttonComponent: E, ...n }), rn = "1px solid var(--lhds-color-ui-300)", Ct = ({
+  renderMenu: n,
   ...t
-}) => /* @__PURE__ */ n(
-  K,
+}) => /* @__PURE__ */ e(
+  Ce,
   {
     trigger: "click",
-    renderTrigger: (r) => /* @__PURE__ */ n(c, { children: /* @__PURE__ */ o(
+    renderTrigger: (i) => /* @__PURE__ */ e(c, { children: /* @__PURE__ */ r(
       c,
       {
         spacing: 0.5,
         indent: !0,
         alignItems: "center",
-        border: Pn,
+        border: rn,
         borderRadius: "4px",
         children: [
-          /* @__PURE__ */ n(V, { ...t }),
-          /* @__PURE__ */ n(x, { num: 0.5 }),
-          /* @__PURE__ */ n(k, { size: "small", leftIcon: W, ...r })
+          /* @__PURE__ */ e(ye, { ...t }),
+          /* @__PURE__ */ e(y, { num: 0.5 }),
+          /* @__PURE__ */ e(E, { size: "small", leftIcon: he, ...i })
         ]
       }
     ) }),
     hideArrow: !0,
     disablePadding: !0,
     placement: "bottom-start",
-    children: ({ onRequestClose: r }) => /* @__PURE__ */ n(h, { children: /* @__PURE__ */ n(G, { children: e(r) }) })
+    children: ({ onRequestClose: i }) => /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(ue, { children: n(i) }) })
   }
-), An = "_navBar_kzibd_1", $n = {
-  navBar: An
-}, zn = ({
-  className: e,
+), on = "_navBar_kzibd_1", ln = {
+  navBar: on
+}, an = ({
+  className: n,
   onClick: t
-}) => /* @__PURE__ */ n(
-  k,
+}) => /* @__PURE__ */ e(
+  E,
   {
-    leftIcon: E,
-    className: e,
+    leftIcon: me,
+    className: n,
     onClick: t
   }
-), He = ({
-  left: e,
+), _t = ({
+  left: n,
   className: t,
-  showMenuButton: r = !1,
-  children: i,
-  right: a,
-  center: l,
+  showMenuButton: i = !1,
+  children: o,
+  right: l,
+  center: a,
   onClickMenuButton: s
 }) => {
-  const u = l ? 1 : void 0;
-  return /* @__PURE__ */ o(
+  const u = a ? 1 : void 0;
+  return /* @__PURE__ */ r(
     c,
     {
       justifyContent: "space-between",
-      className: p($n.navBar, t),
+      className: v(ln.navBar, t),
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ r(
           c,
           {
             flex: u,
             justifyContent: "flex-start",
             alignItems: "center",
             children: [
-              /* @__PURE__ */ o(c, { width: "86px", alignItems: "center", children: [
-                /* @__PURE__ */ n(x, {}),
-                r && /* @__PURE__ */ n(zn, { onClick: s })
+              /* @__PURE__ */ r(c, { width: "86px", alignItems: "center", children: [
+                /* @__PURE__ */ e(y, {}),
+                i && /* @__PURE__ */ e(an, { onClick: s })
               ] }),
-              e && /* @__PURE__ */ o(B, { children: [
-                e,
-                /* @__PURE__ */ n(x, { num: 2 })
+              n && /* @__PURE__ */ r(M, { children: [
+                n,
+                /* @__PURE__ */ e(y, { num: 2 })
               ] }),
-              i && /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(c, { justifyContent: "center", alignItems: "center", children: wn.Children.map(i, (g, _) => /* @__PURE__ */ o(B, { children: [
-                _ > 0 && /* @__PURE__ */ n(x, {}),
+              o && /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(c, { justifyContent: "center", alignItems: "center", children: Ee.Children.map(o, (g, b) => /* @__PURE__ */ r(M, { children: [
+                b > 0 && /* @__PURE__ */ e(y, {}),
                 g
               ] })) }) })
             ]
           }
         ),
-        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 })
+        a && /* @__PURE__ */ e(c, { justifyContent: "center", alignItems: "center", children: a }),
+        /* @__PURE__ */ r(c, { justifyContent: "flex-end", alignItems: "center", flex: u, children: [
+          l,
+          /* @__PURE__ */ e(y, { num: 2 })
         ] })
       ]
     }
   );
-}, Hn = "_navBarButton_b3x3w_1", Un = "_selected_b3x3w_14", T = {
-  navBarButton: Hn,
-  selected: Un
-}, Tn = A(
-  function({ selected: e, className: t, ...r }, i) {
-    return /* @__PURE__ */ n(
-      k,
+}, cn = "_navBarButton_b3x3w_1", sn = "_selected_b3x3w_14", ce = {
+  navBarButton: cn,
+  selected: sn
+}, dn = ee(
+  function({ selected: n, className: t, ...i }, o) {
+    return /* @__PURE__ */ e(
+      E,
       {
-        ...r,
-        ref: i,
-        className: p(
-          T.navBarButton,
-          e && T.selected,
+        ...i,
+        ref: o,
+        className: v(
+          ce.navBarButton,
+          n && ce.selected,
           t
         )
       }
     );
   }
-), Ue = (e) => /* @__PURE__ */ n(M, { whiteSpace: "nowrap", variant: "h4", as: "h1", ...e }), Te = ({
-  content: e,
+), yt = (n) => /* @__PURE__ */ e(z, { whiteSpace: "nowrap", variant: "h4", as: "h1", ...n }), wt = ({
+  content: n,
   children: t,
-  appendTo: r,
-  zIndex: i,
-  ...a
+  appendTo: i,
+  zIndex: o,
+  ...l
 }) => {
-  const [l, , s, u] = X(!1);
-  return /* @__PURE__ */ n(
-    J,
+  const [a, , s, u] = fe(!1);
+  return /* @__PURE__ */ e(
+    ve,
     {
-      renderTrigger: (g) => /* @__PURE__ */ n(Tn, { ...a, ...g, onClick: u }),
-      open: l,
+      renderTrigger: (g) => /* @__PURE__ */ e(dn, { ...l, ...g, onClick: u }),
+      open: a,
       onRequestClose: s,
-      zIndex: i,
-      appendTo: r,
-      children: /* @__PURE__ */ o(d, { children: [
-        e && e({ close: s }),
+      zIndex: o,
+      appendTo: i,
+      children: /* @__PURE__ */ r(d, { children: [
+        n && n({ close: s }),
         t
       ] })
     }
   );
-}, Dn = "_navBarNotificationButton_1wt3y_1", Gn = "_unread_1wt3y_23", Wn = "_icon_1wt3y_23", En = "_shake_1wt3y_1", C = {
-  navBarNotificationButton: Dn,
-  unread: Gn,
-  icon: Wn,
-  shake: En
-}, De = A(function({
-  count: e,
+}, un = "_navBarNotificationButton_1wt3y_1", hn = "_unread_1wt3y_23", pn = "_icon_1wt3y_23", mn = "_shake_1wt3y_1", $ = {
+  navBarNotificationButton: un,
+  unread: hn,
+  icon: pn,
+  shake: mn
+}, Bt = ee(function({
+  count: n,
   unread: t = !1,
-  className: r,
-  labelClassName: i,
-  iconClassName: a,
-  icon: l = un,
+  className: i,
+  labelClassName: o,
+  iconClassName: l,
+  icon: a = Se,
   ...s
 }, u) {
-  const g = e > 1;
-  return /* @__PURE__ */ n(
-    dn,
+  const g = n > 1;
+  return /* @__PURE__ */ e(
+    Ie,
     {
       ...s,
       ref: u,
-      leftIcon: l,
-      className: p(
-        C.navBarNotificationButton,
-        t && C.unread,
-        g && C.hasCount,
-        r
+      leftIcon: a,
+      className: v(
+        $.navBarNotificationButton,
+        t && $.unread,
+        g && $.hasCount,
+        i
       ),
-      label: g ? String(e) : void 0,
-      labelClassName: p(i, C.label),
-      iconClassName: p(a, C.icon)
+      label: g ? String(n) : void 0,
+      labelClassName: v(o, $.label),
+      iconClassName: v(l, $.icon)
     }
   );
-}), qn = "_navBarSearchFieldInput_1rp8g_1", On = "_navBarSearchFieldWrapper_1rp8g_12", Xn = "_withButton_1rp8g_24", Jn = "_clearButton_1rp8g_33", I = {
-  navBarSearchFieldInput: qn,
-  navBarSearchFieldWrapper: On,
-  withButton: Xn,
-  clearButton: Jn
-}, Ge = ({
-  placeholder: e = "Search",
+}), gn = "_navBarSearchFieldInput_1rp8g_1", bn = "_navBarSearchFieldWrapper_1rp8g_12", fn = "_withButton_1rp8g_24", xn = "_clearButton_1rp8g_33", D = {
+  navBarSearchFieldInput: gn,
+  navBarSearchFieldWrapper: bn,
+  withButton: fn,
+  clearButton: xn
+}, kt = ({
+  placeholder: n = "Search",
   className: t,
-  wrapperClassName: r,
-  showClearButton: i,
-  onClickClearButton: a,
-  value: l,
+  wrapperClassName: i,
+  showClearButton: o,
+  onClickClearButton: l,
+  value: a,
   ...s
-}) => /* @__PURE__ */ n(
-  jn,
+}) => /* @__PURE__ */ e(
+  Xe,
   {
-    wrapperClassName: p(
-      I.navBarSearchFieldWrapper,
-      i ? I.withButton : void 0,
-      r
+    wrapperClassName: v(
+      D.navBarSearchFieldWrapper,
+      o ? D.withButton : void 0,
+      i
     ),
-    className: p(I.navBarSearchFieldInput, t),
-    placeholder: e,
-    value: l,
-    buttonRight: l && i ? /* @__PURE__ */ n(
-      hn,
+    className: v(D.navBarSearchFieldInput, t),
+    placeholder: n,
+    value: a,
+    buttonRight: a && o ? /* @__PURE__ */ e(
+      Ne,
       {
-        className: I.clearButton,
-        icon: pn,
+        className: D.clearButton,
+        icon: Me,
         variant: "error",
-        onClick: a
+        onClick: l
       }
     ) : void 0,
     ...s
   }
-), Kn = "_navBarUserButton_10f9z_1", Qn = {
-  navBarUserButton: Kn
-}, We = ({
-  className: e,
+), vn = "_navBarUserButton_10f9z_1", Cn = {
+  navBarUserButton: vn
+}, It = ({
+  className: n,
   username: t,
-  initials: r,
-  icon: i = gn,
-  responsiveIconOnly: a = r == null,
-  ...l
-}) => /* @__PURE__ */ n(
-  Ln,
+  initials: i,
+  icon: o = Re,
+  responsiveIconOnly: l = i == null,
+  ...a
+}) => /* @__PURE__ */ e(
+  tn,
   {
-    ...l,
-    className: p(Qn.navBarUserButton, e),
-    leftIcon: t != null ? i : void 0,
-    label: r ?? t,
-    forceRound: r != null,
-    responsiveIconOnly: a,
+    ...a,
+    className: v(Cn.navBarUserButton, n),
+    leftIcon: t != null ? o : void 0,
+    label: i ?? t,
+    forceRound: i != null,
+    responsiveIconOnly: l,
     disableArrow: !0
   }
-), Vn = "_unreadDot_l8bni_1", Yn = "_dot_l8bni_4", D = {
-  unreadDot: Vn,
-  dot: Yn
-}, Zn = ({ children: e }) => /* @__PURE__ */ o("div", { className: D.unreadDot, children: [
-  e,
-  /* @__PURE__ */ n("div", { className: D.dot })
-] }), Y = ({
-  text: e,
+), _n = "_unreadDot_l8bni_1", yn = "_dot_l8bni_4", se = {
+  unreadDot: _n,
+  dot: yn
+}, wn = ({ children: n }) => /* @__PURE__ */ r("div", { className: se.unreadDot, children: [
+  n,
+  /* @__PURE__ */ e("div", { className: se.dot })
+] }), we = ({
+  text: n,
   timestamp: t,
-  icon: r,
-  iconAriaLabel: i,
-  contentLeft: a,
-  contentRight: l,
+  icon: i,
+  iconAriaLabel: o,
+  contentLeft: l,
+  contentRight: a,
   onClose: s,
   unread: u = !1,
   variant: g,
-  iconBackgroundColor: _
+  iconBackgroundColor: b
 }) => {
-  const v = r ? /* @__PURE__ */ n(
-    j,
+  const C = i ? /* @__PURE__ */ e(
+    G,
     {
       size: "small",
-      icon: r,
-      "aria-label": i,
-      backgroundColor: _ || ne(u, g)
+      icon: i,
+      "aria-label": o,
+      backgroundColor: b || Bn(u, g)
     }
   ) : void 0;
-  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(Zn, { children: v }) : v),
-      /* @__PURE__ */ o(d, { minHeight: 20, justifyContent: "center", flex: 1, gap: 0.5, children: [
-        /* @__PURE__ */ n(f, { variant: "bold", children: e }),
-        t && /* @__PURE__ */ n(
+  return /* @__PURE__ */ r(c, { alignItems: "flex-start", indent: 2, spacing: !0, children: [
+    /* @__PURE__ */ r(c, { spacing: !0, gap: 2, flex: 1, alignItems: "flex-start", children: [
+      l && /* @__PURE__ */ e(d, { minHeight: 20, justifyContent: "center", children: l }),
+      !l && C && (u ? /* @__PURE__ */ e(wn, { children: C }) : C),
+      /* @__PURE__ */ r(d, { minHeight: 20, justifyContent: "center", flex: 1, gap: 0.5, children: [
+        /* @__PURE__ */ e(f, { variant: "bold", children: n }),
+        t && /* @__PURE__ */ e(
           f,
           {
             size: "small",
-            color: b(
+            color: m(
               u ? "--lhds-color-blue-600" : "--lhds-color-ui-600"
             ),
             children: t
           }
         )
       ] }),
-      l
+      a
     ] }),
-    s && /* @__PURE__ */ n(
+    s && /* @__PURE__ */ e(
       d,
       {
         flex: "none",
         justifyContent: "center",
         height: "calc(20px + 2 * var(--swui-metrics-spacing))",
-        children: /* @__PURE__ */ n(q, { onClick: s })
+        children: /* @__PURE__ */ e(ge, { onClick: s })
       }
     )
   ] });
-}, ne = (e, t) => {
-  if (!(!e && t === "standard"))
+}, Bn = (n, t) => {
+  if (!(!n && t === "standard"))
     return "--lhds-color-ui-50";
-}, ee = "_notification_1hao0_1", te = "_body_1hao0_7", re = "_standard_1hao0_13", ie = "_unread_1hao0_14", oe = "_danger_1hao0_19", w = {
-  notification: ee,
-  body: te,
-  standard: re,
-  unread: ie,
-  danger: oe
-}, Ee = ({
-  variant: e = "standard",
+}, kn = "_notification_1hao0_1", In = "_body_1hao0_7", Sn = "_standard_1hao0_13", Nn = "_unread_1hao0_14", Mn = "_danger_1hao0_19", W = {
+  notification: kn,
+  body: In,
+  standard: Sn,
+  unread: Nn,
+  danger: Mn
+}, St = ({
+  variant: n = "standard",
   children: t,
-  unread: r,
-  ...i
-}) => /* @__PURE__ */ o(
+  unread: i,
+  ...o
+}) => /* @__PURE__ */ r(
   "div",
   {
-    className: p(
-      w.notification,
-      w[e],
-      r && w.unread
+    className: v(
+      W.notification,
+      W[n],
+      i && W.unread
     ),
     children: [
-      /* @__PURE__ */ n(Y, { ...i, unread: r, variant: e }),
-      t && /* @__PURE__ */ n(h, { className: w.body, children: t })
+      /* @__PURE__ */ e(we, { ...o, unread: i, variant: n }),
+      t && /* @__PURE__ */ e(p, { className: W.body, children: t })
     ]
   }
-), ae = "_notificationList_1rkvu_1", le = {
-  notificationList: ae
-}, qe = ({
-  children: e
-}) => /* @__PURE__ */ o("div", { className: le.notificationList, children: [
-  e,
-  /* @__PURE__ */ n("div", {})
-] }), ce = "_clickable_1ijxc_1", se = "_nonClickable_1ijxc_27", R = {
-  clickable: ce,
-  nonClickable: se
-}, Oe = ({
-  onClick: e,
+), Rn = "_notificationList_1rkvu_1", zn = {
+  notificationList: Rn
+}, Nt = ({
+  children: n
+}) => /* @__PURE__ */ r("div", { className: zn.notificationList, children: [
+  n,
+  /* @__PURE__ */ e("div", {})
+] }), jn = "_clickable_1ijxc_1", Fn = "_nonClickable_1ijxc_27", V = {
+  clickable: jn,
+  nonClickable: Fn
+}, Mt = ({
+  onClick: n,
   onClickAriaLabel: t,
-  children: r,
-  width: i = 264,
-  maxWidth: a,
-  ...l
-}) => /* @__PURE__ */ o(
+  children: i,
+  width: o = 264,
+  maxWidth: l,
+  ...a
+}) => /* @__PURE__ */ r(
   d,
   {
     borderRadius: 8,
-    background: b("--lhds-color-ui-50"),
+    background: m("--lhds-color-ui-50"),
     shadow: "popover",
-    width: i,
-    maxWidth: a,
+    width: o,
+    maxWidth: l,
     role: "alert",
     position: "relative",
     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 })
+      /* @__PURE__ */ e(d, { className: v({ [V.nonClickable]: n }), children: /* @__PURE__ */ e(we, { ...a }) }),
+      i && /* @__PURE__ */ r(d, { indent: 3, className: v({ [V.nonClickable]: n }), children: [
+        i,
+        /* @__PURE__ */ e(x, { num: 2 })
       ] }),
-      e && /* @__PURE__ */ n(
+      n && /* @__PURE__ */ e(
         "button",
         {
-          onClick: e,
-          className: R.clickable,
+          onClick: n,
+          className: V.clickable,
           "aria-label": t
         }
       )
     ]
   }
-), de = A(
-  ({ contentLeft: e, contentRight: t, collapsed: r = !1, ...i }, a) => /* @__PURE__ */ n(
-    L,
+), Pn = ee(
+  ({ contentLeft: n, contentRight: t, collapsed: i = !1, ...o }, l) => /* @__PURE__ */ e(
+    T,
     {
-      ref: a,
+      ref: l,
       expandable: !0,
-      expanded: !r,
-      selected: !r,
-      left: e,
+      expanded: !i,
+      selected: !i,
+      left: n,
       right: t,
-      ...i
+      ...o
     }
   )
-), Xe = ({
-  children: e
-}) => /* @__PURE__ */ n(h, { gap: 1, children: e }), Je = ({
-  value: e,
+), Rt = ({
+  children: n
+}) => /* @__PURE__ */ e(p, { gap: 1, children: n }), zt = ({
+  value: n,
   onValueChange: t,
-  onChange: r,
-  indeterminate: i,
-  checkboxDisabled: a,
-  ...l
-}) => /* @__PURE__ */ n(
-  de,
+  onChange: i,
+  indeterminate: o,
+  checkboxDisabled: l,
+  ...a
+}) => /* @__PURE__ */ e(
+  Pn,
   {
-    contentLeft: /* @__PURE__ */ n(
-      V,
+    contentLeft: /* @__PURE__ */ e(
+      ye,
       {
-        value: e,
-        indeterminate: i,
+        value: n,
+        indeterminate: o,
         onValueChange: t,
-        onChange: r,
-        disabled: a,
+        onChange: i,
+        disabled: l,
         onClick: (s) => s.stopPropagation()
       }
     ),
-    ...l
+    ...a
   }
-), ue = "_sidebarMenuCollapsibleGroupBox_ikek9_1", he = {
-  sidebarMenuCollapsibleGroupBox: ue
-}, pe = ({ children: e }) => /* @__PURE__ */ n("div", { className: he.sidebarMenuCollapsibleGroupBox, children: e }), Ke = ({ children: e }) => /* @__PURE__ */ n(d, { spacing: !0, indent: !0, children: /* @__PURE__ */ n(f, { variant: "overline", size: "smaller", children: e }) }), Qe = ({ text: e = "No content" }) => /* @__PURE__ */ o(h, { indent: !0, spacing: !0, flex: 1, alignItems: "center", children: [
-  /* @__PURE__ */ n(mn, { icon: fn, color: b("--lhds-color-ui-500") }),
-  /* @__PURE__ */ n(m, {}),
-  /* @__PURE__ */ n(f, { size: "small", color: b("--lhds-color-ui-500"), children: e })
-] }), ge = ({
-  text: e,
+), An = "_sidebarMenuCollapsibleGroupBox_ikek9_1", $n = {
+  sidebarMenuCollapsibleGroupBox: An
+}, Ln = ({ children: n }) => /* @__PURE__ */ e("div", { className: $n.sidebarMenuCollapsibleGroupBox, children: n }), jt = ({ children: n }) => /* @__PURE__ */ e(d, { spacing: !0, indent: !0, children: /* @__PURE__ */ e(f, { variant: "overline", size: "smaller", children: n }) }), Ft = ({ text: n = "No content" }) => /* @__PURE__ */ r(p, { indent: !0, spacing: !0, flex: 1, alignItems: "center", children: [
+  /* @__PURE__ */ e(X, { icon: ze, color: m("--lhds-color-ui-500") }),
+  /* @__PURE__ */ e(x, {}),
+  /* @__PURE__ */ e(f, { size: "small", color: m("--lhds-color-ui-500"), children: n })
+] }), Dn = ({
+  text: n,
   heading: t,
-  children: r,
-  buttons: i,
-  icon: a = Bn,
-  headingLevel: l = "h3",
+  children: i,
+  buttons: o,
+  icon: l = Pe,
+  headingLevel: a = "h3",
   ...s
 }) => {
-  const u = !e && !t ? "Something unexpected happened." : e;
-  return /* @__PURE__ */ n(bn, { ...s, children: /* @__PURE__ */ n(_n, { 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" })
+  const u = !n && !t ? "Something unexpected happened." : n;
+  return /* @__PURE__ */ e(je, { ...s, children: /* @__PURE__ */ e(Fe, { children: /* @__PURE__ */ r(p, { spacing: 1, gap: 3, alignItems: "center", children: [
+    /* @__PURE__ */ r(p, { alignItems: "center", children: [
+      /* @__PURE__ */ e(x, { num: 1 }),
+      /* @__PURE__ */ e(G, { icon: l, size: "xl" })
     ] }),
-    t && /* @__PURE__ */ n(M, { as: l, children: t }),
-    u && /* @__PURE__ */ n(f, { children: u }),
-    r,
-    i && /* @__PURE__ */ o(d, { children: [
-      /* @__PURE__ */ n(m, { num: 2 }),
-      i
+    t && /* @__PURE__ */ e(z, { as: a, children: t }),
+    u && /* @__PURE__ */ e(f, { children: u }),
+    i,
+    o && /* @__PURE__ */ r(d, { children: [
+      /* @__PURE__ */ e(x, { num: 2 }),
+      o
     ] })
   ] }) }) });
-}, Ve = (e) => /* @__PURE__ */ n(
+}, Pt = (n) => /* @__PURE__ */ e(
   d,
   {
     width: "100%",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
-    children: /* @__PURE__ */ n(ge, { ...e })
+    children: /* @__PURE__ */ e(Dn, { ...n })
   }
-), me = ({
-  text: e = "Loading..."
-}) => /* @__PURE__ */ o(d, { alignItems: "center", children: [
-  /* @__PURE__ */ n(vn, { size: "small" }),
-  /* @__PURE__ */ n(m, { num: 4 }),
-  /* @__PURE__ */ n(M, { variant: "h4", children: e })
-] }), Ye = (e) => /* @__PURE__ */ n(
+), Wn = ({
+  text: n = "Loading..."
+}) => /* @__PURE__ */ r(d, { alignItems: "center", children: [
+  /* @__PURE__ */ e(J, { size: "small" }),
+  /* @__PURE__ */ e(x, { num: 4 }),
+  /* @__PURE__ */ e(z, { variant: "h4", children: n })
+] }), At = (n) => /* @__PURE__ */ e(
   d,
   {
     width: "100%",
     height: "100%",
     justifyContent: "center",
     alignItems: "center",
-    children: /* @__PURE__ */ n(me, { ...e })
+    children: /* @__PURE__ */ e(Wn, { ...n })
   }
-), Ze = ({
-  renderBreadCrumbs: e,
+), $t = ({
+  renderBreadCrumbs: n,
   renderPageHeading: t,
-  renderTabs: r,
-  children: i
-}) => /* @__PURE__ */ o(d, { shadow: "bottom", background: b("--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()
+  renderTabs: i,
+  children: o
+}) => /* @__PURE__ */ r(d, { shadow: "bottom", background: m("--lhds-color-ui-50"), gap: 2, children: [
+  /* @__PURE__ */ r(d, { indent: 3, children: [
+    n && /* @__PURE__ */ r(c, { spacing: 1, alignItems: "center", children: [
+      /* @__PURE__ */ e(c, { width: "64px", height: "16px" }),
+      n()
     ] }),
     t == null ? void 0 : t(),
-    r && /* @__PURE__ */ n(m, {}),
-    r == null ? void 0 : r()
+    i && /* @__PURE__ */ e(x, {}),
+    i == null ? void 0 : i()
   ] }),
-  i
-] }), nt = (e) => /* @__PURE__ */ n(c, { indent: 3, spacing: !0, ...e }), et = ({
-  icon: e,
+  o
+] }), Lt = (n) => /* @__PURE__ */ e(c, { indent: 3, spacing: !0, ...n }), Dt = ({
+  icon: n,
   heading: t,
-  headingLevel: r = "h2",
-  contentLeft: i,
-  contentRight: a
-}) => /* @__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 })
+  headingLevel: i = "h2",
+  contentLeft: o,
+  contentRight: l
+}) => /* @__PURE__ */ r(c, { alignItems: "center", gap: 2, height: "64px", children: [
+  /* @__PURE__ */ r(c, { alignItems: "center", children: [
+    /* @__PURE__ */ e(c, { width: "64px", alignItems: "center", children: n && /* @__PURE__ */ e(G, { icon: n }) }),
+    /* @__PURE__ */ e(z, { variant: "h3", as: i, children: t })
   ] }),
-  /* @__PURE__ */ n(c, { alignItems: "center", children: i }),
-  /* @__PURE__ */ n(c, { style: { marginLeft: "auto" }, alignItems: "center", children: a })
-] }), fe = "_sidebarMenu_1bx5w_1", be = "_sidebarItems_1bx5w_38", _e = "_scrollContainer_1bx5w_48", F = {
-  sidebarMenu: fe,
-  sidebarItems: be,
-  scrollContainer: _e
-}, Be = "_stenaFlag_108h7_1", ve = {
-  stenaFlag: Be
-}, Ce = ({ onClick: e }) => /* @__PURE__ */ o(h, { background: b("--lhds-color-ui-50"), children: [
-  /* @__PURE__ */ n(m, {}),
-  /* @__PURE__ */ o(
+  /* @__PURE__ */ e(c, { alignItems: "center", children: o }),
+  /* @__PURE__ */ e(c, { style: { marginLeft: "auto" }, alignItems: "center", children: l })
+] }), Hn = "_sidebarMenu_1bx5w_1", Un = "_sidebarItems_1bx5w_38", qn = "_scrollContainer_1bx5w_48", K = {
+  sidebarMenu: Hn,
+  sidebarItems: Un,
+  scrollContainer: qn
+}, En = "_stenaFlag_108h7_1", Gn = {
+  stenaFlag: En
+}, On = ({ onClick: n }) => /* @__PURE__ */ r(p, { background: m("--lhds-color-ui-50"), children: [
+  /* @__PURE__ */ e(x, {}),
+  /* @__PURE__ */ r(
     c,
     {
       justifyContent: "space-between",
@@ -532,61 +539,61 @@ const $ = ({
       indent: 1,
       minHeight: "48px",
       children: [
-        /* @__PURE__ */ n(q, { onClick: e }),
-        /* @__PURE__ */ n(Cn, { className: ve.stenaFlag })
+        /* @__PURE__ */ e(ge, { onClick: n }),
+        /* @__PURE__ */ e(Ae, { className: Gn.stenaFlag })
       ]
     }
   )
-] }), xe = ({
-  isPinned: e,
+] }), Vn = ({
+  isPinned: n,
   onClick: t,
-  label: r
-}) => /* @__PURE__ */ n(L, { onClick: t, label: r ?? (e ? "Unpin menu" : "Pin menu"), leftIcon: e ? O : xn }), tt = ({
-  className: e,
+  label: i
+}) => /* @__PURE__ */ e(T, { onClick: t, label: i ?? (n ? "Unpin menu" : "Pin menu"), leftIcon: n ? be : $e }), Wt = ({
+  className: n,
   children: t,
-  onCloseClick: r,
-  pinButtonVisible: i,
-  onClickPinButton: a,
-  bottomItems: l,
+  onCloseClick: i,
+  pinButtonVisible: o,
+  onClickPinButton: l,
+  bottomItems: a,
   isPinned: s,
   ...u
-}) => /* @__PURE__ */ o(d, { ...u, className: p(F.sidebarMenu, e), children: [
-  /* @__PURE__ */ n(Ce, { onClick: r }),
-  /* @__PURE__ */ n(d, { className: F.scrollContainer, children: /* @__PURE__ */ o(
-    h,
+}) => /* @__PURE__ */ r(d, { ...u, className: v(K.sidebarMenu, n), children: [
+  /* @__PURE__ */ e(On, { onClick: i }),
+  /* @__PURE__ */ e(d, { className: K.scrollContainer, children: /* @__PURE__ */ r(
+    p,
     {
-      className: F.sidebarItems,
+      className: K.sidebarItems,
       justifyContent: "space-between",
       flex: 1,
       gap: 1,
       indent: 1,
       children: [
-        /* @__PURE__ */ n(h, { gap: 1, children: t }),
-        (l || i) && /* @__PURE__ */ o(h, { gap: 1, children: [
-          l,
-          i && /* @__PURE__ */ n(
-            xe,
+        /* @__PURE__ */ e(p, { gap: 1, children: t }),
+        (a || o) && /* @__PURE__ */ r(p, { gap: 1, children: [
+          a,
+          o && /* @__PURE__ */ e(
+            Vn,
             {
               isPinned: s,
-              onClick: a
+              onClick: l
             }
           ),
-          /* @__PURE__ */ n(m, {})
+          /* @__PURE__ */ e(x, {})
         ] })
       ]
     }
   ) })
-] }), N = Mn(!1), z = () => Sn(N), ye = ({
-  label: e,
+] }), q = Ge(!1), ie = () => Oe(q), Kn = ({
+  label: n,
   ...t
-}) => /* @__PURE__ */ n(Q, { label: e, placement: "right", appendTo: document.body, children: /* @__PURE__ */ n(P, { ...t }) }), rt = ({
-  closeButtonVisible: e,
+}) => /* @__PURE__ */ e(_e, { label: n, placement: "right", appendTo: document.body, children: /* @__PURE__ */ e(Y, { ...t }) }), Ht = ({
+  closeButtonVisible: n,
   onClickCloseButton: t,
-  onClickMenuButton: r,
-  children: i,
-  bottomItems: a,
-  closeButtonTitle: l = "Unpin menu"
-}) => /* @__PURE__ */ o(
+  onClickMenuButton: i,
+  children: o,
+  bottomItems: l,
+  closeButtonTitle: a = "Unpin menu"
+}) => /* @__PURE__ */ r(
   d,
   {
     position: "fixed",
@@ -597,18 +604,18 @@ const $ = ({
     spacing: 1,
     gap: 1,
     shadow: "popover",
-    background: b("--lhds-color-ui-50"),
+    background: m("--lhds-color-ui-50"),
     children: [
-      /* @__PURE__ */ n(P, { onClick: r, icon: E }),
-      /* @__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(
-            ye,
+      /* @__PURE__ */ e(Y, { onClick: i, icon: me }),
+      /* @__PURE__ */ r(p, { justifyContent: "space-between", flex: 1, gap: 1, children: [
+        /* @__PURE__ */ e(p, { gap: 1, children: /* @__PURE__ */ e(q.Provider, { value: !0, children: o }) }),
+        /* @__PURE__ */ e(p, { gap: 1, children: (l || n) && /* @__PURE__ */ r(q.Provider, { value: !0, children: [
+          l,
+          n && /* @__PURE__ */ e(
+            Kn,
             {
-              icon: O,
-              label: l,
+              icon: be,
+              label: a,
               onClick: t
             }
           )
@@ -616,70 +623,70 @@ const $ = ({
       ] })
     ]
   }
-), Ie = ({
-  label: e
-}) => z() ? null : /* @__PURE__ */ o(d, { height: "32px", justifyContent: "center", indent: 1, children: [
-  /* @__PURE__ */ n(m, {}),
-  /* @__PURE__ */ n(f, { variant: "overline", size: "smaller", children: e })
-] }), we = ({
-  label: e,
+), Zn = ({
+  label: n
+}) => ie() ? null : /* @__PURE__ */ r(d, { height: "32px", justifyContent: "center", indent: 1, children: [
+  /* @__PURE__ */ e(x, {}),
+  /* @__PURE__ */ e(f, { variant: "overline", size: "smaller", children: n })
+] }), Qn = ({
+  label: n,
   leftIcon: t,
-  ...r
-}) => t == null ? null : /* @__PURE__ */ n(Q, { label: e, placement: "right", children: /* @__PURE__ */ n(yn, { icon: t, ...r }) }), it = (e) => z() ? /* @__PURE__ */ n(we, { ...e }) : /* @__PURE__ */ n(In, { ...e }), Ne = ({
-  children: e,
+  ...i
+}) => t == null ? null : /* @__PURE__ */ e(_e, { label: n, placement: "right", children: /* @__PURE__ */ e(Le, { icon: t, ...i }) }), Ut = (n) => ie() ? /* @__PURE__ */ e(Qn, { ...n }) : /* @__PURE__ */ e(De, { ...n }), Tn = ({
+  children: n,
   label: t,
-  icon: r,
-  popupMinWidth: i = "200px"
-}) => /* @__PURE__ */ n(
-  K,
+  icon: i,
+  popupMinWidth: o = "200px"
+}) => /* @__PURE__ */ e(
+  Ce,
   {
-    renderTrigger: (a) => /* @__PURE__ */ n(P, { icon: r, ...a }),
+    renderTrigger: (l) => /* @__PURE__ */ e(Y, { icon: i, ...l }),
     placement: "right-start",
     trigger: ["hover", "focus"],
     disablePadding: !0,
-    children: /* @__PURE__ */ n(
+    children: /* @__PURE__ */ e(
       d,
       {
-        minWidth: i,
+        minWidth: o,
         shadow: "popover",
         spacing: 1,
         indent: 1,
         gap: 2,
-        children: /* @__PURE__ */ o(N.Provider, { value: !1, children: [
-          /* @__PURE__ */ n(Ie, { label: t }),
-          e
+        children: /* @__PURE__ */ r(q.Provider, { value: !1, children: [
+          /* @__PURE__ */ e(Zn, { label: t }),
+          n
         ] })
       }
     )
   }
-), ot = ({
-  children: e,
+), qt = ({
+  children: n,
   label: t,
-  leftIcon: r,
-  className: i,
-  initialExpand: a = !1
+  leftIcon: i,
+  className: o,
+  initialExpand: l = !1
 }) => {
-  const [l, s] = Rn(a);
-  return z() ? r == null ? null : /* @__PURE__ */ n(Ne, { label: t, icon: r, children: e }) : /* @__PURE__ */ n(
-    L,
+  const [a, s] = H(l);
+  return ie() ? i == null ? null : /* @__PURE__ */ e(Tn, { label: t, icon: i, children: n }) : /* @__PURE__ */ e(
+    T,
     {
       label: t,
-      onClick: () => s(!l),
-      leftIcon: r,
-      className: i,
+      onClick: () => s(!a),
+      leftIcon: i,
+      className: o,
       expandable: !0,
-      expanded: l,
-      selected: l,
-      children: /* @__PURE__ */ n(pe, { children: e })
+      expanded: a,
+      selected: a,
+      children: /* @__PURE__ */ e(Ln, { children: n })
     }
   );
-}, at = (e) => /* @__PURE__ */ n(
-  Fn,
+}, Et = (n) => /* @__PURE__ */ e(
+  Ve,
   {
-    color: b("--lhds-color-ui-400"),
-    ...e
+    color: m("--lhds-color-ui-400"),
+    ...n
   }
-), lt = ({ numItemsSelected: e, label: t, afterLabelContent: r, rightContent: i }) => /* @__PURE__ */ o(
+), Gt = ({ numItemsSelected: n, label: t, afterLabelContent: i, rightContent: o }) => /* @__PURE__ */ r(
   c,
   {
     indent: 3,
@@ -688,64 +695,529 @@ const $ = ({
     minHeight: "56px",
     justifyContent: "space-between",
     alignItems: "center",
-    background: b("--silver-lighter"),
+    background: m("--silver-lighter"),
     flex: 1,
     borderRadius: "var(--swui-border-radius)",
     children: [
-      /* @__PURE__ */ o(c, { alignItems: "center", gap: 2, children: [
-        e != null || t != null ? /* @__PURE__ */ n(c, { alignItems: "center", children: e != null ? /* @__PURE__ */ o(B, { children: [
-          /* @__PURE__ */ n(f, { children: e }),
-          /* @__PURE__ */ n(m, {}),
-          /* @__PURE__ */ o(f, { children: [
+      /* @__PURE__ */ r(c, { alignItems: "center", gap: 2, children: [
+        n != null || t != null ? /* @__PURE__ */ e(c, { alignItems: "center", children: n != null ? /* @__PURE__ */ r(M, { children: [
+          /* @__PURE__ */ e(f, { children: n }),
+          /* @__PURE__ */ e(x, {}),
+          /* @__PURE__ */ r(f, { children: [
             "item",
-            e === 1 ? "" : "s",
+            n === 1 ? "" : "s",
             " selected"
           ] })
-        ] }) : t != null ? /* @__PURE__ */ n(B, { children: typeof t == "string" ? /* @__PURE__ */ n(f, { children: t }) : t }) : null }) : null,
-        r && /* @__PURE__ */ n(c, { children: r })
+        ] }) : t != null ? /* @__PURE__ */ e(M, { children: typeof t == "string" ? /* @__PURE__ */ e(f, { children: t }) : t }) : null }) : null,
+        i && /* @__PURE__ */ e(c, { children: i })
       ] }),
-      /* @__PURE__ */ n(c, { gap: 2, children: i })
+      /* @__PURE__ */ e(c, { gap: 2, children: o })
     ]
   }
-), ct = ({ children: e }) => /* @__PURE__ */ n(c, { spacing: 0.5, indent: 0.5, flex: 1, children: e });
+), Ot = ({ children: n }) => /* @__PURE__ */ e(c, { spacing: 0.5, indent: 0.5, flex: 1, children: n }), Xn = "_productCard_19x6b_1", Jn = {
+  productCard: Xn
+}, Vt = ({
+  renderSelectedProductCard: n,
+  renderEditButton: t,
+  children: i,
+  loading: o,
+  shadow: l,
+  ...a
+}) => /* @__PURE__ */ r(
+  p,
+  {
+    "data-comp": "ProductCard",
+    className: Jn.productCard,
+    shadow: l ? "box" : void 0,
+    background: m("--moln"),
+    borderRadius: "24px",
+    overflow: "hidden",
+    position: o ? "relative" : void 0,
+    ...ne(a),
+    children: [
+      n == null ? void 0 : n(),
+      /* @__PURE__ */ e(p, { gap: 2, children: i }),
+      t && /* @__PURE__ */ r(p, { children: [
+        /* @__PURE__ */ e(c, { indent: 2, justifyContent: "flex-end", children: t() }),
+        /* @__PURE__ */ e(Ke, {})
+      ] }),
+      o && /* @__PURE__ */ e(
+        d,
+        {
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          position: "absolute",
+          justifyContent: "center",
+          alignItems: "center",
+          background: "rgba(255, 255, 255, 0.7)",
+          children: /* @__PURE__ */ e(J, {})
+        }
+      )
+    ]
+  }
+), Yn = ({ children: n }) => /* @__PURE__ */ e(f, { variant: "bold", style: { fontSize: "2.0rem" }, children: n }), Kt = ({
+  description: n,
+  subDescription: t,
+  descriptionTags: i,
+  capacityTag: o,
+  offerCodeTag: l,
+  priceText: a,
+  title: s,
+  subTitle: u,
+  renderImage: g,
+  children: b,
+  headingLevel: C
+}) => {
+  const B = i == null ? !1 : Array.isArray(i) ? i.length > 0 : !Ze(i);
+  return /* @__PURE__ */ r(p, { children: [
+    g == null ? void 0 : g(),
+    /* @__PURE__ */ r(d, { gap: 2, spacing: 4, indent: 4, background: m("--moln"), children: [
+      /* @__PURE__ */ r(d, { gap: 0.5, children: [
+        /* @__PURE__ */ r(
+          c,
+          {
+            justifyContent: "space-between",
+            alignItems: "flex-start",
+            gap: 2,
+            children: [
+              /* @__PURE__ */ e(z, { variant: "h3", as: C, children: s }),
+              /* @__PURE__ */ r(c, { gap: 2, children: [
+                l && /* @__PURE__ */ e(p, { justifyContent: "center", children: l }),
+                /* @__PURE__ */ e(Yn, { children: a })
+              ] })
+            ]
+          }
+        ),
+        u && /* @__PURE__ */ e(f, { variant: "bold", color: m("--silver-dark"), children: u })
+      ] }),
+      (B || o) && /* @__PURE__ */ r(p, { children: [
+        /* @__PURE__ */ r(c, { gap: 1, flexWrap: "wrap", children: [
+          i,
+          o && /* @__PURE__ */ e(We, { label: o, variant: "passive" })
+        ] }),
+        /* @__PURE__ */ e(x, {})
+      ] }),
+      n && /* @__PURE__ */ r(p, { children: [
+        /* @__PURE__ */ e(f, { children: n }),
+        /* @__PURE__ */ e(x, {})
+      ] }),
+      t && /* @__PURE__ */ r(p, { children: [
+        /* @__PURE__ */ e(f, { children: t }),
+        /* @__PURE__ */ e(x, {})
+      ] }),
+      b
+    ] })
+  ] });
+}, Zt = ({ renderImage: n }) => /* @__PURE__ */ r(p, { children: [
+  n == null ? void 0 : n(),
+  /* @__PURE__ */ r(d, { gap: 3, spacing: 4, indent: 4, background: m("--moln"), children: [
+    /* @__PURE__ */ e(d, { gap: 0.5, children: /* @__PURE__ */ e(
+      c,
+      {
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        gap: 2,
+        children: /* @__PURE__ */ e(
+          R,
+          {
+            width: "50px",
+            height: "2.8rem",
+            borderRadius: "8px"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(R, { width: "180px", height: "2.0rem", borderRadius: "8px" }) }),
+    /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(R, { width: "150px", height: "1.4rem", borderRadius: "8px" }) }),
+    /* @__PURE__ */ e(x, {})
+  ] })
+] }), Qt = ({
+  label: n,
+  children: t
+}) => /* @__PURE__ */ r(d, { background: m("--mussla"), indent: 2, spacing: 2, gap: 2, children: [
+  /* @__PURE__ */ e(z, { variant: "h3", as: "h2", color: "white", children: n }),
+  t
+] }), Tt = ({
+  title: n,
+  variant: t = "normal",
+  loading: i,
+  iconLeft: o,
+  compactIconLeft: l,
+  renderButton: a,
+  renderOfferCodeTag: s,
+  renderMandatoryTag: u,
+  renderContentLeftOfButton: g,
+  children: b,
+  ...C
+}) => {
+  const { fontSizeRatio: B } = Qe(), k = N({
+    query: "(max-width: 460px)"
+  }), w = N({
+    query: "(max-width: 360px)"
+  }) || k && B > 1.2, _ = i ? "normal" : t, j = nt(_), F = m("--moln"), P = et(_);
+  return /* @__PURE__ */ r(
+    d,
+    {
+      "data-comp": "ProductSummaryCard",
+      borderRadius: "16px",
+      shadow: "box",
+      overflow: "hidden",
+      position: i ? "relative" : void 0,
+      ...ne(C),
+      children: [
+        /* @__PURE__ */ r(c, { flex: 1, children: [
+          !w && /* @__PURE__ */ e(d, { flex: 2, justifyContent: "center", background: j, children: o && /* @__PURE__ */ e(X, { color: P, icon: o, size: 73 }) }),
+          /* @__PURE__ */ e(d, { flex: 4, indent: 2, spacing: 2, background: F, children: /* @__PURE__ */ r(p, { gap: 2, children: [
+            n && /* @__PURE__ */ r(c, { justifyContent: "space-between", children: [
+              /* @__PURE__ */ r(c, { gap: 2, alignItems: "center", children: [
+                w && l && /* @__PURE__ */ e(G, { icon: l, size: "medium" }),
+                /* @__PURE__ */ e(f, { variant: "bold", size: "large", children: n })
+              ] }),
+              _ == "normal" && (s == null ? void 0 : s())
+            ] }),
+            /* @__PURE__ */ e(p, { style: { opacity: i ? 0 : void 0 }, children: b }),
+            u && /* @__PURE__ */ e(c, { style: { opacity: i ? 0 : void 0 }, children: u() }),
+            /* @__PURE__ */ e("div", {}),
+            /* @__PURE__ */ r(
+              c,
+              {
+                justifyContent: "space-between",
+                alignItems: "center",
+                gap: 2,
+                flexWrap: "wrap",
+                children: [
+                  (g == null ? void 0 : g()) ?? /* @__PURE__ */ e("div", {}),
+                  a == null ? void 0 : a()
+                ]
+              }
+            )
+          ] }) })
+        ] }),
+        i && /* @__PURE__ */ e(
+          d,
+          {
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0,
+            position: "absolute",
+            justifyContent: "center",
+            alignItems: "center",
+            background: "rgba(255, 255, 255, 0.7)",
+            children: /* @__PURE__ */ e(J, {})
+          }
+        )
+      ]
+    }
+  );
+}, et = (n) => {
+  switch (n) {
+    case "edit":
+      return m("--moln");
+    case "upgrade":
+      return m("--moln");
+    case "normal":
+      return m("--mussla");
+    default:
+      xe(n);
+  }
+}, nt = (n) => {
+  switch (n) {
+    case "edit":
+      return m("--mussla");
+    case "upgrade":
+      return m("--mussla");
+    case "normal":
+      return m("--silver-lighter");
+    default:
+      xe(n);
+  }
+}, Xt = ({ iconLeft: n, ...t }) => /* @__PURE__ */ e(
+  d,
+  {
+    borderRadius: "16px",
+    shadow: "box",
+    overflow: "hidden",
+    ...ne(t),
+    children: /* @__PURE__ */ r(c, { flex: 1, children: [
+      /* @__PURE__ */ e(
+        d,
+        {
+          flex: 2,
+          justifyContent: "center",
+          background: m("--silver-lighter"),
+          children: n && /* @__PURE__ */ e(X, { color: m("--mussla"), icon: n, size: 73 })
+        }
+      ),
+      /* @__PURE__ */ e(d, { flex: 4, indent: 2, spacing: 2, background: m("--moln"), children: /* @__PURE__ */ r(p, { gap: 2, children: [
+        /* @__PURE__ */ e(
+          R,
+          {
+            width: "180px",
+            height: "2.8rem",
+            borderRadius: "8px"
+          }
+        ),
+        /* @__PURE__ */ e(R, { width: "50px", height: "2.0rem", borderRadius: "8px" }),
+        /* @__PURE__ */ e(
+          R,
+          {
+            width: "150px",
+            height: "1.4rem",
+            borderRadius: "8px"
+          }
+        )
+      ] }) })
+    ] })
+  }
+), de = [
+  "small-mobile",
+  "mobile",
+  "tablet",
+  "tablet-wide",
+  "desktop"
+], Be = () => {
+  const n = N({
+    query: "(max-width: 768px)"
+  }), t = N({
+    query: "(max-width: 395px)"
+  }), i = N({
+    query: "(max-width: 1024px)"
+  }), o = N({
+    query: "(max-width: 1160px)"
+  });
+  return { deviceSize: t ? "small-mobile" : n ? "mobile" : i ? "tablet" : o ? "tablet-wide" : "desktop" };
+}, tt = (n, t) => n === t || de.indexOf(n) > de.indexOf(t), Jt = (n) => {
+  const { deviceSize: t } = Be();
+  return {
+    visible: U(
+      () => tt(t, n),
+      [t, n]
+    )
+  };
+}, Yt = ({
+  images: n,
+  altLabelPrevious: t,
+  altLabelZoomIn: i,
+  altLabelZoomOut: o,
+  altLabelNext: l,
+  altLabelClose: a
+}) => {
+  const s = Q(null), u = Q(null), { deviceSize: g } = Be(), b = g !== "mobile", [C, B] = H(!1), [k, S] = H(0), [w, _] = H(0), j = le(() => {
+    _(k), B(!0);
+  }, [k]), F = le(() => {
+    S(w), B(!1);
+  }, [w]), P = ({ index: h }) => S(h), O = ({ index: h }) => _(h), L = U(() => n.map(Z), [n]), A = U(
+    () => n.map(
+      (h) => h.fullscreenImage ? Z({
+        ...h.fullscreenImage,
+        description: h.description,
+        title: h.title
+      }) : Z(h)
+    ),
+    [n]
+  );
+  return /* @__PURE__ */ r(Te, { blockedKeys: "Escape", children: [
+    /* @__PURE__ */ e(
+      ae,
+      {
+        controller: { ref: s },
+        index: k,
+        slides: L,
+        plugins: [Je],
+        on: {
+          view: P,
+          click: j
+        },
+        carousel: {
+          padding: 0,
+          spacing: 0,
+          imageFit: "cover"
+        },
+        render: {
+          buttonPrev: () => n.length > 1 && /* @__PURE__ */ e(y, { className: "yarl__navigation_prev", children: /* @__PURE__ */ e(
+            I,
+            {
+              "aria-label": t,
+              leftIcon: re,
+              onClick: () => {
+                var h;
+                return (h = s.current) == null ? void 0 : h.prev();
+              }
+            }
+          ) }),
+          buttonNext: () => n.length > 1 && /* @__PURE__ */ e(y, { className: "yarl__navigation_next", children: /* @__PURE__ */ e(
+            I,
+            {
+              "aria-label": l,
+              leftIcon: oe,
+              onClick: () => {
+                var h;
+                return (h = s.current) == null ? void 0 : h.next();
+              }
+            }
+          ) })
+        },
+        styles: {
+          button: {
+            filter: "none"
+          }
+        },
+        inline: {
+          style: {
+            width: "100%",
+            maxWidth: "900px",
+            aspectRatio: "3 / 2",
+            margin: "0 auto"
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ e(
+      ae,
+      {
+        open: C,
+        close: F,
+        index: w,
+        plugins: [nn, en, Ye],
+        slides: A ?? L,
+        on: { view: O },
+        animation: { fade: 0 },
+        controller: {
+          closeOnPullDown: !0,
+          closeOnBackdropClick: !0,
+          ref: u
+        },
+        counter: {
+          container: {
+            style: {
+              filter: "none",
+              color: "white",
+              fontSize: "2.0rem",
+              fontFamily: "Stena Sans"
+            }
+          }
+        },
+        render: {
+          buttonZoom: (h) => b && /* @__PURE__ */ r(c, { gap: 1, indent: 2, children: [
+            /* @__PURE__ */ e(
+              I,
+              {
+                "aria-label": i,
+                leftIcon: He,
+                size: "large",
+                onClick: () => h.zoomIn()
+              }
+            ),
+            /* @__PURE__ */ e(
+              I,
+              {
+                "aria-label": o,
+                leftIcon: Ue,
+                size: "large",
+                onClick: () => h.zoomOut()
+              }
+            )
+          ] }),
+          buttonPrev: () => n.length > 1 && b && /* @__PURE__ */ e(y, { num: 4, className: "yarl__navigation_prev", children: /* @__PURE__ */ e(
+            I,
+            {
+              "aria-label": t,
+              leftIcon: re,
+              size: "large",
+              onClick: () => {
+                var h;
+                return (h = u.current) == null ? void 0 : h.prev();
+              }
+            }
+          ) }),
+          buttonNext: () => n.length > 1 && b && /* @__PURE__ */ e(y, { num: 4, className: "yarl__navigation_next", children: /* @__PURE__ */ e(
+            I,
+            {
+              "aria-label": l,
+              leftIcon: oe,
+              size: "large",
+              onClick: () => {
+                var h;
+                return (h = u.current) == null ? void 0 : h.next();
+              }
+            }
+          ) }),
+          buttonClose: () => /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
+            pe,
+            {
+              variant: "danger",
+              "aria-label": a,
+              leftIcon: qe,
+              size: "large",
+              onClick: () => {
+                var h;
+                return (h = u.current) == null ? void 0 : h.close();
+              }
+            }
+          ) })
+        }
+      }
+    )
+  ] });
+}, Z = (n) => ({
+  src: n.url,
+  width: n.width,
+  height: n.height,
+  alt: n.description,
+  title: n.title,
+  description: n.description
+});
 export {
-  Ln as ActionMenuFlatButton,
-  Ae as ActionMenuPrimaryButton,
-  $e as ActionMenuSecondaryButton,
-  ze as CheckboxMenu,
-  de as Collapsible,
-  Qe as CollapsibleEmptyContent,
-  Ke as CollapsibleGroupHeading,
-  Xe as CollapsibleList,
-  Je as CollapsibleWithCheckbox,
-  ge as ErrorPanel,
-  Ve as ErrorScreen,
-  me as LoadingPanel,
-  Ye as LoadingScreen,
-  He as NavBar,
-  Tn as NavBarButton,
-  Ue as NavBarHeading,
-  De as NavBarNotificationButton,
-  Te as NavBarPopoverButton,
-  Ge as NavBarSearchField,
-  We as NavBarUserButton,
-  Ee as Notification,
-  Y as NotificationHeader,
-  qe as NotificationList,
-  Ze as PageHeader,
-  nt as PageHeaderRow,
-  et as PageHeading,
-  ct as SelectedItemsActionsPadding,
-  lt as SelectedItemsActionsPanel,
-  tt as SidebarMenu,
-  ot as SidebarMenuCollapsible,
-  pe as SidebarMenuCollapsibleGroupBox,
-  Ie as SidebarMenuHeading,
-  it as SidebarMenuLink,
-  at as SidebarMenuSeparator,
-  rt as SidebarRailMenu,
-  Oe as Toast,
-  Zn as UnreadDot,
-  ne as getIconBgColorFromVariant
+  tn as ActionMenuFlatButton,
+  xt as ActionMenuPrimaryButton,
+  vt as ActionMenuSecondaryButton,
+  Ct as CheckboxMenu,
+  Pn as Collapsible,
+  Ft as CollapsibleEmptyContent,
+  jt as CollapsibleGroupHeading,
+  Rt as CollapsibleList,
+  zt as CollapsibleWithCheckbox,
+  Dn as ErrorPanel,
+  Pt as ErrorScreen,
+  Yt as ImageCarousel,
+  Wn as LoadingPanel,
+  At as LoadingScreen,
+  _t as NavBar,
+  dn as NavBarButton,
+  yt as NavBarHeading,
+  Bt as NavBarNotificationButton,
+  wt as NavBarPopoverButton,
+  kt as NavBarSearchField,
+  It as NavBarUserButton,
+  St as Notification,
+  we as NotificationHeader,
+  Nt as NotificationList,
+  $t as PageHeader,
+  Lt as PageHeaderRow,
+  Dt as PageHeading,
+  Vt as ProductCard,
+  Kt as ProductCardContentItem,
+  Zt as ProductCardContentItemSkeletor,
+  Tt as ProductSummaryCard,
+  Xt as ProductSummaryCardSkeletor,
+  Ot as SelectedItemsActionsPadding,
+  Gt as SelectedItemsActionsPanel,
+  Qt as SelectedProductCard,
+  Wt as SidebarMenu,
+  qt as SidebarMenuCollapsible,
+  Ln as SidebarMenuCollapsibleGroupBox,
+  Zn as SidebarMenuHeading,
+  Ut as SidebarMenuLink,
+  Et as SidebarMenuSeparator,
+  Ht as SidebarRailMenu,
+  Mt as Toast,
+  wn as UnreadDot,
+  Bn as getIconBgColorFromVariant,
+  tt as isDeviceSameOrLarger,
+  Be as useDeviceSize,
+  Jt as useLayoutVisibility
 };
 //# sourceMappingURL=index.es.js.map