@vellira-ui/react 2.22.0 → 2.22.1

package/dist/index.js

@@ -76,7 +76,7 @@ var F = (e) => {
 		setFloatingRef: u.setFloating,
 		updatePosition: f
 	};
-}, te = (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: M(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: M(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"
-}, W = t(({ children: e, isOpen: t, icon: n, arrowIcon: r, showArrow: i = !0, rotateAngle: a = 90, label: o, className: s, ...c }, l) => {
+}, 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: M(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,22 +163,22 @@ 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: M(U.arrow, { [U.open]: t }),
+				className: M(W.arrow, { [W.open]: t }),
 				children: g
 			})
 		]
 	});
 });
-W.displayName = "DropdownTrigger";
+te.displayName = "DropdownTrigger";
 //#endregion
 //#region src/components/Dropdown/types.ts
-var ne = (e) => e.type !== "group" && e.type !== "separator", G = (e) => e.type === "group", re = (e) => e.type === "separator", K = { wrapper: "_wrapper_14ue8_1" }, ie = ({ 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: _ }) => {
+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 } = I({
 		placement: d,
 		matchTriggerWidth: m,
@@ -190,9 +190,9 @@ var ne = (e) => e.type !== "group" && e.type !== "separator", G = (e) => e.type
 		});
 	}, F = () => {
 		y(!1), x(-1);
-	}, L = () => {
+	}, R = () => {
 		F(), S.current?.focus();
-	}, { onKeyDown: z } = E({
+	}, { onKeyDown: B } = E({
 		activeIndex: b,
 		setActiveIndex: x,
 		items: A,
@@ -200,20 +200,20 @@ var ne = (e) => e.type !== "group" && e.type !== "separator", G = (e) => e.type
 		onOpen: P,
 		onSelect: () => {
 			let e = A[b];
-			!e || e.disabled || (i?.(e.value), L());
+			!e || e.disabled || (i?.(e.value), R());
 		},
-		onClose: L
+		onClose: R
 	});
-	te([S, C], () => F(), v);
-	let V = (e) => {
+	L([S, C], () => F(), v);
+	let H = (e) => {
 		S.current = e, O(e);
-	}, U = (e) => {
+	}, W = (e) => {
 		C.current = e, k(e), e?.focus();
 	};
 	return /* @__PURE__ */ p("div", {
-		className: M(K.wrapper, o),
-		children: [/* @__PURE__ */ f(W, {
-			ref: V,
+		className: M(ie.wrapper, o),
+		children: [/* @__PURE__ */ f(te, {
+			ref: H,
 			id: T,
 			isOpen: v,
 			disabled: l,
@@ -223,31 +223,31 @@ var ne = (e) => e.type !== "group" && e.type !== "separator", G = (e) => e.type
 			arrowIcon: _,
 			rotateAngle: u,
 			onClick: P,
-			onKeyDown: z,
+			onKeyDown: B,
 			"aria-expanded": v,
 			"aria-haspopup": "menu",
 			...v && { "aria-controls": w },
 			children: n
 		}), v && /* @__PURE__ */ f(ee, {
-			ref: U,
+			ref: W,
 			floatingStyles: D,
 			menuId: w,
 			labelledById: n ? T : void 0,
 			label: n ? void 0 : e,
 			activeDescendantId: j,
-			onKeyDown: z,
+			onKeyDown: B,
 			children: r.map((e, t) => {
-				if (G(e)) return /* @__PURE__ */ f(R, { label: e.label }, `group-${e.label}`);
-				if (re(e)) return /* @__PURE__ */ f(H, {}, `separator-${t}`);
+				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(B, {
+					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,78 +258,78 @@ var ne = (e) => e.type !== "group" && e.type !== "separator", G = (e) => e.type
 			})
 		})]
 	});
-}, ae = e(void 0), oe = () => {
-	let e = r(ae);
+}, 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;
 };
-ae.displayName = "ModalContext";
-var se = { modalBody: "_modalBody_iv33a_1" }, ce = ({ children: e }) => {
-	let { descriptionId: t } = oe();
+oe.displayName = "ModalContext";
+var ce = { modalBody: "_modalBody_iv33a_1" }, le = ({ children: e }) => {
+	let { descriptionId: t } = se();
 	return /* @__PURE__ */ f("div", {
 		id: t,
-		className: se.modalBody,
+		className: ce.modalBody,
 		children: e
 	});
 };
-ce.displayName = "ModalBody";
-var le = { content: "_content_avpai_1" }, ue = ({ children: e }) => /* @__PURE__ */ f("div", {
-	className: le.content,
+le.displayName = "ModalBody";
+var ue = { content: "_content_avpai_1" }, de = ({ children: e }) => /* @__PURE__ */ f("div", {
+	className: ue.content,
 	children: e
 });
-ue.displayName = "ModalContent";
-var de = { modalFooter: "_modalFooter_ezys6_1" }, fe = ({ children: e }) => /* @__PURE__ */ f("div", {
-	className: de.modalFooter,
+de.displayName = "ModalContent";
+var fe = { modalFooter: "_modalFooter_ezys6_1" }, pe = ({ children: e }) => /* @__PURE__ */ f("div", {
+	className: fe.modalFooter,
 	children: e
 });
-fe.displayName = "ModalFooter";
-var pe = {
+pe.displayName = "ModalFooter";
+var me = {
 	modalHeader: "_modalHeader_155d7_1",
 	modalHeaderTitle: "_modalHeaderTitle_155d7_8",
 	modalHeaderCloseButton: "_modalHeaderCloseButton_155d7_15"
-}, me = ({ children: e }) => {
-	let { onClose: t, titleId: n } = oe();
+}, he = ({ children: e }) => {
+	let { onClose: t, titleId: n } = se();
 	return /* @__PURE__ */ p("div", {
-		className: pe.modalHeader,
+		className: me.modalHeader,
 		children: [/* @__PURE__ */ f("h2", {
 			id: n,
-			className: pe.modalHeaderTitle,
+			className: me.modalHeaderTitle,
 			children: e
 		}), t && /* @__PURE__ */ f("button", {
 			type: "button",
-			className: pe.modalHeaderCloseButton,
+			className: me.modalHeaderCloseButton,
 			onClick: t,
 			"aria-label": "Close modal",
 			children: /* @__PURE__ */ f(A, { size: 16 })
 		})]
 	});
 };
-me.displayName = "ModalHeader";
+he.displayName = "ModalHeader";
 //#endregion
 //#region src/hooks/useModalKeyboard.ts
-var he = ({ isOpen: e, onClose: t }) => {
+var ge = ({ isOpen: e, onClose: t }) => {
 	let r = n((n) => {
 		e && n.key === "Escape" && (n.preventDefault(), t?.());
 	}, [e, t]);
 	i(() => (document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r)), [r]);
-}, ge = {
+}, _e = {
 	overlay: "_overlay_1xotg_1",
 	"overlay--open": "_overlay--open_1xotg_13",
 	"overlay--animated": "_overlay--animated_1xotg_17",
 	modal: "_modal_1xotg_21"
-}, _e = 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 } = oe(), _ = n((e) => {
+}, 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 } = se(), _ = n((e) => {
 		p && e.target === e.currentTarget && t?.();
 	}, [p, t]);
-	return he({
+	return ge({
 		isOpen: r,
 		onClose: l ? t : void 0
 	}), i(() => {
-		if (r) return _e === 0 && (ve = document.body.style.overflow), _e += 1, document.body.style.overflow = "hidden", () => {
-			_e = Math.max(0, _e - 1), _e === 0 && (document.body.style.overflow = ve);
+		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(N, { children: /* @__PURE__ */ f("div", {
-		className: M(ge.overlay, r && ge["overlay--open"], d && ge["overlay--animated"], a),
+		className: M(_e.overlay, r && _e["overlay--open"], d && _e["overlay--animated"], a),
 		onClick: _,
 		tabIndex: -1,
 		role: "presentation",
@@ -345,7 +345,7 @@ var he = ({ isOpen: e, onClose: t }) => {
 			children: /* @__PURE__ */ f("div", {
 				ref: m,
 				tabIndex: -1,
-				className: ge.modal,
+				className: _e.modal,
 				role: "dialog",
 				"aria-modal": "true",
 				"aria-labelledby": h,
@@ -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(ae.Provider, {
+	return e ? /* @__PURE__ */ f(oe.Provider, {
 		value: {
 			onClose: n,
 			titleId: s,
@@ -371,7 +371,7 @@ var be = ({ isOpen: e, children: t, onClose: n, closeOnBackdrop: r, closeOnClick
 			onClose: n,
 			closeOnBackdrop: r ?? i,
 			closeOnEsc: o,
-			children: /* @__PURE__ */ f(ue, { children: t })
+			children: /* @__PURE__ */ f(de, { children: t })
 		})
 	}) : null;
 };
@@ -379,10 +379,10 @@ be.displayName = "Modal";
 //#endregion
 //#region src/components/Modal/index.ts
 var xe = Object.assign(be, {
-	Header: me,
-	Body: ce,
-	Content: ue,
-	Footer: fe
+	Header: he,
+	Body: le,
+	Content: de,
+	Footer: pe
 }), q = {
 	wrapper: "_wrapper_14t1p_1",
 	label: "_label_14t1p_9",
@@ -579,50 +579,50 @@ var ke = ({ label: e, description: t, id: r, name: i, value: l, defaultValue: u,
 		value: l,
 		defaultValue: u ?? "",
 		onChange: d
-	}), [A, j] = c(!1), [M, N] = c(-1), P = o(() => m.find((e) => e.value === O), [m, O]), ee = !!P, { floatingStyles: F, setRef: L, setFloatingRef: R } = I({
+	}), [A, j] = c(!1), [M, N] = c(-1), P = o(() => m.find((e) => e.value === O), [m, O]), ee = !!P, { floatingStyles: F, setRef: R, setFloatingRef: z } = I({
 		open: A,
 		matchTriggerWidth: !0,
 		mobileSheetBreakpoint: 640
-	}), z = n(() => {
+	}), B = n(() => {
 		let e = m.findIndex((e) => e.value === O && !e.disabled);
 		return e >= 0 ? e : m.findIndex((e) => !e.disabled);
-	}, [m, O]), B = n(() => {
-		_ || (N(z()), j(!0));
-	}, [_, z]), V = n(() => {
+	}, [m, O]), V = n(() => {
+		_ || (N(B()), j(!0));
+	}, [_, B]), H = n(() => {
 		j(!1);
-	}, []), H = n(() => {
+	}, []), U = n(() => {
 		if (!_) {
 			if (A) {
-				V();
+				H();
 				return;
 			}
-			B();
+			V();
 		}
 	}, [
-		V,
+		H,
 		_,
 		A,
-		B
-	]), U = n((e) => {
-		k(e), V(), w.current?.focus();
-	}, [V, k]), { onKeyDown: W } = E({
+		V
+	]), W = n((e) => {
+		k(e), H(), w.current?.focus();
+	}, [H, k]), { onKeyDown: te } = E({
 		activeIndex: M,
 		setActiveIndex: N,
 		items: m,
 		isOpen: A,
-		onOpen: B,
-		onClose: V,
+		onOpen: V,
+		onClose: H,
 		onSelect: () => {
 			let e = m[M];
-			!e || e.disabled || U(e.value);
+			!e || e.disabled || W(e.value);
 		}
 	});
-	te([w, D], V, A);
+	L([w, D], H, A);
 	let ne = n((e) => {
-		w.current = e, L(e);
-	}, [L]), G = n((e) => {
-		D.current = e, R(e);
-	}, [R]);
+		w.current = e, R(e);
+	}, [R]), G = n((e) => {
+		D.current = e, z(e);
+	}, [z]);
 	return /* @__PURE__ */ p(Se, {
 		id: x,
 		label: e,
@@ -645,8 +645,8 @@ var ke = ({ label: e, description: t, id: r, name: i, value: l, defaultValue: u,
 				displayText: P?.label ?? h,
 				isPlaceholder: !ee,
 				buttonRef: ne,
-				onClick: H,
-				onKeyDown: W
+				onClick: U,
+				onKeyDown: te
 			}),
 			i && /* @__PURE__ */ f("input", {
 				type: "hidden",
@@ -663,7 +663,7 @@ var ke = ({ label: e, description: t, id: r, name: i, value: l, defaultValue: u,
 				selectedValue: O,
 				activeIndex: M,
 				setDropdownRef: G,
-				onSelect: U,
+				onSelect: W,
 				onMouseEnter: N
 			})
 		]
@@ -891,7 +891,7 @@ var Ue = (e, t) => {
 	spinner: "_spinner_g2sgv_317",
 	"button-spin": "_button-spin_g2sgv_1"
 }, We = t(({ children: e, color: t = "primary", variant: n = "solid", size: r = "md", type: i = "button", disabled: a = !1, loading: o = !1, loadingText: s, leftIcon: c, rightIcon: l, fullWidth: u = !1, iconOnly: d = !1, className: m, onClick: h, "aria-label": g, ..._ }, v) => {
-	let y = d || !e && (c || l), b = a || o, x = o && s ? s : e;
+	let y = d || !e && !!(c || l), b = a || o, x = o && s ? s : e;
 	return Ue(!y || !!g, "Button: icon-only buttons must provide aria-label."), /* @__PURE__ */ p("button", {
 		..._,
 		ref: v,
@@ -985,28 +985,33 @@ var Q = {
 });
 Ge.displayName = "Checkbox";
 var $ = {
-	inputWrapper: "_inputWrapper_1tupw_1",
-	input: "_input_1tupw_1",
-	error: "_error_1tupw_41",
-	withEllipsis: "_withEllipsis_1tupw_48",
-	sm: "_sm_1tupw_53",
-	md: "_md_1tupw_57",
-	lg: "_lg_1tupw_61",
-	hasLeftAdornment: "_hasLeftAdornment_1tupw_89",
-	hasRightAdornment: "_hasRightAdornment_1tupw_93",
-	leftAdornment: "_leftAdornment_1tupw_97",
-	rightAdornment: "_rightAdornment_1tupw_98",
-	clearButton: "_clearButton_1tupw_112",
-	toneDefault: "_toneDefault_1tupw_166",
-	tonePrimary: "_tonePrimary_1tupw_170",
-	toneSecondary: "_toneSecondary_1tupw_174",
-	toneSuccess: "_toneSuccess_1tupw_178",
-	toneDanger: "_toneDanger_1tupw_182",
-	toneMuted: "_toneMuted_1tupw_186",
-	toneInverse: "_toneInverse_1tupw_190",
-	tooltip: "_tooltip_1tupw_196",
-	fadeIn: "_fadeIn_1tupw_1"
-}, Ke = (e = "text", t) => {
+	inputWrapper: "_inputWrapper_y9bue_1",
+	input: "_input_y9bue_1",
+	error: "_error_y9bue_41",
+	sm: "_sm_y9bue_48",
+	md: "_md_y9bue_52",
+	lg: "_lg_y9bue_56",
+	hasLeftAdornment: "_hasLeftAdornment_y9bue_84",
+	hasRightAdornment: "_hasRightAdornment_y9bue_88",
+	leftAdornment: "_leftAdornment_y9bue_92",
+	rightAdornment: "_rightAdornment_y9bue_93",
+	clearButton: "_clearButton_y9bue_114",
+	toneDefault: "_toneDefault_y9bue_153",
+	tonePrimary: "_tonePrimary_y9bue_157",
+	toneSecondary: "_toneSecondary_y9bue_161",
+	toneSuccess: "_toneSuccess_y9bue_165",
+	toneDanger: "_toneDanger_y9bue_169",
+	toneMuted: "_toneMuted_y9bue_173",
+	toneInverse: "_toneInverse_y9bue_177"
+}, Ke = {
+	default: $.toneDefault,
+	primary: $.tonePrimary,
+	secondary: $.toneSecondary,
+	success: $.toneSuccess,
+	danger: $.toneDanger,
+	muted: $.toneMuted,
+	inverse: $.toneInverse
+}, qe = (e = "text", t) => {
 	if (t) return t;
 	switch (e) {
 		case "email": return "email";
@@ -1016,132 +1021,85 @@ var $ = {
 		case "search": return "off";
 		default: return;
 	}
-}, qe = t(({ id: e, label: t, name: r, description: o, placeholder: l, value: u, defaultValue: d, onChange: m, type: h = "text", size: g = "md", error: _, disabled: v = !1, required: y = !1, className: b, autoComplete: x, readOnly: S = !1, clearable: C = !1, onClear: w, leftAdornment: T, rightAdornment: E, clearIcon: D, leftAdornmentTone: O = "default", rightAdornmentTone: k = "default", showOverflowTooltip: A = !1, autoFocus: j, maxLength: N }, P) => {
-	let ee = a(), F = e ?? ee, I = s(null), [te, L] = c(d ?? ""), [R, z] = c(!1), [B, V] = c(!1), H = u !== void 0, U = H ? u : te, W = U !== "", ne = Ke(h, x), G = C && W && !v && !S, re = D ?? "×", K = n(() => {
-		let e = I.current;
-		if (!e) {
-			z(!1);
-			return;
-		}
-		z(e.scrollWidth > e.clientWidth);
-	}, []);
-	i(() => {
-		if (!A) return;
-		if (K(), typeof ResizeObserver > "u") return window.addEventListener("resize", K), () => {
-			window.removeEventListener("resize", K);
-		};
-		let e = new ResizeObserver(K);
-		return I.current && e.observe(I.current), window.addEventListener("resize", K), () => {
-			e.disconnect(), window.removeEventListener("resize", K);
-		};
-	}, [K, A]), i(() => {
-		A && K();
-	}, [
-		U,
-		K,
-		A
-	]);
-	let ie = n((e) => {
-		if (I.current = e, typeof P == "function") {
-			P(e);
+}, 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: E, leftAdornmentTone: D = "default", rightAdornmentTone: O = "default", clearIconTone: k = "danger", autoFocus: A, maxLength: j, onMouseEnter: N, onMouseLeave: P, "aria-describedby": ee, "aria-invalid": F, ...I }, 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 = qe(m, b), G = S && te && !_ && !x, re = [
+		ee,
+		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;
 		}
-		P && (P.current = e);
-	}, [P]), ae = n((e) => {
+		L && (L.current = e);
+	}, [L]), oe = n((e) => {
 		let t = e.target.value;
-		H || L(t), m?.(t);
-	}, [H, m]), oe = n(() => {
-		H || L(""), m?.(""), w?.(), I.current?.focus();
-	}, [
-		H,
-		m,
-		w
-	]), se = n(() => {
-		A && R && W && V(!0);
-	}, [
-		W,
-		R,
-		A
-	]), ce = n(() => {
-		V(!1);
-	}, []), le = {
-		default: $.toneDefault,
-		primary: $.tonePrimary,
-		secondary: $.toneSecondary,
-		success: $.toneSuccess,
-		danger: $.toneDanger,
-		muted: $.toneMuted,
-		inverse: $.toneInverse
-	}, ue = !G && !!E;
+		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: F,
+		id: z,
 		label: t,
-		description: o,
-		error: _,
-		required: y,
-		disabled: v,
+		description: i,
+		error: g,
+		required: v,
+		disabled: _,
 		children: /* @__PURE__ */ p("div", {
 			className: M($.inputWrapper, {
-				[$.hasLeftAdornment]: !!T,
-				[$.hasRightAdornment]: !!E || G
+				[$.hasLeftAdornment]: !!w,
+				[$.hasRightAdornment]: !!T || G
 			}),
 			children: [
-				T && /* @__PURE__ */ f("span", {
-					className: M($.leftAdornment, le[O]),
-					children: T
+				w && /* @__PURE__ */ f("span", {
+					className: M($.leftAdornment, Ke[D]),
+					children: w
 				}),
 				/* @__PURE__ */ f("input", {
-					ref: ie,
-					id: F,
+					...I,
+					ref: ae,
+					id: z,
 					name: r,
-					type: h,
+					type: m,
 					autoComplete: ne,
-					className: M($.input, $[g], {
-						[$.error]: !!_,
-						[$.withEllipsis]: A
-					}, b),
-					value: U,
-					onChange: ae,
-					placeholder: l,
-					disabled: v,
-					readOnly: S,
-					required: y,
-					autoFocus: j,
-					maxLength: N,
-					"aria-invalid": !!_,
-					"aria-describedby": _ ? `${F}-error` : void 0,
-					onMouseEnter: se,
-					onMouseLeave: ce
+					className: M($.input, $[h], { [$.error]: !!g }, y),
+					value: W,
+					onChange: oe,
+					placeholder: o,
+					disabled: _,
+					readOnly: x,
+					required: v,
+					autoFocus: A,
+					maxLength: j,
+					"aria-invalid": g ? !0 : F,
+					"aria-describedby": re || void 0,
+					onMouseEnter: N,
+					onMouseLeave: P
 				}),
 				G && /* @__PURE__ */ f("button", {
 					type: "button",
-					className: M($.clearButton, le[k]),
-					onClick: oe,
+					className: M($.clearButton, Ke[k]),
+					onClick: se,
 					"aria-label": "Clear input",
-					children: re
-				}),
-				ue && /* @__PURE__ */ f("div", {
-					className: M($.rightAdornment, le[k]),
-					children: E
+					children: ie
 				}),
-				A && B && R && W && /* @__PURE__ */ f("div", {
-					className: $.tooltip,
-					role: "tooltip",
-					children: U
+				ce && /* @__PURE__ */ f("div", {
+					className: M($.rightAdornment, Ke[O]),
+					children: T
 				})
 			]
 		})
 	});
 });
-qe.displayName = "Input";
+Je.displayName = "Input";
 //#endregion
 //#region src/theme/ThemeContext.ts
-var Je = e(null), Ye = (e) => e === "highContrast" ? "high-contrast" : e, Xe = ({ theme: e, defaultTheme: t = "light", onThemeChange: n, children: r }) => {
+var Ye = e(null), Xe = (e) => e === "highContrast" ? "high-contrast" : e, Ze = ({ theme: e, defaultTheme: t = "light", onThemeChange: n, children: r }) => {
 	let [a, s] = T({
 		value: e,
 		defaultValue: t,
 		onChange: n
-	}), c = Ye(a);
+	}), c = Xe(a);
 	i(() => {
 		if (typeof document > "u") return;
 		let { documentElement: e } = document, t = e.dataset.velliraTheme;
@@ -1157,7 +1115,7 @@ var Je = e(null), Ye = (e) => e === "highContrast" ? "high-contrast" : e, Xe = (
 		theme: a,
 		setTheme: s
 	}), [a, s]);
-	return /* @__PURE__ */ f(Je.Provider, {
+	return /* @__PURE__ */ f(Ye.Provider, {
 		value: l,
 		children: /* @__PURE__ */ f("div", {
 			"data-vellira-theme": c,
@@ -1165,13 +1123,13 @@ var Je = e(null), Ye = (e) => e === "highContrast" ? "high-contrast" : e, Xe = (
 		})
 	});
 };
-Xe.displayName = "ThemeProvider";
+Ze.displayName = "ThemeProvider";
 //#endregion
 //#region src/theme/useTheme.ts
-function Ze() {
-	let e = r(Je);
+function Qe() {
+	let e = r(Ye);
 	if (!e) throw Error("useTheme must be used within ThemeProvider.");
 	return e;
 }
 //#endregion
-export { We as Button, Ge as Checkbox, ie as Dropdown, Se as FormField, qe as Input, xe as Modal, Ce as RadioGroup, ke as Select, ze as Tabs, Xe as ThemeProvider, He as Tooltip, Ze as useTheme };
+export { We as Button, Ge as Checkbox, ae 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 };