@sonic-equipment/ui 185.0.0 → 186.0.0

package/dist/index.js

@@ -93,27 +93,28 @@ export { MultiSelect } from './filters/multi-select/multi-select.js';
 export { Pagination } from './filters/pagination/pagination.js';
 export { ConnectedFooter } from './footer/connected-footer.js';
 export { Footer } from './footer/footer.js';
-export { CheckboxField } from './forms/checkbox-field/checkbox-field.js';
-export { Checkbox } from './forms/checkbox/checkbox.js';
-export { ColorCheckbox } from './forms/color-checkbox/color-checkbox.js';
-export { FieldError } from './forms/field-error/field-error.js';
-export { Form } from './forms/form/form.js';
-export { FormFieldLayout } from './forms/form/form-field-layout.js';
-export { FormSegment } from './forms/form/form-segment.js';
-export { FormSegmentGroup } from './forms/form/form-segment-group.js';
-export { Input } from './forms/input/input.js';
-export { Label } from './forms/label/label.js';
-export { NumberField } from './forms/number-field/number-field.js';
-export { PasswordField } from './forms/password-field/password-field.js';
-export { PasswordValidation } from './forms/password-validation/password-validation.js';
-export { SearchField } from './forms/search-field/search-field.js';
-export { SelectField } from './forms/select-field/select-field.js';
-export { Select } from './forms/select/select.js';
-export { SwitchField } from './forms/switch-field/switch-field.js';
-export { Switch } from './forms/switch/switch.js';
-export { PasswordRevealToggle } from './forms/text-field/password-reveal-toggle/password-reveal-toggle.js';
-export { TextField } from './forms/text-field/text-field.js';
-export { TextArea } from './forms/textarea/textarea.js';
+export { Checkbox } from './forms/elements/checkbox/checkbox.js';
+export { ColorCheckbox } from './forms/elements/color-checkbox/color-checkbox.js';
+export { FieldError } from './forms/elements/field-error/field-error.js';
+export { Input } from './forms/elements/input/input.js';
+export { Label } from './forms/elements/label/label.js';
+export { Select } from './forms/elements/select/select.js';
+export { Switch } from './forms/elements/switch/switch.js';
+export { TextArea } from './forms/elements/textarea/textarea.js';
+export { CheckboxField } from './forms/fields/checkbox-field/checkbox-field.js';
+export { NumberField } from './forms/fields/number-field/number-field.js';
+export { PasswordField } from './forms/fields/password-field/password-field.js';
+export { SearchField } from './forms/fields/search-field/search-field.js';
+export { SelectField } from './forms/fields/select-field/select-field.js';
+export { SwitchField } from './forms/fields/switch-field/switch-field.js';
+export { PasswordRevealToggle } from './forms/fields/text-field/password-reveal-toggle/password-reveal-toggle.js';
+export { TextField } from './forms/fields/text-field/text-field.js';
+export { Form } from './forms/layout/form/form.js';
+export { FormFieldLayout } from './forms/layout/form/form-field-layout.js';
+export { FormSegment } from './forms/layout/form/form-segment.js';
+export { FormSegmentGroup } from './forms/layout/form/form-segment-group.js';
+export { EditAddressForm } from './forms/partials/edit-address-form/edit-address-form.js';
+export { PasswordValidation } from './forms/partials/password-validation/password-validation.js';
 export { CategoriesGrid } from './global-search/categories-grid/categories-grid.js';
 export { GlobalSearch, SearchRoot } from './global-search/global-search.js';
 export { GlobalSearchProvider } from './global-search/global-search-provider/global-search-provider.js';
@@ -225,7 +226,7 @@ export { PaymentPage } from './pages/checkout/payment-page/payment-page.js';
 export { PaymentPageContent } from './pages/checkout/payment-page/payment-page-content.js';
 export { parseAmount } from './pages/checkout/payment-page/utils/parse-amount.js';
 export { CurrencyChangeDialog } from './pages/checkout/shipping-page/components/currency-change-dialog.js';
-export { EDIT_ADDRESS_FORM_ID, EditAddressesForm } from './pages/checkout/shipping-page/components/edit-address-form.js';
+export { EDIT_ADDRESS_FORM_ID, EditCheckoutBillToAddressForm } from './pages/checkout/shipping-page/components/edit-checkout-bill-to-address-form.js';
 export { ReadOnlyAddresses } from './pages/checkout/shipping-page/components/readonly-address.js';
 export { SonicAddress } from './pages/checkout/shipping-page/components/sonic-address.js';
 export { usePatchShippingDetails } from './pages/checkout/shipping-page/hooks/use-patch-shipping-details.js';
@@ -242,6 +243,7 @@ export { ConnectedChangeCustomerDialog } from './pages/my-sonic/actions/change-c
 export { ChangePassword } from './pages/my-sonic/actions/change-password/change-password.js';
 export { ChangePasswordDialog } from './pages/my-sonic/actions/change-password/change-password-dialog.js';
 export { ConnectedChangePasswordDialog } from './pages/my-sonic/actions/change-password/connected-change-password-dialog.js';
+export { EditBillToAddress } from './pages/my-sonic/actions/edit-bill-to-address/edit-bill-to-address.js';
 export { ConnectedEditUserInfoDialog } from './pages/my-sonic/actions/edit-user-info/connected-edit-user-info-dialog.js';
 export { EditUserInfo } from './pages/my-sonic/actions/edit-user-info/edit-user-info.js';
 export { EditUserInfoDialog } from './pages/my-sonic/actions/edit-user-info/edit-user-info-dialog.js';

package/dist/intl/formatted-message.js

@@ -1,6 +1,10 @@
 "use client";
 import { useFormattedMessage } from './use-formatted-message.js';
 
-const FormattedMessage = ({ fallbackValue, id, optional, replacementValues, }) => useFormattedMessage()(id, { fallbackValue, optional, replacementValues });
+const FormattedMessage = ({ fallbackValue, id, optional, replacementValues, }) => useFormattedMessage()(id, {
+    fallbackValue,
+    optional,
+    replacementValues,
+});
 
 export { FormattedMessage };

package/dist/intl/types.d.ts

@@ -14,9 +14,14 @@ export interface FormattedMessageOptions {
     optional?: boolean;
     replacementValues?: Record<string, string>;
 }
-export interface FormattedMessageProps extends FormattedMessageOptions {
+export interface FormattedMessageWithKnownTranslationIdProps extends FormattedMessageOptions {
     id: TranslationId;
 }
+export interface FormattedMessageWithUnknownTranslationIdProps extends FormattedMessageOptions {
+    force: true;
+    id: string;
+}
+export type FormattedMessageProps = FormattedMessageWithKnownTranslationIdProps | FormattedMessageWithUnknownTranslationIdProps;
 export interface FormattedMessageFunction {
     (id: TranslationId, options?: {
         fallbackValue?: string;

package/dist/modals/dialog/dialog.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { OnSubmitHandler, ValidationErrors } from '../../forms/form/form';
+import { OnSubmitHandler, ValidationErrors } from '../../forms/layout/form/form';
 import { ModalProps } from '../modal/modal';
 interface DialogProps extends Omit<ModalProps, 'children' | 'className'> {
     allowClose?: boolean;

package/dist/modals/dialog/dialog.js

@@ -4,7 +4,7 @@ import { Dialog as Dialog$1 } from 'react-aria-components';
 import clsx from 'clsx';
 import { Button } from '../../buttons/button/button.js';
 import { IconButton } from '../../buttons/icon-button/icon-button.js';
-import { Form } from '../../forms/form/form.js';
+import { Form } from '../../forms/layout/form/form.js';
 import { StrokeCloseboxIcon } from '../../icons/stroke/stroke-closebox-icon.js';
 import { FormattedMessage } from '../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';

package/dist/modals/favorite/add-to-favorite-dialog.js

@@ -2,8 +2,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { Button } from '../../buttons/button/button.js';
-import { Select } from '../../forms/select/select.js';
-import { TextField } from '../../forms/text-field/text-field.js';
+import { Select } from '../../forms/elements/select/select.js';
+import { TextField } from '../../forms/fields/text-field/text-field.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { ProgressCircle } from '../../loading/progress-circle.js';
 import { useCreateWishList } from '../../shared/api/storefront/hooks/wishlist/use-create-wishlist.js';

package/dist/modals/recover-password/recover-password-dialog.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import { Button } from '../../buttons/button/button.js';
-import { TextField } from '../../forms/text-field/text-field.js';
+import { TextField } from '../../forms/fields/text-field/text-field.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { Message } from '../../message/message.js';
 import { useRecoverPassword } from '../../shared/api/storefront/hooks/authentication/use-recover-password.js';

package/dist/pages/account/components/create-account-form/create-account-form.js

@@ -4,12 +4,12 @@ import { useState } from 'react';
 import { Button } from '../../../../buttons/button/button.js';
 import { CountrySelect } from '../../../../country-select/country-select.js';
 import { useCountries } from '../../../../country-select/hooks/use-countries.js';
-import { Form } from '../../../../forms/form/form.js';
-import { FormSegment } from '../../../../forms/form/form-segment.js';
-import { FormSegmentGroup } from '../../../../forms/form/form-segment-group.js';
-import { PasswordValidation } from '../../../../forms/password-validation/password-validation.js';
-import { SwitchField } from '../../../../forms/switch-field/switch-field.js';
-import { TextField } from '../../../../forms/text-field/text-field.js';
+import { SwitchField } from '../../../../forms/fields/switch-field/switch-field.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
+import { Form } from '../../../../forms/layout/form/form.js';
+import { FormSegment } from '../../../../forms/layout/form/form-segment.js';
+import { FormSegmentGroup } from '../../../../forms/layout/form/form-segment-group.js';
+import { PasswordValidation } from '../../../../forms/partials/password-validation/password-validation.js';
 import { isCountryCode } from '../../../../intl/types.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { validateEmail } from '../../../../shared/model/address.js';
@@ -33,7 +33,7 @@ function CreateAccountForm({ errorType, isDisabled: _isDisabled = false, isPendi
         const firstName = formData.get('firstName')?.toString();
         const lastName = formData.get('lastName')?.toString() || '';
         const email = formData.get('email')?.toString();
-        const password = formData.get('password')?.toString();
+        const password = formData.get('new-password')?.toString();
         const isSubscribed = Boolean(formData.get('isSubscribed'));
         const isPrivateAccount = Boolean(formData.get('isPrivateAccount'));
         const countryId = formData.get('countrySelect')?.toString();

package/dist/pages/account/components/sign-in-form/sign-in-form.js

@@ -2,12 +2,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Button } from '../../../../buttons/button/button.js';
 import { Link } from '../../../../buttons/link/link.js';
-import { Form } from '../../../../forms/form/form.js';
-import { FormSegment } from '../../../../forms/form/form-segment.js';
-import { FormSegmentGroup } from '../../../../forms/form/form-segment-group.js';
-import { PasswordField } from '../../../../forms/password-field/password-field.js';
-import { SwitchField } from '../../../../forms/switch-field/switch-field.js';
-import { TextField } from '../../../../forms/text-field/text-field.js';
+import { PasswordField } from '../../../../forms/fields/password-field/password-field.js';
+import { SwitchField } from '../../../../forms/fields/switch-field/switch-field.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
+import { Form } from '../../../../forms/layout/form/form.js';
+import { FormSegment } from '../../../../forms/layout/form/form-segment.js';
+import { FormSegmentGroup } from '../../../../forms/layout/form/form-segment-group.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { validateEmail } from '../../../../shared/model/address.js';
 import { voidFunction } from '../../../../shared/model/defaults.js';

package/dist/pages/checkout/components/billing-and-invoice-information.d.ts

@@ -1,7 +1,7 @@
-import { AddressType } from '../../../shared/model/address';
+import { Address } from '../../../shared/model/address';
 interface BillingAndInvoiceInformationProps {
-    billToAddress: AddressType;
-    shipToAddress: AddressType;
+    billToAddress: Address | undefined | null;
+    shipToAddress: Address | undefined | null;
 }
 export declare function BillingAndInvoiceInformation({ billToAddress, shipToAddress, }: BillingAndInvoiceInformationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/pages/checkout/components/billing-and-invoice-information.js

@@ -7,7 +7,7 @@ import styles from './billing-and-invoice-information.module.css.js';
 
 function BillingAndInvoiceInformation({ billToAddress, shipToAddress, }) {
     const t = useFormattedMessage();
-    return (jsxs("div", { className: styles['billing-and-invoice-information'], children: [jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "billing-address", label: t('Billing address'), value: jsx(AddressInfoDisplay, { address: billToAddress, "data-test-selector": "orderConfirmationBillingInformation" }) }) }), jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "shipping-address", label: t('Shipping address'), value: jsx(AddressInfoDisplay, { address: shipToAddress, "data-test-selector": "orderConfirmationShippingInformation" }) }) })] }));
+    return (jsxs("div", { className: styles['billing-and-invoice-information'], children: [billToAddress && (jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "billing-address", label: t('Billing address'), value: jsx(AddressInfoDisplay, { address: billToAddress, "data-test-selector": "orderConfirmationBillingInformation" }) }) })), shipToAddress && (jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "shipping-address", label: t('Shipping address'), value: jsx(AddressInfoDisplay, { address: shipToAddress, "data-test-selector": "orderConfirmationShippingInformation" }) }) }))] }));
 }
 
 export { BillingAndInvoiceInformation };

package/dist/pages/checkout/order-confirmation-page/order-confirmation-page-content.js

@@ -56,26 +56,32 @@ function OrderConfirmationPageContent({ cart, }) {
                 secondary: (jsxs(Fragment, { children: [cart.canSaveOrder && (jsx(Button, { color: "secondary", onClick: () => {
                                 saveCartForLater.mutate({ cart });
                             }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })), jsx(PrintButton, {})] })),
-            }, overview: jsx(CartTotals, { currencyCode: currencyCode, fulfillmentMethod: cart.fulfillmentMethod, orderNumber: cart.orderNumber, shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: jsxs("div", { children: [jsx(CheckoutPageSection, { hasBorder: false, title: t('General'), children: jsx(CheckoutPageSectionContent, { children: jsxs("div", { className: styles['general-order-info'], children: [cart.orderDate && (jsx(InfoDisplay, { id: "order-date", label: t('Order date'), value: formatDateToLocaleString(new Date(cart.orderDate), cultureCode) })), cart.requestedDeliveryDateDisplay && (jsx(InfoDisplay, { id: "requested-delivery-date", label: t('Requested delivery date'), value: formatDateToLocaleString(new Date(cart.requestedDeliveryDateDisplay.toString()), cultureCode) })), cart.poNumber && (jsx(InfoDisplay, { id: "po-number", label: t('PO Number'), value: cart.poNumber }))] }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('Billing and shipping information'), children: jsx(CheckoutPageSectionContent, { children: jsx(BillingAndInvoiceInformation, { billToAddress: {
-                                    address1: cart.billTo?.address1,
-                                    address2: cart.billTo?.address2,
-                                    address3: cart.billTo?.address3,
-                                    city: cart.billTo?.city,
-                                    companyName: cart.billTo?.companyName,
-                                    country: cart.billTo?.country?.name,
-                                    email: cart.billTo?.email,
-                                    phone: cart.billTo?.phone,
-                                    postalCode: cart.billTo?.postalCode,
-                                }, shipToAddress: {
-                                    address1: cart.shipTo?.address1,
-                                    address2: cart.shipTo?.address2,
-                                    address3: cart.shipTo?.address3,
-                                    city: cart.shipTo?.city,
-                                    companyName: cart.shipTo?.companyName,
-                                    country: cart.shipTo?.country?.name,
-                                    email: cart.shipTo?.email,
-                                    phone: cart.shipTo?.phone,
-                                    postalCode: cart.shipTo?.postalCode,
+            }, overview: jsx(CartTotals, { currencyCode: currencyCode, fulfillmentMethod: cart.fulfillmentMethod, orderNumber: cart.orderNumber, shippingCost: cart.shippingAndHandling, subtotal: cart.orderSubTotal, tax: cart.totalTax, total: cart.orderGrandTotal, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: jsxs("div", { children: [jsx(CheckoutPageSection, { hasBorder: false, title: t('General'), children: jsx(CheckoutPageSectionContent, { children: jsxs("div", { className: styles['general-order-info'], children: [cart.orderDate && (jsx(InfoDisplay, { id: "order-date", label: t('Order date'), value: formatDateToLocaleString(new Date(cart.orderDate), cultureCode) })), cart.requestedDeliveryDateDisplay && (jsx(InfoDisplay, { id: "requested-delivery-date", label: t('Requested delivery date'), value: formatDateToLocaleString(new Date(cart.requestedDeliveryDateDisplay.toString()), cultureCode) })), cart.poNumber && (jsx(InfoDisplay, { id: "po-number", label: t('PO Number'), value: cart.poNumber }))] }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('Billing and shipping information'), children: jsx(CheckoutPageSectionContent, { children: jsx(BillingAndInvoiceInformation, { billToAddress: cart.billTo && {
+                                    address1: cart.billTo.address1,
+                                    address2: cart.billTo.address2,
+                                    address3: cart.billTo.address3,
+                                    attention: '',
+                                    city: cart.billTo.city,
+                                    companyName: cart.billTo.companyName,
+                                    country: cart.billTo.country,
+                                    email: cart.billTo.email,
+                                    firstName: '',
+                                    lastName: '',
+                                    phone: cart.billTo.phone,
+                                    postalCode: cart.billTo.postalCode,
+                                }, shipToAddress: cart.shipTo && {
+                                    address1: cart.shipTo.address1,
+                                    address2: cart.shipTo.address2,
+                                    address3: cart.shipTo.address3,
+                                    attention: '',
+                                    city: cart.shipTo.city,
+                                    companyName: cart.shipTo.companyName,
+                                    country: cart.shipTo.country,
+                                    email: cart.shipTo.email,
+                                    firstName: '',
+                                    lastName: '',
+                                    phone: cart.shipTo.phone,
+                                    postalCode: cart.shipTo.postalCode,
                                 } }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('Order'), children: jsx(CheckoutPageSectionContent, { stretch: true, children: jsx(OrderLineList, { children: cart.cartLines?.map(cartLine => (jsx(OrderLineCard, { deliveryDate: undefined, href: cartLine.productUri, image: {
                                         fit: 'contain',
                                         image: {

package/dist/pages/checkout/payment-page/components/payment.js

@@ -6,9 +6,9 @@ import { useAlgoliaInsights } from '../../../../algolia/use-algolia-insights.js'
 import { Accordion } from '../../../../collapsables/accordion/accordion.js';
 import { AccordionItem } from '../../../../collapsables/accordion/accordion-item.js';
 import { InfoDisplay } from '../../../../display/info-display/info-display.js';
-import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
-import { Select } from '../../../../forms/select/select.js';
-import { TextField } from '../../../../forms/text-field/text-field.js';
+import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
+import { Select } from '../../../../forms/elements/select/select.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
 import { InfoIconTooltip } from '../../../../info-icon-tooltip/info-icon-tooltip.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { isCountryCode } from '../../../../intl/types.js';
@@ -321,26 +321,32 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
                 /* eslint-disable ssr-friendly/no-dom-globals-in-react-fc */
                 typeof window === 'undefined'
                     ? ''
-                    : `${window.location.pathname}${window.location.search}` })), Boolean(paymentError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An error occurred while processing your payment. Please try again." }) })), jsx(InfoDisplay, { id: "shipping-and-invoice-information", label: t('Billing and shipping address'), value: jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { "data-test-selector": "billingAndShippingInformation", id: "invoice-and-shipping", isDisabled: isDisabled, title: t('Billing and shipping information'), children: jsx(BillingAndInvoiceInformation, { billToAddress: {
-                                address1: cart.billTo?.address1,
-                                address2: cart.billTo?.address2,
-                                address3: cart.billTo?.address3,
-                                city: cart.billTo?.city,
-                                companyName: cart.billTo?.companyName,
-                                country: cart.billTo?.country?.name,
-                                email: cart.billTo?.email,
-                                phone: cart.billTo?.phone,
-                                postalCode: cart.billTo?.postalCode,
-                            }, shipToAddress: {
-                                address1: cart.shipTo?.address1,
-                                address2: cart.shipTo?.address2,
-                                address3: cart.shipTo?.address3,
-                                city: cart.shipTo?.city,
-                                companyName: cart.shipTo?.companyName,
-                                country: cart.shipTo?.country?.name,
-                                email: cart.shipTo?.email,
-                                phone: cart.shipTo?.phone,
-                                postalCode: cart.shipTo?.postalCode,
+                    : `${window.location.pathname}${window.location.search}` })), Boolean(paymentError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An error occurred while processing your payment. Please try again." }) })), jsx(InfoDisplay, { id: "shipping-and-invoice-information", label: t('Billing and shipping address'), value: jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { "data-test-selector": "billingAndShippingInformation", id: "invoice-and-shipping", isDisabled: isDisabled, title: t('Billing and shipping information'), children: jsx(BillingAndInvoiceInformation, { billToAddress: cart.billTo && {
+                                address1: cart.billTo.address1,
+                                address2: cart.billTo.address2,
+                                address3: cart.billTo.address3,
+                                attention: '',
+                                city: cart.billTo.city,
+                                companyName: cart.billTo.companyName,
+                                country: cart.billTo.country,
+                                email: cart.billTo.email,
+                                firstName: '',
+                                lastName: '',
+                                phone: cart.billTo.phone,
+                                postalCode: cart.billTo.postalCode,
+                            }, shipToAddress: cart.shipTo && {
+                                address1: cart.shipTo.address1,
+                                address2: cart.shipTo.address2,
+                                address3: cart.shipTo.address3,
+                                attention: '',
+                                city: cart.shipTo.city,
+                                companyName: cart.shipTo.companyName,
+                                country: cart.shipTo.country,
+                                email: cart.shipTo.email,
+                                firstName: '',
+                                lastName: '',
+                                phone: cart.shipTo.phone,
+                                postalCode: cart.shipTo.postalCode,
                             } }) }) }) })] }));
 }
 

package/dist/pages/checkout/shipping-page/components/{edit-address-form.d.ts → edit-checkout-bill-to-address-form.d.ts}

@@ -1,28 +1,14 @@
 import { BillToModel } from '../../../../shared/api/storefront/model/storefront.model';
+import { ValidAddress } from '../../../../shared/model/address';
 import { Country } from '../../../../shared/model/countries-languages';
 export declare const EDIT_ADDRESS_FORM_ID = "billToForm";
-export interface Address {
-    address1: string;
-    address2: string;
-    address3: string;
-    attention: string;
-    city: string;
-    companyName: string;
-    country: Country;
-    email: string;
-    firstName: string;
-    lastName: string;
-    phone: string;
-    postalCode: string;
-}
 export interface EditAddressesFormData {
-    address: Address;
+    address: ValidAddress;
     notes: string | undefined;
 }
-export declare function EditAddressesForm({ billTo, countries, currentCountry, isLoading, isPickup, onSubmit, }: {
+export declare function EditCheckoutBillToAddressForm({ billTo, countries, isLoading, isPickup, onSubmit, }: {
     billTo: BillToModel | undefined | null;
     countries: Country[];
-    currentCountry: Country | undefined;
     isLoading: boolean;
     isPickup: boolean;
     onSubmit: (event: EditAddressesFormData) => void;

package/dist/pages/checkout/shipping-page/components/edit-checkout-bill-to-address-form.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Form } from 'react-aria-components';
+import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
+import { EditAddressForm } from '../../../../forms/partials/edit-address-form/edit-address-form.js';
+import { InfoIconTooltip } from '../../../../info-icon-tooltip/info-icon-tooltip.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { useFetchCurrentCart } from '../../../../shared/api/storefront/hooks/cart/use-fetch-current-cart.js';
+import { CheckoutPageSection } from '../../layouts/checkout-page-layout/components/checkout-page-section.js';
+import { CheckoutPageSectionContent } from '../../layouts/checkout-page-layout/components/checkout-page-section-content.js';
+import { SonicAddress } from './sonic-address.js';
+import styles from './edit-checkout-bill-to-address-form.module.css.js';
+
+const EDIT_ADDRESS_FORM_ID = 'billToForm';
+function EditCheckoutBillToAddressForm({ billTo, countries, isLoading, isPickup, onSubmit, }) {
+    const t = useFormattedMessage();
+    const { data: cart } = useFetchCurrentCart();
+    return (jsxs(Fragment, { children: [jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: jsx(CheckoutPageSectionContent, { children: jsxs(Form, { className: styles.form, "data-test-selector": "billToAddressForm", id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
+                            e.preventDefault();
+                            const formData = new FormData(e.currentTarget);
+                            const countryFormValue = formData.get('countrySelect')?.toString();
+                            const country = countries.find(country => country.id === countryFormValue);
+                            if (!country)
+                                throw new Error(`Country not found ${formData.get('country')}`);
+                            onSubmit({
+                                address: {
+                                    address1: formData.get('address1')?.toString() || '',
+                                    address2: formData.get('address2')?.toString() || '',
+                                    address3: formData.get('address3')?.toString() || '',
+                                    attention: formData.get('attention')?.toString() || '',
+                                    city: formData.get('city')?.toString() || '',
+                                    companyName: formData.get('companyName')?.toString() || '',
+                                    country,
+                                    email: formData.get('email')?.toString() || '',
+                                    firstName: formData.get('firstName')?.toString() || '',
+                                    lastName: formData.get('lastName')?.toString() || '',
+                                    phone: formData.get('phone')?.toString() || '',
+                                    postalCode: formData.get('postalCode')?.toString() || '',
+                                },
+                                notes: cart?.notes === formData.get('notes')
+                                    ? undefined
+                                    : formData.get('notes')?.toString() || '',
+                            });
+                        }, children: [jsx(EditAddressForm, { address: billTo, countries: countries, isLoading: isLoading }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: cart?.notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: jsx(CheckoutPageSectionContent, { children: jsx(Fragment, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })) }) }) })] }));
+}
+
+export { EDIT_ADDRESS_FORM_ID, EditCheckoutBillToAddressForm };

package/dist/pages/checkout/shipping-page/components/edit-checkout-bill-to-address-form.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"form":"edit-checkout-bill-to-address-form-module-UWk3T","span-2":"edit-checkout-bill-to-address-form-module-ajfl4","use-invoice-checkbox":"edit-checkout-bill-to-address-form-module-jumWh"};
+
+export { styles as default };

package/dist/pages/checkout/shipping-page/components/readonly-address.js

@@ -3,15 +3,15 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Form } from 'react-aria-components';
 import { AddressInfoDisplay } from '../../../../address-info-display/address-info-display.js';
 import { Link } from '../../../../buttons/link/link.js';
-import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
-import { TextField } from '../../../../forms/text-field/text-field.js';
+import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { PATHS } from '../../../paths.js';
 import { CheckoutPageSection } from '../../layouts/checkout-page-layout/components/checkout-page-section.js';
 import { CheckoutPageSectionContent } from '../../layouts/checkout-page-layout/components/checkout-page-section-content.js';
 import { CheckoutPageSectionLink } from '../../layouts/checkout-page-layout/components/checkout-page-section-link.js';
-import { EDIT_ADDRESS_FORM_ID } from './edit-address-form.js';
+import { EDIT_ADDRESS_FORM_ID } from './edit-checkout-bill-to-address-form.js';
 import { SonicAddress } from './sonic-address.js';
 import styles from './readonly-address.module.css.js';
 
@@ -29,9 +29,10 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
                                     address1: billTo.address1,
                                     address2: billTo.address2,
                                     address3: billTo.address3,
+                                    attention: billTo.attention,
                                     city: billTo.city,
                                     companyName: billTo.companyName,
-                                    country: billTo.country?.name,
+                                    country: billTo.country,
                                     email: billTo.email,
                                     firstName: billTo.firstName,
                                     lastName: billTo.lastName,
@@ -41,9 +42,10 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
                                         address1: shipTo.address1,
                                         address2: shipTo.address2,
                                         address3: shipTo.address3,
+                                        attention: shipTo.attention,
                                         city: shipTo.city,
                                         companyName: shipTo.companyName,
-                                        country: shipTo.country?.name,
+                                        country: shipTo.country,
                                         email: shipTo.email,
                                         firstName: shipTo.firstName,
                                         lastName: shipTo.lastName,

package/dist/pages/checkout/shipping-page/shipping-page-content.js

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Button } from '../../../buttons/button/button.js';
 import { CartTotals } from '../../../cart-totals/cart-totals.js';
 import { CartTotalsSummary } from '../../../cart-totals/cart-totals-summary.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 { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
@@ -12,7 +12,7 @@ import { PATHS } from '../../paths.js';
 import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
 import { CheckoutPageSection } from '../layouts/checkout-page-layout/components/checkout-page-section.js';
 import { CheckoutPageSectionContent } from '../layouts/checkout-page-layout/components/checkout-page-section-content.js';
-import { EDIT_ADDRESS_FORM_ID } from './components/edit-address-form.js';
+import { EDIT_ADDRESS_FORM_ID } from './components/edit-checkout-bill-to-address-form.js';
 import styles from './shipping-page.module.css.js';
 
 function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isGuest, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }) {

package/dist/pages/checkout/shipping-page/shipping-page.js

@@ -14,7 +14,7 @@ import { ErrorPage } from '../../error-page/error-page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
 import { PATHS } from '../../paths.js';
 import { CurrencyChangeDialog } from './components/currency-change-dialog.js';
-import { EditAddressesForm } from './components/edit-address-form.js';
+import { EditCheckoutBillToAddressForm } from './components/edit-checkout-bill-to-address-form.js';
 import { ReadOnlyAddresses } from './components/readonly-address.js';
 import { usePatchShippingDetails } from './hooks/use-patch-shipping-details.js';
 import { ShippingPageContent } from './shipping-page-content.js';
@@ -123,7 +123,7 @@ function ShippingPage() {
     return (jsx(ShippingPageContent, { cart: cart, 
         // TODO: Combine editAddress and readOnlyAddress into one section in order
         // for typescript to correctly infer which properties are set in what case
-        editAddress: jsxs(Fragment, { children: [jsx(EditAddressesForm, { billTo: cart.billTo, countries: countries || [], currentCountry: currentCountry, isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
+        editAddress: jsxs(Fragment, { children: [jsx(EditCheckoutBillToAddressForm, { billTo: cart.billTo, countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
                         if (!cart.billTo)
                             return;
                         formData.current = { address, notes };

package/dist/pages/my-sonic/actions/change-customer/change-customer.js

@@ -3,8 +3,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useCallback, useMemo } from 'react';
 import { ListBox, ListBoxItem, Text } from 'react-aria-components';
 import clsx from 'clsx';
-import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
-import { SearchField } from '../../../../forms/search-field/search-field.js';
+import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
+import { SearchField } from '../../../../forms/fields/search-field/search-field.js';
 import { SolidRatingIcon } from '../../../../icons/solid/solid-rating-icon.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';

package/dist/pages/my-sonic/actions/change-password/change-password-dialog.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { FormSegmentGroup } from '../../../../forms/form/form-segment-group.js';
+import { FormSegmentGroup } from '../../../../forms/layout/form/form-segment-group.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { Dialog } from '../../../../modals/dialog/dialog.js';
 import { UnauthorizedRequestError } from '../../../../shared/fetch/request.js';

package/dist/pages/my-sonic/actions/change-password/change-password.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { FormSegment } from '../../../../forms/form/form-segment.js';
-import { PasswordField } from '../../../../forms/password-field/password-field.js';
-import { PasswordValidation } from '../../../../forms/password-validation/password-validation.js';
+import { PasswordField } from '../../../../forms/fields/password-field/password-field.js';
+import { FormSegment } from '../../../../forms/layout/form/form-segment.js';
+import { PasswordValidation } from '../../../../forms/partials/password-validation/password-validation.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { ProgressCircle } from '../../../../loading/progress-circle.js';
 import { Message } from '../../../../message/message.js';

package/dist/pages/my-sonic/actions/edit-bill-to-address/edit-bill-to-address.d.ts

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

package/dist/pages/my-sonic/actions/edit-bill-to-address/edit-bill-to-address.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { EditAddressForm } from '../../../../forms/partials/edit-address-form/edit-address-form.js';
+
+function EditBillToAddress() {
+    return (jsx(EditAddressForm, { address: undefined, countries: [], isLoading: false }));
+}
+
+export { EditBillToAddress };

package/dist/pages/my-sonic/actions/edit-user-info/edit-user-info-dialog.d.ts

@@ -1,4 +1,4 @@
-import { OnSubmitHandler, ValidationErrors } from '../../../../forms/form/form';
+import { OnSubmitHandler, ValidationErrors } from '../../../../forms/layout/form/form';
 import { EditUserInfoProps } from './edit-user-info';
 export interface EditUserInfoDialogProps extends EditUserInfoProps {
     isOpen: boolean;

package/dist/pages/my-sonic/actions/edit-user-info/edit-user-info.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { TextField } from '../../../../forms/text-field/text-field.js';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { ProgressCircle } from '../../../../loading/progress-circle.js';
 import { Message } from '../../../../message/message.js';

package/dist/pages/my-sonic/navigation/my-sonic-mobile-navigation.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Select } from '../../../forms/select/select.js';
+import { Select } from '../../../forms/elements/select/select.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
 import { mySonicNavigationItems } from './my-sonic-navigation-items.js';