@vellira-ui/react 2.22.5 → 2.23.0

package/dist/index.js

@@ -3,21 +3,21 @@ import l from "clsx";
 import { createPortal as u } from "react-dom";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 import { FloatingPortal as m, arrow as h, autoUpdate as g, flip as _, offset as v, shift as y, size as b, useFloating as x, useFocus as S, useHover as C, useInteractions as w } from "@floating-ui/react";
-import { useControllableState as T, useKeyboardNavigation as ee, useTabsKeyboard as E } from "@vellira-ui/core";
-import { Check as D, ChevronDown as O, Close as k } from "@vellira-ui/icons";
-import A from "focus-trap-react";
+import { useControllableState as T, useKeyboardNavigation as E, useTabsKeyboard as D } from "@vellira-ui/core";
+import { Check as O, ChevronDown as k, Close as A } from "@vellira-ui/icons";
+import j from "focus-trap-react";
 //#region src/utils/cn.ts
-var j = (...e) => l(e), M = ({ children: e }) => {
+var M = (...e) => l(e), N = ({ children: e }) => {
 	let [t, n] = c(!1);
 	if (i(() => {
 		n(!0);
 	}, []), !t) return null;
 	let r = document.getElementById("overlay-root") ?? document.body;
 	return r ? u(e, r) : null;
-}, N = {
+}, P = {
 	dropdown: "_dropdown_6pgxt_1",
 	dropdownIn: "_dropdownIn_6pgxt_1"
-}, P = t(({ children: e, floatingStyles: t, menuId: n, labelledById: r, label: i, activeDescendantId: a, onKeyDown: o, className: s }, c) => /* @__PURE__ */ f(M, { children: /* @__PURE__ */ f("ul", {
+}, F = t(({ children: e, floatingStyles: t, menuId: n, labelledById: r, label: i, activeDescendantId: a, onKeyDown: o, className: s }, c) => /* @__PURE__ */ f(N, { children: /* @__PURE__ */ f("ul", {
 	ref: c,
 	id: n,
 	role: "menu",
@@ -27,13 +27,13 @@ var j = (...e) => l(e), M = ({ children: e }) => {
 	"aria-activedescendant": a,
 	onKeyDown: o,
 	style: t,
-	className: j(N.dropdown, s),
+	className: M(P.dropdown, s),
 	children: e
 }) }));
-P.displayName = "DropdownContent";
+F.displayName = "DropdownContent";
 //#endregion
 //#region src/hooks/useFloatingPosition.ts
-var F = (e) => {
+var I = (e) => {
 	let [t, n] = c(() => typeof window > "u" || typeof window.matchMedia != "function" || !e ? !1 : window.matchMedia(`(max-width: ${e}px)`).matches);
 	return i(() => {
 		if (typeof window > "u" || typeof window.matchMedia != "function" || !e) return;
@@ -42,8 +42,8 @@ var F = (e) => {
 			t.removeEventListener("change", r);
 		};
 	}, [e]), t;
-}, te = ({ open: e, onOpenChange: t, placement: n = "bottom-start", strategy: r = "fixed", matchTriggerWidth: a = !1, mobileSheetBreakpoint: s, middleware: c = [] } = {}) => {
-	let l = F(s), { refs: u, floatingStyles: d, update: f, context: p, middlewareData: m, placement: h } = x({
+}, ee = ({ open: e, onOpenChange: t, placement: n = "bottom-start", strategy: r = "fixed", matchTriggerWidth: a = !1, mobileSheetBreakpoint: s, middleware: c = [] } = {}) => {
+	let l = I(s), { refs: u, floatingStyles: d, update: f, context: p, middlewareData: m, placement: h } = x({
 		open: e,
 		onOpenChange: t,
 		placement: n,
@@ -76,7 +76,7 @@ var F = (e) => {
 		setFloatingRef: u.setFloating,
 		updatePosition: f
 	};
-}, I = (e, t, n = !0) => {
+}, L = (e, t, n = !0) => {
 	let r = s(e);
 	r.current = e;
 	let a = s(t);
@@ -88,11 +88,11 @@ var F = (e) => {
 		};
 		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
 	}, [n]);
-}, L = { group: "_group_1yomt_1" }, R = ({ label: e }) => /* @__PURE__ */ f("li", {
+}, R = { group: "_group_1yomt_1" }, z = ({ label: e }) => /* @__PURE__ */ f("li", {
 	role: "presentation",
-	className: L.group,
+	className: R.group,
 	children: e
-}), z = {
+}), B = {
 	item: "_item_t87eq_1",
 	disabled: "_disabled_t87eq_18",
 	active: "_active_t87eq_28",
@@ -103,7 +103,7 @@ var F = (e) => {
 	"itemText--truncate": "_itemText--truncate_t87eq_74",
 	"itemText--wrap": "_itemText--wrap_t87eq_79",
 	"itemText--nowrap": "_itemText--nowrap_t87eq_83"
-}, B = ({ id: e, children: t, label: n, icon: r, danger: i, disabled: a, active: o, onClick: s, onMouseEnter: c, shortcut: l, textWrap: u = "truncate", className: d }) => {
+}, V = ({ id: e, children: t, label: n, icon: r, danger: i, disabled: a, active: o, onClick: s, onMouseEnter: c, shortcut: l, textWrap: u = "truncate", className: d }) => {
 	let m = t || n;
 	return /* @__PURE__ */ p("li", {
 		id: e,
@@ -114,47 +114,47 @@ var F = (e) => {
 		"data-danger": i || void 0,
 		onClick: a ? void 0 : s,
 		onMouseEnter: a ? void 0 : c,
-		className: j(z.item, {
-			[z.active]: o,
-			[z.disabled]: a,
-			[z.danger]: i
+		className: M(B.item, {
+			[B.active]: o,
+			[B.disabled]: a,
+			[B.danger]: i
 		}, d),
 		children: [
 			r && /* @__PURE__ */ f("span", {
 				"aria-hidden": "true",
-				className: z.itemIcon,
+				className: B.itemIcon,
 				children: r
 			}),
 			m && /* @__PURE__ */ f("span", {
-				className: j(z.itemText, z[`itemText--${u}`]),
+				className: M(B.itemText, B[`itemText--${u}`]),
 				children: m
 			}),
 			l && /* @__PURE__ */ f("span", {
-				className: z.itemShortcut,
+				className: B.itemShortcut,
 				children: l
 			})
 		]
 	});
-}, V = { group: "_group_ts4nb_1" }, H = () => /* @__PURE__ */ f("li", {
+}, H = { group: "_group_ts4nb_1" }, U = () => /* @__PURE__ */ f("li", {
 	role: "separator",
-	className: V.separator,
+	className: H.separator,
 	"aria-hidden": "true"
-}), U = {
+}), W = {
 	button: "_button_ii6sx_1",
 	disabled: "_disabled_ii6sx_16",
 	iconLeft: "_iconLeft_ii6sx_27",
 	arrow: "_arrow_ii6sx_39",
 	iconOnly: "_iconOnly_ii6sx_42",
 	open: "_open_ii6sx_75"
-}, ne = t(({ children: e, isOpen: t, icon: n, arrowIcon: r, showArrow: i = !0, rotateAngle: a = 90, label: o, className: s, ...c }, l) => {
-	let u = !!n, d = !!e, m = u && !d, h = i && d, g = r ?? /* @__PURE__ */ f(O, {}), _ = m ? o ?? "Open menu" : void 0;
+}, te = t(({ children: e, isOpen: t, icon: n, arrowIcon: r, showArrow: i = !0, rotateAngle: a = 90, label: o, className: s, ...c }, l) => {
+	let u = !!n, d = !!e, m = u && !d, h = i && d, g = r ?? /* @__PURE__ */ f(k, {}), _ = m ? o ?? "Open menu" : void 0;
 	return /* @__PURE__ */ p("button", {
 		...c,
 		ref: l,
 		type: "button",
-		className: j(U.button, {
-			[U.disabled]: c.disabled,
-			[U.iconOnly]: m
+		className: M(W.button, {
+			[W.disabled]: c.disabled,
+			[W.iconOnly]: m
 		}, s),
 		"aria-label": _,
 		"aria-expanded": t,
@@ -163,57 +163,57 @@ var F = (e) => {
 		children: [
 			u && /* @__PURE__ */ f("span", {
 				"aria-hidden": "true",
-				className: U.iconLeft,
+				className: W.iconLeft,
 				children: n
 			}),
 			e,
 			h && /* @__PURE__ */ f("span", {
 				"aria-hidden": "true",
-				className: j(U.arrow, { [U.open]: t }),
+				className: M(W.arrow, { [W.open]: t }),
 				children: g
 			})
 		]
 	});
 });
-ne.displayName = "DropdownTrigger";
+te.displayName = "DropdownTrigger";
 //#endregion
 //#region src/components/Dropdown/types.ts
-var re = (e) => e.type !== "group" && e.type !== "separator", W = (e) => e.type === "group", ie = (e) => e.type === "separator", ae = { wrapper: "_wrapper_14ue8_1" }, oe = ({ label: e, icon: t, trigger: n, items: r = [], onSelect: i, className: o, disabled: l, rotateAngle: u = 90, placement: d, matchTriggerWidth: m, textWrap: h, showArrow: g = !0, arrowIcon: _ }) => {
-	let [v, y] = c(!1), [b, x] = c(-1), S = s(null), C = s(null), w = a(), T = `${w}-trigger`, { floatingStyles: E, setRef: D, setFloatingRef: O } = te({
+var ne = (e) => e.type !== "group" && e.type !== "separator", G = (e) => e.type === "group", re = (e) => e.type === "separator", ie = { wrapper: "_wrapper_14ue8_1" }, ae = ({ label: e, icon: t, trigger: n, items: r = [], onSelect: i, className: o, disabled: l, rotateAngle: u = 90, placement: d, matchTriggerWidth: m, textWrap: h, showArrow: g = !0, arrowIcon: _ }) => {
+	let [v, y] = c(!1), [b, x] = c(-1), S = s(null), C = s(null), w = a(), T = `${w}-trigger`, { floatingStyles: D, setRef: O, setFloatingRef: k } = ee({
 		placement: d,
 		matchTriggerWidth: m,
 		mobileSheetBreakpoint: 640
-	}), k = r.filter(re), A = v && b >= 0 ? `${w}-item-${b}` : void 0, M = () => k.findIndex((e) => !e.disabled), N = () => {
+	}), A = r.filter(ne), j = v && b >= 0 ? `${w}-item-${b}` : void 0, N = () => A.findIndex((e) => !e.disabled), P = () => {
 		l || y((e) => {
 			let t = !e;
-			return x(t ? M() : -1), t;
+			return x(t ? N() : -1), t;
 		});
-	}, F = () => {
+	}, I = () => {
 		y(!1), x(-1);
-	}, L = () => {
-		F(), S.current?.focus();
-	}, { onKeyDown: z } = ee({
+	}, R = () => {
+		I(), S.current?.focus();
+	}, { onKeyDown: B } = E({
 		activeIndex: b,
 		setActiveIndex: x,
-		items: k,
+		items: A,
 		isOpen: v,
-		onOpen: N,
+		onOpen: P,
 		onSelect: () => {
-			let e = k[b];
-			!e || e.disabled || (i?.(e.value), L());
+			let e = A[b];
+			!e || e.disabled || (i?.(e.value), R());
 		},
-		onClose: L
+		onClose: R
 	});
-	I([S, C], () => F(), v);
-	let V = (e) => {
-		S.current = e, D(e);
-	}, U = (e) => {
-		C.current = e, O(e), e?.focus();
+	L([S, C], () => I(), v);
+	let H = (e) => {
+		S.current = e, O(e);
+	}, W = (e) => {
+		C.current = e, k(e), e?.focus();
 	};
 	return /* @__PURE__ */ p("div", {
-		className: j(ae.wrapper, o),
-		children: [/* @__PURE__ */ f(ne, {
-			ref: V,
+		className: M(ie.wrapper, o),
+		children: [/* @__PURE__ */ f(te, {
+			ref: H,
 			id: T,
 			isOpen: v,
 			disabled: l,
@@ -222,32 +222,32 @@ var re = (e) => e.type !== "group" && e.type !== "separator", W = (e) => e.type
 			showArrow: g,
 			arrowIcon: _,
 			rotateAngle: u,
-			onClick: N,
-			onKeyDown: z,
+			onClick: P,
+			onKeyDown: B,
 			"aria-expanded": v,
 			"aria-haspopup": "menu",
 			...v && { "aria-controls": w },
 			children: n
-		}), v && /* @__PURE__ */ f(P, {
-			ref: U,
-			floatingStyles: E,
+		}), v && /* @__PURE__ */ f(F, {
+			ref: W,
+			floatingStyles: D,
 			menuId: w,
 			labelledById: n ? T : void 0,
 			label: n ? void 0 : e,
-			activeDescendantId: A,
-			onKeyDown: z,
+			activeDescendantId: j,
+			onKeyDown: B,
 			children: r.map((e, t) => {
-				if (W(e)) return /* @__PURE__ */ f(R, { label: e.label }, `group-${e.label}`);
-				if (ie(e)) return /* @__PURE__ */ f(H, {}, `separator-${t}`);
-				if (re(e)) {
-					let t = k.findIndex((t) => t === e);
-					return /* @__PURE__ */ f(B, {
+				if (G(e)) return /* @__PURE__ */ f(z, { label: e.label }, `group-${e.label}`);
+				if (re(e)) return /* @__PURE__ */ f(U, {}, `separator-${t}`);
+				if (ne(e)) {
+					let t = A.findIndex((t) => t === e);
+					return /* @__PURE__ */ f(V, {
 						id: `${w}-item-${t}`,
 						...e,
 						active: b === t,
 						textWrap: e.textWrap || h,
 						onClick: () => {
-							e.disabled || (i?.(e.value), L());
+							e.disabled || (i?.(e.value), R());
 						},
 						onMouseEnter: () => {
 							t < 0 || e.disabled || x(t);
@@ -258,14 +258,14 @@ var re = (e) => e.type !== "group" && e.type !== "separator", W = (e) => e.type
 			})
 		})]
 	});
-}, se = e(void 0), G = () => {
-	let e = r(se);
+}, oe = e(void 0), se = () => {
+	let e = r(oe);
 	if (e === void 0) throw Error("Modal compound components must be used inside Modal");
 	return e;
 };
-se.displayName = "ModalContext";
+oe.displayName = "ModalContext";
 var ce = { modalBody: "_modalBody_iv33a_1" }, le = ({ children: e }) => {
-	let { descriptionId: t } = G();
+	let { descriptionId: t } = se();
 	return /* @__PURE__ */ f("div", {
 		id: t,
 		className: ce.modalBody,
@@ -288,7 +288,7 @@ var me = {
 	modalHeaderTitle: "_modalHeaderTitle_155d7_8",
 	modalHeaderCloseButton: "_modalHeaderCloseButton_155d7_15"
 }, he = ({ children: e }) => {
-	let { onClose: t, titleId: n } = G();
+	let { onClose: t, titleId: n } = se();
 	return /* @__PURE__ */ p("div", {
 		className: me.modalHeader,
 		children: [/* @__PURE__ */ f("h2", {
@@ -300,7 +300,7 @@ var me = {
 			className: me.modalHeaderCloseButton,
 			onClick: t,
 			"aria-label": "Close modal",
-			children: /* @__PURE__ */ f(k, { size: 16 })
+			children: /* @__PURE__ */ f(A, { size: 16 })
 		})]
 	});
 };
@@ -318,7 +318,7 @@ var ge = ({ isOpen: e, onClose: t }) => {
 	"overlay--animated": "_overlay--animated_1xotg_17",
 	modal: "_modal_1xotg_21"
 }, K = 0, ve = "", ye = ({ children: e, onClose: t, isOpen: r, className: a, closeOnBackdrop: o, closeOnClick: c, closeOnEsc: l = !0, zIndex: u = 1e3, animated: d = !0 }) => {
-	let p = o ?? c ?? !0, m = s(null), { titleId: h, descriptionId: g } = G(), _ = n((e) => {
+	let p = o ?? c ?? !0, m = s(null), { titleId: h, descriptionId: g } = se(), _ = n((e) => {
 		p && e.target === e.currentTarget && t?.();
 	}, [p, t]);
 	return ge({
@@ -328,14 +328,14 @@ var ge = ({ isOpen: e, onClose: t }) => {
 		if (r) return K === 0 && (ve = document.body.style.overflow), K += 1, document.body.style.overflow = "hidden", () => {
 			K = Math.max(0, K - 1), K === 0 && (document.body.style.overflow = ve);
 		};
-	}, [r]), !r && !d ? null : /* @__PURE__ */ f(M, { children: /* @__PURE__ */ f("div", {
-		className: j(_e.overlay, r && _e["overlay--open"], d && _e["overlay--animated"], a),
+	}, [r]), !r && !d ? null : /* @__PURE__ */ f(N, { children: /* @__PURE__ */ f("div", {
+		className: M(_e.overlay, r && _e["overlay--open"], d && _e["overlay--animated"], a),
 		onClick: _,
 		tabIndex: -1,
 		role: "presentation",
 		"aria-hidden": !r,
 		style: { zIndex: u },
-		children: /* @__PURE__ */ f(A, {
+		children: /* @__PURE__ */ f(j, {
 			active: r,
 			focusTrapOptions: {
 				fallbackFocus: () => m.current,
@@ -360,7 +360,7 @@ ye.displayName = "ModalOverlay";
 //#region src/components/Modal/Modal.tsx
 var be = ({ isOpen: e, children: t, onClose: n, closeOnBackdrop: r, closeOnClick: i, closeOnEsc: o = !0 }) => {
 	let s = a(), c = a();
-	return e ? /* @__PURE__ */ f(se.Provider, {
+	return e ? /* @__PURE__ */ f(oe.Provider, {
 		value: {
 			onClose: n,
 			titleId: s,
@@ -384,17 +384,17 @@ var xe = Object.assign(be, {
 	Content: de,
 	Footer: pe
 }), q = {
-	wrapper: "_wrapper_14t1p_1",
-	label: "_label_14t1p_9",
-	required: "_required_14t1p_20",
-	description: "_description_14t1p_25",
-	control: "_control_14t1p_32",
-	errorText: "_errorText_14t1p_38",
-	disabled: "_disabled_14t1p_45"
+	wrapper: "_wrapper_aekin_1",
+	label: "_label_aekin_9",
+	required: "_required_aekin_20",
+	description: "_description_aekin_25",
+	control: "_control_aekin_32",
+	errorText: "_errorText_aekin_40",
+	disabled: "_disabled_aekin_47"
 }, Se = ({ id: e, label: t, description: n, error: r, required: i = !1, disabled: o = !1, children: s, className: c }) => {
 	let l = a(), u = e ?? l, d = n ? `${u}-description` : void 0, m = r ? `${u}-error` : void 0;
 	return /* @__PURE__ */ p("div", {
-		className: j(q.wrapper, { [q.disabled]: o }, c),
+		className: M(q.wrapper, { [q.disabled]: o }, c),
 		"data-disabled": o || void 0,
 		"data-invalid": !!r || void 0,
 		children: [
@@ -457,7 +457,7 @@ var xe = Object.assign(be, {
 			})]
 		}), /* @__PURE__ */ f("div", {
 			id: g,
-			className: j(J.group, J[m], d),
+			className: M(J.group, J[m], d),
 			role: "radiogroup",
 			"aria-labelledby": _,
 			"aria-required": c || void 0,
@@ -467,7 +467,7 @@ var xe = Object.assign(be, {
 				let t = `${h}-${e.value}`, n = l || e.disabled;
 				return /* @__PURE__ */ p("label", {
 					htmlFor: t,
-					className: j(J.option, { [J.disabled]: n }),
+					className: M(J.option, { [J.disabled]: n }),
 					children: [
 						/* @__PURE__ */ f("input", {
 							id: t,
@@ -509,7 +509,7 @@ var we = {
 		role: "option",
 		"aria-selected": t,
 		"aria-disabled": o || void 0,
-		className: j(we.option, {
+		className: M(we.option, {
 			[we.selected]: t,
 			[we.active]: n,
 			[we.disabled]: o
@@ -527,7 +527,7 @@ Te.displayName = "SelectOption";
 var Ee = {
 	dropdown: "_dropdown_1vrjb_1",
 	dropdownIn: "_dropdownIn_1vrjb_1"
-}, De = ({ isOpen: e, listboxId: t, labelledById: n, setDropdownRef: r, style: i, options: a, selectedValue: o, activeIndex: s, onSelect: c, onMouseEnter: l }) => e ? /* @__PURE__ */ f(M, { children: /* @__PURE__ */ f("ul", {
+}, De = ({ isOpen: e, listboxId: t, labelledById: n, setDropdownRef: r, style: i, options: a, selectedValue: o, activeIndex: s, onSelect: c, onMouseEnter: l }) => e ? /* @__PURE__ */ f(N, { children: /* @__PURE__ */ f("ul", {
 	ref: r,
 	id: t,
 	role: "listbox",
@@ -566,73 +566,73 @@ var Y = {
 	"aria-controls": n ? a : void 0,
 	"aria-describedby": t,
 	"aria-activedescendant": n && o >= 0 ? `${a}-option-${o}` : void 0,
-	className: j(Y.control, {
+	className: M(Y.control, {
 		[Y.error]: !!c,
 		[Y.disabled]: r
 	}),
 	onClick: m,
 	onKeyDown: h,
 	children: [/* @__PURE__ */ f("span", {
-		className: j(Y.value, { [Y.placeholder]: u }),
+		className: M(Y.value, { [Y.placeholder]: u }),
 		children: l
 	}), /* @__PURE__ */ f("span", {
-		className: j(Y.arrow, { [Y.open]: n }),
+		className: M(Y.arrow, { [Y.open]: n }),
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ f(O, {})
+		children: /* @__PURE__ */ f(k, {})
 	})]
 });
 Oe.displayName = "SelectTrigger";
 //#endregion
 //#region src/components/Select/Select.tsx
 var ke = ({ label: e, description: t, id: r, name: i, value: l, defaultValue: u, onChange: d, options: m, placeholder: h = "Select...", required: g = !1, disabled: _ = !1, error: v, className: y }) => {
-	let b = a(), x = r ?? b, S = `${x}-listbox`, C = v ? `${x}-error` : void 0, w = s(null), E = s(null), [D, O] = T({
+	let b = a(), x = r ?? b, S = `${x}-listbox`, C = v ? `${x}-error` : void 0, w = s(null), D = s(null), [O, k] = T({
 		value: l,
 		defaultValue: u ?? "",
 		onChange: d
-	}), [k, A] = c(!1), [j, M] = c(-1), N = o(() => m.find((e) => e.value === D), [m, D]), P = !!N, { floatingStyles: F, setRef: L, setFloatingRef: R } = te({
-		open: k,
+	}), [A, j] = c(!1), [M, N] = c(-1), P = o(() => m.find((e) => e.value === O), [m, O]), F = !!P, { floatingStyles: I, setRef: R, setFloatingRef: z } = ee({
+		open: A,
 		matchTriggerWidth: !0,
 		mobileSheetBreakpoint: 640
-	}), z = n(() => {
-		let e = m.findIndex((e) => e.value === D && !e.disabled);
+	}), B = n(() => {
+		let e = m.findIndex((e) => e.value === O && !e.disabled);
 		return e >= 0 ? e : m.findIndex((e) => !e.disabled);
-	}, [m, D]), B = n(() => {
-		_ || (M(z()), A(!0));
-	}, [_, z]), V = n(() => {
-		A(!1);
-	}, []), H = n(() => {
+	}, [m, O]), V = n(() => {
+		_ || (N(B()), j(!0));
+	}, [_, B]), H = n(() => {
+		j(!1);
+	}, []), U = n(() => {
 		if (!_) {
-			if (k) {
-				V();
+			if (A) {
+				H();
 				return;
 			}
-			B();
+			V();
 		}
 	}, [
-		V,
+		H,
 		_,
-		k,
-		B
-	]), U = n((e) => {
-		O(e), V(), w.current?.focus();
-	}, [V, O]), { onKeyDown: ne } = ee({
-		activeIndex: j,
-		setActiveIndex: M,
+		A,
+		V
+	]), W = n((e) => {
+		k(e), H(), w.current?.focus();
+	}, [H, k]), { onKeyDown: te } = E({
+		activeIndex: M,
+		setActiveIndex: N,
 		items: m,
-		isOpen: k,
-		onOpen: B,
-		onClose: V,
+		isOpen: A,
+		onOpen: V,
+		onClose: H,
 		onSelect: () => {
-			let e = m[j];
-			!e || e.disabled || U(e.value);
+			let e = m[M];
+			!e || e.disabled || W(e.value);
 		}
 	});
-	I([w, E], V, k);
-	let re = n((e) => {
-		w.current = e, L(e);
-	}, [L]), W = n((e) => {
-		E.current = e, R(e);
-	}, [R]);
+	L([w, D], H, A);
+	let ne = n((e) => {
+		w.current = e, R(e);
+	}, [R]), G = n((e) => {
+		D.current = e, z(e);
+	}, [z]);
 	return /* @__PURE__ */ p(Se, {
 		id: x,
 		label: e,
@@ -645,36 +645,36 @@ var ke = ({ label: e, description: t, id: r, name: i, value: l, defaultValue: u,
 			/* @__PURE__ */ f(Oe, {
 				id: x,
 				errorId: C,
-				isOpen: k,
+				isOpen: A,
 				disabled: _,
 				required: g,
 				listboxId: S,
-				activeIndex: j,
-				ariaLabel: e ? void 0 : N?.label || h,
+				activeIndex: M,
+				ariaLabel: e ? void 0 : P?.label || h,
 				error: v,
-				displayText: N?.label ?? h,
-				isPlaceholder: !P,
-				buttonRef: re,
-				onClick: H,
-				onKeyDown: ne
+				displayText: P?.label ?? h,
+				isPlaceholder: !F,
+				buttonRef: ne,
+				onClick: U,
+				onKeyDown: te
 			}),
 			i && /* @__PURE__ */ f("input", {
 				type: "hidden",
 				name: i,
-				value: D,
+				value: O,
 				disabled: _
 			}),
 			/* @__PURE__ */ f(De, {
-				isOpen: k,
+				isOpen: A,
 				listboxId: S,
 				labelledById: x,
-				style: F,
+				style: I,
 				options: m,
-				selectedValue: D,
-				activeIndex: j,
-				setDropdownRef: W,
-				onSelect: U,
-				onMouseEnter: M
+				selectedValue: O,
+				activeIndex: M,
+				setDropdownRef: G,
+				onSelect: W,
+				onMouseEnter: N
 			})
 		]
 	});
@@ -695,7 +695,7 @@ var Ae = e(null), je = () => {
 		...n,
 		role: "tablist",
 		"aria-orientation": r,
-		className: j(Me.list, r === "vertical" && Me.vertical, i === "underline" && Me.underline, i === "pills" && Me.pills, t),
+		className: M(Me.list, r === "vertical" && Me.vertical, i === "underline" && Me.underline, i === "pills" && Me.pills, t),
 		children: e
 	});
 };
@@ -719,7 +719,7 @@ var Pe = {
 		"aria-labelledby": `tab-${e}`,
 		hidden: !l,
 		tabIndex: 0,
-		className: j(Pe.panel, o && Pe.visible, a === "vertical" && Pe.vertical, n),
+		className: M(Pe.panel, o && Pe.visible, a === "vertical" && Pe.vertical, n),
 		children: t
 	});
 };
@@ -750,7 +750,7 @@ var X = {
 		id: `tab-${e}`,
 		disabled: i,
 		tabIndex: v ? 0 : -1,
-		className: j(X.tab, X[h], m === "vertical" && X.vertical, y && X.withIcon, b && X.iconOnly, r),
+		className: M(X.tab, X[h], m === "vertical" && X.vertical, y && X.withIcon, b && X.iconOnly, r),
 		onClick: (t) => {
 			i || (d(e), o?.(t));
 		},
@@ -777,7 +777,7 @@ var Le = {
 		p || d(e), i?.(e);
 	}, [p, i]), g = s([]), _ = n((e, t) => {
 		g.current[e] = t;
-	}, []), { onKeyDown: v } = E({
+	}, []), { onKeyDown: v } = D({
 		activeIndex: m,
 		setActiveIndex: h,
 		tabRefs: g,
@@ -793,7 +793,7 @@ var Le = {
 	return /* @__PURE__ */ f(Ae.Provider, {
 		value: y,
 		children: /* @__PURE__ */ f("div", {
-			className: j(Le.tabs, a === "vertical" && Le.vertical, l),
+			className: M(Le.tabs, a === "vertical" && Le.vertical, l),
 			children: e
 		})
 	});
@@ -823,7 +823,7 @@ var ze = Object.assign(Re, {
 	};
 	return /* @__PURE__ */ p("div", {
 		ref: c,
-		className: j(Be.tooltip, a),
+		className: M(Be.tooltip, a),
 		"data-placement": t,
 		"data-state": "open",
 		style: o,
@@ -842,38 +842,38 @@ var He = ({ children: e, placement: t = "top", content: n, disabled: r = !1, del
 	open: 300,
 	close: 100
 }, maxWidth: o = 250, className: l, onOpenChange: u }) => {
-	let [g, _] = c(!1), v = s(null), y = a(), { context: b, floatingStyles: x, middlewareData: T, setRef: ee, setFloatingRef: E, placement: D } = te({
+	let [g, _] = c(!1), v = s(null), y = a(), { context: b, floatingStyles: x, middlewareData: T, setRef: E, setFloatingRef: D, placement: O } = ee({
 		open: g,
 		onOpenChange: (e) => {
 			r || (_(e), u?.(e));
 		},
 		placement: t,
 		middleware: [h({ element: v })]
-	}), O = T.arrow?.x, k = T.arrow?.y, { getReferenceProps: A, getFloatingProps: j } = w([C(b, { delay: {
+	}), k = T.arrow?.x, A = T.arrow?.y, { getReferenceProps: j, getFloatingProps: M } = w([C(b, { delay: {
 		open: i.open,
 		close: i.close
 	} }), S(b)]);
 	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
-		ref: ee,
+		ref: E,
 		style: { display: "inline-flex" },
 		"aria-describedby": g ? y : void 0,
-		...A(),
+		...j(),
 		children: e
 	}), /* @__PURE__ */ f(m, { children: g && n && /* @__PURE__ */ f(Ve, {
 		id: y,
-		ref: E,
+		ref: D,
 		content: n,
 		arrowRef: v,
-		arrowX: O,
-		arrowY: k,
+		arrowX: k,
+		arrowY: A,
 		role: "tooltip",
 		style: {
 			...x,
 			maxWidth: typeof o == "number" ? `${o}px` : o
 		},
-		placement: D,
+		placement: O,
 		className: l,
-		...j()
+		...M()
 	}) })] });
 };
 He.displayName = "Tooltip";
@@ -910,7 +910,7 @@ var Ue = (e, t) => {
 		onClick: b ? void 0 : h,
 		"aria-label": g || void 0,
 		"aria-busy": o || void 0,
-		className: j(Z.button, Z[t], Z[n], Z[r], m, {
+		className: M(Z.button, Z[t], Z[n], Z[r], m, {
 			[Z.disabled]: b,
 			[Z.loading]: o,
 			[Z.fullWidth]: u,
@@ -938,62 +938,118 @@ var Ue = (e, t) => {
 });
 We.displayName = "Button";
 var Q = {
-	wrapper: "_wrapper_1s06j_1",
-	input: "_input_1s06j_9",
-	customCheckbox: "_customCheckbox_1s06j_21",
-	checkmark: "_checkmark_1s06j_38",
-	container: "_container_1s06j_54",
-	label: "_label_1s06j_60",
-	error: "_error_1s06j_65",
-	errorText: "_errorText_1s06j_69",
-	disabled: "_disabled_1s06j_115"
-}, Ge = t(({ label: e, checked: t, defaultChecked: n = !1, disabled: r = !1, className: i, onCheckedChange: o, error: s }, c) => {
-	let l = a(), u = !!s, [d, m] = T({
-		value: t,
-		defaultValue: n,
-		onChange: o
-	});
-	return /* @__PURE__ */ p("div", {
-		className: Q.container,
-		children: [/* @__PURE__ */ p("label", {
-			htmlFor: l,
-			className: j(Q.wrapper, r && Q.disabled, i),
-			children: [
-				/* @__PURE__ */ f("input", {
-					ref: c,
-					id: l,
-					type: "checkbox",
-					checked: d,
-					disabled: r,
-					onChange: (e) => {
-						m(e.target.checked);
-					},
-					className: Q.input,
-					"aria-invalid": u || void 0,
-					"aria-describedby": u ? `${l}-error` : void 0,
-					"aria-label": e ? void 0 : "Checkbox"
-				}),
-				/* @__PURE__ */ f("span", {
-					className: j(Q.customCheckbox, u && Q.error),
-					"aria-hidden": "true",
-					children: d && /* @__PURE__ */ f("span", {
-						className: Q.checkmark,
-						children: /* @__PURE__ */ f(D, {})
+	wrapper: "_wrapper_1xtic_1",
+	wrapperSm: "_wrapperSm_1xtic_12",
+	wrapperMd: "_wrapperMd_1xtic_18",
+	wrapperLg: "_wrapperLg_1xtic_24",
+	iconOnly: "_iconOnly_1xtic_30",
+	container: "_container_1xtic_36",
+	containerSm: "_containerSm_1xtic_43",
+	containerMd: "_containerMd_1xtic_47",
+	containerLg: "_containerLg_1xtic_51",
+	input: "_input_1xtic_55",
+	customCheckbox: "_customCheckbox_1xtic_67",
+	requiredMark: "_requiredMark_1xtic_82",
+	checkmark: "_checkmark_1xtic_92",
+	indeterminateMark: "_indeterminateMark_1xtic_108",
+	label: "_label_1xtic_118",
+	descriptionText: "_descriptionText_1xtic_123",
+	errorText: "_errorText_1xtic_130",
+	labelSm: "_labelSm_1xtic_137",
+	labelMd: "_labelMd_1xtic_141",
+	labelLg: "_labelLg_1xtic_145",
+	indeterminate: "_indeterminate_1xtic_108",
+	error: "_error_1xtic_130",
+	disabled: "_disabled_1xtic_200"
+}, Ge = {
+	sm: Q.labelSm,
+	md: Q.labelMd,
+	lg: Q.labelLg
+}, Ke = {
+	sm: Q.wrapperSm,
+	md: Q.wrapperMd,
+	lg: Q.wrapperLg
+}, qe = {
+	sm: Q.containerSm,
+	md: Q.containerMd,
+	lg: Q.containerLg
+}, Je = t(({ id: e, label: t, description: r, checked: o, size: c = "md", defaultChecked: l = !1, disabled: u = !1, required: d = !1, indeterminate: m = !1, className: h, wrapperClassName: g, onCheckedChange: _, error: v, "aria-label": y, "aria-labelledby": b, "aria-describedby": x, ...S }, C) => {
+	let w = a(), E = e ?? w, D = s(null), k = !!v, A = r ? `${E}-description` : void 0, j = k ? `${E}-error` : void 0, N = [
+		x,
+		A,
+		j
+	].filter(Boolean).join(" "), [P, F] = T({
+		value: o,
+		defaultValue: l,
+		onChange: _
+	}), I = n((e) => {
+		if (D.current = e, typeof C == "function") {
+			C(e);
+			return;
+		}
+		C && (C.current = e);
+	}, [C]);
+	i(() => {
+		D.current && (D.current.indeterminate = m);
+	}, [m]);
+	let ee = (e) => {
+		F(e.target.checked);
+	};
+	return Ue(!!(t || y || b), "Checkbox: an accessible label must be provided through label, aria-label, or aria-labelledby."), /* @__PURE__ */ p("div", {
+		className: M(Q.container, qe[c], h),
+		children: [
+			/* @__PURE__ */ p("label", {
+				htmlFor: E,
+				className: M(Q.wrapper, Ke[c], !t && Q.iconOnly, u && Q.disabled, g),
+				children: [
+					/* @__PURE__ */ f("input", {
+						...S,
+						ref: I,
+						id: E,
+						type: "checkbox",
+						checked: P,
+						disabled: u,
+						required: d,
+						onChange: ee,
+						className: Q.input,
+						"aria-label": y,
+						"aria-labelledby": b,
+						"aria-checked": m ? "mixed" : S["aria-checked"],
+						"aria-invalid": k ? !0 : S["aria-invalid"],
+						"aria-describedby": N || void 0
+					}),
+					/* @__PURE__ */ f("span", {
+						className: M(Q.customCheckbox, k && Q.error, m && Q.indeterminate),
+						"aria-hidden": "true",
+						children: m ? /* @__PURE__ */ f("span", { className: Q.indeterminateMark }) : P && /* @__PURE__ */ f("span", {
+							className: Q.checkmark,
+							children: /* @__PURE__ */ f(O, {})
+						})
+					}),
+					t && /* @__PURE__ */ p("span", {
+						className: M(Q.label, Ge[c]),
+						children: [t, d && /* @__PURE__ */ f("span", {
+							className: Q.requiredMark,
+							"aria-hidden": "true",
+							children: "*"
+						})]
 					})
-				}),
-				e && /* @__PURE__ */ f("span", {
-					className: Q.label,
-					children: e
-				})
-			]
-		}), u && /* @__PURE__ */ f("span", {
-			id: `${l}-error`,
-			className: Q.errorText,
-			children: s
-		})]
+				]
+			}),
+			r && /* @__PURE__ */ f("span", {
+				id: A,
+				className: Q.descriptionText,
+				children: r
+			}),
+			k && /* @__PURE__ */ f("span", {
+				id: j,
+				className: Q.errorText,
+				children: v
+			})
+		]
 	});
 });
-Ge.displayName = "Checkbox";
+Je.displayName = "Checkbox";
 var $ = {
 	inputWrapper: "_inputWrapper_y9bue_1",
 	input: "_input_y9bue_1",
@@ -1013,7 +1069,7 @@ var $ = {
 	toneDanger: "_toneDanger_y9bue_169",
 	toneMuted: "_toneMuted_y9bue_173",
 	toneInverse: "_toneInverse_y9bue_177"
-}, Ke = {
+}, Ye = {
 	default: $.toneDefault,
 	primary: $.tonePrimary,
 	secondary: $.toneSecondary,
@@ -1021,7 +1077,7 @@ var $ = {
 	danger: $.toneDanger,
 	muted: $.toneMuted,
 	inverse: $.toneInverse
-}, qe = (e = "text", t) => {
+}, Xe = (e = "text", t) => {
 	if (t) return t;
 	switch (e) {
 		case "email": return "email";
@@ -1031,86 +1087,86 @@ var $ = {
 		case "search": return "off";
 		default: return;
 	}
-}, Je = t(({ id: e, label: t, name: r, description: i, placeholder: o, value: l, defaultValue: u, onChange: d, type: m = "text", size: h = "md", error: g, disabled: _ = !1, required: v = !1, className: y, autoComplete: b, readOnly: x = !1, clearable: S = !1, onClear: C, leftAdornment: w, rightAdornment: T, clearIcon: ee, leftAdornmentTone: E = "default", rightAdornmentTone: D = "default", clearIconTone: O = "danger", autoFocus: k, maxLength: A, onMouseEnter: M, onMouseLeave: N, "aria-describedby": P, "aria-invalid": F, ...te }, I) => {
-	let L = a(), R = e ?? L, z = s(null), [B, V] = c(u ?? ""), H = l !== void 0, U = H ? l : B, ne = U !== "", re = qe(m, b), W = S && ne && !_ && !x, ie = [
-		P,
-		i ? `${R}-description` : void 0,
-		g ? `${R}-error` : void 0
-	].filter(Boolean).join(" "), ae = ee ?? "×", oe = n((e) => {
-		if (z.current = e, typeof I == "function") {
-			I(e);
+}, Ze = t(({ id: e, label: t, name: r, description: i, placeholder: o, value: l, defaultValue: u, onChange: d, type: m = "text", size: h = "md", error: g, disabled: _ = !1, required: v = !1, className: y, autoComplete: b, readOnly: x = !1, clearable: S = !1, onClear: C, leftAdornment: w, rightAdornment: T, clearIcon: E, leftAdornmentTone: D = "default", rightAdornmentTone: O = "default", clearIconTone: k = "danger", autoFocus: A, maxLength: j, onMouseEnter: N, onMouseLeave: P, "aria-describedby": F, "aria-invalid": I, ...ee }, L) => {
+	let R = a(), z = e ?? R, B = s(null), [V, H] = c(u ?? ""), U = l !== void 0, W = U ? l : V, te = W !== "", ne = Xe(m, b), G = S && te && !_ && !x, re = [
+		F,
+		i ? `${z}-description` : void 0,
+		g ? `${z}-error` : void 0
+	].filter(Boolean).join(" "), ie = E ?? "×", ae = n((e) => {
+		if (B.current = e, typeof L == "function") {
+			L(e);
 			return;
 		}
-		I && (I.current = e);
-	}, [I]), se = n((e) => {
+		L && (L.current = e);
+	}, [L]), oe = n((e) => {
 		let t = e.target.value;
-		H || V(t), d?.(e);
-	}, [H, d]), G = n(() => {
-		H || V(""), C?.(), z.current?.focus();
-	}, [H, C]), ce = !W && !!T;
+		U || H(t), d?.(e);
+	}, [U, d]), se = n(() => {
+		U || H(""), C?.(), B.current?.focus();
+	}, [U, C]), ce = !G && !!T;
 	return /* @__PURE__ */ f(Se, {
-		id: R,
+		id: z,
 		label: t,
 		description: i,
 		error: g,
 		required: v,
 		disabled: _,
 		children: /* @__PURE__ */ p("div", {
-			className: j($.inputWrapper, {
+			className: M($.inputWrapper, {
 				[$.hasLeftAdornment]: !!w,
-				[$.hasRightAdornment]: !!T || W
+				[$.hasRightAdornment]: !!T || G
 			}),
 			children: [
 				w && /* @__PURE__ */ f("span", {
 					"aria-hidden": "true",
-					className: j($.leftAdornment, Ke[E]),
+					className: M($.leftAdornment, Ye[D]),
 					children: w
 				}),
 				/* @__PURE__ */ f("input", {
-					...te,
-					ref: oe,
-					id: R,
+					...ee,
+					ref: ae,
+					id: z,
 					name: r,
 					type: m,
-					autoComplete: re,
-					className: j($.input, $[h], { [$.error]: !!g }, y),
-					value: U,
-					onChange: se,
+					autoComplete: ne,
+					className: M($.input, $[h], { [$.error]: !!g }, y),
+					value: W,
+					onChange: oe,
 					placeholder: o,
 					disabled: _,
 					readOnly: x,
 					required: v,
-					autoFocus: k,
-					maxLength: A,
-					"aria-invalid": g ? !0 : F,
-					"aria-describedby": ie || void 0,
-					onMouseEnter: M,
-					onMouseLeave: N
+					autoFocus: A,
+					maxLength: j,
+					"aria-invalid": g ? !0 : I,
+					"aria-describedby": re || void 0,
+					onMouseEnter: N,
+					onMouseLeave: P
 				}),
-				W && /* @__PURE__ */ f("button", {
+				G && /* @__PURE__ */ f("button", {
 					type: "button",
-					className: j($.clearButton, Ke[O]),
-					onClick: G,
+					className: M($.clearButton, Ye[k]),
+					onClick: se,
 					"aria-label": "Clear input",
-					children: ae
+					children: ie
 				}),
 				ce && /* @__PURE__ */ f("div", {
-					className: j($.rightAdornment, Ke[D]),
+					className: M($.rightAdornment, Ye[O]),
 					children: T
 				})
 			]
 		})
 	});
 });
-Je.displayName = "Input";
+Ze.displayName = "Input";
 //#endregion
 //#region src/theme/ThemeContext.ts
-var Ye = e(null), Xe = (e) => e === "highContrast" ? "high-contrast" : e, Ze = ({ theme: e, defaultTheme: t = "light", onThemeChange: n, children: r }) => {
+var Qe = e(null), $e = (e) => e === "highContrast" ? "high-contrast" : e, et = ({ theme: e, defaultTheme: t = "light", onThemeChange: n, children: r }) => {
 	let [a, s] = T({
 		value: e,
 		defaultValue: t,
 		onChange: n
-	}), c = Xe(a);
+	}), c = $e(a);
 	i(() => {
 		if (typeof document > "u") return;
 		let { documentElement: e } = document, t = e.dataset.velliraTheme;
@@ -1126,7 +1182,7 @@ var Ye = e(null), Xe = (e) => e === "highContrast" ? "high-contrast" : e, Ze = (
 		theme: a,
 		setTheme: s
 	}), [a, s]);
-	return /* @__PURE__ */ f(Ye.Provider, {
+	return /* @__PURE__ */ f(Qe.Provider, {
 		value: l,
 		children: /* @__PURE__ */ f("div", {
 			"data-vellira-theme": c,
@@ -1134,13 +1190,13 @@ var Ye = e(null), Xe = (e) => e === "highContrast" ? "high-contrast" : e, Ze = (
 		})
 	});
 };
-Ze.displayName = "ThemeProvider";
+et.displayName = "ThemeProvider";
 //#endregion
 //#region src/theme/useTheme.ts
-function Qe() {
-	let e = r(Ye);
+function tt() {
+	let e = r(Qe);
 	if (!e) throw Error("useTheme must be used within ThemeProvider.");
 	return e;
 }
 //#endregion
-export { We as Button, Ge as Checkbox, oe as Dropdown, Se as FormField, Je as Input, xe as Modal, Ce as RadioGroup, ke as Select, ze as Tabs, Ze as ThemeProvider, He as Tooltip, Qe as useTheme };
+export { We as Button, Je as Checkbox, ae as Dropdown, Se as FormField, Ze as Input, xe as Modal, Ce as RadioGroup, ke as Select, ze as Tabs, et as ThemeProvider, He as Tooltip, tt as useTheme };