@sonic-equipment/ui 213.0.0 → 215.0.0

package/dist/pages/my-sonic/pages/order-history/{order-history.js → order-history-page.js}

@@ -1,6 +1,7 @@
 "use client";
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
+import { Breadcrumb } from '../../../../breadcrumbs/breadcrumb.js';
 import { Link } from '../../../../buttons/link/link.js';
 import { Price } from '../../../../display/price/price.js';
 import { Pagination } from '../../../../filters/pagination/pagination.js';
@@ -13,20 +14,24 @@ import { useIntl } from '../../../../intl/use-intl.js';
 import { DynamicLoadingOverlay } from '../../../../loading/dynamic-loading-overlay.js';
 import { useFetchOrders } from '../../../../shared/api/storefront/hooks/orders/use-fetch-orders.js';
 import { orderStatuses } from '../../../../shared/api/storefront/model/storefront.model.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
 import { scrollIntoViewRef } from '../../../../shared/utils/scrolling.js';
 import { DataTable } from '../../../../table/data-table.js';
 import { ErrorPage } from '../../../error-page/error-page.js';
-import styles from './order-history.module.css.js';
+import { MySonicLayoutBreadcrumb } from '../../layouts/my-sonic-layout/my-sonic-layout-breadcrumb.js';
+import { MySonicLayoutPage } from '../../layouts/my-sonic-layout/my-sonic-layout-page.js';
+import styles from './order-history-page.module.css.js';
 
 const dateOptions = {
     day: 'numeric',
     month: 'numeric',
     year: 'numeric',
 };
-function OrderHistory() {
+function OrderHistoryPage() {
     const t = useFormattedMessage();
     const { cultureCode } = useIntl();
     const orderHistoryRef = useRef(null);
+    const paths = usePaths();
     const [status, setStatus] = useState();
     const [search, setSearch] = useState('');
     const [sort, setSort] = useState({
@@ -66,7 +71,7 @@ function OrderHistory() {
         ...options,
         [status]: t(`orderStatus.${status}`),
     }), { any: t('orderStatus.Any') });
-    return (jsx(Fragment, { children: jsxs("section", { ref: orderHistoryRef, className: styles['order-history'], "data-test-selector": "order-history", children: [jsx("div", { className: styles['search'], children: jsx(SearchField, { isDebounced: true, "data-test-selector": "order-history-search", label: t('Search orders'), onChange: searchOrders, placeholder: t('Search orders'), showLabel: false, variant: "outline" }) }), jsx("div", { className: styles['filter'], children: jsx(SelectField, { "data-test-selector": "order-history-filter", label: t('Filter order status'), onChange: filterOrders, options: filterOptions, selectedOption: status, showLabel: false }) }), jsx("div", { "aria-label": t('Results'), "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: orders && orders.length > 0 ? (jsx(DataTable, { actions: [
+    return (jsx(MySonicLayoutPage, { "data-test-selector": "order-history", title: t('Order history'), children: jsxs("section", { ref: orderHistoryRef, className: styles['order-history'], children: [jsx("div", { className: styles['search'], children: jsx(SearchField, { isDebounced: true, "data-test-selector": "order-history-search", label: t('Search orders'), onChange: searchOrders, placeholder: t('Search orders'), showLabel: false, variant: "outline" }) }), jsx("div", { className: styles['filter'], children: jsx(SelectField, { "data-test-selector": "order-history-filter", label: t('Filter order status'), onChange: filterOrders, options: filterOptions, selectedOption: status, showLabel: false }) }), jsx("div", { "aria-label": t('Results'), "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: orders && orders.length > 0 ? (jsx(DataTable, { actions: [
                                 {
                                     'data-test-selector': 'order-history-reorder',
                                     isPrimary: false,
@@ -87,7 +92,7 @@ function OrderHistory() {
                                     },
                                     sort: { direction: 'DESC', isEnabled: true },
                                     value: {
-                                        render: order => (jsx(Link, { hasUnderline: true, color: "secondary", "data-test-selector": "order-history-order-link", href: `/my-sonic/order-history/${order.id}`, onClick: () => window?.alert(`open ${order.id}`), children: order.webOrderNumber })),
+                                        render: order => (jsx(Link, { hasUnderline: true, color: "secondary", "data-test-selector": "order-history-order-link", href: `${paths.ACCOUNT_ORDERS}/${order.webOrderNumber}?returnUrl=${encodeURIComponent(`${paths.ACCOUNT_ORDERS}`)}`, children: order.webOrderNumber })),
                                     },
                                 },
                                 {
@@ -154,7 +159,11 @@ function OrderHistory() {
                                         label: 'Reorder',
                                     },
                                     key: 'reorder',
-                                    props: { align: 'center', nowrap: true },
+                                    props: {
+                                        align: 'center',
+                                        'data-test-selector': 'reorderButton',
+                                        nowrap: true,
+                                    },
                                     value: { action: 'reorder' },
                                 },
                             ], data: orders, onSort: (key, direction) => {
@@ -165,8 +174,17 @@ function OrderHistory() {
                                     order: direction,
                                 });
                             }, row: {
-                                'data-test-selector': (order, _) => `tr-${order.id}`,
+                                'data-test-selector': (order, _) => `order-${order.id}`,
                             } })) : (!isFetching && (jsx("p", { className: styles['no-results'], children: t('No orders found.') }))) }) }), orders && orders.length > 0 && (jsx("nav", { className: styles['paging'], children: jsx(Pagination, { currentPage: pagination?.currentPage || 1, "data-test-selector": "order-history-pagination", onChange: page => setPage(page), totalPages: pagination?.numberOfPages || 1 }) })), jsx("div", { className: styles['sticky-bar'], role: "presentation" })] }) }));
 }
+function OrderHistoryPageBreadcrumb() {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    return (jsx(MySonicLayoutBreadcrumb, { children: jsx(Breadcrumb, { links: [
+                { href: paths.HOME, label: t('Home') },
+                { href: paths.ACCOUNT, label: t('My Sonic') },
+                { href: paths.ACCOUNT_ORDERS, label: t('Orders') },
+            ] }) }));
+}
 
-export { OrderHistory };
+export { OrderHistoryPage, OrderHistoryPageBreadcrumb };

package/dist/pages/my-sonic/pages/order-history/order-history-page.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"order-history":"order-history-page-module-A-YGB","search":"order-history-page-module-A-oqW","filter":"order-history-page-module--fnE1","results":"order-history-page-module-Gp4CJ","no-results":"order-history-page-module-ulch1","paging":"order-history-page-module-D35yK","sticky-bar":"order-history-page-module-xgntY"};
+
+export { styles as default };

package/dist/pages/my-sonic/widgets/connected-address-book-widget.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { Button } from '../../../buttons/button/button.js';
 import { TableCard } from '../../../cards/table-card/table-card.js';
 import { Pagination } from '../../../filters/pagination/pagination.js';
@@ -39,20 +39,21 @@ function ConnectedAddressBookWidget() {
         pagination: {},
         shipTos: [],
     };
-    useEffect(() => {
-        scrollIntoViewRef(addressBookRef);
-    }, [page]);
     const searchAddresses = (value) => {
         if (value.length >= 3 || value.length === 0) {
             setPage(1);
             setSearch(value);
+            scrollIntoViewRef(addressBookRef);
         }
     };
-    return (jsx(TableCard, { stickyHeader: true, actions: [
+    return (jsx(TableCard, { ref: addressBookRef, stickyHeader: true, actions: [
             jsx(SearchField, { isDebounced: true, className: styles['search-field'], "data-test-selector": "address-book-search", label: t('Search'), onChange: searchAddresses, placeholder: t('Search'), showLabel: false, size: "md", variant: "outline" }, "searchAddresses"),
             jsx(Button, { color: "secondary", "data-test-selector": "address-book-add-address", href: `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/current${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/new?returnUrl=${encodeURIComponent(`${href}#${addressBookId}`)}`, size: "sm", variant: "outline", children: t('Add address') }, "addAddress"),
         ], className: styles['address-book-widget'], "data-test-selector": "address-book", id: addressBookId, isLoading: isFetching, paging: addresses &&
-            addresses.length > 0 && (jsx("nav", { className: styles['paging'], children: jsx(Pagination, { currentPage: pagination?.currentPage || 1, onChange: page => setPage(page), totalPages: pagination?.numberOfPages || 1 }) })), results: addresses ? addresses.length : 0, showError: error, title: "Address book", children: jsx("div", { ref: addressBookRef, "aria-label": "Results", "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: jsx(DataTable, { actions: [
+            addresses.length > 0 && (jsx("nav", { className: styles['paging'], children: jsx(Pagination, { currentPage: pagination?.currentPage || 1, onChange: page => {
+                    setPage(page);
+                    scrollIntoViewRef(addressBookRef);
+                }, totalPages: pagination?.numberOfPages || 1 }) })), results: addresses ? addresses.length : 0, showError: error, title: "Address book", children: jsx("div", { "aria-label": "Results", "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: jsx(DataTable, { actions: [
                         {
                             'data-test-selector': 'edit-address',
                             href: address => `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/current${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/${address.id}?returnUrl=${encodeURIComponent(`${href}#${addressBookId}`)}`,
@@ -163,6 +164,7 @@ function ConnectedAddressBookWidget() {
                             name: key,
                             order: direction,
                         });
+                        scrollIntoViewRef(addressBookRef);
                     }, row: {
                         'data-test-selector': (address, _) => `address-${address.id}`,
                         selected: (address, _) => address.isDefault,

package/dist/pages/product/product-listing-page/product-listing-page-provider/product-listing-page-context.d.ts

@@ -5,4 +5,4 @@ export interface ProductListingPageContextType {
     isError?: boolean;
     isLoading?: boolean;
 }
-export declare const ProductListingPageContext: import("react").Context<ProductListingPageContextType>;
+export declare const ProductListingPageContext: React.Context<ProductListingPageContextType>;

package/dist/shared/api/storefront/hooks/orders/use-fetch-order-by-id.d.ts

@@ -0,0 +1 @@
+export declare function useFetchOrderById(id: string): import("@tanstack/react-query").UseQueryResult<import("../../model/storefront.model").OrderModel, Error>;

package/dist/shared/api/storefront/hooks/orders/use-fetch-order-by-id.js

@@ -0,0 +1,14 @@
+"use client";
+import { useQuery } from '@tanstack/react-query';
+import { fetchOrderById } from '../../services/order-service.js';
+
+function useFetchOrderById(id) {
+    return useQuery({
+        enabled: Boolean(id),
+        placeholderData: prev => prev,
+        queryFn: () => fetchOrderById(id),
+        queryKey: ['order', id],
+    });
+}
+
+export { useFetchOrderById };

package/dist/shared/api/storefront/model/storefront.model.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'react';
+import { CurrencyCode } from '../../../../intl/types';
 export interface BaseModel {
     properties: {
         [key: string]: string;
@@ -2219,7 +2220,7 @@ export interface OrderModel extends BaseModel {
     btCountry: string;
     canAddAllToCart: boolean;
     canAddToCart: boolean;
-    currencyCode: string;
+    currencyCode: CurrencyCode;
     currencySymbol: string;
     customerNumber: string;
     customerPO: string;

package/dist/shared/api/storefront/services/order-service.d.ts

@@ -1,4 +1,4 @@
-import { OrderCollectionModel, OrderStatus, SortOption } from '../model/storefront.model';
+import { OrderCollectionModel, OrderModel, OrderStatus, SortOption } from '../model/storefront.model';
 export declare function fetchOrders({ page, pageSize, search, sort, status, }?: {
     page?: number;
     pageSize?: number;
@@ -6,3 +6,5 @@ export declare function fetchOrders({ page, pageSize, search, sort, status, }?:
     sort?: SortOption;
     status?: OrderStatus;
 }): Promise<OrderCollectionModel>;
+export type ExpansionType = 'orderLines' | 'shipments' | 'vmidetails';
+export declare function fetchOrderById(id: string, expand?: ExpansionType[]): Promise<OrderModel>;

package/dist/shared/api/storefront/services/order-service.js

@@ -25,5 +25,16 @@ async function fetchOrders({ page = 1, pageSize = 20, search, sort, status, } =
     body.orders?.forEach(order => (order.status = fromApiStatusToOrderStatus(order.status)));
     return body;
 }
+async function fetchOrderById(id, expand = ['orderLines', 'shipments']) {
+    const { body } = await request({
+        credentials: 'include',
+        params: {
+            expand,
+        },
+        url: `${config.SHOP_API_URL}/api/v1/orders/${id}`,
+    });
+    body.status = fromApiStatusToOrderStatus(body.status);
+    return body;
+}
 
-export { fetchOrders };
+export { fetchOrderById, fetchOrders };

package/dist/shared/data/order.d.ts

@@ -0,0 +1,2 @@
+import { OrderModel } from '../api/storefront/model/storefront.model';
+export declare const orderModel: OrderModel;

package/dist/shared/data/order.js

@@ -0,0 +1,41 @@
+const orderModel = {
+    billToCity: 'Basel',
+    billToPostalCode: '4051',
+    btAddress1: '1 St. Alban-Graben',
+    btAddress2: '',
+    btAddress3: '',
+    btCompanyName: 'TestIt CYPRESSDIDIT StableCHFR',
+    btCountry: 'Switzerland',
+    currencyCode: 'CHF',
+    customerNumber: 'C002733',
+    id: 'bedcd4dd-cc40-4a96-aef9-b3440054ae76',
+    orderDate: new Date('2025-08-24T00:00:00'),
+    orderLines: [
+        {
+            altText: 'TEST Slotted screwdriver 10mm',
+            customerProductNumber: '',
+            id: '7199e7c5-a248-44a2-ad37-b3440054ae78',
+            lineTotal: 5000,
+            mediumImagePath: 'https://images.sonic-equipment.com/TEST13110/test-slotted-screwdriver-10mm_BaseProductImage_13355-002.webp',
+            productId: 'd9d13b6a-85c6-488d-8837-b259017ef5ab',
+            productUri: '/Product/TEST13110-Slotted-screwdriver-10mm',
+            qtyOrdered: 10,
+            shortDescription: 'TEST Slotted screwdriver 10mm',
+            unitPrice: 500,
+        },
+    ],
+    orderSubTotal: 5000,
+    orderTotal: 5405,
+    shipToCity: 'Basel',
+    shipToPostalCode: '4051',
+    shippingAndHandling: 0,
+    stAddress1: '1 St. Alban-Graben',
+    stAddress2: '',
+    stAddress3: '',
+    stCompanyName: 'TestIt CYPRESSDIDIT StableCHFR',
+    stCountry: 'Switzerland',
+    status: 'ForwardToReseller',
+    taxAmount: 405,
+};
+
+export { orderModel };

package/dist/shared/hooks/use-inert.d.ts

@@ -0,0 +1,3 @@
+export declare const useInert: <T extends HTMLElement>(isEnabled: boolean | undefined | null) => {
+    ref: React.MutableRefObject<T | null>;
+};

package/dist/shared/hooks/use-inert.js

@@ -0,0 +1,16 @@
+"use client";
+import { useRef, useEffect } from 'react';
+
+// TODO: when moving to React 19, we should simply set the inert attribute on the element (boolean value)
+const useInert = (isEnabled) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (isEnabled)
+            ref.current?.removeAttribute('inert');
+        else
+            ref.current?.setAttribute('inert', '');
+    }, [isEnabled]);
+    return { ref };
+};
+
+export { useInert };

package/dist/shared/model/address.d.ts

@@ -18,7 +18,7 @@ export interface Address {
     attention: string;
     city: string;
     companyName: string;
-    country: AddressCountry | null | undefined;
+    country: AddressCountry | null | undefined | string;
     email: string;
     firstName: string;
     lastName: string;

package/dist/shared/providers/global-state-provider.d.ts

@@ -15,7 +15,7 @@ declare class GlobalState {
     get<T>(key: string | symbol, initialState: T | undefined): State<T>;
     set<T>(key: string | symbol, state: State<T>): void;
 }
-export declare const GlobalStateProviderContext: import("react").Context<GlobalState>;
+export declare const GlobalStateProviderContext: React.Context<GlobalState>;
 interface GlobalStateProviderProps {
     children: ReactNode;
 }

package/dist/shared/routing/route-context.d.ts

@@ -1,2 +1,2 @@
 import { RouteContextValue } from './types';
-export declare const RouteContext: import("react").Context<RouteContextValue | undefined>;
+export declare const RouteContext: React.Context<RouteContextValue | undefined>;

package/dist/shared/routing/use-route-link-element.d.ts

@@ -1 +1 @@
-export declare function useRouteLinkElement(): import("react").ElementType<import("./types").RouteLinkElementProps>;
+export declare function useRouteLinkElement(): React.ElementType<import("./types").RouteLinkElementProps>;

package/dist/shared/routing/use-route-link.d.ts

@@ -1,6 +1,6 @@
 import { NavigateOptions } from './types';
 export declare function useRouteLink(): {
-    RouteLinkElement: import("react").ElementType<import("./types").RouteLinkElementProps>;
+    RouteLinkElement: React.ElementType<import("./types").RouteLinkElementProps>;
     getRouteLinkProps: (href: string, route?: NavigateOptions) => {
         href: string;
         onNavigate: () => void;

package/dist/shared/routing/with-routing.d.ts

@@ -4,5 +4,5 @@ export interface WithRoutingProps {
     href?: string;
     route?: NavigateOptions;
 }
-export declare function withRouting(component: ElementType<RouteLinkElementProps>): import("react").FunctionComponent<RouteLinkElementProps>;
-export declare const FallbackRouteLink: import("react").FunctionComponent<RouteLinkElementProps>;
+export declare function withRouting(component: ElementType<RouteLinkElementProps>): React.FunctionComponent<RouteLinkElementProps>;
+export declare const FallbackRouteLink: React.FunctionComponent<RouteLinkElementProps>;

package/dist/sidebar/sidebar.js

@@ -3,18 +3,20 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { IconButton } from '../buttons/icon-button/icon-button.js';
 import { StrokeCloseboxIcon } from '../icons/stroke/stroke-closebox-icon.js';
+import { useInert } from '../shared/hooks/use-inert.js';
 import { useSidebar } from './use-sidebar.js';
 import styles from './sidebar.module.css.js';
 
 function Sidebar({ children, className }) {
     const { isDocked, isOpen, toggle, transition } = useSidebar();
-    return (jsxs("aside", { "aria-hidden": !isOpen, className: clsx(styles.sidebar, {
+    const { ref: sidebarRef } = useInert(isOpen);
+    return (jsxs("aside", { ref: sidebarRef, "aria-hidden": !isOpen.toString(), className: clsx(styles.sidebar, {
             [styles['transition']]: transition,
             [styles['is-open']]: isOpen,
             [styles['is-closed']]: !isOpen,
             [styles['is-docked']]: isDocked,
             [styles['is-not-docked']]: !isDocked,
-        }, className), inert: isOpen ? undefined : true, children: [jsx(IconButton, { className: styles.close, color: "secondary", onClick: toggle, children: jsx(StrokeCloseboxIcon, {}) }), jsx("div", { className: styles['content'], children: children })] }));
+        }, className), children: [jsx(IconButton, { className: styles.close, color: "secondary", onClick: toggle, children: jsx(StrokeCloseboxIcon, {}) }), jsx("div", { className: styles['content'], children: children })] }));
 }
 
 export { Sidebar };

package/dist/styles.css

@@ -4887,7 +4887,7 @@ button.swiper-pagination-bullet {
     cursor: pointer;
     gap: var(--space-2);
     grid-template-areas: 'icon label .';
-    grid-template-columns: (--space-24) 1fr var(--space-24);
+    grid-template-columns: var(--space-24) 1fr var(--space-24);
     grid-template-rows: minmax(24px, min-content);
     line-height: 1;
     outline: none;
@@ -8104,6 +8104,7 @@ button.swiper-pagination-bullet {
   display: grid;
   gap: var(--gap) 0;
   grid-template-areas:
+    'breadcrumb'
     'pre-aside'
     'aside'
     'title'
@@ -8119,6 +8120,7 @@ button.swiper-pagination-bullet {
     --aside-sticky-top: calc(var(--header-bottom, 0) + var(--space-16));
 
     grid-template-areas:
+      'breadcrumb breadcrumb breadcrumb'
       '. . title'
       'aside . main';
     grid-template-columns: var(--aside-size) var(--gap) 1fr
@@ -8129,6 +8131,7 @@ button.swiper-pagination-bullet {
     --aside-size: clamp(56px, 22%, 308px);
 
     grid-template-areas:
+      'breadcrumb breadcrumb breadcrumb'
       'pre-aside . title'
       'aside . main';
     grid-template-columns: var(--aside-size) var(--gap) 1fr
@@ -8142,6 +8145,14 @@ button.swiper-pagination-bullet {
 }
   }
 
+  /* pre aside */
+
+  .my-sonic-layout-module-ep0n3 .my-sonic-layout-module-QsEQM {
+    align-self: last baseline;
+    grid-area: breadcrumb;
+    margin-block-end: var(--margin);
+  }
+
   /* title */
 
   .my-sonic-layout-module-ep0n3 .my-sonic-layout-module-yMdPQ {
@@ -8187,6 +8198,10 @@ button.swiper-pagination-bullet {
 
 @media (width >= 768px) {.connected-my-sonic-navigation-module-2iY0- {
     display: none
+}
+  }
+  @media print {.connected-my-sonic-navigation-module-2iY0- {
+    display: none
 }
   }
 
@@ -8592,7 +8607,106 @@ button.swiper-pagination-bullet {
     inline-size: var(--space-20);
   }
 
-.order-history-module-LrkiZ {
+.connected-address-book-widget-module-Xd9WN {
+  --height-actions: 42px;
+  --height-title: 22px;
+}
+
+  .connected-address-book-widget-module-Xd9WN .connected-address-book-widget-module-9mOgI {
+    --scroll-margin-block-start: calc(
+      var(--header-bottom, 0px) + var(--space-12) * 3 + var(--height-actions) +
+        var(--height-title)
+    );
+
+    scroll-margin-block-start: var(--scroll-margin-block-start, 0);
+  }
+
+  @container (min-width: 636px) {
+
+  .connected-address-book-widget-module-Xd9WN .connected-address-book-widget-module-9mOgI {
+      --scroll-margin-block-start: calc(
+        var(--header-bottom, 0px) + var(--space-12) * 2 + var(--height-actions)
+      )
+  }
+    }
+
+  .connected-address-book-widget-module-Xd9WN .connected-address-book-widget-module-g9kHi {
+    block-size: 1em;
+    inline-size: 1em;
+    margin-inline-end: -8px;
+    vertical-align: -0.2em;
+  }
+
+  .connected-address-book-widget-module-Xd9WN .connected-address-book-widget-module-3ir-C {
+    flex-grow: 1;
+  }
+
+.status-text-module-63aRD {
+  font-weight: 600;
+}
+
+.status-text-module-63aRD[data-status='success'] {
+  color: var(--color-semantic-okay);
+}
+
+.status-text-module-63aRD[data-status='critical'] {
+  color: var(--color-semantic-stop);
+}
+
+.status-text-module-63aRD[data-status='pending'] {
+  color: var(--color-semantic-notify);
+}
+
+.order-details-content-module-aU3VQ {
+  display: grid;
+  gap: var(--space-12);
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+  .order-details-content-module-aU3VQ .order-details-content-module-q0QYm {
+    display: flex;
+    align-items: start;
+    gap: var(--space-8);
+  }
+
+  .order-details-content-module-aU3VQ .order-details-content-module-q0QYm .order-details-content-module-d9sC4 {
+      flex: 1;
+    }
+
+  .order-details-content-module-aU3VQ .order-details-content-module--1w7s dl {
+      display: flex;
+    }
+
+  .order-details-content-module-aU3VQ .order-details-content-module--1w7s dl dt {
+        font-weight: var(--font-weight-bold);
+      }
+
+  .order-details-content-module-aU3VQ .order-details-content-module-BO26h h3 {
+      padding-bottom: var(--space-8);
+    }
+
+  @media print {
+
+  .order-details-content-module-aU3VQ button {
+      display: none
+  }
+    }
+
+  .order-details-content-module-aU3VQ .order-details-content-module-RkRvM,
+  .order-details-content-module-aU3VQ .order-details-content-module-o62H3 {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  @media print {
+
+  .order-details-content-module-aU3VQ .order-details-content-module-RkRvM,
+  .order-details-content-module-aU3VQ .order-details-content-module-o62H3 {
+      display: none
+  }
+    }
+
+.order-history-page-module-A-YGB {
   --gap-col: var(--space-8);
   --gap-row: var(--space-8);
   --sticky-z-index: 10;
@@ -8611,7 +8725,7 @@ button.swiper-pagination-bullet {
   scroll-margin-block: calc(var(--sticky-top) + var(--gap-row));
 }
 
-  @media (width >= 768px) {.order-history-module-LrkiZ {
+  @media (width >= 768px) {.order-history-page-module-A-YGB {
     --gap-row: var(--space-16);
 
     grid-template-areas:
@@ -8622,7 +8736,7 @@ button.swiper-pagination-bullet {
 }
   }
 
-  @media (width >= 1024px) {.order-history-module-LrkiZ {
+  @media (width >= 1024px) {.order-history-page-module-A-YGB {
     grid-template-areas:
       '. search filter'
       'results results results'
@@ -8631,14 +8745,14 @@ button.swiper-pagination-bullet {
 }
   }
 
-  @media (width >= 1440px) {.order-history-module-LrkiZ {
+  @media (width >= 1440px) {.order-history-page-module-A-YGB {
     --gap-row: var(--space-20)
 }
   }
 
   /* search */
 
-  .order-history-module-LrkiZ .order-history-module-Y18m7 {
+  .order-history-page-module-A-YGB .order-history-page-module-A-oqW {
     position: sticky;
     z-index: var(--sticky-z-index);
     grid-area: search;
@@ -8647,13 +8761,13 @@ button.swiper-pagination-bullet {
 
   /* filter */
 
-  .order-history-module-LrkiZ .order-history-module-tBrZG {
+  .order-history-page-module-A-YGB .order-history-page-module--fnE1 {
     grid-area: filter;
   }
 
   @media (width >= 768px) {
 
-  .order-history-module-LrkiZ .order-history-module-tBrZG {
+  .order-history-page-module-A-YGB .order-history-page-module--fnE1 {
       position: sticky;
       z-index: var(--sticky-z-index);
       inset-block-start: calc(var(--sticky-top) + var(--gap-row))
@@ -8662,17 +8776,17 @@ button.swiper-pagination-bullet {
 
   /* results */
 
-  .order-history-module-LrkiZ .order-history-module-5mST2 {
+  .order-history-page-module-A-YGB .order-history-page-module-Gp4CJ {
     grid-area: results;
   }
 
-  .order-history-module-LrkiZ .order-history-module-5mST2 .order-history-module-g-FzV {
+  .order-history-page-module-A-YGB .order-history-page-module-Gp4CJ .order-history-page-module-ulch1 {
       margin-block: var(--space-8);
     }
 
   /* paging */
 
-  .order-history-module-LrkiZ .order-history-module-POsiS {
+  .order-history-page-module-A-YGB .order-history-page-module-D35yK {
     grid-area: paging;
     justify-self: center;
     padding-block: var(--gap-row);
@@ -8680,7 +8794,7 @@ button.swiper-pagination-bullet {
 
   /* white bar behind sticky elements */
 
-  .order-history-module-LrkiZ .order-history-module-98Tvf {
+  .order-history-page-module-A-YGB .order-history-page-module-xgntY {
     position: sticky;
     z-index: calc(var(--sticky-z-index) - 1);
     margin: calc(var(--gap-row) * -1)
@@ -8694,12 +8808,12 @@ button.swiper-pagination-bullet {
 
   @media (width >= 768px) {
 
-  .order-history-module-LrkiZ .order-history-module-98Tvf {
+  .order-history-page-module-A-YGB .order-history-page-module-xgntY {
       margin-inline: 0
   }
     }
 
-  .order-history-module-LrkiZ .order-history-module-98Tvf::after {
+  .order-history-page-module-A-YGB .order-history-page-module-xgntY::after {
       position: absolute;
       background: linear-gradient(180deg, var(--shadow) 0%, transparent 100%);
       block-size: var(--space-8);
@@ -8711,45 +8825,11 @@ button.swiper-pagination-bullet {
 
   @container scroll-state(stuck: block-start) {
 
-  .order-history-module-LrkiZ .order-history-module-98Tvf::after {
+  .order-history-page-module-A-YGB .order-history-page-module-xgntY::after {
         opacity: 1
     }
       }
 
-.connected-address-book-widget-module-Xd9WN {
-  --height-actions: 42px;
-  --height-title: 22px;
-}
-
-  .connected-address-book-widget-module-Xd9WN .connected-address-book-widget-module-9mOgI {
-    --scroll-margin-block-start: calc(
-      var(--header-bottom, 0px) + var(--space-12) * 3 + var(--height-actions) +
-        var(--height-title)
-    );
-
-    scroll-margin-block-start: var(--scroll-margin-block-start, 0);
-  }
-
-  @container (min-width: 636px) {
-
-  .connected-address-book-widget-module-Xd9WN .connected-address-book-widget-module-9mOgI {
-      --scroll-margin-block-start: calc(
-        var(--header-bottom, 0px) + var(--space-12) * 2 + var(--height-actions)
-      )
-  }
-    }
-
-  .connected-address-book-widget-module-Xd9WN .connected-address-book-widget-module-g9kHi {
-    block-size: 1em;
-    inline-size: 1em;
-    margin-inline-end: -8px;
-    vertical-align: -0.2em;
-  }
-
-  .connected-address-book-widget-module-Xd9WN .connected-address-book-widget-module-3ir-C {
-    flex-grow: 1;
-  }
-
 .product-details-page-layout-module-pPtZX {
   display: flex;
   flex-direction: column;