bonprix-design-system 0.58.0 → 0.59.0

package/dist/index.css

@@ -0,0 +1 @@
+[data-bpds=side-sheet] .button-section-container{width:100%;container-type:inline-size}@container (width>=500px){[data-bpds=side-sheet] .button-section{flex-direction:row!important}}

package/dist/index.d.ts

@@ -1,10 +1,8 @@
-import { Config } from 'tailwindcss/types/config';
 import { default as default_2 } from 'react';
 import { ElementType } from 'react';
 import { FC } from 'react';
 import { HTMLInputAutoCompleteAttribute } from 'react';
 import { Options } from '@splidejs/react-splide';
-import { PluginCreator } from 'tailwindcss/types/config';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { Ref } from 'react';
@@ -368,32 +366,11 @@ declare interface BestProps extends TwoPriceProps {
     startPrice?: number;
 }
 
-export declare const BottomSheet: FC<BottomSheetProps> & Subcomponents;
+export declare const BottomSheet: FC<BottomSheetProps> & SheetSubcomponents;
 
-declare interface BottomSheetButtonsBaseProps {
-    /** 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;
-    /** The position of the icon relative to the content. */
-    iconPosition?: "start" | "end";
-}
-
-export declare interface BottomSheetProps {
-    /** All of the subcomponents should be placed inside this property. */
-    children: ReactNode;
-    /** Toggles the visibility of the BottomSheet. Should be used in conjunction with the `onClose` property */
-    isOpen: boolean;
-    /** Callback function, that is triggered when the BottomSheet is attempted to be closed. `isOpen` should be set appropriately.*/
-    onClose: () => void;
-    /** Callback to execute when clicking back icon */
-    onBack?: () => void;
-    /** The z-index of the BottomSheet. */
-    zIndex?: number;
-    /** A reference to the root element of the BottomSheet. */
+export declare interface BottomSheetProps extends SheetProps {
+    /** A reference to the root element of the sheet. */
     ref?: Ref<HTMLDivElement>;
-    /** If `true`, the horizontal padding around the content will be removed. */
-    disableHorizontalPadding?: boolean;
 }
 
 export declare const Breadcrumb: FC<BreadcrumbProps>;
@@ -421,12 +398,9 @@ export declare const Button: FC<ButtonProps>;
 
 export declare type ButtonProps = AsLink_2 | SubmitResetVariantProps | ButtonVariantProps;
 
-declare const ButtonSection: ({ children }: ButtonSectionProps) => default_2.JSX.Element;
+declare const ButtonSection: ({ children }: SheetButtonSectionProps) => default_2.JSX.Element;
 
-declare interface ButtonSectionProps {
-    /** Primary and secondary buttons should be placed inside this section. */
-    children: ReactNode;
-}
+declare const ButtonSection_2: ({ children }: SheetButtonSectionProps_2) => default_2.JSX.Element;
 
 declare type ButtonSize = "small" | "medium" | "large";
 
@@ -439,7 +413,7 @@ declare type ButtonVariantProps = AsButton_2 & {
     type?: "button";
 };
 
-export declare const Carousel: FC<CarouselProps> & Subcomponents_2;
+export declare const Carousel: FC<CarouselProps> & Subcomponents;
 
 declare interface CarouselImage extends BasicProps {
     carousel: true;
@@ -477,6 +451,7 @@ export declare interface CarouselProps {
     /** The index of the initial slide to be displayed */
     start?: number;
     disableDrag?: boolean;
+    paginationRef?: Ref<HTMLUListElement>;
 }
 
 export declare const CarouselV2: FC<CarouselV2Props> & SubComponents;
@@ -504,13 +479,17 @@ export declare type CarouselV2Props = AccessibilityLabel & {
     invertButtons?: boolean;
     /** If set to `true`, the horizontal padding for the arrow buttons will be removed. */
     disableHorizontalPadding?: boolean;
-    /** Moves to a certain page imperatively. It's a one-time operation and is not supposed to fully control Carousel from the outside. */
-    moveToPage?: number;
+    /** A reference to the Carousel instance. You can call `moveToPage(pageNumber: number)` on this one, e.g. `carouselRef.current.moveToPage(2)`. */
+    ref?: Ref<CarouselV2Ref>;
 };
 
+declare interface CarouselV2Ref {
+    moveToPage: (pageNumber: number) => void;
+}
+
 export declare const Checkbox: FC<CheckboxProps>;
 
-export declare const CheckboxGroup: FC<CheckboxGroupProps> & Subcomponents_3;
+export declare const CheckboxGroup: FC<CheckboxGroupProps> & Subcomponents_2;
 
 declare interface CheckboxGroupBaseProps extends Omit<ControlGroupProps, "componentName"> {
     /** The caption for the checkbox group. */
@@ -580,18 +559,13 @@ export declare interface ContainerProps {
     disableFullScreen?: boolean;
 }
 
-declare const Content: ({ children }: ContentProps) => default_2.JSX.Element;
+declare const Content: ({ children, disableHorizontalPadding }: SheetContentProps) => default_2.JSX.Element;
 
-declare const Content_2: FC<ContentProps_2>;
+declare const Content_2: FC<ContentProps>;
 
-declare const Content_3: ({ children }: Props_9) => default_2.JSX.Element;
+declare const Content_3: ({ children, disableHorizontalPadding }: SheetContentProps_2) => default_2.JSX.Element;
 
 declare interface ContentProps {
-    /** The content of the content section. */
-    children: ReactNode;
-}
-
-declare interface ContentProps_2 {
     /** The content to display in the dialog */
     children: ReactNode;
 }
@@ -690,7 +664,7 @@ declare interface ControlledSelectProps extends BaseProps_8 {
     onValueChange: (value: string) => void;
 }
 
-export declare const Dialog: FC<DialogProps> & Subcomponents_4;
+export declare const Dialog: FC<DialogProps> & Subcomponents_3;
 
 export declare interface DialogProps {
     /** Controls the visibility of the dialog. Should be used in conjunction with `onClose`. */
@@ -741,15 +715,6 @@ export declare interface GridProps {
     disableGutters?: boolean;
 }
 
-declare const Header: ({ children, level }: HeaderProps) => default_2.JSX.Element;
-
-declare interface HeaderProps {
-    /** The content of the header. */
-    children: string;
-    /** The heading level for the header. */
-    level?: "h3" | "h4";
-}
-
 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>  */
     inputMode?: HTMLInputInputModeAttribute;
@@ -833,7 +798,7 @@ declare interface LinkLogo extends CommonProps, Anchor {
 
 export declare type LinkProps = AsButton_4 | AsLink_4;
 
-export declare const List: FC<ListProps> & Subcomponents_5;
+export declare const List: FC<ListProps> & Subcomponents_4;
 
 declare const ListItem: FC<Props_4>;
 
@@ -915,8 +880,11 @@ export declare interface PaginationProps {
     totalPages: number;
     /** Callback function that is called when the page changes. The first parameter is the new page number, and the second parameter is the origin of the event ( `page`, `prev` or `next`) */
     onPageChange: (newPage: number, origin: PaginationEventOrigin) => void;
-    /** The base URL for the pagination links. The appropriate page number will be appended to it as a search parameter. */
-    baseHref: string;
+    /** Creates the individual page's `href` attributes taking into account the page's number.
+     * @param {number} pageNumber - the page number
+     * @returns {string} The `href` for the given page.
+     */
+    constructPageHref: (pageNumber: number) => string;
     /** Accessible label for screen readers. */
     srLabel?: string;
 }
@@ -925,7 +893,12 @@ export declare const PasswordField: FC<PasswordFieldProps>;
 
 export declare type PasswordFieldProps = ControlledInputProps_4 | UncontrolledInputProps_4;
 
-declare const PositionIndicator: FC;
+declare const PositionIndicator: FC<PositionIndicatorProps>;
+
+declare interface PositionIndicatorProps {
+    /** Ref to the element */
+    ref?: Ref<HTMLDivElement>;
+}
 
 export declare const Price: FC<PriceProps>;
 
@@ -935,44 +908,15 @@ export declare const PriceStacked: (props: PriceStackedProps) => default_2.JSX.E
 
 export declare type PriceStackedProps = RegularProps_2 | SaleProps_2 | NoPriceProps_2;
 
-declare const PrimaryButton: ({ children, onClick, type, form, icon, iconPosition }: PrimaryButtonProps) => default_2.JSX.Element;
+declare const PrimaryButton: ({ children, onClick, type, form, icon, iconPosition }: SheetPrimaryButtonProps) => default_2.JSX.Element;
 
 declare const PrimaryButton_2: FC<Props_2>;
 
-declare interface PrimaryButtonProps extends BottomSheetButtonsBaseProps {
-    /** Callback, which is triggered when the button is activated. */
-    onClick?: (event: default_2.MouseEvent<HTMLButtonElement>) => void;
-    /** The type attribute of the button. */
-    type?: ButtonTypeAttribute;
-    /** Standard HTML attribute. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form">MDN, Button Element - form</a>. */
-    form?: string;
-    /** If `true`, the button will be disabled and thus not interactable.  */
-    disabled?: boolean;
-    /** If `true`, a loading spinner will be shown instead of the content. */
-    loading?: boolean;
-}
+declare const PrimaryButton_3: ({ children, onClick, type, form, icon, iconPosition }: SheetPrimaryButtonProps_2) => default_2.JSX.Element;
 
 declare type Props = ControlledInputProps | UncontrolledInputProps;
 
 declare interface Props_10 {
-    /** The name of the step. */
-    children: string;
-    /** The href attribute for the step link. */
-    href?: string;
-}
-
-declare interface Props_11 {
-    /** Unique identifier for the tab item. With its help the tab item can be referenced programmatically. */
-    value: string;
-    /** The label of the tab item. */
-    label: string;
-    /** The sublabel of the tab item. */
-    subLabel?: string;
-    /** The icon of the tab item. */
-    icon?: ReactNode;
-}
-
-declare interface Props_12 {
     /** The unique identifier for the tab content. With its help the tab content can be referenced programmatically. */
     value: string;
     /** The content of the tab content. */
@@ -1032,16 +976,24 @@ declare interface Props_7 {
 }
 
 declare interface Props_8 {
-    /** The text content. */
+    /** The name of the step. */
     children: string;
+    /** The href attribute for the step link. */
+    href?: string;
 }
 
 declare interface Props_9 {
-    /** The content of the side sheet. */
-    children: ReactNode;
+    /** Unique identifier for the tab item. With its help the tab item can be referenced programmatically. */
+    value: string;
+    /** The label of the tab item. */
+    label: string;
+    /** The sublabel of the tab item. */
+    subLabel?: string;
+    /** The icon of the tab item. */
+    icon?: ReactNode;
 }
 
-export declare const RadioGroup: FC<RadioGroupProps> & Subcomponents_6;
+export declare const RadioGroup: FC<RadioGroupProps> & Subcomponents_5;
 
 declare const RadioGroupItem: ({ value, label, additional, suffix }: Props_5) => default_2.JSX.Element;
 
@@ -1114,19 +1066,21 @@ export declare interface ScrollAreaProps {
     verticalOnly?: boolean;
     /** A reference to the viewport element of the scroll area. */
     ref?: Ref<HTMLDivElement>;
+    /** If `true`, the padding at the right side will be removed. */
+    noPadding?: boolean;
 }
 
 export declare const SearchField: FC<SearchFieldProps>;
 
 export declare type SearchFieldProps = ControlledInputProps_6 | UncontrolledInputProps_6;
 
-declare const SecondaryButton: ({ children, icon, iconPosition }: SecondaryButtonProps) => default_2.JSX.Element;
+declare const SecondaryButton: ({ children, icon, iconPosition }: SheetButtonProps) => default_2.JSX.Element;
 
 declare const SecondaryButton_2: FC<Props_3>;
 
-declare type SecondaryButtonProps = BottomSheetButtonsBaseProps;
+declare const SecondaryButton_3: ({ children, icon, iconPosition }: SheetButtonProps_2) => default_2.JSX.Element;
 
-export declare const Select: FC<SelectProps> & Subcomponents_7;
+export declare const Select: FC<SelectProps> & Subcomponents_6;
 
 declare const SelectItem: FC<Props_6>;
 
@@ -1134,6 +1088,130 @@ export declare type SelectProps = ControlledSelectProps | UncontrolledSelectProp
 
 declare type SeverityLevel = (typeof levels)[number];
 
+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;
+    /** The position of the icon relative to the content. */
+    iconPosition?: "start" | "end";
+}
+
+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;
+    /** The position of the icon relative to the content. */
+    iconPosition?: "start" | "end";
+}
+
+declare interface SheetButtonSectionProps {
+    /** Primary and secondary buttons should be placed inside this section. */
+    children: ReactNode;
+}
+
+declare interface SheetButtonSectionProps_2 {
+    /** Primary and secondary buttons should be placed inside this section. */
+    children: ReactNode;
+}
+
+declare interface SheetContentProps {
+    /** The content of the content section. */
+    children: ReactNode;
+    /** If `true`, the horizontal padding around the content will be removed. */
+    disableHorizontalPadding?: boolean;
+}
+
+declare interface SheetContentProps_2 {
+    /** The content of the content section. */
+    children: ReactNode;
+    /** If `true`, the horizontal padding around the content will be removed. */
+    disableHorizontalPadding?: boolean;
+}
+
+declare interface SheetPrimaryButtonProps extends SheetButtonProps {
+    /** Callback, which is triggered when the button is activated. */
+    onClick?: (event: default_2.MouseEvent<HTMLButtonElement>) => void;
+    /** The type attribute of the button. */
+    type?: ButtonTypeAttribute;
+    /** Standard HTML attribute. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form">MDN, Button Element - form</a>. */
+    form?: string;
+    /** If `true`, the button will be disabled and thus not interactable.  */
+    disabled?: boolean;
+    /** If `true`, a loading spinner will be shown instead of the content. */
+    loading?: boolean;
+}
+
+declare interface SheetPrimaryButtonProps_2 extends SheetButtonProps_2 {
+    /** Callback, which is triggered when the button is activated. */
+    onClick?: (event: default_2.MouseEvent<HTMLButtonElement>) => void;
+    /** The type attribute of the button. */
+    type?: ButtonTypeAttribute;
+    /** Standard HTML attribute. Read more on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form">MDN, Button Element - form</a>. */
+    form?: string;
+    /** If `true`, the button will be disabled and thus not interactable.  */
+    disabled?: boolean;
+    /** If `true`, a loading spinner will be shown instead of the content. */
+    loading?: boolean;
+}
+
+declare interface SheetProps {
+    /** All of the subcomponents should be placed inside this property. */
+    children: ReactNode;
+    /** Toggles the visibility of the sheet. Should be used in conjunction with the `onClose` property. */
+    isOpen: boolean;
+    /** Callback function, that is triggered when the sheet is attempted to be closed. `isOpen` should be set appropriately. */
+    onClose: () => void;
+    /** Callback to execute when clicking back icon. */
+    onBack?: () => void;
+    /** The z-index of the sheet.. */
+    zIndex?: number;
+}
+
+declare interface SheetProps_2 {
+    /** All of the subcomponents should be placed inside this property. */
+    children: ReactNode;
+    /** Toggles the visibility of the sheet. Should be used in conjunction with the `onClose` property. */
+    isOpen: boolean;
+    /** Callback function, that is triggered when the sheet is attempted to be closed. `isOpen` should be set appropriately. */
+    onClose: () => void;
+    /** Callback to execute when clicking back icon. */
+    onBack?: () => void;
+    /** The z-index of the sheet.. */
+    zIndex?: number;
+}
+
+declare interface SheetSubcomponents {
+    Title: typeof Title;
+    Content: typeof Content;
+    ButtonSection: typeof ButtonSection;
+    PrimaryButton: typeof PrimaryButton;
+    SecondaryButton: typeof SecondaryButton;
+}
+
+declare interface SheetSubcomponents_2 {
+    Title: typeof Title_3;
+    Content: typeof Content_3;
+    ButtonSection: typeof ButtonSection_2;
+    PrimaryButton: typeof PrimaryButton_3;
+    SecondaryButton: typeof SecondaryButton_3;
+}
+
+declare interface SheetTitleProps {
+    /** The text content. */
+    children: string;
+    /** The heading level for the title. */
+    level?: "h2" | "h3" | "h4";
+}
+
+declare interface SheetTitleProps_2 {
+    /** The text content. */
+    children: string;
+    /** The heading level for the title. */
+    level?: "h2" | "h3" | "h4";
+}
+
 export declare const ShowMoreList: FC<ShowMoreListProps> & {
     Item: typeof ShowMoreListItem;
 };
@@ -1179,23 +1257,11 @@ export declare interface ShowMoreListProps {
     onChange?: (shownItems: number, nextShownItems: number) => void;
 }
 
-export declare const SideSheet: FC<SideSheetProps> & Subcomponents_8;
+export declare const SideSheet: FC<SideSheetProps> & SheetSubcomponents_2;
 
-export declare interface SideSheetProps {
-    /** The content to be displayed inside the modal. */
-    children: ReactNode;
-    /** The initial state open or closed */
-    isOpen: boolean;
+export declare interface SideSheetProps extends SheetProps_2 {
     /** When set to false, interaction with outside elements will be disabled and only dialog content will be visible to screen readers. */
     modeless?: boolean;
-    /** Callback to execute when Sheet is closed */
-    onClose?: () => void;
-    /** Callback to execute when clicking back icon */
-    onBack?: () => void;
-    /** The z-index of the modal */
-    zIndex?: number;
-    /** Boolean describing if the wrapper of the content has horizontal padding */
-    disableHorizontalPadding?: boolean;
     /** Makes the Sheet of 400px fixed or able to expand up to 600px depending on the content */
     hasDynamicWidth?: boolean;
 }
@@ -1236,7 +1302,7 @@ declare interface SpinnerProps {
     edgeLength?: string;
 }
 
-export declare const StepNavi: FC<StepNaviProps> & Subcomponents_9;
+export declare const StepNavi: FC<StepNaviProps> & Subcomponents_7;
 
 export declare interface StepNaviProps {
     /** StepNavi.Step subcomponents should be placed here. */
@@ -1249,7 +1315,7 @@ export declare interface StepNaviProps {
     ariaLabel?: string;
 }
 
-declare const StepNaviStep: FC<Props_10>;
+declare const StepNaviStep: FC<Props_8>;
 
 declare interface SubComponents {
     Slides: typeof Slides;
@@ -1258,55 +1324,40 @@ declare interface SubComponents {
 }
 
 declare interface Subcomponents {
-    Header: typeof Header;
-    Content: typeof Content;
-    PrimaryButton: typeof PrimaryButton;
-    SecondaryButton: typeof SecondaryButton;
-    ButtonSection: typeof ButtonSection;
-}
-
-declare interface Subcomponents_10 {
-    Item: typeof TabGroupItem;
-    Content: typeof TabGroupContent;
-    List: typeof TabGroupList;
-}
-
-declare interface Subcomponents_2 {
     Slide: typeof SplideSlide;
 }
 
-declare interface Subcomponents_3 {
+declare interface Subcomponents_2 {
     Item: typeof CheckboxGroupItem;
 }
 
-declare interface Subcomponents_4 {
-    Title: typeof Title;
+declare interface Subcomponents_3 {
+    Title: typeof Title_2;
     Content: typeof Content_2;
     PrimaryButton: typeof PrimaryButton_2;
     SecondaryButton: typeof SecondaryButton_2;
 }
 
-declare interface Subcomponents_5 {
+declare interface Subcomponents_4 {
     Item: typeof ListItem;
 }
 
-declare interface Subcomponents_6 {
+declare interface Subcomponents_5 {
     Item: typeof RadioGroupItem;
 }
 
-declare interface Subcomponents_7 {
+declare interface Subcomponents_6 {
     Item: typeof SelectItem;
 }
 
-declare interface Subcomponents_8 {
-    Title: typeof Title_2;
-    Content: typeof Content_3;
-    PrimaryButton: typeof PrimaryButton_2;
-    SecondaryButton: typeof SecondaryButton_2;
+declare interface Subcomponents_7 {
+    Step: typeof StepNaviStep;
 }
 
-declare interface Subcomponents_9 {
-    Step: typeof StepNaviStep;
+declare interface Subcomponents_8 {
+    Item: typeof TabGroupItem;
+    Content: typeof TabGroupContent;
+    List: typeof TabGroupList;
 }
 
 declare type SubmitResetVariantProps = AsButton_2 & {
@@ -1324,11 +1375,11 @@ declare interface TabBoxProps extends BaseProps_10 {
     fullWidth?: boolean;
 }
 
-export declare const TabGroup: FC<TabGroupProps> & Subcomponents_10;
+export declare const TabGroup: FC<TabGroupProps> & Subcomponents_8;
 
-declare const TabGroupContent: FC<Props_12>;
+declare const TabGroupContent: FC<Props_10>;
 
-declare const TabGroupItem: FC<Props_11>;
+declare const TabGroupItem: FC<Props_9>;
 
 declare const TabGroupList: FC<TabGroupListProps>;
 
@@ -1533,10 +1584,6 @@ export declare const tailwindConfig: {
     };
     safelist: string[];
     important: true;
-    plugins: {
-        handler: PluginCreator;
-        config?: Partial<Config> | undefined;
-    }[];
 };
 
 export declare const Textarea: FC<TextareaProps>;
@@ -1596,9 +1643,11 @@ export declare interface ThemeForcerProps {
     inline?: boolean;
 }
 
-declare const Title: FC<TitleProps>;
+declare const Title: ({ children, level }: SheetTitleProps) => default_2.JSX.Element;
+
+declare const Title_2: FC<TitleProps>;
 
-declare const Title_2: ({ children }: Props_8) => string;
+declare const Title_3: ({ children, level }: SheetTitleProps_2) => default_2.JSX.Element;
 
 declare interface TitleProps {
     /** The title to display in the dialog */