@sonic-equipment/ui 134.0.0 → 135.0.0

package/dist/address/address.d.ts

@@ -1,3 +1,6 @@
 import { AddressType } from '../shared/model/address';
-export type AddressProps = AddressType;
-export declare function Address({ address1, address2, address3, city, companyName, country, email, firstName, lastName, phone, postalCode, }: AddressProps): import("react/jsx-runtime").JSX.Element;
+export interface AddressProps {
+    address: AddressType;
+    'data-test-selector'?: string;
+}
+export declare function Address({ address, 'data-test-selector': dataTestSelector, }: AddressProps): import("react/jsx-runtime").JSX.Element;

package/dist/address/address.js

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

package/dist/exports.d.ts

@@ -108,6 +108,9 @@ export * from './global-search/search-section/search-list-item';
 export * from './global-search/search-section/search-section';
 export * from './global-search/types';
 export * from './header/cart-icon/connected-cart-icon';
+export * from './header/hamburger-button/hamburger-button';
+export * from './header/header-layout/header-layout';
+export * from './header/sonic-logo/sonic-logo';
 export * from './info-icon-tooltip/info-icon-tooltip';
 export * from './intl/formatted-message';
 export * from './intl/intl-context';

package/dist/header/hamburger-button/hamburger-button.d.ts

@@ -0,0 +1,6 @@
+export interface HamburgerButtonProps {
+    'aria-controls': string;
+    isActive: boolean;
+    onActiveChange: (isActive: boolean) => void;
+}
+export declare function HamburgerButton({ 'aria-controls': ariaControls, isActive, onActiveChange, }: HamburgerButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/hamburger-button/hamburger-button.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { IconButton } from '../../buttons/icon-button/icon-button.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import styles from './hamburger-button.module.css.js';
+
+function HamburgerButton({ 'aria-controls': ariaControls, isActive, onActiveChange, }) {
+    const t = useFormattedMessage();
+    return (jsx(IconButton, { "aria-controls": ariaControls, "aria-expanded": isActive, onClick: () => onActiveChange(!isActive), title: t('Toggle navigation menu'), type: "button", children: jsxs("div", { className: clsx(styles['hamburger-button'], {
+                [styles.active]: isActive,
+            }), children: [jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" })] }) }));
+}
+
+export { HamburgerButton };

package/dist/header/hamburger-button/hamburger-button.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"hamburger-button":"hamburger-button-module-xER52","active":"hamburger-button-module-7yoVH"};
+
+export { styles as default };

package/dist/header/header-layout/header-layout.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface HeaderLayoutProps {
+    hamburgerButton?: ReactNode;
+    logo: ReactNode;
+    mainNavigation: ReactNode;
+    navigationActions: ReactNode;
+    search: ReactNode;
+}
+export declare function HeaderLayout({ hamburgerButton, logo, mainNavigation, navigationActions, search, }: HeaderLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/header-layout/header-layout.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './header-layout.module.css.js';
+
+function HeaderLayout({ hamburgerButton, logo, mainNavigation, navigationActions, search, }) {
+    return (jsxs("header", { className: styles.header, children: [jsxs("div", { className: styles['mobile-menu-toggle'], children: [hamburgerButton && hamburgerButton, jsx("div", { className: styles.search, children: search })] }), jsx("div", { className: styles.logo, children: logo }), jsx("div", { className: styles['main-navigation'], children: mainNavigation }), jsxs("div", { className: styles['navigation-actions'], children: [jsx("div", { className: styles.search, children: search }), jsx("div", { className: styles.icons, children: navigationActions })] })] }));
+}
+
+export { HeaderLayout };

package/dist/header/header-layout/header-layout.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"header":"header-layout-module-VlTuk","logo":"header-layout-module-oKPyL","mobile-menu-toggle":"header-layout-module-aBOJL","main-navigation":"header-layout-module--ICLK","navigation-actions":"header-layout-module-HjY-a","search":"header-layout-module-fP3a6","icons":"header-layout-module-4Qp5b"};
+
+export { styles as default };

package/dist/header/sonic-logo/sonic-logo.d.ts

@@ -0,0 +1,5 @@
+export interface SonicLogoProps {
+    className?: string;
+    href?: string;
+}
+export declare function SonicLogo({ className, href }: SonicLogoProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/sonic-logo/sonic-logo.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { RouteLink } from '../../shared/routing/route-link.js';
+import styles from './sonic-logo.module.css.js';
+
+function SonicLogo({ className, href }) {
+    const Tag = href ? RouteLink : 'div';
+    return (jsx(Tag, { "aria-label": "Sonic", className: clsx(styles.wrapper, className), href: href, children: jsx("svg", { className: styles['sonic-logo'], viewBox: "0 0 100 24", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { className: styles.letters, d: "M11.87 8.65c1.815 0 3.286 1.482 3.286 3.311 0 6.595-5.325 11.962-11.87 11.962C1.471 23.923 0 22.44 0 20.612c0-1.766 1.372-3.21 3.1-3.307l.186-.005c2.848 0 5.179-2.277 5.293-5.12l.005-.219c0-1.829 1.471-3.311 3.286-3.311zm0-8.65c1.815 0 3.286 1.483 3.286 3.311 0 1.766-1.371 3.21-3.1 3.307l-.186.005c-2.849 0-5.178 2.277-5.293 5.118l-.004.22c0 1.829-1.472 3.311-3.287 3.311C1.472 15.272 0 13.79 0 11.961 0 5.366 5.325 0 11.87 0zm6.155 12.016c0 6.596 5.325 11.963 11.87 11.963 6.545 0 11.87-5.367 11.87-11.963 0-6.595-5.325-11.96-11.87-11.96-6.545 0-11.87 5.365-11.87 11.96zm6.572 0c0-2.943 2.376-5.338 5.298-5.338 2.92 0 5.297 2.395 5.297 5.338 0 2.945-2.376 5.34-5.297 5.34-2.922 0-5.298-2.395-5.298-5.34zM82.251 3.56c-4.628 4.663-4.628 12.251 0 16.915 4.628 4.663 12.158 4.663 16.786 0a3.33 3.33 0 0 0 .001-4.683 3.268 3.268 0 0 0-4.501-.138l-.146.138a5.278 5.278 0 0 1-7.494 0c-2.064-2.081-2.064-5.468.001-7.549a5.275 5.275 0 0 1 7.313-.174l.18.173a3.268 3.268 0 0 0 4.647 0 3.33 3.33 0 0 0 0-4.684c-4.63-4.663-12.16-4.662-16.787.002zm-12.868-.13v17.148c0 1.828 1.47 3.311 3.285 3.311 1.816 0 3.287-1.483 3.287-3.311V3.429c0-1.829-1.471-3.312-3.287-3.312-1.815 0-3.285 1.483-3.285 3.312zM48.063.075c-1.814 0-3.285 1.483-3.285 3.311V20.69c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311V6.698h2.95c2.92 0 5.297 2.394 5.297 5.338v8.653c0 1.828 1.471 3.311 3.286 3.311s3.286-1.483 3.286-3.311v-8.653C66.17 5.44 60.844.075 54.3.075h-6.235z" }), jsx("path", { className: styles.dot, d: "M35.27 12.017c0 2.991-2.406 5.416-5.375 5.416-2.97 0-5.376-2.425-5.376-5.416 0-2.992 2.407-5.417 5.376-5.417 2.969 0 5.375 2.425 5.375 5.417" })] }) }) }));
+}
+
+export { SonicLogo };

package/dist/header/sonic-logo/sonic-logo.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"wrapper":"sonic-logo-module-5zzhF","sonic-logo":"sonic-logo-module-9Mpdq","letters":"sonic-logo-module-Pa7pF","dot":"sonic-logo-module-vTCO3"};
+
+export { styles as default };

package/dist/index.js

@@ -112,6 +112,9 @@ export { SearchList } from './global-search/search-section/search-list.js';
 export { SearchListItem } from './global-search/search-section/search-list-item.js';
 export { SearchSection } from './global-search/search-section/search-section.js';
 export { ConnectedCartIcon } from './header/cart-icon/connected-cart-icon.js';
+export { HamburgerButton } from './header/hamburger-button/hamburger-button.js';
+export { HeaderLayout } from './header/header-layout/header-layout.js';
+export { SonicLogo } from './header/sonic-logo/sonic-logo.js';
 export { InfoIconTooltip } from './info-icon-tooltip/info-icon-tooltip.js';
 export { FormattedMessage } from './intl/formatted-message.js';
 export { IntlContext } from './intl/intl-context.js';

package/dist/intl/translation-id.d.ts

@@ -1 +1 @@
-export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'Attention' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Cancel' | 'Cart' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Company name' | 'Conceal value' | 'Continue shopping' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Delivery date' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Features' | 'First name' | 'Forgot password?' | 'Fulfillment method' | 'General' | 'Hide filters' | 'Home' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'New list name' | 'New user?' | 'of' | 'Or sign in as guest' | 'Order number' | 'Order' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order' | 'Pay by invoice' | 'Pay' | 'Payment method' | 'Payment' | 'Password' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please enter a valid e-mail address' | 'Please enter a valid phone number' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Requested delivery date' | 'Remember me' | 'Remove all' | 'Requested delivery date' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a desired delivery date' | 'Select a list' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'sign in' | 'Sonic address' | 'Sonic Equipment' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'tag.limited' | 'tag.new' | 'The expected delivery is an indication based on the product availability and the shipping location.' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are no products in your shopping cart.' | 'Total amount is' | 'Total' | 'Total' | 'Try another search' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unable to update the product in your cart.' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'Your cart has been emptied.' | 'Your favorites are available on multiple devices' | 'Your shopping cart is still empty';
+export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'Attention' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Cancel' | 'Cart' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Company name' | 'Conceal value' | 'Continue shopping' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Delivery date' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Features' | 'First name' | 'Forgot password?' | 'Fulfillment method' | 'General' | 'Hide filters' | 'Home' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'New list name' | 'New user?' | 'of' | 'Or sign in as guest' | 'Order number' | 'Order' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order' | 'Pay by invoice' | 'Pay' | 'Payment method' | 'Payment' | 'Password' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please enter a valid e-mail address' | 'Please enter a valid phone number' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Requested delivery date' | 'Remember me' | 'Remove all' | 'Requested delivery date' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a desired delivery date' | 'Select a list' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'sign in' | 'Sonic address' | 'Sonic Equipment' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'tag.limited' | 'tag.new' | 'The expected delivery is an indication based on the product availability and the shipping location.' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are no products in your shopping cart.' | 'Toggle navigation menu' | 'Total amount is' | 'Total' | 'Total' | 'Try another search' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unable to update the product in your cart.' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'Your cart has been emptied.' | 'Your favorites are available on multiple devices' | 'Your shopping cart is still empty';

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

@@ -6,7 +6,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(Address, { ...billToAddress }) }) }), jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "shipping-address", label: t('Shipping address'), value: jsx(Address, { ...shipToAddress }) }) })] }));
+    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(Address, { address: billToAddress, "data-test-selector": "orderConfirmationBillingInformation" }) }) }), jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "shipping-address", label: t('Shipping address'), value: jsx(Address, { address: shipToAddress, "data-test-selector": "orderConfirmationShippingInformation" }) }) })] }));
 }
 
 export { BillingAndInvoiceInformation };

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

@@ -40,7 +40,7 @@ function OrderConfirmationPageContent({ cart, }) {
         },
     });
     return (jsx(Page, { breadCrumb: [{ href: CHECKOUT_PATHS.HOME, label: t('Home') }], title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {
-                primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: "/", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
+                primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_continueShopping", href: "/", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
                 secondary: (jsxs(Fragment, { children: [cart.canSaveOrder && (jsx(RouteButton, { color: "secondary", onClick: () => {
                                 saveCartForLater.mutate({ cart });
                             }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })), jsx(PrintButton, {})] })),

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

@@ -22,7 +22,7 @@ function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidat
                 label: t('Review and payment'),
             },
         ], title: t('Review and payment'), children: jsxs(CheckoutPageLayout, { actions: {
-                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", form: formId, isDisabled: isProcessing, isLoading: isProcessing ? (jsx(FormattedMessage, { id: "Processing" })) : isValidating ? (jsx(FormattedMessage, { id: "Validating" })) : (false), type: "submit", children: jsx(FormattedMessage, { id: "Pay" }) })),
+                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_placeOrder", form: formId, isDisabled: isProcessing, isLoading: isProcessing ? (jsx(FormattedMessage, { id: "Processing" })) : isValidating ? (jsx(FormattedMessage, { id: "Validating" })) : (false), type: "submit", children: jsx(FormattedMessage, { id: "Pay" }) })),
             }, mobileSummary: jsx(CartTotalsSummary, { totalAmount: cart.orderGrandTotalDisplay }), overview: jsx(CartTotals, { deliveryDate: hasAtp ? undefined : cart.requestedDeliveryDate, fulfillmentMethod: cart.fulfillmentMethod, isPayByInvoice: (cart.paymentOptions?.paymentMethods?.length || 1) <= 1 &&
                     cart.paymentMethod?.name === 'PBI', shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate || 0 }), children: [jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Payment" }), children: jsx(CheckoutPageSectionContent, { children: jsx(Payment, { atp: atp, cart: cart, form: formId, onPaymentComplete: onPaymentComplete, onProcessing: setIsProcessing, onValidating: setIsValidating }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Order" }), children: jsx(CheckoutPageSectionContent, { stretch: true, children: jsx(OrderLineList, { children: cart.cartLines?.map(cartLine => (jsx(OrderLineCard, { deliveryDate: cartLine.atp?.date, href: cartLine.productUri, image: {
                                     fit: 'contain',

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

@@ -22,7 +22,31 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
             onSubmit({
                 notes: formData.get('notes')?.toString() || '',
             });
-        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(Address, { address1: billTo.address1, address2: billTo.address2, address3: billTo.address3, city: billTo.city, companyName: billTo.companyName, country: billTo.country?.name, email: billTo.email, firstName: billTo.firstName, lastName: billTo.lastName, phone: billTo.phone, postalCode: billTo.postalCode })), jsx("div", { className: styles.notes, children: jsx(TextField, { defaultValue: notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] })] }), jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: [!isPickup && (jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) })), jsx(CheckoutPageSectionContent, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs(Fragment, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(Address, { address1: shipTo.address1, address2: shipTo.address2, address3: shipTo.address3, city: shipTo.city, companyName: shipTo.companyName, country: shipTo.country?.name, email: shipTo.email, firstName: shipTo.firstName, lastName: shipTo.lastName, phone: shipTo.phone, postalCode: shipTo.postalCode }))] })) })] })] }));
+        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(Address, { address: {
+                                    address1: billTo.address1,
+                                    address2: billTo.address2,
+                                    address3: billTo.address3,
+                                    city: billTo.city,
+                                    companyName: billTo.companyName,
+                                    country: billTo.country?.name,
+                                    email: billTo.email,
+                                    firstName: billTo.firstName,
+                                    lastName: billTo.lastName,
+                                    phone: billTo.phone,
+                                    postalCode: billTo.postalCode,
+                                } })), jsx("div", { className: styles.notes, children: jsx(TextField, { defaultValue: notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] })] }), jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: [!isPickup && (jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) })), jsx(CheckoutPageSectionContent, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs(Fragment, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(Address, { address: {
+                                        address1: shipTo.address1,
+                                        address2: shipTo.address2,
+                                        address3: shipTo.address3,
+                                        city: shipTo.city,
+                                        companyName: shipTo.companyName,
+                                        country: shipTo.country?.name,
+                                        email: shipTo.email,
+                                        firstName: shipTo.firstName,
+                                        lastName: shipTo.lastName,
+                                        phone: shipTo.phone,
+                                        postalCode: shipTo.postalCode,
+                                    } }))] })) })] })] }));
 }
 
 export { ReadOnlyAddresses };

package/dist/styles.css

@@ -4754,6 +4754,152 @@ button.swiper-pagination-bullet {
     transform: translateY(-100%);
   }
 
+.hamburger-button-module-xER52 {
+  --width: 24px;
+  --padding-inline: 2px;
+  --transition-duration: 200ms;
+
+  position: relative;
+  display: block;
+  width: var(--width);
+  border: none;
+  aspect-ratio: 1;
+  background: none;
+  cursor: pointer;
+}
+
+  .hamburger-button-module-xER52 span {
+    position: absolute;
+    left: 1px;
+    display: block;
+    width: calc(var(--width) - 2 * var(--padding-inline));
+    height: 8%;
+    background-color: var(--color-black);
+    transition-duration: var(--transition-duration);
+    transition-property: transform, top;
+    transition-timing-function: ease;
+  }
+
+  .hamburger-button-module-xER52 span:nth-child(1) {
+      top: calc(var(--width) / 6 - 1px);
+      transition-delay: 0s, var(--transition-duration);
+    }
+
+  .hamburger-button-module-xER52 span:nth-child(2) {
+      top: calc(var(--width) / 2 - 1px);
+      opacity: 1;
+      transition-delay: var(--transition-duration);
+      transition-property: opacity;
+    }
+
+  .hamburger-button-module-xER52 span:nth-child(3) {
+      top: calc(var(--width) / 6 * 5 - 1px);
+      transition-delay: 0s, var(--transition-duration);
+    }
+
+  .hamburger-button-module-xER52:where(.hamburger-button-module-7yoVH) span:nth-child(1) {
+        top: calc(var(--width) / 2 - 1px);
+        transform: rotate(45deg);
+        transition-delay: var(--transition-duration), 0s;
+      }
+
+  .hamburger-button-module-xER52:where(.hamburger-button-module-7yoVH) span:nth-child(2) {
+        opacity: 0;
+        transition-delay: var(--transition-duration);
+        transition-property: opacity;
+      }
+
+  .hamburger-button-module-xER52:where(.hamburger-button-module-7yoVH) span:nth-child(3) {
+        top: calc(var(--width) / 2 - 1px);
+        transform: rotate(-45deg);
+        transition-delay: var(--transition-duration), 0s;
+      }
+
+.header-layout-module-VlTuk {
+  display: grid;
+  align-items: center;
+  background-color: var(--color-white);
+  gap: var(--space-8);
+  grid-template-columns: 1fr auto 1fr;
+  padding-block: var(--space-4);
+  padding-inline: var(--space-16);
+}
+
+  .header-layout-module-VlTuk,
+  .header-layout-module-VlTuk * {
+    box-sizing: border-box;
+  }
+
+  .header-layout-module-VlTuk .header-layout-module-oKPyL {
+    width: var(--space-100);
+  }
+
+  .header-layout-module-VlTuk .header-layout-module-aBOJL {
+    display: flex;
+  }
+
+  .header-layout-module-VlTuk .header-layout-module--ICLK {
+    display: none;
+    place-items: center;
+  }
+
+  .header-layout-module-VlTuk .header-layout-module-HjY-a {
+    display: flex;
+    margin-left: auto;
+  }
+
+  .header-layout-module-VlTuk .header-layout-module-HjY-a .header-layout-module-fP3a6 {
+      display: none;
+    }
+
+  .header-layout-module-VlTuk .header-layout-module-HjY-a .header-layout-module-4Qp5b {
+      display: flex;
+    }
+
+  @media (width >= 1024px) {.header-layout-module-VlTuk {
+    padding-block: var(--space-24);
+    padding-inline: var(--space-32)
+}
+
+    .header-layout-module-VlTuk .header-layout-module-oKPyL {
+      margin-bottom: var(--space-8);
+    }
+
+    .header-layout-module-VlTuk .header-layout-module-aBOJL {
+      display: none;
+    }
+
+    .header-layout-module-VlTuk .header-layout-module--ICLK {
+      display: block;
+    }
+      .header-layout-module-VlTuk .header-layout-module-HjY-a .header-layout-module-fP3a6 {
+        display: block;
+      }
+  }
+
+.sonic-logo-module-5zzhF {
+  display: block;
+}
+
+  .sonic-logo-module-5zzhF,
+  .sonic-logo-module-5zzhF * {
+    box-sizing: border-box;
+  }
+
+  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq {
+    display: block;
+    width: auto;
+    height: auto;
+  }
+
+  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq .sonic-logo-module-Pa7pF {
+      fill: var(--color-black);
+    }
+
+  .sonic-logo-module-5zzhF .sonic-logo-module-9Mpdq .sonic-logo-module-vTCO3 {
+      fill: var(--color-brand-red);
+    }
+
 .feature-list-module-cxc8U {
   display: grid;
   grid-template-columns: auto minmax(50%, 1fr);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "134.0.0",
+  "version": "135.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {