@sonic-equipment/ui 157.0.0 → 159.0.0

package/dist/algolia/algolia-sort-by.js

@@ -23,7 +23,7 @@ function AlgoliaSortBy() {
         acc[option.value] = option.label;
         return acc;
     }, {});
-    return (jsx(Select, { label: t('Sort by'), onChange: value => refine(String(value)), options: options, selectedOption: currentRefinement, showLabel: false, size: "sm" }));
+    return (jsx(Select, { label: t('Sort by'), onChange: value => refine(String(value)), options: options, selectedOption: currentRefinement, size: "sm" }));
 }
 
 export { AlgoliaSortBy };

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

@@ -3,6 +3,7 @@ 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 { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { useDebouncedCallback } from '../../shared/hooks/use-debounced-callback.js';
 import { ensureNumber } from '../../shared/utils/number.js';
 import { Button } from '../button/button.js';
@@ -38,11 +39,7 @@ function InternalAddToCartButton({ initialState = 'initial', isDisabled = false,
                 }, 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 => {
-            e.preventDefault();
-            e.stopPropagation();
-            onAddToCart();
-        }, size: "md" }));
+    return (jsx(Button, { condensed: true, icon: jsx(SolidCartIcon, {}), isDisabled: isDisabled, onClick: onAddToCart, size: "md" }));
 }
 function SpinnerState({ isDisabled, onChange, onManualInput, quantity, }) {
     const [internalQuantity, setInternalQuantity] = useState(quantity);
@@ -59,11 +56,12 @@ function SpinnerState({ isDisabled, onChange, onManualInput, quantity, }) {
             mounted.current = false;
         };
     }, []);
+    const t = useFormattedMessage();
     return (jsx(NumberField, { withButtons: true, autoGrow: true, "data-test-selector": "quantity", formatOptions: {
             maximumFractionDigits: 0,
             style: 'decimal',
             useGrouping: false,
-        }, isDisabled: isDisabled, label: "Quantity", maxLength: 4, maxValue: 9999, minValue: 0, onChange: quantity => {
+        }, isDisabled: isDisabled, label: t('Quantity'), maxLength: 4, maxValue: 9999, minValue: 0, onChange: quantity => {
             setInternalQuantity(quantity);
             if (quantity === 0) {
                 mounted.current = false;
@@ -72,7 +70,7 @@ function SpinnerState({ isDisabled, onChange, onManualInput, quantity, }) {
             onDebouncedChange(quantity);
         }, onInput: e => {
             onManualInput(e.target.value);
-        }, showLabel: false, size: "md", value: internalQuantity }));
+        }, size: "md", value: internalQuantity }));
 }
 function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
     const [updatedQuantity, setQuantity] = useState(quantity);
@@ -82,13 +80,12 @@ function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
         if (e.key === 'Escape')
             onCancel();
     };
-    return (jsxs("div", { className: styles['manual-input-container'], children: [jsx("div", { className: styles['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, "data-test-selector": "quantity", defaultValue: quantity ? ensureNumber(quantity, 0) : undefined, formatOptions: {
+    const t = useFormattedMessage();
+    return (jsxs("div", { className: styles['manual-input-container'], children: [jsx(NumberField, { autoFocus: true, autoGrow: true, "data-test-selector": "quantity", defaultValue: quantity ? ensureNumber(quantity, 0) : undefined, formatOptions: {
                     maximumFractionDigits: 0,
                     style: 'decimal',
                     useGrouping: false,
-                }, isDisabled: isDisabled, label: "Quantity", maxLength: 4, maxValue: 9999, minValue: 0, name: "quantity", onChange: value => setQuantity(String(value)), onKeyUp: onKeyUp, showLabel: false, size: "md" }), jsx(Button, { condensed: true, "data-test-selector": "confirm", isDisabled: isDisabled, onClick: e => {
-                    e.preventDefault();
-                    e.stopPropagation();
+                }, isDisabled: isDisabled, label: t('Quantity'), maxLength: 4, maxValue: 9999, minValue: 0, name: "quantity", onChange: value => setQuantity(String(value)), onKeyUp: onKeyUp, size: "md" }), jsx(Button, { condensed: true, "data-test-selector": "confirm", isDisabled: isDisabled, onClick: () => {
                     onConfirm(ensureNumber(updatedQuantity, 0));
                 }, size: "md", children: "OK" })] }));
 }

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

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

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

@@ -7,12 +7,11 @@ import { ProductSku } from '../../display/product-sku/product-sku.js';
 import { FormattedMessage } from '../../intl/formatted-message.js';
 import { Image } from '../../media/image/image.js';
 import { RouteLink } from '../../shared/routing/route-link.js';
-import { Heading } from '../../typography/heading/heading.js';
 import styles from './orderline-card.module.css.js';
 
 function OrderLineCard(props) {
     const { deliveryDate, href, image, isReadonly, price, productId, sku, tags, title, } = props;
-    return (jsxs(RouteLink, { className: clsx(styles['orderline-card'], isReadonly && styles.readonly), "data-test-selector": "orderLineListItem", href: href, id: productId, isDisabled: isReadonly, children: [jsx("div", { className: styles['image-container'], role: "presentation", children: jsx(Image, { "data-test-selector": "orderLineCardImage", ...image, fit: "contain" }) }), jsx(Heading, { className: styles.title, "data-test-selector": "orderLineCardTitle", size: "xxxs", tag: "h3", children: title }), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(ProductSku, { className: styles.sku, sku: sku }), isReadonly ? (jsx("p", { className: styles.amount, children: jsx(FormattedMessage, { id: "Amount: {0}", replacementValues: { '0': props.quantity.toString() } }) })) : (jsx("div", { className: styles['add-to-cart-button'], children: props.addToCartButton })), jsx(Price, { className: styles.price, currencyCode: price.currencyCode, "data-test-selector": "orderLineCardPrice", originalPrice: price.originalTotalPrice, price: price.totalPrice, pricePerUnit: price.pricePerUnit, variant: "sonic" }), deliveryDate && (jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate })), !isReadonly && (jsx("div", { className: styles.remove, "data-test-selector": "orderLineCardRemove", children: props.removeButton }))] }));
+    return (jsxs("article", { "aria-labelledby": `title-${productId}`, className: clsx(styles['orderline-card'], isReadonly && styles.readonly), "data-disabled": isReadonly ? true : undefined, "data-product-id": sku, "data-test-selector": "orderLineListItem", id: productId, children: [isReadonly ? (jsx("div", { className: styles.title, "data-test-selector": "orderLineCardTitle", id: `title-${productId}`, children: title })) : (jsx(RouteLink, { className: styles.title, "data-test-selector": "orderLineCardTitle", href: href, id: `title-${productId}`, children: title })), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(ProductSku, { className: styles.sku, sku: sku }), jsx(Price, { className: styles.price, currencyCode: price.currencyCode, "data-test-selector": "orderLineCardPrice", originalPrice: price.originalTotalPrice, price: price.totalPrice, pricePerUnit: price.pricePerUnit, variant: "sonic" }), jsx("div", { className: styles['image-container'], role: "presentation", children: jsx(Image, { "data-test-selector": "orderLineCardImage", ...image, fit: "contain" }) }), isReadonly ? (jsx("p", { className: styles.amount, children: jsx(FormattedMessage, { id: "Amount: {0}", replacementValues: { '0': props.quantity.toString() } }) })) : (jsx("div", { className: styles['add-to-cart-button'], children: props.addToCartButton })), deliveryDate && (jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate })), !isReadonly && (jsx("div", { className: styles.remove, "data-test-selector": "orderLineCardRemove", children: props.removeButton }))] }));
 }
 
 export { OrderLineCard };

package/dist/cards/product-card/connected-product-card.d.ts

@@ -1,8 +1,8 @@
 import { AddToCartHandler } from '../../buttons/add-to-cart-button/connected-add-to-cart-button';
 import { ProductCardProps } from './product-card';
-export interface ConnectedProductCartProps extends Omit<ProductCardProps, 'addToCartButton' | 'favoriteButton'> {
+export interface ConnectedProductCardProps extends Omit<ProductCardProps, 'addToCartButton' | 'favoriteButton'> {
     onAddToCart?: AddToCartHandler;
     onFavorited?: VoidFunction;
     onFavoriting?: VoidFunction;
 }
-export declare function ConnectedProductCard({ id, onAddToCart, onFavorited, onFavoriting, ...props }: ConnectedProductCartProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectedProductCard({ id, onAddToCart, onFavorited, onFavoriting, ...props }: ConnectedProductCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,11 +6,10 @@ import { ProductSku } from '../../display/product-sku/product-sku.js';
 import { FormattedMessage } from '../../intl/formatted-message.js';
 import { Image } from '../../media/image/image.js';
 import { RouteLink } from '../../shared/routing/route-link.js';
-import { Heading } from '../../typography/heading/heading.js';
 import styles from './product-card.module.css.js';
 
 function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, id, image, onClick, price, sku, tags, title, }) {
-    return (jsx("div", { className: styles['product-card-container'], children: jsxs(RouteLink, { className: styles['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, children: [jsx("div", { className: styles['image-container'], children: jsx(Image, { ...image, fit: "contain" }) }), jsx("div", { className: styles['favorite-button'], children: FavoriteButton && FavoriteButton }), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(Heading, { className: styles.title, size: "xxxs", tag: "h2", children: title }), jsx(ProductSku, { className: styles.sku, sku: sku }), jsx(Price, { className: styles.price, currencyCode: price.currencyCode, isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price, variant: "sonic" }), jsx("div", { className: styles['add-to-cart-button'], children: AddToCartButton })] }) }));
+    return (jsx("div", { className: styles['product-card-container'], children: jsxs("article", { "aria-labelledby": `title-${id}`, className: styles['product-card'], "data-product-id": sku, id: id, children: [jsx(RouteLink, { className: styles.title, href: href, id: `title-${id}`, onClick: onClick, children: title }), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(ProductSku, { className: styles.sku, sku: sku }), jsx(Price, { className: styles.price, currencyCode: price.currencyCode, isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price, variant: "sonic" }), jsx("div", { className: styles['image-container'], children: jsx(Image, { ...image, fit: "contain" }) }), jsx("div", { className: styles['add-to-cart-button'], children: AddToCartButton }), jsx("div", { className: styles['favorite-button'], children: FavoriteButton && FavoriteButton })] }) }));
 }
 
 export { ProductCard };

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

@@ -1,3 +1,3 @@
-var styles = {"product-card-container":"product-card-module-LepTy","product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","title":"product-card-module-CStNi","tags":"product-card-module-nL-hY","sku":"product-card-module-XzunM","image-container":"product-card-module-65ZVi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
+var styles = {"product-card-container":"product-card-module-LepTy","product-card":"product-card-module-pLaiB","title":"product-card-module-CStNi","favorite-button":"product-card-module-tvEdz","tags":"product-card-module-nL-hY","sku":"product-card-module-XzunM","image-container":"product-card-module-65ZVi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
 
 export { styles as default };

package/dist/cart-totals/cart-totals.js

@@ -8,7 +8,7 @@ import styles from './cart-totals.module.css.js';
 const formatDisplayPriceToSymbolSpaceValue = (displayPrice) => displayPrice.replace(/^(\D)([\d,.]*$)/, (_, symbol, value) => `${symbol} ${value}`);
 function CartTotals({ currencyCode, deliveryDate, fulfillmentMethod, isPayByInvoice, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }) {
     const t = useFormattedMessage();
-    return (jsxs("div", { className: styles['cart-totals'], children: [orderNumber && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Order number" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "orderConfirmation_orderNumber", children: orderNumber }) }) })] })), deliveryDate !== undefined && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Delivery date" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "deliveryDate", children: deliveryDate || t('As soon as possible') }) }) })] })), fulfillmentMethod && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Fulfillment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "fulfillmentMethod", children: fulfillmentMethod }) }) })] })), isPayByInvoice && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Payment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "paymentMethod", children: jsx(FormattedMessage, { id: "Pay by invoice" }) }) }) })] })), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Cost overview" }) }), jsxs("div", { children: [jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "Subtotal" }), ' ', jsx(FormattedMessage, { id: "Excl. VAT" })] }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "cartTotal_subTotal", price: subtotal })] }), jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping and handling" }) }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "shippingCost", price: shippingCost })] }), jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "VAT" }), ' ', vatPercentage ? `${vatPercentage}%` : ''] }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "vatAmount", price: tax })] })] })] }), jsx("section", { className: styles.totals, children: jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Total" }) }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "cartTotal_orderGrandTotalDisplay", price: total })] }) })] }));
+    return (jsxs("div", { className: styles['cart-totals'], children: [orderNumber && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Order number" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "orderConfirmation_orderNumber", children: orderNumber }) }) })] })), deliveryDate !== undefined && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Delivery date" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "deliveryDate", children: deliveryDate || t('As soon as possible') }) }) })] })), fulfillmentMethod && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Fulfillment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "fulfillmentMethod", children: jsx(FormattedMessage, { id: `fulfillmentmethod.${fulfillmentMethod}` }) }) }) })] })), isPayByInvoice && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Payment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "paymentMethod", children: jsx(FormattedMessage, { id: "Pay by invoice" }) }) }) })] })), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Cost overview" }) }), jsxs("div", { children: [jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "Subtotal" }), ' ', jsx(FormattedMessage, { id: "Excl. VAT" })] }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "cartTotal_subTotal", price: subtotal })] }), jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping and handling" }) }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "shippingCost", price: shippingCost })] }), jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "VAT" }), ' ', vatPercentage ? `${vatPercentage}%` : ''] }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "vatAmount", price: tax })] })] })] }), jsx("section", { className: styles.totals, children: jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Total" }) }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "cartTotal_orderGrandTotalDisplay", price: total })] }) })] }));
 }
 
 export { CartTotals, formatDisplayPriceToSymbolSpaceValue };

package/dist/country-select/country-select.d.ts

@@ -4,6 +4,7 @@ interface CountrySelectProps<T extends Country> {
     countryNameInLanguageOfCountry?: boolean;
     'data-test-selector'?: string;
     isDisabled?: boolean;
+    isLoading?: boolean;
     isRequired?: boolean;
     name?: string;
     showLabel?: boolean;

package/dist/country-select/country-select.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
-import { Select } from '../forms/select/select.js';
+import { SelectField } from '../forms/select-field/select-field.js';
 import { useFormattedMessage } from '../intl/use-formatted-message.js';
 
-function CountrySelect({ countries, countryNameInLanguageOfCountry = false, 'data-test-selector': dataTestSelector, defaultSelectedCountry, isDisabled, isRequired, name, onCountryChange, selectedCountry, showLabel = true, }) {
+function CountrySelect({ countries, countryNameInLanguageOfCountry = false, 'data-test-selector': dataTestSelector, defaultSelectedCountry, isDisabled, isLoading, isRequired, name, onCountryChange, selectedCountry, showLabel = true, }) {
     const t = useFormattedMessage();
     const translationPrefix = countryNameInLanguageOfCountry
         ? 'clSelector'
@@ -20,7 +20,7 @@ function CountrySelect({ countries, countryNameInLanguageOfCountry = false, 'dat
     }), {}), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [countries]);
-    return (jsx(Select, { "data-key": selectedCountry?.id, "data-test-selector": dataTestSelector, defaultSelectedOption: defaultSelectedCountry?.id, isDisabled: isDisabled, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, selectedOption: selectedCountry?.id, showLabel: showLabel, showPlaceholder: false, variant: "solid" }));
+    return (jsx(SelectField, { "data-key": selectedCountry?.id, "data-test-selector": dataTestSelector, defaultSelectedOption: defaultSelectedCountry?.id, isDisabled: isDisabled, isLoading: isLoading, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, selectedOption: selectedCountry?.id, showLabel: showLabel, showPlaceholder: false, variant: "solid" }));
 }
 
 export { CountrySelect };

package/dist/exports.d.ts

@@ -74,13 +74,20 @@ export * from './filters/active-filters/active-filters';
 export * from './filters/multi-select/multi-select';
 export * from './filters/pagination/pagination';
 export * from './footer/footer';
+export * from './forms/checkbox-field/checkbox-field';
 export * from './forms/checkbox/checkbox';
 export * from './forms/color-checkbox/color-checkbox';
 export * from './forms/field-error/field-error';
+export * from './forms/form/form';
+export * from './forms/form/form-field-layout';
+export * from './forms/form/form-segment';
+export * from './forms/form/form-segment-group';
 export * from './forms/input/input';
 export * from './forms/label/label';
 export * from './forms/number-field/number-field';
+export * from './forms/select-field/select-field';
 export * from './forms/select/select';
+export * from './forms/switch-field/switch-field';
 export * from './forms/switch/switch';
 export * from './forms/text-field/password-reveal-toggle/password-reveal-toggle';
 export * from './forms/text-field/text-field';
@@ -154,6 +161,10 @@ export * from './notifications/announcements/announcement';
 export * from './notifications/announcements/announcement-provider';
 export * from './notifications/announcements/connected-announcement';
 export * from './observers/intersection-observer';
+export * from './pages/account/components/create-account-form/create-account-form';
+export * from './pages/account/components/sign-in-form/sign-in-form';
+export * from './pages/account/create-account-page/create-account-page';
+export * from './pages/account/layouts/sign-in-page-layout/sign-in-page-background-image';
 export * from './pages/account/layouts/sign-in-page-layout/sign-in-page-layout';
 export * from './pages/account/sign-in-page/sign-in-page';
 export * from './pages/checkout/cart-page/cart-page';
@@ -212,6 +223,7 @@ export * from './shared/api/bff/hooks/use-fetch-product-details-page-data';
 export * from './shared/api/bff/hooks/use-fetch-product-listing-page-data';
 export * from './shared/api/bff/services/bff-service';
 export * from './shared/api/shared/hooks/use-awaitable-mutation';
+export * from './shared/api/storefront/hooks/authentication/use-create-account';
 export * from './shared/api/storefront/hooks/authentication/use-create-guest-account';
 export * from './shared/api/storefront/hooks/authentication/use-fetch-session';
 export * from './shared/api/storefront/hooks/authentication/use-invalidate-session';
@@ -288,6 +300,7 @@ export * from './shared/hooks/use-scroll-lock';
 export * from './shared/hooks/use-scroll-to';
 export * from './shared/hooks/use-session-storage';
 export * from './shared/hooks/use-watch-css-property';
+export * from './shared/model/account';
 export * from './shared/model/address';
 export * from './shared/model/announcement';
 export * from './shared/model/category';
@@ -331,7 +344,6 @@ export * from './sidebar/sidebar-provider';
 export * from './sidebar/toggle-sidebar-button';
 export * from './sidebar/types';
 export * from './sidebar/use-sidebar';
-export * from './sign-in-form/sign-in-form';
 export * from './toast/toast';
 export * from './toast/toast-provider';
 export * from './toast/types';

package/dist/filters/pagination/pagination.js

@@ -5,10 +5,12 @@ import { NumberField } from '../../forms/number-field/number-field.js';
 import { GlyphsChevronsSlimLeftIcon } from '../../icons/glyph/glyphs-chevrons-slim-left-icon.js';
 import { GlyphsChevronsSlimRightIcon } from '../../icons/glyph/glyphs-chevrons-slim-right-icon.js';
 import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import styles from './pagination.module.css.js';
 
 function Pagination({ currentPage, onChange, totalPages, }) {
-    return (jsxs("div", { className: styles.pagination, children: [jsx(IconButton, { isDisabled: currentPage === 1, onClick: () => onChange(currentPage - 1), children: jsx(GlyphsChevronsSlimLeftIcon, {}) }), jsxs("div", { className: styles['page-number-container'], children: [jsx(NumberField, { autoGrow: true, label: "current-page", maxValue: totalPages, minValue: 1, onChange: onChange, value: currentPage }), jsx(FormattedMessage, { id: "of" }), jsx("div", { children: totalPages })] }), jsx(IconButton, { isDisabled: currentPage >= totalPages, onClick: () => onChange(currentPage + 1), children: jsx(GlyphsChevronsSlimRightIcon, {}) })] }));
+    const t = useFormattedMessage();
+    return (jsxs("div", { className: styles.pagination, children: [jsx(IconButton, { isDisabled: currentPage === 1, onClick: () => onChange(currentPage - 1), children: jsx(GlyphsChevronsSlimLeftIcon, {}) }), jsxs("div", { className: styles['page-number-container'], children: [jsx(NumberField, { autoGrow: true, label: t('Current page'), maxValue: totalPages, minValue: 1, onChange: onChange, value: currentPage }), jsx(FormattedMessage, { id: "of" }), jsx("div", { children: totalPages })] }), jsx(IconButton, { isDisabled: currentPage >= totalPages, onClick: () => onChange(currentPage + 1), children: jsx(GlyphsChevronsSlimRightIcon, {}) })] }));
 }
 
 export { Pagination };

package/dist/forms/checkbox/checkbox.d.ts

@@ -1,13 +1,22 @@
 import { ReactNode } from 'react';
-export interface CheckboxProps {
-    _pseudo?: 'none' | 'focus' | 'hover' | 'active';
-    children?: ReactNode;
+export interface CheckboxPropsBase {
+    autoFocus?: boolean;
     className?: string;
     'data-test-selector'?: string;
     defaultSelected?: boolean;
     isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
     isSelected?: boolean;
+    name?: string;
     onChange?: (isSelected: boolean) => void;
     value?: string;
 }
-export declare function Checkbox({ _pseudo, children, className, 'data-test-selector': dataTestSelector, defaultSelected, isDisabled, isSelected, onChange, value, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export interface CheckboxWithLabelProps extends CheckboxPropsBase {
+    'aria-label': string;
+}
+export interface CheckboxWithChildrenProps extends CheckboxPropsBase {
+    children: ReactNode;
+}
+export type CheckboxProps = CheckboxWithLabelProps | CheckboxWithChildrenProps;
+export declare function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/checkbox/checkbox.js

@@ -2,10 +2,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Checkbox as Checkbox$1 } from 'react-aria-components';
 import clsx from 'clsx';
+import { Label } from '../label/label.js';
 import styles from './checkbox.module.css.js';
 
-function Checkbox({ _pseudo = 'none', children, className, 'data-test-selector': dataTestSelector, defaultSelected, isDisabled, isSelected, onChange, value, }) {
-    return (jsxs(Checkbox$1, { className: clsx(className, styles.checkbox, styles[_pseudo]), "data-test-selector": dataTestSelector, defaultSelected: defaultSelected, isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles.box, children: jsx("svg", { "aria-hidden": "true", className: styles.checkmark, viewBox: "0 0 10 7", children: jsx("path", { d: "m1 2.845 3 3L8.845 1" }) }) }), children] }));
+function Checkbox(props) {
+    const { autoFocus, className, 'data-test-selector': dataTestSelector, defaultSelected, isDisabled, isReadOnly, isRequired, isSelected, name, onChange, value, } = props;
+    const ariaLabel = 'aria-label' in props ? props['aria-label'] : undefined;
+    const children = 'children' in props ? props.children : undefined;
+    return (jsxs(Checkbox$1, { "aria-label": ariaLabel, autoFocus: autoFocus, className: clsx(styles.checkbox, className), "data-test-selector": dataTestSelector, defaultSelected: defaultSelected, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isSelected: isSelected, name: name, onChange: onChange, value: value, children: [jsx("div", { className: styles.box, children: jsx("svg", { "aria-hidden": "true", className: styles.checkmark, viewBox: "0 0 10 7", children: jsx("path", { d: "m1 2.845 3 3L8.845 1" }) }) }), children && (jsx(Label, { className: styles.label, isRequired: isRequired, children: children }))] }));
 }
 
 export { Checkbox };

package/dist/forms/checkbox/checkbox.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"checkbox":"checkbox-module-YNVdd","box":"checkbox-module-UKoyf","checkmark":"checkbox-module-pHIwh","focus":"checkbox-module-v23jy","active":"checkbox-module-7UG-b","color-checkbox":"checkbox-module-nEhvW"};
+var styles = {"checkbox":"checkbox-module-YNVdd","box":"checkbox-module-UKoyf","checkmark":"checkbox-module-pHIwh","color-checkbox":"checkbox-module-nEhvW","label":"checkbox-module-ITd8W"};
 
 export { styles as default };

package/dist/forms/checkbox-field/checkbox-field.d.ts

@@ -0,0 +1,10 @@
+import { CheckboxProps, CheckboxPropsBase } from '../checkbox/checkbox';
+import { ValidateFunction } from '../field-error/field-error';
+export interface CheckboxFieldPropsBase extends CheckboxPropsBase {
+    errorMessage?: string;
+    info?: string;
+    isInvalid?: boolean;
+    validate?: ValidateFunction<boolean>;
+}
+export type CheckboxFieldProps = CheckboxFieldPropsBase & CheckboxProps;
+export declare function CheckboxField(props: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/checkbox-field/checkbox-field.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { CheckboxGroup } from 'react-aria-components';
+import clsx from 'clsx';
+import { InfoIconTooltip } from '../../info-icon-tooltip/info-icon-tooltip.js';
+import { Checkbox } from '../checkbox/checkbox.js';
+import { FieldError } from '../field-error/field-error.js';
+import { FormFieldLayout } from '../form/form-field-layout.js';
+import styles from './checkbox-field.module.css.js';
+
+function CheckboxField(props) {
+    const { className, defaultSelected, info, isDisabled, isInvalid, isReadOnly, isRequired, isSelected, validate, value = 'true', } = props;
+    return (jsx(CheckboxGroup, { className: clsx(styles['checkbox-field'], className), defaultValue: defaultSelected ? [value] : undefined, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, validate: values => validate?.(values.every(Boolean)), value: isSelected ? [value] : undefined, children: jsx(FormFieldLayout, { errorSlot: jsx(FieldError, {}), infoSlot: info && jsx(InfoIconTooltip, { children: info }), children: jsx(Checkbox, { ...props }) }) }));
+}
+
+export { CheckboxField };

package/dist/forms/checkbox-field/checkbox-field.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"checkbox-field":"checkbox-field-module-fdQEa"};
+
+export { styles as default };

package/dist/forms/color-checkbox/color-checkbox.d.ts

@@ -1,5 +1,7 @@
-import { CheckboxProps } from '../checkbox/checkbox';
-export interface ColorCheckboxProps extends CheckboxProps {
+import { CheckboxProps, CheckboxPropsBase } from '../checkbox/checkbox';
+interface ColorCheckboxPropsBase extends CheckboxPropsBase {
     color: string;
 }
-export declare function ColorCheckbox({ _pseudo, children, className, color, isDisabled, isSelected, onChange, value, }: ColorCheckboxProps): import("react/jsx-runtime").JSX.Element;
+export type ColorCheckboxProps = ColorCheckboxPropsBase & CheckboxProps;
+export declare function ColorCheckbox(props: ColorCheckboxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/forms/color-checkbox/color-checkbox.js

@@ -2,12 +2,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Checkbox } from 'react-aria-components';
 import clsx from 'clsx';
+import { Label } from '../label/label.js';
 import styles from '../checkbox/checkbox.module.css.js';
 
-function ColorCheckbox({ _pseudo = 'none', children, className, color, isDisabled, isSelected, onChange, value, }) {
-    return (jsxs(Checkbox, { className: clsx(className, styles.checkbox, styles['color-checkbox'], styles[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
+function ColorCheckbox(props) {
+    const { autoFocus, className, color, 'data-test-selector': dataTestSelector, defaultSelected, isDisabled, isReadOnly, isRequired, isSelected, name, onChange, value, } = props;
+    const ariaLabel = 'aria-label' in props ? props['aria-label'] : undefined;
+    const children = 'children' in props ? props.children : undefined;
+    return (jsxs(Checkbox, { "aria-label": ariaLabel, autoFocus: autoFocus, className: clsx(styles.checkbox, styles['color-checkbox'], className), "data-test-selector": dataTestSelector, defaultSelected: defaultSelected, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isSelected: isSelected, name: name, onChange: onChange, style: {
             '--selected-color': color,
-        }, value: value, children: [jsx("div", { className: styles.box }), children] }));
+        }, value: value, children: [jsx("div", { className: styles.box }), jsx(Label, { className: styles.label, isRequired: isRequired, children: children })] }));
 }
 
 export { ColorCheckbox };

package/dist/forms/form/form-field-layout.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface FormFieldLayoutProps {
+    children: ReactNode;
+    className?: string;
+    errorSlot?: ReactNode;
+    infoSlot?: ReactNode;
+    labelSlot?: ReactNode;
+}
+export declare function FormFieldLayout({ children, className, errorSlot, infoSlot, labelSlot, }: FormFieldLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/forms/form/form-field-layout.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './form-field-layout.module.css.js';
+
+function FormFieldLayout({ children, className, errorSlot, infoSlot, labelSlot, }) {
+    return (jsxs("div", { className: clsx(styles['form-field-layout'], className), children: [labelSlot && jsx("div", { className: styles['label'], children: labelSlot }), jsx("div", { className: styles['input'], children: children }), infoSlot && jsx("div", { className: styles['info'], children: infoSlot }), errorSlot && jsx("div", { className: styles['error'], children: errorSlot })] }));
+}
+
+export { FormFieldLayout };

package/dist/forms/form/form-field-layout.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"form-field-layout":"form-field-layout-module-ATB1W","label":"form-field-layout-module-3tbc7","input":"form-field-layout-module-vT6Gy","info":"form-field-layout-module-UcHO-","error":"form-field-layout-module-Pfatk"};
+
+export { styles as default };

package/dist/forms/form/form-segment-group.d.ts

@@ -0,0 +1,6 @@
+export interface FormSegmentGroupProps {
+    children: React.ReactNode;
+    className?: string;
+    title?: string;
+}
+export declare function FormSegmentGroup({ children, className, title, }: FormSegmentGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/form/form-segment-group.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './form-segment-group.module.css.js';
+
+function FormSegmentGroup({ children, className, 
+// columns,
+title, }) {
+    return (jsx("fieldset", { "aria-label": title, className: clsx(styles['form-segment-group'], 
+        // columns && styles['columns'],
+        className), children: children }));
+}
+
+export { FormSegmentGroup };

package/dist/forms/form/form-segment-group.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"form-segment-group":"form-segment-group-module-P3YjC"};
+
+export { styles as default };

package/dist/forms/form/form-segment.d.ts

@@ -0,0 +1,6 @@
+export interface FormSegmentProps {
+    children: React.ReactNode;
+    className?: string;
+    isFloating?: boolean;
+}
+export declare function FormSegment({ children, className, isFloating, }: FormSegmentProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/form/form-segment.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './form-segment.module.css.js';
+
+function FormSegment({ children, className, isFloating, }) {
+    return (jsx("div", { className: clsx(styles['form-segment'], isFloating && styles['floating'], className), children: children }));
+}
+
+export { FormSegment };

package/dist/forms/form/form-segment.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"form-segment":"form-segment-module-JLPcG","floating":"form-segment-module-98g3i"};
+
+export { styles as default };

package/dist/forms/form/form.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface OnSubmitParams {
+    formData: FormData;
+    submitter?: HTMLButtonElement;
+}
+export interface FormProps {
+    autoComplete?: boolean;
+    children: ReactNode;
+    className?: string;
+    errorMessage?: string;
+    footer?: ReactNode;
+    header?: ReactNode;
+    onSubmit?: ({ formData, submitter }: OnSubmitParams) => void;
+    title?: string;
+}
+export declare function Form({ autoComplete, children, className, errorMessage, footer, header, onSubmit, title, }: FormProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/form/form.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { Form as Form$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import { Message } from '../../message/message.js';
+import { scrollToTop } from '../../shared/hooks/use-scroll-to.js';
+import styles from './form.module.css.js';
+
+function Form({ autoComplete = false, children, className, errorMessage, footer, header, onSubmit, title, }) {
+    const handleSubmit = (event) => {
+        if (onSubmit) {
+            event.preventDefault();
+            const form = event.currentTarget;
+            const formData = new FormData(form);
+            const submitter = event.nativeEvent.submitter;
+            onSubmit({ formData, submitter });
+        }
+    };
+    useEffect(() => {
+        if (errorMessage) {
+            scrollToTop();
+        }
+    }, [errorMessage]);
+    return (jsxs(Form$1, { "aria-label": title, autoComplete: autoComplete ? 'on' : 'off', className: clsx(styles['form'], className), onSubmit: handleSubmit, validationBehavior: "native", children: [jsx("header", { className: styles['form-header'], children: header }), errorMessage && (jsx("section", { className: styles['error-messages'], children: jsx(Message, { type: "danger", children: errorMessage }) })), children, jsx("footer", { className: styles['form-footer'], children: footer })] }));
+}
+
+export { Form };

package/dist/forms/form/form.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"form":"form-module-xD1fv","error-messages":"form-module-Hy5TM","form-header":"form-module-jDAR6","form-footer":"form-module-wcAbi"};
+
+export { styles as default };

package/dist/forms/input/input.d.ts

@@ -2,8 +2,10 @@ import { ComponentProps, FC } from 'react';
 import { Input as AriaInput } from 'react-aria-components';
 export interface InputProps extends Omit<ComponentProps<typeof AriaInput>, 'size'> {
     _pseudo?: 'focus' | 'none';
+    autoComplete?: string;
     autoGrow?: boolean;
     className?: string;
+    'data-test-selector'?: string;
     inlineElement?: React.ReactNode;
     label: string;
     size?: 'md' | 'lg';

package/dist/forms/input/input.js

@@ -9,7 +9,7 @@ import styles from './input.module.css.js';
  * This component is used to create an input that grows as the user types.
  * It uses a shadow input to calculate the width of the input.
  */
-const Input = forwardRef(({ _pseudo = 'none', autoGrow, className, inlineElement, label, size = 'lg', ...inputProps }, inputRef) => {
+const Input = forwardRef(({ _pseudo = 'none', autoComplete, autoGrow, className, inlineElement, label, size = 'lg', ...inputProps }, inputRef) => {
     const [props, ref] = useContextProps(inputProps, inputRef, InputContext);
     const { defaultValue, onChange, value: controlledValue } = props;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
@@ -20,7 +20,7 @@ const Input = forwardRef(({ _pseudo = 'none', autoGrow, className, inlineElement
         : setUncontrolledValue(event.target.value);
     return (jsx("div", { className: clsx(className, styles['input-container'], styles[size], styles[_pseudo]), children: jsxs("div", { className: clsx(styles.input, {
                 [styles['growing-input']]: autoGrow,
-            }), children: [jsx(Input$1, { "aria-label": label, size: autoGrow ? 1 : undefined, ...props, ref: ref, onChange: handleChange, onClick: e => {
+            }), children: [jsx(Input$1, { "aria-label": label, "auto-complete": autoComplete, size: autoGrow ? 1 : undefined, ...props, ref: ref, onChange: handleChange, onClick: e => {
                         e.preventDefault();
                         e.stopPropagation();
                         e.target.focus();

package/dist/forms/label/label.js

@@ -7,7 +7,7 @@ import styles from './label.module.css.js';
 function Label({ children, className, 'data-test-selector': dataTestSelector, isRequired, }) {
     if (!children)
         return null;
-    return (jsxs(Label$1, { className: clsx(className, styles.label), "data-test-selector": dataTestSelector, children: [children, isRequired && jsx("span", { className: styles.required, children: "*" })] }));
+    return (jsxs(Label$1, { className: clsx(styles.label, className), "data-test-selector": dataTestSelector, children: [children, isRequired && jsx("span", { className: styles.required, children: "*" })] }));
 }
 
 export { Label };