suus-component-library 0.1.7 → 0.1.10

package/dist/suus-component-library.js

@@ -1,41 +1,930 @@
 import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
-var r = {
-	suusButton: "_suusButton_1q9to_1",
-	icon: "_icon_1q9to_45",
-	label: "_label_1q9to_62",
-	primary: "_primary_1q9to_69",
-	secondary: "_secondary_1q9to_113",
-	loading: "_loading_1q9to_169",
-	loader: "_loader_1q9to_173",
-	"btn-spin": "_btn-spin_1q9to_1",
-	loaderSecondary: "_loaderSecondary_1q9to_182"
+import { useEffect as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
+var c = {
+	suusButton: "_suusButton_1ucmz_1",
+	icon: "_icon_1ucmz_45",
+	label: "_label_1ucmz_62",
+	primary: "_primary_1ucmz_69",
+	secondary: "_secondary_1ucmz_113",
+	loading: "_loading_1ucmz_169",
+	loader: "_loader_1ucmz_173",
+	"btn-spin": "_btn-spin_1ucmz_1",
+	loaderSecondary: "_loaderSecondary_1ucmz_182"
 };
 //#endregion
 //#region src/components/form/button/Button.tsx
-function i({ label: i, onClick: a, type: o = "button", disabled: s = !1, loading: c = !1, variant: l = "primary", colorToken: u = "--colors-juice-sugarcane", icon: d, ...f }) {
+function l({ label: r, onClick: i, type: a = "button", disabled: o = !1, loading: s = !1, variant: l = "primary", colorToken: u = "--color-juice-sugarcane", icon: d, ...f }) {
 	return /* @__PURE__ */ t("button", {
-		type: o,
-		onClick: a,
-		disabled: s || c,
+		type: a,
+		onClick: i,
+		disabled: o || s,
 		style: { "--button-background-color": `var(${u})` },
 		className: [
-			r.suusButton,
-			r[l],
-			c ? r.loading : ""
+			c.suusButton,
+			c[l],
+			s ? c.loading : ""
 		].filter(Boolean).join(" "),
-		"aria-busy": c,
+		"aria-busy": s,
 		...f,
-		children: c ? /* @__PURE__ */ t("span", {
-			className: `${r.loader} ${l === "primary" ? "" : r.loaderSecondary}`,
+		children: s ? /* @__PURE__ */ t("span", {
+			className: `${c.loader} ${l === "primary" ? "" : c.loaderSecondary}`,
 			"aria-hidden": "true"
 		}) : /* @__PURE__ */ n(e, { children: [d ? /* @__PURE__ */ t("span", {
-			className: r.icon,
+			className: c.icon,
 			children: d
 		}) : null, /* @__PURE__ */ t("span", {
-			className: r.label,
-			children: i
+			className: c.label,
+			children: r
 		})] })
 	});
 }
+var u = {
+	checkboxWrapper: "_checkboxWrapper_6w8h4_1",
+	checkboxInput: "_checkboxInput_6w8h4_15",
+	checkboxLabel: "_checkboxLabel_6w8h4_24",
+	customCheckbox: "_customCheckbox_6w8h4_34",
+	checkIcon: "_checkIcon_6w8h4_57",
+	checkboxText: "_checkboxText_6w8h4_76",
+	checkboxWrapperDisabled: "_checkboxWrapperDisabled_6w8h4_107",
+	checkboxWrapperError: "_checkboxWrapperError_6w8h4_133",
+	errorMessage: "_errorMessage_6w8h4_147",
+	checkboxWrapperGlassy: "_checkboxWrapperGlassy_6w8h4_154"
+};
+//#endregion
+//#region src/components/form/checkbox/Checkbox.tsx
+function d({ label: e, name: r, id: i, error: a, variant: o = "default", className: s, disabled: c, ...l }) {
+	let d = i ?? `${r}-checkbox`;
+	return /* @__PURE__ */ n("div", {
+		className: [
+			u.checkboxWrapper,
+			o === "glassy" ? u.checkboxWrapperGlassy : "",
+			a ? u.checkboxWrapperError : "",
+			c ? u.checkboxWrapperDisabled : "",
+			s ?? ""
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ t("input", {
+				type: "checkbox",
+				id: d,
+				name: r,
+				disabled: c,
+				className: u.checkboxInput,
+				"aria-invalid": !!a,
+				"aria-describedby": a ? `${r}-error` : void 0,
+				...l
+			}),
+			/* @__PURE__ */ n("label", {
+				htmlFor: d,
+				className: u.checkboxLabel,
+				children: [/* @__PURE__ */ t("span", {
+					className: u.customCheckbox,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ t("svg", {
+						className: u.checkIcon,
+						viewBox: "0 0 24 24",
+						focusable: "false",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ t("path", { d: "M20 6L9 17L4 12" })
+					})
+				}), /* @__PURE__ */ t("span", {
+					className: u.checkboxText,
+					children: e
+				})]
+			}),
+			a && /* @__PURE__ */ t("span", {
+				id: `${r}-error`,
+				className: u.errorMessage,
+				children: a
+			})
+		]
+	});
+}
+var f = {
+	chip: "_chip_1kgh7_1",
+	chipDefault: "_chipDefault_1kgh7_21",
+	chipGlassy: "_chipGlassy_1kgh7_36",
+	chipChecked: "_chipChecked_1kgh7_49",
+	chipDisabled: "_chipDisabled_1kgh7_56"
+};
+//#endregion
+//#region src/components/form/chip/Chip.tsx
+function p({ children: e, variant: n = "default", clickable: r = !0, checked: i, defaultChecked: a = !1, onCheckedChange: o, className: c, ...l }) {
+	let [u, d] = s(a), p = typeof i == "boolean", m = p ? i : u;
+	function h(e) {
+		if (!r) return;
+		let t = !m;
+		p || d(t), o?.(t), l.onClick?.(e);
+	}
+	let g = n === "glassy" ? f.chipGlassy : f.chipDefault, _ = m ? f.chipChecked : "", v = r ? "" : f.chipDisabled;
+	return r ? /* @__PURE__ */ t("button", {
+		type: "button",
+		"aria-pressed": m,
+		className: [
+			f.chip,
+			g,
+			_,
+			c ?? ""
+		].filter(Boolean).join(" "),
+		onClick: h,
+		...l,
+		children: e
+	}) : /* @__PURE__ */ t("span", {
+		className: [
+			f.chip,
+			g,
+			_,
+			v,
+			c ?? ""
+		].filter(Boolean).join(" "),
+		children: e
+	});
+}
+var m = {
+	inputBlockVertical: "_inputBlockVertical_1vqyb_1",
+	inputLabel: "_inputLabel_1vqyb_7",
+	inputLabelGlassy: "_inputLabelGlassy_1vqyb_13",
+	dateInputWrapper: "_dateInputWrapper_1vqyb_17",
+	inputDateField: "_inputDateField_1vqyb_22",
+	inputDateFieldGlassy: "_inputDateFieldGlassy_1vqyb_54",
+	inputError: "_inputError_1vqyb_72",
+	calendarIconButton: "_calendarIconButton_1vqyb_76",
+	icon: "_icon_1vqyb_104",
+	errorMessage: "_errorMessage_1vqyb_113"
+};
+//#endregion
+//#region src/components/form/date-picker/DatePicker.tsx
+function h({ label: e, name: r, id: i, value: a = null, maxDate: s, minDate: c, error: l, variant: u = "default", className: d, ref: f, onDateChange: p, onBlur: h, disabled: y, ...b }) {
+	let x = i ?? r, S = o(null), C = s ?? /* @__PURE__ */ new Date();
+	function w(e) {
+		S.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
+	}
+	function T(e) {
+		let t = e.target.value;
+		if (!t) {
+			p?.(null);
+			return;
+		}
+		p?.(_(t));
+	}
+	function E() {
+		y || (S.current?.showPicker?.(), S.current?.focus());
+	}
+	return /* @__PURE__ */ n("div", {
+		className: m.inputBlockVertical,
+		children: [
+			/* @__PURE__ */ t("label", {
+				htmlFor: x,
+				className: [m.inputLabel, u === "glassy" ? m.inputLabelGlassy : ""].filter(Boolean).join(" "),
+				children: e
+			}),
+			/* @__PURE__ */ n("div", {
+				className: m.dateInputWrapper,
+				children: [/* @__PURE__ */ t("input", {
+					id: x,
+					name: r,
+					ref: w,
+					type: "date",
+					value: g(a),
+					max: g(C),
+					min: c ? g(c) : void 0,
+					disabled: y,
+					onChange: T,
+					onBlur: h,
+					className: [
+						m.inputDateField,
+						u === "glassy" ? m.inputDateFieldGlassy : "",
+						l ? m.inputError : "",
+						d ?? ""
+					].filter(Boolean).join(" "),
+					"aria-invalid": !!l,
+					"aria-describedby": l ? `${r}-error` : void 0,
+					...b
+				}), /* @__PURE__ */ t("button", {
+					type: "button",
+					className: m.calendarIconButton,
+					onClick: E,
+					disabled: y,
+					"aria-label": "Datum auswählen",
+					tabIndex: -1,
+					children: /* @__PURE__ */ t(v, {})
+				})]
+			}),
+			l && /* @__PURE__ */ t("span", {
+				id: `${r}-error`,
+				className: m.errorMessage,
+				children: l
+			})
+		]
+	});
+}
+function g(e) {
+	return e ? `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}` : "";
+}
+function _(e) {
+	let [t, n, r] = e.split("-").map(Number);
+	return new Date(t, n - 1, r);
+}
+function v() {
+	return /* @__PURE__ */ n("svg", {
+		className: m.icon,
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ t("path", { d: "M8 2V5" }),
+			/* @__PURE__ */ t("path", { d: "M16 2V5" }),
+			/* @__PURE__ */ t("path", { d: "M3.5 9.09H20.5" }),
+			/* @__PURE__ */ t("path", { d: "M21 8.5V17.5C21 20 19.75 21.5 16.75 21.5H7.25C4.25 21.5 3 20 3 17.5V8.5C3 6 4.25 4.5 7.25 4.5H16.75C19.75 4.5 21 6 21 8.5Z" })
+		]
+	});
+}
+var y = {
+	inputBlockVertical: "_inputBlockVertical_1yqyz_1",
+	inputLabel: "_inputLabel_1yqyz_7",
+	inputLabelGlassy: "_inputLabelGlassy_1yqyz_13",
+	inputSelectField: "_inputSelectField_1yqyz_17",
+	inputSelectFieldGlassy: "_inputSelectFieldGlassy_1yqyz_27",
+	inputError: "_inputError_1yqyz_40",
+	errorMessage: "_errorMessage_1yqyz_44"
+};
+//#endregion
+//#region src/components/form/dropdown/Dropdown.tsx
+function b({ label: e, name: r, options: i, placeholder: a, error: o, variant: s = "default", className: c, disabled: l, ...u }) {
+	return /* @__PURE__ */ n("div", {
+		className: y.inputBlockVertical,
+		children: [
+			/* @__PURE__ */ t("label", {
+				htmlFor: r,
+				className: [y.inputLabel, s === "glassy" ? y.inputLabelGlassy : ""].filter(Boolean).join(" "),
+				children: e
+			}),
+			/* @__PURE__ */ n("select", {
+				id: r,
+				name: r,
+				disabled: l,
+				className: [
+					y.inputSelectField,
+					s === "glassy" ? y.inputSelectFieldGlassy : "",
+					o ? y.inputError : "",
+					c ?? ""
+				].filter(Boolean).join(" "),
+				"aria-invalid": !!o,
+				"aria-describedby": o ? `${r}-error` : void 0,
+				...u,
+				children: [a && /* @__PURE__ */ t("option", {
+					value: "",
+					disabled: !0,
+					children: a
+				}), i.map((e) => /* @__PURE__ */ t("option", {
+					value: e.value,
+					children: e.label
+				}, e.value))]
+			}),
+			o && /* @__PURE__ */ t("span", {
+				id: `${r}-error`,
+				className: y.errorMessage,
+				children: o
+			})
+		]
+	});
+}
+var x = {
+	appLink: "_appLink_b53rv_1",
+	appLinkDefault: "_appLinkDefault_b53rv_19",
+	appLinkGlassy: "_appLinkGlassy_b53rv_30",
+	label: "_label_b53rv_38",
+	icon: "_icon_b53rv_43",
+	arrowIcon: "_arrowIcon_b53rv_54"
+};
+//#endregion
+//#region src/components/form/link/Link.tsx
+function S({ children: e, href: r, onClick: i, newTab: a = !1, showArrow: o = !0, variant: s = "default", className: c, ...l }) {
+	function u(e) {
+		r || e.preventDefault(), i?.(e);
+	}
+	return /* @__PURE__ */ n("a", {
+		href: r ?? "#",
+		onClick: u,
+		target: r && a ? "_blank" : void 0,
+		rel: r && a ? "noopener noreferrer" : void 0,
+		className: [
+			x.appLink,
+			s === "glassy" ? x.appLinkGlassy : x.appLinkDefault,
+			c ?? ""
+		].filter(Boolean).join(" "),
+		...l,
+		children: [/* @__PURE__ */ t("span", {
+			className: x.label,
+			children: e
+		}), o && /* @__PURE__ */ t("span", {
+			className: x.icon,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ t(C, {})
+		})]
+	});
+}
+function C() {
+	return /* @__PURE__ */ n("svg", {
+		className: x.arrowIcon,
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ t("path", { d: "M5 12H19" }), /* @__PURE__ */ t("path", { d: "M13 6L19 12L13 18" })]
+	});
+}
+var w = {
+	inputBlockVertical: "_inputBlockVertical_u3s35_1",
+	inputLabel: "_inputLabel_u3s35_7",
+	inputLabelGlassy: "_inputLabelGlassy_u3s35_13",
+	passwordInputWrapper: "_passwordInputWrapper_u3s35_17",
+	inputTextField: "_inputTextField_u3s35_22",
+	inputTextFieldGlassy: "_inputTextFieldGlassy_u3s35_34",
+	inputError: "_inputError_u3s35_56",
+	togglePasswordButton: "_togglePasswordButton_u3s35_60",
+	icon: "_icon_u3s35_92",
+	errorMessage: "_errorMessage_u3s35_101"
+};
+//#endregion
+//#region src/components/form/password/Password.tsx
+function T({ label: e, name: r, id: i, error: a, variant: o = "default", className: c, disabled: l, ref: u, autoComplete: d = "current-password", ...f }) {
+	let [p, m] = s(!1), h = i ?? r;
+	function g() {
+		m((e) => !e);
+	}
+	return /* @__PURE__ */ n("div", {
+		className: w.inputBlockVertical,
+		children: [
+			e && /* @__PURE__ */ t("label", {
+				htmlFor: h,
+				className: [w.inputLabel, o === "glassy" ? w.inputLabelGlassy : ""].filter(Boolean).join(" "),
+				children: e
+			}),
+			/* @__PURE__ */ n("div", {
+				className: w.passwordInputWrapper,
+				children: [/* @__PURE__ */ t("input", {
+					id: h,
+					name: r,
+					ref: u,
+					type: p ? "text" : "password",
+					disabled: l,
+					autoComplete: d,
+					className: [
+						w.inputTextField,
+						o === "glassy" ? w.inputTextFieldGlassy : "",
+						a ? w.inputError : "",
+						c ?? ""
+					].filter(Boolean).join(" "),
+					"aria-invalid": !!a,
+					"aria-describedby": a ? `${r}-error` : void 0,
+					...f
+				}), /* @__PURE__ */ t("button", {
+					type: "button",
+					className: w.togglePasswordButton,
+					onClick: g,
+					disabled: l,
+					"aria-label": p ? "Passwort ausblenden" : "Passwort anzeigen",
+					"aria-pressed": p,
+					children: t(p ? D : E, {})
+				})]
+			}),
+			a && /* @__PURE__ */ t("span", {
+				id: `${r}-error`,
+				className: w.errorMessage,
+				children: a
+			})
+		]
+	});
+}
+function E() {
+	return /* @__PURE__ */ n("svg", {
+		className: w.icon,
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ t("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), /* @__PURE__ */ t("circle", {
+			cx: "12",
+			cy: "12",
+			r: "3"
+		})]
+	});
+}
+function D() {
+	return /* @__PURE__ */ t("svg", {
+		className: w.icon,
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ t("path", { d: "M17.94 17.94A10.94 10.94 0 0 1 12 20C7 20 2.73 16.11 1 12c.74-1.64 1.82-3.06 3.11-4.24m3.52-2.42A10.94 10.94 0 0 1 12 4c5 0 9.27 3.89 11 8-1.1 2.42-2.91 4.5-5.06 5.94M1 1l22 22" })
+	});
+}
+var O = {
+	inputBlockVertical: "_inputBlockVertical_1xe0h_1",
+	inputLabel: "_inputLabel_1xe0h_7",
+	inputLabelGlassy: "_inputLabelGlassy_1xe0h_13",
+	inputWrapper: "_inputWrapper_1xe0h_17",
+	inputTextField: "_inputTextField_1xe0h_22",
+	inputTextFieldGlassy: "_inputTextFieldGlassy_1xe0h_34",
+	inputError: "_inputError_1xe0h_64",
+	loading: "_loading_1xe0h_68",
+	suggestionList: "_suggestionList_1xe0h_77",
+	suggestionItem: "_suggestionItem_1xe0h_94",
+	locality: "_locality_1xe0h_114",
+	emptyState: "_emptyState_1xe0h_118",
+	successMessage: "_successMessage_1xe0h_129",
+	errorMessage: "_errorMessage_1xe0h_135"
+};
+//#endregion
+//#region src/components/form/postal-code/PostalCode.tsx
+function k({ label: e, name: a, id: c, error: l, variant: u = "default", className: d, disabled: f, placeholder: p = "z.B. 8001 oder Zürich", ref: m, onChange: h, onBlur: g, onValueChange: _, onSuggestionSelect: v, ...y }) {
+	let b = i(), x = c ?? `${a}-${b}`, S = o(null), C = o(!1), [w, T] = s(""), [E, D] = s([]), [k, A] = s(!1), [j, M] = s(!1), N = w.trim().match(/^(\d+)\s+(.+)$/), P = !!N, F = N?.[1], I = N?.[2], L = P && E.some((e) => e.postalCode === F && e.locality === I), R = /^\d+$/.test(w.trim()), z = w.trim().length >= 4 && R && !k, B = z && E.some((e) => e.postalCode === w.trim()), V = z && !B;
+	j && w.trim().length >= 4 && E.length, r(() => {
+		let e = w.trim();
+		if (e.length < 2) {
+			D([]), M(!1);
+			return;
+		}
+		if (C.current) {
+			C.current = !1;
+			return;
+		}
+		let t = new AbortController();
+		async function n() {
+			A(!0);
+			try {
+				let n = e.match(/^(\d+)\s/), r = n ? n[1] : e, i = /^\d+$/.test(r) ? `https://openplzapi.org/ch/Localities?postalCode=${r}` : `https://openplzapi.org/ch/Localities?locality=${encodeURIComponent(r)}`, a = await fetch(i, { signal: t.signal });
+				if (!a.ok) throw Error("Postal-Code-Suche fehlgeschlagen");
+				let o = await a.json();
+				D(Array.from(new Map(o.map((e) => {
+					let t = `${e.postalCode} ${e.name}`;
+					return [t, {
+						label: t,
+						postalCode: e.postalCode,
+						locality: e.name
+					}];
+				})).values()).slice(0, 10)), M(!0);
+			} catch (e) {
+				if (t.signal.aborted) return;
+				console.error(e), D([]), M(!0);
+			} finally {
+				t.signal.aborted || A(!1);
+			}
+		}
+		let r = window.setTimeout(n, 300);
+		return () => {
+			window.clearTimeout(r), t.abort();
+		};
+	}, [w]);
+	function H(e) {
+		S.current = e, typeof m == "function" ? m(e) : m && (m.current = e);
+	}
+	function U(e) {
+		let t = e.target.value;
+		T(t), _?.(t), h?.(e);
+	}
+	function W(e) {
+		C.current = !0, T(e.label), D([]), M(!1), _?.(e.label), v?.(e), S.current && (S.current.value = e.label, S.current.dispatchEvent(new Event("input", { bubbles: !0 })));
+	}
+	return /* @__PURE__ */ n("div", {
+		className: O.inputBlockVertical,
+		children: [
+			/* @__PURE__ */ t("label", {
+				htmlFor: x,
+				className: [O.inputLabel, u === "glassy" ? O.inputLabelGlassy : ""].filter(Boolean).join(" "),
+				children: e
+			}),
+			/* @__PURE__ */ n("div", {
+				className: O.inputWrapper,
+				children: [
+					/* @__PURE__ */ t("input", {
+						id: x,
+						name: a,
+						ref: H,
+						type: "text",
+						inputMode: "search",
+						autoComplete: "postal-code",
+						disabled: f,
+						placeholder: p,
+						value: w,
+						onChange: U,
+						onBlur: g,
+						className: [
+							O.inputTextField,
+							u === "glassy" ? O.inputTextFieldGlassy : "",
+							B || L ? O.inputValid : "",
+							V || l ? O.inputError : "",
+							d ?? ""
+						].filter(Boolean).join(" "),
+						"aria-invalid": !!l || V,
+						"aria-describedby": l ? `${a}-error` : void 0,
+						...y
+					}),
+					k && /* @__PURE__ */ t("span", {
+						className: O.loading,
+						children: "Lädt…"
+					}),
+					E.length > 0 && /* @__PURE__ */ t("ul", {
+						className: O.suggestionList,
+						children: E.map((e) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ n("button", {
+							type: "button",
+							className: O.suggestionItem,
+							onMouseDown: (e) => e.preventDefault(),
+							onClick: () => W(e),
+							children: [/* @__PURE__ */ t("span", { children: e.postalCode }), /* @__PURE__ */ t("span", {
+								className: O.locality,
+								children: e.locality
+							})]
+						}) }, e.label))
+					}),
+					j && w.trim().length >= 2 && E.length === 0 && !k && !L && !V && /* @__PURE__ */ t("div", {
+						className: O.emptyState,
+						children: "Keine Schweizer PLZ oder Ortschaft gefunden."
+					})
+				]
+			}),
+			B && /* @__PURE__ */ t("span", {
+				className: O.successMessage,
+				children: "Gültige Schweizer Postleitzahl"
+			}),
+			L && /* @__PURE__ */ t("span", {
+				className: O.successMessage,
+				children: "Gültige Schweizer Postleitzahl"
+			}),
+			V && /* @__PURE__ */ t("span", {
+				className: O.errorMessage,
+				children: "Diese Schweizer Postleitzahl wurde nicht gefunden."
+			}),
+			l && /* @__PURE__ */ t("span", {
+				id: `${a}-error`,
+				className: O.errorMessage,
+				children: l
+			})
+		]
+	});
+}
+var A = {
+	radioGroup: "_radioGroup_cqfjf_1",
+	radioGroupGlassy: "_radioGroupGlassy_cqfjf_11",
+	radioLabel: "_radioLabel_cqfjf_15",
+	radioLabelGlassy: "_radioLabelGlassy_cqfjf_20",
+	optionGroup: "_optionGroup_cqfjf_24",
+	optionWrapper: "_optionWrapper_cqfjf_31",
+	optionWrapperDisabled: "_optionWrapperDisabled_cqfjf_37",
+	radioInput: "_radioInput_cqfjf_41",
+	optionButton: "_optionButton_cqfjf_58",
+	optionTitle: "_optionTitle_cqfjf_81",
+	optionDescription: "_optionDescription_cqfjf_87",
+	optionButtonDefault: "_optionButtonDefault_cqfjf_95",
+	optionButtonGlassy: "_optionButtonGlassy_cqfjf_120",
+	optionButtonError: "_optionButtonError_cqfjf_165",
+	errorMessage: "_errorMessage_cqfjf_169"
+};
+//#endregion
+//#region src/components/form/radiobutton/RadioButton.tsx
+function j({ label: e, name: r, options: i, error: a, variant: o = "default", className: s, disabled: c, value: l, defaultValue: u, onChange: d, ...f }) {
+	let p = l !== void 0;
+	return /* @__PURE__ */ n("fieldset", {
+		className: [
+			A.radioGroup,
+			o === "glassy" ? A.radioGroupGlassy : "",
+			s ?? ""
+		].filter(Boolean).join(" "),
+		"aria-invalid": !!a,
+		"aria-describedby": a ? `${r}-error` : void 0,
+		children: [
+			e && /* @__PURE__ */ t("legend", {
+				className: [A.radioLabel, o === "glassy" ? A.radioLabelGlassy : ""].filter(Boolean).join(" "),
+				children: e
+			}),
+			/* @__PURE__ */ t("div", {
+				className: A.optionGroup,
+				children: i.map((e) => {
+					let i = p ? { checked: l === e.value } : { defaultChecked: u === e.value };
+					return /* @__PURE__ */ n("label", {
+						className: [A.optionWrapper, c ? A.optionWrapperDisabled : ""].filter(Boolean).join(" "),
+						children: [/* @__PURE__ */ t("input", {
+							type: "radio",
+							name: r,
+							value: e.value,
+							disabled: c,
+							className: A.radioInput,
+							onChange: d,
+							...i,
+							...f
+						}), /* @__PURE__ */ n("span", {
+							className: [
+								A.optionButton,
+								o === "glassy" ? A.optionButtonGlassy : A.optionButtonDefault,
+								a ? A.optionButtonError : ""
+							].filter(Boolean).join(" "),
+							children: [/* @__PURE__ */ t("span", {
+								className: A.optionTitle,
+								children: e.label
+							}), e.description && /* @__PURE__ */ t("span", {
+								className: A.optionDescription,
+								children: e.description
+							})]
+						})]
+					}, e.value);
+				})
+			}),
+			a && /* @__PURE__ */ t("span", {
+				id: `${r}-error`,
+				className: A.errorMessage,
+				children: a
+			})
+		]
+	});
+}
+var M = {
+	switchWrapper: "_switchWrapper_14rch_1",
+	switchCheckbox: "_switchCheckbox_14rch_7",
+	switchLabel: "_switchLabel_14rch_15",
+	switchLabelDefault: "_switchLabelDefault_14rch_24",
+	switchLabelGlassy: "_switchLabelGlassy_14rch_28",
+	switchBackground: "_switchBackground_14rch_37",
+	switchBackgroundDefault: "_switchBackgroundDefault_14rch_56",
+	switchBackgroundGlassy: "_switchBackgroundGlassy_14rch_66",
+	switchButton: "_switchButton_14rch_77",
+	iconChecked: "_iconChecked_14rch_163",
+	iconUnchecked: "_iconUnchecked_14rch_164",
+	switchText: "_switchText_14rch_200",
+	errorMessage: "_errorMessage_14rch_206"
+};
+//#endregion
+//#region src/components/form/switch/Switch.tsx
+function N({ name: e, id: r, label: i, error: a, variant: o = "default", className: s, disabled: c, ...l }) {
+	let u = r ?? `${e}-switch`;
+	return /* @__PURE__ */ n("div", {
+		className: [M.switchWrapper, s ?? ""].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ t("input", {
+				id: u,
+				name: e,
+				type: "checkbox",
+				disabled: c,
+				className: M.switchCheckbox,
+				"aria-invalid": !!a,
+				"aria-describedby": a ? `${e}-error` : void 0,
+				...l
+			}),
+			/* @__PURE__ */ n("label", {
+				htmlFor: u,
+				className: [M.switchLabel, o === "glassy" ? M.switchLabelGlassy : M.switchLabelDefault].filter(Boolean).join(" "),
+				children: [/* @__PURE__ */ t("span", {
+					className: [M.switchBackground, o === "glassy" ? M.switchBackgroundGlassy : M.switchBackgroundDefault].filter(Boolean).join(" "),
+					children: /* @__PURE__ */ n("span", {
+						className: M.switchButton,
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ t("span", {
+							className: M.iconChecked,
+							children: /* @__PURE__ */ t(P, {})
+						}), /* @__PURE__ */ t("span", {
+							className: M.iconUnchecked,
+							children: /* @__PURE__ */ t(F, {})
+						})]
+					})
+				}), i && /* @__PURE__ */ t("span", {
+					className: M.switchText,
+					children: i
+				})]
+			}),
+			a && /* @__PURE__ */ t("span", {
+				id: `${e}-error`,
+				className: M.errorMessage,
+				children: a
+			})
+		]
+	});
+}
+function P() {
+	return /* @__PURE__ */ t("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 12 12",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ t("path", {
+			d: "M3 6.5L5.5 9L9 3",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function F() {
+	return /* @__PURE__ */ t("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 12 12",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ t("path", {
+			d: "M3 3L9 9M9 3L3 9",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round"
+		})
+	});
+}
+var I = {
+	inputBlockVertical: "_inputBlockVertical_1khad_1",
+	inputLabel: "_inputLabel_1khad_8",
+	inputLabelGlassy: "_inputLabelGlassy_1khad_14",
+	inputTextField: "_inputTextField_1khad_20",
+	inputTextFieldGlassy: "_inputTextFieldGlassy_1khad_37",
+	inputError: "_inputError_1khad_59",
+	errorMessage: "_errorMessage_1khad_63"
+};
+//#endregion
+//#region src/components/form/textfield/TextField.tsx
+function L({ label: e, name: r, error: i, placeholder: a, variant: o = "default", className: s, ref: c, ...l }) {
+	return /* @__PURE__ */ n("div", {
+		className: I.inputBlockVertical,
+		children: [
+			/* @__PURE__ */ t("label", {
+				htmlFor: r,
+				className: [I.inputLabel, o === "glassy" ? I.inputLabelGlassy : ""].filter(Boolean).join(" "),
+				children: e
+			}),
+			/* @__PURE__ */ t("input", {
+				id: r,
+				name: r,
+				ref: c,
+				placeholder: a,
+				className: [
+					I.inputTextField,
+					o === "glassy" ? I.inputTextFieldGlassy : "",
+					i ? I.inputError : "",
+					s ?? ""
+				].filter(Boolean).join(" "),
+				"aria-invalid": !!i,
+				"aria-describedby": i ? `${r}-error` : void 0,
+				...l
+			}),
+			i && /* @__PURE__ */ t("span", {
+				id: `${r}-error`,
+				className: I.errorMessage,
+				children: i
+			})
+		]
+	});
+}
+var R = {
+	wrapper: "_wrapper_1jqlw_1",
+	label: "_label_1jqlw_7",
+	labelGlassy: "_labelGlassy_1jqlw_13",
+	dropzone: "_dropzone_1jqlw_17",
+	dropzoneGlassy: "_dropzoneGlassy_1jqlw_32",
+	dragOver: "_dragOver_1jqlw_39",
+	errorState: "_errorState_1jqlw_48",
+	disabled: "_disabled_1jqlw_52",
+	hiddenInput: "_hiddenInput_1jqlw_57",
+	dropzoneContent: "_dropzoneContent_1jqlw_65",
+	placeholder: "_placeholder_1jqlw_74",
+	big: "_big_1jqlw_80",
+	small: "_small_1jqlw_86",
+	hint: "_hint_1jqlw_91",
+	selected: "_selected_1jqlw_111",
+	preview: "_preview_1jqlw_118",
+	fileMeta: "_fileMeta_1jqlw_127",
+	fileName: "_fileName_1jqlw_134",
+	fileSize: "_fileSize_1jqlw_142",
+	remove: "_remove_1jqlw_156",
+	errorMessage: "_errorMessage_1jqlw_198"
+};
+//#endregion
+//#region src/components/form/upload/Upload.tsx
+function z({ label: e, name: o, id: c, file: l, error: u, variant: d = "default", accept: f = "image/*", maxSizeBytes: p = 5 * 1024 * 1024, disabled: m, className: h, onChange: g, onFileChange: _, ...v }) {
+	let y = i(), b = c ?? `${o}-${y}`, [x, S] = s(!1), [C, w] = s(l ?? null), T = l !== void 0, E = T ? l : C, D = a(() => !E || !E.type.startsWith("image/") ? null : URL.createObjectURL(E), [E]);
+	r(() => {
+		T && w(l ?? null);
+	}, [l, T]), r(() => () => {
+		D && URL.revokeObjectURL(D);
+	}, [D]);
+	function O(e) {
+		return !e || (f === "image/*" || f.startsWith("image/")) && !e.type.startsWith("image/") || p && e.size > p ? null : e;
+	}
+	function k(e) {
+		let t = O(e);
+		T || w(t), _?.(t);
+	}
+	function A(e) {
+		k(e.target.files?.[0] ?? null), g?.(e);
+	}
+	function j(e) {
+		e.preventDefault(), e.stopPropagation(), m || S(!0);
+	}
+	function M(e) {
+		e.preventDefault(), e.stopPropagation(), !e.currentTarget.contains(e.relatedTarget) && S(!1);
+	}
+	function N(e) {
+		e.preventDefault(), e.stopPropagation(), S(!1), !m && k(e.dataTransfer.files?.[0] ?? null);
+	}
+	function P() {
+		T || w(null), _?.(null);
+	}
+	let F = Math.round(p / (1024 * 1024));
+	return /* @__PURE__ */ n("div", {
+		className: [R.wrapper, h ?? ""].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ t("label", {
+				className: [R.label, d === "glassy" ? R.labelGlassy : ""].filter(Boolean).join(" "),
+				htmlFor: b,
+				children: e
+			}),
+			/* @__PURE__ */ n("div", {
+				className: [
+					R.dropzone,
+					d === "glassy" ? R.dropzoneGlassy : "",
+					x ? R.dragOver : "",
+					u ? R.errorState : "",
+					m ? R.disabled : ""
+				].filter(Boolean).join(" "),
+				onDragOver: j,
+				onDragLeave: M,
+				onDrop: N,
+				children: [
+					/* @__PURE__ */ t("input", {
+						id: b,
+						name: o,
+						className: R.hiddenInput,
+						type: "file",
+						accept: f,
+						disabled: m,
+						onChange: A,
+						"aria-invalid": !!u,
+						"aria-describedby": u ? `${o}-error` : void 0,
+						...v
+					}),
+					/* @__PURE__ */ t("label", {
+						htmlFor: b,
+						className: R.dropzoneContent,
+						children: E ? /* @__PURE__ */ n("span", {
+							className: R.selected,
+							children: [D && /* @__PURE__ */ t("img", {
+								className: R.preview,
+								src: D,
+								alt: `Vorschau von ${E.name}`
+							}), /* @__PURE__ */ n("span", {
+								className: R.fileMeta,
+								children: [/* @__PURE__ */ t("span", {
+									className: R.fileName,
+									children: E.name
+								}), /* @__PURE__ */ n("span", {
+									className: R.fileSize,
+									children: [
+										(E.size / 1024).toFixed(0),
+										" KB ·",
+										" ",
+										E.type || "unknown"
+									]
+								})]
+							})]
+						}) : /* @__PURE__ */ n("span", {
+							className: R.placeholder,
+							children: [
+								/* @__PURE__ */ t("span", {
+									className: R.big,
+									children: "Datei hier reinziehen"
+								}),
+								/* @__PURE__ */ t("span", {
+									className: R.small,
+									children: "…oder klicken, um auszuwählen"
+								}),
+								/* @__PURE__ */ n("span", {
+									className: R.hint,
+									children: [
+										"Erlaubt: ",
+										f,
+										" · max. ",
+										F,
+										" MB"
+									]
+								})
+							]
+						})
+					}),
+					E && /* @__PURE__ */ t("button", {
+						type: "button",
+						className: R.remove,
+						onClick: P,
+						disabled: m,
+						children: "Entfernen"
+					})
+				]
+			}),
+			u && /* @__PURE__ */ t("span", {
+				id: `${o}-error`,
+				className: R.errorMessage,
+				children: u
+			})
+		]
+	});
+}
 //#endregion
-export { i as Button };
+export { l as Button, d as Checkbox, p as Chip, h as DatePicker, b as Dropdown, S as Link, T as Password, k as PostalCode, j as RadioButton, N as Switch, L as TextField, z as Upload };