@evoke-platform/ui-components 1.13.0-dev.6 → 1.13.0

package/dist/published/components/custom/FormV2/components/utils.js

@@ -115,27 +115,9 @@ export const getEntryId = (entry) => {
                 ? entry.input.id
                 : undefined;
 };
-const getEntryType = (entry, parameters) => {
-    if (entry?.type === 'inputField') {
-        return entry?.input?.type;
-    }
-    else if (entry?.type === 'input') {
-        // For 'input' type entries, look up the parameter by parameterId
-        const parameter = parameters?.find((param) => param.id === entry.parameterId);
-        return parameter?.type;
-    }
-};
 export function getPrefixedUrl(url) {
     const wcsMatchers = ['/apps', '/pages', '/widgets'];
-    const dataMatchers = [
-        '/objects',
-        '/correspondenceTemplates',
-        '/documents',
-        '/payments',
-        '/forms',
-        '/locations',
-        '/files',
-    ];
+    const dataMatchers = ['/objects', '/correspondenceTemplates', '/documents', '/payments', '/forms', '/locations'];
     const signalrMatchers = ['/hubs'];
     const accessManagementMatchers = ['/users'];
     const workflowMatchers = ['/workflows'];
@@ -487,90 +469,53 @@ export const docProperties = [
         type: 'string',
     },
 ];
-export const uploadFiles = async (files, apiServices, actionId = '_create', linkTo, shortCircuit = true) => {
+/**
+ * Upload files using the POST /files endpoint for sys__file objects
+ */
+export const uploadFiles = async (files, apiServices, actionId = '_create', metadata, linkTo) => {
     // Separate already uploaded files from files that need uploading
     const alreadyUploaded = files.filter((file) => !('size' in file));
     const filesToUpload = files.filter((file) => 'size' in file);
-    let failedUpload = false;
-    // Upload all files in parallel, handling each result individually
-    const uploadPromises = [];
-    for (const file of filesToUpload) {
+    // Upload all files in parallel
+    const uploadPromises = filesToUpload.map(async (file) => {
         const formData = new FormData();
         formData.append('file', file);
         formData.append('actionId', actionId);
         formData.append('objectId', 'sys__file');
-        formData.append('input', JSON.stringify({ name: file.name, contentType: file.type }));
+        if (metadata) {
+            for (const [key, value] of Object.entries(metadata)) {
+                formData.append(key, value);
+            }
+        }
         if (linkTo) {
             formData.append('linkTo', JSON.stringify(linkTo));
         }
-        const uploadPromise = (async () => {
-            try {
-                const fileInstance = await apiServices.post(getPrefixedUrl(`/files`), formData);
-                return {
-                    id: fileInstance.id,
-                    name: fileInstance.name,
-                    unsaved: true,
-                };
-            }
-            catch (error) {
-                console.error(`Failed to upload file ${file.name}:`, error);
-                failedUpload = true;
-            }
-        })();
-        uploadPromises.push(uploadPromise);
-    }
-    if (!shortCircuit) {
-        // Wait for all upload attempts to complete (successes and failures)
-        const uploadResults = await Promise.allSettled(uploadPromises);
-        const uploadedFiles = uploadResults
-            .filter((result) => result.status === 'fulfilled' && !!result.value)
-            .map((result) => result.value);
-        const failedCount = filesToUpload.length - uploadedFiles.length;
+        const fileInstance = await apiServices.post(getPrefixedUrl(`/files`), formData);
         return {
-            successfulUploads: [...alreadyUploaded, ...uploadedFiles],
-            errorMessage: failedCount > 0 ? `Failed to upload ${failedCount} file(s)` : undefined,
+            id: fileInstance.id,
+            name: fileInstance.name,
         };
-    }
+    });
     const uploadedFiles = await Promise.all(uploadPromises);
-    if (failedUpload) {
-        return {
-            successfulUploads: [],
-            errorMessage: 'An error occurred when uploading files',
-        };
-    }
-    return {
-        successfulUploads: [...alreadyUploaded, ...uploadedFiles],
-    };
+    return [...alreadyUploaded, ...uploadedFiles];
 };
 /**
  * Creates file links for uploaded files by calling the objects endpoint with sys__fileLink
  * This is used after instance creation when the instance ID becomes available
  */
-export const createFileLinks = async (fileReferences, linkedInstance, apiServices) => {
-    // Link files in parallel, handling each result individually
-    const linkPromises = [];
-    for (const file of fileReferences) {
-        const linkPromise = (async () => {
-            try {
-                await apiServices.post(getPrefixedUrl(`/objects/sys__fileLink/instances`), {
-                    name: 'File Link',
-                    file: { id: file.id, name: file.name },
-                    linkedInstance,
-                }, {
-                    params: {
-                        actionId: '_create',
-                    },
-                });
-            }
-            catch (error) {
-                console.error(`Failed to create file link for ${file.name}:`, error);
-                // The file remains unlinked and can be retried later
-            }
-        })();
-        linkPromises.push(linkPromise);
-    }
-    // Wait for all linking attempts to complete (successes and failures)
-    await Promise.allSettled(linkPromises);
+export const createFileLinks = async (files, linkedInstance, apiServices) => {
+    const linkPromises = files.map(async (file) => {
+        await apiServices.post(getPrefixedUrl(`/objects/sys__fileLink/instances`), {
+            name: 'File Link',
+            file: { id: file.id, name: file.name },
+            linkedInstance,
+        }, {
+            params: {
+                actionId: '_create',
+            },
+        });
+    });
+    await Promise.all(linkPromises);
 };
 export const uploadDocuments = async (files, metadata, apiServices, instanceId, objectId) => {
     const allDocuments = [];
@@ -598,29 +543,20 @@ export const uploadDocuments = async (files, metadata, apiServices, instanceId,
 export const deleteDocuments = async (submittedFields, requestSuccess, apiServices, object, instance, action, setSnackbarError) => {
     const documentProperties = action?.parameters
         ? action.parameters.filter((param) => ['document', 'file'].includes(param.type))
-        : object.properties?.filter((prop) => ['document', 'file'].includes(prop.type));
+        : object?.properties?.filter((prop) => ['document', 'file'].includes(prop.type));
     for (const docProperty of documentProperties ?? []) {
         const savedValue = submittedFields[docProperty.id];
-        const originalValue = instance[docProperty.id];
+        const originalValue = instance?.[docProperty.id];
         const documentsToRemove = requestSuccess
             ? (originalValue?.filter((file) => !savedValue?.some((f) => f.id === file.id)) ?? [])
             : (savedValue?.filter((file) => !originalValue?.some((f) => f.id === file.id)) ?? []);
         for (const doc of documentsToRemove) {
             try {
-                // Build context for state model
-                const fieldType = docProperty.type === 'file' ? 'file' : 'document';
-                if (fieldType === 'file') {
-                    // For file properties, unlink the file. Don't delete the actual file
-                    // since other instances may be using it.
-                    await apiServices.post(getPrefixedUrl(`/files/${doc.id}/unlinkInstance`), {
-                        linkedInstanceId: instance.id,
-                        linkedObjectId: object.id,
-                    });
-                }
-                else {
-                    // For document properties, delete the document
-                    await apiServices.delete(getPrefixedUrl(`/objects/${object.id}/instances/${instance.id}/documents/${doc.id}`));
-                }
+                // Use different endpoints based on property type
+                const deleteEndpoint = docProperty.type === 'file'
+                    ? getPrefixedUrl(`/files/${doc.id}`)
+                    : getPrefixedUrl(`/objects/${object.id}/instances/${instance.id}/documents/${doc.id}`);
+                await apiServices?.delete(deleteEndpoint);
             }
             catch (error) {
                 if (error) {
@@ -635,28 +571,16 @@ export const deleteDocuments = async (submittedFields, requestSuccess, apiServic
         }
     }
 };
-async function handleUploads(files, propertyType, entry, apiServices, objectId, instanceId) {
-    if (propertyType === 'file') {
-        // Get the createActionId from display options, default to '_create'
-        const createActionId = entry?.display?.createActionId ?? '_create';
-        return await uploadFiles(files, apiServices, createActionId, instanceId ? { id: instanceId, objectId } : undefined);
-    }
-    else if (propertyType === 'document' && instanceId) {
-        try {
-            const docs = await uploadDocuments(files, {
-                type: '',
-                view_permission: '',
-                ...entry?.documentMetadata,
-            }, apiServices, instanceId, objectId);
-            return { successfulUploads: docs };
-        }
-        catch (error) {
-            console.error('Error uploading documents:', error);
-            return { successfulUploads: [], errorMessage: 'Error uploading documents' };
-        }
-    }
-    return { successfulUploads: [] };
-}
+const getEntryType = (entry, parameters) => {
+    if (entry?.type === 'inputField') {
+        return entry.input.type;
+    }
+    else if (entry?.type === 'input') {
+        // For 'input' type entries, look up the parameter by parameterId
+        const parameter = parameters?.find((param) => param.id === entry.parameterId);
+        return parameter?.type;
+    }
+};
 /**
  * Transforms a form submission into a format safe for API submission.
  *
@@ -674,45 +598,45 @@ export async function formatSubmission(submission, apiServices, objectId, instan
     if (associatedObject) {
         delete submission[associatedObject.propertyId];
     }
-    const allEntries = getUnnestedEntries(form?.entries ?? []);
+    const allEntries = getUnnestedEntries(form?.entries ?? []) ?? [];
     for (const [key, value] of Object.entries(submission)) {
         const entry = allEntries?.find((entry) => getEntryId(entry) === key);
         if (isArray(value)) {
-            const propertyType = getEntryType(entry, parameters);
-            // The only array types we need to handle specially are 'file' and 'document'.
-            if (propertyType !== 'file' && propertyType !== 'document') {
-                continue;
-            }
-            // Only upload if array contains File instances (not SavedDocumentReference).
+            // Only upload if array contains File instances (not SavedDocumentReference)
             const fileInArray = value.some((item) => item instanceof File);
             if (fileInArray && apiServices && objectId) {
-                const result = await handleUploads(value, propertyType ?? '', entry, apiServices, objectId, instanceId);
-                if (result.errorMessage) {
-                    setSnackbarError?.({
-                        showAlert: true,
-                        // Provide generic message since we're ignoring a partial upload.
-                        message: `An error occurred while uploading associated ${propertyType === 'file' ? 'files' : 'documents'}`,
-                        isError: true,
-                    });
-                    return submission;
+                // Determine property type from the entry
+                const parameterType = getEntryType(entry, parameters);
+                try {
+                    let uploadedDocuments = [];
+                    if (parameterType === 'file') {
+                        uploadedDocuments = await uploadFiles(value, apiServices, '_create', {
+                            ...entry?.documentMetadata,
+                        }, 
+                        // Only pass linkTo if instanceId exists (update action)
+                        instanceId ? { id: instanceId, objectId } : undefined);
+                    }
+                    else if (parameterType === 'document' && instanceId) {
+                        uploadedDocuments = await uploadDocuments(value, {
+                            type: '',
+                            view_permission: '',
+                            ...entry?.documentMetadata,
+                        }, apiServices, instanceId, objectId);
+                    }
+                    submission[key] = uploadedDocuments;
                 }
-                else {
-                    // Filter out 'unsaved' flag before submission since the api doesn't know about it.
-                    submission[key] = result.successfulUploads.map((file) => ({ id: file.id, name: file.name }));
+                catch (err) {
+                    if (err) {
+                        setSnackbarError &&
+                            setSnackbarError({
+                                showAlert: true,
+                                message: `An error occurred while uploading associated ${parameterType === 'file' ? 'files' : 'documents'}`,
+                                isError: true,
+                            });
+                    }
+                    return submission;
                 }
             }
-            else {
-                // Filter out 'unsaved' flag before submission since the api doesn't know about it.
-                submission[key] = value
-                    // This should never happen but it's possible that the else branch
-                    // is reached because either 'apiServices' or 'objectId' is undefined.
-                    // If that's the case the submission will fail if we submit File blobs.
-                    .filter((file) => !(file instanceof File))
-                    .map((file) => ({
-                    id: file.id,
-                    name: file.name,
-                }));
-            }
             // if there are address fields with no value address needs to be set to undefined to be able to submit
         }
         else if (typeof value === 'object' && value !== null) {
@@ -725,8 +649,7 @@ export async function formatSubmission(submission, apiServices, objectId, instan
                 submission[key] =
                     entry &&
                         ['input', 'inputField'].includes(entry.type) &&
-                        (entry.display?.relatedObjectId ||
-                            associatedObject?.objectId)
+                        entry.display?.relatedObjectId
                         ? pick(value, 'id', 'name', 'objectId')
                         : pick(value, 'id', 'name');
             }

package/dist/published/components/custom/FormV2/tests/FormRenderer.test.js

@@ -1483,7 +1483,7 @@ describe('FormRenderer', () => {
             await user.click(addButton);
             await screen.findByRole('dialog');
             // Make sure other form entry is present
-            await screen.findByRole('textbox', { name: 'Name *' });
+            await screen.findByRole('textbox', { name: /Name */i });
             const relatedObjectField = screen.queryByRole('textbox', { name: 'Related Object' });
             expect(relatedObjectField).not.toBeInTheDocument();
         });
@@ -1502,7 +1502,7 @@ describe('FormRenderer', () => {
             const addButton = await screen.findByRole('button', { name: /add/i });
             await user.click(addButton);
             await screen.findByRole('dialog');
-            const nameField = await screen.findByRole('textbox', { name: 'Name *' });
+            const nameField = await screen.findByRole('textbox', { name: /Name */ });
             await user.type(nameField, 'New Collection Item');
             const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
             await user.click(submitButton);

package/dist/published/components/custom/FormV2/tests/FormRendererContainer.test.js

@@ -997,6 +997,90 @@ describe('FormRendererContainer', () => {
             });
         });
     });
+    it('should display title by default', async () => {
+        const form = {
+            id: 'simpleForm',
+            name: 'Simple Form',
+            entries: [],
+            actionId: '_create',
+            objectId: 'simpleObject',
+        };
+        const simpleObject = {
+            id: 'simpleObject',
+            name: 'Simple Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    parameters: [],
+                    outputEvent: 'created',
+                },
+            ],
+            properties: [],
+        };
+        server.use(http.get(`/api/data/objects/${simpleObject.id}/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
+        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, dataType: "objectInstances" }));
+        await screen.findByText('Simple Form');
+    });
+    it('should display title', async () => {
+        const form = {
+            id: 'simpleForm',
+            name: 'Simple Form',
+            entries: [],
+            actionId: '_create',
+            objectId: 'simpleObject',
+        };
+        const simpleObject = {
+            id: 'simpleObject',
+            name: 'Simple Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    parameters: [],
+                    outputEvent: 'created',
+                },
+            ],
+            properties: [],
+        };
+        server.use(http.get(`/api/data/objects/${simpleObject.id}/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
+        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, title: {
+                hidden: false,
+            }, dataType: "objectInstances" }));
+        await screen.findByText('Simple Form');
+    });
+    it('should not display title', async () => {
+        const form = {
+            id: 'simpleForm',
+            name: 'Simple Form',
+            entries: [],
+            actionId: '_create',
+            objectId: 'simpleObject',
+        };
+        const simpleObject = {
+            id: 'simpleObject',
+            name: 'Simple Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    parameters: [],
+                    outputEvent: 'created',
+                },
+            ],
+            properties: [],
+        };
+        server.use(http.get(`/api/data/objects/${simpleObject.id}/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
+        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, title: {
+                hidden: true,
+            }, dataType: "objectInstances" }));
+        await waitFor(() => {
+            expect(screen.queryByText('Simple Form')).not.toBeInTheDocument();
+        });
+    });
     it('should display a submit button', async () => {
         const form = {
             id: 'simpleForm',

package/dist/published/components/custom/HistoryLog/HistoryData.js

@@ -6,8 +6,7 @@ import React from 'react';
 import { Typography } from '../../core';
 import { Box, Grid } from '../../layout';
 import DisplayedProperty from './DisplayedProperty';
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { format } = require('small-date');
+import { format } from 'small-date';
 export const nanoid = customAlphabet(uppercase + lowercase);
 const styles = {
     timelineHeader: {

package/dist/published/components/custom/HistoryLog/index.js

@@ -9,8 +9,7 @@ import Box from '../../layout/Box';
 import HistoryFilter from './Filter';
 import HistoricalData from './HistoryData';
 import HistoryLoading from './HistoryLoading';
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { format } = require('small-date');
+import { format } from 'small-date';
 /**
  * Renders a timeline of the instance's history log.
  * Users can filter the history by type and sort by date.

package/dist/published/components/custom/ViewDetailsV2/InstanceEntryRenderer.js

@@ -1,6 +1,5 @@
 import { useApiServices, useApp, } from '@evoke-platform/context';
 import { CancelRounded, CheckCircleRounded } from '@mui/icons-material';
-import DOMPurify from 'dompurify';
 import { isEmpty, isNil } from 'lodash';
 import { DateTime } from 'luxon';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -17,6 +16,7 @@ import { Document } from '../FormV2/components/FormFieldTypes/DocumentFiles/Docu
 import { Image } from '../FormV2/components/FormFieldTypes/Image';
 import PropertyProtection from '../FormV2/components/PropertyProtection';
 import { entryIsVisible, fetchCollectionData, filterEmptySections, getDefaultPages, isAddressProperty, } from '../FormV2/components/utils';
+import HtmlView from '../FormV2/components/HtmlView';
 function ViewOnlyEntryRenderer(props) {
     const { entry } = props;
     const { fetchedOptions, setFetchedOptions, object, instance, richTextEditor: RichTextEditor } = useFormContext();
@@ -53,36 +53,22 @@ function ViewOnlyEntryRenderer(props) {
     useEffect(() => {
         (async () => {
             if (object?.properties && !fetchedOptions[`${entryId}NavigationSlug`]) {
-                const property = object.properties.find((prop) => prop.id === entryId);
-                if (!property || property.type !== 'object') {
-                    return;
-                }
-                if (!property.objectId) {
-                    property.objectId = instance?.[entryId] && (instance?.[entryId]).objectId;
-                }
-                try {
-                    const pages = await getDefaultPages([property], defaultPages, findDefaultPageSlugFor);
-                    if (property?.objectId && pages[property.objectId]) {
-                        setNavigationSlug(pages[property.objectId]);
-                        setFetchedOptions({
-                            [`${entryId}NavigationSlug`]: pages[property.objectId],
-                        });
-                    }
-                }
-                catch (error) {
-                    console.error('Error fetching default pages:', error);
+                const pages = await getDefaultPages(object.properties, defaultPages, findDefaultPageSlugFor);
+                if (fieldDefinition?.objectId && pages[fieldDefinition.objectId]) {
+                    setNavigationSlug(pages[fieldDefinition.objectId]);
+                    setFetchedOptions({
+                        [`${entryId}NavigationSlug`]: pages[fieldDefinition.objectId],
+                    });
                 }
             }
         })();
-    }, [object, defaultPages, findDefaultPageSlugFor, instance, entryId, fetchedOptions]);
+    }, [object, defaultPages, findDefaultPageSlugFor, fieldDefinition]);
     // If the entry is hidden, clear its value and any nested values, and skip rendering
     if (!entryIsVisible(entry, instance)) {
         return null;
     }
     if (entry.type === 'content') {
-        return (React.createElement(Box, { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(entry.html) }, sx: {
-                fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
-            } }));
+        return React.createElement(HtmlView, { value: entry.html });
     }
     else if (entry.type === 'readonlyField') {
         if (isAddressProperty(entryId)) {
@@ -143,7 +129,7 @@ function ViewOnlyEntryRenderer(props) {
                 }
                 else if (fieldDefinition.type === 'document' || fieldDefinition.type === 'file') {
                     return (React.createElement(FieldWrapper, { inputId: entryId, inputType: fieldDefinition.type, label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, prefix: display?.prefix, suffix: display?.suffix, viewOnly: true },
-                        React.createElement(Document, { id: entryId, fieldType: fieldDefinition.type, error: false, value: fieldValue, canUpdateProperty: false })));
+                        React.createElement(Document, { id: entryId, error: false, value: fieldValue, canUpdateProperty: false })));
                 }
                 else if (fieldDefinition.type === 'collection') {
                     return fieldDefinition?.manyToManyPropertyId ? (middleObject && initialMiddleObjectInstances && (React.createElement(FieldWrapper, { inputId: entryId, inputType: 'collection', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, viewOnly: true },

package/dist/published/components/custom/ViewDetailsV2/ViewDetailsV2Container.d.ts

@@ -2,6 +2,9 @@ import React, { ComponentType } from 'react';
 import { BaseProps, SimpleEditorProps } from '../FormV2/components/types';
 import { FormRendererProps } from '../FormV2/FormRenderer';
 export type ViewDetailsV2ContainerProps = BaseProps & {
+    title?: {
+        hidden?: boolean;
+    };
     panelLayoutId?: string;
     instanceId?: string;
     objectId: string;

package/dist/published/components/custom/ViewDetailsV2/ViewDetailsV2Container.js

@@ -10,7 +10,7 @@ import Header from '../FormV2/components/Header';
 import { assignIdsToSectionsAndRichText, getPrefixedUrl } from '../FormV2/components/utils';
 import ViewOnlyEntryRenderer from './InstanceEntryRenderer';
 function ViewDetailsV2Container(props) {
-    const { instanceId, panelLayoutId, objectId, richTextEditor, renderHeader, renderBody } = props;
+    const { instanceId, panelLayoutId, objectId, title, richTextEditor, renderHeader, renderBody } = props;
     const apiServices = useApiServices();
     const [sanitizedObject, setSanitizedObject] = useState();
     const [instance, setInstance] = useState();
@@ -85,6 +85,7 @@ function ViewDetailsV2Container(props) {
     const isLoading = (instanceId && !instance) || !panelLayout || !sanitizedObject;
     const hasSections = updatedEntries.some((entry) => entry.type === 'sections');
     const headerProps = {
+        hideTitle: title?.hidden === true,
         title: panelLayout?.name,
         onExpandAll: handleExpandAll,
         onCollapseAll: handleCollapseAll,
@@ -103,6 +104,7 @@ function ViewDetailsV2Container(props) {
                 (renderHeader ? renderHeader({ ...headerProps }) : React.createElement(Header, { ...headerProps })),
             React.createElement(Box, { sx: {
                     paddingX: isSm || isXs ? 2 : 3,
+                    paddingY: isSm || isXs ? '6px' : '14px',
                     borderTop: '1px solid #e9ecef',
                 } },
                 React.createElement(FormContext.Provider, { value: {

package/dist/published/stories/Backdrop.stories.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("@mui/material").BackdropOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "components" | "color" | "className" | "style" | "classes" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "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" | "onResize" | "onResizeCapture" | "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" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "ref" | "transitionDuration" | "componentsProps" | "slotProps" | "slots" | "in" | "mountOnEnter" | "unmountOnExit" | "timeout" | "easing" | "addEndListener" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "appear" | "enter" | "exit" | "invisible" | "open" | "TransitionComponent"> & {
+}, "components" | "color" | "className" | "style" | "classes" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "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" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "ref" | "transitionDuration" | "componentsProps" | "slotProps" | "slots" | "in" | "mountOnEnter" | "unmountOnExit" | "timeout" | "easing" | "addEndListener" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "appear" | "enter" | "exit" | "invisible" | "open" | "TransitionComponent"> & {
     component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 }>;
 export default _default;
 export declare const Backdrop: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("@mui/material").BackdropOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "components" | "color" | "className" | "style" | "classes" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "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" | "onResize" | "onResizeCapture" | "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" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "ref" | "transitionDuration" | "componentsProps" | "slotProps" | "slots" | "in" | "mountOnEnter" | "unmountOnExit" | "timeout" | "easing" | "addEndListener" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "appear" | "enter" | "exit" | "invisible" | "open" | "TransitionComponent"> & {
+}, "components" | "color" | "className" | "style" | "classes" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "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" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "ref" | "transitionDuration" | "componentsProps" | "slotProps" | "slots" | "in" | "mountOnEnter" | "unmountOnExit" | "timeout" | "easing" | "addEndListener" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "appear" | "enter" | "exit" | "invisible" | "open" | "TransitionComponent"> & {
     component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 }>;