@moderneinc/design-system-components 6.0.0-next.02da4a

package/dist/index.d.ts

@@ -0,0 +1,3147 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+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 { AlertProps } from '@mui/material/Alert';
+import Chip, { ChipProps } from '@mui/material/Chip';
+import { LinkProps } from '@mui/material/Link';
+import ButtonBase, { ButtonBaseProps } from '@mui/material/ButtonBase';
+import { ToggleButtonProps } from '@mui/material/ToggleButton';
+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';
+import { InputBaseProps } from '@mui/material/InputBase';
+import { ListItemButtonProps } from '@mui/material/ListItemButton';
+import { MenuProps } from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+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 { SelectProps, SelectChangeEvent } from '@mui/material/Select';
+import { SkeletonProps } from '@mui/material/Skeleton';
+import { TableProps } from '@mui/material/Table';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
+import { TabProps } from '@mui/material/Tab';
+import Button from '@mui/material/Button';
+import { SwitchProps } from '@mui/material/Switch';
+import { TooltipProps } from '@mui/material/Tooltip';
+import { TreeItemProps } from '@mui/x-tree-view/TreeItem';
+import { RichTreeViewProProps } from '@mui/x-tree-view-pro/RichTreeViewPro';
+
+interface ModFooterProps {
+    /**
+     * Footer variant
+     * - "loading": Shows result count with loading indicator and "Load more" button
+     * - "pagination": Shows pagination controls with page range and navigation buttons
+     * @default "pagination"
+     */
+    variant?: 'loading' | 'pagination';
+    /**
+     * Whether to show the drop shadow on top of footer (for scrolling effect)
+     * @default false
+     */
+    showShadow?: boolean;
+    /**
+     * Whether to show the loading indicator (only for "loading" variant)
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Total number of results (for "loading" variant)
+     */
+    resultCount?: number;
+    /**
+     * Callback when "Load more" is clicked (for "loading" variant)
+     */
+    onLoadMore?: () => void;
+    /**
+     * Whether there are more results to load (for "loading" variant)
+     * @default true
+     */
+    hasMore?: boolean;
+    /**
+     * Custom pagination info text (for "pagination" variant)
+     * If not provided, will attempt to use DataGrid's pagination state
+     * @example "1-80 of 120"
+     */
+    paginationInfo?: string;
+    /**
+     * Callback when previous page button is clicked (for "pagination" variant)
+     */
+    onPreviousPage?: () => void;
+    /**
+     * Callback when next page button is clicked (for "pagination" variant)
+     */
+    onNextPage?: () => void;
+    /**
+     * Whether the previous page button is disabled (for "pagination" variant)
+     * If not provided, will attempt to use DataGrid's pagination state
+     */
+    hasPreviousPage?: boolean;
+    /**
+     * Whether the next page button is disabled (for "pagination" variant)
+     * If not provided, will attempt to use DataGrid's pagination state
+     */
+    hasNextPage?: boolean;
+    /**
+     * Whether to show the selected row count on the left side (pagination variant)
+     * @default true
+     */
+    showSelected?: boolean;
+    /**
+     * Custom content to render in the footer
+     */
+    children?: ReactNode;
+}
+/**
+ * ModFooter - Footer component for data grids
+ *
+ * Provides two variants:
+ * - "loading": Shows result count with loading indicator and "Load more" button for infinite scroll
+ * - "pagination": Shows pagination controls with page range and navigation buttons
+ *
+ * @example
+ * // Loading variant with load more
+ * <ModFooter
+ *   variant="loading"
+ *   loading={isLoading}
+ *   resultCount={40}
+ *   hasMore={true}
+ *   onLoadMore={() => loadMore()}
+ * />
+ *
+ * @example
+ * // Pagination variant
+ * <ModFooter
+ *   variant="pagination"
+ *   paginationInfo="1-80 of 120"
+ *   hasPreviousPage={false}
+ *   hasNextPage={true}
+ *   onPreviousPage={() => goToPrevious()}
+ *   onNextPage={() => goToNext()}
+ * />
+ *
+ * @example
+ * // Used with DataGrid (automatically reads pagination state)
+ * <DataGrid
+ *   rows={rows}
+ *   columns={columns}
+ *   slots={{ footer: ModFooter }}
+ *   slotProps={{
+ *     footer: {
+ *       variant: 'pagination',
+ *     },
+ *   }}
+ * />
+ */
+declare const ModFooter: {
+    ({ variant, showShadow, loading, resultCount, onLoadMore, hasMore, paginationInfo, onPreviousPage, onNextPage, hasPreviousPage, hasNextPage, showSelected, children, }: ModFooterProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Size variant for ActivityHeader (matches DataGrid size variants)
+ * Alias for MUI's GridDensity type
+ */
+type ActivityHeaderSize = GridDensity;
+/**
+ * Activity color type for ModActivityHeader
+ */
+type ActivityColor = 'commitJob' | 'recipeRun' | 'visualization';
+/**
+ * Props for ModActivityHeader component
+ */
+interface ModActivityHeaderProps {
+    /**
+     * Size variant matching DataGrid row heights
+     * @default 'compact'
+     */
+    size?: GridDensity;
+    /**
+     * Activity type color to display
+     * @default 'commitJob'
+     */
+    color?: ActivityColor;
+}
+/**
+ * ModActivityHeader - Header cell showing activity type legend for DataGrid
+ *
+ * A header cell component that displays a visual legend of activity event types
+ * using colored dots. Designed to be used as the column header for activity
+ * timeline columns in DataGrid.
+ *
+ * **Design Tokens:**
+ * - `semanticColors.activity.commitJob` - Blue dot for commit job events (#2F42FF)
+ * - `semanticColors.activity.recipeRun` - Purple dot for recipe run events (#992FB9)
+ * - `#27AA88` - Teal dot for visualization events (hardcoded - needs design token fix)
+ * - `semanticColors.border.secondary` - Bottom border (#e5e7eb)
+ * - `spacing.spacing_1_1_2` - Dot size (12px)
+ *
+ * @example
+ * // In DataGrid column definition
+ * {
+ *   field: 'activity',
+ *   headerName: '',
+ *   width: 34,
+ *   renderHeader: () => <ModActivityHeader size="condensed" color="commitJob" />,
+ *   renderCell: (params) => (
+ *     <ModActivityIndicatorCell
+ *       event={params.row.eventType}
+ *       scene={params.row.scene}
+ *     />
+ *   )
+ * }
+ */
+declare const ModActivityHeader: {
+    ({ size, color, }: ModActivityHeaderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const CIRCLE_RADIUS = 6;
+/**
+ * Event type for activity indicator
+ */
+type ActivityEvent = 'commit-job' | 'recipe-run' | 'visualization' | 'none';
+/**
+ * Scene types based on moderne-ui ActivityRowScenes
+ */
+declare enum ActivityScene {
+    BLANK = "blank",
+    CIRCLE = "circle",
+    CIRCLE_WITH_RIGHT_PATH = "circle-with-right-path",
+    CIRCLE_WITH_TOP_PATH = "circle-with-top-path",
+    CIRCLE_WITH_TOP_AND_BOTTOM_PATH = "circle-with-top-and-bottom-path",
+    PATH_CORNER = "path-corner",
+    PATH_CORNER_WITH_HORIZONTAL = "path-corner-with-horizontal",
+    PATH_VERTICAL = "path-vertical",
+    PATH_HORIZONTAL = "path-horizontal"
+}
+/**
+ * Props for ModActivityIndicatorCell component
+ */
+interface ModActivityIndicatorCellProps {
+    /**
+     * Type of activity event (determines color for circle/dot)
+     */
+    event?: ActivityEvent;
+    /**
+     * Secondary event type for path color (e.g., when a recipe-run connects to a commit-job)
+     * If not specified, paths use the primary event color
+     */
+    secondaryEvent?: ActivityEvent;
+    /**
+     * Scene to render (combines shapes and paths)
+     */
+    scene?: ActivityScene;
+    /**
+     * Whether to show the event dot
+     * @default true
+     */
+    showDot?: boolean;
+}
+/**
+ * ModActivityIndicatorCell - Timeline activity indicator for DataGrid cells
+ *
+ * Based on moderne-ui's RecentActivitySceneSelector with solid filled circles.
+ *
+ * @example
+ * // In DataGrid column definition
+ * {
+ *   field: 'activity',
+ *   headerName: '',
+ *   width: 35,
+ *   renderCell: (params) => (
+ *     <ModActivityIndicatorCell
+ *       event="commit-job"
+ *       scene={ActivityScene.CIRCLE_WITH_TOP_AND_BOTTOM_PATH}
+ *     />
+ *   )
+ * }
+ */
+declare const ModActivityIndicatorCell: {
+    ({ event, secondaryEvent, scene, showDot, }: ModActivityIndicatorCellProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+type Intent$2 = 'success' | 'error' | 'warning' | 'offline' | 'info';
+type AlertType = 'outlined' | 'filled';
+type AlertSize = 'default' | 'compact';
+interface ModAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color'> {
+    /**
+     * The intent/purpose of the alert
+     * @default "success"
+     */
+    intent?: Intent$2;
+    /**
+     * Visual type: outlined (light bg) or filled (solid bg)
+     * @default "outlined"
+     */
+    type?: AlertType;
+    /**
+     * Vertical density. `default` is page-level (64px fixed height,
+     * supports title + description). `compact` is inline-panel use
+     * (auto height, 40px min, single-line optimized for terse messages).
+     * @default "default"
+     */
+    size?: AlertSize;
+    /**
+     * The title text displayed in the alert
+     */
+    title: string;
+    /**
+     * Optional supporting description text
+     */
+    description?: string;
+    /**
+     * Custom icon to display (defaults to intent-based icon)
+     */
+    icon?: ReactNode;
+    /**
+     * Optional action element (typically a button) displayed on the right
+     */
+    action?: ReactNode;
+    /**
+     * Optional content rendered below the title inside the alert container.
+     * Use for rich content like stack traces or code blocks. When present,
+     * the alert expands to auto height and top-aligns its icon and action.
+     */
+    children?: ReactNode;
+}
+/**
+ * ModAlert - Alert component for displaying contextual status messages
+ */
+declare const ModAlert: {
+    ({ intent, type, size, title, description, icon, action, children, ...props }: ModAlertProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type BadgeSize = 'small' | 'medium';
+type BadgeVariant = 'filled' | 'outlined';
+type BadgeShape = 'square' | 'rounded';
+interface ModBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
+    /**
+     * The color/state of the badge. Ignored when `variant="outlined"`.
+     * @default "default"
+     */
+    color?: 'default' | 'error' | 'warning' | 'success' | 'info';
+    /**
+     * Visual density of the badge. `small` is 20px tall, `medium` is 24px tall.
+     * @default "medium"
+     */
+    size?: BadgeSize;
+    /**
+     * Visual treatment. `filled` uses a per-color tinted background;
+     * `outlined` uses a transparent background with a neutral secondary border.
+     * @default "filled"
+     */
+    variant?: BadgeVariant;
+    /**
+     * Corner treatment. `square` = borderRadius.xS, `rounded` = borderRadius.full.
+     * Deliberately defaults to `square` even though Figma's Shape default differs —
+     * this keeps existing consumers rendering unchanged. Don't "fix" it.
+     * @default "square"
+     */
+    shape?: BadgeShape;
+}
+/**
+ * ModBadge - Status badge component based on MUI Chip
+ *
+ * `deleteIcon` still works via ChipProps — MUI renders it only when `onDelete`
+ * is also set.
+ */
+declare const ModBadge: {
+    ({ size, variant, shape, ...props }: ModBadgeProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type Intent$1 = 'info' | 'success' | 'error' | 'warning' | 'neutral';
+type BannerType = 'outlined' | 'filled';
+interface ModBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
+    /**
+     * The intent/purpose of the banner
+     * @default "info"
+     */
+    intent?: Intent$1;
+    /**
+     * Visual type: outlined (light bg) or filled (solid bg)
+     * @default "outlined"
+     */
+    type?: BannerType;
+    /**
+     * The message text to display
+     */
+    message: string;
+    /**
+     * Horizontal alignment of the message content
+     * @default "left"
+     */
+    messagePosition?: 'left' | 'center';
+    /**
+     * Optional link text to display after the message
+     */
+    linkText?: string;
+    /**
+     * Whether to show the close button
+     * @default false
+     */
+    showClose?: boolean;
+    /**
+     * Custom icon to display (optional)
+     * If not provided, no icon will be shown
+     */
+    icon?: ReactNode;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Callback when link text is clicked
+     */
+    onLinkClick?: () => void;
+}
+declare const ModBanner: {
+    ({ intent, type, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: ModBannerProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+/**
+ * ModBreadcrumbs - Navigation breadcrumb component
+ *
+ * @see https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4563-122872
+ */
+interface ModBreadcrumbsProps {
+    /** Breadcrumb items as Link elements */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+interface ModBreadcrumbLinkProps extends Omit<LinkProps, 'color'> {
+    /** Marks this breadcrumb as the current page (sets aria-current="page") */
+    current?: boolean;
+    /** Link content */
+    children: ReactNode;
+    /** Custom link component for client-side navigation (e.g., Next.js Link) */
+    component?: ElementType;
+}
+/**
+ * ModBreadcrumbLink - Individual breadcrumb link
+ *
+ * Use this component as children of ModBreadcrumbs to create breadcrumb items.
+ * Set `current` prop on the last item to indicate the current page.
+ *
+ * @example
+ * ```tsx
+ * <ModBreadcrumbs>
+ *   <ModBreadcrumbLink href="/settings">Settings</ModBreadcrumbLink>
+ *   <ModBreadcrumbLink href="/team">Team</ModBreadcrumbLink>
+ *   <ModBreadcrumbLink current>Team Details</ModBreadcrumbLink>
+ * </ModBreadcrumbs>
+ * ```
+ */
+declare function ModBreadcrumbLink({ current, children, component, ...props }: ModBreadcrumbLinkProps): react_jsx_runtime.JSX.Element;
+/**
+ * ModBreadcrumbs - Navigation breadcrumb component
+ *
+ * Provides hierarchical navigation with styled links and chevron separators.
+ * Use ModBreadcrumbLink components as children to create breadcrumb items.
+ *
+ * @example
+ * ```tsx
+ * <ModBreadcrumbs>
+ *   <ModBreadcrumbLink href="/settings">Settings</ModBreadcrumbLink>
+ *   <ModBreadcrumbLink href="/team">Team</ModBreadcrumbLink>
+ *   <ModBreadcrumbLink current>Team Details</ModBreadcrumbLink>
+ * </ModBreadcrumbs>
+ * ```
+ */
+declare function ModBreadcrumbs({ children, className }: ModBreadcrumbsProps): react_jsx_runtime.JSX.Element;
+
+declare module '@mui/material/ButtonBase' {
+    interface ButtonBasePropsVariantOverrides {
+        primary: true;
+        secondary: true;
+        destructive: true;
+        tertiary: true;
+    }
+}
+type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'tertiary';
+type ButtonSize = 'small' | 'medium';
+type ModButtonOwnProps = {
+    /**
+     * The visual variant of the button
+     * @default "primary"
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size of the button
+     * @default "medium"
+     */
+    size?: ButtonSize;
+    /**
+     * Show loading spinner instead of children
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Button content
+     */
+    children?: ReactNode;
+    /**
+     * URL to link to. When provided, the button renders as a link element.
+     */
+    href?: string;
+    /**
+     * Icon placed before the button label
+     */
+    startIcon?: ReactNode;
+    /**
+     * Icon placed after the button label
+     */
+    endIcon?: ReactNode;
+};
+type ModButtonProps<C extends ElementType = typeof ButtonBase> = ModButtonOwnProps & Omit<React__default.ComponentPropsWithoutRef<C>, keyof ModButtonOwnProps> & {
+    component?: C;
+};
+/**
+ * ModButton - Text button component based on MUI ButtonBase
+ */
+declare function ModButton<C extends ElementType = typeof ButtonBase>({ variant, size, loading, children, disabled, startIcon, endIcon, ...rest }: ModButtonProps<C>): react_jsx_runtime.JSX.Element;
+declare namespace ModButton {
+    var displayName: string;
+}
+
+interface ModButtonTabProps extends Omit<ToggleButtonProps, 'color'> {
+    /**
+     * Whether the tab is currently selected.
+     * When used inside ModButtonGroup, this is computed automatically from the group's value.
+     * @default false
+     */
+    selected?: boolean;
+}
+/**
+ * ModButtonTab - A tab-style toggle button for use within ModButtonGroup
+ */
+declare const ModButtonTab: {
+    ({ children, ...props }: ModButtonTabProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ButtonTabGroupSize = 'small' | 'medium';
+interface ModButtonTabGroupProps extends Omit<ToggleButtonGroupProps, 'orientation' | 'color' | 'fullWidth'> {
+    /**
+     * The size of the button tab group
+     * @default "medium"
+     */
+    size?: ButtonTabGroupSize;
+    /**
+     * Whether only one button can be selected at a time
+     * @default true
+     */
+    exclusive?: boolean;
+}
+/**
+ * ModButtonTabGroup - Button tab group container
+ *
+ * Usage:
+ * ```tsx
+ * <ModButtonTabGroup value={selected} onChange={(_, val) => setSelected(val)} size="medium">
+ *   <ModButtonTab value="tab1">Tab 1</ModButtonTab>
+ *   <ModButtonTab value="tab2">Tab 2</ModButtonTab>
+ *   <ModButtonTab value="tab3">Tab 3</ModButtonTab>
+ * </ModButtonTabGroup>
+ * ```
+ */
+declare const ModButtonTabGroup: {
+    ({ size, exclusive, ...props }: ModButtonTabGroupProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * ModCanceledIcon - Outlined circle struck through by a horizontal line.
+ *
+ * Marks a CANCELED state. Color comes entirely from `currentColor` (stroke plus
+ * a 10% fill tint); set it via the `color`/`sx` prop or a parent.
+ */
+declare const ModCanceledIcon: {
+    (props: SvgIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ModCardSize = 'small' | 'large';
+interface ModCardSmallProps extends Omit<CardProps, 'children' | 'title'> {
+    size: 'small';
+    logo: ReactNode;
+    recipeCount: string;
+    title: ReactNode | string;
+    description: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+interface ModCardLargeProps extends Omit<CardProps, 'children' | 'title'> {
+    size: 'large';
+    disabled?: boolean;
+    cardTheme?: 'light' | 'dark';
+    showIcon?: boolean;
+    showGel?: boolean;
+    showButtons?: boolean;
+    icon?: ReactNode;
+    gel?: ReactNode;
+    title?: ReactNode;
+    children?: ReactNode;
+    actions?: ReactNode;
+    onClick?: () => void;
+}
+type ModCardProps = ModCardSmallProps | ModCardLargeProps;
+declare const ModCard: {
+    (props: ModCardProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ComponentSelector {
+    __emotion_styles: any;
+}
+
+/**
+ * @desc Utility type for getting props type of React component.
+ * It takes `defaultProps` into an account - making props with defaults optional.
+ */
+type PropsOf<C extends keyof ReactJSX.IntrinsicElements | React.JSXElementConstructor<any>> = ReactJSX.LibraryManagedAttributes<C, React.ComponentProps<C>>;
+
+type IsPreReact19$1 = 2 extends Parameters<React.FunctionComponent<any>>['length'] ? true : false;
+/** @ts-ignore */
+type ReactJSXElement = true extends IsPreReact19$1 ? JSX.Element : React.JSX.Element;
+/** @ts-ignore */
+type ReactJSXElementClass = true extends IsPreReact19$1 ? JSX.ElementClass : React.JSX.ElementClass;
+/** @ts-ignore */
+type ReactJSXElementAttributesProperty = true extends IsPreReact19$1 ? JSX.ElementAttributesProperty : React.JSX.ElementAttributesProperty;
+/** @ts-ignore */
+type ReactJSXElementChildrenAttribute = true extends IsPreReact19$1 ? JSX.ElementChildrenAttribute : React.JSX.ElementChildrenAttribute;
+/** @ts-ignore */
+type ReactJSXLibraryManagedAttributes<C, P> = true extends IsPreReact19$1 ? JSX.LibraryManagedAttributes<C, P> : React.JSX.LibraryManagedAttributes<C, P>;
+/** @ts-ignore */
+type ReactJSXIntrinsicAttributes = true extends IsPreReact19$1 ? JSX.IntrinsicAttributes : React.JSX.IntrinsicAttributes;
+/** @ts-ignore */
+type ReactJSXIntrinsicClassAttributes<T> = true extends IsPreReact19$1 ? JSX.IntrinsicClassAttributes<T> : React.JSX.IntrinsicClassAttributes<T>;
+/** @ts-ignore */
+type ReactJSXIntrinsicElements$1 = true extends IsPreReact19$1 ? JSX.IntrinsicElements : React.JSX.IntrinsicElements;
+/** @ts-ignore */
+type ReactJSXElementType = true extends IsPreReact19$1 ? string | React.JSXElementConstructor<any> : React.JSX.ElementType;
+declare namespace ReactJSX {
+    type ElementType = ReactJSXElementType;
+    interface Element extends ReactJSXElement {
+    }
+    interface ElementClass extends ReactJSXElementClass {
+    }
+    interface ElementAttributesProperty extends ReactJSXElementAttributesProperty {
+    }
+    interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {
+    }
+    type LibraryManagedAttributes<C, P> = ReactJSXLibraryManagedAttributes<C, P>;
+    interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {
+    }
+    interface IntrinsicClassAttributes<T> extends ReactJSXIntrinsicClassAttributes<T> {
+    }
+    type IntrinsicElements = ReactJSXIntrinsicElements$1;
+}
+
+type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length'] ? true : false;
+/** @ts-ignore */
+type ReactJSXIntrinsicElements = true extends IsPreReact19 ? JSX.IntrinsicElements : React.JSX.IntrinsicElements;
+
+/**
+ * @typeparam ComponentProps  Props which will be included when withComponent is called
+ * @typeparam SpecificComponentProps  Props which will *not* be included when withComponent is called
+ */
+interface StyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}> extends React.FC<ComponentProps & SpecificComponentProps & JSXProps>, ComponentSelector {
+    withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(component: C): StyledComponent<ComponentProps & PropsOf<C>, {}, {
+        ref?: React.Ref<InstanceType<C>>;
+    }>;
+    withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(component: C): StyledComponent<ComponentProps & PropsOf<C>>;
+    withComponent<Tag extends keyof ReactJSXIntrinsicElements>(tag: Tag): StyledComponent<ComponentProps, ReactJSXIntrinsicElements[Tag]>;
+}
+
+/**
+ * ModCheckbox uses Lucide icons (square / square-check / square-minus): a rounded
+ * outline drawn in `currentColor`, with the check/minus mark sharing that stroke —
+ * so a single per-state `color` (set in StyledCheckbox) drives every variant.
+ *
+ * Checkbox sizes: xs=12x12, small=16x16, medium=20x20
+ */
+type CheckboxSize = 'xs' | 'small' | 'medium';
+declare module '@mui/material/Checkbox' {
+    interface CheckboxPropsSizeOverrides {
+        xs: true;
+        small: true;
+        medium: true;
+    }
+}
+interface ModCheckboxProps extends Omit<CheckboxProps, 'size'> {
+    /**
+     * The size of the checkbox
+     * @default "medium"
+     */
+    size?: CheckboxSize;
+    /**
+     * The label text displayed next to the checkbox
+     */
+    label?: ReactNode;
+    /**
+     * The helper text displayed below the label
+     */
+    helperText?: ReactNode;
+}
+/**
+ * ModCheckbox - Checkbox component based on MUI Checkbox
+ *
+ * @example
+ * // Basic checkbox
+ * <ModCheckbox />
+ *
+ * @example
+ * // With label
+ * <ModCheckbox label="Remember me" />
+ *
+ * @example
+ * // With label and helper text
+ * <ModCheckbox label="Remember me" helperText="Save my login details for next time." />
+ *
+ * @example
+ * // Small size
+ * <ModCheckbox size="small" label="Remember me" />
+ *
+ * @example
+ * // Extra small size
+ * <ModCheckbox size="xs" label="Remember me" />
+ *
+ * @example
+ * // Controlled
+ * <ModCheckbox checked={isChecked} onChange={handleChange} label="Remember me" />
+ *
+ * @example
+ * // Indeterminate state (for "select all" checkboxes)
+ * <ModCheckbox indeterminate={true} label="Select all" />
+ */
+declare const ModCheckbox: {
+    ({ size, label, helperText, disabled, icon, checkedIcon, indeterminateIcon, className, ...props }: ModCheckboxProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type CheckboxWithTextSize = 'small' | 'medium';
+/**
+ * Props for the ModCheckboxWithText component
+ */
+interface ModCheckboxWithTextProps extends Omit<ModCheckboxProps, 'size'> {
+    /**
+     * The size of the checkbox with text
+     * @default "small"
+     */
+    size?: CheckboxWithTextSize;
+    /**
+     * The label text displayed next to the checkbox
+     */
+    label?: ReactNode;
+    /**
+     * The helper text displayed below the label
+     */
+    helperText?: ReactNode;
+}
+/**
+ * ModCheckboxWithText - Checkbox with label and supporting text
+ *
+ * Thin wrapper around ModCheckbox that maps the Figma "Checkbox with text"
+ * component to the existing ModCheckbox with label + helperText.
+ */
+declare const ModCheckboxWithText: {
+    ({ size, ...props }: ModCheckboxWithTextProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare module '@mui/material/ButtonBase' {
+    interface ButtonBasePropsVariantOverrides {
+        outlined: true;
+        filled: true;
+    }
+}
+type CodeSnippetVariant = 'outlined' | 'filled';
+type CodeSnippetSize = 'xs' | 'small' | 'large' | 'inline';
+interface ModCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
+    /**
+     * The visual variant of the code snippet
+     * @default "outlined"
+     */
+    variant?: CodeSnippetVariant;
+    /**
+     * The size of the code snippet
+     * @default "small"
+     */
+    size?: CodeSnippetSize;
+    /**
+     * Icon to display at the end (copy button position)
+     */
+    endIcon?: ReactNode;
+    /**
+     * Code snippet content to display
+     */
+    children: ReactNode;
+}
+/**
+ * ModCodeSnippet - Inline code snippet component based on MUI ButtonBase
+ */
+declare const ModCodeSnippet: {
+    ({ variant, size, endIcon, children, ...props }: ModCodeSnippetProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type DataGridSize = GridDensity$1;
+interface ModDataGridProps extends Omit<DataGridProProps, 'slots'> {
+    /**
+     * Custom toolbar component to render above the grid
+     * When provided, automatically enables the toolbar slot
+     */
+    toolbar?: ReactNode;
+    /**
+     * Custom slots (merged with design system defaults)
+     */
+    slots?: Partial<GridSlots>;
+}
+/**
+ * ModDataGrid - Responsive base DataGrid component with design system styling
+ *
+ * This is the base component for all design system DataGrid variants. It provides:
+ * - Responsive viewport-based height calculation
+ * - Dynamic row heights (getRowHeight='auto') for text wrapping
+ * - design system styling (colors, typography, spacing)
+ * - Custom sort icons and filter panels
+ *
+ * For specific use cases, see:
+ * - ModInfiniteScrollGrid: Infinite scroll with load-more button
+ * - ModPaginatedGrid: Standard pagination with page numbers
+ *
+ * Features:
+ * - Auto-calculated height from viewport (calc(100vh - (offset + autoHeightOffset)))
+ * - Three size variants: compact, standard, comfortable (affects header height)
+ * - Always uses dynamic row heights (matching moderne-ui ResponsiveDataGrid)
+ * - Resize event handling
+ * - Footer offset support
+ *
+ * Design tokens used:
+ * - Colors: semanticColors.border.primary, semanticColors.surfaces.dataGrid.*, semanticColors.surfaces.white (panel Paper)
+ * - Typography: typography.fontFamily.body, typography.fontSize.sm
+ * - Spacing: spacing.spacing_*
+ *
+ * @example
+ * // Basic usage with responsive height
+ * <ModDataGrid
+ *   rows={rows}
+ *   columns={columns}
+ * />
+ *
+ * @example
+ * // With footer offset
+ * <ModDataGrid
+ *   rows={rows}
+ *   columns={columns}
+ *   footerOffsetSelector="#page-footer"
+ * />
+ */
+declare function ModDataGrid({ autoHeight, toolbar, slots, sx, density, slotProps: userSlotProps, ...props }: ModDataGridProps): react_jsx_runtime.JSX.Element;
+declare namespace ModDataGrid {
+    var displayName: string;
+}
+
+declare const getDataGridHeaderStyles: () => SxProps<Theme>;
+declare const getDataGridRowStyles: () => SxProps<Theme>;
+
+interface ModDataGridCellContentProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/**
+ * ModDataGridCellContent - Layout helper for cells that need flex layout with gap spacing
+ *
+ * Use this for any cell content that needs horizontal flex layout with proper spacing:
+ * - Multiple badges
+ * - Avatar + text
+ * - Action buttons/icons
+ * - Any other horizontal layouts
+ *
+ * @example
+ * // Badges
+ * renderCell: (params) => (
+ *   <ModDataGridCellContent>
+ *     <ModBadge label="Active" color="success" />
+ *     <ModBadge label="New" color="info" />
+ *   </ModDataGridCellContent>
+ * )
+ *
+ * @example
+ * // Avatar with text
+ * renderCell: (params) => (
+ *   <ModDataGridCellContent>
+ *     <ModGeneralAvatar src={params.row.avatarUrl} />
+ *     <span>{params.row.name}</span>
+ *   </ModDataGridCellContent>
+ * )
+ *
+ * @example
+ * // Action buttons
+ * renderCell: () => (
+ *   <ModDataGridCellContent>
+ *     <ModIconButton size="small"><Edit2 /></ModIconButton>
+ *     <ModIconButton size="small"><Delete /></ModIconButton>
+ *   </ModDataGridCellContent>
+ * )
+ */
+declare const ModDataGridCellContent: {
+    ({ children, ...props }: ModDataGridCellContentProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * StatusBadgeCell - Ready-to-use cell component for status badges
+ *
+ * @example
+ * renderCell: (params) => (
+ *   <StatusBadgeCell
+ *     status={params.value}
+ *     colorMap={{
+ *       Active: 'success',
+ *       Pending: 'warning',
+ *       Inactive: 'default'
+ *     }}
+ *   />
+ * )
+ */
+interface ModStatusBadgeCellProps {
+    status: string;
+    colorMap?: Record<string, 'default' | 'error' | 'info' | 'success' | 'warning'>;
+}
+declare const ModStatusBadgeCell: {
+    ({ status, colorMap }: ModStatusBadgeCellProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * ModUserAvatarCell - Ready-to-use cell component for user avatar + name
+ *
+ * @example
+ * renderCell: (params) => (
+ *   <ModUserAvatarCell
+ *     name={params.row.name}
+ *     avatarUrl={params.row.avatarUrl}
+ *   />
+ * )
+ */
+interface ModUserAvatarCellProps {
+    name: string;
+    avatarUrl?: string;
+    size?: 'small' | 'medium';
+}
+declare const ModUserAvatarCell: {
+    ({ name, avatarUrl, size }: ModUserAvatarCellProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * ModMultiBadgesCell - Ready-to-use cell component for multiple badges
+ *
+ * Uses tighter spacing (8px) between badges compared to standard ModDataGridCellContent (16px).
+ *
+ * @example
+ * renderCell: (params) => (
+ *   <ModMultiBadgesCell
+ *     badges={[
+ *       { label: 'Active', color: 'success' },
+ *       { label: 'New', color: 'info' }
+ *     ]}
+ *   />
+ * )
+ */
+interface ModMultiBadgesCellProps {
+    badges: Array<{
+        label: string;
+        color?: 'default' | 'error' | 'info' | 'success' | 'warning';
+    }>;
+}
+declare const ModMultiBadgesCell: {
+    ({ badges }: ModMultiBadgesCellProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * ModDataGridColumnsButton - Button to open the columns panel in DataGrid
+ *
+ * Integrates with MUI DataGrid Pro's ColumnsPanelTrigger to show/hide columns.
+ * Uses ModButton with Lucide Columns3 icon.
+ *
+ * @example
+ * ```tsx
+ * <ModDataGridColumnsButton />
+ * ```
+ */
+declare function ModDataGridColumnsButton(): react_jsx_runtime.JSX.Element;
+declare namespace ModDataGridColumnsButton {
+    var displayName: string;
+}
+
+/**
+ * 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;
+};
+
+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;
+};
+type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof ModMenuItemOwnProps> & {
+    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 — 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>
+ * ```
+ */
+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;
+/**
+ * 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;
+};
+
+/**
+ * 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;
+};
+
+/**
+ * ModDataGridFiltersButton - Button to open the filters panel in DataGrid
+ *
+ * Integrates with MUI DataGrid Pro's FilterPanelTrigger to manage column filters.
+ * Uses ModButton with Lucide ListFilter icon and shows active filter count.
+ * The count badge updates reactively when filters change.
+ *
+ * @example
+ * ```tsx
+ * <ModDataGridFiltersButton />
+ * ```
+ */
+declare function ModDataGridFiltersButton(): react_jsx_runtime.JSX.Element;
+declare namespace ModDataGridFiltersButton {
+    var displayName: string;
+}
+
+/**
+ * Sort icon components for MUI DataGrid slots
+ *
+ * Use these with DataGrid's slots API to replace default sort indicators.
+ */
+declare function SortedDescendingIcon(): react_jsx_runtime.JSX.Element;
+declare function SortedAscendingIcon(): react_jsx_runtime.JSX.Element;
+declare function UnsortedIcon(): react_jsx_runtime.JSX.Element;
+
+interface ModDataGridHeaderLabelProps {
+    /**
+     * The label text to display
+     */
+    children?: ReactNode;
+    /**
+     * Tooltip text to show when hovering the help icon.
+     * If provided, the help icon will be shown automatically.
+     */
+    helpTooltip?: string;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+declare function ModDataGridHeaderLabel({ children, helpTooltip, className, }: ModDataGridHeaderLabelProps): react_jsx_runtime.JSX.Element;
+
+type DatePickerType = 'single' | 'range';
+/**
+ * Props for the ModDatePicker component
+ */
+interface ModDatePickerProps {
+    /**
+     * Type of date picker to render
+     * @default "single"
+     */
+    type?: DatePickerType;
+    /**
+     * Whether the picker is open
+     * When not provided, the picker manages its own open state (uncontrolled mode)
+     */
+    open?: boolean;
+    /**
+     * Label for the input field
+     */
+    label?: string;
+    /**
+     * Current selected date value (for single date picker)
+     */
+    value?: Date | null;
+    /**
+     * Current selected date range value (for range picker)
+     */
+    rangeValue?: DateRange<Date>;
+    /**
+     * Callback fired when date changes (single picker)
+     */
+    onChange?: (date: Date | null) => void;
+    /**
+     * Callback fired when date range changes (range picker)
+     */
+    onRangeChange?: (range: DateRange<Date>) => void;
+    /**
+     * Callback fired when picker opens
+     */
+    onOpen?: () => void;
+    /**
+     * Callback fired when picker closes
+     */
+    onClose?: () => void;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * Whether to show shortcuts
+     * @default true for range, false for single
+     */
+    showShortcuts?: boolean;
+    /**
+     * Custom shortcuts items for range picker
+     */
+    shortcuts?: PickersShortcutsItem<DateRange<Date>>[];
+    /**
+     * Custom shortcuts items for single date picker
+     */
+    singleShortcuts?: PickersShortcutsItem<Date>[];
+    /**
+     * Number of calendars to display (range picker only)
+     * @default 2
+     */
+    calendars?: 1 | 2 | 3;
+    /**
+     * Additional props passed to single DatePicker
+     */
+    datePickerProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
+    /**
+     * Additional props passed to DateRangePicker
+     */
+    dateRangePickerProps?: Omit<Partial<DateRangePickerProps>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
+}
+/**
+ * ModDatePicker - Moderne design system date picker component
+ *
+ * A wrapper around MUI X DatePicker and DateRangePicker with design system tokens and
+ * customization. Supports both single date selection and date range selection with
+ * built-in shortcuts.
+ *
+ * Design Tokens Used:
+ * - colors: semanticColors.border.strong, semanticColors.typography.body, semanticColors.surfaces.white, semanticColors.icons.hoverBackground
+ * - typography: typography.fontSize.sm, typography.fontWeight.medium, typography.fontWeight.semiBold, semanticColors.typography.bodySecondary
+ * - border: semanticColors.border.primary
+ * - shadows: shadows.dropdown
+ * - borderRadius: borderRadius.l (20px)
+ */
+declare const ModDatePicker: {
+    ({ type, open, label, value, rangeValue, onChange, onRangeChange, onOpen, onClose, placeholder, showShortcuts, shortcuts, singleShortcuts, calendars, datePickerProps, dateRangePickerProps, }: ModDatePickerProps): react_jsx_runtime.JSX.Element;
+    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 {
+}
+/**
+ * ModDivider - Horizontal divider for separating content
+ *
+ * Generic divider component that can be used in menus, lists, cards, or any layout
+ * that needs visual separation between content sections.
+ *
+ * @example
+ * ```tsx
+ * // In a menu
+ * <ModMenu>
+ *   <ModMenuItem>Settings</ModMenuItem>
+ *   <ModDivider />
+ *   <ModMenuItem>Sign out</ModMenuItem>
+ * </ModMenu>
+ *
+ * // In a card
+ * <Card>
+ *   <CardHeader>Title</CardHeader>
+ *   <ModDivider />
+ *   <CardContent>Content</CardContent>
+ * </Card>
+ * ```
+ */
+declare const ModDivider: {
+    (props: ModDividerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type DotSize = 'small' | 'medium' | 'large';
+type DotVariant = 'solid' | 'outline';
+type DotColor = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+interface ModDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /**
+     * The size of the dot
+     * @default "medium"
+     */
+    size?: DotSize;
+    /**
+     * The variant of the dot
+     * @default "solid"
+     */
+    variant?: DotVariant;
+    /**
+     * The color/status of the dot
+     * @default "neutral"
+     */
+    color?: DotColor;
+    /**
+     * Optional icon rendered centered inside the dot. Use to indicate intent within
+     * the dot itself (e.g., a minus icon on a disconnected error dot). SVG children
+     * using `currentColor` inherit a white stroke/fill for contrast against the
+     * colored background, and are scaled to 70% of the dot size.
+     */
+    children?: ReactNode;
+}
+/**
+ * ModDot - Status indicator dot.
+ */
+declare const ModDot: {
+    ({ size, variant, color, children, ...props }: ModDotProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ModDownloadToastProps extends Omit<PaperProps, 'title'> {
+    /**
+     * The header text
+     */
+    title?: string;
+    /**
+     * The file name being downloaded
+     */
+    fileName?: string;
+    /**
+     * Progress value (0-100)
+     */
+    progress?: number;
+    /**
+     * Whether to show the close button
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * Whether to show the pause button
+     * @default true
+     */
+    showPause?: boolean;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Callback when pause button is clicked
+     */
+    onPause?: () => void;
+    /**
+     * Custom actions to override the default pause/close buttons
+     */
+    actions?: ReactNode;
+}
+/**
+ * ModDownloadToast - Standalone download progress toast notification
+ */
+declare const ModDownloadToast: {
+    ({ title, fileName, progress, showClose, showPause, onClose, onPause, actions, ...props }: ModDownloadToastProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Filled status icons — sourced from the published Figma library components
+ * Filled_Success / Filled_Queued / Filled_Info / Filled_Warning / Filled_Error /
+ * Filled_Neutral / Filled_Canceled.
+ *
+ * Designed at 16px; size via `fontSize` like any MUI `SvgIcon`. Each ships its
+ * intent's status color baked into the silhouette with a white inner glyph — the
+ * fill is fixed, so `color`/`htmlColor` are omitted from the props. There is no
+ * Filled_Active (the open-arc spinner cannot fill). Use below 18px; above that,
+ * prefer the Lucide outline glyph.
+ */
+type ModFilledStatusIconProps = Omit<SvgIconProps, 'color' | 'htmlColor'>;
+declare const ModFilledSuccess: {
+    (props: ModFilledStatusIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const ModFilledQueued: {
+    (props: ModFilledStatusIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const ModFilledInfo: {
+    (props: ModFilledStatusIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const ModFilledWarning: {
+    (props: ModFilledStatusIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const ModFilledError: {
+    (props: ModFilledStatusIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const ModFilledNeutral: {
+    (props: ModFilledStatusIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const ModFilledCanceled: {
+    (props: ModFilledStatusIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ModFilterChipProps extends Omit<ChipProps, 'variant' | 'color' | 'label'> {
+    /**
+     * The filter label text
+     */
+    label: string;
+    /**
+     * Whether the filter has active selections
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether the filter dropdown is expanded
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Value text shown when selected (e.g. "Filter 1, Filter 2")
+     */
+    selectedLabel?: string;
+    /**
+     * Number of active filter selections (shown as badge when selected)
+     * @default 0
+     */
+    count?: number;
+    /**
+     * Handler for clearing the filter (shows X icon when provided and selected)
+     */
+    onClear?: (e: React.MouseEvent) => void;
+}
+/**
+ * ModFilterChip - Filter chip for filtering data, based on MUI Chip.
+ *
+ * @example
+ * <ModFilterChip label="Status" selected selectedLabel="Active, Pending" count={2} onClear={handleClear} />
+ */
+declare const ModFilterChip: {
+    ({ label, selected, expanded, selectedLabel, count, onClear, onClick, ...props }: ModFilterChipProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type AvatarColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7;
+
+type AvatarSize = 'small' | 'medium';
+interface ModGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
+    /**
+     * The size of the avatar
+     * @default "medium"
+     */
+    size?: AvatarSize;
+    /**
+     * Explicit initials color index. When omitted, derived deterministically
+     * from `alt`. Image avatars ignore it and use the default styling.
+     */
+    colorIndex?: AvatarColorIndex;
+}
+/**
+ * ModGeneralAvatar - Avatar with image or colored initials display
+ */
+declare const ModGeneralAvatar: {
+    ({ size, colorIndex, alt, src, children, ...props }: ModGeneralAvatarProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type IconButtonSize = 'small' | 'medium';
+type IconButtonVariant = 'primary' | 'secondary' | 'destructive' | 'tertiary' | 'nav';
+interface ModIconButtonProps extends Omit<ButtonBaseProps, 'children' | 'size'> {
+    /**
+     * The size of the icon button
+     * @default "medium"
+     */
+    size?: IconButtonSize;
+    /**
+     * The visual variant of the icon button.
+     * - `primary`, `secondary`, `destructive`, `tertiary`: Uses ModButton's hierarchy styling
+     * - `nav`: White background with border, used in global navigation
+     * @default "tertiary"
+     */
+    variant?: IconButtonVariant;
+    /**
+     * Whether the button is in an active/selected state (e.g., popover is open).
+     * Only applies to the `nav` variant.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Show loading spinner instead of icon.
+     * Only applies to hierarchy variants (not `nav`).
+     * @default false
+     */
+    loading?: boolean;
+    children?: ReactNode;
+}
+/**
+ * ModIconButton - Icon-only button component
+ *
+ * For hierarchy variants (primary/secondary/destructive/tertiary), wraps ModButton with
+ * icon-only sizing. For the `nav` variant, uses a standalone MUI IconButton with custom styling.
+ */
+declare const ModIconButton: {
+    ({ size, variant, active, loading, children, ...props }: ModIconButtonProps): 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
+     */
+    onLoadMore: () => void;
+    /**
+     * Whether there are more rows to load
+     * @default true
+     */
+    hasNextPage?: boolean;
+    /**
+     * Scroll threshold (0-1) to trigger auto-load. 0.85 = 85% scrolled
+     * @default 0.85
+     */
+    loadMoreAtScrollPercent?: number;
+    /**
+     * Custom slots (merged with design system defaults)
+     */
+    slots?: Partial<GridSlots>;
+}
+/**
+ * ModInfiniteScrollGrid - DataGrid with infinite scroll and load-more functionality
+ *
+ * Features:
+ * - Auto-loads more data when scrolled to 85% (configurable)
+ * - Manual "Load more" button in footer
+ * - Shows row count and loading state
+ * - Inherits all responsive features from ModDataGrid
+ *
+ * @example
+ * <ModInfiniteScrollGrid
+ *   rows={rows}
+ *   columns={columns}
+ *   onLoadMore={loadMoreData}
+ *   hasNextPage={hasMore}
+ *   loading={isLoading}
+ * />
+ */
+declare function ModInfiniteScrollGrid({ onLoadMore, hasNextPage, loadMoreAtScrollPercent, slots, slotProps: userSlotProps, sx: userSx, ...props }: ModInfiniteScrollGridProps): react_jsx_runtime.JSX.Element;
+declare namespace ModInfiniteScrollGrid {
+    var displayName: string;
+}
+
+type InputFieldSize = 'small' | 'medium';
+
+interface ModInputFieldProps extends Omit<InputBaseProps, 'size'> {
+    /**
+     * The size of the input field
+     * @default "medium"
+     */
+    size?: InputFieldSize;
+    /**
+     * Show error/destructive state with red styling
+     * @default false
+     */
+    destructive?: boolean;
+    /**
+     * Label text for the input
+     */
+    label?: string;
+    /**
+     * Show required indicator (asterisk)
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Info icon to display next to the label
+     */
+    infoIcon?: ReactNode;
+    /**
+     * Helper text displayed below the input (normal state)
+     */
+    helperText?: string;
+    /**
+     * Error message displayed below the input (destructive state)
+     * Takes precedence over helperText when destructive is true
+     */
+    errorMessage?: string;
+    /**
+     * Icon to display at the start of the input
+     */
+    startIcon?: ReactNode;
+    /**
+     * Icon to display at the end of the input
+     * In destructive state, an error icon is automatically shown
+     */
+    endIcon?: ReactNode;
+}
+/**
+ * ModInputField - Form input field component using MUI FormControl composition
+ */
+declare const ModInputField: {
+    ({ size, destructive, label, required, infoIcon, helperText, errorMessage, startIcon, endIcon, disabled, id, ...props }: ModInputFieldProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare module '@mui/material/ListItemButton' {
+    interface ListItemButtonPropsVariantOverrides {
+        size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+    }
+}
+/**
+ * Props for the ModListItem component
+ */
+interface ModListItemProps extends Omit<ListItemButtonProps, 'children' | 'size' | 'color'> {
+    /**
+     * The size variant of the list item
+     * @default "medium"
+     */
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+    /**
+     * Primary text content (required)
+     */
+    primaryText: ReactNode;
+    /**
+     * Secondary/supporting text content (optional, shown in large/xlarge/xxlarge/xxxlarge)
+     */
+    secondaryText?: ReactNode;
+    /**
+     * Badge content for count display (optional, for xxlarge/xxxlarge link variant)
+     */
+    badge?: ReactNode;
+    /**
+     * Icon or logo element (optional, scales based on size)
+     */
+    icon?: ReactNode;
+    /**
+     * The component used for the root node (for polymorphic behavior)
+     * @default 'button'
+     */
+    component?: React.ElementType;
+    /**
+     * Whether this is a link variant (applies link styling)
+     * @default false
+     */
+    isLink?: boolean;
+    /**
+     * Trailing element (optional, e.g., chevron icon for navigation)
+     * Renders at the end of the list item, typically used for navigation indicators.
+     */
+    trailingElement?: ReactNode;
+}
+/**
+ * ModListItem - Flexible list item component with multiple size variants and states
+ *
+ * A versatile list item component built on MUI's ListItemButton that supports six size variants
+ * (small to xxxlarge), interactive states (default, selected, disabled, link), and optional
+ * icons/logos, secondary text, and badges.
+ *
+ * Design Tokens Used:
+ * - semanticColors.typography.body (default text)
+ * - semanticColors.typography.body-secondary (secondary text)
+ * - semanticColors.typography.link.primary (link text)
+ * - semanticColors.icon.placeholder (default icon color)
+ * - semanticColors.icon.pressed (active icon color)
+ * - semanticColors.icon.disabled (disabled icon color)
+ * - semanticColors.buttons.secondary.hover-background (active background)
+ * - semanticColors.surface.input.background (default background)
+ * - semanticColors.surface.input.disabled-background (disabled background)
+ * - semanticColors.buttons.tertiary.disabled (disabled text color)
+ */
+declare const ModListItem: {
+    ({ size, primaryText, secondaryText, badge, icon, isLink, trailingElement, component, ...props }: ModListItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ListItemButtonVariant = 'card' | 'nav';
+/**
+ * Props for the ModListItemButton component
+ */
+interface ModListItemButtonProps extends ListItemButtonProps {
+    /**
+     * Whether the list item is selected
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether the list item is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Visual treatment.
+     * - `card` (default): bordered card-style for settings/radio-list patterns.
+     *   Expects ListItemIcon + ListItemText children for full styling support.
+     * - `nav`: borderless sidebar nav style with subtle hover/selected
+     *   highlights. Renders children inline; works with plain text.
+     * @default 'card'
+     */
+    variant?: ListItemButtonVariant;
+}
+/**
+ * ModListItemButton - Selectable list item with icon and text
+ *
+ * A selectable list item component that displays an optional icon with primary
+ * and secondary text. Supports active (selected), deselected, focus, and disabled states.
+ *
+ * Uses MUI's ListItemButton as base for proper accessibility and interaction.
+ * Compose with ListItemIcon and ListItemText for proper structure.
+ *
+ * @example
+ * ```tsx
+ * <ModListItemButton selected>
+ *   <ListItemIcon>
+ *     <PanelLeft size={36} />
+ *   </ListItemIcon>
+ *   <ListItemText
+ *     primary="Always pin recipe list to the LEFT"
+ *     secondary="This will display the recipe topology in a small box to the left of the recipe list"
+ *   />
+ * </ModListItemButton>
+ * ```
+ *
+ * Design Tokens Used (hex values omitted — they are generated from Figma and drift):
+ * - semanticColors.buttons.primary.default - Active border
+ * - semanticColors.border.primary - Default/disabled border
+ * - semanticColors.icons.default - Active icon color
+ * - semanticColors.icons.disabled - Deselected/disabled icon fill (not a text color)
+ * - semanticColors.buttons.tertiary.disabled - Deselected text color
+ * - semanticColors.typography.bodySecondary - Active secondary text
+ * - semanticColors.typography.button.disabled - Disabled text (button-scoped)
+ * - typography.body - Active primary text
+ * - semanticColors.surface.sunken - Disabled background
+ */
+declare const ModListItemButton: {
+    ({ children, selected, disabled, variant, ...props }: ModListItemButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ModLoadingSpinnerProps {
+    /**
+     * Size of the spinner in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Color of the spinner
+     * @default semanticColors.buttons.primary.default
+     */
+    color?: string;
+}
+/**
+ * ModLoadingSpinner - Animated loading spinner component
+ *
+ * A circular loading spinner with a partial arc that rotates continuously.
+ * Based on the Figma design system button loading icon.
+ *
+ * @example
+ * <ModLoadingSpinner />
+ *
+ * @example
+ * <ModLoadingSpinner size={32} color="#ff0000" />
+ */
+declare const ModLoadingSpinner: {
+    ({ size, color, }: ModLoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ModMenuProps extends MenuProps {
+    /**
+     * Menu content (typically ModMenuItem components)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * ModMenu - Menu component based on MUI Menu
+ *
+ * @example
+ * ```tsx
+ * const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+ * const open = Boolean(anchorEl);
+ *
+ * <Button onClick={(e) => setAnchorEl(e.currentTarget)}>Open Menu</Button>
+ * <ModMenu
+ *   open={open}
+ *   anchorEl={anchorEl}
+ *   onClose={() => setAnchorEl(null)}
+ * >
+ *   <ModMenuItem icon={<Icon />} shortcut="⌘+P">View profile</ModMenuItem>
+ *   <ModMenuItem>Settings</ModMenuItem>
+ * </ModMenu>
+ * ```
+ */
+declare const ModMenu: {
+    ({ children, ...props }: ModMenuProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ModActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
+    api?: GridRenderCellParams['api'];
+    children: ReactNode;
+    position?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+    suppressChildrenValidation?: boolean;
+}
+declare function ModActionsCell(props: ModActionsCellProps): react_jsx_runtime.JSX.Element;
+
+type ModAvatarCellBase = {
+    disabled?: boolean;
+};
+type ModAvatarCellEmpty = ModAvatarCellBase & {
+    empty: true;
+    name?: never;
+    src?: never;
+    label?: never;
+};
+type ModAvatarCellContent = ModAvatarCellBase & {
+    empty?: false;
+    name?: string;
+    src?: string;
+    label?: string;
+};
+type ModAvatarCellProps = ModAvatarCellEmpty | ModAvatarCellContent;
+/**
+ * ModAvatarCell — DataGrid cell displaying a user avatar with optional label.
+ */
+declare const ModAvatarCell: {
+    ({ name, src, label, disabled, empty, }: ModAvatarCellProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ModModalProps extends Omit<DialogProps, 'children'> {
+    /**
+     * Dialog content
+     */
+    children?: ReactNode;
+}
+/**
+ * ModModal - Main modal dialog container based on MUI Dialog
+ *
+ * This is a composition component. Use with ModModalHeader, ModModalContent, and ModModalFooter:
+ *
+ * @example
+ * <ModModal open={open} onClose={handleClose}>
+ *   <ModModalHeader
+ *     title="Title"
+ *     subtitle="Subtitle"
+ *     onClose={handleClose}
+ *   />
+ *   <ModModalContent>
+ *     Content goes here
+ *   </ModModalContent>
+ *   <ModModalFooter>
+ *     <ModButton onClick={handleClose}>Action</ModButton>
+ *   </ModModalFooter>
+ * </ModModal>
+ */
+declare const ModModal: {
+    ({ children, ...props }: ModModalProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+interface ModModalHeaderProps {
+    /**
+     * Main title text
+     */
+    title?: string;
+    /**
+     * Optional subtitle text or element
+     */
+    subtitle?: ReactNode;
+    /**
+     * URL to link the title to. When provided, title renders as a link.
+     */
+    href?: string;
+    /**
+     * Custom Link component to use for the title link.
+     * Required when href is provided to support framework-specific routing (e.g., Next.js Link).
+     */
+    LinkComponent?: ComponentType<{
+        href: string;
+        children: ReactNode;
+        sx?: SxProps<Theme>;
+    }>;
+    /**
+     * Close button handler
+     */
+    onClose?: () => void;
+    /**
+     * Hide the close button
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Additional content to render below title/subtitle (e.g., tabs)
+     */
+    children?: ReactNode;
+}
+/**
+ * ModModalHeader - Header section with title, optional subtitle, and close button
+ */
+declare const ModModalHeader: {
+    ({ title, subtitle, href, LinkComponent, onClose, hideCloseButton, children, }: ModModalHeaderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+interface ModModalContentProps {
+    /**
+     * Content to display in the modal body
+     */
+    children?: ReactNode;
+}
+/**
+ * ModModalContent - Main content area of the modal
+ */
+declare const ModModalContent: {
+    ({ children }: ModModalContentProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+interface ModModalFooterProps {
+    /**
+     * Optional leading icon or content (e.g., settings icon)
+     */
+    leadingContent?: ReactNode;
+    /**
+     * Action buttons (typically ModButton components)
+     */
+    children?: ReactNode;
+}
+/**
+ * ModModalFooter - Footer section with optional leading content and action buttons
+ */
+declare const ModModalFooter: {
+    ({ leadingContent, children }: ModModalFooterProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ModIconCellProps {
+    icon?: ReactNode;
+    ariaLabel?: string;
+    disabled?: boolean;
+}
+/**
+ * ModIconCell — Icon cell for DataGrid. Renders an icon centered in the cell.
+ */
+declare const ModIconCell: {
+    ({ icon, ariaLabel, disabled }: ModIconCellProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+type ModLogoCellNoSrc = {
+    src?: undefined;
+    alt?: string;
+    disabled?: boolean;
+};
+type ModLogoCellWithSrc = {
+    src: string;
+    alt: string;
+    disabled?: boolean;
+};
+type ModLogoCellProps = ModLogoCellNoSrc | ModLogoCellWithSrc;
+/**
+ * ModLogoCell — DataGrid cell displaying a raster or SVG logo image.
+ *
+ * Kept separate from ModIconCell to match the design system Icon/Logo component split:
+ * - ModIconCell: MUI SvgIcon components
+ * - ModLogoCell: raster or SVG image URLs (img tag)
+ */
+declare const ModLogoCell: {
+    ({ src, alt, disabled }: ModLogoCellProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ModProgressCellBase = {
+    disabled?: boolean;
+};
+type ModProgressCellEmpty = ModProgressCellBase & {
+    empty: true;
+    value?: never;
+};
+type ModProgressCellContent = ModProgressCellBase & {
+    empty?: false;
+    value?: number;
+};
+type ModProgressCellProps = ModProgressCellEmpty | ModProgressCellContent;
+/**
+ * ModProgressCell — DataGrid cell displaying a linear progress indicator.
+ */
+declare const ModProgressCell: {
+    ({ value, disabled, empty, }: ModProgressCellProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ModStatusCellVariant = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+type ModStatusCellBase = {
+    disabled?: boolean;
+};
+type ModStatusCellEmpty = ModStatusCellBase & {
+    empty: true;
+    label?: never;
+    icon?: never;
+    variant?: never;
+    details?: never;
+};
+type ModStatusCellContent = ModStatusCellBase & {
+    empty?: false;
+    label: string;
+    icon?: ReactNode;
+    variant?: ModStatusCellVariant;
+    /** Error details shown in a hover tooltip. Clipboard actions should be handled by the consuming app. */
+    details?: string;
+};
+type ModStatusCellProps = ModStatusCellEmpty | ModStatusCellContent;
+/**
+ * ModStatusCell — DataGrid cell displaying an icon + label chip with optional error tooltip.
+ */
+declare const ModStatusCell: {
+    ({ icon, label, details, disabled, variant, empty, }: ModStatusCellProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ModNavigationAvatarProps extends Omit<ModGeneralAvatarProps, 'size'> {
+}
+/**
+ * ModNavigationAvatar - Compact avatar for navigation contexts
+ *
+ * Wraps ModGeneralAvatar (size="medium") in a 40px container,
+ * providing an interactive area for navigation UI.
+ */
+declare const ModNavigationAvatar: {
+    ({ children, ...props }: ModNavigationAvatarProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare module '@mui/material/Chip' {
+    interface ChipPropsColorOverrides {
+        violet: true;
+        beta: true;
+    }
+    interface ChipPropsSizeOverrides {
+        large: true;
+    }
+    interface ChipPropsVariantOverrides {
+        outlined: true;
+        filled: true;
+    }
+}
+type TagShape = 'square' | 'rounded';
+type ModTagOwnProps = {
+    /**
+     * The size of the tag
+     * @default "small"
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The variant style of the tag
+     * @default "outlined"
+     */
+    variant?: 'outlined' | 'filled';
+    /**
+     * The intent/purpose of the tag
+     * @default "default"
+     */
+    intent?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
+    /**
+     * Corner treatment. `square` = borderRadius.xS, `rounded` = borderRadius.full.
+     * Deliberately defaults to `square` even though Figma's Shape default differs —
+     * this keeps existing consumers rendering unchanged. Don't "fix" it.
+     * @default "square"
+     */
+    shape?: TagShape;
+};
+type ModTagProps<C extends ElementType = typeof Chip> = ModTagOwnProps & Omit<ChipProps, keyof ModTagOwnProps | 'component' | 'color'> & Omit<ComponentPropsWithoutRef<C>, keyof ModTagOwnProps | keyof ChipProps> & {
+    component?: C;
+};
+/**
+ * ModTag - Small label component based on MUI Chip
+ */
+declare function ModTag<C extends ElementType = typeof Chip>({ size, variant, intent, shape, ...props }: ModTagProps<C>): react_jsx_runtime.JSX.Element;
+declare namespace ModTag {
+    var displayName: string;
+}
+
+type ModNavigationItemOwnProps = {
+    /**
+     * Icon element to display
+     */
+    icon?: ReactNode;
+    /**
+     * Text label below the icon
+     */
+    label?: string;
+    /**
+     * Whether the item is selected/active
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Optional tag badge content (e.g., "Beta")
+     */
+    tag?: string;
+    /**
+     * Hover tooltip shown only when the surrounding ModSideNav is collapsed
+     * (and the label is therefore hidden).
+     */
+    tooltip?: ReactNode;
+    /**
+     * Slot props for internal sub-components.
+     */
+    slotProps?: {
+        /**
+         * Props forwarded to the ModTag badge rendered when `tag` is set.
+         * Override `intent`, `variant`, or `size` to change appearance — e.g.
+         * `{ variant: 'outlined', intent: 'default' }` for a calmer grey badge.
+         */
+        badge?: ModTagOwnProps & {
+            sx?: Record<string, unknown>;
+        };
+    };
+    /**
+     * Additional content
+     */
+    children?: ReactNode;
+};
+type ModNavigationItemProps<C extends ElementType = typeof ButtonBase> = ModNavigationItemOwnProps & Omit<ButtonBaseProps, keyof ModNavigationItemOwnProps | 'component'> & Omit<ComponentPropsWithoutRef<C>, keyof ModNavigationItemOwnProps | keyof ButtonBaseProps> & {
+    component?: C;
+};
+/**
+ * ModNavigationItem - Vertical navigation item with icon, label, and optional tag
+ */
+declare function ModNavigationItem<C extends ElementType = typeof ButtonBase>({ icon, label, selected, tag, tooltip, slotProps, children, ...props }: ModNavigationItemProps<C>): react_jsx_runtime.JSX.Element;
+declare namespace ModNavigationItem {
+    var displayName: string;
+}
+
+/**
+ * Breadcrumb item configuration
+ */
+interface BreadcrumbItem {
+    /** Link label */
+    label: ReactNode;
+    /** Link href (omit for current/last item) */
+    href?: string;
+}
+/**
+ * Breadcrumb configuration with link component and items
+ */
+interface BreadcrumbConfig {
+    /** Custom link component for client-side navigation (e.g., Next.js Link) */
+    linkComponent?: ElementType;
+    /** Breadcrumb items */
+    items: BreadcrumbItem[];
+}
+interface ModPageContentProps extends BoxProps {
+    /**
+     * Main heading displayed on the page
+     */
+    pageTitle: ReactNode | string;
+    /**
+     * Optional subtitle displayed below the page title
+     */
+    subtitle?: ReactNode | string;
+    /**
+     * Optional breadcrumbs navigation displayed above the page title.
+     * Last item is automatically marked as current.
+     *
+     * @example
+     * ```tsx
+     * breadcrumbs={{
+     *   linkComponent: NextLink,
+     *   items: [
+     *     { label: 'Settings', href: '/settings' },
+     *     { label: 'Team', href: '/team' },
+     *     { label: 'Team Details' },
+     *   ]
+     * }}
+     * ```
+     */
+    breadcrumbs?: BreadcrumbConfig;
+    /**
+     * Action button displayed in the top-right corner
+     */
+    action?: ReactNode;
+    /**
+     * Make header sticky on scroll
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * Maximum width constraint for content
+     * @default false
+     */
+    contentMaxWidth?: Breakpoint | false;
+    /**
+     * Center content when using contentMaxWidth
+     * @default true
+     */
+    centerContent?: boolean;
+    /**
+     * Disable gutters/padding
+     * @default false
+     */
+    disableGutters?: boolean;
+    /**
+     * Page layout mode.
+     * - `default`: standard centered/max-width-constrained content with
+     *   gutters. Best for content-driven pages (settings, forms, lists).
+     * - `fullBleed`: removes max-width and horizontal/bottom padding, lets
+     *   the content area flex-fill the viewport. Best for full-height
+     *   layouts (sidebar + panel canvases, builders, explorers). Title
+     *   and breadcrumbs still render — they sit at the leading edge.
+     * @default 'default'
+     */
+    layout?: 'default' | 'fullBleed';
+    /**
+     * Loading state - shows spinner while content loads
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Enable back to top button when scrolling
+     * @default true
+     */
+    showBackToTop?: boolean;
+    /**
+     * Content to display in the main area
+     */
+    children: ReactNode;
+}
+/**
+ * ModPageContent - Page content surface from the Moderne Design System
+ *
+ * Represents the main white card/surface that contains page content:
+ * - Page title with optional subtitle and action button
+ * - Content area where tabs and page content should be rendered
+ *
+ * ## Design Tokens
+ * - Background: `semanticColors.surface.canvasContent` — the page content
+ *   canvas (#fbfaf6 light / #1b1b21 dark), not a raised card surface
+
+ * - Border: `semanticColors.border.primary` (#D1D5DB)
+ * - Border radius: `borderRadius.input` (8px)
+ * - Padding: `spacing.spacing_2_1_2` (20px) horizontal, `spacing.spacing_2` (16px) vertical
+ * - Gap: `spacing.spacing_1` (8px)
+ * - Title typography: `typography.fontSize.h3` (21px), `typography.fontWeight.medium`
+ *
+ * @example
+ * ```tsx
+ * <ModPageContent
+ *   pageTitle="Users"
+ *   action={<IconButton>...</IconButton>}
+ * >
+ *   <ModDataGrid ... />
+ * </ModPageContent>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With subtitle
+ * <ModPageContent
+ *   pageTitle="Settings"
+ *   subtitle="Manage your account preferences"
+ * >
+ *   <SettingsContent />
+ * </ModPageContent>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With sticky header
+ * <ModPageContent
+ *   pageTitle="Long Content"
+ *   sticky
+ * >
+ *   <VeryLongContent />
+ * </ModPageContent>
+ * ```
+ */
+declare function ModPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth: contentMaxWidthProp, centerContent, disableGutters: disableGuttersProp, isLoading, showBackToTop, layout, children, sx, ...boxProps }: ModPageContentProps): react_jsx_runtime.JSX.Element;
+declare namespace ModPageContent {
+    var displayName: string;
+}
+
+interface ModPaginatedGridProps extends Omit<ModDataGridProps, 'slots'> {
+    /**
+     * Custom slots (merged with design system defaults)
+     */
+    slots?: Partial<GridSlots>;
+}
+/**
+ * ModPaginatedGrid - DataGrid with standard pagination controls
+ *
+ * Features:
+ * - Standard MUI pagination with page numbers
+ * - Shows "1-10 of 100" format in footer
+ * - Previous/Next navigation buttons
+ * - Auto-calculates page size to fit viewport (autoPageSize)
+ * - No vertical scrollbar within pages - use pagination to navigate
+ * - Inherits all responsive features from ModDataGrid
+ *
+ * @example
+ * <ModPaginatedGrid
+ *   rows={rows}
+ *   columns={columns}
+ *   paginationModel={{ page: 0, pageSize: 10 }}
+ *   onPaginationModelChange={handlePaginationChange}
+ *   rowCount={100}
+ * />
+ */
+declare function ModPaginatedGrid({ slots, pageSizeOptions, slotProps: userSlotProps, ...props }: ModPaginatedGridProps): react_jsx_runtime.JSX.Element;
+declare namespace ModPaginatedGrid {
+    var displayName: string;
+}
+
+interface ModProgressbarProps extends Omit<LinearProgressProps, 'variant'> {
+    /**
+     * The value of the progress indicator for the determinate variant.
+     * Value between 0 and 100.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Position of the label showing the progress percentage
+     * @default "none"
+     */
+    labelPosition?: 'none' | 'right' | 'top' | 'bottom';
+    /**
+     * The variant of the progress indicator
+     * @default "default"
+     */
+    variant?: 'default' | 'cancelled';
+    /**
+     * Custom label text to display instead of the percentage
+     */
+    labelText?: string;
+}
+/**
+ * ModProgressbar - Linear progress indicator based on MUI LinearProgress
+ *
+ * Design Decisions (from Issue #75):
+ * - MUI Base Component: LinearProgress (provides accessibility, animations, progress tracking)
+ * - Label Positioning: Single labelPosition prop with values 'none', 'right', 'top', 'bottom'
+ * - Cancelled State: Separate variant prop (variant='cancelled') alongside value prop
+ */
+declare const ModProgressbar: {
+    ({ value, labelPosition, variant, labelText, ...props }: ModProgressbarProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ModQuickFilterProps {
+    /**
+     * Placeholder text for the search input
+     * @default "Search..."
+     */
+    placeholder?: string;
+    /**
+     * Callback fired when a key is pressed
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    /**
+     * If true, the input will be focused on mount
+     * @default false
+     */
+    autoFocus?: boolean;
+}
+/**
+ * ModQuickFilter - Quick search/filter input component for data grids
+ *
+ * Uses MUI X DataGrid's QuickFilterControl with Moderne design system styling.
+ * Styled to match the Figma design with search icon, clear button, and proper spacing.
+ *
+ * **Note:** This component must be used within a DataGrid context (inside a DataGrid component's toolbar).
+ *
+ * @example
+ * // Basic usage in DataGrid toolbar
+ * <DataGrid
+ *   rows={rows}
+ *   columns={columns}
+ *   slots={{
+ *     toolbar: () => (
+ *       <ModToolbar>
+ *         <ModQuickFilter placeholder="Search users..." />
+ *       </ModToolbar>
+ *     ),
+ *   }}
+ * />
+ */
+declare const ModQuickFilter: {
+    ({ placeholder, onKeyDown, autoFocus, }: ModQuickFilterProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare module '@mui/material/Radio' {
+    interface RadioPropsSizeOverrides {
+        small: true;
+        medium: true;
+    }
+}
+type RadioSize = 'small' | 'medium';
+interface ModRadioProps extends Omit<RadioProps, 'size'> {
+    /**
+     * The size of the radio button
+     * @default "medium"
+     */
+    size?: RadioSize;
+    /**
+     * The label text displayed next to the radio button
+     */
+    label?: ReactNode;
+    /**
+     * The helper text displayed below the label
+     */
+    helperText?: ReactNode;
+}
+/**
+ * ModRadio - Radio button component based on MUI Radio
+ *
+ * @example
+ * // Basic radio button (just the icon)
+ * <ModRadio />
+ *
+ * @example
+ * // With label
+ * <ModRadio label="Remember me" />
+ *
+ * @example
+ * // With label and helper text
+ * <ModRadio label="Remember me" helperText="Save my login details for next time." />
+ *
+ * @example
+ * // Small size
+ * <ModRadio size="small" label="Remember me" />
+ *
+ * @example
+ * // Controlled
+ * <ModRadio checked={value === 'option1'} onChange={handleChange} value="option1" label="Option 1" />
+ *
+ * @example
+ * // Radio group
+ * <RadioGroup value={value} onChange={handleChange}>
+ *   <ModRadio value="option1" label="Option 1" helperText="First option" />
+ *   <ModRadio value="option2" label="Option 2" helperText="Second option" />
+ * </RadioGroup>
+ */
+declare const ModRadio: {
+    ({ size, label, helperText, disabled, ...props }: ModRadioProps): react_jsx_runtime.JSX.Element;
+    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 {
+}
+/**
+ * ModRipplingDot - Animated status dot with an expanding ripple ring.
+ *
+ * Indicates an in-progress, indeterminate state (RUNNING / SYNCING / PROCESSING).
+ * Color is inherited from `currentColor`; set it via the `color`/`sx` prop or a
+ * parent. Sized to the lowercase-letter height regardless of parent fontSize.
+ */
+declare const ModRipplingDot: FunctionComponent<ModRipplingDotProps>;
+
+interface ModSearchChipProps extends Omit<InputBaseProps, 'startAdornment' | 'endAdornment' | 'type'> {
+    /**
+     * Handler for clearing the search value (shows X icon when provided and value is non-empty)
+     */
+    onClear?: () => void;
+}
+/**
+ * ModSearchChip - Pill-shaped search input for inline search functionality.
+ *
+ * @example
+ * <ModSearchChip placeholder="Search titles" value={query} onChange={handleChange} onClear={handleClear} />
+ */
+declare const ModSearchChip: {
+    ({ onClear, value, ...props }: ModSearchChipProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ModSelectFieldOption {
+    value: string | number;
+    label: ReactNode;
+    disabled?: boolean;
+}
+interface ModSelectFieldProps extends Omit<SelectProps, 'size' | 'variant' | 'error' | 'children'> {
+    /**
+     * Form-control size.
+     * @default 'medium'
+     */
+    size?: InputFieldSize;
+    /**
+     * Show error/destructive state with red label + helper text styling.
+     * @default false
+     */
+    destructive?: boolean;
+    /** Label text rendered above the select. */
+    label?: string;
+    /** Show required indicator (asterisk) next to the label. @default false */
+    required?: boolean;
+    /** Optional info icon rendered next to the label. */
+    infoIcon?: ReactNode;
+    /** Helper text rendered below the select (normal state). */
+    helperText?: string;
+    /**
+     * Error message rendered below the select when `destructive` is true.
+     * Takes precedence over helperText when destructive.
+     */
+    errorMessage?: string;
+    /**
+     * Convenience option list. Each entry becomes a ModSelectOption.
+     * Use `children` instead for custom option content.
+     */
+    options?: ModSelectFieldOption[];
+    /** Custom option content. Overrides `options` if both are provided. */
+    children?: ReactNode;
+}
+/**
+ * ModSelectField — composite of ModInputField's form chrome (label,
+ * helper text, error state) wrapped around ModSelect. Mirrors the
+ * MUI `<TextField select>` ergonomics with design system tokens, so
+ * consumers don't have to compose the two manually.
+ *
+ * @example
+ * <ModSelectField
+ *   label="Response format"
+ *   value={format}
+ *   onChange={e => setFormat(e.target.value)}
+ *   options={[
+ *     { value: 'json', label: 'JSON' },
+ *     { value: 'plain', label: 'Plain text' },
+ *   ]}
+ * />
+ */
+declare const ModSelectField: {
+    ({ size, destructive, label, required, infoIcon, helperText, errorMessage, options, children, disabled, id, ...selectProps }: ModSelectFieldProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ModSelectFieldChangeEvent<T = unknown> = SelectChangeEvent<T>;
+
+type ModSideNavProps = {
+    /** Controlled collapsed state. */
+    collapsed: boolean;
+    /** Called with the next collapsed value when the edge-handle is activated. */
+    onCollapsedChange: (next: boolean) => void;
+    /** Fixed top slot (e.g. product logo). */
+    header?: ReactNode;
+    /** Fixed bottom slot (e.g. tenant branding). */
+    footer?: ReactNode;
+    /** Scrolling content slot — the nav items. */
+    children?: ReactNode;
+} & Pick<ComponentPropsWithoutRef<'nav'>, 'className' | 'id' | 'aria-label'>;
+/**
+ * ModSideNav
+ *
+ * Collapsible vertical navigation rail with fixed `header`/`footer` slots and a
+ * scrolling content area. Controlled via `collapsed` + `onCollapsedChange`;
+ * broadcasts collapsed state to descendant `ModNavigationItem`s through context.
+ *
+ * The scroll area's top and bottom edges fade into the fixed slots, each fade
+ * appearing only while there is content to scroll toward in that direction.
+ *
+ * A chevron handle on the rail's trailing edge (beside the tenant-logo row)
+ * toggles the controlled state. Consumers that want the rail to auto-collapse
+ * on viewport changes compute `collapsed` themselves (e.g. via `useMediaQuery`)
+ * and pass it in — see the `AutoCollapseOnResize` Storybook story for the
+ * pattern.
+ */
+declare function ModSideNav({ collapsed, onCollapsedChange, header, footer, children, className, id, 'aria-label': ariaLabel, }: ModSideNavProps): react_jsx_runtime.JSX.Element;
+declare namespace ModSideNav {
+    var displayName: string;
+}
+
+/**
+ * Extended props for ModSkeleton component
+ */
+interface ModSkeletonProps extends Omit<SkeletonProps, 'variant' | 'animation'> {
+    /**
+     * Color theme variant for the skeleton
+     * @default "light"
+     */
+    colorTheme?: 'light' | 'dark';
+    /**
+     * Animation position (direction)
+     * @default "start"
+     */
+    position?: 'start' | 'end';
+}
+/**
+ * ModSkeleton - Loading skeleton component based on MUI Skeleton
+ *
+ * Usage:
+ * ```tsx
+ * <ModSkeleton width={200} height={32} />
+ * <ModSkeleton colorTheme="dark" position="end" width={200} height={32} />
+ * ```
+ */
+declare const ModSkeleton: {
+    ({ colorTheme, position, ...props }: ModSkeletonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type TableSize = 'small' | 'medium';
+type TableVariant = 'bordered' | 'plain';
+type CellAlign = 'left' | 'center' | 'right';
+interface ModTableColumn {
+    /** Unique key — looked up against each row to find the cell value. */
+    key: string;
+    /** Header label rendered in the thead. */
+    header: ReactNode;
+    /** Cell text alignment. @default 'left' */
+    align?: CellAlign;
+    /** Column width — any CSS length (e.g. '120px', '20%'). */
+    width?: string;
+}
+interface ModTableProps extends Omit<TableProps, 'size'> {
+    /** Column definitions. Order in the array determines render order. */
+    columns: ModTableColumn[];
+    /**
+     * Row data. Each row is a record keyed by `column.key`. Cell values
+     * may be any ReactNode (strings, badges, icons, etc.).
+     */
+    rows: Array<Record<string, ReactNode>>;
+    /**
+     * Cell density.
+     * - 'small': tight padding for dense lists.
+     * - 'medium': comfortable padding for read-heavy tables.
+     * @default 'small'
+     */
+    size?: TableSize;
+    /**
+     * Container chrome.
+     * - 'bordered': container border + borderRadius.card.
+     * - 'plain': no container chrome — for embedding inside an existing surface.
+     * @default 'bordered'
+     */
+    variant?: TableVariant;
+    /** Optional accessible label for the table. */
+    ariaLabel?: string;
+}
+/**
+ * ModTable — lightweight read-only table for static data (schema rows,
+ * key/value summaries, response metadata). For interactive grids with
+ * sorting / filtering / pagination, use ModDataGrid instead.
+ *
+ * @example
+ * <ModTable
+ *   columns={[
+ *     { key: 'name', header: 'Property' },
+ *     { key: 'type', header: 'Type', align: 'center', width: '120px' },
+ *     { key: 'description', header: 'Description' },
+ *   ]}
+ *   rows={[
+ *     { name: 'id', type: 'string', description: 'Resource identifier' },
+ *     { name: 'count', type: 'number', description: 'Item count' },
+ *   ]}
+ *   size="small"
+ * />
+ */
+declare const ModTable: {
+    ({ columns, rows, size, variant, ariaLabel, ...tableProps }: ModTableProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type TabPanelVariant = 'default' | 'flush';
+interface ModTabPanelProps extends Omit<BoxProps, 'role'> {
+    /** This panel's identity — must match `currentValue` for the panel to render. */
+    value: string | number;
+    /**
+     * The currently selected tab value. When equal to `value`, this panel
+     * renders its children. Otherwise the panel is hidden (and removed from
+     * the accessibility tree via `hidden`).
+     */
+    currentValue: string | number;
+    /**
+     * Layout density.
+     * - `default`: 16px top padding — for standard content tabs.
+     * - `flush`: zero padding — for full-bleed sidebar/panel/canvas layouts
+     *   where content must sit flush against the tab bar's bottom border.
+     * @default 'default'
+     */
+    variant?: TabPanelVariant;
+    /** Panel content. */
+    children?: ReactNode;
+}
+/**
+ * ModTabPanel — completes the ModTabs + ModTab + ModTabPanel set.
+ *
+ * Lightweight ARIA-compliant tab panel that renders children when its
+ * `value` matches `currentValue`. No MUI Lab / TabContext dependency.
+ *
+ * @example
+ * const [tab, setTab] = useState('overview')
+ * return (
+ *   <>
+ *     <ModTabs value={tab} onChange={(_, v) => setTab(v)}>
+ *       <ModTab value="overview" label="Overview" />
+ *       <ModTab value="details" label="Details" />
+ *     </ModTabs>
+ *     <ModTabPanel value="overview" currentValue={tab}>...</ModTabPanel>
+ *     <ModTabPanel value="details" currentValue={tab} variant="flush">...</ModTabPanel>
+ *   </>
+ * )
+ */
+declare const ModTabPanel: {
+    ({ value, currentValue, variant, children, ...boxProps }: ModTabPanelProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * 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>, {}, {}>;
+interface ModTabProps extends Omit<TabProps, 'label'> {
+    /**
+     * The label for the tab
+     */
+    label: ReactNode;
+    /**
+     * Optional count to display in a tag next to the label
+     * @default undefined
+     */
+    count?: number | string;
+    /**
+     * Tab value identifier
+     */
+    value: string | number;
+}
+/**
+ * ModTab - Individual tab button component based on MUI Tab
+ */
+declare const ModTab: {
+    ({ label, count, ...props }: ModTabProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type Intent = 'neutral' | 'info' | 'success' | 'error' | 'warning';
+/**
+ * @deprecated The Figma design no longer has Filled/Outlined styles. Retained for API
+ * compatibility only; all toasts render the single tinted style.
+ */
+type ToastType = 'outlined' | 'filled';
+interface ModToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
+    /**
+     * The intent/purpose of the toast
+     * @default "neutral"
+     */
+    intent?: Intent;
+    /**
+     * @deprecated The Figma design no longer has Filled/Outlined styles. Ignored; all
+     * toasts render the single tinted style.
+     */
+    type?: ToastType;
+    /**
+     * The title/header text
+     */
+    title?: string;
+    /**
+     * The body/supporting text
+     */
+    message?: string;
+    /**
+     * Whether to show the close button
+     * @default false
+     */
+    showClose?: boolean;
+    /**
+     * Custom action buttons (for default toast types)
+     * Pass action buttons as children of this prop
+     */
+    actions?: ReactNode;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+}
+/**
+ * ModToast - Notification/Toast component based on MUI Alert
+ */
+declare const ModToast: {
+    ({ intent, type: _type, title, message, showClose, actions, onClose, ...props }: ModToastProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * Helper component for creating toast action buttons with proper styling
+ */
+declare const ModToastButton: {
+    ({ primary, intent, type: _type, children, ...props }: {
+        primary?: boolean;
+        intent?: Intent;
+        /**
+         * @deprecated The Figma design no longer has Filled/Outlined styles. Ignored.
+         */
+        type?: ToastType;
+        children: ReactNode;
+    } & Omit<React.ComponentProps<typeof Button>, "variant" | "type">): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare module '@mui/material/Switch' {
+    interface SwitchPropsSizeOverrides {
+        small: true;
+        medium: true;
+    }
+}
+type ToggleSize = 'small' | 'medium';
+interface ModToggleProps extends Omit<SwitchProps, 'size'> {
+    /**
+     * The size of the toggle
+     * @default "medium"
+     */
+    size?: ToggleSize;
+    /**
+     * The label text displayed next to the toggle
+     */
+    label?: ReactNode;
+    /**
+     * The helper text displayed below the label
+     */
+    helperText?: ReactNode;
+}
+/**
+ * ModToggle - Binary on/off switch component based on MUI Switch
+ *
+ * @example
+ * // Basic toggle
+ * <ModToggle />
+ *
+ * @example
+ * // With label
+ * <ModToggle label="Remember me" />
+ *
+ * @example
+ * // With label and helper text
+ * <ModToggle label="Remember me" helperText="Save my login details for next time." />
+ *
+ * @example
+ * // Small size
+ * <ModToggle size="small" label="Remember me" />
+ *
+ * @example
+ * // Controlled
+ * <ModToggle checked={isChecked} onChange={handleChange} label="Remember me" />
+ */
+declare const ModToggle: {
+    ({ size, label, helperText, disabled, ...props }: ModToggleProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ToggleButtonSize = 'small' | 'medium';
+/**
+ * Visual style of the toggle. Set automatically by ModToggleButtonGroup.
+ * - `default`: buttons fill a bordered pill; selected is a tinted band.
+ * - `segmented`: buttons are raised pills on a sunken track; selected lifts to
+ *   the card surface in accent text (the Morpheus segmented control).
+ */
+type ToggleButtonVariant = 'default' | 'segmented';
+interface ModToggleButtonProps extends Omit<ToggleButtonProps, 'color' | 'size'> {
+    /**
+     * Size of the toggle button. Set automatically by ModToggleButtonGroup
+     * when used as a child; set explicitly only for standalone use.
+     * @default 'medium'
+     */
+    size?: ToggleButtonSize;
+    /**
+     * Visual style. Set automatically by ModToggleButtonGroup; set explicitly
+     * only for standalone use.
+     * @default 'default'
+     */
+    variant?: ToggleButtonVariant;
+}
+/**
+ * ModToggleButton — a single button in a segmented control. Use inside
+ * ModToggleButtonGroup; the group manages selection state and forwards
+ * size and variant to its children. Suitable for inline toolbar mode switches
+ * ("Table" / "Raw"). For page-level tabs, prefer ModButtonTab.
+ */
+declare const ModToggleButton: {
+    ({ children, size, variant, ...props }: ModToggleButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ToggleButtonGroupSize = 'small' | 'medium';
+interface ModToggleButtonGroupProps extends Omit<ToggleButtonGroupProps, 'orientation' | 'color' | 'size' | 'fullWidth'> {
+    /**
+     * Size of the buttons in the group. Forwarded to each ModToggleButton child.
+     * @default 'medium'
+     */
+    size?: ToggleButtonGroupSize;
+    /**
+     * Visual style, forwarded to each child. `segmented` renders raised pills on
+     * a sunken track with the selected pill lifted to the card surface in accent
+     * text (Morpheus). `default` is a bordered pill with a tinted selection.
+     * @default 'default'
+     */
+    variant?: ToggleButtonVariant;
+}
+/**
+ * ModToggleButtonGroup — segmented control wrapping MUI ToggleButtonGroup with
+ * design system tokens. Use for inline toolbar mode switches (e.g. "Table" / "Raw" in a
+ * panel header). For page-level tab navigation, prefer ModButtonTabGroup.
+ *
+ * @example
+ * <ModToggleButtonGroup value={mode} exclusive onChange={(_, v) => v && setMode(v)} variant="segmented" size="small">
+ *   <ModToggleButton value="table">Table</ModToggleButton>
+ *   <ModToggleButton value="raw">Raw</ModToggleButton>
+ * </ModToggleButtonGroup>
+ */
+declare const ModToggleButtonGroup: {
+    ({ size, variant, children, ...props }: ModToggleButtonGroupProps): react_jsx_runtime.JSX.Element;
+    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.)
+     */
+    children?: ReactNode;
+}
+/**
+ * ModToolbar - Styled toolbar component for data grid controls
+ *
+ * A composable toolbar component that provides consistent styling for data grid toolbars.
+ * Uses justify-space-between layout. Wrap left-side controls in a Box with gap, and right-side
+ * controls in another Box.
+ *
+ * @example
+ * // Basic toolbar with search
+ * <ModToolbar>
+ *   <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+ *     <ModQuickFilter placeholder="Search..." />
+ *   </Box>
+ * </ModToolbar>
+ *
+ * @example
+ * // Full toolbar with left controls and right actions
+ * <ModToolbar>
+ *   <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+ *     <ModQuickFilter placeholder="Search..." />
+ *     <ModButton variant="secondary" size="small">
+ *       <SlidersHorizontal size={20} />
+ *       Filters
+ *       <ModTag label="4" variant="filled" color="info" />
+ *     </ModButton>
+ *     <ModButton variant="secondary" size="small">
+ *       <Columns3 size={16} />
+ *       Columns
+ *     </ModButton>
+ *     <ModToggle size="small" label="Toggle option" checked={true} />
+ *   </Box>
+ *   <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', height: 40 }}>
+ *     <ModButton variant="secondary" size="small">
+ *       Actions
+ *       <ChevronDown size={16} />
+ *     </ModButton>
+ *   </Box>
+ * </ModToolbar>
+ */
+declare const ModToolbar: {
+    ({ children, ...props }: ModToolbarProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Variant type for ModTooltip
+ */
+type TooltipVariant = 'light' | 'dark' | 'brand';
+/**
+ * Props for the ModTooltip component
+ */
+interface ModTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
+    /**
+     * The visual style variant
+     * @default "light"
+     */
+    variant?: TooltipVariant;
+    /**
+     * The main tooltip content. Accepts a string or any ReactNode, so callers can
+     * compose richer content when the `description` variant isn't enough.
+     */
+    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).
+     * @default undefined
+     */
+    description?: string;
+}
+/**
+ * ModTooltip - Tooltip component following design system
+ *
+ * Provides contextual information when users hover over or focus on an element.
+ * Supports three visual variants (light, dark, brand) and optional supporting text.
+ *
+ * Design Tokens Used:
+ * - Light: surfaces.tooltip, typography.tooltip.default
+ * - 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)
+ */
+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.
+ */
+interface ModTreeItemData {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    checkbox?: ReactNode;
+    secondaryLabel?: ReactNode;
+    endAction?: ReactNode;
+    statusIcon?: ReactNode;
+    children?: ModTreeItemData[];
+}
+type ModTreeItemProps = TreeItemProps;
+/**
+ * ModTreeItem - Styled tree item row with optional icon, checkbox,
+ * secondaryLabel, endAction, and statusIcon slots.
+ *
+ * Slot data is read from the item model (passed via `items` on ModTreeView).
+ */
+declare const ModTreeItem: React$1.ForwardRefExoticComponent<TreeItemProps & React$1.RefAttributes<HTMLLIElement>>;
+interface ModTreeViewProps extends Omit<RichTreeViewProProps<ModTreeItemData, false>, 'slots'> {
+    slots?: RichTreeViewProProps<ModTreeItemData, false>['slots'];
+}
+/**
+ * ModTreeView - Styled tree container wrapping MUI RichTreeViewPro.
+ *
+ * Provides design-system token styling, default expand/collapse icons,
+ * and ModTreeItem as the default item slot.
+ */
+declare const ModTreeView: {
+    ({ slots, ...props }: ModTreeViewProps): react_jsx_runtime.JSX.Element;
+    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>, {}, {}>;
+interface ModTypologyControlProps extends Omit<ToggleButtonGroupProps, 'orientation'> {
+}
+/**
+ * ModTypologyControl - A vertical toggle button group for switching between different typology views
+ *
+ * Design Tokens Used:
+ * - semanticColors.surfaces.card - background color
+ * - semanticColors.icons.default - default icon color
+ * - semanticColors.icons.active - selected icon color
+ * - semanticColors.buttons.navigation.pressedBackground - selected button background
+ * - borderRadius.m - container border radius
+ */
+declare const ModTypologyControl: {
+    ({ children, ...props }: ModTypologyControlProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Outline-based focus ring styles derived from design system border tokens.
+ * Uses CSS outline (not box-shadow) so focus rings are never clipped by overflow:hidden.
+ *
+ * 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 outlineOffset: "2px";
+};
+
+interface ModVibratingDotProps extends BoxProps$1 {
+}
+/**
+ * ModVibratingDot - Animated status dot with a breathing pulse halo.
+ *
+ * Indicates a waiting/pending state (QUEUED / CREATED). Color is inherited from
+ * `currentColor`; set it via the `color`/`sx` prop or a parent. Sized to the
+ * lowercase-letter height regardless of parent fontSize.
+ */
+declare const ModVibratingDot: FunctionComponent<ModVibratingDotProps>;
+
+/**
+ * @moderneinc/design-system-components
+ *
+ * TypeScript declarations for Moderne styled components
+ */
+
+
+
+// Module augmentation for MUI DataGrid slot props
+declare module '@mui/x-data-grid' {
+  interface FooterPropsOverrides extends ModFooterProps {}
+}
+
+declare module '@mui/x-data-grid-pro' {
+  interface FooterPropsOverrides extends ModFooterProps {}
+}
+
+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 };