monobill-mintui 0.2.0 → 0.2.2

package/dist/index.js

@@ -1,5 +1,5 @@
-import { g as O } from "./check-DU-jKCe4.js";
-class q extends HTMLElement {
+import { g as O } from "./error-BiWD2g35.js";
+class B extends HTMLElement {
   constructor() {
     super(), this._darkModeObserver = null;
   }
@@ -35,17 +35,17 @@ class q extends HTMLElement {
     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;
     if (i) {
-      const o = this.getAttribute("data-button-tone") || "neutral";
-      s === "solid" ? o === "neutral" ? n = r ? "#ffffff" : "#0f172a" : n = "#ffffff" : n = r ? "#ffffff" : "#0f172a";
+      const h = this.getAttribute("data-button-tone") || "neutral";
+      s === "solid" ? h === "neutral" ? n = r ? "#ffffff" : "#0f172a" : n = "#ffffff" : n = r ? "#ffffff" : "#0f172a";
     } else
       n = r ? "#e2e8f0" : "#0f172a";
-    const a = t === "large" ? "2" : "4", c = !!(this.style.width && this.style.height), l = `
+    const a = t === "large" ? "2" : "4", o = !!(this.style.width && this.style.height), c = `
       <svg 
         xmlns="http://www.w3.org/2000/svg" 
         fill="none" 
         viewBox="0 0 24 24"
-        class="animate-spin ${c ? "" : e}"
-        style="${c ? `width: ${this.style.width}; height: ${this.style.height}; animation-duration: 0.8s;` : "animation-duration: 0.8s;"}"
+        class="animate-spin ${o ? "" : e}"
+        style="${o ? `width: ${this.style.width}; height: ${this.style.height}; animation-duration: 0.8s;` : "animation-duration: 0.8s;"}"
       >
         <circle
           cx="12"
@@ -83,11 +83,11 @@ class q extends HTMLElement {
         </circle>
       </svg>
     `;
-    this.innerHTML = l.trim();
+    this.innerHTML = c.trim();
   }
 }
-customElements.get("mint-spinner") || customElements.define("mint-spinner", q);
-class B extends HTMLElement {
+customElements.get("mint-spinner") || customElements.define("mint-spinner", B);
+class q extends HTMLElement {
   constructor() {
     super(), this._darkModeObserver = null;
   }
@@ -124,7 +124,7 @@ class B 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 c, l, o;
+    var o, c, h;
     const e = this.getName();
     if (!e) {
       this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "";
@@ -134,13 +134,13 @@ class B 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") || ((c = this.parentElement) == null ? void 0 : c.closest("mint-button")), s = this.closest("mint-switch") || ((l = this.parentElement) == null ? void 0 : l.closest("mint-switch")), r = this.closest("mint-select") || ((o = this.parentElement) == null ? void 0 : o.closest("mint-select"));
+    const i = this.closest("mint-button") || ((o = this.parentElement) == null ? void 0 : o.closest("mint-button")), s = this.closest("mint-switch") || ((c = this.parentElement) == null ? void 0 : c.closest("mint-switch")), r = this.closest("mint-select") || ((h = this.parentElement) == null ? void 0 : h.closest("mint-select"));
     if (!Array.from(this.classList).some(
-      (d) => d.startsWith("w-") || d.startsWith("h-")
+      (l) => l.startsWith("w-") || l.startsWith("h-")
     ) && !r) {
-      let d;
-      s ? d = "w-3 h-3" : i ? d = "w-5 h-5" : d = "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"), d.split(" ").forEach((h) => {
-        h && this.classList.add(h);
+      let l;
+      s ? l = "w-3 h-3" : i ? l = "w-5 h-5" : l = "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"), l.split(" ").forEach((d) => {
+        d && this.classList.add(d);
       });
     }
     const a = this.getIconUrl();
@@ -149,13 +149,13 @@ class B extends HTMLElement {
     else if (i)
       this.classList.remove("text-gray-100", "text-gray-900");
     else {
-      const h = document.documentElement.classList.contains("dark") ? "text-gray-100" : "text-gray-900";
-      this.classList.remove("text-gray-100", "text-gray-900"), this.classList.add(h);
+      const d = document.documentElement.classList.contains("dark") ? "text-gray-100" : "text-gray-900";
+      this.classList.remove("text-gray-100", "text-gray-900"), this.classList.add(d);
     }
   }
 }
-customElements.get("mint-icon") || customElements.define("mint-icon", B);
-class z extends HTMLElement {
+customElements.get("mint-icon") || customElements.define("mint-icon", q);
+class W extends HTMLElement {
   constructor() {
     super(), this._button = null, this._clickHandler = null, this._isHandlingClick = !1, this._handleMouseDown = () => {
       this._button && !this.isDisabled() && !this.isLoading() && this._button.classList.add("mint-button-active");
@@ -215,12 +215,12 @@ class z extends HTMLElement {
     const t = (s = this._button) == null ? void 0 : s.querySelector(".mint-button-content");
     if (t && ((r = t.textContent) != null && r.trim())) return !1;
     if (this._button)
-      for (let c = this._button.firstChild; c; c = c.nextSibling) {
-        if (c.nodeType === Node.TEXT_NODE && ((n = c.textContent) != null && n.trim()))
+      for (let o = this._button.firstChild; o; o = o.nextSibling) {
+        if (o.nodeType === Node.TEXT_NODE && ((n = o.textContent) != null && n.trim()))
           return !1;
-        if (c.nodeType === Node.ELEMENT_NODE) {
-          const l = c;
-          if (l.tagName !== "MINT-ICON" && l.tagName !== "MINT-SPINNER" && !l.querySelector("mint-spinner") && !l.hasAttribute("slot") && l.className !== "mint-button-icon" && !(l.className === "mr-2" && l.querySelector("mint-spinner")) && (a = l.textContent) != null && a.trim())
+        if (o.nodeType === Node.ELEMENT_NODE) {
+          const c = o;
+          if (c.tagName !== "MINT-ICON" && c.tagName !== "MINT-SPINNER" && !c.querySelector("mint-spinner") && !c.hasAttribute("slot") && c.className !== "mint-button-icon" && !(c.className === "mr-2" && c.querySelector("mint-spinner")) && (a = c.textContent) != null && a.trim())
             return !1;
         }
       }
@@ -535,14 +535,14 @@ class z extends HTMLElement {
         "border-transparent"
         // Match other button border width
       ]
-    }, n = `${t}-${s}`, a = r[n] || r["solid-neutral"], c = [
+    }, n = `${t}-${s}`, a = r[n] || r["solid-neutral"], o = [
       ...i,
       ...a
     ];
-    return this.isFullWidth() && c.push("w-full"), c.join(" ");
+    return this.isFullWidth() && o.push("w-full"), o.join(" ");
   }
   render() {
-    var o, d, h, u, b;
+    var h, l, d, u, p;
     const e = this.isDisabled() || this.isLoading(), t = this.getType();
     if (!this._button) {
       for (this._button = document.createElement("button"); this.firstChild; )
@@ -555,12 +555,12 @@ class z extends HTMLElement {
       if (i)
         i.setAttribute("data-button-variant", this.getVariant()), i.setAttribute("data-button-tone", this.getTone()), "render" in i && typeof i.render == "function" && i.render();
       else {
-        const f = document.createElement("span");
-        f.className = "mr-2 inline-flex items-center";
-        const _ = document.createElement("mint-spinner");
-        _.setAttribute("size", "default"), _.setAttribute("data-button-variant", this.getVariant()), _.setAttribute("data-button-tone", this.getTone()), _.style.width = "0.875rem", _.style.height = "0.875rem", f.appendChild(_), this._button.insertBefore(f, this._button.firstChild);
+        const m = document.createElement("span");
+        m.className = "mr-2 inline-flex items-center";
+        const g = document.createElement("mint-spinner");
+        g.setAttribute("size", "default"), g.setAttribute("data-button-variant", this.getVariant()), g.setAttribute("data-button-tone", this.getTone()), g.style.width = "0.875rem", g.style.height = "0.875rem", m.appendChild(g), this._button.insertBefore(m, this._button.firstChild);
       }
-    else i && ((o = i.parentElement) == null || o.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();
@@ -569,40 +569,40 @@ class z extends HTMLElement {
     const n = this.getIconPosition();
     let a = this._button.querySelector(".mint-button-content");
     if (a) {
-      const f = r && r.tagName === "MINT-ICON";
+      const m = r && r.tagName === "MINT-ICON";
       if (r && !r.parentElement) {
-        const _ = (u = this._button.querySelector("mint-spinner")) == null ? void 0 : u.parentElement;
-        f || n === "left" ? _ ? _.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a) : a.insertAdjacentElement("afterend", r);
-      } else if (r && (f || n === "left") && r.nextSibling !== a) {
+        const g = (u = this._button.querySelector("mint-spinner")) == null ? void 0 : u.parentElement;
+        m || n === "left" ? g ? g.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a) : a.insertAdjacentElement("afterend", r);
+      } else if (r && (m || n === "left") && r.nextSibling !== a) {
         r.remove();
-        const _ = (b = this._button.querySelector("mint-spinner")) == null ? void 0 : b.parentElement;
-        _ ? _.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a);
-      } else r && !f && n === "right" && r.previousSibling !== a && (r.remove(), a.insertAdjacentElement("afterend", r));
+        const g = (p = this._button.querySelector("mint-spinner")) == null ? void 0 : p.parentElement;
+        g ? g.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, a);
+      } else r && !m && n === "right" && r.previousSibling !== a && (r.remove(), a.insertAdjacentElement("afterend", r));
     } else {
-      const f = [];
-      for (let _ = this._button.firstChild; _; _ = _.nextSibling) {
-        if (_.nodeType !== Node.ELEMENT_NODE) {
-          f.push(_);
+      const m = [];
+      for (let g = this._button.firstChild; g; g = g.nextSibling) {
+        if (g.nodeType !== Node.ELEMENT_NODE) {
+          m.push(g);
           continue;
         }
-        const m = _;
-        m.tagName !== "MINT-SPINNER" && !m.querySelector("mint-spinner") && _ !== r && !m.hasAttribute("slot") && !(m.className === "mr-2" && m.querySelector("mint-spinner")) && f.push(_);
+        const v = g;
+        v.tagName !== "MINT-SPINNER" && !v.querySelector("mint-spinner") && g !== r && !v.hasAttribute("slot") && !(v.className === "mr-2" && v.querySelector("mint-spinner")) && m.push(g);
       }
-      if (f.length > 0) {
-        a = document.createElement("span"), a.className = "mint-button-content inline-flex items-center", f.forEach((m) => {
-          a.appendChild(m);
+      if (m.length > 0) {
+        a = document.createElement("span"), a.className = "mint-button-content inline-flex items-center", m.forEach((v) => {
+          a.appendChild(v);
         });
-        const _ = (d = this._button.querySelector("mint-spinner")) == null ? void 0 : d.parentElement;
-        r && n === "left" ? _ ? (_.insertAdjacentElement("afterend", r), r.insertAdjacentElement("afterend", a)) : (this._button.insertBefore(r, this._button.firstChild), r.insertAdjacentElement("afterend", a)) : r && n === "right" ? _ ? (_.insertAdjacentElement("afterend", a), a.insertAdjacentElement("afterend", r)) : (this._button.insertBefore(a, this._button.firstChild), a.insertAdjacentElement("afterend", r)) : _ ? _.insertAdjacentElement("afterend", a) : this._button.insertBefore(a, this._button.firstChild);
+        const g = (l = this._button.querySelector("mint-spinner")) == null ? void 0 : l.parentElement;
+        r && n === "left" ? g ? (g.insertAdjacentElement("afterend", r), r.insertAdjacentElement("afterend", a)) : (this._button.insertBefore(r, this._button.firstChild), r.insertAdjacentElement("afterend", a)) : r && n === "right" ? g ? (g.insertAdjacentElement("afterend", a), a.insertAdjacentElement("afterend", r)) : (this._button.insertBefore(a, this._button.firstChild), a.insertAdjacentElement("afterend", r)) : g ? g.insertAdjacentElement("afterend", a) : this._button.insertBefore(a, this._button.firstChild);
       } else if (r && r.tagName === "MINT-ICON" && !r.parentElement) {
-        const _ = (h = this._button.querySelector("mint-spinner")) == null ? void 0 : h.parentElement;
-        _ ? _.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, this._button.firstChild);
+        const g = (d = this._button.querySelector("mint-spinner")) == null ? void 0 : d.parentElement;
+        g ? g.insertAdjacentElement("afterend", r) : this._button.insertBefore(r, this._button.firstChild);
       }
     }
-    const c = this.isIconOnly();
-    r && (r.classList.contains("mint-button-icon") || r.classList.add("mint-button-icon"), r.classList.remove("mr-1.5", "ml-1.5"), c ? 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"));
-    const l = this.getButtonClasses();
-    this._button.className = l;
+    const o = this.isIconOnly();
+    r && (r.classList.contains("mint-button-icon") || r.classList.add("mint-button-icon"), r.classList.remove("mr-1.5", "ml-1.5"), o ? 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"));
+    const c = this.getButtonClasses();
+    this._button.className = c;
   }
   setupEventListeners() {
     this._button && !this._clickHandler && (this._clickHandler = this.handleClick.bind(this), this._clickHandler && this._button.addEventListener("click", this._clickHandler, !0), this._button.addEventListener("mousedown", this._handleMouseDown), this._button.addEventListener("mouseup", this._handleMouseUp), this._button.addEventListener("mouseleave", this._handleMouseLeave), this._button.addEventListener("touchstart", this._handleTouchStart), this._button.addEventListener("touchend", this._handleTouchEnd), this._button.addEventListener("touchcancel", this._handleTouchCancel));
@@ -631,22 +631,32 @@ class z extends HTMLElement {
     });
   }
 }
-customElements.get("mint-button") || customElements.define("mint-button", z);
-class V extends HTMLElement {
+customElements.get("mint-button") || customElements.define("mint-button", W);
+class z extends HTMLElement {
   constructor() {
     super(), this._button = null, this._checked = !1;
   }
   static get observedAttributes() {
-    return ["checked", "disabled", "label", "icon"];
+    return ["checked", "disabled", "label", "icon", "info", "error", "error-message"];
   }
   connectedCallback() {
-    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block", "flex", "items-center"), this._checked = this.hasAttribute("checked"), this.render();
+    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block", "w-full"), this._checked = this.hasAttribute("checked"), this.render();
+  }
+  _getSwitchContainer() {
+    let e = this.querySelector(".mint-switch-container");
+    return e || (e = document.createElement("div"), e.className = "mint-switch-container flex items-center gap-2", this.insertBefore(e, this.firstChild)), e;
   }
   disconnectedCallback() {
     this.removeEventListeners();
   }
   attributeChangedCallback(e, t, i) {
-    e === "checked" && (this._checked = i !== null), t !== i && this.render();
+    if (e === "checked" && (this._checked = i !== null), t !== i) {
+      if (e === "error" || e === "error-message") {
+        this._renderErrorState();
+        return;
+      }
+      this.render();
+    }
   }
   get checked() {
     return this._checked;
@@ -660,14 +670,23 @@ class V extends HTMLElement {
   getLabel() {
     return this.getAttribute("label") || "";
   }
+  getInfo() {
+    return this.getAttribute("info") || "";
+  }
   getIcon() {
     return this.getAttribute("icon") || "";
   }
   hasIcon() {
     return !!this.getIcon();
   }
+  hasError() {
+    return this.hasAttribute("error");
+  }
+  getErrorMessage() {
+    return this.getAttribute("error-message") || "";
+  }
   getSwitchClasses() {
-    const e = [
+    const e = this.hasError(), t = [
       "relative",
       "inline-flex",
       "items-center",
@@ -682,15 +701,22 @@ class V extends HTMLElement {
       "focus:outline-none",
       "focus-visible:ring-2",
       "focus-visible:ring-offset-1",
-      "focus-visible:ring-gray-400",
-      "dark:focus-visible:ring-gray-500",
+      e ? "focus-visible:ring-red-400 dark:focus-visible:ring-red-500" : "focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500",
       "active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",
       "disabled:opacity-50",
       "disabled:cursor-not-allowed"
-    ], t = this._checked ? ["bg-slate-950", "dark:bg-slate-600", "border-slate-700", "dark:border-slate-500"] : ["bg-slate-200", "dark:bg-slate-400", "border-slate-300", "dark:border-slate-500"];
+    ], i = this._checked ? [
+      "bg-slate-950",
+      "dark:bg-slate-600",
+      e ? "border-red-300 dark:border-red-300" : "border-slate-700 dark:border-slate-500"
+    ] : [
+      "bg-slate-200",
+      "dark:bg-slate-400",
+      e ? "border-red-300 dark:border-red-300" : "border-slate-300 dark:border-slate-500"
+    ];
     return [
-      ...e,
-      ...t
+      ...t,
+      ...i
     ].join(" ");
   }
   getThumbClasses() {
@@ -726,17 +752,23 @@ class V extends HTMLElement {
     ].join(" ");
   }
   render() {
-    const e = this.getSwitchClasses(), t = this.getThumbClasses(), i = this.getLabel(), s = this.getIcon();
-    this._button || (this._button = document.createElement("button"), this.appendChild(this._button), this.setupEventListeners()), this._button.className = e, this._button.disabled = this.isDisabled(), this._button.setAttribute("aria-checked", String(this._checked)), this._button.setAttribute("aria-label", i), this._button.setAttribute("role", "switch"), this._button.type = "button";
-    let r = this._button.querySelector("span");
-    r || (r = document.createElement("span"), this._button.appendChild(r)), r.className = t;
-    const n = r.querySelector("span");
-    if (s) {
-      let a = n;
-      a || (a = document.createElement("span"), a.className = this.getIconClasses(), r.appendChild(a));
-      let c = a.querySelector("mint-icon");
-      c || (c = document.createElement("mint-icon"), a.appendChild(c)), c.setAttribute("name", s);
-    } else n && n.remove();
+    const e = this.getSwitchClasses(), t = this.getThumbClasses(), i = this.getLabel(), s = this.getInfo(), r = this.getIcon(), n = this.getAttribute("id") || `mint-switch-${Math.random().toString(36).substr(2, 9)}`;
+    this.getAttribute("id") || this.setAttribute("id", n);
+    const a = this._getSwitchContainer();
+    this._button ? this._button.parentElement !== a && a.appendChild(this._button) : (this._button = document.createElement("button"), a.appendChild(this._button), this.setupEventListeners());
+    let o = a.querySelector(".mint-switch-label");
+    i ? (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 === a ? a.insertBefore(o, this._button.nextSibling) : a.appendChild(o)), o.textContent = i, o.setAttribute("for", n), this.isDisabled() ? o.classList.add("opacity-40") : o.classList.remove("opacity-40")) : o && o.remove(), this._button.className = e, this._button.disabled = this.isDisabled(), this._button.id = n, this._button.setAttribute("aria-checked", String(this._checked)), this._button.setAttribute("aria-label", i || "Toggle switch"), this._button.setAttribute("role", "switch"), this._button.type = "button";
+    let c = this._button.querySelector("span");
+    c || (c = document.createElement("span"), this._button.appendChild(c)), c.className = t;
+    const h = c.querySelector("span");
+    if (r) {
+      let d = h;
+      d || (d = document.createElement("span"), d.className = this.getIconClasses(), c.appendChild(d));
+      let u = d.querySelector("mint-icon");
+      u || (u = document.createElement("mint-icon"), d.appendChild(u)), u.setAttribute("name", r);
+    } else h && h.remove();
+    let l = this.querySelector(".mint-switch-info");
+    s ? (l || (l = document.createElement("span"), l.className = "mint-switch-info text-xs text-gray-500 dark:text-gray-400 select-none mt-1 block", a && a.parentElement === this ? this.insertBefore(l, a.nextSibling) : this.appendChild(l)), l.textContent = s, this.isDisabled() ? l.classList.add("opacity-40") : l.classList.remove("opacity-40")) : l && l.remove(), this._renderErrorState();
   }
   setupEventListeners() {
     this._button && this._button.addEventListener("click", this.handleToggle.bind(this));
@@ -759,9 +791,14 @@ class V extends HTMLElement {
       })
     ));
   }
+  _renderErrorState() {
+    const e = this.hasError(), t = this.getErrorMessage();
+    let i = this.querySelector(".mint-switch-error");
+    e && t ? (i || (i = document.createElement("div"), i.className = "mint-switch-error mt-1 text-xs text-red-600 dark:text-red-400", this.appendChild(i)), i.textContent = t) : i && i.remove(), this._button && (this._button.className = this.getSwitchClasses());
+  }
 }
-customElements.get("mint-switch") || customElements.define("mint-switch", V);
-class R extends HTMLElement {
+customElements.get("mint-switch") || customElements.define("mint-switch", z);
+class V extends HTMLElement {
   // Store classes set via class attribute
   constructor() {
     super(), this._darkModeObserver = null, this._userClasses = /* @__PURE__ */ new Set();
@@ -849,14 +886,14 @@ class R extends HTMLElement {
       "text-green-600"
       // success
     ], i = ["text-2xl", "text-lg", "text-sm"];
-    i.forEach((l) => {
-      this.classList.remove(l), this._userClasses.delete(l);
-    }), t.forEach((l) => {
-      this.classList.remove(l), this._userClasses.delete(l);
+    i.forEach((c) => {
+      this.classList.remove(c), this._userClasses.delete(c);
+    }), t.forEach((c) => {
+      this.classList.remove(c), this._userClasses.delete(c);
     });
-    const s = this.getTextClasses().split(" ").filter((l) => l.trim());
-    Array.from(this.classList).forEach((l) => {
-      !t.includes(l) && !i.includes(l) && this._userClasses.add(l);
+    const s = this.getTextClasses().split(" ").filter((c) => c.trim());
+    Array.from(this.classList).forEach((c) => {
+      !t.includes(c) && !i.includes(c) && this._userClasses.add(c);
     });
     const n = [.../* @__PURE__ */ new Set([...s, ...Array.from(this._userClasses)])];
     this.className = n.join(" ");
@@ -867,12 +904,12 @@ class R extends HTMLElement {
       // Scales between 1rem (16px) and 1.125rem (18px)
       regular: "clamp(0.875rem, 1vw + 0.5rem, 0.875rem)"
       // Scales between 0.875rem (14px) and 0.875rem (14px)
-    }, c = a[e] || a.regular;
-    this.style.setProperty("font-size", c);
+    }, o = a[e] || a.regular;
+    this.style.setProperty("font-size", o);
   }
 }
-customElements.get("mint-text") || customElements.define("mint-text", R);
-class W extends HTMLElement {
+customElements.get("mint-text") || customElements.define("mint-text", V);
+class R extends HTMLElement {
   constructor() {
     super(), this._childObserver = null;
   }
@@ -977,13 +1014,13 @@ class W extends HTMLElement {
     });
   }
 }
-customElements.get("mint-stack") || customElements.define("mint-stack", W);
+customElements.get("mint-stack") || customElements.define("mint-stack", R);
 class j extends HTMLElement {
-  static get observedAttributes() {
-    return [];
-  }
   constructor() {
-    super();
+    super(), this._headingElement = null, this._contentWrapper = null;
+  }
+  static get observedAttributes() {
+    return ["heading"];
   }
   connectedCallback() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block"), this.render();
@@ -991,8 +1028,21 @@ class j extends HTMLElement {
   attributeChangedCallback(e, t, i) {
     t !== i && this.render();
   }
+  getHeading() {
+    return this.getAttribute("heading") || "";
+  }
   render() {
     this.classList.add("rounded-lg", "shadow", "bg-white", "dark:bg-gray-800", "border", "border-gray-200", "dark:border-gray-700", "overflow-hidden", "transition-colors", "duration-200");
+    let e = Array.from(this.children).find(
+      (i) => i.classList.contains("p-6") && i === this._contentWrapper
+    );
+    (!this._contentWrapper || !e) && (this._contentWrapper = document.createElement("div"), this._contentWrapper.className = "p-6", Array.from(this.children).filter(
+      (s) => s !== this._contentWrapper
+    ).forEach((s) => {
+      this._contentWrapper.appendChild(s);
+    }), this.appendChild(this._contentWrapper));
+    const t = this.getHeading();
+    t ? (this._headingElement || (this._headingElement = document.createElement("mint-text"), this._headingElement.setAttribute("size", "sub-heading"), this._contentWrapper && this._contentWrapper.insertBefore(this._headingElement, this._contentWrapper.firstChild)), this._headingElement.textContent = t) : this._headingElement && this._headingElement.parentNode && (this._headingElement.remove(), this._headingElement = null);
   }
 }
 customElements.get("mint-card") || customElements.define("mint-card", j);
@@ -1065,99 +1115,57 @@ class $ extends HTMLElement {
 customElements.get("mint-link") || customElements.define("mint-link", $);
 class Y extends HTMLElement {
   constructor() {
-    super(), this._button = null, this._historyDepth = 0, this._maxBackAttempts = 10, this._backAttempts = 0, this._initialUrl = "", this._initialOrigin = "", this._popstateHandler = null;
+    super(), this._button = null;
   }
   static get observedAttributes() {
     return ["href", "fallback-href"];
   }
   connectedCallback() {
-    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block", "flex", "items-center", "justify-center"), this.render(), this._setupHistoryTracking();
+    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block", "flex", "items-center", "justify-center"), this.render();
   }
   disconnectedCallback() {
-    this._popstateHandler && (window.removeEventListener("popstate", this._popstateHandler), this._popstateHandler = null);
   }
   attributeChangedCallback(e, t, i) {
     t !== i && this.render();
   }
-  _setupHistoryTracking() {
-    this._initialUrl = window.location.href, this._initialOrigin = window.location.origin, this._historyDepth = window.history.length, this._popstateHandler || (this._popstateHandler = (e) => {
-      this._backAttempts = 0, setTimeout(() => {
-        const t = window.location.origin, i = window.location.href;
-        if (t !== this._initialOrigin) {
-          this._navigateToFallback();
-          return;
-        }
-        if (i.startsWith("chrome://") || i.startsWith("about:") || i.startsWith("edge://") || i === "about:blank" || i === "about:newtab") {
-          this._navigateToFallback();
-          return;
-        }
-      }, 0);
-    }, window.addEventListener("popstate", this._popstateHandler));
-  }
   getFallbackHref() {
     return this.getAttribute("fallback-href") || this.getAttribute("href") || "/";
   }
-  handleClick(e) {
-    if (e.preventDefault(), e.stopPropagation(), this._wouldBackLeaveApp()) {
-      this._navigateToFallback();
-      return;
-    }
-    if (window.history.length > 1 && this._backAttempts < this._maxBackAttempts && this._backAttempts === 0) {
-      this._backAttempts++;
-      const s = window.location.href, r = window.location.origin;
-      window.history.back(), setTimeout(() => {
-        if (window.location.href === s)
-          this._navigateToFallback();
-        else {
-          if (window.location.origin !== r) {
-            this._navigateToFallback();
-            return;
-          }
-          const n = window.location.href;
-          if (n.startsWith("chrome://") || n.startsWith("about:") || n.startsWith("edge://") || n === "about:blank" || n === "about:newtab") {
-            this._navigateToFallback();
-            return;
-          }
-          setTimeout(() => {
-            this._backAttempts = 0;
-          }, 500);
-        }
-      }, 200);
-    } else
-      this._navigateToFallback();
-  }
-  _wouldBackLeaveApp() {
+  /**
+   * Get the target URL for navigation.
+   * Returns the referrer if available and from the same origin, otherwise returns the fallback URL.
+   */
+  _getTargetUrl() {
     const e = document.referrer, t = window.location.origin;
-    if (window.history.length <= 1 || !e && window.history.length <= 2)
-      return !0;
     if (e)
       try {
-        if (new URL(e).origin !== t && window.history.length <= 2)
-          return !0;
+        const i = new URL(e);
+        if (i.origin === t)
+          return i.pathname + i.search;
       } catch {
-        if (window.history.length <= 2)
-          return !0;
       }
-    return !1;
+    return this.getFallbackHref();
   }
-  _navigateToFallback() {
-    var t, i, s;
-    const e = this.getFallbackHref();
-    if (this._backAttempts = 0, e.startsWith("/") && !e.startsWith("//")) {
-      const r = document.querySelector("#app");
-      if ((s = (i = (t = r == null ? void 0 : r.__vue_app__) == null ? void 0 : t.config) == null ? void 0 : i.globalProperties) != null && s.$router)
-        try {
-          r.__vue_app__.config.globalProperties.$router.push(e);
-          return;
-        } catch {
-        }
+  handleClick(e) {
+    e.preventDefault(), e.stopPropagation();
+    const t = this._getTargetUrl(), i = document.referrer, s = i && (() => {
       try {
-        window.history.pushState({}, "", e), window.dispatchEvent(new PopStateEvent("popstate"));
-        return;
+        return new URL(i).origin === window.location.origin;
       } catch {
+        return !1;
       }
-    }
-    window.location.href = e;
+    })(), r = new CustomEvent("back", {
+      detail: {
+        url: t,
+        isFromReferrer: s,
+        referrer: i || null,
+        fallbackHref: this.getFallbackHref()
+      },
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    });
+    this.dispatchEvent(r);
   }
   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));
@@ -1166,19 +1174,19 @@ class Y extends HTMLElement {
 customElements.get("mint-back-button") || customElements.define("mint-back-button", Y);
 class U extends HTMLElement {
   constructor() {
-    super(), this._pageContainer = null, this._header = null, this._titleElement = null, this._headingText = null, this._actionsSlot = null, this._bodySlot = null, this._darkModeObserver = null;
+    super(), this._pageContainer = null, this._header = null, this._titleElement = null, this._headingText = null, this._actionsSlot = null, this._bodySlot = null, this._darkModeObserver = null, this._backButton = null, this._backButtonHandler = null;
   }
   static get observedAttributes() {
     return ["heading", "fallback-href", "show-back-button", "containered"];
   }
   connectedCallback() {
-    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block"), this.render(), this._observeDarkMode();
+    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block"), this.render(), this._observeDarkMode(), this._setupBackButtonListener();
   }
   attributeChangedCallback(e, t, i) {
     t !== i && this.render();
   }
   disconnectedCallback() {
-    this._darkModeObserver && (this._darkModeObserver.disconnect(), this._darkModeObserver = null);
+    this._darkModeObserver && (this._darkModeObserver.disconnect(), this._darkModeObserver = null), this._removeBackButtonListener();
   }
   getHeading() {
     return this.getAttribute("heading") || "";
@@ -1196,8 +1204,8 @@ class U extends HTMLElement {
     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);
-    } else t && (t.remove(), t = null);
+      t.setAttribute("fallback-href", n), 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) => {
@@ -1221,6 +1229,20 @@ class U extends HTMLElement {
       attributeFilter: ["class"]
     }));
   }
+  _setupBackButtonListener() {
+    this._backButtonHandler || (this._backButtonHandler = (e) => {
+      const t = new CustomEvent("back", {
+        detail: e.detail,
+        bubbles: !0,
+        cancelable: !0,
+        composed: !0
+      });
+      this.dispatchEvent(t);
+    }), this.addEventListener("back", this._backButtonHandler, !0);
+  }
+  _removeBackButtonListener() {
+    this._backButtonHandler && (this.removeEventListener("back", this._backButtonHandler, !0), this._backButtonHandler = null);
+  }
 }
 customElements.get("mint-page") || customElements.define("mint-page", U);
 class G extends HTMLElement {
@@ -1311,31 +1333,31 @@ class J extends HTMLElement {
   render() {
     const e = this.getId(), t = this.getHeading(), i = this.isOpen();
     if (e && (this.id = e), this._overlay || (this._overlay = document.createElement("div"), this._overlay.className = "fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-200 z-40", this._overlay.addEventListener("click", () => this.close()), this.appendChild(this._overlay)), this._modal || (this._modal = document.createElement("div"), this._modal.className = "fixed inset-0 flex items-center justify-center p-2 pointer-events-none z-50", this.appendChild(this._modal)), i) {
-      let d = this._modal.querySelector(".modal-content");
-      d || (d = document.createElement("div"), d.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(d)), this._animateEnter();
+      let l = this._modal.querySelector(".modal-content");
+      l || (l = document.createElement("div"), l.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(l)), this._animateEnter();
     } else
       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(
-      (d) => d !== this._overlay && d !== this._modal && d !== this._headingSlot && d.getAttribute("slot") === "heading"
-    ).forEach((d) => {
-      this._headingSlot && d.parentElement !== this._headingSlot && this._headingSlot.appendChild(d);
+      (l) => l !== this._overlay && l !== this._modal && l !== this._headingSlot && l.getAttribute("slot") === "heading"
+    ).forEach((l) => {
+      this._headingSlot && l.parentElement !== this._headingSlot && this._headingSlot.appendChild(l);
     }), this._closeButton || (this._closeButton = document.createElement("mint-button"), this._closeButton.setAttribute("variant", "ghost"), this._closeButton.setAttribute("icon", "close"), this._closeButton.addEventListener("click", () => this.close()), this._header.appendChild(this._closeButton)), this._bodySlot || (this._bodySlot = document.createElement("div"), this._bodySlot.className = "flex-1 overflow-y-auto p-4", this._bodySlot.setAttribute("slot", "body"), s.appendChild(this._bodySlot)), Array.from(this.children).filter(
-      (d) => d !== this._overlay && d !== this._modal && d !== this._bodySlot && d.getAttribute("slot") === "body"
-    ).forEach((d) => {
-      this._bodySlot && d.parentElement !== this._bodySlot && this._bodySlot.appendChild(d);
+      (l) => l !== this._overlay && l !== this._modal && l !== this._bodySlot && l.getAttribute("slot") === "body"
+    ).forEach((l) => {
+      this._bodySlot && l.parentElement !== this._bodySlot && this._bodySlot.appendChild(l);
     }), this._actionsSlot || (this._actionsSlot = document.createElement("div"), this._actionsSlot.className = "p-4 border-t border-gray-200 dark:border-gray-700", this._actionsSlot.setAttribute("slot", "actions"), s.appendChild(this._actionsSlot));
-    let c = this._actionsSlot.querySelector("mint-stack");
-    c || (c = document.createElement("mint-stack"), c.setAttribute("direction", "horizontal"), c.className = "justify-end", this._actionsSlot.appendChild(c)), Array.from(this.children).filter(
-      (d) => d !== this._overlay && d !== this._modal && d !== this._actionsSlot && d.getAttribute("slot") === "actions"
-    ).forEach((d) => {
-      Array.from(d.children).forEach((u) => {
-        u.parentElement !== c && c.appendChild(u);
-      }), d.parentElement && d.remove();
-    }), Array.from(this.children).forEach((d) => {
-      d !== this._overlay && d !== this._modal && d.getAttribute("slot") !== "heading" && d.getAttribute("slot") !== "body" && d.getAttribute("slot") !== "actions" && d !== this._headingSlot && d !== this._bodySlot && d !== this._actionsSlot && d.parentElement !== this._bodySlot && this._bodySlot.appendChild(d);
+    let o = this._actionsSlot.querySelector("mint-stack");
+    o || (o = document.createElement("mint-stack"), o.setAttribute("direction", "horizontal"), o.className = "justify-end", this._actionsSlot.appendChild(o)), Array.from(this.children).filter(
+      (l) => l !== this._overlay && l !== this._modal && l !== this._actionsSlot && l.getAttribute("slot") === "actions"
+    ).forEach((l) => {
+      Array.from(l.children).forEach((u) => {
+        u.parentElement !== o && o.appendChild(u);
+      }), l.parentElement && l.remove();
+    }), Array.from(this.children).forEach((l) => {
+      l !== this._overlay && l !== this._modal && l.getAttribute("slot") !== "heading" && l.getAttribute("slot") !== "body" && l.getAttribute("slot") !== "actions" && l !== this._headingSlot && l !== this._bodySlot && l !== this._actionsSlot && l.parentElement !== this._bodySlot && this._bodySlot.appendChild(l);
     }), this._updateBackgroundColor();
   }
   _updateBackgroundColor() {
@@ -1485,38 +1507,38 @@ class X extends HTMLElement {
     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 c = this.getDirection(), l = 0, o = 0;
-    switch (c) {
+    let o = this.getDirection(), c = 0, h = 0;
+    switch (o) {
       case "down":
-        if (l = e.bottom + a, o = e.left + e.width / 2 - s.width / 2, l + s.height > n) {
-          const d = e.top - s.height - a;
-          d >= 0 ? (c = "up", l = d) : (l = Math.max(0, n - s.height - a), l + s.height > n && (l = 0));
+        if (c = e.bottom + a, h = e.left + e.width / 2 - s.width / 2, c + s.height > n) {
+          const l = e.top - s.height - a;
+          l >= 0 ? (o = "up", c = l) : (c = Math.max(0, n - s.height - a), c + s.height > n && (c = 0));
         }
-        o < 0 && (o = a), o + s.width > r && (o = Math.max(a, r - s.width - a), o + s.width > r && (o = r - s.width));
+        h < 0 && (h = a), h + s.width > r && (h = Math.max(a, r - s.width - a), h + s.width > r && (h = r - s.width));
         break;
       case "up":
-        if (l = e.top - s.height - a, o = e.left + e.width / 2 - s.width / 2, l < 0) {
-          const d = e.bottom + a;
-          d + s.height <= n ? (c = "down", l = d) : (l = Math.min(n - s.height - a, n - s.height), l < 0 && (l = n - s.height));
+        if (c = e.top - s.height - a, h = e.left + e.width / 2 - s.width / 2, c < 0) {
+          const l = e.bottom + a;
+          l + s.height <= n ? (o = "down", c = l) : (c = Math.min(n - s.height - a, n - s.height), c < 0 && (c = n - s.height));
         }
-        o < 0 && (o = a), o + s.width > r && (o = Math.max(a, r - s.width - a), o + s.width > r && (o = r - s.width));
+        h < 0 && (h = a), h + s.width > r && (h = Math.max(a, r - s.width - a), h + s.width > r && (h = r - s.width));
         break;
       case "right":
-        if (l = e.top + e.height / 2 - s.height / 2, o = e.right + a, o + s.width > r) {
-          const d = e.left - s.width - a;
-          d >= 0 ? (c = "left", o = d) : (o = Math.max(0, r - s.width - a), o + s.width > r && (o = r - s.width));
+        if (c = e.top + e.height / 2 - s.height / 2, h = e.right + a, h + s.width > r) {
+          const l = e.left - s.width - a;
+          l >= 0 ? (o = "left", h = l) : (h = Math.max(0, r - s.width - a), h + s.width > r && (h = r - s.width));
         }
-        l < 0 && (l = a), l + s.height > n && (l = Math.max(a, n - s.height - a), l + s.height > n && (l = n - s.height));
+        c < 0 && (c = a), c + s.height > n && (c = Math.max(a, n - s.height - a), c + s.height > n && (c = n - s.height));
         break;
       case "left":
-        if (l = e.top + e.height / 2 - s.height / 2, o = e.left - s.width - a, o < 0) {
-          const d = e.right + a;
-          d + s.width <= r ? (c = "right", o = d) : (o = Math.min(r - s.width - a, r - s.width), o < 0 && (o = 0));
+        if (c = e.top + e.height / 2 - s.height / 2, h = e.left - s.width - a, h < 0) {
+          const l = e.right + a;
+          l + s.width <= r ? (o = "right", h = l) : (h = Math.min(r - s.width - a, r - s.width), h < 0 && (h = 0));
         }
-        l < 0 && (l = a), l + s.height > n && (l = Math.max(a, n - s.height - a), l + s.height > n && (l = n - s.height));
+        c < 0 && (c = a), c + s.height > n && (c = Math.max(a, n - s.height - a), c + s.height > n && (c = n - s.height));
         break;
     }
-    return { top: l, left: o, direction: c };
+    return { top: c, left: h, direction: o };
   }
   render() {
     const e = this.getId(), t = this.isOpen(), i = this.getPadding();
@@ -1524,8 +1546,8 @@ class X extends HTMLElement {
       if (this.classList.remove("hidden"), this.style.pointerEvents = "auto", !this._clickOutsideHandler) {
         const n = this;
         this._clickOutsideHandler = function(a) {
-          const c = a.composedPath(), l = c.includes(n);
-          if (!(n._triggerElement && c.includes(n._triggerElement)) && !l) {
+          const o = a.composedPath(), c = o.includes(n);
+          if (!(n._triggerElement && o.includes(n._triggerElement)) && !c) {
             n.close();
             return;
           }
@@ -1540,8 +1562,8 @@ 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"], c = n.filter((l) => !a.includes(l));
-      s.className = [...c, i].join(" ");
+      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"], o = n.filter((c) => !a.includes(c));
+      s.className = [...o, i].join(" ");
     }
     Array.from(this.children).forEach((n) => {
       n !== this._overlay && n !== this._popover && n.parentElement === this && s.appendChild(n);
@@ -1615,7 +1637,7 @@ class K extends HTMLElement {
     super(), this._checkbox = null, this._checked = !1, this._clickHandler = null, this._changeHandler = null, this._mousedownHandler = null, this._mouseupHandler = null, this._mouseleaveHandler = null, this._touchstartHandler = null, this._touchendHandler = null, this._focusHandler = null, this._blurHandler = null;
   }
   static get observedAttributes() {
-    return ["checked", "disabled", "label", "info", "id", "name", "value"];
+    return ["checked", "disabled", "label", "info", "id", "name", "value", "error", "error-message"];
   }
   connectedCallback() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-flex", "items-start", "gap-2");
@@ -1626,7 +1648,13 @@ class K extends HTMLElement {
     this.removeEventListeners();
   }
   attributeChangedCallback(e, t, i) {
-    e === "checked" && (this._checked = i !== null && i !== "false", this._checkbox && (this._checkbox.checked = this._checked)), t !== i && (this.render(), e === "checked" && this._checkbox && this.updateVisualState());
+    if (e === "checked" && (this._checked = i !== null && i !== "false", this._checkbox && (this._checkbox.checked = this._checked)), t !== i) {
+      if (e === "error" || e === "error-message") {
+        this._renderErrorState();
+        return;
+      }
+      this.render(), e === "checked" && this._checkbox && this.updateVisualState();
+    }
   }
   get checked() {
     return this._checked;
@@ -1652,8 +1680,14 @@ class K extends HTMLElement {
   getValue() {
     return this.getAttribute("value") || "";
   }
+  hasError() {
+    return this.hasAttribute("error");
+  }
+  getErrorMessage() {
+    return this.getAttribute("error-message") || "";
+  }
   getCheckboxClasses() {
-    const e = [
+    const e = this.hasError(), t = [
       "relative",
       "inline-flex",
       "items-center",
@@ -1669,25 +1703,22 @@ class K extends HTMLElement {
       "focus:outline-none",
       "focus-visible:ring-2",
       "focus-visible:ring-offset-1",
-      "focus-visible:ring-gray-400",
-      "dark:focus-visible:ring-gray-500",
+      e ? "focus-visible:ring-red-400 dark:focus-visible:ring-red-500" : "focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500",
       "cursor-pointer",
       "disabled:opacity-40",
       "disabled:cursor-not-allowed"
-    ], t = this._checked ? [
+    ], i = this._checked ? [
       "bg-slate-800",
       "dark:bg-slate-600",
-      "border-slate-800",
-      "dark:border-slate-600"
+      e ? "border-red-300 dark:border-red-300" : "border-slate-800 dark:border-slate-600"
     ] : [
       "bg-white",
       "dark:bg-gray-700",
-      "border-gray-300",
-      "dark:border-gray-500"
+      e ? "border-red-300 dark:border-red-300" : "border-gray-300 dark:border-gray-500"
     ];
     return [
-      ...e,
-      ...t
+      ...t,
+      ...i
     ].join(" ");
   }
   render() {
@@ -1700,24 +1731,25 @@ class K extends HTMLElement {
     n ? this._checkbox.name = n : this._checkbox.removeAttribute("name");
     const a = this.getValue();
     a ? this._checkbox.value = a : this._checkbox.removeAttribute("value"), e ? this._checkbox.setAttribute("aria-label", e) : this._checkbox.removeAttribute("aria-label"), s.className = `mint-checkbox-wrapper ${this.getCheckboxClasses()}`, s.style.pointerEvents = "none", this._checkbox.style.pointerEvents = "auto";
-    let c = s.querySelector("mint-icon");
-    c || (c = document.createElement("mint-icon"), c.setAttribute("name", "check"), c.className = "w-3.5 h-3.5 text-white pointer-events-none absolute inset-0 m-auto", c.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", c.style.zIndex = "1", s.appendChild(c)), this.updateVisualState();
-    let l = this.querySelector(".mint-checkbox-label-container");
+    let o = s.querySelector("mint-icon");
+    o || (o = document.createElement("mint-icon"), o.setAttribute("name", "check"), o.className = "w-3.5 h-3.5 text-white pointer-events-none absolute inset-0 m-auto", o.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", o.style.zIndex = "1", s.appendChild(o)), this.updateVisualState();
+    let c = this.querySelector(".mint-checkbox-label-container");
     if (e || t) {
-      l || (l = document.createElement("div"), l.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", this.appendChild(l));
-      let o = l.querySelector(".mint-checkbox-label");
-      e ? (o || (o = document.createElement("span"), o.className = "mint-checkbox-label text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer select-none", l.insertBefore(o, l.firstChild)), o.textContent = e, i ? o.classList.add("opacity-40") : o.classList.remove("opacity-40")) : o && o.remove();
-      let d = l.querySelector(".mint-checkbox-info");
-      if (t ? (d || (d = document.createElement("span"), d.className = "mint-checkbox-info text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none", l.appendChild(d)), d.textContent = t, i ? d.classList.add("opacity-40") : d.classList.remove("opacity-40")) : d && d.remove(), i)
-        l.style.cursor = "default", l._clickHandler && (l.removeEventListener("click", l._clickHandler), l._clickHandler = null);
+      c || (c = document.createElement("div"), c.className = "mint-checkbox-label-container flex flex-col gap-0.5 flex-1", this.appendChild(c));
+      let h = c.querySelector(".mint-checkbox-label");
+      e ? (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 = e, i ? h.classList.add("opacity-40") : h.classList.remove("opacity-40")) : h && h.remove();
+      let l = c.querySelector(".mint-checkbox-info");
+      if (t ? (l || (l = document.createElement("span"), l.className = "mint-checkbox-info text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none", c.appendChild(l)), l.textContent = t, i ? l.classList.add("opacity-40") : l.classList.remove("opacity-40")) : l && l.remove(), i)
+        c.style.cursor = "default", c._clickHandler && (c.removeEventListener("click", c._clickHandler), c._clickHandler = null);
       else {
-        l.style.cursor = "pointer";
-        const h = l._clickHandler;
-        h && l.removeEventListener("click", h), l._clickHandler = (u) => {
+        c.style.cursor = "pointer";
+        const d = c._clickHandler;
+        d && c.removeEventListener("click", d), c._clickHandler = (u) => {
           this._checkbox && (u.target === this._checkbox || this._checkbox.contains(u.target) || u.composedPath().includes(this._checkbox)) || this.toggle();
-        }, l.addEventListener("click", l._clickHandler);
+        }, c.addEventListener("click", c._clickHandler);
       }
-    } else l && l.remove();
+    } else c && c.remove();
+    this._renderErrorState();
   }
   setupEventListeners() {
     this.removeEventListeners(), this._checkbox && (this._changeHandler = (e) => {
@@ -1775,247 +1807,368 @@ class K extends HTMLElement {
       this.dispatchEvent(e);
     }
   }
+  _renderErrorState() {
+    const e = this.hasError(), t = this.getErrorMessage();
+    let i = this.querySelector(".mint-checkbox-label-container");
+    !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()}`);
+  }
 }
 customElements.get("mint-checkbox") || customElements.define("mint-checkbox", K);
 class Z extends HTMLElement {
   constructor() {
-    super(), this._radio = null, this._checked = !1, this._changeHandler = null, this._groupChangeHandler = null, this._clickHandler = null, this._mousedownHandler = null, this._mouseupHandler = null, this._mouseleaveHandler = null, this._touchstartHandler = null, this._touchendHandler = null, this._focusHandler = null, this._blurHandler = null;
+    super(), this._radio = null, this._checked = !1, this._changeHandler = null, this._clickHandler = null, this._focusHandler = null, this._blurHandler = null, this._keydownHandler = null;
   }
   static get observedAttributes() {
-    return ["checked", "disabled", "label", "info", "id", "name", "value"];
+    return ["value", "checked", "disabled"];
   }
   connectedCallback() {
-    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-flex", "items-start", "gap-2");
+    this.classList.add("inline-flex", "items-center", "gap-2", "cursor-pointer", "select-none");
     const e = this.getAttribute("checked");
-    this._checked = e !== null && e !== "false", this.render();
+    this._checked = e !== null && e !== "false", this.render(), this._setupClickHandler();
   }
   disconnectedCallback() {
-    this.removeEventListeners();
+    this._clickHandler && (this.removeEventListener("click", this._clickHandler), this._clickHandler = null), this._radio && (this._changeHandler && (this._radio.removeEventListener("change", this._changeHandler), this._changeHandler = null), this._focusHandler && (this._radio.removeEventListener("focus", this._focusHandler), this._focusHandler = null), this._blurHandler && (this._radio.removeEventListener("blur", this._blurHandler), this._blurHandler = null), this._keydownHandler && (this._radio.removeEventListener("keydown", this._keydownHandler), this._keydownHandler = null));
   }
   attributeChangedCallback(e, t, i) {
-    e === "checked" && (this._checked = i !== null && i !== "false", this._radio && (this._radio.checked = this._checked)), t !== i && (this.render(), e === "checked" && this._radio && this.updateVisualState());
+    e === "checked" && (this._checked = i !== null && i !== "false", this._radio && (this._radio.checked = this._checked), this._updateVisualState()), t !== i && this.render();
   }
   get checked() {
     return this._checked;
   }
   set checked(e) {
-    e ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._checked = !!e, this._radio && (this._radio.checked = this._checked), this.updateVisualState();
-  }
-  isDisabled() {
-    return this.hasAttribute("disabled");
-  }
-  getLabel() {
-    return this.getAttribute("label") || "";
-  }
-  getInfo() {
-    return this.getAttribute("info") || "";
-  }
-  getId() {
-    return this.getAttribute("id") || "";
-  }
-  getName() {
-    return this.getAttribute("name") || "";
+    this._checked = !!e, e ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._radio && (this._radio.checked = this._checked), this.isConnected ? requestAnimationFrame(() => {
+      this._updateVisualState();
+    }) : this._updateVisualState();
   }
   getValue() {
     return this.getAttribute("value") || "";
   }
-  getChoiceClasses() {
-    const e = [
-      "relative",
+  isDisabled() {
+    const e = this.closest("mint-choice");
+    return this.hasAttribute("disabled") || ((e == null ? void 0 : e.hasAttribute("disabled")) ?? !1);
+  }
+  _setupClickHandler() {
+    this._clickHandler || (this._clickHandler = (e) => {
+      e.target !== this._radio && (this.isDisabled() || this._radio && (this._radio.click(), requestAnimationFrame(() => {
+        if (this._radio && this._radio.checked !== this._checked) {
+          this._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._updateVisualState(), this._updateGroupState();
+          const t = this.closest("mint-choice");
+          t && t.dispatchEvent(new CustomEvent("choice-change", {
+            detail: { checked: this._checked, value: this.getValue() },
+            bubbles: !0,
+            cancelable: !0
+          }));
+        }
+      })));
+    }, this.addEventListener("click", this._clickHandler));
+  }
+  render() {
+    var u;
+    const e = this.isDisabled(), t = this.getValue(), i = this.closest("mint-choice"), s = (i == null ? void 0 : i.getAttribute("name")) || "";
+    let r = "";
+    const n = this.querySelector(".mint-choice-option-label");
+    n ? r = ((u = n.textContent) == null ? void 0 : u.trim()) || "" : Array.from(this.childNodes).forEach((p) => {
+      var m;
+      if (p.nodeType === Node.TEXT_NODE) {
+        const g = (m = p.textContent) == null ? void 0 : m.trim();
+        g && (r += g);
+      }
+    });
+    const a = this.querySelectorAll(".mint-choice-option-wrapper");
+    let o = null;
+    if (a.length > 0 && (this._radio && (o = Array.from(a).find((p) => p.contains(this._radio))), o || (o = a[0]), a.forEach((p, m) => {
+      p !== o && p.remove();
+    })), o || (o = document.createElement("div"), o.className = "mint-choice-option-wrapper", o.style.position = "relative", this.insertBefore(o, this.firstChild)), o.className = `mint-choice-option-wrapper ${this._getWrapperClasses()}`, o.style.position = "relative", this.querySelectorAll('input[type="radio"]').forEach((p) => {
+      p !== this._radio && p.remove();
+    }), this._radio)
+      this._radio.parentElement !== o && o.appendChild(this._radio), this._radio && this._changeHandler && (this._radio.removeEventListener("change", this._changeHandler), this._radio.addEventListener("change", this._changeHandler)), this._radio && (this._focusHandler || (this._focusHandler = (p) => {
+        const m = this.querySelector(".mint-choice-option-wrapper");
+        m && !this.isDisabled() && m.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
+      }), this._blurHandler || (this._blurHandler = () => {
+        const p = this.querySelector(".mint-choice-option-wrapper");
+        p && p.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
+      }), this._keydownHandler || (this._keydownHandler = (p) => {
+        this.isDisabled() || (p.key === "ArrowDown" || p.key === "ArrowRight" ? (p.preventDefault(), this._focusNextOption()) : (p.key === "ArrowUp" || p.key === "ArrowLeft") && (p.preventDefault(), this._focusPreviousOption()));
+      }), this._radio.removeEventListener("focus", this._focusHandler), this._radio.removeEventListener("blur", this._blurHandler), this._radio.removeEventListener("keydown", this._keydownHandler), this._radio.addEventListener("focus", this._focusHandler), this._radio.addEventListener("blur", this._blurHandler), this._radio.addEventListener("keydown", this._keydownHandler));
+    else {
+      this._radio = document.createElement("input"), this._radio.type = "radio", this._radio.className = "sr-only", this._radio.style.position = "absolute", this._radio.style.width = "1px", this._radio.style.height = "1px", this._radio.style.padding = "0", this._radio.style.margin = "-1px", this._radio.style.overflow = "hidden", this._radio.style.clip = "rect(0, 0, 0, 0)", this._radio.style.whiteSpace = "nowrap", this._radio.style.border = "0", o.appendChild(this._radio), this._changeHandler = (m) => {
+        const g = this._checked;
+        this._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._updateVisualState(), this._updateGroupState();
+        const v = this.closest("mint-choice");
+        g !== this._checked && v && setTimeout(() => {
+          v.dispatchEvent(new CustomEvent("choice-change", {
+            detail: { checked: this._checked, value: this.getValue() },
+            bubbles: !0,
+            cancelable: !0
+          }));
+        }, 0);
+      }, this._radio.addEventListener("change", this._changeHandler);
+      const p = () => {
+        this._radio && this._radio.checked !== this._checked && (this._checked = this._radio.checked, this._checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._updateVisualState(), this._updateGroupState());
+      };
+      this._radio.addEventListener("click", p), this._focusHandler = (m) => {
+        const g = this.querySelector(".mint-choice-option-wrapper");
+        g && !this.isDisabled() && g.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
+      }, this._radio.addEventListener("focus", this._focusHandler), this._blurHandler = () => {
+        const m = this.querySelector(".mint-choice-option-wrapper");
+        m && m.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
+      }, this._radio.addEventListener("blur", this._blurHandler), this._keydownHandler = (m) => {
+        this.isDisabled() || (m.key === "ArrowDown" || m.key === "ArrowRight" ? (m.preventDefault(), this._focusNextOption()) : (m.key === "ArrowUp" || m.key === "ArrowLeft") && (m.preventDefault(), this._focusPreviousOption()));
+      }, this._radio.addEventListener("keydown", this._keydownHandler);
+    }
+    this._radio.name = s, this._radio.value = t, 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 = e, e ? 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((p, m) => {
+      m > 0 && p.remove();
+    });
+    let l = o.querySelector(".mint-choice-option-indicator");
+    l || (l = document.createElement("div"), l.className = "mint-choice-option-indicator", o.appendChild(l)), l.className = "mint-choice-option-indicator w-2 h-2 rounded-full bg-white transition-all duration-200 pointer-events-none", l.style.position = "absolute", l.style.top = "50%", l.style.left = "50%", l.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)", l.style.opacity = this._checked ? "1" : "0";
+    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((p) => {
+      var m;
+      p.nodeType === Node.TEXT_NODE && ((m = p.textContent) != null && m.trim()) && (p.textContent = "");
+    })), d.className = `mint-choice-option-label text-sm text-gray-900 dark:text-gray-100 ${e ? "opacity-40" : ""}`, d.textContent = r), e ? (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 = [
       "inline-flex",
       "items-center",
       "justify-center",
-      "flex-shrink-0",
       "w-5",
       "h-5",
       "rounded-full",
       "border-2",
       "transition-all",
       "duration-200",
-      "outline-none",
-      "focus:outline-none",
-      "focus-visible:ring-2",
-      "focus-visible:ring-offset-1",
-      "focus-visible:ring-gray-400",
-      "dark:focus-visible:ring-gray-500",
-      "cursor-pointer",
-      "disabled:opacity-40",
-      "disabled:cursor-not-allowed"
-    ], t = this._checked ? [
+      "flex-shrink-0"
+    ];
+    return e && t.push("opacity-40", "cursor-not-allowed"), this._checked ? t.push(
       "bg-slate-800",
       "dark:bg-slate-600",
       "border-slate-800",
       "dark:border-slate-600"
-    ] : [
+    ) : t.push(
       "bg-white",
       "dark:bg-gray-700",
       "border-gray-300",
       "dark:border-gray-500"
-    ];
-    return [
-      ...e,
-      ...t
-    ].join(" ");
+    ), t.join(" ");
   }
-  render() {
-    const e = this.getLabel(), t = this.getInfo(), i = this.isDisabled();
-    let s = this.querySelector(".mint-choice-wrapper");
-    s || (s = document.createElement("div"), s.className = "mint-choice-wrapper", this.insertBefore(s, this.firstChild)), this._radio ? this._radio.parentElement !== s && s.appendChild(this._radio) : (this._radio = document.createElement("input"), this._radio.type = "radio", s.appendChild(this._radio), this.setupEventListeners()), this._radio.className = "absolute inset-0 w-full h-full opacity-0 cursor-pointer", this._radio.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._radio.checked = this._checked, this._radio.disabled = i, this._changeHandler || this.setupEventListeners();
-    const r = this.getId();
-    r ? this._radio.id = r : this._radio.removeAttribute("id");
-    const n = this.getName();
-    n ? this._radio.name = n : this._radio.removeAttribute("name");
-    const a = this.getValue();
-    a ? this._radio.value = a : this._radio.removeAttribute("value"), e ? this._radio.setAttribute("aria-label", e) : this._radio.removeAttribute("aria-label"), s.className = `mint-choice-wrapper ${this.getChoiceClasses()}`, s.style.pointerEvents = "none", this._radio.style.pointerEvents = "auto";
-    let c = s.querySelector(".mint-choice-indicator");
-    c || (c = document.createElement("div"), c.className = "mint-choice-indicator w-2.5 h-2.5 rounded-full bg-white pointer-events-none absolute inset-0 m-auto", c.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", c.style.zIndex = "1", s.appendChild(c)), c.style.opacity = this._checked ? "1" : "0", c.style.transform = this._checked ? "scale(1)" : "scale(0.8)", this.updateVisualState();
-    let l = this.querySelector(".mint-choice-label-container");
-    if (e || t) {
-      l || (l = document.createElement("div"), l.className = "mint-choice-label-container flex flex-col gap-0.5 flex-1", this.appendChild(l));
-      let o = l.querySelector(".mint-choice-label");
-      e ? (o || (o = document.createElement("span"), o.className = "mint-choice-label text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer select-none", l.insertBefore(o, l.firstChild)), o.textContent = e, i ? o.classList.add("opacity-40") : o.classList.remove("opacity-40")) : o && o.remove();
-      let d = l.querySelector(".mint-choice-info");
-      if (t ? (d || (d = document.createElement("span"), d.className = "mint-choice-info text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none", l.appendChild(d)), d.textContent = t, i ? d.classList.add("opacity-40") : d.classList.remove("opacity-40")) : d && d.remove(), i)
-        l.style.cursor = "default", l._clickHandler && (l.removeEventListener("click", l._clickHandler), l._clickHandler = null);
-      else {
-        l.style.cursor = "pointer";
-        const h = l._clickHandler;
-        h && l.removeEventListener("click", h), l._clickHandler = (u) => {
-          this._radio && (u.target === this._radio || this._radio.contains(u.target) || u.composedPath().includes(this._radio)) || this.select();
-        }, l.addEventListener("click", l._clickHandler);
-      }
-    } else l && l.remove();
+  _updateVisualState() {
+    const e = this.querySelector(".mint-choice-option-wrapper");
+    e && (e.className = `mint-choice-option-wrapper ${this._getWrapperClasses()}`);
+    const t = this.querySelector(".mint-choice-option-indicator");
+    t && (t.style.opacity = this._checked ? "1" : "0", t.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)");
   }
-  setupEventListeners() {
-    this.removeEventListeners(), this._radio && (this._changeHandler = (e) => {
-      e.stopPropagation();
-      const t = this._checked;
-      if (this._checked = this._radio.checked, this._checked ? this.hasAttribute("checked") || this.setAttribute("checked", "") : this.hasAttribute("checked") && this.removeAttribute("checked"), this.updateVisualState(), this._checked && this._radio) {
-        const i = this._radio.name;
-        i && document.querySelectorAll(`input[type="radio"][name="${i}"]`).forEach((r) => {
-          if (r !== this._radio) {
-            const n = r.closest("mint-choice");
-            n && n.updateVisualState && (n._checked = r.checked, r.checked ? n.hasAttribute("checked") || n.setAttribute("checked", "") : n.hasAttribute("checked") && n.removeAttribute("checked"), n.updateVisualState());
-          }
-        });
-      }
-      if (t !== this._checked) {
-        const i = new CustomEvent("change", {
-          detail: { checked: this._checked, value: this.getValue() },
-          bubbles: !0,
-          cancelable: !0
-        });
-        this.dispatchEvent(i);
-      }
-    }, this._radio.addEventListener("change", this._changeHandler), this._groupChangeHandler = (e) => {
-      const t = e.target;
-      t !== this._radio && t.type === "radio" && t.name === this._radio.name && t.checked && setTimeout(() => {
-        this._radio && 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.updateVisualState());
-      }, 0);
-    }, document.addEventListener("change", this._groupChangeHandler, !0), this._clickHandler = (e) => {
-      const t = this._radio.name;
-      t && document.querySelectorAll(`input[type="radio"][name="${t}"]`).forEach((s) => {
-        if (s !== this._radio) {
-          const r = s.closest("mint-choice");
-          r && r.updateVisualState && (r._checked = s.checked, s.checked ? r.hasAttribute("checked") || r.setAttribute("checked", "") : r.hasAttribute("checked") && r.removeAttribute("checked"), r.updateVisualState());
-        }
-      }), requestAnimationFrame(() => {
-        this._radio && (this._checked = this._radio.checked, this.updateVisualState());
-      });
-    }, this._radio.addEventListener("click", this._clickHandler), this._mousedownHandler = (e) => {
-      e.stopPropagation();
-      const t = this.querySelector(".mint-choice-wrapper");
-      t && !this.isDisabled() && (t.classList.add("mint-choice-active"), this._checked ? (t.style.backgroundColor = "rgb(15 23 42)", t.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.3)") : (t.style.backgroundColor = "rgb(243 244 246)", t.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.1)"), document.documentElement.classList.contains("dark") && (this._checked ? t.style.backgroundColor = "rgb(51 65 85)" : t.style.backgroundColor = "rgb(31 41 55)"));
-    }, this._mouseupHandler = (e) => {
-      e.stopPropagation();
-      const t = this.querySelector(".mint-choice-wrapper");
-      t && (t.classList.remove("mint-choice-active"), t.style.backgroundColor = "", t.style.boxShadow = "");
-    }, this._mouseleaveHandler = (e) => {
-      const t = this.querySelector(".mint-choice-wrapper");
-      t && (t.classList.remove("mint-choice-active"), t.style.backgroundColor = "", t.style.boxShadow = "");
-    }, this._radio.addEventListener("mousedown", this._mousedownHandler), this._radio.addEventListener("mouseup", this._mouseupHandler), this._radio.addEventListener("mouseleave", this._mouseleaveHandler), this._touchstartHandler = (e) => {
-      e.stopPropagation();
-      const t = this.querySelector(".mint-choice-wrapper");
-      t && !this.isDisabled() && (t.classList.add("mint-choice-active"), this._checked ? (t.style.backgroundColor = "rgb(15 23 42)", t.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.3)") : (t.style.backgroundColor = "rgb(243 244 246)", t.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.1)"), document.documentElement.classList.contains("dark") && (this._checked ? t.style.backgroundColor = "rgb(51 65 85)" : t.style.backgroundColor = "rgb(31 41 55)"));
-    }, this._touchendHandler = (e) => {
-      e.stopPropagation();
-      const t = this.querySelector(".mint-choice-wrapper");
-      t && (t.classList.remove("mint-choice-active"), t.style.backgroundColor = "", t.style.boxShadow = "");
-    }, this._radio.addEventListener("touchstart", this._touchstartHandler), this._radio.addEventListener("touchend", this._touchendHandler), this._focusHandler = (e) => {
-      const t = this.querySelector(".mint-choice-wrapper");
-      t && this._radio && requestAnimationFrame(() => {
-        this._radio && this._radio.matches(":focus-visible") && (t == null || t.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500"));
-      });
-    }, this._blurHandler = () => {
-      const e = this.querySelector(".mint-choice-wrapper");
-      e && e.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
-    }, this._radio.addEventListener("focus", this._focusHandler), this._radio.addEventListener("blur", this._blurHandler));
+  _updateGroupState() {
+    var t;
+    if (!((t = this._radio) != null && t.name)) return;
+    document.querySelectorAll(
+      `input[type="radio"][name="${this._radio.name}"]`
+    ).forEach((i) => {
+      if (i === this._radio) return;
+      const s = i.closest("mint-choice-option");
+      s && s !== this && (s._checked = i.checked, i.checked ? s.setAttribute("checked", "") : s.removeAttribute("checked"), s._updateVisualState());
+    });
   }
-  removeEventListeners() {
-    this._radio && (this._changeHandler && (this._radio.removeEventListener("change", this._changeHandler), this._changeHandler = null), this._groupChangeHandler && (document.removeEventListener("change", this._groupChangeHandler, !0), this._groupChangeHandler = null), this._clickHandler && (this._radio.removeEventListener("click", this._clickHandler), this._clickHandler = null), this._mousedownHandler && (this._radio.removeEventListener("mousedown", this._mousedownHandler), this._mousedownHandler = null), this._mouseupHandler && (this._radio.removeEventListener("mouseup", this._mouseupHandler), this._mouseupHandler = null), this._mouseleaveHandler && (this._radio.removeEventListener("mouseleave", this._mouseleaveHandler), this._mouseleaveHandler = null), this._touchstartHandler && (this._radio.removeEventListener("touchstart", this._touchstartHandler), this._touchstartHandler = null), this._touchendHandler && (this._radio.removeEventListener("touchend", this._touchendHandler), this._touchendHandler = null), this._focusHandler && (this._radio.removeEventListener("focus", this._focusHandler), this._focusHandler = null), this._blurHandler && (this._radio.removeEventListener("blur", this._blurHandler), this._blurHandler = null));
+  _focusNextOption() {
+    var s;
+    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);
+    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 o = new Event("change", { bubbles: !0 });
+          r._changeHandler.call(r, o);
+        } else
+          r._updateVisualState(), r._updateGroupState();
+        const a = r.closest("mint-choice");
+        a && !n && setTimeout(() => {
+          a.dispatchEvent(new CustomEvent("choice-change", {
+            detail: { checked: !0, value: r.getValue() },
+            bubbles: !0,
+            cancelable: !0
+          }));
+        }, 0);
+      }
+      i.focus(), i.dispatchEvent(new Event("change", { bubbles: !0 }));
+    }
   }
-  updateVisualState() {
-    const e = this.querySelector(".mint-choice-wrapper"), t = e == null ? void 0 : e.querySelector(".mint-choice-indicator");
-    t && (t.style.opacity = this._checked ? "1" : "0", t.style.transform = this._checked ? "scale(1)" : "scale(0.8)"), e && (e.className = `mint-choice-wrapper ${this.getChoiceClasses()}`, e.classList.contains("mint-choice-active") || (e.style.backgroundColor = "", e.style.boxShadow = ""));
-  }
-  select() {
-    if (this._radio && !this.isDisabled()) {
-      this._radio.checked = !0, this._radio.dispatchEvent(new Event("change", { bubbles: !0 })), this._checked = !0, this.hasAttribute("checked") || this.setAttribute("checked", "");
-      const e = this._radio.name;
-      e && document.querySelectorAll(`input[type="radio"][name="${e}"]`).forEach((s) => {
-        if (s !== this._radio) {
-          const r = s.closest("mint-choice");
-          r && r.updateVisualState && (r._checked = s.checked, s.checked ? r.hasAttribute("checked") || r.setAttribute("checked", "") : r.hasAttribute("checked") && r.removeAttribute("checked"), r.updateVisualState());
-        }
-      }), this.updateVisualState();
-      const t = new CustomEvent("change", {
-        detail: { checked: this._checked, value: this.getValue() },
-        bubbles: !0,
-        cancelable: !0
-      });
-      this.dispatchEvent(t);
+  _focusPreviousOption() {
+    var s;
+    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);
+    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 o = new Event("change", { bubbles: !0 });
+          r._changeHandler.call(r, o);
+        } else
+          r._updateVisualState(), r._updateGroupState();
+        const a = r.closest("mint-choice");
+        a && !n && setTimeout(() => {
+          a.dispatchEvent(new CustomEvent("choice-change", {
+            detail: { checked: !0, value: r.getValue() },
+            bubbles: !0,
+            cancelable: !0
+          }));
+        }, 0);
+      }
+      i.focus(), i.dispatchEvent(new Event("change", { bubbles: !0 }));
     }
   }
 }
-customElements.get("mint-choice") || customElements.define("mint-choice", Z);
+customElements.get("mint-choice-option") || customElements.define("mint-choice-option", Z);
 class Q extends HTMLElement {
   constructor() {
-    super(), this._input = null, this._textarea = null, this._element = null, this._wrapper = null, this._icon = null, this._colorPicker = null, this._colorTextInput = null, this._colorContainer = null, this._colorPickerWrapper = null, this._numberSpinnerContainer = null, this._numberIncrementButton = null, this._numberDecrementButton = null, this._focusHandler = null, this._blurHandler = null, this._clickHandler = null, this._clickOutsideHandler = null;
+    super(), this._optionsContainer = null;
   }
   static get observedAttributes() {
-    return ["type", "placeholder", "value", "disabled", "id", "name", "required", "readonly", "rows", "icon", "label", "info", "error", "error-message"];
+    return ["label", "name", "info", "error", "error-message", "id", "disabled", "required"];
   }
   connectedCallback() {
-    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block"), this.getLabel() || console.error('mint-input: The "label" attribute is required. Please provide a label for the input.'), this.render();
+    this.classList.add("box-border", "m-0", "p-0", "border-0", "block", "w-full"), this.render();
   }
   disconnectedCallback() {
-    this.removeEventListeners();
   }
   attributeChangedCallback(e, t, i) {
-    if (t !== i) {
-      if (e === "error" || e === "error-message") {
-        this._renderErrorState(), this._element && (this._element.className = this.getInputClasses()), this._colorTextInput && (this._colorTextInput.className = this.getInputClasses());
-        return;
-      }
-      this.render();
-    }
-  }
-  getType() {
-    return this.getAttribute("type") || "text";
+    t !== i && (e === "error" || e === "error-message" ? this._renderErrorState() : (this.render(), e === "name" && this.querySelectorAll("mint-choice-option").forEach((r) => {
+      typeof r.render == "function" && r.render();
+    })));
   }
-  getRows() {
-    const e = this.getAttribute("rows");
-    return e ? parseInt(e, 10) : 3;
+  getLabel() {
+    return this.getAttribute("label") || "";
   }
-  _getNormalizedType() {
-    const e = this.getType();
-    return e === "datetime" ? "datetime-local" : e === "money" ? "text" : e === "textarea" ? "textarea" : e;
+  getInfo() {
+    return this.getAttribute("info") || "";
   }
-  _isTextarea() {
-    return this.getType() === "textarea";
+  getName() {
+    return this.getAttribute("name") || "";
   }
-  _isMoney() {
-    return this.getType() === "money";
+  hasError() {
+    return this.hasAttribute("error");
+  }
+  getErrorMessage() {
+    return this.getAttribute("error-message") || "";
+  }
+  getId() {
+    return this.getAttribute("id") || "";
+  }
+  isDisabled() {
+    return this.hasAttribute("disabled");
+  }
+  isRequired() {
+    return this.hasAttribute("required");
+  }
+  getValue() {
+    const e = this.querySelector('input[type="radio"]:checked');
+    return (e == null ? void 0 : e.value) || "";
+  }
+  setValue(e) {
+    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 })));
+      } else {
+        const r = i;
+        r.checked = !1;
+        const n = i.querySelector('input[type="radio"]');
+        n && (n.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);
+        }
+      });
+    });
+  }
+  render() {
+    const e = this.getLabel(), t = this.getInfo(), i = this.getId() || `mint-choice-${Math.random().toString(36).substr(2, 9)}`;
+    this.getId() || this.setAttribute("id", i);
+    const s = this.isDisabled();
+    let r = this.querySelector(".mint-choice-label-container");
+    if (e || t) {
+      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 a = r.querySelector(".mint-choice-label");
+      e ? (a || (a = document.createElement("label"), a.className = "mint-choice-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", r.insertBefore(a, r.firstChild)), a.textContent = e, a.setAttribute("for", i), s ? a.classList.add("opacity-40") : a.classList.remove("opacity-40")) : a && a.remove();
+      let o = r.querySelector(".mint-choice-info");
+      t ? (o || (o = document.createElement("span"), o.className = "mint-choice-info text-xs text-gray-500 dark:text-gray-400 select-none", r.appendChild(o)), o.textContent = t, s ? o.classList.add("opacity-40") : o.classList.remove("opacity-40")) : o && o.remove();
+    } else r && r.remove();
+    if (!this._optionsContainer) {
+      this._optionsContainer = document.createElement("div"), this._optionsContainer.className = "mint-choice-options flex flex-col gap-3";
+      const a = this.querySelector(".mint-choice-label-container");
+      a && a.parentElement === this ? this.insertBefore(this._optionsContainer, a.nextSibling) : this.insertBefore(this._optionsContainer, this.firstChild);
+    }
+    Array.from(this.children).filter(
+      (a) => a.tagName === "MINT-CHOICE-OPTION" && a.parentElement !== this._optionsContainer
+    ).forEach((a) => {
+      this._optionsContainer.appendChild(a);
+    }), this._renderErrorState();
+  }
+  _renderErrorState() {
+    const e = this.hasError(), t = this.getErrorMessage();
+    let i = this.querySelector(".mint-choice-error");
+    e && t ? (i || (i = document.createElement("div"), i.className = "mint-choice-error mt-1 text-xs text-red-600 dark:text-red-400", this.appendChild(i)), i.textContent = t) : i && i.remove();
+  }
+}
+customElements.get("mint-choice") || customElements.define("mint-choice", Q);
+class ee extends HTMLElement {
+  constructor() {
+    super(), this._input = null, this._textarea = null, this._element = null, this._wrapper = null, this._icon = null, this._colorPicker = null, this._colorTextInput = null, this._colorContainer = null, this._colorPickerWrapper = null, this._numberSpinnerContainer = null, this._numberIncrementButton = null, this._numberDecrementButton = null, this._focusHandler = null, this._blurHandler = null, this._clickHandler = null, this._clickOutsideHandler = null;
+  }
+  static get observedAttributes() {
+    return ["type", "placeholder", "value", "disabled", "id", "name", "required", "readonly", "rows", "icon", "label", "info", "error", "error-message"];
+  }
+  connectedCallback() {
+    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block"), this.getLabel() || console.error('mint-input: The "label" attribute is required. Please provide a label for the input.'), this.render();
+  }
+  disconnectedCallback() {
+    this.removeEventListeners();
+  }
+  attributeChangedCallback(e, t, i) {
+    if (t !== i) {
+      if (e === "error" || e === "error-message") {
+        this._renderErrorState(), this._element && (this._element.className = this.getInputClasses()), this._colorTextInput && (this._colorTextInput.className = this.getInputClasses());
+        return;
+      }
+      this.render();
+    }
+  }
+  getType() {
+    return this.getAttribute("type") || "text";
+  }
+  getRows() {
+    const e = this.getAttribute("rows");
+    return e ? parseInt(e, 10) : 3;
+  }
+  _getNormalizedType() {
+    const e = this.getType();
+    return e === "datetime" ? "datetime-local" : e === "money" ? "text" : e === "textarea" ? "textarea" : e;
+  }
+  _isTextarea() {
+    return this.getType() === "textarea";
+  }
+  _isMoney() {
+    return this.getType() === "money";
   }
   _isColor() {
     return this.getType() === "color";
@@ -2095,19 +2248,19 @@ class Q extends HTMLElement {
     ], a = [
       "border-2",
       r ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-600"
-    ], c = [
+    ], o = [
       "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"
     ];
-    return [...n, ...a, ...c].filter(Boolean).join(" ");
+    return [...n, ...a, ...o].filter(Boolean).join(" ");
   }
   render() {
-    var v, E, S, y;
+    var _, E, L, y;
     this.getType();
-    const e = this._getNormalizedType(), t = this._isTextarea(), i = this._isMoney(), s = this._isColor(), r = this.getPlaceholder(), n = this.isDisabled(), a = this.isReadonly(), c = this.isRequired(), l = this.getId(), o = this.getName(), d = this.getAttribute("value") || (s ? "#000000" : ""), h = this.getRows(), u = this.getIcon(), b = this.getLabel(), f = this.getInfo();
+    const e = this._getNormalizedType(), t = this._isTextarea(), i = this._isMoney(), s = this._isColor(), r = this.getPlaceholder(), n = this.isDisabled(), a = this.isReadonly(), o = this.isRequired(), c = this.getId(), h = this.getName(), l = this.getAttribute("value") || (s ? "#000000" : ""), d = this.getRows(), u = this.getIcon(), p = this.getLabel(), m = this.getInfo();
     if (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 = d || "#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 = (p) => {
+      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 = l || "#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 = (b) => {
         this._colorPickerWrapper && this._colorPicker && this._colorPicker.matches(":focus-visible") && requestAnimationFrame(() => {
           var k;
           this._colorPicker && this._colorPicker.matches(":focus-visible") && ((k = this._colorPickerWrapper) == null || k.classList.add("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500"));
@@ -2116,41 +2269,41 @@ class Q extends HTMLElement {
         this._colorPickerWrapper && this._colorPickerWrapper.classList.remove("ring-2", "ring-offset-1", "ring-gray-400", "dark:ring-gray-500");
       }, this._colorPicker.addEventListener("focus", this._focusHandler), this._colorPicker.addEventListener("blur", this._blurHandler), this._colorPicker.addEventListener("input", () => {
         var k;
-        const p = ((k = this._colorPicker) == null ? void 0 : k.value) || "#000000";
-        this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = p), this._colorTextInput && (this._colorTextInput.value = p), this.setAttribute("value", p), this.dispatchEvent(new CustomEvent("input", {
-          detail: { value: p },
+        const b = ((k = this._colorPicker) == null ? void 0 : k.value) || "#000000";
+        this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = b), this._colorTextInput && (this._colorTextInput.value = b), this.setAttribute("value", b), this.dispatchEvent(new CustomEvent("input", {
+          detail: { value: b },
           bubbles: !0,
           cancelable: !0
         }));
       }), this._colorPicker.addEventListener("change", () => {
         var k;
-        const p = ((k = this._colorPicker) == null ? void 0 : k.value) || "#000000";
-        this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = p), this.setAttribute("value", p), this.dispatchEvent(new CustomEvent("change", {
-          detail: { value: p },
+        const b = ((k = this._colorPicker) == null ? void 0 : k.value) || "#000000";
+        this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = b), this.setAttribute("value", b), this.dispatchEvent(new CustomEvent("change", {
+          detail: { value: b },
           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", () => {
         var k;
-        const p = ((k = this._colorTextInput) == null ? void 0 : k.value) || "";
-        /^#[0-9A-Fa-f]{6}$/.test(p) && (this._colorPicker && (this._colorPicker.value = p), this.setAttribute("value", p), this.dispatchEvent(new CustomEvent("input", {
-          detail: { value: p },
+        const b = ((k = this._colorTextInput) == null ? void 0 : k.value) || "";
+        /^#[0-9A-Fa-f]{6}$/.test(b) && (this._colorPicker && (this._colorPicker.value = b), this.setAttribute("value", b), this.dispatchEvent(new CustomEvent("input", {
+          detail: { value: b },
           bubbles: !0,
           cancelable: !0
         })));
       }), this._colorTextInput.addEventListener("blur", () => {
-        var k, x;
-        const p = ((k = this._colorTextInput) == null ? void 0 : k.value) || "";
-        /^#[0-9A-Fa-f]{6}$/.test(p) ? (this._colorPicker && (this._colorPicker.value = p), this.setAttribute("value", p)) : this._colorPicker && this._colorTextInput && (this._colorTextInput.value = this._colorPicker.value), this.dispatchEvent(new CustomEvent("change", {
-          detail: { value: ((x = this._colorPicker) == null ? void 0 : x.value) || "#000000" },
+        var k, C;
+        const b = ((k = this._colorTextInput) == null ? void 0 : k.value) || "";
+        /^#[0-9A-Fa-f]{6}$/.test(b) ? (this._colorPicker && (this._colorPicker.value = b), this.setAttribute("value", b)) : this._colorPicker && this._colorTextInput && (this._colorTextInput.value = this._colorPicker.value), this.dispatchEvent(new CustomEvent("change", {
+          detail: { value: ((C = this._colorPicker) == null ? void 0 : C.value) || "#000000" },
           bubbles: !0,
           cancelable: !0
         }));
       }));
-      const g = d || "#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 = c), this._colorTextInput) {
-        const p = this._colorTextInput;
-        l ? p.id = l : p.removeAttribute("id"), o ? p.name = o : p.removeAttribute("name"), p.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), this._element = p;
+      const f = l || "#000000";
+      if (this._colorPicker && this._colorPicker.value !== f && (this._colorPicker.value = f), this._colorPickerWrapper && (this._colorPickerWrapper.style.backgroundColor = f), this._colorTextInput && this._colorTextInput.value !== f && (this._colorTextInput.value = f), 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 = o), this._colorTextInput) {
+        const b = this._colorTextInput;
+        c ? b.id = c : b.removeAttribute("id"), h ? b.name = h : b.removeAttribute("name"), b.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), this._element = b;
       }
       this._renderErrorState();
       return;
@@ -2158,52 +2311,52 @@ class Q extends HTMLElement {
     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), u && !t ? this._icon ? this._icon.setAttribute("name", u) : (this._icon = document.createElement("mint-icon"), this._icon.setAttribute("name", u), 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");
-        g.setAttribute("name", "caret-up"), g.className = "w-[1rem] h-[1rem]", this._numberIncrementButton.appendChild(g), this._numberSpinnerContainer.appendChild(this._numberIncrementButton), this._numberDecrementButton = document.createElement("button"), this._numberDecrementButton.type = "button", this._numberDecrementButton.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 p = document.createElement("mint-icon");
-        p.setAttribute("name", "caret-down"), p.className = "w-[1rem] h-[1rem]", this._numberDecrementButton.appendChild(p), this._numberSpinnerContainer.appendChild(this._numberDecrementButton), this._numberIncrementButton.addEventListener("click", (k) => {
+        const f = document.createElement("mint-icon");
+        f.setAttribute("name", "caret-up"), f.className = "w-[1rem] h-[1rem]", this._numberIncrementButton.appendChild(f), this._numberSpinnerContainer.appendChild(this._numberIncrementButton), this._numberDecrementButton = document.createElement("button"), this._numberDecrementButton.type = "button", this._numberDecrementButton.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 b = document.createElement("mint-icon");
+        b.setAttribute("name", "caret-down"), b.className = "w-[1rem] h-[1rem]", this._numberDecrementButton.appendChild(b), this._numberSpinnerContainer.appendChild(this._numberDecrementButton), this._numberIncrementButton.addEventListener("click", (k) => {
           if (k.preventDefault(), k.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
-            const x = parseFloat(this._input.value) || 0, I = parseFloat(this._input.step) || 1, C = this._input.min ? parseFloat(this._input.min) : void 0, w = this._input.max ? parseFloat(this._input.max) : void 0;
-            let L = x + I;
-            w !== void 0 && L > w && (L = w), C !== void 0 && L < C && (L = C), 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 C = parseFloat(this._input.value) || 0, I = parseFloat(this._input.step) || 1, w = this._input.min ? parseFloat(this._input.min) : void 0, A = this._input.max ? parseFloat(this._input.max) : void 0;
+            let S = C + I;
+            A !== void 0 && S > A && (S = A), w !== void 0 && S < w && (S = w), this._input.value = S.toString(), this.setAttribute("value", S.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
           }
         }), this._numberDecrementButton.addEventListener("click", (k) => {
           if (k.preventDefault(), k.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
-            const x = parseFloat(this._input.value) || 0, I = parseFloat(this._input.step) || 1, C = this._input.min ? parseFloat(this._input.min) : void 0, w = this._input.max ? parseFloat(this._input.max) : void 0;
-            let L = x - I;
-            C !== void 0 && L < C && (L = C), w !== void 0 && L > w && (L = w), 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 C = parseFloat(this._input.value) || 0, I = parseFloat(this._input.step) || 1, w = this._input.min ? parseFloat(this._input.min) : void 0, A = this._input.max ? parseFloat(this._input.max) : void 0;
+            let S = C - I;
+            w !== void 0 && S < w && (S = w), A !== void 0 && S > A && (S = A), this._input.value = S.toString(), this.setAttribute("value", S.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);
     } 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 = c, this._textarea.rows = h, this._textarea.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), d !== this._textarea.value && (this._textarea.value = d), l ? this._textarea.id = l : this._textarea.removeAttribute("id"), o ? this._textarea.name = o : 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);
+      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 = o, this._textarea.rows = d, this._textarea.setAttribute("aria-invalid", this.hasError() ? "true" : "false"), l !== this._textarea.value && (this._textarea.value = l), c ? this._textarea.id = c : 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 f = this.firstChild.textContent;
+        f && !this._textarea.value && (this._textarea.value = f.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 = c, 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")), d !== this._input.value && (this._input.value = d), l ? this._input.id = l : this._input.removeAttribute("id"), o ? this._input.name = o : 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);
-    }
-    let m = this.querySelector(".mint-input-label-container");
-    if (b || f) {
-      m || (m = document.createElement("div"), m.className = "mint-input-label-container flex flex-col gap-0.5 mb-[.25rem]", this._wrapper && this._wrapper.parentElement === this ? this.insertBefore(m, this._wrapper) : this.insertBefore(m, this.firstChild));
-      let g = m.querySelector(".mint-input-label");
-      if (b) {
-        g || (g = document.createElement("label"), g.className = "mint-input-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", m.insertBefore(g, m.firstChild)), g.textContent = b;
-        const k = l || ((v = this._element) == null ? void 0 : v.id) || ((E = this._colorTextInput) == null ? void 0 : E.id) || ((S = this._input) == null ? void 0 : S.id) || ((y = this._textarea) == null ? void 0 : y.id);
+    } 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 = o, 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")), l !== this._input.value && (this._input.value = l), c ? this._input.id = c : 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 f = this.firstChild.textContent;
+      f && !this._input.value && (this._input.value = f.trim()), this.removeChild(this.firstChild);
+    }
+    let v = this.querySelector(".mint-input-label-container");
+    if (p || m) {
+      v || (v = document.createElement("div"), v.className = "mint-input-label-container flex flex-col gap-0.5 mb-[.25rem]", this._wrapper && this._wrapper.parentElement === this ? this.insertBefore(v, this._wrapper) : this.insertBefore(v, this.firstChild));
+      let f = v.querySelector(".mint-input-label");
+      if (p) {
+        f || (f = document.createElement("label"), f.className = "mint-input-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", v.insertBefore(f, v.firstChild)), f.textContent = p;
+        const k = c || ((_ = this._element) == null ? void 0 : _.id) || ((E = this._colorTextInput) == null ? void 0 : E.id) || ((L = this._input) == null ? void 0 : L.id) || ((y = this._textarea) == null ? void 0 : y.id);
         if (k)
-          g.setAttribute("for", k);
+          f.setAttribute("for", k);
         else {
-          const x = `mint-input-${Math.random().toString(36).substr(2, 9)}`;
-          this._element ? this._element.id = x : this._colorTextInput ? this._colorTextInput.id = x : this._input ? this._input.id = x : this._textarea && (this._textarea.id = x), g.setAttribute("for", x);
+          const C = `mint-input-${Math.random().toString(36).substr(2, 9)}`;
+          this._element ? this._element.id = C : this._colorTextInput ? this._colorTextInput.id = C : this._input ? this._input.id = C : this._textarea && (this._textarea.id = C), f.setAttribute("for", C);
         }
-        n ? g.classList.add("opacity-40") : g.classList.remove("opacity-40");
-      } else g && g.remove();
-      let p = m.querySelector(".mint-input-info");
-      f ? (p || (p = document.createElement("span"), p.className = "mint-input-info text-xs text-gray-500 dark:text-gray-400 select-none", m.appendChild(p)), p.textContent = f, n ? p.classList.add("opacity-40") : p.classList.remove("opacity-40")) : p && p.remove();
-    } else m && m.remove();
+        n ? f.classList.add("opacity-40") : f.classList.remove("opacity-40");
+      } else f && f.remove();
+      let b = v.querySelector(".mint-input-info");
+      m ? (b || (b = document.createElement("span"), b.className = "mint-input-info text-xs text-gray-500 dark:text-gray-400 select-none", v.appendChild(b)), b.textContent = m, n ? b.classList.add("opacity-40") : b.classList.remove("opacity-40")) : b && b.remove();
+    } else v && v.remove();
     this._renderErrorState();
   }
   _renderErrorState() {
@@ -2242,8 +2395,8 @@ class Q extends HTMLElement {
     this._isColor() && this._colorTextInput ? this._colorTextInput.blur() : (e = this._element) == null || e.blur();
   }
 }
-customElements.get("mint-input") || customElements.define("mint-input", Q);
-class ee extends HTMLElement {
+customElements.get("mint-input") || customElements.define("mint-input", ee);
+class te extends HTMLElement {
   constructor() {
     super(), this._input = null, this._textInput = null, this._popover = null, this._calendarContainer = null, this._iconButton = null, this._hiddenInput = null, this._startPartInputs = [], this._endPartInputs = [], this._displayEl = null, this._inputsWrapperEl = null, this._fieldsContainer = null, this._resetHandler = null, this._isInputMode = !1, this._currentMonth = (/* @__PURE__ */ new Date()).getMonth(), this._currentYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMode = "calendar", this._selectedStartDate = null, this._selectedEndDate = null, this._isRange = !1, this._popoverObserver = null, this._focusTrapHandler = null, this._escapeHandler = null;
   }
@@ -2388,7 +2541,7 @@ class ee extends HTMLElement {
   }
   _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, n.readOnly = s, n.required = r, e === 4 ? n.className += " w-[40px]" : e === 2 && (n.className += " w-[30px]"), n;
+    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;
   }
   _buildValueFromParts(e, t) {
     let i = 0;
@@ -2402,17 +2555,17 @@ class ee extends HTMLElement {
   _applyDateToParts(e, t, i, s) {
     if (!t.length) return;
     if (!e) {
-      t.forEach((c) => c.value = "");
+      t.forEach((o) => o.value = "");
       return;
     }
     const r = this._formatDate(e, s);
     let n = 0, a = 0;
-    i.forEach((c) => {
-      if (c.type === "sep")
-        n += c.value.length;
+    i.forEach((o) => {
+      if (o.type === "sep")
+        n += o.value.length;
       else {
-        const l = r.substr(n, c.len);
-        t[a] && (t[a].value = l), a++, n += c.len;
+        const c = r.substr(n, o.len);
+        t[a] && (t[a].value = c), a++, n += o.len;
       }
     });
   }
@@ -2445,10 +2598,19 @@ class ee extends HTMLElement {
       }), 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());
       }), s.addEventListener("blur", (a) => {
-        var l;
+        var h, l;
         this._syncHiddenInput();
-        const c = a.relatedTarget;
-        c && i.contains(c) || (this._handleBlur(((l = this._hiddenInput) == null ? void 0 : l.value) || ""), this._exitInputMode());
+        const o = a.relatedTarget;
+        o && (this.contains(o) || (h = this._popover) != null && h.contains(o) || this._calendarContainer && this._calendarContainer.contains(o)) || (this._handleBlur(((l = this._hiddenInput) == null ? void 0 : l.value) || ""), this._exitInputMode(), setTimeout(() => {
+          if (this._hiddenInput) {
+            const d = new FocusEvent("blur", {
+              bubbles: !0,
+              cancelable: !0,
+              relatedTarget: a.relatedTarget
+            });
+            this._hiddenInput.dispatchEvent(d);
+          }
+        }, 0));
       });
     });
   }
@@ -2461,8 +2623,8 @@ class ee extends HTMLElement {
     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 [c, l] = n <= a ? [n, a] : [a, n];
-        this._selectedStartDate = c, this._selectedEndDate = l, this._currentMonth = c.getMonth(), this._currentYear = c.getFullYear();
+        const [o, c] = n <= a ? [n, a] : [a, n];
+        this._selectedStartDate = o, this._selectedEndDate = c, this._currentMonth = o.getMonth(), this._currentYear = o.getFullYear();
       } else n && (this._selectedStartDate = n, this._selectedEndDate = null, this._currentMonth = n.getMonth(), this._currentYear = n.getFullYear());
       this._applyDateToParts(this._selectedStartDate, this._startPartInputs, i, t), this._applyDateToParts(this._selectedEndDate, this._endPartInputs, i, t);
     } else {
@@ -2474,55 +2636,55 @@ class ee extends HTMLElement {
   _parseDateString(e, t) {
     const i = /[\/\-\.\s]+/;
     if (i.test(e)) {
-      const _ = e.split(i).filter((v) => v.length > 0), m = t.split(/[\/\-\.\s]+/).filter((v) => v.length > 0);
-      if (_.length === m.length) {
-        let v = 0, E = 0, S = 0;
-        for (let y = 0; y < m.length; y++) {
-          const g = m[y].toLowerCase(), p = _[y];
-          if (g.includes("d"))
-            v = parseInt(p, 10);
-          else if (g.includes("m"))
-            E = parseInt(p, 10) - 1;
-          else if (g.includes("y")) {
-            let k = parseInt(p, 10);
-            const x = g.length, I = p.length;
-            I === 2 && x === 4 ? k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k : I === 2 && x === 2 && (k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k), S = k;
+      const g = e.split(i).filter((_) => _.length > 0), v = t.split(/[\/\-\.\s]+/).filter((_) => _.length > 0);
+      if (g.length === v.length) {
+        let _ = 0, E = 0, L = 0;
+        for (let y = 0; y < v.length; y++) {
+          const f = v[y].toLowerCase(), b = g[y];
+          if (f.includes("d"))
+            _ = parseInt(b, 10);
+          else if (f.includes("m"))
+            E = parseInt(b, 10) - 1;
+          else if (f.includes("y")) {
+            let k = parseInt(b, 10);
+            const C = f.length, I = b.length;
+            I === 2 && C === 4 ? k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k : I === 2 && C === 2 && (k = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + k), L = k;
           }
         }
-        if (v && E >= 0 && E <= 11 && S) {
-          const y = new Date(S, E, v);
-          if (!isNaN(y.getTime()) && y.getDate() === v && y.getMonth() === E && y.getFullYear() === S)
+        if (_ && E >= 0 && E <= 11 && L) {
+          const y = new Date(L, E, _);
+          if (!isNaN(y.getTime()) && y.getDate() === _ && y.getMonth() === E && y.getFullYear() === L)
             return y;
         }
       }
     }
     const r = e.replace(/[\/\-\.]/g, ""), n = t.replace(/[\/\-\.]/g, "").toLowerCase();
-    let a = n.indexOf("d"), c = n.indexOf("m"), l = n.indexOf("y");
-    const o = [
+    let a = n.indexOf("d"), o = n.indexOf("m"), c = n.indexOf("y");
+    const h = [
       { char: "d", index: a },
-      { char: "m", index: c },
-      { char: "y", index: l }
-    ].sort((_, m) => _.index - m.index);
-    let d = 0, h = 0, u = 0, b = 0;
+      { char: "m", index: o },
+      { char: "y", index: c }
+    ].sort((g, v) => g.index - v.index);
+    let l = 0, d = 0, u = 0, p = 0;
     n.length, r.length;
-    for (const _ of o)
-      if (_.char === "d") {
-        const m = n.lastIndexOf("d") - n.indexOf("d") + 1, v = r.substr(b, m);
-        if (v.length === 0) return null;
-        d = parseInt(v, 10), b += v.length;
-      } else if (_.char === "m") {
-        const m = n.lastIndexOf("m") - n.indexOf("m") + 1, v = r.substr(b, m);
-        if (v.length === 0) return null;
-        h = parseInt(v, 10) - 1, b += v.length;
-      } else if (_.char === "y") {
-        const m = n.lastIndexOf("y") - n.indexOf("y") + 1, v = r.substr(b), E = Math.min(m, v.length), S = v.substr(0, E);
-        if (S.length === 0) return null;
-        let y = parseInt(S, 10);
-        E === 2 && m === 4 ? y = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + y : E === 2 && m === 2 && (y = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + y), u = y, b += E;
+    for (const g of h)
+      if (g.char === "d") {
+        const v = n.lastIndexOf("d") - n.indexOf("d") + 1, _ = r.substr(p, v);
+        if (_.length === 0) return null;
+        l = parseInt(_, 10), p += _.length;
+      } else if (g.char === "m") {
+        const v = n.lastIndexOf("m") - n.indexOf("m") + 1, _ = r.substr(p, v);
+        if (_.length === 0) return null;
+        d = parseInt(_, 10) - 1, p += _.length;
+      } else if (g.char === "y") {
+        const v = n.lastIndexOf("y") - n.indexOf("y") + 1, _ = r.substr(p), E = Math.min(v, _.length), L = _.substr(0, E);
+        if (L.length === 0) return null;
+        let y = parseInt(L, 10);
+        E === 2 && v === 4 ? y = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + y : E === 2 && v === 2 && (y = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + y), u = y, p += E;
       }
-    if (!d || h < 0 || h > 11 || !u) return null;
-    const f = new Date(u, h, d);
-    return isNaN(f.getTime()) || f.getDate() !== d || f.getMonth() !== h || f.getFullYear() !== u ? null : f;
+    if (!l || d < 0 || d > 11 || !u) return null;
+    const m = new Date(u, d, l);
+    return isNaN(m.getTime()) || m.getDate() !== l || m.getMonth() !== d || m.getFullYear() !== u ? null : m;
   }
   _formatDate(e, t) {
     const i = e.getDate(), s = e.getMonth() + 1, r = e.getFullYear(), n = t.toLowerCase();
@@ -2531,113 +2693,115 @@ class ee extends HTMLElement {
   }
   // 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"], c = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], l = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], o = (u, b = 2) => u.toString().padStart(b, "0"), d = (u) => {
-      const b = u % 10, f = u % 100;
-      return b === 1 && f !== 11 ? "st" : b === 2 && f !== 12 ? "nd" : b === 3 && f !== 13 ? "rd" : "th";
+    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"], o = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], c = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], h = (u, p = 2) => u.toString().padStart(p, "0"), l = (u) => {
+      const p = u % 10, m = u % 100;
+      return p === 1 && m !== 11 ? "st" : p === 2 && m !== 12 ? "nd" : p === 3 && m !== 13 ? "rd" : "th";
     };
-    let h = "";
+    let d = "";
     for (let u = 0; u < t.length; u++) {
-      const b = t[u];
-      if (b === "\\" && u + 1 < t.length) {
-        h += t[u + 1], u++;
+      const p = t[u];
+      if (p === "\\" && u + 1 < t.length) {
+        d += t[u + 1], u++;
         continue;
       }
-      switch (b) {
+      switch (p) {
         case "Y":
-          h += r.toString();
+          d += r.toString();
           break;
         case "y":
-          h += r.toString().slice(-2);
+          d += r.toString().slice(-2);
           break;
         case "m":
-          h += o(s);
+          d += h(s);
           break;
         case "n":
-          h += s.toString();
+          d += s.toString();
           break;
         case "M":
-          h += l[s - 1];
+          d += c[s - 1];
           break;
         case "F":
-          h += c[s - 1];
+          d += o[s - 1];
           break;
         case "d":
-          h += o(i);
+          d += h(i);
           break;
         case "j":
-          h += i.toString();
+          d += i.toString();
           break;
         case "D":
-          h += a[e.getDay()];
+          d += a[e.getDay()];
           break;
         case "l":
-          h += n[e.getDay()];
+          d += n[e.getDay()];
           break;
         case "S":
-          h += d(i);
+          d += l(i);
           break;
         default:
-          h += b;
+          d += p;
           break;
       }
     }
-    return h;
+    return d;
   }
   _validateDateString(e, t) {
     const i = this._parseDateString(e, t);
     return i !== null && !isNaN(i.getTime());
   }
   render() {
-    const e = this.getLabel(), t = this.getInfo(), i = this.getValue(), s = this.isDisabled(), r = this.isReadonly(), n = this.isRequired(), a = this.getId(), c = this.getName(), l = this.getFormat(), o = this.hasError(), d = this.getErrorMessage();
+    const e = this.getLabel(), t = this.getInfo(), i = this.getValue(), s = this.isDisabled(), r = this.isReadonly(), n = this.isRequired(), a = this.getId(), o = this.getName(), c = this.getFormat(), h = this.hasError(), l = 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 (e || t) {
-      h || (h = document.createElement("div"), h.className = "mint-date-picker-label-container flex flex-col gap-0.5 mb-[.25rem]", this.insertBefore(h, this._input));
-      let m = h.querySelector(".mint-date-picker-label");
-      e ? (m || (m = document.createElement("label"), m.className = "mint-date-picker-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", h.insertBefore(m, h.firstChild)), m.textContent = e, a && this._textInput && m.setAttribute("for", a)) : m && m.remove();
-      let v = h.querySelector(".mint-date-picker-info");
-      t ? (v || (v = document.createElement("span"), v.className = "mint-date-picker-info text-xs text-gray-500 dark:text-gray-400 select-none", h.appendChild(v)), v.textContent = t) : v && v.remove();
-    } else h && h.remove();
-    this._hiddenInput || (this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.value = i || "", this._textInput = this._hiddenInput, this._input.appendChild(this._hiddenInput)), a && (this._hiddenInput.id = a), c && (this._hiddenInput.name = c), this._hiddenInput.value = i || "", this._hiddenInput.setAttribute("aria-invalid", o ? "true" : "false");
+      d || (d = document.createElement("div"), d.className = "mint-date-picker-label-container flex flex-col gap-0.5 mb-[.25rem]", this.insertBefore(d, this._input));
+      let _ = d.querySelector(".mint-date-picker-label");
+      e ? (_ || (_ = document.createElement("label"), _.className = "mint-date-picker-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", d.insertBefore(_, d.firstChild)), _.textContent = e, a && this._textInput && _.setAttribute("for", a)) : _ && _.remove();
+      let E = d.querySelector(".mint-date-picker-info");
+      t ? (E || (E = document.createElement("span"), E.className = "mint-date-picker-info text-xs text-gray-500 dark:text-gray-400 select-none", d.appendChild(E)), E.textContent = t) : E && E.remove();
+    } else d && d.remove();
+    this._hiddenInput || (this._hiddenInput = document.createElement("input"), this._hiddenInput.type = "hidden", this._hiddenInput.value = i || "", this._textInput = this._hiddenInput, this._input.appendChild(this._hiddenInput)), a && (this._hiddenInput.id = a), o && (this._hiddenInput.name = o), this._hiddenInput.value = i || "", this._hiddenInput.setAttribute("aria-invalid", h ? "true" : "false");
     let u = this._input.querySelector(".mint-date-fields");
-    u || (u = document.createElement("div"), this._input.appendChild(u)), this._fieldsContainer = u, this._applyErrorVisuals(o, d, s), u.innerHTML = "", this._displayEl = document.createElement("div"), this._displayEl.className = "flex-1 text-gray-900 dark:text-white cursor-text select-none focus:outline-none", this._displayEl.tabIndex = s ? -1 : 0, this._displayEl.addEventListener("click", () => {
+    u || (u = document.createElement("div"), this._input.appendChild(u)), this._fieldsContainer = u, this._applyErrorVisuals(h, l, s), u.innerHTML = "", this._displayEl = document.createElement("div");
+    const p = r ? "select-text" : "select-none";
+    this._displayEl.className = `flex-1 text-gray-900 dark:text-white ${r ? "cursor-default" : "cursor-text"} ${p} focus:outline-none`, this._displayEl.tabIndex = s || r ? -1 : 0, this._displayEl.addEventListener("click", () => {
       s || r || this._enterInputMode();
-    }), this._displayEl.addEventListener("keydown", (m) => {
-      s || r || (m.key === "Enter" || m.key === " ") && (m.preventDefault(), this._enterInputMode());
+    }), this._displayEl.addEventListener("keydown", (_) => {
+      s || r || (_.key === "Enter" || _.key === " ") && (_.preventDefault(), this._enterInputMode());
     }), this._inputsWrapperEl = document.createElement("div"), this._inputsWrapperEl.className = "flex items-center gap-1 w-full";
-    const b = this._getFormatTokens(l);
+    const m = this._getFormatTokens(c);
     this._startPartInputs = [], this._endPartInputs = [];
-    const f = (m) => {
-      const v = document.createDocumentFragment();
-      return b.forEach((E) => {
-        if (E.type === "sep") {
-          const S = document.createElement("span");
-          S.textContent = E.value, S.className = "text-gray-400 dark:text-gray-500 select-none", v.appendChild(S);
+    const g = (_) => {
+      const E = document.createDocumentFragment();
+      return m.forEach((L) => {
+        if (L.type === "sep") {
+          const y = document.createElement("span");
+          y.textContent = L.value, y.className = "text-gray-400 dark:text-gray-500 select-none", E.appendChild(y);
         } else {
-          const S = E.part === "d" ? "dd" : E.part === "m" ? "mm" : E.len === 2 ? "yy" : "yyyy", y = this._createPartInput(E.len, S, s, r, n);
-          m === "start" ? this._startPartInputs.push(y) : this._endPartInputs.push(y), v.appendChild(y);
+          const y = L.part === "d" ? "dd" : L.part === "m" ? "mm" : L.len === 2 ? "yy" : "yyyy", f = this._createPartInput(L.len, y, s, r, n);
+          _ === "start" ? this._startPartInputs.push(f) : this._endPartInputs.push(f), E.appendChild(f);
         }
-      }), v;
+      }), E;
     };
-    if (this._inputsWrapperEl.appendChild(f("start")), this._isRange) {
-      const m = document.createElement("span");
-      m.textContent = " - ", m.className = "text-gray-400 dark:text-gray-500 select-none", this._inputsWrapperEl.appendChild(m), this._inputsWrapperEl.appendChild(f("end"));
+    if (this._inputsWrapperEl.appendChild(g("start")), this._isRange) {
+      const _ = document.createElement("span");
+      _.textContent = " - ", _.className = "text-gray-400 dark:text-gray-500 select-none", this._inputsWrapperEl.appendChild(_), this._inputsWrapperEl.appendChild(g("end"));
     }
-    const _ = document.createElement("div");
-    if (_.className = "flex flex-col w-full", this._displayEl.style.display = this._isInputMode ? "none" : "flex", this._inputsWrapperEl.style.display = this._isInputMode ? "flex" : "none", _.appendChild(this._displayEl), _.appendChild(this._inputsWrapperEl), u.appendChild(_), u.addEventListener("click", () => {
+    const v = document.createElement("div");
+    if (v.className = "flex flex-col w-full", this._displayEl.style.display = this._isInputMode ? "none" : "flex", this._inputsWrapperEl.style.display = this._isInputMode ? "flex" : "none", v.appendChild(this._displayEl), v.appendChild(this._inputsWrapperEl), u.appendChild(v), u.addEventListener("click", () => {
       this._isInputMode || s || r || this._enterInputMode();
-    }), this._attachPartInputHandlers(this._startPartInputs, b, u), this._isRange && this._attachPartInputHandlers(this._endPartInputs, b, u), this._parseValue(i), this._syncHiddenInput(), this._updateDisplayText(), this._iconButton)
+    }), this._attachPartInputHandlers(this._startPartInputs, m, u), this._isRange && this._attachPartInputHandlers(this._endPartInputs, m, u), this._parseValue(i), this._syncHiddenInput(), this._updateDisplayText(), this._iconButton)
       this._iconButton.disabled = s || r, !s && !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-2 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 m = `date-icon-${Math.random().toString(36).substr(2, 9)}`;
-      this._iconButton.id = m;
-      const v = document.createElement("mint-icon");
-      v.setAttribute("name", "calendar"), v.className = "w-4 h-4 pointer-events-none", this._iconButton.appendChild(v), this._iconButton.addEventListener("click", () => {
+      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 _ = `date-icon-${Math.random().toString(36).substr(2, 9)}`;
+      this._iconButton.id = _;
+      const E = document.createElement("mint-icon");
+      E.setAttribute("name", "calendar"), E.className = "w-4 h-4 pointer-events-none", this._iconButton.appendChild(E), this._iconButton.addEventListener("click", () => {
         s || r || this._enterInputMode();
       }), this._input.prepend(this._iconButton), this._iconButton.disabled = s || r;
     }
-    this._renderErrorState(o, d);
+    this._renderErrorState(h, l);
   }
   _renderErrorState(e, t) {
     let i = this.querySelector(".mint-date-picker-error");
@@ -2685,8 +2849,8 @@ class ee extends HTMLElement {
     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, c] = r <= n ? [r, n] : [n, r], l = this._formatDate(a, t), o = this._formatDate(c, t), d = `${l} - ${o}`;
-        this.setValue(d), this._applyDateToParts(a, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(c, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = a, this._selectedEndDate = c, this._currentMonth = a.getMonth(), this._currentYear = a.getFullYear();
+        const [a, o] = r <= n ? [r, n] : [n, r], c = this._formatDate(a, t), h = this._formatDate(o, t), l = `${c} - ${h}`;
+        this.setValue(l), this._applyDateToParts(a, this._startPartInputs, this._getFormatTokens(t), t), this._applyDateToParts(o, this._endPartInputs, this._getFormatTokens(t), t), this._selectedStartDate = a, this._selectedEndDate = o, 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();
@@ -2748,7 +2912,15 @@ class ee extends HTMLElement {
                   }
                   requestAnimationFrame(() => {
                     this._buildCalendar();
-                  });
+                  }), this._hiddenInput && (this._syncHiddenInput(), setTimeout(() => {
+                    var o;
+                    const a = new FocusEvent("blur", {
+                      bubbles: !0,
+                      cancelable: !0,
+                      relatedTarget: null
+                    });
+                    (o = this._hiddenInput) == null || o.dispatchEvent(a);
+                  }, 0));
                 }
             });
           }), this._popoverObserver.observe(this._popover, {
@@ -2785,63 +2957,63 @@ class ee extends HTMLElement {
     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 a = document.createElement("div");
     a.className = "flex flex-col md:flex-row md:gap-6 md:items-start";
+    const o = document.createElement("div");
+    o.className = "flex-1 min-w-0";
     const c = document.createElement("div");
-    c.className = "flex-1 min-w-0";
-    const l = document.createElement("div");
-    l.className = "flex items-center justify-between mb-4";
-    const o = document.createElement("button");
-    o.type = "button", o.tabIndex = 0, o.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", o.setAttribute("data-keep-popover-open", "true");
-    const d = document.createElement("mint-icon");
-    d.setAttribute("name", "caret-left"), d.className = "w-4 h-4", o.appendChild(d), o.addEventListener("click", () => {
+    c.className = "flex items-center justify-between mb-4";
+    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 l = document.createElement("mint-icon");
+    l.setAttribute("name", "caret-left"), l.className = "w-4 h-4", h.appendChild(l), h.addEventListener("click", () => {
       this._currentMonth === 0 ? (this._currentMonth = 11, this._currentYear--) : this._currentMonth--, this._buildCalendar();
-    }), l.appendChild(o);
-    const h = document.createElement("div");
-    h.className = "flex items-center gap-2";
+    }), c.appendChild(h);
+    const d = document.createElement("div");
+    d.className = "flex items-center gap-2";
     const u = document.createElement("button");
     u.type = "button", u.tabIndex = 0, u.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", u.setAttribute("data-keep-popover-open", "true"), u.textContent = i[this._currentMonth], u.addEventListener("click", () => {
       this._viewMode = "month", this._buildCalendar();
-    }), h.appendChild(u);
-    const b = document.createElement("button");
-    b.type = "button", b.tabIndex = 0, b.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", b.setAttribute("data-keep-popover-open", "true"), b.textContent = String(this._currentYear), b.addEventListener("click", () => {
+    }), d.appendChild(u);
+    const p = document.createElement("button");
+    p.type = "button", p.tabIndex = 0, p.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", p.setAttribute("data-keep-popover-open", "true"), p.textContent = String(this._currentYear), p.addEventListener("click", () => {
       this._viewMode = "year", this._buildCalendar();
-    }), h.appendChild(b), l.appendChild(h);
-    const f = document.createElement("button");
-    f.type = "button", f.tabIndex = 0, f.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", f.setAttribute("data-keep-popover-open", "true");
-    const _ = document.createElement("mint-icon");
-    _.setAttribute("name", "caret-right"), _.className = "w-4 h-4", f.appendChild(_), f.addEventListener("click", () => {
+    }), d.appendChild(p), c.appendChild(d);
+    const m = document.createElement("button");
+    m.type = "button", m.tabIndex = 0, m.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", m.setAttribute("data-keep-popover-open", "true");
+    const g = document.createElement("mint-icon");
+    g.setAttribute("name", "caret-right"), g.className = "w-4 h-4", m.appendChild(g), m.addEventListener("click", () => {
       this._currentMonth === 11 ? (this._currentMonth = 0, this._currentYear++) : this._currentMonth++, this._buildCalendar();
-    }), l.appendChild(f);
-    const m = document.createElement("div");
-    m.className = "grid grid-cols-7 mb-2", s.forEach((y) => {
-      const g = document.createElement("div");
-      g.className = "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-1", g.textContent = y, m.appendChild(g);
-    });
+    }), c.appendChild(m);
     const v = document.createElement("div");
-    v.className = "grid grid-cols-7";
+    v.className = "grid grid-cols-7 mb-2", s.forEach((y) => {
+      const f = document.createElement("div");
+      f.className = "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-1", f.textContent = y, v.appendChild(f);
+    });
+    const _ = document.createElement("div");
+    _.className = "grid grid-cols-7";
     for (let y = 0; y < t; y++) {
-      const g = document.createElement("div");
-      g.className = "w-8 h-8", v.appendChild(g);
+      const f = document.createElement("div");
+      f.className = "w-8 h-8", _.appendChild(f);
     }
-    const E = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, S = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null;
+    const E = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, L = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null;
     for (let y = 1; y <= e; y++) {
-      const g = new Date(this._currentYear, this._currentMonth, y), p = this._isToday(g), k = this._isDateSelected(g), x = this._isDateInRange(g), I = E && g < E || S && g > S;
-      let C = "rounded-md";
+      const f = new Date(this._currentYear, this._currentMonth, y), b = this._isToday(f), k = this._isDateSelected(f), C = this._isDateInRange(f), I = E && f < E || L && f > L;
+      let w = "rounded-md";
       if (this._isRange && this._selectedStartDate && this._selectedEndDate) {
-        const L = this._isSameDate(g, this._selectedStartDate), M = this._isSameDate(g, this._selectedEndDate);
-        L && M ? C = "rounded-md" : L ? C = "rounded-l-md" : M ? C = "rounded-r-md" : x && (C = "rounded-none");
-      } else k && !this._isRange && (C = "rounded-md");
-      const w = document.createElement("button");
-      w.type = "button", w.disabled = !!I, w.tabIndex = I ? -1 : 0, w.className = `w-full h-8 ${C} 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 ${k ? "bg-slate-800 dark:bg-slate-600 text-white" : x ? "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : p ? "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"} ${I ? "opacity-40 cursor-not-allowed" : ""}`, w.textContent = y.toString(), I || w.addEventListener("click", () => {
-        this._handleDateClick(g);
-      }), v.appendChild(w);
+        const S = this._isSameDate(f, this._selectedStartDate), N = this._isSameDate(f, this._selectedEndDate);
+        S && N ? w = "rounded-md" : S ? w = "rounded-l-md" : N ? w = "rounded-r-md" : C && (w = "rounded-none");
+      } else k && !this._isRange && (w = "rounded-md");
+      const A = document.createElement("button");
+      A.type = "button", A.disabled = !!I, A.tabIndex = I ? -1 : 0, A.className = `w-full h-8 ${w} 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 ${k ? "bg-slate-800 dark:bg-slate-600 text-white" : C ? "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : b ? "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"} ${I ? "opacity-40 cursor-not-allowed" : ""}`, A.textContent = y.toString(), I || A.addEventListener("click", () => {
+        this._handleDateClick(f);
+      }), _.appendChild(A);
     }
     if (n) {
       const y = document.createElement("div");
       y.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 g = document.createElement("div");
-      g.className = "relative md:relative md:flex-1 md:min-h-0";
-      const p = document.createElement("div");
-      p.className = "flex gap-2 overflow-x-auto pb-1 md:flex-col md:overflow-x-visible md:overflow-y-auto md:pb-0 md:gap-2", p.style.scrollbarWidth = "none", p.style.msOverflowStyle = "none", p.style.setProperty("-webkit-overflow-scrolling", "touch");
+      const f = document.createElement("div");
+      f.className = "relative md:relative md:flex-1 md:min-h-0";
+      const b = document.createElement("div");
+      b.className = "flex gap-2 overflow-x-auto pb-1 md:flex-col md:overflow-x-visible md:overflow-y-auto md:pb-0 md:gap-2", b.style.scrollbarWidth = "none", b.style.msOverflowStyle = "none", b.style.setProperty("-webkit-overflow-scrolling", "touch");
       const k = document.createElement("style");
       k.textContent = `
         .mint-date-shortcuts-row::-webkit-scrollbar {
@@ -2867,37 +3039,37 @@ class ee extends HTMLElement {
             background: rgba(255, 255, 255, 0.2);
           }
         }
-      `, p.classList.add("mint-date-shortcuts-row"), document.head.querySelector("style[data-mint-date-shortcuts]") || (k.setAttribute("data-mint-date-shortcuts", "true"), document.head.appendChild(k));
-      const x = document.createElement("div");
-      x.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", g.appendChild(x);
-      const I = document.createElement("div");
-      I.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", g.appendChild(I);
+      `, b.classList.add("mint-date-shortcuts-row"), document.head.querySelector("style[data-mint-date-shortcuts]") || (k.setAttribute("data-mint-date-shortcuts", "true"), document.head.appendChild(k));
       const C = document.createElement("div");
-      C.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", g.appendChild(C);
+      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", f.appendChild(C);
+      const I = document.createElement("div");
+      I.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", f.appendChild(I);
       const w = document.createElement("div");
-      w.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", g.appendChild(w);
-      const L = () => {
+      w.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", f.appendChild(w);
+      const A = document.createElement("div");
+      A.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", f.appendChild(A);
+      const S = () => {
         if (window.innerWidth >= 768) {
-          const T = p.scrollTop, H = p.scrollHeight, D = p.clientHeight;
-          T > 0 ? C.style.opacity = "1" : C.style.opacity = "0", T + D < H - 1 ? w.style.opacity = "1" : w.style.opacity = "0", x.style.opacity = "0", I.style.opacity = "0";
+          const H = b.scrollTop, T = b.scrollHeight, D = b.clientHeight;
+          H > 0 ? w.style.opacity = "1" : w.style.opacity = "0", H + D < T - 1 ? A.style.opacity = "1" : A.style.opacity = "0", C.style.opacity = "0", I.style.opacity = "0";
         } else {
-          const T = p.scrollLeft, H = p.scrollWidth, D = p.clientWidth;
-          T > 0 ? x.style.opacity = "1" : x.style.opacity = "0", T + D < H - 1 ? I.style.opacity = "1" : I.style.opacity = "0", C.style.opacity = "0", w.style.opacity = "0";
+          const H = b.scrollLeft, T = b.scrollWidth, D = b.clientWidth;
+          H > 0 ? C.style.opacity = "1" : C.style.opacity = "0", H + D < T - 1 ? I.style.opacity = "1" : I.style.opacity = "0", w.style.opacity = "0", A.style.opacity = "0";
         }
       };
-      p.addEventListener("scroll", L), window.addEventListener("resize", L), setTimeout(L, 0), r.forEach((M) => {
-        const T = document.createElement("button");
-        T.type = "button", T.tabIndex = 0, T.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", T.textContent = M.label, T.setAttribute("data-keep-popover-open", "true"), T.addEventListener("click", () => {
-          const H = M.action();
-          if (H) {
-            if (this._isRange && "start" in H && "end" in H) {
-              this._selectedStartDate = H.start, this._selectedEndDate = H.end;
-              const D = this.getFormat(), N = this._formatDate(H.start, D), F = this._formatDate(H.end, D), P = `${N} - ${F}`;
-              this.setValue(P), this._currentMonth = H.start.getMonth(), this._currentYear = H.start.getFullYear();
-            } else if (H instanceof Date) {
-              this._selectedStartDate = H, this._selectedEndDate = null;
-              const D = this.getFormat(), N = this._formatDate(H, D);
-              this.setValue(N), this._currentMonth = H.getMonth(), this._currentYear = H.getFullYear();
+      b.addEventListener("scroll", S), window.addEventListener("resize", S), setTimeout(S, 0), r.forEach((N) => {
+        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 = N.label, H.setAttribute("data-keep-popover-open", "true"), H.addEventListener("click", () => {
+          const T = N.action();
+          if (T) {
+            if (this._isRange && "start" in T && "end" in T) {
+              this._selectedStartDate = T.start, this._selectedEndDate = T.end;
+              const D = this.getFormat(), M = this._formatDate(T.start, D), F = this._formatDate(T.end, D), 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 D = this.getFormat(), M = this._formatDate(T, D);
+              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() },
@@ -2909,10 +3081,10 @@ class ee extends HTMLElement {
               cancelable: !0
             }));
           }
-        }), p.appendChild(T);
-      }), g.appendChild(p), y.appendChild(g), a.appendChild(y);
+        }), b.appendChild(H);
+      }), f.appendChild(b), y.appendChild(f), a.appendChild(y);
     }
-    c.appendChild(l), c.appendChild(m), c.appendChild(v), a.appendChild(c), this._calendarContainer.appendChild(a);
+    o.appendChild(c), o.appendChild(v), o.appendChild(_), a.appendChild(o), this._calendarContainer.appendChild(a);
   }
   _buildMonthView() {
     if (!this._calendarContainer) return;
@@ -2934,15 +3106,15 @@ class ee extends HTMLElement {
     a.setAttribute("name", "caret-right"), a.className = "w-4 h-4", n.appendChild(a), n.addEventListener("click", () => {
       this._currentYear++, this._buildCalendar();
     }), t.appendChild(n);
-    const c = document.createElement("div");
-    c.className = "grid grid-cols-3 gap-2", e.forEach((l, o) => {
-      const d = document.createElement("button");
-      d.type = "button", d.tabIndex = 0, d.setAttribute("data-keep-popover-open", "true");
-      const h = this._currentMonth === o;
-      d.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 ${h ? "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"}`, d.textContent = l, d.addEventListener("click", () => {
-        this._currentMonth = o, this._viewMode = "calendar", this._buildCalendar();
-      }), c.appendChild(d);
-    }), this._calendarContainer.appendChild(t), this._calendarContainer.appendChild(c);
+    const o = document.createElement("div");
+    o.className = "grid grid-cols-3 gap-2", e.forEach((c, h) => {
+      const l = document.createElement("button");
+      l.type = "button", l.tabIndex = 0, l.setAttribute("data-keep-popover-open", "true");
+      const d = this._currentMonth === h;
+      l.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 ${d ? "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"}`, l.textContent = c, l.addEventListener("click", () => {
+        this._currentMonth = h, this._viewMode = "calendar", this._buildCalendar();
+      }), o.appendChild(l);
+    }), this._calendarContainer.appendChild(t), this._calendarContainer.appendChild(o);
   }
   _buildYearView() {
     if (!this._calendarContainer) return;
@@ -2958,21 +3130,21 @@ class ee extends HTMLElement {
     n.className = "text-sm font-medium text-gray-900 dark:text-gray-100", n.textContent = `${e} - ${t}`, i.appendChild(n);
     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 c = document.createElement("mint-icon");
-    c.setAttribute("name", "caret-right"), c.className = "w-4 h-4", a.appendChild(c), a.addEventListener("click", () => {
+    const o = document.createElement("mint-icon");
+    o.setAttribute("name", "caret-right"), o.className = "w-4 h-4", a.appendChild(o), a.addEventListener("click", () => {
       this._currentYear += 12, this._buildCalendar();
     }), i.appendChild(a);
-    const l = document.createElement("div");
-    l.className = "grid grid-cols-3 gap-2";
-    for (let o = e; o <= t; o++) {
-      const d = document.createElement("button");
-      d.type = "button", d.tabIndex = 0, d.setAttribute("data-keep-popover-open", "true");
-      const h = this._currentYear === o;
-      d.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 ${h ? "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"}`, d.textContent = String(o), d.addEventListener("click", () => {
-        this._currentYear = o, this._viewMode = "calendar", this._buildCalendar();
-      }), l.appendChild(d);
-    }
-    this._calendarContainer.appendChild(i), this._calendarContainer.appendChild(l);
+    const c = document.createElement("div");
+    c.className = "grid grid-cols-3 gap-2";
+    for (let h = e; h <= t; h++) {
+      const l = document.createElement("button");
+      l.type = "button", l.tabIndex = 0, l.setAttribute("data-keep-popover-open", "true");
+      const d = this._currentYear === h;
+      l.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 ${d ? "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"}`, l.textContent = String(h), l.addEventListener("click", () => {
+        this._currentYear = h, this._viewMode = "calendar", this._buildCalendar();
+      }), c.appendChild(l);
+    }
+    this._calendarContainer.appendChild(i), this._calendarContainer.appendChild(c);
   }
   _getDaysInMonth(e, t) {
     return new Date(t, e + 1, 0).getDate();
@@ -3029,7 +3201,7 @@ class ee extends HTMLElement {
     this._isRange ? this._selectedStartDate && this._selectedEndDate ? t = `${this._formatDatePhp(this._selectedStartDate, e)} - ${this._formatDatePhp(this._selectedEndDate, e)}` : this._selectedStartDate && (t = this._formatDatePhp(this._selectedStartDate, e)) : this._selectedStartDate && (t = this._formatDatePhp(this._selectedStartDate, e)), t ? (this._displayEl.textContent = t, this._displayEl.classList.remove("text-gray-400", "dark:text-gray-500"), this._displayEl.classList.add("text-gray-900", "dark:text-white")) : (this._displayEl.textContent = "Select date", this._displayEl.classList.add("text-gray-400", "dark:text-gray-500"), this._displayEl.classList.remove("text-gray-900", "dark:text-white")), this._displayEl && this._inputsWrapperEl && (this._displayEl.style.display = this._isInputMode ? "none" : "flex", this._inputsWrapperEl.style.display = this._isInputMode ? "flex" : "none");
   }
   _enterInputMode() {
-    if (!this._isInputMode && (this._isInputMode = !0, this._displayEl && this._inputsWrapperEl && (this._displayEl.style.display = "none", this._inputsWrapperEl.style.display = "flex"), this._startPartInputs.length > 0)) {
+    if (!this._isInputMode && !(this.isReadonly() || this.isDisabled()) && (this._isInputMode = !0, this._displayEl && this._inputsWrapperEl && (this._displayEl.style.display = "none", this._inputsWrapperEl.style.display = "flex"), this._startPartInputs.length > 0)) {
       const e = this._startPartInputs[0];
       requestAnimationFrame(() => {
         e.focus();
@@ -3063,7 +3235,7 @@ class ee extends HTMLElement {
     this._removeFocusTrap();
     const e = this;
     this._focusTrapHandler = function(t) {
-      var c;
+      var o;
       if (t.key !== "Tab") return;
       if (!e._popover || !e._popover.hasAttribute("open")) {
         e._removeFocusTrap();
@@ -3072,7 +3244,7 @@ class ee extends HTMLElement {
       const i = e._getFocusableElements();
       if (i.length === 0) return;
       const s = i[0], r = i[i.length - 1], n = document.activeElement;
-      if (!(((c = e._calendarContainer) == null ? void 0 : c.contains(n)) || !1)) {
+      if (!(((o = e._calendarContainer) == null ? void 0 : o.contains(n)) || !1)) {
         t.preventDefault(), s.focus();
         return;
       }
@@ -3095,8 +3267,8 @@ class ee extends HTMLElement {
     this._focusTrapHandler && (document.removeEventListener("keydown", this._focusTrapHandler, !0), this._focusTrapHandler = null), this._escapeHandler && (document.removeEventListener("keydown", this._escapeHandler, !0), this._escapeHandler = null);
   }
 }
-customElements.get("mint-date-picker") || customElements.define("mint-date-picker", ee);
-class te extends HTMLElement {
+customElements.get("mint-date-picker") || customElements.define("mint-date-picker", te);
+class ie extends HTMLElement {
   constructor() {
     super(), this._select = null, this._wrapper = null, this._caretUpIcon = null, this._caretDownIcon = null, this._changeHandler = null;
   }
@@ -3191,45 +3363,45 @@ class te extends HTMLElement {
   }
   render() {
     const e = [];
-    this._select && Array.from(this._select.children).forEach((h) => {
-      (h.tagName === "OPTION" || h.tagName === "OPTGROUP") && e.push(h.cloneNode(!0));
+    this._select && Array.from(this._select.children).forEach((d) => {
+      (d.tagName === "OPTION" || d.tagName === "OPTGROUP") && e.push(d.cloneNode(!0));
     });
-    const t = Array.from(this.children).filter((h) => h.tagName === "OPTION" || h.tagName === "OPTGROUP").map((h) => h.cloneNode(!0));
+    const t = 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 i = this.getLabel(), s = this.getInfo(), r = this.getId(), n = this.getName(), a = this.getValue(), c = this.isDisabled(), l = this.isMultiple(), o = this.hasError();
+    const i = this.getLabel(), s = this.getInfo(), r = this.getId(), n = this.getName(), a = this.getValue(), o = this.isDisabled(), c = this.isMultiple(), h = this.hasError();
     if (i) {
-      const h = document.createElement("label");
-      h.className = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", r && h.setAttribute("for", r);
+      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 u = document.createTextNode(i);
-      h.appendChild(u), this.appendChild(h);
+      d.appendChild(u), 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(), r && (this._select.id = r), n && (this._select.name = n), c && (this._select.disabled = !0), l && (this._select.multiple = !0), a && (this._select.value = a), this._select.setAttribute("aria-invalid", o ? "true" : "false");
-    const d = e.length > 0 ? e : t;
-    if (d.length > 0 && d.forEach((h) => {
-      this._select.appendChild(h);
+    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), n && (this._select.name = n), o && (this._select.disabled = !0), c && (this._select.multiple = !0), a && (this._select.value = a), this._select.setAttribute("aria-invalid", h ? "true" : "false");
+    const l = e.length > 0 ? e : t;
+    if (l.length > 0 && l.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._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (h) => {
-      const b = h.target.value;
-      b ? this.setAttribute("value", b) : this.removeAttribute("value"), this.dispatchEvent(new CustomEvent("change", {
-        detail: { value: b },
+    if (this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (d) => {
+      const p = d.target.value;
+      p ? this.setAttribute("value", p) : this.removeAttribute("value"), this.dispatchEvent(new CustomEvent("change", {
+        detail: { value: p },
         bubbles: !0,
         cancelable: !0,
         composed: !0
       }));
-    }, this._select.addEventListener("change", this._changeHandler), this._wrapper.appendChild(this._select), l)
+    }, this._select.addEventListener("change", this._changeHandler), this._wrapper.appendChild(this._select), c)
       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 (s) {
-      const h = document.createElement("div");
-      h.className = "mt-1 text-xs text-gray-500 dark:text-gray-400", h.textContent = s, this.appendChild(h);
+      const d = document.createElement("div");
+      d.className = "mt-1 text-xs text-gray-500 dark:text-gray-400", d.textContent = s, this.appendChild(d);
     }
     this._renderErrorState();
   }
@@ -3239,8 +3411,8 @@ class te extends HTMLElement {
     e && t ? (i || (i = document.createElement("div"), i.className = "mint-select-error mt-1 text-xs text-red-600 dark:text-red-400", this.appendChild(i)), i.textContent = t) : i && i.remove();
   }
 }
-customElements.get("mint-select") || customElements.define("mint-select", te);
-class ie extends HTMLElement {
+customElements.get("mint-select") || customElements.define("mint-select", ie);
+class se extends HTMLElement {
   constructor() {
     super(), this._dropzone = null, this._fileInput = null, this._previewContainer = null, this._isDragging = !1, this._wasDragging = !1, this._isUpdatingFiles = !1, this._listenersInitialized = !1, this._selectedFiles = [], this._previewUrls = [], this._resetHandler = null;
   }
@@ -3293,18 +3465,18 @@ class ie extends HTMLElement {
     return this.hasAttribute("disabled");
   }
   render() {
-    const e = this.getLabel(), t = this.getAccept(), i = this.isMultiple(), s = this.isDisabled(), r = this.getWidth(), n = this.getHeight(), a = this.getName(), c = this.hasError(), l = this.getErrorMessage();
-    this._dropzone || (this._dropzone = document.createElement("div"), this.appendChild(this._dropzone)), this._updateDragStateClass(), this._dropzone.setAttribute("aria-invalid", c ? "true" : "false"), this._dropzone.style.width = r, this._dropzone.style.height = n, this._dropzone.style.minWidth = r, this._dropzone.style.minHeight = n, this._fileInput || (this._fileInput = document.createElement("input"), this._fileInput.type = "file", this._fileInput.style.display = "none", this._dropzone.appendChild(this._fileInput)), this._fileInput.accept = t, this._fileInput.multiple = i, this._fileInput.disabled = s, a ? this._fileInput.name = a : this._fileInput.removeAttribute("name"), this._fileInput.setAttribute("aria-invalid", c ? "true" : "false");
-    const o = this._dropzone.querySelector(".mint-dropzone-icon"), d = this._dropzone.querySelector(".mint-dropzone-label");
-    o && o.remove(), d && d.remove();
-    const h = document.createElement("div");
-    h.className = "mint-dropzone-icon flex items-center justify-center mt-2 mb-2 flex-shrink-0";
+    const e = this.getLabel(), t = this.getAccept(), i = this.isMultiple(), s = this.isDisabled(), r = this.getWidth(), n = this.getHeight(), a = this.getName(), o = this.hasError(), c = this.getErrorMessage();
+    this._dropzone || (this._dropzone = document.createElement("div"), this.appendChild(this._dropzone)), this._updateDragStateClass(), this._dropzone.setAttribute("aria-invalid", o ? "true" : "false"), s ? (this._dropzone.setAttribute("tabindex", "-1"), this._dropzone.removeAttribute("role")) : (this._dropzone.setAttribute("tabindex", "0"), this._dropzone.setAttribute("role", "button"), this._dropzone.setAttribute("aria-label", e || "File upload dropzone")), this._dropzone.style.width = r, this._dropzone.style.height = n, this._dropzone.style.minWidth = r, this._dropzone.style.minHeight = n, 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 = t, this._fileInput.multiple = i, this._fileInput.disabled = s, a ? this._fileInput.name = a : this._fileInput.removeAttribute("name"), this._fileInput.setAttribute("aria-invalid", o ? "true" : "false");
+    const h = this._dropzone.querySelector(".mint-dropzone-icon"), l = this._dropzone.querySelector(".mint-dropzone-label");
+    h && h.remove(), l && l.remove();
+    const d = document.createElement("div");
+    d.className = "mint-dropzone-icon flex items-center justify-center mt-2 mb-2 flex-shrink-0";
     const u = document.createElement("mint-icon");
-    if (u.setAttribute("name", "upload"), u.className = "w-12 h-12 text-gray-400 dark:text-gray-500", h.appendChild(u), this._dropzone.appendChild(h), e) {
-      const b = document.createElement("div");
-      b.className = "mint-dropzone-label text-sm font-medium text-gray-600 dark:text-gray-400 text-center px-4 flex-shrink-0", b.textContent = e, this._dropzone.appendChild(b);
+    if (u.setAttribute("name", "upload"), u.className = "w-12 h-12 text-gray-400 dark:text-gray-500", d.appendChild(u), this._dropzone.appendChild(d), e) {
+      const p = document.createElement("div");
+      p.className = "mint-dropzone-label text-sm font-medium text-gray-600 dark:text-gray-400 text-center px-4 flex-shrink-0", p.textContent = e, this._dropzone.appendChild(p);
     }
-    this.setupEventListeners(), this._renderErrorState(c, l), this._renderPreviews();
+    this.setupEventListeners(), this._renderErrorState(o, c), this._renderPreviews();
   }
   _updateDragState() {
     this._dropzone && this._updateDragStateClass();
@@ -3315,8 +3487,8 @@ class ie 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" : "", c = e ? "opacity-40 cursor-not-allowed" : "";
-    this._dropzone.className = `${r} ${t ? a : n} ${c}`.trim();
+    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" : "", o = e ? "opacity-40 cursor-not-allowed" : "", c = "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} ${o} ${c}`.trim();
   }
   setupEventListeners() {
     this._listenersInitialized || (this._listenersInitialized = !0, this.removeEventListeners(), !(!this._dropzone || !this._fileInput || this.isDisabled()) && (this._onDropzoneClick || (this._onDropzoneClick = (e) => {
@@ -3340,30 +3512,41 @@ class ie extends HTMLElement {
       t && t.length > 0 && this._handleFiles(t);
     }), this._onFileInputInput || (this._onFileInputInput = (e) => {
       e.stopImmediatePropagation(), e.stopPropagation();
+    }), this._onKeyDown || (this._onKeyDown = (e) => {
+      if (!(this.isDisabled() || !this._fileInput) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), e.isTrusted))
+        try {
+          this._fileInput.click();
+        } catch (t) {
+          console.debug("File chooser blocked:", t);
+        }
+    }), this._onFocus || (this._onFocus = (e) => {
+      this._dropzone && !this.isDisabled() && this._dropzone.classList.add("focus-visible:ring-2");
+    }), this._onBlur || (this._onBlur = (e) => {
+      this._dropzone;
     }), this._onFileInputChange || (this._onFileInputChange = (e) => {
       if (e.stopImmediatePropagation(), e.stopPropagation(), this._isUpdatingFiles)
         return;
       const i = e.target.files;
       if (i && i.length > 0) {
         const s = this.getAccept(), r = this.isMultiple(), n = [], a = [];
-        for (let c = 0; c < i.length; c++) {
-          const l = i[c];
-          this._isFileAccepted(l, s) ? n.push(l) : a.push(l);
+        for (let o = 0; o < i.length; o++) {
+          const c = i[o];
+          this._isFileAccepted(c, s) ? n.push(c) : a.push(c);
         }
         if (!r && n.length > 1 && (a.push(...n.slice(1)), n.splice(1)), a.length > 0) {
-          const c = new CustomEvent("dropRejected", {
+          const o = new CustomEvent("dropRejected", {
             detail: { files: a, reason: "File type not accepted or multiple files not allowed" },
             bubbles: !0,
             cancelable: !0
           });
-          this.dispatchEvent(c);
+          this.dispatchEvent(o);
         }
         n.length > 0 && this._applyValidFiles(n);
       }
-    }), 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._fileInput.addEventListener("change", this._onFileInputChange), this._fileInput.addEventListener("input", this._onFileInputInput, !0)));
+    }), 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)));
   }
   removeEventListeners() {
-    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._fileInput && (this._onFileInputChange && this._fileInput.removeEventListener("change", this._onFileInputChange), this._onFileInputInput && this._fileInput.removeEventListener("input", this._onFileInputInput, !0)), this._isDragging = !1, this._listenersInitialized = !1;
+    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 = [];
@@ -3446,25 +3629,25 @@ class ie 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((l, o) => {
-      const d = document.createElement("div");
-      if (d.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", l.type.startsWith("image/")) {
-        const f = document.createElement("img");
-        f.className = "w-12 h-12 object-cover rounded border border-gray-200 dark:border-gray-700";
-        const _ = URL.createObjectURL(l);
-        this._previewUrls.push(_), f.src = _, d.appendChild(f);
+    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((c, h) => {
+      const l = document.createElement("div");
+      if (l.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", c.type.startsWith("image/")) {
+        const m = document.createElement("img");
+        m.className = "w-12 h-12 object-cover rounded border border-gray-200 dark:border-gray-700";
+        const g = URL.createObjectURL(c);
+        this._previewUrls.push(g), m.src = g, l.appendChild(m);
       } else {
-        const f = document.createElement("mint-icon");
-        f.setAttribute("name", "attach"), f.className = "w-5 h-5 text-gray-500 dark:text-gray-300", d.appendChild(f);
+        const m = document.createElement("mint-icon");
+        m.setAttribute("name", "attach"), m.className = "w-5 h-5 text-gray-500 dark:text-gray-300", l.appendChild(m);
       }
-      const h = document.createElement("div");
-      h.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", h.textContent = l.name, d.appendChild(h);
+      const d = document.createElement("div");
+      d.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", d.textContent = c.name, l.appendChild(d);
       const u = document.createElement("button");
       u.type = "button", u.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 b = document.createElement("mint-icon");
-      b.setAttribute("name", "close"), b.className = "w-4 h-4", u.appendChild(b), u.addEventListener("click", (f) => {
-        f.preventDefault(), f.stopPropagation(), this._removeFileAt(o);
-      }), d.appendChild(u), t.appendChild(d);
+      const p = document.createElement("mint-icon");
+      p.setAttribute("name", "close"), p.className = "w-4 h-4", u.appendChild(p), u.addEventListener("click", (m) => {
+        m.preventDefault(), m.stopPropagation(), this._removeFileAt(h);
+      }), l.appendChild(u), t.appendChild(l);
     });
     const i = this.hasError(), s = this._isDragging;
     let r = "from-white dark:from-gray-700";
@@ -3473,11 +3656,11 @@ class ie extends HTMLElement {
     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);
     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);
-    const c = () => {
-      const l = t.scrollTop, o = t.scrollHeight, d = t.clientHeight;
-      l > 0 ? n.style.opacity = "1" : n.style.opacity = "0", l + d < o - 1 ? a.style.opacity = "1" : a.style.opacity = "0";
+    const o = () => {
+      const c = t.scrollTop, h = t.scrollHeight, l = t.clientHeight;
+      c > 0 ? n.style.opacity = "1" : n.style.opacity = "0", c + l < h - 1 ? a.style.opacity = "1" : a.style.opacity = "0";
     };
-    c(), t.addEventListener("scroll", c), e.appendChild(t), this._previewContainer = e, this._dropzone.appendChild(e), this._updateDragStateClass();
+    o(), t.addEventListener("scroll", o), e.appendChild(t), this._previewContainer = e, this._dropzone.appendChild(e), this._updateDragStateClass();
   }
   _removeFileAt(e) {
     if (e < 0 || e >= this._selectedFiles.length) return;
@@ -3507,16 +3690,25 @@ class ie extends HTMLElement {
     );
   }
 }
-customElements.get("mint-dropzone") || customElements.define("mint-dropzone", ie);
-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;
+    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;
   }
   static get observedAttributes() {
-    return ["action", "method", "enctype"];
+    return ["action", "method", "enctype", "data-form-data"];
   }
   connectedCallback() {
-    this._render(), this._setupBlurValidation();
+    this._render(), this._setupBlurValidation(), requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (this._formData)
+          this._applyFormData();
+        else {
+          const e = this.getAttribute("data-form-data");
+          e && (this._parseFormData(e), this._applyFormData());
+        }
+      });
+    });
   }
   disconnectedCallback() {
     this._form && this._submitHandler && this._form.removeEventListener("submit", this._submitHandler, !0), this._hostSubmitHandler && this.removeEventListener("submit", this._hostSubmitHandler), this._cleanupBlurValidation();
@@ -3528,7 +3720,24 @@ class se extends HTMLElement {
     this._clearErrors(), this._form && this._form.reset(), this._resetCustomFields();
   }
   attributeChangedCallback(e, t, i) {
-    this._applyFormAttributes();
+    e === "form-data" ? (this._parseFormData(i), this.isConnected && this._form && requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this._applyFormData();
+      });
+    })) : this._applyFormAttributes();
+  }
+  // Property getter/setter for reactive data binding (Vue :data)
+  get data() {
+    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(() => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          this._applyFormData();
+        });
+      });
+    });
   }
   _render() {
     if (this.classList.add("block", "w-full"), !this._form) {
@@ -3585,76 +3794,86 @@ class se extends HTMLElement {
     const i = this.getAttribute("action"), s = (this.getAttribute("method") || "POST").toUpperCase(), r = 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((o) => o instanceof File);
+    const n = Array.from(e.values()).some((h) => h instanceof File);
     let a = null;
-    const c = {};
-    let l = i;
+    const o = {};
+    let c = i;
     if (s === "GET") {
-      const o = new URLSearchParams();
-      e.forEach((d, h) => {
-        d instanceof File || o.append(h, String(d));
-      }), l += (i.includes("?") ? "&" : "?") + o.toString();
+      const h = new URLSearchParams();
+      e.forEach((l, d) => {
+        l instanceof File || h.append(d, String(l));
+      }), c += (i.includes("?") ? "&" : "?") + h.toString();
     } else if (r === "multipart/form-data" || n)
       a = e;
     else if (r === "application/json")
-      a = JSON.stringify(t), c["Content-Type"] = "application/json";
+      a = JSON.stringify(t), o["Content-Type"] = "application/json";
     else {
-      const o = new URLSearchParams();
-      e.forEach((d, h) => {
-        d instanceof File || o.append(h, String(d));
-      }), a = o, c["Content-Type"] = "application/x-www-form-urlencoded";
+      const h = new URLSearchParams();
+      e.forEach((l, d) => {
+        l instanceof File || h.append(d, String(l));
+      }), a = h, o["Content-Type"] = "application/x-www-form-urlencoded";
     }
     if (typeof fetch == "function") {
-      const o = await fetch(l, {
+      const h = await fetch(c, {
         method: s,
         body: s === "GET" ? null : a,
-        headers: c
-      }), d = await o.text().catch(() => "");
-      let h = d;
+        headers: o
+      }), l = await h.text().catch(() => "");
+      let d = l;
       try {
-        h = JSON.parse(d);
+        d = JSON.parse(l);
       } catch {
       }
-      if (!o.ok)
-        throw { status: o.status, data: h };
-      return { status: o.status, ok: o.ok, data: h };
-    }
-    return await new Promise((o, d) => {
-      const h = new XMLHttpRequest();
-      h.open(s, l, !0), Object.entries(c).forEach(([u, b]) => h.setRequestHeader(u, b)), h.onload = function() {
-        const { status: u, responseText: b } = h;
+      if (!h.ok)
+        throw { status: h.status, data: d };
+      return { status: h.status, ok: h.ok, data: d };
+    }
+    return await new Promise((h, l) => {
+      const d = new XMLHttpRequest();
+      d.open(s, c, !0), Object.entries(o).forEach(([u, p]) => d.setRequestHeader(u, p)), d.onload = function() {
+        const { status: u, responseText: p } = d;
         if (u >= 200 && u < 300) {
-          let f = b;
+          let m = p;
           try {
-            f = JSON.parse(b);
+            m = JSON.parse(p);
           } catch {
           }
-          o({ status: u, ok: !0, data: f });
+          h({ status: u, ok: !0, data: m });
         } else
-          d({ status: u, data: b });
-      }, h.onerror = function() {
-        d({ status: h.status, data: h.responseText });
-      }, h.send(s === "GET" ? null : a);
+          l({ status: u, data: p });
+      }, d.onerror = function() {
+        l({ status: d.status, data: d.responseText });
+      }, d.send(s === "GET" ? null : a);
     });
   }
   _formDataToValues(e) {
     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((s) => {
-      const r = s.getAttribute("name");
-      if (r && typeof s.files < "u" && s.files) {
-        const n = s.files;
-        if (n.length > 0) {
-          const a = Array.from(n);
-          t[r] && Array.isArray(t[r]) ? a.forEach((c) => {
-            t[r].some(
-              (o) => o.name === c.name && o.size === c.size && o.lastModified === c.lastModified
-            ) || t[r].push(c);
-          }) : t[r] = a;
+    }), this._form && (Array.from(this._form.querySelectorAll("mint-dropzone[name]")).forEach((r) => {
+      const n = r.getAttribute("name");
+      if (n && typeof r.files < "u" && r.files) {
+        const a = r.files;
+        if (a.length > 0) {
+          const o = Array.from(a);
+          t[n] && Array.isArray(t[n]) ? o.forEach((c) => {
+            t[n].some(
+              (l) => l.name === c.name && l.size === c.size && l.lastModified === c.lastModified
+            ) || t[n].push(c);
+          }) : t[n] = o;
         }
       }
-    }), t;
+    }), Array.from(this._form.querySelectorAll("mint-tags[name]")).forEach((r) => {
+      const n = r.getAttribute("name");
+      if (n) {
+        let a = [];
+        if (typeof r.tags < "u" ? a = r.tags : typeof r.getTags == "function" && (a = r.getTags()), Array.isArray(a) && a.length > 0) {
+          const o = a.map((c) => typeof c == "string" ? c : (c == null ? void 0 : c.value) || (c == null ? void 0 : c.label) || "").filter((c) => c.trim() !== "");
+          t[n] = o;
+        } else
+          t[n] = [];
+      }
+    })), t;
   }
   _collectValidationRules() {
     const e = {};
@@ -3678,8 +3897,8 @@ class se 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), c = this._extractFieldValue(a), l = this._validateRules(c, n);
-      l ? (i = !1, this._errors[s] = l, this._flagFieldError(a, l)) : this._clearFieldError(a);
+      const n = Array.isArray(r) ? r : [r], a = this._getFieldElements(s), o = this._extractFieldValue(a), c = this._validateRules(o, n);
+      c ? (i = !1, this._errors[s] = c, this._flagFieldError(a, c)) : this._clearFieldError(a);
     }), i;
   }
   _validateField(e) {
@@ -3734,13 +3953,23 @@ class se extends HTMLElement {
   }
   _getFieldElements(e) {
     if (!this._form) return [];
-    const t = Array.from(this._form.querySelectorAll(`[name="${e}"]`)), i = t.filter((s) => s.tagName === "MINT-SELECT");
+    const t = Array.from(this._form.querySelectorAll(`[name="${e}"]`)), i = t.filter((n) => n.tagName === "MINT-SELECT");
     if (i.length > 0) {
-      const s = [];
-      return i.forEach((r) => {
-        const n = r.querySelector('select[name="' + e + '"]');
-        n && s.push(n);
-      }), t.filter((r) => r.tagName !== "MINT-SELECT").concat(s);
+      const n = [];
+      return i.forEach((a) => {
+        const o = a.querySelector('select[name="' + e + '"]');
+        o && n.push(o);
+      }), t.filter((a) => a.tagName !== "MINT-SELECT").concat(n);
+    }
+    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) => {
+        const o = a.closest("mint-tags");
+        o && !n.includes(o) && n.push(o);
+      }), t.filter((a) => a.tagName !== "INPUT" || !a.closest("mint-tags")).concat(n);
     }
     return t;
   }
@@ -3750,11 +3979,29 @@ class se extends HTMLElement {
     if (t)
       return t.value;
     if (e.length > 1) {
-      const s = e.filter((n) => n instanceof HTMLInputElement), r = s.filter((n) => n.checked);
-      if (s.every((n) => n.type === "radio"))
-        return r.length > 0 ? r[0].value || "on" : "";
-      if (s.every((n) => n.type === "checkbox"))
-        return r.map((n) => n.value || "on");
+      const s = e.filter((a) => a instanceof HTMLInputElement);
+      if (s.length > 0 && s.length === e.length) {
+        const a = s.filter((o) => o.checked);
+        if (s.every((o) => o.type === "radio"))
+          return a.length > 0 ? a[0].value || "on" : "";
+        if (s.every((o) => o.type === "checkbox"))
+          return a.map((o) => o.value || "on");
+      }
+      const r = e.filter((a) => a.tagName === "MINT-CHOICE");
+      if (r.length > 0 && r.length === e.length) {
+        const a = r.find((o) => typeof o.getValue == "function" ? o.getValue() !== "" : o.querySelector("mint-choice-option[checked]") !== null);
+        if (a) {
+          if (typeof a.getValue == "function")
+            return a.getValue();
+          const o = a.querySelector("mint-choice-option[checked]");
+          if (o)
+            return o.getAttribute("value") || "";
+        }
+        return "";
+      }
+      const n = e.filter((a) => a.tagName === "MINT-CHECKBOX");
+      if (n.length > 0 && n.length === e.length)
+        return n.filter((o) => typeof o.checked < "u" ? o.checked : o.hasAttribute("checked")).map((o) => o.getAttribute("value") || "on");
     }
     const i = e[0];
     if (i instanceof HTMLInputElement)
@@ -3773,7 +4020,13 @@ class se extends HTMLElement {
       const r = i.getAttribute("value");
       return r || "";
     }
-    return i.tagName === "MINT-DROPZONE" && typeof i.files < "u" ? i.files : typeof i.value < "u" ? i.value : i.getAttribute("value") || "";
+    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 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") || "";
   }
   _flagFieldError(e, t) {
     e.length !== 0 && e.forEach((i) => {
@@ -3797,8 +4050,70 @@ class se extends HTMLElement {
       e.removeAttribute("aria-invalid");
     });
   }
+  _parseFormData(e) {
+    if (!e) {
+      this._formData = null;
+      return;
+    }
+    if (typeof e == "object" && !Array.isArray(e)) {
+      this._formData = e;
+      return;
+    }
+    if (typeof e == "string")
+      try {
+        this._formData = JSON.parse(e);
+      } catch {
+        this._formData = null;
+      }
+    else
+      this._formData = null;
+  }
+  _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) {
+          setTimeout(() => {
+            const r = this._getFieldElements(t);
+            r.length > 0 && this._applyValueToField(r, t, i);
+          }, 300);
+          return;
+        }
+        this._applyValueToField(s, t, i);
+      });
+    };
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        e();
+      });
+    });
+  }
+  _applyValueToField(e, t, i) {
+    e.forEach((s) => {
+      const r = s.tagName;
+      try {
+        if (r === "MINT-INPUT")
+          typeof s.value < "u" && (s.value = i || "");
+        else if (r === "MINT-DATE-PICKER")
+          typeof s.setValue == "function" && s.setValue(i || "");
+        else if (r === "MINT-SELECT")
+          typeof s.setValue == "function" && s.setValue(i || "");
+        else if (r === "MINT-CHOICE")
+          typeof s.setValue == "function" ? s.setValue(i || "") : s.querySelectorAll("mint-choice-option").forEach((a) => {
+            a.checked = a.getAttribute("value") === i;
+          });
+        else if (r === "MINT-CHECKBOX" || r === "MINT-SWITCH") {
+          const n = i === !0 || i === "true" || i === "on" || i === 1 || i === "1";
+          typeof s.checked < "u" ? s.checked = n : n ? s.setAttribute("checked", "") : s.removeAttribute("checked");
+        } else r === "MINT-TAGS" ? Array.isArray(i) && typeof s.tags < "u" && (s.tags = i.map((n) => typeof n == "string" ? { value: n, label: n, dismissable: !0 } : n)) : 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 (n) {
+        console.warn(`Failed to set value for field ${t}:`, n);
+      }
+    });
+  }
   _resetCustomFields() {
-    this.querySelectorAll("mint-input, mint-date-picker, mint-select, mint-dropzone, mint-checkbox, mint-choice, mint-switch").forEach((t) => {
+    this.querySelectorAll("mint-input, mint-date-picker, mint-select, mint-dropzone, mint-checkbox, mint-choice, mint-switch, mint-tags").forEach((t) => {
       var s, r;
       t.removeAttribute("error"), t.removeAttribute("error-message");
       const i = t.tagName;
@@ -3820,17 +4135,37 @@ class se extends HTMLElement {
       else if (i === "MINT-DROPZONE") {
         const n = t.querySelector('input[type="file"]');
         n && (n.value = "");
-      } else if (i === "MINT-CHECKBOX" || i === "MINT-CHOICE") {
-        const n = t.querySelector('input[type="checkbox"], input[type="radio"]');
-        n && (n.checked = !1);
-      } else if (i === "MINT-SWITCH") {
-        const n = t.querySelector('input[type="checkbox"]');
-        n && (n.checked = !1);
-      }
+      } 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);
+          }
+        } catch {
+        }
+      else if (i === "MINT-CHOICE")
+        try {
+          typeof t.setValue == "function" ? t.setValue("") : t.querySelectorAll("mint-choice-option").forEach((a) => {
+            a.checked = !1;
+          });
+        } catch {
+        }
+      else if (i === "MINT-TAGS")
+        try {
+          t.tags = [];
+        } catch {
+        }
     });
   }
   _resolveHost(e) {
-    const t = e.closest("mint-input, mint-date-picker, mint-select, mint-dropzone, mint-checkbox, mint-choice, mint-switch");
+    if (e.tagName === "MINT-CHOICE-OPTION") {
+      const i = e.closest("mint-choice");
+      if (i) return i;
+    }
+    const t = e.closest("mint-input, mint-date-picker, mint-select, mint-dropzone, mint-checkbox, mint-choice, mint-switch, mint-tags");
     return t || e;
   }
   _setupBlurValidation() {
@@ -3842,8 +4177,8 @@ class se extends HTMLElement {
       if (!r) return;
       const n = this._getFieldName(r);
       if (!n || !this._collectValidationRules()[n]) return;
-      const c = this._extractFieldValue([r]), l = c != null && (typeof c == "string" ? c.trim() !== "" : c instanceof FileList || Array.isArray(c) ? c.length > 0 : !0), o = r.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && (s.hasAttribute("aria-invalid") || s.closest("[data-mint-form-error]"));
-      (l || o) && setTimeout(() => {
+      const o = this._extractFieldValue([r]), c = o != null && (typeof o == "string" ? o.trim() !== "" : o instanceof FileList || Array.isArray(o) ? o.length > 0 : !0), h = r.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && (s.hasAttribute("aria-invalid") || s.closest("[data-mint-form-error]")), l = !!r.closest("mint-tags"), d = 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")), u = r.tagName === "MINT-DATE-PICKER" || s instanceof HTMLElement && s.closest("mint-date-picker");
+      (c || h || l || d || u) && setTimeout(() => {
         this._validateField(n);
       }, 0);
     };
@@ -3851,29 +4186,55 @@ class se extends HTMLElement {
     const t = (i) => {
       const s = i.target;
       if (!s) return;
+      if (i.type === "tags-change" && s.tagName === "MINT-TAGS") {
+        const h = s, l = this._getFieldName(h);
+        if (!l || !this._collectValidationRules()[l]) return;
+        setTimeout(() => {
+          this._validateField(l);
+        }, 0);
+        return;
+      }
       if (s instanceof HTMLSelectElement || s.tagName === "MINT-SELECT" || s.closest("mint-select")) {
-        const l = this._findFieldElement(s);
-        if (!l) return;
-        const o = this._getFieldName(l);
-        if (!o || !this._collectValidationRules()[o]) return;
+        const h = this._findFieldElement(s);
+        if (!h) return;
+        const l = this._getFieldName(h);
+        if (!l || !this._collectValidationRules()[l]) return;
+        setTimeout(() => {
+          this._validateField(l);
+        }, 0);
+        return;
+      }
+      if (i.type === "choice-change" && s.tagName === "MINT-CHOICE") {
+        const h = s, l = this._getFieldName(h);
+        if (!l || !this._collectValidationRules()[l]) return;
         setTimeout(() => {
-          this._validateField(o);
+          this._validateField(l);
         }, 0);
         return;
       }
-      const n = this._findFieldElement(s);
-      if (!n) return;
-      const a = this._getFieldName(n);
-      !a || !this._collectValidationRules()[a] || (n.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && s.hasAttribute("aria-invalid")) && setTimeout(() => {
-        this._validateField(a);
+      if (s instanceof HTMLInputElement && s.type === "checkbox" || s.tagName === "MINT-CHECKBOX" || s.tagName === "MINT-SWITCH" || s.closest("mint-checkbox, mint-switch")) {
+        const h = this._findFieldElement(s);
+        if (!h) return;
+        const l = this._getFieldName(h);
+        if (!l || !this._collectValidationRules()[l]) return;
+        setTimeout(() => {
+          this._validateField(l);
+        }, 0);
+        return;
+      }
+      const a = this._findFieldElement(s);
+      if (!a) return;
+      const o = this._getFieldName(a);
+      !o || !this._collectValidationRules()[o] || (a.hasAttribute("data-mint-form-error") || s instanceof HTMLElement && s.hasAttribute("aria-invalid")) && setTimeout(() => {
+        this._validateField(o);
       }, 0);
     };
-    this._form.addEventListener("change", t, !0), this._fieldChangeHandlers.set(this._form, t);
+    this._form.addEventListener("change", t, !0), this._form.addEventListener("tags-change", t, !0), this._form.addEventListener("choice-change", t, !0), this._fieldChangeHandlers.set(this._form, t);
   }
   _findFieldElement(e) {
     if (e.hasAttribute("name") && (e.tagName.startsWith("MINT-") || e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement))
       return e;
-    const t = e.closest("mint-input, mint-date-picker, mint-select, mint-dropzone, mint-checkbox, mint-choice, mint-switch");
+    const t = e.closest("mint-input, mint-date-picker, mint-select, mint-dropzone, mint-checkbox, mint-choice, mint-switch, mint-tags");
     if (t && t.hasAttribute("name"))
       return t;
     if ((e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) && e.hasAttribute("name"))
@@ -3896,7 +4257,7 @@ class se extends HTMLElement {
     }
     if (this._form && this._fieldChangeHandlers.has(this._form)) {
       const e = this._fieldChangeHandlers.get(this._form);
-      e && this._form.removeEventListener("change", e, !0), this._fieldChangeHandlers.delete(this._form);
+      e && (this._form.removeEventListener("change", e, !0), this._form.removeEventListener("tags-change", e, !0), this._form.removeEventListener("choice-change", e, !0)), this._fieldChangeHandlers.delete(this._form);
     }
     this._observer && (this._observer.disconnect(), this._observer = null);
   }
@@ -3907,93 +4268,789 @@ class se extends HTMLElement {
     });
   }
 }
-customElements.get("mint-form") || customElements.define("mint-form", se);
-class re extends HTMLElement {
+customElements.get("mint-form") || customElements.define("mint-form", re);
+class ne extends HTMLElement {
   constructor() {
-    super(), this._observer = null, this._hoverHandlers = /* @__PURE__ */ new Map();
+    super(...arguments), this._observer = null;
   }
   static get observedAttributes() {
-    return ["striped", "hover", "bordered", "compact"];
+    return ["collapse", "scroll"];
   }
   connectedCallback() {
-    this.style.display = "block", this.style.width = "100%", this.style.overflowX = "auto", this._observeChanges(), this._applyStyles(), requestAnimationFrame(() => {
-      this._applyStyles(), setTimeout(() => this._applyStyles(), 0), setTimeout(() => this._applyStyles(), 50), setTimeout(() => this._applyStyles(), 100), setTimeout(() => this._applyStyles(), 200);
+    this.classList.add(
+      "box-border",
+      "m-0",
+      "p-0",
+      "align-baseline",
+      "block",
+      "w-full",
+      "overflow-x-auto",
+      "border",
+      "border-gray-200",
+      "rounded-lg",
+      "dark:border-gray-700"
+    ), this.hasAttribute("collapse") && !this.hasAttribute("scroll") && this._ensureResponsiveStyles(), this._observeChanges(), this._applyStyles(), requestAnimationFrame(() => {
+      this._applyStyles(), setTimeout(() => this._applyStyles(), 0);
     });
   }
   disconnectedCallback() {
-    this._observer && (this._observer.disconnect(), this._observer = null), this._hoverHandlers.forEach((e, t) => {
-      t.removeEventListener("mouseenter", e.enter), t.removeEventListener("mouseleave", e.leave);
-    }), this._hoverHandlers.clear();
+    this._observer && (this._observer.disconnect(), this._observer = null);
   }
   attributeChangedCallback() {
-    this._applyStyles();
+    this.hasAttribute("collapse") && !this.hasAttribute("scroll") && this._ensureResponsiveStyles(), this._applyStyles();
   }
   _observeChanges() {
-    this._observer = new MutationObserver(() => {
-      this._applyStyles();
-    }), this._observer.observe(this, {
+    this._observer = new MutationObserver(() => this._applyStyles()), this._observer.observe(this, {
       childList: !0,
       subtree: !0,
       attributes: !1
     });
   }
   _applyStyles() {
+    this._observer && this._observer.disconnect();
     const e = this.querySelector("table");
-    if (!e) return;
-    const t = this.hasAttribute("bordered"), i = this.hasAttribute("striped"), s = this.hasAttribute("hover"), r = this.hasAttribute("compact");
-    e.style.width = "100%", e.style.borderCollapse = "collapse", e.style.fontSize = "0.875rem", e.style.fontWeight = "500";
+    if (!e) {
+      this._observer && this._observeChanges();
+      return;
+    }
+    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((h) => s.push((h.textContent || "").trim())), this._setClasses(e, [
+      "w-full",
+      i ? "min-w-[1200px]" : "",
+      "border-collapse",
+      "text-sm",
+      "font-medium",
+      "rounded-lg",
+      "border-2",
+      "border-gray-200",
+      "dark:border-gray-700",
+      "overflow-hidden"
+    ]);
     const n = e.querySelector("thead");
-    n && (n.style.backgroundColor = "rgb(249 250 251)", document.documentElement.classList.contains("dark") && (n.style.backgroundColor = "rgb(31 41 55)"), n.querySelectorAll("th").forEach((o) => {
-      o.style.textAlign = "left", o.style.fontWeight = "600", o.style.color = "rgb(17 24 39)", document.documentElement.classList.contains("dark") && (o.style.color = "rgb(255 255 255)"), o.style.textTransform = "uppercase", o.style.letterSpacing = "0.05em", o.style.fontSize = "0.75rem", t && (o.style.border = "1px solid rgb(229 231 235)", document.documentElement.classList.contains("dark") && (o.style.borderColor = "rgb(55 65 81)")), r ? o.style.padding = "0.375rem 0.75rem" : o.style.padding = "0.75rem 1rem";
+    n && (this._setClasses(n, [
+      "bg-[#F7F7F7]",
+      "dark:bg-gray-800"
+    ]), n.querySelectorAll("th").forEach((h) => {
+      this._setClasses(h, [
+        "text-left",
+        "font-semibold",
+        "text-gray-900",
+        "dark:text-white",
+        "px-3",
+        "py-2",
+        "border-b",
+        "border-gray-200",
+        "dark:border-gray-700"
+      ]);
     }));
     const a = e.querySelector("tbody");
-    a && (i && (a.style.borderTopWidth = "1px", a.style.borderTopStyle = "solid", a.style.borderTopColor = "rgb(229 231 235)", document.documentElement.classList.contains("dark") && (a.style.borderTopColor = "rgb(55 65 81)")), a.querySelectorAll("tr").forEach((o, d) => {
-      if (t && (o.style.borderBottomWidth = "1px", o.style.borderBottomStyle = "solid", o.style.borderBottomColor = "rgb(229 231 235)", document.documentElement.classList.contains("dark") && (o.style.borderBottomColor = "rgb(55 65 81)")), i ? d % 2 === 0 ? (o.style.backgroundColor = "rgb(255 255 255)", document.documentElement.classList.contains("dark") && (o.style.backgroundColor = "rgb(17 24 39)")) : (o.style.backgroundColor = "rgb(249 250 251)", document.documentElement.classList.contains("dark") && (o.style.backgroundColor = "rgb(31 41 55)")) : (o.style.backgroundColor = "rgb(255 255 255)", document.documentElement.classList.contains("dark") && (o.style.backgroundColor = "rgb(17 24 39)")), s) {
-        o.style.transition = "background-color 150ms";
-        const u = this._hoverHandlers.get(o);
-        u && (o.removeEventListener("mouseenter", u.enter), o.removeEventListener("mouseleave", u.leave));
-        const b = () => {
-          o.style.backgroundColor = "rgb(243 244 246)", document.documentElement.classList.contains("dark") && (o.style.backgroundColor = "rgb(31 41 55)");
-        }, f = () => {
-          i ? d % 2 === 0 ? (o.style.backgroundColor = "rgb(255 255 255)", document.documentElement.classList.contains("dark") && (o.style.backgroundColor = "rgb(17 24 39)")) : (o.style.backgroundColor = "rgb(249 250 251)", document.documentElement.classList.contains("dark") && (o.style.backgroundColor = "rgb(31 41 55)")) : (o.style.backgroundColor = "rgb(255 255 255)", document.documentElement.classList.contains("dark") && (o.style.backgroundColor = "rgb(17 24 39)"));
-        };
-        this._hoverHandlers.set(o, { enter: b, leave: f }), o.addEventListener("mouseenter", b), o.addEventListener("mouseleave", f);
-      } else {
-        const u = this._hoverHandlers.get(o);
-        u && (o.removeEventListener("mouseenter", u.enter), o.removeEventListener("mouseleave", u.leave), this._hoverHandlers.delete(o));
-      }
-      o.querySelectorAll("td").forEach((u) => {
-        u.style.color = "rgb(17 24 39)", document.documentElement.classList.contains("dark") && (u.style.color = "rgb(243 244 246)"), t && (u.style.border = "1px solid rgb(229 231 235)", document.documentElement.classList.contains("dark") && (u.style.borderColor = "rgb(55 65 81)")), r ? u.style.padding = "0.375rem 0.75rem" : u.style.padding = "0.75rem 1rem";
+    if (a) {
+      const c = Array.from(a.querySelectorAll("tr"));
+      c.forEach((h, l) => {
+        this._setClasses(h, [
+          "bg-white",
+          "dark:bg-gray-900",
+          "border-b",
+          "border-gray-200",
+          "dark:border-gray-700"
+        ]), l === c.length - 1 && h.classList.remove("border-b"), h.querySelectorAll("td").forEach((u) => {
+          this._setClasses(u, [
+            "text-gray-900",
+            "dark:text-gray-100",
+            "px-3",
+            "py-2"
+          ]), t ? this._applyMobileCell(u, s) : this._restoreCell(u);
+        });
       });
+    }
+    const o = e.querySelector("tfoot");
+    o && (this._setClasses(o, [
+      "bg-[#F7F7F7]",
+      "dark:bg-gray-800",
+      "font-semibold"
+    ]), o.querySelectorAll("td").forEach((h) => {
+      this._setClasses(h, [
+        "text-gray-900",
+        "dark:text-gray-100",
+        "px-3",
+        "py-2",
+        "border-t",
+        "border-gray-200",
+        "dark:border-gray-700"
+      ]), 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 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);
+  }
+  _restoreCell(e) {
+    if (e.dataset.mtProcessed !== "true") return;
+    const t = e.getAttribute("data-original") || "";
+    e.dataset.mtProcessed = "", e.innerHTML = t;
+  }
+  _setClasses(e, t) {
+    e.className = "", t.filter(Boolean).forEach((i) => e.classList.add(...i.split(" ")));
+  }
+  _ensureResponsiveStyles() {
+    if (document.getElementById("mint-table-responsive-style")) return;
+    const e = document.createElement("style");
+    e.id = "mint-table-responsive-style", e.textContent = `
+@media (max-width: 640px) {
+  mint-table[collapse] {
+    display: block;
+  }
+  mint-table[collapse] table {
+    display: block;
+    width: 100%;
+    border-collapse: collapse;
+  }
+  mint-table[collapse] thead {
+    display: none;
+  }
+  mint-table[collapse] tbody {
+    display: block;
+    width: 100%;
+  }
+  mint-table[collapse] tr {
+    display: block;
+    width: 100%;
+    border-bottom: 1px solid #e5e7eb;
+    padding: 0.5rem 0;
+  }
+  mint-table[collapse] tr:last-child {
+    border-bottom: none;
+  }
+  mint-table[collapse] td,
+  mint-table[collapse] th {
+    display: flex;
+    width: 100%;
+    padding-top: 0.3rem !important;
+    padding-bottom: 0.3rem !important;
+    border: none;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+  mint-table[collapse] td .mt-label {
+    display: inline-flex;
+    flex: 1 1 50%;
+    margin: 0;
+  }
+  mint-table[collapse] td .mt-value {
+    display: inline-flex;
+    flex: 1 1 50%;
+    text-align: left;
+  }
+
+  /* Keep footer in normal table layout */
+  mint-table[collapse] tfoot {
+    display: table-footer-group;
+  }
+  mint-table[collapse] tfoot tr {
+    display: table-row;
+    border: none;
+    padding: 0;
+  }
+  mint-table[collapse] tfoot td {
+    display: table-cell;
+    padding: 0.5rem 0.75rem;
+    border: inherit;
+  }
+}
+    `, document.head.appendChild(e);
+  }
+}
+customElements.get("mint-table") || customElements.define("mint-table", ne);
+class ae extends HTMLElement {
+  constructor() {
+    super(...arguments), this._root = null, this._textWrap = null, this._dismissBtn = null, this._clickHandler = null;
+  }
+  static get observedAttributes() {
+    return ["dismissable"];
+  }
+  connectedCallback() {
+    this._render();
+  }
+  disconnectedCallback() {
+    this._dismissBtn && this._clickHandler && this._dismissBtn.removeEventListener("click", this._clickHandler);
+  }
+  attributeChangedCallback() {
+    this._render();
+  }
+  _render() {
+    var t;
+    if (this.classList.add(
+      "inline-flex",
+      "items-center",
+      "gap-2",
+      "px-3",
+      "py-1",
+      "rounded-full",
+      "border",
+      "border-gray-200",
+      "dark:border-gray-700",
+      "bg-gray-100",
+      "dark:bg-gray-800",
+      "text-gray-900",
+      "dark:text-gray-100",
+      "text-sm",
+      "font-medium"
+    ), !this._root) {
+      for (this._root = document.createElement("div"), this._root.className = "flex items-center gap-2 w-full", this._textWrap = document.createElement("span"), this._textWrap.className = "inline-flex items-center min-w-[0.5rem]", this._textWrap.setAttribute("data-mt-chip-text", ""); this.firstChild; ) {
+        const i = this.firstChild;
+        if (i === this._root) break;
+        this._textWrap.appendChild(i);
+      }
+      this._root.appendChild(this._textWrap), this.appendChild(this._root);
+    }
+    this.hasAttribute("dismissable") ? (this._dismissBtn || this._createDismissBtn(), this._dismissBtn && !this._dismissBtn.isConnected && ((t = this._root) == null || t.appendChild(this._dismissBtn))) : this._dismissBtn && this._dismissBtn.parentElement === this._root && this._dismissBtn.remove();
+  }
+  _createDismissBtn() {
+    const e = document.createElement("button");
+    e.type = "button", e.setAttribute("aria-label", "Dismiss"), e.className = [
+      "shrink-0",
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "w-5",
+      "h-5",
+      "rounded-full",
+      "text-gray-500",
+      "dark:text-gray-300",
+      "hover:text-gray-700",
+      "dark:hover:text-gray-100",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-offset-1",
+      "focus-visible:ring-gray-400",
+      "dark:focus-visible:ring-gray-500",
+      "transition-colors",
+      "duration-150",
+      "border-none",
+      "bg-transparent",
+      "cursor-pointer"
+    ].join(" ");
+    const t = document.createElement("mint-icon");
+    t.setAttribute("name", "close"), t.className = "w-3 h-3", e.appendChild(t), this._clickHandler = (i) => {
+      i.stopPropagation(), this.dispatchEvent(new CustomEvent("dismissed", { bubbles: !0, composed: !0 }));
+    }, e.addEventListener("click", this._clickHandler), this._dismissBtn = e;
+  }
+}
+customElements.get("mint-chip") || customElements.define("mint-chip", ae);
+class oe extends HTMLElement {
+  constructor() {
+    super(...arguments), this._container = null, this._chipsWrap = null, this._input = null, this._tags = [], this._placeholder = "Add tag", this._dragIndex = null, this._dragChip = null, this._isPointerDragging = !1, this._pointerMoveHandler = null, this._pointerUpHandler = null;
+  }
+  static get observedAttributes() {
+    return ["tags", "placeholder", "sortable", "label", "info", "error", "error-message", "name", "id", "required"];
+  }
+  connectedCallback() {
+    this._parseAttrs(), this._render(), this._pointerMoveHandler || (this._pointerMoveHandler = (e) => this._onPointerMove(e), window.addEventListener("pointermove", this._pointerMoveHandler)), this._pointerUpHandler || (this._pointerUpHandler = (e) => this._onPointerUp(e), window.addEventListener("pointerup", this._pointerUpHandler), window.addEventListener("pointercancel", this._pointerUpHandler));
+  }
+  attributeChangedCallback(e, t, i) {
+    if (t !== i) {
+      if (e === "error" || e === "error-message") {
+        if (this._renderErrorState(), this._container) {
+          const s = this.hasError(), r = [
+            "flex",
+            "flex-wrap",
+            "items-center",
+            "gap-2",
+            "w-full",
+            "px-2",
+            "py-1.5",
+            "min-h-[2rem]",
+            "rounded-lg",
+            "border-2",
+            s ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700",
+            "bg-white",
+            "dark:bg-gray-800",
+            "focus-within:ring-2",
+            "focus-within:ring-offset-1",
+            s ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500",
+            "transition-colors",
+            "duration-200"
+          ];
+          this._container.className = r.join(" ");
+        }
+        return;
+      }
+      this._parseAttrs(), this._render();
+    }
+  }
+  set tags(e) {
+    this._tags = Array.isArray(e) ? [...e] : [], this._syncAttr(), this._render();
+  }
+  get tags() {
+    return [...this._tags];
+  }
+  _parseAttrs() {
+    const e = this.getAttribute("tags");
+    if (!e) return;
+    try {
+      const i = JSON.parse(e);
+      Array.isArray(i) && (this._tags = i);
+    } catch (i) {
+      console.warn("mint-tags: failed to parse tags attribute", i);
+    }
+    const t = this.getAttribute("placeholder");
+    t !== null && (this._placeholder = t);
+  }
+  _syncAttr() {
+    this.setAttribute("tags", JSON.stringify(this._tags));
+  }
+  getLabel() {
+    return this.getAttribute("label") || "";
+  }
+  getInfo() {
+    return this.getAttribute("info") || "";
+  }
+  hasError() {
+    return this.hasAttribute("error");
+  }
+  getErrorMessage() {
+    return this.getAttribute("error-message") || "";
+  }
+  getName() {
+    return this.getAttribute("name") || "";
+  }
+  getId() {
+    return this.getAttribute("id") || "";
+  }
+  isRequired() {
+    return this.hasAttribute("required");
+  }
+  _render() {
+    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block", "w-full");
+    const e = this.getLabel(), t = this.getInfo(), i = this.hasError(), s = this.getId() || `mint-tags-${Math.random().toString(36).substr(2, 9)}`;
+    if (this.getId() || this.setAttribute("id", s), this._container)
+      this._input && (this._input.placeholder = this._placeholder);
+    else {
+      this._container = document.createElement("div");
+      const o = [
+        "flex",
+        "flex-wrap",
+        "items-center",
+        "gap-2",
+        "w-full",
+        "p-2",
+        "rounded-lg",
+        "border-2",
+        i ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700",
+        "bg-white",
+        "dark:bg-gray-800",
+        "focus-within:ring-2",
+        "focus-within:ring-offset-1",
+        i ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500",
+        "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", (c) => {
+        this.hasAttribute("sortable") && c.preventDefault();
+      }), this._chipsWrap.addEventListener("drop", (c) => {
+        this.hasAttribute("sortable") && c.preventDefault();
+      }), this._input = document.createElement("input"), this._input.type = "text", this._input.placeholder = this._placeholder, this._input.className = [
+        "min-w-[6rem]",
+        "flex-1",
+        "bg-transparent",
+        "border-none",
+        "outline-none",
+        "text-sm",
+        "text-gray-900",
+        "dark:text-gray-100",
+        "placeholder:text-gray-400",
+        "dark:placeholder:text-gray-500",
+        "p-1.5"
+      ].join(" "), this._input.addEventListener("keydown", (c) => {
+        c.key === "Enter" && (c.preventDefault(), this._addFromInput());
+      }), this._container.appendChild(this._chipsWrap), this.appendChild(this._container);
+    }
+    if (this._container) {
+      const o = [
+        "flex",
+        "flex-wrap",
+        "items-center",
+        "gap-2",
+        "w-full",
+        "px-2",
+        "py-1",
+        "min-h-[2rem]",
+        "rounded-lg",
+        "border-2",
+        i ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700",
+        "bg-white",
+        "dark:bg-gray-800",
+        "focus-within:ring-2",
+        "focus-within:ring-offset-1",
+        i ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500",
+        "transition-colors",
+        "duration-200"
+      ];
+      this._container.className = o.join(" ");
+    }
+    let r = this.querySelector(".mint-tags-label-container");
+    if (e) {
+      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");
+      e ? (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 = e, o.setAttribute("for", s)) : o && o.remove();
+    } else r && r.remove();
+    let n = this.querySelector(".mint-tags-info");
+    t ? (n || (n = document.createElement("span"), n.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(n, this._container.nextSibling) : this.appendChild(n)), n.textContent = t) : n && n.remove();
+    const a = this.getName();
+    a ? (this.setAttribute("name", a), this._input && (this._input.name = a, this._input.id = s)) : (this.removeAttribute("name"), this._input && (this._input.removeAttribute("name"), this._input.id = s)), this._wireInputBackspace(), this._renderChips(), this._renderErrorState();
+  }
+  _renderErrorState() {
+    const e = this.hasError(), t = this.getErrorMessage();
+    let i = this.querySelector(".mint-tags-error");
+    e && t ? (i || (i = document.createElement("div"), i.className = "mint-tags-error mt-1 text-xs text-red-600 dark:text-red-400", this.appendChild(i)), i.textContent = t) : i && i.remove();
+  }
+  _renderChips() {
+    if (!this._chipsWrap) return;
+    this._chipsWrap.innerHTML = "";
+    let e = 0;
+    this._tags.forEach((t) => {
+      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));
+    }), 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() {
+    if (!this._input) return;
+    const e = this._input.value.trim();
+    if (!e) return;
+    if (this._tags.some((i) => i.value.toLowerCase() === e.toLowerCase())) {
+      this._input.value = "";
+      return;
+    }
+    this._tags.push({ value: e, label: e, dismissable: !0 }), this._syncAttr(), this._renderChips(), this._emitChange(), this._input.value = "", setTimeout(() => {
+      var i;
+      (i = this._input) == null || i.focus();
+    }, 10);
+  }
+  _removeTag(e) {
+    this._tags = this._tags.filter((t) => t.value !== e), this._syncAttr(), this._renderChips(), this._emitChange();
+  }
+  _emitChange() {
+    this.dispatchEvent(new CustomEvent("tags-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { tags: this.tags }
     }));
-    const c = e.querySelector("tfoot");
-    c && (c.style.backgroundColor = "rgb(249 250 251)", document.documentElement.classList.contains("dark") && (c.style.backgroundColor = "rgb(31 41 55)"), c.style.fontWeight = "600", c.querySelectorAll("td").forEach((o) => {
-      o.style.color = "rgb(17 24 39)", document.documentElement.classList.contains("dark") && (o.style.color = "rgb(243 244 246)"), t && (o.style.border = "1px solid rgb(229 231 235)", document.documentElement.classList.contains("dark") && (o.style.borderColor = "rgb(55 65 81)")), r ? o.style.padding = "0.375rem 0.75rem" : o.style.padding = "0.75rem 1rem";
+  }
+  _focusLastChip() {
+    var t;
+    const e = (t = this._chipsWrap) == null ? void 0 : t.querySelectorAll("mint-chip");
+    e && e.length > 0 && e[e.length - 1].focus({ preventScroll: !0 });
+  }
+  _focusInput() {
+    setTimeout(() => {
+      var e;
+      (e = this._input) == null || e.focus({ preventScroll: !0 });
+    }, 10);
+  }
+  _wireInputBackspace() {
+    this._input && this._input.addEventListener("keydown", (e) => {
+      var t;
+      e.key === "Backspace" && ((t = this._input) == null ? void 0 : t.value) === "" && (e.preventDefault(), this._focusLastChip());
+    });
+  }
+  _setupChipEvents(e, t) {
+    e.tabIndex = 0, e.addEventListener("keydown", (i) => {
+      (i.key === "Backspace" || i.key === "Delete") && t.dismissable && (i.preventDefault(), this._removeTag(t.value), this._focusInput());
+    });
+  }
+  // HTML5 drag for mouse
+  _onDragStart(e, t) {
+    var i;
+    this.hasAttribute("sortable") && (this._dragChip = t, this._dragIndex = Number(t.dataset.index), (i = e.dataTransfer) == null || i.setData("text/plain", t.dataset.index || ""), e.dataTransfer && (e.dataTransfer.effectAllowed = "move", e.dataTransfer.dropEffect = "move"), t.classList.add("opacity-60"));
+  }
+  _reorderTags(e, t) {
+    if (e < 0 || t < 0 || e >= this._tags.length || t >= this._tags.length) return;
+    const i = [...this._tags], [s] = i.splice(e, 1);
+    i.splice(t, 0, s), this._tags = i, this._syncAttr(), this._renderChips(), this._emitChange();
+  }
+  _onDragOverInput(e) {
+    this.hasAttribute("sortable") && (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), this._dragChip && this._chipsWrap && this._input && this._chipsWrap.insertBefore(this._dragChip, this._input));
+  }
+  _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) {
+      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);
+    }
+  }
+  _onDrop(e) {
+    this.hasAttribute("sortable") && e.preventDefault();
+  }
+  _onDragEnd() {
+    this._dragChip && this._dragChip.classList.remove("opacity-60"), this._syncOrderFromDom(), this._dragChip = null, this._dragIndex = null;
+  }
+  _syncOrderFromDom() {
+    if (!this._chipsWrap) return;
+    const e = Array.from(this._chipsWrap.querySelectorAll("mint-chip"));
+    if (e.length === 0) return;
+    const t = [];
+    e.forEach((i) => {
+      const s = i.dataset.value;
+      if (!s) return;
+      const r = this._tags.find((n) => n.value === s);
+      r && t.push(r);
+    }), t.length === this._tags.length && (this._tags = t, this._syncAttr(), this._renderChips(), this._emitChange());
+  }
+  // Pointer-based sortable for touch (and optionally mouse)
+  _onPointerDown(e, t) {
+    if (this.hasAttribute("sortable") && e.pointerType !== "mouse") {
+      this._isPointerDragging = !0, this._dragChip = t, this._dragIndex = Number(t.dataset.index);
+      try {
+        t.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      t.classList.add("opacity-60", "select-none"), e.preventDefault();
+    }
+  }
+  _onPointerMove(e) {
+    if (!this._isPointerDragging || !this._dragChip || !this._chipsWrap || e.pointerType === "mouse") return;
+    const t = document.elementFromPoint(e.clientX, e.clientY);
+    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)
+        this._dragChip.nextSibling !== i && this._chipsWrap.insertBefore(this._dragChip, i);
+      else if (i.nextSibling !== this._dragChip) {
+        const a = i.nextSibling;
+        a ? this._chipsWrap.insertBefore(this._dragChip, a) : this._chipsWrap.appendChild(this._dragChip);
+      }
+      return;
+    }
+    this._input && t.closest("input") === this._input && this._chipsWrap.insertBefore(this._dragChip, this._input);
+  }
+  _onPointerUp(e) {
+    if (this._isPointerDragging) {
+      if (this._isPointerDragging = !1, this._dragChip) {
+        try {
+          this._dragChip.releasePointerCapture(e.pointerId);
+        } catch {
+        }
+        this._dragChip.classList.remove("opacity-60", "select-none");
+      }
+      this._syncOrderFromDom(), this._dragChip = null, this._dragIndex = null;
+    }
+  }
+}
+customElements.get("mint-tags") || customElements.define("mint-tags", oe);
+class le extends HTMLElement {
+  constructor() {
+    super(...arguments), this._clickHandler = null, this._keydownHandler = null;
+  }
+  connectedCallback() {
+    this._render(), this._setupEventListeners();
+  }
+  disconnectedCallback() {
+    this._cleanupEventListeners();
+  }
+  _render() {
+    this.classList.add(
+      "transition-colors",
+      "duration-200",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-offset-1",
+      "focus-visible:ring-gray-400",
+      "dark:focus-visible:ring-gray-500",
+      "rounded"
+    ), this.hasAttribute("disabled") ? this.classList.add("cursor-not-allowed", "opacity-50") : this.classList.add("cursor-pointer"), this.hasAttribute("role") || this.setAttribute("role", "button"), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0");
+  }
+  _setupEventListeners() {
+    this._clickHandler = (e) => {
+      if (this.hasAttribute("disabled")) {
+        e.preventDefault(), e.stopPropagation();
+        return;
+      }
+      this._handleClick(e);
+    }, this._keydownHandler = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        if (this.hasAttribute("disabled")) {
+          e.preventDefault(), e.stopPropagation();
+          return;
+        }
+        e.preventDefault(), this._handleClick(e);
+      }
+    }, this.addEventListener("click", this._clickHandler), this.addEventListener("keydown", this._keydownHandler);
+  }
+  _cleanupEventListeners() {
+    this._clickHandler && (this.removeEventListener("click", this._clickHandler), this._clickHandler = null), this._keydownHandler && (this.removeEventListener("keydown", this._keydownHandler), this._keydownHandler = null);
+  }
+  _handleClick(e) {
+    this.dispatchEvent(new CustomEvent("clickable-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { originalEvent: e }
     }));
   }
+  static get observedAttributes() {
+    return ["disabled"];
+  }
+  attributeChangedCallback(e, t, i) {
+    e === "disabled" && (i !== null ? (this.classList.remove("cursor-pointer"), this.classList.add("opacity-50", "cursor-not-allowed"), this.setAttribute("aria-disabled", "true")) : (this.classList.remove("opacity-50", "cursor-not-allowed"), this.classList.add("cursor-pointer"), this.removeAttribute("aria-disabled")));
+  }
+}
+customElements.get("mint-clickable") || customElements.define("mint-clickable", le);
+class ce extends HTMLElement {
+  constructor() {
+    super(), this._headingElement = null, this._iconElement = null, this._dismissButton = null, this._headerWrapper = null, this._bodyWrapper = null, this._dismissHandler = null;
+  }
+  static get observedAttributes() {
+    return ["heading", "dismissable", "tone"];
+  }
+  connectedCallback() {
+    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block"), this.render();
+  }
+  disconnectedCallback() {
+    this._dismissButton && this._dismissHandler && this._dismissButton.removeEventListener("click", this._dismissHandler);
+  }
+  attributeChangedCallback(e, t, i) {
+    t !== i && this.render();
+  }
+  getHeading() {
+    return this.getAttribute("heading") || "";
+  }
+  getTone() {
+    const e = this.getAttribute("tone");
+    return e === "info" || e === "success" || e === "warning" || e === "danger" ? e : "info";
+  }
+  isDismissable() {
+    return this.hasAttribute("dismissable");
+  }
+  getIconName() {
+    switch (this.getTone()) {
+      case "info":
+        return "info";
+      case "success":
+        return "success";
+      case "warning":
+        return "warning";
+      case "danger":
+        return "error";
+      default:
+        return "info";
+    }
+  }
+  getIconColorClasses() {
+    switch (this.getTone()) {
+      case "info":
+        return "text-blue-600 dark:text-blue-400";
+      case "success":
+        return "text-green-600 dark:text-green-400";
+      case "warning":
+        return "text-yellow-600 dark:text-yellow-400";
+      case "danger":
+        return "text-red-600 dark:text-red-400";
+      default:
+        return "text-blue-600 dark:text-blue-400";
+    }
+  }
+  getHeadingColorClasses() {
+    return "text-gray-900 dark:text-gray-100";
+  }
+  getHeaderBackgroundClasses() {
+    switch (this.getTone()) {
+      case "info":
+        return "bg-blue-100 dark:bg-blue-900/30";
+      case "success":
+        return "bg-green-100 dark:bg-green-900/30";
+      case "warning":
+        return "bg-yellow-100 dark:bg-yellow-900/30";
+      case "danger":
+        return "bg-red-100 dark:bg-red-900/30";
+      default:
+        return "bg-blue-100 dark:bg-blue-900/30";
+    }
+  }
+  getBorderClasses() {
+    switch (this.getTone()) {
+      case "info":
+        return "border-blue-200 dark:border-blue-800";
+      case "success":
+        return "border-green-200 dark:border-green-800";
+      case "warning":
+        return "border-yellow-200 dark:border-yellow-800";
+      case "danger":
+        return "border-red-200 dark:border-red-800";
+      default:
+        return "border-blue-200 dark:border-blue-800";
+    }
+  }
+  getAriaLive() {
+    return this.getTone() === "danger" ? "assertive" : "polite";
+  }
+  render() {
+    const e = this.getTone(), t = this.getHeading(), i = this.isDismissable();
+    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 = [];
+    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);
+    }), 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) => {
+        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.appendChild(this._headerWrapper), this.appendChild(this._bodyWrapper);
+  }
 }
-customElements.get("mint-table") || customElements.define("mint-table", re);
+customElements.get("mint-alert") || customElements.define("mint-alert", ce);
 export {
+  ce as Alert,
   Y as BackButton,
-  z as Button,
+  W as Button,
   j as Card,
   K as Checkbox,
-  Z as Choice,
-  ee as DatePicker,
-  ie as Dropzone,
-  se as Form,
+  ae as Chip,
+  Q as Choice,
+  le as Clickable,
+  te as DatePicker,
+  se as Dropzone,
+  re as Form,
   G as Grid,
-  B as Icon,
-  Q as Input,
+  q as Icon,
+  ee as Input,
   $ as Link,
   J as Modal,
   U as Page,
   X as Popover,
-  te as Select,
-  q as Spinner,
-  W as Stack,
-  V as Switch,
-  re as Table,
-  R as Text,
-  z as default
+  ie as Select,
+  B as Spinner,
+  R as Stack,
+  z as Switch,
+  ne as Table,
+  oe as Tags,
+  V as Text,
+  W as default
 };