@sonic-equipment/ui 0.0.119 → 120.0.0

package/dist/carousel/carousel.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import Navigation from '../node_modules/.pnpm/swiper@11.1.14/node_modules/swiper/modules/navigation.js';
+import freeMode from '../node_modules/.pnpm/swiper@11.1.14/node_modules/swiper/modules/free-mode.js';
+import { Swiper, SwiperSlide } from '../node_modules/.pnpm/swiper@11.1.14/node_modules/swiper/swiper-react.js';
+import { breakpoints } from '../shared/utils/breakpoints.js';
+import { deepMerge } from '../shared/utils/merge.js';
+import { CarouselNavigationButton } from './carousel-navigation-button.js';
+import styles from './carousel.module.css.js';
+
+function generateSlidesPerViewBreakpoints(slidesPerView) {
+    return Object.keys(slidesPerView).reduce((result, breakpoint) => ({
+        ...result,
+        [breakpoints[breakpoint]]: {
+            slidesPerView: slidesPerView[breakpoint],
+        },
+    }), {});
+}
+function Carousel({ breakpoints: _breakpoints, className, hasNavigation = true, hasOverflow = true, navigationButtonsPosition = 'top', slideClasses, slides, slidesPerView: _slidesPerView = 'auto', spaceBetween, }) {
+    const [isDragging, setIsDragging] = useState(false);
+    const [isReady, setIsReady] = useState(false);
+    const [amountOfSlides, setAmountOfSlides] = useState(0);
+    const nextEl = useRef(null);
+    const prevEl = useRef(null);
+    const swiperRef = useRef(null);
+    const slidesPerView = typeof _slidesPerView === 'object' ? undefined : _slidesPerView;
+    function handleNavigationButtonClick(direction) {
+        if (!swiperRef.current)
+            return;
+        if (direction === 'next') {
+            swiperRef.current.slideTo(swiperRef.current.activeIndex + amountOfSlides - 1);
+        }
+        else {
+            swiperRef.current.slideTo(swiperRef.current.activeIndex - amountOfSlides - 1);
+        }
+    }
+    useEffect(() => {
+        setAmountOfSlides(typeof swiperRef.current?.params.slidesPerView === 'number'
+            ? swiperRef.current.params.slidesPerView
+            : swiperRef.current?.slidesPerViewDynamic() || 1);
+    }, [swiperRef]);
+    if (typeof _slidesPerView === 'object') {
+        const slidesPerViewBreakpoints = generateSlidesPerViewBreakpoints(_slidesPerView);
+        _breakpoints = deepMerge(_breakpoints, slidesPerViewBreakpoints);
+    }
+    if (slides.length === 0)
+        return null;
+    return (jsxs("div", { className: clsx(styles.carousel, className), style: spaceBetween === undefined
+            ? undefined
+            : { '--column-gap': `${spaceBetween}px` }, children: [jsx(Swiper, { breakpoints: _breakpoints, className: clsx(styles.swiper, {
+                    [styles['is-dragging']]: isDragging,
+                    [styles['has-overflow']]: hasOverflow,
+                    [styles['is-ready']]: isReady,
+                }), freeMode: {
+                    enabled: false,
+                    sticky: true,
+                }, modules: [freeMode, Navigation], navigation: {
+                    enabled: hasNavigation,
+                    nextEl: nextEl.current,
+                    prevEl: prevEl.current,
+                }, onBeforeInit: swiper => (swiperRef.current = swiper), onSliderMove: () => setIsDragging(true), onSlidesUpdated: () => {
+                    if (!isReady)
+                        setIsReady(true);
+                }, onTouchEnd: () => setIsDragging(false), slidesPerGroupAuto: slidesPerView === 'auto', slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles.slide, slideClasses), children: slide }, index))) }), hasNavigation && (jsxs("div", { className: clsx(styles['navigation-buttons'], styles[navigationButtonsPosition]), children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles['navigation-button'], styles['navigation-button-prev']), direction: "previous", onClick: direction => handleNavigationButtonClick(direction) }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles['navigation-button'], styles['navigation-button-next']), direction: "next", onClick: direction => handleNavigationButtonClick(direction) })] }))] }));
+}
+
+export { Carousel };

package/dist/carousel/carousel.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"carousel":"carousel-module-ealh-","swiper":"carousel-module-IftbN","is-ready":"carousel-module-RCpfc","has-overflow":"carousel-module-tPg7k","slide":"carousel-module-bUMlb","navigation-button-next":"carousel-module-T7bTr","is-dragging":"carousel-module-34OWD","navigation-button-prev":"carousel-module-984Rr","navigation-buttons":"carousel-module-k7Z4S","navigation-button":"carousel-module-kcqEE","top":"carousel-module-nL-O8","center":"carousel-module-5SGYn"};
+
+export { styles as default };

package/dist/carousel/category-carousel/category-carousel.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { Carousel } from '../carousel.js';
+import styles from './category-carousel.module.css.js';
+
+function CategoryCarousel({ categoryCards }) {
+    return jsx(Carousel, { slideClasses: styles.slide, slides: categoryCards });
+}
+
+export { CategoryCarousel };

package/dist/carousel/category-carousel/category-carousel.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"slide":"category-carousel-module-muLq-"};
+
+export { styles as default };

package/dist/carousel/pagination/pagination.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import { useResizeObserver } from '../../shared/hooks/use-resize-observer.js';
+import { Animation } from './transitions.js';
+import styles from './pagination.module.css.js';
+
+function PaginationButton({ index, onChange, onClick, }) {
+    const { ref } = useResizeObserver((target, size, position) => {
+        onChange?.(index, target, size, position);
+    });
+    return (jsx("div", { ref: ref, className: styles['page-button'], onClick: onClick, onKeyUp: e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                onClick?.();
+            }
+        }, role: "button", tabIndex: 0 }));
+}
+function between(min, value, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function CarouselPagination({ contained, currentPage = 1, numberOfPages, onChange, }) {
+    const animation = useRef(new Animation());
+    useEffect(() => {
+        animation.current.animate(between(1, currentPage, numberOfPages));
+    }, [currentPage, numberOfPages]);
+    if (numberOfPages <= 1)
+        return;
+    return (jsx("div", { className: clsx({
+            [styles['contained']]: contained,
+        }, styles['pagination-panel']), children: jsxs("div", { className: styles['content-container'], children: [jsx("div", { ref: animation.current.refButton, className: clsx(styles['active-page-button'], styles['page-button']), children: jsx("div", { ref: animation.current.refCircle, className: styles['circle'] }) }), Array.from({ length: numberOfPages }, (_, index) => (jsx("div", { ref: animation.current.refPaginationButton(index), className: clsx(styles['page-button']), onClick: () => {
+                        onChange?.(index + 1);
+                    }, onKeyPress: e => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            onChange?.(index + 1);
+                        }
+                    }, role: "button", tabIndex: 0 }, index)))] }) }));
+}
+
+export { CarouselPagination, PaginationButton };

package/dist/carousel/pagination/pagination.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"pagination-panel":"pagination-module-pQ-Pu","content-container":"pagination-module-EnswA","contained":"pagination-module-4U0M3","page-button":"pagination-module-E-D6l","active-page-button":"pagination-module-rNIvD","circle":"pagination-module-4--ee"};
+
+export { styles as default };

package/dist/carousel/pagination/transitions.js

@@ -0,0 +1,144 @@
+"use client";
+class Animation {
+    constructor(initialPage = -1) {
+        Object.defineProperty(this, "_currentPage", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "_buttonElement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "_circleElement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "_paginationButtonElements", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "_transitionQueue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "_currentSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 1
+        });
+        Object.defineProperty(this, "_currentPosition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        this._currentPage = initialPage;
+        this.refButton = this.refButton.bind(this);
+        this.refCircle = this.refCircle.bind(this);
+    }
+    refPaginationButton(index) {
+        return (element) => {
+            this._paginationButtonElements[index] = element;
+            if (index === this._currentPage - 1)
+                element?.classList.add('active');
+            this.onNextTransition();
+        };
+    }
+    refButton(element) {
+        this._buttonElement?.removeEventListener('transitionend', this.onNextTransition.bind(this));
+        this._buttonElement = element;
+        this._buttonElement?.addEventListener('transitionend', e => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.onNextTransition();
+        });
+        this.onNextTransition();
+    }
+    refCircle(element) {
+        this._circleElement?.removeEventListener('transitionend', this.onNextTransition.bind(this));
+        this._circleElement = element;
+        this._circleElement?.addEventListener('transitionend', e => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (e.propertyName !== 'height')
+                return;
+            this.onNextTransition();
+        });
+        this.onNextTransition();
+    }
+    getLeftPositionOfPaginationButtonElement(index) {
+        const fromElement = this._paginationButtonElements[0];
+        const toElement = this._paginationButtonElements[index];
+        if (!toElement || !fromElement)
+            return 0;
+        const from = fromElement.getBoundingClientRect().left;
+        const to = toElement.getBoundingClientRect().left;
+        return to - from;
+    }
+    onNextTransition() {
+        const buttonElement = this._buttonElement;
+        const circleElement = this._circleElement;
+        const paginationButtonElements = this._paginationButtonElements;
+        if (!buttonElement ||
+            !circleElement ||
+            paginationButtonElements.length === 0)
+            return this;
+        const nextTransition = this._transitionQueue.shift();
+        if (!nextTransition)
+            return this;
+        switch (nextTransition.type) {
+            case 'slide':
+                if (this._currentPosition === nextTransition.position) {
+                    return this.onNextTransition();
+                }
+                this._currentPosition = nextTransition.position;
+                paginationButtonElements.forEach(element => {
+                    element?.classList.remove('active');
+                });
+                break;
+            case 'grow':
+                this._currentSize = nextTransition.size;
+                paginationButtonElements[this._currentPage - 1]?.classList.add('active');
+                break;
+            case 'shrink':
+                this._currentSize = nextTransition.size;
+                break;
+        }
+        buttonElement.style.transform = `translateX(${this._currentPosition}px`;
+        circleElement.style.setProperty('--size', `${this._currentSize}px`);
+        return this;
+    }
+    animate(page) {
+        const currentPage = this._currentPage;
+        if (page === currentPage)
+            return this;
+        this._currentPage = page;
+        const currentTransition = this._transitionQueue[0];
+        this._transitionQueue.splice(1);
+        if (!currentTransition || currentTransition.type === 'grow') {
+            this._transitionQueue.push({ size: 1, type: 'shrink' });
+        }
+        this._transitionQueue.push({
+            position: this.getLeftPositionOfPaginationButtonElement(page - 1),
+            type: 'slide',
+        }, { size: 16, type: 'grow' });
+        return this.onNextTransition();
+    }
+    dispose() {
+        this._buttonElement?.removeEventListener('transitionend', this.onNextTransition);
+        this._circleElement?.removeEventListener('transitionend', this.onNextTransition);
+    }
+}
+
+export { Animation };

package/dist/carousel/usp-carousel/product-usp-carousel-slide.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Image } from '../../media/image/image.js';
+import { Heading } from '../../typography/heading/heading.js';
+import styles from './usp-carousel.module.css.js';
+
+function ProductUsp({ usp }) {
+    return (jsxs("div", { className: styles['product-usp'], children: [jsx("div", { className: styles.left, children: jsx(Image, { className: styles.image, fit: "cover", image: usp.image, title: usp.image.altText }) }), jsx("div", { className: styles.right, children: jsxs("div", { "data-content": true, className: styles.content, children: [jsx(Image, { className: styles.icon, image: usp.icon, title: usp.icon.altText }), jsx(Heading, { italic: true, uppercase: true, className: styles.title, size: "xs", children: usp.heading }), jsx("div", { className: styles.text, dangerouslySetInnerHTML: { __html: usp.text } })] }) })] }));
+}
+
+export { ProductUsp };

package/dist/carousel/usp-carousel/product-usp-carousel.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { ProductUsp } from './product-usp-carousel-slide.js';
+import { USPCarousel } from './usp-carousel.js';
+
+function ProductUSPCarousel({ usps }) {
+    return (jsx(USPCarousel, { slides: usps.map((usp, index) => (jsx(ProductUsp, { usp: usp }, index))) }));
+}
+
+export { ProductUSPCarousel };

package/dist/carousel/usp-carousel/usp-carousel.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+import { Swiper, SwiperSlide } from '../../node_modules/.pnpm/swiper@11.1.14/node_modules/swiper/swiper-react.js';
+import { CarouselPagination } from '../pagination/pagination.js';
+import styles from './usp-carousel.module.css.js';
+
+const DURATION_IN_MS = 800;
+const CONTENT_TRANSLATE_PX = 40;
+const USPCarousel = ({ slides }) => {
+    const swiperRef = useRef(null);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const swiperElementRef = useRef(null);
+    let currentTransitionSpeed = 0;
+    function getTransitionSpeed() {
+        const transitionSpeed = currentTransitionSpeed;
+        currentTransitionSpeed = 0;
+        return transitionSpeed;
+    }
+    function setTranslate(_swiper, _wrapperTranslate) {
+        const slides = Object.values(_swiper.slides);
+        const durationInSeconds = getTransitionSpeed() / 1000;
+        slides.map((slide, _index) => {
+            const offset = slide.swiperSlideOffset;
+            const translateX = -offset;
+            const content = slide.querySelector('[data-content]');
+            const opacity = Math.max(1 - Math.abs(slide.progress), 0);
+            const translate = Math.min(Math.abs(slide.progress), 1) * CONTENT_TRANSLATE_PX;
+            content.style.transform = `translateX(${-translate}px)`;
+            content.style.transition = `transform ${durationInSeconds}s ease`;
+            slide.style.transform = `translateX(${translateX}px)`;
+            slide.style.opacity = `${opacity}`;
+            slide.style.transition = `opacity ${durationInSeconds}s ease`;
+            if (slide !== _swiper.slides[_swiper.realIndex]) {
+                slide.style.transitionDelay = `${durationInSeconds / 4}s`;
+            }
+        });
+    }
+    return (jsxs(Swiper, { ref: swiperElementRef, className: styles['usp-carousel'], longSwipes: false, onActiveIndexChange: swiper => setCurrentIndex(swiper.activeIndex), onSetTransition: (_swiper, transitions) => {
+            currentTransitionSpeed = transitions;
+        }, onSetTranslate: setTranslate, onSwiper: swiper => {
+            swiper.update();
+            swiperRef.current = swiper;
+        }, speed: DURATION_IN_MS, virtualTranslate: true, watchSlidesProgress: true, children: [slides.map((slide, index) => (jsx(SwiperSlide, { children: slide }, index))), jsx("div", { className: styles.pagination, id: "pagination" }), jsx("div", { className: styles.pagination, children: jsx(CarouselPagination, { currentPage: currentIndex + 1, numberOfPages: slides.length, onChange: pageNumber => swiperRef.current?.slideTo(pageNumber - 1) }) })] }));
+};
+
+export { USPCarousel };

package/dist/carousel/usp-carousel/usp-carousel.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"usp-carousel":"usp-carousel-module-UCbpX","pagination":"usp-carousel-module-msaeJ","product-usp":"usp-carousel-module-rtIrb","left":"usp-carousel-module--Vdc3","image":"usp-carousel-module-F-WAS","right":"usp-carousel-module-2fygw","content":"usp-carousel-module-AOJJg","icon":"usp-carousel-module-Diy2d","title":"usp-carousel-module--xcF2","text":"usp-carousel-module-tq8R8","navigation":"usp-carousel-module-L5Kmv"};
+
+export { styles as default };

package/dist/cart-totals/cart-totals-summary.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { FormattedMessage } from '../intl/formatted-message.js';
+import { Heading } from '../typography/heading/heading.js';
+import styles from './cart-totals-summary.module.css.js';
+
+function CartTotalsSummary({ className, totalAmount, }) {
+    return (jsx("div", { className: clsx(styles['cart-totals-summary'], className), children: jsxs(Heading, { bold: true, size: "xxxs", children: [jsx(FormattedMessage, { id: "Total amount is" }), jsx("br", {}), totalAmount] }) }));
+}
+
+export { CartTotalsSummary };

package/dist/cart-totals/cart-totals-summary.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"cart-totals-summary":"cart-totals-summary-module-iFaoy"};
+
+export { styles as default };

package/dist/cart-totals/cart-totals.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormattedMessage } from '../intl/formatted-message.js';
+import { Heading } from '../typography/heading/heading.js';
+import styles from './cart-totals.module.css.js';
+
+function CartTotals({ fulfillmentMethod, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }) {
+    return (jsxs("div", { className: styles['cart-totals'], children: [orderNumber && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Order number" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "orderConfirmation_orderNumber", children: orderNumber }) }) })] })), fulfillmentMethod && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Fulfillment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, children: fulfillmentMethod }) }) })] })), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Cost overview" }) }), jsxs("div", { children: [jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "Subtotal" }), ' ', jsx(FormattedMessage, { id: "Excl. VAT" })] }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_subTotal", children: subtotal })] }), jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping and handling" }) }), jsx("p", { className: styles.value, children: shippingCost })] }), jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "VAT" }), " ", `${vatPercentage}%`] }), jsx("p", { className: styles.value, children: tax })] })] })] }), jsx("section", { className: styles.totals, children: jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Total" }) }), jsx("p", { className: styles.value, "data-test-selector": "cartTotal_orderGrandTotalDisplay", children: total })] }) })] }));
+}
+
+export { CartTotals };

package/dist/cart-totals/cart-totals.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"cart-totals":"cart-totals-module-Bk9zi","line":"cart-totals-module-VJ51p","label":"cart-totals-module-ciNsz","value":"cart-totals-module-KaxpH","section":"cart-totals-module-vhhxp","section-header":"cart-totals-module-AeSnX","totals":"cart-totals-module-2RLLQ"};
+
+export { styles as default };

package/dist/collapsables/accordion/accordion-item.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { GlyphsChevronsBoldDownIcon } from '../../icons/glyph/glyphs-chevrons-bold-down-icon.js';
+import { GlyphsChevronsSlimDownIcon } from '../../icons/glyph/glyphs-chevrons-slim-down-icon.js';
+import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
+import { ensureArray } from '../../shared/utils/array.js';
+import styles from './accordion.module.css.js';
+
+function AccordionItem({ _pseudo = 'none', borderType = 'bottom', children, className, id, initialIsOpen = false, isDisabled = false, size, title, }) {
+    const { isOpen, toggle } = useDisclosure(initialIsOpen);
+    const panelId = `panel-${id}`;
+    return (jsxs("div", { className: clsx(className, ...ensureArray(borderType).map(type => styles[`border-type-${type}`]), styles['accordion-item'], {
+            [styles['is-open']]: isOpen,
+        }), children: [jsx("h3", { children: jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: toggle, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-labelledby": id, className: styles.panel, id: panelId, role: "region", children: jsx("div", { className: styles.content, children: children }) })] }));
+}
+
+export { AccordionItem };

package/dist/collapsables/accordion/accordion.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { Children, cloneElement } from 'react';
+import clsx from 'clsx';
+import styles from './accordion.module.css.js';
+
+function Accordion({ borderType = 'bottom', children, color = 'black', hasLineSeparator = true, indented, size = 'md', }) {
+    return (jsx("div", { className: clsx({ [styles.indented]: indented }, styles.accordion, styles[color], styles[size], hasLineSeparator && styles['with-seperators']), children: Boolean(children) &&
+            Children.map(children, child => {
+                if (!child)
+                    return null;
+                return cloneElement(child, { borderType, size });
+            }) }));
+}
+
+export { Accordion };

package/dist/collapsables/accordion/accordion.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"accordion":"accordion-module-9WvAH","indented":"accordion-module-6CcEH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","border-type-bottom":"accordion-module-oTdZK","border-type-top":"accordion-module-0mrLq","border-type-middle":"accordion-module-aAr-R","is-open":"accordion-module-W0F1z","border-type-middle-accentuated":"accordion-module-OB98a"};
+
+export { styles as default };

package/dist/collapsables/show-all/show-all.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+import clsx from 'clsx';
+import { GlyphsChevronsSlimDownIcon } from '../../icons/glyph/glyphs-chevrons-slim-down-icon.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
+import { useResizeObserver } from '../../shared/hooks/use-resize-observer.js';
+import { RouteLink } from '../../shared/routing/route-link.js';
+import styles from './show-all.module.css.js';
+
+function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialIsOpen = false, isOpen: isControlledOpen, onToggle, }) {
+    const isControlled = isControlledOpen !== undefined && onToggle !== undefined;
+    const { isOpen, toggle } = useDisclosure(initialIsOpen);
+    const showAllRef = useRef(null);
+    const isReallyOpen = isControlled ? isControlledOpen : isOpen;
+    const [contentFits, setContentFits] = useState(false);
+    const { ref } = useResizeObserver((_target, size) => {
+        setContentFits((size.height || 0) <= initialHeight);
+    });
+    return (jsxs("div", { ref: showAllRef, className: clsx(styles['show-all'], {
+            [styles['content-fits']]: contentFits,
+            [styles['is-open']]: isReallyOpen,
+        }), style: contentFits ? undefined : { '--initital-height': `${initialHeight}px` }, children: [jsx("div", { className: styles.panel, children: jsx("div", { className: clsx(styles.content, {
+                        [styles['has-transparency']]: !contentFits && hasTransparency,
+                    }), children: jsx("div", { ref: ref, children: children }) }) }), !contentFits && (jsxs(RouteLink, { className: styles.button, color: "secondary", onClick: () => {
+                    if (isControlled)
+                        return onToggle(!isControlled);
+                    toggle();
+                }, children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles.icon }), isReallyOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] }))] }));
+}
+
+export { ShowAll };

package/dist/collapsables/show-all/show-all.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"show-all":"show-all-module-BDp21","panel":"show-all-module-bEdda","content":"show-all-module-RF--F","has-transparency":"show-all-module-30y7l","button":"show-all-module-58e7Q","icon":"show-all-module-fqncI","is-open":"show-all-module-hQeGI","content-fits":"show-all-module-OhPfm"};
+
+export { styles as default };

package/dist/config.d.ts

@@ -7,6 +7,6 @@ interface Config {
     COOKIE_DOMAIN?: string;
     SHOP_API_URL: string;
 }
-export declare const configPerEnvironment: Record<Environment, Config>;
+export declare const configPerEnvironment: Record<Environment, () => Config>;
 export declare const config: Config;
 export {};

package/dist/config.js

@@ -0,0 +1,82 @@
+import { environment } from './shared/utils/environment.js';
+import main from './shared/utils/merge.js';
+
+const env = (typeof process === 'undefined'
+    ? { VITE_SHOP_API_URL: ""}
+    : main(process.env, { VITE_SHOP_API_URL: ""}));
+const validateEnvVariable = (name, value) => {
+    if (value)
+        return value;
+    throw new Error(`${name} is not defined`);
+};
+const configPerEnvironment = {
+    local: () => ({
+        ALGOLIA_API_KEY: 'e0edf30798a6b2e4e44fd25f0f2f9646',
+        ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
+        ALGOLIA_HOST: 'shop-accept.sonic-equipment.workers.dev',
+        BFF_API_URL: 'https://shop-accept.sonic-equipment.workers.dev/api/v1/bff',
+        COOKIE_DOMAIN: undefined,
+        SHOP_API_URL: 
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        env?.VITE_SHOP_API_URL || '',
+    }),
+    marketingLocal: () => ({
+        ALGOLIA_API_KEY: 'e0edf30798a6b2e4e44fd25f0f2f9646',
+        ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
+        ALGOLIA_HOST: 'sonicequipment.commerce.insitesandbox.com',
+        BFF_API_URL: 'https://localhost:8000/api/v1/bff',
+        COOKIE_DOMAIN: '.insitesandbox.com',
+        SHOP_API_URL: 
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        env?.VITE_SHOP_API_URL || 'https://localhost:8000',
+    }),
+    next: () => ({
+        ALGOLIA_API_KEY: validateEnvVariable('ALGOLIA_API_KEY', env.ALGOLIA_API_KEY),
+        ALGOLIA_APP_ID: validateEnvVariable('ALGOLIA_APP_ID', env.ALGOLIA_APP_ID),
+        ALGOLIA_HOST: validateEnvVariable('ALGOLIA_HOST', env.ALGOLIA_HOST),
+        BFF_API_URL: validateEnvVariable('BFF_API_URL', env.BFF_API_URL),
+        COOKIE_DOMAIN: validateEnvVariable('COOKIE_DOMAIN', env.COOKIE_DOMAIN),
+        SHOP_API_URL: validateEnvVariable('SHOP_API_URL', env.SHOP_API_URL),
+    }),
+    production: () => ({
+        ALGOLIA_API_KEY: 'e31a3a53449eceb4d0f9273b9bcd9759',
+        ALGOLIA_APP_ID: '14CUFCVMAD',
+        ALGOLIA_HOST: 'shop.sonic-equipment.com',
+        BFF_API_URL: 'https://shop.sonic-equipment.com/api/v1/bff',
+        COOKIE_DOMAIN: '.sonic-equipment.com',
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        SHOP_API_URL: env?.VITE_SHOP_API_URL || 'https://shop.sonic-equipment.com',
+    }),
+    sandbox: () => ({
+        ALGOLIA_API_KEY: 'e0edf30798a6b2e4e44fd25f0f2f9646',
+        ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
+        ALGOLIA_HOST: 'sonicequipment.commerce.insitesandbox.com',
+        BFF_API_URL: 'https://sonicequipment.commerce.insitesandbox.com/api/v1/bff',
+        COOKIE_DOMAIN: '.insitesandbox.com',
+        SHOP_API_URL: 
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        env?.VITE_SHOP_API_URL ||
+            'https://sonicequipment.commerce.insitesandbox.com',
+    }),
+    'sandbox-reverse-proxy': () => ({
+        ALGOLIA_API_KEY: 'e0edf30798a6b2e4e44fd25f0f2f9646',
+        ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
+        ALGOLIA_HOST: 'shop-accept.sonic-equipment.workers.dev',
+        BFF_API_URL: 'https://shop-accept.sonic-equipment.workers.dev/api/v1/bff',
+        COOKIE_DOMAIN: '.workers.dev',
+        SHOP_API_URL: 'https://shop-accept.sonic-equipment.workers.dev',
+    }),
+    storybook: () => ({
+        ALGOLIA_API_KEY: 'e0edf30798a6b2e4e44fd25f0f2f9646',
+        ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
+        ALGOLIA_HOST: 'localhost:8000',
+        BFF_API_URL: 'https://localhost:8000/api/v1/bff',
+        COOKIE_DOMAIN: 'localhost',
+        SHOP_API_URL: 
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        env?.VITE_SHOP_API_URL || 'https://localhost:8000',
+    }),
+};
+const config = configPerEnvironment[environment]();
+
+export { config, configPerEnvironment };

package/dist/country-selector/connected-country-selector.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useMemo, useEffect } from 'react';
+import { useDisclosure } from '../shared/hooks/use-disclosure.js';
+import { CountrySelectorDialog } from './country-selector-dialog/country-selector-dialog.js';
+import { CountrySelectorTrigger } from './country-selector-trigger/country-selector-trigger.js';
+import { useCountriesLanguages } from './use-countries-languages.js';
+
+function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, onChange, showCountry = true, }) {
+    const { close, isOpen, open, setIsOpen } = useDisclosure(false);
+    const { countries, defaultCountry, defaultLanguage, isFetching, selectedCountry, selectedLanguage, updateCountryLanguage, } = useCountriesLanguages({
+        defaultCountryCode,
+        defaultLanguageCode,
+    });
+    const isCountryLanguageSelected = useMemo(() => selectedCountry !== undefined && selectedLanguage !== undefined, [selectedCountry, selectedLanguage]);
+    const isDismissable = isCountryLanguageSelected;
+    useEffect(() => {
+        setIsOpen(!isCountryLanguageSelected);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isCountryLanguageSelected]);
+    if (isFetching)
+        return null;
+    return (jsxs(Fragment, { children: [jsx(CountrySelectorTrigger, { onClick: open, selectedCountry: selectedCountry, selectedLanguage: selectedLanguage, showCountry: showCountry }), jsx(CountrySelectorDialog, { countries: countries, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: open => {
+                    if (!isDismissable)
+                        return;
+                    setIsOpen(open);
+                }, onSubmit: async ({ country, language }) => {
+                    if (selectedCountry?.id === country.id &&
+                        selectedLanguage?.id === language.id)
+                        return close();
+                    await updateCountryLanguage({ country, language });
+                    close();
+                    onChange?.({ country, language });
+                }, selectedCountry: selectedCountry || defaultCountry, selectedLanguage: selectedLanguage || defaultLanguage, showCountry: showCountry })] }));
+}
+
+export { ConnectedCountrySelector };