@sonic-equipment/ui 259.0.3 → 260.0.0

package/dist/algolia/algolia-active-categories.js

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useHierarchicalMenu } from 'react-instantsearch';
 import clsx from 'clsx';
 import { Link } from '../buttons/link/link.js';
-import { StrokeCategoriesIcon } from '../icons/stroke/stroke-categories-icon.js';
+import { Icon } from '../icon/icon.js';
 import { useFormattedMessage } from '../intl/use-formatted-message.js';
 import { FilterSection } from './filter-section.js';
 import styles from './algolia-filter-panel.module.css.js';
@@ -32,7 +32,7 @@ function Categories({ categories, path: _path, }) {
         const isActive = !category.data || !category.data.some(c => c.isRefined);
         return (jsxs(Fragment, { children: [jsx("div", { className: filterSectionStyles['filter-section-item'], children: jsxs(Link, { hasUnderline: true, className: clsx(styles.category, {
                             [styles['is-active']]: isActive,
-                        }), href: path, isDisabled: isActive, children: [jsx(StrokeCategoriesIcon, { height: 24, width: 24 }), jsx("span", { children: category.label })] }) }), category.data && (jsx(Categories, { categories: category.data, path: path }))] }, category.value));
+                        }), href: path, isDisabled: isActive, children: [jsx(Icon, { name: "Categories" }), jsx("span", { children: category.label })] }) }), category.data && (jsx(Categories, { categories: category.data, path: path }))] }, category.value));
     });
 }
 

package/dist/algolia/algolia-categories-filters.js

@@ -4,7 +4,7 @@ import { Fragment } from 'react';
 import { useHierarchicalMenu } from 'react-instantsearch';
 import clsx from 'clsx';
 import { Link } from '../buttons/link/link.js';
-import { StrokeCategoriesIcon } from '../icons/stroke/stroke-categories-icon.js';
+import { Icon } from '../icon/icon.js';
 import { useFormattedMessage } from '../intl/use-formatted-message.js';
 import { transformAlgoliaCategoryData } from '../shared/model/category.js';
 import { FilterSection } from './filter-section.js';
@@ -21,7 +21,7 @@ function AlgoliaCategoriesFilters() {
     const categories = transformAlgoliaCategoryData(items);
     return (jsx(FilterSection, { title: t('facet.categories'), variant: "default", children: categories.map((category, index) => (jsx(Fragment, { children: jsx("div", { className: filterSectionStyles['filter-section-item'], children: jsxs(Link, { hasUnderline: true, className: clsx(styles.category, {
                         [styles['is-active']]: category.isRefined,
-                    }), color: "primary", onClick: () => refine(category.value), children: [jsx(StrokeCategoriesIcon, { height: 24, width: 24 }), jsx("span", { children: category.name }), jsxs("span", { className: styles.count, children: ["(", category.count, ")"] })] }) }) }, category.href || index))) }));
+                    }), color: "primary", onClick: () => refine(category.value), children: [jsx(Icon, { name: "Categories" }), jsx("span", { children: category.name }), jsxs("span", { className: styles.count, children: ["(", category.count, ")"] })] }) }) }, category.href || index))) }));
 }
 
 export { AlgoliaCategoriesFilters };

package/dist/badges/badge/badge.d.ts

@@ -1,6 +1,8 @@
+export type BadgeStatus = 'off' | 'on' | 'indeterminate' | 'disabled';
 export interface BadgeProps {
-    'aria-label'?: string;
+    className?: string;
     count?: number;
-    variant?: 'red' | 'orange' | 'green';
+    label?: string;
+    status?: BadgeStatus;
 }
-export declare function Badge({ 'aria-label': ariaLabel, count, variant, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Badge({ className, count, label, status }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/badges/badge/badge.js

@@ -4,15 +4,15 @@ import { useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import styles from './badge.module.css.js';
 
-const ANIMATION_DURATION = 600;
-function Badge({ 'aria-label': ariaLabel, count, variant = 'red', }) {
+// TODO: why is it animating on mount? and when I set lastCount to count by default it never animates
+function Badge({ className, count, label, status }) {
     const lastCount = useRef(null);
     useEffect(() => {
         lastCount.current = count;
     }, [count]);
-    return (jsx("span", { "aria-label": ariaLabel, className: clsx(styles.badge, styles[variant], {
+    return (jsx("span", { "aria-label": label, className: clsx(styles.badge, status && styles[status], {
             [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));
+        }, className), children: count }, count));
 }
 
 export { Badge };

package/dist/badges/badge/badge.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"badge":"badge-module-X5Au9","count":"badge-module-ododp","is-animating":"badge-module-Q03Go","pulse":"badge-module-YSs-l","red":"badge-module-kqfth","orange":"badge-module-Y5LU3","green":"badge-module-S-L8C"};
+var styles = {"badge":"badge-module-X5Au9","disabled":"badge-module-LoUsz","off":"badge-module-qE3YB","indeterminate":"badge-module-YnGju","on":"badge-module-N4lDJ","is-animating":"badge-module-Q03Go","badge-pulse":"badge-module-uFNdF"};
 
 export { styles as default };

package/dist/badges/badge/icon-with-badge/icon-with-badge.d.ts

@@ -1,8 +1,13 @@
-import { ReactNode } from 'react';
+import { IconSize } from '../../../icon/icon';
+import { IconName } from '../../../icons';
+import { BadgeStatus } from '../badge';
 export interface IconWithBadgeProps {
-    'aria-label'?: string;
-    badge: ReactNode;
-    'data-test-selector'?: string;
-    icon: ReactNode;
+    badgeCount?: number;
+    badgeLabel?: string;
+    badgeStatus?: BadgeStatus;
+    className?: string;
+    icon: IconName;
+    label?: string;
+    size?: IconSize;
 }
-export declare function IconWithBadge({ 'aria-label': ariaLabel, badge, 'data-test-selector': dataTestSelector, icon, }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconWithBadge({ badgeCount, badgeLabel, badgeStatus, className, icon, label, size, }: IconWithBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/badges/badge/icon-with-badge/icon-with-badge.js

@@ -1,9 +1,12 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Icon } from '../../../icon/icon.js';
+import { Badge } from '../badge.js';
 import styles from './icon-with-badge.module.css.js';
 
-function IconWithBadge({ 'aria-label': ariaLabel, badge, 'data-test-selector': dataTestSelector, icon, }) {
-    return (jsxs("div", { "aria-label": ariaLabel, className: styles['icon-with-badge'], children: [icon, jsx("div", { className: styles['badge-wrapper'], "data-test-selector": dataTestSelector, children: badge })] }));
+function IconWithBadge({ badgeCount, badgeLabel, badgeStatus, className, icon, label, size, }) {
+    return (jsxs("div", { "aria-label": label, className: clsx(styles['icon-with-badge'], className), children: [jsx(Icon, { className: styles['icon'], name: icon, size: size }), (badgeCount || badgeStatus) && (jsx(Badge, { className: styles['badge'], count: badgeCount, label: badgeLabel, status: badgeStatus }))] }));
 }
 
 export { IconWithBadge };

package/dist/badges/badge/icon-with-badge/icon-with-badge.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"icon-with-badge":"icon-with-badge-module-eCTIN","badge-wrapper":"icon-with-badge-module-NUjwN"};
+var styles = {"icon-with-badge":"icon-with-badge-module-eCTIN","icon":"icon-with-badge-module-z8YPt","badge":"icon-with-badge-module-X4Tjx"};
 
 export { styles as default };

package/dist/base.css

@@ -4,14 +4,14 @@
     shared/reset.module.css contains reset styles that overwrite this Spire CSS */
 
 html {
-  height: 100%;
   box-sizing: border-box;
+  block-size: 100%;
 }
 
 body {
-  height: 100%;
   margin: 0;
   background: #fff;
+  block-size: 100%;
   color: #000;
   font-size: 16px;
   font-weight: 400;

package/dist/breadcrumbs/breadcrumb.js

@@ -3,8 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Breadcrumbs, Breadcrumb as Breadcrumb$1 } from 'react-aria-components';
 import clsx from 'clsx';
 import { Link } from '../buttons/link/link.js';
-import { GlyphsChevronsSlimLeftIcon } from '../icons/glyph/glyphs-chevrons-slim-left-icon.js';
-import { SolidHomeIcon } from '../icons/solid/solid-home-icon.js';
+import { Icon } from '../icon/icon.js';
 import styles from './breadcrumb.module.css.js';
 
 function Breadcrumb({ links }) {
@@ -18,10 +17,10 @@ function Breadcrumb({ links }) {
     const label = previousLink?.label || homeLink?.label;
     if (!homeLink)
         return null;
-    return (jsxs(Breadcrumbs, { className: styles.breadcrumbs, children: [jsx(Breadcrumb$1, { className: clsx(styles.breadcrumb, styles.short), children: jsxs(Link, { className: styles.link, href: href, isDisabled: false, title: label, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: styles.icon }), isHomeLink ? (jsx(SolidHomeIcon, { className: styles.icon })) : (jsx("span", { children: previousLink.label }))] }) }), jsx(Breadcrumb$1, { className: clsx(styles.breadcrumb, styles.long), children: jsx(Link, { 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)))] }));
+    return (jsxs(Breadcrumbs, { className: styles.breadcrumbs, children: [jsx(Breadcrumb$1, { className: clsx(styles.breadcrumb, styles.short), children: jsxs(Link, { className: styles.link, href: href, isDisabled: false, title: label, children: [jsx(Icon, { className: styles.icon, name: "ArrowLeft", size: "xxs" }), isHomeLink ? (jsx(Icon, { className: styles.icon, name: "HomeSolid", size: "xxs" })) : (jsx("span", { children: previousLink.label }))] }) }), jsx(Breadcrumb$1, { className: clsx(styles.breadcrumb, styles.long), children: jsx(Link, { className: styles.link, href: homeLink.href, title: homeLink.label, children: jsx(Icon, { className: clsx(styles['home-icon'], styles.icon), name: "HomeSolid", size: "xxs" }) }) }), linksWithoutFirst.map((link, index) => (jsx(BreadcrumbLongItem, { index: index, isDisabled: linksWithoutFirst.length - 1 === index, link: link }, link.href + link.label || index)))] }));
 }
 function BreadcrumbLongItem({ index, isDisabled, link, }) {
-    return (jsx(Breadcrumb$1, { className: clsx(styles.breadcrumb, styles.long), children: jsxs(Link, { className: styles.link, color: "secondary", href: link.href, isDisabled: isDisabled, title: link.label, children: [jsx(GlyphsChevronsSlimLeftIcon, { className: clsx(styles.icon, styles['previous-icon']) }), link.label] }) }, index));
+    return (jsx(Breadcrumb$1, { className: clsx(styles.breadcrumb, styles.long), children: jsxs(Link, { className: styles.link, color: "secondary", href: link.href, isDisabled: isDisabled, title: link.label, children: [jsx(Icon, { className: clsx(styles.icon, styles['previous-icon']), name: "ArrowLeft" }), link.label] }) }, index));
 }
 
 export { Breadcrumb };

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

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import clsx from 'clsx';
 import { NumberField } from '../../forms/fields/number-field/number-field.js';
-import { SolidCartIcon } from '../../icons/solid/solid-cart-icon.js';
+import { Icon } from '../../icon/icon.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { useDebouncedCallback } from '../../shared/hooks/use-debounced-callback.js';
 import { ensureNumber } from '../../shared/utils/number.js';
@@ -53,7 +53,7 @@ function InitialState({ buttonRef, hasFocus, isDisabled, onAddToCart, onHasFocus
             onHasFocussed?.();
         }
     }, [hasFocus, buttonRef, onHasFocussed]);
-    return (jsx(Button, { ref: buttonRef, condensed: true, "aria-label": t('Add to cart'), className: clsx(styles['initial'], isDisabled && styles['disabled']), icon: jsx(SolidCartIcon, {}), onClick: () => {
+    return (jsx(Button, { ref: buttonRef, condensed: true, "aria-label": t('Add to cart'), className: clsx(styles['initial'], isDisabled && styles['disabled']), icon: jsx(Icon, { name: "CartSolid" }), onClick: () => {
             if (!isDisabled)
                 onAddToCart();
         }, size: "md" }));

package/dist/buttons/button/button.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef, isValidElement } from 'react';
 import clsx from 'clsx';
-import { GlyphsArrowBoldCapsRightIcon } from '../../icons/glyph/glyphs-arrow-boldcaps-right-icon.js';
+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';
@@ -24,7 +24,7 @@ const Button = forwardRef(({ _pseudo = 'none', 'aria-label': ariaLabel, children
     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(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && iconElement, isLoading && (jsx(ProgressCircle, { className: buttonStyles.spinner, size: "sm", variant: color === 'primary' ? 'white' : 'gray' }))] }));
+    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 }));

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/favorite-button.js

@@ -1,15 +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 { 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,
-        }), color: "secondary", isDisabled: isDisabled, onClick: onClick, children: isFavorite ? jsx(SolidFavoriteIcon, {}) : jsx(StrokeFavoriteIcon, {}) }));
+        }), icon: isFavorite ? 'FavoriteSolid' : 'Favorite', isDisabled: isDisabled, label: isFavorite ? t('Remove from favorites') : t('Add to favorites'), onClick: onClick }));
 }
 
 export { FavoriteButton };

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

@@ -1,17 +1,25 @@
-import { MouseEvent, ReactNode } from 'react';
+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: 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;
+    label: string;
     onClick?: (event: MouseEvent<HTMLElement>) => void;
+    round?: boolean;
     route?: NavigateOptions;
-    size?: 'md' | 'lg';
+    size?: IconSize;
     target?: string;
-    title?: string;
+    theme?: 'default' | 'secondary' | 'light';
     type?: 'button' | 'submit' | 'reset';
 }
 export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,22 +1,23 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+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(({ children, className: _className, color = 'primary', 'data-test-selector': dataTestSelector, href, isDisabled, onClick, route, size = 'md', target, title, type = 'button', ...rest }, ref) => {
+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'], styles[size], styles[color], _className);
+    const className = clsx(styles['icon-button'], round && styles['round'], theme && styles[`theme-${theme}`], _className);
     if (href) {
-        return (jsx(RouteLinkElement, { className: className, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, onClick: onClick, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));
+        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 (jsx("button", { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, onClick: handleButtonClick, title: title, type: type, ...rest, 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';
 

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

@@ -1,3 +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"};
+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

@@ -6,8 +6,10 @@ export interface LinkProps {
     color?: 'primary' | 'secondary';
     hasUnderline?: boolean;
     href?: string;
+    hrefLang?: string;
     id?: string;
     isDisabled?: boolean;
+    lang?: string;
     onClick?: MouseEventHandler<HTMLElement>;
     onKeyUp?: (event: KeyboardEvent) => void;
     rel?: string;

package/dist/buttons/link/link.js

@@ -5,16 +5,13 @@ 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, id, isDisabled, onClick, onKeyUp, rel, role, route, tabIndex, target, title, ...rest }, ref) => {
+const Link = forwardRef(({ children, className: _className, color, hasUnderline, href, hrefLang, id, isDisabled, lang, onClick, onKeyUp, rel, role, route, tabIndex, target, title, ...rest }, ref) => {
     const { getRouteLinkProps, RouteLinkElement } = useRouteLink();
-    const className = clsx({
-        [styles.hover]: Boolean(href || onClick),
-        [styles['has-underline']]: hasUnderline,
-    }, styles['link'], color && styles[color], _className);
+    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, id: id, onClick: onClick, onKeyUp: onKeyUp, rel: rel, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));
+        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, onClick: onClick, onKeyUp: onKeyUp, rel: rel, role: role, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...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';
 

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

@@ -1,7 +1,6 @@
 "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';
@@ -13,7 +12,7 @@ function ConnectedRemoveButton({ id: productId, onRemove: _onRemove, }) {
         close();
         _onRemove(productId);
     }
-    return (jsxs(Fragment, { children: [jsx(IconButton, { color: "secondary", onClick: open, children: jsx(StrokeTrashIcon, {}) }), jsx(ConfirmationDialog, { "data-test-selector": "removeItemFromCartConfirmationDialog", isOpen: isOpen, onCancel: close, onConfirm: onRemove, title: t('Are you sure you want to remove this item from your cart?') })] }));
+    return (jsxs(Fragment, { children: [jsx(IconButton, { icon: "Trash", label: t('Remove'), onClick: open, theme: "secondary" }), jsx(ConfirmationDialog, { "data-test-selector": "removeItemFromCartConfirmationDialog", isOpen: isOpen, onCancel: close, onConfirm: onRemove, title: t('Are you sure you want to remove this item from your cart?') })] }));
 }
 
 export { ConnectedRemoveButton };

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

@@ -2,12 +2,11 @@
 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 { Icon } from '../icon/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), type: "button", 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(Icon, { className: styles['icon'], name: "ArrowLeftThick", size: "xxs" })) : (jsx(Icon, { className: styles['icon'], name: "ArrowRightThick", size: "xxs" })) }));
 });
 
 export { CarouselNavigationButton };

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

@@ -2,8 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import clsx from 'clsx';
-import { GlyphsChevronsBoldDownIcon } from '../../icons/glyph/glyphs-chevrons-bold-down-icon.js';
-import { GlyphsChevronsSlimDownIcon } from '../../icons/glyph/glyphs-chevrons-slim-down-icon.js';
+import { Icon } from '../../icon/icon.js';
 import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
 import { useInert } from '../../shared/hooks/use-inert.js';
 import { ensureArray } from '../../shared/utils/array.js';
@@ -31,7 +30,7 @@ function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = t
                     }), disabled: isDisabled, id: id, onClick: () => {
                         if (allowToggle && allowCollapse)
                             toggle();
-                    }, tabIndex: allowToggle ? 0 : -1, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { ref: panelRef, "aria-hidden": !isOpen.toString(), "aria-labelledby": id, className: styles.panel, id: panelId, role: "region", children: children })] }));
+                    }, tabIndex: allowToggle ? 0 : -1, type: "button", children: [title, size === 'lg' ? (jsx(Icon, { className: styles.icon, name: "ArrowDownBold", size: "xs" })) : (jsx(Icon, { className: styles.icon, name: "ArrowDown", size: "xs" }))] }) }), jsx("div", { ref: panelRef, "aria-hidden": !isOpen.toString(), "aria-labelledby": id, className: styles.panel, id: panelId, role: "region", children: children })] }));
 }
 
 export { AccordionItem };

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

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState } from 'react';
 import clsx from 'clsx';
 import { Link } from '../../buttons/link/link.js';
-import { GlyphsChevronsSlimDownIcon } from '../../icons/glyph/glyphs-chevrons-slim-down-icon.js';
+import { Icon } from '../../icon/icon.js';
 import { FormattedMessage } from '../../intl/formatted-message.js';
 import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
 import { useInert } from '../../shared/hooks/use-inert.js';
@@ -29,7 +29,7 @@ function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialI
                     if (isControlled)
                         return onToggle(!isControlled);
                     toggle();
-                }, children: [jsx(GlyphsChevronsSlimDownIcon, { className: styles.icon }), isReallyOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] }))] }));
+                }, children: [jsx(Icon, { className: styles.icon, name: "ArrowDown", size: "xxs" }), isReallyOpen ? (jsx(FormattedMessage, { id: "Show less" })) : (jsx(FormattedMessage, { id: "Show all" }))] }))] }));
 }
 
 export { ShowAll };

package/dist/collapsables/unmounter/utils.js

@@ -3,7 +3,10 @@ function createAddEndListener(nodeRef) {
         if (done === undefined) {
             if (typeof doneOrNode === 'function') {
                 if (nodeRef && 'current' in nodeRef && nodeRef.current) {
-                    return nodeRef.current.addEventListener('transitionend', doneOrNode, false);
+                    return nodeRef.current.addEventListener('transitionend', event => {
+                        if (event.target === nodeRef.current)
+                            doneOrNode();
+                    }, false);
                 }
                 throw new Error('Unsupported CSSTransition addEndListener function call');
             }

package/dist/country-language-selection-list/connected-country-language-selection-list.d.ts

@@ -0,0 +1 @@
+export declare function ConnectedCountryLanguageSelectionList(): import("react/jsx-runtime").JSX.Element;