@sonic-equipment/ui 184.0.0 → 186.0.0

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

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

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

@@ -3,7 +3,7 @@ import styles from './address-info-display.module.css.js';
 
 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) && (jsxs("p", { "data-test-selector": "addressInfoDisplay_name", children: [jsx("span", { "data-test-selector": "addressInfoDisplay_name_firstName", children: firstName }), ` `, jsx("span", { "data-test-selector": "addressInfoDisplay_name_lastName", children: 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", { children: [postalCode && (jsxs(Fragment, { children: [jsx("span", { "data-test-selector": "addressInfoDisplay_postalCode", children: postalCode }), ' '] })), city && (jsx("span", { "data-test-selector": "addressInfoDisplay_city", children: 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 })] }));
+    return (jsxs("address", { className: styles.address, "data-test-selector": dataTestSelector, children: [(firstName || lastName) && (jsxs("p", { "data-test-selector": "addressInfoDisplay_name", children: [jsx("span", { "data-test-selector": "addressInfoDisplay_name_firstName", children: firstName }), ` `, jsx("span", { "data-test-selector": "addressInfoDisplay_name_lastName", children: 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", { children: [postalCode && (jsxs(Fragment, { children: [jsx("span", { "data-test-selector": "addressInfoDisplay_postalCode", children: postalCode }), ' '] })), city && (jsx("span", { "data-test-selector": "addressInfoDisplay_city", children: city }))] })), country && (jsx("p", { "data-test-selector": "addressInfoDisplay_country", children: country.name })), phone && jsx("p", { "data-test-selector": "addressInfoDisplay_phone", children: phone }), email && jsx("p", { "data-test-selector": "addressInfoDisplay_email", children: email })] }));
 }
 
 export { AddressInfoDisplay };

package/dist/algolia/algolia-multi-select-filter-section.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useRefinementList } from 'react-instantsearch';
 import { MultiSelect } from '../filters/multi-select/multi-select.js';
-import { Checkbox } from '../forms/checkbox/checkbox.js';
+import { Checkbox } from '../forms/elements/checkbox/checkbox.js';
 import { FilterSection } from './filter-section.js';
 
 function AlgoliaMultiSelectFilterSection({ attribute, }) {

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useSortBy } from 'react-instantsearch';
-import { Select } from '../forms/select/select.js';
+import { Select } from '../forms/elements/select/select.js';
 import { useFormattedMessage } from '../intl/use-formatted-message.js';
 import { useLanguageCode } from '../intl/use-language-code.js';
 import { environment } from '../shared/utils/environment.js';

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback, useRef, useEffect } from 'react';
-import { NumberField } from '../../forms/number-field/number-field.js';
+import { NumberField } from '../../forms/fields/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';

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

@@ -1,4 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
 import clsx from 'clsx';
 import { FormattedMessage } from '../../intl/formatted-message.js';
 import { ProgressCircle } from '../../loading/progress-circle.js';
@@ -8,43 +9,59 @@ import styles from './data-card.module.css.js';
 
 function DataCard({ actions, data, 'data-test-selector': dataTestSelector, isLoading = false, rendering, showError = false, title, }) {
     const dataFields = data.flatMap((entry) => entry.type === 'section' ? entry.data : [entry]);
-    const visibleData = dataFields.filter(({ value }) => Boolean(value));
+    const visibleData = dataFields.filter(dataField => isDataFieldVisible(dataField, rendering));
     const hasItems = visibleData.length > 0;
-    const sections = sectionizeItems(data);
-    return (jsxs("section", { className: styles['data-card-container'], "data-test-selector": dataTestSelector, children: [title && (jsx(Heading, { className: styles.title, size: "xxs", tag: "h3", children: jsx(FormattedMessage, { id: title }) })), jsx("div", { className: styles['data-card'], children: showError ? (jsx("div", { className: styles['error-container'], children: showError instanceof UnauthorizedRequestError ? (jsx(FormattedMessage, { id: "You are not authorized to access this information." })) : typeof showError === 'string' ? (jsx(FormattedMessage, { id: showError })) : (jsx(FormattedMessage, { id: "An unexpected error occured" })) })) : isLoading ? (jsx("div", { className: styles['loading-container'], children: jsx(ProgressCircle, { variant: "gray" }) })) : hasItems ? (jsxs("div", { className: clsx(styles['container']), children: [jsx("dl", { className: styles['data-table'], children: sections.map(section => (jsx(DataTableSection, { dataSection: section, rendering: rendering }, section.key))) }), actions?.length && (jsx("div", { className: styles['data-card-actions'], children: actions }))] })) : (jsx("div", { className: clsx(styles['no-data-container']), children: jsx(FormattedMessage, { id: "There is no information to display" }) })) })] }));
+    const sections = sectionizeItems(data, rendering);
+    return (jsxs("section", { className: styles['data-card-container'], "data-test-selector": dataTestSelector, children: [title && (jsx(Heading, { className: styles.title, size: "xxs", tag: "h3", children: jsx(FormattedMessage, { id: title }) })), jsx("div", { className: styles['data-card'], children: showError ? (jsx("div", { className: styles['error-container'], children: showError instanceof UnauthorizedRequestError ? (jsx(FormattedMessage, { id: "You are not authorized to access this information." })) : typeof showError === 'string' ? (jsx(FormattedMessage, { id: showError })) : (jsx(FormattedMessage, { id: "An unexpected error occured" })) })) : isLoading ? (jsx("div", { className: styles['loading-container'], children: jsx(ProgressCircle, { variant: "gray" }) })) : hasItems ? (jsxs("div", { className: clsx(styles['container']), children: [jsx("dl", { className: styles['data-table'], children: sections.map(section => (jsx(DataTableSection, { dataSection: section, rendering: rendering }, section.key))) }), Boolean(actions?.length) && (jsx("div", { className: styles['data-card-actions'], children: actions }))] })) : (jsx("div", { className: clsx(styles['no-data-container']), children: jsx(FormattedMessage, { id: "There is no information to display" }) })) })] }));
+}
+function renderValue(rendering, key, value) {
+    const renderedValue = rendering?.value
+        ? rendering.value({ key, value })
+        : value !== undefined && value !== null
+            ? String(value)
+            : null;
+    if (renderedValue === null ||
+        renderedValue === undefined ||
+        renderedValue === 'string' ||
+        isValidElement(renderedValue))
+        return renderedValue;
+    return String(renderedValue);
 }
 function DataTable({ data, rendering, }) {
     return data.map(({ key, label, value }, index) => (jsxs(Fragment, { children: [jsx("dt", { className: clsx(styles['data-table-key'], {
                     [styles['data-table-section-end']]: index === data.length - 1,
-                }), children: rendering?.label ? (rendering.label({ key, label })) : (jsx(FormattedMessage, { id: label })) }), jsx("dd", { className: styles['data-table-value'], "data-key": key, children: rendering?.value
-                    ? rendering.value({ key, value })
-                    : value !== undefined && value !== null
-                        ? String(value)
-                        : null })] }, key)));
+                }), children: rendering?.label ? (rendering.label({ key, label })) : (jsx(FormattedMessage, { id: label })) }), jsx("dd", { className: styles['data-table-value'], "data-key": key, children: renderValue(rendering, key, value) })] }, key)));
 }
 function DataTableSection({ dataSection, rendering, }) {
     return (jsxs(Fragment, { children: [dataSection.heading && (jsx(Heading, { className: styles['data-table-section-heading'], size: "xxxs", tag: "h3", children: dataSection.heading })), jsx(DataTable, { data: dataSection.data, rendering: rendering })] }));
 }
-function sectionizeItems(data) {
-    const result = [];
+function isDataFieldVisible({ key, value }, rendering) {
+    return Boolean(renderValue(rendering, key, value));
+}
+function sectionizeItems(data, rendering) {
+    const dataSections = [];
     let currentSection = null;
     data.forEach((item, index) => {
         if (item.type === 'section') {
             currentSection = null;
-            result.push(item);
-        }
-        else if (currentSection) {
-            currentSection.data.push(item);
+            dataSections.push(item);
         }
         else {
-            result.push((currentSection = {
-                data: [item],
-                key: `section-${index}`,
-                type: 'section',
-            }));
+            if (!isDataFieldVisible(item, rendering))
+                return;
+            if (currentSection) {
+                currentSection.data.push(item);
+            }
+            else {
+                dataSections.push((currentSection = {
+                    data: [item],
+                    key: `section-${index}`,
+                    type: 'section',
+                }));
+            }
         }
     });
-    return result;
+    return dataSections.filter(section => section.data.length > 0);
 }
 
 export { DataCard };

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

@@ -1,3 +1,3 @@
-var styles = {"data-card-container":"data-card-module-OMXIh","title":"data-card-module-DMbBO","data-card":"data-card-module-24uin","error-container":"data-card-module-j-RFT","loading-container":"data-card-module-d9zvu","no-data-container":"data-card-module-FVD44","container":"data-card-module-ZefqY","data-table":"data-card-module-EDbE-","data-table-section-heading":"data-card-module-CjTal","data-table-section-end":"data-card-module-QixKJ","data-table-key":"data-card-module-FAgmN","data-table-value":"data-card-module-fcSbu","data-card-actions":"data-card-module-Qv5iI"};
+var styles = {"data-card-container":"data-card-module-OMXIh","title":"data-card-module-DMbBO","data-card":"data-card-module-24uin","error-container":"data-card-module-j-RFT","loading-container":"data-card-module-d9zvu","no-data-container":"data-card-module-FVD44","container":"data-card-module-ZefqY","data-table":"data-card-module-EDbE-","data-table-section-heading":"data-card-module-CjTal","data-table-section-end":"data-card-module-QixKJ","data-table-value":"data-card-module-fcSbu","data-table-key":"data-card-module-FAgmN","data-card-actions":"data-card-module-Qv5iI"};
 
 export { styles as default };

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
-import { SelectField } from '../forms/select-field/select-field.js';
+import { SelectField } from '../forms/fields/select-field/select-field.js';
 import { useFormattedMessage } from '../intl/use-formatted-message.js';
 
 function CountrySelect({ countries, countryNameInLanguageOfCountry = false, 'data-test-selector': dataTestSelector, defaultSelectedCountry, isDisabled, isLoading, isRequired, name, onCountryChange, selectedCountry, showLabel = true, }) {

package/dist/country-select/hooks/use-countries.js

@@ -33,6 +33,7 @@ function useCountries({ enabled = true, }) {
                     };
                 }),
                 name: country.name,
+                states: null,
             };
         });
         return countries;

package/dist/country-selector/country-selector-dialog/country-selector-dialog.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
 import { Button } from '../../buttons/button/button.js';
 import { CountrySelect } from '../../country-select/country-select.js';
-import { Select } from '../../forms/select/select.js';
+import { Select } from '../../forms/elements/select/select.js';
 import { FormattedMessage } from '../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { Dialog } from '../../modals/dialog/dialog.js';
@@ -28,11 +28,7 @@ function CountrySelectorDialog({ countries, isDismissable, isOpen, onOpenChange,
     return (jsx(Dialog, { hideTitle: true, allowClose: isDismissable, className: {
             dialog: styles['country-selector-dialog'],
             modal: styles.modal,
-        }, footer: jsx(Button, { withArrow: true, "data-test-selector": "clSelector_apply", type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }), hasCloseButton: isDismissable, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: e => {
-            onSubmit({ country: currentCountry, language: currentLanguage });
-            e.preventDefault();
-            e.stopPropagation();
-        }, shouldCloseOnInteractOutside: isDismissable, title: "Country Selector", children: jsxs("div", { className: styles.content, children: [jsx("svg", { className: styles.logo, height: "32", viewBox: "0 0 134 32", width: "134", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { d: "M15.83 11.533c2.42 0 4.382 1.977 4.382 4.415 0 8.794-7.1 15.95-15.83 15.95C1.963 31.897 0 29.92 0 27.481c0-2.354 1.83-4.278 4.134-4.408l.249-.007c3.797 0 6.905-3.036 7.058-6.826l.006-.293c0-2.438 1.963-4.415 4.383-4.415zM15.83 0c2.42 0 4.383 1.977 4.383 4.415 0 2.355-1.83 4.279-4.134 4.409l-.249.007c-3.8 0-6.906 3.035-7.059 6.824l-.006.293c0 2.438-1.962 4.415-4.382 4.415S0 18.386 0 15.948C0 7.154 7.101 0 15.83 0zm8.208 16.022c0 8.794 7.101 15.95 15.83 15.95s15.83-7.156 15.83-15.95S48.597.074 39.868.074s-15.83 7.154-15.83 15.948zm8.765 0c0-3.924 3.169-7.118 7.065-7.118 3.895 0 7.065 3.194 7.065 7.118 0 3.926-3.17 7.119-7.065 7.119-3.896 0-7.065-3.193-7.065-7.12zm76.888-11.276c-6.173 6.217-6.173 16.335-.002 22.553 6.173 6.217 16.215 6.217 22.388 0a4.44 4.44 0 0 0 .001-6.244 4.359 4.359 0 0 0-6.003-.184l-.194.184a7.04 7.04 0 0 1-9.994 0c-2.753-2.775-2.753-7.29.002-10.065a7.036 7.036 0 0 1 9.751-.233l.24.231a4.36 4.36 0 0 0 6.198 0 4.44 4.44 0 0 0-.001-6.245c-6.173-6.217-16.215-6.216-22.386.003zm-17.162-.174v22.863c0 2.439 1.961 4.416 4.381 4.416 2.422 0 4.384-1.977 4.384-4.416V4.572c0-2.439-1.962-4.416-4.384-4.416-2.42 0-4.38 1.977-4.38 4.416zM64.1.1c-2.42 0-4.383 1.977-4.383 4.415v23.07c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V8.93h3.933c3.895 0 7.065 3.192 7.065 7.118v11.537c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V16.048C88.244 7.254 81.143.1 72.414.1h-8.316z", fill: "#000" }), jsx("path", { d: "M47.036 16.022c0 3.99-3.209 7.222-7.168 7.222-3.96 0-7.169-3.233-7.169-7.222 0-3.989 3.21-7.222 7.169-7.222 3.96 0 7.168 3.233 7.168 7.222", fill: "#E30613" })] }) }), jsx("p", { className: styles.intro, children: jsx(FormattedMessage, { id: "Welcome to Sonic Equipment. Please choose your country and language below." }) }), jsxs("div", { className: styles.selects, children: [showCountry && (jsx(CountrySelect, { isRequired: true, countries: countries, countryNameInLanguageOfCountry: true, "data-test-selector": "clSelector_country", onCountryChange: onCountryChange, selectedCountry: currentCountry })), jsx(Select, { isRequired: true, "data-test-selector": "clSelector_language", label: t('Language'), onChange: value => setCurrentLanguage(currentCountry.languages.find(language => language.id === value) || currentLanguage), options: languageOptions, placeholder: t('Select a language'), selectedOption: currentLanguage.id, showPlaceholder: false, variant: "solid" })] })] }) }));
+        }, footer: jsx(Button, { withArrow: true, "data-test-selector": "clSelector_apply", type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }), hasCloseButton: isDismissable, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: () => onSubmit({ country: currentCountry, language: currentLanguage }), shouldCloseOnInteractOutside: isDismissable, title: "Country Selector", children: jsxs("div", { className: styles.content, children: [jsx("svg", { className: styles.logo, height: "32", viewBox: "0 0 134 32", width: "134", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { d: "M15.83 11.533c2.42 0 4.382 1.977 4.382 4.415 0 8.794-7.1 15.95-15.83 15.95C1.963 31.897 0 29.92 0 27.481c0-2.354 1.83-4.278 4.134-4.408l.249-.007c3.797 0 6.905-3.036 7.058-6.826l.006-.293c0-2.438 1.963-4.415 4.383-4.415zM15.83 0c2.42 0 4.383 1.977 4.383 4.415 0 2.355-1.83 4.279-4.134 4.409l-.249.007c-3.8 0-6.906 3.035-7.059 6.824l-.006.293c0 2.438-1.962 4.415-4.382 4.415S0 18.386 0 15.948C0 7.154 7.101 0 15.83 0zm8.208 16.022c0 8.794 7.101 15.95 15.83 15.95s15.83-7.156 15.83-15.95S48.597.074 39.868.074s-15.83 7.154-15.83 15.948zm8.765 0c0-3.924 3.169-7.118 7.065-7.118 3.895 0 7.065 3.194 7.065 7.118 0 3.926-3.17 7.119-7.065 7.119-3.896 0-7.065-3.193-7.065-7.12zm76.888-11.276c-6.173 6.217-6.173 16.335-.002 22.553 6.173 6.217 16.215 6.217 22.388 0a4.44 4.44 0 0 0 .001-6.244 4.359 4.359 0 0 0-6.003-.184l-.194.184a7.04 7.04 0 0 1-9.994 0c-2.753-2.775-2.753-7.29.002-10.065a7.036 7.036 0 0 1 9.751-.233l.24.231a4.36 4.36 0 0 0 6.198 0 4.44 4.44 0 0 0-.001-6.245c-6.173-6.217-16.215-6.216-22.386.003zm-17.162-.174v22.863c0 2.439 1.961 4.416 4.381 4.416 2.422 0 4.384-1.977 4.384-4.416V4.572c0-2.439-1.962-4.416-4.384-4.416-2.42 0-4.38 1.977-4.38 4.416zM64.1.1c-2.42 0-4.383 1.977-4.383 4.415v23.07c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V8.93h3.933c3.895 0 7.065 3.192 7.065 7.118v11.537c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V16.048C88.244 7.254 81.143.1 72.414.1h-8.316z", fill: "#000" }), jsx("path", { d: "M47.036 16.022c0 3.99-3.209 7.222-7.168 7.222-3.96 0-7.169-3.233-7.169-7.222 0-3.989 3.21-7.222 7.169-7.222 3.96 0 7.168 3.233 7.168 7.222", fill: "#E30613" })] }) }), jsx("p", { className: styles.intro, children: jsx(FormattedMessage, { id: "Welcome to Sonic Equipment. Please choose your country and language below." }) }), jsxs("div", { className: styles.selects, children: [showCountry && (jsx(CountrySelect, { isRequired: true, countries: countries, countryNameInLanguageOfCountry: true, "data-test-selector": "clSelector_country", onCountryChange: onCountryChange, selectedCountry: currentCountry })), jsx(Select, { isRequired: true, "data-test-selector": "clSelector_language", label: t('Language'), onChange: value => setCurrentLanguage(currentCountry.languages.find(language => language.id === value) || currentLanguage), options: languageOptions, placeholder: t('Select a language'), selectedOption: currentLanguage.id, showPlaceholder: false, variant: "solid" })] })] }) }));
 }
 
 export { CountrySelectorDialog };

package/dist/exports.d.ts

@@ -89,26 +89,28 @@ export * from './filters/multi-select/multi-select';
 export * from './filters/pagination/pagination';
 export * from './footer/connected-footer';
 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/password-field/password-field';
-export * from './forms/search-field/search-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';
-export * from './forms/textarea/textarea';
+export * from './forms/elements/checkbox/checkbox';
+export * from './forms/elements/color-checkbox/color-checkbox';
+export * from './forms/elements/field-error/field-error';
+export * from './forms/elements/input/input';
+export * from './forms/elements/label/label';
+export * from './forms/elements/select/select';
+export * from './forms/elements/switch/switch';
+export * from './forms/elements/textarea/textarea';
+export * from './forms/fields/checkbox-field/checkbox-field';
+export * from './forms/fields/number-field/number-field';
+export * from './forms/fields/password-field/password-field';
+export * from './forms/fields/search-field/search-field';
+export * from './forms/fields/select-field/select-field';
+export * from './forms/fields/switch-field/switch-field';
+export * from './forms/fields/text-field/password-reveal-toggle/password-reveal-toggle';
+export * from './forms/fields/text-field/text-field';
+export * from './forms/layout/form/form';
+export * from './forms/layout/form/form-field-layout';
+export * from './forms/layout/form/form-segment';
+export * from './forms/layout/form/form-segment-group';
+export * from './forms/partials/edit-address-form/edit-address-form';
+export * from './forms/partials/password-validation/password-validation';
 export * from './global-search/categories-grid/categories-grid';
 export * from './global-search/global-search';
 export * from './global-search/global-search-provider/global-search-provider';
@@ -170,6 +172,8 @@ export * from './lists/menu-list/menu-list-header';
 export * from './lists/menu-list/menu-list-item';
 export * from './lists/orderline-list/orderline-list';
 export * from './lists/product-overview-grid/product-overview-grid';
+export * from './lists/widget-grid/widget';
+export * from './lists/widget-grid/widget-grid';
 export * from './loading/blank-page-spacer';
 export * from './loading/loading-overlay';
 export * from './loading/progress-circle';
@@ -220,7 +224,7 @@ export * from './pages/checkout/payment-page/payment-page';
 export * from './pages/checkout/payment-page/payment-page-content';
 export * from './pages/checkout/payment-page/utils/parse-amount';
 export * from './pages/checkout/shipping-page/components/currency-change-dialog';
-export * from './pages/checkout/shipping-page/components/edit-address-form';
+export * from './pages/checkout/shipping-page/components/edit-checkout-bill-to-address-form';
 export * from './pages/checkout/shipping-page/components/readonly-address';
 export * from './pages/checkout/shipping-page/components/sonic-address';
 export * from './pages/checkout/shipping-page/hooks/use-patch-shipping-details';
@@ -234,6 +238,19 @@ export * from './pages/loading-page/loading-page';
 export * from './pages/my-sonic/actions/change-customer/change-customer';
 export * from './pages/my-sonic/actions/change-customer/change-customer-dialog';
 export * from './pages/my-sonic/actions/change-customer/connected-change-customer-dialog';
+export * from './pages/my-sonic/actions/change-password/change-password';
+export * from './pages/my-sonic/actions/change-password/change-password-dialog';
+export * from './pages/my-sonic/actions/change-password/connected-change-password-dialog';
+export * from './pages/my-sonic/actions/edit-bill-to-address/edit-bill-to-address';
+export * from './pages/my-sonic/actions/edit-user-info/connected-edit-user-info-dialog';
+export * from './pages/my-sonic/actions/edit-user-info/edit-user-info';
+export * from './pages/my-sonic/actions/edit-user-info/edit-user-info-dialog';
+export * from './pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout';
+export * from './pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-aside';
+export * from './pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-main';
+export * from './pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-page';
+export * from './pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-pre-aside';
+export * from './pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-title';
 export * from './pages/my-sonic/navigation/connected-my-sonic-navigation';
 export * from './pages/my-sonic/navigation/my-sonic-desktop-navigation';
 export * from './pages/my-sonic/navigation/my-sonic-mobile-navigation';
@@ -272,8 +289,10 @@ export * from './shared/api/bff/hooks/use-fetch-product-listing-page-data';
 export * from './shared/api/bff/hooks/use-fetch-recently-viewed-products';
 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/account/use-create-account';
+export * from './shared/api/storefront/hooks/account/use-create-guest-account';
+export * from './shared/api/storefront/hooks/account/use-fetch-current-account';
+export * from './shared/api/storefront/hooks/account/use-patch-current-account';
 export * from './shared/api/storefront/hooks/authentication/use-fetch-session';
 export * from './shared/api/storefront/hooks/authentication/use-invalidate-session';
 export * from './shared/api/storefront/hooks/authentication/use-is-authenticated';
@@ -321,6 +340,7 @@ export * from './shared/api/storefront/hooks/wishlist/use-create-wishlist';
 export * from './shared/api/storefront/hooks/wishlist/use-delete-wishlist-item-from-wishlist';
 export * from './shared/api/storefront/hooks/wishlist/use-fetch-all-wishlists-items';
 export * from './shared/api/storefront/hooks/wishlist/use-fetch-wishlists';
+export * from './shared/api/storefront/services/account-service';
 export * from './shared/api/storefront/services/authentication-service';
 export * from './shared/api/storefront/services/cart-service';
 export * from './shared/api/storefront/services/customer-service';

package/dist/filters/pagination/pagination.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { IconButton } from '../../buttons/icon-button/icon-button.js';
-import { NumberField } from '../../forms/number-field/number-field.js';
+import { NumberField } from '../../forms/fields/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';

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

@@ -0,0 +1,3 @@
+var styles = {"checkbox":"checkbox-module-QzsaZ","box":"checkbox-module-spG9E","checkmark":"checkbox-module-CQcmb","color-checkbox":"checkbox-module-CRPMG","label":"checkbox-module-bO3ou"};
+
+export { styles as default };

package/dist/forms/{field-error → elements/field-error}/field-error.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { FieldError as FieldError$1 } from 'react-aria-components';
 import clsx from 'clsx';
-import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import styles from './field-error.module.css.js';
 
 function FieldError({ children, className }) {

package/dist/forms/elements/field-error/field-error.module.css.js

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

package/dist/forms/elements/input/input.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"input-container":"input-module-uAOUY","solid":"input-module-7IaPE","outline":"input-module-axHOD","shadow-input":"input-module-2u4Pp","lg":"input-module-HFhUu","md":"input-module-DRosR","focus":"input-module-7iPV5","growing-input":"input-module-peOqs","inline-element":"input-module-Ai2f7","input":"input-module-JdwaH"};
+
+export { styles as default };

package/dist/forms/elements/label/label.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"label":"label-module-iLPRx","required":"label-module-8uUN-"};
+
+export { styles as default };

package/dist/forms/{select → elements/select}/select.d.ts

@@ -1,4 +1,5 @@
 export interface SelectProps<T> {
+    className?: string;
     'data-test-selector'?: string;
     defaultSelectedOption?: keyof T;
     icon?: React.ReactNode;
@@ -16,4 +17,4 @@ export interface SelectProps<T> {
     size?: 'sm' | 'md';
     variant?: 'outline' | 'solid';
 }
-export declare function Select<T extends Record<string, string>>({ 'data-test-selector': dataTestSelector, defaultSelectedOption, icon, isDisabled, isLoading, isRequired, label, name, onChange, options, placeholder, selectedOption, showLabel, showPlaceholder, size, variant, }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Select<T extends Record<string, string>>({ className, 'data-test-selector': dataTestSelector, defaultSelectedOption, icon, isDisabled, isLoading, isRequired, label, name, onChange, options, placeholder, selectedOption, showLabel, showPlaceholder, size, variant, }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/forms/{select → elements/select}/select.js

@@ -3,15 +3,15 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import { Select as Select$1, Button, SelectValue, Popover, ListBox, ListBoxSection, Header, ListBoxItem } from 'react-aria-components';
 import clsx from 'clsx';
-import { GlyphsChevronsSlimDownIcon } from '../../icons/glyph/glyphs-chevrons-slim-down-icon.js';
-import { StrokeCheckmarkIcon } from '../../icons/stroke/stroke-checkmark-icon.js';
-import { ProgressCircle } from '../../loading/progress-circle.js';
+import { GlyphsChevronsSlimDownIcon } from '../../../icons/glyph/glyphs-chevrons-slim-down-icon.js';
+import { StrokeCheckmarkIcon } from '../../../icons/stroke/stroke-checkmark-icon.js';
+import { ProgressCircle } from '../../../loading/progress-circle.js';
 import { FieldError } from '../field-error/field-error.js';
 import { Label } from '../label/label.js';
 import styles from './select.module.css.js';
 
 const defaultIcon = (jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles.chevron }));
-function Select({ 'data-test-selector': dataTestSelector, defaultSelectedOption, icon = defaultIcon, isDisabled = false, isLoading, isRequired = false, label, name, onChange, options, placeholder, selectedOption, showLabel = false, showPlaceholder = true, size = 'md', variant = 'outline', }) {
+function Select({ className, 'data-test-selector': dataTestSelector, defaultSelectedOption, icon = defaultIcon, isDisabled = false, isLoading, isRequired = false, label, name, onChange, options, placeholder, selectedOption, showLabel = false, showPlaceholder = true, size = 'md', variant = 'outline', }) {
     const selectRef = useRef(null);
     useEffect(() => {
         const updateWidth = () => {
@@ -28,7 +28,7 @@ function Select({ 'data-test-selector': dataTestSelector, defaultSelectedOption,
     }, []);
     return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles.select, styles[size], styles[variant], {
             [styles['loading']]: isLoading,
-        }), "data-test-selector": dataTestSelector, defaultSelectedKey: defaultSelectedOption === undefined
+        }, className), "data-test-selector": dataTestSelector, defaultSelectedKey: defaultSelectedOption === undefined
             ? undefined
             : String(defaultSelectedOption), isDisabled: isDisabled, isRequired: isRequired, name: name, onSelectionChange: selected => onChange?.(selected), placeholder: placeholder || label, selectedKey: selectedOption === undefined ? undefined : String(selectedOption), children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs(Button, { className: styles.button, children: [jsx(SelectValue, { "data-test-selector": "value" }), jsx("div", { className: styles['icon-wrapper'], children: isLoading ? jsx(ProgressCircle, { variant: "gray" }) : icon })] }), jsx(FieldError, {}), jsx(Popover, { ref: ref => 
                 // Workaround for react/react-aria #1513

package/dist/forms/elements/select/select.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"select":"select-module-IPU-m","sm":"select-module-ysEmc","md":"select-module-E62kG","button":"select-module-0kwVJ","icon-wrapper":"select-module-ptK6Z","focus":"select-module-cnFLz","solid":"select-module-Qq411","loading":"select-module-KuyIv","popover":"select-module-XFHrL","listbox":"select-module-K6TjK","header":"select-module-AUXLg","item":"select-module-MkKKi","check":"select-module-N7nUk"};
+
+export { styles as default };

package/dist/forms/elements/switch/switch.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"switch":"switch-module-C7eqt","indicator":"switch-module-UZop9","label":"switch-module-rX09b"};
+
+export { styles as default };

package/dist/forms/elements/textarea/textarea.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"input-container":"textarea-module-FEAEz","solid":"textarea-module-hHg5e","outline":"textarea-module-CEbPl","lg":"textarea-module-PKIWL","md":"textarea-module-27RUM"};
+
+export { styles as default };

package/dist/forms/{checkbox-field → fields/checkbox-field}/checkbox-field.d.ts

@@ -1,5 +1,5 @@
-import { CheckboxProps, CheckboxPropsBase } from '../checkbox/checkbox';
-import { ValidateFunction } from '../field-error/field-error';
+import { CheckboxProps, CheckboxPropsBase } from '../../elements/checkbox/checkbox';
+import { ValidateFunction } from '../../elements/field-error/field-error';
 export interface CheckboxFieldPropsBase extends CheckboxPropsBase {
     errorMessage?: string;
     info?: string;

package/dist/forms/{checkbox-field → fields/checkbox-field}/checkbox-field.js

@@ -2,10 +2,10 @@
 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 { InfoIconTooltip } from '../../../info-icon-tooltip/info-icon-tooltip.js';
+import { Checkbox } from '../../elements/checkbox/checkbox.js';
+import { FieldError } from '../../elements/field-error/field-error.js';
+import { FormFieldLayout } from '../../layout/form/form-field-layout.js';
 import styles from './checkbox-field.module.css.js';
 
 function CheckboxField(props) {

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

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

package/dist/forms/{number-field → fields/number-field}/number-field.d.ts

@@ -1,5 +1,5 @@
 import { FocusEvent, FormEventHandler } from 'react';
-import { ValidateFunction } from '../field-error/field-error';
+import { ValidateFunction } from '../../elements/field-error/field-error';
 interface NumberFieldProps {
     autoFocus?: boolean;
     autoGrow?: boolean;

package/dist/forms/{number-field → fields/number-field}/number-field.js

@@ -3,14 +3,14 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useState } from 'react';
 import { NumberField as NumberField$1, Button } from 'react-aria-components';
 import clsx from 'clsx';
-import { StrokeMinusIcon } from '../../icons/stroke/stroke-minus-icon.js';
-import { StrokePlusIcon } from '../../icons/stroke/stroke-plus-icon.js';
-import { StrokeTrashIcon } from '../../icons/stroke/stroke-trash-icon.js';
-import { InfoIconTooltip } from '../../info-icon-tooltip/info-icon-tooltip.js';
-import { FieldError } from '../field-error/field-error.js';
-import { FormFieldLayout } from '../form/form-field-layout.js';
-import { Input } from '../input/input.js';
-import { Label } from '../label/label.js';
+import { StrokeMinusIcon } from '../../../icons/stroke/stroke-minus-icon.js';
+import { StrokePlusIcon } from '../../../icons/stroke/stroke-plus-icon.js';
+import { StrokeTrashIcon } from '../../../icons/stroke/stroke-trash-icon.js';
+import { InfoIconTooltip } from '../../../info-icon-tooltip/info-icon-tooltip.js';
+import { FieldError } from '../../elements/field-error/field-error.js';
+import { Input } from '../../elements/input/input.js';
+import { Label } from '../../elements/label/label.js';
+import { FormFieldLayout } from '../../layout/form/form-field-layout.js';
 import styles from './number-field.module.css.js';
 
 const defaultFormatOptions = {

package/dist/forms/fields/number-field/number-field.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"number-field":"number-field-module-eFnKr","controls":"number-field-module-MAY-9","zoom-in-text":"number-field-module-QbNfS","control":"number-field-module-v1sB2"};
+
+export { styles as default };

package/dist/forms/{search-field → fields/search-field}/search-field.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { StrokeSearchIcon } from '../../icons/stroke/stroke-search-icon.js';
-import { ProgressCircle } from '../../loading/progress-circle.js';
-import { useDebouncedCallback } from '../../shared/hooks/use-debounced-callback.js';
+import { StrokeSearchIcon } from '../../../icons/stroke/stroke-search-icon.js';
+import { ProgressCircle } from '../../../loading/progress-circle.js';
+import { useDebouncedCallback } from '../../../shared/hooks/use-debounced-callback.js';
 import { TextField } from '../text-field/text-field.js';
 
 function SearchField({ isDebounced = false, isLoading = false, onChange, value: _value, ...props }) {

package/dist/forms/{select-field → fields/select-field}/select-field.d.ts

@@ -1,4 +1,4 @@
-import { ValidateFunction } from '../field-error/field-error';
+import { ValidateFunction } from '../../elements/field-error/field-error';
 interface SelectFieldPropsBase {
     'data-test-selector'?: string;
     label: string;

package/dist/forms/{select-field → fields/select-field}/select-field.js

@@ -3,13 +3,13 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { Select, Button, SelectValue, Popover, ListBox, ListBoxSection, Header, ListBoxItem } from 'react-aria-components';
 import clsx from 'clsx';
-import { GlyphsChevronsSlimDownIcon } from '../../icons/glyph/glyphs-chevrons-slim-down-icon.js';
-import { StrokeCheckmarkIcon } from '../../icons/stroke/stroke-checkmark-icon.js';
-import { InfoIconTooltip } from '../../info-icon-tooltip/info-icon-tooltip.js';
-import { ProgressCircle } from '../../loading/progress-circle.js';
-import { FieldError } from '../field-error/field-error.js';
-import { FormFieldLayout } from '../form/form-field-layout.js';
-import { Label } from '../label/label.js';
+import { GlyphsChevronsSlimDownIcon } from '../../../icons/glyph/glyphs-chevrons-slim-down-icon.js';
+import { StrokeCheckmarkIcon } from '../../../icons/stroke/stroke-checkmark-icon.js';
+import { InfoIconTooltip } from '../../../info-icon-tooltip/info-icon-tooltip.js';
+import { ProgressCircle } from '../../../loading/progress-circle.js';
+import { FieldError } from '../../elements/field-error/field-error.js';
+import { Label } from '../../elements/label/label.js';
+import { FormFieldLayout } from '../../layout/form/form-field-layout.js';
 import styles from './select-field.module.css.js';
 
 function SelectField({ className, 'data-test-selector': dataTestSelector, defaultSelectedOption, info, isDisabled, isInvalid, isLoading, isRequired, label, name, onChange, options, placeholder, selectedOption, showLabel = true, showPlaceholder, size = 'lg', variant = 'outline', }) {

package/dist/forms/fields/select-field/select-field.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"select-field":"select-field-module-T07fb","md":"select-field-module-x-dtL","solid":"select-field-module-jfk-G","loading":"select-field-module-NyDa0","button":"select-field-module-uGX30","value":"select-field-module-z-6Ym","icon":"select-field-module-Njvvb","popover":"select-field-module-tbhPg","listbox":"select-field-module-Rwf0R","header":"select-field-module-KDZmc","item":"select-field-module-u3hoe"};
+
+export { styles as default };

package/dist/forms/{switch-field → fields/switch-field}/switch-field.d.ts

@@ -1,5 +1,5 @@
-import { ValidateFunction } from '../field-error/field-error';
-import { SwitchProps, SwitchPropsBase } from '../switch/switch';
+import { ValidateFunction } from '../../elements/field-error/field-error';
+import { SwitchProps, SwitchPropsBase } from '../../elements/switch/switch';
 export interface SwitchFieldPropsBase extends SwitchPropsBase {
     errorMessage?: string;
     info?: string;

package/dist/forms/{switch-field → fields/switch-field}/switch-field.js

@@ -2,10 +2,10 @@
 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 { FieldError } from '../field-error/field-error.js';
-import { FormFieldLayout } from '../form/form-field-layout.js';
-import { Switch } from '../switch/switch.js';
+import { InfoIconTooltip } from '../../../info-icon-tooltip/info-icon-tooltip.js';
+import { FieldError } from '../../elements/field-error/field-error.js';
+import { Switch } from '../../elements/switch/switch.js';
+import { FormFieldLayout } from '../../layout/form/form-field-layout.js';
 import styles from './switch-field.module.css.js';
 
 function SwitchField(props) {

package/dist/forms/fields/switch-field/switch-field.module.css.js

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

package/dist/forms/{text-field → fields/text-field}/password-reveal-toggle/password-reveal-toggle.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Checkbox } from 'react-aria-components';
-import { StrokeDehashedIcon } from '../../../icons/stroke/stroke-dehashed-icon.js';
-import { StrokeHashedIcon } from '../../../icons/stroke/stroke-hashed-icon.js';
-import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { StrokeDehashedIcon } from '../../../../icons/stroke/stroke-dehashed-icon.js';
+import { StrokeHashedIcon } from '../../../../icons/stroke/stroke-hashed-icon.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import styles from './password-reveal-toggle.module.css.js';
 
 /**

package/dist/forms/{text-field → fields/text-field}/password-reveal-toggle/password-reveal-toggle.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"password-reveal-toggle":"password-reveal-toggle-module-bGH6I"};
+var styles = {"password-reveal-toggle":"password-reveal-toggle-module-cW16B"};
 
 export { styles as default };