@vacano/ui 1.10.0 → 1.11.0

package/dist/index.js

@@ -153,10 +153,10 @@ var Do = /^((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 y = h[0];
-      f.push(y[0]);
-      for (var z = h.length, $ = 1; $ < z; $++)
-        f.push(h[$], y[$]);
+      var $ = h[0];
+      f.push($[0]);
+      for (var z = h.length, y = 1; y < z; y++)
+        f.push(h[y], $[y]);
     }
     var x = Io(function(m, v, w) {
       var b = g && m.as || i, C = "", O = [], L = m;
@@ -565,9 +565,9 @@ const jo = p.span`
   onChange: g,
   onSearch: h,
   debounceMs: f = 300,
-  minChars: y = 1,
+  minChars: $ = 1,
   noResultsMessage: z = "No results found",
-  ...$
+  ...y
 }) => {
   const [x, m] = _((u == null ? void 0 : u.value) ?? ""), [v, w] = _([]), [b, C] = _(!1), [O, L] = _(!1), [W, I] = _(!1), Y = U(null), V = U(null);
   ne(() => {
@@ -575,7 +575,7 @@ const jo = p.span`
   }, [u == null ? void 0 : u.value]);
   const R = N(
     async (A) => {
-      if (A.length < y) {
+      if (A.length < $) {
         w([]), I(!1);
         return;
       }
@@ -589,7 +589,7 @@ const jo = p.span`
         C(!1);
       }
     },
-    [h, y]
+    [h, $]
   ), M = N(
     (A) => {
       const j = A.target.value;
@@ -624,7 +624,7 @@ const jo = p.span`
           /* @__PURE__ */ s(
             Go,
             {
-              ...$,
+              ...y,
               ref: a,
               type: "text",
               value: x,
@@ -905,13 +905,13 @@ const jo = p.span`
   keyBindings: g = [],
   size: h = "default",
   type: f = "button",
-  variant: y = "normal",
+  variant: $ = "normal",
   ...z
 }) => {
-  const $ = U(null);
-  Ao(u, () => $.current, []), vo(g, () => {
+  const y = U(null);
+  Ao(u, () => y.current, []), vo(g, () => {
     var m;
-    (m = $.current) == null || m.click();
+    (m = y.current) == null || m.click();
   });
   const x = te(() => {
     switch (f) {
@@ -926,11 +926,11 @@ const jo = p.span`
     {
       ...z,
       onClick: d,
-      ref: $,
+      ref: y,
       type: x,
       disabled: n,
       className: tr("container", t),
-      $variant: y,
+      $variant: $,
       $size: h,
       $fullWidth: !!i,
       $iconOnly: !!a && !(e || (g == null ? void 0 : g.length) > 0),
@@ -938,7 +938,7 @@ const jo = p.span`
         c && /* @__PURE__ */ s(ci, { $size: h }),
         a && !c && /* @__PURE__ */ s(li, { $size: h, children: a }),
         e && /* @__PURE__ */ s(di, { className: tr("label", o == null ? void 0 : o.label), children: e }),
-        /* @__PURE__ */ s(gi, { keys: g, variant: y === "system" ? "light" : "dark" })
+        /* @__PURE__ */ s(gi, { keys: g, variant: $ === "system" ? "light" : "dark" })
       ]
     }
   );
@@ -1311,7 +1311,7 @@ const jo = p.span`
   ...u
 }) => {
   const g = (h, f) => {
-    i(f ? [...d, h] : d.filter((y) => y !== h));
+    i(f ? [...d, h] : d.filter(($) => $ !== h));
   };
   return /* @__PURE__ */ S(Ei, { ...u, ref: c, className: $t("container", e), children: [
     n && /* @__PURE__ */ s(Ti, { className: $t("label", t == null ? void 0 : t.label), $disabled: o, children: n }),
@@ -1460,7 +1460,7 @@ const jo = p.span`
   align-items: center;
   gap: 8px;
 `, Bi = ({ confirmation: e, onDone: t }) => {
-  const [o, n] = _(!1), [i, a] = _(!1), { message: c, onConfirm: d, onCancel: u, options: g } = e, h = g.confirmLabel || Li, f = g.cancelLabel || Ai, y = N(
+  const [o, n] = _(!1), [i, a] = _(!1), { message: c, onConfirm: d, onCancel: u, options: g } = e, h = g.confirmLabel || Li, f = g.cancelLabel || Ai, $ = N(
     (x) => {
       n(!0), setTimeout(() => {
         x == null || x(), t();
@@ -1477,19 +1477,19 @@ const jo = p.span`
         a(!1);
       }
     }
-    y();
-  }, [y, d]), $ = N(() => {
-    i || y(u);
-  }, [y, i, u]);
+    $();
+  }, [$, d]), y = N(() => {
+    i || $(u);
+  }, [$, i, u]);
   return ne(() => {
     const x = (m) => {
-      m.key === "Escape" && !i && $();
+      m.key === "Escape" && !i && y();
     };
     return document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x);
-  }, [$, i]), /* @__PURE__ */ S(Di, { $isExiting: o, children: [
+  }, [y, i]), /* @__PURE__ */ S(Di, { $isExiting: o, children: [
     /* @__PURE__ */ s(Fi, { children: c }),
     /* @__PURE__ */ S(Mi, { children: [
-      /* @__PURE__ */ s(at, { variant: "system", size: "compact", onClick: $, disabled: i, children: f }),
+      /* @__PURE__ */ s(at, { variant: "system", size: "compact", onClick: y, disabled: i, children: f }),
       /* @__PURE__ */ s(at, { variant: "danger", size: "compact", onClick: z, loading: i, children: h })
     ] })
   ] });
@@ -1604,12 +1604,12 @@ const jo = p.span`
     focus: l(r.red, 30)
   }
 }, se = 36, ut = 2, ji = 12, Wi = (e, t, o = "en") => {
-  const n = e.getFullYear(), i = e.getMonth(), a = e.getDate(), c = e.getHours(), d = e.getMinutes(), u = e.getSeconds(), g = c % 12 || 12, h = c >= 12, f = new Intl.DateTimeFormat(o, { month: "long" }).format(e), y = new Intl.DateTimeFormat(o, { month: "short" }).format(e), z = new Intl.DateTimeFormat(o, { weekday: "long" }).format(e), $ = new Intl.DateTimeFormat(o, { weekday: "short" }).format(e), x = (C) => C.toString().padStart(2, "0"), m = (C) => C.toString().padStart(2, " "), v = (C) => `\0${C}\0`, w = [
+  const n = e.getFullYear(), i = e.getMonth(), a = e.getDate(), c = e.getHours(), d = e.getMinutes(), u = e.getSeconds(), g = c % 12 || 12, h = c >= 12, f = new Intl.DateTimeFormat(o, { month: "long" }).format(e), $ = new Intl.DateTimeFormat(o, { month: "short" }).format(e), z = new Intl.DateTimeFormat(o, { weekday: "long" }).format(e), y = new Intl.DateTimeFormat(o, { weekday: "short" }).format(e), x = (C) => C.toString().padStart(2, "0"), m = (C) => C.toString().padStart(2, " "), v = (C) => `\0${C}\0`, w = [
     ["2006", "YEARFOUR", n.toString()],
     ["January", "MONTHLONG", f],
     ["Monday", "WEEKDAYLONG", z],
-    ["Jan", "MONTHSHORT", y],
-    ["Mon", "WEEKDAYSHORT", $],
+    ["Jan", "MONTHSHORT", $],
+    ["Mon", "WEEKDAYSHORT", y],
     ["06", "YEARTWO", n.toString().slice(-2)],
     ["01", "MONTHPAD", x(i + 1)],
     ["_2", "DAYSPACE", m(a)],
@@ -1921,9 +1921,9 @@ const jo = p.span`
   size: g = "default",
   variant: h = "normal",
   disabled: f = !1,
-  fullWidth: y = !1,
+  fullWidth: $ = !1,
   label: z,
-  portalRenderNode: $,
+  portalRenderNode: y,
   open: x,
   onOpen: m,
   onClose: v,
@@ -1939,14 +1939,14 @@ const jo = p.span`
     var Ne;
     if (!T.current) return;
     const P = T.current.getBoundingClientRect(), X = ((Ne = B.current) == null ? void 0 : Ne.offsetHeight) ?? xn, Re = window.innerHeight - P.bottom - Ke, Ue = P.top - Ke, ke = Re < X && Ue > Re ? "top" : "bottom";
-    if (M(ke), $) {
+    if (M(ke), y) {
       const qe = ke === "bottom" ? P.bottom + Ke : P.top - X - Ke;
       V({
         top: qe,
         left: P.left
       });
     }
-  }, [$]), Wt = N(() => {
+  }, [y]), Wt = N(() => {
     if (f) return;
     J || I(!0), m == null || m(), D(o === "year" ? "years" : o === "month" ? "months" : "days");
     const P = e ?? L;
@@ -1998,18 +1998,18 @@ const jo = p.span`
   }, [Q, Ce]), ne(() => {
     const P = (ke) => {
       const Ne = ke.target, qe = q.current && !q.current.contains(Ne), $o = B.current && !B.current.contains(Ne);
-      $ ? qe && $o && re() : qe && re();
+      y ? qe && $o && re() : qe && re();
     }, X = (ke) => {
       ke.key === "Escape" && re();
     }, Re = () => {
-      Q && $ && Ce();
+      Q && y && Ce();
     }, Ue = () => {
-      Q && $ && Ce();
+      Q && y && Ce();
     };
-    return Q && (document.addEventListener("mousedown", P), document.addEventListener("keydown", X), $ && (window.addEventListener("scroll", Re, !0), window.addEventListener("resize", Ue))), () => {
+    return Q && (document.addEventListener("mousedown", P), document.addEventListener("keydown", X), y && (window.addEventListener("scroll", Re, !0), window.addEventListener("resize", Ue))), () => {
       document.removeEventListener("mousedown", P), document.removeEventListener("keydown", X), window.removeEventListener("scroll", Re, !0), window.removeEventListener("resize", Ue);
     };
-  }, [Q, re, $, Ce]);
+  }, [Q, re, y, Ce]);
   const ho = nt[g].iconSize, go = () => /* @__PURE__ */ S(it, { children: [
     /* @__PURE__ */ S(vt, { className: ee("header", b == null ? void 0 : b.header), children: [
       /* @__PURE__ */ s(wt, { onClick: Xt, type: "button", children: new Intl.DateTimeFormat(a, { month: "long", year: "numeric" }).format(E) }),
@@ -2104,7 +2104,7 @@ const jo = p.span`
       case "years":
         return fo();
     }
-  }, xo = $ ? we(
+  }, xo = y ? we(
     /* @__PURE__ */ s(
       ln,
       {
@@ -2116,7 +2116,7 @@ const jo = p.span`
         children: Ut()
       }
     ),
-    $
+    y
   ) : /* @__PURE__ */ s(
     an,
     {
@@ -2132,7 +2132,7 @@ const jo = p.span`
     {
       ...O,
       ref: C ?? q,
-      $fullWidth: y,
+      $fullWidth: $,
       className: ee("container", w),
       children: [
         z && /* @__PURE__ */ s(tn, { children: z }),
@@ -2274,7 +2274,7 @@ const jo = p.span`
   trigger: h,
   ...f
 }) => {
-  const [y, z] = _(!1), [$, x] = _({ top: 0, left: 0 }), [m, v] = _("bottom"), w = U(null), b = U(null), C = U(null), O = d !== void 0, L = O ? d : y, W = N(() => {
+  const [$, z] = _(!1), [y, x] = _({ top: 0, left: 0 }), [m, v] = _("bottom"), w = U(null), b = U(null), C = U(null), O = d !== void 0, L = O ? d : $, W = N(() => {
     var H, q;
     if (!b.current) return;
     const M = b.current.getBoundingClientRect(), k = ((H = C.current) == null ? void 0 : H.offsetHeight) ?? Pn, D = ((q = C.current) == null ? void 0 : q.offsetWidth) ?? 160, E = window.innerHeight - M.bottom - Je, A = M.top - Je, j = E < k && A > E ? "top" : "bottom";
@@ -2319,7 +2319,7 @@ const jo = p.span`
         $open: L,
         $position: m,
         className: Ze("content", i == null ? void 0 : i.content),
-        style: { top: $.top, left: $.left },
+        style: { top: y.top, left: y.left },
         onClick: V,
         children: o
       }
@@ -2392,26 +2392,26 @@ const jo = p.span`
   const [d, u] = _(!1), g = U(null), h = U(null), f = N(() => {
     var x;
     u(!1);
-    const $ = ((x = h.current) == null ? void 0 : x.textContent) || "";
-    $ !== e && t($);
+    const y = ((x = h.current) == null ? void 0 : x.textContent) || "";
+    y !== e && t(y);
   }, [t, e]);
   ne(() => {
     if (d && h.current) {
       h.current.focus();
-      const $ = document.createRange(), x = window.getSelection();
-      $.selectNodeContents(h.current), $.collapse(!1), x == null || x.removeAllRanges(), x == null || x.addRange($);
+      const y = document.createRange(), x = window.getSelection();
+      y.selectNodeContents(h.current), y.collapse(!1), x == null || x.removeAllRanges(), x == null || x.addRange(y);
     }
   }, [d]), ne(() => {
     if (!d) return;
-    const $ = (x) => {
+    const y = (x) => {
       g.current && !g.current.contains(x.target) && f();
     };
-    return document.addEventListener("mousedown", $), () => document.removeEventListener("mousedown", $);
+    return document.addEventListener("mousedown", y), () => document.removeEventListener("mousedown", y);
   }, [d, f]);
-  const y = () => {
+  const $ = () => {
     o || u(!0);
-  }, z = ($) => {
-    $.key === "Enter" && $.metaKey ? ($.preventDefault(), f()) : $.key === "Escape" && (h.current && (h.current.textContent = e), u(!1));
+  }, z = (y) => {
+    y.key === "Enter" && y.metaKey ? (y.preventDefault(), f()) : y.key === "Escape" && (h.current && (h.current.textContent = e), u(!1));
   };
   return /* @__PURE__ */ S(En, { ref: g, className: i, "data-test-id": c, children: [
     /* @__PURE__ */ s(
@@ -2432,7 +2432,7 @@ const jo = p.span`
         type: "button",
         className: a == null ? void 0 : a.button,
         $disabled: o && !d,
-        onClick: d ? f : y,
+        onClick: d ? f : $,
         disabled: o && !d,
         "aria-label": d ? "Save" : "Edit",
         children: d ? /* @__PURE__ */ s(Yt, { size: 16 }) : /* @__PURE__ */ s(Co, { size: 14 })
@@ -2897,9 +2897,9 @@ const ea = (e) => {
   config: { ...Ft.config, ...e },
   css: Jn(t)
 }), ra = (e, t) => {
-  var y;
+  var $;
   const o = e(), n = document.querySelector(
-    `.${(y = o.css) == null ? void 0 : y.body[0]}`
+    `.${($ = o.css) == null ? void 0 : $.body[0]}`
   );
   if (!n)
     return o.frame;
@@ -3047,7 +3047,7 @@ const na = (e) => {
   const n = $e("previewImage", t.css);
   n && (n.style.marginLeft = `-${e.left}px`, n.style.marginTop = `-${e.top}px`);
 }, kt = 1, Ca = (e) => {
-  var z, $;
+  var z, y;
   const t = e(), o = document.createElement("canvas"), n = t.frame.width || kt, i = t.frame.height || kt, a = t.sourceWidth / n, c = t.sourceHeight / i, d = t.portal.left * a, u = t.portal.top * c, g = Math.max(
     t.portal.size * Math.min(a, c),
     kt
@@ -3056,7 +3056,7 @@ const na = (e) => {
   const f = document.querySelector(
     `.${(z = t.css) == null ? void 0 : z.sourceImage[0]}`
   );
-  f && (($ = o.getContext("2d")) == null || $.drawImage(
+  f && ((y = o.getContext("2d")) == null || y.drawImage(
     f,
     d,
     u,
@@ -3067,7 +3067,7 @@ const na = (e) => {
     h,
     h
   ));
-  const y = o.toDataURL(
+  const $ = o.toDataURL(
     `image/${t.config.type}`,
     t.config.compression
   );
@@ -3083,7 +3083,7 @@ const na = (e) => {
             );
             return;
           }
-          x([y, v]);
+          x([$, v]);
         },
         `image/${t.config.type}`,
         t.config.compression
@@ -3095,8 +3095,8 @@ const na = (e) => {
 }, Ra = (e, t, o) => {
   const { emitted: n, portal: i, frame: a, config: c } = t();
   let d = n.left - n.X + e.clientX, u = n.top - n.Y + e.clientY;
-  const g = c.framePadding, h = a.width - c.framePadding - i.size, f = c.framePadding, y = a.height - c.framePadding - i.size;
-  d < g && (d = g), d > h && (d = h), u < f && (u = f), u > y && (u = y), o({
+  const g = c.framePadding, h = a.width - c.framePadding - i.size, f = c.framePadding, $ = a.height - c.framePadding - i.size;
+  d < g && (d = g), d > h && (d = h), u < f && (u = f), u > $ && (u = $), o({
     portal: {
       ...i,
       left: d,
@@ -3127,24 +3127,24 @@ const na = (e) => {
     }
     case de.RESIZE_TL: {
       const h = Math.min(u, g);
-      let f = i.size - h, y = i.left + h, z = i.top + h;
+      let f = i.size - h, $ = i.left + h, z = i.top + h;
       if (f < d.minPortalSize) {
-        const $ = i.size - d.minPortalSize;
-        f = d.minPortalSize, y = i.left + $, z = i.top + $;
+        const y = i.size - d.minPortalSize;
+        f = d.minPortalSize, $ = i.left + y, z = i.top + y;
       }
       if (z < d.framePadding) {
-        const $ = d.framePadding - z;
-        z = d.framePadding, y = y + $, f = f - $;
+        const y = d.framePadding - z;
+        z = d.framePadding, $ = $ + y, f = f - y;
       }
-      if (y < d.framePadding) {
-        const $ = d.framePadding - y;
-        y = d.framePadding, z = z + $, f = f - $;
+      if ($ < d.framePadding) {
+        const y = d.framePadding - $;
+        $ = d.framePadding, z = z + y, f = f - y;
       }
       return o({
         portal: {
           ...a,
           top: z,
-          left: y,
+          left: $,
           size: f
         }
       });
@@ -3189,13 +3189,13 @@ const na = (e) => {
     pageY: t.pageY
   };
 }, Ia = (e, t) => {
-  var y, z, $;
+  var $, z, y;
   const o = e(), n = document.querySelector(
-    `.${(y = o.css) == null ? void 0 : y.portal[0]}`
+    `.${($ = o.css) == null ? void 0 : $.portal[0]}`
   ), i = document.querySelector(
     `.${(z = o.css) == null ? void 0 : z.portalArea[0]}`
   ), a = document.querySelector(
-    `.${($ = o.css) == null ? void 0 : $.root[0]}`
+    `.${(y = o.css) == null ? void 0 : y.root[0]}`
   );
   let c = null, d = null;
   const u = (x) => {
@@ -3272,14 +3272,14 @@ const na = (e) => {
     return;
   }
   const f = new FileReader();
-  let y = null;
+  let $ = null;
   const z = () => {
     var b;
     const v = t(), w = document.querySelector(
       `.${(b = v.css) == null ? void 0 : b.root[0]}`
     );
-    w && (w.remove(), document.removeEventListener("keydown", $), y == null || y(), za(), a(), o(Ft));
-  }, $ = (v) => {
+    w && (w.remove(), document.removeEventListener("keydown", y), $ == null || $(), za(), a(), o(Ft));
+  }, y = (v) => {
     v.key === "Escape" && t().sourceBase64 && x(v);
   }, x = (v) => {
     v.preventDefault(), z();
@@ -3313,7 +3313,7 @@ const na = (e) => {
         sourceBase64: (O = v.target) == null ? void 0 : O.result,
         sourceHeight: w.height,
         sourceWidth: w.width
-      }), y = Ia(t, o), document.addEventListener("keydown", $);
+      }), $ = Ia(t, o), document.addEventListener("keydown", y);
     };
   }, f.onerror = () => {
     d("Failed to read file");
@@ -3422,8 +3422,8 @@ const na = (e) => {
   } = e, f = U(null);
   return { open: N(() => {
     f.current || (Da(), f.current = Oa(
-      (z, $, x) => {
-        $ && (c == null || c({ base64: z, blob: $, state: x }));
+      (z, y, x) => {
+        y && (c == null || c({ base64: z, blob: y, state: x }));
       },
       {
         portalSize: g,
@@ -3465,9 +3465,9 @@ const na = (e) => {
   onError: g,
   outputSize: h,
   portalSize: f,
-  previewSize: y = 120,
+  previewSize: $ = 120,
   ref: z,
-  type: $,
+  type: y,
   value: x,
   ...m
 }) => {
@@ -3483,17 +3483,17 @@ const na = (e) => {
     onError: g,
     outputSize: h,
     portalSize: f,
-    type: $
+    type: y
   });
   return /* @__PURE__ */ S(Ln, { ...m, ref: z, className: St("container", i), children: [
-    /* @__PURE__ */ s(An, { $size: y, className: St("preview", a == null ? void 0 : a.preview), children: v ? /* @__PURE__ */ s("img", { src: v, alt: "Preview" }) : /* @__PURE__ */ s(On, { children: "No image" }) }),
+    /* @__PURE__ */ s(An, { $size: $, className: St("preview", a == null ? void 0 : a.preview), children: v ? /* @__PURE__ */ s("img", { src: v, alt: "Preview" }) : /* @__PURE__ */ s(On, { children: "No image" }) }),
     /* @__PURE__ */ s(
       at,
       {
         variant: "system",
         onClick: b,
         className: St("button", a == null ? void 0 : a.button),
-        style: { width: y },
+        style: { width: $ },
         children: o
       }
     )
@@ -3745,11 +3745,11 @@ const na = (e) => {
   placeholder: g = "Select...",
   ref: h,
   searchPlaceholder: f = "Search...",
-  value: y,
+  value: $,
   variant: z = "normal",
-  ...$
+  ...y
 }) => {
-  const [x, m] = _(!1), [v, w] = _(""), b = te(() => u.filter((R) => y.includes(R.value)), [u, y]), C = te(() => {
+  const [x, m] = _(!1), [v, w] = _(""), b = te(() => u.filter((R) => $.includes(R.value)), [u, $]), C = te(() => {
     if (!v.trim()) return u;
     const R = v.toLowerCase().trim();
     return u.filter((M) => M.label.toLowerCase().includes(R));
@@ -3758,11 +3758,11 @@ const na = (e) => {
   }, I = () => {
     m(!1), w("");
   }, Y = (R) => {
-    y.includes(R) ? d(y.filter((M) => M !== R)) : d([...y, R]);
+    $.includes(R) ? d($.filter((M) => M !== R)) : d([...$, R]);
   }, V = (R) => {
-    d(y.filter((M) => M !== R));
+    d($.filter((M) => M !== R));
   };
-  return /* @__PURE__ */ S(Ua, { ...$, ref: h, className: ae("container", e), children: [
+  return /* @__PURE__ */ S(Ua, { ...y, ref: h, className: ae("container", e), children: [
     i && /* @__PURE__ */ s(qa, { $variant: z, className: ae("label", t == null ? void 0 : t.trigger), children: i }),
     /* @__PURE__ */ s(
       Ga,
@@ -3826,7 +3826,7 @@ const na = (e) => {
             /* @__PURE__ */ s(
               Ht,
               {
-                checked: y.includes(R.value),
+                checked: $.includes(R.value),
                 disabled: R.disabled,
                 onChange: () => Y(R.value)
               }
@@ -4098,14 +4098,14 @@ const na = (e) => {
   variant: h = "normal",
   ...f
 }) => {
-  const y = U([]);
+  const $ = U([]);
   ne(() => {
-    e && y.current[0] && y.current[0].focus();
+    e && $.current[0] && $.current[0].focus();
   }, [e]);
   const z = N((v) => {
-    const w = y.current[v];
+    const w = $.current[v];
     w && (w.focus(), w.select());
-  }, []), $ = N(
+  }, []), y = N(
     (v, w) => {
       const C = w.target.value.replace(/\D/g, "").slice(-1);
       if (!C) return;
@@ -4144,7 +4144,7 @@ const na = (e) => {
       fl,
       {
         ref: (b) => {
-          y.current[w] = b;
+          $.current[w] = b;
         },
         type: "text",
         inputMode: "numeric",
@@ -4152,7 +4152,7 @@ const na = (e) => {
         maxLength: 2,
         disabled: n,
         value: g[w] ?? "",
-        onChange: (b) => $(w, b),
+        onChange: (b) => y(w, b),
         onKeyDown: (b) => x(w, b),
         onPaste: m,
         onFocus: (b) => b.target.select(),
@@ -4767,6 +4767,13 @@ const na = (e) => {
   &:hover:not(:disabled) {
     background: ${l(r.black, 8)};
   }
+
+  & > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
 `, Ul = p.span`
   display: flex;
   align-items: center;
@@ -4786,10 +4793,10 @@ const na = (e) => {
   ref: g,
   size: h = "default",
   value: f,
-  variant: y = "normal",
+  variant: $ = "normal",
   ...z
 }) => {
-  const [$, x] = _(!1), [m, v] = _({
+  const [y, x] = _(!1), [m, v] = _({
     top: 0,
     left: 0,
     width: 0
@@ -4810,12 +4817,12 @@ const na = (e) => {
     var D;
     a == null || a(k), x(!1), (D = b.current) == null || D.focus();
   }, V = (k) => {
-    o || (k.key === "Enter" || k.key === " " ? (k.preventDefault(), x((D) => !D)) : k.key === "Escape" && $ ? (k.preventDefault(), x(!1)) : k.key === "ArrowDown" && !$ && (k.preventDefault(), x(!0)));
+    o || c.length === 0 || (k.key === "Enter" || k.key === " " ? (k.preventDefault(), x((D) => !D)) : k.key === "Escape" && y ? (k.preventDefault(), x(!1)) : k.key === "ArrowDown" && !y && (k.preventDefault(), x(!0)));
   };
   pt(() => {
-    $ && u && I();
-  }, [$, u, L, c.length]), ne(() => {
-    if (!$) return;
+    y && u && I();
+  }, [y, u, L, c.length]), ne(() => {
+    if (!y) return;
     const k = (A) => {
       const j = A.target, H = w.current && !w.current.contains(j), q = C.current && !C.current.contains(j);
       u ? H && q && x(!1) : H && x(!1);
@@ -4827,7 +4834,7 @@ const na = (e) => {
     return document.addEventListener("mousedown", k), u && (window.addEventListener("scroll", D, !0), window.addEventListener("resize", E)), () => {
       document.removeEventListener("mousedown", k), window.removeEventListener("scroll", D, !0), window.removeEventListener("resize", E);
     };
-  }, [$, u]);
+  }, [y, u]);
   const R = () => c.map((k) => /* @__PURE__ */ S(
     Xl,
     {
@@ -4881,29 +4888,36 @@ const na = (e) => {
       $fullWidth: n,
       className: Pe("container", e),
       children: [
-        i && /* @__PURE__ */ s(Bl, { className: Pe("label", t == null ? void 0 : t.label), children: i }),
+        i && /* @__PURE__ */ s(
+          Bl,
+          {
+            variant: $ === "error" ? "error" : "normal",
+            className: Pe("label", t == null ? void 0 : t.label),
+            children: i
+          }
+        ),
         /* @__PURE__ */ S(
           Yl,
           {
             ref: b,
             type: "button",
             $size: h,
-            $variant: y,
+            $variant: $,
             $disabled: o,
             $hasValue: !!O,
             disabled: o,
-            onClick: () => !o && x((k) => !k),
+            onClick: () => !o && c.length > 0 && x((k) => !k),
             onKeyDown: V,
             "aria-haspopup": "listbox",
-            "aria-expanded": $,
+            "aria-expanded": y,
             className: Pe("trigger", t == null ? void 0 : t.trigger),
             children: [
               /* @__PURE__ */ s(Vl, { children: (O == null ? void 0 : O.label) ?? d }),
-              /* @__PURE__ */ s(Hl, { $open: $, children: /* @__PURE__ */ s(_r, { size: 16 }) })
+              /* @__PURE__ */ s(Hl, { $open: y, children: /* @__PURE__ */ s(_r, { size: 16 }) })
             ]
           }
         ),
-        $ && M
+        y && M
       ]
     }
   );
@@ -5067,14 +5081,14 @@ const na = (e) => {
       $orientation: n,
       className: Ye("container", e),
       children: a.map((g, h) => {
-        const f = g.value === c, y = h < u, z = h === a.length - 1;
+        const f = g.value === c, $ = h < u, z = h === a.length - 1;
         return /* @__PURE__ */ S(rd, { $orientation: n, children: [
           /* @__PURE__ */ S(
             od,
             {
               type: "button",
               $active: f,
-              $completed: y,
+              $completed: $,
               $clickable: !!o,
               onClick: () => o == null ? void 0 : o(g.value),
               className: Ye("step", t == null ? void 0 : t.step),
@@ -5083,7 +5097,7 @@ const na = (e) => {
                   id,
                   {
                     $active: f,
-                    $completed: y,
+                    $completed: $,
                     className: Ye("circle", t == null ? void 0 : t.circle),
                     children: h + 1
                   }
@@ -5092,7 +5106,7 @@ const na = (e) => {
                   nd,
                   {
                     $active: f,
-                    $completed: y,
+                    $completed: $,
                     className: Ye("label", t == null ? void 0 : t.label),
                     children: g.label
                   }
@@ -5103,7 +5117,7 @@ const na = (e) => {
           !z && /* @__PURE__ */ s(
             ad,
             {
-              $completed: y,
+              $completed: $,
               $orientation: n,
               className: Ye("line", t == null ? void 0 : t.line)
             }
@@ -5246,20 +5260,20 @@ const na = (e) => {
   placeholder: g = "Add tag...",
   portalRenderNode: h,
   ref: f,
-  value: y,
+  value: $,
   variant: z = "normal",
-  ...$
+  ...y
 }) => {
   const x = U(null), m = U(null), v = U(null), w = U(null), [b, C] = _(""), [O, L] = _(!1), [W, I] = _("bottom"), [Y, V] = _({
     top: 0,
     left: 0,
     width: 0
   }), R = te(() => {
-    const T = u.filter((J) => !y.includes(J.value));
+    const T = u.filter((J) => !$.includes(J.value));
     if (!b.trim()) return T;
     const B = b.toLowerCase().trim();
     return T.filter((J) => J.label.toLowerCase().includes(B));
-  }, [u, y, b]), M = O && u.length > 0, k = N(() => {
+  }, [u, $, b]), M = O && u.length > 0, k = N(() => {
     var We;
     if (!m.current) return;
     const T = m.current.getBoundingClientRect(), B = ((We = v.current) == null ? void 0 : We.offsetHeight) ?? 200, J = window.innerHeight - T.bottom - ot, Q = T.top - ot, me = J < B && Q > J ? "top" : "bottom";
@@ -5281,9 +5295,9 @@ const na = (e) => {
   const D = N(
     (T) => {
       const B = T.trim();
-      return !B || y.includes(B) ? !1 : (d([...y, B]), C(""), !0);
+      return !B || $.includes(B) ? !1 : (d([...$, B]), C(""), !0);
     },
-    [y, d]
+    [$, d]
   ), E = (T) => {
     if (T.key === o && b.trim())
       if (T.preventDefault(), a)
@@ -5294,12 +5308,12 @@ const na = (e) => {
         );
         B && D(B.value);
       }
-    else T.key === "Backspace" && !b && y.length > 0 && d(y.slice(0, -1));
+    else T.key === "Backspace" && !b && $.length > 0 && d($.slice(0, -1));
   }, A = (T) => {
     var B;
     D(T), (B = w.current) == null || B.focus();
   }, j = (T) => {
-    d(y.filter((B) => B !== T));
+    d($.filter((B) => B !== T));
   }, H = () => {
     var T;
     n || (T = w.current) == null || T.focus();
@@ -5307,7 +5321,7 @@ const na = (e) => {
     const B = u.find((J) => J.value === T);
     return (B == null ? void 0 : B.label) ?? T;
   };
-  return /* @__PURE__ */ S(ld, { ...$, ref: f, className: le("container", e), children: [
+  return /* @__PURE__ */ S(ld, { ...y, ref: f, className: le("container", e), children: [
     c && /* @__PURE__ */ s(dd, { $variant: z, className: le("label"), children: c }),
     /* @__PURE__ */ S("div", { ref: x, style: { position: "relative" }, children: [
       /* @__PURE__ */ S(
@@ -5320,7 +5334,7 @@ const na = (e) => {
           onClick: H,
           className: le("trigger", t == null ? void 0 : t.trigger),
           children: [
-            y.map((T) => /* @__PURE__ */ s(
+            $.map((T) => /* @__PURE__ */ s(
               Dt,
               {
                 deletable: !n,
@@ -5340,7 +5354,7 @@ const na = (e) => {
                 onFocus: () => L(!0),
                 onBlur: () => setTimeout(() => L(!1), 150),
                 onKeyDown: E,
-                placeholder: y.length === 0 ? g : "",
+                placeholder: $.length === 0 ? g : "",
                 disabled: n,
                 $disabled: n,
                 className: le("input", t == null ? void 0 : t.input)
@@ -5662,7 +5676,7 @@ const na = (e) => {
   font-weight: 500;
   white-space: nowrap;
   margin-left: auto;
-`, Ar = ({ toast: e, onRemove: t }) => {
+`, Ar = ({ toast: e, onHide: t }) => {
   const [o, n] = _(!1), i = () => {
     n(!0), setTimeout(() => {
       t(e.id);
@@ -5679,17 +5693,17 @@ const na = (e) => {
     /* @__PURE__ */ s(md, { children: e.message }),
     /* @__PURE__ */ s(kd, { onClick: i, children: /* @__PURE__ */ s(dt, { style: { width: 16, height: 16 } }) })
   ] });
-}, Pd = ({ toasts: e, queueCount: t, removeToast: o }) => {
+}, Pd = ({ toasts: e, queueCount: t, onHide: o }) => {
   if (e.length === 0)
     return null;
   const n = e.length - 1;
   return /* @__PURE__ */ s(vd, { children: e.map((i, a) => a === n && t > 0 ? /* @__PURE__ */ S(Sd, { children: [
-    /* @__PURE__ */ s(Ar, { toast: i, onRemove: o }),
+    /* @__PURE__ */ s(Ar, { toast: i, onHide: o }),
     /* @__PURE__ */ S(zd, { children: [
       "+",
       t
     ] })
-  ] }, i.id) : /* @__PURE__ */ s(Ar, { toast: i, onRemove: o }, i.id)) });
+  ] }, i.id) : /* @__PURE__ */ s(Ar, { toast: i, onHide: o }, i.id)) });
 }, bc = ({ children: e }) => {
   const [t, o] = Dr($d, yd), n = N(
     (a, c = "default", d) => {
@@ -5711,21 +5725,14 @@ const na = (e) => {
       payload: a
     });
   }, []);
-  return /* @__PURE__ */ S(Jr.Provider, { value: { addToast: n, removeToast: i }, children: [
+  return /* @__PURE__ */ S(Jr.Provider, { value: { show: n, hide: i }, children: [
     e,
-    /* @__PURE__ */ s(
-      Pd,
-      {
-        toasts: t.toasts,
-        queueCount: t.queue.length,
-        removeToast: i
-      }
-    )
+    /* @__PURE__ */ s(Pd, { toasts: t.toasts, queueCount: t.queue.length, onHide: i })
   ] });
 }, fc = () => {
   const e = st(Jr);
   if (!e)
-    throw new Error("useToast must be used within ToastProvider");
+    throw new Error("useToastr must be used within ToastProvider");
   return e;
 }, Or = {
   dark: {
@@ -5869,6 +5876,7 @@ const na = (e) => {
 `, Cd = p.div`
   position: relative;
   display: inline-block;
+  width: fit-content;
 `, Rd = (e) => {
   switch (e) {
     case "top":
@@ -5917,7 +5925,7 @@ const na = (e) => {
   variant: u = "dark",
   ...g
 }) => {
-  const [h, f] = _(!1), [y, z] = _(null), [$, x] = _(a), [m, v] = _({ top: 0, left: 0 }), w = U(null), b = U(null), C = N(() => {
+  const [h, f] = _(!1), [$, z] = _(null), [y, x] = _(a), [m, v] = _({ top: 0, left: 0 }), w = U(null), b = U(null), C = N(() => {
     var A, j;
     if (!w.current) return;
     const I = w.current.getBoundingClientRect(), Y = ((A = b.current) == null ? void 0 : A.offsetWidth) ?? 100, V = ((j = b.current) == null ? void 0 : j.offsetHeight) ?? 30, R = I.top - be, M = window.innerHeight - I.bottom - be, k = I.left - be, D = window.innerWidth - I.right - be;
@@ -5953,14 +5961,14 @@ const na = (e) => {
     }, i);
     z(I);
   }, L = () => {
-    y && (clearTimeout(y), z(null)), f(!1);
+    $ && (clearTimeout($), z(null)), f(!1);
   }, W = c ? we(
     /* @__PURE__ */ s(
       Id,
       {
         ref: b,
         className: At("content", o == null ? void 0 : o.content),
-        $placement: $,
+        $placement: y,
         $variant: u,
         $visible: h,
         style: { top: m.top, left: m.left },
@@ -5973,7 +5981,7 @@ const na = (e) => {
     {
       ref: b,
       className: At("content", o == null ? void 0 : o.content),
-      $placement: $,
+      $placement: y,
       $variant: u,
       $visible: h,
       children: n
@@ -6056,6 +6064,6 @@ export {
   vo as useKeyBinding,
   tc as useNotification,
   dc as useSaveProgress,
-  fc as useToast
+  fc as useToastr
 };
 //# sourceMappingURL=index.js.map