@sonic-equipment/ui 141.0.0 → 143.0.0

package/dist/address-info-display/address-info-display.d.ts

@@ -0,0 +1,6 @@
+import { AddressType } from '../shared/model/address';
+export interface AddressProps {
+    address: AddressType;
+    'data-test-selector'?: string;
+}
+export declare function AddressInfoDisplay({ address, 'data-test-selector': dataTestSelector, }: AddressProps): import("react/jsx-runtime").JSX.Element;

package/dist/{address/address.js → address-info-display/address-info-display.js}

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { capitalizeFirstLetter } from '../shared/utils/string.js';
-import styles from './address.module.css.js';
+import styles from './address-info-display.module.css.js';
 
-function Address({ address, 'data-test-selector': dataTestSelector, }) {
+function AddressInfoDisplay({ address, 'data-test-selector': dataTestSelector, }) {
     const { address1, address2, address3, city, companyName, country, email, firstName, lastName, phone, postalCode, } = address;
     return (jsxs("address", { className: styles.address, "data-test-selector": dataTestSelector, children: [(firstName || lastName) && (jsx("p", { "data-test-selector": "addressInfoDisplay_name", children: `${firstName} ${lastName}` })), companyName && (jsx("p", { "data-test-selector": "addressInfoDisplay_companyName", children: companyName })), address1 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address1", children: address1 })), address2 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address2", children: address2 })), address3 && (jsx("p", { "data-test-selector": "addressInfoDisplay_address3", children: address3 })), (postalCode || city) && (jsxs("p", { "data-test-selector": "addressInfoDisplay_postalCodeAndCity", children: [postalCode, " ", city ? capitalizeFirstLetter(city) : ''] })), country && (jsx("p", { "data-test-selector": "addressInfoDisplay_country", children: country })), phone && jsx("p", { "data-test-selector": "addressInfoDisplay_phone", children: phone }), email && jsx("p", { "data-test-selector": "addressInfoDisplay_email", children: email })] }));
 }
 
-export { Address };
+export { AddressInfoDisplay };

package/dist/address-info-display/address-info-display.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"address":"address-info-display-module-CbRth"};
+
+export { styles as default };

package/dist/algolia/algolia-filter-panel.js

@@ -34,8 +34,8 @@ function AlgoliaFilterPanel({ showActiveCategories = false, showCategoriesFilter
     });
     return (jsx("div", { className: styles['filter-panel'], children: jsxs("div", { className: styles['scroll-container'], children: [showActiveCategories && jsx(AlgoliaActiveCategories, {}), showCategoriesFilters && jsx(AlgoliaCategoriesFilters, {}), jsx(AlgoliaActiveFilters, {}), attributesToRender.length === 0 ? (jsx(AlgoliaDummyRefinementListConsumer, {})) : (jsx("section", { children: attributesToRender
                         .filter(attribute => !MULTISELECT_ATTRIBUTE_IGNORE_LIST.includes(attribute))
-                        .map((attribute, index) => {
-                        return (jsx(AlgoliaMultiSelectFilterSection, { attribute: attribute }, `attribute-${index}`));
+                        .map(attribute => {
+                        return (jsx(AlgoliaMultiSelectFilterSection, { attribute: attribute }, `attribute-${attribute}`));
                     }) })), jsx(PanelCloseButton, {})] }) }));
 }
 

package/dist/algolia/algolia-search-provider.js

@@ -142,17 +142,28 @@ function AlgoliaSearchProvider({ children, searchClient: _searchClient, }) {
             window?.removeEventListener('touchmove', onTouchMove);
         };
     }, [getEnvironmentProps, state.isOpen]);
-    return (jsx(AlgoliaInsightsProvider, { value: { index: productsIndexName }, children: jsx(GlobalSearchContext.Provider, { value: {
-                autocomplete,
-                formRef,
-                inputRef,
-                panelRef,
-                productsIndexName,
-                productsQuerySuggestionsIndexName,
-                searchClient,
-                setState,
-                state,
-            }, children: typeof children === 'function' ? children(autocomplete) : children }) }));
+    const value = useMemo(() => ({
+        autocomplete,
+        formRef,
+        inputRef,
+        panelRef,
+        productsIndexName,
+        productsQuerySuggestionsIndexName,
+        searchClient,
+        setState,
+        state,
+    }), [
+        autocomplete,
+        formRef,
+        inputRef,
+        panelRef,
+        productsIndexName,
+        productsQuerySuggestionsIndexName,
+        searchClient,
+        setState,
+        state,
+    ]);
+    return (jsx(AlgoliaInsightsProvider, { value: { index: productsIndexName }, children: jsx(GlobalSearchContext.Provider, { value: value, children: typeof children === 'function' ? children(autocomplete) : children }) }));
 }
 
 export { AlgoliaSearchProvider, GlobalSearchContext };

package/dist/background-overlay/background-overlay.js

@@ -1,26 +1,23 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import clsx from 'clsx';
 import styles from './background-overlay.module.css.js';
 
 function BackgroundOverlay({ className, isOpen, onClose, }) {
-    const [, setRender] = useState(isOpen);
     const nodeRef = useRef(null);
-    useEffect(() => {
-        if (isOpen)
-            setRender(isOpen);
-    }, [isOpen]);
     useEffect(() => {
         const node = nodeRef.current;
         if (!node || isOpen)
             return;
         const handleAnimationEnd = () => {
-            setRender(false);
             node.removeEventListener('animationend', handleAnimationEnd);
         };
         node.addEventListener('animationend', handleAnimationEnd);
+        return () => {
+            node.removeEventListener('animationend', handleAnimationEnd);
+        };
     }, [isOpen]);
     if (typeof document === 'undefined')
         return null;

package/dist/badges/badge/badge.js

@@ -1,21 +1,17 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import styles from './badge.module.css.js';
 
 const ANIMATION_DURATION = 600;
 function Badge({ count, variant = 'red' }) {
-    const [isAnimating, setIsAnimating] = useState(false);
+    const lastCount = useRef(null);
     useEffect(() => {
-        if (count === undefined)
-            return;
-        setIsAnimating(true);
-        const timer = setTimeout(() => setIsAnimating(false), ANIMATION_DURATION);
-        return () => clearTimeout(timer);
+        lastCount.current = count;
     }, [count]);
     return (jsx("span", { className: clsx(styles.badge, styles[variant], {
-            [styles['is-animating']]: isAnimating,
+            [styles['is-animating']]: count !== undefined && count !== lastCount.current,
         }), style: { '--animation-duration': `${ANIMATION_DURATION}ms` }, children: count !== undefined && jsx("span", { className: styles.count, children: count }) }, count));
 }
 

package/dist/base.css

@@ -1,3 +1,5 @@
+@import url('./spire-styles.css');
+
 /*********************************************************
   *
   *  Base styling for the entire application

package/dist/breadcrumbs/breadcrumb.js

@@ -4,7 +4,7 @@ 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 { useIsBreakpoint } from '../shared/hooks/use-is-breakpoint.js';
 import { RouteLink } from '../shared/routing/route-link.js';
 import styles from './breadcrumb.module.css.js';
 
@@ -24,13 +24,13 @@ function BreadcrumbLong({ links }) {
     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, title: homeLink.label, 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)))] }));
+    return (jsxs(Breadcrumbs, { className: styles.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles.breadcrumb, children: jsx(RouteLink, { className: styles.link, href: homeLink.href, title: homeLink.label, 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 }, link.href + link.label || index)))] }));
 }
 function Breadcrumb({ links }) {
-    const { lg } = useBreakpoint();
+    const isLg = useIsBreakpoint('lg');
     if (links.length <= 1)
         return null;
-    return lg ? BreadcrumbLong({ links }) : BreadcrumbShort({ links });
+    return isLg ? BreadcrumbLong({ links }) : BreadcrumbShort({ links });
 }
 
 export { Breadcrumb };

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

@@ -1,43 +1,41 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useCallback, useRef, useEffect } 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 { ensureNumber } from '../../shared/utils/number.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, }) {
+    return (jsx(InternalAddToCartButton, { initialState: initialState, isDisabled: isDisabled, onChange: onChange, quantity: quantity }, quantity));
+}
+function InternalAddToCartButton({ initialState = 'initial', isDisabled = false, onChange: _onChange, quantity: _quantity, }) {
+    const [quantity, setQuantity] = useState(_quantity);
     const [currentState, setState] = useState(quantity > 0 ? 'spinner' : 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]);
-    return (jsxs("div", { "data-test-selector": "addToCartButton", children: [currentState === 'initial' && (jsx(InitialState, { isDisabled: isDisabled, onAddToCart: () => {
-                    onChange(1);
-                } })), currentState === 'spinner' && (jsx(SpinnerState, { isDisabled: isDisabled, onChange: value => {
-                    onChange(value);
-                }, onManualInput: value => {
+    function computeCurrentState() {
+        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;
+    }
+    if (currentState !== computeCurrentState())
+        setState(computeCurrentState());
+    const onChange = useCallback((quantity) => {
+        _onChange(quantity);
+        setQuantity(quantity);
+    }, [_onChange]);
+    return (jsxs("div", { "data-test-selector": "addToCartButton", children: [currentState === 'initial' && (jsx(InitialState, { isDisabled: isDisabled, onAddToCart: () => onChange(1) })), currentState === 'spinner' && (jsx(SpinnerState, { isDisabled: isDisabled, onChange: onChange, onManualInput: value => {
                     setManualInputQuantity(value);
                     setState('manual-input');
-                }, quantity: quantity })), currentState === 'manual-input' && (jsx(ManualInputState, { isDisabled: isDisabled, onCancel: () => setState('spinner'), onConfirm: value => {
-                    onChange(value);
-                }, quantity: manualInputQuantity || '' }))] }));
+                }, quantity: quantity }, quantity)), currentState === 'manual-input' && (jsx(ManualInputState, { isDisabled: isDisabled, onCancel: () => setState('spinner'), onConfirm: onChange, quantity: manualInputQuantity || '' }))] }));
 }
 function InitialState({ isDisabled, onAddToCart, }) {
     return (jsx(Button, { condensed: true, icon: jsx(SolidCartIcon, {}), isDisabled: isDisabled, onClick: e => {
@@ -46,14 +44,6 @@ function InitialState({ isDisabled, onAddToCart, }) {
             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);
@@ -62,16 +52,13 @@ function SpinnerState({ isDisabled, onChange, onManualInput, quantity, }) {
         if (!mounted.current)
             return;
         onChange(value);
-    }, 500);
+    }, 1500);
     useEffect(() => {
         mounted.current = true;
         return () => {
             mounted.current = false;
         };
     }, []);
-    useEffect(() => {
-        setInternalQuantity(quantity);
-    }, [quantity]);
     return (jsx(NumberField, { withButtons: true, autoGrow: true, "data-test-selector": "quantity", formatOptions: {
             maximumFractionDigits: 0,
             style: 'decimal',

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { useState } 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';
@@ -11,9 +12,10 @@ import { useToast } from '../../toast/use-toast.js';
 import { AddToCartButton } from './add-to-cart-button.js';
 
 const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
+    const [isUpdatingCartLine, setIsUpdatingCartLine] = useState(false);
     const { createEcommerceEvent, dataLayer } = useDataLayer();
     const { isPending: isPendingAddToCart, mutate: addToCart } = useAddProductToCurrentCart();
-    const { data: cartLines, isFetching: isLoadingCartLines } = useFetchCurrentCartLines();
+    const { data: cartLines } = useFetchCurrentCartLines();
     const { isPending: isPendingDeleteCartLine, mutate: deleteCartLine } = useDeleteCartLineById();
     const { mutate: updateCartLine } = usePatchCartLineById();
     const { addToast } = useToast();
@@ -57,6 +59,18 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
                     },
                     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,
@@ -67,6 +81,7 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
             }
         }
         else {
+            setIsUpdatingCartLine(true);
             addToCart({ productId, qtyOrdered: quantity, unitOfMeasure: '' }, {
                 onError: error => {
                     onCartLineError?.(error, cartLine);
@@ -75,6 +90,7 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
                         isUserDismissable: false,
                         messageType: 'danger',
                     });
+                    setIsUpdatingCartLine(false);
                 },
                 onSuccess: cartLine => {
                     onAddToCart?.({ cartLine });
@@ -90,11 +106,12 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
                         isUserDismissable: false,
                         messageType: 'success',
                     });
+                    setIsUpdatingCartLine(false);
                 },
             });
         }
     };
-    return (jsx(AddToCartButton, { isDisabled: isPendingDeleteCartLine || isLoadingCartLines || isPendingAddToCart, onChange: handleChange, quantity: quantity }));
+    return (jsx(AddToCartButton, { isDisabled: isPendingDeleteCartLine || isPendingAddToCart || isUpdatingCartLine, onChange: handleChange, quantity: quantity }));
 };
 
 export { ConnectedAddToCartButton };

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+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';
@@ -16,8 +16,10 @@ function ConnectedFavoriteButton({ onFavorited: _onFavorited, onFavoriting: _onF
     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 { mutate: deleteWishListItemFromWishList } = useDeleteWishListItemFromWishList();
     const [isFavorite, setIsFavorite] = useState(_isFavorite);
+    if (_isFavorite !== isFavorite)
+        setIsFavorite(_isFavorite);
     function onFavorite() {
         if (!(wishList && wishListItem))
             _onFavoriting?.();
@@ -39,23 +41,15 @@ function ConnectedFavoriteButton({ onFavorited: _onFavorited, onFavoriting: _onF
             });
         }
     }
-    useEffect(() => {
-        setIsFavorite(_isFavorite);
-    }, [_isFavorite]);
-    useEffect(() => {
+    if (isFavorite !== Boolean(wishList && wishListItem)) {
         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 ((!showSignInDialog &&
+        addWishListItemToCurrentWishListError instanceof ForbiddenRequestError) ||
+        addWishListItemToCurrentWishListError instanceof UnauthorizedRequestError) {
+        setShowSignInDialog(true);
+        refetch();
+    }
     if (isFetching)
         return null;
     return (jsxs(Fragment, { children: [jsx(FavoriteButton, { isDisabled: isFetching, isFavorite: isFavorite, onClick: onFavorite }), jsx(SignInDialog, { isOpen: showSignInDialog, onOpenChange: setShowSignInDialog })] }));

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/icon-button/icon-button.d.ts

@@ -2,10 +2,12 @@ export interface IconButtonProps {
     children: React.ReactNode;
     className?: string;
     color?: 'primary' | 'secondary' | 'current-color';
+    href?: string;
     isDisabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     size?: 'md' | 'lg';
+    target?: string;
     title?: string;
     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 function IconButton({ children, className, color, href, isDisabled, onClick: _onClick, size, target, title, type, }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,13 +3,16 @@ 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 }) {
+function IconButton({ children, className, color = 'primary', href, isDisabled, onClick: _onClick, size = 'md', target, title, type = 'button', }) {
     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 }));
+    if (href) {
+        return (jsx("a", { className: clsx(styles['icon-button'], styles[size], styles[color], className), "data-disabled": isDisabled ? true : undefined, href: href, onClick: onClick, target: target, title: title, children: children }));
+    }
+    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, children: children }));
 }
 
 export { IconButton };

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

@@ -1,9 +1,16 @@
-import { AnchorHTMLAttributes } from 'react';
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    areaSelected?: boolean;
+import { KeyboardEvent, MouseEventHandler, ReactNode } from 'react';
+export interface LinkProps {
+    children: ReactNode;
+    className?: string;
     color?: 'primary' | 'secondary';
     hasUnderline?: boolean;
+    href?: string;
+    id?: string;
     isDisabled?: boolean;
-    role?: 'option';
+    onClick?: MouseEventHandler<HTMLElement>;
+    onKeyUp?: (event: KeyboardEvent) => void;
+    tabIndex?: number;
+    target?: string;
+    title?: string;
 }
-export declare function Link({ children, className, color, hasUnderline, isDisabled, onClick, onKeyUp, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Link({ children, className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, tabIndex, target, title, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/link/link.js

@@ -3,11 +3,17 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './link.module.css.js';
 
-function Link({ children, className, color, hasUnderline, isDisabled, onClick, onKeyUp, ...props }) {
-    return (jsx("a", { className: clsx({
-            [styles.hover]: Boolean(props.href || onClick),
+function Link({ children, className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, tabIndex, target, title, ...rest }) {
+    if (href) {
+        return (jsx("a", { className: clsx({
+                [styles.hover]: Boolean(href || onClick),
+                [styles['has-underline']]: hasUnderline,
+            }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, href: href, id: id, onClick: onClick, onKeyUp: onKeyUp, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...rest, children: children }));
+    }
+    return (jsx("button", { className: clsx({
+            [styles.hover]: Boolean(href || onClick),
             [styles['has-underline']]: hasUnderline,
-        }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, onClick: onClick, onKeyUp: onKeyUp, role: "link", tabIndex: isDisabled ? -1 : 0, ...props, children: children }));
+        }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, disabled: isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...rest, children: children }));
 }
 
 export { Link };

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

@@ -8,11 +8,12 @@ import { ProductOverviewGrid } from '../../lists/product-overview-grid/product-o
 import { Carousel } from '../carousel.js';
 import styles from './card-carousel.module.css.js';
 
-function CardCarousel({ allowExpandToGrid = false, cards, cardsPerView = {
+const defaultCardsPerView = {
     md: 2,
     sm: 1,
     xxl: 3,
-}, cardWidth = 'auto', hasOverflow = false, }) {
+};
+function CardCarousel({ allowExpandToGrid = false, cards, cardsPerView = defaultCardsPerView, 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" }) }))] }));

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

@@ -7,7 +7,7 @@ import { GlyphsArrowBoldCapsRightIcon } from '../icons/glyph/glyphs-arrow-boldca
 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, {})) }));
+    return (jsx("button", { ref: ref, className: clsx(styles['carousel-navigation-button'], className), onClick: () => onClick?.(direction), type: "button", children: direction === 'previous' ? (jsx(GlyphsArrowBoldCapsLeftIcon, {})) : (jsx(GlyphsArrowBoldCapsRightIcon, {})) }));
 });
 
 export { CarouselNavigationButton };

package/dist/carousel/carousel.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useMemo } from 'react';
 import clsx from 'clsx';
 import Navigation from '../node_modules/.pnpm/swiper@11.2.1/node_modules/swiper/modules/navigation.js';
 import freeMode from '../node_modules/.pnpm/swiper@11.2.1/node_modules/swiper/modules/free-mode.js';
@@ -21,11 +21,14 @@ function generateSlidesPerViewBreakpoints(slidesPerView) {
 function Carousel({ breakpoints: _breakpoints, className, hasNavigation = true, hasOverflow = true, navigationButtonsPosition = 'top', slideClasses, slides, slidesPerView: _slidesPerView = 'auto', spaceBetween, }) {
     const [isDragging, setIsDragging] = useState(false);
     const [isReady, setIsReady] = useState(false);
-    const [amountOfSlides, setAmountOfSlides] = useState(0);
+    // const [amountOfSlides, setAmountOfSlides] = useState(0)
     const nextEl = useRef(null);
     const prevEl = useRef(null);
     const swiperRef = useRef(null);
     const slidesPerView = typeof _slidesPerView === 'object' ? undefined : _slidesPerView;
+    const amountOfSlides = useMemo(() => typeof swiperRef.current?.params.slidesPerView === 'number'
+        ? swiperRef.current.params.slidesPerView
+        : swiperRef.current?.slidesPerViewDynamic() || 1, []);
     function handleNavigationButtonClick(direction) {
         if (!swiperRef.current)
             return;
@@ -36,11 +39,6 @@ function Carousel({ breakpoints: _breakpoints, className, hasNavigation = true,
             swiperRef.current.slideTo(swiperRef.current.activeIndex - amountOfSlides - 1);
         }
     }
-    useEffect(() => {
-        setAmountOfSlides(typeof swiperRef.current?.params.slidesPerView === 'number'
-            ? swiperRef.current.params.slidesPerView
-            : swiperRef.current?.slidesPerViewDynamic() || 1);
-    }, [swiperRef]);
     if (typeof _slidesPerView === 'object') {
         const slidesPerViewBreakpoints = generateSlidesPerViewBreakpoints(_slidesPerView);
         _breakpoints = deepMerge(_breakpoints, slidesPerViewBreakpoints);
@@ -63,7 +61,9 @@ function Carousel({ breakpoints: _breakpoints, className, hasNavigation = true,
                 }, onBeforeInit: swiper => (swiperRef.current = swiper), onSliderMove: () => setIsDragging(true), onSlidesUpdated: () => {
                     if (!isReady)
                         setIsReady(true);
-                }, onTouchEnd: () => setIsDragging(false), slidesPerGroupAuto: slidesPerView === 'auto', slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: slides.map((slide, index) => (jsx(SwiperSlide, { className: clsx(styles.slide, slideClasses), children: slide }, index))) }), hasNavigation && (jsxs("div", { className: clsx(styles['navigation-buttons'], styles[navigationButtonsPosition]), children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles['navigation-button'], styles['navigation-button-prev']), direction: "previous", onClick: direction => handleNavigationButtonClick(direction) }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles['navigation-button'], styles['navigation-button-next']), direction: "next", onClick: direction => handleNavigationButtonClick(direction) })] }))] }));
+                }, onTouchEnd: () => setIsDragging(false), slidesPerGroupAuto: slidesPerView === 'auto', slidesPerView: slidesPerView, spaceBetween: spaceBetween, children: slides.map((slide, index) => (
+                // eslint-disable-next-line @eslint-react/no-array-index-key
+                jsx(SwiperSlide, { className: clsx(styles.slide, slideClasses), children: slide }, index))) }), hasNavigation && (jsxs("div", { className: clsx(styles['navigation-buttons'], styles[navigationButtonsPosition]), children: [jsx(CarouselNavigationButton, { ref: prevEl, className: clsx(styles['navigation-button'], styles['navigation-button-prev']), direction: "previous", onClick: direction => handleNavigationButtonClick(direction) }), jsx(CarouselNavigationButton, { ref: nextEl, className: clsx(styles['navigation-button'], styles['navigation-button-next']), direction: "next", onClick: direction => handleNavigationButtonClick(direction) })] }))] }));
 }
 
 export { Carousel };

package/dist/carousel/pagination/pagination.d.ts

@@ -1,7 +1,7 @@
 interface PaginationButtonProps {
     index: number;
     onChange?: (index: number, target: Element, size: DOMRectReadOnly, position: DOMRectReadOnly | undefined) => void;
-    onClick?: () => void;
+    onClick?: VoidFunction;
 }
 export declare function PaginationButton({ index, onChange, onClick, }: PaginationButtonProps): import("react/jsx-runtime").JSX.Element;
 interface PaginationProps {

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

@@ -4,7 +4,9 @@ import { Heading } from '../../typography/heading/heading.js';
 import styles from './usp-carousel.module.css.js';
 
 function ProductUsp({ usp }) {
-    return (jsxs("div", { className: styles['product-usp'], children: [jsx("div", { className: styles.left, children: jsx(Image, { className: styles.image, fit: "cover", image: usp.image, title: usp.image.altText }) }), jsx("div", { className: styles.right, children: jsxs("div", { "data-content": true, className: styles.content, children: [jsx(Image, { className: styles.icon, image: usp.icon, title: usp.icon.altText }), jsx(Heading, { italic: true, uppercase: true, className: styles.title, size: "xs", children: usp.heading }), jsx("div", { className: styles.text, dangerouslySetInnerHTML: { __html: usp.text } })] }) })] }));
+    return (jsxs("div", { className: styles['product-usp'], children: [jsx("div", { className: styles.left, children: jsx(Image, { className: styles.image, fit: "cover", image: usp.image, title: usp.image.altText }) }), jsx("div", { className: styles.right, children: jsxs("div", { "data-content": true, className: styles.content, children: [jsx(Image, { className: styles.icon, image: usp.icon, title: usp.icon.altText }), jsx(Heading, { italic: true, uppercase: true, className: styles.title, size: "xs", children: usp.heading }), jsx("div", { className: styles.text, 
+                            // eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml
+                            dangerouslySetInnerHTML: { __html: usp.text } })] }) })] }));
 }
 
 export { ProductUsp };

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

@@ -3,7 +3,7 @@ import { ProductUsp } from './product-usp-carousel-slide.js';
 import { USPCarousel } from './usp-carousel.js';
 
 function ProductUSPCarousel({ usps }) {
-    return (jsx(USPCarousel, { slides: usps.map((usp, index) => (jsx(ProductUsp, { usp: usp }, index))) }));
+    return (jsx(USPCarousel, { slides: usps.map((usp, index) => (jsx(ProductUsp, { usp: usp }, usp.heading + usp.text || index))) }));
 }
 
 export { ProductUSPCarousel };

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

@@ -41,7 +41,9 @@ const USPCarousel = ({ slides }) => {
         }, onSetTranslate: setTranslate, onSwiper: swiper => {
             swiper.update();
             swiperRef.current = swiper;
-        }, speed: DURATION_IN_MS, virtualTranslate: true, watchSlidesProgress: true, children: [slides.map((slide, index) => (jsx(SwiperSlide, { children: slide }, index))), jsx("div", { className: styles.pagination, id: "pagination" }), jsx("div", { className: styles.pagination, children: jsx(CarouselPagination, { currentPage: currentIndex + 1, numberOfPages: slides.length, onChange: pageNumber => swiperRef.current?.slideTo(pageNumber - 1) }) })] }));
+        }, speed: DURATION_IN_MS, virtualTranslate: true, watchSlidesProgress: true, children: [slides.map((slide, index) => (
+            // eslint-disable-next-line @eslint-react/no-array-index-key
+            jsx(SwiperSlide, { children: slide }, index))), jsx("div", { className: styles.pagination, id: "pagination" }), jsx("div", { className: styles.pagination, children: jsx(CarouselPagination, { currentPage: currentIndex + 1, numberOfPages: slides.length, onChange: pageNumber => swiperRef.current?.slideTo(pageNumber - 1) }) })] }));
 };
 
 export { USPCarousel };