@sonic-equipment/ui 0.0.19 → 0.0.21

package/dist/algolia/algolia-active-filters.d.ts

@@ -0,0 +1,7 @@
+import { SelectedFilter } from 'filters/active-filters/active-filters';
+import type { CurrentRefinementsConnectorParamsRefinement } from 'instantsearch.js/es/connectors/current-refinements/connectCurrentRefinements';
+export interface SelectedFilterCategory {
+    filters: (SelectedFilter & CurrentRefinementsConnectorParamsRefinement)[];
+    label: string;
+}
+export declare function AlgoliaActiveFilters(): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/algolia/algolia-filter-panel.d.ts

@@ -0,0 +1,4 @@
+export interface AlgoliaFilterPanelProps {
+    onShowProducts: VoidFunction;
+}
+export declare function AlgoliaFilterPanel({ onShowProducts, }: AlgoliaFilterPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/algolia/algolia-multi-select.d.ts

@@ -0,0 +1,5 @@
+interface AlgoliaMultiSelectProps {
+    attribute: string;
+}
+export declare function AlgoliaMultiSelect({ attribute }: AlgoliaMultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/dist/algolia/algolia-product-list.d.ts

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

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface AlgoliaContextType {
+    online: boolean;
+    setOnline: (online: boolean) => void;
+    toggleOnline: VoidFunction;
+}
+interface AlgoliaProviderProps {
+    children: React.ReactNode;
+    online?: boolean;
+}
+export declare function AlgoliaProvider({ children, online: _online, }: AlgoliaProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useAlgolia(): AlgoliaContextType;
+export {};

package/dist/algolia/algolia-results-count.d.ts

@@ -0,0 +1 @@
+export declare function AlgoliaResultsCount(): string | null;

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

@@ -0,0 +1,4 @@
+import { SearchClient } from 'algoliasearch/lite';
+export declare const searchClient: ({ online }: {
+    online: boolean;
+}) => SearchClient;

package/dist/algolia/algolia-sort-by.d.ts

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

package/dist/algolia/algolia.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+interface StoryProps {
+    online: boolean;
+}
+declare const meta: {
+    argTypes: {
+        online: {
+            control: "boolean";
+        };
+    };
+    args: {
+        online: false;
+    };
+    title: string;
+};
+export default meta;
+export declare const Default: StoryObj<StoryProps>;

package/dist/buttons/add-to-cart-button/add-to-cart-button.stories.d.ts

@@ -15,3 +15,4 @@ export declare const InitialState: Story;
 export declare const SpinnerState: Story;
 export declare const ManualInputState: Story;
 export declare const RightAligned: Story;
+export declare const Connected: Story;

package/dist/buttons/add-to-cart-button/connected-add-to-cart-button.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    productId: string;
+}
+export declare const ConnectedAddToCartButton: ({ productId }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,16 +1,17 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 export interface ButtonProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
-    children?: string;
+    children?: ReactNode | string;
     className?: string;
     color?: 'primary' | 'secondary';
     condensed?: boolean;
     icon?: React.ReactNode;
+    iconPosition?: 'left' | 'right';
     isDisabled?: boolean;
     onPress?: VoidFunction;
-    size?: 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
     type?: 'button' | 'submit' | 'reset';
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-export declare function Button({ _pseudo, children, className, color, condensed, icon, isDisabled, onPress, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ _pseudo, children, className, color, condensed, icon, iconPosition, isDisabled, onPress, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/button/button.stories.d.ts

@@ -24,3 +24,4 @@ export declare const SecondaryActive: Story;
 export declare const Ghost: Story;
 export declare const SizeMD: Story;
 export declare const SizeMDCondensed: Story;
+export declare const SizeSM: Story;

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

@@ -3,7 +3,8 @@ export interface IconButtonProps {
     children: React.ReactNode;
     className?: string;
     color?: 'primary' | 'secondary';
+    isDisabled?: boolean;
     onPress?: VoidFunction;
     size?: 'md' | 'lg';
 }
-export declare function IconButton({ children, className, color, onPress, size, }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function IconButton({ children, className, color, isDisabled, onPress, size, }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributeAnchorTarget } from 'react';
+export interface LinkButtonProps {
+    children?: React.ReactNode | string;
+    className?: string;
+    href?: string;
+    isDisabled?: boolean;
+    onPress?: VoidFunction;
+    target?: HTMLAttributeAnchorTarget;
+}
+export declare function LinkButton({ children, className, href, isDisabled, onPress, target, }: LinkButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/link-button/link-button.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react';
+import { LinkButton } from './link-button';
+declare const meta: {
+    args: {
+        onPress: import("@vitest/spy").Mock<[], void>;
+    };
+    component: typeof LinkButton;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithIcon: Story;
+export declare const AsButton: Story;
+export declare const Disabled: Story;

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

@@ -0,0 +1,6 @@
+import { ProductCardProps } from './product-card';
+interface ConnectedProductCartProps extends Omit<ProductCardProps, 'addToCartButton'> {
+    productId: string;
+}
+export declare function ConnectedProductCart({ productId, ...props }: ConnectedProductCartProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -37,3 +37,4 @@ export declare const Small: Story;
 export declare const LargeLongText: Story;
 export declare const MediumLongText: Story;
 export declare const SmallLongText: Story;
+export declare const Connected: Story;

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

@@ -2,10 +2,11 @@ import { ReactNode } from 'react';
 export interface AccordionItemProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
     children: ReactNode;
+    className?: string;
     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;
+export declare function AccordionItem({ _pseudo, children, className, id, isDisabled, isOpen: isOpenProp, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -11,7 +11,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Indented: Story;
 export declare const Disabled: Story;
 export declare const Focus: Story;
-export declare const Active: Story;
 export declare const Large: Story;

package/dist/collapsables/show-all/show-all.d.ts

@@ -0,0 +1,9 @@
+import { type ReactElement } from 'react';
+export interface ShowAllProps {
+    children?: ReactElement | ReactElement[];
+    hasTransparency?: boolean;
+    initialHeight?: number;
+    isOpen?: boolean;
+    onToggle: (isOpen: boolean) => void;
+}
+export declare const ShowAll: ({ children, hasTransparency, initialHeight, isOpen, onToggle, }: ShowAllProps) => import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/show-all/show-all.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+import { ShowAllProps } from './show-all';
+declare const meta: {
+    args: {
+        onToggle: import("@vitest/spy").Mock<[isOpen: boolean], void>;
+    };
+    component: ({ children, hasTransparency, initialHeight, isOpen, onToggle, }: ShowAllProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Text: Story;
+export declare const Checkboxes: Story;

package/dist/filters/active-filters/active-filters.d.ts

@@ -0,0 +1,14 @@
+export interface SelectedFilter {
+    label: string;
+    value: string | number;
+}
+export interface SelectedFilterCategory {
+    filters: SelectedFilter[];
+    label: string;
+}
+export interface ActiveFiltersProps {
+    onClearAllFilters: () => void;
+    onClearFilter: (categoryLabel: string, filter: SelectedFilter) => void;
+    selectedFilterCategories: SelectedFilterCategory[];
+}
+export declare const ActiveFilters: ({ onClearAllFilters, onClearFilter, selectedFilterCategories, }: ActiveFiltersProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/filters/active-filters/active-filters.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    args: {
+        onClearAllFilters: import("@vitest/spy").Mock<[], void>;
+        onClearFilter: import("@vitest/spy").Mock<[categoryLabel: string, filter: import("./active-filters").SelectedFilter], void>;
+    };
+    component: ({ onClearAllFilters, onClearFilter, selectedFilterCategories, }: import("./active-filters").ActiveFiltersProps) => import("react/jsx-runtime").JSX.Element | null;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/filters/multi-select/multi-select.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export interface FilterOption {
+    amount: number;
+    isSelected: boolean;
+    label: string;
+    value: string;
+}
+export interface MultiSelectProps<T extends FilterOption> {
+    amountShown?: number;
+    isOpen: boolean;
+    onChange: (value: T) => void;
+    onToggleOpen: (isOpen: boolean) => void;
+    options: T[];
+    render: ({ onChange, option, }: {
+        onChange: (key: string) => void;
+        option: T;
+    }) => ReactNode;
+}
+export declare function MultiSelect<T extends FilterOption>({ amountShown, isOpen, onChange, onToggleOpen, options, render, }: MultiSelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/filters/multi-select/multi-select.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react';
+import { FilterOption, MultiSelect, MultiSelectProps } from './multi-select';
+type ColorFilterOption = FilterOption & {
+    color: string;
+};
+declare const meta: {
+    args: {
+        onChange: import("@vitest/spy").Mock<[value: FilterOption], void>;
+        onToggleOpen: import("@vitest/spy").Mock<[isOpen: boolean], void>;
+    };
+    component: typeof MultiSelect;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithCheckboxes: Story;
+export declare const WithColorCheckboxes: StoryObj<MultiSelectProps<ColorFilterOption>>;

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

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

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

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+import { Pagination } from './pagination';
+declare const meta: {
+    args: {
+        currentPage: number;
+        onChange: import("@vitest/spy").Mock<[pageNumber: number], void>;
+        totalPages: number;
+    };
+    component: typeof Pagination;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+export declare const Default: Story;

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

@@ -16,3 +16,4 @@ type Story = StoryObj<typeof ColorCheckbox>;
 export declare const Checked: Story;
 export declare const Unchecked: Story;
 export declare const CheckedFocus: Story;
+export declare const CheckedDisabled: Story;

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

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

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

@@ -1,10 +1,17 @@
 import type { StoryObj } from '@storybook/react';
 import { Select } from './select';
+declare const options: {
+    readonly new: "New";
+    readonly popular: "Popular";
+    readonly price_asc: "Price: Low - High";
+    readonly price_desc: "Price: High - Low";
+    readonly recommended: "Recommended";
+};
 declare const meta: {
     args: {
-        onChange: import("@vitest/spy").Mock<[value: string], void>;
+        onChange: import("@vitest/spy").Mock<[value: never], void>;
     };
-    component: ({ disabled, label, onChange, options, selectedOption, showLabel, }: import("./select").SelectProps) => import("react/jsx-runtime").JSX.Element;
+    component: typeof Select;
     parameters: {
         layout: string;
     };
@@ -15,5 +22,5 @@ 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 DefaultSelected: StoryObj<typeof Select<typeof options>>;
 export declare const Disabled: Story;

package/dist/icons/chevrons/chevron-left-filled-icon.d.ts

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

package/dist/icons/chevrons/chevron-right-filled-icon.d.ts

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

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

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

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

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

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactElement, ReactNode, FormEventHandler, KeyboardEvent, ComponentType } from 'react';
+import { ReactNode, HTMLAttributeAnchorTarget, ReactElement, FormEventHandler, KeyboardEvent, ComponentType } from 'react';
 
 type AddToCartState = 'initial' | 'spinner' | 'manual-input';
 interface AddToCartButtonProps {
@@ -12,19 +12,20 @@ declare function AddToCartButton({ initialState, onChange, quantity, }: AddToCar
 
 interface ButtonProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
-    children?: string;
+    children?: ReactNode | string;
     className?: string;
     color?: 'primary' | 'secondary';
     condensed?: boolean;
     icon?: React.ReactNode;
+    iconPosition?: 'left' | 'right';
     isDisabled?: boolean;
     onPress?: VoidFunction;
-    size?: 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
     type?: 'button' | 'submit' | 'reset';
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-declare function Button({ _pseudo, children, className, color, condensed, icon, isDisabled, onPress, size, type, variant, withArrow, }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ _pseudo, children, className, color, condensed, icon, iconPosition, isDisabled, onPress, size, type, variant, withArrow, }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface FavoriteButtonProps {
     isFavorite: boolean;
@@ -36,10 +37,21 @@ interface IconButtonProps {
     children: React.ReactNode;
     className?: string;
     color?: 'primary' | 'secondary';
+    isDisabled?: boolean;
     onPress?: VoidFunction;
     size?: 'md' | 'lg';
 }
-declare function IconButton({ children, className, color, onPress, size, }: IconButtonProps): react_jsx_runtime.JSX.Element;
+declare function IconButton({ children, className, color, isDisabled, onPress, size, }: IconButtonProps): react_jsx_runtime.JSX.Element;
+
+interface LinkButtonProps {
+    children?: React.ReactNode | string;
+    className?: string;
+    href?: string;
+    isDisabled?: boolean;
+    onPress?: VoidFunction;
+    target?: HTMLAttributeAnchorTarget;
+}
+declare function LinkButton({ children, className, href, isDisabled, onPress, target, }: LinkButtonProps): react_jsx_runtime.JSX.Element;
 
 interface Source$1 {
   url: string
@@ -85,6 +97,7 @@ declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton:
 interface AccordionItemProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
     children: ReactNode;
+    className?: string;
     id: string;
     isDisabled?: boolean;
     isOpen?: boolean;
@@ -96,9 +109,19 @@ interface AccordionProps {
     children?: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[];
     color?: 'white' | 'black';
     hasLineSeparator?: boolean;
+    indented?: boolean;
     size?: 'md' | 'lg';
 }
-declare function Accordion({ children, color, hasLineSeparator, size, }: AccordionProps): react_jsx_runtime.JSX.Element;
+declare function Accordion({ children, color, hasLineSeparator, indented, size, }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+interface ShowAllProps {
+    children?: ReactElement | ReactElement[];
+    hasTransparency?: boolean;
+    initialHeight?: number;
+    isOpen?: boolean;
+    onToggle: (isOpen: boolean) => void;
+}
+declare const ShowAll: ({ children, hasTransparency, initialHeight, isOpen, onToggle, }: ShowAllProps) => react_jsx_runtime.JSX.Element;
 
 interface ProductPriceProps {
     className?: string;
@@ -113,6 +136,25 @@ interface ProductSkuProps {
 }
 declare function ProductSku({ sku }: ProductSkuProps): react_jsx_runtime.JSX.Element;
 
+interface FilterOption {
+    amount: number;
+    isSelected: boolean;
+    label: string;
+    value: string;
+}
+interface MultiSelectProps<T extends FilterOption> {
+    amountShown?: number;
+    isOpen: boolean;
+    onChange: (value: T) => void;
+    onToggleOpen: (isOpen: boolean) => void;
+    options: T[];
+    render: ({ onChange, option, }: {
+        onChange: (key: string) => void;
+        option: T;
+    }) => ReactNode;
+}
+declare function MultiSelect<T extends FilterOption>({ amountShown, isOpen, onChange, onToggleOpen, options, render, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+
 interface CheckboxProps$1 {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
     children: ReactNode;
@@ -169,15 +211,15 @@ 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 {
+interface SelectProps<T> {
     disabled?: boolean;
     label: string;
-    onChange: (value: string) => void;
-    options: Record<string, string>;
-    selectedOption?: string;
+    onChange: (value: keyof T) => void;
+    options: T;
+    selectedOption?: keyof T;
     showLabel?: boolean;
 }
-declare const Select: ({ disabled, label, onChange, options, selectedOption, showLabel, }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare function Select<T extends object>({ disabled, label, onChange, options, selectedOption, showLabel, }: SelectProps<T>): react_jsx_runtime.JSX.Element;
 
 interface TextFieldProps {
     autoFocus?: boolean;
@@ -220,11 +262,7 @@ 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;
+type TranslationId = 'Chosen filters' | 'Clear filters' | 'Excl. VAT' | 'Incl. VAT' | 'Show' | 'Show all' | 'Show filters' | 'Show less' | 'Sort' | 'articles' | 'article' | 'of';
 
 interface FormattedMessageProps {
     id: TranslationId;
@@ -278,31 +316,27 @@ interface Filters {
         }[];
     };
 }
+declare const sortOptions: {
+    readonly new: "New";
+    readonly popular: "Popular";
+    readonly price_asc: "Price: Low - High";
+    readonly price_desc: "Price: High - Low";
+    readonly recommended: "Recommended";
+};
+type SortKey = keyof typeof sortOptions;
 type ActiveFilters = {
     colors: string[];
 };
-type Sort = {
-    by: string;
-    direction: string;
-};
 type ProductListingProps = {
     activeFilters: ActiveFilters;
     filters: Filters;
     isLoading?: boolean;
     onFilterChange: (filters: ActiveFilters) => void;
-    onSortChange: (sort: Sort) => void;
-    productCard: ComponentType<any>;
-    products: {
-        id: string;
-        title: string;
-    }[];
-    sort: {
-        by: string;
-        direction: string;
-    };
+    onSortChange: (sort: SortKey) => void;
+    sort: SortKey;
     total: number;
 };
-declare function ProductListing({ activeFilters, filters, isLoading, onFilterChange, onSortChange, productCard: ProductCard, products, }: ProductListingProps): react_jsx_runtime.JSX.Element;
+declare function ProductListing({ isLoading }: ProductListingProps): react_jsx_runtime.JSX.Element;
 
 declare function createProductListingSearchParams(state: {
     filters: {
@@ -323,4 +357,9 @@ declare function parseProductListingSearchParams(params: URLSearchParams): {
     };
 };
 
-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 };
+interface SidebarProps {
+    children: React.ReactNode;
+}
+declare function Sidebar({ children }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+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 FilterOption, type Filters, FormattedMessage, type FormattedMessageFunction, type FormattedMessageProps, HashedOutlinedIcon, IconButton, type IconButtonProps, Image, type ImageProps, IntlProvider, LinkButton, type LinkButtonProps, MultiSelect, type MultiSelectProps, NumberField, type NumberFieldSize, ProductCard, type ProductCardProps, ProductListing, type ProductListingProps, ProductOverviewGrid, type ProductOverviewGridProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, RightArrowFilledIcon, Select, type SelectProps, ShowAll, type ShowAllProps, Sidebar, type SidebarProps, TextField, createProductListingSearchParams, parseProductListingSearchParams, useFormattedMessage };