@evoke-platform/ui-components 1.0.0-dev.226 → 1.0.0-dev.228

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

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import AdapterJoda from '@date-io/js-joda';
 import { ChronoField, ChronoUnit, DateTimeFormatter, LocalDate, LocalDateTime, } from '@js-joda/core';
 import { Locale as ImportedLocale } from '@js-joda/locale_en-us';
@@ -16,9 +5,9 @@ import { LocalizationProvider as MUILocalizationProvider, } from '@mui/x-date-pi
 import React from 'react';
 import { InvalidDate } from '../../../util/date';
 const LocalizationProvider = (props) => {
-    const { children } = props, rest = __rest(props, ["children"]);
+    const { children, ...rest } = props;
     new Date().valueOf();
-    return (React.createElement(MUILocalizationProvider, Object.assign({ dateAdapter: DateAdapter, adapterLocale: ImportedLocale.US }, rest), children));
+    return (React.createElement(MUILocalizationProvider, { dateAdapter: DateAdapter, adapterLocale: ImportedLocale.US, ...rest }, children));
 };
 class DateAdapter extends AdapterJoda {
     constructor(args = {}) {
@@ -32,7 +21,7 @@ class DateAdapter extends AdapterJoda {
             }
             let adjustFactor = 1;
             // If no time unit is specified, @date-io assumes milliseconds.
-            unit = unit !== null && unit !== void 0 ? unit : 'milliseconds';
+            unit = unit ?? 'milliseconds';
             // MUI date picker generally assumes the date types have second/millisecond precision.
             // However, LocalDate only supports date comparisons and will fail when trying to
             // compare time fields, which MUI attempts to do.  If the values being compared don't

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

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../theme';
 const Menu = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIMenu, Object.assign({}, props))));
+        React.createElement(MUIMenu, { ...props })));
 };
 export default Menu;

package/dist/published/components/core/Menu/MenuItem/MenuItem.js

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../../theme';
 const MenuItem = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIMenuItem, Object.assign({}, props))));
+        React.createElement(MUIMenuItem, { ...props })));
 };
 export default MenuItem;

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

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../theme';
 const Paper = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIPaper, Object.assign({}, props))));
+        React.createElement(MUIPaper, { ...props })));
 };
 export default Paper;

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

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../theme';
 const Popover = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIPopover, Object.assign({}, props))));
+        React.createElement(MUIPopover, { ...props })));
 };
 export default Popover;

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

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../theme';
 const Popper = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIPopper, Object.assign({}, props))));
+        React.createElement(MUIPopper, { ...props })));
 };
 export default Popper;

package/dist/published/components/core/RadioGroup/Radio.js

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../theme';
 const Radio = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIRadio, Object.assign({}, props))));
+        React.createElement(MUIRadio, { ...props })));
 };
 export default Radio;

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

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../theme';
 const RadioGroup = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIRadioGroup, Object.assign({}, props))));
+        React.createElement(MUIRadioGroup, { ...props })));
 };
 export default RadioGroup;

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

@@ -3,12 +3,19 @@ import { Select as MUISelect } from '@mui/material';
 import React from 'react';
 import UIThemeProvider from '../../../theme';
 const Select = (props) => {
-    var _a;
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUISelect, Object.assign({}, props, { sx: Object.assign({ '& .MuiOutlinedInput-notchedOutline': {
+        React.createElement(MUISelect, { ...props, sx: {
+                '& .MuiOutlinedInput-notchedOutline': {
                     border: props.readOnly ? 'none' : 'auto',
-                }, '& .MuiInputBase-input.Mui-disabled': {
+                },
+                '& .MuiInputBase-input.Mui-disabled': {
                     WebkitTextFillColor: props.readOnly ? 'black' : 'auto',
-                }, backgroundColor: props.readOnly ? '#f4f6f8' : 'auto', height: props.readOnly ? '40px' : 'auto', margin: props.readOnly ? '0px 5px' : 'auto', borderRadius: '8px' }, props.sx), IconComponent: (_a = props.IconComponent) !== null && _a !== void 0 ? _a : ((iconProps) => React.createElement(ExpandMore, Object.assign({}, iconProps))) }))));
+                },
+                backgroundColor: props.readOnly ? '#f4f6f8' : 'auto',
+                height: props.readOnly ? '40px' : 'auto',
+                margin: props.readOnly ? '0px 5px' : 'auto',
+                borderRadius: '8px',
+                ...props.sx,
+            }, IconComponent: props.IconComponent ?? ((iconProps) => React.createElement(ExpandMore, { ...iconProps })) })));
 };
 export default Select;

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

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../theme';
 const Skeleton = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUISkeleton, Object.assign({}, props))));
+        React.createElement(MUISkeleton, { ...props })));
 };
 export default Skeleton;

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

@@ -4,10 +4,10 @@ import UIThemeProvider from '../../../theme';
 import { Alert } from '../Alert';
 export const Snackbar = (props) => {
     const { handleClose, error, message, autoHideDuration, action, children } = props;
-    return (React.createElement(UIThemeProvider, null, children ? (React.createElement(MUISnackbar, Object.assign({}, props))) : (React.createElement(MUISnackbar, Object.assign({ autoHideDuration: autoHideDuration !== null && autoHideDuration !== void 0 ? autoHideDuration : 6000, onClose: () => handleClose(), anchorOrigin: {
+    return (React.createElement(UIThemeProvider, null, children ? (React.createElement(MUISnackbar, { ...props })) : (React.createElement(MUISnackbar, { autoHideDuration: autoHideDuration ?? 6000, onClose: () => handleClose(), anchorOrigin: {
             vertical: 'bottom',
             horizontal: 'center',
-        } }, props),
+        }, ...props },
         React.createElement("div", null,
             React.createElement(Alert, { variant: "outlined", severity: error ? 'error' : 'success', onClose: () => handleClose(), action: action }, message))))));
 };

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

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { LocalDate } from '@js-joda/core';
 import { StaticDatePicker as MUIStaticDatePicker, } from '@mui/x-date-pickers';
 import React from 'react';
@@ -16,15 +5,14 @@ import UIThemeProvider from '../../../theme';
 import { InvalidDate } from '../../../util/date';
 import TextField from '../TextField';
 const StaticDatePicker = (props) => {
-    var _a;
-    const { value: inputValue, onChange: handleChange } = props, rest = __rest(props, ["value", "onChange"]);
+    const { value: inputValue, onChange: handleChange, ...rest } = props;
     let value = null;
     try {
         value = typeof inputValue === 'string' ? LocalDate.parse(inputValue) : inputValue;
     }
     catch (err) {
         // If we fail to parse the input string, log the error and continue as if no value was set.
-        console.error((_a = err.message) !== null && _a !== void 0 ? _a : err);
+        console.error(err.message ?? err);
     }
     const onChange = (newValue, keyboardInputValue) => {
         // Joda does not have a representation of an invalid date, so if the component fails to
@@ -36,6 +24,6 @@ const StaticDatePicker = (props) => {
         handleChange(newValue, keyboardInputValue);
     };
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIStaticDatePicker, Object.assign({ value: value, onChange: onChange, renderInput: (params) => React.createElement(TextField, Object.assign({}, params)) }, rest))));
+        React.createElement(MUIStaticDatePicker, { value: value, onChange: onChange, renderInput: (params) => React.createElement(TextField, { ...params }), ...rest })));
 };
 export default StaticDatePicker;

package/dist/published/components/core/Stepper/Step/Step.js

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../../theme';
 const Step = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIStep, Object.assign({}, props))));
+        React.createElement(MUIStep, { ...props })));
 };
 export default Step;

package/dist/published/components/core/Stepper/StepButton/StepButton.js

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../../theme';
 const StepButton = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIStepButton, Object.assign({}, props))));
+        React.createElement(MUIStepButton, { ...props })));
 };
 export default StepButton;

package/dist/published/components/core/Stepper/StepConnector/StepConnector.js

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../../theme';
 const StepConnector = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIStepConnector, Object.assign({}, props))));
+        React.createElement(MUIStepConnector, { ...props })));
 };
 export default StepConnector;

package/dist/published/components/core/Stepper/StepContent/StepContent.js

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../../theme';
 const StepContent = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIStepContent, Object.assign({}, props))));
+        React.createElement(MUIStepContent, { ...props })));
 };
 export default StepContent;

package/dist/published/components/core/Stepper/StepIcon/StepIcon.js

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../../theme';
 const StepIcon = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIStepIcon, Object.assign({}, props))));
+        React.createElement(MUIStepIcon, { ...props })));
 };
 export default StepIcon;

package/dist/published/components/core/Stepper/StepLabel/StepLabel.js

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../../theme';
 const StepLabel = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIStepLabel, Object.assign({}, props))));
+        React.createElement(MUIStepLabel, { ...props })));
 };
 export default StepLabel;

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

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../theme';
 const Stepper = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIStepper, Object.assign({}, props))));
+        React.createElement(MUIStepper, { ...props })));
 };
 export default Stepper;

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

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../theme';
 const Switch = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUISwitch, Object.assign({}, props))));
+        React.createElement(MUISwitch, { ...props })));
 };
 export default Switch;

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

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../theme';
 const Table = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUITable, Object.assign({}, props))));
+        React.createElement(MUITable, { ...props })));
 };
 export default Table;

package/dist/published/components/core/Tabs/Tab/Tab.js

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../../theme';
 const Tab = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUITab, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.children)));
+        React.createElement(MUITab, { ...props }, props?.children)));
 };
 export default Tab;

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

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../theme';
 const Tabs = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUITabs, Object.assign({}, props), props === null || props === void 0 ? void 0 : props.children)));
+        React.createElement(MUITabs, { ...props }, props?.children)));
 };
 export default Tabs;

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

@@ -19,19 +19,25 @@ const TextField = (props) => {
         '& fieldset': { borderColor: 'transparent', borderRadius: '8px' },
     };
     return (React.createElement(UIThemeProvider, null, variant === 'outlined' && !!label && labelPlacement === 'outside-top' ? (React.createElement(React.Fragment, null,
-        React.createElement(InputLabel, { htmlFor: id !== null && id !== void 0 ? id : '', sx: { paddingBottom: instructionText ? '0px' : '3px', fontSize: '14px' } }, label !== null && label !== void 0 ? label : '',
+        React.createElement(InputLabel, { htmlFor: id ?? '', sx: { paddingBottom: instructionText ? '0px' : '3px', fontSize: '14px' } },
+            label ?? '',
             ' ',
             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({ inputProps: {
+        React.createElement(MUITextField, { inputProps: {
                 readOnly: readOnly,
                 'aria-readonly': !!readOnly,
                 'data-testid': 'label-outside',
-            } }, props, { label: null, sx: readOnly
-                ? Object.assign(Object.assign({}, readOnlyStyles), props.sx) : Object.assign({ '& fieldset': { borderRadius: '8px' } }, props.sx) })),
+            }, ...props, label: null, sx: readOnly
+                ? { ...readOnlyStyles, ...props.sx }
+                : {
+                    '& fieldset': { borderRadius: '8px' },
+                    ...props.sx,
+                } }),
         error && React.createElement(FieldError, { required: required, label: errorMessage }))) : (React.createElement(React.Fragment, null,
-        React.createElement(MUITextField, Object.assign({ inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly, 'data-testid': 'label-inside' } }, props, { sx: readOnly
-                ? Object.assign(Object.assign({}, readOnlyStyles), props.sx) : Object.assign({ '& fieldset': { borderRadius: '8px' } }, props.sx) })),
+        React.createElement(MUITextField, { inputProps: { readOnly: readOnly, 'aria-readonly': !!readOnly, 'data-testid': 'label-inside' }, ...props, sx: readOnly
+                ? { ...readOnlyStyles, ...props.sx }
+                : { '& fieldset': { borderRadius: '8px' }, ...props.sx } }),
         error && React.createElement(FieldError, { required: required, label: errorMessage })))));
 };
 export default TextField;

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

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../theme';
 const ToggleButton = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIToggleButton, Object.assign({}, props))));
+        React.createElement(MUIToggleButton, { ...props })));
 };
 export default ToggleButton;

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

@@ -3,6 +3,6 @@ import React from 'react';
 import UIThemeProvider from '../../../theme';
 const ToggleButtonGroup = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIToggleButtonGroup, Object.assign({}, props))));
+        React.createElement(MUIToggleButtonGroup, { ...props })));
 };
 export default ToggleButtonGroup;

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

@@ -2,8 +2,21 @@ import { Tooltip as MUITooltip } from '@mui/material';
 import React from 'react';
 import UIThemeProvider from '../../../theme';
 const Tooltip = (props) => {
-    var _a, _b, _c;
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUITooltip, Object.assign({}, props, { componentsProps: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.componentsProps), { tooltip: Object.assign(Object.assign({}, (_a = props === null || props === void 0 ? void 0 : props.componentsProps) === null || _a === void 0 ? void 0 : _a.tooltip), { sx: Object.assign({ borderRadius: '8px', padding: '8px 12px', backgroundColor: 'rgb(50, 48, 48, .90)', fontSize: '13px', fontWeight: 400, maxWidth: '320px' }, (_c = (_b = props === null || props === void 0 ? void 0 : props.componentsProps) === null || _b === void 0 ? void 0 : _b.tooltip) === null || _c === void 0 ? void 0 : _c.sx) }) }) }))));
+        React.createElement(MUITooltip, { ...props, componentsProps: {
+                ...props?.componentsProps,
+                tooltip: {
+                    ...props?.componentsProps?.tooltip,
+                    sx: {
+                        borderRadius: '8px',
+                        padding: '8px 12px',
+                        backgroundColor: 'rgb(50, 48, 48, .90)',
+                        fontSize: '13px',
+                        fontWeight: 400,
+                        maxWidth: '320px',
+                        ...props?.componentsProps?.tooltip?.sx,
+                    },
+                },
+            } })));
 };
 export default Tooltip;

package/dist/published/components/core/Typography/index.js

@@ -4,7 +4,7 @@ import UIThemeProvider from '../../../theme';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Typography = (props) => {
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUITypography, Object.assign({}, props))));
+        React.createElement(MUITypography, { ...props })));
 };
 export default Typography;
 export { Typography };

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

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { Box } from '@mui/material';
 import { DataGrid as MuiDataGrid, } from '@mui/x-data-grid';
 import React, { useMemo, useState } from 'react';
@@ -17,8 +6,7 @@ import ErrorComponent from '../ErrorComponent';
 import BuilderGridToolbar from './BuilderGridToolbar';
 import { EmptyContent } from './EmptyContent';
 const BuilderGrid = (props) => {
-    var _a, _b, _c, _d, _e;
-    const { loading, actions, item, rows, initialSort, emptyContentSelectOptions, emptyContentActionIndex, title, subtitle, disablePagination, hideEmptyContent, hideToolbar, hideSearchbar, noRowsOverlay, filterComponent, error } = props, rest = __rest(props, ["loading", "actions", "item", "rows", "initialSort", "emptyContentSelectOptions", "emptyContentActionIndex", "title", "subtitle", "disablePagination", "hideEmptyContent", "hideToolbar", "hideSearchbar", "noRowsOverlay", "filterComponent", "error"]);
+    const { loading, actions, item, rows, initialSort, emptyContentSelectOptions, emptyContentActionIndex, title, subtitle, disablePagination, hideEmptyContent, hideToolbar, hideSearchbar, noRowsOverlay, filterComponent, error, ...rest } = props;
     const [anchorEl, setAnchorEl] = useState();
     const toolbar = useMemo(() => () => (React.createElement(BuilderGridToolbar, { loading: loading, actions: actions, title: title, subtitle: subtitle, hideSearchbar: hideSearchbar, filter: filterComponent })), [loading, actions]);
     return (React.createElement(UIThemeProvider, null, loading || rows.length || hideEmptyContent ? (React.createElement(Box, { sx: {
@@ -29,38 +17,54 @@ const BuilderGrid = (props) => {
             borderBottom: 'none',
             boxShadow: 'rgba(145, 158, 171, 0.2) 0px 8px 16px',
         } },
-        React.createElement(MuiDataGrid, Object.assign({ autoPageSize: !disablePagination, hideFooterPagination: disablePagination, hideFooter: disablePagination, onMenuOpen: (env) => setAnchorEl(env.target), loading: loading, rows: rows }, rest, { sx: Object.assign({ border: 'none', '& .MuiDataGrid-toolbarContainer': {
+        React.createElement(MuiDataGrid, { autoPageSize: !disablePagination, hideFooterPagination: disablePagination, hideFooter: disablePagination, onMenuOpen: (env) => setAnchorEl(env.target), loading: loading, rows: rows, ...rest, sx: {
+                border: 'none',
+                '& .MuiDataGrid-toolbarContainer': {
                     padding: '0',
                     fontColor: '#212B36',
                     margin: '16px 16px 0 16px',
-                }, '& .MuiDataGrid-row': {
+                },
+                '& .MuiDataGrid-row': {
                     borderBottom: '1px solid #eee',
-                }, '& .MuiDataGrid-cell': {
+                },
+                '& .MuiDataGrid-cell': {
                     border: 'none',
                     padding: '0 24px',
-                }, '& .MuiDataGrid-footerContainer': {
+                },
+                '& .MuiDataGrid-footerContainer': {
                     borderRadius: '0 0 6px 6px',
                     height: '60px',
                     borderTop: 'none',
-                }, '& .MuiTablePagination-displayedRows': {
+                },
+                '& .MuiTablePagination-displayedRows': {
                     marginBottom: 0,
-                }, '& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-columnHeader:focus': {
+                },
+                '& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-columnHeader:focus': {
                     outline: 'none',
-                }, '& .MuiDataGrid-iconSeparator': { visibility: 'hidden' }, '& .MuiDataGrid-cell:focus-within, & .MuiDataGrid-cell:focus': {
+                },
+                '& .MuiDataGrid-iconSeparator': { visibility: 'hidden' },
+                '& .MuiDataGrid-cell:focus-within, & .MuiDataGrid-cell:focus': {
                     outline: 'none',
-                }, '& .MuiDataGrid-columnHeader': {
+                },
+                '& .MuiDataGrid-columnHeader': {
                     backgroundColor: '#F4F6F8',
                     padding: '0 24px',
-                }, '& .MuiDataGrid-columnHeaders': {
+                },
+                '& .MuiDataGrid-columnHeaders': {
                     borderTop: hideToolbar ? 'none' : '1px solid #e2e2e3',
                     borderRadius: 0,
                     backgroundColor: '#f4f6f8',
-                }, '& .MuiDataGrid-columnHeaderTitle': {
+                },
+                '& .MuiDataGrid-columnHeaderTitle': {
                     color: '#637381',
                     fontWeight: 700,
-                }, '& .MuiDataGrid-iconButtonContainer': {
+                },
+                '& .MuiDataGrid-iconButtonContainer': {
                     marginLeft: '4px',
-                }, height: disablePagination && !loading ? 'auto' : 'calc(100vh - 240px)' }, rest.sx), getRowId: (row) => row.id, disableColumnMenu: true, initialState: {
+                },
+                height: disablePagination && !loading ? 'auto' : 'calc(100vh - 240px)',
+                ...rest.sx,
+            }, getRowId: (row) => row.id, disableColumnMenu: true, initialState: {
                 sorting: {
                     sortModel: initialSort ? [initialSort] : [],
                 },
@@ -85,7 +89,7 @@ const BuilderGrid = (props) => {
                 noRowsOverlay: () => {
                     return noRowsOverlay ? noRowsOverlay : null;
                 },
-            }, rowHeight: 60, columnHeaderHeight: 62 })))) : (React.createElement(React.Fragment, null, error ? (React.createElement(Box, { sx: {
+            }, rowHeight: 60, columnHeaderHeight: 62 }))) : (React.createElement(React.Fragment, null, error ? (React.createElement(Box, { sx: {
             backgroundColor: '#fff',
             borderRadius: '6px',
             display: 'flex',
@@ -93,7 +97,7 @@ const BuilderGrid = (props) => {
             justifyContent: 'center',
             boxShadow: '0px 24px 48px rgba(145, 158, 171, 0.4)',
             width: '100%',
-            height: (_b = (_a = rest.sx) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 'calc(100vh - 240px)',
+            height: rest.sx?.height ?? 'calc(100vh - 240px)',
         } },
         React.createElement(ErrorComponent, { code: error === 403 ? 'AccessDenied' : error === 404 ? 'NotFound' : 'Misconfigured', styles: { boxShadow: 'none' } }))) : rows && !rows.length ? (React.createElement(Box, { sx: {
             backgroundColor: '#fff',
@@ -103,8 +107,8 @@ const BuilderGrid = (props) => {
             justifyContent: 'center',
             boxShadow: '0px 24px 48px rgba(145, 158, 171, 0.4)',
             width: '100%',
-            height: (_d = (_c = rest.sx) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 'calc(100vh - 240px)',
+            height: rest.sx?.height ?? 'calc(100vh - 240px)',
         } },
-        React.createElement(EmptyContent, { item: item, onClick: (_e = actions === null || actions === void 0 ? void 0 : actions[emptyContentActionIndex !== null && emptyContentActionIndex !== void 0 ? emptyContentActionIndex : 0]) === null || _e === void 0 ? void 0 : _e.onClick, selectOptions: emptyContentSelectOptions }))) : (React.createElement(React.Fragment, null))))));
+        React.createElement(EmptyContent, { item: item, onClick: actions?.[emptyContentActionIndex ?? 0]?.onClick, selectOptions: emptyContentSelectOptions }))) : (React.createElement(React.Fragment, null))))));
 };
 export default BuilderGrid;

package/dist/published/components/custom/BuilderGrid/BuilderGridToolbar.js

@@ -5,7 +5,6 @@ import UIThemeProvider from '../../../theme';
 import { Grid } from '../../layout';
 import { ToolbarActions } from './ToolbarActions';
 function BuilderGridToolbar(props) {
-    var _a, _b, _c;
     const { theme, actions, title, subtitle, filter, hideSearchbar } = props;
     const styles = {
         container: {
@@ -32,7 +31,7 @@ function BuilderGridToolbar(props) {
             '& .MuiOutlinedInput-root': {
                 minWidth: '300px',
                 '&.Mui-focused fieldset': {
-                    borderColor: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : 'primary',
+                    borderColor: theme?.palette?.primary?.main ?? 'primary',
                 },
             },
             '& fieldset': {

package/dist/published/components/custom/BuilderGrid/EmptyContent.js

@@ -39,13 +39,12 @@ export const EmptyContent = (props) => {
         React.createElement(Box, { display: "flex", justifyContent: "center" },
             React.createElement(Typography, { sx: styles.message }, !selectOptions ? `Get started by adding a new ${item}` : selectOptions.instructionText)),
         selectOptions && (React.createElement(Box, { display: "flex", justifyContent: "center" },
-            React.createElement(Autocomplete, { id: 'option', options: selectOptions.options, sx: { width: '200px', marginTop: '15px' }, value: selectOptions.selectedOption || null, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { placeholder: selectOptions.placeholder, size: "small" }))), isOptionEqualToValue: (option, value) => option.value === value, getOptionLabel: (option) => {
-                    var _a, _b, _c, _d;
+            React.createElement(Autocomplete, { id: 'option', options: selectOptions.options, sx: { width: '200px', marginTop: '15px' }, value: selectOptions.selectedOption || null, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: selectOptions.placeholder, size: "small" })), isOptionEqualToValue: (option, value) => option.value === value, getOptionLabel: (option) => {
                     if (typeof option === 'string') {
-                        return ((_b = (_a = selectOptions.options) === null || _a === void 0 ? void 0 : _a.find((o) => o.value === option)) === null || _b === void 0 ? void 0 : _b.label) || '';
+                        return selectOptions.options?.find((o) => o.value === option)?.label || '';
                     }
-                    return ((_d = (_c = selectOptions.options) === null || _c === void 0 ? void 0 : _c.find((o) => o.value === (option === null || option === void 0 ? void 0 : option.value))) === null || _d === void 0 ? void 0 : _d.label) || '';
-                }, sortBy: 'ASC', onChange: (e, val) => selectOptions.onChange(val === null || val === void 0 ? void 0 : val.value) }))),
+                    return selectOptions.options?.find((o) => o.value === option?.value)?.label || '';
+                }, sortBy: 'ASC', onChange: (e, val) => selectOptions.onChange(val?.value) }))),
         React.createElement(Box, { display: "flex", justifyContent: "center" },
             React.createElement(Button, { sx: styles.button, variant: "contained", size: "medium", color: "inherit", onClick: onClick }, `Create ${startCase(item)}`))));
 };

package/dist/published/components/custom/BuilderGrid/EmptyContentIllustration.js

@@ -1,6 +1,11 @@
 import { SvgIcon } from '@mui/material';
 import React from 'react';
-export const EmptyContentIllustration = (props) => (React.createElement(SvgIcon, Object.assign({}, props, { viewBox: '0 0 150 113', sx: Object.assign({ verticalAlign: 'top', height: 'auto', width: 'auto' }, props.sx) }),
+export const EmptyContentIllustration = (props) => (React.createElement(SvgIcon, { ...props, viewBox: '0 0 150 113', sx: {
+        verticalAlign: 'top',
+        height: 'auto',
+        width: 'auto',
+        ...props.sx,
+    } },
     React.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", fontSize: "18rem" },
         React.createElement("g", { opacity: "0.2" },
             React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0 62.119C0 75.0743 4.67043 86.8799 12.356 95.802C21.173 106.041 33.9585 112.478 48.2102 112.5C54.4388 112.509 60.3944 111.285 65.8649 109.051C68.6934 107.895 71.8593 108.028 74.5988 109.397C77.8123 111.001 81.4107 111.901 85.2104 111.901C86.78 111.901 88.3171 111.746 89.804 111.453C94.0481 110.618 97.9102 108.643 101.082 105.846C103.075 104.088 105.628 103.204 108.237 103.207H108.282C116.903 103.207 124.912 100.478 131.561 95.802C137.505 91.6269 142.359 85.8969 145.593 79.1692C148.413 73.3066 150 66.6837 150 59.6743C150 35.6335 131.321 16.1417 108.282 16.1417C105.933 16.1417 103.632 16.3487 101.387 16.7349C95.443 6.69377 84.7985 0 72.6558 0C67.5291 0 62.6688 1.19303 58.3183 3.33163C54.1809 5.35885 50.5024 8.23946 47.4932 11.75C37.2754 11.92 27.8275 15.4031 20.0947 21.2161C7.92233 30.361 0 45.2757 0 62.119Z", fill: "url(#paint0_linear_25056_169704)" })),

package/dist/published/components/custom/BuilderGrid/ToolbarActions.js

@@ -3,7 +3,9 @@ import { Button } from '../../core';
 import { Grid } from '../../layout';
 export const ToolbarActions = (props) => {
     const { actions } = props;
-    return (React.createElement(Grid, { item: true, container: true, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }, actions === null || actions === void 0 ? void 0 : actions.filter((a) => !a.isHidden).map((action, index) => (React.createElement(Grid, { item: true, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' },
+    return (React.createElement(Grid, { item: true, container: true, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }, actions
+        ?.filter((a) => !a.isHidden)
+        .map((action, index) => (React.createElement(Grid, { item: true, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' },
         React.createElement(Button, { sx: {
                 fontWeight: 700,
                 height: '36px',