@banzamel/mineralui 1.6.2 → 1.6.4

package/dist/{display-rQqBLjAN.js → display-Zxj9YHu_.js}

@@ -1,39 +1,38 @@
-import { n as e } from "./chunk-efA98nb6.js";
-import { Ii as t, Ni as n, rn as r } from "./icons-DlNO04xH.js";
-import { t as i } from "./cn-CUSXNnjF.js";
-import { t as a } from "./MInline-DA_ehefx.js";
-import { t as o } from "./MText-B7_HjPym.js";
-import { t as s } from "./MButton-BpSZUhpY.js";
-import { t as c } from "./MBadge-C_vK2JdM.js";
-import { a as l, n as u, r as d } from "./MSkeleton-Bqq_XJn8.js";
-import { t as f } from "./MStack-BWarX5O9.js";
-import { Children as p, cloneElement as m, isValidElement as h, useCallback as g, useEffect as _, useMemo as v, useRef as y, useState as b } from "react";
-import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { Ii as e, Ni as t, rn as n } from "./icons-CfpYxnfg.js";
+import { t as r } from "./cn-YER3QsV1.js";
+import { t as i } from "./MInline-CoMhfX5V.js";
+import { t as a } from "./MText-DcB1GAt-.js";
+import { t as o } from "./MButton-y9qXhhGt.js";
+import { t as s } from "./MBadge-_BggwkrM.js";
+import { a as c, n as l, r as u } from "./MSkeleton-DGhtNmpI.js";
+import { t as d } from "./MStack-CSaEbepM.js";
+import { Children as f, cloneElement as p, isValidElement as m, useCallback as h, useEffect as g, useMemo as _, useRef as v, useState as y } from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/components/display/MCollapsible/MCollapsible.tsx
-function C({ title: e, defaultOpen: t = !1, open: r, onToggle: a, color: o = "primary", className: c, children: l, ...u }) {
-	let [d, p] = b(t), m = r ?? d, h = () => {
+function S({ title: e, defaultOpen: n = !1, open: i, onToggle: a, color: s = "primary", className: c, children: l, ...u }) {
+	let [f, p] = y(n), m = i ?? f, h = () => {
 		let e = !m;
-		r === void 0 && p(e), a?.(e);
-	}, g = /* @__PURE__ */ x("span", {
-		className: i("chevron", m && "open"),
+		i === void 0 && p(e), a?.(e);
+	}, g = /* @__PURE__ */ b("span", {
+		className: r("chevron", m && "open"),
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ x(n, {})
+		children: /* @__PURE__ */ b(t, {})
 	});
-	return /* @__PURE__ */ S("div", {
-		className: i("collapsible", c),
+	return /* @__PURE__ */ x("div", {
+		className: r("collapsible", c),
 		...u,
-		children: [/* @__PURE__ */ x(s, {
+		children: [/* @__PURE__ */ b(o, {
 			variant: "ghost",
-			color: o,
+			color: s,
 			className: "trigger",
 			"aria-expanded": m,
 			onClick: h,
 			endIcon: g,
 			children: e
-		}), /* @__PURE__ */ x("div", {
-			className: i("content-wrap", m && "open"),
+		}), /* @__PURE__ */ b("div", {
+			className: r("content-wrap", m && "open"),
 			"aria-hidden": !m,
-			children: /* @__PURE__ */ x(f, {
+			children: /* @__PURE__ */ b(d, {
 				className: "content",
 				children: l
 			})
@@ -42,30 +41,30 @@ function C({ title: e, defaultOpen: t = !1, open: r, onToggle: a, color: o = "pr
 }
 //#endregion
 //#region src/components/display/MAccordion/MAccordion.tsx
-function w(e) {
+function C(e) {
 	return null;
 }
-function T({ multiple: e = !1, defaultOpen: t, onChange: n, bordered: r = !1, color: a, className: o, children: s, ...c }) {
-	let [l, u] = b(Array.isArray(t) ? t : t ? [t] : []), d = g((t, r) => {
+function w({ multiple: e = !1, defaultOpen: t, onChange: n, bordered: i = !1, color: a, className: o, children: s, ...c }) {
+	let [l, u] = y(Array.isArray(t) ? t : t ? [t] : []), d = h((t, r) => {
 		u((i) => {
 			let a;
 			return a = r ? e ? [...i, t] : [t] : i.filter((e) => e !== t), n?.(a), a;
 		});
-	}, [e, n]), f = p.toArray(s).filter((e) => h(e) && e.type === w);
-	return /* @__PURE__ */ x("div", {
-		className: i("accordion", r && "bordered", o),
+	}, [e, n]), p = f.toArray(s).filter((e) => m(e) && e.type === C);
+	return /* @__PURE__ */ b("div", {
+		className: r("accordion", i && "bordered", o),
 		...c,
-		children: f.map((e) => {
-			if (!h(e)) return null;
-			let { id: t, title: n, children: r, disabled: o, color: s } = e.props, c = l.includes(t);
-			return /* @__PURE__ */ x("div", {
-				className: i("accordion-item", o && "disabled"),
-				children: /* @__PURE__ */ x(C, {
+		children: p.map((e) => {
+			if (!m(e)) return null;
+			let { id: t, title: n, children: i, disabled: o, color: s } = e.props, c = l.includes(t);
+			return /* @__PURE__ */ b("div", {
+				className: r("accordion-item", o && "disabled"),
+				children: /* @__PURE__ */ b(S, {
 					title: n,
 					open: c,
 					onToggle: o ? void 0 : (e) => d(t, e),
 					color: s ?? a,
-					children: r
+					children: i
 				})
 			}, t);
 		})
@@ -73,40 +72,40 @@ function T({ multiple: e = !1, defaultOpen: t, onChange: n, bordered: r = !1, co
 }
 //#endregion
 //#region src/components/display/MProgressBar/MProgressBar.tsx
-var E = 800;
-function D(e) {
+var T = 800;
+function E(e) {
 	return 1 - (1 - e) ** 3;
 }
-function O({ value: e, max: t = 100, color: n = "primary", size: r = "md", label: a, showValue: o = !1, animated: s = !1, striped: c = !1, className: l, ...u }) {
-	let d = Math.min(100, Math.max(0, e / t * 100)), [f, p] = b(0), [m, h] = b(0), v = y(0), C = y(0), w = g((e, t) => {
+function D({ value: e, max: t = 100, color: n = "primary", size: i = "md", label: a, showValue: o = !1, animated: s = !1, striped: c = !1, className: l, ...u }) {
+	let d = Math.min(100, Math.max(0, e / t * 100)), [f, p] = y(0), [m, _] = y(0), S = v(0), C = v(0), w = h((e, t) => {
 		cancelAnimationFrame(C.current);
 		let n = performance.now(), r = (i) => {
-			let a = i - n, o = Math.min(a / E, 1), s = D(o);
+			let a = i - n, o = Math.min(a / T, 1), s = E(o);
 			p(e + (t - e) * s), o < 1 && (C.current = requestAnimationFrame(r));
 		};
-		h(t), C.current = requestAnimationFrame(r);
+		_(t), C.current = requestAnimationFrame(r);
 	}, []);
-	return _(() => (w(v.current, d), v.current = d, () => cancelAnimationFrame(C.current)), [d, w]), /* @__PURE__ */ S("div", {
-		className: i("progress-bar", `color-${n}`, r, l),
+	return g(() => (w(S.current, d), S.current = d, () => cancelAnimationFrame(C.current)), [d, w]), /* @__PURE__ */ x("div", {
+		className: r("progress-bar", `color-${n}`, i, l),
 		role: "progressbar",
 		"aria-valuenow": e,
 		"aria-valuemin": 0,
 		"aria-valuemax": t,
 		"aria-label": a,
 		...u,
-		children: [(a || o) && /* @__PURE__ */ S("div", {
+		children: [(a || o) && /* @__PURE__ */ x("div", {
 			className: "progress-bar-header",
-			children: [a && /* @__PURE__ */ x("span", {
+			children: [a && /* @__PURE__ */ b("span", {
 				className: "progress-bar-label",
 				children: a
-			}), o && /* @__PURE__ */ S("span", {
+			}), o && /* @__PURE__ */ x("span", {
 				className: "progress-bar-value",
 				children: [Math.round(f), "%"]
 			})]
-		}), /* @__PURE__ */ x("div", {
+		}), /* @__PURE__ */ b("div", {
 			className: "progress-bar-track",
-			children: /* @__PURE__ */ x("div", {
-				className: i("progress-bar-fill", s && "animated", c && "striped"),
+			children: /* @__PURE__ */ b("div", {
+				className: r("progress-bar-fill", s && "animated", c && "striped"),
 				style: { width: `${m}%` }
 			})
 		})]
@@ -114,9 +113,9 @@ function O({ value: e, max: t = 100, color: n = "primary", size: r = "md", label
 }
 //#endregion
 //#region src/components/display/MCountUp/MCountUp.tsx
-function k({ value: e, from: t = 0, duration: n = 1e3, decimals: r = 0, prefix: a = "", suffix: o = "", separator: s = "", className: c, ...l }) {
-	let [u, d] = b(t), f = y(0), p = y(null);
-	_(() => {
+function O({ value: e, from: t = 0, duration: n = 1e3, decimals: i = 0, prefix: a = "", suffix: o = "", separator: s = "", className: c, ...l }) {
+	let [u, d] = y(t), f = v(0), p = v(null);
+	g(() => {
 		let t = u;
 		p.current = null;
 		let r = (i) => {
@@ -126,9 +125,9 @@ function k({ value: e, from: t = 0, duration: n = 1e3, decimals: r = 0, prefix:
 		};
 		return f.current = requestAnimationFrame(r), () => cancelAnimationFrame(f.current);
 	}, [e, n]);
-	let m = A(u, r, s);
-	return /* @__PURE__ */ S("span", {
-		className: i("count-up", c),
+	let m = k(u, i, s);
+	return /* @__PURE__ */ x("span", {
+		className: r("count-up", c),
 		...l,
 		children: [
 			a,
@@ -137,7 +136,7 @@ function k({ value: e, from: t = 0, duration: n = 1e3, decimals: r = 0, prefix:
 		]
 	});
 }
-function A(e, t, n) {
+function k(e, t, n) {
 	let r = e.toFixed(t);
 	if (!n) return r;
 	let [i, a] = r.split("."), o = i.replace(/\B(?=(\d{3})+(?!\d))/g, n);
@@ -145,12 +144,12 @@ function A(e, t, n) {
 }
 //#endregion
 //#region src/components/display/MCodeBlock/MCodeBlock.tsx
-var j = {
+var A = {
 	c: "c",
 	cpp: "cpp",
 	"c++": "cpp",
-	arduino: "cpp",
-	ino: "cpp",
+	arduino: "arduino",
+	ino: "arduino",
 	ts: "typescript",
 	typescript: "typescript",
 	tsx: "tsx",
@@ -159,30 +158,45 @@ var j = {
 	jsx: "jsx",
 	json: "json",
 	css: "css",
-	html: "markup",
-	markup: "markup",
+	html: "html",
+	markup: "html",
 	bash: "bash",
 	shell: "bash",
 	shellscript: "bash",
 	php: "php"
+}, j = {
+	xml: () => import("./xml-0Th6YIDv.js"),
+	css: () => import("./css-u5LSEAra.js"),
+	javascript: () => import("./javascript-CXjsxb-I.js"),
+	typescript: () => import("./typescript-jNfCpQvl.js"),
+	json: () => import("./json-CyV5VF8D.js"),
+	bash: () => import("./bash-CCF_TYbb.js"),
+	c: () => import("./c-DVgkp6T3.js"),
+	cpp: () => import("./cpp-OOenfB17.js"),
+	arduino: () => import("./arduino-Eif5KI8O.js"),
+	php: () => import("./php-deNqvHeU.js")
 }, M = null, N = 42, P = 200;
 function F(e) {
 	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function I(e) {
-	return j[e] ?? e;
+	return A[e] ?? e;
 }
 async function L() {
 	return M ||= (async () => {
-		let t = (await import("./prism-core-DsZQ3wSm.js").then((t) => /* @__PURE__ */ e(t.default, 1))).default;
-		return globalThis.Prism = t, await import("./prism-markup-Cc4COxfn.js"), await import("./prism-clike-CrtZga9r.js"), await import("./prism-c-DBlZetAm.js"), await import("./prism-cpp-DerVaWjZ.js"), await import("./prism-javascript-uSHTlCK6.js"), await import("./prism-markup-templating-D4w8OHUw.js"), await import("./prism-jsx-CSsxTxi5.js"), await import("./prism-typescript-BA7hsZPZ.js"), await import("./prism-tsx-UlwV29L3.js"), await import("./prism-json-CRpBxccA.js"), await import("./prism-css-Bx_bUmkm.js"), await import("./prism-bash-GQKgVScr.js"), await import("./prism-php-nJ_CzHXP.js"), t;
+		let e = (await import("./core-CB9-PTLK.js")).default.newInstance();
+		for (let [t, n] of Object.entries(j)) {
+			let r = await n();
+			e.registerLanguage(t, r.default);
+		}
+		return e.registerAliases(["shell", "shellscript"], { languageName: "bash" }), e.registerAliases("markup", { languageName: "xml" }), e;
 	})(), M;
 }
-function R({ code: e, language: t = "tsx", title: n, showHeader: f = !0, showLanguage: p = !0, showCopyButton: m = !0, copyLabel: h = "Copy", copiedLabel: g = "Copied", maxHeight: C, stretch: w = !1, animated: T = !1, lineNumbers: E = !1, className: D, ...O }) {
-	let k = v(() => I(t.trim().toLowerCase()), [t]), [A, j] = b(() => T ? 0 : e.length), M = T ? e.slice(0, A) : e, [R, z] = b(() => F(M)), [B, V] = b(!1), H = y(null), U = y(null), W = y(null), G = typeof navigator < "u" && typeof navigator.clipboard?.writeText == "function", K = f && (!!n || p || m), q = v(() => Math.max(1, M.split("\n").length), [M]);
-	_(() => {
+function R({ code: e, language: t = "tsx", title: d, showHeader: f = !0, showLanguage: p = !0, showCopyButton: m = !0, copyLabel: h = "Copy", copiedLabel: S = "Copied", maxHeight: C, stretch: w = !1, animated: T = !1, lineNumbers: E = !1, className: D, ...O }) {
+	let k = _(() => I(t.trim().toLowerCase()), [t]), [A, j] = y(() => T ? 0 : e.length), M = T ? e.slice(0, A) : e, [R, z] = y(() => F(M)), [B, V] = y(!1), H = v(null), U = v(null), W = v(null), G = typeof navigator < "u" && typeof navigator.clipboard?.writeText == "function", K = f && (!!d || p || m), q = _(() => Math.max(1, M.split("\n").length), [M]);
+	g(() => {
 		U.current !== null && (window.clearTimeout(U.current), U.current = null), j(T ? 0 : e.length);
-	}, [T, e]), _(() => {
+	}, [T, e]), g(() => {
 		if (!(!T || e.length === 0)) return A < e.length && (U.current = window.setTimeout(() => {
 			j((t) => Math.min(t + 1, e.length)), U.current = null;
 		}, A === 0 ? P : N)), () => {
@@ -192,12 +206,15 @@ function R({ code: e, language: t = "tsx", title: n, showHeader: f = !0, showLan
 		T,
 		e.length,
 		A
-	]), _(() => {
+	]), g(() => {
 		let e = !0;
 		async function t() {
 			try {
-				let t = await L(), n = t.languages[k], r = n ? t.highlight(M, n, k) : F(M);
-				e && z(r);
+				let t = await L(), n = t.getLanguage(k) ? t.highlight(M, {
+					language: k,
+					ignoreIllegals: !0
+				}).value : F(M);
+				e && z(n);
 			} catch {
 				e && z(F(M));
 			}
@@ -205,9 +222,9 @@ function R({ code: e, language: t = "tsx", title: n, showHeader: f = !0, showLan
 		return t(), () => {
 			e = !1;
 		};
-	}, [k, M]), _(() => () => {
+	}, [k, M]), g(() => () => {
 		H.current !== null && window.clearTimeout(H.current), U.current !== null && window.clearTimeout(U.current);
-	}, []), _(() => {
+	}, []), g(() => {
 		!T || !W.current || (W.current.scrollTop = W.current.scrollHeight);
 	}, [T, A]);
 	async function J() {
@@ -219,70 +236,70 @@ function R({ code: e, language: t = "tsx", title: n, showHeader: f = !0, showLan
 			V(!1);
 		}
 	}
-	return /* @__PURE__ */ S(u, {
-		className: i("code-block-card", D),
+	return /* @__PURE__ */ x(l, {
+		className: r("code-block-card", D),
 		...O,
 		padded: !1,
 		stretch: w,
-		children: [K && /* @__PURE__ */ x(l, {
+		children: [K && /* @__PURE__ */ b(c, {
 			className: "code-block-header",
-			children: /* @__PURE__ */ S(a, {
+			children: /* @__PURE__ */ x(i, {
 				className: "code-block-header-layout",
 				align: "center",
 				justify: "between",
 				wrap: "nowrap",
 				px: "lg",
 				py: "md",
-				children: [/* @__PURE__ */ S(a, {
+				children: [/* @__PURE__ */ x(i, {
 					className: "code-block-header-meta",
 					align: "center",
 					wrap: "wrap",
-					children: [n && /* @__PURE__ */ x(o, {
+					children: [d && /* @__PURE__ */ b(a, {
 						as: "span",
 						className: "code-block-title",
 						size: "sm",
 						weight: "semibold",
-						children: n
-					}), p && t && /* @__PURE__ */ x(c, {
+						children: d
+					}), p && t && /* @__PURE__ */ b(s, {
 						color: "info",
 						size: "sm",
 						children: t
 					})]
-				}), m && /* @__PURE__ */ x(s, {
+				}), m && /* @__PURE__ */ b(o, {
 					variant: "ghost",
 					size: "sm",
 					color: "neutral",
-					startIcon: /* @__PURE__ */ x(r, {
+					startIcon: /* @__PURE__ */ b(n, {
 						size: "sm",
 						"aria-hidden": "true"
 					}),
 					onClick: J,
 					disabled: !G,
-					children: B ? g : h
+					children: B ? S : h
 				})]
 			})
-		}), /* @__PURE__ */ x(d, {
+		}), /* @__PURE__ */ b(u, {
 			className: "code-block-body",
-			children: /* @__PURE__ */ x("div", {
+			children: /* @__PURE__ */ b("div", {
 				ref: W,
 				className: "code-block-scroll",
 				style: C ? {
 					maxHeight: C,
 					overflowY: "auto"
 				} : void 0,
-				children: /* @__PURE__ */ S("pre", {
-					className: i("code-block-pre", E && "with-line-numbers", `language-${k}`),
-					children: [E && /* @__PURE__ */ x("span", {
+				children: /* @__PURE__ */ x("pre", {
+					className: r("code-block-pre", E && "with-line-numbers", `language-${k}`),
+					children: [E && /* @__PURE__ */ b("span", {
 						className: "code-block-line-numbers",
 						"aria-hidden": "true",
-						children: Array.from({ length: q }, (e, t) => /* @__PURE__ */ x("span", {
+						children: Array.from({ length: q }, (e, t) => /* @__PURE__ */ b("span", {
 							className: "code-block-line-number",
 							children: t + 1
 						}, t + 1))
-					}), /* @__PURE__ */ x("span", {
+					}), /* @__PURE__ */ b("span", {
 						className: "code-block-code-shell",
-						children: /* @__PURE__ */ x("code", {
-							className: i("code-block-code", `language-${k}`),
+						children: /* @__PURE__ */ b("code", {
+							className: r("code-block-code", "hljs", `language-${k}`),
 							dangerouslySetInnerHTML: { __html: R }
 						})
 					})]
@@ -317,9 +334,9 @@ function z(e, t) {
 		};
 	}
 }
-function B({ children: e, direction: t = "up", delay: n = 0, duration: r = .46, distance: a = 20, once: o = !0, trigger: s = "view", className: c, style: l, ...u }) {
-	let d = y(null);
-	_(() => {
+function B({ children: e, direction: t = "up", delay: n = 0, duration: i = .46, distance: a = 20, once: o = !0, trigger: s = "view", className: c, style: l, ...u }) {
+	let d = v(null);
+	g(() => {
 		let e = d.current;
 		if (!e) return;
 		let t = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -341,7 +358,7 @@ function B({ children: e, direction: t = "up", delay: n = 0, duration: r = .46,
 		n,
 		t,
 		a,
-		r,
+		i,
 		o,
 		s
 	]);
@@ -349,14 +366,14 @@ function B({ children: e, direction: t = "up", delay: n = 0, duration: r = .46,
 		minWidth: 0,
 		maxWidth: "100%",
 		"--reveal-delay": `${n}s`,
-		"--reveal-duration": `${r}s`,
+		"--reveal-duration": `${i}s`,
 		"--reveal-translate-x": `${f.x}px`,
 		"--reveal-translate-y": `${f.y}px`,
 		...l
 	};
-	return /* @__PURE__ */ x("div", {
+	return /* @__PURE__ */ b("div", {
 		ref: d,
-		className: i("reveal", c),
+		className: r("reveal", c),
 		style: p,
 		...u,
 		children: e
@@ -432,31 +449,31 @@ var q = [
 	"#000000",
 	"#ffffff"
 ];
-function J({ value: e, onChange: t, swatches: n = q, format: r = "hex", size: a = "md", label: o, disabled: s = !1, className: c, ...l }) {
-	let u = K(e ?? "#3b82f6"), [d, f] = b(() => H(u)), [p, m] = b(G(u, r)), h = y(null), v = y(null), C = y(null);
-	_(() => {
+function J({ value: e, onChange: t, swatches: n = q, format: i = "hex", size: a = "md", label: o, disabled: s = !1, className: c, ...l }) {
+	let u = K(e ?? "#3b82f6"), [d, f] = y(() => H(u)), [p, m] = y(G(u, i)), _ = v(null), S = v(null), C = v(null);
+	g(() => {
 		let t = K(e ?? "#3b82f6");
-		f(H(t)), m(G(t, r));
-	}, [e, r]);
-	let w = g((e, n, i) => {
-		let a = V(e, n, i);
+		f(H(t)), m(G(t, i));
+	}, [e, i]);
+	let w = h((e, n, r) => {
+		let a = V(e, n, r);
 		f([
 			e,
 			n,
-			i
-		]), m(G(a, r)), t?.(G(a, r));
-	}, [t, r]);
+			r
+		]), m(G(a, i)), t?.(G(a, i));
+	}, [t, i]);
 	function T(e) {
-		let t = h.current?.getBoundingClientRect();
+		let t = _.current?.getBoundingClientRect();
 		if (!t) return;
 		let n = Math.max(0, Math.min(1, (e.clientX - t.left) / t.width)), r = Math.max(0, Math.min(1, 1 - (e.clientY - t.top) / t.height));
 		w(d[0], n, r);
 	}
 	function E(e) {
-		let t = v.current?.getBoundingClientRect();
+		let t = S.current?.getBoundingClientRect();
 		t && w(Math.max(0, Math.min(360, (e.clientX - t.left) / t.width * 360)), d[1], d[2]);
 	}
-	_(() => {
+	g(() => {
 		function e(e) {
 			C.current === "area" ? T(e) : C.current === "hue" && E(e);
 		}
@@ -471,29 +488,29 @@ function J({ value: e, onChange: t, swatches: n = q, format: r = "hex", size: a
 		m(e);
 		try {
 			let n = K(e);
-			(n !== "#000000" || e === "#000000" || e.toLowerCase() === "rgb(0, 0, 0)") && (f(H(n)), t?.(G(n, r)));
+			(n !== "#000000" || e === "#000000" || e.toLowerCase() === "rgb(0, 0, 0)") && (f(H(n)), t?.(G(n, i)));
 		} catch {}
 	}
 	let O = V(d[0], d[1], d[2]);
-	return /* @__PURE__ */ S("div", {
-		className: i("color-picker", a, s && "disabled", c),
+	return /* @__PURE__ */ x("div", {
+		className: r("color-picker", a, s && "disabled", c),
 		...l,
 		children: [
-			o && /* @__PURE__ */ x("label", {
+			o && /* @__PURE__ */ b("label", {
 				className: "label",
 				children: o
 			}),
-			/* @__PURE__ */ S("div", {
-				ref: h,
+			/* @__PURE__ */ x("div", {
+				ref: _,
 				className: "area",
 				style: { background: `hsl(${d[0]}, 100%, 50%)` },
 				onPointerDown: (e) => {
 					s || (C.current = "area", T(e));
 				},
 				children: [
-					/* @__PURE__ */ x("div", { className: "white" }),
-					/* @__PURE__ */ x("div", { className: "black" }),
-					/* @__PURE__ */ x("div", {
+					/* @__PURE__ */ b("div", { className: "white" }),
+					/* @__PURE__ */ b("div", { className: "black" }),
+					/* @__PURE__ */ b("div", {
 						className: "cursor",
 						style: {
 							left: `${d[1] * 100}%`,
@@ -503,23 +520,23 @@ function J({ value: e, onChange: t, swatches: n = q, format: r = "hex", size: a
 					})
 				]
 			}),
-			/* @__PURE__ */ x("div", {
-				ref: v,
+			/* @__PURE__ */ b("div", {
+				ref: S,
 				className: "hue",
 				onPointerDown: (e) => {
 					s || (C.current = "hue", E(e));
 				},
-				children: /* @__PURE__ */ x("div", {
+				children: /* @__PURE__ */ b("div", {
 					className: "hue-thumb",
 					style: { left: `${d[0] / 360 * 100}%` }
 				})
 			}),
-			/* @__PURE__ */ S("div", {
+			/* @__PURE__ */ x("div", {
 				className: "controls",
-				children: [/* @__PURE__ */ x("div", {
+				children: [/* @__PURE__ */ b("div", {
 					className: "preview",
 					style: { background: O }
-				}), /* @__PURE__ */ x("input", {
+				}), /* @__PURE__ */ b("input", {
 					type: "text",
 					className: "input",
 					value: p,
@@ -527,11 +544,11 @@ function J({ value: e, onChange: t, swatches: n = q, format: r = "hex", size: a
 					disabled: s
 				})]
 			}),
-			n.length > 0 && /* @__PURE__ */ x("div", {
+			n.length > 0 && /* @__PURE__ */ b("div", {
 				className: "swatches",
-				children: n.map((e) => /* @__PURE__ */ x("button", {
+				children: n.map((e) => /* @__PURE__ */ b("button", {
 					type: "button",
-					className: i("swatch", O.toLowerCase() === e.toLowerCase() && "active"),
+					className: r("swatch", O.toLowerCase() === e.toLowerCase() && "active"),
 					style: { background: e },
 					onClick: () => {
 						if (s) return;
@@ -552,36 +569,36 @@ var Y = {
 	lg: "md",
 	xl: "lg"
 };
-function X({ icon: e, illustration: t, title: n, description: r, buttonText: a, onAction: o, color: c = "neutral", size: l = "md", className: u, children: d, ...f }) {
-	return /* @__PURE__ */ S("div", {
-		className: i("empty-state", `color-${c}`, l, u),
+function X({ icon: e, illustration: t, title: n, description: i, buttonText: a, onAction: s, color: c = "neutral", size: l = "md", className: u, children: d, ...f }) {
+	return /* @__PURE__ */ x("div", {
+		className: r("empty-state", `color-${c}`, l, u),
 		...f,
 		children: [
-			t && /* @__PURE__ */ x("div", {
+			t && /* @__PURE__ */ b("div", {
 				className: "empty-state-illustration",
-				children: h(t) ? m(t, { color: c }) : t
+				children: m(t) ? p(t, { color: c }) : t
 			}),
-			!t && e && /* @__PURE__ */ x("div", {
+			!t && e && /* @__PURE__ */ b("div", {
 				className: "empty-state-icon",
 				children: e
 			}),
-			/* @__PURE__ */ S("div", {
+			/* @__PURE__ */ x("div", {
 				className: "empty-state-content",
-				children: [/* @__PURE__ */ x("div", {
+				children: [/* @__PURE__ */ b("div", {
 					className: "empty-state-title",
 					children: n
-				}), r && /* @__PURE__ */ x("div", {
+				}), i && /* @__PURE__ */ b("div", {
 					className: "empty-state-description",
-					children: r
+					children: i
 				})]
 			}),
-			a && o && /* @__PURE__ */ x("div", {
+			a && s && /* @__PURE__ */ b("div", {
 				className: "empty-state-action",
-				children: /* @__PURE__ */ x(s, {
+				children: /* @__PURE__ */ b(o, {
 					size: Y[l],
 					variant: "outlined",
 					color: c,
-					onClick: o,
+					onClick: s,
 					children: a
 				})
 			}),
@@ -601,22 +618,22 @@ var Z = {
 function Q(e) {
 	return null;
 }
-function ee({ activeStep: e, variant: n = "horizontal", color: r = "primary", size: a = "md", clickable: o = !1, onChange: s, className: c, children: l, ...u }) {
-	let d = p.toArray(l).filter((e) => h(e) && e.type === Q);
-	return /* @__PURE__ */ x("div", {
-		className: i("stepper", n, `color-${r}`, a, c),
+function ee({ activeStep: t, variant: n = "horizontal", color: i = "primary", size: a = "md", clickable: o = !1, onChange: s, className: c, children: l, ...u }) {
+	let d = f.toArray(l).filter((e) => m(e) && e.type === Q);
+	return /* @__PURE__ */ b("div", {
+		className: r("stepper", n, `color-${i}`, a, c),
 		role: "list",
 		...u,
-		children: d.map((n, r) => {
-			if (!h(n)) return null;
-			let { id: c, title: l, description: u, icon: d, disabled: f, optional: p, error: m } = n.props, g = r === e, _ = r < e, v = o && !f, y = () => {
-				v && s && s(r);
+		children: d.map((n, i) => {
+			if (!m(n)) return null;
+			let { id: c, title: l, description: u, icon: d, disabled: f, optional: p, error: h } = n.props, g = i === t, _ = i < t, v = o && !f, y = () => {
+				v && s && s(i);
 			};
-			return /* @__PURE__ */ S("div", {
-				className: i("stepper-step", g && "active", _ && "completed", f && "disabled", m && "error", v && "clickable"),
+			return /* @__PURE__ */ x("div", {
+				className: r("stepper-step", g && "active", _ && "completed", f && "disabled", h && "error", v && "clickable"),
 				role: "listitem",
 				"aria-current": g ? "step" : void 0,
-				children: [/* @__PURE__ */ x("div", {
+				children: [/* @__PURE__ */ b("div", {
 					className: "stepper-indicator",
 					onClick: v ? y : void 0,
 					role: v ? "button" : void 0,
@@ -624,19 +641,19 @@ function ee({ activeStep: e, variant: n = "horizontal", color: r = "primary", si
 					onKeyDown: v ? (e) => {
 						(e.key === "Enter" || e.key === " ") && (e.preventDefault(), y());
 					} : void 0,
-					children: m ? "!" : _ ? d ?? /* @__PURE__ */ x(t, { size: Z[a] }) : d ?? r + 1
-				}), /* @__PURE__ */ S("div", {
+					children: h ? "!" : _ ? d ?? /* @__PURE__ */ b(e, { size: Z[a] }) : d ?? i + 1
+				}), /* @__PURE__ */ x("div", {
 					className: "stepper-content",
 					children: [
-						/* @__PURE__ */ x("span", {
+						/* @__PURE__ */ b("span", {
 							className: "stepper-title",
 							children: l
 						}),
-						u && /* @__PURE__ */ x("span", {
+						u && /* @__PURE__ */ b("span", {
 							className: "stepper-description",
 							children: u
 						}),
-						p && /* @__PURE__ */ x("span", {
+						p && /* @__PURE__ */ b("span", {
 							className: "stepper-optional",
 							children: "Optional"
 						})
@@ -651,41 +668,41 @@ function ee({ activeStep: e, variant: n = "horizontal", color: r = "primary", si
 function $(e) {
 	return null;
 }
-function te({ align: e = "left", color: t = "primary", size: n = "md", className: r, children: a, ...o }) {
-	let s = p.toArray(a).filter((e) => h(e) && e.type === $);
-	return /* @__PURE__ */ x("div", {
-		className: i("timeline", `align-${e}`, `color-${t}`, n, r),
+function te({ align: e = "left", color: t = "primary", size: n = "md", className: i, children: a, ...o }) {
+	let s = f.toArray(a).filter((e) => m(e) && e.type === $);
+	return /* @__PURE__ */ b("div", {
+		className: r("timeline", `align-${e}`, `color-${t}`, n, i),
 		...o,
 		children: s.map((t, n) => {
-			if (!h(t)) return null;
-			let { id: r, title: a, description: o, date: s, icon: c, color: l } = t.props, u = e === "alternate" ? n % 2 == 0 ? "left" : "right" : void 0;
-			return /* @__PURE__ */ S("div", {
-				className: i("timeline-item", u && `side-${u}`),
-				children: [/* @__PURE__ */ x("div", {
-					className: i("timeline-dot", l && `color-${l}`),
+			if (!m(t)) return null;
+			let { id: i, title: a, description: o, date: s, icon: c, color: l } = t.props, u = e === "alternate" ? n % 2 == 0 ? "left" : "right" : void 0;
+			return /* @__PURE__ */ x("div", {
+				className: r("timeline-item", u && `side-${u}`),
+				children: [/* @__PURE__ */ b("div", {
+					className: r("timeline-dot", l && `color-${l}`),
 					children: c
-				}), /* @__PURE__ */ S("div", {
+				}), /* @__PURE__ */ x("div", {
 					className: "timeline-content",
 					children: [
-						/* @__PURE__ */ x("span", {
+						/* @__PURE__ */ b("span", {
 							className: "timeline-title",
 							children: a
 						}),
-						o && /* @__PURE__ */ x("span", {
+						o && /* @__PURE__ */ b("span", {
 							className: "timeline-description",
 							children: o
 						}),
-						s && /* @__PURE__ */ x("span", {
+						s && /* @__PURE__ */ b("span", {
 							className: "timeline-date",
 							children: s
 						})
 					]
 				})]
-			}, r);
+			}, i);
 		})
 	});
 }
 //#endregion
-export { X as a, R as c, T as d, w as f, ee as i, k as l, $ as n, J as o, C as p, Q as r, B as s, te as t, O as u };
+export { X as a, R as c, w as d, C as f, ee as i, O as l, $ as n, J as o, S as p, Q as r, B as s, te as t, D as u };
 
-//# sourceMappingURL=display-rQqBLjAN.js.map
+//# sourceMappingURL=display-Zxj9YHu_.js.map