themelia-ui 3.0.0 → 3.2.0

package/dist/choice-inputs-NwRxvmZN.js

@@ -0,0 +1,694 @@
+import "#core.css";
+import { c as e, s as t } from "./typography-DmeR05Er.js";
+import { t as n } from "./cx--CBrhWH0.js";
+import { u as r } from "./ui-provider-DpzLUD12.js";
+import { i, n as a, t as o } from "./tooltip-BPYP-jUm.js";
+import { o as s } from "./structure-CynEZ-OY.js";
+import { d as c } from "./display-a7AoX_u7.js";
+import { t as l } from "./label-HOBXAscw.js";
+import { CheckIcon as u, ChevronDownIcon as d, ChevronUpIcon as f, CircleCheckIcon as p, CircleIcon as m, InfoIcon as h, MinusIcon as g } from "lucide-react";
+import * as _ from "react";
+import { forwardRef as v, isValidElement as y, useCallback as b, useId as x, useMemo as S, useRef as C, useState as w } from "react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { Select as O } from "@base-ui/react/select";
+import { Radio as k } from "@base-ui/react/radio";
+import { RadioGroup as A } from "@base-ui/react/radio-group";
+import "#css/choice-inputs.css";
+var j = {
+	field: "choice__field___a3Vcp",
+	listRow: "choice__listRow___xuIb4",
+	row: "choice__row___1a0NE",
+	label: "choice__label___G8WMe",
+	input: "choice__input___q7iK1",
+	control: "choice__control___NmimT",
+	radio: "choice__radio___qIw7K",
+	checkbox: "choice__checkbox___2CV9G",
+	mark: "choice__mark___dfDSJ",
+	checkMark: "choice__checkMark___kQ_oh",
+	dashMark: "choice__dashMark___7GQqG",
+	dot: "choice__dot___IOV2q",
+	switch: "choice__switch___ZejHh",
+	thumb: "choice__thumb___s06gp",
+	cardGrid: "choice__cardGrid___jzAPL",
+	columns1: "choice__columns1___D6QyC",
+	columns2: "choice__columns2___JzYeW",
+	columns3: "choice__columns3___5dA4V",
+	columns4: "choice__columns4___qs3Z0",
+	card: "choice__card___pQotQ",
+	switchCard: "choice__switchCard___MSJcJ",
+	cardMark: "choice__cardMark___BNtV9",
+	cardIcon: "choice__cardIcon___FHnbH",
+	list: "choice__list___SPpSu",
+	listMarker: "choice__listMarker___mjLL0",
+	listMarkerDot: "choice__listMarkerDot___UCEgd",
+	pillGroup: "choice__pillGroup___3kp58",
+	pillGroupFullWidth: "choice__pillGroupFullWidth___lpu0o",
+	pill: "choice__pill___k7Jfx",
+	pillFullWidth: "choice__pillFullWidth___3MFR0",
+	rowDisabled: "choice__rowDisabled___EKWak",
+	rowLabel: "choice__rowLabel___BUP0L",
+	switchCardIcon: "choice__switchCardIcon___iADoS",
+	rowText: "choice__rowText___nA6jl",
+	rowControl: "choice__rowControl___27GaB",
+	description: "choice__description___O0gz9",
+	hint: "choice__hint___wMp0y",
+	info: "choice__info___iBbjH",
+	cardText: "choice__cardText___SfW9J",
+	labelLine: "choice__labelLine___lRgLI"
+}, M = _.forwardRef(function({ label: t, indeterminate: r = !1, className: i, ...a }, o) {
+	let s = _.useRef(null);
+	return _.useImperativeHandle(o, () => s.current), _.useEffect(() => {
+		s.current && (s.current.indeterminate = r);
+	}, [r]), /* @__PURE__ */ D("label", {
+		className: n("checkbox--component", j.field, e({ size: "sm" }), i),
+		children: [
+			/* @__PURE__ */ E("input", {
+				ref: s,
+				type: "checkbox",
+				"data-slot": "checkbox",
+				className: j.input,
+				...a
+			}),
+			/* @__PURE__ */ D("span", {
+				className: n(j.control, j.checkbox),
+				children: [/* @__PURE__ */ E(u, {
+					"aria-hidden": !0,
+					className: n(j.mark, j.checkMark)
+				}), /* @__PURE__ */ E(g, {
+					"aria-hidden": !0,
+					className: n(j.mark, j.dashMark)
+				})]
+			}),
+			!!t && /* @__PURE__ */ E("span", {
+				className: j.label,
+				children: t
+			})
+		]
+	});
+}), N = _.createContext({}), P = _.forwardRef(function({ label: t, className: r, name: i, ...a }, o) {
+	let s = _.useContext(N);
+	return /* @__PURE__ */ D("label", {
+		className: n("radio--component", j.field, e({ size: "sm" }), r),
+		children: [
+			/* @__PURE__ */ E("input", {
+				ref: o,
+				type: "radio",
+				"data-slot": "radio",
+				name: i ?? s.name,
+				className: j.input,
+				...a
+			}),
+			/* @__PURE__ */ E("span", {
+				className: n(j.control, j.radio),
+				children: /* @__PURE__ */ E(m, {
+					"aria-hidden": !0,
+					className: j.dot
+				})
+			}),
+			!!t && /* @__PURE__ */ E("span", {
+				className: j.label,
+				children: t
+			})
+		]
+	});
+});
+function F({ name: e, orientation: t = "vertical", className: r, children: i, ...a }) {
+	let o = _.useMemo(() => ({ name: e }), [e]);
+	return /* @__PURE__ */ E(N.Provider, {
+		value: o,
+		children: /* @__PURE__ */ E(s, {
+			role: "radiogroup",
+			"data-slot": "radio-group",
+			direction: t === "horizontal" ? "horizontal" : "vertical",
+			gap: t === "horizontal" ? "default" : "sm",
+			align: "start",
+			wrap: t === "horizontal",
+			className: n("radio-group--component", r),
+			...a,
+			children: i
+		})
+	});
+}
+//#endregion
+//#region src/components/base/choice-inputs/switch.tsx
+var I = _.forwardRef(function({ label: t, className: r, ...i }, a) {
+	return /* @__PURE__ */ D("label", {
+		className: n("switch--component", j.field, e({ size: "sm" }), r),
+		children: [
+			/* @__PURE__ */ E("input", {
+				ref: a,
+				type: "checkbox",
+				role: "switch",
+				"data-slot": "switch",
+				className: j.input,
+				...i
+			}),
+			/* @__PURE__ */ E("span", {
+				className: n(j.control, j.switch),
+				children: /* @__PURE__ */ E("span", { className: j.thumb })
+			}),
+			!!t && /* @__PURE__ */ E("span", {
+				className: j.label,
+				children: t
+			})
+		]
+	});
+}), L = {
+	placeholder: "Select an option",
+	clear: "Clear selection"
+}, R = {
+	trigger: "select__trigger___z7ds0",
+	value: "select__value___FKzbX",
+	triggerIcon: "select__triggerIcon___Y3UQR",
+	positioner: "select__positioner___lIuFM",
+	popup: "select__popup___mg1JV",
+	group: "select__group___wCVW4",
+	item: "select__item___dvbLt",
+	itemText: "select__itemText___hc7OU",
+	optionIcon: "select__optionIcon___znn1F",
+	optionText: "select__optionText___If84j",
+	optionDescription: "select__optionDescription___aAfRR",
+	indicator: "select__indicator___ACKlr",
+	label: "select__label___cG01Q",
+	separator: "select__separator___R2gDY",
+	scrollArrow: "select__scrollArrow___1BObE",
+	scrollArrowUp: "select__scrollArrowUp___lqMbh",
+	scrollArrowDown: "select__scrollArrowDown____ZHhB"
+};
+//#endregion
+//#region src/components/base/choice-inputs/select-popup.tsx
+function z(e) {
+	return typeof e == "string" || typeof e == "number" || typeof e == "bigint";
+}
+function B({ container: e, className: t, children: i, side: a = "bottom", sideOffset: o = 4, align: s = "start", alignOffset: c = 0, alignItemWithTrigger: l = !1, ...u }) {
+	let d = r(e);
+	return /* @__PURE__ */ E(O.Portal, {
+		container: d,
+		children: /* @__PURE__ */ E(O.Positioner, {
+			side: a,
+			sideOffset: o,
+			align: s,
+			alignOffset: c,
+			alignItemWithTrigger: l,
+			className: R.positioner,
+			children: /* @__PURE__ */ D(O.Popup, {
+				"data-slot": "select-content",
+				"data-align-trigger": l,
+				className: n("select-popup--component", R.popup, t),
+				...u,
+				children: [
+					/* @__PURE__ */ E(re, {}),
+					/* @__PURE__ */ E(O.List, { children: i }),
+					/* @__PURE__ */ E(ie, {})
+				]
+			})
+		})
+	});
+}
+function V({ className: e, ...t }) {
+	return /* @__PURE__ */ E(O.Group, {
+		"data-slot": "select-group",
+		className: n("select-popup--group", R.group, e),
+		...t
+	});
+}
+function ee({ className: r, children: i, ...a }) {
+	return /* @__PURE__ */ D(O.Item, {
+		"data-slot": "select-item",
+		className: n("select-popup--item", R.item, e({ size: "sm" }), r),
+		...a,
+		children: [/* @__PURE__ */ E(O.ItemText, {
+			className: R.itemText,
+			children: z(i) ? /* @__PURE__ */ E(t, {
+				tag: "span",
+				size: "inherit",
+				lineHeight: "tight",
+				children: i
+			}) : i
+		}), /* @__PURE__ */ E(O.ItemIndicator, {
+			className: R.indicator,
+			children: /* @__PURE__ */ E(u, { "aria-hidden": !0 })
+		})]
+	});
+}
+function te({ className: t, children: r, ...i }) {
+	return /* @__PURE__ */ E(O.GroupLabel, {
+		"data-slot": "select-label",
+		className: n("select-popup--label", R.label, e({
+			size: "xs",
+			weight: "medium"
+		}), t),
+		...i,
+		children: r
+	});
+}
+function ne({ className: e, ...t }) {
+	return /* @__PURE__ */ E(O.Separator, {
+		"data-slot": "select-separator",
+		className: n("select-popup--separator", R.separator, e),
+		...t
+	});
+}
+function re(e) {
+	return /* @__PURE__ */ E(O.ScrollUpArrow, {
+		className: n(R.scrollArrow, R.scrollArrowUp),
+		...e,
+		children: /* @__PURE__ */ E(f, { "aria-hidden": !0 })
+	});
+}
+function ie(e) {
+	return /* @__PURE__ */ E(O.ScrollDownArrow, {
+		className: n(R.scrollArrow, R.scrollArrowDown),
+		...e,
+		children: /* @__PURE__ */ E(d, { "aria-hidden": !0 })
+	});
+}
+var ae = O.Root, H = O.Trigger, U = O.Value, W = O.Icon, G = "__ui_select_clear__", K = "__ui_select_option__:", oe = (e) => e === "" ? G : `${K}${e}`, q = (e) => e === "" || e == null ? null : `${K}${e}`;
+function se(e) {
+	if (e !== null && e !== G) return e.startsWith(K) ? e.slice(21) : void 0;
+}
+function ce({ option: e }) {
+	return /* @__PURE__ */ D(T, { children: [e.icon != null && /* @__PURE__ */ E("span", {
+		"aria-hidden": !0,
+		className: n("select--option-icon", R.optionIcon),
+		children: e.icon
+	}), /* @__PURE__ */ D("span", {
+		className: n("select--option-text", R.optionText),
+		children: [/* @__PURE__ */ E(t, {
+			tag: "span",
+			size: "inherit",
+			lineHeight: "tight",
+			weight: e.description ? "medium" : "normal",
+			truncate: !0,
+			className: "select--option-label",
+			children: e.label
+		}), !!e.description && /* @__PURE__ */ E(t, {
+			tag: "span",
+			size: "xs",
+			type: "secondary",
+			className: n("select--option-description", R.optionDescription),
+			children: e.description
+		})]
+	})] });
+}
+var le = v(function(e, r) {
+	let i = Object.prototype.hasOwnProperty.call(e, "value"), { options: a, placeholder: o, strings: s, allowClear: c = !1, invalid: l, value: u, defaultValue: f, onValueChange: p, disabled: m, readOnly: h, required: g, name: _, form: v, autoComplete: y, inputRef: x, id: C, open: w, defaultOpen: T, onOpenChange: k, modal: A, highlightItemOnHover: j, side: M, align: N, alignItemWithTrigger: P, renderOption: F, renderValue: I, className: z, contentClassName: te, onFocus: ne, onBlur: re, "aria-label": ie, "aria-labelledby": ae, "aria-describedby": H, "aria-invalid": U } = e, W = {
+		...L,
+		...s,
+		...o ? { placeholder: o } : null
+	}, K = S(() => {
+		let e = a.map((e) => ({
+			option: e,
+			internalValue: oe(e.value)
+		}));
+		return c && !e.some((e) => e.internalValue === G) && e.unshift({
+			internalValue: G,
+			option: {
+				value: "",
+				label: W.placeholder
+			}
+		}), e;
+	}, [
+		c,
+		a,
+		W.placeholder
+	]), le = S(() => new Map(K.map((e) => [e.internalValue, e.option])), [K]), J = b((e) => p?.(se(e)), [p]), Y = b((e) => se(e) ?? "", []);
+	return /* @__PURE__ */ D(O.Root, {
+		onValueChange: J,
+		disabled: m,
+		readOnly: h,
+		required: g,
+		name: _,
+		form: v,
+		autoComplete: y,
+		inputRef: x,
+		id: C,
+		open: w,
+		defaultOpen: T,
+		onOpenChange: k,
+		modal: A,
+		highlightItemOnHover: j,
+		defaultValue: q(f),
+		itemToStringValue: Y,
+		...i ? { value: q(u) } : {},
+		children: [/* @__PURE__ */ D(O.Trigger, {
+			ref: r,
+			"data-field-control": "",
+			"aria-label": ie,
+			"aria-labelledby": ae,
+			"aria-describedby": H,
+			"aria-invalid": l || U || void 0,
+			onFocus: ne,
+			onBlur: re,
+			className: n("select--component", R.trigger, z),
+			children: [/* @__PURE__ */ E(O.Value, {
+				className: n("select--value", R.value),
+				children: (e) => {
+					let n = e, r = n && n !== G ? le.get(n) : void 0, i = I ? I(r) : r?.label ?? W.placeholder;
+					return typeof i == "string" ? /* @__PURE__ */ E(t, {
+						tag: "span",
+						size: "inherit",
+						lineHeight: "tight",
+						truncate: !0,
+						children: i
+					}) : i;
+				}
+			}), /* @__PURE__ */ E(O.Icon, {
+				className: R.triggerIcon,
+				children: /* @__PURE__ */ E(d, { "aria-hidden": !0 })
+			})]
+		}), /* @__PURE__ */ E(B, {
+			side: M,
+			align: N,
+			alignItemWithTrigger: P,
+			className: n("select--content", te),
+			children: /* @__PURE__ */ E(V, {
+				className: "select--group",
+				children: K.map(({ internalValue: e, option: t }) => /* @__PURE__ */ E(ee, {
+					value: e,
+					label: t.label,
+					disabled: t.disabled,
+					className: "select--item",
+					children: F ? F(t) : /* @__PURE__ */ E(ce, { option: t })
+				}, e))
+			})
+		})]
+	});
+}), J = {
+	1: j.columns1,
+	2: j.columns2,
+	3: j.columns3,
+	4: j.columns4
+};
+//#endregion
+//#region src/components/base/choice-inputs/partials/choice-icon.tsx
+function Y(e) {
+	return typeof e == "string" || typeof e == "number" || typeof e == "bigint";
+}
+function X(e) {
+	return e ? y(e) ? e : typeof e == "function" || typeof e == "object" && e && "$$typeof" in e ? /* @__PURE__ */ E(e, { "aria-hidden": !0 }) : e : null;
+}
+//#endregion
+//#region src/components/base/choice-inputs/partials/choice-parts.tsx
+function ue({ option: r, weight: s = "medium", className: l, descriptionId: u }) {
+	let d = Y(r.label) ? /* @__PURE__ */ E(t, {
+		tag: "span",
+		size: "inherit",
+		weight: s,
+		lineHeight: "tight",
+		children: r.label
+	}) : r.label;
+	return r.tooltip == null ? /* @__PURE__ */ E("span", {
+		className: n("choice-label--component", l),
+		children: d
+	}) : /* @__PURE__ */ D("span", {
+		className: n(j.labelLine, e({ size: "sm" }), l),
+		children: [
+			d,
+			/* @__PURE__ */ D(o, { children: [/* @__PURE__ */ E(i, { render: /* @__PURE__ */ E("span", {
+				"data-hit-area": !0,
+				"aria-hidden": !0,
+				className: j.info,
+				children: /* @__PURE__ */ E(h, {})
+			}) }), /* @__PURE__ */ E(a, { children: r.tooltip })] }),
+			!!u && /* @__PURE__ */ E(c, {
+				id: u,
+				children: r.tooltip
+			})
+		]
+	});
+}
+function de({ children: e }) {
+	return /* @__PURE__ */ E("span", {
+		className: n("choice-card-text--component", j.cardText),
+		children: e
+	});
+}
+function Z({ children: e }) {
+	return e == null || e === !1 ? null : Y(e) ? /* @__PURE__ */ E(t, {
+		tag: "span",
+		size: "xs",
+		type: "secondary",
+		className: n("choice-description--component", j.description),
+		children: e
+	}) : /* @__PURE__ */ E(T, { children: e });
+}
+//#endregion
+//#region src/components/base/choice-inputs/partials/radio-option-group.tsx
+var fe = v(function({ options: e, value: t, defaultValue: r, onValueChange: i, name: a, layout: o, columns: s = 3, invalid: c, disabled: l, hook: u, className: d, "aria-label": f, "aria-labelledby": h, "aria-describedby": g }, _) {
+	let v = x(), y = o === "cards";
+	return /* @__PURE__ */ E(A, {
+		ref: _,
+		value: t,
+		defaultValue: r,
+		onValueChange: (e) => e != null && i?.(String(e)),
+		name: a,
+		disabled: l,
+		"aria-invalid": c || void 0,
+		"aria-label": f,
+		"aria-labelledby": h,
+		"aria-describedby": g,
+		"data-disabled": l || void 0,
+		className: n(`${u}--component`, y ? [j.cardGrid, J[s]] : j.list, d),
+		children: e.map((e) => {
+			let t = `${v}-${e.value}-note`, r = /* @__PURE__ */ E(ue, {
+				option: e,
+				weight: y ? "semibold" : void 0,
+				descriptionId: t
+			});
+			return /* @__PURE__ */ D(k.Root, {
+				value: e.value,
+				disabled: l || e.disabled,
+				"aria-invalid": c || void 0,
+				"aria-describedby": e.tooltip == null ? void 0 : t,
+				className: n(`${u}--option`, y ? j.card : j.listRow),
+				children: [
+					y ? /* @__PURE__ */ E(k.Indicator, { render: /* @__PURE__ */ E(p, {
+						"aria-hidden": !0,
+						className: j.cardMark
+					}) }) : /* @__PURE__ */ E("span", {
+						"aria-hidden": !0,
+						className: j.listMarker,
+						children: /* @__PURE__ */ E(m, { className: j.listMarkerDot })
+					}),
+					e.icon != null && /* @__PURE__ */ E("span", {
+						className: j.cardIcon,
+						children: X(e.icon)
+					}),
+					y ? /* @__PURE__ */ D(de, { children: [r, /* @__PURE__ */ E(Z, { children: e.description })] }) : /* @__PURE__ */ D("span", {
+						className: j.rowText,
+						children: [r, /* @__PURE__ */ E(Z, { children: e.description })]
+					})
+				]
+			}, e.value);
+		})
+	});
+}), pe = v(function(e, t) {
+	return /* @__PURE__ */ E(fe, {
+		ref: t,
+		...e,
+		layout: "cards",
+		hook: "card-radio-group"
+	});
+}), me = v(function({ options: e, value: t, defaultValue: r, onValueChange: i, name: a, columns: o = 3, invalid: s, disabled: c, className: l, "aria-label": u, "aria-labelledby": d, "aria-describedby": f }, m) {
+	let h = x(), g = t !== void 0, [_, v] = w(r ?? []), y = S(() => g ? t ?? [] : _, [
+		_,
+		g,
+		t
+	]), C = b((t) => {
+		if (c || e.find((e) => e.value === t)?.disabled) return;
+		let n = y.includes(t) ? y.filter((e) => e !== t) : [...y, t];
+		g || v(n), i?.(n);
+	}, [
+		c,
+		e,
+		y,
+		g,
+		i
+	]);
+	return /* @__PURE__ */ E("div", {
+		ref: m,
+		role: "group",
+		"aria-invalid": s || void 0,
+		"aria-label": u,
+		"aria-labelledby": d,
+		"aria-describedby": f,
+		"aria-disabled": c || void 0,
+		className: n("card-checkbox-group--component", j.cardGrid, J[o], l),
+		children: e.map((e) => {
+			let t = y.includes(e.value), r = `${h}-${e.value}-note`;
+			return /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("input", {
+				type: "hidden",
+				name: a ? `${a}[]` : void 0,
+				value: e.value,
+				"aria-hidden": "true",
+				hidden: !0,
+				disabled: !(a && t)
+			}), /* @__PURE__ */ D("button", {
+				type: "button",
+				"aria-pressed": t,
+				"aria-invalid": s || void 0,
+				"aria-describedby": e.tooltip == null ? void 0 : r,
+				"data-selected": t,
+				disabled: c || e.disabled,
+				onClick: () => C(e.value),
+				className: n("card-checkbox-group--option", j.card),
+				children: [
+					t && /* @__PURE__ */ E(p, {
+						"aria-hidden": !0,
+						className: j.cardMark
+					}),
+					e.icon != null && /* @__PURE__ */ E("span", {
+						className: j.cardIcon,
+						children: X(e.icon)
+					}),
+					/* @__PURE__ */ D(de, { children: [/* @__PURE__ */ E(ue, {
+						option: e,
+						descriptionId: r
+					}), /* @__PURE__ */ E(Z, { children: e.description })] })
+				]
+			})] }, e.value);
+		})
+	});
+}), he = v(function(e, t) {
+	return /* @__PURE__ */ E(fe, {
+		ref: t,
+		...e,
+		layout: "list",
+		hook: "list-radio-group"
+	});
+});
+//#endregion
+//#region src/components/base/choice-inputs/pill-radio-group.tsx
+function Q(e) {
+	return Y(e) ? !0 : Array.isArray(e) ? e.some(Q) : y(e) && Q(e.props.children);
+}
+var ge = v(function({ options: t, value: r, onValueChange: i, allowClear: a = !1, fullWidth: o = !1, name: s, invalid: c, disabled: l, className: u, "aria-label": d, "aria-labelledby": f, "aria-describedby": p }, m) {
+	let h = C(null), g = (e) => {
+		h.current = e, typeof m == "function" ? m(e) : m && (m.current = e);
+	}, _ = t.filter((e) => !l && !e.disabled), v = _.find((e) => e.value === r)?.value ?? _[0]?.value, y = (e, t) => {
+		let n = h.current ? getComputedStyle(h.current).direction === "rtl" : !1, a = _.findIndex((e) => e.value === t), o = e.key === "ArrowDown" || e.key === (n ? "ArrowLeft" : "ArrowRight") ? 1 : e.key === "ArrowUp" || e.key === (n ? "ArrowRight" : "ArrowLeft") ? -1 : 0, s = e.key === "Home" ? _[0] : e.key === "End" ? _.at(-1) : o !== 0 && _.length > 0 ? _[(a + o + _.length) % _.length] : void 0;
+		s && (e.preventDefault(), s.value !== r && i(s.value), h.current?.querySelector(`[data-value="${CSS.escape(s.value)}"]`)?.focus());
+	}, x = b((e) => {
+		if (e === r) {
+			a && i(null);
+			return;
+		}
+		i(e);
+	}, [
+		a,
+		i,
+		r
+	]);
+	return /* @__PURE__ */ D("div", {
+		ref: g,
+		role: "radiogroup",
+		"data-name": s,
+		"aria-invalid": c || void 0,
+		"aria-label": d,
+		"aria-labelledby": f,
+		"aria-describedby": p,
+		"data-disabled": l || void 0,
+		className: n("pill-radio-group--component", j.pillGroup, o && j.pillGroupFullWidth, u),
+		children: [t.map((t) => {
+			let i = t.value === r;
+			return /* @__PURE__ */ D("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": i,
+				"data-value": t.value,
+				tabIndex: t.value === v ? 0 : -1,
+				onKeyDown: (e) => y(e, t.value),
+				"aria-label": Q(t.label) ? void 0 : t.value,
+				disabled: l || t.disabled,
+				onClick: () => x(t.value),
+				className: n("pill-radio-group--option", j.pill, o && j.pillFullWidth, e({
+					size: "sm",
+					weight: "medium"
+				})),
+				children: [X(t.icon), t.label]
+			}, t.value);
+		}), s !== void 0 && r != null && /* @__PURE__ */ E("input", {
+			type: "hidden",
+			name: s,
+			value: r,
+			disabled: l
+		})]
+	});
+}), $ = v(function({ label: e, description: r, hint: i, icon: a, kind: o = "switch", surface: s = "row", value: c, defaultValue: u, onValueChange: d, disabled: f = !1, invalid: p = !1, name: m, uncheckedValue: h, controlPosition: g = "trailing", className: _ }, v) {
+	let y = c !== void 0, [S, C] = w(u ?? !1), T = y ? c ?? !1 : S, O = x(), k = r == null ? void 0 : `${O}-description`, A = s === "card", N = m && h !== void 0, P = N ? void 0 : m, F = b((e) => {
+		f || (y || C(e), d?.(e));
+	}, [
+		f,
+		y,
+		d
+	]), L = (e) => {
+		e.target.closest("label, [role=\"switch\"], input[type=\"checkbox\"]") || F(!T);
+	}, R = E(o === "switch" ? I : M, {
+		id: O,
+		name: P,
+		checked: T,
+		onChange: (e) => F(e.target.checked),
+		disabled: f,
+		"aria-invalid": p || void 0,
+		"aria-describedby": k
+	});
+	return /* @__PURE__ */ D("div", {
+		ref: v,
+		"data-checked": A ? T : void 0,
+		"data-disabled": A && f || void 0,
+		"data-invalid": A && p || void 0,
+		onClick: L,
+		className: n(A ? "switch-card--component" : "toggle-field--component", j.row, A && j.switchCard, f && j.rowDisabled, _),
+		children: [
+			N && /* @__PURE__ */ E("input", {
+				type: "hidden",
+				name: m,
+				value: T ? "1" : h
+			}),
+			g === "leading" && /* @__PURE__ */ E("div", {
+				className: j.rowControl,
+				children: R
+			}),
+			a != null && /* @__PURE__ */ E("span", {
+				className: j.switchCardIcon,
+				children: X(a)
+			}),
+			/* @__PURE__ */ D("div", {
+				className: j.rowText,
+				children: [
+					/* @__PURE__ */ E(l, {
+						htmlFor: O,
+						className: j.rowLabel,
+						children: e
+					}),
+					r != null && /* @__PURE__ */ E("span", {
+						id: k,
+						children: /* @__PURE__ */ E(Z, { children: r })
+					}),
+					i != null && /* @__PURE__ */ E(t, {
+						tag: "span",
+						size: "xs",
+						type: "secondary",
+						className: j.hint,
+						children: i
+					})
+				]
+			}),
+			g === "trailing" && /* @__PURE__ */ E("div", {
+				className: j.rowControl,
+				children: R
+			})
+		]
+	});
+}), _e = v(function(e, t) {
+	return /* @__PURE__ */ E($, {
+		ref: t,
+		...e,
+		kind: "switch",
+		surface: "card",
+		uncheckedValue: "0"
+	});
+});
+//#endregion
+export { L as _, me as a, F as b, W as c, ee as d, te as f, U as g, H as h, he as i, B as l, ae as m, $ as n, pe as o, ne as p, ge as r, le as s, _e as t, V as u, I as v, M as x, P as y };