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

package/CHANGELOG.md

@@ -2,8 +2,14 @@
 
 ## Unreleased
 
+- New List components (List, ListItem, ListSubheader, ListItemRightContent) [#336](https://github.com/CartoDB/meridian-ds/pull/336)
+
 ## 2.0
 
+### 2.9.3
+
+- Custom Icons: SwitchAccessShortcut [#347](https://github.com/CartoDB/meridian-ds/pull/347)
+
 ### 2.9.2
 
 - Custom Icons: ArrowDownHigh, ArrowRightHigh, FolderEmpty [#345](https://github.com/CartoDB/meridian-ds/pull/345)

package/dist/{Alert-C4W0H_uN.cjs → Alert-0VBqBP4P.cjs}

@@ -4,7 +4,7 @@ const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
 require("cartocolor");
-const cssUtils = require("./css-utils-CH7es90t.cjs");
+const cssUtils = require("./css-utils-B3V0Xzli.cjs");
 const ScreenReaderOnly = material.styled("span")(() => ({
   position: "absolute",
   width: 1,

package/dist/{Alert-BZPM5zpX.js → Alert-BEzNSCqV.js}

@@ -3,7 +3,7 @@ import { forwardRef, useState } from "react";
 import { styled, Link as Link$1, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
 import { OpenInNewOutlined } from "@mui/icons-material";
 import "cartocolor";
-import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography } from "./css-utils-CjUBRJVK.js";
+import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography } from "./css-utils-D9LibDjo.js";
 const ScreenReaderOnly = styled("span")(() => ({
   position: "absolute",
   width: 1,

package/dist/{MenuItem-DoBJsRR_.cjs → MenuItem-0c7Cz5g_.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const cssUtils = require("./css-utils-CH7es90t.cjs");
+const cssUtils = require("./css-utils-B3V0Xzli.cjs");
 function getPixelToRem(px) {
   const fontBase = 16;
   const rem = 1 / fontBase * px + "rem";

package/dist/{MenuItem-Cx5lTXXm.js → MenuItem-D4v_HV1x.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { styled, MenuItem as MenuItem$1 } from "@mui/material";
-import { f as MENU_ITEM_SIZE_DENSE, h as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-CjUBRJVK.js";
+import { f as MENU_ITEM_SIZE_DENSE, i as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-D9LibDjo.js";
 function getPixelToRem(px) {
   const fontBase = 16;
   const rem = 1 / fontBase * px + "rem";

package/dist/components/index.cjs

@@ -4,11 +4,11 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const cssUtils = require("../css-utils-CH7es90t.cjs");
-const Alert$1 = require("../Alert-C4W0H_uN.cjs");
+const cssUtils = require("../css-utils-B3V0Xzli.cjs");
+const Alert$1 = require("../Alert-0VBqBP4P.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
-const MenuItem = require("../MenuItem-DoBJsRR_.cjs");
+const MenuItem = require("../MenuItem-0c7Cz5g_.cjs");
 require("cartocolor");
 const reactWindow = require("react-window");
 const reactCodemirror2 = require("react-codemirror2");
@@ -1479,7 +1479,7 @@ function useMultipleAutocomplete({
     getCounterRenderTags
   };
 }
-const List = material.styled("ul")(
+const List$1 = material.styled("ul")(
   ({ theme, hasFilters }) => ({
     ...!hasFilters && {
       paddingTop: `${theme.spacing(1)} !important`
@@ -1606,7 +1606,7 @@ function _AutocompleteList({
     );
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    List,
+    List$1,
     {
       ref,
       ...otherProps,
@@ -4928,7 +4928,7 @@ const StyledMenu = material.styled(material.Menu, {
     }
   }
 }));
-function _Menu({ extended, width, height, MenuListProps, ...otherProps }, ref) {
+function _Menu({ extended, width, height, MenuListProps: MenuListProps2, ...otherProps }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledMenu,
     {
@@ -4939,7 +4939,7 @@ function _Menu({ extended, width, height, MenuListProps, ...otherProps }, ref) {
       height,
       extended,
       MenuListProps: {
-        ...MenuListProps,
+        ...MenuListProps2,
         "data-width": width,
         "data-height": height,
         "data-extended": extended
@@ -6263,6 +6263,249 @@ function _EllipsisWithTooltip({
   );
 }
 const EllipsisWithTooltip = React.forwardRef(_EllipsisWithTooltip);
+const ListContext = React.createContext({});
+const ListItemWrapper = material.styled("div")({
+  pointerEvents: "none",
+  "& > *": {
+    pointerEvents: "auto"
+  }
+});
+function _List({
+  variant = "standard",
+  spacing,
+  dense,
+  virtualized = false,
+  virtualizedItemHeight,
+  virtualizedListHeight = cssUtils.LIST_MAX_SIZE,
+  overscanCount = cssUtils.LIST_OVERSCAN_ITEMS_COUNT,
+  disableGutters = false,
+  disablePadding = false,
+  fixedHeight = true,
+  divider = false,
+  children,
+  ...otherProps
+}, ref) {
+  const isBoxed = variant === "boxed";
+  const defaultSpacing = spacing ?? (isBoxed ? 1 : 0);
+  const contextValue = React.useMemo(
+    () => ({
+      variant,
+      fixedHeight,
+      dense,
+      disableGutters,
+      disablePadding,
+      divider
+    }),
+    [variant, fixedHeight, dense, disableGutters, disablePadding, divider]
+  );
+  const childrenArray = React.useMemo(
+    () => React.Children.toArray(children),
+    [children]
+  );
+  const defaultItemHeight = virtualizedItemHeight ?? (dense || dense === void 0 ? cssUtils.LIST_ITEM_SIZE_DENSE : cssUtils.LIST_ITEM_SIZE_DEFAULT);
+  const listHeight = React.useMemo(() => {
+    const calculatedHeight = childrenArray.length * defaultItemHeight;
+    return Math.min(calculatedHeight, virtualizedListHeight);
+  }, [childrenArray.length, defaultItemHeight, virtualizedListHeight]);
+  if (!virtualized) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      material.List,
+      {
+        ...otherProps,
+        variant,
+        spacing: defaultSpacing,
+        dense,
+        ref,
+        "data-name": "list",
+        "data-variant": variant,
+        "data-spacing": defaultSpacing,
+        "data-virtualized": false,
+        "data-disable-gutters": disableGutters,
+        "data-disable-padding": disablePadding,
+        "data-fixed-height": fixedHeight,
+        "data-divider": divider,
+        children
+      }
+    ) });
+  }
+  const renderItem = ({
+    index,
+    style
+  }) => {
+    const child = childrenArray[index];
+    if (!child) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(ListItemWrapper, { style, "data-name": "virtual-list-item", children: child });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    material.List,
+    {
+      ...otherProps,
+      variant,
+      spacing: defaultSpacing,
+      dense,
+      ref,
+      "data-name": "virtual-list",
+      "data-variant": variant,
+      "data-spacing": defaultSpacing,
+      "data-disable-gutters": disableGutters,
+      "data-disable-padding": disablePadding,
+      "data-fixed-height": fixedHeight,
+      "data-virtualized": virtualized,
+      "data-divider": divider,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactWindow.FixedSizeList,
+        {
+          height: listHeight,
+          width: "100%",
+          itemCount: childrenArray.length,
+          itemSize: defaultItemHeight,
+          overscanCount,
+          children: renderItem
+        }
+      )
+    }
+  ) });
+}
+const List = React.forwardRef(_List);
+List.displayName = "List";
+function _ListItem({
+  variant,
+  dense,
+  disabled,
+  fixedHeight,
+  onClick,
+  disablePadding,
+  disableGutters,
+  divider,
+  ...otherProps
+}, ref) {
+  const listContext = React.useContext(ListContext);
+  const effectiveVariant = variant ?? listContext.variant ?? "standard";
+  const effectiveDense = dense ?? listContext.dense ?? true;
+  const effectiveFixedHeight = fixedHeight ?? listContext.fixedHeight ?? true;
+  const effectiveDisableGutters = disableGutters ?? listContext.disableGutters ?? false;
+  const effectiveDisablePadding = disablePadding ?? listContext.disablePadding ?? false;
+  const effectiveDivider = divider ?? listContext.divider ?? false;
+  if (onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.ListItemButton,
+      {
+        ...otherProps,
+        dense: effectiveDense,
+        disabled,
+        disableGutters: effectiveDisableGutters,
+        divider: effectiveDivider,
+        onClick,
+        ref,
+        "data-name": "list-item-button",
+        "data-variant": effectiveVariant,
+        "data-fixed-height": effectiveFixedHeight,
+        "data-disable-padding": effectiveDisablePadding,
+        "data-disable-gutters": effectiveDisableGutters,
+        "data-divider": effectiveDivider
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.ListItem,
+    {
+      ...otherProps,
+      dense: effectiveDense,
+      disabled,
+      disablePadding: effectiveDisablePadding,
+      disableGutters: effectiveDisableGutters,
+      divider: effectiveDivider,
+      "aria-disabled": disabled,
+      ref,
+      "data-name": "list-item",
+      "data-variant": effectiveVariant,
+      "data-fixed-height": effectiveFixedHeight,
+      "data-disable-padding": effectiveDisablePadding,
+      "data-disable-gutters": effectiveDisableGutters,
+      "data-divider": effectiveDivider
+    }
+  );
+}
+const ListItem = React.forwardRef(_ListItem);
+ListItem.displayName = "ListItem";
+function _ListItemButton({
+  variant,
+  dense,
+  disabled,
+  fixedHeight,
+  onClick,
+  disablePadding,
+  disableGutters,
+  divider,
+  ...otherProps
+}, ref) {
+  const listContext = React.useContext(ListContext);
+  const effectiveVariant = variant ?? listContext.variant ?? "standard";
+  const effectiveDense = dense ?? listContext.dense ?? true;
+  const effectiveFixedHeight = fixedHeight ?? listContext.fixedHeight ?? true;
+  const effectiveDisableGutters = disableGutters ?? listContext.disableGutters ?? false;
+  const effectiveDisablePadding = disablePadding ?? listContext.disablePadding ?? false;
+  const effectiveDivider = divider ?? listContext.divider ?? false;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.ListItemButton,
+    {
+      ...otherProps,
+      dense: effectiveDense,
+      disabled,
+      disableGutters: effectiveDisableGutters,
+      divider: effectiveDivider,
+      onClick,
+      ref,
+      "data-name": "list-item-button",
+      "data-variant": effectiveVariant,
+      "data-fixed-height": effectiveFixedHeight,
+      "data-disable-padding": effectiveDisablePadding,
+      "data-disable-gutters": effectiveDisableGutters,
+      "data-divider": effectiveDivider
+    }
+  );
+}
+const ListItemButton = React.forwardRef(_ListItemButton);
+ListItemButton.displayName = "ListItemButton";
+function ListItemRightContent({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Stack,
+    {
+      direction: "row",
+      alignItems: "center",
+      gap: 1.5,
+      ...props,
+      "data-name": "list-item-right-content",
+      children
+    }
+  );
+}
+function _ListSubheader({
+  backgroundColor = "paper",
+  dense,
+  disableGutters,
+  ...otherProps
+}, ref) {
+  const listContext = React.useContext(ListContext);
+  const effectiveDense = dense ?? listContext.dense ?? true;
+  const effectiveDisableGutters = disableGutters ?? listContext.disableGutters ?? false;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.ListSubheader,
+    {
+      ...otherProps,
+      ref,
+      disableGutters: effectiveDisableGutters,
+      "data-name": "list-subheader",
+      "data-background-color": backgroundColor,
+      "data-dense": effectiveDense,
+      "data-disable-gutters": effectiveDisableGutters
+    }
+  );
+}
+const ListSubheader = React.forwardRef(_ListSubheader);
 exports.IconButton = cssUtils.IconButton;
 exports.TablePaginationActions = cssUtils.TablePaginationActions;
 exports.Typography = cssUtils.Typography;
@@ -6308,6 +6551,11 @@ exports.EmptyState = EmptyState;
 exports.FilterDropdown = FilterDropdown;
 exports.FilterDropdownMenuItem = FilterDropdownMenuItem;
 exports.LabelWithIndicator = LabelWithIndicator;
+exports.List = List;
+exports.ListItem = ListItem;
+exports.ListItemButton = ListItemButton;
+exports.ListItemRightContent = ListItemRightContent;
+exports.ListSubheader = ListSubheader;
 exports.Loader = Loader;
 exports.Menu = Menu;
 exports.MenuItemFilter = MenuItemFilter;

package/dist/components/index.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { forwardRef, useState, useRef, useEffect, useMemo, createElement, Fragment as Fragment$1, useCallback, useImperativeHandle } from "react";
-import { styled, Box, Button as Button$1, CircularProgress as CircularProgress$1, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, Select, FormControl, InputLabel, FormHelperText, Link, Checkbox, IconButton as IconButton$1, ListItemText, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Stack, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, alpha, useTheme, AppBar as AppBar$1, Toolbar, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Snackbar as Snackbar$1, Portal, Fade } from "@mui/material";
+import React, { forwardRef, useState, useRef, useEffect, useMemo, createElement, Fragment as Fragment$1, useCallback, useImperativeHandle, createContext, useContext } from "react";
+import { styled, Box, Button as Button$1, CircularProgress as CircularProgress$1, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, Select, FormControl, InputLabel, FormHelperText, Link, Checkbox, IconButton as IconButton$1, ListItemText, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Stack, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, alpha, useTheme, AppBar as AppBar$1, Toolbar, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Snackbar as Snackbar$1, Portal, Fade, List as List$2, ListItemButton as ListItemButton$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1 } from "@mui/material";
 import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutline, ErrorOutline, CloseOutlined, Check, TodayOutlined } from "@mui/icons-material";
-import { u as useTranslationWithFallback, T as Typography, c as ICON_SIZE_SMALL, i as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, h as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, j as useImperativeIntl, b as ICON_SIZE_MEDIUM, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles } from "../css-utils-CjUBRJVK.js";
-import { a } from "../css-utils-CjUBRJVK.js";
-import { S as ScreenReaderOnly, A as Alert$1 } from "../Alert-BZPM5zpX.js";
-import { L } from "../Alert-BZPM5zpX.js";
+import { u as useTranslationWithFallback, T as Typography, c as ICON_SIZE_SMALL, l as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, i as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, m as useImperativeIntl, b as ICON_SIZE_MEDIUM, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles, j as LIST_MAX_SIZE, k as LIST_OVERSCAN_ITEMS_COUNT, L as LIST_ITEM_SIZE_DENSE, h as LIST_ITEM_SIZE_DEFAULT } from "../css-utils-D9LibDjo.js";
+import { a } from "../css-utils-D9LibDjo.js";
+import { S as ScreenReaderOnly, A as Alert$1 } from "../Alert-BEzNSCqV.js";
+import { L } from "../Alert-BEzNSCqV.js";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
-import { M as MenuItem$1, a as getThemeColor } from "../MenuItem-Cx5lTXXm.js";
+import { M as MenuItem$1, a as getThemeColor } from "../MenuItem-D4v_HV1x.js";
 import "cartocolor";
 import { FixedSizeList } from "react-window";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -1479,7 +1479,7 @@ function useMultipleAutocomplete({
     getCounterRenderTags
   };
 }
-const List = styled("ul")(
+const List$1 = styled("ul")(
   ({ theme, hasFilters }) => ({
     ...!hasFilters && {
       paddingTop: `${theme.spacing(1)} !important`
@@ -1606,7 +1606,7 @@ function _AutocompleteList({
     );
   };
   return /* @__PURE__ */ jsxs(
-    List,
+    List$1,
     {
       ref,
       ...otherProps,
@@ -4928,7 +4928,7 @@ const StyledMenu = styled(Menu$2, {
     }
   }
 }));
-function _Menu({ extended, width, height, MenuListProps, ...otherProps }, ref) {
+function _Menu({ extended, width, height, MenuListProps: MenuListProps2, ...otherProps }, ref) {
   return /* @__PURE__ */ jsx(
     StyledMenu,
     {
@@ -4939,7 +4939,7 @@ function _Menu({ extended, width, height, MenuListProps, ...otherProps }, ref) {
       height,
       extended,
       MenuListProps: {
-        ...MenuListProps,
+        ...MenuListProps2,
         "data-width": width,
         "data-height": height,
         "data-extended": extended
@@ -6263,6 +6263,249 @@ function _EllipsisWithTooltip({
   );
 }
 const EllipsisWithTooltip = forwardRef(_EllipsisWithTooltip);
+const ListContext = createContext({});
+const ListItemWrapper = styled("div")({
+  pointerEvents: "none",
+  "& > *": {
+    pointerEvents: "auto"
+  }
+});
+function _List({
+  variant = "standard",
+  spacing,
+  dense,
+  virtualized = false,
+  virtualizedItemHeight,
+  virtualizedListHeight = LIST_MAX_SIZE,
+  overscanCount = LIST_OVERSCAN_ITEMS_COUNT,
+  disableGutters = false,
+  disablePadding = false,
+  fixedHeight = true,
+  divider = false,
+  children,
+  ...otherProps
+}, ref) {
+  const isBoxed = variant === "boxed";
+  const defaultSpacing = spacing ?? (isBoxed ? 1 : 0);
+  const contextValue = useMemo(
+    () => ({
+      variant,
+      fixedHeight,
+      dense,
+      disableGutters,
+      disablePadding,
+      divider
+    }),
+    [variant, fixedHeight, dense, disableGutters, disablePadding, divider]
+  );
+  const childrenArray = useMemo(
+    () => React.Children.toArray(children),
+    [children]
+  );
+  const defaultItemHeight = virtualizedItemHeight ?? (dense || dense === void 0 ? LIST_ITEM_SIZE_DENSE : LIST_ITEM_SIZE_DEFAULT);
+  const listHeight = useMemo(() => {
+    const calculatedHeight = childrenArray.length * defaultItemHeight;
+    return Math.min(calculatedHeight, virtualizedListHeight);
+  }, [childrenArray.length, defaultItemHeight, virtualizedListHeight]);
+  if (!virtualized) {
+    return /* @__PURE__ */ jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      List$2,
+      {
+        ...otherProps,
+        variant,
+        spacing: defaultSpacing,
+        dense,
+        ref,
+        "data-name": "list",
+        "data-variant": variant,
+        "data-spacing": defaultSpacing,
+        "data-virtualized": false,
+        "data-disable-gutters": disableGutters,
+        "data-disable-padding": disablePadding,
+        "data-fixed-height": fixedHeight,
+        "data-divider": divider,
+        children
+      }
+    ) });
+  }
+  const renderItem = ({
+    index,
+    style
+  }) => {
+    const child = childrenArray[index];
+    if (!child) return null;
+    return /* @__PURE__ */ jsx(ListItemWrapper, { style, "data-name": "virtual-list-item", children: child });
+  };
+  return /* @__PURE__ */ jsx(ListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    List$2,
+    {
+      ...otherProps,
+      variant,
+      spacing: defaultSpacing,
+      dense,
+      ref,
+      "data-name": "virtual-list",
+      "data-variant": variant,
+      "data-spacing": defaultSpacing,
+      "data-disable-gutters": disableGutters,
+      "data-disable-padding": disablePadding,
+      "data-fixed-height": fixedHeight,
+      "data-virtualized": virtualized,
+      "data-divider": divider,
+      children: /* @__PURE__ */ jsx(
+        FixedSizeList,
+        {
+          height: listHeight,
+          width: "100%",
+          itemCount: childrenArray.length,
+          itemSize: defaultItemHeight,
+          overscanCount,
+          children: renderItem
+        }
+      )
+    }
+  ) });
+}
+const List = forwardRef(_List);
+List.displayName = "List";
+function _ListItem({
+  variant,
+  dense,
+  disabled,
+  fixedHeight,
+  onClick,
+  disablePadding,
+  disableGutters,
+  divider,
+  ...otherProps
+}, ref) {
+  const listContext = useContext(ListContext);
+  const effectiveVariant = variant ?? listContext.variant ?? "standard";
+  const effectiveDense = dense ?? listContext.dense ?? true;
+  const effectiveFixedHeight = fixedHeight ?? listContext.fixedHeight ?? true;
+  const effectiveDisableGutters = disableGutters ?? listContext.disableGutters ?? false;
+  const effectiveDisablePadding = disablePadding ?? listContext.disablePadding ?? false;
+  const effectiveDivider = divider ?? listContext.divider ?? false;
+  if (onClick) {
+    return /* @__PURE__ */ jsx(
+      ListItemButton$1,
+      {
+        ...otherProps,
+        dense: effectiveDense,
+        disabled,
+        disableGutters: effectiveDisableGutters,
+        divider: effectiveDivider,
+        onClick,
+        ref,
+        "data-name": "list-item-button",
+        "data-variant": effectiveVariant,
+        "data-fixed-height": effectiveFixedHeight,
+        "data-disable-padding": effectiveDisablePadding,
+        "data-disable-gutters": effectiveDisableGutters,
+        "data-divider": effectiveDivider
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ListItem$1,
+    {
+      ...otherProps,
+      dense: effectiveDense,
+      disabled,
+      disablePadding: effectiveDisablePadding,
+      disableGutters: effectiveDisableGutters,
+      divider: effectiveDivider,
+      "aria-disabled": disabled,
+      ref,
+      "data-name": "list-item",
+      "data-variant": effectiveVariant,
+      "data-fixed-height": effectiveFixedHeight,
+      "data-disable-padding": effectiveDisablePadding,
+      "data-disable-gutters": effectiveDisableGutters,
+      "data-divider": effectiveDivider
+    }
+  );
+}
+const ListItem = forwardRef(_ListItem);
+ListItem.displayName = "ListItem";
+function _ListItemButton({
+  variant,
+  dense,
+  disabled,
+  fixedHeight,
+  onClick,
+  disablePadding,
+  disableGutters,
+  divider,
+  ...otherProps
+}, ref) {
+  const listContext = useContext(ListContext);
+  const effectiveVariant = variant ?? listContext.variant ?? "standard";
+  const effectiveDense = dense ?? listContext.dense ?? true;
+  const effectiveFixedHeight = fixedHeight ?? listContext.fixedHeight ?? true;
+  const effectiveDisableGutters = disableGutters ?? listContext.disableGutters ?? false;
+  const effectiveDisablePadding = disablePadding ?? listContext.disablePadding ?? false;
+  const effectiveDivider = divider ?? listContext.divider ?? false;
+  return /* @__PURE__ */ jsx(
+    ListItemButton$1,
+    {
+      ...otherProps,
+      dense: effectiveDense,
+      disabled,
+      disableGutters: effectiveDisableGutters,
+      divider: effectiveDivider,
+      onClick,
+      ref,
+      "data-name": "list-item-button",
+      "data-variant": effectiveVariant,
+      "data-fixed-height": effectiveFixedHeight,
+      "data-disable-padding": effectiveDisablePadding,
+      "data-disable-gutters": effectiveDisableGutters,
+      "data-divider": effectiveDivider
+    }
+  );
+}
+const ListItemButton = forwardRef(_ListItemButton);
+ListItemButton.displayName = "ListItemButton";
+function ListItemRightContent({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      direction: "row",
+      alignItems: "center",
+      gap: 1.5,
+      ...props,
+      "data-name": "list-item-right-content",
+      children
+    }
+  );
+}
+function _ListSubheader({
+  backgroundColor = "paper",
+  dense,
+  disableGutters,
+  ...otherProps
+}, ref) {
+  const listContext = useContext(ListContext);
+  const effectiveDense = dense ?? listContext.dense ?? true;
+  const effectiveDisableGutters = disableGutters ?? listContext.disableGutters ?? false;
+  return /* @__PURE__ */ jsx(
+    ListSubheader$1,
+    {
+      ...otherProps,
+      ref,
+      disableGutters: effectiveDisableGutters,
+      "data-name": "list-subheader",
+      "data-background-color": backgroundColor,
+      "data-dense": effectiveDense,
+      "data-disable-gutters": effectiveDisableGutters
+    }
+  );
+}
+const ListSubheader = forwardRef(_ListSubheader);
 export {
   AUTOCOMPLETE_GROUP_HEADER_PROPERTY,
   AccordionGroup,
@@ -6305,6 +6548,11 @@ export {
   IconButton,
   LabelWithIndicator,
   L as Link,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemRightContent,
+  ListSubheader,
   Loader,
   Menu,
   MenuItem$1 as MenuItem,