@epilot/spark-ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/theme-B3WtiByA.js

@@ -0,0 +1,574 @@
+"use client";
+import { cn } from "./utils/cn.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import * as RadixColors from "@radix-ui/colors";
+import Color from "colorjs.io";
+import BezierEasing from "bezier-easing";
+//#region src/lib/generate-radix-colors.tsx
+/**
+* Vendored from Radix UI's website — components/generate-radix-colors.tsx
+* https://github.com/radix-ui/website
+*
+* MIT License — Copyright (c) 2024 WorkOS
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all
+* copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND. (Full text:
+* https://github.com/radix-ui/website/blob/main/LICENSE)
+*
+* Kept VERBATIM so it can be re-synced upstream (this file is excluded from the
+* formatter in vite.config.ts). Strict type-checking is skipped (upstream targets
+* a looser tsconfig with unchecked array indexing over fixed 12-step scales).
+*/
+const arrayOf12 = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9,
+	10,
+	11
+];
+const grayScaleNames = [
+	"gray",
+	"mauve",
+	"slate",
+	"sage",
+	"olive",
+	"sand"
+];
+const scaleNames = [
+	...grayScaleNames,
+	"tomato",
+	"red",
+	"ruby",
+	"crimson",
+	"pink",
+	"plum",
+	"purple",
+	"violet",
+	"iris",
+	"indigo",
+	"blue",
+	"cyan",
+	"teal",
+	"jade",
+	"green",
+	"grass",
+	"brown",
+	"orange",
+	"sky",
+	"mint",
+	"lime",
+	"yellow",
+	"amber"
+];
+const lightColors = Object.fromEntries(scaleNames.map((scaleName) => [scaleName, Object.values(RadixColors[`${scaleName}P3`]).map((str) => new Color(str).to("oklch"))]));
+const darkColors = Object.fromEntries(scaleNames.map((scaleName) => [scaleName, Object.values(RadixColors[`${scaleName}DarkP3`]).map((str) => new Color(str).to("oklch"))]));
+const lightGrayColors = Object.fromEntries(grayScaleNames.map((scaleName) => [scaleName, Object.values(RadixColors[`${scaleName}P3`]).map((str) => new Color(str).to("oklch"))]));
+const darkGrayColors = Object.fromEntries(grayScaleNames.map((scaleName) => [scaleName, Object.values(RadixColors[`${scaleName}DarkP3`]).map((str) => new Color(str).to("oklch"))]));
+const generateRadixColors = ({ appearance, ...args }) => {
+	const allScales = appearance === "light" ? lightColors : darkColors;
+	const grayScales = appearance === "light" ? lightGrayColors : darkGrayColors;
+	const backgroundColor = new Color(args.background).to("oklch");
+	const grayScaleColors = getScaleFromColor(new Color(args.gray).to("oklch"), grayScales, backgroundColor);
+	const accentBaseColor = new Color(args.accent).to("oklch");
+	let accentScaleColors = getScaleFromColor(accentBaseColor, allScales, backgroundColor);
+	const backgroundHex = backgroundColor.to("srgb").toString({ format: "hex" });
+	const accentBaseHex = accentBaseColor.to("srgb").toString({ format: "hex" });
+	if (accentBaseHex === "#000" || accentBaseHex === "#fff") accentScaleColors = grayScaleColors.map((color) => color.clone());
+	const [accent9Color, accentContrastColor] = getStep9Colors(accentScaleColors, accentBaseColor);
+	accentScaleColors[8] = accent9Color;
+	accentScaleColors[9] = getButtonHoverColor(accent9Color, [accentScaleColors]);
+	accentScaleColors[10].coords[1] = Math.min(Math.max(accentScaleColors[8].coords[1], accentScaleColors[7].coords[1]), accentScaleColors[10].coords[1]);
+	accentScaleColors[11].coords[1] = Math.min(Math.max(accentScaleColors[8].coords[1], accentScaleColors[7].coords[1]), accentScaleColors[11].coords[1]);
+	const accentScaleHex = accentScaleColors.map((color) => color.to("srgb").toString({ format: "hex" }));
+	const accentScaleWideGamut = accentScaleColors.map(toOklchString);
+	const accentScaleAlphaHex = accentScaleHex.map((color) => getAlphaColorSrgb(color, backgroundHex));
+	const accentScaleAlphaWideGamutString = accentScaleHex.map((color) => getAlphaColorP3(color, backgroundHex));
+	const accentContrastColorHex = accentContrastColor.to("srgb").toString({ format: "hex" });
+	const grayScaleHex = grayScaleColors.map((color) => color.to("srgb").toString({ format: "hex" }));
+	const grayScaleWideGamut = grayScaleColors.map(toOklchString);
+	const grayScaleAlphaHex = grayScaleHex.map((color) => getAlphaColorSrgb(color, backgroundHex));
+	const grayScaleAlphaWideGamutString = grayScaleHex.map((color) => getAlphaColorP3(color, backgroundHex));
+	const accentSurfaceHex = appearance === "light" ? getAlphaColorSrgb(accentScaleHex[1], backgroundHex, .8) : getAlphaColorSrgb(accentScaleHex[1], backgroundHex, .5);
+	const accentSurfaceWideGamutString = appearance === "light" ? getAlphaColorP3(accentScaleWideGamut[1], backgroundHex, .8) : getAlphaColorP3(accentScaleWideGamut[1], backgroundHex, .5);
+	return {
+		accentScale: accentScaleHex,
+		accentScaleAlpha: accentScaleAlphaHex,
+		accentScaleWideGamut,
+		accentScaleAlphaWideGamut: accentScaleAlphaWideGamutString,
+		accentContrast: accentContrastColorHex,
+		grayScale: grayScaleHex,
+		grayScaleAlpha: grayScaleAlphaHex,
+		grayScaleWideGamut,
+		grayScaleAlphaWideGamut: grayScaleAlphaWideGamutString,
+		graySurface: appearance === "light" ? "#ffffffcc" : "rgba(0, 0, 0, 0.05)",
+		graySurfaceWideGamut: appearance === "light" ? "color(display-p3 1 1 1 / 80%)" : "color(display-p3 0 0 0 / 5%)",
+		accentSurface: accentSurfaceHex,
+		accentSurfaceWideGamut: accentSurfaceWideGamutString,
+		background: backgroundHex
+	};
+};
+function getStep9Colors(scale, accentBaseColor) {
+	const referenceBackgroundColor = scale[0];
+	if (accentBaseColor.deltaEOK(referenceBackgroundColor) * 100 < 25) return [scale[8], getTextColor(scale[8])];
+	return [accentBaseColor, getTextColor(accentBaseColor)];
+}
+function getButtonHoverColor(source, scales) {
+	const [L, C, H] = source.coords;
+	const buttonHoverColor = new Color("oklch", [
+		L > .4 ? L - .03 / (L + .1) : L + .03 / (L + .1),
+		L > .4 && !isNaN(H) ? C * .93 + 0 : C,
+		H
+	]);
+	let closestColor = buttonHoverColor;
+	let minDistance = Infinity;
+	scales.forEach((scale) => {
+		for (const color of scale) {
+			const distance = buttonHoverColor.deltaEOK(color);
+			if (distance < minDistance) {
+				minDistance = distance;
+				closestColor = color;
+			}
+		}
+	});
+	buttonHoverColor.coords[1] = closestColor.coords[1];
+	buttonHoverColor.coords[2] = closestColor.coords[2];
+	return buttonHoverColor;
+}
+function getScaleFromColor(source, scales, backgroundColor) {
+	let allColors = [];
+	Object.entries(scales).forEach(([name, scale]) => {
+		for (const color of scale) {
+			const distance = source.deltaEOK(color);
+			allColors.push({
+				scale: name,
+				distance,
+				color
+			});
+		}
+	});
+	allColors.sort((a, b) => a.distance - b.distance);
+	let closestColors = allColors.filter((color, i, arr) => i === arr.findIndex((value) => value.scale === color.scale));
+	const grayScaleNamesStr = grayScaleNames;
+	if (!closestColors.every((color) => grayScaleNamesStr.includes(color.scale)) && grayScaleNamesStr.includes(closestColors[0].scale)) while (grayScaleNamesStr.includes(closestColors[1].scale)) closestColors.splice(1, 1);
+	let colorA = closestColors[0];
+	let colorB = closestColors[1];
+	const a = colorB.distance;
+	const b = colorA.distance;
+	const c = colorA.color.deltaEOK(colorB.color);
+	const cosA = (b ** 2 + c ** 2 - a ** 2) / (2 * b * c);
+	const sinA = Math.sin(Math.acos(cosA));
+	const cosB = (a ** 2 + c ** 2 - b ** 2) / (2 * a * c);
+	const sinB = Math.sin(Math.acos(cosB));
+	const tanC1 = cosA / sinA;
+	const tanC2 = cosB / sinB;
+	const ratio = Math.max(0, tanC1 / tanC2) * .5;
+	const scaleA = scales[colorA.scale];
+	const scaleB = scales[colorB.scale];
+	const scale = arrayOf12.map((i) => new Color(Color.mix(scaleA[i], scaleB[i], ratio)).to("oklch"));
+	const baseColor = scale.slice().sort((a, b) => source.deltaEOK(a) - source.deltaEOK(b))[0];
+	const ratioC = source.coords[1] / baseColor.coords[1];
+	scale.forEach((color) => {
+		color.coords[1] = Math.min(source.coords[1] * 1.5, color.coords[1] * ratioC);
+		color.coords[2] = source.coords[2];
+	});
+	if (scale[0].coords[0] > .5) {
+		const lightnessScale = scale.map(({ coords }) => coords[0]);
+		const newLightnessScale = transposeProgressionStart(Math.max(0, Math.min(1, backgroundColor.coords[0])), [1, ...lightnessScale], lightModeEasing);
+		newLightnessScale.shift();
+		newLightnessScale.forEach((lightness, i) => {
+			scale[i].coords[0] = lightness;
+		});
+		return scale;
+	}
+	let ease = [...darkModeEasing];
+	const referenceBackgroundColorL = scale[0].coords[0];
+	const ratioL = Math.max(0, Math.min(1, backgroundColor.coords[0])) / referenceBackgroundColorL;
+	if (ratioL > 1) {
+		const maxRatio = 1.5;
+		for (let i = 0; i < ease.length; i++) {
+			const metaRatio = (ratioL - 1) * (maxRatio / (maxRatio - 1));
+			ease[i] = ratioL > maxRatio ? 0 : Math.max(0, ease[i] * (1 - metaRatio));
+		}
+	}
+	const lightnessScale = scale.map(({ coords }) => coords[0]);
+	const backgroundL = backgroundColor.coords[0];
+	transposeProgressionStart(backgroundL, lightnessScale, ease).forEach((lightness, i) => {
+		scale[i].coords[0] = lightness;
+	});
+	return scale;
+}
+function getTextColor(background) {
+	const white = new Color("oklch", [
+		1,
+		0,
+		0
+	]);
+	if (Math.abs(white.contrastAPCA(background)) < 40) {
+		const [, C, H] = background.coords;
+		return new Color("oklch", [
+			.25,
+			Math.max(.08 * C, .04),
+			H
+		]);
+	}
+	return white;
+}
+function getAlphaColor(targetRgb, backgroundRgb, rgbPrecision, alphaPrecision, targetAlpha) {
+	const [tr, tg, tb] = targetRgb.map((c) => Math.round(c * rgbPrecision));
+	const [br, bg, bb] = backgroundRgb.map((c) => Math.round(c * rgbPrecision));
+	if (tr === void 0 || tg === void 0 || tb === void 0 || br === void 0 || bg === void 0 || bb === void 0) throw Error("Color is undefined");
+	let desiredRgb = 0;
+	if (tr > br) desiredRgb = rgbPrecision;
+	else if (tg > bg) desiredRgb = rgbPrecision;
+	else if (tb > bb) desiredRgb = rgbPrecision;
+	const alphaR = (tr - br) / (desiredRgb - br);
+	const alphaG = (tg - bg) / (desiredRgb - bg);
+	const alphaB = (tb - bb) / (desiredRgb - bb);
+	const isPureGray = [
+		alphaR,
+		alphaG,
+		alphaB
+	].every((alpha) => alpha === alphaR);
+	if (!targetAlpha && isPureGray) {
+		const V = desiredRgb / rgbPrecision;
+		return [
+			V,
+			V,
+			V,
+			alphaR
+		];
+	}
+	const clampRgb = (n) => isNaN(n) ? 0 : Math.min(rgbPrecision, Math.max(0, n));
+	const clampA = (n) => isNaN(n) ? 0 : Math.min(alphaPrecision, Math.max(0, n));
+	const A = clampA(Math.ceil((targetAlpha ?? Math.max(alphaR, alphaG, alphaB)) * alphaPrecision)) / alphaPrecision;
+	let R = clampRgb((br * (1 - A) - tr) / A * -1);
+	let G = clampRgb((bg * (1 - A) - tg) / A * -1);
+	let B = clampRgb((bb * (1 - A) - tb) / A * -1);
+	R = Math.ceil(R);
+	G = Math.ceil(G);
+	B = Math.ceil(B);
+	const blendedR = blendAlpha(R, A, br);
+	const blendedG = blendAlpha(G, A, bg);
+	const blendedB = blendAlpha(B, A, bb);
+	if (desiredRgb === 0) {
+		if (tr <= br && tr !== blendedR) R = tr > blendedR ? R + 1 : R - 1;
+		if (tg <= bg && tg !== blendedG) G = tg > blendedG ? G + 1 : G - 1;
+		if (tb <= bb && tb !== blendedB) B = tb > blendedB ? B + 1 : B - 1;
+	}
+	if (desiredRgb === rgbPrecision) {
+		if (tr >= br && tr !== blendedR) R = tr > blendedR ? R + 1 : R - 1;
+		if (tg >= bg && tg !== blendedG) G = tg > blendedG ? G + 1 : G - 1;
+		if (tb >= bb && tb !== blendedB) B = tb > blendedB ? B + 1 : B - 1;
+	}
+	R = R / rgbPrecision;
+	G = G / rgbPrecision;
+	B = B / rgbPrecision;
+	return [
+		R,
+		G,
+		B,
+		A
+	];
+}
+function blendAlpha(foreground, alpha, background, round = true) {
+	if (round) return Math.round(background * (1 - alpha)) + Math.round(foreground * alpha);
+	return background * (1 - alpha) + foreground * alpha;
+}
+function getAlphaColorSrgb(targetColor, backgroundColor, targetAlpha) {
+	const [r, g, b, a] = getAlphaColor(new Color(targetColor).to("srgb").coords, new Color(backgroundColor).to("srgb").coords, 255, 255, targetAlpha);
+	return formatHex(new Color("srgb", [
+		r,
+		g,
+		b
+	], a).toString({ format: "hex" }));
+}
+function getAlphaColorP3(targetColor, backgroundColor, targetAlpha) {
+	const [r, g, b, a] = getAlphaColor(new Color(targetColor).to("p3").coords, new Color(backgroundColor).to("p3").coords, 255, 1e3, targetAlpha);
+	return new Color("p3", [
+		r,
+		g,
+		b
+	], a).toString({ precision: 4 }).replace("color(p3 ", "color(display-p3 ");
+}
+function formatHex(str) {
+	if (!str.startsWith("#")) return str;
+	if (str.length === 4) {
+		const hash = str.charAt(0);
+		const r = str.charAt(1);
+		const g = str.charAt(2);
+		const b = str.charAt(3);
+		return hash + r + r + g + g + b + b;
+	}
+	if (str.length === 5) {
+		const hash = str.charAt(0);
+		const r = str.charAt(1);
+		const g = str.charAt(2);
+		const b = str.charAt(3);
+		const a = str.charAt(4);
+		return hash + r + r + g + g + b + b + a + a;
+	}
+	return str;
+}
+const darkModeEasing = [
+	1,
+	0,
+	1,
+	0
+];
+const lightModeEasing = [
+	0,
+	2,
+	0,
+	2
+];
+function transposeProgressionStart(to, arr, curve) {
+	return arr.map((n, i, arr) => {
+		const lastIndex = arr.length - 1;
+		return n - (arr[0] - to) * BezierEasing(...curve)(1 - i / lastIndex);
+	});
+}
+function toOklchString(color) {
+	const L = +(color.coords[0] * 100).toFixed(1);
+	return color.to("oklch").toString({ precision: 4 }).replace(/(\S+)(.+)/, `oklch(${L}%$2`);
+}
+//#endregion
+//#region src/lib/accent-theme.ts
+/** Curated name → source color. `blue` = Radix blue; the no-attribute default `--spark-*` stays the epilot brand. */
+const CURATED_ACCENTS = {
+	blue: RadixColors.blue.blue9,
+	indigo: RadixColors.indigo.indigo9,
+	violet: RadixColors.violet.violet9,
+	purple: RadixColors.purple.purple9,
+	cyan: RadixColors.cyan.cyan9,
+	teal: RadixColors.teal.teal9,
+	green: RadixColors.green.green9,
+	grass: RadixColors.grass.grass9,
+	orange: RadixColors.orange.orange9,
+	red: RadixColors.red.red9,
+	pink: RadixColors.pink.pink9,
+	gray: RadixColors.gray.gray9
+};
+/** ECP `DesignUtils` generator inputs, so a generated scale matches live portals. */
+const DEFAULTS = {
+	light: {
+		gray: "#333333",
+		background: "#ffffff"
+	},
+	dark: {
+		gray: "#8b8d98",
+		background: "#111113"
+	}
+};
+/** Generate the Radix-style accent scale for one appearance from a single accent color. */
+function generateAccentScale(accent, appearance) {
+	const scale = generateRadixColors({
+		appearance,
+		accent,
+		gray: DEFAULTS[appearance].gray,
+		background: DEFAULTS[appearance].background
+	});
+	return {
+		...scale,
+		accentContrast: readableContrast(scale, MIN_TEXT_CONTRAST),
+		accentOnSolid: readableContrast(scale, MIN_GRAPHIC_CONTRAST)
+	};
+}
+const MIN_TEXT_CONTRAST = 4.5;
+const MIN_GRAPHIC_CONTRAST = 3;
+function readableContrast(scale, min) {
+	const step9 = new Color(scale.accentScale[8]);
+	const [, chroma, hue] = step9.to("oklch").coords;
+	const tinted = (lightness) => new Color("oklch", [
+		lightness,
+		Math.max(.08 * (chroma ?? 0), .04),
+		hue ?? 0
+	]).to("srgb").toString({ format: "hex" });
+	const candidates = [
+		scale.accentContrast,
+		tinted(.25),
+		tinted(.15)
+	];
+	const ratios = candidates.map((c) => new Color(c).contrast(step9, "WCAG21"));
+	const passing = ratios.findIndex((r) => r >= min);
+	if (passing !== -1) return candidates[passing];
+	return candidates[ratios.indexOf(Math.max(...ratios))];
+}
+/** sRGB `--spark-*` declarations for a generated accent scale. */
+function accentSparkVars(scale) {
+	return sparkVars(scale.accentScale, scale.accentScaleAlpha, scale.accentContrast, scale.accentOnSolid, scale.accentSurface, scale.background);
+}
+/** Radix's `grayColor="auto"` pairing (accent family → gray), mapped to our 6 neutrals. */
+const NEUTRAL_BY_ACCENT = {
+	blue: "slate",
+	indigo: "slate",
+	cyan: "slate",
+	violet: "mauve",
+	purple: "mauve",
+	pink: "mauve",
+	red: "mauve",
+	teal: "sage",
+	green: "sage",
+	grass: "olive",
+	orange: "sand",
+	gray: "gray"
+};
+/** Radix's "auto" gray: curated names use Radix's table; a custom hex is classified by OKLCH hue. */
+function getMatchingNeutral(accent) {
+	const byName = NEUTRAL_BY_ACCENT[accent];
+	if (byName) return byName;
+	try {
+		const [, chroma, hueRaw] = new Color(accent).to("oklch").coords;
+		if (!chroma || chroma < .04) return "gray";
+		const hue = ((hueRaw ?? 0) % 360 + 360) % 360;
+		if (hue >= 300 || hue < 35) return "mauve";
+		if (hue < 115) return "sand";
+		if (hue < 145) return "olive";
+		if (hue < 200) return "sage";
+		return "slate";
+	} catch {
+		return "slate";
+	}
+}
+function sparkVars(steps, alpha, contrast, onSolid, surface, background) {
+	const indicator = steps[8];
+	return [
+		...steps.map((c, i) => `--spark-${i + 1}: ${c};`),
+		...alpha.map((c, i) => `--spark-a${i + 1}: ${c};`),
+		`--spark-contrast: ${contrast};`,
+		`--spark-on-solid: ${onSolid};`,
+		`--spark-surface: ${surface};`,
+		`--spark-background: ${background};`,
+		`--spark-indicator: ${indicator};`,
+		`--spark-track: ${indicator};`
+	];
+}
+//#endregion
+//#region src/components/theme.tsx
+const ThemeContext = React$1.createContext({});
+/** Merged theme values from enclosing `<Theme>` providers. */
+function useTheme() {
+	return React$1.useContext(ThemeContext);
+}
+/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
+const Theme = React$1.forwardRef(function Theme({ accentColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, labelPosition, inputStyle, inputColor, cardVariant, cardColor, appearance, render, className, style, children, ...rest }, ref) {
+	const parent = useTheme();
+	const value = React$1.useMemo(() => ({
+		accentColor: accentColor ?? parent.accentColor,
+		neutralColor: neutralColor ?? parent.neutralColor,
+		radius: radius ?? parent.radius,
+		scaling: scaling ?? parent.scaling,
+		spacing: spacing ?? parent.spacing,
+		styleVariant: styleVariant ?? parent.styleVariant,
+		highContrast: highContrast ?? parent.highContrast,
+		labelPosition: labelPosition ?? parent.labelPosition,
+		inputStyle: inputStyle ?? parent.inputStyle,
+		inputColor: inputColor ?? parent.inputColor,
+		cardVariant: cardVariant ?? parent.cardVariant,
+		cardColor: cardColor ?? parent.cardColor,
+		appearance: appearance ?? parent.appearance
+	}), [
+		accentColor,
+		neutralColor,
+		radius,
+		scaling,
+		spacing,
+		styleVariant,
+		highContrast,
+		labelPosition,
+		inputStyle,
+		inputColor,
+		cardVariant,
+		cardColor,
+		appearance,
+		parent
+	]);
+	const scopeId = React$1.useId();
+	const accent = React$1.useMemo(() => {
+		const empty = {
+			inlineVars: {},
+			css: "",
+			scoped: false
+		};
+		if (!accentColor) return empty;
+		const toVars = (decls) => Object.fromEntries(decls.filter((decl) => decl.includes(":")).map((decl) => {
+			const i = decl.indexOf(":");
+			return [decl.slice(0, i).trim(), decl.slice(i + 1).replace(/;$/, "").trim()];
+		}));
+		try {
+			const hex = CURATED_ACCENTS[accentColor] ?? accentColor;
+			if (value.appearance) return {
+				inlineVars: toVars(accentSparkVars(generateAccentScale(hex, value.appearance))),
+				css: "",
+				scoped: false
+			};
+			const light = accentSparkVars(generateAccentScale(hex, "light"));
+			const dark = accentSparkVars(generateAccentScale(hex, "dark"));
+			const sel = `[data-spark-scope="${scopeId}"]`;
+			return {
+				inlineVars: {},
+				css: `${sel}{${light.join("")}}:is(.dark,.dark-theme) ${sel}{${dark.join("")}}`,
+				scoped: true
+			};
+		} catch (error) {
+			console.warn(`[Theme] Ignoring invalid accentColor "${accentColor}".`, error);
+			return empty;
+		}
+	}, [
+		accentColor,
+		value.appearance,
+		scopeId
+	]);
+	const resolvedNeutralColor = neutralColor === "auto" ? getMatchingNeutral(value.accentColor ?? "#005EB4") : neutralColor;
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({
+			className: cn("spark-theme", appearance, className),
+			"data-neutral-color": resolvedNeutralColor,
+			"data-radius": radius,
+			"data-scaling": scaling,
+			"data-spacing": spacing,
+			"data-style": styleVariant,
+			"data-high-contrast": highContrast ? "" : void 0,
+			"data-label-position": labelPosition,
+			"data-input-style": inputStyle,
+			"data-input-color": inputColor,
+			"data-card-variant": cardVariant,
+			"data-card-color": cardColor === "accent" ? "accent" : void 0,
+			"data-spark-scope": accent.scoped ? scopeId : void 0,
+			style: {
+				...accent.inlineVars,
+				...style
+			},
+			children
+		}, rest)
+	});
+	return /* @__PURE__ */ jsxs(ThemeContext.Provider, {
+		value,
+		children: [accent.css ? /* @__PURE__ */ jsx("style", { children: accent.css }) : null, element]
+	});
+});
+//#endregion
+export { useTheme as n, Theme as t };
+
+//# sourceMappingURL=theme-B3WtiByA.js.map