da-style 0.1.1 → 0.1.2

package/dist/da-style.mjs

@@ -0,0 +1,704 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, normalizeStyle as l, openBlock as u, ref as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, useModel as g, withModifiers as _ } from "vue";
+//#region src/shared/utils.ts
+var v = (e) => typeof e == "string", y = (e) => typeof e == "number", b = (e) => typeof e == "boolean", x = (e) => e === void 0, ee = (e) => typeof e == "function", te = (e, t, n) => Math.min(Math.max(e, t), n), S = (...e) => {
+	let t = [];
+	for (let n of e) if (n) {
+		if (v(n)) t.push(n);
+		else if (typeof n == "object") for (let [e, r] of Object.entries(n)) r && t.push(e);
+	}
+	return t.join(" ");
+}, ne = [
+	"disabled",
+	"type",
+	"aria-busy"
+], re = {
+	key: 0,
+	class: "d-btn__spinner"
+}, ie = { class: "d-btn__content" }, ae = /*@__PURE__*/ o({
+	__name: "DButton",
+	props: {
+		status: { default: "primary" },
+		size: { default: "medium" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		glow: {
+			type: Boolean,
+			default: !1
+		},
+		ghost: {
+			type: Boolean,
+			default: !1
+		},
+		block: {
+			type: Boolean,
+			default: !1
+		},
+		round: {
+			type: Boolean,
+			default: !1
+		},
+		circle: {
+			type: Boolean,
+			default: !1
+		},
+		nativeType: { default: "button" }
+	},
+	emits: ["click"],
+	setup(e, { emit: a }) {
+		let o = e, s = a, l = t(() => S("d-btn", `d-btn--${o.status}`, `d-btn--${o.size}`, {
+			"d-btn--disabled": o.disabled,
+			"d-btn--loading": o.loading,
+			"d-btn--glow": o.glow,
+			"d-btn--ghost": o.ghost,
+			"d-btn--block": o.block,
+			"d-btn--round": o.round,
+			"d-btn--circle": o.circle
+		}));
+		function d(e) {
+			!o.disabled && !o.loading && s("click", e);
+		}
+		return (t, a) => (u(), r("button", {
+			class: c(l.value),
+			disabled: e.disabled || e.loading,
+			type: e.nativeType,
+			"aria-busy": e.loading || void 0,
+			onClick: d
+		}, [
+			e.loading ? (u(), r("span", re)) : n("", !0),
+			i("span", ie, [p(t.$slots, "default", {}, void 0, !0)]),
+			a[0] ||= i("span", {
+				class: "d-btn__scanline",
+				"aria-hidden": "true"
+			}, null, -1)
+		], 10, ne));
+	}
+}), C = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, w = /*#__PURE__*/ C(ae, [["__scopeId", "data-v-fe9a4e44"]]);
+//#endregion
+//#region src/components/Button/index.ts
+w.install = (e) => {
+	e.component(w.name ?? "DButton", w);
+};
+//#endregion
+//#region src/shared/props.ts
+var oe = (e = "medium") => ({
+	type: String,
+	default: e,
+	validator: (e) => [
+		"small",
+		"medium",
+		"large"
+	].includes(e)
+}), se = (e = "primary") => ({
+	type: String,
+	default: e,
+	validator: (e) => [
+		"primary",
+		"success",
+		"warning",
+		"danger",
+		"info"
+	].includes(e)
+}), ce = () => ({
+	type: Boolean,
+	default: !1
+}), le = () => ({
+	type: Boolean,
+	default: !1
+}), ue = () => ({
+	type: Boolean,
+	default: !1
+}), de = {
+	key: 0,
+	class: "d-input__affix d-input__affix--prefix"
+}, fe = [
+	"type",
+	"value",
+	"disabled",
+	"readonly",
+	"placeholder"
+], pe = {
+	key: 2,
+	class: "d-input__affix d-input__affix--suffix"
+}, me = /*#__PURE__*/ C(/* @__PURE__ */ o({
+	__name: "DInput",
+	props: /*@__PURE__*/ s({
+		modelValue: {},
+		type: { default: "text" },
+		size: { default: "medium" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		placeholder: { default: "" },
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		glow: {
+			type: Boolean,
+			default: !1
+		},
+		prefix: {},
+		suffix: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let o = e, s = d(null), l = d(!1), f = g(e, "modelValue"), h = t(() => S("d-input", `d-input--${o.size}`, {
+			"d-input--disabled": o.disabled,
+			"d-input--readonly": o.readonly,
+			"d-input--focused": l.value,
+			"d-input--glow": o.glow && l.value
+		}));
+		function _(e) {
+			o.disabled || (f.value = e.target.value);
+		}
+		function v() {
+			f.value = "", s.value?.focus();
+		}
+		function y() {
+			l.value = !0;
+		}
+		function b() {
+			l.value = !1;
+		}
+		function x() {
+			s.value?.focus();
+		}
+		return (t, o) => (u(), r("div", {
+			class: c(h.value),
+			onClick: x
+		}, [
+			e.prefix !== void 0 || t.$slots.prefix ? (u(), r("span", de, [p(t.$slots, "prefix", {}, () => [a(m(e.prefix), 1)], !0)])) : n("", !0),
+			i("input", {
+				ref_key: "inputRef",
+				ref: s,
+				type: e.type,
+				value: f.value,
+				disabled: e.disabled,
+				readonly: e.readonly,
+				placeholder: e.placeholder,
+				class: "d-input__native",
+				onInput: _,
+				onFocus: y,
+				onBlur: b
+			}, null, 40, fe),
+			e.clearable && f.value ? (u(), r("button", {
+				key: 1,
+				class: "d-input__clear",
+				onClick: v,
+				type: "button",
+				tabindex: "-1",
+				"aria-label": "clear"
+			}, "×")) : n("", !0),
+			e.suffix !== void 0 || t.$slots.suffix ? (u(), r("span", pe, [p(t.$slots, "suffix", {}, () => [a(m(e.suffix), 1)], !0)])) : n("", !0),
+			o[0] ||= i("span", {
+				class: "d-input__scanline",
+				"aria-hidden": "true"
+			}, null, -1)
+		], 2));
+	}
+}), [["__scopeId", "data-v-21d07f13"]]), he = {
+	primary: "--d-cyan",
+	success: "--d-green",
+	warning: "--d-yellow",
+	danger: "--d-red",
+	info: "--d-purple"
+}, ge = {
+	primary: "--d-glow-cyan",
+	success: "--d-glow-green",
+	warning: "--d-glow-yellow",
+	danger: "--d-glow-red",
+	info: "--d-glow-purple"
+}, _e = /*#__PURE__*/ C(/* @__PURE__ */ o({
+	__name: "DTag",
+	props: {
+		status: { default: "primary" },
+		size: { default: "medium" },
+		closable: {
+			type: Boolean,
+			default: !1
+		},
+		ghost: {
+			type: Boolean,
+			default: !1
+		},
+		glow: {
+			type: Boolean,
+			default: !1
+		},
+		round: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["close"],
+	setup(e, { emit: i }) {
+		let a = e, o = i, s = t(() => S("d-tag", `d-tag--${a.status}`, `d-tag--${a.size}`, {
+			"d-tag--ghost": a.ghost,
+			"d-tag--glow": a.glow,
+			"d-tag--round": a.round,
+			"d-tag--closable": a.closable
+		})), d = t(() => {
+			let e = { "--d-tag-accent": `var(${he[a.status]})` };
+			return a.glow && (e["--d-tag-glow"] = `var(${ge[a.status]})`), e;
+		});
+		function f() {
+			o("close");
+		}
+		return (t, i) => (u(), r("span", {
+			class: c(s.value),
+			style: l(d.value)
+		}, [p(t.$slots, "default", {}, void 0, !0), e.closable ? (u(), r("button", {
+			key: 0,
+			class: "d-tag__close",
+			"aria-label": "close",
+			onClick: _(f, ["stop"]),
+			onMousedown: i[0] ||= _(() => {}, ["prevent"])
+		}, " × ", 32)) : n("", !0)], 6));
+	}
+}), [["__scopeId", "data-v-e3cafe54"]]), ve = ["aria-label"], ye = {
+	key: 0,
+	class: "d-loading__spinner"
+}, be = {
+	key: 1,
+	class: "d-loading__dots"
+}, xe = {
+	key: 3,
+	class: "d-loading__text"
+}, Se = /*#__PURE__*/ C(/* @__PURE__ */ o({
+	__name: "DLoading",
+	props: {
+		type: { default: "spinner" },
+		size: { default: "medium" },
+		color: { default: void 0 },
+		text: { default: void 0 },
+		fullscreen: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(a) {
+		let o = a, s = {
+			small: 16,
+			medium: 24,
+			large: 32
+		}, d = {
+			small: 2,
+			medium: 3,
+			large: 4
+		}, p = {
+			small: 6,
+			medium: 8,
+			large: 10
+		}, h = [
+			"var(--d-cyan)",
+			"var(--d-magenta)",
+			"var(--d-purple)"
+		], g = t(() => s[o.size] ?? 24), _ = t(() => d[o.size] ?? 3), v = t(() => p[o.size] ?? 8), y = t(() => o.color || "var(--d-cyan)"), b = t(() => ({
+			"d-loading": !0,
+			[`d-loading--${o.type}`]: !0,
+			"d-loading--fullscreen": o.fullscreen,
+			"d-loading--has-color": !!o.color
+		})), x = t(() => {
+			let e = {};
+			return o.color && (e["--d-loading-custom-color"] = o.color), e;
+		}), ee = t(() => ({
+			width: `${g.value}px`,
+			height: `${g.value}px`,
+			borderWidth: `${_.value}px`
+		})), te = t(() => {
+			let e = `${g.value * 2.5}px`;
+			return {
+				width: e,
+				height: e
+			};
+		});
+		function S(e) {
+			let t = o.color ? `var(--d-loading-custom-color, ${y.value})` : h[e - 1];
+			return {
+				width: `${v.value}px`,
+				height: `${v.value}px`,
+				backgroundColor: t,
+				boxShadow: `0 0 4px ${t}, 0 0 10px ${t}, 0 0 20px ${t}`
+			};
+		}
+		function ne(e) {
+			let t = (e - 1) * .5;
+			return {
+				width: `${g.value}px`,
+				height: `${g.value}px`,
+				borderColor: y.value,
+				boxShadow: `0 0 6px ${y.value}, 0 0 12px ${y.value}`,
+				animationDelay: `${t}s`
+			};
+		}
+		return (t, a) => (u(), r("div", {
+			class: c(b.value),
+			style: l(x.value),
+			role: "status",
+			"aria-label": o.text || "Loading"
+		}, [o.type === "spinner" ? (u(), r("div", ye, [i("div", {
+			class: "d-loading__spinner-ring",
+			style: l(ee.value)
+		}, null, 4)])) : o.type === "dots" ? (u(), r("div", be, [(u(), r(e, null, f(3, (e) => i("div", {
+			key: e,
+			class: "d-loading__dot",
+			style: l(S(e))
+		}, null, 4)), 64))])) : (u(), r("div", {
+			key: 2,
+			class: "d-loading__pulse",
+			style: l(te.value)
+		}, [(u(), r(e, null, f(3, (e) => i("div", {
+			key: e,
+			class: "d-loading__pulse-ring",
+			style: l(ne(e))
+		}, null, 4)), 64))], 4)), o.text ? (u(), r("p", xe, m(o.text), 1)) : n("", !0)], 14, ve));
+	}
+}), [["__scopeId", "data-v-57cfd478"]]), Ce = {
+	close: "M6 18 18 6M6 6l12 12",
+	check: "M5 13l4 4L19 7",
+	"chevron-left": "M15 19l-7-7 7-7",
+	"chevron-right": "M9 5l7 7-7 7",
+	"chevron-down": "M19 9l-7 7-7-7",
+	"chevron-up": "M5 15l7-7 7 7",
+	loading: "M21 12a9 9 0 1 1-6.219-8.56",
+	search: "M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z",
+	info: "M11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0zm-9-3.75h.008v.008H12V8.25z",
+	warning: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z",
+	error: "m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z",
+	success: "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z",
+	eye: "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z",
+	"eye-off": "M3.98 3.98A10.96 10.96 0 0 1 12 5c4.477 0 8.268 2.943 9.542 7a10.94 10.94 0 0 1-2.068 4.002m-1.334 1.334A10.96 10.96 0 0 1 12 19c-4.477 0-8.268-2.943-9.542-7a10.95 10.95 0 0 1 2.068-4.002M9.879 9.879a3 3 0 0 0 4.242 4.242m4.242-8.242L4.93 19.07"
+}, we = [
+	"width",
+	"height",
+	"stroke",
+	"aria-label"
+], Te = ["d"], T = /*#__PURE__*/ C(/* @__PURE__ */ o({
+	__name: "DIcon",
+	props: {
+		name: {},
+		size: { default: "medium" },
+		color: { default: "" },
+		spin: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let n = e, a = {
+			small: 16,
+			medium: 24,
+			large: 32
+		}, o = t(() => typeof n.size == "number" ? n.size : a[n.size] ?? 24);
+		return (t, n) => (u(), r("svg", {
+			class: c(["d-icon", { "d-icon--spin": e.spin }]),
+			width: o.value,
+			height: o.value,
+			stroke: e.color || "currentColor",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			"stroke-width": "2",
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round",
+			xmlns: "http://www.w3.org/2000/svg",
+			"aria-label": e.name,
+			role: "img"
+		}, [i("path", { d: h(Ce)[e.name] }, null, 8, Te)], 10, we));
+	}
+}), [["__scopeId", "data-v-932d5321"]]);
+//#endregion
+//#region src/components/Icon/index.ts
+T.install = (e) => {
+	e.component("DIcon", T);
+};
+//#endregion
+//#region src/token/colors.ts
+var Ee = "#0a0a0f", De = "#12121a", Oe = "#1a1a2e", ke = "rgba(10,10,15,0.9)", Ae = "#e0e0ff", je = "#8888aa", Me = "#444466", Ne = "#0a0a0f", Pe = "#00f0ff", Fe = "#ff00c8", Ie = "#7000ff", Le = "#0066ff", Re = "#ffea00", ze = "#00ff41", Be = "#ff6600", Ve = "#ff003c", He = "var(--d-cyan)", Ue = "var(--d-green)", We = "var(--d-yellow)", Ge = "var(--d-red)", Ke = "var(--d-purple)", qe = {
+	bg: {
+		primary: "--d-bg-primary",
+		secondary: "--d-bg-secondary",
+		elevated: "--d-bg-elevated",
+		overlay: "--d-bg-overlay"
+	},
+	text: {
+		primary: "--d-text-primary",
+		secondary: "--d-text-secondary",
+		disabled: "--d-text-disabled",
+		inverse: "--d-text-inverse"
+	},
+	accent: {
+		cyan: "--d-cyan",
+		magenta: "--d-magenta",
+		purple: "--d-purple",
+		blue: "--d-blue",
+		yellow: "--d-yellow",
+		green: "--d-green",
+		orange: "--d-orange",
+		red: "--d-red"
+	},
+	semantic: {
+		primary: "--d-color-primary",
+		success: "--d-color-success",
+		warning: "--d-color-warning",
+		danger: "--d-color-danger",
+		info: "--d-color-info"
+	}
+}, E = {
+	bgPrimary: Ee,
+	bgSecondary: De,
+	bgElevated: Oe,
+	bgOverlay: ke,
+	textPrimary: Ae,
+	textSecondary: je,
+	textDisabled: Me,
+	textInverse: Ne,
+	cyan: Pe,
+	magenta: Fe,
+	purple: Ie,
+	blue: Le,
+	yellow: Re,
+	green: ze,
+	orange: Be,
+	red: Ve,
+	colorPrimary: He,
+	colorSuccess: Ue,
+	colorWarning: We,
+	colorDanger: Ge,
+	colorInfo: Ke
+}, Je = "4px", Ye = "8px", D = "12px", O = "16px", k = "20px", A = "24px", j = "32px", M = "40px", N = "48px", P = "640px", F = "768px", I = "1024px", L = "1280px", Xe = {
+	space: {
+		1: "--d-spacing-1",
+		2: "--d-spacing-2",
+		3: "--d-spacing-3",
+		4: "--d-spacing-4",
+		5: "--d-spacing-5",
+		6: "--d-spacing-6",
+		8: "--d-spacing-8",
+		10: "--d-spacing-10",
+		12: "--d-spacing-12"
+	},
+	container: {
+		sm: "--d-container-sm",
+		md: "--d-container-md",
+		lg: "--d-container-lg",
+		xl: "--d-container-xl"
+	}
+}, Ze = {
+	space1: "4px",
+	space2: "8px",
+	space3: D,
+	space4: O,
+	space5: k,
+	space6: A,
+	space8: j,
+	space10: M,
+	space12: N,
+	containerSm: P,
+	containerMd: F,
+	containerLg: I,
+	containerXl: L
+}, R = "'Courier New', 'Consolas', 'Source Code Pro', monospace", Qe = "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", z = "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", B = "'Courier New', Consolas, monospace", V = "12px", H = "14px", U = "16px", W = "18px", G = "20px", K = "24px", q = "30px", $e = "400", et = "500", tt = "600", nt = "700", rt = "1.2", it = "1.5", J = "1.75", Y = "-0.02em", at = "0", X = "0.08em", ot = {
+	font: {
+		mono: "--d-font-mono",
+		sans: "--d-font-sans",
+		heading: "--d-font-heading",
+		body: "--d-font-body"
+	},
+	size: {
+		xs: "--d-text-xs",
+		sm: "--d-text-sm",
+		base: "--d-text-base",
+		lg: "--d-text-lg",
+		xl: "--d-text-xl",
+		"2xl": "--d-text-2xl",
+		"3xl": "--d-text-3xl"
+	},
+	weight: {
+		regular: "--d-weight-regular",
+		medium: "--d-weight-medium",
+		semibold: "--d-weight-semibold",
+		bold: "--d-weight-bold"
+	},
+	leading: {
+		tight: "--d-leading-tight",
+		normal: "--d-leading-normal",
+		relaxed: "--d-leading-relaxed"
+	},
+	tracking: {
+		tight: "--d-tracking-tight",
+		normal: "--d-tracking-normal",
+		wide: "--d-tracking-wide"
+	}
+}, st = {
+	fontMono: R,
+	fontSans: Qe,
+	fontHeading: z,
+	fontBody: B,
+	textXs: V,
+	textSm: H,
+	textBase: U,
+	textLg: W,
+	textXl: G,
+	text2xl: K,
+	text3xl: q,
+	weightRegular: "400",
+	weightMedium: "500",
+	weightSemibold: "600",
+	weightBold: "700",
+	leadingTight: "1.2",
+	leadingNormal: "1.5",
+	leadingRelaxed: J,
+	trackingTight: Y,
+	trackingNormal: "0",
+	trackingWide: X
+}, ct = "0", lt = "2px", ut = "4px", dt = "8px", Z = "9999px", ft = "1px", pt = "2px", mt = "4px", ht = {
+	radius: {
+		none: "--d-radius-none",
+		sm: "--d-radius-sm",
+		md: "--d-radius-md",
+		lg: "--d-radius-lg",
+		full: "--d-radius-full"
+	},
+	width: {
+		default: "--d-border-width",
+		md: "--d-border-width-md",
+		lg: "--d-border-width-lg"
+	}
+}, gt = {
+	radiusNone: "0",
+	radiusSm: "2px",
+	radiusMd: "4px",
+	radiusLg: "8px",
+	radiusFull: Z,
+	borderWidth: "1px",
+	borderWidthMd: "2px",
+	borderWidthLg: "4px"
+}, Q = "0 1px 2px rgba(0,0,0,0.5)", $ = "0 4px 8px rgba(0,0,0,0.6)", _t = "0 8px 24px rgba(0,0,0,0.7)", vt = "0 0 4px rgba(0,240,255,0.6), 0 0 12px rgba(0,240,255,0.4), 0 0 24px rgba(0,240,255,0.2), 0 0 48px rgba(0,240,255,0.1)", yt = "0 0 4px rgba(255,0,200,0.6), 0 0 12px rgba(255,0,200,0.4), 0 0 24px rgba(255,0,200,0.2), 0 0 48px rgba(255,0,200,0.1)", bt = "0 0 4px rgba(112,0,255,0.6), 0 0 12px rgba(112,0,255,0.4), 0 0 24px rgba(112,0,255,0.2)", xt = "0 0 4px rgba(0,255,65,0.6), 0 0 12px rgba(0,255,65,0.4), 0 0 24px rgba(0,255,65,0.2)", St = "0 0 4px rgba(255,234,0,0.6), 0 0 12px rgba(255,234,0,0.4), 0 0 24px rgba(255,234,0,0.2)", Ct = "0 0 4px rgba(255,0,60,0.6), 0 0 12px rgba(255,0,60,0.4), 0 0 24px rgba(255,0,60,0.2)", wt = {
+	shadow: {
+		sm: "--d-shadow-sm",
+		md: "--d-shadow-md",
+		lg: "--d-shadow-lg"
+	},
+	glow: {
+		cyan: "--d-glow-cyan",
+		magenta: "--d-glow-magenta",
+		purple: "--d-glow-purple",
+		green: "--d-glow-green",
+		yellow: "--d-glow-yellow",
+		red: "--d-glow-red"
+	}
+}, Tt = {
+	shadowSm: Q,
+	shadowMd: $,
+	shadowLg: _t,
+	shadowGlowCyan: vt,
+	shadowGlowMagenta: yt,
+	shadowGlowPurple: bt,
+	shadowGlowGreen: xt,
+	shadowGlowYellow: St,
+	shadowGlowRed: Ct
+};
+//#endregion
+//#region src/token/inject.ts
+function Et() {
+	return {
+		"bg-primary": E.bgPrimary,
+		"bg-secondary": E.bgSecondary,
+		"bg-elevated": E.bgElevated,
+		"bg-overlay": E.bgOverlay,
+		"text-primary": E.textPrimary,
+		"text-secondary": E.textSecondary,
+		"text-disabled": E.textDisabled,
+		"text-inverse": E.textInverse,
+		cyan: E.cyan,
+		magenta: E.magenta,
+		yellow: E.yellow,
+		green: E.green,
+		orange: E.orange,
+		red: E.red,
+		"color-primary": E.colorPrimary.replace("var(--d-cyan)", E.cyan),
+		"color-success": E.colorSuccess.replace("var(--d-green)", E.green),
+		"color-warning": E.colorWarning.replace("var(--d-yellow)", E.yellow),
+		"color-danger": E.colorDanger.replace("var(--d-red)", E.red),
+		"color-info": E.colorInfo.replace("var(--d-cyan)", E.cyan),
+		"spacing-1": "4px",
+		"spacing-2": "8px",
+		"spacing-3": D,
+		"spacing-4": O,
+		"spacing-5": k,
+		"spacing-6": A,
+		"spacing-8": j,
+		"spacing-10": M,
+		"spacing-12": N,
+		"container-sm": P,
+		"container-md": F,
+		"container-lg": I,
+		"container-xl": L,
+		"font-mono": R,
+		"font-sans": Qe,
+		"font-heading": z,
+		"font-body": B,
+		"text-xs": V,
+		"text-sm": H,
+		"text-base": U,
+		"text-lg": W,
+		"text-xl": G,
+		"text-2xl": K,
+		"text-3xl": q,
+		"weight-regular": "400",
+		"weight-medium": "500",
+		"weight-semibold": "600",
+		"weight-bold": "700",
+		"leading-tight": "1.2",
+		"leading-normal": "1.5",
+		"leading-relaxed": J,
+		"tracking-tight": Y,
+		"tracking-normal": "0",
+		"tracking-wide": X,
+		"radius-none": "0",
+		"radius-sm": "2px",
+		"radius-md": "4px",
+		"radius-lg": "8px",
+		"radius-full": Z,
+		"border-width": "1px",
+		"border-width-md": "2px",
+		"border-width-lg": "4px",
+		"shadow-sm": Q,
+		"shadow-md": $,
+		"shadow-lg": _t,
+		"shadow-glow-cyan": vt,
+		"shadow-glow-magenta": yt,
+		"shadow-glow-green": xt,
+		"shadow-glow-yellow": St
+	};
+}
+var Dt = !1;
+function Ot() {
+	if (Dt) return;
+	Dt = !0;
+	let e = Et(), t = Object.entries(e).map(([e, t]) => `  --d-${e}: ${t};`).join("\n"), n = document.createElement("style");
+	n.textContent = `:root {\n${t}\n}`, document.head.appendChild(n);
+}
+function kt() {
+	Dt = !1;
+}
+//#endregion
+export { w as DButton, T as DIcon, me as DInput, Se as DLoading, _e as DTag, Oe as bgElevated, ke as bgOverlay, Ee as bgPrimary, De as bgSecondary, Le as blue, ht as borderCssVars, ft as borderWidth, mt as borderWidthLg, pt as borderWidthMd, gt as borders, te as clamp, S as classNames, qe as colorCssVars, Ge as colorDanger, Ke as colorInfo, He as colorPrimary, Ue as colorSuccess, We as colorWarning, E as colors, I as containerLg, F as containerMd, P as containerSm, L as containerXl, Pe as cyan, B as fontBody, z as fontHeading, R as fontMono, Qe as fontSans, ze as green, Ot as injectTokens, b as isBoolean, ee as isFunction, y as isNumber, v as isString, x as isUndefined, it as leadingNormal, J as leadingRelaxed, rt as leadingTight, Fe as magenta, Be as orange, Ie as purple, Z as radiusFull, dt as radiusLg, ut as radiusMd, ct as radiusNone, lt as radiusSm, Ve as red, kt as resetInjection, wt as shadowCssVars, vt as shadowGlowCyan, xt as shadowGlowGreen, yt as shadowGlowMagenta, bt as shadowGlowPurple, Ct as shadowGlowRed, St as shadowGlowYellow, _t as shadowLg, $ as shadowMd, Q as shadowSm, Tt as shadows, Je as space1, M as space10, N as space12, Ye as space2, D as space3, O as space4, k as space5, A as space6, j as space8, Ze as spacing, Xe as spacingCssVars, K as text2xl, q as text3xl, U as textBase, Me as textDisabled, Ne as textInverse, W as textLg, Ae as textPrimary, je as textSecondary, H as textSm, G as textXl, V as textXs, at as trackingNormal, Y as trackingTight, X as trackingWide, st as typography, ot as typographyCssVars, ce as useDisabledProp, ue as useGlowProp, le as useLoadingProp, oe as useSizeProp, se as useStatusProp, nt as weightBold, et as weightMedium, $e as weightRegular, tt as weightSemibold, Re as yellow };