@evoke-platform/ui-components 1.6.0-dev.3 → 1.6.0-dev.31

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

@@ -0,0 +1,183 @@
+import { useObject } from '@evoke-platform/context';
+import { isEqual } from 'lodash';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useResponsive } from '../../../theme';
+import { Button, Skeleton, Typography } from '../../core';
+import { Box } from '../../layout';
+import ActionButtons from './components/ActionButtons';
+import { FormContext } from './components/FormContext';
+import { RecursiveEntryRenderer } from './components/RecursiveEntryRenderer';
+import { convertDocToParameters, convertPropertiesToParams } from './components/utils';
+import { handleValidation } from './components/ValidationFiles/Validation';
+import ValidationErrorDisplay from './components/ValidationFiles/ValidationErrorDisplay';
+function FormRenderer(props) {
+    const { onSubmit, value, fieldHeight, richTextEditor, hideButtons, stickyFooter, onCancel, form, instance, onChange, onValidationChange, } = props;
+    const { entries, name: title, objectId, actionId, display } = form;
+    const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
+        defaultValues: value,
+    });
+    const hasSections = entries.some((entry) => entry.type === 'sections');
+    const isModal = !!document.querySelector('.MuiDialog-container');
+    const { isSm, isXs, smallerThan } = useResponsive();
+    const isSmallerThanMd = smallerThan('md');
+    const objectStore = useObject(objectId);
+    const [expandedSections, setExpandedSections] = useState([]);
+    const [fetchedOptions, setFetchedOptions] = useState({});
+    const [expandAll, setExpandAll] = useState();
+    const [action, setAction] = useState();
+    const [object, setObject] = useState();
+    const [triggerFieldReset, setTriggerFieldReset] = useState(false);
+    const updateFetchedOptions = (newData) => {
+        setFetchedOptions((prev) => ({
+            ...prev,
+            ...newData,
+        }));
+    };
+    function handleExpandAll() {
+        setExpandAll(true);
+    }
+    function handleCollapseAll() {
+        setExpandAll(false);
+    }
+    useEffect(() => {
+        (async () => {
+            try {
+                const object = await objectStore.get({ sanitized: true });
+                setObject(object);
+                if (actionId) {
+                    const action = object?.actions?.find((a) => a.id === actionId);
+                    setAction(action);
+                }
+            }
+            catch (error) {
+                console.error('Failed to fetch object or action:', error);
+            }
+        })();
+    }, [objectStore, actionId]);
+    useEffect(() => {
+        const currentValues = getValues();
+        if (value) {
+            for (const key of Object.keys(currentValues)) {
+                if (!isEqual(currentValues[key], value[key])) {
+                    setValue(key, value[key], { shouldValidate: true });
+                }
+            }
+            if (triggerFieldReset === true) {
+                setTriggerFieldReset(false);
+            }
+        }
+    }, [value]);
+    useEffect(() => {
+        if (onValidationChange) {
+            onValidationChange(errors);
+        }
+    }, [errors, onValidationChange]);
+    const handleReset = () => {
+        if (onCancel) {
+            onCancel();
+        }
+        else {
+            reset(instance); // clears react-hook-form state back to default values
+        }
+        setTriggerFieldReset(true);
+    };
+    const parameters = useMemo(() => {
+        if (form.id === 'documentForm') {
+            return convertDocToParameters(instance);
+        }
+        else if (action?.parameters) {
+            return action.parameters;
+        }
+        else if (object) {
+            // if forms actionId is synced with object properties
+            return convertPropertiesToParams(object);
+        }
+    }, [form.id, action?.parameters, object, instance]);
+    useEffect(() => {
+        handleValidation(entries, register, getValues(), action?.parameters, instance);
+    }, []);
+    if (entries && parameters && (!actionId || action)) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Box, { sx: {
+                    paddingX: isSmallerThanMd ? 2 : 3,
+                    paddingTop: '0px',
+                    borderBottom: '2px solid #F4F6F8',
+                } },
+                React.createElement(Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        flexWrap: 'wrap',
+                        paddingY: isSm || isXs ? 2 : 3,
+                    } },
+                    React.createElement(Typography, { sx: {
+                            fontSize: '20px',
+                            lineHeight: '30px',
+                            fontWeight: 700,
+                            flexGrow: '1',
+                        } }, title),
+                    isSmallerThanMd && hasSections && (React.createElement(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            maxHeight: '22px',
+                        } },
+                        React.createElement(Button, { variant: "text", size: "small", disableRipple: true, disabled: expandedSections.every((section) => section.expanded === true), sx: {
+                                color: '#212B36',
+                                borderRight: '1px solid #e5e8eb',
+                                borderRadius: '0px',
+                                '&:hover': {
+                                    backgroundColor: 'transparent',
+                                },
+                                fontWeight: 400,
+                                fontSize: '14px',
+                            }, onClick: handleExpandAll }, "Expand all"),
+                        React.createElement(Button, { variant: "text", size: "small", disableRipple: true, disabled: expandedSections.every((section) => section.expanded === false), sx: {
+                                color: '#212B36',
+                                '&:hover': {
+                                    backgroundColor: 'transparent',
+                                },
+                                fontWeight: 400,
+                                fontSize: '14px',
+                            }, onClick: handleCollapseAll }, "Collapse all")))),
+                React.createElement(ValidationErrorDisplay, { errors: errors, show: !!(isSubmitted && errors), formId: form.id, title: title })),
+            React.createElement(FormContext.Provider, { value: {
+                    fetchedOptions,
+                    setFetchedOptions: updateFetchedOptions,
+                    getValues,
+                    stickyFooter,
+                    object,
+                } },
+                React.createElement(Box, { sx: {
+                        padding: isModal ? '0px' : isSm || isXs ? 2 : 3,
+                        paddingBottom: '0px',
+                        paddingTop: !hasSections ? undefined : '0px',
+                    } },
+                    entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { fieldHeight: fieldHeight, key: index, entry: entry, handleChange: onChange, errors: errors, showSubmitError: !!(isSubmitted && errors), instance: instance, richTextEditor: richTextEditor, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, triggerFieldReset: triggerFieldReset, parameters: parameters }))),
+                    !hideButtons && (actionId || form.id === 'documentForm') && onSubmit && (React.createElement(Box, { sx: {
+                            ...(stickyFooter === false ? { position: 'static' } : { position: 'sticky' }),
+                            bottom: isModal ? -5 : isSmallerThanMd ? 0 : 24,
+                            zIndex: 1000,
+                            borderTop: action?.type !== 'delete' ? '1px solid #f4f6f8' : 'none',
+                            backgroundColor: '#fff',
+                            paddingY: isSmallerThanMd ? '16px' : '20px',
+                            paddingX: isSmallerThanMd ? '16px' : '20px',
+                            display: 'flex',
+                            justifyContent: isXs ? 'center' : 'flex-end',
+                            alignItems: 'center',
+                            marginX: isSmallerThanMd ? -2 : -3,
+                            marginBottom: '1px',
+                            borderRadius: '0px 0px 6px 6px',
+                        } },
+                        React.createElement(ActionButtons, { onSubmit: onSubmit, handleSubmit: handleSubmit, isModal: isModal, actionType: action?.type, submitButtonLabel: display?.submitLabel, onReset: handleReset, errors: errors, unregister: unregister, entries: entries, setValue: setValue, formId: form.id, instance: instance })))))));
+    }
+    else {
+        return (React.createElement(Box, { p: 2 },
+            React.createElement(Skeleton, null),
+            React.createElement(Skeleton, null),
+            React.createElement(Skeleton, null),
+            React.createElement(Skeleton, null),
+            React.createElement(Skeleton, null)));
+    }
+}
+export default FormRenderer;

package/dist/published/components/custom/FormV2/components/AccordionSections.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SectionsProps } from './types';
+declare function AccordionSections(props: SectionsProps): React.JSX.Element;
+export default AccordionSections;

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

@@ -0,0 +1,131 @@
+import { ExpandMoreOutlined } from '@mui/icons-material';
+import { nanoid } from 'nanoid';
+import React, { useEffect } from 'react';
+import { useResponsive } from '../../../../theme';
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../../core';
+import { Box } from '../../../layout';
+import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
+import { getErrorCountForSection } from './utils';
+function AccordionSections(props) {
+    const { entry, handleChange, fieldHeight, richTextEditor, instance, expandedSections, setExpandedSections, expandAll, setExpandAll, errors, parameters, triggerFieldReset, showSubmitError, } = props;
+    const { isMd, isLg, isXl } = useResponsive();
+    const lastSection = entry.sections.length - 1;
+    const sectionsWithIds = React.useMemo(() => assignIds(entry.sections), [entry]);
+    function collectNestedSections(entries = []) {
+        const nestedSections = [];
+        entries.forEach((entry) => {
+            if (entry.type === 'sections') {
+                nestedSections.push(entry);
+            }
+            else if (entry.type === 'columns') {
+                const columnEntry = entry;
+                columnEntry.columns.forEach((column) => {
+                    const columnSections = collectNestedSections(column.entries);
+                    nestedSections.push(...columnSections);
+                });
+            }
+        });
+        return nestedSections;
+    }
+    // need to add ids to section so expanded sections can differentiate between sections with the same label
+    function assignIds(sections) {
+        const result = [];
+        sections.forEach((section) => {
+            const newSection = {
+                ...section,
+                id: nanoid(),
+            };
+            result.push(newSection);
+            if (section.entries) {
+                const nestedSections = collectNestedSections(section.entries);
+                nestedSections.forEach((nestedSection) => {
+                    nestedSection.sections = assignIds(nestedSection.sections);
+                });
+            }
+        });
+        return result;
+    }
+    function getExpandedSections(sections, expandAll) {
+        const expandedSections = [];
+        const processSections = (sectionList) => {
+            sectionList.forEach((section, index) => {
+                expandedSections.push({
+                    label: section.label,
+                    expanded: expandAll ?? (index === 0 || isMd || isLg || isXl),
+                    id: section?.id,
+                });
+                if (section.entries) {
+                    const nestedSections = collectNestedSections(section.entries).flatMap((s) => s.sections);
+                    processSections(nestedSections);
+                }
+            });
+        };
+        processSections(sections);
+        return expandedSections;
+    }
+    useEffect(() => {
+        if (expandAll !== null) {
+            setExpandedSections(getExpandedSections(sectionsWithIds, expandAll));
+        }
+    }, [expandAll, sectionsWithIds]);
+    const handleAccordionChange = (id) => {
+        const updatedSections = expandedSections.map((section) => section.id === id ? { ...section, expanded: !section.expanded } : section);
+        setExpandedSections(updatedSections);
+        setExpandAll(null);
+    };
+    return (React.createElement(Box, null, sectionsWithIds.map((section, sectionIndex) => {
+        const errorCount = getErrorCountForSection(section, errors);
+        return (React.createElement(Accordion, { key: section.id, expanded: expandedSections.find((expandedSection) => expandedSection.id === section.id)?.expanded ??
+                !!expandAll, onChange: () => handleAccordionChange(section.id), defaultExpanded: sectionIndex === 0, sx: {
+                border: '1px solid #dbe0e4',
+                boxShadow: 'none',
+                marginBottom: '16px',
+                borderRadius: '6px',
+                '&:before': {
+                    display: 'none',
+                },
+            } },
+            React.createElement(AccordionSummary, { sx: {
+                    '&.Mui-expanded': {
+                        borderBottom: '1px solid #dbe0e4',
+                        minHeight: '44px',
+                        borderBottomLeftRadius: '0px',
+                        borderBottomRightRadius: '0px',
+                    },
+                    minHeight: '44px',
+                    maxHeight: '44px',
+                    backgroundColor: '#F4F6F8',
+                    borderRadius: '5px',
+                    // MUI accordion summaries have different border radius for the first and last item
+                    borderTopLeftRadius: sectionIndex === 0 ? '3px' : undefined,
+                    borderTopRightRadius: sectionIndex === 0 ? '3px' : undefined,
+                    borderBottomRightRadius: sectionIndex === lastSection ? '3px' : undefined,
+                    borderBottomLeftRadius: sectionIndex === lastSection ? '3px' : undefined,
+                }, expandIcon: React.createElement(ExpandMoreOutlined, { fontSize: "medium" }) },
+                React.createElement(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        width: '100%',
+                        justifyContent: 'space-between',
+                    } },
+                    React.createElement(Typography, { sx: {
+                            fontWeight: '600',
+                        } }, section.label),
+                    errorCount > 0 && showSubmitError && (React.createElement(Box, { sx: {
+                            ml: 1,
+                            bgcolor: '#FF4842',
+                            color: 'white',
+                            borderRadius: '50%',
+                            minWidth: '20px',
+                            minHeight: '20px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            fontSize: '12px',
+                            margin: '0px',
+                            marginRight: '16px',
+                        } }, errorCount)))),
+            React.createElement(AccordionDetails, null, section.entries?.map((sectionEntry, index) => (React.createElement(RecursiveEntryRenderer, { key: sectionEntry.type + index, entry: sectionEntry, handleChange: handleChange, errors: errors, fieldHeight: fieldHeight, richTextEditor: richTextEditor, instance: instance, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, parameters: parameters, triggerFieldReset: triggerFieldReset, showSubmitError: showSubmitError }))))));
+    })));
+}
+export default AccordionSections;

package/dist/published/components/custom/FormV2/components/ActionButtons.d.ts

@@ -0,0 +1,19 @@
+import { ActionType, FormEntry } from '@evoke-platform/context';
+import React from 'react';
+import { FieldErrors, FieldValues, UseFormReturn, UseFormSetValue, UseFormUnregister } from 'react-hook-form';
+type ActionButtonProps = {
+    onSubmit: (data: FieldValues) => void;
+    handleSubmit: UseFormReturn['handleSubmit'];
+    isModal: boolean;
+    submitButtonLabel?: string;
+    actionType?: ActionType;
+    onReset: () => void;
+    errors?: FieldErrors;
+    unregister: UseFormUnregister<FieldValues>;
+    entries: FormEntry[];
+    setValue: UseFormSetValue<FieldValues>;
+    formId?: string;
+    instance?: FieldValues;
+};
+declare function ActionButtons(props: ActionButtonProps): React.JSX.Element;
+export default ActionButtons;

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

@@ -0,0 +1,106 @@
+import { isEmpty, omit } from 'lodash';
+import React, { useContext, useState } from 'react';
+import { useResponsive } from '../../../../theme';
+import { Button, LoadingButton } from '../../../core';
+import { Box } from '../../../layout';
+import { FormContext } from './FormContext';
+import { entryIsVisible, getEntryId, getNestedParameterIds, isAddressProperty, scrollIntoViewWithOffset, } from './utils';
+function ActionButtons(props) {
+    const { onSubmit, submitButtonLabel, actionType, handleSubmit, onReset, unregister, errors, isModal, entries, setValue, formId, instance, } = props;
+    const { isXs } = useResponsive();
+    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+    const { getValues } = useContext(FormContext);
+    const unregisterHiddenFields = (entriesToCheck) => {
+        entriesToCheck.forEach((entry) => {
+            if (entry.type === 'sections' || entry.type === 'columns') {
+                const subEntries = entry.type === 'sections' ? entry.sections : entry.columns;
+                subEntries.forEach((subEntry) => {
+                    if (subEntry.entries) {
+                        unregisterHiddenFields(subEntry.entries);
+                    }
+                });
+            }
+            if (!entryIsVisible(entry, getValues(), instance)) {
+                if (entry.type === 'sections' || entry.type === 'columns') {
+                    const fieldsToUnregister = getNestedParameterIds(entry);
+                    fieldsToUnregister.forEach(processFieldUnregister);
+                }
+                else {
+                    const fieldId = getEntryId(entry);
+                    if (fieldId)
+                        processFieldUnregister(fieldId);
+                }
+            }
+        });
+    };
+    const processFieldUnregister = (fieldId) => {
+        if (isAddressProperty(fieldId)) {
+            // Unregister entire 'address' to clear hidden field errors, then restore existing values since unregistering address.line1 etc is not working
+            let addressValues = getValues('address');
+            addressValues = omit(addressValues, fieldId.split('.')[1]);
+            unregister('address');
+            setValue('address', addressValues);
+        }
+        else {
+            unregister(fieldId);
+        }
+    };
+    async function showErrorsOrSubmit() {
+        setIsSubmitLoading(true);
+        unregisterHiddenFields(entries ?? []);
+        try {
+            await handleSubmit((data) => onSubmit(actionType === 'delete' ? {} : data))();
+        }
+        finally {
+            setIsSubmitLoading(false);
+        }
+        if (!isEmpty(errors)) {
+            setTimeout(() => {
+                const errorElement = document.getElementById(`validation-error-display-${formId}`);
+                let modal = errorElement?.closest('.MuiPaper-root');
+                const hasCloseIcon = modal?.querySelector('svg[data-testid="CloseIcon"]');
+                modal = hasCloseIcon ? document.querySelector('.MuiDialogContent-root') : modal;
+                if (errorElement) {
+                    scrollIntoViewWithOffset(errorElement, 170, modal);
+                }
+            }, 0);
+        }
+    }
+    return (React.createElement(Box, { sx: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            flexWrap: 'wrap-reverse',
+            width: '100%',
+        } },
+        React.createElement(Button, { key: "cancel", variant: "outlined", sx: {
+                margin: '5px',
+                marginX: isXs ? '0px' : undefined,
+                color: 'black',
+                border: '1px solid rgb(206, 212, 218)',
+                width: isXs ? '100%' : 'auto',
+                '&:hover': {
+                    backgroundColor: '#f2f4f7',
+                    border: '1px solid rgb(206, 212, 218)',
+                },
+            }, onClick: () => onReset() }, isModal ? 'Cancel' : 'Discard Changes'),
+        React.createElement(LoadingButton, { key: "submit", variant: "contained", sx: {
+                lineHeight: '2.75',
+                margin: '5px 0 5px 5px',
+                marginX: isXs ? '0px' : undefined,
+                padding: '0 23px',
+                backgroundColor: actionType === 'delete' ? '#A12723' : 'primary',
+                borderRadius: '8px',
+                boxShadow: 'none',
+                whiteSpace: 'nowrap',
+                width: isXs ? '100%' : 'auto',
+                '& .MuiCircularProgress-root': {
+                    color: 'white',
+                },
+                '&:hover': {
+                    backgroundColor: actionType === 'delete' ? ' #8C2421' : '#014E7B',
+                },
+            }, onClick: () => {
+                showErrorsOrSubmit();
+            }, loading: isSubmitLoading }, submitButtonLabel || 'Submit')));
+}
+export default ActionButtons;

package/dist/published/components/custom/FormV2/components/FieldWrapper.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+type FieldWrapperProps = {
+    inputId: string;
+    inputType: string;
+    label: string;
+    description?: string;
+    tooltip?: string;
+    prefix?: string;
+    suffix?: string;
+    value?: unknown;
+    errorMessage?: string;
+    showCharCount?: boolean;
+    viewOnly: boolean;
+    children: ReactNode;
+    required: boolean;
+    fieldHeight?: 'small' | 'medium';
+    maxLength?: number;
+};
+/**
+ * A component that wraps a FormField and adds a label,
+ * description, tooltip, prefix, suffix and word/char counts
+ */
+declare const FieldWrapper: (props: FieldWrapperProps) => React.JSX.Element;
+export default FieldWrapper;

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

@@ -0,0 +1,100 @@
+import { Help, InfoRounded } from '@mui/icons-material';
+import React from 'react';
+import { IconButton, InputLabel, Tooltip, Typography } from '../../../core';
+import { Box } from '../../../layout';
+const underFieldStyles = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+};
+const descriptionStyles = {
+    color: '#999',
+    whiteSpace: 'normal',
+    display: 'block',
+};
+const PrefixSuffix = (props) => {
+    const { prefix, suffix, height, isViewOnly } = props;
+    const text = prefix || suffix;
+    const prefixSuffixStyles = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        background: isViewOnly ? undefined : '#f5f5f5',
+        padding: '5px',
+        border: isViewOnly ? undefined : '1px solid #ccc',
+        ...(suffix && {
+            borderTopRightRadius: '5px',
+            borderBottomRightRadius: '5px',
+            marginLeft: '-5px',
+            padding: '7px 5px 7px 10px',
+            marginTop: '6px',
+        }),
+        ...(prefix && {
+            borderTopLeftRadius: '5px',
+            borderBottomLeftRadius: '5px',
+            marginRight: '-5px',
+            padding: '7px 10px 7px 5px',
+            marginTop: '6px',
+        }),
+        height: height === 'small' ? 24 : 40,
+    };
+    if (!prefix && !suffix)
+        return null;
+    return (React.createElement(Box, { sx: prefixSuffixStyles },
+        React.createElement(Typography, null, text)));
+};
+/**
+ * A component that wraps a FormField and adds a label,
+ * description, tooltip, prefix, suffix and word/char counts
+ */
+const FieldWrapper = (props) => {
+    const { inputId, label, description, tooltip, prefix, suffix, value, maxLength, errorMessage, showCharCount, inputType, viewOnly, children, fieldHeight, required, } = props;
+    const charCount = typeof value === 'string' ? value.length : 0;
+    const remainingChars = maxLength ? maxLength - charCount : undefined;
+    return (React.createElement(Box, null,
+        React.createElement(Box, { sx: { padding: '10px 0' } },
+            inputType !== 'boolean' && (React.createElement(InputLabel, { htmlFor: inputId, sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    color: viewOnly ? 'text.secondary' : 'text.primary',
+                    fontSize: '14px',
+                } },
+                label,
+                required ? (React.createElement(Typography, { component: 'span', sx: { color: 'red', fontSize: '12px', lineHeight: '22px', paddingLeft: '4px' } }, `*`)) : null,
+                tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
+                    React.createElement(IconButton, null,
+                        React.createElement(Help, { sx: { fontSize: '14px' } })))))),
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: viewOnly ? 'center' : 'flex-start',
+                } },
+                inputType === 'string' && (React.createElement(PrefixSuffix, { prefix: prefix, height: fieldHeight || 'medium', isViewOnly: viewOnly })),
+                React.createElement(Box, { sx: {
+                        width: viewOnly && suffix ? undefined : '100%',
+                        marginTop: '6px',
+                        borderRadius: '8px',
+                    } },
+                    children,
+                    inputType !== 'boolean' && (errorMessage || description || showCharCount) && (React.createElement(Box, { sx: underFieldStyles },
+                        React.createElement(Box, { sx: {
+                                width: '100%',
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'flex-start',
+                                flexWrap: 'wrap',
+                                paddingTop: '4px',
+                            } },
+                            React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column' } },
+                                errorMessage ? (React.createElement(Box, { display: 'flex', alignItems: 'center' },
+                                    React.createElement(InfoRounded, { color: 'error', sx: { fontSize: '.75rem', marginRight: '3px' } }),
+                                    React.createElement(Typography, { fontSize: '12px', color: 'error', sx: { lineHeight: '18px' } }, errorMessage))) : (React.createElement("span", null)),
+                                description && (React.createElement(Typography, { id: `${inputId}-description`, variant: "caption", sx: descriptionStyles }, description))),
+                            showCharCount && (React.createElement(Typography, { variant: "caption", sx: { color: '#999999', whiteSpace: 'nowrap' } },
+                                remainingChars ?? charCount,
+                                ' ',
+                                (remainingChars ?? charCount) === 1 ? 'character' : 'characters',
+                                !!maxLength && ` remaining`)))))),
+                inputType === 'string' && (React.createElement(PrefixSuffix, { suffix: suffix, height: fieldHeight || 'medium', isViewOnly: viewOnly }))))));
+};
+export default FieldWrapper;

package/dist/published/components/custom/FormV2/components/FormContext.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Obj } from '@evoke-platform/context';
+import { FieldValues, UseFormGetValues } from 'react-hook-form';
+type FormContextType = {
+    fetchedOptions: FieldValues;
+    setFetchedOptions: (newData: FieldValues) => void;
+    getValues: UseFormGetValues<FieldValues>;
+    stickyFooter?: boolean;
+    object?: Obj;
+};
+export declare const FormContext: import("react").Context<FormContextType>;
+export {};

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

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+export const FormContext = createContext({
+    fetchedOptions: {},
+    setFetchedOptions: () => { },
+    getValues: (() => ({})),
+    stickyFooter: false,
+    object: undefined,
+});

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

@@ -0,0 +1,17 @@
+import { InputField, InputParameter, InputParameterReference, Property, ReadonlyField } from '@evoke-platform/context';
+import React from 'react';
+import { FieldErrors, FieldValues } from 'react-hook-form';
+import { Address } from '../../../FormField/AddressFieldComponent';
+interface AddressProps {
+    entry: InputParameterReference | ReadonlyField | InputField;
+    errors?: FieldErrors;
+    handleChange: (propertyId: string, value: string | Address | undefined) => void;
+    fieldHeight?: 'small' | 'medium';
+    readOnly?: boolean;
+    parameters?: InputParameter[];
+    instance?: FieldValues;
+    entryId: string;
+    fieldDefinition: InputParameter | Property;
+}
+declare function AddressFields(props: AddressProps): React.JSX.Element;
+export default AddressFields;