vlite3 1.0.4 → 1.0.6

package/components/Chat/ChatInterface.vue.js

@@ -1,22 +1,26 @@
-import { defineComponent as P, ref as m, onMounted as O, onUnmounted as q, watch as G, nextTick as U, computed as J, openBlock as d, createElementBlock as v, createElementVNode as l, createTextVNode as Q, createCommentVNode as k, Fragment as M, renderList as F, createBlock as W, toDisplayString as H, createVNode as g, unref as x, withCtx as X, withDirectives as Y, vModelText as Z } from "vue";
-import ee from "./ChatBubble.vue.js";
+import { defineComponent as J, ref as p, onMounted as Q, onUnmounted as W, watch as X, nextTick as B, computed as L, openBlock as d, createElementBlock as u, createElementVNode as a, createTextVNode as Z, createCommentVNode as S, Fragment as _, renderList as H, toDisplayString as U, createBlock as ee, createVNode as y, unref as w, withCtx as te, withDirectives as le, vModelText as ae } from "vue";
+import oe from "./ChatBubble.vue.js";
 import N from "../Button.vue.js";
 import V from "../Icon.vue.js";
-import le from "../FilePicker/FilePicker.vue.js";
-import { useFileUpload as te } from "../Form/composables/useFileUpload.js";
-const ae = { class: "flex flex-col w-full h-full flex-1 min-h-0 bg-transparent" }, oe = {
+import se from "../FilePicker/FilePicker.vue.js";
+import { useFileUpload as re } from "../Form/composables/useFileUpload.js";
+const ne = { class: "flex flex-col w-full h-full flex-1 min-h-0 bg-transparent" }, ie = {
   key: 0,
   class: "py-2 mb-2 text-center text-xs text-muted-foreground flex justify-center items-center gap-2"
-}, se = {
+}, de = {
   key: 1,
   class: "flex items-center justify-center h-full text-muted-foreground text-sm"
-}, re = { class: "flex flex-col gap-2 pb-2" }, ie = { class: "p-3 shrink-0 bg-transparent flex flex-col gap-1" }, ne = {
+}, ue = { class: "flex flex-col gap-2 pb-2" }, ce = {
+  key: 0,
+  class: "flex items-center gap-3 py-1 select-none",
+  role: "separator"
+}, fe = { class: "shrink-0 px-3 py-0.5 rounded-full text-[11px] font-medium text-muted-foreground bg-muted/60 border border-border/40 tracking-wide" }, me = { class: "p-3 shrink-0 bg-transparent flex flex-col gap-1" }, ve = {
   key: 0,
   class: "flex items-center justify-between px-3 py-1.5 bg-muted/50 rounded-lg text-xs text-muted-foreground border border-border animate-in fade-in slide-in-from-bottom-2"
-}, de = { class: "flex items-center gap-2" }, ue = { class: "truncate max-w-[200px] sm:max-w-[300px] md:max-w-[400px]" }, ce = { class: "relative flex flex-col bg-card border border-border rounded-xl shadow-sm focus-within:border-primary transition-colors overflow-hidden" }, fe = {
+}, he = { class: "flex items-center gap-2" }, pe = { class: "truncate max-w-[200px] sm:max-w-[300px] md:max-w-[400px]" }, ge = { class: "relative flex flex-col bg-card border border-border rounded-xl shadow-sm focus-within:border-primary transition-colors overflow-hidden" }, xe = {
   key: 0,
   class: "flex flex-wrap gap-2 p-3 bg-muted/10 border-b border-border"
-}, me = ["title"], ve = ["onClick", "disabled"], he = { class: "flex items-end gap-2 p-1" }, pe = { class: "shrink-0 mb-1 ml-1" }, ge = ["placeholder", "disabled"], xe = { class: "shrink-0 mb-1 mr-1" }, Ae = /* @__PURE__ */ P({
+}, ye = ["title"], we = ["onClick", "disabled"], be = { class: "flex items-end gap-2 p-1" }, ke = { class: "shrink-0 mb-1 ml-1" }, De = ["placeholder", "disabled"], Se = { class: "shrink-0 mb-1 mr-1" }, Ee = /* @__PURE__ */ J({
   __name: "ChatInterface",
   props: {
     data: {},
@@ -33,101 +37,129 @@ const ae = { class: "flex flex-col w-full h-full flex-1 min-h-0 bg-transparent"
     maxFileSize: {}
   },
   emits: ["add", "delete", "edit", "refetch"],
-  setup(s, { emit: _ }) {
-    const w = s, C = _, u = m(null), T = m(null), r = m(null), c = m(""), E = m(0), y = m(!1), i = m(null), o = m([]), { handleUploadFiles: L, loading: f } = te();
-    let b = null;
-    O(() => {
-      T.value && u.value && (b = new IntersectionObserver(
+  setup(r, { emit: K }) {
+    const x = r, T = K, f = p(null), C = p(null), n = p(null), m = p(""), E = p(0), b = p(!1), i = p(null), o = p([]), { handleUploadFiles: R, loading: v } = re();
+    let k = null;
+    Q(() => {
+      C.value && f.value && (k = new IntersectionObserver(
         ([e]) => {
-          e.isIntersecting && w.data.length > 0 && !w.isLoadingMore && (E.value = u.value.scrollHeight, y.value = !0, C("refetch"));
+          e.isIntersecting && x.data.length > 0 && !x.isLoadingMore && (E.value = f.value.scrollHeight, b.value = !0, T("refetch"));
         },
         {
-          root: u.value,
+          root: f.value,
           threshold: 0
         }
-      ), b.observe(T.value)), A();
-    }), q(() => {
-      b && b.disconnect();
-    }), G(
-      () => w.data.length,
+      ), k.observe(C.value)), A();
+    }), W(() => {
+      k && k.disconnect();
+    }), X(
+      () => x.data.length,
       async (e, t) => {
-        const a = u.value;
-        if (a)
-          if (await U(), y.value && e > (t || 0)) {
-            const h = a.scrollHeight - E.value;
-            h > 0 && (a.scrollTop = a.scrollTop + h), y.value = !1;
-          } else !y.value && e > (t || 0) && A();
+        const l = f.value;
+        if (l)
+          if (await B(), b.value && e > (t || 0)) {
+            const c = l.scrollHeight - E.value;
+            c > 0 && (l.scrollTop = l.scrollTop + c), b.value = !1;
+          } else !b.value && e > (t || 0) && A();
       }
     );
     const A = async () => {
-      await U(), u.value && u.value.scrollTo({
-        top: u.value.scrollHeight,
+      await B(), f.value && f.value.scrollTo({
+        top: f.value.scrollHeight,
         behavior: "smooth"
       });
-    }, S = () => {
-      if (!r.value) return;
-      r.value.style.height = "auto";
-      const e = r.value.scrollHeight;
-      r.value.style.height = `${Math.min(e, 120)}px`;
-    }, $ = (e) => {
-      e.key === "Enter" && !e.shiftKey ? (e.preventDefault(), f.value || D()) : e.key === "Escape" && i.value && (e.preventDefault(), z());
-    }, R = (e) => {
-      i.value = e, c.value = e.text, r.value && (r.value.focus(), U(() => {
-        S();
+    }, I = () => {
+      if (!n.value) return;
+      n.value.style.height = "auto";
+      const e = n.value.scrollHeight;
+      n.value.style.height = `${Math.min(e, 120)}px`;
+    }, j = (e) => {
+      e.key === "Enter" && !e.shiftKey ? (e.preventDefault(), v.value || M()) : e.key === "Escape" && i.value && (e.preventDefault(), z());
+    }, Y = (e) => {
+      i.value = e, m.value = e.text, n.value && (n.value.focus(), B(() => {
+        I();
       }));
     }, z = () => {
-      i.value = null, c.value = "", r.value && (r.value.style.height = "auto", r.value.focus());
-    }, I = J(() => {
-      const e = !!c.value.trim(), t = Array.isArray(o.value) && o.value.length > 0;
-      return (e || t) && !f.value;
-    }), j = (e) => {
-      f.value || Array.isArray(o.value) && (o.value.splice(e, 1), o.value.length === 0 && (o.value = []));
-    }, D = async () => {
-      if (!I.value) return;
-      const e = c.value.trim(), t = Array.isArray(o.value) && o.value.length > 0, a = !!i.value;
-      if (a && i.value)
-        e !== i.value.text && C("edit", { ...i.value, text: e, isEdited: !0 }), i.value = null, c.value = "";
+      i.value = null, m.value = "", n.value && (n.value.style.height = "auto", n.value.focus());
+    }, F = L(() => {
+      const e = !!m.value.trim(), t = Array.isArray(o.value) && o.value.length > 0;
+      return (e || t) && !v.value;
+    }), P = (e) => {
+      v.value || Array.isArray(o.value) && (o.value.splice(e, 1), o.value.length === 0 && (o.value = []));
+    }, M = async () => {
+      if (!F.value) return;
+      const e = m.value.trim(), t = Array.isArray(o.value) && o.value.length > 0, l = !!i.value;
+      if (l && i.value)
+        e !== i.value.text && T("edit", { ...i.value, text: e, isEdited: !0 }), i.value = null, m.value = "";
       else {
-        let n = [];
+        let s = [];
         if (t) {
-          const h = o.value.map((B) => B.file).filter(Boolean);
-          if (h.length > 0) {
-            const B = await L(h, w.folderId);
-            n = o.value.map((p, K) => ({
-              fileUrl: B[K] || "",
-              fileName: p.fileName,
-              fileType: p.fileType,
-              fileSize: p.fileSize
-            })).filter((p) => p.fileUrl !== null && p.fileUrl !== "");
+          const c = o.value.map((g) => g.file).filter(Boolean);
+          if (c.length > 0) {
+            const g = await R(c, x.folderId);
+            s = o.value.map((h, G) => ({
+              fileUrl: g[G] || "",
+              fileName: h.fileName,
+              fileType: h.fileType,
+              fileSize: h.fileSize
+            })).filter((h) => h.fileUrl !== null && h.fileUrl !== "");
           }
         }
-        C("add", e, n.length > 0 ? n : void 0), o.value = [], c.value = "";
+        T("add", e, s.length > 0 ? s : void 0), o.value = [], m.value = "";
+      }
+      n.value && (n.value.style.height = "auto", n.value.focus()), l || A();
+    }, D = (e) => {
+      if (!e) return "";
+      const t = new Date(e);
+      return `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")}`;
+    }, O = (e) => {
+      const t = new Date(e), l = /* @__PURE__ */ new Date(), s = D(l), c = D(t);
+      if (c === s) return "Today";
+      const g = new Date(l);
+      if (g.setDate(l.getDate() - 1), c === D(g)) return "Yesterday";
+      const h = t.getFullYear() === l.getFullYear();
+      return t.toLocaleDateString(void 0, {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+        ...h ? {} : { year: "numeric" }
+      });
+    }, q = L(() => {
+      const e = [];
+      let t = "";
+      for (const l of x.data) {
+        const s = D(l.timestamp);
+        s && s !== t && (e.push({
+          _type: "separator",
+          _key: `sep-${s}`,
+          label: O(l.timestamp)
+        }), t = s), e.push(l);
       }
-      r.value && (r.value.style.height = "auto", r.value.focus()), a || A();
-    };
-    return (e, t) => (d(), v("div", ae, [
-      l("div", {
+      return e;
+    }), $ = (e) => e._type === "separator";
+    return (e, t) => (d(), u("div", ne, [
+      a("div", {
         ref_key: "messageListRef",
-        ref: u,
+        ref: f,
         class: "flex-1 overflow-y-auto px-4 py-4 scrollbar-thin scrollbar-stable",
         role: "log",
         "aria-live": "polite",
         "aria-label": "Chat messages",
         style: { "will-change": "transform", contain: "layout style" }
       }, [
-        l("div", {
+        a("div", {
           ref_key: "observerTargetRef",
-          ref: T,
+          ref: C,
           class: "h-1 w-full shrink-0"
         }, null, 512),
-        s.isLoadingMore ? (d(), v("div", oe, [...t[3] || (t[3] = [
-          l("svg", {
+        r.isLoadingMore ? (d(), u("div", ie, [...t[3] || (t[3] = [
+          a("svg", {
             class: "animate-spin h-4 w-4 text-primary",
             xmlns: "http://www.w3.org/2000/svg",
             fill: "none",
             viewBox: "0 0 24 24"
           }, [
-            l("circle", {
+            a("circle", {
               class: "opacity-25",
               cx: "12",
               cy: "12",
@@ -135,35 +167,43 @@ const ae = { class: "flex flex-col w-full h-full flex-1 min-h-0 bg-transparent"
               stroke: "currentColor",
               "stroke-width": "4"
             }),
-            l("path", {
+            a("path", {
               class: "opacity-75",
               fill: "currentColor",
               d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
             })
           ], -1),
-          Q(" Loading older messages... ", -1)
-        ])])) : k("", !0),
-        !s.data.length && !s.isLoadingMore ? (d(), v("div", se, " No messages yet ")) : k("", !0),
-        l("div", re, [
-          (d(!0), v(M, null, F(s.data, (a) => (d(), W(ee, {
-            key: a.id,
-            message: a,
-            "is-sender": a.senderId === s.currentUserId,
-            "show-avatar": s.showAvatar,
-            "show-user-info": s.showUserInfo,
-            "show-timestamp": s.showTimestamp,
-            "allow-delete-all": s.allowDeleteAll,
-            "allow-edit-all": s.allowEditAll,
-            "confirm-delete": s.confirmDelete,
-            onDelete: t[0] || (t[0] = (n) => e.$emit("delete", n)),
-            onEdit: R
-          }, null, 8, ["message", "is-sender", "show-avatar", "show-user-info", "show-timestamp", "allow-delete-all", "allow-edit-all", "confirm-delete"]))), 128))
+          Z(" Loading older messages... ", -1)
+        ])])) : S("", !0),
+        !r.data.length && !r.isLoadingMore ? (d(), u("div", de, " No messages yet ")) : S("", !0),
+        a("div", ue, [
+          (d(!0), u(_, null, H(q.value, (l) => (d(), u(_, {
+            key: $(l) ? l._key : l.id
+          }, [
+            $(l) ? (d(), u("div", ce, [
+              t[4] || (t[4] = a("div", { class: "flex-1 h-px bg-border/60" }, null, -1)),
+              a("span", fe, U(l.label), 1),
+              t[5] || (t[5] = a("div", { class: "flex-1 h-px bg-border/60" }, null, -1))
+            ])) : (d(), ee(oe, {
+              key: 1,
+              message: l,
+              "is-sender": l.senderId === r.currentUserId,
+              "show-avatar": r.showAvatar,
+              "show-user-info": r.showUserInfo,
+              "show-timestamp": r.showTimestamp,
+              "allow-delete-all": r.allowDeleteAll,
+              "allow-edit-all": r.allowEditAll,
+              "confirm-delete": r.confirmDelete,
+              onDelete: t[0] || (t[0] = (s) => e.$emit("delete", s)),
+              onEdit: Y
+            }, null, 8, ["message", "is-sender", "show-avatar", "show-user-info", "show-timestamp", "allow-delete-all", "allow-edit-all", "confirm-delete"]))
+          ], 64))), 128))
         ])
       ], 512),
-      l("div", ie, [
-        i.value ? (d(), v("div", ne, [
-          l("div", de, [
-            t[4] || (t[4] = l("svg", {
+      a("div", me, [
+        i.value ? (d(), u("div", ve, [
+          a("div", he, [
+            t[6] || (t[6] = a("svg", {
               xmlns: "http://www.w3.org/2000/svg",
               class: "h-3.5 w-3.5 text-primary shrink-0",
               viewBox: "0 0 24 24",
@@ -173,18 +213,18 @@ const ae = { class: "flex flex-col w-full h-full flex-1 min-h-0 bg-transparent"
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
             }, [
-              l("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+              a("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
             ], -1)),
-            l("span", ue, "Editing: " + H(i.value.text), 1)
+            a("span", pe, "Editing: " + U(i.value.text), 1)
           ]),
-          l("div", { class: "flex items-center gap-2 shrink-0" }, [
-            t[6] || (t[6] = l("span", { class: "text-[10px] hidden sm:inline-block opacity-60 mr-1" }, "Press Esc to cancel", -1)),
-            l("button", {
+          a("div", { class: "flex items-center gap-2 shrink-0" }, [
+            t[8] || (t[8] = a("span", { class: "text-[10px] hidden sm:inline-block opacity-60 mr-1" }, "Press Esc to cancel", -1)),
+            a("button", {
               onClick: z,
               class: "hover:text-foreground p-0.5 rounded-full hover:bg-muted transition-colors",
               "aria-label": "Cancel editing"
-            }, [...t[5] || (t[5] = [
-              l("svg", {
+            }, [...t[7] || (t[7] = [
+              a("svg", {
                 xmlns: "http://www.w3.org/2000/svg",
                 class: "h-4 w-4",
                 viewBox: "0 0 24 24",
@@ -194,13 +234,13 @@ const ae = { class: "flex flex-col w-full h-full flex-1 min-h-0 bg-transparent"
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
               }, [
-                l("line", {
+                a("line", {
                   x1: "18",
                   y1: "6",
                   x2: "6",
                   y2: "18"
                 }),
-                l("line", {
+                a("line", {
                   x1: "6",
                   y1: "6",
                   x2: "18",
@@ -209,81 +249,81 @@ const ae = { class: "flex flex-col w-full h-full flex-1 min-h-0 bg-transparent"
               ], -1)
             ])])
           ])
-        ])) : k("", !0),
-        l("div", ce, [
-          Array.isArray(o.value) && o.value.length > 0 ? (d(), v("div", fe, [
-            (d(!0), v(M, null, F(o.value, (a, n) => (d(), v("div", {
-              key: n,
+        ])) : S("", !0),
+        a("div", ge, [
+          Array.isArray(o.value) && o.value.length > 0 ? (d(), u("div", xe, [
+            (d(!0), u(_, null, H(o.value, (l, s) => (d(), u("div", {
+              key: s,
               class: "relative flex items-center gap-2 bg-background border border-border rounded-md p-1.5 pr-8 max-w-[200px] shadow-sm"
             }, [
-              g(V, {
+              y(V, {
                 icon: "lucide:file-text",
                 class: "w-4 h-4 text-primary shrink-0"
               }),
-              l("span", {
+              a("span", {
                 class: "text-xs truncate font-medium",
-                title: a.fileName
-              }, H(a.fileName), 9, me),
-              l("button", {
-                onClick: (h) => j(n),
-                disabled: x(f),
+                title: l.fileName
+              }, U(l.fileName), 9, ye),
+              a("button", {
+                onClick: (c) => P(s),
+                disabled: w(v),
                 class: "absolute right-1 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-destructive rounded-full hover:bg-muted/50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               }, [
-                g(V, {
+                y(V, {
                   icon: "lucide:x",
                   class: "w-3 h-3"
                 })
-              ], 8, ve)
+              ], 8, we)
             ]))), 128))
-          ])) : k("", !0),
-          l("div", he, [
-            l("div", pe, [
-              g(le, {
+          ])) : S("", !0),
+          a("div", be, [
+            a("div", ke, [
+              y(se, {
                 modelValue: o.value,
-                "onUpdate:modelValue": t[1] || (t[1] = (a) => o.value = a),
+                "onUpdate:modelValue": t[1] || (t[1] = (l) => o.value = l),
                 "multi-select": !0,
-                "max-size": s.maxFileSize,
+                "max-size": r.maxFileSize,
                 "return-format": "file"
               }, {
-                trigger: X(({ trigger: a }) => [
-                  g(N, {
+                trigger: te(({ trigger: l }) => [
+                  y(N, {
                     variant: "ghost",
                     size: "sm",
                     icon: "lucide:paperclip",
                     rounded: "full",
                     class: "h-8 w-8 px-0 text-muted-foreground hover:text-foreground transition-colors",
-                    onClick: a,
-                    disabled: x(f),
+                    onClick: l,
+                    disabled: w(v),
                     "aria-label": "Attach files"
                   }, null, 8, ["onClick", "disabled"])
                 ]),
                 _: 1
               }, 8, ["modelValue", "max-size"])
             ]),
-            Y(l("textarea", {
+            le(a("textarea", {
               ref_key: "textareaRef",
-              ref: r,
-              "onUpdate:modelValue": t[2] || (t[2] = (a) => c.value = a),
-              placeholder: s.placeholder,
-              disabled: x(f),
+              ref: n,
+              "onUpdate:modelValue": t[2] || (t[2] = (l) => m.value = l),
+              placeholder: r.placeholder,
+              disabled: w(v),
               class: "flex-1 max-h-[120px] min-h-[20px] w-full resize-none bg-transparent px-2 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground scrollbar-thin disabled:opacity-50",
               rows: "1",
               "aria-label": "Message input",
-              onInput: S,
-              onKeydown: $
-            }, null, 40, ge), [
-              [Z, c.value]
+              onInput: I,
+              onKeydown: j
+            }, null, 40, De), [
+              [ae, m.value]
             ]),
-            l("div", xe, [
-              g(N, {
+            a("div", Se, [
+              y(N, {
                 variant: "primary",
                 size: "sm",
-                icon: x(f) ? "lucide:loader-2" : i.value ? "lucide:check" : "lucide:send",
-                loading: x(f),
+                icon: w(v) ? "lucide:loader-2" : i.value ? "lucide:check" : "lucide:send",
+                loading: w(v),
                 rounded: "full",
                 class: "h-8 w-8 px-0 transition-transform active:scale-95",
-                disabled: !I.value,
-                onClick: D,
+                disabled: !F.value,
+                onClick: M,
                 "aria-label": i.value ? "Save changes" : "Send message"
               }, null, 8, ["icon", "loading", "disabled", "aria-label"])
             ])
@@ -294,5 +334,5 @@ const ae = { class: "flex flex-col w-full h-full flex-1 min-h-0 bg-transparent"
   }
 });
 export {
-  Ae as default
+  Ee as default
 };

package/components/CommandPalette/CommandPaletteContent.vue2.js

@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
 import { $t as E } from "../../utils/i18n.js";
 import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
 import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
-import ee from "./CommandPaletteItem.vue2.js";
+import ee from "./CommandPaletteItem.vue.js";
 const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/60 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
   key: 0,
   class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",

package/components/CommandPalette/{CommandPaletteItem.vue2.js → CommandPaletteItem.vue.js}

@@ -1,5 +1,5 @@
 import t from "./CommandPaletteItem.vue3.js";
-/* empty css                       */
+/* empty css                        */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
 const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
 export {

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,7 +1,7 @@
 import o from "./DropdownMenu.vue2.js";
 /* empty css                  */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-c4c5d9e4"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-d555d458"]]);
 export {
-  e as default
+  m as default
 };

package/components/Dropdown/DropdownMenu.vue2.js

@@ -135,6 +135,7 @@ const ve = ["dir"], ye = {
           placeholder: R.value,
           icon: "lucide:search",
           size: "sm",
+          autofocus: !0,
           class: "font-medium!",
           "input-class": "-ml-1",
           variant: "transparent",