@evoke-platform/ui-components 1.16.0 → 1.17.0

package/dist/published/stories/CriteriaBuilder.stories.js

@@ -256,26 +256,19 @@ CriteriaBuilderRelatedObject.args = {
                             ],
                         },
                         {
-                            id: 'dynamic',
-                            name: 'Dynamic',
-                            type: 'object',
-                            children: [
-                                {
-                                    id: 'id',
-                                    name: 'ID',
-                                    type: 'string',
-                                },
-                                {
-                                    id: 'name',
-                                    name: 'Name',
-                                    type: 'string',
-                                },
-                                {
-                                    id: 'objectId',
-                                    name: 'Object Id',
-                                    type: 'string',
-                                },
-                            ],
+                            id: 'dynamic.id',
+                            name: 'Dynamic ID',
+                            type: 'string',
+                        },
+                        {
+                            id: 'dynamic.name',
+                            name: 'Dynamic Name',
+                            type: 'string',
+                        },
+                        {
+                            id: 'dynamic.objectId',
+                            name: 'Dynamic Object ID',
+                            type: 'string',
                         },
                         {
                             id: 'name',
@@ -559,48 +552,19 @@ CriteriaBuilderRelatedObject.args = {
                     required: false,
                 },
                 {
-                    id: 'dynamic',
-                    name: 'Dynamic',
-                    type: 'object',
-                    children: [
-                        {
-                            id: 'id',
-                            name: 'ID',
-                            type: 'string',
-                        },
-                        {
-                            id: 'name',
-                            name: 'Name',
-                            type: 'string',
-                        },
-                        {
-                            id: 'objectId',
-                            name: 'Object Id',
-                            type: 'string',
-                        },
-                    ],
+                    id: 'dynamic.id',
+                    name: 'Dynamic ID',
+                    type: 'string',
                 },
                 {
-                    id: 'dynamic2',
-                    name: 'Dynamic2',
-                    type: 'object',
+                    id: 'dynamic.name',
+                    name: 'Dynamic Name',
+                    type: 'string',
                 },
                 {
-                    id: 'address',
-                    name: 'Address',
-                    type: 'address',
-                    children: [
-                        {
-                            id: 'line1',
-                            name: 'Line 1',
-                            type: 'string',
-                        },
-                        {
-                            id: 'line2',
-                            name: 'Line 2',
-                            type: 'string',
-                        },
-                    ],
+                    id: 'dynamic.objectId',
+                    name: 'Dynamic Object Id',
+                    type: 'string',
                 },
             ],
         },
@@ -752,18 +716,6 @@ CriteriaBuilderRelatedObject.args = {
             {
                 'applicationType.status': 'DNP',
             },
-            {
-                'applicant.deleted': '1',
-            },
-            {
-                deleted: '1',
-            },
-            {
-                'applicant.license.expirationDate': '2025-01-16',
-            },
-            {
-                dynamic2: '1',
-            },
         ],
     },
     enablePresetValues: false,

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

@@ -2,7 +2,7 @@ import React from 'react';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
     richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
     value?: import("react-hook-form").FieldValues | undefined;
-    onSubmit?: ((data: import("react-hook-form").FieldValues) => Promise<void> | ((data: import("react-hook-form").FieldValues) => void)) | undefined;
+    onSubmit?: ((data: import("react-hook-form").FieldValues) => void) | undefined;
     onDiscardChanges?: (() => void) | undefined;
     onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
     hideTitle?: boolean | undefined;
@@ -15,7 +15,6 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string | undefined;
     } | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
     renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
@@ -25,7 +24,7 @@ export default _default;
 export declare const Editable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
     richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
     value?: import("react-hook-form").FieldValues | undefined;
-    onSubmit?: ((data: import("react-hook-form").FieldValues) => Promise<void> | ((data: import("react-hook-form").FieldValues) => void)) | undefined;
+    onSubmit?: ((data: import("react-hook-form").FieldValues) => void) | undefined;
     onDiscardChanges?: (() => void) | undefined;
     onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
     hideTitle?: boolean | undefined;
@@ -38,7 +37,6 @@ export declare const Editable: import("@storybook/types").AnnotatedStoryFn<impor
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string | undefined;
     } | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
     renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;
@@ -47,7 +45,7 @@ export declare const Editable: import("@storybook/types").AnnotatedStoryFn<impor
 export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../components/custom/FormV2/components/types").BaseProps & {
     richTextEditor?: React.ComponentType<import("../components/custom/FormV2/components/types").SimpleEditorProps> | undefined;
     value?: import("react-hook-form").FieldValues | undefined;
-    onSubmit?: ((data: import("react-hook-form").FieldValues) => Promise<void> | ((data: import("react-hook-form").FieldValues) => void)) | undefined;
+    onSubmit?: ((data: import("react-hook-form").FieldValues) => void) | undefined;
     onDiscardChanges?: (() => void) | undefined;
     onSubmitError?: import("react-hook-form").SubmitErrorHandler<import("react-hook-form").FieldValues> | undefined;
     hideTitle?: boolean | undefined;
@@ -60,7 +58,6 @@ export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<impo
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string | undefined;
     } | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
     renderBody?: ((props: import("../components/custom").BodyProps) => React.ReactNode) | undefined;

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

@@ -20,10 +20,6 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string | undefined;
-    } | {
-        instanceId: string;
-        objectId: string;
     } | undefined;
     renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
@@ -53,10 +49,6 @@ export declare const Editable: import("@storybook/types").AnnotatedStoryFn<impor
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string | undefined;
-    } | {
-        instanceId: string;
-        objectId: string;
     } | undefined;
     renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
@@ -85,10 +77,6 @@ export declare const DefaultForm: import("@storybook/types").AnnotatedStoryFn<im
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string | undefined;
-    } | {
-        instanceId: string;
-        objectId: string;
     } | undefined;
     renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
@@ -117,10 +105,6 @@ export declare const NoButtons: import("@storybook/types").AnnotatedStoryFn<impo
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string | undefined;
-    } | {
-        instanceId: string;
-        objectId: string;
     } | undefined;
     renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;
@@ -149,10 +133,6 @@ export declare const FormWithSections: import("@storybook/types").AnnotatedStory
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string | undefined;
-    } | {
-        instanceId: string;
-        objectId: string;
     } | undefined;
     renderContainer?: ((state: import("../components/custom/FormV2/FormRendererContainer").FormRendererState) => React.ReactNode) | undefined;
     renderHeader?: ((props: import("../components/custom").HeaderProps) => React.ReactNode) | undefined;

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

@@ -121,3 +121,18 @@ export declare const customerLayout: {
     };
     objectId: string;
 };
+export declare const formlet: {
+    id: string;
+    name: string;
+    entries: {
+        type: string;
+        input: {
+            type: string;
+            id: string;
+        };
+        display: {
+            label: string;
+            required: boolean;
+        };
+    }[];
+};

package/dist/published/stories/FormRendererData.js

@@ -571,6 +571,29 @@ export const mockEvokeForm = {
                 label: 'User',
             },
         },
+        {
+            display: {
+                booleanDisplay: 'checkbox',
+                label: 'Boolean',
+                required: false,
+            },
+            type: 'inputField',
+            input: {
+                type: 'boolean',
+                id: 'boolean',
+            },
+        },
+        {
+            type: 'inputField',
+            input: {
+                type: 'image',
+                id: 'image',
+            },
+            display: {
+                label: 'Image',
+                required: false,
+            },
+        },
     ],
     objectId: 'genericEvokeForm',
     actionId: '_update',
@@ -898,6 +921,28 @@ export const mockEvokeFormWithSections = {
                                         },
                                     ],
                                 },
+                                {
+                                    label: 'Nested Section 3',
+                                    entries: [
+                                        // This is how effective forms will show formlets
+                                        {
+                                            type: 'inputField',
+                                            input: {
+                                                type: 'date',
+                                                id: 'dateId1',
+                                            },
+                                            display: {
+                                                label: 'Date 1',
+                                                required: false,
+                                            },
+                                        },
+                                        // This is how non effective forms will show formlets
+                                        {
+                                            type: 'formlet',
+                                            formletId: 'formletId',
+                                        },
+                                    ],
+                                },
                             ],
                         },
                     ],
@@ -1057,3 +1102,21 @@ export const customerLayout = {
     },
     objectId: 'customers',
 };
+// Formlets
+export const formlet = {
+    id: 'formletId',
+    name: 'Formlet with no objectId',
+    entries: [
+        {
+            type: 'inputField',
+            input: {
+                type: 'date',
+                id: 'dateId2',
+            },
+            display: {
+                label: 'Date 2',
+                required: false,
+            },
+        },
+    ],
+};

package/dist/published/stories/sharedMswHandlers.js

@@ -1,5 +1,5 @@
 import { http, HttpResponse } from 'msw';
-import { customerLayout, instance, mockCustomerCreateForm, mockCustomerObject, mockCustomerUpdateForm, mockEvokeForm, mockEvokeFormWithSections, mockGenericEvokeFormObject, mockInstancesForCollection, mockInstancesForRelatedObject, mockMovieCreateForm, mockMovieObject, mockPeopleGenericObject, mockPeopleGenericObjectInstances, mockPeopleObject, mockPropertiesForCriteria, users, } from './FormRendererData';
+import { customerLayout, formlet, instance, mockCustomerCreateForm, mockCustomerObject, mockCustomerUpdateForm, mockEvokeForm, mockEvokeFormWithSections, mockGenericEvokeFormObject, mockInstancesForCollection, mockInstancesForRelatedObject, mockMovieCreateForm, mockMovieObject, mockPeopleGenericObject, mockPeopleGenericObjectInstances, mockPeopleObject, mockPropertiesForCriteria, users, } from './FormRendererData';
 import { mockGenericEvokeView, mockGenericEvokeViewWithSections, viewInstance } from './ViewDetailsV2Data';
 export const sharedObjectHandlers = [
     // Object fetches
@@ -55,6 +55,8 @@ export const sharedObjectHandlers = [
     http.get(/\/checkAccess$/, () => HttpResponse.json({ result: true })),
     // Layout fetches
     http.get('/api/data/objects/customers/tableLayouts/layoutId', () => HttpResponse.json(customerLayout)),
+    // Formlet fetches
+    http.get('/api/data/formlets/formletId', () => HttpResponse.json(formlet)),
     // General instance fetches
     http.get('/api/data/objects/:objectId/instances/:instanceId?', ({ params }) => {
         const { objectId, instanceId } = params;
@@ -104,7 +106,7 @@ export const sharedObjectHandlers = [
         return HttpResponse.json(data);
     }),
     // Form fetches
-    http.get('/api/data/forms/:formId?', ({ params, request }) => {
+    http.get('/api/data/forms/:formId/effective', ({ params, request }) => {
         const formId = Array.isArray(params.formId) ? params.formId[0] : params.formId;
         switch (formId) {
             case 'customerUpdateForm':

package/dist/published/theme/hooks.d.ts

@@ -154,7 +154,6 @@ export declare function useFormContext(): {
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string | undefined;
     } | undefined;
     form?: import("@evoke-platform/context").EvokeForm | undefined;
     width: number;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.16.0",
+    "version": "1.17.0",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -88,7 +88,7 @@
         "yalc": "^1.0.0-pre.53"
     },
     "peerDependencies": {
-        "@evoke-platform/context": "^1.8.0-0",
+        "@evoke-platform/context": "^1.8.0-dev.10",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },
@@ -123,7 +123,6 @@
         "html-react-parser": "^5.1.18",
         "json-logic-js-graphql": "^1.2.4",
         "luxon": "^2.5.2",
-        "mime": "^4.1.0",
         "nanoid": "^5.0.8",
         "nanoid-dictionary": "^4.3.0",
         "no-eval-handlebars": "^1.0.2",

package/dist/published/components/custom/FormV2/components/FormFieldTypes/FileContent.d.ts

@@ -1,12 +0,0 @@
-import { DocumentParameterValidation } from '@evoke-platform/context';
-import React from 'react';
-type FileContentProps = {
-    id: string;
-    canUpdateProperty: boolean;
-    error: boolean;
-    validate?: DocumentParameterValidation;
-    value: File | undefined;
-    hasDescription?: boolean;
-};
-export declare const FileContent: (props: FileContentProps) => React.JSX.Element;
-export {};

package/dist/published/components/custom/FormV2/components/FormFieldTypes/FileContent.js

@@ -1,197 +0,0 @@
-import { useApiServices } from '@evoke-platform/context';
-import prettyBytes from 'pretty-bytes';
-import React, { useCallback, useEffect, useState } from 'react';
-import { useDropzone } from 'react-dropzone';
-import { FileWithExtension, InfoRounded, LaunchRounded, TrashCan, UploadCloud } from '../../../../../icons';
-import { useFormContext } from '../../../../../theme/hooks';
-import { IconButton, Snackbar, Typography } from '../../../../core';
-import { Box, Grid } from '../../../../layout';
-import { getPrefixedUrl } from '../utils';
-import mime from 'mime';
-export const FileContent = (props) => {
-    const { id, canUpdateProperty, error, validate, hasDescription, value } = props;
-    const { handleChange, instance } = useFormContext();
-    const apiServices = useApiServices();
-    const [snackbarError, setSnackbarError] = useState();
-    const [file, setFile] = useState(value);
-    const [hasReadAccess, setHasReadAccess] = useState(false);
-    const maxSizeInBytes = Number.isFinite(validate?.maxSizeInKB)
-        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            validate.maxSizeInKB * 1000 // convert to bytes
-        : undefined;
-    const formattedMaxSize = maxSizeInBytes !== undefined ? prettyBytes(maxSizeInBytes) : '';
-    const { getRootProps, getInputProps, open, fileRejections } = useDropzone({
-        onDrop: (files) => handleUpload(files),
-        disabled: !!file,
-        accept: validate?.allowedFileExtensions
-            ? {
-                'type/custom': validate.allowedFileExtensions.map((extension) => extension.startsWith('.') ? extension : `.${extension}`),
-            }
-            : undefined,
-        maxSize: maxSizeInBytes,
-    });
-    let allowedTypesMessage = '';
-    if (validate?.allowedFileExtensions?.length) {
-        if (validate.allowedFileExtensions.length === 1) {
-            allowedTypesMessage = `Only ${validate.allowedFileExtensions[0]} files are allowed`;
-        }
-        else {
-            allowedTypesMessage = `Allowed file types are: ${validate.allowedFileExtensions.slice(0, -1).join(', ')} or ${validate.allowedFileExtensions.slice(-1)[0]}`;
-        }
-    }
-    useEffect(() => {
-        setFile(value);
-    }, [value]);
-    const checkPermissions = useCallback(async () => {
-        if (instance) {
-            try {
-                const response = await apiServices.get(getPrefixedUrl(`/objects/${instance.objectId}/instances/${instance.id}/checkAccess`), {
-                    params: {
-                        action: 'read',
-                        field: 'content',
-                    },
-                });
-                setHasReadAccess(response.result);
-            }
-            catch (error) {
-                setHasReadAccess(false);
-            }
-        }
-        else {
-            setHasReadAccess(true);
-        }
-    }, [apiServices, instance]);
-    useEffect(() => {
-        checkPermissions();
-    }, [checkPermissions]);
-    const handleUpload = async (files) => {
-        const file = files ? files[0] : undefined;
-        if (file)
-            setFile(file);
-        try {
-            handleChange && (await handleChange(id, file));
-        }
-        catch (error) {
-            console.error('Failed to update field:', error);
-            return;
-        }
-    };
-    const viewFileContent = async () => {
-        const contentType = instance ? instance.contentType : file?.type;
-        let url = '';
-        if (file && file.size > 0) {
-            url = URL.createObjectURL(file);
-        }
-        else if (instance) {
-            try {
-                const contentResponse = await apiServices.get(getPrefixedUrl(`/files/${instance.id}/content`), { responseType: 'blob' });
-                const blob = new Blob([contentResponse], { type: contentType });
-                url = window.URL.createObjectURL(blob);
-            }
-            catch (error) {
-                setSnackbarError({
-                    message: `Viewing the contents of ${instance.name} is currently not available.`,
-                    type: 'error',
-                });
-                return;
-            }
-        }
-        if (contentType &&
-            [
-                'application/pdf',
-                'image/jpeg',
-                'image/jpg',
-                'image/png',
-                'image/gif',
-                'image/bmp',
-                'image/webp',
-                'text/plain',
-            ].includes(contentType)) {
-            window.open(url, '_blank');
-        }
-        else {
-            const link = document.createElement('a');
-            link.href = url;
-            link.setAttribute('download', file?.name ?? '');
-            document.body.appendChild(link);
-            link.click();
-            // Clean up and remove the link
-            link.parentNode?.removeChild(link);
-        }
-    };
-    const errors = [];
-    if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-invalid-type'))) {
-        errors.push(`Invalid file extension. ${allowedTypesMessage}`);
-    }
-    if (fileRejections.some((fileRejection) => fileRejection.errors.some((error) => error.code === 'file-too-large'))) {
-        errors.push(`File size exceeds the maximum limit of ${formattedMaxSize}`);
-    }
-    return (React.createElement(React.Fragment, null,
-        file ? (React.createElement(Grid, { container: true, sx: {
-                width: '100%',
-                border: '1px solid #C4CDD5',
-                borderRadius: '6px',
-                margin: '5px 2px',
-                padding: ' 8px',
-                display: 'flex',
-                alignItems: 'center',
-            } },
-            React.createElement(Grid, { item: true, sx: { display: 'flex', justifyContent: 'center', padding: '7px', marginLeft: '4px' } },
-                React.createElement(FileWithExtension, { fontFamily: "Arial", fileExtension: mime.getExtension(file.type && file.type !== '' ? file.type : instance?.['contentType']) ?? undefined, sx: { height: '1.5em', width: '1.5em' } })),
-            React.createElement(Grid, { item: true, sx: { flex: 1, justifyContent: 'center', paddingBottom: '5px' } },
-                React.createElement(Grid, { item: true, xs: 12 },
-                    React.createElement(Typography, { sx: {
-                            fontSize: '14px',
-                            fontWeight: 700,
-                            lineHeight: '15px',
-                            paddingTop: '8px',
-                        } }, file.name)),
-                file.size ? (React.createElement(Grid, { item: true, xs: 12 },
-                    React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } }, prettyBytes(file.size)))) : null),
-            canUpdateProperty && (React.createElement(Grid, { item: true },
-                React.createElement(IconButton, { "aria-label": "Delete File", sx: { padding: '3px', color: '#637381', marginRight: '10px' }, onClick: () => {
-                        setFile(undefined);
-                        handleChange && handleChange(id, undefined);
-                    } },
-                    React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))),
-            hasReadAccess && (React.createElement(Grid, { item: true },
-                React.createElement(IconButton, { "aria-label": "View File Content", sx: { padding: '3px', color: '#637381', marginRight: '16px' }, onClick: () => viewFileContent() },
-                    React.createElement(LaunchRounded, { sx: { color: '#637381', fontSize: '22px' } })))))) : canUpdateProperty ? (React.createElement(Box, { sx: {
-                margin: '5px 0',
-                height: formattedMaxSize || allowedTypesMessage ? '115px' : '90px',
-                borderRadius: '8px',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                border: `1px dashed ${error ? 'red' : '#858585'}`,
-                position: 'relative',
-                cursor: 'pointer',
-            }, ...getRootProps(), onClick: open },
-            React.createElement("input", { ...getInputProps({ id }), ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined) }),
-            React.createElement(Grid, { container: true, sx: { width: '100%' } },
-                React.createElement(Grid, { item: true, xs: 12, sx: { display: 'flex', justifyContent: 'center', paddingBottom: '7px' } },
-                    React.createElement(UploadCloud, { sx: { color: '#919EAB', width: '50px', height: '30px' } })),
-                React.createElement(Grid, { item: true, xs: 12 },
-                    React.createElement(Typography, { variant: "body2", sx: { color: '#212B36', textAlign: 'center' } },
-                        "Drag and drop or",
-                        ' ',
-                        React.createElement(Typography, { component: 'span', color: 'primary', sx: { fontSize: '14px' } }, "select file"),
-                        ' ',
-                        "to upload"),
-                    allowedTypesMessage && (React.createElement(Typography, { sx: {
-                            color: '#637381',
-                            textAlign: 'center',
-                            fontSize: '12px',
-                        } },
-                        allowedTypesMessage,
-                        ".")),
-                    formattedMaxSize && (React.createElement(Typography, { sx: {
-                            color: '#637381',
-                            textAlign: 'center',
-                            fontSize: '12px',
-                        } }, `Maximum size is ${formattedMaxSize}.`)))))) : (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No file uploaded.")),
-        React.createElement(Snackbar, { open: !!snackbarError?.message, handleClose: () => setSnackbarError(null), message: snackbarError?.message, error: snackbarError?.type === 'error' }),
-        errors.length > 0 && (React.createElement(Box, { display: 'flex', alignItems: 'center' },
-            React.createElement(InfoRounded, { sx: { fontSize: '.75rem', marginRight: '3px', color: '#D3271B' } }),
-            React.createElement(Typography, { fontSize: '12px', color: '#D3271B', sx: { lineHeight: '18px' } }, errors.join('; ') + '.')))));
-};