@vacano/ui 1.4.0 → 1.4.1

package/dist/index.js

@@ -1,7 +1,7 @@
 import { j as s, m as nr, g as ar, s as lr, r as dr, u as cr, i as sr, L as pr, a as P, M as ur, C as Eo, X as Dt, b as Co, c as st, d as pt, F as rt } from "./X-Cm-i8Bh7.js";
 import { css as hr, Global as br, withEmotionCache as gr, ThemeContext as fr, keyframes as He } from "@emotion/react";
 import * as Re from "react";
-import { useMemo as re, useRef as U, useImperativeHandle as $r, useState as V, useCallback as M, useLayoutEffect as lt, useEffect as je, cloneElement as xr, createContext as yr, useReducer as vr, useContext as wr } from "react";
+import { useMemo as re, useRef as U, useImperativeHandle as xr, useState as V, useCallback as M, useLayoutEffect as lt, useEffect as je, cloneElement as $r, createContext as yr, useReducer as vr, useContext as wr } from "react";
 import { C as o, a as l, K as fe, g as mr, u as kr, B as Ie, m as Ne } from "./media-BR6nutcO.js";
 import { n as D } from "./tooling-YDHxmiMT.js";
 import { createPortal as ve } from "react-dom";
@@ -193,12 +193,12 @@ var zr = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|def
     if (a !== void 0 && f.push("label:" + a + ";"), h[0] == null || h[0].raw === void 0)
       f.push.apply(f, h);
     else {
-      var x = h[0];
-      f.push(x[0]);
+      var $ = h[0];
+      f.push($[0]);
       for (var C = h.length, w = 1; w < C; w++)
-        f.push(h[w], x[w]);
+        f.push(h[w], $[w]);
     }
-    var v = gr(function(y, $, m) {
+    var v = gr(function(y, x, m) {
       var g = b && y.as || n, T = "", N = [], L = y;
       if (y.theme == null) {
         L = {};
@@ -206,14 +206,14 @@ var zr = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|def
           L[q] = y[q];
         L.theme = Re.useContext(fr);
       }
-      typeof y.className == "string" ? T = ar($.registered, N, y.className) : y.className != null && (T = y.className + " ");
-      var I = lr(f.concat(N), $.registered, L);
-      T += $.key + "-" + I.name, c !== void 0 && (T += " " + c);
+      typeof y.className == "string" ? T = ar(x.registered, N, y.className) : y.className != null && (T = y.className + " ");
+      var I = lr(f.concat(N), x.registered, L);
+      T += x.key + "-" + I.name, c !== void 0 && (T += " " + c);
       var F = b && d === void 0 ? Yt(g) : u, O = {};
       for (var z in y)
         b && z === "as" || F(z) && (O[z] = y[z]);
       return O.className = T, m && (O.ref = m), /* @__PURE__ */ Re.createElement(Re.Fragment, null, /* @__PURE__ */ Re.createElement(Tr, {
-        cache: $,
+        cache: x,
         serialized: I,
         isStringTag: typeof g == "string"
       }), /* @__PURE__ */ Re.createElement(g, O));
@@ -222,9 +222,9 @@ var zr = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|def
       value: function() {
         return "." + c;
       }
-    }), v.withComponent = function(y, $) {
-      var m = e(y, Tt({}, r, $, {
-        shouldForwardProp: Ht(v, $, !0)
+    }), v.withComponent = function(y, x) {
+      var m = e(y, Tt({}, r, x, {
+        shouldForwardProp: Ht(v, x, !0)
       }));
       return m.apply(void 0, f);
     }, v;
@@ -617,11 +617,11 @@ const jt = {
   keyBindings: b = [],
   size: h = "default",
   type: f = "button",
-  variant: x = "normal",
+  variant: $ = "normal",
   ...C
 }) => {
   const w = U(null);
-  $r(u, () => w.current, []), kr(b, () => {
+  xr(u, () => w.current, []), kr(b, () => {
     var y;
     (y = w.current) == null || y.click();
   });
@@ -642,7 +642,7 @@ const jt = {
       type: v,
       disabled: i,
       className: Xt("container", t),
-      $variant: x,
+      $variant: $,
       $size: h,
       $fullWidth: !!n,
       $iconOnly: !!a && !(e || (b == null ? void 0 : b.length) > 0),
@@ -650,7 +650,7 @@ const jt = {
         c && /* @__PURE__ */ s(Or, { $size: h }),
         a && !c && /* @__PURE__ */ s(Ar, { $size: h, children: a }),
         e && /* @__PURE__ */ s(Dr, { className: Xt("label", r == null ? void 0 : r.label), children: e }),
-        /* @__PURE__ */ s(Yr, { keys: b, variant: x === "system" ? "light" : "dark" })
+        /* @__PURE__ */ s(Yr, { keys: b, variant: $ === "system" ? "light" : "dark" })
       ]
     }
   );
@@ -699,15 +699,15 @@ const jt = {
     label: o.red,
     icon: o.white
   }
-}, $e = (e) => Ut[e] ?? Ut.normal, Vr = p.label`
+}, xe = (e) => Ut[e] ?? Ut.normal, Vr = p.label`
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
   cursor: ${(e) => e.$disabled ? "not-allowed" : "pointer"};
   opacity: ${(e) => e.$disabled ? 0.5 : 1};
 
   &:has(input:focus-visible) > span:first-of-type {
-    box-shadow: 0 0 0 2px ${(e) => $e(e.$variant).box.focusShadow};
+    box-shadow: 0 0 0 2px ${(e) => xe(e.$variant).box.focusShadow};
   }
 `, Wr = p.input`
   position: absolute;
@@ -724,8 +724,8 @@ const jt = {
   height: 18px;
   border-radius: 6px;
   border: 1.5px solid
-    ${(e) => e.$checked || e.$indeterminate ? $e(e.$variant).box.borderChecked : $e(e.$variant).box.border};
-  background-color: ${(e) => e.$checked || e.$indeterminate ? $e(e.$variant).box.backgroundChecked : $e(e.$variant).box.background};
+    ${(e) => e.$checked || e.$indeterminate ? xe(e.$variant).box.borderChecked : xe(e.$variant).box.border};
+  background-color: ${(e) => e.$checked || e.$indeterminate ? xe(e.$variant).box.backgroundChecked : xe(e.$variant).box.background};
   transition:
     border-color 0.15s ease,
     background-color 0.15s ease,
@@ -734,7 +734,7 @@ const jt = {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: ${(e) => $e(e.$variant).icon};
+  color: ${(e) => xe(e.$variant).icon};
   opacity: ${(e) => e.$visible ? 1 : 0};
   transform: ${(e) => e.$visible ? "scale(1)" : "scale(0.5)"};
   transition:
@@ -748,9 +748,19 @@ const jt = {
 `, qr = p.span`
   font-size: 14px;
   font-weight: 500;
-  line-height: 1;
-  color: ${(e) => $e(e.$variant).label};
+  line-height: 1.4;
+  color: ${(e) => xe(e.$variant).label};
   user-select: none;
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
 `, Le = D("checkbox"), Ot = ({
   checked: e,
   className: t,
@@ -1022,7 +1032,7 @@ const jt = {
   ...u
 }) => {
   const b = (h, f) => {
-    n(f ? [...d, h] : d.filter((x) => x !== h));
+    n(f ? [...d, h] : d.filter(($) => $ !== h));
   };
   return /* @__PURE__ */ P(ei, { ...u, ref: c, className: ut("container", e), children: [
     i && /* @__PURE__ */ s(ti, { className: ut("label", t == null ? void 0 : t.label), $disabled: r, children: i }),
@@ -1184,8 +1194,8 @@ const jt = {
   open: b = !0,
   ref: h,
   submitBindings: f,
-  ...x
-}) => b ? /* @__PURE__ */ P(si, { ...x, ref: h, className: Ae("container", r), $open: b, children: [
+  ...$
+}) => b ? /* @__PURE__ */ P(si, { ...$, ref: h, className: Ae("container", r), $open: b, children: [
   /* @__PURE__ */ s(pi, { className: Ae("message", i == null ? void 0 : i.message), children: c }),
   /* @__PURE__ */ P(ui, { className: Ae("actions", i == null ? void 0 : i.actions), children: [
     /* @__PURE__ */ s(
@@ -1298,11 +1308,11 @@ const jt = {
     focus: l(o.red, 30)
   }
 }, ce = 36, dt = 2, gi = 12, fi = (e, t, r = "en") => {
-  const i = e.getFullYear(), n = e.getMonth(), a = e.getDate(), c = e.getHours(), d = e.getMinutes(), u = e.getSeconds(), b = c % 12 || 12, h = c >= 12, f = new Intl.DateTimeFormat(r, { month: "long" }).format(e), x = new Intl.DateTimeFormat(r, { month: "short" }).format(e), C = new Intl.DateTimeFormat(r, { weekday: "long" }).format(e), w = new Intl.DateTimeFormat(r, { weekday: "short" }).format(e), v = (T) => T.toString().padStart(2, "0"), y = (T) => T.toString().padStart(2, " "), $ = (T) => `\0${T}\0`, m = [
+  const i = e.getFullYear(), n = e.getMonth(), a = e.getDate(), c = e.getHours(), d = e.getMinutes(), u = e.getSeconds(), b = c % 12 || 12, h = c >= 12, f = new Intl.DateTimeFormat(r, { month: "long" }).format(e), $ = new Intl.DateTimeFormat(r, { month: "short" }).format(e), C = new Intl.DateTimeFormat(r, { weekday: "long" }).format(e), w = new Intl.DateTimeFormat(r, { weekday: "short" }).format(e), v = (T) => T.toString().padStart(2, "0"), y = (T) => T.toString().padStart(2, " "), x = (T) => `\0${T}\0`, m = [
     ["2006", "YEARFOUR", i.toString()],
     ["January", "MONTHLONG", f],
     ["Monday", "WEEKDAYLONG", C],
-    ["Jan", "MONTHSHORT", x],
+    ["Jan", "MONTHSHORT", $],
     ["Mon", "WEEKDAYSHORT", w],
     ["06", "YEARTWO", i.toString().slice(-2)],
     ["01", "MONTHPAD", v(n + 1)],
@@ -1321,13 +1331,13 @@ const jt = {
   ];
   let g = t;
   for (const [T, N] of m)
-    g = g.split(T).join($(N));
+    g = g.split(T).join(x(N));
   for (const [, T, N] of m)
-    g = g.split($(T)).join(N);
+    g = g.split(x(T)).join(N);
   return g;
-}, $i = (e, t) => new Date(e, t + 1, 0).getDate(), xi = (e, t) => new Date(e, t, 1).getDay(), yi = (e, t, r = 1) => {
-  const i = $i(e, t);
-  let a = xi(e, t) - r;
+}, xi = (e, t) => new Date(e, t + 1, 0).getDate(), $i = (e, t) => new Date(e, t, 1).getDay(), yi = (e, t, r = 1) => {
+  const i = xi(e, t);
+  let a = $i(e, t) - r;
   a < 0 && (a += 7);
   const c = [];
   for (let d = 0; d < a; d++)
@@ -1666,12 +1676,12 @@ const jt = {
   size: b = "default",
   variant: h = "normal",
   disabled: f = !1,
-  fullWidth: x = !1,
+  fullWidth: $ = !1,
   label: C,
   portalRenderNode: w,
   open: v,
   onOpen: y,
-  onClose: $,
+  onClose: x,
   className: m,
   classnames: g,
   ref: T,
@@ -1697,8 +1707,8 @@ const jt = {
     const S = e ?? L;
     B(S), Y(S.getFullYear() - 6);
   }, [f, J, y, r, e, L]), te = M(() => {
-    J || I(!1), $ == null || $();
-  }, [J, $]), jo = M(() => {
+    J || I(!1), x == null || x();
+  }, [J, x]), jo = M(() => {
     Q ? te() : Mt();
   }, [Q, te, Mt]), Vo = M(
     (S) => {
@@ -1877,7 +1887,7 @@ const jt = {
     {
       ...N,
       ref: T ?? X,
-      $fullWidth: x,
+      $fullWidth: $,
       className: ee("container", m),
       children: [
         C && /* @__PURE__ */ s(Ci, { children: C }),
@@ -2018,7 +2028,7 @@ const jt = {
   trigger: b,
   ...h
 }) => {
-  const [f, x] = V(!1), [C, w] = V({ top: 0, left: 0 }), [v, y] = V("bottom"), $ = U(null), m = U(null), g = U(null), T = c !== void 0, N = T ? c : f, L = M(() => {
+  const [f, $] = V(!1), [C, w] = V({ top: 0, left: 0 }), [v, y] = V("bottom"), x = U(null), m = U(null), g = U(null), T = c !== void 0, N = T ? c : f, L = M(() => {
     var B, W;
     if (!m.current) return;
     const O = m.current.getBoundingClientRect(), z = ((B = g.current) == null ? void 0 : B.offsetHeight) ?? Ji, H = ((W = g.current) == null ? void 0 : W.offsetWidth) ?? 160, k = window.innerHeight - O.bottom - Ke, A = O.top - Ke, E = k < z && A > k ? "top" : "bottom";
@@ -2029,18 +2039,18 @@ const jt = {
       w({ top: X, left: Y });
     }
   }, [e, d]), q = M(() => {
-    T ? N ? n == null || n() : a == null || a() : x((O) => {
+    T ? N ? n == null || n() : a == null || a() : $((O) => {
       const z = !O;
       return z ? a == null || a() : n == null || n(), z;
     });
   }, [T, N, n, a]), I = M(() => {
-    T || x(!1), n == null || n();
+    T || $(!1), n == null || n();
   }, [T, n]);
   lt(() => {
     N && L();
   }, [N, L]), je(() => {
     const O = (A) => {
-      const E = A.target, B = $.current && !$.current.contains(E), W = g.current && !g.current.contains(E);
+      const E = A.target, B = x.current && !x.current.contains(E), W = g.current && !g.current.contains(E);
       d ? B && W && I() : B && I();
     }, z = (A) => {
       A.key === "Escape" && I();
@@ -2077,14 +2087,14 @@ const jt = {
       children: t
     }
   );
-  return /* @__PURE__ */ P(qi, { ...h, ref: u ?? $, className: Ze("container", r), children: [
+  return /* @__PURE__ */ P(qi, { ...h, ref: u ?? x, className: Ze("container", r), children: [
     /* @__PURE__ */ s(
       Gi,
       {
         ref: m,
         onClick: q,
         className: Ze("trigger", i == null ? void 0 : i.trigger),
-        children: xr(b)
+        children: $r(b)
       }
     ),
     F
@@ -2306,18 +2316,18 @@ const jt = {
       overflow: hidden;
       border-radius: 50%;
     }
-`, $n = {
+`, xn = {
   tl: "nw-resize",
   tr: "ne-resize",
   bl: "sw-resize",
   br: "se-resize"
-}, xn = {
+}, $n = {
   tl: { h: "left", v: "top" },
   tr: { h: "right", v: "top" },
   bl: { h: "left", v: "bottom" },
   br: { h: "right", v: "bottom" }
 }, Je = (e, t) => {
-  const r = $n[t], { h: i, v: n } = xn[t];
+  const r = xn[t], { h: i, v: n } = $n[t];
   return `
     .${e} {
         display: block;
@@ -2547,9 +2557,9 @@ const Sn = (e) => {
   config: { ...Nt.config, ...e },
   css: mn(t)
 }), Pn = (e, t) => {
-  var x;
+  var $;
   const r = e(), i = document.querySelector(
-    `.${(x = r.css) == null ? void 0 : x.body[0]}`
+    `.${($ = r.css) == null ? void 0 : $.body[0]}`
   );
   if (!i)
     return r.frame;
@@ -2666,7 +2676,7 @@ const Tn = (e) => {
   portalArea: "portalArea",
   portal: "portal",
   previewImage: "previewImage"
-}, xe = (e, t) => {
+}, $e = (e, t) => {
   if (Be.has(e))
     return Be.get(e);
   if (!t)
@@ -2680,27 +2690,27 @@ const Tn = (e) => {
 }, Gn = () => {
   Be.clear();
 }, Zn = (e, t) => {
-  const r = xe("header", t.css);
+  const r = $e("header", t.css);
   r && (r.innerText = e);
 }, Kn = (e, t) => {
-  const r = xe("sourceImage", t.css);
+  const r = $e("sourceImage", t.css);
   r && (r.setAttribute("src", e), r.style.height = `${t.frame.height}px`, r.style.width = `${t.frame.width}px`, r.style.left = `${t.frame.left}px`, r.style.top = `${t.frame.top}px`);
-  const i = xe("portalArea", t.css);
+  const i = $e("portalArea", t.css);
   i && (i.style.height = `${t.frame.height}px`, i.style.width = `${t.frame.width}px`, i.style.left = `${t.frame.left}px`, i.style.top = `${t.frame.top}px`);
-  const n = xe("portal", t.css);
+  const n = $e("portal", t.css);
   n && (n.style.width = `${t.portal.size}px`, n.style.height = `${t.portal.size}px`, n.style.left = `${t.portal.left}px`, n.style.top = `${t.portal.top}px`);
-  const a = xe("previewImage", t.css);
+  const a = $e("previewImage", t.css);
   a && (a.setAttribute("src", e), a.style.height = `${t.frame.height}px`, a.style.width = `${t.frame.width}px`, a.style.marginLeft = `-${t.portal.left}px`, a.style.marginTop = `-${t.portal.top}px`);
 }, Jn = (e, t) => {
-  const r = xe("portal", t.css);
+  const r = $e("portal", t.css);
   r && (r.style.left = `${e.left}px`, r.style.top = `${e.top}px`, r.style.width = `${e.size}px`, r.style.height = `${e.size}px`);
-  const i = xe("previewImage", t.css);
+  const i = $e("previewImage", t.css);
   i && (i.style.marginLeft = `-${e.left}px`, i.style.marginTop = `-${e.top}px`);
-}, $t = 1, Qn = (e) => {
+}, xt = 1, Qn = (e) => {
   var C, w;
-  const t = e(), r = document.createElement("canvas"), i = t.frame.width || $t, n = t.frame.height || $t, a = t.sourceWidth / i, c = t.sourceHeight / n, d = t.portal.left * a, u = t.portal.top * c, b = Math.max(
+  const t = e(), r = document.createElement("canvas"), i = t.frame.width || xt, n = t.frame.height || xt, a = t.sourceWidth / i, c = t.sourceHeight / n, d = t.portal.left * a, u = t.portal.top * c, b = Math.max(
     t.portal.size * Math.min(a, c),
-    $t
+    xt
   ), h = t.config.outputSize > 0 ? t.config.outputSize : b;
   r.width = h, r.height = h;
   const f = document.querySelector(
@@ -2717,15 +2727,15 @@ const Tn = (e) => {
     h,
     h
   ));
-  const x = r.toDataURL(
+  const $ = r.toDataURL(
     `image/${t.config.type}`,
     t.config.compression
   );
   return new Promise((v, y) => {
     try {
       r.toBlob(
-        ($) => {
-          if (r.remove(), !$) {
+        (x) => {
+          if (r.remove(), !x) {
             y(
               new Error(
                 `Failed to create blob for type: image/${t.config.type}`
@@ -2733,20 +2743,20 @@ const Tn = (e) => {
             );
             return;
           }
-          v([x, $]);
+          v([$, x]);
         },
         `image/${t.config.type}`,
         t.config.compression
       );
-    } catch ($) {
-      r.remove(), y($);
+    } catch (x) {
+      r.remove(), y(x);
     }
   });
 }, ea = (e, t, r) => {
   const { emitted: i, portal: n, frame: a, config: c } = t();
   let d = i.left - i.X + e.clientX, u = i.top - i.Y + e.clientY;
-  const b = c.framePadding, h = a.width - c.framePadding - n.size, f = c.framePadding, x = a.height - c.framePadding - n.size;
-  d < b && (d = b), d > h && (d = h), u < f && (u = f), u > x && (u = x), r({
+  const b = c.framePadding, h = a.width - c.framePadding - n.size, f = c.framePadding, $ = a.height - c.framePadding - n.size;
+  d < b && (d = b), d > h && (d = h), u < f && (u = f), u > $ && (u = $), r({
     portal: {
       ...n,
       left: d,
@@ -2777,24 +2787,24 @@ const Tn = (e) => {
     }
     case ae.RESIZE_TL: {
       const h = Math.min(u, b);
-      let f = n.size - h, x = n.left + h, C = n.top + h;
+      let f = n.size - h, $ = n.left + h, C = n.top + h;
       if (f < d.minPortalSize) {
         const w = n.size - d.minPortalSize;
-        f = d.minPortalSize, x = n.left + w, C = n.top + w;
+        f = d.minPortalSize, $ = n.left + w, C = n.top + w;
       }
       if (C < d.framePadding) {
         const w = d.framePadding - C;
-        C = d.framePadding, x = x + w, f = f - w;
+        C = d.framePadding, $ = $ + w, f = f - w;
       }
-      if (x < d.framePadding) {
-        const w = d.framePadding - x;
-        x = d.framePadding, C = C + w, f = f - w;
+      if ($ < d.framePadding) {
+        const w = d.framePadding - $;
+        $ = d.framePadding, C = C + w, f = f - w;
       }
       return r({
         portal: {
           ...a,
           top: C,
-          left: x,
+          left: $,
           size: f
         }
       });
@@ -2839,9 +2849,9 @@ const Tn = (e) => {
     pageY: t.pageY
   };
 }, oa = (e, t) => {
-  var x, C, w;
+  var $, C, w;
   const r = e(), i = document.querySelector(
-    `.${(x = r.css) == null ? void 0 : x.portal[0]}`
+    `.${($ = r.css) == null ? void 0 : $.portal[0]}`
   ), n = document.querySelector(
     `.${(C = r.css) == null ? void 0 : C.portalArea[0]}`
   ), a = document.querySelector(
@@ -2850,11 +2860,11 @@ const Tn = (e) => {
   let c = null, d = null;
   const u = (v) => {
     v.preventDefault();
-    const { portal: y } = e(), $ = oo(v);
+    const { portal: y } = e(), x = oo(v);
     if (v.target) {
       const m = v.target.getAttribute("data-action"), g = {
-        X: $.pageX,
-        Y: $.pageY,
+        X: x.pageX,
+        Y: x.pageY,
         left: y.left,
         top: y.top,
         size: y.size
@@ -2909,8 +2919,8 @@ const Tn = (e) => {
   }
   return null;
 }, ia = (e, t, r, i, n, a, c) => {
-  const d = ($) => {
-    c ? c($) : console.error(`HqCropper: ${$}`);
+  const d = (x) => {
+    c ? c(x) : console.error(`HqCropper: ${x}`);
   };
   if (!e.target.files || e.target.files.length === 0) {
     d("Can't read file input");
@@ -2922,35 +2932,35 @@ const Tn = (e) => {
     return;
   }
   const f = new FileReader();
-  let x = null;
+  let $ = null;
   const C = () => {
     var g;
-    const $ = t(), m = document.querySelector(
-      `.${(g = $.css) == null ? void 0 : g.root[0]}`
+    const x = t(), m = document.querySelector(
+      `.${(g = x.css) == null ? void 0 : g.root[0]}`
     );
-    m && (m.remove(), document.removeEventListener("keydown", w), x == null || x(), Gn(), a(), r(Nt));
-  }, w = ($) => {
-    $.key === "Escape" && t().sourceBase64 && v($);
-  }, v = ($) => {
-    $.preventDefault(), C();
-  }, y = ($) => {
-    $.preventDefault();
+    m && (m.remove(), document.removeEventListener("keydown", w), $ == null || $(), Gn(), a(), r(Nt));
+  }, w = (x) => {
+    x.key === "Escape" && t().sourceBase64 && v(x);
+  }, v = (x) => {
+    x.preventDefault(), C();
+  }, y = (x) => {
+    x.preventDefault();
     const m = t();
     Qn(t).then(([g, T]) => {
-      i(g, T, m), v($);
+      i(g, T, m), v(x);
     }).catch((g) => {
       d(
         g instanceof Error ? g.message : "Failed to crop image"
       );
     });
   };
-  f.onload = ($) => {
+  f.onload = (x) => {
     const m = new Image();
-    if (!$.target || typeof $.target.result != "string") {
+    if (!x.target || typeof x.target.result != "string") {
       d("Can't load result image");
       return;
     }
-    m.src = $.target.result, m.onerror = () => {
+    m.src = x.target.result, m.onerror = () => {
       d("Failed to load image");
     }, m.onload = () => {
       var N;
@@ -2960,10 +2970,10 @@ const Tn = (e) => {
         frame: g,
         portal: T,
         fileName: u.name,
-        sourceBase64: (N = $.target) == null ? void 0 : N.result,
+        sourceBase64: (N = x.target) == null ? void 0 : N.result,
         sourceHeight: m.height,
         sourceWidth: m.width
-      }), x = oa(t, r), document.addEventListener("keydown", w);
+      }), $ = oa(t, r), document.addEventListener("keydown", w);
     };
   }, f.onerror = () => {
     d("Failed to read file");
@@ -3102,7 +3112,7 @@ const Tn = (e) => {
     b,
     h
   ]) };
-}, xt = D("image-cropper"), sd = ({
+}, $t = D("image-cropper"), sd = ({
   allowedTypes: e,
   applyLabel: t,
   buttonLabel: r = "Select Image",
@@ -3115,13 +3125,13 @@ const Tn = (e) => {
   onError: b,
   outputSize: h,
   portalSize: f,
-  previewSize: x = 120,
+  previewSize: $ = 120,
   ref: C,
   type: w,
   value: v,
   ...y
 }) => {
-  const [$, m] = V(v ?? null), { open: g } = ca({
+  const [x, m] = V(v ?? null), { open: g } = ca({
     allowedTypes: e,
     applyLabel: t,
     cancelLabel: i,
@@ -3135,15 +3145,15 @@ const Tn = (e) => {
     portalSize: f,
     type: w
   });
-  return /* @__PURE__ */ P(on, { ...y, ref: C, className: xt("container", n), children: [
-    /* @__PURE__ */ s(rn, { $size: x, className: xt("preview", a == null ? void 0 : a.preview), children: $ ? /* @__PURE__ */ s("img", { src: $, alt: "Preview" }) : /* @__PURE__ */ s(nn, { children: "No image" }) }),
+  return /* @__PURE__ */ P(on, { ...y, ref: C, className: $t("container", n), children: [
+    /* @__PURE__ */ s(rn, { $size: $, className: $t("preview", a == null ? void 0 : a.preview), children: x ? /* @__PURE__ */ s("img", { src: x, alt: "Preview" }) : /* @__PURE__ */ s(nn, { children: "No image" }) }),
     /* @__PURE__ */ s(
       nt,
       {
         variant: "system",
         onClick: g,
-        className: xt("button", a == null ? void 0 : a.button),
-        style: { width: x },
+        className: $t("button", a == null ? void 0 : a.button),
+        style: { width: $ },
         children: r
       }
     )
@@ -3313,11 +3323,11 @@ const Tn = (e) => {
     border: o.red,
     label: o.red
   }
-}, $a = p.div`
+}, xa = p.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
-`, xa = p(Pe)`
+`, $a = p(Pe)`
   margin-left: 6px;
   color: ${(e) => Lo[e.$variant].label};
 `, ya = p.button`
@@ -3405,25 +3415,25 @@ const Tn = (e) => {
   placeholder: b = "Select...",
   ref: h,
   searchPlaceholder: f = "Search...",
-  value: x,
+  value: $,
   variant: C = "normal",
   ...w
 }) => {
-  const [v, y] = V(!1), [$, m] = V(""), g = re(() => u.filter((z) => x.includes(z.value)), [u, x]), T = re(() => {
-    if (!$.trim()) return u;
-    const z = $.toLowerCase().trim();
+  const [v, y] = V(!1), [x, m] = V(""), g = re(() => u.filter((z) => $.includes(z.value)), [u, $]), T = re(() => {
+    if (!x.trim()) return u;
+    const z = x.toLowerCase().trim();
     return u.filter((H) => H.label.toLowerCase().includes(z));
-  }, [u, $]), N = a === 1 / 0 ? g : g.slice(0, a), L = g.length - N.length, q = () => {
+  }, [u, x]), N = a === 1 / 0 ? g : g.slice(0, a), L = g.length - N.length, q = () => {
     r || (y(!0), m(""));
   }, I = () => {
     y(!1), m("");
   }, F = (z) => {
-    x.includes(z) ? d(x.filter((H) => H !== z)) : d([...x, z]);
+    $.includes(z) ? d($.filter((H) => H !== z)) : d([...$, z]);
   }, O = (z) => {
-    d(x.filter((H) => H !== z));
+    d($.filter((H) => H !== z));
   };
-  return /* @__PURE__ */ P($a, { ...w, ref: h, className: ie("container", e), children: [
-    n && /* @__PURE__ */ s(xa, { $variant: C, className: ie("label", t == null ? void 0 : t.trigger), children: n }),
+  return /* @__PURE__ */ P(xa, { ...w, ref: h, className: ie("container", e), children: [
+    n && /* @__PURE__ */ s($a, { $variant: C, className: ie("label", t == null ? void 0 : t.trigger), children: n }),
     /* @__PURE__ */ s(
       ya,
       {
@@ -3469,7 +3479,7 @@ const Tn = (e) => {
         ha,
         {
           type: "text",
-          value: $,
+          value: x,
           onChange: (z) => m(z.target.value),
           placeholder: f,
           autoFocus: !0,
@@ -3486,7 +3496,7 @@ const Tn = (e) => {
             /* @__PURE__ */ s(
               Ot,
               {
-                checked: x.includes(z.value),
+                checked: $.includes(z.value),
                 disabled: z.disabled,
                 onChange: () => F(z.value)
               }
@@ -3595,65 +3605,65 @@ const Tn = (e) => {
   variant: b = "normal",
   ...h
 }) => {
-  const f = U([]), x = M((y) => {
-    const $ = f.current[y];
-    $ && ($.focus(), $.select());
+  const f = U([]), $ = M((y) => {
+    const x = f.current[y];
+    x && (x.focus(), x.select());
   }, []), C = M(
-    (y, $) => {
-      const g = $.target.value.replace(/\D/g, "").slice(-1);
+    (y, x) => {
+      const g = x.target.value.replace(/\D/g, "").slice(-1);
       if (!g) return;
       const T = u.padEnd(n, " ").split(""), N = T.findIndex((F) => F === " " || F === ""), L = N !== -1 ? N : y;
       T[L] = g;
       const q = T.join("").replace(/ /g, "");
       a == null || a(q);
       const I = L + 1;
-      I < n && x(I);
+      I < n && $(I);
     },
-    [u, n, a, x]
+    [u, n, a, $]
   ), w = M(
-    (y, $) => {
-      if ($.key === "Backspace") {
-        $.preventDefault();
+    (y, x) => {
+      if (x.key === "Backspace") {
+        x.preventDefault();
         const m = u.split("");
-        m[y] ? (m[y] = "", a == null || a(m.join(""))) : y > 0 && (m[y - 1] = "", a == null || a(m.join("")), x(y - 1));
-      } else $.key === "ArrowLeft" && y > 0 ? ($.preventDefault(), x(y - 1)) : $.key === "ArrowRight" && y < n - 1 && ($.preventDefault(), x(y + 1));
+        m[y] ? (m[y] = "", a == null || a(m.join(""))) : y > 0 && (m[y - 1] = "", a == null || a(m.join("")), $(y - 1));
+      } else x.key === "ArrowLeft" && y > 0 ? (x.preventDefault(), $(y - 1)) : x.key === "ArrowRight" && y < n - 1 && (x.preventDefault(), $(y + 1));
     },
-    [u, n, a, x]
+    [u, n, a, $]
   ), v = M(
     (y) => {
       y.preventDefault();
-      const $ = y.clipboardData.getData("text").replace(/\D/g, "").slice(0, n);
-      if ($) {
-        a == null || a($);
-        const m = Math.min($.length, n - 1);
-        x(m);
+      const x = y.clipboardData.getData("text").replace(/\D/g, "").slice(0, n);
+      if (x) {
+        a == null || a(x);
+        const m = Math.min(x.length, n - 1);
+        $(m);
       }
     },
-    [n, a, x]
+    [n, a, $]
   );
   return /* @__PURE__ */ P(Ca, { ref: c, className: wt("container", e), ...h, children: [
     i && /* @__PURE__ */ s(Ta, { variant: b, className: wt("label", t == null ? void 0 : t.label), children: i }),
-    /* @__PURE__ */ s(Ra, { $size: d, children: Array.from({ length: n }).map((y, $) => /* @__PURE__ */ s(
+    /* @__PURE__ */ s(Ra, { $size: d, children: Array.from({ length: n }).map((y, x) => /* @__PURE__ */ s(
       Ia,
       {
         ref: (m) => {
-          f.current[$] = m;
+          f.current[x] = m;
         },
         type: "text",
         inputMode: "numeric",
         autoComplete: "one-time-code",
         maxLength: 2,
         disabled: r,
-        value: u[$] ?? "",
-        onChange: (m) => C($, m),
-        onKeyDown: (m) => w($, m),
+        value: u[x] ?? "",
+        onChange: (m) => C(x, m),
+        onKeyDown: (m) => w(x, m),
         onPaste: v,
         onFocus: (m) => m.target.select(),
         $size: d,
         $variant: b,
         className: wt("input", t == null ? void 0 : t.input)
       },
-      $
+      x
     )) })
   ] });
 }, po = {
@@ -3785,7 +3795,7 @@ const Tn = (e) => {
   }
 }, ye = (e) => ho[e] ?? ho.normal, Fa = p.label`
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
   cursor: ${(e) => e.$disabled ? "not-allowed" : "pointer"};
   opacity: ${(e) => e.$disabled ? 0.5 : 1};
@@ -3830,6 +3840,16 @@ const Tn = (e) => {
   line-height: 1.5;
   color: ${(e) => ye(e.$variant).label};
   user-select: none;
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
 `, Oe = D("radio"), Ao = ({
   checked: e,
   className: t,
@@ -4107,7 +4127,7 @@ const Tn = (e) => {
     padding: "0 14px",
     radius: "16px"
   }
-}, $o = {
+}, xo = {
   normal: {
     background: {
       static: l(o.black, 2),
@@ -4140,7 +4160,7 @@ const Tn = (e) => {
     placeholder: l(o.red, 40),
     focus: l(o.red, 30)
   }
-}, St = (e) => fo[e] ?? fo.default, pe = (e) => $o[e] ?? $o.normal, Ja = p.div`
+}, St = (e) => fo[e] ?? fo.default, pe = (e) => xo[e] ?? xo.normal, Ja = p.div`
   position: relative;
   display: grid;
   gap: 2px;
@@ -4231,7 +4251,7 @@ const Tn = (e) => {
   justify-content: center;
   flex-shrink: 0;
   color: ${o.black};
-`, ze = D("select"), $d = ({
+`, ze = D("select"), xd = ({
   className: e,
   classnames: t,
   disabled: r = !1,
@@ -4244,10 +4264,10 @@ const Tn = (e) => {
   ref: b,
   size: h = "default",
   value: f,
-  variant: x = "normal",
+  variant: $ = "normal",
   ...C
 }) => {
-  const [w, v] = V(!1), [y, $] = V({
+  const [w, v] = V(!1), [y, x] = V({
     top: 0,
     left: 0,
     width: 0
@@ -4259,7 +4279,7 @@ const Tn = (e) => {
     const k = g.current.getBoundingClientRect(), A = L * kt + _e;
     let E = k.top - A;
     const B = c.length * kt + _e * 2, W = 8, Y = window.innerHeight - B - 8;
-    E < W && (E = W), E > Y && (E = Y), $({
+    E < W && (E = W), E > Y && (E = Y), x({
       top: E,
       left: k.left - _e,
       width: k.width + _e * 2
@@ -4346,7 +4366,7 @@ const Tn = (e) => {
             ref: g,
             type: "button",
             $size: h,
-            $variant: x,
+            $variant: $,
             $disabled: r,
             $hasValue: !!N,
             disabled: r,
@@ -4365,7 +4385,7 @@ const Tn = (e) => {
       ]
     }
   );
-}, xo = {
+}, $o = {
   xs: { size: "16px", borderWidth: "2px" },
   sm: { size: "20px", borderWidth: "2px" },
   md: { size: "32px", borderWidth: "3px" },
@@ -4373,7 +4393,7 @@ const Tn = (e) => {
 }, yo = {
   track: l(o.black, 15),
   indicator: o.black
-}, zt = (e) => xo[e] ?? xo.md, ll = He`
+}, zt = (e) => $o[e] ?? $o.md, ll = He`
   0% {
     transform: rotate(0deg);
   }
@@ -4388,7 +4408,7 @@ const Tn = (e) => {
   border-top-color: ${yo.indicator};
   border-radius: 50%;
   animation: ${ll} 0.8s linear infinite;
-`, cl = D("spinner"), xd = ({
+`, cl = D("spinner"), $d = ({
   "aria-label": e = "Loading",
   className: t,
   ref: r,
@@ -4479,11 +4499,11 @@ const Tn = (e) => {
       d && /* @__PURE__ */ s(fl, { className: tt("trend", r == null ? void 0 : r.trend), $variant: u, children: d })
     ]
   }
-), $l = p.div`
+), xl = p.div`
   display: flex;
   align-items: ${(e) => e.$orientation === "vertical" ? "flex-start" : "center"};
   flex-direction: ${(e) => e.$orientation === "vertical" ? "column" : "row"};
-`, xl = p.div`
+`, $l = p.div`
   display: flex;
   align-items: ${(e) => e.$orientation === "vertical" ? "flex-start" : "center"};
   flex-direction: ${(e) => e.$orientation === "vertical" ? "column" : "row"};
@@ -4566,21 +4586,21 @@ const Tn = (e) => {
 }) => {
   const u = re(() => a.findIndex((b) => b.value === c), [a, c]);
   return /* @__PURE__ */ s(
-    $l,
+    xl,
     {
       ...d,
       ref: n,
       $orientation: i,
       className: Me("container", e),
       children: a.map((b, h) => {
-        const f = b.value === c, x = h < u, C = h === a.length - 1;
-        return /* @__PURE__ */ P(xl, { $orientation: i, children: [
+        const f = b.value === c, $ = h < u, C = h === a.length - 1;
+        return /* @__PURE__ */ P($l, { $orientation: i, children: [
           /* @__PURE__ */ P(
             yl,
             {
               type: "button",
               $active: f,
-              $completed: x,
+              $completed: $,
               $clickable: !!r,
               onClick: () => r == null ? void 0 : r(b.value),
               className: Me("step", t == null ? void 0 : t.step),
@@ -4589,7 +4609,7 @@ const Tn = (e) => {
                   vl,
                   {
                     $active: f,
-                    $completed: x,
+                    $completed: $,
                     className: Me("circle", t == null ? void 0 : t.circle),
                     children: h + 1
                   }
@@ -4598,7 +4618,7 @@ const Tn = (e) => {
                   wl,
                   {
                     $active: f,
-                    $completed: x,
+                    $completed: $,
                     className: Me("label", t == null ? void 0 : t.label),
                     children: b.label
                   }
@@ -4609,7 +4629,7 @@ const Tn = (e) => {
           !C && /* @__PURE__ */ s(
             ml,
             {
-              $completed: x,
+              $completed: $,
               $orientation: i,
               className: Me("line", t == null ? void 0 : t.line)
             }
@@ -4752,23 +4772,23 @@ const Tn = (e) => {
   placeholder: b = "Add tag...",
   portalRenderNode: h,
   ref: f,
-  value: x,
+  value: $,
   variant: C = "normal",
   ...w
 }) => {
-  const v = U(null), y = U(null), $ = U(null), m = U(null), [g, T] = V(""), [N, L] = V(!1), [q, I] = V("bottom"), [F, O] = V({
+  const v = U(null), y = U(null), x = U(null), m = U(null), [g, T] = V(""), [N, L] = V(!1), [q, I] = V("bottom"), [F, O] = V({
     top: 0,
     left: 0,
     width: 0
   }), z = re(() => {
-    const R = u.filter((J) => !x.includes(J.value));
+    const R = u.filter((J) => !$.includes(J.value));
     if (!g.trim()) return R;
     const _ = g.toLowerCase().trim();
     return R.filter((J) => J.label.toLowerCase().includes(_));
-  }, [u, x, g]), H = N && u.length > 0, k = M(() => {
+  }, [u, $, g]), H = N && u.length > 0, k = M(() => {
     var Ve;
     if (!y.current) return;
-    const R = y.current.getBoundingClientRect(), _ = ((Ve = $.current) == null ? void 0 : Ve.offsetHeight) ?? 200, J = window.innerHeight - R.bottom - ot, Q = R.top - ot, we = J < _ && Q > J ? "top" : "bottom";
+    const R = y.current.getBoundingClientRect(), _ = ((Ve = x.current) == null ? void 0 : Ve.offsetHeight) ?? 200, J = window.innerHeight - R.bottom - ot, Q = R.top - ot, we = J < _ && Q > J ? "top" : "bottom";
     if (I(we), h) {
       const ct = we === "bottom" ? R.bottom + ot : R.top - _ - ot;
       O({
@@ -4787,9 +4807,9 @@ const Tn = (e) => {
   const A = M(
     (R) => {
       const _ = R.trim();
-      return !_ || x.includes(_) ? !1 : (d([...x, _]), T(""), !0);
+      return !_ || $.includes(_) ? !1 : (d([...$, _]), T(""), !0);
     },
-    [x, d]
+    [$, d]
   ), E = (R) => {
     if (R.key === r && g.trim())
       if (R.preventDefault(), a)
@@ -4800,12 +4820,12 @@ const Tn = (e) => {
         );
         _ && A(_.value);
       }
-    else R.key === "Backspace" && !g && x.length > 0 && d(x.slice(0, -1));
+    else R.key === "Backspace" && !g && $.length > 0 && d($.slice(0, -1));
   }, B = (R) => {
     var _;
     A(R), (_ = m.current) == null || _.focus();
   }, W = (R) => {
-    d(x.filter((_) => _ !== R));
+    d($.filter((_) => _ !== R));
   }, Y = () => {
     var R;
     i || (R = m.current) == null || R.focus();
@@ -4826,7 +4846,7 @@ const Tn = (e) => {
           onClick: Y,
           className: ne("trigger", t == null ? void 0 : t.trigger),
           children: [
-            x.map((R) => /* @__PURE__ */ s(
+            $.map((R) => /* @__PURE__ */ s(
               It,
               {
                 deletable: !i,
@@ -4846,7 +4866,7 @@ const Tn = (e) => {
                 onFocus: () => L(!0),
                 onBlur: () => setTimeout(() => L(!1), 150),
                 onKeyDown: E,
-                placeholder: x.length === 0 ? b : "",
+                placeholder: $.length === 0 ? b : "",
                 disabled: i,
                 $disabled: i,
                 className: ne("input", t == null ? void 0 : t.input)
@@ -4859,7 +4879,7 @@ const Tn = (e) => {
         /* @__PURE__ */ s(
           Cl,
           {
-            ref: $,
+            ref: x,
             $open: H,
             $position: q,
             style: {
@@ -4885,7 +4905,7 @@ const Tn = (e) => {
       ) : /* @__PURE__ */ s(
         El,
         {
-          ref: $,
+          ref: x,
           $open: H,
           $position: q,
           className: ne("dropdown", t == null ? void 0 : t.dropdown),
@@ -5346,7 +5366,7 @@ const Tn = (e) => {
   variant: u = "dark",
   ...b
 }) => {
-  const [h, f] = V(!1), [x, C] = V(null), [w, v] = V(a), [y, $] = V({ top: 0, left: 0 }), m = U(null), g = U(null), T = M(() => {
+  const [h, f] = V(!1), [$, C] = V(null), [w, v] = V(a), [y, x] = V({ top: 0, left: 0 }), m = U(null), g = U(null), T = M(() => {
     var B, W;
     if (!m.current) return;
     const I = m.current.getBoundingClientRect(), F = ((B = g.current) == null ? void 0 : B.offsetWidth) ?? 100, O = ((W = g.current) == null ? void 0 : W.offsetHeight) ?? 30, z = I.top - ue, H = window.innerHeight - I.bottom - ue, k = I.left - ue, A = window.innerWidth - I.right - ue;
@@ -5370,7 +5390,7 @@ const Tn = (e) => {
           Y = 0, X = 0;
       }
       const R = 8;
-      X = Math.max(R, Math.min(X, window.innerWidth - F - R)), Y = Math.max(R, Math.min(Y, window.innerHeight - O - R)), $({ top: Y, left: X });
+      X = Math.max(R, Math.min(X, window.innerWidth - F - R)), Y = Math.max(R, Math.min(Y, window.innerHeight - O - R)), x({ top: Y, left: X });
     }
   }, [a, c]);
   lt(() => {
@@ -5382,7 +5402,7 @@ const Tn = (e) => {
     }, n);
     C(I);
   }, L = () => {
-    x && (clearTimeout(x), C(null)), f(!1);
+    $ && (clearTimeout($), C(null)), f(!1);
   }, q = c ? ve(
     /* @__PURE__ */ s(
       Ul,
@@ -5452,8 +5472,8 @@ export {
   Ao as Radio,
   gd as RadioCard,
   fd as RadioGroup,
-  $d as Select,
-  xd as Spinner,
+  xd as Select,
+  $d as Spinner,
   yd as StatusCard,
   vd as Stepper,
   md as Tabs,