@carto/meridian-ds 2.9.2 → 2.9.3-alpha-lists.5

package/dist/{css-utils-CH7es90t.cjs → css-utils-B3V0Xzli.cjs}

@@ -782,6 +782,10 @@ const MENU_LIST_MAX_SIZE = 312;
 const MENU_ITEM_SIZE_DENSE = 24;
 const MENU_ITEM_SIZE_DEFAULT = 32;
 const MENU_ITEM_SIZE_EXTENDED = 48;
+const LIST_ITEM_SIZE_DENSE = 52;
+const LIST_ITEM_SIZE_DEFAULT = 68;
+const LIST_MAX_SIZE = 312;
+const LIST_OVERSCAN_ITEMS_COUNT = 5;
 const FontWeight = {
   regular: 400,
   medium: 500,
@@ -5759,6 +5763,10 @@ exports.ICON_SIZE_LARGE = ICON_SIZE_LARGE;
 exports.ICON_SIZE_MEDIUM = ICON_SIZE_MEDIUM;
 exports.ICON_SIZE_SMALL = ICON_SIZE_SMALL;
 exports.IconButton = IconButton;
+exports.LIST_ITEM_SIZE_DEFAULT = LIST_ITEM_SIZE_DEFAULT;
+exports.LIST_ITEM_SIZE_DENSE = LIST_ITEM_SIZE_DENSE;
+exports.LIST_MAX_SIZE = LIST_MAX_SIZE;
+exports.LIST_OVERSCAN_ITEMS_COUNT = LIST_OVERSCAN_ITEMS_COUNT;
 exports.MENU_ITEM_SIZE_DEFAULT = MENU_ITEM_SIZE_DEFAULT;
 exports.MENU_ITEM_SIZE_DENSE = MENU_ITEM_SIZE_DENSE;
 exports.MENU_ITEM_SIZE_EXTENDED = MENU_ITEM_SIZE_EXTENDED;

package/dist/{css-utils-CjUBRJVK.js → css-utils-D9LibDjo.js}

@@ -781,6 +781,10 @@ const MENU_LIST_MAX_SIZE = 312;
 const MENU_ITEM_SIZE_DENSE = 24;
 const MENU_ITEM_SIZE_DEFAULT = 32;
 const MENU_ITEM_SIZE_EXTENDED = 48;
+const LIST_ITEM_SIZE_DENSE = 52;
+const LIST_ITEM_SIZE_DEFAULT = 68;
+const LIST_MAX_SIZE = 312;
+const LIST_OVERSCAN_ITEMS_COUNT = 5;
 const FontWeight = {
   regular: 400,
   medium: 500,
@@ -5756,6 +5760,7 @@ export {
   APPBAR_SIZE as A,
   BREAKPOINTS as B,
   ICON_SIZE_LARGE as I,
+  LIST_ITEM_SIZE_DENSE as L,
   MENU_ITEM_SIZE_DEFAULT as M,
   NOTIFICATION_DURATION_IN_MS as N,
   SPACING as S,
@@ -5767,9 +5772,12 @@ export {
   ellipsisStyles as e,
   MENU_ITEM_SIZE_DENSE as f,
   getSpacing as g,
-  MENU_ITEM_SIZE_EXTENDED as h,
-  IconButton as i,
-  useImperativeIntl as j,
-  getDefaultExportFromCjs as k,
+  LIST_ITEM_SIZE_DEFAULT as h,
+  MENU_ITEM_SIZE_EXTENDED as i,
+  LIST_MAX_SIZE as j,
+  LIST_OVERSCAN_ITEMS_COUNT as k,
+  IconButton as l,
+  useImperativeIntl as m,
+  getDefaultExportFromCjs as n,
   useTranslationWithFallback as u
 };

package/dist/custom-icons/index.cjs

@@ -5548,30 +5548,13 @@ function SwatchCircleNone({ width, height, sx, ...props }, ref) {
   );
 }
 const SwatchCircleNone$1 = React.forwardRef(SwatchCircleNone);
-const Icon$y = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "mask",
-    {
-      id: "a",
-      width: 24,
-      height: 24,
-      x: 0,
-      y: 0,
-      maskUnits: "userSpaceOnUse",
-      style: {
-        maskType: "alpha"
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M0 0h24v24H0z" })
-    }
-  ),
-  /* @__PURE__ */ jsxRuntime.jsx("g", { mask: "url(#a)", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      fill: "currentColor",
-      d: "M15 22q-3.175-1.2-5.087-3.95Q8 15.3 8 11.9q0-2.275.9-4.312A10.95 10.95 0 0 1 11.45 4H8V2h7v7h-2V5.3a9 9 0 0 0-2.213 2.988A8.55 8.55 0 0 0 10 11.9q0 2.55 1.35 4.687A8.64 8.64 0 0 0 15 19.825z"
-    }
-  ) })
-] });
+const Icon$y = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M15 22q-3.175-1.2-5.087-3.95Q8 15.3 8 11.9q0-2.275.9-4.312A10.95 10.95 0 0 1 11.45 4H8V2h7v7h-2V5.3a9 9 0 0 0-2.213 2.988A8.55 8.55 0 0 0 10 11.9q0 2.55 1.35 4.687A8.64 8.64 0 0 0 15 19.825z"
+  }
+) });
 const BaseSvgIcon$y = material.createSvgIcon(Icon$y(), "SwitchAccessShortcut");
 function SwitchAccessShortcut({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/custom-icons/index.js

@@ -5546,30 +5546,13 @@ function SwatchCircleNone({ width, height, sx, ...props }, ref) {
   );
 }
 const SwatchCircleNone$1 = forwardRef(SwatchCircleNone);
-const Icon$y = () => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: [
-  /* @__PURE__ */ jsx(
-    "mask",
-    {
-      id: "a",
-      width: 24,
-      height: 24,
-      x: 0,
-      y: 0,
-      maskUnits: "userSpaceOnUse",
-      style: {
-        maskType: "alpha"
-      },
-      children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M0 0h24v24H0z" })
-    }
-  ),
-  /* @__PURE__ */ jsx("g", { mask: "url(#a)", children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      fill: "currentColor",
-      d: "M15 22q-3.175-1.2-5.087-3.95Q8 15.3 8 11.9q0-2.275.9-4.312A10.95 10.95 0 0 1 11.45 4H8V2h7v7h-2V5.3a9 9 0 0 0-2.213 2.988A8.55 8.55 0 0 0 10 11.9q0 2.55 1.35 4.687A8.64 8.64 0 0 0 15 19.825z"
-    }
-  ) })
-] });
+const Icon$y = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M15 22q-3.175-1.2-5.087-3.95Q8 15.3 8 11.9q0-2.275.9-4.312A10.95 10.95 0 0 1 11.45 4H8V2h7v7h-2V5.3a9 9 0 0 0-2.213 2.988A8.55 8.55 0 0 0 10 11.9q0 2.55 1.35 4.687A8.64 8.64 0 0 0 15 19.825z"
+  }
+) });
 const BaseSvgIcon$y = createSvgIcon(Icon$y(), "SwitchAccessShortcut");
 function SwitchAccessShortcut({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsx(

package/dist/theme/index.cjs

@@ -3,9 +3,9 @@ var _a, _b, _c, _d, _e, _f, _g, _h;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const material = require("@mui/material");
 const paletteUtils = require("../palette-utils-B9ybmwiI.cjs");
-const MenuItem = require("../MenuItem-DoBJsRR_.cjs");
+const MenuItem = require("../MenuItem-0c7Cz5g_.cjs");
 const jsxRuntime = require("react/jsx-runtime");
-const cssUtils = require("../css-utils-CH7es90t.cjs");
+const cssUtils = require("../css-utils-B3V0Xzli.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const xDatePickers = require("@mui/x-date-pickers");
@@ -655,8 +655,19 @@ const dataDisplayOverrides = {
     styleOverrides: {
       root: ({ theme: theme2, ownerState }) => ({
         overflow: "initial",
+        position: "relative",
         color: theme2.palette.secondary.contrastText,
         backgroundColor: theme2.palette.secondary.main,
+        // Overlay border on top of all content using ::after pseudo-element
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          inset: 0,
+          boxShadow: `inset 0 0 0 1px ${theme2.palette.default.outlinedBorder}`,
+          pointerEvents: "none",
+          borderRadius: "inherit",
+          zIndex: 1
+        },
         //  Default fallback image override
         // https://github.com/mui/material-ui/issues/33229
         "& .MuiAvatar-fallback": {
@@ -693,11 +704,25 @@ const dataDisplayOverrides = {
         },
         // Disabled styles
         ...ownerState.disabled && {
-          opacity: 0.6
+          opacity: 1,
+          color: theme2.palette.text.disabled,
+          backgroundColor: theme2.palette.action.disabledBackground,
+          // Overlay border on top of all content using ::after pseudo-element
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            inset: 0,
+            boxShadow: `inset 0 0 0 1px ${theme2.palette.divider}`,
+            pointerEvents: "none",
+            borderRadius: "inherit",
+            zIndex: 1
+          }
         }
       }),
-      img: ({ theme: theme2 }) => ({
-        boxShadow: `0 0 0 1px ${theme2.palette.default.outlinedBorder}`
+      img: ({ ownerState }) => ({
+        ...ownerState.disabled && {
+          opacity: 0.6
+        }
       }),
       circular: () => ({
         borderRadius: avatarCircularRadius,
@@ -2320,6 +2345,83 @@ const formsOverrides = {
     }
   }
 };
+const getBoxedVariantStyles = (theme2) => ({
+  backgroundColor: theme2.palette.background.paper,
+  boxShadow: `inset 0 0 0 1px ${theme2.palette.divider}`,
+  borderRadius: theme2.spacing(1),
+  "&.MuiListItemButton-root:hover": {
+    backgroundColor: theme2.palette.background.paper,
+    boxShadow: `inset 0 0 0 1px ${theme2.palette.text.hint}`
+  }
+});
+const getListItemAdornmentStyles = (theme2) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: theme2.spacing(1.5),
+  minHeight: cssUtils.MENU_ITEM_SIZE_DEFAULT,
+  minWidth: cssUtils.MENU_ITEM_SIZE_DEFAULT
+});
+const getListItemStyles = (ownerState, theme2) => ({
+  gap: theme2.spacing(1.5),
+  minHeight: cssUtils.MENU_ITEM_SIZE_DEFAULT,
+  width: "100%",
+  padding: theme2.spacing(1, ownerState.dense ? 1.5 : 2),
+  // Checkbox and radio button styles
+  "& .MuiCheckbox-root, & .MuiRadio-root": {
+    ...getListItemAdornmentStyles(theme2),
+    // Override the default icon size coming from MUI definition
+    "& .MuiSvgIcon-fontSizeMedium": {
+      fontSize: cssUtils.ICON_SIZE_LARGE,
+      width: cssUtils.ICON_SIZE_LARGE,
+      minWidth: cssUtils.ICON_SIZE_LARGE,
+      height: cssUtils.ICON_SIZE_LARGE
+    }
+  },
+  // fixedHeight true (or undefined, which defaults to true)
+  // + dense true: 52px
+  // + dense false: 68px
+  // fixedHeight false: adapts to content
+  // Use data attribute selector since fixedHeight is not passed to MUI component to avoid DOM warning
+  height: ownerState.dense ? cssUtils.LIST_ITEM_SIZE_DENSE : cssUtils.LIST_ITEM_SIZE_DEFAULT,
+  '&[data-fixed-height="false"], [data-fixed-height="false"] &': {
+    height: "auto"
+  },
+  // Handle disablePadding and disableGutters via data attributes for ListItemButton
+  // (since these props are not valid for ListItemButton and would leak to DOM)
+  '&[data-disable-padding="true"]': {
+    padding: "0 !important"
+  },
+  '&[data-disable-gutters="true"]': {
+    paddingLeft: "0 !important",
+    paddingRight: "0 !important"
+  },
+  // Boxed variant styles - applied via data-variant attribute (from ListItem or parent List)
+  '&[data-variant="boxed"], [data-variant="boxed"] &': getBoxedVariantStyles(theme2),
+  // Disable gutters styles
+  ...ownerState.disableGutters && {
+    paddingLeft: 0,
+    paddingRight: 0
+  },
+  // Disable padding styles
+  ...ownerState.disablePadding && {
+    padding: 0
+  },
+  // Disabled styles
+  ...ownerState.disabled && {
+    opacity: "1 !important",
+    color: theme2.palette.text.disabled,
+    ".MuiTypography-root": {
+      color: theme2.palette.text.disabled
+    },
+    svg: {
+      color: theme2.palette.text.disabled,
+      path: {
+        fill: theme2.palette.text.disabled
+      }
+    }
+  }
+});
 const navigationOverrides = {
   // Menu
   MuiMenu: {
@@ -2439,44 +2541,101 @@ const navigationOverrides = {
   },
   // List
   MuiList: {
+    defaultProps: {
+      variant: "standard",
+      direction: "column"
+    },
     styleOverrides: {
-      root: ({ theme: theme2 }) => ({
-        paddingTop: 0,
-        ".MuiPopover-root &, .MuiPopper-root &, .base-Popper-root &": {
-          minWidth: theme2.spacing(8),
-          // 64px, defined by design
-          maxHeight: cssUtils.MENU_LIST_MAX_SIZE,
-          // 312px, defined by design
-          overflowY: "auto",
-          "&:focus-visible": {
-            outline: "none !important",
-            boxShadow: "none !important"
+      root: ({ theme: theme2, ownerState }) => ({
+        display: "flex",
+        flexDirection: ownerState.direction,
+        gap: theme2.spacing(ownerState.spacing ?? 0),
+        padding: 0,
+        // When direction is column, apply styles for menu-like behavior
+        ...ownerState.direction === "column" && {
+          ".MuiPopover-root &, .MuiPopper-root &, .base-Popper-root &": {
+            minWidth: theme2.spacing(8),
+            // 64px, defined by design
+            maxHeight: cssUtils.MENU_LIST_MAX_SIZE,
+            // 312px, defined by design
+            overflowY: "auto",
+            "&:focus-visible": {
+              outline: "none !important",
+              boxShadow: "none !important"
+            }
+          },
+          ".MuiDivider-root": {
+            margin: theme2.spacing(1, 0)
+          },
+          ".MuiListSubheader-root": {
+            // We need to offset the margin to avoid double spacing between subheaders and regular list items when using spacing prop.
+            marginBottom: theme2.spacing(-(ownerState.spacing ?? 0))
           }
         },
-        ".MuiDivider-root": {
-          margin: theme2.spacing(1, 0)
-        },
-        // Indent sublevels, ugly but needed to avoid issues with hover
-        "& .MuiList-root": {
-          paddingTop: 0,
-          paddingBottom: 0,
-          "& .MuiListItem-root": {
-            paddingLeft: theme2.spacing(4)
+        // Outlined variant: border on the list container and in the list items
+        ...ownerState.variant === "outlined" && {
+          "& > .MuiListItem-root, & > .MuiListItemButton-root": {
+            border: `1px solid ${theme2.palette.divider}`,
+            "& .MuiListItemButton-root": {
+              border: "none"
+            }
+          },
+          // First list item has rounded top corners
+          "& > .MuiListItem-root:first-of-type, & > .MuiListItemButton-root:first-of-type": {
+            borderRadius: theme2.spacing(1, 1, 0, 0)
+          },
+          // Last list item has rounded bottom corners
+          "& > .MuiListItem-root:last-of-type, & > .MuiListItemButton-root:last-of-type": {
+            borderRadius: theme2.spacing(0, 0, 1, 1)
+          },
+          "& > .MuiListItem-root + .MuiListItem-root, & > .MuiListItemButton-root + .MuiListItemButton-root": {
+            borderTop: "none"
           },
-          "& .MuiList-root": {
-            "& .MuiListItem-root": {
-              paddingLeft: theme2.spacing(6)
+          // When direction is column reverse, rounded corners should be on the top and bottom
+          ...ownerState.direction === "column-reverse" && {
+            // First list item has rounded bottom corners
+            "& > .MuiListItem-root:first-of-type, & > .MuiListItemButton-root:first-of-type": {
+              borderRadius: theme2.spacing(0, 0, 1, 1)
             },
-            "& .MuiList-root": {
-              "& .MuiListItem-root": {
-                paddingLeft: theme2.spacing(8)
-              },
-              "& .MuiList-root": {
-                "& .MuiListItem-root": {
-                  paddingLeft: theme2.spacing(10)
-                }
-              }
+            // Last list item has rounded top corners
+            "& > .MuiListItem-root:last-of-type, & > .MuiListItemButton-root:last-of-type": {
+              borderRadius: theme2.spacing(1, 1, 0, 0)
+            },
+            "& > .MuiListItem-root + .MuiListItem-root, & > .MuiListItemButton-root + .MuiListItemButton-root": {
+              borderBottom: "none"
             }
+          },
+          // When direction is row, rounded corners should be on the left and right
+          ...ownerState.direction === "row" && {
+            // First list item has rounded left corners
+            "& > .MuiListItem-root:first-of-type, & > .MuiListItemButton-root:first-of-type": {
+              borderRadius: theme2.spacing(1, 0, 0, 1)
+            },
+            // Last list item has rounded right corners
+            "& > .MuiListItem-root:last-of-type, & > .MuiListItemButton-root:last-of-type": {
+              borderRadius: theme2.spacing(0, 1, 1, 0)
+            },
+            "& > .MuiListItem-root + .MuiListItem-root, & > .MuiListItemButton-root + .MuiListItemButton-root": {
+              borderLeft: "none"
+            }
+          },
+          // When direction is row-reverse, rounded corners should be on the right and left
+          ...ownerState.direction === "row-reverse" && {
+            // First list item has rounded right corners
+            "& > .MuiListItem-root:first-of-type, & > .MuiListItemButton-root:first-of-type": {
+              borderRadius: theme2.spacing(0, 1, 1, 0)
+            },
+            // Last list item has rounded left corners
+            "& > .MuiListItem-root:last-of-type, & > .MuiListItemButton-root:last-of-type": {
+              borderRadius: theme2.spacing(1, 0, 0, 1)
+            },
+            "& > .MuiListItem-root + .MuiListItem-root, & > .MuiListItemButton-root + .MuiListItemButton-root": {
+              borderRight: "none"
+            }
+          },
+          // When li is the only item in the list (direct children only, excludes nested ListItemButton inside ListItem)
+          "& > .MuiListItem-root:only-of-type, & > .MuiListItemButton-root:only-of-type": {
+            borderRadius: theme2.spacing(1)
           }
         },
         "& .MuiListItemButton-root": {
@@ -2488,32 +2647,114 @@ const navigationOverrides = {
     }
   },
   // List Item
+  MuiListItem: {
+    defaultProps: {
+      dense: true,
+      variant: "standard",
+      disablePadding: false
+    },
+    styleOverrides: {
+      root: ({ theme: theme2, ownerState }) => ({
+        ...getListItemStyles(ownerState, theme2),
+        // Reset padding when contains ListItemButton
+        "&:has(.MuiListItemButton-root)": {
+          padding: 0,
+          '&.MuiListItem-root[data-variant="boxed"]': {
+            boxShadow: "none",
+            "&:hover": {
+              backgroundColor: theme2.palette.background.paper,
+              boxShadow: "none"
+            }
+          }
+        },
+        // Add padding right to ListItem when has child ListItemSecondaryAction and not ListItemButton as child
+        "&:has(.MuiListItemSecondaryAction-root):not(:has(.MuiListItemButton-root))": {
+          paddingRight: theme2.spacing(7.5),
+          '&[data-disable-padding="true"], &[data-disable-gutters="true"]': {
+            paddingRight: `${theme2.spacing(5.5)} !important`
+          }
+        },
+        // Reset padding to ListItemButton when inside ListItem, but keep padding left
+        "& > .MuiListItemButton-root": {
+          paddingRight: 0,
+          paddingLeft: theme2.spacing(ownerState.dense ? 1.5 : 2),
+          "&:hover": {
+            backgroundColor: theme2.palette.action.hover
+          }
+        },
+        // Boxed variant hover when inside ListItem
+        '&[data-variant="boxed"] > .MuiListItemButton-root': {
+          boxShadow: `inset 0 0 0 1px ${theme2.palette.divider}`,
+          borderRadius: theme2.spacing(1),
+          "&:hover": {
+            backgroundColor: theme2.palette.background.paper,
+            boxShadow: `inset 0 0 0 1px ${theme2.palette.text.hint}`
+          }
+        },
+        // Add padding right to ListItemButton when sibling ListItemSecondaryAction is present to simulate spacing between the action and the content
+        "&:has(.MuiListItemSecondaryAction-root)": {
+          "& > .MuiListItemButton-root": {
+            paddingRight: theme2.spacing(7.5),
+            '&[data-disable-padding="true"], &[data-disable-gutters="true"]': {
+              paddingRight: `${theme2.spacing(5.5)} !important`
+            }
+          }
+        }
+      })
+    }
+  },
+  // List Item Button
+  MuiListItemButton: {
+    defaultProps: {
+      dense: true,
+      variant: "standard",
+      component: "button"
+    },
+    styleOverrides: {
+      root: ({ theme: theme2, ownerState }) => ({
+        ...getListItemStyles(ownerState, theme2)
+      })
+    }
+  },
+  // List Item Text
   MuiListItemText: {
     defaultProps: {
       primaryTypographyProps: {
-        variant: "body2",
+        variant: "button",
+        color: "text.primary",
+        fontWeight: 500,
         noWrap: true,
         component: "span"
       },
-      secondaryTypographyProps: { variant: "caption" }
+      secondaryTypographyProps: {
+        variant: "caption",
+        color: "text.secondary",
+        noWrap: true
+      }
     },
     styleOverrides: {
-      root: ({ theme: theme2 }) => ({
-        paddingRight: theme2.spacing(2),
-        "& + .MuiBox-root": {
-          marginRight: theme2.spacing(1)
-        }
+      root: () => ({
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        flex: 1,
+        minHeight: theme.spacing(2.5),
+        margin: 0
       })
     }
   },
+  // List Item Icon
   MuiListItemIcon: {
     styleOverrides: {
       root: ({ theme: theme2 }) => ({
-        display: "flex",
-        alignItems: "center",
-        gap: theme2.spacing(2),
-        "& .MuiSvgIcon-root": {
-          fontSize: cssUtils.ICON_SIZE_LARGE
+        ...getListItemAdornmentStyles(theme2),
+        // Apply styles to SVGs, but exclude those inside Radio or Checkbox components
+        "&:not(:has(.MuiRadio-root)):not(:has(.MuiCheckbox-root)) svg": {
+          color: theme2.palette.text.secondary,
+          fontSize: cssUtils.ICON_SIZE_LARGE,
+          width: cssUtils.ICON_SIZE_LARGE,
+          minWidth: cssUtils.ICON_SIZE_LARGE,
+          height: cssUtils.ICON_SIZE_LARGE
         },
         ".MuiMenuItem-root.MuiButtonBase-root &": {
           minWidth: cssUtils.ICON_SIZE_MEDIUM
@@ -2521,12 +2762,14 @@ const navigationOverrides = {
       })
     }
   },
+  // List Item Avatar
   MuiListItemAvatar: {
     styleOverrides: {
       root: ({ theme: theme2 }) => ({
+        ...getListItemAdornmentStyles(theme2),
         "& .MuiAvatar-root": {
-          height: theme2.spacing(4),
-          width: theme2.spacing(4)
+          height: cssUtils.MENU_ITEM_SIZE_DEFAULT,
+          width: cssUtils.MENU_ITEM_SIZE_DEFAULT
         },
         "& .MuiSvgIcon-root": {
           fontSize: cssUtils.ICON_SIZE_MEDIUM
@@ -2534,6 +2777,50 @@ const navigationOverrides = {
       })
     }
   },
+  // List Item Secondary Action
+  MuiListItemSecondaryAction: {
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        ...getListItemAdornmentStyles(theme2),
+        // if parent ListItem has disableGutters or disablePadding, reset padding
+        '[data-disable-padding="true"] &, [data-disable-gutters="true"] &': {
+          right: 0
+        }
+      })
+    }
+  },
+  // List Subheader
+  MuiListSubheader: {
+    defaultProps: {
+      disableGutters: true,
+      component: "div"
+    },
+    styleOverrides: {
+      root: ({ theme: theme2 }) => ({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        height: theme2.spacing(3),
+        padding: 0,
+        ...theme2.typography.caption,
+        // Use data attribute selector since backgroundColor is not passed to MUI component to avoid DOM warning
+        backgroundColor: theme2.palette.background.default,
+        '&[data-background-color="paper"]': {
+          backgroundColor: theme2.palette.background.paper
+        },
+        '&[data-background-color="inherit"]': {
+          backgroundColor: "inherit"
+        },
+        // Adapt padding when List is variant="standard"
+        '[data-variant="standard"] &': {
+          padding: theme2.spacing(0, 2),
+          '&[data-dense="true"]': {
+            padding: theme2.spacing(0, 1.5)
+          }
+        }
+      })
+    }
+  },
   // Tabs
   MuiTabs: {
     styleOverrides: {
@@ -3263,6 +3550,10 @@ exports.BREAKPOINTS = cssUtils.BREAKPOINTS;
 exports.ICON_SIZE_LARGE = cssUtils.ICON_SIZE_LARGE;
 exports.ICON_SIZE_MEDIUM = cssUtils.ICON_SIZE_MEDIUM;
 exports.ICON_SIZE_SMALL = cssUtils.ICON_SIZE_SMALL;
+exports.LIST_ITEM_SIZE_DEFAULT = cssUtils.LIST_ITEM_SIZE_DEFAULT;
+exports.LIST_ITEM_SIZE_DENSE = cssUtils.LIST_ITEM_SIZE_DENSE;
+exports.LIST_MAX_SIZE = cssUtils.LIST_MAX_SIZE;
+exports.LIST_OVERSCAN_ITEMS_COUNT = cssUtils.LIST_OVERSCAN_ITEMS_COUNT;
 exports.MENU_ITEM_SIZE_DEFAULT = cssUtils.MENU_ITEM_SIZE_DEFAULT;
 exports.MENU_ITEM_SIZE_DENSE = cssUtils.MENU_ITEM_SIZE_DENSE;
 exports.MENU_ITEM_SIZE_EXTENDED = cssUtils.MENU_ITEM_SIZE_EXTENDED;