@sonic-equipment/ui 202.0.0 → 204.0.0

package/dist/icons/glyph/glyphs-chevrons-bold-down-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsChevronsBoldDownIcon(props) {

package/dist/icons/glyph/glyphs-chevrons-bold-up-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsChevronsBoldUpIcon(props) {

package/dist/icons/glyph/glyphs-chevrons-slim-down-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsChevronsSlimDownIcon(props) {

package/dist/icons/glyph/glyphs-chevrons-slim-left-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsChevronsSlimLeftIcon(props) {

package/dist/icons/glyph/glyphs-chevrons-slim-right-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function GlyphsChevronsSlimRightIcon(props) {

package/dist/icons/solid/solid-attention-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function SolidAttentionIcon(props) {

package/dist/icons/solid/solid-cart-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function SolidCartIcon(props) {

package/dist/icons/solid/solid-close-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function SolidCloseIcon(props) {

package/dist/icons/solid/solid-favorite-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function SolidFavoriteIcon(props) {

package/dist/icons/solid/solid-home-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function SolidHomeIcon(props) {

package/dist/icons/solid/solid-information-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function SolidInformationIcon(props) {

package/dist/icons/solid/solid-login-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function SolidLoginIcon(props) {

package/dist/icons/solid/solid-logout-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function SolidLogOutIcon(props) {

package/dist/icons/solid/solid-news-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function SolidNewsIcon(props) {

package/dist/icons/solid/solid-notice-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function SolidNoticeIcon(props) {

package/dist/icons/solid/solid-okay-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function SolidOkayIcon(props) {

package/dist/icons/solid/solid-rating-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function SolidRatingIcon(props) {

package/dist/icons/solid/solid-salecategory-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function SolidSaleCategoryIcon(props) {

package/dist/icons/solid/solid-tag-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function SolidTagIcon(props) {

package/dist/icons/stroke/stroke-categories-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokeCategoriesIcon(props) {

package/dist/icons/stroke/stroke-checkmark-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokeCheckmarkIcon(props) {

package/dist/icons/stroke/stroke-closebox-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokeCloseboxIcon(props) {

package/dist/icons/stroke/stroke-dehashed-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokeDehashedIcon(props) {

package/dist/icons/stroke/stroke-download-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokeDownloadIcon(props) {

package/dist/icons/stroke/stroke-event-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokeEventIcon(props) {

package/dist/icons/stroke/stroke-favorite-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokeFavoriteIcon(props) {

package/dist/icons/stroke/stroke-filter-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokeFilterIcon(props) {

package/dist/icons/stroke/stroke-hashed-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokeHashedIcon(props) {

package/dist/icons/stroke/stroke-information-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokeInformationIcon(props) {

package/dist/icons/stroke/stroke-minus-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokeMinusIcon(props) {

package/dist/icons/stroke/stroke-plus-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokePlusIcon(props) {

package/dist/icons/stroke/stroke-recent-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokeRecentIcon(props) {

package/dist/icons/stroke/stroke-search-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokeSearchIcon(props) {

package/dist/icons/stroke/stroke-trash-icon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function StrokeTrashIcon(props) {

package/dist/index.js

@@ -76,6 +76,12 @@ export { ShowAll } from './collapsables/show-all/show-all.js';
 export { Unmounter, UnmounterContext, useUnmount } from './collapsables/unmounter/unmounter.js';
 export { createAddEndListener } from './collapsables/unmounter/utils.js';
 export { config, configPerEnvironment } from './config.js';
+export { clientCookieContextValue, defaultCookieOptions } from './cookies/client-cookie-context.js';
+export { CookieContext } from './cookies/cookie-context.js';
+export { CookieProvider } from './cookies/cookie-provider.js';
+export { createReadonlyCookieReader } from './cookies/readonly-cookie-reader.js';
+export { isCookieGetterSetter } from './cookies/types.js';
+export { useCookie } from './cookies/use-cookie.js';
 export { CountrySelect } from './country-select/country-select.js';
 export { useCountries } from './country-select/hooks/use-countries.js';
 export { ConnectedCountrySelector } from './country-selector/connected-country-selector.js';
@@ -375,7 +381,6 @@ export { GoogleAnalyticsProvider, InitializeGoogleAnalyticsProvider, useGoogleAn
 export { isGAEvent } from './shared/ga/types.js';
 export { useDataLayer } from './shared/ga/use-data-layer.js';
 export { useBreakpoint } from './shared/hooks/use-breakpoint.js';
-export { defaultCookieOptions, useCookie } from './shared/hooks/use-cookie.js';
 export { useCookiebot } from './shared/hooks/use-cookiebot.js';
 export { useCSSLink } from './shared/hooks/use-css-link.js';
 export { useDebouncedCallback } from './shared/hooks/use-debounced-callback.js';
@@ -403,7 +408,7 @@ export { isResponsiveImage } from './shared/model/image.js';
 export { CartProvider, useCartEvents } from './shared/providers/cart-provider.js';
 export { FavoriteProvider, useFavorite, useFavoriteProduct } from './shared/providers/favorite-provider.js';
 export { GlobalStateProvider, GlobalStateProviderContext, useGlobalState } from './shared/providers/global-state-provider.js';
-export { ReactQueryContainer } from './shared/providers/react-query-container.js';
+export { ReactQueryContainer, globalQueryClient } from './shared/providers/react-query-container.js';
 export { RouteContext } from './shared/routing/route-context.js';
 export { RouteProvider } from './shared/routing/route-provider.js';
 export { buildHref } from './shared/routing/route-utils.js';

package/dist/intl/use-formatted-date.js

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback } from 'react';
 import { formatDate } from '../shared/utils/date.js';
 import { useIntl } from './use-intl.js';

package/dist/layout/center.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './center.module.css.js';

package/dist/lists/download-document-list/download-document-list.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { StrokeDownloadIcon } from '../../icons/stroke/stroke-download-icon.js';
 import { FeatureList } from '../feature-list/feature-list.js';

package/dist/lists/feature-list/feature-list.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { SolidCloseIcon } from '../../icons/solid/solid-close-icon.js';

package/dist/lists/icon-list/icon-list.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import styles from './icon-list.module.css.js';
 

package/dist/lists/menu-list/menu-list-header.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Link } from '../../buttons/link/link.js';
 import { GlyphsArrowBlackCapsRightIcon } from '../../icons/glyph/glyphs-arrow-blackcaps-right-icon.js';

package/dist/lists/menu-list/use-menu-list-item.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from 'react';
 import { useMenuList } from './use-menu-list.js';
 

package/dist/lists/menu-list/use-menu-list.js

@@ -1,3 +1,4 @@
+"use client";
 import { useContext } from 'react';
 import { MenuListContext } from './menu-list-provider.js';
 

package/dist/lists/product-overview-grid/product-overview-grid.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Children } from 'react';
 import { ProgressCircle } from '../../loading/progress-circle.js';

package/dist/loading/blank-page-spacer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import styles from './blank-page-spacer.module.css.js';
 

package/dist/loading/dynamic-loading-overlay.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef } from 'react';
 import clsx from 'clsx';

package/dist/loading/loading-overlay.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { ProgressCircle } from './progress-circle.js';
 import styles from './loading-overlay.module.css.js';

package/dist/loading/progress-circle.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './progress-circle.module.css.js';

package/dist/media/image-grid/images-grid.d.ts

@@ -1,7 +1,8 @@
 import { ImageType } from '../../shared/model/image';
 interface ImagesGridProps {
+    className?: string;
     images: ImageType[];
     onSelectImage?: (image: ImageType, index: number) => void;
 }
-export declare function ImagesGrid({ images, onSelectImage }: ImagesGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImagesGrid({ className, images, onSelectImage, }: ImagesGridProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/media/image-grid/images-grid.js

@@ -11,7 +11,7 @@ const mainImagePosition = {
     4: 0,
     5: 2,
 };
-function ImagesGrid({ images, onSelectImage }) {
+function ImagesGrid({ className, images, onSelectImage, }) {
     const positionIndex = mainImagePosition[images.length] || 0;
     const imageList = [
         ...images.slice(1, positionIndex + 1),
@@ -24,7 +24,7 @@ function ImagesGrid({ images, onSelectImage }) {
             onSelectImage?.(image, images.indexOf(image));
         }
     }
-    return (jsx("div", { className: styles['images-grid'], "data-count": images.length, children: imageList.map((image, index) => image && (jsx("div", { "aria-label": `Open image ${index}`, className: clsx(styles['grid-item'], {
+    return (jsx("div", { className: clsx(styles['images-grid'], className), "data-count": images.length, children: imageList.map((image, index) => image && (jsx("div", { "aria-label": `Open image ${index}`, className: clsx(styles['grid-item'], {
                 [styles.clickable]: Boolean(onSelectImage),
             }), onClick: () => onSelectImage?.(image, index), onKeyDown: event => handleKeydown(event, image), role: "button", tabIndex: 0, children: jsx(Image, { className: styles.image, fit: "contain", image: image, title: image.altText }) }, index))) }));
 }

package/dist/media/image-lightbox/image-lightbox.d.ts

@@ -1,6 +1,7 @@
 import 'swiper/css';
 import { ImageType } from '../../shared/model/image';
 export interface ImageLightboxProps {
+    className?: string;
     images: ImageType[];
     initialSelectedIndex?: number;
     onZoom?: (args: {
@@ -9,4 +10,4 @@ export interface ImageLightboxProps {
     }) => void;
     variant?: 'sm' | 'lg';
 }
-export declare function ImageLightbox({ images, initialSelectedIndex, onZoom, variant, }: ImageLightboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageLightbox({ className, images, initialSelectedIndex, onZoom, variant, }: ImageLightboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/media/image-lightbox/image-lightbox.js

@@ -10,7 +10,7 @@ import { CarouselPagination } from '../../carousel/pagination/pagination.js';
 import { Image } from '../image/image.js';
 import styles from './image-lightbox.module.css.js';
 
-function ImageLightbox({ images, initialSelectedIndex = 0, onZoom, variant = 'sm', }) {
+function ImageLightbox({ className, images, initialSelectedIndex = 0, onZoom, variant = 'sm', }) {
     const [thumbsSwiper, setThumbsSwiper] = useState();
     const [currentIndex, setCurrentIndex] = useState(initialSelectedIndex);
     const nextEl = useRef(null);
@@ -26,7 +26,7 @@ function ImageLightbox({ images, initialSelectedIndex = 0, onZoom, variant = 'sm
         const scrollPercentage = clientY / height;
         onZoom?.({ index: currentIndex, scrollPercentage });
     }
-    return (jsxs("div", { className: clsx(styles['image-lightbox'], styles[variant]), children: [jsx(Swiper, { watchSlidesProgress: true, className: styles['thumbs-swiper'], direction: variant === 'sm' ? 'horizontal' : 'vertical', modules: [Thumb], onSwiper: swiper => setThumbsSwiper(swiper), slidesPerView: "auto", spaceBetween: 8, children: images.map((image, index) => (
+    return (jsxs("div", { className: clsx(styles['image-lightbox'], styles[variant], className), children: [jsx(Swiper, { watchSlidesProgress: true, className: styles['thumbs-swiper'], direction: variant === 'sm' ? 'horizontal' : 'vertical', modules: [Thumb], onSwiper: swiper => setThumbsSwiper(swiper), slidesPerView: "auto", spaceBetween: 8, children: images.map((image, index) => (
                 // eslint-disable-next-line @eslint-react/no-array-index-key
                 jsx(SwiperSlide, { className: styles.slide, children: jsx("div", { className: styles.thumb, children: jsx(Image, { className: styles.image, fit: "contain", height: 80, image: {
                                 1: image['1'],

package/dist/message/message.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { SolidAttentionIcon } from '../icons/solid/solid-attention-icon.js';

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

@@ -62,7 +62,7 @@ function CreateAccountForm({ errorType, isDisabled: _isDisabled = false, isPendi
         });
     };
     // form header
-    const header = (jsx(Heading, { "data-test-selector": "PageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: title }));
+    const header = (jsx(Heading, { "data-test-selector": "pageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: title }));
     // form footer
     const footer = (jsx(FormSegment, { children: jsx(Button, { "data-test-selector": "createAccount_createButton", isDisabled: isDisabled, isLoading: isPendingCreateAccount && 'Creating account...', type: "submit", withArrow: true, children: t('create account') }) }));
     return (jsxs(Form, { "aria-label": title, autoComplete: true, className: styles['create-account-form'], errorMessage: errorType && errorMessages[errorType], footer: footer, header: header, onSubmit: handleSubmit, title: title, children: [jsxs(FormSegmentGroup, { children: [jsx(FormSegment, { children: jsx(TextField, { autoComplete: "username", "data-test-selector": "createAccount_email", inputMode: "email", isDisabled: isDisabled, isRequired: true, label: t('Email'), name: "email", type: "email", validate: value => {

package/dist/pages/account/create-account-page/create-account-page.js

@@ -20,8 +20,10 @@ function CreateAccountPage({ returnUrl } = {}) {
     const { error: errorCreateAccount, isPending: isPendingCreateAccount, isSuccess, mutate: createAccount, } = useCreateAccount();
     const isExistingAccount = errorCreateAccount instanceof ExistingAccountError;
     const isDisabled = isSuccess || isExistingAccount;
-    const continuePath = returnUrl && returnUrl !== paths.ACCOUNT_CREATE ? returnUrl : paths.ACCOUNT;
-    const isReturnToShipping = returnUrl === paths.CHECKOUT_SHIPPING;
+    const continuePath = returnUrl && decodeURIComponent(returnUrl) !== paths.ACCOUNT_CREATE
+        ? decodeURIComponent(returnUrl)
+        : paths.ACCOUNT;
+    const isReturnToShipping = returnUrl && decodeURIComponent(returnUrl) === paths.CHECKOUT_SHIPPING;
     const onSubmit = ({ data }) => {
         createAccount(data, {
             onSuccess() {
@@ -40,7 +42,7 @@ function CreateAccountPage({ returnUrl } = {}) {
         navigate(continuePath, { reload: true });
         return;
     }
-    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, children: jsx(CreateAccountForm, { errorType: errorType, isDisabled: isDisabled, isPendingCreateAccount: isPendingCreateAccount, onSubmit: onSubmit }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: continuePath, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isSuccess && !isReturnToShipping, title: "Account created", children: jsx("p", { children: jsx(FormattedMessage, { id: "Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support." }) }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: `${paths.SIGN_IN}${returnUrl ? `?returnUrl=${continuePath}` : ''}`, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue to sign in" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isExistingAccount, title: "Existing account", children: jsx("p", { children: jsx(FormattedMessage, { id: "The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support." }) }) })] }));
+    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, "data-test-selector": "create-account-page", children: jsx(CreateAccountForm, { errorType: errorType, isDisabled: isDisabled, isPendingCreateAccount: isPendingCreateAccount, onSubmit: onSubmit }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: continuePath, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isSuccess && !isReturnToShipping, title: "Account created", children: jsx("p", { children: jsx(FormattedMessage, { id: "Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support." }) }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: `${paths.SIGN_IN}${returnUrl ? `?returnUrl=${continuePath}` : ''}`, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue to sign in" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isExistingAccount, title: "Existing account", children: jsx("p", { children: jsx(FormattedMessage, { id: "The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support." }) }) })] }));
 }
 
 export { CreateAccountPage };

package/dist/pages/account/layouts/sign-in-page-layout/sign-in-page-layout.d.ts

@@ -2,7 +2,8 @@ import { ReactNode } from 'react';
 import { ImageType } from '../../../../shared/model/image';
 export interface SignInPageLayoutProps {
     children?: ReactNode;
+    'data-test-selector': string;
     fullHeight?: boolean;
     image?: ImageType;
 }
-export declare function SignInPageLayout({ children, fullHeight, image, }: SignInPageLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function SignInPageLayout({ children, 'data-test-selector': dataTestSelector, fullHeight, image, }: SignInPageLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/account/layouts/sign-in-page-layout/sign-in-page-layout.js

@@ -1,14 +1,12 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useIsBreakpoint } from '../../../../shared/hooks/use-is-breakpoint.js';
 import { Image } from '../../../../media/image/image.js';
 import { SIGN_IN_PAGE_BACKGROUND_IMAGE } from './sign-in-page-background-image.js';
 import styles from './sign-in-page-layout.module.css.js';
 
-function SignInPageLayout({ children, fullHeight, image = SIGN_IN_PAGE_BACKGROUND_IMAGE, }) {
-    const isLg = useIsBreakpoint('lg');
-    return (jsxs("div", { className: clsx(styles['sign-in-page-layout'], fullHeight && styles['full-height']), children: [jsx("section", { className: styles.main, children: children }), isLg && (jsx("div", { className: styles.side, children: jsx("div", { className: styles.image, children: jsx(Image, { image: image, title: "" }) }) }))] }));
+function SignInPageLayout({ children, 'data-test-selector': dataTestSelector, fullHeight, image = SIGN_IN_PAGE_BACKGROUND_IMAGE, }) {
+    return (jsxs("div", { className: clsx(styles['sign-in-page-layout'], fullHeight && styles['full-height']), "data-test-selector": dataTestSelector, children: [jsx("section", { className: styles.main, children: children }), jsx("div", { className: styles.side, children: jsx("div", { className: styles.image, children: jsx(Image, { image: image, title: "" }) }) })] }));
 }
 
 export { SignInPageLayout };

package/dist/pages/account/sign-in-page/sign-in-page.js

@@ -37,7 +37,7 @@ function SignInPage({ returnUrl } = {}) {
         navigate(returnUrl || paths.HOME, { reload: true });
     };
     const allowGuestSignIn = returnUrl === paths.CHECKOUT_SHIPPING;
-    const createAccountPath = `${paths.ACCOUNT_CREATE}${returnUrl ? `?returnUrl=${returnUrl}` : ''}`;
+    const createAccountPath = `${paths.ACCOUNT_CREATE}${returnUrl ? `?returnUrl=${encodeURIComponent(returnUrl)}` : ''}`;
     const onSubmit = ({ data }) => {
         resetSignIn();
         resetCreateGuest();
@@ -57,7 +57,7 @@ function SignInPage({ returnUrl } = {}) {
     const onRecoverPasswordDialogOpen = () => {
         setRecoverPasswordDialogOpen(true);
     };
-    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, createAccountPath: createAccountPath, errorType: errorType, initialEmail: session?.isGuest ? '' : session?.email, initialRememberMe: session?.rememberMe, isDisabled: !session || isSuccess, isLoading: isLoading, isPendingGuestSignIn: isPendingCreateGuest, isPendingUserSignIn: isPendingSignIn, onRecoverPasswordDialogOpen: onRecoverPasswordDialogOpen, onSubmit: onSubmit }) }), jsx(RecoverPasswordDialog, { isOpen: isRecoverPasswordDialogOpen, onOpenChange: isOpen => setRecoverPasswordDialogOpen(isOpen) })] }));
+    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, "data-test-selector": "signInPage", children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, createAccountPath: createAccountPath, errorType: errorType, initialEmail: session?.isGuest ? '' : session?.email, initialRememberMe: session?.rememberMe, isDisabled: !session || isSuccess, isLoading: isLoading, isPendingGuestSignIn: isPendingCreateGuest, isPendingUserSignIn: isPendingSignIn, onRecoverPasswordDialogOpen: onRecoverPasswordDialogOpen, onSubmit: onSubmit }) }), jsx(RecoverPasswordDialog, { isOpen: isRecoverPasswordDialogOpen, onOpenChange: isOpen => setRecoverPasswordDialogOpen(isOpen) })] }));
 }
 
 export { SignInPage };

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

@@ -82,7 +82,7 @@ function CartContent({ cartLines }) {
     if (!currencyCode)
         throw new Error(`Currency code not found for symbol ${currentCart.currencySymbol}`);
     return (jsx(CheckoutPageLayout, { actions: {
-            primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: "/CheckoutShipping", children: jsx(FormattedMessage, { id: "Start checkout" }) })),
+            primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: paths.CHECKOUT_SHIPPING, children: jsx(FormattedMessage, { id: "Start checkout" }) })),
             secondary: isAuthenticated ? (jsx(Button, { color: "secondary", "data-test-selector": "saveCartForLaterButton", onClick: () => {
                     saveCartForLater.mutate({ cart: currentCart });
                 }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })) : (jsx(Button, { color: "secondary", "data-test-selector": "saveCartForLaterButton", href: paths.SIGN_IN, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })),

package/dist/pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-content.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './checkout-page-section.module.css.js';

package/dist/pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-header.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Heading } from '../../../../../typography/heading/heading.js';
 import styles from './checkout-page-section.module.css.js';

package/dist/pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-link.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import styles from './checkout-page-section.module.css.js';
 

package/dist/pages/checkout/layouts/checkout-page-layout/components/checkout-page-section.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { CheckoutPageSectionHeader } from './checkout-page-section-header.js';

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

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

package/dist/pages/checkout/payment-page/hooks/use-has-returned-from-adyen.js

@@ -1,3 +1,4 @@
+"use client";
 import { useGetAdyenRedirectResult } from './use-get-adyen-redirect-result.js';
 
 function useHasReturnedFromAdyen() {

package/dist/pages/checkout/shipping-page/hooks/use-patch-shipping-details.js

@@ -1,3 +1,4 @@
+"use client";
 import { useAwaitableMutation } from '../../../../shared/api/shared/hooks/use-awaitable-mutation.js';
 import { patchSession } from '../../../../shared/api/storefront/services/authentication-service.js';
 import { patchCart } from '../../../../shared/api/storefront/services/cart-service.js';

package/dist/pages/components/page-container/page-container.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import resetStyles from '../../../shared/reset.module.css.js';

package/dist/pages/components/page-meta-data/page-meta-data.js

@@ -1,3 +1,4 @@
+"use client";
 import { environment } from '../../../shared/utils/environment.js';
 
 function addOrUpdateElement(selector, { attributes, tag, }) {

package/dist/pages/loading-page/loading-page.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { BlankPageSpacer } from '../../loading/blank-page-spacer.js';
 import { LoadingOverlay } from '../../loading/loading-overlay.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { FormSegmentGroup } from '../../../../forms/layout/form/form-segment-group.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { PasswordField } from '../../../../forms/fields/password-field/password-field.js';
 import { FormSegment } from '../../../../forms/layout/form/form-segment.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFetchCurrentAccount } from '../../../../shared/api/storefront/hooks/account/use-fetch-current-account.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { MenuList } from '../../../lists/menu-list/menu-list.js';

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

@@ -1,3 +1,4 @@
+"use client";
 import { SolidCartIcon } from '../../../icons/solid/solid-cart-icon.js';
 import { SolidFavoriteIcon } from '../../../icons/solid/solid-favorite-icon.js';
 import { SolidLoginIcon } from '../../../icons/solid/solid-login-icon.js';