@sonic-equipment/ui 0.0.118 → 1.0.0

package/dist/buttons/add-to-cart-button/connected-add-to-cart-button.d.ts

@@ -1,4 +1,4 @@
-import { CartLineModel } from '../../shared/api/storefront/model/shop.model';
+import { CartLineModel } from '../../shared/api/storefront/model/storefront.model';
 export type AddToCartHandler = ({ cartLine, }: {
     cartLine: CartLineModel;
 }) => void;

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

@@ -0,0 +1,126 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+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 { usePatchCartLineById } from '../../shared/api/storefront/hooks/cart/use-patch-cart-line-by-id.js';
+import { useDataLayer } from '../../shared/ga/use-data-layer.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 updatingQuantity = useRef(null);
+    const { createEcommerceEvent, dataLayer } = useDataLayer();
+    const { isPending: isPendingAddToCart, mutate: addToCart } = useAddProductToCurrentCart();
+    const { data: cartLines } = useFetchCurrentCartLines();
+    const { isPending: isPendingDeleteCartLine, mutate: deleteCartLine } = useDeleteCartLineById();
+    const { mutate: updateCartLine } = usePatchCartLineById();
+    const { addToast } = useToast();
+    const { onCartLineAdded, onCartLineError, onCartLineRemoved, onCartLineUpdated, } = useCartEvents() || {};
+    const cartLine = cartLines?.find(line => line.productId === productId);
+    const currentQuantity = cartLine?.qtyOrdered || 0;
+    const isDisabled = updatingQuantity.current !== null &&
+        currentQuantity !== updatingQuantity.current;
+    const handleChange = (quantity) => {
+        updatingQuantity.current = 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',
+                        });
+                    },
+                    onSettled: () => {
+                        updatingQuantity.current = null;
+                    },
+                    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',
+                        });
+                    },
+                    onSettled: () => {
+                        updatingQuantity.current = null;
+                    },
+                    onSuccess: () => {
+                        onCartLineUpdated?.({ ...cartLine, qtyOrdered: quantity });
+                        const updatedQuantity = quantity - (cartLine.qtyOrdered || 0);
+                        if (updatedQuantity > 0) {
+                            dataLayer.push(createEcommerceEvent({
+                                cartLine: {
+                                    ...cartLine,
+                                    qtyOrdered: updatedQuantity,
+                                },
+                                event: {
+                                    event: 'add_to_cart',
+                                },
+                            }));
+                        }
+                        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',
+                    });
+                },
+                onSettled: () => {
+                    updatingQuantity.current = null;
+                },
+                onSuccess: cartLine => {
+                    onAddToCart?.({ cartLine });
+                    onCartLineAdded?.(cartLine);
+                    dataLayer.push(createEcommerceEvent({
+                        cartLine,
+                        event: {
+                            event: 'add_to_cart',
+                        },
+                    }));
+                    addToast({
+                        body: (jsx(FormattedMessage, { id: "The product has been added to your cart." })),
+                        isUserDismissable: false,
+                        messageType: 'success',
+                    });
+                },
+            });
+        }
+    };
+    return (jsx(AddToCartButton, { isDisabled: isDisabled || isPendingDeleteCartLine || isPendingAddToCart, onChange: handleChange, quantity: currentQuantity }));
+};
+
+export { ConnectedAddToCartButton };

package/dist/buttons/button/button.d.ts

@@ -1,17 +1,29 @@
 import { MouseEvent, ReactNode } from 'react';
+import { NavigateOptions } from '../../shared/routing/types';
 export interface ButtonProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
+    'aria-label'?: string;
     children?: ReactNode;
     className?: string;
     color?: 'primary' | 'secondary';
     condensed?: boolean;
+    'data-test-selector'?: string;
+    download?: string;
+    form?: string;
+    href?: string;
     icon?: React.ReactNode;
     iconPosition?: 'left' | 'right';
     isDisabled?: boolean;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    isLoading?: string | ReactNode | boolean;
+    isValidating?: boolean;
+    light?: boolean;
+    name?: string;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    route?: NavigateOptions;
     size?: 'sm' | 'md' | 'lg';
     type?: 'button' | 'submit' | 'reset';
+    value?: string;
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-export declare function Button({ _pseudo, children, className, color, condensed, icon, iconPosition, isDisabled, onClick: _onClick, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/buttons/button/button.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, isValidElement } from 'react';
+import clsx from 'clsx';
+import { Icon } from '../../icon/icon.js';
+import { ProgressCircle } from '../../loading/progress-circle.js';
+import { useRouteLink } from '../../shared/routing/use-route-link.js';
+import buttonStyles from './button.module.css.js';
+
+const Button = forwardRef(({ _pseudo = 'none', 'aria-label': ariaLabel, children: _children, className, color = 'primary', condensed, 'data-test-selector': dataTestSelector, download, form, href, icon, iconPosition = 'left', isDisabled, isLoading = false, isValidating = true, light = false, name, onClick, route, size = 'lg', type = 'button', value, variant = 'solid', withArrow = false, }, ref) => {
+    const { getRouteLinkProps, RouteLinkElement } = useRouteLink();
+    const handleButtonClick = (e) => {
+        if (onClick)
+            onClick(e);
+        e.stopPropagation();
+        if (type === 'submit')
+            return;
+        e.preventDefault();
+    };
+    const classNames = clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, { [buttonStyles['loading-uninformative']]: isLoading === true }, {
+        [buttonStyles['loading-informative']]: isLoading &&
+            (typeof isLoading === 'string' || isValidElement(isLoading)),
+    }, { [buttonStyles.light]: light }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className);
+    const showIconOnLeft = icon && iconPosition === 'left';
+    const showIconOnRight = icon && iconPosition === 'right';
+    const iconElement = icon && jsx("span", { className: buttonStyles.icon, children: icon });
+    const children = (jsxs(Fragment, { children: [showIconOnLeft && iconElement, jsx("span", { className: buttonStyles.children, children: isLoading ? (isLoading === true ? _children : isLoading) : _children }), withArrow && (jsx(Icon, { className: buttonStyles['right-arrow-icon'], name: "ArrowRightThick" })), showIconOnRight && iconElement, isLoading && (jsx(ProgressCircle, { className: buttonStyles.spinner, size: "sm", variant: color === 'primary' ? 'white' : 'gray' }))] }));
+    if (href) {
+        // TODO: only button currently supports ref for now
+        return (jsx(RouteLinkElement, { "aria-label": ariaLabel, className: classNames, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, download: download, onClick: onClick, type: type, ...getRouteLinkProps(href, route), children: children }));
+    }
+    return (jsx("button", { ref: ref, "aria-label": ariaLabel, className: classNames, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, form: form, formNoValidate: isValidating ? undefined : true, name: name, onClick: handleButtonClick, type: type, value: value, children: children }));
+});
+Button.displayName = 'Button';
+
+export { Button };

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

@@ -0,0 +1,3 @@
+var buttonStyles = {"button":"button-module-V4meK","light":"button-module-fepAr","icon":"button-module-XaNWz","right-arrow-icon":"button-module-ydQAo","loading-uninformative":"button-module-LwuW2","loading-informative":"button-module-U5IxM","spinner":"button-module-13ndF","children":"button-module-vqRq-","primary":"button-module-tmyk8","secondary":"button-module--1bCH","sm":"button-module-Pbwz7","md":"button-module-GVTEW","condensed":"button-module-GKHQc","lg":"button-module-nyNY8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","active":"button-module-XMFzj","ghost":"button-module-f4UVe"};
+
+export { buttonStyles as default };

package/dist/buttons/close-button/close-button.d.ts

@@ -0,0 +1,12 @@
+import { MouseEvent } from 'react';
+import { IconSize } from '../../icon/icon';
+export interface CloseButtonProps {
+    className?: string;
+    'data-test-selector'?: string;
+    isDisabled?: boolean;
+    label: string;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    size?: IconSize;
+    theme?: 'default' | 'light';
+}
+export declare function CloseButton({ className, 'data-test-selector': dataTestSelector, isDisabled, label, onClick, size, theme, }: CloseButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { IconButton } from '../icon-button/icon-button.js';
+import styles from './close-button.module.css.js';
+
+function CloseButton({ className, 'data-test-selector': dataTestSelector, isDisabled, label, onClick, size = 'md', theme = 'default', }) {
+    return (jsx(IconButton, { round: true, className: clsx(styles['close-button'], styles[`theme-${theme}`], className), "data-test-selector": dataTestSelector, icon: "Close", isDisabled: isDisabled, label: label, onClick: onClick, size: size, theme: theme }));
+}
+
+export { CloseButton };

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

@@ -0,0 +1,3 @@
+var styles = {"close-button":"close-button-module-RqdJg","theme-light":"close-button-module-GsmnG"};
+
+export { styles as default };

package/dist/buttons/favorite/connected-favorite-button.d.ts

@@ -2,4 +2,4 @@ export declare function ConnectedFavoriteButton({ onFavorited: _onFavorited, onF
     onFavorited?: VoidFunction;
     onFavoriting?: VoidFunction;
     productId: string;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,56 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } 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 { mutate: deleteWishListItemFromWishList } = useDeleteWishListItemFromWishList();
+    const [isFavorite, setIsFavorite] = useState(_isFavorite);
+    if (_isFavorite !== isFavorite)
+        setIsFavorite(_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?.();
+                },
+            });
+        }
+    }
+    if (isFavorite !== Boolean(wishList && wishListItem)) {
+        setIsFavorite(Boolean(wishList && wishListItem));
+    }
+    if ((!showSignInDialog &&
+        addWishListItemToCurrentWishListError instanceof ForbiddenRequestError) ||
+        addWishListItemToCurrentWishListError instanceof UnauthorizedRequestError) {
+        setShowSignInDialog(true);
+        refetch();
+    }
+    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.d.ts

@@ -1,6 +1,6 @@
 export interface FavoriteButtonProps {
     isDisabled?: boolean;
     isFavorite: boolean;
-    onClick: () => void;
+    onClick: VoidFunction;
 }
 export declare function FavoriteButton({ isDisabled, isFavorite, onClick: onClick, }: FavoriteButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { IconButton } from '../icon-button/icon-button.js';
+import styles from './favorite-button.module.css.js';
+
+function FavoriteButton({ isDisabled, isFavorite, onClick: onClick, }) {
+    const t = useFormattedMessage();
+    return (jsx(IconButton, { className: clsx(styles['favorite-button'], {
+            [styles['is-favorite']]: isFavorite,
+        }), icon: isFavorite ? 'FavoriteSolid' : 'Favorite', isDisabled: isDisabled, label: isFavorite ? t('Remove from favorites') : t('Add to favorites'), onClick: onClick }));
+}
+
+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"};
+
+export { styles as default };

package/dist/buttons/icon-button/icon-button.d.ts

@@ -1,11 +1,25 @@
+import { MouseEvent } from 'react';
+import { BadgeStatus } from '../../badges/badge/badge';
+import { IconSize } from '../../icon/icon';
+import { IconName } from '../../icons';
+import { NavigateOptions } from '../../shared/routing/types';
 export interface IconButtonProps {
-    children: React.ReactNode;
+    badgeCount?: number;
+    badgeLabel?: string;
+    badgeStatus?: BadgeStatus;
+    children?: React.ReactNode;
     className?: string;
-    color?: 'primary' | 'secondary' | 'current-color';
+    'data-test-selector'?: string;
+    href?: string;
+    icon?: IconName;
     isDisabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    size?: 'md' | 'lg';
-    title?: string;
+    label: string;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    round?: boolean;
+    route?: NavigateOptions;
+    size?: IconSize;
+    target?: string;
+    theme?: 'default' | 'secondary' | 'light';
     type?: 'button' | 'submit' | 'reset';
 }
-export declare function IconButton({ children, className, color, isDisabled, onClick: _onClick, size, title, type, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,24 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { IconWithBadge } from '../../badges/badge/icon-with-badge/icon-with-badge.js';
+import { useRouteLink } from '../../shared/routing/use-route-link.js';
+import styles from './icon-button.module.css.js';
+
+const IconButton = forwardRef(({ badgeCount, badgeLabel, badgeStatus, children, className: _className, 'data-test-selector': dataTestSelector, href, icon, isDisabled, label, onClick, round, route, size = 'md', target, theme, type = 'button', ...rest }, ref) => {
+    const { getRouteLinkProps, RouteLinkElement } = useRouteLink();
+    const handleButtonClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick?.(e);
+    };
+    const className = clsx(styles['icon-button'], round && styles['round'], theme && styles[`theme-${theme}`], _className);
+    if (href) {
+        return (jsxs(RouteLinkElement, { className: className, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, onClick: onClick, target: target, title: label, ...getRouteLinkProps(href, route), ...rest, children: [icon && !children && (jsx(IconWithBadge, { badgeCount: badgeCount, badgeLabel: badgeLabel, badgeStatus: badgeStatus, className: styles['icon'], icon: icon, label: label, size: size })), !icon && children && (jsx("div", { className: clsx(styles['icon'], styles[`size-${size}`]), children: children }))] }));
+    }
+    return (jsxs("button", { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, onClick: handleButtonClick, title: label, type: type, ...rest, children: [icon && !children && (jsx(IconWithBadge, { badgeCount: badgeCount, badgeLabel: badgeLabel, badgeStatus: badgeStatus, className: styles['icon'], icon: icon, label: label, size: size })), !icon && children && (jsx("div", { className: clsx(styles['icon'], styles[`size-${size}`]), children: children }))] }));
+});
+IconButton.displayName = 'IconButton';
+
+export { IconButton };

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

@@ -0,0 +1,3 @@
+var styles = {"icon-button":"icon-button-module-4PDK-","round":"icon-button-module-k3t1M","icon":"icon-button-module-VP7H-","size-xxs":"icon-button-module-QuuTN","size-xs":"icon-button-module-2lAhj","size-sm":"icon-button-module-m0IqA","size-md":"icon-button-module-mMrDe","size-lg":"icon-button-module-b8FFz","theme-secondary":"icon-button-module-DEmZc","theme-light":"icon-button-module-lEhMh"};
+
+export { styles as default };

package/dist/buttons/link/link.d.ts

@@ -1,9 +1,23 @@
-import { AnchorHTMLAttributes } from 'react';
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    areaSelected?: boolean;
+import { KeyboardEvent, MouseEventHandler, ReactNode } from 'react';
+import { NavigateOptions } from '../../shared/routing/types';
+export interface LinkProps {
+    children: ReactNode;
+    className?: string;
     color?: 'primary' | 'secondary';
     hasUnderline?: boolean;
+    href?: string;
+    hrefLang?: string;
+    id?: string;
+    ignoreLocalePrefix?: boolean;
     isDisabled?: boolean;
-    role?: 'option';
+    lang?: string;
+    onClick?: MouseEventHandler<HTMLElement>;
+    onKeyUp?: (event: KeyboardEvent) => void;
+    rel?: string;
+    role?: string;
+    route?: NavigateOptions;
+    tabIndex?: number;
+    target?: string;
+    title?: string;
 }
-export declare function Link({ children, className, color, hasUnderline, isDisabled, onClick, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLElement>>;

package/dist/buttons/link/link.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { useRouteLink } from '../../shared/routing/use-route-link.js';
+import styles from './link.module.css.js';
+
+const Link = forwardRef(({ children, className: _className, color, hasUnderline, href, hrefLang, id, ignoreLocalePrefix, isDisabled, lang, onClick, onKeyUp, rel, role, route, tabIndex, target, title, ...rest }, ref) => {
+    const { getRouteLinkProps, RouteLinkElement } = useRouteLink(ignoreLocalePrefix);
+    const className = clsx(styles['link'], hasUnderline && styles['has-underline'], color && styles[color], _className);
+    if (href) {
+        return (jsx(RouteLinkElement, { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, hrefLang: hrefLang, id: id, lang: lang, onClick: onClick, onKeyUp: onKeyUp, rel: rel, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));
+    }
+    return (jsx("button", { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, disabled: isDisabled ? true : undefined, id: id, lang: lang, onClick: onClick, onKeyUp: onKeyUp, rel: rel, role: role, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...rest, children: children }));
+});
+Link.displayName = 'Link';
+
+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","primary":"link-module-bGD6u","secondary":"link-module-v31wH"};
+
+export { styles as default };

package/dist/buttons/print-button/print-button.d.ts

@@ -1 +1,2 @@
-export declare function PrintButton(): import("react/jsx-runtime").JSX.Element;
+import { ButtonProps } from '../button/button';
+export declare function PrintButton(props: ButtonProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/buttons/reorder-button/connected-reorder-button.d.ts

@@ -0,0 +1,4 @@
+export interface ConnectedReorderButtonProps {
+    orderId: string;
+}
+export declare function ConnectedReorderButton({ orderId, }: ConnectedReorderButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { useAddBulkProductsToCurrentCart } from '../../shared/api/storefront/hooks/cart/use-add-bulk-products-to-current-cart.js';
+import { useFetchOrderById } from '../../shared/api/storefront/hooks/orders/use-fetch-order-by-id.js';
+import { useToast } from '../../toast/use-toast.js';
+import { ReorderButton } from './reorder-button.js';
+
+function ConnectedReorderButton({ orderId, }) {
+    const { data } = useFetchOrderById(orderId);
+    const toast = useToast();
+    const t = useFormattedMessage();
+    const { isPending, mutate, status } = useAddBulkProductsToCurrentCart({
+        onError: _error => toast.addToast({
+            body: t('Unable to add the order to your cart.'),
+            messageType: 'danger',
+        }),
+        onSuccess: () => toast.addToast({
+            body: t('The order has been added to your cart.'),
+            messageType: 'success',
+        }),
+    });
+    const reorder = async () => {
+        if (!data || !data.orderLines || data.orderLines.length <= 0)
+            return;
+        const params = {
+            cartLines: data.orderLines.map(line => ({
+                productId: line.productId,
+                qtyOrdered: line.qtyOrdered,
+                unitOfMeasure: line.unitOfMeasure,
+            })),
+        };
+        mutate(params);
+    };
+    return (jsx(ReorderButton, { allowReorder: Boolean(data?.orderLines && data.orderLines.length > 0), isPending: isPending, onReorder: reorder, orderId: orderId, status: status }));
+}
+
+export { ConnectedReorderButton };

package/dist/buttons/reorder-button/reorder-button.d.ts

@@ -0,0 +1,9 @@
+import { MutationStatus } from '@tanstack/react-query';
+export interface ReorderButtonProps {
+    allowReorder?: boolean;
+    isPending: boolean;
+    onReorder: VoidFunction;
+    orderId: string;
+    status: MutationStatus;
+}
+export declare function ReorderButton({ allowReorder, isPending, onReorder, orderId, status, }: ReorderButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { Button } from '../button/button.js';
+
+function ReorderButton({ allowReorder = true, isPending, onReorder, orderId, status, }) {
+    const t = useFormattedMessage();
+    return (jsx(Button, { "data-order-id": orderId, "data-reorder-status": status, "data-test-selector": "reorder-button", iconPosition: "right", isDisabled: isPending || !allowReorder, isLoading: isPending ? t('Reordering...') : false, onClick: onReorder, children: jsx(FormattedMessage, { id: "Reorder" }) }));
+}
+
+export { ReorderButton };

package/dist/cards/category-card/category-card.d.ts

@@ -1,11 +1,12 @@
 import { ImageSourceType } from '../../shared/model/image';
+import { NavigateOptions } from '../../shared/routing/types';
 export interface CategoryCardProps {
     className?: string;
     href: string;
     image: ImageSourceType;
     isSelected?: boolean;
     onClick?: VoidFunction;
+    route?: NavigateOptions;
     title: string;
-    withArrow?: boolean;
 }
-export declare function CategoryCard({ className, href, image, isSelected, onClick, title, withArrow, }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoryCard({ className, href, image, isSelected, onClick, route, title, }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Link } from '../../buttons/link/link.js';
+import { Image } from '../../media/image/image.js';
+import styles from './category-card.module.css.js';
+
+function CategoryCard({ className, href, image, isSelected = false, onClick, route, title, }) {
+    return (jsxs(Link, { className: clsx({
+            [styles['is-selected']]: isSelected,
+        }, styles['category-card'], className), href: href, onClick: onClick, route: route, children: [jsx("div", { className: styles['image-container'], role: "presentation", children: jsx(Image, { className: styles.image, ...image, fit: "contain" }) }), jsx("div", { className: styles.title, children: title })] }));
+}
+
+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","image-container":"category-card-module-oNTrK","image":"category-card-module-RxWMW","is-selected":"category-card-module-vJ7vB"};
+
+export { styles as default };

package/dist/cards/data-card/data-card.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { TranslationId } from '../../intl/translation-id';
+export interface DataItemBase {
+    key: string;
+    type?: 'section' | 'field';
+}
+export interface DataField extends DataItemBase {
+    key: string;
+    label: TranslationId;
+    type?: 'field';
+    value: unknown;
+}
+export interface DataSection extends DataItemBase {
+    data: DataField[];
+    heading?: TranslationId;
+    key: string;
+    type: 'section';
+}
+export type DataItem = DataField | DataSection;
+export interface Rendering {
+    label?(args: {
+        key: string;
+        label: string;
+    }): ReactNode;
+    value?(args: {
+        key: string;
+        value: unknown;
+    }): ReactNode;
+}
+export interface DataCardProps {
+    actions?: React.ReactNode[];
+    data: DataItem[];
+    'data-test-selector'?: string;
+    isLoading?: boolean;
+    rendering?: Rendering;
+    showError?: Error | TranslationId | boolean | null;
+    title?: TranslationId;
+}
+export declare function DataCard({ actions, data, 'data-test-selector': dataTestSelector, isLoading, rendering, showError, title, }: DataCardProps): import("react/jsx-runtime").JSX.Element;