@sonic-equipment/ui 0.0.17 → 0.0.19

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

@@ -11,7 +11,7 @@ declare const meta: {
             src: string;
             title: string;
         };
-        onClick: import("@vitest/spy").Mock<[event: import("react").MouseEvent<HTMLDivElement, MouseEvent>], void>;
+        onClick: import("@vitest/spy").Mock<[event: React.MouseEvent<HTMLDivElement, MouseEvent>], void>;
         sku: string;
         tag: "new";
     };

package/dist/collapsables/accordion/accordion-item.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface AccordionItemProps {
+    _pseudo?: 'none' | 'focus' | 'hover' | 'active';
+    children: ReactNode;
+    id: string;
+    isDisabled?: boolean;
+    isOpen?: boolean;
+    size?: 'md' | 'lg';
+    title: string;
+}
+export declare function AccordionItem({ _pseudo, children, id, isDisabled, isOpen: isOpenProp, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/accordion/accordion.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { AccordionItemProps } from './accordion-item';
+interface AccordionProps {
+    children?: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[];
+    color?: 'white' | 'black';
+    hasLineSeparator?: boolean;
+    size?: 'md' | 'lg';
+}
+export declare function Accordion({ children, color, hasLineSeparator, size, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/collapsables/accordion/accordion.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+import { Accordion } from './accordion';
+declare const meta: {
+    component: typeof Accordion;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const Focus: Story;
+export declare const Active: Story;
+export declare const Large: Story;

package/dist/forms/color-checkbox/color-checkbox.d.ts

@@ -0,0 +1,5 @@
+import { CheckboxProps } from 'forms/checkbox/checkbox';
+export interface ColorCheckboxProps extends CheckboxProps {
+    color: string;
+}
+export declare function ColorCheckbox({ _pseudo, children, className, color, isDisabled, isSelected, onChange, value, }: ColorCheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/color-checkbox/color-checkbox.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+import { ColorCheckbox } from './color-checkbox';
+declare const meta: {
+    args: {
+        onChange: import("@vitest/spy").Mock<[isSelected: boolean], void>;
+    };
+    component: typeof ColorCheckbox;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof ColorCheckbox>;
+export declare const Checked: Story;
+export declare const Unchecked: Story;
+export declare const CheckedFocus: Story;

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

@@ -12,7 +12,7 @@ declare const meta: {
     args: {
         size: "lg";
     };
-    component: import("react").FC<import("./input").InputProps>;
+    component: React.FC<import("./input").InputProps>;
     parameters: {
         layout: string;
     };

package/dist/forms/select/select.d.ts

@@ -0,0 +1,9 @@
+export interface SelectProps {
+    disabled?: boolean;
+    label: string;
+    onChange: (value: string) => void;
+    options: Record<string, string>;
+    selectedOption?: string;
+    showLabel?: boolean;
+}
+export declare const Select: ({ disabled, label, onChange, options, selectedOption, showLabel, }: SelectProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react';
+import { Select } from './select';
+declare const meta: {
+    args: {
+        onChange: import("@vitest/spy").Mock<[value: string], void>;
+    };
+    component: ({ disabled, label, onChange, options, selectedOption, showLabel, }: import("./select").SelectProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const WithLabel: Story;
+export declare const WithoutLabel: Story;
+export declare const DefaultSelected: Story;
+export declare const Disabled: Story;

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

@@ -2,7 +2,7 @@
 import type { StoryObj } from '@storybook/react';
 import { TextArea } from './textarea';
 declare const meta: {
-    component: import("react").FC<import("./textarea").TextAreaProps>;
+    component: React.FC<import("./textarea").TextAreaProps>;
     parameters: {
         layout: string;
     };

package/dist/icons/arrows/chrevron-down-bold.d.ts

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

package/dist/icons/arrows/chrevron-down-slim.d.ts

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

package/dist/icons/arrows/right-arrow-filled-icon.d.ts

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

package/dist/icons/checkmark/checkmark-filled-icon.d.ts

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

package/dist/index.d.ts

@@ -82,6 +82,24 @@ interface ProductCardProps {
 }
 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 AccordionItemProps {
+    _pseudo?: 'none' | 'focus' | 'hover' | 'active';
+    children: ReactNode;
+    id: string;
+    isDisabled?: boolean;
+    isOpen?: boolean;
+    size?: 'md' | 'lg';
+    title: string;
+}
+
+interface AccordionProps {
+    children?: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[];
+    color?: 'white' | 'black';
+    hasLineSeparator?: boolean;
+    size?: 'md' | 'lg';
+}
+declare function Accordion({ children, color, hasLineSeparator, size, }: AccordionProps): react_jsx_runtime.JSX.Element;
+
 interface ProductPriceProps {
     className?: string;
     current: number;
@@ -95,7 +113,7 @@ interface ProductSkuProps {
 }
 declare function ProductSku({ sku }: ProductSkuProps): react_jsx_runtime.JSX.Element;
 
-interface CheckboxProps {
+interface CheckboxProps$1 {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
     children: ReactNode;
     className?: string;
@@ -104,7 +122,22 @@ interface CheckboxProps {
     onChange?: (isSelected: boolean) => void;
     value?: string;
 }
-declare function Checkbox({ _pseudo, children, className, isDisabled, isSelected, onChange, value, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare function Checkbox({ _pseudo, children, className, isDisabled, isSelected, onChange, value, }: CheckboxProps$1): 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
+}
+
+interface ColorCheckboxProps extends CheckboxProps {
+    color: string;
+}
+declare function ColorCheckbox({ _pseudo, children, className, color, isDisabled, isSelected, onChange, value, }: ColorCheckboxProps): react_jsx_runtime.JSX.Element;
 
 type NumberFieldSize = 'md' | 'lg';
 interface NumberFieldProps {
@@ -136,6 +169,16 @@ interface NumberFieldProps {
  */
 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 SelectProps {
+    disabled?: boolean;
+    label: string;
+    onChange: (value: string) => void;
+    options: Record<string, string>;
+    selectedOption?: string;
+    showLabel?: boolean;
+}
+declare const Select: ({ disabled, label, onChange, options, selectedOption, showLabel, }: SelectProps) => react_jsx_runtime.JSX.Element;
+
 interface TextFieldProps {
     autoFocus?: boolean;
     autoGrow?: boolean;
@@ -177,6 +220,29 @@ declare function FavoriteOutlinedIcon(props: React.SVGProps<SVGSVGElement>): rea
 
 declare function HashedOutlinedIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
+interface Translations {
+    'Excl. VAT': string;
+    'Incl. VAT': string;
+}
+type TranslationId = keyof Translations;
+
+interface FormattedMessageProps {
+    id: TranslationId;
+    replacementValues?: Record<string, string>;
+}
+declare const FormattedMessage: ComponentType<FormattedMessageProps>;
+
+type FormatMessageFunction = (id: string, ...replacementValues: readonly string[]) => string;
+
+interface IntlProviderProps {
+    children: React.ReactNode;
+    formatMessage: FormatMessageFunction;
+}
+declare function IntlProvider({ children, formatMessage }: IntlProviderProps): react_jsx_runtime.JSX.Element;
+
+type FormattedMessageFunction = (key: TranslationId, replacementValues?: Record<string, string>) => string;
+declare const useFormattedMessage: () => FormattedMessageFunction;
+
 interface ProductOverviewGridProps {
     children?: ReactNode;
 }
@@ -257,4 +323,4 @@ declare function parseProductListingSearchParams(params: URLSearchParams): {
     };
 };
 
-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 };
+export { Accordion, type ActiveFilters, AddToCartButton, Button, type ButtonProps, CartFilledIcon, CartOutlinedIcon, Checkbox, type CheckboxProps$1 as CheckboxProps, ColorCheckbox, type ColorCheckboxProps, DehashedOutlinedIcon, FavoriteButton, type FavoriteButtonProps, FavoriteFilledIcon, FavoriteOutlinedIcon, type Filters, FormattedMessage, type FormattedMessageFunction, type FormattedMessageProps, HashedOutlinedIcon, IconButton, type IconButtonProps, Image, type ImageProps, IntlProvider, NumberField, type NumberFieldSize, ProductCard, type ProductCardProps, ProductListing, type ProductListingProps, ProductOverviewGrid, type ProductOverviewGridProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, RightArrowFilledIcon, Select, type SelectProps, type Sort, TextField, createProductListingSearchParams, parseProductListingSearchParams, useFormattedMessage };

package/dist/index.js

@@ -1,27 +1,27 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-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 { forwardRef, useState, useEffect, createContext, useContext, Children, cloneElement, useRef, useCallback } 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, Select as Select$1, SelectValue, Popover, ListBox, ListBoxItem, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1 } from 'react-aria-components';
 import clsx from 'clsx';
 
 function RightArrowFilledIcon(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$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"};
+var styles$i = {"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', 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$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'] }))] })) }));
+    return (jsx(Button$1, { className: clsx(className, styles$i.button, styles$i[variant], styles$i[size], styles$i[color], { [styles$i.condensed]: condensed }, { [styles$i.icon]: icon }, styles$i[_pseudo]), isDisabled: isDisabled, onPress: onPress, type: type, children: icon ? (icon) : (jsxs(Fragment, { children: [children, withArrow && (jsx(RightArrowFilledIcon, { className: styles$i['right-arrow-icon'] }))] })) }));
 }
 
-var styles$f = {"field-error":"field-error-module-FXnIg"};
+var styles$h = {"field-error":"field-error-module-FXnIg"};
 
 function FieldError({ children }) {
-    return (jsx(FieldError$1, { className: styles$f['field-error'], children: children }));
+    return (jsx(FieldError$1, { className: styles$h['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"};
+var styles$g = {"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.
@@ -36,33 +36,33 @@ const Input = forwardRef(({ _pseudo = 'none', autoGrow, size = 'lg', ...inputPro
     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 })] }) }));
+    return (jsx("div", { className: clsx(styles$g['input-container'], styles$g[size], styles$g[_pseudo]), children: jsxs("div", { className: clsx({ [styles$g['growing-input']]: autoGrow }), children: [jsx(Input$1, { size: autoGrow ? 1 : undefined, ...props, ref: ref, onChange: handleChange }), autoGrow && jsx("span", { className: styles$g['shadow-input'], children: value })] }) }));
 });
 Input.displayName = 'Input';
 
-var styles$d = {"label":"label-module-LGfJt","required":"label-module-oTWaS"};
+var styles$f = {"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: "*" })] }));
+    return (jsxs(Label$1, { className: styles$f.label, children: [children, isRequired && jsx("span", { className: styles$f.required, children: "*" })] }));
 }
 
-var styles$c = {"field":"number-field-module-gmnog","button-input-container":"number-field-module-8Lvgh"};
+var styles$e = {"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, {})] }));
+    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles$e.field, styles$e[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$e['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"};
+var styles$d = {"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);
@@ -124,17 +124,17 @@ function ManualInputState({ onCancel, onConfirm, quantity, }) {
         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: {
+    return (jsxs("div", { className: styles$d['manual-input-container'], children: [jsx("div", { className: styles$d['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"};
+var styles$c = {"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$a['icon-button'], styles$a[size], styles$a[color], className), onPress: onPress, children: children }));
+    return (jsx(Button$1, { className: clsx(styles$c['icon-button'], styles$c[size], styles$c[color], className), onPress: onPress, children: children }));
 }
 
 function FavoriteFilledIcon(props) {
@@ -145,23 +145,46 @@ 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$9 = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q"};
+var styles$b = {"favorite-button":"favorite-button-module-tXSS3","is-favorite":"favorite-button-module-l557q"};
 
 function FavoriteButton({ isFavorite, onPress }) {
-    return (jsx(IconButton, { className: clsx(styles$9['favorite-button'], {
-            [styles$9['is-favorite']]: isFavorite,
+    return (jsx(IconButton, { className: clsx(styles$b['favorite-button'], {
+            [styles$b['is-favorite']]: isFavorite,
         }), color: "secondary", onPress: onPress, children: isFavorite ? jsx(FavoriteFilledIcon, {}) : jsx(FavoriteOutlinedIcon, {}) }));
 }
 
-var styles$8 = {"tag":"tag-module-B7r15","body":"tag-module-4cfCf","shape":"tag-module-c7CRb"};
+var styles$a = {"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" }) })] }));
+    return (jsxs("div", { className: styles$a.tag, children: [jsx("div", { className: styles$a.body, children: children }), jsx("svg", { className: styles$a.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$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 IntlContext = createContext({
+    formatMessage: text => text,
+});
+
+const useFormattedMessage = () => {
+    const { formatMessage } = useContext(IntlContext);
+    return (id, replacementValues) => formatMessage(id, 
+    /* The following code converts replacementValues from an object to an array.
+     * This is to keep the external API compatible with react-intls version
+     * and internally compatible with the Spire implementation of translate. */
+    ...(replacementValues
+        ? Object.keys(replacementValues)
+            .map(parseFloat)
+            .filter(index => !Number.isNaN(index))
+            .reduce((acc, index) => {
+            acc[index] = replacementValues[index];
+            return acc;
+        }, [])
+        : []));
+};
+
+const FormattedMessage = ({ id, replacementValues, }) => useFormattedMessage()(id, replacementValues);
+
+var styles$9 = {"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,
@@ -173,16 +196,16 @@ function ProductPrice({ className, current, includeVat, original, }) {
     const originalPriceCurrency = original ? formatPrice(original) : null;
     const currentPriceCurrency = formatPrice(current);
     const [wholes, decimals] = currentPriceCurrency.split('.');
-    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' })] })] }));
+    return (jsxs("div", { className: clsx(className, styles$9['product-price']), children: [!!original && (jsx("span", { className: styles$9['original-price'], children: originalPriceCurrency })), jsxs("div", { className: styles$9['current-price-wrapper'], children: [jsxs("div", { className: styles$9['current-price'], children: [jsx("span", { className: styles$9.wholes, children: wholes }), jsx("span", { className: styles$9.dot, children: "." }), jsx("span", { className: styles$9.decimals, children: decimals })] }), jsx("span", { className: styles$9.vat, children: includeVat ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
 }
 
-var styles$6 = {"product-sku":"product-sku-module-ITb8x"};
+var styles$8 = {"product-sku":"product-sku-module-ITb8x"};
 
 function ProductSku({ sku }) {
-    return jsx("p", { className: styles$6['product-sku'], children: sku });
+    return jsx("p", { className: styles$8['product-sku'], children: sku });
 }
 
-var styles$5 = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe"};
+var styles$7 = {"image":"image-module-lg7Kj","contain":"image-module-KFEgG","cover":"image-module-tVKFe"};
 
 const breakpointToWidth = {
     lg: 1440,
@@ -207,21 +230,62 @@ function Image({ alt, className, fallbackSrc = '/images/fallback.svg', fit = 'co
     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 }));
+    return (jsx("img", { alt: alt, className: clsx(styles$7.image, styles$7[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"};
+var styles$6 = {"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 })] })] })] }));
+    return (jsxs("div", { className: styles$6['product-card'], onClick: onClick, children: [jsx("div", { className: styles$6.image, children: jsx(Image, { alt: alt, fit: fit, src: src, title: imageTitle }) }), jsx("div", { className: styles$6['favorite-button'], children: FavoriteButton && FavoriteButton }), jsxs("div", { className: styles$6.content, children: [jsxs("div", { className: styles$6.top, children: [jsx("div", { className: styles$6.tag, children: tag && jsx(Tag, { children: tag }) }), jsx("h2", { className: styles$6.title, children: title }), jsx(ProductSku, { sku: sku })] }), jsxs("div", { className: styles$6.bottom, children: [jsx("div", { className: styles$6.price, children: jsx(ProductPrice, { current: price.current, includeVat: price.includeVat, original: price.original }) }), jsx("div", { className: styles$6['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"};
+var styles$5 = {"accordion":"accordion-module-9WvAH","white":"accordion-module-CaVdG","accordion-item":"accordion-module-lf9d-","lg":"accordion-module-0qnae","with-seperators":"accordion-module-yOLrW","button":"accordion-module--Rwpb","icon":"accordion-module-Y50uq","focus":"accordion-module-M4BZs","panel":"accordion-module-KZjMo","content":"accordion-module-ejMH3","is-open":"accordion-module-W0F1z"};
+
+function Accordion({ children, color = 'black', hasLineSeparator = true, size = 'md', }) {
+    return (jsx("div", { className: clsx(styles$5.accordion, styles$5[color], styles$5[size], hasLineSeparator && styles$5['with-seperators']), children: children &&
+            Children.map(children, child => {
+                return cloneElement(child, { size });
+            }) }));
+}
+
+var styles$4 = {"checkbox":"checkbox-module-YNVdd","box":"checkbox-module-UKoyf","checkmark":"checkbox-module-pHIwh","focus":"checkbox-module-v23jy","active":"checkbox-module-7UG-b","color-checkbox":"checkbox-module-nEhvW"};
 
 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] }));
+    return (jsxs(Checkbox$1, { className: clsx(className, styles$4.checkbox, styles$4[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, value: value, children: [jsx("div", { className: styles$4.box, children: jsx("svg", { "aria-hidden": "true", className: styles$4.checkmark, viewBox: "0 0 18 18", children: jsx("polyline", { points: "1 9 7 14 15 4" }) }) }), children] }));
+}
+
+function ColorCheckbox({ _pseudo = 'none', children, className, color, isDisabled, isSelected, onChange, value, }) {
+    return (jsxs(Checkbox$1, { className: clsx(className, styles$4.checkbox, styles$4['color-checkbox'], styles$4[_pseudo]), isDisabled: isDisabled, isSelected: isSelected, onChange: onChange, style: {
+            '--selected-color': color,
+        }, value: value, children: [jsx("div", { className: styles$4.box }), children] }));
 }
 
+function ChevronDownSlim(props) {
+    return (jsx("svg", { viewBox: "0 0 16 17", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "m8 12.648-6.667-6.7a3.11 3.11 0 0 1 .466-.75c.202-.245.444-.477.726-.698l5.459 5.546L13.328 4.5c.288.226.543.459.764.699.222.24.413.489.575.75L8 12.648z", fill: "currentColor", fillRule: "evenodd" }) }));
+}
+
+function CheckmarkFilledIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "M10.864 17c-.2 0-.378-.045-.534-.135a1.588 1.588 0 0 1-.446-.407L6.278 12.22c-.185-.233-.278-.474-.278-.722 0-.264.087-.488.262-.672a.86.86 0 0 1 .651-.276c.156 0 .299.033.429.101s.258.188.384.361l3.094 3.71 5.42-8.19c.216-.354.483-.531.802-.531.245 0 .466.08.663.243A.785.785 0 0 1 18 6.88c0 .12-.028.243-.084.367a2.53 2.53 0 0 1-.194.356l-5.934 8.844c-.23.369-.538.553-.924.553z", fill: "currentColor", fillRule: "evenodd" }) }));
+}
+
+var styles$3 = {"select":"select-module-ui-Wc","button":"select-module-aMQIQ","chevron":"select-module-00uRU","focus":"select-module-XMc0P","popover":"select-module-z8cWq","listbox":"select-module-S21ba","item":"select-module-LgEJO","check":"select-module-lQFw3"};
+
+const Select = ({ disabled = false, label, onChange, options, selectedOption, showLabel = true, }) => {
+    const selectRef = useRef(null);
+    useEffect(() => {
+        const updateWidth = () => {
+            if (!selectRef.current)
+                return;
+            const width = selectRef.current.getBoundingClientRect().width;
+            selectRef.current.style.setProperty('--trigger-width', `${width}px`);
+        };
+        updateWidth();
+        window.addEventListener('resize', updateWidth);
+        return () => window.removeEventListener('resize', updateWidth);
+    }, []);
+    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: styles$3.select, isDisabled: disabled, onSelectionChange: selected => onChange(String(selected)), selectedKey: selectedOption, children: [showLabel && jsx(Label, { children: label }), jsxs(Button$1, { className: styles$3.button, children: [jsx(SelectValue, {}), jsx(ChevronDownSlim, { "aria-hidden": "true", className: styles$3.chevron })] }), jsx(Popover, { className: styles$3.popover, placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles$3.listbox, children: Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles$3.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(CheckmarkFilledIcon, { className: styles$3.check }) })), jsx("span", { slot: "label", children: value })] }, key))) }) })] }));
+};
+
 var styles$2 = {"input-container":"textarea-module-C6Xr1","lg":"textarea-module-vksG-","md":"textarea-module-6JrQJ"};
 
 /**
@@ -293,6 +357,10 @@ 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" }) }));
 }
 
+function IntlProvider({ children, formatMessage }) {
+    return (jsx(IntlContext.Provider, { value: { formatMessage }, children: children }));
+}
+
 var styles = {"product-grid":"product-overview-grid-module-bzys-","grid-item":"product-overview-grid-module-MlUVA"};
 
 function ProductOverviewGrid({ children }) {
@@ -332,4 +400,4 @@ function parseProductListingSearchParams(params) {
     };
 }
 
-export { AddToCartButton, Button, CartFilledIcon, CartOutlinedIcon, Checkbox, DehashedOutlinedIcon, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, HashedOutlinedIcon, IconButton, Image, NumberField, ProductCard, ProductListing, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, TextField, createProductListingSearchParams, parseProductListingSearchParams };
+export { Accordion, AddToCartButton, Button, CartFilledIcon, CartOutlinedIcon, Checkbox, ColorCheckbox, DehashedOutlinedIcon, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, FormattedMessage, HashedOutlinedIcon, IconButton, Image, IntlProvider, NumberField, ProductCard, ProductListing, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, Select, TextField, createProductListingSearchParams, parseProductListingSearchParams, useFormattedMessage };

package/dist/intl/formatted-message.d.ts

@@ -0,0 +1,7 @@
+import { ComponentType } from 'react';
+import { TranslationId } from './translation-id';
+export interface FormattedMessageProps {
+    id: TranslationId;
+    replacementValues?: Record<string, string>;
+}
+export declare const FormattedMessage: ComponentType<FormattedMessageProps>;

package/dist/intl/formatted-message.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormattedMessageProps } from './formatted-message';
+declare const translations: {
+    readonly 'Excl. VAT': "Excl. VAT";
+    readonly 'Incl. VAT': "Incl. VAT";
+    readonly 'Replacement Value Test': "Replacement Test: Value1=${1}, Value0=${0}, Value1=${1}, Value0=${0}";
+};
+type Translations = typeof translations;
+type Props = Omit<FormattedMessageProps, 'id'> & {
+    id: keyof Translations;
+};
+declare const meta: Meta<Props>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SimpleFormattedMessage: Story;
+export declare const FormattedMessageWithReplacementValue: Story;

package/dist/intl/intl-context.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FormatMessageFunction } from './types';
+interface IntlContextType {
+    formatMessage: FormatMessageFunction;
+}
+export declare const IntlContext: React.Context<IntlContextType>;
+export {};

package/dist/intl/intl-provider.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FormatMessageFunction } from './types';
+interface IntlProviderProps {
+    children: React.ReactNode;
+    formatMessage: FormatMessageFunction;
+}
+export declare function IntlProvider({ children, formatMessage }: IntlProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+export interface Translations {
+    'Excl. VAT': string;
+    'Incl. VAT': string;
+}
+export type TranslationId = keyof Translations;

package/dist/intl/types.d.ts

@@ -0,0 +1 @@
+export type FormatMessageFunction = (id: string, ...replacementValues: readonly string[]) => string;

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

@@ -0,0 +1,3 @@
+import { TranslationId } from './translation-id';
+export type FormattedMessageFunction = (key: TranslationId, replacementValues?: Record<string, string>) => string;
+export declare const useFormattedMessage: () => FormattedMessageFunction;

package/dist/styles.css

@@ -206,9 +206,13 @@
   --border-width-3: 4px;
 }
 :root {
+  /* Outlines */
   --shadow-focus-outline: 0 0 1px 2px rgb(227 6 19 / 40%);
   --shadow-focus-outline-padded: 0 0 1px 4px rgb(227 6 19 / 40%);
-  --box-shadow: 0 0 96px 0 rgb(0 0 0 / 30%);
+
+  /* Box shadows */
+  --box-shadow-96: 0 0 96px 0 rgb(0 0 0 / 30%);
+  --box-shadow-8: 0 0 8px 0 rgb(0 0 0 / 30%);
 }
 
 .button-module-V4meK {
@@ -555,6 +559,7 @@
 
   display: flex;
   flex-direction: column;
+  line-height: 1;
 }
 
   .product-price-module-oIU1K .product-price-module-til0s {
@@ -580,13 +585,8 @@
     font-size: var(--font-size-36);
     font-style: var(--current-price-font-style);
     font-weight: var(--font-weight-black);
-    line-height: 1;
   }
 
-  .product-price-module-oIU1K .product-price-module-pvy2w > * {
-      line-height: 1;
-    }
-
   .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-GCw07,
     .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-N56iV {
       font-size: var(--font-size-wholes);
@@ -681,6 +681,7 @@
       margin-bottom: var(--space-8);
       -webkit-box-orient: vertical;
       font-size: var(--title-font-size);
+      font-weight: var(--font-weight-bold);
       -webkit-line-clamp: 4;
       line-height: 1;
       text-wrap: balance;
@@ -694,9 +695,11 @@
   }
 
   .product-card-module-pLaiB .product-card-module-p-zoi {
+    display: grid;
     width: var(--image-width);
     aspect-ratio: 1 / 1;
     margin-inline: auto;
+    place-items: center;
   }
 
   .product-card-module-pLaiB .product-card-module-p-zoi img {
@@ -718,7 +721,7 @@
 
 @media (hover: hover) {
     .product-card-module-pLaiB:hover {
-      box-shadow: var(--box-shadow);
+      box-shadow: var(--box-shadow-96);
       scale: 1.04;
     }
 }
@@ -753,6 +756,112 @@
   }
 }
 
+.accordion-module-9WvAH {
+  --color: var(--color-black);
+  --button-font-size: var(--font-size-16);
+  --seperator-color: transparent;
+}
+
+  .accordion-module-9WvAH.accordion-module-CaVdG {
+    --color: var(--color-white);
+  }
+
+  .accordion-module-9WvAH.accordion-module-CaVdG .accordion-module-lf9d- button[aria-expanded='true'] {
+      background-color: initial;
+    }
+
+  .accordion-module-9WvAH.accordion-module-0qnae {
+    --button-font-size: var(--font-size-20);
+  }
+
+  .accordion-module-9WvAH.accordion-module-yOLrW {
+    --seperator-color: var(--color-gray-500);
+  }
+
+  .accordion-module-9WvAH.accordion-module-yOLrW.accordion-module-CaVdG {
+      --seperator-color: var(--color-white);
+    }
+
+.accordion-module-lf9d- {
+  --padding: var(--space-16);
+  --transition-duration: 0.2s;
+
+  border-bottom: 1px solid var(--seperator-color);
+}
+
+.accordion-module-lf9d- h3 {
+    margin: 0;
+  }
+
+.accordion-module-lf9d- .accordion-module--Rwpb {
+    position: relative;
+    display: block;
+    width: 100%;
+    padding: var(--padding);
+    padding-right: calc(var(--padding) * 2);
+    border: none;
+    background: none;
+    color: var(--color);
+    cursor: pointer;
+    font: inherit;
+    font-size: var(--button-font-size);
+    font-weight: var(--font-weight-bold);
+    line-height: 1;
+    text-align: left;
+  }
+
+.accordion-module-lf9d- .accordion-module--Rwpb .accordion-module-Y50uq svg {
+      position: absolute;
+      display: block;
+      width: 16px;
+      height: 16px;
+      inset: 0 12px 0 auto;
+      margin-block: auto;
+      transform: rotate(0deg);
+      transition: transform var(--transition-duration) ease;
+    }
+
+.accordion-module-lf9d- .accordion-module--Rwpb:focus-visible,
+    .accordion-module-lf9d- .accordion-module--Rwpb.accordion-module-M4BZs {
+      box-shadow: var(--shadow-focus-outline-padded);
+      outline: none;
+    }
+
+.accordion-module-lf9d- .accordion-module--Rwpb[aria-expanded='true'] {
+      background-color: var(--color-gray-100);
+    }
+
+.accordion-module-lf9d- .accordion-module--Rwpb[disabled] {
+      --color: var(--color-gray-100);
+    }
+
+.accordion-module-lf9d- .accordion-module-KZjMo {
+    display: grid;
+    grid-template-rows: 0fr;
+    padding-inline: var(--padding);
+    transition:
+      grid-template-rows var(--transition-duration) linear,
+      padding-block var(--transition-duration) linear;
+  }
+
+.accordion-module-lf9d- .accordion-module-KZjMo .accordion-module-ejMH3 {
+      overflow: hidden;
+      color: var(--color);
+    }
+
+.accordion-module-lf9d-.accordion-module-W0F1z .accordion-module-Y50uq svg {
+      transform: rotate(-180deg);
+    }
+
+.accordion-module-lf9d-.accordion-module-W0F1z .accordion-module-KZjMo {
+      grid-template-rows: 1fr;
+      padding-block: 0.5rem;
+    }
+
+.accordion-module-lf9d-:has(.accordion-module--Rwpb[disabled]) {
+    border-color: var(--color-gray-100);
+  }
+
 .checkbox-module-YNVdd {
   --selected-color: var(--color-brand-red);
   --selected-color-pressed: var(--color-brand-dark-red);
@@ -769,6 +878,7 @@
   box-sizing: border-box;
   align-items: center;
   color: var(--color-brand-black);
+  cursor: pointer;
   forced-color-adjust: none;
   gap: 4px;
 }
@@ -833,6 +943,114 @@
       stroke: none;
     }
 
+  /* stylelint-disable-next-line no-descending-specificity */
+
+  .checkbox-module-YNVdd.checkbox-module-nEhvW .checkbox-module-UKoyf {
+      border: none;
+      background: var(--selected-color);
+      background-size: 16px 16px;
+      transition: none;
+    }
+
+  .checkbox-module-YNVdd.checkbox-module-nEhvW[data-selected] .checkbox-module-UKoyf, .checkbox-module-YNVdd.checkbox-module-nEhvW[data-indeterminate] .checkbox-module-UKoyf {
+        border: 1px solid var(--color-brand-red);
+        background: unset;
+        background-image: linear-gradient(
+            var(--selected-color),
+            var(--selected-color)
+          ),
+          linear-gradient(var(--selected-color), var(--selected-color));
+        background-position:
+          2px 2px,
+          14px 14px;
+        background-repeat: no-repeat;
+        background-size: 10px 10px;
+      }
+
+.select-module-ui-Wc {
+  --trigger-width: initial;
+
+  all: unset;
+  position: relative;
+  display: grid;
+  width: 100%;
+  gap: var(--space-4);
+}
+
+.select-module-aMQIQ {
+  all: unset;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: var(--space-44);
+  box-sizing: border-box;
+  align-items: center;
+  padding: 10px 32px 10px 16px;
+  border: 1px solid var(--color-brand-medium-gray);
+  border-radius: var(--border-radius-8);
+  font: inherit;
+  gap: var(--space-16);
+  outline: none;
+}
+
+.select-module-aMQIQ .select-module-00uRU {
+    position: absolute;
+    display: block;
+    width: var(--space-12);
+    height: var(--space-12);
+    inset-block: 0;
+    inset-inline-end: 14px;
+    margin-block: auto;
+  }
+
+.select-module-aMQIQ [slot='description'] {
+    display: none;
+  }
+
+.select-module-aMQIQ.select-module-XMc0P,
+  .select-module-aMQIQ:focus,
+  .select-module-aMQIQ:has([data-focused]) {
+    border-color: transparent;
+    box-shadow: var(--shadow-focus-outline);
+    outline: none;
+  }
+
+.select-module-aMQIQ[disabled] {
+    border: 1px solid var(--color-brand-light-gray);
+  }
+
+.select-module-z8cWq {
+  width: var(--trigger-width);
+  background-color: var(--color-white);
+  box-shadow: var(--box-shadow-8);
+}
+
+.select-module-S21ba {
+  outline: none;
+}
+
+.select-module-LgEJO {
+  position: relative;
+  padding: var(--space-8) var(--space-24);
+  cursor: pointer;
+  outline: none;
+  word-break: break-word;
+}
+
+.select-module-LgEJO .select-module-lQFw3 {
+    position: absolute;
+    width: var(--space-24);
+    height: var(--space-24);
+    inset: 0;
+    margin-block: auto;
+  }
+
+.select-module-LgEJO:hover,
+  .select-module-LgEJO:focus {
+    background-color: var(--color-brand-red);
+    color: var(--color-white);
+  }
+
 .textarea-module-C6Xr1 {
   position: relative;
   display: inline-block;

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

@@ -11,7 +11,7 @@ interface HeadingProps {
     tag?: Tag;
     uppercase?: boolean;
 }
-export declare function Heading({ children, className, italic, size, tag, uppercase, }: HeadingProps): import("react").ReactElement<{
+export declare function Heading({ children, className, italic, size, tag, uppercase, }: HeadingProps): React.ReactElement<{
     className: string;
-}, string | import("react").JSXElementConstructor<any>>;
+}, string | React.JSXElementConstructor<any>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -28,8 +28,9 @@
     "lint:fix": "eslint . --fix --ext ts,tsx,cjs,js,mdx --report-unused-disable-directives --max-warnings 0 --cache --cache-location node_modules/.cache/.eslintcache",
     "prepare": "husky",
     "start": "http-server ./storybook-static",
-    "stylelint": "stylelint --config .stylelintrc.cjs \"src/**/*.css\" --formatter verbose",
+    "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:types": "tsc --noEmit --pretty false",
     "update-packages": "npx npm-check-updates -u"
   },
@@ -40,14 +41,15 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.3",
     "@csstools/postcss-global-data": "^2.1.1",
+    "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-viewport": "^8.0.9",
     "@storybook/addon-docs": "^8.0.9",
     "@storybook/addon-essentials": "^8.0.9",
     "@storybook/addon-interactions": "^8.0.9",
     "@storybook/addon-links": "^8.0.9",
+    "@storybook/addon-viewport": "^8.0.9",
     "@storybook/blocks": "^8.0.9",
     "@storybook/preview-api": "^8.0.9",
     "@storybook/react": "^8.0.9",
@@ -59,6 +61,7 @@
     "@typescript-eslint/parser": "^7.7.1",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.19",
+    "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -76,7 +79,6 @@
     "eslint-plugin-unused-imports": "^3.1.0",
     "http-server": "^14.1.1",
     "husky": "^9.0.11",
-    "lint-staged": "^15.2.2",
     "postcss": "^8.4.38",
     "postcss-custom-media": "^10.0.4",
     "postcss-import": "^16.1.0",
@@ -101,10 +103,6 @@
     "clsx": "^2.1.1",
     "react-aria-components": "^1.1.1"
   },
-  "lint-staged": {
-    "src/**/*.css": "pnpm stylelint",
-    "src/**/*.{ts,tsx}": "pnpm lint"
-  },
   "publishConfig": {
     "access": "public"
   }