@vellira-ui/react 2.27.0 → 2.29.0

package/dist/index.js

@@ -88,11 +88,11 @@ var V = (e) => {
 		};
 		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
 	}, [n]);
-}, H = { group: "_group_aviwv_1" }, ne = ({ label: e }) => /* @__PURE__ */ m("li", {
+}, H = { group: "_group_aviwv_1" }, U = ({ label: e }) => /* @__PURE__ */ m("li", {
 	role: "presentation",
 	className: H.group,
 	children: e
-}), U = {
+}), W = {
 	item: "_item_re11y_1",
 	disabled: "_disabled_re11y_21",
 	active: "_active_re11y_34",
@@ -103,7 +103,7 @@ var V = (e) => {
 	"itemText--truncate": "_itemText--truncate_re11y_88",
 	"itemText--wrap": "_itemText--wrap_re11y_93",
 	"itemText--nowrap": "_itemText--nowrap_re11y_97"
-}, re = ({ 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 }) => {
+}, ne = ({ 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 f = t || n;
 	return /* @__PURE__ */ h("li", {
 		id: e,
@@ -114,32 +114,32 @@ var V = (e) => {
 		"data-danger": i || void 0,
 		onClick: a ? void 0 : s,
 		onMouseEnter: a ? void 0 : c,
-		className: L(U.item, {
-			[U.active]: o,
-			[U.disabled]: a,
-			[U.danger]: i
+		className: L(W.item, {
+			[W.active]: o,
+			[W.disabled]: a,
+			[W.danger]: i
 		}, d),
 		children: [
 			r && /* @__PURE__ */ m("span", {
 				"aria-hidden": "true",
-				className: U.itemIcon,
+				className: W.itemIcon,
 				children: r
 			}),
 			f && /* @__PURE__ */ m("span", {
-				className: L(U.itemText, U[`itemText--${u}`]),
+				className: L(W.itemText, W[`itemText--${u}`]),
 				children: f
 			}),
 			l && /* @__PURE__ */ m("span", {
-				className: U.itemShortcut,
+				className: W.itemShortcut,
 				children: l
 			})
 		]
 	});
-}, W = { separator: "_separator_1v11r_1" }, ie = () => /* @__PURE__ */ m("li", {
+}, G = { separator: "_separator_1v11r_1" }, re = () => /* @__PURE__ */ m("li", {
 	role: "separator",
-	className: W.separator,
+	className: G.separator,
 	"aria-hidden": "true"
-}), G = {
+}), K = {
 	button: "_button_18ucr_1",
 	disabled: "_disabled_18ucr_20",
 	iconLeft: "_iconLeft_18ucr_32",
@@ -149,15 +149,15 @@ var V = (e) => {
 	md: "_md_18ucr_72",
 	lg: "_lg_18ucr_84",
 	open: "_open_18ucr_123"
-}, ae = n(({ children: e, isOpen: t, icon: n, arrowIcon: r, showArrow: i = !0, rotateAngle: a = 90, size: o = "md", label: s, ariaLabel: c, className: l, ...u }, d) => {
+}, ie = n(({ children: e, isOpen: t, icon: n, arrowIcon: r, showArrow: i = !0, rotateAngle: a = 90, size: o = "md", label: s, ariaLabel: c, className: l, ...u }, d) => {
 	let f = !!n, p = !!e, g = f && !p, _ = i && p, v = r ?? /* @__PURE__ */ m(P, {}), y = c ?? (g ? typeof s == "string" ? s : "Open menu" : void 0);
 	return /* @__PURE__ */ h("button", {
 		...u,
 		ref: d,
 		type: "button",
-		className: L(G.button, G[o], {
-			[G.disabled]: u.disabled,
-			[G.iconOnly]: g
+		className: L(K.button, K[o], {
+			[K.disabled]: u.disabled,
+			[K.iconOnly]: g
 		}, l),
 		"aria-label": y,
 		"aria-expanded": t,
@@ -166,30 +166,30 @@ var V = (e) => {
 		children: [
 			f && /* @__PURE__ */ m("span", {
 				"aria-hidden": "true",
-				className: G.iconLeft,
+				className: K.iconLeft,
 				children: n
 			}),
 			e,
 			_ && /* @__PURE__ */ m("span", {
 				"aria-hidden": "true",
-				className: L(G.arrow, { [G.open]: t }),
+				className: L(K.arrow, { [K.open]: t }),
 				children: v
 			})
 		]
 	});
 });
-ae.displayName = "DropdownTrigger";
+ie.displayName = "DropdownTrigger";
 //#endregion
 //#region src/components/Dropdown/types.ts
-var oe = (e) => e.type === void 0 || e.type === "item", se = (e) => e.type === "group", ce = (e) => e.type === "separator", le = { wrapper: "_wrapper_14ue8_1" }, ue = ({ label: e, ariaLabel: t, icon: n, trigger: r, items: a = [], onSelect: o, open: u, defaultOpen: d = !1, onOpenChange: f, size: p = "md", className: g, triggerClassName: _, contentClassName: v, itemClassName: y, disabled: b, rotateAngle: x = 90, placement: S, matchTriggerWidth: C, textWrap: w, showArrow: T = !0, arrowIcon: E }) => {
+var ae = (e) => e.type === void 0 || e.type === "item", oe = (e) => e.type === "group", se = (e) => e.type === "separator", ce = { wrapper: "_wrapper_14ue8_1" }, le = ({ label: e, ariaLabel: t, icon: n, trigger: r, items: a = [], onSelect: o, open: u, defaultOpen: d = !1, onOpenChange: f, size: p = "md", className: g, triggerClassName: _, contentClassName: v, itemClassName: y, disabled: b, rotateAngle: x = 90, placement: S, matchTriggerWidth: C, textWrap: w, showArrow: T = !0, arrowIcon: E }) => {
 	let D = l(null), k = l(null), A = s(), j = `${A}-trigger`, { floatingStyles: M, setRef: N, setFloatingRef: P } = ee({
 		placement: S,
 		matchTriggerWidth: C,
 		mobileSheetBreakpoint: 640
-	}), F = c(() => a.flatMap((e, t) => oe(e) ? [{
+	}), F = c(() => a.flatMap((e, t) => ae(e) ? [{
 		item: e,
 		itemIndex: t
-	}] : []), [a]), I = c(() => F.map(({ item: e }) => e), [F]), R = c(() => new Map(F.map(({ itemIndex: e }, t) => [e, t])), [F]), { activeIndex: z, setActiveIndex: V, isOpen: H, closeDropdown: U, toggleDropdown: W, selectItem: G, onKeyDown: ue } = O({
+	}] : []), [a]), I = c(() => F.map(({ item: e }) => e), [F]), R = c(() => new Map(F.map(({ itemIndex: e }, t) => [e, t])), [F]), { activeIndex: z, setActiveIndex: V, isOpen: H, closeDropdown: W, toggleDropdown: G, selectItem: K, onKeyDown: le } = O({
 		items: I,
 		open: u,
 		defaultOpen: d,
@@ -200,19 +200,19 @@ var oe = (e) => e.type === void 0 || e.type === "item", se = (e) => e.type === "
 		}, [o]),
 		getItemValue: (e) => e.value,
 		getItemText: (e) => typeof e.label == "string" ? e.label : e.value
-	}), de = H && z >= 0 ? `${A}-item-${z}` : void 0;
-	te([D, k], U, H);
-	let fe = i((e) => {
-		ue(e), H && e.key === "Escape" && D.current?.focus();
-	}, [H, ue]), pe = i((e) => {
+	}), ue = H && z >= 0 ? `${A}-item-${z}` : void 0;
+	te([D, k], W, H);
+	let de = i((e) => {
+		le(e), H && e.key === "Escape" && D.current?.focus();
+	}, [H, le]), fe = i((e) => {
 		D.current = e, N(e);
-	}, [N]), me = i((e) => {
+	}, [N]), pe = i((e) => {
 		k.current = e, P(e), e?.focus();
 	}, [P]);
 	return /* @__PURE__ */ h("div", {
-		className: L(le.wrapper, g),
-		children: [/* @__PURE__ */ m(ae, {
-			ref: pe,
+		className: L(ce.wrapper, g),
+		children: [/* @__PURE__ */ m(ie, {
+			ref: fe,
 			id: j,
 			isOpen: H,
 			disabled: b,
@@ -224,34 +224,34 @@ var oe = (e) => e.type === void 0 || e.type === "item", se = (e) => e.type === "
 			arrowIcon: E,
 			rotateAngle: x,
 			className: _,
-			onClick: W,
-			onKeyDown: fe,
+			onClick: G,
+			onKeyDown: de,
 			"aria-expanded": H,
 			"aria-haspopup": "menu",
 			...H && { "aria-controls": A },
 			children: r
 		}), H && /* @__PURE__ */ m(B, {
-			ref: me,
+			ref: pe,
 			floatingStyles: M,
 			menuId: A,
 			labelledById: r ? j : void 0,
 			label: t ?? (!r && typeof e == "string" ? e : void 0),
-			activeDescendantId: de,
-			onKeyDown: fe,
+			activeDescendantId: ue,
+			onKeyDown: de,
 			className: v,
 			children: a.map((e, t) => {
-				if (se(e)) return /* @__PURE__ */ m(ne, { label: e.label }, `group-${e.label}`);
-				if (ce(e)) return /* @__PURE__ */ m(ie, {}, `separator-${t}`);
-				if (oe(e)) {
+				if (oe(e)) return /* @__PURE__ */ m(U, { label: e.label }, `group-${e.label}`);
+				if (se(e)) return /* @__PURE__ */ m(re, {}, `separator-${t}`);
+				if (ae(e)) {
 					let n = R.get(t) ?? -1;
-					return /* @__PURE__ */ m(re, {
+					return /* @__PURE__ */ m(ne, {
 						id: `${A}-item-${n}`,
 						...e,
 						active: z === n,
 						textWrap: e.textWrap || w,
 						className: y,
 						onClick: () => {
-							G(e), D.current?.focus();
+							K(e), D.current?.focus();
 						},
 						onMouseEnter: () => {
 							n < 0 || e.disabled || V(n);
@@ -262,78 +262,78 @@ var oe = (e) => e.type === void 0 || e.type === "item", se = (e) => e.type === "
 			})
 		})]
 	});
-}, de = t(void 0), fe = () => {
-	let e = a(de);
+}, ue = t(void 0), de = () => {
+	let e = a(ue);
 	if (e === void 0) throw Error("Modal compound components must be used inside Modal");
 	return e;
 };
-de.displayName = "ModalContext";
-var pe = { modalBody: "_modalBody_iv33a_1" }, me = ({ children: e }) => {
-	let { descriptionId: t } = fe();
+ue.displayName = "ModalContext";
+var fe = { modalBody: "_modalBody_iv33a_1" }, pe = ({ children: e }) => {
+	let { descriptionId: t } = de();
 	return /* @__PURE__ */ m("div", {
 		id: t,
-		className: pe.modalBody,
+		className: fe.modalBody,
 		children: e
 	});
 };
-me.displayName = "ModalBody";
-var he = { content: "_content_k44g7_1" }, ge = ({ children: e }) => /* @__PURE__ */ m("div", {
-	className: he.content,
+pe.displayName = "ModalBody";
+var me = { content: "_content_k44g7_1" }, he = ({ children: e }) => /* @__PURE__ */ m("div", {
+	className: me.content,
 	children: e
 });
-ge.displayName = "ModalContent";
-var _e = { modalFooter: "_modalFooter_ezys6_1" }, ve = ({ children: e }) => /* @__PURE__ */ m("div", {
-	className: _e.modalFooter,
+he.displayName = "ModalContent";
+var ge = { modalFooter: "_modalFooter_ezys6_1" }, _e = ({ children: e }) => /* @__PURE__ */ m("div", {
+	className: ge.modalFooter,
 	children: e
 });
-ve.displayName = "ModalFooter";
-var ye = {
+_e.displayName = "ModalFooter";
+var ve = {
 	modalHeader: "_modalHeader_p8xf1_1",
 	modalHeaderTitle: "_modalHeaderTitle_p8xf1_7",
 	modalHeaderCloseButton: "_modalHeaderCloseButton_p8xf1_14"
-}, be = ({ children: e }) => {
-	let { onClose: t, titleId: n } = fe();
+}, ye = ({ children: e }) => {
+	let { onClose: t, titleId: n } = de();
 	return /* @__PURE__ */ h("div", {
-		className: ye.modalHeader,
+		className: ve.modalHeader,
 		children: [/* @__PURE__ */ m("h2", {
 			id: n,
-			className: ye.modalHeaderTitle,
+			className: ve.modalHeaderTitle,
 			children: e
 		}), t && /* @__PURE__ */ m("button", {
 			type: "button",
-			className: ye.modalHeaderCloseButton,
+			className: ve.modalHeaderCloseButton,
 			onClick: t,
 			"aria-label": "Close modal",
 			children: /* @__PURE__ */ m(F, { size: 16 })
 		})]
 	});
 };
-be.displayName = "ModalHeader";
+ye.displayName = "ModalHeader";
 //#endregion
 //#region src/hooks/useModalKeyboard.ts
-var xe = ({ isOpen: e, onClose: t }) => {
+var be = ({ isOpen: e, onClose: t }) => {
 	let n = i((n) => {
 		e && n.key === "Escape" && (n.preventDefault(), t?.());
 	}, [e, t]);
 	o(() => (document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n)), [n]);
-}, Se = {
+}, xe = {
 	overlay: "_overlay_dcudn_1",
 	"overlay--open": "_overlay--open_dcudn_14",
 	modal: "_modal_dcudn_20",
 	"overlay--animated": "_overlay--animated_dcudn_28"
-}, Ce = 0, we = "", Te = ({ children: e, onClose: t, isOpen: n, className: r, closeOnBackdrop: a, closeOnClick: s, closeOnEsc: c = !0, zIndex: u = 1e3, animated: d = !0 }) => {
-	let f = a ?? s ?? !0, p = l(null), { titleId: h, descriptionId: g } = fe(), _ = i((e) => {
+}, Se = 0, Ce = "", we = ({ children: e, onClose: t, isOpen: n, className: r, closeOnBackdrop: a, closeOnClick: s, closeOnEsc: c = !0, zIndex: u = 1e3, animated: d = !0 }) => {
+	let f = a ?? s ?? !0, p = l(null), { titleId: h, descriptionId: g } = de(), _ = i((e) => {
 		f && e.target === e.currentTarget && t?.();
 	}, [f, t]);
-	return xe({
+	return be({
 		isOpen: n,
 		onClose: c ? t : void 0
 	}), o(() => {
-		if (n) return Ce === 0 && (we = document.body.style.overflow), Ce += 1, document.body.style.overflow = "hidden", () => {
-			Ce = Math.max(0, Ce - 1), Ce === 0 && (document.body.style.overflow = we);
+		if (n) return Se === 0 && (Ce = document.body.style.overflow), Se += 1, document.body.style.overflow = "hidden", () => {
+			Se = Math.max(0, Se - 1), Se === 0 && (document.body.style.overflow = Ce);
 		};
 	}, [n]), !n && !d ? null : /* @__PURE__ */ m(R, { children: /* @__PURE__ */ m("div", {
-		className: L(Se.overlay, n && Se["overlay--open"], d && Se["overlay--animated"], r),
+		className: L(xe.overlay, n && xe["overlay--open"], d && xe["overlay--animated"], r),
 		onClick: _,
 		tabIndex: -1,
 		role: "presentation",
@@ -349,7 +349,7 @@ var xe = ({ isOpen: e, onClose: t }) => {
 			children: /* @__PURE__ */ m("div", {
 				ref: p,
 				tabIndex: -1,
-				className: Se.modal,
+				className: xe.modal,
 				role: "dialog",
 				"aria-modal": "true",
 				"aria-labelledby": h,
@@ -359,10 +359,10 @@ var xe = ({ isOpen: e, onClose: t }) => {
 		})
 	}) });
 };
-Te.displayName = "ModalOverlay";
+we.displayName = "ModalOverlay";
 //#endregion
 //#region src/components/Modal/Modal.tsx
-var Ee = ({ isOpen: e, children: t, onClose: n, closeOnBackdrop: r, closeOnClick: i, closeOnEsc: a = !0 }) => {
+var Te = ({ isOpen: e, children: t, onClose: n, closeOnBackdrop: r, closeOnClick: i, closeOnEsc: a = !0 }) => {
 	let o = k({
 		isOpen: e,
 		onClose: n,
@@ -370,34 +370,34 @@ var Ee = ({ isOpen: e, children: t, onClose: n, closeOnBackdrop: r, closeOnClick
 		closeOnClick: i,
 		closeOnEsc: a
 	});
-	return o.shouldRender ? /* @__PURE__ */ m(de.Provider, {
+	return o.shouldRender ? /* @__PURE__ */ m(ue.Provider, {
 		value: {
 			onClose: o.onClose,
 			titleId: o.titleId,
 			descriptionId: o.descriptionId
 		},
-		children: /* @__PURE__ */ m(Te, {
+		children: /* @__PURE__ */ m(we, {
 			isOpen: o.isOpen,
 			onClose: o.onClose,
 			closeOnBackdrop: o.closeOnBackdrop,
 			closeOnEsc: o.closeOnEsc,
-			children: /* @__PURE__ */ m(ge, { children: t })
+			children: /* @__PURE__ */ m(he, { children: t })
 		})
 	}) : null;
 };
-Ee.displayName = "Modal";
+Te.displayName = "Modal";
 //#endregion
 //#region src/components/Modal/index.ts
-var De = Object.assign(Ee, {
-	Header: be,
-	Body: me,
-	Content: ge,
-	Footer: ve
-}), Oe = t(null), ke = Oe.Provider;
-function Ae() {
-	return a(Oe);
+var Ee = Object.assign(Te, {
+	Header: ye,
+	Body: pe,
+	Content: he,
+	Footer: _e
+}), De = t(null), Oe = De.Provider;
+function ke() {
+	return a(De);
 }
-var K = {
+var q = {
 	root: "_root_1n02e_1",
 	label: "_label_1n02e_9",
 	required: "_required_1n02e_21",
@@ -408,64 +408,65 @@ var K = {
 	error: "_error_1n02e_51",
 	disabled: "_disabled_1n02e_59",
 	invalid: "_invalid_1n02e_75"
-}, je = n(({ value: e, defaultValue: t = "", onValueChange: n, disabled: r = !1, required: i = !1, size: a = "md", name: o, label: c, description: l, error: u, orientation: d = "vertical", children: f, className: p, id: g, ..._ }, v) => {
-	let y = s(), b = g ?? y, x = c ? `${b}-label` : void 0, S = l ? `${b}-description` : void 0, C = u ? `${b}-error` : void 0, w = [S, C].filter(Boolean).join(" ") || void 0, T = o ?? `${b}-radio`, [E, O] = D({
+}, Ae = n(({ value: e, defaultValue: t = "", onValueChange: n, disabled: r = !1, required: i = !1, size: a = "md", color: o = "primary", name: c, label: l, description: u, error: d, orientation: f = "vertical", children: p, className: g, id: _, ...v }, y) => {
+	let b = s(), x = _ ?? b, S = l ? `${x}-label` : void 0, C = u ? `${x}-description` : void 0, w = d ? `${x}-error` : void 0, T = [C, w].filter(Boolean).join(" ") || void 0, E = c ?? `${x}-radio`, [O, k] = D({
 		value: e,
 		defaultValue: t,
 		onChange: n
-	}), k = !!u;
+	}), A = !!d;
 	return /* @__PURE__ */ h("div", {
-		..._,
-		ref: v,
-		id: b,
+		...v,
+		ref: y,
+		id: x,
 		role: "radiogroup",
-		"aria-labelledby": x,
-		"aria-describedby": w,
+		"aria-labelledby": S,
+		"aria-describedby": T,
 		"aria-disabled": r || void 0,
 		"aria-required": i || void 0,
-		"aria-invalid": k || void 0,
-		className: L(K.root, k && K.invalid, r && K.disabled, p),
+		"aria-invalid": A || void 0,
+		className: L(q.root, A && q.invalid, r && q.disabled, g),
 		children: [
-			c && /* @__PURE__ */ h("div", {
-				id: x,
-				className: K.label,
-				children: [c, i && /* @__PURE__ */ m("span", {
-					className: K.required,
+			l && /* @__PURE__ */ h("div", {
+				id: S,
+				className: q.label,
+				children: [l, i && /* @__PURE__ */ m("span", {
+					className: q.required,
 					"aria-hidden": "true",
 					children: "*"
 				})]
 			}),
-			l && /* @__PURE__ */ m("div", {
-				id: S,
-				className: K.description,
-				children: l
+			u && /* @__PURE__ */ m("div", {
+				id: C,
+				className: q.description,
+				children: u
 			}),
-			/* @__PURE__ */ m(ke, {
+			/* @__PURE__ */ m(Oe, {
 				value: {
-					name: T,
-					value: E,
+					name: E,
+					value: O,
 					disabled: r,
 					required: i,
-					invalid: k,
+					invalid: A,
 					size: a,
-					describedBy: w,
-					onValueChange: O
+					color: o,
+					describedBy: T,
+					onValueChange: k
 				},
 				children: /* @__PURE__ */ m("div", {
-					className: L(K.items, K[d]),
-					children: f
+					className: L(q.items, q[f]),
+					children: p
 				})
 			}),
-			u && /* @__PURE__ */ m("div", {
-				id: C,
-				className: K.error,
-				children: u
+			d && /* @__PURE__ */ m("div", {
+				id: w,
+				className: q.error,
+				children: d
 			})
 		]
 	});
 });
-je.displayName = "RadioGroup";
-var q = {
+Ae.displayName = "RadioGroup";
+var J = {
 	wrapper: "_wrapper_byl2d_1",
 	label: "_label_byl2d_9",
 	required: "_required_byl2d_20",
@@ -473,59 +474,59 @@ var q = {
 	control: "_control_byl2d_32",
 	errorText: "_errorText_byl2d_40",
 	disabled: "_disabled_byl2d_54"
-}, Me = ({ id: e, label: t, description: n, error: r, required: i = !1, disabled: a = !1, children: o, className: s, controlClassName: c, labelClassName: l, descriptionClassName: u, errorClassName: d, ...f }) => {
+}, je = ({ id: e, label: t, description: n, error: r, required: i = !1, disabled: a = !1, children: o, className: s, controlClassName: c, labelClassName: l, descriptionClassName: u, errorClassName: d, ...f }) => {
 	let p = n && e ? `${e}-description` : void 0, g = r && e ? `${e}-error` : void 0;
 	return /* @__PURE__ */ h("div", {
 		...f,
 		"aria-disabled": a || void 0,
-		className: L(q.wrapper, a && q.disabled, s),
+		className: L(J.wrapper, a && J.disabled, s),
 		"data-disabled": a || void 0,
 		"data-invalid": !!r || void 0,
 		children: [
 			t && /* @__PURE__ */ h("label", {
 				htmlFor: e,
-				className: L(q.label, l),
+				className: L(J.label, l),
 				children: [t, i && /* @__PURE__ */ m("span", {
-					className: q.required,
+					className: J.required,
 					"aria-hidden": "true",
 					children: "*"
 				})]
 			}),
 			n && /* @__PURE__ */ m("div", {
 				id: p,
-				className: L(q.description, u),
+				className: L(J.description, u),
 				children: n
 			}),
 			/* @__PURE__ */ m("div", {
-				className: L(q.control, c),
+				className: L(J.control, c),
 				children: o
 			}),
 			r && /* @__PURE__ */ m("div", {
 				id: g,
-				className: L(q.errorText, d),
+				className: L(J.errorText, d),
 				role: "alert",
 				children: r
 			})
 		]
 	});
-}, Ne = {
+}, Me = {
 	option: "_option_l6qjj_1",
 	selected: "_selected_l6qjj_18",
 	disabled: "_disabled_l6qjj_18",
 	active: "_active_l6qjj_34",
 	label: "_label_l6qjj_46",
 	check: "_check_l6qjj_54"
-}, Pe = ({ option: e, isSelected: t, isActive: n, optionId: r, onSelect: i, onMouseEnter: a }) => {
+}, Ne = ({ option: e, isSelected: t, isActive: n, optionId: r, onSelect: i, onMouseEnter: a }) => {
 	let o = !!e.disabled;
 	return /* @__PURE__ */ h("li", {
 		id: r,
 		role: "option",
 		"aria-selected": t,
 		"aria-disabled": o || void 0,
-		className: L(Ne.option, {
-			[Ne.selected]: t,
-			[Ne.active]: n,
-			[Ne.disabled]: o
+		className: L(Me.option, {
+			[Me.selected]: t,
+			[Me.active]: n,
+			[Me.disabled]: o
 		}),
 		onClick: () => {
 			o || i(e.value);
@@ -534,28 +535,28 @@ var q = {
 			o || a();
 		},
 		children: [/* @__PURE__ */ m("span", {
-			className: Ne.label,
+			className: Me.label,
 			children: e.label
 		}), /* @__PURE__ */ m("span", {
-			className: Ne.check,
+			className: Me.check,
 			"aria-hidden": "true",
 			children: t && /* @__PURE__ */ m(N, {})
 		})]
 	});
 };
-Pe.displayName = "SelectOption";
-var Fe = {
+Ne.displayName = "SelectOption";
+var Pe = {
 	dropdown: "_dropdown_qznlq_1",
 	dropdownIn: "_dropdownIn_qznlq_1",
 	empty: "_empty_qznlq_17"
-}, Ie = ({ isOpen: e, listboxId: t, labelledById: n, setDropdownRef: r, style: i, options: a, noOptionsText: o, selectedValue: s, activeIndex: c, className: l, onSelect: u, onMouseEnter: d }) => e ? /* @__PURE__ */ m(R, { children: /* @__PURE__ */ m("ul", {
+}, Fe = ({ isOpen: e, listboxId: t, labelledById: n, setDropdownRef: r, style: i, options: a, noOptionsText: o, selectedValue: s, activeIndex: c, className: l, onSelect: u, onMouseEnter: d }) => e ? /* @__PURE__ */ m(R, { children: /* @__PURE__ */ m("ul", {
 	ref: r,
 	id: t,
 	role: "listbox",
 	"aria-labelledby": n,
-	className: [Fe.dropdown, l].filter(Boolean).join(" "),
+	className: [Pe.dropdown, l].filter(Boolean).join(" "),
 	style: i,
-	children: a.length ? a.map((e, n) => /* @__PURE__ */ m(Pe, {
+	children: a.length ? a.map((e, n) => /* @__PURE__ */ m(Ne, {
 		option: e,
 		isSelected: e.value === s,
 		isActive: n === c,
@@ -566,12 +567,12 @@ var Fe = {
 		role: "option",
 		"aria-disabled": "true",
 		"aria-selected": "false",
-		className: Fe.empty,
+		className: Pe.empty,
 		children: o
 	})
 }) }) : null;
-Ie.displayName = "SelectDropdown";
-var J = {
+Fe.displayName = "SelectDropdown";
+var Y = {
 	control: "_control_1xma1_1",
 	disabled: "_disabled_1xma1_18",
 	arrow: "_arrow_1xma1_23",
@@ -582,7 +583,7 @@ var J = {
 	placeholder: "_placeholder_1xma1_63",
 	error: "_error_1xma1_67",
 	open: "_open_1xma1_109"
-}, Le = ({ id: e, errorId: t, isOpen: n, disabled: r, required: i, listboxId: a, activeIndex: o, ariaLabel: s, error: c, displayText: l, isPlaceholder: u, size: d = "md", className: f, buttonRef: p, onClick: g, onKeyDown: _, onBlur: v, onFocus: y }) => /* @__PURE__ */ h("button", {
+}, Ie = ({ id: e, errorId: t, isOpen: n, disabled: r, required: i, listboxId: a, activeIndex: o, ariaLabel: s, error: c, displayText: l, isPlaceholder: u, size: d = "md", className: f, buttonRef: p, onClick: g, onKeyDown: _, onBlur: v, onFocus: y }) => /* @__PURE__ */ h("button", {
 	id: e,
 	ref: p,
 	type: "button",
@@ -597,28 +598,28 @@ var J = {
 	"aria-controls": n ? a : void 0,
 	"aria-describedby": t,
 	"aria-activedescendant": n && o >= 0 ? `${a}-option-${o}` : void 0,
-	className: L(J.control, J[d], {
-		[J.error]: !!c,
-		[J.disabled]: r
+	className: L(Y.control, Y[d], {
+		[Y.error]: !!c,
+		[Y.disabled]: r
 	}, f),
 	onClick: g,
 	onKeyDown: _,
 	onBlur: v,
 	onFocus: y,
 	children: [/* @__PURE__ */ m("span", {
-		className: L(J.value, { [J.placeholder]: u }),
+		className: L(Y.value, { [Y.placeholder]: u }),
 		children: l
 	}), /* @__PURE__ */ m("span", {
-		className: L(J.arrow, { [J.open]: n }),
+		className: L(Y.arrow, { [Y.open]: n }),
 		"aria-hidden": "true",
 		children: /* @__PURE__ */ m(P, {})
 	})]
 });
-Le.displayName = "SelectTrigger";
+Ie.displayName = "SelectTrigger";
 //#endregion
 //#region src/components/Select/Select.tsx
-var Re = ({ label: e, description: t, id: n, name: r, "aria-label": a, value: o, defaultValue: c, onChange: u, options: d, placeholder: f = "Select...", noOptionsText: p = "No options available", size: g = "md", required: _ = !1, disabled: v = !1, error: y, placement: b = "bottom-start", matchTriggerWidth: x = !0, open: S, defaultOpen: C = !1, onOpenChange: w, onBlur: T, onFocus: E, className: D, triggerClassName: O, dropdownClassName: k }) => {
-	let j = s(), M = n ?? j, N = `${M}-listbox`, P = !!y, F = P ? `${M}-error` : void 0, I = l(null), L = l(null), { selectedValue: R, selectedOption: z, isOpen: B, setIsOpen: V, activeIndex: H, setActiveIndex: ne, closeDropdown: U, toggleDropdown: re, selectValue: W, onKeyDown: ie } = A({
+var Le = ({ label: e, description: t, id: n, name: r, "aria-label": a, value: o, defaultValue: c, onChange: u, options: d, placeholder: f = "Select...", noOptionsText: p = "No options available", size: g = "md", required: _ = !1, disabled: v = !1, error: y, placement: b = "bottom-start", matchTriggerWidth: x = !0, open: S, defaultOpen: C = !1, onOpenChange: w, onBlur: T, onFocus: E, className: D, triggerClassName: O, dropdownClassName: k }) => {
+	let j = s(), M = n ?? j, N = `${M}-listbox`, P = !!y, F = P ? `${M}-error` : void 0, I = l(null), L = l(null), { selectedValue: R, selectedOption: z, isOpen: B, setIsOpen: V, activeIndex: H, setActiveIndex: U, closeDropdown: W, toggleDropdown: ne, selectValue: G, onKeyDown: re } = A({
 		value: o,
 		defaultValue: c,
 		onChange: u,
@@ -627,22 +628,22 @@ var Re = ({ label: e, description: t, id: n, name: r, "aria-label": a, value: o,
 		open: S,
 		defaultOpen: C,
 		onOpenChange: w
-	}), G = !!z, { floatingStyles: ae, setRef: oe, setFloatingRef: se } = ee({
+	}), K = !!z, { floatingStyles: ie, setRef: ae, setFloatingRef: oe } = ee({
 		open: B,
 		onOpenChange: V,
 		placement: b,
 		matchTriggerWidth: x,
 		mobileSheetBreakpoint: 640
-	}), ce = i((e) => {
-		W(e), I.current?.focus();
-	}, [W]);
-	te([I, L], U, B);
-	let le = i((e) => {
-		I.current = e, oe(e);
-	}, [oe]), ue = i((e) => {
-		L.current = e, se(e);
-	}, [se]);
-	return /* @__PURE__ */ h(Me, {
+	}), se = i((e) => {
+		G(e), I.current?.focus();
+	}, [G]);
+	te([I, L], W, B);
+	let ce = i((e) => {
+		I.current = e, ae(e);
+	}, [ae]), le = i((e) => {
+		L.current = e, oe(e);
+	}, [oe]);
+	return /* @__PURE__ */ h(je, {
 		id: M,
 		label: e,
 		description: t,
@@ -651,7 +652,7 @@ var Re = ({ label: e, description: t, id: n, name: r, "aria-label": a, value: o,
 		disabled: v,
 		className: D,
 		children: [
-			/* @__PURE__ */ m(Le, {
+			/* @__PURE__ */ m(Ie, {
 				id: M,
 				errorId: F,
 				isOpen: B,
@@ -662,12 +663,12 @@ var Re = ({ label: e, description: t, id: n, name: r, "aria-label": a, value: o,
 				ariaLabel: a ?? (e ? void 0 : z?.label || f),
 				error: P,
 				displayText: z?.label ?? f,
-				isPlaceholder: !G,
+				isPlaceholder: !K,
 				size: g,
 				className: O,
-				buttonRef: le,
-				onClick: re,
-				onKeyDown: ie,
+				buttonRef: ce,
+				onClick: ne,
+				onKeyDown: re,
 				onBlur: T,
 				onFocus: E
 			}),
@@ -677,50 +678,50 @@ var Re = ({ label: e, description: t, id: n, name: r, "aria-label": a, value: o,
 				value: R,
 				disabled: v
 			}),
-			/* @__PURE__ */ m(Ie, {
+			/* @__PURE__ */ m(Fe, {
 				isOpen: B,
 				listboxId: N,
 				labelledById: M,
-				style: ae,
+				style: ie,
 				options: d,
 				noOptionsText: p,
 				selectedValue: R,
 				activeIndex: H,
 				className: k,
-				setDropdownRef: ue,
-				onSelect: ce,
-				onMouseEnter: ne
+				setDropdownRef: le,
+				onSelect: se,
+				onMouseEnter: U
 			})
 		]
 	});
 };
-Re.displayName = "Select";
+Le.displayName = "Select";
 //#endregion
 //#region src/components/Tabs/TabsContext.tsx
-var ze = t(null), Be = () => {
-	let e = a(ze);
+var Re = t(null), ze = () => {
+	let e = a(Re);
 	if (!e) throw Error("Tabs components must be used inside Tabs");
 	return e;
-}, Ve = {
+}, Be = {
 	list: "_list_13hkl_1",
 	vertical: "_vertical_13hkl_8"
-}, He = ({ children: e, className: t, ...n }) => {
-	let { orientation: r, appearance: i } = Be();
+}, Ve = ({ children: e, className: t, ...n }) => {
+	let { orientation: r, appearance: i } = ze();
 	return /* @__PURE__ */ m("div", {
 		...n,
 		role: "tablist",
 		"aria-orientation": r,
-		className: L(Ve.list, r === "vertical" && Ve.vertical, i === "underline" && Ve.underline, i === "pills" && Ve.pills, t),
+		className: L(Be.list, r === "vertical" && Be.vertical, i === "underline" && Be.underline, i === "pills" && Be.pills, t),
 		children: e
 	});
 };
-He.displayName = "TabsList";
-var Ue = {
+Ve.displayName = "TabsList";
+var He = {
 	panel: "_panel_1v1a9_1",
 	visible: "_visible_1v1a9_10",
 	vertical: "_vertical_1v1a9_14"
-}, We = ({ index: e, children: t, className: n }) => {
-	let { activeIndex: r, orientation: i } = Be(), [a, s] = u(!1), c = r === e;
+}, Ue = ({ index: e, children: t, className: n }) => {
+	let { activeIndex: r, orientation: i } = ze(), [a, s] = u(!1), c = r === e;
 	return o(() => {
 		if (!c) {
 			s(!1);
@@ -734,12 +735,12 @@ var Ue = {
 		"aria-labelledby": `tab-${e}`,
 		hidden: !c,
 		tabIndex: 0,
-		className: L(Ue.panel, a && Ue.visible, i === "vertical" && Ue.vertical, n),
+		className: L(He.panel, a && He.visible, i === "vertical" && He.vertical, n),
 		children: t
 	});
 };
-We.displayName = "TabsPanel";
-var Y = {
+Ue.displayName = "TabsPanel";
+var We = {
 	tab: "_tab_qe8xc_1",
 	iconOnly: "_iconOnly_qe8xc_27",
 	tabIcon: "_tabIcon_qe8xc_31",
@@ -749,7 +750,7 @@ var Y = {
 	pills: "_pills_qe8xc_92",
 	vertical: "_vertical_qe8xc_106"
 }, Ge = n(({ index: e, children: t, className: n, disabled: r = !1, icon: a, onClick: o, onKeyDown: s, ...c }, l) => {
-	let { activeIndex: u, setActiveIndex: d, orientation: f, appearance: p = "default", registerTab: g, onTabKeyDown: _ } = Be(), v = u === e, y = !!a, b = y && t == null;
+	let { activeIndex: u, setActiveIndex: d, orientation: f, appearance: p = "default", registerTab: g, onTabKeyDown: _ } = ze(), v = u === e, y = !!a, b = y && t == null;
 	return /* @__PURE__ */ h("button", {
 		type: "button",
 		ref: i((t) => {
@@ -765,7 +766,7 @@ var Y = {
 		id: `tab-${e}`,
 		disabled: r,
 		tabIndex: v ? 0 : -1,
-		className: L(Y.tab, Y[p], f === "vertical" && Y.vertical, y && Y.withIcon, b && Y.iconOnly, n),
+		className: L(We.tab, We[p], f === "vertical" && We.vertical, y && We.withIcon, b && We.iconOnly, n),
 		onClick: (t) => {
 			r || (d(e), o?.(t));
 		},
@@ -774,11 +775,11 @@ var Y = {
 		},
 		...c,
 		children: [y && /* @__PURE__ */ m("span", {
-			className: Y.tabIcon,
+			className: We.tabIcon,
 			"aria-hidden": "true",
 			children: a
 		}), t != null && /* @__PURE__ */ m("span", {
-			className: Y.label,
+			className: We.label,
 			children: t
 		})]
 	});
@@ -810,7 +811,7 @@ var Ke = {
 		registerTab: f,
 		onTabKeyDown: p
 	};
-	return /* @__PURE__ */ m(ze.Provider, {
+	return /* @__PURE__ */ m(Re.Provider, {
 		value: h,
 		children: /* @__PURE__ */ m("div", {
 			className: L(Ke.tabs, a === "vertical" && Ke.vertical, s),
@@ -822,9 +823,9 @@ qe.displayName = "Tabs";
 //#endregion
 //#region src/components/Tabs/index.ts
 var Je = Object.assign(qe, {
-	List: He,
+	List: Ve,
 	Tab: Ge,
-	Panel: We
+	Panel: Ue
 }), Ye = {
 	tooltip: "_tooltip_10opu_1",
 	arrow: "_arrow_10opu_25"
@@ -930,22 +931,22 @@ var Qe = (e, t) => {
 	badge: "_badge_2nghu_786",
 	shortcut: "_shortcut_2nghu_800"
 }, $e = n(({ children: t, color: n = "primary", appearance: i = "solid", size: a = "md", shape: o = "pill", type: s = "button", disabled: c = !1, loading: l = !1, loadingText: u, iconStart: d, iconEnd: f, spinner: g, badge: _, shortcut: v, tooltip: y, fullWidth: b = !1, iconOnly: x = !1, asChild: S = !1, className: C, onClick: w, "aria-label": T, "aria-labelledby": E, href: D, target: O, rel: k, download: A, id: j, role: M, tabIndex: N, ...P }, F) => {
-	let I = S && r(t) ? t : void 0, R = I ? I.props.children : t, z = x || !R && !!(d || f), B = !!(T || E || I?.props["aria-label"] || I?.props["aria-labelledby"]), V = c || l, ee = l && u ? u : R, te = u && R && !z && (typeof R == "string" || typeof R == "number") && (typeof u == "string" || typeof u == "number") ? String(l ? R : u) : void 0, H = O === "_blank" && !k ? "noreferrer noopener" : k, ne = L(X.button, X[n], X[i], X[a], X[o], C, {
+	let I = S && r(t) ? t : void 0, R = I ? I.props.children : t, z = x || !R && !!(d || f), B = !!(T || E || I?.props["aria-label"] || I?.props["aria-labelledby"]), V = c || l, ee = l && u ? u : R, te = u && R && !z && (typeof R == "string" || typeof R == "number") && (typeof u == "string" || typeof u == "number") ? String(l ? R : u) : void 0, H = O === "_blank" && !k ? "noreferrer noopener" : k, U = L(X.button, X[n], X[i], X[a], X[o], C, {
 		[X.disabled]: V,
 		[X.loading]: l,
 		[X.fullWidth]: b,
 		[X.iconOnly]: z
 	});
 	Qe(!S || !D, "Button: pass href to the child element when using asChild."), Qe(!S || !!I, "Button: asChild requires a single valid React element child."), Qe(!z || B, "Button: icon-only buttons must provide aria-label or aria-labelledby.");
-	let U = (e) => {
+	let W = (e) => {
 		e.preventDefault(), e.stopPropagation();
-	}, re = (e) => {
+	}, ne = (e) => {
 		if (V) {
-			U(e);
+			W(e);
 			return;
 		}
 		I?.props.onClick?.(e), e.defaultPrevented || w?.(e);
-	}, W = /* @__PURE__ */ h(p, { children: [
+	}, G = /* @__PURE__ */ h(p, { children: [
 		l && (g ? /* @__PURE__ */ m("span", {
 			className: X.icon,
 			"aria-hidden": "true",
@@ -986,12 +987,12 @@ var Qe = (e, t) => {
 		"aria-disabled": V || void 0,
 		"aria-label": T || I.props["aria-label"] || void 0,
 		"aria-labelledby": E || I.props["aria-labelledby"] || void 0,
-		className: L(I.props.className, ne),
+		className: L(I.props.className, U),
 		href: V ? void 0 : I.props.href,
-		onClick: re,
+		onClick: ne,
 		tabIndex: V ? -1 : I.props.tabIndex,
 		title: y || I.props.title,
-		children: W
+		children: G
 	}) : D ? /* @__PURE__ */ m("a", {
 		ref: F,
 		href: V ? void 0 : D,
@@ -1001,14 +1002,14 @@ var Qe = (e, t) => {
 		target: O,
 		rel: H,
 		download: A,
-		onClick: V ? U : w,
+		onClick: V ? W : w,
 		"aria-disabled": V || void 0,
 		"aria-label": T || void 0,
 		"aria-labelledby": E || void 0,
 		"aria-busy": l || void 0,
-		className: ne,
+		className: U,
 		title: y,
-		children: W
+		children: G
 	}) : /* @__PURE__ */ m("button", {
 		...P,
 		ref: F,
@@ -1021,36 +1022,45 @@ var Qe = (e, t) => {
 		"aria-label": T || void 0,
 		"aria-labelledby": E || void 0,
 		"aria-busy": l || void 0,
-		className: ne,
+		className: U,
 		title: y,
-		children: W
+		children: G
 	});
 });
 $e.displayName = "Button";
 var Z = {
-	wrapper: "_wrapper_2j84j_1",
-	wrapperSm: "_wrapperSm_2j84j_12",
-	wrapperMd: "_wrapperMd_2j84j_18",
-	wrapperLg: "_wrapperLg_2j84j_24",
-	iconOnly: "_iconOnly_2j84j_30",
-	container: "_container_2j84j_36",
-	containerSm: "_containerSm_2j84j_43",
-	containerMd: "_containerMd_2j84j_47",
-	containerLg: "_containerLg_2j84j_51",
-	input: "_input_2j84j_55",
-	customCheckbox: "_customCheckbox_2j84j_67",
-	requiredMark: "_requiredMark_2j84j_81",
-	error: "_error_2j84j_92",
-	checkmark: "_checkmark_2j84j_97",
-	indeterminateMark: "_indeterminateMark_2j84j_113",
-	label: "_label_2j84j_123",
-	descriptionText: "_descriptionText_2j84j_129",
-	errorText: "_errorText_2j84j_136",
-	labelSm: "_labelSm_2j84j_143",
-	labelMd: "_labelMd_2j84j_147",
-	labelLg: "_labelLg_2j84j_151",
-	indeterminate: "_indeterminate_2j84j_113",
-	disabled: "_disabled_2j84j_223"
+	wrapper: "_wrapper_wpr9s_1",
+	colorPrimary: "_colorPrimary_wpr9s_27",
+	colorNeutral: "_colorNeutral_wpr9s_45",
+	colorSuccess: "_colorSuccess_wpr9s_63",
+	colorWarning: "_colorWarning_wpr9s_81",
+	colorDanger: "_colorDanger_wpr9s_99",
+	labelStart: "_labelStart_wpr9s_115",
+	wrapperSm: "_wrapperSm_wpr9s_119",
+	wrapperMd: "_wrapperMd_wpr9s_125",
+	wrapperLg: "_wrapperLg_wpr9s_131",
+	iconOnly: "_iconOnly_wpr9s_137",
+	container: "_container_wpr9s_143",
+	containerSm: "_containerSm_wpr9s_150",
+	containerMd: "_containerMd_wpr9s_154",
+	containerLg: "_containerLg_wpr9s_158",
+	containerLabelStart: "_containerLabelStart_wpr9s_162",
+	descriptionText: "_descriptionText_wpr9s_162",
+	errorText: "_errorText_wpr9s_163",
+	input: "_input_wpr9s_167",
+	customCheckbox: "_customCheckbox_wpr9s_179",
+	requiredMark: "_requiredMark_wpr9s_194",
+	error: "_error_wpr9s_163",
+	checkmark: "_checkmark_wpr9s_210",
+	indeterminateMark: "_indeterminateMark_wpr9s_226",
+	customMark: "_customMark_wpr9s_239",
+	label: "_label_wpr9s_115",
+	labelSm: "_labelSm_wpr9s_270",
+	labelMd: "_labelMd_wpr9s_274",
+	labelLg: "_labelLg_wpr9s_278",
+	indeterminate: "_indeterminate_wpr9s_226",
+	"checkbox-pop": "_checkbox-pop_wpr9s_1",
+	disabled: "_disabled_wpr9s_354"
 }, et = {
 	sm: Z.labelSm,
 	md: Z.labelMd,
@@ -1063,62 +1073,71 @@ var Z = {
 	sm: Z.containerSm,
 	md: Z.containerMd,
 	lg: Z.containerLg
-}, rt = n(({ id: e, label: t, description: n, checked: r, size: a = "md", defaultChecked: c = !1, disabled: u = !1, required: d = !1, indeterminate: f = !1, className: p, wrapperClassName: g, onCheckedChange: _, error: v, "aria-label": y, "aria-labelledby": b, "aria-describedby": x, ...S }, C) => {
-	let w = s(), T = e ?? w, E = l(null), O = !!v, k = n ? `${T}-description` : void 0, A = O ? `${T}-error` : void 0, j = [
-		x,
-		k,
-		A
-	].filter(Boolean).join(" "), [M, P] = D({
-		value: r,
-		defaultValue: c,
-		onChange: _
-	}), F = i((e) => {
-		if (E.current = e, typeof C == "function") {
-			C(e);
+}, rt = {
+	primary: Z.colorPrimary,
+	neutral: Z.colorNeutral,
+	success: Z.colorSuccess,
+	warning: Z.colorWarning,
+	danger: Z.colorDanger
+}, it = n(({ id: e, label: t, description: n, icon: r, indeterminateIcon: a, checked: c, size: u = "md", color: d = "primary", labelPosition: f = "end", defaultChecked: p = !1, disabled: g = !1, required: _ = !1, indeterminate: v = !1, className: y, wrapperClassName: b, onCheckedChange: x, error: S, "aria-label": C, "aria-labelledby": w, "aria-describedby": T, ...E }, O) => {
+	let k = s(), A = e ?? k, j = l(null), M = !!S, P = n ? `${A}-description` : void 0, F = M ? `${A}-error` : void 0, I = [
+		T,
+		P,
+		F
+	].filter(Boolean).join(" "), [R, z] = D({
+		value: c,
+		defaultValue: p,
+		onChange: x
+	}), B = i((e) => {
+		if (j.current = e, typeof O == "function") {
+			O(e);
 			return;
 		}
-		C && (C.current = e);
-	}, [C]);
+		O && (O.current = e);
+	}, [O]);
 	o(() => {
-		E.current && (E.current.indeterminate = f);
-	}, [f]);
-	let I = (e) => {
-		P(e.target.checked);
+		j.current && (j.current.indeterminate = v);
+	}, [v]);
+	let V = (e) => {
+		z(e.target.checked);
 	};
-	return Qe(!!(t || y || b), "Checkbox: an accessible label must be provided through label, aria-label, or aria-labelledby."), /* @__PURE__ */ h("div", {
-		className: L(Z.container, nt[a], p),
+	return Qe(!!(t || C || w), "Checkbox: an accessible label must be provided through label, aria-label, or aria-labelledby."), /* @__PURE__ */ h("div", {
+		className: L(Z.container, nt[u], f === "start" && Z.containerLabelStart, y),
 		children: [
 			/* @__PURE__ */ h("label", {
-				htmlFor: T,
-				className: L(Z.wrapper, tt[a], !t && Z.iconOnly, u && Z.disabled, g),
+				htmlFor: A,
+				className: L(Z.wrapper, tt[u], rt[d], f === "start" && Z.labelStart, !t && Z.iconOnly, g && Z.disabled, b),
 				children: [
 					/* @__PURE__ */ m("input", {
-						...S,
-						ref: F,
-						id: T,
+						...E,
+						ref: B,
+						id: A,
 						type: "checkbox",
-						checked: M,
-						disabled: u,
-						required: d,
-						onChange: I,
+						checked: R,
+						disabled: g,
+						required: _,
+						onChange: V,
 						className: Z.input,
-						"aria-label": y,
-						"aria-labelledby": b,
-						"aria-checked": f ? "mixed" : S["aria-checked"],
-						"aria-invalid": O ? !0 : S["aria-invalid"],
-						"aria-describedby": j || void 0
+						"aria-label": C,
+						"aria-labelledby": w,
+						"aria-checked": v ? "mixed" : E["aria-checked"],
+						"aria-invalid": M ? !0 : E["aria-invalid"],
+						"aria-describedby": I || void 0
 					}),
 					/* @__PURE__ */ m("span", {
-						className: L(Z.customCheckbox, O && Z.error, f && Z.indeterminate),
+						className: L(Z.customCheckbox, M && Z.error, v && Z.indeterminate),
 						"aria-hidden": "true",
-						children: f ? /* @__PURE__ */ m("span", { className: Z.indeterminateMark }) : M && /* @__PURE__ */ m("span", {
+						children: v ? /* @__PURE__ */ m("span", {
+							className: L(Z.indeterminateMark, a && Z.customMark),
+							children: a
+						}) : R && /* @__PURE__ */ m("span", {
 							className: Z.checkmark,
-							children: /* @__PURE__ */ m(N, {})
+							children: r ?? /* @__PURE__ */ m(N, {})
 						})
 					}),
 					t && /* @__PURE__ */ h("span", {
-						className: L(Z.label, et[a]),
-						children: [t, d && /* @__PURE__ */ m("span", {
+						className: L(Z.label, et[u]),
+						children: [t, _ && /* @__PURE__ */ m("span", {
 							className: Z.requiredMark,
 							"aria-hidden": "true",
 							children: "*"
@@ -1127,19 +1146,19 @@ var Z = {
 				]
 			}),
 			n && /* @__PURE__ */ m("span", {
-				id: k,
+				id: P,
 				className: Z.descriptionText,
 				children: n
 			}),
-			O && /* @__PURE__ */ m("span", {
-				id: A,
+			M && /* @__PURE__ */ m("span", {
+				id: F,
 				className: Z.errorText,
-				children: v
+				children: S
 			})
 		]
 	});
 });
-rt.displayName = "Checkbox";
+it.displayName = "Checkbox";
 var Q = {
 	inputWrapper: "_inputWrapper_13w4m_1",
 	input: "_input_13w4m_1",
@@ -1159,7 +1178,7 @@ var Q = {
 	toneDanger: "_toneDanger_13w4m_205",
 	toneMuted: "_toneMuted_13w4m_209",
 	toneInverse: "_toneInverse_13w4m_213"
-}, it = {
+}, at = {
 	default: Q.toneDefault,
 	primary: Q.tonePrimary,
 	secondary: Q.toneSecondary,
@@ -1167,7 +1186,7 @@ var Q = {
 	danger: Q.toneDanger,
 	muted: Q.toneMuted,
 	inverse: Q.toneInverse
-}, at = (e = "text", t) => {
+}, ot = (e = "text", t) => {
 	if (t) return t;
 	switch (e) {
 		case "email": return "email";
@@ -1177,24 +1196,24 @@ var Q = {
 		case "search": return "off";
 		default: return;
 	}
-}, ot = n(({ id: e, label: t, name: n, description: r, placeholder: a, value: o, defaultValue: c, onChange: d, type: f = "text", size: p = "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: M, onMouseLeave: N, "aria-describedby": P, "aria-invalid": F, ...I }, R) => {
-	let z = s(), B = e ?? z, V = l(null), [ee, te] = u(c ?? ""), H = o !== void 0, ne = H ? o : ee, U = ne !== "", re = at(f, b), W = S && U && !_ && !x, ie = [
+}, st = n(({ id: e, label: t, name: n, description: r, placeholder: a, value: o, defaultValue: c, onChange: d, type: f = "text", size: p = "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: M, onMouseLeave: N, "aria-describedby": P, "aria-invalid": F, ...I }, R) => {
+	let z = s(), B = e ?? z, V = l(null), [ee, te] = u(c ?? ""), H = o !== void 0, U = H ? o : ee, W = U !== "", ne = ot(f, b), G = S && W && !_ && !x, re = [
 		P,
 		r ? `${B}-description` : void 0,
 		g ? `${B}-error` : void 0
-	].filter(Boolean).join(" "), G = E ?? "×", ae = i((e) => {
+	].filter(Boolean).join(" "), K = E ?? "×", ie = i((e) => {
 		if (V.current = e, typeof R == "function") {
 			R(e);
 			return;
 		}
 		R && (R.current = e);
-	}, [R]), oe = i((e) => {
+	}, [R]), ae = i((e) => {
 		let t = e.target.value;
 		H || te(t), d?.(e);
-	}, [H, d]), se = i(() => {
+	}, [H, d]), oe = i(() => {
 		H || te(""), C?.(), V.current?.focus();
-	}, [H, C]), ce = !W && !!T;
-	return /* @__PURE__ */ m(Me, {
+	}, [H, C]), se = !G && !!T;
+	return /* @__PURE__ */ m(je, {
 		id: B,
 		label: t,
 		description: r,
@@ -1204,24 +1223,24 @@ var Q = {
 		children: /* @__PURE__ */ h("div", {
 			className: L(Q.inputWrapper, {
 				[Q.hasLeftAdornment]: !!w,
-				[Q.hasRightAdornment]: !!T || W
+				[Q.hasRightAdornment]: !!T || G
 			}),
 			children: [
 				w && /* @__PURE__ */ m("span", {
 					"aria-hidden": "true",
-					className: L(Q.leftAdornment, it[D]),
+					className: L(Q.leftAdornment, at[D]),
 					children: w
 				}),
 				/* @__PURE__ */ m("input", {
 					...I,
-					ref: ae,
+					ref: ie,
 					id: B,
 					name: n,
 					type: f,
-					autoComplete: re,
+					autoComplete: ne,
 					className: L(Q.input, Q[p], { [Q.error]: !!g }, y),
-					value: ne,
-					onChange: oe,
+					value: U,
+					onChange: ae,
 					placeholder: a,
 					disabled: _,
 					readOnly: x,
@@ -1229,114 +1248,129 @@ var Q = {
 					autoFocus: A,
 					maxLength: j,
 					"aria-invalid": g ? !0 : F,
-					"aria-describedby": ie || void 0,
+					"aria-describedby": re || void 0,
 					onMouseEnter: M,
 					onMouseLeave: N
 				}),
-				W && /* @__PURE__ */ m("button", {
+				G && /* @__PURE__ */ m("button", {
 					type: "button",
-					className: L(Q.clearButton, it[k]),
-					onClick: se,
+					className: L(Q.clearButton, at[k]),
+					onClick: oe,
 					"aria-label": "Clear input",
-					children: G
+					children: K
 				}),
-				ce && /* @__PURE__ */ m("div", {
-					className: L(Q.rightAdornment, it[O]),
+				se && /* @__PURE__ */ m("div", {
+					className: L(Q.rightAdornment, at[O]),
 					children: T
 				})
 			]
 		})
 	});
 });
-ot.displayName = "Input";
+st.displayName = "Input";
 var $ = {
-	root: "_root_ie5a6_1",
-	invalid: "_invalid_ie5a6_14",
-	control: "_control_ie5a6_14",
-	label: "_label_ie5a6_17",
-	wrapper: "_wrapper_ie5a6_20",
-	input: "_input_ie5a6_21",
-	disabled: "_disabled_ie5a6_24",
-	description: "_description_ie5a6_32",
-	sm: "_sm_ie5a6_36",
-	md: "_md_ie5a6_45",
-	lg: "_lg_ie5a6_54",
-	indicator: "_indicator_ie5a6_109",
-	content: "_content_ie5a6_202",
-	error: "_error_ie5a6_219"
-}, st = n(({ value: e, checked: t, defaultChecked: n = !1, disabled: r = !1, required: i = !1, size: a, error: o, onCheckedChange: c, label: l, description: u, wrapperClassName: d, className: f, id: p, name: g, "aria-describedby": _, ...v }, y) => {
-	let b = Ae(), x = s(), S = p ?? x, C = u ? `${S}-description` : void 0, w = o ? `${S}-error` : void 0, T = [
-		C,
-		w,
-		b?.describedBy,
-		_
-	].filter(Boolean).join(" ") || void 0, E = b !== null, [O, k] = D({
+	root: "_root_qb9nm_1",
+	invalid: "_invalid_qb9nm_27",
+	control: "_control_qb9nm_27",
+	label: "_label_qb9nm_30",
+	wrapper: "_wrapper_qb9nm_33",
+	input: "_input_qb9nm_34",
+	disabled: "_disabled_qb9nm_37",
+	description: "_description_qb9nm_45",
+	colorPrimary: "_colorPrimary_qb9nm_49",
+	colorNeutral: "_colorNeutral_qb9nm_65",
+	colorSuccess: "_colorSuccess_qb9nm_81",
+	colorWarning: "_colorWarning_qb9nm_97",
+	colorDanger: "_colorDanger_qb9nm_113",
+	sm: "_sm_qb9nm_129",
+	md: "_md_qb9nm_138",
+	lg: "_lg_qb9nm_147",
+	indicator: "_indicator_qb9nm_202",
+	customIcon: "_customIcon_qb9nm_216",
+	content: "_content_qb9nm_335",
+	error: "_error_qb9nm_352"
+}, ct = {
+	primary: $.colorPrimary,
+	neutral: $.colorNeutral,
+	success: $.colorSuccess,
+	warning: $.colorWarning,
+	danger: $.colorDanger
+}, lt = n(({ value: e, checked: t, defaultChecked: n = !1, disabled: r = !1, required: i = !1, size: a, color: o, error: c, onCheckedChange: l, label: u, description: d, icon: f, wrapperClassName: p, className: g, id: _, name: v, "aria-describedby": y, ...b }, x) => {
+	let S = ke(), C = s(), w = _ ?? C, T = d ? `${w}-description` : void 0, E = c ? `${w}-error` : void 0, O = [
+		T,
+		E,
+		S?.describedBy,
+		y
+	].filter(Boolean).join(" ") || void 0, k = S !== null, [A, j] = D({
 		value: t,
 		defaultValue: n,
-		onChange: c
-	}), A = E ? b.value === e : O, j = !!b?.disabled || r, M = !!b?.required || i, N = b?.name ?? g, P = !!(o || b?.invalid), F = a ?? b?.size ?? "md", I = (t) => {
-		if (!j) {
-			if (E) {
-				b.onValueChange(e);
+		onChange: l
+	}), M = k ? S.value === e : A, N = !!S?.disabled || r, P = !!S?.required || i, F = S?.name ?? v, I = !!(c || S?.invalid), R = a ?? S?.size ?? "md", z = o ?? S?.color ?? "primary", B = (t) => {
+		if (!N) {
+			if (k) {
+				S.onValueChange(e);
 				return;
 			}
-			k(t.currentTarget.checked);
+			j(t.currentTarget.checked);
 		}
 	};
 	return /* @__PURE__ */ h("div", {
-		className: L($.root, $[F], P && $.invalid, j && $.disabled, f),
+		className: L($.root, $[R], I && $.invalid, N && $.disabled, ct[z], g),
 		children: [/* @__PURE__ */ h("label", {
-			htmlFor: S,
-			className: L($.wrapper, d),
+			htmlFor: w,
+			className: L($.wrapper, p),
 			children: [
 				/* @__PURE__ */ m("input", {
-					...v,
-					ref: y,
-					id: S,
+					...b,
+					ref: x,
+					id: w,
 					type: "radio",
-					name: N,
+					name: F,
 					value: e,
-					checked: A,
-					disabled: j,
-					required: M,
-					"aria-invalid": P || void 0,
-					"aria-describedby": T,
+					checked: M,
+					disabled: N,
+					required: P,
+					"aria-invalid": I || void 0,
+					"aria-describedby": O,
 					className: $.input,
-					onChange: I
+					onChange: B
 				}),
 				/* @__PURE__ */ m("span", {
 					className: $.control,
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ m("span", { className: $.indicator })
+					children: /* @__PURE__ */ m("span", {
+						className: L($.indicator, f && $.customIcon),
+						children: f
+					})
 				}),
-				(l || u) && /* @__PURE__ */ h("span", {
+				(u || d) && /* @__PURE__ */ h("span", {
 					className: $.content,
-					children: [l && /* @__PURE__ */ m("span", {
+					children: [u && /* @__PURE__ */ m("span", {
 						className: $.label,
-						children: l
-					}), u && /* @__PURE__ */ m("span", {
-						id: C,
-						className: $.description,
 						children: u
+					}), d && /* @__PURE__ */ m("span", {
+						id: T,
+						className: $.description,
+						children: d
 					})]
 				})
 			]
-		}), o && /* @__PURE__ */ m("div", {
-			id: w,
+		}), c && /* @__PURE__ */ m("div", {
+			id: E,
 			className: $.error,
-			children: o
+			children: c
 		})]
 	});
 });
-st.displayName = "Radio";
+lt.displayName = "Radio";
 //#endregion
 //#region src/theme/ThemeContext.ts
-var ct = t(null), lt = (e) => e === "highContrast" ? "high-contrast" : e, ut = ({ theme: e, defaultTheme: t = "light", onThemeChange: n, children: r }) => {
+var ut = t(null), dt = (e) => e === "highContrast" ? "high-contrast" : e, ft = ({ theme: e, defaultTheme: t = "light", onThemeChange: n, children: r }) => {
 	let [i, a] = D({
 		value: e,
 		defaultValue: t,
 		onChange: n
-	}), s = lt(i);
+	}), s = dt(i);
 	o(() => {
 		if (typeof document > "u") return;
 		let { documentElement: e } = document, t = e.dataset.velliraTheme;
@@ -1352,7 +1386,7 @@ var ct = t(null), lt = (e) => e === "highContrast" ? "high-contrast" : e, ut = (
 		theme: i,
 		setTheme: a
 	}), [i, a]);
-	return /* @__PURE__ */ m(ct.Provider, {
+	return /* @__PURE__ */ m(ut.Provider, {
 		value: l,
 		children: /* @__PURE__ */ m("div", {
 			"data-vellira-theme": s,
@@ -1360,13 +1394,13 @@ var ct = t(null), lt = (e) => e === "highContrast" ? "high-contrast" : e, ut = (
 		})
 	});
 };
-ut.displayName = "ThemeProvider";
+ft.displayName = "ThemeProvider";
 //#endregion
 //#region src/theme/useTheme.ts
-function dt() {
-	let e = a(ct);
+function pt() {
+	let e = a(ut);
 	if (!e) throw Error("useTheme must be used within ThemeProvider.");
 	return e;
 }
 //#endregion
-export { $e as Button, rt as Checkbox, ue as Dropdown, Me as FormField, ot as Input, De as Modal, st as Radio, je as RadioGroup, Re as Select, Je as Tabs, ut as ThemeProvider, Ze as Tooltip, dt as useTheme };
+export { $e as Button, it as Checkbox, le as Dropdown, je as FormField, st as Input, Ee as Modal, lt as Radio, Ae as RadioGroup, Le as Select, Je as Tabs, ft as ThemeProvider, Ze as Tooltip, pt as useTheme };