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

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/InstanceLookup.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ApiServices, Obj, ObjectInstance, Property } from '@evoke-platform/context';
+import { ApiServices, Obj, ObjectInstance, Property, TableViewLayout } from '@evoke-platform/context';
 export declare type InstanceLookUpProps = {
     object: Obj;
     instanceId?: string;
@@ -9,6 +9,7 @@ export declare type InstanceLookUpProps = {
     mode: 'default' | 'existingOnly';
     nestedFieldsView?: boolean;
     filter?: Record<string, unknown>;
+    layout?: TableViewLayout;
 };
 export declare type SearchFieldProps = {
     searchableColumns: Property[];

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/InstanceLookup.js

@@ -54,20 +54,20 @@ const SearchField = (props) => {
         } }));
 };
 export const InstanceLookup = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    const { object, apiServices, setSelectedInstance, mode, nestedFieldsView, setRelationType, filter: criteriaFilter, } = props;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { object, apiServices, setSelectedInstance, mode, nestedFieldsView, setRelationType, filter: criteriaFilter, layout, } = props;
     const [rows, setRows] = useState([]);
     const [loading, setLoading] = useState(false);
     const [filter, setFilter] = useState();
     const [searchString, setSearchString] = useState('');
     const [searchableColumns] = useState((_b = (_a = object.properties) === null || _a === void 0 ? void 0 : _a.filter((property) => property.searchable)) !== null && _b !== void 0 ? _b : []);
     const retrieveColumns = (tableViewLayout) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         let columns = [];
-        if (tableViewLayout === null || tableViewLayout === void 0 ? void 0 : tableViewLayout.properties) {
+        if ((_a = tableViewLayout === null || tableViewLayout === void 0 ? void 0 : tableViewLayout.properties) === null || _a === void 0 ? void 0 : _a.length) {
             for (const prop of tableViewLayout.properties) {
                 const propertyId = prop.id.split('.')[0];
-                const property = (_a = object.properties) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === propertyId);
+                const property = (_b = object.properties) === null || _b === void 0 ? void 0 : _b.find((p) => p.id === propertyId);
                 if (property) {
                     if (property.type === 'address') {
                         columns.push({
@@ -166,20 +166,19 @@ export const InstanceLookup = (props) => {
             }
         }
         else {
-            const name = (_b = object.properties) === null || _b === void 0 ? void 0 : _b.find((property) => property.id == 'name');
-            columns = [{ field: 'name', headerName: (_c = name === null || name === void 0 ? void 0 : name.name) !== null && _c !== void 0 ? _c : 'Name', type: 'string', flex: 1 }];
+            const name = (_c = object.properties) === null || _c === void 0 ? void 0 : _c.find((property) => property.id == 'name');
+            columns = [{ field: 'name', headerName: (_d = name === null || name === void 0 ? void 0 : name.name) !== null && _d !== void 0 ? _d : 'Name', type: 'string', flex: 1 }];
         }
         return columns;
     };
     function fetchObjectInstance() {
-        var _a;
         setLoading(true);
         const combinedFilter = Object.assign(Object.assign(Object.assign({}, criteriaFilter), filter), { where: (criteriaFilter === null || criteriaFilter === void 0 ? void 0 : criteriaFilter.where)
                 ? {
                     and: [criteriaFilter.where, filter === null || filter === void 0 ? void 0 : filter.where],
                 }
                 : filter === null || filter === void 0 ? void 0 : filter.where });
-        apiServices.get(getPrefixedUrl(`/objects/${object.id}/instances`), (_a = { params: { filter: JSON.stringify(combinedFilter) } }) !== null && _a !== void 0 ? _a : {}, (error, objectInstances) => {
+        apiServices.get(getPrefixedUrl(`/objects/${object.id}/instances`), { params: { filter: JSON.stringify(combinedFilter) } }, (error, objectInstances) => {
             if (error) {
                 console.error(error);
             }
@@ -197,11 +196,12 @@ export const InstanceLookup = (props) => {
             setRows([]);
         }
     }, [filter, searchString.length]);
+    const columns = retrieveColumns(layout);
     return (React.createElement(Grid, { container: true, sx: { paddingBottom: '30px' } },
         React.createElement(Grid, { item: true, xs: 12 }, searchableColumns.length ? (React.createElement(SearchField, { searchString: searchString, setSearchString: setSearchString, filter: filter, setFilter: setFilter, searchableColumns: searchableColumns })) : (React.createElement(Typography, { sx: { fontSize: '16px', fontWeight: '700' } }, "There are no searchable properties configured for this object"))),
-        React.createElement(BuilderGrid, { item: 'instances', rows: rows, columns: retrieveColumns((_c = object.viewLayout) === null || _c === void 0 ? void 0 : _c.table), onRowClick: (params) => setSelectedInstance(params.row), initialSort: {
-                field: (_g = (_f = (_e = (_d = object.viewLayout) === null || _d === void 0 ? void 0 : _d.table) === null || _e === void 0 ? void 0 : _e.sort) === null || _f === void 0 ? void 0 : _f.colId) !== null && _g !== void 0 ? _g : 'name',
-                sort: (_l = (_k = (_j = (_h = object.viewLayout) === null || _h === void 0 ? void 0 : _h.table) === null || _j === void 0 ? void 0 : _j.sort) === null || _k === void 0 ? void 0 : _k.sort) !== null && _l !== void 0 ? _l : 'asc',
+        React.createElement(BuilderGrid, { item: 'instances', rows: rows, columns: columns, onRowClick: (params) => setSelectedInstance(params.row), initialSort: {
+                field: (_f = (_e = (_d = (_c = object.viewLayout) === null || _c === void 0 ? void 0 : _c.table) === null || _d === void 0 ? void 0 : _d.sort) === null || _e === void 0 ? void 0 : _e.colId) !== null && _f !== void 0 ? _f : 'name',
+                sort: (_k = (_j = (_h = (_g = object.viewLayout) === null || _g === void 0 ? void 0 : _g.table) === null || _h === void 0 ? void 0 : _h.sort) === null || _j === void 0 ? void 0 : _j.sort) !== null && _k !== void 0 ? _k : 'asc',
             }, sx: {
                 height: '360px',
                 width: '100%',

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js

@@ -9,7 +9,7 @@ import { getPrefixedUrl, normalizeDates, transformToWhere } from '../../utils';
 import { RelatedObjectInstance } from './RelatedObjectInstance';
 export const ObjectPropertyInput = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
-    const { id, instance, property, apiServices, defaultPages, handleChangeObjectProperty, nestedFieldsView, canUpdateProperty, error, navigateTo, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, setSnackbarError, isModal, user, } = props;
+    const { id, instance, property, apiServices, defaultPages, handleChangeObjectProperty, nestedFieldsView, canUpdateProperty, error, navigateTo, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, setSnackbarError, isModal, user, viewLayout, } = props;
     const [relatedObject, setRelatedObject] = useState();
     const [openCreateDialog, setOpenCreateDialog] = useState(false);
     const [selectedInstance, setSelectedInstance] = useState();
@@ -17,7 +17,29 @@ export const ObjectPropertyInput = (props) => {
     const [loadingOptions, setLoadingOptions] = useState(false);
     const [options, setOptions] = useState([]);
     const [openOptions, setOpenOptions] = useState(false);
+    const [layout, setLayout] = useState();
     const DEFAULT_CREATE_ACTION = '_create';
+    useEffect(() => {
+        var _a, _b;
+        if (relatedObject) {
+            let defaultViewLayout;
+            if (((_a = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout) === null || _a === void 0 ? void 0 : _a.dropdown) && displayOption === 'dropdown') {
+                defaultViewLayout = Object.assign({ id: 'default', name: 'Default', objectId: relatedObject.id }, relatedObject.viewLayout.dropdown);
+            }
+            else if (((_b = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout) === null || _b === void 0 ? void 0 : _b.table) && displayOption === 'dialogBox') {
+                defaultViewLayout = Object.assign({ id: 'default', name: 'Default', objectId: relatedObject.id }, relatedObject.viewLayout.table);
+            }
+            if (viewLayout) {
+                apiServices
+                    .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/${displayOption === 'dropdown' ? 'dropdown' : 'table'}Layouts/${viewLayout.id}`))
+                    .then(setLayout)
+                    .catch((err) => setLayout(defaultViewLayout));
+            }
+            else {
+                setLayout(defaultViewLayout);
+            }
+        }
+    }, [displayOption, relatedObject, viewLayout]);
     useEffect(() => {
         var _a;
         if (!isEmpty(defaultValueCriteria) && !selectedInstance && !instance[property.id]) {
@@ -160,11 +182,10 @@ export const ObjectPropertyInput = (props) => {
                         }
                         : {})),
                 }, noOptionsText: 'No options available', renderOption: (props, option) => {
-                    var _a, _b, _c, _d;
                     return (React.createElement("li", Object.assign({}, props, { key: option.id }),
                         React.createElement(Box, null,
                             React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px' } }, option.label),
-                            ((_b = (_a = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout) === null || _a === void 0 ? void 0 : _a.dropdown) === null || _b === void 0 ? void 0 : _b.secondaryTextExpression) ? (React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px', color: '#637381' } }, compileExpression((_d = (_c = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout) === null || _c === void 0 ? void 0 : _c.dropdown) === null || _d === void 0 ? void 0 : _d.secondaryTextExpression, options.find((o) => o.id === option.value)))) : null)));
+                            (layout === null || layout === void 0 ? void 0 : layout.secondaryTextExpression) ? (React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px', color: '#637381' } }, compileExpression(layout === null || layout === void 0 ? void 0 : layout.secondaryTextExpression, options.find((o) => o.id === option.value)))) : null)));
                 }, onOpen: () => {
                     var _a;
                     if (((_a = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _a === void 0 ? void 0 : _a.id) || (selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.id)) {
@@ -294,7 +315,7 @@ export const ObjectPropertyInput = (props) => {
                     event.stopPropagation();
                     setOpenCreateDialog(true);
                 }, "aria-label": `Add`, disabled: !canUpdateProperty }, "Add")))),
-        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, property: property, nestedFieldsView: nestedFieldsView, mode: mode, setSnackbarError: setSnackbarError, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
+        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, property: property, nestedFieldsView: nestedFieldsView, mode: mode, setSnackbarError: setSnackbarError, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
             React.createElement(Typography, { sx: {
                     marginTop: '28px',
                     fontSize: '22px',
@@ -302,5 +323,5 @@ export const ObjectPropertyInput = (props) => {
                     marginLeft: '24px',
                     marginBottom: '10px',
                 } }, `Add ${property.name}`),
-            React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSnackbarError: setSnackbarError, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, property: property, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user })))))));
+            React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSnackbarError: setSnackbarError, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, property: property, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout })))))));
 };

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ApiServices, Obj, ObjectInstance, Property, Reference, UserAccount } from '@evoke-platform/context';
+import { ApiServices, Obj, ObjectInstance, Property, Reference, TableViewLayout, UserAccount } from '@evoke-platform/context';
 export declare type RelatedObjectInstanceProps = {
     relatedObject?: Obj;
     property: Property;
@@ -20,5 +20,6 @@ export declare type RelatedObjectInstanceProps = {
     options: ObjectInstance[];
     filter?: Record<string, unknown>;
     user?: UserAccount;
+    layout?: TableViewLayout;
 };
 export declare const RelatedObjectInstance: (props: RelatedObjectInstanceProps) => JSX.Element;

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.js

@@ -30,7 +30,7 @@ const styles = {
 const DEFAULT_CREATE_ACTION = '_create';
 export const RelatedObjectInstance = (props) => {
     var _a;
-    const { relatedObject, property, setSelectedInstance, handleChangeObjectProperty, handleClose, apiServices, setSnackbarError, nestedFieldsView, mode, displayOption, setOptions, options, filter, user, } = props;
+    const { relatedObject, property, setSelectedInstance, handleChangeObjectProperty, handleClose, apiServices, setSnackbarError, nestedFieldsView, mode, displayOption, setOptions, options, filter, user, layout, } = props;
     const [relationType, setRelationType] = useState(displayOption === 'dropdown' ? 'new' : 'existing');
     const [selectedRow, setSelectedRow] = useState();
     const [errors, setErrors] = useState([]);
@@ -114,7 +114,7 @@ export const RelatedObjectInstance = (props) => {
                         apiServices: apiServices,
                         setSnackbarError: setSnackbarError,
                     }, queryAddresses: queryAddresses, user: userAccount }))) : (relatedObject && (React.createElement(React.Fragment, null,
-                React.createElement(InstanceLookup, { apiServices: apiServices, nestedFieldsView: nestedFieldsView, setRelationType: setRelationType, object: relatedObject, setSelectedInstance: setSelectedRow, mode: mode, filter: filter }))))),
+                React.createElement(InstanceLookup, { apiServices: apiServices, nestedFieldsView: nestedFieldsView, setRelationType: setRelationType, object: relatedObject, setSelectedInstance: setSelectedRow, mode: mode, filter: filter, layout: layout }))))),
         relationType !== 'new' && (React.createElement(Box, { sx: styles.actionButtons },
             React.createElement(Button, { onClick: onClose, color: 'inherit', sx: {
                     border: '1px solid #ced4da',

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableField.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ApiServices, ObjWithRoot, ObjectInstance, Property } from '@evoke-platform/context';
+import { ApiServices, ObjWithRoot, ObjectInstance, Property, ViewLayoutEntityReference } from '@evoke-platform/context';
 export declare type DropdownRepeatableFieldProps = {
     id: string;
     property: Property;
@@ -11,5 +11,6 @@ export declare type DropdownRepeatableFieldProps = {
     middleObject: ObjWithRoot;
     getMiddleObjectInstances: () => Promise<ObjectInstance[]>;
     fieldHeight?: 'small' | 'medium';
+    viewLayout?: ViewLayoutEntityReference;
 };
 export declare const DropdownRepeatableField: (props: DropdownRepeatableFieldProps) => JSX.Element;

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableField.js

@@ -15,11 +15,11 @@ import { getMiddleObject, getPrefixedUrl, transformToWhere } from '../../../util
 import { DropdownRepeatableFieldInput } from './DropdownRepeatableFieldInput';
 export const DropdownRepeatableField = (props) => {
     var _a;
-    const { id, property, criteria, instance, readOnly, apiServices, initialMiddleObjectInstances, middleObject, getMiddleObjectInstances, fieldHeight, } = props;
+    const { id, property, criteria, instance, readOnly, apiServices, initialMiddleObjectInstances, middleObject, getMiddleObjectInstances, fieldHeight, viewLayout, } = props;
     const [middleObjectInstances, setMiddleObjectInstances] = useState(initialMiddleObjectInstances);
     const [endObject, setEndObject] = useState();
     const [endObjectInstances, setEndObjectInstances] = useState([]);
-    const [viewLayout, setViewLayout] = useState();
+    const [layout, setLayout] = useState();
     const [loading, setLoading] = useState(false);
     const [initialLoading, setInitialLoading] = useState(true);
     const [selectedOptions, setSelectedOptions] = useState([]);
@@ -60,13 +60,23 @@ export const DropdownRepeatableField = (props) => {
                     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     const endObject = effectiveObject;
                     setEndObject(endObject);
+                    let defaultLayout;
                     if ((_a = endObject.viewLayout) === null || _a === void 0 ? void 0 : _a.dropdown) {
-                        setViewLayout(endObject.viewLayout.dropdown);
+                        defaultLayout = Object.assign({ id: 'default', name: 'Default', objectId: endObject.id }, endObject.viewLayout.dropdown);
+                    }
+                    if (viewLayout) {
+                        apiServices
+                            .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/dropdownLayouts/${viewLayout.id}`))
+                            .then(setLayout)
+                            .catch((err) => setLayout(defaultLayout));
+                    }
+                    else {
+                        setLayout(defaultLayout);
                     }
                 }
             });
         }
-    }, [middleObject, apiServices]);
+    }, [middleObject, apiServices, viewLayout, property]);
     useEffect(() => {
         instanceChanges === null || instanceChanges === void 0 ? void 0 : instanceChanges.subscribe(middleObject.rootObjectId, () => {
             fetchMiddleObjectInstances();
@@ -154,5 +164,5 @@ export const DropdownRepeatableField = (props) => {
             }
         });
     };
-    return initialLoading ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, property: property, readOnly: readOnly || !((_a = middleObject.actions) === null || _a === void 0 ? void 0 : _a.some((action) => action.id === '_create')), viewLayout: viewLayout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances !== null && endObjectInstances !== void 0 ? endObjectInstances : [], endObject: endObject, searchValue: searchValue, loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, fieldHeight: fieldHeight }))));
+    return initialLoading ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, property: property, readOnly: readOnly || !((_a = middleObject.actions) === null || _a === void 0 ? void 0 : _a.some((action) => action.id === '_create')), layout: layout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances !== null && endObjectInstances !== void 0 ? endObjectInstances : [], endObject: endObject, searchValue: searchValue, loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, fieldHeight: fieldHeight }))));
 };

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableFieldInput.d.ts

@@ -5,7 +5,7 @@ declare type DropdownRepeatableFieldInputProps = {
     id: string;
     property: Property;
     readOnly: boolean;
-    viewLayout?: DropdownViewLayout;
+    layout?: DropdownViewLayout;
     middleObjectInstances: ObjectInstance[];
     endObjectInstances: ObjectInstance[];
     endObject: Obj;

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableFieldInput.js

@@ -6,13 +6,12 @@ import { Snackbar, TextField, Typography } from '../../../../../core';
 import { normalizeDates } from '../../../utils';
 const isDropdownRepeatableFieldInputOption = (option) => isObject(option) && 'label' in option && 'endObjectId' in option;
 export const DropdownRepeatableFieldInput = (props) => {
-    const { id, property, readOnly, viewLayout, middleObjectInstances, endObjectInstances, endObject, searchValue, loading, handleSaveMiddleInstance, handleRemoveMiddleInstance, setSearchValue, selectedOptions, setSnackbarError, snackbarError, setDropdownSelections, fieldHeight, } = props;
+    const { id, property, readOnly, layout, middleObjectInstances, endObjectInstances, endObject, searchValue, loading, handleSaveMiddleInstance, handleRemoveMiddleInstance, setSearchValue, selectedOptions, setSnackbarError, snackbarError, setDropdownSelections, fieldHeight, } = props;
     const [selectOptions, setSelectOptions] = useState([]);
     useEffect(() => {
         setDropdownSelections && setDropdownSelections(middleObjectInstances);
     }, [middleObjectInstances]);
     useEffect(() => {
-        var _a;
         const manyToManyPropertyId = property.manyToManyPropertyId;
         if (manyToManyPropertyId) {
             const enums = endObjectInstances
@@ -23,20 +22,20 @@ export const DropdownRepeatableFieldInput = (props) => {
             })
                 .map((endObjectInstance) => ({
                 label: endObjectInstance.name,
-                subLabel: (viewLayout === null || viewLayout === void 0 ? void 0 : viewLayout.secondaryTextExpression)
-                    ? compileExpression(endObjectInstance, viewLayout.secondaryTextExpression)
+                subLabel: (layout === null || layout === void 0 ? void 0 : layout.secondaryTextExpression)
+                    ? compileExpression(endObjectInstance, layout.secondaryTextExpression)
                     : undefined,
                 endObjectId: endObjectInstance.id,
                 value: undefined,
             }));
-            setSelectOptions((_a = [
+            setSelectOptions([
                 ...enums,
                 ...selectedOptions
                     .filter((selectedOption) => !enums.find((availableOption) => availableOption.endObjectId === selectedOption.endObjectId))
                     .map((option) => (Object.assign(Object.assign({}, option), { hidden: true }))),
-            ]) !== null && _a !== void 0 ? _a : []);
+            ]);
         }
-    }, [endObjectInstances, viewLayout]);
+    }, [endObjectInstances, layout]);
     const handleChange = (key, newSelectedOptions) => {
         // Delete middle objects that have been removed
         // Add middle objects that have been added

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ApiServices, ObjectInstance, Property, UserAccount } from '@evoke-platform/context';
+import { ApiServices, ObjectInstance, Property, UserAccount, ViewLayoutEntityReference } from '@evoke-platform/context';
 export declare type ObjectPropertyInputProps = {
     property: Property;
     instance: ObjectInstance;
@@ -7,6 +7,7 @@ export declare type ObjectPropertyInputProps = {
     apiServices: ApiServices;
     queryAddresses?: unknown;
     user?: UserAccount;
+    viewLayout?: ViewLayoutEntityReference;
 };
 declare const RepeatableField: (props: ObjectPropertyInputProps) => JSX.Element;
 export default RepeatableField;

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.js

@@ -13,8 +13,8 @@ import { get, isObject, pick, startCase } from 'lodash';
 import { DateTime } from 'luxon';
 import React, { useCallback, useEffect, useState } from 'react';
 import sift from 'sift';
-import { TrashCan } from '../../../../../icons';
-import { Button, IconButton, Skeleton, Snackbar, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, } from '../../../../core';
+import { Edit, TrashCan } from '../../../../../icons';
+import { Button, IconButton, Skeleton, Snackbar, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography, } from '../../../../core';
 import { Box } from '../../../../layout';
 import { getPrefixedUrl, normalizeDateTime } from '../../utils';
 import { ActionDialog } from './ActionDialog';
@@ -40,8 +40,8 @@ const styles = {
     },
 };
 const RepeatableField = (props) => {
-    var _a, _b, _c, _d, _e;
-    const { property, instance, canUpdateProperty, apiServices, queryAddresses, user } = props;
+    var _a, _b;
+    const { property, instance, canUpdateProperty, apiServices, queryAddresses, user, viewLayout } = props;
     const [relatedInstances, setRelatedInstances] = useState([]);
     const [relatedObject, setRelatedObject] = useState();
     const [hasCreateAction, setHasCreateAction] = useState(false);
@@ -51,6 +51,7 @@ const RepeatableField = (props) => {
     const [selectedRow, setSelectedRow] = useState();
     const [loading, setLoading] = useState(true);
     const [reloadOnErrorTrigger, setReloadOnErrorTrigger] = useState(true);
+    const [tableViewLayout, setTableViewLayout] = useState();
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
         isError: false,
@@ -59,12 +60,26 @@ const RepeatableField = (props) => {
     const DEFAULT_CREATE_ACTION = '_create';
     const { instanceChanges } = useNotification();
     const fetchRelatedInstances = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _c;
         if (openDialog)
             return;
         let relatedObject;
         if (property.objectId) {
             try {
                 relatedObject = yield apiServices.get(getPrefixedUrl(`/objects/${property.objectId}/effective`));
+                let defaultTableViewLayout;
+                if ((_c = relatedObject.viewLayout) === null || _c === void 0 ? void 0 : _c.table) {
+                    defaultTableViewLayout = Object.assign({ id: 'default', name: 'Default', objectId: relatedObject.id }, relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout.table);
+                }
+                if (viewLayout) {
+                    apiServices
+                        .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/tableLayouts/${viewLayout.id}`))
+                        .then(setTableViewLayout)
+                        .catch((err) => setTableViewLayout(defaultTableViewLayout));
+                }
+                else {
+                    setTableViewLayout(defaultTableViewLayout);
+                }
                 setRelatedObject(relatedObject);
             }
             catch (err) {
@@ -94,7 +109,7 @@ const RepeatableField = (props) => {
             }
         }
         relatedObject && checkCreateAccess(relatedObject);
-    }), [apiServices, property]);
+    }), [apiServices, property, viewLayout]);
     const checkCreateAccess = (relatedObject) => {
         if (property.objectId && canUpdateProperty) {
             apiServices
@@ -193,7 +208,7 @@ const RepeatableField = (props) => {
                 'min-width': '44px',
             }, variant: "text", onClick: () => setReloadOnErrorTrigger((prevState) => !prevState) }, "Retry")));
     const save = (actionType, input, instanceId, setSubmitting) => __awaiter(void 0, void 0, void 0, function* () {
-        var _f, _g, _h, _j, _k, _l;
+        var _d, _e, _f, _g, _h, _j;
         setSubmitting && setSubmitting(true);
         // date-time fields are stored in the database in ISO format so convert all
         // LocalDateTime objects to ISO format.
@@ -227,7 +242,7 @@ const RepeatableField = (props) => {
                     isError: true,
                 });
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                error = (_g = (_f = err.response) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.error;
+                error = (_e = (_d = err.response) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.error;
                 setSubmitting && setSubmitting(false);
             }
         }
@@ -236,7 +251,7 @@ const RepeatableField = (props) => {
             try {
                 yield apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${instanceId}/actions`), {
                     actionId: `_${actionType}`,
-                    input: pick(input, (_j = (_h = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _h === void 0 ? void 0 : _h.filter((property) => !property.formula && property.type !== 'collection').map((property) => property.id)) !== null && _j !== void 0 ? _j : []),
+                    input: pick(input, (_g = (_f = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _f === void 0 ? void 0 : _f.filter((property) => !property.formula && property.type !== 'collection').map((property) => property.id)) !== null && _g !== void 0 ? _g : []),
                 });
                 if (actionType === 'delete') {
                     setRelatedInstances((prevInstances) => prevInstances.filter((instance) => instance.id !== instanceId));
@@ -259,18 +274,18 @@ const RepeatableField = (props) => {
                     isError: true,
                 });
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                error = (_l = (_k = err.response) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.error;
+                error = (_j = (_h = err.response) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.error;
             }
         }
         return { isSuccessful, error };
     });
     const retrieveViewLayout = () => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         let properties = [];
-        if (((_b = (_a = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.properties) && relatedObject.viewLayout.table.properties.length > 1) {
-            for (const prop of relatedObject.viewLayout.table.properties) {
+        if ((_a = tableViewLayout === null || tableViewLayout === void 0 ? void 0 : tableViewLayout.properties) === null || _a === void 0 ? void 0 : _a.length) {
+            for (const prop of tableViewLayout.properties) {
                 const propertyId = prop.id.split('.')[0];
-                const property = (_c = relatedObject.properties) === null || _c === void 0 ? void 0 : _c.find((p) => p.id === propertyId);
+                const property = (_b = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _b === void 0 ? void 0 : _b.find((p) => p.id === propertyId);
                 if (property) {
                     if ((property.type === 'object' && property.id !== property.relatedPropertyId) ||
                         property.type === 'address' ||
@@ -289,9 +304,9 @@ const RepeatableField = (props) => {
         }
         else {
             properties =
-                (_e = (_d = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _d === void 0 ? void 0 : _d.filter((prop) => !['address', 'image', 'collection'].includes(prop.type)).map((prop) => (Object.assign(Object.assign({}, prop), { id: prop.type === 'object' || prop.type === 'user' ? `${prop.id}.name` : prop.id })))) !== null && _e !== void 0 ? _e : [];
+                (_d = (_c = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _c === void 0 ? void 0 : _c.filter((prop) => !['address', 'image', 'collection'].includes(prop.type)).map((prop) => (Object.assign(Object.assign({}, prop), { id: prop.type === 'object' || prop.type === 'user' ? `${prop.id}.name` : prop.id })))) !== null && _d !== void 0 ? _d : [];
         }
-        return properties.filter((prop) => prop.id !== 'name');
+        return properties;
     };
     const getValue = (relatedInstance, propertyId, propertyType) => {
         const value = get(relatedInstance, propertyId);
@@ -321,6 +336,7 @@ const RepeatableField = (props) => {
             return Array.isArray(value) ? value.map((v) => v.name).join(', ') : value;
         }
     };
+    const columns = retrieveViewLayout();
     return loading ? (React.createElement(React.Fragment, null,
         React.createElement(Skeleton, null),
         React.createElement(Skeleton, null),
@@ -334,35 +350,38 @@ const RepeatableField = (props) => {
                 } },
                 React.createElement(Table, { stickyHeader: true, sx: { minWidth: 650 } },
                     React.createElement(TableHead, { sx: { backgroundColor: '#F4F6F8' } },
-                        React.createElement(TableRow, null,
-                            React.createElement(TableCell, { sx: styles.tableCell }, (_b = (_a = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === 'name')) === null || _b === void 0 ? void 0 : _b.name), (_c = retrieveViewLayout()) === null || _c === void 0 ? void 0 :
-                            _c.map((prop) => (React.createElement(TableCell, { sx: styles.tableCell }, prop.name))),
-                            React.createElement(TableCell, { sx: Object.assign(Object.assign({}, styles.tableCell), { width: '20px' }) }))),
-                    React.createElement(TableBody, null, relatedInstances === null || relatedInstances === void 0 ? void 0 : relatedInstances.map((relatedInstance, index) => {
-                        var _a;
-                        return (React.createElement(TableRow, { key: relatedInstance.id },
-                            React.createElement(TableCell, { sx: {
-                                    color: '#212B36',
-                                    fontSize: '14px',
-                                    '&:hover': { textDecoration: 'underline', cursor: 'pointer' },
-                                }, onClick: canUpdateProperty ? () => editRow(relatedInstance.id) : undefined },
-                                React.createElement(Typography, null, relatedInstance === null || relatedInstance === void 0 ? void 0 : relatedInstance.name)), (_a = retrieveViewLayout()) === null || _a === void 0 ? void 0 :
-                            _a.map((prop) => {
-                                var _a;
-                                return (React.createElement(TableCell, { sx: { color: '#212B36', fontSize: '14px' } },
-                                    React.createElement(Typography, { key: prop.id },
-                                        getValue(relatedInstance, prop.id, prop.type),
-                                        prop.type === 'user' &&
-                                            ((_a = users === null || users === void 0 ? void 0 : users.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)) === null || _a === void 0 ? void 0 : _a.status) === 'Inactive' && React.createElement("span", null, ' (Inactive)'))));
-                            }),
-                            canUpdateProperty && (React.createElement(TableCell, { sx: { width: '20px' } },
-                                React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
-                                    React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } }))))));
-                    }))))),
+                        React.createElement(TableRow, null, columns === null || columns === void 0 ? void 0 :
+                            columns.map((prop) => React.createElement(TableCell, { sx: styles.tableCell }, prop.name)),
+                            React.createElement(TableCell, { sx: Object.assign(Object.assign({}, styles.tableCell), { width: '80px' }) }))),
+                    React.createElement(TableBody, null, relatedInstances === null || relatedInstances === void 0 ? void 0 : relatedInstances.map((relatedInstance, index) => (React.createElement(TableRow, { key: relatedInstance.id }, columns === null || columns === void 0 ? void 0 :
+                        columns.map((prop) => {
+                            var _a;
+                            return (React.createElement(TableCell, { sx: { color: '#212B36', fontSize: '16px' } },
+                                React.createElement(Typography, { key: prop.id, sx: prop.id === 'name'
+                                        ? {
+                                            '&:hover': {
+                                                textDecoration: 'underline',
+                                                cursor: 'pointer',
+                                            },
+                                        }
+                                        : {}, onClick: canUpdateProperty && prop.id === 'name'
+                                        ? () => editRow(relatedInstance.id)
+                                        : undefined },
+                                    getValue(relatedInstance, prop.id, prop.type),
+                                    prop.type === 'user' &&
+                                        ((_a = users === null || users === void 0 ? void 0 : users.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)) === null || _a === void 0 ? void 0 : _a.status) === 'Inactive' && React.createElement("span", null, ' (Inactive)'))));
+                        }),
+                        canUpdateProperty && (React.createElement(TableCell, { sx: { width: '80px' } },
+                            React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
+                                React.createElement(Tooltip, { title: "Edit" },
+                                    React.createElement(Edit, null))),
+                            React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
+                                React.createElement(Tooltip, { title: "Delete" },
+                                    React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))),
             hasCreateAction && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow }, "Add"))),
-        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? (_d = relatedInstances.find((i) => i.id === selectedRow)) !== null && _d !== void 0 ? _d : {} : {}, handleSubmit: save, 
+        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? (_a = relatedInstances.find((i) => i.id === selectedRow)) !== null && _a !== void 0 ? _a : {} : {}, handleSubmit: save, 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            objectInputCommonProps: { apiServices }, action: (_e = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.actions) === null || _e === void 0 ? void 0 : _e.find((a) => a.id ===
+            objectInputCommonProps: { apiServices }, action: (_b = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.actions) === null || _b === void 0 ? void 0 : _b.find((a) => a.id ===
                 (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, relatedProperty: property, queryAddresses: queryAddresses, user: user })),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })));
 };

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableFieldComponent.d.ts

@@ -1,10 +1,11 @@
-import { ObjWithRoot, ObjectInstance } from '@evoke-platform/context';
+import { ObjWithRoot, ObjectInstance, ViewLayoutEntityReference } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
 import { BaseFormComponentProps } from '../../types';
 declare type RepeatableFieldComponentProps = BaseFormComponentProps & {
     middleObject: ObjWithRoot;
     initialMiddleObjectInstances: ObjectInstance[];
     getMiddleObjectInstances: () => Promise<ObjectInstance[]>;
+    viewLayout?: ViewLayoutEntityReference;
 };
 export declare class RepeatableFieldComponent extends ReactComponent {
     [x: string]: any;

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableFieldComponent.js

@@ -1,4 +1,4 @@
-import { ApiBaseUrlProvider, NotificationProvider } from '@evoke-platform/context';
+import { ApiBaseUrlProvider, NotificationProvider, } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
 import dot from 'dot-object';
 import { cloneDeep } from 'lodash';
@@ -49,7 +49,7 @@ export class RepeatableFieldComponent extends ReactComponent {
         const inputId = `${this.component.id}-input`;
         return ReactDOM.render(React.createElement("div", null, !this.component.hidden ? (React.createElement(ApiBaseUrlProvider, { url: apiBaseUrl },
             React.createElement(NotificationProvider, null,
-                React.createElement(FormComponentWrapper, Object.assign({}, this.component, { inputId: inputId, viewOnly: !this.component.canUpdateProperty }), this.component.property.manyToManyPropertyId ? (React.createElement(DropdownRepeatableField, { id: inputId, property: this.component.property, instance: this.component.instance, apiServices: this.component.apiServices, criteria: this.updatedCriteria, readOnly: !this.component.canUpdateProperty, initialMiddleObjectInstances: this.component.initialMiddleObjectInstances, middleObject: this.component.middleObject, getMiddleObjectInstances: this.component.getMiddleObjectInstances, fieldHeight: this.component.fieldHeight })) : (React.createElement(RepeatableField, Object.assign({}, this.component))))))) : null), element);
+                React.createElement(FormComponentWrapper, Object.assign({}, this.component, { inputId: inputId, viewOnly: !this.component.canUpdateProperty }), this.component.property.manyToManyPropertyId ? (React.createElement(DropdownRepeatableField, { id: inputId, property: this.component.property, instance: this.component.instance, apiServices: this.component.apiServices, criteria: this.updatedCriteria, readOnly: !this.component.canUpdateProperty, initialMiddleObjectInstances: this.component.initialMiddleObjectInstances, middleObject: this.component.middleObject, getMiddleObjectInstances: this.component.getMiddleObjectInstances, fieldHeight: this.component.fieldHeight, viewLayout: this.component.viewLayout })) : (React.createElement(RepeatableField, Object.assign({}, this.component))))))) : null), element);
     }
     detachReact(element) {
         ReactDOM.unmountComponentAtNode(element);

package/dist/published/components/custom/Form/types.d.ts

@@ -1,4 +1,4 @@
-import { ApiServices, ObjectInstance, Property, Reference, UserAccount } from '@evoke-platform/context';
+import { ApiServices, ObjectInstance, Property, Reference, UserAccount, ViewLayoutEntityReference } from '@evoke-platform/context';
 import { AutocompleteOption } from '../../core';
 export declare type BaseFormComponentProps = {
     key: string;
@@ -75,6 +75,7 @@ export declare type ObjectPropertyInputProps = {
     orderBy?: string;
     isModal?: boolean;
     label?: string;
+    viewLayout?: ViewLayoutEntityReference;
 };
 export declare type Address = {
     line1?: string;

package/dist/published/components/custom/Form/utils.js

@@ -243,7 +243,7 @@ export function convertFormToComponents(entries, parameters, object) {
                     }
                     : {
                         json: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.visibility,
-                    } });
+                    }, viewLayout: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.viewLayout });
         }
     })
         .filter((item) => item);

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

@@ -1,19 +1,10 @@
 import { SvgIconProps } from '@mui/material';
 import React from 'react';
-export declare const Overrides: (props: {
-    children?: React.ReactNode;
-    classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | "disabled" | "action" | undefined;
-    fontSize?: "inherit" | "large" | "medium" | "small" | undefined;
-    htmlColor?: string | undefined;
-    inheritViewBox?: boolean | undefined;
-    shapeRendering?: string | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    titleAccess?: string | undefined;
-    viewBox?: string | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.SVGProps<SVGSVGElement>, "string" | "direction" | "spacing" | "fontFamily" | "fontSize" | "color" | "fontWeight" | "className" | "style" | "id" | "lang" | "tabIndex" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "clipPath" | "filter" | "mask" | "path" | "key" | "cursor" | "display" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "offset" | "overflow" | "textDecoration" | "azimuth" | "clip" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "name" | "type" | "elevation" | "in" | "max" | "href" | "orientation" | "media" | "target" | "origin" | "min" | "viewBox" | "method" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "ideographic" | "in2" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "local" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "operator" | "orient" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & {
+export declare const Overrides: (props: import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.SVGProps<SVGSVGElement>, "string" | "direction" | "spacing" | "fontFamily" | "fontSize" | "color" | "fontWeight" | "className" | "style" | "children" | "id" | "lang" | "tabIndex" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "clipPath" | "filter" | "mask" | "path" | "key" | "cursor" | "display" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "offset" | "overflow" | "textDecoration" | "azimuth" | "clip" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "name" | "type" | "href" | "elevation" | "in" | "max" | "orientation" | "media" | "target" | "origin" | "min" | "viewBox" | "method" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "ideographic" | "in2" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "local" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "operator" | "orient" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
-}, "fontSize" | "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & {
+}, "fontSize" | "color" | "className" | "style" | "classes" | "children" | "sx" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & {
+    component?: React.ElementType<any> | undefined;
+} & {
     sx: {
         [key: string]: unknown;
         width?: string | undefined;

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

@@ -1,19 +1,10 @@
 import { SvgIconProps } from '@mui/material';
 import React from 'react';
-export declare const TrashCan: (props: {
-    children?: React.ReactNode;
-    classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | "disabled" | "action" | undefined;
-    fontSize?: "inherit" | "large" | "medium" | "small" | undefined;
-    htmlColor?: string | undefined;
-    inheritViewBox?: boolean | undefined;
-    shapeRendering?: string | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    titleAccess?: string | undefined;
-    viewBox?: string | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.SVGProps<SVGSVGElement>, "string" | "direction" | "spacing" | "fontFamily" | "fontSize" | "color" | "fontWeight" | "className" | "style" | "id" | "lang" | "tabIndex" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "clipPath" | "filter" | "mask" | "path" | "key" | "cursor" | "display" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "offset" | "overflow" | "textDecoration" | "azimuth" | "clip" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "name" | "type" | "elevation" | "in" | "max" | "href" | "orientation" | "media" | "target" | "origin" | "min" | "viewBox" | "method" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "ideographic" | "in2" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "local" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "operator" | "orient" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & {
+export declare const TrashCan: (props: import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.SVGProps<SVGSVGElement>, "string" | "direction" | "spacing" | "fontFamily" | "fontSize" | "color" | "fontWeight" | "className" | "style" | "children" | "id" | "lang" | "tabIndex" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "clipPath" | "filter" | "mask" | "path" | "key" | "cursor" | "display" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "offset" | "overflow" | "textDecoration" | "azimuth" | "clip" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "name" | "type" | "href" | "elevation" | "in" | "max" | "orientation" | "media" | "target" | "origin" | "min" | "viewBox" | "method" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "ideographic" | "in2" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "local" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "operator" | "orient" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
-}, "fontSize" | "color" | keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & {
+}, "fontSize" | "color" | "className" | "style" | "classes" | "children" | "sx" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & {
+    component?: React.ElementType<any> | undefined;
+} & {
     sx: {
         [key: string]: unknown;
         width?: string | undefined;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AccordionProps } from '@mui/material';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-declare const _default: ComponentMeta<(props: AccordionProps) => JSX.Element>;
+declare const _default: ComponentMeta<(props: AccordionProps<"div", {}>) => JSX.Element>;
 export default _default;
-export declare const Accordion: ComponentStory<(props: AccordionProps) => JSX.Element>;
+export declare const Accordion: ComponentStory<(props: AccordionProps<"div", {}>) => JSX.Element>;

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

@@ -1,25 +1,15 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
-declare const _default: ComponentMeta<(props: import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    children?: React.ReactNode;
-    component?: React.ElementType<any> | undefined;
-    ref?: React.Ref<unknown> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+declare const _default: ComponentMeta<(props: import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & 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"> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
     sx?: object | undefined;
     component?: React.ElementType<any> | undefined;
 }) => JSX.Element>;
 export default _default;
-export declare const Box: ComponentStory<(props: import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    children?: React.ReactNode;
-    component?: React.ElementType<any> | undefined;
-    ref?: React.Ref<unknown> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+export declare const Box: ComponentStory<(props: import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & 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"> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
     sx?: object | undefined;
     component?: React.ElementType<any> | undefined;
 }) => JSX.Element>;

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

@@ -1,25 +1,15 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
-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/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>> & {
+declare const _default: ComponentMeta<(props: import("@mui/system").BoxOwnProps<import("@mui/material/styles/createTheme").Theme> & 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"> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles/createTheme").Theme>> & {
     sx?: object | undefined;
     component?: React.ElementType<any> | undefined;
 }) => JSX.Element>;
 export default _default;
-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/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>> & {
+export declare const Palette: ComponentStory<(props: import("@mui/system").BoxOwnProps<import("@mui/material/styles/createTheme").Theme> & 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"> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles/createTheme").Theme>> & {
     sx?: object | undefined;
     component?: React.ElementType<any> | undefined;
 }) => JSX.Element>;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TabsProps } from '@mui/material';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-declare const _default: ComponentMeta<(props: TabsProps<import("@mui/material").ExtendButtonBase<import("@mui/material").ButtonBaseTypeMap<{}, "button">>, {}>) => JSX.Element>;
+declare const _default: ComponentMeta<(props: TabsProps<"div", {}>) => JSX.Element>;
 export default _default;
-export declare const Tabs: ComponentStory<(props: TabsProps<import("@mui/material").ExtendButtonBase<import("@mui/material").ButtonBaseTypeMap<{}, "button">>, {}>) => JSX.Element>;
+export declare const Tabs: ComponentStory<(props: TabsProps<"div", {}>) => JSX.Element>;

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

@@ -1,20 +1,19 @@
 /// <reference types="react" />
-import { TextFieldProps } from '@mui/material';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-declare const _default: ComponentMeta<(props: TextFieldProps & {
+declare const _default: ComponentMeta<(props: (import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps) & {
     labelPlacement?: string | undefined;
     readOnly?: boolean | undefined;
     instructionText?: string | undefined;
     errorMessage?: string | undefined;
 }) => JSX.Element>;
 export default _default;
-export declare const TextField: ComponentStory<(props: TextFieldProps & {
+export declare const TextField: ComponentStory<(props: (import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps) & {
     labelPlacement?: string | undefined;
     readOnly?: boolean | undefined;
     instructionText?: string | undefined;
     errorMessage?: string | undefined;
 }) => JSX.Element>;
-export declare const TextFieldReadOnly: ComponentStory<(props: TextFieldProps & {
+export declare const TextFieldReadOnly: ComponentStory<(props: (import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps) & {
     labelPlacement?: string | undefined;
     readOnly?: boolean | undefined;
     instructionText?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.224",
+    "version": "1.0.0-dev.226",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -93,15 +93,15 @@
         "@dnd-kit/core": "^6.0.6",
         "@dnd-kit/modifiers": "^6.0.1",
         "@dnd-kit/sortable": "^7.0.1",
-        "@emotion/react": "^11.9.0",
+        "@emotion/react": "^11.13.5",
         "@emotion/styled": "^11.8.1",
-        "@evoke-platform/context": "^1.0.0-dev.113",
+        "@evoke-platform/context": "^1.0.0-dev.118",
         "@formio/react": "^5.2.4-rc.1",
         "@js-joda/core": "^3.2.0",
         "@js-joda/locale_en-us": "^3.2.2",
         "@mui/icons-material": "^5.8.4",
         "@mui/lab": "^5.0.0-alpha.105",
-        "@mui/material": "^5.10.11",
+        "@mui/material": "^5.16.7",
         "@mui/x-data-grid": "^6.4.0",
         "@mui/x-date-pickers": "^5.0.13",
         "@react-querybuilder/dnd": "^5.4.1",
@@ -115,10 +115,10 @@
         "eslint-plugin-no-inline-styles": "^1.0.5",
         "flat": "^6.0.1",
         "formiojs": "^4.15.0-rc.23",
+        "handlebars": "^4.7.8",
         "html-react-parser": "^5.1.18",
         "luxon": "^2.5.2",
         "nanoid": "^5.0.8",
-        "handlebars": "^4.7.8",
         "nanoid-dictionary": "^4.3.0",
         "pluralize": "^8.0.0",
         "pretty-bytes": "^6.1.1",