bonprix-design-system 0.63.1 → 0.64.0

package/dist/index.d.ts

@@ -2,19 +2,28 @@ import { default as Availability } from '@bonprix-ds/react-availability';
 import { AvailabilityProps } from '@bonprix-ds/react-availability';
 import { default as BenefitTag } from '@bonprix-ds/react-benefit-tag';
 import { BenefitTagProps } from '@bonprix-ds/react-benefit-tag';
+import { Config } from '@bonprix-ds/utils';
+import { configure } from '@bonprix-ds/utils';
 import { default as Container } from '@bonprix-ds/react-container';
 import { ContainerProps } from '@bonprix-ds/react-container';
-import { Context } from 'react';
 import { default as default_2 } from 'react';
 import { ElementType } from 'react';
 import { FC } from 'react';
+import { default as Grid } from '@bonprix-ds/react-grid';
+import { GridProps } from '@bonprix-ds/react-grid';
 import { HTMLInputAutoCompleteAttribute } from 'react';
+import { default as Icon } from '@bonprix-ds/react-icon';
+import { IconProps } from '@bonprix-ds/react-icon';
+import { IconType } from '@bonprix-ds/react-icon';
 import { Options } from '@splidejs/react-splide';
+import { default as Price } from '@bonprix-ds/react-price';
+import { PriceProps } from '@bonprix-ds/react-price';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { Ref } from 'react';
 import { RefObject } from 'react';
 import { SplideSlide } from '@splidejs/react-splide';
+import { SVGSpriteContext } from '@bonprix-ds/utils';
 
 declare type AccessibilityLabel = {
     /** Sets an invisible header for the carousel to create a landmark. Do not use both `title` and `aria-labelledby`. */
@@ -155,7 +164,7 @@ export declare type BadgeIconButtonProps = AsLink | AsButton;
 
 declare interface BaseProps {
     /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */
-    icon: Icon_2;
+    icon: IconType;
     /** An accessible label of the icon button. */
     label: string;
     /** Standard HTML global attribute. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/id">MDN, attributes - id</a>. */
@@ -166,30 +175,19 @@ declare interface BaseProps {
     amount?: number;
 }
 
-declare interface BaseProps_10 {
-    /** This property should contain all of the subcomponents of the TabGroup component (TabGroup.Item, TabGroup.Content, TabGroup.List). */
-    children: ReactNode;
-    /** The currently active tab. Should be used in conjunction with the `onChange` prop. */
-    activeTab: string;
-    /** Callback function that is called when the active tab changes. */
-    onChange: (value: string) => void;
-    /** Sets "the variant.  */
-    variant?: TabGroupVariant;
-}
-
-declare interface BaseProps_11 extends TextInputBaseProps {
+declare interface BaseProps_10 extends TextInputBaseProps {
     /** The placeholder text for the input field. */
     placeholder?: string;
     /** Reference to the input element. */
     inputRef?: RefObject<HTMLTextAreaElement>;
 }
 
-declare interface BaseProps_12 extends TextInputBaseProps {
+declare interface BaseProps_11 extends TextInputBaseProps {
     /** Reference to the input element. */
     inputRef?: RefObject<HTMLInputElement>;
 }
 
-declare interface BaseProps_13 extends TextInputBaseProps {
+declare interface BaseProps_12 extends TextInputBaseProps {
     /** Callback that is triggered when the search button is clicked. */
     onSearch: () => void;
     /** Reference to the input element. */
@@ -200,7 +198,7 @@ declare interface BaseProps_2 {
     /** The visible content of the component. */
     children: string;
     /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */
-    icon?: Icon_2;
+    icon?: IconType;
     /** The position of the icon relative to the content. */
     iconPosition?: "start" | "end";
     /**  If true, the width of the component will shrink to the width of the content. */
@@ -241,7 +239,7 @@ declare interface BaseProps_3 {
 
 declare interface BaseProps_4 {
     /** Namr of the icon to use. The value must be from our icon set. */
-    icon: Icon_2;
+    icon: IconType;
     /** An accessible label of the icon button. */
     label: string;
     /** Standard HTML global attribute. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/id">MDN, attributes - id</a>. */
@@ -279,21 +277,6 @@ declare interface BaseProps_5 {
 }
 
 declare interface BaseProps_6 {
-    /** Current price of the item. */
-    currentPrice: number;
-    /** Amount of items in a pack. */
-    amount?: number;
-    /** Set it to `true`, if the price of different variants is not the same. */
-    isFromPrice?: boolean;
-    /** If `true`, the amount of the items in a pack, as well as the price per unit will be additionally shown.  */
-    showUnits?: boolean;
-    /** Price per unit of the item. */
-    pricePerUnit?: number;
-    /** Size of the price component. */
-    size?: "small" | "large";
-}
-
-declare interface BaseProps_7 {
     /** Current price of the item. Available and mandatory for all variants except `no-price`. */
     finalPrice: number;
     /** If set, the voucher is displayed with the given percentage. Optional for all variants except `no-price`. Can be used alongside `voucherDiscount` and `startPrice`! */
@@ -304,7 +287,7 @@ declare interface BaseProps_7 {
     startPrice?: number;
 }
 
-declare interface BaseProps_8 {
+declare interface BaseProps_7 {
     /** The id of the input field. */
     id?: string;
     /** The visible label for the input field. */
@@ -329,7 +312,7 @@ declare interface BaseProps_8 {
     ref?: RefObject<HTMLButtonElement>;
 }
 
-declare interface BaseProps_9 {
+declare interface BaseProps_8 {
     /** The visible label. **/
     label: string;
     /** If `true`, the switch will be disabled. */
@@ -340,6 +323,17 @@ declare interface BaseProps_9 {
     description?: string;
 }
 
+declare interface BaseProps_9 {
+    /** This property should contain all of the subcomponents of the TabGroup component (TabGroup.Item, TabGroup.Content, TabGroup.List). */
+    children: ReactNode;
+    /** The currently active tab. Should be used in conjunction with the `onChange` prop. */
+    activeTab: string;
+    /** Callback function that is called when the active tab changes. */
+    onChange: (value: string) => void;
+    /** Sets "the variant.  */
+    variant?: TabGroupVariant;
+}
+
 declare interface BasicProps {
     /** The title. */
     title?: string;
@@ -355,12 +349,6 @@ export { BenefitTag }
 
 export { BenefitTagProps }
 
-declare interface BestProps extends TwoPriceProps {
-    variant: "best-price";
-    /** The initial price, before the period of the last month. */
-    startPrice?: number;
-}
-
 export declare const BottomSheet: FC<BottomSheetProps> & SheetSubcomponents;
 
 export declare interface BottomSheetProps extends SheetProps {
@@ -474,6 +462,8 @@ export declare type CarouselV2Props = AccessibilityLabel & {
     invertButtons?: boolean;
     /** If set to `true`, the horizontal padding for the arrow buttons will be removed. */
     disableHorizontalPadding?: boolean;
+    /** If set to `true`, scrolling via mouse drag will be enabled just like you would expect from a mobile touch pointer. */
+    simulateTouch?: boolean;
     /** A reference to the Carousel instance. You can call `moveToPage(pageNumber: number)` on this one, e.g. `carouselRef.current.moveToPage(2)`. */
     ref?: Ref<CarouselV2Ref>;
 };
@@ -541,8 +531,6 @@ export declare interface CollapsibleProps {
     onInitialInView?: () => void;
 }
 
-declare type ColumnSpan = Span | 0;
-
 declare interface CommonProps {
     /** One of the valid logo variants. */
     variant: Logo_2;
@@ -550,14 +538,9 @@ declare interface CommonProps {
     className?: string;
 }
 
-export declare interface Config {
-    iconSprite?: string;
-    logoSprite?: string;
-    figurineSprite?: string;
-    illustrationSprite?: string;
-}
+export { Config }
 
-export declare const configure: (projectConfig: Config) => Config;
+export { configure }
 
 export { Container }
 
@@ -617,14 +600,14 @@ declare interface ControlledInputProps_2 extends Omit<ControlGroupProps, "compon
     onChange: (value: string) => void;
 }
 
-declare interface ControlledInputProps_3 extends BaseProps_9 {
+declare interface ControlledInputProps_3 extends BaseProps_8 {
     /** Controls, whether the switch is checked or not. Should be used in conjunction with `onChange`, if controlled. */
     checked: boolean;
     /** Callback which is triggered when the checked state changes. Should be used in conjunction with `checked`, if controlled from outside. Optional otherwise. */
     onChange: (checked: boolean) => void;
 }
 
-declare type ControlledInputProps_4 = BaseProps_12 & {
+declare type ControlledInputProps_4 = BaseProps_11 & {
     /** The current value of the input field. Should be used in conjunction with `onChange`, when controlling the input. Should be `undefined` otherwise. */
     value: string;
     /** The default value of the input field. Should be used when the input is uncontrolled. */
@@ -642,7 +625,7 @@ declare type ControlledInputProps_5 = TextFieldBaseProps & {
     onChange: (value: string) => void;
 };
 
-declare interface ControlledInputProps_6 extends BaseProps_13 {
+declare interface ControlledInputProps_6 extends BaseProps_12 {
     /** The current value of the input field. Should be used in conjunction with `onChange`, when controlling the input. Should be `undefined` otherwise. */
     value: string;
     defaultValue?: never;
@@ -650,7 +633,7 @@ declare interface ControlledInputProps_6 extends BaseProps_13 {
     onChange: (value: string) => void;
 }
 
-declare interface ControlledProps extends BaseProps_11 {
+declare interface ControlledProps extends BaseProps_10 {
     /** The current value of the input field. Should be used in conjunction with `onChange`, when controlling the input. Should be `undefined` otherwise. */
     value: string;
     /** The default value of the input field. Should be used when the input is uncontrolled. */
@@ -659,7 +642,7 @@ declare interface ControlledProps extends BaseProps_11 {
     onChange: (value: string) => void;
 }
 
-declare interface ControlledSelectProps extends BaseProps_8 {
+declare interface ControlledSelectProps extends BaseProps_7 {
     /** The current value of the select. Should be used in conjunction with `onValueChange`. */
     value: string;
     /** The default value of the select. Should be used when select is uncontrolled. */
@@ -703,43 +686,9 @@ export declare interface FigurineProps {
     className?: string;
 }
 
-export declare const Grid: FC<GridProps> & {
-    Item: typeof GridItem;
-};
+export { Grid }
 
-declare const GridItem: FC<GridItemProps>;
-
-declare interface GridItemProps {
-    /** The content of the grid item. */
-    children?: ReactNode;
-    /** The number of columns the item should span. Can be used if the amount of columns is not changed between breakpoints. */
-    span?: Span;
-    /** The number of columns the item should span on the "s" breakpoint. */
-    s?: ColumnSpan;
-    /** The number of columns the item should span on the "m" breakpoint. */
-    m?: ColumnSpan;
-    /** The number of columns the item should span on the "l" breakpoint. */
-    l?: ColumnSpan;
-    /** The number of columns the item should span on the "xl" breakpoint. */
-    xl?: ColumnSpan;
-    /** The number of columns the item should span on the "xxl" breakpoint. */
-    xxl?: ColumnSpan;
-    /** The number of columns the item should span on the "xxxl" breakpoint. */
-    xxxl?: ColumnSpan;
-    /** Additional CSS classes to apply to the grid item. */
-    className?: string;
-}
-
-export declare interface GridProps {
-    /** A place where Grid.Item components should be added. */
-    children: ReactNode;
-    /** Classes for the Grid wrapper element. Intended mainly for customize gap size. */
-    className?: string;
-    /** If set to `true`, the grid will not have gutters between items.
-     * @deprecated Use `className="gap-x-0"` instead.
-     */
-    disableGutters?: boolean;
-}
+export { GridProps }
 
 declare interface HTMLInputAttributes {
     /** <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode" target="_blank">HTML input mode attribute.</a>  */
@@ -770,22 +719,13 @@ declare type HTMLInputPatternAttribute = HTMLInputElement["pattern"];
 
 declare type HTMLInputSpellCheckAttribute = HTMLInputElement["spellcheck"];
 
-export declare const Icon: ({ variant, className }: IconProps) => default_2.JSX.Element;
-
-declare type Icon_2 = typeof iconNames[number];
+export { Icon }
 
 export declare const IconButton: FC<IconButtonProps>;
 
 export declare type IconButtonProps = AsLink_3 | AsButton_3;
 
-declare const iconNames: readonly ["account-balanced", "address-book", "ai", "alarm-clock", "alert", "app", "apple", "armchair", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "back", "bell", "bra", "briefcase", "cake-piece-full", "cake-piece", "calendar", "cart", "catalog", "chat", "check-bold", "check", "child", "closer", "clothing-basic", "clothing-blazer", "clothing-blouse", "clothing-dress", "clothing-homewear", "clothing", "clothing-jacket", "clothing-jeans", "clothing-jumpsuit", "clothing-knitwear", "clothing-maternity-wear", "clothing-party-wear", "clothing-set", "clothing-shirt", "clothing-shorts", "clothing-size", "clothing-skirt", "clothing-sport", "clothing-sweater", "clothing-sweatshirt", "clothing-trousers", "communication", "connection", "control-panel", "cookie", "copy", "credit-card", "crown", "culture", "curtain-almost-dark", "curtain-dark", "curtain-opaque", "curtain-semi-transparent", "curtain-transparent", "customer", "delivery", "denied", "desktop", "diamond", "discount", "dots", "download", "edit", "education", "email", "error", "exchange", "family", "faq", "fast-delivery", "feedback-negative", "feedback-positive", "first-aid", "fitness", "fossil-fuel", "free-delivery", "friendship", "giftbox", "global-warming", "globe", "glossary", "handshake", "hanger", "hashtag", "health", "heart-eyes-emoji", "heart-full", "heart", "help", "hint", "home", "home2", "image-placeholder", "info", "invoice", "light-bulb-heart", "light-bulb", "lightning", "location", "locations", "lock", "lock-open", "logged-in", "logout", "mail", "menu", "minus", "newsletter", "not-yet-available", "order", "order2", "out-of-stock", "pause", "personal-data", "phone", "pin", "pinch-zoom", "plane", "play", "plus", "prepaid", "print", "process", "production-site", "puzzle", "qr-code", "quality", "question", "radio", "recently-viewed", "recycling", "religion", "return", "review-full", "review", "rocket", "roots", "saved-money", "scale", "search-categories", "search-form-arrow", "search", "sepa", "service", "share", "shopping-bag", "signpost", "signpost-single", "similar-products", "size", "social", "sold-out", "sort", "spark", "store", "success", "suitcase", "sustainable-animal-welfare", "sustainable-energy-efficient", "sustainable-natural-cosmetics", "sustainable-organic-materials", "sustainable-production", "sustainable-recyclable-design", "sustainable-recycling", "sustainable-resource", "sustainable-social-initiatives", "swords", "tablet", "teacup", "thumb-down-full", "thumb-down", "thumb-up-full", "thumb-up", "trash-bin", "tv", "user", "visibility", "visibility-off", "voucher", "wallet", "water-pollution", "water-usage", "whatsapp-bell", "whatsapp-phone", "zoom-in", "zoom-out"];
-
-export declare interface IconProps {
-    /** One of the valid icon variants. */
-    variant: Icon_2;
-    /** Additional CSS classes. */
-    className?: string;
-}
+export { IconProps }
 
 export declare const Illustration: ({ variant, className }: IllustrationProps) => default_2.JSX.Element;
 
@@ -879,11 +819,6 @@ export declare interface ModalProps {
 }
 
 declare interface NoPriceProps {
-    variant: "no-price";
-    size: "small" | "large";
-}
-
-declare interface NoPriceProps_2 {
     /** One of the valid variants of the price component. */
     variant: "no-price";
 }
@@ -939,19 +874,19 @@ declare interface PositionIndicatorProps {
     ref?: Ref<HTMLDivElement>;
 }
 
-export declare const Price: FC<PriceProps>;
+export { Price }
 
-export declare type PriceProps = RegularProps | SaleProps | BestProps | TopDealProps | NoPriceProps;
+export { PriceProps }
 
 export declare const PriceStacked: (props: PriceStackedProps) => default_2.JSX.Element;
 
-export declare type PriceStackedProps = RegularProps_2 | SaleProps_2 | NoPriceProps_2;
+export declare type PriceStackedProps = RegularProps | SaleProps | NoPriceProps;
 
-declare const PrimaryButton: ({ children, onClick, type, form, icon, iconPosition }: SheetPrimaryButtonProps) => default_2.JSX.Element;
+declare const PrimaryButton: ({ children, onClick, type, form, icon, iconPosition, disabled, loading }: SheetPrimaryButtonProps) => default_2.JSX.Element;
 
 declare const PrimaryButton_2: FC<Props_2>;
 
-declare const PrimaryButton_3: ({ children, onClick, type, form, icon, iconPosition }: SheetPrimaryButtonProps_2) => default_2.JSX.Element;
+declare const PrimaryButton_3: ({ children, onClick, type, form, icon, iconPosition, disabled, loading }: SheetPrimaryButtonProps_2) => default_2.JSX.Element;
 
 declare type Props = ControlledInputProps | UncontrolledInputProps;
 
@@ -976,7 +911,7 @@ declare interface Props_4 {
     /** The text content of the list item. */
     children: string;
     /** The icon to display in front of the list item. */
-    icon?: Icon_2;
+    icon?: IconType;
     /** Callback function to be called when the list item is clicked. */
     onClick?: () => void;
     /** If the `type` property of the List is set to `link`, this property is used to set the `href` attribute. */
@@ -1076,11 +1011,6 @@ declare interface RegularProps extends BaseProps_6 {
     variant: "regular";
 }
 
-declare interface RegularProps_2 extends BaseProps_7 {
-    /** One of the valid variants of the price component. */
-    variant: "regular";
-}
-
 export declare const RemovedItemPlaceholder: FC<RemovedItemPlaceholderProps>;
 
 export declare interface RemovedItemPlaceholderProps {
@@ -1094,11 +1024,7 @@ export declare interface RemovedItemPlaceholderProps {
 
 declare type ResponsiveNumber = Partial<Record<Breakpoint, number>>;
 
-declare interface SaleProps extends TwoPriceProps {
-    variant: "sale";
-}
-
-declare interface SaleProps_2 extends BaseProps_7 {
+declare interface SaleProps extends BaseProps_6 {
     /** One of the valid variants of the price component. */
     variant: "sale";
 }
@@ -1125,7 +1051,7 @@ declare interface SheetButtonProps {
     /** The label of the button. */
     children: string;
     /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */
-    icon?: Icon_2;
+    icon?: IconType;
     /** The position of the icon relative to the content. */
     iconPosition?: "start" | "end";
 }
@@ -1134,7 +1060,7 @@ declare interface SheetButtonProps_2 {
     /** The label of the button. */
     children: string;
     /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */
-    icon?: Icon_2;
+    icon?: IconType;
     /** The position of the icon relative to the content. */
     iconPosition?: "start" | "end";
 }
@@ -1346,8 +1272,6 @@ declare interface SourceSetMapper {
     xxxl?: string;
 }
 
-declare type Span = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
 export declare const Spinner: FC<SpinnerProps>;
 
 declare interface SpinnerProps {
@@ -1418,13 +1342,13 @@ declare type SubmitResetVariantProps = AsButton_2 & {
     type?: "submit" | "reset";
 };
 
-export declare const SVGSpriteContext: Context<Config>;
+export { SVGSpriteContext }
 
 export declare const Switch: FC<SwitchProps>;
 
 export declare type SwitchProps = ControlledInputProps_3 | UncontrolledInputProps_3;
 
-declare interface TabBoxProps extends BaseProps_10 {
+declare interface TabBoxProps extends BaseProps_9 {
     variant?: "tab-box";
     /** If true, the tab items will occupy the available width. */
     fullWidth?: boolean;
@@ -1447,7 +1371,7 @@ export declare type TabGroupProps = TabBoxProps | TabProps;
 
 declare type TabGroupVariant = "tab" | "tab-box";
 
-declare interface TabProps extends BaseProps_10 {
+declare interface TabProps extends BaseProps_9 {
     variant?: "tab";
     fullWidth?: never;
 }
@@ -1726,25 +1650,6 @@ export declare interface TooltipProps {
     tabIndex?: number;
 }
 
-declare interface TopDealProps extends BaseProps_6 {
-    variant: "top-deal";
-    /** The date, when the deal ends. */
-    deadlineDate: Date;
-    /** The future price of the item. The price will apply on the `futureDate`. */
-    futurePrice: number;
-    /** The date, when the `futurePrice` will apply. */
-    futureDate: Date;
-    /** The ratio between the current and start price. Can be both positive and negative. */
-    increasedPriceRatio: number;
-}
-
-declare interface TwoPriceProps extends BaseProps_6 {
-    /** The previous price of the item. */
-    oldPrice: number;
-    /** The discount in percent, that is applied to the item (current price compared to the old price). */
-    discountInPercent: number;
-}
-
 export declare const Typography: FC<TypographyProps>;
 
 declare type TypographyColor = "inherit" | "primary" | "on-primary-high" | "on-primary-mid" | "on-bg-high" | "on-bg-mid" | "on-bg-low" | "error" | "alert" | "success" | "info" | "sale" | "on-sale" | "disabled" | "sustainable" | "black" | "white";
@@ -1794,14 +1699,14 @@ declare interface UncontrolledInputProps_2 extends Omit<ControlGroupProps, "comp
     onChange?: (value: string) => void;
 }
 
-declare interface UncontrolledInputProps_3 extends BaseProps_9 {
+declare interface UncontrolledInputProps_3 extends BaseProps_8 {
     checked?: never;
     /** The default value of the switch. Should be used when the switch is uncontrolled. */
     defaultChecked: boolean;
     onChange?: (checked: boolean) => void;
 }
 
-declare type UncontrolledInputProps_4 = BaseProps_12 & {
+declare type UncontrolledInputProps_4 = BaseProps_11 & {
     value?: never;
     defaultValue: string;
     onChange?: (value: string) => void;
@@ -1813,20 +1718,20 @@ declare type UncontrolledInputProps_5 = TextFieldBaseProps & {
     onChange?: (value: string) => void;
 };
 
-declare interface UncontrolledInputProps_6 extends BaseProps_13 {
+declare interface UncontrolledInputProps_6 extends BaseProps_12 {
     value?: never;
     /** The default value of the input field. Should be used when the input is uncontrolled. */
     defaultValue: string;
     onChange?: (value: string) => void;
 }
 
-declare interface UncontrolledProps extends BaseProps_11 {
+declare interface UncontrolledProps extends BaseProps_10 {
     value?: never;
     defaultValue: string;
     onChange?: (value: string) => void;
 }
 
-declare interface UncontrolledSelectProps extends BaseProps_8 {
+declare interface UncontrolledSelectProps extends BaseProps_7 {
     value?: never;
     defaultValue: string;
     onValueChange?: (value: string) => void;