@moderneinc/design-system-components 6.1.0-alpha.f3c8fa → 7.0.0-next.4ff15f

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { GridColumnsPanelProps, GridDensity as GridDensity$1, DataGridProProps, GridSlots } from '@mui/x-data-grid-pro';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentPropsWithoutRef, ComponentType, FunctionComponent } from 'react';
-import { GridDensity, GridFilterPanel, GridRenderCellParams, ToolbarProps } from '@mui/x-data-grid';
+import { GridDensity, GridFilterPanel, GridSlotsComponent, GridSlotProps, GridRenderCellParams, ToolbarProps } from '@mui/x-data-grid';
 import { AlertProps } from '@mui/material/Alert';
 import Chip, { ChipProps } from '@mui/material/Chip';
 import { LinkProps } from '@mui/material/Link';
@@ -11,15 +12,11 @@ import { ToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
 import { SvgIconProps } from '@mui/material/SvgIcon';
 import { CardProps } from '@mui/material/Card';
 import { CheckboxProps } from '@mui/material/Checkbox';
-import { GridDensity as GridDensity$1, DataGridProProps, GridSlots, GridColumnsPanelProps } from '@mui/x-data-grid-pro';
 import { SxProps, Theme, Breakpoint } from '@mui/material/styles';
 import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
 import { DateRangePickerProps } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { DateRange } from '@mui/x-date-pickers-pro/models';
-import * as _mui_system from '@mui/system';
-import * as _mui_material from '@mui/material';
-import { BoxProps as BoxProps$1 } from '@mui/material';
 import { DividerProps } from '@mui/material/Divider';
 import { PaperProps } from '@mui/material/Paper';
 import { AvatarProps } from '@mui/material/Avatar';
@@ -31,9 +28,12 @@ import { DialogProps } from '@mui/material/Dialog';
 import { BoxProps } from '@mui/material/Box';
 import { LinearProgressProps } from '@mui/material/LinearProgress';
 import { RadioProps } from '@mui/material/Radio';
+import * as _mui_material from '@mui/material';
+import { BoxProps as BoxProps$1 } from '@mui/material';
 import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
 import { SkeletonProps } from '@mui/material/Skeleton';
 import { TableProps } from '@mui/material/Table';
+import * as _mui_system from '@mui/system';
 import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
 import { TabProps } from '@mui/material/Tab';
 import Button from '@mui/material/Button';
@@ -42,6 +42,37 @@ import { TooltipProps } from '@mui/material/Tooltip';
 import { TreeItemProps } from '@mui/x-tree-view/TreeItem';
 import { RichTreeViewProProps } from '@mui/x-tree-view-pro/RichTreeViewPro';
 
+/**
+ * ModDataGridColumnsPanel - Custom columns panel for ModDataGrid matching Figma design
+ *
+ * A styled columns panel that integrates with MUI DataGrid's column visibility system.
+ * Features:
+ * - Search input with Lucide icon (matches ModQuickFilter)
+ * - Checkbox list with design system styling (12px checkboxes)
+ * - Show/Hide all toggle
+ * - Reset button
+ *
+ * Design Tokens Used:
+ * - surfaces.white - Background color
+ * - surfaces.listHover - Item hover background (#f9fafb)
+ * - input.background - Search input background
+ * - border.input - Search input border
+ * - buttons.primary.default - Search input focus border
+ * - typography.body - Column label text
+ * - border.primary - Divider color
+ */
+interface ModDataGridColumnsPanelProps extends GridColumnsPanelProps {
+    /**
+     * If true, shows the search input field
+     * @default false
+     */
+    showSearch?: boolean;
+}
+declare const ModDataGridColumnsPanel: {
+    ({ showSearch, sx: _sx, theme: _theme, ...props }: ModDataGridColumnsPanelProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface ModFooterProps {
     /**
      * Footer variant
@@ -197,7 +228,7 @@ interface ModActivityHeaderProps {
  *   field: 'activity',
  *   headerName: '',
  *   width: 34,
- *   renderHeader: () => <ModActivityHeader size="condensed" color="commitJob" />,
+ *   renderHeader: () => <ModActivityHeader size="compact" color="commitJob" />,
  *   renderCell: (params) => (
  *     <ModActivityIndicatorCell
  *       event={params.row.eventType}
@@ -910,6 +941,13 @@ declare const ModDataGridCellContent: {
     ({ children, ...props }: ModDataGridCellContentProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
+/**
+ * Row height configuration for DataGrid size variants (from Figma specs)
+ * - compact: 42px
+ * - standard: 48px
+ * - comfortable: 56px
+ */
+declare const modRowHeights: Record<GridDensity, number>;
 /**
  * StatusBadgeCell - Ready-to-use cell component for status badges
  *
@@ -996,142 +1034,64 @@ declare namespace ModDataGridColumnsButton {
 }
 
 /**
- * ModDataGridColumnsPanel - Custom columns panel for ModDataGrid matching Figma design
- *
- * A styled columns panel that integrates with MUI DataGrid's column visibility system.
- * Features:
- * - Search input with Lucide icon (matches ModQuickFilter)
- * - Checkbox list with design system styling (12px checkboxes)
- * - Show/Hide all toggle
- * - Reset button
- *
- * Design Tokens Used:
- * - surfaces.white - Background color
- * - surfaces.listHover - Item hover background (#f9fafb)
- * - input.background - Search input background
- * - border.input - Search input border
- * - buttons.primary.default - Search input focus border
- * - typography.body - Column label text
- * - border.primary - Divider color
+ * Icon components for DataGrid filter panel slots
+ * These must be passed to the DataGrid's slots prop
  */
-interface ModDataGridColumnsPanelProps extends GridColumnsPanelProps {
-    /**
-     * If true, shows the search input field
-     * @default false
-     */
-    showSearch?: boolean;
-}
-declare const ModDataGridColumnsPanel: {
-    ({ showSearch, sx: _sx, theme: _theme, ...props }: ModDataGridColumnsPanelProps): react_jsx_runtime.JSX.Element;
+declare const ModDataGridFilterPanelAddIcon: {
+    (): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
-
-type ModMenuItemOwnProps = {
-    /**
-     * Optional icon to display on the left side
-     * Note: Cannot be directly mapped from Figma (ReactNode)
-     */
-    icon?: ReactNode;
-    /**
-     * Optional keyboard shortcut to display on the right side
-     * @example "⌘+P" or "Ctrl+K"
-     * Note: Cannot be directly mapped from Figma (ReactNode/string)
-     */
-    shortcut?: string;
-    /**
-     * Optional secondary text to display next to the primary label
-     * @example "@username" or supporting text
-     * Note: Cannot be directly mapped from Figma (ReactNode/string)
-     */
-    secondaryText?: string;
-    /**
-     * URL to navigate to. When provided, the menu item renders as an anchor
-     * element (via MUI ButtonBase) so users can middle-click or right-click
-     * to open in a new tab. For client-side routing, also pass
-     * `component={NextLink}` (or your router's link component).
-     */
-    href?: string;
-    /**
-     * Menu item content (text label)
-     */
-    children?: ReactNode;
+declare const ModDataGridFilterPanelDeleteIcon: {
+    (): react_jsx_runtime.JSX.Element;
+    displayName: string;
 };
-type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof ModMenuItemOwnProps> & {
-    component?: C;
+declare const ModDataGridFilterPanelRemoveAllIcon: {
+    (): react_jsx_runtime.JSX.Element;
+    displayName: string;
 };
+type ModDataGridSelectProps = GridSlotProps['baseSelect'];
 /**
- * ModMenuItem - Menu item component based on MUI MenuItem
+ * ModDataGridSelect - ModSelect adapted to the DataGrid `baseSelect` slot contract.
+ *
+ * Kept structurally parallel to MUI's own `BaseSelect` (`@mui/x-data-grid/material`) so the two
+ * can be diffed on upgrade.
  *
  * @example
  * ```tsx
- * // With icon and shortcut
- * <ModMenuItem icon={<UserIcon />} shortcut="⌘+P">
- *   View profile
- * </ModMenuItem>
- *
- * // With secondary text (user list pattern from Figma node 4305:41844)
- * <ModMenuItem secondaryText="@phoenix">Phoenix Baker</ModMenuItem>
- * <ModMenuItem secondaryText="@olivia">Olivia Rhye</ModMenuItem>
- *
- * // Disabled state
- * <ModMenuItem disabled>Disabled item</ModMenuItem>
- *
- * // As an anchor — middle-click/right-click open in a new tab
- * <ModMenuItem href="/api-explorer">API explorer</ModMenuItem>
- *
- * // External link
- * <ModMenuItem href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
- *   Documentation
- * </ModMenuItem>
- *
- * // Client-side routing (Next.js)
- * <ModMenuItem component={NextLink} href="/api-explorer">API explorer</ModMenuItem>
+ * <ModDataGrid rows={rows} columns={columns} slots={{ baseSelect: ModDataGridSelect }} />
  * ```
  */
-declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, ...rest }: ModMenuItemProps<C>): react_jsx_runtime.JSX.Element;
-declare namespace ModMenuItem {
-    var displayName: string;
-}
-
-type ModSelectProps = SelectProps;
+declare const ModDataGridSelect: GridSlotsComponent['baseSelect'];
 /**
- * ModSelect - Select component with design system styling
+ * ModDataGridFilterPanel - MUI GridFilterPanel with design system styling and Lucide icons
  *
- * A styled version of MUI's Select that uses design system tokens, Lucide ChevronDown icon,
- * and ModMenu/ModMenuItem for the dropdown list.
+ * A styled version of MUI's GridFilterPanel that applies design system tokens.
+ * The per-row delete icon uses Lucide Trash2 internally.
+ *
+ * For footer button icons ("Add filter" and "Remove all"), you must also pass the icon components
+ * to the DataGrid's slots prop.
  *
  * @example
  * ```tsx
- * import { ModSelect, ModSelectOption } from '@moderneinc/design-system-components'
- *
- * <ModSelect value={value} onChange={handleChange}>
- *   <ModSelectOption value="option1">Option 1</ModSelectOption>
- *   <ModSelectOption value="option2">Option 2</ModSelectOption>
- * </ModSelect>
+ * import {
+ *   ModDataGridFilterPanel,
+ *   FilterPanelAddIcon,
+ *   FilterPanelDeleteIcon,
+ *   FilterPanelRemoveAllIcon
+ * } from '@moderneinc/design-system-components'
+ *
+ * <DataGridPro
+ *   rows={rows}
+ *   columns={columns}
+ *   slots={{
+ *     filterPanel: ModDataGridFilterPanel,
+ *     filterPanelAddIcon: FilterPanelAddIcon,
+ *     filterPanelDeleteIcon: FilterPanelDeleteIcon,
+ *     filterPanelRemoveAllIcon: FilterPanelRemoveAllIcon,
+ *   }}
+ * />
  * ```
  */
-declare const ModSelect: {
-    (props: ModSelectProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-/**
- * Icon components for DataGrid filter panel slots
- * These must be passed to the DataGrid's slots prop
- */
-declare const ModDataGridFilterPanelAddIcon: {
-    (): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const ModDataGridFilterPanelDeleteIcon: {
-    (): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const ModDataGridFilterPanelRemoveAllIcon: {
-    (): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
 declare const ModDataGridFilterPanel: {
     (props: React__default.ComponentProps<typeof GridFilterPanel>): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -1273,16 +1233,6 @@ declare const ModDatePicker: {
     displayName: string;
 };
 
-/**
- * ModDatePickerListItem
- */
-declare const ModDatePickerListItem: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-
-/**
- * ModDatePickerMenu
- */
-declare const ModDatePickerMenu: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-
 interface ModDividerProps extends DividerProps {
 }
 /**
@@ -1536,6 +1486,26 @@ declare const ModIconButton: {
     displayName: string;
 };
 
+type IconWrapperSize = 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | 128 | 160 | 192;
+interface ModIconWrapperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /**
+     * The size of the icon wrapper in pixels
+     * @default 20
+     */
+    size?: IconWrapperSize;
+    /**
+     * Icon element to render inside the wrapper
+     */
+    children?: ReactNode;
+}
+/**
+ * ModIconWrapper - Flex-centered container that sizes icons
+ */
+declare const ModIconWrapper: {
+    ({ size, children, ...props }: ModIconWrapperProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface ModInfiniteScrollGridProps extends Omit<ModDataGridProps, 'slots'> {
     /**
      * Callback when load more is triggered - either by scrolling or clicking button
@@ -1672,6 +1642,14 @@ interface ModListItemProps extends Omit<ListItemButtonProps, 'children' | 'size'
      * @default false
      */
     isLink?: boolean;
+    /**
+     * URL to navigate to. MUI's ListItemButton promotes its root to an anchor on its
+     * own when `href` is set, so `component="a"` is not required.
+     *
+     * Declared explicitly: `ListItemButtonProps` only exposes anchor attributes
+     * through MUI's polymorphic generic, which this component does not thread through.
+     */
+    href?: string;
     /**
      * Trailing element (optional, e.g., chevron icon for navigation)
      * Renders at the end of the list item, typically used for navigation indicators.
@@ -1824,6 +1802,96 @@ declare const ModMenu: {
     displayName: string;
 };
 
+type ModMenuItemOwnProps = {
+    /**
+     * Optional icon to display on the left side
+     * Note: Cannot be directly mapped from Figma (ReactNode)
+     */
+    icon?: ReactNode;
+    /**
+     * Optional keyboard shortcut to display on the right side
+     * @example "⌘+P" or "Ctrl+K"
+     * Note: Cannot be directly mapped from Figma (ReactNode/string)
+     */
+    shortcut?: string;
+    /**
+     * Optional secondary text to display next to the primary label
+     * @example "@username" or supporting text
+     * Note: Cannot be directly mapped from Figma (ReactNode/string)
+     */
+    secondaryText?: string;
+    /**
+     * URL to navigate to. Supplying `href` roots the item at an anchor instead of the `li`
+     * MUI defaults to, so it navigates and offers the browser's open-in-new-tab on middle-
+     * or right-click. Pass `component` explicitly (e.g. a router link such as Next.js
+     * `Link`) to override that default.
+     *
+     * The anchor then sits directly inside `MenuList`'s `ul`. `role="menuitem"` keeps that
+     * correct for ARIA, but `ul`'s content model permits only `li`, so HTML validators and
+     * axe-core's `list` rule flag it. This is the pattern MUI's own docs use for link menu
+     * items, and what `ModListItem` already produces inside `List`.
+     */
+    href?: string;
+    /**
+     * Anchor `target`, e.g. `_blank`. Only meaningful with `href` — without one the item
+     * roots at `li` and this renders as an inert attribute, the same trap as #722.
+     */
+    target?: string;
+    /**
+     * Anchor `rel`, e.g. `noopener noreferrer`. Only meaningful with `href` — without one
+     * the item roots at `li` and this renders as an inert attribute.
+     */
+    rel?: string;
+    /**
+     * Menu item content (text label)
+     */
+    children?: ReactNode;
+};
+type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof ModMenuItemOwnProps> & {
+    /**
+     * Root element or component. Naming one bypasses the `href` → anchor default, so pass
+     * a link component (`'a'`, Next.js `Link`, …) if the item still has to navigate:
+     * `component="div"` with an `href` renders an inert attribute. `component="button"` is
+     * the exception — ButtonBase promotes a `button` root to an anchor itself.
+     *
+     * @default 'li', or 'a' when `href` is set
+     */
+    component?: C;
+};
+/**
+ * ModMenuItem - Menu item component based on MUI MenuItem
+ *
+ * @example
+ * ```tsx
+ * // With icon and shortcut
+ * <ModMenuItem icon={<UserIcon />} shortcut="⌘+P">
+ *   View profile
+ * </ModMenuItem>
+ *
+ * // With secondary text (user list pattern from Figma node 4305:41844)
+ * <ModMenuItem secondaryText="@phoenix">Phoenix Baker</ModMenuItem>
+ * <ModMenuItem secondaryText="@olivia">Olivia Rhye</ModMenuItem>
+ *
+ * // Disabled state
+ * <ModMenuItem disabled>Disabled item</ModMenuItem>
+ *
+ * // As an anchor — `href` alone is enough
+ * <ModMenuItem href="/api-explorer">API explorer</ModMenuItem>
+ *
+ * // External link
+ * <ModMenuItem href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
+ *   Documentation
+ * </ModMenuItem>
+ *
+ * // Client-side routing (Next.js) — an explicit `component` wins over the anchor default
+ * <ModMenuItem component={NextLink} href="/api-explorer">API explorer</ModMenuItem>
+ * ```
+ */
+declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, component, href, ...rest }: ModMenuItemProps<C>): react_jsx_runtime.JSX.Element;
+declare namespace ModMenuItem {
+    var displayName: string;
+}
+
 interface ModActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
     api?: GridRenderCellParams['api'];
     children: ReactNode;
@@ -2472,11 +2540,6 @@ declare const ModRadio: {
     displayName: string;
 };
 
-/**
- * ModRadioButtonWithText
- */
-declare const ModRadioButtonWithText: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-
 interface ModRipplingDotProps extends BoxProps$1 {
 }
 /**
@@ -2505,6 +2568,28 @@ declare const ModSearchChip: {
     displayName: string;
 };
 
+type ModSelectProps = SelectProps;
+/**
+ * ModSelect - Select component with design system styling
+ *
+ * A styled version of MUI's Select that uses design system tokens, Lucide ChevronDown icon,
+ * and ModMenu/ModMenuItem for the dropdown list.
+ *
+ * @example
+ * ```tsx
+ * import { ModSelect, ModSelectOption } from '@moderneinc/design-system-components'
+ *
+ * <ModSelect value={value} onChange={handleChange}>
+ *   <ModSelectOption value="option1">Option 1</ModSelectOption>
+ *   <ModSelectOption value="option2">Option 2</ModSelectOption>
+ * </ModSelect>
+ * ```
+ */
+declare const ModSelect: {
+    (props: ModSelectProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface ModSelectFieldOption {
     value: string | number;
     label: ReactNode;
@@ -2738,7 +2823,7 @@ declare const ModTabPanel: {
 /**
  * ModTabs - Tabs container component based on MUI Tabs
  */
-declare const ModTabs: StyledComponent<_mui_material.TabsOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "children" | "sx" | "className" | "aria-label" | "aria-labelledby" | "onChange" | "classes" | "action" | "value" | "variant" | "orientation" | "slots" | "slotProps" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "scrollButtons" | "selectionFollowsFocus" | "textColor" | "visibleScrollbar"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
+declare const ModTabs: StyledComponent<_mui_material.TabsOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "classes" | "slots" | "slotProps" | "className" | "action" | "children" | "sx" | "value" | "aria-label" | "aria-labelledby" | "onChange" | "orientation" | "variant" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "scrollButtons" | "selectionFollowsFocus" | "textColor" | "visibleScrollbar"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
 interface ModTabProps extends Omit<TabProps, 'label'> {
     /**
      * The label for the tab
@@ -2939,11 +3024,6 @@ declare const ModToggleButtonGroup: {
     displayName: string;
 };
 
-/**
- * ModToggleButtonWithText
- */
-declare const ModToggleButtonWithText: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-
 interface ModToolbarProps extends ToolbarProps {
     /**
      * Toolbar content (typically ModQuickFilter, ModButton, ModToggle, etc.)
@@ -3013,9 +3093,8 @@ interface ModTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
      */
     title: ReactNode;
     /**
-     * Optional supporting description text. When provided, shows a larger tooltip
-     * with a heading + body hierarchy: title (13px semibold) above a muted
-     * description (12px medium).
+     * Optional supporting description text. When provided, shows the title
+     * (semibold) above a muted description (regular weight).
      * @default undefined
      */
     description?: string;
@@ -3031,23 +3110,13 @@ interface ModTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
  * - Dark: surfaces.white, typography.body
  * - Brand: surfaces.snackbarBrand, typography.linkWhite (both fixed across modes)
  * - Shadow: neutralMedium (0px 8px 15px 0px rgba(31,41,55,0.1))
- * - Typography: fontSize.xs (12), fontSize.caption (13), fontWeight.medium (500), fontWeight.semiBold (600)
+ * - Typography: semanticTypography.tooltip (12px/1.5 line-height), fontWeight.semiBold (600) for the title
  */
 declare const ModTooltip: {
     ({ variant, title, description, children, arrow, placement, ...props }: ModTooltipProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-/**
- * ModTopNav
- */
-declare const ModTopNav: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-
-/**
- * ModTourModal
- */
-declare const ModTourModal: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-
 /**
  * Extended item data that ModTreeItem can read from the items array.
  * Consumers pass these via the `items` prop on ModTreeView.
@@ -3084,7 +3153,7 @@ declare const ModTreeView: {
     displayName: string;
 };
 
-declare const StyledToggleButton: StyledComponent<_mui_material.ToggleButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, keyof _mui_material.ToggleButtonOwnProps> & Omit<_mui_material.ButtonBaseOwnProps, "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | keyof _mui_material.ToggleButtonOwnProps> & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "color" | "size" | "children" | "sx" | "className" | "tabIndex" | "onChange" | "onClick" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "disableFocusRipple" | "value" | "fullWidth" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
+declare const StyledToggleButton: StyledComponent<_mui_material.ToggleButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, keyof _mui_material.ToggleButtonOwnProps> & Omit<_mui_material.ButtonBaseOwnProps, "type" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | keyof _mui_material.ToggleButtonOwnProps> & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "color" | "disabled" | "size" | "classes" | "type" | "className" | "action" | "centerRipple" | "children" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "value" | "onChange" | "onClick" | "disableFocusRipple" | "fullWidth" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
 interface ModTypologyControlProps extends Omit<ToggleButtonGroupProps, 'orientation'> {
 }
 /**
@@ -3109,7 +3178,7 @@ declare const ModTypologyControl: {
  * Produces a double-ring effect: a white inner gap (via outline-offset) and a colored outer ring.
  */
 declare const focusRingStyles: {
-    readonly outline: "2px solid var(--mod-border-focus)";
+    readonly outline: "2px solid var(--mod-color-border-focus)";
     readonly outlineOffset: "2px";
 };
 
@@ -3132,16 +3201,20 @@ declare const ModVibratingDot: FunctionComponent<ModVibratingDotProps>;
 
 
 
-// Module augmentation for MUI DataGrid slot props
+// MUI types `slotProps.<slot>` against its own component, so a custom slot's extra
+// props (e.g. the columns panel's `showSearch`) are rejected even when that slot is
+// installed. MUI's `*PropsOverrides` interfaces are the mechanism for declaring them.
 declare module '@mui/x-data-grid' {
   interface FooterPropsOverrides extends ModFooterProps {}
+  interface ColumnsPanelPropsOverrides extends ModDataGridColumnsPanelProps {}
 }
 
 declare module '@mui/x-data-grid-pro' {
   interface FooterPropsOverrides extends ModFooterProps {}
+  interface ColumnsPanelPropsOverrides extends ModDataGridColumnsPanelProps {}
 }
 
 declare const version: string
 
-export { ActivityScene, CIRCLE_RADIUS, ModActionsCell, ModActivityHeader, ModActivityIndicatorCell, ModAlert, ModAvatarCell, ModBadge, ModBanner, ModBreadcrumbLink, ModBreadcrumbs, ModButton, ModButtonTab, ModButtonTabGroup, ModCanceledIcon, ModCard, ModCheckbox, ModCheckboxWithText, ModCodeSnippet, ModDataGrid, ModDataGridCellContent, ModDataGridColumnsButton, ModDataGridColumnsPanel, ModDataGridFilterPanel, ModDataGridFilterPanelAddIcon, ModDataGridFilterPanelDeleteIcon, ModDataGridFilterPanelRemoveAllIcon, ModDataGridFiltersButton, ModDataGridHeaderLabel, ModSelect as ModDataGridSelect, ModDatePicker, ModDatePickerListItem, ModDatePickerMenu, ModDivider, ModDot, ModDownloadToast, ModSelect as ModDropdown, ModMenu as ModDropdownMenu, ModMenuItem as ModDropdownMenuItem, ModMenuItem as ModDropdownOption, ModFilledCanceled, ModFilledError, ModFilledInfo, ModFilledNeutral, ModFilledQueued, ModFilledSuccess, ModFilledWarning, ModFilterChip, ModFooter, ModGeneralAvatar, ModIconButton, ModIconCell, ModInfiniteScrollGrid, ModInputField, ModListItem, ModListItemButton, ModLoadingSpinner, ModLogoCell, ModMenu, ModMenuItem, ModModal, ModModalContent, ModModalFooter, ModModalHeader, ModMultiBadgesCell, ModNavigationAvatar, ModNavigationItem, ModPageContent, ModPaginatedGrid, ModProgressCell, ModProgressbar, ModQuickFilter, ModRadio, ModRadioButtonWithText, ModRipplingDot, ModSearchChip, ModSelect, ModSelectField, ModMenuItem as ModSelectOption, ModSideNav, ModSkeleton, ModStatusBadgeCell, ModStatusCell, ModTab, ModTabPanel, ModTable, ModTabs, ModTag, ModToast, ModToastButton, ModToggle, ModToggleButton, ModToggleButtonGroup, ModToggleButtonWithText, ModToolbar, ModTooltip, ModTopNav, ModTourModal, ModTreeItem, ModTreeView, StyledToggleButton as ModTypologyButton, ModTypologyControl, ModUserAvatarCell, ModVibratingDot, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, getDataGridRowStyles, version };
-export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, ModActionsCellProps, ModActivityHeaderProps, ModActivityIndicatorCellProps, ModAlertProps, ModAvatarCellProps, ModBadgeProps, ModBannerProps, ModBreadcrumbLinkProps, ModBreadcrumbsProps, ModButtonProps, ModButtonTabGroupProps, ModButtonTabProps, ModCardLargeProps, ModCardProps, ModCardSize, ModCardSmallProps, ModCheckboxProps, ModCheckboxWithTextProps, ModCodeSnippetProps, ModDataGridCellContentProps, ModDataGridHeaderLabelProps, ModDataGridProps, ModDatePickerProps, ModDividerProps, ModDotProps, ModDownloadToastProps, ModMenuItemProps as ModDropdownMenuItemProps, ModMenuProps as ModDropdownMenuProps, ModSelectProps as ModDropdownProps, ModFilledStatusIconProps, ModFilterChipProps, ModFooterProps, ModGeneralAvatarProps, ModIconButtonProps, ModIconCellProps, ModInfiniteScrollGridProps, ModInputFieldProps, ModListItemButtonProps, ModListItemProps, ModLoadingSpinnerProps, ModLogoCellProps, ModMenuItemProps, ModMenuProps, ModModalContentProps, ModModalFooterProps, ModModalHeaderProps, ModModalProps, ModMultiBadgesCellProps, ModNavigationAvatarProps, ModNavigationItemProps, ModPageContentProps, ModPaginatedGridProps, ModProgressCellProps, ModProgressbarProps, ModQuickFilterProps, ModRadioProps, ModRipplingDotProps, ModSearchChipProps, ModSelectFieldChangeEvent, ModSelectFieldOption, ModSelectFieldProps, ModSelectProps, ModSideNavProps, ModSkeletonProps, ModStatusBadgeCellProps, ModStatusCellProps, ModStatusCellVariant, ModTabPanelProps, ModTabProps, ModTableColumn, ModTableProps, ModTagProps, ModToastProps, ModToggleButtonGroupProps, ModToggleButtonProps, ModToggleProps, ModToolbarProps, ModTooltipProps, ModTreeItemData, ModTreeItemProps, ModTreeViewProps, ModTypologyControlProps, ModUserAvatarCellProps, ModVibratingDotProps };
+export { ActivityScene, CIRCLE_RADIUS, ModActionsCell, ModActivityHeader, ModActivityIndicatorCell, ModAlert, ModAvatarCell, ModBadge, ModBanner, ModBreadcrumbLink, ModBreadcrumbs, ModButton, ModButtonTab, ModButtonTabGroup, ModCanceledIcon, ModCard, ModCheckbox, ModCheckboxWithText, ModCodeSnippet, ModDataGrid, ModDataGridCellContent, ModDataGridColumnsButton, ModDataGridColumnsPanel, ModDataGridFilterPanel, ModDataGridFilterPanelAddIcon, ModDataGridFilterPanelDeleteIcon, ModDataGridFilterPanelRemoveAllIcon, ModDataGridFiltersButton, ModDataGridHeaderLabel, ModDataGridSelect, ModDatePicker, ModDivider, ModDot, ModDownloadToast, ModSelect as ModDropdown, ModMenu as ModDropdownMenu, ModMenuItem as ModDropdownMenuItem, ModMenuItem as ModDropdownOption, ModFilledCanceled, ModFilledError, ModFilledInfo, ModFilledNeutral, ModFilledQueued, ModFilledSuccess, ModFilledWarning, ModFilterChip, ModFooter, ModGeneralAvatar, ModIconButton, ModIconCell, ModIconWrapper, ModInfiniteScrollGrid, ModInputField, ModListItem, ModListItemButton, ModLoadingSpinner, ModLogoCell, ModMenu, ModMenuItem, ModModal, ModModalContent, ModModalFooter, ModModalHeader, ModMultiBadgesCell, ModNavigationAvatar, ModNavigationItem, ModPageContent, ModPaginatedGrid, ModProgressCell, ModProgressbar, ModQuickFilter, ModRadio, ModRipplingDot, ModSearchChip, ModSelect, ModSelectField, ModMenuItem as ModSelectOption, ModSideNav, ModSkeleton, ModStatusBadgeCell, ModStatusCell, ModTab, ModTabPanel, ModTable, ModTabs, ModTag, ModToast, ModToastButton, ModToggle, ModToggleButton, ModToggleButtonGroup, ModToolbar, ModTooltip, ModTreeItem, ModTreeView, StyledToggleButton as ModTypologyButton, ModTypologyControl, ModUserAvatarCell, ModVibratingDot, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, getDataGridRowStyles, modRowHeights, version };
+export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, IconWrapperSize, ModActionsCellProps, ModActivityHeaderProps, ModActivityIndicatorCellProps, ModAlertProps, ModAvatarCellProps, ModBadgeProps, ModBannerProps, ModBreadcrumbLinkProps, ModBreadcrumbsProps, ModButtonProps, ModButtonTabGroupProps, ModButtonTabProps, ModCardLargeProps, ModCardProps, ModCardSize, ModCardSmallProps, ModCheckboxProps, ModCheckboxWithTextProps, ModCodeSnippetProps, ModDataGridCellContentProps, ModDataGridHeaderLabelProps, ModDataGridProps, ModDataGridSelectProps, ModDatePickerProps, ModDividerProps, ModDotProps, ModDownloadToastProps, ModMenuItemProps as ModDropdownMenuItemProps, ModMenuProps as ModDropdownMenuProps, ModSelectProps as ModDropdownProps, ModFilledStatusIconProps, ModFilterChipProps, ModFooterProps, ModGeneralAvatarProps, ModIconButtonProps, ModIconCellProps, ModIconWrapperProps, ModInfiniteScrollGridProps, ModInputFieldProps, ModListItemButtonProps, ModListItemProps, ModLoadingSpinnerProps, ModLogoCellProps, ModMenuItemProps, ModMenuProps, ModModalContentProps, ModModalFooterProps, ModModalHeaderProps, ModModalProps, ModMultiBadgesCellProps, ModNavigationAvatarProps, ModNavigationItemProps, ModPageContentProps, ModPaginatedGridProps, ModProgressCellProps, ModProgressbarProps, ModQuickFilterProps, ModRadioProps, ModRipplingDotProps, ModSearchChipProps, ModSelectFieldChangeEvent, ModSelectFieldOption, ModSelectFieldProps, ModSelectProps, ModSideNavProps, ModSkeletonProps, ModStatusBadgeCellProps, ModStatusCellProps, ModStatusCellVariant, ModTabPanelProps, ModTabProps, ModTableColumn, ModTableProps, ModTagProps, ModToastProps, ModToggleButtonGroupProps, ModToggleButtonProps, ModToggleProps, ModToolbarProps, ModTooltipProps, ModTreeItemData, ModTreeItemProps, ModTreeViewProps, ModTypologyControlProps, ModUserAvatarCellProps, ModVibratingDotProps };