@wealthx/ui 1.0.0 → 1.0.1

package/dist/chunk-3INC3CHA.mjs

@@ -0,0 +1,702 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/theme/ThemeProvider.tsx
+import { useMemo, useId } from "react";
+import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+
+// src/theme/createDesignTheme.ts
+import {
+  createTheme
+} from "@mui/material/styles";
+
+// src/theme/constants.ts
+var FOUNDATION_COLORS = {
+  // Brand are tenant-driven; defaults for fallback
+  brand: {
+    primary: "#33FF99",
+    secondary: "#162029"
+  },
+  text: {
+    primary: "#040D13",
+    secondary: "#4A5C6A",
+    disabled: "#9EAAB5",
+    inverse: "#FFFFFF"
+  },
+  background: {
+    primary: "#FFFFFF",
+    secondary: "#F5F8FA",
+    tertiary: "#E8EAEC",
+    elevated: "#FFFFFF"
+  },
+  border: {
+    default: "#E8EAEC",
+    focus: "#33FF99",
+    // default only; at runtime --color-border-focus uses brand primary
+    error: "#F44336"
+  },
+  state: {
+    error: "#F44336",
+    warning: "#FF9800",
+    success: "#4CAF50",
+    info: "#2196F3"
+  }
+};
+var GRAY_SCALE = {
+  50: "#F6F6F8",
+  100: "#E8E8EB",
+  200: "#D9D9D9",
+  300: "#B9BCBF",
+  400: "#959495",
+  500: "#868686",
+  600: "#8A8F94"
+};
+var ACCENTS = {
+  purple: "#9747FF",
+  darkGreen: "#1E4620"
+};
+var OPACITY_UTILITY = {
+  disabled: 0.38,
+  hover: 0.08
+};
+var CHART_COLORS = {
+  background: "#F7F7F8",
+  textLabels: "#000000",
+  textTitle: "#757373",
+  grid: "#E3E3E8",
+  series: {
+    blue: "#2B72FB",
+    teal: "#64BDC6",
+    yellow: "#EECA34",
+    orange: "#FE6A35",
+    red: "#FA4B42",
+    pink: "#EE60E0",
+    purple: "#7B47E9",
+    indigo: "#5D89DF",
+    lightBlue: "#6AD1FE",
+    green: "#3FDC7E"
+  }
+};
+var PRIMARY_OPACITY_STEPS = [0.05, 0.1, 0.2, 0.3, 0.4, 0.6, 0.7, 0.8, 0.9];
+var SECONDARY_OPACITY_STEPS = [0.05, 0.1, 0.2, 0.6, 0.7, 0.8, 0.9];
+var PRIMARY_SCALE_KEYS = ["50", "100", "200", "300", "400", "600", "700", "800", "900"];
+var SECONDARY_SCALE_KEYS = ["50", "100", "200", "600", "700", "800", "900"];
+var DEFAULT_THEME_OPTIONS = {
+  primary: FOUNDATION_COLORS.brand.primary,
+  secondary: FOUNDATION_COLORS.brand.secondary
+};
+var CONTRAST_DARK = "#040D13";
+var CONTRAST_LIGHT = "#FFFFFF";
+
+// src/theme/typography.ts
+var FONT_FAMILY_SANS = '"Proxima Nova", sans-serif';
+function style(weight, size, lineHeight, extra) {
+  return __spreadValues({ fontWeight: weight, fontSize: size, lineHeight }, extra);
+}
+var TYPOGRAPHY_DISPLAY = {
+  large: style(700, "4rem", "4.5rem", { letterSpacing: "-0.03125rem" }),
+  medium: style(700, "3rem", "3.5rem"),
+  small: style(600, "2.125rem", "2.625rem")
+};
+var TYPOGRAPHY_HEADING = {
+  h1: style(700, "2rem", "2.5rem"),
+  h2: style(600, "1.75rem", "2.25rem"),
+  h3: style(600, "1.5rem", "2rem"),
+  h4: style(600, "1.3125rem", "1.75rem"),
+  h5: style(600, "1.125rem", "1.5rem"),
+  h6: style(600, "1rem", "1.375rem")
+};
+var TYPOGRAPHY_BODY = {
+  large: style(400, "1.125rem", "1.75rem"),
+  medium: style(400, "1rem", "1.5rem"),
+  small: style(400, "0.875rem", "1.25rem")
+};
+var TYPOGRAPHY_LABEL = {
+  large: style(600, "1rem", "1.25rem"),
+  medium: style(600, "0.875rem", "1.125rem"),
+  small: style(600, "0.75rem", "1rem", { letterSpacing: "0.03125rem" })
+};
+var TYPOGRAPHY_UTILITY = {
+  caption: style(400, "0.75rem", "1rem"),
+  overline: style(600, "0.625rem", "0.875rem", {
+    letterSpacing: "0.09375rem",
+    textTransform: "uppercase"
+  }),
+  code: style(400, "0.875rem", "1.25rem")
+};
+var TYPOGRAPHY = {
+  display: TYPOGRAPHY_DISPLAY,
+  heading: TYPOGRAPHY_HEADING,
+  body: TYPOGRAPHY_BODY,
+  label: TYPOGRAPHY_LABEL,
+  utility: TYPOGRAPHY_UTILITY
+};
+function toFontShorthand(s, family = FONT_FAMILY_SANS) {
+  var _a;
+  const f = (_a = s.fontFamily) != null ? _a : family;
+  return `${s.fontWeight} ${s.fontSize}/${s.lineHeight} ${f}`;
+}
+function getTypographyCssVars() {
+  var _a;
+  const family = FONT_FAMILY_SANS;
+  const entries = [];
+  entries.push(["--font-family-sans", family]);
+  for (const [key, style2] of Object.entries(TYPOGRAPHY_DISPLAY)) {
+    entries.push([`--font-display-${key}`, toFontShorthand(style2, family)]);
+  }
+  for (const [key, style2] of Object.entries(TYPOGRAPHY_HEADING)) {
+    entries.push([`--font-${key}`, toFontShorthand(style2, family)]);
+  }
+  for (const [key, style2] of Object.entries(TYPOGRAPHY_BODY)) {
+    entries.push([`--font-body-${key}`, toFontShorthand(style2, family)]);
+  }
+  for (const [key, style2] of Object.entries(TYPOGRAPHY_LABEL)) {
+    entries.push([`--font-label-${key}`, toFontShorthand(style2, family)]);
+  }
+  for (const [key, style2] of Object.entries(TYPOGRAPHY_UTILITY)) {
+    entries.push([`--font-${key}`, toFontShorthand(style2, (_a = style2.fontFamily) != null ? _a : family)]);
+  }
+  const out = {};
+  entries.forEach(([k, v]) => {
+    out[k] = v;
+  });
+  return out;
+}
+var TYPOGRAPHY_EXTRA_CSS = {
+  "font-display-large": { letterSpacing: "-0.03125rem" },
+  "font-label-small": { letterSpacing: "0.03125rem" },
+  "font-overline": { letterSpacing: "0.09375rem", textTransform: "uppercase" }
+};
+var VIEWPORT_LABELS = {
+  desktop: "Desktop (default)",
+  tablet: "Tablet (768\u20131024px)",
+  mobile: "Mobile (< 768px)"
+};
+var VIEWPORT_MAX_WIDTH = {
+  desktop: void 0,
+  tablet: 768,
+  mobile: 375
+};
+var RESPONSIVE_DISPLAY_MOBILE = {
+  displayLarge: style(700, "2.5rem", "2.8125rem", { letterSpacing: "-0.03125rem" }),
+  displayMedium: style(700, "2rem", "2.334rem"),
+  h1: style(700, "1.75rem", "2.1875rem"),
+  h2: style(600, "1.5rem", "1.93rem")
+};
+var RESPONSIVE_DISPLAY_TABLET = {
+  displayLarge: style(700, "3.6rem", "4.05rem", { letterSpacing: "-0.03125rem" }),
+  displayMedium: style(700, "2.7rem", "3.15rem"),
+  displaySmall: style(600, "1.9125rem", "2.3625rem")
+};
+function getResponsiveFontOverrides(mode) {
+  if (mode === "desktop") return {};
+  const f = FONT_FAMILY_SANS;
+  if (mode === "mobile") {
+    return {
+      "--font-display-large": toFontShorthand(RESPONSIVE_DISPLAY_MOBILE.displayLarge, f),
+      "--font-display-medium": toFontShorthand(RESPONSIVE_DISPLAY_MOBILE.displayMedium, f),
+      "--font-h1": toFontShorthand(RESPONSIVE_DISPLAY_MOBILE.h1, f),
+      "--font-h2": toFontShorthand(RESPONSIVE_DISPLAY_MOBILE.h2, f)
+    };
+  }
+  return {
+    "--font-display-large": toFontShorthand(RESPONSIVE_DISPLAY_TABLET.displayLarge, f),
+    "--font-display-medium": toFontShorthand(RESPONSIVE_DISPLAY_TABLET.displayMedium, f),
+    "--font-display-small": toFontShorthand(RESPONSIVE_DISPLAY_TABLET.displaySmall, f)
+  };
+}
+
+// src/theme/utils.ts
+function hexToRgb(hex) {
+  const normalized = hex.replace(/^#/, "");
+  if (normalized.length === 3) {
+    const r = parseInt(normalized[0] + normalized[0], 16);
+    const g = parseInt(normalized[1] + normalized[1], 16);
+    const b = parseInt(normalized[2] + normalized[2], 16);
+    return [r, g, b];
+  }
+  if (normalized.length === 6) {
+    const r = parseInt(normalized.slice(0, 2), 16);
+    const g = parseInt(normalized.slice(2, 4), 16);
+    const b = parseInt(normalized.slice(4, 6), 16);
+    return [r, g, b];
+  }
+  throw new Error(`Invalid hex color: ${hex}`);
+}
+function rgbToCssRgbString(rgb) {
+  return `${rgb[0]}, ${rgb[1]}, ${rgb[2]}`;
+}
+function rgba(hex, alpha) {
+  const [r, g, b] = hexToRgb(hex);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function buildOpacityScale(hex, steps) {
+  const [r, g, b] = hexToRgb(hex);
+  const out = {};
+  for (const { key, opacity } of steps) {
+    out[key] = `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  return out;
+}
+function linearizeSrgb(c) {
+  const n = c / 255;
+  return n <= 0.03928 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
+}
+function getLuminance(hex) {
+  const [r, g, b] = hexToRgb(hex);
+  return 0.2126 * linearizeSrgb(r) + 0.7152 * linearizeSrgb(g) + 0.0722 * linearizeSrgb(b);
+}
+function getContrastText(backgroundColor) {
+  const luminance = getLuminance(backgroundColor);
+  return luminance > 0.179 ? CONTRAST_DARK : CONTRAST_LIGHT;
+}
+
+// src/theme/createDesignTheme.ts
+function buildPrimaryScale(primaryHex) {
+  const steps = [
+    { key: "50", opacity: 0.05 },
+    { key: "100", opacity: 0.1 },
+    { key: "200", opacity: 0.2 },
+    { key: "300", opacity: 0.3 },
+    { key: "400", opacity: 0.4 },
+    { key: "600", opacity: 0.6 },
+    { key: "700", opacity: 0.7 },
+    { key: "800", opacity: 0.8 },
+    { key: "900", opacity: 0.9 }
+  ];
+  const out = {};
+  steps.forEach(({ key, opacity }) => {
+    out[key] = rgba(primaryHex, opacity);
+  });
+  return out;
+}
+function buildSecondaryScale(secondaryHex) {
+  const steps = [
+    { key: "50", opacity: 0.05 },
+    { key: "100", opacity: 0.1 },
+    { key: "200", opacity: 0.2 },
+    { key: "600", opacity: 0.6 },
+    { key: "700", opacity: 0.7 },
+    { key: "800", opacity: 0.8 },
+    { key: "900", opacity: 0.9 }
+  ];
+  const out = {};
+  steps.forEach(({ key, opacity }) => {
+    out[key] = rgba(secondaryHex, opacity);
+  });
+  return out;
+}
+function buildPrimaryScalePalette(primaryHex) {
+  const scale = buildPrimaryScale(primaryHex);
+  return {
+    50: scale["50"],
+    100: scale["100"],
+    200: scale["200"],
+    300: scale["300"],
+    400: scale["400"],
+    500: primaryHex,
+    600: scale["600"],
+    700: scale["700"],
+    800: scale["800"],
+    900: scale["900"],
+    main: primaryHex,
+    light: scale["200"],
+    dark: scale["800"],
+    contrastText: getContrastText(primaryHex)
+  };
+}
+function buildSecondaryScalePalette(secondaryHex) {
+  const scale = buildSecondaryScale(secondaryHex);
+  return {
+    50: scale["50"],
+    100: scale["100"],
+    200: scale["200"],
+    600: scale["600"],
+    700: scale["700"],
+    800: scale["800"],
+    900: scale["900"],
+    main: secondaryHex,
+    light: scale["200"],
+    dark: scale["800"],
+    contrastText: getContrastText(secondaryHex)
+  };
+}
+function createDesignTheme(config) {
+  const { primary, secondary } = config;
+  const foundation = FOUNDATION_COLORS;
+  const primaryPalette = buildPrimaryScalePalette(primary);
+  const secondaryPalette = buildSecondaryScalePalette(secondary);
+  const palette = {
+    mode: "light",
+    primary: primaryPalette,
+    secondary: secondaryPalette,
+    error: {
+      main: FOUNDATION_COLORS.state.error
+    },
+    warning: {
+      main: FOUNDATION_COLORS.state.warning
+    },
+    success: {
+      main: FOUNDATION_COLORS.state.success
+    },
+    info: {
+      main: FOUNDATION_COLORS.state.info
+    },
+    background: {
+      default: foundation.background.primary,
+      paper: foundation.background.elevated
+    },
+    text: {
+      primary: foundation.text.primary,
+      secondary: foundation.text.secondary,
+      disabled: foundation.text.disabled
+    },
+    grey: GRAY_SCALE,
+    divider: foundation.border.default
+  };
+  const themeOptions = {
+    palette,
+    typography: {
+      fontFamily: FONT_FAMILY_SANS,
+      h1: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_HEADING.h1.fontWeight,
+        fontSize: TYPOGRAPHY_HEADING.h1.fontSize,
+        lineHeight: TYPOGRAPHY_HEADING.h1.lineHeight
+      },
+      h2: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_HEADING.h2.fontWeight,
+        fontSize: TYPOGRAPHY_HEADING.h2.fontSize,
+        lineHeight: TYPOGRAPHY_HEADING.h2.lineHeight
+      },
+      h3: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_HEADING.h3.fontWeight,
+        fontSize: TYPOGRAPHY_HEADING.h3.fontSize,
+        lineHeight: TYPOGRAPHY_HEADING.h3.lineHeight
+      },
+      h4: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_HEADING.h4.fontWeight,
+        fontSize: TYPOGRAPHY_HEADING.h4.fontSize,
+        lineHeight: TYPOGRAPHY_HEADING.h4.lineHeight
+      },
+      h5: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_HEADING.h5.fontWeight,
+        fontSize: TYPOGRAPHY_HEADING.h5.fontSize,
+        lineHeight: TYPOGRAPHY_HEADING.h5.lineHeight
+      },
+      h6: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_HEADING.h6.fontWeight,
+        fontSize: TYPOGRAPHY_HEADING.h6.fontSize,
+        lineHeight: TYPOGRAPHY_HEADING.h6.lineHeight
+      },
+      body1: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_BODY.medium.fontWeight,
+        fontSize: TYPOGRAPHY_BODY.medium.fontSize,
+        lineHeight: TYPOGRAPHY_BODY.medium.lineHeight
+      },
+      body2: {
+        fontFamily: FONT_FAMILY_SANS,
+        fontWeight: TYPOGRAPHY_BODY.small.fontWeight,
+        fontSize: TYPOGRAPHY_BODY.small.fontSize,
+        lineHeight: TYPOGRAPHY_BODY.small.lineHeight
+      }
+    },
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            borderRadius: 0
+          },
+          outlined: {
+            color: CONTRAST_DARK,
+            "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+              color: CONTRAST_DARK
+            }
+          },
+          sizeSmall: {
+            height: 32,
+            minHeight: 32
+          },
+          sizeMedium: {
+            height: 40,
+            minHeight: 40
+          },
+          sizeLarge: {
+            height: 48,
+            minHeight: 48
+          }
+        }
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: ({ ownerState }) => {
+            const palette2 = ownerState.color === "secondary" ? secondaryPalette : primaryPalette;
+            return {
+              borderRadius: 0,
+              textTransform: "none",
+              color: CONTRAST_DARK,
+              "&:hover": {
+                backgroundColor: palette2[100]
+              },
+              "&.Mui-selected": {
+                backgroundColor: palette2.main,
+                color: palette2.contrastText,
+                "&:hover": {
+                  backgroundColor: palette2.dark,
+                  color: palette2.contrastText
+                }
+              }
+            };
+          }
+        }
+      },
+      MuiCheckbox: {
+        styleOverrides: {
+          root: {
+            variants: [
+              {
+                props: { size: "large" },
+                style: {
+                  width: 46,
+                  height: 46,
+                  padding: (46 - 28) / 2,
+                  "& .MuiSvgIcon-root": { fontSize: 28 }
+                }
+              }
+            ]
+          }
+        }
+      },
+      MuiRadio: {
+        styleOverrides: {
+          root: {
+            variants: [
+              {
+                props: { size: "large" },
+                style: {
+                  width: 46,
+                  height: 46,
+                  padding: (46 - 28) / 2,
+                  "& .MuiSvgIcon-root": { fontSize: 28 }
+                }
+              }
+            ]
+          }
+        }
+      },
+      MuiSwitch: {
+        styleOverrides: {
+          root: ({ ownerState }) => {
+            const size = ownerState.size;
+            const sizeConfig = size === "small" ? { trackWidth: 44, trackHeight: 24, thumb: 18 } : size === "large" ? { trackWidth: 60, trackHeight: 32, thumb: 26 } : { trackWidth: 52, trackHeight: 28, thumb: 22 };
+            const padding = (sizeConfig.trackHeight - sizeConfig.thumb) / 2;
+            return {
+              width: sizeConfig.trackWidth,
+              height: sizeConfig.trackHeight,
+              padding,
+              "& .MuiSwitch-switchBase": {
+                padding,
+                "&.Mui-checked": {
+                  transform: `translateX(${sizeConfig.trackWidth - sizeConfig.thumb - padding * 2}px)`
+                }
+              },
+              "& .MuiSwitch-thumb": {
+                width: sizeConfig.thumb,
+                height: sizeConfig.thumb
+              },
+              "& .MuiSwitch-track": {
+                borderRadius: sizeConfig.trackHeight / 2
+              }
+            };
+          }
+        }
+      },
+      MuiCssBaseline: {
+        styleOverrides: {
+          ":root": {
+            "--theme-primary": primary,
+            "--theme-secondary": secondary
+          }
+        }
+      }
+    }
+  };
+  return createTheme(themeOptions);
+}
+
+// src/theme/buildCssVariables.ts
+function entriesToVars(prefix, obj) {
+  const out = {};
+  for (const k of Object.keys(obj)) {
+    out[prefix + k] = obj[k];
+  }
+  return out;
+}
+function buildPrimaryScale2(primaryHex) {
+  const steps = PRIMARY_SCALE_KEYS.map((key, i) => ({
+    key,
+    opacity: PRIMARY_OPACITY_STEPS[i]
+  }));
+  const [r, g, b] = hexToRgb(primaryHex);
+  const out = {};
+  steps.forEach(({ key, opacity }) => {
+    out[key] = `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  });
+  return out;
+}
+function buildSecondaryScale2(secondaryHex) {
+  const steps = SECONDARY_SCALE_KEYS.map((key, i) => ({
+    key,
+    opacity: SECONDARY_OPACITY_STEPS[i]
+  }));
+  const [r, g, b] = hexToRgb(secondaryHex);
+  const out = {};
+  steps.forEach(({ key, opacity }) => {
+    out[key] = `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  });
+  return out;
+}
+function buildCssVariables(options) {
+  var _a;
+  const { primary, secondary } = options;
+  const foundation = FOUNDATION_COLORS;
+  const primaryRgb = hexToRgb(primary);
+  const secondaryRgb = hexToRgb(secondary);
+  const primaryScale = buildPrimaryScale2(primary);
+  const secondaryScale = buildSecondaryScale2(secondary);
+  return __spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({
+    // RGB triplets for opacity-based usage
+    "--primary-rgb": rgbToCssRgbString(primaryRgb),
+    "--secondary-rgb": rgbToCssRgbString(secondaryRgb),
+    // Brand (tenant)
+    "--color-brand-primary": primary,
+    "--color-brand-secondary": secondary
+  }, entriesToVars("--primary-", primaryScale)), entriesToVars("--secondary-", secondaryScale)), {
+    // Foundation – text
+    "--color-text-primary": foundation.text.primary,
+    "--color-text-secondary": foundation.text.secondary,
+    "--color-text-disabled": foundation.text.disabled,
+    "--color-text-inverse": foundation.text.inverse,
+    // Foundation – background
+    "--color-background-primary": foundation.background.primary,
+    "--color-background-secondary": foundation.background.secondary,
+    "--color-background-tertiary": foundation.background.tertiary,
+    "--color-background-elevated": foundation.background.elevated,
+    // Foundation – border (focus = brand primary for tenant theming)
+    "--color-border-default": foundation.border.default,
+    "--color-border-focus": primary,
+    "--color-border-error": foundation.border.error,
+    // Foundation – state
+    "--color-state-error": FOUNDATION_COLORS.state.error,
+    "--color-state-warning": FOUNDATION_COLORS.state.warning,
+    "--color-state-success": FOUNDATION_COLORS.state.success,
+    "--color-state-info": FOUNDATION_COLORS.state.info
+  }), entriesToVars("--gray-", GRAY_SCALE)), {
+    // Accents
+    "--accent-purple": ACCENTS.purple,
+    "--accent-dark-green": ACCENTS.darkGreen,
+    // Opacity utility
+    "--opacity-disabled": String(OPACITY_UTILITY.disabled),
+    "--opacity-hover": String(OPACITY_UTILITY.hover),
+    // Semantic aliases (component-level tokens that alias foundation/extended)
+    "--input-background": foundation.background.primary,
+    "--input-border": foundation.border.default,
+    "--input-border-focus": foundation.border.focus,
+    "--input-border-error": foundation.border.error,
+    "--input-text": foundation.text.primary,
+    "--input-placeholder": foundation.text.disabled,
+    "--card-background": foundation.background.elevated,
+    "--card-border": foundation.border.default,
+    "--navbar-background": foundation.background.elevated,
+    "--navbar-text": foundation.text.primary,
+    "--navbar-text-active": primary,
+    "--navbar-border": foundation.border.default,
+    "--link-default": primary,
+    "--link-hover": (_a = primaryScale["400"]) != null ? _a : rgba(primary, 0.4),
+    "--modal-background": foundation.background.elevated,
+    "--tooltip-background": secondary,
+    "--tooltip-text": foundation.text.inverse,
+    "--divider": foundation.border.default,
+    // Charts
+    "--chart-background": CHART_COLORS.background,
+    "--chart-text-labels": CHART_COLORS.textLabels,
+    "--chart-text-title": CHART_COLORS.textTitle,
+    "--chart-grid": CHART_COLORS.grid,
+    "--chart-series-blue": CHART_COLORS.series.blue,
+    "--chart-series-teal": CHART_COLORS.series.teal,
+    "--chart-series-yellow": CHART_COLORS.series.yellow,
+    "--chart-series-orange": CHART_COLORS.series.orange,
+    "--chart-series-red": CHART_COLORS.series.red,
+    "--chart-series-pink": CHART_COLORS.series.pink,
+    "--chart-series-purple": CHART_COLORS.series.purple,
+    "--chart-series-indigo": CHART_COLORS.series.indigo,
+    "--chart-series-light-blue": CHART_COLORS.series.lightBlue,
+    "--chart-series-green": CHART_COLORS.series.green
+  }), getTypographyCssVars());
+}
+
+// src/theme/ThemeProvider.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ThemeProvider({
+  children,
+  primary = DEFAULT_THEME_OPTIONS.primary,
+  secondary = DEFAULT_THEME_OPTIONS.secondary,
+  injectCssVariables = true
+}) {
+  const options = useMemo(() => ({ primary, secondary }), [primary, secondary]);
+  const theme = useMemo(() => createDesignTheme(options), [options]);
+  const cssVars = useMemo(() => buildCssVariables(options), [options]);
+  const styleId = useId().replace(/:/g, "-");
+  const styleContent = useMemo(() => {
+    if (!injectCssVariables) return "";
+    const declarations = Object.entries(cssVars).map(([key, value]) => `${key}: ${value};`).join("\n  ");
+    return `:root {
+  ${declarations}
+}`;
+  }, [cssVars, injectCssVariables]);
+  return /* @__PURE__ */ jsxs(MuiThemeProvider, { theme, children: [
+    injectCssVariables && styleContent ? /* @__PURE__ */ jsx("style", { id: `theme-vars-${styleId}`, "data-theme-vars": true, children: styleContent }) : null,
+    /* @__PURE__ */ jsx(CssBaseline, {}),
+    children
+  ] });
+}
+ThemeProvider.displayName = "ThemeProvider";
+
+export {
+  FOUNDATION_COLORS,
+  GRAY_SCALE,
+  ACCENTS,
+  OPACITY_UTILITY,
+  CHART_COLORS,
+  FONT_FAMILY_SANS,
+  TYPOGRAPHY_DISPLAY,
+  TYPOGRAPHY_HEADING,
+  TYPOGRAPHY_BODY,
+  TYPOGRAPHY_LABEL,
+  TYPOGRAPHY_UTILITY,
+  TYPOGRAPHY,
+  getTypographyCssVars,
+  TYPOGRAPHY_EXTRA_CSS,
+  VIEWPORT_LABELS,
+  VIEWPORT_MAX_WIDTH,
+  getResponsiveFontOverrides,
+  hexToRgb,
+  rgbToCssRgbString,
+  rgba,
+  buildOpacityScale,
+  getLuminance,
+  getContrastText,
+  createDesignTheme,
+  buildCssVariables,
+  ThemeProvider
+};