suus-component-library 0.1.15 → 0.1.17

package/dist/suus-component-library.js

@@ -38,7 +38,62 @@ function l({ label: r, onClick: i, type: a = "button", disabled: o = !1, loading
 		})] })
 	});
 }
-var u = {
+//#endregion
+//#region src/components/banner-hero/banner-hero.tsx
+var u = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23e8f3ec'/%3E%3Cstop offset='100%25' stop-color='%23d7e6dc'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='800' fill='url(%23g)'/%3E%3C/svg%3E", d = (e) => e === "--color-juice-sugarcane" || e === "--color-juice-tamarind" || e === "--color-juice-guarana" || e === "--color-juice-icetea";
+function f({ title: e, description: r, colorToken: i, imageBackgroundDesktop: a, imageBackgroundTablet: o, imageBackgroundMobile: c, fallbackImageSrc: f, labelButtonPrimary: p, actionButtonPrimary: m, labelButtonSecondary: h, actionButtonSecondary: g }) {
+	let [_, v] = s(null), y = a?.trim(), b = o?.trim(), x = c?.trim(), S = f?.trim() || u, C = [
+		y,
+		b,
+		x
+	].filter(Boolean).join("|"), w = !!y && _ !== C, T = d(i) ? i : void 0, E = w ? [
+		x ? `${x} 900w` : "",
+		b ? `${b} 1600w` : "",
+		`${y} 2400w`
+	].filter(Boolean).join(", ") : void 0;
+	return /* @__PURE__ */ t("div", {
+		className: "content-child-max banner-hero",
+		children: /* @__PURE__ */ n("div", {
+			className: "hero__container",
+			children: [/* @__PURE__ */ t("img", {
+				src: w ? y : S,
+				srcSet: E,
+				sizes: E ? "100vw" : void 0,
+				className: "image-banner",
+				alt: "background",
+				onError: w ? () => v(C) : void 0
+			}), /* @__PURE__ */ n("div", {
+				className: "hero__content",
+				style: i ? { color: `var(${i})` } : void 0,
+				children: [
+					e && e.split("\n").map((r, a) => /* @__PURE__ */ n("span", {
+						className: `banner--title ${i || ""}`,
+						"data-testid": "bannerHeroTitle",
+						children: [r, a < e.split("\n").length - 1 && /* @__PURE__ */ t("br", {})]
+					}, a)),
+					/* @__PURE__ */ t("p", {
+						className: "banner--description",
+						children: r && r.split("\n").map((e, i) => /* @__PURE__ */ n("span", { children: [e, i < r.split("\n").length - 1 && /* @__PURE__ */ t("br", {})] }, i))
+					}),
+					/* @__PURE__ */ n("div", {
+						className: "banner-hero-buttonbar",
+						children: [p && /* @__PURE__ */ t(l, {
+							label: p,
+							variant: "primary",
+							colorToken: T,
+							onClick: m
+						}), h && /* @__PURE__ */ t(l, {
+							label: h,
+							variant: "secondary",
+							onClick: g
+						})]
+					})
+				]
+			})]
+		})
+	});
+}
+var p = {
 	checkboxWrapper: "_checkboxWrapper_y1lye_1",
 	checkboxInput: "_checkboxInput_y1lye_15",
 	checkboxLabel: "_checkboxLabel_y1lye_24",
@@ -52,54 +107,54 @@ var u = {
 };
 //#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`;
+function m({ label: e, name: r, id: i, error: a, variant: o = "default", className: s, disabled: c, ...l }) {
+	let u = i ?? `${r}-checkbox`;
 	return /* @__PURE__ */ n("div", {
 		className: [
-			u.checkboxWrapper,
-			o === "glassy" ? u.checkboxWrapperGlassy : "",
-			a ? u.checkboxWrapperError : "",
-			c ? u.checkboxWrapperDisabled : "",
+			p.checkboxWrapper,
+			o === "glassy" ? p.checkboxWrapperGlassy : "",
+			a ? p.checkboxWrapperError : "",
+			c ? p.checkboxWrapperDisabled : "",
 			s ?? ""
 		].filter(Boolean).join(" "),
 		children: [
 			/* @__PURE__ */ t("input", {
 				type: "checkbox",
-				id: d,
+				id: u,
 				name: r,
 				disabled: c,
-				className: u.checkboxInput,
+				className: p.checkboxInput,
 				"aria-invalid": !!a,
 				"aria-describedby": a ? `${r}-error` : void 0,
 				...l
 			}),
 			/* @__PURE__ */ n("label", {
-				htmlFor: d,
-				className: u.checkboxLabel,
+				htmlFor: u,
+				className: p.checkboxLabel,
 				children: [/* @__PURE__ */ t("span", {
-					className: u.customCheckbox,
+					className: p.customCheckbox,
 					"aria-hidden": "true",
 					children: /* @__PURE__ */ t("svg", {
-						className: u.checkIcon,
+						className: p.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,
+					className: p.checkboxText,
 					children: e
 				})]
 			}),
 			a && /* @__PURE__ */ t("span", {
 				id: `${r}-error`,
-				className: u.errorMessage,
+				className: p.errorMessage,
 				children: a
 			})
 		]
 	});
 }
-var f = {
+var h = {
 	chip: "_chip_1po0g_1",
 	chipDefault: "_chipDefault_1po0g_21",
 	chipGlassy: "_chipGlassy_1po0g_36",
@@ -108,29 +163,29 @@ var f = {
 };
 //#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) {
+function g({ children: e, variant: n = "default", clickable: r = !0, checked: i, defaultChecked: a = !1, onCheckedChange: o, className: c, ...l }) {
+	let [u, d] = s(a), f = typeof i == "boolean", p = f ? i : u;
+	function m(e) {
 		if (!r) return;
-		let t = !m;
-		p || d(t), o?.(t), l.onClick?.(e);
+		let t = !p;
+		f || d(t), o?.(t), l.onClick?.(e);
 	}
-	let g = n === "glassy" ? f.chipGlassy : f.chipDefault, _ = m ? f.chipChecked : "", v = r ? "" : f.chipDisabled;
+	let g = n === "glassy" ? h.chipGlassy : h.chipDefault, _ = p ? h.chipChecked : "", v = r ? "" : h.chipDisabled;
 	return r ? /* @__PURE__ */ t("button", {
 		type: "button",
-		"aria-pressed": m,
+		"aria-pressed": p,
 		className: [
-			f.chip,
+			h.chip,
 			g,
 			_,
 			c ?? ""
 		].filter(Boolean).join(" "),
-		onClick: h,
+		onClick: m,
 		...l,
 		children: e
 	}) : /* @__PURE__ */ t("span", {
 		className: [
-			f.chip,
+			h.chip,
 			g,
 			_,
 			v,
@@ -139,7 +194,7 @@ function p({ children: e, variant: n = "default", clickable: r = !0, checked: i,
 		children: e
 	});
 }
-var m = {
+var _ = {
 	dateInputWrapper: "_dateInputWrapper_6osqj_1",
 	inputDateField: "_inputDateField_6osqj_6",
 	inputDateFieldGlassy: "_inputDateFieldGlassy_6osqj_38",
@@ -150,8 +205,8 @@ var m = {
 };
 //#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 v({ 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: m, disabled: h, ...g }) {
+	let v = 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);
 	}
@@ -161,69 +216,69 @@ function h({ label: e, name: r, id: i, value: a = null, maxDate: s, minDate: c,
 			p?.(null);
 			return;
 		}
-		p?.(_(t));
+		p?.(b(t));
 	}
 	function E() {
-		y || (S.current?.showPicker?.(), S.current?.focus());
+		h || (S.current?.showPicker?.(), S.current?.focus());
 	}
 	return /* @__PURE__ */ n("div", {
 		className: "inputBlockVertical",
 		children: [
 			/* @__PURE__ */ t("label", {
-				htmlFor: x,
+				htmlFor: v,
 				className: ["inputLabel", u === "glassy" ? "inputLabelGlassy" : ""].filter(Boolean).join(" "),
 				children: e
 			}),
 			/* @__PURE__ */ n("div", {
-				className: m.dateInputWrapper,
+				className: _.dateInputWrapper,
 				children: [/* @__PURE__ */ t("input", {
-					id: x,
+					id: v,
 					name: r,
 					ref: w,
 					type: "date",
-					value: g(a),
-					max: g(C),
-					min: c ? g(c) : void 0,
-					disabled: y,
+					value: y(a),
+					max: y(C),
+					min: c ? y(c) : void 0,
+					disabled: h,
 					onChange: T,
-					onBlur: h,
+					onBlur: m,
 					className: [
-						m.inputDateField,
-						u === "glassy" ? m.inputDateFieldGlassy : "",
-						l ? m.inputError : "",
+						_.inputDateField,
+						u === "glassy" ? _.inputDateFieldGlassy : "",
+						l ? _.inputError : "",
 						d ?? ""
 					].filter(Boolean).join(" "),
 					"aria-invalid": !!l,
 					"aria-describedby": l ? `${r}-error` : void 0,
-					...b
+					...g
 				}), /* @__PURE__ */ t("button", {
 					type: "button",
-					className: m.calendarIconButton,
+					className: _.calendarIconButton,
 					onClick: E,
-					disabled: y,
+					disabled: h,
 					"aria-label": "Datum auswählen",
 					tabIndex: -1,
-					children: /* @__PURE__ */ t(v, {})
+					children: /* @__PURE__ */ t(x, {})
 				})]
 			}),
 			l && /* @__PURE__ */ t("span", {
 				id: `${r}-error`,
-				className: m.errorMessage,
+				className: _.errorMessage,
 				children: l
 			})
 		]
 	});
 }
-function g(e) {
+function y(e) {
 	return e ? `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}` : "";
 }
-function _(e) {
+function b(e) {
 	let [t, n, r] = e.split("-").map(Number);
 	return new Date(t, n - 1, r);
 }
-function v() {
+function x() {
 	return /* @__PURE__ */ n("svg", {
-		className: m.icon,
+		className: _.icon,
 		xmlns: "http://www.w3.org/2000/svg",
 		viewBox: "0 0 24 24",
 		fill: "none",
@@ -236,7 +291,7 @@ function v() {
 		]
 	});
 }
-var y = {
+var S = {
 	inputSelectField: "_inputSelectField_1uwtt_1",
 	inputSelectFieldGlassy: "_inputSelectFieldGlassy_1uwtt_12",
 	inputError: "_inputError_1uwtt_24",
@@ -244,7 +299,7 @@ var y = {
 };
 //#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 }) {
+function C({ label: e, name: r, options: i, placeholder: a, error: o, variant: s = "default", className: c, disabled: l, ...u }) {
 	return /* @__PURE__ */ n("div", {
 		className: "inputBlockVertical",
 		children: [
@@ -258,9 +313,9 @@ function b({ label: e, name: r, options: i, placeholder: a, error: o, variant: s
 				name: r,
 				disabled: l,
 				className: [
-					y.inputSelectField,
-					s === "glassy" ? y.inputSelectFieldGlassy : "",
-					o ? y.inputError : "",
+					S.inputSelectField,
+					s === "glassy" ? S.inputSelectFieldGlassy : "",
+					o ? S.inputError : "",
 					c ?? ""
 				].filter(Boolean).join(" "),
 				"aria-invalid": !!o,
@@ -277,13 +332,13 @@ function b({ label: e, name: r, options: i, placeholder: a, error: o, variant: s
 			}),
 			o && /* @__PURE__ */ t("span", {
 				id: `${r}-error`,
-				className: y.errorMessage,
+				className: S.errorMessage,
 				children: o
 			})
 		]
 	});
 }
-var x = {
+var w = {
 	appLink: "_appLink_b53rv_1",
 	appLinkDefault: "_appLinkDefault_b53rv_19",
 	appLinkGlassy: "_appLinkGlassy_b53rv_30",
@@ -293,7 +348,7 @@ var x = {
 };
 //#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 T({ 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);
 	}
@@ -303,24 +358,24 @@ function S({ children: e, href: r, onClick: i, newTab: a = !1, showArrow: o = !0
 		target: r && a ? "_blank" : void 0,
 		rel: r && a ? "noopener noreferrer" : void 0,
 		className: [
-			x.appLink,
-			s === "glassy" ? x.appLinkGlassy : x.appLinkDefault,
+			w.appLink,
+			s === "glassy" ? w.appLinkGlassy : w.appLinkDefault,
 			c ?? ""
 		].filter(Boolean).join(" "),
 		...l,
 		children: [/* @__PURE__ */ t("span", {
-			className: x.label,
+			className: w.label,
 			children: e
 		}), o && /* @__PURE__ */ t("span", {
-			className: x.icon,
+			className: w.icon,
 			"aria-hidden": "true",
-			children: /* @__PURE__ */ t(C, {})
+			children: /* @__PURE__ */ t(E, {})
 		})]
 	});
 }
-function C() {
+function E() {
 	return /* @__PURE__ */ n("svg", {
-		className: x.arrowIcon,
+		className: w.arrowIcon,
 		xmlns: "http://www.w3.org/2000/svg",
 		viewBox: "0 0 24 24",
 		fill: "none",
@@ -328,7 +383,44 @@ function C() {
 		children: [/* @__PURE__ */ t("path", { d: "M5 12H19" }), /* @__PURE__ */ t("path", { d: "M13 6L19 12L13 18" })]
 	});
 }
-var w = {
+var D = {
+	iconButton: "_iconButton_14rp3_1",
+	withFrame: "_withFrame_14rp3_17",
+	withoutFrame: "_withoutFrame_14rp3_24",
+	glassy: "_glassy_14rp3_57",
+	active: "_active_14rp3_75",
+	small: "_small_14rp3_84",
+	large: "_large_14rp3_90",
+	icon: "_icon_14rp3_1",
+	svgIcon: "_svgIcon_14rp3_102"
+};
+//#endregion
+//#region src/components/form/icon-button/IconButton.tsx
+function O({ label: e, icon: n, variant: r = "default", frame: i = !0, active: a = !1, size: o = "default", className: s, type: c = "button", disabled: l, ...u }) {
+	return /* @__PURE__ */ t("button", {
+		type: c,
+		"aria-label": e,
+		title: e,
+		"aria-pressed": a,
+		disabled: l,
+		className: [
+			D.iconButton,
+			i ? D.withFrame : D.withoutFrame,
+			r === "glassy" ? D.glassy : "",
+			a ? D.active : "",
+			o === "small" ? D.small : "",
+			o === "large" ? D.large : "",
+			s ?? ""
+		].filter(Boolean).join(" "),
+		...u,
+		children: /* @__PURE__ */ t("span", {
+			className: D.icon,
+			"aria-hidden": "true",
+			children: n
+		})
+	});
+}
+var k = {
 	passwordInputWrapper: "_passwordInputWrapper_18lit_1",
 	inputTextField: "_inputTextField_18lit_6",
 	inputTextFieldGlassy: "_inputTextFieldGlassy_18lit_18",
@@ -339,7 +431,7 @@ var w = {
 };
 //#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 }) {
+function A({ 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);
@@ -353,7 +445,7 @@ function T({ label: e, name: r, id: i, error: a, variant: o = "default", classNa
 				children: e
 			}),
 			/* @__PURE__ */ n("div", {
-				className: w.passwordInputWrapper,
+				className: k.passwordInputWrapper,
 				children: [/* @__PURE__ */ t("input", {
 					id: h,
 					name: r,
@@ -362,9 +454,9 @@ function T({ label: e, name: r, id: i, error: a, variant: o = "default", classNa
 					disabled: l,
 					autoComplete: d,
 					className: [
-						w.inputTextField,
-						o === "glassy" ? w.inputTextFieldGlassy : "",
-						a ? w.inputError : "",
+						k.inputTextField,
+						o === "glassy" ? k.inputTextFieldGlassy : "",
+						a ? k.inputError : "",
 						c ?? ""
 					].filter(Boolean).join(" "),
 					"aria-invalid": !!a,
@@ -372,25 +464,25 @@ function T({ label: e, name: r, id: i, error: a, variant: o = "default", classNa
 					...f
 				}), /* @__PURE__ */ t("button", {
 					type: "button",
-					className: w.togglePasswordButton,
+					className: k.togglePasswordButton,
 					onClick: g,
 					disabled: l,
 					"aria-label": p ? "Passwort ausblenden" : "Passwort anzeigen",
 					"aria-pressed": p,
-					children: t(p ? D : E, {})
+					children: t(p ? M : j, {})
 				})]
 			}),
 			a && /* @__PURE__ */ t("span", {
 				id: `${r}-error`,
-				className: w.errorMessage,
+				className: k.errorMessage,
 				children: a
 			})
 		]
 	});
 }
-function E() {
+function j() {
 	return /* @__PURE__ */ n("svg", {
-		className: w.icon,
+		className: k.icon,
 		xmlns: "http://www.w3.org/2000/svg",
 		viewBox: "0 0 24 24",
 		fill: "none",
@@ -402,9 +494,9 @@ function E() {
 		})]
 	});
 }
-function D() {
+function M() {
 	return /* @__PURE__ */ t("svg", {
-		className: w.icon,
+		className: k.icon,
 		xmlns: "http://www.w3.org/2000/svg",
 		viewBox: "0 0 24 24",
 		fill: "none",
@@ -412,7 +504,7 @@ function D() {
 		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 = {
+var N = {
 	inputWrapper: "_inputWrapper_3w4be_1",
 	inputTextField: "_inputTextField_3w4be_6",
 	inputTextFieldGlassy: "_inputTextFieldGlassy_3w4be_18",
@@ -427,12 +519,12 @@ var O = {
 };
 //#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(() => {
+function P({ 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([]), [O, k] = s(!1), [A, j] = s(!1), M = w.trim().match(/^(\d+)\s+(.+)$/), P = !!M, F = M?.[1], I = M?.[2], L = P && E.some((e) => e.postalCode === F && e.locality === I), R = /^\d+$/.test(w.trim()), z = w.trim().length >= 4 && R && !O, B = z && E.some((e) => e.postalCode === w.trim()), V = z && !B;
+	A && w.trim().length >= 4 && E.length, r(() => {
 		let e = w.trim();
 		if (e.length < 2) {
-			D([]), M(!1);
+			D([]), j(!1);
 			return;
 		}
 		if (C.current) {
@@ -441,7 +533,7 @@ function k({ label: e, name: a, id: c, error: l, variant: u = "default", classNa
 		}
 		let t = new AbortController();
 		async function n() {
-			A(!0);
+			k(!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");
@@ -453,12 +545,12 @@ function k({ label: e, name: a, id: c, error: l, variant: u = "default", classNa
 						postalCode: e.postalCode,
 						locality: e.name
 					}];
-				})).values()).slice(0, 10)), M(!0);
+				})).values()).slice(0, 10)), j(!0);
 			} catch (e) {
 				if (t.signal.aborted) return;
-				console.error(e), D([]), M(!0);
+				console.error(e), D([]), j(!0);
 			} finally {
-				t.signal.aborted || A(!1);
+				t.signal.aborted || k(!1);
 			}
 		}
 		let r = window.setTimeout(n, 300);
@@ -474,7 +566,7 @@ function k({ label: e, name: a, id: c, error: l, variant: u = "default", classNa
 		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 })));
+		C.current = !0, T(e.label), D([]), j(!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: "inputBlockVertical",
@@ -485,7 +577,7 @@ function k({ label: e, name: a, id: c, error: l, variant: u = "default", classNa
 				children: e
 			}),
 			/* @__PURE__ */ n("div", {
-				className: O.inputWrapper,
+				className: N.inputWrapper,
 				children: [
 					/* @__PURE__ */ t("input", {
 						id: x,
@@ -500,60 +592,60 @@ function k({ label: e, name: a, id: c, error: l, variant: u = "default", classNa
 						onChange: U,
 						onBlur: g,
 						className: [
-							O.inputTextField,
-							u === "glassy" ? O.inputTextFieldGlassy : "",
-							B || L ? O.inputValid : "",
-							V || l ? O.inputError : "",
+							N.inputTextField,
+							u === "glassy" ? N.inputTextFieldGlassy : "",
+							B || L ? N.inputValid : "",
+							V || l ? N.inputError : "",
 							d ?? ""
 						].filter(Boolean).join(" "),
 						"aria-invalid": !!l || V,
 						"aria-describedby": l ? `${a}-error` : void 0,
 						...y
 					}),
-					k && /* @__PURE__ */ t("span", {
-						className: O.loading,
+					O && /* @__PURE__ */ t("span", {
+						className: N.loading,
 						children: "Lädt…"
 					}),
 					E.length > 0 && /* @__PURE__ */ t("ul", {
-						className: O.suggestionList,
+						className: N.suggestionList,
 						children: E.map((e) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ n("button", {
 							type: "button",
-							className: O.suggestionItem,
+							className: N.suggestionItem,
 							onMouseDown: (e) => e.preventDefault(),
 							onClick: () => W(e),
 							children: [/* @__PURE__ */ t("span", { children: e.postalCode }), /* @__PURE__ */ t("span", {
-								className: O.locality,
+								className: N.locality,
 								children: e.locality
 							})]
 						}) }, e.label))
 					}),
-					j && w.trim().length >= 2 && E.length === 0 && !k && !L && !V && /* @__PURE__ */ t("div", {
-						className: O.emptyState,
+					A && w.trim().length >= 2 && E.length === 0 && !O && !L && !V && /* @__PURE__ */ t("div", {
+						className: N.emptyState,
 						children: "Keine Schweizer PLZ oder Ortschaft gefunden."
 					})
 				]
 			}),
 			B && /* @__PURE__ */ t("span", {
-				className: O.successMessage,
+				className: N.successMessage,
 				children: "Gültige Schweizer Postleitzahl"
 			}),
 			L && /* @__PURE__ */ t("span", {
-				className: O.successMessage,
+				className: N.successMessage,
 				children: "Gültige Schweizer Postleitzahl"
 			}),
 			V && /* @__PURE__ */ t("span", {
-				className: O.errorMessage,
+				className: N.errorMessage,
 				children: "Diese Schweizer Postleitzahl wurde nicht gefunden."
 			}),
 			l && /* @__PURE__ */ t("span", {
 				id: `${a}-error`,
-				className: O.errorMessage,
+				className: N.errorMessage,
 				children: l
 			})
 		]
 	});
 }
-var A = {
+var F = {
 	radioGroup: "_radioGroup_1ba3g_5",
 	optionGroup: "_optionGroup_1ba3g_17",
 	optionWrapper: "_optionWrapper_1ba3g_24",
@@ -570,43 +662,43 @@ var A = {
 };
 //#endregion
 //#region src/components/form/radiobutton/RadioButton.tsx
-function j({ label: e, name: r, options: i, error: a, variant: o = "default", disabled: s, value: c, defaultValue: l, onChange: u, ...d }) {
+function I({ label: e, name: r, options: i, error: a, variant: o = "default", disabled: s, value: c, defaultValue: l, onChange: u, ...d }) {
 	let f = c !== void 0;
 	return /* @__PURE__ */ n("fieldset", {
-		className: [A.radioGroup].filter(Boolean).join(" "),
+		className: [F.radioGroup].filter(Boolean).join(" "),
 		"aria-invalid": !!a,
 		"aria-describedby": a ? `${r}-error` : void 0,
 		children: [
 			e && /* @__PURE__ */ t("legend", {
-				className: [A.radioLegend, o === "glassy" ? "inputLabelGlassy" : "inputLabel"].filter(Boolean).join(" "),
+				className: [F.radioLegend, o === "glassy" ? "inputLabelGlassy" : "inputLabel"].filter(Boolean).join(" "),
 				children: e
 			}),
 			/* @__PURE__ */ t("div", {
-				className: A.optionGroup,
+				className: F.optionGroup,
 				children: i.map((e) => {
 					let i = f ? { checked: c === e.value } : { defaultChecked: l === e.value };
 					return /* @__PURE__ */ n("label", {
-						className: [A.optionWrapper, s ? A.optionWrapperDisabled : ""].filter(Boolean).join(" "),
+						className: [F.optionWrapper, s ? F.optionWrapperDisabled : ""].filter(Boolean).join(" "),
 						children: [/* @__PURE__ */ t("input", {
 							type: "radio",
 							name: r,
 							value: e.value,
 							disabled: s,
-							className: A.radioInput,
+							className: F.radioInput,
 							onChange: u,
 							...i,
 							...d
 						}), /* @__PURE__ */ n("span", {
 							className: [
-								A.optionButton,
-								o === "glassy" ? A.optionButtonGlassy : A.optionButtonDefault,
-								a ? A.optionButtonError : ""
+								F.optionButton,
+								o === "glassy" ? F.optionButtonGlassy : F.optionButtonDefault,
+								a ? F.optionButtonError : ""
 							].filter(Boolean).join(" "),
 							children: [/* @__PURE__ */ t("span", {
-								className: A.optionTitle,
+								className: F.optionTitle,
 								children: e.label
 							}), e.description && /* @__PURE__ */ t("span", {
-								className: A.optionDescription,
+								className: F.optionDescription,
 								children: e.description
 							})]
 						})]
@@ -615,13 +707,13 @@ function j({ label: e, name: r, options: i, error: a, variant: o = "default", di
 			}),
 			a && /* @__PURE__ */ t("span", {
 				id: `${r}-error`,
-				className: A.errorMessage,
+				className: F.errorMessage,
 				children: a
 			})
 		]
 	});
 }
-var M = {
+var L = {
 	switchWrapper: "_switchWrapper_bre5n_1",
 	switchCheckbox: "_switchCheckbox_bre5n_7",
 	switchLabel: "_switchLabel_bre5n_15",
@@ -638,51 +730,51 @@ var M = {
 };
 //#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 }) {
+function R({ 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(" "),
+		className: [L.switchWrapper, s ?? ""].filter(Boolean).join(" "),
 		children: [
 			/* @__PURE__ */ t("input", {
 				id: u,
 				name: e,
 				type: "checkbox",
 				disabled: c,
-				className: M.switchCheckbox,
+				className: L.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(" "),
+				className: [L.switchLabel, o === "glassy" ? L.switchLabelGlassy : L.switchLabelDefault].filter(Boolean).join(" "),
 				children: [/* @__PURE__ */ t("span", {
-					className: [M.switchBackground, o === "glassy" ? M.switchBackgroundGlassy : M.switchBackgroundDefault].filter(Boolean).join(" "),
+					className: [L.switchBackground, o === "glassy" ? L.switchBackgroundGlassy : L.switchBackgroundDefault].filter(Boolean).join(" "),
 					children: /* @__PURE__ */ n("span", {
-						className: M.switchButton,
+						className: L.switchButton,
 						"aria-hidden": "true",
 						children: [/* @__PURE__ */ t("span", {
-							className: M.iconChecked,
-							children: /* @__PURE__ */ t(P, {})
+							className: L.iconChecked,
+							children: /* @__PURE__ */ t(z, {})
 						}), /* @__PURE__ */ t("span", {
-							className: M.iconUnchecked,
-							children: /* @__PURE__ */ t(F, {})
+							className: L.iconUnchecked,
+							children: /* @__PURE__ */ t(B, {})
 						})]
 					})
 				}), i && /* @__PURE__ */ t("span", {
-					className: M.switchText,
+					className: L.switchText,
 					children: i
 				})]
 			}),
 			a && /* @__PURE__ */ t("span", {
 				id: `${e}-error`,
-				className: M.errorMessage,
+				className: L.errorMessage,
 				children: a
 			})
 		]
 	});
 }
-function P() {
+function z() {
 	return /* @__PURE__ */ t("svg", {
 		width: "16",
 		height: "16",
@@ -698,7 +790,7 @@ function P() {
 		})
 	});
 }
-function F() {
+function B() {
 	return /* @__PURE__ */ t("svg", {
 		width: "16",
 		height: "16",
@@ -713,7 +805,7 @@ function F() {
 		})
 	});
 }
-var I = {
+var V = {
 	inputBlockVerticalTight: "_inputBlockVerticalTight_b8zs9_1",
 	inputTextField: "_inputTextField_b8zs9_6",
 	inputTextFieldGlassy: "_inputTextFieldGlassy_b8zs9_23",
@@ -722,9 +814,9 @@ var I = {
 };
 //#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 }) {
+function H({ label: e, name: r, error: i, placeholder: a, variant: o = "default", className: s, ref: c, ...l }) {
 	return /* @__PURE__ */ n("div", {
-		className: ["inputBlockVertical", I.inputBlockVerticalTight].filter(Boolean).join(" "),
+		className: ["inputBlockVertical", V.inputBlockVerticalTight].filter(Boolean).join(" "),
 		children: [
 			/* @__PURE__ */ t("label", {
 				htmlFor: r,
@@ -737,9 +829,9 @@ function L({ label: e, name: r, error: i, placeholder: a, variant: o = "default"
 				ref: c,
 				placeholder: a,
 				className: [
-					I.inputTextField,
-					o === "glassy" ? I.inputTextFieldGlassy : "",
-					i ? I.inputError : "",
+					V.inputTextField,
+					o === "glassy" ? V.inputTextFieldGlassy : "",
+					i ? V.inputError : "",
 					s ?? ""
 				].filter(Boolean).join(" "),
 				"aria-invalid": !!i,
@@ -748,13 +840,13 @@ function L({ label: e, name: r, error: i, placeholder: a, variant: o = "default"
 			}),
 			i && /* @__PURE__ */ t("span", {
 				id: `${r}-error`,
-				className: I.errorMessage,
+				className: V.errorMessage,
 				children: i
 			})
 		]
 	});
 }
-var R = {
+var U = {
 	wrapper: "_wrapper_8acbw_1",
 	label: "_label_8acbw_7",
 	labelGlassy: "_labelGlassy_8acbw_13",
@@ -779,7 +871,7 @@ var R = {
 };
 //#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 }) {
+function W({ 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);
@@ -810,20 +902,20 @@ function z({ label: e, name: o, id: c, file: l, error: u, variant: d = "default"
 	}
 	let F = Math.round(p / (1024 * 1024));
 	return /* @__PURE__ */ n("div", {
-		className: [R.wrapper, h ?? ""].filter(Boolean).join(" "),
+		className: [U.wrapper, h ?? ""].filter(Boolean).join(" "),
 		children: [
 			/* @__PURE__ */ t("label", {
-				className: [R.label, d === "glassy" ? R.labelGlassy : ""].filter(Boolean).join(" "),
+				className: [U.label, d === "glassy" ? U.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 : ""
+					U.dropzone,
+					d === "glassy" ? U.dropzoneGlassy : "",
+					x ? U.dragOver : "",
+					u ? U.errorState : "",
+					m ? U.disabled : ""
 				].filter(Boolean).join(" "),
 				onDragOver: j,
 				onDragLeave: M,
@@ -832,7 +924,7 @@ function z({ label: e, name: o, id: c, file: l, error: u, variant: d = "default"
 					/* @__PURE__ */ t("input", {
 						id: b,
 						name: o,
-						className: R.hiddenInput,
+						className: U.hiddenInput,
 						type: "file",
 						accept: f,
 						disabled: m,
@@ -843,20 +935,20 @@ function z({ label: e, name: o, id: c, file: l, error: u, variant: d = "default"
 					}),
 					/* @__PURE__ */ t("label", {
 						htmlFor: b,
-						className: R.dropzoneContent,
+						className: U.dropzoneContent,
 						children: E ? /* @__PURE__ */ n("span", {
-							className: R.selected,
+							className: U.selected,
 							children: [D && /* @__PURE__ */ t("img", {
-								className: R.preview,
+								className: U.preview,
 								src: D,
 								alt: `Vorschau von ${E.name}`
 							}), /* @__PURE__ */ n("span", {
-								className: R.fileMeta,
+								className: U.fileMeta,
 								children: [/* @__PURE__ */ t("span", {
-									className: R.fileName,
+									className: U.fileName,
 									children: E.name
 								}), /* @__PURE__ */ n("span", {
-									className: R.fileSize,
+									className: U.fileSize,
 									children: [
 										(E.size / 1024).toFixed(0),
 										" KB ·",
@@ -866,18 +958,18 @@ function z({ label: e, name: o, id: c, file: l, error: u, variant: d = "default"
 								})]
 							})]
 						}) : /* @__PURE__ */ n("span", {
-							className: R.placeholder,
+							className: U.placeholder,
 							children: [
 								/* @__PURE__ */ t("span", {
-									className: R.big,
+									className: U.big,
 									children: "Datei hier reinziehen"
 								}),
 								/* @__PURE__ */ t("span", {
-									className: R.small,
+									className: U.small,
 									children: "…oder klicken, um auszuwählen"
 								}),
 								/* @__PURE__ */ n("span", {
-									className: R.hint,
+									className: U.hint,
 									children: [
 										"Erlaubt: ",
 										f,
@@ -891,7 +983,7 @@ function z({ label: e, name: o, id: c, file: l, error: u, variant: d = "default"
 					}),
 					E && /* @__PURE__ */ t("button", {
 						type: "button",
-						className: R.remove,
+						className: U.remove,
 						onClick: P,
 						disabled: m,
 						children: "Entfernen"
@@ -900,11 +992,11 @@ function z({ label: e, name: o, id: c, file: l, error: u, variant: d = "default"
 			}),
 			u && /* @__PURE__ */ t("span", {
 				id: `${o}-error`,
-				className: R.errorMessage,
+				className: U.errorMessage,
 				children: u
 			})
 		]
 	});
 }
 //#endregion
-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 };
+export { f as BannerHero, l as Button, m as Checkbox, g as Chip, v as DatePicker, C as Dropdown, O as IconButton, T as Link, A as Password, P as PostalCode, I as RadioButton, R as Switch, H as TextField, W as Upload };