@evoke-platform/ui-components 1.5.1-testing.0 → 1.6.0-dev.1

package/dist/published/components/custom/Form/Common/FormComponentWrapper.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { ErrorRounded, Help, HighlightOffOutlined } from '../../../../icons';
+import { ErrorRounded, Help } from '../../../../icons';
 import { IconButton, Tooltip, Typography } from '../../../core';
 import { Box } from '../../../layout';
 const underFieldStyles = {
@@ -13,11 +13,6 @@ const descriptionStyles = {
     whiteSpace: 'normal',
     paddingBottom: '4px',
 };
-const clearBtnStyles = {
-    color: '#637381',
-    fontSize: '1.2rem',
-    marginBottom: '2px',
-};
 const PrefixSuffix = (props) => {
     const { prefix, suffix, height } = props;
     const text = prefix || suffix;
@@ -51,7 +46,7 @@ const PrefixSuffix = (props) => {
  * description, tooltip, prefix, suffix and word/char counts
  */
 export const FormComponentWrapper = (props) => {
-    const { inputId, label, description, tooltip, prefix, suffix, value, validate, errorMessage, showCharCount, type, viewOnly, children, displayOption, onChange, property, readOnly, } = props;
+    const { inputId, label, description, tooltip, prefix, suffix, value, validate, errorMessage, showCharCount, type, viewOnly, children, displayOption, property, } = props;
     const [fieldHeight, setFieldHeight] = useState(40);
     const { maxLength } = validate;
     const fieldRef = useRef(null);
@@ -76,12 +71,6 @@ export const FormComponentWrapper = (props) => {
                     tooltip && (React.createElement(Tooltip, { placement: "right", title: tooltip },
                         React.createElement(IconButton, null,
                             React.createElement(Help, { sx: { fontSize: '14px' } }))))),
-                displayOption === 'radioButton' && onChange && !viewOnly && !readOnly && value && (React.createElement(Tooltip, { title: `Clear` },
-                    React.createElement("span", null,
-                        React.createElement(IconButton, { "aria-label": `Clear`, sx: { padding: '0px' }, onClick: () => {
-                                property && onChange(property.id, '');
-                            } },
-                            React.createElement(HighlightOffOutlined, { sx: clearBtnStyles }))))),
                 React.createElement(Box, { sx: { ...(displayOption === 'radioButton' && { display: 'flex' }) } },
                     React.createElement(Typography, { variant: "caption", sx: descriptionStyles }, description)))),
             React.createElement(Box, { sx: { display: 'flex', flexDirection: 'row' } },

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

@@ -12,6 +12,7 @@ type FormFieldComponentProps = Omit<BaseFormComponentProps, 'property'> & {
     initialValue?: string;
     displayOption?: 'radioButton' | 'dropdown';
     strictlyTrue?: boolean;
+    nonStrictEnum?: boolean;
 };
 export declare class FormFieldComponent extends ReactComponent {
     [x: string]: any;

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

@@ -485,6 +485,6 @@ export class FormFieldComponent extends ReactComponent {
                             falsePositiveMaskError &&
                             isEmpty(this.errorDetails) &&
                             this.emit('changed-' + this.component.key, e.target.value);
-                    }, ...this.component, id: inputId, defaultValue: this.dataValue, mask: this.component.inputMask, error: this.hasErrors(), size: this.component.fieldHeight ?? 'medium', required: this.component.property.type === 'boolean' ? this.component.strictlyTrue : undefined }))), root);
+                    }, ...this.component, id: inputId, defaultValue: this.dataValue, mask: this.component.inputMask, error: this.hasErrors(), size: this.component.fieldHeight ?? 'medium', required: this.component.property.type === 'boolean' ? this.component.strictlyTrue : undefined, isCombobox: this.component.nonStrictEnum }))), root);
     }
 }

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

@@ -165,6 +165,7 @@ export function convertFormToComponents(entries, parameters, object) {
                 data: {
                     values: entry.type === 'input' ? entry.enumWithLabels : undefined,
                 },
+                nonStrictEnum: parameter.nonStrictEnum,
                 property: property,
                 defaultToCurrentTime: displayOptions?.defaultValue === 'currentTime' && parameter.type === 'time' ? true : false,
                 defaultToCurrentDate: displayOptions?.defaultValue === 'currentDate' && parameter.type === 'date' ? true : false,

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

@@ -47,7 +47,7 @@ const BooleanSelect = (props) => {
         }
         else {
             const iconColor = 'rgb(160, 160, 160)';
-            return (React.createElement(FormControl, { disabled: true, fullWidth: true },
+            return (React.createElement(FormControl, { disabled: true, required: strictlyTrue, fullWidth: true },
                 React.createElement(FormControlLabel, { labelPlacement: "end", label: labelComponent(), sx: { gap: 1, marginLeft: 0 }, control: value ? (displayOption === 'checkbox' ? (React.createElement(CheckBoxIcon, { fontSize: size ?? 'medium', "aria-label": "Checked", htmlColor: iconColor })) : (React.createElement(ToggleOn, { fontSize: size ?? 'medium', "aria-label": "Checked", htmlColor: iconColor }))) : displayOption === 'checkbox' ? (React.createElement(CheckBoxOutlineBlank, { fontSize: size ?? 'medium', "aria-label": "Unchecked", htmlColor: iconColor })) : (React.createElement(ToggleOff, { fontSize: size ?? 'medium', "aria-label": "Unchecked", htmlColor: iconColor })) }),
                 descriptionComponent()));
         }

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

@@ -35,6 +35,7 @@ export type FormFieldProps = {
     label?: string;
     description?: string;
     tooltip?: string;
+    isCombobox?: boolean;
 };
 declare const FormField: (props: FormFieldProps) => React.JSX.Element;
 export default FormField;

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

@@ -8,7 +8,7 @@ import InputFieldComponent from './InputFieldComponent/InputFieldComponent';
 import Select from './Select/Select';
 import TimePickerSelect from './TimePickerSelect/TimePickerSelect';
 const FormField = (props) => {
-    const { id, defaultValue, error, onChange, property, readOnly, selectOptions, required, strictlyTrue, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, additionalProps, displayOption, sortBy, label, description, tooltip, } = props;
+    const { id, defaultValue, error, onChange, property, readOnly, selectOptions, required, strictlyTrue, size, placeholder, errorMessage, onBlur, mask, max, min, isMultiLineText, rows, inputMaskPlaceholderChar, queryAddresses, isOptionEqualToValue, renderOption, disableCloseOnSelect, getOptionLabel, additionalProps, displayOption, sortBy, label, description, tooltip, isCombobox, } = props;
     let control;
     const commonProps = {
         id: id ?? property.id,
@@ -36,6 +36,7 @@ const FormField = (props) => {
         label,
         description,
         tooltip,
+        isCombobox,
     };
     if (queryAddresses) {
         control = (React.createElement(AddressFieldComponent, { ...commonProps, mask: mask, inputMaskPlaceholderChar: inputMaskPlaceholderChar, isMultiLineText: isMultiLineText, rows: rows, queryAddresses: queryAddresses }));

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

@@ -1,23 +1,56 @@
-import React, { useEffect, useState } from 'react';
-import { Autocomplete, FormControl, FormControlLabel, Radio, RadioGroup, TextField, } from '../../../core';
+import { createFilterOptions, List, ListSubheader } from '@mui/material';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { Clear } from '../../../../icons';
+import { Autocomplete, FormControl, FormControlLabel, IconButton, Radio, RadioGroup, TextField, Typography, } from '../../../core';
+import { Box } from '../../../layout';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
+const filter = createFilterOptions();
 const Select = (props) => {
-    const { id, property, defaultValue, error, errorMessage, onBlur, readOnly, selectOptions, required, size, isOptionEqualToValue, renderOption, getOptionLabel, disableCloseOnSelect, additionalProps, displayOption, sortBy, } = props;
+    const { id, property, defaultValue, error, errorMessage, onBlur, onChange, readOnly, isCombobox, selectOptions, required, size, isOptionEqualToValue, renderOption, getOptionLabel, disableCloseOnSelect, additionalProps, displayOption, sortBy, } = props;
+    const otherInputRef = useRef(null);
+    const [isOther, setIsOther] = useState(!!isCombobox &&
+        !!defaultValue &&
+        !selectOptions?.some((option) => (typeof option === 'string' && option === defaultValue) ||
+            option.value === defaultValue));
+    const [isOtherFocused, setIsOtherFocused] = useState(false);
     const [value, setValue] = useState(defaultValue);
-    const [inputValue, setInputValue] = useState('');
+    const [inputValue, setInputValue] = useState(!selectOptions?.some((option) => (typeof option === 'string' && option === defaultValue) ||
+        option.value === defaultValue)
+        ? defaultValue
+        : '');
+    const [errorState, setErrorState] = useState();
     useEffect(() => {
-        setValue(defaultValue);
-    }, [defaultValue]);
+        setErrorState(isCombobox ? error && !isOtherFocused : error);
+    }, [error, isOtherFocused]);
+    useEffect(() => {
+        if (isOther && otherInputRef.current && value === '') {
+            otherInputRef.current.focus();
+        }
+    }, [isOther, value]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleChange = (event, selected) => {
         if (Array.isArray(selected)) {
-            setValue(selected.map((option) => option.value ?? option));
-            props.onChange &&
-                props.onChange(property.id, selected.map((option) => option.value ?? option), property);
+            const newValues = selected.map((option) => option.value ?? option);
+            setValue(newValues);
+            onChange && onChange(property.id, newValues, property);
         }
         else {
-            setValue(selected);
-            props.onChange && props.onChange(property.id, selected, property);
+            if (isCombobox && displayOption === 'radioButton') {
+                if (selected === '__other__') {
+                    setIsOther(true);
+                    setValue('');
+                }
+                else {
+                    setIsOther(false);
+                    setValue(selected);
+                    setInputValue('');
+                    onChange && onChange(property.id, selected, property);
+                }
+            }
+            else {
+                setValue(selected);
+                onChange && onChange(property.id, selected, property);
+            }
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -29,6 +62,10 @@ const Select = (props) => {
             setInputValue(selectValue);
         }
     };
+    const ListboxComponent = forwardRef(function ListboxComponent(props, ref) {
+        const { children, ...other } = props;
+        return (React.createElement(List, { component: "ul", ...other, ref: ref, subheader: isCombobox ? (React.createElement(ListSubheader, { component: 'div', id: `${id}-instructions`, role: "note", sx: { lineHeight: '36px', borderBottom: '1px solid #919EAB3D' } }, "Select below or type and click Enter to add a new item.")) : undefined }, children));
+    });
     const sortedOptions = (() => {
         if (!selectOptions)
             return [];
@@ -42,21 +79,84 @@ const Select = (props) => {
                 return options.sort((a, b) => typeof a === 'string' ? a.localeCompare(b) : a.label.localeCompare(b.label));
         }
     })();
-    return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : displayOption === 'radioButton' ? (React.createElement(FormControl, { error: error, required: required },
-        React.createElement(RadioGroup, { name: `radioGroup-${id}`, value: value, onChange: handleChange, sx: { paddingLeft: '12px' } }, sortedOptions.map((option, index) => (React.createElement(FormControlLabel, { key: index, value: typeof option === 'string' ? option : option.value, control: React.createElement(Radio, { size: "small", sx: {
-                    ...(size === 'small' && { paddingTop: '2px', paddingBottom: '2px' }),
-                    ...(error && {
-                        color: '#FF4842',
-                        '&.Mui-checked': { color: '#FF4842' },
-                    }),
-                } }), label: typeof option === 'string' ? option : option.label })))))) : (React.createElement(Autocomplete, { multiple: property?.type === 'array' ? true : false, id: id, sortBy: sortBy, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, isOptionEqualToValue: isOptionEqualToValue
+    return readOnly ? (React.createElement(InputFieldComponent, { ...props })) : displayOption === 'radioButton' ? (React.createElement(React.Fragment, null,
+        React.createElement(FormControl, { error: error, required: required },
+            React.createElement(RadioGroup, { name: `radioGroup-${id}`, value: isOther ? '__other__' : value, onChange: handleChange },
+                sortedOptions.map((option, index) => (React.createElement(FormControlLabel, { key: index, sx: { margin: '3px 0' }, value: typeof option === 'string' ? option : option.value, control: React.createElement(Radio, { size: "small", sx: {
+                            padding: '3px',
+                            ...(index === 0 && {
+                                paddingTop: 0,
+                            }),
+                            ...(!!errorState && {
+                                color: '#FF4842',
+                                '&.Mui-checked': { color: '#FF4842' },
+                            }),
+                        } }), label: typeof option === 'string' ? option : option.label }))),
+                isCombobox && (React.createElement(React.Fragment, null,
+                    React.createElement(FormControlLabel, { value: '__other__', sx: { margin: '3px 0' }, control: React.createElement(Radio, { size: "small", sx: {
+                                padding: '3px',
+                                ...(!!errorState && {
+                                    color: '#FF4842',
+                                    '&.Mui-checked': { color: '#FF4842' },
+                                }),
+                            } }), label: React.createElement("span", { id: `other-radio-button-${id}` }, "Other") }),
+                    isOther && (React.createElement(TextField, { id: `other-${id}`, inputProps: {
+                            'aria-labelledby': `other-radio-button-${id}`,
+                        }, value: inputValue, inputRef: otherInputRef, error: !!errorState, sx: { marginLeft: '4px' }, onChange: (e) => {
+                            setValue(e.target.value);
+                            setInputValue(e.target.value);
+                            onChange && onChange(property.id, e.target.value, property);
+                        }, size: 'small', onFocus: () => setIsOtherFocused(true), onBlur: (e) => {
+                            // If another radio button is focused, change the value to that radio button's value.
+                            const targetElement = e.nativeEvent.relatedTarget;
+                            if (targetElement?.defaultValue && targetElement.name === `radioGroup-${id}`) {
+                                onChange && onChange(property.id, targetElement, property);
+                            }
+                            else {
+                                onChange && onChange(property.id, e.target.value, property);
+                            }
+                            setIsOtherFocused(false);
+                        } })))))),
+        displayOption === 'radioButton' && onChange && !readOnly && value && (React.createElement(Box, { sx: {
+                ':hover': { cursor: 'pointer' },
+                marginTop: '4px',
+                display: 'flex',
+                alignItems: 'center',
+            } },
+            React.createElement(IconButton, { "aria-label": `Clear`, onClick: () => {
+                    setValue('');
+                    property && onChange(property.id, '');
+                    setIsOther(false);
+                }, sx: { padding: '3px', marginRight: '6px' } },
+                React.createElement(Clear, { sx: {
+                        color: '#637381',
+                        fontSize: '1.2rem',
+                    } })),
+            React.createElement(Typography, { variant: "caption" }, "Clear Selection"))))) : (React.createElement(Autocomplete, { multiple: property?.type === 'array' ? true : false, id: id, sortBy: sortBy, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur, inputProps: {
+                ...params.inputProps,
+                'aria-describedby': isCombobox ? `${id}-instructions` : undefined,
+            } })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, filterOptions: (options, params) => {
+            const filtered = filter(options, params);
+            const { inputValue } = params;
+            // Suggest to the user to add a new value.
+            const found = options.some((option) => inputValue === option.label);
+            if (inputValue !== '' && !found && isCombobox) {
+                filtered.push({
+                    value: inputValue,
+                    label: `Add "${inputValue}"`,
+                });
+            }
+            return filtered;
+        }, isOptionEqualToValue: isOptionEqualToValue
             ? (option, value) => isOptionEqualToValue(option, value)
-            : undefined, getOptionLabel: getOptionLabel ? (option) => getOptionLabel(option) : undefined, renderOption: renderOption
+            : undefined, getOptionLabel: getOptionLabel && !isCombobox
+            ? (option) => getOptionLabel(option)
+            : (option) => (typeof option === 'string' ? option : option.label), renderOption: renderOption
             ? (props, option, state) => renderOption(props, option, state)
-            : undefined, disableCloseOnSelect: disableCloseOnSelect, sx: {
+            : undefined, ListboxComponent: ListboxComponent, disableCloseOnSelect: disableCloseOnSelect, sx: {
             '& button.MuiButtonBase-root': {
                 visibility: 'visible',
             },
-        }, ...(additionalProps ?? {}) }));
+        }, ...(isCombobox ? { selectOnFocus: true, handleHomeEndKeys: true, freeSolo: true } : {}), ...(additionalProps ?? {}) }));
 };
 export default Select;

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

@@ -14,8 +14,8 @@ describe('Single select', () => {
         type: 'choices',
     };
     it('returns selected option', async () => {
-        const user = userEvent.setup();
         const onChangeMock = vi.fn((name, value, property) => { });
+        const user = userEvent.setup();
         const options = ['option 1', 'option 2', 'option 3'];
         render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: onChangeMock }));
         const input = screen.getByRole('combobox');
@@ -48,6 +48,21 @@ describe('Single select', () => {
         const optionLabels = allOptions.map((option) => option.textContent);
         expect(optionLabels).toEqual(expectedValues);
     });
+    it('allows the user to enter a custom value if it is combobox component', async () => {
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const user = userEvent.setup();
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        // Verify the instruction text for a combobox displays as the sub-header of the combobox.
+        screen.getByText('Select below or type and click Enter to add a new item.');
+        await user.type(input, 'custom option');
+        // Verify the option to add the custom value is displayed as an available option in the dropdown.
+        const customOption = await screen.findByRole('option', { name: 'Add "custom option"' });
+        await user.click(customOption);
+        expect(onChangeMock).toBeCalledWith('selectOptions', expect.objectContaining({ label: 'Add "custom option"', value: 'custom option' }), choiceProperty);
+    });
 });
 describe('Multi select', () => {
     // Right now an object property is required for this to function, but eventually this should go
@@ -66,12 +81,49 @@ describe('Multi select', () => {
         await user.click(input);
         const option2 = await screen.findByRole('option', { name: 'option 2' });
         await user.click(option2);
-        await user.click(input); // selecting option closes the dropdown, re-open the options
+        // selecting option closes the dropdown, re-open the options
+        await user.click(input);
         const option3 = await screen.findByRole('option', { name: 'option 3' });
         await user.click(option3);
         expect(onChangeMock).toBeCalledTimes(2);
         expect(onChangeMock).lastCalledWith('multiSelect', ['option 2', 'option 3'], multiChoiceProperty);
     });
+    it('allows the user to enter custom values if it is combobox component', async () => {
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const user = userEvent.setup();
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(Select, { id: "multiSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        // Verify the instruction text for a combobox displays as the sub-header of the combobox.
+        screen.getByText('Select below or type and click Enter to add a new item.');
+        await user.type(input, 'custom option 1');
+        const customOption1 = await screen.findByRole('option', { name: 'Add "custom option 1"' });
+        await user.click(customOption1);
+        await user.type(input, 'custom option 2');
+        const customOption2 = await screen.findByRole('option', { name: 'Add "custom option 2"' });
+        await user.click(customOption2);
+        expect(onChangeMock).toBeCalledTimes(2);
+        expect(onChangeMock).lastCalledWith('multiSelect', ['custom option 1', 'custom option 2'], multiChoiceProperty);
+    });
+    it('allows the user to enter custom values in conjunction with the predefined options if it is combobox component', async () => {
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const user = userEvent.setup();
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(Select, { id: "multiSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true }));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        // Verify the instruction text for a combobox displays as the sub-header of the combobox.
+        screen.getByText('Select below or type and click Enter to add a new item.');
+        await user.type(input, 'custom option 1');
+        const customOption1 = await screen.findByRole('option', { name: 'Add "custom option 1"' });
+        await user.click(customOption1);
+        await user.click(input);
+        const option1 = await screen.findByRole('option', { name: 'option 1' });
+        await user.click(option1);
+        expect(onChangeMock).toBeCalledTimes(2);
+        expect(onChangeMock).lastCalledWith('multiSelect', ['custom option 1', 'option 1'], multiChoiceProperty);
+    });
 });
 describe('Radio Single select', () => {
     const choiceProperty = {
@@ -79,7 +131,7 @@ describe('Radio Single select', () => {
         name: 'Select Options',
         type: 'choices',
     };
-    test('returns selected radio option', async () => {
+    it('returns selected radio option', async () => {
         const user = userEvent.setup();
         const onChangeMock = vi.fn((name, value, property) => { });
         const options = ['option 1', 'option 2', 'option 3'];
@@ -99,4 +151,21 @@ describe('Radio Single select', () => {
         const radioValues = radioButtons.map((radioButton) => radioButton.value);
         expect(radioValues).toEqual(expectedValues);
     });
+    it('renders an "Other" option in the radio group if the component is configured to support a custom value', async () => {
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock, isCombobox: true }));
+        await screen.findByRole('radio', { name: 'Other' });
+    });
+    it('renders a text field for a custom option if the "Other" option is selected', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock, isCombobox: true }));
+        await screen.findByRole('radio', { name: 'Other' });
+        await user.click(screen.getByRole('radio', { name: 'Other' }));
+        const otherTextField = await screen.findByRole('textbox', { name: `Other` });
+        await user.type(otherTextField, 'custom option');
+        expect(onChangeMock).toBeCalledWith('selectOptions', expect.stringContaining('custom option'), choiceProperty);
+    });
 });

package/dist/published/index.d.ts

@@ -1,4 +1,4 @@
-export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from '@mui/material';
+export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMediaQuery, useTheme, } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';

package/dist/published/index.js

@@ -1,4 +1,4 @@
-export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar } from '@mui/material';
+export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMediaQuery, useTheme, } from '@mui/material';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';

package/package.json

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