bonprix-design-system 0.69.2 → 0.70.0

package/dist/components/BottomSheet/BottomSheet.js

@@ -34,7 +34,7 @@ var h = c({
 		false: { scrollArea: "px-4" },
 		true: ""
 	} }
-}), g = ({ children: e, isOpen: n, onClose: i, onBack: o, zIndex: c = 2, ref: d }) => {
+}), g = ({ children: e, isOpen: n, onClose: i, onBack: o, zIndex: c = 9999, ref: d }) => {
 	let g = p(), { root: _, container: v, dragHandleContainer: y, dragHandle: b, content: x, contentWrapper: S, backdrop: C } = h(), { isShown: w, scrollRef: T, scrollPosition: E } = a({ isOpen: n }), D = E === "middle" || E === "bottom", { innerOpen: O } = t(w), k = s();
 	return /* @__PURE__ */ u(m, {
 		isOpen: O,
@@ -43,14 +43,19 @@ var h = c({
 		detent: "content",
 		"data-bpds": "bottom-sheet",
 		prefersReducedMotion: g,
-		style: { "--touch-action": D ? "initial" : "pan-down" },
+		style: {
+			"--touch-action": D ? "initial" : "pan-down",
+			pointerEvents: void 0,
+			visibility: O ? "visible" : "hidden",
+			zIndex: c
+		},
 		role: "dialog",
 		avoidKeyboard: !1,
 		"aria-labelledby": k,
 		children: [/* @__PURE__ */ u(m.Container, {
 			className: v(),
 			ref: d,
-			style: { zIndex: c },
+			style: { pointerEvents: void 0 },
 			children: [/* @__PURE__ */ l(m.Header, {
 				unstyled: !0,
 				className: y(),
@@ -59,7 +64,7 @@ var h = c({
 					className: b()
 				})
 			}), /* @__PURE__ */ l(f.Provider, {
-				value: 1e4,
+				value: c,
 				children: /* @__PURE__ */ l(r.Provider, {
 					value: {
 						scrollRef: T,
@@ -83,8 +88,7 @@ var h = c({
 		}), /* @__PURE__ */ l(m.Backdrop, {
 			"aria-label": "Bottom Sheet schließen",
 			onTap: i,
-			className: C(),
-			style: { zIndex: c - 1 }
+			className: C()
 		})]
 	});
 };
@@ -125,6 +129,7 @@ g.displayName = "BottomSheet", g.Title = ({ children: e, subline: t, level: n =
 		ref: n,
 		className: r(),
 		"data-bpds-disable-horizontal-padding": t,
+		tabIndex: 0,
 		children: e
 	});
 }, g.ButtonSection = ({ children: e }) => /* @__PURE__ */ l("div", {

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, 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":";;;;;;;;;;;;;;;AAkBA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,MAAM;EACN,WAAW;EACX,QAAQ;EACR,eAAe;EACf,gBAAgB;EAChB,SAAS;GACP;GAGA;GAEA;EACF;EACA,qBAAqB;EACrB,YAAY;EACZ,UAAU,EAAS;EACnB,YAAY;CACd;CACA,UAAU,EACR,0BAA0B;EACxB,OAAO,EAAE,YAAY,OAAO;EAC5B,MAAM;CACR,EACF;AACF,CAAC,GA4EK,KAA+C,EAAE,aAAU,WAAQ,YAAS,WAAQ,YAAS,GAAG,aAAU;CAE9G,IAAM,IAAuB,EAAwB,GAC/C,EAAE,SAAM,cAAW,wBAAqB,eAAY,YAAS,mBAAgB,gBAAa,EAAgB,GAC1G,EAAE,YAAS,cAAW,sBAAmB,EAAqB,EAAE,UAAO,CAAC,GAIxE,IAAc,MAAmB,YAAY,MAAmB,UAEhE,EAAE,iBAAc,EAAa,CAAO,GAEpC,IAAU,EAAM;CAEtB,OACE,kBAAC,GAAD;EACE,QAAQ;EACC;EACT,WAAW,EAAK;EAChB,QAAO;EACP,aAAU;EACY;EAGtB,OAAO,EAAE,kBAAkB,IAAc,YAAY,WAAW;EAChE,MAAK;EACL,eAAe;EACf,mBAAiB;EAZnB,UAAA,CAcE,kBAAC,EAAM,WAAP;GAAiB,WAAW,EAAU;GAAQ;GAAK,OAAO,EAAE,UAAO;GAAnE,UAAA,CACE,kBAAC,EAAM,QAAP;IAAc,UAAA;IAAS,WAAW,EAAoB;IACpD,UAAA,kBAAC,EAAM,eAAP;KAAqB,UAAA;KAAS,WAAW,EAAW;IAAI,CAAA;GAC5C,CAAA,GACd,kBAAC,EAAc,UAAf;IAAwB,OAAO;IAC7B,UAAA,kBAAC,EAAmB,UAApB;KAA6B,OAAO;MAAE;MAAW;MAAgB;MAAS;MAAQ;KAAQ;KACxF,UAAA,kBAAC,EAAM,SAAP;MACE,WAAW,EAAQ;MAEnB,eAAA;MAEa;MAEb,OAAO,EAAE,eAAe,mFAAmF;MAE3G,UAAA,kBAAC,OAAD;OAAK,WAAW,EAAe;OAAI;MAAc,CAAA;KACpC,CAAA;IACY,CAAA;GACP,CAAA,CACT;EAEjB,CAAA,GAAA,kBAAC,EAAM,UAAP;GAAgB,cAAW;GAAyB,OAAO;GAAS,WAAW,EAAS;GAAG,OAAO,EAAE,QAAQ,IAAS,EAAE;EAAI,CAAA,CACtH;;AAEX;AA8FA,EAAY,cAAc,eAE1B,EAAY,SA5FG,EAAE,aAAU,YAAS,WAAQ,WAA4B;CACtE,IAAM,EAAE,WAAQ,YAAS,eAAY,EAAsB,GACrD,EAAE,WAAQ,qBAAkB,EAAgB;CAClD,OACE,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAvB,UAAA,CACE,kBAAC,OAAD;GAAK,WAAW,EAAc;GAA9B,UAAA;IACG,KAAU,kBAAC,GAAD;KAAY,SAAS;KAAQ,MAAK;KAAa,OAAM;KAAS,SAAQ;KAAW,MAAK;IAAS,CAAA;IAC1G,kBAAC,GAAD;KAAY,SAAQ;KAAa,WAAW;KAAO,WAAU;KAAoB,IAAI;KAClF;IACS,CAAA;IACZ,kBAAC,GAAD;KAAY,SAAS;KAAS,MAAK;KAAS,OAAM;KAAY,SAAQ;KAAW,MAAK;IAAS,CAAA;GAC5F;EACJ,CAAA,GAAA,KAAW,kBAAC,GAAD,EAAA,UAAa,EAAoB,CAAA,CAC1C;;AAET,GA8EA,EAAY,WA5EK,EAAE,aAAU,8BAA2B,SAA+B;CACrF,IAAM,EAAE,WAAW,MAAiB,EAAsB,GACpD,EAAE,kBAAe,EAAgB,EAAE,4BAAyB,CAAC;CAEnE,OACE,kBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,EAAW;EAAG,wCAAsC;EACpF;CACE,CAAA;AAET,GAoEA,EAAY,iBAlEW,EAAE,kBAChB,kBAAC,OAAD;CAAK,WAAU;CAA+E;AAAc,CAAA,GAkErH,EAAY,iBA/DkC,EAC5C,aACA,SACA,iBACA,YACA,eAAY,UACZ,GAAG,QAC6B;CAChC,IAAM,IAAyB,GACzB,EAAE,YAAS,UAAO,UAAU,GAAG,MAAe,GAC9C,EAAE,eAAY,EAAsB,GACpC,KAAe,MAA4B;EAG/C,AADA,IAAU,CAAK,GACf,EAAQ;CACV;CACA,OACE,kBAAC,GAAD;EACE,WAAW;EACX,GAAI;EACJ,SAAQ;EACR,SAAS;EACH;EACA;EACQ;EACd,MAAK;EACI;EAER;CACK,CAAA;AAEZ,GAiCA,EAAY,mBA/BoC,EAC9C,aACA,SACA,iBACA,eAAY,UACZ,GAAG,QACsB;CACzB,IAAM,IAAyB,GACzB,EAAE,eAAY,EAAsB;CAC1C,OACE,kBAAC,GAAD;EACE,WAAW;EACX,GAAI;EACJ,SAAQ;EACR,MAAK;EACL,SAAS;EACH;EACQ;EACd,MAAK;EAEJ;CACK,CAAA;AAEZ"}
+{"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 = 9999, 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      style={{\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        \"--touch-action\": disableDrag ? \"initial\" : \"pan-down\",\n        // We remove `pointer-events` handling from the library because it interfers with a lot of things like opened Selects that wouldn't close etc.\n        pointerEvents: undefined,\n        // When removing react-modal-sheet's pointerEvents handling, we need to adjust visibility because we can no longer rely on `pointer-events: none` being set on the wrapper that spans the whole page even when closed.\n        visibility: innerOpen ? \"visible\" : \"hidden\",\n        zIndex: zIndex,\n      }}\n      role=\"dialog\"\n      avoidKeyboard={false}\n      aria-labelledby={titleId}\n    >\n      {/* We remove `pointer-events` handling from the library because it interfers with a lot of things like opened Selects that wouldn't close etc. */}\n      <Sheet.Container className={container()} ref={ref} style={{ pointerEvents: undefined }}>\n        <Sheet.Header unstyled className={dragHandleContainer()}>\n          <Sheet.DragIndicator unstyled className={dragHandle()} />\n        </Sheet.Header>\n        <ZIndexContext.Provider value={zIndex}>\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()} />\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  return (\n    <div ref={setScrollRef} className={scrollArea()} data-bpds-disable-horizontal-padding={disableHorizontalPadding} tabIndex={0}>\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/Carousel/Carousel.js

@@ -1,12 +1,11 @@
 "use client";
-import { useSubcomponent as e } from "../../hooks/index.js";
-import t from "./CarouselArrow.js";
+import e from "./CarouselArrow.js";
 import "react";
-import { tv as n } from "tailwind-variants";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Splide as a, SplideSlide as o, SplideTrack as s } from "@splidejs/react-splide";
+import { tv as t } from "tailwind-variants";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Splide as i, SplideSlide as a, SplideTrack as o } from "@splidejs/react-splide";
 //#region src/components/Carousel/Carousel.tsx
-var c = n({
+var s = t({
 	slots: {
 		root: "",
 		buttons: "",
@@ -25,21 +24,19 @@ var c = n({
 		},
 		never: ""
 	} }
-}), l = ({ children: n, label: l, perPage: u = 1, perMove: d = 1, rewind: f = !1, buttonsContrast: p = !1, invertButtons: m = !1, focus: h, gap: g = 20, showArrows: _ = "always", pagination: v = !0, onMove: y, padding: b, disableHorizontalPadding: x = !1, start: S = 0, disableDrag: C = !1, paginationRef: w }) => {
-	let { getChildrenFromSubcomponent: T, printBadConstructionMessage: E } = e(n), { root: D, buttons: O, paginationClass: k, page: A } = c({ showArrows: _ });
-	if (!n) return E("Carousel"), null;
-	let j = {
-		perPage: u,
-		perMove: d,
-		type: f ? "loop" : "slide",
-		focus: h,
-		gap: g,
-		arrows: _ !== "never",
-		pagination: v,
-		padding: b,
-		start: S,
+}), c = ({ children: t, label: a, perPage: c = 1, perMove: l = 1, rewind: u = !1, buttonsContrast: d = !1, invertButtons: f = !1, focus: p, gap: m = 20, showArrows: h = "always", pagination: g = !0, onMove: _, padding: v, disableHorizontalPadding: y = !1, start: b = 0, disableDrag: x = !1, paginationRef: S }) => {
+	let { root: C, buttons: w, paginationClass: T, page: E } = s({ showArrows: h }), D = {
+		perPage: c,
+		perMove: l,
+		type: u ? "loop" : "slide",
+		focus: p,
+		gap: m,
+		arrows: h !== "never",
+		pagination: g,
+		padding: v,
+		start: b,
 		lazyLoad: "nearby",
-		classes: { page: A() },
+		classes: { page: E() },
 		i18n: {
 			prev: "vorherige Ansicht",
 			next: "nächste Ansicht",
@@ -54,50 +51,50 @@ var c = n({
 			slide: "slide",
 			slideLabel: "%s von %s"
 		},
-		drag: !C
+		drag: !x
 	};
-	return /* @__PURE__ */ i(a, {
-		"aria-label": l,
-		options: j,
+	return /* @__PURE__ */ r(i, {
+		"aria-label": a,
+		options: D,
 		hasTrack: !1,
-		onMove: (e, t, n) => y?.(t, n),
+		onMove: (e, t, n) => _?.(t, n),
 		"data-bpds": "carousel",
-		"data-bpds-per-page": u,
-		"data-bpds-per-move": d,
-		"data-bpds-rewind": f,
-		"data-bpds-buttons-contrast": p,
-		"data-bpds-invert-buttons": m,
-		"data-bpds-disable-horizontal-padding": x,
-		"data-bpds-gap": g,
-		"data-bpds-padding": b,
-		"data-bpds-pagination": v,
-		"data-bpds-show-arrows": _,
-		className: D(),
+		"data-bpds-per-page": c,
+		"data-bpds-per-move": l,
+		"data-bpds-rewind": u,
+		"data-bpds-buttons-contrast": d,
+		"data-bpds-invert-buttons": f,
+		"data-bpds-disable-horizontal-padding": y,
+		"data-bpds-gap": m,
+		"data-bpds-padding": v,
+		"data-bpds-pagination": g,
+		"data-bpds-show-arrows": h,
+		className: C(),
 		children: [
-			/* @__PURE__ */ i("div", {
-				className: `splide__arrows ${O()}`,
-				children: [/* @__PURE__ */ r(t, {
-					invertButtons: m,
+			/* @__PURE__ */ r("div", {
+				className: `splide__arrows ${w()}`,
+				children: [/* @__PURE__ */ n(e, {
+					invertButtons: f,
 					position: "left",
-					buttonsContrast: p,
-					disableHorizontalPadding: x
-				}), /* @__PURE__ */ r(t, {
-					invertButtons: m,
+					buttonsContrast: d,
+					disableHorizontalPadding: y
+				}), /* @__PURE__ */ n(e, {
+					invertButtons: f,
 					position: "right",
-					buttonsContrast: p,
-					disableHorizontalPadding: x
+					buttonsContrast: d,
+					disableHorizontalPadding: y
 				})]
 			}),
-			/* @__PURE__ */ r(s, { children: T(o) }),
-			/* @__PURE__ */ r("ul", {
-				className: k(),
-				ref: w
+			/* @__PURE__ */ n(o, { children: t }),
+			/* @__PURE__ */ n("ul", {
+				className: T(),
+				ref: S
 			})
 		]
 	});
 };
-l.displayName = "Carousel", l.Slide = o, o.displayName = "Carousel.Slide";
+c.displayName = "Carousel", c.Slide = a, a.displayName = "Carousel.Slide";
 //#endregion
-export { l as default };
+export { c as default };
 
 //# sourceMappingURL=Carousel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment */\nimport React, { ComponentPropsWithoutRef, FC, Ref } from \"react\";\nimport { tv } from \"tailwind-variants\";\n// @ts-expect-error: Splide does not export its types correctly and hasn't been maintained for a few years now, so we are not expecting that to change. This component will be replaced soon, so we'll not take effort to fix or patch this.\nimport { Options, Splide, SplideSlide, SplideTrack } from \"@splidejs/react-splide\";\n\nimport { useSubcomponent } from \"@hooks\";\n\nimport CarouselArrow from \"./CarouselArrow\";\n\nconst generateClasses = tv({\n  slots: {\n    root: \"\",\n    buttons: \"\",\n    paginationClass: \"splide__pagination flex gap-1 absolute start-0 end-0 bottom-2 px-4 py-0 z-1\",\n    page: [\n      \"splide__pagination__page block p-0 relative bg-clr-on-bg-low w-3 h-0.25 m-0 opacity-100 border-none rounded-none transform-none transition-all\",\n      \"[&.is-active]:bg-clr-black [&.is-active]:h-1\",\n      \"after:content-[''] after:absolute after:start-0 after:-mt-1 after:h-2 after:w-3 after:cursor-pointer [&.is-active]:after:content-[]\",\n    ],\n  },\n  variants: {\n    showArrows: {\n      always: \"\",\n      hover: {\n        root: \"group/crsl\",\n        buttons: \"hidden group-hover/crsl:flex\",\n      },\n      never: \"\",\n    },\n  },\n});\n\ninterface Subcomponents {\n  Slide: typeof SplideSlide;\n}\n\nexport interface Props {\n  /** The content of the carousel. Here, Carousel.Slide subcomponents should be placed. */\n  children: React.ReactNode;\n  /** Sets accessible label with help of `aria-label` */\n  label: string;\n  /** Amount of slides to show per page. */\n  perPage?: number;\n  /** Amount of slides to move on each transition. */\n  perMove?: number;\n  /** If set to `true`, the carousel will loop back to the first slide after reaching the last one. */\n  rewind?: boolean;\n  /** If set to `true`, the primary variant of icon buttons will be used to achieve a high contrast. */\n  buttonsContrast?: boolean;\n  /** If set to `true`, the color of the arrow buttons will be inverted. */\n  invertButtons?: boolean;\n  /** If set to `true`, the horizontal padding for the arrow buttons will be removed. */\n  disableHorizontalPadding?: boolean;\n  /** Determines which slide should be active if there are multiple slides in a page */\n  focus?: number | \"center\";\n  /** The gap between the slides in pixels. */\n  gap?: number;\n  /** Manages the behavior of the arrow icon buttons. */\n  showArrows?: \"always\" | \"hover\" | \"never\";\n  /** Toggles the visibility of page indicators. */\n  pagination?: boolean;\n  /** Callback function that is called when the slide changes. */\n  onMove?: (destIndex: number, prevIndex: number) => void;\n  /** Sets padding left/right or top/bottom of the carousel. The CSS format is acceptable */\n  padding?: Options[\"padding\"];\n  /** The index of the initial slide to be displayed */\n  start?: number;\n  /* If `true`, disables dragging/swiping between slides. Can be used to control touch events and implement further gestures like pinch/zoom. */\n  disableDrag?: boolean;\n  /* Ref to the pagination element. Can be used to control pagination from outside of the Carousel component. */\n  paginationRef?: Ref<HTMLUListElement>;\n}\n\ntype SplideProps = ComponentPropsWithoutRef<typeof Splide>;\ntype SplideOptions = SplideProps[\"options\"];\n\nconst Carousel: FC<Props> & Subcomponents = ({\n  children,\n  label,\n  perPage = 1,\n  perMove = 1,\n  rewind = false,\n  buttonsContrast = false,\n  invertButtons = false,\n  focus,\n  gap = 20,\n  showArrows = \"always\",\n  pagination = true,\n  onMove,\n  padding,\n  disableHorizontalPadding = false,\n  start = 0,\n  disableDrag = false,\n  paginationRef,\n}) => {\n  const { getChildrenFromSubcomponent, printBadConstructionMessage } = useSubcomponent(children);\n  const { root, buttons, paginationClass, page } = generateClasses({ showArrows });\n\n  if (!children) {\n    printBadConstructionMessage(\"Carousel\");\n    return null;\n  }\n\n  const options: SplideOptions = {\n    perPage,\n    perMove,\n    type: rewind ? \"loop\" : \"slide\",\n    focus,\n    gap,\n    arrows: showArrows !== \"never\",\n    pagination,\n    padding,\n    start,\n    lazyLoad: \"nearby\",\n    classes: { page: page() },\n    i18n: {\n      prev: \"vorherige Ansicht\",\n      next: \"nächste Ansicht\",\n      first: \"erste Ansicht\",\n      last: \"letzte Ansicht\",\n      slideX: \"gehe zu Ansicht %s\",\n      pageX: \"gehe zu Seite %s\",\n      play: \"starte Wiedergabe\",\n      pause: \"pausiere Wiedergabe\",\n      carousel: \"carousel\",\n      select: \"wähle eine Ansicht aus\",\n      slide: \"slide\",\n      slideLabel: \"%s von %s\",\n    },\n    drag: !disableDrag,\n  };\n\n  return (\n    <Splide\n      aria-label={label}\n      options={options}\n      hasTrack={false}\n      onMove={(_slide: unknown, destIndex: number, prevIndex: number) => onMove?.(destIndex, prevIndex)}\n      data-bpds=\"carousel\"\n      data-bpds-per-page={perPage}\n      data-bpds-per-move={perMove}\n      data-bpds-rewind={rewind}\n      data-bpds-buttons-contrast={buttonsContrast}\n      data-bpds-invert-buttons={invertButtons}\n      data-bpds-disable-horizontal-padding={disableHorizontalPadding}\n      data-bpds-gap={gap}\n      data-bpds-padding={padding}\n      data-bpds-pagination={pagination}\n      data-bpds-show-arrows={showArrows}\n      className={root()}\n    >\n      <div className={`splide__arrows ${buttons()}`}>\n        <CarouselArrow\n          invertButtons={invertButtons}\n          position=\"left\"\n          buttonsContrast={buttonsContrast}\n          disableHorizontalPadding={disableHorizontalPadding}\n        />\n        <CarouselArrow\n          invertButtons={invertButtons}\n          position=\"right\"\n          buttonsContrast={buttonsContrast}\n          disableHorizontalPadding={disableHorizontalPadding}\n        />\n      </div>\n      <SplideTrack>{getChildrenFromSubcomponent(SplideSlide)}</SplideTrack>\n      <ul className={paginationClass()} ref={paginationRef}></ul>\n    </Splide>\n  );\n};\n\nCarousel.displayName = \"Carousel\";\n\nCarousel.Slide = SplideSlide;\n// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\nSplideSlide.displayName = \"Carousel.Slide\";\n\nexport default Carousel;\n"],"mappings":";;;;;;;;AAYA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,MAAM;EACN,SAAS;EACT,iBAAiB;EACjB,MAAM;GACJ;GACA;GACA;EACF;CACF;CACA,UAAU,EACR,YAAY;EACV,QAAQ;EACR,OAAO;GACL,MAAM;GACN,SAAS;EACX;EACA,OAAO;CACT,EACF;AACF,CAAC,GA8CK,KAAuC,EAC3C,aACA,UACA,aAAU,GACV,aAAU,GACV,YAAS,IACT,qBAAkB,IAClB,mBAAgB,IAChB,UACA,SAAM,IACN,gBAAa,UACb,gBAAa,IACb,WACA,YACA,8BAA2B,IAC3B,WAAQ,GACR,iBAAc,IACd,uBACI;CACJ,IAAM,EAAE,gCAA6B,mCAAgC,EAAgB,CAAQ,GACvF,EAAE,SAAM,YAAS,oBAAiB,YAAS,EAAgB,EAAE,cAAW,CAAC;CAE/E,IAAI,CAAC,GAEH,OADA,EAA4B,UAAU,GAC/B;CAGT,IAAM,IAAyB;EAC7B;EACA;EACA,MAAM,IAAS,SAAS;EACxB;EACA;EACA,QAAQ,MAAe;EACvB;EACA;EACA;EACA,UAAU;EACV,SAAS,EAAE,MAAM,EAAK,EAAE;EACxB,MAAM;GACJ,MAAM;GACN,MAAM;GACN,OAAO;GACP,MAAM;GACN,QAAQ;GACR,OAAO;GACP,MAAM;GACN,OAAO;GACP,UAAU;GACV,QAAQ;GACR,OAAO;GACP,YAAY;EACd;EACA,MAAM,CAAC;CACT;CAEA,OACE,kBAAC,GAAD;EACE,cAAY;EACH;EACT,UAAU;EACV,SAAS,GAAiB,GAAmB,MAAsB,IAAS,GAAW,CAAS;EAChG,aAAU;EACV,sBAAoB;EACpB,sBAAoB;EACpB,oBAAkB;EAClB,8BAA4B;EAC5B,4BAA0B;EAC1B,wCAAsC;EACtC,iBAAe;EACf,qBAAmB;EACnB,wBAAsB;EACtB,yBAAuB;EACvB,WAAW,EAAK;EAhBlB,UAAA;GAkBE,kBAAC,OAAD;IAAK,WAAW,kBAAkB,EAAQ;IAA1C,UAAA,CACE,kBAAC,GAAD;KACiB;KACf,UAAS;KACQ;KACS;IAC3B,CAAA,GACD,kBAAC,GAAD;KACiB;KACf,UAAS;KACQ;KACS;IAC3B,CAAA,CACE;;GACL,kBAAC,GAAD,EAAA,UAAc,EAA4B,CAAW,EAAe,CAAA;GACpE,kBAAC,MAAD;IAAI,WAAW,EAAgB;IAAG,KAAK;GAAmB,CAAA;EACpD;;AAEZ;AAEA,EAAS,cAAc,YAEvB,EAAS,QAAQ,GAEjB,EAAY,cAAc"}
+{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport React, { ComponentPropsWithoutRef, FC, ReactElement, Ref } from \"react\";\nimport { tv } from \"tailwind-variants\";\n// @ts-expect-error: Splide does not export its types correctly and hasn't been maintained for a few years now, so we are not expecting that to change. This component will be replaced soon, so we'll not take effort to fix or patch this.\nimport { Options, Splide, SplideSlide, SplideTrack } from \"@splidejs/react-splide\";\n\nimport CarouselArrow from \"./CarouselArrow\";\n\nconst generateClasses = tv({\n  slots: {\n    root: \"\",\n    buttons: \"\",\n    paginationClass: \"splide__pagination flex gap-1 absolute start-0 end-0 bottom-2 px-4 py-0 z-1\",\n    page: [\n      \"splide__pagination__page block p-0 relative bg-clr-on-bg-low w-3 h-0.25 m-0 opacity-100 border-none rounded-none transform-none transition-all\",\n      \"[&.is-active]:bg-clr-black [&.is-active]:h-1\",\n      \"after:content-[''] after:absolute after:start-0 after:-mt-1 after:h-2 after:w-3 after:cursor-pointer [&.is-active]:after:content-[]\",\n    ],\n  },\n  variants: {\n    showArrows: {\n      always: \"\",\n      hover: {\n        root: \"group/crsl\",\n        buttons: \"hidden group-hover/crsl:flex\",\n      },\n      never: \"\",\n    },\n  },\n});\n\ninterface Subcomponents {\n  Slide: typeof SplideSlide;\n}\n\ntype SlideElement = ReactElement<ComponentPropsWithoutRef<typeof SplideSlide>, typeof SplideSlide>;\n\nexport interface Props {\n  /** The content of the carousel. Here, Carousel.Slide subcomponents should be placed. */\n  children: SlideElement | SlideElement[];\n  /** Sets accessible label with help of `aria-label`. */\n  label: string;\n  /** Amount of slides to show per page. */\n  perPage?: number;\n  /** Amount of slides to move on each transition. */\n  perMove?: number;\n  /** If set to `true`, the carousel will loop back to the first slide after reaching the last one. */\n  rewind?: boolean;\n  /** If set to `true`, the primary variant of icon buttons will be used to achieve a high contrast. */\n  buttonsContrast?: boolean;\n  /** If set to `true`, the color of the arrow buttons will be inverted. */\n  invertButtons?: boolean;\n  /** If set to `true`, the horizontal padding for the arrow buttons will be removed. */\n  disableHorizontalPadding?: boolean;\n  /** Determines which slide should be active if there are multiple slides in a page */\n  focus?: number | \"center\";\n  /** The gap between the slides in pixels. */\n  gap?: number;\n  /** Manages the behavior of the arrow icon buttons. */\n  showArrows?: \"always\" | \"hover\" | \"never\";\n  /** Toggles the visibility of page indicators. */\n  pagination?: boolean;\n  /** Callback function that is called when the slide changes. */\n  onMove?: (destIndex: number, prevIndex: number) => void;\n  /** Sets padding left/right or top/bottom of the carousel. The CSS format is acceptable */\n  padding?: Options[\"padding\"];\n  /** The index of the initial slide to be displayed */\n  start?: number;\n  /** If `true`, disables dragging/swiping between slides. Can be used to control touch events and implement further gestures like pinch/zoom. */\n  disableDrag?: boolean;\n  /** Ref to the pagination element. Can be used to control pagination from outside of the Carousel component. */\n  paginationRef?: Ref<HTMLUListElement>;\n}\n\ntype SplideProps = ComponentPropsWithoutRef<typeof Splide>;\ntype SplideOptions = SplideProps[\"options\"];\n\nconst Carousel: FC<Props> & Subcomponents = ({\n  children,\n  label,\n  perPage = 1,\n  perMove = 1,\n  rewind = false,\n  buttonsContrast = false,\n  invertButtons = false,\n  focus,\n  gap = 20,\n  showArrows = \"always\",\n  pagination = true,\n  onMove,\n  padding,\n  disableHorizontalPadding = false,\n  start = 0,\n  disableDrag = false,\n  paginationRef,\n}) => {\n  const { root, buttons, paginationClass, page } = generateClasses({ showArrows });\n\n  const options: SplideOptions = {\n    perPage,\n    perMove,\n    type: rewind ? \"loop\" : \"slide\",\n    focus,\n    gap,\n    arrows: showArrows !== \"never\",\n    pagination,\n    padding,\n    start,\n    lazyLoad: \"nearby\",\n    classes: { page: page() },\n    i18n: {\n      prev: \"vorherige Ansicht\",\n      next: \"nächste Ansicht\",\n      first: \"erste Ansicht\",\n      last: \"letzte Ansicht\",\n      slideX: \"gehe zu Ansicht %s\",\n      pageX: \"gehe zu Seite %s\",\n      play: \"starte Wiedergabe\",\n      pause: \"pausiere Wiedergabe\",\n      carousel: \"carousel\",\n      select: \"wähle eine Ansicht aus\",\n      slide: \"slide\",\n      slideLabel: \"%s von %s\",\n    },\n    drag: !disableDrag,\n  };\n\n  return (\n    <Splide\n      aria-label={label}\n      options={options}\n      hasTrack={false}\n      onMove={(_slide: unknown, destIndex: number, prevIndex: number) => onMove?.(destIndex, prevIndex)}\n      data-bpds=\"carousel\"\n      data-bpds-per-page={perPage}\n      data-bpds-per-move={perMove}\n      data-bpds-rewind={rewind}\n      data-bpds-buttons-contrast={buttonsContrast}\n      data-bpds-invert-buttons={invertButtons}\n      data-bpds-disable-horizontal-padding={disableHorizontalPadding}\n      data-bpds-gap={gap}\n      data-bpds-padding={padding}\n      data-bpds-pagination={pagination}\n      data-bpds-show-arrows={showArrows}\n      className={root()}\n    >\n      <div className={`splide__arrows ${buttons()}`}>\n        <CarouselArrow\n          invertButtons={invertButtons}\n          position=\"left\"\n          buttonsContrast={buttonsContrast}\n          disableHorizontalPadding={disableHorizontalPadding}\n        />\n        <CarouselArrow\n          invertButtons={invertButtons}\n          position=\"right\"\n          buttonsContrast={buttonsContrast}\n          disableHorizontalPadding={disableHorizontalPadding}\n        />\n      </div>\n      <SplideTrack>{children}</SplideTrack>\n      <ul className={paginationClass()} ref={paginationRef} />\n    </Splide>\n  );\n};\n\nCarousel.displayName = \"Carousel\";\n\nCarousel.Slide = SplideSlide;\n// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\nSplideSlide.displayName = \"Carousel.Slide\";\n\nexport default Carousel;\n"],"mappings":";;;;;;;AAUA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,MAAM;EACN,SAAS;EACT,iBAAiB;EACjB,MAAM;GACJ;GACA;GACA;EACF;CACF;CACA,UAAU,EACR,YAAY;EACV,QAAQ;EACR,OAAO;GACL,MAAM;GACN,SAAS;EACX;EACA,OAAO;CACT,EACF;AACF,CAAC,GAgDK,KAAuC,EAC3C,aACA,UACA,aAAU,GACV,aAAU,GACV,YAAS,IACT,qBAAkB,IAClB,mBAAgB,IAChB,UACA,SAAM,IACN,gBAAa,UACb,gBAAa,IACb,WACA,YACA,8BAA2B,IAC3B,WAAQ,GACR,iBAAc,IACd,uBACI;CACJ,IAAM,EAAE,SAAM,YAAS,oBAAiB,YAAS,EAAgB,EAAE,cAAW,CAAC,GAEzE,IAAyB;EAC7B;EACA;EACA,MAAM,IAAS,SAAS;EACxB;EACA;EACA,QAAQ,MAAe;EACvB;EACA;EACA;EACA,UAAU;EACV,SAAS,EAAE,MAAM,EAAK,EAAE;EACxB,MAAM;GACJ,MAAM;GACN,MAAM;GACN,OAAO;GACP,MAAM;GACN,QAAQ;GACR,OAAO;GACP,MAAM;GACN,OAAO;GACP,UAAU;GACV,QAAQ;GACR,OAAO;GACP,YAAY;EACd;EACA,MAAM,CAAC;CACT;CAEA,OACE,kBAAC,GAAD;EACE,cAAY;EACH;EACT,UAAU;EACV,SAAS,GAAiB,GAAmB,MAAsB,IAAS,GAAW,CAAS;EAChG,aAAU;EACV,sBAAoB;EACpB,sBAAoB;EACpB,oBAAkB;EAClB,8BAA4B;EAC5B,4BAA0B;EAC1B,wCAAsC;EACtC,iBAAe;EACf,qBAAmB;EACnB,wBAAsB;EACtB,yBAAuB;EACvB,WAAW,EAAK;EAhBlB,UAAA;GAkBE,kBAAC,OAAD;IAAK,WAAW,kBAAkB,EAAQ;IAA1C,UAAA,CACE,kBAAC,GAAD;KACiB;KACf,UAAS;KACQ;KACS;IAC3B,CAAA,GACD,kBAAC,GAAD;KACiB;KACf,UAAS;KACQ;KACS;IAC3B,CAAA,CACE;;GACL,kBAAC,GAAD,EAAc,YAAsB,CAAA;GACpC,kBAAC,MAAD;IAAI,WAAW,EAAgB;IAAG,KAAK;GAAgB,CAAA;EACjD;;AAEZ;AAEA,EAAS,cAAc,YAEvB,EAAS,QAAQ,GAEjB,EAAY,cAAc"}

package/dist/components/Dialog/Dialog.js

@@ -1,61 +1,68 @@
 "use client";
-import e from "../../hooks/useInnerOpen.js";
-import { useSubcomponent as t } from "../../hooks/index.js";
+import e from "../Buttons/Button/index.js";
+import t from "../../hooks/useInnerOpen.js";
 import n from "../Overlay/Overlay.js";
-import r from "../ButtonsSection/PrimaryButton.js";
-import i from "../ButtonsSection/SecondaryButton.js";
-import a from "../ButtonsSection/index.js";
 import "react";
-import { tv as o } from "tailwind-variants";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import * as l from "@radix-ui/react-dialog";
+import { tv as r } from "tailwind-variants";
+import { jsx as i } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-dialog";
 //#region src/components/Dialog/Dialog.tsx
-var u = o({ slots: {
+var o = r({ slots: {
 	title: "typography-bonprix-h4 text-clr-primary px-10",
 	wrapper: "flex flex-col gap-5 h-full",
 	scrollArea: "px-10 h-full scroll-area relative",
 	contentWrapper: "flex flex-col overflow-hidden",
-	buttonSection: "px-10"
-} }), d = ({ isOpen: r, onClose: i, zIndex: o, children: l }) => {
-	let { getSubcomponents: d, printBadConstructionMessage: f } = t(l), { Title: p, Content: m, PrimaryButton: h, SecondaryButton: g } = d(), { wrapper: _, buttonSection: v } = u(), { innerOpen: y } = e(r);
-	return !p || !m ? (f("Dialog"), null) : /* @__PURE__ */ s(n, {
-		isOpen: y,
-		onClose: i,
-		zIndex: o,
+	buttonSection: "px-10 flex justify-center flex-wrap gap-3"
+} }), s = ({ isOpen: e, onClose: r, zIndex: a, children: s }) => {
+	let { wrapper: c } = o(), { innerOpen: l } = t(e);
+	return /* @__PURE__ */ i(n, {
+		isOpen: l,
+		onClose: r,
+		zIndex: a,
 		isDialog: !0,
 		componentName: "dialog",
-		children: /* @__PURE__ */ c("div", {
-			className: _(),
-			children: [
-				p,
-				m,
-				h && /* @__PURE__ */ s(a, {
-					owner: "Dialog",
-					primary: h,
-					secondary: g,
-					classes: v()
-				})
-			]
+		children: /* @__PURE__ */ i("div", {
+			className: c(),
+			children: s
 		})
 	});
-}, f = ({ children: e }) => {
-	let { title: t } = u();
-	return /* @__PURE__ */ s(l.Title, {
+}, c = ({ children: e }) => {
+	let { title: t } = o();
+	return /* @__PURE__ */ i(a.Title, {
 		className: t(),
 		children: e
 	});
-}, p = ({ children: e }) => {
-	let { scrollArea: t, contentWrapper: n } = u();
-	return /* @__PURE__ */ s("div", {
+}, l = ({ children: e }) => {
+	let { scrollArea: t, contentWrapper: n } = o();
+	return /* @__PURE__ */ i("div", {
 		className: t(),
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ i("div", {
 			className: n(),
 			children: e
 		})
 	});
-};
-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" });
+}, u = ({ children: e }) => {
+	let { buttonSection: t } = o();
+	return /* @__PURE__ */ i("div", {
+		className: t(),
+		children: e
+	});
+}, d = ({ children: t, component: n = "button", ...r }) => /* @__PURE__ */ i(e, {
+	component: n,
+	...r,
+	contentWidth: !0,
+	size: "large",
+	children: t
+}), f = ({ children: t, component: n = "button", ...r }) => /* @__PURE__ */ i(e, {
+	component: n,
+	...r,
+	contentWidth: !0,
+	variant: "secondary",
+	size: "large",
+	children: t
+});
+s.displayName = "Dialog", s.Title = c, c.displayName = "Dialog.Title", s.Content = l, l.displayName = "Dialog.Content", s.ButtonSection = u, u.displayName = "Dialog.ButtonSection", s.PrimaryButton = d, Object.assign(d, { displayName: "Dialog.PrimaryButton" }), s.SecondaryButton = f, Object.assign(f, { displayName: "Dialog.SecondaryButton" });
 //#endregion
-export { d as default };
+export { s as default };
 
 //# sourceMappingURL=Dialog.js.map

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, 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"}
+{"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ComponentProps, ElementType, FC, FunctionComponent, ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\n\nimport { Button } from \"@components/Buttons\";\nimport Overlay from \"@components/Overlay\";\nimport { useInnerOpen } from \"@hooks\";\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 flex justify-center flex-wrap gap-3\",\n  },\n});\n\ninterface DialogSubcomponents {\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 {\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\ninterface DialogTitleProps {\n  /** The title to display in the dialog. */\n  children: string;\n}\n\ninterface DialogContentProps {\n  /** The content to display in the dialog. */\n  children: ReactNode;\n}\n\ninterface DialogButtonSectionProps {\n  /** Primary and secondary buttons should be placed inside this section. */\n  children: ReactNode;\n}\n\ntype DialogButtonProps<C extends ElementType> = {\n  /** The button text to render. */\n  children: string;\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>, \"component\">;\n\nconst Dialog: FC<Props> & DialogSubcomponents = ({ isOpen, onClose, zIndex, children }) => {\n  const { wrapper } = generateClasses();\n  const { innerOpen } = useInnerOpen(isOpen);\n\n  return (\n    <Overlay isOpen={innerOpen} onClose={onClose} zIndex={zIndex} isDialog componentName=\"dialog\">\n      <div className={wrapper()}>{children}</div>\n    </Overlay>\n  );\n};\n\nconst Title: FC<DialogTitleProps> = ({ children }) => {\n  const { title } = generateClasses();\n\n  return <DialogPrimitive.Title className={title()}>{children}</DialogPrimitive.Title>;\n};\n\nconst Content: FC<DialogContentProps> = ({ children }) => {\n  const { scrollArea, contentWrapper } = generateClasses();\n\n  return (\n    <div className={scrollArea()}>\n      <div className={contentWrapper()}>{children}</div>\n    </div>\n  );\n};\n\nconst ButtonSection: FC<DialogButtonSectionProps> = ({ children }) => {\n  const { buttonSection } = generateClasses();\n\n  return <div className={buttonSection()}>{children}</div>;\n};\n\nconst PrimaryButton = <C extends ElementType>({ children, component = \"button\" as C, ...props }: DialogButtonProps<C>) => {\n  const Component: ElementType = component;\n  return (\n    <Button component={Component} {...props} contentWidth size=\"large\">\n      {children}\n    </Button>\n  );\n};\n\nconst SecondaryButton = <C extends ElementType>({ children, component = \"button\" as C, ...props }: DialogButtonProps<C>) => {\n  const Component: ElementType = component;\n  return (\n    <Button component={Component} {...props} contentWidth variant=\"secondary\" size=\"large\">\n      {children}\n    </Button>\n  );\n};\n\nDialog.displayName = \"Dialog\";\n\nDialog.Title = Title;\nTitle.displayName = \"Dialog.Title\";\n\nDialog.Content = Content;\nContent.displayName = \"Dialog.Content\";\n\nDialog.ButtonSection = ButtonSection;\nButtonSection.displayName = \"Dialog.ButtonSection\";\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":";;;;;;;;;AAUA,IAAM,IAAkB,EAAG,EACzB,OAAO;CACL,OAAO;CACP,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,eAAe;AACjB,EACF,CAAC,GA2CK,KAA2C,EAAE,WAAQ,YAAS,WAAQ,kBAAe;CACzF,IAAM,EAAE,eAAY,EAAgB,GAC9B,EAAE,iBAAc,EAAa,CAAM;CAEzC,OACE,kBAAC,GAAD;EAAS,QAAQ;EAAoB;EAAiB;EAAQ,UAAA;EAAS,eAAc;EACnF,UAAA,kBAAC,OAAD;GAAK,WAAW,EAAQ;GAAI;EAAc,CAAA;CACnC,CAAA;AAEb,GAEM,KAA+B,EAAE,kBAAe;CACpD,IAAM,EAAE,aAAU,EAAgB;CAElC,OAAO,kBAAC,EAAgB,OAAjB;EAAuB,WAAW,EAAM;EAAI;CAAgC,CAAA;AACrF,GAEM,KAAmC,EAAE,kBAAe;CACxD,IAAM,EAAE,eAAY,sBAAmB,EAAgB;CAEvD,OACE,kBAAC,OAAD;EAAK,WAAW,EAAW;EACzB,UAAA,kBAAC,OAAD;GAAK,WAAW,EAAe;GAAI;EAAc,CAAA;CAC9C,CAAA;AAET,GAEM,KAA+C,EAAE,kBAAe;CACpE,IAAM,EAAE,qBAAkB,EAAgB;CAE1C,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAc;EAAI;CAAc,CAAA;AACzD,GAEM,KAAwC,EAAE,aAAU,eAAY,UAAe,GAAG,QAGpF,kBAAC,GAAD;CAAmB;CAAW,GAAI;CAAO,cAAA;CAAa,MAAK;CACxD;AACK,CAAA,GAIN,KAA0C,EAAE,aAAU,eAAY,UAAe,GAAG,QAGtF,kBAAC,GAAD;CAAmB;CAAW,GAAI;CAAO,cAAA;CAAa,SAAQ;CAAY,MAAK;CAC5E;AACK,CAAA;AAIZ,EAAO,cAAc,UAErB,EAAO,QAAQ,GACf,EAAM,cAAc,gBAEpB,EAAO,UAAU,GACjB,EAAQ,cAAc,kBAEtB,EAAO,gBAAgB,GACvB,EAAc,cAAc,wBAE5B,EAAO,gBAAgB,GACvB,OAAO,OAAO,GAAe,EAC3B,aAAa,uBACf,CAAkD,GAElD,EAAO,kBAAkB,GACzB,OAAO,OAAO,GAAiB,EAC7B,aAAa,yBACf,CAAkD"}

package/dist/components/InputFields/BaseInputField/BaseInputField.js

@@ -1,11 +1,10 @@
-import { TYPES_WITH_FIXED_LABEL as e } from "../TextField/constants.js";
-import t from "@bonprix-ds/react-icon-button";
-import { useId as n, useRef as r, useState as i } from "react";
-import { tv as a } from "tailwind-variants";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { InputWrapper as c } from "@bonprix-ds/internal-components";
+import e from "@bonprix-ds/react-icon-button";
+import { useId as t, useRef as n, useState as r } from "react";
+import { tv as i } from "tailwind-variants";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { InputWrapper as s } from "@bonprix-ds/internal-components";
 //#region src/components/InputFields/BaseInputField/BaseInputField.tsx
-var l = a({
+var c = i({
 	slots: {
 		root: "preflight w-full group",
 		container: "input flex gap-3 px-3 py-[0.6875rem]",
@@ -24,7 +23,10 @@ var l = a({
 			false: ""
 		},
 		hideClear: { true: { input: "h-6" } },
-		error: { true: { input: "[-webkit-text-fill-color:var(--color-fg-error)] text-clr-primary" } }
+		error: {
+			true: "",
+			false: ""
+		}
 	},
 	compoundVariants: [{
 		hasValue: !0,
@@ -34,31 +36,31 @@ var l = a({
 			iconSeparator: "group-hover:visible group-focus-within:visible"
 		}
 	}]
-}), u = ({ type: a, onFocus: u, onBlur: d, onKeyDown: f, onKeyUp: p, inputRef: m, label: ee, name: te, id: h, helperText: g = "", errorText: _ = "", disabled: v = !1, required: y = !1, error: b = !1, inputMode: x, pattern: S, autoComplete: C, autoCorrect: w, spellCheck: ne, minLength: T, maxLength: E, hideClear: D = !1, describedBy: O, buttonIcon: k, iconButtonType: A = "button", onIconButtonClick: j, iconButtonLabel: M, componentName: N, ...P }) => {
-	let F = n(), I = h ?? F, L = n(), R = n(), z;
+}), l = ({ type: i, onFocus: l, onBlur: u, onKeyDown: d, onKeyUp: ee, inputRef: f, label: p, name: m, id: h, helperText: g = "", errorText: _ = "", disabled: v = !1, required: y = !1, error: b = !1, inputMode: x, pattern: S, autoComplete: C, autoCorrect: w, spellCheck: te, minLength: T, maxLength: E, hideClear: D = !1, describedBy: O, buttonIcon: k, iconButtonType: A = "button", onIconButtonClick: j, iconButtonLabel: M, componentName: N, ...P }) => {
+	let F = t(), I = h ?? F, L = t(), R = t(), z;
 	z = P.value === void 0 ? !!P.defaultValue : !!P.value;
-	let [B, V] = i(!1), [H, U] = i(z), W = e.includes(a), G = H || B || W, K = r(null), q = m ?? K, { root: J, container: Y, input: X, buttonSection: Z, clearButton: re, iconSeparator: ie } = l({
+	let [B, V] = r(!1), [H, U] = r(z), W = H || B, G = n(null), K = f ?? G, { root: q, container: J, input: Y, buttonSection: X, clearButton: Z, iconSeparator: Q } = c({
 		disabled: v,
 		hasValue: H,
 		hideClear: D,
 		error: b
-	}), ae = () => {
-		V(!0), u && u();
-	}, Q = () => {
-		V(!1), d && d();
-	}, oe = (e) => {
+	}), ne = () => {
+		V(!0), l && l();
+	}, re = () => {
+		V(!1), u && u();
+	}, ie = (e) => {
 		let t = e.currentTarget.value;
 		P.onChange?.(t), H !== !!t && U(!!t);
-	}, se = () => {
-		P.value ? P.onChange("") : q.current && (q.current.value = ""), U(!1), q.current?.focus();
-	}, ce = k && !D, le = !D || k, $;
-	return g && ($ = L), b && _ && ($ = $ ? $ + " " + R : R), O && ($ = $ ? $ + " " + O : O), /* @__PURE__ */ o("div", {
-		className: J(),
+	}, ae = () => {
+		P.value ? P.onChange("") : K.current && (K.current.value = ""), U(!1), K.current?.focus();
+	}, oe = k && !D, se = !D || k, $;
+	return g && ($ = L), b && _ && ($ = $ ? $ + " " + R : R), O && ($ = $ ? $ + " " + O : O), /* @__PURE__ */ a("div", {
+		className: q(),
 		"data-fix-chrome-page-load-autofill": !0,
-		children: /* @__PURE__ */ o(c, {
-			label: ee,
+		children: /* @__PURE__ */ a(s, {
+			label: p,
 			id: I,
-			labelFloated: G,
+			labelFloated: W,
 			disabled: v,
 			required: y,
 			helperText: g,
@@ -67,47 +69,47 @@ var l = a({
 			errorText: _,
 			errorTextId: R,
 			componentName: N,
-			children: /* @__PURE__ */ s("div", {
-				className: Y(),
-				children: [/* @__PURE__ */ o("input", {
+			children: /* @__PURE__ */ o("div", {
+				className: J(),
+				children: [/* @__PURE__ */ a("input", {
 					...P,
-					type: a,
-					className: X(),
+					type: i,
+					className: Y(),
 					id: I,
-					name: te,
-					onChange: oe,
-					onFocus: ae,
-					onBlur: Q,
-					onKeyDown: f,
-					onKeyUp: p,
+					name: m,
+					onChange: ie,
+					onFocus: ne,
+					onBlur: re,
+					onKeyDown: d,
+					onKeyUp: ee,
 					inputMode: x,
 					pattern: S,
 					autoComplete: C,
 					autoCorrect: w,
-					spellCheck: ne,
-					ref: q,
+					spellCheck: te,
+					ref: K,
 					minLength: T,
 					maxLength: E,
 					required: y,
 					"aria-describedby": $,
 					"aria-invalid": b ? "true" : void 0,
 					disabled: v
-				}), le && /* @__PURE__ */ s("div", {
-					className: Z(),
+				}), se && /* @__PURE__ */ o("div", {
+					className: X(),
 					children: [
-						!D && /* @__PURE__ */ o("div", {
-							className: re(),
-							children: /* @__PURE__ */ o(t, {
+						!D && /* @__PURE__ */ a("div", {
+							className: Z(),
+							children: /* @__PURE__ */ a(e, {
 								variant: "tertiary",
 								size: "small",
 								type: "button",
 								icon: "closer",
-								onClick: se,
+								onClick: ae,
 								label: "Eingabe löschen"
 							})
 						}),
-						ce && /* @__PURE__ */ o("span", { className: ie() }),
-						k && /* @__PURE__ */ o(t, {
+						oe && /* @__PURE__ */ a("span", { className: Q() }),
+						k && /* @__PURE__ */ a(e, {
 							variant: "tertiary",
 							size: "small",
 							type: A,
@@ -123,6 +125,6 @@ var l = a({
 	});
 };
 //#endregion
-export { u as default };
+export { l as default };
 
 //# sourceMappingURL=BaseInputField.js.map