@sonic-equipment/ui 0.0.119 → 1.0.0

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({ className, 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: clsx(styles['images-grid'], className), "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.d.ts

@@ -1,6 +1,7 @@
 import 'swiper/css';
 import { ImageType } from '../../shared/model/image';
 export interface ImageLightboxProps {
+    className?: string;
     images: ImageType[];
     initialSelectedIndex?: number;
     onZoom?: (args: {
@@ -9,4 +10,4 @@ export interface ImageLightboxProps {
     }) => void;
     variant?: 'sm' | 'lg';
 }
-export declare function ImageLightbox({ images, initialSelectedIndex, onZoom, variant, }: ImageLightboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageLightbox({ className, images, initialSelectedIndex, onZoom, variant, }: ImageLightboxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,49 @@
+"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.2.10/node_modules/swiper/modules/navigation.js';
+import Thumb from '../../node_modules/.pnpm/swiper@11.2.10/node_modules/swiper/modules/thumbs.js';
+import { Swiper, SwiperSlide } from '../../node_modules/.pnpm/swiper@11.2.10/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({ className, 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], className), 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) => (
+                // eslint-disable-next-line @eslint-react/no-array-index-key
+                jsx(SwiperSlide, { className: styles.slide, children: jsx("div", { className: styles.thumb, children: jsx(Image, { className: styles.image, fit: "contain", height: 80, image: {
+                                1: image['1'],
+                                2: image['1'],
+                                3: image['1'],
+                                altText: image.altText,
+                            }, 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) => (
+                        // eslint-disable-next-line @eslint-react/no-array-index-key
+                        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: {
+                                        1: image['3'],
+                                        2: image['3'],
+                                        3: image['3'],
+                                        altText: image.altText,
+                                    }, 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.d.ts

@@ -3,6 +3,6 @@ import { ImageType } from '../../shared/model/image';
 export declare function ZoomImage({ currentImage, isZoomed, onClose, scrollFromTopPercentage, }: {
     currentImage: ImageType | undefined;
     isZoomed?: boolean;
-    onClose?: () => void;
+    onClose?: VoidFunction;
     scrollFromTopPercentage?: number;
 }): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,39 @@
+"use client";
+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: {
+                    1: currentImage['3'],
+                    2: currentImage['3'],
+                    3: currentImage['3'],
+                    altText: currentImage.altText,
+                }, 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/message/message.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface MessageProps {
+    children?: ReactNode;
+    className?: string;
+    type?: 'default' | 'info' | 'danger' | 'success' | 'warning';
+}
+export declare function Message({ children, className, type, }: MessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/message/message.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Icon } from '../icon/icon.js';
+import styles from './message.module.css.js';
+
+const icons = {
+    danger: jsx(Icon, { name: "AttentionSolid" }),
+    info: jsx(Icon, { name: "InformationSolid" }),
+    success: jsx(Icon, { name: "OkaySolid" }),
+    warning: jsx(Icon, { name: "NoticeSolid" }),
+};
+function Message({ children, className, type = 'default', }) {
+    return (jsxs("div", { className: clsx(styles.message, styles[type], className), role: "note", children: [type !== 'default' && (jsx("div", { className: styles.icon, role: "presentation", children: icons[type] })), jsx("div", { className: styles.body, children: children })] }));
+}
+
+export { Message };

package/dist/message/message.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"message":"message-module-N1e1t","icon":"message-module-w2hsL","body":"message-module-Gi4uR","default":"message-module-pp9U4","info":"message-module-srkp1","danger":"message-module-oeSdr","success":"message-module-Vp0pA","warning":"message-module-kvANQ"};
+
+export { styles as default };

package/dist/modals/confirmation/confirmation-dialog.d.ts

@@ -1,10 +1,12 @@
+import { TranslationId } from '../../intl/translation-id';
 interface ConfirmationDialogProps {
-    cancelLabel?: string;
+    cancelLabel?: TranslationId;
+    'data-test-selector'?: string;
     isOpen: boolean;
     onCancel: VoidFunction;
     onConfirm: VoidFunction;
-    submitLabel?: string;
+    submitLabel?: TranslationId;
     title: string;
 }
-export declare function ConfirmationDialog({ cancelLabel, isOpen, onCancel, onConfirm, submitLabel, title, }: ConfirmationDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmationDialog({ cancelLabel, 'data-test-selector': dataTestSelector, isOpen, onCancel, onConfirm, submitLabel, title, }: ConfirmationDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

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', 'data-test-selector': dataTestSelector, isOpen, onCancel, onConfirm, submitLabel = 'Continue', title, }) {
+    const t = useFormattedMessage();
+    return (jsx(Dialog, { isDismissable: true, cancelLabel: t(cancelLabel), className: { dialog: styles['confirmation-dialog'] }, "data-test-selector": dataTestSelector, 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.d.ts

@@ -1,8 +1,9 @@
-import { ComponentProps, ReactNode } from 'react';
-import { Form as AriaForm } from 'react-aria-components';
+import { ReactNode } from 'react';
+import { OnSubmitHandler, ValidationErrors } from '../../forms/layout/form/form';
 import { ModalProps } from '../modal/modal';
 interface DialogProps extends Omit<ModalProps, 'children' | 'className'> {
     allowClose?: boolean;
+    allowSubmit?: boolean;
     cancelLabel?: string;
     children?: ReactNode | ((props: {
         close: VoidFunction;
@@ -15,19 +16,24 @@ interface DialogProps extends Omit<ModalProps, 'children' | 'className'> {
         form?: string;
         header?: string;
         heading?: string;
-        modal?: string;
+        modal?: ModalProps['className'];
     };
+    'data-test-selector'?: string;
     footer?: ReactNode | ((props: DialogFooterProps) => ReactNode);
     hideTitle?: boolean;
-    onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+    isSubmitting?: boolean;
+    onSubmit?: OnSubmitHandler;
     submitLabel?: string;
     title: string;
-    validationErrors?: ComponentProps<typeof AriaForm>['validationErrors'];
+    validationErrors?: ValidationErrors;
 }
 interface DialogFooterProps {
+    allowClose?: boolean;
+    allowSubmit?: boolean;
     cancelLabel: string;
     close: VoidFunction;
+    isSubmitting?: boolean;
     submitLabel: string;
 }
-export declare function Dialog({ allowClose, cancelLabel, children, className, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ allowClose, allowSubmit, cancelLabel, children, className, 'data-test-selector': dataTestSelector, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, isSubmitting, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modals/dialog/dialog.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Dialog as Dialog$1 } 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 { Form } from '../../forms/layout/form/form.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../intl/use-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({ allowClose = true, allowSubmit = true, cancelLabel, close, isSubmitting, submitLabel, }) {
+    return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", "data-test-selector": "dialogSubmit", isDisabled: !allowSubmit, isLoading: isSubmitting ? jsx(FormattedMessage, { id: "Submitting\u2026" }) : undefined, size: "md", type: "submit", children: jsx(FormattedMessage, { noTranslationId: true, id: submitLabel }) }), allowClose && (jsx(Button, { color: "secondary", "data-test-selector": "dialogCancel", onClick: close, size: "md", variant: "outline", children: jsx(FormattedMessage, { noTranslationId: true, id: cancelLabel }) }))] }));
+}
+function Dialog({ allowClose = true, allowSubmit = true, cancelLabel = 'Close', children, className, 'data-test-selector': dataTestSelector = 'dialog', footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, isSubmitting = false, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel = 'Submit', title, validationErrors, }) {
+    const t = useFormattedMessage();
+    return (jsx(Modal, { className: {
+            modal: styles.modal,
+            overlay: 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), "data-test-selector": dataTestSelector, children: ({ close }) => (jsx(Form, { className: clsx(styles.form, typeof className === 'string' ? undefined : className?.form), footer: jsx("div", { className: clsx(styles.footer, typeof className === 'string' ? undefined : className?.footer), children: footer instanceof Function
+                        ? footer({
+                            allowClose,
+                            allowSubmit,
+                            cancelLabel,
+                            close,
+                            isSubmitting,
+                            submitLabel,
+                        })
+                        : footer }), header: jsxs(Fragment, { children: [!hideTitle && (jsx(Heading, { className: clsx(styles.heading, typeof className === 'string'
+                                ? undefined
+                                : className?.heading), size: "xs", tag: "h2", children: title })), hasCloseButton && (jsx(IconButton, { className: styles.close, icon: "Close", isDisabled: !allowClose, label: t('Close'), onClick: close }))] }), onSubmit: onSubmit, validationErrors: validationErrors, children: jsx("div", { className: clsx(styles.content, typeof className === 'string' ? undefined : className?.content), children: children instanceof Function ? children({ close }) : children }) })) }) }));
+}
+
+export { Dialog };

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

@@ -0,0 +1,3 @@
+var styles = {"modal":"dialog-module-uKVDu","dialog":"dialog-module-qKzgy","form":"dialog-module-5sZYV","close":"dialog-module-Y7Tqg","footer":"dialog-module-y7Axm"};
+
+export { styles as default };

package/dist/modals/favorite/add-to-favorite-dialog.d.ts

@@ -1,6 +1,6 @@
 interface AddToFavoriteDialogProps {
     isOpen: boolean;
-    onCancel: () => void;
+    onCancel: VoidFunction;
     onSubmit: (wishListId: string) => void;
 }
 export declare function AddToFavoriteDialog({ isOpen, onCancel, onSubmit, }: AddToFavoriteDialogProps): import("react/jsx-runtime").JSX.Element | null;

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/elements/select/select.js';
+import { TextField } from '../../forms/fields/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: true, 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 };

package/dist/modals/modal/modal.d.ts

@@ -15,4 +15,4 @@ export interface ModalProps {
     onOpenChange?: (isOpen: boolean) => void;
     shouldCloseOnInteractOutside?: boolean;
 }
-export declare function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, shouldCloseOnInteractOutside, }: ModalProps): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, shouldCloseOnInteractOutside, }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/modals/modal/modal.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ModalOverlay, Modal as Modal$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import { IconButton } from '../../buttons/icon-button/icon-button.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import resetStyles from '../../shared/reset.module.css.js';
+import styles from './modal.module.css.js';
+
+function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, shouldCloseOnInteractOutside = true, }) {
+    const t = useFormattedMessage();
+    return (jsx(ModalOverlay, { className: clsx(styles['modal-overlay'], resetStyles.reset, typeof className === 'string' ? className : className?.overlay), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: () => shouldCloseOnInteractOutside, children: jsxs(Modal$1, { className: clsx(styles.modal, {
+                [styles['is-full-screen']]: isFullScreen,
+            }, typeof className === 'string' ? undefined : className?.modal), children: [hasCloseButton && (jsx(IconButton, { className: styles.close, icon: "Close", isDisabled: !isDismissable, label: t('Close'), onClick: () => onOpenChange?.(false), theme: "secondary" })), jsx("div", { className: clsx(styles.content, typeof className === 'string' ? className : className?.content), children: children })] }) }));
+}
+
+export { Modal };

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

@@ -0,0 +1,3 @@
+var styles = {"modal-overlay":"modal-module-rVFJc","is-full-screen":"modal-module-uwets","modal":"modal-module-6vlFt","content":"modal-module-FJxzx","close":"modal-module-7zIZE"};
+
+export { styles as default };

package/dist/modals/recover-password/recover-password-dialog.d.ts

@@ -0,0 +1,6 @@
+interface RecoverPasswordDialogProps {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+}
+export declare function RecoverPasswordDialog({ isOpen, onOpenChange, }: RecoverPasswordDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modals/recover-password/recover-password-dialog.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { Button } from '../../buttons/button/button.js';
+import { TextField } from '../../forms/fields/text-field/text-field.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { Message } from '../../message/message.js';
+import { useRecoverPassword } from '../../shared/api/storefront/hooks/authentication/use-recover-password.js';
+import { validateEmail } from '../../shared/model/address.js';
+import { Dialog } from '../dialog/dialog.js';
+
+function RecoverPasswordDialog({ isOpen, onOpenChange, }) {
+    const t = useFormattedMessage();
+    const { error, isPending, isSuccess, mutate: recoverPassword, reset, } = useRecoverPassword();
+    useEffect(() => {
+        if (isOpen === true)
+            reset();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen]);
+    const onSubmit = ({ formData }) => {
+        const email = formData.get('email')?.toString();
+        if (!email)
+            throw new Error('Email value is required');
+        recoverPassword({
+            userName: email,
+        });
+    };
+    return (jsxs(Dialog, { allowClose: true, footer: isSuccess ? (jsx(Button, { onClick: () => onOpenChange(false), children: t('Close') })) : (jsxs(Fragment, { children: [jsx(Button, { isLoading: isPending && t('Submitting…'), type: "submit", withArrow: true, children: t('Submit email address') }), jsx(Button, { color: "secondary", isDisabled: isPending, onClick: () => onOpenChange(false), variant: "outline", children: t('Cancel') })] })), hasCloseButton: true, isDismissable: true, isKeyboardDismissDisabled: false, isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: event => onSubmit(event), shouldCloseOnInteractOutside: false, title: t('Recover your password'), children: [!isSuccess && (jsxs(Fragment, { children: [error && (jsx(Message, { type: "danger", children: t('An unexpected error occured. Please try again.') })), jsx("p", { children: t('Enter your email address and we will send you an email that will allow you to recover your password.') }), jsx(TextField, { "data-test-selector": "resetPassword_userName", isDisabled: isPending, isRequired: true, label: t('Email'), name: "email", showLabel: true, type: "email", validate: value => {
+                            if (!value)
+                                return value;
+                            return (validateEmail(value) || t('Please enter a valid email address'));
+                        } })] })), isSuccess && (jsx("p", { children: t('If an account matches the email address you entered, instructions on how to recover the password will be sent to that email address shortly. If you do not receive this email, please contact Customer Support.') }))] }));
+}
+
+export { RecoverPasswordDialog };

package/dist/modals/signin/sign-in-dialog.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Button } from '../../buttons/button/button.js';
+import { Icon } from '../../icon/icon.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { IconList, IconListItem } from '../../lists/icon-list/icon-list.js';
+import { useFavorite } from '../../shared/providers/favorite-provider.js';
+import { Dialog } from '../dialog/dialog.js';
+
+const getLocation = () => typeof window === 'undefined' ? undefined : window.location;
+function SignInDialog({ isOpen, onOpenChange }) {
+    const { signInUrl } = useFavorite();
+    const t = useFormattedMessage();
+    const location = getLocation();
+    if (!location)
+        return null;
+    return (jsx(Dialog, { isDismissable: true, footer: jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", href: `${signInUrl}?returnUrl=${encodeURIComponent(location.pathname + location.search)}`, onClick: () => onOpenChange(false), variant: "solid", children: jsx(FormattedMessage, { id: "Sign in" }) }), jsx(Button, { color: "secondary", href: `${signInUrl}?returnUrl=${encodeURIComponent(location.pathname + location.search)}`, onClick: () => onOpenChange(false), variant: "outline", children: jsx(FormattedMessage, { id: "Create account" }) })] }), isOpen: isOpen, onOpenChange: onOpenChange, title: t('Shop more efficiently and quicker with a favorites list'), children: jsxs(IconList, { children: [jsx(IconListItem, { icon: jsx(Icon, { name: "OkaySolid" }), text: t('Easily add your favorite products'), theme: "included" }), jsx(IconListItem, { icon: jsx(Icon, { name: "OkaySolid" }), text: t('Your favorites are available on multiple devices'), theme: "included" }), jsx(IconListItem, { icon: jsx(Icon, { name: "OkaySolid" }), text: t('Share your favorite list with others'), theme: "included" })] }) }));
+}
+
+export { SignInDialog };

package/dist/navigation/mobile-navigation/mobile-navigation.d.ts

@@ -0,0 +1,8 @@
+import { NavigationLinkItem } from '../../shared/api/bff/model/bff.model';
+export interface MobileNavigationProps {
+    id: string;
+    isActive: boolean;
+    linkItems: NavigationLinkItem[] | undefined;
+    onActiveChange: (isActive: boolean) => void;
+}
+export declare function MobileNavigation({ id, isActive, linkItems, onActiveChange, }: MobileNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/navigation/mobile-navigation/mobile-navigation.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { IconWithBadge } from '../../badges/badge/icon-with-badge/icon-with-badge.js';
+import { HamburgerButton } from '../../header/buttons/hamburger/hamburger-button.js';
+import { SonicLogo } from '../../header/sonic-logo/sonic-logo.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { MenuList } from '../../lists/menu-list/menu-list.js';
+import { MenuListItem } from '../../lists/menu-list/menu-list-item.js';
+import { useIsAuthenticated } from '../../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
+import { useFetchCurrentCartCount } from '../../shared/api/storefront/hooks/cart/use-fetch-current-cart-count.js';
+import { usePaths } from '../../shared/routing/use-paths.js';
+import { PanelNavigation } from '../panel-navigation/panel-navigation.js';
+import styles from './mobile-navigation.module.css.js';
+
+function MobileNavigation({ id, isActive, linkItems, onActiveChange, }) {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    const isAuthenticated = useIsAuthenticated();
+    const cartCount = useFetchCurrentCartCount();
+    return (jsxs("section", { "aria-label": t('Main menu'), className: clsx(styles['mobile-navigation'], isActive && styles['active']), "data-test-selector": "mobileNavigationMenu", id: id, children: [jsxs("header", { className: styles['header'], children: [jsx("div", { className: styles['logo'], role: "presentation", children: jsx(SonicLogo, {}) }), jsx("div", { className: styles['hamburger'], children: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", "data-test-selector": "mobileNavigationHamburgerButton", isActive: isActive, onActiveChange: onActiveChange }) })] }), jsx(PanelNavigation, { allowBack: true, className: styles['panels'], "data-test-selector": "mobileNavigationPanel", isNarrow: true, linkItems: linkItems, variant: "primary", children: jsxs(MenuList, { header: { label: t('My Sonic') }, scrollable: false, children: [jsx(MenuListItem, { badge: jsx(IconWithBadge, { badgeLabel: isAuthenticated ? t('Signed in') : t('Signed out'), badgeStatus: isAuthenticated ? 'on' : 'off', icon: "UserSolid" }), "data-authenticated": isAuthenticated ? true : false, "data-test-selector": "mobileNavigationAccountButton", href: paths.ACCOUNT, children: isAuthenticated ? t('My Sonic') : t('Sign in or create account') }), jsx(MenuListItem, { badge: jsx(IconWithBadge, { icon: "FavoriteSolid" }), "data-test-selector": "mobileNavigationFavoritesButton", href: paths.FAVORITES, children: t('Favorites') }), jsx(MenuListItem, { badge: jsx(IconWithBadge, { badgeCount: cartCount, icon: "CartSolid" }), "data-count": cartCount, "data-test-selector": "mobileNavigationCartButton", href: paths.CART, children: t('Shopping cart') })] }) })] }));
+}
+
+export { MobileNavigation };

package/dist/navigation/mobile-navigation/mobile-navigation.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"mobile-navigation":"mobile-navigation-module-rMdS-","header":"mobile-navigation-module-XKb3-","logo":"mobile-navigation-module-keQoj","hamburger":"mobile-navigation-module-3Z-Sl","active":"mobile-navigation-module-P0kLz","panels":"mobile-navigation-module-zDR9Q"};
+
+export { styles as default };

package/dist/navigation/panel-navigation/panel-navigation.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { MenuHeader } from '../../lists/menu-list/menu-list';
+import { NavigationLinkItem } from '../../shared/api/bff/model/bff.model';
+export interface PanelNavigationProps {
+    allowBack?: boolean;
+    children?: ReactNode;
+    className?: string;
+    'data-test-selector'?: string;
+    header?: MenuHeader;
+    id?: string;
+    isNarrow?: boolean;
+    linkItems?: NavigationLinkItem[];
+    variant?: 'primary';
+}
+export declare function PanelNavigation({ allowBack, children, className, 'data-test-selector': dataTestSelector, header, id, isNarrow, linkItems, variant, }: PanelNavigationProps): import("react/jsx-runtime").JSX.Element;