@sonic-equipment/ui 0.0.26 → 0.0.27

package/dist/algolia/algolia-pagination.d.ts

@@ -1 +1,5 @@
-export declare function AlgoliaPagination(): import("react/jsx-runtime").JSX.Element;
+interface AlgoliaPaginationProps {
+    onChange: (pageNumber: number) => void;
+}
+export declare function AlgoliaPagination({ onChange }: AlgoliaPaginationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/algolia/algolia-sonic-searchclient.d.ts

@@ -0,0 +1,2 @@
+import { SearchClient } from 'algoliasearch/lite';
+export declare const createSonicSearchClient: (url: string) => SearchClient;

package/dist/buttons/icon-button/icon-button.d.ts

@@ -6,5 +6,6 @@ export interface IconButtonProps {
     isDisabled?: boolean;
     onPress?: VoidFunction;
     size?: 'md' | 'lg';
+    type?: 'button' | 'submit' | 'reset';
 }
-export declare function IconButton({ children, className, color, isDisabled, onPress, size, }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconButton({ children, className, color, isDisabled, onPress, size, type, }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cards/product-card/product-card.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { MouseEvent, ReactElement } from 'react';
 import { PressEvent } from 'react-aria-components';
 import { ImageProps } from 'media/image/image';
 import type { ProductPrice as ProductPriceType } from 'shared/types/price';
@@ -7,10 +7,12 @@ export interface ProductCardProps {
     favoriteButton?: ReactElement;
     href: string;
     image: ImageProps;
-    onClick?: (e: PressEvent) => void;
+    /** @deprecated Use `onPress` instead */
+    onClick?: (e: MouseEvent) => void;
+    onPress?: (e: PressEvent) => void;
     price: ProductPriceType;
     sku: string;
     tag?: 'new' | 'sale';
     title: string;
 }
-export declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image: { alt, fit, src, title: imageTitle }, onClick, price, sku, tag, title, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image: { alt, fit, src, title: imageTitle }, onClick, onPress, price, sku, tag, title, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cards/product-card/product-card.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { StoryObj } from '@storybook/react';
 import { ProductCard } from './product-card';
 declare const meta: {
@@ -11,7 +12,7 @@ declare const meta: {
             src: string;
             title: string;
         };
-        onClick: import("@vitest/spy").Mock<[e: import("react-aria").PressEvent], void>;
+        onClick: import("@vitest/spy").Mock<[e: React.MouseEvent<Element, MouseEvent>], void>;
         sku: string;
         tag: "new";
     };

package/dist/filters/pagination/pagination.d.ts

@@ -1,6 +1,6 @@
-export interface Props {
+export interface PaginationProps {
     currentPage: number;
     onChange: (pageNumber: number) => void;
     totalPages: number;
 }
-export declare function Pagination({ currentPage, onChange, totalPages }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function Pagination({ currentPage, onChange, totalPages, }: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/icons/arrows/text-aligned-arrow-icon.d.ts

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

package/dist/icons/magnifying-glass/magnifying-glass-icon.d.ts

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

package/dist/icons/math/minus-filled-icon.d.ts

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

package/dist/icons/math/plus-filled-icon.d.ts

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

package/dist/icons/reset/reset-icon.d.ts

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

package/dist/icons/trash/trash-outlined-icon.d.ts

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

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ReactElement, MutableRefObject, ReactNode, HTMLAttributeAnchorTarget, FormEventHandler, KeyboardEvent, ComponentType } from 'react';
+import { ReactElement, MutableRefObject, ReactNode, HTMLAttributeAnchorTarget, MouseEvent, FormEventHandler, KeyboardEvent, ComponentType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PressEvent } from 'react-aria-components';
 import { SearchClient } from 'algoliasearch/lite';
@@ -205,8 +205,9 @@ interface IconButtonProps {
     isDisabled?: boolean;
     onPress?: VoidFunction;
     size?: 'md' | 'lg';
+    type?: 'button' | 'submit' | 'reset';
 }
-declare function IconButton({ children, className, color, isDisabled, onPress, size, }: IconButtonProps): react_jsx_runtime.JSX.Element;
+declare function IconButton({ children, className, color, isDisabled, onPress, size, type, }: IconButtonProps): react_jsx_runtime.JSX.Element;
 
 interface LinkButtonProps {
     children?: React.ReactNode | string;
@@ -265,13 +266,15 @@ interface ProductCardProps {
     favoriteButton?: ReactElement;
     href: string;
     image: ImageProps$1;
-    onClick?: (e: PressEvent) => void;
+    /** @deprecated Use `onPress` instead */
+    onClick?: (e: MouseEvent) => void;
+    onPress?: (e: PressEvent) => void;
     price: ProductPrice$1;
     sku: string;
     tag?: 'new' | 'sale';
     title: string;
 }
-declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image: { alt, fit, src, title: imageTitle }, onClick, price, sku, tag, title, }: ProductCardProps): react_jsx_runtime.JSX.Element;
+declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image: { alt, fit, src, title: imageTitle }, onClick, onPress, price, sku, tag, title, }: ProductCardProps): react_jsx_runtime.JSX.Element;
 
 interface CategoryCardProps {
   href: string
@@ -437,6 +440,10 @@ interface TextFieldProps {
  */
 declare function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, onChange, onInput, onKeyUp, placeholder, rows, showLabel, size, value, }: TextFieldProps): react_jsx_runtime.JSX.Element;
 
+declare function LeftArrowFilledIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function TextAlignedArrowIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
 declare function RightArrowFilledIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
 declare function CartFilledIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
@@ -451,7 +458,7 @@ declare function FavoriteOutlinedIcon(props: React.SVGProps<SVGSVGElement>): rea
 
 declare function HashedOutlinedIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
-type TranslationId = 'Chosen filters' | 'Clear filters' | 'Excl. VAT' | 'Hide filters' | 'Incl. VAT' | 'Show' | 'Show all' | 'Show filters' | 'Show less' | 'Sort' | 'articles' | 'article' | 'of';
+type TranslationId = 'Chosen filters' | 'Clear' | 'Clear filters' | 'Excl. VAT' | 'Hide filters' | 'Incl. VAT' | 'Show' | 'Show all' | 'Show filters' | 'Show less' | 'Sort' | 'Submit' | 'articles' | 'article' | 'of';
 
 interface FormattedMessageProps {
     fallbackValue?: string;
@@ -568,7 +575,12 @@ interface AlgoliaMultiSelectFilterSectionProps {
 }
 declare function AlgoliaMultiSelectFilterSection({ attribute, }: AlgoliaMultiSelectFilterSectionProps): react_jsx_runtime.JSX.Element;
 
-declare function AlgoliaPagination(): react_jsx_runtime.JSX.Element;
+interface AlgoliaPaginationProps {
+    onChange: (pageNumber: number) => void;
+}
+declare function AlgoliaPagination({ onChange }: AlgoliaPaginationProps): react_jsx_runtime.JSX.Element;
+
+declare const createSonicSearchClient: (url: string) => SearchClient;
 
 interface AlgoliaContextType {
     online: boolean;
@@ -590,4 +602,4 @@ declare function AlgoliaResultsCount(): string | null;
 
 declare function AlgoliaSortBy(): react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, type AlgoliaFilterPanelProps, AlgoliaFilterSection, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, Breadcrumb, type BreadcrumbProps, BreadcrumbProvider, Button, type ButtonProps, type Cart, CartFilledIcon, type CartLine, CartOutlinedIcon, CartProvider, CategoryCarousel, type CategoryCarouselProps, Checkbox, type CheckboxProps$1 as CheckboxProps, ColorCheckbox, type ColorCheckboxProps, ConnectedAddToCartButton, ConnectedBreadcrumb, DehashedOutlinedIcon, FavoriteButton, type FavoriteButtonProps, FavoriteFilledIcon, FavoriteOutlinedIcon, FavoriteProvider, type FilterOption, type Filters, FormattedMessage, type FormattedMessageFunction, type FormattedMessageProps, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, type IconButtonProps, Image, type ImageProps, IntlProvider, type Link$1 as Link, LinkButton, type LinkButtonProps, MultiSelect, type MultiSelectProps, NumberField, type NumberFieldSize, Page, PageLayout, type PageProps, type Product, ProductCard, type ProductCardProps, ProductListingPage, type ProductListingPageProps, ProductOverviewGrid, type ProductOverviewGridProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, type RefinementListItem, RightArrowFilledIcon, Select, type SelectProps, ShowAll, type ShowAllProps, Sidebar, type SidebarProps, SidebarProvider, TextField, useAlgolia, useBreadcrumb, useBreakpoint, useCart, useDebouncedCallback, useDisclosure, useFavorite, useFormattedMessage, useGlobalState, useProductCartLine, useScrollLock };
+export { Accordion, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, type AlgoliaFilterPanelProps, AlgoliaFilterSection, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, Breadcrumb, type BreadcrumbProps, BreadcrumbProvider, Button, type ButtonProps, type Cart, CartFilledIcon, type CartLine, CartOutlinedIcon, CartProvider, CategoryCarousel, type CategoryCarouselProps, Checkbox, type CheckboxProps$1 as CheckboxProps, ColorCheckbox, type ColorCheckboxProps, ConnectedAddToCartButton, ConnectedBreadcrumb, DehashedOutlinedIcon, FavoriteButton, type FavoriteButtonProps, FavoriteFilledIcon, FavoriteOutlinedIcon, FavoriteProvider, type FilterOption, type Filters, FormattedMessage, type FormattedMessageFunction, type FormattedMessageProps, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, type IconButtonProps, Image, type ImageProps, IntlProvider, LeftArrowFilledIcon, type Link$1 as Link, LinkButton, type LinkButtonProps, MultiSelect, type MultiSelectProps, NumberField, type NumberFieldSize, Page, PageLayout, type PageProps, type Product, ProductCard, type ProductCardProps, ProductListingPage, type ProductListingPageProps, ProductOverviewGrid, type ProductOverviewGridProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, type RefinementListItem, RightArrowFilledIcon, Select, type SelectProps, ShowAll, type ShowAllProps, Sidebar, type SidebarProps, SidebarProvider, TextAlignedArrowIcon, TextField, createSonicSearchClient, useAlgolia, useBreadcrumb, useBreakpoint, useCart, useDebouncedCallback, useDisclosure, useFavorite, useFormattedMessage, useGlobalState, useProductCartLine, useScrollLock };

package/dist/index.js

@@ -53,6 +53,8 @@ const useBreakpoint = () => {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useDebouncedCallback(func, delay) {
     const timeoutId = useRef();
+    if (typeof window === 'undefined')
+        return func;
     return function debounced(...args) {
         clearTimeout(timeoutId.current);
         timeoutId.current = setTimeout(() => {
@@ -274,23 +276,23 @@ function ConnectedBreadcrumb() {
     return jsx(Breadcrumb, { links: links });
 }
 
-function RightArrowFilledIcon(props) {
+function TextAlignedArrowIcon(props) {
     return (jsx("svg", { height: "11", viewBox: "0 0 6 11", width: "6", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M.267 11a.263.263 0 0 1-.226-.402l3.463-5.467a1.2 1.2 0 0 0-.103-1.43L.602.432A.262.262 0 0 1 .805 0h2.181c.078 0 .153.034.203.093l2.081 2.43a3 3 0 0 1 .259 3.575L2.5 10.877a.267.267 0 0 1-.225.123H.266z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
 var styles$w = {"button":"button-module-V4meK","icon":"button-module-XaNWz","sm":"button-module-Pbwz7","md":"button-module-GVTEW","condensed":"button-module-GKHQc","lg":"button-module-nyNY8","primary":"button-module-tmyk8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","focus":"button-module--xzsY","active":"button-module-XMFzj","ghost":"button-module-f4UVe","right-arrow-icon":"button-module-ydQAo","secondary":"button-module--1bCH"};
 
 function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, icon, iconPosition = 'left', isDisabled, onPress, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
-    return (jsxs(Button$1, { className: clsx(className, styles$w.button, styles$w[variant], styles$w[size], styles$w[color], { [styles$w.condensed]: condensed }, { [styles$w.icon]: icon }, styles$w[_pseudo]), isDisabled: isDisabled, onPress: onPress, type: type, children: [icon && iconPosition === 'left' && (jsx("span", { className: styles$w.icon, children: icon })), children, withArrow && (jsx(RightArrowFilledIcon, { className: styles$w['right-arrow-icon'] })), icon && iconPosition === 'right' && (jsx("span", { className: styles$w.icon, children: icon }))] }));
+    return (jsxs(Button$1, { className: clsx(className, styles$w.button, styles$w[variant], styles$w[size], styles$w[color], { [styles$w.condensed]: condensed }, { [styles$w.icon]: icon }, styles$w[_pseudo]), isDisabled: isDisabled, onPress: onPress, type: type, children: [icon && iconPosition === 'left' && (jsx("span", { className: styles$w.icon, children: icon })), children, withArrow && (jsx(TextAlignedArrowIcon, { className: styles$w['right-arrow-icon'] })), icon && iconPosition === 'right' && (jsx("span", { className: styles$w.icon, children: icon }))] }));
 }
 
 var styles$v = {"icon-button":"icon-button-module-4PDK-","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo"};
 
-function IconButton({ children, className, color = 'primary', isDisabled, onPress, size = 'md', }) {
+function IconButton({ children, className, color = 'primary', isDisabled, onPress, size = 'md', type = 'button', }) {
     return (jsx(Button$1, { className: clsx(styles$v['icon-button'], styles$v[size], styles$v[color], className), isDisabled: isDisabled, 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
-        onClick: e => e.preventDefault(), onPress: onPress, children: children }));
+        onClick: e => e.preventDefault(), onPress: onPress, type: type, children: children }));
 }
 
 function FavoriteFilledIcon(props) {
@@ -351,20 +353,45 @@ function Label({ children, isRequired }) {
     return (jsxs(Label$1, { className: styles$q.label, children: [children, isRequired && jsx("span", { className: styles$q.required, children: "*" })] }));
 }
 
-var styles$p = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh"};
+function MinusFilledIcon(props) {
+    return (jsx("svg", { height: "2", viewBox: "0 0 8 2", width: "8", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M.12 0S0 .263 0 .668c0 .406.12.669.12.669h7.784S8 1.074 8 .668C8 .263 7.904 0 7.904 0H.12z", fill: "#000", fillRule: "nonzero" }) }));
+}
+
+function PlusFilledIcon(props) {
+    return (jsx("svg", { height: "8", viewBox: "0 0 8 8", width: "8", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M4.68.12S4.395 0 4.013 0c-.406 0-.693.12-.693.12v3.223H.12S0 3.606 0 4.012s.12.669.12.669h3.2v3.223S3.605 8 4.011 8c.406 0 .669-.096.669-.096V4.681h3.223S8 4.418 8 4.01c0-.405-.096-.668-.096-.668H4.681V.12z", fill: "currentColor", fillRule: "nonzero" }) }));
+}
+
+function TrashOutlinedIcon(props) {
+    return (jsx("svg", { height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M5.182 4.03h.866V2.744c0-.18.058-.324.174-.433a.644.644 0 0 1 .46-.163h2.202c.195 0 .35.055.464.163a.57.57 0 0 1 .17.433V4.03h.872V2.696c0-.424-.13-.757-.39-1-.259-.242-.613-.363-1.063-.363H6.629c-.45 0-.803.121-1.06.364-.258.242-.387.575-.387.999v1.333zm-2.776.433h10.765c.112 0 .208-.04.287-.122a.407.407 0 0 0 .118-.295.4.4 0 0 0-.118-.29.387.387 0 0 0-.287-.121H2.406a.39.39 0 0 0-.284.121.395.395 0 0 0-.122.29.4.4 0 0 0 .122.295c.081.081.176.122.284.122zm2.64 10.204h5.49c.411 0 .747-.126 1.009-.379.261-.252.402-.585.422-.999l.437-8.937h-.88l-.419 8.852a.658.658 0 0 1-.197.455.631.631 0 0 1-.46.18H5.123a.62.62 0 0 1-.454-.183.662.662 0 0 1-.198-.452l-.435-8.851H3.18l.43 8.942c.021.414.162.746.423.996.26.25.599.376 1.013.376zm.955-1.909c.105 0 .19-.03.254-.09a.295.295 0 0 0 .09-.237l-.19-6.519a.32.32 0 0 0-.1-.232.344.344 0 0 0-.244-.088.344.344 0 0 0-.25.091.315.315 0 0 0-.094.237l.19 6.512c.004.1.037.18.099.239a.343.343 0 0 0 .245.087zm1.79 0c.106 0 .19-.03.254-.09a.311.311 0 0 0 .096-.237V5.92a.311.311 0 0 0-.096-.237.353.353 0 0 0-.253-.09c-.105 0-.19.03-.256.09a.306.306 0 0 0-.099.237v6.51c0 .098.033.177.1.238.065.06.15.09.255.09zm1.785.001c.102 0 .183-.03.246-.088a.323.323 0 0 0 .098-.232l.19-6.518a.314.314 0 0 0-.093-.237.346.346 0 0 0-.25-.09c-.1 0-.182.029-.245.087a.326.326 0 0 0-.1.238l-.19 6.513c0 .097.031.175.093.236.062.06.146.091.25.091z", fill: "currentColor", fillRule: "nonzero" }) }));
+}
+
+var styles$p = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh","zoom-in-text":"number-field-module-OlEoa"};
 
 /**
  * This component is used to create a number field.
  * This field can also grow when a user types in text.
  */
 function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions = { style: 'decimal', useGrouping: false }, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel = false, size = 'lg', value, withButtons, }) {
-    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$p.field, styles$p[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$p['button-input-container'], children: [withButtons && (
+    const inputRef = useRef(null);
+    const onFocusInput = useDebouncedCallback(() => {
+        if (!inputRef.current)
+            return;
+        inputRef.current.focus();
+        inputRef.current.selectionStart = inputRef.current.value.length || 0;
+    }, 500);
+    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$p.field, styles$p[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles$p['button-input-container'], children: [withButtons && (jsx(Button$1
                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-expect-error
-                    jsx(Button$1, { onClick: e => e.preventDefault(), slot: "decrement", children: "-" })), jsx(Input, { autoGrow: autoGrow, maxLength: maxLength, placeholder: placeholder, size: size }), withButtons && (
+                    , { 
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-expect-error
+                        onClick: e => e.preventDefault(), onPressEnd: onFocusInput, onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(TrashOutlinedIcon, {}) : jsx(MinusFilledIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, maxLength: maxLength, placeholder: placeholder, size: size }), withButtons && (jsx(Button$1
                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-expect-error
-                    jsx(Button$1, { onClick: e => e.preventDefault(), slot: "increment", children: "+" }))] }), jsx(FieldError, {})] }));
+                    , { 
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-expect-error
+                        onClick: e => e.preventDefault(), onPressEnd: onFocusInput, onPressStart: e => e.target.focus(), slot: "increment", children: jsx(PlusFilledIcon, {}) }))] }), jsx(FieldError, {})] }));
 }
 
 function CartFilledIcon(props) {
@@ -574,8 +601,11 @@ function Image({ alt, className, fallbackSrc = 'https://res.cloudinary.com/dkz9e
 
 var styles$j = {"product-card":"product-card-module-pLaiB","favorite-button":"product-card-module-tvEdz","content":"product-card-module-e0kMu","top":"product-card-module-Q0VvF","tag":"product-card-module-HkWBE","title":"product-card-module-CStNi","bottom":"product-card-module-kD2tU","image":"product-card-module-p-zoi","price":"product-card-module-irW0D","add-to-cart-button":"product-card-module-SnCvX"};
 
-function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image: { alt, fit, src, title: imageTitle }, onClick, price, sku, tag, title, }) {
-    return (jsxs(Link, { className: styles$j['product-card'], href: href, onPress: onClick, children: [jsx("div", { className: styles$j.image, children: jsx(Image, { alt: alt, fit: fit, src: src, title: imageTitle }) }), jsx("div", { className: styles$j['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$j.content, children: [jsxs("div", { className: styles$j.top, children: [jsx("div", { className: styles$j.tag, children: tag && (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, id: tag }) })) }), jsx("h2", { className: styles$j.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$j.bottom, children: [jsx("div", { className: styles$j.price, children: jsx(ProductPrice, { current: price.current, includeVat: price.includeVat, original: price.original }) }), jsx("div", { className: styles$j['add-to-cart-button'], children: AddToCartButton })] })] })] }));
+function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image: { alt, fit, src, title: imageTitle }, onClick, onPress, price, sku, tag, title, }) {
+    return (jsxs(Link, { className: styles$j['product-card'], href: href, 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        onClick: onClick, onPress: onPress, children: [jsx("div", { className: styles$j.image, children: jsx(Image, { alt: alt, fit: fit, src: src, title: imageTitle }) }), jsx("div", { className: styles$j['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$j.content, children: [jsxs("div", { className: styles$j.top, children: [jsx("div", { className: styles$j.tag, children: tag && (jsx(Tag, { children: jsx(FormattedMessage, { optional: true, id: tag }) })) }), jsx("h2", { className: styles$j.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$j.bottom, children: [jsx("div", { className: styles$j.price, children: jsx(ProductPrice, { current: price.current, includeVat: price.includeVat, original: price.original }) }), jsx("div", { className: styles$j['add-to-cart-button'], children: AddToCartButton })] })] })] }));
 }
 
 var styles$i = {"category-card":"category-card-module-4NUjH","title":"category-card-module-LEhh3","is-selected":"category-card-module-vJ7vB","image-container":"category-card-module-oNTrK"};
@@ -5634,7 +5664,11 @@ function LeftArrowFilledIcon(props) {
     return (jsx("svg", { height: "13", viewBox: "0 0 13 13", width: "13", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M9.461 11.917c.227 0 .365-.224.245-.396L5.954 6.137a1.098 1.098 0 0 1 .112-1.409l3.032-3.219c.158-.168.025-.426-.22-.426H6.514a.303.303 0 0 0-.22.092L4.04 3.57c-.94.997-1.052 2.412-.28 3.52l3.28 4.706a.297.297 0 0 0 .245.122H9.46z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles$h = {"carousel":"carousel-module-ealh-","swiper":"carousel-module-IftbN","slide":"carousel-module-bUMlb","navigation-button-next":"carousel-module-T7bTr","navigation-button":"carousel-module-kcqEE","is-dragging":"carousel-module-34OWD","navigation-button-prev":"carousel-module-984Rr","navigation-buttons":"carousel-module-k7Z4S","navigation-button-wrapper":"carousel-module-Hi-0z","icon":"carousel-module-p5oAL","top":"carousel-module-nL-O8","center":"carousel-module-5SGYn"};
+function RightArrowFilledIcon(props) {
+    return (jsx("svg", { height: "13", viewBox: "0 0 13 13", width: "13", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M3.539 11.917c-.227 0-.365-.224-.245-.396l3.752-5.384a1.098 1.098 0 0 0-.112-1.409L3.902 1.509c-.158-.168-.025-.426.22-.426h2.363c.085 0 .165.034.22.092L8.96 3.57c.94.997 1.052 2.412.28 3.52l-3.28 4.706a.297.297 0 0 1-.245.122H3.54z", fill: "currentColor", fillRule: "evenodd" }) }));
+}
+
+var styles$h = {"carousel":"carousel-module-ealh-","swiper":"carousel-module-IftbN","slide":"carousel-module-bUMlb","navigation-button-next":"carousel-module-T7bTr","navigation-button":"carousel-module-kcqEE","is-dragging":"carousel-module-34OWD","navigation-button-prev":"carousel-module-984Rr","navigation-buttons":"carousel-module-k7Z4S","navigation-button-wrapper":"carousel-module-Hi-0z","top":"carousel-module-nL-O8","center":"carousel-module-5SGYn"};
 
 function CarouselNavigationButton({ direction, isDisabled = false, }) {
     const swiper = useSwiper();
@@ -5646,7 +5680,7 @@ function CarouselNavigationButton({ direction, isDisabled = false, }) {
             swiper.slidePrev();
         }
     }
-    return (jsx(Button$1, { className: styles$h['navigation-button'], isDisabled: isDisabled, onPress: handleNavigation, children: jsx(LeftArrowFilledIcon, { className: styles$h.icon }) }));
+    return (jsx(Button$1, { className: styles$h['navigation-button'], isDisabled: isDisabled, onPress: handleNavigation, children: direction === 'previous' ? (jsx(LeftArrowFilledIcon, {})) : (jsx(RightArrowFilledIcon, {})) }));
 }
 
 function Carousel({ breakpoints, hasNavigation = true, navigationButtonsPosition = 'top', slides, slidesPerView = 'auto', spaceBetween = 8, }) {
@@ -5836,10 +5870,10 @@ function ProductOverviewGrid({ children }) {
     return (jsx("div", { className: styles$9['product-grid'], children: Children.map(children, (child, index) => (jsx("div", { className: styles$9['grid-item'], children: child }, index))) }));
 }
 
-var styles$8 = {"page-layout":"page-layout-module-osQ2n"};
+var styles$8 = {"page-container":"page-layout-module-sSsgZ","page-layout":"page-layout-module-osQ2n"};
 
 function PageLayout({ children, className, }) {
-    return (jsx("div", { className: clsx(styles$8['page-layout'], className), children: children }));
+    return (jsx("div", { className: styles$8['page-container'], children: jsx("div", { className: clsx(styles$8['page-layout'], className), children: children }) }));
 }
 
 var styles$7 = {"heading":"heading-module-pMC65","uppercase":"heading-module-6spgX","italic":"heading-module-XXMDM","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"};
@@ -5965,13 +5999,17 @@ function ChevronRightFilledIcon(props) {
 
 var styles$3 = {"pagination":"pagination-module-k4OgY","page-number-container":"pagination-module-oq89A"};
 
-function Pagination({ currentPage, onChange, totalPages }) {
+function Pagination({ currentPage, onChange, totalPages, }) {
     return (jsxs("div", { className: styles$3.pagination, children: [jsx(IconButton, { isDisabled: currentPage === 1, onPress: () => onChange(currentPage - 1), children: jsx(ChevronLeftFilledIcon, {}) }), jsxs("div", { className: styles$3['page-number-container'], children: [jsx(NumberField, { autoGrow: true, label: "current-page", maxValue: totalPages, minValue: 1, onChange: onChange, value: currentPage }), jsx(FormattedMessage, { id: "of" }), jsx("div", { children: totalPages })] }), jsx(IconButton, { isDisabled: currentPage >= totalPages, onPress: () => onChange(currentPage + 1), children: jsx(ChevronRightFilledIcon, {}) })] }));
 }
 
-function AlgoliaPagination() {
+function AlgoliaPagination({ onChange }) {
     const { currentRefinement, nbPages, refine } = usePagination();
-    return (jsx(Pagination, { currentPage: currentRefinement + 1, onChange: pageNumber => refine(pageNumber - 1), totalPages: nbPages }));
+    function handlePageChange(pageNumber) {
+        refine(pageNumber - 1);
+        onChange(pageNumber);
+    }
+    return (jsx(Pagination, { currentPage: currentRefinement + 1, onChange: pageNumber => handlePageChange(pageNumber), totalPages: nbPages }));
 }
 
 function AlgoliaSortBy() {
@@ -5994,6 +6032,18 @@ function ConnectedProductCart({ productId, ...props }) {
     return (jsx(ProductCard, { ...props, addToCartButton: jsx(ConnectedAddToCartButton, { productId: productId }) }));
 }
 
+const useScrollTo = (ref, scrollOptions) => () => {
+    if (!ref.current)
+        return;
+    const rect = ref.current.getBoundingClientRect();
+    const scrollPadding = 12;
+    const scrollY = window.scrollY + rect.top - scrollPadding;
+    window.scrollTo({
+        behavior: 'smooth',
+        top: scrollY,
+    });
+};
+
 const SidebarContext = createContext({
     isOpen: false,
     toggle: () => { },
@@ -6027,7 +6077,7 @@ const ToggleSidebarButton = () => {
     return (jsx(Button, { color: "secondary", icon: jsx(FilterOutlinedIcon, {}), onPress: toggle, size: "sm", variant: "outline", children: isOpen ? (jsx(FormattedMessage, { id: "Hide filters" })) : (jsx(FormattedMessage, { id: "Show filters" })) }));
 };
 
-var styles$1 = {"product-listing":"product-listing-page-module-dmIHF","header":"product-listing-page-module-Oz76Z","action-bar":"product-listing-page-module-XxGrr","count":"product-listing-page-module-zx79v","categories":"product-listing-page-module-R4aOl","product-grid-container":"product-listing-page-module-ICkKg","product-grid":"product-listing-page-module-LHE7z","pagination":"product-listing-page-module-xsRaj"};
+var styles$1 = {"product-listing":"product-listing-page-module-dmIHF","header":"product-listing-page-module-Oz76Z","action-bar":"product-listing-page-module-XxGrr","sort":"product-listing-page-module-aQzHr","count":"product-listing-page-module-zx79v","categories":"product-listing-page-module-R4aOl","product-grid-container":"product-listing-page-module-ICkKg","product-grid":"product-listing-page-module-LHE7z","pagination":"product-listing-page-module-xsRaj"};
 
 const categories = Array.from({ length: 20 }, () => ({
     href: '#',
@@ -6046,31 +6096,33 @@ function ProductListingPage({ category, isLoading = false, }) {
     const { toggle } = useSidebar();
     const { hits: productHits } = useHits();
     const baseUrl = location.href.split('?')[0];
-    return (jsxs(Page, { className: styles$1['product-listing'], title: category.slice().pop(), children: [categories?.length > 0 && (jsx("section", { className: styles$1.categories, children: jsx(CategoryCarousel, { categories: categories }) })), jsxs("section", { className: styles$1['action-bar'], children: [jsx(ToggleSidebarButton, {}), jsx("span", { className: styles$1.count, children: jsx(AlgoliaResultsCount, {}) }), jsx(AlgoliaSortBy, {})] }), jsx("section", { children: isLoading ? (jsx("p", { children: "Loading..." })) : (jsxs("div", { className: styles$1['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { onShowProducts: toggle }) }), jsxs("div", { className: styles$1['product-grid'], children: [jsx(ProductOverviewGrid, { children: productHits.map(productHit => (jsx(ConnectedProductCart, { href: `${baseUrl}${baseUrl.endsWith('/') ? '' : '/'}${productHit.id}-${productHit.name.replace(/ /g, '-')}`, image: {
-                                            alt: productHit.name,
-                                            fit: 'contain',
-                                            sizes: { lg: 288, md: 204, sm: 122 },
-                                            src: productHit.images?.find(image => image.quality === 'large')?.url || '',
-                                            srcSet: [
-                                                {
-                                                    url: productHit.images?.find(image => image.quality === 'small')?.url || '',
-                                                    width: 122,
-                                                },
-                                                {
-                                                    url: productHit.images?.find(image => image.quality === 'medium')?.url || '',
-                                                    width: 204,
-                                                },
-                                                {
-                                                    url: productHit.images?.find(image => image.quality === 'large')?.url || '',
-                                                    width: 288,
-                                                },
-                                            ],
-                                            title: productHit.name,
-                                        }, price: {
-                                            current: productHit.discountedPrice,
-                                            includeVat: false,
-                                            original: productHit.price,
-                                        }, productId: productHit.id, sku: productHit.ean, tag: "new", title: productHit.name }, productHit.id))) }), jsx("div", { className: styles$1.pagination, children: jsx(AlgoliaPagination, {}) })] })] })) })] }));
+    const productGrid = useRef(null);
+    const scrollToTopOfProductGrid = useScrollTo(productGrid);
+    return (jsxs(Page, { className: styles$1['product-listing'], title: category.slice().pop(), children: [categories?.length > 0 && (jsx("section", { className: styles$1.categories, children: jsx(CategoryCarousel, { categories: categories }) })), jsxs("div", { ref: productGrid, children: [jsxs("section", { className: styles$1['action-bar'], children: [jsx("div", { children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$1.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$1.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: isLoading ? (jsx("p", { children: "Loading..." })) : (jsxs("div", { className: styles$1['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { onShowProducts: toggle }) }), jsxs("div", { className: styles$1['product-grid'], children: [jsx(ProductOverviewGrid, { children: productHits.map(productHit => (jsx(ConnectedProductCart, { href: `${baseUrl}${baseUrl.endsWith('/') ? '' : '/'}${productHit.id}-${productHit.name.replace(/ /g, '-')}`, image: {
+                                                    alt: productHit.name,
+                                                    fit: 'contain',
+                                                    sizes: { lg: 288, md: 204, sm: 122 },
+                                                    src: productHit.images?.find(image => image.quality === 'large')?.url || '',
+                                                    srcSet: [
+                                                        {
+                                                            url: productHit.images?.find(image => image.quality === 'small')?.url || '',
+                                                            width: 122,
+                                                        },
+                                                        {
+                                                            url: productHit.images?.find(image => image.quality === 'medium')?.url || '',
+                                                            width: 204,
+                                                        },
+                                                        {
+                                                            url: productHit.images?.find(image => image.quality === 'large')?.url || '',
+                                                            width: 288,
+                                                        },
+                                                    ],
+                                                    title: productHit.name,
+                                                }, price: {
+                                                    current: productHit.discountedPrice,
+                                                    includeVat: false,
+                                                    original: productHit.price,
+                                                }, productId: productHit.id, sku: productHit.ean, tag: "new", title: productHit.name }, productHit.id))) }), jsx("div", { className: styles$1.pagination, children: jsx(AlgoliaPagination, { onChange: scrollToTopOfProductGrid }) })] })] })) })] })] }));
 }
 
 var styles = {"sidebar-container":"sidebar-provider-module-rjeCL","transition":"sidebar-provider-module-C0cKR","sidebar-background":"sidebar-provider-module-VRgS9","is-open":"sidebar-provider-module-lxq2-"};
@@ -6112,6 +6164,16 @@ function SidebarProvider({ children }) {
                     }), onClick: closeTransitions }), children] }) }));
 }
 
+const createSonicSearchClient = (url) => ({
+    async search(requests) {
+        return fetch(url, {
+            body: JSON.stringify({ requests }),
+            headers: { 'Content-Type': 'application/json' },
+            method: 'post',
+        }).then(res => res.json());
+    },
+});
+
 const queryStringRouting = {
     router: history({
         cleanUrlOnDispose: true,
@@ -6177,7 +6239,7 @@ function AlgoliaProvider({ category, children, offlineSearchClient, online: _onl
         }, children: jsxs(InstantSearch, { future: {
                 persistHierarchicalRootCount: true,
                 preserveSharedStateOnUnmount: true,
-            }, indexName: "dev_sonic_products_en", routing: routing, searchClient: online ? searchClient : offlineSearchClient || searchClient, children: [jsx(Configure, { analytics: false, filters: category && category.length
+            }, indexName: "dev_sonic_products_en", routing: routing, searchClient: online ? searchClient : offlineSearchClient || searchClient, children: [jsx(Configure, { analytics: false, filters: category.length
                         ? `categoryPages: '${category.join(' > ')}'`
                         : undefined, hitsPerPage: 9, maxValuesPerFacet: 100, ruleContexts: ['storefront'] }), children] }) }));
 }
@@ -6185,4 +6247,4 @@ function useAlgolia() {
     return useContext(AlgoliaContext);
 }
 
-export { Accordion, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, AlgoliaFilterSection, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, Breadcrumb, BreadcrumbProvider, Button, CartFilledIcon, CartOutlinedIcon, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, ConnectedBreadcrumb, DehashedOutlinedIcon, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, FavoriteProvider, FormattedMessage, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, Image, IntlProvider, LinkButton, MultiSelect, NumberField, Page, PageLayout, ProductCard, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, Select, ShowAll, Sidebar, SidebarProvider, TextField, useAlgolia, useBreadcrumb, useBreakpoint, useCart, useDebouncedCallback, useDisclosure, useFavorite, useFormattedMessage, useGlobalState, useProductCartLine, useScrollLock };
+export { Accordion, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, AlgoliaFilterSection, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, Breadcrumb, BreadcrumbProvider, Button, CartFilledIcon, CartOutlinedIcon, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, ConnectedBreadcrumb, DehashedOutlinedIcon, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, FavoriteProvider, FormattedMessage, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, Image, IntlProvider, LeftArrowFilledIcon, LinkButton, MultiSelect, NumberField, Page, PageLayout, ProductCard, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, Select, ShowAll, Sidebar, SidebarProvider, TextAlignedArrowIcon, TextField, createSonicSearchClient, useAlgolia, useBreadcrumb, useBreakpoint, useCart, useDebouncedCallback, useDisclosure, useFavorite, useFormattedMessage, useGlobalState, useProductCartLine, useScrollLock };

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

@@ -1 +1 @@
-export type TranslationId = 'Chosen filters' | 'Clear filters' | 'Excl. VAT' | 'Hide filters' | 'Incl. VAT' | 'Show' | 'Show all' | 'Show filters' | 'Show less' | 'Sort' | 'articles' | 'article' | 'of';
+export type TranslationId = 'Chosen filters' | 'Clear' | 'Clear filters' | 'Excl. VAT' | 'Hide filters' | 'Incl. VAT' | 'Show' | 'Show all' | 'Show filters' | 'Show less' | 'Sort' | 'Submit' | 'articles' | 'article' | 'of';

package/dist/pages/product-listing-page/product-listing-page.stories.d.ts

@@ -3,6 +3,7 @@ import { StoryObj } from '@storybook/react';
 import { ProductListingPage } from './product-listing-page';
 declare const meta: {
     args: {
+        BFF: true;
         category: string[];
         isLoading: false;
         online: false;
@@ -15,6 +16,7 @@ declare const meta: {
 };
 export default meta;
 type StoryProps = ComponentProps<typeof ProductListingPage> & {
+    BFF: boolean;
     online: boolean;
 };
 type Story = StoryObj<StoryProps>;

package/dist/search/global-search/clear-icon.d.ts

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

package/dist/search/global-search/global-search.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { SearchClient } from 'algoliasearch/lite';
+import { Autocomplete } from './types';
+/**
+ * Global search using algolia autocomplete with a custom renderer
+ * https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer/
+ *
+ * Highly influenced by the two column layout sandbox which
+ * uses the autocomplete widgets
+ * https://codesandbox.io/p/sandbox/github/algolia/autocomplete/tree/next/examples/two-column-layout
+ */
+export declare function GlobalSearch(props: {
+    searchClient: SearchClient;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SearchForm(): import("react/jsx-runtime").JSX.Element;
+export declare function GlobalSearchProvider({ children, searchClient, }: {
+    children?: ReactNode | ((autocomplete: Autocomplete) => ReactNode);
+    searchClient: SearchClient;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/search/global-search/global-search.stories.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+import { StoryObj } from '@storybook/react';
+import { GlobalSearch } from './global-search';
+declare const meta: {
+    args: {
+        searchClient: import("algoliasearch/lite").SearchClient;
+    };
+    component: typeof GlobalSearch;
+    title: string;
+};
+export default meta;
+type StoryProps = ComponentProps<typeof GlobalSearch>;
+type Story = StoryObj<StoryProps>;
+export declare const Default: Story;

package/dist/search/global-search/highlight.d.ts

@@ -0,0 +1,21 @@
+import { HighlightedHit } from '@algolia/autocomplete-preset-algolia';
+type HighlightHitParams<THit> = {
+    /**
+     * The attribute to retrieve the highlighted parts from.
+     *
+     * You can use the array syntax to reference nested attributes.
+     */
+    attribute: keyof THit | string[];
+    /**
+     * The Algolia hit whose attribute to retrieve the highlighted parts from.
+     */
+    hit: THit;
+    /**
+     * The tag name to use for highlighted parts.
+     *
+     * @default "mark"
+     */
+    tagName?: string;
+};
+export declare function Highlight<THit extends HighlightedHit<unknown>>({ attribute, hit, tagName, }: HighlightHitParams<THit>): JSX.Element;
+export {};

package/dist/search/global-search/plugins/categories-plugin.d.ts

@@ -0,0 +1,10 @@
+import { AutocompletePlugin } from '@algolia/autocomplete-core';
+import { Hit } from '@algolia/client-search';
+import { SearchClient } from 'algoliasearch/lite';
+export type CategoryHit = Hit<{
+    listCategories: string[];
+}>;
+export declare const categoriesPlugin: ({ productsIndexName, searchClient, }: {
+    productsIndexName: string;
+    searchClient: SearchClient;
+}) => AutocompletePlugin<CategoryHit, unknown>;

package/dist/search/global-search/plugins/popular-categories-plugin.d.ts

@@ -0,0 +1,11 @@
+import { AutocompletePlugin } from '@algolia/autocomplete-core';
+import { Hit } from '@algolia/client-search';
+import { SearchClient } from 'algoliasearch/lite';
+export type PopularCategoryHit = Hit<{
+    count: number;
+    label: string;
+}>;
+export declare const popularCategoriesPlugin: ({ productsIndexName, searchClient, }: {
+    productsIndexName: string;
+    searchClient: SearchClient;
+}) => AutocompletePlugin<PopularCategoryHit, unknown>;

package/dist/search/global-search/plugins/popular-searches-plugin.d.ts

@@ -0,0 +1,12 @@
+import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
+import { Hit } from '@algolia/client-search';
+import { SearchClient } from 'algoliasearch/lite';
+export type PopularSearchHit = Hit<{
+    nb_words: number;
+    popularity: number;
+    query: string;
+}>;
+export declare const popularSearchesPlugin: ({ searchClient, suggestionsIndexName, }: {
+    searchClient: SearchClient;
+    suggestionsIndexName: string;
+}) => ReturnType<typeof createQuerySuggestionsPlugin>;

package/dist/search/global-search/plugins/products-plugin.d.ts

@@ -0,0 +1,23 @@
+import { AutocompletePlugin } from '@algolia/autocomplete-core';
+import { Hit } from '@algolia/client-search';
+import { SearchClient } from 'algoliasearch/lite';
+export type ProductHit = Hit<{
+    brand: string;
+    categories: string[];
+    discountedPrice: number;
+    ean: string;
+    id: string;
+    image: string;
+    images: {
+        quality: string;
+        url: string;
+    }[];
+    name: string;
+    objectID: string;
+    price: number;
+    slug: string;
+}>;
+export declare const productsPlugin: ({ productsIndexName, searchClient, }: {
+    productsIndexName: string;
+    searchClient: SearchClient;
+}) => AutocompletePlugin<ProductHit, unknown>;

package/dist/search/global-search/plugins/query-suggestions-plugin.d.ts

@@ -0,0 +1,12 @@
+import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
+import { Hit } from '@algolia/client-search';
+import { SearchClient } from 'algoliasearch/lite';
+export type QuerySuggestionHit = Hit<{
+    nb_words: number;
+    popularity: number;
+    query: string;
+}>;
+export declare const querySuggestionsPlugin: ({ searchClient, suggestionsIndexName, }: {
+    searchClient: SearchClient;
+    suggestionsIndexName: string;
+}) => ReturnType<typeof createQuerySuggestionsPlugin>;

package/dist/search/global-search/plugins/quick-access-plugin.d.ts

@@ -0,0 +1,13 @@
+import { AutocompletePlugin } from '@algolia/autocomplete-core';
+import { Hit } from '@algolia/client-search';
+import { SearchClient } from 'algoliasearch/lite';
+export type QuickAccessHit = Hit<{
+    id: number;
+    image: string;
+    title: string;
+    url: string;
+}>;
+export declare const quickAccessPlugin: ({ productsIndexName, searchClient, }: {
+    productsIndexName: string;
+    searchClient: SearchClient;
+}) => AutocompletePlugin<QuickAccessHit, unknown>;

package/dist/search/global-search/plugins/recent-searches-plugin.d.ts

@@ -0,0 +1,7 @@
+import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
+import { Hit } from '@algolia/client-search';
+export type RecentSearchHit = Hit<{
+    id: string;
+    label: string;
+}>;
+export declare const recentSearchesPlugin: ReturnType<typeof createLocalStorageRecentSearchesPlugin>;

package/dist/search/global-search/search-icon.d.ts

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

package/dist/search/global-search/types.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { AutocompleteApi, AutocompleteState as _AutocompleteState } from '@algolia/autocomplete-core';
+import { SearchClient } from 'algoliasearch/lite';
+import { CategoryHit } from './plugins/categories-plugin';
+import { PopularCategoryHit } from './plugins/popular-categories-plugin';
+import { PopularSearchHit } from './plugins/popular-searches-plugin';
+import { ProductHit } from './plugins/products-plugin';
+import { QuerySuggestionHit } from './plugins/query-suggestions-plugin';
+import { QuickAccessHit } from './plugins/quick-access-plugin';
+import { RecentSearchHit } from './plugins/recent-searches-plugin';
+export type AutocompleteItem = ProductHit | QuerySuggestionHit | PopularCategoryHit | QuickAccessHit | RecentSearchHit | CategoryHit | PopularSearchHit;
+export type Autocomplete = AutocompleteApi<AutocompleteItem, React.BaseSyntheticEvent, React.MouseEvent, React.KeyboardEvent>;
+export type AutocompleteState = _AutocompleteState<AutocompleteItem>;
+export type GlobalSearchContextValue = {
+    autocomplete: Autocomplete;
+    formRef: React.RefObject<HTMLFormElement>;
+    inputRef: React.RefObject<HTMLInputElement>;
+    panelRef: React.RefObject<HTMLDivElement>;
+    productsIndexName: string;
+    productsQuerySuggestionsIndexName: string;
+    searchClient: SearchClient;
+    state: AutocompleteState;
+};

package/dist/search/search-input/search-input.d.ts

@@ -0,0 +1,5 @@
+import { Autocomplete } from 'search/global-search/types';
+export interface SearchInputProps {
+    autocomplete?: Autocomplete;
+}
+export declare function SearchInput({ autocomplete }: SearchInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/search/search-input/search-input.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SearchInput } from './search-input';
+declare const meta: Meta<typeof SearchInput>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/shared/hooks/use-scroll-to.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+interface ScrollOptions {
+    behavior?: ScrollBehavior;
+    scrollPadding?: number;
+}
+export declare const useScrollTo: (ref: RefObject<HTMLElement>, scrollOptions?: ScrollOptions) => () => void;
+export {};

package/dist/styles.css

@@ -131,6 +131,7 @@
 
   /* Neutrals */
   --color-gray-50: #fbfbfb;
+  --color-gray-75: #f6f6f6;
   --color-gray-100: #ededed;
   --color-gray-500: #bcbcbc;
   --color-gray-900: #6f6f6f;
@@ -254,6 +255,7 @@
         font-weight: var(--font-weight-bold);
       }
 .breadcrumb-module-CQGse .breadcrumb-module-hxhDY:not(:last-of-type)::after {
+      color: var(--color-brand-medium-gray);
       content: '/';
       margin-inline: 10px;
     }
@@ -618,18 +620,61 @@
     justify-content: space-between;
   }
 
+  .number-field-module-gmnog .number-field-module-8Lvgh input {
+      min-width: var(--space-36);
+      transition: font-size 0.5s ease;
+    }
+
+  .number-field-module-gmnog .number-field-module-8Lvgh:has(button[data-pressed]) input {
+        animation: number-field-module-OlEoa 100ms infinite;
+      }
+
   .number-field-module-gmnog .number-field-module-8Lvgh button {
       all: unset;
+      position: relative;
+      display: flex;
       width: var(--space-32);
+      align-items: center;
+      justify-content: center;
       cursor: pointer;
-      font-size: var(--font-size-24);
+      font-size: var(--font-size-32);
+      -webkit-tap-highlight-color: transparent;
       text-align: center;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+              user-select: none;
     }
 
+  .number-field-module-gmnog .number-field-module-8Lvgh button[data-pressed]::before {
+          position: absolute;
+          z-index: -1;
+          top: 50%;
+          left: 50%;
+          display: block;
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          margin-top: -12px;
+          margin-left: -12px;
+          background-color: var(--color-brand-light-gray);
+          content: '';
+        }
+
   .number-field-module-gmnog span:empty {
     display: none;
   }
 
+@keyframes number-field-module-OlEoa {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.3);
+  }
+}
+
 .add-to-cart-button-module-AWFvQ {
   display: inline-flex;
   flex-direction: row;
@@ -1293,9 +1338,6 @@
         right: 0;
         transform: translate(50%, 0);
       }
-.carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z.carousel-module-T7bTr .carousel-module-p5oAL {
-          transform: rotate(180deg);
-        }
 .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z .carousel-module-kcqEE {
         width: 44px;
         height: 44px;
@@ -1311,8 +1353,8 @@
           background-color: var(--color-brand-light-gray);
         }
 .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z .carousel-module-kcqEE[data-disabled] {
+          color: #bcbcbc66;
           cursor: default;
-          opacity: 0.4;
         }
 .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-nL-O8 .carousel-module-Hi-0z {
         top: var(--space-24);
@@ -1625,8 +1667,8 @@
 
   all: unset;
   position: relative;
-  display: grid;
-  width: 100%;
+  display: inline-flex;
+  box-sizing: border-box;
   gap: var(--space-4);
 }
 
@@ -1867,26 +1909,34 @@
       }
 }
 
-.page-layout-module-osQ2n {
-  --page-layout-padding: 1rem;
-
-  position: relative;
-  box-sizing: border-box;
-  padding: var(--page-layout-padding);
-  padding-bottom: var(--space-64);
+.page-layout-module-sSsgZ {
+  overflow: hidden;
 }
 
-  @media (width >= 768px) {.page-layout-module-osQ2n {
-    max-width: calc(806px + (2 * var(--page-layout-padding)));
-    margin: 0 auto
-}
+  .page-layout-module-sSsgZ .page-layout-module-osQ2n {
+    --page-layout-padding: 10px;
+
+    position: relative;
+    box-sizing: border-box;
+    padding: var(--page-layout-padding);
+    padding-bottom: var(--space-64);
   }
 
-  @media (width >= 1440px) {.page-layout-module-osQ2n {
-    max-width: calc(1222px + (2 * var(--page-layout-padding)));
-    padding-bottom: var(--space-96)
-}
+  @media (width >= 768px) {
+
+  .page-layout-module-sSsgZ .page-layout-module-osQ2n {
+      max-width: calc(806px + (2 * var(--page-layout-padding)));
+      margin: 0 auto
+  }
+    }
+
+  @media (width >= 1440px) {
+
+  .page-layout-module-sSsgZ .page-layout-module-osQ2n {
+      max-width: calc(1222px + (2 * var(--page-layout-padding)));
+      padding-bottom: var(--space-96)
   }
+    }
 
 .heading-module-pMC65 {
   padding: 0;
@@ -2142,11 +2192,16 @@
     margin-bottom: 44px;
   }
   .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr {
-    display: grid;
+    display: flex;
+    flex-wrap: wrap;
     align-items: center;
+    justify-content: space-between;
     margin-bottom: var(--space-24);
-    grid-template-columns: auto 1fr auto;
   }
+  .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-aQzHr {
+      display: flex;
+      justify-content: flex-end;
+    }
   .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-zx79v {
       margin: auto;
     }
@@ -2166,6 +2221,11 @@
     grid-column: span 2;
   }
   @media (width >= 1440px) {
+    .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+    }
+
     .product-listing-page-module-dmIHF .product-listing-page-module-ICkKg {
       grid-template-columns: auto 1fr;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -31,16 +31,16 @@
     "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 \"pnpm test:types\" \"pnpm lint\" \"pnpm stylelint\"",
+    "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:types": "tsc --noEmit --pretty false",
     "update-packages": "npx npm-check-updates -u"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "qs": "^6",
     "algoliasearch": "^4",
     "instantsearch.js": "^4",
+    "qs": "^6",
+    "react": "^18",
+    "react-dom": "^18",
     "react-instantsearch": "^7",
     "react-instantsearch-core": "^7"
   },
@@ -108,10 +108,14 @@
     "vite-tsconfig-paths": "^4.3.2"
   },
   "dependencies": {
+    "@algolia/autocomplete-core": "^1.17.2",
+    "@algolia/autocomplete-plugin-query-suggestions": "^1.17.2",
+    "@algolia/autocomplete-plugin-recent-searches": "^1.17.2",
+    "@algolia/autocomplete-preset-algolia": "^1.17.2",
     "@algolia/client-search": "^4.23.3",
     "algoliasearch": "^4.23.3",
-    "instantsearch.js": "^4.69.0",
     "clsx": "^2.1.1",
+    "instantsearch.js": "^4.69.0",
     "react-aria-components": "^1.2.1",
     "react-instantsearch": "^7.9.0",
     "swiper": "^11.1.3"