@stenajs-webui/panels 22.4.2 → 22.4.4

package/README.md

@@ -1,15 +1,59 @@
-# stenajs-webui/panels
+# @stenajs-webui/panels
 
-This package contains larger, more use-case driven components.
+This package contains larger, more use‑case driven components built by composing primitives from other `@stenajs-webui/*` packages.
 
-They are composed by components from the other packages.
+Use these panels to quickly assemble common application scaffolding and rich UI building blocks.
 
-## Components
+## Components overview
 
-- Collapsible
-- Drawer
-- ErrorPanel
-- LoadingPanel
-- NavBar
-- Notifications
-- Sidebar menu
+- ActionMenuButton (and variants) — Buttons that open contextual action menus.
+- CheckboxMenu — Menu with checkable items for multi‑select actions.
+- Collapsible — Expand/collapse container with helpers for lists and grouped content.
+- Drawer — Slide‑in container for side panels and temporary content.
+- ErrorPanel & ErrorScreen — Display error messages and recovery actions.
+- ImageCarousel — Inline image carousel with fullscreen, zoom, captions and counter.
+- LoadingPanel & LoadingScreen — Loading placeholders for panels and full screen.
+- NavBar — Application top navigation with buttons, search field, user menu, etc.
+- Notifications — Toasts and in‑app notifications (Notification, NotificationList, UnreadDot).
+- PageHeader — Page header layout and helpers (heading and rows).
+- ProductCard — Rich product presentation card (uses ImageCarousel under the hood).
+- ProductSummaryCard — Compact summary variant of product information.
+- SelectedItemsActionsPanel — Sticky panel for bulk actions.
+- SidebarMenu — Collapsible/pinnable sidebar navigation and rail menu.
+
+Note: Not all subcomponents are listed; see Storybook for examples and usage.
+
+## ImageCarousel usage
+
+ImageCarousel relies on `yet-another-react-lightbox` and some of its plugins. Required styles are now included automatically by the panels package when you use ImageCarousel or components that render it (no manual CSS imports needed).
+
+Basic example:
+
+<ImageCarousel
+  images={[
+    {
+      url: "https://example.com/image-900x600.jpg",
+      alt: "Front view",
+      width: 900,
+      height: 600,
+      title: "Front view",
+      description: "Click to open fullscreen",
+      fullscreenImage: {
+        url: "https://example.com/image-1800x1200.jpg",
+        width: 1800,
+        height: 1200,
+      },
+    },
+  ]}
+  altLabelPrevious="Previous image"
+  altLabelNext="Next image"
+  altLabelClose="Close"
+  altLabelZoomIn="Zoom in"
+  altLabelZoomOut="Zoom out"
+/>
+
+Accessibility: Provide meaningful alt text and labels for all controls as shown above.
+
+## ProductCard
+
+ProductCard uses ImageCarousel internally to display images. The required lightbox styles are bundled automatically when using the component.

package/dist/components/image-carousel/ImageCarousel.d.ts

@@ -1,8 +1,5 @@
 import * as React from "react";
-import "./ImageCarousel.module.css";
-import "yet-another-react-lightbox/styles.css";
-import "yet-another-react-lightbox/plugins/counter.css";
-import "yet-another-react-lightbox/plugins/captions.css";
+import "./yarl.css";
 export interface CarouselImage {
     url: string;
     alt: string;

package/dist/index.es.js

@@ -1,4 +1,4 @@
-(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)}})();
+(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}}.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{bottom:0;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));bottom:0;left:0;outline:none;overflow:hidden;overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain);position:absolute;right:0;top:0;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:var(--yarl__pull_opacity,1);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-height:100%;max-width:100%;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.yarl__slide_image_cover{height:100%;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}@media screen and (min-width:800px){.yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;transform:translate(-50%) translateY(-50%)}.yarl__slide_loading{animation:yarl__delayed_fadein 1s linear;color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{color:var(--yarl__slide_icon_error_color,red);height:var(--yarl__slide_icon_error_size,48px);width:var(--yarl__slide_icon_error_size,48px)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{bottom:auto;display:flex;justify-content:flex-end;left:auto;padding:var(--yarl__toolbar_padding,8px);position:absolute;right:0;top:0}[dir=rtl] .yarl__toolbar{bottom:auto;left:0;right:auto;top:0}.yarl__icon{height:var(--yarl__icon_size,32px);width:var(--yarl__icon_size,32px)}.yarl__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:var(--yarl__button_margin,0);outline:none;padding:var(--yarl__button_padding,8px);-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}.yarl__counter{bottom:var(--yarl__counter_bottom,unset);color:var(--yarl__counter_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__counter_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));left:var(--yarl__counter_left,0);line-height:var(--yarl__counter_line_height,var(--yarl__icon_size,32px));margin:var(--yarl__counter_margin,var(--yarl__toolbar_padding,8px));padding:var(--yarl__counter_padding,var(--yarl__button_padding,8px));position:var(--yarl__counter_position,absolute);right:var(--yarl__counter_right,unset);top:var(--yarl__counter_top,0);-webkit-user-select:var(--yarl__counter_user_select,none);user-select:var(--yarl__counter_user_select,none)}.yarl__slide_captions_container{background:var(--yarl__slide_captions_container_background,rgba(0,0,0,.5));left:var(--yarl__slide_captions_container_left,0);padding:var(--yarl__slide_captions_container_padding,16px);position:absolute;right:var(--yarl__slide_captions_container_right,0);-webkit-transform:translateZ(0)}.yarl__slide_title{color:var(--yarl__slide_title_color,#fff);font-size:var(--yarl__slide_title_font_size,125%);font-weight:var(--yarl__slide_title_font_weight,bolder);max-width:calc(100% - var(--yarl__toolbar_width, 0px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.yarl__slide_title_container{top:var(--yarl__slide_title_container_top,0)}.yarl__slide_description{display:-webkit-box;-webkit-hyphens:auto;hyphens:auto;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--yarl__slide_description_max_lines,3);color:var(--yarl__slide_description_color,#fff);text-align:var(--yarl__slide_description_text_align,start)}.yarl__slide_description_container{bottom:var(--yarl__slide_description_container_bottom,0)}.yarl__slide_title.yarl__slide_title.yarl__slide_title{font-family:var(--swui-font-primary);font-size:var(--swui-font-size-large);font-weight:var(--swui-font-weight-text)}.yarl__slide_title_container.yarl__slide_title_container.yarl__slide_title_container{height:48px;margin:calc(var(--swui-metrics-space) * 1);display:flex;align-items:center;padding-left:calc(var(--swui-metrics-space) * 10)}.yarl__slide_description.yarl__slide_description.yarl__slide_description{font-family:var(--swui-font-primary);font-size:var(--swui-font-size-large);font-weight:var(--swui-font-weight-text)}.yarl__slide_description_container.yarl__slide_description_container.yarl__slide_description_container{display:flex;align-items:center;padding-left:calc(var(--swui-metrics-space) * 3);padding-bottom:calc(var(--swui-metrics-space) * 4)}.yarl__counter.yarl__counter{height:48px;margin:calc(var(--swui-metrics-space) * 1);display:flex;align-items:center;font-family:var(--swui-font-primary);font-size:var(--swui-font-size-large);font-weight:var(--swui-font-weight-text)}")),document.head.appendChild(r)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
 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";
@@ -14,9 +14,6 @@ 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";
-import "yet-another-react-lightbox/plugins/counter.css";
-import "yet-another-react-lightbox/plugins/captions.css";
 const te = ({
   renderItems: n,
   placement: t = "bottom",
@@ -66,7 +63,7 @@ const te = ({
       )
     }
   ) });
-}, Ct = (n) => /* @__PURE__ */ e(te, { buttonComponent: pe, ...n }), _t = (n) => /* @__PURE__ */ e(te, { buttonComponent: I, ...n }), tn = (n) => /* @__PURE__ */ e(te, { buttonComponent: E, ...n }), rn = "1px solid var(--lhds-color-ui-300)", yt = ({
+}, ft = (n) => /* @__PURE__ */ e(te, { buttonComponent: pe, ...n }), xt = (n) => /* @__PURE__ */ e(te, { buttonComponent: I, ...n }), tn = (n) => /* @__PURE__ */ e(te, { buttonComponent: E, ...n }), rn = "1px solid var(--lhds-color-ui-300)", vt = ({
   renderMenu: n,
   ...t
 }) => /* @__PURE__ */ e(
@@ -105,7 +102,7 @@ const te = ({
     className: n,
     onClick: t
   }
-), wt = ({
+), Ct = ({
   left: n,
   className: t,
   showMenuButton: i = !1,
@@ -169,7 +166,7 @@ const te = ({
       }
     );
   }
-), Bt = (n) => /* @__PURE__ */ e(z, { whiteSpace: "nowrap", variant: "h4", as: "h1", ...n }), kt = ({
+), _t = (n) => /* @__PURE__ */ e(z, { whiteSpace: "nowrap", variant: "h4", as: "h1", ...n }), yt = ({
   content: n,
   children: t,
   appendTo: i,
@@ -196,7 +193,7 @@ const te = ({
   unread: hn,
   icon: pn,
   shake: mn
-}, It = ee(function({
+}, wt = ee(function({
   count: n,
   unread: t = !1,
   className: i,
@@ -228,7 +225,7 @@ const te = ({
   navBarSearchFieldWrapper: bn,
   withButton: fn,
   clearButton: xn
-}, St = ({
+}, Bt = ({
   placeholder: n = "Search",
   className: t,
   wrapperClassName: i,
@@ -260,7 +257,7 @@ const te = ({
   }
 ), vn = "_navBarUserButton_10f9z_1", Cn = {
   navBarUserButton: vn
-}, Nt = ({
+}, kt = ({
   className: n,
   username: t,
   initials: i,
@@ -343,7 +340,7 @@ const te = ({
   standard: Sn,
   unread: Nn,
   danger: Mn
-}, Mt = ({
+}, It = ({
   variant: n = "standard",
   children: t,
   unread: i,
@@ -363,7 +360,7 @@ const te = ({
   }
 ), Rn = "_notificationList_1rkvu_1", zn = {
   notificationList: Rn
-}, Rt = ({
+}, St = ({
   children: n
 }) => /* @__PURE__ */ r("div", { className: zn.notificationList, children: [
   n,
@@ -371,7 +368,7 @@ const te = ({
 ] }), jn = "_clickable_1ijxc_1", Fn = "_nonClickable_1ijxc_27", V = {
   clickable: jn,
   nonClickable: Fn
-}, zt = ({
+}, Nt = ({
   onClick: n,
   onClickAriaLabel: t,
   children: i,
@@ -417,9 +414,9 @@ const te = ({
       ...o
     }
   )
-), jt = ({
+), Mt = ({
   children: n
-}) => /* @__PURE__ */ e(p, { gap: 1, children: n }), Ft = ({
+}) => /* @__PURE__ */ e(p, { gap: 1, children: n }), Rt = ({
   value: n,
   onValueChange: t,
   onChange: i,
@@ -444,7 +441,7 @@ const te = ({
   }
 ), An = "_sidebarMenuCollapsibleGroupBox_ikek9_1", $n = {
   sidebarMenuCollapsibleGroupBox: An
-}, Ln = ({ children: n }) => /* @__PURE__ */ e("div", { className: $n.sidebarMenuCollapsibleGroupBox, children: n }), Pt = ({ children: n }) => /* @__PURE__ */ e(d, { spacing: !0, indent: !0, children: /* @__PURE__ */ e(f, { variant: "overline", size: "smaller", children: n }) }), At = ({ text: n = "No content" }) => /* @__PURE__ */ r(p, { indent: !0, spacing: !0, flex: 1, alignItems: "center", children: [
+}, Ln = ({ children: n }) => /* @__PURE__ */ e("div", { className: $n.sidebarMenuCollapsibleGroupBox, children: n }), zt = ({ children: n }) => /* @__PURE__ */ e(d, { spacing: !0, indent: !0, children: /* @__PURE__ */ e(f, { variant: "overline", size: "smaller", children: n }) }), jt = ({ 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 })
@@ -471,7 +468,7 @@ const te = ({
       o
     ] })
   ] }) }) });
-}, $t = (n) => /* @__PURE__ */ e(
+}, Ft = (n) => /* @__PURE__ */ e(
   d,
   {
     width: "100%",
@@ -486,7 +483,7 @@ const te = ({
   /* @__PURE__ */ e(J, { size: "small" }),
   /* @__PURE__ */ e(x, { num: 4 }),
   /* @__PURE__ */ e(z, { variant: "h4", children: n })
-] }), Lt = (n) => /* @__PURE__ */ e(
+] }), Pt = (n) => /* @__PURE__ */ e(
   d,
   {
     width: "100%",
@@ -495,7 +492,7 @@ const te = ({
     alignItems: "center",
     children: /* @__PURE__ */ e(Wn, { ...n })
   }
-), Dt = ({
+), At = ({
   renderBreadCrumbs: n,
   renderPageHeading: t,
   renderTabs: i,
@@ -511,7 +508,7 @@ const te = ({
     i == null ? void 0 : i()
   ] }),
   o
-] }), Wt = (n) => /* @__PURE__ */ e(c, { indent: 3, spacing: !0, ...n }), Ht = ({
+] }), $t = (n) => /* @__PURE__ */ e(c, { indent: 3, spacing: !0, ...n }), Lt = ({
   icon: n,
   heading: t,
   headingLevel: i = "h2",
@@ -550,7 +547,7 @@ const te = ({
   isPinned: n,
   onClick: t,
   label: i
-}) => /* @__PURE__ */ e(T, { onClick: t, label: i ?? (n ? "Unpin menu" : "Pin menu"), leftIcon: n ? be : $e }), Ut = ({
+}) => /* @__PURE__ */ e(T, { onClick: t, label: i ?? (n ? "Unpin menu" : "Pin menu"), leftIcon: n ? be : $e }), Dt = ({
   className: n,
   children: t,
   onCloseClick: i,
@@ -588,7 +585,7 @@ const te = ({
 ] }), q = Ge(!1), ie = () => Oe(q), Kn = ({
   label: n,
   ...t
-}) => /* @__PURE__ */ e(_e, { label: n, placement: "right", appendTo: document.body, children: /* @__PURE__ */ e(Y, { ...t }) }), qt = ({
+}) => /* @__PURE__ */ e(_e, { label: n, placement: "right", appendTo: document.body, children: /* @__PURE__ */ e(Y, { ...t }) }), Wt = ({
   closeButtonVisible: n,
   onClickCloseButton: t,
   onClickMenuButton: i,
@@ -634,7 +631,7 @@ const te = ({
   label: n,
   leftIcon: t,
   ...i
-}) => t == null ? null : /* @__PURE__ */ e(_e, { label: n, placement: "right", children: /* @__PURE__ */ e(Le, { icon: t, ...i }) }), Et = (n) => ie() ? /* @__PURE__ */ e(Qn, { ...n }) : /* @__PURE__ */ e(De, { ...n }), Tn = ({
+}) => t == null ? null : /* @__PURE__ */ e(_e, { label: n, placement: "right", children: /* @__PURE__ */ e(Le, { icon: t, ...i }) }), Ht = (n) => ie() ? /* @__PURE__ */ e(Qn, { ...n }) : /* @__PURE__ */ e(De, { ...n }), Tn = ({
   children: n,
   label: t,
   icon: i,
@@ -661,7 +658,7 @@ const te = ({
       }
     )
   }
-), Gt = ({
+), Ut = ({
   children: n,
   label: t,
   leftIcon: i,
@@ -682,13 +679,13 @@ const te = ({
       children: /* @__PURE__ */ e(Ln, { children: n })
     }
   );
-}, Ot = (n) => /* @__PURE__ */ e(
+}, qt = (n) => /* @__PURE__ */ e(
   Ve,
   {
     color: m("--lhds-color-ui-400"),
     ...n
   }
-), Vt = ({ numItemsSelected: n, label: t, afterLabelContent: i, rightContent: o }) => /* @__PURE__ */ r(
+), Et = ({ numItemsSelected: n, label: t, afterLabelContent: i, rightContent: o }) => /* @__PURE__ */ r(
   c,
   {
     indent: 3,
@@ -716,9 +713,9 @@ const te = ({
       /* @__PURE__ */ e(c, { gap: 2, children: o })
     ]
   }
-), Kt = ({ children: n }) => /* @__PURE__ */ e(c, { spacing: 0.5, indent: 0.5, flex: 1, children: n }), Xn = "_productCard_19x6b_1", Jn = {
+), Gt = ({ children: n }) => /* @__PURE__ */ e(c, { spacing: 0.5, indent: 0.5, flex: 1, children: n }), Xn = "_productCard_19x6b_1", Jn = {
   productCard: Xn
-}, Zt = ({
+}, Ot = ({
   renderSelectedProductCard: n,
   renderEditButton: t,
   children: i,
@@ -759,7 +756,7 @@ const te = ({
       )
     ]
   }
-), Yn = ({ children: n }) => /* @__PURE__ */ e(f, { variant: "bold", style: { fontSize: "2.0rem" }, children: n }), Qt = ({
+), Yn = ({ children: n }) => /* @__PURE__ */ e(f, { variant: "bold", style: { fontSize: "2.0rem" }, children: n }), Vt = ({
   description: n,
   subDescription: t,
   descriptionTags: i,
@@ -812,7 +809,7 @@ const te = ({
       b
     ] })
   ] });
-}, Tt = ({ renderImage: n }) => /* @__PURE__ */ r(p, { children: [
+}, Kt = ({ 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(
@@ -835,13 +832,13 @@ const te = ({
     /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(R, { width: "150px", height: "1.4rem", borderRadius: "8px" }) }),
     /* @__PURE__ */ e(x, {})
   ] })
-] }), Xt = ({
+] }), Zt = ({
   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
-] }), Jt = ({
+] }), Qt = ({
   title: n,
   variant: t = "normal",
   loading: i,
@@ -936,7 +933,7 @@ const te = ({
     default:
       xe(n);
   }
-}, Yt = ({ iconLeft: n, ...t }) => /* @__PURE__ */ e(
+}, Tt = ({ iconLeft: n, ...t }) => /* @__PURE__ */ e(
   d,
   {
     borderRadius: "16px",
@@ -991,7 +988,7 @@ const te = ({
     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), ei = (n) => {
+}, tt = (n, t) => n === t || de.indexOf(n) > de.indexOf(t), Xt = (n) => {
   const { deviceSize: t } = Be();
   return {
     visible: U(
@@ -999,7 +996,7 @@ const te = ({
       [t, n]
     )
   };
-}, ni = ({
+}, Jt = ({
   images: n,
   altLabelPrevious: t,
   altLabelZoomIn: i,
@@ -1174,52 +1171,52 @@ const te = ({
 });
 export {
   tn as ActionMenuFlatButton,
-  Ct as ActionMenuPrimaryButton,
-  _t as ActionMenuSecondaryButton,
-  yt as CheckboxMenu,
+  ft as ActionMenuPrimaryButton,
+  xt as ActionMenuSecondaryButton,
+  vt as CheckboxMenu,
   Pn as Collapsible,
-  At as CollapsibleEmptyContent,
-  Pt as CollapsibleGroupHeading,
-  jt as CollapsibleList,
-  Ft as CollapsibleWithCheckbox,
+  jt as CollapsibleEmptyContent,
+  zt as CollapsibleGroupHeading,
+  Mt as CollapsibleList,
+  Rt as CollapsibleWithCheckbox,
   Dn as ErrorPanel,
-  $t as ErrorScreen,
-  ni as ImageCarousel,
+  Ft as ErrorScreen,
+  Jt as ImageCarousel,
   Wn as LoadingPanel,
-  Lt as LoadingScreen,
-  wt as NavBar,
+  Pt as LoadingScreen,
+  Ct as NavBar,
   dn as NavBarButton,
-  Bt as NavBarHeading,
-  It as NavBarNotificationButton,
-  kt as NavBarPopoverButton,
-  St as NavBarSearchField,
-  Nt as NavBarUserButton,
-  Mt as Notification,
+  _t as NavBarHeading,
+  wt as NavBarNotificationButton,
+  yt as NavBarPopoverButton,
+  Bt as NavBarSearchField,
+  kt as NavBarUserButton,
+  It as Notification,
   we as NotificationHeader,
-  Rt as NotificationList,
-  Dt as PageHeader,
-  Wt as PageHeaderRow,
-  Ht as PageHeading,
-  Zt as ProductCard,
-  Qt as ProductCardContentItem,
-  Tt as ProductCardContentItemSkeletor,
-  Jt as ProductSummaryCard,
-  Yt as ProductSummaryCardSkeletor,
-  Kt as SelectedItemsActionsPadding,
-  Vt as SelectedItemsActionsPanel,
-  Xt as SelectedProductCard,
-  Ut as SidebarMenu,
-  Gt as SidebarMenuCollapsible,
+  St as NotificationList,
+  At as PageHeader,
+  $t as PageHeaderRow,
+  Lt as PageHeading,
+  Ot as ProductCard,
+  Vt as ProductCardContentItem,
+  Kt as ProductCardContentItemSkeletor,
+  Qt as ProductSummaryCard,
+  Tt as ProductSummaryCardSkeletor,
+  Gt as SelectedItemsActionsPadding,
+  Et as SelectedItemsActionsPanel,
+  Zt as SelectedProductCard,
+  Dt as SidebarMenu,
+  Ut as SidebarMenuCollapsible,
   Ln as SidebarMenuCollapsibleGroupBox,
   Zn as SidebarMenuHeading,
-  Et as SidebarMenuLink,
-  Ot as SidebarMenuSeparator,
-  qt as SidebarRailMenu,
-  zt as Toast,
+  Ht as SidebarMenuLink,
+  qt as SidebarMenuSeparator,
+  Wt as SidebarRailMenu,
+  Nt as Toast,
   wn as UnreadDot,
   Bn as getIconBgColorFromVariant,
   tt as isDeviceSameOrLarger,
   Be as useDeviceSize,
-  ei as useLayoutVisibility
+  Xt as useLayoutVisibility
 };
 //# sourceMappingURL=index.es.js.map