@sonic-equipment/ui 0.0.119 → 120.0.0

package/dist/breadcrumbs/breadcrumb.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Breadcrumbs, Breadcrumb as Breadcrumb$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import { GlyphsChevronsSlimLeftIcon } from '../icons/glyph/glyphs-chevrons-slim-left-icon.js';
+import { SolidHomeIcon } from '../icons/solid/solid-home-icon.js';
+import { useBreakpoint } from '../shared/hooks/use-breakpoint.js';
+import { RouteLink } from '../shared/routing/route-link.js';
+import styles from './breadcrumb.module.css.js';
+
+function BreadcrumbShort({ links }) {
+    const homeLink = links[0];
+    const previousLink = links.at(-2);
+    const isHomeLink = previousLink === undefined || previousLink === homeLink;
+    const href = previousLink?.href || homeLink?.href;
+    return (jsx(Breadcrumbs, { className: styles.breadcrumbs, children: jsx(Breadcrumb$1, { className: styles.breadcrumb, children: jsxs(RouteLink, { className: styles.link, href: href, isDisabled: false, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles.icon }), isHomeLink ? (jsx(SolidHomeIcon, { className: styles.icon })) : (jsx("span", { children: previousLink.label }))] }) }) }));
+}
+function BreadcrumbLongItem({ index, isDisabled, link, }) {
+    return (jsx(Breadcrumb$1, { className: styles.breadcrumb, children: jsxs(RouteLink, { className: styles.link, color: "secondary", href: link.href, isDisabled: isDisabled, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles['previous-icon'], styles.icon) }), link.label] }) }, index));
+}
+function BreadcrumbLong({ links }) {
+    const linksWithoutFirst = links.slice(1);
+    const homeLink = links[0];
+    if (!homeLink)
+        return null;
+    return (jsxs(Breadcrumbs, { className: styles.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles.breadcrumb, children: jsx(RouteLink, { className: styles.link, href: homeLink.href, children: jsx(SolidHomeIcon, { className: clsx(styles['home-icon'], styles.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, index)))] }));
+}
+function Breadcrumb({ links }) {
+    const { lg } = useBreakpoint();
+    if (links.length <= 1)
+        return null;
+    return lg ? BreadcrumbLong({ links }) : BreadcrumbShort({ links });
+}
+
+export { Breadcrumb };

package/dist/breadcrumbs/breadcrumb.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"breadcrumbs":"breadcrumb-module-CQGse","breadcrumb":"breadcrumb-module-hxhDY","link":"breadcrumb-module-fp2Q6","icon":"breadcrumb-module-uIn3w","previous-icon":"breadcrumb-module-K-wMJ"};
+
+export { styles as default };

package/dist/buttons/add-to-cart-button/add-to-cart-button.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useRef } from 'react';
+import { NumberField } from '../../forms/number-field/number-field.js';
+import { SolidCartIcon } from '../../icons/solid/solid-cart-icon.js';
+import { useDebouncedCallback } from '../../shared/hooks/use-debounced-callback.js';
+import { Button } from '../button/button.js';
+import styles from './add-to-cart-button.module.css.js';
+
+function AddToCartButton({ initialState = 'initial', isDisabled = false, onChange, quantity, }) {
+    const [currentState, setState] = useState(initialState);
+    const [manualInputQuantity, setManualInputQuantity] = useState(null);
+    useEffect(() => {
+        setState(currentState => {
+            if (currentState === 'initial' && quantity > 0)
+                return 'spinner';
+            if (currentState === 'spinner' && quantity === 0)
+                return 'initial';
+            if (currentState === 'manual-input' && quantity === 0)
+                return 'initial';
+            if (currentState === 'manual-input' && manualInputQuantity === null)
+                return 'initial';
+            return currentState;
+        });
+    }, [currentState, quantity, manualInputQuantity]);
+    useEffect(() => {
+        if (currentState === 'manual-input')
+            setManualInputQuantity(null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [quantity]);
+    if (currentState === 'initial')
+        return (jsx(InitialState, { isDisabled: isDisabled, onAddToCart: () => {
+                onChange(1);
+            } }));
+    if (currentState === 'spinner')
+        return (jsx(SpinnerState, { isDisabled: isDisabled, onChange: value => {
+                onChange(value);
+            }, onManualInput: value => {
+                setManualInputQuantity(value);
+                setState('manual-input');
+            }, quantity: quantity }));
+    return (jsx(ManualInputState, { isDisabled: isDisabled, onCancel: () => setState('spinner'), onConfirm: value => {
+            onChange(value);
+        }, quantity: manualInputQuantity || '' }));
+}
+function InitialState({ isDisabled, onAddToCart, }) {
+    return (jsx(Button, { condensed: true, icon: jsx(SolidCartIcon, {}), isDisabled: isDisabled, onClick: e => {
+            e.preventDefault();
+            e.stopPropagation();
+            onAddToCart();
+        }, size: "md" }));
+}
+const ensureNumber = (value) => {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value !== 'string')
+        return 0;
+    const numberValue = Number.parseFloat(value);
+    return Number.isNaN(numberValue) ? 0 : numberValue;
+};
+function SpinnerState({ isDisabled, onChange, onManualInput, quantity, }) {
+    const [internalQuantity, setInternalQuantity] = useState(quantity);
+    const mounted = useRef(false);
+    const onDebouncedChange = useDebouncedCallback(value => {
+        // Prevent calling the debounced onChange callback after the component is unmounted
+        if (!mounted.current)
+            return;
+        onChange(value);
+    }, 500);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    useEffect(() => {
+        setInternalQuantity(quantity);
+    }, [quantity]);
+    return (jsx(NumberField, { withButtons: true, autoGrow: true, formatOptions: {
+            maximumFractionDigits: 0,
+            style: 'decimal',
+            useGrouping: false,
+        }, isDisabled: isDisabled, label: "Quantity", maxLength: 4, maxValue: 9999, minValue: 0, onChange: quantity => {
+            setInternalQuantity(quantity);
+            if (quantity === 0) {
+                mounted.current = false;
+                return onChange(0);
+            }
+            onDebouncedChange(quantity);
+        }, onInput: e => {
+            onManualInput(e.target.value);
+        }, showLabel: false, size: "md", value: internalQuantity }));
+}
+function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
+    const [updatedQuantity, setQuantity] = useState(quantity);
+    const onKeyUp = (e) => {
+        if (e.key === 'Enter')
+            onConfirm(ensureNumber(updatedQuantity));
+        if (e.key === 'Escape')
+            onCancel();
+    };
+    return (jsxs("div", { className: styles['manual-input-container'], children: [jsx("div", { className: styles['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity ? ensureNumber(quantity) : undefined, formatOptions: {
+                    maximumFractionDigits: 0,
+                    style: 'decimal',
+                    useGrouping: false,
+                }, isDisabled: isDisabled, label: "Quantity", maxLength: 4, maxValue: 9999, minValue: 0, name: "quantity", onChange: value => setQuantity(String(value)), onKeyUp: onKeyUp, showLabel: false, size: "md" }), jsx(Button, { condensed: true, isDisabled: isDisabled, onClick: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onConfirm(ensureNumber(updatedQuantity));
+                }, size: "md", children: "OK" })] }));
+}
+
+export { AddToCartButton };

package/dist/buttons/add-to-cart-button/add-to-cart-button.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
+
+export { styles as default };

package/dist/buttons/add-to-cart-button/connected-add-to-cart-button.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useAddProductToCurrentCart } from '../../shared/api/storefront/hooks/cart/use-add-product-to-current-cart.js';
+import { useDeleteCartLineById } from '../../shared/api/storefront/hooks/cart/use-delete-cart-line-by-id.js';
+import { useFetchCurrentCartLines } from '../../shared/api/storefront/hooks/cart/use-fetch-current-cart-lines.js';
+import { useUpdateCartLineById } from '../../shared/api/storefront/hooks/cart/use-update-cart-line-by-id.js';
+import { useCartEvents } from '../../shared/providers/cart-provider.js';
+import { useToast } from '../../toast/use-toast.js';
+import { AddToCartButton } from './add-to-cart-button.js';
+
+const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
+    const { isPending: isPendingAddToCart, mutate: addToCart } = useAddProductToCurrentCart();
+    const { data: cartLines, isLoading: isLoadingCartLines } = useFetchCurrentCartLines();
+    const { isPending: isPendingDeleteCartLine, mutate: deleteCartLine } = useDeleteCartLineById();
+    const { mutate: updateCartLine } = useUpdateCartLineById();
+    const { addToast } = useToast();
+    const { onCartLineAdded, onCartLineError, onCartLineRemoved, onCartLineUpdated, } = useCartEvents() || {};
+    const cartLine = cartLines?.find(line => line.productId === productId);
+    const quantity = cartLine?.qtyOrdered || 0;
+    const handleChange = (quantity) => {
+        if (cartLine) {
+            if (quantity === 0) {
+                deleteCartLine({ cartLineId: cartLine.id }, {
+                    onError: error => {
+                        onCartLineError?.(error, cartLine);
+                        addToast({
+                            body: (jsx(FormattedMessage, { id: "Unable to remove the product from your cart." })),
+                            isUserDismissable: false,
+                            messageType: 'danger',
+                        });
+                    },
+                    onSuccess: () => {
+                        onCartLineRemoved?.(cartLine);
+                        addToast({
+                            body: (jsx(FormattedMessage, { id: "The product has been removed from your cart." })),
+                            isUserDismissable: false,
+                            messageType: 'success',
+                        });
+                    },
+                });
+            }
+            else {
+                updateCartLine({
+                    cartLine: { ...cartLine, qtyOrdered: quantity },
+                    cartLineId: cartLine.id,
+                }, {
+                    onError: error => {
+                        onCartLineError?.(error, cartLine);
+                        addToast({
+                            body: (jsx(FormattedMessage, { id: "Unable to update the product in your cart." })),
+                            isUserDismissable: false,
+                            messageType: 'danger',
+                        });
+                    },
+                    onSuccess: () => {
+                        onCartLineUpdated?.({ ...cartLine, qtyOrdered: quantity });
+                        addToast({
+                            body: (jsx(FormattedMessage, { id: "The product has been updated in your cart." })),
+                            isUserDismissable: false,
+                            messageType: 'success',
+                        });
+                    },
+                });
+            }
+        }
+        else {
+            addToCart({ productId, qtyOrdered: quantity, unitOfMeasure: '' }, {
+                onError: error => {
+                    onCartLineError?.(error, cartLine);
+                    addToast({
+                        body: (jsx(FormattedMessage, { id: "Unable to add the product to your cart." })),
+                        isUserDismissable: false,
+                        messageType: 'danger',
+                    });
+                },
+                onSuccess: cartLine => {
+                    onAddToCart?.({ cartLine });
+                    onCartLineAdded?.(cartLine);
+                    addToast({
+                        body: (jsx(FormattedMessage, { id: "The product has been added to your cart." })),
+                        isUserDismissable: false,
+                        messageType: 'success',
+                    });
+                },
+            });
+        }
+    };
+    return (jsx(AddToCartButton, { isDisabled: isPendingDeleteCartLine || isLoadingCartLines || isPendingAddToCart, onChange: handleChange, quantity: quantity }));
+};
+
+export { ConnectedAddToCartButton };

package/dist/buttons/button/button.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { GlyphsArrowBoldCapsRightIcon } from '../../icons/glyph/glyphs-arrow-boldcaps-right-icon.js';
+import buttonStyles from './button.module.css.js';
+
+function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, icon, iconPosition = 'left', isDisabled, onClick: _onClick, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
+    const showIconOnLeft = icon && iconPosition === 'left';
+    const showIconOnRight = icon && iconPosition === 'right';
+    const onClick = (e) => {
+        if (_onClick)
+            _onClick(e);
+        e.stopPropagation();
+        if (type === 'submit')
+            return;
+        e.preventDefault();
+    };
+    return (jsxs("button", { className: clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), "data-disabled": isDisabled ? true : undefined, disabled: isDisabled, onClick: onClick, type: type, children: [jsx(Fragment, { children: showIconOnLeft && jsx("span", { className: buttonStyles.icon, children: icon }) }), children, withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && jsx("span", { className: buttonStyles.icon, children: icon })] }));
+}
+
+export { Button };

package/dist/buttons/button/button.module.css.js

@@ -0,0 +1,3 @@
+var buttonStyles = {"button":"button-module-V4meK","icon":"button-module-XaNWz","sm":"button-module-Pbwz7","md":"button-module-GVTEW","condensed":"button-module-GKHQc","lg":"button-module-nyNY8","primary":"button-module-tmyk8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","focus":"button-module--xzsY","active":"button-module-XMFzj","ghost":"button-module-f4UVe","right-arrow-icon":"button-module-ydQAo","secondary":"button-module--1bCH"};
+
+export { buttonStyles as default };

package/dist/buttons/favorite/connected-favorite-button.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { SignInDialog } from '../../modals/signin/sign-in-dialog.js';
+import { useFetchSession } from '../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
+import { useIsAuthenticated } from '../../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
+import { useAddWishListItemToCurrentWishList } from '../../shared/api/storefront/hooks/wishlist/use-add-wishlist-item-to-current-wishlist.js';
+import { useDeleteWishListItemFromWishList } from '../../shared/api/storefront/hooks/wishlist/use-delete-wishlist-item-from-wishlist.js';
+import { ForbiddenRequestError, UnauthorizedRequestError } from '../../shared/fetch/request.js';
+import { useFavoriteProduct } from '../../shared/providers/favorite-provider.js';
+import { FavoriteButton } from './favorite-button.js';
+
+function ConnectedFavoriteButton({ onFavorited: _onFavorited, onFavoriting: _onFavoriting, productId, }) {
+    const { refetch } = useFetchSession();
+    const isAuthenticated = useIsAuthenticated();
+    const { isFavorite: _isFavorite, isFetching, wishList, wishListItem, } = useFavoriteProduct(productId);
+    const [showSignInDialog, setShowSignInDialog] = useState(false);
+    const { error: addWishListItemToCurrentWishListError, mutate: addWishListItemToCurrentWishList, } = useAddWishListItemToCurrentWishList();
+    const { error: deleteWishListItemFromWishListError, mutate: deleteWishListItemFromWishList, } = useDeleteWishListItemFromWishList();
+    const [isFavorite, setIsFavorite] = useState(_isFavorite);
+    function onFavorite() {
+        if (!(wishList && wishListItem))
+            _onFavoriting?.();
+        if (!isAuthenticated) {
+            return setShowSignInDialog(true);
+        }
+        setIsFavorite(currentValue => !currentValue);
+        if (wishList && wishListItem) {
+            deleteWishListItemFromWishList({
+                wishListId: wishList.id,
+                wishListItemId: wishListItem.id,
+            });
+        }
+        else {
+            addWishListItemToCurrentWishList({ productId }, {
+                onSuccess() {
+                    _onFavorited?.();
+                },
+            });
+        }
+    }
+    useEffect(() => {
+        setIsFavorite(_isFavorite);
+    }, [_isFavorite]);
+    useEffect(() => {
+        setIsFavorite(Boolean(wishList && wishListItem));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        addWishListItemToCurrentWishListError,
+        deleteWishListItemFromWishListError,
+    ]);
+    useEffect(() => {
+        if (addWishListItemToCurrentWishListError instanceof ForbiddenRequestError ||
+            addWishListItemToCurrentWishListError instanceof UnauthorizedRequestError) {
+            refetch();
+            return setShowSignInDialog(true);
+        }
+    }, [addWishListItemToCurrentWishListError, refetch]);
+    if (isFetching)
+        return null;
+    return (jsxs(Fragment, { children: [jsx(FavoriteButton, { isDisabled: isFetching, isFavorite: isFavorite, onClick: onFavorite }), jsx(SignInDialog, { isOpen: showSignInDialog, onOpenChange: setShowSignInDialog })] }));
+}
+
+export { ConnectedFavoriteButton };

package/dist/buttons/favorite/favorite-button.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { SolidFavoriteIcon } from '../../icons/solid/solid-favorite-icon.js';
+import { StrokeFavoriteIcon } from '../../icons/stroke/stroke-favorite-icon.js';
+import { IconButton } from '../icon-button/icon-button.js';
+import styles from './favorite-button.module.css.js';
+
+function FavoriteButton({ isDisabled, isFavorite, onClick: onClick, }) {
+    return (jsx(IconButton, { className: clsx(styles['favorite-button'], {
+            [styles['is-favorite']]: isFavorite,
+        }), color: "secondary", isDisabled: isDisabled, onClick: onClick, children: isFavorite ? jsx(SolidFavoriteIcon, {}) : jsx(StrokeFavoriteIcon, {}) }));
+}
+
+export { FavoriteButton };

package/dist/buttons/favorite/favorite-button.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q","favorite-on":"favorite-button-module-6Tsmy","favorite-off":"favorite-button-module-LQauU"};
+
+export { styles as default };

package/dist/buttons/icon-button/icon-button.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './icon-button.module.css.js';
+
+function IconButton({ children, className, color = 'primary', isDisabled, onClick: _onClick, size = 'md', title, type = 'button', ...rest }) {
+    const onClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        _onClick?.(e);
+    };
+    return (jsx("button", { className: clsx(styles['icon-button'], styles[size], styles[color], className), "data-disabled": isDisabled ? true : undefined, disabled: isDisabled, onClick: onClick, title: title, type: type, ...rest, children: children }));
+}
+
+export { IconButton };

package/dist/buttons/icon-button/icon-button.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"icon-button":"icon-button-module-4PDK-","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo","current-color":"icon-button-module-71HRy"};
+
+export { styles as default };

package/dist/buttons/link/link.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './link.module.css.js';
+
+function Link({ children, className, color = 'primary', hasUnderline, isDisabled, onClick, onKeyUp, ...props }) {
+    return (jsx("a", { className: clsx({ [styles['has-underline']]: hasUnderline }, styles['link'], styles[color], className), "data-disabled": isDisabled ? true : undefined, onClick: onClick, onKeyUp: onKeyUp, role: "link", tabIndex: isDisabled ? -1 : 0, ...props, children: children }));
+}
+
+export { Link };

package/dist/buttons/link/link.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"link":"link-module-xLqBn","has-underline":"link-module-UuCEp","secondary":"link-module-v31wH","primary":"link-module-bGD6u"};
+
+export { styles as default };

package/dist/buttons/print-button/print-button.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { Button } from '../button/button.js';
+
+function PrintButton() {
+    return (jsx(Button, { color: "secondary", onClick: () => window?.print(), variant: "outline", children: jsx(FormattedMessage, { id: "Print" }) }));
+}
+
+export { PrintButton };

package/dist/cards/category-card/category-card.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { GlyphsArrowBoldCapsRightIcon } from '../../icons/glyph/glyphs-arrow-boldcaps-right-icon.js';
+import { Image } from '../../media/image/image.js';
+import { RouteLink } from '../../shared/routing/route-link.js';
+import styles from './category-card.module.css.js';
+
+function CategoryCard({ className, href, image, isSelected = false, onClick, title, withArrow = false, }) {
+    return (jsxs(RouteLink, { className: clsx({
+            [styles['is-selected']]: isSelected,
+        }, styles['category-card'], className), href: href, onClick: onClick, children: [jsx("div", { className: styles['image-container'], children: jsx(Image, { className: styles.image, ...image, fit: "contain" }) }), jsxs("p", { className: styles.title, children: [jsx("span", { children: title }), withArrow && jsx(GlyphsArrowBoldCapsRightIcon, { className: styles.arrow })] })] }));
+}
+
+export { CategoryCard };

package/dist/cards/category-card/category-card.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"category-card":"category-card-module-4NUjH","title":"category-card-module-LEhh3","arrow":"category-card-module-hL4-A","image":"category-card-module-RxWMW","is-selected":"category-card-module-vJ7vB","image-container":"category-card-module-oNTrK"};
+
+export { styles as default };

package/dist/cards/orderline-card/connected-orderline-card.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { ConnectedAddToCartButton } from '../../buttons/add-to-cart-button/connected-add-to-cart-button.js';
+import { ConnectedRemoveButton } from './connected-remove-button.js';
+import { OrderLineCard } from './orderline-card.js';
+
+function ConnectedOrderLineCard({ onRemove, orderLineId, productId, ...props }) {
+    return (jsx(OrderLineCard, { productId: productId, ...props, addToCartButton: jsx(ConnectedAddToCartButton, { productId: productId }), readonly: false, removeButton: jsx(ConnectedRemoveButton, { id: orderLineId, onRemove: orderLineId => {
+                onRemove?.(orderLineId);
+            } }) }));
+}
+
+export { ConnectedOrderLineCard };

package/dist/cards/orderline-card/connected-remove-button.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { IconButton } from '../../buttons/icon-button/icon-button.js';
+import { StrokeTrashIcon } from '../../icons/stroke/stroke-trash-icon.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';
+
+function ConnectedRemoveButton({ id: productId, onRemove: _onRemove, }) {
+    const t = useFormattedMessage();
+    const { close, isOpen, open } = useDisclosure();
+    function onRemove() {
+        close();
+        _onRemove(productId);
+    }
+    return (jsxs(Fragment, { children: [jsx(IconButton, { color: "secondary", onClick: open, children: jsx(StrokeTrashIcon, {}) }), jsx(ConfirmationDialog, { isOpen: isOpen, onCancel: close, onConfirm: onRemove, title: t('Are you sure you want to remove this item from your cart?') })] }));
+}
+
+export { ConnectedRemoveButton };

package/dist/cards/orderline-card/orderline-card.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Tag } from '../../badges/tag/tag.js';
+import { DeliveryTime } from '../../delivery-time/delivery-time.js';
+import { ProductTotalPrice } from '../../display/product-price/product-total-price.js';
+import { ProductSku } from '../../display/product-sku/product-sku.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { Image } from '../../media/image/image.js';
+import { RouteLink } from '../../shared/routing/route-link.js';
+import { Heading } from '../../typography/heading/heading.js';
+import styles from './orderline-card.module.css.js';
+
+function OrderLineCard(props) {
+    const { deliveryDate, href, image, price, productId, readonly, sku, tags, title, } = props;
+    return (jsxs(RouteLink, { className: styles['orderline-card'], href: href, id: productId, children: [jsx("div", { className: styles['image-container'], children: jsx(Image, { ...image }) }), jsxs("div", { className: styles.body, children: [jsxs("div", { className: styles['title-container'], children: [tags && (jsx("div", { className: styles.tag, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(Heading, { className: styles.title, size: "xxxs", tag: "h3", children: title }), jsx("div", { className: styles.sku, children: jsx(ProductSku, { sku: sku }) })] }), readonly ? (jsx("p", { className: styles.amount, children: jsx(FormattedMessage, { id: "Amount: {0}", replacementValues: { '0': props.quantity.toString() } }) })) : (jsx("div", { className: styles['add-to-cart-button'], children: props.addToCartButton })), jsx(ProductTotalPrice, { className: styles.price, originalTotalPrice: price.originalTotalPrice, pricePerUnit: price.pricePerUnit, totalPrice: price.totalPrice }), deliveryDate && (jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate })), !readonly && jsx("div", { className: styles.remove, children: props.removeButton })] })] }));
+}
+
+export { OrderLineCard };

package/dist/cards/orderline-card/orderline-card.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"orderline-card":"orderline-card-module-AMTMm","image-container":"orderline-card-module-TlhUg","body":"orderline-card-module-L0kX1","title-container":"orderline-card-module-D-6JE","tag":"orderline-card-module-uiHOY","title":"orderline-card-module-C8xE6","amount":"orderline-card-module-s-u3O","add-to-cart-button":"orderline-card-module-ZjAaX","price":"orderline-card-module-q3yjo","delivery":"orderline-card-module-N-Oe-","remove":"orderline-card-module-0CunP"};
+
+export { styles as default };

package/dist/cards/product-card/connected-product-card.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { ConnectedAddToCartButton } from '../../buttons/add-to-cart-button/connected-add-to-cart-button.js';
+import { ConnectedFavoriteButton } from '../../buttons/favorite/connected-favorite-button.js';
+import { ProductCard } from './product-card.js';
+
+function ConnectedProductCard({ id, onAddToCart, onFavorited, onFavoriting, ...props }) {
+    return (jsx(ProductCard, { id: id, ...props, addToCartButton: jsx(ConnectedAddToCartButton, { onAddToCart: onAddToCart, productId: id }), favoriteButton: jsx(ConnectedFavoriteButton, { onFavorited: onFavorited, onFavoriting: onFavoriting, productId: id }) }));
+}
+
+export { ConnectedProductCard };

package/dist/cards/product-card/product-card.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tag } from '../../badges/tag/tag.js';
+import { ProductPrice } from '../../display/product-price/product-price.js';
+import { ProductSku } from '../../display/product-sku/product-sku.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { Image } from '../../media/image/image.js';
+import { RouteLink } from '../../shared/routing/route-link.js';
+import styles from './product-card.module.css.js';
+
+function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, id, image, onClick, price, sku, tags, title, }) {
+    return (jsx("div", { className: styles['product-card-container'], children: jsxs(RouteLink, { className: styles['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, children: [jsx("div", { className: styles.image, children: jsx(Image, { ...image }) }), jsx("div", { className: styles['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles.content, children: [jsxs("div", { className: styles.top, children: [jsx("div", { className: styles.tag, children: tags?.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) }), jsx("h2", { className: styles.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles.bottom, children: [jsx("div", { className: styles.price, children: jsx(ProductPrice, { isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price }) }), jsx("div", { className: styles['add-to-cart-button'], children: AddToCartButton })] })] })] }) }));
+}
+
+export { ProductCard };

package/dist/cards/product-card/product-card.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"product-card-container":"product-card-module-LepTy","product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
+
+export { styles as default };

package/dist/carousel/card-carousel/card-carousel.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import clsx from 'clsx';
+import { Button } from '../../buttons/button/button.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { ProductOverviewGrid } from '../../lists/product-overview-grid/product-overview-grid.js';
+import { Carousel } from '../carousel.js';
+import styles from './card-carousel.module.css.js';
+
+function CardCarousel({ allowExpandToGrid = false, cards, cardsPerView = {
+    md: 2,
+    sm: 1,
+    xxl: 3,
+}, cardWidth = 'auto', hasOverflow = false, }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    if (!isExpanded) {
+        return (jsxs("div", { className: styles['carousel-container'], children: [jsx(Carousel, { hasOverflow: hasOverflow, navigationButtonsPosition: "center", slideClasses: clsx(styles.slide, styles[`width-${cardWidth}`]), slides: cards, slidesPerView: cardsPerView, spaceBetween: 16 }), allowExpandToGrid && (jsx(Button, { withArrow: true, className: styles.button, color: "secondary", onClick: () => setIsExpanded(true), variant: "outline", children: jsx(FormattedMessage, { id: "Show all" }) }))] }));
+    }
+    return (jsxs("div", { className: styles['carousel-container'], children: [jsxs(ProductOverviewGrid, { children: [...cards] }), jsx(Button, { withArrow: true, className: styles.button, color: "secondary", onClick: () => setIsExpanded(false), variant: "outline", children: jsx(FormattedMessage, { id: "Show less" }) })] }));
+}
+
+export { CardCarousel };

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

@@ -0,0 +1,3 @@
+var styles = {"carousel-container":"card-carousel-module-JXQmk","button":"card-carousel-module-XQ2pX","slide":"card-carousel-module-DxKOG","width-auto":"card-carousel-module-RQ8gl","width-narrow":"card-carousel-module-8uKSt","width-normal":"card-carousel-module-l-ylK"};
+
+export { styles as default };

package/dist/carousel/carousel-navigation-button.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { GlyphsArrowBoldCapsLeftIcon } from '../icons/glyph/glyphs-arrow-boldcaps-left-icon.js';
+import { GlyphsArrowBoldCapsRightIcon } from '../icons/glyph/glyphs-arrow-boldcaps-right-icon.js';
+import styles from './carousel-navigation-button.module.css.js';
+
+const CarouselNavigationButton = forwardRef(function NavigationButton({ className, direction, onClick }, ref) {
+    return (jsx("button", { ref: ref, className: clsx(styles['carousel-navigation-button'], className), onClick: () => onClick?.(direction), children: direction === 'previous' ? (jsx(GlyphsArrowBoldCapsLeftIcon, {})) : (jsx(GlyphsArrowBoldCapsRightIcon, {})) }));
+});
+
+export { CarouselNavigationButton };

package/dist/carousel/carousel-navigation-button.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"carousel-navigation-button":"carousel-navigation-button-module-a1-I4"};
+
+export { styles as default };