@foi/design-system 0.0.11 → 0.0.13

package/dist/{Switch-BS8iwAJ5.js → Switch-JF9P9VJf.js}

@@ -1,13 +1,13 @@
-import { i as e, n as t, r as n, t as r } from "./emotion-react-jsx-runtime.browser.esm-ClrpcFMG.js";
-import { r as i } from "./theme-D18AZjTt.js";
-import { a, o, t as s } from "./RadioGroup.context-BdRgENJJ.js";
-import { _ as c, a as l, c as u, f as d, g as f, h as p, i as ee, l as te, m, n as ne, o as h, p as g, r as _, s as v, t as y, u as b, v as re, y as x } from "./DatePicker.utils-ytCEcs6T.js";
-import { n as ie, t as S } from "./useStateCallback-D9fqdxiO.js";
-import C, { forwardRef as ae, useContext as oe, useEffect as se, useLayoutEffect as ce, useMemo as w, useRef as T, useState as E } from "react";
-import { css as D } from "@emotion/react";
-import { useController as le } from "react-hook-form";
+import { i as e, n as t, r as n, t as r } from "./emotion-react-jsx-runtime.browser.esm-C4rLUMui.js";
+import { r as i } from "./theme-Cxg9jdmX.js";
+import { a, o, t as s } from "./RadioGroup.context-QNk2hW_4.js";
+import { _ as c, a as l, c as u, f as d, g as f, h as p, i as m, l as ee, m as h, n as te, o as g, p as _, r as ne, s as v, t as y, u as re, v as ie, y as b } from "./DatePicker.utils-ytCEcs6T.js";
+import { n as ae, t as x } from "./useStateCallback-B4O93zzK.js";
+import S, { forwardRef as oe, useContext as se, useEffect as ce, useLayoutEffect as le, useMemo as C, useRef as w, useState as T } from "react";
+import { css as E } from "@emotion/react";
+import { useController as ue } from "react-hook-form";
 //#region src/components/atoms/Button/Button.emotion.ts
-var O = (e, t) => `
+var D = (e, t) => `
     // UTILS
     ${i(e, "color", `--BUTTON-EVENTS-${t}-COLOR-PRIMARY`)}
 
@@ -24,7 +24,7 @@ var O = (e, t) => `
     ${i(e, "outline-width", `--BUTTON-EVENTS-${t}-OUTLINE-WIDTH`)}
     ${i(e, "outline-style", `--BUTTON-EVENTS-${t}-OUTLINE-STYLE`)}
     ${i(e, "outline-offset", `--BUTTON-EVENTS-${t}-OUTLINE-OFFSET`)}
-  `, ue = (e) => D`
+  `, O = (e) => E`
   &.--BUTTON {
     width: 100%;
     height: 48px;
@@ -42,35 +42,35 @@ var O = (e, t) => `
     -webkit-tap-highlight-color: transparent;
 
     // ENABLED
-    ${O(e, "ENABLED")};
+    ${D(e, "ENABLED")};
 
     // HOVER
     &:hover {
-      ${O(e, "HOVER")};
+      ${D(e, "HOVER")};
     }
 
     // ACTIVE
     &.--BUTTON-active,
     &:active {
-      ${O(e, "ACTIVE")};
+      ${D(e, "ACTIVE")};
     }
 
     // FOCUS
     &:focus-visible {
       outline: none;
-      ${O(e, "FOCUS")};
+      ${D(e, "FOCUS")};
     }
 
     // DISABLED
     &:disabled {
       pointer-events: none;
-      ${O(e, "DISABLED")};
+      ${D(e, "DISABLED")};
     }
 
     // LOADING
     &.--BUTTON-loading {
       pointer-events: none;
-      ${O(e, "LOADING")};
+      ${D(e, "LOADING")};
     }
 
     .--BUTTON-iconStart,
@@ -93,7 +93,7 @@ var O = (e, t) => `
     }
   }
 `, k = "--BUTTON", de = ({ className: e, style: r, children: i = "Click me!", type: a = "button", loading: o = !1, iconStart: s, iconEnd: c, ...l }) => {
-	let [u, d] = E(!1);
+	let [u, d] = T(!1);
 	return /* @__PURE__ */ n("button", {
 		className: [
 			k,
@@ -101,7 +101,7 @@ var O = (e, t) => `
 			o ? `${k}-loading` : "",
 			e || ""
 		].join(" "),
-		css: ue(r),
+		css: O(r),
 		type: a,
 		onKeyDown: (e) => {
 			(e.key === "Enter" || e.key === "Space") && d(!0), l.onKeyDown?.(e);
@@ -129,11 +129,11 @@ var O = (e, t) => `
 			})
 		]
 	});
-}, A = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.BUTTON], n);
+}, A = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.BUTTON], n, r.toUpperCase());
 	return /* @__PURE__ */ t(de, {
-		...r,
-		style: i
+		...i,
+		style: a
 	});
 }, j = (e, t) => `
     ${i(e, "border-color", `--DATEPICKER-EVENTS-${t}-BORDER-COLOR`)};
@@ -151,7 +151,7 @@ var O = (e, t) => `
     ~ .--DATEPICKER-helperText {
         ${i(e, "color", `--DATEPICKER-EVENTS-${t}-COLOR-TERTIARY`)};
     }
-`, fe = (e) => D`
+`, fe = (e) => E`
   &.--DATEPICKER {
     position: relative;
     padding: 0;
@@ -527,7 +527,7 @@ var O = (e, t) => `
       ${i(e, "outline-style", `--ICONBUTTON-EVENTS-${t}-OUTLINE-STYLE`)}
       ${i(e, "outline-offset", `--ICONBUTTON-EVENTS-${t}-OUTLINE-OFFSET`)}
     }
-  `, ve = (e) => D`
+  `, ve = (e) => E`
   &.--ICONBUTTON {
     width: 24px;
     height: 24px;
@@ -578,9 +578,9 @@ var O = (e, t) => `
     // DISABLED
     &:disabled {
       pointer-events: none;
-      ${pe(e, "ENABLED")};
-      ${ge(e, "ENABLED")};
-      ${he(e, "ENABLED")};
+      ${pe(e, "DISABLED")};
+      ${ge(e, "DISABLED")};
+      ${he(e, "DISABLED")};
     }
 
     &.--ICONBUTTON-flipped {
@@ -622,7 +622,7 @@ var O = (e, t) => `
     }
   }
 `, F = "--ICONBUTTON", ye = ({ className: e, style: n, icon: r, onClick: i, isFlipped: a, ...o }) => {
-	let [s, c] = E(!1);
+	let [s, c] = T(!1);
 	return /* @__PURE__ */ t("button", {
 		className: [
 			F,
@@ -649,11 +649,11 @@ var O = (e, t) => `
 			children: r
 		})
 	});
-}, be = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.ICONBUTTON], n);
+}, be = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.ICONBUTTON], n, r.toUpperCase());
 	return /* @__PURE__ */ t(ye, {
-		...r,
-		style: i
+		...i,
+		style: a
 	});
 }, I = (e, t) => `  
   // OUTLINE
@@ -661,7 +661,7 @@ var O = (e, t) => `
   ${i(e, "outline-width", `--DATEPICKERMENU-EVENTS-${t}-OUTLINE-WIDTH`)}
   ${i(e, "outline-style", `--DATEPICKERMENU-EVENTS-${t}-OUTLINE-STYLE`)}
   ${i(e, "outline-offset", `--DATEPICKERMENU-EVENTS-${t}-OUTLINE-OFFSET`)}
-`, xe = (e) => D`
+`, xe = (e) => E`
   &.--DATEPICKERMENU {
     z-index: 100;
     position: absolute;
@@ -988,9 +988,9 @@ var O = (e, t) => `
       translate: 0 0;
     }
   }
-`, L = "--DATEPICKERMENU", Se = ae(({ isOpen: e, hasStaticOptions: i = !1, testId: o = `${L}-root`, monthLabel: s = "", yearLabel: c = "", onPrevMonth: l, onNextMonth: u, disablePrev: d = !1, disableNext: p = !1, weeks: ee = [], years: te = [], daysOfWeek: ne = [], selectedValue: h, format: g = "MM/dd/yyyy", today: _, focusedElement: v = -1, onSelectDay: y = () => {}, onSelectYear: b = () => {}, onMoveFocus: re = () => {}, onClose: x = () => {}, style: ie }, S) => {
-	let [C, ae] = E(!1), [oe, w] = E(null), [D, le] = E(0), [O, ue] = E(!1), [k, de] = E(-1), A = T({}), j = T({}), M = T(null), N = T(s + c);
-	se(() => {
+`, L = "--DATEPICKERMENU", Se = oe(({ isOpen: e, hasStaticOptions: i = !1, testId: o = `${L}-root`, monthLabel: s = "", yearLabel: c = "", onPrevMonth: l, onNextMonth: u, disablePrev: d = !1, disableNext: p = !1, weeks: m = [], years: ee = [], daysOfWeek: te = [], selectedValue: g, format: _ = "MM/dd/yyyy", today: ne, focusedElement: v = -1, onSelectDay: y = () => {}, onSelectYear: re = () => {}, onMoveFocus: ie = () => {}, onClose: b = () => {}, style: ae }, x) => {
+	let [S, oe] = T(!1), [se, C] = T(null), [E, ue] = T(0), [D, O] = T(!1), [k, de] = T(-1), A = w({}), j = w({}), M = w(null), N = w(s + c);
+	ce(() => {
 		if (!e) return;
 		let t = s + c;
 		t !== N.current && (N.current = t);
@@ -1000,11 +1000,11 @@ var O = (e, t) => `
 		e
 	]);
 	let P = () => {
-		w("left"), le((e) => e + 1), l();
+		C("left"), ue((e) => e + 1), l();
 	}, fe = () => {
-		w("right"), le((e) => e + 1), u();
+		C("right"), ue((e) => e + 1), u();
 	};
-	se(() => {
+	ce(() => {
 		if (!e || v < 0) return;
 		let t = A.current[v];
 		if (!t) return;
@@ -1013,26 +1013,26 @@ var O = (e, t) => `
 			block: "nearest",
 			inline: "nearest"
 		});
-	}, [v, e]), se(() => {
+	}, [v, e]), ce(() => {
 		if (!e) {
-			let e = setTimeout(() => ae(!1), 150);
+			let e = setTimeout(() => oe(!1), 150);
 			return () => clearTimeout(e);
 		}
-	}, [e]), ce(() => {
-		if (!C) {
+	}, [e]), le(() => {
+		if (!S) {
 			de(-1);
 			return;
 		}
-		let e = h && f(h) ? h.getFullYear() : _?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear(), t = te.flat().findIndex((t) => t.label === String(e));
+		let e = g && f(g) ? g.getFullYear() : ne?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear(), t = ee.flat().findIndex((t) => t.label === String(e));
 		de(t >= 0 ? t : 0);
-	}, [C]), ce(() => {
-		if (!C || k < 0) return;
+	}, [S]), le(() => {
+		if (!S || k < 0) return;
 		let e = j.current[k];
 		e && (e.focus({ preventScroll: !0 }), e.scrollIntoView?.({
 			block: "nearest",
 			inline: "nearest"
 		}));
-	}, [k, C]);
+	}, [k, S]);
 	let pe = (e, t) => {
 		if ([
 			"ArrowLeft",
@@ -1040,7 +1040,7 @@ var O = (e, t) => `
 			"ArrowUp",
 			"ArrowDown"
 		].includes(e.key)) {
-			e.preventDefault(), e.stopPropagation(), re(e.key);
+			e.preventDefault(), e.stopPropagation(), ie(e.key);
 			return;
 		}
 		e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), y(t, !0));
@@ -1048,7 +1048,7 @@ var O = (e, t) => `
 		let n = e.querySelector(t);
 		return n ? n.tagName === "BUTTON" ? n : n.querySelector("button") : null;
 	}, he = (e) => {
-		let t = te[0]?.length ?? 4, n = {
+		let t = ee[0]?.length ?? 4, n = {
 			ArrowRight: 1,
 			ArrowLeft: -1,
 			ArrowDown: t,
@@ -1056,11 +1056,11 @@ var O = (e, t) => `
 		}[e];
 		if (!n) return;
 		let r = k + n;
-		r < 0 || r >= te.flat().length || de(r);
+		r < 0 || r >= ee.flat().length || de(r);
 	}, ge = (e) => {
 		let t = M.current;
 		if (!t) return;
-		let n = me(t, `.${L}-yearArrow`), r = Array.from(t.querySelectorAll(`.${L}-navArrow`)), i = C ? null : r[0]?.tagName === "BUTTON" ? r[0] : r[0]?.querySelector("button") ?? null, a = C ? null : r[1]?.tagName === "BUTTON" ? r[1] : r[1]?.querySelector("button") ?? null, o = !C && v >= 0 ? A.current[v] ?? null : null, s = C && k >= 0 ? j.current[k] ?? null : null, c = C ? [n, s].filter((e) => e !== null) : [
+		let n = me(t, `.${L}-yearArrow`), r = Array.from(t.querySelectorAll(`.${L}-navArrow`)), i = S ? null : r[0]?.tagName === "BUTTON" ? r[0] : r[0]?.querySelector("button") ?? null, a = S ? null : r[1]?.tagName === "BUTTON" ? r[1] : r[1]?.querySelector("button") ?? null, o = !S && v >= 0 ? A.current[v] ?? null : null, s = S && k >= 0 ? j.current[k] ?? null : null, c = S ? [n, s].filter((e) => e !== null) : [
 			n,
 			i,
 			a,
@@ -1069,7 +1069,7 @@ var O = (e, t) => `
 		c.length !== 0 && c[(c.indexOf(document.activeElement) + (e ? -1 : 1) + c.length) % c.length]?.focus();
 	}, _e = (e) => {
 		if (e.key === "Escape") {
-			e.preventDefault(), e.stopPropagation(), x();
+			e.preventDefault(), e.stopPropagation(), b();
 			return;
 		}
 		if (e.key === "Tab") {
@@ -1081,10 +1081,10 @@ var O = (e, t) => `
 			"ArrowRight",
 			"ArrowUp",
 			"ArrowDown"
-		].includes(e.key) && (C ? (e.preventDefault(), e.stopPropagation(), he(e.key)) : Object.values(A.current).some((e) => e === document.activeElement) || (e.preventDefault(), e.stopPropagation(), re(e.key)));
-	}, ve = h && f(h) ? m(h, g) : null, F = _ && f(_) ? m(_, g) : null;
+		].includes(e.key) && (S ? (e.preventDefault(), e.stopPropagation(), he(e.key)) : Object.values(A.current).some((e) => e === document.activeElement) || (e.preventDefault(), e.stopPropagation(), ie(e.key)));
+	}, ve = g && f(g) ? h(g, _) : null, F = ne && f(ne) ? h(ne, _) : null;
 	return /* @__PURE__ */ t("div", {
-		ref: S,
+		ref: x,
 		children: /* @__PURE__ */ n("div", {
 			ref: M,
 			className: [
@@ -1092,7 +1092,7 @@ var O = (e, t) => `
 				e ? `${L}-open` : "",
 				i ? `${L}-static` : ""
 			].filter(Boolean).join(" "),
-			css: xe(ie),
+			css: xe(ae),
 			role: "dialog",
 			"aria-label": "Date picker calendar",
 			"data-testid": o,
@@ -1116,14 +1116,14 @@ var O = (e, t) => `
 						})
 					}), /* @__PURE__ */ t(be, {
 						icon: /* @__PURE__ */ t(a, { name: "arrow_drop_up" }),
-						onClick: () => ae((e) => !e),
+						onClick: () => oe((e) => !e),
 						className: `${L}-yearArrow`,
-						isFlipped: !C,
-						"aria-label": C ? "Close year selector" : "Open year selector",
+						isFlipped: !S,
+						"aria-label": S ? "Close year selector" : "Open year selector",
 						tabIndex: -1,
-						onFocus: () => ue(!0)
+						onFocus: () => O(!0)
 					})]
-				}), !C && /* @__PURE__ */ n("div", {
+				}), !S && /* @__PURE__ */ n("div", {
 					className: `${L}-monthNav`,
 					children: [/* @__PURE__ */ t(be, {
 						icon: /* @__PURE__ */ t(a, { name: "keyboard_arrow_left" }),
@@ -1132,7 +1132,7 @@ var O = (e, t) => `
 						disabled: d,
 						"aria-label": "Previous month",
 						tabIndex: -1,
-						onFocus: () => ue(!0)
+						onFocus: () => O(!0)
 					}), /* @__PURE__ */ t(be, {
 						icon: /* @__PURE__ */ t(a, { name: "keyboard_arrow_right" }),
 						onClick: fe,
@@ -1140,14 +1140,14 @@ var O = (e, t) => `
 						disabled: p,
 						"aria-label": "Next month",
 						tabIndex: -1,
-						onFocus: () => ue(!0)
+						onFocus: () => O(!0)
 					})]
 				})]
 			}), /* @__PURE__ */ n("div", {
-				className: [`${L}-body`, C ? `${L}-yearBody` : ""].filter(Boolean).join(" "),
-				children: [!C && /* @__PURE__ */ n(r, { children: [/* @__PURE__ */ t("div", {
+				className: [`${L}-body`, S ? `${L}-yearBody` : ""].filter(Boolean).join(" "),
+				children: [!S && /* @__PURE__ */ n(r, { children: [/* @__PURE__ */ t("div", {
 					className: `${L}-weekRow`,
-					children: ne.map((e, n) => /* @__PURE__ */ t("span", {
+					children: te.map((e, n) => /* @__PURE__ */ t("span", {
 						className: `${L}-dayCell`,
 						children: e
 					}, `header-${n}`))
@@ -1156,17 +1156,17 @@ var O = (e, t) => `
 					children: /* @__PURE__ */ t("div", {
 						className: [
 							`${L}-calendarGrid`,
-							oe === "left" ? `${L}-slideLeft` : "",
-							oe === "right" ? `${L}-slideRight` : ""
+							se === "left" ? `${L}-slideLeft` : "",
+							se === "right" ? `${L}-slideRight` : ""
 						].filter(Boolean).join(" "),
-						onAnimationEnd: () => w(null),
+						onAnimationEnd: () => C(null),
 						children: (() => {
 							let n = 0;
-							return ee.map((r, i) => /* @__PURE__ */ t("div", {
+							return m.map((r, i) => /* @__PURE__ */ t("div", {
 								className: `${L}-weekRow`,
 								children: r.map((r, a) => {
 									if (!r.isDate) return /* @__PURE__ */ t("span", { className: `${L}-dayCell` }, `blank-${i}-${a}`);
-									let o = n++, s = !!(ve && r.value === ve && e), c = r.value === F, l = v === o && e && !O;
+									let o = n++, s = !!(ve && r.value === ve && e), c = r.value === F, l = v === o && e && !D;
 									return /* @__PURE__ */ t("button", {
 										id: `${L}-day-${o}`,
 										ref: (e) => {
@@ -1180,7 +1180,7 @@ var O = (e, t) => `
 										].filter(Boolean).join(" "),
 										type: "button",
 										onClick: () => y(r.value),
-										onFocus: () => ue(!1),
+										onFocus: () => O(!1),
 										onKeyDown: (e) => pe(e, r.value),
 										disabled: r.isDisabled,
 										role: "option",
@@ -1191,15 +1191,15 @@ var O = (e, t) => `
 								})
 							}, `week-${i}`));
 						})()
-					}, D)
-				})] }), C && /* @__PURE__ */ t("div", {
+					}, E)
+				})] }), S && /* @__PURE__ */ t("div", {
 					className: `${L}-yearScrollWrapper`,
 					children: (() => {
 						let e = 0;
-						return te.map((n, r) => /* @__PURE__ */ t("div", {
+						return ee.map((n, r) => /* @__PURE__ */ t("div", {
 							className: `${L}-weekRow`,
 							children: n.map((n) => {
-								let r = e++, i = h && f(h) ? n.label === m(h, "yyyy") : !1, a = k === r && !O;
+								let r = e++, i = g && f(g) ? n.label === h(g, "yyyy") : !1, a = k === r && !D;
 								return /* @__PURE__ */ t("button", {
 									ref: (e) => {
 										j.current[r] = e;
@@ -1212,9 +1212,9 @@ var O = (e, t) => `
 									type: "button",
 									tabIndex: -1,
 									onClick: () => {
-										b(n.value), ae(!1);
+										re(n.value), oe(!1);
 									},
-									onFocus: () => ue(!1),
+									onFocus: () => O(!1),
 									"aria-selected": i,
 									children: n.label
 								}, n.value);
@@ -1229,7 +1229,7 @@ var O = (e, t) => `
 Se.displayName = "DatePickerMenu";
 //#endregion
 //#region src/components/atoms/DatePicker/DatePickerMenu/index.tsx
-var Ce = C.forwardRef(({ theme: n, ...r }, i) => {
+var Ce = S.forwardRef(({ theme: n, ...r }, i) => {
 	let { componentStyles: a } = e([o.DATEPICKERMENU, o.DATEPICKER], n);
 	return /* @__PURE__ */ t(Se, {
 		...r,
@@ -1240,39 +1240,39 @@ var Ce = C.forwardRef(({ theme: n, ...r }, i) => {
 Ce.displayName = "DatePickerMenu";
 //#endregion
 //#region src/components/atoms/DatePicker/DatePicker.tsx
-var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(), minDate: s, maxDate: S, disabled: C, disableFuture: ae, disablePast: oe, hasStaticOptions: ce = !1, showErrorText: D = !0, hasPadding: O = !1, helperText: ue, style: k, className: de }) => {
-	let A = y[o].format, j = w(() => c(/* @__PURE__ */ new Date()), []), M = o === "en", { field: N, fieldState: P } = le({
+var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = m(), minDate: s, maxDate: x, disabled: S, disableFuture: oe, disablePast: se, hasStaticOptions: le = !1, showErrorText: E = !0, hasPadding: D = !1, helperText: O, style: k, className: de }) => {
+	let A = y[o].format, j = C(() => c(/* @__PURE__ */ new Date()), []), M = o === "en", { field: N, fieldState: P } = ue({
 		control: i,
 		name: e
-	}), pe = P.error, me = w(() => f(N.value) ? d(N.value) : {
+	}), pe = P.error, me = f(N.value) ? d(N.value) : {
 		day: "",
 		month: "",
 		year: ""
-	}, []), [he, ge] = E(me.day), [_e, ve] = E(me.month), [F, ye] = E(me.year), [I, xe] = E(!1), [L, Se] = E(-1), [we, Te] = E(() => f(N.value) ? N.value : j), z = T(null), B = T(null), V = T(null), Ee = T(null), H = T(null), De = T(null), U = T(""), Oe = T(""), ke = T(""), Ae = I || !!(he || _e || F), je = w(() => l(we, A, o, {
+	}, [he, ge] = T(me.day), [_e, ve] = T(me.month), [F, ye] = T(me.year), [I, xe] = T(!1), [L, Se] = T(-1), [we, Te] = T(() => f(N.value) ? N.value : j), z = w(null), B = w(null), V = w(null), Ee = w(null), H = w(null), De = w(null), U = w(""), Oe = w(""), ke = w(""), Ae = I || !!(he || _e || F), je = C(() => l(we, A, o, {
 		minDate: s,
-		maxDate: S,
-		disableFuture: ae,
-		disablePast: oe,
+		maxDate: x,
+		disableFuture: oe,
+		disablePast: se,
 		today: j
 	}), [
 		we,
 		o,
 		s,
-		S,
-		ae,
+		x,
 		oe,
+		se,
 		j,
 		A
-	]), Me = w(() => je.flat().filter((e) => e.isDate), [je]), Ne = w(() => h(A, 1900, 200, 4), [A]), Pe = y[o].daysOfWeek.map((e) => ne[o][e]), Fe = _(we, o), W = m(we, "yyyy");
-	se(() => {
+	]), Me = C(() => je.flat().filter((e) => e.isDate), [je]), Ne = C(() => g(A, 1900, 200, 4), [A]), Pe = y[o].daysOfWeek.map((e) => te[o][e]), Fe = ne(we, o), Ie = h(we, "yyyy");
+	ce(() => {
 		if (!he && !_e && !F) return;
-		let e = he || "01", t = _e || "01", n = F || "2000", r = g(M ? `${t}/${e}/${n}` : `${e}/${t}/${n}`, A, /* @__PURE__ */ new Date());
+		let e = he || "01", t = _e || "01", n = F || "2000", r = _(M ? `${t}/${e}/${n}` : `${e}/${t}/${n}`, A, /* @__PURE__ */ new Date());
 		N.onChange(r), u(r) && Te(r), pe && N.onBlur();
 	}, [
 		he,
 		_e,
 		F
-	]), ie({
+	]), ae({
 		ref: B,
 		onAction: () => {
 			xe(!1), N.onBlur();
@@ -1280,10 +1280,10 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 		isActive: I,
 		exceptRef: z
 	});
-	let Ie = (e) => {
+	let Le = (e) => {
 		let t = e.relatedTarget, n = z.current?.contains(t), r = B.current?.contains(t);
 		n || r || (xe(!1), N.onBlur());
-	}, G = (e) => requestAnimationFrame(() => e.current?.focus()), Le = (e) => {
+	}, W = (e) => requestAnimationFrame(() => e.current?.focus()), Re = (e) => {
 		if ([
 			"ArrowLeft",
 			"ArrowRight",
@@ -1304,8 +1304,8 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 			ge("01"), U.current = "";
 			return;
 		}
-		ge(String(Math.min(t, 31)).padStart(2, "0")), (t > 3 || U.current.length >= 2) && (U.current = "", G(M ? De : H));
-	}, Re = (e) => {
+		ge(String(Math.min(t, 31)).padStart(2, "0")), (t > 3 || U.current.length >= 2) && (U.current = "", W(M ? De : H));
+	}, G = (e) => {
 		if ([
 			"ArrowLeft",
 			"ArrowRight",
@@ -1326,7 +1326,7 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 			ve("01"), Oe.current = "";
 			return;
 		}
-		ve(String(Math.min(t, 12)).padStart(2, "0")), (t > 1 || Oe.current.length >= 2) && (Oe.current = "", G(M ? Ee : De));
+		ve(String(Math.min(t, 12)).padStart(2, "0")), (t > 1 || Oe.current.length >= 2) && (Oe.current = "", W(M ? Ee : De));
 	}, ze = (e) => {
 		if ([
 			"ArrowLeft",
@@ -1342,22 +1342,22 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 			return;
 		}
 		/^\d$/.test(e.key) && (e.preventDefault(), ke.current = (ke.current + e.key).slice(-4), ye(String(parseInt(ke.current, 10)).padStart(4, "0")));
-	}, K = () => {
-		if (C) return;
+	}, Be = () => {
+		if (S) return;
 		let e = u(N.value) ? N.value : j;
 		Te(e), Se(e.getDate() - 1), xe(!0);
-	}, q = () => xe(!1), J = () => I ? q() : K(), Be = () => {
-		Te((e) => re(e, -1)), Se(-1);
-	}, Y = () => {
-		Te((e) => re(e, 1)), Se(-1);
-	}, Ve = b(we, {
+	}, Ve = () => xe(!1), K = () => I ? Ve() : Be(), q = () => {
+		Te((e) => ie(e, -1)), Se(-1);
+	}, J = () => {
+		Te((e) => ie(e, 1)), Se(-1);
+	}, He = re(we, {
 		minDate: s,
-		disablePast: oe,
+		disablePast: se,
 		today: j,
 		format: A
-	}), He = te(we, {
-		maxDate: S,
-		disableFuture: ae,
+	}), Y = ee(we, {
+		maxDate: x,
+		disableFuture: oe,
 		today: j,
 		format: A
 	}), Ue = (e) => {
@@ -1375,40 +1375,40 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 		}
 		let n = Me[L];
 		if (!n) return;
-		let r = g(n.value, A, /* @__PURE__ */ new Date()), i = x(r, t);
+		let r = _(n.value, A, /* @__PURE__ */ new Date()), i = b(r, t);
 		if (v(i, {
 			minDate: s,
-			maxDate: S,
-			disableFuture: ae,
-			disablePast: oe,
+			maxDate: x,
+			disableFuture: oe,
+			disablePast: se,
 			today: j
 		})) return;
 		if (i.getMonth() !== r.getMonth() || i.getFullYear() !== r.getFullYear()) {
-			if (t > 0 && He || t < 0 && Ve) return;
+			if (t > 0 && Y || t < 0 && He) return;
 			Te(p(i)), Se(i.getDate() - 1);
 			return;
 		}
-		let a = Me.findIndex((e) => e.value === m(i, A));
+		let a = Me.findIndex((e) => e.value === h(i, A));
 		a >= 0 && Se(a);
 	}, We = (e, t) => {
-		let n = g(e, A, /* @__PURE__ */ new Date());
+		let n = _(e, A, /* @__PURE__ */ new Date());
 		N.onChange(n);
 		let r = d(n);
 		ge(r.day), ve(r.month), ye(r.year), xe(!1), t && requestAnimationFrame(() => V.current?.querySelector("button")?.focus());
 	}, Ge = (e) => {
-		let t = g(e, A, /* @__PURE__ */ new Date()), n = u(N.value) ? N.value : j, r = new Date(n);
+		let t = _(e, A, /* @__PURE__ */ new Date()), n = u(N.value) ? N.value : j, r = new Date(n);
 		r.setFullYear(t.getFullYear());
-		let i = g(m(r, A), A, /* @__PURE__ */ new Date());
+		let i = _(h(r, A), A, /* @__PURE__ */ new Date());
 		N.onChange(i);
 		let a = d(i);
 		ge(a.day), ve(a.month), ye(a.year), Te(i);
-	}, X = (e) => {
+	}, Ke = (e) => {
 		if (e.key === "Tab") {
-			q();
+			Ve();
 			return;
 		}
 		if (e.key === "Escape") {
-			q();
+			Ve();
 			return;
 		}
 		e.key === "Enter" && I && (e.preventDefault(), L >= 0 && Me[L] && !Me[L].isDisabled && We(Me[L].value)), [
@@ -1417,11 +1417,11 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 			"ArrowUp",
 			"ArrowDown"
 		].includes(e.key) && I && (e.preventDefault(), Ue(e.key));
-	}, Ke = M ? H : Ee, qe = M ? "MM" : "DD", Z = M ? _e : he, Je = M ? Re : Le, Ye = M ? () => {
+	}, qe = M ? H : Ee, X = M ? "MM" : "DD", Je = M ? _e : he, Ye = M ? G : Re, Z = M ? () => {
 		Oe.current = "";
 	} : () => {
 		U.current = "";
-	}, Xe = M ? Ee : H, Ze = M ? "DD" : "MM", Qe = M ? he : _e, $e = M ? Le : Re, et = M ? () => {
+	}, Xe = M ? Ee : H, Ze = M ? "DD" : "MM", Qe = M ? he : _e, $e = M ? Re : G, et = M ? () => {
 		U.current = "";
 	} : () => {
 		Oe.current = "";
@@ -1429,7 +1429,7 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 	return /* @__PURE__ */ n("div", {
 		className: [
 			R,
-			O ? `${R}-paddingBottom` : "",
+			D ? `${R}-paddingBottom` : "",
 			de || ""
 		].join(" "),
 		css: fe(k),
@@ -1438,35 +1438,35 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 			/* @__PURE__ */ n("div", {
 				ref: z,
 				className: `${R}-container`,
-				onBlur: Ie,
-				onKeyDown: X,
+				onBlur: Le,
+				onKeyDown: Ke,
 				children: [
 					/* @__PURE__ */ n("div", {
 						className: [
 							`${R}-fieldRow`,
 							Ae ? `${R}-open` : "",
 							pe ? `${R}-error` : "",
-							C ? `${R}-disabled` : ""
+							S ? `${R}-disabled` : ""
 						].join(" "),
 						onClick: (e) => {
-							e.target === e.currentTarget && Ke.current?.focus();
+							e.target === e.currentTarget && qe.current?.focus();
 						},
 						"data-testid": `${R}-fieldRow`,
 						children: [
 							/* @__PURE__ */ t("span", {
-								ref: Ke,
+								ref: qe,
 								role: "spinbutton",
 								"aria-label": M ? "Month" : "Day",
-								"aria-valuenow": parseInt(Z) || void 0,
+								"aria-valuenow": parseInt(Je) || void 0,
 								"aria-valuemin": 1,
 								"aria-valuemax": M ? 12 : 31,
-								"aria-valuetext": Z || qe,
-								className: [`${R}-partInput`, Z ? "" : `${R}-placeholder`].filter(Boolean).join(" "),
-								tabIndex: C ? -1 : 0,
-								onKeyDown: Je,
-								onFocus: Ye,
+								"aria-valuetext": Je || X,
+								className: [`${R}-partInput`, Je ? "" : `${R}-placeholder`].filter(Boolean).join(" "),
+								tabIndex: S ? -1 : 0,
+								onKeyDown: Ye,
+								onFocus: Z,
 								"data-testid": `${R}-first`,
-								children: Z || qe
+								children: Je || X
 							}),
 							/* @__PURE__ */ t("span", {
 								className: `${R}-separator`,
@@ -1481,7 +1481,7 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 								"aria-valuemax": M ? 31 : 12,
 								"aria-valuetext": Qe || Ze,
 								className: [`${R}-partInput`, Qe ? "" : `${R}-placeholder`].filter(Boolean).join(" "),
-								tabIndex: C ? -1 : 0,
+								tabIndex: S ? -1 : 0,
 								onKeyDown: $e,
 								onFocus: et,
 								"data-testid": `${R}-second`,
@@ -1500,7 +1500,7 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 								"aria-valuemax": 2100,
 								"aria-valuetext": F || "YYYY",
 								className: [`${R}-partInput`, F ? "" : `${R}-placeholder`].filter(Boolean).join(" "),
-								tabIndex: C ? -1 : 0,
+								tabIndex: S ? -1 : 0,
 								onKeyDown: ze,
 								onFocus: () => {
 									ke.current = "";
@@ -1515,9 +1515,9 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 						className: `${R}-adornment`,
 						children: /* @__PURE__ */ t(be, {
 							className: `${R}-calendarIcon`,
-							onClick: J,
+							onClick: K,
 							icon: /* @__PURE__ */ t(a, { name: "event" }),
-							disabled: C,
+							disabled: S,
 							tabIndex: 0,
 							"data-testid": `${R}-calendarIcon`
 						})
@@ -1539,22 +1539,22 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 					})
 				]
 			}),
-			/* @__PURE__ */ n("span", {
+			(E || O) && /* @__PURE__ */ n("span", {
 				className: `${R}-helperText`,
 				"data-testid": `${R}-helperText`,
-				children: [ue && !pe && ue, D && pe && pe.message]
+				children: [O && !pe && O, E && pe && pe.message]
 			}),
 			/* @__PURE__ */ t(Ce, {
 				ref: B,
 				isOpen: I,
-				hasStaticOptions: ce,
+				hasStaticOptions: le,
 				language: o,
 				monthLabel: Fe,
-				yearLabel: W,
-				onPrevMonth: Be,
-				onNextMonth: Y,
-				disablePrev: Ve,
-				disableNext: He,
+				yearLabel: Ie,
+				onPrevMonth: q,
+				onNextMonth: J,
+				disablePrev: He,
+				disableNext: Y,
 				weeks: je,
 				years: Ne,
 				daysOfWeek: Pe,
@@ -1565,15 +1565,15 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 				onSelectDay: We,
 				onSelectYear: Ge,
 				onMoveFocus: Ue,
-				onClose: q
+				onClose: Ve
 			})
 		]
 	});
-}, Te = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.DATEPICKER], n);
+}, Te = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.DATEPICKER], n, r.toUpperCase());
 	return /* @__PURE__ */ t(we, {
-		...r,
-		style: i
+		...i,
+		style: a
 	});
 }, z = (e, t) => `
     // BORDERS
@@ -1596,7 +1596,7 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
   ~ .--INPUT-helperText {
     ${i(e, "color", `--INPUT-EVENTS-${t}-COLOR-TERTIARY`)};
   }
-`, De = (e) => D`
+`, De = (e) => E`
   &.--INPUT {
     position: relative;
     padding: 0;
@@ -1958,95 +1958,111 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 `, U = "--INPUT", Oe = ({ children: e }) => /* @__PURE__ */ t("div", {
 	className: `${U}-adornment`,
 	children: e
-}), ke = ({ name: e, label: r, control: i, width: a, disabled: o, type: s = "text", regex: c, hasPadding: l = !1, format: u, startAdornment: d, endAdornment: f, helperText: p, showErrorText: ee = !0, style: te, className: m, ...ne }) => {
-	let { field: h, fieldState: g } = le({
-		control: i,
-		name: e
-	}), [_, v] = E(h.value || ""), y = g.error, b = (e) => {
-		e.preventDefault();
-		let { value: t } = e.target;
-		if (c && c.test(t) || !c) {
-			let e = u && t ? u(t) : t;
-			h.onChange(e), v(e), y && re();
-		}
-	}, re = () => h.onBlur();
-	return /* @__PURE__ */ n("div", {
-		className: [
-			U,
-			l ? `${U}-paddingBottom` : "",
-			m || ""
-		].join(" "),
-		css: De(te),
-		"data-testid": U,
-		children: [/* @__PURE__ */ n("div", {
-			className: `${U}-container`,
-			children: [
-				d && /* @__PURE__ */ t(Oe, { children: d }),
-				/* @__PURE__ */ t("input", {
-					className: [
-						`${U}-inputField`,
-						y && `${U}-error`,
-						d && `${U}-open`,
-						d && `${U}-left`,
-						f && `${U}-right`
-					].join(" "),
-					placeholder: " ",
-					value: _,
-					disabled: o,
-					"data-testid": `${U}-inputField`,
-					onChange: (e) => b(e),
-					onBlur: h.onBlur,
-					name: e,
-					type: s,
-					...ne
-				}),
-				f && /* @__PURE__ */ t(Oe, { children: f }),
-				/* @__PURE__ */ t("fieldset", {
-					"aria-hidden": "true",
-					className: `${U}-fieldset`,
-					children: /* @__PURE__ */ t("legend", {
-						className: `${U}-legend`,
-						children: /* @__PURE__ */ t("span", {
-							className: `${U}-text`,
-							children: r
-						})
+}), ke = ({ label: e, value: r, onChange: i, error: a, style: o = {}, width: s, disabled: c, type: l = "text", regex: u, hasPadding: d = !1, format: f, startAdornment: p, endAdornment: m, helperText: ee, showErrorText: h = !0, className: te, onBlur: g, ..._ }) => /* @__PURE__ */ n("div", {
+	className: [
+		U,
+		d ? `${U}-paddingBottom` : "",
+		te || ""
+	].join(" "),
+	css: De(o),
+	"data-testid": U,
+	children: [/* @__PURE__ */ n("div", {
+		className: `${U}-container`,
+		children: [
+			p && /* @__PURE__ */ t(Oe, { children: p }),
+			/* @__PURE__ */ t("input", {
+				className: [
+					`${U}-inputField`,
+					a && `${U}-error`,
+					p && `${U}-open`,
+					p && `${U}-left`,
+					m && `${U}-right`
+				].join(" "),
+				placeholder: " ",
+				value: r,
+				disabled: c,
+				"data-testid": `${U}-inputField`,
+				onChange: (e) => {
+					e.preventDefault();
+					let t = e.target.value;
+					(u && u.test(t) || !u) && i(f && t ? f(t) : t);
+				},
+				onBlur: g,
+				type: l,
+				..._
+			}),
+			m && /* @__PURE__ */ t(Oe, { children: m }),
+			/* @__PURE__ */ t("fieldset", {
+				"aria-hidden": "true",
+				className: `${U}-fieldset`,
+				children: /* @__PURE__ */ t("legend", {
+					className: `${U}-legend`,
+					children: /* @__PURE__ */ t("span", {
+						className: `${U}-text`,
+						children: e
 					})
-				}),
-				/* @__PURE__ */ t("span", {
-					className: `${U}-label`,
-					children: r
 				})
-			]
-		}), /* @__PURE__ */ n("span", {
-			className: `${U}-helperText`,
-			"data-testid": `${U}-helperText`,
-			children: [p && (!y || !ee) && p, ee && y && y.message]
-		})]
-	});
-}, Ae = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.INPUT], n);
+			}),
+			/* @__PURE__ */ t("span", {
+				className: `${U}-label`,
+				children: e
+			})
+		]
+	}), (h || ee) && /* @__PURE__ */ n("span", {
+		className: `${U}-helperText`,
+		"data-testid": `${U}-helperText`,
+		children: [ee && (!a || !h) && ee, h && a && a.message]
+	})]
+}), Ae = ({ name: e, control: n, ...r }) => {
+	let { field: i, fieldState: a } = ue({
+		control: n,
+		name: e
+	}), [o, s] = T(i.value || ""), c = a.error, l = (e) => {
+		i.onChange(e), s(e), c && i.onBlur();
+	};
 	return /* @__PURE__ */ t(ke, {
 		...r,
-		style: i
+		name: e,
+		value: o,
+		onChange: l,
+		onBlur: () => i.onBlur(),
+		error: c
+	});
+}, je = (e) => {
+	if (!e.control) {
+		let { name: n, control: r, onValueChange: i, value: a, ...o } = e;
+		return /* @__PURE__ */ t(ke, {
+			...o,
+			name: n,
+			value: a || "",
+			onChange: i || (() => {})
+		});
+	}
+	return /* @__PURE__ */ t(Ae, { ...e });
+}, Me = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.INPUT], n, r.toUpperCase());
+	return /* @__PURE__ */ t(je, {
+		...i,
+		style: a
 	});
-}, je = (e, t) => `
+}, Ne = (e, t) => `
   // BACKGROUNDS  
   ${i(e, "background-color", `--RADIO-EVENTS-${t}-BACKGROUND-COLOR`)}
-`, Me = (e, t) => `
+`, Pe = (e, t) => `
   // BORDERS
   ${i(e, "border-color", `--RADIO-EVENTS-${t}-BORDER-COLOR`)}
   ${i(e, "border-width", `--RADIO-EVENTS-${t}-BORDER-WIDTH`)}
   ${i(e, "border-style", `--RADIO-EVENTS-${t}-BORDER-STYLE`)}
-`, Ne = (e, t) => `  
+`, Fe = (e, t) => `  
   // OUTLINE
   ${i(e, "outline-color", `--RADIO-EVENTS-${t}-OUTLINE-COLOR`)}
   ${i(e, "outline-width", `--RADIO-EVENTS-${t}-OUTLINE-WIDTH`)}
   ${i(e, "outline-style", `--RADIO-EVENTS-${t}-OUTLINE-STYLE`)}
   ${i(e, "outline-offset", `--RADIO-EVENTS-${t}-OUTLINE-OFFSET`)}
-`, Pe = (e, t) => `  
+`, Ie = (e, t) => `  
   // SHADOW
   ${i(e, "background-color", `--RADIO-EVENTS-${t}-SHADOW-COLOR`)}
-`, Fe = (e, t) => `
+`, Le = (e, t) => `
   // UTILS
   > span {
     ${i(e, "color", `--RADIO-EVENTS-${t}-ICON-COLOR`)};
@@ -2056,7 +2072,7 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
   .--RADIO-label {
     ${i(e, "color", `--RADIO-EVENTS-${t}-COLOR-PRIMARY`)}
   }
-`, Ie = (e) => D`
+`, Re = (e) => E`
   &.--RADIO {
     display: flex;
     flex-direction: column;
@@ -2084,7 +2100,7 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
         .--RADIO-radio .--RADIO-span {
           &:before {
             opacity: 1;
-            ${Pe(e, "HOVER")};
+            ${Ie(e, "HOVER")};
           }
         }
       }
@@ -2116,7 +2132,7 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
         .--RADIO-radio .--RADIO-span {
           &:before {
             opacity: 1;
-            ${Pe(e, "ERROR_HOVER")};
+            ${Ie(e, "ERROR_HOVER")};
           }
         }
       }
@@ -2169,16 +2185,16 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 
           // ENABLED
           ~ .--RADIO-span {
-            ${je(e, "ENABLED")};
-            ${Me(e, "ENABLED")};
-            ${Fe(e, "ENABLED")};
+            ${Ne(e, "ENABLED")};
+            ${Pe(e, "ENABLED")};
+            ${Le(e, "ENABLED")};
           }
 
           // VALUE
           &:checked ~ .--RADIO-span {
-            ${je(e, "VALUE")};
-            ${Me(e, "VALUE")};
-            ${Fe(e, "VALUE")};
+            ${Ne(e, "VALUE")};
+            ${Pe(e, "VALUE")};
+            ${Le(e, "VALUE")};
           }
 
           // HOVER
@@ -2189,29 +2205,29 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
           &:active ~ .--RADIO-span {
             &:before {
               opacity: 1;
-              ${Pe(e, "ACTIVE")};
+              ${Ie(e, "ACTIVE")};
             }
           }
 
           // FOCUS
           &:focus-visible ~ .--RADIO-span {
             outline: none;
-            ${Ne(e, "FOCUS")};
             ${Fe(e, "FOCUS")};
+            ${Le(e, "FOCUS")};
           }
 
           // ERROR
           &.--RADIO-error ~ .--RADIO-span {
-            ${je(e, "ERROR")};
-            ${Me(e, "ERROR")};
-            ${Fe(e, "ERROR")};
+            ${Ne(e, "ERROR")};
+            ${Pe(e, "ERROR")};
+            ${Le(e, "ERROR")};
           }
 
           // ERROR + VALUE
           &.--RADIO-error:checked ~ .--RADIO-span {
-            ${je(e, "ERROR_VALUE")};
-            ${Me(e, "ERROR_VALUE")};
-            ${Fe(e, "ERROR_VALUE")};
+            ${Ne(e, "ERROR_VALUE")};
+            ${Pe(e, "ERROR_VALUE")};
+            ${Le(e, "ERROR_VALUE")};
           }
 
           // ERROR + VALUE
@@ -2222,28 +2238,28 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
           &.--RADIO-error.--RADIO-active ~ .--RADIO-span {
             &:before {
               opacity: 1;
-              ${Pe(e, "ERROR_ACTIVE")};
+              ${Ie(e, "ERROR_ACTIVE")};
             }
           }
 
           // ERROR + FOCUS
           &.--RADIO-error:focus-visible ~ .--RADIO-span {
-            ${Ne(e, "ERROR_FOCUS")};
             ${Fe(e, "ERROR_FOCUS")};
+            ${Le(e, "ERROR_FOCUS")};
           }
 
           // DISABLED
           &:disabled ~ .--RADIO-span {
-            ${je(e, "DISABLED")};
-            ${Me(e, "DISABLED")};
-            ${Fe(e, "DISABLED")};
+            ${Ne(e, "DISABLED")};
+            ${Pe(e, "DISABLED")};
+            ${Le(e, "DISABLED")};
           }
 
           // DISABLED + VALUE
           &:disabled:checked ~ .--RADIO-span {
-            ${je(e, "DISABLED_VALUE")};
-            ${Me(e, "DISABLED_VALUE")};
-            ${Fe(e, "DISABLED_VALUE")};
+            ${Ne(e, "DISABLED_VALUE")};
+            ${Pe(e, "DISABLED_VALUE")};
+            ${Le(e, "DISABLED_VALUE")};
           }
         }
 
@@ -2286,19 +2302,19 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
       }
     }
   }
-`, G = "--RADIO", Le = C.forwardRef(({ label: e, icon: r = /* @__PURE__ */ t(a, {
+`, G = "--RADIO", ze = S.forwardRef(({ label: e, icon: r = /* @__PURE__ */ t(a, {
 	name: "circle",
 	fill: !0,
 	style: { fontSize: "16px" }
-}), className: i, style: o = {}, disabled: s, checked: c, onSelect: l, error: u, onKeyDown: d, onKeyUp: f, onBlur: p, value: ee, name: te, ...m }, ne) => {
-	let [h, g] = E(!1);
+}), className: i, style: o = {}, disabled: s, checked: c, onSelect: l, error: u, onKeyDown: d, onKeyUp: f, onBlur: p, value: m, name: ee, ...h }, te) => {
+	let [g, _] = T(!1);
 	return /* @__PURE__ */ t("div", {
 		className: [
 			G,
-			h ? `${G}-active` : "",
+			g ? `${G}-active` : "",
 			i || ""
 		].join(" "),
-		css: Ie(o),
+		css: Re(o),
 		"data-testid": G,
 		children: /* @__PURE__ */ n("label", {
 			className: `${G}-container`,
@@ -2307,27 +2323,27 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 				children: [/* @__PURE__ */ t("input", {
 					className: [
 						`${G}-inputField`,
-						h ? `${G}-active` : "",
+						g ? `${G}-active` : "",
 						u ? `${G}-error` : ""
 					].join(" "),
 					type: "radio",
-					value: ee,
-					name: te,
+					value: m,
+					name: ee,
 					checked: c,
 					disabled: s,
 					onChange: () => l(),
 					onKeyDown: (e) => {
-						(e.key === "Enter" || e.key === "Space") && g(!0), d?.(e);
+						(e.key === "Enter" || e.key === "Space") && _(!0), d?.(e);
 					},
 					onKeyUp: (e) => {
-						(e.key === "Enter" || e.key === "Space") && (g(!1), l()), f?.(e);
+						(e.key === "Enter" || e.key === "Space") && (_(!1), l()), f?.(e);
 					},
 					onBlur: () => {
-						g(!1), p?.({});
+						_(!1), p?.({});
 					},
-					ref: ne,
+					ref: te,
 					"data-testid": `${G}-inputField`,
-					...m
+					...h
 				}), /* @__PURE__ */ t("span", {
 					className: `${G}-span`,
 					"data-testid": `${G}-icon`,
@@ -2341,24 +2357,25 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 		})
 	});
 });
-Le.displayName = "RadioBase";
-var Re = (e) => {
-	let n = oe(s);
+ze.displayName = "RadioBase";
+var Be = (e) => {
+	let n = se(s);
 	if (!n) throw Error("Radio must be used inside a RadioGroup.");
-	let { value: r, ...i } = e, a = n.selectedValue === r;
-	return /* @__PURE__ */ t(Le, {
+	let { value: r, ...i } = e, a = n.selectedValue === r, o = n.selectedValue === "", c = a || o && n.firstValue === r ? 0 : -1;
+	return /* @__PURE__ */ t(ze, {
 		...i,
 		name: n.name,
 		value: r,
 		checked: a,
 		onSelect: () => n.onChange(r),
-		disabled: i.disabled ?? n.disabled
+		disabled: i.disabled ?? n.disabled,
+		tabIndex: c
 	});
-}, ze = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.RADIO], n);
-	return /* @__PURE__ */ t(Re, {
-		...r,
-		style: i
+}, Ve = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.RADIO], n, r.toUpperCase());
+	return /* @__PURE__ */ t(Be, {
+		...i,
+		style: a
 	});
 }, K = (e, t) => `
     // BORDERS
@@ -2372,7 +2389,7 @@ var Re = (e) => {
 `, J = (e, t, n = !1) => `
     ${i(e, "color", `--SELECT-EVENTS-${t}-COLOR-SECONDARY`)}
     ${n ? "transform: translate(14px, -24px); font-size: 0.75rem;" : ""}
-`, Be = (e) => `
+`, He = (e) => `
     .--SELECT-legend {
         max-width: ${e ? "100%" : "0px"};
     }
@@ -2381,7 +2398,7 @@ var Re = (e) => {
   ~ .--SELECT-helperText {
     ${i(e, "color", `--SELECT-EVENTS-${t}-COLOR-TERTIARY`)}
   }
-`, Ve = (e) => D`
+`, Ue = (e) => E`
   &.--SELECT {
     position: relative;
     padding: 0;
@@ -2514,7 +2531,7 @@ var Re = (e) => {
           }
           ~ .--SELECT-fieldset {
             ${K(e, "VALUE")};
-            ${Be(!0)};
+            ${He(!0)};
           }
         }
 
@@ -2550,7 +2567,7 @@ var Re = (e) => {
           }
           ~ .--SELECT-fieldset {
             ${K(e, "FOCUS")};
-            ${Be(!0)};
+            ${He(!0)};
           }
         }
 
@@ -2724,7 +2741,7 @@ var Re = (e) => {
       height: 16px;
     }
   }
-`, He = (e, t) => `
+`, We = (e, t) => `
     // BACKGROUNDS
     ${i(e, "background-color", `--SELECTMENU-EVENTS-${t}-BACKGROUND-COLOR`)}
     
@@ -2733,11 +2750,11 @@ var Re = (e) => {
     ${i(e, "border-width", `--SELECTMENU-EVENTS-${t}-BORDER-WIDTH`)}
     ${i(e, "border-style", `--SELECTMENU-EVENTS-${t}-BORDER-STYLE`)}
     ${i(e, "border-radius", `--SELECTMENU-EVENTS-${t}-BORDER-RADIUS`)}
-`, Ue = (e, t) => `
+`, Ge = (e, t) => `
     // TYPOGRAPHY
     ${i(e, "color", `--SELECTMENU-EVENTS-${t}-COLOR-PRIMARY`)};
     ${i(e, "caret-color", `--SELECTMENU-EVENTS-${t}-COLOR-PRIMARY`)};
-`, We = (e, t) => `
+`, Ke = (e, t) => `
     // BACKGROUNDS
     ${i(e, "background-color", `--SELECTMENU-${t}-BACKGROUND-COLOR`)}
         
@@ -2746,7 +2763,7 @@ var Re = (e) => {
     ${i(e, "border-width", `--SELECTMENU-${t}-BORDER-WIDTH`)}
     ${i(e, "border-style", `--SELECTMENU-${t}-BORDER-STYLE`)}
     ${i(e, "border-radius", `--SELECTMENU-${t}-BORDER-RADIUS`)}
-`, Ge = (e) => D`
+`, qe = (e) => E`
   &.--SELECTMENU {
     z-index: 100;
     position: absolute;
@@ -2761,7 +2778,7 @@ var Re = (e) => {
     max-height: 126px; // 3 rows * 42px
     overflow-y: auto;
     cursor: pointer;
-    ${We(e, "ROOT")}
+    ${Ke(e, "ROOT")}
 
     // Animation
     display: none;
@@ -2822,34 +2839,34 @@ var Re = (e) => {
       }
 
       // ENABLED
-      ${He(e, "ENABLED")}
-      ${Ue(e, "ENABLED")}
+      ${We(e, "ENABLED")}
+      ${Ge(e, "ENABLED")}
 
       // VALUE
       &.--SELECTMENU-selected {
-        ${He(e, "VALUE")}
-        ${Ue(e, "VALUE")}
+        ${We(e, "VALUE")}
+        ${Ge(e, "VALUE")}
       }
 
       // HOVER
       &:hover {
-        ${He(e, "HOVER")}
-        ${Ue(e, "HOVER")}
+        ${We(e, "HOVER")}
+        ${Ge(e, "HOVER")}
       }
 
       // - ACTIVE
       &:active,
       &.--SELECTMENU-active {
-        ${He(e, "ACTIVE")}
-        ${Ue(e, "ACTIVE")}
+        ${We(e, "ACTIVE")}
+        ${Ge(e, "ACTIVE")}
       }
 
       // FOCUS
       &:focus-visible {
         outline-offset: 0px;
         outline: 0;
-        ${He(e, "FOCUS")}
-        ${Ue(e, "FOCUS")}
+        ${We(e, "FOCUS")}
+        ${Ge(e, "FOCUS")}
       }
 
       &.--SELECTMENU-descriptionMenu {
@@ -2878,7 +2895,7 @@ var Re = (e) => {
       max-height: 156px; // 3 rows * 52px
     }
   }
-`, X = "--SELECTMENU", Ke = C.forwardRef(({ displayOptions: e, value: r, isOpen: i, hasStaticOptions: a, hasDescription: o, onChange: s, focusedElement: c, onScroll: l, style: u, className: d }, f) => (se(() => {
+`, X = "--SELECTMENU", Je = S.forwardRef(({ displayOptions: e, value: r, isOpen: i, hasStaticOptions: a, hasDescription: o, onChange: s, focusedElement: c, onScroll: l, style: u, className: d }, f) => (ce(() => {
 	document.getElementById(`${X}-option-${c}`)?.scrollIntoView({ block: "nearest" });
 }, [c]), /* @__PURE__ */ t("div", {
 	id: `${X}-root`,
@@ -2889,7 +2906,7 @@ var Re = (e) => {
 		i && `${X}-open`,
 		d || ""
 	].join(" "),
-	css: Ge(u),
+	css: qe(u),
 	onScroll: l,
 	role: "listbox",
 	ref: f,
@@ -2918,38 +2935,38 @@ var Re = (e) => {
 			})]
 		}, e.value);
 	})
-}))), qe = C.forwardRef(({ theme: n, ...r }, i) => {
+}))), Ye = S.forwardRef(({ theme: n, ...r }, i) => {
 	let { componentStyles: a } = e([o.SELECTMENU, o.SELECT], n);
-	return /* @__PURE__ */ t(Ke, {
+	return /* @__PURE__ */ t(Je, {
 		...r,
 		style: a,
 		ref: i
 	});
 });
-qe.displayName = "SelectMenu";
+Ye.displayName = "SelectMenu";
 //#endregion
 //#region src/components/atoms/Select/Select.tsx
-var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o, disabled: s, range: c = 100, hasStaticOptions: l = !1, hasSearch: u = !1, hasDescription: d = !1, hasPadding: f = !1, showErrorText: p = !0, helperText: ee, style: te, className: m, ...ne }) => {
-	let { field: h, fieldState: g } = le({
+var Z = "--SELECT", Xe = [], Ze = ({ name: e, label: r, control: i, options: o, disabled: s, range: c = 100, hasStaticOptions: l = !1, hasSearch: u = !1, hasDescription: d = !1, hasPadding: f = !1, showErrorText: p = !0, helperText: m, style: ee, className: h, ...te }) => {
+	let { field: g, fieldState: _ } = ue({
 		control: i,
 		name: e
-	}), [_, v] = S(h.value || ""), [y, b] = S(!1), re = T(!1), x = T(null), C = T(null), ae = T(null), oe = o.find((e) => e.value === _), se = g.error, ce = d ? 156 : 126, [w, D] = S(oe?.label || ""), [O, ue] = E(1), [k, de] = E(!1), [A, j] = E(-1), M = y || !!(u && w && !_), N = (e) => {
-		b(!1), D(e ?? oe?.label ?? ""), de(!1), j(-1), re.current && h.onBlur();
+	}), [ne, v] = x(g.value || ""), [y, re] = x(!1), ie = w(!1), b = w(null), S = w(null), oe = w(null), se = o.find((e) => e.value === ne), ce = _.error, le = d ? 156 : 126, [C, E] = x(se?.label || ""), [D, O] = T(1), [k, de] = T(!1), [A, j] = T(-1), M = y || !!(u && C && !ne), N = (e) => {
+		re(!1), E(e ?? se?.label ?? ""), de(!1), j(-1), ie.current && g.onBlur();
 	}, P = () => {
-		re.current = !0, b(!0);
+		ie.current = !0, re(!0);
 	};
-	ie({
-		ref: x,
+	ae({
+		ref: b,
 		onAction: () => N(),
 		isActive: M,
-		exceptRef: C
+		exceptRef: S
 	});
 	let fe = (e) => {
-		h.onChange(e.value), v(e.value), N(e.label);
+		g.onChange(e.value), v(e.value), N(e.label);
 	}, pe = (e) => {
 		e.target.select();
 	}, me = (e) => {
-		e === "ArrowDown" && M ? j(A + 1 >= Je.length ? 0 : A + 1) : e === "ArrowUp" && M && j(A - 1 < 0 ? Je.length - 1 : A - 1);
+		e === "ArrowDown" && M ? j(A + 1 >= Xe.length ? 0 : A + 1) : e === "ArrowUp" && M && j(A - 1 < 0 ? Xe.length - 1 : A - 1);
 	}, he = (e) => {
 		if (e.stopPropagation(), e.key === "Enter") if (e.preventDefault(), M && A >= 0) {
 			let e = ye()[A];
@@ -2961,33 +2978,33 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
 			let e = ye()[A];
 			e && fe(e);
 		} else M ? N() : P();
-		else e.key === "Tab" || e.key === "Escape" ? N() : ["ArrowDown", "ArrowUp"].includes(e.key) && (e.preventDefault(), ae.current?.focus(), me(e.key));
+		else e.key === "Tab" || e.key === "Escape" ? N() : ["ArrowDown", "ArrowUp"].includes(e.key) && (e.preventDefault(), oe.current?.focus(), me(e.key));
 	}, _e = (e) => {
 		e.stopPropagation(), s || (M ? N() : P());
 	}, ve = (e) => {
 		e.preventDefault();
 		let { scrollHeight: t, scrollTop: n } = e.target;
-		n + ce >= t && ye().length >= O * c && ue(O + 1);
+		n + le >= t && ye().length >= D * c && O(D + 1);
 	}, F = (e) => {
 		e.preventDefault();
 		let { value: t } = e.target;
-		t.length > 2 && ue(1), D(t, () => de(!0)), P();
+		t.length > 2 && O(1), E(t, () => de(!0)), P();
 	}, ye = () => {
-		if (u && w && w.length > 2) {
-			let e = o.slice(0, c * O);
-			if (w === oe?.label && !k) return Je = e, e;
-			let t = o.filter((e) => e.label.toLocaleUpperCase().includes(w.toLocaleUpperCase())).slice(0, c * O);
-			return Je = k ? t || [] : e, t || [];
+		if (u && C && C.length > 2) {
+			let e = o.slice(0, c * D);
+			if (C === se?.label && !k) return Xe = e, e;
+			let t = o.filter((e) => e.label.toLocaleUpperCase().includes(C.toLocaleUpperCase())).slice(0, c * D);
+			return Xe = k ? t || [] : e, t || [];
 		}
-		return Je = o.slice(0, c * O), o.slice(0, c * O);
+		return Xe = o.slice(0, c * D), o.slice(0, c * D);
 	};
 	return /* @__PURE__ */ n("div", {
 		className: [
 			Z,
 			f ? `${Z}-paddingBottom` : "",
-			m || ""
+			h || ""
 		].join(" "),
-		css: Ve(te),
+		css: Ue(ee),
 		"data-testid": Z,
 		children: [
 			/* @__PURE__ */ n("div", {
@@ -2995,7 +3012,7 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
 				onClick: _e,
 				onKeyDown: (e) => !s && he(e),
 				role: "button",
-				ref: C,
+				ref: S,
 				"data-testid": `${Z}-container`,
 				children: [
 					/* @__PURE__ */ t("input", {
@@ -3003,20 +3020,20 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
 						className: [
 							`${Z}-selectField`,
 							M && `${Z}-open`,
-							se && `${Z}-error`
+							ce && `${Z}-error`
 						].join(" "),
 						onClick: (e) => u && pe(e),
 						onChange: F,
-						value: w,
+						value: C,
 						placeholder: " ",
 						disabled: s,
 						readOnly: !u,
-						ref: ae,
+						ref: oe,
 						role: "combobox",
 						autoComplete: "off",
 						"data-testid": `${Z}-selectField`,
 						...u && { placeholder: "Search..." },
-						...ne
+						...te
 					}),
 					/* @__PURE__ */ t("div", {
 						className: `${Z}-adornment`,
@@ -3046,40 +3063,40 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
 					})
 				]
 			}),
-			/* @__PURE__ */ n("span", {
+			(p || m) && /* @__PURE__ */ n("span", {
 				className: `${Z}-helperText`,
 				"data-testid": `${Z}-helperText`,
-				children: [ee && (!se || !p) && ee, p && se && se.message]
+				children: [m && (!ce || !p) && m, p && ce && ce.message]
 			}),
-			/* @__PURE__ */ t(qe, {
-				displayOptions: M ? ye() : Je,
-				value: _,
+			/* @__PURE__ */ t(Ye, {
+				displayOptions: M ? ye() : Xe,
+				value: ne,
 				isOpen: M,
 				hasStaticOptions: l,
 				hasDescription: d,
 				onChange: fe,
 				focusedElement: A,
 				onScroll: ve,
-				ref: x
+				ref: b
 			})
 		]
 	});
-}, Xe = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.SELECT], n);
-	return /* @__PURE__ */ t(Ye, {
-		...r,
-		style: i
+}, Qe = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.SELECT], n, r.toUpperCase());
+	return /* @__PURE__ */ t(Ze, {
+		...i,
+		style: a
 	});
-}, Ze = (e, t) => `
+}, $e = (e, t) => `
   ~ .--SLIDER-rail {
     ${i(e, "background-color", `--SLIDER-EVENTS-${t}-BACKGROUND-COLOR`)}
   }
-`, Qe = (e, t) => `
+`, et = (e, t) => `
   ~ .--SLIDER-tracker {  
     // BACKGROUNDS
     ${i(e, "background-color", `--SLIDER-EVENTS-${t}-BACKGROUND-COLOR`)}
   }
-`, $e = (e, t) => `
+`, tt = (e, t) => `
   ~ .--SLIDER-thumbIcon {  
     // UTILS
     ${i(e, "background-color", `--SLIDER-EVENTS-${t}-ICON-BACKGROUND-COLOR`)}
@@ -3095,7 +3112,7 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
       ${i(e, "color", `--SLIDER-EVENTS-${t}-ICON-COLOR`)};
      }
   }
-`, et = (e) => D`
+`, nt = (e) => E`
   &.--SLIDER {
     justify-content: center;
     display: flex;
@@ -3120,11 +3137,11 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
       margin: 0px;
 
       // ENABLED
-      ${Ze(e, "ENABLED")};
       ${$e(e, "ENABLED")};
+      ${tt(e, "ENABLED")};
 
       // VALUE
-      ${Qe(e, "VALUE")};
+      ${et(e, "VALUE")};
 
       // HOVER
       @media (hover: hover) {
@@ -3154,9 +3171,9 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
           pointer-events: none;
         }
 
-        ${Ze(e, "DISABLED")};
-        ${Qe(e, "DISABLED_VALUE")};
         ${$e(e, "DISABLED")};
+        ${et(e, "DISABLED_VALUE")};
+        ${tt(e, "DISABLED")};
 
         ~ .--SLIDER-mark {
           ${i(e, "background-color", "--SLIDER-EVENTS-DISABLED_VALUE-BACKGROUND-COLOR")}
@@ -3326,49 +3343,49 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
       }
     }
   }
-`, Q = "--SLIDER", tt = ({ min: e = 0, max: i = Infinity, name: a, step: o = 25, distance: s = 0, disabled: c = !1, iconMin: l, iconMax: u, showMarks: d = !1, direction: f = "horizontal", track: p = "normal", control: ee, style: te }) => {
-	let { field: m } = le({
-		control: ee,
+`, Q = "--SLIDER", rt = ({ min: e = 0, max: i = Infinity, name: a, step: o = 25, distance: s = 0, disabled: c = !1, iconMin: l, iconMax: u, showMarks: d = !1, direction: f = "horizontal", track: p = "normal", control: m, style: ee }) => {
+	let { field: h } = ue({
+		control: m,
 		name: a
-	}), ne = m.value ?? [e], h = ne.length >= 2, g = T(null), _ = T(void 0), v = f === "vertical", y = i !== Infinity && e !== i && o > 0 ? Array.from({ length: Math.round((i - e) / o) + 1 }, (t, n) => Math.min(e + n * o, i)) : [], b = y.length > 0, re = (t) => b ? y.reduce((e, n) => Math.abs(n - t) <= Math.abs(e - t) ? n : e) : Math.max(e, Math.min(i, Math.round((t - e) / o) * o + e)), [x, ie] = E(() => b ? ne.map(re) : ne), S = (e) => {
-		m.onChange(e), ie(e);
-	}, C = (e) => {
-		let t = re(parseFloat(e.target.value)), n = h ? Math.min(t, x[1] - s) : t;
-		S(h ? [n, x[1]] : [n]);
-	}, ae = (e) => {
-		let t = re(parseFloat(e.target.value)), n = Math.max(t, x[0] + s);
-		S([x[0], n]);
-	}, oe = (t) => {
-		if (!b) return;
-		let n = x[0], r;
-		if (t.key === "ArrowRight" || t.key === "ArrowUp" ? r = y.find((e) => e > n) ?? n : t.key === "ArrowLeft" || t.key === "ArrowDown" ? r = [...y].reverse().find((e) => e < n) ?? n : t.key === "Home" ? r = e : t.key === "End" && (r = h ? Math.min(i, x[1] - s) : i), r !== void 0 && r !== n) {
-			t.preventDefault();
-			let e = h ? Math.min(r, x[1] - s) : r;
-			S(h ? [e, x[1]] : [e]);
-		}
+	}), te = h.value ?? [e], g = te.length >= 2, _ = w(null), ne = w(void 0), v = f === "vertical", y = i !== Infinity && e !== i && o > 0 ? Array.from({ length: Math.round((i - e) / o) + 1 }, (t, n) => Math.min(e + n * o, i)) : [], re = y.length > 0, ie = (t) => re ? y.reduce((e, n) => Math.abs(n - t) <= Math.abs(e - t) ? n : e) : Math.max(e, Math.min(i, Math.round((t - e) / o) * o + e)), [b, ae] = T(() => re ? te.map(ie) : te), x = (e) => {
+		h.onChange(e), ae(e);
+	}, S = (e) => {
+		let t = ie(parseFloat(e.target.value)), n = g ? Math.min(t, b[1] - s) : t;
+		x(g ? [n, b[1]] : [n]);
+	}, oe = (e) => {
+		let t = ie(parseFloat(e.target.value)), n = Math.max(t, b[0] + s);
+		x([b[0], n]);
 	}, se = (t) => {
-		if (!b) return;
-		let n = x[1], r;
-		if (t.key === "ArrowRight" || t.key === "ArrowUp" ? r = y.find((e) => e > n) ?? n : t.key === "ArrowLeft" || t.key === "ArrowDown" ? r = [...y].reverse().find((e) => e < n) ?? n : t.key === "Home" ? r = Math.max(e, x[0] + s) : t.key === "End" && (r = i), r !== void 0 && r !== n) {
+		if (!re) return;
+		let n = b[0], r;
+		if (t.key === "ArrowRight" || t.key === "ArrowUp" ? r = y.find((e) => e > n) ?? n : t.key === "ArrowLeft" || t.key === "ArrowDown" ? r = [...y].reverse().find((e) => e < n) ?? n : t.key === "Home" ? r = e : t.key === "End" && (r = g ? Math.min(i, b[1] - s) : i), r !== void 0 && r !== n) {
 			t.preventDefault();
-			let e = Math.max(r, x[0] + s);
-			S([x[0], e]);
+			let e = g ? Math.min(r, b[1] - s) : r;
+			x(g ? [e, b[1]] : [e]);
 		}
 	}, ce = (t) => {
+		if (!re) return;
+		let n = b[1], r;
+		if (t.key === "ArrowRight" || t.key === "ArrowUp" ? r = y.find((e) => e > n) ?? n : t.key === "ArrowLeft" || t.key === "ArrowDown" ? r = [...y].reverse().find((e) => e < n) ?? n : t.key === "Home" ? r = Math.max(e, b[0] + s) : t.key === "End" && (r = i), r !== void 0 && r !== n) {
+			t.preventDefault();
+			let e = Math.max(r, b[0] + s);
+			x([b[0], e]);
+		}
+	}, le = (t) => {
 		if (c || i === Infinity || i === e) return;
-		let n = g.current, r = n?.getBoundingClientRect();
+		let n = _.current, r = n?.getBoundingClientRect();
 		if (!r || !n) return;
-		let a = re(e + (v ? Math.max(0, Math.min(1, (r.bottom - t.clientY) / r.height)) : Math.max(0, Math.min(1, (t.clientX - r.left) / r.width))) * (i - e));
-		h ? Math.abs(a - x[0]) <= Math.abs(a - x[1]) ? S([Math.max(e, Math.min(a, x[1] - s)), x[1]]) : S([x[0], Math.min(i, Math.max(a, x[0] + s))]) : S([Math.max(e, Math.min(i, a))]), n.classList.add(`${Q}--clicking`), clearTimeout(_.current), _.current = setTimeout(() => n.classList.remove(`${Q}--clicking`), 150);
-	}, w = (t) => i === e ? 0 : (t - e) / (i - e) * 100, D = (e) => {
-		let t = w(e);
+		let a = ie(e + (v ? Math.max(0, Math.min(1, (r.bottom - t.clientY) / r.height)) : Math.max(0, Math.min(1, (t.clientX - r.left) / r.width))) * (i - e));
+		g ? Math.abs(a - b[0]) <= Math.abs(a - b[1]) ? x([Math.max(e, Math.min(a, b[1] - s)), b[1]]) : x([b[0], Math.min(i, Math.max(a, b[0] + s))]) : x([Math.max(e, Math.min(i, a))]), n.classList.add(`${Q}--clicking`), clearTimeout(ne.current), ne.current = setTimeout(() => n.classList.remove(`${Q}--clicking`), 150);
+	}, C = (t) => i === e ? 0 : (t - e) / (i - e) * 100, E = (e) => {
+		let t = C(e);
 		return v ? { top: `calc(${100 - t}% - ${(100 - t) / 100 * 24}px)` } : { left: `calc(${t}% - ${t / 100 * 24}px)` };
-	}, O = (e) => {
-		let t = w(e);
+	}, D = (e) => {
+		let t = C(e);
 		return v ? { top: `calc(${100 - t}% - ${(100 - t) / 100 * 24}px + 11px)` } : { left: `calc(${t}% - ${t / 100 * 24}px + 11px)` };
-	}, ue = () => {
-		let e = x[0], t = x[1] ?? e, n = w(e), r = w(t), i = (e) => 12 - e / 100 * 24;
-		return v ? h ? p === "inverted" ? [{
+	}, O = () => {
+		let e = b[0], t = b[1] ?? e, n = C(e), r = C(t), i = (e) => 12 - e / 100 * 24;
+		return v ? g ? p === "inverted" ? [{
 			top: "0%",
 			bottom: `calc(${r}% + ${i(r)}px)`
 		}, {
@@ -3383,7 +3400,7 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
 		}] : [{
 			top: `calc(${100 - n}% - ${i(n)}px)`,
 			bottom: "0%"
-		}] : h ? p === "inverted" ? [{
+		}] : g ? p === "inverted" ? [{
 			left: "0%",
 			right: `calc(${100 - n}% - ${i(n)}px)`
 		}, {
@@ -3399,11 +3416,11 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
 			left: "0%",
 			right: `calc(${100 - n}% - ${i(n)}px)`
 		}];
-	}, k = (e) => h ? p === "inverted" ? e <= x[0] || e >= x[1] : e >= x[0] && e <= x[1] : p === "inverted" ? e >= x[0] : e <= x[0], de = b ? "any" : o;
+	}, k = (e) => g ? p === "inverted" ? e <= b[0] || e >= b[1] : e >= b[0] && e <= b[1] : p === "inverted" ? e >= b[0] : e <= b[0], de = re ? "any" : o;
 	return /* @__PURE__ */ n("span", {
-		ref: g,
+		ref: _,
 		className: [Q, v ? `${Q}--vertical` : ""].join(" "),
-		css: et(te),
+		css: nt(ee),
 		"data-testid": Q,
 		children: [
 			/* @__PURE__ */ t("input", {
@@ -3412,77 +3429,77 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
 				min: e,
 				max: i,
 				step: de,
-				value: x[0],
-				onChange: C,
-				onKeyDown: oe,
+				value: b[0],
+				onChange: S,
+				onKeyDown: se,
 				disabled: c,
-				"data-testid": h ? `${Q}-minField` : `${Q}-field`
+				"data-testid": g ? `${Q}-minField` : `${Q}-field`
 			}),
 			/* @__PURE__ */ t("span", {
 				className: `${Q}-ripple`,
-				style: D(x[0]),
+				style: E(b[0]),
 				"aria-hidden": "true"
 			}),
 			/* @__PURE__ */ t("span", {
 				className: `${Q}-thumbIcon`,
-				style: D(x[0]),
+				style: E(b[0]),
 				"aria-hidden": "true",
 				children: l
 			}),
-			h && /* @__PURE__ */ n(r, { children: [
+			g && /* @__PURE__ */ n(r, { children: [
 				/* @__PURE__ */ t("input", {
 					className: `${Q}-inputField`,
 					type: "range",
 					min: e,
 					max: i,
 					step: de,
-					value: x[1],
-					onChange: ae,
-					onKeyDown: se,
+					value: b[1],
+					onChange: oe,
+					onKeyDown: ce,
 					disabled: c,
 					"data-testid": `${Q}-maxField`
 				}),
 				/* @__PURE__ */ t("span", {
 					className: `${Q}-ripple`,
-					style: D(x[1]),
+					style: E(b[1]),
 					"aria-hidden": "true"
 				}),
 				/* @__PURE__ */ t("span", {
 					className: `${Q}-thumbIcon`,
-					style: D(x[1]),
+					style: E(b[1]),
 					"aria-hidden": "true",
 					children: u
 				})
 			] }),
 			/* @__PURE__ */ t("span", {
 				className: `${Q}-rail`,
-				onClick: ce
+				onClick: le
 			}),
-			ue().map((e, n) => /* @__PURE__ */ t("span", {
+			O().map((e, n) => /* @__PURE__ */ t("span", {
 				className: `${Q}-tracker`,
-				onClick: ce,
+				onClick: le,
 				style: e
 			}, n)),
 			d && y.map((e) => /* @__PURE__ */ t("span", {
 				className: [`${Q}-mark`, k(e) && `${Q}-mark--active`].filter(Boolean).join(" "),
-				style: O(e),
+				style: D(e),
 				"aria-hidden": "true",
-				onClick: ce
+				onClick: le
 			}, e))
 		]
 	});
-}, nt = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.SLIDER], n);
-	return /* @__PURE__ */ t(tt, {
-		...r,
-		style: i
+}, it = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.SLIDER], n, r.toUpperCase());
+	return /* @__PURE__ */ t(rt, {
+		...i,
+		style: a
 	});
-}, rt = (e, t) => `
+}, at = (e, t) => `
   ~ .--SWITCH-span {
     // BACKGROUNDS
     ${i(e, "background-color", `--SWITCH-EVENTS-${t}-BACKGROUND-COLOR`)}
   }
-`, it = (e, t) => `
+`, ot = (e, t) => `
   ~ .--SWITCH-span {
     // BORDERS
     ${i(e, "border-color", `--SWITCH-EVENTS-${t}-BORDER-COLOR`)}
@@ -3490,7 +3507,7 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
     ${i(e, "border-style", `--SWITCH-EVENTS-${t}-BORDER-STYLE`)}
     ${i(e, "border-radius", `--SWITCH-EVENTS-${t}-BORDER-RADIUS`)}
   }
-`, at = (e, t) => `
+`, st = (e, t) => `
   ~ .--SWITCH-span {
     // OUTLINE
     ${i(e, "outline-color", `--SWITCH-EVENTS-${t}-OUTLINE-COLOR`)}
@@ -3498,7 +3515,7 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
     ${i(e, "outline-style", `--SWITCH-EVENTS-${t}-OUTLINE-STYLE`)}
     ${i(e, "outline-offset", `--SWITCH-EVENTS-${t}-OUTLINE-OFFSET`)}
   }
-`, ot = (e, t) => `
+`, ct = (e, t) => `
 // UTILS
   ~ .--SWITCH-span > span {
     ${i(e, "color", `--SWITCH-EVENTS-${t}-ICON-COLOR`)};
@@ -3507,7 +3524,7 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
       ${i(e, "background-color", `--SWITCH-EVENTS-${t}-ICON-BACKGROUND-COLOR`)};
      }
   }
-`, st = (e, t) => `
+`, lt = (e, t) => `
   // TYPOGRAPHY
   .--SWITCH-label {
     ${i(e, "color", `--SWITCH-EVENTS-${t}-COLOR-PRIMARY`)}
@@ -3516,7 +3533,7 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
   ~ .--SWITCH-helperText {
     ${i(e, "color", `--SWITCH-EVENTS-${t}-COLOR-SECONDARY`)}
   }
-`, ct = (e) => D`
+`, ut = (e) => E`
   &.--SWITCH {
     display: flex;
     flex-direction: column;
@@ -3531,37 +3548,37 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
       cursor: pointer;
 
       // ENABLED
-      ${st(e, "ENABLED")};
+      ${lt(e, "ENABLED")};
 
       // VALUE
       &:has(.--SWITCH-inputField:checked) {
-        ${st(e, "VALUE")};
+        ${lt(e, "VALUE")};
       }
 
       // HOVER
       &:has(.--SWITCH-inputField:hover) {
-        ${st(e, "HOVER")};
+        ${lt(e, "HOVER")};
       }
 
       // ACTIVE
       &:has(.--SWITCH-inputField.--SWITCH-active, .--SWITCH-inputField:active) {
-        ${st(e, "ACTIVE")};
+        ${lt(e, "ACTIVE")};
       }
 
       // FOCUS-VISIBLE
       &:has(.--SWITCH-inputField:focus-visible) {
-        ${st(e, "FOCUS")};
+        ${lt(e, "FOCUS")};
       }
 
       // DISABLED
       &:has(.--SWITCH-inputField:disabled) {
         pointer-events: none;
-        ${st(e, "DISABLED")};
+        ${lt(e, "DISABLED")};
       }
 
       // DISABLED + VALUE
       &:has(.--SWITCH-inputField:disabled:checked) {
-        ${st(e, "DISABLED_VALUE")};
+        ${lt(e, "DISABLED_VALUE")};
       }
 
       .--SWITCH-checkbox {
@@ -3581,15 +3598,15 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
           -webkit-tap-highlight-color: transparent;
 
           // ENABLED
-          ${rt(e, "ENABLED")};
-          ${it(e, "ENABLED")};
+          ${at(e, "ENABLED")};
           ${ot(e, "ENABLED")};
+          ${ct(e, "ENABLED")};
 
           // VALUE
           &:checked {
-            ${rt(e, "VALUE")};
-            ${it(e, "VALUE")};
+            ${at(e, "VALUE")};
             ${ot(e, "VALUE")};
+            ${ct(e, "VALUE")};
 
             ~ .--SWITCH-span {
               .--SWITCH-iconOff {
@@ -3633,22 +3650,22 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
           // FOCUS
           &:focus-visible {
             outline: none;
-            ${at(e, "FOCUS")};
-            ${ot(e, "FOCUS")};
+            ${st(e, "FOCUS")};
+            ${ct(e, "FOCUS")};
           }
 
           // DISABLED
           &:disabled {
-            ${rt(e, "DISABLED")};
-            ${it(e, "DISABLED")};
+            ${at(e, "DISABLED")};
             ${ot(e, "DISABLED")};
+            ${ct(e, "DISABLED")};
           }
 
           // DISABLED + VALUE
           &:disabled:checked {
-            ${rt(e, "DISABLED_VALUE")};
-            ${it(e, "DISABLED_VALUE")};
+            ${at(e, "DISABLED_VALUE")};
             ${ot(e, "DISABLED_VALUE")};
+            ${ct(e, "DISABLED_VALUE")};
 
             ~ .--SWITCH-span {
               .--SWITCH-iconOff {
@@ -3750,27 +3767,27 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
       margin-left: 14px;
     }
   }
-`, $ = "--SWITCH", lt = ({ name: e, control: r, iconOn: i, iconOff: a, disabled: o, label: s, helperText: c, className: l, style: u, ...d }) => {
-	let [f, p] = E(!1), { field: ee, fieldState: te } = le({
+`, $ = "--SWITCH", dt = ({ name: e, control: r, iconOn: i, iconOff: a, disabled: o, label: s, helperText: c, className: l, style: u, ...d }) => {
+	let [f, p] = T(!1), { field: m, fieldState: ee } = ue({
 		control: r,
 		name: e
-	}), [m, ne] = E(ee.value || !1), h = te.error, g = (e) => {
-		ee.onChange(e), ne(e), h && b();
-	}, _ = (e) => {
+	}), [h, te] = T(m.value || !1), g = ee.error, _ = (e) => {
+		m.onChange(e), te(e), g && re();
+	}, ne = (e) => {
 		let { checked: t } = e.target;
-		g(t);
+		_(t);
 	}, v = (e) => {
 		(e.key === "Enter" || e.key === "Space") && p(!0), d.onKeyDown?.(e);
 	}, y = (e) => {
-		(e.key === "Enter" || e.key === "Space") && (p(!1), g(!m)), d.onKeyUp?.(e);
-	}, b = () => ee.onBlur();
+		(e.key === "Enter" || e.key === "Space") && (p(!1), _(!h)), d.onKeyUp?.(e);
+	}, re = () => m.onBlur();
 	return /* @__PURE__ */ n("div", {
 		className: [
 			$,
 			f ? `${$}-active` : "",
 			l || ""
 		].join(" "),
-		css: ct(u),
+		css: ut(u),
 		"data-testid": $,
 		children: [/* @__PURE__ */ n("label", {
 			className: `${$}-container`,
@@ -3780,16 +3797,16 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
 					className: [
 						`${$}-inputField`,
 						f ? `${$}-active` : "",
-						h && `${$}-error`
+						g && `${$}-error`
 					].join(" "),
 					type: "checkbox",
 					value: e,
-					checked: m,
+					checked: h,
 					disabled: o,
-					onChange: _,
+					onChange: ne,
 					onKeyDown: v,
 					onKeyUp: y,
-					onBlur: b,
+					onBlur: re,
 					"data-testid": `${$}-inputField`,
 					...d
 				}), /* @__PURE__ */ n("span", {
@@ -3808,20 +3825,20 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
 				"data-testid": `${$}-label`,
 				children: s
 			})]
-		}), (c || h) && /* @__PURE__ */ t("span", {
+		}), (c || g) && /* @__PURE__ */ t("span", {
 			className: `${$}-helperText`,
 			"data-testid": `${$}-helperText`,
-			children: h ? h.message : c
+			children: g ? g.message : c
 		})]
 	});
-}, ut = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.SWITCH], n);
-	return /* @__PURE__ */ t(lt, {
-		...r,
-		style: i
+}, ft = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.SWITCH], n, r.toUpperCase());
+	return /* @__PURE__ */ t(dt, {
+		...i,
+		style: a
 	});
 };
 //#endregion
-export { Ae as a, A as c, ze as i, nt as n, Te as o, Xe as r, be as s, ut as t };
+export { Me as a, A as c, Ve as i, it as n, Te as o, Qe as r, be as s, ft as t };
 
-//# sourceMappingURL=Switch-BS8iwAJ5.js.map
+//# sourceMappingURL=Switch-JF9P9VJf.js.map