@bonprix-ds/internal-components 0.1.5 → 0.2.0

package/dist/index.d.ts

@@ -2,18 +2,22 @@ import { ButtonSize } from '@bonprix-ds/utils';
 import { ComponentProps } from 'react';
 import { default as default_2 } from 'react';
 import { ElementType } from 'react';
-import { IconType } from '@bonprix-ds/react-icon';
+import { IconOrElement } from '@bonprix-ds/react-icon';
 import { Ref } from 'react';
 import { ControlGroupProps as SelectionControlGroupProps } from '@bonprix-ds/utils';
+import { TVConfig } from 'tailwind-variants/dist/config.js';
+import { TVReturnType } from 'tailwind-variants';
 
 declare interface AllyIds {
     errorTextId: string;
     helperTextId: string;
 }
 
+export declare const backdrop: TVReturnType<{} | {} | {}, undefined, "fixed top-0 start-0 h-full w-full flex bg-clr-backdrop justify-center items-center", TVConfig<unknown, {} | {}>, {} | {}, undefined, TVReturnType<unknown, undefined, "fixed top-0 start-0 h-full w-full flex bg-clr-backdrop justify-center items-center", TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+
 export declare const BaseButton: <C extends ElementType = "button">({ children, size, variant, contentWidth, loading, icon, iconPosition, componentName, inverted, component, ...props }: BaseButtonProps<C>) => default_2.JSX.Element;
 
-export declare type BaseButtonProps<C extends ElementType> = BaseProps & {
+export declare type BaseButtonProps<C extends ElementType = "button"> = BaseProps & {
     component?: C;
 } & Omit<ComponentProps<C>, keyof BaseProps | "component">;
 
@@ -23,7 +27,7 @@ declare interface BaseProps {
     variant?: "primary" | "secondary" | "tertiary";
     contentWidth?: boolean;
     loading?: boolean;
-    icon?: IconType;
+    icon?: IconOrElement;
     iconPosition?: "start" | "end";
     componentName?: "button" | "icon-button" | "badge-icon-button";
     inverted?: boolean;
@@ -66,6 +70,8 @@ declare interface ControlledInputProps extends BaseProps_2 {
     onChange: (value: boolean) => void;
 }
 
+export declare const fadeAnimation: TVReturnType<{} | {} | {}, undefined, "data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut", TVConfig<unknown, {} | {}>, {} | {}, undefined, TVReturnType<unknown, undefined, "data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut", TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+
 export declare const InputHelperText: ({ id, children, type }: InputHelperTextProps) => default_2.JSX.Element;
 
 export declare interface InputHelperTextProps {
@@ -74,7 +80,7 @@ export declare interface InputHelperTextProps {
     type?: "description" | "error";
 }
 
-export declare const InputHelperTextSection: ({ helperText, helperTextId, error, errorText, errorTextId, className }: InputHelperTextSectionProps) => default_2.JSX.Element;
+export declare const InputHelperTextSection: ({ helperText, helperTextId, error, errorText, errorTextId, disabled, className, }: InputHelperTextSectionProps) => default_2.JSX.Element;
 
 export declare interface InputHelperTextSectionProps {
     helperText: string;
@@ -82,6 +88,7 @@ export declare interface InputHelperTextSectionProps {
     error: boolean;
     errorText: string;
     errorTextId: string;
+    disabled?: boolean;
     className?: string;
 }
 
@@ -107,6 +114,20 @@ export declare const SelectionControlGroup: ({ label, children, error, errorText
 
 export { SelectionControlGroupProps }
 
+export declare const slideAnimation: TVReturnType<{} | {} | {}, undefined, "data-[state=open]:animate-slideLeft data-[state=closed]:animate-slideRight", TVConfig<unknown, {} | {}>, {} | {}, undefined, TVReturnType<unknown, undefined, "data-[state=open]:animate-slideLeft data-[state=closed]:animate-slideRight", TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+
+export declare const tabStyleContainerBase = "group flex flex-col relative cursor-pointer rounded after:start-0 after:bottom-0 after:w-full after:border-b-transparent after:content-[''] after:h-0.5 ";
+
+export declare const tabStyleContainerVariant = "focus-visible:outline-none after:h-2 min-w-8 max-w-36 shrink-0";
+
+export declare const tabStyleLabelClass = "line-clamp-2";
+
+export declare const tabStyleLabelContainerBase = "flex flex-col mb-auto typography-body1 text-current px-0.5 border border-transparent rounded-sm";
+
+export declare const tabStyleLabelContainerVariant = "group-focus-visible:outline outline-2 -outline-offset-2 text-left";
+
+export declare const tabStyleList = "gap-x-3 text-clr-primary flex border-b border-b-clr-disabled overflow-x-auto overscroll-none scrollbar-none";
+
 declare interface UncontrolledInputProps extends BaseProps_2 {
     checked?: never;
     defaultChecked: boolean;

package/dist/index.js

@@ -1,13 +1,13 @@
 "use client";
-import e from "@bonprix-ds/react-icon";
-import t from "@bonprix-ds/react-spinner";
-import { twMerge as n } from "tailwind-merge";
-import { useId as r, useState as i } from "react";
-import { tv as a } from "tailwind-variants";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import * as l from "@radix-ui/react-label";
+import e, { IconSlot as t } from "@bonprix-ds/react-icon";
+import n from "@bonprix-ds/react-spinner";
+import { twMerge as r } from "tailwind-merge";
+import { useId as i, useState as a } from "react";
+import { tv as o } from "tailwind-variants";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import * as u from "@radix-ui/react-label";
 //#region src/BaseButton.tsx
-var u = a({
+var d = o({
 	base: ["preflight rounded typography-button relative flex items-center justify-center gap-2 border border-transparent group/button", "focus-visible:outline outline-2 outline-offset-2"],
 	slots: {
 		icon: "",
@@ -268,44 +268,44 @@ var u = a({
 			}
 		}
 	]
-}), d = ({ children: r, size: i = "medium", variant: a = "primary", contentWidth: l = !1, loading: d = !1, icon: f, iconPosition: p = "start", componentName: m, inverted: h = !1, component: g = "button", ..._ }) => {
-	let v = g, { disabled: y = !1, className: b = "", type: x, ...S } = _, C = y || d, w = m === "icon-button", { base: T, icon: E, contentWrapper: D, loader: O } = u({
+}), f = ({ children: e, size: i = "medium", variant: a = "primary", contentWidth: o = !1, loading: u = !1, icon: f, iconPosition: p = "start", componentName: m, inverted: h = !1, component: g = "button", ..._ }) => {
+	let v = g, { disabled: y = !1, className: b = "", type: x, ...S } = _, C = y || u, w = m === "icon-button", { base: T, icon: E, contentWrapper: D, loader: O } = d({
 		size: i,
-		contentWidth: l,
+		contentWidth: o,
 		disabled: C,
 		iconButton: w,
 		iconPosition: p,
 		variant: a,
-		loading: d,
+		loading: u,
 		link: g !== "button",
 		inverted: h
-	}), k = /* @__PURE__ */ c(o, { children: [f && /* @__PURE__ */ s(e, {
-		variant: f,
+	}), k = /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(t, {
+		icon: f,
 		className: E()
-	}), w ? void 0 : r] }), A = k;
-	d && (A = /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("span", {
+	}), w ? void 0 : e] }), A = k;
+	u && (A = /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
 		className: D(),
 		children: k
-	}), /* @__PURE__ */ s("span", {
+	}), /* @__PURE__ */ c("span", {
 		className: O(),
-		children: /* @__PURE__ */ s(t, { edgeLength: w ? "1.25rem" : "1rem" })
+		children: /* @__PURE__ */ c(n, { edgeLength: w ? "1.25rem" : "1rem" })
 	})] }));
 	let j;
-	return w && (j = r || "Icon"), /* @__PURE__ */ s(v, {
-		className: n(T(), b),
+	return w && (j = e || "Icon"), /* @__PURE__ */ c(v, {
+		className: r(T(), b),
 		disabled: g === "button" ? C : void 0,
 		type: g === "button" ? x ?? "button" : void 0,
 		...S,
 		"aria-label": j,
 		"data-bpds": m,
-		"data-bpds-icon": f,
+		"data-bpds-icon": typeof f == "string" ? f : void 0,
 		"data-bpds-size": i,
-		"data-bpds-content-width": m === "icon-button" ? void 0 : l,
+		"data-bpds-content-width": m === "icon-button" ? void 0 : o,
 		"data-bpds-inverted": h,
 		"data-bpds-variant": a,
 		children: A
 	});
-}, f = a({
+}, p = o({
 	base: "preflight typography-input-text flex gap-2 items-start py-3 text-clr-on-bg-high relative",
 	slots: {
 		input: ["appearance-none relative w-6 h-6 rounded-sm border text-current cursor-pointer shrink-0", "focus-visible:outline focus-visible:outline-current focus-visible:outline-2 focus-visible:outline-offset-2"],
@@ -320,21 +320,26 @@ var u = a({
 			},
 			false: { base: "hover:cursor-pointer hover:text-clr-on-bg-low" }
 		},
-		error: { true: {
+		error: { true: "" }
+	},
+	compoundVariants: [{
+		disabled: !1,
+		error: !0,
+		class: {
 			input: "border-clr-fg-error bg-clr-bg-error [&:checked::after]:bg-clr-fg-error",
 			icon: "fill-clr-fg-error"
-		} }
-	}
-}), p = ({ label: t, name: n, onChange: r, onBlur: a, id: o, value: l = t, required: u, disabled: d, error: p, errorText: m, helperText: h, helperTextId: g, errorTextId: _, rootRef: v, describedBy: y, ...b }) => {
-	let { base: x, input: S, icon: C } = f({
+		}
+	}]
+}), m = ({ label: t, name: n, onChange: r, onBlur: i, id: o, value: s = t, required: u, disabled: d = !1, error: f, errorText: m, helperText: h, helperTextId: g, errorTextId: _, rootRef: v, describedBy: y, ...b }) => {
+	let { base: x, input: S, icon: C } = p({
 		disabled: d,
-		error: p
-	}), w = "defaultChecked" in b, T = b.checked, [E, D] = i(() => w ? b.defaultChecked : T), O = w ? E : T, k;
-	return h && (k = g), p && m && (k = k ? k + " " + _ : _), y && (k = k ? k + " " + y : y), /* @__PURE__ */ c("label", {
+		error: f
+	}), w = "defaultChecked" in b, T = b.checked, [E, D] = a(() => w ? b.defaultChecked : T), O = w ? E : T, k;
+	return h && (k = g), !d && f && m && (k = k ? k + " " + _ : _), y && (k = k ? k + " " + y : y), /* @__PURE__ */ l("label", {
 		className: x(),
 		tabIndex: -1,
 		children: [
-			/* @__PURE__ */ s("input", {
+			/* @__PURE__ */ c("input", {
 				className: S(),
 				type: "checkbox",
 				checked: O,
@@ -343,54 +348,54 @@ var u = a({
 					w && D(t), r?.(t);
 				},
 				onBlur: (e) => {
-					if (a) {
+					if (i) {
 						if (e.relatedTarget?.contains(e.currentTarget)) {
 							e.preventDefault();
 							return;
 						}
-						a();
+						i();
 					}
 				},
-				value: l,
+				value: s,
 				id: o,
 				name: n,
 				disabled: d,
 				ref: v,
 				required: u,
-				"aria-invalid": p ? "true" : void 0,
+				"aria-invalid": f ? "true" : void 0,
 				"aria-describedby": k
 			}),
 			t,
-			O && /* @__PURE__ */ s(e, {
+			O && /* @__PURE__ */ c(e, {
 				variant: "check-bold",
 				className: C()
 			})
 		]
 	});
-}, m = a({
+}, h = o({
 	base: "preflight typography-input-helper-text w-full inline-block",
 	variants: { type: {
 		description: "text-clr-on-bg-mid",
 		error: "text-clr-fg-error"
 	} }
-}), h = ({ id: e, children: t, type: n = "description" }) => {
-	let r = m({ type: n });
-	return /* @__PURE__ */ s("p", {
+}), g = ({ id: e, children: t, type: n = "description" }) => {
+	let r = h({ type: n });
+	return /* @__PURE__ */ c("p", {
 		id: e,
 		className: r,
 		children: t
 	});
-}, g = a({ base: "preflight flex flex-col gap-1 w-full" }), _ = ({ helperText: e, helperTextId: t, error: n = !1, errorText: r, errorTextId: i, className: a = "" }) => /* @__PURE__ */ c("div", {
-	className: `${g()} ${a}`,
-	children: [e && /* @__PURE__ */ s(h, {
+}, _ = o({ base: "preflight flex flex-col gap-1 w-full" }), v = ({ helperText: e, helperTextId: t, error: n = !1, errorText: r, errorTextId: i, disabled: a = !1, className: o = "" }) => /* @__PURE__ */ l("div", {
+	className: `${_()} ${o}`,
+	children: [e && /* @__PURE__ */ c(g, {
 		id: t,
 		children: e
-	}), n && r && /* @__PURE__ */ s(h, {
+	}), !a && n && r && /* @__PURE__ */ c(g, {
 		id: i,
 		type: "error",
 		children: r
 	})]
-}), v = a({
+}), y = o({
 	slots: {
 		root: [
 			"preflight relative text-clr-primary fill-clr-primary pt-5",
@@ -424,12 +429,7 @@ var u = a({
 			},
 			false: { stateIndicator: ["group-hover/input-wrapper:h-0.25 group-hover/input-wrapper:block", "group-hover:group-focus-within/input-wrapper:h-0.75 group-hover:group-focus-within/input-wrapper:block"] }
 		},
-		error: { true: {
-			root: "text-clr-fg-error fill-clr-fg-error [&_.input]:caret-clr-fg-error [&_.input]:caret-clr-fg-error",
-			inputWrapper: "border-clr-fg-error",
-			inputLabel: "text-clr-fg-error",
-			stateIndicator: "bg-clr-fg-error"
-		} },
+		error: { true: "" },
 		componentName: {
 			select: { inputWrapper: "has-[[data-radix-popper-side=top]]:rounded-t-none has-[[data-radix-popper-side=bottom]]:rounded-b-none" },
 			"password-field": "",
@@ -443,83 +443,107 @@ var u = a({
 			false: {}
 		}
 	},
-	compoundVariants: [{
-		labelFloated: !1,
-		componentName: [
-			"select",
-			"search-field",
-			"password-field"
-		],
-		class: { inputLabel: "pe-7" }
-	}]
-}), y = ({ children: e, id: t, label: n, labelFloated: r, disabled: i, required: a, componentName: o, helperText: u, helperTextId: d, error: f, errorText: p, errorTextId: m, labelClassName: h = "" }) => {
-	let { root: g, inputWrapper: y, inputLabel: b, helperTextSection: x, stateIndicator: S } = v({
+	compoundVariants: [
+		{
+			labelFloated: !1,
+			componentName: [
+				"select",
+				"search-field",
+				"password-field"
+			],
+			class: { inputLabel: "pe-7" }
+		},
+		{
+			componentName: [
+				"text-field",
+				"search-field",
+				"password-field",
+				"email-field",
+				"textarea"
+			],
+			class: { inputLabel: "group-focus-within:-translate-y-8 group-focus-within:typography-input-label" }
+		},
+		{
+			disabled: !1,
+			error: !0,
+			class: {
+				root: "text-clr-fg-error fill-clr-fg-error [&_.input]:caret-clr-fg-error [&_.input]:caret-clr-fg-error",
+				inputWrapper: "border-clr-fg-error",
+				inputLabel: "text-clr-fg-error",
+				stateIndicator: "bg-clr-fg-error"
+			}
+		}
+	]
+}), b = ({ children: e, id: t, label: n, labelFloated: r, disabled: i, required: a, componentName: o, helperText: s, helperTextId: d, error: f, errorText: p, errorTextId: m, labelClassName: h = "" }) => {
+	let { root: g, inputWrapper: _, inputLabel: b, helperTextSection: x, stateIndicator: S } = y({
 		labelFloated: r,
 		disabled: i,
 		error: f,
 		componentName: o,
-		helperTextSectionVisible: !!(u || f && p)
+		helperTextSectionVisible: !!(s || !i && f && p)
 	});
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ l("div", {
 		className: g(),
 		"data-bpds": o,
 		children: [
-			/* @__PURE__ */ c("div", {
-				className: y(),
+			/* @__PURE__ */ l("div", {
+				className: _(),
 				"aria-disabled": i,
-				children: [e, /* @__PURE__ */ s("div", { className: S() })]
+				children: [e, /* @__PURE__ */ c("div", { className: S() })]
 			}),
-			/* @__PURE__ */ c(l.Root, {
+			/* @__PURE__ */ l(u.Root, {
 				htmlFor: t,
 				className: `${b()} ${h}`,
-				children: [n, a && /* @__PURE__ */ s("span", {
+				children: [n, a && /* @__PURE__ */ c("span", {
 					"aria-hidden": "true",
 					children: "*"
 				})]
 			}),
-			/* @__PURE__ */ s(_, {
+			/* @__PURE__ */ c(v, {
 				className: x(),
-				helperText: u,
+				helperText: s,
 				helperTextId: d,
 				error: f,
 				errorText: p,
-				errorTextId: m
+				errorTextId: m,
+				disabled: i
 			})
 		]
 	});
-}, b = a({
+}, x = o({
 	base: "preflight min-w-0",
 	slots: { label: "typography-input-label text-clr-on-bg-mid truncate inline-block w-full" },
 	variants: { horizontalPadding: { true: { base: "px-3" } } }
-}), x = ({ label: e, children: t, error: n = !1, errorText: i = "", disabled: a = !1, helperText: o = "", required: l = !1, divider: u = !1, horizontalPadding: d = !1, "aria-label": f, "aria-labelledby": p, componentName: m }) => {
-	let { base: h, label: g } = b({ horizontalPadding: d }), v = r(), y = r(), x;
-	return o && (x = v), n && i && (x = x ? x + " " + y : y), /* @__PURE__ */ c("fieldset", {
+}), S = ({ label: e, children: t, error: n = !1, errorText: r = "", disabled: a = !1, helperText: o = "", required: s = !1, divider: u = !1, horizontalPadding: d = !1, "aria-label": f, "aria-labelledby": p, componentName: m }) => {
+	let { base: h, label: g } = x({ horizontalPadding: d }), _ = i(), y = i(), b;
+	return o && (b = _), !a && n && r && (b = b ? b + " " + y : y), /* @__PURE__ */ l("fieldset", {
 		className: h(),
 		disabled: a,
 		"data-bpds": m,
 		"data-bpds-has-divider": u ? "true" : "false",
 		"data-bpds-has-horizontal-padding": d ? "true" : "false",
-		"aria-describedby": x,
+		"aria-describedby": b,
 		"aria-invalid": n ? "true" : void 0,
 		"aria-label": f,
 		"aria-labelledby": p,
 		children: [
-			e && /* @__PURE__ */ c("legend", {
+			e && /* @__PURE__ */ l("legend", {
 				className: g(),
-				children: [e, l && /* @__PURE__ */ s("span", { children: "*" })]
+				children: [e, s && /* @__PURE__ */ c("span", { children: "*" })]
 			}),
 			t,
-			/* @__PURE__ */ s(_, {
+			/* @__PURE__ */ c(v, {
 				helperText: o,
 				error: n,
-				errorText: i,
-				helperTextId: v,
-				errorTextId: y
+				errorText: r,
+				helperTextId: _,
+				errorTextId: y,
+				disabled: a
 			})
 		]
 	});
-};
+}, C = o({ base: "data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut" }), w = o({ base: "data-[state=open]:animate-slideLeft data-[state=closed]:animate-slideRight" }), T = o({ base: "fixed top-0 start-0 h-full w-full flex bg-clr-backdrop justify-center items-center" }), E = "gap-x-3 text-clr-primary flex border-b border-b-clr-disabled overflow-x-auto overscroll-none scrollbar-none", D = "group flex flex-col relative cursor-pointer rounded after:start-0 after:bottom-0 after:w-full after:border-b-transparent after:content-[''] after:h-0.5 ", O = "focus-visible:outline-none after:h-2 min-w-8 max-w-36 shrink-0", k = "flex flex-col mb-auto typography-body1 text-current px-0.5 border border-transparent rounded-sm", A = "group-focus-visible:outline outline-2 -outline-offset-2 text-left", j = "line-clamp-2";
 //#endregion
-export { d as BaseButton, p as CheckboxBase, h as InputHelperText, _ as InputHelperTextSection, y as InputWrapper, x as SelectionControlGroup };
+export { f as BaseButton, m as CheckboxBase, g as InputHelperText, v as InputHelperTextSection, b as InputWrapper, S as SelectionControlGroup, T as backdrop, C as fadeAnimation, w as slideAnimation, D as tabStyleContainerBase, O as tabStyleContainerVariant, j as tabStyleLabelClass, k as tabStyleLabelContainerBase, A as tabStyleLabelContainerVariant, E as tabStyleList };
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/BaseButton.tsx","../src/CheckboxBase.tsx","../src/InputHelperText.tsx","../src/InputHelperTextSection.tsx","../src/InputWrapper.tsx","../src/SelectionControlGroup.tsx"],"sourcesContent":["import Icon, { type IconType } from \"@bonprix-ds/react-icon\";\nimport Spinner from \"@bonprix-ds/react-spinner\";\nimport type { ButtonSize } from \"@bonprix-ds/utils\";\nimport { twMerge } from \"tailwind-merge\";\nimport React, { ComponentProps, ElementType, ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  base: [\n    \"preflight rounded typography-button relative flex items-center justify-center gap-2 border border-transparent group/button\",\n    \"focus-visible:outline outline-2 outline-offset-2\",\n  ],\n  slots: {\n    icon: \"\",\n    loader: \"absolute\",\n    contentWrapper: \"flex items-center justify-center gap-2\",\n  },\n  variants: {\n    variant: { primary: {}, secondary: {}, tertiary: {} },\n    disabled: { true: \"\", false: \"\" },\n    contentWidth: { true: \"\", false: \"\" },\n    size: { small: \"\", medium: \"\", large: \"\" },\n    link: { true: \"\", false: \"\" },\n    inverted: { true: { base: \"outline-clr-primary-inverse\" }, false: { base: \"outline-clr-primary\" } },\n    iconPosition: {\n      start: \"\",\n      end: \"flex-row-reverse\",\n    },\n    loading: {\n      true: {\n        contentWrapper: \"invisible\",\n      },\n      false: \"\",\n    },\n    iconButton: {\n      true: \"\",\n      false: \"py-[0.4375rem]\",\n    },\n  },\n  compoundVariants: [\n    {\n      variant: \"primary\",\n      inverted: false,\n      class: {\n        base: \"bg-clr-primary text-clr-on-primary-high\",\n        icon: \"fill-clr-on-primary-high\",\n      },\n    },\n    {\n      variant: \"primary\",\n      inverted: true,\n      class: {\n        base: \"bg-clr-primary-inverse text-clr-on-primary-high-inverse\",\n        icon: \"fill-clr-on-primary-high-inverse\",\n      },\n    },\n    {\n      variant: \"primary\",\n      disabled: true,\n      inverted: false,\n      class: {\n        base: \"text-clr-disabled bg-clr-bg-disabled\",\n        icon: \"fill-clr-disabled\",\n      },\n    },\n    {\n      variant: \"primary\",\n      disabled: false,\n      inverted: false,\n      class: {\n        base: \"hover:bg-clr-on-bg-low active:bg-clr-on-bg-low\",\n      },\n    },\n    {\n      variant: \"primary\",\n      disabled: true,\n      inverted: true,\n      class: {\n        base: \"text-clr-disabled-inverse bg-clr-bg-disabled-inverse\",\n        icon: \"fill-clr-disabled-inverse\",\n      },\n    },\n    {\n      variant: \"primary\",\n      disabled: false,\n      inverted: true,\n      class: {\n        base: \"hover:bg-clr-on-bg-low-inverse active:bg-clr-on-bg-low-inverse\",\n      },\n    },\n    {\n      variant: \"secondary\",\n      inverted: false,\n      class: {\n        base: \"text-clr-primary border-clr-primary\",\n        icon: \"fill-clr-primary\",\n      },\n    },\n    {\n      variant: \"secondary\",\n      inverted: true,\n      class: {\n        base: \"text-clr-primary-inverse border-clr-primary-inverse\",\n        icon: \"fill-clr-primary-inverse\",\n      },\n    },\n    {\n      variant: \"secondary\",\n      disabled: true,\n      inverted: false,\n      class: {\n        base: \"text-clr-disabled border-clr-disabled\",\n        icon: \"fill-clr-disabled\",\n      },\n    },\n    {\n      variant: \"secondary\",\n      disabled: false,\n      inverted: false,\n      class: {\n        base: \"hover:text-clr-on-bg-low hover:border-clr-on-bg-low active:text-clr-on-bg-low active:border-clr-on-bg-low\",\n        icon: \"group-hover/button:fill-clr-on-bg-low group-active/button:fill-clr-on-bg-low\",\n      },\n    },\n    {\n      variant: \"secondary\",\n      disabled: true,\n      inverted: true,\n      class: {\n        base: \"text-clr-disabled-inverse border-clr-disabled-inverse\",\n        icon: \"fill-clr-disabled-inverse\",\n      },\n    },\n    {\n      variant: \"secondary\",\n      disabled: false,\n      inverted: true,\n      class: {\n        base: \"hover:text-clr-on-bg-low-inverse hover:border-clr-on-bg-low-inverse active:text-clr-on-bg-low-inverse active:border-clr-on-bg-low-inverse\",\n        icon: \"group-hover/button:fill-clr-on-bg-low-inverse group-active/button:fill-clr-on-bg-low-inverse\",\n      },\n    },\n    {\n      variant: \"tertiary\",\n      inverted: false,\n      class: {\n        base: \"text-clr-primary\",\n        icon: \"fill-clr-primary\",\n      },\n    },\n    {\n      variant: \"tertiary\",\n      inverted: true,\n      class: {\n        base: \"text-clr-primary-inverse\",\n        icon: \"fill-clr-primary-inverse\",\n      },\n    },\n    {\n      variant: \"tertiary\",\n      disabled: true,\n      inverted: false,\n      class: {\n        base: \"text-clr-disabled\",\n        icon: \"fill-clr-disabled\",\n      },\n    },\n    {\n      variant: \"tertiary\",\n      disabled: false,\n      inverted: false,\n      class: {\n        base: \"hover:text-clr-on-bg-low active:text-clr-on-bg-low\",\n        icon: \"group-hover/button:fill-clr-on-bg-low group-active/button:fill-clr-on-bg-low\",\n      },\n    },\n    {\n      variant: \"tertiary\",\n      disabled: true,\n      inverted: true,\n      class: {\n        base: \"text-clr-disabled-inverse\",\n        icon: \"fill-clr-disabled-inverse\",\n      },\n    },\n    {\n      variant: \"tertiary\",\n      disabled: false,\n      inverted: true,\n      class: {\n        base: \"hover:text-clr-on-bg-low-inverse active:text-clr-on-bg-low-inverse\",\n        icon: \"group-hover/button:fill-clr-on-bg-low-inverse group-active/button:fill-clr-on-bg-low-inverse\",\n      },\n    },\n    {\n      contentWidth: false,\n      iconButton: false,\n      class: \"w-full\",\n    },\n    {\n      contentWidth: true,\n      link: true,\n      class: \"w-fit\",\n    },\n    {\n      iconButton: false,\n      variant: [\"primary\", \"secondary\"],\n      class: \"px-4\",\n    },\n    // Regular Button sizes\n    {\n      iconButton: false,\n      size: \"medium\",\n      class: {\n        icon: \"w-4 h-4\",\n      },\n    },\n    {\n      iconButton: false,\n      size: \"large\",\n      class: {\n        base: \"py-[0.9375rem]\",\n        icon: \"w-4 h-4\",\n      },\n    },\n    // Icon Button sizes\n    {\n      iconButton: true,\n      size: \"small\",\n      class: {\n        base: \"p-[0.1875rem]\",\n        icon: \"w-4 h-4\",\n      },\n    },\n    {\n      iconButton: true,\n      size: \"medium\",\n      variant: [\"primary\", \"secondary\"],\n      class: {\n        base: \"p-[0.4375rem]\",\n        icon: \"w-4 h-4\", // we currently predefine the fill color in the icon, so we cannot inherit the fill from base and instead have to set it directly\n      },\n    },\n    {\n      iconButton: true,\n      size: \"medium\",\n      variant: \"tertiary\",\n      class: {\n        base: \"p-[0.1875rem]\",\n        icon: \"w-6 h-6\",\n      },\n    },\n    {\n      iconButton: true,\n      size: \"large\",\n      class: {\n        base: \"p-[0.6875rem]\",\n        icon: \"w-6 h-6\",\n      },\n    },\n  ],\n});\n\ninterface BaseProps {\n  children: string;\n  size?: ButtonSize;\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  contentWidth?: boolean;\n  loading?: boolean;\n  icon?: IconType;\n  iconPosition?: \"start\" | \"end\";\n  componentName?: \"button\" | \"icon-button\" | \"badge-icon-button\";\n  inverted?: boolean;\n}\n\nexport type Props<C extends ElementType> = BaseProps & {\n  component?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps | \"component\">;\n\nconst BaseButton = <C extends ElementType = \"button\">({\n  children,\n  size = \"medium\",\n  variant = \"primary\",\n  contentWidth = false,\n  loading = false,\n  icon,\n  iconPosition = \"start\",\n  componentName,\n  inverted = false,\n  component = \"button\" as C,\n  ...props\n}: Props<C>) => {\n  const Component: ElementType = component;\n  const { disabled = false, className = \"\", type, ...otherProps } = props;\n  const isDisabled = disabled || loading;\n  const iconButton = componentName === \"icon-button\";\n  const link = component !== \"button\";\n\n  const {\n    base,\n    icon: iconClass,\n    contentWrapper,\n    loader,\n  } = generateClasses({\n    size,\n    contentWidth,\n    disabled: isDisabled,\n    iconButton,\n    iconPosition,\n    variant,\n    loading,\n    link,\n    inverted,\n  });\n\n  const actualContent = (\n    <>\n      {icon && <Icon variant={icon} className={iconClass()} />}\n      {iconButton ? undefined : children}\n    </>\n  );\n\n  let content: ReactNode = actualContent;\n\n  if (loading) {\n    content = (\n      <>\n        <span className={contentWrapper()}>{actualContent}</span>\n        <span className={loader()}>\n          <Spinner edgeLength={iconButton ? \"1.25rem\" : \"1rem\"} />\n        </span>\n      </>\n    );\n  }\n\n  let ariaLabel = undefined;\n  if (iconButton) {\n    if (children) {\n      ariaLabel = children;\n    } else {\n      ariaLabel = \"Icon\";\n    }\n  }\n\n  return (\n    <Component\n      className={twMerge(base(), className)}\n      disabled={component === \"button\" ? isDisabled : undefined}\n      type={component === \"button\" ? (type ?? \"button\") : undefined}\n      {...otherProps}\n      aria-label={ariaLabel}\n      data-bpds={componentName}\n      data-bpds-icon={icon}\n      data-bpds-size={size}\n      data-bpds-content-width={componentName !== \"icon-button\" ? contentWidth : undefined}\n      data-bpds-inverted={inverted}\n      data-bpds-variant={variant}\n    >\n      {content}\n    </Component>\n  );\n};\n\nexport default BaseButton;\n","\"use client\";\n\nimport Icon from \"@bonprix-ds/react-icon\";\nimport React, { ChangeEvent, FocusEvent, Ref, useState } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  base: \"preflight typography-input-text flex gap-2 items-start py-3 text-clr-on-bg-high relative\",\n  slots: {\n    input: [\n      \"appearance-none relative w-6 h-6 rounded-sm border text-current cursor-pointer shrink-0\",\n      \"focus-visible:outline focus-visible:outline-current focus-visible:outline-2 focus-visible:outline-offset-2\",\n    ],\n    icon: \"w-[1.125rem] h-[1.125rem] absolute m-0.75 fill-current\",\n  },\n  variants: {\n    disabled: {\n      true: {\n        base: \"text-clr-disabled border-clr-disabled\",\n        input: \"bg-clr-bg-disabled\",\n        icon: \"fill-clr-disabled\",\n      },\n      false: {\n        base: \"hover:cursor-pointer hover:text-clr-on-bg-low\",\n      },\n    },\n    error: {\n      true: {\n        input: \"border-clr-fg-error bg-clr-bg-error [&:checked::after]:bg-clr-fg-error\",\n        icon: \"fill-clr-fg-error\",\n      },\n    },\n  },\n});\n\ninterface BaseProps {\n  label: string;\n  /** The name of the checkbox. Will be submitted with the form. */\n  name: string;\n  /** Callback function that is called when the checkbox loses focus. */\n  onBlur?: () => void;\n  /** The id of the checkbox. */\n  id?: string;\n  /** Value that will be submitted when the form is submitted. */\n  value?: string;\n  /** If set to `true`, the checkbox will be marked as required. */\n  required?: boolean;\n  /** If set to `true`, the checkbox will be disabled. */\n  disabled?: boolean;\n  /** If set to `true`, the checkbox will be marked as erroneous. */\n  error?: boolean;\n  errorText?: string;\n  helperText?: string;\n  /** A reference to the root element of the checkbox. Helpful for intergrating with 3rd party form libraries like react-hook-form. */\n  rootRef?: Ref<HTMLInputElement>;\n  /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby\" target=\"_blank\">ARIA: aria-describedby attribute.</a> */\n  describedBy?: string;\n}\n\ninterface ControlledInputProps extends BaseProps {\n  /** Controls, whether the checkbox is checked or not. Should be used in conjunction with `onChange`. */\n  checked: boolean;\n  /** Initial value of the checkbox. Should be used for uncontrolled variant of the component. */\n  defaultChecked?: never;\n  /** Callback function that is called when the checkbox state changes. `checked` should be adjusted appropriately. */\n  onChange: (value: boolean) => void;\n}\n\ninterface UncontrolledInputProps extends BaseProps {\n  checked?: never;\n  defaultChecked: boolean;\n  onChange?: (value: boolean) => void;\n}\nexport interface AllyIds {\n  errorTextId: string;\n  helperTextId: string;\n}\nexport type Props = ControlledInputProps | UncontrolledInputProps;\n\nconst CheckboxItem = ({\n  label,\n  name,\n  onChange,\n  onBlur,\n  id,\n  value = label,\n  required,\n  disabled,\n  error,\n  errorText,\n  helperText,\n  helperTextId,\n  errorTextId,\n  rootRef,\n  describedBy,\n  ...props\n}: Props & AllyIds) => {\n  const { base, input, icon } = generateClasses({ disabled, error });\n\n  const isUncontrolled = \"defaultChecked\" in props;\n  const controlledChecked = props.checked;\n\n  const [internalChecked, setInternalChecked] = useState(() => (isUncontrolled ? props.defaultChecked : controlledChecked));\n\n  const checked = isUncontrolled ? internalChecked : controlledChecked;\n  let ariaDescribedBy;\n  if (helperText) {\n    ariaDescribedBy = helperTextId;\n  }\n  if (error && errorText) {\n    ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + errorTextId : errorTextId;\n  }\n  if (describedBy) {\n    ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + describedBy : describedBy;\n  }\n\n  const handleChange = (ev: ChangeEvent<HTMLInputElement>) => {\n    const checked = ev.currentTarget.checked;\n\n    if (isUncontrolled) {\n      setInternalChecked(checked);\n    }\n    onChange?.(checked);\n  };\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    if (!onBlur) return;\n    // prevent blur triggers if clicking in label instead input\n    if (event.relatedTarget?.contains(event.currentTarget)) {\n      event.preventDefault();\n      return;\n    }\n    onBlur();\n  };\n  return (\n    // Label causes inconsistent blur event when interacts with input.\n    // -1 tabIndex makes 'relatedTarget' not being always null and helps detecting correct blur event\n    <label className={base()} tabIndex={-1}>\n      <input\n        className={input()}\n        type=\"checkbox\"\n        checked={checked}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        value={value}\n        id={id}\n        name={name}\n        disabled={disabled}\n        ref={rootRef}\n        required={required}\n        aria-invalid={error ? \"true\" : undefined}\n        aria-describedby={ariaDescribedBy}\n      />\n      {label}\n      {checked && <Icon variant=\"check-bold\" className={icon()} />}\n    </label>\n  );\n};\n\nexport default CheckboxItem;\n","import React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  base: \"preflight typography-input-helper-text w-full inline-block\",\n  variants: {\n    type: {\n      description: \"text-clr-on-bg-mid\",\n      error: \"text-clr-fg-error\",\n    },\n  },\n});\n\nexport interface Props {\n  id: string;\n  children: string;\n  type?: \"description\" | \"error\";\n}\n\nconst InputHelperText = ({ id, children, type = \"description\" }: Props) => {\n  const className = generateClasses({ type });\n  return (\n    <p id={id} className={className}>\n      {children}\n    </p>\n  );\n};\n\nexport default InputHelperText;\n","\"use client\";\n\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport InputHelperText from \"./InputHelperText\";\n\nconst generateClasses = tv({\n  base: \"preflight flex flex-col gap-1 w-full\",\n});\n\nexport interface Props {\n  helperText: string;\n  helperTextId: string;\n  error: boolean;\n  errorText: string;\n  errorTextId: string;\n  className?: string;\n}\n\nconst InputHelperTextSection = ({ helperText, helperTextId, error = false, errorText, errorTextId, className = \"\" }: Props) => {\n  return (\n    <div className={`${generateClasses()} ${className}`}>\n      {helperText && <InputHelperText id={helperTextId}>{helperText}</InputHelperText>}\n      {error && errorText && (\n        <InputHelperText id={errorTextId} type=\"error\">\n          {errorText}\n        </InputHelperText>\n      )}\n    </div>\n  );\n};\n\nexport default InputHelperTextSection;\n","// floating label inspired by https://flowbite.com/docs/forms/floating-label/\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport * as Label from \"@radix-ui/react-label\";\n\nimport InputHelperTextSection from \"./InputHelperTextSection\";\n\nconst generateClasses = tv({\n  slots: {\n    root: [\n      \"preflight relative text-clr-primary fill-clr-primary pt-5\",\n      \"[&_.input]:placeholder:typography-caption [&_.input]:text-ellipsis\",\n      \"[&_.input]:placeholder:text-clr-on-bg-mid [&_.input]:placeholder:truncate\", //input's placeholder\n      \"[&_.input]:caret-clr-primary\", // caret\n      \"group\", // needed for autofill selector on `inputLabel`\n    ],\n    inputWrapper: \"relative border border-clr-primary rounded-sm group/input-wrapper\",\n    inputLabel: [\n      \"absolute start-0 duration-300 px-1.5 mx-1.5\",\n      \"top-[2.0625rem]\", // 20px padding + 13px ((48px - 22px) / 2)\n      \"inline-block truncate max-w-[calc(100%-0.75rem)]\",\n      \"pointer-events-none\", // allows dropdown menu in select to open instantly on first click\n      // Caution: When changing these, make sure to also adjust the corresponding Chrome fix styles (search for \"[data-fix-chrome-page-load-autofill]\").\n      \"group-has-[input:autofill]:-translate-y-8\",\n      \"group-has-[input:autofill]:typography-input-label\",\n    ],\n    helperTextSection: \"\",\n    stateIndicator: [\n      \"hidden absolute bottom-0 start-0 w-full bg-clr-primary\",\n      \"group-focus-within/input-wrapper:h-0.75 group-focus-within/input-wrapper:block\",\n    ],\n  },\n  variants: {\n    labelFloated: {\n      true: {\n        inputLabel: \"typography-input-label -translate-y-8\",\n      },\n      false: {\n        inputLabel: \"typography-input-text\",\n      },\n    },\n    disabled: {\n      true: {\n        root: \"text-clr-disabled fill-clr-disabled pointer-events-none [&_.input]:placeholder:text-clr-disabled\",\n        inputWrapper: \"border-clr-disabled\",\n        inputLabel: \"text-clr-disabled\",\n      },\n      false: {\n        stateIndicator: [\n          \"group-hover/input-wrapper:h-0.25 group-hover/input-wrapper:block\",\n          \"group-hover:group-focus-within/input-wrapper:h-0.75 group-hover:group-focus-within/input-wrapper:block\",\n        ],\n      },\n    },\n    error: {\n      true: {\n        root: \"text-clr-fg-error fill-clr-fg-error [&_.input]:caret-clr-fg-error [&_.input]:caret-clr-fg-error\",\n        inputWrapper: \"border-clr-fg-error\",\n        inputLabel: \"text-clr-fg-error\",\n        stateIndicator: \"bg-clr-fg-error\",\n      },\n    },\n    componentName: {\n      select: {\n        inputWrapper: \"has-[[data-radix-popper-side=top]]:rounded-t-none has-[[data-radix-popper-side=bottom]]:rounded-b-none\",\n      },\n      [\"password-field\"]: \"\",\n      [\"text-field\"]: \"\",\n      [\"search-field\"]: \"\",\n      [\"email-field\"]: \"\",\n      textarea: \"\",\n    },\n    helperTextSectionVisible: {\n      true: {\n        helperTextSection: \"mt-1 px-3\",\n      },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      labelFloated: false,\n      componentName: [\"select\", \"search-field\", \"password-field\"],\n      class: {\n        inputLabel: \"pe-7\", // Do not cover chevron/search icons\n      },\n    },\n  ],\n});\n\nexport interface Props {\n  children: React.ReactNode;\n  id: string;\n  labelFloated: boolean;\n  disabled: boolean;\n  required: boolean;\n  componentName: \"select\" | \"password-field\" | \"text-field\" | \"search-field\" | \"email-field\" | \"textarea\";\n  label?: string;\n  helperText: string;\n  helperTextId: string;\n  error: boolean;\n  errorText: string;\n  errorTextId: string;\n  labelClassName?: string;\n}\n\nconst InputWrapper = ({\n  children,\n  id,\n  label,\n  labelFloated,\n  disabled,\n  required,\n  componentName,\n  helperText,\n  helperTextId,\n  error,\n  errorText,\n  errorTextId,\n  labelClassName = \"\",\n}: Props) => {\n  const helperTextSectionVisible = Boolean(helperText || (error && errorText));\n  const {\n    root,\n    inputWrapper,\n    inputLabel,\n    helperTextSection: helperTextSectionClass,\n    stateIndicator,\n  } = generateClasses({\n    labelFloated,\n    disabled,\n    error,\n    componentName,\n    helperTextSectionVisible,\n  });\n  return (\n    <div className={root()} data-bpds={componentName}>\n      <div className={inputWrapper()} aria-disabled={disabled}>\n        {children}\n        <div className={stateIndicator()}></div>\n      </div>\n      <Label.Root htmlFor={id} className={`${inputLabel()} ${labelClassName}`}>\n        {label}\n        {required && <span aria-hidden=\"true\">*</span>}\n      </Label.Root>\n      <InputHelperTextSection\n        className={helperTextSectionClass()}\n        helperText={helperText}\n        helperTextId={helperTextId}\n        error={error}\n        errorText={errorText}\n        errorTextId={errorTextId}\n      />\n    </div>\n  );\n};\n\nexport default InputWrapper;\n","\"use client\";\n\nimport type { ControlGroupProps } from \"@bonprix-ds/utils\";\nimport React, { useId } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport InputHelperTextSection from \"./InputHelperTextSection\";\n\nexport type { ControlGroupProps as Props } from \"@bonprix-ds/utils\";\n\nconst generateClasses = tv({\n  // min-w-0 is required because of the weird fieldset behavior\n  // fieldset will be placed in some fixed width container or flexbox\n  // we need to make sure that the helper texts are truncated with ellipsis and not extending the fieldset\n  // https://stackoverflow.com/questions/7434756/overflow-and-text-overflow-within-fieldsets\n  base: \"preflight min-w-0\",\n  slots: {\n    label: \"typography-input-label text-clr-on-bg-mid truncate inline-block w-full\",\n  },\n  variants: {\n    horizontalPadding: {\n      true: {\n        base: \"px-3\",\n      },\n    },\n  },\n});\n\nconst SelectionControlGroup = ({\n  label,\n  children,\n  error = false,\n  errorText = \"\",\n  disabled = false,\n  helperText = \"\",\n  required = false,\n  divider = false,\n  horizontalPadding = false,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  componentName,\n}: ControlGroupProps) => {\n  const { base, label: labelClasses } = generateClasses({ horizontalPadding });\n  const helperTextId = useId();\n  const errorTextId = useId();\n  let ariaDescribedBy;\n  if (helperText) {\n    ariaDescribedBy = helperTextId;\n  }\n  if (error && errorText) {\n    ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + errorTextId : errorTextId;\n  }\n  return (\n    <fieldset\n      className={base()}\n      disabled={disabled}\n      data-bpds={componentName}\n      data-bpds-has-divider={divider ? \"true\" : \"false\"}\n      data-bpds-has-horizontal-padding={horizontalPadding ? \"true\" : \"false\"}\n      aria-describedby={ariaDescribedBy}\n      aria-invalid={error ? \"true\" : undefined}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n    >\n      {label && (\n        <legend className={labelClasses()}>\n          {label}\n          {required && <span>*</span>}\n        </legend>\n      )}\n      {children}\n      <InputHelperTextSection\n        helperText={helperText}\n        error={error}\n        errorText={errorText}\n        helperTextId={helperTextId}\n        errorTextId={errorTextId}\n      />\n    </fieldset>\n  );\n};\n\nexport default SelectionControlGroup;\n"],"mappings":";;;;;;;;;AAOA,IAAM,IAAkB,EAAG;CACzB,MAAM,CACJ,8HACA,kDACF;CACA,OAAO;EACL,MAAM;EACN,QAAQ;EACR,gBAAgB;CAClB;CACA,UAAU;EACR,SAAS;GAAE,SAAS,CAAC;GAAG,WAAW,CAAC;GAAG,UAAU,CAAC;EAAE;EACpD,UAAU;GAAE,MAAM;GAAI,OAAO;EAAG;EAChC,cAAc;GAAE,MAAM;GAAI,OAAO;EAAG;EACpC,MAAM;GAAE,OAAO;GAAI,QAAQ;GAAI,OAAO;EAAG;EACzC,MAAM;GAAE,MAAM;GAAI,OAAO;EAAG;EAC5B,UAAU;GAAE,MAAM,EAAE,MAAM,8BAA8B;GAAG,OAAO,EAAE,MAAM,sBAAsB;EAAE;EAClG,cAAc;GACZ,OAAO;GACP,KAAK;EACP;EACA,SAAS;GACP,MAAM,EACJ,gBAAgB,YAClB;GACA,OAAO;EACT;EACA,YAAY;GACV,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO,EACL,MAAM,iDACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO,EACL,MAAM,iEACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,cAAc;GACd,YAAY;GACZ,OAAO;EACT;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;EACT;EACA;GACE,YAAY;GACZ,SAAS,CAAC,WAAW,WAAW;GAChC,OAAO;EACT;EAEA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,EACL,MAAM,UACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EAEA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,SAAS,CAAC,WAAW,WAAW;GAChC,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,SAAS;GACT,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;CACF;AACF,CAAC,GAkBK,KAAgD,EACpD,a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"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/BaseButton.tsx","../src/CheckboxBase.tsx","../src/InputHelperText.tsx","../src/InputHelperTextSection.tsx","../src/InputWrapper.tsx","../src/SelectionControlGroup.tsx","../src/componentStyles/overlayStyleClasses.ts","../src/componentStyles/tabStyleClasses.ts"],"sourcesContent":["import { IconSlot, type IconOrElement } from \"@bonprix-ds/react-icon\";\nimport Spinner from \"@bonprix-ds/react-spinner\";\nimport type { ButtonSize } from \"@bonprix-ds/utils\";\nimport { twMerge } from \"tailwind-merge\";\nimport React, { ComponentProps, ElementType, ReactNode } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  base: [\n    \"preflight rounded typography-button relative flex items-center justify-center gap-2 border border-transparent group/button\",\n    \"focus-visible:outline outline-2 outline-offset-2\",\n  ],\n  slots: {\n    icon: \"\",\n    loader: \"absolute\",\n    contentWrapper: \"flex items-center justify-center gap-2\",\n  },\n  variants: {\n    variant: { primary: {}, secondary: {}, tertiary: {} },\n    disabled: { true: \"\", false: \"\" },\n    contentWidth: { true: \"\", false: \"\" },\n    size: { small: \"\", medium: \"\", large: \"\" },\n    link: { true: \"\", false: \"\" },\n    inverted: { true: { base: \"outline-clr-primary-inverse\" }, false: { base: \"outline-clr-primary\" } },\n    iconPosition: {\n      start: \"\",\n      end: \"flex-row-reverse\",\n    },\n    loading: {\n      true: {\n        contentWrapper: \"invisible\",\n      },\n      false: \"\",\n    },\n    iconButton: {\n      true: \"\",\n      false: \"py-[0.4375rem]\",\n    },\n  },\n  compoundVariants: [\n    {\n      variant: \"primary\",\n      inverted: false,\n      class: {\n        base: \"bg-clr-primary text-clr-on-primary-high\",\n        icon: \"fill-clr-on-primary-high\",\n      },\n    },\n    {\n      variant: \"primary\",\n      inverted: true,\n      class: {\n        base: \"bg-clr-primary-inverse text-clr-on-primary-high-inverse\",\n        icon: \"fill-clr-on-primary-high-inverse\",\n      },\n    },\n    {\n      variant: \"primary\",\n      disabled: true,\n      inverted: false,\n      class: {\n        base: \"text-clr-disabled bg-clr-bg-disabled\",\n        icon: \"fill-clr-disabled\",\n      },\n    },\n    {\n      variant: \"primary\",\n      disabled: false,\n      inverted: false,\n      class: {\n        base: \"hover:bg-clr-on-bg-low active:bg-clr-on-bg-low\",\n      },\n    },\n    {\n      variant: \"primary\",\n      disabled: true,\n      inverted: true,\n      class: {\n        base: \"text-clr-disabled-inverse bg-clr-bg-disabled-inverse\",\n        icon: \"fill-clr-disabled-inverse\",\n      },\n    },\n    {\n      variant: \"primary\",\n      disabled: false,\n      inverted: true,\n      class: {\n        base: \"hover:bg-clr-on-bg-low-inverse active:bg-clr-on-bg-low-inverse\",\n      },\n    },\n    {\n      variant: \"secondary\",\n      inverted: false,\n      class: {\n        base: \"text-clr-primary border-clr-primary\",\n        icon: \"fill-clr-primary\",\n      },\n    },\n    {\n      variant: \"secondary\",\n      inverted: true,\n      class: {\n        base: \"text-clr-primary-inverse border-clr-primary-inverse\",\n        icon: \"fill-clr-primary-inverse\",\n      },\n    },\n    {\n      variant: \"secondary\",\n      disabled: true,\n      inverted: false,\n      class: {\n        base: \"text-clr-disabled border-clr-disabled\",\n        icon: \"fill-clr-disabled\",\n      },\n    },\n    {\n      variant: \"secondary\",\n      disabled: false,\n      inverted: false,\n      class: {\n        base: \"hover:text-clr-on-bg-low hover:border-clr-on-bg-low active:text-clr-on-bg-low active:border-clr-on-bg-low\",\n        icon: \"group-hover/button:fill-clr-on-bg-low group-active/button:fill-clr-on-bg-low\",\n      },\n    },\n    {\n      variant: \"secondary\",\n      disabled: true,\n      inverted: true,\n      class: {\n        base: \"text-clr-disabled-inverse border-clr-disabled-inverse\",\n        icon: \"fill-clr-disabled-inverse\",\n      },\n    },\n    {\n      variant: \"secondary\",\n      disabled: false,\n      inverted: true,\n      class: {\n        base: \"hover:text-clr-on-bg-low-inverse hover:border-clr-on-bg-low-inverse active:text-clr-on-bg-low-inverse active:border-clr-on-bg-low-inverse\",\n        icon: \"group-hover/button:fill-clr-on-bg-low-inverse group-active/button:fill-clr-on-bg-low-inverse\",\n      },\n    },\n    {\n      variant: \"tertiary\",\n      inverted: false,\n      class: {\n        base: \"text-clr-primary\",\n        icon: \"fill-clr-primary\",\n      },\n    },\n    {\n      variant: \"tertiary\",\n      inverted: true,\n      class: {\n        base: \"text-clr-primary-inverse\",\n        icon: \"fill-clr-primary-inverse\",\n      },\n    },\n    {\n      variant: \"tertiary\",\n      disabled: true,\n      inverted: false,\n      class: {\n        base: \"text-clr-disabled\",\n        icon: \"fill-clr-disabled\",\n      },\n    },\n    {\n      variant: \"tertiary\",\n      disabled: false,\n      inverted: false,\n      class: {\n        base: \"hover:text-clr-on-bg-low active:text-clr-on-bg-low\",\n        icon: \"group-hover/button:fill-clr-on-bg-low group-active/button:fill-clr-on-bg-low\",\n      },\n    },\n    {\n      variant: \"tertiary\",\n      disabled: true,\n      inverted: true,\n      class: {\n        base: \"text-clr-disabled-inverse\",\n        icon: \"fill-clr-disabled-inverse\",\n      },\n    },\n    {\n      variant: \"tertiary\",\n      disabled: false,\n      inverted: true,\n      class: {\n        base: \"hover:text-clr-on-bg-low-inverse active:text-clr-on-bg-low-inverse\",\n        icon: \"group-hover/button:fill-clr-on-bg-low-inverse group-active/button:fill-clr-on-bg-low-inverse\",\n      },\n    },\n    {\n      contentWidth: false,\n      iconButton: false,\n      class: \"w-full\",\n    },\n    {\n      contentWidth: true,\n      link: true,\n      class: \"w-fit\",\n    },\n    {\n      iconButton: false,\n      variant: [\"primary\", \"secondary\"],\n      class: \"px-4\",\n    },\n    // Regular Button sizes\n    {\n      iconButton: false,\n      size: \"medium\",\n      class: {\n        icon: \"w-4 h-4\",\n      },\n    },\n    {\n      iconButton: false,\n      size: \"large\",\n      class: {\n        base: \"py-[0.9375rem]\",\n        icon: \"w-4 h-4\",\n      },\n    },\n    // Icon Button sizes\n    {\n      iconButton: true,\n      size: \"small\",\n      class: {\n        base: \"p-[0.1875rem]\",\n        icon: \"w-4 h-4\",\n      },\n    },\n    {\n      iconButton: true,\n      size: \"medium\",\n      variant: [\"primary\", \"secondary\"],\n      class: {\n        base: \"p-[0.4375rem]\",\n        icon: \"w-4 h-4\", // we currently predefine the fill color in the icon, so we cannot inherit the fill from base and instead have to set it directly\n      },\n    },\n    {\n      iconButton: true,\n      size: \"medium\",\n      variant: \"tertiary\",\n      class: {\n        base: \"p-[0.1875rem]\",\n        icon: \"w-6 h-6\",\n      },\n    },\n    {\n      iconButton: true,\n      size: \"large\",\n      class: {\n        base: \"p-[0.6875rem]\",\n        icon: \"w-6 h-6\",\n      },\n    },\n  ],\n});\n\ninterface BaseProps {\n  children: string;\n  size?: ButtonSize;\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  contentWidth?: boolean;\n  loading?: boolean;\n  icon?: IconOrElement;\n  iconPosition?: \"start\" | \"end\";\n  componentName?: \"button\" | \"icon-button\" | \"badge-icon-button\";\n  inverted?: boolean;\n}\n\nexport type Props<C extends ElementType = \"button\"> = BaseProps & {\n  component?: C;\n} & Omit<ComponentProps<C>, keyof BaseProps | \"component\">;\n\nconst BaseButton = <C extends ElementType = \"button\">({\n  children,\n  size = \"medium\",\n  variant = \"primary\",\n  contentWidth = false,\n  loading = false,\n  icon,\n  iconPosition = \"start\",\n  componentName,\n  inverted = false,\n  component = \"button\" as C,\n  ...props\n}: Props<C>) => {\n  const Component: ElementType = component;\n  const { disabled = false, className = \"\", type, ...otherProps } = props;\n  const isDisabled = disabled || loading;\n  const iconButton = componentName === \"icon-button\";\n  const link = component !== \"button\";\n\n  const {\n    base,\n    icon: iconClass,\n    contentWrapper,\n    loader,\n  } = generateClasses({\n    size,\n    contentWidth,\n    disabled: isDisabled,\n    iconButton,\n    iconPosition,\n    variant,\n    loading,\n    link,\n    inverted,\n  });\n\n  const actualContent = (\n    <>\n      <IconSlot icon={icon} className={iconClass()} />\n      {iconButton ? undefined : children}\n    </>\n  );\n\n  let content: ReactNode = actualContent;\n\n  if (loading) {\n    content = (\n      <>\n        <span className={contentWrapper()}>{actualContent}</span>\n        <span className={loader()}>\n          <Spinner edgeLength={iconButton ? \"1.25rem\" : \"1rem\"} />\n        </span>\n      </>\n    );\n  }\n\n  let ariaLabel = undefined;\n  if (iconButton) {\n    if (children) {\n      ariaLabel = children;\n    } else {\n      ariaLabel = \"Icon\";\n    }\n  }\n\n  return (\n    <Component\n      className={twMerge(base(), className)}\n      disabled={component === \"button\" ? isDisabled : undefined}\n      type={component === \"button\" ? (type ?? \"button\") : undefined}\n      {...otherProps}\n      aria-label={ariaLabel}\n      data-bpds={componentName}\n      data-bpds-icon={typeof icon === \"string\" ? icon : undefined}\n      data-bpds-size={size}\n      data-bpds-content-width={componentName !== \"icon-button\" ? contentWidth : undefined}\n      data-bpds-inverted={inverted}\n      data-bpds-variant={variant}\n    >\n      {content}\n    </Component>\n  );\n};\n\nexport default BaseButton;\n","\"use client\";\n\nimport Icon from \"@bonprix-ds/react-icon\";\nimport React, { ChangeEvent, FocusEvent, Ref, useState } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  base: \"preflight typography-input-text flex gap-2 items-start py-3 text-clr-on-bg-high relative\",\n  slots: {\n    input: [\n      \"appearance-none relative w-6 h-6 rounded-sm border text-current cursor-pointer shrink-0\",\n      \"focus-visible:outline focus-visible:outline-current focus-visible:outline-2 focus-visible:outline-offset-2\",\n    ],\n    icon: \"w-[1.125rem] h-[1.125rem] absolute m-0.75 fill-current\",\n  },\n  variants: {\n    disabled: {\n      true: {\n        base: \"text-clr-disabled border-clr-disabled\",\n        input: \"bg-clr-bg-disabled\",\n        icon: \"fill-clr-disabled\",\n      },\n      false: {\n        base: \"hover:cursor-pointer hover:text-clr-on-bg-low\",\n      },\n    },\n    error: {\n      true: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      disabled: false,\n      error: true,\n      class: {\n        input: \"border-clr-fg-error bg-clr-bg-error [&:checked::after]:bg-clr-fg-error\",\n        icon: \"fill-clr-fg-error\",\n      },\n    },\n  ],\n});\n\ninterface BaseProps {\n  label: string;\n  /** The name of the checkbox. Will be submitted with the form. */\n  name: string;\n  /** Callback function that is called when the checkbox loses focus. */\n  onBlur?: () => void;\n  /** The id of the checkbox. */\n  id?: string;\n  /** Value that will be submitted when the form is submitted. */\n  value?: string;\n  /** If set to `true`, the checkbox will be marked as required. */\n  required?: boolean;\n  /** If set to `true`, the checkbox will be disabled. */\n  disabled?: boolean;\n  /** If set to `true`, the checkbox will be marked as erroneous. */\n  error?: boolean;\n  errorText?: string;\n  helperText?: string;\n  /** A reference to the root element of the checkbox. Helpful for intergrating with 3rd party form libraries like react-hook-form. */\n  rootRef?: Ref<HTMLInputElement>;\n  /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby\" target=\"_blank\">ARIA: aria-describedby attribute.</a> */\n  describedBy?: string;\n}\n\ninterface ControlledInputProps extends BaseProps {\n  /** Controls, whether the checkbox is checked or not. Should be used in conjunction with `onChange`. */\n  checked: boolean;\n  /** Initial value of the checkbox. Should be used for uncontrolled variant of the component. */\n  defaultChecked?: never;\n  /** Callback function that is called when the checkbox state changes. `checked` should be adjusted appropriately. */\n  onChange: (value: boolean) => void;\n}\n\ninterface UncontrolledInputProps extends BaseProps {\n  checked?: never;\n  defaultChecked: boolean;\n  onChange?: (value: boolean) => void;\n}\nexport interface AllyIds {\n  errorTextId: string;\n  helperTextId: string;\n}\nexport type Props = ControlledInputProps | UncontrolledInputProps;\n\nconst CheckboxItem = ({\n  label,\n  name,\n  onChange,\n  onBlur,\n  id,\n  value = label,\n  required,\n  disabled = false,\n  error,\n  errorText,\n  helperText,\n  helperTextId,\n  errorTextId,\n  rootRef,\n  describedBy,\n  ...props\n}: Props & AllyIds) => {\n  const { base, input, icon } = generateClasses({ disabled, error });\n\n  const isUncontrolled = \"defaultChecked\" in props;\n  const controlledChecked = props.checked;\n\n  const [internalChecked, setInternalChecked] = useState(() => (isUncontrolled ? props.defaultChecked : controlledChecked));\n\n  const checked = isUncontrolled ? internalChecked : controlledChecked;\n  let ariaDescribedBy;\n  if (helperText) {\n    ariaDescribedBy = helperTextId;\n  }\n  if (!disabled && error && errorText) {\n    ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + errorTextId : errorTextId;\n  }\n  if (describedBy) {\n    ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + describedBy : describedBy;\n  }\n\n  const handleChange = (ev: ChangeEvent<HTMLInputElement>) => {\n    const checked = ev.currentTarget.checked;\n\n    if (isUncontrolled) {\n      setInternalChecked(checked);\n    }\n    onChange?.(checked);\n  };\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    if (!onBlur) return;\n    // prevent blur triggers if clicking in label instead input\n    if (event.relatedTarget?.contains(event.currentTarget)) {\n      event.preventDefault();\n      return;\n    }\n    onBlur();\n  };\n  return (\n    // Label causes inconsistent blur event when interacts with input.\n    // -1 tabIndex makes 'relatedTarget' not being always null and helps detecting correct blur event\n    <label className={base()} tabIndex={-1}>\n      <input\n        className={input()}\n        type=\"checkbox\"\n        checked={checked}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        value={value}\n        id={id}\n        name={name}\n        disabled={disabled}\n        ref={rootRef}\n        required={required}\n        aria-invalid={error ? \"true\" : undefined}\n        aria-describedby={ariaDescribedBy}\n      />\n      {label}\n      {checked && <Icon variant=\"check-bold\" className={icon()} />}\n    </label>\n  );\n};\n\nexport default CheckboxItem;\n","import React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst generateClasses = tv({\n  base: \"preflight typography-input-helper-text w-full inline-block\",\n  variants: {\n    type: {\n      description: \"text-clr-on-bg-mid\",\n      error: \"text-clr-fg-error\",\n    },\n  },\n});\n\nexport interface Props {\n  id: string;\n  children: string;\n  type?: \"description\" | \"error\";\n}\n\nconst InputHelperText = ({ id, children, type = \"description\" }: Props) => {\n  const className = generateClasses({ type });\n  return (\n    <p id={id} className={className}>\n      {children}\n    </p>\n  );\n};\n\nexport default InputHelperText;\n","\"use client\";\n\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport InputHelperText from \"./InputHelperText\";\n\nconst generateClasses = tv({\n  base: \"preflight flex flex-col gap-1 w-full\",\n});\n\nexport interface Props {\n  helperText: string;\n  helperTextId: string;\n  error: boolean;\n  errorText: string;\n  errorTextId: string;\n  disabled?: boolean;\n  className?: string;\n}\n\nconst InputHelperTextSection = ({\n  helperText,\n  helperTextId,\n  error = false,\n  errorText,\n  errorTextId,\n  disabled = false,\n  className = \"\",\n}: Props) => {\n  return (\n    <div className={`${generateClasses()} ${className}`}>\n      {helperText && <InputHelperText id={helperTextId}>{helperText}</InputHelperText>}\n      {!disabled && error && errorText && (\n        <InputHelperText id={errorTextId} type=\"error\">\n          {errorText}\n        </InputHelperText>\n      )}\n    </div>\n  );\n};\n\nexport default InputHelperTextSection;\n","// floating label inspired by https://flowbite.com/docs/forms/floating-label/\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport * as Label from \"@radix-ui/react-label\";\n\nimport InputHelperTextSection from \"./InputHelperTextSection\";\n\nconst generateClasses = tv({\n  slots: {\n    root: [\n      \"preflight relative text-clr-primary fill-clr-primary pt-5\",\n      \"[&_.input]:placeholder:typography-caption [&_.input]:text-ellipsis\",\n      \"[&_.input]:placeholder:text-clr-on-bg-mid [&_.input]:placeholder:truncate\", //input's placeholder\n      \"[&_.input]:caret-clr-primary\", // caret\n      \"group\", // needed for autofill selector on `inputLabel`\n    ],\n    inputWrapper: \"relative border border-clr-primary rounded-sm group/input-wrapper\",\n    inputLabel: [\n      \"absolute start-0 duration-300 px-1.5 mx-1.5\",\n      \"top-[2.0625rem]\", // 20px padding + 13px ((48px - 22px) / 2)\n      \"inline-block truncate max-w-[calc(100%-0.75rem)]\",\n      \"pointer-events-none\", // allows dropdown menu in select to open instantly on first click\n      // Caution: When changing these, make sure to also adjust the corresponding Chrome fix styles (search for \"[data-fix-chrome-page-load-autofill]\").\n      \"group-has-[input:autofill]:-translate-y-8\",\n      \"group-has-[input:autofill]:typography-input-label\",\n    ],\n    helperTextSection: \"\",\n    stateIndicator: [\n      \"hidden absolute bottom-0 start-0 w-full bg-clr-primary\",\n      \"group-focus-within/input-wrapper:h-0.75 group-focus-within/input-wrapper:block\",\n    ],\n  },\n  variants: {\n    labelFloated: {\n      true: {\n        inputLabel: \"typography-input-label -translate-y-8\",\n      },\n      false: {\n        inputLabel: \"typography-input-text\",\n      },\n    },\n    disabled: {\n      true: {\n        root: \"text-clr-disabled fill-clr-disabled pointer-events-none [&_.input]:placeholder:text-clr-disabled\",\n        inputWrapper: \"border-clr-disabled\",\n        inputLabel: \"text-clr-disabled\",\n      },\n      false: {\n        stateIndicator: [\n          \"group-hover/input-wrapper:h-0.25 group-hover/input-wrapper:block\",\n          \"group-hover:group-focus-within/input-wrapper:h-0.75 group-hover:group-focus-within/input-wrapper:block\",\n        ],\n      },\n    },\n    error: {\n      true: \"\",\n    },\n    componentName: {\n      select: {\n        inputWrapper: \"has-[[data-radix-popper-side=top]]:rounded-t-none has-[[data-radix-popper-side=bottom]]:rounded-b-none\",\n      },\n      [\"password-field\"]: \"\",\n      [\"text-field\"]: \"\",\n      [\"search-field\"]: \"\",\n      [\"email-field\"]: \"\",\n      textarea: \"\",\n    },\n    helperTextSectionVisible: {\n      true: {\n        helperTextSection: \"mt-1 px-3\",\n      },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      labelFloated: false,\n      componentName: [\"select\", \"search-field\", \"password-field\"],\n      class: {\n        inputLabel: \"pe-7\", // Do not cover chevron/search icons\n      },\n    },\n    {\n      // The floating label is a visual response to focus, but `labelFloated` is React state, so it\n      // cannot follow a forced `:focus-within`. Expressing it in CSS too — as the autofill rules\n      // above already do — keeps the story grids honest. Not for `select`, whose label floats only\n      // once a value is chosen.\n      componentName: [\"text-field\", \"search-field\", \"password-field\", \"email-field\", \"textarea\"],\n      class: {\n        inputLabel: \"group-focus-within:-translate-y-8 group-focus-within:typography-input-label\",\n      },\n    },\n    {\n      disabled: false,\n      error: true,\n      class: {\n        root: \"text-clr-fg-error fill-clr-fg-error [&_.input]:caret-clr-fg-error [&_.input]:caret-clr-fg-error\",\n        inputWrapper: \"border-clr-fg-error\",\n        inputLabel: \"text-clr-fg-error\",\n        stateIndicator: \"bg-clr-fg-error\",\n      },\n    },\n  ],\n});\n\nexport interface Props {\n  children: React.ReactNode;\n  id: string;\n  labelFloated: boolean;\n  disabled: boolean;\n  required: boolean;\n  componentName: \"select\" | \"password-field\" | \"text-field\" | \"search-field\" | \"email-field\" | \"textarea\";\n  label?: string;\n  helperText: string;\n  helperTextId: string;\n  error: boolean;\n  errorText: string;\n  errorTextId: string;\n  labelClassName?: string;\n}\n\nconst InputWrapper = ({\n  children,\n  id,\n  label,\n  labelFloated,\n  disabled,\n  required,\n  componentName,\n  helperText,\n  helperTextId,\n  error,\n  errorText,\n  errorTextId,\n  labelClassName = \"\",\n}: Props) => {\n  const helperTextSectionVisible = Boolean(helperText || (!disabled && error && errorText));\n  const {\n    root,\n    inputWrapper,\n    inputLabel,\n    helperTextSection: helperTextSectionClass,\n    stateIndicator,\n  } = generateClasses({\n    labelFloated,\n    disabled,\n    error,\n    componentName,\n    helperTextSectionVisible,\n  });\n  return (\n    <div className={root()} data-bpds={componentName}>\n      <div className={inputWrapper()} aria-disabled={disabled}>\n        {children}\n        <div className={stateIndicator()}></div>\n      </div>\n      <Label.Root htmlFor={id} className={`${inputLabel()} ${labelClassName}`}>\n        {label}\n        {required && <span aria-hidden=\"true\">*</span>}\n      </Label.Root>\n      <InputHelperTextSection\n        className={helperTextSectionClass()}\n        helperText={helperText}\n        helperTextId={helperTextId}\n        error={error}\n        errorText={errorText}\n        errorTextId={errorTextId}\n        disabled={disabled}\n      />\n    </div>\n  );\n};\n\nexport default InputWrapper;\n","\"use client\";\n\nimport type { ControlGroupProps } from \"@bonprix-ds/utils\";\nimport React, { useId } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport InputHelperTextSection from \"./InputHelperTextSection\";\n\nexport type { ControlGroupProps as Props } from \"@bonprix-ds/utils\";\n\nconst generateClasses = tv({\n  // min-w-0 is required because of the weird fieldset behavior\n  // fieldset will be placed in some fixed width container or flexbox\n  // we need to make sure that the helper texts are truncated with ellipsis and not extending the fieldset\n  // https://stackoverflow.com/questions/7434756/overflow-and-text-overflow-within-fieldsets\n  base: \"preflight min-w-0\",\n  slots: {\n    label: \"typography-input-label text-clr-on-bg-mid truncate inline-block w-full\",\n  },\n  variants: {\n    horizontalPadding: {\n      true: {\n        base: \"px-3\",\n      },\n    },\n  },\n});\n\nconst SelectionControlGroup = ({\n  label,\n  children,\n  error = false,\n  errorText = \"\",\n  disabled = false,\n  helperText = \"\",\n  required = false,\n  divider = false,\n  horizontalPadding = false,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  componentName,\n}: ControlGroupProps) => {\n  const { base, label: labelClasses } = generateClasses({ horizontalPadding });\n  const helperTextId = useId();\n  const errorTextId = useId();\n  let ariaDescribedBy;\n  if (helperText) {\n    ariaDescribedBy = helperTextId;\n  }\n  if (!disabled && error && errorText) {\n    ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + errorTextId : errorTextId;\n  }\n  return (\n    <fieldset\n      className={base()}\n      disabled={disabled}\n      data-bpds={componentName}\n      data-bpds-has-divider={divider ? \"true\" : \"false\"}\n      data-bpds-has-horizontal-padding={horizontalPadding ? \"true\" : \"false\"}\n      aria-describedby={ariaDescribedBy}\n      aria-invalid={error ? \"true\" : undefined}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n    >\n      {label && (\n        <legend className={labelClasses()}>\n          {label}\n          {required && <span>*</span>}\n        </legend>\n      )}\n      {children}\n      <InputHelperTextSection\n        helperText={helperText}\n        error={error}\n        errorText={errorText}\n        helperTextId={helperTextId}\n        errorTextId={errorTextId}\n        disabled={disabled}\n      />\n    </fieldset>\n  );\n};\n\nexport default SelectionControlGroup;\n","import { tv } from \"tailwind-variants\";\n\nexport const fadeAnimation = tv({\n  base: \"data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut\",\n});\nexport const slideAnimation = tv({\n  base: \"data-[state=open]:animate-slideLeft data-[state=closed]:animate-slideRight\",\n});\n\nexport const backdrop = tv({\n  base: \"fixed top-0 start-0 h-full w-full flex bg-clr-backdrop justify-center items-center\",\n});\n","export const tabStyleList = \"gap-x-3 text-clr-primary flex border-b border-b-clr-disabled overflow-x-auto overscroll-none scrollbar-none\";\nexport const tabStyleContainerBase =\n  \"group flex flex-col relative cursor-pointer rounded after:start-0 after:bottom-0 after:w-full after:border-b-transparent after:content-[''] after:h-0.5 \";\nexport const tabStyleContainerVariant = \"focus-visible:outline-none after:h-2 min-w-8 max-w-36 shrink-0\";\nexport const tabStyleLabelContainerBase = \"flex flex-col mb-auto typography-body1 text-current px-0.5 border border-transparent rounded-sm\";\nexport const tabStyleLabelContainerVariant = \"group-focus-visible:outline outline-2 -outline-offset-2 text-left\";\nexport const tabStyleLabelClass = \"line-clamp-2\";\n"],"mappings":";;;;;;;;;AAOA,IAAM,IAAkB,EAAG;CACzB,MAAM,CACJ,8HACA,kDACF;CACA,OAAO;EACL,MAAM;EACN,QAAQ;EACR,gBAAgB;CAClB;CACA,UAAU;EACR,SAAS;GAAE,SAAS,CAAC;GAAG,WAAW,CAAC;GAAG,UAAU,CAAC;EAAE;EACpD,UAAU;GAAE,MAAM;GAAI,OAAO;EAAG;EAChC,cAAc;GAAE,MAAM;GAAI,OAAO;EAAG;EACpC,MAAM;GAAE,OAAO;GAAI,QAAQ;GAAI,OAAO;EAAG;EACzC,MAAM;GAAE,MAAM;GAAI,OAAO;EAAG;EAC5B,UAAU;GAAE,MAAM,EAAE,MAAM,8BAA8B;GAAG,OAAO,EAAE,MAAM,sBAAsB;EAAE;EAClG,cAAc;GACZ,OAAO;GACP,KAAK;EACP;EACA,SAAS;GACP,MAAM,EACJ,gBAAgB,YAClB;GACA,OAAO;EACT;EACA,YAAY;GACV,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO,EACL,MAAM,iDACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO,EACL,MAAM,iEACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,UAAU;GACV,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,cAAc;GACd,YAAY;GACZ,OAAO;EACT;EACA;GACE,cAAc;GACd,MAAM;GACN,OAAO;EACT;EACA;GACE,YAAY;GACZ,SAAS,CAAC,WAAW,WAAW;GAChC,OAAO;EACT;EAEA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,EACL,MAAM,UACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EAEA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,SAAS,CAAC,WAAW,WAAW;GAChC,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,SAAS;GACT,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;IACL,MAAM;IACN,MAAM;GACR;EACF;CACF;AACF,CAAC,GAkBK,KAAgD,EACpD,a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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonprix-ds/internal-components",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Internal react components, which really shouldn't be used directly.",
   "module": "./dist/index.js",
   "sideEffects": false,
@@ -23,9 +23,9 @@
     "@radix-ui/react-label": "2.1.15",
     "tailwind-merge": "2.6.1",
     "tailwind-variants": "0.3.1",
-    "@bonprix-ds/react-icon": "1.1.3",
+    "@bonprix-ds/react-icon": "1.2.0",
     "@bonprix-ds/react-spinner": "1.0.4",
-    "@bonprix-ds/utils": "0.2.1"
+    "@bonprix-ds/utils": "0.2.2"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -34,10 +34,10 @@
   "devDependencies": {
     "vite": "8.2.2",
     "@types/react": "19.2.18",
-    "@vitejs/plugin-react": "6.1.0",
+    "@vitejs/plugin-react": "6.1.1",
     "rollup-preserve-directives": "1.1.3",
-    "unplugin-dts": "1.0.3",
-    "@microsoft/api-extractor": "7.59.0"
+    "unplugin-dts": "1.1.0",
+    "@microsoft/api-extractor": "7.59.1"
   },
   "keywords": [],
   "author": "",