themelia-ui 3.0.0 → 3.2.0

package/dist/features/theme-tweaker.js

@@ -1,44 +1,111 @@
 "use client";
-import { t as e } from "../cx--CBrhWH0.js";
-import { a as t, o as n } from "../typography-BkxEiwQ1.js";
-import { _ as r, a as i, h as a, p as o, v as s } from "../feedback-DRerHGuV.js";
-import { S as c, x as l } from "../ui-provider-Cmoq6i_D.js";
-import { c as u } from "../buttons-CqXKWty3.js";
-import { d, l as f } from "../display-B3Q17h5z.js";
-import { i as ee, o as p } from "../structure-D0WGQAP3.js";
-import { B as m } from "../primitives-D0bdDozz.js";
-import { t as h } from "../badge-CxOuTfVr.js";
-import { c as te, i as g, r as ne, t as _, u as re } from "../item-B3yQ26as.js";
-import { u as v } from "../forms-CPrGGif_.js";
-import { t as ie } from "../strings-Co9_qArR.js";
-import { l as y } from "../text-inputs-DF_lD7pA.js";
-import { d as ae, f as oe, p as se, u as ce } from "../navigation-CsqTA16F.js";
-import { n as le, s as b } from "../choice-inputs-OUDn0kQw.js";
-import { l as x, o as ue } from "../value-inputs-Q4ymjXlV.js";
-import { t as de } from "../accordion-6YPJ9XRO.js";
-import { n as fe } from "../overlay-WQOsLd69.js";
-import { u as pe } from "../forms-numeric-CPVsL7Vf.js";
-import { i as me, r as he } from "../overlays-DvVoS3td.js";
-import { n as ge, r as _e, t as ve } from "../theming-D6KRU7hO.js";
-import { CheckCircle2Icon as ye, CopyIcon as be, DownloadIcon as xe, InfoIcon as Se, LayoutGridIcon as Ce, MoonIcon as we, PaletteIcon as S, RotateCcwIcon as Te, SearchIcon as Ee, Settings2Icon as De, ShapesIcon as Oe, ShieldCheckIcon as ke, SunIcon as Ae, TypeIcon as je } from "lucide-react";
-import { forwardRef as Me, useEffect as Ne, useId as C, useImperativeHandle as Pe, useMemo as w, useRef as Fe, useState as T } from "react";
-import { jsx as E, jsxs as D } from "react/jsx-runtime";
-//#region src/components/features/theme-tweaker/theme-tweaker.utils.ts
-var O = ":is(:root, [data-ui-scope], [data-density], [data-theme])", Ie = {
-	shared: ":root,\n[data-ui-scope],\n[data-density],\n[data-theme],\n.light,\n.dark",
-	light: [
-		".light",
-		"[data-theme=\"light\"]",
-		":is(.light, [data-theme=\"light\"]) :is([data-ui-scope], [data-density]):not(.dark, [data-theme=\"dark\"])"
-	].join(",\n"),
-	dark: [
-		".dark",
-		"[data-theme=\"dark\"]",
-		":is(.dark, [data-theme=\"dark\"]) :is([data-ui-scope], [data-density]):not(.light, [data-theme=\"light\"])"
-	].join(",\n"),
-	systemLight: `${O}:not(.dark, [data-theme="dark"], :is(.dark, [data-theme="dark"]) *)`,
-	systemDark: `${O}:not(.light, [data-theme="light"], :is(.light, [data-theme="light"]) *)`
-}, k = /^--[a-z][a-z0-9-]*$/i, A = /[;{}]/;
+import "#core.css";
+import { c as e, o as t, s as n } from "../typography-DmeR05Er.js";
+import { t as r } from "../cx--CBrhWH0.js";
+import { S as i, x as a } from "../ui-provider-DpzLUD12.js";
+import { t as o } from "../accordion-CHuzMmWL.js";
+import { c as s } from "../buttons-BX2JfL5X.js";
+import { n as c } from "../overlay-BuQOl8aP.js";
+import { i as l, o as u } from "../structure-CynEZ-OY.js";
+import { t as d } from "../strings-Co9_qArR.js";
+import { B as ee } from "../primitives-BskKlf35.js";
+import { t as f } from "../badge-VlJVZjdm.js";
+import { _ as p, a as m, h, p as te, v as ne } from "../feedback-D4qVsKlD.js";
+import { d as re, l as g } from "../display-a7AoX_u7.js";
+import { n as ie, s as _ } from "../choice-inputs-NwRxvmZN.js";
+import { l as v } from "../text-inputs-BboE77nZ.js";
+import { u as y } from "../forms-C0WeNPFF.js";
+import { u as ae } from "../forms-numeric-IwQ1ltNf.js";
+import { c as b, i as oe, r as se, t as ce, u as le } from "../item-M2pmpWXh.js";
+import { d as ue, f as de, p as fe, u as pe } from "../navigation-Bgu7Vc0M.js";
+import { l as x, o as me } from "../value-inputs-ng8aVJJZ.js";
+import { i as he, r as ge } from "../overlays-1sULyytH.js";
+import { i as _e, n as ve, r as ye } from "../theming-C5ygF5uf.js";
+import { CheckCircle2Icon as be, CopyIcon as xe, DownloadIcon as Se, InfoIcon as Ce, LayoutGridIcon as S, MoonIcon as we, PaletteIcon as C, RotateCcwIcon as Te, SearchIcon as Ee, Settings2Icon as De, ShapesIcon as Oe, ShieldCheckIcon as ke, SunIcon as Ae, TypeIcon as je } from "lucide-react";
+import { forwardRef as w, useEffect as Me, useId as T, useImperativeHandle as Ne, useMemo as E, useRef as Pe, useState as D } from "react";
+import { jsx as O, jsxs as k } from "react/jsx-runtime";
+import "#css/theme-tweaker.css";
+//#region src/lib/ui-provider/tokens.generated.ts
+var Fe = {
+	"--accent": "light-dark(oklch(0.97 0 0), oklch(0.33 0 0))",
+	"--accent-foreground": "light-dark(oklch(0.205 0 0), oklch(0.985 0 0))",
+	"--background": "light-dark(oklch(1 0 0), oklch(0.205 0 0))",
+	"--border": "light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%))",
+	"--border-width": "1px",
+	"--card": "light-dark(oklch(1 0 0), oklch(0.25 0 0))",
+	"--card-foreground": "light-dark(oklch(0.28 0 0), oklch(0.985 0 0))",
+	"--chart-1": "light-dark(oklch(0.56 0.11 167), oklch(0.74 0.13 167))",
+	"--chart-2": "light-dark(oklch(0.56 0.11 230), oklch(0.72 0.14 230))",
+	"--chart-3": "light-dark(oklch(0.56 0.17 285), oklch(0.72 0.15 285))",
+	"--chart-4": "light-dark(oklch(0.58 0.16 330), oklch(0.74 0.15 330))",
+	"--chart-5": "light-dark(oklch(0.6 0.14 60), oklch(0.78 0.14 60))",
+	"--content-width": "64rem",
+	"--control-height": "2.125rem",
+	"--control-height-sm": "1.875rem",
+	"--destructive": "light-dark(oklch(0.5 0.245 27.325), oklch(0.74 0.158 22.216))",
+	"--destructive-foreground": "light-dark(oklch(0.99 0 0), oklch(0.18 0.05 22))",
+	"--disabled-opacity": "0.5",
+	"--duration": "0ms",
+	"--duration-fast": "0ms",
+	"--ease": "cubic-bezier(0.23, 1, 0.32, 1)",
+	"--font-heading": "initial",
+	"--font-mono": "'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
+	"--font-sans": "'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+	"--foreground": "light-dark(oklch(0.28 0 0), oklch(0.985 0 0))",
+	"--gap": "1rem",
+	"--gap-sm": "0.5rem",
+	"--header-height": "3.5rem",
+	"--icon-size": "1rem",
+	"--icon-size-sm": "0.75rem",
+	"--info": "light-dark(oklch(0.45 0.214 276.966), oklch(0.72 0.14 250))",
+	"--info-foreground": "light-dark(oklch(0.99 0 0), oklch(0.18 0.05 250))",
+	"--input": "light-dark(oklch(0.73 0 0), oklch(1 0 0 / 28%))",
+	"--link": "light-dark(oklch(0.462 0.1776 259.13), oklch(0.72 0.12 259.13))",
+	"--muted": "light-dark(oklch(0.97 0 0), oklch(0.23 0 0))",
+	"--muted-foreground": "light-dark(oklch(0.5 0 0), oklch(0.708 0 0))",
+	"--overlay-backdrop": "oklch(0 0 0 / 0.5)",
+	"--overlay-backdrop-filter": "none",
+	"--padding": "1rem",
+	"--padding-sm": "0.5rem",
+	"--popover": "light-dark(oklch(1 0 0), oklch(0.28 0 0))",
+	"--popover-foreground": "light-dark(oklch(0.28 0 0), oklch(0.985 0 0))",
+	"--primary": "light-dark(oklch(0.45 0.124 167.35), oklch(0.7 0.13 167.35))",
+	"--primary-foreground": "light-dark(oklch(0.985 0 0), oklch(0.18 0.03 167.35))",
+	"--radius": "1rem",
+	"--radius-pill": "999px",
+	"--radius-sm": "0.5rem",
+	"--ring": "light-dark(oklch(0.58 0 0), oklch(0.62 0 0))",
+	"--secondary": "light-dark(oklch(0.97 0 0), oklch(0.25 0 0))",
+	"--secondary-foreground": "light-dark(oklch(0.205 0 0), oklch(0.985 0 0))",
+	"--shadow": "0 1px 2px 0 oklch(0 0 0 / 6%), 0 1px 1px -1px oklch(0 0 0 / 6%)",
+	"--shadow-lg": "0 4px 8px -2px oklch(0 0 0 / 10%), 0 12px 24px -12px oklch(0 0 0 / 18%)",
+	"--sidebar": "light-dark(oklch(0.96 0 0), oklch(0.16 0 0))",
+	"--sidebar-accent": "light-dark(oklch(0.98 0 0), oklch(0.28 0 0))",
+	"--sidebar-accent-foreground": "light-dark(oklch(0.205 0 0), oklch(0.985 0 0))",
+	"--sidebar-border": "light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%))",
+	"--sidebar-foreground": "light-dark(oklch(0.28 0 0), oklch(0.985 0 0))",
+	"--sidebar-ring": "light-dark(oklch(0.58 0 0), oklch(0.62 0 0))",
+	"--sidebar-width": "16rem",
+	"--success": "light-dark(oklch(0.4 0.16 145), oklch(0.76 0.16 145))",
+	"--success-foreground": "light-dark(oklch(0.985 0 0), oklch(0.18 0.05 145))",
+	"--text-2xl": "1.5rem",
+	"--text-base": "1rem",
+	"--text-lg": "1.125rem",
+	"--text-pxs": "0.8125rem",
+	"--text-scale": "1",
+	"--text-sm": "0.875rem",
+	"--text-xl": "1.25rem",
+	"--text-xs": "0.75rem",
+	"--tint": "10%",
+	"--tint-strong": "30%",
+	"--warning": "light-dark(oklch(0.72 0.16 90), oklch(0.82 0.16 90))",
+	"--warning-foreground": "light-dark(oklch(0.2 0.05 80), oklch(0.18 0.05 80))",
+	"--z-docked": "20",
+	"--z-popover": "50",
+	"--z-sticky": "10",
+	"--z-toast": "100",
+	"--z-tooltip": "1000"
+}, A = { shared: ":root" }, Ie = /^--[a-z][a-z0-9-]*$/i, Le = /[;{}]/;
 function j(e = {}) {
 	return {
 		mode: e.mode ?? "light",
@@ -47,12 +114,23 @@ function j(e = {}) {
 		dark: { ...e.dark ?? {} }
 	};
 }
-function Le(e) {
-	return k.test(e);
+function M(e, t = "light") {
+	let n = j({ mode: t });
+	e.radius && (n.shared["--radius"] = e.radius), e.radiusSm && (n.shared["--radius-sm"] = e.radiusSm);
+	for (let [t, r] of Object.entries(e.colors ?? {})) {
+		if (!r) continue;
+		let e = `--${t}`, [i, a] = I(r) ?? [r, r];
+		n.light[e] = i, n.dark[e] = a;
+	}
+	for (let [t, r] of Object.entries(e.vars ?? {})) n.shared[`--${t}`] = r;
+	return n;
+}
+function N(e) {
+	return Ie.test(e);
 }
-function M(e, t = !0) {
+function P(e, t = !0) {
 	return Object.entries(e).filter((e) => typeof e[1] == "string" && e[1].trim().length > 0).flatMap(([e, n]) => {
-		if (!Le(e)) {
+		if (!N(e)) {
 			if (!t) return [];
 			throw TypeError(`Invalid CSS variable name: ${e}`);
 		}
@@ -60,97 +138,106 @@ function M(e, t = !0) {
 			let t = e.charCodeAt(0);
 			return t < 32 || t === 127;
 		});
-		if (A.test(r) || i) {
+		if (Le.test(r) || i) {
 			if (!t) return [];
 			throw TypeError(`Unsafe CSS value for ${e}.`);
 		}
 		return [[e, r]];
 	}).sort(([e], [t]) => e.localeCompare(t));
 }
-function N(e, t) {
+function F(e, t) {
 	let n = e.trim();
-	if (n.length === 0 || A.test(n)) throw TypeError(`Invalid ${t} theme selector.`);
+	if (n.length === 0 || Le.test(n)) throw TypeError(`Invalid ${t} theme selector.`);
+	return n;
+}
+function I(e) {
+	let t = e.trim();
+	if (!t.startsWith("light-dark(") || !t.endsWith(")")) return null;
+	let n = t.slice(11, -1), r = 0;
+	for (let e = 0; e < n.length; e++) {
+		let t = n[e];
+		if (t === "(") r++;
+		else if (t === ")") r--;
+		else if (t === "," && r === 0) return [n.slice(0, e).trim(), n.slice(e + 1).trim()];
+	}
+	return null;
+}
+function L(e, t) {
+	let n = Fe[e], r = n ? I(n) : null;
+	return r ? r[t === "light" ? 0 : 1] : void 0;
+}
+function Re(e) {
+	let t = /* @__PURE__ */ new Set([...Object.keys(e.light), ...Object.keys(e.dark)]), n = {};
+	for (let r of t) {
+		let t = e.light[r]?.trim() || void 0, i = e.dark[r]?.trim() || void 0, a = t ?? L(r, "light") ?? i, o = i ?? L(r, "dark") ?? t;
+		!a || !o || (n[r] = a === o ? a : `light-dark(${a}, ${o})`);
+	}
 	return n;
 }
-function P(e, t, n) {
-	let r = M(t);
-	if (r.length === 0) return null;
-	let i = [
-		e + " {",
+function R(e) {
+	return {
+		...e.shared,
+		...Re(e)
+	};
+}
+function z(e, t = {}) {
+	let n = F((t.selectors ?? A).shared, "shared"), r = P(R(e)), i = t.banner === !1 ? null : `/* ${t.banner ?? "Themelia UI theme overrides"} */`, a = r.length ? [
+		`${n} {`,
 		...r.map(([e, t]) => `\t${e}: ${t};`),
 		"}"
-	];
-	return n ? [
-		`@media ${n} {`,
-		...i.map((e) => `\t${e}`),
-		"}"
-	].join("\n") : i.join("\n");
-}
-function F(e, t = {}) {
-	let n = t.selectors ?? Ie, r = [
-		P(N(n.shared, "shared"), e.shared),
-		n.systemLight ? P(N(n.systemLight, "systemLight"), e.light, "(prefers-color-scheme: light)") : null,
-		n.systemDark ? P(N(n.systemDark, "systemDark"), e.dark, "(prefers-color-scheme: dark)") : null,
-		P(N(n.light, "light"), e.light),
-		P(N(n.dark, "dark"), e.dark)
-	].filter((e) => e !== null), i = t.banner === !1 ? null : `/* ${t.banner ?? "Themelia UI theme overrides"} */`;
-	return `${[...i ? [i] : [], ...r.length > 0 ? r : ["/* No explicit overrides. */"]].join("\n\n")}\n`;
+	].join("\n") : "/* No explicit overrides. */";
+	return `${[...i ? [i] : [], a].join("\n\n")}\n`;
 }
-function I(e = {}) {
-	let t = l(c, e), { locale: n, formatRelativeTime: r, ...i } = t.dates;
+function B(e = {}) {
+	let t = a(i, e), { locale: n, formatRelativeTime: r, ...o } = t.dates;
 	return {
 		...t,
-		dates: i
+		dates: o
 	};
 }
-function L(e = {}) {
-	let t = I(e);
+function V(e = {}) {
+	let t = B(e);
 	return `import type { UIConfig } from "themelia-ui/ui-provider"\n\nexport const uiConfig = ${JSON.stringify(t, null, "	")} satisfies UIConfig\n`;
 }
-function R(e, t = e.mode) {
+function ze(e, t = e.mode) {
 	return {
 		...e.shared,
 		...e[t]
 	};
 }
-function z(e, t = e.mode) {
-	return Object.fromEntries(M(R(e, t), !1));
+function H(e) {
+	return Object.fromEntries(P(R(e), !1));
 }
-function Re(e) {
-	return M(e.shared, !1).length + M(e.light, !1).length + M(e.dark, !1).length;
+function Be(e) {
+	return P(R(e), !1).length;
 }
-function ze(e) {
-	let t = N(e, "shared");
-	return {
-		shared: t,
-		light: `${t},\n${t}.light,\n.light ${t}`,
-		dark: `${t}.dark,\n.dark ${t}`
-	};
+function Ve(e) {
+	return { shared: F(e, "shared") };
 }
-function Be(e, t = "theme.css", n = {}, r = {}) {
-	let i = j(r.resolvedTheme ?? e), a = I(r.providerConfig);
+function He(e, t = "theme.css", n = {}, r = {}) {
+	let i = j(r.resolvedTheme ?? e), a = B(r.providerConfig);
 	return {
 		fileName: t,
-		cssText: F(i, {
+		cssText: z(i, {
 			...n,
 			banner: n.banner ?? "Themelia UI complete theme"
 		}),
-		overrideCssText: F(e, n),
+		overrideCssText: z(e, n),
 		theme: j(e),
 		resolvedTheme: i,
-		overrideCount: Re(e),
+		overrideCount: Be(e),
 		providerFileName: r.providerFileName ?? "ui.config.ts",
 		providerConfig: a,
-		providerConfigText: L(a)
+		providerConfigText: V(a)
 	};
 }
-function Ve({ fileName: e, text: t, mimeType: n = "text/plain;charset=utf-8" }) {
+function Ue({ fileName: e, text: t, mimeType: n = "text/plain;charset=utf-8" }) {
 	if (typeof document > "u" || typeof URL > "u") throw Error("Downloading needs a browser document. Pass onExport for other environments.");
 	let r = URL.createObjectURL(new Blob([t], { type: n })), i = document.createElement("a");
 	i.href = r, i.download = e, i.hidden = !0, document.body.append(i), i.click(), i.remove(), URL.revokeObjectURL(r);
 }
-function He(e) {
-	Ve({
+function We(e) {
+	Ue({
 		fileName: e.fileName,
 		text: e.cssText,
 		mimeType: "text/css;charset=utf-8"
@@ -158,19 +245,19 @@ function He(e) {
 }
 //#endregion
 //#region src/components/features/theme-tweaker/theme-scope.tsx
-var Ue = Me(function({ theme: t, mode: n = t.mode, className: r, style: i, children: a, ...o }, s) {
-	return /* @__PURE__ */ E("div", {
+var Ge = w(function({ theme: e, mode: t = e.mode, className: n, style: i, children: a, ...o }, s) {
+	return /* @__PURE__ */ O("div", {
 		...o,
 		ref: s,
-		"data-theme": n,
-		className: e("theme-scope--component", n, r),
+		"data-theme": t,
+		className: r("theme-scope--component", t, n),
 		style: {
-			...z(t, n),
+			...H(e),
 			...i
 		},
 		children: a
 	});
-}), B = {
+}), Ke = {
 	title: "Application defaults",
 	description: "The display behaviour that ships alongside the exported CSS.",
 	boundaryTitle: "Apply defaults through your provider",
@@ -251,7 +338,7 @@ var Ue = Me(function({ theme: t, mode: n = t.mode, className: r, style: i, child
 		friday: "Friday",
 		saturday: "Saturday"
 	}
-}, V = {
+}, U = {
 	root: "theme-tweaker__root___A8noi",
 	rootScoped: "theme-tweaker__rootScoped___8ySpW",
 	layout: "theme-tweaker__layout___pgPlx",
@@ -265,9 +352,7 @@ var Ue = Me(function({ theme: t, mode: n = t.mode, className: r, style: i, child
 	fieldLabel: "theme-tweaker__fieldLabel___hjd9f",
 	controlRow: "theme-tweaker__controlRow___9UrLA",
 	controlInput: "theme-tweaker__controlInput___TlI8N",
-	monoInput: "theme-tweaker__monoInput___VKG7r",
 	numberInput: "theme-tweaker__numberInput___MBHRd",
-	empty: "theme-tweaker__empty___qgrD1",
 	providerSettings: "theme-tweaker__providerSettings___4aCH6",
 	settingsGrid: "theme-tweaker__settingsGrid___h_Q0S",
 	exportFooter: "theme-tweaker__exportFooter___WpVsY",
@@ -275,7 +360,7 @@ var Ue = Me(function({ theme: t, mode: n = t.mode, className: r, style: i, child
 	exportBlockHeader: "theme-tweaker__exportBlockHeader___Xpy0a",
 	exportCode: "theme-tweaker__exportCode___SXgrx",
 	previewCheck: "theme-tweaker__previewCheck___5vqEH"
-}, We = [
+}, qe = [
 	"sunday",
 	"monday",
 	"tuesday",
@@ -284,63 +369,62 @@ var Ue = Me(function({ theme: t, mode: n = t.mode, className: r, style: i, child
 	"friday",
 	"saturday"
 ];
-function H(e, t) {
+function W(e, t) {
 	return e.map((e) => ({
 		value: e,
 		label: t.options[e] ?? e.replaceAll("-", " ").replace(/\b\w/g, (e) => e.toUpperCase())
 	}));
 }
-function Ge({ config: t, onChange: n, strings: o = B, className: c }) {
-	let l = I(t), u = (e, t, r) => {
+function Je({ config: t, onChange: n, strings: i = Ke, className: a }) {
+	let s = B(t), c = (e, t, r) => {
 		n({
-			...l,
+			...s,
 			[e]: {
-				...l[e],
+				...s[e],
 				[t]: r
 			}
 		});
-	}, d = (e, t) => {
+	}, l = (e, t) => {
 		n({
-			...l,
+			...s,
 			[e]: t
 		});
 	};
-	return /* @__PURE__ */ D(p, {
-		gap: "lg",
-		className: e("ui-config-settings--component", V.providerSettings, c),
+	return /* @__PURE__ */ k(u, {
+		className: r("ui-config-settings--component", U.providerSettings, a),
 		children: [
-			/* @__PURE__ */ E(f, {
-				title: o.title,
-				description: o.description
+			/* @__PURE__ */ O(g, {
+				title: i.title,
+				description: i.description
 			}),
-			/* @__PURE__ */ D(a, {
+			/* @__PURE__ */ k(h, {
 				tone: "info",
 				role: "note",
 				children: [
-					/* @__PURE__ */ E(Se, { "aria-hidden": !0 }),
-					/* @__PURE__ */ E(s, { children: o.boundaryTitle }),
-					/* @__PURE__ */ E(r, { children: o.boundaryDescription }),
-					/* @__PURE__ */ E(i, { items: [
+					/* @__PURE__ */ O(Ce, { "aria-hidden": !0 }),
+					/* @__PURE__ */ O(ne, { children: i.boundaryTitle }),
+					/* @__PURE__ */ O(p, { children: i.boundaryDescription }),
+					/* @__PURE__ */ O(m, { items: [
 						{
-							label: o.summary.locale,
-							value: l.formatting?.locale ?? o.options.default
+							label: i.summary.locale,
+							value: s.formatting?.locale ?? i.options.default
 						},
 						{
-							label: o.summary.currency,
-							value: l.money?.defaultCurrency ?? o.options.default
+							label: i.summary.currency,
+							value: s.money?.defaultCurrency ?? i.options.default
 						},
 						{
-							label: o.summary.density,
-							value: o.options[l.density ?? "default"] ?? l.density
+							label: i.summary.density,
+							value: i.options[s.density ?? "default"] ?? s.density
 						},
 						{
-							label: o.summary.textSize,
-							value: o.options[l.typography?.defaultTextSize ?? "sm"] ?? l.typography?.defaultTextSize
+							label: i.summary.textSize,
+							value: i.options[s.typography?.defaultTextSize ?? "sm"] ?? s.typography?.defaultTextSize
 						}
 					] })
 				]
 			}),
-			/* @__PURE__ */ E(de, {
+			/* @__PURE__ */ O(o, {
 				multiple: !0,
 				defaultValue: ["regional"],
 				surface: "bordered",
@@ -348,35 +432,38 @@ function Ge({ config: t, onChange: n, strings: o = B, className: c }) {
 				items: [
 					{
 						value: "regional",
-						title: o.sections.regional.title,
-						description: o.sections.regional.description,
-						content: /* @__PURE__ */ D("div", {
-							className: V.settingsGrid,
+						title: i.sections.regional.title,
+						description: i.sections.regional.description,
+						content: /* @__PURE__ */ k("div", {
+							className: U.settingsGrid,
 							children: [
-								/* @__PURE__ */ E(v, {
-									label: o.labels.locale,
-									children: /* @__PURE__ */ E(y, {
-										value: l.formatting?.locale ?? "",
-										onChange: (e) => u("formatting", "locale", e.target.value)
+								/* @__PURE__ */ O(y, {
+									label: i.labels.locale,
+									children: /* @__PURE__ */ O(v, {
+										value: s.formatting?.locale ?? "",
+										onChange: (e) => c("formatting", "locale", e.target.value)
 									})
 								}),
-								/* @__PURE__ */ E(v, {
-									label: o.labels.firstDay,
-									children: /* @__PURE__ */ E(b, {
-										value: String(l.dates?.weekStartsOn ?? 1),
-										options: We.map((e, t) => ({
+								/* @__PURE__ */ O(y, {
+									label: i.labels.firstDay,
+									children: /* @__PURE__ */ O(_, {
+										value: String(s.dates?.weekStartsOn ?? 1),
+										options: qe.map((e, t) => ({
 											value: String(t),
-											label: o.options[e] ?? e
+											label: i.options[e] ?? e
 										})),
-										onValueChange: (e) => e !== void 0 && u("dates", "weekStartsOn", Number(e))
+										onValueChange: (e) => e !== void 0 && c("dates", "weekStartsOn", Number(e))
 									})
 								}),
-								/* @__PURE__ */ E(v, {
-									label: o.labels.dateFormat,
-									children: /* @__PURE__ */ E(y, {
-										value: l.dates?.format ?? "",
-										onChange: (e) => u("dates", "format", e.target.value),
-										className: V.monoInput
+								/* @__PURE__ */ O(y, {
+									label: i.labels.dateFormat,
+									children: /* @__PURE__ */ O(v, {
+										value: s.dates?.format ?? "",
+										onChange: (e) => c("dates", "format", e.target.value),
+										className: e({
+											size: "inherit",
+											mono: !0
+										})
 									})
 								})
 							]
@@ -384,46 +471,46 @@ function Ge({ config: t, onChange: n, strings: o = B, className: c }) {
 					},
 					{
 						value: "presentation",
-						title: o.sections.presentation.title,
-						description: o.sections.presentation.description,
-						content: /* @__PURE__ */ D("div", {
-							className: V.settingsGrid,
+						title: i.sections.presentation.title,
+						description: i.sections.presentation.description,
+						content: /* @__PURE__ */ k("div", {
+							className: U.settingsGrid,
 							children: [
-								/* @__PURE__ */ E(v, {
-									label: o.labels.colorScheme,
-									children: /* @__PURE__ */ E(b, {
-										value: l.colorScheme,
-										options: H([
+								/* @__PURE__ */ O(y, {
+									label: i.labels.colorScheme,
+									children: /* @__PURE__ */ O(_, {
+										value: s.colorScheme,
+										options: W([
 											"light",
 											"dark",
 											"system"
-										], o),
-										onValueChange: (e) => e !== void 0 && d("colorScheme", e)
+										], i),
+										onValueChange: (e) => e !== void 0 && l("colorScheme", e)
 									})
 								}),
-								/* @__PURE__ */ E(le, {
-									label: o.labels.darkMenus,
-									description: o.darkMenusDescription,
-									value: l.overlay?.darkMenus ?? !0,
-									onValueChange: (e) => u("overlay", "darkMenus", e)
+								/* @__PURE__ */ O(ie, {
+									label: i.labels.darkMenus,
+									description: i.darkMenusDescription,
+									value: s.overlay?.darkMenus ?? !0,
+									onValueChange: (e) => c("overlay", "darkMenus", e)
 								}),
-								/* @__PURE__ */ E(v, {
-									label: o.labels.density,
-									children: /* @__PURE__ */ E(b, {
-										value: l.density,
-										options: H([
+								/* @__PURE__ */ O(y, {
+									label: i.labels.density,
+									children: /* @__PURE__ */ O(_, {
+										value: s.density,
+										options: W([
 											"compact",
 											"default",
 											"comfortable"
-										], o),
-										onValueChange: (e) => e !== void 0 && d("density", e)
+										], i),
+										onValueChange: (e) => e !== void 0 && l("density", e)
 									})
 								}),
-								/* @__PURE__ */ E(v, {
-									label: o.labels.textSize,
-									children: /* @__PURE__ */ E(b, {
-										value: l.typography?.defaultTextSize,
-										options: H([
+								/* @__PURE__ */ O(y, {
+									label: i.labels.textSize,
+									children: /* @__PURE__ */ O(_, {
+										value: s.typography?.defaultTextSize,
+										options: W([
 											"inherit",
 											"xs",
 											"pxs",
@@ -431,30 +518,30 @@ function Ge({ config: t, onChange: n, strings: o = B, className: c }) {
 											"base",
 											"lg",
 											"xl"
-										], o),
-										onValueChange: (e) => e !== void 0 && u("typography", "defaultTextSize", e)
+										], i),
+										onValueChange: (e) => e !== void 0 && c("typography", "defaultTextSize", e)
 									})
 								}),
-								/* @__PURE__ */ E(v, {
-									label: o.labels.scale,
-									children: /* @__PURE__ */ E(x, {
-										"aria-label": o.labels.scale,
-										value: l.scale ?? 1,
+								/* @__PURE__ */ O(y, {
+									label: i.labels.scale,
+									children: /* @__PURE__ */ O(x, {
+										"aria-label": i.labels.scale,
+										value: s.scale ?? 1,
 										min: .75,
 										max: 1.35,
 										step: .025,
-										onValueChange: (e) => d("scale", e)
+										onValueChange: (e) => l("scale", e)
 									})
 								}),
-								/* @__PURE__ */ E(v, {
-									label: o.labels.typographyScale,
-									children: /* @__PURE__ */ E(x, {
-										"aria-label": o.labels.typographyScale,
-										value: l.typography?.scale ?? 1,
+								/* @__PURE__ */ O(y, {
+									label: i.labels.typographyScale,
+									children: /* @__PURE__ */ O(x, {
+										"aria-label": i.labels.typographyScale,
+										value: s.typography?.scale ?? 1,
 										min: .85,
 										max: 1.25,
 										step: .025,
-										onValueChange: (e) => u("typography", "scale", e)
+										onValueChange: (e) => c("typography", "scale", e)
 									})
 								})
 							]
@@ -462,62 +549,62 @@ function Ge({ config: t, onChange: n, strings: o = B, className: c }) {
 					},
 					{
 						value: "money",
-						title: o.sections.money.title,
-						description: o.sections.money.description,
-						content: /* @__PURE__ */ D("div", {
-							className: V.settingsGrid,
+						title: i.sections.money.title,
+						description: i.sections.money.description,
+						content: /* @__PURE__ */ k("div", {
+							className: U.settingsGrid,
 							children: [
-								/* @__PURE__ */ E(v, {
-									label: o.labels.defaultCurrency,
-									children: /* @__PURE__ */ E(y, {
-										value: l.money?.defaultCurrency ?? "",
-										onChange: (e) => u("money", "defaultCurrency", e.target.value.toUpperCase())
+								/* @__PURE__ */ O(y, {
+									label: i.labels.defaultCurrency,
+									children: /* @__PURE__ */ O(v, {
+										value: s.money?.defaultCurrency ?? "",
+										onChange: (e) => c("money", "defaultCurrency", e.target.value.toUpperCase())
 									})
 								}),
-								/* @__PURE__ */ E(v, {
-									label: o.labels.displayCurrency,
-									children: /* @__PURE__ */ E(y, {
-										value: l.money?.displayCurrency ?? "",
-										placeholder: o.displayCurrencyPlaceholder,
-										onChange: (e) => u("money", "displayCurrency", e.target.value.toUpperCase() || void 0)
+								/* @__PURE__ */ O(y, {
+									label: i.labels.displayCurrency,
+									children: /* @__PURE__ */ O(v, {
+										value: s.money?.displayCurrency ?? "",
+										placeholder: i.displayCurrencyPlaceholder,
+										onChange: (e) => c("money", "displayCurrency", e.target.value.toUpperCase() || void 0)
 									})
 								}),
-								/* @__PURE__ */ E(v, {
-									label: o.labels.moneyFormat,
-									children: /* @__PURE__ */ E(b, {
-										value: l.money?.formatMode,
-										options: H([
+								/* @__PURE__ */ O(y, {
+									label: i.labels.moneyFormat,
+									children: /* @__PURE__ */ O(_, {
+										value: s.money?.formatMode,
+										options: W([
 											"decimal",
 											"with-code",
 											"with-symbol"
-										], o),
-										onValueChange: (e) => e !== void 0 && u("money", "formatMode", e)
+										], i),
+										onValueChange: (e) => e !== void 0 && c("money", "formatMode", e)
 									})
 								}),
-								/* @__PURE__ */ E(le, {
-									label: o.labels.dualPricing,
-									description: o.dualPricingDescription,
-									value: l.money?.dualPricingEnabled ?? !1,
-									onValueChange: (e) => u("money", "dualPricingEnabled", e)
+								/* @__PURE__ */ O(ie, {
+									label: i.labels.dualPricing,
+									description: i.dualPricingDescription,
+									value: s.money?.dualPricingEnabled ?? !1,
+									onValueChange: (e) => c("money", "dualPricingEnabled", e)
 								}),
-								/* @__PURE__ */ E(v, {
-									label: o.labels.dualPricingMode,
-									children: /* @__PURE__ */ E(b, {
-										value: l.money?.displayMode,
-										options: H([
+								/* @__PURE__ */ O(y, {
+									label: i.labels.dualPricingMode,
+									children: /* @__PURE__ */ O(_, {
+										value: s.money?.displayMode,
+										options: W([
 											"primary-only",
 											"dual",
 											"dynamic"
-										], o),
-										onValueChange: (e) => e !== void 0 && u("money", "displayMode", e)
+										], i),
+										onValueChange: (e) => e !== void 0 && c("money", "displayMode", e)
 									})
 								}),
-								/* @__PURE__ */ E(v, {
-									label: o.labels.dualPricingLayout,
-									children: /* @__PURE__ */ E(b, {
-										value: l.money?.layout,
-										options: H(["inline", "stacked"], o),
-										onValueChange: (e) => e !== void 0 && u("money", "layout", e)
+								/* @__PURE__ */ O(y, {
+									label: i.labels.dualPricingLayout,
+									children: /* @__PURE__ */ O(_, {
+										value: s.money?.layout,
+										options: W(["inline", "stacked"], i),
+										onValueChange: (e) => e !== void 0 && c("money", "layout", e)
 									})
 								})
 							]
@@ -530,114 +617,130 @@ function Ge({ config: t, onChange: n, strings: o = B, className: c }) {
 }
 //#endregion
 //#region src/components/features/theme-tweaker/theme-tweaker.fields.ts
-var U = /* @__PURE__ */ "--background.--foreground.--card.--card-foreground.--popover.--popover-foreground.--primary.--primary-foreground.--secondary.--secondary-foreground.--muted.--muted-foreground.--accent.--accent-foreground.--destructive.--destructive-foreground.--border.--input.--ring.--chart-1.--chart-2.--chart-3.--chart-4.--chart-5.--sidebar.--sidebar-foreground.--sidebar-primary.--sidebar-primary-foreground.--sidebar-accent.--sidebar-accent-foreground.--sidebar-border.--sidebar-ring".split("."), Ke = [
+var Ye = [
+	"--background",
+	"--foreground",
+	"--card",
+	"--card-foreground",
+	"--popover",
+	"--popover-foreground",
+	"--muted",
+	"--muted-foreground",
+	"--accent",
+	"--accent-foreground",
+	"--border",
+	"--input",
+	"--ring"
+], Xe = [
+	"--primary",
+	"--primary-foreground",
+	"--secondary",
+	"--secondary-foreground",
+	"--destructive",
+	"--destructive-foreground"
+], Ze = [
+	"--chart-1",
+	"--chart-2",
+	"--chart-3",
+	"--chart-4",
+	"--chart-5"
+], G = [
+	"--sidebar",
+	"--sidebar-foreground",
+	"--sidebar-accent",
+	"--sidebar-accent-foreground",
+	"--sidebar-border",
+	"--sidebar-ring"
+], K = [
 	"--success",
 	"--success-foreground",
 	"--info",
 	"--info-foreground",
 	"--warning",
 	"--warning-foreground",
-	"--warning-accent",
-	"--link-color",
-	"--primary-accent",
-	"--inverse-background",
-	"--inverse-foreground",
-	"--inverse-muted",
-	"--inverse-subtle",
-	"--inverse-disabled",
-	"--inverse-surface",
-	"--inverse-surface-strong",
-	"--inverse-border",
-	"--inverse-decoration"
-], qe = ["--overlay-backdrop"], Je = [
-	"--font-heading",
+	"--link"
+], Qe = ["--overlay-backdrop"], $e = ["--tint", "--tint-strong"], et = [
 	"--font-sans",
-	"--font-serif",
+	"--font-heading",
 	"--font-mono"
-], W = [
-	"xs",
-	"pxs",
-	"sm",
-	"base",
-	"lg",
-	"xl",
-	"2xl"
-].flatMap((e) => [`--text-${e}`, `--text-${e}--line-height`]), Ye = [
-	"--shadow-xs",
-	"--shadow-sm",
-	"--shadow-md",
-	"--shadow-lg",
-	"--shadow-xl"
-], G = [
-	"--density-scale",
-	"--height-control",
-	"--control-x",
-	"--row-x",
-	"--row-y",
-	"--surface-x",
-	"--surface-y",
-	"--icon",
-	"--avatar",
-	"--shell-header-height",
-	"--sidebar-width"
-], K = [
-	"--content-width-sm",
-	"--content-width-md",
-	"--content-width-lg",
-	"--content-width-xl",
-	"--content-width-2xl",
-	"--adaptive-grid-min-sm",
-	"--adaptive-grid-min-md",
-	"--adaptive-grid-min-lg"
-], q = {
+], q = [
+	"--text-scale",
+	"--text-xs",
+	"--text-pxs",
+	"--text-sm",
+	"--text-base",
+	"--text-lg",
+	"--text-xl",
+	"--text-2xl"
+], J = [
+	"--radius",
+	"--radius-sm",
+	"--radius-pill",
+	"--border-width"
+], tt = ["--shadow", "--shadow-lg"], nt = [
+	"--padding",
+	"--padding-sm",
+	"--gap",
+	"--gap-sm"
+], Y = [
+	"--control-height",
+	"--control-height-sm",
+	"--icon-size",
+	"--icon-size-sm"
+], X = [
+	"--duration-fast",
+	"--duration",
+	"--ease",
+	"--disabled-opacity"
+], Z = [
+	"--sidebar-width",
+	"--header-height",
+	"--content-width"
+], Q = {
 	"--background": "The page's canvas.",
 	"--foreground": "Text and icons on the canvas.",
+	"--card": "Framed regions: cards, table frames, panels.",
+	"--popover": "Anchored popups, menus, palettes and toasts.",
+	"--muted": "Wells and placeholders.",
+	"--muted-foreground": "Supporting text: descriptions, metadata, hints.",
+	"--accent": "The one hover and current-item fill.",
+	"--border": "Every divider and frame.",
+	"--input": "The frame of a control.",
+	"--ring": "The focus outline.",
 	"--primary": "Brand and primary-action colour.",
 	"--primary-foreground": "Text and icons on a solid primary fill.",
-	"--muted": "Subdued backgrounds — passive regions, skeletons.",
-	"--muted-foreground": "Secondary text, metadata, and passive icons.",
-	"--border": "Dividers, outlines, and surface borders.",
-	"--ring": "The focus-visible ring.",
-	"--link-color": "Inline links and copyable values.",
-	"--overlay-backdrop": "The scrim behind dialogs, sheets, and drawers.",
-	"--primary-accent": "Brand colour as a FOREGROUND — icons, spinners, active marks.",
-	"--warning-accent": "Warning colour as a foreground on a tinted warning surface.",
-	"--radius": "The container corner — cards, dialogs, popovers, menus.",
-	"--radius-sm": "The inner corner — inputs, buttons, rows, chips, badges, tooltips.",
-	"--density-scale": "Multiplies spacing, controls, rows and everything density-sensitive; type follows --text-scale.",
-	"--height-control": "Base height for every control — buttons, inputs, selects, triggers.",
-	"--control-x": "Inline inset for actions and form controls.",
-	"--row-x": "Inline inset shared by collection, menu, command, and table rows.",
-	"--row-y": "Vertical inset shared by those same rows.",
-	"--surface-x": "Inline inset for cards, dialogs, panels, and content surfaces.",
-	"--surface-y": "Vertical inset for those same surfaces.",
-	"--icon": "Default interface icon size.",
-	"--avatar": "Default avatar size in ordinary rows and cards.",
-	"--shell-header-height": "Minimum application-header height.",
-	"--sidebar-width": "Expanded sidebar width, for Sidebar and every shell.",
-	"--content-width-lg": "The default readable measure used by Container.",
-	"--adaptive-grid-min-md": "Default minimum column width used by AdaptiveGrid."
-}, J = {
-	"--density-scale": "Density scale",
-	"--height-control": "Control height",
-	"--control-x": "Control horizontal padding",
-	"--row-x": "Row horizontal padding",
-	"--row-y": "Row vertical padding",
-	"--surface-x": "Surface horizontal padding",
-	"--surface-y": "Surface vertical padding",
-	"--icon": "Interface icon size",
-	"--avatar": "Default avatar size",
-	"--shell-header-height": "Header height",
-	"--sidebar-width": "Sidebar width",
-	"--content-width-sm": "Small content width",
-	"--content-width-md": "Medium content width",
-	"--content-width-lg": "Large content width",
-	"--content-width-xl": "Extra-large content width",
-	"--content-width-2xl": "Maximum content width",
-	"--adaptive-grid-min-sm": "Compact adaptive column",
-	"--adaptive-grid-min-md": "Default adaptive column",
-	"--adaptive-grid-min-lg": "Spacious adaptive column"
-}, Xe = {
+	"--secondary": "The quiet solid fill.",
+	"--destructive": "Destructive actions and errors.",
+	"--link": "Inline links.",
+	"--overlay-backdrop": "The scrim behind dialogs, sheets and drawers.",
+	"--tint": "The soft fill a tone paints: a selected row, a soft badge, an alert's wash.",
+	"--tint-strong": "The line a tone paints: a tinted edge or rule.",
+	"--font-sans": "The interface font.",
+	"--font-heading": "Headings; the interface font when unset.",
+	"--font-mono": "Codes, identifiers and keys.",
+	"--text-scale": "Multiplies every type size, control labels included; geometry stays put.",
+	"--radius": "The container corner: cards, dialogs, popovers, menus.",
+	"--radius-sm": "The item corner: controls, rows, chips, badges, tooltips.",
+	"--radius-pill": "The round end of pills, switches and tracks.",
+	"--border-width": "Every hairline; marks and focus draw at twice it.",
+	"--shadow": "Raised: a framed card, a raised chip, a thumb.",
+	"--shadow-lg": "Floating: popovers, menus, dialogs, toasts.",
+	"--padding": "Container insets: cards, dialogs, sheets, popovers.",
+	"--padding-sm": "Item insets: rows, cells, chips, fields.",
+	"--gap": "Between groups: fields, cards, sections.",
+	"--gap-sm": "Inside a group: icon and label, title and description.",
+	"--control-height": "Buttons, fields, selects and triggers.",
+	"--control-height-sm": "The smaller control.",
+	"--icon-size": "Icons beside text and inside controls.",
+	"--icon-size-sm": "Icons in dense rows and chips.",
+	"--duration-fast": "State changes: hover, press, colour.",
+	"--duration": "Entrances: popups, dialogs, panels.",
+	"--ease": "The easing every transition shares.",
+	"--disabled-opacity": "How far a disabled control fades.",
+	"--sidebar-width": "The expanded sidebar, for Sidebar and every shell.",
+	"--header-height": "Every shell's top bar.",
+	"--content-width": "The readable page measure Container uses."
+}, rt = {
 	"--radius": {
 		type: "range",
 		min: 0,
@@ -654,85 +757,85 @@ var U = /* @__PURE__ */ "--background.--foreground.--card.--card-foreground.--po
 		unit: "rem",
 		decimalPlaces: 4
 	},
-	"--density-scale": {
+	"--text-scale": {
 		type: "range",
-		min: .75,
-		max: 1.35,
+		min: .85,
+		max: 1.3,
 		step: .025,
 		decimalPlaces: 3,
 		fallback: 1
 	},
-	"--height-control": {
+	"--padding": {
 		type: "range",
-		min: 1.5,
-		max: 3.5,
+		min: .5,
+		max: 2,
 		step: .0625,
 		unit: "rem",
 		decimalPlaces: 4
 	},
-	"--control-x": {
+	"--padding-sm": {
 		type: "range",
 		min: .25,
-		max: 1.5,
+		max: 1,
 		step: .0625,
 		unit: "rem",
 		decimalPlaces: 4
 	},
-	"--row-x": {
+	"--gap": {
 		type: "range",
-		min: .25,
-		max: 1.5,
+		min: .5,
+		max: 2,
 		step: .0625,
 		unit: "rem",
 		decimalPlaces: 4
 	},
-	"--row-y": {
+	"--gap-sm": {
 		type: "range",
 		min: .25,
-		max: 1.25,
+		max: 1,
 		step: .0625,
 		unit: "rem",
 		decimalPlaces: 4
 	},
-	"--surface-x": {
+	"--control-height": {
 		type: "range",
-		min: .5,
-		max: 2.5,
+		min: 1.75,
+		max: 3,
 		step: .0625,
 		unit: "rem",
 		decimalPlaces: 4
 	},
-	"--surface-y": {
+	"--control-height-sm": {
 		type: "range",
-		min: .5,
+		min: 1.5,
 		max: 2.5,
 		step: .0625,
 		unit: "rem",
 		decimalPlaces: 4
 	},
-	"--icon": {
+	"--icon-size": {
 		type: "range",
 		min: .75,
-		max: 2,
+		max: 1.5,
 		step: .0625,
 		unit: "rem",
 		decimalPlaces: 4
 	},
-	"--avatar": {
+	"--icon-size-sm": {
 		type: "range",
-		min: 1.5,
-		max: 4,
-		step: .125,
+		min: .5,
+		max: 1,
+		step: .0625,
 		unit: "rem",
-		decimalPlaces: 3
+		decimalPlaces: 4
 	},
-	"--shell-header-height": {
+	"--disabled-opacity": {
 		type: "range",
-		min: 3,
-		max: 7,
-		step: .125,
-		unit: "rem",
-		decimalPlaces: 3
+		min: .3,
+		max: .7,
+		step: .05,
+		decimalPlaces: 2,
+		fallback: .5
 	},
 	"--sidebar-width": {
 		type: "range",
@@ -742,109 +845,60 @@ var U = /* @__PURE__ */ "--background.--foreground.--card.--card-foreground.--po
 		unit: "rem",
 		decimalPlaces: 2
 	},
-	"--content-width-sm": {
+	"--header-height": {
 		type: "range",
-		min: 20,
-		max: 72,
-		step: 1,
-		unit: "rem",
-		decimalPlaces: 0
-	},
-	"--content-width-md": {
-		type: "range",
-		min: 24,
-		max: 80,
-		step: 1,
-		unit: "rem",
-		decimalPlaces: 0
-	},
-	"--content-width-lg": {
-		type: "range",
-		min: 32,
-		max: 96,
-		step: 1,
+		min: 3,
+		max: 5,
+		step: .125,
 		unit: "rem",
-		decimalPlaces: 0
+		decimalPlaces: 3
 	},
-	"--content-width-xl": {
+	"--content-width": {
 		type: "range",
 		min: 40,
-		max: 108,
-		step: 1,
-		unit: "rem",
-		decimalPlaces: 0
-	},
-	"--content-width-2xl": {
-		type: "range",
-		min: 48,
-		max: 120,
+		max: 96,
 		step: 1,
 		unit: "rem",
 		decimalPlaces: 0
-	},
-	"--adaptive-grid-min-sm": {
-		type: "range",
-		min: 8,
-		max: 24,
-		step: .5,
-		unit: "rem",
-		decimalPlaces: 1
-	},
-	"--adaptive-grid-min-md": {
-		type: "range",
-		min: 8,
-		max: 32,
-		step: .5,
-		unit: "rem",
-		decimalPlaces: 1
-	},
-	"--adaptive-grid-min-lg": {
-		type: "range",
-		min: 12,
-		max: 40,
-		step: .5,
-		unit: "rem",
-		decimalPlaces: 1
 	}
 };
-function Ze(e) {
-	return e.replace(/^--/, "").replace(/--/g, " · ").split("-").map((e) => e.length <= 3 ? e.toUpperCase() : `${e[0]?.toUpperCase()}${e.slice(1)}`).join(" ");
+function it(e) {
+	return e.replace(/^--/, "").split("-").map((e) => e.length <= 3 ? e.toUpperCase() : `${e[0]?.toUpperCase()}${e.slice(1)}`).join(" ");
 }
-function Qe(e, t) {
-	return e.startsWith("--chart-") ? "A categorical series colour. Keep status meaning out of it." : e.startsWith("--sidebar-") ? "A sidebar-specific colour." : e.startsWith("--inverse-") ? "An explicitly inverse surface or content colour." : e.endsWith("-foreground") ? "The foreground paired with the matching fill." : e.endsWith("--line-height") ? "Line height for the matching type step." : e.startsWith("--text-") ? "Font size for the matching type step." : e.startsWith("--font-") ? "Font stack for the matching content role." : e.startsWith("--shadow") ? "An elevation step used by surfaces and overlays." : t === "states" ? "A semantic state colour shared by every status surface." : "A public theme variable used across the kit.";
+function at(e) {
+	return e.startsWith("--chart-") ? "A categorical series colour. Keep status meaning out of it." : e.startsWith("--sidebar") ? "A sidebar colour." : e.endsWith("-foreground") ? "Text and icons on the matching fill." : e.startsWith("--text-") ? "Font size for the matching type step." : "A theme variable the kit reads.";
 }
-function Y(e, t, n, r, i) {
+function $(e, t, n, r, i) {
 	return e.map((e) => ({
 		name: e,
-		label: J[e] ?? Ze(e),
-		description: q[e] ?? Qe(e, t),
+		label: it(e),
+		description: Q[e] ?? at(e),
 		group: t,
 		section: n,
 		scope: r,
 		kind: i,
-		control: Xe[e]
+		control: rt[e]
 	}));
 }
-var $e = [
-	...Y(U.slice(0, 6), "colors", "surfaces-content", "mode", "color"),
-	...Y(qe, "colors", "surfaces-content", "shared", "color"),
-	...Y(U.slice(6, 19), "colors", "brand-actions", "mode", "color"),
-	...Y(U.slice(19, 24), "colors", "charts", "mode", "color"),
-	...Y(U.slice(24), "colors", "sidebar", "mode", "color"),
-	...Y(Ke.slice(0, 9), "states", "semantic-feedback", "mode", "color"),
-	...Y(Ke.slice(9), "states", "inverse-surfaces", "mode", "color"),
-	...Y(Je, "typography", "font-families", "shared", "font"),
-	...Y(W, "typography", "type-scale", "shared", "length"),
-	...Y(["--radius", "--radius-sm"], "shape", "radius", "shared", "length"),
-	...Y(Ye, "shape", "elevation", "mode", "shadow"),
-	...Y(G.slice(0, 2), "structure", "global-scales", "shared", "number"),
-	...Y(G.slice(2, 5), "structure", "actions-controls", "shared", "length"),
-	...Y(G.slice(5, 9), "structure", "rows-surfaces", "shared", "length"),
-	...Y(G.slice(9, 11), "structure", "media", "shared", "length"),
-	...Y(G.slice(11), "structure", "application-shell", "shared", "length"),
-	...Y(K.slice(0, 5), "structure", "content-widths", "shared", "length"),
-	...Y(K.slice(5), "structure", "adaptive-layout", "shared", "length")
-], et = {
+var ot = [
+	...$(Ye, "colors", "surfaces-content", "mode", "color"),
+	...$(Qe, "colors", "surfaces-content", "shared", "color"),
+	...$(Xe, "colors", "brand-actions", "mode", "color"),
+	...$(Ze, "colors", "charts", "mode", "color"),
+	...$(G, "colors", "sidebar", "mode", "color"),
+	...$(K, "states", "semantic-feedback", "mode", "color"),
+	...$($e, "states", "tints", "shared", "length"),
+	...$(et, "typography", "font-families", "shared", "font"),
+	...$(q.slice(0, 1), "typography", "type-scale", "shared", "number"),
+	...$(q.slice(1), "typography", "type-scale", "shared", "length"),
+	...$(J, "shape", "radius", "shared", "length"),
+	...$(tt, "shape", "elevation", "shared", "shadow"),
+	...$(nt, "structure", "spacing", "shared", "length"),
+	...$(Y, "structure", "controls", "shared", "length"),
+	...$(X.slice(0, 3), "structure", "motion", "shared", "length"),
+	...$(X.slice(3), "structure", "motion", "shared", "number"),
+	...$(Z, "structure", "application-shell", "shared", "length")
+], st = {
 	title: "Theme tweaker",
 	description: "Edit the public theme contract, calculate coherent recipes, and export complete CSS plus the display defaults that go with it.",
 	searchLabel: "Search variables",
@@ -883,13 +937,13 @@ var $e = [
 	providerOutputLabel: "UIProvider config",
 	providerOutputDescription: "Display defaults to pass to your application's provider.",
 	autoPalette: "Derive supporting colours",
-	autoPaletteDescription: "Keep muted, accent, borders, charts, links, and sidebar actions coherent with the primary colour.",
+	autoPaletteDescription: "Keep muted, accent, borders, charts, links and the sidebar coherent with the primary colour.",
 	typeRecipeTitle: "Calculated type scale",
-	typeRecipeDescription: "Generate every font step and line height from one body anchor and one modular ratio.",
+	typeRecipeDescription: "Every font step from one body size and one heading ratio. Line heights follow each size.",
 	baseTypeSize: "Base size",
 	typeRatio: "Heading ratio",
 	elevationRecipeTitle: "Calculated elevation",
-	elevationRecipeDescription: "Generate the whole shadow ladder from one restrained intensity.",
+	elevationRecipeDescription: "Both shadows, raised and floating, from one intensity.",
 	elevationIntensity: "Shadow intensity",
 	previewTitle: "Semantic preview",
 	previewDescription: "The same variables drive surfaces, typography, controls, rows, and states.",
@@ -901,7 +955,7 @@ var $e = [
 	previewSuccess: "Healthy",
 	previewWarning: "Review",
 	previewContract: "CSS variables",
-	providerSettings: B,
+	providerSettings: Ke,
 	groups: {
 		colors: "Colours",
 		states: "States",
@@ -912,10 +966,10 @@ var $e = [
 	},
 	groupDescriptions: {
 		colors: "Application surfaces, brand actions, charts, and sidebar colours.",
-		states: "Semantic feedback and inverse-surface pairs.",
+		states: "Semantic feedback colours and the two tint strengths.",
 		typography: "Font families and the calculated type scale.",
-		shape: "Corner radius and the elevation ladder.",
-		structure: "Density, spacing, controls, rows, media, and shell geometry.",
+		shape: "Corner radius, the hairline and the two shadows.",
+		structure: "Spacing, control and icon sizes, motion, and the shell's measures.",
 		defaults: "Formatting and display defaults applied through UIProvider."
 	},
 	sections: {
@@ -924,31 +978,28 @@ var $e = [
 		charts: "Charts",
 		sidebar: "Sidebar",
 		"semantic-feedback": "Semantic feedback",
-		"inverse-surfaces": "Inverse surfaces",
+		tints: "Tints",
 		"font-families": "Font families",
 		"type-scale": "Type scale",
-		radius: "Radius",
+		radius: "Radius & hairline",
 		elevation: "Elevation",
-		"global-scales": "Global scales",
-		"actions-controls": "Actions & controls",
-		"rows-surfaces": "Rows & surfaces",
-		media: "Media",
-		"application-shell": "Application shell",
-		"content-widths": "Content widths",
-		"adaptive-layout": "Adaptive layout"
+		spacing: "Spacing",
+		controls: "Controls & icons",
+		motion: "Motion",
+		"application-shell": "Application shell"
 	}
 };
 //#endregion
 //#region src/components/features/theme-tweaker/use-applied-theme.ts
-function X(e, t) {
+function ct(e, t) {
 	return e === null ? null : e === "self" ? t.current : e === "document" ? typeof document > "u" ? null : document.documentElement : typeof e == "function" ? e() : e;
 }
-function tt({ apply: e, manageModeClass: t, selfRef: n, target: r, theme: i }) {
-	Ne(() => {
+function lt({ apply: e, manageModeClass: t, selfRef: n, target: r, theme: i }) {
+	Me(() => {
 		if (!e || r === "self") return;
-		let a = X(r, n);
+		let a = ct(r, n);
 		if (!a) return;
-		let o = z(i), s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map();
+		let o = H(i), s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map();
 		for (let [e, t] of Object.entries(o)) typeof t == "string" && (s.set(e, {
 			value: a.style.getPropertyValue(e),
 			priority: a.style.getPropertyPriority(e)
@@ -972,298 +1023,297 @@ function tt({ apply: e, manageModeClass: t, selfRef: n, target: r, theme: i }) {
 }
 //#endregion
 //#region src/components/features/theme-tweaker/theme-tweaker.tsx
-var nt = [
+var ut = [
 	"colors",
 	"states",
 	"typography",
 	"shape",
 	"structure",
 	"defaults"
-], rt = {
-	colors: /* @__PURE__ */ E(S, {}),
-	states: /* @__PURE__ */ E(ke, {}),
-	typography: /* @__PURE__ */ E(je, {}),
-	shape: /* @__PURE__ */ E(Oe, {}),
-	structure: /* @__PURE__ */ E(Ce, {}),
-	defaults: /* @__PURE__ */ E(De, {})
+], dt = {
+	colors: /* @__PURE__ */ O(C, {}),
+	states: /* @__PURE__ */ O(ke, {}),
+	typography: /* @__PURE__ */ O(je, {}),
+	shape: /* @__PURE__ */ O(Oe, {}),
+	structure: /* @__PURE__ */ O(S, {}),
+	defaults: /* @__PURE__ */ O(De, {})
 };
-function it(e, t) {
+function ft(e, t) {
 	let n = Number.parseFloat(e);
 	return Number.isFinite(n) ? Math.min(t.max, Math.max(t.min, n)) : t.fallback ?? t.min;
 }
-function at(e, t) {
+function pt(e, t) {
 	return `${Number(e.toFixed(t.decimalPlaces ?? 3))}${t.unit ?? ""}`;
 }
-function ot(e, t) {
+function mt(e, t) {
 	return e === "document" ? document.documentElement : e === "self" || e === null ? t : typeof e == "function" ? e() : e ?? t;
 }
-function st(e, t) {
-	if (typeof document > "u" || typeof window > "u") return j(e);
-	let n = document.documentElement, r = [...new Set(t.map((e) => e.name))], i = n.classList.contains("light"), a = n.classList.contains("dark"), o = new Map(r.map((e) => [e, {
-		value: n.style.getPropertyValue(e),
-		priority: n.style.getPropertyPriority(e)
-	}])), s = (t) => {
-		for (let e of r) n.style.removeProperty(e);
-		n.classList.toggle("light", t === "light"), n.classList.toggle("dark", t === "dark");
-		for (let [r, i] of Object.entries(z(e, t))) typeof i == "string" && n.style.setProperty(r, i);
-		let i = window.getComputedStyle(n);
-		return Object.fromEntries(r.map((e) => [e, i.getPropertyValue(e).trim()]).filter(([, e]) => e.length > 0));
-	};
-	try {
-		let n = s("light"), r = s("dark"), i = new Set(t.filter((e) => e.scope === "shared").map((e) => e.name));
-		return j({
-			mode: e.mode,
-			shared: Object.fromEntries(Object.entries(n).filter(([e]) => i.has(e))),
-			light: Object.fromEntries(Object.entries(n).filter(([e]) => !i.has(e))),
-			dark: Object.fromEntries(Object.entries(r).filter(([e]) => !i.has(e)))
-		});
-	} finally {
-		for (let e of r) {
-			let t = o.get(e);
-			t?.value ? n.style.setProperty(e, t.value, t.priority) : n.style.removeProperty(e);
+function ht(e, t, n) {
+	if (!n || typeof window > "u") return j(e);
+	let r = window.getComputedStyle(n), i = {}, a = {}, o = {};
+	for (let e of t) {
+		let t = r.getPropertyValue(e.name).trim();
+		if (!t) continue;
+		if (e.scope === "shared") {
+			i[e.name] = t;
+			continue;
 		}
-		n.classList.toggle("light", i), n.classList.toggle("dark", a);
+		let n = I(t);
+		a[e.name] = n ? n[0] : t, o[e.name] = n ? n[1] : t;
 	}
+	return j({
+		mode: e.mode,
+		shared: i,
+		light: a,
+		dark: o
+	});
 }
-function ct(e, t, n) {
+function gt(e, t, n) {
 	let r = t.scope === "shared" ? "shared" : e.mode, i = { ...e[r] };
 	return n.trim().length === 0 ? delete i[t.name] : i[t.name] = n, {
 		...e,
 		[r]: i
 	};
 }
-function lt({ title: e, description: r, code: i, copyLabel: a, downloadLabel: o, downloading: s = !1, onCopy: c, onDownload: l }) {
-	let d = C();
-	return /* @__PURE__ */ D("section", {
-		"aria-labelledby": d,
-		className: V.exportBlock,
-		children: [/* @__PURE__ */ D("div", {
-			className: V.exportBlockHeader,
-			children: [/* @__PURE__ */ D(p, {
-				gap: "2xs",
-				className: V.minWidth,
-				children: [/* @__PURE__ */ E(t, {
-					id: d,
+function _t({ title: i, description: a, code: o, copyLabel: c, downloadLabel: l, downloading: d = !1, onCopy: ee, onDownload: f }) {
+	let p = T();
+	return /* @__PURE__ */ k("section", {
+		"aria-labelledby": p,
+		className: U.exportBlock,
+		children: [/* @__PURE__ */ k("div", {
+			className: U.exportBlockHeader,
+			children: [/* @__PURE__ */ k(u, {
+				gap: "sm",
+				className: U.minWidth,
+				children: [/* @__PURE__ */ O(t, {
+					id: p,
 					level: 3,
-					children: e
-				}), /* @__PURE__ */ E(n, {
+					children: i
+				}), /* @__PURE__ */ O(n, {
 					type: "secondary",
-					children: r
+					children: a
 				})]
-			}), /* @__PURE__ */ D(p, {
+			}), /* @__PURE__ */ k(u, {
 				direction: "horizontal",
-				gap: "xs",
+				gap: "sm",
 				align: "center",
 				wrap: !0,
-				children: [/* @__PURE__ */ D(u, {
+				children: [/* @__PURE__ */ k(s, {
 					type: "button",
 					tone: "neutral",
-					buttonStyle: "outline",
-					onClick: c,
-					children: [/* @__PURE__ */ E(be, {}), a]
-				}), /* @__PURE__ */ D(u, {
+					appearance: "outline",
+					onClick: ee,
+					children: [/* @__PURE__ */ O(xe, {}), c]
+				}), /* @__PURE__ */ k(s, {
 					type: "button",
-					loading: s,
-					onClick: l,
-					children: [/* @__PURE__ */ E(xe, {}), o]
+					loading: d,
+					onClick: f,
+					children: [/* @__PURE__ */ O(Se, {}), l]
 				})]
 			})]
-		}), /* @__PURE__ */ E("pre", {
+		}), /* @__PURE__ */ O("pre", {
 			tabIndex: 0,
-			"aria-label": e,
-			className: V.exportCode,
-			children: /* @__PURE__ */ E("code", { children: i })
+			"aria-label": i,
+			className: r(U.exportCode, e({
+				size: "xs",
+				lineHeight: "relaxed",
+				mono: !0
+			})),
+			children: /* @__PURE__ */ O("code", { children: o })
 		})]
 	});
 }
-function ut({ field: t, value: r, effectiveValue: i, onChange: a, onReset: o, strings: s }) {
-	let c = `theme-variable-${C().replace(/:/g, "")}`, l = /* @__PURE__ */ E(u, {
+function vt({ field: t, value: i, effectiveValue: a, onChange: o, onReset: c, strings: l }) {
+	let d = `theme-variable-${T().replace(/:/g, "")}`, f = /* @__PURE__ */ O(s, {
 		type: "button",
 		tone: "neutral",
-		buttonStyle: "ghost",
+		appearance: "ghost",
 		iconOnly: !0,
-		"aria-label": `${s.resetVariable}: ${t.label}`,
-		title: s.resetVariable,
-		disabled: !r,
-		onClick: o,
-		children: /* @__PURE__ */ E(Te, {})
-	}), d = t.placeholder ?? i ?? s.inheritValue, f;
-	if (t.kind === "color") f = /* @__PURE__ */ D("div", {
-		className: V.controlRow,
-		children: [/* @__PURE__ */ E(ue, {
-			id: c,
+		"aria-label": `${l.resetVariable}: ${t.label}`,
+		title: l.resetVariable,
+		disabled: !i,
+		onClick: c,
+		children: /* @__PURE__ */ O(Te, {})
+	}), p = t.placeholder ?? a ?? l.inheritValue, m;
+	if (t.kind === "color") m = /* @__PURE__ */ k("div", {
+		className: U.controlRow,
+		children: [/* @__PURE__ */ O(me, {
+			id: d,
 			"aria-label": t.label,
-			value: r,
-			previewValue: r || i || `var(${t.name})`,
-			strings: { picker: s.chooseColor(t.label) },
-			onValueChange: a,
-			placeholder: d,
-			className: V.controlInput
-		}), l]
+			value: i,
+			previewValue: i || a || `var(${t.name})`,
+			strings: { picker: l.chooseColor(t.label) },
+			onValueChange: o,
+			placeholder: p,
+			className: U.controlInput
+		}), f]
 	});
 	else if (t.control?.type === "range") {
-		let e = t.control, n = it(r || i, e);
-		f = /* @__PURE__ */ D(p, {
+		let n = t.control, s = ft(i || a, n);
+		m = /* @__PURE__ */ k(u, {
 			gap: "sm",
-			children: [/* @__PURE__ */ E(x, {
-				id: `${c}-slider`,
-				"aria-label": s.adjustVariable(t.label),
-				value: n,
-				min: e.min,
-				max: e.max,
-				step: e.step,
-				onValueChange: (t) => a(at(t, e))
-			}), /* @__PURE__ */ D("div", {
-				className: V.controlRow,
-				children: [/* @__PURE__ */ E(pe, {
-					id: c,
+			children: [/* @__PURE__ */ O(x, {
+				id: `${d}-slider`,
+				"aria-label": l.adjustVariable(t.label),
+				value: s,
+				min: n.min,
+				max: n.max,
+				step: n.step,
+				onValueChange: (e) => o(pt(e, n))
+			}), /* @__PURE__ */ k("div", {
+				className: U.controlRow,
+				children: [/* @__PURE__ */ O(ae, {
+					id: d,
 					"aria-label": t.label,
-					value: String(n),
-					decimalPlaces: e.decimalPlaces ?? 3,
-					min: e.min,
-					max: e.max,
+					value: String(s),
+					decimalPlaces: n.decimalPlaces ?? 3,
+					min: n.min,
+					max: n.max,
 					allowEmpty: !0,
 					normalizeOnBlur: !1,
-					endAdornment: e.unit,
-					onChange: (t) => {
-						let n = t.target.value.trim();
-						a(n ? `${n}${e.unit ?? ""}` : "");
+					endAdornment: n.unit,
+					onChange: (e) => {
+						let t = e.target.value.trim();
+						o(t ? `${t}${n.unit ?? ""}` : "");
 					},
-					className: V.numberInput
-				}), l]
+					className: r(U.numberInput, e({
+						size: "inherit",
+						mono: !0
+					}))
+				}), f]
 			})]
 		});
-	} else f = /* @__PURE__ */ D("div", {
-		className: V.controlRow,
-		children: [/* @__PURE__ */ E(y, {
-			id: c,
+	} else m = /* @__PURE__ */ k("div", {
+		className: U.controlRow,
+		children: [/* @__PURE__ */ O(v, {
+			id: d,
 			"aria-label": t.label,
-			value: r,
-			onChange: (e) => a(e.target.value),
-			placeholder: d,
-			className: e(V.controlInput, V.monoInput)
-		}), l]
+			value: i,
+			onChange: (e) => o(e.target.value),
+			placeholder: p,
+			className: r(U.controlInput, e({
+				size: "inherit",
+				mono: !0
+			}))
+		}), f]
 	});
-	return /* @__PURE__ */ E(v, {
-		label: /* @__PURE__ */ D("span", {
-			className: V.fieldLabel,
-			children: [/* @__PURE__ */ E(n, {
+	return /* @__PURE__ */ O(y, {
+		label: /* @__PURE__ */ k("span", {
+			className: U.fieldLabel,
+			children: [/* @__PURE__ */ O(n, {
 				tag: "span",
 				size: "inherit",
 				weight: "medium",
 				truncate: !0,
 				children: t.label
-			}), /* @__PURE__ */ E(m, {
+			}), /* @__PURE__ */ O(ee, {
 				size: "xs",
 				type: "secondary",
 				children: t.name
 			})]
 		}),
-		className: V.field,
-		children: f
+		className: U.field,
+		children: m
 	});
 }
-function dt({ strings: e }) {
-	return /* @__PURE__ */ E(f, {
+function yt({ strings: e }) {
+	return /* @__PURE__ */ O(g, {
 		surface: "bordered",
-		icon: /* @__PURE__ */ E(S, {}),
+		icon: /* @__PURE__ */ O(C, {}),
 		title: e.previewTitle,
 		description: e.previewDescription,
-		children: /* @__PURE__ */ D(p, {
-			gap: "lg",
-			children: [
-				/* @__PURE__ */ D(p, {
-					direction: "horizontal",
-					gap: "sm",
-					wrap: !0,
-					children: [
-						/* @__PURE__ */ E(h, {
-							tone: "success",
-							children: e.previewSuccess
-						}),
-						/* @__PURE__ */ E(h, {
-							tone: "warning",
-							children: e.previewWarning
-						}),
-						/* @__PURE__ */ E(h, {
-							tone: "neutral",
-							children: e.previewContract
-						})
-					]
-				}),
-				/* @__PURE__ */ D(_, {
-					surface: "muted",
-					children: [
-						/* @__PURE__ */ E(te, {
-							variant: "icon",
-							children: /* @__PURE__ */ E(S, {})
-						}),
-						/* @__PURE__ */ D(ne, { children: [/* @__PURE__ */ E(re, { children: e.previewItemTitle }), /* @__PURE__ */ E(g, { children: e.previewItemDescription })] }),
-						/* @__PURE__ */ E(ye, {
-							"aria-hidden": !0,
-							className: V.previewCheck
-						})
-					]
-				}),
-				/* @__PURE__ */ E(v, {
-					label: e.previewFieldLabel,
-					children: /* @__PURE__ */ E(y, { placeholder: e.previewFieldPlaceholder })
-				}),
-				/* @__PURE__ */ E(u, {
-					type: "button",
-					children: e.previewAction
-				})
-			]
-		})
+		children: /* @__PURE__ */ k(u, { children: [
+			/* @__PURE__ */ k(u, {
+				direction: "horizontal",
+				gap: "sm",
+				wrap: !0,
+				children: [
+					/* @__PURE__ */ O(f, {
+						tone: "success",
+						children: e.previewSuccess
+					}),
+					/* @__PURE__ */ O(f, {
+						tone: "warning",
+						children: e.previewWarning
+					}),
+					/* @__PURE__ */ O(f, {
+						tone: "neutral",
+						children: e.previewContract
+					})
+				]
+			}),
+			/* @__PURE__ */ k(ce, {
+				surface: "muted",
+				children: [
+					/* @__PURE__ */ O(b, {
+						variant: "icon",
+						children: /* @__PURE__ */ O(C, {})
+					}),
+					/* @__PURE__ */ k(se, { children: [/* @__PURE__ */ O(le, { children: e.previewItemTitle }), /* @__PURE__ */ O(oe, { children: e.previewItemDescription })] }),
+					/* @__PURE__ */ O(be, {
+						"aria-hidden": !0,
+						className: U.previewCheck
+					})
+				]
+			}),
+			/* @__PURE__ */ O(y, {
+				label: e.previewFieldLabel,
+				children: /* @__PURE__ */ O(v, { placeholder: e.previewFieldPlaceholder })
+			}),
+			/* @__PURE__ */ O(s, {
+				type: "button",
+				children: e.previewAction
+			})
+		] })
 	});
 }
-var Z = Me(function({ value: r, defaultValue: i, onValueChange: a, onModeChange: s, fields: c = $e, target: l = "self", apply: m = !0, manageModeClass: te = !0, preview: g, fileName: ne = "theme.css", config: _, defaultConfig: re, onConfigChange: b, providerFileName: ue = "ui.config.ts", showIntro: pe = !0, selectors: ye, onExport: be, onCopy: Se, onReset: Ce, onError: S, actionsSlot: De, strings: Oe, className: ke, ...je }, Me) {
-	let C = ie(et, Oe), [O, Ie] = T(() => j(i)), k = w(() => r ? j(r) : O, [O, r]), [A, Le] = T(() => I(re)), M = w(() => I(_ ?? A), [_, A]), [N, P] = T("colors"), [F, L] = T(""), [R, ze] = T(!0), [B, We] = T(16), [H, U] = T(1.2), [Ke, qe] = T(.8), [Je, W] = T("idle"), [Ye, G] = T(!1), K = me(), q = Fe(null);
-	Pe(Me, () => q.current), tt({
-		apply: m,
-		manageModeClass: te,
-		selfRef: q,
-		target: l,
-		theme: k
+var bt = w(function({ value: e, defaultValue: i, onValueChange: a, onModeChange: ee, fields: p = ot, target: m = "self", apply: h = !0, manageModeClass: ne = !0, preview: _, fileName: ae = "theme.css", config: b, defaultConfig: oe, onConfigChange: se, providerFileName: ce = "ui.config.ts", showIntro: le = !0, selectors: me, onExport: be, onCopy: xe, onReset: Ce, onError: S, actionsSlot: C, strings: De, className: Oe, ...ke }, je) {
+	let w = d(st, De), [T, Fe] = D(() => j(i)), A = E(() => e ? j(e) : T, [T, e]), [Ie, Le] = D(() => B(oe)), M = E(() => B(b ?? Ie), [b, Ie]), [N, P] = D("colors"), [F, I] = D(""), [L, Re] = D(!0), [R, z] = D(16), [V, ze] = D(1.2), [Ve, Ke] = D(.8), [qe, W] = D("idle"), [Ye, Xe] = D(!1), Ze = he(), G = Pe(null);
+	Ne(je, () => G.current), lt({
+		apply: h,
+		manageModeClass: ne,
+		selfRef: G,
+		target: m,
+		theme: A
 	});
-	let [J, Xe] = T(() => j(k)), [Ze, Qe] = T({});
-	Ne(() => {
+	let [K, Qe] = D(() => j(A)), [$e, et] = D({});
+	Me(() => {
 		if (typeof window > "u") return;
 		let e = window.setTimeout(() => {
-			let e = ot(l, q.current);
+			let e = mt(m, G.current);
 			if (!e) return;
-			let t = window.getComputedStyle(e);
-			Qe(Object.fromEntries(c.map((e) => [e.name, t.getPropertyValue(e.name).trim()]))), Xe(st(k, c));
+			let t = ht(A, p, e);
+			et(Object.fromEntries(p.map((e) => [e.name, (e.scope === "shared" ? t.shared : t[A.mode])[e.name] ?? ""]))), Qe(t);
 		}, 0);
 		return () => window.clearTimeout(e);
 	}, [
+		h,
+		p,
 		m,
-		c,
-		l,
-		k
+		A
 	]);
-	let { artifact: Y, error: X } = w(() => {
+	let { artifact: q, error: J } = E(() => {
 		try {
 			let e = j({
-				mode: k.mode,
+				mode: A.mode,
 				shared: {
-					...J.shared,
-					...k.shared
+					...K.shared,
+					...A.shared
 				},
 				light: {
-					...J.light,
-					...k.light
+					...K.light,
+					...A.light
 				},
 				dark: {
-					...J.dark,
-					...k.dark
+					...K.dark,
+					...A.dark
 				}
 			});
 			return {
-				artifact: Be(k, ne, { selectors: ye }, {
+				artifact: He(A, ae, { selectors: me }, {
 					resolvedTheme: e,
 					providerConfig: M,
-					providerFileName: ue
+					providerFileName: ce
 				}),
 				error: null
 			};
@@ -1274,23 +1324,23 @@ var Z = Me(function({ value: r, defaultValue: i, onValueChange: a, onModeChange:
 			};
 		}
 	}, [
-		ne,
+		ae,
 		M,
-		ue,
-		J,
-		ye,
-		k
-	]), it = Y?.cssText ?? `/* ${C.invalidTheme} */\n`, at = w(() => Re(k), [k]), Z = F.trim().toLowerCase(), ft = w(() => c.filter((e) => Z ? [
+		ce,
+		K,
+		me,
+		A
+	]), tt = q?.cssText ?? `/* ${w.invalidTheme} */\n`, nt = E(() => Be(A), [A]), Y = F.trim().toLowerCase(), X = E(() => p.filter((e) => Y ? [
 		e.name,
 		e.label,
 		e.description
-	].some((e) => e?.toLowerCase().includes(Z)) : e.group === N), [
-		c,
+	].some((e) => e?.toLowerCase().includes(Y)) : e.group === N), [
+		p,
 		N,
-		Z
-	]), Q = w(() => {
+		Y
+	]), Z = E(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of ft) {
+		for (let t of X) {
 			let n = `${t.group}:${t.section}`, r = e.get(n);
 			r ? r.fields.push(t) : e.set(n, {
 				group: t.group,
@@ -1299,389 +1349,379 @@ var Z = Me(function({ value: r, defaultValue: i, onValueChange: a, onModeChange:
 			});
 		}
 		return [...e.values()];
-	}, [ft]), $ = (e) => {
-		r === void 0 && Ie(e), a?.(e), W("idle");
-	}, pt = (e) => {
-		$({
-			...k,
-			[k.mode]: {
-				...k[k.mode],
+	}, [X]), Q = (t) => {
+		e === void 0 && Fe(t), a?.(t), W("idle");
+	}, rt = (e) => {
+		Q({
+			...A,
+			[A.mode]: {
+				...A[A.mode],
 				...e
 			}
 		});
-	}, mt = (e) => {
-		$({
-			...k,
+	}, it = (e) => {
+		Q({
+			...A,
 			shared: {
-				...k.shared,
+				...A.shared,
 				...e
 			}
 		});
-	}, ht = (e) => {
-		e !== k.mode && ($({
-			...k,
+	}, at = (e) => {
+		e !== A.mode && (Q({
+			...A,
 			mode: e
-		}), s?.(e));
-	}, gt = async (e) => {
+		}), ee?.(e));
+	}, $ = async (e) => {
 		try {
-			if (Se) await Se(e);
+			if (xe) await xe(e);
 			else if (typeof navigator < "u" && navigator.clipboard) await navigator.clipboard.writeText(e);
 			else throw Error("No clipboard here. Pass onCopy for this environment.");
 			W("copied");
 		} catch (e) {
 			S?.(e);
 		}
-	}, _t = async () => {
+	}, ct = async () => {
 		try {
-			if (X) throw X;
-			if (!Y) throw Error(C.invalidTheme);
-			G(!0), be ? await be(Y) : He(Y), W("exported");
+			if (J) throw J;
+			if (!q) throw Error(w.invalidTheme);
+			Xe(!0), be ? await be(q) : We(q), W("exported");
 		} catch (e) {
 			S?.(e);
 		} finally {
-			G(!1);
+			Xe(!1);
 		}
-	}, vt = () => {
+	}, ft = () => {
 		try {
-			if (!Y) throw X ?? Error(C.invalidTheme);
-			Ve({
-				fileName: Y.providerFileName,
-				text: Y.providerConfigText,
+			if (!q) throw J ?? Error(w.invalidTheme);
+			Ue({
+				fileName: q.providerFileName,
+				text: q.providerConfigText,
 				mimeType: "text/typescript;charset=utf-8"
 			}), W("exported");
 		} catch (e) {
 			S?.(e);
 		}
-	}, yt = () => {
-		let e = k;
-		$(j({ mode: k.mode })), Ce?.(e);
-	}, bt = X ? C.invalidTheme : Je === "copied" ? C.copiedStatus : Je === "exported" ? C.exportedStatus : null, xt = N === "colors" ? /* @__PURE__ */ E(f, {
+	}, pt = () => {
+		let e = A;
+		Q(j({ mode: A.mode })), Ce?.(e);
+	}, bt = J ? w.invalidTheme : qe === "copied" ? w.copiedStatus : qe === "exported" ? w.exportedStatus : null, xt = N === "colors" ? /* @__PURE__ */ O(g, {
 		surface: "bordered",
-		children: /* @__PURE__ */ E(le, {
-			label: C.autoPalette,
-			description: C.autoPaletteDescription,
-			value: R,
-			onValueChange: ze
+		children: /* @__PURE__ */ O(ie, {
+			label: w.autoPalette,
+			description: w.autoPaletteDescription,
+			value: L,
+			onValueChange: Re
 		})
-	}) : N === "typography" ? /* @__PURE__ */ E(f, {
+	}) : N === "typography" ? /* @__PURE__ */ O(g, {
 		surface: "bordered",
-		title: C.typeRecipeTitle,
-		description: C.typeRecipeDescription,
-		children: /* @__PURE__ */ D(ee, {
+		title: w.typeRecipeTitle,
+		description: w.typeRecipeDescription,
+		children: /* @__PURE__ */ k(l, {
 			columns: {
 				base: 1,
 				sm: 2
 			},
-			gap: "md",
-			children: [/* @__PURE__ */ E(v, {
-				label: C.baseTypeSize,
-				children: /* @__PURE__ */ E(x, {
-					"aria-label": C.baseTypeSize,
-					value: B,
+			gap: "sm",
+			children: [/* @__PURE__ */ O(y, {
+				label: w.baseTypeSize,
+				children: /* @__PURE__ */ O(x, {
+					"aria-label": w.baseTypeSize,
+					value: R,
 					min: 14,
 					max: 20,
 					step: 1,
 					onValueChange: (e) => {
-						We(e), mt(_e({
+						z(e), it(_e({
 							baseSize: e,
-							ratio: H
+							ratio: V
 						}));
 					}
 				})
-			}), /* @__PURE__ */ E(v, {
-				label: C.typeRatio,
-				children: /* @__PURE__ */ E(x, {
-					"aria-label": C.typeRatio,
-					value: H,
+			}), /* @__PURE__ */ O(y, {
+				label: w.typeRatio,
+				children: /* @__PURE__ */ O(x, {
+					"aria-label": w.typeRatio,
+					value: V,
 					min: 1.125,
 					max: 1.333,
 					step: .01,
 					onValueChange: (e) => {
-						U(e), mt(_e({
-							baseSize: B,
+						ze(e), it(_e({
+							baseSize: R,
 							ratio: e
 						}));
 					}
 				})
 			})]
 		})
-	}) : N === "shape" ? /* @__PURE__ */ E(f, {
+	}) : N === "shape" ? /* @__PURE__ */ O(g, {
 		surface: "bordered",
-		title: C.elevationRecipeTitle,
-		description: C.elevationRecipeDescription,
-		children: /* @__PURE__ */ E(v, {
-			label: C.elevationIntensity,
-			children: /* @__PURE__ */ E(x, {
-				"aria-label": C.elevationIntensity,
-				value: Ke,
+		title: w.elevationRecipeTitle,
+		description: w.elevationRecipeDescription,
+		children: /* @__PURE__ */ O(y, {
+			label: w.elevationIntensity,
+			children: /* @__PURE__ */ O(x, {
+				"aria-label": w.elevationIntensity,
+				value: Ve,
 				min: 0,
 				max: 1,
 				step: .05,
 				onValueChange: (e) => {
-					qe(e), pt(ve({ intensity: e }));
+					Ke(e), it(ve({ intensity: e }));
 				}
 			})
 		})
-	}) : null, St = /* @__PURE__ */ D("div", {
-		className: e(V.layout, g !== !1 && V.layoutWithPreview),
+	}) : null, St = /* @__PURE__ */ k("div", {
+		className: r(U.layout, _ !== !1 && U.layoutWithPreview),
 		children: [
-			/* @__PURE__ */ D("div", {
-				className: V.controls,
-				children: [/* @__PURE__ */ D(p, {
-					gap: "lg",
-					children: [
-						pe && /* @__PURE__ */ D(p, {
-							gap: "xs",
-							children: [/* @__PURE__ */ D(p, {
-								direction: "horizontal",
-								gap: "sm",
-								align: "center",
-								wrap: !0,
-								children: [/* @__PURE__ */ E(t, {
-									level: 2,
-									children: C.title
-								}), /* @__PURE__ */ E(h, {
-									tone: "neutral",
-									children: C.changedCount(at)
-								})]
-							}), /* @__PURE__ */ E(n, {
-								type: "secondary",
-								children: C.description
+			/* @__PURE__ */ k("div", {
+				className: U.controls,
+				children: [/* @__PURE__ */ k(u, { children: [
+					le && /* @__PURE__ */ k(u, {
+						gap: "sm",
+						children: [/* @__PURE__ */ k(u, {
+							direction: "horizontal",
+							gap: "sm",
+							align: "center",
+							wrap: !0,
+							children: [/* @__PURE__ */ O(t, {
+								level: 2,
+								children: w.title
+							}), /* @__PURE__ */ O(f, {
+								tone: "neutral",
+								children: w.changedCount(nt)
 							})]
-						}),
-						/* @__PURE__ */ D("div", {
-							className: V.toolbar,
-							children: [/* @__PURE__ */ E(p, {
-								direction: "horizontal",
-								gap: "sm",
-								align: "center",
-								wrap: !0,
-								children: /* @__PURE__ */ E(se, {
-									value: k.mode,
-									onValueChange: (e) => ht(e),
-									children: /* @__PURE__ */ D(ae, {
-										variant: "enclosed",
-										children: [/* @__PURE__ */ D(ce, {
-											value: "light",
-											children: [/* @__PURE__ */ E(Ae, {}), C.lightMode]
-										}), /* @__PURE__ */ D(ce, {
-											value: "dark",
-											children: [/* @__PURE__ */ E(we, {}), C.darkMode]
-										})]
-									})
+						}), /* @__PURE__ */ O(n, {
+							type: "secondary",
+							children: w.description
+						})]
+					}),
+					/* @__PURE__ */ k("div", {
+						className: U.toolbar,
+						children: [/* @__PURE__ */ O(u, {
+							direction: "horizontal",
+							gap: "sm",
+							align: "center",
+							wrap: !0,
+							children: /* @__PURE__ */ O(fe, {
+								value: A.mode,
+								onValueChange: (e) => at(e),
+								children: /* @__PURE__ */ k(ue, {
+									variant: "enclosed",
+									children: [/* @__PURE__ */ k(pe, {
+										value: "light",
+										children: [/* @__PURE__ */ O(Ae, {}), w.lightMode]
+									}), /* @__PURE__ */ k(pe, {
+										value: "dark",
+										children: [/* @__PURE__ */ O(we, {}), w.darkMode]
+									})]
 								})
-							}), /* @__PURE__ */ D(p, {
-								direction: "horizontal",
-								gap: "xs",
-								align: "center",
-								justify: "end",
-								wrap: !1,
-								children: [/* @__PURE__ */ D(u, {
-									type: "button",
-									tone: "neutral",
-									buttonStyle: "outline",
-									disabled: !!X,
-									onClick: () => {
-										W("idle"), K.show();
-									},
-									children: [/* @__PURE__ */ E(xe, {}), C.export]
-								}), De]
-							})]
-						}),
-						/* @__PURE__ */ E(v, {
-							label: /* @__PURE__ */ E(d, { children: C.searchLabel }),
-							children: /* @__PURE__ */ E(y, {
-								value: F,
-								onChange: (e) => L(e.target.value),
-								placeholder: C.searchPlaceholder,
-								startIcon: Ee,
-								clearable: !0,
-								onClear: () => L("")
 							})
+						}), /* @__PURE__ */ k(u, {
+							direction: "horizontal",
+							gap: "sm",
+							align: "center",
+							justify: "end",
+							wrap: !1,
+							children: [/* @__PURE__ */ k(s, {
+								type: "button",
+								tone: "neutral",
+								appearance: "outline",
+								disabled: !!J,
+								onClick: () => {
+									W("idle"), Ze.show();
+								},
+								children: [/* @__PURE__ */ O(Se, {}), w.export]
+							}), C]
+						})]
+					}),
+					/* @__PURE__ */ O(y, {
+						label: /* @__PURE__ */ O(re, { children: w.searchLabel }),
+						children: /* @__PURE__ */ O(v, {
+							value: F,
+							onChange: (e) => I(e.target.value),
+							placeholder: w.searchPlaceholder,
+							startIcon: Ee,
+							clearable: !0,
+							onClear: () => I("")
 						})
-					]
-				}), /* @__PURE__ */ D(se, {
+					})
+				] }), /* @__PURE__ */ k(fe, {
 					value: N,
 					onValueChange: (e) => {
-						L(""), P(e);
+						I(""), P(e);
 					},
-					children: [/* @__PURE__ */ E(ae, {
+					children: [/* @__PURE__ */ O(ue, {
 						variant: "enclosed",
 						edgeFade: !0,
-						label: C.groupNavigationLabel,
-						children: nt.map((e) => /* @__PURE__ */ D(ce, {
+						label: w.groupNavigationLabel,
+						children: ut.map((e) => /* @__PURE__ */ k(pe, {
 							value: e,
-							children: [rt[e], /* @__PURE__ */ E(n, {
+							children: [dt[e], /* @__PURE__ */ O(n, {
 								tag: "span",
 								size: "inherit",
 								weight: "medium",
-								children: C.groups[e]
+								children: w.groups[e]
 							})]
 						}, e))
-					}), /* @__PURE__ */ E(oe, {
+					}), /* @__PURE__ */ O(de, {
 						value: N,
-						children: /* @__PURE__ */ D(p, {
-							gap: "xl",
-							children: [
-								/* @__PURE__ */ D(p, {
-									gap: "xs",
-									children: [/* @__PURE__ */ D(p, {
-										direction: "horizontal",
-										gap: "sm",
-										align: "center",
-										wrap: !0,
-										children: [/* @__PURE__ */ E(t, {
-											level: 3,
-											size: "base",
-											children: Z ? C.allGroups : C.groups[N]
-										}), !!Z && /* @__PURE__ */ E(h, {
-											tone: "neutral",
-											role: "status",
-											"aria-live": "polite",
-											children: C.searchResults(ft.length)
-										})]
-									}), /* @__PURE__ */ E(n, {
-										type: "secondary",
-										children: Z ? C.searchHint : C.groupDescriptions[N]
+						children: /* @__PURE__ */ k(u, { children: [
+							/* @__PURE__ */ k(u, {
+								gap: "sm",
+								children: [/* @__PURE__ */ k(u, {
+									direction: "horizontal",
+									gap: "sm",
+									align: "center",
+									wrap: !0,
+									children: [/* @__PURE__ */ O(t, {
+										level: 3,
+										size: "base",
+										children: Y ? w.allGroups : w.groups[N]
+									}), !!Y && /* @__PURE__ */ O(f, {
+										tone: "neutral",
+										role: "status",
+										"aria-live": "polite",
+										children: w.searchResults(X.length)
 									})]
-								}),
-								!Z && xt,
-								N === "defaults" && !Z ? /* @__PURE__ */ E(Ge, {
-									config: M,
-									onChange: (e) => {
-										_ === void 0 && Le(e), b?.(e), W("idle");
-									},
-									strings: C.providerSettings
-								}) : Q.length > 0 ? /* @__PURE__ */ E(de, {
-									multiple: !0,
-									defaultValue: [`${Q[0].group}:${Q[0].section}`],
-									surface: "bordered",
-									media: "none",
-									items: Q.map((e) => {
-										let t = new Set(e.fields.map((e) => e.scope)), n = t.size > 1 ? C.mixedScope : t.has("shared") ? C.sharedScope : k.mode === "light" ? C.lightMode : C.darkMode;
-										return {
-											value: `${e.group}:${e.section}`,
-											title: Z ? C.groupSectionLabel(C.groups[e.group], C.sections[e.section]) : C.sections[e.section],
-											description: C.variableCount(e.fields.length),
-											badge: /* @__PURE__ */ E(h, {
-												tone: "neutral",
-												children: n
-											}),
-											content: /* @__PURE__ */ E("div", {
-												className: V.fields,
-												children: e.fields.map((e) => {
-													let t = e.scope === "shared" ? "shared" : k.mode;
-													return /* @__PURE__ */ E(ut, {
-														field: e,
-														value: k[t][e.name] ?? "",
-														effectiveValue: Ze[e.name] ?? "",
-														strings: C,
-														onChange: (t) => {
-															if (e.name === "--primary" && R && t.trim()) {
-																pt(ge({
-																	primary: t,
-																	mode: k.mode
-																}));
-																return;
-															}
-															$(ct(k, e, t));
-														},
-														onReset: () => $(ct(k, e, ""))
-													}, e.name);
-												})
+								}), /* @__PURE__ */ O(n, {
+									type: "secondary",
+									children: Y ? w.searchHint : w.groupDescriptions[N]
+								})]
+							}),
+							!Y && xt,
+							N === "defaults" && !Y ? /* @__PURE__ */ O(Je, {
+								config: M,
+								onChange: (e) => {
+									b === void 0 && Le(e), se?.(e), W("idle");
+								},
+								strings: w.providerSettings
+							}) : Z.length > 0 ? /* @__PURE__ */ O(o, {
+								multiple: !0,
+								defaultValue: [`${Z[0].group}:${Z[0].section}`],
+								surface: "bordered",
+								media: "none",
+								items: Z.map((e) => {
+									let t = new Set(e.fields.map((e) => e.scope)), n = t.size > 1 ? w.mixedScope : t.has("shared") ? w.sharedScope : A.mode === "light" ? w.lightMode : w.darkMode;
+									return {
+										value: `${e.group}:${e.section}`,
+										title: Y ? w.groupSectionLabel(w.groups[e.group], w.sections[e.section]) : w.sections[e.section],
+										description: w.variableCount(e.fields.length),
+										badge: /* @__PURE__ */ O(f, {
+											tone: "neutral",
+											children: n
+										}),
+										content: /* @__PURE__ */ O("div", {
+											className: U.fields,
+											children: e.fields.map((e) => {
+												let t = e.scope === "shared" ? "shared" : A.mode;
+												return /* @__PURE__ */ O(vt, {
+													field: e,
+													value: A[t][e.name] ?? "",
+													effectiveValue: $e[e.name] ?? "",
+													strings: w,
+													onChange: (t) => {
+														if (e.name === "--primary" && L && t.trim()) {
+															rt(ye({
+																primary: t,
+																mode: A.mode
+															}));
+															return;
+														}
+														Q(gt(A, e, t));
+													},
+													onReset: () => Q(gt(A, e, ""))
+												}, e.name);
 											})
-										};
-									})
-								}, `${N}:${Z}`) : /* @__PURE__ */ E(o, {
-									padding: "sm",
-									title: C.emptySearch,
-									description: !1,
-									className: V.empty
+										})
+									};
 								})
-							]
-						})
+							}, `${N}:${Y}`) : /* @__PURE__ */ O(te, {
+								border: !0,
+								title: w.emptySearch,
+								description: !1
+							})
+						] })
 					})]
 				})]
 			}),
-			g !== !1 && /* @__PURE__ */ E("div", {
-				className: V.preview,
-				children: g ?? /* @__PURE__ */ E(dt, { strings: C })
+			_ !== !1 && /* @__PURE__ */ O("div", {
+				className: U.preview,
+				children: _ ?? /* @__PURE__ */ O(yt, { strings: w })
 			}),
-			/* @__PURE__ */ E(he, {
-				...K.overlayProps,
-				title: C.exportDialogTitle,
-				description: C.exportDialogDescription,
+			/* @__PURE__ */ O(ge, {
+				...Ze.overlayProps,
+				title: w.exportDialogTitle,
+				description: w.exportDialogDescription,
 				showCloseButton: !1,
 				showCancel: !1,
 				showConfirm: !1,
 				width: "xl",
-				surfaceStyle: z(k),
-				className: k.mode,
-				footer: /* @__PURE__ */ D("div", {
-					className: V.exportFooter,
-					children: [/* @__PURE__ */ D(u, {
+				surfaceStyle: H(A),
+				className: A.mode,
+				footer: /* @__PURE__ */ k("div", {
+					className: U.exportFooter,
+					children: [/* @__PURE__ */ k(s, {
 						type: "button",
 						tone: "neutral",
-						buttonStyle: "ghost",
-						disabled: at === 0,
-						onClick: yt,
-						children: [/* @__PURE__ */ E(Te, {}), C.reset]
-					}), /* @__PURE__ */ E(fe, {
-						render: /* @__PURE__ */ E(u, {
+						appearance: "ghost",
+						disabled: nt === 0,
+						onClick: pt,
+						children: [/* @__PURE__ */ O(Te, {}), w.reset]
+					}), /* @__PURE__ */ O(c, {
+						render: /* @__PURE__ */ O(s, {
 							type: "button",
 							tone: "neutral",
-							buttonStyle: "outline"
+							appearance: "outline"
 						}),
-						children: C.close
+						children: w.close
 					})]
 				}),
-				children: /* @__PURE__ */ D(p, {
-					gap: "xl",
-					children: [
-						/* @__PURE__ */ E(lt, {
-							title: C.cssOutputLabel,
-							description: C.cssOutputDescription,
-							code: it,
-							copyLabel: C.copy,
-							downloadLabel: Ye ? C.exportPending : C.downloadCss,
-							downloading: Ye,
-							onCopy: () => void gt(it),
-							onDownload: () => void _t()
-						}),
-						/* @__PURE__ */ E(lt, {
-							title: C.providerOutputLabel,
-							description: C.providerOutputDescription,
-							code: Y?.providerConfigText ?? "",
-							copyLabel: C.copyProvider,
-							downloadLabel: C.downloadProvider,
-							onCopy: () => void gt(Y?.providerConfigText ?? ""),
-							onDownload: vt
-						}),
-						!!bt && /* @__PURE__ */ E(n, {
-							tag: "div",
-							size: "xs",
-							type: X ? "error" : "secondary",
-							role: "status",
-							"aria-live": "polite",
-							children: bt
-						})
-					]
-				})
+				children: /* @__PURE__ */ k(u, { children: [
+					/* @__PURE__ */ O(_t, {
+						title: w.cssOutputLabel,
+						description: w.cssOutputDescription,
+						code: tt,
+						copyLabel: w.copy,
+						downloadLabel: Ye ? w.exportPending : w.downloadCss,
+						downloading: Ye,
+						onCopy: () => void $(tt),
+						onDownload: () => void ct()
+					}),
+					/* @__PURE__ */ O(_t, {
+						title: w.providerOutputLabel,
+						description: w.providerOutputDescription,
+						code: q?.providerConfigText ?? "",
+						copyLabel: w.copyProvider,
+						downloadLabel: w.downloadProvider,
+						onCopy: () => void $(q?.providerConfigText ?? ""),
+						onDownload: ft
+					}),
+					!!bt && /* @__PURE__ */ O(n, {
+						tag: "div",
+						size: "xs",
+						type: J ? "error" : "secondary",
+						role: "status",
+						"aria-live": "polite",
+						children: bt
+					})
+				] })
 			})
 		]
 	});
-	return l === "self" ? /* @__PURE__ */ E(Ue, {
-		...je,
-		ref: q,
-		theme: m ? k : j({ mode: k.mode }),
-		className: e("theme-tweaker--component", V.root, V.rootScoped, ke),
+	return m === "self" ? /* @__PURE__ */ O(Ge, {
+		...ke,
+		ref: G,
+		theme: h ? A : j({ mode: A.mode }),
+		className: r("theme-tweaker--component", U.root, U.rootScoped, Oe),
 		children: St
-	}) : /* @__PURE__ */ E("div", {
-		...je,
-		ref: q,
-		className: e("theme-tweaker--component", V.root, ke),
+	}) : /* @__PURE__ */ O("div", {
+		...ke,
+		ref: G,
+		className: r("theme-tweaker--component", U.root, Oe),
 		children: St
 	});
 });
 //#endregion
-export { Ue as ThemeScope, Z as ThemeTweaker, Ge as UIConfigSettings, Re as countThemeOverrides, ze as createScopedThemeSelectors, I as createSerializableUIConfig, j as createTheme, Be as createThemeExportArtifact, Ie as defaultThemeSelectors, $e as defaultThemeTweakerFields, et as defaultThemeTweakerStrings, B as defaultUIConfigSettingsStrings, ve as deriveThemeElevation, ge as deriveThemePalette, _e as deriveThemeTypeScale, Ve as downloadTextFile, He as downloadTheme, R as getActiveThemeOverrides, Le as isThemeVariableName, F as serializeTheme, L as serializeUIConfig, z as themeToStyle, tt as useAppliedTheme };
+export { Ge as ThemeScope, bt as ThemeTweaker, Je as UIConfigSettings, Be as countThemeOverrides, Ve as createScopedThemeSelectors, B as createSerializableUIConfig, j as createTheme, He as createThemeExportArtifact, A as defaultThemeSelectors, ot as defaultThemeTweakerFields, st as defaultThemeTweakerStrings, Ke as defaultUIConfigSettingsStrings, ve as deriveThemeElevation, ye as deriveThemePalette, _e as deriveThemeTypeScale, Ue as downloadTextFile, We as downloadTheme, ze as getActiveThemeOverrides, N as isThemeVariableName, z as serializeTheme, V as serializeUIConfig, M as themeFromConfig, H as themeToStyle, lt as useAppliedTheme };