@evoke-platform/ui-components 1.0.0-dev.212 → 1.0.0-dev.214

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

@@ -39,7 +39,7 @@ const Autocomplete = (props) => {
         return (React.createElement(UIThemeProvider, null,
             React.createElement(InputLabel, { htmlFor: (_a = props.id) !== null && _a !== void 0 ? _a : '', sx: { display: 'flex', paddingBottom: '0px', fontSize: '14px' } }, (_b = props.label) !== null && _b !== void 0 ? _b : '',
                 ' ',
-                props.required ? (React.createElement(Typography, { sx: { color: 'red', fontSize: '14px' }, component: 'span' }, "*")) : null,
+                props.required ? (React.createElement(Typography, { sx: { color: 'red', fontSize: '14px', marginLeft: '4px', alignSelf: 'flex-start' } }, "*")) : null,
                 props.tooltip && (React.createElement(Tooltip, { title: props.tooltip, placement: "right" },
                     React.createElement(InfoRounded, { sx: {
                             fontSize: '14px',

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

@@ -36,6 +36,12 @@ const DatePicker = (props) => {
         handleChange(newValue, keyboardInputValue);
     };
     return (React.createElement(UIThemeProvider, null,
-        React.createElement(MUIDatePicker, Object.assign({ value: value, onChange: onChange, renderInput: (params) => React.createElement(TextField, Object.assign({}, params)) }, rest))));
+        React.createElement(MUIDatePicker, Object.assign({ value: value, onChange: onChange, renderInput: (params) => React.createElement(TextField, Object.assign({}, params)), PaperProps: {
+                sx: {
+                    '&.MuiPickersPopper-paper': {
+                        borderRadius: '12px',
+                    },
+                },
+            } }, rest))));
 };
 export default DatePicker;

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

@@ -4,8 +4,8 @@ import { InfoRounded } from '@mui/icons-material';
 const FieldError = (props) => {
     var _a;
     const label = (_a = props.label) !== null && _a !== void 0 ? _a : (props.required ? 'Required Field' : '');
-    return label ? (React.createElement(Box, { display: 'flex' },
-        React.createElement(InfoRounded, { color: 'error', sx: { fontSize: '12px', paddingRight: '3px', paddingTop: '5px' } }),
+    return label ? (React.createElement(Box, { display: 'flex', alignItems: 'center' },
+        React.createElement(InfoRounded, { color: 'error', sx: { fontSize: '.75rem', marginRight: '3px' } }),
         React.createElement(Typography, { fontSize: '12px', color: 'error' }, label))) : null;
 };
 export default FieldError;

package/dist/published/components/core/LoadingButton/LoadingButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { LoadingButtonProps } from '@mui/lab';
+declare const LoadingButton: (props: LoadingButtonProps) => JSX.Element;
+export default LoadingButton;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { LoadingButton as MUILoadingButton } from '@mui/lab';
+import UIThemeProvider from '../../../theme';
+const LoadingButton = (props) => {
+    return (React.createElement(UIThemeProvider, null,
+        React.createElement(MUILoadingButton, Object.assign({}, props, { sx: Object.assign({ borderRadius: '8px', boxShadow: 'none', '&:hover': { boxShadow: 'none' } }, props.sx) }), props === null || props === void 0 ? void 0 : props.children)));
+};
+export default LoadingButton;

package/dist/published/components/core/LoadingButton/index.d.ts

@@ -0,0 +1,3 @@
+import LoadingButton from './LoadingButton';
+export default LoadingButton;
+export { LoadingButton };

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

@@ -0,0 +1,3 @@
+import LoadingButton from './LoadingButton';
+export default LoadingButton;
+export { LoadingButton };

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

@@ -23,7 +23,11 @@ const TextField = (props) => {
             ' ',
             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, 'data-testid': 'label-outside' }, sx: readOnly
+        React.createElement(MUITextField, Object.assign({ 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) })),
         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

package/dist/published/components/core/index.d.ts

@@ -18,6 +18,7 @@ export { Drawer } from './Drawer';
 export { LinearProgress } from './LinearProgress';
 export { Link } from './Link';
 export * from './LocalizationProvider';
+export { LoadingButton } from './LoadingButton';
 export { Menu, MenuItem } from './Menu';
 export { Skeleton } from './Skeleton';
 export { Snackbar } from './Snackbar';
@@ -45,8 +46,8 @@ export { Step, StepLabel, Stepper, StepContent, StepButton, StepIcon, StepConnec
 export { Popover } from './Popover';
 export { Popper } from './Popper';
 export { SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, ListItemButton, ListItemText, CardActions, CardActionArea, CardContent, CardMedia, CardHeader, Input, InputLabel, InputAdornment, } from '@mui/material';
-export { LoadingButton, TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
+export { TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
 export { useGridApiRef } from '@mui/x-data-grid';
 export type { GridSize } from '@mui/material';
 export type { AutocompleteOption } from './Autocomplete/Autocomplete';
-export type { GridCellParams, GridColDef, GridFilterModel, GridValueFormatterParams, GridValueGetterParams, GridEventListener, GridInitialState, } from '@mui/x-data-grid';
+export type { GridCellParams, GridColDef, GridRowParams, GridFilterModel, GridValueFormatterParams, GridValueGetterParams, GridEventListener, GridInitialState, } from '@mui/x-data-grid';

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

@@ -18,6 +18,7 @@ export { Drawer } from './Drawer';
 export { LinearProgress } from './LinearProgress';
 export { Link } from './Link';
 export * from './LocalizationProvider';
+export { LoadingButton } from './LoadingButton';
 export { Menu, MenuItem } from './Menu';
 export { Skeleton } from './Skeleton';
 export { Snackbar } from './Snackbar';
@@ -46,5 +47,5 @@ export { Popover } from './Popover';
 export { Popper } from './Popper';
 //TODO: Review following components. They also need theme control:
 export { SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, ListItemButton, ListItemText, CardActions, CardActionArea, CardContent, CardMedia, CardHeader, Input, InputLabel, InputAdornment, } from '@mui/material';
-export { LoadingButton, TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
+export { TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
 export { useGridApiRef } from '@mui/x-data-grid';

package/dist/published/components/custom/BuilderGrid/BuilderGrid.d.ts

@@ -5,18 +5,22 @@ export declare type GridAction = {
     label: string;
     onClick: () => void;
     isHidden?: boolean;
+    variant?: 'text' | 'outlined' | 'contained';
 };
 export declare type BuilderGridProps<T extends GridValidRowModel> = MuiDataGridProps<T> & {
-    action?: GridAction;
+    actions?: GridAction[];
     item?: string;
     initialSort?: GridSortItem;
     emptyContentSelectOptions?: EmptyContentSelectOptions;
+    emptyContentActionIndex?: number;
     title?: string;
+    subtitle?: string;
     disablePagination?: boolean;
     hideEmptyContent?: boolean;
     hideToolbar?: boolean;
     noRowsOverlay?: React.ReactElement;
     filterComponent?: React.ReactElement;
+    error?: number;
 };
 declare const BuilderGrid: <T extends GridValidRowModel>(props: BuilderGridProps<T>) => JSX.Element;
 export default BuilderGrid;

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

@@ -15,11 +15,12 @@ import React, { useMemo, useState } from 'react';
 import UIThemeProvider from '../../../theme';
 import BuilderGridToolbar from './BuilderGridToolbar';
 import { EmptyContent } from './EmptyContent';
+import ErrorComponent from '../ErrorComponent';
 const BuilderGrid = (props) => {
-    var _a, _b;
-    const { loading, action, item, rows, initialSort, emptyContentSelectOptions, title, disablePagination, hideEmptyContent, hideToolbar, noRowsOverlay, filterComponent } = props, rest = __rest(props, ["loading", "action", "item", "rows", "initialSort", "emptyContentSelectOptions", "title", "disablePagination", "hideEmptyContent", "hideToolbar", "noRowsOverlay", "filterComponent"]);
+    var _a, _b, _c, _d, _e;
+    const { loading, actions, item, rows, initialSort, emptyContentSelectOptions, emptyContentActionIndex, title, subtitle, disablePagination, hideEmptyContent, hideToolbar, noRowsOverlay, filterComponent, error } = props, rest = __rest(props, ["loading", "actions", "item", "rows", "initialSort", "emptyContentSelectOptions", "emptyContentActionIndex", "title", "subtitle", "disablePagination", "hideEmptyContent", "hideToolbar", "noRowsOverlay", "filterComponent", "error"]);
     const [anchorEl, setAnchorEl] = useState();
-    const toolbar = useMemo(() => () => React.createElement(BuilderGridToolbar, { loading: loading, action: action, title: title, filter: filterComponent }), [loading, action]);
+    const toolbar = useMemo(() => () => (React.createElement(BuilderGridToolbar, { loading: loading, actions: actions, title: title, subtitle: subtitle, filter: filterComponent })), [loading, actions]);
     return (React.createElement(UIThemeProvider, null, loading || rows.length || hideEmptyContent ? (React.createElement(Box, { sx: {
             backgroundColor: '#fff',
             borderRadius: '6px',
@@ -84,15 +85,26 @@ const BuilderGrid = (props) => {
                 noRowsOverlay: () => {
                     return noRowsOverlay ? noRowsOverlay : null;
                 },
-            }, rowHeight: 60, columnHeaderHeight: 62 })))) : (React.createElement(React.Fragment, null, rows && !rows.length && (React.createElement(Box, { sx: {
+            }, rowHeight: 60, columnHeaderHeight: 62 })))) : (React.createElement(React.Fragment, null, error ? (React.createElement(Box, { sx: {
             backgroundColor: '#fff',
             borderRadius: '6px',
             display: 'flex',
             alignItems: 'center',
             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)',
         } },
-        React.createElement(EmptyContent, { item: item, onClick: action === null || action === void 0 ? void 0 : action.onClick, selectOptions: emptyContentSelectOptions })))))));
+        React.createElement(ErrorComponent, { code: error === 403 ? 'AccessDenied' : error === 404 ? 'NotFound' : 'Misconfigured', styles: { boxShadow: 'none' } }))) : rows && !rows.length ? (React.createElement(Box, { sx: {
+            backgroundColor: '#fff',
+            borderRadius: '6px',
+            display: 'flex',
+            alignItems: 'center',
+            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)',
+        } },
+        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))))));
 };
 export default BuilderGrid;

package/dist/published/components/custom/BuilderGrid/BuilderGridToolbar.d.ts

@@ -2,8 +2,9 @@ import { GridToolbarProps as MuiGridToolbarProps } from '@mui/x-data-grid';
 import React from 'react';
 import { GridAction } from './BuilderGrid';
 export declare type BuilderGridToolbar = MuiGridToolbarProps & {
-    action?: GridAction;
+    actions?: GridAction[];
     title?: string;
+    subtitle?: string;
     filter?: React.ReactElement;
 };
 declare function BuilderGridToolbar(props: BuilderGridToolbar): JSX.Element;

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

@@ -1,12 +1,12 @@
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { GridToolbarContainer, GridToolbarQuickFilter, } from '@mui/x-data-grid';
 import React from 'react';
 import UIThemeProvider from '../../../theme';
-import { Button } from '../../core';
 import { Grid } from '../../layout';
+import { ToolbarActions } from './ToolbarActions';
 function BuilderGridToolbar(props) {
     var _a, _b, _c;
-    const { theme, action, title, filter } = props;
+    const { theme, actions, title, subtitle, filter } = props;
     const styles = {
         container: {
             display: 'flex',
@@ -42,22 +42,19 @@ function BuilderGridToolbar(props) {
     };
     return (React.createElement(UIThemeProvider, { args: { theme: theme } },
         React.createElement(GridToolbarContainer, { sx: { padding: '0' } },
-            title && (React.createElement(Typography, { sx: { fontSize: '18px', fontWeight: 700, marginBottom: '6px', marginTop: '6px' } }, title)),
+            title && (React.createElement(React.Fragment, null,
+                React.createElement(Box, { display: subtitle ? 'flex' : 'block', justifyContent: 'space-between', width: '100%' },
+                    React.createElement(Box, null,
+                        React.createElement(Typography, { sx: { fontSize: '18px', fontWeight: 700, marginBottom: '6px', marginTop: '6px' } }, title),
+                        subtitle && React.createElement(Typography, { sx: { fontSize: '14px' } }, subtitle)),
+                    React.createElement(ToolbarActions, { actions: actions })))),
             React.createElement(Grid, { container: true, sx: styles.container },
-                React.createElement(Grid, { item: true, xs: filter ? 3 : 6, sx: {
+                !subtitle && (React.createElement(Grid, { item: true, xs: filter ? 3 : 6, sx: {
                         display: 'flex',
                         alignItems: 'center',
                     } },
-                    React.createElement(GridToolbarQuickFilter, { variant: "outlined", size: "small", sx: Object.assign(Object.assign({}, styles.quickFilter), { flex: filter ? 1 : 0 }) })),
+                    React.createElement(GridToolbarQuickFilter, { variant: "outlined", size: "small", sx: Object.assign(Object.assign({}, styles.quickFilter), { flex: filter ? 1 : 0 }) }))),
                 filter && (React.createElement(Grid, { xs: 6, item: true, sx: { display: 'flex' } }, filter)),
-                action && !action.isHidden && (React.createElement(Grid, { item: true, xs: filter ? 3 : 6, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' },
-                    React.createElement(Button, { sx: {
-                            fontWeight: 700,
-                            height: '36px',
-                            padding: '0px 14px',
-                            '&:hover': {
-                                boxShadow: 'none',
-                            },
-                        }, onClick: action.onClick, variant: 'contained' }, action.label)))))));
+                !title && React.createElement(ToolbarActions, { actions: actions })))));
 }
 export default BuilderGridToolbar;

package/dist/published/components/custom/BuilderGrid/ToolbarActions.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { GridAction } from './BuilderGrid';
+declare type ToolbarActionsProps = {
+    filter?: React.ReactElement;
+    actions?: GridAction[];
+};
+export declare const ToolbarActions: (props: ToolbarActionsProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button } from '../../core';
+import { Grid } from '../../layout';
+export const ToolbarActions = (props) => {
+    const { filter, actions } = props;
+    return (React.createElement(Grid, { item: true, container: true, xs: filter ? 3 : 6, 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' },
+        React.createElement(Button, { sx: {
+                fontWeight: 700,
+                height: '36px',
+                padding: '0px 14px',
+                '&:hover': {
+                    boxShadow: 'none',
+                },
+                marginRight: index === actions.length - 1 ? '0px' : '16px',
+            }, onClick: action.onClick, variant: action.variant || 'contained' }, action.label))))));
+};

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

@@ -41,7 +41,7 @@ export default function ErrorComponent(props) {
                 return React.createElement(WarningRounded, { sx: { color: '#ef8228' } });
         }
     };
-    return (React.createElement(Grid, { item: true, xs: colspan !== null && colspan !== void 0 ? colspan : 12, sm: 12, sx: Object.assign({ background: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', boxShadow: '0px 8px 16px 0px rgba(145, 158, 171, 0.12)', borderRadius: '6px', height: 200 }, styles) },
+    return (React.createElement(Grid, { item: true, xs: colspan !== null && colspan !== void 0 ? colspan : 12, sm: colspan !== null && colspan !== void 0 ? colspan : 12, sx: Object.assign({ background: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', boxShadow: '0px 8px 16px 0px rgba(145, 158, 171, 0.12)', borderRadius: '6px', height: 200 }, styles) },
         React.createElement(Box, { sx: {
                 padding: '8px',
                 height: '36px',

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

@@ -52,7 +52,7 @@ test('returns selected date', () => __awaiter(void 0, void 0, void 0, function*
     const feb29 = yield within(calendar).findByRole('gridcell', { name: '29' });
     yield user.click(feb29);
     expect(onChangeMock).toBeCalledWith('testDate', LocalDate.of(2024, Month.FEBRUARY, 29), dateProperty);
-}));
+}), 10000);
 test('returns manually entered date', () => __awaiter(void 0, void 0, void 0, function* () {
     const user = userEvent.setup();
     const onChangeMock = jest.fn((name, value, property) => { });

package/dist/published/components/custom/FormField/DateTimePickerSelect/DateTimePickerSelect.test.js

@@ -56,7 +56,7 @@ test('returns selected date time', () => __awaiter(void 0, void 0, void 0, funct
     // https://stackoverflow.com/questions/74812963/how-do-i-pick-the-time-in-an-mui-datetimepicker-using-testing-library-react-and.
     // All it can do is check the date picker part works.
     expect(onChangeMock).toBeCalledWith('testDateTime', LocalDateTime.of(2024, Month.FEBRUARY, 29, 0, 0, 0), dateTimeProperty);
-}));
+}), 10000);
 test('returns manually entered date time', () => __awaiter(void 0, void 0, void 0, function* () {
     const user = userEvent.setup();
     const onChangeMock = jest.fn((name, value, property) => { });

package/dist/published/index.d.ts

@@ -5,4 +5,7 @@ export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, FormField, Menu
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './util';
 export * as EVOKE_TYPES from './types';
-export type { FormControlProps, FormHelperTextProps, GridSize } from '@mui/material';
+export type { ButtonBaseActions, ButtonBaseClasses, FormControlProps, FormHelperTextProps, GridSize, MenuItemClasses, Theme, } from '@mui/material';
+export type { TouchRippleProps, TouchRippleActions } from '@mui/material/ButtonBase/TouchRipple';
+export type { CommonProps } from '@mui/material/OverridableComponent';
+export type { SxProps } from '@mui/system';

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<(props: import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+declare const _default: ComponentMeta<(props: import("@mui/system").SystemProps<import("@mui/material/styles/createTheme").Theme> & {
     children?: React.ReactNode;
     component?: React.ElementType<any> | undefined;
     ref?: React.Ref<unknown> | undefined;
-    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    sx?: import("@mui/system/styleFunctionSx/styleFunctionSx").SxProps<import("@mui/material/styles/createTheme").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("zIndex" | "typography" | "fontFamily" | "fontSize" | "color" | "fontWeight" | "lineHeight" | "p" | "margin" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint") | "component"> & {
@@ -12,11 +12,11 @@ declare const _default: ComponentMeta<(props: import("@mui/system").SystemProps<
     component?: React.ElementType<any> | undefined;
 }) => JSX.Element>;
 export default _default;
-export declare const Palette: ComponentStory<(props: import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+export declare const Palette: ComponentStory<(props: import("@mui/system").SystemProps<import("@mui/material/styles/createTheme").Theme> & {
     children?: React.ReactNode;
     component?: React.ElementType<any> | undefined;
     ref?: React.Ref<unknown> | undefined;
-    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    sx?: import("@mui/system/styleFunctionSx/styleFunctionSx").SxProps<import("@mui/material/styles/createTheme").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("zIndex" | "typography" | "fontFamily" | "fontSize" | "color" | "fontWeight" | "lineHeight" | "p" | "margin" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint") | "component"> & {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.212",
+    "version": "1.0.0-dev.214",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",