@evoke-platform/ui-components 1.6.0-testing.1 → 1.6.0-testing.11

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

@@ -0,0 +1,4 @@
+import { SwipeableDrawerProps } from '@mui/material';
+import * as React from 'react';
+declare const SwipeableDrawer: (props: SwipeableDrawerProps) => React.JSX.Element;
+export default SwipeableDrawer;

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

@@ -0,0 +1,8 @@
+import { SwipeableDrawer as MuiSwipeableDrawer } from '@mui/material';
+import * as React from 'react';
+import UIThemeProvider from '../../../theme';
+const SwipeableDrawer = (props) => {
+    return (React.createElement(UIThemeProvider, null,
+        React.createElement(MuiSwipeableDrawer, { ...props })));
+};
+export default SwipeableDrawer;

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

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

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

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

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

@@ -37,6 +37,7 @@ export { Skeleton } from './Skeleton';
 export { Snackbar } from './Snackbar';
 export * from './StaticDatePicker';
 export { Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper } from './Stepper';
+export { SwipeableDrawer } from './SwipeableDrawer';
 export { Switch } from './Switch';
 export { Table } from './Table';
 export { Tab, Tabs } from './Tabs';
@@ -47,7 +48,7 @@ export { Tooltip } from './Tooltip';
 export { Typography } from './Typography';
 export { TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
 export { CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Input, InputAdornment, InputLabel, ListItemButton, ListItemText, MenuList, SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, } from '@mui/material';
-export { useGridApiRef } from '@mui/x-data-grid';
+export { GridToolbarContainer, GridToolbarQuickFilter, useGridApiRef } from '@mui/x-data-grid';
 export { TreeItem as RichTreeItem, RichTreeView, TreeItem2Content, TreeItem2DragAndDropOverlay, TreeItem2GroupTransition, TreeItem2Icon, TreeItem2IconContainer, TreeItem2Label, TreeItem2Provider, TreeItem2Root, useTreeItem2, } from '@mui/x-tree-view';
 export type { GridSize } from '@mui/material';
 export type { GridCellParams, GridColDef, GridEventListener, GridFilterModel, GridInitialState, GridRowParams, GridSortModel, GridValueFormatterParams, GridValueGetterParams, } from '@mui/x-data-grid';

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

@@ -37,6 +37,7 @@ export { Skeleton } from './Skeleton';
 export { Snackbar } from './Snackbar';
 export * from './StaticDatePicker';
 export { Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper } from './Stepper';
+export { SwipeableDrawer } from './SwipeableDrawer';
 export { Switch } from './Switch';
 export { Table } from './Table';
 export { Tab, Tabs } from './Tabs';
@@ -48,5 +49,5 @@ export { Typography } from './Typography';
 //TODO: Review following components. They also need theme control:
 export { TabContext, TabList, TabPanel, TreeItem, TreeView } from '@mui/lab';
 export { CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Input, InputAdornment, InputLabel, ListItemButton, ListItemText, MenuList, SvgIcon, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, } from '@mui/material';
-export { useGridApiRef } from '@mui/x-data-grid';
+export { GridToolbarContainer, GridToolbarQuickFilter, useGridApiRef } from '@mui/x-data-grid';
 export { TreeItem as RichTreeItem, RichTreeView, TreeItem2Content, TreeItem2DragAndDropOverlay, TreeItem2GroupTransition, TreeItem2Icon, TreeItem2IconContainer, TreeItem2Label, TreeItem2Provider, TreeItem2Root, useTreeItem2, } from '@mui/x-tree-view';

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

@@ -17,7 +17,32 @@ const BuilderGrid = (props) => {
             borderBottom: 'none',
             boxShadow: 'rgba(145, 158, 171, 0.2) 0px 8px 16px',
         } },
-        React.createElement(MuiDataGrid, { autoPageSize: !disablePagination, hideFooterPagination: disablePagination, hideFooter: disablePagination, onMenuOpen: (env) => setAnchorEl(env.target), loading: loading, rows: rows, ...rest, sx: {
+        React.createElement(MuiDataGrid, { autoPageSize: !disablePagination, hideFooterPagination: disablePagination, hideFooter: disablePagination, onMenuOpen: (env) => setAnchorEl(env.target), loading: loading, rows: rows, getRowId: (row) => row.id, disableColumnMenu: true, initialState: {
+                sorting: {
+                    sortModel: initialSort ? [initialSort] : [],
+                },
+            }, componentsProps: {
+                panel: {
+                    anchorEl: anchorEl,
+                    placement: 'bottom-end',
+                    sx: {
+                        '& .MuiPaper-root': {
+                            borderRadius: '6px',
+                            boxShadow: '0px 24px 48px rgba(145, 158, 171, 0.4)',
+                            padding: '8px',
+                            stop: -120,
+                        },
+                    },
+                },
+            }, slots: {
+                toolbar: hideToolbar ? null : toolbar,
+                noResultsOverlay: () => {
+                    return React.createElement(Box, null);
+                },
+                noRowsOverlay: () => {
+                    return noRowsOverlay ? noRowsOverlay : null;
+                },
+            }, rowHeight: 60, columnHeaderHeight: 62, ...rest, sx: {
                 border: 'none',
                 '& .MuiDataGrid-toolbarContainer': {
                     padding: '0',
@@ -64,32 +89,7 @@ const BuilderGrid = (props) => {
                 },
                 height: disablePagination && !loading ? 'auto' : 'calc(100vh - 240px)',
                 ...rest.sx,
-            }, getRowId: (row) => row.id, disableColumnMenu: true, initialState: {
-                sorting: {
-                    sortModel: initialSort ? [initialSort] : [],
-                },
-            }, componentsProps: {
-                panel: {
-                    anchorEl: anchorEl,
-                    placement: 'bottom-end',
-                    sx: {
-                        '& .MuiPaper-root': {
-                            borderRadius: '6px',
-                            boxShadow: '0px 24px 48px rgba(145, 158, 171, 0.4)',
-                            padding: '8px',
-                            stop: -120,
-                        },
-                    },
-                },
-            }, slots: {
-                toolbar: hideToolbar ? null : toolbar,
-                noResultsOverlay: () => {
-                    return React.createElement(Box, null);
-                },
-                noRowsOverlay: () => {
-                    return noRowsOverlay ? noRowsOverlay : null;
-                },
-            }, rowHeight: 60, columnHeaderHeight: 62 }))) : (React.createElement(React.Fragment, null, error ? (React.createElement(Box, { sx: {
+            } }))) : (React.createElement(React.Fragment, null, error ? (React.createElement(Box, { sx: {
             backgroundColor: '#fff',
             borderRadius: '6px',
             display: 'flex',

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

@@ -186,7 +186,7 @@ const customSelector = (props) => {
                 return opts.find((o) => option === o.name)?.label || option;
             }
             return option.label;
-        }, isOptionEqualToValue: (option, value) => {
+        }, getOptionKey: (option) => option.name, isOptionEqualToValue: (option, value) => {
             if (typeof option === 'string') {
                 return option === value;
             }

package/dist/published/components/custom/Form/FormComponents/ImageComponent/Image.js

@@ -1,6 +1,6 @@
-import { BackupOutlined, ClearRounded } from '@mui/icons-material';
 import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
+import { ClearRounded, UploadCloud } from '../../../../../icons';
 import { CardMedia, IconButton, Typography } from '../../../../core';
 import { Box, Grid } from '../../../../layout';
 export function blobToDataUrl(blob) {
@@ -84,7 +84,7 @@ export const Image = (props) => {
         React.createElement("input", { ...getInputProps({ id }), multiple: false }),
         React.createElement(Grid, { container: true, sx: { width: '100%' } },
             React.createElement(Grid, { item: true, xs: 12, sx: { display: 'flex', justifyContent: 'center', paddingBottom: '5px' } },
-                React.createElement(BackupOutlined, { sx: { color: '#919EAB', height: '1.5em', width: '1.5em' } })),
+                React.createElement(UploadCloud, { sx: { color: '#919EAB', width: '50px', height: '30px' } })),
             React.createElement(Grid, { item: true, xs: 12 },
                 React.createElement(Typography, { variant: "body2", sx: { color: '#212B36', textAlign: 'center' } },
                     "Drag and drop or",

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

@@ -7,6 +7,7 @@ import sift from 'sift';
 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 { getReadableQuery } from '../../../CriteriaBuilder';
 import { getPrefixedUrl, normalizeDateTime, retrieveCustomErrorMessage } from '../../utils';
 import { ActionDialog } from './ActionDialog';
 import { DocumentViewerCell } from './DocumentViewerCell';
@@ -37,6 +38,7 @@ const RepeatableField = (props) => {
     const [relatedObject, setRelatedObject] = useState();
     const [hasCreateAction, setHasCreateAction] = useState(false);
     const [users, setUsers] = useState();
+    const [criteriaObjects, setCriteriaObjects] = useState([]);
     const [openDialog, setOpenDialog] = useState(false);
     const [dialogType, setDialogType] = useState();
     const [selectedRow, setSelectedRow] = useState();
@@ -50,9 +52,7 @@ const RepeatableField = (props) => {
     const [error, setError] = useState(false);
     const DEFAULT_CREATE_ACTION = '_create';
     const { instanceChanges } = useNotification();
-    const fetchRelatedInstances = useCallback(async () => {
-        if (openDialog)
-            return;
+    const fetchRelatedObject = useCallback(async () => {
         let relatedObject;
         if (property.objectId) {
             try {
@@ -80,31 +80,86 @@ const RepeatableField = (props) => {
             catch (err) {
                 console.error(error);
             }
-            if (property.relatedPropertyId && instance?.id) {
-                const filterProperty = `${property.relatedPropertyId}.id`;
-                const filter = { where: { [filterProperty]: instance?.id }, limit: 100 };
-                const objectId = property.objectId;
-                try {
-                    const timeout = setTimeout(() => {
-                        setLoading(false);
-                    }, 300);
-                    setLoading(true);
-                    const instances = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances`), {
-                        params: { filter: JSON.stringify(filter) },
-                    });
-                    clearTimeout(timeout);
+        }
+        relatedObject && checkCreateAccess(relatedObject);
+    }, [apiServices, property]);
+    const fetchRelatedInstances = useCallback(async () => {
+        if (openDialog)
+            return;
+        if (property.objectId && property.relatedPropertyId && instance?.id) {
+            const filterProperty = `${property.relatedPropertyId}.id`;
+            const filter = { where: { [filterProperty]: instance?.id }, limit: 100 };
+            const objectId = property.objectId;
+            try {
+                const timeout = setTimeout(() => {
                     setLoading(false);
-                    if (instances) {
-                        setRelatedInstances(instances);
-                    }
-                }
-                catch (error) {
-                    setError(true);
+                }, 300);
+                setLoading(true);
+                const instances = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances`), {
+                    params: { filter: JSON.stringify(filter) },
+                });
+                clearTimeout(timeout);
+                setLoading(false);
+                if (instances) {
+                    setRelatedInstances(instances);
                 }
             }
+            catch (error) {
+                setError(true);
+            }
         }
-        relatedObject && checkCreateAccess(relatedObject);
-    }, [apiServices, property, viewLayout]);
+    }, [apiServices, property]);
+    const fetchCriteriaObjects = useCallback(async () => {
+        let objectIds = [];
+        const criteriaProperties = relatedObject?.properties?.filter((property) => property.type === 'criteria' && property.objectId) ?? [];
+        if (tableViewLayout) {
+            objectIds = criteriaProperties
+                .filter((p) => tableViewLayout.properties.some((column) => column.id === p.id))
+                .map((property) => property.objectId);
+        }
+        else {
+            objectIds = criteriaProperties.map((p) => p.objectId);
+        }
+        const objects = [];
+        for (const objectId of new Set(objectIds)) {
+            try {
+                const criteriaObject = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/effective`), {
+                    params: { fields: ['id', 'name', 'properties'] },
+                });
+                objects.push(criteriaObject);
+            }
+            catch (error) {
+                console.error(`Error fetching criteria object with ID ${objectId}:`, error);
+            }
+        }
+        setCriteriaObjects(objects);
+    }, [apiServices, relatedObject, tableViewLayout]);
+    useEffect(() => {
+        (async () => {
+            try {
+                const users = await apiServices.get(getPrefixedUrl(`/users`));
+                setUsers(users);
+            }
+            catch (error) {
+                console.error(error);
+            }
+        })();
+    }, [apiServices]);
+    useEffect(() => {
+        fetchRelatedObject();
+        fetchRelatedInstances();
+    }, [fetchRelatedInstances, fetchRelatedObject, reloadOnErrorTrigger, instance]);
+    useEffect(() => {
+        if (relatedObject)
+            fetchCriteriaObjects();
+    }, [fetchCriteriaObjects, relatedObject]);
+    useEffect(() => {
+        if (relatedObject?.rootObjectId) {
+            const callback = () => fetchRelatedInstances();
+            instanceChanges?.subscribe(relatedObject?.rootObjectId, callback);
+            return () => instanceChanges?.unsubscribe(relatedObject?.rootObjectId, callback);
+        }
+    }, [instanceChanges, relatedObject]);
     const retrieveCriteria = (relatedObjProperty, action, object) => {
         let property;
         if (action.parameters) {
@@ -171,27 +226,6 @@ const RepeatableField = (props) => {
             });
         }
     };
-    useEffect(() => {
-        (async () => {
-            try {
-                const users = await apiServices.get(getPrefixedUrl(`/users`));
-                setUsers(users);
-            }
-            catch (error) {
-                console.error(error);
-            }
-        })();
-    }, [apiServices]);
-    useEffect(() => {
-        fetchRelatedInstances();
-    }, [fetchRelatedInstances, reloadOnErrorTrigger, instance]);
-    useEffect(() => {
-        if (relatedObject?.rootObjectId) {
-            const callback = () => fetchRelatedInstances();
-            instanceChanges?.subscribe(relatedObject?.rootObjectId, callback);
-            return () => instanceChanges?.unsubscribe(relatedObject?.rootObjectId, callback);
-        }
-    }, [instanceChanges, relatedObject]);
     const deleteRow = (id) => {
         setDialogType('delete');
         setSelectedRow(id);
@@ -334,28 +368,24 @@ const RepeatableField = (props) => {
     };
     const getValue = (relatedInstance, propertyId, propertyType) => {
         const value = get(relatedInstance, propertyId);
-        // If the property is not date-like then just return the
-        // value found at the given path.
-        if (!['date', 'date-time', 'time'].includes(propertyType)) {
-            return value;
-        }
         // If the date-like value is empty then there is no need to format.
         if (!value) {
             return value;
         }
-        // At this point it has been asserted that there is a value
-        // and since the property is date-like the value must be
-        // a string.
-        const stringValue = value;
         if (propertyType === 'date') {
-            return DateTime.fromISO(stringValue).toLocaleString(DateTime.DATE_SHORT);
+            return DateTime.fromISO(value).toLocaleString(DateTime.DATE_SHORT);
         }
         if (propertyType === 'date-time') {
-            return DateTime.fromISO(stringValue).toLocaleString(DateTime.DATETIME_SHORT);
+            return DateTime.fromISO(value).toLocaleString(DateTime.DATETIME_SHORT);
         }
         if (propertyType === 'time') {
-            return DateTime.fromISO(stringValue).toLocaleString(DateTime.TIME_SIMPLE);
+            return DateTime.fromISO(value).toLocaleString(DateTime.TIME_SIMPLE);
+        }
+        if (propertyType === 'criteria' && typeof value === 'object') {
+            const property = relatedObject?.properties?.find((p) => p.id === propertyId);
+            return getReadableQuery(value, criteriaObjects.find((o) => o.id === property?.objectId)?.properties ?? []);
         }
+        return value;
     };
     const columns = retrieveViewLayout();
     return loading ? (React.createElement(React.Fragment, null,

package/dist/published/components/custom/Form/tests/Form.test.js

@@ -6,7 +6,7 @@ import { isEqual } from 'lodash';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 import React from 'react';
-import { it } from 'vitest';
+import { expect, it } from 'vitest';
 import Form from '../Common/Form';
 import { licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, } from './test-data';
 const removePoppers = () => {

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

@@ -1,4 +1,5 @@
 import { createFilterOptions, List, ListSubheader } from '@mui/material';
+import { uniq } from 'lodash';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { Clear } from '../../../../icons';
 import { Autocomplete, FormControl, FormControlLabel, IconButton, Radio, RadioGroup, TextField, Typography, } from '../../../core';
@@ -15,7 +16,7 @@ const Select = (props) => {
     const [isOtherFocused, setIsOtherFocused] = useState(false);
     const [value, setValue] = useState(defaultValue);
     const [inputValue, setInputValue] = useState(!selectOptions?.some((option) => (typeof option === 'string' && option === defaultValue) ||
-        option.value === defaultValue)
+        option.value === defaultValue) && property.type !== 'array'
         ? defaultValue
         : '');
     const [errorState, setErrorState] = useState();
@@ -27,11 +28,14 @@ const Select = (props) => {
             otherInputRef.current.focus();
         }
     }, [isOther, value]);
+    useEffect(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleChange = (event, selected) => {
         if (Array.isArray(selected)) {
             const newValues = selected.map((option) => option.value ?? option);
-            setValue(newValues);
+            setValue(uniq(newValues));
             onChange && onChange(property.id, newValues, property);
         }
         else {
@@ -144,6 +148,7 @@ const Select = (props) => {
                 filtered.push({
                     value: inputValue,
                     label: `Add "${inputValue}"`,
+                    isCustomValue: true,
                 });
             }
             return filtered;
@@ -151,12 +156,19 @@ const Select = (props) => {
             ? (option, value) => isOptionEqualToValue(option, value)
             : undefined, getOptionLabel: getOptionLabel && !isCombobox
             ? (option) => getOptionLabel(option)
-            : (option) => (typeof option === 'string' ? option : option.label), renderOption: renderOption
+            : (option) => {
+                if (typeof option === 'string')
+                    return option;
+                // If the option is a custom value, return the value without the prepended "Add" text.
+                if (option.isCustomValue)
+                    return option.value;
+                return option.label ?? '';
+            }, renderOption: renderOption
             ? (props, option, state) => renderOption(props, option, state)
-            : undefined, ListboxComponent: ListboxComponent, disableCloseOnSelect: disableCloseOnSelect, sx: {
+            : (props, option) => React.createElement("li", { ...props }, option.label ?? option), ListboxComponent: ListboxComponent, disableCloseOnSelect: disableCloseOnSelect, sx: {
             '& button.MuiButtonBase-root': {
                 visibility: 'visible',
             },
-        }, ...(isCombobox ? { selectOnFocus: true, handleHomeEndKeys: true, freeSolo: true } : {}), ...(additionalProps ?? {}) }));
+        }, forcePopupIcon: true, ...(isCombobox ? { selectOnFocus: true, handleHomeEndKeys: true, freeSolo: true } : {}), ...(additionalProps ?? {}) }));
 };
 export default Select;

package/dist/published/components/custom/HistoryLog/HistoryData.d.ts

@@ -7,6 +7,7 @@ type HistoryDataProps = {
     documentHistory?: Record<string, History[]>;
     object: Obj;
     referencedObjects?: Obj[];
+    hideTimeline?: boolean;
 };
 declare const HistoricalData: (props: HistoryDataProps) => React.JSX.Element;
 export default HistoricalData;

package/dist/published/components/custom/HistoryLog/HistoryData.js

@@ -19,8 +19,7 @@ const styles = {
         color: '#637381',
     },
     timelineConnector: {
-        padding: '1px 0px 24px 22px',
-        borderLeft: '2px rgba(145, 158, 171, 0.24) solid',
+        padding: '1px 0px 24px 0px',
         marginLeft: '5px',
     },
     historyData: {
@@ -30,15 +29,24 @@ const styles = {
     },
 };
 const HistoricalData = (props) => {
-    const { records, documentHistory, object, referencedObjects } = props;
+    const { records, documentHistory, object, referencedObjects, hideTimeline } = props;
     const getPastDocumentVersion = (history) => {
         const documentVersions = documentHistory?.[history.subject?.id ?? 'unknown'] ?? [];
         const currentVersion = documentVersions?.map((v) => v.timestamp).indexOf(history.timestamp);
         return currentVersion ? documentVersions[currentVersion - 1] : undefined;
     };
-    return (React.createElement(Box, { sx: styles.timelineConnector }, records.map((r) => (React.createElement(Box, { margin: '16px 0px', key: `${r.timestamp}-${nanoid()}` },
-        React.createElement(Box, { sx: { display: 'flex', justifyContent: 'space-between' } },
-            React.createElement(Box, { sx: { display: 'flex', maxWidth: '60%', alignContent: 'flex-start' } },
+    return (React.createElement(Box, { sx: {
+            ...styles.timelineConnector,
+            borderLeft: !hideTimeline ? '2px rgba(145, 158, 171, 0.24) solid' : undefined,
+        } }, records.map((r) => (React.createElement(Box, { margin: '16px 0px', key: `${r.timestamp}-${nanoid()}` },
+        React.createElement(Box, { sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                flexDirection: { xs: 'column', sm: 'row' },
+                alignItems: { xs: 'flex-start', sm: 'center' },
+                gap: 0,
+            } },
+            React.createElement(Box, { sx: { display: 'flex', maxWidth: { sx: '100%', sm: '60%' }, alignContent: 'flex-start' } },
                 React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } },
                     React.createElement(Typography, { component: 'span', sx: { fontWeight: 600, fontSize: '12px' } }, r.user.name ?? 'Unknown User'),
                     "\u00A0",

package/dist/published/components/custom/HistoryLog/HistoryLoading.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-declare const HistoryLoading: () => React.JSX.Element;
+type HistoryLoadingProps = {
+    hideTimeline?: boolean;
+};
+declare const HistoryLoading: (props: HistoryLoadingProps) => React.JSX.Element;
 export default HistoryLoading;

package/dist/published/components/custom/HistoryLog/HistoryLoading.js

@@ -1,11 +1,10 @@
+import { Circle } from '@mui/icons-material';
 import React from 'react';
-import { Box } from '../../layout';
 import { Skeleton } from '../../core';
-import { Circle } from '@mui/icons-material';
+import { Box } from '../../layout';
 const styles = {
     timelineConnector: {
         padding: '1px 0px 5px 22px',
-        borderLeft: '2px rgba(145, 158, 171, 0.24) solid',
         marginLeft: '5px',
     },
     headerSkeleton: {
@@ -18,20 +17,27 @@ const styles = {
         borderRadius: '7px',
     },
 };
-const HistoryLoading = () => {
+const HistoryLoading = (props) => {
+    const { hideTimeline } = props;
     return (React.createElement(React.Fragment, { key: 'history-log-loading' },
         React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
-            React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
+            !hideTimeline && React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
             React.createElement(Skeleton, { variant: "text", sx: styles.headerSkeleton })),
-        React.createElement(Box, { sx: styles.timelineConnector },
+        React.createElement(Box, { sx: {
+                ...styles.timelineConnector,
+                borderLeft: !hideTimeline ? '2px rgba(145, 158, 171, 0.24) solid' : undefined,
+            } },
             React.createElement(Box, { margin: '4px 0px 24px 0px' },
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '120px' } }),
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '65%' } }),
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '75%' } }))),
         React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
-            React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
+            !hideTimeline && React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
             React.createElement(Skeleton, { variant: "text", sx: styles.headerSkeleton })),
-        React.createElement(Box, { sx: styles.timelineConnector },
+        React.createElement(Box, { sx: {
+                ...styles.timelineConnector,
+                borderLeft: !hideTimeline ? '2px rgba(145, 158, 171, 0.24) solid' : undefined,
+            } },
             React.createElement(Box, { margin: '4px 0px 20px 0px' },
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '120px' } }),
                 React.createElement(Skeleton, { variant: "text", sx: { ...styles.dataSkeleton, width: '55%' } })))));

package/dist/published/components/custom/HistoryLog/index.d.ts

@@ -10,6 +10,8 @@ export type HistoryLogProps = {
     loading?: boolean;
     /** The title displayed above the timeline */
     title?: string;
+    /** Whether to hide the timeline in the history log */
+    hideTimeline?: boolean;
 };
 /**
  * Renders a timeline of the instance's history log.

package/dist/published/components/custom/HistoryLog/index.js

@@ -20,7 +20,7 @@ const { format } = require('small-date');
  * @returns {JSX.Element} A timeline view representing the instance's history.
  */
 export const HistoryLog = (props) => {
-    const { object, history, loading, title } = props;
+    const { object, history, loading, title, hideTimeline } = props;
     const [historyMap, setHistoryMap] = useState({});
     const [documentHistory, setDocumentHistory] = useState({});
     const [referencedObjects, setReferencedObjects] = useState([]);
@@ -91,7 +91,7 @@ export const HistoryLog = (props) => {
                 if (records.length) {
                     return (React.createElement(React.Fragment, { key: date },
                         React.createElement(Box, { sx: { display: 'flex', alignItems: 'center' } },
-                            React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } }),
+                            !hideTimeline && (React.createElement(Circle, { color: "primary", sx: { fontSize: '12px', marginRight: '12px' } })),
                             React.createElement(Typography, { sx: { fontWeight: 600, fontSize: '16px' } },
                                 format(new Date(), 'yyyy-MM-dd') === date
                                     ? 'Today'
@@ -99,14 +99,14 @@ export const HistoryLog = (props) => {
                                 ' ',
                                 "\u00A0"),
                             React.createElement(Typography, { sx: { fontWeight: 600, fontSize: '16px', color: '#637381' } }, format(new Date(date + ' 00:00:000'), 'MMM dd, yyyy'))),
-                        React.createElement(HistoricalData, { object: object, records: records, documentHistory: documentHistory, referencedObjects: referencedObjects })));
+                        React.createElement(HistoricalData, { object: object, records: records, documentHistory: documentHistory, referencedObjects: referencedObjects, hideTimeline: hideTimeline })));
                 }
                 return null;
             }),
         !loading && filteredHistory && Object.values(filteredHistory).every((v) => !v.length) && (React.createElement(Box, { width: '100%', display: 'grid', justifyContent: 'center', marginTop: '60px' },
             React.createElement(Typography, { fontSize: '20px', fontWeight: 700 }, "You Have No History"),
             React.createElement(Typography, { fontSize: '14px', fontWeight: 400 }, "Try modifying the history type."))),
-        loading && React.createElement(HistoryLoading, null),
+        loading && React.createElement(HistoryLoading, { hideTimeline: hideTimeline }),
         React.createElement(Snackbar, { open: showSnackbar, handleClose: () => setShowSnackbar(false), message: 'Error occurred when loading referenced objects', error: true })));
 };
 export default HistoryLog;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+export interface ResponsiveOverflowProps {
+    /**
+     * Children elements to be displayed horizontally
+     */
+    children: React.ReactNode[];
+    /**
+     * Text for the overflow button. Default is "More"
+     */
+    moreButtonText?: string;
+    /**
+     * Custom button element to replace the default "More" button
+     */
+    customMoreButton?: React.ReactNode;
+    /**
+     * Maximum number of children to be displayed before overflowing
+     */
+    maxVisible?: number;
+    /**
+     * Function to render each overflow menu item. Receives the overflowed child and its index.
+     */
+    renderOverflowMenuItem?: (item: React.ReactNode) => React.ReactNode;
+    /**
+     * If true, the container will take full width
+     */
+    fullWidth?: boolean;
+}
+/**
+ * ResponsiveOverflow is a container component that displays children horizontally,
+ * automatically moving overflow items into a dropdown menu when there isn't enough space.
+ */
+export declare const ResponsiveOverflow: (props: ResponsiveOverflowProps) => React.JSX.Element;
+export default ResponsiveOverflow;

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

@@ -0,0 +1,139 @@
+import { KeyboardArrowDownRounded } from '@mui/icons-material';
+import { Box, Menu, MenuItem } from '@mui/material';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from '../../core';
+const styles = {
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        flex: '1 1 auto',
+        minWidth: 0,
+        overflow: 'hidden',
+        justifyContent: 'flex-end',
+    },
+    moreButton: {
+        color: '#637381',
+        fontSize: '14px',
+        fontWeight: 700,
+        minWidth: 'unset',
+        '& .MuiButton-endIcon': { margin: '0px' },
+    },
+    menuPaper: {
+        border: '0.5px solid #919EAB52',
+        borderRadius: '8px',
+        minWidth: '150px',
+        boxShadow: '0px 8px 16px 0px #0000001F',
+    },
+    horizontalItems: {
+        display: 'inline-block',
+        verticalAlign: 'top',
+        whiteSpace: 'nowrap',
+    },
+    fullWidthItems: {
+        padding: '0 4px',
+        flexGrow: 1,
+    },
+};
+/**
+ * ResponsiveOverflow is a container component that displays children horizontally,
+ * automatically moving overflow items into a dropdown menu when there isn't enough space.
+ */
+export const ResponsiveOverflow = (props) => {
+    const { children, customMoreButton, maxVisible, renderOverflowMenuItem, moreButtonText, fullWidth } = props;
+    const containerRef = useRef(null);
+    const itemRefs = useRef([]);
+    const moreButtonBoxRef = useRef(null);
+    const [overflowItems, setOverflowItems] = useState([]);
+    const [anchorEl, setAnchorEl] = useState(null);
+    // Initialize refs array with correct length
+    useEffect(() => {
+        itemRefs.current = itemRefs.current.slice(0, children.length);
+        handleResize();
+    }, [children]);
+    const handleResize = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        // Reset all items to visible before measuring
+        itemRefs.current.forEach((item) => {
+            if (item) {
+                item.style.display = 'inline-block';
+            }
+        });
+        const availableWidth = containerRef.current.getBoundingClientRect().width;
+        const moreButtonWidth = moreButtonBoxRef.current?.getBoundingClientRect().width ?? 0;
+        let usedWidth = 0;
+        let maxFit = children.length;
+        // Determine which items fit, accounting for overflow button width
+        for (let i = 0; i < itemRefs.current.length; i++) {
+            const item = itemRefs.current[i];
+            if (!item) {
+                continue;
+            }
+            const itemWidth = item.getBoundingClientRect().width;
+            if (usedWidth + itemWidth + moreButtonWidth > availableWidth) {
+                maxFit = i;
+                break;
+            }
+            usedWidth += itemWidth;
+        }
+        // If maxVisible is set, limit the number of visible items
+        if (typeof maxVisible === 'number') {
+            maxFit = Math.min(maxFit, maxVisible);
+        }
+        const newOverflow = [];
+        itemRefs.current.forEach((item, idx) => {
+            if (!item) {
+                return;
+            }
+            else if (idx >= maxFit) {
+                item.style.display = 'none';
+                if (children[idx]) {
+                    newOverflow.push(children[idx]);
+                }
+            }
+            else {
+                item.style.display = 'inline-block';
+            }
+        });
+        setOverflowItems(newOverflow);
+        // Close menu if nothing is overflowing
+        if (newOverflow.length === 0) {
+            setAnchorEl(null);
+        }
+    }, [children, maxVisible]);
+    // Set up resize observer
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            requestAnimationFrame(handleResize);
+        });
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        handleResize();
+        return () => {
+            if (containerRef.current) {
+                resizeObserver.unobserve(containerRef.current);
+            }
+            resizeObserver.disconnect();
+        };
+    }, [handleResize]);
+    const handleMenuOpen = (e) => setAnchorEl(e.currentTarget);
+    const handleMenuClose = () => setAnchorEl(null);
+    return (React.createElement(Box, { ref: containerRef, sx: styles.container },
+        children.map((item, index) => (React.createElement(Box, { ref: (el) => (itemRefs.current[index] = el), key: index, sx: { ...styles.horizontalItems, ...(fullWidth ? styles.fullWidthItems : {}) } }, item))),
+        !!overflowItems.length && (React.createElement(React.Fragment, null,
+            React.createElement(Box, { ref: moreButtonBoxRef, onClick: anchorEl ? handleMenuClose : handleMenuOpen }, customMoreButton ?? (React.createElement(Button, { variant: "text", sx: styles.moreButton, size: "small", endIcon: React.createElement(KeyboardArrowDownRounded, null) }, moreButtonText ?? 'More'))),
+            React.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleMenuClose, disablePortal: false, disableScrollLock: true, keepMounted: true, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right',
+                }, sx: { '& .MuiPaper-root': styles.menuPaper }, onClick: handleMenuClose }, overflowItems.map((item, index) => {
+                if (renderOverflowMenuItem) {
+                    return renderOverflowMenuItem(item);
+                }
+                return (React.createElement(MenuItem, { key: `overflow-item-${index}`, onClick: handleMenuClose }, item));
+            }))))));
+};
+export default ResponsiveOverflow;

package/dist/published/components/custom/ResponsiveOverflow/ResponsiveOverflow.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/published/components/custom/ResponsiveOverflow/ResponsiveOverflow.test.js

@@ -0,0 +1,100 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { vi } from 'vitest';
+import Button from '../../core/Button/Button';
+import ResponsiveOverflow from './ResponsiveOverflow';
+let mockResizeCallback = null;
+const originalResizeObserver = global.ResizeObserver;
+const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+describe('ResponsiveOverflow', () => {
+    // Helper function to simulate resize events
+    const simulateResize = (width) => {
+        Element.prototype.getBoundingClientRect = vi.fn(() => ({
+            width,
+        }));
+        if (mockResizeCallback) {
+            mockResizeCallback([], {});
+        }
+    };
+    beforeEach(() => {
+        mockResizeCallback = null;
+        global.ResizeObserver = class ResizeObserver {
+            constructor(callback) {
+                mockResizeCallback = callback;
+            }
+            observe() { }
+            unobserve() { }
+            disconnect() { }
+        };
+    });
+    afterEach(() => {
+        global.ResizeObserver = originalResizeObserver;
+        Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    });
+    it('renders children correctly', () => {
+        render(React.createElement(ResponsiveOverflow, null,
+            React.createElement(Button, null, "Button 1"),
+            React.createElement(Button, null, "Button 2"),
+            React.createElement(Button, null, "Button 3")));
+        expect(screen.getByText('Button 1')).toBeInTheDocument();
+        expect(screen.getByText('Button 2')).toBeInTheDocument();
+        expect(screen.getByText('Button 3')).toBeInTheDocument();
+    });
+    it('displays custom button text when overflowing', async () => {
+        render(React.createElement(ResponsiveOverflow, { moreButtonText: "Show More" },
+            React.createElement(Button, null, "Button 1"),
+            React.createElement(Button, null, "Button 2"),
+            React.createElement(Button, null, "Button 3"),
+            React.createElement(Button, null, "Button 4")));
+        simulateResize(80); // Narrow width to force overflow
+        await screen.findByRole('button', { name: 'Show More' });
+    });
+    it('displays custom more button when overflowing', async () => {
+        const customButton = React.createElement(Button, { "data-testid": "custom-more" }, "Custom More");
+        render(React.createElement(ResponsiveOverflow, { customMoreButton: customButton },
+            React.createElement(Button, null, "Button 1"),
+            React.createElement(Button, null, "Button 2"),
+            React.createElement(Button, null, "Button 3"),
+            React.createElement(Button, null, "Button 4")));
+        simulateResize(80);
+        await screen.findByRole('button', { name: 'Custom More' });
+    });
+    it('shows More button when triggered by ResizeObserver', async () => {
+        render(React.createElement(ResponsiveOverflow, { moreButtonText: "More" },
+            React.createElement(Button, null, "Button 1"),
+            React.createElement(Button, null, "Button 2"),
+            React.createElement(Button, null, "Button 3"),
+            React.createElement(Button, null, "Button 4"),
+            React.createElement(Button, null, "Button 5"),
+            React.createElement(Button, null, "Button 6"),
+            React.createElement(Button, null, "Button 7"),
+            React.createElement(Button, null, "Button 8"),
+            React.createElement(Button, null, "Button 9"),
+            React.createElement(Button, null, "Button 10")));
+        simulateResize(80);
+        const moreBtn = await screen.findByRole('button', { name: 'More' });
+        await screen.findByRole('button', { name: 'Button 1' });
+        await userEvent.click(moreBtn);
+        // Button 9 should be in the overflow menu as a menuitem
+        await screen.findByRole('menuitem', { name: 'Button 9' });
+    });
+    it('handles dynamic resizing from wide to narrow conditions', async () => {
+        render(React.createElement(ResponsiveOverflow, { moreButtonText: "More" },
+            React.createElement(Button, null, "Button 1"),
+            React.createElement(Button, null, "Button 2"),
+            React.createElement(Button, null, "Button 3"),
+            React.createElement(Button, null, "Button 4"),
+            React.createElement(Button, null, "Button 5"),
+            React.createElement(Button, null, "Button 6")));
+        simulateResize(800);
+        // With wide container, all buttons should fit
+        // More button should not be visible
+        expect(screen.queryByRole('button', { name: 'More' })).not.toBeInTheDocument();
+        // Now simulate narrow conditions - force overflow
+        simulateResize(200);
+        // With narrow container, More button should now be visible
+        await screen.findByRole('button', { name: 'More' });
+    });
+});

package/dist/published/components/custom/ResponsiveOverflow/index.d.ts

@@ -0,0 +1,4 @@
+import ResponsiveOverflow, { ResponsiveOverflowProps } from './ResponsiveOverflow';
+export { ResponsiveOverflow };
+export type { ResponsiveOverflowProps };
+export default ResponsiveOverflow;

package/dist/published/components/custom/ResponsiveOverflow/index.js

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

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

@@ -9,5 +9,6 @@ export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';
 export { RepeatableField } from './RepeatableField';
+export { ResponsiveOverflow } from './ResponsiveOverflow';
 export { RichTextViewer } from './RichTextViewer';
 export { UserAvatar } from './UserAvatar';

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

@@ -8,5 +8,6 @@ export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';
 export { RepeatableField } from './RepeatableField';
+export { ResponsiveOverflow } from './ResponsiveOverflow';
 export { RichTextViewer } from './RichTextViewer';
 export { UserAvatar } from './UserAvatar';

package/dist/published/index.d.ts

@@ -2,7 +2,7 @@ export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, RichTextViewer, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
 export type { FormRef } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';

package/dist/published/index.js

@@ -2,7 +2,7 @@ export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, RichTextViewer, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './theme';

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

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { ResponsiveOverflowProps } from '../components/custom/ResponsiveOverflow';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const ResizableDemo: () => React.JSX.Element;
+export declare const WithLinks: Story<ResponsiveOverflowProps>;
+export declare const WithCustomMoreButton: Story<ResponsiveOverflowProps>;

package/dist/published/stories/ResponsiveOverflow.stories.js

@@ -0,0 +1,91 @@
+import { KeyboardArrowDownRounded } from '@mui/icons-material';
+import { Box, Paper, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import Button from '../components/core/Button/Button';
+import Link from '../components/core/Link/Link';
+import ResponsiveOverflow from '../components/custom/ResponsiveOverflow';
+export default {
+    title: 'Custom/ResponsiveOverflow',
+    component: ResponsiveOverflow,
+    parameters: {
+        componentSubtitle: 'A container that handles overflow with a dropdown menu',
+    },
+    argTypes: {
+        moreButtonText: {
+            control: 'text',
+            description: 'Text for the overflow button',
+            defaultValue: 'More',
+        },
+        customMoreButton: {
+            control: false,
+            description: 'Custom button element to replace the default More button',
+        },
+        children: {
+            control: false,
+            description: 'React elements to display in the container',
+        },
+    },
+};
+const Template = (args) => React.createElement(ResponsiveOverflow, { ...args });
+// Interactive demo with resizable container
+export const ResizableDemo = () => {
+    const [width, setWidth] = useState(800);
+    const handleChange = (event) => {
+        setWidth(Number(event.target.value));
+    };
+    return (React.createElement(Box, null,
+        React.createElement(Typography, { variant: "h6", gutterBottom: true }, "Resize Container"),
+        React.createElement(Box, { sx: { mb: 2 } },
+            React.createElement(Typography, { variant: "body2", gutterBottom: true },
+                "Container Width: ",
+                width,
+                "px"),
+            React.createElement("input", { type: "range", min: 200, max: 1000, value: width, onChange: handleChange, 
+                // eslint-disable-next-line no-inline-styles/no-inline-styles
+                style: { width: '100%' }, "aria-label": "Adjust container width", title: "Drag to resize container" })),
+        React.createElement(Paper, { elevation: 1, sx: {
+                width: `${width}px`,
+                padding: 2,
+                transition: 'width 0.3s ease',
+                backgroundColor: '#f5f5f5',
+            } },
+            React.createElement(ResponsiveOverflow, { moreButtonText: "More" },
+                React.createElement(Button, { variant: "contained", color: "primary" }, "Dashboard"),
+                React.createElement(Button, { variant: "contained" }, "Applications"),
+                React.createElement(Button, { variant: "contained" }, "Inspections"),
+                React.createElement(Button, { variant: "contained" }, "Reports"),
+                React.createElement(Button, { variant: "contained" }, "Licenses"),
+                React.createElement(Button, { variant: "contained" }, "Permits"),
+                React.createElement(Button, { variant: "contained" }, "Requests"),
+                React.createElement(Button, { variant: "contained" }, "Locations")))));
+};
+export const WithLinks = Template.bind({});
+WithLinks.args = {
+    moreButtonText: 'More',
+    children: [
+        React.createElement(Link, { key: "1" }, "Applications"),
+        React.createElement(Link, { key: "2" }, "Inspections"),
+        React.createElement(Link, { key: "3" }, "Licenses"),
+        React.createElement(Link, { key: "4" }, "Permits"),
+        React.createElement(Link, { key: "5" }, "Requests"),
+        React.createElement(Link, { key: "6" }, "Compliance"),
+    ],
+};
+export const WithCustomMoreButton = Template.bind({});
+WithCustomMoreButton.args = {
+    customMoreButton: (React.createElement(Button, { variant: "contained", endIcon: React.createElement(KeyboardArrowDownRounded, null) }, "More Options")),
+    children: [
+        React.createElement(Button, { variant: "contained", color: "primary", key: "1" }, "Dashboard"),
+        React.createElement(Button, { variant: "contained", key: "2" }, "Applications"),
+        React.createElement(Button, { variant: "contained", key: "3" }, "Inspections"),
+        React.createElement(Button, { variant: "contained", key: "4" }, "Reports"),
+        React.createElement(Button, { variant: "contained", key: "5" }, "Licenses"),
+        React.createElement(Button, { variant: "contained", key: "6" }, "Permits"),
+        React.createElement(Button, { variant: "contained", key: "7" }, "Requests"),
+        React.createElement(Button, { variant: "contained", key: "8" }, "Documents"),
+        React.createElement(Button, { variant: "contained", key: "9" }, "Locations"),
+        React.createElement(Button, { variant: "contained", key: "10" }, "Calendar"),
+        React.createElement(Button, { variant: "contained", key: "11" }, "Compliance"),
+        React.createElement(Button, { variant: "contained", key: "12" }, "Notifications"),
+    ],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.0-testing.1",
+    "version": "1.6.0-testing.11",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",