@omnitron-dev/prism 0.1.1

package/dist/chunk-DXXZ3ITR.js

@@ -0,0 +1,4227 @@
+import { buttonClasses } from '@mui/material/Button';
+import { iconButtonClasses } from '@mui/material/IconButton';
+import { accordionClasses } from '@mui/material/Accordion';
+import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
+import { autocompleteClasses } from '@mui/material/Autocomplete';
+import SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
+import { tableRowClasses } from '@mui/material/TableRow';
+import { tableCellClasses } from '@mui/material/TableCell';
+import { stepIconClasses } from '@mui/material/StepIcon';
+import { stepLabelClasses } from '@mui/material/StepLabel';
+import { toggleButtonClasses } from '@mui/material/ToggleButton';
+import { paginationItemClasses } from '@mui/material/PaginationItem';
+import { chipClasses } from '@mui/material/Chip';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { filledInputClasses } from '@mui/material/FilledInput';
+import { inputAdornmentClasses } from '@mui/material/InputAdornment';
+import { inputLabelClasses } from '@mui/material/InputLabel';
+import { checkboxClasses } from '@mui/material/Checkbox';
+import { radioClasses } from '@mui/material/Radio';
+import { switchClasses } from '@mui/material/Switch';
+import { formLabelClasses } from '@mui/material/FormLabel';
+import { jsx } from 'react/jsx-runtime';
+import { tabClasses } from '@mui/material/Tab';
+import { createTheme, responsiveFontSizes } from '@mui/material/styles';
+import * as locales from '@mui/material/locale';
+
+// src/theme/utils/color.ts
+function hexToRgb(hex) {
+  const h = hex.replace("#", "");
+  const expanded = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  const bigint = parseInt(expanded, 16);
+  const r = bigint >> 16 & 255;
+  const g = bigint >> 8 & 255;
+  const b = bigint & 255;
+  return [r, g, b];
+}
+function hexToRgbChannel(hex) {
+  const [r, g, b] = hexToRgb(hex);
+  return `${r} ${g} ${b}`;
+}
+function rgbToHex(r, g, b) {
+  const to2 = (n) => Math.round(n).toString(16).padStart(2, "0");
+  return `#${to2(r)}${to2(g)}${to2(b)}`.toUpperCase();
+}
+function hexToHsl(hex) {
+  const [r, g, b] = hexToRgb(hex);
+  const r1 = r / 255;
+  const g1 = g / 255;
+  const b1 = b / 255;
+  const max = Math.max(r1, g1, b1);
+  const min = Math.min(r1, g1, b1);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  const d = max - min;
+  if (d !== 0) {
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r1:
+        h = (g1 - b1) / d + (g1 < b1 ? 6 : 0);
+        break;
+      case g1:
+        h = (b1 - r1) / d + 2;
+        break;
+      default:
+        h = (r1 - g1) / d + 4;
+    }
+    h /= 6;
+  }
+  return { h: h * 360, s: s * 100, l: l * 100 };
+}
+function hslToHex(h, s, l) {
+  const s1 = s / 100;
+  const l1 = l / 100;
+  const c = (1 - Math.abs(2 * l1 - 1)) * s1;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = l1 - c / 2;
+  let r1;
+  let g1;
+  let b1;
+  if (h >= 0 && h < 60) {
+    [r1, g1, b1] = [c, x, 0];
+  } else if (h >= 60 && h < 120) {
+    [r1, g1, b1] = [x, c, 0];
+  } else if (h >= 120 && h < 180) {
+    [r1, g1, b1] = [0, c, x];
+  } else if (h >= 180 && h < 240) {
+    [r1, g1, b1] = [0, x, c];
+  } else if (h >= 240 && h < 300) {
+    [r1, g1, b1] = [x, 0, c];
+  } else {
+    [r1, g1, b1] = [c, 0, x];
+  }
+  return rgbToHex(Math.round((r1 + m) * 255), Math.round((g1 + m) * 255), Math.round((b1 + m) * 255));
+}
+function rgba(color, alpha) {
+  const [r, g, b] = hexToRgb(color);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function cssVarRgba(channel, alpha) {
+  return `rgba(${channel} / ${alpha})`;
+}
+function generatePaletteColorWithChannels(color) {
+  return {
+    ...color,
+    lighterChannel: hexToRgbChannel(color.lighter),
+    lightChannel: hexToRgbChannel(color.light),
+    mainChannel: hexToRgbChannel(color.main),
+    darkChannel: hexToRgbChannel(color.dark),
+    darkerChannel: hexToRgbChannel(color.darker),
+    contrastTextChannel: hexToRgbChannel(color.contrastText)
+  };
+}
+function generateColorScaleWithChannels(scale) {
+  const shadeKeys = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+  const channels = {};
+  for (const key of shadeKeys) {
+    const channelKey = `${key}Channel`;
+    channels[channelKey] = hexToRgbChannel(scale[key]);
+  }
+  return { ...scale, ...channels };
+}
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function generateColorScale(baseColor) {
+  const base = hexToHsl(baseColor);
+  const tones = [
+    { key: 50, lDelta: 40 },
+    { key: 100, lDelta: 32 },
+    { key: 200, lDelta: 24 },
+    { key: 300, lDelta: 16 },
+    { key: 400, lDelta: 8 },
+    { key: 500, lDelta: 0 },
+    { key: 600, lDelta: -8 },
+    { key: 700, lDelta: -16 },
+    { key: 800, lDelta: -24 },
+    { key: 900, lDelta: -32 },
+    { key: 950, lDelta: -40 }
+  ];
+  const scale = {};
+  for (const { key, lDelta } of tones) {
+    const l = clamp(base.l + lDelta, 5, 95);
+    scale[key] = hslToHex(base.h, base.s, l);
+  }
+  return scale;
+}
+function getLuminanceForContrast(hex) {
+  const rgb = hex.replace("#", "").match(/.{2}/g);
+  if (!rgb) return 0;
+  const [r, g, b] = rgb.map((c) => {
+    const val = parseInt(c, 16) / 255;
+    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function getContrastTextColor(bgColor) {
+  const luminance = getLuminanceForContrast(bgColor);
+  return luminance < 0.4 ? "#FFFFFF" : "#212121";
+}
+function createPaletteColorFromScale(scale, mode = "light") {
+  const mainColor = mode === "dark" ? scale[400] : scale[500];
+  const contrastText = getContrastTextColor(mainColor);
+  if (mode === "dark") {
+    return {
+      lighter: scale[950],
+      light: scale[700],
+      main: mainColor,
+      dark: scale[300],
+      darker: scale[100],
+      contrastText
+    };
+  }
+  return {
+    lighter: scale[50],
+    light: scale[400],
+    main: mainColor,
+    dark: scale[600],
+    darker: scale[900],
+    contrastText
+  };
+}
+function invertColorScale(scale) {
+  return {
+    50: scale[950],
+    100: scale[800],
+    200: scale[700],
+    300: scale[600],
+    400: scale[500],
+    500: scale[400],
+    600: scale[300],
+    700: scale[200],
+    800: scale[100],
+    900: scale[50],
+    950: "#FFFFFF"
+  };
+}
+function getLuminance(hex) {
+  const [r, g, b] = hexToRgb(hex).map((c) => {
+    const sRgb = c / 255;
+    return sRgb <= 0.03928 ? sRgb / 12.92 : Math.pow((sRgb + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function getContrastRatio(color1, color2) {
+  const l1 = getLuminance(color1);
+  const l2 = getLuminance(color2);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function isLightColor(hex) {
+  return getLuminance(hex) > 0.5;
+}
+function getContrastText(background, lightText = "#FFFFFF", darkText = "#000000") {
+  return isLightColor(background) ? darkText : lightText;
+}
+function lighten(hex, amount) {
+  const hsl = hexToHsl(hex);
+  const newL = clamp(hsl.l + amount, 0, 100);
+  return hslToHex(hsl.h, hsl.s, newL);
+}
+function darken(hex, amount) {
+  const hsl = hexToHsl(hex);
+  const newL = clamp(hsl.l - amount, 0, 100);
+  return hslToHex(hsl.h, hsl.s, newL);
+}
+function mix(color1, color2, weight = 0.5) {
+  const [r1, g1, b1] = hexToRgb(color1);
+  const [r2, g2, b2] = hexToRgb(color2);
+  const w = clamp(weight, 0, 1);
+  const newR = Math.round(r1 * w + r2 * (1 - w));
+  const newG = Math.round(g1 * w + g2 * (1 - w));
+  const newB = Math.round(b1 * w + b2 * (1 - w));
+  return rgbToHex(newR, newG, newB);
+}
+function validateOpacity(opacity, color) {
+  const isCSSVar = (val) => val.includes("var(--");
+  const isPercentage = (val) => val.trim().endsWith("%");
+  const errors = {
+    invalid: `[varAlpha]: Invalid opacity "${opacity}" for "${color}".`,
+    range: "Must be a number between 0 and 1 (e.g., 0.48).",
+    format: 'Must be a percentage (e.g., "48%") or CSS variable (e.g., "var(--opacity)").'
+  };
+  if (typeof opacity === "string") {
+    if (isPercentage(opacity)) return opacity;
+    if (isCSSVar(opacity)) return `calc(${opacity} * 100%)`;
+    const parsed = parseFloat(opacity.trim());
+    if (!isNaN(parsed) && parsed >= 0 && parsed <= 1) {
+      return `${Number((parsed * 100).toFixed(2))}%`;
+    }
+    throw new Error(`${errors.invalid} ${errors.format}`);
+  }
+  if (typeof opacity === "number") {
+    if (opacity >= 0 && opacity <= 1) {
+      return `${Number((opacity * 100).toFixed(2))}%`;
+    }
+    throw new Error(`${errors.invalid} ${errors.range}`);
+  }
+  throw new Error(`${errors.invalid}`);
+}
+function varAlpha(color, opacity = 1) {
+  if (!color?.trim()) {
+    throw new Error("[varAlpha]: Color is undefined or empty!");
+  }
+  const isUnsupported = color.startsWith("#") || color.startsWith("rgb(") || color.startsWith("rgba(") || !color.includes("var") && color.includes("Channel");
+  if (isUnsupported) {
+    throw new Error(
+      [
+        `[varAlpha]: Unsupported color format "${color}"`,
+        "\u2705 Supported formats:",
+        '  - RGB channels: "0 184 217"',
+        '  - CSS variables: "var(--palette-primary-mainChannel)"',
+        "  - currentColor",
+        "\u274C Unsupported formats:",
+        '  - Hex: "#00B8D9"',
+        '  - RGB: "rgb(0, 184, 217)"',
+        '  - RGBA: "rgba(0, 184, 217, 1)"'
+      ].join("\n")
+    );
+  }
+  const alpha = validateOpacity(opacity, color);
+  if (color.toLowerCase() === "currentcolor") {
+    return `color-mix(in srgb, currentColor ${alpha}, transparent)`;
+  }
+  return `rgba(${color} / ${alpha})`;
+}
+
+// src/theme/colors/base.ts
+var grey = {
+  50: "#F7FAFC",
+  100: "#EBF2F5",
+  200: "#DBE6EB",
+  300: "#C3D3DB",
+  400: "#9CAEB8",
+  500: "#77878F",
+  600: "#4D595E",
+  700: "#262D30",
+  800: "#1B2124",
+  900: "#111417",
+  950: "#06080A"
+};
+var blue = {
+  50: "#EAF3FD",
+  100: "#C6DDFB",
+  200: "#A1C7F8",
+  300: "#7DB1F5",
+  400: "#589BF3",
+  500: "#3385F0",
+  600: "#2B71CC",
+  700: "#245DA8",
+  800: "#1C4984",
+  900: "#143560",
+  950: "#0A1B30"
+};
+var green = {
+  50: "#E6F5F0",
+  100: "#BBE4D5",
+  200: "#8ED3BA",
+  300: "#62C29F",
+  400: "#35B084",
+  500: "#099F69",
+  600: "#088759",
+  700: "#066F49",
+  800: "#05573A",
+  900: "#04402A",
+  950: "#022015"
+};
+var purple = {
+  50: "#F2E4FE",
+  100: "#E6CAFE",
+  200: "#D6A8FD",
+  300: "#C686FC",
+  400: "#B663FB",
+  500: "#A641FA",
+  600: "#8D37D5",
+  700: "#742DAF",
+  800: "#5B2489",
+  900: "#421A64",
+  950: "#210D32"
+};
+var red = {
+  50: "#F9E2E6",
+  100: "#F2C1CA",
+  200: "#E99AA8",
+  300: "#E17286",
+  400: "#D84A63",
+  500: "#D02241",
+  600: "#B11D37",
+  700: "#91182D",
+  800: "#721324",
+  900: "#530E1A",
+  950: "#3A0A12"
+};
+var orange = {
+  50: "#FEEFE1",
+  100: "#FCDFC4",
+  200: "#FBCB9D",
+  300: "#F9B677",
+  400: "#F8A250",
+  500: "#F68D2A",
+  600: "#D17824",
+  700: "#AC631D",
+  800: "#874E17",
+  900: "#623811",
+  950: "#372412"
+};
+var lightBlue = {
+  50: "#E0F3FA",
+  100: "#BCE6F4",
+  200: "#90D6EC",
+  300: "#64C6E5",
+  400: "#39B6DD",
+  500: "#0DA6D6",
+  600: "#0B8DB6",
+  700: "#097496",
+  800: "#075B76",
+  900: "#054256",
+  950: "#03212B"
+};
+var basic = {
+  white: "#FFFFFF",
+  black: "#000000"
+};
+var baseColors = {
+  grey,
+  blue,
+  green,
+  purple,
+  red,
+  orange,
+  lightBlue,
+  basic
+};
+
+// src/theme/palette/builder.ts
+function getLuminance2(hex) {
+  const rgb = hex.replace("#", "").match(/.{2}/g);
+  if (!rgb) return 0;
+  const [r, g, b] = rgb.map((c) => {
+    const val = parseInt(c, 16) / 255;
+    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function getContrastText2(bgColor) {
+  const luminance = getLuminance2(bgColor);
+  return luminance < 0.3 ? "#FFFFFF" : "#212121";
+}
+function buildPaletteColor(scale, mode = "light") {
+  const mainColor = mode === "dark" ? scale[400] : scale[500];
+  const contrastText = getContrastText2(mainColor);
+  const color = mode === "dark" ? {
+    lighter: scale[950],
+    light: scale[700],
+    main: mainColor,
+    dark: scale[300],
+    darker: scale[100],
+    contrastText
+  } : {
+    lighter: scale[50],
+    light: scale[400],
+    main: mainColor,
+    dark: scale[600],
+    darker: scale[900],
+    contrastText
+  };
+  return generatePaletteColorWithChannels(color);
+}
+function buildBackground(grey2, mode = "light") {
+  if (mode === "dark") {
+    return {
+      default: grey2[950],
+      paper: grey2[900],
+      neutral: grey2[800],
+      elevation1: grey2[800],
+      elevation2: grey2[700],
+      elevation3: grey2[600],
+      elevation4: grey2[500],
+      menu: grey2[900],
+      menuElevation1: grey2[800],
+      menuElevation2: grey2[700]
+    };
+  }
+  return {
+    default: "#FFFFFF",
+    paper: "#FFFFFF",
+    neutral: grey2[50],
+    elevation1: grey2[50],
+    elevation2: grey2[100],
+    elevation3: grey2[200],
+    elevation4: grey2[300],
+    menu: "#FFFFFF",
+    menuElevation1: grey2[50],
+    menuElevation2: grey2[100]
+  };
+}
+function buildText(grey2, mode = "light") {
+  const colors = mode === "dark" ? {
+    primary: grey2[50],
+    secondary: grey2[300],
+    disabled: grey2[500]
+  } : {
+    primary: grey2[900],
+    secondary: grey2[600],
+    disabled: grey2[400]
+  };
+  return {
+    ...colors,
+    primaryChannel: hexToRgbChannel(colors.primary),
+    secondaryChannel: hexToRgbChannel(colors.secondary),
+    disabledChannel: hexToRgbChannel(colors.disabled)
+  };
+}
+function buildAction(grey2, mode = "light") {
+  if (mode === "dark") {
+    return {
+      active: grey2[400],
+      hover: grey2[700],
+      selected: grey2[700],
+      disabled: grey2[600],
+      disabledBackground: grey2[800],
+      focus: grey2[600]
+    };
+  }
+  return {
+    active: grey2[500],
+    hover: grey2[100],
+    selected: grey2[100],
+    disabled: grey2[400],
+    disabledBackground: grey2[200],
+    focus: grey2[300]
+  };
+}
+function buildVibrant(commonWhiteChannel, textPrimary, mode = "light") {
+  const textChannel = hexToRgbChannel(textPrimary);
+  return {
+    listItemHover: cssVarRgba(commonWhiteChannel, mode === "dark" ? 0.08 : 0.5),
+    buttonHover: cssVarRgba(commonWhiteChannel, mode === "dark" ? 0.12 : 0.7),
+    textFieldHover: cssVarRgba(commonWhiteChannel, mode === "dark" ? 0.12 : 0.7),
+    text: {
+      secondary: cssVarRgba(textChannel, 0.76),
+      disabled: cssVarRgba(textChannel, 0.4)
+    },
+    overlay: cssVarRgba(commonWhiteChannel, mode === "dark" ? 0.16 : 0.7)
+  };
+}
+function buildChartColors(options) {
+  return {
+    chGrey: generateColorScaleWithChannels(options.grey),
+    chRed: generateColorScaleWithChannels(options.red),
+    chBlue: generateColorScaleWithChannels(options.blue),
+    chGreen: generateColorScaleWithChannels(options.green),
+    chOrange: generateColorScaleWithChannels(options.orange),
+    chLightBlue: generateColorScaleWithChannels(options.lightBlue),
+    chPurple: generateColorScaleWithChannels(options.purple)
+  };
+}
+function buildPalette(options) {
+  const { primary, secondary, info, success, warning, error, grey: grey2, mode, backgroundDefault, paperColor } = options;
+  const greyWithChannels = generateColorScaleWithChannels(grey2);
+  const background = buildBackground(grey2, mode);
+  const text = buildText(grey2, mode);
+  const action = buildAction(grey2, mode);
+  if (backgroundDefault) {
+    background.default = backgroundDefault;
+  }
+  if (paperColor) {
+    background.paper = paperColor;
+    background.menu = paperColor;
+  }
+  const common = {
+    black: basic.black,
+    white: basic.white,
+    blackChannel: hexToRgbChannel(basic.black),
+    whiteChannel: hexToRgbChannel(basic.white)
+  };
+  const vibrant = buildVibrant(common.whiteChannel, text.primary, mode);
+  const chart = buildChartColors({
+    grey: grey2,
+    red,
+    blue,
+    green,
+    orange,
+    lightBlue,
+    purple
+  });
+  const divider = mode === "dark" ? grey2[700] : grey2[300];
+  const dividerLight = cssVarRgba(hexToRgbChannel(grey2[mode === "dark" ? 700 : 300]), 0.6);
+  const menuDivider = cssVarRgba(hexToRgbChannel(grey2[700]), 0);
+  return {
+    mode,
+    common,
+    grey: greyWithChannels,
+    primary: buildPaletteColor(primary, mode),
+    secondary: buildPaletteColor(secondary, mode),
+    info: buildPaletteColor(info, mode),
+    success: buildPaletteColor(success, mode),
+    warning: buildPaletteColor(warning, mode),
+    error: buildPaletteColor(error, mode),
+    neutral: buildPaletteColor(grey2, mode),
+    background,
+    text,
+    action,
+    divider,
+    dividerLight,
+    menuDivider,
+    vibrant,
+    chart
+  };
+}
+var defaultLightPalette = buildPalette({
+  primary: blue,
+  secondary: purple,
+  info: lightBlue,
+  success: green,
+  warning: orange,
+  error: red,
+  grey,
+  mode: "light"
+});
+var defaultDarkPalette = buildPalette({
+  primary: blue,
+  secondary: purple,
+  info: lightBlue,
+  success: green,
+  warning: orange,
+  error: red,
+  grey,
+  mode: "dark"
+});
+
+// src/theme/components/theme-utils.ts
+function getGreyChannel(theme, shade = "500") {
+  const channelKey = `${shade}Channel`;
+  const vars = theme.vars?.palette.grey;
+  const fallbacks = {
+    "500": "145 158 171",
+    "900": "0 0 0"
+  };
+  return vars?.[channelKey] ?? fallbacks[shade];
+}
+function getColorChannel(theme, color) {
+  const vars = theme.vars?.palette[color];
+  const fallbacks = {
+    primary: "51 133 240",
+    success: "9 159 105",
+    error: "208 34 65",
+    warning: "246 141 42",
+    info: "13 166 214"
+  };
+  return vars?.mainChannel ?? fallbacks[color];
+}
+function getDensityMultiplier(density) {
+  switch (density) {
+    case "compact":
+      return 0.75;
+    case "comfortable":
+      return 1.25;
+    default:
+      return 1;
+  }
+}
+
+// src/theme/components/Button.ts
+var btnColors = ["primary", "secondary", "info", "success", "warning", "error"];
+var softVariants = [
+  ...btnColors.map((color) => ({
+    props: { variant: "soft", color },
+    style: ({ theme }) => ({
+      backgroundColor: `rgba(var(--prism-${color}-main-channel, 51 133 240) / 0.16)`,
+      color: theme.vars?.palette[color]?.dark || theme.palette[color].dark,
+      boxShadow: "none",
+      "&:hover": {
+        backgroundColor: `rgba(var(--prism-${color}-main-channel, 51 133 240) / 0.32)`,
+        boxShadow: "none"
+      },
+      "&:active": {
+        backgroundColor: `rgba(var(--prism-${color}-main-channel, 51 133 240) / 0.4)`
+      }
+    })
+  })),
+  // Neutral soft variant
+  {
+    props: { variant: "soft", color: "neutral" },
+    style: ({ theme }) => ({
+      backgroundColor: theme.vars?.palette.background.elevation2 || theme.palette.grey[100],
+      color: theme.vars?.palette.text.primary || theme.palette.text.primary,
+      boxShadow: "none",
+      "&:hover": {
+        backgroundColor: theme.vars?.palette.background.elevation3 || theme.palette.grey[200],
+        boxShadow: "none"
+      }
+    })
+  },
+  // Inherit soft variant
+  {
+    props: { variant: "soft", color: "inherit" },
+    style: ({ theme }) => ({
+      backgroundColor: theme.vars?.palette.action.selected || theme.palette.action.selected,
+      color: theme.vars?.palette.text.primary || theme.palette.text.primary,
+      boxShadow: "none",
+      "&:hover": {
+        backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover,
+        boxShadow: "none"
+      }
+    })
+  }
+];
+var dashedVariants = [
+  ...btnColors.map((color) => ({
+    props: { variant: "dashed", color },
+    style: ({ theme }) => ({
+      border: `1px dashed ${theme.vars?.palette[color]?.main || theme.palette[color].main}`,
+      backgroundColor: "transparent",
+      color: theme.vars?.palette[color]?.main || theme.palette[color].main,
+      "&:hover": {
+        backgroundColor: `rgba(var(--prism-${color}-main-channel, 51 133 240) / 0.08)`,
+        borderColor: theme.vars?.palette[color]?.dark || theme.palette[color].dark
+      }
+    })
+  })),
+  // Inherit dashed variant
+  {
+    props: { variant: "dashed", color: "inherit" },
+    style: ({ theme }) => ({
+      border: `1px dashed ${theme.vars?.palette.grey?.[500] || theme.palette.grey[500]}`,
+      backgroundColor: "transparent",
+      color: theme.vars?.palette.text.primary || theme.palette.text.primary,
+      "&:hover": {
+        backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover,
+        borderColor: theme.vars?.palette.text.primary || theme.palette.text.primary
+      }
+    })
+  }
+];
+var shapes = ["circle", "square"];
+var shapeSizes = { small: 30, medium: 36, large: 42, xLarge: 52 };
+var shapeVariants = shapes.flatMap(
+  (shape) => Object.keys(shapeSizes).map((size) => ({
+    props: { shape, size },
+    style: {
+      height: shapeSizes[size],
+      minWidth: shapeSizes[size],
+      padding: 0,
+      borderRadius: shape === "circle" ? "50%" : void 0
+    }
+  }))
+);
+var outlinedNeutralVariants = [
+  {
+    props: { variant: "outlined", color: "neutral" },
+    style: ({ theme }) => ({
+      borderColor: theme.vars?.palette.divider || theme.palette.divider,
+      color: theme.vars?.palette.text.primary || theme.palette.text.primary,
+      "&:hover": {
+        backgroundColor: theme.vars?.palette.background.elevation2 || theme.palette.grey[100],
+        borderColor: theme.vars?.palette.text.secondary || theme.palette.text.secondary
+      }
+    })
+  }
+];
+var disabledVariants = [
+  {
+    props: { variant: "soft" },
+    style: ({ theme }) => ({
+      [`&.${buttonClasses.disabled}`]: {
+        backgroundColor: theme.vars?.palette.action.disabledBackground || theme.palette.action.disabledBackground
+      }
+    })
+  },
+  {
+    props: { variant: "dashed" },
+    style: ({ theme }) => ({
+      [`&.${buttonClasses.disabled}`]: {
+        borderStyle: "dashed"
+      }
+    })
+  }
+];
+function createButtonOverrides(config) {
+  const { borderRadius, density } = config;
+  const dm = getDensityMultiplier(density);
+  const sizeVariants = [
+    {
+      props: { size: "xLarge" },
+      style: {
+        minHeight: 56,
+        fontSize: "15px",
+        padding: `${10 * dm}px ${22 * dm}px`,
+        lineHeight: 1.467
+      }
+    }
+  ];
+  return {
+    defaultProps: {
+      disableElevation: true
+    },
+    styleOverrides: {
+      root: {
+        textTransform: "none",
+        fontSize: "14px",
+        fontWeight: 600,
+        borderRadius,
+        padding: `${8 * dm}px ${16 * dm}px`,
+        lineHeight: 1.429,
+        variants: [
+          ...softVariants,
+          ...dashedVariants,
+          ...shapeVariants,
+          ...outlinedNeutralVariants,
+          ...sizeVariants,
+          ...disabledVariants
+        ]
+      },
+      sizeLarge: {
+        fontSize: "16px",
+        padding: `${10 * dm}px ${22 * dm}px`,
+        lineHeight: 1.375
+      },
+      sizeSmall: {
+        padding: `${6 * dm}px ${10 * dm}px`,
+        fontSize: "13px",
+        lineHeight: 1.286
+      },
+      outlinedSizeLarge: {
+        paddingTop: 9 * dm,
+        paddingBottom: 9 * dm
+      },
+      outlinedSizeMedium: {
+        paddingTop: 7 * dm,
+        paddingBottom: 7 * dm
+      },
+      outlinedSizeSmall: {
+        paddingTop: 5 * dm,
+        paddingBottom: 5 * dm
+      },
+      startIcon: {
+        marginRight: 4,
+        [`& > *:first-of-type`]: {
+          fontSize: 16
+        }
+      },
+      endIcon: {
+        marginLeft: 4,
+        [`& > *:first-of-type`]: {
+          fontSize: 16
+        }
+      }
+    }
+  };
+}
+function createButtonBaseOverrides() {
+  return {
+    defaultProps: {
+      disableRipple: false
+    }
+  };
+}
+function createButtonGroupOverrides(config) {
+  return {
+    defaultProps: {
+      disableElevation: true
+    },
+    styleOverrides: {
+      root: {
+        borderRadius: config.borderRadius
+      }
+    }
+  };
+}
+
+// src/theme/mixins.ts
+function getHoverStyles(hoverOption, hoverBase) {
+  if (!hoverOption) return {};
+  return {
+    "&:hover": {
+      ...hoverBase,
+      ...typeof hoverOption === "object" ? hoverOption : {}
+    }
+  };
+}
+function filledStyles(theme, colorKey, options) {
+  if (!colorKey) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("[Prism filledStyles] Missing colorKey parameter.");
+    }
+    return {};
+  }
+  const palette = theme.vars?.palette || theme.palette;
+  const grey2 = palette.grey;
+  if (colorKey === "default") {
+    const base2 = {
+      color: grey2[800],
+      backgroundColor: grey2[300]
+    };
+    const hover2 = getHoverStyles(options?.hover, {
+      backgroundColor: grey2[400]
+    });
+    return { ...base2, ...hover2 };
+  }
+  if (colorKey === "inherit") {
+    const base2 = {
+      color: palette.common.white,
+      backgroundColor: grey2[800]
+    };
+    const hover2 = getHoverStyles(options?.hover, {
+      backgroundColor: grey2[700]
+    });
+    return { ...base2, ...hover2 };
+  }
+  if (colorKey === "white" || colorKey === "black") {
+    const oppositeColor = colorKey === "white" ? "black" : "white";
+    const base2 = {
+      color: palette.common[oppositeColor],
+      backgroundColor: palette.common[colorKey]
+    };
+    const hover2 = getHoverStyles(options?.hover, {
+      opacity: 0.8
+    });
+    return { ...base2, ...hover2 };
+  }
+  const paletteColor = palette[colorKey];
+  const base = {
+    color: paletteColor.contrastText,
+    backgroundColor: paletteColor.main
+  };
+  const hover = getHoverStyles(options?.hover, {
+    backgroundColor: paletteColor.dark
+  });
+  return { ...base, ...hover };
+}
+function softStyles(theme, colorKey, options) {
+  if (!colorKey) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("[Prism softStyles] Missing colorKey parameter.");
+    }
+    return {};
+  }
+  const palette = theme.vars?.palette || theme.palette;
+  const grey2 = palette.grey;
+  if (colorKey === "default") {
+    return {
+      ...filledStyles(theme, "default", options),
+      boxShadow: "none"
+    };
+  }
+  if (colorKey === "inherit") {
+    const greyChannel = grey2["500Channel"] || "145, 158, 171";
+    const base2 = {
+      boxShadow: "none",
+      backgroundColor: varAlpha(greyChannel, 0.16)
+    };
+    const hover2 = getHoverStyles(options?.hover, {
+      backgroundColor: varAlpha(greyChannel, 0.32)
+    });
+    return { ...base2, ...hover2 };
+  }
+  if (colorKey === "white" || colorKey === "black") {
+    const base2 = {
+      boxShadow: "none",
+      color: palette.common[colorKey],
+      backgroundColor: varAlpha("currentColor", 0.08)
+    };
+    const hover2 = getHoverStyles(options?.hover, {
+      backgroundColor: varAlpha("currentColor", 0.16)
+    });
+    return { ...base2, ...hover2 };
+  }
+  const paletteColor = palette[colorKey];
+  const mainChannel = paletteColor.mainChannel || palette.primary.mainChannel || "51, 133, 240";
+  const base = {
+    boxShadow: "none",
+    color: paletteColor.dark,
+    backgroundColor: varAlpha(mainChannel, 0.16)
+  };
+  const hover = getHoverStyles(options?.hover, {
+    backgroundColor: varAlpha(mainChannel, 0.32)
+  });
+  return { ...base, ...hover };
+}
+function bgGradient(options) {
+  const { images, sizes, positions, colors, direction = "to bottom" } = options;
+  if (colors && colors.length > 0) {
+    return {
+      background: `linear-gradient(${direction}, ${colors.join(", ")})`
+    };
+  }
+  if (images && images.length > 0) {
+    return {
+      backgroundImage: images.join(", "),
+      backgroundSize: sizes?.join(", ") || "cover",
+      backgroundPosition: positions?.join(", ") || "center",
+      backgroundRepeat: "no-repeat"
+    };
+  }
+  return {};
+}
+function bgBlur(options) {
+  const { blur = 20, color = "rgba(255, 255, 255, 0.8)" } = options;
+  return {
+    backdropFilter: `blur(${blur}px)`,
+    WebkitBackdropFilter: `blur(${blur}px)`,
+    backgroundColor: color
+  };
+}
+function paperStyles(theme, options) {
+  const { blur = 20, color, dropdown } = options ?? {};
+  const palette = theme.vars?.palette || theme.palette;
+  const baseStyles = {
+    backdropFilter: `blur(${blur}px)`,
+    WebkitBackdropFilter: `blur(${blur}px)`,
+    backgroundColor: color ?? varAlpha("255, 255, 255", 0.9)
+  };
+  if (dropdown) {
+    const customShadows = theme.customShadows;
+    const greyChannel = palette.grey["500Channel"] || "145, 158, 171";
+    return {
+      ...baseStyles,
+      padding: theme.spacing(0.5),
+      boxShadow: customShadows?.dropdown || `0 0 2px 0 rgba(${greyChannel}, 0.24), -20px 20px 40px -4px rgba(${greyChannel}, 0.24)`,
+      borderRadius: `${Number(theme.shape.borderRadius) * 1.25}px`
+    };
+  }
+  return baseStyles;
+}
+function menuItemStyles(theme) {
+  const palette = theme.vars?.palette || theme.palette;
+  return {
+    ...theme.typography.body2,
+    padding: theme.spacing(0.75, 1),
+    borderRadius: Number(theme.shape.borderRadius) * 0.75,
+    "&:not(:last-of-type)": {
+      marginBottom: 4
+    },
+    "&.Mui-selected": {
+      fontWeight: theme.typography.fontWeightMedium,
+      backgroundColor: palette.action.selected,
+      "&:hover": { backgroundColor: palette.action.hover }
+    }
+  };
+}
+function maxLine(options) {
+  const { lines, lineHeight = 1.5 } = options;
+  return {
+    overflow: "hidden",
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: lines,
+    textOverflow: "ellipsis",
+    ...lineHeight && { lineHeight }
+  };
+}
+function textGradient(direction, ...colors) {
+  return {
+    background: `linear-gradient(${direction}, ${colors.join(", ")})`,
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    backgroundClip: "text",
+    textFillColor: "transparent",
+    display: "inline-block"
+  };
+}
+function borderGradient(options) {
+  const { color = "linear-gradient(135deg, #FF5630, #00AB55)", borderWidth = 2, borderRadius = 0 } = options;
+  return {
+    position: "relative",
+    border: "none",
+    borderRadius,
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      inset: 0,
+      borderRadius: "inherit",
+      padding: borderWidth,
+      background: color,
+      WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+      WebkitMaskComposite: "xor",
+      maskComposite: "exclude",
+      pointerEvents: "none"
+    }
+  };
+}
+function scrollbarStyles(theme) {
+  const palette = theme.vars?.palette || theme.palette;
+  const greyChannel = palette.grey["500Channel"] || "145, 158, 171";
+  return {
+    scrollbarWidth: "thin",
+    scrollbarColor: `${varAlpha(greyChannel, 0.4)} ${varAlpha(greyChannel, 0.08)}`,
+    "&::-webkit-scrollbar": {
+      width: 6,
+      height: 6
+    },
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: "transparent"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: varAlpha(greyChannel, 0.4),
+      borderRadius: 3,
+      "&:hover": {
+        backgroundColor: varAlpha(greyChannel, 0.6)
+      }
+    }
+  };
+}
+var mixins = {
+  toolbar: {
+    minHeight: 56,
+    "@media (min-width:0px)": {
+      "@media (orientation: landscape)": {
+        minHeight: 48
+      }
+    },
+    "@media (min-width:600px)": {
+      minHeight: 64
+    }
+  },
+  // Extended mixins
+  hideScrollX: {
+    msOverflowStyle: "none",
+    scrollbarWidth: "none",
+    overflowX: "auto",
+    "&::-webkit-scrollbar": { display: "none" }
+  },
+  hideScrollY: {
+    msOverflowStyle: "none",
+    scrollbarWidth: "none",
+    overflowY: "auto",
+    "&::-webkit-scrollbar": { display: "none" }
+  },
+  // Style functions (attached at theme creation)
+  bgBlur,
+  bgGradient,
+  maxLine,
+  softStyles,
+  filledStyles,
+  paperStyles,
+  menuItemStyles,
+  varAlpha,
+  textGradient,
+  borderGradient,
+  scrollbarStyles
+};
+var hideScrollbarMixin = {
+  scrollbarWidth: "none",
+  msOverflowStyle: "none",
+  "&::-webkit-scrollbar": {
+    display: "none"
+  }
+};
+function customScrollbarMixin(theme) {
+  const palette = theme.vars?.palette || theme.palette;
+  const greyChannel = palette.grey["500Channel"] || "145, 158, 171";
+  return {
+    scrollbarWidth: "thin",
+    scrollbarColor: `${varAlpha(greyChannel, 0.4)} ${varAlpha(greyChannel, 0.08)}`,
+    "&::-webkit-scrollbar": {
+      width: 6,
+      height: 6
+    },
+    "&::-webkit-scrollbar-track": {
+      backgroundColor: "transparent"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: varAlpha(greyChannel, 0.4),
+      borderRadius: 3,
+      "&:hover": {
+        backgroundColor: varAlpha(greyChannel, 0.6)
+      }
+    }
+  };
+}
+var textEllipsisMixin = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+function multiLineEllipsisMixin(lines) {
+  return {
+    overflow: "hidden",
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: lines
+  };
+}
+var focusRingMixin = {
+  "&:focus-visible": {
+    outline: "none",
+    boxShadow: "0 0 0 2px var(--prism-background, #FFF), 0 0 0 4px var(--prism-primary, #3385F0)"
+  }
+};
+var glassMixin = {
+  backdropFilter: "blur(20px)",
+  backgroundColor: "var(--prism-vibrant-overlay, rgba(255, 255, 255, 0.7))"
+};
+var chipColors = ["primary", "secondary", "info", "success", "warning", "error"];
+var softVariants2 = [
+  ...chipColors.map((color) => ({
+    props: (props) => props.variant === "soft" && props.color === color,
+    style: ({ theme }) => ({
+      backgroundColor: `rgba(var(--prism-${color}-main-channel, 51 133 240) / 0.16)`,
+      color: theme.vars?.palette[color]?.dark || theme.palette[color].dark
+    })
+  })),
+  // Neutral soft variant
+  {
+    props: (props) => props.variant === "soft" && props.color === "neutral",
+    style: ({ theme }) => ({
+      backgroundColor: theme.vars?.palette.background.elevation2 || theme.palette.grey[100],
+      color: theme.vars?.palette.text.primary || theme.palette.text.primary
+    })
+  },
+  // Default soft variant (no color specified)
+  {
+    props: (props) => props.variant === "soft" && !props.color,
+    style: ({ theme }) => ({
+      backgroundColor: theme.vars?.palette.background.elevation2 || theme.palette.grey[100],
+      color: theme.vars?.palette.text.primary || theme.palette.text.primary
+    })
+  }
+];
+var dashedVariants2 = [
+  ...chipColors.map((color) => ({
+    props: (props) => props.variant === "dashed" && props.color === color,
+    style: ({ theme }) => ({
+      border: `1px dashed ${theme.vars?.palette[color]?.main || theme.palette[color].main}`,
+      backgroundColor: "transparent",
+      color: theme.vars?.palette[color]?.main || theme.palette[color].main
+    })
+  })),
+  // Neutral dashed variant
+  {
+    props: (props) => props.variant === "dashed" && props.color === "neutral",
+    style: ({ theme }) => ({
+      border: `1px dashed ${theme.vars?.palette.divider || theme.palette.divider}`,
+      backgroundColor: "transparent",
+      color: theme.vars?.palette.text.primary || theme.palette.text.primary
+    })
+  }
+];
+var outlinedNeutralVariant = [
+  {
+    props: (props) => props.variant === "outlined" && props.color === "neutral",
+    style: ({ theme }) => ({
+      borderColor: theme.vars?.palette.divider || theme.palette.divider,
+      color: theme.vars?.palette.text.primary || theme.palette.text.primary
+    })
+  }
+];
+var filledNeutralVariant = [
+  {
+    props: (props) => props.variant === "filled" && props.color === "neutral",
+    style: ({ theme }) => ({
+      backgroundColor: theme.vars?.palette.grey[300] || theme.palette.grey[300],
+      color: theme.vars?.palette.text.primary || theme.palette.text.primary
+    })
+  }
+];
+var disabledVariants2 = [
+  {
+    props: {},
+    style: ({ theme }) => ({
+      [`&.${chipClasses.disabled}`]: {
+        opacity: 1,
+        color: theme.vars?.palette.action.disabled || theme.palette.action.disabled,
+        [`&:not(.${chipClasses.outlined})`]: {
+          backgroundColor: theme.vars?.palette.action.disabledBackground || theme.palette.action.disabledBackground
+        },
+        [`&.${chipClasses.outlined}`]: {
+          borderColor: theme.vars?.palette.action.disabledBackground || theme.palette.action.disabledBackground
+        }
+      }
+    })
+  }
+];
+var xSmallVariant = [
+  {
+    props: { size: "xSmall" },
+    style: {
+      height: 20,
+      fontSize: "0.6875rem",
+      padding: "0 6px"
+    }
+  }
+];
+function createChipOverrides(config) {
+  const { borderRadius, density } = config;
+  const densityMultiplier = getDensityMultiplier(density);
+  return {
+    styleOverrides: {
+      root: {
+        borderRadius,
+        fontWeight: 500,
+        variants: [
+          ...softVariants2,
+          ...dashedVariants2,
+          ...outlinedNeutralVariant,
+          ...filledNeutralVariant,
+          ...disabledVariants2,
+          ...xSmallVariant
+        ]
+      },
+      sizeSmall: {
+        height: 24 * densityMultiplier
+      },
+      sizeMedium: {
+        height: 32 * densityMultiplier
+      },
+      label: {
+        fontWeight: 500
+      },
+      labelSmall: {
+        fontSize: "0.75rem",
+        paddingLeft: 8,
+        paddingRight: 8
+      },
+      labelMedium: {
+        fontSize: "0.8125rem",
+        paddingLeft: 12,
+        paddingRight: 12
+      },
+      icon: {
+        fontSize: 18,
+        color: "currentColor"
+      },
+      deleteIcon: {
+        fontSize: 18,
+        opacity: 0.48,
+        color: "currentColor",
+        "&:hover": {
+          opacity: 0.8,
+          color: "currentColor"
+        }
+      }
+    }
+  };
+}
+var INPUT_TYPOGRAPHY = {
+  fontSize: { base: 15, responsive: 16 },
+  lineHeight: 24
+};
+var INPUT_PADDING = {
+  outlined: {
+    small: { paddingTop: 8, paddingBottom: 8 },
+    medium: { paddingTop: 16, paddingBottom: 16 }
+  },
+  filled: {
+    small: { paddingTop: 20 },
+    medium: { paddingTop: 24 }}
+};
+function getInputTypography(theme, keys) {
+  const { fontSize, lineHeight } = INPUT_TYPOGRAPHY;
+  const baseStyles = {
+    fontSize: theme.typography.pxToRem(fontSize.base),
+    height: `${lineHeight}px`,
+    lineHeight: `${lineHeight}px`
+  };
+  const responsiveStyles = {
+    fontSize: theme.typography.pxToRem(fontSize.responsive),
+    height: `${lineHeight}px`,
+    lineHeight: `${lineHeight}px`
+  };
+  return {
+    ...Object.fromEntries(keys.map((k) => [k, baseStyles[k]])),
+    [theme.breakpoints.down("sm")]: Object.fromEntries(keys.map((k) => [k, responsiveStyles[k]]))
+  };
+}
+function getErrorChannel(theme) {
+  const vars = theme.vars?.palette.error;
+  return vars?.mainChannel ?? "208 34 65";
+}
+function createInputBaseOverrides(_config) {
+  return {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        "--disabled-color": theme.vars?.palette.action.disabled || theme.palette.action.disabled,
+        ...getInputTypography(theme, ["lineHeight"]),
+        [`&.${inputBaseClasses.disabled}`]: {
+          [`& .${inputAdornmentClasses.root} *`]: { color: "var(--disabled-color)" }
+        }
+      }),
+      input: ({ theme }) => ({
+        ...getInputTypography(theme, ["fontSize", "height", "lineHeight"]),
+        "&:focus": { borderRadius: "inherit" },
+        "&::placeholder": {
+          color: theme.vars?.palette.text.disabled || theme.palette.text.disabled,
+          opacity: 1
+        }
+      })
+    }
+  };
+}
+function createInputOverrides(_config) {
+  return {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        "&::before": {
+          borderBottomColor: varAlpha(getGreyChannel(theme), 0.2)
+        },
+        "&::after": {
+          borderBottomColor: theme.vars?.palette.text.primary || theme.palette.text.primary
+        }
+      })
+    }
+  };
+}
+function createOutlinedInputOverrides(config) {
+  const { borderRadius } = config;
+  return {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        borderRadius,
+        [`&.${outlinedInputClasses.focused}:not(.${outlinedInputClasses.error})`]: {
+          [`& .${outlinedInputClasses.notchedOutline}`]: {
+            borderColor: theme.vars?.palette.text.primary || theme.palette.text.primary
+          }
+        },
+        [`&.${outlinedInputClasses.disabled}`]: {
+          [`& .${outlinedInputClasses.notchedOutline}`]: {
+            borderColor: theme.vars?.palette.action.disabledBackground || theme.palette.action.disabledBackground
+          }
+        }
+      }),
+      input: {
+        ...INPUT_PADDING.outlined.medium,
+        "&.MuiInputBase-inputSizeSmall": {
+          ...INPUT_PADDING.outlined.small
+        },
+        "&.MuiInputBase-inputMultiline": {
+          paddingTop: 0,
+          paddingBottom: 0
+        }
+      },
+      notchedOutline: ({ theme }) => ({
+        borderColor: varAlpha(getGreyChannel(theme), 0.2),
+        transition: theme.transitions.create(["border-color"], {
+          duration: theme.transitions.duration.shortest
+        }),
+        // Align fieldset font-size with InputLabel (14px) so the legend
+        // notch width (0.75em) matches the visually-scaled label exactly.
+        fontSize: theme.typography.pxToRem(14),
+        "& legend > span": { paddingInline: 3 }
+      })
+    }
+  };
+}
+function createFilledInputOverrides(config) {
+  const { borderRadius } = config;
+  return {
+    defaultProps: {
+      disableUnderline: true
+    },
+    styleOverrides: {
+      root: ({ theme }) => {
+        const greyChannel = getGreyChannel(theme);
+        const errChannel = getErrorChannel(theme);
+        const baseBg = varAlpha(greyChannel, 0.08);
+        const hoverBg = varAlpha(greyChannel, 0.16);
+        const errorBg = varAlpha(errChannel, 0.08);
+        const errorHoverBg = varAlpha(errChannel, 0.16);
+        const disabledBg = theme.vars?.palette.action.disabledBackground || theme.palette.action.disabledBackground;
+        return {
+          backgroundColor: baseBg,
+          borderRadius,
+          [`&:hover, &.${filledInputClasses.focused}`]: { backgroundColor: hoverBg },
+          [`&.${filledInputClasses.error}`]: {
+            backgroundColor: errorBg,
+            [`&:hover, &.${filledInputClasses.focused}`]: { backgroundColor: errorHoverBg }
+          },
+          [`&.${filledInputClasses.disabled}`]: { backgroundColor: disabledBg }
+        };
+      },
+      input: {
+        ...INPUT_PADDING.filled.medium,
+        "&.MuiInputBase-inputSizeSmall": {
+          ...INPUT_PADDING.filled.small
+        },
+        "&.MuiInputBase-inputMultiline": {
+          paddingTop: 0,
+          paddingBottom: 0
+        }
+      }
+    }
+  };
+}
+function createTextFieldOverrides(config) {
+  return {
+    defaultProps: {
+      variant: "outlined",
+      size: config.density === "compact" ? "small" : "medium"
+    }
+  };
+}
+function createInputLabelOverrides(_config) {
+  return {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        fontSize: theme.typography.pxToRem(14),
+        lineHeight: 1.5,
+        variants: [
+          {
+            props: (props) => !props.shrink,
+            style: {
+              ...getInputTypography(theme, ["fontSize", "lineHeight"]),
+              color: theme.vars?.palette.text.disabled || theme.palette.text.disabled
+            }
+          },
+          {
+            props: (props) => !!props.shrink,
+            style: {
+              fontWeight: 600,
+              [`&.${inputLabelClasses.focused}:not(.${inputLabelClasses.error})`]: {
+                color: "inherit"
+              }
+            }
+          }
+        ]
+      })
+    }
+  };
+}
+function createFormHelperTextOverrides(_config) {
+  return {
+    defaultProps: {
+      component: "div"
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        display: "flex",
+        alignItems: "center",
+        gap: theme.spacing(0.5),
+        marginTop: theme.spacing(0.75),
+        fontSize: theme.typography.pxToRem(12),
+        lineHeight: 1.5,
+        "& > svg": { width: 16, height: 16 }
+      })
+    }
+  };
+}
+function CheckboxIcon(props) {
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17.9 2.318A5 5 0 0 1 22.895 7.1l.005.217v10a5 5 0 0 1-4.783 4.995l-.217.005h-10a5 5 0 0 1-4.995-4.783l-.005-.217v-10a5 5 0 0 1 4.783-4.996l.217-.004h10Zm-.5 1.5h-9a4 4 0 0 0-4 4v9a4 4 0 0 0 4 4h9a4 4 0 0 0 4-4v-9a4 4 0 0 0-4-4Z" }) });
+}
+function CheckboxCheckedIcon(props) {
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 2a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm-1.625 7.255-4.13 4.13-1.75-1.75a.881.881 0 0 0-1.24 0c-.34.34-.34.89 0 1.24l2.38 2.37c.17.17.39.25.61.25.23 0 .45-.08.62-.25l4.75-4.75c.34-.34.34-.89 0-1.24a.881.881 0 0 0-1.24 0Z" }) });
+}
+function CheckboxIndeterminateIcon(props) {
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17,2 C19.7614,2 22,4.23858 22,7 L22,7 L22,17 C22,19.7614 19.7614,22 17,22 L17,22 L7,22 C4.23858,22 2,19.7614 2,17 L2,17 L2,7 C2,4.23858 4.23858,2 7,2 L7,2 Z M15,11 L9,11 C8.44772,11 8,11.4477 8,12 C8,12.5523 8.44772,13 9,13 L15,13 C15.5523,13 16,12.5523 16,12 C16,11.4477 15.5523,11 15,11 Z" }) });
+}
+var SWITCH_DIMENSIONS = {
+  small: { thumb: 10, track: 16, trackRadius: 8, translateX: "10px" },
+  medium: { thumb: 14, track: 20, trackRadius: 10, translateX: "14px" }
+};
+var switchColorVariants = [
+  {
+    props: (props) => props.color === "default",
+    style: ({ theme }) => ({
+      [`&.${switchClasses.checked}`]: {
+        [`& + .${switchClasses.track}`]: {
+          backgroundColor: theme.vars?.palette.text.primary
+        },
+        [`& .${switchClasses.thumb}`]: {
+          ...theme.applyStyles("dark", {
+            color: theme.vars?.palette.grey[800]
+          })
+        }
+      }
+    })
+  }
+];
+var switchCheckedVariants = [
+  {
+    props: {},
+    style: {
+      [`&.${switchClasses.checked}`]: {
+        transform: `translateX(${SWITCH_DIMENSIONS.medium.translateX})`,
+        [`& + .${switchClasses.track}`]: {
+          opacity: 1
+        }
+      }
+    }
+  }
+];
+var switchDisabledVariants = [
+  {
+    props: {},
+    style: ({ theme }) => ({
+      [`&.${switchClasses.disabled}`]: {
+        [`& + .${switchClasses.track}`]: {
+          opacity: 0.48
+        },
+        [`& .${switchClasses.thumb}`]: {
+          ...theme.applyStyles("dark", {
+            opacity: 0.48
+          })
+        }
+      }
+    })
+  }
+];
+var switchSizeVariants = [
+  {
+    props: (props) => props.size === "small",
+    style: {
+      [`& .${switchClasses.switchBase}`]: {
+        [`&.${switchClasses.checked}`]: {
+          transform: `translateX(${SWITCH_DIMENSIONS.small.translateX})`
+        }
+      },
+      [`& .${switchClasses.thumb}`]: {
+        width: SWITCH_DIMENSIONS.small.thumb,
+        height: SWITCH_DIMENSIONS.small.thumb
+      },
+      [`& .${switchClasses.track}`]: {
+        height: SWITCH_DIMENSIONS.small.track,
+        borderRadius: SWITCH_DIMENSIONS.small.trackRadius
+      }
+    }
+  }
+];
+function createCheckboxOverrides(config) {
+  return {
+    defaultProps: {
+      size: config.density === "compact" ? "small" : "medium",
+      icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
+      checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
+      indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {})
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        padding: theme.spacing(1),
+        variants: [
+          {
+            props: (props) => props.color === "default",
+            style: {
+              [`&.${checkboxClasses.checked}`]: {
+                color: theme.vars?.palette.text.primary
+              }
+            }
+          },
+          ...["primary", "secondary", "info", "success", "warning", "error"].map((color) => ({
+            props: { color },
+            style: {
+              "&:hover": {
+                backgroundColor: varAlpha(
+                  theme.vars?.palette[color]?.mainChannel ?? "51 133 240",
+                  0.12
+                )
+              }
+            }
+          }))
+        ]
+      }),
+      sizeSmall: {
+        "& svg": { fontSize: 16 }
+      },
+      sizeMedium: {
+        "& svg": { fontSize: 20 }
+      }
+    }
+  };
+}
+function createRadioOverrides(config) {
+  return {
+    defaultProps: {
+      size: config.density === "compact" ? "small" : "medium"
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        padding: theme.spacing(1),
+        variants: [
+          {
+            props: (props) => props.color === "default",
+            style: {
+              [`&.${radioClasses.checked}`]: {
+                color: theme.vars?.palette.text.primary
+              }
+            }
+          }
+        ]
+      })
+    }
+  };
+}
+function createSwitchOverrides(config) {
+  return {
+    defaultProps: {
+      size: config.density === "compact" ? "small" : "medium"
+    },
+    styleOverrides: {
+      root: {
+        alignItems: "center",
+        variants: [...switchSizeVariants]
+      },
+      switchBase: {
+        top: "auto",
+        left: "6px",
+        variants: [...switchColorVariants, ...switchCheckedVariants, ...switchDisabledVariants]
+      },
+      thumb: ({ theme }) => ({
+        width: SWITCH_DIMENSIONS.medium.thumb,
+        height: SWITCH_DIMENSIONS.medium.thumb,
+        color: theme.vars?.palette.common.white
+      }),
+      track: ({ theme }) => ({
+        height: SWITCH_DIMENSIONS.medium.track,
+        borderRadius: SWITCH_DIMENSIONS.medium.trackRadius,
+        backgroundColor: varAlpha(getGreyChannel(theme), 0.48),
+        opacity: 1
+      })
+    }
+  };
+}
+function createFormLabelOverrides(_config) {
+  return {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        [`&.${formLabelClasses.disabled}`]: {
+          color: theme.vars?.palette.action.disabled
+        },
+        variants: [
+          {
+            props: (props) => !props.error,
+            style: {
+              [`&.${formLabelClasses.focused}`]: {
+                color: theme.vars?.palette.text.secondary
+              }
+            }
+          }
+        ]
+      })
+    }
+  };
+}
+function createFormControlLabelOverrides(_config) {
+  return {
+    styleOverrides: {
+      label: ({ theme }) => ({
+        ...theme.typography.body2
+      })
+    }
+  };
+}
+function createFormControlOverrides(_config) {
+  return {
+    defaultProps: {
+      variant: "outlined"
+    },
+    styleOverrides: {
+      root: {
+        "& .MuiFormLabel-root": {
+          marginBottom: 8
+        }
+      }
+    }
+  };
+}
+var tabsVariants = {
+  root: [
+    {
+      props: (props) => props.indicatorColor === "inherit",
+      style: {
+        "& .MuiTabs-indicator": {
+          backgroundColor: "currentColor"
+        }
+      }
+    }
+  ],
+  list: [
+    {
+      props: {},
+      style: ({ theme }) => ({
+        gap: theme.spacing(1)
+      })
+    }
+  ]
+};
+var tabVariants = [
+  {
+    props: {},
+    style: ({ theme }) => ({
+      [`&.${tabClasses.selected}`]: {
+        fontWeight: 600,
+        color: theme.vars?.palette.text.primary || theme.palette.text.primary
+      }
+    })
+  },
+  {
+    props: (props) => !!props.icon && !!props.label,
+    style: {
+      minHeight: "auto"
+    }
+  }
+];
+function createTabsOverrides(config) {
+  const dm = getDensityMultiplier(config.density);
+  return {
+    defaultProps: {
+      variant: "scrollable",
+      textColor: "inherit",
+      indicatorColor: "primary",
+      allowScrollButtonsMobile: true
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        minHeight: 36 * dm,
+        variants: [...tabsVariants.root]
+      }),
+      list: {
+        variants: [...tabsVariants.list]
+      },
+      indicator: {
+        borderRadius: 2
+      }
+    }
+  };
+}
+function createTabOverrides(config) {
+  const dm = getDensityMultiplier(config.density);
+  return {
+    defaultProps: {
+      disableRipple: true,
+      iconPosition: "start"
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        padding: 8 * dm,
+        minHeight: 36 * dm,
+        minWidth: 36 * dm,
+        opacity: 1,
+        textTransform: "none",
+        fontWeight: theme.typography.fontWeightMedium,
+        color: theme.vars?.palette.text.secondary || theme.palette.text.secondary,
+        lineHeight: theme.typography.body2.lineHeight,
+        [`& .${svgIconClasses.root}`]: {
+          fontSize: 20
+        },
+        variants: [...tabVariants]
+      })
+    }
+  };
+}
+
+// src/theme/components/index.ts
+function componentOverrides(config) {
+  const { density, borderRadius } = config;
+  const dm = getDensityMultiplier(density);
+  return {
+    // =========================================================================
+    // BUTTONS (Modular)
+    // =========================================================================
+    MuiButton: createButtonOverrides(config),
+    MuiButtonBase: createButtonBaseOverrides(),
+    MuiButtonGroup: createButtonGroupOverrides(config),
+    // =========================================================================
+    // ICON BUTTON
+    // =========================================================================
+    MuiIconButton: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          borderRadius,
+          "&:hover": {
+            backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
+          }
+        })
+      }
+    },
+    MuiInputAdornment: {
+      styleOverrides: {
+        root: {
+          [`& .${iconButtonClasses.root}:hover`]: {
+            backgroundColor: "transparent"
+          }
+        }
+      }
+    },
+    // =========================================================================
+    // FAB
+    // =========================================================================
+    MuiFab: {
+      defaultProps: {
+        color: "primary"
+      },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          boxShadow: `0 8px 16px 0 rgba(${getColorChannel(theme, "primary")} / 0.24)`,
+          "&:hover": {
+            boxShadow: `0 8px 16px 0 rgba(${getColorChannel(theme, "primary")} / 0.32)`
+          }
+        })
+      }
+    },
+    // =========================================================================
+    // INPUTS (Refined - from Minimals patterns)
+    // =========================================================================
+    MuiInputBase: createInputBaseOverrides(),
+    MuiInput: createInputOverrides(),
+    MuiTextField: createTextFieldOverrides(config),
+    MuiOutlinedInput: createOutlinedInputOverrides(config),
+    MuiFilledInput: createFilledInputOverrides(config),
+    MuiInputLabel: createInputLabelOverrides(),
+    MuiFormHelperText: createFormHelperTextOverrides(),
+    MuiSelect: {
+      styleOverrides: {
+        select: {
+          // Reset minHeight so Select matches TextField height exactly.
+          minHeight: "auto",
+          display: "flex",
+          alignItems: "center"
+        },
+        icon: {
+          right: 10,
+          width: 18,
+          height: 18,
+          top: "calc(50% - 9px)"
+        }
+      }
+    },
+    MuiNativeSelect: {
+      styleOverrides: {
+        icon: {
+          right: 10,
+          width: 18,
+          height: 18,
+          top: "calc(50% - 9px)"
+        }
+      }
+    },
+    MuiAutocomplete: {
+      styleOverrides: {
+        paper: ({ theme }) => ({
+          borderRadius,
+          boxShadow: `0 0 2px 0 rgba(${getGreyChannel(theme)} / 0.24), -20px 20px 40px -4px rgba(${getGreyChannel(theme)} / 0.24)`
+        }),
+        listbox: {
+          padding: 4
+        },
+        option: ({ theme }) => ({
+          borderRadius: borderRadius - 2,
+          margin: 2,
+          [`&.${autocompleteClasses.focused}`]: {
+            backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
+          },
+          '&[aria-selected="true"]': {
+            backgroundColor: theme.vars?.palette.action.selected || theme.palette.action.selected,
+            fontWeight: 500,
+            [`&.${autocompleteClasses.focused}`]: {
+              backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
+            }
+          }
+        }),
+        popupIndicator: {
+          [`& .${svgIconClasses.root}`]: {
+            fontSize: 20
+          }
+        },
+        clearIndicator: {
+          [`& .${svgIconClasses.root}`]: {
+            fontSize: 18
+          }
+        }
+      }
+    },
+    // =========================================================================
+    // CARDS
+    // =========================================================================
+    MuiCard: {
+      defaultProps: {
+        elevation: 0
+      },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          position: "relative",
+          zIndex: 0,
+          // Safari stacking context fix
+          borderRadius: borderRadius * 1.5,
+          border: `1px solid ${theme.vars?.palette.divider || theme.palette.divider}`,
+          backgroundImage: "none",
+          boxShadow: `0 0 2px 0 rgba(${getGreyChannel(theme)} / 0.2), 0 12px 24px -4px rgba(${getGreyChannel(theme)} / 0.12)`
+        })
+      }
+    },
+    MuiCardHeader: {
+      defaultProps: {
+        titleTypographyProps: { variant: "h6" },
+        subheaderTypographyProps: { variant: "body2" }
+      },
+      styleOverrides: {
+        root: {
+          padding: `${16 * dm}px ${20 * dm}px`
+        },
+        title: ({ theme }) => ({
+          fontSize: theme.typography.pxToRem(16),
+          fontWeight: 600,
+          lineHeight: 1.5
+        }),
+        subheader: ({ theme }) => ({
+          fontSize: theme.typography.pxToRem(14),
+          lineHeight: 22 / 14,
+          color: theme.vars?.palette.text.secondary || theme.palette.text.secondary
+        })
+      }
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: `${16 * dm}px ${20 * dm}px`,
+          "&:last-child": {
+            paddingBottom: 16 * dm
+          }
+        }
+      }
+    },
+    MuiCardActions: {
+      styleOverrides: {
+        root: {
+          padding: `${12 * dm}px ${20 * dm}px`,
+          gap: 8
+        }
+      }
+    },
+    // =========================================================================
+    // PAPER & SURFACES
+    // =========================================================================
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          backgroundImage: "none"
+        },
+        rounded: {
+          borderRadius: borderRadius * 1.5
+        },
+        outlined: ({ theme }) => ({
+          borderColor: `rgba(${getGreyChannel(theme)} / 0.16)`
+        }),
+        elevation1: ({ theme }) => ({
+          boxShadow: `0 1px 2px 0 rgba(${getGreyChannel(theme, "900")} / 0.08)`
+        }),
+        elevation2: ({ theme }) => ({
+          boxShadow: `0 2px 4px 0 rgba(${getGreyChannel(theme, "900")} / 0.08), 0 1px 2px 0 rgba(${getGreyChannel(theme, "900")} / 0.04)`
+        }),
+        elevation3: ({ theme }) => ({
+          boxShadow: `0 4px 8px 0 rgba(${getGreyChannel(theme, "900")} / 0.08), 0 2px 4px 0 rgba(${getGreyChannel(theme, "900")} / 0.04)`
+        }),
+        elevation4: ({ theme }) => ({
+          boxShadow: `0 8px 16px 0 rgba(${getGreyChannel(theme, "900")} / 0.08), 0 4px 8px 0 rgba(${getGreyChannel(theme, "900")} / 0.04)`
+        }),
+        elevation5: ({ theme }) => ({
+          boxShadow: `0 12px 24px -4px rgba(${getGreyChannel(theme, "900")} / 0.08), 0 8px 16px 0 rgba(${getGreyChannel(theme, "900")} / 0.04)`
+        })
+      }
+    },
+    // =========================================================================
+    // DIALOGS
+    // =========================================================================
+    MuiDialog: {
+      styleOverrides: {
+        paper: ({ theme }) => ({
+          boxShadow: `0 24px 48px -12px rgba(${getGreyChannel(theme, "900")} / 0.24)`,
+          // Mobile-first: fullscreen on < sm (600px)
+          [theme.breakpoints.down("sm")]: {
+            margin: 0,
+            width: "100% !important",
+            maxWidth: "none !important",
+            maxHeight: "none !important",
+            height: "100%",
+            borderRadius: "0 !important"
+          },
+          variants: [
+            {
+              props: (props) => !props.fullScreen,
+              style: {
+                borderRadius: borderRadius * 2,
+                [theme.breakpoints.up("sm")]: {
+                  margin: theme.spacing(2)
+                }
+              }
+            }
+          ]
+        })
+      }
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          padding: `${20 * dm}px ${24 * dm}px`,
+          fontSize: theme.typography.pxToRem(18),
+          fontWeight: 600,
+          lineHeight: 28 / 18
+        })
+      }
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          padding: `${16 * dm}px ${24 * dm}px`
+        }
+      }
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          padding: `${16 * dm}px ${24 * dm}px`,
+          gap: 8
+        }
+      }
+    },
+    // =========================================================================
+    // NAVIGATION
+    // =========================================================================
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundImage: "none"
+        }
+      }
+    },
+    MuiAppBar: {
+      defaultProps: {
+        elevation: 0
+      },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          backgroundImage: "none",
+          borderBottom: `1px solid ${theme.vars?.palette.divider || theme.palette.divider}`
+        })
+      }
+    },
+    // Tabs (Refined - combining Aurora compact + Minimals indicators)
+    MuiTabs: createTabsOverrides(config),
+    MuiTab: createTabOverrides(config),
+    MuiBreadcrumbs: {
+      styleOverrides: {
+        separator: {
+          marginLeft: 8,
+          marginRight: 8
+        }
+      }
+    },
+    // =========================================================================
+    // ACCORDION
+    // =========================================================================
+    MuiAccordion: {
+      defaultProps: {
+        disableGutters: true,
+        elevation: 0
+      },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          border: `1px solid ${theme.vars?.palette.divider || theme.palette.divider}`,
+          borderRadius,
+          "&::before": {
+            display: "none"
+          },
+          "&:first-of-type": {
+            borderTopLeftRadius: borderRadius,
+            borderTopRightRadius: borderRadius
+          },
+          "&:last-of-type": {
+            borderBottomLeftRadius: borderRadius,
+            borderBottomRightRadius: borderRadius
+          },
+          "&:not(:last-of-type)": {
+            borderBottom: 0
+          },
+          [`&.${accordionClasses.expanded}`]: {
+            margin: 0,
+            "&:first-of-type": { marginTop: 0 },
+            "&:last-of-type": { marginBottom: 0 }
+          },
+          [`&.${accordionClasses.disabled}`]: {
+            backgroundColor: "transparent"
+          }
+        })
+      }
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          minHeight: 48 * dm,
+          padding: `0 ${16 * dm}px`,
+          fontWeight: 500,
+          [`&.${accordionSummaryClasses.expanded}`]: {
+            minHeight: 48 * dm
+          },
+          [`&.${accordionSummaryClasses.disabled}`]: {
+            opacity: 0.5
+          }
+        }),
+        content: {
+          margin: `${12 * dm}px 0`,
+          [`&.${accordionSummaryClasses.expanded}`]: {
+            margin: `${12 * dm}px 0`
+          }
+        },
+        expandIconWrapper: ({ theme }) => ({
+          color: theme.vars?.palette.text.secondary || theme.palette.text.secondary
+        })
+      }
+    },
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          padding: `${8 * dm}px ${16 * dm}px ${16 * dm}px`,
+          borderTop: `1px solid ${theme.vars?.palette.divider || theme.palette.divider}`
+        })
+      }
+    },
+    // =========================================================================
+    // STEPPER
+    // =========================================================================
+    MuiStep: {
+      styleOverrides: {
+        root: {
+          padding: 0
+        }
+      }
+    },
+    MuiStepLabel: {
+      styleOverrides: {
+        label: ({ theme }) => ({
+          fontSize: theme.typography.pxToRem(14),
+          fontWeight: 500,
+          [`&.${stepLabelClasses.active}`]: {
+            fontWeight: 600,
+            color: theme.vars?.palette.text.primary || theme.palette.text.primary
+          },
+          [`&.${stepLabelClasses.completed}`]: {
+            fontWeight: 500,
+            color: theme.vars?.palette.text.primary || theme.palette.text.primary
+          }
+        }),
+        iconContainer: {
+          paddingRight: 12 * dm
+        }
+      }
+    },
+    MuiStepConnector: {
+      styleOverrides: {
+        line: ({ theme }) => ({
+          borderColor: theme.vars?.palette.divider || theme.palette.divider,
+          borderTopWidth: 2
+        })
+      }
+    },
+    MuiStepIcon: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          color: theme.vars?.palette.grey?.[300] || theme.palette.grey[300],
+          [`&.${stepIconClasses.active}`]: {
+            color: theme.vars?.palette.primary.main || theme.palette.primary.main
+          },
+          [`&.${stepIconClasses.completed}`]: {
+            color: theme.vars?.palette.primary.main || theme.palette.primary.main
+          }
+        }),
+        text: {
+          fontWeight: 600,
+          fontSize: "0.75rem"
+        }
+      }
+    },
+    MuiStepContent: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          borderLeft: `2px solid ${theme.vars?.palette.divider || theme.palette.divider}`,
+          marginLeft: 11,
+          paddingLeft: 20,
+          paddingRight: 8
+        })
+      }
+    },
+    // =========================================================================
+    // PAGINATION
+    // =========================================================================
+    MuiPagination: {
+      defaultProps: {
+        shape: "rounded",
+        size: density === "compact" ? "small" : "medium"
+      }
+    },
+    MuiPaginationItem: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          borderRadius: borderRadius - 2,
+          fontWeight: 500,
+          [`&.${paginationItemClasses.selected}`]: {
+            fontWeight: 600
+          }
+        }),
+        outlined: ({ theme }) => ({
+          borderColor: theme.vars?.palette.divider || theme.palette.divider,
+          [`&.${paginationItemClasses.selected}`]: {
+            backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.08)`,
+            borderColor: theme.vars?.palette.primary.main || theme.palette.primary.main
+          }
+        }),
+        text: ({ theme }) => ({
+          [`&.${paginationItemClasses.selected}`]: {
+            backgroundColor: theme.vars?.palette.primary.main || theme.palette.primary.main,
+            color: theme.vars?.palette.primary.contrastText || theme.palette.primary.contrastText,
+            "&:hover": {
+              backgroundColor: theme.vars?.palette.primary.dark || theme.palette.primary.dark
+            }
+          }
+        }),
+        previousNext: ({ theme }) => ({
+          borderRadius: borderRadius - 2,
+          "&:hover": {
+            backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
+          }
+        }),
+        firstLast: ({ theme }) => ({
+          borderRadius: borderRadius - 2
+        })
+      }
+    },
+    // =========================================================================
+    // DATA DISPLAY
+    // =========================================================================
+    MuiChip: createChipOverrides(config),
+    MuiAvatar: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          fontSize: theme.typography.pxToRem(14),
+          fontWeight: 600
+        })
+      }
+    },
+    MuiBadge: {
+      styleOverrides: {
+        badge: {
+          fontWeight: 600
+        }
+      }
+    },
+    MuiTooltip: {
+      defaultProps: {
+        arrow: true
+      },
+      styleOverrides: {
+        tooltip: ({ theme }) => ({
+          borderRadius: borderRadius - 2,
+          fontSize: theme.typography.pxToRem(12),
+          padding: "6px 12px",
+          backgroundColor: theme.vars?.palette.grey?.[800] || theme.palette.grey[800]
+        }),
+        arrow: ({ theme }) => ({
+          color: theme.vars?.palette.grey?.[800] || theme.palette.grey[800]
+        })
+      }
+    },
+    // =========================================================================
+    // TABLES
+    // =========================================================================
+    MuiTableContainer: {
+      styleOverrides: {
+        root: {
+          position: "relative"
+        }
+      }
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          [`& .${tableCellClasses.head}`]: {
+            fontWeight: 600,
+            backgroundColor: theme.vars?.palette.background.neutral || theme.palette.grey[50],
+            color: theme.vars?.palette.text.secondary || theme.palette.text.secondary
+          }
+        })
+      }
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          padding: `${12 * dm}px ${16 * dm}px`,
+          borderBottomColor: `rgba(${getGreyChannel(theme)} / 0.2)`
+        }),
+        sizeSmall: {
+          padding: `${8 * dm}px ${12 * dm}px`
+        }
+      }
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          [`&:last-child .${tableCellClasses.root}`]: {
+            borderBottom: "none"
+          },
+          [`&.${tableRowClasses.selected}`]: {
+            backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.08)`,
+            "&:hover": {
+              backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.12)`
+            }
+          }
+        })
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        backIconButtonProps: { size: "small" },
+        nextIconButtonProps: { size: "small" },
+        slotProps: { select: { name: "table-pagination-select" } }
+      },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          borderTop: `1px solid ${theme.vars?.palette.divider || theme.palette.divider}`
+        }),
+        toolbar: {
+          minHeight: 44 * dm,
+          paddingLeft: 8 * dm,
+          paddingRight: 8 * dm
+        },
+        actions: {
+          marginRight: 8
+        },
+        select: {
+          display: "flex",
+          alignItems: "center"
+        },
+        selectIcon: {
+          right: 4,
+          width: 16,
+          height: 16,
+          top: "calc(50% - 8px)"
+        },
+        selectLabel: ({ theme }) => ({
+          ...theme.typography.body2
+        }),
+        displayedRows: ({ theme }) => ({
+          ...theme.typography.body2
+        })
+      }
+    },
+    // =========================================================================
+    // FEEDBACK
+    // =========================================================================
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          borderRadius
+        },
+        standardSuccess: ({ theme }) => ({
+          backgroundColor: `rgba(${getColorChannel(theme, "success")} / 0.08)`,
+          color: theme.vars?.palette.success.dark || theme.palette.success.dark
+        }),
+        standardError: ({ theme }) => ({
+          backgroundColor: `rgba(${getColorChannel(theme, "error")} / 0.08)`,
+          color: theme.vars?.palette.error.dark || theme.palette.error.dark
+        }),
+        standardWarning: ({ theme }) => ({
+          backgroundColor: `rgba(${getColorChannel(theme, "warning")} / 0.08)`,
+          color: theme.vars?.palette.warning.dark || theme.palette.warning.dark
+        }),
+        standardInfo: ({ theme }) => ({
+          backgroundColor: `rgba(${getColorChannel(theme, "info")} / 0.08)`,
+          color: theme.vars?.palette.info.dark || theme.palette.info.dark
+        })
+      }
+    },
+    MuiSnackbar: {
+      styleOverrides: {
+        root: {
+          "& .MuiPaper-root": {
+            borderRadius
+          }
+        }
+      }
+    },
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          height: 6
+        }
+      }
+    },
+    // =========================================================================
+    // SLIDER
+    // =========================================================================
+    MuiSlider: {
+      defaultProps: {
+        size: density === "compact" ? "small" : "medium"
+      },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          "&.Mui-disabled": {
+            color: theme.vars?.palette.action.disabled || theme.palette.action.disabled
+          }
+        }),
+        rail: ({ theme }) => ({
+          opacity: 0.32,
+          backgroundColor: theme.vars?.palette.grey?.[500] || theme.palette.grey[500]
+        }),
+        track: {
+          border: "none"
+        },
+        thumb: ({ theme }) => ({
+          width: density === "compact" ? 16 : 20,
+          height: density === "compact" ? 16 : 20,
+          backgroundColor: theme.vars?.palette.common.white || theme.palette.common.white,
+          border: "2px solid currentColor",
+          boxShadow: `0 1px 3px 0 rgba(${getGreyChannel(theme, "900")} / 0.2)`,
+          "&::before": {
+            display: "none"
+          },
+          "&:hover, &.Mui-focusVisible": {
+            boxShadow: `0 0 0 8px rgba(${getColorChannel(theme, "primary")} / 0.16)`
+          },
+          "&.Mui-active": {
+            boxShadow: `0 0 0 12px rgba(${getColorChannel(theme, "primary")} / 0.24)`
+          }
+        }),
+        valueLabel: ({ theme }) => ({
+          borderRadius: borderRadius - 2,
+          backgroundColor: theme.vars?.palette.grey?.[800] || theme.palette.grey[800],
+          "&::before": {
+            display: "none"
+          }
+        }),
+        mark: ({ theme }) => ({
+          width: 4,
+          height: 4,
+          borderRadius: "50%",
+          backgroundColor: theme.vars?.palette.grey?.[400] || theme.palette.grey[400]
+        }),
+        markActive: ({ theme }) => ({
+          backgroundColor: theme.vars?.palette.common.white || theme.palette.common.white
+        })
+      }
+    },
+    // =========================================================================
+    // RATING
+    // =========================================================================
+    MuiRating: {
+      defaultProps: {
+        size: density === "compact" ? "small" : "medium",
+        emptyIcon: void 0
+        // Use default empty icon
+      },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          "&.Mui-disabled": {
+            opacity: 0.48
+          }
+        }),
+        icon: {
+          fontSize: "inherit"
+        },
+        iconEmpty: ({ theme }) => ({
+          color: theme.vars?.palette.grey?.[300] || theme.palette.grey[300]
+        }),
+        iconFilled: ({ theme }) => ({
+          color: theme.vars?.palette.warning.main || theme.palette.warning.main
+        }),
+        iconHover: ({ theme }) => ({
+          color: theme.vars?.palette.warning.dark || theme.palette.warning.dark
+        }),
+        sizeSmall: {
+          fontSize: "1.125rem"
+        },
+        sizeMedium: {
+          fontSize: "1.5rem"
+        },
+        sizeLarge: {
+          fontSize: "2rem"
+        }
+      }
+    },
+    // =========================================================================
+    // FORMS (Refined - with custom icons)
+    // =========================================================================
+    MuiCheckbox: createCheckboxOverrides(config),
+    MuiRadio: createRadioOverrides(config),
+    MuiSwitch: createSwitchOverrides(config),
+    MuiFormControl: createFormControlOverrides(),
+    MuiFormControlLabel: createFormControlLabelOverrides(),
+    MuiFormLabel: createFormLabelOverrides(),
+    // =========================================================================
+    // LISTS
+    // =========================================================================
+    MuiListItemButton: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          borderRadius: borderRadius - 2,
+          margin: 2,
+          "&.Mui-selected": {
+            backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.08)`,
+            fontWeight: 500
+          },
+          "&:hover": {
+            backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
+          }
+        })
+      }
+    },
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: 40
+        }
+      }
+    },
+    // =========================================================================
+    // MENUS (Refined - with proper menu item styles)
+    // =========================================================================
+    MuiMenu: {
+      styleOverrides: {
+        paper: ({ theme }) => ({
+          borderRadius,
+          marginTop: 4,
+          boxShadow: `0 0 2px 0 rgba(${getGreyChannel(theme)} / 0.24), -20px 20px 40px -4px rgba(${getGreyChannel(theme)} / 0.24)`
+        }),
+        list: {
+          padding: 4
+        }
+      }
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          ...theme.typography.body2,
+          borderRadius: borderRadius - 2,
+          margin: 2,
+          padding: `${8 * dm}px ${12 * dm}px`,
+          "&:not(:last-of-type)": {
+            marginBottom: 4
+          },
+          "&.Mui-selected": {
+            fontWeight: 500,
+            backgroundColor: theme.vars?.palette.action.selected || theme.palette.action.selected,
+            "&:hover": {
+              backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
+            }
+          }
+        })
+      }
+    },
+    MuiPopover: {
+      styleOverrides: {
+        paper: ({ theme }) => ({
+          borderRadius,
+          boxShadow: `0 0 2px 0 rgba(${getGreyChannel(theme)} / 0.24), -20px 20px 40px -4px rgba(${getGreyChannel(theme)} / 0.24)`
+        })
+      }
+    },
+    // =========================================================================
+    // MISC
+    // =========================================================================
+    MuiDivider: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          borderColor: `rgba(${getGreyChannel(theme)} / 0.2)`
+        })
+      }
+    },
+    MuiSkeleton: {
+      styleOverrides: {
+        rounded: {
+          borderRadius
+        }
+      }
+    },
+    MuiBackdrop: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          backgroundColor: `rgba(${getGreyChannel(theme, "900")} / 0.5)`
+        })
+      }
+    },
+    // =========================================================================
+    // LINK
+    // =========================================================================
+    MuiLink: {
+      defaultProps: {
+        underline: "hover"
+      },
+      styleOverrides: {
+        root: ({ theme }) => ({
+          color: theme.vars?.palette.primary.main || theme.palette.primary.main,
+          textDecorationColor: "transparent",
+          transition: "color 150ms, text-decoration-color 150ms",
+          "&:hover": {
+            textDecorationColor: "currentColor"
+          }
+        })
+      }
+    },
+    // =========================================================================
+    // TOGGLE BUTTON
+    // =========================================================================
+    MuiToggleButton: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          borderRadius,
+          fontWeight: 500,
+          textTransform: "none",
+          border: `1px solid ${theme.vars?.palette.divider || theme.palette.divider}`,
+          [`&.${toggleButtonClasses.selected}`]: {
+            backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.08)`,
+            borderColor: theme.vars?.palette.primary.main || theme.palette.primary.main,
+            color: theme.vars?.palette.primary.main || theme.palette.primary.main,
+            "&:hover": {
+              backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.16)`
+            }
+          },
+          [`&.${toggleButtonClasses.disabled}`]: {
+            borderColor: theme.vars?.palette.action.disabledBackground || theme.palette.action.disabledBackground
+          }
+        }),
+        sizeSmall: {
+          padding: `${4 * dm}px ${8 * dm}px`,
+          fontSize: "0.8125rem"
+        },
+        sizeMedium: {
+          padding: `${6 * dm}px ${12 * dm}px`
+        },
+        sizeLarge: {
+          padding: `${8 * dm}px ${16 * dm}px`,
+          fontSize: "0.9375rem"
+        }
+      }
+    },
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        root: {
+          gap: 4,
+          "& .MuiToggleButton-root": {
+            border: "1px solid",
+            borderRadius: `${borderRadius}px !important`
+          }
+        },
+        grouped: {
+          "&:not(:first-of-type)": {
+            marginLeft: 0,
+            borderLeft: "1px solid"
+          }
+        }
+      }
+    },
+    // =========================================================================
+    // TIMELINE
+    // =========================================================================
+    MuiTimeline: {
+      styleOverrides: {
+        root: {
+          padding: 0
+        }
+      }
+    },
+    MuiTimelineItem: {
+      styleOverrides: {
+        root: {
+          "&::before": {
+            display: "none"
+          }
+        }
+      }
+    },
+    MuiTimelineDot: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          boxShadow: "none",
+          borderColor: "transparent",
+          padding: 3
+        }),
+        outlined: ({ theme }) => ({
+          borderColor: theme.vars?.palette.divider || theme.palette.divider,
+          backgroundColor: "transparent"
+        })
+      }
+    },
+    MuiTimelineConnector: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          backgroundColor: theme.vars?.palette.divider || theme.palette.divider,
+          width: 2
+        })
+      }
+    },
+    MuiTimelineContent: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          ...theme.typography.body2,
+          padding: `${6 * dm}px ${16 * dm}px`
+        })
+      }
+    },
+    // =========================================================================
+    // DATA GRID (MUI X)
+    // =========================================================================
+    MuiDataGrid: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          border: "none",
+          borderRadius,
+          "--DataGrid-containerBackground": theme.vars?.palette.background.neutral || theme.palette.grey[50],
+          "--DataGrid-pinnedBackground": theme.vars?.palette.background.paper || theme.palette.background.paper,
+          "& .MuiDataGrid-columnHeaders": {
+            borderBottom: `1px solid ${theme.vars?.palette.divider || theme.palette.divider}`
+          },
+          "& .MuiDataGrid-columnHeader": {
+            fontWeight: 600,
+            fontSize: theme.typography.pxToRem(14),
+            color: theme.vars?.palette.text.secondary || theme.palette.text.secondary,
+            "&:focus, &:focus-within": {
+              outline: "none"
+            }
+          },
+          "& .MuiDataGrid-cell": {
+            borderBottom: `1px solid rgba(${getGreyChannel(theme)} / 0.12)`,
+            "&:focus, &:focus-within": {
+              outline: "none"
+            }
+          },
+          "& .MuiDataGrid-row": {
+            "&:hover": {
+              backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
+            },
+            "&.Mui-selected": {
+              backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.08)`,
+              "&:hover": {
+                backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.12)`
+              }
+            }
+          },
+          "& .MuiDataGrid-footerContainer": {
+            borderTop: `1px solid ${theme.vars?.palette.divider || theme.palette.divider}`
+          },
+          "& .MuiDataGrid-selectedRowCount": {
+            whiteSpace: "nowrap"
+          },
+          "& .MuiDataGrid-toolbarContainer": {
+            padding: theme.spacing(1.5, 1.5, 0.5),
+            gap: theme.spacing(1)
+          },
+          "& .MuiDataGrid-columnSeparator": {
+            color: theme.vars?.palette.divider || theme.palette.divider
+          }
+        })
+      }
+    },
+    // =========================================================================
+    // DATE/TIME PICKERS (MUI X)
+    // =========================================================================
+    MuiDatePicker: {
+      defaultProps: {
+        slotProps: {
+          openPickerButton: {
+            size: density === "compact" ? "small" : "medium"
+          }
+        }
+      }
+    },
+    MuiPickersLayout: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          "& .MuiPickersLayout-actionBar": {
+            padding: theme.spacing(1, 2)
+          }
+        })
+      }
+    },
+    MuiPickersDay: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          borderRadius: borderRadius - 2,
+          fontWeight: 400,
+          "&.Mui-selected": {
+            fontWeight: 600
+          }
+        }),
+        today: ({ theme }) => ({
+          borderColor: theme.vars?.palette.primary.main || theme.palette.primary.main,
+          "&:not(.Mui-selected)": {
+            backgroundColor: "transparent"
+          }
+        })
+      }
+    },
+    MuiPickersYear: {
+      styleOverrides: {
+        yearButton: ({ theme }) => ({
+          borderRadius,
+          "&.Mui-selected": {
+            fontWeight: 600
+          }
+        })
+      }
+    },
+    MuiPickersMonth: {
+      styleOverrides: {
+        monthButton: ({ theme }) => ({
+          borderRadius,
+          "&.Mui-selected": {
+            fontWeight: 600
+          }
+        })
+      }
+    },
+    // =========================================================================
+    // TREE VIEW (MUI X)
+    // =========================================================================
+    MuiTreeItem: {
+      styleOverrides: {
+        root: {
+          // Default styling
+        },
+        content: ({ theme }) => ({
+          borderRadius: borderRadius - 2,
+          padding: `${4 * dm}px ${8 * dm}px`,
+          "&.Mui-selected": {
+            backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.08)`,
+            "&:hover": {
+              backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.16)`
+            },
+            "&.Mui-focused": {
+              backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.12)`
+            }
+          },
+          "&:hover": {
+            backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
+          }
+        }),
+        label: ({ theme }) => ({
+          ...theme.typography.body2,
+          fontWeight: 500
+        }),
+        iconContainer: {
+          width: "auto"
+        }
+      }
+    },
+    MuiCssBaseline: {
+      styleOverrides: (theme) => ({
+        html: {
+          scrollBehavior: "smooth"
+        },
+        body: {
+          scrollbarWidth: "thin",
+          scrollbarColor: `rgba(${getGreyChannel(theme)} / 0.4) rgba(${getGreyChannel(theme)} / 0.08)`
+        },
+        "*, *::before, *::after": {
+          boxSizing: "border-box"
+        },
+        "#root, #__next": {
+          height: "100%"
+        },
+        // Webkit scrollbar styling
+        "::-webkit-scrollbar": {
+          width: 6,
+          height: 6
+        },
+        "::-webkit-scrollbar-track": {
+          backgroundColor: "transparent"
+        },
+        "::-webkit-scrollbar-thumb": {
+          backgroundColor: `rgba(${getGreyChannel(theme)} / 0.4)`,
+          borderRadius: 3
+        },
+        "::-webkit-scrollbar-thumb:hover": {
+          backgroundColor: `rgba(${getGreyChannel(theme)} / 0.6)`
+        },
+        // Vision Mode Accessibility Filters
+        // These apply SVG color matrix filters to simulate color blindness
+        'html[data-vision="protanopia"]:not([data-showcase])': {
+          filter: 'url("#protanopia-filter")'
+        },
+        'html[data-vision="deuteranopia"]:not([data-showcase])': {
+          filter: 'url("#deuteranopia-filter")'
+        },
+        'html[data-vision="tritanopia"]:not([data-showcase])': {
+          filter: 'url("#tritanopia-filter")'
+        },
+        'html[data-vision="achromatopsia"]:not([data-showcase])': {
+          filter: 'url("#achromatopsia-filter")'
+        }
+      })
+    }
+  };
+}
+
+// src/theme/shadows.ts
+var shadows = [
+  "none",
+  "0px 1px 2px 0px rgba(0, 0, 0, 0.05)",
+  "0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1)",
+  "0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)",
+  "0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1)",
+  "0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1)",
+  "0px 25px 50px -12px rgba(0, 0, 0, 0.25)",
+  // Cards and dropdowns
+  "0px 2px 4px rgba(0, 0, 0, 0.08)",
+  "0px 4px 8px rgba(0, 0, 0, 0.08)",
+  "0px 8px 16px rgba(0, 0, 0, 0.08)",
+  "0px 12px 24px rgba(0, 0, 0, 0.08)",
+  "0px 16px 32px rgba(0, 0, 0, 0.08)",
+  "0px 20px 40px rgba(0, 0, 0, 0.08)",
+  // Modals and dialogs
+  "0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1)",
+  "0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 20px 25px -5px rgba(0, 0, 0, 0.1)",
+  "0px 20px 20px -10px rgba(0, 0, 0, 0.04), 0px 25px 50px -12px rgba(0, 0, 0, 0.25)",
+  // Navigation
+  "0px 0px 0px 1px rgba(0, 0, 0, 0.05)",
+  "0px 1px 2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(0, 0, 0, 0.05)",
+  "0px 2px 4px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(0, 0, 0, 0.05)",
+  // Focus rings
+  "0px 0px 0px 3px rgba(66, 153, 225, 0.5)",
+  "0px 0px 0px 3px rgba(72, 187, 120, 0.5)",
+  "0px 0px 0px 3px rgba(245, 101, 101, 0.5)",
+  // Inset
+  "inset 0px 2px 4px rgba(0, 0, 0, 0.06)",
+  "inset 0px 4px 6px rgba(0, 0, 0, 0.1)",
+  "inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1)"
+];
+function createShadows(primaryColor, opacityMultiplier = 1) {
+  if (opacityMultiplier === 1) {
+    return [...shadows];
+  }
+  return shadows.map((shadow) => {
+    if (shadow === "none") return shadow;
+    return shadow.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/g, (_, r, g, b, a) => {
+      const newAlpha = Math.min(1, parseFloat(a) * opacityMultiplier);
+      return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(2)})`;
+    });
+  });
+}
+({
+  /** No shadow */
+  none: shadows[0],
+  /** Extra small shadow */
+  xs: shadows[1],
+  /** Small shadow */
+  sm: shadows[2],
+  /** Medium shadow */
+  md: shadows[3],
+  /** Large shadow */
+  lg: shadows[4],
+  /** Extra large shadow */
+  xl: shadows[5],
+  /** 2x extra large shadow */
+  "2xl": shadows[6],
+  /** Card shadow */
+  card: shadows[8],
+  /** Dropdown shadow */
+  dropdown: shadows[9],
+  /** Modal shadow */
+  modal: shadows[14],
+  /** Dialog shadow */
+  dialog: shadows[15],
+  /** Focus ring (primary) */
+  focusPrimary: shadows[19],
+  /** Focus ring (success) */
+  focusSuccess: shadows[20],
+  /** Focus ring (error) */
+  focusError: shadows[21],
+  /** Inset shadow */
+  inset: shadows[22]
+});
+var darkShadow = "0px 0px 0px 1px rgba(255, 255, 255, 0.1)";
+
+// src/theme/typography.ts
+var typography = {
+  fontFamily: {
+    primary: '"Nunito Sans Variable", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    secondary: '"Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    mono: '"JetBrains Mono", "Fira Code", Consolas, Monaco, monospace'
+  },
+  fontWeights: {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    semiBold: 600,
+    bold: 700
+  }
+};
+var fontSizes = {
+  xs: "0.75rem",
+  // 12px
+  sm: "0.875rem",
+  // 14px
+  md: "1rem",
+  // 16px
+  lg: "1.125rem",
+  // 18px
+  xl: "1.25rem",
+  // 20px
+  "2xl": "1.5rem",
+  // 24px
+  "3xl": "1.875rem",
+  // 30px
+  "4xl": "2.25rem",
+  // 36px
+  "5xl": "3rem"};
+var lineHeights = {
+  tight: 1.25,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.625};
+function createTypography(config) {
+  const { fontFamily, fontWeights } = config;
+  return {
+    fontFamily: fontFamily.primary,
+    fontWeightLight: fontWeights.light,
+    fontWeightRegular: fontWeights.regular,
+    fontWeightMedium: fontWeights.medium,
+    fontWeightBold: fontWeights.bold,
+    // Headings
+    h1: {
+      fontFamily: fontFamily.secondary || fontFamily.primary,
+      fontWeight: fontWeights.bold,
+      fontSize: fontSizes["5xl"],
+      lineHeight: lineHeights.tight,
+      letterSpacing: "-0.025em"
+    },
+    h2: {
+      fontFamily: fontFamily.secondary || fontFamily.primary,
+      fontWeight: fontWeights.bold,
+      fontSize: fontSizes["4xl"],
+      lineHeight: lineHeights.tight,
+      letterSpacing: "-0.025em"
+    },
+    h3: {
+      fontFamily: fontFamily.secondary || fontFamily.primary,
+      fontWeight: fontWeights.semiBold,
+      fontSize: fontSizes["3xl"],
+      lineHeight: lineHeights.snug,
+      letterSpacing: "-0.02em"
+    },
+    h4: {
+      fontFamily: fontFamily.secondary || fontFamily.primary,
+      fontWeight: fontWeights.semiBold,
+      fontSize: fontSizes["2xl"],
+      lineHeight: lineHeights.snug,
+      letterSpacing: "-0.02em"
+    },
+    h5: {
+      fontFamily: fontFamily.secondary || fontFamily.primary,
+      fontWeight: fontWeights.semiBold,
+      fontSize: fontSizes.xl,
+      lineHeight: lineHeights.snug
+    },
+    h6: {
+      fontFamily: fontFamily.secondary || fontFamily.primary,
+      fontWeight: fontWeights.semiBold,
+      fontSize: fontSizes.lg,
+      lineHeight: lineHeights.snug
+    },
+    // Body text
+    body1: {
+      fontSize: fontSizes.md,
+      lineHeight: lineHeights.relaxed
+    },
+    body2: {
+      fontSize: fontSizes.sm,
+      lineHeight: lineHeights.relaxed
+    },
+    // Subtitles
+    subtitle1: {
+      fontSize: fontSizes.md,
+      fontWeight: fontWeights.medium,
+      lineHeight: lineHeights.normal
+    },
+    subtitle2: {
+      fontSize: fontSizes.sm,
+      fontWeight: fontWeights.medium,
+      lineHeight: lineHeights.normal
+    },
+    // Captions and overlines
+    caption: {
+      fontSize: fontSizes.xs,
+      lineHeight: lineHeights.normal
+    },
+    overline: {
+      fontSize: fontSizes.xs,
+      fontWeight: fontWeights.semiBold,
+      lineHeight: lineHeights.normal,
+      textTransform: "uppercase",
+      letterSpacing: "0.08em"
+    },
+    // Buttons
+    button: {
+      fontSize: fontSizes.sm,
+      fontWeight: fontWeights.semiBold,
+      lineHeight: lineHeights.normal,
+      textTransform: "none"
+    }
+  };
+}
+
+// src/theme/colors/luxury.ts
+var luxuryPrimary = {
+  50: "#FBF7E8",
+  100: "#F5EBC9",
+  200: "#EDDFA8",
+  300: "#E3D086",
+  400: "#D9C164",
+  500: "#C9A227",
+  600: "#A88820",
+  700: "#876D1A",
+  800: "#665314",
+  900: "#45380E",
+  950: "#241D07"
+};
+var luxurySecondary = {
+  50: "#F5EEF5",
+  100: "#E8D5E8",
+  200: "#D4B3D4",
+  300: "#B38AB3",
+  400: "#996399",
+  500: "#6B3A6B",
+  600: "#5A305A",
+  700: "#4A284A",
+  800: "#3A1F3A",
+  900: "#2A172A",
+  950: "#1A0F1A"
+};
+var luxuryNeutral = {
+  50: "#FAF9F7",
+  100: "#F5F3F0",
+  200: "#E8E4DE",
+  300: "#D4CEC4",
+  400: "#B8AFA0",
+  500: "#9C917C",
+  600: "#7A6F5C",
+  700: "#5C5244",
+  800: "#3E362C",
+  900: "#201C16",
+  950: "#100E0B"
+};
+var luxuryError = {
+  50: "#F9E8E8",
+  100: "#F0C9C9",
+  200: "#E4A3A3",
+  300: "#D57C7C",
+  400: "#C65656",
+  500: "#B82E2E",
+  600: "#9A2626",
+  700: "#7D1E1E",
+  800: "#5F1717",
+  900: "#42100F",
+  950: "#250908"
+};
+var luxuryWarning = {
+  50: "#FEF8E6",
+  100: "#FCEFC2",
+  200: "#F9E394",
+  300: "#F5D566",
+  400: "#F0C538",
+  500: "#D4A012",
+  600: "#B1850F",
+  700: "#8E6B0C",
+  800: "#6B5009",
+  900: "#483606",
+  950: "#251B03"
+};
+var luxurySuccess = {
+  50: "#E8F4E8",
+  100: "#C9E4C9",
+  200: "#A3D1A3",
+  300: "#7DBD7D",
+  400: "#56A956",
+  500: "#2E8B2E",
+  600: "#267426",
+  700: "#1E5D1E",
+  800: "#174717",
+  900: "#0F300F",
+  950: "#081A08"
+};
+var luxuryInfo = {
+  50: "#E8F0F6",
+  100: "#C9DCEB",
+  200: "#A3C4DD",
+  300: "#7DACCE",
+  400: "#5694C0",
+  500: "#2E7AB8",
+  600: "#26669A",
+  700: "#1E527C",
+  800: "#173E5E",
+  900: "#0F2A40",
+  950: "#081520"
+};
+var luxuryColors = {
+  primary: luxuryPrimary,
+  secondary: luxurySecondary,
+  neutral: luxuryNeutral,
+  error: luxuryError,
+  warning: luxuryWarning,
+  success: luxurySuccess,
+  info: luxuryInfo
+};
+
+// src/theme/presets/arctic.ts
+var lightPalette = {
+  primary: {
+    lighter: "#D6E9F8",
+    light: "#7BC1F0",
+    main: "#1E88E5",
+    dark: "#1565C0",
+    darker: "#0D47A1",
+    contrastText: "#FFFFFF"
+  },
+  secondary: {
+    lighter: "#E3F2FD",
+    light: "#90CAF9",
+    main: "#42A5F5",
+    dark: "#1E88E5",
+    darker: "#1565C0",
+    contrastText: "#FFFFFF"
+  },
+  info: {
+    lighter: "#E0F7FA",
+    light: "#80DEEA",
+    main: "#26C6DA",
+    dark: "#00ACC1",
+    darker: "#00838F",
+    contrastText: "#FFFFFF"
+  },
+  success: {
+    lighter: "#E8F5E9",
+    light: "#A5D6A7",
+    main: "#66BB6A",
+    dark: "#43A047",
+    darker: "#2E7D32",
+    contrastText: "#FFFFFF"
+  },
+  warning: {
+    lighter: "#FFF8E1",
+    light: "#FFE082",
+    main: "#FFB300",
+    dark: "#FF8F00",
+    darker: "#FF6F00",
+    contrastText: "#212121"
+  },
+  error: {
+    lighter: "#FFEBEE",
+    light: "#EF9A9A",
+    main: "#EF5350",
+    dark: "#E53935",
+    darker: "#C62828",
+    contrastText: "#FFFFFF"
+  },
+  grey: {
+    50: "#FAFBFC",
+    100: "#F4F6F8",
+    200: "#E4E9ED",
+    300: "#D0D7DE",
+    400: "#AFB8C1",
+    500: "#8C959F",
+    600: "#6E7781",
+    700: "#57606A",
+    800: "#424A53",
+    900: "#32383F",
+    950: "#272C31"
+  },
+  common: {
+    black: "#1B1F23",
+    white: "#FFFFFF"
+  },
+  background: {
+    default: "#E8F0F6",
+    paper: "#F1F9FB",
+    neutral: "#E4E9ED"
+  },
+  text: {
+    primary: "#1B1F23",
+    secondary: "#57606A",
+    disabled: "#8C959F"
+  }
+};
+var darkPalette = {
+  primary: {
+    lighter: "#D6E9F8",
+    light: "#7BC1F0",
+    main: "#42A5F5",
+    dark: "#1E88E5",
+    darker: "#1565C0",
+    contrastText: "#FFFFFF"
+  },
+  secondary: {
+    lighter: "#E3F2FD",
+    light: "#90CAF9",
+    main: "#64B5F6",
+    dark: "#42A5F5",
+    darker: "#1E88E5",
+    contrastText: "#FFFFFF"
+  },
+  info: {
+    lighter: "#E0F7FA",
+    light: "#80DEEA",
+    main: "#4DD0E1",
+    dark: "#26C6DA",
+    darker: "#00ACC1",
+    contrastText: "#FFFFFF"
+  },
+  success: {
+    lighter: "#E8F5E9",
+    light: "#A5D6A7",
+    main: "#81C784",
+    dark: "#66BB6A",
+    darker: "#4CAF50",
+    contrastText: "#FFFFFF"
+  },
+  warning: {
+    lighter: "#FFF8E1",
+    light: "#FFE082",
+    main: "#FFCA28",
+    dark: "#FFB300",
+    darker: "#FFA000",
+    contrastText: "#212121"
+  },
+  error: {
+    lighter: "#FFEBEE",
+    light: "#EF9A9A",
+    main: "#EF5350",
+    dark: "#F44336",
+    darker: "#E53935",
+    contrastText: "#FFFFFF"
+  },
+  grey: {
+    50: "#0D1117",
+    100: "#161B22",
+    200: "#21262D",
+    300: "#30363D",
+    400: "#484F58",
+    500: "#6E7681",
+    600: "#8B949E",
+    700: "#B1BAC4",
+    800: "#C9D1D9",
+    900: "#F0F6FC"
+  },
+  common: {
+    black: "#010409",
+    white: "#FFFFFF"
+  },
+  background: {
+    default: "#0D1117",
+    paper: "#161B22",
+    neutral: "#21262D"
+  },
+  text: {
+    primary: "#F0F6FC",
+    secondary: "#B1BAC4",
+    disabled: "#6E7681"
+  }
+};
+var arcticPreset = {
+  name: "arctic",
+  displayName: "Arctic",
+  description: "A cool, crisp blue theme inspired by northern landscapes.",
+  preferredMode: "light",
+  lightPalette,
+  darkPalette,
+  typography: {
+    fontFamily: {
+      primary: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      secondary: '"Poppins", -apple-system, BlinkMacSystemFont, sans-serif',
+      mono: '"Fira Code", Consolas, Monaco, monospace'
+    },
+    fontWeights: {
+      light: 300,
+      regular: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    }
+  },
+  colorGroup: {
+    key: "arctic",
+    main: "#1E88E5"
+  }
+};
+
+// src/theme/presets/dracula.ts
+var draculaPurple = {
+  50: "#F9F5FF",
+  100: "#F0E6FF",
+  200: "#E3CFFF",
+  300: "#CEA9FF",
+  400: "#B574FF",
+  500: "#BD93F9",
+  // Main Dracula purple
+  600: "#A57EE0",
+  700: "#8666B8",
+  800: "#6E5394",
+  900: "#5B4579",
+  950: "#3B2D4D"
+};
+var draculaPink = {
+  50: "#FFF5F7",
+  100: "#FFE5EA",
+  200: "#FFCCD6",
+  300: "#FFA4B5",
+  400: "#FF6E8B",
+  500: "#FF79C6",
+  // Main Dracula pink
+  600: "#E85AA1",
+  700: "#C4407F",
+  800: "#A2356A",
+  900: "#87305B",
+  950: "#4E1533"
+};
+var draculaCyan = {
+  50: "#ECFFFE",
+  100: "#CFFFFE",
+  200: "#A5FFFE",
+  300: "#67FFFC",
+  400: "#22FFF5",
+  500: "#8BE9FD",
+  // Main Dracula cyan
+  600: "#06D1E7",
+  700: "#0BA6BC",
+  800: "#118497",
+  900: "#136C7D",
+  950: "#05484E"
+};
+var draculaPreset = {
+  name: "dracula",
+  displayName: "Dracula",
+  description: "A dark theme inspired by the popular Dracula color scheme.",
+  preferredMode: "dark",
+  typography: {
+    fontFamily: {
+      primary: '"Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      secondary: '"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif',
+      mono: '"Fira Code", Consolas, Monaco, monospace'
+    },
+    fontWeights: {
+      light: 300,
+      regular: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    }
+  },
+  colorGroup: {
+    key: "dracula",
+    main: draculaPurple[500],
+    palette: draculaPurple
+  }
+};
+
+// src/theme/presets/ember.ts
+var emberPrimary = {
+  50: "#FFF4ED",
+  100: "#FFE4D4",
+  200: "#FFC9A8",
+  300: "#FFAA71",
+  400: "#FF8038",
+  500: "#FF5F11",
+  600: "#F04006",
+  700: "#C72D07",
+  800: "#9E250E",
+  900: "#7F230F",
+  950: "#450E05"
+};
+var emberSecondary = {
+  50: "#FFF1F2",
+  100: "#FFE1E3",
+  200: "#FFC8CD",
+  300: "#FFA1A9",
+  400: "#FF6B78",
+  500: "#FA3D4D",
+  600: "#E81B2D",
+  700: "#C31323",
+  800: "#A11421",
+  900: "#861721",
+  950: "#49060C"
+};
+var emberPreset = {
+  name: "ember",
+  displayName: "Ember",
+  description: "A warm, fiery theme with deep oranges and reds.",
+  preferredMode: "dark",
+  typography: {
+    fontFamily: {
+      primary: '"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      secondary: '"Playfair Display", Georgia, serif',
+      mono: '"Source Code Pro", Consolas, Monaco, monospace'
+    },
+    fontWeights: {
+      light: 300,
+      regular: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    }
+  },
+  colorGroup: {
+    key: "ember",
+    main: emberPrimary[500],
+    palette: emberPrimary
+  }
+};
+
+// src/theme/presets/midnight.ts
+var midnightIndigo = {
+  50: "#EEF2FF",
+  100: "#E0E7FF",
+  200: "#C7D2FE",
+  300: "#A5B4FC",
+  400: "#818CF8",
+  500: "#6366F1",
+  // Main indigo
+  600: "#4F46E5",
+  700: "#4338CA",
+  800: "#3730A3",
+  900: "#312E81",
+  950: "#1E1B4B"
+};
+var midnightBackground = {
+  50: "#F8FAFC",
+  100: "#F1F5F9",
+  200: "#E2E8F0",
+  300: "#CBD5E1",
+  400: "#94A3B8",
+  500: "#64748B",
+  600: "#475569",
+  700: "#334155",
+  800: "#1E293B",
+  900: "#0F172A",
+  // Main dark background
+  950: "#020617"
+};
+var midnightPreset = {
+  name: "midnight",
+  displayName: "Midnight",
+  description: "A deep blue-black theme for late night coding sessions.",
+  preferredMode: "dark",
+  typography: {
+    fontFamily: {
+      primary: '"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      secondary: '"Sora", -apple-system, BlinkMacSystemFont, sans-serif',
+      mono: '"IBM Plex Mono", Consolas, Monaco, monospace'
+    },
+    fontWeights: {
+      light: 300,
+      regular: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    }
+  },
+  colorGroup: {
+    key: "midnight",
+    main: midnightIndigo[500],
+    palette: midnightIndigo
+  }
+};
+
+// src/theme/presets/retro.ts
+var retroAmber = {
+  50: "#FFFBEB",
+  100: "#FEF3C7",
+  200: "#FDE68A",
+  300: "#FCD34D",
+  400: "#FBBF24",
+  500: "#F59E0B",
+  // Main amber
+  600: "#D97706",
+  700: "#B45309",
+  800: "#92400E",
+  900: "#78350F",
+  950: "#451A03"
+};
+var retroTeal = {
+  50: "#F0FDFA",
+  100: "#CCFBF1",
+  200: "#99F6E4",
+  300: "#5EEAD4",
+  400: "#2DD4BF",
+  500: "#14B8A6",
+  // Main teal
+  600: "#0D9488",
+  700: "#0F766E",
+  800: "#115E59",
+  900: "#134E4A",
+  950: "#042F2E"
+};
+var retroPreset = {
+  name: "retro",
+  displayName: "Retro",
+  description: "A nostalgic theme with vintage computer aesthetics.",
+  preferredMode: "light",
+  typography: {
+    fontFamily: {
+      primary: '"VT323", "Courier New", Courier, monospace',
+      secondary: '"Press Start 2P", "Courier New", monospace',
+      mono: '"VT323", "Courier New", Courier, monospace'
+    },
+    fontWeights: {
+      light: 400,
+      regular: 400,
+      medium: 400,
+      semiBold: 400,
+      bold: 400
+    }
+  },
+  colorGroup: {
+    key: "retro",
+    main: retroAmber[500],
+    palette: retroAmber
+  }
+};
+
+// src/theme/presets/minimal.ts
+var minimalNeutral = {
+  50: "#FAFAFA",
+  100: "#F5F5F5",
+  200: "#E5E5E5",
+  300: "#D4D4D4",
+  400: "#A3A3A3",
+  500: "#737373",
+  // Main neutral
+  600: "#525252",
+  700: "#404040",
+  800: "#262626",
+  900: "#171717",
+  950: "#0A0A0A"
+};
+var minimalAccent = {
+  50: "#F8FAFC",
+  100: "#F1F5F9",
+  200: "#E2E8F0",
+  300: "#CBD5E1",
+  400: "#94A3B8",
+  500: "#64748B",
+  // Main slate
+  600: "#475569",
+  700: "#334155",
+  800: "#1E293B",
+  900: "#0F172A",
+  950: "#020617"
+};
+var minimalPreset = {
+  name: "minimal",
+  displayName: "Minimal",
+  description: "A clean, minimalist theme with subtle grays and muted accents.",
+  preferredMode: "light",
+  typography: {
+    fontFamily: {
+      primary: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      secondary: '"Inter", -apple-system, BlinkMacSystemFont, sans-serif',
+      mono: '"SF Mono", Menlo, Consolas, Monaco, monospace'
+    },
+    fontWeights: {
+      light: 300,
+      regular: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    }
+  },
+  colorGroup: {
+    key: "minimal",
+    main: minimalNeutral[500],
+    palette: minimalNeutral
+  }
+};
+
+// src/theme/create-theme.ts
+function getPresetConfig(preset) {
+  switch (preset) {
+    case "luxury":
+      return {
+        lightPalette: buildPalette({
+          primary: luxuryPrimary,
+          secondary: luxurySecondary,
+          info: luxuryInfo,
+          success: luxurySuccess,
+          warning: luxuryWarning,
+          error: luxuryError,
+          grey: luxuryNeutral,
+          mode: "light",
+          backgroundDefault: "#FAF7F5",
+          paperColor: "#FDFBFB"
+        }),
+        darkPalette: buildPalette({
+          primary: luxuryPrimary,
+          secondary: luxurySecondary,
+          info: luxuryInfo,
+          success: luxurySuccess,
+          warning: luxuryWarning,
+          error: luxuryError,
+          grey: luxuryNeutral,
+          mode: "dark"
+        }),
+        colorGroup: {
+          key: "luxury",
+          main: luxuryPrimary[500],
+          palette: luxuryPrimary
+        }
+      };
+    case "arctic":
+      return {
+        lightPalette: buildPaletteFromPreset(arcticPreset.lightPalette, "light"),
+        darkPalette: buildPaletteFromPreset(arcticPreset.darkPalette, "dark"),
+        colorGroup: {
+          key: "arctic",
+          main: "#1E88E5",
+          palette: blue
+          // Use blue as base for color group
+        }
+      };
+    case "dracula":
+      return {
+        lightPalette: buildPalette({
+          primary: draculaPurple,
+          secondary: draculaPink,
+          info: draculaCyan,
+          success: green,
+          warning: orange,
+          error: red,
+          grey,
+          mode: "light",
+          backgroundDefault: "#F5F0FA",
+          paperColor: "#FAF7FC"
+        }),
+        darkPalette: buildPalette({
+          primary: draculaPurple,
+          secondary: draculaPink,
+          info: draculaCyan,
+          success: green,
+          warning: orange,
+          error: red,
+          grey,
+          mode: "dark",
+          backgroundDefault: "#282A36",
+          // Dracula background
+          paperColor: "#21222C"
+        }),
+        colorGroup: {
+          key: "dracula",
+          main: draculaPurple[500],
+          palette: draculaPurple
+        }
+      };
+    case "ember":
+      return {
+        lightPalette: buildPalette({
+          primary: emberPrimary,
+          secondary: emberSecondary,
+          info: lightBlue,
+          success: green,
+          warning: orange,
+          error: emberSecondary,
+          grey,
+          mode: "light",
+          backgroundDefault: "#FFF5F0",
+          paperColor: "#FFFAF7"
+        }),
+        darkPalette: buildPalette({
+          primary: emberPrimary,
+          secondary: emberSecondary,
+          info: lightBlue,
+          success: green,
+          warning: orange,
+          error: emberSecondary,
+          grey,
+          mode: "dark",
+          backgroundDefault: "#1A0A05",
+          paperColor: "#2D1610"
+        }),
+        colorGroup: {
+          key: "ember",
+          main: emberPrimary[500],
+          palette: emberPrimary
+        }
+      };
+    case "midnight":
+      return {
+        lightPalette: buildPalette({
+          primary: midnightIndigo,
+          secondary: purple,
+          info: lightBlue,
+          success: green,
+          warning: orange,
+          error: red,
+          grey: midnightBackground,
+          mode: "light",
+          backgroundDefault: "#F0F0F8",
+          paperColor: "#F7F7FC"
+        }),
+        darkPalette: buildPalette({
+          primary: midnightIndigo,
+          secondary: purple,
+          info: lightBlue,
+          success: green,
+          warning: orange,
+          error: red,
+          grey: midnightBackground,
+          mode: "dark",
+          backgroundDefault: midnightBackground[950],
+          paperColor: midnightBackground[900]
+        }),
+        colorGroup: {
+          key: "midnight",
+          main: midnightIndigo[500],
+          palette: midnightIndigo
+        }
+      };
+    case "retro":
+      return {
+        lightPalette: buildPalette({
+          primary: retroAmber,
+          secondary: retroTeal,
+          info: lightBlue,
+          success: retroTeal,
+          warning: retroAmber,
+          error: red,
+          grey,
+          mode: "light",
+          backgroundDefault: "#F8F1E0",
+          paperColor: "#FDF8EE"
+        }),
+        darkPalette: buildPalette({
+          primary: retroAmber,
+          secondary: retroTeal,
+          info: lightBlue,
+          success: retroTeal,
+          warning: retroAmber,
+          error: red,
+          grey,
+          mode: "dark",
+          backgroundDefault: "#1A1814",
+          paperColor: "#252218"
+        }),
+        colorGroup: {
+          key: "retro",
+          main: retroAmber[500],
+          palette: retroAmber
+        }
+      };
+    case "minimal":
+      return {
+        lightPalette: buildPalette({
+          primary: minimalAccent,
+          secondary: minimalNeutral,
+          info: lightBlue,
+          success: green,
+          warning: orange,
+          error: red,
+          grey: minimalNeutral,
+          mode: "light",
+          backgroundDefault: "#FAFAFA",
+          paperColor: "#FFFFFF"
+        }),
+        darkPalette: buildPalette({
+          primary: minimalAccent,
+          secondary: minimalNeutral,
+          info: lightBlue,
+          success: green,
+          warning: orange,
+          error: red,
+          grey: minimalNeutral,
+          mode: "dark",
+          backgroundDefault: "#0A0A0A",
+          paperColor: "#171717"
+        }),
+        colorGroup: {
+          key: "minimal",
+          main: minimalAccent[500],
+          palette: minimalAccent
+        }
+      };
+    case "nature":
+      return {
+        lightPalette: buildPalette({
+          primary: green,
+          secondary: purple,
+          info: lightBlue,
+          success: green,
+          warning: orange,
+          error: red,
+          grey,
+          mode: "light",
+          backgroundDefault: "#EEF6EE",
+          paperColor: "#F5FAF5"
+        }),
+        darkPalette: buildPalette({
+          primary: green,
+          secondary: purple,
+          info: lightBlue,
+          success: green,
+          warning: orange,
+          error: red,
+          grey,
+          mode: "dark",
+          backgroundDefault: "#0A1A0A",
+          paperColor: "#0F1F0F"
+        }),
+        colorGroup: {
+          key: "nature",
+          main: green[500],
+          palette: green
+        }
+      };
+    case "default-dark":
+      return {
+        lightPalette: defaultLightPalette,
+        darkPalette: defaultDarkPalette,
+        colorGroup: {
+          key: "default-dark",
+          main: blue[400],
+          palette: blue
+        }
+      };
+    case "default-light":
+    default:
+      return {
+        lightPalette: defaultLightPalette,
+        darkPalette: defaultDarkPalette,
+        colorGroup: {
+          key: "default-light",
+          main: blue[500],
+          palette: blue
+        }
+      };
+  }
+}
+function buildPaletteFromPreset(presetPalette, mode) {
+  const grey2 = presetPalette.grey;
+  return {
+    mode,
+    primary: generatePaletteColorWithChannels(presetPalette.primary),
+    secondary: generatePaletteColorWithChannels(presetPalette.secondary),
+    info: generatePaletteColorWithChannels(presetPalette.info),
+    success: generatePaletteColorWithChannels(presetPalette.success),
+    warning: generatePaletteColorWithChannels(presetPalette.warning),
+    error: generatePaletteColorWithChannels(presetPalette.error),
+    grey: grey2,
+    common: presetPalette.common,
+    background: presetPalette.background,
+    text: presetPalette.text
+  };
+}
+var COLOR_GROUPS = [
+  // Default presets
+  { key: "default-light", main: blue[500], palette: blue },
+  { key: "default-dark", main: blue[400], palette: blue },
+  // Base colors
+  { key: "green", main: green[500], palette: green },
+  { key: "purple", main: purple[500], palette: purple },
+  { key: "red", main: red[500], palette: red },
+  { key: "orange", main: orange[500], palette: orange },
+  { key: "lightBlue", main: lightBlue[500], palette: lightBlue },
+  // Preset colors
+  { key: "luxury", main: luxuryPrimary[500], palette: luxuryPrimary },
+  { key: "dracula", main: draculaPurple[500], palette: draculaPurple },
+  { key: "ember", main: emberPrimary[500], palette: emberPrimary },
+  { key: "midnight", main: midnightIndigo[500], palette: midnightIndigo },
+  { key: "retro", main: retroAmber[500], palette: retroAmber },
+  { key: "minimal", main: minimalAccent[500], palette: minimalAccent },
+  { key: "nature", main: green[500], palette: green },
+  { key: "arctic", main: "#1E88E5", palette: blue }
+];
+function applyPrimaryOverride(basePalette, primaryColor, mode) {
+  if (!primaryColor) return basePalette;
+  const colorGroup = COLOR_GROUPS.find((group) => group.main === primaryColor);
+  if (colorGroup?.palette) {
+    const newPrimary2 = mode === "dark" ? generatePaletteColorWithChannels({
+      lighter: colorGroup.palette[950],
+      light: colorGroup.palette[700],
+      main: primaryColor,
+      dark: colorGroup.palette[300],
+      darker: colorGroup.palette[100],
+      contrastText: colorGroup.palette[950]
+    }) : generatePaletteColorWithChannels({
+      lighter: colorGroup.palette[50],
+      light: colorGroup.palette[400],
+      main: primaryColor,
+      dark: colorGroup.palette[600],
+      darker: colorGroup.palette[900],
+      contrastText: colorGroup.palette[50]
+    });
+    return { ...basePalette, primary: newPrimary2 };
+  }
+  const generatedScale = generateColorScale(primaryColor);
+  const newPrimary = mode === "dark" ? generatePaletteColorWithChannels({
+    lighter: generatedScale[950],
+    light: generatedScale[700],
+    main: generatedScale[400],
+    dark: generatedScale[300],
+    darker: generatedScale[100],
+    contrastText: generatedScale[950]
+  }) : generatePaletteColorWithChannels({
+    lighter: generatedScale[50],
+    light: generatedScale[400],
+    main: generatedScale[500],
+    dark: generatedScale[600],
+    darker: generatedScale[900],
+    contrastText: generatedScale[50]
+  });
+  return { ...basePalette, primary: newPrimary };
+}
+function getDensityMultiplier2(density) {
+  switch (density) {
+    case "compact":
+      return 0.75;
+    case "comfortable":
+      return 1.25;
+    case "standard":
+    default:
+      return 1;
+  }
+}
+function deepMergeThemeOptions(base, overrides) {
+  const result = { ...base };
+  for (const key of Object.keys(overrides)) {
+    const baseVal = base[key];
+    const overrideVal = overrides[key];
+    if (overrideVal !== null && typeof overrideVal === "object" && !Array.isArray(overrideVal) && typeof overrideVal !== "function" && baseVal !== null && typeof baseVal === "object" && !Array.isArray(baseVal) && typeof baseVal !== "function") {
+      result[key] = deepMergeThemeOptions(baseVal, overrideVal);
+    } else {
+      result[key] = overrideVal;
+    }
+  }
+  return result;
+}
+function createPrismTheme(options = {}) {
+  const {
+    preset = "default-light",
+    mode = "light",
+    direction = "ltr",
+    locale = "enUS",
+    primaryColor = null,
+    cssVarPrefix = "prism",
+    density = "standard",
+    borderRadius = 8,
+    responsiveFonts = true,
+    contrast = "default",
+    overrides
+  } = options;
+  const presetConfig = getPresetConfig(preset);
+  let lightPalette2 = applyPrimaryOverride(presetConfig.lightPalette, primaryColor, "light");
+  let darkPalette2 = applyPrimaryOverride(presetConfig.darkPalette, primaryColor, "dark");
+  if (contrast === "high") {
+    lightPalette2 = {
+      ...lightPalette2,
+      background: {
+        ...lightPalette2.background,
+        default: grey[200],
+        paper: "#FFFFFF"
+      }
+    };
+    darkPalette2 = {
+      ...darkPalette2,
+      background: {
+        ...darkPalette2.background,
+        default: "#000000",
+        paper: grey[900]
+      }
+    };
+  }
+  const densityMultiplier = getDensityMultiplier2(density);
+  const componentsConfig = {
+    density,
+    borderRadius};
+  const cssVariablesConfig = {
+    prefix: cssVarPrefix,
+    colorSchemeSelector: `data-${cssVarPrefix}-color-scheme`,
+    enabled: true
+  };
+  const muiLocale = locales[locale] || locales.enUS;
+  const primaryMain = lightPalette2.primary?.main || blue[500];
+  const lightShadows = createShadows();
+  const darkShadows = createShadows(primaryMain, 0.4);
+  const effectiveMode = mode === "dark" ? "dark" : "light";
+  const activePalette = effectiveMode === "dark" ? darkPalette2 : lightPalette2;
+  const activeShadows = effectiveMode === "dark" ? darkShadows : lightShadows;
+  const themeOptions = {
+    // CSS Variables integration - enables theme.vars.palette.*
+    cssVariables: {
+      cssVarPrefix,
+      colorSchemeSelector: cssVariablesConfig.colorSchemeSelector
+    },
+    // Active palette based on resolved mode
+    // PrismProvider recreates the theme on mode change, so we use the resolved palette directly
+    palette: activePalette,
+    // Active shadows based on resolved mode
+    shadows: activeShadows,
+    // Typography (uses Nunito Sans / Exo 2 defaults, overridable via options)
+    typography: createTypography({
+      fontFamily: {
+        primary: options.fontFamily ? `"${options.fontFamily}", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` : typography.fontFamily.primary,
+        secondary: typography.fontFamily.secondary,
+        mono: typography.fontFamily.mono
+      },
+      fontWeights: typography.fontWeights
+    }),
+    // Note: actual html font-size is set by PrismProvider via useEffect.
+    // Do NOT set htmlFontSize here — MUI would compensate its rem values,
+    // cancelling out the scaling effect we want.
+    // Direction (RTL support)
+    direction,
+    // Shape
+    shape: {
+      borderRadius
+    },
+    // Mixins
+    mixins,
+    // Component overrides with density support
+    components: componentOverrides(componentsConfig)
+  };
+  const finalOptions = overrides ? deepMergeThemeOptions(themeOptions, overrides) : themeOptions;
+  let theme = createTheme(finalOptions, muiLocale);
+  if (responsiveFonts) {
+    theme = responsiveFontSizes(theme);
+  }
+  const prismTheme = theme;
+  prismTheme.prism = {
+    preset,
+    mode,
+    direction,
+    density,
+    densityMultiplier,
+    cssVariables: cssVariablesConfig
+  };
+  return prismTheme;
+}
+var PRESET_NAMES = [
+  "default-light",
+  "default-dark",
+  "luxury",
+  "arctic",
+  "nature",
+  "ember",
+  "dracula",
+  "midnight",
+  "retro",
+  "minimal"
+];
+var PRESET_DISPLAY_NAMES = {
+  "default-light": "Default (Light)",
+  "default-dark": "Default (Dark)",
+  luxury: "Luxury",
+  arctic: "Arctic",
+  nature: "Nature",
+  ember: "Ember",
+  dracula: "Dracula",
+  midnight: "Midnight",
+  retro: "Retro",
+  minimal: "Minimal"
+};
+var PRESET_INHERENT_MODE = {
+  "default-light": "light",
+  "default-dark": "dark",
+  luxury: "light",
+  arctic: "light",
+  nature: "light",
+  retro: "light",
+  minimal: "light",
+  ember: "dark",
+  dracula: "dark",
+  midnight: "dark"
+};
+function getPresetDisplayName(preset) {
+  return PRESET_DISPLAY_NAMES[preset];
+}
+
+export { COLOR_GROUPS, PRESET_DISPLAY_NAMES, PRESET_INHERENT_MODE, PRESET_NAMES, arcticPreset, baseColors, basic, blue, buildAction, buildBackground, buildChartColors, buildPalette, buildPaletteColor, buildText, buildVibrant, componentOverrides, createButtonBaseOverrides, createButtonGroupOverrides, createButtonOverrides, createPaletteColorFromScale, createPrismTheme, createShadows, createTypography, cssVarRgba, customScrollbarMixin, darkShadow, darken, defaultDarkPalette, defaultLightPalette, draculaPreset, emberPreset, focusRingMixin, generateColorScale, generateColorScaleWithChannels, generatePaletteColorWithChannels, getContrastRatio, getContrastText, getLuminance, getPresetDisplayName, glassMixin, green, grey, hexToHsl, hexToRgb, hexToRgbChannel, hideScrollbarMixin, hslToHex, invertColorScale, isLightColor, lightBlue, lighten, luxuryColors, luxuryError, luxuryInfo, luxuryNeutral, luxuryPrimary, luxurySecondary, luxurySuccess, luxuryWarning, midnightPreset, minimalPreset, mix, mixins, multiLineEllipsisMixin, orange, purple, red, retroPreset, rgbToHex, rgba, shadows, textEllipsisMixin, typography };
+//# sourceMappingURL=chunk-DXXZ3ITR.js.map
+//# sourceMappingURL=chunk-DXXZ3ITR.js.map