bonprix-design-system 0.69.0 → 0.69.2

package/dist/components/BottomSheet/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { type IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport { TitleLevel, usePrefersReducedMotion, ZIndexContext } from \"@bonprix-ds/utils\";\nimport React, { ComponentProps, ElementType, FC, ReactNode, Ref, useId } from \"react\";\nimport { Sheet } from \"react-modal-sheet\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Button } from \"@components/Buttons\";\nimport { useInnerOpen } from \"@hooks\";\nimport { backdrop } from \"@utils/tailwindVariants\";\n\nimport BottomSheetContext from \"./BottomSheetContext\";\nimport useConsumeBottomSheet from \"./useConsumeBottomSheet\";\nimport useCreateBottomSheet from \"./useCreateBottomSheet\";\n\nconst generateClasses = tv({\n  slots: {\n    root: \"preflight block\",\n    container: \"shadow-none rounded-none bg-clr-bg-modal max-h-[calc(100%-4rem)]\",\n    header: \"px-4 py-3\",\n    titleAndIcons: \"flex gap-2 items-center touch-pan-down\",\n    contentWrapper: \"flex flex-col w-full\",\n    content: [\n      \"typography-body1 text-clr-primary\",\n      // scroller must be a flexbox to fix scrollbar\n      // scroller needs some padding to not cut off the focus-ring\n      \"*:flex *:-mx-0.5 *:px-0.5\",\n      // scroller must set min-h-0 in order to make scrolling work inside our flex context\n      \"*:min-h-0\",\n    ],\n    dragHandleContainer: \"h-6 flex justify-center items-center shrink-0\",\n    dragHandle: \"h-1 w-8 rounded-full bg-clr-on-bg-low\",\n    backdrop: backdrop(),\n    scrollArea: \"scroll-area relative\",\n  },\n  variants: {\n    disableHorizontalPadding: {\n      false: { scrollArea: \"px-4\" },\n      true: \"\",\n    },\n  },\n});\n\ninterface SheetProps {\n  /** All of the subcomponents should be placed inside this property. */\n  children: ReactNode;\n  /** Toggles the visibility of the sheet. Should be used in conjunction with the `onClose` property. */\n  isOpen: boolean;\n  /** Callback function, that is triggered when the sheet is attempted to be closed.\n   *\n   * It will be called in following cases:\n   * - Click on backdrop\n   * - Swipe down to close\n   * - Click on \"close\" icon button in the upper-right corner\n   * - Click on any button (PrimaryButton or SecondaryButton)\n   *\n   * Should be used in conjunction with `isOpen`. */\n  onClose: () => void;\n  /** Callback to execute when clicking back icon. */\n  onBack?: () => void;\n  /** The z-index of the sheet.. */\n  zIndex?: number;\n}\n\ninterface SheetTitleProps {\n  /** The text content. */\n  children: string;\n  /** An optional subline that is displayed right below the title. */\n  subline?: string;\n  /** The heading level for the title. */\n  level?: TitleLevel;\n}\n\ninterface SheetButtonSectionProps {\n  /** Primary and secondary buttons should be placed inside this section. */\n  children: ReactNode;\n}\n\ninterface SheetContentProps {\n  /** The content of the content section. */\n  children: ReactNode;\n  /** If `true`, the horizontal padding around the content will be removed. */\n  disableHorizontalPadding?: boolean;\n}\n\ninterface SheetButtonBaseProps {\n  /** The label of the button. */\n  children: string;\n  /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */\n  icon?: IconType;\n  /** The position of the icon relative to the content. */\n  iconPosition?: \"start\" | \"end\";\n}\n\nexport type SheetButtonProps<C extends ElementType> = SheetButtonBaseProps & {\n  /** The semantic component to render the Button. Preferrably `\"button\"`. Defaults to `\"button\"`. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, keyof SheetButtonBaseProps | \"component\">;\n\ntype SheetPrimaryButtonProps<C extends ElementType> = SheetButtonProps<C> & {\n  /** If `true`, a loading spinner will be shown instead of the content. */\n  loading?: boolean;\n};\n\ninterface SheetSubcomponents {\n  Title: typeof Title;\n  Content: typeof Content;\n  ButtonSection: typeof ButtonSection;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n}\n\nexport interface Props extends SheetProps {\n  /** A reference to the root element of the sheet. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst BottomSheet: FC<Props> & SheetSubcomponents = ({ children, isOpen, onClose, onBack, zIndex = 2, ref }) => {\n  // TODO: add aria-modal = true once we implemented the dialog pattern fully and i.e. manage the focus\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { root, container, dragHandleContainer, dragHandle, content, contentWrapper, backdrop } = generateClasses();\n  const { isShown, scrollRef, scrollPosition } = useCreateBottomSheet({ isOpen });\n\n  // When \"middle\" or \"bottom\", dragging is disabled to allow for regular scrolling.\n  // When at \"top\", we need to enable drag to close. When `undefined`, the element is not scrollable and can be dragged, too.\n  const disableDrag = scrollPosition === \"middle\" || scrollPosition === \"bottom\";\n\n  const { innerOpen } = useInnerOpen(isShown);\n\n  const titleId = useId();\n\n  return (\n    <Sheet\n      isOpen={innerOpen}\n      onClose={onClose}\n      className={root()}\n      detent=\"content\"\n      data-bpds=\"bottom-sheet\"\n      prefersReducedMotion={prefersReducedMotion}\n      // @ts-expect-error setting custom properties is not recognized by React.CSSProperties\n      // This is consumed by the inner ScrollArea to fix drag to close.\n      style={{ \"--touch-action\": disableDrag ? \"initial\" : \"pan-down\" }}\n      role=\"dialog\"\n      avoidKeyboard={false}\n      aria-labelledby={titleId}\n    >\n      <Sheet.Container className={container()} ref={ref} style={{ zIndex }}>\n        <Sheet.Header unstyled className={dragHandleContainer()}>\n          <Sheet.DragIndicator unstyled className={dragHandle()} />\n        </Sheet.Header>\n        <ZIndexContext.Provider value={10000}>\n          <BottomSheetContext.Provider value={{ scrollRef, scrollPosition, onClose, onBack, titleId }}>\n            <Sheet.Content\n              className={content()}\n              // disable default scrolling\n              disableScroll\n              // Dragging is still managed by `Sheet.Content` so we control it here\n              disableDrag={disableDrag}\n              // Apply keyboard height as padding bottom to keep content above the keyboard\n              style={{ paddingBottom: \"max(var(--keyboard-inset-height, 0rem), var(--app-safe-area-inset-bottom, 1rem))\" }}\n            >\n              <div className={contentWrapper()}>{children}</div>\n            </Sheet.Content>\n          </BottomSheetContext.Provider>\n        </ZIndexContext.Provider>\n      </Sheet.Container>\n      {/* TODO: Deactivate the animation, when the user prefers reduced motion: https://github.com/Temzasse/react-modal-sheet/issues/227 */}\n      <Sheet.Backdrop aria-label=\"Bottom Sheet schließen\" onTap={onClose} className={backdrop()} style={{ zIndex: zIndex - 1 }} />\n    </Sheet>\n  );\n};\n\nexport default BottomSheet;\n\nconst Title = ({ children, subline, level = \"h3\" }: SheetTitleProps) => {\n  const { onBack, onClose, titleId } = useConsumeBottomSheet();\n  const { header, titleAndIcons } = generateClasses();\n  return (\n    <div className={header()}>\n      <div className={titleAndIcons()}>\n        {onBack && <IconButton onClick={onBack} icon=\"arrow-left\" label=\"Zurück\" variant=\"tertiary\" size=\"small\" />}\n        <Typography variant=\"bonprix-h6\" component={level} className=\"grow line-clamp-2\" id={titleId}>\n          {children}\n        </Typography>\n        <IconButton onClick={onClose} icon=\"closer\" label=\"Schließen\" variant=\"tertiary\" size=\"small\" />\n      </div>\n      {subline && <Typography>{subline}</Typography>}\n    </div>\n  );\n};\n\nconst Content = ({ children, disableHorizontalPadding = false }: SheetContentProps) => {\n  const { scrollRef: setScrollRef } = useConsumeBottomSheet();\n  const { scrollArea } = generateClasses({ disableHorizontalPadding });\n\n  return (\n    <div ref={setScrollRef} className={scrollArea()} data-bpds-disable-horizontal-padding={disableHorizontalPadding}>\n      {children}\n    </div>\n  );\n};\n\nconst ButtonSection = ({ children }: SheetButtonSectionProps) => {\n  return <div className=\"button-section w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down\">{children}</div>;\n};\n\nconst PrimaryButton = <C extends ElementType>({\n  children,\n  icon,\n  iconPosition,\n  loading,\n  component = \"button\" as C,\n  ...props\n}: SheetPrimaryButtonProps<C>) => {\n  const Component: ElementType = component;\n  const { onClick, type = \"button\", ...otherProps } = props;\n  const { onClose } = useConsumeBottomSheet();\n  const handleClick = (event: React.MouseEvent) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    onClick?.(event);\n    onClose();\n  };\n  return (\n    <Button\n      component={Component}\n      {...otherProps}\n      variant=\"primary\"\n      onClick={handleClick}\n      type={type}\n      icon={icon}\n      iconPosition={iconPosition}\n      size=\"large\"\n      loading={loading}\n    >\n      {children}\n    </Button>\n  );\n};\n\nconst SecondaryButton = <C extends ElementType>({\n  children,\n  icon,\n  iconPosition,\n  component = \"button\" as C,\n  ...props\n}: SheetButtonProps<C>) => {\n  const Component: ElementType = component;\n  const { onClose } = useConsumeBottomSheet();\n  return (\n    <Button\n      component={Component}\n      {...props}\n      variant=\"secondary\"\n      type=\"button\"\n      onClick={onClose}\n      icon={icon}\n      iconPosition={iconPosition}\n      size=\"large\"\n    >\n      {children}\n    </Button>\n  );\n};\n\nBottomSheet.displayName = \"BottomSheet\";\n\nBottomSheet.Title = Title;\nBottomSheet.Content = Content;\nBottomSheet.ButtonSection = ButtonSection;\nBottomSheet.PrimaryButton = PrimaryButton;\nBottomSheet.SecondaryButton = SecondaryButton;\n"],"mappings":"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"}
+{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { type IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport { TitleLevel, usePrefersReducedMotion, ZIndexContext } from \"@bonprix-ds/utils\";\nimport React, { ComponentProps, ElementType, FC, ReactNode, RefObject, useId } from \"react\";\nimport { Sheet } from \"react-modal-sheet\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Button } from \"@components/Buttons\";\nimport { useInnerOpen } from \"@hooks\";\nimport { backdrop } from \"@utils/tailwindVariants\";\n\nimport BottomSheetContext from \"./BottomSheetContext\";\nimport useConsumeBottomSheet from \"./useConsumeBottomSheet\";\nimport useCreateBottomSheet from \"./useCreateBottomSheet\";\n\nconst generateClasses = tv({\n  slots: {\n    root: \"preflight block\",\n    container: \"shadow-none rounded-none bg-clr-bg-modal max-h-[calc(100%-4rem)]\",\n    header: \"px-4 py-3\",\n    titleAndIcons: \"flex gap-2 items-center touch-pan-down\",\n    contentWrapper: \"flex flex-col w-full\",\n    content: [\n      \"typography-body1 text-clr-primary\",\n      // scroller must be a flexbox to fix scrollbar\n      // scroller needs some padding to not cut off the focus-ring\n      \"*:flex *:-mx-0.5 *:px-0.5\",\n      // scroller must set min-h-0 in order to make scrolling work inside our flex context\n      \"*:min-h-0\",\n    ],\n    dragHandleContainer: \"h-6 flex justify-center items-center shrink-0\",\n    dragHandle: \"h-1 w-8 rounded-full bg-clr-on-bg-low\",\n    backdrop: backdrop(),\n    scrollArea: \"scroll-area relative\",\n  },\n  variants: {\n    disableHorizontalPadding: {\n      false: { scrollArea: \"px-4\" },\n      true: \"\",\n    },\n  },\n});\n\ninterface SheetProps {\n  /** All of the subcomponents should be placed inside this property. */\n  children: ReactNode;\n  /** Toggles the visibility of the sheet. Should be used in conjunction with the `onClose` property. */\n  isOpen: boolean;\n  /** Callback function, that is triggered when the sheet is attempted to be closed.\n   *\n   * It will be called in following cases:\n   * - Click on backdrop\n   * - Swipe down to close\n   * - Click on \"close\" icon button in the upper-right corner\n   * - Click on any button (PrimaryButton or SecondaryButton)\n   *\n   * Should be used in conjunction with `isOpen`. */\n  onClose: () => void;\n  /** Callback to execute when clicking back icon. */\n  onBack?: () => void;\n  /** The z-index of the sheet.. */\n  zIndex?: number;\n}\n\ninterface SheetTitleProps {\n  /** The text content. */\n  children: string;\n  /** An optional subline that is displayed right below the title. */\n  subline?: string;\n  /** The heading level for the title. */\n  level?: TitleLevel;\n}\n\ninterface SheetButtonSectionProps {\n  /** Primary and secondary buttons should be placed inside this section. */\n  children: ReactNode;\n}\n\ninterface SheetContentProps {\n  /** The content of the content section. */\n  children: ReactNode;\n  /** If `true`, the horizontal padding around the content will be removed. */\n  disableHorizontalPadding?: boolean;\n}\n\ninterface SheetButtonBaseProps {\n  /** The label of the button. */\n  children: string;\n  /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */\n  icon?: IconType;\n  /** The position of the icon relative to the content. */\n  iconPosition?: \"start\" | \"end\";\n}\n\nexport type SheetButtonProps<C extends ElementType> = SheetButtonBaseProps & {\n  /** The semantic component to render the Button. Preferrably `\"button\"`. Defaults to `\"button\"`. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, keyof SheetButtonBaseProps | \"component\">;\n\ntype SheetPrimaryButtonProps<C extends ElementType> = SheetButtonProps<C> & {\n  /** If `true`, a loading spinner will be shown instead of the content. */\n  loading?: boolean;\n};\n\ninterface SheetSubcomponents {\n  Title: typeof Title;\n  Content: typeof Content;\n  ButtonSection: typeof ButtonSection;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n}\n\nexport interface Props extends SheetProps {\n  /** A reference to the root element of the sheet. */\n  ref?: RefObject<HTMLDivElement>;\n}\n\nconst BottomSheet: FC<Props> & SheetSubcomponents = ({ children, isOpen, onClose, onBack, zIndex = 2, ref }) => {\n  // TODO: add aria-modal = true once we implemented the dialog pattern fully and i.e. manage the focus\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { root, container, dragHandleContainer, dragHandle, content, contentWrapper, backdrop } = generateClasses();\n  const { isShown, scrollRef, scrollPosition } = useCreateBottomSheet({ isOpen });\n\n  // When \"middle\" or \"bottom\", dragging is disabled to allow for regular scrolling.\n  // When at \"top\", we need to enable drag to close. When `undefined`, the element is not scrollable and can be dragged, too.\n  const disableDrag = scrollPosition === \"middle\" || scrollPosition === \"bottom\";\n\n  const { innerOpen } = useInnerOpen(isShown);\n\n  const titleId = useId();\n\n  return (\n    <Sheet\n      isOpen={innerOpen}\n      onClose={onClose}\n      className={root()}\n      detent=\"content\"\n      data-bpds=\"bottom-sheet\"\n      prefersReducedMotion={prefersReducedMotion}\n      // @ts-expect-error setting custom properties is not recognized by React.CSSProperties\n      // This is consumed by the inner ScrollArea to fix drag to close.\n      style={{ \"--touch-action\": disableDrag ? \"initial\" : \"pan-down\" }}\n      role=\"dialog\"\n      avoidKeyboard={false}\n      aria-labelledby={titleId}\n    >\n      <Sheet.Container className={container()} ref={ref} style={{ zIndex }}>\n        <Sheet.Header unstyled className={dragHandleContainer()}>\n          <Sheet.DragIndicator unstyled className={dragHandle()} />\n        </Sheet.Header>\n        <ZIndexContext.Provider value={10000}>\n          <BottomSheetContext.Provider value={{ scrollRef, scrollPosition, onClose, onBack, titleId }}>\n            <Sheet.Content\n              className={content()}\n              // disable default scrolling\n              disableScroll\n              // Dragging is still managed by `Sheet.Content` so we control it here\n              disableDrag={disableDrag}\n              // Apply keyboard height as padding bottom to keep content above the keyboard\n              style={{ paddingBottom: \"max(var(--keyboard-inset-height, 0rem), var(--app-safe-area-inset-bottom, 1rem))\" }}\n            >\n              <div className={contentWrapper()}>{children}</div>\n            </Sheet.Content>\n          </BottomSheetContext.Provider>\n        </ZIndexContext.Provider>\n      </Sheet.Container>\n      {/* TODO: Deactivate the animation, when the user prefers reduced motion: https://github.com/Temzasse/react-modal-sheet/issues/227 */}\n      <Sheet.Backdrop aria-label=\"Bottom Sheet schließen\" onTap={onClose} className={backdrop()} style={{ zIndex: zIndex - 1 }} />\n    </Sheet>\n  );\n};\n\nexport default BottomSheet;\n\nconst Title = ({ children, subline, level = \"h3\" }: SheetTitleProps) => {\n  const { onBack, onClose, titleId } = useConsumeBottomSheet();\n  const { header, titleAndIcons } = generateClasses();\n  return (\n    <div className={header()}>\n      <div className={titleAndIcons()}>\n        {onBack && <IconButton onClick={onBack} icon=\"arrow-left\" label=\"Zurück\" variant=\"tertiary\" size=\"small\" />}\n        <Typography variant=\"bonprix-h6\" component={level} className=\"grow line-clamp-2\" id={titleId}>\n          {children}\n        </Typography>\n        <IconButton onClick={onClose} icon=\"closer\" label=\"Schließen\" variant=\"tertiary\" size=\"small\" />\n      </div>\n      {subline && <Typography>{subline}</Typography>}\n    </div>\n  );\n};\n\nconst Content = ({ children, disableHorizontalPadding = false }: SheetContentProps) => {\n  const { scrollRef: setScrollRef } = useConsumeBottomSheet();\n  const { scrollArea } = generateClasses({ disableHorizontalPadding });\n\n  return (\n    <div ref={setScrollRef} className={scrollArea()} data-bpds-disable-horizontal-padding={disableHorizontalPadding}>\n      {children}\n    </div>\n  );\n};\n\nconst ButtonSection = ({ children }: SheetButtonSectionProps) => {\n  return <div className=\"button-section w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down\">{children}</div>;\n};\n\nconst PrimaryButton = <C extends ElementType>({\n  children,\n  icon,\n  iconPosition,\n  loading,\n  component = \"button\" as C,\n  ...props\n}: SheetPrimaryButtonProps<C>) => {\n  const Component: ElementType = component;\n  const { onClick, type = \"button\", ...otherProps } = props;\n  const { onClose } = useConsumeBottomSheet();\n  const handleClick = (event: React.MouseEvent) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    onClick?.(event);\n    onClose();\n  };\n  return (\n    <Button\n      component={Component}\n      {...otherProps}\n      variant=\"primary\"\n      onClick={handleClick}\n      type={type}\n      icon={icon}\n      iconPosition={iconPosition}\n      size=\"large\"\n      loading={loading}\n    >\n      {children}\n    </Button>\n  );\n};\n\nconst SecondaryButton = <C extends ElementType>({\n  children,\n  icon,\n  iconPosition,\n  component = \"button\" as C,\n  ...props\n}: SheetButtonProps<C>) => {\n  const Component: ElementType = component;\n  const { onClose } = useConsumeBottomSheet();\n  return (\n    <Button\n      component={Component}\n      {...props}\n      variant=\"secondary\"\n      type=\"button\"\n      onClick={onClose}\n      icon={icon}\n      iconPosition={iconPosition}\n      size=\"large\"\n    >\n      {children}\n    </Button>\n  );\n};\n\nBottomSheet.displayName = \"BottomSheet\";\n\nBottomSheet.Title = Title;\nBottomSheet.Content = Content;\nBottomSheet.ButtonSection = ButtonSection;\nBottomSheet.PrimaryButton = PrimaryButton;\nBottomSheet.SecondaryButton = SecondaryButton;\n"],"mappings":"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"}

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,4 +1,3 @@
-"use client";
 import "react";
 import { tv as e } from "tailwind-variants";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","names":[],"sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["\"use client\";\n\nimport Icon from \"@bonprix-ds/react-icon\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport React, { ComponentProps, ElementType } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  base: \"preflight flex flex-col gap-1 text-clr-on-bg-high\",\n  slots: {\n    link: \"flex items-center gap-1 group focus:outline-none\",\n    icon: \"w-7 h-7 fill-clr-on-bg-high\",\n    previousPageContainer: \"border border-transparent group-focus:border-clr-primary rounded-sm\",\n    previousPage: [\n      \"typography-body1 pt-0.5 mx-0.5 border-b-2 border-transparent\",\n      \"group-hover:border-clr-primary group-focus:group-hover:border-transparent\",\n    ],\n    header: \"flex gap-x-2 items-baseline flex-wrap\",\n    iconWrapper: \"min-w-7 min-h-7\",\n  },\n});\n\ninterface BaseProps {\n  /** Title of the current page. */\n  currentPageTitle: string;\n  /** Title of the previous page. */\n  previousPageTitle: string;\n  /** URL of the previous page */\n  previousPageUrl: string;\n  /** Will completely hide the title of the current page and the amount of items, if set to `true`. */\n  hideHeader?: boolean;\n  /** Text that should contain the amount of items for the channel or category page. */\n  numberOfItemsText?: string;\n}\n\nexport type Props<C extends ElementType> = BaseProps & {\n  /** The semantic component to render the Breadcrumb's previous page. Preferrably `\"a\"` or something like `Link` from NextJS. Defaults to `\"a\"`. Native props will be passed to this component. */\n  previousPageComponent?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps | \"previousPageComponent\" | \"href\">;\n\nconst Breadcrumb = <C extends ElementType>({\n  currentPageTitle,\n  previousPageTitle,\n  previousPageUrl,\n  hideHeader = false,\n  numberOfItemsText = \"\",\n  previousPageComponent = \"a\" as C,\n  ...previousLinkProps\n}: Props<C>) => {\n  const PreviousPageComponent: ElementType = previousPageComponent;\n  const { base, icon, previousPage, previousPageContainer, link, header, iconWrapper } = generateClasses();\n  return (\n    <div className={base()} data-bpds=\"breadcrumb\" data-bpds-hide-header={hideHeader}>\n      <PreviousPageComponent href={previousPageUrl} className={link()} {...previousLinkProps}>\n        <span className={iconWrapper()}>\n          {/* Preserve size before icon loads to avoid flicker, until the way SVG is loaded changes */}\n          <Icon variant=\"back\" className={icon()} />\n        </span>\n\n        <span className={previousPageContainer()}>\n          <span className={previousPage()}>{previousPageTitle}</span>\n        </span>\n      </PreviousPageComponent>\n      {hideHeader ? null : (\n        <div className={header()}>\n          <Typography variant=\"bonprix-h3\">{currentPageTitle}</Typography>\n          <Typography color=\"on-bg-low\">{numberOfItemsText}</Typography>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;;AAOA,IAAM,IAAkB,EAAG;CACzB,MAAM;CACN,OAAO;EACL,MAAM;EACN,MAAM;EACN,uBAAuB;EACvB,cAAc,CACZ,gEACA,2EACF;EACA,QAAQ;EACR,aAAa;CACf;AACF,CAAC,GAoBK,KAAqC,EACzC,qBACA,sBACA,oBACA,gBAAa,IACb,uBAAoB,IACpB,2BAAwB,KACxB,GAAG,QACW;CACd,IAAM,IAAqC,GACrC,EAAE,SAAM,SAAM,iBAAc,0BAAuB,SAAM,WAAQ,mBAAgB,EAAgB;CACvG,OACE,kBAAC,OAAD;EAAK,WAAW,EAAK;EAAG,aAAU;EAAa,yBAAuB;EAAtE,UAAA,CACE,kBAAC,GAAD;GAAuB,MAAM;GAAiB,WAAW,EAAK;GAAG,GAAI;GAArE,UAAA,CACE,kBAAC,QAAD;IAAM,WAAW,EAAY;IAE3B,UAAA,kBAAC,GAAD;KAAM,SAAQ;KAAO,WAAW,EAAK;IAAI,CAAA;GACrC,CAAA,GAEN,kBAAC,QAAD;IAAM,WAAW,EAAsB;IACrC,UAAA,kBAAC,QAAD;KAAM,WAAW,EAAa;KAAI,UAAA;IAAwB,CAAA;GACtD,CAAA,CACe;EACtB,CAAA,GAAA,IAAa,OACZ,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAvB,UAAA,CACE,kBAAC,GAAD;IAAY,SAAQ;IAAc,UAAA;GAA6B,CAAA,GAC/D,kBAAC,GAAD;IAAY,OAAM;IAAa,UAAA;GAA8B,CAAA,CAC1D;EAEJ,CAAA,CAAA;;AAET"}
+{"version":3,"file":"Breadcrumb.js","names":[],"sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import Icon from \"@bonprix-ds/react-icon\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport React, { ComponentProps, ElementType } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  base: \"preflight flex flex-col gap-1 text-clr-on-bg-high\",\n  slots: {\n    link: \"flex items-center gap-1 group focus:outline-none\",\n    icon: \"w-7 h-7 fill-clr-on-bg-high\",\n    previousPageContainer: \"border border-transparent group-focus:border-clr-primary rounded-sm\",\n    previousPage: [\n      \"typography-body1 pt-0.5 mx-0.5 border-b-2 border-transparent\",\n      \"group-hover:border-clr-primary group-focus:group-hover:border-transparent\",\n    ],\n    header: \"flex gap-x-2 items-baseline flex-wrap\",\n    iconWrapper: \"min-w-7 min-h-7\",\n  },\n});\n\ninterface BaseProps {\n  /** Title of the current page. */\n  currentPageTitle: string;\n  /** Title of the previous page. */\n  previousPageTitle: string;\n  /** URL of the previous page */\n  previousPageUrl: string;\n  /** Will completely hide the title of the current page and the amount of items, if set to `true`. */\n  hideHeader?: boolean;\n  /** Text that should contain the amount of items for the channel or category page. */\n  numberOfItemsText?: string;\n}\n\nexport type Props<C extends ElementType> = BaseProps & {\n  /** The semantic component to render the Breadcrumb's previous page. Preferrably `\"a\"` or something like `Link` from NextJS. Defaults to `\"a\"`. Native props will be passed to this component. */\n  previousPageComponent?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps | \"previousPageComponent\" | \"href\">;\n\nconst Breadcrumb = <C extends ElementType>({\n  currentPageTitle,\n  previousPageTitle,\n  previousPageUrl,\n  hideHeader = false,\n  numberOfItemsText = \"\",\n  previousPageComponent = \"a\" as C,\n  ...previousLinkProps\n}: Props<C>) => {\n  const PreviousPageComponent: ElementType = previousPageComponent;\n  const { base, icon, previousPage, previousPageContainer, link, header, iconWrapper } = generateClasses();\n  return (\n    <div className={base()} data-bpds=\"breadcrumb\" data-bpds-hide-header={hideHeader}>\n      <PreviousPageComponent href={previousPageUrl} className={link()} {...previousLinkProps}>\n        <span className={iconWrapper()}>\n          {/* Preserve size before icon loads to avoid flicker, until the way SVG is loaded changes */}\n          <Icon variant=\"back\" className={icon()} />\n        </span>\n\n        <span className={previousPageContainer()}>\n          <span className={previousPage()}>{previousPageTitle}</span>\n        </span>\n      </PreviousPageComponent>\n      {hideHeader ? null : (\n        <div className={header()}>\n          <Typography variant=\"bonprix-h3\">{currentPageTitle}</Typography>\n          <Typography color=\"on-bg-low\">{numberOfItemsText}</Typography>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;AAKA,IAAM,IAAkB,EAAG;CACzB,MAAM;CACN,OAAO;EACL,MAAM;EACN,MAAM;EACN,uBAAuB;EACvB,cAAc,CACZ,gEACA,2EACF;EACA,QAAQ;EACR,aAAa;CACf;AACF,CAAC,GAoBK,KAAqC,EACzC,qBACA,sBACA,oBACA,gBAAa,IACb,uBAAoB,IACpB,2BAAwB,KACxB,GAAG,QACW;CACd,IAAM,IAAqC,GACrC,EAAE,SAAM,SAAM,iBAAc,0BAAuB,SAAM,WAAQ,mBAAgB,EAAgB;CACvG,OACE,kBAAC,OAAD;EAAK,WAAW,EAAK;EAAG,aAAU;EAAa,yBAAuB;EAAtE,UAAA,CACE,kBAAC,GAAD;GAAuB,MAAM;GAAiB,WAAW,EAAK;GAAG,GAAI;GAArE,UAAA,CACE,kBAAC,QAAD;IAAM,WAAW,EAAY;IAE3B,UAAA,kBAAC,GAAD;KAAM,SAAQ;KAAO,WAAW,EAAK;IAAI,CAAA;GACrC,CAAA,GAEN,kBAAC,QAAD;IAAM,WAAW,EAAsB;IACrC,UAAA,kBAAC,QAAD;KAAM,WAAW,EAAa;KAAI,UAAA;IAAwB,CAAA;GACtD,CAAA,CACe;EACtB,CAAA,GAAA,IAAa,OACZ,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAvB,UAAA,CACE,kBAAC,GAAD;IAAY,SAAQ;IAAc,UAAA;GAA6B,CAAA,GAC/D,kBAAC,GAAD;IAAY,OAAM;IAAa,UAAA;GAA8B,CAAA,CAC1D;EAEJ,CAAA,CAAA;;AAET"}

package/dist/components/Buttons/BadgeIconButton/BadgeIconButton.js

@@ -1,4 +1,3 @@
-"use client";
 import e from "@bonprix-ds/react-icon-button";
 import "react";
 import { tv as t } from "tailwind-variants";

package/dist/components/Buttons/BadgeIconButton/BadgeIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeIconButton.js","names":[],"sources":["../../../../src/components/Buttons/BadgeIconButton/BadgeIconButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport React, { ComponentProps, ElementType } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\ninterface BaseProps {\n  /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */\n  icon: IconType;\n  /** An accessible label of the icon button. */\n  label: string;\n  /** A number that is shown in the badge. It is quantitatively related to the context of the button. If the amount is zero, no badge will be shown. If the amount is more then 99, then the displayed value will be capped to \"99+\" */\n  amount?: number;\n}\n\nexport type Props<C extends ElementType> = BaseProps & {\n  /** The semantic component to render the BadgeIconButton. Preferrably `\"button\"`, `\"a\"` or something like `Link` from NextJS. Defaults to `\"button\"`. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps | \"component\">;\n\nconst generateClasses = tv({\n  base: \"preflight relative inline-block w-fit\",\n  slots: {\n    counter:\n      \"typography-body2 text-clr-on-primary-high absolute flex px-[0.3125rem] bg-clr-primary min-w-4 h-4 rounded-full start-6 top-1 pointer-events-none\",\n  },\n});\n\nconst BadgeIconButton = <C extends ElementType = \"button\">({ amount = 0, label, component = \"button\" as C, ...props }: Props<C>) => {\n  const Component: ElementType = component;\n  const badgeVisible = amount > 0;\n  const SRlabel = badgeVisible ? label.replace(/(\\s)*\\.?(\\s)*$/, `. ${amount} artikel`) : label;\n  const badgeCounter = amount > 99 ? \"99+\" : amount;\n  const { base, counter } = generateClasses();\n  return (\n    <span className={base()} data-bpds=\"badge-icon-button\" data-bpds-amount={amount}>\n      <IconButton {...props} component={Component} label={SRlabel} variant=\"tertiary\" hasPadding />\n      {badgeVisible && <span className={counter()}>{badgeCounter}</span>}\n    </span>\n  );\n};\nexport default BadgeIconButton;\n"],"mappings":";;;;;;AAqBA,IAAM,IAAkB,EAAG;CACzB,MAAM;CACN,OAAO,EACL,SACE,mJACJ;AACF,CAAC,GAEK,KAAqD,EAAE,YAAS,GAAG,UAAO,eAAY,UAAe,GAAG,QAAsB;CAClI,IAAM,IAAyB,GACzB,IAAe,IAAS,GACxB,IAAU,IAAe,EAAM,QAAQ,kBAAkB,KAAK,EAAO,SAAS,IAAI,GAClF,IAAe,IAAS,KAAK,QAAQ,GACrC,EAAE,SAAM,eAAY,EAAgB;CAC1C,OACE,kBAAC,QAAD;EAAM,WAAW,EAAK;EAAG,aAAU;EAAoB,oBAAkB;EAAzE,UAAA,CACE,kBAAC,GAAD;GAAY,GAAI;GAAO,WAAW;GAAW,OAAO;GAAS,SAAQ;GAAW,YAAA;EAAY,CAAA,GAC3F,KAAgB,kBAAC,QAAD;GAAM,WAAW,EAAQ;GAAI,UAAA;EAAmB,CAAA,CAC7D;;AAEV"}
+{"version":3,"file":"BadgeIconButton.js","names":[],"sources":["../../../../src/components/Buttons/BadgeIconButton/BadgeIconButton.tsx"],"sourcesContent":["import { IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport React, { ComponentProps, ElementType } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\ninterface BaseProps {\n  /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */\n  icon: IconType;\n  /** An accessible label of the icon button. */\n  label: string;\n  /** A number that is shown in the badge. It is quantitatively related to the context of the button. If the amount is zero, no badge will be shown. If the amount is more then 99, then the displayed value will be capped to \"99+\" */\n  amount?: number;\n}\n\nexport type Props<C extends ElementType> = BaseProps & {\n  /** The semantic component to render the BadgeIconButton. Preferrably `\"button\"`, `\"a\"` or something like `Link` from NextJS. Defaults to `\"button\"`. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps | \"component\">;\n\nconst generateClasses = tv({\n  base: \"preflight relative inline-block w-fit\",\n  slots: {\n    counter:\n      \"typography-body2 text-clr-on-primary-high absolute flex px-[0.3125rem] bg-clr-primary min-w-4 h-4 rounded-full start-6 top-1 pointer-events-none\",\n  },\n});\n\nconst BadgeIconButton = <C extends ElementType = \"button\">({ amount = 0, label, component = \"button\" as C, ...props }: Props<C>) => {\n  const Component: ElementType = component;\n  const badgeVisible = amount > 0;\n  const SRlabel = badgeVisible ? label.replace(/(\\s)*\\.?(\\s)*$/, `. ${amount} artikel`) : label;\n  const badgeCounter = amount > 99 ? \"99+\" : amount;\n  const { base, counter } = generateClasses();\n  return (\n    <span className={base()} data-bpds=\"badge-icon-button\" data-bpds-amount={amount}>\n      <IconButton {...props} component={Component} label={SRlabel} variant=\"tertiary\" hasPadding />\n      {badgeVisible && <span className={counter()}>{badgeCounter}</span>}\n    </span>\n  );\n};\nexport default BadgeIconButton;\n"],"mappings":";;;;;AAmBA,IAAM,IAAkB,EAAG;CACzB,MAAM;CACN,OAAO,EACL,SACE,mJACJ;AACF,CAAC,GAEK,KAAqD,EAAE,YAAS,GAAG,UAAO,eAAY,UAAe,GAAG,QAAsB;CAClI,IAAM,IAAyB,GACzB,IAAe,IAAS,GACxB,IAAU,IAAe,EAAM,QAAQ,kBAAkB,KAAK,EAAO,SAAS,IAAI,GAClF,IAAe,IAAS,KAAK,QAAQ,GACrC,EAAE,SAAM,eAAY,EAAgB;CAC1C,OACE,kBAAC,QAAD;EAAM,WAAW,EAAK;EAAG,aAAU;EAAoB,oBAAkB;EAAzE,UAAA,CACE,kBAAC,GAAD;GAAY,GAAI;GAAO,WAAW;GAAW,OAAO;GAAS,SAAQ;GAAW,YAAA;EAAY,CAAA,GAC3F,KAAgB,kBAAC,QAAD;GAAM,WAAW,EAAQ;GAAI,UAAA;EAAmB,CAAA,CAC7D;;AAEV"}

package/dist/components/Buttons/Button/Button.js

@@ -1,4 +1,3 @@
-"use client";
 import "react";
 import { jsx as e } from "react/jsx-runtime";
 import { BaseButton as t } from "@bonprix-ds/internal-components";

package/dist/components/Buttons/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../../src/components/Buttons/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { BaseButton } from \"@bonprix-ds/internal-components\";\nimport type { IconType } from \"@bonprix-ds/react-icon\";\nimport type { ButtonSize } from \"@bonprix-ds/utils\";\nimport React, { ComponentProps, ElementType } from \"react\";\n\ninterface BaseProps {\n  /** The visible content of the component. */\n  children: string;\n  /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */\n  icon?: IconType;\n  /** The position of the icon relative to the content. */\n  iconPosition?: \"start\" | \"end\";\n  /**  If true, the width of the component will shrink to the width of the content. */\n  contentWidth?: boolean;\n  /** The variant of the button. Choose one depending on the type and desired prominence.  */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /** Size of the button. */\n  size?: Exclude<ButtonSize, \"small\">;\n  /** If `true`, a loading spinner will be shown instead of the content. Only usable when the property `component` is set to `button`. */\n  loading?: boolean;\n}\n\nexport type Props<C extends ElementType> = BaseProps & {\n  /** The semantic component to render the Button. Preferrably `\"button\"`, `\"a\"` or something like `Link` from NextJS. Defaults to `\"button\"`. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps | \"component\">;\n\nconst Button = <C extends ElementType>({ component = \"button\" as C, children, ...props }: Props<C>) => {\n  const Component: ElementType = component;\n  return (\n    <BaseButton {...props} component={Component} componentName=\"button\">\n      {children}\n    </BaseButton>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;AA6BA,IAAM,KAAiC,EAAE,eAAY,UAAe,aAAU,GAAG,QAAsB;CACrG,IAAM,IAAyB;CAC/B,OACE,kBAAC,GAAD;EAAY,GAAI;EAAO,WAAW;EAAW,eAAc;EACxD;CACS,CAAA;AAEhB"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../../src/components/Buttons/Button/Button.tsx"],"sourcesContent":["import { BaseButton } from \"@bonprix-ds/internal-components\";\nimport type { IconType } from \"@bonprix-ds/react-icon\";\nimport type { ButtonSize } from \"@bonprix-ds/utils\";\nimport React, { ComponentProps, ElementType } from \"react\";\n\ninterface BaseProps {\n  /** The visible content of the component. */\n  children: string;\n  /** If used, an icon will be additionally shown. The value is a name of one icon from our icon set. */\n  icon?: IconType;\n  /** The position of the icon relative to the content. */\n  iconPosition?: \"start\" | \"end\";\n  /**  If true, the width of the component will shrink to the width of the content. */\n  contentWidth?: boolean;\n  /** The variant of the button. Choose one depending on the type and desired prominence.  */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /** Size of the button. */\n  size?: Exclude<ButtonSize, \"small\">;\n  /** If `true`, a loading spinner will be shown instead of the content. Only usable when the property `component` is set to `button`. */\n  loading?: boolean;\n}\n\nexport type Props<C extends ElementType> = BaseProps & {\n  /** The semantic component to render the Button. Preferrably `\"button\"`, `\"a\"` or something like `Link` from NextJS. Defaults to `\"button\"`. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps | \"component\">;\n\nconst Button = <C extends ElementType>({ component = \"button\" as C, children, ...props }: Props<C>) => {\n  const Component: ElementType = component;\n  return (\n    <BaseButton {...props} component={Component} componentName=\"button\">\n      {children}\n    </BaseButton>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;AA2BA,IAAM,KAAiC,EAAE,eAAY,UAAe,aAAU,GAAG,QAAsB;CACrG,IAAM,IAAyB;CAC/B,OACE,kBAAC,GAAD;EAAY,GAAI;EAAO,WAAW;EAAW,eAAc;EACxD;CACS,CAAA;AAEhB"}

package/dist/components/Carousel/CarouselArrow.js

@@ -1,4 +1,3 @@
-"use client";
 import "react";
 import { tv as e } from "tailwind-variants";
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Carousel/CarouselArrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselArrow.js","names":[],"sources":["../../../src/components/Carousel/CarouselArrow.tsx"],"sourcesContent":["\"use client\";\n\nimport { BaseButton } from \"@bonprix-ds/internal-components\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  slots: {\n    wrapper: \"z-[1] absolute top-1/2 transform -translate-y-1/2\",\n    button: \"disabled:hidden\",\n  },\n  variants: {\n    position: {\n      left: {\n        wrapper: \"start-3\",\n        button: \"splide__arrow--prev\",\n      },\n      right: {\n        wrapper: \"end-3\",\n        button: \"splide__arrow--next\",\n      },\n    },\n    disableHorizontalPadding: {\n      true: \"\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      disableHorizontalPadding: true,\n      position: \"left\",\n      class: {\n        wrapper: \"start-0\",\n      },\n    },\n    {\n      disableHorizontalPadding: true,\n      position: \"right\",\n      class: {\n        wrapper: \"end-0\",\n      },\n    },\n  ],\n});\n\ninterface Props {\n  position: \"left\" | \"right\";\n  buttonsContrast: boolean;\n  invertButtons: boolean;\n  disableHorizontalPadding: boolean;\n}\n\nconst CarouselArrow: React.FC<Props> = ({ position, buttonsContrast, invertButtons, disableHorizontalPadding }) => {\n  const isLeftArrow = position === \"left\" ? true : false;\n  const icon = isLeftArrow ? \"arrow-left\" : \"arrow-right\";\n  const label = isLeftArrow ? \"Previous Page\" : \"Next Page\";\n  const variant = buttonsContrast ? \"primary\" : \"tertiary\";\n  const { wrapper, button } = generateClasses({ position, disableHorizontalPadding });\n\n  return (\n    <span className={wrapper()}>\n      <BaseButton type=\"button\" className={button()} variant={variant} icon={icon} componentName=\"icon-button\" inverted={invertButtons}>\n        {label}\n      </BaseButton>\n    </span>\n  );\n};\n\nexport default CarouselArrow;\n"],"mappings":";;;;;;AAMA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,SAAS;EACT,QAAQ;CACV;CACA,UAAU;EACR,UAAU;GACR,MAAM;IACJ,SAAS;IACT,QAAQ;GACV;GACA,OAAO;IACL,SAAS;IACT,QAAQ;GACV;EACF;EACA,0BAA0B;GACxB,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB,CAChB;EACE,0BAA0B;EAC1B,UAAU;EACV,OAAO,EACL,SAAS,UACX;CACF,GACA;EACE,0BAA0B;EAC1B,UAAU;EACV,OAAO,EACL,SAAS,QACX;CACF,CACF;AACF,CAAC,GASK,KAAkC,EAAE,aAAU,oBAAiB,kBAAe,kCAA+B;CACjH,IAAM,IAAc,MAAa,QAC3B,IAAO,IAAc,eAAe,eACpC,IAAQ,IAAc,kBAAkB,aACxC,IAAU,IAAkB,YAAY,YACxC,EAAE,YAAS,cAAW,EAAgB;EAAE;EAAU;CAAyB,CAAC;CAElF,OACE,kBAAC,QAAD;EAAM,WAAW,EAAQ;EACvB,UAAA,kBAAC,GAAD;GAAY,MAAK;GAAS,WAAW,EAAO;GAAY;GAAe;GAAM,eAAc;GAAc,UAAU;GAChH,UAAA;EACS,CAAA;CACR,CAAA;AAEV"}
+{"version":3,"file":"CarouselArrow.js","names":[],"sources":["../../../src/components/Carousel/CarouselArrow.tsx"],"sourcesContent":["import { BaseButton } from \"@bonprix-ds/internal-components\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  slots: {\n    wrapper: \"z-[1] absolute top-1/2 transform -translate-y-1/2\",\n    button: \"disabled:hidden\",\n  },\n  variants: {\n    position: {\n      left: {\n        wrapper: \"start-3\",\n        button: \"splide__arrow--prev\",\n      },\n      right: {\n        wrapper: \"end-3\",\n        button: \"splide__arrow--next\",\n      },\n    },\n    disableHorizontalPadding: {\n      true: \"\",\n      false: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      disableHorizontalPadding: true,\n      position: \"left\",\n      class: {\n        wrapper: \"start-0\",\n      },\n    },\n    {\n      disableHorizontalPadding: true,\n      position: \"right\",\n      class: {\n        wrapper: \"end-0\",\n      },\n    },\n  ],\n});\n\ninterface Props {\n  position: \"left\" | \"right\";\n  buttonsContrast: boolean;\n  invertButtons: boolean;\n  disableHorizontalPadding: boolean;\n}\n\nconst CarouselArrow: React.FC<Props> = ({ position, buttonsContrast, invertButtons, disableHorizontalPadding }) => {\n  const isLeftArrow = position === \"left\" ? true : false;\n  const icon = isLeftArrow ? \"arrow-left\" : \"arrow-right\";\n  const label = isLeftArrow ? \"Previous Page\" : \"Next Page\";\n  const variant = buttonsContrast ? \"primary\" : \"tertiary\";\n  const { wrapper, button } = generateClasses({ position, disableHorizontalPadding });\n\n  return (\n    <span className={wrapper()}>\n      <BaseButton type=\"button\" className={button()} variant={variant} icon={icon} componentName=\"icon-button\" inverted={invertButtons}>\n        {label}\n      </BaseButton>\n    </span>\n  );\n};\n\nexport default CarouselArrow;\n"],"mappings":";;;;;AAIA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,SAAS;EACT,QAAQ;CACV;CACA,UAAU;EACR,UAAU;GACR,MAAM;IACJ,SAAS;IACT,QAAQ;GACV;GACA,OAAO;IACL,SAAS;IACT,QAAQ;GACV;EACF;EACA,0BAA0B;GACxB,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB,CAChB;EACE,0BAA0B;EAC1B,UAAU;EACV,OAAO,EACL,SAAS,UACX;CACF,GACA;EACE,0BAA0B;EAC1B,UAAU;EACV,OAAO,EACL,SAAS,QACX;CACF,CACF;AACF,CAAC,GASK,KAAkC,EAAE,aAAU,oBAAiB,kBAAe,kCAA+B;CACjH,IAAM,IAAc,MAAa,QAC3B,IAAO,IAAc,eAAe,eACpC,IAAQ,IAAc,kBAAkB,aACxC,IAAU,IAAkB,YAAY,YACxC,EAAE,YAAS,cAAW,EAAgB;EAAE;EAAU;CAAyB,CAAC;CAElF,OACE,kBAAC,QAAD;EAAM,WAAW,EAAQ;EACvB,UAAA,kBAAC,GAAD;GAAY,MAAK;GAAS,WAAW,EAAO;GAAY;GAAe;GAAM,eAAc;GAAc,UAAU;GAChH,UAAA;EACS,CAAA;CACR,CAAA;AAEV"}

package/dist/components/Dialog/Dialog.js

@@ -54,7 +54,7 @@ var u = o({ slots: {
 		})
 	});
 };
-d.displayName = "Dialog", d.Title = f, f.displayName = "Dialog.Title", d.Content = p, p.displayName = "Dialog.Content", d.PrimaryButton = r, d.SecondaryButton = i;
+d.displayName = "Dialog", d.Title = f, f.displayName = "Dialog.Title", d.Content = p, p.displayName = "Dialog.Content", d.PrimaryButton = r, Object.assign(r, { displayName: "Dialog.PrimaryButton" }), d.SecondaryButton = i, Object.assign(i, { displayName: "Dialog.SecondaryButton" });
 //#endregion
 export { d as default };
 

package/dist/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { FC, ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\n\nimport Overlay from \"@components/Overlay\";\nimport { useInnerOpen, useSubcomponent } from \"@hooks\";\n\nimport ButtonsSection from \"../ButtonsSection\";\nimport PrimaryButton from \"../ButtonsSection/PrimaryButton\";\nimport SecondaryButton from \"../ButtonsSection/SecondaryButton\";\n\nconst generateClasses = tv({\n  slots: {\n    title: \"typography-bonprix-h4 text-clr-primary px-10\",\n    wrapper: \"flex flex-col gap-5 h-full\",\n    scrollArea: \"px-10 h-full scroll-area relative\",\n    contentWrapper: \"flex flex-col overflow-hidden\",\n    buttonSection: \"px-10\",\n  },\n});\n\ninterface Subcomponents {\n  Title: typeof Title;\n  Content: typeof Content;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n}\nexport interface Props {\n  /** Controls the visibility of the dialog. Should be used in conjunction with `onClose`. */\n  isOpen: boolean;\n  /** Here, all of the subcomponents should be placed. */\n  children: ReactNode;\n  /** Callback function that is called when the dialog is supposed to be closed. Should be used in conjunction with `isOpen` property. */\n  onClose: () => void;\n  /** The z-index of the dialog. */\n  zIndex?: number;\n}\n\ntype SubcomponentList = Record<keyof Subcomponents, ReactNode>;\n\nconst Dialog: FC<Props> & Subcomponents = ({ isOpen, onClose, zIndex, children }: Props) => {\n  const { getSubcomponents, printBadConstructionMessage } = useSubcomponent(children);\n  const { Title, Content, PrimaryButton, SecondaryButton } = getSubcomponents() as SubcomponentList;\n  const { wrapper, buttonSection } = generateClasses();\n\n  const { innerOpen } = useInnerOpen(isOpen);\n\n  if (!Title || !Content) {\n    printBadConstructionMessage(\"Dialog\");\n    return null;\n  }\n\n  return (\n    <Overlay isOpen={innerOpen} onClose={onClose} zIndex={zIndex} isDialog componentName=\"dialog\">\n      <div className={wrapper()}>\n        {Title}\n        {Content}\n        {PrimaryButton && <ButtonsSection owner=\"Dialog\" primary={PrimaryButton} secondary={SecondaryButton} classes={buttonSection()} />}\n      </div>\n    </Overlay>\n  );\n};\n\ninterface TitleProps {\n  /** The title to display in the dialog */\n  children: string;\n}\n\nconst Title: FC<TitleProps> = ({ children }) => {\n  const { title } = generateClasses();\n  return <DialogPrimitive.Title className={title()}>{children}</DialogPrimitive.Title>;\n};\n\ninterface ContentProps {\n  /** The content to display in the dialog */\n  children: ReactNode;\n}\n\nconst Content: FC<ContentProps> = ({ children }) => {\n  const { scrollArea, contentWrapper } = generateClasses();\n  return (\n    <div className={scrollArea()}>\n      <div className={contentWrapper()}>{children}</div>\n    </div>\n  );\n};\n\nDialog.displayName = \"Dialog\";\n\nDialog.Title = Title;\nTitle.displayName = \"Dialog.Title\";\n\nDialog.Content = Content;\nContent.displayName = \"Dialog.Content\";\n\nDialog.PrimaryButton = PrimaryButton;\nDialog.SecondaryButton = SecondaryButton;\n\nexport default Dialog;\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,IAAkB,EAAG,EACzB,OAAO;CACL,OAAO;CACP,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,eAAe;AACjB,EACF,CAAC,GAqBK,KAAqC,EAAE,WAAQ,YAAS,WAAQ,kBAAsB;CAC1F,IAAM,EAAE,qBAAkB,mCAAgC,EAAgB,CAAQ,GAC5E,EAAE,UAAO,YAAS,kBAAe,uBAAoB,EAAiB,GACtE,EAAE,YAAS,qBAAkB,EAAgB,GAE7C,EAAE,iBAAc,EAAa,CAAM;CAOzC,OALI,CAAC,KAAS,CAAC,KACb,EAA4B,QAAQ,GAC7B,QAIP,kBAAC,GAAD;EAAS,QAAQ;EAAoB;EAAiB;EAAQ,UAAA;EAAS,eAAc;EACnF,UAAA,kBAAC,OAAD;GAAK,WAAW,EAAQ;GAAxB,UAAA;IACG;IACA;IACA,KAAiB,kBAAC,GAAD;KAAgB,OAAM;KAAS,SAAS;KAAe,WAAW;KAAiB,SAAS,EAAc;IAAI,CAAA;GAC7H;;CACE,CAAA;AAEb,GAOM,KAAyB,EAAE,kBAAe;CAC9C,IAAM,EAAE,aAAU,EAAgB;CAClC,OAAO,kBAAC,EAAgB,OAAjB;EAAuB,WAAW,EAAM;EAAI;CAAgC,CAAA;AACrF,GAOM,KAA6B,EAAE,kBAAe;CAClD,IAAM,EAAE,eAAY,sBAAmB,EAAgB;CACvD,OACE,kBAAC,OAAD;EAAK,WAAW,EAAW;EACzB,UAAA,kBAAC,OAAD;GAAK,WAAW,EAAe;GAAI;EAAc,CAAA;CAC9C,CAAA;AAET;AAEA,EAAO,cAAc,UAErB,EAAO,QAAQ,GACf,EAAM,cAAc,gBAEpB,EAAO,UAAU,GACjB,EAAQ,cAAc,kBAEtB,EAAO,gBAAgB,GACvB,EAAO,kBAAkB"}
+{"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { FC, FunctionComponent, ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\n\nimport Overlay from \"@components/Overlay\";\nimport { useInnerOpen, useSubcomponent } from \"@hooks\";\n\nimport ButtonsSection from \"../ButtonsSection\";\nimport PrimaryButton from \"../ButtonsSection/PrimaryButton\";\nimport SecondaryButton from \"../ButtonsSection/SecondaryButton\";\n\nconst generateClasses = tv({\n  slots: {\n    title: \"typography-bonprix-h4 text-clr-primary px-10\",\n    wrapper: \"flex flex-col gap-5 h-full\",\n    scrollArea: \"px-10 h-full scroll-area relative\",\n    contentWrapper: \"flex flex-col overflow-hidden\",\n    buttonSection: \"px-10\",\n  },\n});\n\ninterface Subcomponents {\n  Title: typeof Title;\n  Content: typeof Content;\n  PrimaryButton: typeof PrimaryButton;\n  SecondaryButton: typeof SecondaryButton;\n}\nexport interface Props {\n  /** Controls the visibility of the dialog. Should be used in conjunction with `onClose`. */\n  isOpen: boolean;\n  /** Here, all of the subcomponents should be placed. */\n  children: ReactNode;\n  /** Callback function that is called when the dialog is supposed to be closed. Should be used in conjunction with `isOpen` property. */\n  onClose: () => void;\n  /** The z-index of the dialog. */\n  zIndex?: number;\n}\n\ntype SubcomponentList = Record<keyof Subcomponents, ReactNode>;\n\nconst Dialog: FC<Props> & Subcomponents = ({ isOpen, onClose, zIndex, children }: Props) => {\n  const { getSubcomponents, printBadConstructionMessage } = useSubcomponent(children);\n  const { Title, Content, PrimaryButton, SecondaryButton } = getSubcomponents() as SubcomponentList;\n  const { wrapper, buttonSection } = generateClasses();\n\n  const { innerOpen } = useInnerOpen(isOpen);\n\n  if (!Title || !Content) {\n    printBadConstructionMessage(\"Dialog\");\n    return null;\n  }\n\n  return (\n    <Overlay isOpen={innerOpen} onClose={onClose} zIndex={zIndex} isDialog componentName=\"dialog\">\n      <div className={wrapper()}>\n        {Title}\n        {Content}\n        {PrimaryButton && <ButtonsSection owner=\"Dialog\" primary={PrimaryButton} secondary={SecondaryButton} classes={buttonSection()} />}\n      </div>\n    </Overlay>\n  );\n};\n\ninterface TitleProps {\n  /** The title to display in the dialog */\n  children: string;\n}\n\nconst Title: FC<TitleProps> = ({ children }) => {\n  const { title } = generateClasses();\n  return <DialogPrimitive.Title className={title()}>{children}</DialogPrimitive.Title>;\n};\n\ninterface ContentProps {\n  /** The content to display in the dialog */\n  children: ReactNode;\n}\n\nconst Content: FC<ContentProps> = ({ children }) => {\n  const { scrollArea, contentWrapper } = generateClasses();\n  return (\n    <div className={scrollArea()}>\n      <div className={contentWrapper()}>{children}</div>\n    </div>\n  );\n};\n\nDialog.displayName = \"Dialog\";\n\nDialog.Title = Title;\nTitle.displayName = \"Dialog.Title\";\n\nDialog.Content = Content;\nContent.displayName = \"Dialog.Content\";\n\nDialog.PrimaryButton = PrimaryButton;\nObject.assign(PrimaryButton, {\n  displayName: \"Dialog.PrimaryButton\",\n} satisfies Pick<FunctionComponent, \"displayName\">);\n\nDialog.SecondaryButton = SecondaryButton;\nObject.assign(SecondaryButton, {\n  displayName: \"Dialog.SecondaryButton\",\n} satisfies Pick<FunctionComponent, \"displayName\">);\n\nexport default Dialog;\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,IAAkB,EAAG,EACzB,OAAO;CACL,OAAO;CACP,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,eAAe;AACjB,EACF,CAAC,GAqBK,KAAqC,EAAE,WAAQ,YAAS,WAAQ,kBAAsB;CAC1F,IAAM,EAAE,qBAAkB,mCAAgC,EAAgB,CAAQ,GAC5E,EAAE,UAAO,YAAS,kBAAe,uBAAoB,EAAiB,GACtE,EAAE,YAAS,qBAAkB,EAAgB,GAE7C,EAAE,iBAAc,EAAa,CAAM;CAOzC,OALI,CAAC,KAAS,CAAC,KACb,EAA4B,QAAQ,GAC7B,QAIP,kBAAC,GAAD;EAAS,QAAQ;EAAoB;EAAiB;EAAQ,UAAA;EAAS,eAAc;EACnF,UAAA,kBAAC,OAAD;GAAK,WAAW,EAAQ;GAAxB,UAAA;IACG;IACA;IACA,KAAiB,kBAAC,GAAD;KAAgB,OAAM;KAAS,SAAS;KAAe,WAAW;KAAiB,SAAS,EAAc;IAAI,CAAA;GAC7H;;CACE,CAAA;AAEb,GAOM,KAAyB,EAAE,kBAAe;CAC9C,IAAM,EAAE,aAAU,EAAgB;CAClC,OAAO,kBAAC,EAAgB,OAAjB;EAAuB,WAAW,EAAM;EAAI;CAAgC,CAAA;AACrF,GAOM,KAA6B,EAAE,kBAAe;CAClD,IAAM,EAAE,eAAY,sBAAmB,EAAgB;CACvD,OACE,kBAAC,OAAD;EAAK,WAAW,EAAW;EACzB,UAAA,kBAAC,OAAD;GAAK,WAAW,EAAe;GAAI;EAAc,CAAA;CAC9C,CAAA;AAET;AAEA,EAAO,cAAc,UAErB,EAAO,QAAQ,GACf,EAAM,cAAc,gBAEpB,EAAO,UAAU,GACjB,EAAQ,cAAc,kBAEtB,EAAO,gBAAgB,GACvB,OAAO,OAAO,GAAe,EAC3B,aAAa,uBACf,CAAkD,GAElD,EAAO,kBAAkB,GACzB,OAAO,OAAO,GAAiB,EAC7B,aAAa,yBACf,CAAkD"}

package/dist/components/Image/Image.js

@@ -1,4 +1,3 @@
-"use client";
 import "react";
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { breakpoints as n } from "@bonprix-ds/utils";

package/dist/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":[],"sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["\"use client\";\n\nimport { breakpoints } from \"@bonprix-ds/utils\";\nimport React, { FC } from \"react\";\n\ninterface SourceSetMapper {\n  s?: string;\n  m?: string;\n  l?: string;\n  xl?: string;\n  xxl?: string;\n  xxxl?: string;\n}\n\ninterface BasicProps {\n  /** The title. */\n  title?: string;\n  /** The alt text. */\n  alt: string;\n  /** The default source for the image. */\n  defaultSrc: string;\n  /** CSS vertical alignment property. */\n  verticalAlign?: string;\n}\n\nexport interface RegularImage extends BasicProps {\n  /** The source set for the image, containing different resolutions. */\n  srcSet: SourceSetMapper;\n  /** The width of the image. */\n  width: number;\n  /** The height of the image. */\n  height: number;\n  /** Set it to `true`, when the image is supposed to be used in a carousel.\n   * The dimensions of the image should be set via the Carousel container.\n   * The image will also be lazy-loaded by default. */\n  carousel?: false;\n}\ninterface CarouselImage extends BasicProps {\n  carousel: true;\n}\nexport type Props = RegularImage | CarouselImage;\n\nconst isCarousel = (props: Props): props is CarouselImage => !!(\"carousel\" in props && props.carousel);\n\nconst Image: FC<Props> = (props: Props) => {\n  const { defaultSrc, alt, title, verticalAlign } = props;\n\n  if (isCarousel(props)) {\n    return (\n      <img // In case we use Image component for Carousel, splidejs only works with <img> tag\n        className=\"w-full h-auto\"\n        data-splide-lazy={defaultSrc}\n        alt={alt}\n        title={title}\n        data-bpds=\"image\"\n        data-bpds-carousel={true}\n      />\n    );\n  } else {\n    const { srcSet, width, height } = props;\n    return (\n      <picture className=\"inline-block leading-[0] text-[0]\" data-bpds=\"image\" data-bpds-carousel={false} style={{ verticalAlign }}>\n        {srcSet.xxxl && <source media={`(min-width: ${breakpoints.xxxl})`} srcSet={srcSet.xxxl} />}\n        {srcSet.xxl && <source media={`(min-width: ${breakpoints.xxl})`} srcSet={srcSet.xxl} />}\n        {srcSet.xl && <source media={`(min-width: ${breakpoints.xl})`} srcSet={srcSet.xl} />}\n        {srcSet.l && <source media={`(min-width: ${breakpoints.l})`} srcSet={srcSet.l} />}\n        {srcSet.m && <source media={`(min-width: ${breakpoints.m})`} srcSet={srcSet.m} />}\n        {srcSet.s && <source media={`(min-width: ${breakpoints.s})`} srcSet={srcSet.s} />}\n        <img\n          src={defaultSrc} // Optional: Use as a low-res placeholder\n          alt={alt}\n          title={title}\n          width={width}\n          height={height}\n        />\n      </picture>\n    );\n  }\n};\n\nexport default Image;\n"],"mappings":";;;;;AA0CA,IAAM,KAAc,MAAyC,CAAC,EAAE,cAAc,KAAS,EAAM,WAEvF,KAAoB,MAAiB;CACzC,IAAM,EAAE,eAAY,QAAK,UAAO,qBAAkB;CAElD,IAAI,EAAW,CAAK,GAClB,OACE,kBAAC,OAAD;EACE,WAAU;EACV,oBAAkB;EACb;EACE;EACP,aAAU;EACV,sBAAoB;CACrB,CAAA;CAEE;EACL,IAAM,EAAE,WAAQ,UAAO,cAAW;EAClC,OACE,kBAAC,WAAD;GAAS,WAAU;GAAoC,aAAU;GAAQ,sBAAoB;GAAO,OAAO,EAAE,iBAAc;GAA3H,UAAA;IACG,EAAO,QAAQ,kBAAC,UAAD;KAAQ,OAAO,eAAe,EAAY,KAAK;KAAI,QAAQ,EAAO;IAAO,CAAA;IACxF,EAAO,OAAO,kBAAC,UAAD;KAAQ,OAAO,eAAe,EAAY,IAAI;KAAI,QAAQ,EAAO;IAAM,CAAA;IACrF,EAAO,MAAM,kBAAC,UAAD;KAAQ,OAAO,eAAe,EAAY,GAAG;KAAI,QAAQ,EAAO;IAAK,CAAA;IAClF,EAAO,KAAK,kBAAC,UAAD;KAAQ,OAAO,eAAe,EAAY,EAAE;KAAI,QAAQ,EAAO;IAAI,CAAA;IAC/E,EAAO,KAAK,kBAAC,UAAD;KAAQ,OAAO,eAAe,EAAY,EAAE;KAAI,QAAQ,EAAO;IAAI,CAAA;IAC/E,EAAO,KAAK,kBAAC,UAAD;KAAQ,OAAO,eAAe,EAAY,EAAE;KAAI,QAAQ,EAAO;IAAI,CAAA;IAChF,kBAAC,OAAD;KACE,KAAK;KACA;KACE;KACA;KACC;IACT,CAAA;GACM;;CAEb;AACF"}
+{"version":3,"file":"Image.js","names":[],"sources":["../../../src/components/Image/Image.tsx"],"sourcesContent":["import { breakpoints } from \"@bonprix-ds/utils\";\nimport React, { FC } from \"react\";\n\ninterface SourceSetMapper {\n  s?: string;\n  m?: string;\n  l?: string;\n  xl?: string;\n  xxl?: string;\n  xxxl?: string;\n}\n\ninterface BasicProps {\n  /** The title. */\n  title?: string;\n  /** The alt text. */\n  alt: string;\n  /** The default source for the image. */\n  defaultSrc: string;\n  /** CSS vertical alignment property. */\n  verticalAlign?: string;\n}\n\nexport interface RegularImage extends BasicProps {\n  /** The source set for the image, containing different resolutions. */\n  srcSet: SourceSetMapper;\n  /** The width of the image. */\n  width: number;\n  /** The height of the image. */\n  height: number;\n  /** Set it to `true`, when the image is supposed to be used in a carousel.\n   * The dimensions of the image should be set via the Carousel container.\n   * The image will also be lazy-loaded by default. */\n  carousel?: false;\n}\ninterface CarouselImage extends BasicProps {\n  carousel: true;\n}\nexport type Props = RegularImage | CarouselImage;\n\nconst isCarousel = (props: Props): props is CarouselImage => !!(\"carousel\" in props && props.carousel);\n\nconst Image: FC<Props> = (props: Props) => {\n  const { defaultSrc, alt, title, verticalAlign } = props;\n\n  if (isCarousel(props)) {\n    return (\n      <img // In case we use Image component for Carousel, splidejs only works with <img> tag\n        className=\"w-full h-auto\"\n        data-splide-lazy={defaultSrc}\n        alt={alt}\n        title={title}\n        data-bpds=\"image\"\n        data-bpds-carousel={true}\n      />\n    );\n  } else {\n    const { srcSet, width, height } = props;\n    return (\n      <picture className=\"inline-block leading-[0] text-[0]\" data-bpds=\"image\" data-bpds-carousel={false} style={{ verticalAlign }}>\n        {srcSet.xxxl && <source media={`(min-width: ${breakpoints.xxxl})`} srcSet={srcSet.xxxl} />}\n        {srcSet.xxl && <source media={`(min-width: ${breakpoints.xxl})`} srcSet={srcSet.xxl} />}\n        {srcSet.xl && <source media={`(min-width: ${breakpoints.xl})`} srcSet={srcSet.xl} />}\n        {srcSet.l && <source media={`(min-width: ${breakpoints.l})`} srcSet={srcSet.l} />}\n        {srcSet.m && <source media={`(min-width: ${breakpoints.m})`} srcSet={srcSet.m} />}\n        {srcSet.s && <source media={`(min-width: ${breakpoints.s})`} srcSet={srcSet.s} />}\n        <img\n          src={defaultSrc} // Optional: Use as a low-res placeholder\n          alt={alt}\n          title={title}\n          width={width}\n          height={height}\n        />\n      </picture>\n    );\n  }\n};\n\nexport default Image;\n"],"mappings":";;;;AAwCA,IAAM,KAAc,MAAyC,CAAC,EAAE,cAAc,KAAS,EAAM,WAEvF,KAAoB,MAAiB;CACzC,IAAM,EAAE,eAAY,QAAK,UAAO,qBAAkB;CAElD,IAAI,EAAW,CAAK,GAClB,OACE,kBAAC,OAAD;EACE,WAAU;EACV,oBAAkB;EACb;EACE;EACP,aAAU;EACV,sBAAoB;CACrB,CAAA;CAEE;EACL,IAAM,EAAE,WAAQ,UAAO,cAAW;EAClC,OACE,kBAAC,WAAD;GAAS,WAAU;GAAoC,aAAU;GAAQ,sBAAoB;GAAO,OAAO,EAAE,iBAAc;GAA3H,UAAA;IACG,EAAO,QAAQ,kBAAC,UAAD;KAAQ,OAAO,eAAe,EAAY,KAAK;KAAI,QAAQ,EAAO;IAAO,CAAA;IACxF,EAAO,OAAO,kBAAC,UAAD;KAAQ,OAAO,eAAe,EAAY,IAAI;KAAI,QAAQ,EAAO;IAAM,CAAA;IACrF,EAAO,MAAM,kBAAC,UAAD;KAAQ,OAAO,eAAe,EAAY,GAAG;KAAI,QAAQ,EAAO;IAAK,CAAA;IAClF,EAAO,KAAK,kBAAC,UAAD;KAAQ,OAAO,eAAe,EAAY,EAAE;KAAI,QAAQ,EAAO;IAAI,CAAA;IAC/E,EAAO,KAAK,kBAAC,UAAD;KAAQ,OAAO,eAAe,EAAY,EAAE;KAAI,QAAQ,EAAO;IAAI,CAAA;IAC/E,EAAO,KAAK,kBAAC,UAAD;KAAQ,OAAO,eAAe,EAAY,EAAE;KAAI,QAAQ,EAAO;IAAI,CAAA;IAChF,kBAAC,OAAD;KACE,KAAK;KACA;KACE;KACA;KACC;IACT,CAAA;GACM;;CAEb;AACF"}

package/dist/components/Link/Link.js

@@ -1,4 +1,3 @@
-"use client";
 import "react";
 import { tv as e } from "tailwind-variants";
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";

package/dist/components/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["\"use client\";\n\nimport Icon from \"@bonprix-ds/react-icon\";\nimport type { ComponentProps, ElementType } from \"react\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  /* the before: styles are used to create content that allows proper baseline alignment when suing inline-flex elements with text:\n    https://stackoverflow.com/questions/73715565/how-to-get-a-flex-item-to-participate-in-baseline-alignment-and-be-centered\n    https://www.w3.org/TR/css-flexbox-1/#flex-baselines\n  */\n  base: [\n    \"preflight rounded-sm inline-flex before:content-['_'] before:whitespace-pre before:w-0 relative items-center\",\n    \"focus-visible:outline focus-visible:outline-1 group\",\n  ],\n  slots: {\n    icon: \"h-4 w-4 inline-block\",\n    label: \"typography-link-large underline underline-offset-2 hover:decoration-2 group-focus:no-underline\",\n  },\n  variants: {\n    small: {\n      true: {\n        label: \"typography-link-small\",\n      },\n    },\n    hideUnderline: {\n      true: {\n        label: \"no-underline hover:underline\",\n      },\n    },\n    arrowPosition: {\n      left: \"\",\n      right: \"flex-row-reverse justify-end\",\n    },\n    inverted: {\n      false: {\n        base: \"focus-visible:outline-clr-primary\",\n        icon: \"fill-clr-primary\",\n        label: \"text-clr-primary\",\n      },\n      true: {\n        base: \"focus-visible:outline-clr-primary-inverse\",\n        icon: \"fill-clr-primary-inverse\",\n        label: \"text-clr-primary-inverse\",\n      },\n    },\n  },\n});\n\ninterface BaseProps {\n  /** The content of the link. */\n  children: string;\n  /** if `true`, an arrow will be shown in the end of the content. */\n  showArrow?: boolean;\n  /** The position of the arrow, if `showArrow` is set to `true`. */\n  arrowPosition?: \"left\" | \"right\";\n  /* If set to `true`, the link will match `body2`, otherwise `body1`. */\n  small?: boolean;\n  /** If set to `true`, the underline will be hidden. */\n  hideUnderline?: boolean;\n  /** Alternative label for the screen reader. This can for example be used, if a proper name cannot be setup because of the position in the text. */\n  srLabel?: string;\n  /** If `true`, inverts the colors of the component. */\n  inverted?: boolean;\n}\n\nexport type Props<C extends ElementType> = BaseProps & {\n  /** The semantic component to render the Link. Preferrably `\"a\"`, `\"button\"` or something like `Link` from NextJS. Defaults to `\"a\"`. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps | \"component\">;\n\nconst Link = <C extends ElementType>({\n  children,\n  small = false,\n  hideUnderline = false,\n  showArrow = false,\n  arrowPosition = \"left\",\n  srLabel,\n  inverted,\n  component = \"a\" as C,\n  ...props\n}: Props<C>) => {\n  const Component: ElementType = component;\n  const buttonDefaultProps = component === \"button\" ? { type: \"button\" } : {};\n\n  const { base, icon, label } = generateClasses({ small, hideUnderline, arrowPosition, inverted });\n\n  const content = (\n    <>\n      {showArrow && <Icon variant={arrowPosition === \"left\" ? \"arrow-left\" : \"arrow-right\"} className={icon()} />}\n      {/* We need to style decoration-thickness directly on the label.\n      Otherwise it wont be propagated because of the inline-flex on the anchor element */}\n      {srLabel && <span className=\"sr-only\">{srLabel}</span>}\n      <span aria-hidden={srLabel ? \"true\" : undefined} className={label()}>\n        {children}\n      </span>\n    </>\n  );\n\n  return (\n    <Component\n      {...props}\n      {...buttonDefaultProps}\n      className={base()}\n      data-bpds=\"link\"\n      data-bpds-small={small}\n      data-bpds-hide-underline={hideUnderline}\n      data-bpds-arrow-position={arrowPosition}\n      data-bpds-show-arrow={showArrow}\n      data-bpds-inverted={inverted}\n    >\n      {content}\n    </Component>\n  );\n};\n\nexport default Link;\n"],"mappings":";;;;;;AAOA,IAAM,IAAkB,EAAG;CAKzB,MAAM,CACJ,gHACA,qDACF;CACA,OAAO;EACL,MAAM;EACN,OAAO;CACT;CACA,UAAU;EACR,OAAO,EACL,MAAM,EACJ,OAAO,wBACT,EACF;EACA,eAAe,EACb,MAAM,EACJ,OAAO,+BACT,EACF;EACA,eAAe;GACb,MAAM;GACN,OAAO;EACT;EACA,UAAU;GACR,OAAO;IACL,MAAM;IACN,MAAM;IACN,OAAO;GACT;GACA,MAAM;IACJ,MAAM;IACN,MAAM;IACN,OAAO;GACT;EACF;CACF;AACF,CAAC,GAwBK,KAA+B,EACnC,aACA,WAAQ,IACR,mBAAgB,IAChB,eAAY,IACZ,mBAAgB,QAChB,YACA,aACA,eAAY,KACZ,GAAG,QACW;CACd,IAAM,IAAyB,GACzB,IAAqB,MAAc,WAAW,EAAE,MAAM,SAAS,IAAI,CAAC,GAEpE,EAAE,SAAM,SAAM,aAAU,EAAgB;EAAE;EAAO;EAAe;EAAe;CAAS,CAAC,GAEzF,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG,KAAa,kBAAC,GAAD;GAAM,SAAS,MAAkB,SAAS,eAAe;GAAe,WAAW,EAAK;EAAI,CAAA;EAGzG,KAAW,kBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAc,CAAA;EACrD,kBAAC,QAAD;GAAM,eAAa,IAAU,SAAS,KAAA;GAAW,WAAW,EAAM;GAC/D;EACG,CAAA;CACN,EAAA,CAAA;CAGJ,OACE,kBAAC,GAAD;EACE,GAAI;EACJ,GAAI;EACJ,WAAW,EAAK;EAChB,aAAU;EACV,mBAAiB;EACjB,4BAA0B;EAC1B,4BAA0B;EAC1B,wBAAsB;EACtB,sBAAoB;EAEnB,UAAA;CACQ,CAAA;AAEf"}
+{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import Icon from \"@bonprix-ds/react-icon\";\nimport type { ComponentProps, ElementType } from \"react\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  /* the before: styles are used to create content that allows proper baseline alignment when suing inline-flex elements with text:\n    https://stackoverflow.com/questions/73715565/how-to-get-a-flex-item-to-participate-in-baseline-alignment-and-be-centered\n    https://www.w3.org/TR/css-flexbox-1/#flex-baselines\n  */\n  base: [\n    \"preflight rounded-sm inline-flex before:content-['_'] before:whitespace-pre before:w-0 relative items-center\",\n    \"focus-visible:outline focus-visible:outline-1 group\",\n  ],\n  slots: {\n    icon: \"h-4 w-4 inline-block\",\n    label: \"typography-link-large underline underline-offset-2 hover:decoration-2 group-focus:no-underline\",\n  },\n  variants: {\n    small: {\n      true: {\n        label: \"typography-link-small\",\n      },\n    },\n    hideUnderline: {\n      true: {\n        label: \"no-underline hover:underline\",\n      },\n    },\n    arrowPosition: {\n      left: \"\",\n      right: \"flex-row-reverse justify-end\",\n    },\n    inverted: {\n      false: {\n        base: \"focus-visible:outline-clr-primary\",\n        icon: \"fill-clr-primary\",\n        label: \"text-clr-primary\",\n      },\n      true: {\n        base: \"focus-visible:outline-clr-primary-inverse\",\n        icon: \"fill-clr-primary-inverse\",\n        label: \"text-clr-primary-inverse\",\n      },\n    },\n  },\n});\n\ninterface BaseProps {\n  /** The content of the link. */\n  children: string;\n  /** if `true`, an arrow will be shown in the end of the content. */\n  showArrow?: boolean;\n  /** The position of the arrow, if `showArrow` is set to `true`. */\n  arrowPosition?: \"left\" | \"right\";\n  /* If set to `true`, the link will match `body2`, otherwise `body1`. */\n  small?: boolean;\n  /** If set to `true`, the underline will be hidden. */\n  hideUnderline?: boolean;\n  /** Alternative label for the screen reader. This can for example be used, if a proper name cannot be setup because of the position in the text. */\n  srLabel?: string;\n  /** If `true`, inverts the colors of the component. */\n  inverted?: boolean;\n}\n\nexport type Props<C extends ElementType> = BaseProps & {\n  /** The semantic component to render the Link. Preferrably `\"a\"`, `\"button\"` or something like `Link` from NextJS. Defaults to `\"a\"`. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps | \"component\">;\n\nconst Link = <C extends ElementType>({\n  children,\n  small = false,\n  hideUnderline = false,\n  showArrow = false,\n  arrowPosition = \"left\",\n  srLabel,\n  inverted,\n  component = \"a\" as C,\n  ...props\n}: Props<C>) => {\n  const Component: ElementType = component;\n  const buttonDefaultProps = component === \"button\" ? { type: \"button\" } : {};\n\n  const { base, icon, label } = generateClasses({ small, hideUnderline, arrowPosition, inverted });\n\n  const content = (\n    <>\n      {showArrow && <Icon variant={arrowPosition === \"left\" ? \"arrow-left\" : \"arrow-right\"} className={icon()} />}\n      {/* We need to style decoration-thickness directly on the label.\n      Otherwise it wont be propagated because of the inline-flex on the anchor element */}\n      {srLabel && <span className=\"sr-only\">{srLabel}</span>}\n      <span aria-hidden={srLabel ? \"true\" : undefined} className={label()}>\n        {children}\n      </span>\n    </>\n  );\n\n  return (\n    <Component\n      {...props}\n      {...buttonDefaultProps}\n      className={base()}\n      data-bpds=\"link\"\n      data-bpds-small={small}\n      data-bpds-hide-underline={hideUnderline}\n      data-bpds-arrow-position={arrowPosition}\n      data-bpds-show-arrow={showArrow}\n      data-bpds-inverted={inverted}\n    >\n      {content}\n    </Component>\n  );\n};\n\nexport default Link;\n"],"mappings":";;;;;AAKA,IAAM,IAAkB,EAAG;CAKzB,MAAM,CACJ,gHACA,qDACF;CACA,OAAO;EACL,MAAM;EACN,OAAO;CACT;CACA,UAAU;EACR,OAAO,EACL,MAAM,EACJ,OAAO,wBACT,EACF;EACA,eAAe,EACb,MAAM,EACJ,OAAO,+BACT,EACF;EACA,eAAe;GACb,MAAM;GACN,OAAO;EACT;EACA,UAAU;GACR,OAAO;IACL,MAAM;IACN,MAAM;IACN,OAAO;GACT;GACA,MAAM;IACJ,MAAM;IACN,MAAM;IACN,OAAO;GACT;EACF;CACF;AACF,CAAC,GAwBK,KAA+B,EACnC,aACA,WAAQ,IACR,mBAAgB,IAChB,eAAY,IACZ,mBAAgB,QAChB,YACA,aACA,eAAY,KACZ,GAAG,QACW;CACd,IAAM,IAAyB,GACzB,IAAqB,MAAc,WAAW,EAAE,MAAM,SAAS,IAAI,CAAC,GAEpE,EAAE,SAAM,SAAM,aAAU,EAAgB;EAAE;EAAO;EAAe;EAAe;CAAS,CAAC,GAEzF,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG,KAAa,kBAAC,GAAD;GAAM,SAAS,MAAkB,SAAS,eAAe;GAAe,WAAW,EAAK;EAAI,CAAA;EAGzG,KAAW,kBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAc,CAAA;EACrD,kBAAC,QAAD;GAAM,eAAa,IAAU,SAAS,KAAA;GAAW,WAAW,EAAM;GAC/D;EACG,CAAA;CACN,EAAA,CAAA;CAGJ,OACE,kBAAC,GAAD;EACE,GAAI;EACJ,GAAI;EACJ,WAAW,EAAK;EAChB,aAAU;EACV,mBAAiB;EACjB,4BAA0B;EAC1B,4BAA0B;EAC1B,wBAAsB;EACtB,sBAAoB;EAEnB,UAAA;CACQ,CAAA;AAEf"}

package/dist/components/SideNavigation/SideNavigation.js

@@ -1,3 +1,4 @@
+"use client";
 import { useBreakpointDown as e } from "../../hooks/index.js";
 import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/SideNavigation/SideNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigation.js","names":[],"sources":["../../../src/components/SideNavigation/SideNavigation.tsx"],"sourcesContent":["import Icon, { type IconType } from \"@bonprix-ds/react-icon\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport type { TitleLevel } from \"@bonprix-ds/utils\";\nimport React, { ComponentProps, ElementType, FC, ReactNode } from \"react\";\n\nimport { useBreakpointDown } from \"@hooks\";\n\ninterface NavigationTitle {\n  title: string;\n  hideTitle?: boolean;\n  titleLevel?: TitleLevel;\n}\n\ninterface SideNavigationSubcomponents {\n  Section: typeof SideNavigationSection;\n  Item: typeof SideNavigationItem;\n}\n\nexport interface SideNavigationProps extends NavigationTitle {\n  children: ReactNode;\n}\n\nconst SideNavigation: FC<SideNavigationProps> & SideNavigationSubcomponents = ({\n  children,\n  title,\n  hideTitle = false,\n  titleLevel = \"h3\",\n}) => {\n  if (useBreakpointDown(\"m\")) return null;\n  const labelAttribute = hideTitle ? { \"aria-label\": title } : { \"aria-labelledby\": \"side-navigation-header\" };\n  return (\n    <nav\n      {...labelAttribute}\n      className=\"preflight pt-6 ps-6 pe-2 bg-clr-bg-main h-screen overflow-auto min-w-[18.75rem] max-w-[31.25rem] w-fit\"\n      data-bpds=\"side-navigation\"\n    >\n      {!hideTitle && (\n        <div className=\"pt-3 pb-6\">\n          <Typography variant=\"bonprix-h4\" component={titleLevel} id=\"side-navigation-header\">\n            {title}\n          </Typography>\n        </div>\n      )}\n      <ul className=\"flex flex-col gap-3\">{children}</ul>\n    </nav>\n  );\n};\n\ninterface SideNavigationSectionProps extends NavigationTitle {\n  children: ReactNode;\n}\n\nconst SideNavigationSection = ({ children, title, hideTitle = false, titleLevel = \"h4\" }: SideNavigationSectionProps) => {\n  return (\n    <li aria-label={hideTitle ? title : undefined} className=\"pb-3 border-b border-clr-bg-main-light last:border-none flex flex-col gap-3\">\n      {!hideTitle && (\n        <Typography variant=\"h6\" component={titleLevel} color=\"on-bg-mid\">\n          {title}\n        </Typography>\n      )}\n      <ul className=\"flex flex-col gap-3 ps-1\">{children}</ul>\n    </li>\n  );\n};\n\ninterface SideNavigationItemBaseProps {\n  /** The text content of the list item. */\n  children: string;\n  /** The icon to display in front of the list item. */\n  icon?: IconType;\n  /** Should be set to `true`, if the current page is equal to the link in this item. */\n  active?: boolean;\n}\n\ntype SideNavigationItemProps<C extends ElementType> = SideNavigationItemBaseProps & {\n  /** The semantic component to render the Link. Preferrably `\"a\"`, `\"button\"` or something like `Link` from NextJS. Defaults to `\"a\"`. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, keyof SideNavigationItemBaseProps | \"component\">;\n\nconst SideNavigationItem = <C extends ElementType>({\n  children,\n  icon,\n  active,\n  component = \"a\" as C,\n  ...props\n}: SideNavigationItemProps<C>) => {\n  const Component: ElementType = component;\n  const classNames = [\n    \"typography-input-text text-clr-on-bg-high flex items-center gap-3 px-1 py-2\",\n    \"no-underline hover:underline underline-offset-[30%]\",\n    \"focus:outline outline-clr-on-bg-high outline-offset-0\",\n    \"aria-current-page:underline aria-current-page:decoration-[15%]\",\n  ].join(\" \");\n  return (\n    <li>\n      <Component {...props} className={classNames} aria-current={active ? \"page\" : undefined}>\n        {icon && <Icon variant={icon} className=\"h-5 w-5 fill-clr-on-bg-high\" />}\n        <span>{children}</span>\n      </Component>\n    </li>\n  );\n};\n\nSideNavigation.displayName = \"SideNavigation\";\n\nSideNavigation.Section = SideNavigationSection;\nSideNavigation.Item = SideNavigationItem;\n\nexport default SideNavigation;\n"],"mappings":";;;;;;AAsBA,IAAM,KAAyE,EAC7E,aACA,UACA,eAAY,IACZ,gBAAa,WAET,EAAkB,GAAG,IAAU,OAGjC,kBAAC,OAAD;CACE,GAHmB,IAAY,EAAE,cAAc,EAAM,IAAI,EAAE,mBAAmB,yBAAyB;CAIvG,WAAU;CACV,aAAU;CAHZ,UAAA,CAKG,CAAC,KACA,kBAAC,OAAD;EAAK,WAAU;EACb,UAAA,kBAAC,GAAD;GAAY,SAAQ;GAAa,WAAW;GAAY,IAAG;GACxD,UAAA;EACS,CAAA;CACT,CAAA,GAEP,kBAAC,MAAD;EAAI,WAAU;EAAuB;CAAa,CAAA,CAC/C;;AA2DT,EAAe,cAAc,kBAE7B,EAAe,WArDgB,EAAE,aAAU,UAAO,eAAY,IAAO,gBAAa,WAE9E,kBAAC,MAAD;CAAI,cAAY,IAAY,IAAQ,KAAA;CAAW,WAAU;CAAzD,UAAA,CACG,CAAC,KACA,kBAAC,GAAD;EAAY,SAAQ;EAAK,WAAW;EAAY,OAAM;EACnD,UAAA;CACS,CAAA,GAEd,kBAAC,MAAD;EAAI,WAAU;EAA4B;CAAa,CAAA,CACrD;IA6CR,EAAe,QA3BoC,EACjD,aACA,SACA,WACA,eAAY,KACZ,GAAG,QAC6B;CAChC,IAAM,IAAyB,GACzB,IAAa;EACjB;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OACE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;EAAW,GAAI;EAAO,WAAW;EAAY,gBAAc,IAAS,SAAS,KAAA;EAA7E,UAAA,CACG,KAAQ,kBAAC,GAAD;GAAM,SAAS;GAAM,WAAU;EAA+B,CAAA,GACvE,kBAAC,QAAD,EAAO,YAAe,CAAA,CACb;CACT,CAAA,EAAA,CAAA;AAER"}
+{"version":3,"file":"SideNavigation.js","names":[],"sources":["../../../src/components/SideNavigation/SideNavigation.tsx"],"sourcesContent":["\"use client\";\n\nimport Icon, { type IconType } from \"@bonprix-ds/react-icon\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport type { TitleLevel } from \"@bonprix-ds/utils\";\nimport React, { ComponentProps, ElementType, FC, ReactNode } from \"react\";\n\nimport { useBreakpointDown } from \"@hooks\";\n\ninterface NavigationTitle {\n  title: string;\n  hideTitle?: boolean;\n  titleLevel?: TitleLevel;\n}\n\ninterface SideNavigationSubcomponents {\n  Section: typeof SideNavigationSection;\n  Item: typeof SideNavigationItem;\n}\n\nexport interface SideNavigationProps extends NavigationTitle {\n  children: ReactNode;\n}\n\nconst SideNavigation: FC<SideNavigationProps> & SideNavigationSubcomponents = ({\n  children,\n  title,\n  hideTitle = false,\n  titleLevel = \"h3\",\n}) => {\n  if (useBreakpointDown(\"m\")) return null;\n  const labelAttribute = hideTitle ? { \"aria-label\": title } : { \"aria-labelledby\": \"side-navigation-header\" };\n  return (\n    <nav\n      {...labelAttribute}\n      className=\"preflight pt-6 ps-6 pe-2 bg-clr-bg-main h-screen overflow-auto min-w-[18.75rem] max-w-[31.25rem] w-fit\"\n      data-bpds=\"side-navigation\"\n    >\n      {!hideTitle && (\n        <div className=\"pt-3 pb-6\">\n          <Typography variant=\"bonprix-h4\" component={titleLevel} id=\"side-navigation-header\">\n            {title}\n          </Typography>\n        </div>\n      )}\n      <ul className=\"flex flex-col gap-3\">{children}</ul>\n    </nav>\n  );\n};\n\ninterface SideNavigationSectionProps extends NavigationTitle {\n  children: ReactNode;\n}\n\nconst SideNavigationSection = ({ children, title, hideTitle = false, titleLevel = \"h4\" }: SideNavigationSectionProps) => {\n  return (\n    <li aria-label={hideTitle ? title : undefined} className=\"pb-3 border-b border-clr-bg-main-light last:border-none flex flex-col gap-3\">\n      {!hideTitle && (\n        <Typography variant=\"h6\" component={titleLevel} color=\"on-bg-mid\">\n          {title}\n        </Typography>\n      )}\n      <ul className=\"flex flex-col gap-3 ps-1\">{children}</ul>\n    </li>\n  );\n};\n\ninterface SideNavigationItemBaseProps {\n  /** The text content of the list item. */\n  children: string;\n  /** The icon to display in front of the list item. */\n  icon?: IconType;\n  /** Should be set to `true`, if the current page is equal to the link in this item. */\n  active?: boolean;\n}\n\ntype SideNavigationItemProps<C extends ElementType> = SideNavigationItemBaseProps & {\n  /** The semantic component to render the Link. Preferrably `\"a\"`, `\"button\"` or something like `Link` from NextJS. Defaults to `\"a\"`. Native props will be passed to this component. */\n  component?: C;\n} & Omit<ComponentProps<C>, keyof SideNavigationItemBaseProps | \"component\">;\n\nconst SideNavigationItem = <C extends ElementType>({\n  children,\n  icon,\n  active,\n  component = \"a\" as C,\n  ...props\n}: SideNavigationItemProps<C>) => {\n  const Component: ElementType = component;\n  const classNames = [\n    \"typography-input-text text-clr-on-bg-high flex items-center gap-3 px-1 py-2\",\n    \"no-underline hover:underline underline-offset-[30%]\",\n    \"focus:outline outline-clr-on-bg-high outline-offset-0\",\n    \"aria-current-page:underline aria-current-page:decoration-[15%]\",\n  ].join(\" \");\n  return (\n    <li>\n      <Component {...props} className={classNames} aria-current={active ? \"page\" : undefined}>\n        {icon && <Icon variant={icon} className=\"h-5 w-5 fill-clr-on-bg-high\" />}\n        <span>{children}</span>\n      </Component>\n    </li>\n  );\n};\n\nSideNavigation.displayName = \"SideNavigation\";\n\nSideNavigation.Section = SideNavigationSection;\nSideNavigation.Item = SideNavigationItem;\n\nexport default SideNavigation;\n"],"mappings":";;;;;;;AAwBA,IAAM,KAAyE,EAC7E,aACA,UACA,eAAY,IACZ,gBAAa,WAET,EAAkB,GAAG,IAAU,OAGjC,kBAAC,OAAD;CACE,GAHmB,IAAY,EAAE,cAAc,EAAM,IAAI,EAAE,mBAAmB,yBAAyB;CAIvG,WAAU;CACV,aAAU;CAHZ,UAAA,CAKG,CAAC,KACA,kBAAC,OAAD;EAAK,WAAU;EACb,UAAA,kBAAC,GAAD;GAAY,SAAQ;GAAa,WAAW;GAAY,IAAG;GACxD,UAAA;EACS,CAAA;CACT,CAAA,GAEP,kBAAC,MAAD;EAAI,WAAU;EAAuB;CAAa,CAAA,CAC/C;;AA2DT,EAAe,cAAc,kBAE7B,EAAe,WArDgB,EAAE,aAAU,UAAO,eAAY,IAAO,gBAAa,WAE9E,kBAAC,MAAD;CAAI,cAAY,IAAY,IAAQ,KAAA;CAAW,WAAU;CAAzD,UAAA,CACG,CAAC,KACA,kBAAC,GAAD;EAAY,SAAQ;EAAK,WAAW;EAAY,OAAM;EACnD,UAAA;CACS,CAAA,GAEd,kBAAC,MAAD;EAAI,WAAU;EAA4B;CAAa,CAAA,CACrD;IA6CR,EAAe,QA3BoC,EACjD,aACA,SACA,WACA,eAAY,KACZ,GAAG,QAC6B;CAChC,IAAM,IAAyB,GACzB,IAAa;EACjB;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OACE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;EAAW,GAAI;EAAO,WAAW;EAAY,gBAAc,IAAS,SAAS,KAAA;EAA7E,UAAA,CACG,KAAQ,kBAAC,GAAD;GAAM,SAAS;GAAM,WAAU;EAA+B,CAAA,GACvE,kBAAC,QAAD,EAAO,YAAe,CAAA,CACb;CACT,CAAA,EAAA,CAAA;AAER"}

package/dist/components/ThemeForcer/ThemeForcer.js

@@ -1,4 +1,3 @@
-"use client";
 import "react";
 import { jsx as e } from "react/jsx-runtime";
 //#region src/components/ThemeForcer/ThemeForcer.tsx

package/dist/components/ThemeForcer/ThemeForcer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeForcer.js","names":[],"sources":["../../../src/components/ThemeForcer/ThemeForcer.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { FC, ReactNode } from \"react\";\n\nexport interface Props {\n  /** Nodes, for which a theme should be forced. */\n  children?: ReactNode;\n  /** A theme value to use on the child nodes. */\n  theme: \"light\" | \"dark\";\n  /** Additional CSS classes. */\n  className?: string;\n  /** If `true`, the component will be rendered as an inline element. */\n  inline?: boolean;\n}\n\nconst ThemeForcer: FC<Props> = ({ children, theme, className, inline = false }) => {\n  const Component = inline ? \"span\" : \"div\";\n  return (\n    <Component data-mode={theme} className={className} data-bpds=\"theme-forcer\" data-bpds-inline={inline}>\n      {children}\n    </Component>\n  );\n};\n\nexport default ThemeForcer;\n"],"mappings":";;;;AAeA,IAAM,KAA0B,EAAE,aAAU,UAAO,cAAW,YAAS,SAGnE,kBAFgB,IAAS,SAAS,OAElC;CAAW,aAAW;CAAkB;CAAW,aAAU;CAAe,oBAAkB;CAC3F;AACQ,CAAA"}
+{"version":3,"file":"ThemeForcer.js","names":[],"sources":["../../../src/components/ThemeForcer/ThemeForcer.tsx"],"sourcesContent":["import React, { FC, ReactNode } from \"react\";\n\nexport interface Props {\n  /** Nodes, for which a theme should be forced. */\n  children?: ReactNode;\n  /** A theme value to use on the child nodes. */\n  theme: \"light\" | \"dark\";\n  /** Additional CSS classes. */\n  className?: string;\n  /** If `true`, the component will be rendered as an inline element. */\n  inline?: boolean;\n}\n\nconst ThemeForcer: FC<Props> = ({ children, theme, className, inline = false }) => {\n  const Component = inline ? \"span\" : \"div\";\n  return (\n    <Component data-mode={theme} className={className} data-bpds=\"theme-forcer\" data-bpds-inline={inline}>\n      {children}\n    </Component>\n  );\n};\n\nexport default ThemeForcer;\n"],"mappings":";;;AAaA,IAAM,KAA0B,EAAE,aAAU,UAAO,cAAW,YAAS,SAGnE,kBAFgB,IAAS,SAAS,OAElC;CAAW,aAAW;CAAkB;CAAW,aAAU;CAAe,oBAAkB;CAC3F;AACQ,CAAA"}

package/dist/index.d.ts

@@ -217,7 +217,7 @@ export declare const BottomSheet: FC<BottomSheetProps> & SheetSubcomponents;
 
 export declare interface BottomSheetProps extends SheetProps {
     /** A reference to the root element of the sheet. */
-    ref?: Ref<HTMLDivElement>;
+    ref?: RefObject<HTMLDivElement>;
 }
 
 export declare const Breadcrumb: <C extends ElementType>({ currentPageTitle, previousPageTitle, previousPageUrl, hideHeader, numberOfItemsText, previousPageComponent, ...previousLinkProps }: BreadcrumbProps<C>) => default_2.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonprix-design-system",
-  "version": "0.69.0",
+  "version": "0.69.2",
   "description": "Design System of bonprix",
   "type": "module",
   "publishConfig": {
@@ -48,34 +48,34 @@
     "tailwind-merge": "2.6.1",
     "tailwind-variants": "0.3.1",
     "@bonprix-ds/assets": "1.1.0",
-    "@bonprix-ds/react-accordion": "1.0.2",
-    "@bonprix-ds/internal-components": "0.1.0",
-    "@bonprix-ds/react-alert": "1.0.1",
-    "@bonprix-ds/react-availability": "1.0.1",
-    "@bonprix-ds/react-benefit-tag": "1.1.2",
-    "@bonprix-ds/react-checkbox": "1.0.1",
-    "@bonprix-ds/react-checkbox-group": "1.0.1",
-    "@bonprix-ds/react-collapsible": "1.0.2",
-    "@bonprix-ds/react-container": "1.0.1",
-    "@bonprix-ds/react-figurine": "1.0.2",
-    "@bonprix-ds/react-grid": "1.0.1",
-    "@bonprix-ds/react-icon": "1.1.0",
-    "@bonprix-ds/react-icon-button": "1.1.0",
-    "@bonprix-ds/react-illustration": "1.0.2",
-    "@bonprix-ds/react-list": "1.1.1",
-    "@bonprix-ds/react-logo": "1.0.2",
-    "@bonprix-ds/react-pagination": "1.1.0",
-    "@bonprix-ds/react-price": "1.0.2",
-    "@bonprix-ds/react-price-stacked": "1.0.1",
-    "@bonprix-ds/react-radio-group": "1.0.1",
-    "@bonprix-ds/react-rating": "1.0.1",
-    "@bonprix-ds/react-select": "1.0.1",
-    "@bonprix-ds/react-spinner": "1.0.1",
-    "@bonprix-ds/react-step-navi": "1.0.1",
-    "@bonprix-ds/react-switch": "1.0.1",
-    "@bonprix-ds/react-tooltip": "1.0.1",
-    "@bonprix-ds/react-typography": "1.0.1",
-    "@bonprix-ds/utils": "0.1.1"
+    "@bonprix-ds/internal-components": "0.1.1",
+    "@bonprix-ds/react-accordion": "1.0.3",
+    "@bonprix-ds/react-alert": "1.0.2",
+    "@bonprix-ds/react-availability": "1.0.2",
+    "@bonprix-ds/react-checkbox": "1.0.2",
+    "@bonprix-ds/react-checkbox-group": "1.0.2",
+    "@bonprix-ds/react-collapsible": "1.0.3",
+    "@bonprix-ds/react-figurine": "1.0.3",
+    "@bonprix-ds/react-grid": "1.0.2",
+    "@bonprix-ds/react-icon": "1.1.1",
+    "@bonprix-ds/react-icon-button": "1.1.1",
+    "@bonprix-ds/react-benefit-tag": "1.1.3",
+    "@bonprix-ds/react-illustration": "1.0.3",
+    "@bonprix-ds/react-list": "1.1.2",
+    "@bonprix-ds/react-logo": "1.0.3",
+    "@bonprix-ds/react-pagination": "1.1.1",
+    "@bonprix-ds/react-price": "1.0.3",
+    "@bonprix-ds/react-price-stacked": "1.0.2",
+    "@bonprix-ds/react-radio-group": "1.0.2",
+    "@bonprix-ds/react-container": "1.0.2",
+    "@bonprix-ds/react-select": "1.0.2",
+    "@bonprix-ds/react-spinner": "1.0.2",
+    "@bonprix-ds/react-step-navi": "1.0.2",
+    "@bonprix-ds/react-switch": "1.0.2",
+    "@bonprix-ds/react-tooltip": "1.0.2",
+    "@bonprix-ds/react-typography": "1.0.2",
+    "@bonprix-ds/utils": "0.1.2",
+    "@bonprix-ds/react-rating": "1.0.2"
   },
   "peerDependencies": {
     "lit": "^3.3.1",
@@ -89,7 +89,7 @@
     "@chromatic-com/storybook": "5.2.1",
     "@mermaid-js/mermaid-cli": "11.16.0",
     "@microsoft/api-extractor": "7.58.12",
-    "@size-limit/preset-big-lib": "13.0.1",
+    "@size-limit/preset-big-lib": "13.0.3",
     "@storybook/addon-a11y": "10.5.5",
     "@storybook/addon-docs": "10.5.5",
     "@storybook/addon-themes": "10.5.5",
@@ -98,22 +98,22 @@
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
     "@types/lodash.throttle": "4.1.9",
     "@types/node": "24.13.3",
-    "@types/react": "19.2.17",
-    "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "6.0.4",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.4",
+    "@vitejs/plugin-react": "6.0.5",
     "@vitest/browser": "4.1.10",
     "@vitest/browser-playwright": "4.1.10",
     "@vitest/coverage-v8": "4.1.10",
     "autoprefixer": "10.5.4",
     "chromatic": "18.1.0",
     "concurrently": "10.0.4",
-    "playwright": "1.62.0",
-    "postcss": "8.5.23",
+    "playwright": "1.62.1",
+    "postcss": "8.5.25",
     "postcss-import": "16.1.1",
     "prettier": "3.9.6",
     "react-hook-form": "7.84.0",
     "rollup-preserve-directives": "1.1.3",
-    "size-limit": "13.0.1",
+    "size-limit": "13.0.3",
     "storybook": "10.5.5",
     "style-dictionary": "5.5.0",
     "tailwindcss": "3.4.19",