bonprix-design-system 0.66.0 → 0.67.0

package/dist/components/Alert/Alert.js

@@ -0,0 +1,105 @@
+"use client";
+import e from "../../react/icon/dist/index.js";
+import t from "../../react/icon-button/dist/index.js";
+import n from "../../react/typography/dist/index.js";
+import "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { tv as a } from "tailwind-variants";
+//#region src/components/Alert/Alert.tsx
+var o = a({
+	slots: {
+		root: "preflight m-0 flex justify-between items-start p-5 rounded gap-4",
+		iconAndContent: "flex gap-2",
+		content: "typography-body1 text-clr-on-bg-high gap-0.5 pt-0.5",
+		title: "",
+		icon: ""
+	},
+	variants: {
+		status: {
+			success: {
+				root: "bg-clr-bg-success",
+				title: "text-clr-fg-success",
+				icon: "fill-clr-fg-success"
+			},
+			info: {
+				root: "bg-clr-bg-info",
+				title: "text-clr-fg-info",
+				icon: "fill-clr-fg-info"
+			},
+			warning: {
+				root: "bg-clr-bg-alert",
+				title: "text-clr-fg-alert",
+				icon: "fill-clr-fg-alert"
+			},
+			error: {
+				root: "bg-clr-bg-error",
+				title: "text-clr-fg-error",
+				icon: "fill-clr-fg-error"
+			}
+		},
+		alertVariant: {
+			primary: { title: "text-clr-on-bg-high" },
+			secondary: { root: "p-0 rounded-none bg-transparent" }
+		}
+	}
+}), s = {
+	warning: {
+		icon: "alert",
+		label: "Warnung"
+	},
+	info: {
+		icon: "hint",
+		label: "Hinweis"
+	},
+	success: {
+		icon: "success",
+		label: "Erfolg"
+	},
+	error: {
+		icon: "error",
+		label: "Fehler"
+	}
+}, c = ({ isOpen: a, variant: c = "primary", status: l, title: u, children: d, showCloseIcon: f = !0, onClose: p = () => null, nonCritical: m = !1, titleTag: h = "h2" }) => {
+	let { root: g, content: _, title: v, iconAndContent: y, icon: b } = o({
+		status: l,
+		alertVariant: c
+	});
+	if (!a) return null;
+	let x = s[l].icon, S = s[l].label;
+	return /* @__PURE__ */ i("div", {
+		className: g(),
+		role: m ? void 0 : "alert",
+		"aria-label": S,
+		"data-bpds": "alert",
+		"data-bpds-status": l,
+		"data-bpds-variant": c,
+		children: [/* @__PURE__ */ i("div", {
+			className: y(),
+			children: [/* @__PURE__ */ r(e, {
+				variant: x,
+				className: b()
+			}), /* @__PURE__ */ i("div", {
+				className: _(),
+				children: [u && /* @__PURE__ */ r("div", {
+					className: v(),
+					children: /* @__PURE__ */ r(n, {
+						variant: "h6",
+						color: "inherit",
+						component: h,
+						children: u
+					})
+				}), d]
+			})]
+		}), f && /* @__PURE__ */ r(t, {
+			variant: "tertiary",
+			icon: "closer",
+			size: "small",
+			label: "Schließen",
+			onClick: p
+		})]
+	});
+};
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","names":[],"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["\"use client\";\n\nimport Icon, { type IconType } from \"@bonprix-ds/react-icon\";\nimport IconButton from \"@bonprix-ds/react-icon-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport React, { FC } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { levels, values } from \"./constants\";\n\nconst generateClasses = tv({\n  slots: {\n    root: \"preflight m-0 flex justify-between items-start p-5 rounded gap-4\",\n    iconAndContent: \"flex gap-2\",\n    content: \"typography-body1 text-clr-on-bg-high gap-0.5 pt-0.5\",\n    title: \"\",\n    icon: \"\",\n  },\n  variants: {\n    status: {\n      success: {\n        root: \"bg-clr-bg-success\",\n        title: \"text-clr-fg-success\",\n        icon: \"fill-clr-fg-success\",\n      },\n      info: {\n        root: \"bg-clr-bg-info\",\n        title: \"text-clr-fg-info\",\n        icon: \"fill-clr-fg-info\",\n      },\n      warning: {\n        root: \"bg-clr-bg-alert\",\n        title: \"text-clr-fg-alert\",\n        icon: \"fill-clr-fg-alert\",\n      },\n      error: {\n        root: \"bg-clr-bg-error\",\n        title: \"text-clr-fg-error\",\n        icon: \"fill-clr-fg-error\",\n      },\n    },\n    alertVariant: {\n      primary: {\n        title: \"text-clr-on-bg-high\",\n      },\n      secondary: {\n        root: \"p-0 rounded-none bg-transparent\",\n      },\n    },\n  },\n});\n\ntype StatusLevel = (typeof levels)[number];\ntype VariantValue = (typeof values)[number];\n\nexport interface Props {\n  /**  Toggles the visibility of the component. Must be used in conjunction with `onClose`. */\n  isOpen: boolean;\n  /** The status of the alert. The colors and the icon of the component will adjust appropriately to signal the status level.*/\n  status: StatusLevel;\n  /** The message of the alert. */\n  children: string;\n  /** Callback, which is triggered when the visibility of the component (opened/closed) changes. Should be used to control the component from the outside, if the user clicks on the close icon. */\n  onClose?: () => void;\n  /**  Variant of the alert. Depends on the prominence level you require. */\n  variant?: VariantValue;\n  /** An optional title of the alert. The titel sums up the message briefly. */\n  title?: string;\n  /** Controls, if the close icon should be shown. When the alert shoulnd't be closed actively, this property can be set to `false`. */\n  showCloseIcon?: boolean;\n  /** Removes role=\"alert\" from component if set to `true`. The alert content is not read by assistive technologies right away then. */\n  nonCritical?: boolean;\n  /** If `title` is used, you can define the used header element. */\n  titleTag?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\ninterface AlertMap {\n  icon: IconType;\n  label: string;\n}\n\nconst alertVariants: Record<StatusLevel, AlertMap> = {\n  warning: {\n    icon: \"alert\",\n    label: \"Warnung\",\n  },\n  info: {\n    icon: \"hint\",\n    label: \"Hinweis\",\n  },\n  success: {\n    icon: \"success\",\n    label: \"Erfolg\",\n  },\n  error: {\n    icon: \"error\",\n    label: \"Fehler\",\n  },\n};\n\nconst Alert: FC<Props> = ({\n  isOpen,\n  variant = \"primary\",\n  status,\n  title,\n  children,\n  showCloseIcon = true,\n  onClose = () => null,\n  nonCritical = false,\n  titleTag = \"h2\",\n}) => {\n  const { root, content, title: titleStyle, iconAndContent, icon } = generateClasses({ status, alertVariant: variant });\n  if (!isOpen) return null;\n\n  const iconVariant = alertVariants[status].icon;\n  const statusAriaLabel = alertVariants[status].label;\n  const closeLabel = \"Schließen\";\n\n  return (\n    <div\n      className={root()}\n      role={nonCritical ? undefined : \"alert\"}\n      aria-label={statusAriaLabel}\n      data-bpds=\"alert\"\n      data-bpds-status={status}\n      data-bpds-variant={variant}\n    >\n      <div className={iconAndContent()}>\n        <Icon variant={iconVariant} className={icon()} />\n        <div className={content()}>\n          {title && (\n            <div className={titleStyle()}>\n              <Typography variant=\"h6\" color=\"inherit\" component={titleTag}>\n                {title}\n              </Typography>\n            </div>\n          )}\n          {children}\n        </div>\n      </div>\n      {showCloseIcon && <IconButton variant=\"tertiary\" icon=\"closer\" size=\"small\" label={closeLabel} onClick={onClose} />}\n    </div>\n  );\n};\n\nexport default Alert;\n"],"mappings":";;;;;;;;AAUA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,MAAM;EACN,gBAAgB;EAChB,SAAS;EACT,OAAO;EACP,MAAM;CACR;CACA,UAAU;EACR,QAAQ;GACN,SAAS;IACP,MAAM;IACN,OAAO;IACP,MAAM;GACR;GACA,MAAM;IACJ,MAAM;IACN,OAAO;IACP,MAAM;GACR;GACA,SAAS;IACP,MAAM;IACN,OAAO;IACP,MAAM;GACR;GACA,OAAO;IACL,MAAM;IACN,OAAO;IACP,MAAM;GACR;EACF;EACA,cAAc;GACZ,SAAS,EACP,OAAO,sBACT;GACA,WAAW,EACT,MAAM,kCACR;EACF;CACF;AACF,CAAC,GA+BK,IAA+C;CACnD,SAAS;EACP,MAAM;EACN,OAAO;CACT;CACA,MAAM;EACJ,MAAM;EACN,OAAO;CACT;CACA,SAAS;EACP,MAAM;EACN,OAAO;CACT;CACA,OAAO;EACL,MAAM;EACN,OAAO;CACT;AACF,GAEM,KAAoB,EACxB,WACA,aAAU,WACV,WACA,UACA,aACA,mBAAgB,IAChB,mBAAgB,MAChB,iBAAc,IACd,cAAW,WACP;CACJ,IAAM,EAAE,SAAM,YAAS,OAAO,GAAY,mBAAgB,YAAS,EAAgB;EAAE;EAAQ,cAAc;CAAQ,CAAC;CACpH,IAAI,CAAC,GAAQ,OAAO;CAEpB,IAAM,IAAc,EAAc,EAAO,CAAC,MACpC,IAAkB,EAAc,EAAO,CAAC;CAG9C,OACE,kBAAC,OAAD;EACE,WAAW,EAAK;EAChB,MAAM,IAAc,KAAA,IAAY;EAChC,cAAY;EACZ,aAAU;EACV,oBAAkB;EAClB,qBAAmB;YANrB,CAQE,kBAAC,OAAD;GAAK,WAAW,EAAe;aAA/B,CACE,kBAAC,GAAD;IAAM,SAAS;IAAa,WAAW,EAAK;GAAI,CAAA,GAChD,kBAAC,OAAD;IAAK,WAAW,EAAQ;cAAxB,CACG,KACC,kBAAC,OAAD;KAAK,WAAW,EAAW;eACzB,kBAAC,GAAD;MAAY,SAAQ;MAAK,OAAM;MAAU,WAAW;gBACjD;KACS,CAAA;IACT,CAAA,GAEN,CACE;KACF;MACJ,KAAiB,kBAAC,GAAD;GAAY,SAAQ;GAAW,MAAK;GAAS,MAAK;GAAQ,OAAO;GAAY,SAAS;EAAU,CAAA,CAC/G;;AAET"}

package/dist/components/Alert/index.js

@@ -0,0 +1,7 @@
+import e from "./Alert.js";
+//#region src/components/Alert/index.ts
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Alert/index.ts"],"sourcesContent":["import Alert from \"./Alert\";\n\nexport default Alert;\nexport type { Props as AlertProps } from \"./Alert\";\nexport * from \"./constants\";\n"],"mappings":";;AAEA,IAAA,IAAe"}

package/dist/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,172 @@
+"use client";
+import e from "../../react/icon-button/dist/index.js";
+import t from "../../react/typography/dist/index.js";
+import { usePrefersReducedMotion as n } from "../../utils/dist/index.js";
+import r from "../Buttons/Button/index.js";
+import i from "../../contexts/ZIndexContext.js";
+import a from "../../hooks/useInnerOpen.js";
+import { backdrop as o } from "../../utils/tailwindVariants.js";
+import s from "./BottomSheetContext.js";
+import c from "./useConsumeBottomSheet.js";
+import l from "./useCreateBottomSheet.js";
+import { useId as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { tv as p } from "tailwind-variants";
+import { Sheet as m } from "react-modal-sheet";
+//#region src/components/BottomSheet/BottomSheet.tsx
+var h = p({
+	slots: {
+		root: "preflight block",
+		container: "shadow-none rounded-none bg-clr-bg-modal max-h-[calc(100%-64px)]",
+		header: "px-4 py-3",
+		titleAndIcons: "flex gap-2 items-center touch-pan-down",
+		contentWrapper: "flex flex-col w-full",
+		content: [
+			"typography-body1 text-clr-primary",
+			"*:flex *:-mx-0.5 *:px-0.5",
+			"*:min-h-0"
+		],
+		dragHandleContainer: "h-6 flex justify-center items-center shrink-0",
+		dragHandle: "h-1 w-8 rounded-full bg-clr-on-bg-low",
+		buttonSection: "w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down",
+		backdrop: o(),
+		scrollArea: "scroll-area"
+	},
+	variants: { disableHorizontalPadding: {
+		false: { scrollArea: "px-4" },
+		true: ""
+	} }
+}), g = ({ children: e, isOpen: t, onClose: r, onBack: o, zIndex: c = 2, ref: p }) => {
+	let g = n(), { root: _, container: v, dragHandleContainer: y, dragHandle: b, content: x, contentWrapper: S, backdrop: C } = h(), { isShown: w, scrollRef: T, scrollPosition: E } = l({ isOpen: t }), D = E === "middle" || E === "bottom", { innerOpen: O } = a(w), k = u();
+	return /* @__PURE__ */ f(m, {
+		isOpen: O,
+		onClose: r,
+		className: _(),
+		detent: "content",
+		"data-bpds": "bottom-sheet",
+		prefersReducedMotion: g,
+		style: {
+			"--touch-action": D ? "initial" : "pan-down",
+			pointerEvents: void 0
+		},
+		role: "dialog",
+		avoidKeyboard: !1,
+		"aria-labelledby": k,
+		children: [/* @__PURE__ */ f(m.Container, {
+			className: v(),
+			ref: p,
+			style: {
+				zIndex: c,
+				pointerEvents: void 0
+			},
+			children: [/* @__PURE__ */ d(m.Header, {
+				unstyled: !0,
+				className: y(),
+				children: /* @__PURE__ */ d(m.DragIndicator, {
+					unstyled: !0,
+					className: b()
+				})
+			}), /* @__PURE__ */ d(i.Provider, {
+				value: 1e4,
+				children: /* @__PURE__ */ d(s.Provider, {
+					value: {
+						scrollRef: T,
+						scrollPosition: E,
+						onClose: r,
+						onBack: o,
+						titleId: k
+					},
+					children: /* @__PURE__ */ d(m.Content, {
+						className: x(),
+						disableScroll: !0,
+						disableDrag: D,
+						style: { paddingBottom: "max(var(--keyboard-inset-height, 0px), var(--app-safe-area-inset-bottom, 1rem))" },
+						children: /* @__PURE__ */ d("div", {
+							className: S(),
+							children: e
+						})
+					})
+				})
+			})]
+		}), /* @__PURE__ */ d(m.Backdrop, {
+			"aria-label": "Bottom Sheet schließen",
+			onTap: r,
+			className: C(),
+			style: { zIndex: c - 1 }
+		})]
+	});
+};
+g.displayName = "BottomSheet", g.Title = ({ children: n, subline: r, level: i = "h3" }) => {
+	let { onBack: a, onClose: o, titleId: s } = c(), { header: l, titleAndIcons: u } = h();
+	return /* @__PURE__ */ f("div", {
+		className: l(),
+		children: [/* @__PURE__ */ f("div", {
+			className: u(),
+			children: [
+				a && /* @__PURE__ */ d(e, {
+					onClick: a,
+					icon: "arrow-left",
+					label: "Zurück",
+					variant: "tertiary",
+					size: "small"
+				}),
+				/* @__PURE__ */ d(t, {
+					variant: "bonprix-h6",
+					component: i,
+					className: "grow line-clamp-2",
+					id: s,
+					children: n
+				}),
+				/* @__PURE__ */ d(e, {
+					onClick: o,
+					icon: "closer",
+					label: "Schließen",
+					variant: "tertiary",
+					size: "small"
+				})
+			]
+		}), r && /* @__PURE__ */ d(t, { children: r })]
+	});
+}, g.Content = ({ children: e, disableHorizontalPadding: t = !1 }) => {
+	let { scrollRef: n } = c(), { scrollArea: r } = h({ disableHorizontalPadding: t });
+	return /* @__PURE__ */ d("div", {
+		ref: n,
+		className: r(),
+		"data-bpds-disable-horizontal-padding": t,
+		children: e
+	});
+}, g.ButtonSection = ({ children: e }) => /* @__PURE__ */ d("div", {
+	className: "button-section w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down",
+	children: e
+}), g.PrimaryButton = ({ children: e, onClick: t, type: n = "button", form: i, icon: a, iconPosition: o, disabled: s, loading: l }) => {
+	let { onClose: u } = c();
+	return /* @__PURE__ */ d(r, {
+		variant: "primary",
+		onClick: (e) => {
+			t && t(e), u();
+		},
+		type: n,
+		form: i,
+		icon: a,
+		iconPosition: o,
+		size: "large",
+		disabled: s,
+		loading: l,
+		children: e
+	});
+}, g.SecondaryButton = ({ children: e, icon: t, iconPosition: n }) => {
+	let { onClose: i } = c();
+	return /* @__PURE__ */ d(r, {
+		variant: "secondary",
+		type: "button",
+		onClick: i,
+		icon: t,
+		iconPosition: n,
+		size: "large",
+		children: e
+	});
+};
+//#endregion
+export { g as default };
+
+//# sourceMappingURL=BottomSheet.js.map

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

@@ -0,0 +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 { ButtonTypeAttribute, TitleLevel, usePrefersReducedMotion } from \"@bonprix-ds/utils\";\nimport React, { FC, ReactNode, Ref, useId } from \"react\";\nimport { Sheet } from \"react-modal-sheet\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Button } from \"@components/Buttons\";\nimport ZIndexContext from \"@contexts/ZIndexContext\";\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%-64px)]\",\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    buttonSection: \"w-full flex flex-col gap-3 px-4 pt-4 shrink-0 touch-pan-down\",\n    backdrop: backdrop(),\n    scrollArea: \"scroll-area\",\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\nexport interface SheetButtonProps {\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\ninterface SheetPrimaryButtonProps extends SheetButtonProps {\n  /** Callback, which is triggered when the button is activated. */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The type attribute of the button. */\n  type?: ButtonTypeAttribute;\n  /** Standard HTML attribute. Read more on <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form\">MDN, Button Element - form</a>. */\n  form?: string;\n  /** If `true`, the button will be disabled and thus not interactable.  */\n  disabled?: boolean;\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      // 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      style={{ \"--touch-action\": disableDrag ? \"initial\" : \"pan-down\", pointerEvents: undefined }}\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={{ zIndex, pointerEvents: undefined }}>\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, 0px), 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 = ({ children, onClick, type = \"button\", form, icon, iconPosition, disabled, loading }: SheetPrimaryButtonProps) => {\n  const { onClose } = useConsumeBottomSheet();\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    if (onClick) {\n      onClick(event);\n    }\n    onClose();\n  };\n  return (\n    <Button\n      variant=\"primary\"\n      onClick={handleClick}\n      type={type}\n      form={form}\n      icon={icon}\n      iconPosition={iconPosition}\n      size=\"large\"\n      disabled={disabled}\n      loading={loading}\n    >\n      {children}\n    </Button>\n  );\n};\n\nconst SecondaryButton = ({ children, icon, iconPosition }: SheetButtonProps) => {\n  const { onClose } = useConsumeBottomSheet();\n  return (\n    <Button variant=\"secondary\" type=\"button\" onClick={onClose} icon={icon} iconPosition={iconPosition} size=\"large\">\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/BottomSheet/BottomSheetContext.js

@@ -0,0 +1,13 @@
+"use client";
+import { createContext as e } from "react";
+//#region src/components/BottomSheet/BottomSheetContext.ts
+var t = e({
+	scrollRef: () => null,
+	scrollPosition: void 0,
+	onClose: () => null,
+	onBack: () => null
+});
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=BottomSheetContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheetContext.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheetContext.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext } from \"react\";\nimport { useScrollPosition } from \"react-modal-sheet\";\n\nexport interface BottomSheetContextProps {\n  scrollRef: ReturnType<typeof useScrollPosition>[\"scrollRef\"];\n  scrollPosition: ReturnType<typeof useScrollPosition>[\"scrollPosition\"];\n  onClose: () => void;\n  onBack?: () => void;\n  titleId?: string;\n}\n\nconst BottomSheetContext = createContext<BottomSheetContextProps>({\n  scrollRef: () => null,\n  scrollPosition: undefined,\n  onClose: () => null,\n  onBack: () => null,\n});\n\nexport default BottomSheetContext;\n"],"mappings":";;;AAaA,IAAM,IAAqB,EAAuC;CAChE,iBAAiB;CACjB,gBAAgB,KAAA;CAChB,eAAe;CACf,cAAc;AAChB,CAAC"}

package/dist/components/BottomSheet/index.js

@@ -0,0 +1,7 @@
+import e from "./BottomSheet.js";
+//#region src/components/BottomSheet/index.ts
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/BottomSheet/index.ts"],"sourcesContent":["import BottomSheet from \"./BottomSheet\";\n\nexport default BottomSheet;\nexport type { Props as BottomSheetProps } from \"./BottomSheet\";\n"],"mappings":";;AAEA,IAAA,IAAe"}

package/dist/components/BottomSheet/useConsumeBottomSheet.js

@@ -0,0 +1,8 @@
+import e from "./BottomSheetContext.js";
+import { useContext as t } from "react";
+//#region src/components/BottomSheet/useConsumeBottomSheet.ts
+var n = () => t(e);
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=useConsumeBottomSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useConsumeBottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/useConsumeBottomSheet.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport BottomSheetContext from \"./BottomSheetContext\";\n\nconst useConsumeBottomSheet = () => {\n  return useContext(BottomSheetContext);\n};\n\nexport default useConsumeBottomSheet;\n"],"mappings":";;;AAIA,IAAM,UACG,EAAW,CAAkB"}

package/dist/components/BottomSheet/useCreateBottomSheet.js

@@ -0,0 +1,18 @@
+import e from "../../hooks/useBreakpointBetween.js";
+import { useEffect as t } from "react";
+import { useScrollPosition as n, useVirtualKeyboard as r } from "react-modal-sheet";
+//#region src/components/BottomSheet/useCreateBottomSheet.ts
+var i = ({ isOpen: i }) => {
+	let a = e("s", "m") && i, { scrollRef: o, scrollPosition: s } = n({ isEnabled: a });
+	return r({ isEnabled: i }), t(() => {
+		i ? document.dispatchEvent(new CustomEvent("app:enableSwipeToRefresh", { detail: { enable: !1 } })) : document.dispatchEvent(new CustomEvent("app:enableSwipeToRefresh", { detail: { enable: !0 } }));
+	}, [i]), {
+		isShown: a,
+		scrollRef: o,
+		scrollPosition: s
+	};
+};
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=useCreateBottomSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateBottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/useCreateBottomSheet.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useScrollPosition, useVirtualKeyboard } from \"react-modal-sheet\";\n\nimport { useBreakpointBetween } from \"@hooks\";\n\ninterface UseBottomSheetProps {\n  isOpen: boolean;\n}\n\nconst useCreateBottomSheet = ({ isOpen }: UseBottomSheetProps) => {\n  const isSmallScreen = useBreakpointBetween(\"s\", \"m\");\n  const isShown = isSmallScreen && isOpen;\n\n  const { scrollRef, scrollPosition } = useScrollPosition({\n    isEnabled: isShown,\n  });\n\n  useVirtualKeyboard({ isEnabled: isOpen });\n\n  // Disable swipe-to-refresh for the app: // https://bonprix.atlassian.net/wiki/spaces/App/pages/368706073/Javascript\n  useEffect(() => {\n    if (isOpen) {\n      document.dispatchEvent(new CustomEvent(\"app:enableSwipeToRefresh\", { detail: { enable: false } }));\n    } else {\n      document.dispatchEvent(new CustomEvent(\"app:enableSwipeToRefresh\", { detail: { enable: true } }));\n    }\n  }, [isOpen]);\n\n  return {\n    isShown,\n    scrollRef,\n    scrollPosition,\n  };\n};\n\nexport default useCreateBottomSheet;\n"],"mappings":";;;;AASA,IAAM,KAAwB,EAAE,gBAAkC;CAEhE,IAAM,IADgB,EAAqB,KAAK,GAChC,KAAiB,GAE3B,EAAE,cAAW,sBAAmB,EAAkB,EACtD,WAAW,EACb,CAAC;CAaD,OAXA,EAAmB,EAAE,WAAW,EAAO,CAAC,GAGxC,QAAgB;EACd,AAAI,IACF,SAAS,cAAc,IAAI,YAAY,4BAA4B,EAAE,QAAQ,EAAE,QAAQ,GAAM,EAAE,CAAC,CAAC,IAEjG,SAAS,cAAc,IAAI,YAAY,4BAA4B,EAAE,QAAQ,EAAE,QAAQ,GAAK,EAAE,CAAC,CAAC;CAEpG,GAAG,CAAC,CAAM,CAAC,GAEJ;EACL;EACA;EACA;CACF;AACF"}

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,55 @@
+"use client";
+import e from "../../react/icon/dist/index.js";
+import t from "../../react/typography/dist/index.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { tv as i } from "tailwind-variants";
+//#region src/components/Breadcrumb/Breadcrumb.tsx
+var a = i({
+	base: "preflight flex flex-col gap-1 text-clr-on-bg-high",
+	slots: {
+		link: "flex items-center gap-1 group focus:outline-none",
+		icon: "w-7 h-7 fill-clr-on-bg-high",
+		previousPageContainer: "border border-transparent group-focus:border-clr-primary rounded-sm",
+		previousPage: ["typography-body1 pt-0.5 mx-0.5 border-b-2 border-transparent", "group-hover:border-clr-primary group-focus:group-hover:border-transparent"],
+		header: "flex gap-x-2 items-baseline flex-wrap",
+		iconWrapper: "min-w-7 min-h-7"
+	}
+}), o = ({ currentPageTitle: i, previousPageTitle: o, previousPageUrl: s, hideHeader: c = !1, numberOfItemsText: l = "" }) => {
+	let { base: u, icon: d, previousPage: f, previousPageContainer: p, link: m, header: h, iconWrapper: g } = a();
+	return /* @__PURE__ */ r("div", {
+		className: u(),
+		"data-bpds": "breadcrumb",
+		"data-bpds-hide-header": c,
+		children: [/* @__PURE__ */ r("a", {
+			href: s,
+			className: m(),
+			children: [/* @__PURE__ */ n("span", {
+				className: g(),
+				children: /* @__PURE__ */ n(e, {
+					variant: "back",
+					className: d()
+				})
+			}), /* @__PURE__ */ n("span", {
+				className: p(),
+				children: /* @__PURE__ */ n("span", {
+					className: f(),
+					children: o
+				})
+			})]
+		}), c ? null : /* @__PURE__ */ r("div", {
+			className: h(),
+			children: [/* @__PURE__ */ n(t, {
+				variant: "bonprix-h3",
+				children: i
+			}), /* @__PURE__ */ n(t, {
+				color: "on-bg-low",
+				children: l
+			})]
+		})]
+	});
+};
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=Breadcrumb.js.map

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

@@ -0,0 +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, { FC } 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\nexport interface Props {\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\nconst Breadcrumb: FC<Props> = ({ currentPageTitle, previousPageTitle, previousPageUrl, hideHeader = false, numberOfItemsText = \"\" }) => {\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      <a href={previousPageUrl} className={link()}>\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      </a>\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,GAeK,KAAyB,EAAE,qBAAkB,sBAAmB,oBAAiB,gBAAa,IAAO,uBAAoB,SAAS;CACtI,IAAM,EAAE,SAAM,SAAM,iBAAc,0BAAuB,SAAM,WAAQ,mBAAgB,EAAgB;CACvG,OACE,kBAAC,OAAD;EAAK,WAAW,EAAK;EAAG,aAAU;EAAa,yBAAuB;YAAtE,CACE,kBAAC,KAAD;GAAG,MAAM;GAAiB,WAAW,EAAK;aAA1C,CACE,kBAAC,QAAD;IAAM,WAAW,EAAY;cAE3B,kBAAC,GAAD;KAAM,SAAQ;KAAO,WAAW,EAAK;IAAI,CAAA;GACrC,CAAA,GAEN,kBAAC,QAAD;IAAM,WAAW,EAAsB;cACrC,kBAAC,QAAD;KAAM,WAAW,EAAa;eAAI;IAAwB,CAAA;GACtD,CAAA,CACL;MACF,IAAa,OACZ,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACE,kBAAC,GAAD;IAAY,SAAQ;cAAc;GAA6B,CAAA,GAC/D,kBAAC,GAAD;IAAY,OAAM;cAAa;GAA8B,CAAA,CAC1D;IAEJ;;AAET"}

package/dist/components/Breadcrumb/index.js

@@ -0,0 +1,7 @@
+import e from "./Breadcrumb.js";
+//#region src/components/Breadcrumb/index.ts
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Breadcrumb/index.ts"],"sourcesContent":["import Breadcrumb from \"./Breadcrumb\";\n\nexport default Breadcrumb;\nexport type { Props as BreadcrumbProps } from \"./Breadcrumb\";\n"],"mappings":";;AAEA,IAAA,IAAe"}

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

@@ -0,0 +1,29 @@
+"use client";
+import e from "../../../react/icon-button/dist/index.js";
+import t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { tv as i } from "tailwind-variants";
+//#region src/components/Buttons/BadgeIconButton/BadgeIconButton.tsx
+var a = i({
+	base: "preflight relative inline-block w-fit",
+	slots: { counter: "typography-body2 text-clr-on-primary-high absolute flex px-[5px] bg-clr-primary min-w-4 h-4 rounded-full start-6 top-1 pointer-events-none" }
+}), o = ({ amount: i = 0, label: o, ...s }) => {
+	let c = i > 0, l = c ? o.replace(/(\s)*\.?(\s)*$/, `. ${i} artikel`) : o, u = t.cloneElement(/* @__PURE__ */ n(e, {
+		label: l,
+		...s,
+		variant: "tertiary"
+	}), { hasPadding: !0 }), d = i > 99 ? "99+" : i, { base: f, counter: p } = a();
+	return /* @__PURE__ */ r("span", {
+		className: f(),
+		"data-bpds": "badge-icon-button",
+		"data-bpds-amount": i,
+		children: [u, c && /* @__PURE__ */ n("span", {
+			className: p(),
+			children: d
+		})]
+	});
+};
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=BadgeIconButton.js.map

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

@@ -0,0 +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 type { Anchor } from \"@bonprix-ds/utils\";\nimport React, { FC, Ref } 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  /** Standard HTML global attribute. Read more on <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/id\">MDN, attributes - id</a>. */\n  id?: string;\n  /** Standard HTML global attribute. Controls, if the button can be focused and how. Read more on <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex\">MDN, Attributes - tabindex</a>. */\n  tabIndex?: number;\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\ninterface AsLink extends BaseProps, Anchor {\n  /** If `true`, an anchor element will be rendered instead of a button. Also, link-specific properties `href`, `rel`and `target` will be available. Button-specific properties are not usable. */\n  link: true;\n  /**  Callback, which is triggered when the button is activated. */\n  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;\n  /** A React ref to the underlying HTML anchor element. */\n  ref?: Ref<HTMLAnchorElement>;\n}\n\ninterface AsButton extends BaseProps {\n  link?: never;\n  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** A React ref to the underlying HTML button element. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport type Props = AsLink | AsButton;\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-[5px] bg-clr-primary min-w-4 h-4 rounded-full start-6 top-1 pointer-events-none\",\n  },\n});\n\nconst BadgeIconButton: FC<Props> = ({ amount = 0, label, ...props }) => {\n  const badgeVisible = amount > 0;\n  const SRlabel = badgeVisible ? label.replace(/(\\s)*\\.?(\\s)*$/, `. ${amount} artikel`) : label;\n  const newIconButton = React.cloneElement(<IconButton label={SRlabel} {...props} variant=\"tertiary\" />, {\n    hasPadding: true,\n  });\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      {newIconButton}\n      {badgeVisible && <span className={counter()}>{badgeCounter}</span>}\n    </span>\n  );\n};\nexport default BadgeIconButton;\n"],"mappings":";;;;;;AAuCA,IAAM,IAAkB,EAAG;CACzB,MAAM;CACN,OAAO,EACL,SACE,6IACJ;AACF,CAAC,GAEK,KAA8B,EAAE,YAAS,GAAG,UAAO,GAAG,QAAY;CACtE,IAAM,IAAe,IAAS,GACxB,IAAU,IAAe,EAAM,QAAQ,kBAAkB,KAAK,EAAO,SAAS,IAAI,GAClF,IAAgB,EAAM,aAAa,kBAAC,GAAD;EAAY,OAAO;EAAS,GAAI;EAAO,SAAQ;CAAY,CAAA,GAAG,EACrG,YAAY,GACd,CAAC,GACK,IAAe,IAAS,KAAK,QAAQ,GACrC,EAAE,SAAM,eAAY,EAAgB;CAC1C,OACE,kBAAC,QAAD;EAAM,WAAW,EAAK;EAAG,aAAU;EAAoB,oBAAkB;YAAzE,CACG,GACA,KAAgB,kBAAC,QAAD;GAAM,WAAW,EAAQ;aAAI;EAAmB,CAAA,CAC7D;;AAEV"}

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

@@ -0,0 +1,7 @@
+import e from "./BadgeIconButton.js";
+//#region src/components/Buttons/BadgeIconButton/index.ts
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Buttons/BadgeIconButton/index.ts"],"sourcesContent":["import BadgeIconButton from \"./BadgeIconButton\";\n\nexport default BadgeIconButton;\nexport type { Props as BadgeIconButtonProps } from \"./BadgeIconButton\";\n"],"mappings":";;AAEA,IAAA,IAAe"}

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

@@ -0,0 +1,50 @@
+"use client";
+import { BaseButton as e } from "../../../internal-components/dist/index.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Buttons/Button/Button.tsx
+var n = ({ children: n, icon: r, iconPosition: i = "start", contentWidth: a = !1, id: o, variant: s = "primary", tabIndex: c, size: l, ...u }) => {
+	let d = {
+		children: n,
+		icon: r,
+		iconPosition: i,
+		contentWidth: a,
+		id: o,
+		variant: s,
+		tabIndex: c,
+		size: l
+	};
+	if (u.link) {
+		let { href: r, rel: i, target: a, onClick: o, ref: s } = u;
+		return /* @__PURE__ */ t(e, {
+			...d,
+			link: !0,
+			href: r,
+			rel: i,
+			target: a,
+			onClick: o,
+			componentName: "button",
+			size: l,
+			ref: s,
+			children: n
+		});
+	} else {
+		let { disabled: r, loading: i, onClick: a, type: o, form: s, ref: c } = u;
+		return /* @__PURE__ */ t(e, {
+			...d,
+			loading: i,
+			disabled: r,
+			onClick: a,
+			type: o,
+			form: s,
+			componentName: "button",
+			size: l,
+			ref: c,
+			children: n
+		});
+	}
+};
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +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 { Anchor, ButtonSize } from \"@bonprix-ds/utils\";\nimport React, { FC, Ref } 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  /** Standard HTML global attribute. Read more on <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/id\">MDN, attributes - id</a>. */\n  id?: string;\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  /** Standard HTML global attribute. Controls, if the button can be focused and how. Read more on <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex\">MDN, Attributes - tabindex</a>. */\n  tabIndex?: number;\n}\ninterface AsLink extends BaseProps, Anchor {\n  /** If `true`, an anchor element will be rendered instead of a button. Also, link-specific properties `href`, `rel`and `target` will be available. Button-specific properties are not usable. */\n  link: true;\n  /**  Callback, which is triggered when the link is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;\n  type?: never;\n  /** A React ref to the underlying HTML anchor element. */\n  ref?: Ref<HTMLAnchorElement>;\n}\ninterface AsButton extends BaseProps {\n  link?: never;\n  /** If `true`, the button will be disabled and thus not interactable. Only usable when the property `link` is set to `false`.  */\n  disabled?: boolean;\n  /** If `true`, a loading spinner will be shown instead of the content. Only usable when the property `link` is set to `false`. */\n  loading?: boolean;\n  /** Standard HTML attribute. Read more on <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form\">MDN, Button Element - form</a>. Only usable when the property `link` is set to `false`.  */\n  form?: string;\n  /** A React ref to the underlying HTML button element. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\ntype ButtonVariantProps = AsButton & {\n  /**  Callback, which is triggered when the button is activated. */\n  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Standard HTML attribute. Read more on <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type\">MDN, Button Element - type</a>. */\n  type?: \"button\";\n};\n\ntype SubmitResetVariantProps = AsButton & {\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  type?: \"submit\" | \"reset\";\n};\n\nexport type Props = AsLink | SubmitResetVariantProps | ButtonVariantProps;\n\nconst Button: FC<Props> = ({\n  children,\n  icon,\n  iconPosition = \"start\",\n  contentWidth = false,\n  id,\n  variant = \"primary\",\n  tabIndex,\n  size,\n  ...unionProps\n}) => {\n  const commonProps = { children, icon, iconPosition, contentWidth, id, variant, tabIndex, size };\n  if (unionProps.link) {\n    const { href, rel, target, onClick, ref } = unionProps;\n    return (\n      <BaseButton\n        {...commonProps}\n        link\n        href={href}\n        rel={rel}\n        target={target}\n        onClick={onClick}\n        componentName=\"button\"\n        size={size}\n        ref={ref}\n      >\n        {children}\n      </BaseButton>\n    );\n  } else {\n    const { disabled, loading, onClick, type, form, ref } = unionProps;\n    return (\n      <BaseButton\n        {...commonProps}\n        loading={loading}\n        disabled={disabled}\n        onClick={onClick}\n        type={type}\n        form={form}\n        componentName=\"button\"\n        size={size}\n        ref={ref}\n      >\n        {children}\n      </BaseButton>\n    );\n  }\n};\n\nexport default Button;\n"],"mappings":";;;;;AA4DA,IAAM,KAAqB,EACzB,aACA,SACA,kBAAe,SACf,kBAAe,IACf,OACA,aAAU,WACV,aACA,SACA,GAAG,QACC;CACJ,IAAM,IAAc;EAAE;EAAU;EAAM;EAAc;EAAc;EAAI;EAAS;EAAU;CAAK;CAC9F,IAAI,EAAW,MAAM;EACnB,IAAM,EAAE,SAAM,QAAK,WAAQ,YAAS,WAAQ;EAC5C,OACE,kBAAC,GAAD;GACE,GAAI;GACJ,MAAA;GACM;GACD;GACG;GACC;GACT,eAAc;GACR;GACD;GAEJ;EACS,CAAA;CAEhB,OAAO;EACL,IAAM,EAAE,aAAU,YAAS,YAAS,SAAM,SAAM,WAAQ;EACxD,OACE,kBAAC,GAAD;GACE,GAAI;GACK;GACC;GACD;GACH;GACA;GACN,eAAc;GACR;GACD;GAEJ;EACS,CAAA;CAEhB;AACF"}

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

@@ -0,0 +1,7 @@
+import e from "./Button.js";
+//#region src/components/Buttons/Button/index.ts
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Buttons/Button/index.ts"],"sourcesContent":["import Button from \"./Button\";\n\nexport default Button;\nexport type { Props as ButtonProps } from \"./Button\";\n"],"mappings":";;AAEA,IAAA,IAAe"}

package/dist/components/ButtonsSection/ButtonsSection.js

@@ -0,0 +1,19 @@
+"use client";
+import e from "../../hooks/useSubcomponent.js";
+import t from "./PrimaryButton.js";
+import n from "./SecondaryButton.js";
+import "react";
+import { jsxs as r } from "react/jsx-runtime";
+import { tv as i } from "tailwind-variants";
+//#region src/components/ButtonsSection/ButtonsSection.tsx
+var a = i({ slots: { root: "flex justify-center flex-wrap gap-3" } }), o = ({ owner: i, primary: o, secondary: s, fullWidthButtons: c = !1, classes: l = "" }) => {
+	let { getSingleChildFromSubcomponent: u, printBadConstructionMessage: d } = e([o, s]), f = { contentWidth: !c }, { root: p } = a();
+	return o ? /* @__PURE__ */ r("div", {
+		className: p({ class: l }),
+		children: [u(n, s ?? null, f), u(t, o, f)]
+	}) : (d(`${i}'s ButtonSection`), null);
+};
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=ButtonsSection.js.map