@stenajs-webui/panels 24.0.1 → 25.1.0

package/dist/index.es.js

@@ -1,11 +1,11 @@
 import { jsx as e, Fragment as z, jsxs as i } from "react/jsx-runtime";
-import { ActionMenu as re, ActionMenuContext as Ce, stenaAngleDown as oe, PrimaryButton as ie, SecondaryButton as R, FlatButton as O, stenaHamburger as le, FlatButtonLink as Be, BaseButton as we, stenaBellFilled as ye, TextInputButton as Ie, stenaTimes as _e, stenaUserCircle as Se, MenuButton as D, Icon as K, stenaMail as ke, Card as Re, CardBody as Me, CircledIcon as q, stenaTripFerryXl as Ne, ScreenSpinner as Pe, CloseButton as Fe, StenaFlag as ze, stenaAngleLeftDouble as ae, stenaPin as je, IconMenuButton as V, IconMenuButtonLink as Le, MenuButtonLink as Ae, Spinner as ce, Tag as Te, ShimmerBox as N, stenaTimesThick as $e, stenaAngleRight as se, stenaAngleLeft as de, stenaSearchPlus as Oe, stenaSearchMinus as qe } from "@stenajs-webui/elements";
+import { ActionMenu as re, ActionMenuContext as ve, stenaAngleDown as oe, PrimaryButton as ie, SecondaryButton as R, FlatButton as O, stenaHamburger as le, FlatButtonLink as Be, BaseButton as ye, stenaBellFilled as we, TextInputButton as Ie, stenaTimes as _e, stenaUserCircle as Se, MenuButton as D, Icon as K, stenaMail as ke, Card as Re, CardBody as Me, CircledIcon as q, stenaTripFerryXl as Ne, ScreenSpinner as Pe, CloseButton as Fe, StenaFlag as ze, stenaAngleLeftDouble as ae, stenaPin as je, IconMenuButton as V, IconMenuButtonLink as Le, MenuButtonLink as Ae, Spinner as ce, Tag as $e, ShimmerBox as N, stenaTimesThick as Te, stenaAngleRight as se, stenaAngleLeft as de, stenaSearchPlus as Oe, stenaSearchMinus as qe } from "@stenajs-webui/elements";
 import * as Ee from "react";
-import { useRef as Z, useMemo as j, forwardRef as E, createContext as He, useContext as We, useState as T, useCallback as J, useEffect as Ue } from "react";
-import { useBoolean as ue, Column as u, Row as c, Indent as w, Heading as P, Box as d, Text as x, Space as B, getDataProps as L, SeparatorLine as Ge, pluralFormatter as De, selectPluralRule as Ke, Spacing as Ve, isEmptyFragment as Ze, useAccessibleFontSizeContext as Qe, exhaustSwitchCaseElseThrow as he, BlockKeyboardEvents as Xe } from "@stenajs-webui/core";
+import { useRef as Z, useMemo as j, forwardRef as E, createContext as He, useContext as We, useState as $, useCallback as J, useEffect as Ue } from "react";
+import { useBoolean as ue, Column as u, Row as c, Indent as y, Heading as P, Box as d, Text as C, Space as B, getDataProps as L, SeparatorLine as Ge, pluralFormatter as De, selectPluralRule as Ke, Spacing as Ve, isEmptyFragment as Ze, useAccessibleFontSizeContext as Qe, exhaustSwitchCaseElseThrow as he, BlockKeyboardEvents as Xe } from "@stenajs-webui/core";
 import { ControlledPopover as pe, Popover as me, Tooltip as ge } from "@stenajs-webui/tooltip";
 import { Checkbox as be, TextInput as Je } from "@stenajs-webui/forms";
-import y from "classnames";
+import w from "classnames";
 import { cssColor as p } from "@stenajs-webui/theme";
 import { useMediaQuery as M } from "react-responsive";
 import fe from "yet-another-react-lightbox";
@@ -25,10 +25,10 @@ import './index.css';const Q = ({
   buttonRef: g,
   appendTo: b,
   zIndex: f,
-  disableTrapFocus: v = !1,
+  disableTrapFocus: x = !1,
   ...I
 }) => {
-  const [S, k, C, _] = ue(!1), m = Z(null), H = g ?? m, W = j(() => ({ open: k, close: C }), [k, C]), ve = (U) => {
+  const [S, k, v, _] = ue(!1), m = Z(null), H = g ?? m, W = j(() => ({ open: k, close: v }), [k, v]), xe = (U) => {
     s?.(U), _();
   };
   return /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(
@@ -40,14 +40,14 @@ import './index.css';const Q = ({
           rightIcon: h ? void 0 : o,
           ...I,
           ref: H,
-          onClick: ve,
+          onClick: xe,
           ...U
         }
       ),
       hideArrow: !0,
       disablePadding: !0,
       open: S,
-      onRequestClose: C,
+      onRequestClose: v,
       placement: t,
       appendTo: b,
       zIndex: f,
@@ -56,13 +56,13 @@ import './index.css';const Q = ({
         {
           width: l,
           top: a,
-          trapFocus: !v,
-          children: /* @__PURE__ */ e(Ce.Provider, { value: W, children: n(C) })
+          trapFocus: !x,
+          children: /* @__PURE__ */ e(ve.Provider, { value: W, children: n(v) })
         }
       )
     }
   ) });
-}, mt = (n) => /* @__PURE__ */ e(Q, { buttonComponent: ie, ...n }), gt = (n) => /* @__PURE__ */ e(Q, { buttonComponent: R, ...n }), rn = (n) => /* @__PURE__ */ e(Q, { buttonComponent: O, ...n }), on = "1px solid var(--lhds-color-ui-300)", bt = ({
+}, ft = (n) => /* @__PURE__ */ e(Q, { buttonComponent: ie, ...n }), Ct = (n) => /* @__PURE__ */ e(Q, { buttonComponent: R, ...n }), rn = (n) => /* @__PURE__ */ e(Q, { buttonComponent: O, ...n }), on = "1px solid var(--lhds-color-ui-300)", xt = ({
   renderMenu: n,
   ...t
 }) => /* @__PURE__ */ e(
@@ -79,7 +79,7 @@ import './index.css';const Q = ({
         borderRadius: "4px",
         children: [
           /* @__PURE__ */ e(be, { ...t }),
-          /* @__PURE__ */ e(w, { num: 0.5 }),
+          /* @__PURE__ */ e(y, { num: 0.5 }),
           /* @__PURE__ */ e(O, { size: "small", leftIcon: oe, ...r })
         ]
       }
@@ -101,7 +101,7 @@ import './index.css';const Q = ({
     className: n,
     onClick: t
   }
-), ft = ({
+), vt = ({
   left: n,
   className: t,
   showMenuButton: r = !1,
@@ -115,7 +115,7 @@ import './index.css';const Q = ({
     c,
     {
       justifyContent: "space-between",
-      className: y(an.navBar, t),
+      className: w(an.navBar, t),
       children: [
         /* @__PURE__ */ i(
           c,
@@ -125,15 +125,15 @@ import './index.css';const Q = ({
             alignItems: "center",
             children: [
               r && /* @__PURE__ */ i(c, { width: "86px", alignItems: "center", children: [
-                /* @__PURE__ */ e(w, {}),
+                /* @__PURE__ */ e(y, {}),
                 /* @__PURE__ */ e(cn, { onClick: s })
               ] }),
               n && /* @__PURE__ */ i(z, { children: [
                 n,
-                /* @__PURE__ */ e(w, { num: 2 })
+                /* @__PURE__ */ e(y, { num: 2 })
               ] }),
               o && /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(c, { justifyContent: "center", alignItems: "center", children: Ee.Children.map(o, (g, b) => /* @__PURE__ */ i(z, { children: [
-                b > 0 && /* @__PURE__ */ e(w, {}),
+                b > 0 && /* @__PURE__ */ e(y, {}),
                 g
               ] })) }) })
             ]
@@ -142,7 +142,7 @@ import './index.css';const Q = ({
         a && /* @__PURE__ */ e(c, { justifyContent: "center", alignItems: "center", children: a }),
         /* @__PURE__ */ i(c, { justifyContent: "flex-end", alignItems: "center", flex: h, children: [
           l,
-          /* @__PURE__ */ e(w, { num: 2 })
+          /* @__PURE__ */ e(y, { num: 2 })
         ] })
       ]
     }
@@ -157,7 +157,7 @@ import './index.css';const Q = ({
       {
         ...r,
         ref: o,
-        className: y(
+        className: w(
           Y.navBarButton,
           n && Y.selected,
           t
@@ -168,14 +168,14 @@ import './index.css';const Q = ({
 ), hn = "_navBarLink_1u1b2_1", pn = "_selected_1u1b2_14", ee = {
   navBarLink: hn,
   selected: pn
-}, xt = E(
+}, Bt = E(
   function({ selected: t, className: r, ...o }, l) {
     return /* @__PURE__ */ e(
       Be,
       {
         ...o,
         ref: l,
-        className: y(
+        className: w(
           ee.navBarLink,
           t && ee.selected,
           r
@@ -183,7 +183,7 @@ import './index.css';const Q = ({
       }
     );
   }
-), vt = (n) => /* @__PURE__ */ e(P, { whiteSpace: "nowrap", variant: "h4", as: "h1", ...n }), Ct = ({
+), yt = (n) => /* @__PURE__ */ e(P, { whiteSpace: "nowrap", variant: "h4", as: "h1", ...n }), wt = ({
   content: n,
   children: t,
   appendTo: r,
@@ -209,39 +209,39 @@ import './index.css';const Q = ({
   navBarNotificationButton: mn,
   unread: gn,
   icon: bn
-}, Bt = E(function({
+}, It = E(function({
   count: n,
   unread: t = !1,
   className: r,
   labelClassName: o,
   iconClassName: l,
-  icon: a = ye,
+  icon: a = we,
   ...s
 }, h) {
   const g = n > 1;
   return /* @__PURE__ */ e(
-    we,
+    ye,
     {
       ...s,
       ref: h,
       leftIcon: a,
-      className: y(
+      className: w(
         F.navBarNotificationButton,
         t && F.unread,
         g && F.hasCount,
         r
       ),
       label: g ? String(n) : void 0,
-      labelClassName: y(o, F.label),
-      iconClassName: y(l, F.icon)
+      labelClassName: w(o, F.label),
+      iconClassName: w(l, F.icon)
     }
   );
-}), fn = "_navBarSearchFieldInput_1rp8g_1", xn = "_navBarSearchFieldWrapper_1rp8g_12", vn = "_withButton_1rp8g_24", Cn = "_clearButton_1rp8g_33", A = {
+}), fn = "_navBarSearchFieldInput_1rp8g_1", Cn = "_navBarSearchFieldWrapper_1rp8g_12", xn = "_withButton_1rp8g_24", vn = "_clearButton_1rp8g_33", A = {
   navBarSearchFieldInput: fn,
-  navBarSearchFieldWrapper: xn,
-  withButton: vn,
-  clearButton: Cn
-}, wt = ({
+  navBarSearchFieldWrapper: Cn,
+  withButton: xn,
+  clearButton: vn
+}, _t = ({
   placeholder: n = "Search",
   className: t,
   wrapperClassName: r,
@@ -252,12 +252,12 @@ import './index.css';const Q = ({
 }) => /* @__PURE__ */ e(
   Je,
   {
-    wrapperClassName: y(
+    wrapperClassName: w(
       A.navBarSearchFieldWrapper,
       o ? A.withButton : void 0,
       r
     ),
-    className: y(A.navBarSearchFieldInput, t),
+    className: w(A.navBarSearchFieldInput, t),
     placeholder: n,
     value: a,
     buttonRight: a && o ? /* @__PURE__ */ e(
@@ -271,9 +271,9 @@ import './index.css';const Q = ({
     ) : void 0,
     ...s
   }
-), Bn = "_navBarUserButton_10f9z_1", wn = {
+), Bn = "_navBarUserButton_10f9z_1", yn = {
   navBarUserButton: Bn
-}, yt = ({
+}, St = ({
   className: n,
   username: t,
   initials: r,
@@ -284,14 +284,14 @@ import './index.css';const Q = ({
   rn,
   {
     ...a,
-    className: y(wn.navBarUserButton, n),
+    className: w(yn.navBarUserButton, n),
     leftIcon: t != null ? o : void 0,
     label: r ?? t,
     forceRound: r != null,
     responsiveIconOnly: l,
     disableArrow: !0
   }
-), yn = E(
+), wn = E(
   ({ contentLeft: n, contentRight: t, collapsed: r = !1, ...o }, l) => /* @__PURE__ */ e(
     D,
     {
@@ -304,9 +304,9 @@ import './index.css';const Q = ({
       ...o
     }
   )
-), It = ({
+), kt = ({
   children: n
-}) => /* @__PURE__ */ e(u, { gap: 1, children: n }), _t = ({
+}) => /* @__PURE__ */ e(u, { gap: 1, children: n }), Rt = ({
   value: n,
   onValueChange: t,
   onChange: r,
@@ -314,7 +314,7 @@ import './index.css';const Q = ({
   checkboxDisabled: l,
   ...a
 }) => /* @__PURE__ */ e(
-  yn,
+  wn,
   {
     contentLeft: /* @__PURE__ */ e(
       be,
@@ -331,10 +331,10 @@ import './index.css';const Q = ({
   }
 ), In = "_sidebarMenuCollapsibleGroupBox_ikek9_1", _n = {
   sidebarMenuCollapsibleGroupBox: In
-}, Sn = ({ children: n }) => /* @__PURE__ */ e("div", { className: _n.sidebarMenuCollapsibleGroupBox, children: n }), St = ({ children: n }) => /* @__PURE__ */ e(d, { spacing: !0, indent: !0, children: /* @__PURE__ */ e(x, { variant: "overline", size: "smaller", children: n }) }), kt = ({ text: n = "No content" }) => /* @__PURE__ */ i(u, { indent: !0, spacing: !0, flex: 1, alignItems: "center", children: [
+}, Sn = ({ children: n }) => /* @__PURE__ */ e("div", { className: _n.sidebarMenuCollapsibleGroupBox, children: n }), Mt = ({ children: n }) => /* @__PURE__ */ e(d, { spacing: !0, indent: !0, children: /* @__PURE__ */ e(C, { variant: "overline", size: "smaller", children: n }) }), Nt = ({ text: n = "No content" }) => /* @__PURE__ */ i(u, { indent: !0, spacing: !0, flex: 1, alignItems: "center", children: [
   /* @__PURE__ */ e(K, { icon: ke, color: p("--lhds-color-ui-500") }),
   /* @__PURE__ */ e(B, {}),
-  /* @__PURE__ */ e(x, { size: "small", color: p("--lhds-color-ui-500"), children: n })
+  /* @__PURE__ */ e(C, { size: "small", color: p("--lhds-color-ui-500"), children: n })
 ] }), kn = ({
   text: n,
   heading: t,
@@ -351,14 +351,14 @@ import './index.css';const Q = ({
       /* @__PURE__ */ e(q, { icon: l, size: "xl" })
     ] }),
     t && /* @__PURE__ */ e(P, { as: a, children: t }),
-    h && /* @__PURE__ */ e(x, { textAlign: "center", children: h }),
+    h && /* @__PURE__ */ e(C, { textAlign: "center", children: h }),
     r,
     o && /* @__PURE__ */ i(d, { children: [
       /* @__PURE__ */ e(B, { num: 2 }),
       /* @__PURE__ */ e(d, { gap: 2, children: o })
     ] })
   ] }) }) });
-}, Rt = (n) => /* @__PURE__ */ e(
+}, Pt = (n) => /* @__PURE__ */ e(
   d,
   {
     width: "100%",
@@ -377,7 +377,7 @@ import './index.css';const Q = ({
     /* @__PURE__ */ e(B, { num: 4 }),
     /* @__PURE__ */ e(P, { variant: "h4", children: n })
   ] })
-] }), Mt = (n) => /* @__PURE__ */ e(
+] }), Ft = (n) => /* @__PURE__ */ e(
   d,
   {
     width: "100%",
@@ -387,7 +387,7 @@ import './index.css';const Q = ({
     alignItems: "center",
     children: /* @__PURE__ */ e(Rn, { ...n })
   }
-), Nt = ({
+), zt = ({
   renderBreadCrumbs: n,
   renderPageHeading: t,
   renderTabs: r,
@@ -400,7 +400,7 @@ import './index.css';const Q = ({
     r?.()
   ] }),
   o
-] }), Pt = (n) => /* @__PURE__ */ e(c, { indent: 3, spacing: !0, ...n }), Ft = ({
+] }), jt = (n) => /* @__PURE__ */ e(c, { indent: 3, spacing: !0, ...n }), Lt = ({
   icon: n,
   heading: t,
   headingLevel: r = "h2",
@@ -416,7 +416,7 @@ import './index.css';const Q = ({
 ] }), Mn = "_selectionRow_eqiow_1", Nn = "_iconColumn_eqiow_10", ne = {
   selectionRow: Mn,
   iconColumn: Nn
-}, zt = ({
+}, At = ({
   icon: n,
   heading: t,
   description: r,
@@ -437,8 +437,8 @@ import './index.css';const Q = ({
       }
     ),
     /* @__PURE__ */ e("label", { htmlFor: l, children: /* @__PURE__ */ i(u, { gap: 0.5, children: [
-      /* @__PURE__ */ e(x, { variant: "bold", children: t }),
-      typeof r == "string" ? /* @__PURE__ */ e(x, { color: p("--silver-dark"), children: r }) : r
+      /* @__PURE__ */ e(C, { variant: "bold", children: t }),
+      typeof r == "string" ? /* @__PURE__ */ e(C, { color: p("--silver-dark"), children: r }) : r
     ] }) })
   ] }),
   /* @__PURE__ */ e(c, { flex: 1, justifyContent: "flex-end", children: o })
@@ -464,11 +464,11 @@ import './index.css';const Q = ({
       ]
     }
   )
-] }), Tn = ({
+] }), $n = ({
   isPinned: n,
   onClick: t,
   label: r
-}) => /* @__PURE__ */ e(D, { onClick: t, label: r ?? (n ? "Unpin menu" : "Pin menu"), leftIcon: n ? ae : je }), jt = ({
+}) => /* @__PURE__ */ e(D, { onClick: t, label: r ?? (n ? "Unpin menu" : "Pin menu"), leftIcon: n ? ae : je }), $t = ({
   className: n,
   children: t,
   onCloseClick: r,
@@ -477,7 +477,7 @@ import './index.css';const Q = ({
   bottomItems: a,
   isPinned: s,
   ...h
-}) => /* @__PURE__ */ i(d, { ...h, className: y(G.sidebarMenu, n), children: [
+}) => /* @__PURE__ */ i(d, { ...h, className: w(G.sidebarMenu, n), children: [
   /* @__PURE__ */ e(An, { onClick: r }),
   /* @__PURE__ */ e(d, { className: G.scrollContainer, children: /* @__PURE__ */ i(
     u,
@@ -492,7 +492,7 @@ import './index.css';const Q = ({
         (a || o) && /* @__PURE__ */ i(u, { gap: 1, children: [
           a,
           o && /* @__PURE__ */ e(
-            Tn,
+            $n,
             {
               isPinned: s,
               onClick: l
@@ -503,10 +503,10 @@ import './index.css';const Q = ({
       ]
     }
   ) })
-] }), $ = He(!1), X = () => We($), $n = ({
+] }), T = He(!1), X = () => We(T), Tn = ({
   label: n,
   ...t
-}) => /* @__PURE__ */ e(ge, { label: n, placement: "right", appendTo: document.body, children: /* @__PURE__ */ e(V, { ...t }) }), Lt = ({
+}) => /* @__PURE__ */ e(ge, { label: n, placement: "right", appendTo: document.body, children: /* @__PURE__ */ e(V, { ...t }) }), Tt = ({
   closeButtonVisible: n,
   onClickCloseButton: t,
   onClickMenuButton: r,
@@ -528,11 +528,11 @@ import './index.css';const Q = ({
     children: [
       /* @__PURE__ */ e(V, { onClick: r, icon: le }),
       /* @__PURE__ */ i(u, { justifyContent: "space-between", flex: 1, gap: 1, children: [
-        /* @__PURE__ */ e(u, { gap: 1, children: /* @__PURE__ */ e($.Provider, { value: !0, children: o }) }),
-        /* @__PURE__ */ e(u, { gap: 1, children: (l || n) && /* @__PURE__ */ i($.Provider, { value: !0, children: [
+        /* @__PURE__ */ e(u, { gap: 1, children: /* @__PURE__ */ e(T.Provider, { value: !0, children: o }) }),
+        /* @__PURE__ */ e(u, { gap: 1, children: (l || n) && /* @__PURE__ */ i(T.Provider, { value: !0, children: [
           l,
           n && /* @__PURE__ */ e(
-            $n,
+            Tn,
             {
               icon: ae,
               label: a,
@@ -547,12 +547,12 @@ import './index.css';const Q = ({
   label: n
 }) => X() ? null : /* @__PURE__ */ i(d, { height: "32px", justifyContent: "center", indent: 1, children: [
   /* @__PURE__ */ e(B, {}),
-  /* @__PURE__ */ e(x, { variant: "overline", size: "smaller", children: n })
+  /* @__PURE__ */ e(C, { variant: "overline", size: "smaller", children: n })
 ] }), qn = ({
   label: n,
   leftIcon: t,
   ...r
-}) => t == null ? null : /* @__PURE__ */ e(ge, { label: n, placement: "right", children: /* @__PURE__ */ e(Le, { icon: t, ...r }) }), At = (n) => X() ? /* @__PURE__ */ e(qn, { ...n }) : /* @__PURE__ */ e(Ae, { ...n }), En = ({
+}) => t == null ? null : /* @__PURE__ */ e(ge, { label: n, placement: "right", children: /* @__PURE__ */ e(Le, { icon: t, ...r }) }), Ot = (n) => X() ? /* @__PURE__ */ e(qn, { ...n }) : /* @__PURE__ */ e(Ae, { ...n }), En = ({
   children: n,
   label: t,
   icon: r,
@@ -572,21 +572,21 @@ import './index.css';const Q = ({
         spacing: 1,
         indent: 1,
         gap: 2,
-        children: /* @__PURE__ */ i($.Provider, { value: !1, children: [
+        children: /* @__PURE__ */ i(T.Provider, { value: !1, children: [
           /* @__PURE__ */ e(On, { label: t }),
           n
         ] })
       }
     )
   }
-), Tt = ({
+), qt = ({
   children: n,
   label: t,
   leftIcon: r,
   className: o,
   initialExpand: l = !1
 }) => {
-  const [a, s] = T(l);
+  const [a, s] = $(l);
   return X() ? r == null ? null : /* @__PURE__ */ e(En, { label: t, icon: r, children: n }) : /* @__PURE__ */ e(
     D,
     {
@@ -600,13 +600,13 @@ import './index.css';const Q = ({
       children: /* @__PURE__ */ e(Sn, { children: n })
     }
   );
-}, $t = (n) => /* @__PURE__ */ e(
+}, Et = (n) => /* @__PURE__ */ e(
   Ge,
   {
     color: p("--lhds-color-ui-400"),
     ...n
   }
-), Hn = (n, t, r) => n == null ? "" : (De(Ke(r))(n, t) ?? "").replace("{ITEMS}", String(n)), Ot = ({
+), Hn = (n, t, r) => n == null ? "" : (De(Ke(r))(n, t) ?? "").replace("{ITEMS}", String(n)), Ht = ({
   numItemsSelected: n,
   label: t,
   selectedLabel: r = {
@@ -636,16 +636,16 @@ import './index.css';const Q = ({
       borderRadius: "var(--swui-border-radius)",
       children: [
         /* @__PURE__ */ i(c, { alignItems: "center", gap: 2, children: [
-          n != null || t != null ? /* @__PURE__ */ e(c, { alignItems: "center", children: n != null ? /* @__PURE__ */ e(x, { children: s }) : t != null ? typeof t == "string" ? /* @__PURE__ */ e(x, { children: t }) : t : null }) : null,
+          n != null || t != null ? /* @__PURE__ */ e(c, { alignItems: "center", children: n != null ? /* @__PURE__ */ e(C, { children: s }) : t != null ? typeof t == "string" ? /* @__PURE__ */ e(C, { children: t }) : t : null }) : null,
           o && /* @__PURE__ */ e(c, { children: o })
         ] }),
         /* @__PURE__ */ e(c, { gap: 2, children: l })
       ]
     }
   );
-}, qt = ({ children: n }) => /* @__PURE__ */ e(c, { spacing: 0.5, indent: 0.5, flex: 1, children: n }), Wn = "_productCard_19x6b_1", Un = {
+}, Wt = ({ children: n }) => /* @__PURE__ */ e(c, { spacing: 0.5, indent: 0.5, flex: 1, children: n }), Wn = "_productCard_19x6b_1", Un = {
   productCard: Wn
-}, Et = ({
+}, Ut = ({
   renderSelectedProductCard: n,
   renderEditButton: t,
   children: r,
@@ -686,7 +686,7 @@ import './index.css';const Q = ({
       )
     ]
   }
-), Gn = ({ children: n }) => /* @__PURE__ */ e(x, { variant: "bold", style: { fontSize: "2.0rem" }, children: n }), Ht = ({
+), Gn = ({ children: n }) => /* @__PURE__ */ e(C, { variant: "bold", style: { fontSize: "2.0rem" }, children: n }), Gt = ({
   description: n,
   subDescription: t,
   descriptionTags: r,
@@ -699,7 +699,7 @@ import './index.css';const Q = ({
   children: b,
   headingLevel: f
 }) => {
-  const v = r == null ? !1 : Array.isArray(r) ? r.length > 0 : !Ze(r);
+  const x = r == null ? !1 : Array.isArray(r) ? r.length > 0 : !Ze(r);
   return /* @__PURE__ */ i(u, { children: [
     g?.(),
     /* @__PURE__ */ i(d, { gap: 2, spacing: 4, indent: 4, background: p("--moln"), children: [
@@ -719,27 +719,27 @@ import './index.css';const Q = ({
             ]
           }
         ),
-        h && /* @__PURE__ */ e(x, { variant: "bold", color: p("--silver-dark"), children: h })
+        h && /* @__PURE__ */ e(C, { variant: "bold", color: p("--silver-dark"), children: h })
       ] }),
-      (v || o) && /* @__PURE__ */ i(u, { children: [
+      (x || o) && /* @__PURE__ */ i(u, { children: [
         /* @__PURE__ */ i(c, { gap: 1, flexWrap: "wrap", children: [
           r,
-          o && /* @__PURE__ */ e(Te, { label: o, variant: "passive" })
+          o && /* @__PURE__ */ e($e, { label: o, variant: "passive" })
         ] }),
         /* @__PURE__ */ e(B, {})
       ] }),
       n && /* @__PURE__ */ i(u, { children: [
-        /* @__PURE__ */ e(x, { children: n }),
+        /* @__PURE__ */ e(C, { children: n }),
         /* @__PURE__ */ e(B, {})
       ] }),
       t && /* @__PURE__ */ i(u, { children: [
-        /* @__PURE__ */ e(x, { children: t }),
+        /* @__PURE__ */ e(C, { children: t }),
         /* @__PURE__ */ e(B, {})
       ] }),
       b
     ] })
   ] });
-}, Wt = ({ renderImage: n }) => /* @__PURE__ */ i(u, { children: [
+}, Dt = ({ renderImage: n }) => /* @__PURE__ */ i(u, { children: [
   n?.(),
   /* @__PURE__ */ i(d, { gap: 3, spacing: 4, indent: 4, background: p("--moln"), children: [
     /* @__PURE__ */ e(d, { gap: 0.5, children: /* @__PURE__ */ e(
@@ -761,13 +761,13 @@ import './index.css';const Q = ({
     /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(N, { width: "180px", height: "2.0rem", borderRadius: "8px" }) }),
     /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(N, { width: "150px", height: "1.4rem", borderRadius: "8px" }) })
   ] })
-] }), Ut = ({
+] }), Kt = ({
   label: n,
   children: t
 }) => /* @__PURE__ */ i(d, { background: p("--mussla"), indent: 2, spacing: 2, gap: 2, children: [
   /* @__PURE__ */ e(P, { variant: "h3", as: "h2", color: "white", children: n }),
   t
-] }), Gt = ({
+] }), Vt = ({
   title: n,
   variant: t = "normal",
   loading: r,
@@ -779,11 +779,11 @@ import './index.css';const Q = ({
   renderMandatoryTag: g,
   renderContentLeftOfButton: b,
   children: f,
-  ...v
+  ...x
 }) => {
   const { fontSizeRatio: I } = Qe(), S = M({
     query: "(max-width: 460px)"
-  }), C = M({
+  }), v = M({
     query: "(max-width: 360px)"
   }) || S && I > 1.2, _ = r ? "normal" : t, m = Kn(_), H = p("--moln"), W = Dn(_);
   return /* @__PURE__ */ i(
@@ -794,18 +794,18 @@ import './index.css';const Q = ({
       shadow: "box",
       overflow: "hidden",
       position: r ? "relative" : void 0,
-      ...L(v),
+      ...L(x),
       children: [
         /* @__PURE__ */ i(c, { flex: 1, children: [
-          !C && /* @__PURE__ */ i(d, { flex: 2, justifyContent: "center", background: m, children: [
+          !v && /* @__PURE__ */ i(d, { flex: 2, justifyContent: "center", background: m, children: [
             a?.(),
             o && /* @__PURE__ */ e(K, { color: W, icon: o, size: 73 })
           ] }),
           /* @__PURE__ */ e(d, { flex: 4, indent: 2, spacing: 2, background: H, children: /* @__PURE__ */ i(u, { gap: 2, children: [
             n && /* @__PURE__ */ i(c, { justifyContent: "space-between", children: [
               /* @__PURE__ */ i(c, { gap: 2, alignItems: "center", children: [
-                C && l && /* @__PURE__ */ e(q, { icon: l, size: "medium" }),
-                /* @__PURE__ */ e(x, { variant: "bold", size: "large", children: n })
+                v && l && /* @__PURE__ */ e(q, { icon: l, size: "medium" }),
+                /* @__PURE__ */ e(C, { variant: "bold", size: "large", children: n })
               ] }),
               _ == "normal" && h?.()
             ] }),
@@ -868,7 +868,18 @@ import './index.css';const Q = ({
   }
 }, Vn = "_productSummaryCardImage_1knc7_1", Zn = {
   productSummaryCardImage: Vn
-}, Dt = ({ src: n, alt: t }) => /* @__PURE__ */ e("img", { src: n, alt: t, className: Zn.productSummaryCardImage }), Kt = ({ iconLeft: n, ...t }) => /* @__PURE__ */ e(
+}, Qn = ({ src: n, alt: t }) => /* @__PURE__ */ e("img", { src: n, alt: t, className: Zn.productSummaryCardImage }), Xn = "_productSummaryCardImageButton_1mznn_11", Jn = {
+  productSummaryCardImageButton: Xn
+}, Zt = ({ onClick: n, ariaLabel: t, ...r }) => /* @__PURE__ */ e(
+  "button",
+  {
+    type: "button",
+    className: Jn.productSummaryCardImageButton,
+    "aria-label": t,
+    onClick: n,
+    children: /* @__PURE__ */ e(Qn, { ...r })
+  }
+), Qt = ({ iconLeft: n, ...t }) => /* @__PURE__ */ e(
   d,
   {
     borderRadius: "16px",
@@ -912,7 +923,7 @@ import './index.css';const Q = ({
   "tablet",
   "tablet-wide",
   "desktop"
-], xe = () => {
+], Ce = () => {
   const n = M({
     query: "(max-width: 768px)"
   }), t = M({
@@ -923,15 +934,15 @@ import './index.css';const Q = ({
     query: "(max-width: 1160px)"
   });
   return { deviceSize: t ? "small-mobile" : n ? "mobile" : r ? "tablet" : o ? "tablet-wide" : "desktop" };
-}, Qn = (n, t) => n === t || te.indexOf(n) > te.indexOf(t), Vt = (n) => {
-  const { deviceSize: t } = xe();
+}, Yn = (n, t) => n === t || te.indexOf(n) > te.indexOf(t), Xt = (n) => {
+  const { deviceSize: t } = Ce();
   return {
     visible: j(
-      () => Qn(t, n),
+      () => Yn(t, n),
       [t, n]
     )
   };
-}, Xn = ({
+}, et = ({
   isOpen: n,
   initialIndex: t,
   onUpdateIndex: r,
@@ -943,9 +954,9 @@ import './index.css';const Q = ({
   onRequestClose: g,
   images: b
 }) => {
-  const f = Z(null), { deviceSize: v } = xe(), I = v !== "mobile", [S, k] = T(t ?? 0), C = ({ index: m }) => {
+  const f = Z(null), { deviceSize: x } = Ce(), I = x !== "mobile", [S, k] = $(t ?? 0), v = ({ index: m }) => {
     k(m), r?.(m);
-  }, _ = j(() => b.map((m) => Jn(m)), [b]);
+  }, _ = j(() => b.map((m) => nt(m)), [b]);
   return /* @__PURE__ */ e(
     fe,
     {
@@ -954,7 +965,7 @@ import './index.css';const Q = ({
       index: S,
       plugins: [en, nn, tn],
       slides: _,
-      on: { view: C },
+      on: { view: v },
       animation: { fade: 0 },
       controller: {
         closeOnPullDown: !0,
@@ -992,7 +1003,7 @@ import './index.css';const Q = ({
             }
           )
         ] }),
-        buttonPrev: () => b.length > 1 && I && /* @__PURE__ */ e(w, { num: 4, className: "yarl__navigation_prev", children: /* @__PURE__ */ e(
+        buttonPrev: () => b.length > 1 && I && /* @__PURE__ */ e(y, { num: 4, className: "yarl__navigation_prev", children: /* @__PURE__ */ e(
           R,
           {
             "aria-label": o,
@@ -1001,7 +1012,7 @@ import './index.css';const Q = ({
             onClick: () => f.current?.prev()
           }
         ) }),
-        buttonNext: () => b.length > 1 && I && /* @__PURE__ */ e(w, { num: 4, className: "yarl__navigation_next", children: /* @__PURE__ */ e(
+        buttonNext: () => b.length > 1 && I && /* @__PURE__ */ e(y, { num: 4, className: "yarl__navigation_next", children: /* @__PURE__ */ e(
           R,
           {
             "aria-label": s,
@@ -1010,12 +1021,12 @@ import './index.css';const Q = ({
             onClick: () => f.current?.next()
           }
         ) }),
-        buttonClose: () => /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
+        buttonClose: () => /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
           ie,
           {
             variant: "danger",
             "aria-label": h,
-            leftIcon: $e,
+            leftIcon: Te,
             size: "large",
             onClick: () => f.current?.close()
           }
@@ -1023,14 +1034,14 @@ import './index.css';const Q = ({
       }
     }
   );
-}, Jn = (n) => ({
+}, nt = (n) => ({
   src: n.url,
   width: n.width,
   height: n.height,
   alt: n.alt,
   title: n.title,
   description: n.description
-}), Zt = ({
+}), Jt = ({
   images: n,
   initialIndex: t,
   altLabelPrevious: r,
@@ -1039,15 +1050,15 @@ import './index.css';const Q = ({
   altLabelNext: a,
   altLabelClose: s
 }) => {
-  const h = Z(null), [g, b] = T(!1), [f, v] = T(t ?? 0), I = J(() => {
+  const h = Z(null), [g, b] = $(!1), [f, x] = $(t ?? 0), I = J(() => {
     b(!0);
   }, []), S = J(() => {
     b(!1);
-  }, []), k = ({ index: m }) => v(m);
+  }, []), k = ({ index: m }) => x(m);
   Ue(() => {
-    v(t ?? 0);
+    x(t ?? 0);
   }, [t]);
-  const C = j(() => n.map(Yn), [n]), _ = j(() => n.map(
+  const v = j(() => n.map(tt), [n]), _ = j(() => n.map(
     (m) => m.fullscreenImage ? {
       ...m,
       url: m.fullscreenImage.url,
@@ -1061,7 +1072,7 @@ import './index.css';const Q = ({
       {
         controller: { ref: h },
         index: f,
-        slides: C,
+        slides: v,
         plugins: [Ye],
         on: {
           view: k,
@@ -1073,7 +1084,7 @@ import './index.css';const Q = ({
           imageFit: "cover"
         },
         render: {
-          buttonPrev: () => n.length > 1 && /* @__PURE__ */ e(w, { className: "yarl__navigation_prev", children: /* @__PURE__ */ e(
+          buttonPrev: () => n.length > 1 && /* @__PURE__ */ e(y, { className: "yarl__navigation_prev", children: /* @__PURE__ */ e(
             R,
             {
               "aria-label": r,
@@ -1081,7 +1092,7 @@ import './index.css';const Q = ({
               onClick: () => h.current?.prev()
             }
           ) }),
-          buttonNext: () => n.length > 1 && /* @__PURE__ */ e(w, { className: "yarl__navigation_next", children: /* @__PURE__ */ e(
+          buttonNext: () => n.length > 1 && /* @__PURE__ */ e(y, { className: "yarl__navigation_next", children: /* @__PURE__ */ e(
             R,
             {
               "aria-label": a,
@@ -1106,12 +1117,12 @@ import './index.css';const Q = ({
       }
     ),
     g && /* @__PURE__ */ e(
-      Xn,
+      et,
       {
         isOpen: !0,
         onRequestClose: S,
         initialIndex: f,
-        onUpdateIndex: v,
+        onUpdateIndex: x,
         images: _,
         altLabelPrevious: r,
         altLabelNext: a,
@@ -1121,7 +1132,7 @@ import './index.css';const Q = ({
       }
     )
   ] });
-}, Yn = (n) => ({
+}, tt = (n) => ({
   src: n.url,
   width: n.width,
   height: n.height,
@@ -1131,50 +1142,51 @@ import './index.css';const Q = ({
 });
 export {
   rn as ActionMenuFlatButton,
-  mt as ActionMenuPrimaryButton,
-  gt as ActionMenuSecondaryButton,
-  bt as CheckboxMenu,
-  yn as Collapsible,
-  kt as CollapsibleEmptyContent,
-  St as CollapsibleGroupHeading,
-  It as CollapsibleList,
-  _t as CollapsibleWithCheckbox,
+  ft as ActionMenuPrimaryButton,
+  Ct as ActionMenuSecondaryButton,
+  xt as CheckboxMenu,
+  wn as Collapsible,
+  Nt as CollapsibleEmptyContent,
+  Mt as CollapsibleGroupHeading,
+  kt as CollapsibleList,
+  Rt as CollapsibleWithCheckbox,
   kn as ErrorPanel,
-  Rt as ErrorScreen,
-  Xn as FullscreenImageCarousel,
-  Zt as ImageCarousel,
+  Pt as ErrorScreen,
+  et as FullscreenImageCarousel,
+  Jt as ImageCarousel,
   Rn as LoadingPanel,
-  Mt as LoadingScreen,
-  ft as NavBar,
+  Ft as LoadingScreen,
+  vt as NavBar,
   un as NavBarButton,
-  vt as NavBarHeading,
-  xt as NavBarLink,
-  Bt as NavBarNotificationButton,
-  Ct as NavBarPopoverButton,
-  wt as NavBarSearchField,
-  yt as NavBarUserButton,
-  Nt as PageHeader,
-  Pt as PageHeaderRow,
-  Ft as PageHeading,
-  Et as ProductCard,
-  Ht as ProductCardContentItem,
-  Wt as ProductCardContentItemSkeletor,
-  Gt as ProductSummaryCard,
-  Dt as ProductSummaryCardImage,
-  Kt as ProductSummaryCardSkeletor,
-  qt as SelectedItemsActionsPadding,
-  Ot as SelectedItemsActionsPanel,
-  Ut as SelectedProductCard,
-  zt as SelectionRow,
-  jt as SidebarMenu,
-  Tt as SidebarMenuCollapsible,
+  yt as NavBarHeading,
+  Bt as NavBarLink,
+  It as NavBarNotificationButton,
+  wt as NavBarPopoverButton,
+  _t as NavBarSearchField,
+  St as NavBarUserButton,
+  zt as PageHeader,
+  jt as PageHeaderRow,
+  Lt as PageHeading,
+  Ut as ProductCard,
+  Gt as ProductCardContentItem,
+  Dt as ProductCardContentItemSkeletor,
+  Vt as ProductSummaryCard,
+  Qn as ProductSummaryCardImage,
+  Zt as ProductSummaryCardImageButton,
+  Qt as ProductSummaryCardSkeletor,
+  Wt as SelectedItemsActionsPadding,
+  Ht as SelectedItemsActionsPanel,
+  Kt as SelectedProductCard,
+  At as SelectionRow,
+  $t as SidebarMenu,
+  qt as SidebarMenuCollapsible,
   Sn as SidebarMenuCollapsibleGroupBox,
   On as SidebarMenuHeading,
-  At as SidebarMenuLink,
-  $t as SidebarMenuSeparator,
-  Lt as SidebarRailMenu,
-  Qn as isDeviceSameOrLarger,
-  xe as useDeviceSize,
-  Vt as useLayoutVisibility
+  Ot as SidebarMenuLink,
+  Et as SidebarMenuSeparator,
+  Tt as SidebarRailMenu,
+  Yn as isDeviceSameOrLarger,
+  Ce as useDeviceSize,
+  Xt as useLayoutVisibility
 };
 //# sourceMappingURL=index.es.js.map