material-theme-builder 2.1.1 → 2.2.0

package/dist/index.js

@@ -1,17 +1,11 @@
-"use client";
-
 // src/lib/builder.ts
 import {
-  argbFromHex,
+  argbFromHex as argbFromHex2,
   Blend,
-  blueFromArgb,
   DynamicColor,
-  DynamicScheme,
-  greenFromArgb,
-  Hct,
-  hexFromArgb,
-  MaterialDynamicColors,
-  redFromArgb,
+  DynamicScheme as DynamicScheme2,
+  Hct as Hct2,
+  MaterialDynamicColors as MaterialDynamicColors2,
   SchemeContent,
   SchemeExpressive,
   SchemeFidelity,
@@ -19,9 +13,682 @@ import {
   SchemeNeutral,
   SchemeTonalSpot,
   SchemeVibrant,
+  TonalPalette as TonalPalette2
+} from "@material/material-color-utilities";
+import { kebabCase as kebabCase4, upperFirst as upperFirst2 } from "lodash-es";
+
+// src/lib/builder.css.ts
+import {
+  hexFromArgb
+} from "@material/material-color-utilities";
+import { kebabCase } from "lodash-es";
+function buildCss(ctx) {
+  const {
+    prefix,
+    allPalettes,
+    mergedColorsLight,
+    mergedColorsDark,
+    tokenToPalette,
+    allPaletteNamesKebab
+  } = ctx;
+  function buildRefPaletteLookup() {
+    const lookup = {};
+    for (const [name, palette] of Object.entries(allPalettes)) {
+      const paletteName = kebabCase(name);
+      for (const tone of STANDARD_TONES) {
+        const hex = hexFromArgb(palette.tone(tone));
+        if (!lookup[hex]) lookup[hex] = [];
+        lookup[hex].push({ paletteName, tone });
+      }
+    }
+    return lookup;
+  }
+  function sysColorVar(colorName, colorValue, lookup) {
+    const name = `--${prefix}-sys-color-${kebabCase(colorName)}`;
+    const hex = hexFromArgb(colorValue);
+    const matches = lookup[hex];
+    if (matches && matches.length > 0) {
+      const preferred = tokenToPalette[colorName] ?? deriveCustomPaletteName(colorName, allPaletteNamesKebab);
+      const match = (preferred ? matches.find((m) => m.paletteName === preferred) : void 0) ?? matches[0];
+      if (match) {
+        return `${name}:var(--${prefix}-ref-palette-${match.paletteName}-${match.tone});`;
+      }
+    }
+    return `${name}:${hex};`;
+  }
+  function toCssVars(mergedColors, lookup) {
+    return Object.entries(mergedColors).map(([name, value]) => sysColorVar(name, value, lookup)).join(" ");
+  }
+  function refPaletteVar(paletteName, tone, colorValue) {
+    const name = `--${prefix}-ref-palette-${paletteName}-${tone}`;
+    const value = hexFromArgb(colorValue);
+    return `${name}:${value};`;
+  }
+  function generateTonalPaletteVars(paletteName, palette) {
+    return STANDARD_TONES.map((tone) => {
+      const color = palette.tone(tone);
+      return refPaletteVar(paletteName, tone, color);
+    }).join(" ");
+  }
+  function generateTonalVars() {
+    return Object.entries(allPalettes).map(
+      ([name, palette]) => generateTonalPaletteVars(kebabCase(name), palette)
+    ).join(" ");
+  }
+  const refPaletteLookup = buildRefPaletteLookup();
+  const lightVars = toCssVars(mergedColorsLight, refPaletteLookup);
+  const darkVars = toCssVars(mergedColorsDark, refPaletteLookup);
+  const tonalVars = generateTonalVars();
+  return `
+:root { ${lightVars} ${tonalVars} }
+.dark { ${darkVars} ${tonalVars} }
+`;
+}
+
+// src/lib/builder.figma.ts
+import {
+  blueFromArgb,
+  greenFromArgb,
+  hexFromArgb as hexFromArgb2,
+  redFromArgb
+} from "@material/material-color-utilities";
+import { kebabCase as kebabCase2, startCase } from "lodash-es";
+function buildFigmaVariables(ctx) {
+  const {
+    allPalettes,
+    mergedColorsLight,
+    mergedColorsDark,
+    tokenToPalette,
+    allPaletteNamesKebab
+  } = ctx;
+  const variables = [];
+  const paletteHexMap = {};
+  for (const [name, palette] of Object.entries(allPalettes)) {
+    const paletteName = startCase(name);
+    paletteHexMap[paletteName] = {};
+    for (const tone of STANDARD_TONES) {
+      const argb = palette.tone(tone);
+      const path = `ref/palette/${paletteName}/${tone}`;
+      const hex = hexFromArgb2(argb).toUpperCase();
+      paletteHexMap[paletteName][hex] = path;
+      const color = {
+        r: redFromArgb(argb) / 255,
+        g: greenFromArgb(argb) / 255,
+        b: blueFromArgb(argb) / 255,
+        a: 1
+      };
+      variables.push({
+        path,
+        scopes: ["ALL_SCOPES"],
+        values: { Light: color, Dark: color }
+      });
+    }
+  }
+  function findAlias(hex, tokenName) {
+    const preferredKebab = tokenToPalette[tokenName] ?? deriveCustomPaletteName(tokenName, allPaletteNamesKebab);
+    const preferred = preferredKebab ? startCase(preferredKebab) : void 0;
+    if (preferred && paletteHexMap[preferred]?.[hex]) {
+      return paletteHexMap[preferred][hex];
+    }
+    for (const palHexes of Object.values(paletteHexMap)) {
+      if (palHexes[hex]) return palHexes[hex];
+    }
+    return null;
+  }
+  function resolveValue(argb, tokenName) {
+    const hex = hexFromArgb2(argb).toUpperCase();
+    const aliasPath = findAlias(hex, tokenName);
+    if (aliasPath) return { alias: aliasPath };
+    return {
+      r: redFromArgb(argb) / 255,
+      g: greenFromArgb(argb) / 255,
+      b: blueFromArgb(argb) / 255,
+      a: 1
+    };
+  }
+  for (const [name, lightArgb] of Object.entries(mergedColorsLight)) {
+    const darkArgb = mergedColorsDark[name] ?? lightArgb;
+    const description = isTokenName(name) ? tokenDescriptions[name] : void 0;
+    variables.push({
+      path: `sys/color/${startCase(name)}`,
+      ...description ? { description } : {},
+      scopes: ["ALL_SCOPES"],
+      values: {
+        Light: resolveValue(lightArgb, name),
+        Dark: resolveValue(darkArgb, name)
+      }
+    });
+  }
+  return variables;
+}
+function buildFigmaTokens(ctx) {
+  const { prefix } = ctx;
+  const variables = buildFigmaVariables(ctx);
+  function rgbToHex(r, g, b) {
+    const toHex = (c) => Math.round(c * 255).toString(16).padStart(2, "0");
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+  }
+  function toDtcgValue(modeValue) {
+    if ("alias" in modeValue) {
+      return `{${modeValue.alias.replaceAll("/", ".")}}`;
+    }
+    return {
+      colorSpace: "srgb",
+      components: [modeValue.r, modeValue.g, modeValue.b],
+      alpha: modeValue.a,
+      hex: rgbToHex(modeValue.r, modeValue.g, modeValue.b)
+    };
+  }
+  function toDtcgExtensions(v) {
+    if (v.path.startsWith("ref/palette/")) {
+      return {
+        "com.figma.scopes": v.scopes ?? ["ALL_SCOPES"],
+        "com.figma.isOverride": true
+      };
+    }
+    const lastSegment = v.path.split("/").at(-1);
+    if (!lastSegment) return { "com.figma.scopes": v.scopes ?? ["ALL_SCOPES"] };
+    const tokenName = kebabCase2(lastSegment);
+    return {
+      "com.figma.scopes": v.scopes ?? ["ALL_SCOPES"],
+      "css.variable": `--${prefix}-sys-color-${tokenName}`
+    };
+  }
+  function buildToken(v, modeValue) {
+    return {
+      $type: "color",
+      $value: toDtcgValue(modeValue),
+      ...v.description ? { $description: v.description } : {},
+      $extensions: toDtcgExtensions(v)
+    };
+  }
+  function parsePath(path) {
+    const parts = path.split("/");
+    if (parts[0] === "ref" && parts[1] === "palette" && parts[2] && parts[3]) {
+      return {
+        kind: "palette",
+        paletteName: parts[2],
+        tone: parts[3]
+      };
+    }
+    if (parts[0] === "sys" && parts[1] === "color" && parts[2]) {
+      return { kind: "color", tokenName: parts[2] };
+    }
+    return null;
+  }
+  function buildModeFile(modeName) {
+    const palette = {};
+    const color = {};
+    for (const v of variables) {
+      const modeValue = v.values[modeName];
+      if (!modeValue) continue;
+      const parsed = parsePath(v.path);
+      if (!parsed) continue;
+      if (parsed.kind === "palette") {
+        const group = palette[parsed.paletteName] ??= {};
+        group[parsed.tone] = buildToken(v, modeValue);
+      } else {
+        color[parsed.tokenName] = buildToken(v, modeValue);
+      }
+    }
+    return {
+      $extensions: { "com.figma.modeName": modeName },
+      ref: { palette },
+      sys: { color }
+    };
+  }
+  return {
+    "Light.tokens.json": buildModeFile("Light"),
+    "Dark.tokens.json": buildModeFile("Dark")
+  };
+}
+
+// src/lib/builder.flutter.ts
+import { hexFromArgb as hexFromArgb3 } from "@material/material-color-utilities";
+import { upperFirst } from "lodash-es";
+var FLUTTER_PROPERTIES = [
+  "primary",
+  "surfaceTint",
+  "onPrimary",
+  "primaryContainer",
+  "onPrimaryContainer",
+  "secondary",
+  "onSecondary",
+  "secondaryContainer",
+  "onSecondaryContainer",
+  "tertiary",
+  "onTertiary",
+  "tertiaryContainer",
+  "onTertiaryContainer",
+  "error",
+  "onError",
+  "errorContainer",
+  "onErrorContainer",
+  "background",
+  "onBackground",
+  "surface",
+  "onSurface",
+  "surfaceVariant",
+  "onSurfaceVariant",
+  "outline",
+  "outlineVariant",
+  "shadow",
+  "scrim",
+  "inverseSurface",
+  "inverseOnSurface",
+  "inversePrimary",
+  "primaryFixed",
+  "onPrimaryFixed",
+  "primaryFixedDim",
+  "onPrimaryFixedVariant",
+  "secondaryFixed",
+  "onSecondaryFixed",
+  "secondaryFixedDim",
+  "onSecondaryFixedVariant",
+  "tertiaryFixed",
+  "onTertiaryFixed",
+  "tertiaryFixedDim",
+  "onTertiaryFixedVariant",
+  "surfaceDim",
+  "surfaceBright",
+  "surfaceContainerLowest",
+  "surfaceContainerLow",
+  "surfaceContainer",
+  "surfaceContainerHigh",
+  "surfaceContainerHighest"
+];
+var TOKEN_TO_FLUTTER = {
+  inverseOnSurface: "onInverseSurface"
+};
+function toFlutterColor(argb) {
+  const hex = hexFromArgb3(argb).replace("#", "").toUpperCase();
+  return `Color(0xFF${hex})`;
+}
+function flutterPropName(m3Token) {
+  return TOKEN_TO_FLUTTER[m3Token] ?? m3Token;
+}
+function buildFlutter(ctx) {
+  const { mergedColorsLight, mergedColorsDark, hexCustomColors } = ctx;
+  function buildColorScheme(name, brightness, colors) {
+    const lines = [];
+    lines.push(`const ${name} = ColorScheme(`);
+    lines.push(`  brightness: Brightness.${brightness},`);
+    for (const token of FLUTTER_PROPERTIES) {
+      const argb = colors[token];
+      if (argb === void 0) continue;
+      lines.push(`  ${flutterPropName(token)}: ${toFlutterColor(argb)},`);
+    }
+    lines.push(");");
+    return lines.join("\n");
+  }
+  function buildCustomColors() {
+    if (hexCustomColors.length === 0) return "";
+    const sections = [];
+    for (const cc of hexCustomColors) {
+      const ccName = cc.name;
+      const tokens = [
+        ccName,
+        `on${upperFirst(ccName)}`,
+        `${ccName}Container`,
+        `on${upperFirst(ccName)}Container`
+      ];
+      const lightLines = [];
+      const darkLines = [];
+      for (const token of tokens) {
+        const lightArgb = mergedColorsLight[token];
+        const darkArgb = mergedColorsDark[token];
+        if (lightArgb !== void 0) {
+          lightLines.push(
+            `const light${upperFirst(token)} = ${toFlutterColor(lightArgb)};`
+          );
+        }
+        if (darkArgb !== void 0) {
+          darkLines.push(
+            `const dark${upperFirst(token)} = ${toFlutterColor(darkArgb)};`
+          );
+        }
+      }
+      sections.push([...lightLines, ...darkLines].join("\n"));
+    }
+    return "\n\n" + sections.join("\n\n");
+  }
+  const header = "import 'package:flutter/material.dart';";
+  const light = buildColorScheme(
+    "lightColorScheme",
+    "light",
+    mergedColorsLight
+  );
+  const dark = buildColorScheme("darkColorScheme", "dark", mergedColorsDark);
+  const custom = buildCustomColors();
+  return `${header}
+
+${light}
+
+${dark}${custom}
+`;
+}
+
+// src/lib/builder.json.ts
+import {
+  argbFromHex,
+  DynamicScheme,
+  Hct,
+  hexFromArgb as hexFromArgb4,
+  MaterialDynamicColors,
   TonalPalette
 } from "@material/material-color-utilities";
-import { kebabCase, startCase, upperFirst } from "lodash-es";
+var MTB_TONES = [
+  0,
+  5,
+  10,
+  15,
+  20,
+  25,
+  30,
+  35,
+  40,
+  50,
+  60,
+  70,
+  80,
+  90,
+  95,
+  98,
+  99,
+  100
+];
+var FIXTURE_TOKEN_ORDER = [
+  "primary",
+  "surfaceTint",
+  "onPrimary",
+  "primaryContainer",
+  "onPrimaryContainer",
+  "secondary",
+  "onSecondary",
+  "secondaryContainer",
+  "onSecondaryContainer",
+  "tertiary",
+  "onTertiary",
+  "tertiaryContainer",
+  "onTertiaryContainer",
+  "error",
+  "onError",
+  "errorContainer",
+  "onErrorContainer",
+  "background",
+  "onBackground",
+  "surface",
+  "onSurface",
+  "surfaceVariant",
+  "onSurfaceVariant",
+  "outline",
+  "outlineVariant",
+  "shadow",
+  "scrim",
+  "inverseSurface",
+  "inverseOnSurface",
+  "inversePrimary",
+  "primaryFixed",
+  "onPrimaryFixed",
+  "primaryFixedDim",
+  "onPrimaryFixedVariant",
+  "secondaryFixed",
+  "onSecondaryFixed",
+  "secondaryFixedDim",
+  "onSecondaryFixedVariant",
+  "tertiaryFixed",
+  "onTertiaryFixed",
+  "tertiaryFixedDim",
+  "onTertiaryFixedVariant",
+  "surfaceDim",
+  "surfaceBright",
+  "surfaceContainerLowest",
+  "surfaceContainerLow",
+  "surfaceContainer",
+  "surfaceContainerHigh",
+  "surfaceContainerHighest"
+];
+function buildJson(ctx) {
+  const {
+    hexSource,
+    sourceHct,
+    effectiveSourceArgb,
+    primaryHct,
+    SchemeClass,
+    scheme,
+    primary,
+    secondary,
+    tertiary,
+    error,
+    neutral,
+    neutralVariant,
+    hexCustomColors
+  } = ctx;
+  const neuHct = neutral ? Hct.fromInt(argbFromHex(neutral)) : sourceHct;
+  const nvHct = neutralVariant ? Hct.fromInt(argbFromHex(neutralVariant)) : sourceHct;
+  const rawPalettes = {
+    primary: TonalPalette.fromInt(effectiveSourceArgb),
+    secondary: secondary ? TonalPalette.fromInt(argbFromHex(secondary)) : TonalPalette.fromHueAndChroma(sourceHct.hue, sourceHct.chroma / 3),
+    tertiary: tertiary ? TonalPalette.fromInt(argbFromHex(tertiary)) : TonalPalette.fromHueAndChroma(
+      (sourceHct.hue + 60) % 360,
+      sourceHct.chroma / 2
+    ),
+    neutral: TonalPalette.fromHueAndChroma(
+      neuHct.hue,
+      Math.min(neuHct.chroma / 12, 4)
+    ),
+    "neutral-variant": TonalPalette.fromHueAndChroma(
+      nvHct.hue,
+      Math.min(nvHct.chroma / 6, 8)
+    )
+  };
+  function buildJsonSchemes() {
+    function extractSchemeColors(scheme2, backgroundScheme) {
+      const colors = {};
+      for (const tokenName of FIXTURE_TOKEN_ORDER) {
+        const dynamicColor = MaterialDynamicColors[tokenName];
+        const useScheme = backgroundScheme && (tokenName === "background" || tokenName === "onBackground") ? backgroundScheme : scheme2;
+        colors[tokenName] = hexFromArgb4(
+          dynamicColor.getArgb(useScheme)
+        ).toUpperCase();
+      }
+      return colors;
+    }
+    function resolveOverridePalette(hex, role) {
+      if (!hex) return null;
+      return new SchemeClass(Hct.fromInt(argbFromHex(hex)), false, 0)[role];
+    }
+    const secPalette = resolveOverridePalette(secondary, "primaryPalette");
+    const terPalette = resolveOverridePalette(tertiary, "primaryPalette");
+    const errPalette = resolveOverridePalette(error, "primaryPalette");
+    const neuPalette = resolveOverridePalette(neutral, "neutralPalette");
+    const nvPalette = resolveOverridePalette(
+      neutralVariant,
+      "neutralVariantPalette"
+    );
+    const jsonSchemes = {};
+    const jsonContrastLevels = [
+      { name: "light", isDark: false, contrast: 0 },
+      { name: "light-medium-contrast", isDark: false, contrast: 0.5 },
+      { name: "light-high-contrast", isDark: false, contrast: 1 },
+      { name: "dark", isDark: true, contrast: 0 },
+      { name: "dark-medium-contrast", isDark: true, contrast: 0.5 },
+      { name: "dark-high-contrast", isDark: true, contrast: 1 }
+    ];
+    for (const { name, isDark, contrast } of jsonContrastLevels) {
+      const baseScheme = new SchemeClass(primaryHct, isDark, contrast);
+      const composedScheme = new DynamicScheme({
+        sourceColorArgb: effectiveSourceArgb,
+        variant: schemeToVariant[scheme],
+        contrastLevel: contrast,
+        isDark,
+        primaryPalette: baseScheme.primaryPalette,
+        secondaryPalette: secPalette || baseScheme.secondaryPalette,
+        tertiaryPalette: terPalette || baseScheme.tertiaryPalette,
+        neutralPalette: neuPalette || baseScheme.neutralPalette,
+        neutralVariantPalette: nvPalette || baseScheme.neutralVariantPalette
+      });
+      if (errPalette) composedScheme.errorPalette = errPalette;
+      jsonSchemes[name] = extractSchemeColors(composedScheme, baseScheme);
+    }
+    return jsonSchemes;
+  }
+  function rawPalettesToJson() {
+    const jsonPalettes = {};
+    const RAW_PALETTE_NAMES = [
+      "primary",
+      "secondary",
+      "tertiary",
+      "neutral",
+      "neutral-variant"
+    ];
+    for (const name of RAW_PALETTE_NAMES) {
+      const palette = rawPalettes[name];
+      const tones = {};
+      for (const tone of MTB_TONES) {
+        tones[tone.toString()] = hexFromArgb4(palette.tone(tone)).toUpperCase();
+      }
+      jsonPalettes[name] = tones;
+    }
+    return jsonPalettes;
+  }
+  function buildCoreColors(opts) {
+    const colors = { primary: opts.primary };
+    if (opts.secondary) colors.secondary = opts.secondary.toUpperCase();
+    if (opts.tertiary) colors.tertiary = opts.tertiary.toUpperCase();
+    if (opts.error) colors.error = opts.error.toUpperCase();
+    if (opts.neutral) colors.neutral = opts.neutral.toUpperCase();
+    if (opts.neutralVariant)
+      colors.neutralVariant = opts.neutralVariant.toUpperCase();
+    return colors;
+  }
+  const seed = hexSource.toUpperCase();
+  const coreColors = buildCoreColors({
+    primary: (primary || hexSource).toUpperCase(),
+    secondary,
+    tertiary,
+    error,
+    neutral,
+    neutralVariant
+  });
+  const extendedColors = hexCustomColors.map((c) => ({
+    name: c.name,
+    color: c.hex.toUpperCase(),
+    description: "",
+    harmonized: c.blend ?? DEFAULT_BLEND
+  }));
+  return {
+    seed,
+    coreColors,
+    extendedColors,
+    schemes: buildJsonSchemes(),
+    palettes: rawPalettesToJson()
+  };
+}
+
+// src/lib/builder.tailwind.ts
+import { kebabCase as kebabCase3 } from "lodash-es";
+var SHADE_TO_TONE = [
+  [50, 95],
+  [100, 90],
+  [200, 80],
+  [300, 70],
+  [400, 60],
+  [500, 50],
+  [600, 40],
+  [700, 30],
+  [800, 20],
+  [900, 10],
+  [950, 5]
+];
+var CORE_PALETTES = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "error",
+  "neutral",
+  "neutral-variant"
+];
+var SHADCN_MAPPING = [
+  ["--background", "surface"],
+  ["--foreground", "on-surface"],
+  ["--card", "surface-container-low"],
+  ["--card-foreground", "on-surface"],
+  ["--popover", "surface-container-high"],
+  ["--popover-foreground", "on-surface"],
+  ["--primary", "primary"],
+  ["--primary-foreground", "on-primary"],
+  ["--secondary", "secondary-container"],
+  ["--secondary-foreground", "on-secondary-container"],
+  ["--muted", "surface-container-highest"],
+  ["--muted-foreground", "on-surface-variant"],
+  ["--accent", "secondary-container"],
+  ["--accent-foreground", "on-secondary-container"],
+  ["--destructive", "error"],
+  ["--border", "outline-variant"],
+  ["--input", "outline"],
+  ["--ring", "primary"],
+  ["--chart-1", "primary-fixed"],
+  ["--chart-2", "secondary-fixed"],
+  ["--chart-3", "tertiary-fixed"],
+  ["--chart-4", "primary-fixed-dim"],
+  ["--chart-5", "secondary-fixed-dim"],
+  ["--sidebar", "surface-container-low"],
+  ["--sidebar-foreground", "on-surface"],
+  ["--sidebar-primary", "primary"],
+  ["--sidebar-primary-foreground", "on-primary"],
+  ["--sidebar-accent", "secondary-container"],
+  ["--sidebar-accent-foreground", "on-secondary-container"],
+  ["--sidebar-border", "outline-variant"],
+  ["--sidebar-ring", "primary"]
+];
+function buildTailwind(ctx, options) {
+  const { prefix, mergedColorsLight, hexCustomColors } = ctx;
+  const lines = [];
+  for (const name of Object.keys(mergedColorsLight)) {
+    const kebab = kebabCase3(name);
+    lines.push(`--color-${kebab}: var(--${prefix}-sys-color-${kebab});`);
+  }
+  lines.push("");
+  lines.push("/* Shades */");
+  for (const palette of CORE_PALETTES) {
+    lines.push("");
+    for (const [shade, tone] of SHADE_TO_TONE) {
+      lines.push(
+        `--color-${palette}-${shade}: var(--${prefix}-ref-palette-${palette}-${tone});`
+      );
+    }
+  }
+  if (hexCustomColors.length > 0) {
+    for (const customColor of hexCustomColors) {
+      const kebab = kebabCase3(customColor.name);
+      lines.push("");
+      for (const [shade, tone] of SHADE_TO_TONE) {
+        lines.push(
+          `--color-${kebab}-${shade}: var(--${prefix}-ref-palette-${kebab}-${tone});`
+        );
+      }
+    }
+  }
+  let output = `@theme inline {
+  ${lines.join("\n  ")}
+}
+`;
+  if (options?.shadcn) {
+    const shadcnLines = SHADCN_MAPPING.map(
+      ([shadcnVar, m3Token]) => `${shadcnVar}: var(--${prefix}-sys-color-${m3Token});`
+    );
+    output += `
+:root,
+.dark {
+  ${shadcnLines.join("\n  ")}
+}
+`;
+  }
+  return output;
+}
+
+// src/lib/builder.ts
 var schemesMap = {
   tonalSpot: SchemeTonalSpot,
   monochrome: SchemeMonochrome,
@@ -66,26 +733,6 @@ var STANDARD_TONES = [
   99,
   100
 ];
-var MTB_TONES = [
-  0,
-  5,
-  10,
-  15,
-  20,
-  25,
-  30,
-  35,
-  40,
-  50,
-  60,
-  70,
-  80,
-  90,
-  95,
-  98,
-  99,
-  100
-];
 var Variant = {
   MONOCHROME: 0,
   NEUTRAL: 1,
@@ -157,9 +804,21 @@ var tokenDescriptions = {
   tertiaryFixed: "Fixed tertiary color that stays the same in light and dark themes.",
   tertiaryFixedDim: "Dimmed variant of the fixed tertiary color for lower emphasis."
 };
-var tokenNames = Object.keys(
-  tokenDescriptions
-);
+function isTokenName(key) {
+  return key in tokenDescriptions;
+}
+var tokenNames = Object.keys(tokenDescriptions).filter(isTokenName);
+function deriveCustomPaletteName(tokenName, allPaletteNamesKebab) {
+  let baseName = tokenName;
+  if (/^on[A-Z]/.test(baseName) && baseName.length > 2) {
+    baseName = baseName.charAt(2).toLowerCase() + baseName.slice(3);
+  }
+  if (baseName.endsWith("Container")) {
+    baseName = baseName.slice(0, -"Container".length);
+  }
+  const kebab = kebabCase4(baseName);
+  return allPaletteNamesKebab.has(kebab) ? kebab : void 0;
+}
 function toRecord(arr, getEntry) {
   return Object.fromEntries(arr.map(getEntry));
 }
@@ -174,58 +833,55 @@ function getPalette(palettes, colorName) {
 }
 function mergeBaseAndCustomColors(scheme, customColors, colorPalettes) {
   const baseVars = toRecord(tokenNames, (tokenName) => {
-    const dynamicColor = MaterialDynamicColors[tokenName];
+    const dynamicColor = MaterialDynamicColors2[tokenName];
     const argb = dynamicColor.getArgb(scheme);
     return [tokenName, argb];
   });
   const customVars = {};
   customColors.forEach((color) => {
     const colorname = color.name;
-    const getPaletteForColor = (s) => getPalette(colorPalettes, colorname);
-    const getTone = (baseTone) => (_s) => {
-      return baseTone;
-    };
+    const getPaletteForColor = () => getPalette(colorPalettes, colorname);
     const colorDynamicColor = new DynamicColor(
       colorname,
       getPaletteForColor,
-      (s) => getTone(s.isDark ? 80 : 40)(s),
+      (s) => s.isDark ? 80 : 40,
       // Main color: lighter in dark mode, darker in light mode
       true
       // background
     );
     const onColorDynamicColor = new DynamicColor(
-      `on${upperFirst(colorname)}`,
+      `on${upperFirst2(colorname)}`,
       getPaletteForColor,
-      (s) => getTone(s.isDark ? 20 : 100)(s),
+      (s) => s.isDark ? 20 : 100,
       // Text on main color: high contrast (dark on light, light on dark)
       false
     );
     const containerDynamicColor = new DynamicColor(
       `${colorname}Container`,
       getPaletteForColor,
-      (s) => getTone(s.isDark ? 30 : 90)(s),
+      (s) => s.isDark ? 30 : 90,
       // Container: subtle variant (darker in dark mode, lighter in light mode)
       true
       // background
     );
     const onContainerDynamicColor = new DynamicColor(
-      `on${upperFirst(colorname)}Container`,
+      `on${upperFirst2(colorname)}Container`,
       getPaletteForColor,
-      (s) => getTone(s.isDark ? 90 : 30)(s),
+      (s) => s.isDark ? 90 : 30,
       // Text on container: high contrast against container background
       false
     );
     customVars[colorname] = colorDynamicColor.getArgb(scheme);
-    customVars[`on${upperFirst(colorname)}`] = onColorDynamicColor.getArgb(scheme);
+    customVars[`on${upperFirst2(colorname)}`] = onColorDynamicColor.getArgb(scheme);
     customVars[`${colorname}Container`] = containerDynamicColor.getArgb(scheme);
-    customVars[`on${upperFirst(colorname)}Container`] = onContainerDynamicColor.getArgb(scheme);
+    customVars[`on${upperFirst2(colorname)}Container`] = onContainerDynamicColor.getArgb(scheme);
   });
   return { ...baseVars, ...customVars };
 }
 function createColorPalette(colorDef, baseScheme, effectiveSourceForHarmonization) {
-  const colorArgb = argbFromHex(colorDef.hex);
+  const colorArgb = argbFromHex2(colorDef.hex);
   const harmonizedArgb = colorDef.blend ? Blend.harmonize(colorArgb, effectiveSourceForHarmonization) : colorArgb;
-  const hct = Hct.fromInt(harmonizedArgb);
+  const hct = Hct2.fromInt(harmonizedArgb);
   let targetChroma;
   if (colorDef.core && colorDef.chromaSource) {
     if (colorDef.chromaSource === "neutral") {
@@ -238,7 +894,25 @@ function createColorPalette(colorDef, baseScheme, effectiveSourceForHarmonizatio
   } else {
     targetChroma = baseScheme.primaryPalette.chroma;
   }
-  return TonalPalette.fromHueAndChroma(hct.hue, targetChroma);
+  return TonalPalette2.fromHueAndChroma(hct.hue, targetChroma);
+}
+function buildTokenToPaletteMap(schemePalettes, scheme) {
+  const result = {};
+  for (const propName of Object.getOwnPropertyNames(MaterialDynamicColors2)) {
+    const dc = Object.getOwnPropertyDescriptor(
+      MaterialDynamicColors2,
+      propName
+    )?.value;
+    if (!(dc instanceof DynamicColor)) continue;
+    const palette = dc.palette(scheme);
+    for (const [palName, pal] of schemePalettes) {
+      if (palette === pal) {
+        result[propName] = palName;
+        break;
+      }
+    }
+  }
+  return result;
 }
 function builder(hexSource, {
   scheme = DEFAULT_SCHEME,
@@ -252,13 +926,13 @@ function builder(hexSource, {
   customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS,
   prefix = DEFAULT_PREFIX
 } = {}) {
-  const sourceArgb = argbFromHex(hexSource);
-  const sourceHct = Hct.fromInt(sourceArgb);
+  const sourceArgb = argbFromHex2(hexSource);
+  const sourceHct = Hct2.fromInt(sourceArgb);
   const effectiveSource = primary || hexSource;
-  const effectiveSourceArgb = argbFromHex(effectiveSource);
-  const effectiveSourceForHarmonization = primary ? argbFromHex(primary) : sourceArgb;
+  const effectiveSourceArgb = argbFromHex2(effectiveSource);
+  const effectiveSourceForHarmonization = primary ? argbFromHex2(primary) : sourceArgb;
   const SchemeClass = schemesMap[scheme];
-  const primaryHct = Hct.fromInt(effectiveSourceArgb);
+  const primaryHct = Hct2.fromInt(effectiveSourceArgb);
   const baseScheme = new SchemeClass(primaryHct, false, contrast);
   const allColors = [
     // Core colors (hex may be undefined)
@@ -323,8 +997,8 @@ function builder(hexSource, {
     neutralPalette: colorPalettes["neutral"] || baseScheme.neutralPalette,
     neutralVariantPalette: colorPalettes["neutralVariant"] || baseScheme.neutralVariantPalette
   };
-  const lightScheme = new DynamicScheme({ ...schemeConfig, isDark: false });
-  const darkScheme = new DynamicScheme({ ...schemeConfig, isDark: true });
+  const lightScheme = new DynamicScheme2({ ...schemeConfig, isDark: false });
+  const darkScheme = new DynamicScheme2({ ...schemeConfig, isDark: true });
   const errorPalette = colorPalettes["error"];
   if (errorPalette) {
     lightScheme.errorPalette = errorPalette;
@@ -345,7 +1019,7 @@ function builder(hexSource, {
   const customColors = definedColors.filter((c) => !c.core).map((c) => ({
     name: c.name,
     blend: c.blend ?? DEFAULT_BLEND,
-    value: argbFromHex(c.hex)
+    value: argbFromHex2(c.hex)
   }));
   const mergedColorsLight = mergeBaseAndCustomColors(
     lightScheme,
@@ -365,523 +1039,46 @@ function builder(hexSource, {
     ["neutral", lightScheme.neutralPalette],
     ["neutral-variant", lightScheme.neutralVariantPalette]
   ];
-  function buildTokenToPaletteMap(schemePalettes2, scheme2) {
-    const result = {};
-    for (const propName of Object.getOwnPropertyNames(MaterialDynamicColors)) {
-      const dc = MaterialDynamicColors[propName];
-      if (!(dc instanceof DynamicColor)) continue;
-      const palette = dc.palette(scheme2);
-      for (const [palName, pal] of schemePalettes2) {
-        if (palette === pal) {
-          result[propName] = palName;
-          break;
-        }
-      }
-    }
-    return result;
-  }
   const tokenToPalette = buildTokenToPaletteMap(schemePalettes, lightScheme);
-  const allPaletteNamesKebab = new Set(Object.keys(allPalettes).map(kebabCase));
-  function deriveCustomPaletteName(tokenName) {
-    let baseName = tokenName;
-    if (/^on[A-Z]/.test(baseName) && baseName.length > 2) {
-      baseName = baseName.charAt(2).toLowerCase() + baseName.slice(3);
-    }
-    if (baseName.endsWith("Container")) {
-      baseName = baseName.slice(0, -"Container".length);
-    }
-    const kebab = kebabCase(baseName);
-    return allPaletteNamesKebab.has(kebab) ? kebab : void 0;
-  }
+  const allPaletteNamesKebab = new Set(Object.keys(allPalettes).map(kebabCase4));
+  const ctx = {
+    hexSource,
+    prefix,
+    scheme,
+    primary,
+    secondary,
+    tertiary,
+    neutral,
+    neutralVariant,
+    error,
+    hexCustomColors,
+    sourceHct,
+    effectiveSourceArgb,
+    primaryHct,
+    SchemeClass,
+    allPalettes,
+    mergedColorsLight,
+    mergedColorsDark,
+    tokenToPalette,
+    allPaletteNamesKebab
+  };
   return {
-    //
-    //  ██████ ███████ ███████
-    // ██      ██      ██
-    // ██      ███████ ███████
-    // ██           ██      ██
-    //  ██████ ███████ ███████
-    //
-    toCss() {
-      function buildRefPaletteLookup() {
-        const lookup = {};
-        for (const [name, palette] of Object.entries(allPalettes)) {
-          const paletteName = kebabCase(name);
-          for (const tone of STANDARD_TONES) {
-            const hex = hexFromArgb(palette.tone(tone));
-            if (!lookup[hex]) lookup[hex] = [];
-            lookup[hex].push({ paletteName, tone });
-          }
-        }
-        return lookup;
-      }
-      function sysColorVar(colorName, colorValue, lookup) {
-        const name = `--${prefix}-sys-color-${kebabCase(colorName)}`;
-        const hex = hexFromArgb(colorValue);
-        const matches = lookup[hex];
-        if (matches && matches.length > 0) {
-          const preferred = tokenToPalette[colorName] ?? deriveCustomPaletteName(colorName);
-          const match = (preferred ? matches.find((m) => m.paletteName === preferred) : void 0) ?? matches[0];
-          return `${name}:var(--${prefix}-ref-palette-${match.paletteName}-${match.tone});`;
-        }
-        return `${name}:${hex};`;
-      }
-      function toCssVars(mergedColors, lookup) {
-        return Object.entries(mergedColors).map(([name, value]) => sysColorVar(name, value, lookup)).join(" ");
-      }
-      function refPaletteVar(paletteName, tone, colorValue) {
-        const name = `--${prefix}-ref-palette-${paletteName}-${tone}`;
-        const value = hexFromArgb(colorValue);
-        return `${name}:${value};`;
-      }
-      function generateTonalPaletteVars(paletteName, palette) {
-        return STANDARD_TONES.map((tone) => {
-          const color = palette.tone(tone);
-          return refPaletteVar(paletteName, tone, color);
-        }).join(" ");
-      }
-      function generateTonalVars() {
-        return Object.entries(allPalettes).map(
-          ([name, palette]) => generateTonalPaletteVars(kebabCase(name), palette)
-        ).join(" ");
-      }
-      const refPaletteLookup = buildRefPaletteLookup();
-      const lightVars = toCssVars(mergedColorsLight, refPaletteLookup);
-      const darkVars = toCssVars(mergedColorsDark, refPaletteLookup);
-      const tonalVars = generateTonalVars();
-      return `
-:root { ${lightVars} ${tonalVars} }
-.dark { ${darkVars} ${tonalVars} }
-`;
-    },
-    //
-    //      ██ ███████  ██████  ███    ██
-    //      ██ ██      ██    ██ ████   ██
-    //      ██ ███████ ██    ██ ██ ██  ██
-    // ██   ██      ██ ██    ██ ██  ██ ██
-    //  █████  ███████  ██████  ██   ████
-    //
-    toJson() {
-      const fixtureTokenOrder = [
-        "primary",
-        "surfaceTint",
-        "onPrimary",
-        "primaryContainer",
-        "onPrimaryContainer",
-        "secondary",
-        "onSecondary",
-        "secondaryContainer",
-        "onSecondaryContainer",
-        "tertiary",
-        "onTertiary",
-        "tertiaryContainer",
-        "onTertiaryContainer",
-        "error",
-        "onError",
-        "errorContainer",
-        "onErrorContainer",
-        "background",
-        "onBackground",
-        "surface",
-        "onSurface",
-        "surfaceVariant",
-        "onSurfaceVariant",
-        "outline",
-        "outlineVariant",
-        "shadow",
-        "scrim",
-        "inverseSurface",
-        "inverseOnSurface",
-        "inversePrimary",
-        "primaryFixed",
-        "onPrimaryFixed",
-        "primaryFixedDim",
-        "onPrimaryFixedVariant",
-        "secondaryFixed",
-        "onSecondaryFixed",
-        "secondaryFixedDim",
-        "onSecondaryFixedVariant",
-        "tertiaryFixed",
-        "onTertiaryFixed",
-        "tertiaryFixedDim",
-        "onTertiaryFixedVariant",
-        "surfaceDim",
-        "surfaceBright",
-        "surfaceContainerLowest",
-        "surfaceContainerLow",
-        "surfaceContainer",
-        "surfaceContainerHigh",
-        "surfaceContainerHighest"
-      ];
-      const neuHct = neutral ? Hct.fromInt(argbFromHex(neutral)) : sourceHct;
-      const nvHct = neutralVariant ? Hct.fromInt(argbFromHex(neutralVariant)) : sourceHct;
-      const rawPalettes = {
-        primary: TonalPalette.fromInt(effectiveSourceArgb),
-        secondary: secondary ? TonalPalette.fromInt(argbFromHex(secondary)) : TonalPalette.fromHueAndChroma(sourceHct.hue, sourceHct.chroma / 3),
-        tertiary: tertiary ? TonalPalette.fromInt(argbFromHex(tertiary)) : TonalPalette.fromHueAndChroma(
-          (sourceHct.hue + 60) % 360,
-          sourceHct.chroma / 2
-        ),
-        neutral: TonalPalette.fromHueAndChroma(
-          neuHct.hue,
-          Math.min(neuHct.chroma / 12, 4)
-        ),
-        "neutral-variant": TonalPalette.fromHueAndChroma(
-          nvHct.hue,
-          Math.min(nvHct.chroma / 6, 8)
-        )
-      };
-      function buildJsonSchemes() {
-        function extractSchemeColors(scheme2, backgroundScheme) {
-          const colors = {};
-          for (const tokenName of fixtureTokenOrder) {
-            const dynamicColor = MaterialDynamicColors[tokenName];
-            const useScheme = backgroundScheme && (tokenName === "background" || tokenName === "onBackground") ? backgroundScheme : scheme2;
-            colors[tokenName] = hexFromArgb(
-              dynamicColor.getArgb(useScheme)
-            ).toUpperCase();
-          }
-          return colors;
-        }
-        function resolveOverridePalette(hex, role) {
-          if (!hex) return null;
-          return new SchemeClass(Hct.fromInt(argbFromHex(hex)), false, 0)[role];
-        }
-        const secPalette = resolveOverridePalette(secondary, "primaryPalette");
-        const terPalette = resolveOverridePalette(tertiary, "primaryPalette");
-        const errPalette = resolveOverridePalette(error, "primaryPalette");
-        const neuPalette = resolveOverridePalette(neutral, "neutralPalette");
-        const nvPalette = resolveOverridePalette(
-          neutralVariant,
-          "neutralVariantPalette"
-        );
-        const jsonSchemes = {};
-        const jsonContrastLevels = [
-          { name: "light", isDark: false, contrast: 0 },
-          { name: "light-medium-contrast", isDark: false, contrast: 0.5 },
-          { name: "light-high-contrast", isDark: false, contrast: 1 },
-          { name: "dark", isDark: true, contrast: 0 },
-          { name: "dark-medium-contrast", isDark: true, contrast: 0.5 },
-          { name: "dark-high-contrast", isDark: true, contrast: 1 }
-        ];
-        for (const { name, isDark, contrast: contrast2 } of jsonContrastLevels) {
-          const baseScheme2 = new SchemeClass(primaryHct, isDark, contrast2);
-          const composedScheme = new DynamicScheme({
-            sourceColorArgb: effectiveSourceArgb,
-            variant: schemeToVariant[scheme],
-            contrastLevel: contrast2,
-            isDark,
-            primaryPalette: baseScheme2.primaryPalette,
-            secondaryPalette: secPalette || baseScheme2.secondaryPalette,
-            tertiaryPalette: terPalette || baseScheme2.tertiaryPalette,
-            neutralPalette: neuPalette || baseScheme2.neutralPalette,
-            neutralVariantPalette: nvPalette || baseScheme2.neutralVariantPalette
-          });
-          if (errPalette) composedScheme.errorPalette = errPalette;
-          jsonSchemes[name] = extractSchemeColors(composedScheme, baseScheme2);
-        }
-        return jsonSchemes;
-      }
-      function rawPalettesToJson() {
-        const jsonPalettes = {};
-        const RAW_PALETTE_NAMES = [
-          "primary",
-          "secondary",
-          "tertiary",
-          "neutral",
-          "neutral-variant"
-        ];
-        for (const name of RAW_PALETTE_NAMES) {
-          const palette = rawPalettes[name];
-          const tones = {};
-          for (const tone of MTB_TONES) {
-            tones[tone.toString()] = hexFromArgb(
-              palette.tone(tone)
-            ).toUpperCase();
-          }
-          jsonPalettes[name] = tones;
-        }
-        return jsonPalettes;
-      }
-      function buildCoreColors(opts) {
-        const colors = { primary: opts.primary };
-        if (opts.secondary) colors.secondary = opts.secondary.toUpperCase();
-        if (opts.tertiary) colors.tertiary = opts.tertiary.toUpperCase();
-        if (opts.error) colors.error = opts.error.toUpperCase();
-        if (opts.neutral) colors.neutral = opts.neutral.toUpperCase();
-        if (opts.neutralVariant)
-          colors.neutralVariant = opts.neutralVariant.toUpperCase();
-        return colors;
-      }
-      const seed = hexSource.toUpperCase();
-      const coreColors = buildCoreColors({
-        primary: (primary || hexSource).toUpperCase(),
-        secondary,
-        tertiary,
-        error,
-        neutral,
-        neutralVariant
-      });
-      const extendedColors = hexCustomColors.map((c) => ({
-        name: c.name,
-        color: c.hex.toUpperCase(),
-        description: "",
-        harmonized: c.blend ?? DEFAULT_BLEND
-      }));
-      return {
-        seed,
-        coreColors,
-        extendedColors,
-        schemes: buildJsonSchemes(),
-        palettes: rawPalettesToJson()
-      };
-    },
-    //
-    // ███████ ██  ██████  ███    ███  █████
-    // ██      ██ ██       ████  ████ ██   ██
-    // █████   ██ ██   ███ ██ ████ ██ ███████
-    // ██      ██ ██    ██ ██  ██  ██ ██   ██
-    // ██      ██  ██████  ██      ██ ██   ██
-    //
-    toFigmaTokens() {
-      function argbToFigmaColorValue(argb) {
-        return {
-          colorSpace: "srgb",
-          components: [
-            redFromArgb(argb) / 255,
-            greenFromArgb(argb) / 255,
-            blueFromArgb(argb) / 255
-          ],
-          alpha: 1,
-          hex: hexFromArgb(argb).toUpperCase()
-        };
-      }
-      function figmaToken(argb) {
-        return {
-          $type: "color",
-          $value: argbToFigmaColorValue(argb),
-          $extensions: {
-            "com.figma.scopes": ["ALL_SCOPES"],
-            "com.figma.isOverride": true
-          }
-        };
-      }
-      function buildRefPaletteTokens() {
-        const palettes = {};
-        for (const [name, palette] of Object.entries(allPalettes)) {
-          const tones = {};
-          for (const tone of STANDARD_TONES) {
-            const argb = palette.tone(tone);
-            tones[tone.toString()] = figmaToken(argb);
-          }
-          palettes[startCase(name)] = tones;
-        }
-        return palettes;
-      }
-      function findToneInPalette(hex, paletteName, tones) {
-        for (const [tone, token] of Object.entries(tones)) {
-          if (token.$value.hex === hex) {
-            return `{ref.palette.${paletteName}.${tone}}`;
-          }
-        }
-        return null;
-      }
-      function findAlias(hex, tokenName, refPalettes2) {
-        const preferredPaletteKebab = tokenToPalette[tokenName] ?? deriveCustomPaletteName(tokenName);
-        const preferredPalette = preferredPaletteKebab ? startCase(preferredPaletteKebab) : void 0;
-        if (preferredPalette && refPalettes2[preferredPalette]) {
-          const match = findToneInPalette(
-            hex,
-            preferredPalette,
-            refPalettes2[preferredPalette]
-          );
-          if (match) return match;
-        }
-        for (const [palName, tones] of Object.entries(refPalettes2)) {
-          const match = findToneInPalette(hex, palName, tones);
-          if (match) return match;
-        }
-        return null;
-      }
-      function resolveModeValue(argb, tokenName, refPalettes2) {
-        const hex = hexFromArgb(argb).toUpperCase();
-        return findAlias(hex, tokenName, refPalettes2) ?? argbToFigmaColorValue(argb);
-      }
-      function buildSysColorTokens(mergedColors, refPalettes2) {
-        const tokens = {};
-        for (const [name, argb] of Object.entries(mergedColors)) {
-          const description = tokenDescriptions[name];
-          const cssVar = `--${prefix}-sys-color-${kebabCase(name)}`;
-          const value = resolveModeValue(argb, name, refPalettes2);
-          tokens[startCase(name)] = {
-            $type: "color",
-            $value: value,
-            ...description ? { $description: description } : {},
-            $extensions: {
-              "com.figma.scopes": ["ALL_SCOPES"],
-              "css.variable": cssVar
-            }
-          };
-        }
-        return tokens;
-      }
-      const refPalettes = buildRefPaletteTokens();
-      function buildModeFile(modeName, mergedColors) {
-        return {
-          ref: {
-            palette: refPalettes
-          },
-          sys: {
-            color: buildSysColorTokens(mergedColors, refPalettes)
-          },
-          $extensions: {
-            "com.figma.modeName": modeName
-          }
-        };
-      }
-      return {
-        "Light.tokens.json": buildModeFile("Light", mergedColorsLight),
-        "Dark.tokens.json": buildModeFile("Dark", mergedColorsDark)
-      };
-    },
-    //
-    // API
-    //
+    toCss: () => buildCss(ctx),
+    toJson: () => buildJson(ctx),
+    toFigmaVariables: () => buildFigmaVariables(ctx),
+    toFigmaTokens: () => buildFigmaTokens(ctx),
+    toTailwind: (options) => buildTailwind(ctx, options),
+    toFlutter: () => buildFlutter(ctx),
     mergedColorsLight,
     mergedColorsDark,
     allPalettes
   };
 }
 
-// src/Mcu.tsx
-import { useMemo as useMemo2 } from "react";
-
-// src/Mcu.context.tsx
-import {
-  hexFromArgb as hexFromArgb2
-} from "@material/material-color-utilities";
-import React, {
-  useCallback,
-  useInsertionEffect,
-  useMemo,
-  useState
-} from "react";
-
-// src/lib/createRequiredContext.ts
-import { createContext, useContext } from "react";
-var createRequiredContext = () => {
-  const Ctx = createContext(null);
-  const useCtx = () => {
-    const contextValue = useContext(Ctx);
-    if (contextValue === null) {
-      throw new Error("Context value is null");
-    }
-    return contextValue;
-  };
-  return [useCtx, Ctx.Provider, Ctx];
-};
-
-// src/Mcu.context.tsx
-import { jsx } from "react/jsx-runtime";
-var [useMcu, Provider, McuContext] = createRequiredContext();
-var McuProvider = ({
-  styleId,
-  children,
-  ...configProps
-}) => {
-  const [initials] = useState(() => configProps);
-  const [mcuConfig, setMcuConfig] = useState(initials);
-  const configKey = JSON.stringify(configProps);
-  React.useEffect(() => {
-    setMcuConfig(configProps);
-  }, [configKey]);
-  const { css, mergedColorsLight, mergedColorsDark, allPalettes } = useMemo(() => {
-    const { toCss, ...rest } = builder(mcuConfig.source, mcuConfig);
-    return { css: toCss(), ...rest };
-  }, [mcuConfig]);
-  useInsertionEffect(() => {
-    let tag = document.getElementById(styleId);
-    if (!tag) {
-      tag = document.createElement("style");
-      tag.id = styleId;
-      document.head.appendChild(tag);
-    }
-    tag.textContent = css;
-  }, [css, styleId]);
-  const getMcuColor = useCallback(
-    (colorName, theme) => {
-      const mergedColors = theme === "light" ? mergedColorsLight : mergedColorsDark;
-      const colorValue = mergedColors[colorName];
-      if (colorValue === void 0) {
-        throw new Error(`Unknown MCU token '${colorName}'`);
-      }
-      return hexFromArgb2(colorValue);
-    },
-    [mergedColorsDark, mergedColorsLight]
-  );
-  const value = useMemo(
-    () => ({
-      initials,
-      setMcuConfig,
-      getMcuColor,
-      allPalettes
-    }),
-    [getMcuColor, initials, allPalettes]
-  );
-  return /* @__PURE__ */ jsx(Provider, { value, children });
-};
-
-// src/Mcu.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var mcuStyleId = "mcu-styles";
-var DEFAULT_COLOR_MATCH = false;
-function Mcu({
-  source,
-  scheme = DEFAULT_SCHEME,
-  contrast = DEFAULT_CONTRAST,
-  primary,
-  secondary,
-  tertiary,
-  neutral,
-  neutralVariant,
-  error,
-  colorMatch = DEFAULT_COLOR_MATCH,
-  customColors = DEFAULT_CUSTOM_COLORS,
-  prefix = DEFAULT_PREFIX,
-  children
-}) {
-  const config = useMemo2(
-    () => ({
-      source,
-      scheme,
-      contrast,
-      primary,
-      secondary,
-      tertiary,
-      neutral,
-      neutralVariant,
-      error,
-      colorMatch,
-      customColors,
-      prefix
-    }),
-    [
-      contrast,
-      customColors,
-      scheme,
-      source,
-      primary,
-      secondary,
-      tertiary,
-      neutral,
-      neutralVariant,
-      error,
-      colorMatch,
-      prefix
-    ]
-  );
-  return /* @__PURE__ */ jsx2(McuProvider, { ...config, styleId: mcuStyleId, children });
-}
+// src/index.ts
+import { ExportButton, Mcu, useMcu } from "./react.js";
 export {
+  ExportButton,
   Mcu,
   builder,
   useMcu