@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/table.d.mts

@@ -0,0 +1,720 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default from 'react';
+import * as _mui_material_TextField from '@mui/material/TextField';
+import { TextFieldProps } from '@mui/material/TextField';
+import { SelectProps } from '@mui/material/Select';
+import FormControl, { FormControlProps } from '@mui/material/FormControl';
+import _mui_material_MenuItem from '@mui/material/MenuItem';
+import { SliderProps } from '@mui/material/Slider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { FormLabelProps } from '@mui/material/FormLabel';
+import { FormGroupProps } from '@mui/material/FormGroup';
+import MuiCheckBox from '@mui/material/Checkbox';
+import { DropzoneOptions } from 'react-dropzone';
+import { SwitchProps } from '@mui/material/Switch';
+import { CountryCode } from 'libphonenumber-js';
+import { ButtonProps } from '@mui/material/Button';
+import { Updater, ColumnFiltersState, ColumnPinningState, ColumnSizingState, ExpandedState, GroupingState, PaginationState, RowSelectionState, SortingState, ColumnDef, Table as Table$1, Row, CellContext } from '@tanstack/react-table';
+import { UseFormReturn, FieldValues } from 'react-hook-form';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
+import * as _emotion_styled from '@emotion/styled';
+import * as _mui_system from '@mui/system';
+import * as _mui_material from '@mui/material';
+
+declare const FIELD_TYPEs: {
+    readonly text: "text-field";
+    readonly select: "select-field";
+    readonly slider: "slider-field";
+    readonly check: "check-field";
+    readonly date: "date-field";
+    readonly dateTime: "date-time-field";
+    readonly toggleButton: "toggle-button";
+    readonly autocomplete: "autocomplete-field";
+    readonly switch: "switch-field";
+    readonly number: "number-field";
+    readonly tel: "tel-field";
+    readonly json: "json-field";
+    readonly custom: "custom-field";
+    readonly textArray: "text-array-field";
+    readonly fileUpload: "file-upload-field";
+    readonly avatar: "avatar-field";
+};
+
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * A wrapper for Mui FormLabel
+ */
+declare function MuiFormLabel(props: FormLabelProps): react_jsx_runtime.JSX.Element;
+
+interface SelectOptionType {
+    label: string;
+    id: string;
+    onClick?: React__default.MouseEventHandler<HTMLLIElement>;
+    icon?: React__default.ReactNode;
+    extension?: React__default.ReactNode;
+    name?: string;
+}
+type MuiSelectProps = {
+    label?: string;
+    value: SelectProps["value"];
+    onChange: SelectProps["onChange"];
+    options: SelectOptionType[];
+    helperText?: string;
+    error?: boolean;
+    inputProps?: SelectProps["inputProps"];
+    minWidth?: string;
+    minPadding?: boolean;
+    required?: boolean;
+    disableRequiredLabel?: boolean;
+    multiple?: boolean;
+    slotProps?: {
+        option?: React__default.ComponentProps<typeof _mui_material_MenuItem>;
+        formControl?: Partial<React__default.ComponentProps<typeof FormControl>>;
+    };
+} & Omit<SelectProps, "label">;
+
+declare const MuiXDatePicker: React__default.FC<React__default.ComponentProps<typeof DatePicker>>;
+
+declare const MuiXDateTimePicker: React__default.FC<React__default.ComponentProps<typeof DateTimePicker>>;
+
+interface CheckOptionType {
+    id: string;
+    label: string;
+}
+type CheckedStateValue = CheckOptionType['id'][];
+declare function CheckboxGroup({ error, required, options, setCheckedIds, title, titleSuffix, inputProps, checkedIds, helperText, errorText, direction, slotProps, }: {
+    error?: boolean;
+    title?: React.ComponentProps<typeof MuiFormLabel>['children'];
+    titleSuffix?: React.ComponentProps<typeof MuiFormLabel>['children'];
+    options: CheckOptionType[];
+    setCheckedIds?: React.Dispatch<React.SetStateAction<CheckedStateValue>>;
+    checkedIds: CheckedStateValue;
+    required?: boolean;
+    helperText?: string;
+    errorText?: string;
+    direction?: 'row' | 'column';
+    inputProps?: NonNullable<React.ComponentProps<typeof MuiCheckBox>['slotProps']>['input'];
+    slotProps?: {
+        fieldset?: Partial<FormControlProps>;
+        group?: Partial<Omit<FormGroupProps, "row">>;
+    };
+}): react_jsx_runtime.JSX.Element;
+
+type ValueOf<T> = T[keyof T];
+
+declare const FILE_STATUSs: {
+    readonly uploadingToLocal: "local-uploading";
+    readonly uploadedToLocal: "local-uploaded";
+    readonly localError: "local-error";
+    readonly pending: "pending";
+    readonly uploadPending: "upload-pending";
+    readonly gettingSignedURL: "upload-gettingSignedURL";
+    readonly beginUploadToS3: "upload-beginUploadToS3";
+    readonly uploadedToCloud: "upload-uploadedToCloud";
+    readonly error: "upload-error";
+    readonly downloadPending: "download-pending";
+    readonly downloading: "download-in-progress";
+    readonly downloaded: "download-completed";
+    readonly downloadError: "download-error";
+};
+type FileStatusType = ValueOf<typeof FILE_STATUSs>;
+type Attachment = {
+    url: string;
+    keyPath: string;
+    filename: string;
+    fileType: string;
+    hostname: string;
+};
+
+interface PreviewableFileProps {
+    path?: string;
+    blobUrl?: string;
+    filename?: string;
+    randomName?: string;
+    fileType?: string;
+    mimeType?: Blob["type"];
+    size?: number;
+    displaySize?: string;
+    url?: string;
+    fetchOptions?: object;
+    putUrl?: string;
+    getUrl?: string;
+    status?: FileStatusType;
+    revokeable?: boolean;
+    imageProps?: {
+        width: number;
+        height: number;
+    };
+}
+declare class PreviewableFile {
+    path: NonNullable<PreviewableFileProps["path"]>;
+    blobUrl: NonNullable<PreviewableFileProps["blobUrl"]>;
+    filename: NonNullable<PreviewableFileProps["filename"]>;
+    randomName: NonNullable<PreviewableFileProps["randomName"]>;
+    fileType: NonNullable<PreviewableFileProps["fileType"]>;
+    mimeType: NonNullable<PreviewableFileProps["mimeType"]>;
+    size: NonNullable<PreviewableFileProps["size"]>;
+    displaySize: NonNullable<PreviewableFileProps["displaySize"]>;
+    url: NonNullable<PreviewableFileProps["url"]>;
+    fetchOptions: NonNullable<PreviewableFileProps["fetchOptions"]>;
+    putUrl: NonNullable<PreviewableFileProps["putUrl"]>;
+    getUrl: NonNullable<PreviewableFileProps["getUrl"]>;
+    status: NonNullable<PreviewableFileProps["status"]>;
+    revokeable: NonNullable<PreviewableFileProps["revokeable"]>;
+    imageProps: NonNullable<PreviewableFileProps["imageProps"]>;
+    constructor(props?: PreviewableFileProps);
+    toPlainObj(): this;
+    updateFile(file: PreviewableFile | undefined): void;
+    updateStatus(status: FileStatusType): void;
+    downloadFile(): Promise<this>;
+    _displayFileSize(): string;
+    getUploadFormat(): Attachment;
+}
+
+type DropzoneType = "box" | "button";
+
+type OptionId = string;
+interface OptionParams {
+    id?: OptionId;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    group: string;
+    icon?: React.ReactNode;
+    filterKey?: string;
+    defaultSelected?: boolean;
+    value?: string;
+    otherProps?: Record<string, unknown>;
+    tags?: {
+        tagName: string;
+        tagIcon?: React.ReactElement | undefined;
+    }[];
+}
+
+type GitHubPickerVariant = 'field' | 'icon';
+type GitHubPickerColor = 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'system' | 'insight';
+
+type TextSlotProps = Partial<TextFieldProps> & {
+    maxLength?: number;
+};
+type NumberSlotProps = {
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Optional unit shown as an adornment (e.g. "kg", "$", or an icon) */
+    unit?: React__default.ReactNode;
+    /** Whether the unit appears at the start or end of the input (default: 'end') */
+    unitPosition?: 'start' | 'end';
+    slotProps?: Partial<React__default.ComponentProps<typeof _mui_material_TextField.default>>['slotProps'];
+};
+type UseOptionsHook = () => {
+    options: SelectOptionType[];
+    loading?: boolean;
+    reload?: () => void;
+};
+type SelectSlotProps = Partial<MuiSelectProps> & {
+    options: SelectOptionType[];
+    useOptions?: UseOptionsHook;
+};
+type SliderSlotProps = Partial<SliderProps>;
+
+type DateTimeSlotProps = Partial<React__default.ComponentProps<typeof MuiXDateTimePicker>>;
+type DateSlotProps = Partial<React__default.ComponentProps<typeof MuiXDatePicker>>;
+
+type FileUploadSlotProps = {
+    accept?: DropzoneOptions['accept'];
+    maxFiles?: number;
+    dropzoneType?: DropzoneType;
+};
+type AvatarSlotProps = {
+    /** File accept config. Supports react-dropzone's accept shape or a plain input accept string. */
+    accept?: DropzoneOptions['accept'] | string;
+    /** Avatar size preset from the elemental Avatar package */
+    size?: Size;
+    /** Override avatar dimensions (in px or css units) */
+    dim?: {
+        width?: string | number;
+        height?: string | number;
+    };
+    /** Display name used to render initials when no image is selected */
+    avatarName?: string;
+    /** Back-compat alias for avatarName */
+    name?: string;
+    /** Form key to watch for the name (e.g. "fullName") */
+    watchAvatarNameKey?: string;
+    /** Optional icon behind the avatar when no image is selected */
+    backgroundIcon?: React__default.ReactNode;
+    /** Optional hook to compute a background icon reactively */
+    useBackgroundIcon?: () => React__default.ReactNode;
+};
+type CheckOption = CheckOptionType;
+type CheckSlotProps = Partial<React__default.ComponentProps<typeof CheckboxGroup>> & {
+    options: CheckOption[];
+    useOptions?: () => {
+        options: CheckOption[];
+        loading?: boolean;
+        reload?: () => void;
+    };
+};
+type ToggleButtonOption = {
+    id: string;
+    value: string;
+    label: string;
+    icon?: React__default.ReactNode;
+    rotateIconOnSelected?: boolean;
+    disabled?: boolean;
+};
+type ToggleButtonSlotProps = {
+    options: ToggleButtonOption[];
+    color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+};
+
+type AutocompleteSlotProps = {
+    options: OptionParams[];
+    multiple?: boolean;
+    /** `field` is the full selector. `icon` is a compact IconButton with a badge. */
+    variant?: GitHubPickerVariant;
+    color?: GitHubPickerColor;
+    useOptions?: () => {
+        options: OptionParams[];
+        loading?: boolean;
+        reload?: () => void;
+    };
+};
+type CustomSlotProps = {
+    /**
+     * A render function that receives `{ value, onChange, error, getValues, helperText }`.
+     * Helper text is often provided via `field.helperText`, but some custom
+     * renderers still expect it here, so we keep the property for
+     * backwards-compatibility.
+     * Use this to render completely custom UI.
+     */
+    render?: (props: {
+        value: unknown;
+        onChange: (value: unknown) => void;
+        error?: boolean;
+        getValues?: () => Record<string, unknown>;
+        helperText?: React__default.ReactNode;
+    }) => React__default.ReactNode;
+    /** Arbitrary props passed to consumer render function */
+    props?: Record<string, unknown>;
+    /** Optional helper text for the slot renderer */
+    helperText?: React__default.ReactNode;
+};
+type TextArraySlotProps = {
+    minItems?: number;
+    maxItems?: number;
+    itemProps?: TextSlotProps;
+    addButtonLabel?: string;
+    removeButtonLabel?: string;
+};
+type SwitchSlotProps = Partial<SwitchProps> & {
+    label?: React__default.ReactNode;
+};
+
+type TelSlotProps = {
+    /** default country for the phone input (e.g. 'US') */
+    defaultCountry?: CountryCode;
+    placeholder?: string;
+    /** passthrough props for the input component */
+    inputProps?: React__default.InputHTMLAttributes<HTMLInputElement>;
+    /** optional icon component for the country select */
+    iconComponent?: React__default.ElementType;
+};
+type JsonSlotProps = {
+    /** passthrough props for the JsonEditor component */
+    editorProps?: Record<string, unknown>;
+};
+
+type FormFieldType = typeof FIELD_TYPEs[keyof typeof FIELD_TYPEs];
+type Explanation = {
+    title?: string;
+    content: string;
+    href?: {
+        label: string;
+        url: string;
+    };
+    highlights?: string[];
+};
+type BaseField = {
+    name: string;
+    label?: string;
+    explanation?: Explanation;
+    /** @deprecated Use explanation */
+    explaination?: Explanation;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    sx?: Record<string, unknown>;
+    size?: {
+        width?: number | string;
+        height?: number | string;
+    };
+    useHide?: () => boolean;
+    errorMsg?: string;
+};
+type ValidateFunction<Value, FormValues extends Record<string, unknown>> = (value: Value | null | undefined, formValues: FormValues) => boolean | string | Promise<boolean | string>;
+type FieldWithSlots<TypeLiteral extends FormFieldType, SlotProps, T extends FormTypeMap = FormTypeMap> = BaseField & {
+    type: TypeLiteral;
+    defaultValue?: GetDataType<TypeLiteral>;
+    slotProps?: SlotProps;
+    validate?: ValidateFunction<GetDataType<TypeLiteral>, InferFormDataType<T>>;
+    onChange?: (value: GetDataType<TypeLiteral> | null, formValues: InferFormDataType<T>) => void;
+};
+type TextFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.text, TextSlotProps, T>;
+type SelectFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.select, SelectSlotProps, T>;
+type SliderFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.slider, SliderSlotProps, T>;
+type CheckFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.check, CheckSlotProps, T>;
+type DateFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.date, DateSlotProps, T>;
+type DateTimeFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.dateTime, DateTimeSlotProps, T>;
+type ToggleButtonFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.toggleButton, ToggleButtonSlotProps, T>;
+type AutocompleteFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.autocomplete, AutocompleteSlotProps, T>;
+type SwitchFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.switch, SwitchSlotProps, T>;
+type NumberFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.number, NumberSlotProps, T>;
+type TelFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.tel, TelSlotProps, T>;
+type JsonFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.json, JsonSlotProps, T>;
+type CustomFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.custom, CustomSlotProps, T>;
+type TextArrayFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.textArray, TextArraySlotProps, T>;
+type FileUploadFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.fileUpload, FileUploadSlotProps, T>;
+type AvatarFieldConfig<T extends FormTypeMap = FormTypeMap> = FieldWithSlots<typeof FIELD_TYPEs.avatar, AvatarSlotProps, T>;
+type FieldConfig<T extends FormTypeMap = FormTypeMap> = TextFieldConfig<T> | SelectFieldConfig<T> | SliderFieldConfig<T> | CheckFieldConfig<T> | DateFieldConfig<T> | DateTimeFieldConfig<T> | ToggleButtonFieldConfig<T> | AutocompleteFieldConfig<T> | SwitchFieldConfig<T> | NumberFieldConfig<T> | JsonFieldConfig<T> | TextArrayFieldConfig<T> | CustomFieldConfig<T> | FileUploadFieldConfig<T> | AvatarFieldConfig<T> | TelFieldConfig<T>;
+type RowConfig<T extends FormTypeMap = FormTypeMap> = {
+    row: number | string;
+    fields: FieldConfig<T>[];
+    sx?: Record<string, unknown>;
+};
+type StepConfig<T extends FormTypeMap = FormTypeMap> = {
+    title?: string;
+    /** optional icon shown in step indicator (React node or MUI icon) */
+    icon?: React.ReactNode;
+    schema: RowConfig<T>[];
+};
+type FormConfig<T extends FormTypeMap = FormTypeMap> = {
+    schema?: RowConfig<T>[];
+    steps?: StepConfig<T>[];
+    defaultValues?: InferFormDataType<T>;
+    mode?: 'onSubmit' | 'onBlur' | 'onChange' | 'onTouched' | 'all';
+};
+type FormTypeMap = Record<string, FormFieldType>;
+type GetDataType<T extends FormFieldType> = T extends typeof FIELD_TYPEs.text ? string : T extends typeof FIELD_TYPEs.select ? string | string[] : T extends typeof FIELD_TYPEs.slider ? number : T extends typeof FIELD_TYPEs.check ? string[] : T extends typeof FIELD_TYPEs.date ? string | Date : T extends typeof FIELD_TYPEs.dateTime ? string | Date : T extends typeof FIELD_TYPEs.toggleButton ? string : T extends typeof FIELD_TYPEs.autocomplete ? string | string[] : T extends typeof FIELD_TYPEs.switch ? boolean : T extends typeof FIELD_TYPEs.number ? number : T extends typeof FIELD_TYPEs.tel ? string : T extends typeof FIELD_TYPEs.json ? unknown : T extends typeof FIELD_TYPEs.textArray ? string[] : T extends typeof FIELD_TYPEs.custom ? unknown : T extends typeof FIELD_TYPEs.fileUpload ? PreviewableFile[] : T extends typeof FIELD_TYPEs.avatar ? PreviewableFile | null : unknown;
+type InferFormDataType<T extends FormTypeMap> = {
+    [K in keyof T]: GetDataType<T[K]>;
+};
+type StrictFieldConfig<T extends FormTypeMap, K extends keyof T = keyof T> = K extends unknown ? (T[K] extends typeof FIELD_TYPEs.text ? TextFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.select ? SelectFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.slider ? SliderFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.check ? CheckFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.date ? DateFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.dateTime ? DateTimeFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.toggleButton ? ToggleButtonFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.autocomplete ? AutocompleteFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.switch ? SwitchFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.number ? NumberFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.tel ? TelFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.json ? JsonFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.textArray ? TextArrayFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.custom ? CustomFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.fileUpload ? FileUploadFieldConfig<T> & {
+    name: K;
+} : T[K] extends typeof FIELD_TYPEs.avatar ? AvatarFieldConfig<T> & {
+    name: K;
+} : never) : never;
+type StrictRowConfig<T extends FormTypeMap> = Omit<RowConfig<T>, 'fields'> & {
+    fields: StrictFieldConfig<T>[];
+};
+type StrictFormConfig<T extends FormTypeMap> = Omit<FormConfig<T>, 'schema' | 'steps'> & ({
+    schema: StrictRowConfig<T>[];
+} | {
+    steps: StepConfig<T>[];
+});
+
+interface ConfiguredFormReturn<T extends FormTypeMap> {
+    methods: UseFormReturn<InferFormDataType<T>>;
+    config: StrictFormConfig<T>;
+    configError?: Error;
+}
+
+type UseFormProps<T extends FormTypeMap> = {
+    config: StrictFormConfig<T>;
+    onSubmit: (data: FieldValues) => void;
+    /** When true the undo button is shown (default: true) */
+    showUndo?: boolean;
+    /** When true the clear button is shown (default: true) */
+    showClear?: boolean;
+    /**
+     * Can be a React node or a function that receives the `methods` and returns nodes.
+     * Example: extraButtons={(methods) => <MyButtons methods={methods} />}
+     */
+    extraButtons?: React__default.ReactNode | ((methods: ConfiguredFormReturn<T>['methods']) => React__default.ReactNode);
+};
+
+/** Internal column IDs for system-generated columns. */
+declare const COL_ID_CONTROLS: "__controls__";
+declare const COL_ID_ACTIONS: "__actions__";
+type TableColumnDef<TData extends object> = ColumnDef<TData, unknown>;
+type TableActionContext<TData extends object> = {
+    row?: TData;
+    rowIndex?: number;
+    table: Table$1<TData>;
+};
+type TableActionBoolean<TData extends object> = boolean | ((context: TableActionContext<TData>) => boolean);
+type TableActionIntent = ButtonProps['color'];
+type TableActionConfirm = {
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    requireCheckLabel?: string;
+};
+type TableFormActionConfig<TData extends object, TFormMap extends FormTypeMap = FormTypeMap> = {
+    title: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    config: StrictFormConfig<TFormMap> | ((context: TableActionContext<TData>) => StrictFormConfig<TFormMap>);
+    getDefaultValues?: (context: TableActionContext<TData>) => Record<string, unknown>;
+    onSubmit: (payload: {
+        values: FieldValues;
+        /** Fields the user actually interacted with in the form (from react-hook-form `formState.dirtyFields`) */
+        dirtyFields: Record<string, boolean>;
+        context: TableActionContext<TData>;
+        close: () => void;
+    }) => void | Promise<void>;
+    onCancel?: (context: TableActionContext<TData>) => void;
+    showUndo?: UseFormProps<TFormMap>['showUndo'];
+    showClear?: UseFormProps<TFormMap>['showClear'];
+    extraButtons?: UseFormProps<TFormMap>['extraButtons'];
+};
+type TableActionBase<TData extends object> = {
+    id: string;
+    /** human-readable label (used for tooltip when iconOnly=true) */
+    label: React__default.ReactNode;
+    icon?: React__default.ReactNode;
+    /** when true the action renders as an icon button instead of a regular button */
+    iconOnly?: boolean;
+    intent?: TableActionIntent;
+    variant?: ButtonProps['variant'];
+    visibility?: TableActionBoolean<TData>;
+    disabled?: TableActionBoolean<TData>;
+    loading?: TableActionBoolean<TData>;
+    confirm?: TableActionConfirm;
+};
+type TableButtonAction<TData extends object> = TableActionBase<TData> & {
+    kind?: 'button';
+    onClick: (context: TableActionContext<TData>) => void | Promise<void>;
+};
+type TableFormAction<TData extends object, TFormMap extends FormTypeMap = FormTypeMap> = TableActionBase<TData> & {
+    kind: 'form';
+    form: TableFormActionConfig<TData, TFormMap>;
+};
+type TableAction<TData extends object, TFormMap extends FormTypeMap = FormTypeMap> = TableButtonAction<TData> | TableFormAction<TData, TFormMap>;
+type TableProps<TData extends object, TFormMap extends FormTypeMap = FormTypeMap> = {
+    columns: TableColumnDef<TData>[];
+    data: TData[];
+    loading?: boolean;
+    emptyMessage?: React__default.ReactNode;
+    emptyDescription?: React__default.ReactNode;
+    dense?: boolean;
+    getRowId?: (row: TData, index: number, parent?: {
+        id: string;
+        index: number;
+    }) => string;
+    rowActions?: TableAction<TData, TFormMap>[];
+    tableActions?: TableAction<TData, TFormMap>[];
+    actionColumnHeader?: React__default.ReactNode;
+    sorting?: SortingState;
+    defaultSorting?: SortingState;
+    onSortingChange?: (sorting: SortingState) => void;
+    globalFilter?: string;
+    defaultGlobalFilter?: string;
+    onGlobalFilterChange?: (globalFilter: string) => void;
+    enableFiltering?: boolean;
+    filterPlaceholder?: string;
+    columnFilters?: ColumnFiltersState;
+    defaultColumnFilters?: ColumnFiltersState;
+    onColumnFiltersChange?: (columnFilters: ColumnFiltersState) => void;
+    enableColumnFilters?: boolean;
+    columnFilterPlaceholder?: string;
+    grouping?: GroupingState;
+    defaultGrouping?: GroupingState;
+    onGroupingChange?: (grouping: GroupingState) => void;
+    enableGrouping?: boolean;
+    pagination?: PaginationState;
+    defaultPagination?: PaginationState;
+    onPaginationChange?: (pagination: PaginationState) => void;
+    columnPinning?: ColumnPinningState;
+    defaultColumnPinning?: ColumnPinningState;
+    onColumnPinningChange?: (columnPinning: ColumnPinningState) => void;
+    enableColumnPinning?: boolean;
+    columnSizing?: ColumnSizingState;
+    defaultColumnSizing?: ColumnSizingState;
+    onColumnSizingChange?: (columnSizing: ColumnSizingState) => void;
+    enableColumnResizing?: boolean;
+    columnResizeMode?: 'onChange' | 'onEnd';
+    rowSelection?: RowSelectionState;
+    defaultRowSelection?: RowSelectionState;
+    onRowSelectionChange?: (rowSelection: RowSelectionState) => void;
+    enableRowSelection?: boolean;
+    enablePagination?: boolean;
+    pageSizeOptions?: number[];
+    stickyHeader?: boolean;
+    bodyMaxHeight?: number | string;
+    enableExpanding?: boolean;
+    expanded?: ExpandedState;
+    defaultExpanded?: ExpandedState;
+    onExpandedChange?: (expanded: ExpandedState) => void;
+    getRowCanExpand?: (row: Row<TData>) => boolean;
+    renderExpandedRow?: (row: TData, index: number, table: Table$1<TData>) => React__default.ReactNode;
+};
+type SortingUpdater = Updater<SortingState>;
+type GlobalFilterUpdater = Updater<string>;
+type ColumnFiltersUpdater = Updater<ColumnFiltersState>;
+type GroupingUpdater = Updater<GroupingState>;
+type PaginationUpdater = Updater<PaginationState>;
+type ColumnPinningUpdater = Updater<ColumnPinningState>;
+type ColumnSizingUpdater = Updater<ColumnSizingState>;
+type RowSelectionUpdater = Updater<RowSelectionState>;
+type ExpandedUpdater = Updater<ExpandedState>;
+
+declare function TableInner<TData extends object, TFormMap extends FormTypeMap = FormTypeMap>(props: TableProps<TData, TFormMap>): react_jsx_runtime.JSX.Element;
+declare const Table: typeof TableInner;
+
+declare const TableStyledWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
+declare const tableTheme: {
+    readonly styleOverrides: {
+        readonly root: {
+            readonly borderCollapse: "separate";
+            readonly borderSpacing: 0;
+            readonly tableLayout: "fixed";
+            readonly backgroundColor: "var(--table-bg, var(--mui-palette-background-paper))";
+        };
+    };
+};
+declare const tableContainerTheme: {
+    readonly styleOverrides: {
+        readonly root: {
+            readonly width: "100%";
+            readonly overflowX: "auto";
+            readonly containerType: "inline-size";
+            readonly containerName: "sdui-table";
+        };
+    };
+};
+declare const tableHeadTheme: {
+    readonly styleOverrides: {
+        readonly root: {
+            readonly backgroundColor: "var(--table-bg, var(--mui-palette-background-paper))";
+        };
+    };
+};
+declare const tableSortLabelTheme: {
+    readonly styleOverrides: {
+        readonly root: {
+            readonly '&.Mui-active': {
+                readonly color: "var(--table-sort-label-active-color)";
+                readonly "& .MuiTableSortLabel-icon": {
+                    readonly color: "var(--table-sort-label-icon-color)";
+                };
+            };
+            readonly "& .MuiTableSortLabel-icon": {
+                readonly color: "var(--table-sort-label-icon-color)";
+            };
+        };
+    };
+};
+declare const tableCellTheme: {
+    readonly defaultProps: {
+        readonly size: "small";
+    };
+    readonly styleOverrides: {
+        readonly root: {
+            readonly whiteSpace: "nowrap";
+            readonly overflow: "hidden";
+            readonly textOverflow: "ellipsis";
+            readonly verticalAlign: "middle";
+            readonly borderBottomColor: "var(--table-divider-color, var(--mui-palette-divider))";
+            readonly backgroundColor: "transparent";
+        };
+        readonly head: {
+            readonly fontWeight: "var(--table-header-font-weight, 700)";
+            readonly backgroundColor: "var(--table-bg, var(--mui-palette-background-paper))";
+            readonly '& [data-table-filter-trigger]': {
+                readonly transition: "opacity 120ms ease";
+            };
+            readonly '@media (hover: hover) and (pointer: fine)': {
+                readonly '& [data-table-filter-trigger]': {
+                    readonly opacity: 0;
+                };
+                readonly '&:hover [data-table-filter-trigger]': {
+                    readonly opacity: 1;
+                };
+                readonly '& [data-table-filter-trigger]:focus-visible': {
+                    readonly opacity: 1;
+                };
+                readonly '& [data-table-filter-trigger][data-active="true"]': {
+                    readonly opacity: 1;
+                };
+            };
+        };
+    };
+};
+declare const tablePaginationTheme: {
+    readonly styleOverrides: {
+        readonly root: {
+            readonly borderTop: "1px solid var(--table-divider-color, var(--mui-palette-divider))";
+        };
+        readonly actions: ({ theme }: _mui_material.TablePaginationOwnProps & _mui_material.TablePaginationSlotsAndSlotProps & _mui_material_OverridableComponent.CommonProps & Omit<_mui_material.TablePaginationBaseProps, "color" | "content" | "height" | "page" | "translate" | "width" | "padding" | "className" | "style" | "classes" | "ref" | "sx" | "abbr" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "size" | "disabled" | "slots" | "slotProps" | "variant" | "count" | "align" | "colSpan" | "headers" | "rowSpan" | "scope" | "SelectProps" | "valign" | "sortDirection" | "ActionsComponent" | "backIconButtonProps" | "getItemAriaLabel" | "labelDisplayedRows" | "labelRowsPerPage" | "nextIconButtonProps" | "onPageChange" | "onRowsPerPageChange" | "rowsPerPage" | "rowsPerPageOptions" | "showFirstButton" | "showLastButton"> & {
+            component?: React.ElementType | undefined;
+        } & Record<string, unknown> & {
+            ownerState: _mui_material.TablePaginationOwnProps & _mui_material.TablePaginationSlotsAndSlotProps & _mui_material_OverridableComponent.CommonProps & Omit<_mui_material.TablePaginationBaseProps, "color" | "content" | "height" | "page" | "translate" | "width" | "padding" | "className" | "style" | "classes" | "ref" | "sx" | "abbr" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "size" | "disabled" | "slots" | "slotProps" | "variant" | "count" | "align" | "colSpan" | "headers" | "rowSpan" | "scope" | "SelectProps" | "valign" | "sortDirection" | "ActionsComponent" | "backIconButtonProps" | "getItemAriaLabel" | "labelDisplayedRows" | "labelRowsPerPage" | "nextIconButtonProps" | "onPageChange" | "onRowsPerPageChange" | "rowsPerPage" | "rowsPerPageOptions" | "showFirstButton" | "showLastButton"> & {
+                component?: React.ElementType | undefined;
+            } & Record<string, unknown>;
+        } & {
+            theme: Omit<_mui_material.Theme, "components" | "palette"> & _mui_material.CssVarsTheme;
+        }) => {
+            display: "flex";
+            gap: string;
+            marginRight: string;
+        };
+    };
+};
+declare const tableEmptyCellSx: {
+    readonly p: 0;
+    readonly width: "100%";
+    readonly borderBottom: "none";
+    readonly whiteSpace: "normal";
+    readonly overflow: "visible";
+    readonly textAlign: "center";
+    readonly verticalAlign: "middle";
+};
+declare const TablePlaceholderRoot: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
+
+type PercentageBaseType = 'total-sum' | 'group-sum' | 'max-value' | number;
+interface PercentageBarProps<TData, TValue> {
+    context: CellContext<TData, TValue>;
+    baseType?: PercentageBaseType;
+    /**
+     * Optional custom color stops (0-100)
+     * Defaults to: a gradient approach or changing colors from green to red based on percentage
+     */
+    getColor?: (percentage: number) => string;
+}
+declare function PercentageBar<TData extends object, TValue>({ context, baseType, getColor, }: PercentageBarProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function renderPercentageBar<TData extends object>(options?: Omit<PercentageBarProps<TData, unknown>, 'context'>): (context: CellContext<TData, unknown>) => react_jsx_runtime.JSX.Element;
+
+export { COL_ID_ACTIONS, COL_ID_CONTROLS, type ColumnFiltersUpdater, type ColumnPinningUpdater, type ColumnSizingUpdater, type ExpandedUpdater, type GlobalFilterUpdater, type GroupingUpdater, type PaginationUpdater, PercentageBar, type PercentageBarProps, type PercentageBaseType, type RowSelectionUpdater, type SortingUpdater, Table, type TableAction, type TableActionBase, type TableActionBoolean, type TableActionConfirm, type TableActionContext, type TableActionIntent, type TableButtonAction, type TableColumnDef, type TableFormAction, type TableFormActionConfig, TablePlaceholderRoot, type TableProps, TableStyledWrapper, renderPercentageBar, tableCellTheme, tableContainerTheme, tableEmptyCellSx, tableHeadTheme, tablePaginationTheme, tableSortLabelTheme, tableTheme };