monobill-mintui 0.4.93 → 0.5.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { h as e } from "./menu-BD7OJkcn.js";
+import { g as e } from "./search-DMCxWW8i.js";
 //#region src/components/spinner/Spinner.ts
 var t = class extends HTMLElement {
 	static get observedAttributes() {
@@ -93,7 +93,7 @@ customElements.get("mint-spinner") || customElements.define("mint-spinner", t);
 //#region src/components/icon/Icon.ts
 var n = class extends HTMLElement {
 	static get observedAttributes() {
-		return ["name"];
+		return ["name", "color"];
 	}
 	constructor() {
 		super(), this._darkModeObserver = null;
@@ -121,6 +121,18 @@ var n = class extends HTMLElement {
 	getName() {
 		return this.getAttribute("name") || "";
 	}
+	_normalizeColorValue(e) {
+		if (!e) return "";
+		let t = e.trim();
+		if (!t) return "";
+		if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(t) || /^rgba?\(\s*[\d.\s]+,\s*[\d.\s]+,\s*[\d.\s]+(?:,\s*[\d.\s]+)?\s*\)$/.test(t)) return t;
+		if (/^\(\s*[\d.\s]+,\s*[\d.\s]+,\s*[\d.\s]+(?:,\s*[\d.\s]+)?\s*\)$/.test(t)) {
+			let e = t.slice(1, -1).trim().split(",").map((e) => e.trim());
+			if (e.length === 3) return `rgb(${e.join(", ")})`;
+			if (e.length === 4) return `rgba(${e.join(", ")})`;
+		}
+		return "";
+	}
 	generateSVGMarkup(e) {
 		if (e.customSvg) return e.customSvg;
 		let t;
@@ -139,12 +151,12 @@ var n = class extends HTMLElement {
 	render() {
 		let t = this.getName();
 		if (!t) {
-			this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "", this.style.backgroundColor = "";
+			this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "", this.style.backgroundColor = "", this.style.color = "";
 			return;
 		}
 		let n = e(t);
 		if (!n) {
-			console.warn(`Icon "${t}" not found. Make sure you've imported the icon: import '@monobill-mintui/icon/icons/${t}'`), this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "", this.style.backgroundColor = "";
+			console.warn(`Icon "${t}" not found. Make sure you've imported the icon: import '@monobill-mintui/icon/icons/${t}'`), this.innerHTML = "", this.style.maskImage = "", this.style.webkitMaskImage = "", this.style.backgroundColor = "", this.style.color = "";
 			return;
 		}
 		let r = this.closest("mint-button") || this.parentElement?.closest("mint-button"), i = this.closest("mint-switch") || this.parentElement?.closest("mint-switch"), a = this.closest("mint-select") || this.parentElement?.closest("mint-select"), o = !!this.closest("mint-sidenav-link") && !r && !i && !a;
@@ -156,7 +168,13 @@ var n = class extends HTMLElement {
 		}
 		this.innerHTML = this.generateSVGMarkup(n), this.style.maskImage = "", this.style.webkitMaskImage = "", this.style.maskSize = "", this.style.webkitMaskSize = "", this.style.maskRepeat = "", this.style.webkitMaskRepeat = "", this.style.maskPosition = "", this.style.webkitMaskPosition = "", this.style.backgroundColor = "", this.style.aspectRatio = "1 / 1";
 		let s = this.querySelector("svg");
-		if (s && (s.style.width = "100%", s.style.height = "100%"), i) this.classList.remove("text-gray-100", "text-gray-900"), this.classList.add("text-gray-900");
+		s && (s.style.width = "100%", s.style.height = "100%");
+		let c = this._normalizeColorValue(this.getAttribute("color"));
+		if (c) {
+			this.style.color = c, this.classList.remove("text-gray-100", "text-gray-900");
+			return;
+		}
+		if (this.style.color = "", i) this.classList.remove("text-gray-100", "text-gray-900"), this.classList.add("text-gray-900");
 		else if (!r && !o) {
 			let e = document.documentElement.classList.contains("dark") ? "text-gray-100" : "text-gray-900";
 			this.classList.remove("text-gray-100", "text-gray-900"), this.classList.add(e);
@@ -274,32 +292,32 @@ var r = class e extends HTMLElement {
 		let e = `${this.getVariant()}-${this.getTone()}`;
 		return {
 			"solid-action": [
-				"!bg-slate-900",
-				"dark:!bg-slate-700",
-				"hover:!bg-slate-900",
-				"dark:hover:!bg-slate-700",
-				"!border-t-slate-900",
-				"!border-l-slate-900",
-				"!border-r-slate-600",
-				"!border-b-slate-600",
-				"dark:!border-t-slate-700",
-				"dark:!border-l-slate-700",
-				"dark:!border-r-slate-500",
-				"dark:!border-b-slate-500"
+				"!bg-neutral-900",
+				"dark:!bg-neutral-700",
+				"hover:!bg-neutral-900",
+				"dark:hover:!bg-neutral-700",
+				"!border-t-neutral-900",
+				"!border-l-neutral-900",
+				"!border-r-neutral-600",
+				"!border-b-neutral-600",
+				"dark:!border-t-neutral-700",
+				"dark:!border-l-neutral-700",
+				"dark:!border-r-neutral-500",
+				"dark:!border-b-neutral-500"
 			],
 			"solid-neutral": [
 				"!bg-gray-100",
-				"dark:!bg-gray-800",
+				"dark:!bg-mint-hover",
 				"hover:!bg-gray-100",
-				"dark:hover:!bg-gray-800",
+				"dark:hover:!bg-mint-hover",
 				"!border-t-gray-400",
 				"!border-l-gray-400",
 				"!border-r-gray-200",
 				"!border-b-gray-200",
 				"dark:!border-t-gray-950",
 				"dark:!border-l-gray-950",
-				"dark:!border-r-gray-700",
-				"dark:!border-b-gray-700"
+				"dark:!border-r-mint-divider",
+				"dark:!border-b-mint-divider"
 			],
 			"solid-info": [
 				"!bg-blue-900",
@@ -346,19 +364,19 @@ var r = class e extends HTMLElement {
 			"ghost-action": [
 				"!bg-gray-100",
 				"!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
-				"dark:!bg-gray-800",
+				"dark:!bg-mint-hover",
 				"hover:!bg-gray-100",
-				"dark:hover:!bg-gray-800",
+				"dark:hover:!bg-mint-hover",
 				"hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]"
 			],
 			"ghost-neutral": [
 				"!bg-gray-50",
 				"!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
-				"dark:!bg-gray-800",
+				"dark:!bg-mint-hover",
 				"!text-gray-900",
 				"dark:!text-white",
 				"hover:!bg-gray-50",
-				"dark:hover:!bg-gray-800",
+				"dark:hover:!bg-mint-hover",
 				"hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
 				"hover:!text-gray-900",
 				"dark:hover:!text-white"
@@ -366,32 +384,32 @@ var r = class e extends HTMLElement {
 			"ghost-info": [
 				"!bg-gray-100",
 				"!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
-				"dark:!bg-gray-800",
+				"dark:!bg-mint-hover",
 				"hover:!bg-gray-100",
-				"dark:hover:!bg-gray-800",
+				"dark:hover:!bg-mint-hover",
 				"hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]"
 			],
 			"ghost-warning": [
 				"!bg-gray-100",
 				"!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
-				"dark:!bg-gray-800",
+				"dark:!bg-mint-hover",
 				"hover:!bg-gray-100",
-				"dark:hover:!bg-gray-800",
+				"dark:hover:!bg-mint-hover",
 				"hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]"
 			],
 			"ghost-danger": [
 				"!bg-gray-100",
 				"!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
-				"dark:!bg-gray-800",
+				"dark:!bg-mint-hover",
 				"hover:!bg-gray-100",
-				"dark:hover:!bg-gray-800",
+				"dark:hover:!bg-mint-hover",
 				"hover:!shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]"
 			],
 			"link-action": [
-				"!text-slate-900",
-				"dark:!text-slate-300",
-				"hover:!text-slate-900",
-				"dark:hover:!text-slate-300"
+				"!text-neutral-900",
+				"dark:!text-neutral-300",
+				"hover:!text-neutral-900",
+				"dark:hover:!text-neutral-300"
 			],
 			"link-neutral": [
 				"!text-gray-950",
@@ -441,8 +459,6 @@ var r = class e extends HTMLElement {
 				"min-h-[2.25rem]"
 			],
 			"text-sm",
-			"transition-all",
-			"duration-100",
 			"outline-none",
 			"focus:outline-none",
 			"focus-visible:ring-2",
@@ -451,18 +467,18 @@ var r = class e extends HTMLElement {
 			"disabled:opacity-50",
 			"disabled:cursor-not-allowed"
 		], a = this.getTone(), o = {
-			"solid-action": /* @__PURE__ */ "bg-slate-800.dark:bg-slate-600.text-white.hover:bg-slate-950.dark:hover:bg-slate-700.active:bg-slate-900.dark:active:bg-slate-700.disabled:active:bg-slate-800.dark:disabled:active:bg-slate-600.focus-visible:ring-gray-400.dark:focus-visible:ring-gray-500.border-2.border-t-slate-600.border-l-slate-600.border-r-slate-900.border-b-slate-900.dark:border-t-slate-500.dark:border-l-slate-500.dark:border-r-slate-700.dark:border-b-slate-700.active:border-t-slate-900.active:border-l-slate-900.active:border-r-slate-600.active:border-b-slate-600.dark:active:border-t-slate-700.dark:active:border-l-slate-700.dark:active:border-r-slate-500.dark:active:border-b-slate-500.disabled:active:border-t-slate-600.disabled:active:border-l-slate-600.disabled:active:border-r-slate-900.disabled:active:border-b-slate-900.dark:disabled:active:border-t-slate-500.dark:disabled:active:border-l-slate-500.dark:disabled:active:border-r-slate-700.dark:disabled:active:border-b-slate-700.[&[data-loading=\"true\"]:active]:border-t-slate-600.[&[data-loading=\"true\"]:active]:border-l-slate-600.[&[data-loading=\"true\"]:active]:border-r-slate-900.[&[data-loading=\"true\"]:active]:border-b-slate-900.[&[data-loading=\"true\"]:active]:dark:border-t-slate-500.[&[data-loading=\"true\"]:active]:dark:border-l-slate-500.[&[data-loading=\"true\"]:active]:dark:border-r-slate-700.[&[data-loading=\"true\"]:active]:dark:border-b-slate-700".split("."),
-			"solid-neutral": /* @__PURE__ */ "bg-white.dark:bg-gray-900.text-gray-900.dark:text-white.hover:bg-gray-50.dark:hover:bg-gray-800.active:bg-gray-100.dark:active:bg-gray-800.disabled:active:bg-white.dark:disabled:active:bg-gray-900.focus-visible:ring-gray-400.dark:focus-visible:ring-gray-500.border-2.border-t-gray-200.border-l-gray-200.border-r-gray-300.border-b-gray-300.dark:border-t-gray-600.dark:border-l-gray-600.dark:border-r-gray-700.dark:border-b-gray-700.active:border-t-gray-400.active:border-l-gray-400.active:border-r-gray-200.active:border-b-gray-200.dark:active:border-t-gray-950.dark:active:border-l-gray-950.dark:active:border-r-gray-700.dark:active:border-b-gray-700.disabled:active:border-t-gray-200.disabled:active:border-l-gray-200.disabled:active:border-r-gray-400.disabled:active:border-b-gray-400.dark:disabled:active:border-t-gray-700.dark:disabled:active:border-l-gray-700.dark:disabled:active:border-r-gray-950.dark:disabled:active:border-b-gray-950.[&[data-loading=\"true\"]:active]:border-t-gray-200.[&[data-loading=\"true\"]:active]:border-l-gray-200.[&[data-loading=\"true\"]:active]:border-r-gray-400.[&[data-loading=\"true\"]:active]:border-b-gray-400.[&[data-loading=\"true\"]:active]:dark:border-t-gray-700.[&[data-loading=\"true\"]:active]:dark:border-l-gray-700.[&[data-loading=\"true\"]:active]:dark:border-r-gray-950.[&[data-loading=\"true\"]:active]:dark:border-b-gray-950".split("."),
+			"solid-action": /* @__PURE__ */ "bg-neutral-800.dark:bg-neutral-600.text-white.hover:bg-neutral-950.dark:hover:bg-neutral-700.active:bg-neutral-900.dark:active:bg-neutral-700.disabled:active:bg-neutral-800.dark:disabled:active:bg-neutral-600.focus-visible:ring-gray-400.dark:focus-visible:ring-gray-500.border-2.border-t-neutral-600.border-l-neutral-600.border-r-neutral-900.border-b-neutral-900.dark:border-t-neutral-500.dark:border-l-neutral-500.dark:border-r-neutral-700.dark:border-b-neutral-700.active:border-t-neutral-900.active:border-l-neutral-900.active:border-r-neutral-600.active:border-b-neutral-600.dark:active:border-t-neutral-700.dark:active:border-l-neutral-700.dark:active:border-r-neutral-500.dark:active:border-b-neutral-500.disabled:active:border-t-neutral-600.disabled:active:border-l-neutral-600.disabled:active:border-r-neutral-900.disabled:active:border-b-neutral-900.dark:disabled:active:border-t-neutral-500.dark:disabled:active:border-l-neutral-500.dark:disabled:active:border-r-neutral-700.dark:disabled:active:border-b-neutral-700.[&[data-loading=\"true\"]:active]:border-t-neutral-600.[&[data-loading=\"true\"]:active]:border-l-neutral-600.[&[data-loading=\"true\"]:active]:border-r-neutral-900.[&[data-loading=\"true\"]:active]:border-b-neutral-900.[&[data-loading=\"true\"]:active]:dark:border-t-neutral-500.[&[data-loading=\"true\"]:active]:dark:border-l-neutral-500.[&[data-loading=\"true\"]:active]:dark:border-r-neutral-700.[&[data-loading=\"true\"]:active]:dark:border-b-neutral-700".split("."),
+			"solid-neutral": /* @__PURE__ */ "bg-white.dark:bg-mint-canvas.text-gray-900.dark:text-white.hover:bg-gray-50.dark:hover:bg-mint-hover.active:bg-gray-100.dark:active:bg-mint-hover.disabled:active:bg-white.dark:disabled:active:bg-mint-canvas.focus-visible:ring-gray-400.dark:focus-visible:ring-gray-500.border-2.border-t-gray-200.border-l-gray-200.border-r-gray-300.border-b-gray-300.dark:border-t-gray-600.dark:border-l-gray-600.dark:border-r-mint-divider.dark:border-b-mint-divider.active:border-t-gray-400.active:border-l-gray-400.active:border-r-gray-200.active:border-b-gray-200.dark:active:border-t-gray-950.dark:active:border-l-gray-950.dark:active:border-r-mint-divider.dark:active:border-b-mint-divider.disabled:active:border-t-gray-200.disabled:active:border-l-gray-200.disabled:active:border-r-gray-400.disabled:active:border-b-gray-400.dark:disabled:active:border-t-mint-divider.dark:disabled:active:border-l-mint-divider.dark:disabled:active:border-r-gray-950.dark:disabled:active:border-b-gray-950.[&[data-loading=\"true\"]:active]:border-t-gray-200.[&[data-loading=\"true\"]:active]:border-l-gray-200.[&[data-loading=\"true\"]:active]:border-r-gray-400.[&[data-loading=\"true\"]:active]:border-b-gray-400.[&[data-loading=\"true\"]:active]:dark:border-t-mint-divider.[&[data-loading=\"true\"]:active]:dark:border-l-mint-divider.[&[data-loading=\"true\"]:active]:dark:border-r-gray-950.[&[data-loading=\"true\"]:active]:dark:border-b-gray-950".split("."),
 			"solid-info": /* @__PURE__ */ "bg-blue-800.dark:bg-blue-600.text-white.hover:bg-blue-950.dark:hover:bg-blue-700.active:bg-blue-900.dark:active:bg-blue-700.disabled:active:bg-blue-800.dark:disabled:active:bg-blue-600.focus-visible:ring-gray-400.dark:focus-visible:ring-gray-500.border-2.border-t-blue-600.border-l-blue-600.border-r-blue-900.border-b-blue-900.dark:border-t-blue-500.dark:border-l-blue-500.dark:border-r-blue-700.dark:border-b-blue-700.active:border-t-blue-900.active:border-l-blue-900.active:border-r-blue-600.active:border-b-blue-600.dark:active:border-t-blue-700.dark:active:border-l-blue-700.dark:active:border-r-blue-500.dark:active:border-b-blue-500.disabled:active:border-t-blue-600.disabled:active:border-l-blue-600.disabled:active:border-r-blue-900.disabled:active:border-b-blue-900.dark:disabled:active:border-t-blue-500.dark:disabled:active:border-l-blue-500.dark:disabled:active:border-r-blue-700.dark:disabled:active:border-b-blue-700.[&[data-loading=\"true\"]:active]:border-t-blue-600.[&[data-loading=\"true\"]:active]:border-l-blue-600.[&[data-loading=\"true\"]:active]:border-r-blue-900.[&[data-loading=\"true\"]:active]:border-b-blue-900.[&[data-loading=\"true\"]:active]:dark:border-t-blue-500.[&[data-loading=\"true\"]:active]:dark:border-l-blue-500.[&[data-loading=\"true\"]:active]:dark:border-r-blue-700.[&[data-loading=\"true\"]:active]:dark:border-b-blue-700".split("."),
 			"solid-warning": /* @__PURE__ */ "bg-amber-800.dark:bg-amber-600.text-white.hover:bg-amber-950.dark:hover:bg-amber-700.active:bg-amber-900.dark:active:bg-amber-700.disabled:active:bg-amber-800.dark:disabled:active:bg-amber-600.focus-visible:ring-gray-400.dark:focus-visible:ring-gray-500.border-2.border-t-amber-600.border-l-amber-600.border-r-amber-900.border-b-amber-900.dark:border-t-amber-500.dark:border-l-amber-500.dark:border-r-amber-700.dark:border-b-amber-700.active:border-t-amber-900.active:border-l-amber-900.active:border-r-amber-600.active:border-b-amber-600.dark:active:border-t-amber-700.dark:active:border-l-amber-700.dark:active:border-r-amber-500.dark:active:border-b-amber-500.disabled:active:border-t-amber-600.disabled:active:border-l-amber-600.disabled:active:border-r-amber-900.disabled:active:border-b-amber-900.dark:disabled:active:border-t-amber-500.dark:disabled:active:border-l-amber-500.dark:disabled:active:border-r-amber-700.dark:disabled:active:border-b-amber-700.[&[data-loading=\"true\"]:active]:border-t-amber-600.[&[data-loading=\"true\"]:active]:border-l-amber-600.[&[data-loading=\"true\"]:active]:border-r-amber-900.[&[data-loading=\"true\"]:active]:border-b-amber-900.[&[data-loading=\"true\"]:active]:dark:border-t-amber-500.[&[data-loading=\"true\"]:active]:dark:border-l-amber-500.[&[data-loading=\"true\"]:active]:dark:border-r-amber-700.[&[data-loading=\"true\"]:active]:dark:border-b-amber-700".split("."),
 			"solid-danger": /* @__PURE__ */ "bg-red-800.dark:bg-red-600.text-white.hover:bg-red-950.dark:hover:bg-red-700.active:bg-red-900.dark:active:bg-red-700.disabled:active:bg-red-800.dark:disabled:active:bg-red-600.focus-visible:ring-gray-400.dark:focus-visible:ring-gray-500.border-2.border-t-red-600.border-l-red-600.border-r-red-900.border-b-red-900.dark:border-t-red-500.dark:border-l-red-500.dark:border-r-red-700.dark:border-b-red-700.active:border-t-red-900.active:border-l-red-900.active:border-r-red-600.active:border-b-red-600.dark:active:border-t-red-700.dark:active:border-l-red-700.dark:active:border-r-red-500.dark:active:border-b-red-500.disabled:active:border-t-red-600.disabled:active:border-l-red-600.disabled:active:border-r-red-900.disabled:active:border-b-red-900.dark:disabled:active:border-t-red-500.dark:disabled:active:border-l-red-500.dark:disabled:active:border-r-red-700.dark:disabled:active:border-b-red-700.[&[data-loading=\"true\"]:active]:border-t-red-600.[&[data-loading=\"true\"]:active]:border-l-red-600.[&[data-loading=\"true\"]:active]:border-r-red-900.[&[data-loading=\"true\"]:active]:border-b-red-900.[&[data-loading=\"true\"]:active]:dark:border-t-red-500.[&[data-loading=\"true\"]:active]:dark:border-l-red-500.[&[data-loading=\"true\"]:active]:dark:border-r-red-700.[&[data-loading=\"true\"]:active]:dark:border-b-red-700".split("."),
 			"ghost-action": [
 				"bg-transparent",
-				"text-slate-800",
-				"dark:text-slate-400",
+				"text-neutral-800",
+				"dark:text-neutral-400",
 				"active:bg-gray-100",
 				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
-				"dark:active:bg-gray-800",
+				"dark:active:bg-mint-hover",
 				"disabled:active:bg-transparent",
 				"dark:disabled:active:bg-transparent",
 				"disabled:active:shadow-none",
@@ -479,7 +495,7 @@ var r = class e extends HTMLElement {
 				"dark:text-gray-200",
 				"active:bg-gray-50",
 				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
-				"dark:active:bg-gray-800",
+				"dark:active:bg-mint-hover",
 				"active:text-gray-900",
 				"dark:active:text-white",
 				"disabled:active:bg-transparent",
@@ -498,7 +514,7 @@ var r = class e extends HTMLElement {
 				"dark:text-blue-400",
 				"active:bg-gray-100",
 				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
-				"dark:active:bg-gray-800",
+				"dark:active:bg-mint-hover",
 				"disabled:active:bg-transparent",
 				"dark:disabled:active:bg-transparent",
 				"disabled:active:shadow-none",
@@ -515,7 +531,7 @@ var r = class e extends HTMLElement {
 				"dark:text-amber-400",
 				"active:bg-gray-100",
 				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
-				"dark:active:bg-gray-800",
+				"dark:active:bg-mint-hover",
 				"disabled:active:bg-transparent",
 				"dark:disabled:active:bg-transparent",
 				"disabled:active:shadow-none",
@@ -532,7 +548,7 @@ var r = class e extends HTMLElement {
 				"dark:text-red-400",
 				"active:bg-gray-100",
 				"active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]",
-				"dark:active:bg-gray-800",
+				"dark:active:bg-mint-hover",
 				"disabled:active:bg-transparent",
 				"dark:disabled:active:bg-transparent",
 				"disabled:active:shadow-none",
@@ -545,12 +561,12 @@ var r = class e extends HTMLElement {
 			],
 			"link-action": [
 				"bg-transparent",
-				"text-slate-800",
-				"dark:text-slate-400",
-				"hover:text-slate-950",
-				"dark:hover:text-slate-200",
-				"active:text-slate-900",
-				"dark:active:text-slate-300",
+				"text-neutral-800",
+				"dark:text-neutral-400",
+				"hover:text-neutral-950",
+				"dark:hover:text-neutral-200",
+				"active:text-neutral-900",
+				"dark:active:text-neutral-300",
 				"disabled:active:bg-transparent",
 				"dark:disabled:active:bg-transparent",
 				"disabled:active:shadow-none",
@@ -827,9 +843,6 @@ var i = class extends HTMLElement {
 			"h-5",
 			"w-10",
 			"border",
-			"transition-colors",
-			"duration-200",
-			"ease-in-out",
 			"outline-none",
 			"focus:outline-none",
 			"focus-visible:ring-2",
@@ -839,13 +852,13 @@ var i = class extends HTMLElement {
 			"disabled:opacity-50",
 			"disabled:cursor-not-allowed"
 		], n = 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-neutral-900",
+			"dark:bg-neutral-700",
+			e ? "border-red-300 dark:border-red-300" : "border-neutral-800 dark:border-neutral-600"
 		] : [
-			"bg-slate-200",
-			"dark:bg-slate-400",
-			e ? "border-red-300 dark:border-red-300" : "border-slate-300 dark:border-slate-500"
+			"bg-neutral-200",
+			"dark:bg-neutral-600",
+			e ? "border-red-300 dark:border-red-300" : "border-neutral-300 dark:border-neutral-500"
 		];
 		return [...t, ...n].join(" ");
 	}
@@ -932,9 +945,9 @@ var i = class extends HTMLElement {
 		if (e) {
 			t.classList.contains("relative") || t.classList.add("relative"), i || (i = document.createElement("div"), i.className = "mint-switch-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center gap-2", t.appendChild(i));
 			let e = i.querySelector(".mint-switch-skeleton-box");
-			if (e || (e = document.createElement("div"), e.className = "mint-switch-skeleton-box flex-shrink-0 w-10 h-5 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse", i.appendChild(e)), n) {
+			if (e || (e = document.createElement("div"), e.className = "mint-switch-skeleton-box flex-shrink-0 w-10 h-5 rounded-full bg-gray-200 dark:bg-mint-hover animate-pulse", i.appendChild(e)), n) {
 				let e = i.querySelector(".mint-switch-skeleton-label");
-				e || (e = document.createElement("div"), e.className = "mint-switch-skeleton-label h-4 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", i.appendChild(e));
+				e || (e = document.createElement("div"), e.className = "mint-switch-skeleton-label h-4 w-24 rounded bg-gray-200 dark:bg-mint-hover animate-pulse", i.appendChild(e));
 			} else {
 				let e = i.querySelector(".mint-switch-skeleton-label");
 				e && e.remove();
@@ -942,7 +955,7 @@ var i = class extends HTMLElement {
 			i.style.display = "flex", this._button && (this._button.style.visibility = "hidden", this._button.style.pointerEvents = "none");
 			let o = t.querySelector(".mint-switch-label");
 			if (o && (o.style.visibility = "hidden", o.style.pointerEvents = "none"), r) {
-				a || (a = document.createElement("div"), a.className = "mint-switch-info-skeleton h-3 w-32 rounded bg-gray-200 dark:bg-gray-700 animate-pulse mt-2", t && t.parentElement === this ? this.insertBefore(a, t.nextSibling) : this.appendChild(a)), a.style.display = "block";
+				a || (a = document.createElement("div"), a.className = "mint-switch-info-skeleton h-3 w-32 rounded bg-gray-200 dark:bg-mint-hover animate-pulse mt-2", t && t.parentElement === this ? this.insertBefore(a, t.nextSibling) : this.appendChild(a)), a.style.display = "block";
 				let e = this.querySelector(".mint-switch-info");
 				e && (e.style.display = "none");
 			} else a && (a.style.display = "none");
@@ -1214,7 +1227,7 @@ var s = class extends HTMLElement {
 		return Array.from(this.classList).some((e) => /^p-\d+|^px-|^py-|^pt-|^pb-|^pl-|^pr-/.test(e));
 	}
 	render() {
-		this.classList.add("rounded-lg", "shadow", "bg-white", "dark:bg-gray-900", "border", "border-gray-200", "dark:border-gray-700", "overflow-hidden", "transition-colors", "duration-200"), this.hasPaddingClass() || this.classList.add("p-4");
+		this.classList.add("rounded-lg", "shadow", "bg-white", "dark:bg-mint-elevated", "border", "border-gray-200", "dark:border-mint-divider", "overflow-hidden"), this.hasPaddingClass() || this.classList.add("p-4");
 		let e = this.getHeading();
 		e ? (this._headingElement || (this._headingElement = document.createElement("mint-text"), this._headingElement.setAttribute("size", "sub-heading"), this.insertBefore(this._headingElement, this.firstChild)), this._headingElement.textContent = e) : this._headingElement && this._headingElement.parentNode && (this._headingElement.remove(), this._headingElement = null);
 	}
@@ -1270,8 +1283,6 @@ var c = class extends HTMLElement {
 			"underline",
 			"hover:text-slate-950",
 			"dark:hover:text-slate-100",
-			"transition-colors",
-			"duration-200",
 			"focus-visible:outline-none",
 			"focus-visible:ring-2",
 			"focus-visible:ring-offset-1",
@@ -1395,10 +1406,10 @@ var u = class extends HTMLElement {
 		}), this._updateBackgroundColor();
 	}
 	_applyContainerClasses() {
-		this._pageContainer && (this._pageContainer.classList.add("min-h-screen", "p-8", "transition-colors", "duration-200"), this.getAttribute("containered") === "true" ? this._pageContainer.classList.add("max-w-6xl", "mx-auto", "w-full") : this._pageContainer.classList.remove("max-w-6xl", "mx-auto", "w-full"));
+		this._pageContainer && (this._pageContainer.classList.add("p-8"), this.getAttribute("containered") === "true" ? this._pageContainer.classList.add("max-w-6xl", "mx-auto", "w-full") : this._pageContainer.classList.remove("max-w-6xl", "mx-auto", "w-full"));
 	}
 	_updateBackgroundColor() {
-		this._pageContainer && (document.documentElement.classList.contains("dark") ? (this._pageContainer.classList.remove("bg-gray-20"), this._pageContainer.classList.add("bg-gray-900")) : (this._pageContainer.classList.remove("bg-gray-900"), this._pageContainer.classList.add("bg-gray-20")));
+		this._pageContainer && (document.documentElement.classList.contains("dark") ? (this._pageContainer.classList.remove("bg-gray-20"), this._pageContainer.classList.add("bg-mint-canvas")) : (this._pageContainer.classList.remove("bg-mint-canvas"), this._pageContainer.classList.add("bg-gray-20")));
 	}
 	_observeDarkMode() {
 		this._darkModeObserver || (this._darkModeObserver = new MutationObserver(() => {
@@ -1530,16 +1541,16 @@ var f = class extends HTMLElement {
 		let e = this.getId(), t = this.getHeading(), n = this.isOpen();
 		if (e && (this.id = e), this._overlay || (this._overlay = document.createElement("div"), this._overlay.className = "fixed inset-0 bg-black/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)), n) {
 			let e = this._modal.querySelector(".modal-content");
-			e || (e = document.createElement("div"), e.className = "modal-content bg-white dark:bg-gray-900 dark:border dark:border-gray-700 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(e)), this._animateEnter();
+			e || (e = document.createElement("div"), e.className = "modal-content bg-white dark:bg-mint-elevated dark:border dark:border-mint-divider rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto transform", this._modal.appendChild(e)), this._animateEnter();
 		} else this._animateExit();
 		let r = this._modal.querySelector(".modal-content");
-		r || (r = document.createElement("div"), r.className = "modal-content bg-white dark:bg-gray-900 dark:border dark:border-gray-700 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(r)), 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", r.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));
+		r || (r = document.createElement("div"), r.className = "modal-content bg-white dark:bg-mint-elevated dark:border dark:border-mint-divider rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] flex flex-col pointer-events-auto transform", this._modal.appendChild(r)), this._header || (this._header = document.createElement("div"), this._header.className = "flex items-center justify-between p-4 border-b border-gray-200 dark:border-mint-divider", r.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 i = this._headingSlot.querySelector("mint-text");
 		t ? (i || (i = document.createElement("mint-text"), i.setAttribute("size", "sub-heading"), i.setAttribute("bold", "true"), this._headingSlot.appendChild(i)), i.textContent = t) : i && i.remove(), Array.from(this.children).filter((e) => e !== this._overlay && e !== this._modal && e !== this._headingSlot && e.getAttribute("slot") === "heading").forEach((e) => {
 			this._headingSlot && e.parentElement !== this._headingSlot && this._headingSlot.appendChild(e);
 		}), 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"), r.appendChild(this._bodySlot)), Array.from(this.children).filter((e) => e !== this._overlay && e !== this._modal && e !== this._bodySlot && e.getAttribute("slot") === "body").forEach((e) => {
 			this._bodySlot && e.parentElement !== this._bodySlot && this._bodySlot.appendChild(e);
-		}), 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"), r.appendChild(this._actionsSlot));
+		}), this._actionsSlot || (this._actionsSlot = document.createElement("div"), this._actionsSlot.className = "p-4 border-t border-gray-200 dark:border-mint-divider", this._actionsSlot.setAttribute("slot", "actions"), r.appendChild(this._actionsSlot));
 		let a = this._actionsSlot.querySelector("mint-stack");
 		a || (a = document.createElement("mint-stack"), a.setAttribute("direction", "horizontal"), a.className = "justify-end", this._actionsSlot.appendChild(a)), Array.from(this.children).filter((e) => e !== this._overlay && e !== this._modal && e !== this._actionsSlot && e.getAttribute("slot") === "actions").forEach((e) => {
 			Array.from(e.children).forEach((e) => {
@@ -1552,7 +1563,7 @@ var f = class extends HTMLElement {
 	_updateBackgroundColor() {
 		if (!this._modal) return;
 		let e = document.documentElement.classList.contains("dark"), t = this._modal.querySelector(".modal-content");
-		t && (e ? (t.classList.remove("bg-white"), t.classList.add("bg-gray-900", "border", "border-gray-700")) : (t.classList.remove("bg-gray-900", "border", "border-gray-700"), t.classList.add("bg-white")));
+		t && (e ? (t.classList.remove("bg-white"), t.classList.add("bg-mint-elevated", "border", "border-mint-divider")) : (t.classList.remove("bg-mint-elevated", "border", "border-mint-divider"), t.classList.add("bg-white")));
 	}
 	_observeDarkMode() {
 		this._darkModeObserver || (this._darkModeObserver = new MutationObserver(() => {
@@ -1564,7 +1575,7 @@ var f = class extends HTMLElement {
 	}
 	_animateEnter() {
 		let e = this._modal?.querySelector(".modal-content");
-		e && (e.style.transform = "scale(0.97) translateY(10px)", e.style.opacity = "0", e.style.transition = "all 200ms ease-out", this.classList.remove("hidden"), requestAnimationFrame(() => {
+		e && (e.style.transform = "scale(0.97) translateY(10px)", e.style.opacity = "0", e.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", this.classList.remove("hidden"), requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
 				e.style.transform = "scale(1) translateY(0)", e.style.opacity = "1";
 			});
@@ -1576,7 +1587,7 @@ var f = class extends HTMLElement {
 			this.classList.add("hidden");
 			return;
 		}
-		e.style.transition = "all 200ms ease-in", e.style.transform = "scale(0.97) translateY(10px)", e.style.opacity = "0", setTimeout(() => {
+		e.style.transition = "opacity 200ms ease-in, transform 200ms ease-in", e.style.transform = "scale(0.97) translateY(10px)", e.style.opacity = "0", setTimeout(() => {
 			this.classList.add("hidden"), e.style.transform = "", e.style.opacity = "", e.style.transition = "";
 		}, 200);
 	}
@@ -1623,8 +1634,8 @@ var p = class extends HTMLElement {
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
 			if (this.isConnected) {
-				let e = this._isInsideModal() ? "z-[60]" : "z-50";
-				this.classList.remove("z-50", "z-[60]"), this.classList.add(e);
+				let e = this._isInsideModal() ? "z-[80]" : "z-[60]";
+				this.classList.remove("z-50", "z-[60]", "z-[80]"), this.classList.add(e);
 			}
 			this.render(), (e === "trigger-id" || e === "hover") && this._setupTrigger(), e === "open" && this.isOpen() && this._closeOtherPopovers();
 		}
@@ -1796,24 +1807,24 @@ var p = class extends HTMLElement {
 			});
 		}), this._clickOutsideHandler &&= (document.removeEventListener("click", this._clickOutsideHandler, !1), null);
 		if (this._overlay) {
-			let e = this._isInsideModal() ? "z-[55]" : "z-40";
+			let e = this._isInsideModal() ? "z-[75]" : "z-[55]";
 			this._overlay.className = `fixed inset-0 pointer-events-none ${e}`, this._overlay.parentElement !== this && this.appendChild(this._overlay);
 		} else {
 			this._overlay = document.createElement("div");
-			let e = this._isInsideModal() ? "z-[55]" : "z-40";
+			let e = this._isInsideModal() ? "z-[75]" : "z-[55]";
 			this._overlay.className = `fixed inset-0 pointer-events-none ${e}`, this.appendChild(this._overlay);
 		}
 		if (this._popover) {
-			let e = this._isInsideModal() ? "z-[60]" : "z-50";
+			let e = this._isInsideModal() ? "z-[80]" : "z-[60]";
 			this._popover.className = `fixed ${e} pointer-events-auto`, this._popover.parentElement !== this && this.appendChild(this._popover);
 		} else {
 			this._popover = document.createElement("div");
-			let e = this._isInsideModal() ? "z-[60]" : "z-50";
+			let e = this._isInsideModal() ? "z-[80]" : "z-[60]";
 			this._popover.className = `fixed ${e} pointer-events-auto`, this.appendChild(this._popover);
 		}
 		this.isHoverEnabled() && this._attachHoverListeners();
 		let r = this._popover.querySelector(".popover-content");
-		if (!r) r = document.createElement("div"), r.className = `popover-content bg-white dark:bg-gray-900 dark:border dark:border-gray-700 rounded-lg shadow-xl ${n} transition-all duration-200 ease-out transform`, this._popover.appendChild(r);
+		if (!r) r = document.createElement("div"), r.className = `popover-content bg-white dark:bg-mint-elevated dark:border dark:border-mint-divider rounded-lg shadow-xl ${n} transform`, this._popover.appendChild(r);
 		else {
 			let e = r.className.split(" "), t = [
 				"p-0",
@@ -1838,18 +1849,18 @@ var p = class extends HTMLElement {
 		}
 		Array.from(this.children).forEach((e) => {
 			e !== this._overlay && e !== this._popover && e.parentElement === this && r.appendChild(e);
-		}), t ? (this._triggerElement || this._setupTrigger(), this._setupPositionListeners(), this.offsetHeight, this._triggerElement ? this._updatePosition(r) : (this._popover.style.top = "50%", this._popover.style.left = "50%", this._popover.style.transform = "translate(-50%, -50%)", this._popover.style.visibility = "visible", this._popover.style.display = "block", r.style.transform = "scale(0.97) translateY(10px)", r.style.opacity = "0", r.style.transition = "all 200ms ease-out", requestAnimationFrame(() => {
+		}), t ? (this._triggerElement || this._setupTrigger(), this._setupPositionListeners(), this.offsetHeight, this._triggerElement ? this._updatePosition(r) : (this._popover.style.top = "50%", this._popover.style.left = "50%", this._popover.style.transform = "translate(-50%, -50%)", this._popover.style.visibility = "visible", this._popover.style.display = "block", r.style.transform = "scale(0.97) translateY(10px)", r.style.opacity = "0", r.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
 				r.style.transform = "scale(1) translateY(0)", r.style.opacity = "1";
 			});
-		}))) : !t && r && (this._removePositionListeners(), r.style.opacity !== "0" && r.style.opacity !== "" && (r.style.transition = "all 200ms ease-in", r.style.transform = "scale(0.97) translateY(10px)", r.style.opacity = "0", setTimeout(() => {
+		}))) : !t && r && (this._removePositionListeners(), r.style.opacity !== "0" && r.style.opacity !== "" && (r.style.transition = "opacity 200ms ease-in, transform 200ms ease-in", r.style.transform = "scale(0.97) translateY(10px)", r.style.opacity = "0", setTimeout(() => {
 			r.style.transform = "", r.style.opacity = "", r.style.transition = "", this._popover.style.visibility = "", this._popover.style.display = "";
 		}, 200))), this._updateBackgroundColor();
 	}
 	_updateBackgroundColor() {
 		if (!this._popover) return;
 		let e = document.documentElement.classList.contains("dark"), t = this._popover.querySelector(".popover-content");
-		t && (e ? (t.classList.remove("bg-white"), t.classList.add("bg-gray-900", "border", "border-gray-700")) : (t.classList.remove("bg-gray-900", "border", "border-gray-700"), t.classList.add("bg-white")));
+		t && (e ? (t.classList.remove("bg-white"), t.classList.add("bg-mint-elevated", "border", "border-mint-divider")) : (t.classList.remove("bg-mint-elevated", "border", "border-mint-divider"), t.classList.add("bg-white")));
 	}
 	_observeDarkMode() {
 		this._darkModeObserver || (this._darkModeObserver = new MutationObserver(() => {
@@ -1864,7 +1875,7 @@ var p = class extends HTMLElement {
 		let t = this._popover.style.visibility !== "hidden";
 		t || (this._popover.style.visibility = "hidden", this._popover.style.display = "block", this._popover.style.top = "0", this._popover.style.left = "0"), this._popover.offsetHeight;
 		let n = this._calculatePosition();
-		this._popover.style.top = `${n.top}px`, this._popover.style.left = `${n.left}px`, t || (this._popover.style.visibility = "visible", e && (!e.style.opacity || e.style.opacity === "") && (e.style.transform = "scale(0.97) translateY(10px)", e.style.opacity = "0", e.style.transition = "all 200ms ease-out", requestAnimationFrame(() => {
+		this._popover.style.top = `${n.top}px`, this._popover.style.left = `${n.left}px`, t || (this._popover.style.visibility = "visible", e && (!e.style.opacity || e.style.opacity === "") && (e.style.transform = "scale(0.97) translateY(10px)", e.style.opacity = "0", e.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
 				e.style.transform = "scale(1) translateY(0)", e.style.opacity = "1";
 			});
@@ -1992,8 +2003,6 @@ var m = class extends HTMLElement {
 			"h-5",
 			"rounded",
 			"border-2",
-			"transition-all",
-			"duration-200",
 			"outline-none",
 			"focus:outline-none",
 			"focus-visible:ring-2",
@@ -2003,12 +2012,12 @@ var m = class extends HTMLElement {
 			"disabled:opacity-40",
 			"disabled:cursor-not-allowed"
 		], n = this._checked ? [
-			"bg-slate-800",
-			"dark:bg-slate-600",
-			e ? "border-red-300 dark:border-red-300" : "border-slate-800 dark:border-slate-600"
+			"bg-neutral-800",
+			"dark:bg-neutral-600",
+			e ? "border-red-300 dark:border-red-300" : "border-neutral-800 dark:border-neutral-600"
 		] : [
 			"bg-white",
-			"dark:bg-gray-700",
+			"dark:bg-mint-elevated",
 			e ? "border-red-300 dark:border-red-300" : "border-gray-300 dark:border-gray-500"
 		];
 		return [...t, ...n].join(" ");
@@ -2076,7 +2085,7 @@ var m = class extends HTMLElement {
 		}, this._checkbox.addEventListener("change", this._changeHandler), this._mousedownHandler = (e) => {
 			e.stopPropagation();
 			let t = this.querySelector(".mint-checkbox-wrapper");
-			t && !this.isDisabled() && (t.classList.add("mint-checkbox-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)"));
+			t && !this.isDisabled() && (t.classList.add("mint-checkbox-active"), this._checked ? (t.style.backgroundColor = "rgb(38 38 38)", 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(64 64 64)" : t.style.backgroundColor = "rgb(48 48 48)"));
 		}, this._mouseupHandler = (e) => {
 			e.stopPropagation();
 			let t = this.querySelector(".mint-checkbox-wrapper");
@@ -2095,7 +2104,7 @@ var m = class extends HTMLElement {
 		}, this._checkbox.addEventListener("focus", this._focusHandler), this._checkbox.addEventListener("blur", this._blurHandler), this._touchstartHandler = (e) => {
 			e.stopPropagation();
 			let t = this.querySelector(".mint-checkbox-wrapper");
-			t && !this.isDisabled() && (t.classList.add("mint-checkbox-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)"));
+			t && !this.isDisabled() && (t.classList.add("mint-checkbox-active"), this._checked ? (t.style.backgroundColor = "rgb(38 38 38)", 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(64 64 64)" : t.style.backgroundColor = "rgb(48 48 48)"));
 		}, this._touchendHandler = (e) => {
 			e.stopPropagation();
 			let t = this.querySelector(".mint-checkbox-wrapper");
@@ -2135,9 +2144,9 @@ var m = class extends HTMLElement {
 		if (e) {
 			t || (t = document.createElement("div"), t.className = "mint-checkbox-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center gap-2", n ? n.appendChild(t) : (this.style.position = "relative", this.appendChild(t)));
 			let e = t.querySelector(".mint-checkbox-skeleton-box");
-			if (e || (e = document.createElement("div"), e.className = "mint-checkbox-skeleton-box flex-shrink-0 w-5 h-5 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(e)), i) {
+			if (e || (e = document.createElement("div"), e.className = "mint-checkbox-skeleton-box flex-shrink-0 w-5 h-5 rounded bg-gray-200 dark:bg-mint-hover animate-pulse", t.appendChild(e)), i) {
 				let e = t.querySelector(".mint-checkbox-skeleton-label");
-				e || (e = document.createElement("div"), e.className = "mint-checkbox-skeleton-label h-4 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(e));
+				e || (e = document.createElement("div"), e.className = "mint-checkbox-skeleton-label h-4 w-24 rounded bg-gray-200 dark:bg-mint-hover animate-pulse", t.appendChild(e));
 			}
 			t.style.display = "flex", r && (r.style.visibility = "hidden", r.style.pointerEvents = "none"), i && (i.style.visibility = "hidden", i.style.pointerEvents = "none");
 		} else t && (t.style.display = "none"), r && (r.style.visibility = "visible", r.style.pointerEvents = "auto"), i && (i.style.visibility = "visible", i.style.pointerEvents = "auto");
@@ -2286,7 +2295,7 @@ var h = class extends HTMLElement {
 			t > 0 && e.remove();
 		});
 		let c = s.querySelector(".mint-choice-option-indicator");
-		c || (c = document.createElement("div"), c.className = "mint-choice-option-indicator", s.appendChild(c)), c.className = "mint-choice-option-indicator w-2 h-2 rounded-full bg-white transition-all duration-200 pointer-events-none", c.style.position = "absolute", c.style.top = "50%", c.style.left = "50%", c.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)", c.style.opacity = this._checked ? "1" : "0", this._updateVisualState(), this._renderSkeleton(e);
+		c || (c = document.createElement("div"), c.className = "mint-choice-option-indicator", s.appendChild(c)), c.className = "mint-choice-option-indicator w-2 h-2 rounded-full bg-white pointer-events-none", c.style.position = "absolute", c.style.top = "50%", c.style.left = "50%", c.style.transform = this._checked ? "translate(-50%, -50%) scale(1)" : "translate(-50%, -50%) scale(0)", c.style.opacity = this._checked ? "1" : "0", this._updateVisualState(), this._renderSkeleton(e);
 		let l = this.getInfo(), u = this.querySelector(".mint-choice-option-label-container");
 		if (i || l) {
 			u || (u = document.createElement("div"), u.className = "mint-choice-option-label-container flex flex-col gap-0.5", this.appendChild(u), Array.from(this.childNodes).forEach((e) => {
@@ -2308,12 +2317,10 @@ var h = class extends HTMLElement {
 			"h-[1rem]",
 			"rounded-full",
 			"border-2",
-			"transition-all",
-			"duration-200",
 			"flex-shrink-0",
 			"mt-0.5"
 		];
-		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-900", "border-gray-300", "dark:border-gray-500"), t.join(" ");
+		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-mint-elevated", "border-gray-300", "dark:border-gray-500"), t.join(" ");
 	}
 	_updateVisualState() {
 		let e = this.querySelector(".mint-choice-option-wrapper");
@@ -2326,7 +2333,7 @@ var h = class extends HTMLElement {
 		if (e) {
 			t || (t = document.createElement("div"), t.className = "mint-choice-option-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center gap-2", n ? (n.classList.contains("relative") || n.classList.add("relative"), n.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
 			let e = t.querySelector(".mint-choice-option-skeleton-radio");
-			if (e || (e = document.createElement("div"), e.className = "mint-choice-option-skeleton-radio flex-shrink-0 w-5 h-5 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(e)), t.style.display = "flex", n) {
+			if (e || (e = document.createElement("div"), e.className = "mint-choice-option-skeleton-radio flex-shrink-0 w-5 h-5 rounded-full bg-gray-200 dark:bg-mint-hover animate-pulse", t.appendChild(e)), t.style.display = "flex", n) {
 				let e = n.querySelector("input[type=\"radio\"]"), t = n.querySelector(".mint-choice-option-indicator");
 				e && (e.style.visibility = "hidden"), t && (t.style.visibility = "hidden"), n.style.pointerEvents = "none";
 			}
@@ -2544,9 +2551,9 @@ var g = class extends HTMLElement {
 				let e = document.createElement("div");
 				e.className = "mint-choice-option-skeleton flex items-center gap-3";
 				let n = document.createElement("div");
-				n.className = "flex-shrink-0 w-5 h-5 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse", e.appendChild(n);
+				n.className = "flex-shrink-0 w-5 h-5 rounded-full bg-gray-200 dark:bg-mint-hover animate-pulse", e.appendChild(n);
 				let r = document.createElement("div");
-				r.className = "h-4 w-20 rounded bg-gray-200 dark:bg-gray-700 animate-pulse", e.appendChild(r), t.appendChild(e);
+				r.className = "h-4 w-20 rounded bg-gray-200 dark:bg-mint-hover animate-pulse", e.appendChild(r), t.appendChild(e);
 			}
 			t.style.display = "flex", r && (r.style.opacity = "0", r.style.pointerEvents = "none");
 		} else t && (t.style.display = "none"), r && (r.style.opacity = "1", r.style.pointerEvents = "auto");
@@ -2684,11 +2691,9 @@ var _ = class extends HTMLElement {
 			"rounded-lg",
 			"box-border",
 			"bg-white",
-			"dark:bg-gray-900",
+			"dark:bg-mint-elevated",
 			"text-gray-900",
 			"dark:text-white",
-			e ? "transition-colors transition-opacity" : "transition-all",
-			"duration-200",
 			"outline-none",
 			"focus:outline-none",
 			"disabled:opacity-40",
@@ -2696,7 +2701,7 @@ var _ = class extends HTMLElement {
 			"readonly:cursor-default",
 			e ? "resize-y" : "",
 			r ? "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" : ""
-		], o = ["border-2", i ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700"], s = [
+		], o = ["border-2", i ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-mint-divider"], s = [
 			"focus-visible:ring-2",
 			"focus-visible:ring-offset-1",
 			i ? "focus-visible:ring-red-400 dark:focus-visible:ring-red-500" : "focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500"
@@ -2776,9 +2781,9 @@ var _ = class 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 && !r && (this._colorPickerWrapper.remove(), this._colorPickerWrapper = null, this._colorPicker = null, this._colorTextInput = null), f && !t ? this._icon ? this._icon.setAttribute("name", f) : (this._icon = document.createElement("mint-icon"), this._icon.setAttribute("name", f), 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(), 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";
+				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 pointer-events-auto bg-gray-100 dark:bg-mint-hover active:bg-gray-200 dark:active:bg-mint-elevated rounded";
 				let e = document.createElement("mint-icon");
-				e.setAttribute("name", "caret-up"), e.className = "w-[1rem] h-[1rem]", this._numberIncrementButton.appendChild(e), 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";
+				e.setAttribute("name", "caret-up"), e.className = "w-[1rem] h-[1rem]", this._numberIncrementButton.appendChild(e), 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 pointer-events-auto bg-gray-100 dark:bg-mint-hover active:bg-gray-200 dark:active:bg-mint-elevated rounded";
 				let t = document.createElement("mint-icon");
 				t.setAttribute("name", "caret-down"), t.className = "w-[1rem] h-[1rem]", this._numberDecrementButton.appendChild(t), this._numberSpinnerContainer.appendChild(this._numberDecrementButton), this._numberIncrementButton.addEventListener("click", (e) => {
 					if (e.preventDefault(), e.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
@@ -2865,7 +2870,7 @@ var _ = class extends HTMLElement {
 			t || (t = document.createElement("div"), t.className = "mint-input-skeleton-container absolute inset-0 z-10 pointer-events-none", n ? (n.classList.contains("relative") || n.classList.add("relative"), n.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
 			let e = t.querySelector(".mint-input-skeleton");
 			if (!e) {
-				e = document.createElement("div"), e.className = "mint-input-skeleton w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse";
+				e = document.createElement("div"), e.className = "mint-input-skeleton w-full rounded-lg bg-gray-200 dark:bg-mint-hover animate-pulse";
 				let n = this._isTextarea(), r = this.getRows();
 				if (n) {
 					let t = r * 24 + 12;
@@ -3465,10 +3470,10 @@ var v = class extends HTMLElement {
 	}
 	_getFieldContainerClass(e, t) {
 		return [
-			"mint-date-fields relative w-full pl-10 pr-3.5 py-1.5 min-h-[2rem] text-sm font-medium rounded-lg box-border bg-white dark:bg-gray-900 dark:border dark:border-gray-700 text-gray-900 dark:text-white",
+			"mint-date-fields relative w-full pl-10 pr-3.5 py-1.5 min-h-[2rem] text-sm font-medium rounded-lg box-border bg-white dark:bg-mint-elevated dark:border dark:border-mint-divider text-gray-900 dark:text-white",
 			"border-2",
-			e ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700",
-			"transition-all duration-200 outline-none focus-within:ring-2 focus-within:ring-offset-1",
+			e ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-mint-divider",
+			"outline-none focus-within:ring-2 focus-within:ring-offset-1",
 			e ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500",
 			"flex items-center gap-1"
 		].join(" ") + (t ? " opacity-40 cursor-not-allowed" : "");
@@ -3572,7 +3577,7 @@ var v = class extends HTMLElement {
 	}
 	_buildCalendar() {
 		if (!this._popover) return;
-		this._calendarContainer && this._calendarContainer.parentNode && this._calendarContainer.remove(), this._calendarContainer = document.createElement("div"), this._calendarContainer.className = "mint-date-calendar bg-white dark:bg-gray-900 dark:border dark:border-gray-700 rounded-lg p-4 w-[22rem] md:w-auto md:min-w-[28rem]";
+		this._calendarContainer && this._calendarContainer.parentNode && this._calendarContainer.remove(), this._calendarContainer = document.createElement("div"), this._calendarContainer.className = "mint-date-calendar bg-white dark:bg-mint-elevated dark:border dark:border-mint-divider rounded-lg p-4 w-[22rem] md:w-auto md:min-w-[28rem]";
 		let e = this.getMode();
 		e === "month" && this._viewMode === "calendar" ? this._viewMode = "month" : e === "year" && this._viewMode === "calendar" ? this._viewMode = "year" : e === "default" && this._viewMode !== "month" && this._viewMode !== "year" && (this._viewMode = "calendar"), this._viewMode === "calendar" ? this._buildCalendarView() : this._viewMode === "month" ? this._buildMonthView() : this._viewMode === "year" && this._buildYearView();
 		let t = this._popover.querySelector(".popover-content");
@@ -3605,7 +3610,7 @@ var v = class extends HTMLElement {
 			"Fri",
 			"Sat"
 		], a = [...i.slice(r), ...i.slice(0, r)], o = this.getShortcuts(), s = o.length > 0;
-		this._calendarContainer.className = s ? "mint-date-calendar bg-white dark:bg-gray-900 dark:border dark:border-gray-700 rounded-lg p-4 w-[18rem] md:w-auto md:min-w-[28rem]" : "mint-date-calendar bg-white dark:bg-gray-900 dark:border dark:border-gray-700 rounded-lg p-4 w-[18rem] md:min-w-[18rem]";
+		this._calendarContainer.className = s ? "mint-date-calendar bg-white dark:bg-mint-elevated dark:border dark:border-mint-divider rounded-lg p-4 w-[18rem] md:w-auto md:min-w-[28rem]" : "mint-date-calendar bg-white dark:bg-mint-elevated dark:border dark:border-mint-divider rounded-lg p-4 w-[18rem] md:min-w-[18rem]";
 		let c = document.createElement("div");
 		c.className = "flex flex-col md:flex-row md:gap-6 md:items-start";
 		let l = document.createElement("div");
@@ -3613,7 +3618,7 @@ var v = class extends HTMLElement {
 		let u = document.createElement("div");
 		u.className = "flex items-center justify-between mb-4";
 		let d = document.createElement("button");
-		d.type = "button", d.tabIndex = 0, d.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", d.setAttribute("data-keep-popover-open", "true");
+		d.type = "button", d.tabIndex = 0, d.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-mint-hover text-gray-600 dark:text-gray-300 flex items-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", d.setAttribute("data-keep-popover-open", "true");
 		let f = document.createElement("mint-icon");
 		f.setAttribute("name", "caret-left"), f.className = "w-4 h-4", d.appendChild(f), d.addEventListener("click", () => {
 			let e = this._currentMonth, t = this._currentYear;
@@ -3622,7 +3627,7 @@ var v = class extends HTMLElement {
 		let p = document.createElement("div");
 		p.className = "flex items-center gap-2";
 		let m = document.createElement("button");
-		m.type = "button", m.tabIndex = 0, m.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", m.setAttribute("data-keep-popover-open", "true"), m.textContent = n[this._currentMonth];
+		m.type = "button", m.tabIndex = 0, m.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 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"), m.textContent = n[this._currentMonth];
 		let h = () => {
 			let e = this.getMode();
 			e !== "month" && e !== "year" && (this._viewMode = "month", this._buildCalendar());
@@ -3631,11 +3636,11 @@ var v = class extends HTMLElement {
 			e.preventDefault(), h();
 		}, { passive: !1 }), p.appendChild(m);
 		let g = document.createElement("button");
-		g.type = "button", g.tabIndex = 0, g.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", g.setAttribute("data-keep-popover-open", "true"), g.textContent = String(this._currentYear), g.addEventListener("click", () => {
+		g.type = "button", g.tabIndex = 0, g.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 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", g.setAttribute("data-keep-popover-open", "true"), g.textContent = String(this._currentYear), g.addEventListener("click", () => {
 			this.getMode() !== "year" && (this._viewMode = "year", this._buildCalendar());
 		}), p.appendChild(g), u.appendChild(p);
 		let _ = document.createElement("button");
-		_.type = "button", _.tabIndex = 0, _.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", _.setAttribute("data-keep-popover-open", "true");
+		_.type = "button", _.tabIndex = 0, _.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-mint-hover text-gray-600 dark:text-gray-300 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", _.setAttribute("data-keep-popover-open", "true");
 		let v = document.createElement("mint-icon");
 		v.setAttribute("name", "caret-right"), v.className = "w-4 h-4", _.appendChild(v);
 		let y = () => {
@@ -3662,8 +3667,8 @@ var v = class extends HTMLElement {
 			} else c && (d || f) && m ? d && f ? s = "rounded-md" : d ? s = "rounded-l-md" : f && (s = "rounded-r-md") : i && !this._isRange || i && this._isRange && !this._selectedEndDate ? s = "rounded-md" : a && c && m && (s = "rounded-none");
 			let h = document.createElement("button");
 			h.type = "button", h.disabled = !!o, h.tabIndex = o ? -1 : 0;
-			let g = `w-full h-8 ${s} 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`, _ = i || c && p && m;
-			return n ? g += _ ? " bg-slate-800 dark:bg-slate-600 text-white" : a ? " bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : r ? " 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" : g += _ ? " bg-slate-800 dark:bg-slate-600 text-white" : a ? " bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : " text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700", g += o ? " opacity-40 cursor-not-allowed" : "", h.className = g, h.textContent = t.toString(), o || (h.addEventListener("click", (t) => {
+			let g = `w-full h-8 ${s} border-0 text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500`, _ = i || c && p && m;
+			return n ? g += _ ? " bg-slate-800 dark:bg-slate-600 text-white" : a ? " bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : r ? " text-gray-900 dark:text-gray-100 font-semibold" : " text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-mint-hover" : g += _ ? " bg-slate-800 dark:bg-slate-600 text-white" : a ? " bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : " text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-mint-hover", g += o ? " opacity-40 cursor-not-allowed" : "", h.className = g, h.textContent = t.toString(), o || (h.addEventListener("click", (t) => {
 				t.preventDefault(), t.stopPropagation(), this._handleDateClick(e);
 			}), h.addEventListener("touchstart", (t) => {
 				t.preventDefault(), t.stopPropagation(), this._isTouchActive = !0, this._touchStartDate = e, this._touchStartElement = h, h.classList.add("active", "bg-gray-200", "dark:bg-gray-600");
@@ -3705,7 +3710,7 @@ var v = class extends HTMLElement {
 			n && !x.contains(n) && (this._hoveredDate = null, this._buildCalendar());
 		}, { passive: !0 })), s) {
 			let e = document.createElement("div");
-			e.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";
+			e.className = "mb-4 pb-4 border-b border-gray-200 dark:border-mint-divider md:mb-0 md:pb-0 md:border-b-0 md:border-r md:border-r-gray-200 dark:md:border-r-mint-divider md:pr-6 md:mr-0 md:w-32 md:flex-shrink-0 md:h-full md:flex md:flex-col";
 			let t = document.createElement("div");
 			t.className = "relative md:relative md:flex-1 md:min-h-0";
 			let n = document.createElement("div");
@@ -3713,13 +3718,13 @@ var v = class extends HTMLElement {
 			let r = document.createElement("style");
 			r.textContent = "\n        .mint-date-shortcuts-row::-webkit-scrollbar {\n          display: none;\n        }\n        @media (min-width: 768px) {\n          .mint-date-shortcuts-row {\n            height: 17rem;\n            overflow-y: auto;\n          }\n          .mint-date-shortcuts-row::-webkit-scrollbar {\n            display: block;\n            width: 4px;\n          }\n          .mint-date-shortcuts-row::-webkit-scrollbar-track {\n            background: transparent;\n          }\n          .mint-date-shortcuts-row::-webkit-scrollbar-thumb {\n            background: rgba(0, 0, 0, 0.2);\n            border-radius: 2px;\n          }\n          .dark .mint-date-shortcuts-row::-webkit-scrollbar-thumb {\n            background: rgba(255, 255, 255, 0.2);\n          }\n        }\n      ", n.classList.add("mint-date-shortcuts-row"), document.head.querySelector("style[data-mint-date-shortcuts]") || (r.setAttribute("data-mint-date-shortcuts", "true"), document.head.appendChild(r));
 			let i = document.createElement("div");
-			i.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", t.appendChild(i);
+			i.className = "absolute left-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-r from-white dark:from-mint-elevated to-transparent opacity-0 md:hidden", t.appendChild(i);
 			let a = document.createElement("div");
-			a.className = "absolute right-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-l from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200 md:hidden", t.appendChild(a);
+			a.className = "absolute right-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-l from-white dark:from-mint-elevated to-transparent opacity-100 md:hidden", t.appendChild(a);
 			let s = document.createElement("div");
-			s.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", t.appendChild(s);
+			s.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-mint-elevated to-transparent opacity-0", t.appendChild(s);
 			let l = document.createElement("div");
-			l.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", t.appendChild(l);
+			l.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-mint-elevated to-transparent opacity-100", t.appendChild(l);
 			let u = () => {
 				if (window.innerWidth >= 768) {
 					let e = n.scrollTop, t = n.scrollHeight, r = n.clientHeight;
@@ -3731,7 +3736,7 @@ var v = class extends HTMLElement {
 			};
 			n.addEventListener("scroll", u), window.addEventListener("resize", u), setTimeout(u, 0), o.forEach((e) => {
 				let 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 = e.label, t.setAttribute("data-keep-popover-open", "true");
+				t.type = "button", t.tabIndex = 0, t.className = "px-3 py-1.5 text-xs font-medium rounded-md bg-gray-100 dark:bg-mint-hover text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-mint-elevated 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 = e.label, t.setAttribute("data-keep-popover-open", "true");
 				let r = () => {
 					let t = e.action();
 					if (t) {
@@ -3780,7 +3785,7 @@ var v = class extends HTMLElement {
 		], t = document.createElement("div");
 		t.className = "flex items-center justify-between mb-4";
 		let n = document.createElement("button");
-		n.type = "button", n.tabIndex = 0, n.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", n.setAttribute("data-keep-popover-open", "true");
+		n.type = "button", n.tabIndex = 0, n.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-mint-hover text-gray-600 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", n.setAttribute("data-keep-popover-open", "true");
 		let r = document.createElement("mint-icon");
 		r.setAttribute("name", "caret-left"), r.className = "w-4 h-4", n.appendChild(r);
 		let i = () => {
@@ -3791,7 +3796,7 @@ var v = class extends HTMLElement {
 			e.preventDefault(), i();
 		}, { passive: !1 }), t.appendChild(n);
 		let a = document.createElement("button");
-		a.type = "button", a.tabIndex = 0, a.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 rounded px-1", a.setAttribute("data-keep-popover-open", "true"), a.textContent = String(this._currentYear);
+		a.type = "button", a.tabIndex = 0, a.className = "text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 rounded px-1", a.setAttribute("data-keep-popover-open", "true"), a.textContent = String(this._currentYear);
 		let o = () => {
 			this.getMode() !== "year" && (this._viewMode = "year", this._buildCalendar());
 		};
@@ -3799,7 +3804,7 @@ var v = class extends HTMLElement {
 			e.preventDefault(), o();
 		}, { passive: !1 }), t.appendChild(a);
 		let s = document.createElement("button");
-		s.type = "button", s.tabIndex = 0, s.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", s.setAttribute("data-keep-popover-open", "true");
+		s.type = "button", s.tabIndex = 0, s.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-mint-hover text-gray-600 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", s.setAttribute("data-keep-popover-open", "true");
 		let c = document.createElement("mint-icon");
 		c.setAttribute("name", "caret-right"), c.className = "w-4 h-4", s.appendChild(c);
 		let l = () => {
@@ -3812,7 +3817,7 @@ var v = class extends HTMLElement {
 		let u = document.createElement("div");
 		u.className = "grid grid-cols-3 gap-2", e.forEach((e, t) => {
 			let n = document.createElement("button");
-			n.type = "button", n.tabIndex = 0, n.setAttribute("data-keep-popover-open", "true"), n.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 ${this._currentMonth === t ? "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"}`, n.textContent = e;
+			n.type = "button", n.tabIndex = 0, n.setAttribute("data-keep-popover-open", "true"), n.className = `p-2 rounded text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${this._currentMonth === t ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-mint-hover"}`, n.textContent = e;
 			let r = () => {
 				if (this.getMode() === "month") {
 					let e = new Date(this._currentYear, t, 1), n = this.getFormat(), r = this._formatDate(e, n);
@@ -3842,7 +3847,7 @@ var v = class extends HTMLElement {
 		let e = this._currentYear - 6, t = this._currentYear + 6, n = document.createElement("div");
 		n.className = "flex items-center justify-between mb-4";
 		let r = document.createElement("button");
-		r.type = "button", r.tabIndex = 0, r.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", r.setAttribute("data-keep-popover-open", "true");
+		r.type = "button", r.tabIndex = 0, r.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-mint-hover text-gray-600 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", r.setAttribute("data-keep-popover-open", "true");
 		let i = document.createElement("mint-icon");
 		i.setAttribute("name", "caret-left"), i.className = "w-4 h-4", r.appendChild(i);
 		let a = () => {
@@ -3855,7 +3860,7 @@ var v = class extends HTMLElement {
 		let o = document.createElement("div");
 		o.className = "text-sm font-medium text-gray-900 dark:text-gray-100", o.textContent = `${e} - ${t}`, n.appendChild(o);
 		let s = document.createElement("button");
-		s.type = "button", s.tabIndex = 0, s.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", s.setAttribute("data-keep-popover-open", "true");
+		s.type = "button", s.tabIndex = 0, s.className = "p-1 rounded hover:bg-gray-100 dark:hover:bg-mint-hover text-gray-600 dark:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", s.setAttribute("data-keep-popover-open", "true");
 		let c = document.createElement("mint-icon");
 		c.setAttribute("name", "caret-right"), c.className = "w-4 h-4", s.appendChild(c);
 		let l = () => {
@@ -3869,7 +3874,7 @@ var v = class extends HTMLElement {
 		u.className = "grid grid-cols-3 gap-2";
 		for (let n = e; n <= t; n++) {
 			let e = document.createElement("button");
-			e.type = "button", e.tabIndex = 0, e.setAttribute("data-keep-popover-open", "true"), e.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 ${this._currentYear === n ? "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"}`, e.textContent = String(n), e.addEventListener("click", () => {
+			e.type = "button", e.tabIndex = 0, e.setAttribute("data-keep-popover-open", "true"), e.className = `p-2 rounded text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${this._currentYear === n ? "bg-slate-800 dark:bg-slate-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-mint-hover"}`, e.textContent = String(n), e.addEventListener("click", () => {
 				let e = this.getMode();
 				if (e === "year") {
 					let e = new Date(n, 0, 1), t = this.getFormat(), r = this._formatDate(e, t);
@@ -4073,7 +4078,7 @@ var v = class extends HTMLElement {
 		if (e) {
 			t || (t = document.createElement("div"), t.className = "mint-date-picker-skeleton-container absolute inset-0 z-10 pointer-events-none", r ? (r.classList.contains("relative") || r.classList.add("relative"), r.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
 			let e = t.querySelector(".mint-date-picker-skeleton");
-			e || (e = document.createElement("div"), e.className = "mint-date-picker-skeleton w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse", e.style.height = "2.25rem", t.appendChild(e)), t.style.display = "block", n && (n.style.visibility = "hidden", n.style.pointerEvents = "none"), this._displayEl && (this._displayEl.style.visibility = "hidden", this._displayEl.style.pointerEvents = "none");
+			e || (e = document.createElement("div"), e.className = "mint-date-picker-skeleton w-full rounded-lg bg-gray-200 dark:bg-mint-hover animate-pulse", e.style.height = "2.25rem", t.appendChild(e)), t.style.display = "block", n && (n.style.visibility = "hidden", n.style.pointerEvents = "none"), this._displayEl && (this._displayEl.style.visibility = "hidden", this._displayEl.style.pointerEvents = "none");
 		} else t && (t.style.display = "none"), n && (n.style.visibility = "visible", n.style.pointerEvents = "auto"), this._displayEl && (this._displayEl.style.visibility = "visible", this._displayEl.style.pointerEvents = "auto");
 	}
 	_getFocusableElements() {
@@ -4249,11 +4254,9 @@ var y = class extends HTMLElement {
 			"rounded-lg",
 			"box-border",
 			"bg-white",
-			"dark:bg-gray-900",
+			"dark:bg-mint-elevated",
 			"text-gray-900",
 			"dark:text-white",
-			"transition-all",
-			"duration-200",
 			"outline-none",
 			"focus:outline-none",
 			"disabled:opacity-40",
@@ -4262,7 +4265,7 @@ var y = class extends HTMLElement {
 			"bg-no-repeat",
 			"bg-right",
 			"cursor-pointer"
-		], r = ["border-2", e ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700"], i = [
+		], r = ["border-2", e ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-mint-divider"], i = [
 			"focus-visible:ring-2",
 			"focus-visible:ring-offset-1",
 			e ? "focus-visible:ring-red-400 dark:focus-visible:ring-red-500" : "focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500"
@@ -4340,7 +4343,7 @@ var y = class extends HTMLElement {
 			t || (t = document.createElement("div"), t.className = "mint-select-skeleton-container absolute inset-0 z-10 pointer-events-none", n ? (n.classList.contains("relative") || n.classList.add("relative"), n.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
 			let e = t.querySelector(".mint-select-skeleton");
 			if (!e) {
-				e = document.createElement("div"), e.className = "mint-select-skeleton w-full rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse";
+				e = document.createElement("div"), e.className = "mint-select-skeleton w-full rounded-lg bg-gray-200 dark:bg-mint-hover animate-pulse";
 				let n = this.isMultiple();
 				e.style.height = n ? "6rem" : "2.25rem", t.appendChild(e);
 			}
@@ -4415,7 +4418,7 @@ var b = class extends HTMLElement {
 		if (e) {
 			t || (t = document.createElement("div"), t.className = "mint-dropzone-skeleton-container absolute inset-0 z-10 pointer-events-none flex items-center justify-center", n ? (n.classList.contains("relative") || n.classList.add("relative"), n.appendChild(t)) : (this.style.position = "relative", this.appendChild(t)));
 			let e = t.querySelector(".mint-dropzone-skeleton");
-			if (e || (e = document.createElement("div"), e.className = "mint-dropzone-skeleton rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700 animate-pulse", e.style.width = "100%", e.style.height = "100%", t.appendChild(e)), t.style.display = "flex", n) {
+			if (e || (e = document.createElement("div"), e.className = "mint-dropzone-skeleton rounded-lg border-2 border-dashed border-gray-300 dark:border-mint-divider bg-gray-200 dark:bg-mint-hover animate-pulse", e.style.width = "100%", e.style.height = "100%", t.appendChild(e)), t.style.display = "flex", n) {
 				let e = n.querySelector(".mint-dropzone-icon"), t = n.querySelector(".mint-dropzone-label"), r = n.querySelector(".mint-dropzone-previews-wrapper"), i = this._fileInput;
 				if (e) {
 					let t = e;
@@ -4486,7 +4489,7 @@ var b = class extends HTMLElement {
 	}
 	_updateDragStateClass() {
 		if (!this._dropzone) return;
-		let e = this.isDisabled(), t = this.hasError(), n = `relative border-2 border-dashed rounded-lg transition-all duration-200 flex flex-col items-center ${this._selectedFiles.length > 0 ? "justify-start" : "justify-center"} cursor-pointer overflow-hidden`, r = this._isDragging ? "border-gray-400 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 dark:border-gray-700" : "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-500", i = t ? "border-red-300 dark:border-red-300 bg-red-50/50 dark:bg-red-900/30" : "", a = e ? "opacity-40 cursor-not-allowed" : "";
+		let e = this.isDisabled(), t = this.hasError(), n = `relative border-2 border-dashed rounded-lg flex flex-col items-center ${this._selectedFiles.length > 0 ? "justify-start" : "justify-center"} cursor-pointer overflow-hidden`, r = this._isDragging ? "border-gray-400 dark:border-gray-500 bg-gray-50 dark:bg-mint-elevated dark:border-mint-divider" : "border-gray-300 dark:border-mint-divider bg-white dark:bg-mint-elevated dark:border-mint-divider hover:border-gray-400 dark:hover:border-mint-divider", i = t ? "border-red-300 dark:border-red-300 bg-red-50/50 dark:bg-red-900/30" : "", a = e ? "opacity-40 cursor-not-allowed" : "";
 		this._dropzone.className = `${n} ${t ? i : r} ${a} focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500`.trim();
 	}
 	setupEventListeners() {
@@ -4638,9 +4641,9 @@ var b = class extends HTMLElement {
 		let 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((e, n) => {
 			let r = document.createElement("div");
-			if (r.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900", e.type.startsWith("image/")) {
+			if (r.className = "flex items-center gap-3 p-2 rounded border border-gray-200 dark:border-mint-divider bg-gray-50 dark:bg-mint-elevated", e.type.startsWith("image/")) {
 				let t = document.createElement("img");
-				t.className = "w-12 h-12 object-cover rounded border border-gray-200 dark:border-gray-700";
+				t.className = "w-12 h-12 object-cover rounded border border-gray-200 dark:border-mint-divider";
 				let n = URL.createObjectURL(e);
 				this._previewUrls.push(n), t.src = n, r.appendChild(t);
 			} else {
@@ -4650,18 +4653,18 @@ var b = class extends HTMLElement {
 			let i = document.createElement("div");
 			i.className = "flex-1 text-sm text-gray-800 dark:text-gray-100 truncate", i.textContent = e.name, r.appendChild(i);
 			let a = document.createElement("button");
-			a.type = "button", a.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";
+			a.type = "button", a.className = "text-gray-500 hover:bg-red-100 dark:hover:bg-red-900/30 flex items-center justify-center w-6 h-6 rounded-full";
 			let o = document.createElement("mint-icon");
 			o.setAttribute("name", "close"), o.className = "w-4 h-4", a.appendChild(o), a.addEventListener("click", (e) => {
 				e.preventDefault(), e.stopPropagation(), this._removeFileAt(n);
 			}), r.appendChild(a), t.appendChild(r);
 		});
-		let n = this.hasError(), r = this._isDragging, i = "from-white dark:from-gray-700";
-		n ? i = "from-red-50 dark:from-red-900/30" : r && (i = "from-gray-50 dark:from-gray-800");
+		let n = this.hasError(), r = this._isDragging, i = "from-white dark:from-mint-elevated";
+		n ? i = "from-red-50 dark:from-red-900/30" : r && (i = "from-gray-50 dark:from-mint-elevated");
 		let a = document.createElement("div");
-		a.className = `absolute top-0 left-0 right-0 h-4 pointer-events-none z-10 bg-gradient-to-b ${i} to-transparent opacity-0 transition-opacity duration-200`, e.appendChild(a);
+		a.className = `absolute top-0 left-0 right-0 h-4 pointer-events-none z-10 bg-gradient-to-b ${i} to-transparent opacity-0`, e.appendChild(a);
 		let o = document.createElement("div");
-		o.className = `absolute bottom-0 left-0 right-0 h-4 pointer-events-none z-10 bg-gradient-to-t ${i} to-transparent opacity-100 transition-opacity duration-200`, e.appendChild(o);
+		o.className = `absolute bottom-0 left-0 right-0 h-4 pointer-events-none z-10 bg-gradient-to-t ${i} to-transparent opacity-100`, e.appendChild(o);
 		let s = () => {
 			let e = t.scrollTop, n = t.scrollHeight, r = t.clientHeight;
 			e > 0 ? a.style.opacity = "1" : a.style.opacity = "0", e + r < n - 1 ? o.style.opacity = "1" : o.style.opacity = "0";
@@ -5562,7 +5565,7 @@ var S = class extends HTMLElement {
 		]);
 		let a = e.querySelector("thead");
 		if (a) {
-			this._setClasses(a, ["bg-[#F7F7F7]", "dark:bg-gray-800"]);
+			this._setClasses(a, ["bg-[#F7F7F7]", "dark:bg-mint-elevated"]);
 			let e = a.querySelectorAll("th");
 			e.forEach((t, n) => {
 				let r = t.querySelector("mint-icon"), i = r?.getAttribute("name") || "", a = r !== null && i !== "ellipsis";
@@ -5575,8 +5578,8 @@ var S = class extends HTMLElement {
 					"py-2",
 					"border-b",
 					"border-gray-200",
-					"dark:border-gray-700"
-				]), a && t.classList.add("cursor-pointer", "bg-[#F7F7F7]", "dark:bg-gray-800", "hover:bg-gray-100", "dark:hover:bg-gray-700", "transition-colors"), n === 0 && t.classList.add("pl-6"), n === e.length - 1 && t.classList.add("pr-6");
+					"dark:border-mint-divider"
+				]), a && t.classList.add("cursor-pointer", "bg-[#F7F7F7]", "dark:bg-mint-elevated", "hover:bg-gray-100", "dark:hover:bg-mint-hover"), n === 0 && t.classList.add("pl-6"), n === e.length - 1 && t.classList.add("pr-6");
 			});
 		}
 		let o = e.querySelector("tbody");
@@ -5586,11 +5589,11 @@ var S = class extends HTMLElement {
 				let a = n.hasAttribute("data-row-clickable");
 				this._setClasses(n, [
 					"bg-white",
-					"dark:bg-gray-900",
+					"dark:bg-mint-canvas",
 					"border-b",
 					"border-gray-200",
-					"dark:border-gray-700"
-				]), a && n.classList.add("cursor-pointer", "hover:bg-gray-50", "dark:hover:bg-gray-800", "transition-colors"), i === e.length - 1 && n.classList.remove("border-b");
+					"dark:border-mint-divider"
+				]), a && n.classList.add("cursor-pointer", "hover:bg-gray-50", "dark:hover:bg-mint-elevated"), i === e.length - 1 && n.classList.remove("border-b");
 				let o = n.querySelectorAll("td");
 				o.forEach((e, n) => {
 					this._setClasses(e, [
@@ -5605,7 +5608,7 @@ var S = class extends HTMLElement {
 		let s = e.querySelector("tfoot");
 		s && (this._setClasses(s, [
 			"bg-[#F7F7F7]",
-			"dark:bg-gray-800",
+			"dark:bg-mint-elevated",
 			"font-semibold"
 		]), s.querySelectorAll("td").forEach((e) => {
 			this._setClasses(e, [
@@ -5615,7 +5618,7 @@ var S = class extends HTMLElement {
 				"py-2",
 				"border-t",
 				"border-gray-200",
-				"dark:border-gray-700"
+				"dark:border-mint-divider"
 			]), this._restoreCell(e);
 		})), this._observer && this._observeChanges();
 	}
@@ -5674,7 +5677,7 @@ var C = class extends HTMLElement {
 		this._render();
 	}
 	_render() {
-		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-900", "text-gray-900", "dark:text-gray-100", "text-sm", "font-medium"), !this._root) {
+		if (this.classList.add("inline-flex", "items-center", "gap-2", "px-3", "py-1", "rounded-full", "border", "border-gray-200", "dark:border-mint-divider", "bg-gray-100", "dark:bg-mint-elevated", "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;) {
 				let e = this.firstChild;
 				if (e === this._root) break;
@@ -5703,8 +5706,6 @@ var C = class extends HTMLElement {
 			"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"
@@ -5758,14 +5759,12 @@ var w = class extends HTMLElement {
 						"min-h-[2rem]",
 						"rounded-lg",
 						"border-2",
-						e ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700",
+						e ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-mint-divider",
 						"bg-white",
-						"dark:bg-gray-900",
+						"dark:bg-mint-elevated",
 						"focus-within:ring-2",
 						"focus-within:ring-offset-1",
-						e ? "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"
+						e ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500"
 					];
 					this._container.className = t.join(" ");
 				}
@@ -5840,14 +5839,12 @@ var w = class extends HTMLElement {
 				"min-h-[2rem]",
 				"rounded-lg",
 				"border-2",
-				r ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700",
+				r ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-mint-divider",
 				"bg-white",
-				"dark:bg-gray-800",
+				"dark:bg-mint-elevated",
 				"focus-within:ring-2",
 				"focus-within:ring-offset-1",
-				r ? "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"
+				r ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500"
 			];
 			this._container.className = e.join(" "), this._chipsWrap = document.createElement("div"), this._chipsWrap.className = "flex flex-wrap items-center gap-2", this._chipsWrap.addEventListener("dragover", (e) => {
 				this.hasAttribute("sortable") && e.preventDefault();
@@ -5881,14 +5878,12 @@ var w = class extends HTMLElement {
 				"min-h-[2rem]",
 				"rounded-lg",
 				"border-2",
-				r ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-gray-700",
+				r ? "border-red-300 dark:border-red-300" : "border-gray-200 dark:border-mint-divider",
 				"bg-white",
-				"dark:bg-gray-800",
+				"dark:bg-mint-elevated",
 				"focus-within:ring-2",
 				"focus-within:ring-offset-1",
-				r ? "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"
+				r ? "focus-within:ring-red-400 dark:focus-within:ring-red-500" : "focus-within:ring-gray-400 dark:focus-within:ring-gray-500"
 			];
 			this._container.className = e.join(" ");
 		}
@@ -5908,7 +5903,7 @@ var w = class extends HTMLElement {
 		if (!t) return;
 		t.classList.contains("relative") || t.classList.add("relative");
 		let n = t.querySelector(".mint-tags-skeleton");
-		e ? (n || (n = document.createElement("div"), n.className = "mint-tags-skeleton absolute inset-0 z-10 pointer-events-none rounded-lg bg-gray-200 dark:bg-gray-700 animate-pulse", t.appendChild(n)), n.style.display = "block", this._chipsWrap && (this._chipsWrap.style.visibility = "hidden", this._chipsWrap.style.pointerEvents = "none"), this._input && (this._input.style.visibility = "hidden", this._input.style.pointerEvents = "none")) : (n && (n.style.display = "none"), this._chipsWrap && (this._chipsWrap.style.visibility = "visible", this._chipsWrap.style.pointerEvents = "auto"), this._input && (this._input.style.visibility = "visible", this._input.style.pointerEvents = "auto"));
+		e ? (n || (n = document.createElement("div"), n.className = "mint-tags-skeleton absolute inset-0 z-10 pointer-events-none rounded-lg bg-gray-200 dark:bg-mint-hover animate-pulse", t.appendChild(n)), n.style.display = "block", this._chipsWrap && (this._chipsWrap.style.visibility = "hidden", this._chipsWrap.style.pointerEvents = "none"), this._input && (this._input.style.visibility = "hidden", this._input.style.pointerEvents = "none")) : (n && (n.style.display = "none"), this._chipsWrap && (this._chipsWrap.style.visibility = "visible", this._chipsWrap.style.pointerEvents = "auto"), this._input && (this._input.style.visibility = "visible", this._input.style.pointerEvents = "auto"));
 	}
 	_renderErrorState() {
 		let e = this.hasError(), t = this.getErrorMessage(), n = this.querySelector(".mint-tags-error");
@@ -6063,7 +6058,7 @@ var T = class extends HTMLElement {
 		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.getAttribute("disabled") === "true" ? this.classList.add("cursor-not-allowed", "opacity-50") : this.classList.add("cursor-pointer"), this.getAttribute("role") || this.setAttribute("role", "button"), this.getAttribute("tabindex") || this.setAttribute("tabindex", "0");
+		this.classList.add("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.getAttribute("disabled") === "true" ? this.classList.add("cursor-not-allowed", "opacity-50") : this.classList.add("cursor-pointer"), this.getAttribute("role") || this.setAttribute("role", "button"), this.getAttribute("tabindex") || this.setAttribute("tabindex", "0");
 	}
 	_setupEventListeners() {
 		this._clickHandler = (e) => {
@@ -6143,11 +6138,11 @@ var E = class extends HTMLElement {
 	}
 	getIconColorClasses() {
 		switch (this.getTone()) {
-			case "info": return "text-blue-600 dark:text-blue-400";
+			case "info": return "text-gray-700 dark:text-gray-300";
 			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";
+			default: return "text-gray-700 dark:text-gray-300";
 		}
 	}
 	getHeadingColorClasses() {
@@ -6155,20 +6150,20 @@ var E = class extends HTMLElement {
 	}
 	getHeaderBackgroundClasses() {
 		switch (this.getTone()) {
-			case "info": return "bg-blue-100 dark:bg-blue-900/30";
+			case "info": return "bg-gray-100 dark:bg-white/5";
 			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";
+			default: return "bg-gray-100 dark:bg-white/5";
 		}
 	}
 	getBorderClasses() {
 		switch (this.getTone()) {
-			case "info": return "border-blue-200 dark:border-blue-800";
+			case "info": return "border-gray-200 dark:border-mint-divider";
 			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";
+			default: return "border-gray-200 dark:border-mint-divider";
 		}
 	}
 	getAriaLive() {
@@ -6176,7 +6171,7 @@ var E = class extends HTMLElement {
 	}
 	render() {
 		let e = this.getTone(), t = this.getHeading(), n = 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()}`;
+		this.className = `box-border m-0 p-0 border-0 align-baseline block rounded-lg border shadow-sm overflow-hidden ${this.getBorderClasses()}`;
 		let r = this.getAriaLive();
 		this.setAttribute("role", "alert"), this.setAttribute("aria-live", r), e === "danger" ? this.setAttribute("aria-atomic", "true") : this.removeAttribute("aria-atomic");
 		let i = [];
@@ -6186,7 +6181,7 @@ var E = class extends HTMLElement {
 			e !== this._headerWrapper && e !== this._bodyWrapper && e !== this._iconElement && e !== this._headingElement && e !== this._dismissButton && i.push(e);
 		}), 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), n) {
-			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");
+			this._dismissButton = document.createElement("button"), this._dismissButton.className = "flex-shrink-0 p-1 rounded hover:bg-black/10 dark:hover:bg-white/10", this._dismissButton.setAttribute("aria-label", "Dismiss alert"), this._dismissButton.setAttribute("type", "button");
 			let e = document.createElement("mint-icon");
 			e.setAttribute("name", "close"), e.className = "w-4 h-4 text-gray-700 dark:text-gray-300", this._dismissButton.appendChild(e), this._dismissHandler = (e) => {
 				e.preventDefault(), e.stopPropagation(), this.dispatchEvent(new CustomEvent("dismissed", {
@@ -6195,7 +6190,7 @@ var E = class extends HTMLElement {
 				})), 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-900", i.forEach((e) => {
+		this._bodyWrapper = document.createElement("div"), this._bodyWrapper.className = "px-4 py-3 bg-white dark:bg-mint-elevated", i.forEach((e) => {
 			this._bodyWrapper.appendChild(e);
 		}), this.appendChild(this._headerWrapper), this.appendChild(this._bodyWrapper);
 	}
@@ -6433,7 +6428,7 @@ var D = class extends HTMLElement {
 		}
 		let n = this.querySelector(`#search-${this._tableId}`), r = document.activeElement === n || n?.querySelector("input") === document.activeElement, i = this._search, a = "";
 		if (!((this._fetching || this._loading) && !this._loaded && !this._sorting) && (e.forEach((e, t) => {
-			let n = typeof this._configuration.onRowClick == "function", r = n ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" : "";
+			let n = typeof this._configuration.onRowClick == "function", r = n ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800" : "";
 			a += `<tr data-row-index="${t}" ${n ? "data-row-clickable=\"true\"" : ""}${r ? ` class="${r}"` : ""}>`, this._configuration.columns.forEach((n, r) => {
 				if (n.hidden) return;
 				let i = !n.show || n.show(this, e);
@@ -6443,7 +6438,7 @@ var D = class extends HTMLElement {
 					a += `<mint-button id="${i}" variant="link" icon="ellipsis">`, a += "</mint-button>", a += `<mint-popover id="${r}" trigger-id="${i}" direction="down">`, n.actions.forEach((r, i) => {
 						if (!r.show || r.show(this, e)) {
 							let o = typeof r.label == "function" ? r.label(this, e) : r.label;
-							a += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${t}" data-action-index="${i}" data-column-key="${this._configuration.columns.indexOf(n)}">${o}</div>`;
+							a += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-mint-hover" data-action="row-action" data-row-index="${t}" data-action-index="${i}" data-column-key="${this._configuration.columns.indexOf(n)}">${o}</div>`;
 						}
 					}), a += "</mint-popover>";
 				} else n.actions.forEach((r, i) => {
@@ -6463,7 +6458,7 @@ var D = class extends HTMLElement {
 					a += `<mint-button id="${i}" variant="link" icon="ellipsis">`, a += "</mint-button>", a += `<mint-popover id="${r}" trigger-id="${i}" direction="down">`, n.actions.forEach((r, i) => {
 						if (!r.show || r.show(this, e)) {
 							let o = typeof r.label == "function" ? r.label(this, e) : r.label;
-							a += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${t}" data-action-index="${i}" data-column-key="${this._configuration.columns.indexOf(n)}">${o}</div>`;
+							a += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-mint-hover" data-action="row-action" data-row-index="${t}" data-action-index="${i}" data-column-key="${this._configuration.columns.indexOf(n)}">${o}</div>`;
 						}
 					}), a += "</mint-popover>";
 				} else n.actions.forEach((r, i) => {
@@ -6641,7 +6636,7 @@ var D = class extends HTMLElement {
 				e.hidden || (r += `<th width="${e.width || ""}" style="${this._getStyle(e)}" class="${this._getClasses(e)}" data-column-key="${t}">`, e.showLabel !== !1 && (r += "<div class=\"flex items-center\">", r += `<div class="flex-1">${e.raw ? e.label : this._escapeHtml(e.label)}</div>`, e.sortable && (r += "<div class=\"ml-2 flex items-center\">", r += "<mint-icon name=\"\" class=\"w-4 h-4 text-gray-400\"></mint-icon>", r += "</div>"), r += "</div>"), r += "</th>");
 			}), r += "</tr></thead>", r += "<tbody>";
 			for (let e = 0; e < 4; e++) r += "<tr>", this._configuration.columns.forEach((e) => {
-				e.hidden || (r += `<td style="${this._getStyle(e)}" class="${this._getClasses(e, !0)}">`, r += "<div class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"></div>", r += "</td>");
+				e.hidden || (r += `<td style="${this._getStyle(e)}" class="${this._getClasses(e, !0)}">`, r += "<div class=\"h-4 bg-gray-200 dark:bg-mint-hover rounded animate-pulse\"></div>", r += "</td>");
 			}), r += "</tr>";
 			if (r += "</tbody>", r += "</table>", r += "</mint-table>", this._configuration.perPage && !this._configuration.loadMore && (n > 1 || this._lastPage > 0)) {
 				let e = this._lastPage > 0 ? this._lastPage : n;
@@ -6671,7 +6666,7 @@ var D = class extends HTMLElement {
 				r += "</th>";
 			}
 		}), r += "</tr></thead>", r += "<tbody>", !this._fetching && !this._loading && t.forEach((e, t) => {
-			let n = typeof this._configuration.onRowClick == "function", i = n ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors" : "";
+			let n = typeof this._configuration.onRowClick == "function", i = n ? "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800" : "";
 			r += `<tr data-row-index="${t}" ${n ? "data-row-clickable=\"true\"" : ""}${i ? ` class="${i}"` : ""}>`, this._configuration.columns.forEach((n, i) => {
 				if (n.hidden) return;
 				let a = !n.show || n.show(this, e);
@@ -6685,7 +6680,7 @@ var D = class extends HTMLElement {
 					r += `<mint-button id="${a}" variant="link" icon="ellipsis">`, r += "</mint-button>", r += `<mint-popover id="${i}" trigger-id="${a}" direction="down">`, n.actions.forEach((i, a) => {
 						if (!i.show || i.show(this, e)) {
 							let o = typeof i.label == "function" ? i.label(this, e) : i.label;
-							r += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${t}" data-action-index="${a}" data-column-key="${this._configuration.columns.indexOf(n)}">${this._escapeHtml(String(o))}</div>`;
+							r += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-mint-hover" data-action="row-action" data-row-index="${t}" data-action-index="${a}" data-column-key="${this._configuration.columns.indexOf(n)}">${this._escapeHtml(String(o))}</div>`;
 						}
 					}), r += "</mint-popover>";
 				} else n.actions.forEach((i, a) => {
@@ -6701,7 +6696,7 @@ var D = class extends HTMLElement {
 					r += `<mint-button id="${a}" variant="link" icon="ellipsis">`, r += "</mint-button>", r += `<mint-popover id="${i}" trigger-id="${a}" direction="down">`, n.actions.forEach((i, a) => {
 						if (!i.show || i.show(this, e)) {
 							let o = typeof i.label == "function" ? i.label(this, e) : i.label;
-							r += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700" data-action="row-action" data-row-index="${t}" data-action-index="${a}" data-column-key="${this._configuration.columns.indexOf(n)}">${this._escapeHtml(String(o))}</div>`;
+							r += `<div class="p-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-mint-hover" data-action="row-action" data-row-index="${t}" data-action-index="${a}" data-column-key="${this._configuration.columns.indexOf(n)}">${this._escapeHtml(String(o))}</div>`;
 						}
 					}), r += "</mint-popover>";
 				} else n.actions.forEach((i, a) => {
@@ -6894,7 +6889,7 @@ var O = class extends HTMLElement {
 		let o = this._getPositionClasses(r, i);
 		this._offCanvas.className = o;
 		let s = this._offCanvas.querySelector(".off-canvas-content");
-		if (s || (s = document.createElement("div"), s.className = "off-canvas-content bg-white dark:bg-gray-900 dark:border dark:border-gray-700 shadow-xl flex flex-col pointer-events-auto transition-all duration-300 ease-out", s.style.transform = this._getTransformValue(r, !1), this._offCanvas.appendChild(s)), n ? this._animateEnter() : this._animateExit(), Array.from(s.classList).forEach((e) => {
+		if (s || (s = document.createElement("div"), s.className = "off-canvas-content bg-white dark:bg-mint-elevated dark:border dark:border-mint-divider shadow-xl flex flex-col pointer-events-auto", s.style.transform = this._getTransformValue(r, !1), this._offCanvas.appendChild(s)), n ? this._animateEnter() : this._animateExit(), Array.from(s.classList).forEach((e) => {
 			(e.startsWith("w-") || e.startsWith("max-w-") || e.startsWith("md:w-") || e.startsWith("md:max-w-") || e.startsWith("sm:w-") || e.startsWith("sm:max-w-")) && s.classList.remove(e);
 		}), s.classList.remove("h-full", "max-h-[90vh]", "max-h-screen", "md:h-full", "md:max-h-[90vh]", "md:max-h-screen", "sm:h-full", "sm:max-h-[90vh]"), s.classList.remove("has-custom-width", "has-custom-height"), s.style.removeProperty("--off-canvas-width"), s.style.removeProperty("--off-canvas-height"), i) s.classList.add("w-full", "h-full", "max-w-none");
 		else if (r === "top" || r === "bottom") if (s.classList.add("w-full", "h-full", "max-w-none"), a) {
@@ -6906,13 +6901,13 @@ var O = class extends HTMLElement {
 			let e = this.getWidth(), t = this._normalizeCssValue(e);
 			s.style.setProperty("--off-canvas-width", t), s.classList.add("has-custom-width"), this._ensureWidthStyle();
 		}
-		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 flex-shrink-0", 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));
+		this._header || (this._header = document.createElement("div"), this._header.className = "flex items-center justify-between p-4 border-b border-gray-200 dark:border-mint-divider flex-shrink-0", 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 c = this._headingSlot.querySelector("mint-text");
 		t ? (c || (c = document.createElement("mint-text"), c.setAttribute("size", "sub-heading"), c.setAttribute("bold", "true"), this._headingSlot.appendChild(c)), c.textContent = t) : c && c.remove(), Array.from(this.children).filter((e) => e !== this._overlay && e !== this._offCanvas && e !== this._headingSlot && e.getAttribute("slot") === "heading").forEach((e) => {
 			this._headingSlot && e.parentElement !== this._headingSlot && this._headingSlot.appendChild(e);
 		}), 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((e) => e !== this._overlay && e !== this._offCanvas && e !== this._bodySlot && e.getAttribute("slot") === "body").forEach((e) => {
 			this._bodySlot && e.parentElement !== this._bodySlot && this._bodySlot.appendChild(e);
-		}), this._actionsSlot || (this._actionsSlot = document.createElement("div"), this._actionsSlot.className = "p-4 border-t border-gray-200 dark:border-gray-700 flex-shrink-0", this._actionsSlot.setAttribute("slot", "actions"), s.appendChild(this._actionsSlot));
+		}), this._actionsSlot || (this._actionsSlot = document.createElement("div"), this._actionsSlot.className = "p-4 border-t border-gray-200 dark:border-mint-divider flex-shrink-0", this._actionsSlot.setAttribute("slot", "actions"), s.appendChild(this._actionsSlot));
 		let l = this._actionsSlot.querySelector("mint-stack");
 		l || (l = document.createElement("mint-stack"), l.setAttribute("direction", "horizontal"), l.className = "justify-end", this._actionsSlot.appendChild(l)), Array.from(this.children).filter((e) => e !== this._overlay && e !== this._offCanvas && e !== this._actionsSlot && e.getAttribute("slot") === "actions").forEach((e) => {
 			Array.from(e.children).forEach((e) => {
@@ -6923,7 +6918,7 @@ var O = class extends HTMLElement {
 		}), this._updateBackgroundColor();
 	}
 	_getPositionClasses(e, t) {
-		let n = "fixed z-50 pointer-events-none transition-all duration-300 ease-out";
+		let n = "fixed z-50 pointer-events-none";
 		switch (e) {
 			case "top": return `${n} inset-0 md:inset-x-0 md:top-0 md:bottom-auto ${t ? "md:h-full" : "md:h-auto"}`;
 			case "bottom": return `${n} inset-0 md:inset-x-0 md:bottom-0 md:top-auto ${t ? "md:h-full" : "md:h-auto"}`;
@@ -6951,7 +6946,7 @@ var O = class extends HTMLElement {
 	_updateBackgroundColor() {
 		if (!this._offCanvas) return;
 		let e = document.documentElement.classList.contains("dark"), t = this._offCanvas.querySelector(".off-canvas-content");
-		t && (e ? (t.classList.remove("bg-white"), t.classList.add("bg-gray-900", "border", "border-gray-700")) : (t.classList.remove("bg-gray-900", "border", "border-gray-700"), t.classList.add("bg-white")));
+		t && (e ? (t.classList.remove("bg-white"), t.classList.add("bg-mint-elevated", "border", "border-mint-divider")) : (t.classList.remove("bg-mint-elevated", "border", "border-mint-divider"), t.classList.add("bg-white")));
 	}
 	_observeDarkMode() {
 		this._darkModeObserver || (this._darkModeObserver = new MutationObserver(() => {
@@ -7036,9 +7031,9 @@ var k = class extends HTMLElement {
 	}
 	render() {
 		let e = this.isActive(), t = this.isDisabled();
-		this.className = "", this.classList.add("box-border", "m-0", "p-0", "border-0", "inline-block", "cursor-pointer", "px-4", "py-1.5", "text-sm", "font-medium", "transition-all", "duration-200", "rounded-lg", "border", "text-gray-700", "dark:text-gray-300");
+		this.className = "", this.classList.add("box-border", "m-0", "p-0", "border-0", "inline-block", "cursor-pointer", "px-4", "py-1.5", "text-sm", "font-medium", "rounded-lg", "border", "text-gray-700", "dark:text-gray-300");
 		let n = this.closest("mint-tab-list")?.getAttribute("position") || "top", r = n === "left" || n === "right";
-		t ? (this.classList.add("opacity-60", "cursor-not-allowed", "pointer-events-none", "bg-gray-50", "dark:bg-gray-900", "border-gray-300", "dark:border-gray-700", "text-gray-400", "dark:text-gray-500"), this.classList.remove("cursor-pointer")) : e ? (this.classList.add("bg-white", "dark:bg-gray-900", "border-gray-200", "dark:border-gray-700", "text-gray-900", "dark:text-gray-100", "shadow-sm", "relative", "z-10"), r ? n === "left" ? this.classList.add("mr-[-1px]") : this.classList.add("ml-[-1px]") : this.classList.add("mb-[-1px]")) : this.classList.add("bg-gray-100", "dark:bg-gray-900", "border-gray-200", "dark:border-gray-700", "text-gray-600", "dark:text-gray-400", "hover:bg-gray-50", "dark:hover:bg-gray-600");
+		t ? (this.classList.add("opacity-60", "cursor-not-allowed", "pointer-events-none", "bg-gray-50", "dark:bg-mint-elevated", "border-gray-300", "dark:border-mint-divider", "text-gray-400", "dark:text-gray-500"), this.classList.remove("cursor-pointer")) : e ? (this.classList.add("bg-white", "dark:bg-mint-elevated", "border-gray-200", "dark:border-mint-divider", "text-gray-900", "dark:text-gray-100", "shadow-sm", "relative", "z-10"), r ? n === "left" ? this.classList.add("mr-[-1px]") : this.classList.add("ml-[-1px]") : this.classList.add("mb-[-1px]")) : this.classList.add("bg-gray-100", "dark:bg-mint-elevated", "border-gray-200", "dark:border-mint-divider", "text-gray-600", "dark:text-gray-400", "hover:bg-gray-50", "dark:hover:bg-mint-hover");
 	}
 	setupEventListeners() {
 		this.isDisabled() || this._clickHandler || (this._clickHandler = this.handleClick.bind(this), this.addEventListener("click", this._clickHandler));
@@ -7083,7 +7078,7 @@ var A = class extends HTMLElement {
 	}
 	render() {
 		let e = this.getPosition();
-		this.classList.remove("flex", "inline-flex", "flex-row", "flex-col", "gap-1", "gap-2", "pb-0", "pr-0", "pl-0", "mb-0", "mr-0", "ml-0", "self-start"), this.classList.add("box-border", "m-0", "p-1", "border", "bg-gray-100", "dark:bg-gray-900", "dark:border-gray-700", "border-gray-200", "w-auto", "rounded-lg", "gap-2"), e === "top" ? this.classList.add("inline-flex", "flex-row", "mb-0", "self-start") : e === "left" ? this.classList.add("flex", "flex-col", "mr-0") : e === "right" && this.classList.add("flex", "flex-col", "ml-0");
+		this.classList.remove("flex", "inline-flex", "flex-row", "flex-col", "gap-1", "gap-2", "pb-0", "pr-0", "pl-0", "mb-0", "mr-0", "ml-0", "self-start"), this.classList.add("box-border", "m-0", "p-1", "border", "bg-gray-100", "dark:bg-mint-elevated", "dark:border-mint-divider", "border-gray-200", "w-auto", "rounded-lg", "gap-2"), e === "top" ? this.classList.add("inline-flex", "flex-row", "mb-0", "self-start") : e === "left" ? this.classList.add("flex", "flex-col", "mr-0") : e === "right" && this.classList.add("flex", "flex-col", "ml-0");
 	}
 };
 customElements.get("mint-tab-list") || customElements.define("mint-tab-list", A);
@@ -7241,14 +7236,14 @@ var N = class e extends HTMLElement {
 			values: null,
 			dataHash: ""
 		}, this._renderScheduled = !1, this._datasetVisibility = /* @__PURE__ */ new Map(), this._widthValue = "100%", this._heightValue = 400, this._defaultColors = [
-			"#3b82f6",
+			"#525252",
+			"#737373",
+			"#a3a3a3",
+			"#d4d4d4",
 			"#ef4444",
-			"#10b981",
 			"#f59e0b",
-			"#8b5cf6",
-			"#ec4899",
-			"#06b6d4",
-			"#f97316"
+			"#22c55e",
+			"#eab308"
 		], this._legendHeight = 0, this._rotatedLabelHeight = 0;
 	}
 	connectedCallback() {
@@ -7452,7 +7447,7 @@ var N = class e extends HTMLElement {
 		this._showTooltip && this._chartType !== "pie" && (this._setupChartTooltip(), this._setupTooltipScrollHandler()), this._createVerticalLine();
 	}
 	_createTooltip() {
-		this._tooltip && this._tooltip.parentNode && this._tooltip.parentNode.removeChild(this._tooltip), this._tooltip = document.createElement("div"), this._tooltip.className = "fixed pointer-events-none z-50 bg-gray-900 dark:bg-gray-800 text-white text-xs rounded px-2 py-1 shadow-lg opacity-0 transition-opacity", this._tooltip.style.display = "none", document.body.appendChild(this._tooltip);
+		this._tooltip && this._tooltip.parentNode && this._tooltip.parentNode.removeChild(this._tooltip), this._tooltip = document.createElement("div"), this._tooltip.className = "fixed pointer-events-none z-50 bg-gray-900 dark:bg-mint-elevated text-white text-xs rounded px-2 py-1 shadow-lg opacity-0", this._tooltip.style.display = "none", document.body.appendChild(this._tooltip);
 	}
 	_showTooltipAt(e, t, n) {
 		if (!this._tooltip) return;
@@ -7648,9 +7643,6 @@ var N = class e extends HTMLElement {
 		}
 		return String(e);
 	}
-	_formatXAxisForTooltip(e) {
-		return this._formatXAxisValue(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-	}
 	_formatYAxisValue(e) {
 		if (this._chartData?.formatYAxis) {
 			if (typeof this._chartData.formatYAxis == "function") return this._chartData.formatYAxis(e);
@@ -7732,7 +7724,7 @@ var N = class e extends HTMLElement {
 					if (i.length > 0) {
 						this._activeXValue = e, this._showPlotPointsForX(e), this._showVerticalLineAtX(e, t);
 						let a = this._cachedTooltipContent.get(e);
-						a || (a = `<strong>${this._formatXAxisForTooltip(e)}</strong><br/>`, i.forEach((e) => {
+						a || (a = `<strong>${e}</strong><br/>`, i.forEach((e) => {
 							a += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
                   <span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
                   <span>${e.name}: ${e.formattedValue}</span>
@@ -7753,7 +7745,7 @@ var N = class e extends HTMLElement {
 				this._activeXValue = s, this._showPlotPointsForX(s), this._showVerticalLineAtX(s, t);
 				let l = this._cachedTooltipContent.get(s);
 				if (!l) {
-					if (l = `<strong>${this._formatXAxisForTooltip(s)}</strong><br/>`, c.forEach((e) => {
+					if (l = `<strong>${s}</strong><br/>`, c.forEach((e) => {
 						l += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
               <span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
               <span>${e.name}: ${e.formattedValue}</span>
@@ -7781,7 +7773,7 @@ var N = class e extends HTMLElement {
 				if (n.length === 0) return;
 				this._showPlotPointsForX(a), this._showVerticalLineAtX(a, t);
 				let r = this._cachedTooltipContent.get(a);
-				r || (r = `<strong>${this._formatXAxisForTooltip(a)}</strong><br/>`, n.forEach((e) => {
+				r || (r = `<strong>${a}</strong><br/>`, n.forEach((e) => {
 					r += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
               <span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
               <span>${e.name}: ${e.formattedValue}</span>
@@ -7809,7 +7801,7 @@ var N = class e extends HTMLElement {
 				if (e.length === 0) return;
 				this._showPlotPointsForX(o), this._showVerticalLineAtX(o, t);
 				let r = this._cachedTooltipContent.get(o);
-				r || (r = `<strong>${this._formatXAxisForTooltip(o)}</strong><br/>`, e.forEach((e) => {
+				r || (r = `<strong>${o}</strong><br/>`, e.forEach((e) => {
 					r += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
               <span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
               <span>${e.name}: ${e.formattedValue}</span>
@@ -7829,7 +7821,7 @@ var N = class e extends HTMLElement {
 						if (n.length > 0) {
 							this._activeXValue = e, this._showPlotPointsForX(e), this._showVerticalLineAtX(e, t);
 							let i = this._cachedTooltipContent.get(e);
-							i || (i = `<strong>${this._formatXAxisForTooltip(e)}</strong><br/>`, n.forEach((e) => {
+							i || (i = `<strong>${e}</strong><br/>`, n.forEach((e) => {
 								i += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
                     <span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
                     <span>${e.name}: ${e.formattedValue}</span>
@@ -7844,7 +7836,7 @@ var N = class e extends HTMLElement {
 					if (n.length > 0) {
 						this._activeXValue = e, this._showPlotPointsForX(e), this._showVerticalLineAtX(e, t);
 						let i = this._cachedTooltipContent.get(e);
-						i || (i = `<strong>${this._formatXAxisForTooltip(e)}</strong><br/>`, n.forEach((e) => {
+						i || (i = `<strong>${e}</strong><br/>`, n.forEach((e) => {
 							i += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
                   <span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
                   <span>${e.name}: ${e.formattedValue}</span>
@@ -7870,7 +7862,7 @@ var N = class e extends HTMLElement {
 				this._activeXValue = o, this._showPlotPointsForX(o), this._showVerticalLineAtX(o, t);
 				let c = this._cachedTooltipContent.get(o);
 				if (!c) {
-					if (c = `<strong>${this._formatXAxisForTooltip(o)}</strong><br/>`, s.forEach((e) => {
+					if (c = `<strong>${o}</strong><br/>`, s.forEach((e) => {
 						c += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
               <span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
               <span>${e.name}: ${e.formattedValue}</span>
@@ -8133,7 +8125,7 @@ var N = class e extends HTMLElement {
 			p++, t.data.forEach((o) => {
 				let s = this._scaleXForBarChart(o.x, e), c = this._scaleY(o.y, e), l = e.y + e.height - c, d = s + a, f = document.createElementNS("http://www.w3.org/2000/svg", "rect");
 				f.setAttribute("x", d.toString()), f.setAttribute("y", c.toString()), f.setAttribute("width", u.toString()), f.setAttribute("height", l.toString()), f.setAttribute("fill", i), f.setAttribute("rx", "2"), f.setAttribute("class", "chart-bar"), f.setAttribute("data-dataset", r.toString()), f.setAttribute("data-x", String(o.x)), f.setAttribute("data-y", o.y.toString()), f.setAttribute("data-name", t.name), f.style.cursor = "pointer", this._showTooltip && (f.addEventListener("mouseenter", (e) => {
-					let t = this._getAllDatasetsAtX(o.x), n = `<strong>${this._formatXAxisForTooltip(o.x)}</strong><br/>`;
+					let t = this._getAllDatasetsAtX(o.x), n = `<strong>${o.x}</strong><br/>`;
 					t.forEach((e) => {
 						n += `<div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
                 <span style="display: inline-block; width: 12px; height: 12px; background-color: ${e.color}; border-radius: 2px;"></span>
@@ -8231,7 +8223,7 @@ var N = class e extends HTMLElement {
 						t !== null && clearTimeout(t);
 						let n = window.setTimeout(() => {
 							r = !0, this._pieChartTooltipShown = !0;
-							let o = this._formatValue(l, i), s = `<strong>${this._formatXAxisForTooltip(e.x)}</strong><br/>${i.name}: ${o}<br/>${u.toFixed(1)}%`;
+							let o = this._formatValue(l, i), s = `<strong>${e.x}</strong><br/>${i.name}: ${o}<br/>${u.toFixed(1)}%`;
 							this._showTooltipAt(a.clientX, a.clientY, s), t = null, this._pieChartTimeouts.delete(n);
 						}, 150);
 						t = n, this._pieChartTimeouts.add(n);
@@ -8246,7 +8238,7 @@ var N = class e extends HTMLElement {
 					}
 				}), p.addEventListener("click", (a) => {
 					a.stopPropagation(), t !== null && (clearTimeout(t), t = null), n !== null && (clearTimeout(n), n = null), r = !0, this._pieChartTooltipShown = !0;
-					let o = this._formatValue(l, i), s = `<strong>${this._formatXAxisForTooltip(e.x)}</strong><br/>${i.name}: ${o}<br/>${u.toFixed(1)}%`;
+					let o = this._formatValue(l, i), s = `<strong>${e.x}</strong><br/>${i.name}: ${o}<br/>${u.toFixed(1)}%`;
 					this._showTooltipAt(a.clientX, a.clientY, s);
 				});
 			}
@@ -8492,8 +8484,6 @@ var P = class extends HTMLElement {
 			this._isSubmenuItem() ? "px-2 py-1.5" : "px-3 py-2",
 			"text-left",
 			"text-sm",
-			"transition-colors",
-			"duration-150",
 			e
 		].join(" ");
 	}
@@ -8530,7 +8520,7 @@ var P = class extends HTMLElement {
 			"border-gray-200",
 			"pl-2",
 			"space-y-1",
-			"dark:border-gray-700",
+			"dark:border-mint-divider",
 			this._isExpanded() ? "block" : "hidden"
 		].join(" "), r.forEach((e) => {
 			e.setAttribute("submenu-item", "true"), e.setAttribute("slot", "submenu"), this._submenuContainer?.appendChild(e);
@@ -8584,7 +8574,7 @@ var I = class extends HTMLElement {
 		return this.getAttribute("separated") === "true";
 	}
 	render() {
-		this.className = this._isSeparated() ? "block w-full mt-2 border-t border-gray-200 pt-2 px-2 pb-2 dark:border-gray-700" : "block w-full p-2";
+		this.className = this._isSeparated() ? "block w-full mt-2 border-t border-gray-200 pt-2 px-2 pb-2 dark:border-mint-divider" : "block w-full p-2";
 	}
 };
 customElements.get("mint-sidenav-action-links") || customElements.define("mint-sidenav-action-links", I);
@@ -8604,37 +8594,20 @@ var L = class extends HTMLElement {
 		t !== n && this.render();
 	}
 	_getTitle() {
-		return this.getAttribute("title") || "Acme Inc";
+		return this.getAttribute("title") || "";
 	}
 	_getSubtitle() {
-		return this.getAttribute("subtitle") || "Enterprise";
+		return this.getAttribute("subtitle") || "";
 	}
 	_createDefaultGroup() {
-		let e = document.createElement("mint-sidenav-action-links"), t = (e, t, n = "") => {
-			let r = document.createElement("mint-button");
-			return r.setAttribute("variant", "ghost"), r.setAttribute("full-width", "true"), r.setAttribute("align", "left"), r.innerHTML = `
-        <span class="flex w-full items-center justify-between">
-          <span class="inline-flex items-center gap-2">
-            <mint-icon name="${t}" class="h-4 w-4"></mint-icon>
-            <span class="text-sm">${e}</span>
-          </span>
-          ${n ? `<span class="text-xs text-gray-500 dark:text-gray-400">${n}</span>` : ""}
-        </span>
-      `, r;
-		};
-		e.appendChild(t("Acme Inc", "user", "⌘ 1")), e.appendChild(t("Acme Corp.", "user", "⌘ 2")), e.appendChild(t("Evil Corp.", "user", "⌘ 3"));
-		let n = document.createElement("mint-sidenav-action-links");
-		n.setAttribute("separated", "true");
-		let r = document.createElement("mint-button");
-		r.setAttribute("variant", "ghost"), r.setAttribute("full-width", "true"), r.setAttribute("align", "left"), r.innerHTML = "\n      <span class=\"inline-flex items-center gap-2\">\n        <mint-icon name=\"plus\" class=\"h-4 w-4\"></mint-icon>\n        <span class=\"text-sm\">Add team</span>\n      </span>\n    ", n.appendChild(r);
-		let i = document.createElement("div");
-		return i.appendChild(e), i.appendChild(n), i;
+		let e = document.createElement("mint-sidenav-action-links"), t = document.createElement("div");
+		return t.appendChild(e), t;
 	}
 	render() {
 		let e = Array.from(this.children).filter((e) => e !== this._wrapper && e.getAttribute("slot") === "action-links");
-		this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative", this.appendChild(this._wrapper)), this._wrapper.innerHTML = "", this._trigger = document.createElement("button"), this._trigger.type = "button", this._trigger.id = this._triggerId, this._trigger.className = "flex w-full cursor-pointer items-center gap-3 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-left transition-colors hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700";
+		this._wrapper || (this._wrapper = document.createElement("div"), this._wrapper.className = "relative", this.appendChild(this._wrapper)), this._wrapper.innerHTML = "", this._trigger = document.createElement("button"), this._trigger.type = "button", this._trigger.id = this._triggerId, this._trigger.className = "flex w-full cursor-pointer items-center gap-3 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 text-left hover:bg-gray-100 dark:border-mint-divider dark:bg-white/5 dark:hover:bg-white/10";
 		let t = document.createElement("div");
-		t.className = "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white", t.textContent = this._getTitle().split(" ").map((e) => e[0]).join("").slice(0, 2).toUpperCase();
+		t.className = "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-700 text-xs font-semibold text-white dark:bg-mint-nav", t.textContent = this._getTitle().split(" ").map((e) => e[0]).join("").slice(0, 2).toUpperCase();
 		let n = document.createElement("div");
 		n.className = "min-w-0 flex-1";
 		let r = document.createElement("mint-text");
@@ -8734,8 +8707,8 @@ var R = class extends HTMLElement {
 				"border-gray-200",
 				"bg-white",
 				"p-2",
-				"dark:border-gray-700",
-				"dark:bg-gray-900",
+				"dark:border-mint-divider",
+				"dark:bg-mint-nav",
 				"w-[4.75rem]",
 				"max-[1099.98px]:fixed",
 				e,
@@ -8754,9 +8727,8 @@ var R = class extends HTMLElement {
 				"min-[1100px]:left-0",
 				"min-[1100px]:top-14",
 				"min-[1100px]:bottom-0",
-				"min-[1100px]:z-30",
+				"min-[1100px]:z-[60]",
 				"min-[1100px]:w-[17rem]",
-				"min-[1100px]:translate-x-0",
 				"min-[1100px]:p-3",
 				"min-[1100px]:shadow-none"
 			].join(" ");
@@ -8782,7 +8754,7 @@ var R = class extends HTMLElement {
 	}
 	_buildFooter() {
 		if (!this._container) return;
-		this._footer || (this._footer = document.createElement("div"), this._footer.className = "mt-auto border-t border-gray-200 py-3 dark:border-gray-700", this._container.appendChild(this._footer));
+		this._footer || (this._footer = document.createElement("div"), this._footer.className = "mt-auto border-t border-gray-200 py-3 dark:border-mint-divider", this._container.appendChild(this._footer));
 		let e = document.createElement("div");
 		e.className = "space-y-1", this._replaceSlottedChildren(e, "bottom-links"), this._footer.innerHTML = "", this._footer.appendChild(e);
 	}
@@ -8795,45 +8767,42 @@ customElements.get("mint-side-navigation") || customElements.define("mint-side-n
 //#region src/components/top-navigation/TopNavigation.ts
 var z = class extends HTMLElement {
 	constructor(...e) {
-		super(...e), this._bar = null, this._menuButton = null, this._logoLink = null, this._menuClickHandler = null, this._themeObserver = null;
+		super(...e), this._bar = null, this._menuButton = null, this._logoLink = null, this._menuClickHandler = null, this._darkModeObserver = null, this._resizeHandler = null, this._desktopSearchInput = null, this._desktopSearchShell = null, this._mobileSearchButton = null, this._searchPanel = null, this._searchPanelInput = null, this._searchResultsWrap = null, this._searchStateWrap = null, this._searchDebounceId = null, this._searchAbortController = null, this._searchOpen = !1, this._searchQuery = "", this._globalKeydownHandler = null, this._docClickHandler = null;
 	}
 	static get observedAttributes() {
 		return [
 			"logo-src",
 			"logo-src-light",
 			"logo-src-dark",
+			"logo-src-mobile",
+			"logo-src-mobile-light",
+			"logo-src-mobile-dark",
 			"logo-href",
 			"logo-alt",
-			"menu-target"
+			"menu-target",
+			"search-endpoint",
+			"search-param",
+			"search-placeholder"
 		];
 	}
 	connectedCallback() {
-		this.classList.add("sticky", "top-0", "z-50", "w-full", "shrink-0", "bg-white", "dark:bg-gray-900"), this._observeTheme(), this.render();
+		this.classList.add("relative", "block", "h-14", "w-full", "shrink-0"), this._observeDarkMode(), this._attachResizeListener(), this._attachGlobalHandlers(), this.render();
 	}
 	disconnectedCallback() {
-		this._menuButton && this._menuClickHandler && (this._menuButton.removeEventListener("click", this._menuClickHandler), this._menuClickHandler = null), this._themeObserver &&= (this._themeObserver.disconnect(), null);
+		this._menuButton && this._menuClickHandler && (this._menuButton.removeEventListener("click", this._menuClickHandler), this._menuClickHandler = null), this._disconnectDarkModeObserver(), this._detachResizeListener(), this._detachGlobalHandlers(), this._cancelSearchDebounce(), this._abortSearch();
 	}
 	attributeChangedCallback(e, t, n) {
 		t !== n && this.render();
 	}
-	_getLogoSrc() {
-		return this.getAttribute("logo-src") || "";
-	}
-	_getLogoSrcLight() {
-		return this.getAttribute("logo-src-light") || "";
-	}
-	_getLogoSrcDark() {
-		return this.getAttribute("logo-src-dark") || "";
+	_isDarkMode() {
+		return document.documentElement.classList.contains("dark");
 	}
-	_getResolvedLogoSrc() {
-		let e = this._getLogoSrcLight(), t = this._getLogoSrcDark();
-		return e || t ? document.documentElement.classList.contains("dark") ? t || e : e || t : this._getLogoSrc();
+	_isMobileViewport() {
+		return window.matchMedia("(max-width: 1099.98px)").matches;
 	}
-	_observeTheme() {
-		this._themeObserver || (this._themeObserver = new MutationObserver(() => this.render()), this._themeObserver.observe(document.documentElement, {
-			attributes: !0,
-			attributeFilter: ["class"]
-		}));
+	_getLogoSrc() {
+		let e = this.getAttribute("logo-src") || "", t = this.getAttribute("logo-src-light") || "", n = this.getAttribute("logo-src-dark") || "", r = this.getAttribute("logo-src-mobile") || "", i = this.getAttribute("logo-src-mobile-light") || "", a = this.getAttribute("logo-src-mobile-dark") || "", o = this._isDarkMode(), s = this._isMobileViewport();
+		return s && o ? a || r || n || t || e : s && !o ? i || r || t || n || e : o ? n || t || e : t || n || e;
 	}
 	_getLogoHref() {
 		return this.getAttribute("logo-href") || "/";
@@ -8844,6 +8813,166 @@ var z = class extends HTMLElement {
 	_getMenuTargetId() {
 		return (this.getAttribute("menu-target") || "").replace(/^#/, "");
 	}
+	_getSearchEndpoint() {
+		return (this.getAttribute("search-endpoint") || "").trim();
+	}
+	_getSearchParam() {
+		return (this.getAttribute("search-param") || "q").trim() || "q";
+	}
+	_getSearchPlaceholder() {
+		return this.getAttribute("search-placeholder") || "Search";
+	}
+	_isSearchEnabled() {
+		return !!this._getSearchEndpoint();
+	}
+	_attachGlobalHandlers() {
+		this._globalKeydownHandler || (this._globalKeydownHandler = (e) => {
+			let t = e.key.toLowerCase();
+			if ((e.metaKey || e.ctrlKey) && t === "k") {
+				e.preventDefault(), this._openSearch(!0);
+				return;
+			}
+			t === "escape" && this._searchOpen && this._closeSearch();
+		}, document.addEventListener("keydown", this._globalKeydownHandler)), this._docClickHandler || (this._docClickHandler = (e) => {
+			if (!this._searchOpen) return;
+			let t = e.target;
+			t && (this.contains(t) || this._closeSearch());
+		}, document.addEventListener("click", this._docClickHandler));
+	}
+	_detachGlobalHandlers() {
+		this._globalKeydownHandler &&= (document.removeEventListener("keydown", this._globalKeydownHandler), null), this._docClickHandler &&= (document.removeEventListener("click", this._docClickHandler), null);
+	}
+	_cancelSearchDebounce() {
+		this._searchDebounceId !== null && (window.clearTimeout(this._searchDebounceId), this._searchDebounceId = null);
+	}
+	_abortSearch() {
+		this._searchAbortController &&= (this._searchAbortController.abort(), null);
+	}
+	_openSearch(e = !1) {
+		if (this._isSearchEnabled() && (this._searchOpen = !0, this._syncSearchPanelVisibility(), e)) {
+			let e = this._isMobileViewport() ? this._searchPanelInput : this._desktopSearchInput;
+			e?.focus(), e?.select();
+		}
+	}
+	_closeSearch() {
+		this._searchOpen = !1, this._syncSearchPanelVisibility();
+	}
+	_syncSearchPanelVisibility() {
+		this._searchPanel && (this._searchPanel.classList.toggle("hidden", !this._searchOpen), this._syncDesktopSearchOpenState(), this._positionSearchPanel());
+	}
+	_syncDesktopSearchOpenState() {
+		this._desktopSearchShell && (this._desktopSearchShell.classList.toggle("rounded-b-none", this._searchOpen), this._desktopSearchShell.classList.toggle("border-b-transparent", this._searchOpen));
+	}
+	_positionSearchPanel() {
+		if (!this._searchPanel) return;
+		if (this._isMobileViewport() || !this._desktopSearchShell) {
+			this._searchPanel.style.left = "", this._searchPanel.style.right = "", this._searchPanel.style.top = "", this._searchPanel.style.width = "", this._searchPanel.style.maxWidth = "", this._searchPanel.style.transform = "";
+			return;
+		}
+		let e = this._desktopSearchShell.getBoundingClientRect();
+		this._searchPanel.style.left = `${e.left}px`, this._searchPanel.style.right = "auto", this._searchPanel.style.top = `${e.bottom - 1}px`, this._searchPanel.style.width = `${e.width}px`, this._searchPanel.style.maxWidth = `${e.width}px`, this._searchPanel.style.transform = "none";
+	}
+	_setSearchQuery(e) {
+		this._searchQuery = e, this._desktopSearchInput && this._desktopSearchInput.value !== e && (this._desktopSearchInput.value = e), this._searchPanelInput && this._searchPanelInput.value !== e && (this._searchPanelInput.value = e);
+	}
+	_normalizeResults(e) {
+		return ((e) => {
+			if (Array.isArray(e)) return e;
+			if (!e || typeof e != "object") return [];
+			let t = e;
+			for (let e of [
+				"results",
+				"items",
+				"data",
+				"products"
+			]) {
+				let n = t[e];
+				if (Array.isArray(n)) return n;
+			}
+			return [];
+		})(e).map((e) => {
+			let t = e || {};
+			return {
+				title: String(t.title || t.name || t.label || t.email || t.id || "").trim() || "Untitled",
+				subtitle: String(t.description || t.category || t.username || "").trim()
+			};
+		}).slice(0, 8);
+	}
+	_renderSearchState(e) {
+		this._searchStateWrap && (this._searchStateWrap.textContent = e, this._searchStateWrap.classList.remove("hidden"), this._searchResultsWrap && (this._searchResultsWrap.innerHTML = ""));
+	}
+	_renderSearchResults(e) {
+		if (!(!this._searchResultsWrap || !this._searchStateWrap)) {
+			if (this._searchResultsWrap.innerHTML = "", e.length === 0) {
+				this._renderSearchState("No results found");
+				return;
+			}
+			this._searchStateWrap.classList.add("hidden");
+			for (let t of e) {
+				let e = document.createElement("button");
+				e.type = "button", e.className = "flex w-full cursor-pointer items-start gap-3 rounded-lg px-3 py-2 text-left hover:bg-gray-100 dark:hover:bg-white/10";
+				let n = document.createElement("mint-icon");
+				n.setAttribute("name", "search"), n.className = "mt-0.5 h-4 w-4 text-gray-500 dark:text-gray-400";
+				let r = document.createElement("div");
+				r.className = "min-w-0";
+				let i = document.createElement("div");
+				if (i.className = "truncate text-sm font-semibold text-gray-900 dark:text-gray-100", i.textContent = t.title, r.appendChild(i), t.subtitle) {
+					let e = document.createElement("div");
+					e.className = "truncate text-xs text-gray-500 dark:text-gray-400", e.textContent = t.subtitle, r.appendChild(e);
+				}
+				e.appendChild(n), e.appendChild(r), e.addEventListener("click", () => {
+					this.dispatchEvent(new CustomEvent("search-select", {
+						detail: {
+							query: this._searchQuery,
+							result: t
+						},
+						bubbles: !0,
+						composed: !0
+					})), this._closeSearch();
+				}), this._searchResultsWrap.appendChild(e);
+			}
+		}
+	}
+	_fetchSearchResults(e) {
+		let t = this._getSearchEndpoint();
+		if (!t) return;
+		let n = e.trim();
+		if (!n) {
+			this._renderSearchState("Start typing to search");
+			return;
+		}
+		this._abortSearch(), this._searchAbortController = new AbortController(), this._renderSearchState("Searching...");
+		let r = t.includes("{query}") ? t.replace("{query}", encodeURIComponent(n)) : `${t}${t.includes("?") ? "&" : "?"}${encodeURIComponent(this._getSearchParam())}=${encodeURIComponent(n)}`;
+		fetch(r, { signal: this._searchAbortController.signal }).then((e) => {
+			if (!e.ok) throw Error(`Request failed: ${e.status}`);
+			return e.json();
+		}).then((e) => {
+			let t = this._normalizeResults(e);
+			this._renderSearchResults(t);
+		}).catch((e) => {
+			e?.name !== "AbortError" && this._renderSearchState("Unable to load results");
+		});
+	}
+	_scheduleSearch(e) {
+		this._setSearchQuery(e), this._cancelSearchDebounce(), this._searchDebounceId = window.setTimeout(() => this._fetchSearchResults(e), 220);
+	}
+	_observeDarkMode() {
+		this._darkModeObserver || (this._darkModeObserver = new MutationObserver(() => this.render()), this._darkModeObserver.observe(document.documentElement, {
+			attributes: !0,
+			attributeFilter: ["class"]
+		}));
+	}
+	_disconnectDarkModeObserver() {
+		this._darkModeObserver &&= (this._darkModeObserver.disconnect(), null);
+	}
+	_attachResizeListener() {
+		this._resizeHandler || (this._resizeHandler = () => {
+			this.render(), this._positionSearchPanel();
+		}, window.addEventListener("resize", this._resizeHandler, { passive: !0 }));
+	}
+	_detachResizeListener() {
+		this._resizeHandler &&= (window.removeEventListener("resize", this._resizeHandler), null);
+	}
 	_toggleMenuTarget() {
 		let e = this._getMenuTargetId();
 		if (!e) return;
@@ -8851,26 +8980,61 @@ var z = class extends HTMLElement {
 		!t || t.tagName !== "MINT-SIDE-NAVIGATION" || (t.getAttribute("open") === "true" ? t.removeAttribute("open") : t.setAttribute("open", "true"));
 	}
 	render() {
-		if (this._bar || (this._bar = document.createElement("div"), this._bar.className = "flex h-14 w-full items-center gap-2 border-b border-gray-200 px-3 dark:border-gray-700", this.appendChild(this._bar)), !this._menuButton) {
-			this._menuButton = document.createElement("button"), this._menuButton.type = "button", this._menuButton.className = "inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent text-gray-700 transition-colors hover:bg-black/5 min-[1100px]:hidden dark:text-gray-200 dark:hover:bg-white/10", this._menuButton.setAttribute("aria-label", "Open navigation menu");
+		if (this._bar || (this._bar = document.createElement("div"), this._bar.className = "fixed inset-x-0 top-0 z-50 flex h-14 w-full items-center gap-2 border-b border-gray-200 bg-white px-3 dark:border-mint-divider dark:bg-mint-nav", this.appendChild(this._bar)), !this._menuButton) {
+			this._menuButton = document.createElement("button"), this._menuButton.type = "button", this._menuButton.className = "inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent text-gray-700 hover:bg-black/5 min-[1100px]:hidden dark:text-gray-200 dark:hover:bg-white/10", this._menuButton.setAttribute("aria-label", "Open navigation menu");
 			let e = document.createElement("mint-icon");
 			e.setAttribute("name", "menu"), e.className = "h-5 w-5", this._menuButton.appendChild(e), this._menuClickHandler = () => this._toggleMenuTarget(), this._menuButton.addEventListener("click", this._menuClickHandler), this._bar.appendChild(this._menuButton);
 		}
 		let e = !!this._getMenuTargetId();
-		this._menuButton.classList.toggle("hidden", !e), this._logoLink || (this._logoLink = document.createElement("a"), this._logoLink.className = "flex shrink-0 items-center", this._bar.appendChild(this._logoLink)), this._logoLink.href = this._getLogoHref(), this._logoLink.setAttribute("aria-label", this._getLogoAlt());
-		let t = this._getResolvedLogoSrc();
+		this._menuButton.classList.toggle("hidden", !e), this._logoLink || (this._logoLink = document.createElement("a"), this._logoLink.className = "flex h-8 w-40 shrink-0 items-center", this._bar.appendChild(this._logoLink)), this._logoLink.href = this._getLogoHref(), this._logoLink.setAttribute("aria-label", this._getLogoAlt());
+		let t = this._getLogoSrc();
 		if (t) {
 			let e = document.createElement("img");
-			e.className = "h-8 max-w-[10rem] object-contain", e.decoding = "async", e.src = t, e.alt = this._getLogoAlt(), this._logoLink.replaceChildren(e), this._logoLink.classList.remove("pointer-events-none", "opacity-40");
+			e.className = "h-full w-full object-contain [aspect-ratio:5/1]", e.decoding = "async", e.src = t, e.alt = this._getLogoAlt(), this._logoLink.replaceChildren(e), this._logoLink.classList.remove("pointer-events-none", "opacity-40");
 		} else {
 			this._logoLink.replaceChildren(), this._logoLink.classList.add("pointer-events-none", "opacity-40");
 			let e = document.createElement("span");
 			e.className = "text-sm font-semibold text-gray-400 dark:text-gray-500", e.textContent = "Logo", this._logoLink.appendChild(e);
 		}
-		let n = this._bar.querySelector("[data-mint-topnav-spacer]");
-		n || (n = document.createElement("div"), n.setAttribute("data-mint-topnav-spacer", "true"), n.className = "min-w-0 flex-1", this._bar.appendChild(n));
-		let r = Array.from(this.querySelectorAll("[slot=\"actions\"]")), i = this._bar.querySelector("[data-mint-topnav-actions]");
-		i || (i = document.createElement("div"), i.setAttribute("data-mint-topnav-actions", "true"), i.className = "flex shrink-0 items-center gap-2", this._bar.appendChild(i)), i.replaceChildren(...r);
+		let n = this._isSearchEnabled(), r = this._bar.querySelector("[data-mint-topnav-center]");
+		if (r || (r = document.createElement("div"), r.setAttribute("data-mint-topnav-center", "true"), r.className = "max-[1099.98px]:hidden min-[1100px]:flex min-[1100px]:min-w-0 min-[1100px]:flex-1 min-[1100px]:justify-center min-[1100px]:px-4", this._bar.appendChild(r)), r.classList.toggle("min-[1100px]:hidden", !n), n && !this._desktopSearchInput) {
+			let e = document.createElement("div");
+			e.className = "relative w-full max-w-xl rounded-xl border border-gray-300 bg-gray-50 px-3 py-2 dark:border-mint-divider dark:bg-mint-hover", this._desktopSearchShell = e;
+			let t = document.createElement("mint-icon");
+			t.setAttribute("name", "search"), t.className = "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500 dark:text-gray-400", this._desktopSearchInput = document.createElement("input"), this._desktopSearchInput.type = "search", this._desktopSearchInput.className = "w-full bg-transparent pl-6 pr-20 text-sm text-gray-900 outline-none placeholder:text-gray-500 dark:text-gray-100 dark:placeholder:text-gray-400", this._desktopSearchInput.placeholder = this._getSearchPlaceholder(), this._desktopSearchInput.addEventListener("focus", () => this._openSearch(!1)), this._desktopSearchInput.addEventListener("input", (e) => this._scheduleSearch(e.target.value));
+			let n = document.createElement("span");
+			n.className = "absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-500 dark:text-gray-400", n.textContent = "⌘K", e.appendChild(t), e.appendChild(this._desktopSearchInput), e.appendChild(n), r.appendChild(e);
+		}
+		this._desktopSearchInput && (this._desktopSearchInput.placeholder = this._getSearchPlaceholder(), this._desktopSearchShell = this._desktopSearchInput.closest("div"), this._syncDesktopSearchOpenState());
+		let i = this._bar.querySelector("[data-mint-topnav-mobile-spacer]");
+		i || (i = document.createElement("div"), i.setAttribute("data-mint-topnav-mobile-spacer", "true"), i.className = "min-w-0 flex-1 min-[1100px]:hidden", this._bar.appendChild(i));
+		let a = Array.from(this.querySelectorAll("[slot=\"actions\"]")), o = this._bar.querySelector("[data-mint-topnav-actions]");
+		if (o || (o = document.createElement("div"), o.setAttribute("data-mint-topnav-actions", "true"), o.className = "flex shrink-0 items-center gap-2", this._bar.appendChild(o)), n && !this._mobileSearchButton) {
+			this._mobileSearchButton = document.createElement("button"), this._mobileSearchButton.type = "button", this._mobileSearchButton.className = "inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent text-gray-700 hover:bg-black/5 min-[1100px]:hidden dark:text-gray-200 dark:hover:bg-white/10", this._mobileSearchButton.setAttribute("aria-label", "Open search");
+			let e = document.createElement("mint-icon");
+			e.setAttribute("name", "search"), e.className = "h-5 w-5", this._mobileSearchButton.appendChild(e), this._mobileSearchButton.addEventListener("click", () => this._openSearch(!0)), o.insertBefore(this._mobileSearchButton, o.firstChild);
+		}
+		if (this._mobileSearchButton && this._mobileSearchButton.classList.toggle("hidden", !n), o.replaceChildren(...a), n && this._mobileSearchButton && !a.includes(this._mobileSearchButton) && o.insertBefore(this._mobileSearchButton, o.firstChild), n && !this._searchPanel) {
+			this._searchPanel = document.createElement("div"), this._searchPanel.className = "fixed left-0 right-0 top-14 z-[90] hidden p-3 min-[1100px]:p-0";
+			let e = document.createElement("div");
+			e.className = "mx-auto w-full rounded-2xl border border-gray-200 bg-white shadow-xl dark:border-mint-divider dark:bg-mint-elevated min-[1100px]:rounded-t-none";
+			let t = document.createElement("div");
+			t.className = "relative border-b border-gray-200 p-3 dark:border-mint-divider min-[1100px]:hidden";
+			let n = document.createElement("mint-icon");
+			n.setAttribute("name", "search"), n.className = "absolute left-6 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500 dark:text-gray-400", this._searchPanelInput = document.createElement("input"), this._searchPanelInput.type = "search", this._searchPanelInput.className = "w-full rounded-lg border border-gray-300 bg-gray-50 py-2 pl-10 pr-3 text-sm text-gray-900 outline-none dark:border-mint-divider dark:bg-mint-hover dark:text-gray-100", this._searchPanelInput.placeholder = this._getSearchPlaceholder(), this._searchPanelInput.addEventListener("input", (e) => this._scheduleSearch(e.target.value)), t.appendChild(n), t.appendChild(this._searchPanelInput);
+			let r = document.createElement("div");
+			r.className = "flex flex-wrap gap-2 px-3 py-3", [
+				"Apps",
+				"Customers",
+				"Orders",
+				"Products",
+				"Sales channels"
+			].forEach((e) => {
+				let t = document.createElement("span");
+				t.className = "rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-600 dark:bg-mint-hover dark:text-gray-300", t.textContent = e, r.appendChild(t);
+			}), this._searchStateWrap = document.createElement("div"), this._searchStateWrap.className = "px-4 pb-4 text-sm text-gray-500 dark:text-gray-400", this._searchStateWrap.textContent = "Start typing to search", this._searchResultsWrap = document.createElement("div"), this._searchResultsWrap.className = "max-h-[52vh] overflow-y-auto px-2 pb-2", e.appendChild(t), e.appendChild(r), e.appendChild(this._searchStateWrap), e.appendChild(this._searchResultsWrap), this._searchPanel.appendChild(e), this.appendChild(this._searchPanel);
+		}
+		this._searchPanelInput && (this._searchPanelInput.placeholder = this._getSearchPlaceholder()), this._syncSearchPanelVisibility(), this._positionSearchPanel();
 	}
 };
 customElements.get("mint-top-navigation") || customElements.define("mint-top-navigation", z);
@@ -8881,7 +9045,7 @@ var B = class extends HTMLElement {
 		super(...e), this._lastScrollY = 0, this._scrollHandler = null;
 	}
 	connectedCallback() {
-		this.classList.add("fixed", "bottom-0", "left-0", "right-0", "z-30", "flex", "w-full", "items-stretch", "justify-around", "gap-1", "border-t", "border-gray-200", "bg-white", "px-1", "pt-1", "pb-[env(safe-area-inset-bottom,0px)]", "min-[1100px]:hidden", "transition-transform", "duration-200", "ease-out", "translate-y-0", "dark:border-gray-700", "dark:bg-gray-900"), this.setAttribute("role", "navigation"), this.setAttribute("aria-label", "Primary"), this._lastScrollY = window.scrollY, this._attachScrollListener();
+		this.classList.add("fixed", "bottom-0", "left-0", "right-0", "z-30", "flex", "w-full", "items-stretch", "justify-around", "gap-1", "border-t", "border-gray-200", "bg-white", "px-1", "pt-1", "pb-[env(safe-area-inset-bottom,0px)]", "min-[1100px]:hidden", "transition-transform", "duration-200", "ease-out", "translate-y-0", "dark:border-mint-divider", "dark:bg-mint-nav"), this.setAttribute("role", "navigation"), this.setAttribute("aria-label", "Primary"), this._lastScrollY = window.scrollY, this._attachScrollListener();
 	}
 	disconnectedCallback() {
 		this._detachScrollListener();
@@ -8935,8 +9099,8 @@ var V = class extends HTMLElement {
 		return this.getAttribute("href");
 	}
 	render() {
-		let e = this._getHref(), t = this._getLabel(), n = this._getIcon(), r = this._isActive(), i = r ? "text-blue-600 dark:text-blue-400" : "text-gray-600 hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/10", a;
-		e ? (a = document.createElement("a"), a.href = e) : (a = document.createElement("button"), a.type = "button"), a.className = `flex min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-lg px-1 py-2 text-center text-[11px] font-medium leading-tight transition-colors ${i}`, a.setAttribute("aria-current", r ? "page" : "false"), a.setAttribute("aria-label", t || "Navigation item");
+		let e = this._getHref(), t = this._getLabel(), n = this._getIcon(), r = this._isActive(), i = r ? "text-gray-900 dark:text-gray-100" : "text-gray-600 hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/10", a;
+		e ? (a = document.createElement("a"), a.href = e) : (a = document.createElement("button"), a.type = "button"), a.className = `flex min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-lg px-1 py-2 text-center text-[11px] font-medium leading-tight ${i}`, a.setAttribute("aria-current", r ? "page" : "false"), a.setAttribute("aria-label", t || "Navigation item");
 		let o = document.createElement("span");
 		if (o.className = "inline-flex h-6 w-6 items-center justify-center", n) {
 			let e = document.createElement("mint-icon");