@sonic-equipment/ui 0.0.111 → 0.0.113

package/dist/index.d.ts

@@ -129,7 +129,6 @@ declare const request: Request;
 declare const features: {
     readonly language: "language";
     readonly pdp: "pdpV2";
-    readonly pdpv1: "pdpV1";
     readonly plpv1: "plpV1";
     readonly searchv1: "searchV1";
 };
@@ -3828,35 +3827,47 @@ type TranslationId$1 =
   | "Unfortnately, We found no articles for your search '{0}'"
   | ' to your account to manage your lists.'
   | 'Add to list'
+  | 'Amount: {0}'
   | '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?'
   | 'Cancel'
   | 'Chosen filters'
   | 'Clear filters'
   | 'Clear'
+  | 'Continue'
   | 'Continue shopping'
+  | 'Cost overview'
   | 'Country'
   | 'Create new list'
   | 'create account'
+  | 'Delivery expected in {0} {1}'
   | 'Double check your spelling'
   | 'Downloads'
   | 'Excl. VAT'
   | 'Explore by categories'
   | 'Exploring our products by category'
   | 'Features'
+  | 'Fulfillment method'
   | 'Hide filters'
   | 'Incl. VAT'
   | 'Includes'
   | 'Language'
   | 'List name already exists'
   | 'New list name'
+  | 'Order number'
+  | 'pc'
   | 'Please Sign In'
   | 'Popular searches'
+  | 'Print'
   | 'Product Features'
   | 'Products'
+  | 'Product'
   | 'Quick access'
   | 'Recent searches'
   | 'Recently viewed'
+  | 'Remove all'
   | 'Searching again using more general terms'
   | 'See all results'
   | 'Select a list'
@@ -3865,6 +3876,7 @@ type TranslationId$1 =
   | 'Your favorites are available on multiple devices'
   | 'Save'
   | 'Share your favorite list with others'
+  | 'Shipping and handling'
   | 'Show all'
   | 'Show filters'
   | 'Show less'
@@ -3874,6 +3886,7 @@ type TranslationId$1 =
   | 'Sort by'
   | 'Specifications'
   | 'Submit'
+  | 'Subtotal'
   | 'Suggestions'
   | 'The product has been added to your cart.'
   | 'The product has been updated in your cart.'
@@ -3882,7 +3895,9 @@ type TranslationId$1 =
   | 'Unable to update the product in your cart.'
   | 'Unable to remove the product from your cart.'
   | 'Try another search'
+  | 'Total'
   | 'Use fewer keywords'
+  | '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'
@@ -3972,7 +3987,7 @@ interface UpdateCartLineParams {
 }
 declare function useUpdateCartLineById(): _tanstack_react_query.UseMutationResult<void, Error, UpdateCartLineParams, unknown>;
 
-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 to list' | 'An unexpected error occured' | 'Are you looking for information about our service? Please visit our customer support page' | 'Cancel' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Continue shopping' | 'Country' | 'Create new list' | 'create account' | 'Double check your spelling' | 'Downloads' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Features' | 'Hide filters' | 'Incl. VAT' | 'Includes' | 'Language' | 'List name already exists' | 'New list name' | 'Please Sign In' | 'Popular searches' | 'Product Features' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Shop more efficiently and quicker with a favorites list' | 'Easily add your favorite products' | 'Your favorites are available on multiple devices' | 'Save' | 'Share your favorite list with others' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'Specifications' | 'Submit' | 'Suggestions' | 'The product has been added to your cart.' | 'The product has been updated in your cart.' | 'The product has been removed from your cart.' | 'Unable to add the product to your cart.' | 'Unable to update the product in your cart.' | 'Unable to remove the product from your cart.' | 'Try another search' | 'Use fewer keywords' | '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 ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';
+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 to list' | 'Amount: {0}' | '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?' | 'Cancel' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Continue' | 'Continue shopping' | 'Cost overview' | 'Country' | 'Create new list' | 'create account' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Features' | 'Fulfillment method' | 'Hide filters' | 'Incl. VAT' | 'Includes' | 'Language' | 'List name already exists' | 'New list name' | 'Order number' | 'pc' | 'Please Sign In' | 'Popular searches' | 'Print' | 'Product Features' | 'Products' | 'Product' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Remove all' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Shop more efficiently and quicker with a favorites list' | 'Easily add your favorite products' | 'Your favorites are available on multiple devices' | 'Save' | 'Share your favorite list with others' | 'Shipping and handling' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'The product has been added to your cart.' | 'The product has been updated in your cart.' | 'The product has been removed from your cart.' | 'Unable to add the product to your cart.' | 'Unable to update the product in your cart.' | 'Unable to remove the product from your cart.' | 'Try another search' | 'Total' | 'Use fewer keywords' | '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 ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';
 
 type Translations = Record<TranslationId, string>;
 type FormatMessageFunction = (id: string, ...replacementValues: readonly string[]) => string | undefined;
@@ -4472,9 +4487,10 @@ declare function CountrySelector({ defaultCountryCode, defaultLanguageCode, onCh
 
 interface ProductPriceProps {
     className?: string;
-    isVatIncluded: boolean;
+    isVatIncluded: boolean | null;
     originalPrice: number;
     price: number;
+    pricePerUnit?: number;
 }
 declare function ProductPrice({ className, isVatIncluded, originalPrice, price, }: ProductPriceProps): react_jsx_runtime.JSX.Element | undefined;
 
@@ -4617,11 +4633,17 @@ interface IntlProviderProps {
 }
 declare function IntlProvider({ children, formatMessage, languageCode: _languageCode, }: IntlProviderProps): react_jsx_runtime.JSX.Element;
 
-type FormattedMessageFunction = (id: TranslationId, options?: {
-    fallbackValue?: string;
-    optional?: boolean;
-    replacementValues?: Record<string, string>;
-}) => string;
+interface FormattedMessageFunction {
+    (id: TranslationId, options?: {
+        fallbackValue?: string;
+        optional?: boolean;
+        replacementValues?: Record<string, string>;
+    }): string;
+    pluralize: {
+        (translationId: string, count: number): string;
+        (translationIdPrefix: string, translationId: string, count: number): string;
+    };
+}
 declare function useFormattedMessage(): FormattedMessageFunction;
 
 interface ProductOverviewGridProps {

package/dist/index.js

@@ -214,7 +214,7 @@ const configPerEnvironment = {
         ALGOLIA_API_KEY: 'e0edf30798a6b2e4e44fd25f0f2f9646',
         ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
         ALGOLIA_HOST: 'sonicequipment.commerce.insitesandbox.com',
-        BFF_API_URL: 'https://sonicequipment.commerce.insitesandbox.com/api/v1/bff',
+        BFF_API_URL: 'https://localhost:8000/api/v1/bff',
         COOKIE_DOMAIN: '.insitesandbox.com',
         SHOP_API_URL: 
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -484,7 +484,6 @@ const request = (function createRequestFunction() {
 const features = {
     language: 'language',
     pdp: 'pdpV2',
-    pdpv1: 'pdpV1',
     plpv1: 'plpV1',
     searchv1: 'searchV1',
 };
@@ -1348,9 +1347,9 @@ function Button({ _pseudo = 'none', children, className, color = 'primary', cond
     const onClick = (e) => {
         if (_onClick)
             _onClick(e);
+        e.stopPropagation();
         if (type === 'submit')
             return;
-        e.stopPropagation();
         e.preventDefault();
     };
     return (jsxs("button", { className: clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), "data-disabled": isDisabled ? true : undefined, disabled: isDisabled, onClick: onClick, type: type, children: [jsx(Fragment, { children: showIconOnLeft && jsx("span", { className: buttonStyles.icon, children: icon }) }), children, withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && jsx("span", { className: buttonStyles.icon, children: icon })] }));
@@ -1672,7 +1671,7 @@ const IntlContext = createContext({
 
 function useFormattedMessage() {
     const { formatMessage } = useContext(IntlContext);
-    return (id, { fallbackValue, optional, replacementValues } = {}) => {
+    const formatFunction = (id, { fallbackValue, optional, replacementValues } = {}) => {
         const message = formatMessage(id, 
         /* The following code converts replacementValues from an object to an array.
          * This is to keep the external API compatible with react-intls version
@@ -1693,6 +1692,13 @@ function useFormattedMessage() {
             console.warn(`Missing translation with id: ${id}`);
         return message || fallbackValue || id;
     };
+    function pluralize(translationIdOrPrefix, translationIdOrCount, count) {
+        return formatFunction((typeof translationIdOrCount === 'number'
+            ? `${translationIdOrPrefix}.${translationIdOrCount === 1 ? 'singular' : 'plural'}`
+            : `${translationIdOrPrefix}.${translationIdOrCount}.${count === 1 ? 'singular' : 'plural'}`));
+    }
+    formatFunction.pluralize = pluralize;
+    return formatFunction;
 }
 
 const FormattedMessage = ({ fallbackValue, id, optional, replacementValues, }) => useFormattedMessage()(id, { fallbackValue, optional, replacementValues });
@@ -1845,13 +1851,14 @@ function Tag({ children }) {
     return (jsxs("div", { className: styles$Z.tag, children: [jsx("div", { className: styles$Z.body, children: children }), jsx("svg", { className: styles$Z.shape, height: "16", viewBox: "0 0 9 16", width: "9", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.92461763,0 L0,0 L0,16 L1.92461763,16 L6.4117887,16 L8.87489381,7.57121588 C9.23711515,6.3325062 8.79482383,4.99454094 7.78060408,4.2560794 L1.92461763,0 Z", fill: "currentColor" }) })] }));
 }
 
-var styles$Y = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","is-hidden":"product-price-module-V1NCf","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","vat":"product-price-module-96DoG"};
-
 const formatPrice = (price) => new Intl.NumberFormat('en-US', {
     maximumFractionDigits: 2,
     minimumFractionDigits: 2,
 }).format(price);
-function ProductPrice({ className, isVatIncluded, originalPrice, price, }) {
+
+var styles$Y = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","is-hidden":"product-price-module-V1NCf","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","price-per-unit":"product-price-module-syhum","vat":"product-price-module-96DoG"};
+
+function ProductPrice({ className, isVatIncluded = false, originalPrice, price, }) {
     if (isNaN(price))
         return;
     const originalPriceWithCurrency = formatPrice(!isNaN(originalPrice) ? originalPrice : price);
@@ -1860,7 +1867,7 @@ function ProductPrice({ className, isVatIncluded, originalPrice, price, }) {
     const showOriginalPrice = priceWithCurrency !== originalPriceWithCurrency;
     return (jsxs("div", { className: clsx(className, styles$Y['product-price']), children: [jsx("span", { className: clsx(styles$Y['original-price'], {
                     [styles$Y['is-hidden']]: !showOriginalPrice,
-                }), children: originalPriceWithCurrency }), jsxs("div", { className: styles$Y['current-price-wrapper'], children: [jsxs("div", { className: styles$Y['current-price'], children: [jsx("span", { className: styles$Y.wholes, children: wholes }), jsx("span", { className: styles$Y.dot, children: "." }), jsx("span", { className: styles$Y.decimals, children: decimals })] }), jsx("span", { className: styles$Y.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
+                }), children: originalPriceWithCurrency }), jsxs("div", { className: styles$Y['current-price-wrapper'], children: [jsxs("div", { className: styles$Y['current-price'], children: [jsx("span", { className: styles$Y.wholes, children: wholes }), jsx("span", { className: styles$Y.dot, children: "." }), jsx("span", { className: styles$Y.decimals, children: decimals })] }), isVatIncluded !== null && (jsx("span", { className: styles$Y.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) }))] })] }));
 }
 
 var styles$X = {"product-sku":"product-sku-module-ITb8x"};
@@ -7874,10 +7881,10 @@ function Modal({ children, className, hasCloseButton, isDismissable, isFullScree
             });
         }, className: clsx(styles$O['modal-overlay'], className), isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: () => shouldCloseOnInteractOutside, children: jsxs(Modal$1, { className: clsx(styles$O.modal, {
                 [styles$O['is-full-screen']]: isFullScreen,
-            }), children: [hasCloseButton && (jsx("div", { className: styles$O.close, children: jsx(IconButton, { color: "secondary", isDisabled: !isDismissable, onClick: () => onOpenChange(false), children: jsx(StrokeCloseboxIcon, {}) }) })), jsx("div", { className: styles$O.content, children: children })] }) }));
+            }), children: [hasCloseButton && (jsx("div", { className: styles$O.close, children: jsx(IconButton, { color: "secondary", isDisabled: !isDismissable, onClick: () => onOpenChange?.(false), children: jsx(StrokeCloseboxIcon, {}) }) })), jsx("div", { className: styles$O.content, children: children })] }) }));
 }
 
-var styles$N = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","bold":"heading-module-xvrxo","xxl":"heading-module-Kn3ZN","xl":"heading-module--hZs-","l":"heading-module-WrJRY","m":"heading-module-hTexc","s":"heading-module-7W29m","xs":"heading-module-SgaLB","xxs":"heading-module-33en7"};
+var styles$N = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","bold":"heading-module-xvrxo","xxl":"heading-module-Kn3ZN","xl":"heading-module--hZs-","l":"heading-module-WrJRY","m":"heading-module-hTexc","s":"heading-module-7W29m","xs":"heading-module-SgaLB","xxs":"heading-module-33en7","xxxs":"heading-module-qvrEk"};
 
 const sizeToTag = {
     l: 'h3',
@@ -7887,6 +7894,7 @@ const sizeToTag = {
     xs: 'h6',
     xxl: 'h1',
     xxs: 'h6',
+    xxxs: 'h6',
 };
 function Heading({ bold = true, children, className, italic, size = 'xxl', tag, uppercase, }) {
     return createElement$1(tag || sizeToTag[size], {
@@ -7900,22 +7908,28 @@ function Heading({ bold = true, children, className, italic, size = 'xxl', tag,
 
 var styles$M = {"dialog":"dialog-module-qKzgy","header":"dialog-module-ZnsAe","close":"dialog-module-Y7Tqg","footer":"dialog-module-y7Axm"};
 
-function Footer({ close }) {
-    return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", size: "md", type: "submit", children: "Submit" }), jsx(Button, { color: "secondary", onClick: close, size: "md", variant: "outline", children: "Close" })] }));
+function Footer({ cancelLabel, close, submitLabel }) {
+    return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", size: "md", type: "submit", children: jsx(FormattedMessage, { id: submitLabel }) }), jsx(Button, { color: "secondary", onClick: close, size: "md", variant: "outline", children: jsx(FormattedMessage, { id: cancelLabel }) })] }));
 }
-function Dialog({ allowClose = true, children, className, dialogClassName, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, title, validationErrors, }) {
-    return (jsx(Modal, { className: clsx(styles$M['modal-overlay'], className), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles$M.dialog, dialogClassName), children: ({ close }) => (jsxs(Form, { className: styles$M.form, onSubmit: onSubmit || (e => e.preventDefault), validationErrors: validationErrors, children: [jsxs("header", { className: styles$M.header, children: [!hideTitle && (jsx(Heading, { className: styles$M.heading, size: "xs", children: title })), hasCloseButton && (jsx("div", { className: styles$M.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) }))] }), jsx("div", { className: styles$M.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$M.footer, children: footer instanceof Function ? footer({ close }) : footer })] })) }) }));
+function Dialog({ allowClose = true, cancelLabel = 'Close', children, className, dialogClassName, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel = 'Submit', title, validationErrors, }) {
+    return (jsx(Modal, { className: clsx(styles$M['modal-overlay'], className), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles$M.dialog, dialogClassName), children: ({ close }) => (jsxs(Form, { className: styles$M.form, onSubmit: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onSubmit?.(e);
+                }, validationErrors: validationErrors, children: [jsxs("header", { className: styles$M.header, children: [!hideTitle && (jsx(Heading, { className: styles$M.heading, size: "xs", children: title })), hasCloseButton && (jsx("div", { className: styles$M.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) }))] }), jsx("div", { className: styles$M.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$M.footer, children: footer instanceof Function
+                            ? footer({ cancelLabel, close, submitLabel })
+                            : footer })] })) }) }));
 }
 
 var styles$L = {"country-selector-dialog":"country-selector-dialog-module-mMJS0","content":"country-selector-dialog-module-z-ZqY","logo":"country-selector-dialog-module-7VjsF","intro":"country-selector-dialog-module-IdVDt","selects":"country-selector-dialog-module-Nvikf"};
 
-function CountrySelectorDialog({ countries, isOpen, onSubmit, selectedCountry, selectedLanguage, showCountry = true, }) {
+function CountrySelectorDialog({ countries, isDismissable, isOpen, onOpenChange, onSubmit, selectedCountry, selectedLanguage, showCountry = true, }) {
     const t = useFormattedMessage();
     const [currentCountry, setCurrentCountry] = useState(selectedCountry);
     const [currentLanguage, setCurrentLanguage] = useState(selectedLanguage);
     const countryOptions = useMemo(() => countries.reduce((acc, country) => ({
         ...acc,
-        [country.id]: t(`clSelector.${country.name}`),
+        [country.id]: t(`clSelector.${country.abbreviation}`),
     }), {}), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [countries]);
@@ -7929,11 +7943,11 @@ function CountrySelectorDialog({ countries, isOpen, onSubmit, selectedCountry, s
         setCurrentLanguage(fallbackLanguage);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentCountry]);
-    return (jsx(Dialog, { hideTitle: true, allowClose: true, className: styles$L.modal, dialogClassName: styles$L['country-selector-dialog'], footer: jsx(Button, { withArrow: true, type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }), hasCloseButton: false, isOpen: isOpen, onOpenChange: () => { }, onSubmit: e => {
+    return (jsx(Dialog, { hideTitle: true, allowClose: isDismissable, className: styles$L.modal, dialogClassName: styles$L['country-selector-dialog'], footer: jsx(Button, { withArrow: true, type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }), hasCloseButton: isDismissable, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: e => {
             onSubmit({ country: currentCountry, language: currentLanguage });
             e.preventDefault();
             e.stopPropagation();
-        }, title: "Country Selector", children: jsxs("div", { className: styles$L.content, children: [jsx("svg", { className: styles$L.logo, height: "32", viewBox: "0 0 134 32", width: "134", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { d: "M15.83 11.533c2.42 0 4.382 1.977 4.382 4.415 0 8.794-7.1 15.95-15.83 15.95C1.963 31.897 0 29.92 0 27.481c0-2.354 1.83-4.278 4.134-4.408l.249-.007c3.797 0 6.905-3.036 7.058-6.826l.006-.293c0-2.438 1.963-4.415 4.383-4.415zM15.83 0c2.42 0 4.383 1.977 4.383 4.415 0 2.355-1.83 4.279-4.134 4.409l-.249.007c-3.8 0-6.906 3.035-7.059 6.824l-.006.293c0 2.438-1.962 4.415-4.382 4.415S0 18.386 0 15.948C0 7.154 7.101 0 15.83 0zm8.208 16.022c0 8.794 7.101 15.95 15.83 15.95s15.83-7.156 15.83-15.95S48.597.074 39.868.074s-15.83 7.154-15.83 15.948zm8.765 0c0-3.924 3.169-7.118 7.065-7.118 3.895 0 7.065 3.194 7.065 7.118 0 3.926-3.17 7.119-7.065 7.119-3.896 0-7.065-3.193-7.065-7.12zm76.888-11.276c-6.173 6.217-6.173 16.335-.002 22.553 6.173 6.217 16.215 6.217 22.388 0a4.44 4.44 0 0 0 .001-6.244 4.359 4.359 0 0 0-6.003-.184l-.194.184a7.04 7.04 0 0 1-9.994 0c-2.753-2.775-2.753-7.29.002-10.065a7.036 7.036 0 0 1 9.751-.233l.24.231a4.36 4.36 0 0 0 6.198 0 4.44 4.44 0 0 0-.001-6.245c-6.173-6.217-16.215-6.216-22.386.003zm-17.162-.174v22.863c0 2.439 1.961 4.416 4.381 4.416 2.422 0 4.384-1.977 4.384-4.416V4.572c0-2.439-1.962-4.416-4.384-4.416-2.42 0-4.38 1.977-4.38 4.416zM64.1.1c-2.42 0-4.383 1.977-4.383 4.415v23.07c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V8.93h3.933c3.895 0 7.065 3.192 7.065 7.118v11.537c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V16.048C88.244 7.254 81.143.1 72.414.1h-8.316z", fill: "#000" }), jsx("path", { d: "M47.036 16.022c0 3.99-3.209 7.222-7.168 7.222-3.96 0-7.169-3.233-7.169-7.222 0-3.989 3.21-7.222 7.169-7.222 3.96 0 7.168 3.233 7.168 7.222", fill: "#E30613" })] }) }), jsx("p", { className: styles$L.intro, children: jsx(FormattedMessage, { id: "Welcome to Sonic Equipment. Please choose your country and language below." }) }), jsxs("div", { className: styles$L.selects, children: [showCountry && (jsx(Select, { label: t('Country'), onChange: value => setCurrentCountry(countries.find(country => country.id === value) ||
+        }, shouldCloseOnInteractOutside: isDismissable, title: "Country Selector", children: jsxs("div", { className: styles$L.content, children: [jsx("svg", { className: styles$L.logo, height: "32", viewBox: "0 0 134 32", width: "134", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { d: "M15.83 11.533c2.42 0 4.382 1.977 4.382 4.415 0 8.794-7.1 15.95-15.83 15.95C1.963 31.897 0 29.92 0 27.481c0-2.354 1.83-4.278 4.134-4.408l.249-.007c3.797 0 6.905-3.036 7.058-6.826l.006-.293c0-2.438 1.963-4.415 4.383-4.415zM15.83 0c2.42 0 4.383 1.977 4.383 4.415 0 2.355-1.83 4.279-4.134 4.409l-.249.007c-3.8 0-6.906 3.035-7.059 6.824l-.006.293c0 2.438-1.962 4.415-4.382 4.415S0 18.386 0 15.948C0 7.154 7.101 0 15.83 0zm8.208 16.022c0 8.794 7.101 15.95 15.83 15.95s15.83-7.156 15.83-15.95S48.597.074 39.868.074s-15.83 7.154-15.83 15.948zm8.765 0c0-3.924 3.169-7.118 7.065-7.118 3.895 0 7.065 3.194 7.065 7.118 0 3.926-3.17 7.119-7.065 7.119-3.896 0-7.065-3.193-7.065-7.12zm76.888-11.276c-6.173 6.217-6.173 16.335-.002 22.553 6.173 6.217 16.215 6.217 22.388 0a4.44 4.44 0 0 0 .001-6.244 4.359 4.359 0 0 0-6.003-.184l-.194.184a7.04 7.04 0 0 1-9.994 0c-2.753-2.775-2.753-7.29.002-10.065a7.036 7.036 0 0 1 9.751-.233l.24.231a4.36 4.36 0 0 0 6.198 0 4.44 4.44 0 0 0-.001-6.245c-6.173-6.217-16.215-6.216-22.386.003zm-17.162-.174v22.863c0 2.439 1.961 4.416 4.381 4.416 2.422 0 4.384-1.977 4.384-4.416V4.572c0-2.439-1.962-4.416-4.384-4.416-2.42 0-4.38 1.977-4.38 4.416zM64.1.1c-2.42 0-4.383 1.977-4.383 4.415v23.07c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V8.93h3.933c3.895 0 7.065 3.192 7.065 7.118v11.537c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V16.048C88.244 7.254 81.143.1 72.414.1h-8.316z", fill: "#000" }), jsx("path", { d: "M47.036 16.022c0 3.99-3.209 7.222-7.168 7.222-3.96 0-7.169-3.233-7.169-7.222 0-3.989 3.21-7.222 7.169-7.222 3.96 0 7.168 3.233 7.168 7.222", fill: "#E30613" })] }) }), jsx("p", { className: styles$L.intro, children: jsx(FormattedMessage, { id: "Welcome to Sonic Equipment. Please choose your country and language below." }) }), jsxs("div", { className: styles$L.selects, children: [showCountry && (jsx(Select, { label: t('Country'), onChange: value => setCurrentCountry(countries.find(country => country.id === value) ||
                                 currentCountry), options: countryOptions, selectedOption: currentCountry.id, showPlaceholder: false, variant: "solid" })), jsx(Select, { label: t('Language'), onChange: value => setCurrentLanguage(currentCountry.languages.find(language => language.id === value) || currentLanguage), options: languageOptions, selectedOption: currentLanguage.id, showPlaceholder: false, variant: "solid" })] })] }) }));
 }
 
@@ -7945,7 +7959,7 @@ function CountrySelectorTrigger({ onClick, selectedCountry, selectedLanguage, sh
         return;
     const abbreviation = selectedCountry.abbreviation.toLowerCase();
     const flagSrc = `https://res.cloudinary.com/dkz9eknwh/image/upload/v1729678637/images/flags/${abbreviation}.svg`;
-    return (jsxs("button", { "aria-label": "Open country selector dialog", className: styles$K['country-selector-trigger'], onClick: onClick, type: "button", children: [jsx(Image, { className: styles$K.flag, height: 24, image: { 1: flagSrc, 2: flagSrc, 3: flagSrc, altText: abbreviation }, title: abbreviation, width: 24 }), jsxs("div", { className: styles$K.text, children: [showCountry && (jsxs(Fragment, { children: [jsx("span", { children: t(`clSelector.${selectedCountry.name}`) }), jsx("span", { className: styles$K.divider, children: "-" })] })), jsx("span", { children: selectedLanguage.description })] })] }));
+    return (jsxs("button", { "aria-label": "Open country selector dialog", className: styles$K['country-selector-trigger'], onClick: onClick, type: "button", children: [jsx(Image, { className: styles$K.flag, height: 24, image: { 1: flagSrc, 2: flagSrc, 3: flagSrc, altText: abbreviation }, title: abbreviation, width: 24 }), jsxs("div", { className: styles$K.text, children: [showCountry && (jsxs(Fragment, { children: [jsx("span", { children: t(`clSelector.${selectedCountry.abbreviation}`) }), jsx("span", { className: styles$K.divider, children: "-" })] })), jsx("span", { children: selectedLanguage.description })] })] }));
 }
 
 async function fetchCountriesLanguages() {
@@ -8010,9 +8024,21 @@ function useFetchCountriesLanguages({ enabled = true, } = { enabled: true }) {
     });
 }
 
+function useUpdateLocale() {
+    return useMutation({
+        mutationFn: updateLocale,
+        throwOnError: true,
+    });
+}
+
 function useCookie(name, options) {
     const cookieValue = Cookies.get()[name];
     const [stateValue, setStateValue] = useState(cookieValue);
+    useEffect(() => {
+        if (cookieValue === stateValue)
+            return;
+        setStateValue(cookieValue);
+    }, [cookieValue, stateValue]);
     function setValue(valueOrFn) {
         setStateValue(oldValue => {
             const newValue = typeof valueOrFn === 'function' ? valueOrFn(oldValue) : valueOrFn;
@@ -8053,6 +8079,7 @@ const cookieOptions = {
 };
 function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
     const [sessionCountries, setSessionCountries] = useSessionStorage('countries-v1');
+    const { mutate: updateLocale } = useUpdateLocale();
     const [currentCountryId] = useCookie('CurrentCountryId', cookieOptions);
     const [currentLanguageId] = useCookie('CurrentLanguageId', cookieOptions);
     const [contextLanguageCode] = useCookie('SetContextLanguageCode', cookieOptions);
@@ -8067,7 +8094,7 @@ function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [apiCountries]);
     async function updateCountryLanguage({ country, language, }) {
-        await updateLocale({ countryId: country.id, languageId: language.id });
+        updateLocale({ countryId: country.id, languageId: language.id });
     }
     if (error)
         throw error;
@@ -8113,16 +8140,25 @@ function CountrySelector({ defaultCountryCode, defaultLanguageCode, onChange, sh
         defaultCountryCode,
         defaultLanguageCode,
     });
+    const isCountryLanguageSelected = useMemo(() => selectedCountry !== undefined && selectedLanguage !== undefined, [selectedCountry, selectedLanguage]);
+    const isDismissable = isCountryLanguageSelected;
     useEffect(() => {
-        setIsOpen(selectedCountry === undefined || selectedLanguage === undefined);
+        setIsOpen(!isCountryLanguageSelected);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedCountry, selectedLanguage]);
+    }, [isCountryLanguageSelected]);
     if (isFetching)
         return null;
-    return (jsxs(Fragment, { children: [jsx(CountrySelectorTrigger, { onClick: open, selectedCountry: selectedCountry, selectedLanguage: selectedLanguage, showCountry: showCountry }), jsx(CountrySelectorDialog, { countries: countries, isOpen: isOpen, onSubmit: async (args) => {
-                    await updateCountryLanguage(args);
+    return (jsxs(Fragment, { children: [jsx(CountrySelectorTrigger, { onClick: open, selectedCountry: selectedCountry, selectedLanguage: selectedLanguage, showCountry: showCountry }), jsx(CountrySelectorDialog, { countries: countries, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: open => {
+                    if (!isDismissable)
+                        return;
+                    setIsOpen(open);
+                }, onSubmit: async ({ country, language }) => {
+                    if (selectedCountry?.id === country.id &&
+                        selectedLanguage?.id === language.id)
+                        return close();
+                    await updateCountryLanguage({ country, language });
                     close();
-                    onChange?.(args);
+                    onChange?.({ country, language });
                 }, selectedCountry: selectedCountry || defaultCountry, selectedLanguage: selectedLanguage || defaultLanguage, showCountry: showCountry })] }));
 }
 
@@ -8251,39 +8287,57 @@ function useLanguageCode() {
     return languageCode;
 }
 
-const announcementTypes = [
-    'promo',
+async function fetchAnnouncements({ languageCode, }) {
+    return await request({
+        headers: { 'Current-Language-Id': languageCode },
+        url: `${config.BFF_API_URL}/notification/announcement`,
+    });
+}
+
+const announcementTypes = ['promo', 'service'];
+const announcementSubTypes = [
+    'sales',
+    'news',
+    'critical',
     'informative',
     'notice',
-    'critical',
+    'event',
+    'new_product_introduction',
 ];
 function isAnnouncementType(type) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return announcementTypes.includes(type);
 }
+function isAnnouncementSubtype(subtype) {
+    return announcementSubTypes.includes(subtype);
+}
 
 function useFetchAnnouncements({ languageCode, }) {
     return useQuery({
         gcTime: 1 * TIME.DAY,
-        queryFn: async () => await request({
-            headers: { 'Current-Language-Id': languageCode },
-            url: `${config.BFF_API_URL}/notification/announcement`,
-        }),
+        queryFn: () => fetchAnnouncements({ languageCode }),
         queryKey: ['announcements', languageCode],
         refetchInterval: 5 * TIME.MINUTE,
-        select: ({ body }) => body.map(({ endDate, href, id, startDate, text, title, type }) => {
-            if (!isAnnouncementType(type))
-                throw new Error(`Invalid announcement type: ${type}`);
-            return {
-                endDate: endDate ? new Date(endDate) : undefined,
-                href,
-                id,
-                startDate: startDate ? new Date(startDate) : undefined,
-                text,
-                title,
-                type,
-            };
-        }),
+        select: ({ body }) => {
+            if (typeof body === 'string')
+                return [];
+            return body.map(({ endDate, href, id, startDate, subType, text, title, type }) => {
+                if (!isAnnouncementType(type))
+                    throw new Error(`Invalid announcement type: ${type}`);
+                if (!isAnnouncementSubtype(subType)) {
+                    throw new Error(`Invalid announcement subType: ${subType}`);
+                }
+                return {
+                    endDate: endDate ? new Date(endDate) : undefined,
+                    href,
+                    id,
+                    startDate: startDate ? new Date(startDate) : undefined,
+                    subType,
+                    text,
+                    title,
+                    type,
+                };
+            });
+        },
         staleTime: 1 * TIME.DAY,
     });
 }
@@ -8308,16 +8362,35 @@ function GlyphsArrowSemiBoldRightIcon(props) {
     return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "11", viewBox: "0 0 11 11", width: "11", children: jsx("path", { d: "M4.27243829,10 C4.05910402,10.0007527 3.92860879,9.73966348 4.04161427,9.53832073 L6.25359309,5.59919963 C6.37846177,5.37673437 6.36029412,5.09278754 6.20830955,4.89272723 L4.38978231,2.4963789 C4.24091607,2.30024134 4.36625928,2 4.59701551,2 L6.06357848,2 C6.14343478,2 6.2192237,2.03915207 6.27074389,2.10704584 L7.47868905,3.69877757 C8.09849054,4.51523787 8.1726525,5.67297753 7.66341606,6.57973654 L5.82495864,9.85357414 C5.77553993,9.94153429 5.68904024,9.99509493 5.59582936,9.99539668 L4.27243829,10 Z", fillRule: "evenodd" }) }));
 }
 
+function SolidEventIcon(props) {
+    return (jsx("svg", { height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M5.151 21h13.708C20.956 21 22 19.983 22 17.969V6.031C22 4.017 20.956 3 18.859 3H5.151C3.054 3 2 4.007 2 6.031v11.938C2 19.993 3.054 21 5.151 21zm-.15-1.574c-.894 0-1.385-.46-1.385-1.369v-9.22c0-.9.491-1.369 1.385-1.369h13.988c.894 0 1.395.47 1.395 1.369v9.22c0 .91-.501 1.369-1.395 1.369H5.001zm5.047-8.448h.592c.351 0 .462-.098.462-.44v-.577c0-.342-.11-.45-.462-.45h-.592c-.351 0-.471.108-.471.45v.577c0 .342.12.44.471.44zm3.332 0h.592c.351 0 .472-.098.472-.44v-.577c0-.342-.12-.45-.472-.45h-.592c-.351 0-.472.108-.472.45v.577c0 .342.12.44.472.44zm3.331 0h.593c.35 0 .471-.098.471-.44v-.577c0-.342-.12-.45-.471-.45h-.593c-.35 0-.461.108-.461.45v.577c0 .342.11.44.461.44zm-9.994 3.197h.582c.36 0 .471-.097.471-.44v-.576c0-.343-.11-.44-.471-.44h-.582c-.362 0-.472.097-.472.44v.576c0 .343.11.44.472.44zm3.331 0h.592c.351 0 .462-.097.462-.44v-.576c0-.343-.11-.44-.462-.44h-.592c-.351 0-.471.097-.471.44v.576c0 .343.12.44.471.44zm3.332 0h.592c.351 0 .472-.097.472-.44v-.576c0-.343-.12-.44-.472-.44h-.592c-.351 0-.472.097-.472.44v.576c0 .343.12.44.472.44zm3.331 0h.593c.35 0 .471-.097.471-.44v-.576c0-.343-.12-.44-.471-.44h-.593c-.35 0-.461.097-.461.44v.576c0 .343.11.44.461.44zm-9.994 3.207h.582c.36 0 .471-.107.471-.45v-.576c0-.342-.11-.44-.471-.44h-.582c-.362 0-.472.098-.472.44v.577c0 .342.11.45.472.45zm3.331 0h.592c.351 0 .462-.107.462-.45v-.576c0-.342-.11-.44-.462-.44h-.592c-.351 0-.471.098-.471.44v.577c0 .342.12.45.471.45zm3.332 0h.592c.351 0 .472-.107.472-.45v-.576c0-.342-.12-.44-.472-.44h-.592c-.351 0-.472.098-.472.44v.577c0 .342.12.45.472.45z", fill: "currentColor", fillRule: "nonzero" }) }));
+}
+
+function SolidNewsIcon(props) {
+    return (jsx("svg", { height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M17.992 3.784c1.64 0 2.453.813 2.453 2.422V18.12c0 1.61-.812 2.414-2.453 2.414H5.632c.61-.336.806-.804.806-1.64V6.206c0-1.61.82-2.422 2.453-2.422zm-5.984 9.132h-2a1 1 0 0 0-1 1v2.5a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2.5a1 1 0 0 0-1-1zm5.271 2.908h-2.558a.72.72 0 1 0 0 1.442h2.558a.72.72 0 0 0 0-1.442zm0-2.941h-2.558a.72.72 0 0 0 0 1.441h2.558a.72.72 0 0 0 0-1.441zm0-2.942H9.721a.72.72 0 1 0 0 1.442h7.558a.72.72 0 0 0 0-1.442zm0-2.941H9.721a.72.72 0 0 0 0 1.441h7.558a.72.72 0 0 0 0-1.441zM2.992 11.402v6.976c0 .57.414.938.961.938.547-.008.961-.368.961-.938V9.933h-.383c-.953 0-1.539.539-1.539 1.469z", fill: "currentColor", fillRule: "nonzero" }) }));
+}
+
+function SolidSaleIcon(props) {
+    return (jsx("svg", { height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm3.45 5.318c-.638 0-1.26.128-1.26.128l-6.582 9.426.04.008c.143.028.648.12 1.188.12a7.52 7.52 0 0 0 1.216-.12l.044-.008 6.582-9.426s-.622-.128-1.228-.128zm.093 5.465c-1.61 0-2.36.754-2.536 1.86l-.08.465c-.19 1.122.351 1.876 1.962 1.876 1.61 0 2.36-.754 2.535-1.876l.08-.465c.175-1.106-.351-1.86-1.961-1.86zm-.24 1.54c.383 0 .51.095.463.32l-.08.465c-.032.224-.175.337-.558.337-.383 0-.494-.113-.462-.337l.08-.465c.047-.225.19-.32.557-.32zM9.646 7c-1.594 0-2.375.754-2.55 1.876l-.064.465c-.176 1.106.366 1.86 1.96 1.86 1.611 0 2.376-.754 2.552-1.86l.064-.465C11.783 7.754 11.257 7 9.646 7zm-.255 1.555c.383 0 .51.097.463.321l-.064.465c-.048.224-.191.337-.574.337-.383 0-.494-.113-.446-.337l.063-.465c.048-.224.192-.32.558-.32z", fill: "currentColor", fillRule: "nonzero" }) }));
+}
+
+function SolidTagIcon(props) {
+    return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, fill: "currentColor", height: "24", viewBox: "0 0 24 24", width: "24", children: jsx("path", { d: "M12.3939152,3.13425293 L21.8214774,12.5616776 C22.0595075,12.7995703 22.0595075,13.1851489 21.8214774,13.4230416 L13.4230416,21.8214774 C13.3042327,21.9404237 13.1482962,21.9999656 12.9923596,21.9999656 C12.836423,21.9999656 12.6804864,21.9404237 12.5616776,21.8214774 L3.13425293,12.3940527 C1.62191569,10.8815779 1.62191569,8.42069529 3.13425293,6.90835804 L6.90835804,3.13425293 C8.42069529,1.62191569 10.8815779,1.62191569 12.3939152,3.13425293 Z M8.83153453,7.43397705 C8.44568089,7.04812342 7.82028447,7.04812342 7.43443084,7.43397705 C7.04871471,7.81983069 7.04871471,8.44522711 7.43443084,8.83108074 C7.82028447,9.21679687 8.44568089,9.21679687 8.83153453,8.83108074 C9.21738817,8.44522711 9.21738817,7.81983069 8.83153453,7.43397705 Z", fillRule: "evenodd" }) }));
+}
+
 var styles$C = {"announcement":"announcement-module-Xi0L5","wrapper":"announcement-module-4XVjD","icon":"announcement-module-lxmA2","content":"announcement-module-1Jn7y","title":"announcement-module-8k2rK","text":"announcement-module-yXGsN","close":"announcement-module-gZ9ae","informative":"announcement-module-0LTWL","notice":"announcement-module-Ga3lN","critical":"announcement-module-S3nSW","promo":"announcement-module-E6DqW"};
 
 const iconMap = {
     critical: jsx(SolidAttentionIcon, {}),
+    event: jsx(SolidEventIcon, {}),
     informative: jsx(SolidInformationIcon, {}),
+    new_product_introduction: jsx(SolidTagIcon, {}),
+    news: jsx(SolidNewsIcon, {}),
     notice: jsx(SolidNoticeIcon, {}),
-    promo: jsx(SolidInformationIcon, {}),
+    sales: jsx(SolidSaleIcon, {}),
 };
-function Announcement({ announcement: { href, id, text, title, type }, onDismiss, }) {
-    return (jsxs(RouteLink, { className: clsx(styles$C.announcement, styles$C[type]), href: href, children: [jsxs("div", { className: styles$C.wrapper, children: [jsx("div", { className: styles$C.icon, children: iconMap[type] }), jsxs("div", { className: styles$C.content, children: [jsx("h2", { className: styles$C.title, children: title }), jsxs("p", { className: styles$C.text, children: [text, jsx(GlyphsArrowSemiBoldRightIcon, {})] })] })] }), jsx("div", { className: styles$C.close, children: jsx(IconButton, { color: "current-color", onClick: () => onDismiss?.(id), children: jsx(StrokeCloseboxIcon, {}) }) })] }));
+function Announcement({ announcement: { href, id, subType, text, title, type }, onDismiss, }) {
+    return (jsxs(RouteLink, { className: clsx(styles$C.announcement, styles$C[type], styles$C[subType]), href: href, children: [jsxs("div", { className: styles$C.wrapper, children: [jsx("div", { className: styles$C.icon, children: iconMap[subType] }), jsxs("div", { className: styles$C.content, children: [jsx("h2", { className: styles$C.title, children: title }), jsxs("p", { className: styles$C.text, children: [text, jsx(GlyphsArrowSemiBoldRightIcon, {})] })] })] }), jsx("div", { className: styles$C.close, children: jsx(IconButton, { color: "current-color", onClick: () => onDismiss?.(id), children: jsx(StrokeCloseboxIcon, {}) }) })] }));
 }
 
 const now = () => new Date();
@@ -8345,9 +8418,14 @@ var styles$B = {"announcement-provider":"announcement-provider-module-sVIKY","an
 function AnnouncementProvider() {
     const languageCode = useLanguageCode();
     const nodeRef = useRef(null);
-    const { data: announcements } = useFetchAnnouncements({
+    const { data: announcements, error } = useFetchAnnouncements({
         languageCode,
     });
+    useEffect(() => {
+        if (!error)
+            return;
+        console.error(error);
+    }, [error]);
     const [dismissedIds, setDismissedIds] = useLocalStorage('dismissedAnnouncementIds', []);
     const filteredAnnouncements = announcements?.filter(({ id }) => !dismissedIds.includes(id));
     return (jsx(TransitionGroup, { className: styles$B['announcement-provider'], children: filteredAnnouncements?.map(announcement => (jsx(CSSTransition, { classNames: {
@@ -10388,7 +10466,9 @@ function ConnectedSearchInput() {
     const t = useFormattedMessage();
     const navigate = useNavigate();
     return (jsx(SearchInput, { autocomplete: autocomplete, formRef: formRef, inputRef: inputRef, onCancel: close, onSubmit: () => {
-            navigate(`/search?keyword=${inputRef.current?.value}`);
+            if (!inputRef.current?.value)
+                return;
+            navigate(`/search?keyword=${encodeURIComponent(inputRef.current.value)}`);
             return close();
         }, placeholder: t('What are you searching for?') }));
 }
@@ -10499,7 +10579,7 @@ function StrokeRecentIcon(props) {
 function WithResults() {
     const { state } = useAlgoliaSearch();
     const { close } = useGlobalSearchDisclosure();
-    return (jsx("div", { children: jsx(SectionContainer, { buttons: jsxs(RouteButton, { className: clsx(styles$3['show-all-button'], buttonStyles.button, buttonStyles.secondary, buttonStyles.outline, buttonStyles.md), href: `/search?keyword=${state.query}`, onClick: close, children: [jsx(FormattedMessage, { id: "See all results" }), jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })] }), leftContent: jsx(SuggestionsSection, {}), rightContent: jsx(ProductResultsSection, {}) }) }));
+    return (jsx("div", { children: jsx(SectionContainer, { buttons: jsxs(RouteButton, { className: clsx(styles$3['show-all-button'], buttonStyles.button, buttonStyles.secondary, buttonStyles.outline, buttonStyles.md), href: `/search?keyword=${encodeURIComponent(state.query)}`, onClick: close, children: [jsx(FormattedMessage, { id: "See all results" }), jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })] }), leftContent: jsx(SuggestionsSection, {}), rightContent: jsx(ProductResultsSection, {}) }) }));
 }
 function SuggestionsSection() {
     const { autocomplete, categories, querySuggestions, recentSearches } = useAlgoliaSearch();

package/dist/src/buttons/print-button/print-button.d.ts

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

package/dist/src/buttons/print-button/print-button.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { PrintButton } from './print-button';
+declare const meta: {
+    component: typeof PrintButton;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/cards/orderline-card/connected-orderline-card.d.ts

@@ -0,0 +1,6 @@
+import { OrderLineCardProps } from './orderline-card';
+export interface ConnectedOrderLineProps extends Omit<OrderLineCardProps, 'addToCartButton' | 'favoriteButton'> {
+    onAddToCart?: VoidFunction;
+    onRemove?: (productId: string) => void;
+}
+export declare function ConnectedOrderLineCard({ id, onRemove, ...props }: ConnectedOrderLineProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/cards/orderline-card/connected-remove-button.d.ts

@@ -0,0 +1,5 @@
+export interface ConnectedRemoveButtonProps {
+    onRemove: (productId: string) => void;
+    productId: string;
+}
+export declare function ConnectedRemoveButton({ onRemove: _onRemove, productId, }: ConnectedRemoveButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/cards/orderline-card/orderline-card.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react';
+import { ImageSource } from 'shared/model/image';
+import type { ProductTotalPrice as ProductTotalPriceType } from 'shared/model/price';
+export interface BaseOrderLineCardProps {
+    deliveryDate?: Date;
+    href: string;
+    id: string;
+    image: ImageSource;
+    price: ProductTotalPriceType;
+    readonly: boolean;
+    sku: string;
+    tags?: string[];
+    title: string;
+}
+export interface InteractiveOrderLineCardProps extends BaseOrderLineCardProps {
+    addToCartButton: ReactElement;
+    readonly: false;
+    removeButton: ReactElement;
+}
+export interface ReadonlyOrderLineCardProps extends BaseOrderLineCardProps {
+    quantity: number;
+    readonly: true;
+}
+export type OrderLineCardProps = InteractiveOrderLineCardProps | ReadonlyOrderLineCardProps;
+export declare function OrderLineCard(props: OrderLineCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/cards/orderline-card/orderline-card.stories.d.ts

@@ -0,0 +1,46 @@
+import type { StoryObj } from '@storybook/react';
+import { OrderLineCard } from './orderline-card';
+declare const meta: {
+    component: typeof OrderLineCard;
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        addToCartButton: React.ReactElement;
+        readonly: false;
+        removeButton: React.ReactElement;
+        deliveryDate?: Date | undefined;
+        href: string;
+        id: string;
+        image: import("../../shared/model/image").ImageSource;
+        price: import("../../shared/model/price").ProductTotalPrice;
+        sku: string;
+        tags?: string[] | undefined;
+        title: string;
+    } | {
+        quantity: number;
+        readonly: true;
+        deliveryDate?: Date | undefined;
+        href: string;
+        id: string;
+        image: import("../../shared/model/image").ImageSource;
+        price: import("../../shared/model/price").ProductTotalPrice;
+        sku: string;
+        tags?: string[] | undefined;
+        title: string;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof OrderLineCard>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const LongTitle: Story;
+export declare const BigPrice: Story;
+export declare const WithoutTags: Story;
+export declare const ReadOnly: Story;
+export declare const ReadOnlyNoTag: Story;
+export declare const Connected: Story;

package/dist/src/cart-totals/cart-totals.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+export interface CartTotalsProps {
+    buttons?: ReactElement;
+    fulfillmentMethod?: string;
+    orderNumber?: string;
+    shippingCost: string;
+    subtotal: string;
+    tax: string;
+    total: string;
+    vatPercentage: number;
+}
+export declare function CartTotals({ buttons, fulfillmentMethod, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }: CartTotalsProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/cart-totals/cart-totals.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { CartTotals } from './cart-totals';
+declare const meta: {
+    component: typeof CartTotals;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Cart: Story;
+export declare const Shipping: Story;
+export declare const ReviewAndPayment: Story;
+export declare const OrderConfirmation: Story;

package/dist/src/country-selector/country-selector-dialog/country-selector-dialog.d.ts

@@ -1,7 +1,9 @@
 import { Country, Language } from 'shared/model/countries-languages';
 export interface CountrySelectorDialogProps {
     countries: Country[];
+    isDismissable?: boolean;
     isOpen: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
     onSubmit: ({ country, language, }: {
         country: Country;
         language: Language;
@@ -10,4 +12,4 @@ export interface CountrySelectorDialogProps {
     selectedLanguage: Language;
     showCountry?: boolean;
 }
-export declare function CountrySelectorDialog({ countries, isOpen, onSubmit, selectedCountry, selectedLanguage, showCountry, }: CountrySelectorDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function CountrySelectorDialog({ countries, isDismissable, isOpen, onOpenChange, onSubmit, selectedCountry, selectedLanguage, showCountry, }: CountrySelectorDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/delivery-time/delivery-time.d.ts

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

package/dist/src/delivery-time/delivery-time.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { DeliveryTime } from './delivery-time';
+declare const meta: {
+    component: typeof DeliveryTime;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/display/product-price/product-price.d.ts

@@ -1,7 +1,8 @@
 export interface ProductPriceProps {
     className?: string;
-    isVatIncluded: boolean;
+    isVatIncluded: boolean | null;
     originalPrice: number;
     price: number;
+    pricePerUnit?: number;
 }
 export declare function ProductPrice({ className, isVatIncluded, originalPrice, price, }: ProductPriceProps): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/src/display/product-price/product-total-price.d.ts

@@ -0,0 +1,7 @@
+export interface ProductTotalPriceProps {
+    className?: string;
+    originalTotalPrice: number;
+    pricePerUnit?: number;
+    totalPrice: number;
+}
+export declare function ProductTotalPrice({ className, originalTotalPrice: originalPrice, pricePerUnit, totalPrice, }: ProductTotalPriceProps): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/src/display/product-price/product-total-price.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import { ProductTotalPrice } from './product-total-price';
+declare const meta: {
+    component: typeof ProductTotalPrice;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithoutOriginalTotalPrice: Story;
+export declare const WithOriginalTotalPrice: Story;

package/dist/src/icons/solid/solid-event-icon.d.ts

@@ -0,0 +1 @@
+export declare function SolidEventIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/src/icons/solid/solid-news-icon.d.ts

@@ -0,0 +1 @@
+export declare function SolidNewsIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/src/icons/solid/solid-sale-icon.d.ts

@@ -0,0 +1 @@
+export declare function SolidSaleIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/src/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 to list' | 'An unexpected error occured' | 'Are you looking for information about our service? Please visit our customer support page' | 'Cancel' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Continue shopping' | 'Country' | 'Create new list' | 'create account' | 'Double check your spelling' | 'Downloads' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Features' | 'Hide filters' | 'Incl. VAT' | 'Includes' | 'Language' | 'List name already exists' | 'New list name' | 'Please Sign In' | 'Popular searches' | 'Product Features' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Shop more efficiently and quicker with a favorites list' | 'Easily add your favorite products' | 'Your favorites are available on multiple devices' | 'Save' | 'Share your favorite list with others' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'Specifications' | 'Submit' | 'Suggestions' | 'The product has been added to your cart.' | 'The product has been updated in your cart.' | 'The product has been removed from your cart.' | 'Unable to add the product to your cart.' | 'Unable to update the product in your cart.' | 'Unable to remove the product from your cart.' | 'Try another search' | 'Use fewer keywords' | '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 ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';
+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 to list' | 'Amount: {0}' | '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?' | 'Cancel' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Continue' | 'Continue shopping' | 'Cost overview' | 'Country' | 'Create new list' | 'create account' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Features' | 'Fulfillment method' | 'Hide filters' | 'Incl. VAT' | 'Includes' | 'Language' | 'List name already exists' | 'New list name' | 'Order number' | 'pc' | 'Please Sign In' | 'Popular searches' | 'Print' | 'Product Features' | 'Products' | 'Product' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Remove all' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Shop more efficiently and quicker with a favorites list' | 'Easily add your favorite products' | 'Your favorites are available on multiple devices' | 'Save' | 'Share your favorite list with others' | 'Shipping and handling' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'The product has been added to your cart.' | 'The product has been updated in your cart.' | 'The product has been removed from your cart.' | 'Unable to add the product to your cart.' | 'Unable to update the product in your cart.' | 'Unable to remove the product from your cart.' | 'Try another search' | 'Total' | 'Use fewer keywords' | '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 ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';

package/dist/src/intl/use-format-message.d.ts

@@ -1,7 +1,13 @@
 import { TranslationId } from './translation-id';
-export type FormattedMessageFunction = (id: TranslationId, options?: {
-    fallbackValue?: string;
-    optional?: boolean;
-    replacementValues?: Record<string, string>;
-}) => string;
+export interface FormattedMessageFunction {
+    (id: TranslationId, options?: {
+        fallbackValue?: string;
+        optional?: boolean;
+        replacementValues?: Record<string, string>;
+    }): string;
+    pluralize: {
+        (translationId: string, count: number): string;
+        (translationIdPrefix: string, translationId: string, count: number): string;
+    };
+}
 export declare function useFormattedMessage(): FormattedMessageFunction;

package/dist/src/lists/orderline-list/orderline-list.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface OrderLineListProps {
+    children?: ReactNode;
+    onRemoveAll?: () => void;
+}
+export declare function OrderLineList({ children, onRemoveAll }: OrderLineListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/lists/orderline-list/orderline-list.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import { OrderLineList } from './orderline-list';
+declare const meta: {
+    component: typeof OrderLineList;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const Connected: Story;

package/dist/src/modals/confirmation/confirmation-dialog.d.ts

@@ -0,0 +1,10 @@
+interface ConfirmationDialogProps {
+    cancelLabel?: string;
+    isOpen: boolean;
+    onCancel: VoidFunction;
+    onConfirm: VoidFunction;
+    submitLabel?: string;
+    title: string;
+}
+export declare function ConfirmationDialog({ cancelLabel, isOpen, onCancel, onConfirm, submitLabel, title, }: ConfirmationDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/modals/confirmation/confirmation-dialog.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react';
+import { ConfirmationDialog } from './confirmation-dialog';
+declare const meta: {
+    argTypes: {
+        isOpen: {
+            control: {
+                type: "boolean";
+            };
+        };
+    };
+    component: typeof ConfirmationDialog;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -3,17 +3,22 @@ import { Form as AriaForm } from 'react-aria-components';
 import { ModalProps } from 'modals/modal/modal';
 interface DialogProps extends Omit<ModalProps, 'children'> {
     allowClose?: boolean;
-    children: ReactNode | ((props: {
+    cancelLabel?: string;
+    children?: ReactNode | ((props: {
         close: VoidFunction;
     }) => ReactNode);
     dialogClassName?: string;
-    footer?: ReactNode | ((props: {
-        close: VoidFunction;
-    }) => ReactNode);
+    footer?: ReactNode | ((props: DialogFooterProps) => ReactNode);
     hideTitle?: boolean;
     onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+    submitLabel?: string;
     title: string;
     validationErrors?: ComponentProps<typeof AriaForm>['validationErrors'];
 }
-export declare function Dialog({ allowClose, children, className, dialogClassName, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+interface DialogFooterProps {
+    cancelLabel: string;
+    close: VoidFunction;
+    submitLabel: string;
+}
+export declare function Dialog({ allowClose, cancelLabel, children, className, dialogClassName, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/modals/modal/modal.d.ts

@@ -7,7 +7,7 @@ export interface ModalProps {
     isFullScreen?: boolean;
     isKeyboardDismissDisabled?: boolean;
     isOpen: boolean;
-    onOpenChange: (isOpen: boolean) => void;
+    onOpenChange?: (isOpen: boolean) => void;
     shouldCloseOnInteractOutside?: boolean;
 }
 export declare function Modal({ children, className, hasCloseButton, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, shouldCloseOnInteractOutside, }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/notifications/announcements/announcement.d.ts

@@ -3,4 +3,4 @@ export interface AnnouncementProps {
     announcement: AnnouncementType;
     onDismiss?: (id: string) => void;
 }
-export declare function Announcement({ announcement: { href, id, text, title, type }, onDismiss, }: AnnouncementProps): import("react/jsx-runtime").JSX.Element;
+export declare function Announcement({ announcement: { href, id, subType, text, title, type }, onDismiss, }: AnnouncementProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/notifications/announcements/announcement.stories.d.ts

@@ -1,6 +1,5 @@
 import type { StoryObj } from '@storybook/react';
 import { Announcement } from './announcement';
-import { AnnouncementProvider } from './announcement-provider';
 declare const meta: {
     component: typeof Announcement;
     parameters: {
@@ -11,8 +10,13 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Promo: Story;
-export declare const Informative: Story;
-export declare const Notice: Story;
-export declare const Critical: Story;
-export declare const Connected: StoryObj<typeof AnnouncementProvider>;
+export declare const PromoNewProductIntroduction: Story;
+export declare const PromoEvent: Story;
+export declare const PromoSale: Story;
+export declare const PromoNews: Story;
+export declare const ServiceInformative: Story;
+export declare const ServiceNotice: Story;
+export declare const ServiceCritical: Story;
+export declare const Connected: StoryObj<{
+    languageCode: string;
+}>;

package/dist/src/shared/api/bff/model/announcement.model.d.ts

@@ -3,6 +3,7 @@ interface Announcement {
     href: string;
     id: string;
     startDate?: string;
+    subType: string;
     text: string;
     title: string;
     type: string;

package/dist/src/shared/api/bff/services/bff-service.d.ts

@@ -0,0 +1,10 @@
+import { AnnouncementResponse } from 'shared/api/bff/model/announcement.model';
+export interface FetchAnnouncementsArgs {
+    languageCode: string;
+}
+export declare function fetchAnnouncements({ languageCode, }: FetchAnnouncementsArgs): Promise<{
+    body: string | AnnouncementResponse;
+    headers: Headers;
+    status: number;
+    statusText: string;
+}>;

package/dist/src/shared/feature-flags/use-feature-flags.d.ts

@@ -1,7 +1,6 @@
 declare const features: {
     readonly language: "language";
     readonly pdp: "pdpV2";
-    readonly pdpv1: "pdpV1";
     readonly plpv1: "plpV1";
     readonly searchv1: "searchV1";
 };

package/dist/src/shared/model/announcement.d.ts

@@ -1,13 +1,16 @@
-export declare const announcementTypes: readonly ["promo", "informative", "notice", "critical"];
-type AnnouncementType = (typeof announcementTypes)[number];
+export declare const announcementTypes: readonly ["promo", "service"];
+export type AnnouncementType = (typeof announcementTypes)[number];
+export declare const announcementSubTypes: readonly ["sales", "news", "critical", "informative", "notice", "event", "new_product_introduction"];
+export type AnnouncementSubType = (typeof announcementSubTypes)[number];
 export interface Announcement {
     endDate?: Date;
     href: string;
     id: string;
     startDate?: Date;
+    subType: AnnouncementSubType;
     text: string;
     title: string;
     type: AnnouncementType;
 }
 export declare function isAnnouncementType(type: string): type is AnnouncementType;
-export {};
+export declare function isAnnouncementSubtype(subtype: string): subtype is AnnouncementSubType;

package/dist/src/shared/model/price.d.ts

@@ -3,3 +3,8 @@ export interface ProductPrice {
     originalPrice: number;
     price: number;
 }
+export interface ProductTotalPrice {
+    originalTotalPrice: number;
+    pricePerUnit?: number;
+    totalPrice: number;
+}

package/dist/src/shared/utils/date.d.ts

@@ -0,0 +1,11 @@
+export type DateUnit = 'day' | 'week' | 'month';
+export type DateUnitObject = {
+    number: number;
+    unit: DateUnit;
+};
+export type DateThreshold = {
+    dateUnitObject: DateUnitObject;
+    numberOfDays: number;
+};
+export declare function getDateUnitObject(date: Date): DateUnitObject;
+export declare function convertDateUnitToPluralOrSingle(unit: DateUnit, number: number): 'day' | 'days' | 'week' | 'weeks' | 'month' | 'months';

package/dist/src/shared/utils/date.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/shared/utils/price.d.ts

@@ -0,0 +1 @@
+export declare const formatPrice: (price: number) => string;

package/dist/src/typography/heading/heading.d.ts

@@ -1,4 +1,4 @@
-export declare const SIZES: readonly ["xxl", "xl", "l", "m", "s", "xs", "xxs"];
+export declare const SIZES: readonly ["xxl", "xl", "l", "m", "s", "xs", "xxs", "xxxs"];
 export declare const TAGS: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "h7"];
 type Size = (typeof SIZES)[number];
 type Tag = (typeof TAGS)[number];

package/dist/src/typography/heading/heading.stories.d.ts

@@ -8,7 +8,7 @@ declare const meta: {
             };
             description: string;
             name: string;
-            options: ("xl" | "xxl" | "s" | "l" | "m" | "xs" | "xxs")[];
+            options: ("xl" | "xxl" | "s" | "l" | "m" | "xs" | "xxs" | "xxxs")[];
         };
         tag: {
             control: {

package/dist/styles.css

@@ -37,6 +37,7 @@
   --font-weight-base: var(--font-weight-normal);
 
   /* line heights */
+  --line-height-20: 1.25rem;
   --line-height-22: 1.375rem;
   --line-height-24: 1.5rem;
   --line-height-28: 1.75rem;
@@ -88,6 +89,10 @@
   --text-heading-xxs-size: var(--font-size-24);
   --text-heading-xxs-line-height: var(--line-height-22);
   --text-heading-xxs-line-height-uppercase: var(--line-height-24);
+
+  /* headings xxxs */
+  --text-heading-xxxs-size: var(--font-size-20);
+  --text-heading-xxxs-line-height: var(--line-height-20);
 }
 :root {
   /*********************************************************
@@ -143,6 +148,7 @@
   --color-red-950: #4d0206;
 
   /* Neutrals */
+  --color-gray-25: #00000019;
   --color-gray-50: #fbfbfb;
   --color-gray-75: #f6f6f6;
   --color-gray-100: #ededed;
@@ -230,8 +236,9 @@
   --background-overlay-layer: 90;
   --sidebar-layer: 100;
   --search-layer: 200;
-  --modal-layer: 300;
-  --zoom-image-layer: 400;
+  --sticky-bottom-price: 1300;
+  --modal-layer: 2000;
+  --zoom-image-layer: 2100;
 }
 :root {
   --header-height-desktop: 96px;
@@ -945,6 +952,7 @@
 
 .product-price-module-oIU1K {
   --current-price-color: var(--color-brand-black);
+  --original-price-font-size: var(--font-size-18);
   --current-price-font-style: normal;
   --font-size-wholes: var(--price-font-size-wholes, var(--font-size-36));
   --font-size-decimals: var(--price-font-size-decimals, var(--font-size-24));
@@ -957,7 +965,7 @@
   .product-price-module-oIU1K .product-price-module-til0s {
     padding-left: var(--space-4);
     color: var(--color-brand-dark-gray);
-    font-size: var(--font-size-18);
+    font-size: var(--original-price-font-size);
     font-weight: var(--font-weight-bold);
     text-decoration: line-through;
   }
@@ -978,14 +986,14 @@
     position: relative;
     display: flex;
     color: var(--current-price-color);
-    font-size: var(--font-size-36);
+    font-size: var(--font-size-wholes);
     font-style: var(--current-price-font-style);
     font-weight: var(--font-weight-black);
   }
 
   .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-GCw07,
     .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-N56iV {
-      font-size: var(--font-size-wholes);
+      font-size: inherit;
       font-weight: inherit;
     }
 
@@ -997,6 +1005,7 @@
       font-weight: inherit;
     }
 
+  .product-price-module-oIU1K .product-price-module-syhum,
   .product-price-module-oIU1K .product-price-module-96DoG {
     color: var(--color-brand-dark-gray);
     font-size: var(--font-size-12);
@@ -2175,6 +2184,11 @@
       line-height: var(--text-heading-xxs-line-height-uppercase);
     }
 
+  .heading-module-pMC65:where(.heading-module-qvrEk) {
+    font-size: var(--text-heading-xxxs-size);
+    line-height: var(--text-heading-xxxs-line-height);
+  }
+
 .dialog-module-qKzgy {
   position: relative;
   padding: var(--space-24);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.111",
+  "version": "0.0.113",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -36,7 +36,8 @@
     "start": "http-server ./storybook-static",
     "stylelint": "stylelint --config .stylelintrc.cjs \"src/**/*.css\"",
     "stylelint:fix": "stylelint --config .stylelintrc.cjs \"src/**/*.css\" --formatter verbose --fix",
-    "test:all": "npx concurrently -g --names \"TSC,ESLINT,STYLELINT\" -c auto --kill-others-on-fail \"npm run test:types\" \"npm run lint\" \"npm run stylelint\"",
+    "test:all": "npx concurrently -g --names \"TSC,VITEST,ESLINT,STYLELINT\" -c auto --kill-others-on-fail \"npm run test:types\"  \"npm run test:unit\" \"npm run lint\" \"npm run stylelint\"",
+    "test:unit": "vitest run",
     "test:types": "tsc --noEmit --pretty false",
     "update-packages": "npx npm-check-updates -u"
   },
@@ -69,6 +70,7 @@
     "@storybook/test": "8.4.2",
     "@types/js-cookie": "3.0.6",
     "@types/node": "22.9.0",
+    "@types/postcss-import": "14.0.3",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@typescript-eslint/eslint-plugin": "8.13.0",
@@ -113,7 +115,8 @@
     "stylelint-config-standard": "36.0.1",
     "typescript": "5.6.3",
     "vite": "5.4.10",
-    "vite-tsconfig-paths": "5.1.0"
+    "vite-tsconfig-paths": "5.1.0",
+    "vitest": "2.1.5"
   },
   "dependencies": {
     "@algolia/autocomplete-core": "1.17.7",