@sonic-equipment/ui 0.0.13 → 0.0.15

package/dist/forms/textarea/textarea.stories.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import { TextArea } from './textarea';
+declare const meta: {
+    component: import("react").FC<import("./textarea").TextAreaProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+export declare const Default: Story;
+export declare const Placeholder: Story;
+export declare const MultlineAutoGrow: Story;
+export declare const MultlineSizeMD: Story;
+export declare const Controlled: Story;
+export declare const Uncontrolled: Story;

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

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

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

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

package/dist/index.d.ts

@@ -1,20 +1,30 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentType, ReactNode } from 'react';
+import { ReactElement, ReactNode, FormEventHandler, KeyboardEvent, ComponentType } from 'react';
+
+type AddToCartState = 'initial' | 'spinner' | 'manual-input';
+interface AddToCartButtonProps {
+    initialState?: AddToCartState;
+    onChange?: (quantity: number) => void;
+    quantity: number;
+}
+declare function AddToCartButton({ initialState, onChange, quantity, }: AddToCartButtonProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
-    children: string;
+    children?: string;
     className?: string;
     color?: 'primary' | 'secondary';
+    condensed?: boolean;
     icon?: React.ReactNode;
     isDisabled?: boolean;
     onPress?: VoidFunction;
     size?: 'md' | 'lg';
+    type?: 'button' | 'submit' | 'reset';
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-declare function Button({ _pseudo, children, className, color, icon, isDisabled, onPress, size, variant, withArrow, }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ _pseudo, children, className, color, condensed, icon, isDisabled, onPress, size, type, variant, withArrow, }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface FavoriteButtonProps {
     isFavorite: boolean;
@@ -31,55 +41,167 @@ interface IconButtonProps {
 }
 declare function IconButton({ children, className, color, onPress, size, }: IconButtonProps): react_jsx_runtime.JSX.Element;
 
-interface Product {
-  id: string
+interface Source$1 {
+  url: string
+  width: number
+}
+
+type Breakpoint$1 = 'lg' | 'md' | 'sm'
+
+type Sizes$1 = Record<Breakpoint$1, number>
+
+interface ImageProps$1 {
+  alt: string
+  className?: string
+  fallbackSrc?: string
+  fit?: 'contain' | 'cover'
+  height?: number
+  loading?: 'lazy' | 'eager'
+  sizes?: Sizes$1
+  src: string
+  srcSet?: Source$1[]
   title: string
+  width?: number
 }
 
-interface ProductCardProps {
-    favoriteButton: ComponentType<{
-        productId: string;
-    }>;
-    product: Product;
+interface ProductPrice$1 {
+  current: number
+  includeVat?: boolean
+  original?: number
 }
-declare function ProductCard({ favoriteButton: FavoriteButton, product, }: ProductCardProps): react_jsx_runtime.JSX.Element;
 
-interface Price {
-    exclVat: number;
-    inclVat: number;
+interface ProductCardProps {
+    addToCartButton: ReactElement;
+    favoriteButton?: ReactElement;
+    image: ImageProps$1;
+    onClick: React.MouseEventHandler<HTMLDivElement>;
+    price: ProductPrice$1;
+    sku: string;
+    tag?: 'new' | 'sale';
+    title: string;
 }
+declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, image: { alt, fit, src, title: imageTitle }, onClick, price, sku, tag, title, }: ProductCardProps): react_jsx_runtime.JSX.Element;
+
 interface ProductPriceProps {
-    current: Price;
+    className?: string;
+    current: number;
     includeVat?: boolean;
-    original?: Price;
+    original?: number;
 }
-declare function ProductPrice({ current, includeVat, original, }: ProductPriceProps): react_jsx_runtime.JSX.Element | undefined;
+declare function ProductPrice({ className, current, includeVat, original, }: ProductPriceProps): react_jsx_runtime.JSX.Element | undefined;
 
 interface ProductSkuProps {
     sku: string;
 }
 declare function ProductSku({ sku }: ProductSkuProps): react_jsx_runtime.JSX.Element;
 
+interface CheckboxProps {
+    _pseudo?: 'none' | 'focus' | 'hover' | 'active';
+    children: ReactNode;
+    className?: string;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    onChange?: (isSelected: boolean) => void;
+    value?: string;
+}
+declare function Checkbox({ _pseudo, children, className, isDisabled, isSelected, onChange, value, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+type NumberFieldSize = 'md' | 'lg';
+interface NumberFieldProps {
+    autoFocus?: boolean;
+    autoGrow?: boolean;
+    defaultValue?: number;
+    formatOptions?: Intl.NumberFormatOptions;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    label: string;
+    maxLength?: number;
+    maxValue?: number;
+    minValue?: number;
+    name?: string;
+    onChange?: (value: number) => void;
+    onInput?: FormEventHandler<HTMLInputElement>;
+    onKeyUp?: (e: KeyboardEvent) => void;
+    placeholder?: string;
+    showLabel?: boolean;
+    size?: NumberFieldSize;
+    value?: number;
+    withButtons?: boolean;
+}
+/**
+ * This component is used to create a number field.
+ * This field can also grow when a user types in text.
+ */
+declare function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel, size, value, withButtons, }: NumberFieldProps): react_jsx_runtime.JSX.Element;
+
+interface TextFieldProps {
+    autoFocus?: boolean;
+    autoGrow?: boolean;
+    defaultValue?: string;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isMultiline?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    label: string;
+    maxLength?: number;
+    onChange?: (value: string) => void;
+    onInput?: FormEventHandler<HTMLInputElement>;
+    onKeyUp?: (e: KeyboardEvent) => void;
+    placeholder?: string;
+    rows?: number;
+    showLabel?: boolean;
+    size?: 'md' | 'lg';
+    value?: string;
+}
+/**
+ * This component is used to create a text field.
+ * It can be used as a single line input or as a textarea.
+ * This field can also grow when a user types in text.
+ */
+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 RightArrowFilledIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
 declare function CartFilledIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
 declare function CartOutlinedIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
+declare function DehashedOutlinedIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
 declare function FavoriteFilledIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
 declare function FavoriteOutlinedIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
-interface CheckboxProps {
-    _pseudo?: 'none' | 'focus' | 'hover' | 'active';
-    children: ReactNode;
+declare function HashedOutlinedIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+interface ProductOverviewGridProps {
+    children?: ReactNode;
+}
+declare function ProductOverviewGrid({ children }: ProductOverviewGridProps): react_jsx_runtime.JSX.Element;
+
+interface Source {
+    url: string;
+    width: number;
+}
+type Breakpoint = 'lg' | 'md' | 'sm';
+type Sizes = Record<Breakpoint, number>;
+interface ImageProps {
+    alt: string;
     className?: string;
-    isDisabled?: boolean;
-    isSelected?: boolean;
-    onChange?: (isSelected: boolean) => void;
-    value?: string;
+    fallbackSrc?: string;
+    fit?: 'contain' | 'cover';
+    height?: number;
+    loading?: 'lazy' | 'eager';
+    sizes?: Sizes;
+    src: string;
+    srcSet?: Source[];
+    title: string;
+    width?: number;
 }
-declare function Checkbox({ _pseudo, children, className, isDisabled, isSelected, onChange, value, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare function Image({ alt, className, fallbackSrc, fit, height, loading, sizes: sizesProp, src, srcSet: srcSetProp, title, width, }: ImageProps): react_jsx_runtime.JSX.Element;
 
 interface Filters {
     color: {
@@ -103,9 +225,7 @@ type ProductListingProps = {
     isLoading?: boolean;
     onFilterChange: (filters: ActiveFilters) => void;
     onSortChange: (sort: Sort) => void;
-    productCard: ComponentType<{
-        product: Product;
-    }>;
+    productCard: ComponentType<any>;
     products: {
         id: string;
         title: string;
@@ -137,4 +257,4 @@ declare function parseProductListingSearchParams(params: URLSearchParams): {
     };
 };
 
-export { type ActiveFilters, Button, type ButtonProps, CartFilledIcon, CartOutlinedIcon, Checkbox, type CheckboxProps, FavoriteButton, type FavoriteButtonProps, FavoriteFilledIcon, FavoriteOutlinedIcon, type Filters, IconButton, type IconButtonProps, ProductCard, type ProductCardProps, ProductListing, type ProductListingProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, RightArrowFilledIcon, type Sort, createProductListingSearchParams, parseProductListingSearchParams };
+export { type ActiveFilters, AddToCartButton, Button, type ButtonProps, CartFilledIcon, CartOutlinedIcon, Checkbox, type CheckboxProps, DehashedOutlinedIcon, FavoriteButton, type FavoriteButtonProps, FavoriteFilledIcon, FavoriteOutlinedIcon, type Filters, HashedOutlinedIcon, IconButton, type IconButtonProps, Image, type ImageProps, NumberField, type NumberFieldSize, ProductCard, type ProductCardProps, ProductListing, type ProductListingProps, ProductOverviewGrid, type ProductOverviewGridProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, RightArrowFilledIcon, type Sort, TextField, createProductListingSearchParams, parseProductListingSearchParams };

package/dist/index.js

@@ -1,23 +1,140 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Button as Button$1, Checkbox as Checkbox$1 } from 'react-aria-components';
+import { forwardRef, useState, useEffect, useRef, useCallback, Children } from 'react';
+import { Button as Button$1, FieldError as FieldError$1, useContextProps, InputContext, Input as Input$1, Label as Label$1, NumberField as NumberField$1, Checkbox as Checkbox$1, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1 } from 'react-aria-components';
 import clsx from 'clsx';
 
 function RightArrowFilledIcon(props) {
-    return (jsx("svg", { height: "13", viewBox: "0 0 12 13", width: "12", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M3.24 11.4a.239.239 0 0 1-.203-.365l3.105-4.97c.256-.41.219-.932-.093-1.3L3.54 1.792a.239.239 0 0 1 .183-.393h1.956c.07 0 .137.031.182.085l1.866 2.21c.778.92.871 2.226.232 3.249l-2.715 4.344a.239.239 0 0 1-.202.112H3.239z", fill: "currentColor", fillRule: "evenodd" }) }));
+    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$5 = {"button":"button-module-V4meK","md":"button-module-GVTEW","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"};
+var styles$g = {"button":"button-module-V4meK","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', icon, isDisabled, onPress, size = 'md', variant = 'solid', withArrow = false, }) {
+function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, icon, isDisabled, onPress, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
     if (children && icon)
         console.warn('Button should not have both children and icon. Icon has precedence.');
-    return (jsx(Button$1, { className: clsx(className, styles$5.button, styles$5[variant], styles$5[size], styles$5[color], { [styles$5.icon]: icon }, styles$5[_pseudo]), isDisabled: isDisabled, onPress: onPress, children: icon ? (icon) : (jsxs(Fragment, { children: [children, withArrow && (jsx(RightArrowFilledIcon, { className: styles$5['right-arrow-icon'] }))] })) }));
+    return (jsx(Button$1, { className: clsx(className, styles$g.button, styles$g[variant], styles$g[size], styles$g[color], { [styles$g.condensed]: condensed }, { [styles$g.icon]: icon }, styles$g[_pseudo]), isDisabled: isDisabled, onPress: onPress, type: type, children: icon ? (icon) : (jsxs(Fragment, { children: [children, withArrow && (jsx(RightArrowFilledIcon, { className: styles$g['right-arrow-icon'] }))] })) }));
 }
 
-var styles$4 = {"iconButton":"icon-button-module-HJm0i","md":"icon-button-module-k3s9J","lg":"icon-button-module-agk6Y","primary":"icon-button-module-fTeP4","secondary":"icon-button-module-dM0eo"};
+var styles$f = {"field-error":"field-error-module-FXnIg"};
+
+function FieldError({ children }) {
+    return (jsx(FieldError$1, { className: styles$f['field-error'], children: children }));
+}
+
+var styles$e = {"input-container":"input-module-2woJR","shadow-input":"input-module-pNKEt","lg":"input-module-Dx2qC","md":"input-module-sH6e7","focus":"input-module-hEEuy","growing-input":"input-module-6HwY4"};
+
+/**
+ * This component is used to create an input that grows as the user types.
+ * It uses a shadow input to calculate the width of the input.
+ */
+const Input = forwardRef(({ _pseudo = 'none', autoGrow, size = 'lg', ...inputProps }, inputRef) => {
+    const [props, ref] = useContextProps(inputProps, inputRef, InputContext);
+    const { defaultValue, onChange, value: controlledValue } = props;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const handleChange = (event) => isControlled
+        ? onChange?.(event)
+        : setUncontrolledValue(event.target.value);
+    return (jsx("div", { className: clsx(styles$e['input-container'], styles$e[size], styles$e[_pseudo]), children: jsxs("div", { className: clsx({ [styles$e['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ref: ref, onChange: handleChange }), autoGrow && jsx("span", { className: styles$e['shadow-input'], children: value })] }) }));
+});
+Input.displayName = 'Input';
+
+var styles$d = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
+
+function Label({ children, isRequired }) {
+    if (!children)
+        return null;
+    return (jsxs(Label$1, { className: styles$d.label, children: [children, isRequired && jsx("span", { className: styles$d.required, children: "*" })] }));
+}
+
+var styles$c = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh"};
+
+/**
+ * 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 = true, size = 'lg', value, withButtons, }) {
+    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$c.field, styles$c[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$c['button-input-container'], children: [withButtons && jsx(Button$1, { slot: "decrement", children: "-" }), jsx(Input, { autoGrow: autoGrow, maxLength: maxLength, placeholder: placeholder, size: size }), withButtons && jsx(Button$1, { slot: "increment", children: "+" })] }), jsx(FieldError, {})] }));
+}
+
+function CartFilledIcon(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: "M7.896 16.666a2.603 2.603 0 1 1 0 5.207 2.603 2.603 0 0 1 0-5.207zm8.925 0a2.603 2.603 0 1 1 0 5.207 2.603 2.603 0 0 1 0-5.207zM7.896 18.1c-.645 0-1.17.524-1.17 1.169s.525 1.17 1.17 1.17a1.171 1.171 0 0 0 0-2.34zm8.925 0c-.645 0-1.17.524-1.17 1.169s.525 1.17 1.17 1.17a1.171 1.171 0 0 0 0-2.34zM4.589 3c.016 0 .032.004.048.005a.714.714 0 0 1 .146.025l.05.016a.7.7 0 0 1 .083.037l.04.021a.712.712 0 0 1 .076.053l.035.03a.699.699 0 0 1 .168.223.703.703 0 0 1 .061.209c.002.014.007.027.008.042l.207 2.646h15.776c.027.001.05.006.073.008.026.003.052.004.077.01.022.004.036.011.05.016.03.008.058.016.085.028.02.009.037.02.056.03.022.012.044.024.065.038.019.013.035.029.053.044.017.015.036.029.052.046.015.016.028.034.042.051.015.019.03.037.044.057.011.018.02.038.03.057.012.021.024.042.033.065.009.022.014.044.021.067.006.022.014.043.018.066.006.027.007.054.009.081.001.018.005.035.005.053-.001.031-.005.054-.008.077-.003.026-.004.052-.01.077l-1.39 6.054-.004.017a.698.698 0 0 1-.033.1l-.008.024a.716.716 0 0 1-.06.11l-.024.03a.707.707 0 0 1-.057.07l-.035.033a.695.695 0 0 1-.175.117l-.048.022a.723.723 0 0 1-.083.026c-.014.003-.027.008-.041.01a.707.707 0 0 1-.134.014H6.096l.112 1.427H19.41a.717.717 0 0 1 0 1.434H5.544a.714.714 0 0 1-.14-.015c-.015-.003-.03-.008-.044-.012-.03-.008-.06-.016-.087-.027-.018-.008-.034-.017-.05-.026-.024-.012-.048-.023-.07-.037-.016-.011-.03-.024-.046-.036-.02-.016-.04-.03-.058-.048-.015-.014-.027-.03-.04-.044-.017-.02-.033-.038-.048-.058-.012-.017-.021-.034-.032-.052a.678.678 0 0 1-.035-.065c-.009-.02-.016-.04-.023-.06a.715.715 0 0 1-.033-.136l-.008-.045-.904-11.571H2.717a.717.717 0 1 1 0-1.434z", fill: "currentColor", fillRule: "evenodd" }) }));
+}
+
+var styles$b = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
+
+function AddToCartButton({ initialState = 'initial', onChange, quantity, }) {
+    const [currentState, setState] = useState(initialState);
+    const [manualInputQuantity, setManualInputQuantity] = useState(quantity);
+    useEffect(() => {
+        /* Reset the state when the (initial) quantity changes to zero */
+        setState(currentState => {
+            if (currentState === 'initial' && quantity > 0)
+                return 'spinner';
+            if (currentState === 'spinner' && quantity === 0)
+                return 'initial';
+            if (currentState === 'manual-input' && quantity === 0)
+                return 'initial';
+            return currentState;
+        });
+    }, [currentState, quantity]);
+    if (currentState === 'initial')
+        return (jsx(InitialState, { onAddToCart: () => {
+                setState('spinner');
+                onChange?.(1);
+            } }));
+    if (currentState === 'spinner')
+        return (jsx(SpinnerState, { onChange: value => {
+                if (value === 0)
+                    setState('initial');
+                onChange?.(value);
+            }, onManualInput: value => {
+                setManualInputQuantity(value);
+                setState('manual-input');
+            }, quantity: quantity }));
+    return (jsx(ManualInputState, { onCancel: () => setState('spinner'), onConfirm: value => {
+            onChange?.(value);
+            setState(value === 0 ? 'initial' : 'spinner');
+        }, quantity: manualInputQuantity }));
+}
+function InitialState({ onAddToCart }) {
+    return (jsx(Button, { condensed: true, icon: jsx(CartFilledIcon, {}), onPress: onAddToCart, size: "md" }));
+}
+const ensureNumber = (value) => {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value !== 'string')
+        return 0;
+    const numberValue = parseFloat(value);
+    return !isNaN(numberValue) ? numberValue : 0;
+};
+function SpinnerState({ onChange, onManualInput, quantity, }) {
+    return (jsx(NumberField, { withButtons: true, autoGrow: true, formatOptions: {
+            maximumFractionDigits: 0,
+            style: 'decimal',
+            useGrouping: false,
+        }, label: "Quantity", maxLength: 4, maxValue: 9999, minValue: 0, onChange: onChange, onInput: e => {
+            onManualInput(ensureNumber(e.target.value));
+        }, showLabel: false, size: "md", value: quantity }));
+}
+function ManualInputState({ onCancel, onConfirm, quantity, }) {
+    const [updatedQuantity, setQuantity] = useState(quantity);
+    const onKeyUp = (e) => {
+        e.key === 'Enter' && onConfirm(updatedQuantity);
+        e.key === 'Escape' && onCancel();
+    };
+    return (jsxs("div", { className: styles$b['manual-input-container'], children: [jsx("div", { className: styles$b['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity, formatOptions: {
+                    maximumFractionDigits: 0,
+                    style: 'decimal',
+                    useGrouping: false,
+                }, label: "Quantity", maxLength: 4, maxValue: 9999, minValue: 0, name: "quantity", onChange: setQuantity, onKeyUp: onKeyUp, showLabel: false, size: "md" }), jsx(Button, { condensed: true, onPress: () => onConfirm(updatedQuantity), size: "md", children: "OK" })] }));
+}
+
+var styles$a = {"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', onPress, size = 'md', }) {
-    return (jsx(Button$1, { className: clsx(styles$4.iconButton, styles$4[size], styles$4[color], className), onPress: onPress, children: children }));
+    return (jsx(Button$1, { className: clsx(styles$a['icon-button'], styles$a[size], styles$a[color], className), onPress: onPress, children: children }));
 }
 
 function FavoriteFilledIcon(props) {
@@ -28,55 +145,158 @@ function FavoriteOutlinedIcon(props) {
     return (jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M7.333 3.33c-2.206 0-4 1.793-4 3.997 0 .857.316 1.71.967 2.604L12 20.223l7.705-10.299c.646-.888.962-1.74.962-2.597a4.003 4.003 0 0 0-4-3.996c-1.813 0-3.545 1.232-4.028 2.865a.666.666 0 0 1-1.278 0C10.878 4.563 9.146 3.33 7.333 3.33M12 22c-.21 0-.408-.1-.534-.267L3.227 10.72C2.411 9.599 2 8.46 2 7.327A5.336 5.336 0 0 1 7.333 2c1.892 0 3.669.982 4.667 2.468C12.998 2.982 14.775 2 16.667 2 19.607 2 22 4.39 22 7.327c0 1.133-.411 2.272-1.222 3.387l-8.245 11.019A.667.667 0 0 1 12 22", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles$3 = {"favorite-button":"favorite-button-module-tXSS3","isFavorite":"favorite-button-module-6FS3Q"};
+var styles$9 = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q"};
 
 function FavoriteButton({ isFavorite, onPress }) {
-    return (jsx(IconButton, { className: clsx(styles$3['favorite-button'], {
-            [styles$3.isFavorite]: isFavorite,
+    return (jsx(IconButton, { className: clsx(styles$9['favorite-button'], {
+            [styles$9['is-favorite']]: isFavorite,
         }), color: "secondary", onPress: onPress, children: isFavorite ? jsx(FavoriteFilledIcon, {}) : jsx(FavoriteOutlinedIcon, {}) }));
 }
 
-function ProductCard({ favoriteButton: FavoriteButton, product, }) {
-    return (jsxs("div", { children: [jsx("div", { children: jsx(FavoriteButton, { productId: product.id }) }), jsx("h2", { children: product.title })] }));
+var styles$8 = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
+
+function Tag({ children }) {
+    if (!children)
+        return null;
+    return (jsxs("div", { className: styles$8.tag, children: [jsx("div", { className: styles$8.body, children: children }), jsx("svg", { className: styles$8.shape, height: "16", viewBox: "0 0 8 16", width: "8", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M.925 0H0v16h5.412l2.463-8.429c.362-1.238-.08-2.576-1.094-3.315L.925 0z", fill: "currentColor", fillRule: "nonzero" }) })] }));
 }
 
-var styles$2 = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","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"};
+var styles$7 = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","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({ current, includeVat = true, original, }) {
-    if (!current.inclVat && !current.exclVat)
+function ProductPrice({ className, current, includeVat, original, }) {
+    if (!current)
         return;
-    const originalPrice = includeVat ? original?.inclVat : original?.exclVat;
-    const currentPrice = includeVat ? current.inclVat : current.exclVat;
-    const originalPriceCurrency = originalPrice
-        ? formatPrice(originalPrice)
-        : null;
-    const currentPriceCurrency = formatPrice(currentPrice);
+    const originalPriceCurrency = original ? formatPrice(original) : null;
+    const currentPriceCurrency = formatPrice(current);
     const [wholes, decimals] = currentPriceCurrency.split('.');
-    return (jsxs("div", { className: styles$2['product-price'], children: [!!originalPrice && (jsx("span", { className: styles$2['original-price'], children: originalPriceCurrency })), jsxs("div", { className: styles$2['current-price-wrapper'], children: [jsxs("div", { className: styles$2['current-price'], children: [jsx("span", { className: styles$2.wholes, children: wholes }), jsx("span", { className: styles$2.dot, children: "." }), jsx("span", { className: styles$2.decimals, children: decimals })] }), jsx("span", { className: styles$2.vat, children: includeVat ? 'incl. tax' : 'excl. tax' })] })] }));
+    return (jsxs("div", { className: clsx(className, styles$7['product-price']), children: [!!original && (jsx("span", { className: styles$7['original-price'], children: originalPriceCurrency })), jsxs("div", { className: styles$7['current-price-wrapper'], children: [jsxs("div", { className: styles$7['current-price'], children: [jsx("span", { className: styles$7.wholes, children: wholes }), jsx("span", { className: styles$7.dot, children: "." }), jsx("span", { className: styles$7.decimals, children: decimals })] }), jsx("span", { className: styles$7.vat, children: includeVat ? 'incl. tax' : 'excl. tax' })] })] }));
 }
 
-var styles$1 = {"product-sku":"product-sku-module-ITb8x"};
+var styles$6 = {"product-sku":"product-sku-module-ITb8x"};
 
 function ProductSku({ sku }) {
-    return jsx("p", { className: styles$1['product-sku'], children: sku });
+    return jsx("p", { className: styles$6['product-sku'], children: sku });
 }
 
-function CartFilledIcon(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: "M7.896 16.666a2.603 2.603 0 1 1 0 5.207 2.603 2.603 0 0 1 0-5.207zm8.925 0a2.603 2.603 0 1 1 0 5.207 2.603 2.603 0 0 1 0-5.207zM7.896 18.1c-.645 0-1.17.524-1.17 1.169s.525 1.17 1.17 1.17a1.171 1.171 0 0 0 0-2.34zm8.925 0c-.645 0-1.17.524-1.17 1.169s.525 1.17 1.17 1.17a1.171 1.171 0 0 0 0-2.34zM4.589 3c.016 0 .032.004.048.005a.714.714 0 0 1 .146.025l.05.016a.7.7 0 0 1 .083.037l.04.021a.712.712 0 0 1 .076.053l.035.03a.699.699 0 0 1 .168.223.703.703 0 0 1 .061.209c.002.014.007.027.008.042l.207 2.646h15.776c.027.001.05.006.073.008.026.003.052.004.077.01.022.004.036.011.05.016.03.008.058.016.085.028.02.009.037.02.056.03.022.012.044.024.065.038.019.013.035.029.053.044.017.015.036.029.052.046.015.016.028.034.042.051.015.019.03.037.044.057.011.018.02.038.03.057.012.021.024.042.033.065.009.022.014.044.021.067.006.022.014.043.018.066.006.027.007.054.009.081.001.018.005.035.005.053-.001.031-.005.054-.008.077-.003.026-.004.052-.01.077l-1.39 6.054-.004.017a.698.698 0 0 1-.033.1l-.008.024a.716.716 0 0 1-.06.11l-.024.03a.707.707 0 0 1-.057.07l-.035.033a.695.695 0 0 1-.175.117l-.048.022a.723.723 0 0 1-.083.026c-.014.003-.027.008-.041.01a.707.707 0 0 1-.134.014H6.096l.112 1.427H19.41a.717.717 0 0 1 0 1.434H5.544a.714.714 0 0 1-.14-.015c-.015-.003-.03-.008-.044-.012-.03-.008-.06-.016-.087-.027-.018-.008-.034-.017-.05-.026-.024-.012-.048-.023-.07-.037-.016-.011-.03-.024-.046-.036-.02-.016-.04-.03-.058-.048-.015-.014-.027-.03-.04-.044-.017-.02-.033-.038-.048-.058-.012-.017-.021-.034-.032-.052a.678.678 0 0 1-.035-.065c-.009-.02-.016-.04-.023-.06a.715.715 0 0 1-.033-.136l-.008-.045-.904-11.571H2.717a.717.717 0 1 1 0-1.434z", fill: "currentColor", fillRule: "evenodd" }) }));
+var styles$5 = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe"};
+
+const breakpointToWidth = {
+    lg: 1440,
+    md: 1024,
+    sm: 414,
+};
+function Image({ alt, className, fallbackSrc = '/images/fallback.svg', fit = 'cover', height, loading = 'eager', sizes: sizesProp, src, srcSet: srcSetProp, title, width, }) {
+    const [currentSrc, setCurrentSrc] = useState(src);
+    const srcSet = srcSetProp
+        ? srcSetProp.map(({ url, width }) => `${url} ${width}w`).join(', ')
+        : undefined;
+    const sizes = sizesProp
+        ? Object.entries(sizesProp)
+            .map(([breakpoint, width]) => {
+            const widthValue = breakpointToWidth[breakpoint];
+            return widthValue
+                ? `${breakpoint !== 'sm' ? `(min-width: ${widthValue}px)` : ''} ${width}px`
+                : `${width}px`;
+        })
+            .join(', ')
+        : undefined;
+    const handleError = () => {
+        setCurrentSrc(fallbackSrc);
+    };
+    return (jsx("img", { alt: alt, className: clsx(styles$5.image, styles$5[fit], className), height: height, loading: loading, onError: handleError, sizes: sizes, src: currentSrc, srcSet: srcSet, title: title, width: width }));
+}
+
+var styles$4 = {"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, image: { alt, fit, src, title: imageTitle }, onClick, price, sku, tag, title, }) {
+    return (jsxs("div", { className: styles$4['product-card'], onClick: onClick, children: [jsx("div", { className: styles$4.image, children: jsx(Image, { alt: alt, fit: fit, src: src, title: imageTitle }) }), jsx("div", { className: styles$4['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$4.content, children: [jsxs("div", { className: styles$4.top, children: [jsx("div", { className: styles$4.tag, children: tag && jsx(Tag, { children: tag }) }), jsx("h2", { className: styles$4.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$4.bottom, children: [jsx("div", { className: styles$4.price, children: jsx(ProductPrice, { current: price.current, includeVat: price.includeVat, original: price.original }) }), jsx("div", { className: styles$4['add-to-cart-button'], children: AddToCartButton })] })] })] }));
+}
+
+var styles$3 = {"checkbox":"checkbox-module-YNVdd","box":"checkbox-module-UKoyf","checkmark":"checkbox-module-pHIwh","focus":"checkbox-module-v23jy","active":"checkbox-module-7UG-b"};
+
+function Checkbox({ _pseudo = 'none', children, className, isDisabled, isSelected, onChange, value, }) {
+    return (jsxs(Checkbox$1, { className: clsx(className, styles$3.checkbox, styles$3[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$3.box, children: jsx("svg", { "aria-hidden": "true", className: styles$3.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
+}
+
+var styles$2 = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
+
+/**
+ * This component is used to create a textarea that can grow as the user types.
+ * It uses the scrollHeight property to calculate the height of the textarea.
+ * The initial height is calculated based on the style of the textarea.
+ * The height is updated everytime the user types.
+ */
+const TextArea = forwardRef(({ autoGrow, size, ...textAreaProps }, _ref) => {
+    const textAreaRef = useRef(null);
+    const [props, ref] = useContextProps(textAreaProps, textAreaRef, TextAreaContext);
+    const initialHeight = useRef(null);
+    const updateHeight = useCallback(() => {
+        if (!ref.current)
+            return;
+        if (!autoGrow)
+            return ref.current?.style.removeProperty('height');
+        ref.current.style.height = `${initialHeight.current}px`;
+        if (ref.current.scrollHeight > (initialHeight.current || 0)) {
+            ref.current.style.height = ref.current.scrollHeight + 'px';
+        }
+    }, [autoGrow, ref]);
+    useEffect(() => {
+        initialHeight.current = null;
+        ref.current?.style.removeProperty('height');
+    }, [ref, size]);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        if (initialHeight.current === null) {
+            const styleHeight = getComputedStyle(ref.current).height.match(/\d+/)?.[0];
+            initialHeight.current = styleHeight ? parseFloat(styleHeight) : null;
+        }
+        updateHeight();
+    }, [ref, autoGrow, updateHeight, size]);
+    return (jsx("div", { className: styles$2['input-container'], children: jsx(TextArea$1, { ...textAreaProps, ref: node => {
+                ref.current =
+                    node;
+                textAreaRef.current = node;
+            }, onInput: e => {
+                updateHeight();
+                props.onInput?.(e);
+            } }) }));
+});
+TextArea.displayName = 'TextArea';
+
+var styles$1 = {"field":"text-field-module-JeaK0"};
+
+/**
+ * This component is used to create a text field.
+ * It can be used as a single line input or as a textarea.
+ * This field can also grow when a user types in text.
+ */
+function TextField({ autoFocus, autoGrow, defaultValue, isDisabled, isInvalid, isMultiline, isReadOnly, isRequired, label, maxLength, onChange, onInput, onKeyUp, placeholder, rows, showLabel = true, size = 'lg', value, }) {
+    return (jsxs(TextField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$1.field, styles$1[size]), defaultValue: defaultValue, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxLength: maxLength, onChange: value => {
+            onChange?.(value);
+        }, onInput: onInput, onKeyUp: e => onKeyUp?.(e), value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), isMultiline ? (jsx(TextArea, { autoGrow: autoGrow, placeholder: placeholder, rows: rows, size: size })) : (jsx(Input, { autoGrow: autoGrow, placeholder: placeholder, size: size })), jsx(FieldError, {})] }));
 }
 
 function CartOutlinedIcon(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: "M7.896 16.666a2.603 2.603 0 1 1 0 5.207 2.603 2.603 0 0 1 0-5.207zm8.925 0a2.603 2.603 0 1 1 0 5.207 2.603 2.603 0 0 1 0-5.207zM7.896 18.1c-.645 0-1.17.524-1.17 1.169s.525 1.17 1.17 1.17a1.171 1.171 0 0 0 0-2.34zm8.925 0c-.645 0-1.17.524-1.17 1.169s.525 1.17 1.17 1.17a1.171 1.171 0 0 0 0-2.34zM4.589 3c.016 0 .032.004.048.005a.714.714 0 0 1 .146.025l.05.016a.7.7 0 0 1 .083.037l.04.021a.712.712 0 0 1 .076.053l.035.03a.699.699 0 0 1 .168.223.703.703 0 0 1 .061.209c.002.014.007.027.008.042l.207 2.646h15.776c.027.001.05.006.073.008.026.003.052.004.077.01.022.004.036.011.05.016.03.008.058.016.085.028.02.009.037.02.056.03.022.012.044.024.065.038.019.013.035.029.053.044.017.015.036.029.052.046.015.016.028.034.042.051.015.019.03.037.044.057.011.018.02.038.03.057.012.021.024.042.033.065.009.022.014.044.021.067.006.022.014.043.018.066.006.027.007.054.009.081.001.018.005.035.005.053-.001.031-.005.054-.008.077-.003.026-.004.052-.01.077l-1.39 6.054-.004.017a.698.698 0 0 1-.033.1l-.008.024a.716.716 0 0 1-.06.11l-.024.03a.707.707 0 0 1-.057.07l-.035.033a.695.695 0 0 1-.175.117l-.048.022a.723.723 0 0 1-.083.026c-.014.003-.027.008-.041.01a.707.707 0 0 1-.134.014H6.096l.112 1.427H19.41a.717.717 0 0 1 0 1.434H5.544a.714.714 0 0 1-.14-.015c-.015-.003-.03-.008-.044-.012-.03-.008-.06-.016-.087-.027-.018-.008-.034-.017-.05-.026-.024-.012-.048-.023-.07-.037-.016-.011-.03-.024-.046-.036-.02-.016-.04-.03-.058-.048-.015-.014-.027-.03-.04-.044-.017-.02-.033-.038-.048-.058-.012-.017-.021-.034-.032-.052a.678.678 0 0 1-.035-.065c-.009-.02-.016-.04-.023-.06a.715.715 0 0 1-.033-.136l-.008-.045-.904-11.571H2.717a.717.717 0 1 1 0-1.434zm15.794 4.741H5.623l.361 4.63h13.334l1.065-4.63z", fill: "currentColor", fillRule: "evenodd" }) }));
 }
 
-var styles = {"checkbox":"checkbox-module-y3eBg","box":"checkbox-module-TqLux","checkmark":"checkbox-module-Yhrdp","focus":"checkbox-module-zoTSP","active":"checkbox-module-sHmzp"};
+function DehashedOutlinedIcon(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: "m4.934 4.19 15.069 14.705c.259.253.259.663 0 .915a.67.67 0 0 1-.47.19.67.67 0 0 1-.468-.19L3.995 5.105a.636.636 0 0 1 0-.915.675.675 0 0 1 .939 0zm.012 3.604a.637.637 0 0 1-.022.916C3.88 9.682 3.327 10.82 3.327 12c0 3.152 3.88 5.717 8.65 5.717.834 0 1.664-.081 2.469-.242.36-.071.71.155.783.505a.648.648 0 0 1-.517.764c-.892.177-1.812.268-2.735.268C6.476 19.012 2 15.866 2 11.999c0-1.541.695-3.003 2.008-4.226a.675.675 0 0 1 .938.021zm7.077-2.807c5.501 0 9.977 3.146 9.977 7.012 0 1.542-.695 3.003-2.008 4.227a.67.67 0 0 1-.458.179.67.67 0 0 1-.48-.2.636.636 0 0 1 .022-.916c1.045-.973 1.597-2.11 1.597-3.29 0-3.153-3.88-5.717-8.65-5.717-.834 0-1.665.08-2.469.241a.662.662 0 0 1-.783-.504.648.648 0 0 1 .517-.764 14.019 14.019 0 0 1 2.735-.268zm-4.382 6.14c.047-.225.337-.305.504-.142l4.894 4.776a.29.29 0 0 1-.146.492 4.56 4.56 0 0 1-1.522.046c-1.946-.266-3.503-1.785-3.777-3.685a4.243 4.243 0 0 1 .047-1.486zm3.462-3.381a4.564 4.564 0 0 1 1.524-.047c1.949.266 3.507 1.787 3.78 3.688a4.244 4.244 0 0 1-.048 1.488c-.048.225-.338.305-.505.142l-4.897-4.78a.29.29 0 0 1 .146-.491z", fill: "currentColor", fillRule: "evenodd" }) }));
+}
 
-function Checkbox({ _pseudo = 'none', children, className, isDisabled, isSelected, onChange, value, }) {
-    return (jsxs(Checkbox$1, { className: clsx(className, styles.checkbox, styles[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles.box, children: jsx("svg", { "aria-hidden": "true", className: styles.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
+function HashedOutlinedIcon(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 7.666C9.54 7.666 7.538 9.61 7.538 12c0 2.39 2.001 4.334 4.462 4.334 2.46 0 4.462-1.944 4.462-4.334 0-2.39-2.001-4.334-4.462-4.334M12 5c5.514 0 10 3.14 10 7s-4.486 7-10 7-10-3.14-10-7 4.486-7 10-7zm0 1.292c-2.39 0-4.624.642-6.29 1.809C4.175 9.175 3.33 10.56 3.33 12s.845 2.825 2.38 3.9c1.666 1.166 3.9 1.808 6.29 1.808s4.624-.642 6.29-1.809c1.535-1.074 2.38-2.459 2.38-3.9 0-1.44-.845-2.824-2.38-3.898-1.666-1.167-3.9-1.81-6.29-1.81zm0 3.958c.994 0 1.802.785 1.802 1.75s-.808 1.75-1.802 1.75-1.802-.785-1.802-1.75.808-1.75 1.802-1.75z", fill: "currentColor", fillRule: "evenodd" }) }));
+}
+
+var styles = {"product-grid":"product-overview-grid-module-bzys-","grid-item":"product-overview-grid-module-MlUVA"};
+
+function ProductOverviewGrid({ children }) {
+    return (jsx("div", { className: styles['product-grid'], children: Children.map(children, (child, index) => (jsx("div", { className: styles['grid-item'], children: child }, index))) }));
 }
 
 function Filter({ children, title }) {
@@ -90,7 +310,7 @@ function ColorFilter({ onChange, options, value }) {
 }
 
 function ProductListing({ activeFilters, filters, isLoading = false, onFilterChange, onSortChange, productCard: ProductCard, products, }) {
-    return (jsxs("div", { children: [jsx("h1", { children: "Product listing" }), jsxs("aside", { children: [jsx("h2", { children: "Filter" }), jsx("div", { children: jsx(ColorFilter, { onChange: colors => onFilterChange({ colors }), options: filters.color.options, value: activeFilters.colors }) })] }), jsx("main", { children: jsxs("select", { onChange: e => onSortChange({ by: e.target.value, direction: 'asc' }), children: [jsx("option", { value: "", children: "Sort By" }), jsx("option", { value: "price", children: "Price" }), jsx("option", { value: "title", children: "Title" })] }) }), isLoading ? (jsx("p", { children: "Loading..." })) : (jsx("ul", { children: products.map(product => (jsx("li", { children: jsx(ProductCard, { product: product }) }, product.id))) }))] }));
+    return (jsxs("div", { children: [jsx("h1", { children: "Product listing" }), jsxs("aside", { children: [jsx("h2", { children: "Filter" }), jsx("div", { children: jsx(ColorFilter, { onChange: colors => onFilterChange({ colors }), options: filters.color.options, value: activeFilters.colors }) })] }), jsx("main", { children: jsxs("select", { onChange: e => onSortChange({ by: e.target.value, direction: 'asc' }), children: [jsx("option", { value: "", children: "Sort By" }), jsx("option", { value: "price", children: "Price" }), jsx("option", { value: "title", children: "Title" })] }) }), isLoading ? (jsx("p", { children: "Loading..." })) : (jsx("ul", { children: products.map(product => (jsx("li", { children: jsx(ProductCard, {}) }, product.id))) }))] }));
 }
 
 function createProductListingSearchParams(state) {
@@ -112,4 +332,4 @@ function parseProductListingSearchParams(params) {
     };
 }
 
-export { Button, CartFilledIcon, CartOutlinedIcon, Checkbox, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, IconButton, ProductCard, ProductListing, ProductPrice, ProductSku, RightArrowFilledIcon, createProductListingSearchParams, parseProductListingSearchParams };
+export { AddToCartButton, Button, CartFilledIcon, CartOutlinedIcon, Checkbox, DehashedOutlinedIcon, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, HashedOutlinedIcon, IconButton, Image, NumberField, ProductCard, ProductListing, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, TextField, createProductListingSearchParams, parseProductListingSearchParams };