@sonic-equipment/ui 0.0.119 → 120.0.0

package/dist/intl/formatted-message.js

@@ -0,0 +1,6 @@
+"use client";
+import { useFormattedMessage } from './use-formatted-message.js';
+
+const FormattedMessage = ({ fallbackValue, id, optional, replacementValues, }) => useFormattedMessage()(id, { fallbackValue, optional, replacementValues });
+
+export { FormattedMessage };

package/dist/intl/intl-context.js

@@ -0,0 +1,10 @@
+"use client";
+import { createContext } from 'react';
+
+const IntlContext = createContext({
+    cultureCode: 'en-GB',
+    formattedMessage: id => id,
+    updateCultureCode: () => { },
+});
+
+export { IntlContext };

package/dist/intl/intl-provider.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { IntlContext } from './intl-context.js';
+
+function IntlProvider({ children, cultureCode: _cultureCode, formattedMessage, }) {
+    const [cultureCode, updateCultureCode] = useState(_cultureCode);
+    return (jsx(IntlContext.Provider, { value: {
+            cultureCode,
+            formattedMessage,
+            updateCultureCode,
+        }, children: children }));
+}
+
+export { IntlProvider };

package/dist/intl/types.js

@@ -0,0 +1,17 @@
+function isCountryCode(value) {
+    if (typeof value !== 'string')
+        return false;
+    return /^[A-Z]{2}$/.test(value);
+}
+function isLanguageCode(value) {
+    if (typeof value !== 'string')
+        return false;
+    return /^[A-Z]{2}$/.test(value);
+}
+function isCultureCode(value) {
+    if (typeof value !== 'string')
+        return false;
+    return /^[a-z]{2}-[A-Z]{2}$/.test(value);
+}
+
+export { isCountryCode, isCultureCode, isLanguageCode };

package/dist/intl/use-culture-code.js

@@ -0,0 +1,14 @@
+"use client";
+import { useContext } from 'react';
+import { IntlContext } from './intl-context.js';
+
+function useCultureCode() {
+    const { cultureCode } = useContext(IntlContext);
+    return cultureCode;
+}
+function useUpdateCultureCode() {
+    const { updateCultureCode } = useContext(IntlContext);
+    return updateCultureCode;
+}
+
+export { useCultureCode, useUpdateCultureCode };

package/dist/intl/use-formatted-message.js

@@ -0,0 +1,17 @@
+"use client";
+import { useContext } from 'react';
+import { IntlContext } from './intl-context.js';
+
+function useFormattedMessage() {
+    const { formattedMessage } = useContext(IntlContext);
+    const formatFunction = (id, options) => formattedMessage(id, options);
+    function pluralize(translationIdOrPrefix, translationIdOrCount, count) {
+        return formatFunction((typeof translationIdOrCount === 'number'
+            ? `${translationIdOrPrefix}.${translationIdOrCount === 1 ? 'singular' : 'plural'}`
+            : `${translationIdOrPrefix}.${translationIdOrCount}.${count === 1 ? 'singular' : 'plural'}`));
+    }
+    formatFunction.pluralize = pluralize;
+    return formatFunction;
+}
+
+export { useFormattedMessage };

package/dist/intl/use-language-code.js

@@ -0,0 +1,11 @@
+"use client";
+import { useContext } from 'react';
+import { IntlContext } from './intl-context.js';
+import { getLanguageCodeFromCultureCode } from './utils.js';
+
+function useLanguageCode() {
+    const { cultureCode } = useContext(IntlContext);
+    return getLanguageCodeFromCultureCode(cultureCode);
+}
+
+export { useLanguageCode };

package/dist/intl/utils.js

@@ -0,0 +1,29 @@
+import { isLanguageCode } from './types.js';
+
+function getLanguageCodeFromCultureCode(cultureCode) {
+    const languageCode = cultureCode.split('-')[0]?.toUpperCase();
+    if (!isLanguageCode(languageCode))
+        throw new Error('Language code is not found');
+    return languageCode;
+}
+function spireTranslateAdapter(translate) {
+    return (id, { fallbackValue, optional, replacementValues } = {}) => {
+        const message = translate(id, ...(replacementValues
+            ? Object.keys(replacementValues)
+                .map(Number.parseFloat)
+                .filter(index => !Number.isNaN(index))
+                .reduce((acc, index) => {
+                const replacementValue = replacementValues[index];
+                if (replacementValue === undefined)
+                    return acc;
+                acc[index] = replacementValue;
+                return acc;
+            }, [])
+            : []));
+        if (optional && message === undefined)
+            console.warn(`Missing translation with id: ${id}`);
+        return message || fallbackValue || id;
+    };
+}
+
+export { getLanguageCodeFromCultureCode, spireTranslateAdapter };

package/dist/lists/download-document-list/download-document-list.js

@@ -0,0 +1,16 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { StrokeDownloadIcon } from '../../icons/stroke/stroke-download-icon.js';
+import { FeatureList } from '../feature-list/feature-list.js';
+import styles from './download-document-list.module.css.js';
+
+function DownloadDocumentList({ className, documents, }) {
+    return (jsx(FeatureList, { className: className, features: documents.map(document => ({
+            id: `${document.id}`,
+            value: jsx(DownloadListItem, { document: document }, document.id),
+        })), style: { valueAlignment: 'left' } }));
+}
+function DownloadListItem({ document: { href, name }, }) {
+    return (jsxs("div", { className: styles['download-list-item'], children: [jsx(StrokeDownloadIcon, {}), jsx("a", { href: href, rel: "noreferrer", target: "_blank", children: name })] }));
+}
+
+export { DownloadDocumentList };

package/dist/lists/download-document-list/download-document-list.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"download-list-item":"download-document-list-module-Z023h"};
+
+export { styles as default };

package/dist/lists/feature-list/feature-list.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { SolidCloseIcon } from '../../icons/solid/solid-close-icon.js';
+import { SolidOkayIcon } from '../../icons/solid/solid-okay-icon.js';
+import styles from './feature-list.module.css.js';
+
+function FeatureKey({ label }) {
+    return label;
+}
+function FeatureValue({ value }) {
+    if (typeof value === 'boolean' ||
+        (typeof value === 'string' &&
+            (value.toLowerCase() === 'true' || value.toLowerCase() === 'false'))) {
+        return (jsx(Fragment, { children: String(value).toLowerCase() === 'true' ? (jsx(SolidOkayIcon, { className: styles['icon-true'] })) : (jsx(SolidCloseIcon, { className: styles['icon-false'] })) }));
+    }
+    return jsx("div", { className: styles.value, children: value });
+}
+function FeatureList({ className, features, style }) {
+    return (jsx("div", { className: clsx(styles['feature-list'], className), children: features.map(({ id, key, value }) => (jsxs("div", { className: styles.row, children: [jsx("div", { className: clsx(styles.column, styles['column-label'], styles[`alignment-${style?.keyAlignment || 'left'}`]), children: key && jsx(FeatureKey, { ...key }) }), jsx("div", { className: clsx(styles.column, styles['column-value'], styles[`alignment-${style?.valueAlignment || 'right'}`]), children: Array.isArray(value) ? (value.map((value, index) => (jsx(FeatureValue, { value: value }, `${id}-${index}`)))) : (jsx(FeatureValue, { value: value })) })] }, id))) }));
+}
+
+export { FeatureList };

package/dist/lists/feature-list/feature-list.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"feature-list":"feature-list-module-cxc8U","row":"feature-list-module-tTJ2r","column":"feature-list-module-Tw0KD","column-label":"feature-list-module-J6Xfj","alignment-right":"feature-list-module-deI1-","column-value":"feature-list-module-CqSj1","icon-true":"feature-list-module-ojZvf","icon-false":"feature-list-module-4IjrA"};
+
+export { styles as default };

package/dist/lists/orderline-list/orderline-list.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React, { Children } from 'react';
+import { Link } from '../../buttons/link/link.js';
+import { StrokeTrashIcon } from '../../icons/stroke/stroke-trash-icon.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { ConfirmationDialog } from '../../modals/confirmation/confirmation-dialog.js';
+import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
+import styles from './orderline-list.module.css.js';
+
+function OrderLineList({ children, onRemoveAll }) {
+    const t = useFormattedMessage();
+    const { close, isOpen, open } = useDisclosure();
+    const count = React.Children.count(children);
+    const productString = count === 1 ? t('Product') : t('Products');
+    function handleRemoveAll() {
+        if (!onRemoveAll)
+            return;
+        open();
+    }
+    return (jsxs(Fragment, { children: [jsxs("div", { className: styles['orderline-list'], children: [jsxs("div", { className: styles.header, children: [jsx("p", { className: styles.count, children: `${count} ${productString.toLowerCase()}` }), onRemoveAll && (jsxs(Link, { className: styles['lnk-remove-all'], "data-test-selector": "cartlineHeader_removeAll", onClick: handleRemoveAll, children: [jsx(StrokeTrashIcon, {}), jsx(FormattedMessage, { id: "Remove all" })] }))] }), jsx("div", { className: styles.items, children: Children.map(children, (child, index) => (jsx("div", { className: styles.item, children: child }, index))) })] }), onRemoveAll && (jsx(ConfirmationDialog, { isOpen: isOpen, onCancel: close, onConfirm: onRemoveAll, title: t('Are you sure you want to remove all items from your cart?') }))] }));
+}
+
+export { OrderLineList };

package/dist/lists/orderline-list/orderline-list.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"orderline-list":"orderline-list-module-v-FqO","header":"orderline-list-module-JTZK3","count":"orderline-list-module-SMPUR","lnk-remove-all":"orderline-list-module-2WpLl","items":"orderline-list-module-5COK6","item":"orderline-list-module-2p-Jd"};
+
+export { styles as default };

package/dist/lists/product-overview-grid/product-overview-grid.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Children } from 'react';
+import { ProgressCircle } from '../../loading/progress-circle.js';
+import styles from './product-overview-grid.module.css.js';
+
+function ProductOverviewGrid({ children, isLoading, }) {
+    return (jsxs("div", { className: styles['product-grid'], children: [Children.map(children, (child, index) => (jsx("div", { className: styles['grid-item'], children: child }, index))), isLoading && (jsx("div", { className: styles['loading-panel'], children: jsx(ProgressCircle, { className: styles['progress-circle'] }) }))] }));
+}
+
+export { ProductOverviewGrid };

package/dist/lists/product-overview-grid/product-overview-grid.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"product-grid":"product-overview-grid-module-bzys-","loading-panel":"product-overview-grid-module-XikkF","fade-in":"product-overview-grid-module-A6CS7","progress-circle":"product-overview-grid-module-DWnnI","fade-in-spinner":"product-overview-grid-module-r-wvY","grid-item":"product-overview-grid-module-MlUVA"};
+
+export { styles as default };

package/dist/lists/ul/list.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './list.module.css.js';
+
+function List({ children }) {
+    return jsx("ul", { className: styles.list, children: children });
+}
+function ListItem({ icon, text }) {
+    return (jsxs("li", { className: styles['list-item'], children: [icon && jsx("span", { className: styles.icon, children: icon }), text] }));
+}
+
+export { List, ListItem };

package/dist/lists/ul/list.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"list":"list-module-7-DFP","list-item":"list-module-YMLVY","icon":"list-module-wTIOA"};
+
+export { styles as default };

package/dist/loading/blank-page-spacer.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from './blank-page-spacer.module.css.js';
+
+function BlankPageSpacer({ children }) {
+    return jsx("div", { className: styles['blank-page-spacer'], children: children });
+}
+
+export { BlankPageSpacer };

package/dist/loading/blank-page-spacer.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"blank-page-spacer":"blank-page-spacer-module-lXxle"};
+
+export { styles as default };

package/dist/loading/loading-overlay.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { ProgressCircle } from './progress-circle.js';
+import styles from './loading-overlay.module.css.js';
+
+function LoadingOverlay() {
+    return (jsx("div", { className: styles['loading-overlay'], children: jsx(ProgressCircle, {}) }));
+}
+
+export { LoadingOverlay };

package/dist/loading/loading-overlay.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"loading-overlay":"loading-overlay-module-L67Gy"};
+
+export { styles as default };

package/dist/loading/progress-circle.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './progress-circle.module.css.js';
+
+function ProgressCircle({ className }) {
+    return (jsxs("svg", { className: clsx(styles['progress-circle'], className), viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [jsx("title", { children: "Spinner" }), jsxs("defs", { children: [jsx("pattern", { height: "100%", id: "pattern-1", patternUnits: "objectBoundingBox", width: "100%", children: jsx("use", { xlinkHref: "#image-2" }) }), jsx("image", { height: "24", id: "image-2", width: "24", xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAB7UlEQVRIDZ2VSaoCQQyG01rOoBtBr+YZXXsFL+BGEHcqDuCE89SPL480hdpiGYil3an/S1KDUavViq/Xq1wul8RPp5Ocz2dhPB6PiR8OB42RAHO5XE7D4zgW/PF4CM/u97tks1n1TCYjURSpB2hraALglw8BQGXOuQQSKk68y+fzL9lRBQAqAUIlVkUoxBUKBZ3sC1irbrdbUoX/PgTyAqDXmFVBBVRCFfYuGMBk67UvRCUA2FFAfgKUSiWhFTgQA9ESjLVgC7NWwEPNFYtFFUEICJnigAxCFbvd7jcAFVi/gbDoCALmOzCMAzebzUILEFculxVgOwcIDqRSqaiTBDadToMhziYDwBgNRmW0rdFoSLPZ1PeDwUDHbz+iTqejyv5VYHuekbVggavVqkLq9fq32hqnLTJxdgmijPQeYSqs1Woa3G63g8QJ1haZKMJkjDgLjLi/Nbvd7m8ARCxry9x2jyn2ej2ZTCb28+tRK/Azpy3vrN/vy2azeffq4zM9aLTFP1jPM4bDoWbPH06o6WXn9/lZgDMxGo1kuVwG/5uhlfkkTsB4PJb5fC7b7VYPH89C7P9GS5nBLYr4er2W/X6vhy4lNPXxR8BisdDWkD13Ee0KtVQAgqvVSncO2XNlc3WEWirAxLmmgf0K+ANZ6DTlvO5jwwAAAABJRU5ErkJggg==" })] }), jsx("g", { fill: "none", fillRule: "evenodd", id: "Page-1", stroke: "none", strokeWidth: "1", children: jsx("path", { d: "M12,0 C18.627417,0 24,5.372583 24,12 C24,14.7277828 23.0855773,17.3196292 21.4324752,19.4188392 C19.1717866,22.2895997 15.7255176,24 12,24 C11.2636203,24 10.6666667,23.4030463 10.6666667,22.6666667 C10.6666667,21.930287 11.2636203,21.3333333 12,21.3333333 C14.8994206,21.3333333 17.5771113,20.0043823 19.3374325,17.7690188 C20.6234737,16.1359252 21.3333333,14.1238938 21.3333333,12 C21.3333333,6.84534234 17.1546577,2.66666667 12,2.66666667 C6.84534234,2.66666667 2.66666667,6.84534234 2.66666667,12 C2.66666667,14.4546154 3.61656005,16.756214 5.28844833,18.485859 C5.80023235,19.015323 5.78589988,19.8594213 5.25643588,20.3712053 C4.72697187,20.8829893 3.88287357,20.8686569 3.37108955,20.3391928 C1.22326178,18.1171666 0,15.1531945 0,12 C0,5.372583 5.372583,0 12,0 Z", fill: "url(#pattern-1)", fillRule: "nonzero", id: "Spinner" }) })] }));
+}
+
+export { ProgressCircle };

package/dist/loading/progress-circle.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K"};
+
+export { styles as default };

package/dist/media/image/image.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import clsx from 'clsx';
+import { isResponsiveImage } from '../../shared/model/image.js';
+import styles from './image.module.css.js';
+
+function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/image/upload/v1716545808/images/product-card/fallback_p6ngjz.svg', fit = 'cover', height, image, loading = 'eager', title, width, }) {
+    const [hasError, setHasError] = useState(false);
+    const handleError = () => {
+        setHasError(true);
+    };
+    const props = {
+        className,
+        fallbackSrc,
+        fit,
+        height,
+        loading,
+        onError: handleError,
+        title,
+        width,
+    };
+    if (isResponsiveImage(image)) {
+        return jsx(PictureComponent, { ...props, hasError: hasError, image: image });
+    }
+    return jsx(ImageComponent, { ...props, hasError: hasError, image: image });
+}
+function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
+    if (!image)
+        return (jsx("img", { alt: "Missing", className: clsx(styles.image, className, styles[fit], styles['has-error']), src: fallbackSrc, ...rest }));
+    const srcSet = hasError
+        ? undefined
+        : `${image[1]} 1x, ${image[2]} 2x, ${image[3]} 3x`;
+    return (jsx("img", { alt: image.altText, className: clsx(styles.image, className, styles[fit], {
+            [styles['has-error']]: hasError,
+        }), src: hasError ? fallbackSrc : image[3], srcSet: srcSet, ...rest }));
+}
+function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
+    if (!image)
+        return (jsx("picture", { className: clsx(styles.picture, className), children: jsx("img", { alt: "Missing", className: clsx(styles.image, styles[fit], styles['has-error']), src: fallbackSrc, ...rest }) }));
+    return (jsxs("picture", { className: clsx(styles.picture, className), children: [jsx("source", { media: "(max-width: 768px)", srcSet: `${image.sm[1]} 1x, ${image.sm[2]} 2x, ${image.sm[3]} 3x` }), jsx("source", { media: "(max-width: 1439px)", srcSet: `${image.md[1]} 1x, ${image.md[2]} 2x, ${image.md[3]} 3x` }), jsx("source", { media: "(min-width: 1440px)", srcSet: `${image.lg[1]} 1x, ${image.lg[2]} 2x, ${image.lg[3]} 3x` }), jsx("img", { alt: image.altText, className: clsx(styles.image, styles[fit], {
+                    [styles['has-error']]: hasError,
+                }), src: hasError ? fallbackSrc : image.lg[3], ...rest })] }));
+}
+
+export { Image };

package/dist/media/image/image.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe","has-error":"image-module-LM93B","picture":"image-module-pNYjR"};
+
+export { styles as default };

package/dist/media/image-grid/images-grid.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Image } from '../image/image.js';
+import styles from './images-grid.module.css.js';
+
+const mainImagePosition = {
+    1: 0,
+    2: 0,
+    3: 0,
+    4: 0,
+    5: 2,
+};
+function ImagesGrid({ images, onSelectImage }) {
+    const positionIndex = mainImagePosition[images.length] || 0;
+    const imageList = [
+        ...images.slice(1, positionIndex + 1),
+        images[0],
+        ...images.slice(positionIndex + 1),
+    ];
+    function handleKeydown(event, image) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onSelectImage?.(image, images.indexOf(image));
+        }
+    }
+    return (jsx("div", { className: styles['images-grid'], "data-count": images.length, children: imageList.map((image, index) => image && (jsx("div", { "aria-label": `Open image ${index}`, className: clsx(styles['grid-item'], {
+                [styles.clickable]: Boolean(onSelectImage),
+            }), onClick: () => onSelectImage?.(image, index), onKeyDown: event => handleKeydown(event, image), role: "button", tabIndex: 0, children: jsx(Image, { className: styles.image, fit: "contain", image: image, title: image.altText }) }, index))) }));
+}
+
+export { ImagesGrid };

package/dist/media/image-grid/images-grid.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"images-grid":"images-grid-module-i5868","grid-item":"images-grid-module-nY9-n","image":"images-grid-module-TahRy","clickable":"images-grid-module-Ruktz"};
+
+export { styles as default };

package/dist/media/image-lightbox/image-lightbox.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import clsx from 'clsx';
+import Navigation from '../../node_modules/.pnpm/swiper@11.1.14/node_modules/swiper/modules/navigation.js';
+import Thumb from '../../node_modules/.pnpm/swiper@11.1.14/node_modules/swiper/modules/thumbs.js';
+import { Swiper, SwiperSlide } from '../../node_modules/.pnpm/swiper@11.1.14/node_modules/swiper/swiper-react.js';
+import { CarouselNavigationButton } from '../../carousel/carousel-navigation-button.js';
+import { CarouselPagination } from '../../carousel/pagination/pagination.js';
+import { Image } from '../image/image.js';
+import styles from './image-lightbox.module.css.js';
+
+function ImageLightbox({ images, initialSelectedIndex = 0, onZoom, variant = 'sm', }) {
+    const [thumbsSwiper, setThumbsSwiper] = useState();
+    const [currentIndex, setCurrentIndex] = useState(initialSelectedIndex);
+    const nextEl = useRef(null);
+    const prevEl = useRef(null);
+    const mainSwiperRef = useRef(null);
+    function handleZoom(e) {
+        const target = e.target;
+        const clientRect = target?.getBoundingClientRect();
+        if (!clientRect)
+            return;
+        const height = clientRect.height;
+        const clientY = e.clientY - clientRect.top;
+        const scrollPercentage = clientY / height;
+        onZoom?.({ index: currentIndex, scrollPercentage });
+    }
+    return (jsxs("div", { className: clsx(styles['image-lightbox'], styles[variant]), children: [jsx(Swiper, { watchSlidesProgress: true, className: styles['thumbs-swiper'], direction: variant === 'sm' ? 'horizontal' : 'vertical', modules: [Thumb], onSwiper: swiper => setThumbsSwiper(swiper), slidesPerView: "auto", spaceBetween: 8, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles.slide, children: jsx("div", { className: styles.thumb, children: jsx(Image, { className: styles.image, fit: "contain", height: 80, image: image, title: "Image", width: 80 }) }) }, index))) }), jsxs("div", { className: styles['main-swiper'], children: [jsx(Swiper, { initialSlide: initialSelectedIndex, modules: [Thumb, Navigation], navigation: {
+                            nextEl: nextEl.current,
+                            prevEl: prevEl.current,
+                        }, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onBeforeInit: swiper => (mainSwiperRef.current = swiper), slidesPerView: 1, thumbs: { swiper: thumbsSwiper }, children: images.map((image, index) => (jsx(SwiperSlide, { className: styles.slide, children: jsx("button", { className: styles['active-image'], onClick: handleZoom, type: "button", children: jsx(Image, { className: styles.image, fit: "contain", image: image, title: "Image" }) }) }, index))) }), jsx("div", { className: styles.pagination, children: jsx(CarouselPagination, { contained: true, currentPage: currentIndex + 1, numberOfPages: images.length, onChange: pageNumber => mainSwiperRef.current?.slideTo(pageNumber - 1) }) }), variant === 'lg' && (jsxs(Fragment, { children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles['navigation-button'], styles['navigation-button-prev']), direction: "previous" }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles['navigation-button'], styles['navigation-button-next']), direction: "next" })] }))] })] }));
+}
+
+export { ImageLightbox };

package/dist/media/image-lightbox/image-lightbox.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"image-lightbox":"image-lightbox-module-9k3oJ","slide":"image-lightbox-module-K5Gd0","active-image":"image-lightbox-module-UNPOi","thumb":"image-lightbox-module-PUOMT","image":"image-lightbox-module-4RKLg","main-swiper":"image-lightbox-module-hAy3O","pagination":"image-lightbox-module-nN1Kr","sm":"image-lightbox-module-1idAN","thumbs-swiper":"image-lightbox-module-Xbxcn","lg":"image-lightbox-module--V8Xo","navigation-button":"image-lightbox-module-RP7KS","navigation-button-prev":"image-lightbox-module-wOPYF","navigation-button-next":"image-lightbox-module-knizp"};
+
+export { styles as default };

package/dist/media/zoom-image/zoom-image.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { Modal } from '../../modals/modal/modal.js';
+import { Image } from '../image/image.js';
+import styles from './zoom-image.module.css.js';
+
+function ZoomImage({ currentImage, isZoomed = false, onClose, scrollFromTopPercentage = 0.5, }) {
+    // TODO: Fix pinch-and-zoom on mobile
+    // This feature is currently disabled on mobile devices,
+    // because the react-aria modal internally const the hook
+    // 'usePreventScroll' which prevents the pinch-and-zoom.
+    // To fix this the fullscreen image should not use a modal,
+    // but a custom container that allows pinch-and-zoom.
+    // Once this is fixed the hook useEnableMobileZoom can be enabled
+    // to remove the viewport meta tag temporarily.
+    // //useEnableMobileZoom({ isEnabled: isZoomed })
+    if (!isZoomed || !currentImage)
+        return null;
+    return (jsx(Modal, { className: { modal: styles.modal, overlay: styles['zoomed-overlay'] }, hasCloseButton: true, isDismissable: true, isFullScreen: true, isKeyboardDismissDisabled: false, isOpen: isZoomed, onOpenChange: onClose, children: jsx("div", { ref: element => {
+                setTimeout(() => {
+                    if (!element)
+                        return;
+                    element.scrollTo(0, element.scrollHeight * scrollFromTopPercentage -
+                        element.clientHeight / 2);
+                }, 100);
+            }, className: styles['zoomed-container'], onClick: onClose, onKeyUp: () => {
+                // Accessibility rules prescribe that an element with a click
+                // handler must also be keyboardd accessible.
+                // In this case the modal already handles the escape key.
+                // This is a no-op at the moment.
+            }, role: "link", tabIndex: 0, children: jsx(Image, { className: styles['zoomed-image'], image: currentImage, title: currentImage.altText }) }) }));
+}
+
+export { ZoomImage };

package/dist/media/zoom-image/zoom-image.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"zoomed-overlay":"zoom-image-module-taKeI","modal":"zoom-image-module-IAvx-","zoomed-container":"zoom-image-module-ZASH-","zoomed-image":"zoom-image-module-D3Aa-"};
+
+export { styles as default };

package/dist/modals/confirmation/confirmation-dialog.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { Dialog } from '../dialog/dialog.js';
+import styles from './confirmation-dialog.module.css.js';
+
+function ConfirmationDialog({ cancelLabel = 'Cancel', isOpen, onCancel, onConfirm, submitLabel = 'Continue', title, }) {
+    const t = useFormattedMessage();
+    return (jsx(Dialog, { isDismissable: true, cancelLabel: t(cancelLabel), className: { dialog: styles['confirmation-dialog'] }, isOpen: isOpen, onOpenChange: onCancel, onSubmit: onConfirm, submitLabel: t(submitLabel), title: title }));
+}
+
+export { ConfirmationDialog };

package/dist/modals/confirmation/confirmation-dialog.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"confirmation-dialog":"confirmation-dialog-module-Up-BC"};
+
+export { styles as default };

package/dist/modals/dialog/dialog.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Dialog as Dialog$1, Form } from 'react-aria-components';
+import clsx from 'clsx';
+import { Button } from '../../buttons/button/button.js';
+import { IconButton } from '../../buttons/icon-button/icon-button.js';
+import { StrokeCloseboxIcon } from '../../icons/stroke/stroke-closebox-icon.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { Heading } from '../../typography/heading/heading.js';
+import { Modal } from '../modal/modal.js';
+import styles from './dialog.module.css.js';
+
+function Footer({ cancelLabel, close, submitLabel }) {
+    return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", size: "md", type: "submit", children: jsx(FormattedMessage, { id: submitLabel }) }), jsx(Button, { color: "secondary", onClick: close, size: "md", variant: "outline", children: jsx(FormattedMessage, { id: cancelLabel }) })] }));
+}
+function Dialog({ allowClose = true, cancelLabel = 'Close', children, className, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel = 'Submit', title, validationErrors, }) {
+    return (jsx(Modal, { className: clsx(styles['modal-overlay'], typeof className === 'string' ? className : className?.modal), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles.dialog, typeof className === 'string' ? undefined : className?.dialog), children: ({ close }) => (jsxs(Form, { className: clsx(styles.form, typeof className === 'string' ? undefined : className?.form), onSubmit: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onSubmit?.(e);
+                }, validationErrors: validationErrors, children: [jsxs("header", { className: clsx(styles.header, typeof className === 'string' ? undefined : className?.header), children: [!hideTitle && (jsx(Heading, { className: clsx(styles.heading, typeof className === 'string'
+                                    ? undefined
+                                    : className?.heading), size: "xs", children: title })), hasCloseButton && (jsx("div", { className: clsx(styles.close, typeof className === 'string'
+                                    ? undefined
+                                    : className?.close), children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) }))] }), jsx("div", { className: clsx(styles.content, typeof className === 'string' ? undefined : className?.content), children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: clsx(styles.footer, typeof className === 'string' ? undefined : className?.footer), children: footer instanceof Function
+                            ? footer({ cancelLabel, close, submitLabel })
+                            : footer })] })) }) }));
+}
+
+export { Dialog };

package/dist/modals/dialog/dialog.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"dialog":"dialog-module-qKzgy","header":"dialog-module-ZnsAe","close":"dialog-module-Y7Tqg","footer":"dialog-module-y7Axm"};
+
+export { styles as default };

package/dist/modals/favorite/add-to-favorite-dialog.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { Button } from '../../buttons/button/button.js';
+import { Select } from '../../forms/select/select.js';
+import { TextField } from '../../forms/text-field/text-field.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { ProgressCircle } from '../../loading/progress-circle.js';
+import { useCreateWishList } from '../../shared/api/storefront/hooks/wishlist/use-create-wishlist.js';
+import { useFetchWishLists } from '../../shared/api/storefront/hooks/wishlist/use-fetch-wishlists.js';
+import { WishListNameAlreadyExistsError } from '../../shared/api/storefront/services/wishlist-service.js';
+import { Dialog } from '../dialog/dialog.js';
+import styles from './add-to-favorite-dialog.module.css.js';
+
+function InnerAddToFavoriteDialog({ isOpen, onCancel, onSubmit, }) {
+    const t = useFormattedMessage();
+    const { data: newWishListId, error: addWishListError, isPending, isSuccess, mutate: addWishList, } = useCreateWishList();
+    const { data: wishLists, error: fetchWishListError, isFetching, } = useFetchWishLists();
+    const [selectedWishListid, setSelectedWishListId] = useState();
+    const [isCreatingNewList, setIsCreatingNewList] = useState(false);
+    const [newWishListName, setNewWishListName] = useState('');
+    const isLoading = isPending || isFetching;
+    useEffect(() => {
+        if (!isSuccess || !newWishListId || !isOpen)
+            return;
+        onSubmit(newWishListId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isSuccess]);
+    const wishListOptions = wishLists?.wishListCollection?.reduce((options, list) => ({ ...options, [list.id]: list.name }), { new: t('Create new list') }) || { new: t('Create new list') };
+    const allowSubmit = Boolean(!isLoading && (isCreatingNewList ? newWishListName : selectedWishListid));
+    const allowCancel = !isLoading;
+    function handleOnSubmit() {
+        if (isCreatingNewList) {
+            return addWishList({ name: newWishListName.trim() });
+        }
+        if (selectedWishListid)
+            onSubmit(selectedWishListid);
+    }
+    return (jsx(Dialog, { allowClose: !isLoading, footer: jsxs("div", { className: styles['footer-button-panel'], children: [jsx(Button, { isDisabled: !allowSubmit, onClick: handleOnSubmit, type: "submit", children: t('Submit') }), jsx(Button, { color: "secondary", isDisabled: !allowCancel, onClick: onCancel, variant: "outline", children: t('Cancel') })] }), isDismissable: true, isKeyboardDismissDisabled: false, isOpen: isOpen, onOpenChange: onCancel, onSubmit: handleOnSubmit, title: t('Add to list'), validationErrors: addWishListError
+            ? {
+                wishListName: addWishListError instanceof WishListNameAlreadyExistsError
+                    ? t('List name already exists')
+                    : t('An unexpected error occured'),
+            }
+            : undefined, children: isFetching ? (jsxs("div", { className: styles['loading-panel'], children: [jsx("p", { children: "Loading..." }), jsx(ProgressCircle, {})] })) : fetchWishListError ? (jsx("div", { children: t('An unexpected error occured') })) : (jsxs("div", { className: styles.content, children: [jsx(Select, { isDisabled: isLoading, label: t('Select a list'), onChange: wishListId => {
+                        const isCreateNewList = wishListId === 'new';
+                        setIsCreatingNewList(isCreateNewList);
+                        setSelectedWishListId(isCreateNewList ? undefined : wishListId);
+                    }, options: wishListOptions, selectedOption: selectedWishListid, variant: "solid" }), isCreatingNewList && (jsx(TextField, { autoFocus: true, isRequired: true, showLabel: true, isDisabled: isLoading, label: t('New list name'), maxLength: 100, name: "wishListName", onChange: setNewWishListName, placeholder: t('New list name'), value: newWishListName }))] })) }));
+}
+function AddToFavoriteDialog({ isOpen, onCancel, onSubmit, }) {
+    /* The inner component is explicitly unmounted to
+     * clear out all state between opening and closing
+     * of the dialog*/
+    if (!isOpen)
+        return null;
+    return (jsx(InnerAddToFavoriteDialog, { isOpen: isOpen, onCancel: onCancel, onSubmit: onSubmit }));
+}
+
+export { AddToFavoriteDialog };

package/dist/modals/favorite/add-to-favorite-dialog.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"content":"add-to-favorite-dialog-module-WJYMb","footer-button-panel":"add-to-favorite-dialog-module--0-Ln","loading-panel":"add-to-favorite-dialog-module-ZAuzE"};
+
+export { styles as default };