@omnitron-dev/prism 0.3.0 → 0.3.2

package/dist/{chunk-ZTATTUH7.js → chunk-RSWVYIXK.js}

@@ -1,4 +1,11 @@
+import { TableIcon } from './chunk-TZHWYT34.js';
+import { semanticSurfaceStyles } from './chunk-TZWHELY4.js';
+import { generateColorScaleWithChannels, hexToRgbChannel, cssVarRgba, getContrastText, generatePaletteColorWithChannels, scrollbarStyles, varAlpha, generateColorScale, mixins } from './chunk-IRYU3NTG.js';
+import { RemoveIcon, AddIcon, SearchIcon, CloseIcon, DownloadIcon, FilterIcon, ArrowDownIcon, ArrowUpIcon, MoreIcon, ChevronRightIcon, ChevronLeftIcon, LastPageIcon, FirstPageIcon, ChevronDownIcon, StarEmptyIcon, StarIcon, ErrorIcon, WarningIcon, InfoIcon, SuccessIcon, RadioCheckedIcon, RadioIcon } from './chunk-VQVVHMPG.js';
+import { createPrismIcon } from './chunk-D5J3KW6Q.js';
 import { buttonClasses } from '@mui/material/Button';
+import { createTheme, responsiveFontSizes, darken, lighten, getContrastRatio } from '@mui/material/styles';
+import { colorChannel, hslToRgb } from '@mui/system';
 import { iconButtonClasses } from '@mui/material/IconButton';
 import { accordionClasses } from '@mui/material/Accordion';
 import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
@@ -23,258 +30,9 @@ import { jsx } from 'react/jsx-runtime';
 import { tabClasses } from '@mui/material/Tab';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
 import '@mui/x-data-grid/themeAugmentation';
-import { createTheme, responsiveFontSizes } from '@mui/material/styles';
+import { forwardRef } from 'react';
 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 createPaletteColorFromScale(scale, mode = "light") {
-  const mainColor = mode === "dark" ? scale[400] : scale[500];
-  const contrastText = getContrastText(mainColor, "#FFFFFF", "#212121");
-  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 getContrastRatio(background, lightText) >= getContrastRatio(background, darkText) ? lightText : darkText;
-}
-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",
@@ -565,16 +323,83 @@ var defaultDarkPalette = buildPalette({
   grey,
   mode: "dark"
 });
+var isRecord = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+var owns = (value, key) => Object.prototype.hasOwnProperty.call(value, key);
+var roles = ["primary", "secondary", "success", "info", "warning", "error"];
+var shades = ["light", "dark", "lighter", "darker", "contrastText"];
+var colourKeys = /* @__PURE__ */ new Set(["main", ...shades, "primary", "secondary", "disabled", "default", "paper", "neutral", "divider", "active", "selected", "hover", "focus", "disabledBackground", "background", "onBackground", "black", "white"]);
+function staticChannel(value) {
+  if (!/^(#[\da-f]{3,8}$|rgba?\(|hsla?\()/i.test(value)) return void 0;
+  if (/^rgba?\(/i.test(value) && value.includes("%")) return void 0;
+  try {
+    const channel = colorChannel(/^hsl/i.test(value) ? hslToRgb(value) : value);
+    const components = channel.split(" ");
+    return components.length === 3 && components.every((part) => part !== "" && Number.isFinite(Number(part))) ? channel : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function channelFor(value) {
+  return staticChannel(value) ?? `from ${value} r g b`;
+}
+function reconcileChannels(merged, supplied) {
+  const result = { ...merged };
+  for (const [key, value] of Object.entries(supplied)) {
+    if (isRecord(value) && isRecord(result[key])) {
+      result[key] = reconcileChannels(result[key], value);
+    } else if (typeof value === "string" && !key.endsWith("Channel") && !owns(supplied, `${key}Channel`)) {
+      const channel = staticChannel(value);
+      if (channel !== void 0 || owns(merged, `${key}Channel`) || colourKeys.has(key)) {
+        result[`${key}Channel`] = channel ?? channelFor(value);
+      }
+    }
+  }
+  return result;
+}
+function reconcilePaletteOverrides(merged, supplied, { nativeColor = false, cssVarPrefix = "prism" } = {}) {
+  if (!supplied) return merged;
+  const result = reconcileChannels(merged, supplied);
+  for (const name of roles) {
+    const input = supplied[name];
+    if (!isRecord(input) || typeof input.main !== "string") continue;
+    const role = { ...result[name] };
+    const numeric = staticChannel(input.main) !== void 0;
+    for (const shade of shades) {
+      if (!owns(input, shade)) {
+        delete role[shade];
+        if (!owns(input, `${shade}Channel`)) delete role[`${shade}Channel`];
+      }
+    }
+    if (!nativeColor && !numeric && ["light", "dark", "contrastText"].some((shade) => typeof role[shade] !== "string" || !role[shade])) {
+      throw new Error(`Prism: palette.${name}.main cannot be resolved in JavaScript. Enable overrides.cssVariables.nativeColor or supply light, dark and contrastText explicitly.`);
+    }
+    const dark = result.mode === "dark";
+    const mix = (colour, amount) => `color-mix(in oklch, ${input.main}, ${colour} ${amount * 100}%)`;
+    role.lighter ??= numeric && !nativeColor ? dark ? darken(input.main, 0.75) : lighten(input.main, 0.9) : dark ? mix("#000", 0.75) : mix("#fff", 0.9);
+    role.darker ??= numeric && !nativeColor ? dark ? lighten(input.main, 0.85) : darken(input.main, 0.7) : dark ? mix("#fff", 0.85) : mix("#000", 0.7);
+    if (numeric && !nativeColor) {
+      role.contrastText ??= getContrastRatio(input.main, "#fff") >= getContrastRatio(input.main, "#000") ? "#fff" : "#000";
+    }
+    for (const shade of shades) {
+      if (owns(input, `${shade}Channel`)) continue;
+      if (typeof role[shade] === "string") {
+        role[`${shade}Channel`] = channelFor(role[shade]);
+      } else if (nativeColor) {
+        const prefix = cssVarPrefix ? `${cssVarPrefix}-` : "";
+        role[`${shade}Channel`] = `from var(--${prefix}palette-${name}-${shade}) r g b`;
+      }
+    }
+    result[name] = role;
+  }
+  return result;
+}
 
 // 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];
+  const palette = theme.palette.grey;
+  return vars?.[channelKey] ?? palette[channelKey] ?? channelFor(palette[shade]);
 }
 function paletteVar(theme, path) {
   const segments = path.split(".");
@@ -592,14 +417,8 @@ function paletteVar(theme, path) {
 }
 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];
+  const palette = theme.palette[color];
+  return vars?.mainChannel ?? palette.mainChannel ?? channelFor(palette.main);
 }
 function getDensityMultiplier(density) {
   switch (density) {
@@ -789,21 +608,19 @@ function createButtonOverrides(config) {
       // outlinedSize* class slots were removed in MUI v9 in favour
       // of the `variants` array on the component override. See
       // https://mui.com/material-ui/migration/upgrade-to-v9/.
-      // The icon slot wraps a single child (the icon SVG). `:first-child`
-      // is the modern, tag-agnostic way to target it — replaces
-      // `:first-of-type` which only matched if the wrapped element was
-      // the first sibling of its tag (fine for the common case, but
-      // brittle when a consumer wraps the icon in a tooltip or fragment
-      // that introduces a non-element node before the SVG).
+      // Each native slot contains the supplied icon root, which may be a
+      // custom wrapper. Ignore SSR style elements instead of relying on child
+      // position. The public slot class keeps this rule authoritative over
+      // MUI's size-specific icon selectors without affecting nested content.
       startIcon: {
         marginRight: 4,
-        "& > :first-child": {
+        [`&.${buttonClasses.startIcon} > :not(style)`]: {
           fontSize: 16
         }
       },
       endIcon: {
         marginLeft: 4,
-        "& > :first-child": {
+        [`&.${buttonClasses.endIcon} > :not(style)`]: {
           fontSize: 16
         }
       }
@@ -829,345 +646,11 @@ function createButtonGroupOverrides(config) {
     }
   };
 }
-
-// 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-child)` is the universal sibling-position selector
-    // that works regardless of element type. `:last-of-type` only
-    // matches the last sibling of the SAME tag, so a fragment-rendered
-    // <Divider /> next to <MenuItem /> can fool it (Divider becomes
-    // the last-of-type MenuItem too, so the previous MenuItem keeps
-    // its margin instead of dropping it). Switching to :last-child
-    // also satisfies MUI v9's lint-against-of-type-selectors guidance.
-    "&:not(:last-child)": {
-      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
-    })
+    style: ({ theme }) => semanticSurfaceStyles(theme, color)
   })),
   // Neutral soft variant
   {
@@ -1449,7 +932,8 @@ var outlinedInputStyles = {
     // 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 }
+    // MUI uses an aria-hidden zero-width spacer when the field has no label.
+    "& legend > span:not([aria-hidden])": { paddingInline: 3 }
   })
 };
 var outlinedInputVariants = {
@@ -1635,13 +1119,13 @@ function createFormHelperTextOverrides(_config) {
     }
   };
 }
-function CheckboxIcon(props) {
+function DefaultCheckboxIcon(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) {
+function DefaultCheckboxCheckedIcon(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) {
+function DefaultCheckboxIndeterminateIcon(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 = {
@@ -1852,6 +1336,9 @@ function createFormControlOverrides(_config) {
     }
   };
 }
+var CheckboxIcon = createPrismIcon("checkbox", DefaultCheckboxIcon);
+var CheckboxCheckedIcon = createPrismIcon("checkboxChecked", DefaultCheckboxCheckedIcon);
+var CheckboxIndeterminateIcon = createPrismIcon("checkboxMixed", DefaultCheckboxIndeterminateIcon);
 var tabsVariants = {
   root: [
     {
@@ -1961,8 +1448,8 @@ function createDialogOverrides(config) {
                   margin: 0,
                   width: "100%",
                   maxWidth: "none",
-                  maxHeight: "none",
-                  height: "100%",
+                  maxHeight: "100dvh",
+                  height: "100dvh",
                   borderRadius: 0
                 }
               }
@@ -1971,6 +1458,7 @@ function createDialogOverrides(config) {
               props: (props) => !props.fullScreen,
               style: {
                 borderRadius: borderRadius * 2,
+                [theme.breakpoints.down("sm")]: { borderRadius: 0 },
                 [theme.breakpoints.up("sm")]: {
                   margin: theme.spacing(2)
                 }
@@ -1986,14 +1474,18 @@ function createDialogOverrides(config) {
           padding: `${20 * dm}px ${24 * dm}px`,
           fontSize: theme.typography.pxToRem(18),
           fontWeight: 600,
-          lineHeight: 28 / 18
+          lineHeight: 28 / 18,
+          overflowWrap: "anywhere"
         })
       }
     },
     MuiDialogContent: {
       styleOverrides: {
         root: {
-          padding: `${16 * dm}px ${24 * dm}px`
+          padding: `${16 * dm}px ${24 * dm}px`,
+          minWidth: 0,
+          overflowWrap: "anywhere",
+          ".MuiDialogTitle-root + &": { paddingTop: 16 * dm }
         }
       }
     },
@@ -2001,7 +1493,9 @@ function createDialogOverrides(config) {
       styleOverrides: {
         root: {
           padding: `${16 * dm}px ${24 * dm}px`,
-          gap: 8
+          gap: 8,
+          flexWrap: "wrap",
+          "& > :not(style) ~ :not(style)": { marginLeft: 0 }
         }
       }
     }
@@ -2431,34 +1925,18 @@ function componentOverrides(config) {
       },
       styleOverrides: {
         root: ({ theme }) => ({
+          // Every disclosure owns its full outline and all four corners.
+          // Use MUI's native rounded state to override its edge-only radii,
+          // independent of siblings (including Emotion's SSR style tags).
+          // The square prop remains authoritative when rounded is absent.
           border: `1px solid ${paletteVar(theme, "divider")}`,
-          borderRadius,
+          borderRadius: 0,
+          [`&.${accordionClasses.rounded}`]: {
+            borderRadius
+          },
           "&::before": {
             display: "none"
           },
-          // Position selectors switched from `:first-of-type` /
-          // `:last-of-type` to `:first-child` / `:last-child` —
-          // accordions are intended to be direct siblings, so the
-          // child-position form gives the correct result without
-          // depending on element-tag homogeneity (an interspersed
-          // <Divider /> would break the of-type form silently by
-          // making each accordion the only "of-type" sibling).
-          "&:first-child": {
-            borderTopLeftRadius: borderRadius,
-            borderTopRightRadius: borderRadius
-          },
-          "&:last-child": {
-            borderBottomLeftRadius: borderRadius,
-            borderBottomRightRadius: borderRadius
-          },
-          "&:not(:last-child)": {
-            borderBottom: 0
-          },
-          [`&.${accordionClasses.expanded}`]: {
-            margin: 0,
-            "&:first-child": { marginTop: 0 },
-            "&:last-child": { marginBottom: 0 }
-          },
           [`&.${accordionClasses.disabled}`]: {
             backgroundColor: "transparent"
           }
@@ -2468,6 +1946,7 @@ function componentOverrides(config) {
     MuiAccordionSummary: {
       styleOverrides: {
         root: ({ theme }) => ({
+          ...theme.typography.body2,
           minHeight: 48 * dm,
           padding: `0 ${16 * dm}px`,
           fontWeight: 500,
@@ -2479,13 +1958,18 @@ function componentOverrides(config) {
           }
         }),
         content: {
+          alignItems: "center",
+          gap: 8 * dm,
+          minWidth: 0,
           margin: `${12 * dm}px 0`,
           [`&.${accordionSummaryClasses.expanded}`]: {
             margin: `${12 * dm}px 0`
           }
         },
         expandIconWrapper: ({ theme }) => ({
-          color: paletteVar(theme, "text.secondary")
+          color: paletteVar(theme, "text.secondary"),
+          flexShrink: 0,
+          marginInlineStart: 8 * dm
         })
       }
     },
@@ -2493,7 +1977,20 @@ function componentOverrides(config) {
       styleOverrides: {
         root: ({ theme }) => ({
           padding: `${8 * dm}px ${16 * dm}px ${16 * dm}px`,
-          borderTop: `1px solid ${paletteVar(theme, "divider")}`
+          borderTop: `1px solid ${paletteVar(theme, "divider")}`,
+          containerType: "inline-size",
+          containerName: "prism-pagination",
+          "@container prism-pagination (max-width: 420px)": {
+            "& .MuiTablePagination-toolbar": {
+              display: "grid",
+              gridTemplateColumns: "1fr auto",
+              gap: "0 8px",
+              padding: "4px 8px"
+            },
+            "& .MuiTablePagination-spacer": { display: "none" },
+            "& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": { margin: "4px 0" },
+            "& .MuiTablePagination-input, & .MuiTablePagination-actions": { margin: 0, justifySelf: "end" }
+          }
         })
       }
     },
@@ -2656,7 +2153,7 @@ function componentOverrides(config) {
         root: ({ theme }) => ({
           [`& .${tableCellClasses.head}`]: {
             fontWeight: 600,
-            backgroundColor: theme.vars?.palette.background.neutral || theme.palette.grey[50],
+            backgroundColor: theme.vars?.palette.background.neutral || theme.palette.background.neutral || paletteVar(theme, "background.paper"),
             color: paletteVar(theme, "text.secondary")
           }
         })
@@ -2702,7 +2199,20 @@ function componentOverrides(config) {
       },
       styleOverrides: {
         root: ({ theme }) => ({
-          borderTop: `1px solid ${paletteVar(theme, "divider")}`
+          borderTop: `1px solid ${paletteVar(theme, "divider")}`,
+          containerType: "inline-size",
+          containerName: "prism-pagination",
+          "@container prism-pagination (max-width: 420px)": {
+            "& .MuiTablePagination-toolbar": {
+              display: "grid",
+              gridTemplateColumns: "1fr auto",
+              gap: "0 8px",
+              padding: "4px 8px"
+            },
+            "& .MuiTablePagination-spacer": { display: "none" },
+            "& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": { margin: "4px 0" },
+            "& .MuiTablePagination-input, & .MuiTablePagination-actions": { margin: 0, justifySelf: "end" }
+          }
         }),
         toolbar: {
           minHeight: 44 * dm,
@@ -2740,15 +2250,13 @@ function componentOverrides(config) {
       styleOverrides: {
         root: ({ theme }) => ({
           borderRadius,
-          variants: ["success", "error", "warning", "info"].map(
-            (severity) => ({
-              props: { severity, variant: "standard" },
-              style: {
-                backgroundColor: `rgba(${getColorChannel(theme, severity)} / 0.08)`,
-                color: theme.vars?.palette[severity].dark || theme.palette[severity].dark
-              }
-            })
-          )
+          variants: ["success", "error", "warning", "info"].map((color) => ({
+            props: (props) => props.variant === "standard" && (props.color || props.severity) === color,
+            style: {
+              ...semanticSurfaceStyles(theme, color, 0.08),
+              "& .MuiAlert-icon": { color: "inherit" }
+            }
+          }))
         })
       }
     },
@@ -2906,7 +2414,13 @@ function componentOverrides(config) {
       styleOverrides: {
         root: {
           paddingTop: density === "compact" ? 4 : 8,
-          paddingBottom: density === "compact" ? 4 : 8
+          paddingBottom: density === "compact" ? 4 : 8,
+          // MenuList renders a MuiList root; it does not consume a separate
+          // MuiMenuList style override. Cover standalone and Select menus too.
+          '&[role="menu"], &[role="listbox"]': {
+            padding: 4,
+            "& > .MuiDivider-root": { margin: "8px 6px" }
+          }
         }
       }
     },
@@ -2962,17 +2476,19 @@ function componentOverrides(config) {
         paper: ({ theme }) => ({
           borderRadius,
           marginTop: 4,
+          scrollPaddingBlock: 6,
+          maxWidth: "calc(100vw - 32px)",
           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,
+          minWidth: 0,
+          whiteSpace: "normal",
+          overflowWrap: "anywhere",
           borderRadius: borderRadius - 2,
           margin: 2,
           padding: `${8 * dm}px ${12 * dm}px`,
@@ -2996,6 +2512,11 @@ function componentOverrides(config) {
     },
     MuiPopover: {
       styleOverrides: {
+        root: ({ ownerState }) => ({
+          // MUI keeps the modal root mounted during Grow's exit. Once closed,
+          // it must stop swallowing the next click on the surrounding UI.
+          pointerEvents: ownerState.open ? void 0 : "none"
+        }),
         paper: ({ theme }) => ({
           borderRadius,
           boxShadow: `0 0 2px 0 rgba(${getGreyChannel(theme)} / 0.24), -20px 20px 40px -4px rgba(${getGreyChannel(theme)} / 0.24)`
@@ -3021,8 +2542,9 @@ function componentOverrides(config) {
     },
     MuiBackdrop: {
       styleOverrides: {
-        root: ({ theme }) => ({
-          backgroundColor: `rgba(${getGreyChannel(theme, "900")} / 0.5)`
+        root: ({ theme, ownerState }) => ({
+          // Menus/popovers use an invisible click-away layer; only modals dim the page.
+          backgroundColor: ownerState.invisible ? "transparent" : `rgba(${getGreyChannel(theme, "900")} / 0.5)`
         })
       }
     },
@@ -3251,31 +2773,13 @@ function componentOverrides(config) {
         html: {
           scrollBehavior: "smooth"
         },
-        body: {
-          scrollbarWidth: "thin",
-          scrollbarColor: `rgba(${getGreyChannel(theme)} / 0.4) rgba(${getGreyChannel(theme)} / 0.08)`
-        },
+        "html, body, *": scrollbarStyles(theme),
         "*, *::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])': {
@@ -3785,6 +3289,89 @@ var arcticPreset = {
     main: "#1E88E5"
   }
 };
+function gridIcon(Icon) {
+  return forwardRef(function GridIcon({ color, ...props }, ref) {
+    const palette = color === "action" || color === "disabled" || color === "error" || color === "info" || color === "inherit" || color === "primary" || color === "secondary" || color === "success" || color === "warning";
+    return /* @__PURE__ */ jsx(Icon, { ...props, ref, color: palette ? color : "inherit", htmlColor: palette ? void 0 : color });
+  });
+}
+var grid = {
+  MoreIcon: gridIcon(MoreIcon),
+  ArrowUpIcon: gridIcon(ArrowUpIcon),
+  ArrowDownIcon: gridIcon(ArrowDownIcon),
+  FilterIcon: gridIcon(FilterIcon),
+  TableIcon: gridIcon(TableIcon),
+  DownloadIcon: gridIcon(DownloadIcon),
+  CloseIcon: gridIcon(CloseIcon),
+  SearchIcon: gridIcon(SearchIcon),
+  AddIcon: gridIcon(AddIcon),
+  RemoveIcon: gridIcon(RemoveIcon)
+};
+function prismIconDefaults() {
+  const icons = {
+    MuiSelect: { defaultProps: { IconComponent: ChevronDownIcon } },
+    MuiNativeSelect: { defaultProps: { IconComponent: ChevronDownIcon } },
+    MuiAutocomplete: {
+      defaultProps: { popupIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {}), clearIcon: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) }
+    },
+    MuiRadio: { defaultProps: { icon: /* @__PURE__ */ jsx(RadioIcon, {}), checkedIcon: /* @__PURE__ */ jsx(RadioCheckedIcon, {}) } },
+    MuiChip: { defaultProps: { deleteIcon: /* @__PURE__ */ jsx(CloseIcon, {}) } },
+    MuiAlert: {
+      defaultProps: {
+        iconMapping: {
+          success: /* @__PURE__ */ jsx(SuccessIcon, {}),
+          info: /* @__PURE__ */ jsx(InfoIcon, {}),
+          warning: /* @__PURE__ */ jsx(WarningIcon, {}),
+          error: /* @__PURE__ */ jsx(ErrorIcon, {})
+        },
+        slots: { closeIcon: CloseIcon }
+      }
+    },
+    MuiPaginationItem: {
+      defaultProps: {
+        slots: { previous: ChevronLeftIcon, next: ChevronRightIcon, first: FirstPageIcon, last: LastPageIcon }
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        slots: {
+          actions: {
+            firstButtonIcon: FirstPageIcon,
+            previousButtonIcon: ChevronLeftIcon,
+            nextButtonIcon: ChevronRightIcon,
+            lastButtonIcon: LastPageIcon
+          }
+        }
+      }
+    },
+    MuiTableSortLabel: { defaultProps: { IconComponent: ArrowDownIcon } },
+    MuiBreadcrumbs: { defaultProps: { separator: /* @__PURE__ */ jsx(ChevronRightIcon, { fontSize: "inherit" }) } },
+    MuiRating: {
+      defaultProps: { icon: /* @__PURE__ */ jsx(StarIcon, { fontSize: "inherit" }), emptyIcon: /* @__PURE__ */ jsx(StarEmptyIcon, { fontSize: "inherit" }) }
+    },
+    MuiTabs: {
+      defaultProps: { slots: { startScrollButtonIcon: ChevronLeftIcon, endScrollButtonIcon: ChevronRightIcon } }
+    },
+    MuiDataGrid: {
+      defaultProps: {
+        slots: {
+          columnMenuIcon: grid.MoreIcon,
+          columnSortedAscendingIcon: grid.ArrowUpIcon,
+          columnSortedDescendingIcon: grid.ArrowDownIcon,
+          columnFilteredIcon: grid.FilterIcon,
+          columnSelectorIcon: grid.TableIcon,
+          exportIcon: grid.DownloadIcon,
+          openFilterButtonIcon: grid.FilterIcon,
+          quickFilterIcon: grid.SearchIcon,
+          quickFilterClearIcon: grid.CloseIcon,
+          detailPanelExpandIcon: grid.AddIcon,
+          detailPanelCollapseIcon: grid.RemoveIcon
+        }
+      }
+    }
+  };
+  return icons;
+}
 
 // src/theme/presets/dracula.ts
 var draculaPurple = {
@@ -4424,7 +4011,13 @@ function deepMergeThemeOptions(base, overrides) {
   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") {
+    if (key === "styleOverrides" && baseVal && overrideVal && typeof baseVal === "object" && typeof overrideVal === "object") {
+      const slots = { ...baseVal };
+      for (const [slot, style] of Object.entries(overrideVal)) {
+        if (style !== void 0) slots[slot] = slots[slot] === void 0 ? style : [slots[slot], style];
+      }
+      result[key] = slots;
+    } else 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;
@@ -4517,7 +4110,13 @@ function createPrismTheme(options = {}) {
     // Component overrides with density support
     components: componentOverrides(componentsConfig)
   };
-  const finalOptions = overrides ? deepMergeThemeOptions(themeOptions, overrides) : themeOptions;
+  const themedIcons = deepMergeThemeOptions(themeOptions, { components: prismIconDefaults() });
+  const finalOptions = overrides ? deepMergeThemeOptions(themedIcons, overrides) : themedIcons;
+  const variableOptions = typeof finalOptions.cssVariables === "object" ? finalOptions.cssVariables : void 0;
+  finalOptions.palette = reconcilePaletteOverrides(finalOptions.palette, overrides?.palette, {
+    nativeColor: variableOptions?.nativeColor,
+    cssVarPrefix: variableOptions?.cssVarPrefix ?? cssVarPrefix
+  });
   let theme = createTheme(finalOptions, muiLocale);
   if (responsiveFonts) {
     theme = responsiveFontSizes(theme);
@@ -4573,6 +4172,6 @@ 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-ZTATTUH7.js.map
-//# sourceMappingURL=chunk-ZTATTUH7.js.map
+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, createPrismTheme, createShadows, createTypography, darkShadow, defaultDarkPalette, defaultLightPalette, draculaPreset, emberPreset, getPresetDisplayName, green, grey, lightBlue, luxuryColors, luxuryError, luxuryInfo, luxuryNeutral, luxuryPrimary, luxurySecondary, luxurySuccess, luxuryWarning, midnightPreset, minimalPreset, orange, purple, red, retroPreset, shadows, typography };
+//# sourceMappingURL=chunk-RSWVYIXK.js.map
+//# sourceMappingURL=chunk-RSWVYIXK.js.map