@omnitron-dev/prism 0.1.2 → 0.2.0

package/dist/{chunk-DXXZ3ITR.js → chunk-MEFT6XPH.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,14 @@ 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 { createTheme, responsiveFontSizes } from '@mui/material/styles';
 import * as locales from '@mui/material/locale';
 
@@ -601,6 +601,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 +785,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,18 +811,9 @@ 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/.
       startIcon: {
         marginRight: 4,
         [`& > *:first-of-type`]: {
@@ -1268,17 +1286,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 +1323,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 +1359,210 @@ 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
-        }
+        variants: [...outlinedInputVariants.input, ...multilineInputVariants]
       },
-      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 }
-      })
+      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,34 +1570,12 @@ 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 }
-        };
-      },
+      root: ({ theme }) => ({
+        ...filledInputStyles.root(theme, borderRadius),
+        variants: filledInputVariants.root
+      }),
       input: {
-        ...INPUT_PADDING.filled.medium,
-        "&.MuiInputBase-inputSizeSmall": {
-          ...INPUT_PADDING.filled.small
-        },
-        "&.MuiInputBase-inputMultiline": {
-          paddingTop: 0,
-          paddingBottom: 0
-        }
+        variants: [...filledInputVariants.input, ...multilineInputVariants]
       }
     }
   };
@@ -1801,129 +1937,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 +2022,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 +2030,10 @@ function componentOverrides(config) {
     },
     MuiCardHeader: {
       defaultProps: {
-        titleTypographyProps: { variant: "h6" },
-        subheaderTypographyProps: { variant: "body2" }
+        slotProps: {
+          title: { variant: "h6" },
+          subheader: { variant: "body2" }
+        }
       },
       styleOverrides: {
         root: {
@@ -1957,7 +2047,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,18 +2068,270 @@ function componentOverrides(config) {
           gap: 8
         }
       }
-    },
-    // =========================================================================
-    // PAPER & SURFACES
-    // =========================================================================
-    MuiPaper: {
-      defaultProps: {
-        elevation: 0
-      },
-      styleOverrides: {
-        root: {
-          backgroundImage: "none"
-        },
+    }
+  };
+}
+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
+        }
+      }
+    }
+  };
+}
+
+// src/theme/components/DataGrid.ts
+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),
+    // =========================================================================
+    // PAPER & SURFACES
+    // =========================================================================
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          backgroundImage: "none"
+        },
         rounded: {
           borderRadius: borderRadius * 1.5
         },
@@ -2014,60 +2356,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 +2376,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,7 +2401,7 @@ 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"
@@ -2157,7 +2448,7 @@ function componentOverrides(config) {
           }
         },
         expandIconWrapper: ({ theme }) => ({
-          color: theme.vars?.palette.text.secondary || theme.palette.text.secondary
+          color: paletteVar(theme, "text.secondary")
         })
       }
     },
@@ -2165,7 +2456,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 +2477,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 +2492,7 @@ function componentOverrides(config) {
     MuiStepConnector: {
       styleOverrides: {
         line: ({ theme }) => ({
-          borderColor: theme.vars?.palette.divider || theme.palette.divider,
+          borderColor: paletteVar(theme, "divider"),
           borderTopWidth: 2
         })
       }
@@ -2209,12 +2500,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 +2517,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 +2543,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 +2597,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 +2620,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 +2653,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 +2697,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 +2747,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 +2765,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 +2778,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 +2793,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 +2802,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 +2828,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 +2859,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 +2883,7 @@ function componentOverrides(config) {
             fontWeight: 500
           },
           "&:hover": {
-            backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
+            backgroundColor: paletteVar(theme, "action.hover")
           }
         })
       }
@@ -2565,6 +2895,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)
     // =========================================================================
@@ -2592,9 +2944,9 @@ function componentOverrides(config) {
           },
           "&.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 +2993,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 +3011,17 @@ 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,
+            borderColor: paletteVar(theme, "primary.main"),
+            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 +3037,39 @@ function componentOverrides(config) {
         }
       }
     },
+    // The group only owns layout (gap, sibling border). Per-button
+    // styling (border, radius, padding) is already covered by the
+    // MuiToggleButton override above — the previous descendant
+    // selector with `!important` here was redundant.
+    //
+    // The sibling-border explicitly carries the same `divider`
+    // colour used by each button's own border, otherwise the
+    // shorthand `1px solid` would fall back to `currentColor`
+    // (text colour) and the first-of-type's left edge looked
+    // brighter than the seams between subsequent buttons.
     MuiToggleButtonGroup: {
       styleOverrides: {
         root: {
-          gap: 4,
-          "& .MuiToggleButton-root": {
-            border: "1px solid",
-            borderRadius: `${borderRadius}px !important`
-          }
+          gap: 4
         },
-        grouped: {
+        grouped: ({ theme }) => ({
           "&:not(:first-of-type)": {
             marginLeft: 0,
-            borderLeft: "1px solid"
+            borderLeft: `1px solid ${paletteVar(theme, "divider")}`,
+            // The MuiToggleButton override sets `borderColor: primary`
+            // when selected via a longhand on the .selected class, but
+            // that rule's specificity equals ours and MUI's
+            // toggle-button-group styleOverrides land later in source
+            // order — so the left edge stayed `divider` even after
+            // selection. Re-state the primary colour inside our
+            // selected branch so it wins on cascade (specificity here
+            // is one class higher than the MuiToggleButton.selected
+            // rule).
+            [`&.${toggleButtonClasses.selected}`]: {
+              borderLeftColor: paletteVar(theme, "primary.main")
+            }
           }
-        }
+        })
       }
     },
     // =========================================================================
@@ -2729,7 +3099,7 @@ function componentOverrides(config) {
           padding: 3
         }),
         outlined: ({ theme }) => ({
-          borderColor: theme.vars?.palette.divider || theme.palette.divider,
+          borderColor: paletteVar(theme, "divider"),
           backgroundColor: "transparent"
         })
       }
@@ -2737,7 +3107,7 @@ function componentOverrides(config) {
     MuiTimelineConnector: {
       styleOverrides: {
         root: ({ theme }) => ({
-          backgroundColor: theme.vars?.palette.divider || theme.palette.divider,
+          backgroundColor: paletteVar(theme, "divider"),
           width: 2
         })
       }
@@ -2751,117 +3121,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 +3149,7 @@ function componentOverrides(config) {
             }
           },
           "&:hover": {
-            backgroundColor: theme.vars?.palette.action.hover || theme.palette.action.hover
+            backgroundColor: paletteVar(theme, "action.hover")
           }
         }),
         label: ({ theme }) => ({
@@ -4223,5 +4489,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-MEFT6XPH.js.map
+//# sourceMappingURL=chunk-MEFT6XPH.js.map