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

package/dist/CodeSnippet/CodeSnippet.d.ts

@@ -0,0 +1,38 @@
+import type { ButtonBaseProps } from '@mui/material/ButtonBase';
+import type { ReactNode } from 'react';
+declare module '@mui/material/ButtonBase' {
+    interface ButtonBasePropsVariantOverrides {
+        outlined: true;
+        filled: true;
+    }
+}
+type CodeSnippetVariant = 'outlined' | 'filled';
+type CodeSnippetSize = 'xs' | 'small' | 'large' | 'inline';
+export 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
+ */
+export declare const ModCodeSnippet: {
+    ({ variant, size, endIcon, children, ...props }: ModCodeSnippetProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/DataGrid/DataGrid.d.ts

@@ -0,0 +1,58 @@
+import { type DataGridProProps, type GridDensity, type GridSlots } from '@mui/x-data-grid-pro';
+import type { ReactNode } from 'react';
+export type DataGridSize = GridDensity;
+export 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"
+ * />
+ */
+export declare function ModDataGrid({ autoHeight, toolbar, slots, sx, density, slotProps: userSlotProps, ...props }: ModDataGridProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModDataGrid {
+    var displayName: string;
+}

package/dist/DataGrid/DataGrid.styles.d.ts

@@ -0,0 +1,14 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+/**
+ * Surface for the filter and columns panels.
+ *
+ * MUI's panel Paper defaults to `theme.palette.background.paper` (#fff) and so
+ * stays light under `[data-theme="dark"]`. ModDataGrid themes that Paper via its
+ * `panel` slot, but both panels are also usable with a plain MUI DataGrid, so
+ * they carry this surface themselves.
+ */
+export declare const panelSurfaceStyles: {
+    readonly backgroundColor: "var(--mod-surfaces-white)";
+};
+export declare const getDataGridHeaderStyles: () => SxProps<Theme>;
+export declare const getDataGridRowStyles: () => SxProps<Theme>;

package/dist/DataGridCell/DataGridCell.d.ts

@@ -0,0 +1,120 @@
+import type { GridDensity } from '@mui/x-data-grid';
+import type { HTMLAttributes, ReactNode } from 'react';
+export 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>
+ * )
+ */
+export declare const ModDataGridCellContent: {
+    ({ children, ...props }: ModDataGridCellContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Row height configuration for DataGrid size variants (from Figma specs)
+ * - compact: 42px
+ * - standard: 48px
+ * - comfortable: 56px
+ */
+export declare const modRowHeights: Record<GridDensity, number>;
+/**
+ * StatusBadgeCell - Ready-to-use cell component for status badges
+ *
+ * @example
+ * renderCell: (params) => (
+ *   <StatusBadgeCell
+ *     status={params.value}
+ *     colorMap={{
+ *       Active: 'success',
+ *       Pending: 'warning',
+ *       Inactive: 'default'
+ *     }}
+ *   />
+ * )
+ */
+export interface ModStatusBadgeCellProps {
+    status: string;
+    colorMap?: Record<string, 'default' | 'error' | 'info' | 'success' | 'warning'>;
+}
+export declare const ModStatusBadgeCell: {
+    ({ status, colorMap }: ModStatusBadgeCellProps): import("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}
+ *   />
+ * )
+ */
+export interface ModUserAvatarCellProps {
+    name: string;
+    avatarUrl?: string;
+    size?: 'small' | 'medium';
+}
+export declare const ModUserAvatarCell: {
+    ({ name, avatarUrl, size }: ModUserAvatarCellProps): import("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' }
+ *     ]}
+ *   />
+ * )
+ */
+export interface ModMultiBadgesCellProps {
+    badges: Array<{
+        label: string;
+        color?: 'default' | 'error' | 'info' | 'success' | 'warning';
+    }>;
+}
+export declare const ModMultiBadgesCell: {
+    ({ badges }: ModMultiBadgesCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/DataGridColumnsButton/DataGridColumnsButton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 />
+ * ```
+ */
+export declare function ModDataGridColumnsButton(): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModDataGridColumnsButton {
+    var displayName: string;
+}

package/dist/DataGridColumnsPanel/DataGridColumnsPanel.d.ts

@@ -0,0 +1,31 @@
+import type { GridColumnsPanelProps } from '@mui/x-data-grid-pro';
+/**
+ * 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
+ */
+export interface ModDataGridColumnsPanelProps extends GridColumnsPanelProps {
+    /**
+     * If true, shows the search input field
+     * @default false
+     */
+    showSearch?: boolean;
+}
+export declare const ModDataGridColumnsPanel: {
+    ({ showSearch, sx: _sx, theme: _theme, ...props }: ModDataGridColumnsPanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/DataGridFilterPanel/DataGridFilterPanel.d.ts

@@ -0,0 +1,55 @@
+import { GridFilterPanel as MuiGridFilterPanel } from '@mui/x-data-grid';
+import type React from 'react';
+import { ModSelect } from '../Select/Select';
+export type { GridFilterItem as FilterItem, GridFilterOperator as FilterOperator, } from '@mui/x-data-grid';
+/**
+ * Icon components for DataGrid filter panel slots
+ * These must be passed to the DataGrid's slots prop
+ */
+export declare const ModDataGridFilterPanelAddIcon: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const ModDataGridFilterPanelDeleteIcon: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const ModDataGridFilterPanelRemoveAllIcon: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * ModDataGridFilterPanel - MUI GridFilterPanel with design system styling and Lucide icons
+ *
+ * A styled version of MUI's GridFilterPanel that applies design system tokens.
+ * The per-row delete icon uses Lucide Trash2 internally.
+ *
+ * For footer button icons ("Add filter" and "Remove all"), you must also pass the icon components
+ * to the DataGrid's slots prop.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   ModDataGridFilterPanel,
+ *   FilterPanelAddIcon,
+ *   FilterPanelDeleteIcon,
+ *   FilterPanelRemoveAllIcon
+ * } from '@moderneinc/design-system-components'
+ *
+ * <DataGridPro
+ *   rows={rows}
+ *   columns={columns}
+ *   slots={{
+ *     filterPanel: ModDataGridFilterPanel,
+ *     filterPanelAddIcon: FilterPanelAddIcon,
+ *     filterPanelDeleteIcon: FilterPanelDeleteIcon,
+ *     filterPanelRemoveAllIcon: FilterPanelRemoveAllIcon,
+ *   }}
+ * />
+ * ```
+ */
+export { ModSelect as ModDataGridSelect };
+export declare const ModDataGridFilterPanel: {
+    (props: React.ComponentProps<typeof MuiGridFilterPanel>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/DataGridFiltersButton/DataGridFiltersButton.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 />
+ * ```
+ */
+export declare function ModDataGridFiltersButton(): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModDataGridFiltersButton {
+    var displayName: string;
+}

package/dist/DataGridHeaderCell/DataGridHeaderCell.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Sort icon components for MUI DataGrid slots
+ *
+ * Use these with DataGrid's slots API to replace default sort indicators.
+ */
+export declare function SortedDescendingIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function SortedAscendingIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function UnsortedIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/DataGridHeaderLabel/DataGridHeaderLabel.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export 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;
+}
+export declare function ModDataGridHeaderLabel({ children, helpTooltip, className, }: ModDataGridHeaderLabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/DatePicker/DatePicker.d.ts

@@ -0,0 +1,97 @@
+import { type DatePickerProps } from '@mui/x-date-pickers/DatePicker';
+import { type PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
+import { type DateRangePickerProps } from '@mui/x-date-pickers-pro/DateRangePicker';
+import type { DateRange } from '@mui/x-date-pickers-pro/models';
+type DatePickerType = 'single' | 'range';
+/**
+ * Props for the ModDatePicker component
+ */
+export 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)
+ */
+export declare const ModDatePicker: {
+    ({ type, open, label, value, rangeValue, onChange, onRangeChange, onOpen, onClose, placeholder, showShortcuts, shortcuts, singleShortcuts, calendars, datePickerProps, dateRangePickerProps, }: ModDatePickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type { DatePickerType };

package/dist/DatePickerListItem/DatePickerListItem.d.ts

@@ -0,0 +1,4 @@
+/**
+ * ModDatePickerListItem
+ */
+export declare const ModDatePickerListItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/DatePickerMenu/DatePickerMenu.d.ts

@@ -0,0 +1,4 @@
+/**
+ * ModDatePickerMenu
+ */
+export declare const ModDatePickerMenu: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/DateTimeCell/DateTimeCell.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+/**
+ * Props for the ModDateTimeCell component
+ */
+export interface ModDateTimeCellProps {
+    /**
+     * The content to display inside the component
+     */
+    children?: ReactNode;
+}
+/**
+ * ModDateTimeCell — scaffold placeholder, not yet implemented.
+ */
+export declare const ModDateTimeCell: {
+    ({ children, ...props }: ModDateTimeCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Divider/Divider.d.ts

@@ -0,0 +1,30 @@
+import { type DividerProps } from '@mui/material/Divider';
+export 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>
+ * ```
+ */
+export declare const ModDivider: {
+    (props: ModDividerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Dot/Dot.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+type DotSize = 'small' | 'medium' | 'large';
+type DotVariant = 'solid' | 'outline';
+type DotColor = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+export 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.
+ */
+export declare const ModDot: {
+    ({ size, variant, color, children, ...props }: ModDotProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/DownloadToast/DownloadToast.d.ts

@@ -0,0 +1,45 @@
+import { type PaperProps } from '@mui/material/Paper';
+import type { ReactNode } from 'react';
+export 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
+ */
+export declare const ModDownloadToast: {
+    ({ title, fileName, progress, showClose, showPause, onClose, onPause, actions, ...props }: ModDownloadToastProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/DropdownInputField/DropdownInputField.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+/**
+ * Props for the ModDropdownInputField component
+ */
+export interface ModDropdownInputFieldProps {
+    /**
+     * The content to display inside the component
+     */
+    children?: ReactNode;
+}
+/**
+ * ModDropdownInputField — scaffold placeholder, not yet implemented.
+ */
+export declare const ModDropdownInputField: {
+    ({ children, ...props }: ModDropdownInputFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/EmptyState/EmptyState.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+/**
+ * Props for the ModEmptyState component
+ */
+export interface ModEmptyStateProps {
+    /**
+     * The content to display inside the component
+     */
+    children?: ReactNode;
+}
+/**
+ * ModEmptyState — scaffold placeholder, not yet implemented.
+ */
+export declare const ModEmptyState: {
+    ({ children, ...props }: ModEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};