chordia-ui 3.7.0 → 3.7.2

package/dist/Toast.es.js

@@ -1,29 +1,29 @@
-import { jsxs as s, jsx as e, Fragment as E } from "react/jsx-runtime";
-import A, { useState as v, useRef as F, useEffect as k, useMemo as L, useCallback as Z } from "react";
-import { AnimatePresence as M, motion as D } from "motion/react";
-import { MessageCircleQuestion as O, History as N, Search as K, X as I, PlusCircle as Y, FolderCheck as V, CircleCheck as R, Info as Q, OctagonAlert as U, AlertTriangle as X } from "lucide-react";
-import { C as $ } from "./ChartRenderer.es.js";
-import { T as _ } from "./TextInput.es.js";
-import { S as W } from "./SmallButton.es.js";
-function q({ size: t = 48, isHovered: i = !1 }) {
-  return /* @__PURE__ */ s(
+import { jsxs as d, jsx as e, Fragment as R } from "react/jsx-runtime";
+import Z, { useState as w, useRef as I, useEffect as E, useMemo as z, useCallback as j } from "react";
+import { motion as L, AnimatePresence as O } from "motion/react";
+import { MessageCircleQuestion as N, History as K, Search as V, X as T, PlusCircle as Y, FolderCheck as Q, CircleCheck as B, Info as U, OctagonAlert as X, AlertTriangle as $ } from "lucide-react";
+import { a as W, C as _ } from "./ChatMessage.es.js";
+import { T as q } from "./TextInput.es.js";
+import { S as G } from "./SmallButton.es.js";
+function J({ size: r = 48, isHovered: c = !1 }) {
+  return /* @__PURE__ */ d(
     "svg",
     {
-      width: t,
-      height: t,
+      width: r,
+      height: r,
       viewBox: "0 0 48 48",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       style: { flexShrink: 0, display: "block" },
       children: [
         /* @__PURE__ */ e(
-          D.rect,
+          L.rect,
           {
             width: "48",
             height: "48",
             fill: "#2E3236",
             initial: { rx: 12 },
-            animate: { rx: i ? 24 : 12 },
+            animate: { rx: c ? 24 : 12 },
             transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] }
           }
         ),
@@ -36,12 +36,12 @@ function q({ size: t = 48, isHovered: i = !1 }) {
     }
   );
 }
-function J({ size: t = 48 }) {
-  return /* @__PURE__ */ s(
+function P({ size: r = 48 }) {
+  return /* @__PURE__ */ d(
     "svg",
     {
-      width: t,
-      height: t,
+      width: r,
+      height: r,
       viewBox: "0 0 48 48",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -56,39 +56,47 @@ function J({ size: t = 48 }) {
     }
   );
 }
-function P({ onSend: t, onHistoryClick: i, messages: n = [], loading: a = !1, statusLabel: u }) {
-  const [l, d] = v(""), h = F(null), o = F(null);
-  k(() => {
-    h.current && (h.current.scrollTop = h.current.scrollHeight);
-  }, [n]), k(() => {
-    const r = o.current;
-    if (!r)
+function e1({ isOpen: r = !0, onSend: c, onHistoryClick: n, messages: f = [], loading: C = !1, statusLabel: h, onCodeBlockClick: g }) {
+  const [i, o] = w(""), l = I(null), y = I(null);
+  E(() => {
+    l.current && (l.current.scrollTop = l.current.scrollHeight);
+  }, [f]), E(() => {
+    const t = y.current;
+    if (!t)
       return;
-    r.style.height = "auto";
-    const y = 140;
-    r.style.height = Math.min(r.scrollHeight, y) + "px", r.style.overflowY = r.scrollHeight > y ? "auto" : "hidden";
-  }, [l]);
-  const C = () => {
-    const r = l.trim();
-    !r || a || (t == null || t(r), d(""));
-  }, g = (r) => {
-    if (r.key === "Enter") {
-      if (r.metaKey || r.ctrlKey || r.shiftKey)
+    t.style.height = "auto";
+    const s = 140;
+    t.style.height = Math.min(t.scrollHeight, s) + "px", t.style.overflowY = t.scrollHeight > s ? "auto" : "hidden";
+  }, [i]);
+  const u = () => {
+    const t = i.trim();
+    !t || C || (c == null || c(t), o(""));
+  }, x = (t) => {
+    if (t.key === "Enter") {
+      if (t.metaKey || t.ctrlKey || t.shiftKey)
         return;
-      r.preventDefault(), C();
+      t.preventDefault(), u();
     }
-  }, c = n.length > 0;
-  return /* @__PURE__ */ s(
-    D.div,
+  }, m = f.length > 0, b = {
+    alignSelf: "stretch",
+    marginTop: 8,
+    overflowX: "auto",
+    overflowY: "hidden",
+    flexShrink: 0
+  }, k = (t) => ({
+    width: t === "pie" || t === "donut" ? 500 : 460,
+    flexShrink: 0
+  });
+  return /* @__PURE__ */ d(
+    L.div,
     {
-      initial: { opacity: 0, y: 20, scale: 0.95 },
-      animate: { opacity: 1, y: 0, scale: 1 },
-      exit: { opacity: 0, y: 20, scale: 0.95 },
+      initial: !1,
+      animate: r ? { opacity: 1, y: 0, scale: 1, pointerEvents: "auto" } : { opacity: 0, y: 20, scale: 0.95, pointerEvents: "none" },
       transition: { type: "spring", stiffness: 400, damping: 30 },
       style: {
         display: "flex",
-        width: 360,
-        height: 709,
+        width: "min(360px, calc(100vw - 24px))",
+        height: "min(709px, calc(100dvh - 100px))",
         padding: 24,
         flexDirection: "column",
         justifyContent: "space-between",
@@ -98,7 +106,7 @@ function P({ onSend: t, onHistoryClick: i, messages: n = [], loading: a = !1, st
         boxSizing: "border-box"
       },
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ d(
           "div",
           {
             style: {
@@ -108,7 +116,7 @@ function P({ onSend: t, onHistoryClick: i, messages: n = [], loading: a = !1, st
               alignSelf: "stretch"
             },
             children: [
-              /* @__PURE__ */ s("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+              /* @__PURE__ */ d("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
                 /* @__PURE__ */ e(
                   "div",
                   {
@@ -122,7 +130,7 @@ function P({ onSend: t, onHistoryClick: i, messages: n = [], loading: a = !1, st
                       borderRadius: 9999,
                       background: "#F3F7F7"
                     },
-                    children: /* @__PURE__ */ e(O, { size: 20, style: { color: "var(--Grey-Strong, #2E3236)" } })
+                    children: /* @__PURE__ */ e(N, { size: 20, style: { color: "var(--Grey-Strong, #2E3236)" } })
                   }
                 ),
                 /* @__PURE__ */ e(
@@ -138,10 +146,10 @@ function P({ onSend: t, onHistoryClick: i, messages: n = [], loading: a = !1, st
                   }
                 )
               ] }),
-              /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: /* @__PURE__ */ s(
+              /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: /* @__PURE__ */ d(
                 "button",
                 {
-                  onClick: i,
+                  onClick: n,
                   style: {
                     display: "flex",
                     height: 28,
@@ -157,7 +165,7 @@ function P({ onSend: t, onHistoryClick: i, messages: n = [], loading: a = !1, st
                     boxSizing: "border-box"
                   },
                   children: [
-                    /* @__PURE__ */ e(N, { size: 16 }),
+                    /* @__PURE__ */ e(K, { size: 16 }),
                     /* @__PURE__ */ e("span", { style: { fontSize: 12, fontWeight: 500, lineHeight: "120%" }, children: "History" })
                   ]
                 }
@@ -165,88 +173,62 @@ function P({ onSend: t, onHistoryClick: i, messages: n = [], loading: a = !1, st
             ]
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ d(
           "div",
           {
-            ref: h,
+            ref: l,
             style: {
               flex: 1,
               display: "flex",
               flexDirection: "column",
-              justifyContent: c ? "flex-start" : "center",
-              alignItems: c ? "stretch" : "center",
+              justifyContent: m ? "flex-start" : "center",
+              alignItems: m ? "stretch" : "center",
               gap: 12,
               overflow: "auto",
               marginTop: 16,
               marginBottom: 16
             },
             children: [
-              c ? n.map((r, y) => {
-                var b;
-                return /* @__PURE__ */ s(A.Fragment, { children: [
+              m ? f.map((t, s) => {
+                var S;
+                const F = t.id ?? s;
+                return t.chartType && t.series ? /* @__PURE__ */ e("div", { style: b, children: /* @__PURE__ */ e("div", { style: k(t.chartType), children: /* @__PURE__ */ e(
+                  W,
+                  {
+                    chartType: t.chartType,
+                    title: t.title,
+                    xLabel: t.xLabel,
+                    yLabel: t.yLabel,
+                    series: t.series,
+                    compact: !0
+                  }
+                ) }) }, F) : /* @__PURE__ */ d(Z.Fragment, { children: [
                   /* @__PURE__ */ e(
-                    "div",
+                    _,
                     {
-                      style: {
-                        display: "flex",
-                        justifyContent: r.role === "user" ? "flex-end" : "flex-start"
-                      },
-                      children: /* @__PURE__ */ e(
-                        "div",
-                        {
-                          style: {
-                            maxWidth: "85%",
-                            padding: "10px 14px",
-                            borderRadius: r.role === "user" ? "14px 14px 4px 14px" : "14px 14px 14px 4px",
-                            background: r.role === "user" ? "var(--Rail-Surface-2, #E3E1D7)" : "#F3F7F7",
-                            fontSize: 14,
-                            fontWeight: 400,
-                            color: "var(--Grey-Strong, #2E3236)",
-                            lineHeight: "140%",
-                            whiteSpace: "pre-wrap",
-                            wordBreak: "break-word"
-                          },
-                          children: r.content
-                        }
-                      )
+                      role: t.role,
+                      content: t.content,
+                      html: t.html,
+                      timestamp: t.timestamp,
+                      toolBadges: t.toolBadges,
+                      isStreaming: t.isStreaming,
+                      onCodeBlockClick: g
                     }
                   ),
-                  (b = r.charts) == null ? void 0 : b.map((m, w) => /* @__PURE__ */ e(
-                    "div",
+                  (S = t.charts) == null ? void 0 : S.map((v, M) => /* @__PURE__ */ e("div", { style: b, children: /* @__PURE__ */ e("div", { style: k(v.chartType), children: /* @__PURE__ */ e(
+                    W,
                     {
-                      style: {
-                        width: "100%",
-                        marginTop: 8,
-                        overflowX: "auto",
-                        overflowY: "hidden"
-                      },
-                      children: /* @__PURE__ */ e(
-                        "div",
-                        {
-                          style: {
-                            width: 520,
-                            transform: "scale(0.85)",
-                            transformOrigin: "top left",
-                            marginBottom: -40
-                          },
-                          children: /* @__PURE__ */ e(
-                            $,
-                            {
-                              chartType: m.chartType,
-                              title: m.title,
-                              xLabel: m.xLabel,
-                              yLabel: m.yLabel,
-                              series: m.series
-                            }
-                          )
-                        }
-                      )
-                    },
-                    `chart-${w}`
-                  ))
-                ] }, y);
-              }) : /* @__PURE__ */ s(E, { children: [
-                /* @__PURE__ */ e(J, { size: 48 }),
+                      chartType: v.chartType,
+                      title: v.title,
+                      xLabel: v.xLabel,
+                      yLabel: v.yLabel,
+                      series: v.series,
+                      compact: !0
+                    }
+                  ) }) }, `chart-${M}`))
+                ] }, F);
+              }) : /* @__PURE__ */ d(R, { children: [
+                /* @__PURE__ */ e(P, { size: 48 }),
                 /* @__PURE__ */ e(
                   "span",
                   {
@@ -262,7 +244,7 @@ function P({ onSend: t, onHistoryClick: i, messages: n = [], loading: a = !1, st
                   }
                 )
               ] }),
-              a && /* @__PURE__ */ e("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ e(
+              C && /* @__PURE__ */ e("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ e(
                 "div",
                 {
                   style: {
@@ -272,13 +254,13 @@ function P({ onSend: t, onHistoryClick: i, messages: n = [], loading: a = !1, st
                     fontSize: 14,
                     color: "var(--Grey-Muted, #808183)"
                   },
-                  children: u || "Thinking..."
+                  children: h || "Thinking..."
                 }
               ) })
             ]
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ d(
           "div",
           {
             style: {
@@ -296,12 +278,12 @@ function P({ onSend: t, onHistoryClick: i, messages: n = [], loading: a = !1, st
               /* @__PURE__ */ e(
                 "textarea",
                 {
-                  ref: o,
-                  value: l,
-                  onChange: (r) => d(r.target.value),
-                  onKeyDown: g,
+                  ref: y,
+                  value: i,
+                  onChange: (t) => o(t.target.value),
+                  onKeyDown: x,
                   placeholder: "Ask a Question",
-                  disabled: a,
+                  disabled: C,
                   rows: 1,
                   style: {
                     flex: 1,
@@ -311,7 +293,7 @@ function P({ onSend: t, onHistoryClick: i, messages: n = [], loading: a = !1, st
                     fontSize: 15,
                     fontWeight: 400,
                     color: "var(--Base-Strong, #2E3236)",
-                    lineHeight: "1.4",
+                    lineHeight: "1",
                     resize: "none",
                     fontFamily: "inherit",
                     padding: 0,
@@ -324,8 +306,8 @@ function P({ onSend: t, onHistoryClick: i, messages: n = [], loading: a = !1, st
               /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: C,
-                  disabled: !l.trim() || a,
+                  onClick: u,
+                  disabled: !i.trim() || C,
                   style: {
                     display: "flex",
                     height: 28,
@@ -339,8 +321,8 @@ function P({ onSend: t, onHistoryClick: i, messages: n = [], loading: a = !1, st
                     color: "#fff",
                     fontSize: 12,
                     fontWeight: 500,
-                    cursor: l.trim() && !a ? "pointer" : "default",
-                    opacity: l.trim() && !a ? 1 : 0.4,
+                    cursor: i.trim() && !C ? "pointer" : "default",
+                    opacity: i.trim() && !C ? 1 : 0.4,
                     flexShrink: 0,
                     boxSizing: "border-box"
                   },
@@ -354,64 +336,63 @@ function P({ onSend: t, onHistoryClick: i, messages: n = [], loading: a = !1, st
     }
   );
 }
-function d1({
-  onSend: t,
-  onHistoryClick: i,
+function c1({
+  onSend: r,
+  onHistoryClick: c,
   messages: n = [],
-  loading: a = !1,
-  statusLabel: u,
-  className: l = ""
+  loading: f = !1,
+  statusLabel: C,
+  onCodeBlockClick: h,
+  className: g = ""
 }) {
-  const [d, h] = v(!1), [o, C] = v(!1), g = F(null);
-  return k(() => {
-    if (!o)
-      return;
-    const c = (r) => {
-      g.current && !g.current.contains(r.target) && C(!1);
-    };
-    return document.addEventListener("mousedown", c), () => document.removeEventListener("mousedown", c);
-  }, [o]), /* @__PURE__ */ s(
+  const [i, o] = w(!1), [l, y] = w(!1);
+  return /* @__PURE__ */ d(
     "div",
     {
-      ref: g,
-      className: l,
+      className: g,
       style: {
         position: "fixed",
-        bottom: 24,
-        right: 24,
+        bottom: "max(12px, env(safe-area-inset-bottom))",
+        right: "max(12px, env(safe-area-inset-right))",
         zIndex: 1e3,
         display: "flex",
         flexDirection: "column",
         alignItems: "flex-end",
-        gap: 12
+        gap: 12,
+        // Wrapper itself is transparent to clicks; only the FAB (and the panel when open)
+        // capture pointer events. This keeps page content underneath clickable when the
+        // panel is closed but still mounted.
+        pointerEvents: "none"
       },
       children: [
-        /* @__PURE__ */ e(M, { children: o && /* @__PURE__ */ e(
-          P,
+        /* @__PURE__ */ e(
+          e1,
           {
-            onSend: t,
-            onHistoryClick: i,
+            isOpen: l,
+            onSend: r,
+            onHistoryClick: c,
             messages: n,
-            loading: a,
-            statusLabel: u
+            loading: f,
+            statusLabel: C,
+            onCodeBlockClick: h
           }
-        ) }),
+        ),
         /* @__PURE__ */ e(
           "div",
           {
-            style: { width: 48, height: 48 },
-            onMouseEnter: () => h(!0),
-            onMouseLeave: () => h(!1),
-            children: /* @__PURE__ */ s(
-              D.button,
+            style: { width: 48, height: 48, pointerEvents: "auto" },
+            onMouseEnter: () => o(!0),
+            onMouseLeave: () => o(!1),
+            children: /* @__PURE__ */ d(
+              L.button,
               {
-                onClick: () => C((c) => !c),
+                onClick: () => y((u) => !u),
                 initial: !1,
                 animate: {
-                  width: d || o ? 166 : 48,
-                  height: d || o ? 56 : 48,
-                  borderRadius: d || o ? 30 : 12,
-                  background: d || o ? "var(--Rail-Surface-2, #E3E1D7)" : "rgba(0,0,0,0)"
+                  width: i || l ? 166 : 48,
+                  height: i || l ? 56 : 48,
+                  borderRadius: i || l ? 30 : 12,
+                  background: i || l ? "var(--Rail-Surface-2, #E3E1D7)" : "rgba(0,0,0,0)"
                 },
                 transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] },
                 style: {
@@ -421,8 +402,8 @@ function d1({
                   display: "flex",
                   justifyContent: "center",
                   alignItems: "center",
-                  gap: d || o ? 10 : 0,
-                  padding: d || o ? "0 0 0 16px" : 0,
+                  gap: i || l ? 10 : 0,
+                  padding: i || l ? "0 0 0 16px" : 0,
                   border: "none",
                   outline: "none",
                   cursor: "pointer",
@@ -431,8 +412,8 @@ function d1({
                   boxSizing: "border-box"
                 },
                 children: [
-                  /* @__PURE__ */ e(M, { children: (d || o) && /* @__PURE__ */ e(
-                    D.span,
+                  /* @__PURE__ */ e(O, { children: (i || l) && /* @__PURE__ */ e(
+                    L.span,
                     {
                       initial: { opacity: 0, width: 0 },
                       animate: { opacity: 1, width: "auto" },
@@ -449,7 +430,7 @@ function d1({
                       children: "Ask Compass"
                     }
                   ) }),
-                  /* @__PURE__ */ e(q, { size: 48, isHovered: d || o })
+                  /* @__PURE__ */ e(J, { size: 48, isHovered: i || l })
                 ]
               }
             )
@@ -459,70 +440,70 @@ function d1({
     }
   );
 }
-const c1 = ({
-  options: t = [],
-  value: i = null,
+const C1 = ({
+  options: r = [],
+  value: c = null,
   onChange: n,
-  placeholder: a = "Search...",
-  disabled: u = !1,
-  showSuggestions: l = !0,
-  styling: d,
-  isAddNew: h = !1
+  placeholder: f = "Search...",
+  disabled: C = !1,
+  showSuggestions: h = !0,
+  styling: g,
+  isAddNew: i = !1
 }) => {
-  const [o, C] = v(""), [g, c] = v(!1), [r, y] = v(null), b = F(null), m = L(() => {
-    if (!l)
+  const [o, l] = w(""), [y, u] = w(!1), [x, m] = w(null), b = I(null), k = z(() => {
+    if (!h)
       return [];
-    const p = o.toLowerCase();
-    return t.filter((f) => {
-      if (!f)
+    const a = o.toLowerCase();
+    return r.filter((p) => {
+      if (!p)
         return !1;
-      const z = f.label || "", B = f.value || "";
-      return (z.toLowerCase().includes(p) || B.toLowerCase().includes(p)) && (!r || f.value !== r.value);
+      const D = p.label || "", H = p.value || "";
+      return (D.toLowerCase().includes(a) || H.toLowerCase().includes(a)) && (!x || p.value !== x.value);
     });
-  }, [o, t, l, r]), w = L(() => {
-    if (!h)
+  }, [o, r, h, x]), t = z(() => {
+    if (!i)
       return !1;
-    const p = o.toLowerCase();
-    return t.some((f) => {
-      if (!f)
+    const a = o.toLowerCase();
+    return r.some((p) => {
+      if (!p)
         return !1;
-      const z = f.label || "", B = f.value || "";
-      return z.toLowerCase() === p || B.toLowerCase() === p;
+      const D = p.label || "", H = p.value || "";
+      return D.toLowerCase() === a || H.toLowerCase() === a;
     });
-  }, [t, o, h]);
-  k(() => {
-    if (!g)
+  }, [r, o, i]);
+  E(() => {
+    if (!y)
       return;
-    const p = (f) => {
-      b.current && !b.current.contains(f.target) && c(!1);
+    const a = (p) => {
+      b.current && !b.current.contains(p.target) && u(!1);
     };
-    return document.addEventListener("mousedown", p), () => document.removeEventListener("mousedown", p);
-  }, [g]);
-  const x = (p) => {
-    n == null || n(p), C(""), c(!1), y(null);
-  }, H = () => {
-    const p = { label: o, value: o };
-    y(p), n == null || n(p), c(!1), C("");
+    return document.addEventListener("mousedown", a), () => document.removeEventListener("mousedown", a);
+  }, [y]);
+  const s = (a) => {
+    n == null || n(a), l(""), u(!1), m(null);
+  }, F = () => {
+    const a = { label: o, value: o };
+    m(a), n == null || n(a), u(!1), l("");
   }, S = () => {
-    n == null || n(null), C(""), c(!1), y(null);
-  }, G = (p) => {
-    const f = p.target.value;
-    l ? (C(f), c(!0)) : h ? (C(f), c(f.length >= 3)) : n == null || n(f);
-  }, T = () => {
-    (l || h) && c(!0);
-  }, j = g && !i && o.length >= 3;
-  return /* @__PURE__ */ s("div", { className: "relative w-full", ref: b, children: [
-    /* @__PURE__ */ s(
+    n == null || n(null), l(""), u(!1), m(null);
+  }, v = (a) => {
+    const p = a.target.value;
+    h ? (l(p), u(!0)) : i ? (l(p), u(p.length >= 3)) : n == null || n(p);
+  }, M = () => {
+    (h || i) && u(!0);
+  }, A = y && !c && o.length >= 3;
+  return /* @__PURE__ */ d("div", { className: "relative w-full", ref: b, children: [
+    /* @__PURE__ */ d(
       "div",
       {
-        className: d || "flex items-center gap-2 border rounded-md px-3 py-2 bg-white shadow-sm",
+        className: g || "flex items-center gap-2 border rounded-md px-3 py-2 bg-white shadow-sm",
         children: [
-          /* @__PURE__ */ e(K, { className: "w-4 h-4 text-gray-400" }),
-          /* @__PURE__ */ e("div", { className: "flex-1", children: l && i ? /* @__PURE__ */ e(
+          /* @__PURE__ */ e(V, { className: "w-4 h-4 text-gray-400" }),
+          /* @__PURE__ */ e("div", { className: "flex-1", children: h && c ? /* @__PURE__ */ e(
             "div",
             {
               className: "text-gray-800 truncate",
-              title: i.label,
+              title: c.label,
               style: {
                 fontSize: "var(--text-sm)",
                 fontWeight: "var(--font-medium)",
@@ -532,26 +513,26 @@ const c1 = ({
                 textDecoration: "none",
                 fontFamily: "var(--font-sans)"
               },
-              children: i.label
+              children: c.label
             }
           ) : /* @__PURE__ */ e(
-            _,
+            q,
             {
-              value: l || h ? o : i || "",
-              onChange: (p) => G({ target: { value: p } }),
-              placeholder: a,
-              disabled: u,
+              value: h || i ? o : c || "",
+              onChange: (a) => v({ target: { value: a } }),
+              placeholder: f,
+              disabled: C,
               style: {
                 border: "none",
                 boxShadow: "none",
                 padding: 0,
                 backgroundColor: "transparent"
               },
-              onFocus: T
+              onFocus: M
             }
           ) }),
-          (i || r) && /* @__PURE__ */ e(
-            W,
+          (c || x) && /* @__PURE__ */ e(
+            G,
             {
               type: "button",
               variant: "ghost",
@@ -565,13 +546,13 @@ const c1 = ({
                 backgroundColor: "transparent",
                 color: "rgba(107,114,128,1)"
               },
-              children: /* @__PURE__ */ e(I, { className: "w-3 h-3" })
+              children: /* @__PURE__ */ e(T, { className: "w-3 h-3" })
             }
           )
         ]
       }
     ),
-    j && /* @__PURE__ */ s(
+    A && /* @__PURE__ */ d(
       "div",
       {
         className: "absolute w-full rounded-md border border-gray-300 bg-white shadow-lg custom-thin-scrollbar-library",
@@ -581,18 +562,18 @@ const c1 = ({
           zIndex: 30
         },
         children: [
-          m.length > 0 && /* @__PURE__ */ e("ul", { className: "m-0 p-0 list-none", children: m.map((p) => /* @__PURE__ */ e(
+          k.length > 0 && /* @__PURE__ */ e("ul", { className: "m-0 p-0 list-none", children: k.map((a) => /* @__PURE__ */ e(
             "li",
             {
-              onClick: () => x(p),
-              onMouseEnter: (f) => {
-                f.currentTarget.style.backgroundColor = "var(--hover-warm)";
+              onClick: () => s(a),
+              onMouseEnter: (p) => {
+                p.currentTarget.style.backgroundColor = "var(--hover-warm)";
               },
-              onMouseLeave: (f) => {
-                f.currentTarget.style.backgroundColor = "transparent";
+              onMouseLeave: (p) => {
+                p.currentTarget.style.backgroundColor = "transparent";
               },
               className: "cursor-pointer px-4 py-2",
-              title: p.label,
+              title: a.label,
               children: /* @__PURE__ */ e(
                 "span",
                 {
@@ -607,18 +588,18 @@ const c1 = ({
                     textTransform: "none",
                     textDecoration: "none"
                   },
-                  children: p.label
+                  children: a.label
                 }
               )
             },
-            p.value
+            a.value
           )) }),
-          h && !w && !r && o.length >= 3 && /* @__PURE__ */ s(
-            W,
+          i && !t && !x && o.length >= 3 && /* @__PURE__ */ d(
+            G,
             {
               type: "button",
               variant: "secondary",
-              onClick: H,
+              onClick: F,
               style: {
                 width: "100%",
                 justifyContent: "space-between",
@@ -640,359 +621,12 @@ const c1 = ({
     )
   ] });
 };
-function u1({
-  open: t,
-  onClose: i,
-  title: n,
-  subtitle: a,
-  children: u,
-  footer: l,
-  width: d = 515,
-  height: h = 762,
-  toggleLabel: o,
-  toggleChecked: C,
-  onToggle: g
-}) {
-  const c = F(null);
-  return k(() => {
-    if (!t)
-      return;
-    const r = (y) => {
-      y.key === "Escape" && (i == null || i());
-    };
-    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
-  }, [t, i]), t ? /* @__PURE__ */ s(E, { children: [
-    /* @__PURE__ */ e(
-      "div",
-      {
-        onClick: i,
-        style: {
-          position: "fixed",
-          inset: 0,
-          zIndex: 1200,
-          background: "rgba(0, 0, 0, 0.20)"
-        }
-      }
-    ),
-    /* @__PURE__ */ s(
-      "div",
-      {
-        ref: c,
-        style: {
-          position: "fixed",
-          top: "50%",
-          right: 0,
-          transform: "translateY(-50%)",
-          zIndex: 1201,
-          display: "flex",
-          width: d,
-          height: h,
-          maxHeight: "100vh",
-          padding: "20px",
-          flexDirection: "column",
-          alignItems: "flex-start",
-          gap: "20px",
-          borderRadius: "12px 0 0 12px",
-          background: "#FFF",
-          boxShadow: "648px 0 100px 0 rgba(0, 0, 0, 0.20)"
-        },
-        children: [
-          /* @__PURE__ */ s(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                width: "100%",
-                flexShrink: 0
-              },
-              children: [
-                /* @__PURE__ */ e(
-                  "h2",
-                  {
-                    style: {
-                      fontSize: "24px",
-                      fontWeight: 600,
-                      fontStyle: "normal",
-                      color: "var(--Grey-3, #252525)",
-                      margin: 0,
-                      lineHeight: "normal"
-                    },
-                    children: n
-                  }
-                ),
-                /* @__PURE__ */ e(
-                  "button",
-                  {
-                    onClick: i,
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      width: "28px",
-                      height: "28px",
-                      border: "none",
-                      background: "transparent",
-                      color: "var(--Grey-Strong, #808183)",
-                      cursor: "pointer",
-                      borderRadius: "4px",
-                      transition: "background 0.15s ease"
-                    },
-                    onMouseEnter: (r) => {
-                      r.currentTarget.style.background = "#ECEEF2";
-                    },
-                    onMouseLeave: (r) => {
-                      r.currentTarget.style.background = "transparent";
-                    },
-                    children: /* @__PURE__ */ e(I, { size: 20, strokeWidth: 2 })
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ e(
-            "div",
-            {
-              style: {
-                width: "100%",
-                height: "1px",
-                background: "#ECEEF2",
-                flexShrink: 0
-              }
-            }
-          ),
-          (a || o) && /* @__PURE__ */ s(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                width: "100%",
-                gap: "12px",
-                flexShrink: 0
-              },
-              children: [
-                a && /* @__PURE__ */ e(
-                  "p",
-                  {
-                    style: {
-                      fontSize: "13px",
-                      fontStyle: "normal",
-                      fontWeight: 400,
-                      lineHeight: "140%",
-                      color: "#0B0B0B",
-                      margin: 0,
-                      flex: 1
-                    },
-                    children: a
-                  }
-                ),
-                o && /* @__PURE__ */ s(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "8px",
-                      flexShrink: 0
-                    },
-                    children: [
-                      /* @__PURE__ */ e(
-                        "button",
-                        {
-                          onClick: () => g == null ? void 0 : g(!C),
-                          style: {
-                            position: "relative",
-                            width: "40px",
-                            height: "22px",
-                            borderRadius: "11px",
-                            border: "none",
-                            background: C ? "var(--Base-Strong, #0B0B0B)" : "var(--Base-Faint, #D9D9D9)",
-                            cursor: "pointer",
-                            transition: "background 0.2s ease",
-                            padding: 0,
-                            flexShrink: 0
-                          },
-                          children: /* @__PURE__ */ e(
-                            "div",
-                            {
-                              style: {
-                                position: "absolute",
-                                top: "2px",
-                                left: C ? "20px" : "2px",
-                                width: "18px",
-                                height: "18px",
-                                borderRadius: "50%",
-                                background: "#FFF",
-                                transition: "left 0.2s ease",
-                                boxShadow: "0 1px 3px rgba(0,0,0,0.15)"
-                              }
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ e(
-                        "span",
-                        {
-                          style: {
-                            fontSize: "13px",
-                            fontWeight: 500,
-                            color: "var(--Base-Strong, #1E1E1E)",
-                            lineHeight: 1.4
-                          },
-                          children: o
-                        }
-                      )
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ e(
-            "div",
-            {
-              style: {
-                flex: 1,
-                width: "100%",
-                overflowY: "auto",
-                display: "flex",
-                flexDirection: "column",
-                gap: "16px",
-                minHeight: 0
-              },
-              children: u
-            }
-          ),
-          l && /* @__PURE__ */ s(E, { children: [
-            /* @__PURE__ */ e(
-              "div",
-              {
-                style: {
-                  width: "100%",
-                  height: "1px",
-                  background: "#ECEEF2",
-                  flexShrink: 0
-                }
-              }
-            ),
-            /* @__PURE__ */ e(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "flex-end",
-                  gap: "12px",
-                  width: "100%",
-                  flexShrink: 0
-                },
-                children: l
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] }) : null;
-}
-function p1({
-  label: t,
-  variant: i = "secondary",
-  onClick: n,
-  disabled: a
-}) {
-  const u = i === "primary";
-  return /* @__PURE__ */ e(
-    "button",
-    {
-      onClick: n,
-      disabled: a,
-      style: {
-        display: "flex",
-        height: "36px",
-        padding: "0 20px",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "8px",
-        borderRadius: "6px",
-        border: u ? "none" : "1px solid #D9D9D9",
-        background: u ? "var(--Base-Strong, #0B0B0B)" : "var(--Base-White, #FFF)",
-        color: u ? "#FFF" : "var(--Base-Strong, #1E1E1E)",
-        fontSize: "16px",
-        fontWeight: 600,
-        cursor: a ? "default" : "pointer",
-        opacity: a ? 0.5 : 1,
-        transition: "all 0.15s ease"
-      },
-      onMouseEnter: (l) => {
-        !a && !u && (l.currentTarget.style.background = "#ECEEF2");
-      },
-      onMouseLeave: (l) => {
-        !a && !u && (l.currentTarget.style.background = "var(--Base-White, #FFF)");
-      },
-      children: t
-    }
-  );
-}
-function f1({ children: t, htmlFor: i }) {
-  return /* @__PURE__ */ e(
-    "label",
-    {
-      htmlFor: i,
-      style: {
-        display: "block",
-        color: "var(--Base-Strong, #2E3236)",
-        fontSize: "16px",
-        fontStyle: "normal",
-        fontWeight: 400,
-        lineHeight: "normal",
-        marginBottom: "6px"
-      },
-      children: t
-    }
-  );
-}
-function h1(t) {
-  return /* @__PURE__ */ e(
-    "input",
-    {
-      ...t,
-      style: {
-        width: "100%",
-        padding: "10px 12px",
-        borderRadius: "6px",
-        border: "1px solid #D9D9D9",
-        color: "var(--Base-Strong, #2E3236)",
-        fontSize: "16px",
-        fontStyle: "normal",
-        fontWeight: 400,
-        lineHeight: "normal",
-        outline: "none",
-        boxSizing: "border-box",
-        background: "#FFF",
-        transition: "border-color 0.15s ease",
-        ...t.style
-      },
-      onFocus: (i) => {
-        var n;
-        i.currentTarget.style.borderColor = "#808183", (n = t.onFocus) == null || n.call(t, i);
-      },
-      onBlur: (i) => {
-        var n;
-        i.currentTarget.style.borderColor = "#D9D9D9", (n = t.onBlur) == null || n.call(t, i);
-      }
-    }
-  );
-}
-function e1({ size: t = 48 }) {
-  return /* @__PURE__ */ s(
+function t1({ size: r = 48 }) {
+  return /* @__PURE__ */ d(
     "svg",
     {
-      width: t,
-      height: t,
+      width: r,
+      height: r,
       viewBox: "0 0 48 48",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -1029,27 +663,27 @@ function e1({ size: t = 48 }) {
     }
   );
 }
-function C1({
-  title: t = "Uploading your file...",
-  subtitle: i = "Please wait while we process your file",
+function p1({
+  title: r = "Uploading your file...",
+  subtitle: c = "Please wait while we process your file",
   progress: n,
-  width: a = 648,
-  height: u = 281
+  width: f = 648,
+  height: C = 281
 }) {
-  return /* @__PURE__ */ s(E, { children: [
+  return /* @__PURE__ */ d(R, { children: [
     /* @__PURE__ */ e("style", { children: `
         @keyframes file-upload-spin {
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
       ` }),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ d(
       "div",
       {
         style: {
           display: "flex",
-          width: a,
-          height: u,
+          width: f,
+          height: C,
           padding: "88px 64px 64px 64px",
           flexDirection: "column",
           justifyContent: "center",
@@ -1061,7 +695,7 @@ function C1({
           boxSizing: "border-box"
         },
         children: [
-          /* @__PURE__ */ e(e1, { size: 48 }),
+          /* @__PURE__ */ e(t1, { size: 48 }),
           /* @__PURE__ */ e(
             "p",
             {
@@ -1073,7 +707,7 @@ function C1({
                 lineHeight: "normal",
                 textAlign: "center"
               },
-              children: t
+              children: r
             }
           ),
           /* @__PURE__ */ e(
@@ -1087,7 +721,7 @@ function C1({
                 lineHeight: "140%",
                 textAlign: "center"
               },
-              children: i
+              children: c
             }
           ),
           n !== void 0 && /* @__PURE__ */ e(
@@ -1120,21 +754,21 @@ function C1({
     )
   ] });
 }
-function g1({
-  title: t = "File uploaded successfully!",
-  subtitle: i = "Redirecting...",
+function h1({
+  title: r = "File uploaded successfully!",
+  subtitle: c = "Redirecting...",
   actionLabel: n = "Add more files",
-  onAction: a,
-  width: u = 648,
-  height: l = 281
+  onAction: f,
+  width: C = 648,
+  height: h = 281
 }) {
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ d(
     "div",
     {
       style: {
         display: "flex",
-        width: u,
-        height: l,
+        width: C,
+        height: h,
         padding: "88px 64px 64px 64px",
         flexDirection: "column",
         justifyContent: "center",
@@ -1160,7 +794,7 @@ function g1({
               flexShrink: 0,
               marginBottom: "8px"
             },
-            children: /* @__PURE__ */ e(V, { size: 24, strokeWidth: 2, color: "var(--Base-Strong, #2E3236)" })
+            children: /* @__PURE__ */ e(Q, { size: 24, strokeWidth: 2, color: "var(--Base-Strong, #2E3236)" })
           }
         ),
         /* @__PURE__ */ e(
@@ -1174,7 +808,7 @@ function g1({
               lineHeight: "normal",
               textAlign: "center"
             },
-            children: t
+            children: r
           }
         ),
         /* @__PURE__ */ e(
@@ -1188,13 +822,13 @@ function g1({
               lineHeight: "140%",
               textAlign: "center"
             },
-            children: i
+            children: c
           }
         ),
-        n && a && /* @__PURE__ */ e(
+        n && f && /* @__PURE__ */ e(
           "button",
           {
-            onClick: a,
+            onClick: f,
             style: {
               display: "flex",
               padding: "8px 20px",
@@ -1211,11 +845,11 @@ function g1({
               marginTop: "8px",
               transition: "all 0.15s ease"
             },
-            onMouseEnter: (d) => {
-              d.currentTarget.style.background = "#ECEEF2";
+            onMouseEnter: (g) => {
+              g.currentTarget.style.background = "#ECEEF2";
             },
-            onMouseLeave: (d) => {
-              d.currentTarget.style.background = "var(--Base-White, #FFF)";
+            onMouseLeave: (g) => {
+              g.currentTarget.style.background = "var(--Base-White, #FFF)";
             },
             children: n
           }
@@ -1224,30 +858,30 @@ function g1({
     }
   );
 }
-const t1 = {
-  success: R,
-  information: Q,
-  warning: U,
-  error: X
-}, x1 = ({
-  variant: t = "success",
-  message: i = "",
+const r1 = {
+  success: B,
+  information: U,
+  warning: X,
+  error: $
+}, u1 = ({
+  variant: r = "success",
+  message: c = "",
   showClose: n,
-  autoClose: a,
-  onClose: u,
-  actions: l
+  autoClose: f,
+  onClose: C,
+  actions: h
 }) => {
-  const [d, h] = v(!0), o = t === "error", C = n !== void 0 ? n : !0, g = a !== void 0 ? a : 5e3, c = Z(() => {
-    h(!1), u == null || u();
-  }, [u]);
-  if (k(() => {
-    if (!g || !d)
+  const [g, i] = w(!0), o = r === "error", l = n !== void 0 ? n : !0, y = f !== void 0 ? f : 5e3, u = j(() => {
+    i(!1), C == null || C();
+  }, [C]);
+  if (E(() => {
+    if (!y || !g)
       return;
-    const x = setTimeout(c, g);
-    return () => clearTimeout(x);
-  }, [g, d, c]), !d)
+    const s = setTimeout(u, y);
+    return () => clearTimeout(s);
+  }, [y, g, u]), !g)
     return null;
-  const r = t1[t] || R, y = {
+  const x = r1[r] || B, m = {
     display: "inline-flex",
     width: "fit-content",
     padding: "8px 12px",
@@ -1269,13 +903,13 @@ const t1 = {
       color: "var(--Grey-Strong, #2E3236)",
       border: "1px solid var(--Grey-Faint, #ACADAD)"
     }
-  }, b = o ? "#FFF" : "var(--Grey-Strong, #2E3236)", m = (x) => ({
+  }, b = o ? "#FFF" : "var(--Grey-Strong, #2E3236)", k = (s) => ({
     display: "flex",
     padding: "4px 12px",
     justifyContent: "center",
     alignItems: "center",
     fontSize: 13,
-    fontWeight: x ? 600 : 400,
+    fontWeight: s ? 600 : 400,
     fontFamily: "var(--default-font-family)",
     lineHeight: "150%",
     border: "none",
@@ -1283,13 +917,13 @@ const t1 = {
     cursor: "pointer",
     transition: "background 0.15s",
     ...o ? {
-      background: x ? "var(--Grey-White, #FFF)" : "transparent",
-      color: x ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-White, #FFF)"
+      background: s ? "var(--Grey-White, #FFF)" : "transparent",
+      color: s ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-White, #FFF)"
     } : {
-      background: x ? "var(--Grey-Strong, #2E3236)" : "transparent",
-      color: x ? "var(--Grey-White, #FFF)" : "var(--Grey-Strong, #2E3236)"
+      background: s ? "var(--Grey-Strong, #2E3236)" : "transparent",
+      color: s ? "var(--Grey-White, #FFF)" : "var(--Grey-Strong, #2E3236)"
     }
-  }), w = {
+  }), t = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -1300,9 +934,9 @@ const t1 = {
     marginLeft: 4,
     flexShrink: 0
   };
-  return /* @__PURE__ */ s("div", { style: y, children: [
+  return /* @__PURE__ */ d("div", { style: m, children: [
     /* @__PURE__ */ e(
-      r,
+      x,
       {
         size: 16,
         color: b,
@@ -1310,28 +944,28 @@ const t1 = {
         style: { flexShrink: 0 }
       }
     ),
-    /* @__PURE__ */ e("span", { children: i }),
-    l && l.length > 0 && /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", gap: 4, marginLeft: 8 }, children: l.map((x, H) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("span", { children: c }),
+    h && h.length > 0 && /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", gap: 4, marginLeft: 8 }, children: h.map((s, F) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         onClick: () => {
           var S;
-          (S = x.onClick) == null || S.call(x), x.dismissOnClick !== !1 && c();
+          (S = s.onClick) == null || S.call(s), s.dismissOnClick !== !1 && u();
         },
-        style: m(!!x.primary),
-        children: x.label
+        style: k(!!s.primary),
+        children: s.label
       },
-      H
+      F
     )) }),
-    C && /* @__PURE__ */ e(
+    l && /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        onClick: c,
-        style: w,
+        onClick: u,
+        style: t,
         children: /* @__PURE__ */ e(
-          I,
+          T,
           {
             size: 16,
             color: o ? "var(--Grey-White, #FFF)" : "var(--Grey-Muted, #808183)",
@@ -1341,7 +975,7 @@ const t1 = {
       }
     )
   ] });
-}, y1 = ({ children: t }) => /* @__PURE__ */ e(
+}, f1 = ({ children: r }) => /* @__PURE__ */ e(
   "div",
   {
     style: {
@@ -1356,19 +990,15 @@ const t1 = {
       gap: 8,
       pointerEvents: "none"
     },
-    children: /* @__PURE__ */ e("div", { style: { pointerEvents: "auto" }, children: t })
+    children: /* @__PURE__ */ e("div", { style: { pointerEvents: "auto" }, children: r })
   }
 );
 export {
-  d1 as A,
-  p1 as D,
-  C1 as F,
-  u1 as S,
-  x1 as T,
-  c1 as a,
-  f1 as b,
-  h1 as c,
-  g1 as d,
-  y1 as e
+  c1 as A,
+  p1 as F,
+  u1 as T,
+  C1 as a,
+  h1 as b,
+  f1 as c
 };
 //# sourceMappingURL=Toast.es.js.map