@evoke-platform/ui-components 1.0.0-dev.136 → 1.0.0-dev.138

package/dist/published/components/core/Autocomplete/Autocomplete.js

@@ -29,9 +29,9 @@ const Autocomplete = (props) => {
     if (!!props.label && props.labelPlacement === 'outside-top') {
         return (React.createElement(UIThemeProvider, null,
             React.createElement(InputLabel, { "data-testid": "label-outside", htmlFor: (_b = (_a = props.label) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '', sx: { paddingBottom: '0px', fontSize: '14px' } }, (_c = props.label) !== null && _c !== void 0 ? _c : '',
-                " ",
-                props.required ? React.createElement("span", { style: { color: 'red' } }, "*") : null),
-            props.instructionText && React.createElement(Typography, { fontSize: '10px', lineHeight: '14px' }, props.instructionText),
+                ' ',
+                props.required ? (React.createElement(Typography, { sx: { color: 'red', fontSize: '14px' }, component: 'span' }, "*")) : null),
+            props.instructionText && (React.createElement(Typography, { fontSize: '10px', lineHeight: '14px' }, props.instructionText)),
             React.createElement(MUIAutocomplete, Object.assign({}, props, { sx: Object.assign({ '& fieldset': { borderRadius: '8px', borderColor: props.error ? 'red' : undefined } }, props.sx), options: sortedOptions, popupIcon: (_d = props.popupIcon) !== null && _d !== void 0 ? _d : React.createElement(ExpandMore, null) })),
             props.error && React.createElement(FieldError, { required: props.required, label: props.errorMessage })));
     }

package/dist/published/components/core/TextField/TextField.js

@@ -20,10 +20,9 @@ const TextField = (props) => {
     };
     return (React.createElement(UIThemeProvider, null, variant === 'outlined' && !!label && labelPlacement === 'outside-top' ? (React.createElement(React.Fragment, null,
         React.createElement(InputLabel, { "data-testid": "label-outside", htmlFor: (_a = label === null || label === void 0 ? void 0 : label.toString()) !== null && _a !== void 0 ? _a : '', sx: { paddingBottom: instructionText ? '0px' : '3px', fontSize: '14px' } }, label !== null && label !== void 0 ? label : '',
-            " ",
-            props.required ? React.createElement("span", { style: { color: 'red' } }, "*") : null),
-        instructionText &&
-            React.createElement(Typography, { variant: 'caption' }, instructionText),
+            ' ',
+            props.required ? (React.createElement(Typography, { sx: { color: 'red', fontSize: '14px' }, component: 'span' }, "*")) : null),
+        instructionText && React.createElement(Typography, { variant: 'caption' }, instructionText),
         React.createElement(MUITextField, Object.assign({}, props, { label: null, inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly }, sx: readOnly
                 ? readOnlyStyles
                 : Object.assign({ '& fieldset': { borderRadius: '8px' } }, props.sx) })),

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.js

@@ -57,7 +57,7 @@ const customSelector = (props) => {
             return option === value;
         }, onChange: (event, newValue) => {
             handleOnChange(newValue === null || newValue === void 0 ? void 0 : newValue.value.name);
-        }, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small" })), style: { width: width }, disableClearable: true }));
+        }, renderInput: (params) => React.createElement(TextField, Object.assign({}, params, { size: "small" })), sx: { width: width }, disableClearable: true }));
 };
 const customCombinator = (props) => {
     const { options, value, handleOnChange } = props;
@@ -86,7 +86,7 @@ const customButton = (props) => {
             buttonLabel = '+ Condition';
             break;
     }
-    return (React.createElement(Button, { variant: "contained", onClick: handleOnClick, size: "small", style: { backgroundColor: '#ebf4f8', color: '#0678a9', boxShadow: 'none' } }, buttonLabel));
+    return (React.createElement(Button, { variant: "contained", onClick: handleOnClick, size: "small", sx: { backgroundColor: '#ebf4f8', color: '#0678a9', boxShadow: 'none' } }, buttonLabel));
 };
 const customDelete = (props) => {
     const { handleOnClick } = props;
@@ -113,11 +113,11 @@ export const customValueEditorWithPresets = (props) => {
         }, disabled: ['null', 'notNull'].includes(props.operator), renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { size: "small", placeholder: 'Value', readOnly: value === '{{user.id}}', onChange: (event) => {
                 handleOnChange(event.target.value);
             } }))), renderOption: (props, option) => {
-            return (React.createElement(MenuItem, Object.assign({}, props, { style: { padding: '0px 8px' } }),
+            return (React.createElement(MenuItem, Object.assign({}, props, { sx: { padding: '0px 8px' } }),
                 React.createElement(Box, { padding: 0, margin: 0 },
                     React.createElement(Typography, { fontSize: '14px', fontWeight: 500 }, option.label),
                     React.createElement(Typography, { fontSize: '14px', fontWeight: 500, color: 'rgba(145, 158, 171, 1)' }, option.value.sublabel))));
-        }, componentsProps: { popper: { style: { width: 'fit-content' } } }, style: { width: '33%' } }));
+        }, componentsProps: { popper: { style: { width: 'fit-content' } } }, sx: { width: '33%' } }));
     return determineValueEditor(valueEditor, props);
 };
 export const customValueEditor = (props) => {
@@ -149,7 +149,7 @@ const determineValueEditor = (baseValueEditor, props) => {
             valueEditor = (React.createElement(LocalizationProvider, null,
                 React.createElement(DatePicker, { disabled: disabled, value: disabled ? null : value, onChange: (value) => {
                         handleOnChange(value);
-                    }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { placeholder: "Value", size: "small", style: { width: '33%' } }))) })));
+                    }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { placeholder: "Value", size: "small", sx: { width: '33%' } }))) })));
             break;
         case 'integer':
             {
@@ -163,7 +163,7 @@ const determineValueEditor = (baseValueEditor, props) => {
                                 handleOnChange(uniqueSelections.length ? uniqueSelections : '');
                             }, isOptionEqualToValue: (option, value) => {
                                 return option === value;
-                            }, renderInput: (params) => (React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" }))), style: { width: '33%' } }));
+                            }, renderInput: (params) => (React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" }))), sx: { width: '33%' } }));
                     }
                     else if (type === 'select' && values) {
                         valueEditor = (React.createElement(Autocomplete, { freeSolo: true, options: values, multiple: ['in', 'notIn'].includes(operator), value: disabled ? '' : value, onChange: (event, newValue) => {
@@ -172,7 +172,7 @@ const determineValueEditor = (baseValueEditor, props) => {
                                 return option === value;
                             }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { size: "small", placeholder: 'Value', readOnly: value === '{{user.id}}', onChange: (event) => {
                                     handleOnChange(event.target.value);
-                                } }))), style: { width: '33%' }, disableClearable: true }));
+                                } }))), sx: { width: '33%' }, disableClearable: true }));
                     }
                 }
                 else {
@@ -194,7 +194,7 @@ const determineValueEditor = (baseValueEditor, props) => {
                                 handleOnChange(uniqueSelections.length ? uniqueSelections : '');
                             }, isOptionEqualToValue: (option, value) => {
                                 return option === value;
-                            }, renderInput: (params) => (React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" }))), style: { width: '33%' } }));
+                            }, renderInput: (params) => (React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" }))), sx: { width: '33%' } }));
                     }
                     else if (type === 'select' && values) {
                         valueEditor = (React.createElement(Autocomplete, { freeSolo: true, options: values, multiple: ['in', 'notIn'].includes(operator), value: disabled ? '' : value, onChange: (event, newValue) => {
@@ -203,7 +203,7 @@ const determineValueEditor = (baseValueEditor, props) => {
                                 return option === value;
                             }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { size: "small", placeholder: 'Value', readOnly: value === '{{user.id}}', onChange: (event) => {
                                     handleOnChange(event.target.value);
-                                } }))), style: { width: '33%' }, disableClearable: true }));
+                                } }))), sx: { width: '33%' }, disableClearable: true }));
                     }
                 }
                 else {
@@ -222,7 +222,7 @@ const determineValueEditor = (baseValueEditor, props) => {
                     handleOnChange(uniqueSelections.length ? uniqueSelections : '');
                 }, isOptionEqualToValue: (option, value) => {
                     return option === value;
-                }, renderInput: (params) => React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" })), style: { width: '33%' } }));
+                }, renderInput: (params) => React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" })), sx: { width: '33%' } }));
             break;
         case 'string':
             if ((operator === 'in' || operator === 'notIn') && type === 'select' && values) {
@@ -233,7 +233,7 @@ const determineValueEditor = (baseValueEditor, props) => {
                         handleOnChange(uniqueSelections.length ? uniqueSelections : '');
                     }, isOptionEqualToValue: (option, value) => {
                         return option === value;
-                    }, renderInput: (params) => React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" })), style: { width: '33%' } }));
+                    }, renderInput: (params) => React.createElement(TextField, Object.assign({ label: params.label }, params, { size: "small" })), sx: { width: '33%' } }));
             }
             else if (type === 'select' && values) {
                 valueEditor = (React.createElement(Autocomplete, { freeSolo: true, options: values, multiple: ['in', 'notIn'].includes(operator), value: disabled ? '' : value, onChange: (event, newValue) => {
@@ -242,7 +242,7 @@ const determineValueEditor = (baseValueEditor, props) => {
                         return option === value;
                     }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { size: "small", placeholder: 'Value', readOnly: value === '{{user.id}}', onChange: (event) => {
                             handleOnChange(event.target.value);
-                        } }))), style: { width: '33%' }, disableClearable: true }));
+                        } }))), sx: { width: '33%' }, disableClearable: true }));
             }
             break;
     }

package/dist/published/components/custom/FormField/BooleanSelect/BooleanSelect.js

@@ -22,6 +22,6 @@ const BooleanSelect = (props) => {
             value: false,
         },
     ];
-    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, { id: id, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, style: { background: 'white' }, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), value: value, onChange: handleChange, inputValue: value, options: booleanOptions, disableClearable: true, style: { background: 'white', borderRadius: '8px' } }));
+    return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, props))) : (React.createElement(Autocomplete, { id: id, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), value: value, onChange: handleChange, inputValue: value, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' } }));
 };
 export default BooleanSelect;

package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.js

@@ -37,6 +37,6 @@ const DatePickerSelect = (props) => {
         props.onChange(id, date, property);
     };
     return readOnly ? (React.createElement(InputFieldComponent, Object.assign({}, Object.assign(Object.assign({}, props), { defaultValue: asMonthDayYearFormat(value) })))) : (React.createElement(LocalizationProvider, null,
-        React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium' }))) })));
+        React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium' }))) })));
 };
 export default DatePickerSelect;

package/dist/published/components/custom/FormField/InputFieldComponent/InputFieldComponent.js

@@ -62,17 +62,15 @@ const InputFieldComponent = (props) => {
     }
     return property.enum && !readOnly ? (React.createElement(Autocomplete, { id: id, options: selectOptions, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { value: value, error: error, errorMessage: errorMessage, fullWidth: true, onBlur: onBlur, size: size !== null && size !== void 0 ? size : 'medium', placeholder: placeholder }))), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
             return option.value === value;
-        }, error: error, required: required, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', onInputChange: handleInputValueChange })) : !mask ? (React.createElement(TextField, { id: id, sx: readOnly
-            ? {
-                '& .MuiOutlinedInput-notchedOutline': {
-                    border: 'none',
-                },
-                '.MuiOutlinedInput-root': {
-                    borderRadius: '8px',
-                    backgroundColor: '#f4f6f8',
-                },
-            }
-            : undefined, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, style: { background: 'white', borderRadius: '8px' }, size: size !== null && size !== void 0 ? size : 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar !== null && inputMaskPlaceholderChar !== void 0 ? inputMaskPlaceholderChar : '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, () => (React.createElement(TextField, { id: id, sx: readOnly
+        }, error: error, required: required, inputValue: inputValue !== null && inputValue !== void 0 ? inputValue : '', onInputChange: handleInputValueChange })) : !mask ? (React.createElement(TextField, { id: id, sx: Object.assign({ background: 'white', borderRadius: '8px' }, (readOnly && {
+            '& .MuiOutlinedInput-notchedOutline': {
+                border: 'none',
+            },
+            '.MuiOutlinedInput-root': {
+                borderRadius: '8px',
+                backgroundColor: '#f4f6f8',
+            },
+        })), error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: Object.assign(Object.assign({}, InputProps), { readOnly: readOnly }), required: required, fullWidth: true, onBlur: onBlur, placeholder: placeholder, size: size !== null && size !== void 0 ? size : 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar !== null && inputMaskPlaceholderChar !== void 0 ? inputMaskPlaceholderChar : '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, () => (React.createElement(TextField, { id: id, sx: readOnly
             ? {
                 '& .MuiOutlinedInput-notchedOutline': {
                     border: 'none',

package/dist/published/components/custom/Menubar/Menubar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AppBar, Toolbar, Box, Typography } from '@mui/material';
+import { AppBar, Toolbar, Box, Typography, CardMedia } from '@mui/material';
 import { Notifications as NotificationIcon } from '@mui/icons-material';
 import UIThemeProvider from '../../../theme';
 const classes = {
@@ -9,6 +9,8 @@ const classes = {
     },
     logo: {
         paddingRight: '16px',
+        height: '70px',
+        width: 'inherit',
     },
 };
 export default function MenuBar(props) {
@@ -16,7 +18,7 @@ export default function MenuBar(props) {
     return (React.createElement(UIThemeProvider, null,
         React.createElement(AppBar, { color: "inherit", position: "fixed", elevation: 0, sx: { zIndex: (theme) => theme.zIndex.drawer + 1, borderBottom: '1px solid #919EAB3D' } },
             React.createElement(Toolbar, { sx: { justifyContent: 'space-between' } },
-                React.createElement(Box, { sx: classes.title }, !props.envName ? (React.createElement("img", { src: props.logo, alt: props.logoAltText, height: "70px", width: "inherit", style: classes.logo })) : (React.createElement(Box, { mt: 2 },
+                React.createElement(Box, { sx: classes.title }, !props.envName ? (React.createElement(CardMedia, { component: 'img', src: props.logo, alt: props.logoAltText, sx: classes.logo })) : (React.createElement(Box, { mt: 2 },
                     React.createElement(Typography, { variant: "h5" }, props === null || props === void 0 ? void 0 :
                         props.envName,
                         " ")))),

package/dist/published/components/custom/MultiSelect/MultiSelect.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Box, FormControlLabel, Grid, InputAdornment, Switch, TextField, Typography } from '@mui/material';
-import DragHandleIcon from '@mui/icons-material/DragHandle';
-import { Search } from '@mui/icons-material';
+import { Box, FormControlLabel, Grid, InputAdornment, Switch, TextField, Typography, IconButton } from '@mui/material';
+import { Search, DragHandleOutlined } from '@mui/icons-material';
 import UIThemeProvider from '../../../theme';
 import { sortBy } from 'lodash';
 import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
@@ -24,6 +23,17 @@ const styles = {
     switch: {
         padding: '1px 8px',
     },
+    dragHandleBox: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    dragHandle: {
+        cursor: 'grab',
+        marginLeft: '4px',
+        marginRight: '4px',
+        padding: '2px',
+    },
 };
 export default function MultiSelect(props) {
     const { options, onChange, maxHeight, isSortable } = props;
@@ -108,21 +118,18 @@ export default function MultiSelect(props) {
             React.createElement(Box, { sx: Object.assign(Object.assign({}, styles.list), { maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : 'auto' }) }, !!isSortable ? (React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, modifiers: [restrictToVerticalAxis, restrictToWindowEdges] },
                 React.createElement(SortableContext, { items: optionsArray, strategy: verticalListSortingStrategy }, optionsArray.map((option) => {
                     var _a, _b;
-                    return (React.createElement(SortableItem, { Item: () => {
+                    return (React.createElement(SortableItem, { Item: (props) => {
                             var _a, _b;
                             return (React.createElement(Grid, { item: true, m: 1, sx: styles.listItem, key: (_a = option === null || option === void 0 ? void 0 : option.id) !== null && _a !== void 0 ? _a : option === null || option === void 0 ? void 0 : option.label },
                                 React.createElement(Grid, { container: true, justifyContent: "space-between", wrap: "nowrap" },
                                     React.createElement(Grid, { alignSelf: "center", pl: 1, display: "flex", item: true },
-                                        React.createElement(Box, { sx: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                cursor: 'pointer',
-                                            }, pr: 1 },
-                                            React.createElement(DragHandleIcon, { fontSize: "small" })),
-                                        React.createElement(Typography, null,
-                                            " ", option === null || option === void 0 ? void 0 :
+                                        React.createElement(Box, Object.assign({ sx: styles.dragHandleBox, ref: props.activatorRef }, props.listeners),
+                                            React.createElement(IconButton, { size: "medium", sx: styles.dragHandle },
+                                                React.createElement(DragHandleOutlined, null))),
+                                        React.createElement(Typography, { sx: { lineHeight: '36px' } },
+                                            ' ', option === null || option === void 0 ? void 0 :
                                             option.label,
-                                            " ")),
+                                            ' ')),
                                     React.createElement(Grid, { item: true },
                                         React.createElement(Switch, { id: (_b = option === null || option === void 0 ? void 0 : option.id) !== null && _b !== void 0 ? _b : option === null || option === void 0 ? void 0 : option.label, checked: option.value, onChange: (event) => {
                                                 var _a;

package/dist/published/components/custom/MultiSelect/SortableItem.js

@@ -1,13 +1,17 @@
 import React from 'react';
+import { Box } from '@mui/material';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 export const SortableItem = (props) => {
     const { Item } = props;
-    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: props.id });
-    const style = {
+    const { attributes, setActivatorNodeRef, listeners, setNodeRef, transform, transition } = useSortable({
+        id: props.id,
+    });
+    const styles = {
         transform: CSS.Transform.toString(transform),
         transition,
     };
-    return (React.createElement("div", Object.assign({ ref: setNodeRef, style: style }, attributes, listeners),
-        React.createElement(Item, null)));
+    return (React.createElement("div", Object.assign({ ref: setNodeRef }, attributes),
+        React.createElement(Box, { sx: styles },
+            React.createElement(Item, { activatorRef: setActivatorNodeRef, listeners: listeners }))));
 };

package/dist/published/components/custom/RepeatableField/RepeatableField.js

@@ -19,8 +19,8 @@ const styles = {
         borderRadius: '8px',
         maxHeight: '30px',
         '& .MuiAccordionSummary-content': {
-            alignItems: 'center'
-        }
+            alignItems: 'center',
+        },
     },
     accordionDetails: {
         display: 'flex',
@@ -108,8 +108,8 @@ export default function RepeatableField(props) {
     return (React.createElement(UIThemeProvider, null,
         React.createElement("div", null, selectedField === null || selectedField === void 0 ? void 0 :
             selectedField.map((field, index) => (React.createElement(Accordion, { key: index, elevation: 0, sx: styles.accordion },
-                React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, null), "aria-controls": "panel1a-content", id: "panel1a-header", sx: styles.accordionSummary, color: '#F4F6F8' },
-                    (dynamicHeaders === null || dynamicHeaders === void 0 ? void 0 : dynamicHeaders.isError) && (dynamicHeaders === null || dynamicHeaders === void 0 ? void 0 : dynamicHeaders.isError(field)) && React.createElement(InfoRounded, { sx: { color: "#A12723", paddingRight: '4px' } }),
+                React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, null), "aria-controls": "panel1a-content", sx: styles.accordionSummary, color: '#F4F6F8' },
+                    (dynamicHeaders === null || dynamicHeaders === void 0 ? void 0 : dynamicHeaders.isError) && (dynamicHeaders === null || dynamicHeaders === void 0 ? void 0 : dynamicHeaders.isError(field)) && (React.createElement(InfoRounded, { sx: { color: '#A12723', paddingRight: '4px' } })),
                     React.createElement(Typography, { sx: { padding: '4px' } }, displayHeaders(index))),
                 React.createElement(AccordionDetails, { sx: styles.accordionDetails },
                     React.createElement(React.Fragment, null, children(handler, index, selectedField)),

package/dist/published/icons/custom/TrashCan.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { IconProps } from '@mui/material';
-export declare const TrashCan: (props: IconProps) => JSX.Element;
+import { SvgIconProps } from '@mui/material';
+export declare const TrashCan: (props: SvgIconProps) => JSX.Element;

package/dist/published/icons/custom/TrashCan.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import { Icon } from '@mui/material';
+import { SvgIcon } from '@mui/material';
 export const TrashCan = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    return (React.createElement(Icon, Object.assign({}, props),
-        React.createElement("svg", { style: { verticalAlign: 'top' }, width: (_b = (_a = props === null || props === void 0 ? void 0 : props.sx) === null || _a === void 0 ? void 0 : _a['width']) !== null && _b !== void 0 ? _b : '24', height: (_d = (_c = props === null || props === void 0 ? void 0 : props.sx) === null || _c === void 0 ? void 0 : _c['height']) !== null && _d !== void 0 ? _d : '24', viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg" },
-            React.createElement("g", { id: "icon/ic_trash" },
-                React.createElement("path", { id: "Vector", d: "M17.5003 5.00001L13.3337 5.00001V3.60834C13.3141 3.07486 13.0838 2.57089 12.6933 2.20692C12.3028 1.84295 11.7839 1.64867 11.2503 1.66668H8.75033C8.21679 1.64867 7.69788 1.84295 7.30735 2.20692C6.91682 2.57089 6.68654 3.07486 6.66699 3.60834V5.00001H2.50033C2.27931 5.00001 2.06735 5.08781 1.91107 5.24409C1.75479 5.40037 1.66699 5.61233 1.66699 5.83334C1.66699 6.05436 1.75479 6.26632 1.91107 6.4226C2.06735 6.57888 2.27931 6.66668 2.50033 6.66668H3.33366L3.33366 15.8333C3.33366 16.4964 3.59705 17.1323 4.06589 17.6011C4.53473 18.07 5.17062 18.3333 5.83366 18.3333H14.167C14.83 18.3333 15.4659 18.07 15.9348 17.6011C16.4036 17.1323 16.667 16.4964 16.667 15.8333V6.66668H17.5003C17.7213 6.66668 17.9333 6.57888 18.0896 6.4226C18.2459 6.26632 18.3337 6.05436 18.3337 5.83334C18.3337 5.61233 18.2459 5.40037 18.0896 5.24409C17.9333 5.08781 17.7213 5.00001 17.5003 5.00001ZM8.33366 3.60834C8.33366 3.47501 8.50866 3.33334 8.75033 3.33334H11.2503C11.492 3.33334 11.667 3.47501 11.667 3.60834V5.00001H8.33366V3.60834ZM15.0003 15.8333C15.0003 16.0544 14.9125 16.2663 14.7562 16.4226C14.6 16.5789 14.388 16.6667 14.167 16.6667H5.83366C5.61265 16.6667 5.40068 16.5789 5.2444 16.4226C5.08812 16.2663 5.00033 16.0544 5.00033 15.8333L5.00033 6.66668L15.0003 6.66668V15.8333Z", fill: (_f = (_e = props === null || props === void 0 ? void 0 : props.sx) === null || _e === void 0 ? void 0 : _e['color']) !== null && _f !== void 0 ? _f : "#637381" }),
-                React.createElement("path", { id: "Vector_2", d: "M7.50033 14.1667C7.72134 14.1667 7.9333 14.0789 8.08958 13.9226C8.24586 13.7663 8.33366 13.5543 8.33366 13.3333V9.99999C8.33366 9.77898 8.24586 9.56701 8.08958 9.41073C7.9333 9.25445 7.72134 9.16666 7.50033 9.16666C7.27931 9.16666 7.06735 9.25445 6.91107 9.41073C6.75479 9.56701 6.66699 9.77898 6.66699 9.99999V13.3333C6.66699 13.5543 6.75479 13.7663 6.91107 13.9226C7.06735 14.0789 7.27931 14.1667 7.50033 14.1667Z", fill: (_h = (_g = props === null || props === void 0 ? void 0 : props.sx) === null || _g === void 0 ? void 0 : _g['color']) !== null && _h !== void 0 ? _h : "#637381" }),
-                React.createElement("path", { id: "Vector_3", d: "M12.5003 14.1667C12.7213 14.1667 12.9333 14.0789 13.0896 13.9226C13.2459 13.7663 13.3337 13.5543 13.3337 13.3333V9.99999C13.3337 9.77898 13.2459 9.56701 13.0896 9.41073C12.9333 9.25445 12.7213 9.16666 12.5003 9.16666C12.2793 9.16666 12.0674 9.25445 11.9111 9.41073C11.7548 9.56701 11.667 9.77898 11.667 9.99999V13.3333C11.667 13.5543 11.7548 13.7663 11.9111 13.9226C12.0674 14.0789 12.2793 14.1667 12.5003 14.1667Z", fill: (_k = (_j = props === null || props === void 0 ? void 0 : props.sx) === null || _j === void 0 ? void 0 : _j['color']) !== null && _k !== void 0 ? _k : "#637381" })))));
+    return (React.createElement(SvgIcon, Object.assign({}, props, { viewBox: '0 0 20 20', sx: Object.assign({ verticalAlign: 'top', maxWidth: (_b = (_a = props.sx) === null || _a === void 0 ? void 0 : _a['width']) !== null && _b !== void 0 ? _b : '24', maxHeight: (_d = (_c = props.sx) === null || _c === void 0 ? void 0 : _c['height']) !== null && _d !== void 0 ? _d : '24' }, props.sx) }),
+        React.createElement("g", { id: "icon/ic_trash" },
+            React.createElement("path", { id: "Vector", d: "M17.5003 5.00001L13.3337 5.00001V3.60834C13.3141 3.07486 13.0838 2.57089 12.6933 2.20692C12.3028 1.84295 11.7839 1.64867 11.2503 1.66668H8.75033C8.21679 1.64867 7.69788 1.84295 7.30735 2.20692C6.91682 2.57089 6.68654 3.07486 6.66699 3.60834V5.00001H2.50033C2.27931 5.00001 2.06735 5.08781 1.91107 5.24409C1.75479 5.40037 1.66699 5.61233 1.66699 5.83334C1.66699 6.05436 1.75479 6.26632 1.91107 6.4226C2.06735 6.57888 2.27931 6.66668 2.50033 6.66668H3.33366L3.33366 15.8333C3.33366 16.4964 3.59705 17.1323 4.06589 17.6011C4.53473 18.07 5.17062 18.3333 5.83366 18.3333H14.167C14.83 18.3333 15.4659 18.07 15.9348 17.6011C16.4036 17.1323 16.667 16.4964 16.667 15.8333V6.66668H17.5003C17.7213 6.66668 17.9333 6.57888 18.0896 6.4226C18.2459 6.26632 18.3337 6.05436 18.3337 5.83334C18.3337 5.61233 18.2459 5.40037 18.0896 5.24409C17.9333 5.08781 17.7213 5.00001 17.5003 5.00001ZM8.33366 3.60834C8.33366 3.47501 8.50866 3.33334 8.75033 3.33334H11.2503C11.492 3.33334 11.667 3.47501 11.667 3.60834V5.00001H8.33366V3.60834ZM15.0003 15.8333C15.0003 16.0544 14.9125 16.2663 14.7562 16.4226C14.6 16.5789 14.388 16.6667 14.167 16.6667H5.83366C5.61265 16.6667 5.40068 16.5789 5.2444 16.4226C5.08812 16.2663 5.00033 16.0544 5.00033 15.8333L5.00033 6.66668L15.0003 6.66668V15.8333Z", fill: (_f = (_e = props === null || props === void 0 ? void 0 : props.sx) === null || _e === void 0 ? void 0 : _e['color']) !== null && _f !== void 0 ? _f : '#637381' }),
+            React.createElement("path", { id: "Vector_2", d: "M7.50033 14.1667C7.72134 14.1667 7.9333 14.0789 8.08958 13.9226C8.24586 13.7663 8.33366 13.5543 8.33366 13.3333V9.99999C8.33366 9.77898 8.24586 9.56701 8.08958 9.41073C7.9333 9.25445 7.72134 9.16666 7.50033 9.16666C7.27931 9.16666 7.06735 9.25445 6.91107 9.41073C6.75479 9.56701 6.66699 9.77898 6.66699 9.99999V13.3333C6.66699 13.5543 6.75479 13.7663 6.91107 13.9226C7.06735 14.0789 7.27931 14.1667 7.50033 14.1667Z", fill: (_h = (_g = props === null || props === void 0 ? void 0 : props.sx) === null || _g === void 0 ? void 0 : _g['color']) !== null && _h !== void 0 ? _h : '#637381' }),
+            React.createElement("path", { id: "Vector_3", d: "M12.5003 14.1667C12.7213 14.1667 12.9333 14.0789 13.0896 13.9226C13.2459 13.7663 13.3337 13.5543 13.3337 13.3333V9.99999C13.3337 9.77898 13.2459 9.56701 13.0896 9.41073C12.9333 9.25445 12.7213 9.16666 12.5003 9.16666C12.2793 9.16666 12.0674 9.25445 11.9111 9.41073C11.7548 9.56701 11.667 9.77898 11.667 9.99999V13.3333C11.667 13.5543 11.7548 13.7663 11.9111 13.9226C12.0674 14.0789 12.2793 14.1667 12.5003 14.1667Z", fill: (_k = (_j = props === null || props === void 0 ? void 0 : props.sx) === null || _j === void 0 ? void 0 : _j['color']) !== null && _k !== void 0 ? _k : '#637381' }))));
 };

package/dist/published/index.d.ts

@@ -1,4 +1,4 @@
-export { ClickAwayListener, FormControlProps, FormHelperTextProps, GridSize, Toolbar, createTheme, } from '@mui/material';
+export { ClickAwayListener, FormControlProps, FormHelperTextProps, GridSize, Toolbar, createTheme, styled, } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './components/core';
 export { CriteriaBuilder, DataGrid, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, } from './components/custom';

package/dist/published/index.js

@@ -1,4 +1,4 @@
-export { ClickAwayListener, Toolbar, createTheme, } from '@mui/material';
+export { ClickAwayListener, Toolbar, createTheme, styled, } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './components/core';
 export { CriteriaBuilder, DataGrid, FormField, MenuBar, MultiSelect, RepeatableField, UserAvatar, } from './components/custom';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.136",
+    "version": "1.0.0-dev.138",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -18,7 +18,11 @@
         "storybook": "start-storybook -p 6006",
         "build-storybook": "build-storybook",
         "lint": "prettier --check src/**/*.*",
-        "format": "prettier --write ."
+        "format": "prettier --write .",
+        "eslint": "eslint . --ext .ts, --ext .tsx",
+        "eslint:fix": "eslint . --ext .ts, --ext .tsx --fix",
+        "prettier:fix": "prettier --write \"**/*.{ts,tsx,md}\"",
+        "lint:fix": "npm run eslint:fix && npm run prettier:fix"
     },
     "author": "",
     "license": "MIT",
@@ -41,6 +45,8 @@
         "@types/react-dom": "^18.0.5",
         "babel-jest": "^28.1.2",
         "babel-loader": "^8.2.5",
+        "eslint": "^8.22.0",
+        "eslint-plugin-prettier": "^4.2.1",
         "husky": "^4.3.8",
         "is-ci": "^3.0.1",
         "jest": "^28.1.2",
@@ -63,6 +69,7 @@
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
+        "eslint-plugin-no-inline-styles": "^1.0.5",
         "@formio/react": "^5.2.4-rc.1",
         "@js-joda/core": "^3.2.0",
         "@js-joda/locale_en-us": "^3.2.2",
@@ -73,6 +80,8 @@
         "@mui/x-date-pickers": "^5.0.13",
         "@react-querybuilder/dnd": "^5.4.1",
         "@react-querybuilder/material": "^5.4.1",
+        "@typescript-eslint/parser": "^5.35.1",
+        "@typescript-eslint/typescript-estree": "^5.35.1",
         "@types/react-input-mask": "^3.0.2",
         "formiojs": "^4.15.0-rc.23",
         "lodash-es": "^4.17.21",
@@ -88,4 +97,4 @@
         "verbose": true,
         "testEnvironment": "jsdom"
     }
-}
+}