@gradient-ui/core 0.8.0 → 1.0.1

package/dist/scheme-Dp9cSd1s.js

@@ -0,0 +1,1406 @@
+import { h as hexFromArgb, t as themeFromSourceColor, i as argbFromHex, H as Hct, d as createPalettePair, f as COLOR_SEEDS, C as COLOR_SHADES$1, p as parseColor$1, r as rgbToChannels$1, g as getContrastingColor } from "./palette-CH8mtBoc.js";
+import { createGradient as createGradient$1, createGradientFromColor as createGradientFromColor$1 } from "@gradient-ui/gradient-engine";
+import { c as camelToKebabCase } from "./camelToKebabCase-nw6sbguT.js";
+const clamp$1 = (value, min = 0, max = 1) => Math.min(max, Math.max(min, value)), parseHex = (value) => {
+  const hex = value.slice(1), normalized = hex.length === 3 || hex.length === 4 ? hex.slice(0, 3).split("").map((character) => character.repeat(2)).join("") : hex.slice(0, 6);
+  return normalized.length !== 6 || !/^[\da-f]{6}$/i.test(normalized) ? null : {
+    r: parseInt(normalized.slice(0, 2), 16),
+    g: parseInt(normalized.slice(2, 4), 16),
+    b: parseInt(normalized.slice(4, 6), 16)
+  };
+}, parseRgb = (value) => {
+  const match = value.match(
+    /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*[\d.]+%?)?\s*\)$/i
+  );
+  return match ? {
+    r: clamp$1(Number(match[1]), 0, 255),
+    g: clamp$1(Number(match[2]), 0, 255),
+    b: clamp$1(Number(match[3]), 0, 255)
+  } : null;
+}, parseColor = (input) => {
+  if (typeof input == "number") {
+    const value2 = input & 16777215;
+    return {
+      r: value2 >> 16 & 255,
+      g: value2 >> 8 & 255,
+      b: value2 & 255
+    };
+  }
+  const value = input.trim();
+  return value.startsWith("#") ? parseHex(value) : value.toLowerCase().startsWith("rgb") ? parseRgb(value) : null;
+}, rgbToHex = ({ r, g, b }) => `#${[r, g, b].map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`, rgbToChannels = ({ r, g, b }) => `${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}`, colorToHex = (input, fallback) => {
+  const color = parseColor(input) ?? parseColor(fallback);
+  if (!color)
+    throw new Error(`Invalid fallback color: ${fallback}`);
+  return rgbToHex(color);
+}, DEFAULT_GRADIENT_DIRECTION = 135, DEFAULT_GRADIENT_POSITION = "center", DEFAULT_GRADIENT_SIZE = "farthest-corner", normalizeDirection = (direction = DEFAULT_GRADIENT_DIRECTION) => typeof direction == "number" ? `${direction}deg` : direction, toCssLength = (value) => typeof value == "number" ? `${value}px` : value, toCssDuration = (value) => typeof value == "number" ? `${value}ms` : value, clamp = (value, min = 0, max = 1) => Math.min(max, Math.max(min, value)), toCssColor = (color, opacity) => {
+  if (opacity === void 0) return color;
+  const parsed = parseColor(color);
+  return parsed ? `rgb(${rgbToChannels(parsed).replace(/,/g, "")} / ${clamp(opacity)})` : color;
+}, formatStop = ({ color, opacity, position }) => `${toCssColor(color, opacity)} ${position}%`, createStop = (color, position, opacity) => ({
+  color,
+  position
+}), getConicStops = (stops) => {
+  if (stops.length <= 1) return stops;
+  const firstHalf = stops.map((stop) => ({
+    ...stop,
+    position: stop.position / 2
+  })), secondHalf = [...stops].reverse().map((stop) => ({
+    ...stop,
+    position: 100 - stop.position / 2
+  }));
+  return [...firstHalf, ...secondHalf];
+}, createShiftKeyframes = (name) => `@keyframes ${name} {
+	0% {
+		background-position: 0% 50%;
+	}
+
+	50% {
+		background-position: 100% 50%;
+	}
+
+	100% {
+		background-position: 0% 50%;
+	}
+}`, createPulseKeyframes = (name) => `@keyframes ${name} {
+	0%, 100% {
+		filter: saturate(1) brightness(1);
+	}
+
+	50% {
+		filter: saturate(1.22) brightness(1.08);
+	}
+}`, createHueRotateKeyframes = (name) => `@keyframes ${name} {
+	0%, 100% {
+		filter: hue-rotate(0deg) saturate(1);
+	}
+
+	50% {
+		filter: hue-rotate(28deg) saturate(1.18);
+	}
+}`, createRotateKeyframes = (name) => `@keyframes ${name} {
+	from {
+		transform: translate(-50%, -50%) rotate(0deg);
+	}
+
+	to {
+		transform: translate(-50%, -50%) rotate(360deg);
+	}
+}`, getGradientAnimationOptions = (options = {}) => {
+  const name = options.name ?? "g-gradient-shift", duration = toCssDuration(options.duration ?? 6e3), easing = options.easing ?? "ease-in-out", selector = options.selector ?? ".g-gradient-animated", preset = options.preset ?? "shift";
+  return {
+    duration,
+    easing,
+    name,
+    preset,
+    selector
+  };
+}, toGradientAnimationKeyframes = (options = {}) => {
+  const { name, preset } = getGradientAnimationOptions(options);
+  return preset === "pulse" ? createPulseKeyframes(name) : preset === "hue-rotate" ? createHueRotateKeyframes(name) : preset === "rotate" ? createRotateKeyframes(name) : createShiftKeyframes(name);
+}, toGradientAnimationValue = (options = {}) => {
+  const { duration, easing, name, preset } = getGradientAnimationOptions(options);
+  return `${name} ${duration} ${preset === "rotate" ? "linear" : easing} infinite`;
+}, toGradientAnimationStyles = (options = {}) => {
+  const { duration, easing, name, preset, selector } = getGradientAnimationOptions(options);
+  return preset === "rotate" ? `${selector} {
+	position: relative;
+	overflow: hidden;
+}
+
+${selector}::before {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 200%;
+	height: 200%;
+	min-width: 150vmax;
+	min-height: 150vmax;
+	background: inherit;
+	animation: ${name} ${duration} linear infinite;
+	transform-origin: center;
+}` : preset === "pulse" || preset === "hue-rotate" ? `${selector} {
+	animation: ${name} ${duration} ${easing} infinite;
+}` : `${selector} {
+	animation: ${name} ${duration} ${easing} infinite;
+	background-size: 220% 220%;
+}`;
+}, toGradientAnimationCSS = (options = {}) => {
+  const keyframes = toGradientAnimationKeyframes(options), styles = toGradientAnimationStyles(options);
+  return `${keyframes}
+${styles}`;
+}, index$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  getGradientAnimationOptions,
+  toGradientAnimationCSS,
+  toGradientAnimationKeyframes,
+  toGradientAnimationStyles,
+  toGradientAnimationValue
+}, Symbol.toStringTag, { value: "Module" })), COLOR_SHADES = [
+  50,
+  100,
+  200,
+  300,
+  400,
+  500,
+  600,
+  700,
+  800,
+  900
+], SHADE_TONES = {
+  50: 90,
+  100: 80,
+  200: 70,
+  300: 60,
+  400: 50,
+  500: 40,
+  600: 35,
+  700: 30,
+  800: 20,
+  900: 10
+};
+Object.fromEntries(
+  COLOR_SHADES.map((shade) => [shade, SHADE_TONES[shade] >= 60 ? 10 : 100])
+);
+const createTonalPalette = (seed) => {
+  const hex = colorToHex(seed, "#000000");
+  return themeFromSourceColor(argbFromHex(hex)).palettes.primary;
+}, createPaletteFromTones = (seed, tones) => {
+  const tonalPalette = createTonalPalette(seed);
+  return Object.fromEntries(
+    COLOR_SHADES.map((shade) => [
+      shade,
+      hexFromArgb(tonalPalette.tone(tones[shade]))
+    ])
+  );
+}, createPalette = (seed) => createPaletteFromTones(seed, SHADE_TONES), createLinearGradient = (stops, direction = DEFAULT_GRADIENT_DIRECTION) => `linear-gradient(${normalizeDirection(direction)}, ${stops.join(", ")})`, toCssGradient = (model) => {
+  const stops = model.stops.map(formatStop).join(", ");
+  if (model.type === "radial") {
+    const shape = model.shape ?? "ellipse", size = model.size ?? DEFAULT_GRADIENT_SIZE, position = model.position ?? DEFAULT_GRADIENT_POSITION;
+    return `radial-gradient(${shape} ${size} at ${position}, ${stops})`;
+  }
+  if (model.type === "conic") {
+    const direction = normalizeDirection(model.direction), position = model.position ?? DEFAULT_GRADIENT_POSITION, conicStops = getConicStops(model.stops).map(formatStop).join(", ");
+    return `conic-gradient(from ${direction} at ${position}, ${conicStops})`;
+  }
+  return createLinearGradient(model.stops.map(formatStop), model.direction);
+}, changeTone = (hex, tone) => {
+  const hct = Hct.fromInt(argbFromHex(hex));
+  return hexFromArgb(Hct.from(hct.hue, hct.chroma, tone).toInt());
+}, shiftHue = (hex, hueShift, tone, chromaMultiplier = 1) => {
+  const hct = Hct.fromInt(argbFromHex(hex)), hue = (hct.hue + hueShift + 360) % 360, chroma = Math.min(hct.chroma * chromaMultiplier, 100);
+  return hexFromArgb(Hct.from(hue, chroma, tone).toInt());
+}, getComplementaryColor = (hex) => {
+  const hct = Hct.fromInt(argbFromHex(hex)), hue = (hct.hue + 110) % 360, chroma = Math.min(hct.chroma * 1.2, 100), tone = hct.tone < 50 ? 65 : Math.min(hct.tone + 10, 75);
+  return hexFromArgb(Hct.from(hue, chroma, tone).toInt());
+}, createGlareStops = (base) => {
+  const complementary = getComplementaryColor(base);
+  return [
+    createStop(changeTone(complementary, 95), 0),
+    createStop(complementary, 25),
+    createStop(base, 50),
+    createStop(changeTone(base, 80), 75),
+    createStop(changeTone(base, 20), 100)
+  ];
+}, createMonochromeStops = (base) => [
+  createStop(changeTone(base, 94), 0),
+  createStop(changeTone(base, 72), 28),
+  createStop(base, 55),
+  createStop(changeTone(base, 24), 100)
+], createComplementaryStops = (base) => [
+  createStop(changeTone(getComplementaryColor(base), 88), 0),
+  createStop(base, 50),
+  createStop(changeTone(getComplementaryColor(base), 32), 100)
+], createSplitComplementaryStops = (base) => [
+  createStop(shiftHue(base, 148, 82, 0.95), 0),
+  createStop(shiftHue(base, -148, 70, 1.05), 28),
+  createStop(base, 56),
+  createStop(shiftHue(base, 150, 34, 1.08), 100)
+], createAnalogousStops = (base) => [
+  createStop(shiftHue(base, -34, 72, 0.95), 0),
+  createStop(base, 50),
+  createStop(shiftHue(base, 34, 34, 1.05), 100)
+], createTriadicStops = (base) => [
+  createStop(shiftHue(base, -120, 78, 0.9), 0),
+  createStop(base, 50),
+  createStop(shiftHue(base, 120, 36, 1.05), 100)
+], createTetradicStops = (base) => [
+  createStop(shiftHue(base, -90, 78, 0.92), 0),
+  createStop(base, 32),
+  createStop(shiftHue(base, 90, 62, 1), 58),
+  createStop(shiftHue(base, 180, 34, 1.08), 100)
+], createRectangleStops = (base) => [
+  createStop(shiftHue(base, -28, 82, 0.96), 0),
+  createStop(base, 27),
+  createStop(shiftHue(base, 152, 66, 1.02), 62),
+  createStop(shiftHue(base, 180, 34, 1.08), 100)
+], createSquareStops = (base) => [
+  createStop(shiftHue(base, -90, 78, 0.94), 0),
+  createStop(base, 30),
+  createStop(shiftHue(base, 90, 62, 1), 62),
+  createStop(shiftHue(base, 180, 36, 1.08), 100)
+], createDuotoneStops = (base, colors) => {
+  const first = (colors == null ? void 0 : colors[0]) ?? changeTone(base, 84), second = (colors == null ? void 0 : colors[1]) ?? getComplementaryColor(base);
+  return [
+    createStop(first, 0),
+    createStop(base, 48),
+    createStop(second, 100)
+  ];
+}, gradientRecipes = {
+  glare: createGlareStops,
+  monochrome: createMonochromeStops,
+  complementary: createComplementaryStops,
+  "split-complementary": createSplitComplementaryStops,
+  analogous: createAnalogousStops,
+  triadic: createTriadicStops,
+  tetradic: createTetradicStops,
+  rectangle: createRectangleStops,
+  square: createSquareStops,
+  duotone: createDuotoneStops
+}, createRecipeStops = (base, recipe, colors) => gradientRecipes[recipe](base, colors), createGradientModel = (palette, options = {}) => {
+  const shade = options.shade ?? 500, recipe = options.recipe ?? "glare";
+  return {
+    type: options.type ?? "linear",
+    stops: createRecipeStops(palette[shade], recipe, options.colors),
+    direction: options.direction ?? DEFAULT_GRADIENT_DIRECTION,
+    shape: options.shape ?? "ellipse",
+    position: options.position ?? DEFAULT_GRADIENT_POSITION,
+    size: options.size ?? DEFAULT_GRADIENT_SIZE
+  };
+}, createGradientModelFromColor = (color, options = {}) => createGradientModel(createPalette(color), options), GRADIENT_MORPH_BLEND_MODES = [
+  "normal",
+  "multiply",
+  "screen",
+  "overlay",
+  "darken",
+  "lighten",
+  "color-dodge",
+  "color-burn",
+  "hard-light",
+  "soft-light",
+  "difference",
+  "exclusion",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity"
+], DEFAULT_GRADIENT_MORPH_BLEND_MODE = "hard-light", defineGradientPreset = (preset) => preset, defineGradientPresetRegistry = (presets) => presets, gradientPresets = defineGradientPresetRegistry({
+  materialBorder: defineGradientPreset({
+    label: "Material border",
+    description: "Default Gradient UI border material.",
+    gradient: {
+      recipe: "glare",
+      type: "linear",
+      direction: 135
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.22,
+      blur: 12,
+      y: 4,
+      spread: -3
+    },
+    dropShadow: {
+      layers: 2,
+      opacity: 0.32,
+      blur: 12,
+      y: 5
+    },
+    animation: {
+      preset: "shift",
+      duration: 6400,
+      easing: "ease-in-out"
+    }
+  }),
+  materialAction: defineGradientPreset({
+    label: "Material action",
+    description: "Compact action material for buttons, chips and controls.",
+    gradient: {
+      recipe: "glare",
+      type: "linear",
+      direction: 135
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.2,
+      blur: 10,
+      y: 3,
+      spread: -2
+    },
+    dropShadow: {
+      layers: 2,
+      opacity: 0.28,
+      blur: 10,
+      y: 4
+    },
+    animation: {
+      preset: "shift",
+      duration: 6800,
+      easing: "ease-in-out"
+    }
+  }),
+  materialSurface: defineGradientPreset({
+    label: "Material surface",
+    description: "Soft surface material for calm gradient backgrounds.",
+    gradient: {
+      recipe: "monochrome",
+      type: "linear",
+      direction: 145
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.18,
+      blur: 14,
+      y: 5,
+      spread: -3
+    },
+    dropShadow: {
+      layers: 2,
+      opacity: 0.22,
+      blur: 14,
+      y: 5
+    },
+    animation: {
+      preset: "pulse",
+      duration: 7600,
+      easing: "ease-in-out"
+    }
+  }),
+  brandGlare: defineGradientPreset({
+    label: "Brand glare",
+    description: "Classic Gradient UI glare with a vivid complementary highlight.",
+    gradient: {
+      recipe: "glare",
+      type: "linear",
+      direction: 135
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.24,
+      blur: 16,
+      y: 6,
+      spread: -3
+    },
+    dropShadow: {
+      layers: 3,
+      opacity: 0.38,
+      blur: 16,
+      y: 6
+    },
+    animation: {
+      preset: "shift",
+      duration: 6e3,
+      easing: "ease-in-out"
+    }
+  }),
+  softMono: defineGradientPreset({
+    label: "Soft mono",
+    description: "Quiet monochrome ramp for subtle surfaces.",
+    gradient: {
+      recipe: "monochrome",
+      type: "linear",
+      direction: 145
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.18,
+      blur: 18,
+      y: 7,
+      spread: -4
+    },
+    dropShadow: {
+      layers: 2,
+      opacity: 0.26,
+      blur: 16,
+      y: 6
+    },
+    animation: {
+      preset: "pulse",
+      duration: 7200,
+      easing: "ease-in-out"
+    }
+  }),
+  neonDuo: defineGradientPreset({
+    label: "Neon duo",
+    description: "Punchy duotone setup with stronger glow defaults.",
+    gradient: {
+      recipe: "duotone",
+      type: "linear",
+      direction: 120
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.32,
+      blur: 18,
+      y: 7,
+      spread: -3
+    },
+    dropShadow: {
+      layers: 3,
+      opacity: 0.52,
+      blur: 18,
+      y: 7
+    },
+    animation: {
+      preset: "shift",
+      duration: 5200,
+      easing: "ease-in-out"
+    }
+  }),
+  orbitalConic: defineGradientPreset({
+    label: "Orbital conic",
+    description: "Smooth mirrored conic gradient for badges and marks.",
+    gradient: {
+      recipe: "triadic",
+      type: "conic",
+      direction: 35,
+      position: "center"
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.24,
+      blur: 16,
+      y: 6,
+      spread: -3
+    },
+    dropShadow: {
+      layers: 3,
+      opacity: 0.36,
+      blur: 16,
+      y: 6
+    },
+    animation: {
+      preset: "rotate",
+      duration: 9e3
+    }
+  }),
+  auroraRadial: defineGradientPreset({
+    label: "Aurora radial",
+    description: "Radial analogous gradient with slow hue motion.",
+    gradient: {
+      recipe: "analogous",
+      type: "radial",
+      direction: 0,
+      position: "top left",
+      shape: "circle"
+    },
+    shadow: {
+      layers: 2,
+      opacity: 0.22,
+      blur: 18,
+      y: 7,
+      spread: -4
+    },
+    dropShadow: {
+      layers: 3,
+      opacity: 0.32,
+      blur: 18,
+      y: 7
+    },
+    animation: {
+      preset: "hue-rotate",
+      duration: 8e3,
+      easing: "ease-in-out"
+    }
+  })
+}), getGradientPreset = (name, registry = gradientPresets) => registry[name] ?? gradientPresets.brandGlare, createGradient = (palette, options = {}) => toCssGradient(createGradientModel(palette, options)), createGradientFromColor = (color, options = {}) => createGradient(createPalette(color), options), core = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  DEFAULT_GRADIENT_MORPH_BLEND_MODE,
+  GRADIENT_MORPH_BLEND_MODES,
+  createGradient,
+  createGradientFromColor,
+  createGradientModel,
+  createGradientModelFromColor,
+  createRecipeStops,
+  defineGradientPreset,
+  defineGradientPresetRegistry,
+  getGradientPreset,
+  gradientPresets,
+  gradientRecipes
+}, Symbol.toStringTag, { value: "Module" })), SVG_NAMESPACE$1 = "http://www.w3.org/2000/svg", XHTML_NAMESPACE$1 = "http://www.w3.org/1999/xhtml", escapeAttribute$1 = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), morphPresets = {
+  soft: {
+    blobCount: 5,
+    blur: 40,
+    contrast: 18,
+    duration: 12e3,
+    opacity: 0.76,
+    scale: 1.05
+  },
+  liquid: {
+    blobCount: 6,
+    blur: 46,
+    contrast: 22,
+    duration: 9200,
+    opacity: 0.82,
+    scale: 1.18
+  },
+  ripple: {
+    blobCount: 7,
+    blur: 34,
+    contrast: 20,
+    duration: 7200,
+    opacity: 0.78,
+    scale: 0.94
+  }
+}, gradientMorphBlendModeSet = new Set(GRADIENT_MORPH_BLEND_MODES), isGradientMorphBlendMode = (value) => gradientMorphBlendModeSet.has(value), resolveGradientMorphBlendMode = (value) => value && isGradientMorphBlendMode(value) ? value : DEFAULT_GRADIENT_MORPH_BLEND_MODE, getMorphOptions = (options = {}) => {
+  const preset = morphPresets[options.preset ?? "soft"];
+  return {
+    blobCount: Math.max(
+      2,
+      Math.round(options.blobCount ?? preset.blobCount)
+    ),
+    blendMode: resolveGradientMorphBlendMode(options.blendMode),
+    blobOpacity: clamp(options.blobOpacity ?? 1, 0, 1.6),
+    blur: clamp(options.blur ?? preset.blur, 0, 80),
+    contrast: clamp(options.contrast ?? preset.contrast, 0, 36),
+    duration: options.duration ?? preset.duration,
+    id: options.id ?? "g-gradient-morph",
+    opacity: clamp(options.opacity ?? preset.opacity),
+    scale: clamp(options.scale ?? preset.scale, 0.4, 2)
+  };
+}, getBlobColor = (model, index2) => {
+  var _a, _b;
+  return ((_a = model.stops[index2 % model.stops.length]) == null ? void 0 : _a.color) ?? ((_b = model.stops[0]) == null ? void 0 : _b.color) ?? "currentColor";
+}, getDurationMs = (duration) => {
+  if (typeof duration == "number") return duration;
+  const parsed = Number.parseFloat(duration);
+  return Number.isFinite(parsed) ? parsed : 9e3;
+}, getNoise = (index2, salt) => {
+  const value = Math.sin((index2 + 1) * 12.9898 + salt * 78.233) * 43758.5453;
+  return value - Math.floor(value);
+}, getNoiseRange = (index2, salt, min, max) => min + getNoise(index2, salt) * (max - min), round = (value) => Number(value.toFixed(3)), blobPaths = [
+  {
+    animationName: "g-gradient-morph-drift",
+    dx: 20,
+    dx2: 8,
+    dy: -8,
+    dy2: 16,
+    originX: "50%",
+    originY: "50%",
+    scaleMid: 1.16,
+    scaleTo: 1.04,
+    x: 6,
+    y: 58
+  },
+  {
+    animationName: "g-gradient-morph-orbit",
+    dx: -18,
+    dx2: 10,
+    dy: 18,
+    dy2: -10,
+    originX: "24%",
+    originY: "68%",
+    scaleMid: 0.96,
+    scaleTo: 1.12,
+    x: 44,
+    y: 20
+  },
+  {
+    animationName: "g-gradient-morph-float",
+    dx: -16,
+    dx2: -8,
+    dy: -12,
+    dy2: 18,
+    originX: "50%",
+    originY: "50%",
+    scaleMid: 1.2,
+    scaleTo: 1.08,
+    x: 74,
+    y: 58
+  },
+  {
+    animationName: "g-gradient-morph-orbit",
+    dx: 12,
+    dx2: -20,
+    dy: 14,
+    dy2: 6,
+    originX: "70%",
+    originY: "30%",
+    scaleMid: 1.04,
+    scaleTo: 1.18,
+    x: 88,
+    y: 25
+  },
+  {
+    animationName: "g-gradient-morph-drift",
+    dx: 24,
+    dx2: -12,
+    dy: -16,
+    dy2: -8,
+    originX: "50%",
+    originY: "50%",
+    scaleMid: 1.12,
+    scaleTo: 0.98,
+    x: 30,
+    y: 78
+  },
+  {
+    animationName: "g-gradient-morph-float",
+    dx: -22,
+    dx2: 14,
+    dy: 10,
+    dy2: -18,
+    originX: "50%",
+    originY: "50%",
+    scaleMid: 0.94,
+    scaleTo: 1.1,
+    x: 104,
+    y: 82
+  },
+  {
+    animationName: "g-gradient-morph-orbit",
+    dx: 14,
+    dx2: -16,
+    dy: -22,
+    dy2: 10,
+    originX: "35%",
+    originY: "35%",
+    scaleMid: 1.18,
+    scaleTo: 1.02,
+    x: 55,
+    y: 64
+  },
+  {
+    animationName: "g-gradient-morph-drift",
+    dx: -18,
+    dx2: 18,
+    dy: -14,
+    dy2: 14,
+    originX: "50%",
+    originY: "50%",
+    scaleMid: 1.08,
+    scaleTo: 0.96,
+    x: 18,
+    y: 24
+  }
+], createGradientMorphBlobs = (model, options = {}) => {
+  const { blobCount, blobOpacity, duration, scale } = getMorphOptions(options), durationMs = getDurationMs(duration);
+  return Array.from({ length: blobCount }, (_, index2) => {
+    const path = blobPaths[index2 % blobPaths.length], sizeJitter = getNoiseRange(index2, 1, 0.88, 1.16), durationJitter = getNoiseRange(index2, 2, 0.86, 1.24), opacity = clamp(getNoiseRange(index2, 3, 0.72, 1) * blobOpacity), blur = getNoiseRange(index2, 4, 0, 4), size = (34 + index2 % 4 * 9) * scale * sizeJitter;
+    return {
+      animationName: path.animationName,
+      blur: round(blur),
+      color: getBlobColor(model, index2),
+      delay: Math.round(
+        index2 * -0.19 * durationMs - getNoiseRange(index2, 5, 0, 900)
+      ),
+      dx: round(path.dx * getNoiseRange(index2, 6, 0.84, 1.18)),
+      dx2: round(path.dx2 * getNoiseRange(index2, 7, 0.82, 1.22)),
+      dy: round(path.dy * getNoiseRange(index2, 8, 0.84, 1.18)),
+      dy2: round(path.dy2 * getNoiseRange(index2, 9, 0.82, 1.22)),
+      duration: Math.round(
+        durationMs * (1 + index2 % 3 * 0.11) * durationJitter
+      ),
+      opacity: round(opacity),
+      originX: path.originX,
+      originY: path.originY,
+      rotateMid: Math.round(getNoiseRange(index2, 10, 95, 165)),
+      rotateTo: Math.round(getNoiseRange(index2, 11, 220, 310)),
+      scaleMid: path.scaleMid,
+      scaleTo: path.scaleTo,
+      size: round(size),
+      x: path.x,
+      y: path.y
+    };
+  });
+}, toGradientMorphFilter = (options = {}) => `url(#${getMorphOptions(options).id}) blur(${getMorphOptions(options).blur}px)`, toGradientMorphFilterMarkup = (options = {}) => {
+  const { blur, contrast, id } = getMorphOptions(options), gooBlur = Math.max(2, Math.round(blur * 0.25)), alphaOffset = -(contrast * 0.45), matrix = contrast <= 0 ? "" : `
+    <feColorMatrix in="g-gradient-morph-blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${contrast} ${alphaOffset}" result="g-gradient-morph-goo" />
+    <feBlend in="SourceGraphic" in2="g-gradient-morph-goo" />`;
+  return `<svg xmlns="${SVG_NAMESPACE$1}" width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute;overflow:hidden;inline-size:0;block-size:0;">
+  <filter id="${id}" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="${gooBlur}" result="g-gradient-morph-blur" />${matrix}
+  </filter>
+</svg>`;
+}, toGradientMorphCSS = (model, options = {}) => {
+  const selector = options.selector ?? ".g-gradient-morph", { blendMode, opacity } = getMorphOptions(options), blobs = createGradientMorphBlobs(model, options);
+  return `${selector} {
+	position: relative;
+	overflow: hidden;
+}
+
+${selector}__blobs {
+	position: absolute;
+	inset: -18%;
+	opacity: ${opacity};
+	filter: ${toGradientMorphFilter(options)};
+	mix-blend-mode: ${blendMode};
+}
+
+${selector}__blob {
+	position: absolute;
+	transform: translate(-50%, -50%);
+	transform-origin: var(--g-gradient-morph-origin-x) var(--g-gradient-morph-origin-y);
+	opacity: var(--g-gradient-morph-opacity);
+	filter: blur(var(--g-gradient-morph-blur));
+	border-radius: 999px;
+	background: radial-gradient(circle, var(--g-gradient-morph-blob-color) 0%, transparent 72%);
+	animation: var(--g-gradient-morph-animation) var(--g-gradient-morph-duration, 9000ms) ease-in-out infinite alternate;
+}
+
+${blobs.map(
+    (blob, index2) => `${selector}__blob:nth-child(${index2 + 1}) {
+	top: ${blob.y}%;
+	left: ${blob.x}%;
+	width: ${blob.size}%;
+	aspect-ratio: 1;
+	--g-gradient-morph-blob-color: ${blob.color};
+	--g-gradient-morph-x: ${blob.dx}%;
+	--g-gradient-morph-x2: ${blob.dx2}%;
+	--g-gradient-morph-y: ${blob.dy}%;
+	--g-gradient-morph-y2: ${blob.dy2}%;
+	--g-gradient-morph-origin-x: ${blob.originX};
+	--g-gradient-morph-origin-y: ${blob.originY};
+	--g-gradient-morph-animation: ${blob.animationName};
+	--g-gradient-morph-blur: ${blob.blur}px;
+	--g-gradient-morph-opacity: ${blob.opacity};
+	--g-gradient-morph-rotate-mid: ${blob.rotateMid}deg;
+	--g-gradient-morph-rotate-to: ${blob.rotateTo}deg;
+	--g-gradient-morph-scale-mid: ${blob.scaleMid};
+	--g-gradient-morph-scale: ${blob.scaleTo};
+	--g-gradient-morph-delay: ${blob.delay}ms;
+	animation-delay: var(--g-gradient-morph-delay);
+	animation-duration: ${toCssDuration(blob.duration)};
+}`
+  ).join(`
+
+`)}
+
+@keyframes g-gradient-morph-drift {
+	0% {
+		transform: translate(-50%, -50%) scale(0.92);
+	}
+
+	42% {
+		transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) scale(var(--g-gradient-morph-scale));
+	}
+
+	100% {
+		transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) scale(var(--g-gradient-morph-scale-mid));
+	}
+}
+
+@keyframes g-gradient-morph-float {
+	0% {
+		transform: translate(-50%, -50%) scale(1);
+	}
+
+	50% {
+		transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) scale(var(--g-gradient-morph-scale-mid));
+	}
+
+	100% {
+		transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) scale(var(--g-gradient-morph-scale));
+	}
+}
+
+@keyframes g-gradient-morph-orbit {
+	0% {
+		transform: translate(-50%, -50%) rotate(0deg) scale(0.96);
+	}
+
+	50% {
+		transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) rotate(var(--g-gradient-morph-rotate-mid)) scale(var(--g-gradient-morph-scale-mid));
+	}
+
+	100% {
+		transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) rotate(var(--g-gradient-morph-rotate-to)) scale(var(--g-gradient-morph-scale));
+	}
+}`;
+}, toGradientMorphMarkup = (model, options = {}) => {
+  const id = options.id ?? "g-gradient-morph", width = options.width ?? 360, height = options.height ?? 240, rx = options.rx ?? 24, filterId = `${id}-filter`, filter = toGradientMorphFilter({ ...options, id: filterId }), blobs = createGradientMorphBlobs(model, options), { blendMode, opacity } = getMorphOptions(options);
+  return `<svg xmlns="${SVG_NAMESPACE$1}" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" role="img">
+  <defs>
+    <clipPath id="${id}-clip">
+      <rect width="${width}" height="${height}" rx="${rx}" />
+    </clipPath>
+  </defs>
+  <foreignObject width="${width}" height="${height}" clip-path="url(#${id}-clip)">
+    <div xmlns="${XHTML_NAMESPACE$1}" class="g-gradient-material">
+      ${toGradientMorphFilterMarkup({ ...options, id: `${id}-filter` })}
+      <style>
+.g-gradient-material {
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	width: ${width}px;
+	height: ${height}px;
+	border-radius: ${rx}px;
+}
+
+.g-gradient-material__surface {
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	width: 100%;
+	height: 100%;
+	border-radius: ${rx}px;
+	background: ${escapeAttribute$1(toCssGradient(model))};
+}
+
+.g-gradient-material__morph {
+	--g-gradient-material-morph-bleed: 18%;
+	position: absolute;
+	z-index: 1;
+	inset: calc(-1 * var(--g-gradient-material-morph-bleed));
+	width: calc(100% + 2 * var(--g-gradient-material-morph-bleed));
+	height: calc(100% + 2 * var(--g-gradient-material-morph-bleed));
+	opacity: ${opacity};
+	filter: ${filter};
+	mix-blend-mode: ${blendMode};
+}
+
+.g-gradient-material__morph-blob {
+	position: absolute;
+	transform-origin: var(--g-gradient-morph-origin-x) var(--g-gradient-morph-origin-y);
+	transform: translate(-50%, -50%);
+	aspect-ratio: 1;
+	border-radius: 999px;
+	opacity: var(--g-gradient-morph-opacity);
+	background: radial-gradient(circle, var(--g-gradient-morph-blob-color) 0%, transparent 72%);
+	filter: blur(var(--g-gradient-morph-blur));
+	animation: var(--g-gradient-morph-animation) var(--g-gradient-morph-duration, 9000ms) ease-in-out infinite alternate;
+}
+
+${blobs.map(
+    (blob, index2) => `.g-gradient-material__morph-blob:nth-child(${index2 + 1}) {
+	left: ${blob.x}%;
+	top: ${blob.y}%;
+	width: ${blob.size}%;
+	--g-gradient-morph-blob-color: ${blob.color};
+	--g-gradient-morph-x: ${blob.dx}%;
+	--g-gradient-morph-x2: ${blob.dx2}%;
+	--g-gradient-morph-y: ${blob.dy}%;
+	--g-gradient-morph-y2: ${blob.dy2}%;
+	--g-gradient-morph-origin-x: ${blob.originX};
+	--g-gradient-morph-origin-y: ${blob.originY};
+	--g-gradient-morph-animation: ${blob.animationName};
+	--g-gradient-morph-blur: ${blob.blur}px;
+	--g-gradient-morph-opacity: ${blob.opacity};
+	--g-gradient-morph-rotate-mid: ${blob.rotateMid}deg;
+	--g-gradient-morph-rotate-to: ${blob.rotateTo}deg;
+	--g-gradient-morph-scale-mid: ${blob.scaleMid};
+	--g-gradient-morph-scale: ${blob.scaleTo};
+	--g-gradient-morph-delay: ${blob.delay}ms;
+	animation-delay: var(--g-gradient-morph-delay);
+	animation-duration: ${toCssDuration(blob.duration)};
+}`
+  ).join(`
+
+`)}
+
+@keyframes g-gradient-morph-drift {
+	0% { transform: translate(-50%, -50%) scale(0.92); }
+	42% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) scale(var(--g-gradient-morph-scale)); }
+	100% { transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) scale(var(--g-gradient-morph-scale-mid)); }
+}
+
+@keyframes g-gradient-morph-float {
+	0% { transform: translate(-50%, -50%) scale(1); }
+	50% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) scale(var(--g-gradient-morph-scale-mid)); }
+	100% { transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) scale(var(--g-gradient-morph-scale)); }
+}
+
+@keyframes g-gradient-morph-orbit {
+	0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); }
+	50% { transform: translate(calc(-50% + var(--g-gradient-morph-x)), calc(-50% + var(--g-gradient-morph-y))) rotate(var(--g-gradient-morph-rotate-mid)) scale(var(--g-gradient-morph-scale-mid)); }
+	100% { transform: translate(calc(-50% + var(--g-gradient-morph-x2)), calc(-50% + var(--g-gradient-morph-y2))) rotate(var(--g-gradient-morph-rotate-to)) scale(var(--g-gradient-morph-scale)); }
+}
+      </style>
+      <span class="g-gradient-material__surface">
+        <span class="g-gradient-material__morph">
+          ${blobs.map(() => '<span class="g-gradient-material__morph-blob"></span>').join(`
+          `)}
+        </span>
+      </span>
+    </div>
+  </foreignObject>
+</svg>`;
+}, getShadowStops = (model, layers) => {
+  const saturatedStops = model.stops.filter(
+    (stop) => stop.position >= 25 && stop.position <= 85
+  ), fallbackStops = model.stops.filter(
+    (stop) => !saturatedStops.includes(stop)
+  );
+  return [...saturatedStops, ...fallbackStops].sort(
+    (first, second) => Math.abs(first.position - 50) - Math.abs(second.position - 50)
+  ).slice(0, layers);
+}, getDropShadowLayerOpacity = (opacity, index2) => opacity * ([1, 0.54, 0.3, 0.18][index2] ?? 0.12), scaleSimpleCssLength = (value, factor) => {
+  const match = String(value).match(/^(-?\d*\.?\d+)(.*)$/);
+  return match ? `${Math.round(Number(match[1]) * factor * 1e3) / 1e3}${match[2] || "px"}` : null;
+}, getDistributedOffset = (value, layers, index2) => scaleSimpleCssLength(value, 1 / layers) ?? (index2 === 0 ? toCssLength(value) : "0px"), getDistributedBlur = (value, layers) => scaleSimpleCssLength(value, 1 / Math.sqrt(layers)) ?? toCssLength(value), toGradientBoxShadow = (model, options = {}) => {
+  var _a;
+  const x = options.x ?? 0, y = options.y ?? 6, blur = options.blur ?? 14, spread = options.spread ?? -3, opacity = options.opacity ?? 0.24, layers = Math.max(1, Math.round(options.layers ?? 2)), dominantColor = ((_a = getShadowStops(model, 1)[0]) == null ? void 0 : _a.color) ?? "#000000", ambientShadow = `${toCssLength(x)} ${toCssLength(y)} ${toCssLength(blur)} ${toCssLength(spread)} ${toCssColor(dominantColor, opacity)}`;
+  if (layers === 1) return ambientShadow;
+  const contactX = scaleSimpleCssLength(x, 0.35) ?? "0px", contactY = scaleSimpleCssLength(y, 0.35) ?? "2px", contactBlur = scaleSimpleCssLength(blur, 0.3) ?? "4px", contactSpread = scaleSimpleCssLength(spread, 0.5) ?? "-2px", contactOpacity = Math.min(0.18, opacity * 0.65);
+  return `${`${contactX} ${contactY} ${contactBlur} ${contactSpread} ${toCssColor("#000000", contactOpacity)}`}, ${ambientShadow}`;
+}, toGradientDropShadow = (model, options = {}) => {
+  const x = options.x ?? 0, y = options.y ?? 6, blur = options.blur ?? 14, opacity = options.opacity ?? 0.42, layers = Math.max(1, Math.round(options.layers ?? 2)), distributedBlur = getDistributedBlur(blur, layers);
+  return getShadowStops(model, layers).map((stop, index2) => {
+    const distributedX = getDistributedOffset(x, layers, index2), distributedY = getDistributedOffset(y, layers, index2);
+    return `drop-shadow(${distributedX} ${distributedY} ${distributedBlur} ${toCssColor(stop.color, getDropShadowLayerOpacity(opacity, index2))})`;
+  }).join(" ");
+}, index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  createGradientMorphBlobs,
+  isGradientMorphBlendMode,
+  resolveGradientMorphBlendMode,
+  toGradientBoxShadow,
+  toGradientDropShadow,
+  toGradientMorphCSS,
+  toGradientMorphFilter,
+  toGradientMorphFilterMarkup,
+  toGradientMorphMarkup
+}, Symbol.toStringTag, { value: "Module" })), toCanvasGradient = (context, model, options = {}) => {
+  const width = options.width ?? context.canvas.width, height = options.height ?? context.canvas.height, centerX = width / 2, centerY = height / 2, maxRadius = Math.hypot(width, height) / 2, radians = ((typeof model.direction == "number" ? model.direction : Number.parseFloat(model.direction) || DEFAULT_GRADIENT_DIRECTION) - 90) * Math.PI / 180, halfWidth = width / 2, halfHeight = height / 2, xOffset = Math.cos(radians) * halfWidth, yOffset = Math.sin(radians) * halfHeight, gradient = model.type === "radial" ? context.createRadialGradient(
+    options.x0 ?? centerX,
+    options.y0 ?? centerY,
+    options.r0 ?? 0,
+    options.x1 ?? centerX,
+    options.y1 ?? centerY,
+    options.r1 ?? maxRadius
+  ) : model.type === "conic" && typeof context.createConicGradient == "function" ? context.createConicGradient(
+    options.startAngle ?? radians,
+    options.x0 ?? centerX,
+    options.y0 ?? centerY
+  ) : context.createLinearGradient(
+    options.x0 ?? centerX - xOffset,
+    options.y0 ?? centerY - yOffset,
+    options.x1 ?? centerX + xOffset,
+    options.y1 ?? centerY + yOffset
+  ), stops = model.type === "conic" ? getConicStops(model.stops) : model.stops;
+  for (const stop of stops)
+    gradient.addColorStop(
+      stop.position / 100,
+      toCssColor(stop.color, stop.opacity)
+    );
+  return gradient;
+}, SVG_NAMESPACE = "http://www.w3.org/2000/svg", XHTML_NAMESPACE = "http://www.w3.org/1999/xhtml", escapeAttribute = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), formatSvgStop = (stop) => {
+  const opacity = stop.opacity === void 0 ? "" : ` stop-opacity="${clamp(stop.opacity)}"`;
+  return `<stop offset="${stop.position}%" stop-color="${stop.color}"${opacity} />`;
+}, getPathStroke = (model, options) => {
+  var _a, _b, _c;
+  return {
+    active: options.activeStroke ?? ((_a = model.stops[Math.max(0, Math.floor(model.stops.length / 2))]) == null ? void 0 : _a.color) ?? ((_b = model.stops[0]) == null ? void 0 : _b.color) ?? "currentColor",
+    background: options.backgroundStroke ?? ((_c = model.stops[0]) == null ? void 0 : _c.color) ?? options.activeStroke ?? "currentColor"
+  };
+}, getSvgViewBox = (svg, options) => {
+  var _a;
+  const viewBox = (_a = svg.match(/\bviewBox=(["'])(.*?)\1/i)) == null ? void 0 : _a[2];
+  if (viewBox) return viewBox;
+  const width = options.width ?? 240, height = options.height ?? 120;
+  return `0 0 ${width} ${height}`;
+}, getSvgBody = (svg) => {
+  var _a;
+  return ((_a = svg.replace(/<\?xml[\s\S]*?\?>/gi, "").replace(/<!doctype[\s\S]*?>/gi, "").match(/<svg\b[^>]*>([\s\S]*?)<\/svg>/i)) == null ? void 0 : _a[1].trim()) ?? svg;
+}, splitAbsoluteSubpaths = (path) => {
+  const subpaths = path.trim().split(/(?=M\s*[-+.\d])/).map((subpath) => subpath.trim()).filter(Boolean);
+  return subpaths.length > 1 ? subpaths : [path];
+}, getSvgPathData = (svg) => [...svg.matchAll(/<path\b[^>]*\sd=(["'])([\s\S]*?)\1/gi)].flatMap(
+  (match) => splitAbsoluteSubpaths(match[2])
+), getPathComplexity = (path) => {
+  var _a;
+  return Math.max(1, ((_a = path.match(/[LlHhVvCcSsQqTtAaZz]/g)) == null ? void 0 : _a.length) ?? 0);
+}, getSourcePathFillTime = (path, maxComplexity) => {
+  const fillTime = 0.5 + (1 - getPathComplexity(path) / maxComplexity) * 0.22;
+  return Math.round(fillTime * 1e3) / 1e3;
+}, getViewBoxMetrics = (viewBox) => {
+  const [x = "0", y = "0", width = "240", height = "120"] = viewBox.trim().split(/[\s,]+/);
+  return {
+    height: Number(height) || 120,
+    width: Number(width) || 240,
+    x: Number(x) || 0,
+    y: Number(y) || 0
+  };
+}, getPaddedViewBox = (viewBox, strokeWidth, options) => {
+  if (options.viewBoxPadding === !1) return viewBox;
+  const metrics = getViewBoxMetrics(viewBox), fallbackPadding = Math.max(
+    strokeWidth * 2,
+    Math.min(metrics.width, metrics.height) * 0.02
+  ), padding = options.viewBoxPadding ?? fallbackPadding;
+  return [
+    metrics.x - padding,
+    metrics.y - padding,
+    metrics.width + padding * 2,
+    metrics.height + padding * 2
+  ].join(" ");
+}, getViewBoxSize = (viewBox) => {
+  const { height, width } = getViewBoxMetrics(viewBox);
+  return {
+    height: Number(height) || 120,
+    width: Number(width) || 240
+  };
+}, getNormalizedStrokeWidth = (strokeWidth, viewBox, options) => {
+  if (options.normalizeStrokeWidth === !1) return strokeWidth;
+  const { height, width } = getViewBoxSize(viewBox), base = options.strokeWidthBase ?? 180;
+  return strokeWidth * (Math.min(width, height) / base);
+}, toSvgGradient = (model, options = {}) => {
+  const id = options.id ?? "g-gradient", stops = model.stops.map(formatSvgStop).join("");
+  return model.type === "radial" ? `<radialGradient id="${id}" cx="${options.cx ?? "50%"}" cy="${options.cy ?? "50%"}" r="${options.r ?? "75%"}">${stops}</radialGradient>` : model.type === "conic" ? `<pattern id="${id}" patternUnits="objectBoundingBox" width="1" height="1"><foreignObject x="0" y="0" width="100%" height="100%"><div xmlns="${XHTML_NAMESPACE}" style="width:100%;height:100%;background:${escapeAttribute(toCssGradient(model))};"></div></foreignObject></pattern>` : `<linearGradient id="${id}" x1="${options.x1 ?? "0%"}" y1="${options.y1 ?? "0%"}" x2="${options.x2 ?? "100%"}" y2="${options.y2 ?? "100%"}">${stops}</linearGradient>`;
+}, toSvgGradientMarkup = (model, options = {}) => {
+  const id = options.id ?? "g-gradient", width = options.width ?? 240, height = options.height ?? 120, rx = options.rx ?? 18;
+  return `<svg xmlns="${SVG_NAMESPACE}" viewBox="0 0 ${width} ${height}" role="img">
+  <defs>
+    ${toSvgGradient(model, options)}
+  </defs>
+  <rect width="${width}" height="${height}" rx="${rx}" fill="url(#${id})" />
+</svg>`;
+}, toSvgSourceAnimationMarkup = (sourceSvg, model, options = {}) => {
+  const gradientId = `${options.id ?? "g-gradient-source"}-stroke`, sourceViewBox = getSvgViewBox(sourceSvg, options), body = getSvgBody(sourceSvg), paths = getSvgPathData(sourceSvg), strokeWidth = getNormalizedStrokeWidth(
+    options.strokeWidth ?? 1.4,
+    sourceViewBox,
+    options
+  ), viewBox = getPaddedViewBox(sourceViewBox, strokeWidth, options), { width, x } = getViewBoxMetrics(viewBox), linecap = options.linecap ?? "round", duration = toCssDuration(options.duration ?? 3600), repeatCount = options.repeatCount ?? "indefinite", sourceOpacity = options.sourceOpacity ?? 0.22, stops = model.stops.map(formatSvgStop).join(""), maxPathComplexity = Math.max(...paths.map(getPathComplexity));
+  return `<svg xmlns="${SVG_NAMESPACE}" viewBox="${escapeAttribute(viewBox)}" role="img">
+  <defs>
+    <linearGradient id="${gradientId}" gradientUnits="userSpaceOnUse" x1="${x}" y1="0" x2="${x + width}" y2="0">
+      ${stops}
+    </linearGradient>
+  </defs>
+  <g opacity="${clamp(sourceOpacity)}">
+    ${body}
+  </g>
+  <g fill="none" stroke="url(#${gradientId})" stroke-width="${strokeWidth}" stroke-linecap="${linecap}" stroke-linejoin="round">
+    ${paths.map((path) => {
+    const fillTime = getSourcePathFillTime(path, maxPathComplexity);
+    return `<path d="${escapeAttribute(path)}" pathLength="100" stroke-dasharray="0 100" stroke-dashoffset="0">
+      <animate attributeName="stroke-dasharray" values="0 100;100 100;0 100" keyTimes="0;${fillTime};1" dur="${duration}" repeatCount="${repeatCount}" calcMode="linear" />
+      <animate attributeName="stroke-dashoffset" values="0;0;-100" keyTimes="0;${fillTime};1" dur="${duration}" repeatCount="${repeatCount}" calcMode="linear" />
+    </path>`;
+  }).join(`
+    `)}
+  </g>
+</svg>`;
+}, toSvgPathAnimationMarkup = (model, options = {}) => {
+  const gradientId = `${options.id ?? "g-gradient-path"}-stroke`, width = options.width ?? 240, height = options.height ?? 120, path = options.path ?? `M 20 ${height * 0.64} C ${width * 0.28} ${height * 0.18}, ${width * 0.58} ${height * 0.18}, ${width - 20} ${height * 0.64}`, strokeWidth = options.strokeWidth ?? 12, linecap = options.linecap ?? "round", duration = toCssDuration(options.duration ?? 2800), repeatCount = options.repeatCount ?? "indefinite", opacity = options.backgroundOpacity ?? 0.24, stroke = getPathStroke(model, options), stops = model.stops.map(formatSvgStop).join("");
+  return `<svg xmlns="${SVG_NAMESPACE}" viewBox="0 0 ${width} ${height}" role="img">
+  <defs>
+    <linearGradient id="${gradientId}" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="${width}" y2="0">
+      ${stops}
+    </linearGradient>
+  </defs>
+  <path d="${escapeAttribute(path)}" fill="none" stroke="${stroke.background}" stroke-width="${strokeWidth}" stroke-linecap="${linecap}" opacity="${opacity}" />
+  <path d="${escapeAttribute(path)}" fill="none" stroke="${options.activeStroke ? stroke.active : `url(#${gradientId})`}" stroke-width="${strokeWidth}" stroke-linecap="${linecap}" pathLength="100" stroke-dasharray="100 100" stroke-dashoffset="100">
+    <animate attributeName="stroke-dashoffset" values="100;0;-100" dur="${duration}" repeatCount="${repeatCount}" />
+  </path>
+</svg>`;
+}, index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  createLinearGradient,
+  toCanvasGradient,
+  toCssGradient,
+  toSvgGradient,
+  toSvgGradientMarkup,
+  toSvgPathAnimationMarkup,
+  toSvgSourceAnimationMarkup
+}, Symbol.toStringTag, { value: "Module" })), DEFAULT_TOKEN_RECIPES = ["glare", "soft", "mesh"], DEFAULT_MATERIAL_CACHE_LIMIT = 128;
+let materialCacheLimit = DEFAULT_MATERIAL_CACHE_LIMIT;
+const materialCache = /* @__PURE__ */ new Map(), toKebabCase = (value) => value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`), toTokenName = (recipe) => toKebabCase(recipe), toCssVar = (prefix, name, suffix) => `${prefix}-${name}`, toCssText = (cssVars) => Object.entries(cssVars).map(([name, value]) => `${name}: ${value};`).join(`
+`), toCssProperty = (value) => value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`), toCssDeclarations = (styles) => Object.entries(styles).map(([name, value]) => `${toCssProperty(name)}: ${value};`).join(`
+`), stableSerialize = (value) => value === null || typeof value != "object" ? JSON.stringify(value) : Array.isArray(value) ? `[${value.map(stableSerialize).join(",")}]` : `{${Object.entries(value).filter(([, entryValue]) => entryValue !== void 0).sort(([firstKey], [secondKey]) => firstKey.localeCompare(secondKey)).map(
+  ([key, entryValue]) => `${JSON.stringify(key)}:${stableSerialize(entryValue)}`
+).join(",")}}`, hashString = (value) => {
+  let hash = 5381;
+  for (let index2 = 0; index2 < value.length; index2 += 1)
+    hash = hash * 33 ^ value.charCodeAt(index2);
+  return (hash >>> 0).toString(36);
+}, getMaterialCacheKey = (seed, options) => stableSerialize({ options, seed }), getCachedMaterial = (key) => {
+  const cachedMaterial = materialCache.get(key);
+  if (cachedMaterial)
+    return materialCache.delete(key), materialCache.set(key, cachedMaterial), cachedMaterial;
+}, setCachedMaterial = (key, material2) => {
+  if (materialCacheLimit <= 0) return material2;
+  for (materialCache.set(key, material2); materialCache.size > materialCacheLimit; ) {
+    const oldestKey = materialCache.keys().next().value;
+    if (oldestKey === void 0) break;
+    materialCache.delete(oldestKey);
+  }
+  return material2;
+}, clearGradientMaterialCache = () => {
+  materialCache.clear();
+}, setGradientMaterialCacheLimit = (limit) => {
+  for (materialCacheLimit = Math.max(0, Math.floor(limit)); materialCache.size > materialCacheLimit; ) {
+    const oldestKey = materialCache.keys().next().value;
+    if (oldestKey === void 0) break;
+    materialCache.delete(oldestKey);
+  }
+}, getGradientMaterialCacheStats = () => ({
+  limit: materialCacheLimit,
+  size: materialCache.size
+}), toScopedCssText = (className, cssVars, style, keyframes) => {
+  const vars = toCssText(cssVars), styles = toCssDeclarations(style), body = [vars, styles].filter(Boolean).join(`
+`);
+  return [`.${className} {
+${body}
+}`, keyframes].filter(Boolean).join(`
+
+`);
+}, isGradientPresetName = (value, registry) => value in registry, resolveTokenPreset = (recipe, registry) => isGradientPresetName(recipe, registry) ? getGradientPreset(recipe, registry) : recipe === "soft" ? {
+  label: "Soft",
+  description: "Quiet monochrome radial gradient.",
+  gradient: {
+    recipe: "monochrome",
+    type: "radial",
+    position: "center",
+    shape: "ellipse"
+  },
+  shadow: {
+    layers: 2,
+    opacity: 0.18,
+    blur: 18,
+    y: 7,
+    spread: -4
+  },
+  dropShadow: {
+    layers: 2,
+    opacity: 0.26,
+    blur: 16,
+    y: 6
+  },
+  animation: {
+    preset: "pulse",
+    duration: 7200,
+    easing: "ease-in-out"
+  }
+} : recipe === "mesh" ? null : {
+  label: recipe,
+  gradient: {
+    recipe,
+    type: "linear",
+    direction: recipe === "glare" ? 135 : 145
+  }
+}, createMeshGradient = (seed) => {
+  const layers = [
+    `radial-gradient(circle at 16% 18%, ${shiftHue(seed, -42, 72, 1.05)} 0%, transparent 34%)`,
+    `radial-gradient(circle at 86% 20%, ${getComplementaryColor(seed)} 0%, transparent 32%)`,
+    `radial-gradient(circle at 50% 84%, ${shiftHue(seed, 56, 64, 1.08)} 0%, transparent 38%)`,
+    `linear-gradient(135deg, ${changeTone(seed, 94)}, ${changeTone(seed, 28)})`
+  ];
+  return {
+    layers,
+    value: layers.join(", ")
+  };
+}, createTokenGradientEntry = (seed, recipe, cssVar, options, registry) => {
+  if (recipe === "mesh") {
+    const mesh = createMeshGradient(seed);
+    return {
+      cssVar,
+      layers: mesh.layers,
+      value: mesh.value
+    };
+  }
+  const preset = resolveTokenPreset(recipe, registry), palette = createPalette(seed), model = createGradientModel(palette, {
+    ...preset == null ? void 0 : preset.gradient,
+    ...options
+  });
+  return {
+    cssVar,
+    model,
+    stops: model.stops,
+    svg: toSvgGradient(model, { id: cssVar.replace(/^--/, "") }),
+    value: toCssGradient(model)
+  };
+}, createTokenEffectEntry = (model, cssVarName, preset, options) => {
+  var _a, _b;
+  if (!model) return {};
+  const morphId = `${cssVarName.replace(/^--/, "")}-morph`, morphBlendMode = resolveGradientMorphBlendMode(
+    (_a = options == null ? void 0 : options.morph) == null ? void 0 : _a.blendMode
+  ), morphOptions = {
+    ...options == null ? void 0 : options.morph,
+    id: ((_b = options == null ? void 0 : options.morph) == null ? void 0 : _b.id) ?? morphId
+  };
+  return {
+    boxShadow: {
+      cssVar: `${cssVarName}-shadow`,
+      value: toGradientBoxShadow(model, (options == null ? void 0 : options.shadow) ?? (preset == null ? void 0 : preset.shadow))
+    },
+    dropShadow: {
+      cssVar: `${cssVarName}-drop-shadow`,
+      value: toGradientDropShadow(
+        model,
+        (options == null ? void 0 : options.dropShadow) ?? (preset == null ? void 0 : preset.dropShadow)
+      )
+    },
+    morph: {
+      blendMode: morphBlendMode,
+      blendModeCssVar: `${cssVarName}-morph-blend-mode`,
+      cssVar: `${cssVarName}-morph`,
+      svg: toGradientMorphFilterMarkup(morphOptions),
+      value: toGradientMorphFilter(morphOptions)
+    }
+  };
+}, createTokenAnimationEntry = (name, cssVarName, preset, options) => {
+  var _a;
+  const animationOptions = {
+    ...preset == null ? void 0 : preset.animation,
+    ...options,
+    name: `g-gradient-${name}-${(options == null ? void 0 : options.preset) ?? ((_a = preset == null ? void 0 : preset.animation) == null ? void 0 : _a.preset) ?? "shift"}`,
+    selector: `.g-gradient-${name}`
+  };
+  return {
+    css: toGradientAnimationCSS(animationOptions),
+    cssVar: `${cssVarName}-animation`,
+    keyframes: toGradientAnimationKeyframes(animationOptions),
+    name: animationOptions.name,
+    value: toGradientAnimationValue(animationOptions)
+  };
+}, createGradientPreset = (seed, recipe = "glare", options = {}) => {
+  const registry = options.registry ?? gradientPresets, name = toTokenName(recipe), cssVarName = toCssVar(options.prefix ?? "--g-gradient", name), preset = resolveTokenPreset(recipe, registry), seedColor = createPalette(seed)[500], gradient = createTokenGradientEntry(
+    seedColor,
+    recipe,
+    cssVarName,
+    options,
+    registry
+  ), cssVars = {
+    [cssVarName]: gradient.value
+  }, effects = options.effects ? createTokenEffectEntry(gradient.model, cssVarName, preset, {
+    dropShadow: options.dropShadow,
+    morph: options.morph,
+    shadow: options.shadow
+  }) : void 0, animation = options.animations ? createTokenAnimationEntry(name, cssVarName, preset, options.animation) : void 0;
+  return effects != null && effects.boxShadow && (cssVars[effects.boxShadow.cssVar] = effects.boxShadow.value), effects != null && effects.dropShadow && (cssVars[effects.dropShadow.cssVar] = effects.dropShadow.value), effects != null && effects.morph && (cssVars[effects.morph.cssVar] = effects.morph.value, cssVars[effects.morph.blendModeCssVar] = effects.morph.blendMode), animation && (cssVars[animation.cssVar] = animation.value), {
+    animation,
+    cssText: toCssText(cssVars),
+    cssVars,
+    description: preset == null ? void 0 : preset.description,
+    effects,
+    gradient,
+    keyframes: (animation == null ? void 0 : animation.keyframes) ?? "",
+    label: (preset == null ? void 0 : preset.label) ?? name,
+    name
+  };
+}, createGradientTokens = (seed, options = {}) => {
+  const recipes = options.recipes ?? DEFAULT_TOKEN_RECIPES, gradients = {}, effects = {}, animations = {}, cssVars = {}, keyframes = [];
+  for (const recipe of recipes) {
+    const preset = createGradientPreset(seed, recipe, {
+      animations: options.animations,
+      effects: options.effects,
+      morph: options.morph,
+      prefix: options.prefix,
+      registry: options.registry
+    });
+    gradients[preset.name] = preset.gradient, Object.assign(cssVars, preset.cssVars), preset.effects && (effects[preset.name] = preset.effects), preset.animation && (animations[preset.name] = preset.animation, keyframes.push(preset.animation.keyframes));
+  }
+  return {
+    animations,
+    cssText: toCssText(cssVars),
+    cssVars,
+    effects,
+    gradients,
+    keyframes: keyframes.join(`
+`)
+  };
+}, createGradientMaterial = (seed, options = {}) => {
+  var _a, _b;
+  const cacheKey = getMaterialCacheKey(seed, options), cachedMaterial = getCachedMaterial(cacheKey);
+  if (cachedMaterial) return cachedMaterial;
+  const { className, id, recipe = "glare", ...presetOptions } = options, preset = createGradientPreset(seed, recipe, presetOptions), morphBlobs = preset.gradient.model && options.effects && options.morph ? createGradientMorphBlobs(preset.gradient.model, options.morph) : void 0, stableId = id ?? `g-gradient-${preset.name}-${hashString(
+    stableSerialize({ options, seed })
+  )}`, stableClassName = className ?? stableId, style = {
+    backgroundImage: `var(${preset.gradient.cssVar})`
+  };
+  return (_a = preset.effects) != null && _a.boxShadow && (style.boxShadow = `var(${preset.effects.boxShadow.cssVar})`), (_b = preset.effects) != null && _b.dropShadow && (style.filter = `var(${preset.effects.dropShadow.cssVar})`), preset.animation && (style.animation = `var(${preset.animation.cssVar})`), setCachedMaterial(cacheKey, {
+    animation: preset.animation,
+    className: stableClassName,
+    cssText: toScopedCssText(
+      stableClassName,
+      preset.cssVars,
+      style,
+      preset.keyframes
+    ),
+    cssVars: preset.cssVars,
+    effects: preset.effects,
+    gradient: preset.gradient,
+    id: stableId,
+    keyframes: preset.keyframes,
+    morphBlobs,
+    preset,
+    style
+  });
+}, material = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  clearGradientMaterialCache,
+  createGradientMaterial,
+  createGradientPreset,
+  createGradientTokens,
+  getGradientMaterialCacheStats,
+  setGradientMaterialCacheLimit
+}, Symbol.toStringTag, { value: "Module" })), toChannels$1 = (color) => {
+  const parsed = parseColor$1(color);
+  if (!parsed)
+    throw new Error(`Unsupported generated color: ${String(color)}`);
+  return rgbToChannels$1(parsed);
+}, capitalize = (value) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`, getOnTokenName = (name) => `on${capitalize(name)}`, kebabToCamelCase = (value) => value.replace(
+  /-([a-z0-9])/g,
+  (_, character) => character.toUpperCase()
+), addPaletteTokens = (colors, gradients, name, palettePair) => {
+  const { colors: palette, onColors } = palettePair;
+  for (const shade of COLOR_SHADES$1) {
+    const color = palette[shade];
+    colors[`${name}${shade}`] = toChannels$1(color), colors[`${getOnTokenName(name)}${shade}`] = toChannels$1(onColors[shade]), gradients[`${name}${shade}`] = createGradient$1(palette, { shade });
+  }
+  colors[name] = colors[`${name}500`], colors[getOnTokenName(name)] = colors[`${getOnTokenName(name)}500`], gradients[name] = gradients[`${name}500`];
+}, isColorDefinition = (value) => typeof value == "object" && value !== null && "color" in value, normalizeColorDefinition = (value) => isColorDefinition(value) ? value : { color: value }, addSingleColorTokens = (colors, gradients, name, definition) => {
+  colors[name] = toChannels$1(definition.color), colors[getOnTokenName(name)] = toChannels$1(
+    definition.onColor ?? getContrastingColor(definition.color)
+  ), definition.gradient !== !1 && (gradients[name] = definition.gradient ?? createGradientFromColor$1(definition.color));
+}, addCustomColorTokens = (colors, gradients, palettes, name, value) => {
+  const normalizedName = kebabToCamelCase(camelToKebabCase(name)), definition = normalizeColorDefinition(value);
+  if (definition.palette === !1) {
+    addSingleColorTokens(colors, gradients, normalizedName, definition);
+    return;
+  }
+  const palettePair = createPalettePair(definition.color);
+  palettes[normalizedName] = palettePair, addPaletteTokens(colors, gradients, normalizedName, palettePair), definition.onColor && (colors[getOnTokenName(normalizedName)] = toChannels$1(definition.onColor)), definition.gradient && (gradients[normalizedName] = definition.gradient);
+}, createColorSystem = (seed, options = {}) => {
+  const colors = {}, gradients = {}, palettes = {
+    source: createPalettePair(seed)
+  };
+  for (const [name, colorSeed] of Object.entries(COLOR_SEEDS))
+    palettes[name] = createPalettePair(colorSeed);
+  for (const [name, palettePair] of Object.entries(palettes))
+    addPaletteTokens(colors, gradients, name, palettePair);
+  for (const [name, value] of Object.entries(options.colors ?? {}))
+    addCustomColorTokens(colors, gradients, palettes, name, value);
+  return gradients.main = createGradient$1(palettes.source.colors), gradients.error = createGradient$1(palettes.red.colors, { shade: 600 }), gradients.warning = createGradient$1(palettes.amber.colors, { shade: 600 }), gradients.success = createGradient$1(palettes.green.colors, { shade: 600 }), {
+    colors,
+    gradients,
+    palettes
+  };
+}, toChannels = (color) => {
+  const parsed = parseColor$1(color);
+  if (!parsed)
+    throw new Error(`Unsupported generated color: ${String(color)}`);
+  return rgbToChannels$1(parsed);
+}, schemeToTokens = (seed, mode) => {
+  const scheme = themeFromSourceColor(argbFromHex(seed)).schemes[mode].toJSON();
+  return Object.fromEntries(
+    Object.entries(scheme).map(([name, argb]) => [
+      name,
+      toChannels(hexFromArgb(argb))
+    ])
+  );
+}, createSemanticTokens = (seed, mode) => {
+  const tokens = schemeToTokens(seed, mode), warning = schemeToTokens(COLOR_SEEDS.amber, mode), success = schemeToTokens(COLOR_SEEDS.green, mode);
+  return {
+    ...tokens,
+    warning: warning.primary,
+    onWarning: warning.onPrimary,
+    warningContainer: warning.primaryContainer,
+    onWarningContainer: warning.onPrimaryContainer,
+    success: success.primary,
+    onSuccess: success.onPrimary,
+    successContainer: success.primaryContainer,
+    onSuccessContainer: success.onPrimaryContainer
+  };
+};
+export {
+  createSemanticTokens as a,
+  core as b,
+  createColorSystem as c,
+  index$1 as d,
+  index as e,
+  index$2 as i,
+  material as m
+};