@omnitron-dev/prism 0.1.3 → 0.3.0

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

@@ -2,8 +2,6 @@ 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';
@@ -16,12 +14,15 @@ 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 SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
 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 { autocompleteClasses } from '@mui/material/Autocomplete';
+import '@mui/x-data-grid/themeAugmentation';
 import { createTheme, responsiveFontSizes } from '@mui/material/styles';
 import * as locales from '@mui/material/locale';
 
@@ -146,22 +147,9 @@ function generateColorScale(baseColor) {
   }
   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);
+  const contrastText = getContrastText(mainColor, "#FFFFFF", "#212121");
   if (mode === "dark") {
     return {
       lighter: scale[950],
@@ -214,7 +202,7 @@ function isLightColor(hex) {
   return getLuminance(hex) > 0.5;
 }
 function getContrastText(background, lightText = "#FFFFFF", darkText = "#000000") {
-  return isLightColor(background) ? darkText : lightText;
+  return getContrastRatio(background, lightText) >= getContrastRatio(background, darkText) ? lightText : darkText;
 }
 function lighten(hex, amount) {
   const hsl = hexToHsl(hex);
@@ -395,22 +383,9 @@ var baseColors = {
 };
 
 // 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 contrastText = getContrastText(mainColor, "#FFFFFF", "#212121");
   const color = mode === "dark" ? {
     lighter: scale[950],
     light: scale[700],
@@ -601,6 +576,20 @@ function getGreyChannel(theme, shade = "500") {
   };
   return vars?.[channelKey] ?? fallbacks[shade];
 }
+function paletteVar(theme, path) {
+  const segments = path.split(".");
+  const fromVars = theme.vars?.palette ?? void 0;
+  const fromFallback = theme.palette;
+  const walk = (obj) => segments.reduce(
+    (acc, key) => acc && typeof acc === "object" ? acc[key] : void 0,
+    obj
+  );
+  const fromVarsVal = walk(fromVars);
+  if (typeof fromVarsVal === "string") return fromVarsVal;
+  const fromFallbackVal = walk(fromFallback);
+  if (typeof fromFallbackVal === "string") return fromFallbackVal;
+  return "";
+}
 function getColorChannel(theme, color) {
   const vars = theme.vars?.palette[color];
   const fallbacks = {
@@ -771,7 +760,20 @@ function createButtonOverrides(config) {
           ...shapeVariants,
           ...outlinedNeutralVariants,
           ...sizeVariants,
-          ...disabledVariants
+          ...disabledVariants,
+          // MUI v9 replacement for the removed `outlinedSize*` slots.
+          {
+            props: { variant: "outlined", size: "large" },
+            style: { paddingTop: 9 * dm, paddingBottom: 9 * dm }
+          },
+          {
+            props: { variant: "outlined", size: "medium" },
+            style: { paddingTop: 7 * dm, paddingBottom: 7 * dm }
+          },
+          {
+            props: { variant: "outlined", size: "small" },
+            style: { paddingTop: 5 * dm, paddingBottom: 5 * dm }
+          }
         ]
       },
       sizeLarge: {
@@ -784,27 +786,24 @@ function createButtonOverrides(config) {
         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
-      },
+      // 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).
       startIcon: {
         marginRight: 4,
-        [`& > *:first-of-type`]: {
+        "& > :first-child": {
           fontSize: 16
         }
       },
       endIcon: {
         marginLeft: 4,
-        [`& > *:first-of-type`]: {
+        "& > :first-child": {
           fontSize: 16
         }
       }
@@ -991,7 +990,14 @@ function menuItemStyles(theme) {
     ...theme.typography.body2,
     padding: theme.spacing(0.75, 1),
     borderRadius: Number(theme.shape.borderRadius) * 0.75,
-    "&:not(:last-of-type)": {
+    // `: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": {
@@ -1268,17 +1274,21 @@ function createChipOverrides(config) {
         height: 32 * densityMultiplier
       },
       label: {
-        fontWeight: 500
-      },
-      labelSmall: {
-        fontSize: "0.75rem",
-        paddingLeft: 8,
-        paddingRight: 8
-      },
-      labelMedium: {
-        fontSize: "0.8125rem",
-        paddingLeft: 12,
-        paddingRight: 12
+        fontWeight: 500,
+        // MUI v9: size-scoped label rules moved from `labelSmall`/
+        // `labelMedium` slots to nested selectors. The class names
+        // themselves still ship (and styles still apply), only the
+        // top-level `styleOverrides.labelSmall` slot was removed.
+        "&.MuiChip-labelSmall": {
+          fontSize: "0.75rem",
+          paddingLeft: 8,
+          paddingRight: 8
+        },
+        "&.MuiChip-labelMedium": {
+          fontSize: "0.8125rem",
+          paddingLeft: 12,
+          paddingRight: 12
+        }
       },
       icon: {
         fontSize: 18,
@@ -1301,13 +1311,20 @@ var INPUT_TYPOGRAPHY = {
   lineHeight: 24
 };
 var INPUT_PADDING = {
+  base: {
+    small: { paddingTop: 0, paddingBottom: 4 },
+    medium: { paddingTop: 4, paddingBottom: 4 }
+  },
   outlined: {
     small: { paddingTop: 8, paddingBottom: 8 },
     medium: { paddingTop: 16, paddingBottom: 16 }
   },
   filled: {
     small: { paddingTop: 20 },
-    medium: { paddingTop: 24 }}
+    medium: { paddingTop: 24 },
+    smallHidden: { paddingTop: 8, paddingBottom: 8 },
+    mediumHidden: { paddingTop: 16, paddingBottom: 16 }
+  }
 };
 function getInputTypography(theme, keys) {
   const { fontSize, lineHeight } = INPUT_TYPOGRAPHY;
@@ -1330,81 +1347,222 @@ function getErrorChannel(theme) {
   const vars = theme.vars?.palette.error;
   return vars?.mainChannel ?? "208 34 65";
 }
+var multilineInputVariants = [
+  {
+    props: (props) => !!props.multiline,
+    style: { padding: 0 }
+  }
+];
+var inputBaseStyles = {
+  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
+    }
+  })
+};
+var inputBaseVariants = {
+  // Root-side multiline padding (single-line keeps the inner one).
+  // Mirrors the outlined/filled root variants so a bare InputBase
+  // (no decorator variant) still renders consistent multiline
+  // padding even when consumers swap variants.
+  root: [
+    {
+      props: (props) => !!props.multiline,
+      style: { ...INPUT_PADDING.base.medium }
+    },
+    {
+      props: (props) => !!props.multiline && props.size === "small",
+      style: { ...INPUT_PADDING.base.small }
+    }
+  ],
+  input: [
+    {
+      props: {},
+      style: { ...INPUT_PADDING.base.medium }
+    },
+    {
+      props: (props) => props.size === "small",
+      style: { ...INPUT_PADDING.base.small }
+    }
+  ]
+};
 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)" }
-        }
+        ...inputBaseStyles.root(theme),
+        variants: inputBaseVariants.root
       }),
       input: ({ theme }) => ({
-        ...getInputTypography(theme, ["fontSize", "height", "lineHeight"]),
-        "&:focus": { borderRadius: "inherit" },
-        "&::placeholder": {
-          color: theme.vars?.palette.text.disabled || theme.palette.text.disabled,
-          opacity: 1
-        }
+        ...inputBaseStyles.input(theme),
+        variants: [...inputBaseVariants.input, ...multilineInputVariants]
       })
     }
   };
 }
+var inputStyles = {
+  root: (theme) => ({
+    "&::before": {
+      borderBottomColor: varAlpha(getGreyChannel(theme), 0.2)
+    },
+    "&::after": {
+      borderBottomColor: theme.vars?.palette.text.primary || theme.palette.text.primary
+    }
+  })
+};
 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
-        }
-      })
+      root: ({ theme }) => inputStyles.root(theme)
     }
   };
 }
+var outlinedInputStyles = {
+  root: (theme, borderRadius) => ({
+    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
+      }
+    }
+  }),
+  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 }
+  })
+};
+var outlinedInputVariants = {
+  root: [
+    {
+      props: (props) => !!props.multiline,
+      style: { ...INPUT_PADDING.outlined.medium }
+    },
+    {
+      props: (props) => !!props.multiline && props.size === "small",
+      style: { ...INPUT_PADDING.outlined.small }
+    }
+  ],
+  input: [
+    {
+      props: {},
+      style: { ...INPUT_PADDING.outlined.medium }
+    },
+    {
+      props: (props) => props.size === "small",
+      style: { ...INPUT_PADDING.outlined.small }
+    }
+  ]
+};
 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
-          }
-        }
+        ...outlinedInputStyles.root(theme, borderRadius),
+        variants: outlinedInputVariants.root
       }),
-      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 }
-      })
+      // MUI v9 narrowed `styleOverrides[slot]` to `CSSObject` and
+      // hoisted the `variants` API to the component-level
+      // `variants` field. We still emit the variants on the slot
+      // because (a) MUI's styled engine honours them there at
+      // runtime, (b) per-slot variant styles wouldn't translate
+      // cleanly to component-level (each entry would need a
+      // descendant selector targeting the slot class).
+      //
+      // The cast escapes the narrowed type without lying about
+      // runtime shape — the engine reads `variants` from the
+      // returned object regardless of where TypeScript thinks it
+      // belongs.
+      input: () => ({
+        variants: [...outlinedInputVariants.input, ...multilineInputVariants]
+      }),
+      notchedOutline: ({ theme }) => outlinedInputStyles.notchedOutline(theme)
     }
   };
 }
+var filledInputStyles = {
+  root: (theme, borderRadius) => {
+    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 }
+    };
+  }
+};
+var filledInputVariants = {
+  // FilledInput has an extra dimension: `hiddenLabel`. When the
+  // label is hidden, the visible inset shrinks because there's no
+  // label to clear, so a separate padding set applies.
+  root: [
+    {
+      props: (props) => !!props.multiline,
+      style: { ...INPUT_PADDING.filled.medium }
+    },
+    {
+      props: (props) => !!props.multiline && props.size === "small",
+      style: { ...INPUT_PADDING.filled.small }
+    },
+    {
+      props: (props) => !!props.multiline && !!props.hiddenLabel,
+      style: { ...INPUT_PADDING.filled.mediumHidden }
+    },
+    {
+      props: (props) => !!props.multiline && !!props.hiddenLabel && props.size === "small",
+      style: { ...INPUT_PADDING.filled.smallHidden }
+    }
+  ],
+  input: [
+    {
+      props: {},
+      style: { ...INPUT_PADDING.filled.medium }
+    },
+    {
+      props: (props) => props.size === "small",
+      style: { ...INPUT_PADDING.filled.small }
+    },
+    {
+      props: (props) => !!props.hiddenLabel,
+      style: { ...INPUT_PADDING.filled.mediumHidden }
+    },
+    {
+      props: (props) => !!props.hiddenLabel && props.size === "small",
+      style: { ...INPUT_PADDING.filled.smallHidden }
+    }
+  ]
+};
 function createFilledInputOverrides(config) {
   const { borderRadius } = config;
   return {
@@ -1412,35 +1570,14 @@ function createFilledInputOverrides(config) {
       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
-        }
-      }
+      root: ({ theme }) => ({
+        ...filledInputStyles.root(theme, borderRadius),
+        variants: filledInputVariants.root
+      }),
+      // See the OutlinedInput counterpart above for the rationale.
+      input: () => ({
+        variants: [...filledInputVariants.input, ...multilineInputVariants]
+      })
     }
   };
 }
@@ -1801,129 +1938,81 @@ function createTabOverrides(config) {
   };
 }
 
-// src/theme/components/index.ts
-function componentOverrides(config) {
+// src/theme/components/Dialog.ts
+function createDialogOverrides(config) {
   const { density, borderRadius } = config;
   const dm = getDensityMultiplier(density);
   return {
-    // =========================================================================
-    // BUTTONS (Modular)
-    // =========================================================================
-    MuiButton: createButtonOverrides(config),
-    MuiButtonBase: createButtonBaseOverrides(),
-    MuiButtonGroup: createButtonGroupOverrides(config),
-    // =========================================================================
-    // ICON BUTTON
-    // =========================================================================
-    MuiIconButton: {
+    MuiDialog: {
       styleOverrides: {
-        root: ({ theme }) => ({
-          borderRadius,
-          "&:hover": {
-            backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
-          }
+        paper: ({ theme }) => ({
+          boxShadow: `0 24px 48px -12px rgba(${getGreyChannel(theme, "900")} / 0.24)`,
+          variants: [
+            // Mobile-first: any dialog (non-fullScreen included) goes
+            // edge-to-edge on < sm. MUI's `maxWidth`/`fullWidth` props
+            // attach their own paper-sizing rules at the same
+            // specificity tier — encoding the rule as a `variants`
+            // entry lets MUI's styled engine compose it without the
+            // !important pile that the old descendant override used.
+            {
+              props: () => true,
+              style: {
+                [theme.breakpoints.down("sm")]: {
+                  margin: 0,
+                  width: "100%",
+                  maxWidth: "none",
+                  maxHeight: "none",
+                  height: "100%",
+                  borderRadius: 0
+                }
+              }
+            },
+            {
+              props: (props) => !props.fullScreen,
+              style: {
+                borderRadius: borderRadius * 2,
+                [theme.breakpoints.up("sm")]: {
+                  margin: theme.spacing(2)
+                }
+              }
+            }
+          ]
         })
       }
     },
-    MuiInputAdornment: {
-      styleOverrides: {
-        root: {
-          [`& .${iconButtonClasses.root}:hover`]: {
-            backgroundColor: "transparent"
-          }
-        }
-      }
-    },
-    // =========================================================================
-    // FAB
-    // =========================================================================
-    MuiFab: {
-      defaultProps: {
-        color: "primary"
-      },
+    MuiDialogTitle: {
       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)`
-          }
+          padding: `${20 * dm}px ${24 * dm}px`,
+          fontSize: theme.typography.pxToRem(18),
+          fontWeight: 600,
+          lineHeight: 28 / 18
         })
       }
     },
-    // =========================================================================
-    // 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: {
+    MuiDialogContent: {
       styleOverrides: {
-        icon: {
-          right: 10,
-          width: 18,
-          height: 18,
-          top: "calc(50% - 9px)"
+        root: {
+          padding: `${16 * dm}px ${24 * dm}px`
         }
       }
     },
-    MuiAutocomplete: {
+    MuiDialogActions: {
       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
-          }
+        root: {
+          padding: `${16 * dm}px ${24 * dm}px`,
+          gap: 8
         }
       }
-    },
-    // =========================================================================
-    // CARDS
-    // =========================================================================
+    }
+  };
+}
+
+// src/theme/components/Card.ts
+function createCardOverrides(config) {
+  const { density, borderRadius } = config;
+  const dm = getDensityMultiplier(density);
+  return {
     MuiCard: {
       defaultProps: {
         elevation: 0
@@ -1934,7 +2023,7 @@ function componentOverrides(config) {
           zIndex: 0,
           // Safari stacking context fix
           borderRadius: borderRadius * 1.5,
-          border: `1px solid ${theme.vars?.palette.divider || theme.palette.divider}`,
+          border: `1px solid ${paletteVar(theme, "divider")}`,
           backgroundImage: "none",
           boxShadow: `0 0 2px 0 rgba(${getGreyChannel(theme)} / 0.2), 0 12px 24px -4px rgba(${getGreyChannel(theme)} / 0.12)`
         })
@@ -1942,8 +2031,10 @@ function componentOverrides(config) {
     },
     MuiCardHeader: {
       defaultProps: {
-        titleTypographyProps: { variant: "h6" },
-        subheaderTypographyProps: { variant: "body2" }
+        slotProps: {
+          title: { variant: "h6" },
+          subheader: { variant: "body2" }
+        }
       },
       styleOverrides: {
         root: {
@@ -1957,7 +2048,7 @@ function componentOverrides(config) {
         subheader: ({ theme }) => ({
           fontSize: theme.typography.pxToRem(14),
           lineHeight: 22 / 14,
-          color: theme.vars?.palette.text.secondary || theme.palette.text.secondary
+          color: paletteVar(theme, "text.secondary")
         })
       }
     },
@@ -1978,6 +2069,287 @@ function componentOverrides(config) {
           gap: 8
         }
       }
+    }
+  };
+}
+function createAutocompleteOverrides(config) {
+  const { borderRadius } = config;
+  return {
+    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: paletteVar(theme, "action.hover")
+        },
+        '&[aria-selected="true"]': {
+          backgroundColor: paletteVar(theme, "action.selected"),
+          fontWeight: 500,
+          [`&.${autocompleteClasses.focused}`]: {
+            backgroundColor: paletteVar(theme, "action.hover")
+          }
+        }
+      }),
+      popupIndicator: {
+        [`& .${svgIconClasses.root}`]: {
+          fontSize: 20
+        }
+      },
+      clearIndicator: {
+        [`& .${svgIconClasses.root}`]: {
+          fontSize: 18
+        }
+      }
+    }
+  };
+}
+function createDataGridOverrides(config) {
+  const { borderRadius } = config;
+  return {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        border: "none",
+        borderRadius,
+        // background.neutral falls back to grey[50] (different path
+        // on either side) — kept as a manual chain rather than
+        // paletteVar() so the fallback is explicit.
+        "--DataGrid-containerBackground": theme.vars?.palette.background.neutral || theme.palette.grey[50],
+        "--DataGrid-pinnedBackground": paletteVar(theme, "background.paper"),
+        "& .MuiDataGrid-columnHeaders": {
+          borderBottom: `1px solid ${paletteVar(theme, "divider")}`
+        },
+        "& .MuiDataGrid-columnHeader": {
+          fontWeight: 600,
+          fontSize: theme.typography.pxToRem(14),
+          color: paletteVar(theme, "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: paletteVar(theme, "action.hover")
+          },
+          "&.Mui-selected": {
+            backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.08)`,
+            "&:hover": {
+              backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.12)`
+            }
+          }
+        },
+        "& .MuiDataGrid-footerContainer": {
+          borderTop: `1px solid ${paletteVar(theme, "divider")}`
+        },
+        "& .MuiDataGrid-selectedRowCount": {
+          whiteSpace: "nowrap"
+        },
+        "& .MuiDataGrid-toolbarContainer": {
+          padding: theme.spacing(1.5, 1.5, 0.5),
+          gap: theme.spacing(1)
+        },
+        "& .MuiDataGrid-columnSeparator": {
+          color: paletteVar(theme, "divider")
+        }
+      })
+    }
+  };
+}
+
+// src/theme/components/DatePicker.ts
+function createDatePickerOverrides(config) {
+  const { density, borderRadius } = config;
+  return {
+    MuiDatePicker: {
+      defaultProps: {
+        slotProps: {
+          openPickerButton: {
+            size: density === "compact" ? "small" : "medium"
+          }
+        }
+      }
+    },
+    MuiPickersLayout: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          "& .MuiPickersLayout-actionBar": {
+            padding: theme.spacing(1, 2)
+          }
+        })
+      }
+    },
+    MuiPickersDay: {
+      styleOverrides: {
+        root: () => ({
+          borderRadius: borderRadius - 2,
+          fontWeight: 400,
+          "&.Mui-selected": {
+            fontWeight: 600
+          }
+        }),
+        today: ({ theme }) => ({
+          borderColor: paletteVar(theme, "primary.main"),
+          "&:not(.Mui-selected)": {
+            backgroundColor: "transparent"
+          }
+        })
+      }
+    },
+    MuiPickersYear: {
+      styleOverrides: {
+        yearButton: () => ({
+          borderRadius,
+          "&.Mui-selected": {
+            fontWeight: 600
+          }
+        })
+      }
+    },
+    MuiPickersMonth: {
+      styleOverrides: {
+        monthButton: () => ({
+          borderRadius,
+          "&.Mui-selected": {
+            fontWeight: 600
+          }
+        })
+      }
+    }
+  };
+}
+
+// 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: paletteVar(theme, "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: createAutocompleteOverrides(config),
+    // =========================================================================
+    // CARDS — modularized in ./Card.ts
+    // =========================================================================
+    ...createCardOverrides(config),
+    // =========================================================================
+    // LAYOUT
+    // =========================================================================
+    /**
+     * `Stack` spaces its children with CSS `gap`, never with margins.
+     *
+     * MUI's own default (`useFlexGap: false`) gives every child but the first
+     * a margin on the spacing side, and resets every child's own margin to 0.
+     * Both halves of that were measured in this codebase on 2026-09-22:
+     *
+     *   - when a row wraps, the first item of every wrapped line keeps its
+     *     margin and the first item of the first line does not, so the first
+     *     line sits one gap to the left of the rest. The release console's
+     *     gate strip showed it; the same shape — a wrapping `Stack` with
+     *     `spacing` — was in 146 places across the console, prism and the
+     *     portal;
+     *   - a child's own margin is silently discarded. `ml: 'auto'` does not
+     *     push, `mt: -1.5` does not pull a subtitle up, `FormControlLabel`
+     *     loses the -11px that aligns its control with the text around it —
+     *     which is why `ml: 'auto !important'` appears in both apps, and why
+     *     eight `ml: 'auto'` in the portal did nothing at all.
+     *
+     * `gap` has neither problem, every browser the apps support implements it,
+     * and MUI recommends turning it on here, globally. A child's margin now
+     * ADDS to the gap, as margins do everywhere else in CSS.
+     */
+    MuiStack: {
+      defaultProps: {
+        useFlexGap: true
+      }
     },
     // =========================================================================
     // PAPER & SURFACES
@@ -2014,60 +2386,9 @@ function componentOverrides(config) {
       }
     },
     // =========================================================================
-    // DIALOGS
+    // DIALOGS — modularized in ./Dialog.ts
     // =========================================================================
-    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
-        }
-      }
-    },
+    ...createDialogOverrides(config),
     // =========================================================================
     // NAVIGATION
     // =========================================================================
@@ -2085,7 +2406,7 @@ function componentOverrides(config) {
       styleOverrides: {
         root: ({ theme }) => ({
           backgroundImage: "none",
-          borderBottom: `1px solid ${theme.vars?.palette.divider || theme.palette.divider}`
+          borderBottom: `1px solid ${paletteVar(theme, "divider")}`
         })
       }
     },
@@ -2110,26 +2431,33 @@ function componentOverrides(config) {
       },
       styleOverrides: {
         root: ({ theme }) => ({
-          border: `1px solid ${theme.vars?.palette.divider || theme.palette.divider}`,
+          border: `1px solid ${paletteVar(theme, "divider")}`,
           borderRadius,
           "&::before": {
             display: "none"
           },
-          "&:first-of-type": {
+          // 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-of-type": {
+          "&:last-child": {
             borderBottomLeftRadius: borderRadius,
             borderBottomRightRadius: borderRadius
           },
-          "&:not(:last-of-type)": {
+          "&:not(:last-child)": {
             borderBottom: 0
           },
           [`&.${accordionClasses.expanded}`]: {
             margin: 0,
-            "&:first-of-type": { marginTop: 0 },
-            "&:last-of-type": { marginBottom: 0 }
+            "&:first-child": { marginTop: 0 },
+            "&:last-child": { marginBottom: 0 }
           },
           [`&.${accordionClasses.disabled}`]: {
             backgroundColor: "transparent"
@@ -2157,7 +2485,7 @@ function componentOverrides(config) {
           }
         },
         expandIconWrapper: ({ theme }) => ({
-          color: theme.vars?.palette.text.secondary || theme.palette.text.secondary
+          color: paletteVar(theme, "text.secondary")
         })
       }
     },
@@ -2165,7 +2493,7 @@ function componentOverrides(config) {
       styleOverrides: {
         root: ({ theme }) => ({
           padding: `${8 * dm}px ${16 * dm}px ${16 * dm}px`,
-          borderTop: `1px solid ${theme.vars?.palette.divider || theme.palette.divider}`
+          borderTop: `1px solid ${paletteVar(theme, "divider")}`
         })
       }
     },
@@ -2186,11 +2514,11 @@ function componentOverrides(config) {
           fontWeight: 500,
           [`&.${stepLabelClasses.active}`]: {
             fontWeight: 600,
-            color: theme.vars?.palette.text.primary || theme.palette.text.primary
+            color: paletteVar(theme, "text.primary")
           },
           [`&.${stepLabelClasses.completed}`]: {
             fontWeight: 500,
-            color: theme.vars?.palette.text.primary || theme.palette.text.primary
+            color: paletteVar(theme, "text.primary")
           }
         }),
         iconContainer: {
@@ -2201,7 +2529,7 @@ function componentOverrides(config) {
     MuiStepConnector: {
       styleOverrides: {
         line: ({ theme }) => ({
-          borderColor: theme.vars?.palette.divider || theme.palette.divider,
+          borderColor: paletteVar(theme, "divider"),
           borderTopWidth: 2
         })
       }
@@ -2209,12 +2537,12 @@ function componentOverrides(config) {
     MuiStepIcon: {
       styleOverrides: {
         root: ({ theme }) => ({
-          color: theme.vars?.palette.grey?.[300] || theme.palette.grey[300],
+          color: paletteVar(theme, "grey.300"),
           [`&.${stepIconClasses.active}`]: {
-            color: theme.vars?.palette.primary.main || theme.palette.primary.main
+            color: paletteVar(theme, "primary.main")
           },
           [`&.${stepIconClasses.completed}`]: {
-            color: theme.vars?.palette.primary.main || theme.palette.primary.main
+            color: paletteVar(theme, "primary.main")
           }
         }),
         text: {
@@ -2226,7 +2554,7 @@ function componentOverrides(config) {
     MuiStepContent: {
       styleOverrides: {
         root: ({ theme }) => ({
-          borderLeft: `2px solid ${theme.vars?.palette.divider || theme.palette.divider}`,
+          borderLeft: `2px solid ${paletteVar(theme, "divider")}`,
           marginLeft: 11,
           paddingLeft: 20,
           paddingRight: 8
@@ -2252,25 +2580,25 @@ function componentOverrides(config) {
           }
         }),
         outlined: ({ theme }) => ({
-          borderColor: theme.vars?.palette.divider || theme.palette.divider,
+          borderColor: paletteVar(theme, "divider"),
           [`&.${paginationItemClasses.selected}`]: {
             backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.08)`,
-            borderColor: theme.vars?.palette.primary.main || theme.palette.primary.main
+            borderColor: paletteVar(theme, "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,
+            backgroundColor: paletteVar(theme, "primary.main"),
+            color: paletteVar(theme, "primary.contrastText"),
             "&:hover": {
-              backgroundColor: theme.vars?.palette.primary.dark || theme.palette.primary.dark
+              backgroundColor: paletteVar(theme, "primary.dark")
             }
           }
         }),
         previousNext: ({ theme }) => ({
           borderRadius: borderRadius - 2,
           "&:hover": {
-            backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
+            backgroundColor: paletteVar(theme, "action.hover")
           }
         }),
         firstLast: ({ theme }) => ({
@@ -2306,10 +2634,10 @@ function componentOverrides(config) {
           borderRadius: borderRadius - 2,
           fontSize: theme.typography.pxToRem(12),
           padding: "6px 12px",
-          backgroundColor: theme.vars?.palette.grey?.[800] || theme.palette.grey[800]
+          backgroundColor: paletteVar(theme, "grey.800")
         }),
         arrow: ({ theme }) => ({
-          color: theme.vars?.palette.grey?.[800] || theme.palette.grey[800]
+          color: paletteVar(theme, "grey.800")
         })
       }
     },
@@ -2329,7 +2657,7 @@ function componentOverrides(config) {
           [`& .${tableCellClasses.head}`]: {
             fontWeight: 600,
             backgroundColor: theme.vars?.palette.background.neutral || theme.palette.grey[50],
-            color: theme.vars?.palette.text.secondary || theme.palette.text.secondary
+            color: paletteVar(theme, "text.secondary")
           }
         })
       }
@@ -2362,13 +2690,19 @@ function componentOverrides(config) {
     },
     MuiTablePagination: {
       defaultProps: {
-        backIconButtonProps: { size: "small" },
-        nextIconButtonProps: { size: "small" },
-        slotProps: { select: { name: "table-pagination-select" } }
+        // MUI v9 removed `backIconButtonProps`/`nextIconButtonProps` —
+        // both replaced by slotProps.
+        slotProps: {
+          select: { name: "table-pagination-select" },
+          actions: {
+            previousButton: { size: "small" },
+            nextButton: { size: "small" }
+          }
+        }
       },
       styleOverrides: {
         root: ({ theme }) => ({
-          borderTop: `1px solid ${theme.vars?.palette.divider || theme.palette.divider}`
+          borderTop: `1px solid ${paletteVar(theme, "divider")}`
         }),
         toolbar: {
           minHeight: 44 * dm,
@@ -2400,25 +2734,36 @@ function componentOverrides(config) {
     // FEEDBACK
     // =========================================================================
     MuiAlert: {
+      // MUI v9: `standardSuccess`/`standardError`/`standardWarning`/
+      // `standardInfo` slots were removed in favour of the variants
+      // array (props-matched style rules).
       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
+        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
+              }
+            })
+          )
+        })
+      }
+    },
+    MuiAlertTitle: {
+      // The title slot in Alert was unstyled — defaulted to MUI's
+      // generic Typography preset and stuck out vs the Alert body
+      // text, especially at compact density where 14/16 became
+      // 13/14 around it. Pin to a slightly larger weight with the
+      // alert's own colour inheritance.
+      styleOverrides: {
+        root: ({ theme }) => ({
+          fontWeight: 600,
+          fontSize: theme.typography.pxToRem(14),
+          marginBottom: theme.spacing(0.5),
+          lineHeight: 1.5
         })
       }
     },
@@ -2439,6 +2784,14 @@ function componentOverrides(config) {
         }
       }
     },
+    MuiCircularProgress: {
+      // Density-aware default size — the bare MUI default is 40px,
+      // which dwarfs adornments / inline loaders at compact density.
+      // Consumers can still override per-instance.
+      defaultProps: {
+        size: density === "compact" ? 20 : density === "comfortable" ? 32 : 24
+      }
+    },
     // =========================================================================
     // SLIDER
     // =========================================================================
@@ -2449,12 +2802,12 @@ function componentOverrides(config) {
       styleOverrides: {
         root: ({ theme }) => ({
           "&.Mui-disabled": {
-            color: theme.vars?.palette.action.disabled || theme.palette.action.disabled
+            color: paletteVar(theme, "action.disabled")
           }
         }),
         rail: ({ theme }) => ({
           opacity: 0.32,
-          backgroundColor: theme.vars?.palette.grey?.[500] || theme.palette.grey[500]
+          backgroundColor: paletteVar(theme, "grey.500")
         }),
         track: {
           border: "none"
@@ -2462,7 +2815,7 @@ function componentOverrides(config) {
         thumb: ({ theme }) => ({
           width: density === "compact" ? 16 : 20,
           height: density === "compact" ? 16 : 20,
-          backgroundColor: theme.vars?.palette.common.white || theme.palette.common.white,
+          backgroundColor: paletteVar(theme, "common.white"),
           border: "2px solid currentColor",
           boxShadow: `0 1px 3px 0 rgba(${getGreyChannel(theme, "900")} / 0.2)`,
           "&::before": {
@@ -2477,7 +2830,7 @@ function componentOverrides(config) {
         }),
         valueLabel: ({ theme }) => ({
           borderRadius: borderRadius - 2,
-          backgroundColor: theme.vars?.palette.grey?.[800] || theme.palette.grey[800],
+          backgroundColor: paletteVar(theme, "grey.800"),
           "&::before": {
             display: "none"
           }
@@ -2486,10 +2839,10 @@ function componentOverrides(config) {
           width: 4,
           height: 4,
           borderRadius: "50%",
-          backgroundColor: theme.vars?.palette.grey?.[400] || theme.palette.grey[400]
+          backgroundColor: paletteVar(theme, "grey.400")
         }),
         markActive: ({ theme }) => ({
-          backgroundColor: theme.vars?.palette.common.white || theme.palette.common.white
+          backgroundColor: paletteVar(theme, "common.white")
         })
       }
     },
@@ -2512,13 +2865,13 @@ function componentOverrides(config) {
           fontSize: "inherit"
         },
         iconEmpty: ({ theme }) => ({
-          color: theme.vars?.palette.grey?.[300] || theme.palette.grey[300]
+          color: paletteVar(theme, "grey.300")
         }),
         iconFilled: ({ theme }) => ({
-          color: theme.vars?.palette.warning.main || theme.palette.warning.main
+          color: paletteVar(theme, "warning.main")
         }),
         iconHover: ({ theme }) => ({
-          color: theme.vars?.palette.warning.dark || theme.palette.warning.dark
+          color: paletteVar(theme, "warning.dark")
         }),
         sizeSmall: {
           fontSize: "1.125rem"
@@ -2543,6 +2896,20 @@ function componentOverrides(config) {
     // =========================================================================
     // LISTS
     // =========================================================================
+    MuiList: {
+      // Default MUI list padding is 8/0/8/0 — fine for spacious lists
+      // but it stacks awkwardly with our ListItemButton's `margin: 2`
+      // (the first/last buttons end up indented away from the
+      // container edge). Density-aware top/bottom keeps the seam tight
+      // while leaving the side at 0 so the row hover bleed reaches
+      // the container border.
+      styleOverrides: {
+        root: {
+          paddingTop: density === "compact" ? 4 : 8,
+          paddingBottom: density === "compact" ? 4 : 8
+        }
+      }
+    },
     MuiListItemButton: {
       styleOverrides: {
         root: ({ theme }) => ({
@@ -2553,7 +2920,7 @@ function componentOverrides(config) {
             fontWeight: 500
           },
           "&:hover": {
-            backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
+            backgroundColor: paletteVar(theme, "action.hover")
           }
         })
       }
@@ -2565,6 +2932,28 @@ function componentOverrides(config) {
         }
       }
     },
+    MuiListItemText: {
+      // Multiline rows (primary + secondary) inherited MUI defaults
+      // that left an awkward 6px gap between the two lines at any
+      // density. Tighten the inter-line gap and reduce horizontal
+      // padding so dense rows actually FEEL dense.
+      styleOverrides: {
+        root: {
+          marginTop: 0,
+          marginBottom: 0
+        },
+        primary: ({ theme }) => ({
+          fontSize: theme.typography.pxToRem(density === "compact" ? 13 : 14),
+          fontWeight: 500,
+          lineHeight: 1.5
+        }),
+        secondary: ({ theme }) => ({
+          fontSize: theme.typography.pxToRem(density === "compact" ? 12 : 13),
+          lineHeight: 1.5,
+          color: paletteVar(theme, "text.secondary")
+        })
+      }
+    },
     // =========================================================================
     // MENUS (Refined - with proper menu item styles)
     // =========================================================================
@@ -2587,14 +2976,19 @@ function componentOverrides(config) {
           borderRadius: borderRadius - 2,
           margin: 2,
           padding: `${8 * dm}px ${12 * dm}px`,
-          "&:not(:last-of-type)": {
+          // `:not(:last-child)` — element-tag-agnostic position
+          // selector. The `:last-of-type` form was wrong when a
+          // <Divider /> ended the list (the previous MenuItem
+          // became the last-of-type MenuItem and kept its
+          // margin-bottom, creating an inconsistent gap).
+          "&:not(:last-child)": {
             marginBottom: 4
           },
           "&.Mui-selected": {
             fontWeight: 500,
-            backgroundColor: theme.vars?.palette.action.selected || theme.palette.action.selected,
+            backgroundColor: paletteVar(theme, "action.selected"),
             "&:hover": {
-              backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
+              backgroundColor: paletteVar(theme, "action.hover")
             }
           }
         })
@@ -2641,7 +3035,7 @@ function componentOverrides(config) {
       },
       styleOverrides: {
         root: ({ theme }) => ({
-          color: theme.vars?.palette.primary.main || theme.palette.primary.main,
+          color: paletteVar(theme, "primary.main"),
           textDecorationColor: "transparent",
           transition: "color 150ms, text-decoration-color 150ms",
           "&:hover": {
@@ -2659,17 +3053,28 @@ function componentOverrides(config) {
           borderRadius,
           fontWeight: 500,
           textTransform: "none",
-          border: `1px solid ${theme.vars?.palette.divider || theme.palette.divider}`,
+          border: `1px solid ${paletteVar(theme, "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,
+            // `currentColor` makes the border track the foreground
+            // colour set on the selected state — by default that
+            // foreground is primary (set on the same rule below),
+            // but consumers that override `color` via the MUI
+            // `color` prop or an inline `sx` (e.g. /admin/messaging
+            // settings sets per-button OPT_COLOR for success /
+            // warning / error / info modes) get a border that
+            // matches without needing to also override the border
+            // shorthand. Defeats the prior "half-and-half" bug
+            // where prism forced primary on left+top while the
+            // consumer's sx painted right+bottom in OPT_COLOR.
+            borderColor: "currentColor",
+            color: paletteVar(theme, "primary.main"),
             "&:hover": {
               backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.16)`
             }
           },
           [`&.${toggleButtonClasses.disabled}`]: {
-            borderColor: theme.vars?.palette.action.disabledBackground || theme.palette.action.disabledBackground
+            borderColor: paletteVar(theme, "action.disabledBackground")
           }
         }),
         sizeSmall: {
@@ -2685,21 +3090,71 @@ function componentOverrides(config) {
         }
       }
     },
+    // ToggleButtonGroup is a single connected segmented control,
+    // not a row of independent buttons. The canonical MUI v9
+    // implementation tags non-edge children with the
+    // `firstButton / middleButton / lastButton` classes (replacing
+    // the deprecated `:not(:first-of-type)` sibling pattern from
+    // MUI v5) and uses an overlap-and-collapse trick:
+    //
+    //   horizontal: margin-left: -1; border-left: 1px solid transparent
+    //               border-top/bottom-left-radius: 0
+    //   vertical:   margin-top:  -1; border-top:  1px solid transparent
+    //               border-top-left/right-radius:  0
+    //
+    // So the visible seam between segments is the *previous*
+    // button's right (or bottom) border, painted through a
+    // transparent slot on the next button.
+    //
+    // The bug the user hit: the selected button's left edge stayed
+    // transparent, so the indigo outline looked broken on its
+    // joining side. The fix is a single rule — lift the selected
+    // segment above its neighbours with z-index, and restate the
+    // seam-edge as primary so it overpaints the divider that the
+    // previous sibling owns. We deliberately do NOT force `gap` or
+    // a per-button left border (the historical prism override),
+    // because that fragments the control into independent boxes
+    // and breaks the segmented-control affordance.
+    //
+    // No `:not(:first-of-type)` here — MUI v9 fully removed that
+    // pattern in favour of position classes, and using both
+    // mechanisms creates cascade ambiguity that bit us before.
     MuiToggleButtonGroup: {
       styleOverrides: {
-        root: {
-          gap: 4,
-          "& .MuiToggleButton-root": {
-            border: "1px solid",
-            borderRadius: `${borderRadius}px !important`
-          }
-        },
-        grouped: {
-          "&:not(:first-of-type)": {
-            marginLeft: 0,
-            borderLeft: "1px solid"
+        grouped: ({ theme }) => ({
+          // Restate the seam-edge with the divider colour on
+          // unselected middle/last buttons. MUI's default is
+          // `1px solid transparent` for the legacy "overlap with
+          // negative margin" pattern (inline-flex layout). That
+          // pattern hides the transparent seam under the previous
+          // sibling's right border. But consumers regularly pass
+          // `sx={{ display: 'grid' }}` (e.g. /admin/messaging
+          // settings) — and grid ignores the negative margin, so
+          // the seam-edge becomes a visibly missing border.
+          //
+          // Painting the seam as `divider` here is a no-op in the
+          // canonical inline-flex layout (it sits exactly under
+          // prev's right border) and restores the missing edge in
+          // grid/custom layouts. One rule, both cases.
+          borderLeftColor: paletteVar(theme, "divider"),
+          borderTopColor: paletteVar(theme, "divider"),
+          [`&.${toggleButtonClasses.selected}`]: {
+            // Lift above neighbours so the selected outline paints
+            // OVER the prev sibling's seam border. Without z-index
+            // the divider connecting two segments swallows the
+            // selected segment's leading edge in inline-flex.
+            zIndex: 1,
+            // Seam edges use `currentColor` rather than a hard-
+            // coded primary so per-button colour overrides (MUI
+            // `color` prop, inline `sx={{ color }}`) propagate
+            // uniformly to all four sides. The previous primary-
+            // forced longhands fought consumer styling on the
+            // left/top while letting it through on right/bottom,
+            // producing the visible "half-and-half" border bug.
+            borderLeftColor: "currentColor",
+            borderTopColor: "currentColor"
           }
-        }
+        })
       }
     },
     // =========================================================================
@@ -2729,7 +3184,7 @@ function componentOverrides(config) {
           padding: 3
         }),
         outlined: ({ theme }) => ({
-          borderColor: theme.vars?.palette.divider || theme.palette.divider,
+          borderColor: paletteVar(theme, "divider"),
           backgroundColor: "transparent"
         })
       }
@@ -2737,7 +3192,7 @@ function componentOverrides(config) {
     MuiTimelineConnector: {
       styleOverrides: {
         root: ({ theme }) => ({
-          backgroundColor: theme.vars?.palette.divider || theme.palette.divider,
+          backgroundColor: paletteVar(theme, "divider"),
           width: 2
         })
       }
@@ -2751,117 +3206,13 @@ function componentOverrides(config) {
       }
     },
     // =========================================================================
-    // DATA GRID (MUI X)
+    // DATA GRID (MUI X) — modularized in ./DataGrid.ts
     // =========================================================================
-    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
-          }
-        })
-      }
-    },
+    MuiDataGrid: createDataGridOverrides(config),
     // =========================================================================
-    // DATE/TIME PICKERS (MUI X)
+    // DATE/TIME PICKERS (MUI X) — modularized in ./DatePicker.ts
     // =========================================================================
-    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
-          }
-        })
-      }
-    },
+    ...createDatePickerOverrides(config),
     // =========================================================================
     // TREE VIEW (MUI X)
     // =========================================================================
@@ -2883,7 +3234,7 @@ function componentOverrides(config) {
             }
           },
           "&:hover": {
-            backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
+            backgroundColor: paletteVar(theme, "action.hover")
           }
         }),
         label: ({ theme }) => ({
@@ -3270,7 +3621,7 @@ var lightPalette = {
     main: "#42A5F5",
     dark: "#1E88E5",
     darker: "#1565C0",
-    contrastText: "#FFFFFF"
+    contrastText: "#000000"
   },
   info: {
     lighter: "#E0F7FA",
@@ -3278,7 +3629,7 @@ var lightPalette = {
     main: "#26C6DA",
     dark: "#00ACC1",
     darker: "#00838F",
-    contrastText: "#FFFFFF"
+    contrastText: "#000000"
   },
   success: {
     lighter: "#E8F5E9",
@@ -3286,7 +3637,7 @@ var lightPalette = {
     main: "#66BB6A",
     dark: "#43A047",
     darker: "#2E7D32",
-    contrastText: "#FFFFFF"
+    contrastText: "#000000"
   },
   warning: {
     lighter: "#FFF8E1",
@@ -3339,7 +3690,7 @@ var darkPalette = {
     main: "#42A5F5",
     dark: "#1E88E5",
     darker: "#1565C0",
-    contrastText: "#FFFFFF"
+    contrastText: "#000000"
   },
   secondary: {
     lighter: "#E3F2FD",
@@ -3347,7 +3698,7 @@ var darkPalette = {
     main: "#64B5F6",
     dark: "#42A5F5",
     darker: "#1E88E5",
-    contrastText: "#FFFFFF"
+    contrastText: "#000000"
   },
   info: {
     lighter: "#E0F7FA",
@@ -3355,7 +3706,7 @@ var darkPalette = {
     main: "#4DD0E1",
     dark: "#26C6DA",
     darker: "#00ACC1",
-    contrastText: "#FFFFFF"
+    contrastText: "#000000"
   },
   success: {
     lighter: "#E8F5E9",
@@ -3363,7 +3714,7 @@ var darkPalette = {
     main: "#81C784",
     dark: "#66BB6A",
     darker: "#4CAF50",
-    contrastText: "#FFFFFF"
+    contrastText: "#000000"
   },
   warning: {
     lighter: "#FFF8E1",
@@ -4028,14 +4379,14 @@ function applyPrimaryOverride(basePalette, primaryColor, mode) {
       main: primaryColor,
       dark: colorGroup.palette[300],
       darker: colorGroup.palette[100],
-      contrastText: colorGroup.palette[950]
+      contrastText: getContrastText(primaryColor)
     }) : generatePaletteColorWithChannels({
       lighter: colorGroup.palette[50],
       light: colorGroup.palette[400],
       main: primaryColor,
       dark: colorGroup.palette[600],
       darker: colorGroup.palette[900],
-      contrastText: colorGroup.palette[50]
+      contrastText: getContrastText(primaryColor)
     });
     return { ...basePalette, primary: newPrimary2 };
   }
@@ -4046,14 +4397,14 @@ function applyPrimaryOverride(basePalette, primaryColor, mode) {
     main: generatedScale[400],
     dark: generatedScale[300],
     darker: generatedScale[100],
-    contrastText: generatedScale[950]
+    contrastText: getContrastText(generatedScale[400])
   }) : generatePaletteColorWithChannels({
     lighter: generatedScale[50],
     light: generatedScale[400],
     main: generatedScale[500],
     dark: generatedScale[600],
     darker: generatedScale[900],
-    contrastText: generatedScale[50]
+    contrastText: getContrastText(generatedScale[500])
   });
   return { ...basePalette, primary: newPrimary };
 }
@@ -4223,5 +4574,5 @@ function getPresetDisplayName(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
+//# sourceMappingURL=chunk-ZTATTUH7.js.map
+//# sourceMappingURL=chunk-ZTATTUH7.js.map