@foi/design-system 0.0.4 → 0.0.5

package/dist/Switch-BKf-QVlX.js

@@ -0,0 +1,3824 @@
+import { i as e, n as t, r as n, t as r } from "./emotion-react-jsx-runtime.browser.esm-BFNmScj4.js";
+import { r as i } from "./theme-DEqiATmv.js";
+import { a, t as o } from "./RadioGroup.context-zJGC5Sjc.js";
+import { _ as s, a as c, c as l, f as u, g as d, h as ee, i as f, l as p, m as te, n as ne, o as m, p as h, r as g, s as re, t as _, u as v, v as y, y as ie } from "./DatePicker.utils-ytCEcs6T.js";
+import { n as b, t as ae } from "./useStateCallback-D9fqdxiO.js";
+import x, { forwardRef as oe, useContext as se, useEffect as ce, useLayoutEffect as le, useMemo as S, useRef as C, useState as w } from "react";
+import { css as T } from "@emotion/react";
+import { useController as ue } from "react-hook-form";
+import de from "@mui/icons-material/EventOutlined";
+import fe from "@mui/icons-material/ArrowDropUpOutlined";
+import pe from "@mui/icons-material/KeyboardArrowLeftOutlined";
+import me from "@mui/icons-material/KeyboardArrowRightOutlined";
+import E from "@mui/icons-material/FiberManualRecord";
+//#region src/components/atoms/Button/Button.emotion.ts
+var D = (e, t) => `
+    // UTILS
+    ${i(e, "color", `--BUTTON-EVENTS-${t}-COLOR-PRIMARY`)}
+
+    // BACKGROUNDS
+    ${i(e, "background-color", `--BUTTON-EVENTS-${t}-BACKGROUND-COLOR`)}
+
+    // BORDERS
+    ${i(e, "border-color", `--BUTTON-EVENTS-${t}-BORDER-COLOR`)}
+    ${i(e, "border-width", `--BUTTON-EVENTS-${t}-BORDER-WIDTH`)}
+    ${i(e, "border-style", `--BUTTON-EVENTS-${t}-BORDER-STYLE`)}
+
+    // OUTLINE
+    ${i(e, "outline-color", `--BUTTON-EVENTS-${t}-OUTLINE-COLOR`)}
+    ${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`)}
+  `, O = (e) => T`
+  &.--BUTTON {
+    width: 100%;
+    height: 48px;
+    ${i(e, "border-radius", "--BUTTON-ROOT-BORDER-RADIUS")};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    text-transform: none;
+    position: relative;
+    text-decoration: none;
+    cursor: pointer;
+    padding: 13.5px 16px;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+
+    // ENABLED
+    ${D(e, "ENABLED")};
+
+    // HOVER
+    &:hover {
+      ${D(e, "HOVER")};
+    }
+
+    // ACTIVE
+    &.--BUTTON-active,
+    &:active {
+      ${D(e, "ACTIVE")};
+    }
+
+    // FOCUS
+    &:focus-visible {
+      outline: none;
+      ${D(e, "FOCUS")};
+    }
+
+    // DISABLED
+    &:disabled {
+      pointer-events: none;
+      ${D(e, "DISABLED")};
+    }
+
+    // LOADING
+    &.--BUTTON-loading {
+      pointer-events: none;
+      ${D(e, "LOADING")};
+    }
+
+    .--BUTTON-iconStart,
+    .--BUTTON-iconEnd {
+      display: inline-flex;
+      align-items: center;
+      > svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .--BUTTON-span {
+      // FONT
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 0.875rem; // 14px
+      font-weight: 500;
+      line-height: 1.5;
+      letter-spacing: 0.01em;
+    }
+  }
+`, k = "--BUTTON", A = ({ className: e, style: r, children: i = "Click me!", type: a = "button", loading: o = !1, iconStart: s, iconEnd: c, ...l }) => {
+	let [u, d] = w(!1);
+	return /* @__PURE__ */ n("button", {
+		className: [
+			k,
+			u ? `${k}-active` : "",
+			o ? `${k}-loading` : "",
+			e || ""
+		].join(" "),
+		css: O(r),
+		type: a,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === "Space") && d(!0), l.onKeyDown?.(e);
+		},
+		onKeyUp: (e) => {
+			(e.key === "Enter" || e.key === "Space") && d(!1), l.onKeyUp?.(e);
+		},
+		onBlur: (e) => {
+			d(!1), l.onBlur?.(e);
+		},
+		"data-testid": k,
+		...l,
+		children: [
+			s && /* @__PURE__ */ t("span", {
+				className: `${k}-iconStart`,
+				children: s
+			}),
+			/* @__PURE__ */ t("span", {
+				className: `${k}-span`,
+				children: i
+			}),
+			c && /* @__PURE__ */ t("span", {
+				className: `${k}-iconEnd`,
+				children: c
+			})
+		]
+	});
+}, he = ({ theme: n, ...r }) => {
+	let { componentStyles: i } = e([a.BUTTON], n);
+	return /* @__PURE__ */ t(A, {
+		...r,
+		style: i
+	});
+}, j = (e, t) => `
+    ${i(e, "border-color", `--DATEPICKER-EVENTS-${t}-BORDER-COLOR`)};
+    ${i(e, "border-width", `--DATEPICKER-EVENTS-${t}-BORDER-WIDTH`)};
+    ${i(e, "border-style", `--DATEPICKER-EVENTS-${t}-BORDER-STYLE`)};
+`, M = (e, t, n = !1) => `
+    ${i(e, "color", `--DATEPICKER-EVENTS-${t}-COLOR-SECONDARY`)};
+    ${n ? "transform: translate(14px, -24px); font-size: 0.75rem;" : ""};
+`, N = (e) => `
+    .--DATEPICKER-legend {
+        max-width: ${e ? "100%" : "0px"};
+    }
+`, P = (e, t) => `
+    ${i(e, "background-color", `--DATEPICKER-EVENTS-${t}-BACKGROUND-COLOR`)};
+    ~ .--DATEPICKER-helperText {
+        ${i(e, "color", `--DATEPICKER-EVENTS-${t}-COLOR-TERTIARY`)};
+    }
+`, ge = (e) => T`
+  &.--DATEPICKER {
+    position: relative;
+    padding: 0;
+    border: 0;
+    width: 100%;
+
+    &.--DATEPICKER-paddingBottom {
+      padding-bottom: 24px;
+    }
+
+    .--DATEPICKER-container {
+      box-sizing: border-box;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      min-height: 48px;
+
+      width: -webkit-fill-available;
+      width: -moz-available;
+      width: stretch;
+
+      ${i(e, "border-radius", "--DATEPICKER-ROOT-BORDER-RADIUS")};
+
+      // ENABLED
+      ${P(e, "ENABLED")};
+
+      // VALUE (field has content or calendar is open)
+      &:has(.--DATEPICKER-fieldRow.--DATEPICKER-open) {
+        ${P(e, "VALUE")};
+      }
+
+      // HOVER
+      &:has(.--DATEPICKER-fieldRow:hover) {
+        ${P(e, "HOVER")};
+      }
+
+      // ACTIVE
+      &:has(.--DATEPICKER-fieldRow:active) {
+        ${P(e, "ACTIVE")};
+      }
+
+      // FOCUS (user is typing inside the 3 sub-inputs)
+      &:has(.--DATEPICKER-fieldRow:focus-within) {
+        outline: none;
+        ${P(e, "FOCUS")};
+      }
+
+      // ERROR
+      &:has(.--DATEPICKER-fieldRow.--DATEPICKER-error) {
+        ${P(e, "ERROR")};
+      }
+
+      // ERROR + VALUE
+      &:has(.--DATEPICKER-fieldRow.--DATEPICKER-error.--DATEPICKER-open) {
+        ${P(e, "ERROR_VALUE")};
+      }
+
+      // ERROR + HOVER
+      &:has(.--DATEPICKER-fieldRow.--DATEPICKER-error:hover) {
+        ${P(e, "ERROR_HOVER")};
+      }
+
+      // ERROR + ACTIVE
+      &:has(.--DATEPICKER-fieldRow.--DATEPICKER-error:active) {
+        ${P(e, "ERROR_ACTIVE")};
+      }
+
+      // ERROR + FOCUS
+      &:has(.--DATEPICKER-fieldRow.--DATEPICKER-error:focus-within) {
+        ${P(e, "ERROR_FOCUS")};
+      }
+
+      // DISABLED
+      &:has(.--DATEPICKER-fieldRow.--DATEPICKER-disabled) {
+        pointer-events: none;
+        ${P(e, "DISABLED")};
+      }
+
+      // DISABLED + VALUE
+      &:has(.--DATEPICKER-fieldRow.--DATEPICKER-disabled.--DATEPICKER-open) {
+        pointer-events: none;
+        ${P(e, "DISABLED_VALUE")};
+      }
+
+      .--DATEPICKER-fieldRow {
+        display: flex;
+        align-items: center;
+        gap: 0px;
+
+        height: -webkit-fill-available;
+        height: -moz-available;
+        height: stretch;
+        width: -webkit-fill-available;
+        width: -moz-available;
+        width: stretch;
+
+        min-width: 0;
+        border: 0;
+        margin: 0;
+        padding: 15px 14px;
+        background-color: transparent;
+        cursor: text;
+        box-sizing: border-box;
+
+        // ── Label / fieldset states triggered as sibling ────────────────
+
+        // ENABLED
+        ~ .--DATEPICKER-label {
+          ${M(e, "ENABLED", !0)};
+        }
+        ~ .--DATEPICKER-fieldset {
+          ${j(e, "ENABLED")};
+          ${N(!0)};
+        }
+
+        // VALUE
+        &.--DATEPICKER-open {
+          ~ .--DATEPICKER-label {
+            ${M(e, "VALUE", !0)};
+          }
+          ~ .--DATEPICKER-fieldset {
+            ${j(e, "VALUE")};
+            ${N(!0)};
+          }
+        }
+
+        // HOVER
+        &:hover {
+          ~ .--DATEPICKER-label {
+            ${M(e, "HOVER")};
+          }
+          ~ .--DATEPICKER-fieldset {
+            ${j(e, "HOVER")};
+          }
+        }
+
+        // FOCUS (typing in sub-inputs)
+        &:focus-within {
+          ~ .--DATEPICKER-label {
+            ${M(e, "FOCUS", !0)};
+          }
+          ~ .--DATEPICKER-fieldset {
+            ${j(e, "FOCUS")};
+            ${N(!0)};
+          }
+        }
+
+        // ERROR
+        &.--DATEPICKER-error {
+          ~ .--DATEPICKER-label {
+            ${M(e, "ERROR")};
+          }
+          ~ .--DATEPICKER-fieldset {
+            ${j(e, "ERROR")};
+          }
+        }
+
+        // ERROR + VALUE
+        &.--DATEPICKER-error.--DATEPICKER-open {
+          ~ .--DATEPICKER-label {
+            ${M(e, "ERROR_VALUE")};
+          }
+          ~ .--DATEPICKER-fieldset {
+            ${j(e, "ERROR_VALUE")};
+          }
+        }
+
+        // ERROR + HOVER
+        &.--DATEPICKER-error:hover {
+          ~ .--DATEPICKER-label {
+            ${M(e, "ERROR_HOVER")};
+          }
+          ~ .--DATEPICKER-fieldset {
+            ${j(e, "ERROR_HOVER")};
+          }
+        }
+
+        // ERROR + FOCUS
+        &.--DATEPICKER-error:focus-within {
+          ~ .--DATEPICKER-label {
+            ${M(e, "ERROR_FOCUS")};
+          }
+          ~ .--DATEPICKER-fieldset {
+            ${j(e, "ERROR_FOCUS")};
+            ${N(!0)};
+          }
+        }
+
+        // DISABLED
+        &.--DATEPICKER-disabled {
+          user-select: none;
+          pointer-events: none;
+          cursor: default;
+
+          .--DATEPICKER-partInput {
+            ${i(e, "color", "--DATEPICKER-EVENTS-DISABLED-COLOR-PRIMARY")};
+          }
+          .--DATEPICKER-separator {
+            ${i(e, "color", "--DATEPICKER-EVENTS-DISABLED-COLOR-PRIMARY")};
+          }
+
+          ~ .--DATEPICKER-label {
+            ${M(e, "DISABLED")};
+          }
+          ~ .--DATEPICKER-fieldset {
+            ${j(e, "DISABLED")};
+          }
+        }
+
+        // ── Sub-input elements ───────────────────────────────────────────
+
+        .--DATEPICKER-separator {
+          font-family: ${e["--FONTFAMILY-PRIMARY"]};
+          font-size: 0.875rem;
+          font-weight: 400;
+          letter-spacing: 0.01em;
+          line-height: 1;
+          ${i(e, "color", "--DATEPICKER-EVENTS-ENABLED-COLOR-PRIMARY")};
+          user-select: none;
+          padding: 0 2px;
+        }
+
+        .--DATEPICKER-partInput {
+          font-family: ${e["--FONTFAMILY-PRIMARY"]};
+          font-size: 0.875rem;
+          font-weight: 500;
+          letter-spacing: 0.01em;
+          line-height: 1;
+          padding: 0;
+          margin: 0;
+
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          flex: 0 0 auto;
+          white-space: nowrap;
+          user-select: none;
+          cursor: text;
+          outline: none;
+
+          &.--DATEPICKER-placeholder {
+            ${i(e, "color", "--DATEPICKER-EVENTS-ENABLED-COLOR-SECONDARY")};
+          }
+
+          &:focus {
+            ${i(e, "background-color", "--DATEPICKER-EVENTS-VALUE-BORDER-COLOR")};
+            border-radius: 2px;
+          }
+
+          &:focus-visible {
+            outline: none;
+          }
+
+          ${i(e, "color", "--DATEPICKER-EVENTS-ENABLED-COLOR-PRIMARY")};
+        }
+      }
+
+      // ── Calendar icon button ─────────────────────────────────────────
+
+      .--DATEPICKER-calendarIcon {
+        flex-shrink: 0;
+        ${i(e, "color", "--DATEPICKER-EVENTS-ENABLED-ICON-COLOR")};
+      }
+
+      // ── Floating label ───────────────────────────────────────────────
+
+      .--DATEPICKER-label {
+        font-family: ${e["--FONTFAMILY-PRIMARY"]};
+        font-size: 0.875rem;
+        font-weight: 500;
+        letter-spacing: 0.01em;
+        line-height: normal;
+
+        padding: 0;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        position: absolute;
+        pointer-events: none;
+        z-index: 4;
+
+        transform: translate(14px, 0px);
+        transition: 150ms ease-in-out;
+      }
+
+      // ── Fieldset border ──────────────────────────────────────────────
+
+      .--DATEPICKER-fieldset {
+        height: 100%;
+        width: -webkit-fill-available;
+        width: -moz-available;
+        width: stretch;
+
+        text-align: left;
+        position: absolute;
+        margin: 0;
+        padding: 0 6px;
+        pointer-events: none;
+        overflow: hidden;
+        z-index: 5;
+        box-sizing: border-box;
+        ${i(e, "border-radius", "--DATEPICKER-ROOT-BORDER-RADIUS")};
+        -webkit-tap-highlight-color: transparent;
+
+        .--DATEPICKER-legend {
+          width: auto;
+          overflow: hidden;
+          display: block;
+          padding: 0;
+          height: 0px;
+          visibility: hidden;
+
+          max-width: 0px;
+          transition: max-width 150ms ease-in-out;
+
+          .--DATEPICKER-text {
+            font-family: ${e["--FONTFAMILY-PRIMARY"]};
+            font-size: 0.75rem;
+            letter-spacing: 0.01em;
+            font-weight: 500;
+            padding: 0px 7px;
+          }
+        }
+      }
+
+      .--DATEPICKER-adornment {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 48px;
+        min-width: 48px;
+      }
+    }
+
+    .--DATEPICKER-helperText {
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 0.75rem;
+      line-height: 1;
+
+      display: block;
+      margin-top: 8px;
+      margin-left: 14px;
+      height: 16px;
+    }
+  }
+`, _e = (e, t) => `
+    // BACKGROUNDS
+    .--ICONBUTTON-span {
+      ${i(e, "background-color", `--ICONBUTTON-EVENTS-${t}-BACKGROUND-COLOR`)}
+    }
+  `, ve = (e, t) => `
+    // SHADOWS  
+    ${i(e, "background-color", `--ICONBUTTON-EVENTS-${t}-SHADOW-COLOR`)}
+  `, ye = (e, t) => `
+    // UTILS
+    .--ICONBUTTON-span > svg > path {
+        ${i(e, "fill", `--ICONBUTTON-EVENTS-${t}-ICON-COLOR`)}
+    }
+  `, be = (e, t) => `
+    // BORDER
+    .--ICONBUTTON-span {
+      ${i(e, "border-color", `--ICONBUTTON-EVENTS-${t}-BORDER-COLOR`)}
+      ${i(e, "border-width", `--ICONBUTTON-EVENTS-${t}-BORDER-WIDTH`)}
+      ${i(e, "border-style", `--ICONBUTTON-EVENTS-${t}-BORDER-STYLE`)}
+    }
+  `, F = (e, t) => `
+    // OUTLINE
+    .--ICONBUTTON-span {
+      ${i(e, "outline-color", `--ICONBUTTON-EVENTS-${t}-OUTLINE-COLOR`)}
+      ${i(e, "outline-width", `--ICONBUTTON-EVENTS-${t}-OUTLINE-WIDTH`)}
+      ${i(e, "outline-style", `--ICONBUTTON-EVENTS-${t}-OUTLINE-STYLE`)}
+      ${i(e, "outline-offset", `--ICONBUTTON-EVENTS-${t}-OUTLINE-OFFSET`)}
+    }
+  `, xe = (e) => T`
+  &.--ICONBUTTON {
+    width: 24px;
+    height: 24px;
+    ${i(e, "border-radius", "--ICONBUTTON-ROOT-BORDER-RADIUS")};
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    vertical-align: middle;
+    box-sizing: content-box;
+    position: relative;
+    user-select: none;
+    padding: 0px;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    isolation: isolate;
+    border: none;
+    background-color: transparent;
+
+    // ENABLED
+    ${_e(e, "ENABLED")};
+    ${be(e, "ENABLED")};
+    ${ye(e, "ENABLED")};
+
+    // HOVER
+    &:hover {
+      &:before {
+        opacity: 1;
+        ${ve(e, "HOVER")};
+      }
+    }
+
+    // ACTIVE
+    &.--ICONBUTTON-active,
+    &:active {
+      &:before {
+        opacity: 1;
+        ${ve(e, "ACTIVE")};
+      }
+    }
+
+    // FOCUS
+    &:focus-visible {
+      outline: none;
+      ${F(e, "FOCUS")};
+    }
+
+    // DISABLED
+    &:disabled {
+      pointer-events: none;
+      ${_e(e, "ENABLED")};
+      ${be(e, "ENABLED")};
+      ${ye(e, "ENABLED")};
+    }
+
+    &.--ICONBUTTON-flipped {
+      .--ICONBUTTON-span {
+        > svg {
+          rotate: 180deg !important;
+        }
+      }
+    }
+
+    .--ICONBUTTON-span {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+      ${i(e, "border-radius", "--ICONBUTTON-ROOT-BORDER-RADIUS")};
+
+      > svg {
+        rotate: 0deg;
+        transition: rotate 150ms ease-in-out;
+        position: absolute;
+        width: 100%;
+        height: auto;
+        z-index: 1;
+      }
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      opacity: 0;
+      transition: opacity 150ms ease-in-out;
+      z-index: -1;
+    }
+  }
+`, I = "--ICONBUTTON", Se = ({ className: e, style: n, icon: r, onClick: i, isFlipped: a, ...o }) => {
+	let [s, c] = w(!1);
+	return /* @__PURE__ */ t("button", {
+		className: [
+			I,
+			s ? `${I}-active` : "",
+			a ? `${I}-flipped` : "",
+			e
+		].join(" "),
+		css: xe(n),
+		type: "button",
+		onClick: i,
+		onKeyDown: (e) => {
+			e.stopPropagation(), (e.key === "Enter" || e.key === "Space") && c(!0), o.onKeyDown?.(e);
+		},
+		onKeyUp: (e) => {
+			(e.key === "Enter" || e.key === "Space") && c(!1), o.onKeyUp?.(e);
+		},
+		onBlur: (e) => {
+			c(!1), o.onBlur?.(e);
+		},
+		"data-testid": I,
+		...o,
+		children: /* @__PURE__ */ t("span", {
+			className: `${I}-span`,
+			children: r
+		})
+	});
+}, Ce = ({ theme: n, ...r }) => {
+	let { componentStyles: i } = e([a.ICONBUTTON], n);
+	return /* @__PURE__ */ t(Se, {
+		...r,
+		style: i
+	});
+}, we = (e, t) => `  
+  // OUTLINE
+  ${i(e, "outline-color", `--DATEPICKERMENU-EVENTS-${t}-OUTLINE-COLOR`)}
+  ${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`)}
+`, Te = (e) => T`
+  &.--DATEPICKERMENU {
+    z-index: 100;
+    position: absolute;
+    top: 52px;
+    left: 0px;
+    box-shadow:
+      rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,
+      rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
+      rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
+    ${i(e, "border-radius", "--DATEPICKERMENU-ROOT-BORDER-RADIUS")};
+    ${i(e, "background-color", "--DATEPICKERMENU-ROOT-BACKGROUND-COLOR")};
+    box-sizing: border-box;
+    padding: 16px;
+    width: 272px;
+    height: autopx;
+
+    // Animation
+    display: none;
+    opacity: 0;
+    translate: 0px -10px;
+    transition-property: display opacity translate;
+    transition-duration: 150ms;
+    transition-behavior: allow-discrete;
+
+    &.--DATEPICKERMENU-open {
+      display: block;
+      opacity: 1;
+      translate: 0px 0px;
+
+      @starting-style {
+        opacity: 0;
+        translate: 0px -10px;
+      }
+    }
+
+    &.--DATEPICKERMENU-static {
+      position: static;
+      margin-top: 8px;
+    }
+
+    // ── Header (month/year + navigation) ──────────────────────────────────────
+
+    .--DATEPICKERMENU-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0 0px 12px 4px;
+
+      .--DATEPICKERMENU-yearToggle {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+
+        .--DATEPICKERMENU-labelWrap {
+          overflow-x: hidden;
+
+          .--DATEPICKERMENU-headerLabel {
+            font-family: ${e["--FONTFAMILY-PRIMARY"]};
+            font-size: 1rem;
+            ${i(e, "color", "--DATEPICKERMENU-EVENTS-ENABLED-COLOR-PRIMARY")};
+
+            .--DATEPICKERMENU-yearLabel {
+              font-family: ${e["--FONTFAMILY-SECONDARY"] || e["--FONTFAMILY-PRIMARY"]};
+              font-size: 0.938rem;
+              ${i(e, "color", "--DATEPICKERMENU-EVENTS-ENABLED-COLOR-PRIMARY")};
+            }
+          }
+
+          // Slide animations when month changes
+          &.--DATEPICKERMENU-slideLeft .--DATEPICKERMENU-headerLabel {
+            animation: dpSlideFromLeft 150ms ease-in-out;
+          }
+          &.--DATEPICKERMENU-slideRight .--DATEPICKERMENU-headerLabel {
+            animation: dpSlideFromRight 150ms ease-in-out;
+          }
+        }
+
+        .--DATEPICKERMENU-yearArrow {
+          ${i(e, "color", "--DATEPICKERMENU-EVENTS-ENABLED-ICON-COLOR")};
+        }
+      }
+
+      .--DATEPICKERMENU-monthNav {
+        display: flex;
+        gap: 12px;
+
+        .--DATEPICKERMENU-navArrow {
+          ${i(e, "color", "--DATEPICKERMENU-EVENTS-ENABLED-ICON-COLOR")};
+        }
+      }
+    }
+
+    // ── Calendar grid ─────────────────────────────────────────────────────────
+
+    .--DATEPICKERMENU-body {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      overflow-y: clip;
+      height: 245px;
+
+      &.--DATEPICKERMENU-yearBody {
+        overflow: clip;
+        overflow-clip-margin: 18px;
+      }
+    }
+
+    .--DATEPICKERMENU-yearScrollWrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      overflow-y: scroll;
+      height: 100%;
+      width: calc(100% + 24px);
+      margin-left: -8px;
+      padding: 8px;
+      box-sizing: border-box;
+      scroll-padding: 8px;
+
+      &::-webkit-scrollbar {
+        width: 12px;
+        height: 4px;
+        cursor: pointer;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0.5);
+        border-radius: 9999px;
+        border: 3px solid transparent;
+        background-clip: padding-box;
+      }
+    }
+
+    .--DATEPICKERMENU-weekRow {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      gap: 12px;
+    }
+
+    // Viewport that clips the slide animation while letting outlines overflow
+    .--DATEPICKERMENU-gridViewport {
+      overflow: clip;
+      overflow-clip-margin: 6px;
+    }
+
+    // Month grid (with slide animation)
+    .--DATEPICKERMENU-calendarGrid {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+
+      &.--DATEPICKERMENU-slideLeft {
+        animation: dpSlideFromLeft 150ms ease-in-out;
+      }
+      &.--DATEPICKERMENU-slideRight {
+        animation: dpSlideFromRight 150ms ease-in-out;
+      }
+    }
+
+    // ── Day cells ─────────────────────────────────────────────────────────────
+
+    .--DATEPICKERMENU-dayCell {
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 14px;
+      ${i(e, "color", "--DATEPICKERMENU-EVENTS-ENABLED-COLOR-SECONDARY")};
+      width: 24px;
+      height: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: transparent;
+    }
+
+    .--DATEPICKERMENU-dayBtn {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      border: none;
+      border-radius: 4px;
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 14px;
+      ${i(e, "color", "--DATEPICKERMENU-EVENTS-ENABLED-COLOR-PRIMARY")};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: transparent;
+      isolation: isolate;
+      padding: 0px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+        z-index: -1;
+      }
+
+      // Hover
+      &:hover {
+        ::before {
+          opacity: 1;
+          ${i(e, "background-color", "--DATEPICKERMENU-EVENTS-HOVER-BACKGROUND-COLOR")};
+        }
+      }
+
+      // Active
+      &:active {
+        &::before {
+          opacity: 1;
+          ${i(e, "background-color", "--DATEPICKERMENU-EVENTS-ACTIVE-BACKGROUND-COLOR")};
+        }
+      }
+
+      // Focus
+      &.--DATEPICKERMENU-focused,
+      &:focus-visible {
+        outline: none;
+        ${we(e, "FOCUS")};
+      }
+
+      &.--DATEPICKERMENU-today {
+        ${i(e, "background-color", "--DATEPICKERMENU-EVENTS-ENABLED-BACKGROUND-COLOR")};
+      }
+
+      &.--DATEPICKERMENU-selected {
+        ${i(e, "background-color", "--DATEPICKERMENU-EVENTS-VALUE-BACKGROUND-COLOR")};
+        ${i(e, "color", "--DATEPICKERMENU-EVENTS-VALUE-COLOR-PRIMARY")};
+      }
+
+      &:disabled {
+        pointer-events: none;
+        cursor: default;
+        ${i(e, "color", "--DATEPICKERMENU-EVENTS-DISABLED-COLOR-PRIMARY")};
+        background-color: transparent;
+
+        &.--DATEPICKERMENU-selected {
+          ${i(e, "background-color", "--DATEPICKERMENU-EVENTS-DISABLED-COLOR-PRIMARY")};
+        }
+
+        &.--DATEPICKERMENU-today::after {
+          ${i(e, "background-color", "--DATEPICKERMENU-EVENTS-DISABLED-COLOR-PRIMARY")};
+        }
+      }
+    }
+
+    // ── Year cells ────────────────────────────────────────────────────────────
+
+    .--DATEPICKERMENU-yearBtn {
+      cursor: pointer;
+      border: none;
+      border-radius: 4px;
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 14px;
+      ${i(e, "color", "--DATEPICKERMENU-EVENTS-ENABLED-COLOR-PRIMARY")};
+      width: 40.5px;
+      height: 24px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: transparent;
+      position: relative;
+      isolation: isolate;
+      padding: 0px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 54px;
+        height: 36px;
+        border-radius: 18px;
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+        z-index: -1;
+      }
+
+      // Hover
+      &:hover {
+        ::before {
+          opacity: 1;
+          ${i(e, "background-color", "--DATEPICKERMENU-EVENTS-HOVER-BACKGROUND-COLOR")};
+        }
+      }
+
+      // Active
+      &:active {
+        &::before {
+          opacity: 1;
+          ${i(e, "background-color", "--DATEPICKERMENU-EVENTS-ACTIVE-BACKGROUND-COLOR")};
+        }
+      }
+
+      // Focus
+      &.--DATEPICKERMENU-focused,
+      &:focus-visible {
+        outline: none;
+        ${we(e, "FOCUS")};
+      }
+
+      &.--DATEPICKERMENU-selected {
+        ${i(e, "background-color", "--DATEPICKERMENU-EVENTS-VALUE-BACKGROUND-COLOR")};
+        ${i(e, "color", "--DATEPICKERMENU-EVENTS-VALUE-COLOR-PRIMARY")};
+      }
+    }
+  }
+
+  @keyframes dpSlideFromLeft {
+    from {
+      translate: -100% 0;
+    }
+    to {
+      translate: 0 0;
+    }
+  }
+
+  @keyframes dpSlideFromRight {
+    from {
+      translate: 100% 0;
+    }
+    to {
+      translate: 0 0;
+    }
+  }
+`, L = "--DATEPICKERMENU", Ee = oe(({ isOpen: e, hasStaticOptions: i = !1, testId: a = `${L}-root`, monthLabel: o = "", yearLabel: s = "", onPrevMonth: c, onNextMonth: l, disablePrev: u = !1, disableNext: ee = !1, weeks: f = [], years: p = [], daysOfWeek: ne = [], selectedValue: m, format: h = "MM/dd/yyyy", today: g, focusedElement: re = -1, onSelectDay: _ = () => {}, onSelectYear: v = () => {}, onMoveFocus: y = () => {}, onClose: ie = () => {}, style: b }, ae) => {
+	let [x, oe] = w(!1), [se, S] = w(null), [T, ue] = w(0), [de, E] = w(!1), [D, O] = w(-1), k = C({}), A = C({}), he = C(null), j = C(o + s);
+	ce(() => {
+		if (!e) return;
+		let t = o + s;
+		t !== j.current && (j.current = t);
+	}, [
+		o,
+		s,
+		e
+	]);
+	let M = () => {
+		S("left"), ue((e) => e + 1), c();
+	}, N = () => {
+		S("right"), ue((e) => e + 1), l();
+	};
+	ce(() => {
+		if (!e || re < 0) return;
+		let t = k.current[re];
+		if (!t) return;
+		let n = document.activeElement;
+		n && (n.tagName === "INPUT" || n.role === "combobox") || t.focus(), t.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [re, e]), ce(() => {
+		if (!e) {
+			let e = setTimeout(() => oe(!1), 150);
+			return () => clearTimeout(e);
+		}
+	}, [e]), le(() => {
+		if (!x) {
+			O(-1);
+			return;
+		}
+		let e = m && d(m) ? m.getFullYear() : g?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear(), t = p.flat().findIndex((t) => t.label === String(e));
+		O(t >= 0 ? t : 0);
+	}, [x]), le(() => {
+		if (!x || D < 0) return;
+		let e = A.current[D];
+		e && (e.focus({ preventScroll: !0 }), e.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		}));
+	}, [D, x]);
+	let P = (e, t) => {
+		if ([
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(e.key)) {
+			e.preventDefault(), e.stopPropagation(), y(e.key);
+			return;
+		}
+		e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), _(t, !0));
+	}, ge = (e, t) => {
+		let n = e.querySelector(t);
+		return n ? n.tagName === "BUTTON" ? n : n.querySelector("button") : null;
+	}, _e = (e) => {
+		let t = p[0]?.length ?? 4, n = {
+			ArrowRight: 1,
+			ArrowLeft: -1,
+			ArrowDown: t,
+			ArrowUp: -t
+		}[e];
+		if (!n) return;
+		let r = D + n;
+		r < 0 || r >= p.flat().length || O(r);
+	}, ve = (e) => {
+		let t = he.current;
+		if (!t) return;
+		let n = ge(t, `.${L}-yearArrow`), r = Array.from(t.querySelectorAll(`.${L}-navArrow`)), i = x ? null : r[0]?.tagName === "BUTTON" ? r[0] : r[0]?.querySelector("button") ?? null, a = x ? null : r[1]?.tagName === "BUTTON" ? r[1] : r[1]?.querySelector("button") ?? null, o = !x && re >= 0 ? k.current[re] ?? null : null, s = x && D >= 0 ? A.current[D] ?? null : null, c = x ? [n, s].filter((e) => e !== null) : [
+			n,
+			i,
+			a,
+			o
+		].filter((e) => e !== null);
+		c.length !== 0 && c[(c.indexOf(document.activeElement) + (e ? -1 : 1) + c.length) % c.length]?.focus();
+	}, ye = (e) => {
+		if (e.key === "Escape") {
+			e.preventDefault(), e.stopPropagation(), ie();
+			return;
+		}
+		if (e.key === "Tab") {
+			e.preventDefault(), e.stopPropagation(), ve(e.shiftKey);
+			return;
+		}
+		[
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(e.key) && (x ? (e.preventDefault(), e.stopPropagation(), _e(e.key)) : Object.values(k.current).some((e) => e === document.activeElement) || (e.preventDefault(), e.stopPropagation(), y(e.key)));
+	}, be = m && d(m) ? te(m, h) : null, F = g && d(g) ? te(g, h) : null;
+	return /* @__PURE__ */ t("div", {
+		ref: ae,
+		children: /* @__PURE__ */ n("div", {
+			ref: he,
+			className: [
+				L,
+				e ? `${L}-open` : "",
+				i ? `${L}-static` : ""
+			].filter(Boolean).join(" "),
+			css: Te(b),
+			role: "dialog",
+			"aria-label": "Date picker calendar",
+			"data-testid": a,
+			onKeyDownCapture: ye,
+			children: [/* @__PURE__ */ n("div", {
+				className: `${L}-header`,
+				children: [/* @__PURE__ */ n("div", {
+					className: `${L}-yearToggle`,
+					children: [/* @__PURE__ */ t("div", {
+						className: `${L}-labelWrap`,
+						children: /* @__PURE__ */ n("span", {
+							className: `${L}-headerLabel`,
+							children: [
+								o,
+								" ",
+								/* @__PURE__ */ t("span", {
+									className: `${L}-yearLabel`,
+									children: s
+								})
+							]
+						})
+					}), /* @__PURE__ */ t(Ce, {
+						icon: /* @__PURE__ */ t(fe, {}),
+						onClick: () => oe((e) => !e),
+						className: `${L}-yearArrow`,
+						isFlipped: !x,
+						"aria-label": x ? "Close year selector" : "Open year selector",
+						tabIndex: -1,
+						onFocus: () => E(!0)
+					})]
+				}), !x && /* @__PURE__ */ n("div", {
+					className: `${L}-monthNav`,
+					children: [/* @__PURE__ */ t(Ce, {
+						icon: /* @__PURE__ */ t(pe, {}),
+						onClick: M,
+						className: `${L}-navArrow`,
+						disabled: u,
+						"aria-label": "Previous month",
+						tabIndex: -1,
+						onFocus: () => E(!0)
+					}), /* @__PURE__ */ t(Ce, {
+						icon: /* @__PURE__ */ t(me, {}),
+						onClick: N,
+						className: `${L}-navArrow`,
+						disabled: ee,
+						"aria-label": "Next month",
+						tabIndex: -1,
+						onFocus: () => E(!0)
+					})]
+				})]
+			}), /* @__PURE__ */ n("div", {
+				className: [`${L}-body`, x ? `${L}-yearBody` : ""].filter(Boolean).join(" "),
+				children: [!x && /* @__PURE__ */ n(r, { children: [/* @__PURE__ */ t("div", {
+					className: `${L}-weekRow`,
+					children: ne.map((e, n) => /* @__PURE__ */ t("span", {
+						className: `${L}-dayCell`,
+						children: e
+					}, `header-${n}`))
+				}), /* @__PURE__ */ t("div", {
+					className: `${L}-gridViewport`,
+					children: /* @__PURE__ */ t("div", {
+						className: [
+							`${L}-calendarGrid`,
+							se === "left" ? `${L}-slideLeft` : "",
+							se === "right" ? `${L}-slideRight` : ""
+						].filter(Boolean).join(" "),
+						onAnimationEnd: () => S(null),
+						children: (() => {
+							let n = 0;
+							return f.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 = !!(be && r.value === be && e), c = r.value === F, l = re === o && e && !de;
+									return /* @__PURE__ */ t("button", {
+										id: `${L}-day-${o}`,
+										ref: (e) => {
+											k.current[o] = e;
+										},
+										className: [
+											`${L}-dayBtn`,
+											s ? `${L}-selected` : "",
+											c ? `${L}-today` : "",
+											l ? `${L}-focused` : ""
+										].filter(Boolean).join(" "),
+										type: "button",
+										onClick: () => _(r.value),
+										onFocus: () => E(!1),
+										onKeyDown: (e) => P(e, r.value),
+										disabled: r.isDisabled,
+										role: "option",
+										"aria-selected": s,
+										tabIndex: -1,
+										children: r.label
+									}, r.value);
+								})
+							}, `week-${i}`));
+						})()
+					}, T)
+				})] }), x && /* @__PURE__ */ t("div", {
+					className: `${L}-yearScrollWrapper`,
+					children: (() => {
+						let e = 0;
+						return p.map((n, r) => /* @__PURE__ */ t("div", {
+							className: `${L}-weekRow`,
+							children: n.map((n) => {
+								let r = e++, i = m && d(m) ? n.label === te(m, "yyyy") : !1, a = D === r && !de;
+								return /* @__PURE__ */ t("button", {
+									ref: (e) => {
+										A.current[r] = e;
+									},
+									className: [
+										`${L}-yearBtn`,
+										i ? `${L}-selected` : "",
+										a ? `${L}-focused` : ""
+									].filter(Boolean).join(" "),
+									type: "button",
+									tabIndex: -1,
+									onClick: () => {
+										v(n.value), oe(!1);
+									},
+									onFocus: () => E(!1),
+									"aria-selected": i,
+									children: n.label
+								}, n.value);
+							})
+						}, `year-row-${r}`));
+					})()
+				})]
+			})]
+		})
+	});
+});
+Ee.displayName = "DatePickerMenu";
+//#endregion
+//#region src/components/atoms/DatePicker/DatePickerMenu/index.tsx
+var De = x.forwardRef(({ theme: n, ...r }, i) => {
+	let { componentStyles: o } = e([a.DATEPICKERMENU, a.DATEPICKER], n);
+	return /* @__PURE__ */ t(Ee, {
+		...r,
+		style: o,
+		ref: i
+	});
+});
+De.displayName = "DatePickerMenu";
+//#endregion
+//#region src/components/atoms/DatePicker/DatePicker.tsx
+var R = "--DATEPICKER", Oe = ({ name: e, label: r, control: i, language: a = f(), minDate: o, maxDate: ae, disabled: x, disableFuture: oe, disablePast: se, hasStaticOptions: le = !1, showErrorText: T = !0, hasPadding: fe = !1, helperText: pe, style: me, className: E }) => {
+	let D = _[a].format, O = S(() => s(/* @__PURE__ */ new Date()), []), k = a === "en", { field: A, fieldState: he } = ue({
+		control: i,
+		name: e
+	}), j = he.error, M = S(() => d(A.value) ? u(A.value) : {
+		day: "",
+		month: "",
+		year: ""
+	}, []), [N, P] = w(M.day), [_e, ve] = w(M.month), [ye, be] = w(M.year), [F, xe] = w(!1), [I, Se] = w(-1), [we, Te] = w(() => d(A.value) ? A.value : O), L = C(null), Ee = C(null), Oe = C(null), ke = C(null), z = C(null), B = C(null), V = C(""), Ae = C(""), H = C(""), je = F || !!(N || _e || ye), U = S(() => c(we, D, a, {
+		minDate: o,
+		maxDate: ae,
+		disableFuture: oe,
+		disablePast: se,
+		today: O
+	}), [
+		we,
+		a,
+		o,
+		ae,
+		oe,
+		se,
+		O,
+		D
+	]), Me = S(() => U.flat().filter((e) => e.isDate), [U]), Ne = S(() => m(D, 1900, 200, 4), [D]), Pe = _[a].daysOfWeek.map((e) => ne[a][e]), Fe = g(we, a), Ie = te(we, "yyyy");
+	ce(() => {
+		if (!N && !_e && !ye) return;
+		let e = N || "01", t = _e || "01", n = ye || "2000", r = h(k ? `${t}/${e}/${n}` : `${e}/${t}/${n}`, D, /* @__PURE__ */ new Date());
+		A.onChange(r), l(r) && Te(r), j && A.onBlur();
+	}, [
+		N,
+		_e,
+		ye
+	]), b({
+		ref: Ee,
+		onAction: () => {
+			xe(!1), A.onBlur();
+		},
+		isActive: F,
+		exceptRef: L
+	});
+	let Le = (e) => {
+		let t = e.relatedTarget, n = L.current?.contains(t), r = Ee.current?.contains(t);
+		n || r || (xe(!1), A.onBlur());
+	}, Re = (e) => requestAnimationFrame(() => e.current?.focus()), ze = (e) => {
+		if ([
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(e.key) && F) {
+			e.preventDefault(), e.stopPropagation(), We(e.key);
+			return;
+		}
+		if (e.key === "Backspace" || e.key === "Delete") {
+			e.preventDefault(), P(""), V.current = "";
+			return;
+		}
+		if (!/^\d$/.test(e.key)) return;
+		e.preventDefault(), V.current = (V.current + e.key).slice(-2);
+		let t = parseInt(V.current, 10);
+		if (t === 0) {
+			P("01"), V.current = "";
+			return;
+		}
+		P(String(Math.min(t, 31)).padStart(2, "0")), (t > 3 || V.current.length >= 2) && (V.current = "", Re(k ? B : z));
+	}, W = (e) => {
+		if ([
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(e.key) && F) {
+			e.preventDefault(), e.stopPropagation(), We(e.key);
+			return;
+		}
+		if (e.key === "Backspace" || e.key === "Delete") {
+			e.preventDefault(), ve(""), Ae.current = "";
+			return;
+		}
+		if (!/^\d$/.test(e.key)) return;
+		e.preventDefault(), Ae.current = (Ae.current + e.key).slice(-2);
+		let t = parseInt(Ae.current, 10);
+		if (t === 0) {
+			ve("01"), Ae.current = "";
+			return;
+		}
+		ve(String(Math.min(t, 12)).padStart(2, "0")), (t > 1 || Ae.current.length >= 2) && (Ae.current = "", Re(k ? ke : B));
+	}, Be = (e) => {
+		if ([
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(e.key) && F) {
+			e.preventDefault(), e.stopPropagation(), We(e.key);
+			return;
+		}
+		if (e.key === "Backspace" || e.key === "Delete") {
+			e.preventDefault(), be(""), H.current = "";
+			return;
+		}
+		/^\d$/.test(e.key) && (e.preventDefault(), H.current = (H.current + e.key).slice(-4), be(String(parseInt(H.current, 10)).padStart(4, "0")));
+	}, G = () => {
+		if (x) return;
+		let e = l(A.value) ? A.value : O;
+		Te(e), Se(e.getDate() - 1), xe(!0);
+	}, Ve = () => xe(!1), He = () => F ? Ve() : G(), Ue = () => {
+		Te((e) => y(e, -1)), Se(-1);
+	}, K = () => {
+		Te((e) => y(e, 1)), Se(-1);
+	}, q = v(we, {
+		minDate: o,
+		disablePast: se,
+		today: O,
+		format: D
+	}), J = p(we, {
+		maxDate: ae,
+		disableFuture: oe,
+		today: O,
+		format: D
+	}), We = (e) => {
+		if (!F) return;
+		let t = {
+			ArrowRight: 1,
+			ArrowLeft: -1,
+			ArrowDown: 7,
+			ArrowUp: -7
+		}[e];
+		if (!t) return;
+		if (I < 0) {
+			Me.length > 0 && Se(0);
+			return;
+		}
+		let n = Me[I];
+		if (!n) return;
+		let r = h(n.value, D, /* @__PURE__ */ new Date()), i = ie(r, t);
+		if (re(i, {
+			minDate: o,
+			maxDate: ae,
+			disableFuture: oe,
+			disablePast: se,
+			today: O
+		})) return;
+		if (i.getMonth() !== r.getMonth() || i.getFullYear() !== r.getFullYear()) {
+			if (t > 0 && J || t < 0 && q) return;
+			Te(ee(i)), Se(i.getDate() - 1);
+			return;
+		}
+		let a = Me.findIndex((e) => e.value === te(i, D));
+		a >= 0 && Se(a);
+	}, Y = (e, t) => {
+		let n = h(e, D, /* @__PURE__ */ new Date());
+		A.onChange(n);
+		let r = u(n);
+		P(r.day), ve(r.month), be(r.year), xe(!1), t && requestAnimationFrame(() => Oe.current?.querySelector("button")?.focus());
+	}, Ge = (e) => {
+		let t = h(e, D, /* @__PURE__ */ new Date()), n = l(A.value) ? A.value : O, r = new Date(n);
+		r.setFullYear(t.getFullYear());
+		let i = h(te(r, D), D, /* @__PURE__ */ new Date());
+		A.onChange(i);
+		let a = u(i);
+		P(a.day), ve(a.month), be(a.year), Te(i);
+	}, Ke = (e) => {
+		if (e.key === "Tab") {
+			Ve();
+			return;
+		}
+		if (e.key === "Escape") {
+			Ve();
+			return;
+		}
+		e.key === "Enter" && F && (e.preventDefault(), I >= 0 && Me[I] && !Me[I].isDisabled && Y(Me[I].value)), [
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown"
+		].includes(e.key) && F && (e.preventDefault(), We(e.key));
+	}, qe = k ? z : ke, Je = k ? "MM" : "DD", Ye = k ? _e : N, X = k ? W : ze, Xe = k ? () => {
+		Ae.current = "";
+	} : () => {
+		V.current = "";
+	}, Ze = k ? ke : z, Z = k ? "DD" : "MM", Qe = k ? N : _e, $e = k ? ze : W, et = k ? () => {
+		V.current = "";
+	} : () => {
+		Ae.current = "";
+	};
+	return /* @__PURE__ */ n("div", {
+		className: [
+			R,
+			fe ? `${R}-paddingBottom` : "",
+			E || ""
+		].join(" "),
+		css: ge(me),
+		"data-testid": R,
+		children: [
+			/* @__PURE__ */ n("div", {
+				ref: L,
+				className: `${R}-container`,
+				onBlur: Le,
+				onKeyDown: Ke,
+				children: [
+					/* @__PURE__ */ n("div", {
+						className: [
+							`${R}-fieldRow`,
+							je ? `${R}-open` : "",
+							j ? `${R}-error` : "",
+							x ? `${R}-disabled` : ""
+						].join(" "),
+						onClick: (e) => {
+							e.target === e.currentTarget && qe.current?.focus();
+						},
+						"data-testid": `${R}-fieldRow`,
+						children: [
+							/* @__PURE__ */ t("span", {
+								ref: qe,
+								role: "spinbutton",
+								"aria-label": k ? "Month" : "Day",
+								"aria-valuenow": parseInt(Ye) || void 0,
+								"aria-valuemin": 1,
+								"aria-valuemax": k ? 12 : 31,
+								"aria-valuetext": Ye || Je,
+								className: [`${R}-partInput`, Ye ? "" : `${R}-placeholder`].filter(Boolean).join(" "),
+								tabIndex: x ? -1 : 0,
+								onKeyDown: X,
+								onFocus: Xe,
+								"data-testid": `${R}-first`,
+								children: Ye || Je
+							}),
+							/* @__PURE__ */ t("span", {
+								className: `${R}-separator`,
+								children: "/"
+							}),
+							/* @__PURE__ */ t("span", {
+								ref: Ze,
+								role: "spinbutton",
+								"aria-label": k ? "Day" : "Month",
+								"aria-valuenow": parseInt(Qe) || void 0,
+								"aria-valuemin": 1,
+								"aria-valuemax": k ? 31 : 12,
+								"aria-valuetext": Qe || Z,
+								className: [`${R}-partInput`, Qe ? "" : `${R}-placeholder`].filter(Boolean).join(" "),
+								tabIndex: x ? -1 : 0,
+								onKeyDown: $e,
+								onFocus: et,
+								"data-testid": `${R}-second`,
+								children: Qe || Z
+							}),
+							/* @__PURE__ */ t("span", {
+								className: `${R}-separator`,
+								children: "/"
+							}),
+							/* @__PURE__ */ t("span", {
+								ref: B,
+								role: "spinbutton",
+								"aria-label": "Year",
+								"aria-valuenow": parseInt(ye) || void 0,
+								"aria-valuemin": 1900,
+								"aria-valuemax": 2100,
+								"aria-valuetext": ye || "YYYY",
+								className: [`${R}-partInput`, ye ? "" : `${R}-placeholder`].filter(Boolean).join(" "),
+								tabIndex: x ? -1 : 0,
+								onKeyDown: Be,
+								onFocus: () => {
+									H.current = "";
+								},
+								"data-testid": `${R}-year`,
+								children: ye || "YYYY"
+							})
+						]
+					}),
+					/* @__PURE__ */ t("div", {
+						ref: Oe,
+						className: `${R}-adornment`,
+						children: /* @__PURE__ */ t(Ce, {
+							className: `${R}-calendarIcon`,
+							onClick: He,
+							icon: /* @__PURE__ */ t(de, {}),
+							disabled: x,
+							tabIndex: 0,
+							"data-testid": `${R}-calendarIcon`
+						})
+					}),
+					/* @__PURE__ */ t("fieldset", {
+						"aria-hidden": "true",
+						className: `${R}-fieldset`,
+						children: /* @__PURE__ */ t("legend", {
+							className: `${R}-legend`,
+							children: /* @__PURE__ */ t("span", {
+								className: `${R}-text`,
+								children: r
+							})
+						})
+					}),
+					/* @__PURE__ */ t("span", {
+						className: `${R}-label`,
+						children: r
+					})
+				]
+			}),
+			/* @__PURE__ */ n("span", {
+				className: `${R}-helperText`,
+				"data-testid": `${R}-helperText`,
+				children: [pe && !j && pe, T && j && j.message]
+			}),
+			/* @__PURE__ */ t(De, {
+				ref: Ee,
+				isOpen: F,
+				hasStaticOptions: le,
+				language: a,
+				monthLabel: Fe,
+				yearLabel: Ie,
+				onPrevMonth: Ue,
+				onNextMonth: K,
+				disablePrev: q,
+				disableNext: J,
+				weeks: U,
+				years: Ne,
+				daysOfWeek: Pe,
+				selectedValue: l(A.value) ? A.value : void 0,
+				format: D,
+				today: O,
+				focusedElement: I,
+				onSelectDay: Y,
+				onSelectYear: Ge,
+				onMoveFocus: We,
+				onClose: Ve
+			})
+		]
+	});
+}, ke = ({ theme: n, ...r }) => {
+	let { componentStyles: i } = e([a.DATEPICKER], n);
+	return /* @__PURE__ */ t(Oe, {
+		...r,
+		style: i
+	});
+}, z = (e, t) => `
+    // BORDERS
+    ${i(e, "border-color", `--INPUT-EVENTS-${t}-BORDER-COLOR`)};
+    ${i(e, "border-width", `--INPUT-EVENTS-${t}-BORDER-WIDTH`)};
+    ${i(e, "border-style", `--INPUT-EVENTS-${t}-BORDER-STYLE`)};
+`, B = (e, t) => `
+    // TYPOGRAPHY
+    ${i(e, "color", `--INPUT-EVENTS-${t}-COLOR-PRIMARY`)};
+    ${i(e, "caret-color", `--INPUT-EVENTS-${t}-COLOR-PRIMARY`)};
+`, V = (e, t, n = !1) => `
+    ${i(e, "color", `--INPUT-EVENTS-${t}-COLOR-SECONDARY`)};
+    ${n ? "transform: translate(14px, -24px); font-size: 0.75rem;" : ""};
+`, Ae = (e) => `
+    .--INPUT-legend {
+        max-width: ${e ? "100%" : "0px"};
+    }
+`, H = (e, t) => `
+  ${i(e, "background-color", `--INPUT-EVENTS-${t}-BACKGROUND-COLOR`)};
+  ~ .--INPUT-helperText {
+    ${i(e, "color", `--INPUT-EVENTS-${t}-COLOR-TERTIARY`)};
+  }
+`, je = (e) => T`
+  &.--INPUT {
+    position: relative;
+    padding: 0;
+    border: 0;
+    width: 100%;
+
+    &.--INPUT-paddingBottom {
+      padding-bottom: 24px;
+    }
+
+    .--INPUT-container {
+      box-sizing: border-box;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+
+      // Safari Firefox Chrome/Edge
+      width: -webkit-fill-available;
+      width: -moz-available;
+      width: stretch;
+
+      ${i(e, "border-radius", "--INPUT-ROOT-BORDER-RADIUS")};
+
+      // ENABLED
+      ${H(e, "ENABLED")};
+
+      // VALUE
+      &:has(.--INPUT-inputField:not(:placeholder-shown)) {
+        ${H(e, "VALUE")};
+      }
+
+      // HOVER
+      &:has(.--INPUT-inputField:hover) {
+        ${H(e, "HOVER")};
+      }
+
+      // ACTIVE
+      &:has(.--INPUT-inputField:active, .--INPUT-inputField.--INPUT-active) {
+        ${H(e, "ACTIVE")};
+      }
+
+      // FOCUS
+      &:has(.--INPUT-inputField:focus-visible) {
+        outline: none;
+        ${H(e, "FOCUS")};
+      }
+
+      // ERROR
+      &:has(.--INPUT-inputField.--INPUT-error) {
+        ${H(e, "ERROR")};
+      }
+
+      // ERROR + VALUE
+      &:has(.--INPUT-inputField.--INPUT-error:not(:placeholder-shown)) {
+        ${H(e, "ERROR_VALUE")};
+      }
+
+      // ERROR + HOVER
+      &:has(.--INPUT-inputField.--INPUT-error:hover) {
+        ${H(e, "ERROR_HOVER")};
+      }
+
+      // ERROR + ACTIVE
+      &:has(.--INPUT-inputField.--INPUT-error:active, .--INPUT-inputField.--INPUT-error.--INPUT-active) {
+        ${H(e, "ERROR_ACTIVE")};
+      }
+
+      // ERROR + FOCUS
+      &:has(.--INPUT-inputField.--INPUT-error:focus-visible) {
+        ${H(e, "ERROR_FOCUS")};
+      }
+
+      // DISABLED
+      &:has(.--INPUT-inputField:disabled) {
+        pointer-events: none;
+        ${H(e, "DISABLED")};
+      }
+
+      // DISABLED + VALUE
+      &:has(.--INPUT-inputField:disabled:not(:placeholder-shown)) {
+        pointer-events: none;
+        ${H(e, "DISABLED_VALUE")};
+      }
+
+      .--INPUT-inputField {
+        // FONT
+        font-family: ${e["--FONTFAMILY-PRIMARY"]};
+        font-size: 0.875rem; // 14px
+        font-weight: 500;
+        letter-spacing: 0.01em;
+        line-height: 1;
+
+        // Safari Firefox Chrome/Edge
+        height: -webkit-fill-available;
+        height: -moz-available;
+        height: stretch;
+        width: -webkit-fill-available;
+        width: -moz-available;
+        width: stretch;
+
+        min-width: 0;
+        border: 0;
+        margin: 0;
+        padding: 15px 14px;
+        background-color: transparent;
+        cursor: text;
+        display: block;
+        box-sizing: border-box;
+
+        &.--INPUT-right {
+          padding-right: 0px;
+        }
+
+        &.--INPUT-left {
+          padding-left: 0px;
+        }
+
+        // ENABLED
+        ${B(e, "ENABLED")};
+        ~ .--INPUT-label {
+          ${V(e, "ENABLED")};
+        }
+        ~ .--INPUT-fieldset {
+          ${z(e, "ENABLED")};
+        }
+
+        // VALUE
+        &:not(:placeholder-shown) {
+          ${B(e, "VALUE")};
+          ~ .--INPUT-label {
+            ${V(e, "VALUE", !0)};
+          }
+          ~ .--INPUT-fieldset {
+            ${z(e, "VALUE")};
+            ${Ae(!0)};
+          }
+        }
+
+        // Autocomplete
+        &:-webkit-autofill {
+          -webkit-background-clip: text;
+          ${i(e, "-webkit-text-fill-color", "--INPUT-EVENTS-ENABLED-COLOR-PRIMARY")};
+        }
+
+        // HOVER
+        &:hover {
+          ${B(e, "HOVER")};
+          ~ .--INPUT-label {
+            ${V(e, "HOVER")};
+          }
+          ~ .--INPUT-fieldset {
+            ${z(e, "HOVER")};
+          }
+        }
+
+        // ACTIVE
+        &:active,
+        &.--INPUT-active {
+          ${B(e, "ACTIVE")};
+          ~ .--INPUT-label {
+            ${V(e, "ACTIVE")};
+          }
+          ~ .--INPUT-fieldset {
+            ${z(e, "ACTIVE")};
+          }
+        }
+
+        // FOCUS
+        &:focus-visible {
+          outline: none;
+          ${B(e, "FOCUS")};
+          ~ .--INPUT-label {
+            ${V(e, "FOCUS", !0)};
+          }
+          ~ .--INPUT-fieldset {
+            ${z(e, "FOCUS")};
+            ${Ae(!0)};
+          }
+        }
+
+        // ERROR
+        &.--INPUT-error {
+          ${B(e, "ERROR")};
+          ~ .--INPUT-label {
+            ${V(e, "ERROR")};
+          }
+          ~ .--INPUT-fieldset {
+            ${z(e, "ERROR")};
+          }
+        }
+
+        // ERROR + VALUE
+        &.--INPUT-error:not(:placeholder-shown) {
+          ${B(e, "ERROR_VALUE")};
+          ~ .--INPUT-label {
+            ${V(e, "ERROR_VALUE")};
+          }
+          ~ .--INPUT-fieldset {
+            ${z(e, "ERROR_VALUE")};
+          }
+        }
+
+        // ERROR + HOVER
+        &.--INPUT-error:hover {
+          ${B(e, "ERROR_HOVER")};
+          ~ .--INPUT-label {
+            ${V(e, "ERROR_HOVER")};
+          }
+          ~ .--INPUT-fieldset {
+            ${z(e, "ERROR_HOVER")};
+          }
+        }
+
+        // ERROR + ACTIVE
+        &.--INPUT-error:active,
+        &.--INPUT-error.--INPUT-active {
+          ${B(e, "ERROR_ACTIVE")};
+          ~ .--INPUT-label {
+            ${V(e, "ERROR_ACTIVE")};
+          }
+          ~ .--INPUT-fieldset {
+            ${z(e, "ERROR_ACTIVE")};
+          }
+        }
+
+        // ERROR + FOCUS
+        &.--INPUT-error:focus-visible {
+          ${B(e, "ERROR_FOCUS")};
+          ~ .--INPUT-label {
+            ${V(e, "ERROR_FOCUS")};
+          }
+          ~ .--INPUT-fieldset {
+            ${z(e, "ERROR_FOCUS")};
+          }
+        }
+
+        // DISABLED
+        &:disabled {
+          user-select: none;
+          pointer-events: none;
+          ${B(e, "DISABLED")};
+          ~ .--INPUT-label {
+            ${V(e, "DISABLED")};
+          }
+          ~ .--INPUT-fieldset {
+            ${z(e, "DISABLED")};
+          }
+        }
+
+        // DISABLED + VALUE
+        &:disabled:not(:placeholder-shown) {
+          user-select: none;
+          pointer-events: none;
+          ${B(e, "DISABLED_VALUE")};
+          ~ .--INPUT-label {
+            ${V(e, "DISABLED_VALUE")};
+          }
+          ~ .--INPUT-fieldset {
+            ${z(e, "DISABLED_VALUE")};
+          }
+        }
+      }
+
+      .--INPUT-label {
+        // FONT
+        font-family: ${e["--FONTFAMILY-PRIMARY"]};
+        font-size: 0.875rem; // 14px
+        font-weight: 500;
+        letter-spacing: 0.01em;
+        line-height: normal;
+
+        padding: 0;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        position: absolute;
+        pointer-events: none;
+        z-index: 4;
+
+        // ANIMATION
+        transform: translate(14px, 0px);
+        transition: 150ms ease-in-out;
+      }
+
+      .--INPUT-fieldset {
+        // Safari Firefox Chrome/Edge
+        height: 100%;
+        width: -webkit-fill-available;
+        width: -moz-available;
+        width: stretch;
+
+        text-align: left;
+        position: absolute;
+        margin: 0;
+        padding: 0 6px;
+        pointer-events: none;
+        overflow: hidden;
+        z-index: 5;
+        box-sizing: border-box;
+        ${i(e, "border-radius", "--INPUT-ROOT-BORDER-RADIUS")};
+        -webkit-tap-highlight-color: transparent;
+
+        .--INPUT-legend {
+          width: auto;
+          overflow: hidden;
+          display: block;
+          padding: 0;
+          height: 0px;
+          visibility: hidden;
+
+          // Animation
+          max-width: 0px;
+          transition: max-width 150ms ease-in-out;
+
+          .--INPUT-text {
+            // FONT
+            font-family: ${e["--FONTFAMILY-PRIMARY"]};
+            font-size: 0.75rem; // 12px
+            letter-spacing: 0.01em;
+            font-weight: 500;
+            padding: 0px 7px;
+          }
+        }
+      }
+
+      .--INPUT-adornment {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 48px;
+        min-width: 48px;
+      }
+    }
+
+    .--INPUT-helperText {
+      // FONT
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 0.75rem; // 12px
+      line-height: 1;
+
+      display: block;
+      margin-top: 8px;
+      margin-left: 14px;
+      height: 16px;
+    }
+  }
+`, U = "--INPUT", Me = ({ children: e }) => /* @__PURE__ */ t("div", {
+	className: `${U}-adornment`,
+	children: e
+}), Ne = ({ name: e, label: r, control: i, width: a, disabled: o, type: s = "text", regex: c, hasPadding: l = !1, format: u, startAdornment: d, endAdornment: ee, helperText: f, showErrorText: p = !0, style: te, className: ne, ...m }) => {
+	let { field: h, fieldState: g } = ue({
+		control: i,
+		name: e
+	}), [re, _] = w(h.value || ""), v = g.error, y = (e) => {
+		e.preventDefault();
+		let { value: t } = e.target;
+		if (c && c.test(t) || !c) {
+			let e = u && t ? u(t) : t;
+			h.onChange(e), _(e), v && ie();
+		}
+	}, ie = () => h.onBlur();
+	return /* @__PURE__ */ n("div", {
+		className: [
+			U,
+			l ? `${U}-paddingBottom` : "",
+			ne || ""
+		].join(" "),
+		css: je(te),
+		"data-testid": U,
+		children: [/* @__PURE__ */ n("div", {
+			className: `${U}-container`,
+			children: [
+				d && /* @__PURE__ */ t(Me, { children: d }),
+				/* @__PURE__ */ t("input", {
+					className: [
+						`${U}-inputField`,
+						v && `${U}-error`,
+						d && `${U}-open`,
+						d && `${U}-left`,
+						ee && `${U}-right`
+					].join(" "),
+					placeholder: " ",
+					value: re,
+					disabled: o,
+					"data-testid": `${U}-inputField`,
+					onChange: (e) => y(e),
+					onBlur: h.onBlur,
+					name: e,
+					type: s,
+					...m
+				}),
+				ee && /* @__PURE__ */ t(Me, { children: ee }),
+				/* @__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
+						})
+					})
+				}),
+				/* @__PURE__ */ t("span", {
+					className: `${U}-label`,
+					children: r
+				})
+			]
+		}), /* @__PURE__ */ n("span", {
+			className: `${U}-helperText`,
+			"data-testid": `${U}-helperText`,
+			children: [f && (!v || !p) && f, p && v && v.message]
+		})]
+	});
+}, Pe = ({ theme: n, ...r }) => {
+	let { componentStyles: i } = e([a.INPUT], n);
+	return /* @__PURE__ */ t(Ne, {
+		...r,
+		style: i
+	});
+}, Fe = (e, t) => `
+  // BACKGROUNDS  
+  ${i(e, "background-color", `--RADIO-EVENTS-${t}-BACKGROUND-COLOR`)}
+`, Ie = (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`)}
+`, Le = (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`)}
+`, Re = (e, t) => `  
+  // SHADOW
+  ${i(e, "background-color", `--RADIO-EVENTS-${t}-SHADOW-COLOR`)}
+`, ze = (e, t) => `
+  // UTILS
+  > svg > circle {
+    ${i(e, "fill", `--RADIO-EVENTS-${t}-ICON-COLOR`)};
+  }
+`, W = (e, t) => `
+  // TYPOGRAPHY
+  .--RADIO-label {
+    ${i(e, "color", `--RADIO-EVENTS-${t}-COLOR-PRIMARY`)}
+  }
+`, Be = (e) => T`
+  &.--RADIO {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+
+    .--RADIO-container {
+      display: flex;
+      flex-direction: row;
+      gap: 12px;
+      align-items: center;
+      cursor: pointer;
+
+      // ENABLED
+      ${W(e, "ENABLED")};
+
+      // VALUE
+      &:has(.--RADIO-inputField:checked) {
+        ${W(e, "VALUE")};
+      }
+
+      // HOVER
+      &:hover {
+        ${W(e, "HOVER")};
+
+        .--RADIO-radio .--RADIO-span {
+          &:before {
+            opacity: 1;
+            ${Re(e, "HOVER")};
+          }
+        }
+      }
+
+      // ACTIVE
+      &:has(.--RADIO-inputField.--RADIO-active, .--RADIO-inputField:active) {
+        ${W(e, "ACTIVE")};
+      }
+
+      // FOCUS-VISIBLE
+      &:has(.--RADIO-inputField:focus-visible) {
+        ${W(e, "FOCUS")};
+      }
+
+      // ERROR
+      &:has(.--RADIO-inputField.--RADIO-error) {
+        ${W(e, "ERROR")};
+      }
+
+      // ERROR + VALUE
+      &:has(.--RADIO-inputField.--RADIO-error:checked) {
+        ${W(e, "ERROR_VALUE")};
+      }
+
+      // ERROR + HOVER
+      &:hover:has(.--RADIO-inputField.--RADIO-error) {
+        ${W(e, "ERROR_HOVER")};
+
+        .--RADIO-radio .--RADIO-span {
+          &:before {
+            opacity: 1;
+            ${Re(e, "ERROR_HOVER")};
+          }
+        }
+      }
+
+      // ERROR + ACTIVE
+      &:has(.--RADIO-inputField.--RADIO-error:active),
+      &:has(.--RADIO-inputField.--RADIO-error.--RADIO-active) {
+        ${W(e, "ERROR_ACTIVE")};
+      }
+
+      // ERROR + FOCUS
+      &:has(.--RADIO-inputField.--RADIO-error:focus-visible) {
+        ${W(e, "ERROR_FOCUS")};
+      }
+
+      // DISABLED
+      &:has(.--RADIO-inputField:disabled) {
+        pointer-events: none;
+        ${W(e, "DISABLED")};
+      }
+
+      // DISABLED + VALUE
+      &:has(.--RADIO-inputField:disabled:checked) {
+        ${W(e, "DISABLED_VALUE")};
+      }
+
+      .--RADIO-radio {
+        position: relative;
+        display: inline-flex;
+        width: 24px;
+        height: 24px;
+        isolation: isolate;
+
+        .--RADIO-inputField {
+          cursor: pointer;
+          position: absolute;
+          opacity: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 2;
+          margin: 0;
+          -webkit-tap-highlight-color: transparent;
+
+          ~ .--RADIO-span > svg {
+            visibility: hidden;
+          }
+          &:checked ~ .--RADIO-span > svg {
+            visibility: visible;
+          }
+
+          // ENABLED
+          ~ .--RADIO-span {
+            ${Fe(e, "ENABLED")};
+            ${Ie(e, "ENABLED")};
+            ${ze(e, "ENABLED")};
+          }
+
+          // VALUE
+          &:checked ~ .--RADIO-span {
+            ${Fe(e, "VALUE")};
+            ${Ie(e, "VALUE")};
+            ${ze(e, "VALUE")};
+          }
+
+          // HOVER
+          // Is at the container level
+
+          // ACTIVE
+          &.--RADIO-active ~ .--RADIO-span,
+          &:active ~ .--RADIO-span {
+            &:before {
+              opacity: 1;
+              ${Re(e, "ACTIVE")};
+            }
+          }
+
+          // FOCUS
+          &:focus-visible ~ .--RADIO-span {
+            outline: none;
+            ${Le(e, "FOCUS")};
+            ${ze(e, "FOCUS")};
+          }
+
+          // ERROR
+          &.--RADIO-error ~ .--RADIO-span {
+            ${Fe(e, "ERROR")};
+            ${Ie(e, "ERROR")};
+            ${ze(e, "ERROR")};
+          }
+
+          // ERROR + VALUE
+          &.--RADIO-error:checked ~ .--RADIO-span {
+            ${Fe(e, "ERROR_VALUE")};
+            ${Ie(e, "ERROR_VALUE")};
+            ${ze(e, "ERROR_VALUE")};
+          }
+
+          // ERROR + VALUE
+          // Is at the container level
+
+          // ERROR + ACTIVE
+          &.--RADIO-error:active ~ .--RADIO-span,
+          &.--RADIO-error.--RADIO-active ~ .--RADIO-span {
+            &:before {
+              opacity: 1;
+              ${Re(e, "ERROR_ACTIVE")};
+            }
+          }
+
+          // ERROR + FOCUS
+          &.--RADIO-error:focus-visible ~ .--RADIO-span {
+            ${Le(e, "ERROR_FOCUS")};
+            ${ze(e, "ERROR_FOCUS")};
+          }
+
+          // DISABLED
+          &:disabled ~ .--RADIO-span {
+            ${Fe(e, "DISABLED")};
+            ${Ie(e, "DISABLED")};
+            ${ze(e, "DISABLED")};
+          }
+
+          // DISABLED + VALUE
+          &:disabled:checked ~ .--RADIO-span {
+            ${Fe(e, "DISABLED_VALUE")};
+            ${Ie(e, "DISABLED_VALUE")};
+            ${ze(e, "DISABLED_VALUE")};
+          }
+        }
+
+        .--RADIO-span {
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          position: absolute;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: background-color 150ms ease-in-out;
+
+          > svg {
+            width: 20px;
+            height: 20px;
+            z-index: 1;
+          }
+
+          &:before {
+            content: '';
+            position: absolute;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            opacity: 0;
+            transition: opacity 150ms ease-in-out;
+            z-index: -1;
+          }
+        }
+      }
+
+      .--RADIO-label {
+        // FONT
+        font-family: ${e["--FONTFAMILY-PRIMARY"]};
+        font-size: 0.875rem;
+        font-weight: 500;
+        line-height: 1;
+      }
+    }
+  }
+`, G = "--RADIO", Ve = x.forwardRef(({ label: e, icon: r = /* @__PURE__ */ t(E, {}), className: i, style: a = {}, disabled: o, checked: s, onSelect: c, error: l, onKeyDown: u, onKeyUp: d, onBlur: ee, value: f, name: p, ...te }, ne) => {
+	let [m, h] = w(!1);
+	return /* @__PURE__ */ t("div", {
+		className: [
+			G,
+			m ? `${G}-active` : "",
+			i || ""
+		].join(" "),
+		css: Be(a),
+		"data-testid": G,
+		children: /* @__PURE__ */ n("label", {
+			className: `${G}-container`,
+			children: [/* @__PURE__ */ n("div", {
+				className: `${G}-radio`,
+				children: [/* @__PURE__ */ t("input", {
+					className: [
+						`${G}-inputField`,
+						m ? `${G}-active` : "",
+						l ? `${G}-error` : ""
+					].join(" "),
+					type: "radio",
+					value: f,
+					name: p,
+					checked: s,
+					disabled: o,
+					onChange: () => c(),
+					onKeyDown: (e) => {
+						(e.key === "Enter" || e.key === "Space") && h(!0), u?.(e);
+					},
+					onKeyUp: (e) => {
+						(e.key === "Enter" || e.key === "Space") && (h(!1), c()), d?.(e);
+					},
+					onBlur: () => {
+						h(!1), ee?.({});
+					},
+					ref: ne,
+					"data-testid": `${G}-inputField`,
+					...te
+				}), /* @__PURE__ */ t("span", {
+					className: `${G}-span`,
+					"data-testid": `${G}-icon`,
+					children: r
+				})]
+			}), /* @__PURE__ */ t("span", {
+				className: `${G}-label`,
+				"data-testid": `${G}-label`,
+				children: e
+			})]
+		})
+	});
+});
+Ve.displayName = "RadioBase";
+var He = (e) => {
+	let n = se(o);
+	if (!n) throw Error("Radio must be used inside a RadioGroup.");
+	let { value: r, ...i } = e, a = n.selectedValue === r;
+	return /* @__PURE__ */ t(Ve, {
+		...i,
+		name: n.name,
+		value: r,
+		checked: a,
+		onSelect: () => n.onChange(r),
+		disabled: i.disabled ?? n.disabled
+	});
+}, Ue = ({ theme: n, ...r }) => {
+	let { componentStyles: i } = e([a.RADIO], n);
+	return /* @__PURE__ */ t(He, {
+		...r,
+		style: i
+	});
+}, K = (e, t) => `
+    // BORDERS
+    ${i(e, "border-color", `--SELECT-EVENTS-${t}-BORDER-COLOR`)}
+    ${i(e, "border-width", `--SELECT-EVENTS-${t}-BORDER-WIDTH`)}
+    ${i(e, "border-style", `--SELECT-EVENTS-${t}-BORDER-STYLE`)}
+`, q = (e, t) => `
+    // TYPOGRAPHY
+    ${i(e, "color", `--SELECT-EVENTS-${t}-COLOR-PRIMARY`)}
+    ${i(e, "caret-color", `--SELECT-EVENTS-${t}-FONT-PRIMARY`)}
+`, J = (e, t, n = !1) => `
+    ${i(e, "color", `--SELECT-EVENTS-${t}-COLOR-SECONDARY`)}
+    ${n ? "transform: translate(14px, -24px); font-size: 0.75rem;" : ""}
+`, We = (e) => `
+    .--SELECT-legend {
+        max-width: ${e ? "100%" : "0px"};
+    }
+`, Y = (e, t) => `
+  ${i(e, "background-color", `--SELECT-EVENTS-${t}-BACKGROUND-COLOR`)}
+  ~ .--SELECT-helperText {
+    ${i(e, "color", `--SELECT-EVENTS-${t}-COLOR-TERTIARY`)}
+  }
+`, Ge = (e) => T`
+  &.--SELECT {
+    position: relative;
+    padding: 0;
+    border: 0;
+    width: 100%;
+
+    &.--SELECT-paddingBottom {
+      padding-bottom: 24px;
+    }
+
+    .--SELECT-container {
+      box-sizing: border-box;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+
+      // Safari Firefox Chrome/Edge
+      width: -webkit-fill-available;
+      width: -moz-available;
+      width: stretch;
+
+      ${i(e, "border-radius", "--SELECT-ROOT-BORDER-RADIUS")};
+
+      // ENABLED
+      ${Y(e, "ENABLED")};
+
+      // VALUE
+      &:has(.--SELECT-selectField:not(:placeholder-shown)) {
+        ${Y(e, "VALUE")};
+      }
+
+      // HOVER
+      &:has(.--SELECT-selectField:hover) {
+        ${Y(e, "HOVER")};
+      }
+
+      // ACTIVE
+      &:has(.--SELECT-selectField:active, .--SELECT-selectField.--SELECT-active) {
+        ${Y(e, "ACTIVE")};
+      }
+
+      // FOCUS
+      &:has(.--SELECT-selectField:focus-visible) {
+        outline: none;
+        ${Y(e, "FOCUS")};
+      }
+
+      // ERROR
+      &:has(.--SELECT-selectField.--SELECT-error) {
+        ${Y(e, "ERROR")};
+      }
+
+      // ERROR + VALUE
+      &:has(.--SELECT-selectField.--SELECT-error:not(:placeholder-shown)) {
+        ${Y(e, "ERROR_VALUE")};
+      }
+
+      // ERROR + HOVER
+      &:has(.--SELECT-selectField.--SELECT-error:hover) {
+        ${Y(e, "ERROR_HOVER")};
+      }
+
+      // ERROR + ACTIVE
+      &:has(.--SELECT-selectField.--SELECT-error:active, .--SELECT-selectField.--SELECT-error.--SELECT-active) {
+        ${Y(e, "ERROR_ACTIVE")};
+      }
+
+      // ERROR + FOCUS
+      &:has(.--SELECT-selectField.--SELECT-error:focus-visible) {
+        ${Y(e, "ERROR_FOCUS")};
+      }
+
+      // DISABLED
+      &:has(.--SELECT-selectField:disabled) {
+        pointer-events: none;
+        ${Y(e, "DISABLED")};
+      }
+
+      // DISABLED + VALUE
+      &:has(.--SELECT-selectField:disabled:not(:placeholder-shown)) {
+        pointer-events: none;
+        ${Y(e, "DISABLED-VALUE")};
+      }
+
+      .--SELECT-selectField {
+        // FONT
+        font-family: ${e["--FONTFAMILY-PRIMARY"]};
+        font-size: 0.875rem; // 14px
+        font-weight: 500;
+        letter-spacing: 0.01em;
+        line-height: 1;
+
+        // Safari Firefox Chrome/Edge
+        height: -webkit-fill-available;
+        height: -moz-available;
+        height: stretch;
+        width: -webkit-fill-available;
+        width: -moz-available;
+        width: stretch;
+
+        min-width: 0;
+        border: 0;
+        margin: 0;
+        padding: 15px 14px;
+        background-color: transparent;
+        cursor: text;
+        display: block;
+        box-sizing: border-box;
+
+        &:read-only {
+          cursor: pointer;
+        }
+
+        // ENABLED
+        ${q(e, "ENABLED")};
+        ~ .--SELECT-label {
+          ${J(e, "ENABLED")}
+        }
+        ~ .--SELECT-fieldset {
+          ${K(e, "ENABLED")}
+        }
+
+        // VALUE
+        &:not(:placeholder-shown),
+        &:not([placeholder=' ']),
+        &.--SELECT-open {
+          ${q(e, "VALUE")};
+          ~ .--SELECT-label {
+            ${J(e, "VALUE", !0)}
+          }
+          ~ .--SELECT-fieldset {
+            ${K(e, "VALUE")};
+            ${We(!0)};
+          }
+        }
+
+        // HOVER
+        &:hover {
+          ${q(e, "HOVER")};
+          ~ .--SELECT-label {
+            ${J(e, "HOVER")}
+          }
+          ~ .--SELECT-fieldset {
+            ${K(e, "HOVER")}
+          }
+        }
+
+        // ACTIVE
+        &:active,
+        &.--SELECT-active {
+          ${q(e, "ACTIVE")};
+          ~ .--SELECT-label {
+            ${J(e, "ACTIVE")};
+          }
+          ~ .--SELECT-fieldset {
+            ${K(e, "ACTIVE")};
+          }
+        }
+
+        // FOCUS
+        &:focus-visible {
+          outline: none;
+          ${q(e, "FOCUS")};
+          ~ .--SELECT-label {
+            ${J(e, "FOCUS", !0)}
+          }
+          ~ .--SELECT-fieldset {
+            ${K(e, "FOCUS")};
+            ${We(!0)};
+          }
+        }
+
+        // ERROR
+        &.--SELECT-error {
+          ${q(e, "ERROR")};
+          ~ .--SELECT-label {
+            ${J(e, "ERROR")}
+          }
+          ~ .--SELECT-fieldset {
+            ${K(e, "ERROR")}
+          }
+        }
+
+        // ERROR + VALUE
+        &.--SELECT-error:not(:placeholder-shown),
+        &.--SELECT-error.--SELECT-open {
+          ${q(e, "ERROR_VALUE")};
+          ~ .--SELECT-label {
+            ${J(e, "ERROR_VALUE")};
+          }
+          ~ .--SELECT-fieldset {
+            ${K(e, "ERROR_VALUE")};
+          }
+        }
+
+        // ERROR + HOVER
+        &.--SELECT-error:hover {
+          ${q(e, "ERROR_HOVER")};
+          ~ .--SELECT-label {
+            ${J(e, "ERROR_HOVER")}
+          }
+          ~ .--SELECT-fieldset {
+            ${K(e, "ERROR_HOVER")}
+          }
+        }
+
+        // ERROR + ACTIVE
+        &.--SELECT-error:active,
+        &.--SELECT-error.--SELECT-active {
+          ${q(e, "ERROR_ACTIVE")};
+          ~ .--SELECT-label {
+            ${J(e, "ERROR_ACTIVE")}
+          }
+          ~ .--SELECT-fieldset {
+            ${K(e, "ERROR_ACTIVE")}
+          }
+        }
+
+        // ERROR + FOCUS
+        &.--SELECT-error:focus-visible {
+          ${q(e, "ERROR_FOCUS")};
+          ~ .--SELECT-label {
+            ${J(e, "ERROR_FOCUS")}
+          }
+          ~ .--SELECT-fieldset {
+            ${K(e, "ERROR_FOCUS")}
+          }
+        }
+
+        // DISABLED
+        &:disabled {
+          user-select: none;
+          pointer-events: none;
+          ${q(e, "DISABLED")};
+          ~ .--SELECT-label {
+            ${J(e, "DISABLED")}
+          }
+          ~ .--SELECT-fieldset {
+            ${K(e, "DISABLED")}
+          }
+        }
+
+        // DISABLED + VALUE
+        &:disabled:not(:placeholder-shown),
+        &:disabled.--SELECT-open {
+          user-select: none;
+          pointer-events: none;
+          ${q(e, "DISABLED_VALUE")};
+          ~ .--SELECT-label {
+            ${J(e, "DISABLED_VALUE")}
+          }
+          ~ .--SELECT-fieldset {
+            ${K(e, "DISABLED_VALUE")}
+          }
+        }
+      }
+
+      .--SELECT-label {
+        // FONT
+        font-family: ${e["--FONTFAMILY-PRIMARY"]};
+        font-size: 0.875rem; // 14px
+        font-weight: 500;
+        letter-spacing: 0.01em;
+        line-height: normal;
+
+        padding: 0;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        position: absolute;
+        pointer-events: none;
+        z-index: 4;
+
+        // ANIMATION
+        transform: translate(14px, 0px);
+        transition: 150ms ease-in-out;
+      }
+
+      .--SELECT-fieldset {
+        // Safari Firefox Chrome/Edge
+        height: 100%;
+        width: -webkit-fill-available;
+        width: -moz-available;
+        width: stretch;
+
+        text-align: left;
+        position: absolute;
+        margin: 0;
+        padding: 0 6px;
+        pointer-events: none;
+        overflow: hidden;
+        z-index: 5;
+        box-sizing: border-box;
+        ${i(e, "border-radius", "--SELECT-ROOT-BORDER-RADIUS")};
+        -webkit-tap-highlight-color: transparent;
+
+        .--SELECT-legend {
+          width: auto;
+          overflow: hidden;
+          display: block;
+          padding: 0;
+          height: 0px;
+          visibility: hidden;
+
+          // Animation
+          max-width: 0px;
+          transition: max-width 150ms ease-in-out;
+
+          .--SELECT-text {
+            // FONT
+            font-family: ${e["--FONTFAMILY-PRIMARY"]};
+            font-size: 0.75rem; // 12px
+            letter-spacing: 0.01em;
+            font-weight: 500;
+            padding: 0px 7px;
+          }
+        }
+      }
+
+      .--SELECT-adornment {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 48px;
+        min-width: 48px;
+      }
+    }
+
+    .--SELECT-helperText {
+      // FONT
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 0.75rem; // 12px
+      line-height: 1;
+
+      display: block;
+      margin-top: 8px;
+      margin-left: 14px;
+      height: 16px;
+    }
+  }
+`, Ke = (e, t) => `
+    // BACKGROUNDS
+    ${i(e, "background-color", `--SELECTMENU-EVENTS-${t}-BACKGROUND-COLOR`)}
+    
+    // BORDERS
+    ${i(e, "border-color", `--SELECTMENU-EVENTS-${t}-BORDER-COLOR`)}
+    ${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`)}
+`, qe = (e, t) => `
+    // TYPOGRAPHY
+    ${i(e, "color", `--SELECTMENU-EVENTS-${t}-COLOR-PRIMARY`)};
+    ${i(e, "caret-color", `--SELECTMENU-EVENTS-${t}-COLOR-PRIMARY`)};
+`, Je = (e, t) => `
+    // BACKGROUNDS
+    ${i(e, "background-color", `--SELECTMENU-${t}-BACKGROUND-COLOR`)}
+        
+    // BORDERS
+    ${i(e, "border-color", `--SELECTMENU-${t}-BORDER-COLOR`)}
+    ${i(e, "border-width", `--SELECTMENU-${t}-BORDER-WIDTH`)}
+    ${i(e, "border-style", `--SELECTMENU-${t}-BORDER-STYLE`)}
+    ${i(e, "border-radius", `--SELECTMENU-${t}-BORDER-RADIUS`)}
+`, Ye = (e) => T`
+  &.--SELECTMENU {
+    z-index: 100;
+    position: absolute;
+    top: calc(48px + ${e["--SELECTMENU-ROOT-TOP"] || ""});
+    left: 0px;
+    width: 100%;
+    box-shadow:
+      rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,
+      rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
+      rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
+    box-sizing: border-box;
+    max-height: 126px; // 3 rows * 42px
+    overflow-y: auto;
+    cursor: pointer;
+    ${Je(e, "ROOT")}
+
+    // Animation
+    display: none;
+    opacity: 0;
+    translate: 0px -10px;
+    transition-property: display opacity;
+    transition-duration: 150ms;
+    transition-behavior: allow-discrete;
+
+    &.--SELECTMENU-open {
+      display: block;
+      opacity: 1;
+      translate: 0px 0px;
+
+      @starting-style {
+        opacity: 0;
+        translate: 0px -10px;
+      }
+    }
+
+    // ROW STYLES
+    .--SELECTMENU-row:last-child,
+    .--SELECTMENU-row:has(+ .--SELECTMENU-row:hover),
+    .--SELECTMENU-row:has(+ .--SELECTMENU-selected) {
+      // border-bottom: none;
+    }
+
+    .--SELECTMENU-row {
+      padding: 0px 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      justify-content: center;
+      border-top: none;
+      border-left: none;
+      border-right: none;
+      height: 42px;
+      box-sizing: border-box;
+
+      .--SELECTMENU-rowTitle {
+        font-family: ${e["--FONTFAMILY-PRIMARY"]};
+        ${i(e, "color", "--SELECTMENU-ENABLED-FONT-PRIMARY")}
+        font-size: 0.875rem; // 14px
+        line-height: 1.5;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      .--SELECTMENU-rowDescription {
+        font-family: ${e["--FONTFAMILY-PRIMARY"]};
+        ${i(e, "color", "--SELECTMENU-ENABLED-FONT-SECONDARY")}
+        font-size: 0.75rem; // 12px
+        line-height: 1;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      // ENABLED
+      ${Ke(e, "ENABLED")}
+      ${qe(e, "ENABLED")}
+
+      // VALUE
+      &.--SELECTMENU-selected {
+        ${Ke(e, "VALUE")}
+        ${qe(e, "VALUE")}
+      }
+
+      // HOVER
+      &:hover {
+        ${Ke(e, "HOVER")}
+        ${qe(e, "HOVER")}
+      }
+
+      // - ACTIVE
+      &:active,
+      &.--SELECTMENU-active {
+        ${Ke(e, "ACTIVE")}
+        ${qe(e, "ACTIVE")}
+      }
+
+      // FOCUS
+      &:focus-visible {
+        outline-offset: 0px;
+        outline: 0;
+        ${Ke(e, "FOCUS")}
+        ${qe(e, "FOCUS")}
+      }
+
+      &.--SELECTMENU-descriptionMenu {
+        height: 52px;
+      }
+    }
+
+    &::-webkit-scrollbar {
+      width: 12px;
+      height: 4px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 9999px;
+      border: 3px solid transparent;
+      background-clip: padding-box;
+    }
+
+    &.--SELECTMENU-staticMenu {
+      position: static;
+      margin-top: 8px;
+    }
+
+    &.--SELECTMENU-descriptionMenu {
+      max-height: 156px; // 3 rows * 52px
+    }
+  }
+`, X = "--SELECTMENU", Xe = x.forwardRef(({ displayOptions: e, value: r, isOpen: i, hasStaticOptions: a, hasDescription: o, onChange: s, focusedElement: c, onScroll: l, style: u, className: d }, ee) => (ce(() => {
+	document.getElementById(`${X}-option-${c}`)?.scrollIntoView({ block: "nearest" });
+}, [c]), /* @__PURE__ */ t("div", {
+	id: `${X}-root`,
+	className: [
+		X,
+		a ? `${X}-staticMenu` : "",
+		o ? `${X}-descriptionMenu` : "",
+		i && `${X}-open`,
+		d || ""
+	].join(" "),
+	css: Ye(u),
+	onScroll: l,
+	role: "listbox",
+	ref: ee,
+	"data-testid": X,
+	children: e.map((e, a) => {
+		let l = e.value === r && i ? `${X}-selected` : "", u = c === a;
+		return /* @__PURE__ */ n("div", {
+			id: `${X}-option-${a}`,
+			className: [
+				`${X}-row`,
+				l,
+				`${X}-row`,
+				o ? `${X}-descriptionMenu` : "",
+				u ? `${X}-active` : ""
+			].join(" "),
+			onClick: () => s(e),
+			role: "option",
+			tabIndex: -1,
+			"data-testid": `${X}-row-${e.label}`,
+			children: [/* @__PURE__ */ t("span", {
+				className: `${X}-rowTitle`,
+				children: e.label
+			}), o && /* @__PURE__ */ t("span", {
+				className: `${X}-rowDescription`,
+				children: e.description
+			})]
+		}, e.value);
+	})
+}))), Ze = x.forwardRef(({ theme: n, ...r }, i) => {
+	let { componentStyles: o } = e([a.SELECTMENU, a.SELECT], n);
+	return /* @__PURE__ */ t(Xe, {
+		...r,
+		style: o,
+		ref: i
+	});
+});
+Ze.displayName = "SelectMenu";
+//#endregion
+//#region src/components/atoms/Select/Select.tsx
+var Z = "--SELECT", Qe = [], $e = ({ name: e, label: r, control: i, options: a, disabled: o, range: s = 100, hasStaticOptions: c = !1, hasSearch: l = !1, hasDescription: u = !1, hasPadding: d = !1, showErrorText: ee = !0, helperText: f, style: p, className: te, ...ne }) => {
+	let { field: m, fieldState: h } = ue({
+		control: i,
+		name: e
+	}), [g, re] = ae(m.value || ""), [_, v] = ae(!1), [y, ie] = ae(!1), x = C(null), oe = C(null), se = C(null), le = C(null), S = a.find((e) => e.value === g), T = h.error, de = u ? 156 : 126, [pe, me] = ae(S?.label || ""), [E, D] = w(1), [O, k] = w(!1), [A, he] = w(-1), [j, M] = ae("none"), N = _ || !!(l && pe && !g);
+	b({
+		ref: x,
+		onAction: () => {
+			l && pe && !g && me(""), v(!1);
+		},
+		isActive: N,
+		exceptRef: oe
+	});
+	let P = (e) => {
+		m.onChange(e.value), re(e.value), v(!1), ge();
+	}, ge = () => m.onBlur(), _e = (e) => {
+		e.target.select();
+	}, ve = (e) => {
+		e === "ArrowDown" && N ? he(A + 1 >= Qe.length ? 0 : A + 1) : e === "ArrowUp" && N && he(A - 1 < 0 ? Qe.length - 1 : A - 1);
+	}, ye = (e) => {
+		if (e.stopPropagation(), e.key === "Enter") if (e.preventDefault(), N && A >= 0) {
+			M("keyboard");
+			let e = Se()[A];
+			e && P(e);
+		} else v(!N);
+		else e.key === "Tab" || e.key === "Escape" ? v(!1) : ["ArrowDown", "ArrowUp"].includes(e.key) && N && (e.preventDefault(), ve(e.key));
+	}, be = (e) => {
+		if (e.stopPropagation(), e.key === "Enter") if (e.preventDefault(), N && A >= 0) {
+			M("button");
+			let e = Se()[A];
+			e && P(e);
+		} else v(!N);
+		else e.key === "Tab" || e.key === "Escape" ? v(!1) : ["ArrowDown", "ArrowUp"].includes(e.key) && (e.preventDefault(), se.current?.focus(), ve(e.key));
+	}, F = (e) => {
+		e.stopPropagation(), o || v(!N);
+	}, xe = (e) => {
+		e.preventDefault();
+		let { scrollHeight: t, scrollTop: n } = e.target;
+		n + de >= t && Se().length >= E * s && D(E + 1);
+	}, I = (e) => {
+		e.preventDefault();
+		let { value: t } = e.target;
+		t.length > 2 && D(1), me(t, () => k(!0)), v(!0);
+	}, Se = () => {
+		if (l && pe && pe.length > 2) {
+			let e = a.slice(0, s * E);
+			if (pe === S?.label && !O) return Qe = e, e;
+			let t = a.filter((e) => e.label.toLocaleUpperCase().includes(pe.toLocaleUpperCase())).slice(0, s * E);
+			return Qe = O ? t || [] : e, t || [];
+		}
+		return Qe = a.slice(0, s * E), a.slice(0, s * E);
+	};
+	return ce(() => {
+		_ || (me(S?.label || ""), k(!1), he(-1), M("none"), y && ge()), _ && (j === "button" ? le.current?.focus() : j === "keyboard" && se.current?.focus(), ie(!0));
+	}, [_]), /* @__PURE__ */ n("div", {
+		className: [
+			Z,
+			d ? `${Z}-paddingBottom` : "",
+			te || ""
+		].join(" "),
+		css: Ge(p),
+		"data-testid": Z,
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: `${Z}-container`,
+				onClick: F,
+				onKeyDown: (e) => !o && ye(e),
+				role: "button",
+				ref: oe,
+				"data-testid": `${Z}-container`,
+				children: [
+					/* @__PURE__ */ t("input", {
+						name: e,
+						className: [
+							`${Z}-selectField`,
+							N && `${Z}-open`,
+							T && `${Z}-error`
+						].join(" "),
+						onClick: (e) => l && _e(e),
+						onChange: I,
+						value: pe,
+						placeholder: " ",
+						disabled: o,
+						readOnly: !l,
+						ref: se,
+						role: "combobox",
+						autoComplete: "off",
+						"data-testid": `${Z}-selectField`,
+						...l && { placeholder: "Search..." },
+						...ne
+					}),
+					/* @__PURE__ */ t("div", {
+						className: `${Z}-adornment`,
+						children: /* @__PURE__ */ t(Ce, {
+							icon: /* @__PURE__ */ t(fe, {}),
+							onClick: F,
+							onKeyDown: (e) => !o && be(e),
+							disabled: o,
+							isFlipped: !N,
+							tabIndex: -1
+						})
+					}),
+					/* @__PURE__ */ t("fieldset", {
+						"aria-hidden": "true",
+						className: `${Z}-fieldset`,
+						children: /* @__PURE__ */ t("legend", {
+							className: `${Z}-legend`,
+							children: /* @__PURE__ */ t("span", {
+								className: `${Z}-text`,
+								children: r
+							})
+						})
+					}),
+					/* @__PURE__ */ t("span", {
+						className: `${Z}-label`,
+						children: r
+					})
+				]
+			}),
+			/* @__PURE__ */ n("span", {
+				className: `${Z}-helperText`,
+				"data-testid": `${Z}-helperText`,
+				children: [f && (!T || !ee) && f, ee && T && T.message]
+			}),
+			/* @__PURE__ */ t(Ze, {
+				displayOptions: N ? Se() : Qe,
+				value: g,
+				isOpen: N,
+				hasStaticOptions: c,
+				hasDescription: u,
+				onChange: P,
+				focusedElement: A,
+				onScroll: xe,
+				ref: x
+			})
+		]
+	});
+}, et = ({ theme: n, ...r }) => {
+	let { componentStyles: i } = e([a.SELECT], n);
+	return /* @__PURE__ */ t($e, {
+		...r,
+		style: i
+	});
+}, tt = (e, t) => `
+  ~ .--SLIDER-rail {
+    ${i(e, "background-color", `--SLIDER-EVENTS-${t}-BACKGROUND-COLOR`)}
+  }
+`, nt = (e, t) => `
+  ~ .--SLIDER-tracker {  
+    // BACKGROUNDS
+    ${i(e, "background-color", `--SLIDER-EVENTS-${t}-BACKGROUND-COLOR`)}
+  }
+`, rt = (e, t) => `
+  ~ .--SLIDER-thumbIcon {  
+    // UTILS
+    ${i(e, "background-color", `--SLIDER-EVENTS-${t}-ICON-BACKGROUND-COLOR`)}
+    
+    // BORDERS
+    ${i(e, "border-color", `--SLIDER-EVENTS-${t}-BORDER-COLOR`)}
+    ${i(e, "border-width", `--SLIDER-EVENTS-${t}-BORDER-WIDTH`)}
+    ${i(e, "border-style", `--SLIDER-EVENTS-${t}-BORDER-STYLE`)}
+    ${i(e, "border-radius", `--SLIDER-EVENTS-${t}-BORDER-RADIUS`)}
+
+    
+    > svg {
+      ${i(e, "fill", `--SLIDER-EVENTS-${t}-ICON-COLOR`)};
+     }
+  }
+`, it = (e) => T`
+  &.--SLIDER {
+    justify-content: center;
+    display: flex;
+    border-radius: 12px;
+    box-sizing: content-box;
+    position: relative;
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+    height: 4px;
+    width: 100%;
+    padding: 8px 0px;
+
+    .--SLIDER-inputField {
+      appearance: none;
+      width: 100%;
+      height: 0px;
+      outline: none;
+      position: absolute;
+      pointer-events: none;
+      cursor: default;
+      z-index: 3;
+      margin: 0px;
+
+      // ENABLED
+      ${tt(e, "ENABLED")};
+      ${rt(e, "ENABLED")};
+
+      // VALUE
+      ${nt(e, "VALUE")};
+
+      // HOVER
+      @media (hover: hover) {
+        :hover + .--SLIDER-ripple {
+          opacity: 1;
+          ${i(e, "background-color", "--SLIDER-EVENTS-HOVER-BACKGROUND-COLOR")};
+        }
+      }
+
+      // ACTIVE
+      :active + .--SLIDER-ripple {
+        opacity: 1;
+        ${i(e, "background-color", "--SLIDER-EVENTS-ACTIVE-BACKGROUND-COLOR")};
+      }
+
+      // FOCUS
+      &:focus-visible + .--SLIDER-ripple + .--SLIDER-thumbIcon {
+        ${i(e, "outline-color", "--SLIDER-EVENTS-FOCUS-OUTLINE-COLOR")}
+        ${i(e, "outline-width", "--SLIDER-EVENTS-FOCUS-OUTLINE-WIDTH")}
+        ${i(e, "outline-style", "--SLIDER-EVENTS-FOCUS-OUTLINE-STYLE")}
+        ${i(e, "outline-offset", "--SLIDER-EVENTS-FOCUS-OUTLINE-OFFSET")}
+      }
+
+      // DISABLED
+      &:disabled {
+        &::-webkit-slider-thumb {
+          pointer-events: none;
+        }
+
+        ${tt(e, "DISABLED")};
+        ${nt(e, "DISABLED_VALUE")};
+        ${rt(e, "DISABLED")};
+
+        ~ .--SLIDER-mark {
+          ${i(e, "background-color", "--SLIDER-EVENTS-DISABLED_VALUE-BACKGROUND-COLOR")}
+        }
+
+        ~ .--SLIDER-mark.--SLIDER-mark--active {
+          ${i(e, "background-color", "--SLIDER-EVENTS-DISABLED-BACKGROUND-COLOR")}
+        }
+      }
+
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        cursor: pointer;
+        border-radius: 50%;
+        width: 24px;
+        height: 24px;
+        pointer-events: auto;
+      }
+    }
+
+    .--SLIDER-rail {
+      display: block;
+      position: absolute;
+      border-radius: inherit;
+      width: 100%;
+      height: inherit;
+      top: 50%;
+      -webkit-transform: translateY(-50%);
+      -moz-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+
+    .--SLIDER-tracker {
+      border: none;
+      display: block;
+      position: absolute;
+      border-radius: inherit;
+      height: inherit;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 1;
+      cursor: pointer;
+    }
+
+    &.--SLIDER--clicking {
+      .--SLIDER-thumbIcon,
+      .--SLIDER-ripple {
+        transition:
+          left 150ms ease-in-out,
+          top 150ms ease-in-out,
+          background-color 150ms ease-in-out,
+          opacity 150ms ease-in-out;
+      }
+
+      .--SLIDER-tracker {
+        transition:
+          left 150ms ease-in-out,
+          right 150ms ease-in-out,
+          width 150ms ease-in-out,
+          top 150ms ease-in-out,
+          bottom 150ms ease-in-out,
+          height 150ms ease-in-out;
+      }
+    }
+
+    &.--SLIDER--vertical {
+      width: 4px;
+      height: 100%;
+      padding: 0px 8px;
+      flex-direction: column;
+
+      .--SLIDER-inputField {
+        width: 0px;
+        height: 100%;
+        writing-mode: vertical-lr;
+        direction: rtl;
+      }
+
+      .--SLIDER-rail {
+        width: inherit;
+        height: 100%;
+        left: 50%;
+        top: 0;
+        transform: translateX(-50%);
+      }
+
+      .--SLIDER-tracker {
+        width: inherit;
+        left: 50%;
+        height: auto;
+        top: auto;
+        transform: translateX(-50%);
+      }
+
+      .--SLIDER-ripple {
+        top: auto;
+        left: 50%;
+        transform: translateX(-50%);
+        margin-left: 0;
+        margin-top: -6px;
+      }
+
+      .--SLIDER-thumbIcon {
+        top: auto;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      .--SLIDER-mark {
+        top: auto;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    .--SLIDER-mark {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 2px;
+      height: 2px;
+      border-radius: 50%;
+      pointer-events: none;
+      z-index: 1;
+      ${i(e, "background-color", "--SLIDER-EVENTS-VALUE-BACKGROUND-COLOR")}
+
+      &.--SLIDER-mark--active {
+        ${i(e, "background-color", "--SLIDER-EVENTS-ENABLED-BACKGROUND-COLOR")}
+      }
+    }
+
+    .--SLIDER-ripple {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-left: -6px;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      pointer-events: none;
+      z-index: 2;
+      opacity: 0;
+      transition:
+        background-color 150ms ease-in-out,
+        opacity 150ms ease-in-out;
+    }
+
+    .--SLIDER-thumbIcon {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      z-index: 4;
+      border-radius: 50%;
+      box-sizing: border-box;
+
+      > svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+`, Q = "--SLIDER", at = ({ 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: ee = "horizontal", track: f = "normal", control: p, style: te }) => {
+	let { field: ne } = ue({
+		control: p,
+		name: a
+	}), m = ne.value ?? [e], h = m.length >= 2, g = C(null), re = C(void 0), _ = ee === "vertical", v = i !== Infinity && e !== i && o > 0 ? Array.from({ length: Math.round((i - e) / o) + 1 }, (t, n) => Math.min(e + n * o, i)) : [], y = v.length > 0, ie = (t) => y ? v.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] = w(() => y ? m.map(ie) : m), x = (e) => {
+		ne.onChange(e), ae(e);
+	}, oe = (e) => {
+		let t = ie(parseFloat(e.target.value)), n = h ? Math.min(t, b[1] - s) : t;
+		x(h ? [n, b[1]] : [n]);
+	}, se = (e) => {
+		let t = ie(parseFloat(e.target.value)), n = Math.max(t, b[0] + s);
+		x([b[0], n]);
+	}, ce = (t) => {
+		if (!y) return;
+		let n = b[0], r;
+		if (t.key === "ArrowRight" || t.key === "ArrowUp" ? r = v.find((e) => e > n) ?? n : t.key === "ArrowLeft" || t.key === "ArrowDown" ? r = [...v].reverse().find((e) => e < n) ?? n : t.key === "Home" ? r = e : t.key === "End" && (r = h ? Math.min(i, b[1] - s) : i), r !== void 0 && r !== n) {
+			t.preventDefault();
+			let e = h ? Math.min(r, b[1] - s) : r;
+			x(h ? [e, b[1]] : [e]);
+		}
+	}, le = (t) => {
+		if (!y) return;
+		let n = b[1], r;
+		if (t.key === "ArrowRight" || t.key === "ArrowUp" ? r = v.find((e) => e > n) ?? n : t.key === "ArrowLeft" || t.key === "ArrowDown" ? r = [...v].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]);
+		}
+	}, S = (t) => {
+		if (c || i === Infinity || i === e) return;
+		let n = g.current, r = n?.getBoundingClientRect();
+		if (!r || !n) return;
+		let a = ie(e + (_ ? 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 - 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(re.current), re.current = setTimeout(() => n.classList.remove(`${Q}--clicking`), 150);
+	}, T = (t) => i === e ? 0 : (t - e) / (i - e) * 100, de = (e) => {
+		let t = T(e);
+		return _ ? { top: `calc(${100 - t}% - ${(100 - t) / 100 * 24}px)` } : { left: `calc(${t}% - ${t / 100 * 24}px)` };
+	}, fe = (e) => {
+		let t = T(e);
+		return _ ? { top: `calc(${100 - t}% - ${(100 - t) / 100 * 24}px + 11px)` } : { left: `calc(${t}% - ${t / 100 * 24}px + 11px)` };
+	}, pe = () => {
+		let e = b[0], t = b[1] ?? e, n = T(e), r = T(t), i = (e) => 12 - e / 100 * 24;
+		return _ ? h ? f === "inverted" ? [{
+			top: "0%",
+			bottom: `calc(${r}% + ${i(r)}px)`
+		}, {
+			top: `calc(${100 - n}% - ${i(n)}px)`,
+			bottom: "0%"
+		}] : [{
+			top: `calc(${100 - r}% - ${i(r)}px)`,
+			bottom: `calc(${n}% + ${i(n)}px)`
+		}] : f === "inverted" ? [{
+			top: "0%",
+			bottom: `calc(${n}% + ${i(n)}px)`
+		}] : [{
+			top: `calc(${100 - n}% - ${i(n)}px)`,
+			bottom: "0%"
+		}] : h ? f === "inverted" ? [{
+			left: "0%",
+			right: `calc(${100 - n}% - ${i(n)}px)`
+		}, {
+			left: `calc(${r}% + ${i(r)}px)`,
+			right: "0%"
+		}] : [{
+			left: `calc(${n}% + ${i(n)}px)`,
+			right: `calc(${100 - r}% - ${i(r)}px)`
+		}] : f === "inverted" ? [{
+			left: `calc(${n}% + ${i(n)}px)`,
+			right: "0%"
+		}] : [{
+			left: "0%",
+			right: `calc(${100 - n}% - ${i(n)}px)`
+		}];
+	}, me = (e) => h ? f === "inverted" ? e <= b[0] || e >= b[1] : e >= b[0] && e <= b[1] : f === "inverted" ? e >= b[0] : e <= b[0], E = y ? "any" : o;
+	return /* @__PURE__ */ n("span", {
+		ref: g,
+		className: [Q, _ ? `${Q}--vertical` : ""].join(" "),
+		css: it(te),
+		"data-testid": Q,
+		children: [
+			/* @__PURE__ */ t("input", {
+				className: `${Q}-inputField`,
+				type: "range",
+				min: e,
+				max: i,
+				step: E,
+				value: b[0],
+				onChange: oe,
+				onKeyDown: ce,
+				disabled: c,
+				"data-testid": h ? `${Q}-minField` : `${Q}-field`
+			}),
+			/* @__PURE__ */ t("span", {
+				className: `${Q}-ripple`,
+				style: de(b[0]),
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ t("span", {
+				className: `${Q}-thumbIcon`,
+				style: de(b[0]),
+				"aria-hidden": "true",
+				children: l
+			}),
+			h && /* @__PURE__ */ n(r, { children: [
+				/* @__PURE__ */ t("input", {
+					className: `${Q}-inputField`,
+					type: "range",
+					min: e,
+					max: i,
+					step: E,
+					value: b[1],
+					onChange: se,
+					onKeyDown: le,
+					disabled: c,
+					"data-testid": `${Q}-maxField`
+				}),
+				/* @__PURE__ */ t("span", {
+					className: `${Q}-ripple`,
+					style: de(b[1]),
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ t("span", {
+					className: `${Q}-thumbIcon`,
+					style: de(b[1]),
+					"aria-hidden": "true",
+					children: u
+				})
+			] }),
+			/* @__PURE__ */ t("span", {
+				className: `${Q}-rail`,
+				onClick: S
+			}),
+			pe().map((e, n) => /* @__PURE__ */ t("span", {
+				className: `${Q}-tracker`,
+				onClick: S,
+				style: e
+			}, n)),
+			d && v.map((e) => /* @__PURE__ */ t("span", {
+				className: [`${Q}-mark`, me(e) && `${Q}-mark--active`].filter(Boolean).join(" "),
+				style: fe(e),
+				"aria-hidden": "true",
+				onClick: S
+			}, e))
+		]
+	});
+}, ot = ({ theme: n, ...r }) => {
+	let { componentStyles: i } = e([a.SLIDER], n);
+	return /* @__PURE__ */ t(at, {
+		...r,
+		style: i
+	});
+}, st = (e, t) => `
+  ~ .--SWITCH-span {
+    // BACKGROUNDS
+    ${i(e, "background-color", `--SWITCH-EVENTS-${t}-BACKGROUND-COLOR`)}
+  }
+`, ct = (e, t) => `
+  ~ .--SWITCH-span {
+    // BORDERS
+    ${i(e, "border-color", `--SWITCH-EVENTS-${t}-BORDER-COLOR`)}
+    ${i(e, "border-width", `--SWITCH-EVENTS-${t}-BORDER-WIDTH`)}
+    ${i(e, "border-style", `--SWITCH-EVENTS-${t}-BORDER-STYLE`)}
+    ${i(e, "border-radius", `--SWITCH-EVENTS-${t}-BORDER-RADIUS`)}
+  }
+`, lt = (e, t) => `
+  ~ .--SWITCH-span {
+    // OUTLINE
+    ${i(e, "outline-color", `--SWITCH-EVENTS-${t}-OUTLINE-COLOR`)}
+    ${i(e, "outline-width", `--SWITCH-EVENTS-${t}-OUTLINE-WIDTH`)}
+    ${i(e, "outline-style", `--SWITCH-EVENTS-${t}-OUTLINE-STYLE`)}
+    ${i(e, "outline-offset", `--SWITCH-EVENTS-${t}-OUTLINE-OFFSET`)}
+  }
+`, ut = (e, t) => `
+// UTILS
+  ~ .--SWITCH-span > span {
+    > svg > path {
+      ${i(e, "fill", `--SWITCH-EVENTS-${t}-ICON-COLOR`)};
+    }
+
+    > .--SWITCH-shadow {
+      ${i(e, "background-color", `--SWITCH-EVENTS-${t}-ICON-BACKGROUND-COLOR`)};
+     }
+  }
+`, dt = (e, t) => `
+  // TYPOGRAPHY
+  .--SWITCH-label {
+    ${i(e, "color", `--SWITCH-EVENTS-${t}-COLOR-PRIMARY`)}
+  }
+
+  ~ .--SWITCH-helperText {
+    ${i(e, "color", `--SWITCH-EVENTS-${t}-COLOR-SECONDARY`)}
+  }
+`, ft = (e) => T`
+  &.--SWITCH {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: fit-content;
+
+    .--SWITCH-container {
+      display: flex;
+      flex-direction: row;
+      gap: 12px;
+      align-items: center;
+      cursor: pointer;
+
+      // ENABLED
+      ${dt(e, "ENABLED")};
+
+      // VALUE
+      &:has(.--SWITCH-inputField:checked) {
+        ${dt(e, "VALUE")};
+      }
+
+      // HOVER
+      &:has(.--SWITCH-inputField:hover) {
+        ${dt(e, "HOVER")};
+      }
+
+      // ACTIVE
+      &:has(.--SWITCH-inputField.--SWITCH-active, .--SWITCH-inputField:active) {
+        ${dt(e, "ACTIVE")};
+      }
+
+      // FOCUS-VISIBLE
+      &:has(.--SWITCH-inputField:focus-visible) {
+        ${dt(e, "FOCUS")};
+      }
+
+      // DISABLED
+      &:has(.--SWITCH-inputField:disabled) {
+        pointer-events: none;
+        ${dt(e, "DISABLED")};
+      }
+
+      // DISABLED + VALUE
+      &:has(.--SWITCH-inputField:disabled:checked) {
+        ${dt(e, "DISABLED_VALUE")};
+      }
+
+      .--SWITCH-checkbox {
+        position: relative;
+        display: inline-flex;
+        width: 48px;
+        height: 24px;
+
+        .--SWITCH-inputField {
+          cursor: pointer;
+          position: absolute;
+          opacity: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 2;
+          margin: 0;
+          -webkit-tap-highlight-color: transparent;
+
+          // ENABLED
+          ${st(e, "ENABLED")};
+          ${ct(e, "ENABLED")};
+          ${ut(e, "ENABLED")};
+
+          // VALUE
+          &:checked {
+            ${st(e, "VALUE")};
+            ${ct(e, "VALUE")};
+            ${ut(e, "VALUE")};
+
+            ~ .--SWITCH-span {
+              .--SWITCH-iconOff {
+                transform: translateX(27px);
+                opacity: 0;
+              }
+              .--SWITCH-iconOn {
+                transform: translateX(-3px);
+                opacity: 1;
+              }
+            }
+          }
+
+          // HOVER
+          &:hover {
+            ~ .--SWITCH-span {
+              .--SWITCH-iconOn,
+              .--SWITCH-iconOff {
+                &::before {
+                  opacity: 1;
+                  ${i(e, "background-color", "--SWITCH-EVENTS-HOVER-SHADOW-COLOR")}
+                }
+              }
+            }
+          }
+
+          // ACTIVE
+          &.--SWITCH-active,
+          &:active {
+            ~ .--SWITCH-span {
+              .--SWITCH-iconOn,
+              .--SWITCH-iconOff {
+                &::before {
+                  opacity: 1;
+                  ${i(e, "background-color", "--SWITCH-EVENTS-ACTIVE-SHADOW-COLOR")}
+                }
+              }
+            }
+          }
+
+          // FOCUS
+          &:focus-visible {
+            outline: none;
+            ${lt(e, "FOCUS")};
+            ${ut(e, "FOCUS")};
+          }
+
+          // DISABLED
+          &:disabled {
+            ${st(e, "DISABLED")};
+            ${ct(e, "DISABLED")};
+            ${ut(e, "DISABLED")};
+          }
+
+          // DISABLED + VALUE
+          &:disabled:checked {
+            ${st(e, "DISABLED_VALUE")};
+            ${ct(e, "DISABLED_VALUE")};
+            ${ut(e, "DISABLED_VALUE")};
+
+            ~ .--SWITCH-span {
+              .--SWITCH-iconOff {
+                transform: translateX(27px);
+                opacity: 0;
+              }
+              .--SWITCH-iconOn {
+                transform: translateX(-3px);
+                opacity: 1;
+              }
+            }
+          }
+        }
+
+        .--SWITCH-span {
+          width: 48px;
+          height: 24px;
+          ${i(e, "border-radius", "--SWITCH-ROOT-BORDER-RADIUS")};
+          position: relative;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          transition: background-color 150ms ease-in-out;
+
+          .--SWITCH-iconOff,
+          .--SWITCH-iconOn {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+
+            height: min(16px, calc(100% - 6px));
+            aspect-ratio: 1;
+
+            transition:
+              transform 150ms ease-in-out,
+              opacity 150ms ease-in-out;
+
+            &::before {
+              content: '';
+              position: absolute;
+              width: 36px;
+              height: 36px;
+              border-radius: 50%;
+              top: calc(50% - 18px);
+              left: calc(50% - 18px);
+              opacity: 0;
+              z-index: -1;
+              transition: opacity 150ms ease-in-out;
+            }
+
+            > svg {
+              width: 12px;
+              height: 12px;
+              max-width: 100%;
+              max-height: 100%;
+              position: absolute;
+              z-index: 1;
+            }
+
+            .--SWITCH-shadow {
+              position: absolute;
+              width: 100%;
+              height: 100%;
+              border-radius: 50%;
+              pointer-events: none;
+              z-index: -1;
+              transition: background-color 150ms ease-in-out;
+            }
+          }
+
+          .--SWITCH-iconOff {
+            left: 0;
+            transform: translateX(3px);
+            opacity: 1;
+          }
+          .--SWITCH-iconOn {
+            right: 0;
+            transform: translateX(calc(-1 * 27px));
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    .--SWITCH-label {
+      // FONT
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 0.875rem;
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    .--SWITCH-helperText {
+      // FONT
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 13px;
+      line-height: 16px;
+      margin-left: 14px;
+    }
+  }
+`, $ = "--SWITCH", pt = ({ name: e, control: r, iconOn: i, iconOff: a, disabled: o, label: s, helperText: c, className: l, style: u, ...d }) => {
+	let [ee, f] = w(!1), { field: p, fieldState: te } = ue({
+		control: r,
+		name: e
+	}), [ne, m] = w(p.value || !1), h = te.error, g = (e) => {
+		p.onChange(e), m(e), h && y();
+	}, re = (e) => {
+		let { checked: t } = e.target;
+		g(t);
+	}, _ = (e) => {
+		(e.key === "Enter" || e.key === "Space") && f(!0), d.onKeyDown?.(e);
+	}, v = (e) => {
+		(e.key === "Enter" || e.key === "Space") && (f(!1), g(!ne)), d.onKeyUp?.(e);
+	}, y = () => p.onBlur();
+	return /* @__PURE__ */ n("div", {
+		className: [
+			$,
+			ee ? `${$}-active` : "",
+			l || ""
+		].join(" "),
+		css: ft(u),
+		"data-testid": $,
+		children: [/* @__PURE__ */ n("label", {
+			className: `${$}-container`,
+			children: [/* @__PURE__ */ n("div", {
+				className: `${$}-checkbox`,
+				children: [/* @__PURE__ */ t("input", {
+					className: [
+						`${$}-inputField`,
+						ee ? `${$}-active` : "",
+						h && `${$}-error`
+					].join(" "),
+					type: "checkbox",
+					value: e,
+					checked: ne,
+					disabled: o,
+					onChange: re,
+					onKeyDown: _,
+					onKeyUp: v,
+					onBlur: y,
+					"data-testid": `${$}-inputField`,
+					...d
+				}), /* @__PURE__ */ n("span", {
+					className: `${$}-span`,
+					"data-testid": `${$}-icon`,
+					children: [/* @__PURE__ */ n("span", {
+						className: `${$}-iconOff`,
+						children: [/* @__PURE__ */ t("span", { className: `${$}-shadow` }), a]
+					}), /* @__PURE__ */ n("span", {
+						className: `${$}-iconOn`,
+						children: [/* @__PURE__ */ t("span", { className: `${$}-shadow` }), i]
+					})]
+				})]
+			}), /* @__PURE__ */ t("span", {
+				className: `${$}-label`,
+				"data-testid": `${$}-label`,
+				children: s
+			})]
+		}), (c || h) && /* @__PURE__ */ t("span", {
+			className: `${$}-helperText`,
+			"data-testid": `${$}-helperText`,
+			children: h ? h.message : c
+		})]
+	});
+}, mt = ({ theme: n, ...r }) => {
+	let { componentStyles: i } = e([a.SWITCH], n);
+	return /* @__PURE__ */ t(pt, {
+		...r,
+		style: i
+	});
+};
+//#endregion
+export { Pe as a, he as c, Ue as i, ot as n, ke as o, et as r, Ce as s, mt as t };
+
+//# sourceMappingURL=Switch-BKf-QVlX.js.map