ish-ui 1.0.55 → 1.1.0

package/dist/formFields/EditInPlaceMoneyField.js

@@ -19,9 +19,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useCallback } from 'react';
 import NumberFormat from 'react-number-format';
 import InputAdornment from '@mui/material/InputAdornment';
-import clsx from 'clsx';
 import EditInPlaceField from './EditInPlaceField';
 import { formatCurrency, normalizeNumber } from '../utils';
+import { useStyles } from 'tss-react/mui';
 const NumberFormatCustom = React.forwardRef((props, ref) => {
     const { onChange, allowNegative = true } = props, other = __rest(props, ["onChange", "allowNegative"]);
     const onValueChange = useCallback(values => {
@@ -33,7 +33,8 @@ const preformatDisplayValue = value => value || value === 0 ? formatCurrency(val
 function EditInPlaceMoneyField(_a) {
     var _b;
     var { InputProps, currencySymbol, className } = _a, restProps = __rest(_a, ["InputProps", "currencySymbol", "className"]);
+    const { cx } = useStyles();
     return (React.createElement(EditInPlaceField, Object.assign({}, restProps, { preformatDisplayValue: preformatDisplayValue, InputProps: Object.assign(Object.assign({}, InputProps), { startAdornment: React.createElement(InputAdornment, { position: "start", className: (_b = restProps.fieldClasses) === null || _b === void 0 ? void 0 : _b.text },
-                React.createElement("span", null, currencySymbol)), inputComponent: NumberFormatCustom }), className: clsx('money', className) })));
+                React.createElement("span", null, currencySymbol)), inputComponent: NumberFormatCustom }), className: cx('money', className) })));
 }
 export default EditInPlaceMoneyField;

package/dist/formFields/EditInPlaceSearchSelect.js

@@ -20,17 +20,18 @@ import CircularProgress from '@mui/material/CircularProgress';
 import Popper from '@mui/material/Popper';
 import { Autocomplete, IconButton, InputAdornment, Select } from '@mui/material';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import CloseIcon from '@mui/icons-material//Close';
-import clsx from 'clsx';
+import CloseIcon from '@mui/icons-material/Close';
 import ExpandMore from '@mui/icons-material/ExpandMore';
-import { ListboxComponent, selectStyles } from './SelectCustomComponents';
+import { ListboxComponent, useSelectStyles } from './SelectCustomComponents';
 import EditInPlaceFieldBase from './EditInPlaceFieldBase';
 import { makeAppStyles } from '../styles';
 import { getHighlightedPartLabel, stubComponent } from '../utils';
 import { usePrevious } from '../utils/hooks';
-const useStyles = makeAppStyles(theme => (Object.assign({ popper: {
+const useStyles = makeAppStyles()({
+    popper: {
         zIndex: 1400
-    } }, selectStyles(theme))));
+    }
+});
 const SelectContext = React.createContext({});
 const ListBoxAdapter = React.forwardRef((_a, ref) => {
     var { children } = _a, other = __rest(_a, ["children"]);
@@ -48,7 +49,9 @@ const PopperAdapter = React.memo(params => {
             : React.createElement(Popper, Object.assign({}, params, { style: inline ? null : params.style })));
 });
 function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, inline, loading, creatable, allowEmpty, fieldClasses = {}, selectAdornment, selectValueMark = 'value', selectLabelMark = 'label', selectLabelCondition, selectFilterCondition, defaultValue, disableUnderline, items = [], rowHeight, remoteRowCount, loadMoreRows, onCreateOption, itemRenderer, onInputChange, onClearRows, onInnerValueChange, hideMenuOnNoResults, hideEditIcon, remoteData, createLabel, returnType = 'string', alwaysDisplayDefault, valueRenderer, popperAnchor, input, meta: { error, invalid }, placeholder, sort, sortPropKey, inputRef, warning, multiple, rightAligned, hasError, categoryKey, editIcon, variant }) {
-    const classes = useStyles();
+    const { classes: ownClasses, cx } = useStyles();
+    const { classes: selectClasses } = useSelectStyles();
+    const classes = Object.assign(Object.assign({}, selectClasses), ownClasses);
     const sortedItems = useMemo(() => {
         const sorted = items && (sort
             ? [...items].sort(typeof sort === 'function'
@@ -265,7 +268,7 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
         : (React.createElement("div", null,
             allowEmpty && input.value && (React.createElement(IconButton, { size: "small", onClick: onClear, color: "inherit" },
                 React.createElement(CloseIcon, { fontSize: "inherit" }))),
-            editIcon === undefined ? React.createElement(IconButton, { size: "small", color: "inherit", className: clsx(classes.expandIcon, 'pl-0 pr-0'), disableRipple: true },
+            editIcon === undefined ? React.createElement(IconButton, { size: "small", color: "inherit", className: cx(classes.expandIcon, 'pl-0 pr-0'), disableRipple: true },
                 React.createElement(ExpandMore, { className: inline && 'fsInherit' })) : editIcon))), [disabled, loading, inline, allowEmpty, input.value]);
     const inputValue = useMemo(() => {
         if (multiple) {
@@ -282,8 +285,8 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
         return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { variant: variant, key: input.name, name: input.name, value: value, error: error, invalid: hasError || invalid, inline: inline, label: label, warning: warning, fieldClasses: fieldClasses, rightAligned: rightAligned, shrink: Boolean(label || input.value), labelAdornment: labelAdornment, placeholder: renderedPlaceholder, editIcon: !hideEditIcon && renderIcons, InputProps: Object.assign(Object.assign({}, InputProps), { endAdornment: null, onChange: handleInputChange, onFocus: edit, onClick: onEditButtonFocus, onBlur,
                 disableUnderline, classes: {
                     underline: fieldClasses.underline,
-                    input: clsx(disabled && classes.readonly, fieldClasses.text),
-                }, inputProps: Object.assign(Object.assign({}, inputProps), { value: multiple ? inputProps.value : value, className: clsx(fieldClasses.text, 'mr-auto', inputProps.className), ref: ref => {
+                    input: cx(disabled && classes.readonly, fieldClasses.text),
+                }, inputProps: Object.assign(Object.assign({}, inputProps), { value: multiple ? inputProps.value : value, className: cx(fieldClasses.text, 'mr-auto', inputProps.className), ref: ref => {
                         inputProps.ref.current = ref;
                         inputNode.current = ref;
                         if (inputRef)
@@ -293,7 +296,7 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
                     React.createElement(Select, Object.assign({}, InputProps, { inputRef: ref => {
                             inputProps.ref.current = ref === null || ref === void 0 ? void 0 : ref.node;
                         }, classes: {
-                            select: clsx('cursor-text', fieldClasses.text)
+                            select: cx('cursor-text', fieldClasses.text)
                         }, onFocus: edit, value: (returnType === 'object' ? input.value[selectValueMark] : input.value) || '', endAdornment: React.createElement(InputAdornment, { position: "end", className: 'd-none' }, renderIcons), IconComponent: stubComponent }), renderValue)
                 : null })));
     }, [
@@ -325,7 +328,7 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
         multiple,
         isEditing
     ]);
-    return (React.createElement("div", { className: clsx(className, 'outline-none', inline && classes.inline), id: input === null || input === void 0 ? void 0 : input.name },
+    return (React.createElement("div", { className: cx(className, 'outline-none', inline && classes.inline), id: input === null || input === void 0 ? void 0 : input.name },
         React.createElement(SelectContext.Provider, { value: {
                 rowHeight,
                 remoteRowCount,
@@ -340,10 +343,10 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
                 selectAdornment
             } },
             React.createElement(Autocomplete, { blurOnSelect: !multiple, disableCloseOnSelect: multiple, multiple: multiple, value: inputValue, options: sortedItems, loading: loading, freeSolo: creatable, disabled: disabled, disableClearable: !allowEmpty, isOptionEqualToValue: getOptionSelected, onChange: handleChange, classes: {
-                    root: clsx('d-inline-flex', classes.root),
+                    root: cx('d-inline-flex', classes.root),
                     hasPopupIcon: classes.hasPopup,
                     hasClearIcon: classes.hasClear,
-                    inputRoot: clsx(classes.inputWrapper, multiple && classes.multiple),
+                    inputRoot: cx(classes.inputWrapper, multiple && classes.multiple),
                     option: 'w-100 text-pre',
                     popper: classes.popper,
                     groupUl: 'm-0'

package/dist/formFields/FilePreview.d.ts

@@ -13,5 +13,5 @@ interface Props {
     disabled?: boolean;
     avatarSize?: number;
 }
-declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & import("@mui/styles").StyledComponentProps<"active" | "root" | "rounded" | "backdrop" | "actionButton" | "noValue" | "avatarRoot">>;
+declare const _default: React.FC<Props>;
 export default _default;

package/dist/formFields/FilePreview.js

@@ -5,13 +5,12 @@
 import React from 'react';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
-import { createStyles, withStyles } from '@mui/styles';
+import { useStyles, withStyles } from 'tss-react/mui';
 import { darken } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import Avatar from '@mui/material/Avatar';
-import clsx from 'clsx';
-const styles = (theme) => createStyles({
+const styles = (theme) => ({
     root: {
         height: 'fit-content',
         width: 'fit-content',
@@ -62,10 +61,11 @@ const styles = (theme) => createStyles({
 });
 const FilePreview = ({ label, actions, data, classes, iconPlacementRow, disabled, avatarSize }) => {
     const size = avatarSize || 90;
+    const { cx } = useStyles();
     return (React.createElement(React.Fragment, null,
         label && (React.createElement(Typography, { variant: "caption", color: "textSecondary", component: "div", className: "pb-1" }, label)),
         data ? (React.createElement("div", { className: classes.root },
-            !disabled && (React.createElement("div", { className: clsx(classes.backdrop, avatarSize && classes.rounded, actions && classes.active) },
+            !disabled && (React.createElement("div", { className: cx(classes.backdrop, avatarSize && classes.rounded, actions && classes.active) },
                 React.createElement("div", { className: iconPlacementRow ? 'centeredFlex' : 'flex-column' }, actions
                     && actions.map((a, i) => (a.icon ? (React.createElement(Tooltip, { key: i, title: a.actionLabel, placement: iconPlacementRow ? 'top' : 'right' },
                         React.createElement(IconButton, { color: "inherit", size: "medium", onClick: a.onAction, disabled: a.disabled }, a.icon))) : (React.createElement(Button, { key: i, size: "small", variant: "outlined", color: "secondary", classes: {
@@ -74,4 +74,4 @@ const FilePreview = ({ label, actions, data, classes, iconPlacementRow, disabled
             avatarSize
                 ? (React.createElement(Avatar, { alt: "FilePreview", src: `data:image/png;base64, ${data}`, sx: { width: size, height: size }, classes: { root: classes.avatarRoot } })) : (React.createElement("img", { alt: "FilePreview", src: `data:image/png;base64, ${data}`, className: classes.avatarRoot })))) : (React.createElement(Typography, { variant: "body1", className: classes.noValue }, "No Value"))));
 };
-export default withStyles(styles)(FilePreview);
+export default withStyles(FilePreview, styles);

package/dist/formFields/FormRadioButtons.js

@@ -6,16 +6,16 @@
  *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
  */
 import React from 'react';
-import { FormControl, FormControlLabel, FormHelperText, InputLabel, Radio, RadioGroup, } from '@mui/material';
+import { FormControl, FormControlLabel, FormHelperText, InputLabel, Radio, RadioGroup } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import { makeAppStyles } from '../styles';
-const useStyles = makeAppStyles(theme => ({
+const useStyles = makeAppStyles()(theme => ({
     group: {
         margin: theme.spacing(1, 0)
     }
 }));
 function FormRadioButtons({ items, disabled, input: { value, onChange, name }, meta: { invalid, error }, labelPath = 'label', valuePath = 'value', color = 'primary', row, label, labelClass, labelAdornment, radioProps, radioGroupProps }) {
-    const classes = useStyles();
+    const { classes } = useStyles();
     return (React.createElement(FormControl, { fullWidth: true, component: "fieldset", error: invalid },
         label && (React.createElement(InputLabel, { shrink: true, htmlFor: `input-${name}`, className: labelClass },
             label,

package/dist/formFields/SelectCustomComponents.d.ts

@@ -1,5 +1,14 @@
 import React from 'react';
-export declare const selectStyles: (theme: any) => import("@mui/styles").StyleRules<{}, "label" | "error" | "inline" | "multiple" | "root" | "expandIcon" | "menuItem" | "inputWrapper" | "readonly" | "editIcon" | "bottomMargin" | "bottomPadding" | "topMargin" | "editable" | "valid" | "autoWidthSelect" | "emptySelect" | "validUnderline" | "menuItemActive" | "menuList" | "hasPopup" | "hasClear">;
+import { AppTheme } from '../model';
+export declare const useSelectStyles: (params: void, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"label" | "error" | "root" | "multiple" | "inline" | "expandIcon" | "menuItem" | "inputWrapper" | "readonly" | "editIcon" | "bottomMargin" | "bottomPadding" | "topMargin" | "editable" | "valid" | "autoWidthSelect" | "emptySelect" | "validUnderline" | "menuItemActive" | "menuList" | "hasPopup" | "hasClear", string>;
+    theme: AppTheme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
 export declare const ListRow: React.MemoExoticComponent<any>;
 export declare const ListboxComponent: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
 export declare const NoWrapOption: (content: any, data: any, search: any, parentProps: any) => React.JSX.Element;

package/dist/formFields/SelectCustomComponents.js

@@ -16,18 +16,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import useTheme from '@mui/styles/useTheme';
+import { useTheme } from '@mui/system';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import React from 'react';
 import ListSubheader from '@mui/material/ListSubheader';
 import InfiniteLoader from 'react-window-infinite-loader';
 import { areEqual, FixedSizeList as List } from 'react-window';
-import { createStyles } from '@mui/styles';
 import { green } from '@mui/material/colors';
-import clsx from 'clsx';
 import { ListItemButton } from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
-export const selectStyles = theme => createStyles({
+import { makeAppStyles } from '../styles';
+import { useStyles } from 'tss-react/mui';
+export const useSelectStyles = makeAppStyles()(theme => ({
     bottomMargin: {
         marginBottom: `${theme.spacing(1) + 1}`
     },
@@ -122,7 +122,7 @@ export const selectStyles = theme => createStyles({
             paddingRight: 0
         }
     },
-});
+}));
 export const ListRow = React.memo(({ data: { children, selectAdornment }, index, style }) => {
     const inlineStyle = Object.assign(Object.assign({}, style), { top: style.top + 8, paddingLeft: 0, paddingRight: 0, whiteSpace: 'nowrap' });
     return (React.createElement(ListItemButton, { style: inlineStyle }, (((selectAdornment === null || selectAdornment === void 0 ? void 0 : selectAdornment.position) === 'start' && index === 0)
@@ -137,6 +137,7 @@ const OuterElementType = React.forwardRef((props, ref) => {
 });
 export const ListboxComponent = React.forwardRef((props, ref) => {
     const { children, rowHeight, remoteRowCount, loadMoreRows, classes, loading, selectAdornment, fieldClasses } = props, other = __rest(props, ["children", "rowHeight", "remoteRowCount", "loadMoreRows", "classes", "loading", "selectAdornment", "fieldClasses"]);
+    const { cx } = useStyles();
     const itemData = { selectAdornment, children: React.Children.toArray(children) };
     const theme = useTheme();
     const smUp = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true });
@@ -158,7 +159,7 @@ export const ListboxComponent = React.forwardRef((props, ref) => {
     const isItemLoaded = index => index < (children.length + (selectAdornment ? 1 : 0));
     return (React.createElement("div", { ref: ref },
         React.createElement(OuterElementContext.Provider, { value: other },
-            React.createElement(InfiniteLoader, { isItemLoaded: isItemLoaded, itemCount: itemCount, loadMoreItems: loadMoreItems }, ({ onItemsRendered, ref }) => (React.createElement(List, { ref: ref, height: getHeight() + 2 * 8, width: "100%", className: clsx(classes.menuList, fieldClasses.selectMenu), itemData: itemData, outerElementType: OuterElementType, onItemsRendered: onItemsRendered, itemSize: itemSize, itemCount: itemCount }, ListRow))))));
+            React.createElement(InfiniteLoader, { isItemLoaded: isItemLoaded, itemCount: itemCount, loadMoreItems: loadMoreItems }, ({ onItemsRendered, ref }) => (React.createElement(List, { ref: ref, height: getHeight() + 2 * 8, width: "100%", className: cx(classes.menuList, fieldClasses.selectMenu), itemData: itemData, outerElementType: OuterElementType, onItemsRendered: onItemsRendered, itemSize: itemSize, itemCount: itemCount }, ListRow))))));
 });
 export const NoWrapOption = (content, data, search, parentProps) => (React.createElement("div", Object.assign({}, parentProps || {}),
     React.createElement(Tooltip, { title: content },

package/dist/formFields/Switch.d.ts

@@ -3,5 +3,5 @@
  * */
 import React from 'react';
 import { FieldInputProps, FormSwitchProps } from '../model';
-export declare const Switch: React.JSXElementConstructor<Omit<any, "classes"> & import("@mui/styles").StyledComponentProps<"icon" | "disabled" | "checked" | "default" | "bar" | "inline" | "root" | "focusVisible">>;
+export declare const Switch: (props: any) => React.JSX.Element;
 export declare function FormSwitch<InputProps extends FieldInputProps>({ input, color, disabled, stringValue, label, className, inline, onChangeHandler, onClick }: FormSwitchProps<InputProps>): React.JSX.Element;

package/dist/formFields/Switch.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useCallback } from 'react';
 import MuiSwitch from '@mui/material/Switch';
 import Typography from '@mui/material/Typography';
-import { createStyles, withStyles } from '@mui/styles';
-import clsx from 'clsx';
+import { useStyles, withStyles } from 'tss-react/mui';
 const getValue = value => {
     switch (value) {
         case 'false':
@@ -34,7 +33,7 @@ const getValue = value => {
             return value;
     }
 };
-const styles = theme => createStyles({
+const styles = theme => ({
     bar: {
         height: '22px',
         borderRadius: '12px',
@@ -86,16 +85,17 @@ const styles = theme => createStyles({
 });
 const SwitchBase = props => {
     const { classes, color = 'primary', inline, checked } = props, custom = __rest(props, ["classes", "color", "inline", "checked"]);
+    const { cx } = useStyles();
     return (React.createElement(MuiSwitch, Object.assign({ color: color, checked: Boolean(checked), classes: {
             track: classes.bar,
-            root: clsx(classes.root, { [classes.inline]: inline }),
+            root: cx(classes.root, { [classes.inline]: inline }),
             checked: classes.checked,
             thumb: classes.icon,
             switchBase: classes.default,
             disabled: classes.disabled
         } }, custom)));
 };
-export const Switch = withStyles(styles)(SwitchBase);
+export const Switch = withStyles(SwitchBase, styles);
 export function FormSwitch({ input, color, disabled, stringValue, label, className, inline, onChangeHandler, onClick }) {
     const onChange = useCallback((e, value) => {
         let checked = value;

package/dist/formFields/TextField.d.ts

@@ -2,5 +2,9 @@
 * Wrapper component for Material Text Field
 * */
 import * as React from 'react';
-export declare const TextField: React.JSXElementConstructor<Omit<any, "classes"> & import("@mui/styles").StyledComponentProps<"textField"> & object>;
+declare class TextInput extends React.Component<any, any> {
+    render(): React.JSX.Element;
+}
+export declare const TextField: typeof TextInput;
 export declare const FormTextField: (props: any) => React.JSX.Element;
+export {};

package/dist/formFields/TextField.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 * Wrapper component for Material Text Field
 * */
 import * as React from 'react';
-import { withStyles } from '@mui/styles';
+import { withStyles } from 'tss-react/mui';
 import MuiTextField from '@mui/material/TextField';
 const styles = theme => ({
     textField: {
@@ -34,7 +34,7 @@ class TextInput extends React.Component {
         return (React.createElement(MuiTextField, Object.assign({ name: props.id, onChange: e => onChange(e.target.value, id), margin: margin }, props, { variant: "standard" })));
     }
 }
-export const TextField = withStyles(styles)(TextInput);
+export const TextField = withStyles(TextInput, styles);
 // Form field text component creator
 export const FormTextField = props => {
     const { input, meta: { error, invalid, touched }, helperText, inputRef } = props, custom = __rest(props, ["input", "meta", "helperText", "inputRef"]);

package/dist/formFields/UneditableBase.js

@@ -5,14 +5,13 @@
  *
  *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
  */
-import clsx from 'clsx';
 import React, { useCallback } from 'react';
 import { FormControl, FormHelperText, Input, InputLabel } from '@mui/material';
 import InputAdornment from '@mui/material/InputAdornment';
 import { makeAppStyles } from '../styles';
 import { LinkAdornment } from './FieldAdornments';
 import { formatCurrency, openInternalLink } from '../utils';
-const useStyles = makeAppStyles({
+const useStyles = makeAppStyles()({
     rightAlignedLabel: {
         left: 'unset',
         right: 0,
@@ -21,12 +20,12 @@ const useStyles = makeAppStyles({
 });
 const UneditableBase = React.memo(props => {
     const { label, labelAdornment, placeholder, rightAligned, value, url, money, currencySymbol, className, format, multiline, error } = props;
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     const inputId = `input-${label.toLowerCase().replace(' ', '-')}`;
     const openLink = useCallback(() => {
         openInternalLink(url);
     }, [url]);
-    return (React.createElement(FormControl, { className: clsx(className, money && 'money'), error: Boolean(error), variant: "standard", fullWidth: true },
+    return (React.createElement(FormControl, { className: cx(className, money && 'money'), error: Boolean(error), variant: "standard", fullWidth: true },
         React.createElement(InputLabel, { shrink: true, classes: {
                 root: rightAligned ? classes.rightAlignedLabel : null
             }, htmlFor: inputId },

package/dist/layout/InfoPill.js

@@ -9,18 +9,18 @@ import { Chip } from '@mui/material';
 import React from 'react';
 import { alpha } from '@mui/material/styles';
 import { makeAppStyles } from '../styles';
-const useStyles = makeAppStyles(theme => ({
+const useStyles = makeAppStyles()((theme, { color }) => ({
     chip: {
         textTransform: 'uppercase',
         fontWeight: 600,
         fontSize: '12px',
         marginLeft: theme.spacing(1),
-        color: ({ color }) => theme.palette[color].light,
-        backgroundColor: ({ color }) => alpha(theme.palette[color].light, 0.15)
+        color: theme.palette[color].light,
+        backgroundColor: alpha(theme.palette[color].light, 0.15)
     }
 }));
 const InfoPill = ({ label, color = label === 'custom' ? 'primary' : 'success' }) => {
-    const classes = useStyles({ label, color });
+    const { classes } = useStyles({ label, color });
     return React.createElement(Chip, { className: classes.chip, label: label, size: "small" });
 };
 export default InfoPill;

package/dist/layout/resizable/ResizableWrapper.js

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { Resizable } from 're-resizable';
-import { withStyles, createStyles } from '@mui/styles';
+import { useStyles, withStyles } from 'tss-react/mui';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import clsx from 'clsx';
 const LIST_SIDE_BAR_DEFAULT_WIDTH = 280;
-const styles = (theme) => createStyles({
+const styles = (theme) => ({
     sideBar: {
         borderRight: `1px solid ${theme.palette.divider}`,
         display: 'flex',
@@ -35,8 +34,9 @@ const styles = (theme) => createStyles({
 });
 const ResizableWrapper = (props) => {
     const { classes, onResizeStop, onResize, sidebarWidth, minWidth, maxWidth, children, className, ignoreScreenWidth } = props;
-    return useMediaQuery('(min-width:992px)') || ignoreScreenWidth ? (React.createElement(Resizable, { size: { width: sidebarWidth, height: '100%' }, minWidth: minWidth || LIST_SIDE_BAR_DEFAULT_WIDTH, maxWidth: maxWidth, onResizeStop: onResizeStop, onResize: onResize, enable: { right: true }, className: clsx(classes.sideBar, className), handleClasses: { right: classes.resizeLine }, handleComponent: { right: React.createElement("div", { className: props.classes.line }) } },
+    const { cx } = useStyles();
+    return useMediaQuery('(min-width:992px)') || ignoreScreenWidth ? (React.createElement(Resizable, { size: { width: sidebarWidth, height: '100%' }, minWidth: minWidth || LIST_SIDE_BAR_DEFAULT_WIDTH, maxWidth: maxWidth, onResizeStop: onResizeStop, onResize: onResize, enable: { right: true }, className: cx(classes.sideBar, className), handleClasses: { right: classes.resizeLine }, handleComponent: { right: React.createElement("div", { className: props.classes.line }) } },
         React.createElement("div", { className: classes.sideBarWrapper }, children))) : (children);
 };
-const wrapped = withStyles(styles)(ResizableWrapper);
+const wrapped = withStyles(ResizableWrapper, styles);
 export default wrapped;

package/dist/markdownEditor/HtmlEditor.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';
 import 'ace-builds/webpack-resolver';
 import 'ace-builds/src-noconflict/mode-html';
 import 'ace-builds/src-noconflict/mode-textile';
@@ -11,5 +11,5 @@ interface Props {
     mode?: string;
     onChange?: (html: any) => void;
 }
-declare const _default: React.FunctionComponent<Props>;
+declare const _default: FunctionComponent<Props>;
 export default _default;

package/dist/markdownEditor/WysiwygEditor.js

@@ -22,7 +22,7 @@ import Image from '@ckeditor/ckeditor5-image/src/image';
 import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
 import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
 import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
-import { CKEditor } from '@ckeditor/ckeditor5-react/dist/ckeditor';
+import { CKEditor } from '@ckeditor/ckeditor5-react';
 import { createRoot } from 'react-dom/client';
 import CodeIcon from '@mui/icons-material/Code';
 const SourceEditingSwitch = () => (React.createElement("div", { className: "ck_source_edit_custom" },

package/dist/model/Theme.d.ts

@@ -1,5 +1,5 @@
-import { Theme, Palette, SimplePaletteColorOptions, TypeText } from '@mui/material';
 import { StringKeyObject } from '../model/CommomObjects';
+import { Palette, SimplePaletteColorOptions, Theme, TypeText } from '@mui/material/styles';
 declare enum ThemeValuesEnum {
     'default' = 0,
     'dark' = 1,
@@ -11,7 +11,7 @@ export declare const DefaultThemeKey: ThemeValues;
 export declare const DarkThemeKey: ThemeValues;
 export declare const MonochromeThemeKey: ThemeValues;
 export declare const HighcontrastThemeKey: ThemeValues;
-type ColorGetter = string | ((props: {}) => string);
+type ColorGetter = string;
 type TextExtended = TypeText & {
     primaryEditable: string;
     hint: string;

package/dist/styles/GlobalStylesProvider.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
-declare const _default: React.JSXElementConstructor<Omit<any, "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"@global">>;
-export default _default;
+export declare const GlobalStylesProvider: ({ children }: {
+    children: any;
+}) => React.JSX.Element;