monobill-mintui 0.2.95 → 0.2.97

package/dist/index.js

@@ -1,5 +1,5 @@
 import { g as q } from "./error-BiWD2g35.js";
-class B extends HTMLElement {
+class O extends HTMLElement {
   constructor() {
     super(), this._darkModeObserver = null;
   }
@@ -32,13 +32,13 @@ class B extends HTMLElement {
     return t[e] || t.default;
   }
   render() {
-    const e = this.getSize(), t = this.getAttribute("size") || "default", i = !!(this.style.width && this.style.height), s = this.getAttribute("data-button-variant"), r = document.documentElement.classList.contains("dark");
-    let n;
+    const e = this.getSize(), t = this.getAttribute("size") || "default", i = !!(this.style.width && this.style.height), s = this.getAttribute("data-button-variant"), n = document.documentElement.classList.contains("dark");
+    let r;
     if (i) {
-      const d = this.getAttribute("data-button-tone") || "neutral";
-      s === "solid" ? d === "neutral" ? n = r ? "#ffffff" : "#0f172a" : n = "#ffffff" : n = r ? "#ffffff" : "#0f172a";
+      const h = this.getAttribute("data-button-tone") || "neutral";
+      s === "solid" ? h === "neutral" ? r = n ? "#ffffff" : "#0f172a" : r = "#ffffff" : r = n ? "#ffffff" : "#0f172a";
     } else
-      n = r ? "#e2e8f0" : "#0f172a";
+      r = n ? "#e2e8f0" : "#0f172a";
     const a = t === "large" ? "2" : "4", l = !!(this.style.width && this.style.height), o = `
       <svg 
         xmlns="http://www.w3.org/2000/svg" 
@@ -51,7 +51,7 @@ class B extends HTMLElement {
           cx="12"
           cy="12"
           r="10"
-          stroke="${n}"
+          stroke="${r}"
           stroke-width="${a}"
           opacity="0.25"
           class="opacity-25"
@@ -60,7 +60,7 @@ class B extends HTMLElement {
           cx="12"
           cy="12"
           r="10"
-          stroke="${n}"
+          stroke="${r}"
           stroke-width="${a}"
           stroke-linecap="round"
           fill="none"
@@ -86,8 +86,8 @@ class B extends HTMLElement {
     this.innerHTML = o.trim();
   }
 }
-customElements.get("mint-spinner") || customElements.define("mint-spinner", B);
-class O extends HTMLElement {
+customElements.get("mint-spinner") || customElements.define("mint-spinner", O);
+class B extends HTMLElement {
   constructor() {
     super(), this._darkModeObserver = null;
   }
@@ -124,7 +124,7 @@ class O extends HTMLElement {
     return e ? e === "local" ? `/icons/${this.getName()}.svg` : e === "cdn" ? `https://assets.gomonobill.com/mintui/icons/${this.getName()}.svg` : `${e.endsWith("/") ? e : `${e}/`}${this.getName()}.svg` : `https://assets.gomonobill.com/mintui/icons/${this.getName()}.svg`;
   }
   render() {
-    var l, o, d;
+    var l, o, h;
     const e = this.getName();
     if (!e) {
       this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "";
@@ -134,10 +134,10 @@ class O extends HTMLElement {
       console.warn(`Icon "${e}" not found. Make sure you've imported the icon: import '@monobill-mintui/icon/icons/${e}'`), this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "";
       return;
     }
-    const i = this.closest("mint-button") || ((l = this.parentElement) == null ? void 0 : l.closest("mint-button")), s = this.closest("mint-switch") || ((o = this.parentElement) == null ? void 0 : o.closest("mint-switch")), r = this.closest("mint-select") || ((d = this.parentElement) == null ? void 0 : d.closest("mint-select"));
+    const i = this.closest("mint-button") || ((l = this.parentElement) == null ? void 0 : l.closest("mint-button")), s = this.closest("mint-switch") || ((o = this.parentElement) == null ? void 0 : o.closest("mint-switch")), n = this.closest("mint-select") || ((h = this.parentElement) == null ? void 0 : h.closest("mint-select"));
     if (!Array.from(this.classList).some(
       (c) => c.startsWith("w-") || c.startsWith("h-")
-    ) && !r) {
+    ) && !n) {
       let c;
       s ? c = "w-3 h-3" : i ? c = "w-5 h-5" : c = "w-[1.3em] h-[1.3em]", this.classList.remove("w-4", "h-4", "w-5", "h-5", "w-[1em]", "h-[1em]", "w-[1.3em]", "h-[1.3em]", "w-3", "h-3"), c.split(" ").forEach((m) => {
         m && this.classList.add(m);
@@ -154,7 +154,7 @@ class O extends HTMLElement {
     }
   }
 }
-customElements.get("mint-icon") || customElements.define("mint-icon", O);
+customElements.get("mint-icon") || customElements.define("mint-icon", B);
 class z extends HTMLElement {
   constructor() {
     super(), this._button = null, this._clickHandler = null, this._isHandlingClick = !1, this._handleMouseDown = () => {
@@ -209,13 +209,13 @@ class z extends HTMLElement {
     return this.getAttribute("icon") || "";
   }
   isIconOnly() {
-    var i, s, r, n, a;
+    var i, s, n, r, a;
     if (!(this.getIcon() || ((i = this._button) == null ? void 0 : i.querySelector('[slot="icon"], .mint-button-icon, mint-icon')))) return !1;
     const t = (s = this._button) == null ? void 0 : s.querySelector(".mint-button-content");
-    if (t && ((r = t.textContent) != null && r.trim())) return !1;
+    if (t && ((n = t.textContent) != null && n.trim())) return !1;
     if (this._button)
       for (let l = this._button.firstChild; l; l = l.nextSibling) {
-        if (l.nodeType === Node.TEXT_NODE && ((n = l.textContent) != null && n.trim()))
+        if (l.nodeType === Node.TEXT_NODE && ((r = l.textContent) != null && r.trim()))
           return !1;
         if (l.nodeType === Node.ELEMENT_NODE) {
           const o = l;
@@ -249,7 +249,7 @@ class z extends HTMLElement {
       "[&>*]:duration-100",
       "disabled:opacity-50",
       "disabled:cursor-not-allowed"
-    ], s = this.getTone(), r = {
+    ], s = this.getTone(), n = {
       "solid-action": [
         "bg-slate-800",
         "dark:bg-slate-600",
@@ -534,14 +534,14 @@ class z extends HTMLElement {
         "border-transparent"
         // Match other button border width
       ]
-    }, n = `${t}-${s}`, a = r[n] || r["solid-neutral"], l = [
+    }, r = `${t}-${s}`, a = n[r] || n["solid-neutral"], l = [
       ...i,
       ...a
     ];
     return this.isFullWidth() && l.push("w-full"), l.join(" ");
   }
   render() {
-    var d, c, m, h, f;
+    var h, c, m, d, f;
     const e = this.isDisabled() || this.isLoading(), t = this.getType();
     if (!this._button) {
       for (this._button = document.createElement("button"); this.firstChild; )
@@ -559,24 +559,24 @@ class z extends HTMLElement {
         const p = document.createElement("mint-spinner");
         p.setAttribute("size", "default"), p.setAttribute("data-button-variant", this.getVariant()), p.setAttribute("data-button-tone", this.getTone()), p.style.width = "0.875rem", p.style.height = "0.875rem", u.appendChild(p), this._button.insertBefore(u, this._button.firstChild);
       }
-    else i && ((d = i.parentElement) == null || d.remove());
+    else i && ((h = i.parentElement) == null || h.remove());
     for (; this.firstChild && this.firstChild !== this._button; )
       this._button.appendChild(this.firstChild);
     const s = this.getIcon();
-    let r = this._button.querySelector('[slot="icon"], .mint-button-icon, mint-icon');
-    s ? (r && r.tagName !== "MINT-ICON" && (r.remove(), r = null), !r || r.tagName !== "MINT-ICON" ? (r = document.createElement("mint-icon"), r.setAttribute("name", s), r.className = "mint-button-icon") : r.setAttribute("name", s)) : r && r.tagName === "MINT-ICON" && (r.remove(), r = null), r || (r = this._button.querySelector('[slot="icon"], .mint-button-icon'));
-    const n = this.getIconPosition();
+    let n = this._button.querySelector('[slot="icon"], .mint-button-icon, mint-icon');
+    s ? (n && n.tagName !== "MINT-ICON" && (n.remove(), n = null), !n || n.tagName !== "MINT-ICON" ? (n = document.createElement("mint-icon"), n.setAttribute("name", s), n.className = "mint-button-icon") : n.setAttribute("name", s)) : n && n.tagName === "MINT-ICON" && (n.remove(), n = null), n || (n = this._button.querySelector('[slot="icon"], .mint-button-icon'));
+    const r = this.getIconPosition();
     let a = this._button.querySelector(".mint-button-content");
     if (a) {
-      const u = r && r.tagName === "MINT-ICON";
-      if (r && !r.parentElement) {
-        const p = (h = this._button.querySelector("mint-spinner")) == null ? void 0 : h.parentElement;
-        u || n === "left" ? p ? p.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a) : a.insertAdjacentElement("afterend", r);
-      } else if (r && (u || n === "left") && r.nextSibling !== a) {
-        r.remove();
+      const u = n && n.tagName === "MINT-ICON";
+      if (n && !n.parentElement) {
+        const p = (d = this._button.querySelector("mint-spinner")) == null ? void 0 : d.parentElement;
+        u || r === "left" ? p ? p.insertAdjacentElement("afterend", n) : this._button.insertBefore(n, a) : a.insertAdjacentElement("afterend", n);
+      } else if (n && (u || r === "left") && n.nextSibling !== a) {
+        n.remove();
         const p = (f = this._button.querySelector("mint-spinner")) == null ? void 0 : f.parentElement;
-        p ? p.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a);
-      } else r && !u && n === "right" && r.previousSibling !== a && (r.remove(), a.insertAdjacentElement("afterend", r));
+        p ? p.insertAdjacentElement("afterend", n) : this._button.insertBefore(n, a);
+      } else n && !u && r === "right" && n.previousSibling !== a && (n.remove(), a.insertAdjacentElement("afterend", n));
     } else {
       const u = [];
       for (let p = this._button.firstChild; p; p = p.nextSibling) {
@@ -585,21 +585,21 @@ class z extends HTMLElement {
           continue;
         }
         const _ = p;
-        _.tagName !== "MINT-SPINNER" && !_.querySelector("mint-spinner") && p !== r && !_.hasAttribute("slot") && !(_.className === "mr-2" && _.querySelector("mint-spinner")) && u.push(p);
+        _.tagName !== "MINT-SPINNER" && !_.querySelector("mint-spinner") && p !== n && !_.hasAttribute("slot") && !(_.className === "mr-2" && _.querySelector("mint-spinner")) && u.push(p);
       }
       if (u.length > 0) {
         a = document.createElement("span"), a.className = "mint-button-content inline-flex items-center", u.forEach((_) => {
           a.appendChild(_);
         });
         const p = (c = this._button.querySelector("mint-spinner")) == null ? void 0 : c.parentElement;
-        r && n === "left" ? p ? (p.insertAdjacentElement("afterend", r), r.insertAdjacentElement("afterend", a)) : (this._button.insertBefore(r, this._button.firstChild), r.insertAdjacentElement("afterend", a)) : r && n === "right" ? p ? (p.insertAdjacentElement("afterend", a), a.insertAdjacentElement("afterend", r)) : (this._button.insertBefore(a, this._button.firstChild), a.insertAdjacentElement("afterend", r)) : p ? p.insertAdjacentElement("afterend", a) : this._button.insertBefore(a, this._button.firstChild);
-      } else if (r && r.tagName === "MINT-ICON" && !r.parentElement) {
+        n && r === "left" ? p ? (p.insertAdjacentElement("afterend", n), n.insertAdjacentElement("afterend", a)) : (this._button.insertBefore(n, this._button.firstChild), n.insertAdjacentElement("afterend", a)) : n && r === "right" ? p ? (p.insertAdjacentElement("afterend", a), a.insertAdjacentElement("afterend", n)) : (this._button.insertBefore(a, this._button.firstChild), a.insertAdjacentElement("afterend", n)) : p ? p.insertAdjacentElement("afterend", a) : this._button.insertBefore(a, this._button.firstChild);
+      } else if (n && n.tagName === "MINT-ICON" && !n.parentElement) {
         const p = (m = this._button.querySelector("mint-spinner")) == null ? void 0 : m.parentElement;
-        p ? p.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, this._button.firstChild);
+        p ? p.insertAdjacentElement("afterend", n) : this._button.insertBefore(n, this._button.firstChild);
       }
     }
     const l = this.isIconOnly();
-    r && (r.classList.contains("mint-button-icon") || r.classList.add("mint-button-icon"), r.classList.remove("mr-1.5", "ml-1.5"), l ? r.tagName === "MINT-ICON" ? (r.style.width = "1rem", r.style.height = "1rem", r.style.maxWidth = "1rem", r.style.maxHeight = "1rem", r.style.flexShrink = "0") : (r.style.maxWidth = "1rem", r.style.maxHeight = "1rem", r.style.flexShrink = "0", r.tagName === "svg" && (r.style.width = "1rem", r.style.height = "1rem")) : n === "left" ? r.classList.add("mr-1.5") : r.classList.add("ml-1.5"));
+    n && (n.classList.contains("mint-button-icon") || n.classList.add("mint-button-icon"), n.classList.remove("mr-1.5", "ml-1.5"), l ? n.tagName === "MINT-ICON" ? (n.style.width = "1rem", n.style.height = "1rem", n.style.maxWidth = "1rem", n.style.maxHeight = "1rem", n.style.flexShrink = "0") : (n.style.maxWidth = "1rem", n.style.maxHeight = "1rem", n.style.flexShrink = "0", n.tagName === "svg" && (n.style.width = "1rem", n.style.height = "1rem")) : r === "left" ? n.classList.add("mr-1.5") : n.classList.add("ml-1.5"));
     const o = this.getButtonClasses();
     this._button.className = o;
   }
@@ -769,23 +769,23 @@ class W extends HTMLElement {
     ].join(" ");
   }
   render() {
-    const e = this.isLoading(), t = this.getSwitchClasses(), i = this.getThumbClasses(), s = this.getLabel(), r = this.getInfo(), n = this.getIcon(), a = this.getAttribute("id") || `mint-switch-${Math.random().toString(36).substr(2, 9)}`;
+    const e = this.isLoading(), t = this.getSwitchClasses(), i = this.getThumbClasses(), s = this.getLabel(), n = this.getInfo(), r = this.getIcon(), a = this.getAttribute("id") || `mint-switch-${Math.random().toString(36).substr(2, 9)}`;
     this.getAttribute("id") || this.setAttribute("id", a);
     const l = this._getSwitchContainer();
     this._button ? this._button.parentElement !== l && l.appendChild(this._button) : (this._button = document.createElement("button"), l.appendChild(this._button), this.setupEventListeners());
     let o = l.querySelector(".mint-switch-label");
     s ? (o || (o = document.createElement("label"), o.className = "mint-switch-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", this._button && this._button.parentElement === l ? l.insertBefore(o, this._button.nextSibling) : l.appendChild(o)), o.textContent = s, o.setAttribute("for", a), this.isDisabled() ? o.classList.add("opacity-40") : o.classList.remove("opacity-40")) : o && o.remove(), this._button.className = t, this._button.disabled = this.isDisabled(), this._button.id = a, this._button.setAttribute("aria-checked", String(this._checked)), this._button.setAttribute("aria-label", s || "Toggle switch"), this._button.setAttribute("role", "switch"), this._button.type = "button";
-    let d = this._button.querySelector("span");
-    d || (d = document.createElement("span"), this._button.appendChild(d)), d.className = i;
-    const c = d.querySelector("span");
-    if (n) {
-      let h = c;
-      h || (h = document.createElement("span"), h.className = this.getIconClasses(), d.appendChild(h));
-      let f = h.querySelector("mint-icon");
-      f || (f = document.createElement("mint-icon"), h.appendChild(f)), f.setAttribute("name", n);
+    let h = this._button.querySelector("span");
+    h || (h = document.createElement("span"), this._button.appendChild(h)), h.className = i;
+    const c = h.querySelector("span");
+    if (r) {
+      let d = c;
+      d || (d = document.createElement("span"), d.className = this.getIconClasses(), h.appendChild(d));
+      let f = d.querySelector("mint-icon");
+      f || (f = document.createElement("mint-icon"), d.appendChild(f)), f.setAttribute("name", r);
     } else c && c.remove();
     let m = this.querySelector(".mint-switch-info");
-    r ? (m || (m = document.createElement("span"), m.className = "mint-switch-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", l && l.parentElement === this ? this.insertBefore(m, l.nextSibling) : this.appendChild(m)), m.textContent = r, this.isDisabled() ? m.classList.add("opacity-40") : m.classList.remove("opacity-40")) : m && m.remove(), this._renderErrorState(), this._renderSkeleton(e);
+    n ? (m || (m = document.createElement("span"), m.className = "mint-switch-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", l && l.parentElement === this ? this.insertBefore(m, l.nextSibling) : this.appendChild(m)), m.textContent = n, this.isDisabled() ? m.classList.add("opacity-40") : m.classList.remove("opacity-40")) : m && m.remove(), this._renderErrorState(), this._renderSkeleton(e);
   }
   setupEventListeners() {
     this._button && this._button.addEventListener("click", this.handleToggle.bind(this));
@@ -810,27 +810,27 @@ class W extends HTMLElement {
   }
   _renderSkeleton(e) {
     const t = this._getSwitchContainer(), i = this.getLabel(), s = this.getInfo();
-    let r = t.querySelector(".mint-switch-skeleton-container"), n = this.querySelector(".mint-switch-info-skeleton");
+    let n = t.querySelector(".mint-switch-skeleton-container"), r = this.querySelector(".mint-switch-info-skeleton");
     if (e) {
-      t.classList.contains("relative") || t.classList.add("relative"), r || (r = document.createElement("div"), r.className = "mint-switch-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center gap-2", t.appendChild(r));
-      let a = r.querySelector(".mint-switch-skeleton-box");
-      if (a || (a = document.createElement("div"), a.className = "mint-switch-skeleton-box flex-shrink-0 w-10 h-5 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse", r.appendChild(a)), i) {
-        let o = r.querySelector(".mint-switch-skeleton-label");
-        o || (o = document.createElement("div"), o.className = "mint-switch-skeleton-label h-4 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", r.appendChild(o));
+      t.classList.contains("relative") || t.classList.add("relative"), n || (n = document.createElement("div"), n.className = "mint-switch-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center gap-2", t.appendChild(n));
+      let a = n.querySelector(".mint-switch-skeleton-box");
+      if (a || (a = document.createElement("div"), a.className = "mint-switch-skeleton-box flex-shrink-0 w-10 h-5 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse", n.appendChild(a)), i) {
+        let o = n.querySelector(".mint-switch-skeleton-label");
+        o || (o = document.createElement("div"), o.className = "mint-switch-skeleton-label h-4 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", n.appendChild(o));
       } else {
-        const o = r.querySelector(".mint-switch-skeleton-label");
+        const o = n.querySelector(".mint-switch-skeleton-label");
         o && o.remove();
       }
-      r.style.display = "flex", this._button && (this._button.style.visibility = "hidden", this._button.style.pointerEvents = "none");
+      n.style.display = "flex", this._button && (this._button.style.visibility = "hidden", this._button.style.pointerEvents = "none");
       const l = t.querySelector(".mint-switch-label");
       if (l && (l.style.visibility = "hidden", l.style.pointerEvents = "none"), s) {
-        n || (n = document.createElement("div"), n.className = "mint-switch-info-skeleton h-3 w-32 rounded bg-gray-200 dark:bg-gray-700 animate-pulse mt-2", t && t.parentElement === this ? this.insertBefore(n, t.nextSibling) : this.appendChild(n)), n.style.display = "block";
+        r || (r = document.createElement("div"), r.className = "mint-switch-info-skeleton h-3 w-32 rounded bg-gray-200 dark:bg-gray-700 animate-pulse mt-2", t && t.parentElement === this ? this.insertBefore(r, t.nextSibling) : this.appendChild(r)), r.style.display = "block";
         const o = this.querySelector(".mint-switch-info");
         o && (o.style.display = "none");
       } else
-        n && (n.style.display = "none");
+        r && (r.style.display = "none");
     } else {
-      r && (r.style.display = "none"), n && (n.style.display = "none"), this._button && (this._button.style.visibility = "visible", this._button.style.pointerEvents = "auto");
+      n && (n.style.display = "none"), r && (r.style.display = "none"), this._button && (this._button.style.visibility = "visible", this._button.style.pointerEvents = "auto");
       const a = t.querySelector(".mint-switch-label");
       a && (a.style.visibility = "visible", a.style.pointerEvents = "auto");
       const l = this.querySelector(".mint-switch-info");
@@ -904,19 +904,19 @@ class V extends HTMLElement {
       regular: [
         // No default margin for regular text
       ]
-    }, r = {
+    }, n = {
       default: i ? ["text-gray-100"] : ["text-gray-900"],
       muted: i ? ["text-gray-400"] : ["text-gray-400"],
       danger: i ? ["text-red-400"] : ["text-red-600"],
       success: i ? ["text-green-400"] : ["text-green-600"]
-    }, n = [];
-    this.isBold() && n.push("font-bold"), this.isUnderline() && n.push("underline"), this.isStrike() && n.push("line-through"), this.isItalic() && n.push("italic");
+    }, r = [];
+    this.isBold() && r.push("font-bold"), this.isUnderline() && r.push("underline"), this.isStrike() && r.push("line-through"), this.isItalic() && r.push("italic");
     const a = this.getDisplay();
     return [
       a === "block" ? "block" : a === "inline" ? "inline" : "inline-block",
       ...s[e] || s.regular,
-      ...r[t] || r.default,
-      ...n
+      ...n[t] || n.default,
+      ...r
     ].join(" ");
   }
   render() {
@@ -941,8 +941,8 @@ class V extends HTMLElement {
     Array.from(this.classList).forEach((o) => {
       !t.includes(o) && !i.includes(o) && this._userClasses.add(o);
     });
-    const n = [.../* @__PURE__ */ new Set([...s, ...Array.from(this._userClasses)])];
-    this.className = n.join(" ");
+    const r = [.../* @__PURE__ */ new Set([...s, ...Array.from(this._userClasses)])];
+    this.className = r.join(" ");
     const a = {
       heading: "clamp(1.25rem, 2.5vw + 0.5rem, 1.5rem)",
       // Scales between 1.25rem (20px) and 1.5rem (24px)
@@ -1027,10 +1027,10 @@ class R extends HTMLElement {
       "[&>mint-button>button]:!justify-start",
       "[&>mint-button>button]:!justify-center",
       "[&>mint-button>button]:!justify-end"
-    ].forEach((r) => this.classList.remove(r)), e.split(" ").forEach((r) => {
-      r && this.classList.add(r);
-    }), ["box-border", "m-0", "p-0", "border-0", "align-baseline", "block"].forEach((r) => {
-      this.classList.contains(r) || this.classList.add(r);
+    ].forEach((n) => this.classList.remove(n)), e.split(" ").forEach((n) => {
+      n && this.classList.add(n);
+    }), ["box-border", "m-0", "p-0", "border-0", "align-baseline", "block"].forEach((n) => {
+      this.classList.contains(n) || this.classList.add(n);
     }), t ? this._applyTextAlignToChildren(t) : this._removeTextAlignFromChildren();
   }
   _applyTextAlignToChildren(e) {
@@ -1039,8 +1039,8 @@ class R extends HTMLElement {
         const s = i.querySelector("button");
         if (s) {
           s.classList.remove("justify-start", "justify-center", "justify-end"), e === "left" ? s.classList.add("justify-start") : e === "right" ? s.classList.add("justify-end") : e === "center" && s.classList.add("justify-center");
-          const r = s.querySelector(".mint-button-content");
-          r && (r.classList.remove("text-left", "text-center", "text-right", "text-justify"), r.classList.add(`text-${e}`));
+          const n = s.querySelector(".mint-button-content");
+          n && (n.classList.remove("text-left", "text-center", "text-right", "text-justify"), n.classList.add(`text-${e}`));
         }
       } else
         i.classList.remove("text-left", "text-center", "text-right", "text-justify"), i.classList.add(`text-${e}`);
@@ -1200,7 +1200,7 @@ class Y extends HTMLElement {
       } catch {
         return !1;
       }
-    })(), r = new CustomEvent("back", {
+    })(), n = new CustomEvent("back", {
       detail: {
         url: t,
         isFromReferrer: s,
@@ -1211,7 +1211,7 @@ class Y extends HTMLElement {
       cancelable: !0,
       composed: !0
     });
-    this.dispatchEvent(r);
+    this.dispatchEvent(n);
   }
   render() {
     this._button || (this._button = document.createElement("mint-button"), this._button.setAttribute("variant", "neutral"), this._button.setAttribute("icon", "arrow-left"), this._button.addEventListener("click", (e) => this.handleClick(e)), this.appendChild(this._button));
@@ -1249,15 +1249,15 @@ class U extends HTMLElement {
     let t = this._titleElement.querySelector("mint-back-button");
     if (this.shouldShowBackButton()) {
       t || (t = document.createElement("mint-back-button"), this._titleElement.insertBefore(t, this._titleElement.firstChild));
-      const n = this.getFallbackHref();
-      t.setAttribute("fallback-href", n), this._backButton = t;
+      const r = this.getFallbackHref();
+      t.setAttribute("fallback-href", r), this._backButton = t;
     } else t && (t.remove(), t = null, this._backButton = null);
     e ? (this._headingText ? (this._headingText.classList.add("truncate", "min-w-0"), t && t.parentElement === this._titleElement ? this._headingText.previousSibling !== t && this._titleElement.insertBefore(this._headingText, t.nextSibling) : this._headingText.previousSibling && this._titleElement.insertBefore(this._headingText, this._titleElement.firstChild)) : (this._headingText = document.createElement("mint-text"), this._headingText.setAttribute("size", "heading"), this._headingText.setAttribute("bold", ""), this._headingText.classList.add("truncate", "min-w-0"), t && t.parentElement === this._titleElement ? this._titleElement.insertBefore(this._headingText, t.nextSibling) : this._titleElement.insertBefore(this._headingText, this._titleElement.firstChild)), this._headingText.textContent = e) : this._headingText && (this._headingText.remove(), this._headingText = null), this._actionsSlot ? this._actionsSlot.classList.contains("ml-4") || this._actionsSlot.classList.add("ml-4") : (this._actionsSlot = document.createElement("div"), this._actionsSlot.className = "flex gap-2 items-center ml-4", this._actionsSlot.setAttribute("slot", "actions"), this._header.appendChild(this._actionsSlot)), Array.from(this.children).filter(
-      (n) => n !== this._pageContainer && n !== this._actionsSlot && n.getAttribute("slot") === "actions"
-    ).forEach((n) => {
-      this._actionsSlot && n.parentElement !== this._actionsSlot && this._actionsSlot.appendChild(n);
-    }), this._bodySlot || (this._bodySlot = document.createElement("div"), this._pageContainer.appendChild(this._bodySlot)), Array.from(this.children).forEach((n) => {
-      n !== this._pageContainer && n.getAttribute("slot") !== "actions" && n !== this._actionsSlot && n !== this._header && n !== this._bodySlot && n !== this._headingText && n.parentElement !== this._bodySlot && n.parentElement !== this._pageContainer && this._bodySlot.appendChild(n);
+      (r) => r !== this._pageContainer && r !== this._actionsSlot && r.getAttribute("slot") === "actions"
+    ).forEach((r) => {
+      this._actionsSlot && r.parentElement !== this._actionsSlot && this._actionsSlot.appendChild(r);
+    }), this._bodySlot || (this._bodySlot = document.createElement("div"), this._pageContainer.appendChild(this._bodySlot)), Array.from(this.children).forEach((r) => {
+      r !== this._pageContainer && r.getAttribute("slot") !== "actions" && r !== this._actionsSlot && r !== this._header && r !== this._bodySlot && r !== this._headingText && r.parentElement !== this._bodySlot && r.parentElement !== this._pageContainer && this._bodySlot.appendChild(r);
     }), this._updateBackgroundColor();
   }
   _applyContainerClasses() {
@@ -1333,10 +1333,10 @@ class G extends HTMLElement {
     i && e.push(`sm:grid-cols-${i}`);
     const s = this.getMd();
     s && e.push(`md:grid-cols-${s}`);
-    const r = this.getLg();
-    r && e.push(`lg:grid-cols-${r}`);
-    const n = this.getXl();
-    n && e.push(`xl:grid-cols-${n}`);
+    const n = this.getLg();
+    n && e.push(`lg:grid-cols-${n}`);
+    const r = this.getXl();
+    r && e.push(`xl:grid-cols-${r}`);
     const a = this.getGap();
     return e.push(`gap-${a}`), e;
   }
@@ -1389,8 +1389,8 @@ class J extends HTMLElement {
       this._animateExit();
     let s = this._modal.querySelector(".modal-content");
     s || (s = document.createElement("div"), s.className = "modal-content bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto transition-all duration-200 ease-out transform", this._modal.appendChild(s)), this._header || (this._header = document.createElement("div"), this._header.className = "flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700", s.appendChild(this._header)), this._headingSlot || (this._headingSlot = document.createElement("div"), this._headingSlot.className = "flex-1", this._headingSlot.setAttribute("slot", "heading"), this._header.appendChild(this._headingSlot));
-    let r = this._headingSlot.querySelector("mint-text");
-    t ? (r || (r = document.createElement("mint-text"), r.setAttribute("size", "sub-heading"), r.setAttribute("bold", ""), this._headingSlot.appendChild(r)), r.textContent = t) : r && r.remove(), Array.from(this.children).filter(
+    let n = this._headingSlot.querySelector("mint-text");
+    t ? (n || (n = document.createElement("mint-text"), n.setAttribute("size", "sub-heading"), n.setAttribute("bold", ""), this._headingSlot.appendChild(n)), n.textContent = t) : n && n.remove(), Array.from(this.children).filter(
       (c) => c !== this._overlay && c !== this._modal && c !== this._headingSlot && c.getAttribute("slot") === "heading"
     ).forEach((c) => {
       this._headingSlot && c.parentElement !== this._headingSlot && this._headingSlot.appendChild(c);
@@ -1403,8 +1403,8 @@ class J extends HTMLElement {
     l || (l = document.createElement("mint-stack"), l.setAttribute("direction", "horizontal"), l.className = "justify-end", this._actionsSlot.appendChild(l)), Array.from(this.children).filter(
       (c) => c !== this._overlay && c !== this._modal && c !== this._actionsSlot && c.getAttribute("slot") === "actions"
     ).forEach((c) => {
-      Array.from(c.children).forEach((h) => {
-        h.parentElement !== l && l.appendChild(h);
+      Array.from(c.children).forEach((d) => {
+        d.parentElement !== l && l.appendChild(d);
       }), c.parentElement && c.remove();
     }), Array.from(this.children).forEach((c) => {
       c !== this._overlay && c !== this._modal && c.getAttribute("slot") !== "heading" && c.getAttribute("slot") !== "body" && c.getAttribute("slot") !== "actions" && c !== this._headingSlot && c !== this._bodySlot && c !== this._actionsSlot && c.parentElement !== this._bodySlot && this._bodySlot.appendChild(c);
@@ -1556,49 +1556,49 @@ class X extends HTMLElement {
     const e = this._triggerElement.getBoundingClientRect(), t = this._popover.querySelector(".popover-content");
     if (!t) return { top: 0, left: 0, direction: "down" };
     this.classList.contains("hidden") && (this.classList.remove("hidden"), this._popover.style.visibility = "hidden");
-    const s = t.getBoundingClientRect(), r = window.innerWidth, n = window.innerHeight, a = 8;
-    let l = this.getDirection(), o = 0, d = 0;
+    const s = t.getBoundingClientRect(), n = window.innerWidth, r = window.innerHeight, a = 8;
+    let l = this.getDirection(), o = 0, h = 0;
     switch (l) {
       case "down":
-        if (o = e.bottom + a, d = e.left + e.width / 2 - s.width / 2, o + s.height > n) {
+        if (o = e.bottom + a, h = e.left + e.width / 2 - s.width / 2, o + s.height > r) {
           const c = e.top - s.height - a;
-          c >= 0 ? (l = "up", o = c) : (o = Math.max(0, n - s.height - a), o + s.height > n && (o = 0));
+          c >= 0 ? (l = "up", o = c) : (o = Math.max(0, r - s.height - a), o + s.height > r && (o = 0));
         }
-        d < 0 && (d = a), d + s.width > r && (d = Math.max(a, r - s.width - a), d + s.width > r && (d = r - s.width));
+        h < 0 && (h = a), h + s.width > n && (h = Math.max(a, n - s.width - a), h + s.width > n && (h = n - s.width));
         break;
       case "up":
-        if (o = e.top - s.height - a, d = e.left + e.width / 2 - s.width / 2, o < 0) {
+        if (o = e.top - s.height - a, h = e.left + e.width / 2 - s.width / 2, o < 0) {
           const c = e.bottom + a;
-          c + s.height <= n ? (l = "down", o = c) : (o = Math.min(n - s.height - a, n - s.height), o < 0 && (o = n - s.height));
+          c + s.height <= r ? (l = "down", o = c) : (o = Math.min(r - s.height - a, r - s.height), o < 0 && (o = r - s.height));
         }
-        d < 0 && (d = a), d + s.width > r && (d = Math.max(a, r - s.width - a), d + s.width > r && (d = r - s.width));
+        h < 0 && (h = a), h + s.width > n && (h = Math.max(a, n - s.width - a), h + s.width > n && (h = n - s.width));
         break;
       case "right":
-        if (o = e.top + e.height / 2 - s.height / 2, d = e.right + a, d + s.width > r) {
+        if (o = e.top + e.height / 2 - s.height / 2, h = e.right + a, h + s.width > n) {
           const c = e.left - s.width - a;
-          c >= 0 ? (l = "left", d = c) : (d = Math.max(0, r - s.width - a), d + s.width > r && (d = r - s.width));
+          c >= 0 ? (l = "left", h = c) : (h = Math.max(0, n - s.width - a), h + s.width > n && (h = n - s.width));
         }
-        o < 0 && (o = a), o + s.height > n && (o = Math.max(a, n - s.height - a), o + s.height > n && (o = n - s.height));
+        o < 0 && (o = a), o + s.height > r && (o = Math.max(a, r - s.height - a), o + s.height > r && (o = r - s.height));
         break;
       case "left":
-        if (o = e.top + e.height / 2 - s.height / 2, d = e.left - s.width - a, d < 0) {
+        if (o = e.top + e.height / 2 - s.height / 2, h = e.left - s.width - a, h < 0) {
           const c = e.right + a;
-          c + s.width <= r ? (l = "right", d = c) : (d = Math.min(r - s.width - a, r - s.width), d < 0 && (d = 0));
+          c + s.width <= n ? (l = "right", h = c) : (h = Math.min(n - s.width - a, n - s.width), h < 0 && (h = 0));
         }
-        o < 0 && (o = a), o + s.height > n && (o = Math.max(a, n - s.height - a), o + s.height > n && (o = n - s.height));
+        o < 0 && (o = a), o + s.height > r && (o = Math.max(a, r - s.height - a), o + s.height > r && (o = r - s.height));
         break;
     }
-    return { top: o, left: d, direction: l };
+    return { top: o, left: h, direction: l };
   }
   render() {
     const e = this.getId(), t = this.isOpen(), i = this.getPadding();
     if (e && (this.id = e), t) {
       if (this.classList.remove("hidden"), this.style.pointerEvents = "auto", !this._clickOutsideHandler) {
-        const n = this;
+        const r = this;
         this._clickOutsideHandler = function(a) {
-          const l = a.composedPath(), o = l.includes(n);
-          if (!(n._triggerElement && l.includes(n._triggerElement)) && !o) {
-            n.close();
+          const l = a.composedPath(), o = l.includes(r);
+          if (!(r._triggerElement && l.includes(r._triggerElement)) && !o) {
+            r.close();
             return;
           }
         }, setTimeout(() => {
@@ -1612,11 +1612,11 @@ class X extends HTMLElement {
     if (!s)
       s = document.createElement("div"), s.className = `popover-content bg-white dark:bg-gray-800 rounded-lg shadow-xl ${i} transition-all duration-200 ease-out transform`, this._popover.appendChild(s);
     else {
-      const n = s.className.split(" "), a = ["p-0", "p-0.5", "p-1", "p-1.5", "p-2", "p-2.5", "p-3", "p-3.5", "p-4", "p-5", "p-6", "p-8", "p-10", "p-12", "p-16", "p-20", "p-24"], l = n.filter((o) => !a.includes(o));
+      const r = s.className.split(" "), a = ["p-0", "p-0.5", "p-1", "p-1.5", "p-2", "p-2.5", "p-3", "p-3.5", "p-4", "p-5", "p-6", "p-8", "p-10", "p-12", "p-16", "p-20", "p-24"], l = r.filter((o) => !a.includes(o));
       s.className = [...l, i].join(" ");
     }
-    Array.from(this.children).forEach((n) => {
-      n !== this._overlay && n !== this._popover && n.parentElement === this && s.appendChild(n);
+    Array.from(this.children).forEach((r) => {
+      r !== this._overlay && r !== this._popover && r.parentElement === this && s.appendChild(r);
     }), t ? (this._triggerElement || this._setupTrigger(), this._setupPositionListeners(), this.offsetHeight, this._triggerElement ? this._updatePosition(s) : (this._popover.style.top = "50%", this._popover.style.left = "50%", this._popover.style.transform = "translate(-50%, -50%)", this._popover.style.visibility = "visible", this._popover.style.display = "block", s.style.transform = "scale(0.97) translateY(10px)", s.style.opacity = "0", s.style.transition = "all 200ms ease-out", requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         s.style.transform = "scale(1) translateY(0)", s.style.opacity = "1";
@@ -1780,24 +1780,24 @@ class K extends HTMLElement {
   }
   render() {
     const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.isDisabled();
-    let r = this.querySelector(".mint-checkbox-container");
-    r || (r = document.createElement("div"), r.className = "mint-checkbox-container relative inline-flex items-start gap-2", this.insertBefore(r, this.firstChild));
-    let n = this.querySelector(".mint-checkbox-wrapper");
-    n ? n.parentElement !== r && r.appendChild(n) : (n = document.createElement("div"), n.className = "mint-checkbox-wrapper", r.appendChild(n)), this._checkbox ? this._checkbox.parentElement !== n && n.appendChild(this._checkbox) : (this._checkbox = document.createElement("input"), this._checkbox.type = "checkbox", n.appendChild(this._checkbox), this.setupEventListeners()), this._checkbox.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._checkbox.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0;", this._checkbox.checked = this._checked, this._checkbox.disabled = s, this._changeHandler || this.setupEventListeners();
+    let n = this.querySelector(".mint-checkbox-container");
+    n || (n = document.createElement("div"), n.className = "mint-checkbox-container relative inline-flex items-start gap-2", this.insertBefore(n, this.firstChild));
+    let r = this.querySelector(".mint-checkbox-wrapper");
+    r ? r.parentElement !== n && n.appendChild(r) : (r = document.createElement("div"), r.className = "mint-checkbox-wrapper", n.appendChild(r)), this._checkbox ? this._checkbox.parentElement !== r && r.appendChild(this._checkbox) : (this._checkbox = document.createElement("input"), this._checkbox.type = "checkbox", r.appendChild(this._checkbox), this.setupEventListeners()), this._checkbox.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._checkbox.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0;", this._checkbox.checked = this._checked, this._checkbox.disabled = s, this._changeHandler || this.setupEventListeners();
     const a = this.getId();
     a ? this._checkbox.id = a : this._checkbox.removeAttribute("id");
     const l = this.getName();
     l ? this._checkbox.name = l : this._checkbox.removeAttribute("name");
     const o = this.getValue();
-    o ? this._checkbox.value = o : this._checkbox.removeAttribute("value"), t ? this._checkbox.setAttribute("aria-label", t) : this._checkbox.removeAttribute("aria-label"), n.className = `mint-checkbox-wrapper ${this.getCheckboxClasses()}`, n.style.pointerEvents = "none", this._checkbox.style.pointerEvents = "auto";
-    let d = n.querySelector("mint-icon");
-    d || (d = document.createElement("mint-icon"), d.setAttribute("name", "check"), d.className = "w-3.5 h-3.5 text-white pointer-events-none absolute inset-0 m-auto", d.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", d.style.zIndex = "1", n.appendChild(d)), this.updateVisualState();
+    o ? this._checkbox.value = o : this._checkbox.removeAttribute("value"), t ? this._checkbox.setAttribute("aria-label", t) : this._checkbox.removeAttribute("aria-label"), r.className = `mint-checkbox-wrapper ${this.getCheckboxClasses()}`, r.style.pointerEvents = "none", this._checkbox.style.pointerEvents = "auto";
+    let h = r.querySelector("mint-icon");
+    h || (h = document.createElement("mint-icon"), h.setAttribute("name", "check"), h.className = "w-3.5 h-3.5 text-white pointer-events-none absolute inset-0 m-auto", h.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", h.style.zIndex = "1", r.appendChild(h)), this.updateVisualState();
     let c = this.querySelector(".mint-checkbox-label-container");
     const m = this.querySelector(".mint-checkbox-container");
     if (t || i) {
       c ? m && c.parentElement !== m && m.appendChild(c) : (c = document.createElement("div"), c.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", m ? m.appendChild(c) : this.appendChild(c));
-      let h = c.querySelector(".mint-checkbox-label");
-      t ? (h || (h = document.createElement("span"), h.className = "mint-checkbox-label text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer select-none", c.insertBefore(h, c.firstChild)), h.textContent = t, s ? h.classList.add("opacity-40") : h.classList.remove("opacity-40")) : h && h.remove();
+      let d = c.querySelector(".mint-checkbox-label");
+      t ? (d || (d = document.createElement("span"), d.className = "mint-checkbox-label text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer select-none", c.insertBefore(d, c.firstChild)), d.textContent = t, s ? d.classList.add("opacity-40") : d.classList.remove("opacity-40")) : d && d.remove();
       let f = c.querySelector(".mint-checkbox-info");
       if (i ? (f || (f = document.createElement("span"), f.className = "mint-checkbox-info text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none", c.appendChild(f)), f.textContent = i, s ? f.classList.add("opacity-40") : f.classList.remove("opacity-40")) : f && f.remove(), s)
         c.style.cursor = "default", c._clickHandler && (c.removeEventListener("click", c._clickHandler), c._clickHandler = null);
@@ -1869,17 +1869,17 @@ class K extends HTMLElement {
   }
   _renderSkeleton(e) {
     let t = this.querySelector(".mint-checkbox-skeleton-container");
-    const i = this.querySelector(".mint-checkbox-container"), s = this.querySelector(".mint-checkbox-wrapper"), r = this.querySelector(".mint-checkbox-label-container");
+    const i = this.querySelector(".mint-checkbox-container"), s = this.querySelector(".mint-checkbox-wrapper"), n = this.querySelector(".mint-checkbox-label-container");
     if (e) {
       t || (t = document.createElement("div"), t.className = "mint-checkbox-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center gap-2", i ? i.appendChild(t) : (this.style.position = "relative", this.appendChild(t)));
-      let n = t.querySelector(".mint-checkbox-skeleton-box");
-      if (n || (n = document.createElement("div"), n.className = "mint-checkbox-skeleton-box flex-shrink-0 w-5 h-5 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(n)), r) {
+      let r = t.querySelector(".mint-checkbox-skeleton-box");
+      if (r || (r = document.createElement("div"), r.className = "mint-checkbox-skeleton-box flex-shrink-0 w-5 h-5 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(r)), n) {
         let a = t.querySelector(".mint-checkbox-skeleton-label");
         a || (a = document.createElement("div"), a.className = "mint-checkbox-skeleton-label h-4 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(a));
       }
-      t.style.display = "flex", s && (s.style.visibility = "hidden", s.style.pointerEvents = "none"), r && (r.style.visibility = "hidden", r.style.pointerEvents = "none");
+      t.style.display = "flex", s && (s.style.visibility = "hidden", s.style.pointerEvents = "none"), n && (n.style.visibility = "hidden", n.style.pointerEvents = "none");
     } else
-      t && (t.style.display = "none"), s && (s.style.visibility = "visible", s.style.pointerEvents = "auto"), r && (r.style.visibility = "visible", r.style.pointerEvents = "auto");
+      t && (t.style.display = "none"), s && (s.style.visibility = "visible", s.style.pointerEvents = "auto"), n && (n.style.visibility = "visible", n.style.pointerEvents = "auto");
   }
   _renderErrorState() {
     const e = this.hasError(), t = this.getErrorMessage();
@@ -1887,8 +1887,8 @@ class K extends HTMLElement {
     !i && e && t && (i = document.createElement("div"), i.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", this.appendChild(i));
     let s = this.querySelector(".mint-checkbox-error");
     e && t ? (s ? (s.classList.add("block", "w-full"), s.style.display = "block", (i && s.parentElement !== i || i && s.parentElement === i) && i.appendChild(s)) : (s = document.createElement("div"), s.className = "mint-checkbox-error text-xs text-red-600 dark:text-red-400 block w-full", s.style.display = "block", i ? i.appendChild(s) : this.appendChild(s)), s.textContent = t) : s && s.remove();
-    const r = this.querySelector(".mint-checkbox-wrapper");
-    r && (r.className = `mint-checkbox-wrapper ${this.getCheckboxClasses()}`);
+    const n = this.querySelector(".mint-checkbox-wrapper");
+    n && (n.className = `mint-checkbox-wrapper ${this.getCheckboxClasses()}`);
   }
 }
 customElements.get("mint-checkbox") || customElements.define("mint-checkbox", K);
@@ -1951,14 +1951,14 @@ class Z extends HTMLElement {
   }
   render() {
     var f;
-    const e = this.isLoading(), t = this.isDisabled(), i = this.getValue(), s = this.closest("mint-choice"), r = (s == null ? void 0 : s.getAttribute("name")) || "";
-    let n = "";
+    const e = this.isLoading(), t = this.isDisabled(), i = this.getValue(), s = this.closest("mint-choice"), n = (s == null ? void 0 : s.getAttribute("name")) || "";
+    let r = "";
     const a = this.querySelector(".mint-choice-option-label");
-    a ? n = ((f = a.textContent) == null ? void 0 : f.trim()) || "" : Array.from(this.childNodes).forEach((u) => {
+    a ? r = ((f = a.textContent) == null ? void 0 : f.trim()) || "" : Array.from(this.childNodes).forEach((u) => {
       var p;
       if (u.nodeType === Node.TEXT_NODE) {
         const _ = (p = u.textContent) == null ? void 0 : p.trim();
-        _ && (n += _);
+        _ && (r += _);
       }
     });
     const l = this.querySelectorAll(".mint-choice-option-wrapper");
@@ -2003,16 +2003,16 @@ class Z extends HTMLElement {
         this.isDisabled() || (p.key === "ArrowDown" || p.key === "ArrowRight" ? (p.preventDefault(), this._focusNextOption()) : (p.key === "ArrowUp" || p.key === "ArrowLeft") && (p.preventDefault(), this._focusPreviousOption()));
       }, this._radio.addEventListener("keydown", this._keydownHandler);
     }
-    this._radio.name = r, this._radio.value = i, this._radio.checked !== this._checked ? (this._checked = this._radio.checked, this._checked ? this.hasAttribute("checked") || this.setAttribute("checked", "") : this.hasAttribute("checked") && this.removeAttribute("checked")) : this._radio.checked = this._checked, this._radio.disabled = t, t ? this._radio.setAttribute("tabindex", "-1") : this._radio.removeAttribute("tabindex"), n ? this._radio.setAttribute("aria-label", n) : this._radio.removeAttribute("aria-label"), o.querySelectorAll(".mint-choice-option-indicator").forEach((u, p) => {
+    this._radio.name = n, this._radio.value = i, this._radio.checked !== this._checked ? (this._checked = this._radio.checked, this._checked ? this.hasAttribute("checked") || this.setAttribute("checked", "") : this.hasAttribute("checked") && this.removeAttribute("checked")) : this._radio.checked = this._checked, this._radio.disabled = t, t ? this._radio.setAttribute("tabindex", "-1") : this._radio.removeAttribute("tabindex"), r ? this._radio.setAttribute("aria-label", r) : this._radio.removeAttribute("aria-label"), o.querySelectorAll(".mint-choice-option-indicator").forEach((u, p) => {
       p > 0 && u.remove();
     });
     let m = o.querySelector(".mint-choice-option-indicator");
     m || (m = document.createElement("div"), m.className = "mint-choice-option-indicator", o.appendChild(m)), m.className = "mint-choice-option-indicator w-2 h-2 rounded-full bg-white transition-all duration-200 pointer-events-none", m.style.position = "absolute", m.style.top = "50%", m.style.left = "50%", m.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)", m.style.opacity = this._checked ? "1" : "0", this._updateVisualState(), this._renderSkeleton(e);
-    let h = this.querySelector(".mint-choice-option-label");
-    n && (h || (h = document.createElement("span"), h.className = "mint-choice-option-label", this.appendChild(h), Array.from(this.childNodes).forEach((u) => {
+    let d = this.querySelector(".mint-choice-option-label");
+    r && (d || (d = document.createElement("span"), d.className = "mint-choice-option-label", this.appendChild(d), Array.from(this.childNodes).forEach((u) => {
       var p;
       u.nodeType === Node.TEXT_NODE && ((p = u.textContent) != null && p.trim()) && (u.textContent = "");
-    })), h.className = `mint-choice-option-label text-sm text-gray-900 dark:text-gray-100 ${t ? "opacity-40" : ""}`, h.textContent = n), t ? (this.classList.add("cursor-not-allowed"), this.classList.remove("cursor-pointer")) : (this.classList.add("cursor-pointer"), this.classList.remove("cursor-not-allowed")), this._updateVisualState();
+    })), d.className = `mint-choice-option-label text-sm text-gray-900 dark:text-gray-100 ${t ? "opacity-40" : ""}`, d.textContent = r), t ? (this.classList.add("cursor-not-allowed"), this.classList.remove("cursor-pointer")) : (this.classList.add("cursor-pointer"), this.classList.remove("cursor-not-allowed")), this._updateVisualState();
   }
   _getWrapperClasses() {
     const e = this.isDisabled(), t = [
@@ -2052,13 +2052,13 @@ class Z extends HTMLElement {
       t || (t = document.createElement("div"), t.className = "mint-choice-option-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center gap-2", i ? (i.classList.contains("relative") || i.classList.add("relative"), i.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
       let s = t.querySelector(".mint-choice-option-skeleton-radio");
       if (s || (s = document.createElement("div"), s.className = "mint-choice-option-skeleton-radio flex-shrink-0 w-5 h-5 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(s)), t.style.display = "flex", i) {
-        const r = i.querySelector('input[type="radio"]'), n = i.querySelector(".mint-choice-option-indicator");
-        r && (r.style.visibility = "hidden"), n && (n.style.visibility = "hidden"), i.style.pointerEvents = "none";
+        const n = i.querySelector('input[type="radio"]'), r = i.querySelector(".mint-choice-option-indicator");
+        n && (n.style.visibility = "hidden"), r && (r.style.visibility = "hidden"), i.style.pointerEvents = "none";
       }
     } else {
       if (t && (t.style.display = "none"), i) {
-        const r = i.querySelector('input[type="radio"]'), n = i.querySelector(".mint-choice-option-indicator");
-        r && (r.style.visibility = "visible"), n && (n.style.visibility = "visible"), i.style.pointerEvents = "auto";
+        const n = i.querySelector('input[type="radio"]'), r = i.querySelector(".mint-choice-option-indicator");
+        n && (n.style.visibility = "visible"), r && (r.style.visibility = "visible"), i.style.pointerEvents = "auto";
       }
       const s = this.querySelector(".mint-choice-option-label");
       s && !(i != null && i.contains(s)) && (s.style.visibility = "visible", s.style.pointerEvents = "auto");
@@ -2080,21 +2080,21 @@ class Z extends HTMLElement {
     if (!((s = this._radio) != null && s.name)) return;
     const e = Array.from(document.querySelectorAll(
       `input[type="radio"][name="${this._radio.name}"]`
-    )).filter((r) => !r.disabled), t = e.indexOf(this._radio);
+    )).filter((n) => !n.disabled), t = e.indexOf(this._radio);
     let i = null;
     if (t >= 0 && t < e.length - 1 ? i = e[t + 1] : e.length > 0 && (i = e[0]), i) {
-      const r = i.closest("mint-choice-option");
-      if (i.checked = !0, r) {
-        const n = r._checked;
-        if (r._checked = !0, r.setAttribute("checked", ""), r._changeHandler) {
+      const n = i.closest("mint-choice-option");
+      if (i.checked = !0, n) {
+        const r = n._checked;
+        if (n._checked = !0, n.setAttribute("checked", ""), n._changeHandler) {
           const l = new Event("change", { bubbles: !0 });
-          r._changeHandler.call(r, l);
+          n._changeHandler.call(n, l);
         } else
-          r._updateVisualState(), r._updateGroupState();
-        const a = r.closest("mint-choice");
-        a && !n && setTimeout(() => {
+          n._updateVisualState(), n._updateGroupState();
+        const a = n.closest("mint-choice");
+        a && !r && setTimeout(() => {
           a.dispatchEvent(new CustomEvent("choice-change", {
-            detail: { checked: !0, value: r.getValue() },
+            detail: { checked: !0, value: n.getValue() },
             bubbles: !0,
             cancelable: !0
           }));
@@ -2108,21 +2108,21 @@ class Z extends HTMLElement {
     if (!((s = this._radio) != null && s.name)) return;
     const e = Array.from(document.querySelectorAll(
       `input[type="radio"][name="${this._radio.name}"]`
-    )).filter((r) => !r.disabled), t = e.indexOf(this._radio);
+    )).filter((n) => !n.disabled), t = e.indexOf(this._radio);
     let i = null;
     if (t > 0 ? i = e[t - 1] : e.length > 0 && (i = e[e.length - 1]), i) {
-      const r = i.closest("mint-choice-option");
-      if (i.checked = !0, r) {
-        const n = r._checked;
-        if (r._checked = !0, r.setAttribute("checked", ""), r._changeHandler) {
+      const n = i.closest("mint-choice-option");
+      if (i.checked = !0, n) {
+        const r = n._checked;
+        if (n._checked = !0, n.setAttribute("checked", ""), n._changeHandler) {
           const l = new Event("change", { bubbles: !0 });
-          r._changeHandler.call(r, l);
+          n._changeHandler.call(n, l);
         } else
-          r._updateVisualState(), r._updateGroupState();
-        const a = r.closest("mint-choice");
-        a && !n && setTimeout(() => {
+          n._updateVisualState(), n._updateGroupState();
+        const a = n.closest("mint-choice");
+        a && !r && setTimeout(() => {
           a.dispatchEvent(new CustomEvent("choice-change", {
-            detail: { checked: !0, value: r.getValue() },
+            detail: { checked: !0, value: n.getValue() },
             bubbles: !0,
             cancelable: !0
           }));
@@ -2149,10 +2149,10 @@ class Q extends HTMLElement {
     return this.hasAttribute("loading");
   }
   attributeChangedCallback(e, t, i) {
-    t !== i && (e === "error" || e === "error-message" ? this._renderErrorState() : e === "loading" ? (this.render(), this.querySelectorAll("mint-choice-option").forEach((r) => {
-      this.isLoading() ? r.setAttribute("loading", "") : r.removeAttribute("loading");
-    })) : (this.render(), e === "name" && this.querySelectorAll("mint-choice-option").forEach((r) => {
-      typeof r.render == "function" && r.render();
+    t !== i && (e === "error" || e === "error-message" ? this._renderErrorState() : e === "loading" ? (this.render(), this.querySelectorAll("mint-choice-option").forEach((n) => {
+      this.isLoading() ? n.setAttribute("loading", "") : n.removeAttribute("loading");
+    })) : (this.render(), e === "name" && this.querySelectorAll("mint-choice-option").forEach((n) => {
+      typeof n.render == "function" && n.render();
     })));
   }
   getLabel() {
@@ -2187,23 +2187,23 @@ class Q extends HTMLElement {
     const t = this.querySelectorAll("mint-choice-option");
     t.forEach((i) => {
       if ((i.getAttribute("value") || "") === e) {
-        const r = i;
-        r.checked = !0;
-        const n = i.querySelector('input[type="radio"]');
-        n && (n.checked = !0, n.dispatchEvent(new Event("change", { bubbles: !0 })));
+        const n = i;
+        n.checked = !0;
+        const r = i.querySelector('input[type="radio"]');
+        r && (r.checked = !0, r.dispatchEvent(new Event("change", { bubbles: !0 })));
       } else {
-        const r = i;
-        r.checked = !1;
-        const n = i.querySelector('input[type="radio"]');
-        n && (n.checked = !1);
+        const n = i;
+        n.checked = !1;
+        const r = i.querySelector('input[type="radio"]');
+        r && (r.checked = !1);
       }
     }), requestAnimationFrame(() => {
       t.forEach((i) => {
         typeof i._updateVisualState == "function" && i._updateVisualState();
         const s = i.querySelector('input[type="radio"]');
         if (s) {
-          const r = i;
-          s.checked !== r.checked && (s.checked = r.checked);
+          const n = i;
+          s.checked !== n.checked && (s.checked = n.checked);
         }
       });
     });
@@ -2211,15 +2211,15 @@ class Q extends HTMLElement {
   render() {
     const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.getId() || `mint-choice-${Math.random().toString(36).substr(2, 9)}`;
     this.getId() || this.setAttribute("id", s);
-    const r = this.isDisabled();
-    let n = this.querySelector(".mint-choice-label-container");
+    const n = this.isDisabled();
+    let r = this.querySelector(".mint-choice-label-container");
     if (t || i) {
-      n || (n = document.createElement("div"), n.className = "mint-choice-label-container flex flex-col gap-0.5 mb-2", this.insertBefore(n, this.firstChild));
-      let o = n.querySelector(".mint-choice-label");
-      t ? (o || (o = document.createElement("label"), o.className = "mint-choice-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", n.insertBefore(o, n.firstChild)), o.textContent = t, o.setAttribute("for", s), r ? o.classList.add("opacity-40") : o.classList.remove("opacity-40")) : o && o.remove();
-      let d = n.querySelector(".mint-choice-info");
-      i ? (d || (d = document.createElement("span"), d.className = "mint-choice-info text-xs text-gray-500 dark:text-gray-400 select-none", n.appendChild(d)), d.textContent = i, r ? d.classList.add("opacity-40") : d.classList.remove("opacity-40")) : d && d.remove();
-    } else n && n.remove();
+      r || (r = document.createElement("div"), r.className = "mint-choice-label-container flex flex-col gap-0.5 mb-2", this.insertBefore(r, this.firstChild));
+      let o = r.querySelector(".mint-choice-label");
+      t ? (o || (o = document.createElement("label"), o.className = "mint-choice-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", r.insertBefore(o, r.firstChild)), o.textContent = t, o.setAttribute("for", s), n ? o.classList.add("opacity-40") : o.classList.remove("opacity-40")) : o && o.remove();
+      let h = r.querySelector(".mint-choice-info");
+      i ? (h || (h = document.createElement("span"), h.className = "mint-choice-info text-xs text-gray-500 dark:text-gray-400 select-none", r.appendChild(h)), h.textContent = i, n ? h.classList.add("opacity-40") : h.classList.remove("opacity-40")) : h && h.remove();
+    } else r && r.remove();
     let a = this.querySelector(".mint-choice-options-wrapper");
     if (!a) {
       a = document.createElement("div"), a.className = "mint-choice-options-wrapper relative";
@@ -2237,7 +2237,7 @@ class Q extends HTMLElement {
     const i = this.querySelector(".mint-choice-options-wrapper"), s = this.querySelector(".mint-choice-options-container");
     if (e) {
       if (t || (t = document.createElement("div"), t.className = "mint-choice-skeleton-container absolute inset-0 z-10 pointer-events-none flex flex-col gap-3", i ? i.appendChild(t) : (this.style.position = "relative", this.appendChild(t))), t.querySelectorAll(".mint-choice-option-skeleton").length === 0)
-        for (let n = 0; n < 3; n++) {
+        for (let r = 0; r < 3; r++) {
           const a = document.createElement("div");
           a.className = "mint-choice-option-skeleton flex items-center gap-3";
           const l = document.createElement("div");
@@ -2349,7 +2349,7 @@ class ee extends HTMLElement {
     return this.getAttribute("info") || "";
   }
   getInputClasses() {
-    const e = this._isTextarea(), t = !!this.getIcon(), i = this._isColor(), s = this._isNumber(), r = this.hasError(), n = [
+    const e = this._isTextarea(), t = !!this.getIcon(), i = this._isColor(), s = this._isNumber(), n = this.hasError(), r = [
       "w-full",
       t || i ? "pl-10" : "px-3.5",
       t || i ? "pr-3.5" : s ? "pr-10" : "",
@@ -2376,13 +2376,13 @@ class ee extends HTMLElement {
       s ? "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" : ""
     ], a = [
       "border-2",
-      r ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-600"
+      n ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-600"
     ], l = [
       "focus-visible:ring-2",
       "focus-visible:ring-offset-1",
-      r ? "focus-visible:ring-red-400 dark:focus-visible:ring-red-500" : "focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500"
+      n ? "focus-visible:ring-red-400 dark:focus-visible:ring-red-500" : "focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500"
     ];
-    return [...n, ...a, ...l].filter(Boolean).join(" ");
+    return [...r, ...a, ...l].filter(Boolean).join(" ");
   }
   isLoading() {
     return this.hasAttribute("loading");
@@ -2390,7 +2390,7 @@ class ee extends HTMLElement {
   render() {
     var y, x, k, E;
     this.getType();
-    const e = this._getNormalizedType(), t = this._isTextarea(), i = this._isMoney(), s = this._isColor(), r = this.getPlaceholder(), n = this.isDisabled(), a = this.isReadonly(), l = this.isRequired(), o = this.getId(), d = this.getName(), c = this.getAttribute("value") || (s ? "#000000" : ""), m = this.getRows(), h = this.getIcon(), f = this.getLabel(), u = this.getInfo(), p = this.isLoading();
+    const e = this._getNormalizedType(), t = this._isTextarea(), i = this._isMoney(), s = this._isColor(), n = this.getPlaceholder(), r = this.isDisabled(), a = this.isReadonly(), l = this.isRequired(), o = this.getId(), h = this.getName(), c = this.getAttribute("value") || (s ? "#000000" : ""), m = this.getRows(), d = this.getIcon(), f = this.getLabel(), u = this.getInfo(), p = this.isLoading();
     if (this._renderSkeleton(p), s) {
       this._input && (this._input.remove(), this._input = null), this._textarea && (this._textarea.remove(), this._textarea = null), this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null), this._colorPickerWrapper || (this._colorPickerWrapper = document.createElement("div"), this._colorPickerWrapper.className = "mint-color-picker-wrapper absolute left-[.65rem] top-1/2 -translate-y-1/2 w-6 h-6 rounded cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", this._colorPickerWrapper.style.backgroundColor = c || "#000000", this._wrapper.appendChild(this._colorPickerWrapper), this._colorPicker = document.createElement("input"), this._colorPicker.type = "color", this._colorPicker.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._colorPicker.style.cssText = "position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 10; pointer-events: auto; margin: 0; padding: 0; border: none;", this._colorPickerWrapper.appendChild(this._colorPicker), this._focusHandler = (v) => {
         this._colorPickerWrapper && this._colorPicker && this._colorPicker.matches(":focus-visible") && requestAnimationFrame(() => {
@@ -2415,7 +2415,7 @@ class ee extends HTMLElement {
           bubbles: !0,
           cancelable: !0
         }));
-      })), this._colorTextInput || (this._colorTextInput = document.createElement("input"), this._colorTextInput.type = "text", this._colorTextInput.className = this.getInputClasses(), this._colorTextInput.placeholder = r || "#000000", this._colorTextInput.pattern = "^#[0-9A-Fa-f]{6}$", this._wrapper.appendChild(this._colorTextInput), this._colorTextInput.addEventListener("input", () => {
+      })), this._colorTextInput || (this._colorTextInput = document.createElement("input"), this._colorTextInput.type = "text", this._colorTextInput.className = this.getInputClasses(), this._colorTextInput.placeholder = n || "#000000", this._colorTextInput.pattern = "^#[0-9A-Fa-f]{6}$", this._wrapper.appendChild(this._colorTextInput), this._colorTextInput.addEventListener("input", () => {
         var C;
         const v = ((C = this._colorTextInput) == null ? void 0 : C.value) || "";
         /^#[0-9A-Fa-f]{6}$/.test(v) && (this._colorPicker && (this._colorPicker.value = v), this.setAttribute("value", v), this.dispatchEvent(new CustomEvent("input", {
@@ -2433,14 +2433,14 @@ class ee extends HTMLElement {
         }));
       }));
       const g = c || "#000000";
-      if (this._colorPicker && this._colorPicker.value !== g && (this._colorPicker.value = g), this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = g), this._colorTextInput && this._colorTextInput.value !== g && (this._colorTextInput.value = g), this._colorPicker && (this._colorPicker.disabled = n), this._colorPickerWrapper && (n ? (this._colorPickerWrapper.classList.add("opacity-40", "cursor-not-allowed"), this._colorPickerWrapper.classList.remove("cursor-pointer")) : (this._colorPickerWrapper.classList.remove("opacity-40", "cursor-not-allowed"), this._colorPickerWrapper.classList.add("cursor-pointer"))), this._colorTextInput && (this._colorTextInput.disabled = n, this._colorTextInput.readOnly = a, this._colorTextInput.required = l), this._colorTextInput) {
+      if (this._colorPicker && this._colorPicker.value !== g && (this._colorPicker.value = g), this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = g), this._colorTextInput && this._colorTextInput.value !== g && (this._colorTextInput.value = g), this._colorPicker && (this._colorPicker.disabled = r), this._colorPickerWrapper && (r ? (this._colorPickerWrapper.classList.add("opacity-40", "cursor-not-allowed"), this._colorPickerWrapper.classList.remove("cursor-pointer")) : (this._colorPickerWrapper.classList.remove("opacity-40", "cursor-not-allowed"), this._colorPickerWrapper.classList.add("cursor-pointer"))), this._colorTextInput && (this._colorTextInput.disabled = r, this._colorTextInput.readOnly = a, this._colorTextInput.required = l), this._colorTextInput) {
         const v = this._colorTextInput;
-        o ? v.id = o : v.removeAttribute("id"), d ? v.name = d : v.removeAttribute("name"), v.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), this._element = v;
+        o ? v.id = o : v.removeAttribute("id"), h ? v.name = h : v.removeAttribute("name"), v.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), this._element = v;
       }
       this._renderErrorState();
       return;
     }
-    if (this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null, this._colorPicker = null, this._colorTextInput = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null, this._colorPicker = null, this._colorTextInput = null), h && !t ? this._icon ? this._icon.setAttribute("name", h) : (this._icon = document.createElement("mint-icon"), this._icon.setAttribute("name", h), this._icon.className = "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500 pointer-events-none", this._wrapper.appendChild(this._icon)) : this._icon && (this._icon.remove(), this._icon = null), this._isNumber() && !t) {
+    if (this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper)), this._colorContainer && (this._colorContainer.remove(), this._colorContainer = null, this._colorPicker = null, this._colorTextInput = null), this._colorPickerWrapper && !s && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null, this._colorPicker = null, this._colorTextInput = null), d && !t ? this._icon ? this._icon.setAttribute("name", d) : (this._icon = document.createElement("mint-icon"), this._icon.setAttribute("name", d), this._icon.className = "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500 pointer-events-none", this._wrapper.appendChild(this._icon)) : this._icon && (this._icon.remove(), this._icon = null), this._isNumber() && !t) {
       if (!this._numberSpinnerContainer) {
         this._numberSpinnerContainer = document.createElement("div"), this._numberSpinnerContainer.className = "absolute right-1 top-1/2 -translate-y-1/2 flex flex-col h-8 pointer-events-none", this._wrapper.appendChild(this._numberSpinnerContainer), this._numberIncrementButton = document.createElement("button"), this._numberIncrementButton.type = "button", this._numberIncrementButton.className = "flex items-center justify-center w-5 h-4 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-40 disabled:cursor-not-allowed transition-colors pointer-events-auto bg-gray-100 dark:bg-gray-600 active:bg-gray-200 dark:active:bg-gray-500 rounded";
         const g = document.createElement("mint-icon");
@@ -2448,26 +2448,26 @@ class ee extends HTMLElement {
         const v = document.createElement("mint-icon");
         v.setAttribute("name", "caret-down"), v.className = "w-[1rem] h-[1rem]", this._numberDecrementButton.appendChild(v), this._numberSpinnerContainer.appendChild(this._numberDecrementButton), this._numberIncrementButton.addEventListener("click", (C) => {
           if (C.preventDefault(), C.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
-            const A = parseFloat(this._input.value) || 0, T = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, H = this._input.max ? parseFloat(this._input.max) : void 0;
-            let L = A + T;
-            H !== void 0 && L > H && (L = H), S !== void 0 && L < S && (L = S), this._input.value = L.toString(), this.setAttribute("value", L.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
+            const A = parseFloat(this._input.value) || 0, D = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, I = this._input.max ? parseFloat(this._input.max) : void 0;
+            let L = A + D;
+            I !== void 0 && L > I && (L = I), S !== void 0 && L < S && (L = S), this._input.value = L.toString(), this.setAttribute("value", L.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
           }
         }), this._numberDecrementButton.addEventListener("click", (C) => {
           if (C.preventDefault(), C.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
-            const A = parseFloat(this._input.value) || 0, T = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, H = this._input.max ? parseFloat(this._input.max) : void 0;
-            let L = A - T;
-            S !== void 0 && L < S && (L = S), H !== void 0 && L > H && (L = H), this._input.value = L.toString(), this.setAttribute("value", L.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
+            const A = parseFloat(this._input.value) || 0, D = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, I = this._input.max ? parseFloat(this._input.max) : void 0;
+            let L = A - D;
+            S !== void 0 && L < S && (L = S), I !== void 0 && L > I && (L = I), this._input.value = L.toString(), this.setAttribute("value", L.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
           }
         });
       }
-      this._numberIncrementButton && (this._numberIncrementButton.disabled = n || a), this._numberDecrementButton && (this._numberDecrementButton.disabled = n || a);
+      this._numberIncrementButton && (this._numberIncrementButton.disabled = r || a), this._numberDecrementButton && (this._numberDecrementButton.disabled = r || a);
     } else this._numberSpinnerContainer && (this._numberSpinnerContainer.remove(), this._numberSpinnerContainer = null, this._numberIncrementButton = null, this._numberDecrementButton = null);
     if (t) {
-      if (this._input && (this._input.remove(), this._input = null), this._textarea || (this._textarea = document.createElement("textarea"), this._wrapper.appendChild(this._textarea), this.setupEventListeners()), this._element = this._textarea, this._textarea.placeholder = r, this._textarea.disabled = n, this._textarea.readOnly = a, this._textarea.required = l, this._textarea.rows = m, this._textarea.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), c !== this._textarea.value && (this._textarea.value = c), o ? this._textarea.id = o : this._textarea.removeAttribute("id"), d ? this._textarea.name = d : this._textarea.removeAttribute("name"), this._textarea.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
+      if (this._input && (this._input.remove(), this._input = null), this._textarea || (this._textarea = document.createElement("textarea"), this._wrapper.appendChild(this._textarea), this.setupEventListeners()), this._element = this._textarea, this._textarea.placeholder = n, this._textarea.disabled = r, this._textarea.readOnly = a, this._textarea.required = l, this._textarea.rows = m, this._textarea.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), c !== this._textarea.value && (this._textarea.value = c), o ? this._textarea.id = o : this._textarea.removeAttribute("id"), h ? this._textarea.name = h : this._textarea.removeAttribute("name"), this._textarea.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
         const g = this.firstChild.textContent;
         g && !this._textarea.value && (this._textarea.value = g.trim()), this.removeChild(this.firstChild);
       }
-    } else if (this._textarea && (this._textarea.remove(), this._textarea = null), this._input || (this._input = document.createElement("input"), this._wrapper.appendChild(this._input), this.setupEventListeners()), this._element = this._input, this._input.type = e, this._input.placeholder = r, this._input.disabled = n, this._input.readOnly = a, this._input.required = l, this._input.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), i ? (this._input.inputMode = "decimal", this._input.pattern = "[0-9]*\\.?[0-9]*") : (this._input.removeAttribute("inputmode"), this._input.removeAttribute("pattern")), c !== this._input.value && (this._input.value = c), o ? this._input.id = o : this._input.removeAttribute("id"), d ? this._input.name = d : this._input.removeAttribute("name"), this._input.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
+    } else if (this._textarea && (this._textarea.remove(), this._textarea = null), this._input || (this._input = document.createElement("input"), this._wrapper.appendChild(this._input), this.setupEventListeners()), this._element = this._input, this._input.type = e, this._input.placeholder = n, this._input.disabled = r, this._input.readOnly = a, this._input.required = l, this._input.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), i ? (this._input.inputMode = "decimal", this._input.pattern = "[0-9]*\\.?[0-9]*") : (this._input.removeAttribute("inputmode"), this._input.removeAttribute("pattern")), c !== this._input.value && (this._input.value = c), o ? this._input.id = o : this._input.removeAttribute("id"), h ? this._input.name = h : this._input.removeAttribute("name"), this._input.className = this.getInputClasses(), this.firstChild && this.firstChild !== this._wrapper && this.firstChild.nodeType === Node.TEXT_NODE) {
       const g = this.firstChild.textContent;
       g && !this._input.value && (this._input.value = g.trim()), this.removeChild(this.firstChild);
     }
@@ -2484,10 +2484,10 @@ class ee extends HTMLElement {
           const A = `mint-input-${Math.random().toString(36).substr(2, 9)}`;
           this._element ? this._element.id = A : this._colorTextInput ? this._colorTextInput.id = A : this._input ? this._input.id = A : this._textarea && (this._textarea.id = A), g.setAttribute("for", A);
         }
-        n ? g.classList.add("opacity-40") : g.classList.remove("opacity-40");
+        r ? g.classList.add("opacity-40") : g.classList.remove("opacity-40");
       } else g && g.remove();
       let v = b.querySelector(".mint-input-info");
-      u ? (v || (v = document.createElement("span"), v.className = "mint-input-info text-xs text-gray-500 dark:text-gray-400 select-none", b.appendChild(v)), v.textContent = u, n ? v.classList.add("opacity-40") : v.classList.remove("opacity-40")) : v && v.remove();
+      u ? (v || (v = document.createElement("span"), v.className = "mint-input-info text-xs text-gray-500 dark:text-gray-400 select-none", b.appendChild(v)), v.textContent = u, r ? v.classList.add("opacity-40") : v.classList.remove("opacity-40")) : v && v.remove();
     } else b && b.remove();
     this._renderErrorState(), this._renderSkeleton(p);
   }
@@ -2534,9 +2534,9 @@ class ee extends HTMLElement {
       let s = t.querySelector(".mint-input-skeleton");
       if (!s) {
         s = document.createElement("div"), s.className = "mint-input-skeleton w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse";
-        const r = this._isTextarea(), n = this.getRows();
-        if (r) {
-          const a = n * 24 + 12;
+        const n = this._isTextarea(), r = this.getRows();
+        if (n) {
+          const a = r * 24 + 12;
           s.style.height = `${a}px`;
         } else
           s.style.height = "2.2rem";
@@ -2570,8 +2570,8 @@ class te extends HTMLElement {
   attributeChangedCallback(e, t, i) {
     if (t !== i) {
       if (e === "error" || e === "error-message") {
-        const s = this.hasError(), r = this.getErrorMessage();
-        this._applyErrorVisuals(s, r, this.isDisabled());
+        const s = this.hasError(), n = this.getErrorMessage();
+        this._applyErrorVisuals(s, n, this.isDisabled());
         return;
       }
       if (e === "loading") {
@@ -2645,9 +2645,9 @@ class te extends HTMLElement {
       if (i && typeof window[i] == "function") {
         const s = window[i]();
         if (Array.isArray(s))
-          return s.map((r) => ({
-            label: r.label,
-            action: typeof r.action == "function" ? r.action : this._createShortcutAction(r.action)
+          return s.map((n) => ({
+            label: n.label,
+            action: typeof n.action == "function" ? n.action : this._createShortcutAction(n.action)
           }));
       }
     }
@@ -2669,8 +2669,8 @@ class te extends HTMLElement {
         action: () => {
           const t = /* @__PURE__ */ new Date(), i = t.getDay(), s = new Date(t);
           s.setDate(t.getDate() - i), s.setHours(0, 0, 0, 0);
-          const r = new Date(s);
-          return r.setDate(s.getDate() + 6), r.setHours(23, 59, 59, 999), { start: s, end: r };
+          const n = new Date(s);
+          return n.setDate(s.getDate() + 6), n.setHours(23, 59, 59, 999), { start: s, end: n };
         }
       },
       {
@@ -2687,28 +2687,28 @@ class te extends HTMLElement {
     let i = 0;
     const s = e.toLowerCase();
     for (; i < s.length; ) {
-      const r = s[i];
-      if (r === "d" || r === "m" || r === "y") {
-        let n = 1, a = i + 1;
-        for (; a < s.length && s[a] === r; )
-          n++, a++;
-        t.push({ type: "part", part: r, len: n }), i = a;
+      const n = s[i];
+      if (n === "d" || n === "m" || n === "y") {
+        let r = 1, a = i + 1;
+        for (; a < s.length && s[a] === n; )
+          r++, a++;
+        t.push({ type: "part", part: n, len: r }), i = a;
       } else
         t.push({ type: "sep", value: e[i] }), i++;
     }
     return t;
   }
-  _createPartInput(e, t, i, s, r) {
-    const n = document.createElement("input");
-    return n.type = "text", n.inputMode = "numeric", n.pattern = "\\d*", n.maxLength = e, n.placeholder = t, n.className = "bg-transparent border-none outline-none text-center text-sm font-medium p-0 m-0 focus:outline-none focus:ring-0 disabled:opacity-40 disabled:cursor-not-allowed", n.disabled = i || s, n.readOnly = s, n.required = r, e === 4 ? n.className += " w-[40px]" : e === 2 && (n.className += " w-[30px]"), n;
+  _createPartInput(e, t, i, s, n) {
+    const r = document.createElement("input");
+    return r.type = "text", r.inputMode = "numeric", r.pattern = "\\d*", r.maxLength = e, r.placeholder = t, r.className = "bg-transparent border-none outline-none text-center text-sm font-medium p-0 m-0 focus:outline-none focus:ring-0 disabled:opacity-40 disabled:cursor-not-allowed", r.disabled = i || s, r.readOnly = s, r.required = n, e === 4 ? r.className += " w-[40px]" : e === 2 && (r.className += " w-[30px]"), r;
   }
   _buildValueFromParts(e, t) {
     let i = 0;
     return t.map((s) => {
-      var n;
+      var r;
       if (s.type === "sep") return s.value;
-      const r = ((n = e[i]) == null ? void 0 : n.value) || "";
-      return i++, r;
+      const n = ((r = e[i]) == null ? void 0 : r.value) || "";
+      return i++, n;
     }).join("");
   }
   _applyDateToParts(e, t, i, s) {
@@ -2717,14 +2717,14 @@ class te extends HTMLElement {
       t.forEach((l) => l.value = "");
       return;
     }
-    const r = this._formatDate(e, s);
-    let n = 0, a = 0;
+    const n = this._formatDate(e, s);
+    let r = 0, a = 0;
     i.forEach((l) => {
       if (l.type === "sep")
-        n += l.value.length;
+        r += l.value.length;
       else {
-        const o = r.substr(n, l.len);
-        t[a] && (t[a].value = o), a++, n += l.len;
+        const o = n.substr(r, l.len);
+        t[a] && (t[a].value = o), a++, r += l.len;
       }
     });
   }
@@ -2750,17 +2750,17 @@ class te extends HTMLElement {
     }
   }
   _attachPartInputHandlers(e, t, i) {
-    e.forEach((s, r) => {
-      const n = s.maxLength || 2;
+    e.forEach((s, n) => {
+      const r = s.maxLength || 2;
       s.addEventListener("input", () => {
-        s.value = s.value.replace(/\D/g, "").slice(0, n), s.value.length >= n && this._focusNext(e, r), this._syncHiddenInput();
+        s.value = s.value.replace(/\D/g, "").slice(0, r), s.value.length >= r && this._focusNext(e, n), this._syncHiddenInput();
       }), s.addEventListener("keydown", (a) => {
-        a.key === "Backspace" && s.selectionStart === 0 && s.selectionEnd === 0 && this._focusPrev(e, r), a.key === "ArrowLeft" && s.selectionStart === 0 && s.selectionEnd === 0 && (this._focusPrev(e, r), a.preventDefault()), a.key === "ArrowRight" && s.selectionStart === s.value.length && s.selectionEnd === s.value.length && (this._focusNext(e, r), a.preventDefault());
+        a.key === "Backspace" && s.selectionStart === 0 && s.selectionEnd === 0 && this._focusPrev(e, n), a.key === "ArrowLeft" && s.selectionStart === 0 && s.selectionEnd === 0 && (this._focusPrev(e, n), a.preventDefault()), a.key === "ArrowRight" && s.selectionStart === s.value.length && s.selectionEnd === s.value.length && (this._focusNext(e, n), a.preventDefault());
       }), s.addEventListener("blur", (a) => {
-        var d, c;
+        var h, c;
         this._syncHiddenInput();
         const l = a.relatedTarget;
-        l && (this.contains(l) || (d = this._popover) != null && d.contains(l) || this._calendarContainer && this._calendarContainer.contains(l)) || (this._handleBlur(((c = this._hiddenInput) == null ? void 0 : c.value) || ""), this._exitInputMode(), setTimeout(() => {
+        l && (this.contains(l) || (h = this._popover) != null && h.contains(l) || this._calendarContainer && this._calendarContainer.contains(l)) || (this._handleBlur(((c = this._hiddenInput) == null ? void 0 : c.value) || ""), this._exitInputMode(), setTimeout(() => {
           if (this._hiddenInput) {
             const m = new FocusEvent("blur", {
               bubbles: !0,
@@ -2780,11 +2780,11 @@ class te extends HTMLElement {
   _parseValue(e) {
     const t = this.getFormat(), i = this._getFormatTokens(t);
     if (this._isRange) {
-      const [s, r] = this._splitRangeInput(e, t), n = s ? this._parseDateString(s, t) : null, a = r ? this._parseDateString(r, t) : null;
-      if (n && a) {
-        const [l, o] = n <= a ? [n, a] : [a, n];
+      const [s, n] = this._splitRangeInput(e, t), r = s ? this._parseDateString(s, t) : null, a = n ? this._parseDateString(n, t) : null;
+      if (r && a) {
+        const [l, o] = r <= a ? [r, a] : [a, r];
         this._selectedStartDate = l, this._selectedEndDate = o, this._currentMonth = l.getMonth(), this._currentYear = l.getFullYear();
-      } else n && (this._selectedStartDate = n, this._selectedEndDate = null, this._currentMonth = n.getMonth(), this._currentYear = n.getFullYear());
+      } else r && (this._selectedStartDate = r, this._selectedEndDate = null, this._currentMonth = r.getMonth(), this._currentYear = r.getFullYear());
       this._applyDateToParts(this._selectedStartDate, this._startPartInputs, i, t), this._applyDateToParts(this._selectedEndDate, this._endPartInputs, i, t);
     } else {
       const s = this._parseDateString(e, t);
@@ -2817,61 +2817,61 @@ class te extends HTMLElement {
         }
       }
     }
-    const r = e.replace(/[\/\-\.]/g, ""), n = t.replace(/[\/\-\.]/g, "").toLowerCase();
-    let a = n.indexOf("d"), l = n.indexOf("m"), o = n.indexOf("y");
-    const d = [
+    const n = e.replace(/[\/\-\.]/g, ""), r = t.replace(/[\/\-\.]/g, "").toLowerCase();
+    let a = r.indexOf("d"), l = r.indexOf("m"), o = r.indexOf("y");
+    const h = [
       { char: "d", index: a },
       { char: "m", index: l },
       { char: "y", index: o }
     ].sort((p, _) => p.index - _.index);
-    let c = 0, m = 0, h = 0, f = 0;
-    n.length, r.length;
-    for (const p of d)
+    let c = 0, m = 0, d = 0, f = 0;
+    r.length, n.length;
+    for (const p of h)
       if (p.char === "d") {
-        const _ = n.lastIndexOf("d") - n.indexOf("d") + 1, b = r.substr(f, _);
+        const _ = r.lastIndexOf("d") - r.indexOf("d") + 1, b = n.substr(f, _);
         if (b.length === 0) return null;
         c = parseInt(b, 10), f += b.length;
       } else if (p.char === "m") {
-        const _ = n.lastIndexOf("m") - n.indexOf("m") + 1, b = r.substr(f, _);
+        const _ = r.lastIndexOf("m") - r.indexOf("m") + 1, b = n.substr(f, _);
         if (b.length === 0) return null;
         m = parseInt(b, 10) - 1, f += b.length;
       } else if (p.char === "y") {
-        const _ = n.lastIndexOf("y") - n.indexOf("y") + 1, b = r.substr(f), y = Math.min(_, b.length), x = b.substr(0, y);
+        const _ = r.lastIndexOf("y") - r.indexOf("y") + 1, b = n.substr(f), y = Math.min(_, b.length), x = b.substr(0, y);
         if (x.length === 0) return null;
         let k = parseInt(x, 10);
-        y === 2 && _ === 4 ? k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k : y === 2 && _ === 2 && (k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k), h = k, f += y;
+        y === 2 && _ === 4 ? k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k : y === 2 && _ === 2 && (k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k), d = k, f += y;
       }
-    if (!c || m < 0 || m > 11 || !h) return null;
-    const u = new Date(h, m, c);
-    return isNaN(u.getTime()) || u.getDate() !== c || u.getMonth() !== m || u.getFullYear() !== h ? null : u;
+    if (!c || m < 0 || m > 11 || !d) return null;
+    const u = new Date(d, m, c);
+    return isNaN(u.getTime()) || u.getDate() !== c || u.getMonth() !== m || u.getFullYear() !== d ? null : u;
   }
   _formatDate(e, t) {
-    const i = e.getDate(), s = e.getMonth() + 1, r = e.getFullYear(), n = t.toLowerCase();
+    const i = e.getDate(), s = e.getMonth() + 1, n = e.getFullYear(), r = t.toLowerCase();
     let a = t;
-    return n.includes("dd") ? a = a.replace(/dd/gi, String(i).padStart(2, "0")) : n.includes("d") && (a = a.replace(/d/gi, String(i))), n.includes("mm") ? a = a.replace(/mm/gi, String(s).padStart(2, "0")) : n.includes("m") && (a = a.replace(/m/gi, String(s))), n.includes("yyyy") ? a = a.replace(/yyyy/gi, String(r)) : n.includes("yy") && (a = a.replace(/yy/gi, String(r).substr(2))), a;
+    return r.includes("dd") ? a = a.replace(/dd/gi, String(i).padStart(2, "0")) : r.includes("d") && (a = a.replace(/d/gi, String(i))), r.includes("mm") ? a = a.replace(/mm/gi, String(s).padStart(2, "0")) : r.includes("m") && (a = a.replace(/m/gi, String(s))), r.includes("yyyy") ? a = a.replace(/yyyy/gi, String(n)) : r.includes("yy") && (a = a.replace(/yy/gi, String(n).substr(2))), a;
   }
   // PHP-style formatter for display mode
   _formatDatePhp(e, t) {
-    const i = e.getDate(), s = e.getMonth() + 1, r = e.getFullYear(), n = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], a = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], l = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], o = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], d = (h, f = 2) => h.toString().padStart(f, "0"), c = (h) => {
-      const f = h % 10, u = h % 100;
+    const i = e.getDate(), s = e.getMonth() + 1, n = e.getFullYear(), r = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], a = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], l = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], o = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], h = (d, f = 2) => d.toString().padStart(f, "0"), c = (d) => {
+      const f = d % 10, u = d % 100;
       return f === 1 && u !== 11 ? "st" : f === 2 && u !== 12 ? "nd" : f === 3 && u !== 13 ? "rd" : "th";
     };
     let m = "";
-    for (let h = 0; h < t.length; h++) {
-      const f = t[h];
-      if (f === "\\" && h + 1 < t.length) {
-        m += t[h + 1], h++;
+    for (let d = 0; d < t.length; d++) {
+      const f = t[d];
+      if (f === "\\" && d + 1 < t.length) {
+        m += t[d + 1], d++;
         continue;
       }
       switch (f) {
         case "Y":
-          m += r.toString();
+          m += n.toString();
           break;
         case "y":
-          m += r.toString().slice(-2);
+          m += n.toString().slice(-2);
           break;
         case "m":
-          m += d(s);
+          m += h(s);
           break;
         case "n":
           m += s.toString();
@@ -2883,7 +2883,7 @@ class te extends HTMLElement {
           m += l[s - 1];
           break;
         case "d":
-          m += d(i);
+          m += h(i);
           break;
         case "j":
           m += i.toString();
@@ -2892,7 +2892,7 @@ class te extends HTMLElement {
           m += a[e.getDay()];
           break;
         case "l":
-          m += n[e.getDay()];
+          m += r[e.getDay()];
           break;
         case "S":
           m += c(i);
@@ -2909,26 +2909,26 @@ class te extends HTMLElement {
     return i !== null && !isNaN(i.getTime());
   }
   render() {
-    const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.getValue(), r = this.isDisabled(), n = this.isReadonly(), a = this.isRequired(), l = this.getId(), o = this.getName(), d = this.getFormat(), c = this.hasError(), m = this.getErrorMessage();
+    const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.getValue(), n = this.isDisabled(), r = this.isReadonly(), a = this.isRequired(), l = this.getId(), o = this.getName(), h = this.getFormat(), c = this.hasError(), m = this.getErrorMessage();
     this._isRange = this.isRange(), this._input || (this._input = document.createElement("div"), this._input.className = "relative w-full", this.appendChild(this._input));
-    let h = this.querySelector(".mint-date-picker-label-container");
+    let d = this.querySelector(".mint-date-picker-label-container");
     if (t || i) {
-      h || (h = document.createElement("div"), h.className = "mint-date-picker-label-container flex flex-col gap-0.5 mb-[.25rem]", this.contains(this._input) ? this.insertBefore(h, this._input) : this.appendChild(h));
-      let y = h.querySelector(".mint-date-picker-label");
-      t ? (y || (y = document.createElement("label"), y.className = "mint-date-picker-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", h.insertBefore(y, h.firstChild)), y.textContent = t, l && this._textInput && y.setAttribute("for", l)) : y && y.remove();
-      let x = h.querySelector(".mint-date-picker-info");
-      i ? (x || (x = document.createElement("span"), x.className = "mint-date-picker-info text-xs text-gray-500 dark:text-gray-400 select-none", h.appendChild(x)), x.textContent = i) : x && x.remove();
-    } else h && h.remove();
+      d || (d = document.createElement("div"), d.className = "mint-date-picker-label-container flex flex-col gap-0.5 mb-[.25rem]", this.contains(this._input) ? this.insertBefore(d, this._input) : this.appendChild(d));
+      let y = d.querySelector(".mint-date-picker-label");
+      t ? (y || (y = document.createElement("label"), y.className = "mint-date-picker-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", d.insertBefore(y, d.firstChild)), y.textContent = t, l && this._textInput && y.setAttribute("for", l)) : y && y.remove();
+      let x = d.querySelector(".mint-date-picker-info");
+      i ? (x || (x = document.createElement("span"), x.className = "mint-date-picker-info text-xs text-gray-500 dark:text-gray-400 select-none", d.appendChild(x)), x.textContent = i) : x && x.remove();
+    } else d && d.remove();
     this._hiddenInput || (this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.value = s || "", this._textInput = this._hiddenInput, this._input.appendChild(this._hiddenInput)), l && (this._hiddenInput.id = l), o && (this._hiddenInput.name = o), this._hiddenInput.value = s || "", this._hiddenInput.setAttribute("aria-invalid", c ? "true" : "false");
     let f = this._input.querySelector(".mint-date-fields");
-    f || (f = document.createElement("div"), this._input.appendChild(f)), this._fieldsContainer = f, this._applyErrorVisuals(c, m, r), f.innerHTML = "", this._displayEl = document.createElement("div");
-    const u = n ? "select-text" : "select-none";
-    this._displayEl.className = `flex-1 text-gray-900 dark:text-white ${n ? "cursor-default" : "cursor-text"} ${u} focus:outline-none`, this._displayEl.tabIndex = r || n ? -1 : 0, this._displayEl.addEventListener("click", () => {
-      r || n || this._enterInputMode();
+    f || (f = document.createElement("div"), this._input.appendChild(f)), this._fieldsContainer = f, this._applyErrorVisuals(c, m, n), f.innerHTML = "", this._displayEl = document.createElement("div");
+    const u = r ? "select-text" : "select-none";
+    this._displayEl.className = `flex-1 text-gray-900 dark:text-white ${r ? "cursor-default" : "cursor-text"} ${u} focus:outline-none`, this._displayEl.tabIndex = n || r ? -1 : 0, this._displayEl.addEventListener("click", () => {
+      n || r || this._enterInputMode();
     }), this._displayEl.addEventListener("keydown", (y) => {
-      r || n || (y.key === "Enter" || y.key === " ") && (y.preventDefault(), this._enterInputMode());
+      n || r || (y.key === "Enter" || y.key === " ") && (y.preventDefault(), this._enterInputMode());
     }), this._inputsWrapperEl = document.createElement("div"), this._inputsWrapperEl.className = "flex items-center gap-1 w-full";
-    const p = this._getFormatTokens(d);
+    const p = this._getFormatTokens(h);
     this._startPartInputs = [], this._endPartInputs = [];
     const _ = (y) => {
       const x = document.createDocumentFragment();
@@ -2937,7 +2937,7 @@ class te extends HTMLElement {
           const E = document.createElement("span");
           E.textContent = k.value, E.className = "text-gray-400 dark:text-gray-500 select-none", x.appendChild(E);
         } else {
-          const E = k.part === "d" ? "dd" : k.part === "m" ? "mm" : k.len === 2 ? "yy" : "yyyy", g = this._createPartInput(k.len, E, r, n, a);
+          const E = k.part === "d" ? "dd" : k.part === "m" ? "mm" : k.len === 2 ? "yy" : "yyyy", g = this._createPartInput(k.len, E, n, r, a);
           y === "start" ? this._startPartInputs.push(g) : this._endPartInputs.push(g), x.appendChild(g);
         }
       }), x;
@@ -2948,17 +2948,17 @@ class te extends HTMLElement {
     }
     const b = document.createElement("div");
     if (b.className = "flex flex-col w-full", this._displayEl.style.display = this._isInputMode ? "none" : "flex", this._inputsWrapperEl.style.display = this._isInputMode ? "flex" : "none", b.appendChild(this._displayEl), b.appendChild(this._inputsWrapperEl), f.appendChild(b), f.addEventListener("click", () => {
-      this._isInputMode || r || n || this._enterInputMode();
+      this._isInputMode || n || r || this._enterInputMode();
     }), this._attachPartInputHandlers(this._startPartInputs, p, f), this._isRange && this._attachPartInputHandlers(this._endPartInputs, p, f), this._parseValue(s), this._syncHiddenInput(), this._updateDisplayText(), this._iconButton)
-      this._iconButton.disabled = r || n, !r && !n ? this._iconButton.tabIndex = 0 : this._iconButton.tabIndex = -1;
+      this._iconButton.disabled = n || r, !n && !r ? this._iconButton.tabIndex = 0 : this._iconButton.tabIndex = -1;
     else {
       this._iconButton = document.createElement("button"), this._iconButton.type = "button", this._iconButton.tabIndex = 0, this._iconButton.className = "absolute left-2 top-[.55rem] text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer z-10 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 pointer-events-auto disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center rounded-sm";
       const y = `date-icon-${Math.random().toString(36).substr(2, 9)}`;
       this._iconButton.id = y;
       const x = document.createElement("mint-icon");
       x.setAttribute("name", "calendar"), x.className = "w-4 h-4 pointer-events-none", this._iconButton.appendChild(x), this._iconButton.addEventListener("click", () => {
-        r || n || this._enterInputMode();
-      }), this._input.prepend(this._iconButton), this._iconButton.disabled = r || n;
+        n || r || this._enterInputMode();
+      }), this._input.prepend(this._iconButton), this._iconButton.disabled = n || r;
     }
     this._renderErrorState(c, m), this._renderSkeleton(e);
   }
@@ -3006,13 +3006,13 @@ class te extends HTMLElement {
       return;
     }
     if (this._isRange) {
-      const [i, s] = this._splitRangeInput(e, t), r = i ? this._parseDateString(i, t) : null, n = s ? this._parseDateString(s, t) : null;
-      if (r && n) {
-        const [a, l] = r <= n ? [r, n] : [n, r], o = this._formatDate(a, t), d = this._formatDate(l, t), c = `${o} - ${d}`;
+      const [i, s] = this._splitRangeInput(e, t), n = i ? this._parseDateString(i, t) : null, r = s ? this._parseDateString(s, t) : null;
+      if (n && r) {
+        const [a, l] = n <= r ? [n, r] : [r, n], o = this._formatDate(a, t), h = this._formatDate(l, t), c = `${o} - ${h}`;
         this.setValue(c), this._applyDateToParts(a, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(l, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = a, this._selectedEndDate = l, this._currentMonth = a.getMonth(), this._currentYear = a.getFullYear();
-      } else if (r) {
-        const a = this._formatDate(r, t);
-        this.setValue(a), this._applyDateToParts(r, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(null, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = r, this._selectedEndDate = null, this._currentMonth = r.getMonth(), this._currentYear = r.getFullYear();
+      } else if (n) {
+        const a = this._formatDate(n, t);
+        this.setValue(a), this._applyDateToParts(n, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(null, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = n, this._selectedEndDate = null, this._currentMonth = n.getMonth(), this._currentYear = n.getFullYear();
       } else
         this.setValue(""), this._applyDateToParts(null, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(null, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = null, this._selectedEndDate = null;
     } else if (this._validateDateString(e, t)) {
@@ -3051,9 +3051,9 @@ class te extends HTMLElement {
         requestAnimationFrame(() => {
           this._popover && this._popover.isConnected && (this._popover.setAttribute("trigger-id", e), this._popoverObserver || (this._popoverObserver = new MutationObserver((i) => {
             i.forEach((s) => {
-              var r;
+              var n;
               if (s.type === "attributes" && s.attributeName === "open")
-                if ((r = this._popover) == null ? void 0 : r.hasAttribute("open"))
+                if ((n = this._popover) == null ? void 0 : n.hasAttribute("open"))
                   requestAnimationFrame(() => {
                     this._buildCalendar();
                     const a = this._popover;
@@ -3112,26 +3112,26 @@ class te extends HTMLElement {
   }
   _buildCalendarView() {
     if (!this._calendarContainer) return;
-    const e = this._getDaysInMonth(this._currentMonth, this._currentYear), t = this._getFirstDayOfMonth(this._currentMonth, this._currentYear), i = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], s = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], r = this.getShortcuts(), n = r.length > 0;
-    this._calendarContainer.className = n ? "mint-date-calendar bg-white dark:bg-gray-800 rounded-lg p-4 w-[18rem] md:w-auto md:min-w-[28rem]" : "mint-date-calendar bg-white dark:bg-gray-800 rounded-lg p-4 w-[18rem] md:min-w-[18rem]";
+    const e = this._getDaysInMonth(this._currentMonth, this._currentYear), t = this._getFirstDayOfMonth(this._currentMonth, this._currentYear), i = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], s = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], n = this.getShortcuts(), r = n.length > 0;
+    this._calendarContainer.className = r ? "mint-date-calendar bg-white dark:bg-gray-800 rounded-lg p-4 w-[18rem] md:w-auto md:min-w-[28rem]" : "mint-date-calendar bg-white dark:bg-gray-800 rounded-lg p-4 w-[18rem] md:min-w-[18rem]";
     const a = document.createElement("div");
     a.className = "flex flex-col md:flex-row md:gap-6 md:items-start";
     const l = document.createElement("div");
     l.className = "flex-1 min-w-0";
     const o = document.createElement("div");
     o.className = "flex items-center justify-between mb-4";
-    const d = document.createElement("button");
-    d.type = "button", d.tabIndex = 0, d.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", d.setAttribute("data-keep-popover-open", "true");
+    const h = document.createElement("button");
+    h.type = "button", h.tabIndex = 0, h.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", h.setAttribute("data-keep-popover-open", "true");
     const c = document.createElement("mint-icon");
-    c.setAttribute("name", "caret-left"), c.className = "w-4 h-4", d.appendChild(c), d.addEventListener("click", () => {
+    c.setAttribute("name", "caret-left"), c.className = "w-4 h-4", h.appendChild(c), h.addEventListener("click", () => {
       this._currentMonth === 0 ? (this._currentMonth = 11, this._currentYear--) : this._currentMonth--, this._buildCalendar();
-    }), o.appendChild(d);
+    }), o.appendChild(h);
     const m = document.createElement("div");
     m.className = "flex items-center gap-2";
-    const h = document.createElement("button");
-    h.type = "button", h.tabIndex = 0, h.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", h.setAttribute("data-keep-popover-open", "true"), h.textContent = i[this._currentMonth], h.addEventListener("click", () => {
+    const d = document.createElement("button");
+    d.type = "button", d.tabIndex = 0, d.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", d.setAttribute("data-keep-popover-open", "true"), d.textContent = i[this._currentMonth], d.addEventListener("click", () => {
       this._viewMode = "month", this._buildCalendar();
-    }), m.appendChild(h);
+    }), m.appendChild(d);
     const f = document.createElement("button");
     f.type = "button", f.tabIndex = 0, f.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", f.setAttribute("data-keep-popover-open", "true"), f.textContent = String(this._currentYear), f.addEventListener("click", () => {
       this._viewMode = "year", this._buildCalendar();
@@ -3156,17 +3156,17 @@ class te extends HTMLElement {
     const y = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, x = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null;
     for (let k = 1; k <= e; k++) {
       const E = new Date(this._currentYear, this._currentMonth, k), g = this._isToday(E), v = this._isDateSelected(E), C = this._isDateInRange(E), A = y && E < y || x && E > x;
-      let T = "rounded-md";
+      let D = "rounded-md";
       if (this._isRange && this._selectedStartDate && this._selectedEndDate) {
-        const H = this._isSameDate(E, this._selectedStartDate), L = this._isSameDate(E, this._selectedEndDate);
-        H && L ? T = "rounded-md" : H ? T = "rounded-l-md" : L ? T = "rounded-r-md" : C && (T = "rounded-none");
-      } else v && !this._isRange && (T = "rounded-md");
+        const I = this._isSameDate(E, this._selectedStartDate), L = this._isSameDate(E, this._selectedEndDate);
+        I && L ? D = "rounded-md" : I ? D = "rounded-l-md" : L ? D = "rounded-r-md" : C && (D = "rounded-none");
+      } else v && !this._isRange && (D = "rounded-md");
       const S = document.createElement("button");
-      S.type = "button", S.disabled = !!A, S.tabIndex = A ? -1 : 0, S.className = `w-full h-8 ${T} border-0 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${v ? "bg-slate-800 dark:bg-slate-600 text-white" : C ? "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : g ? "text-gray-900 dark:text-gray-100 font-semibold" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"} ${A ? "opacity-40 cursor-not-allowed" : ""}`, S.textContent = k.toString(), A || S.addEventListener("click", () => {
+      S.type = "button", S.disabled = !!A, S.tabIndex = A ? -1 : 0, S.className = `w-full h-8 ${D} border-0 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${v ? "bg-slate-800 dark:bg-slate-600 text-white" : C ? "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : g ? "text-gray-900 dark:text-gray-100 font-semibold" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"} ${A ? "opacity-40 cursor-not-allowed" : ""}`, S.textContent = k.toString(), A || S.addEventListener("click", () => {
         this._handleDateClick(E);
       }), b.appendChild(S);
     }
-    if (n) {
+    if (r) {
       const k = document.createElement("div");
       k.className = "mb-4 pb-4 border-b border-gray-200 dark:border-gray-700 md:mb-0 md:pb-0 md:border-b-0 md:border-r md:border-r-gray-200 dark:md:border-r-gray-700 md:pr-6 md:mr-0 md:w-32 md:flex-shrink-0 md:h-full md:flex md:flex-col";
       const E = document.createElement("div");
@@ -3203,32 +3203,32 @@ class te extends HTMLElement {
       C.className = "absolute left-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-r from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200 md:hidden", E.appendChild(C);
       const A = document.createElement("div");
       A.className = "absolute right-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-l from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200 md:hidden", E.appendChild(A);
-      const T = document.createElement("div");
-      T.className = "hidden md:block absolute top-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-b from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200", E.appendChild(T);
+      const D = document.createElement("div");
+      D.className = "hidden md:block absolute top-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-b from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200", E.appendChild(D);
       const S = document.createElement("div");
       S.className = "hidden md:block absolute bottom-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-t from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200", E.appendChild(S);
-      const H = () => {
+      const I = () => {
         if (window.innerWidth >= 768) {
-          const D = g.scrollTop, I = g.scrollHeight, N = g.clientHeight;
-          D > 0 ? T.style.opacity = "1" : T.style.opacity = "0", D + N < I - 1 ? S.style.opacity = "1" : S.style.opacity = "0", C.style.opacity = "0", A.style.opacity = "0";
+          const H = g.scrollTop, T = g.scrollHeight, N = g.clientHeight;
+          H > 0 ? D.style.opacity = "1" : D.style.opacity = "0", H + N < T - 1 ? S.style.opacity = "1" : S.style.opacity = "0", C.style.opacity = "0", A.style.opacity = "0";
         } else {
-          const D = g.scrollLeft, I = g.scrollWidth, N = g.clientWidth;
-          D > 0 ? C.style.opacity = "1" : C.style.opacity = "0", D + N < I - 1 ? A.style.opacity = "1" : A.style.opacity = "0", T.style.opacity = "0", S.style.opacity = "0";
+          const H = g.scrollLeft, T = g.scrollWidth, N = g.clientWidth;
+          H > 0 ? C.style.opacity = "1" : C.style.opacity = "0", H + N < T - 1 ? A.style.opacity = "1" : A.style.opacity = "0", D.style.opacity = "0", S.style.opacity = "0";
         }
       };
-      g.addEventListener("scroll", H), window.addEventListener("resize", H), setTimeout(H, 0), r.forEach((L) => {
-        const D = document.createElement("button");
-        D.type = "button", D.tabIndex = 0, D.className = "px-3 py-1.5 text-xs font-medium rounded-md bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors whitespace-nowrap flex-shrink-0 md:w-full md:text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", D.textContent = L.label, D.setAttribute("data-keep-popover-open", "true"), D.addEventListener("click", () => {
-          const I = L.action();
-          if (I) {
-            if (this._isRange && "start" in I && "end" in I) {
-              this._selectedStartDate = I.start, this._selectedEndDate = I.end;
-              const N = this.getFormat(), M = this._formatDate(I.start, N), F = this._formatDate(I.end, N), P = `${M} - ${F}`;
-              this.setValue(P), this._currentMonth = I.start.getMonth(), this._currentYear = I.start.getFullYear();
-            } else if (I instanceof Date) {
-              this._selectedStartDate = I, this._selectedEndDate = null;
-              const N = this.getFormat(), M = this._formatDate(I, N);
-              this.setValue(M), this._currentMonth = I.getMonth(), this._currentYear = I.getFullYear();
+      g.addEventListener("scroll", I), window.addEventListener("resize", I), setTimeout(I, 0), n.forEach((L) => {
+        const H = document.createElement("button");
+        H.type = "button", H.tabIndex = 0, H.className = "px-3 py-1.5 text-xs font-medium rounded-md bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors whitespace-nowrap flex-shrink-0 md:w-full md:text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", H.textContent = L.label, H.setAttribute("data-keep-popover-open", "true"), H.addEventListener("click", () => {
+          const T = L.action();
+          if (T) {
+            if (this._isRange && "start" in T && "end" in T) {
+              this._selectedStartDate = T.start, this._selectedEndDate = T.end;
+              const N = this.getFormat(), M = this._formatDate(T.start, N), F = this._formatDate(T.end, N), P = `${M} - ${F}`;
+              this.setValue(P), this._currentMonth = T.start.getMonth(), this._currentYear = T.start.getFullYear();
+            } else if (T instanceof Date) {
+              this._selectedStartDate = T, this._selectedEndDate = null;
+              const N = this.getFormat(), M = this._formatDate(T, N);
+              this.setValue(M), this._currentMonth = T.getMonth(), this._currentYear = T.getFullYear();
             }
             this._buildCalendar(), this._popover && typeof this._popover.close == "function" && this._popover.close(), this.dispatchEvent(new CustomEvent("input", {
               detail: { value: this.getValue() },
@@ -3240,7 +3240,7 @@ class te extends HTMLElement {
               cancelable: !0
             }));
           }
-        }), g.appendChild(D);
+        }), g.appendChild(H);
       }), E.appendChild(g), k.appendChild(E), a.appendChild(k);
     }
     l.appendChild(o), l.appendChild(_), l.appendChild(b), a.appendChild(l), this._calendarContainer.appendChild(a);
@@ -3255,23 +3255,23 @@ class te extends HTMLElement {
     s.setAttribute("name", "caret-left"), s.className = "w-4 h-4", i.appendChild(s), i.addEventListener("click", () => {
       this._currentYear--, this._buildCalendar();
     }), t.appendChild(i);
-    const r = document.createElement("button");
-    r.type = "button", r.tabIndex = 0, r.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 rounded px-1", r.setAttribute("data-keep-popover-open", "true"), r.textContent = String(this._currentYear), r.addEventListener("click", () => {
-      this._viewMode = "year", this._buildCalendar();
-    }), t.appendChild(r);
     const n = document.createElement("button");
-    n.type = "button", n.tabIndex = 0, n.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", n.setAttribute("data-keep-popover-open", "true");
+    n.type = "button", n.tabIndex = 0, n.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 rounded px-1", n.setAttribute("data-keep-popover-open", "true"), n.textContent = String(this._currentYear), n.addEventListener("click", () => {
+      this._viewMode = "year", this._buildCalendar();
+    }), t.appendChild(n);
+    const r = document.createElement("button");
+    r.type = "button", r.tabIndex = 0, r.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", r.setAttribute("data-keep-popover-open", "true");
     const a = document.createElement("mint-icon");
-    a.setAttribute("name", "caret-right"), a.className = "w-4 h-4", n.appendChild(a), n.addEventListener("click", () => {
+    a.setAttribute("name", "caret-right"), a.className = "w-4 h-4", r.appendChild(a), r.addEventListener("click", () => {
       this._currentYear++, this._buildCalendar();
-    }), t.appendChild(n);
+    }), t.appendChild(r);
     const l = document.createElement("div");
-    l.className = "grid grid-cols-3 gap-2", e.forEach((o, d) => {
+    l.className = "grid grid-cols-3 gap-2", e.forEach((o, h) => {
       const c = document.createElement("button");
       c.type = "button", c.tabIndex = 0, c.setAttribute("data-keep-popover-open", "true");
-      const m = this._currentMonth === d;
+      const m = this._currentMonth === h;
       c.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${m ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`, c.textContent = o, c.addEventListener("click", () => {
-        this._currentMonth = d, this._viewMode = "calendar", this._buildCalendar();
+        this._currentMonth = h, this._viewMode = "calendar", this._buildCalendar();
       }), l.appendChild(c);
     }), this._calendarContainer.appendChild(t), this._calendarContainer.appendChild(l);
   }
@@ -3281,12 +3281,12 @@ class te extends HTMLElement {
     i.className = "flex items-center justify-between mb-4";
     const s = document.createElement("button");
     s.type = "button", s.tabIndex = 0, s.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", s.setAttribute("data-keep-popover-open", "true");
-    const r = document.createElement("mint-icon");
-    r.setAttribute("name", "caret-left"), r.className = "w-4 h-4", s.appendChild(r), s.addEventListener("click", () => {
+    const n = document.createElement("mint-icon");
+    n.setAttribute("name", "caret-left"), n.className = "w-4 h-4", s.appendChild(n), s.addEventListener("click", () => {
       this._currentYear -= 12, this._buildCalendar();
     }), i.appendChild(s);
-    const n = document.createElement("div");
-    n.className = "text-sm font-medium text-gray-900 dark:text-gray-100", n.textContent = `${e} - ${t}`, i.appendChild(n);
+    const r = document.createElement("div");
+    r.className = "text-sm font-medium text-gray-900 dark:text-gray-100", r.textContent = `${e} - ${t}`, i.appendChild(r);
     const a = document.createElement("button");
     a.type = "button", a.tabIndex = 0, a.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", a.setAttribute("data-keep-popover-open", "true");
     const l = document.createElement("mint-icon");
@@ -3295,12 +3295,12 @@ class te extends HTMLElement {
     }), i.appendChild(a);
     const o = document.createElement("div");
     o.className = "grid grid-cols-3 gap-2";
-    for (let d = e; d <= t; d++) {
+    for (let h = e; h <= t; h++) {
       const c = document.createElement("button");
       c.type = "button", c.tabIndex = 0, c.setAttribute("data-keep-popover-open", "true");
-      const m = this._currentYear === d;
-      c.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${m ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`, c.textContent = String(d), c.addEventListener("click", () => {
-        this._currentYear = d, this._viewMode = "calendar", this._buildCalendar();
+      const m = this._currentYear === h;
+      c.className = `p-2 rounded text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${m ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`, c.textContent = String(h), c.addEventListener("click", () => {
+        this._currentYear = h, this._viewMode = "calendar", this._buildCalendar();
       }), o.appendChild(c);
     }
     this._calendarContainer.appendChild(i), this._calendarContainer.appendChild(o);
@@ -3331,8 +3331,8 @@ class te extends HTMLElement {
     const t = this.getFormat();
     if (this._isRange) {
       if (!this._selectedStartDate || this._selectedStartDate && this._selectedEndDate ? (this._selectedStartDate = e, this._selectedEndDate = null) : this._selectedStartDate && !this._selectedEndDate && (e < this._selectedStartDate ? (this._selectedEndDate = this._selectedStartDate, this._selectedStartDate = e) : this._selectedEndDate = e), this._selectedStartDate && this._selectedEndDate) {
-        const i = this._formatDate(this._selectedStartDate, t), s = this._formatDate(this._selectedEndDate, t), r = `${i} - ${s}`;
-        this.setValue(r), this._textInput && (this._textInput.value = r), this._popover && typeof this._popover.close == "function" && this._popover.close();
+        const i = this._formatDate(this._selectedStartDate, t), s = this._formatDate(this._selectedEndDate, t), n = `${i} - ${s}`;
+        this.setValue(n), this._textInput && (this._textInput.value = n), this._popover && typeof this._popover.close == "function" && this._popover.close();
       } else if (this._selectedStartDate) {
         const i = this._formatDate(this._selectedStartDate, t);
         this.setValue(i), this._textInput && (this._textInput.value = i);
@@ -3379,8 +3379,8 @@ class te extends HTMLElement {
     const i = this._fieldsContainer, s = this._input;
     if (e) {
       t || (t = document.createElement("div"), t.className = "mint-date-picker-skeleton-container absolute inset-0 z-10 pointer-events-none", s ? (s.classList.contains("relative") || s.classList.add("relative"), s.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
-      let r = t.querySelector(".mint-date-picker-skeleton");
-      r || (r = document.createElement("div"), r.className = "mint-date-picker-skeleton w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse", r.style.height = "2.25rem", t.appendChild(r)), t.style.display = "block", i && (i.style.visibility = "hidden", i.style.pointerEvents = "none"), this._displayEl && (this._displayEl.style.visibility = "hidden", this._displayEl.style.pointerEvents = "none");
+      let n = t.querySelector(".mint-date-picker-skeleton");
+      n || (n = document.createElement("div"), n.className = "mint-date-picker-skeleton w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse", n.style.height = "2.25rem", t.appendChild(n)), t.style.display = "block", i && (i.style.visibility = "hidden", i.style.pointerEvents = "none"), this._displayEl && (this._displayEl.style.visibility = "hidden", this._displayEl.style.pointerEvents = "none");
     } else
       t && (t.style.display = "none"), i && (i.style.visibility = "visible", i.style.pointerEvents = "auto"), this._displayEl && (this._displayEl.style.visibility = "visible", this._displayEl.style.pointerEvents = "auto");
   }
@@ -3412,16 +3412,16 @@ class te extends HTMLElement {
       }
       const i = e._getFocusableElements();
       if (i.length === 0) return;
-      const s = i[0], r = i[i.length - 1], n = document.activeElement;
-      if (!(((l = e._calendarContainer) == null ? void 0 : l.contains(n)) || !1)) {
+      const s = i[0], n = i[i.length - 1], r = document.activeElement;
+      if (!(((l = e._calendarContainer) == null ? void 0 : l.contains(r)) || !1)) {
         t.preventDefault(), s.focus();
         return;
       }
-      if (t.shiftKey && n === s) {
-        t.preventDefault(), r.focus();
+      if (t.shiftKey && r === s) {
+        t.preventDefault(), n.focus();
         return;
       }
-      if (!t.shiftKey && n === r) {
+      if (!t.shiftKey && r === n) {
         t.preventDefault(), s.focus();
         return;
       }
@@ -3531,54 +3531,54 @@ class ie extends HTMLElement {
     ], s = [
       "border-2",
       e ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-600"
-    ], r = [
+    ], n = [
       "focus-visible:ring-2",
       "focus-visible:ring-offset-1",
       e ? "focus-visible:ring-red-400 dark:focus-visible:ring-red-500" : "focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500"
     ];
-    return [...i, ...s, ...r].filter(Boolean).join(" ");
+    return [...i, ...s, ...n].filter(Boolean).join(" ");
   }
   render() {
     const e = this.isLoading(), t = [];
-    this._select && Array.from(this._select.children).forEach((h) => {
-      (h.tagName === "OPTION" || h.tagName === "OPTGROUP") && t.push(h.cloneNode(!0));
+    this._select && Array.from(this._select.children).forEach((d) => {
+      (d.tagName === "OPTION" || d.tagName === "OPTGROUP") && t.push(d.cloneNode(!0));
     });
-    const i = Array.from(this.children).filter((h) => h.tagName === "OPTION" || h.tagName === "OPTGROUP").map((h) => h.cloneNode(!0));
+    const i = Array.from(this.children).filter((d) => d.tagName === "OPTION" || d.tagName === "OPTGROUP").map((d) => d.cloneNode(!0));
     for (; this.firstChild; )
       this.removeChild(this.firstChild);
     this._wrapper = null, this._select = null;
-    const s = this.getLabel(), r = this.getInfo(), n = this.getId(), a = this.getName(), l = this.getValue(), o = this.isDisabled(), d = this.isMultiple(), c = this.hasError();
+    const s = this.getLabel(), n = this.getInfo(), r = this.getId(), a = this.getName(), l = this.getValue(), o = this.isDisabled(), h = this.isMultiple(), c = this.hasError();
     if (s) {
-      const h = document.createElement("label");
-      h.className = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", n && h.setAttribute("for", n);
+      const d = document.createElement("label");
+      d.className = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", r && d.setAttribute("for", r);
       const f = document.createTextNode(s);
-      h.appendChild(f), this.appendChild(h);
+      d.appendChild(f), this.appendChild(d);
     }
-    this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper), this._select = document.createElement("select"), this._select.className = this.getSelectClasses(), n && (this._select.id = n), a && (this._select.name = a), o && (this._select.disabled = !0), d && (this._select.multiple = !0), this._select.setAttribute("aria-invalid", c ? "true" : "false");
+    this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper), this._select = document.createElement("select"), this._select.className = this.getSelectClasses(), r && (this._select.id = r), a && (this._select.name = a), o && (this._select.disabled = !0), h && (this._select.multiple = !0), this._select.setAttribute("aria-invalid", c ? "true" : "false");
     const m = t.length > 0 ? t : i;
-    if (m.length > 0 && m.forEach((h) => {
-      this._select.appendChild(h);
+    if (m.length > 0 && m.forEach((d) => {
+      this._select.appendChild(d);
     }), this._select.options.length === 0) {
-      const h = document.createElement("option");
-      h.value = "", h.textContent = "Select an option", h.disabled = !0, h.selected = !0, this._select.appendChild(h);
+      const d = document.createElement("option");
+      d.value = "", d.textContent = "Select an option", d.disabled = !0, d.selected = !0, this._select.appendChild(d);
     }
-    if (this._select.value = l || "", this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (h) => {
-      const u = h.target.value;
+    if (this._select.value = l || "", this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (d) => {
+      const u = d.target.value;
       u ? this.setAttribute("value", u) : this.removeAttribute("value"), this.dispatchEvent(new CustomEvent("change", {
         detail: { value: u },
         bubbles: !0,
         cancelable: !0,
         composed: !0
       }));
-    }, this._select.addEventListener("change", this._changeHandler), this._wrapper.appendChild(this._select), d)
+    }, this._select.addEventListener("change", this._changeHandler), this._wrapper.appendChild(this._select), h)
       this._caretUpIcon = null, this._caretDownIcon = null;
     else {
-      const h = document.createElement("div");
-      h.className = "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none z-10 flex flex-col", this._caretUpIcon = document.createElement("mint-icon"), this._caretUpIcon.setAttribute("name", "caret-up"), this._caretUpIcon.className = "w-[.9em] h-[.9em] text-gray-400 dark:text-gray-500 mb-[-.2rem]", h.appendChild(this._caretUpIcon), this._caretDownIcon = document.createElement("mint-icon"), this._caretDownIcon.setAttribute("name", "caret-down"), this._caretDownIcon.className = "w-[.9em] h-[.9em] text-gray-400 dark:text-gray-500 mt-[-.2rem]", h.appendChild(this._caretDownIcon), this._wrapper.appendChild(h);
+      const d = document.createElement("div");
+      d.className = "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none z-10 flex flex-col", this._caretUpIcon = document.createElement("mint-icon"), this._caretUpIcon.setAttribute("name", "caret-up"), this._caretUpIcon.className = "w-[.9em] h-[.9em] text-gray-400 dark:text-gray-500 mb-[-.2rem]", d.appendChild(this._caretUpIcon), this._caretDownIcon = document.createElement("mint-icon"), this._caretDownIcon.setAttribute("name", "caret-down"), this._caretDownIcon.className = "w-[.9em] h-[.9em] text-gray-400 dark:text-gray-500 mt-[-.2rem]", d.appendChild(this._caretDownIcon), this._wrapper.appendChild(d);
     }
-    if (r) {
-      const h = document.createElement("div");
-      h.className = "mt-1 text-xs text-gray-500 dark:text-gray-400", h.textContent = r, this.appendChild(h);
+    if (n) {
+      const d = document.createElement("div");
+      d.className = "mt-1 text-xs text-gray-500 dark:text-gray-400", d.textContent = n, this.appendChild(d);
     }
     this._renderErrorState(), this._renderSkeleton(e);
   }
@@ -3590,8 +3590,8 @@ class ie extends HTMLElement {
       let s = t.querySelector(".mint-select-skeleton");
       if (!s) {
         s = document.createElement("div"), s.className = "mint-select-skeleton w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse";
-        const r = this.isMultiple();
-        s.style.height = r ? "6rem" : "2.25rem", t.appendChild(s);
+        const n = this.isMultiple();
+        s.style.height = n ? "6rem" : "2.25rem", t.appendChild(s);
       }
       t.style.display = "block", this._select && (this._select.style.opacity = "0", this._select.style.pointerEvents = "none");
     } else
@@ -3655,15 +3655,15 @@ class se extends HTMLElement {
       t || (t = document.createElement("div"), t.className = "mint-dropzone-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center justify-center", i ? (i.classList.contains("relative") || i.classList.add("relative"), i.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
       let s = t.querySelector(".mint-dropzone-skeleton");
       if (s || (s = document.createElement("div"), s.className = "mint-dropzone-skeleton rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700 animate-pulse", s.style.width = "100%", s.style.height = "100%", t.appendChild(s)), t.style.display = "flex", i) {
-        const r = i.querySelector(".mint-dropzone-icon"), n = i.querySelector(".mint-dropzone-label"), a = i.querySelector(".mint-dropzone-previews-wrapper"), l = this._fileInput;
-        if (r) {
-          const o = r;
-          o.style.visibility = "hidden", o.style.pointerEvents = "none";
-        }
+        const n = i.querySelector(".mint-dropzone-icon"), r = i.querySelector(".mint-dropzone-label"), a = i.querySelector(".mint-dropzone-previews-wrapper"), l = this._fileInput;
         if (n) {
           const o = n;
           o.style.visibility = "hidden", o.style.pointerEvents = "none";
         }
+        if (r) {
+          const o = r;
+          o.style.visibility = "hidden", o.style.pointerEvents = "none";
+        }
         if (a) {
           const o = a;
           o.style.visibility = "hidden", o.style.pointerEvents = "none";
@@ -3671,19 +3671,19 @@ class se extends HTMLElement {
         l && (l.style.visibility = "hidden", l.style.pointerEvents = "none"), i.style.pointerEvents = "none";
       }
     } else if (t && (t.style.display = "none"), i) {
-      const s = i.querySelector(".mint-dropzone-icon"), r = i.querySelector(".mint-dropzone-label"), n = i.querySelector(".mint-dropzone-previews-wrapper"), a = this._fileInput;
+      const s = i.querySelector(".mint-dropzone-icon"), n = i.querySelector(".mint-dropzone-label"), r = i.querySelector(".mint-dropzone-previews-wrapper"), a = this._fileInput;
       if (s) {
         const l = s;
         l.style.visibility = "visible", l.style.pointerEvents = "auto";
       }
-      if (r) {
-        const l = r;
-        l.style.visibility = "visible", l.style.pointerEvents = "auto";
-      }
       if (n) {
         const l = n;
         l.style.visibility = "visible", l.style.pointerEvents = "auto";
       }
+      if (r) {
+        const l = r;
+        l.style.visibility = "visible", l.style.pointerEvents = "auto";
+      }
       a && (a.style.visibility = "visible", a.style.pointerEvents = "auto"), i.style.pointerEvents = "auto";
     }
   }
@@ -3703,18 +3703,18 @@ class se extends HTMLElement {
     return this.hasAttribute("loading");
   }
   render() {
-    const e = this.isLoading(), t = this.getLabel(), i = this.getAccept(), s = this.isMultiple(), r = this.isDisabled(), n = this.getWidth(), a = this.getHeight(), l = this.getName(), o = this.hasError(), d = this.getErrorMessage();
-    this._dropzone || (this._dropzone = document.createElement("div"), this.appendChild(this._dropzone)), this._updateDragStateClass(), this._dropzone.setAttribute("aria-invalid", o ? "true" : "false"), r ? (this._dropzone.setAttribute("tabindex", "-1"), this._dropzone.removeAttribute("role")) : (this._dropzone.setAttribute("tabindex", "0"), this._dropzone.setAttribute("role", "button"), this._dropzone.setAttribute("aria-label", t || "File upload dropzone")), this._dropzone.style.width = n, this._dropzone.style.height = a, this._dropzone.style.minWidth = n, this._dropzone.style.minHeight = a, this._fileInput || (this._fileInput = document.createElement("input"), this._fileInput.type = "file", this._fileInput.style.display = "none", this._fileInput.setAttribute("tabindex", "-1"), this._fileInput.setAttribute("aria-hidden", "true"), this._dropzone.appendChild(this._fileInput)), this._fileInput.accept = i, this._fileInput.multiple = s, this._fileInput.disabled = r, l ? this._fileInput.name = l : this._fileInput.removeAttribute("name"), this._fileInput.setAttribute("aria-invalid", o ? "true" : "false");
+    const e = this.isLoading(), t = this.getLabel(), i = this.getAccept(), s = this.isMultiple(), n = this.isDisabled(), r = this.getWidth(), a = this.getHeight(), l = this.getName(), o = this.hasError(), h = this.getErrorMessage();
+    this._dropzone || (this._dropzone = document.createElement("div"), this.appendChild(this._dropzone)), this._updateDragStateClass(), this._dropzone.setAttribute("aria-invalid", o ? "true" : "false"), n ? (this._dropzone.setAttribute("tabindex", "-1"), this._dropzone.removeAttribute("role")) : (this._dropzone.setAttribute("tabindex", "0"), this._dropzone.setAttribute("role", "button"), this._dropzone.setAttribute("aria-label", t || "File upload dropzone")), this._dropzone.style.width = r, this._dropzone.style.height = a, this._dropzone.style.minWidth = r, this._dropzone.style.minHeight = a, this._fileInput || (this._fileInput = document.createElement("input"), this._fileInput.type = "file", this._fileInput.style.display = "none", this._fileInput.setAttribute("tabindex", "-1"), this._fileInput.setAttribute("aria-hidden", "true"), this._dropzone.appendChild(this._fileInput)), this._fileInput.accept = i, this._fileInput.multiple = s, this._fileInput.disabled = n, l ? this._fileInput.name = l : this._fileInput.removeAttribute("name"), this._fileInput.setAttribute("aria-invalid", o ? "true" : "false");
     const c = this._dropzone.querySelector(".mint-dropzone-icon"), m = this._dropzone.querySelector(".mint-dropzone-label");
     c && c.remove(), m && m.remove();
-    const h = document.createElement("div");
-    h.className = "mint-dropzone-icon flex items-center justify-center mt-2 mb-2 flex-shrink-0";
+    const d = document.createElement("div");
+    d.className = "mint-dropzone-icon flex items-center justify-center mt-2 mb-2 flex-shrink-0";
     const f = document.createElement("mint-icon");
-    if (f.setAttribute("name", "upload"), f.className = "w-12 h-12 text-gray-400 dark:text-gray-500", h.appendChild(f), this._dropzone.appendChild(h), t) {
+    if (f.setAttribute("name", "upload"), f.className = "w-12 h-12 text-gray-400 dark:text-gray-500", d.appendChild(f), this._dropzone.appendChild(d), t) {
       const u = document.createElement("div");
       u.className = "mint-dropzone-label text-sm font-medium text-gray-600 dark:text-gray-400 text-center px-4 flex-shrink-0", u.textContent = t, this._dropzone.appendChild(u);
     }
-    this.setupEventListeners(), this._renderErrorState(o, d), this._renderPreviews(), this._renderSkeleton(e);
+    this.setupEventListeners(), this._renderErrorState(o, h), this._renderPreviews(), this._renderSkeleton(e);
   }
   _updateDragState() {
     this._dropzone && this._updateDragStateClass();
@@ -3725,8 +3725,8 @@ class se extends HTMLElement {
   }
   _updateDragStateClass() {
     if (!this._dropzone) return;
-    const e = this.isDisabled(), t = this.hasError(), r = `relative border-2 border-dashed rounded-lg transition-all duration-200 flex flex-col items-center ${this._selectedFiles.length > 0 ? "justify-start" : "justify-center"} cursor-pointer overflow-hidden`, n = this._isDragging ? "border-gray-400 dark:border-gray-500 bg-gray-50 dark:bg-gray-800" : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 hover:border-gray-400 dark:hover:border-gray-500", a = t ? "border-red-300 dark:border-red-300 bg-red-50/50 dark:bg-red-900/30" : "", l = e ? "opacity-40 cursor-not-allowed" : "", o = "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500";
-    this._dropzone.className = `${r} ${t ? a : n} ${l} ${o}`.trim();
+    const e = this.isDisabled(), t = this.hasError(), n = `relative border-2 border-dashed rounded-lg transition-all duration-200 flex flex-col items-center ${this._selectedFiles.length > 0 ? "justify-start" : "justify-center"} cursor-pointer overflow-hidden`, r = this._isDragging ? "border-gray-400 dark:border-gray-500 bg-gray-50 dark:bg-gray-800" : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 hover:border-gray-400 dark:hover:border-gray-500", a = t ? "border-red-300 dark:border-red-300 bg-red-50/50 dark:bg-red-900/30" : "", l = e ? "opacity-40 cursor-not-allowed" : "", o = "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500";
+    this._dropzone.className = `${n} ${t ? a : r} ${l} ${o}`.trim();
   }
   setupEventListeners() {
     this._listenersInitialized || (this._listenersInitialized = !0, this.removeEventListeners(), !(!this._dropzone || !this._fileInput || this.isDisabled()) && (this._onDropzoneClick || (this._onDropzoneClick = (e) => {
@@ -3766,12 +3766,12 @@ class se extends HTMLElement {
         return;
       const i = e.target.files;
       if (i && i.length > 0) {
-        const s = this.getAccept(), r = this.isMultiple(), n = [], a = [];
+        const s = this.getAccept(), n = this.isMultiple(), r = [], a = [];
         for (let l = 0; l < i.length; l++) {
           const o = i[l];
-          this._isFileAccepted(o, s) ? n.push(o) : a.push(o);
+          this._isFileAccepted(o, s) ? r.push(o) : a.push(o);
         }
-        if (!r && n.length > 1 && (a.push(...n.slice(1)), n.splice(1)), a.length > 0) {
+        if (!n && r.length > 1 && (a.push(...r.slice(1)), r.splice(1)), a.length > 0) {
           const l = new CustomEvent("dropRejected", {
             detail: { files: a, reason: "File type not accepted or multiple files not allowed" },
             bubbles: !0,
@@ -3779,7 +3779,7 @@ class se extends HTMLElement {
           });
           this.dispatchEvent(l);
         }
-        n.length > 0 && this._applyValidFiles(n);
+        r.length > 0 && this._applyValidFiles(r);
       }
     }), this._dropzone.addEventListener("click", this._onDropzoneClick), this._dropzone.addEventListener("dragover", this._onDragOver), this._dropzone.addEventListener("dragleave", this._onDragLeave), this._dropzone.addEventListener("drop", this._onDrop), this._dropzone.addEventListener("keydown", this._onKeyDown), this._dropzone.addEventListener("focus", this._onFocus), this._dropzone.addEventListener("blur", this._onBlur), this._fileInput.addEventListener("change", this._onFileInputChange), this._fileInput.addEventListener("input", this._onFileInputInput, !0)));
   }
@@ -3787,32 +3787,32 @@ class se extends HTMLElement {
     this._dropzone && (this._onDropzoneClick && this._dropzone.removeEventListener("click", this._onDropzoneClick), this._onDragOver && this._dropzone.removeEventListener("dragover", this._onDragOver), this._onDragLeave && this._dropzone.removeEventListener("dragleave", this._onDragLeave), this._onDrop && this._dropzone.removeEventListener("drop", this._onDrop), this._onKeyDown && this._dropzone.removeEventListener("keydown", this._onKeyDown), this._onFocus && this._dropzone.removeEventListener("focus", this._onFocus), this._onBlur && this._dropzone.removeEventListener("blur", this._onBlur)), this._fileInput && (this._onFileInputChange && this._fileInput.removeEventListener("change", this._onFileInputChange), this._onFileInputInput && this._fileInput.removeEventListener("input", this._onFileInputInput, !0)), this._isDragging = !1, this._listenersInitialized = !1;
   }
   _handleFiles(e) {
-    const t = this.getAccept(), i = this.isMultiple(), s = [], r = [];
-    for (let n = 0; n < e.length; n++) {
-      const a = e[n];
-      this._isFileAccepted(a, t) ? s.push(a) : r.push(a);
+    const t = this.getAccept(), i = this.isMultiple(), s = [], n = [];
+    for (let r = 0; r < e.length; r++) {
+      const a = e[r];
+      this._isFileAccepted(a, t) ? s.push(a) : n.push(a);
     }
-    if (!i && s.length > 1 && (r.push(...s.slice(1)), s.splice(1)), r.length > 0) {
-      const n = new CustomEvent("dropRejected", {
-        detail: { files: r, reason: "File type not accepted or multiple files not allowed" },
+    if (!i && s.length > 1 && (n.push(...s.slice(1)), s.splice(1)), n.length > 0) {
+      const r = new CustomEvent("dropRejected", {
+        detail: { files: n, reason: "File type not accepted or multiple files not allowed" },
         bubbles: !0,
         cancelable: !0
       });
-      this.dispatchEvent(n);
+      this.dispatchEvent(r);
     }
     s.length > 0 && this._applyValidFiles(s);
   }
   _isFileAccepted(e, t) {
     var s;
     if (!t) return !0;
-    const i = t.split(",").map((r) => r.trim().toLowerCase());
-    for (const r of i)
-      if (r.startsWith(".")) {
-        if ("." + ((s = e.name.split(".").pop()) == null ? void 0 : s.toLowerCase()) === r) return !0;
-      } else if (r.includes("/*")) {
-        const n = r.split("/")[0], a = e.type.split("/")[0];
-        if (n === a) return !0;
-      } else if (e.type === r) return !0;
+    const i = t.split(",").map((n) => n.trim().toLowerCase());
+    for (const n of i)
+      if (n.startsWith(".")) {
+        if ("." + ((s = e.name.split(".").pop()) == null ? void 0 : s.toLowerCase()) === n) return !0;
+      } else if (n.includes("/*")) {
+        const r = n.split("/")[0], a = e.type.split("/")[0];
+        if (r === a) return !0;
+      } else if (e.type === n) return !0;
     return !1;
   }
   _dispatchEvent(e, t) {
@@ -3867,7 +3867,7 @@ class se extends HTMLElement {
     const e = document.createElement("div");
     e.className = "mint-dropzone-previews-wrapper mt-3 w-full relative max-h-48";
     const t = document.createElement("div");
-    t.className = "mint-dropzone-previews w-full flex flex-col gap-2 max-h-48 overflow-y-auto overflow-x-hidden px-2 pb-2", this._selectedFiles.forEach((o, d) => {
+    t.className = "mint-dropzone-previews w-full flex flex-col gap-2 max-h-48 overflow-y-auto overflow-x-hidden px-2 pb-2", this._selectedFiles.forEach((o, h) => {
       const c = document.createElement("div");
       if (c.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", o.type.startsWith("image/")) {
         const u = document.createElement("img");
@@ -3880,23 +3880,23 @@ class se extends HTMLElement {
       }
       const m = document.createElement("div");
       m.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", m.textContent = o.name, c.appendChild(m);
-      const h = document.createElement("button");
-      h.type = "button", h.className = "text-gray-500 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors flex items-center justify-center w-6 h-6 rounded-full";
+      const d = document.createElement("button");
+      d.type = "button", d.className = "text-gray-500 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors flex items-center justify-center w-6 h-6 rounded-full";
       const f = document.createElement("mint-icon");
-      f.setAttribute("name", "close"), f.className = "w-4 h-4", h.appendChild(f), h.addEventListener("click", (u) => {
-        u.preventDefault(), u.stopPropagation(), this._removeFileAt(d);
-      }), c.appendChild(h), t.appendChild(c);
+      f.setAttribute("name", "close"), f.className = "w-4 h-4", d.appendChild(f), d.addEventListener("click", (u) => {
+        u.preventDefault(), u.stopPropagation(), this._removeFileAt(h);
+      }), c.appendChild(d), t.appendChild(c);
     });
     const i = this.hasError(), s = this._isDragging;
-    let r = "from-white dark:from-gray-700";
-    i ? r = "from-red-50 dark:from-red-900/30" : s && (r = "from-gray-50 dark:from-gray-800");
-    const n = document.createElement("div");
-    n.className = `absolute top-0 left-0 right-0 h-4 pointer-events-none z-10 bg-gradient-to-b ${r} to-transparent opacity-0 transition-opacity duration-200`, e.appendChild(n);
+    let n = "from-white dark:from-gray-700";
+    i ? n = "from-red-50 dark:from-red-900/30" : s && (n = "from-gray-50 dark:from-gray-800");
+    const r = document.createElement("div");
+    r.className = `absolute top-0 left-0 right-0 h-4 pointer-events-none z-10 bg-gradient-to-b ${n} to-transparent opacity-0 transition-opacity duration-200`, e.appendChild(r);
     const a = document.createElement("div");
-    a.className = `absolute bottom-0 left-0 right-0 h-4 pointer-events-none z-10 bg-gradient-to-t ${r} to-transparent opacity-100 transition-opacity duration-200`, e.appendChild(a);
+    a.className = `absolute bottom-0 left-0 right-0 h-4 pointer-events-none z-10 bg-gradient-to-t ${n} to-transparent opacity-100 transition-opacity duration-200`, e.appendChild(a);
     const l = () => {
-      const o = t.scrollTop, d = t.scrollHeight, c = t.clientHeight;
-      o > 0 ? n.style.opacity = "1" : n.style.opacity = "0", o + c < d - 1 ? a.style.opacity = "1" : a.style.opacity = "0";
+      const o = t.scrollTop, h = t.scrollHeight, c = t.clientHeight;
+      o > 0 ? r.style.opacity = "1" : r.style.opacity = "0", o + c < h - 1 ? a.style.opacity = "1" : a.style.opacity = "0";
     };
     l(), t.addEventListener("scroll", l), e.appendChild(t), this._previewContainer = e, this._dropzone.appendChild(e), this._updateDragStateClass();
   }
@@ -3931,7 +3931,7 @@ class se extends HTMLElement {
 customElements.get("mint-dropzone") || customElements.define("mint-dropzone", se);
 class re extends HTMLElement {
   constructor() {
-    super(), this._form = null, this._submitHandler = null, this._hostSubmitHandler = null, this._errors = {}, this._fieldBlurHandlers = /* @__PURE__ */ new Map(), this._fieldChangeHandlers = /* @__PURE__ */ new Map(), this._observer = null, this._formData = null, this._headers = null, this._buttonStates = /* @__PURE__ */ new Map();
+    super(), this._form = null, this._submitHandler = null, this._hostSubmitHandler = null, this._errors = {}, this._fieldBlurHandlers = /* @__PURE__ */ new Map(), this._fieldChangeHandlers = /* @__PURE__ */ new Map(), this._observer = null, this._formData = null, this._headers = null, this._buttonStates = /* @__PURE__ */ new Map(), this._reactiveDataProxy = null, this._reactiveDataObserver = null, this._lastDataSnapshot = null;
   }
   static get observedAttributes() {
     return ["action", "method", "enctype", "data-form-data", "loading", "headers"];
@@ -3941,9 +3941,13 @@ class re extends HTMLElement {
     const e = this.getAttribute("headers");
     e && this._parseHeaders(e), requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        if (this._formData)
+        if (this._formData) {
+          if (this._isReactiveObject(this._formData)) {
+            const t = this._getReactiveValue(this._formData);
+            t && typeof t == "object" && !Array.isArray(t) && (this._lastDataSnapshot = this._createDataSnapshot(t), this._setupReactiveDataObserver(this._formData));
+          }
           this._applyFormData();
-        else {
+        } else {
           const t = this.getAttribute("data-form-data");
           t && (this._parseFormData(t), this._applyFormData());
         }
@@ -3952,7 +3956,7 @@ class re extends HTMLElement {
     });
   }
   disconnectedCallback() {
-    this._form && this._submitHandler && this._form.removeEventListener("submit", this._submitHandler, !0), this._hostSubmitHandler && this.removeEventListener("submit", this._hostSubmitHandler), this._cleanupBlurValidation();
+    this._form && this._submitHandler && this._form.removeEventListener("submit", this._submitHandler, !0), this._hostSubmitHandler && this.removeEventListener("submit", this._hostSubmitHandler), this._cleanupBlurValidation(), this._stopReactiveDataObserver();
   }
   /**
    * Public reset helper to restore all fields to their original values from the data property.
@@ -3982,7 +3986,7 @@ class re extends HTMLElement {
     return this._formData;
   }
   set data(e) {
-    e && typeof e == "object" && !Array.isArray(e) ? this._formData = e : e == null ? this._formData = null : this._parseFormData(e), this.isConnected && this._form && requestAnimationFrame(() => {
+    this._stopReactiveDataObserver(), this._reactiveDataProxy = null, this._lastDataSnapshot = null, e && typeof e == "object" && !Array.isArray(e) ? (this._formData = e, this._isReactiveObject(e) && this._setupReactiveDataObserver(e), this._lastDataSnapshot = this._createDataSnapshot(e)) : e == null ? this._formData = null : this._parseFormData(e), this.isConnected && this._form && requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           this._applyFormData();
@@ -4039,13 +4043,13 @@ class re extends HTMLElement {
       }));
       return;
     }
-    const n = new CustomEvent("submit", {
+    const r = new CustomEvent("submit", {
       detail: { formData: i, values: s },
       bubbles: !0,
       cancelable: !0,
       composed: !0
     });
-    if (this.dispatchEvent(n), n.defaultPrevented)
+    if (this.dispatchEvent(r), r.defaultPrevented)
       return;
     const a = this.getAttribute("action"), l = this.getAttribute("method");
     if (!(!a || !l)) {
@@ -4069,22 +4073,22 @@ class re extends HTMLElement {
     }
   }
   async _submitData(e, t) {
-    var c, m, h;
-    const i = this.getAttribute("action"), s = this.getAttribute("method"), r = this.getAttribute("enctype") || "application/x-www-form-urlencoded";
+    var c, m, d;
+    const i = this.getAttribute("action"), s = this.getAttribute("method"), n = this.getAttribute("enctype") || "application/x-www-form-urlencoded";
     if (!i)
       return { status: 0, ok: !0, data: { values: t } };
-    const n = Array.from(e.values()).some((f) => f instanceof File);
+    const r = Array.from(e.values()).some((f) => f instanceof File);
     let a = null;
     const l = {};
     let o = i;
-    if (typeof window < "u" && ((h = (m = (c = window.mintForm) == null ? void 0 : c.defaults) == null ? void 0 : m.headers) != null && h.common) && Object.assign(l, window.mintForm.defaults.headers.common), this._headers && Object.assign(l, this._headers), s === "GET") {
+    if (typeof window < "u" && ((d = (m = (c = window.mintForm) == null ? void 0 : c.defaults) == null ? void 0 : m.headers) != null && d.common) && Object.assign(l, window.mintForm.defaults.headers.common), this._headers && Object.assign(l, this._headers), s === "GET") {
       const f = new URLSearchParams();
       e.forEach((u, p) => {
         u instanceof File || f.append(p, String(u));
       }), o += (i.includes("?") ? "&" : "?") + f.toString();
-    } else if (r === "multipart/form-data" || n)
+    } else if (n === "multipart/form-data" || r)
       a = e;
-    else if (r === "application/json")
+    else if (n === "application/json")
       a = JSON.stringify(t), l["Content-Type"] = "application/json";
     else {
       const f = new URLSearchParams();
@@ -4120,7 +4124,7 @@ class re extends HTMLElement {
         };
         throw await this._applyErrorInterceptors(u);
       }
-    const d = this;
+    const h = this;
     return await new Promise(async (f, u) => {
       const p = new XMLHttpRequest();
       p.open(s || "POST", o, !0), Object.entries(l).forEach(([_, b]) => p.setRequestHeader(_, b)), p.onload = async function() {
@@ -4132,7 +4136,7 @@ class re extends HTMLElement {
           } catch {
           }
           try {
-            const x = { status: _, ok: !0, data: y }, k = await d._applySuccessInterceptors(x);
+            const x = { status: _, ok: !0, data: y }, k = await h._applySuccessInterceptors(x);
             f(k);
           } catch (x) {
             u(x);
@@ -4144,7 +4148,7 @@ class re extends HTMLElement {
           } catch {
           }
           try {
-            const x = { status: _, data: y, response: { status: _, data: y } }, k = await d._applyErrorInterceptors(x);
+            const x = { status: _, data: y, response: { status: _, data: y } }, k = await h._applyErrorInterceptors(x);
             u(k);
           } catch (x) {
             u(x);
@@ -4156,7 +4160,7 @@ class re extends HTMLElement {
             status: p.status || 0,
             data: p.responseText || "Network error",
             response: { status: p.status || 0, data: p.responseText || "Network error" }
-          }, b = await d._applyErrorInterceptors(_);
+          }, b = await h._applyErrorInterceptors(_);
           u(b);
         } catch (_) {
           u(_);
@@ -4165,8 +4169,8 @@ class re extends HTMLElement {
     });
   }
   async _applySuccessInterceptors(e) {
-    var s, r, n;
-    if (typeof window > "u" || !((n = (r = (s = window.mintForm) == null ? void 0 : s.interceptors) == null ? void 0 : r.response) != null && n.handlers))
+    var s, n, r;
+    if (typeof window > "u" || !((r = (n = (s = window.mintForm) == null ? void 0 : s.interceptors) == null ? void 0 : n.response) != null && r.handlers))
       return e;
     let t = e;
     const i = window.mintForm.interceptors.response.handlers;
@@ -4175,8 +4179,8 @@ class re extends HTMLElement {
     return t;
   }
   async _applyErrorInterceptors(e) {
-    var s, r, n;
-    if (typeof window > "u" || !((n = (r = (s = window.mintForm) == null ? void 0 : s.interceptors) == null ? void 0 : r.response) != null && n.handlers))
+    var s, n, r;
+    if (typeof window > "u" || !((r = (n = (s = window.mintForm) == null ? void 0 : s.interceptors) == null ? void 0 : n.response) != null && r.handlers))
       return Promise.reject(e);
     let t = e;
     const i = window.mintForm.interceptors.response.handlers;
@@ -4196,35 +4200,35 @@ class re extends HTMLElement {
     const t = {};
     return e.forEach((i, s) => {
       i instanceof File ? (t[s] || (t[s] = []), t[s].push(i)) : s in t ? Array.isArray(t[s]) ? (t[s].length > 0 && t[s][0] instanceof File, t[s].push(i)) : t[s] = [t[s], i] : t[s] = i;
-    }), this._form && (Array.from(this._form.querySelectorAll("mint-dropzone[name]")).forEach((n) => {
-      const a = n.getAttribute("name");
-      if (a && typeof n.files < "u" && n.files) {
-        const l = n.files;
+    }), this._form && (Array.from(this._form.querySelectorAll("mint-dropzone[name]")).forEach((r) => {
+      const a = r.getAttribute("name");
+      if (a && typeof r.files < "u" && r.files) {
+        const l = r.files;
         if (l.length > 0) {
           const o = Array.from(l);
-          t[a] && Array.isArray(t[a]) ? o.forEach((d) => {
+          t[a] && Array.isArray(t[a]) ? o.forEach((h) => {
             t[a].some(
-              (m) => m.name === d.name && m.size === d.size && m.lastModified === d.lastModified
-            ) || t[a].push(d);
+              (m) => m.name === h.name && m.size === h.size && m.lastModified === h.lastModified
+            ) || t[a].push(h);
           }) : t[a] = o;
         }
       }
-    }), Array.from(this._form.querySelectorAll('input[type="file"][name]')).forEach((n) => {
-      const a = n.name;
-      if (a && n.files && n.files.length > 0) {
-        const l = Array.from(n.files);
+    }), Array.from(this._form.querySelectorAll('input[type="file"][name]')).forEach((r) => {
+      const a = r.name;
+      if (a && r.files && r.files.length > 0) {
+        const l = Array.from(r.files);
         t[a] && Array.isArray(t[a]) ? l.forEach((o) => {
           t[a].some(
             (c) => c.name === o.name && c.size === o.size && c.lastModified === o.lastModified
           ) || t[a].push(o);
         }) : t[a] = l;
       }
-    }), Array.from(this._form.querySelectorAll("mint-tags[name]")).forEach((n) => {
-      const a = n.getAttribute("name");
+    }), Array.from(this._form.querySelectorAll("mint-tags[name]")).forEach((r) => {
+      const a = r.getAttribute("name");
       if (a) {
         let l = [];
-        if (typeof n.tags < "u" ? l = n.tags : typeof n.getTags == "function" && (l = n.getTags()), Array.isArray(l) && l.length > 0) {
-          const o = l.map((d) => typeof d == "string" ? d : (d == null ? void 0 : d.value) || (d == null ? void 0 : d.label) || "").filter((d) => d.trim() !== "");
+        if (typeof r.tags < "u" ? l = r.tags : typeof r.getTags == "function" && (l = r.getTags()), Array.isArray(l) && l.length > 0) {
+          const o = l.map((h) => typeof h == "string" ? h : (h == null ? void 0 : h.value) || (h == null ? void 0 : h.label) || "").filter((h) => h.trim() !== "");
           t[a] = o;
         } else
           t[a] = [];
@@ -4234,10 +4238,10 @@ class re extends HTMLElement {
   _collectValidationRules() {
     const e = {};
     return this._form && Array.from(this._form.querySelectorAll("[name][validation]")).forEach((i) => {
-      const s = i.getAttribute("name") || "", r = i.getAttribute("validation");
-      if (!s || !r) return;
-      const n = this._parseRules(r);
-      n.length && (e[s] = n);
+      const s = i.getAttribute("name") || "", n = i.getAttribute("validation");
+      if (!s || !n) return;
+      const r = this._parseRules(n);
+      r.length && (e[s] = r);
     }), e;
   }
   _parseRules(e) {
@@ -4252,20 +4256,20 @@ class re extends HTMLElement {
   }
   _validate(e, t) {
     let i = !0;
-    return this._errors = {}, Object.entries(t || {}).forEach(([s, r]) => {
-      const n = Array.isArray(r) ? r : [r], a = this._getFieldElements(s), l = this._extractFieldValue(a), o = this._validateRules(l, n);
+    return this._errors = {}, Object.entries(t || {}).forEach(([s, n]) => {
+      const r = Array.isArray(n) ? n : [n], a = this._getFieldElements(s), l = this._extractFieldValue(a), o = this._validateRules(l, r);
       o ? (i = !1, this._errors[s] = o, this._flagFieldError(a, o)) : this._clearFieldError(a);
     }), i;
   }
   _validateField(e) {
     const t = this._collectValidationRules();
     if (!t[e]) return;
-    const i = t[e], s = Array.isArray(i) ? i : [i], r = this._getFieldElements(e), n = this._extractFieldValue(r), a = this._validateRules(n, s);
-    a ? (this._errors[e] = a, this._flagFieldError(r, a)) : (this._clearFieldError(r), delete this._errors[e]);
+    const i = t[e], s = Array.isArray(i) ? i : [i], n = this._getFieldElements(e), r = this._extractFieldValue(n), a = this._validateRules(r, s);
+    a ? (this._errors[e] = a, this._flagFieldError(n, a)) : (this._clearFieldError(n), delete this._errors[e]);
   }
   _validateRules(e, t) {
     for (const i of t) {
-      const [s, r] = i.split(":");
+      const [s, n] = i.split(":");
       switch (s) {
         case "required": {
           if (e == null || typeof e == "string" && e.trim() === "" || e instanceof FileList && e.length === 0 || Array.isArray(e) && e.length === 0) return "This field is required.";
@@ -4281,26 +4285,26 @@ class re extends HTMLElement {
           break;
         }
         case "number": {
-          const n = Number(e);
-          if (Number.isNaN(n)) return "Must be a number.";
+          const r = Number(e);
+          if (Number.isNaN(r)) return "Must be a number.";
           break;
         }
         case "min": {
-          const n = Number(r);
-          if (Number.isNaN(n)) break;
-          if (typeof e == "string" && e.trim().length < n) return `Must be at least ${n} characters.`;
-          if (Array.isArray(e) && e.length < n) return `Select at least ${n}.`;
-          if (e instanceof FileList && e.length < n) return `Upload at least ${n} files.`;
-          if (e != null && !Number.isNaN(Number(e)) && Number(e) < n) return `Must be at least ${n}.`;
+          const r = Number(n);
+          if (Number.isNaN(r)) break;
+          if (typeof e == "string" && e.trim().length < r) return `Must be at least ${r} characters.`;
+          if (Array.isArray(e) && e.length < r) return `Select at least ${r}.`;
+          if (e instanceof FileList && e.length < r) return `Upload at least ${r} files.`;
+          if (e != null && !Number.isNaN(Number(e)) && Number(e) < r) return `Must be at least ${r}.`;
           break;
         }
         case "max": {
-          const n = Number(r);
-          if (Number.isNaN(n)) break;
-          if (typeof e == "string" && e.trim().length > n) return `Must be at most ${n} characters.`;
-          if (Array.isArray(e) && e.length > n) return `Select no more than ${n}.`;
-          if (e instanceof FileList && e.length > n) return `Upload no more than ${n} files.`;
-          if (e != null && !Number.isNaN(Number(e)) && Number(e) > n) return `Must be at most ${n}.`;
+          const r = Number(n);
+          if (Number.isNaN(r)) break;
+          if (typeof e == "string" && e.trim().length > r) return `Must be at most ${r} characters.`;
+          if (Array.isArray(e) && e.length > r) return `Select no more than ${r}.`;
+          if (e instanceof FileList && e.length > r) return `Upload no more than ${r} files.`;
+          if (e != null && !Number.isNaN(Number(e)) && Number(e) > r) return `Must be at most ${r}.`;
           break;
         }
       }
@@ -4309,23 +4313,23 @@ class re extends HTMLElement {
   }
   _getFieldElements(e) {
     if (!this._form) return [];
-    const t = Array.from(this._form.querySelectorAll(`[name="${e}"]`)), i = t.filter((n) => n.tagName === "MINT-SELECT");
+    const t = Array.from(this._form.querySelectorAll(`[name="${e}"]`)), i = t.filter((r) => r.tagName === "MINT-SELECT");
     if (i.length > 0) {
-      const n = [];
+      const r = [];
       return i.forEach((a) => {
         const l = a.querySelector('select[name="' + e + '"]');
-        l && n.push(l);
-      }), t.filter((a) => a.tagName !== "MINT-SELECT").concat(n);
+        l && r.push(l);
+      }), t.filter((a) => a.tagName !== "MINT-SELECT").concat(r);
     }
-    if (t.filter((n) => n.tagName === "MINT-TAGS").length > 0)
-      return t.filter((n) => n.tagName !== "INPUT" || !n.closest("mint-tags"));
-    const r = t.filter((n) => n.tagName === "INPUT" && n.closest("mint-tags"));
-    if (r.length > 0) {
-      const n = [];
-      return r.forEach((a) => {
+    if (t.filter((r) => r.tagName === "MINT-TAGS").length > 0)
+      return t.filter((r) => r.tagName !== "INPUT" || !r.closest("mint-tags"));
+    const n = t.filter((r) => r.tagName === "INPUT" && r.closest("mint-tags"));
+    if (n.length > 0) {
+      const r = [];
+      return n.forEach((a) => {
         const l = a.closest("mint-tags");
-        l && !n.includes(l) && n.push(l);
-      }), t.filter((a) => a.tagName !== "INPUT" || !a.closest("mint-tags")).concat(n);
+        l && !r.includes(l) && r.push(l);
+      }), t.filter((a) => a.tagName !== "INPUT" || !a.closest("mint-tags")).concat(r);
     }
     return t;
   }
@@ -4343,9 +4347,9 @@ class re extends HTMLElement {
         if (s.every((l) => l.type === "checkbox"))
           return a.map((l) => l.value || "on");
       }
-      const r = e.filter((a) => a.tagName === "MINT-CHOICE");
-      if (r.length > 0 && r.length === e.length) {
-        const a = r.find((l) => typeof l.getValue == "function" ? l.getValue() !== "" : l.querySelector("mint-choice-option[checked]") !== null);
+      const n = e.filter((a) => a.tagName === "MINT-CHOICE");
+      if (n.length > 0 && n.length === e.length) {
+        const a = n.find((l) => typeof l.getValue == "function" ? l.getValue() !== "" : l.querySelector("mint-choice-option[checked]") !== null);
         if (a) {
           if (typeof a.getValue == "function")
             return a.getValue();
@@ -4355,9 +4359,9 @@ class re extends HTMLElement {
         }
         return "";
       }
-      const n = e.filter((a) => a.tagName === "MINT-CHECKBOX");
-      if (n.length > 0 && n.length === e.length)
-        return n.filter((l) => typeof l.checked < "u" ? l.checked : l.hasAttribute("checked")).map((l) => l.getAttribute("value") || "on");
+      const r = e.filter((a) => a.tagName === "MINT-CHECKBOX");
+      if (r.length > 0 && r.length === e.length)
+        return r.filter((l) => typeof l.checked < "u" ? l.checked : l.hasAttribute("checked")).map((l) => l.getAttribute("value") || "on");
     }
     const i = e[0];
     if (i instanceof HTMLInputElement)
@@ -4369,18 +4373,18 @@ class re extends HTMLElement {
       if (s)
         return s.value;
       if (typeof i.getValue == "function") {
-        const n = i.getValue();
-        if (n != null && n !== "")
-          return n;
+        const r = i.getValue();
+        if (r != null && r !== "")
+          return r;
       }
-      const r = i.getAttribute("value");
-      return r || "";
+      const n = i.getAttribute("value");
+      return n || "";
     }
     if (i.tagName === "MINT-DROPZONE" && typeof i.files < "u")
       return i.files;
     if (i.tagName === "MINT-TAGS") {
       let s = null;
-      return typeof i.tags < "u" ? s = i.tags : typeof i.getTags == "function" && (s = i.getTags()), Array.isArray(s) ? s.map((n) => typeof n == "string" ? n : (n == null ? void 0 : n.value) || (n == null ? void 0 : n.label) || "").filter((n) => n.trim() !== "") : [];
+      return typeof i.tags < "u" ? s = i.tags : typeof i.getTags == "function" && (s = i.getTags()), Array.isArray(s) ? s.map((r) => typeof r == "string" ? r : (r == null ? void 0 : r.value) || (r == null ? void 0 : r.label) || "").filter((r) => r.trim() !== "") : [];
     }
     return i.tagName === "MINT-CHECKBOX" || i.tagName === "MINT-SWITCH" ? (typeof i.checked < "u" ? i.checked : i.hasAttribute("checked")) ? i.getAttribute("value") || "on" : "" : i.tagName === "MINT-CHOICE" ? (typeof i.getValue == "function" ? i.getValue() : "") || "" : typeof i.value < "u" ? i.value : i.getAttribute("value") || "";
   }
@@ -4440,44 +4444,47 @@ class re extends HTMLElement {
   }
   _applyFormData() {
     if (!this._formData || !this._form) return;
-    const e = () => {
-      Object.entries(this._formData).forEach(([t, i]) => {
-        const s = this._getFieldElements(t);
-        if (s.length === 0) {
+    const e = this._getReactiveValue(this._formData);
+    if (!e || typeof e != "object" || Array.isArray(e))
+      return;
+    const t = () => {
+      Object.entries(e).forEach(([i, s]) => {
+        const n = this._getFieldElements(i);
+        if (n.length === 0) {
           setTimeout(() => {
-            const r = this._getFieldElements(t);
-            r.length > 0 && this._applyValueToField(r, t, i);
+            const r = this._getFieldElements(i);
+            r.length > 0 && this._applyValueToField(r, i, s);
           }, 300);
           return;
         }
-        this._applyValueToField(s, t, i);
+        this._applyValueToField(n, i, s);
       });
     };
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        e();
+        t();
       });
     });
   }
   _applyValueToField(e, t, i) {
     e.forEach((s) => {
-      var n;
-      const r = s.tagName;
+      var r;
+      const n = s.tagName;
       try {
-        if (r === "MINT-INPUT")
+        if (n === "MINT-INPUT")
           typeof s.value < "u" && (s.value = i || "");
-        else if (r === "MINT-DATE-PICKER")
+        else if (n === "MINT-DATE-PICKER")
           typeof s.setValue == "function" && s.setValue(i || "");
-        else if (r === "MINT-SELECT" || r === "SELECT")
-          r === "SELECT" ? (n = s.closest("mint-select")) == null || n.setValue(i || "") : typeof s.setValue == "function" && s.setValue(i || "");
-        else if (r === "MINT-CHOICE")
+        else if (n === "MINT-SELECT" || n === "SELECT")
+          n === "SELECT" ? (r = s.closest("mint-select")) == null || r.setValue(i || "") : typeof s.setValue == "function" && s.setValue(i || "");
+        else if (n === "MINT-CHOICE")
           typeof s.setValue == "function" ? s.setValue(i || "") : s.querySelectorAll("mint-choice-option").forEach((l) => {
             l.checked = l.getAttribute("value") === i;
           });
-        else if (r === "MINT-CHECKBOX" || r === "MINT-SWITCH") {
+        else if (n === "MINT-CHECKBOX" || n === "MINT-SWITCH") {
           const a = i === !0 || i === "true" || i === "on" || i === 1 || i === "1";
           typeof s.checked < "u" ? s.checked = a : a ? s.setAttribute("checked", "") : s.removeAttribute("checked");
-        } else r === "MINT-TAGS" ? Array.isArray(i) && typeof s.tags < "u" && (s.tags = i.map((a) => typeof a == "string" ? { value: a, label: a, dismissable: !0 } : a)) : s instanceof HTMLInputElement ? s.type === "checkbox" || s.type === "radio" ? s.checked = i === !0 || i === "true" || i === "on" || i === 1 || i === "1" : s.value = i || "" : (s instanceof HTMLTextAreaElement || s instanceof HTMLSelectElement) && (s.value = i || "");
+        } else n === "MINT-TAGS" ? Array.isArray(i) && typeof s.tags < "u" && (s.tags = i.map((a) => typeof a == "string" ? { value: a, label: a, dismissable: !0 } : a)) : s instanceof HTMLInputElement ? s.type === "checkbox" || s.type === "radio" ? s.checked = i === !0 || i === "true" || i === "on" || i === 1 || i === "1" : s.value = i || "" : (s instanceof HTMLTextAreaElement || s instanceof HTMLSelectElement) && (s.value = i || "");
       } catch (a) {
         console.warn(`Failed to set value for field ${t}:`, a);
       }
@@ -4485,7 +4492,7 @@ class re extends HTMLElement {
   }
   _resetCustomFields() {
     this.querySelectorAll("mint-input, mint-date-picker, mint-select, mint-dropzone, mint-checkbox, mint-choice, mint-switch, mint-tags").forEach((t) => {
-      var s, r;
+      var s, n;
       t.removeAttribute("error"), t.removeAttribute("error-message");
       const i = t.tagName;
       if (i === "MINT-INPUT")
@@ -4500,20 +4507,20 @@ class re extends HTMLElement {
         }
       else if (i === "MINT-SELECT")
         try {
-          (r = t.setValue) == null || r.call(t, "");
+          (n = t.setValue) == null || n.call(t, "");
         } catch {
         }
       else if (i === "MINT-DROPZONE") {
-        const n = t.querySelector('input[type="file"]');
-        n && (n.value = "");
+        const r = t.querySelector('input[type="file"]');
+        r && (r.value = "");
       } else if (i === "MINT-CHECKBOX" || i === "MINT-SWITCH")
         try {
           if (typeof t.checked < "u")
             t.checked = !1;
           else {
             t.removeAttribute("checked");
-            const n = t.querySelector('input[type="checkbox"], input[type="radio"]');
-            n && (n.checked = !1);
+            const r = t.querySelector('input[type="checkbox"], input[type="radio"]');
+            r && (r.checked = !1);
           }
         } catch {
         }
@@ -4544,13 +4551,13 @@ class re extends HTMLElement {
     const e = (i) => {
       const s = i.target;
       if (!s) return;
-      const r = this._findFieldElement(s);
-      if (!r) return;
-      const n = this._getFieldName(r);
-      if (!n || !this._collectValidationRules()[n]) return;
-      const l = this._extractFieldValue([r]), o = l != null && (typeof l == "string" ? l.trim() !== "" : l instanceof FileList || Array.isArray(l) ? l.length > 0 : !0), d = r.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && (s.hasAttribute("aria-invalid") || s.closest("[data-mint-form-error]")), c = !!r.closest("mint-tags"), m = r.tagName === "MINT-CHECKBOX" || r.tagName === "MINT-SWITCH" || r.tagName === "MINT-CHOICE" || s instanceof HTMLElement && (s.closest("mint-checkbox, mint-switch, mint-choice") || s.closest("mint-choice-option")), h = r.tagName === "MINT-DATE-PICKER" || s instanceof HTMLElement && s.closest("mint-date-picker");
-      (o || d || c || m || h) && setTimeout(() => {
-        this._validateField(n);
+      const n = this._findFieldElement(s);
+      if (!n) return;
+      const r = this._getFieldName(n);
+      if (!r || !this._collectValidationRules()[r]) return;
+      const l = this._extractFieldValue([n]), o = l != null && (typeof l == "string" ? l.trim() !== "" : l instanceof FileList || Array.isArray(l) ? l.length > 0 : !0), h = n.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && (s.hasAttribute("aria-invalid") || s.closest("[data-mint-form-error]")), c = !!n.closest("mint-tags"), m = n.tagName === "MINT-CHECKBOX" || n.tagName === "MINT-SWITCH" || n.tagName === "MINT-CHOICE" || s instanceof HTMLElement && (s.closest("mint-checkbox, mint-switch, mint-choice") || s.closest("mint-choice-option")), d = n.tagName === "MINT-DATE-PICKER" || s instanceof HTMLElement && s.closest("mint-date-picker");
+      (o || h || c || m || d) && setTimeout(() => {
+        this._validateField(r);
       }, 0);
     };
     this._form.addEventListener("blur", e, !0), this._fieldBlurHandlers.set(this._form, e);
@@ -4558,7 +4565,7 @@ class re extends HTMLElement {
       const s = i.target;
       if (!s) return;
       if (i.type === "tags-change" && s.tagName === "MINT-TAGS") {
-        const d = s, c = this._getFieldName(d);
+        const h = s, c = this._getFieldName(h);
         if (!c || !this._collectValidationRules()[c]) return;
         setTimeout(() => {
           this._validateField(c);
@@ -4566,9 +4573,9 @@ class re extends HTMLElement {
         return;
       }
       if (s instanceof HTMLSelectElement || s.tagName === "MINT-SELECT" || s.closest("mint-select")) {
-        const d = this._findFieldElement(s);
-        if (!d) return;
-        const c = this._getFieldName(d);
+        const h = this._findFieldElement(s);
+        if (!h) return;
+        const c = this._getFieldName(h);
         if (!c || !this._collectValidationRules()[c]) return;
         setTimeout(() => {
           this._validateField(c);
@@ -4576,7 +4583,7 @@ class re extends HTMLElement {
         return;
       }
       if (i.type === "choice-change" && s.tagName === "MINT-CHOICE") {
-        const d = s, c = this._getFieldName(d);
+        const h = s, c = this._getFieldName(h);
         if (!c || !this._collectValidationRules()[c]) return;
         setTimeout(() => {
           this._validateField(c);
@@ -4584,9 +4591,9 @@ class re extends HTMLElement {
         return;
       }
       if (s instanceof HTMLInputElement && s.type === "checkbox" || s.tagName === "MINT-CHECKBOX" || s.tagName === "MINT-SWITCH" || s.closest("mint-checkbox, mint-switch")) {
-        const d = this._findFieldElement(s);
-        if (!d) return;
-        const c = this._getFieldName(d);
+        const h = this._findFieldElement(s);
+        if (!h) return;
+        const c = this._getFieldName(h);
         if (!c || !this._collectValidationRules()[c]) return;
         setTimeout(() => {
           this._validateField(c);
@@ -4652,8 +4659,8 @@ class re extends HTMLElement {
     this._buttonStates.clear();
     const e = Array.from(this.querySelectorAll("mint-button")), t = Array.from(this.querySelectorAll("button"));
     e.forEach((i) => {
-      const s = i.getAttribute("disabled") === "true", r = i.getAttribute("loading") === "true";
-      this._buttonStates.set(i, { disabled: s, loading: r });
+      const s = i.getAttribute("disabled") === "true", n = i.getAttribute("loading") === "true";
+      this._buttonStates.set(i, { disabled: s, loading: n });
       const a = (i.getAttribute("type") || i.getAttribute("button-type") || "default") === "submit";
       s || i.setAttribute("disabled", "true"), a && i.setAttribute("loading", "true"), typeof i.render == "function" && i.render();
     }), t.forEach((i) => {
@@ -4674,6 +4681,77 @@ class re extends HTMLElement {
       s && (i.disabled = s.disabled);
     }), this._buttonStates.clear();
   }
+  /**
+   * Check if an object might be reactive (from Vue, React, or other frameworks)
+   * Framework-agnostic detection based on common patterns
+   */
+  _isReactiveObject(e) {
+    if (!e || typeof e != "object" || Array.isArray(e))
+      return !1;
+    if ("__v_isRef" in e || "_value" in e || "__v_raw" in e || "__ob__" in e)
+      return !0;
+    try {
+      const t = Object.keys(e);
+      if (t.length > 0) {
+        const i = Object.getOwnPropertyDescriptor(e, t[0]);
+        if (i && (i.get || i.set))
+          return !0;
+      }
+    } catch {
+      return !0;
+    }
+    return !0;
+  }
+  /**
+   * Create a deep snapshot of the data object for comparison
+   */
+  _createDataSnapshot(e) {
+    try {
+      return JSON.parse(JSON.stringify(e));
+    } catch {
+      return { ...e };
+    }
+  }
+  /**
+   * Check if data has changed by comparing current state with snapshot
+   */
+  _hasDataChanged(e, t) {
+    try {
+      return JSON.stringify(e) !== JSON.stringify(t);
+    } catch {
+      return !0;
+    }
+  }
+  /**
+   * Get the actual value from a potentially reactive object
+   */
+  _getReactiveValue(e) {
+    return e && typeof e == "object" && "_value" in e ? e._value : (e && typeof e == "object" && "__ob__" in e, e);
+  }
+  /**
+   * Set up observer for reactive data changes
+   */
+  _setupReactiveDataObserver(e) {
+    if (!this.isConnected)
+      return;
+    const t = () => {
+      if (!this._formData || !this._lastDataSnapshot) {
+        this._stopReactiveDataObserver();
+        return;
+      }
+      const i = this._getReactiveValue(this._formData);
+      i && typeof i == "object" && !Array.isArray(i) && this._hasDataChanged(i, this._lastDataSnapshot) && (this._lastDataSnapshot = this._createDataSnapshot(i), requestAnimationFrame(() => {
+        this._applyFormData();
+      })), this.isConnected && this._formData && (this._reactiveDataObserver = requestAnimationFrame(t));
+    };
+    this._reactiveDataObserver = requestAnimationFrame(t);
+  }
+  /**
+   * Stop observing reactive data changes
+   */
+  _stopReactiveDataObserver() {
+    this._reactiveDataObserver !== null && (cancelAnimationFrame(this._reactiveDataObserver), this._reactiveDataObserver = null), this._reactiveDataProxy = null, this._lastDataSnapshot = null;
+  }
 }
 customElements.get("mint-form") || customElements.define("mint-form", re);
 typeof window < "u" && (window.mintForm = window.mintForm || {
@@ -4739,8 +4817,8 @@ class ne extends HTMLElement {
     }
     const t = this.hasAttribute("collapse") && !this.hasAttribute("scroll"), i = this.hasAttribute("scroll");
     i ? this.classList.add("relative") : this.classList.remove("relative");
-    const s = [], r = e.querySelector("thead tr");
-    r && r.querySelectorAll("th").forEach((d) => s.push((d.textContent || "").trim())), this._setClasses(e, [
+    const s = [], n = e.querySelector("thead tr");
+    n && n.querySelectorAll("th").forEach((h) => s.push((h.textContent || "").trim())), this._setClasses(e, [
       "w-full",
       i ? "min-w-[1200px]" : "",
       "border-collapse",
@@ -4752,12 +4830,12 @@ class ne extends HTMLElement {
       "dark:border-gray-700",
       "overflow-hidden"
     ]);
-    const n = e.querySelector("thead");
-    n && (this._setClasses(n, [
+    const r = e.querySelector("thead");
+    r && (this._setClasses(r, [
       "bg-[#F7F7F7]",
       "dark:bg-gray-800"
-    ]), n.querySelectorAll("th").forEach((d) => {
-      this._setClasses(d, [
+    ]), r.querySelectorAll("th").forEach((h) => {
+      this._setClasses(h, [
         "text-left",
         "font-semibold",
         "text-gray-900",
@@ -4772,20 +4850,20 @@ class ne extends HTMLElement {
     const a = e.querySelector("tbody");
     if (a) {
       const o = Array.from(a.querySelectorAll("tr"));
-      o.forEach((d, c) => {
-        this._setClasses(d, [
+      o.forEach((h, c) => {
+        this._setClasses(h, [
           "bg-white",
           "dark:bg-gray-900",
           "border-b",
           "border-gray-200",
           "dark:border-gray-700"
-        ]), c === o.length - 1 && d.classList.remove("border-b"), d.querySelectorAll("td").forEach((h) => {
-          this._setClasses(h, [
+        ]), c === o.length - 1 && h.classList.remove("border-b"), h.querySelectorAll("td").forEach((d) => {
+          this._setClasses(d, [
             "text-gray-900",
             "dark:text-gray-100",
             "px-3",
             "py-2"
-          ]), t ? this._applyMobileCell(h, s) : this._restoreCell(h);
+          ]), t ? this._applyMobileCell(d, s) : this._restoreCell(d);
         });
       });
     }
@@ -4794,8 +4872,8 @@ class ne extends HTMLElement {
       "bg-[#F7F7F7]",
       "dark:bg-gray-800",
       "font-semibold"
-    ]), l.querySelectorAll("td").forEach((d) => {
-      this._setClasses(d, [
+    ]), l.querySelectorAll("td").forEach((h) => {
+      this._setClasses(h, [
         "text-gray-900",
         "dark:text-gray-100",
         "px-3",
@@ -4803,17 +4881,17 @@ class ne extends HTMLElement {
         "border-t",
         "border-gray-200",
         "dark:border-gray-700"
-      ]), this._restoreCell(d);
+      ]), this._restoreCell(h);
     })), this._observer && this._observeChanges();
   }
   _applyMobileCell(e, t) {
     if (e.closest("tfoot") || e.dataset.mtProcessed === "true") return;
-    const i = t[e.cellIndex] || "", s = e.getAttribute("data-original"), r = s !== null ? s : e.innerHTML;
-    e.setAttribute("data-original", r), e.dataset.mtProcessed = "true", e.innerHTML = "";
-    const n = document.createElement("span");
-    n.className = "mt-label font-semibold text-gray-700 dark:text-gray-200 hidden", n.textContent = i;
+    const i = t[e.cellIndex] || "", s = e.getAttribute("data-original"), n = s !== null ? s : e.innerHTML;
+    e.setAttribute("data-original", n), e.dataset.mtProcessed = "true", e.innerHTML = "";
+    const r = document.createElement("span");
+    r.className = "mt-label font-semibold text-gray-700 dark:text-gray-200 hidden", r.textContent = i;
     const a = document.createElement("span");
-    a.className = "mt-value text-gray-900 dark:text-gray-100 text-right md:text-left w-full", a.innerHTML = r, e.appendChild(n), e.appendChild(a);
+    a.className = "mt-value text-gray-900 dark:text-gray-100 text-right md:text-left w-full", a.innerHTML = n, e.appendChild(r), e.appendChild(a);
   }
   _restoreCell(e) {
     if (e.dataset.mtProcessed !== "true") return;
@@ -4983,7 +5061,7 @@ class oe extends HTMLElement {
     if (t !== i) {
       if (e === "error" || e === "error-message") {
         if (this._renderErrorState(), this._container) {
-          const s = this.hasError(), r = [
+          const s = this.hasError(), n = [
             "flex",
             "flex-wrap",
             "items-center",
@@ -5003,7 +5081,7 @@ class oe extends HTMLElement {
             "transition-colors",
             "duration-200"
           ];
-          this._container.className = r.join(" ");
+          this._container.className = n.join(" ");
         }
         return;
       }
@@ -5061,8 +5139,8 @@ class oe extends HTMLElement {
   }
   _render() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block", "w-full");
-    const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.hasError(), r = this.getId() || `mint-tags-${Math.random().toString(36).substr(2, 9)}`;
-    if (this.getId() || this.setAttribute("id", r), this._container)
+    const e = this.isLoading(), t = this.getLabel(), i = this.getInfo(), s = this.hasError(), n = this.getId() || `mint-tags-${Math.random().toString(36).substr(2, 9)}`;
+    if (this.getId() || this.setAttribute("id", n), this._container)
       this._input && (this._input.placeholder = this._placeholder);
     else {
       this._container = document.createElement("div");
@@ -5086,10 +5164,10 @@ class oe extends HTMLElement {
         "transition-colors",
         "duration-200"
       ];
-      this._container.className = o.join(" "), this._chipsWrap = document.createElement("div"), this._chipsWrap.className = "flex flex-wrap items-center gap-2", this._chipsWrap.addEventListener("dragover", (d) => {
-        this.hasAttribute("sortable") && d.preventDefault();
-      }), this._chipsWrap.addEventListener("drop", (d) => {
-        this.hasAttribute("sortable") && d.preventDefault();
+      this._container.className = o.join(" "), this._chipsWrap = document.createElement("div"), this._chipsWrap.className = "flex flex-wrap items-center gap-2", this._chipsWrap.addEventListener("dragover", (h) => {
+        this.hasAttribute("sortable") && h.preventDefault();
+      }), this._chipsWrap.addEventListener("drop", (h) => {
+        this.hasAttribute("sortable") && h.preventDefault();
       }), this._input = document.createElement("input"), this._input.type = "text", this._input.placeholder = this._placeholder, this._input.className = [
         "min-w-[6rem]",
         "flex-1",
@@ -5102,8 +5180,8 @@ class oe extends HTMLElement {
         "placeholder:text-gray-400",
         "dark:placeholder:text-gray-500",
         "p-1.5"
-      ].join(" "), this._input.addEventListener("keydown", (d) => {
-        d.key === "Enter" && (d.preventDefault(), this._addFromInput());
+      ].join(" "), this._input.addEventListener("keydown", (h) => {
+        h.key === "Enter" && (h.preventDefault(), this._addFromInput());
       }), this._container.appendChild(this._chipsWrap), this.appendChild(this._container);
     }
     if (this._container) {
@@ -5129,16 +5207,16 @@ class oe extends HTMLElement {
       ];
       this._container.className = o.join(" ");
     }
-    let n = this.querySelector(".mint-tags-label-container");
+    let r = this.querySelector(".mint-tags-label-container");
     if (t) {
-      n || (n = document.createElement("div"), n.className = "mint-tags-label-container mb-[.25rem]", this._container && this._container.parentElement === this ? this.insertBefore(n, this._container) : this.insertBefore(n, this.firstChild));
-      let o = n.querySelector(".mint-tags-label");
-      t ? (o || (o = document.createElement("label"), o.className = "mint-tags-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", n.appendChild(o)), o.textContent = t, o.setAttribute("for", r)) : o && o.remove();
-    } else n && n.remove();
+      r || (r = document.createElement("div"), r.className = "mint-tags-label-container mb-[.25rem]", this._container && this._container.parentElement === this ? this.insertBefore(r, this._container) : this.insertBefore(r, this.firstChild));
+      let o = r.querySelector(".mint-tags-label");
+      t ? (o || (o = document.createElement("label"), o.className = "mint-tags-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", r.appendChild(o)), o.textContent = t, o.setAttribute("for", n)) : o && o.remove();
+    } else r && r.remove();
     let a = this.querySelector(".mint-tags-info");
     i ? (a || (a = document.createElement("span"), a.className = "mint-tags-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", this._container && this._container.parentElement === this ? this.insertBefore(a, this._container.nextSibling) : this.appendChild(a)), a.textContent = i) : a && a.remove();
     const l = this.getName();
-    l ? (this.setAttribute("name", l), this._input && (this._input.name = l, this._input.id = r)) : (this.removeAttribute("name"), this._input && (this._input.removeAttribute("name"), this._input.id = r)), this._wireInputBackspace(), this._renderChips(), this._renderErrorState(), this._renderSkeleton(e);
+    l ? (this.setAttribute("name", l), this._input && (this._input.name = l, this._input.id = n)) : (this.removeAttribute("name"), this._input && (this._input.removeAttribute("name"), this._input.id = n)), this._wireInputBackspace(), this._renderChips(), this._renderErrorState(), this._renderSkeleton(e);
   }
   _renderSkeleton(e) {
     const t = this._container;
@@ -5160,7 +5238,7 @@ class oe extends HTMLElement {
       const i = document.createElement("mint-chip");
       i.dataset.index = String(e++), i.dataset.value = t.value, i.draggable = this.hasAttribute("sortable"), i.draggable && i.classList.add("cursor-move"), t.dismissable && (i.setAttribute("dismissable", ""), i.addEventListener("dismissed", () => this._removeTag(t.value))), this._chipsWrap.appendChild(i);
       const s = i.querySelector("[data-mt-chip-text]");
-      s && (s.textContent = t.label || t.value), this._setupChipEvents(i, t), i.draggable && (i.addEventListener("dragstart", (r) => this._onDragStart(r, i)), i.addEventListener("dragover", (r) => this._onDragOverChip(r, i)), i.addEventListener("drop", (r) => this._onDrop(r)), i.addEventListener("dragend", () => this._onDragEnd())), this.hasAttribute("sortable") && i.addEventListener("pointerdown", (r) => this._onPointerDown(r, i));
+      s && (s.textContent = t.label || t.value), this._setupChipEvents(i, t), i.draggable && (i.addEventListener("dragstart", (n) => this._onDragStart(n, i)), i.addEventListener("dragover", (n) => this._onDragOverChip(n, i)), i.addEventListener("drop", (n) => this._onDrop(n)), i.addEventListener("dragend", () => this._onDragEnd())), this.hasAttribute("sortable") && i.addEventListener("pointerdown", (n) => this._onPointerDown(n, i));
     }), this._input && (this.hasAttribute("sortable") && (this._input.addEventListener("dragover", (t) => this._onDragOverInput(t)), this._input.addEventListener("drop", (t) => this._onDrop(t)), this._input.addEventListener("dragend", () => this._onDragEnd())), this._chipsWrap.appendChild(this._input));
   }
   _addFromInput() {
@@ -5223,14 +5301,14 @@ class oe extends HTMLElement {
   }
   _onDragOverChip(e, t) {
     if (!this.hasAttribute("sortable") || (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), !this._dragChip || !this._chipsWrap) || t === this._dragChip) return;
-    const i = t.getBoundingClientRect(), s = e.clientX, r = i.left + i.width * 0.5;
-    if (s < r) {
+    const i = t.getBoundingClientRect(), s = e.clientX, n = i.left + i.width * 0.5;
+    if (s < n) {
       if (this._dragChip.nextSibling === t) return;
       this._chipsWrap.insertBefore(this._dragChip, t);
     } else {
       if (t.nextSibling === this._dragChip) return;
-      const n = t.nextSibling;
-      n ? this._chipsWrap.insertBefore(this._dragChip, n) : this._chipsWrap.appendChild(this._dragChip);
+      const r = t.nextSibling;
+      r ? this._chipsWrap.insertBefore(this._dragChip, r) : this._chipsWrap.appendChild(this._dragChip);
     }
   }
   _onDrop(e) {
@@ -5247,8 +5325,8 @@ class oe extends HTMLElement {
     e.forEach((i) => {
       const s = i.dataset.value;
       if (!s) return;
-      const r = this._tags.find((n) => n.value === s);
-      r && t.push(r);
+      const n = this._tags.find((r) => r.value === s);
+      n && t.push(n);
     }), t.length === this._tags.length && (this._tags = t, this._syncAttr(), this._renderChips(), this._emitChange());
   }
   // Pointer-based sortable for touch (and optionally mouse)
@@ -5268,8 +5346,8 @@ class oe extends HTMLElement {
     if (!t) return;
     const i = t.closest("mint-chip");
     if (i && i !== this._dragChip) {
-      const s = i.getBoundingClientRect(), r = e.clientX, n = s.left + s.width * 0.5;
-      if (r < n)
+      const s = i.getBoundingClientRect(), n = e.clientX, r = s.left + s.width * 0.5;
+      if (n < r)
         this._dragChip.nextSibling !== i && this._chipsWrap.insertBefore(this._dragChip, i);
       else if (i.nextSibling !== this._dragChip) {
         const a = i.nextSibling;
@@ -5443,25 +5521,25 @@ class ce extends HTMLElement {
     this.className = `box-border m-0 p-0 border-0 align-baseline block rounded-lg border shadow-sm overflow-hidden transition-colors duration-200 ${this.getBorderClasses()}`;
     const s = this.getAriaLive();
     this.setAttribute("role", "alert"), this.setAttribute("aria-live", s), e === "danger" ? this.setAttribute("aria-atomic", "true") : this.removeAttribute("aria-atomic");
-    const r = [];
+    const n = [];
     for (this._bodyWrapper ? Array.from(this._bodyWrapper.childNodes).forEach((a) => {
-      r.push(a);
-    }) : Array.from(this.childNodes).forEach((n) => {
-      n !== this._headerWrapper && n !== this._bodyWrapper && n !== this._iconElement && n !== this._headingElement && n !== this._dismissButton && r.push(n);
+      n.push(a);
+    }) : Array.from(this.childNodes).forEach((r) => {
+      r !== this._headerWrapper && r !== this._bodyWrapper && r !== this._iconElement && r !== this._headingElement && r !== this._dismissButton && n.push(r);
     }), this._dismissButton && this._dismissHandler && this._dismissButton.removeEventListener("click", this._dismissHandler); this.firstChild; )
       this.removeChild(this.firstChild);
     if (this._headerWrapper = null, this._bodyWrapper = null, this._iconElement = null, this._headingElement = null, this._dismissButton = null, this._headerWrapper = document.createElement("div"), this._headerWrapper.className = `px-4 py-3 flex items-center gap-3 ${this.getHeaderBackgroundClasses()}`, this._iconElement = document.createElement("mint-icon"), this._iconElement.setAttribute("name", this.getIconName()), this._iconElement.className = `flex-shrink-0 w-5 h-5 ${this.getIconColorClasses()}`, this._headerWrapper.appendChild(this._iconElement), this._headingElement = document.createElement("mint-text"), this._headingElement.className = `font-semibold flex-1 ${this.getHeadingColorClasses()}`, this._headingElement.textContent = t || "", this._headerWrapper.appendChild(this._headingElement), i) {
       this._dismissButton = document.createElement("button"), this._dismissButton.className = "flex-shrink-0 p-1 rounded hover:bg-black/10 dark:hover:bg-white/10 transition-colors", this._dismissButton.setAttribute("aria-label", "Dismiss alert"), this._dismissButton.setAttribute("type", "button");
-      const n = document.createElement("mint-icon");
-      n.setAttribute("name", "close"), n.className = "w-4 h-4 text-gray-700 dark:text-gray-300", this._dismissButton.appendChild(n), this._dismissHandler = (a) => {
+      const r = document.createElement("mint-icon");
+      r.setAttribute("name", "close"), r.className = "w-4 h-4 text-gray-700 dark:text-gray-300", this._dismissButton.appendChild(r), this._dismissHandler = (a) => {
         a.preventDefault(), a.stopPropagation(), this.dispatchEvent(new CustomEvent("dismissed", {
           bubbles: !0,
           composed: !0
         })), this.remove();
       }, this._dismissButton.addEventListener("click", this._dismissHandler), this._headerWrapper.appendChild(this._dismissButton);
     }
-    this._bodyWrapper = document.createElement("div"), this._bodyWrapper.className = "px-4 py-3 bg-white dark:bg-gray-800", r.forEach((n) => {
-      this._bodyWrapper.appendChild(n);
+    this._bodyWrapper = document.createElement("div"), this._bodyWrapper.className = "px-4 py-3 bg-white dark:bg-gray-800", n.forEach((r) => {
+      this._bodyWrapper.appendChild(r);
     }), this.appendChild(this._headerWrapper), this.appendChild(this._bodyWrapper);
   }
 }
@@ -5479,14 +5557,14 @@ export {
   se as Dropzone,
   re as Form,
   G as Grid,
-  O as Icon,
+  B as Icon,
   ee as Input,
   $ as Link,
   J as Modal,
   U as Page,
   X as Popover,
   ie as Select,
-  B as Spinner,
+  O as Spinner,
   R as Stack,
   W as Switch,
   ne as Table,