@dartech/arsenal-ui 1.4.43 → 1.4.44

package/index.js

@@ -1,4 +1,4 @@
-import { styled, createTheme, responsiveFontSizes, ThemeProvider } from '@mui/material/styles';
+import { createTheme, responsiveFontSizes, styled, ThemeProvider } from '@mui/material/styles';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
@@ -44,16 +44,17 @@ import { toString, parse as parse$1 } from 'duration-fns';
 import InputMask from 'react-input-mask';
 import Pagination from '@mui/material/Pagination';
 import MuiTablePagination from '@mui/material/TablePagination';
-import { useGridApiContext, useGridSelector, gridPageSelector, gridPageCountSelector, gridRowCountSelector, gridPageSizeSelector, GridColumnMenuContainer, GridFilterMenuItem, DataGrid, GridActionsCellItem } from '@mui/x-data-grid';
+import { useGridApiContext, useGridSelector, gridPageSelector, gridPageCountSelector, gridRowCountSelector, gridPageSizeSelector, GridColumnMenuContainer, GridFilterMenuItem, GridActionsCellItem } from '@mui/x-data-grid';
+import { DataGrid } from '@mui/x-data-grid/DataGrid';
 import MuiTable from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
-import TableSortLabel from '@mui/material/TableSortLabel';
 import TableFooter from '@mui/material/TableFooter';
 import Backdrop from '@mui/material/Backdrop';
+import MuiTableSortLabel from '@mui/material/TableSortLabel';
 import Menu from '@mui/material/Menu';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import Paper from '@mui/material/Paper';
@@ -786,8 +787,8 @@ const useAutocomplete = ({
 };
 var useAutocomplete$1 = useAutocomplete;
 
-var img$4 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.22032 8.46991C4.36094 8.32946 4.55157 8.25057 4.75032 8.25057C4.94907 8.25057 5.13969 8.32946 5.28032 8.46991L12.0003 15.1899L18.7203 8.46991C18.789 8.39622 18.8718 8.33712 18.9638 8.29613C19.0558 8.25514 19.1551 8.23309 19.2558 8.23132C19.3565 8.22954 19.4565 8.24807 19.5499 8.28579C19.6433 8.32351 19.7281 8.37965 19.7994 8.45087C19.8706 8.52209 19.9267 8.60692 19.9644 8.70031C20.0022 8.7937 20.0207 8.89373 20.0189 8.99443C20.0171 9.09513 19.9951 9.19445 19.9541 9.28645C19.9131 9.37845 19.854 9.46125 19.7803 9.52991L12.5303 16.7799C12.3897 16.9204 12.1991 16.9992 12.0003 16.9992C11.8016 16.9992 11.6109 16.9204 11.4703 16.7799L4.22032 9.52991C4.07987 9.38928 4.00098 9.19866 4.00098 8.99991C4.00098 8.80116 4.07987 8.61054 4.22032 8.46991Z' fill='%238B8C9E'/%3e%3c/svg%3e";
-  var PopupIcon = img$4;
+var img$7 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.22032 8.46991C4.36094 8.32946 4.55157 8.25057 4.75032 8.25057C4.94907 8.25057 5.13969 8.32946 5.28032 8.46991L12.0003 15.1899L18.7203 8.46991C18.789 8.39622 18.8718 8.33712 18.9638 8.29613C19.0558 8.25514 19.1551 8.23309 19.2558 8.23132C19.3565 8.22954 19.4565 8.24807 19.5499 8.28579C19.6433 8.32351 19.7281 8.37965 19.7994 8.45087C19.8706 8.52209 19.9267 8.60692 19.9644 8.70031C20.0022 8.7937 20.0207 8.89373 20.0189 8.99443C20.0171 9.09513 19.9951 9.19445 19.9541 9.28645C19.9131 9.37845 19.854 9.46125 19.7803 9.52991L12.5303 16.7799C12.3897 16.9204 12.1991 16.9992 12.0003 16.9992C11.8016 16.9992 11.6109 16.9204 11.4703 16.7799L4.22032 9.52991C4.07987 9.38928 4.00098 9.19866 4.00098 8.99991C4.00098 8.80116 4.07987 8.61054 4.22032 8.46991Z' fill='%238B8C9E'/%3e%3c/svg%3e";
+  var PopupIcon = img$7;
 
 /**
  * Material UI `Autocomplete` controlled component. Used with react-hook-form
@@ -1512,209 +1513,639 @@ const JsonTypeCell = ({
 };
 var JsonTypeCell$1 = JsonTypeCell;
 
-const formatTableRowValue = ({
-  value,
-  canCopy,
-  copyValue,
-  shortId,
-  fullText,
-  textParams
-}) => {
-  const {
-    displayAs = 'text',
-    dateFormat = null,
-    statusVariant = null
-  } = textParams || {};
-  switch (displayAs) {
-    case 'boolean':
-      return value ? jsx(SvgIcon, Object.assign({
-        color: "primary",
-        fontSize: "small"
-      }, {
-        children: jsx("path", {
-          d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-        })
-      })) : jsx(SvgIcon, Object.assign({
-        fontSize: "small"
-      }, {
-        children: jsx("path", {
-          d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"
-        })
-      }));
-    case 'date':
-      return value ? dateFormat ? jsx(Box, {
-        children: dateFormat.map(formatString => jsx(Box, {
-          children: format(new Date(value), formatString)
-        }))
-      }) : jsxs(Box, {
-        children: [jsx(Box, {
-          children: format(new Date(value), 'dd.MM.yyyy')
-        }), jsx(Box, {
-          children: format(new Date(value), 'HH:mm:ss')
-        })]
-      }) : '';
-    case 'status':
-      return jsx(Status, {
-        text: value,
-        status: statusVariant ? statusVariant : 'default'
-      });
-    case 'json_text':
-      return jsx(JsonTypeCell$1, {
-        value: value,
-        textField: true
-      });
-    case 'json_code':
-      return jsx(JsonTypeCell$1, {
-        value: value,
-        copyButton: true
-      });
-    case 'array':
-      return jsx(Box, {
-        children: value.map((val, index) => jsx(Box, {
-          children: val
-        }, index))
-      });
-    case 'number':
-      return jsx(Box, Object.assign({
-        display: "flex",
-        justifyContent: "flex-end"
-      }, {
-        children: jsx(Box, {
-          children: value.toLocaleString('ru-Ru', {
-            minimumFractionDigits: 2
-          })
-        })
-      }));
-    case 'text':
-    default:
-      return value ? jsxs(Box, Object.assign({
-        display: "flex",
-        alignItems: "center",
-        width: "100%"
-      }, {
-        children: [shortId ? jsx(Tooltip, Object.assign({
-          title: value
-        }, {
-          children: jsx(Box, Object.assign({
-            mr: "auto"
-          }, {
-            children: value ? `${value.slice(0, 6)}...${value.slice(-6)}` : '...'
-          }))
-        })) : fullText ? jsx(Box, Object.assign({
-          sx: {
-            whiteSpace: 'normal'
-          }
-        }, {
-          children: typeof value === 'string' ? value : JSON.stringify(value)
-        })) : jsx(Tooltip, Object.assign({
-          title: value
-        }, {
-          children: jsx(Box, Object.assign({
-            className: "MuiDataGrid-cellContent"
-          }, {
-            children: typeof value === 'string' ? value : JSON.stringify(value)
-          }))
-        })), canCopy && jsx(CopyButton, {
-          copyText: copyValue ? typeof copyValue === 'string' ? copyValue : JSON.stringify(copyValue) : value
-        })]
-      })) : '';
-  }
-};
-
-const digitsOnly = new RegExp('^[-+]?[0-9]+$');
-const floatsOnly = new RegExp(/^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$/);
-const isExpression = (value, useRecursion) => {
-  if (typeof value === 'string') return /\$(?:S?JS)?(?:\{|\()/g.test(value);
-  if (useRecursion) {
-    if (Array.isArray(value)) {
-      for (const item of value) {
-        if (isExpression(item, useRecursion)) return true;
-      }
+const baseThemeOptions = {
+  spacing: 4,
+  palette: {
+    primary: {
+      main: '#E0613A',
+      dark: '#d9512e',
+      light: '#E0613A'
+    },
+    secondary: {
+      main: '#007994',
+      dark: '#262842',
+      light: '#cbe8ee'
+    },
+    text: {
+      disabled: '#A9A9B8'
+    },
+    success: {
+      main: '#2DB77B',
+      light: '#DBFCEE'
+    },
+    grey: {
+      700: '#101F2B'
     }
-    if (typeof value === 'object') {
-      for (const key in value) {
-        if (isExpression(value[key], useRecursion)) return true;
-      }
+  },
+  typography: {
+    fontSize: 14,
+    allVariants: {
+      fontFamily: ['Euclid', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(',')
+    },
+    h1: {
+      fontWeight: 400
+    },
+    h3: {
+      fontWeight: 500
+    },
+    h4: {
+      fontWeight: 500
     }
   }
-  return false;
-  // return typeof value === 'string' ? /\$(?:S?JS)?\(/g.test(value) : false;
-};
-
-const isDateType = propertyType => {
-  return propertyType === PropertyType.DATE || propertyType === PropertyType.DATE_TIME || propertyType === PropertyType.TIME;
 };
-const numberFormat = new Intl.NumberFormat('ru-RU', {
-  style: 'decimal'
-});
+var baseTheme = createTheme(baseThemeOptions);
 
-const isPropertyValueEmpty = value => {
-  if (value || value === 0 || value === false) {
-    return false;
-  }
-  return true;
-};
-const formatPropertyValue = (propertyType, value, params) => {
-  if (value === null || value === undefined) {
-    return null;
-  }
-  if (isExpression(value)) return value;
-  let parsedValue = value;
-  // console.log(value);
-  switch (propertyType) {
-    case PropertyType.BOOLEAN:
-      if (value) {
-        parsedValue = true;
-      } else if (!value && value !== null) {
-        parsedValue = false;
-      } else {
-        parsedValue = null;
+const inputThemeOptions = {
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          lineHeight: 1.429
+        }
       }
-      break;
-    case PropertyType.INTEGER:
-    case PropertyType.BIG_INTEGER:
-    case PropertyType.BIG_DECIMAL:
-    case PropertyType.FLOAT:
-    case PropertyType.LONG:
-    case PropertyType.DOUBLE:
-      parsedValue = Number(value);
-      break;
-    case PropertyType.DATE:
-    case PropertyType.DATE_TIME:
-    case PropertyType.TIME:
-      {
-        if (value) {
-          try {
-            const formatString = params.formatText.replace(/[Z,z,x]+/g, 'XX');
-            parsedValue = format(parse(value, formatString, new Date()), formatString);
-          } catch (e) {
-            console.error(e);
-          }
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          borderRadius: baseTheme.spacing(3),
+          minWidth: baseTheme.spacing(25),
+          background: baseTheme.palette.background.default
+          // height: 40
+        },
+
+        // sizeSmall: {
+        //   padding: baseTheme.spacing(1, 0, 1, 4),
+        // },
+        input: {
+          minWidth: baseTheme.spacing(25)
+          // padding: 0,
+          // height: '32px',
         }
-        break;
       }
-    case PropertyType.JSON:
-      try {
-        if (typeof value !== 'string') {
-          parsedValue = JSON.stringify(value);
+    },
+
+    MuiSelect: {
+      styleOverrides: {
+        nativeInput: {
+          padding: 0,
+          height: '32px'
         }
-        parsedValue = JSON.parse(parsedValue);
-      } catch (e) {
-        console.log(e);
-        parsedValue = null;
       }
-      break;
-    case PropertyType.ANY:
-      try {
-        if (typeof value === 'string') {
-          parsedValue = JSON.parse(parsedValue);
-        } else {
-          parsedValue = value;
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          minWidth: baseTheme.spacing(25)
         }
-        // parsedValue = JSON.parse(parsedValue as string);
-      } catch (e) {
-        // console.log(e);
-        parsedValue = value;
+      }
+    },
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          position: 'relative',
+          overflow: 'initial',
+          transform: 'none',
+          marginBottom: baseTheme.spacing(1),
+          fontWeight: 500,
+          fontSize: '14px',
+          lineHeight: '20px',
+          pointerEvents: 'auto'
+        }
+      }
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: baseTheme.spacing(3),
+          minWidth: baseTheme.spacing(25)
+        },
+        notchedOutline: {
+          top: 0,
+          '& legend': {
+            display: 'none',
+            transition: 'none'
+          }
+        }
+      }
+    },
+    MuiAutocomplete: {
+      styleOverrides: {
+        paper: {
+          marginTop: 8,
+          borderRadius: 12,
+          boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.04)'
+        },
+        listbox: {
+          '::-webkit-scrollbar': {
+            width: '6px',
+            backgroundColor: 'white'
+          },
+          '::-webkit-scrollbar-thumb': {
+            borderRadius: '10px',
+            backgroundColor: 'rgba(38, 40, 66, 0.24)'
+          }
+        }
+      }
+    },
+    MuiMenu: {
+      styleOverrides: {
+        list: {
+          paddingTop: 0,
+          paddingBottom: 0,
+          background: 'white',
+          '& li.Mui-selected': {
+            background: 'rgba(38, 40, 66, 0.08) !important'
+          }
+        }
+      }
+    },
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          marginTop: 8,
+          borderRadius: 12,
+          boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.04)'
+        }
+      }
+    },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          fontSize: 14,
+          fontWeight: 500
+        },
+        asterisk: {
+          color: '#D6331F',
+          '&$error': {
+            color: '#D6331F'
+          }
+        }
+      }
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          fontSize: 14
+        },
+        backgroundColor: baseTheme.palette.secondary.dark,
+        padding: baseTheme.spacing(2, 3),
+        borderRadius: 8,
+        textAlign: 'center'
+      }
+    }
+  }
+};
+var inputThemeOptions$1 = inputThemeOptions;
+
+const tableThemeOptions = {
+  components: {
+    MuiTableContainer: {
+      styleOverrides: {
+        root: {
+          borderRadius: baseTheme.spacing(3),
+          border: '1px solid rgba(38, 40, 66, 0.08)',
+          overflow: 'hidden'
+        }
+      }
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#F7F8FC',
+          height: 40
+        }
+      }
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          '&:hover': {
+            backgroundColor: '#F7F8FC!important'
+          },
+          height: 40
+        }
+      }
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          minHeight: 40,
+          padding: baseTheme.spacing(1, 2),
+          '&:first-of-type': {
+            paddingLeft: baseTheme.spacing(4)
+          }
+        },
+        head: {
+          maxHeight: '40px',
+          padding: baseTheme.spacing(2.75, 2),
+          color: '#6D6E85'
+        },
+        body: {
+          wordBreak: 'break-all'
+        }
+      }
+    },
+    MuiTableSortLabel: {
+      styleOverrides: {
+        root: {
+          maxHeight: '24px',
+          lineHeight: 1
+        }
+      }
+    }
+  }
+};
+var tableThemeOptions$1 = tableThemeOptions;
+
+const stepperThemeOptions = {
+  components: {
+    MuiStepIcon: {
+      styleOverrides: {
+        root: {
+          fontSize: '20px',
+          color: baseTheme.palette.text.disabled,
+          '&.Mui-active, &.Mui-completed': {
+            color: baseTheme.palette.secondary.main
+          }
+        }
+      }
+    }
+  }
+};
+var stepperThemeOptions$1 = stepperThemeOptions;
+
+const typographyThemeOptions = {
+  components: {
+    MuiTypography: {
+      styleOverrides: {
+        h1: {
+          [baseTheme.breakpoints.up('lg')]: {
+            fontSize: '1.5rem'
+          }
+        },
+        h3: {
+          fontSize: '1.25rem',
+          [baseTheme.breakpoints.up('lg')]: {
+            fontSize: '1.125rem'
+          }
+        },
+        h4: {
+          fontSize: '1rem',
+          [baseTheme.breakpoints.up('lg')]: {
+            fontSize: '1rem'
+          }
+        },
+        subtitle2: {
+          color: '#6D6E85'
+        }
+      }
+    }
+  }
+};
+var typographyThemeOptions$1 = typographyThemeOptions;
+
+const arsenalTheme = () => {
+  if (document) {
+    const url = "https://dev-qa-arsenal-frontend-fonts-bucket.s3.eu-north-1.amazonaws.com/fonts.css";
+    const fontsLink = document.querySelectorAll(`link[href="${url}"]`);
+    if (!fontsLink.length) {
+      const link = document.createElement('link');
+      link.href = url;
+      link.rel = 'stylesheet';
+      document.head.appendChild(link);
+    }
+  }
+  return responsiveFontSizes(createTheme(baseTheme, {
+    components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, inputThemeOptions$1.components), tableThemeOptions$1.components), stepperThemeOptions$1.components), typographyThemeOptions$1.components), {
+      MuiToolbar: {
+        styleOverrides: {
+          root: {
+            [baseTheme.breakpoints.up('sm')]: {
+              minHeight: '56px'
+            }
+          }
+        }
+      },
+      // MuiBackdrop: {
+      //   styleOverrides: {
+      //     root: {
+      //       backgroundColor: 'rgba(0, 0, 0, 0.2)',
+      //     },
+      //   },
+      // },
+      MuiAppBar: {
+        styleOverrides: {
+          root: {
+            boxShadow: 'none',
+            backgroundColor: '#007F9B'
+          }
+        }
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            borderRadius: baseTheme.spacing(2.5),
+            padding: baseTheme.spacing(2.5, 4),
+            lineHeight: '20px',
+            fontSize: '1rem',
+            textTransform: 'none'
+          },
+          outlined: {
+            color: '#262842',
+            backgroundColor: '#FFFFFF !important',
+            border: '1px solid rgba(38, 40, 66, 0.12)'
+          },
+          text: {
+            color: baseTheme.palette.secondary.dark
+          }
+        }
+      },
+      MuiDialog: {
+        styleOverrides: {
+          root: {
+            '& .MuiModal-backdrop': {
+              background: 'rgba(28, 55, 77, 0.5)',
+              backdropFilter: 'blur(2px)'
+            }
+          },
+          paper: {
+            borderRadius: baseTheme.spacing(3)
+          },
+          paperWidthXs: {
+            maxWidth: 500
+          }
+        }
+      },
+      // MuiPaper: {
+      //   styleOverrides: {
+      //     root: {
+      //       borderRadius: baseTheme.spacing(3),
+      //     },
+      //   },
+      // },
+      MuiDialogContent: {
+        styleOverrides: {
+          root: {
+            color: '#6D6E85'
+          }
+        }
+      },
+      MuiDialogActions: {
+        styleOverrides: {
+          root: {
+            background: '#F7F8FC',
+            borderTop: '1px solid rgba(38, 40, 66, 0.08)',
+            padding: baseTheme.spacing(3, 6)
+          }
+        }
+      },
+      MuiTabs: {
+        styleOverrides: {
+          root: {
+            minHeight: '38px'
+          },
+          indicator: {
+            backgroundColor: baseTheme.palette.secondary.main
+          }
+        }
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            fontSize: 14,
+            fontWeight: 500,
+            textTransform: 'none',
+            padding: '10px 12px',
+            lineHeight: '1.125rem',
+            minHeight: '38px',
+            color: '#8B8C9E',
+            '&.Mui-selected': {
+              color: baseTheme.palette.secondary.main
+            }
+          }
+        }
+      }
+    })
+  }));
+};
+const theme = arsenalTheme();
+
+const formatTableRowValue = ({
+  value,
+  canCopy,
+  copyValue,
+  shortId,
+  fullText: _fullText = false,
+  textParams
+}) => {
+  const {
+    displayAs = 'text',
+    tooltipLinkComponent = null,
+    dateFormat = null,
+    statusVariant = null
+  } = textParams || {};
+  switch (displayAs) {
+    case 'boolean':
+      return value ? jsx(SvgIcon, Object.assign({
+        color: "primary",
+        fontSize: "small"
+      }, {
+        children: jsx("path", {
+          d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+        })
+      })) : jsx(SvgIcon, Object.assign({
+        fontSize: "small"
+      }, {
+        children: jsx("path", {
+          d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"
+        })
+      }));
+    case 'date':
+      return value ? dateFormat ? jsx(Box, {
+        children: dateFormat.map((formatString, index) => jsx(Box, {
+          children: format(new Date(value), formatString)
+        }, index))
+      }) : jsxs(Box, {
+        children: [jsx(Box, {
+          children: format(new Date(value), 'dd.MM.yyyy')
+        }), jsx(Box, {
+          children: format(new Date(value), 'HH:mm:ss')
+        })]
+      }) : '';
+    case 'status':
+      return jsx(Status, {
+        text: value,
+        status: statusVariant ? statusVariant : 'default'
+      });
+    case 'json_text':
+      return jsx(JsonTypeCell$1, {
+        value: value,
+        textField: true
+      });
+    case 'json_code':
+      return jsx(JsonTypeCell$1, {
+        value: value,
+        copyButton: true
+      });
+    case 'array':
+      return jsx(Box, {
+        children: value.map((val, index) => jsx(Box, {
+          children: val
+        }, index))
+      });
+    case 'collapsed_array':
+      return value && jsx(Box, {
+        children: jsx(Tooltip, Object.assign({
+          arrow: true,
+          title: tooltipLinkComponent ? tooltipLinkComponent : value.map((val, index) => jsx(Box, Object.assign({
+            fontSize: 14,
+            style: {
+              paddingTop: theme.spacing(1)
+            }
+          }, {
+            children: val
+          }), index))
+        }, {
+          children: jsx(Box, {
+            children: value.length > 1 ? `${value[0]} (+${value.length - 1})` : value[0]
+          })
+        }))
+      });
+    case 'number':
+      return jsx(Box, Object.assign({
+        display: "flex",
+        justifyContent: "flex-end"
+      }, {
+        children: jsx(Box, {
+          children: value.toLocaleString('ru-Ru', {
+            minimumFractionDigits: 2
+          })
+        })
+      }));
+    case 'text':
+    default:
+      return value ? jsxs(Box, Object.assign({
+        display: "flex",
+        alignItems: "center",
+        width: "100%"
+      }, {
+        children: [shortId ? jsx(OverflowTip, {
+          children: jsx(Box, Object.assign({
+            mr: "auto"
+          }, {
+            children: value ? `${value.slice(0, 6)}...${value.slice(-6)}` : '...'
+          }))
+        }) : _fullText ? jsx(Box, Object.assign({
+          sx: {
+            whiteSpace: 'normal'
+          }
+        }, {
+          children: typeof value === 'string' ? value : JSON.stringify(value)
+        })) : jsx(Box, {
+          children: jsx(OverflowTip, {
+            children: typeof value === 'string' ? value : JSON.stringify(value)
+          })
+        }), canCopy && jsx(CopyButton, {
+          copyText: copyValue ? typeof copyValue === 'string' ? copyValue : JSON.stringify(copyValue) : value
+        })]
+      })) : '';
+  }
+};
+
+const digitsOnly = new RegExp('^[-+]?[0-9]+$');
+const floatsOnly = new RegExp(/^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$/);
+const isExpression = (value, useRecursion) => {
+  if (typeof value === 'string') return /\$(?:S?JS)?(?:\{|\()/g.test(value);
+  if (useRecursion) {
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        if (isExpression(item, useRecursion)) return true;
+      }
+    }
+    if (typeof value === 'object') {
+      for (const key in value) {
+        if (isExpression(value[key], useRecursion)) return true;
+      }
+    }
+  }
+  return false;
+  // return typeof value === 'string' ? /\$(?:S?JS)?\(/g.test(value) : false;
+};
+
+const isDateType = propertyType => {
+  return propertyType === PropertyType.DATE || propertyType === PropertyType.DATE_TIME || propertyType === PropertyType.TIME;
+};
+const numberFormat = new Intl.NumberFormat('ru-RU', {
+  style: 'decimal'
+});
+
+const isPropertyValueEmpty = value => {
+  if (value || value === 0 || value === false) {
+    return false;
+  }
+  return true;
+};
+const formatPropertyValue = (propertyType, value, params) => {
+  if (value === null || value === undefined) {
+    return null;
+  }
+  if (isExpression(value)) return value;
+  let parsedValue = value;
+  // console.log(value);
+  switch (propertyType) {
+    case PropertyType.BOOLEAN:
+      if (value) {
+        parsedValue = true;
+      } else if (!value && value !== null) {
+        parsedValue = false;
+      } else {
+        parsedValue = null;
+      }
+      break;
+    case PropertyType.INTEGER:
+    case PropertyType.BIG_INTEGER:
+    case PropertyType.BIG_DECIMAL:
+    case PropertyType.FLOAT:
+    case PropertyType.LONG:
+    case PropertyType.DOUBLE:
+      parsedValue = Number(value);
+      break;
+    case PropertyType.DATE:
+    case PropertyType.DATE_TIME:
+    case PropertyType.TIME:
+      {
+        if (value) {
+          try {
+            const formatString = params.formatText.replace(/[Z,z,x]+/g, 'XX');
+            parsedValue = format(parse(value, formatString, new Date()), formatString);
+          } catch (e) {
+            console.error(e);
+          }
+        }
+        break;
+      }
+    case PropertyType.JSON:
+      try {
+        if (typeof value !== 'string') {
+          parsedValue = JSON.stringify(value);
+        }
+        parsedValue = JSON.parse(parsedValue);
+      } catch (e) {
+        console.log(e);
+        parsedValue = null;
+      }
+      break;
+    case PropertyType.ANY:
+      try {
+        if (typeof value === 'string') {
+          parsedValue = JSON.parse(parsedValue);
+        } else {
+          parsedValue = value;
+        }
+        // parsedValue = JSON.parse(parsedValue as string);
+      } catch (e) {
+        // console.log(e);
+        parsedValue = value;
       }
       break;
     case PropertyType.ENTITY:
@@ -2212,8 +2643,8 @@ const ControlSwitch = _a => {
   });
 };
 
-var img$3 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M17.75 3C18.612 3 19.4386 3.34241 20.0481 3.9519C20.6576 4.5614 21 5.38805 21 6.25V17.75C21 18.612 20.6576 19.4386 20.0481 20.0481C19.4386 20.6576 18.612 21 17.75 21H6.25C5.38805 21 4.5614 20.6576 3.9519 20.0481C3.34241 19.4386 3 18.612 3 17.75V6.25C3 5.38805 3.34241 4.5614 3.9519 3.9519C4.5614 3.34241 5.38805 3 6.25 3H17.75ZM19.5 8.5H4.5V17.75C4.5 18.716 5.284 19.5 6.25 19.5H17.75C18.2141 19.5 18.6592 19.3156 18.9874 18.9874C19.3156 18.6592 19.5 18.2141 19.5 17.75V8.5ZM7.75 14.5C8.08152 14.5 8.39946 14.6317 8.63388 14.8661C8.8683 15.1005 9 15.4185 9 15.75C9 16.0815 8.8683 16.3995 8.63388 16.6339C8.39946 16.8683 8.08152 17 7.75 17C7.41848 17 7.10054 16.8683 6.86612 16.6339C6.6317 16.3995 6.5 16.0815 6.5 15.75C6.5 15.4185 6.6317 15.1005 6.86612 14.8661C7.10054 14.6317 7.41848 14.5 7.75 14.5ZM12 14.5C12.3315 14.5 12.6495 14.6317 12.8839 14.8661C13.1183 15.1005 13.25 15.4185 13.25 15.75C13.25 16.0815 13.1183 16.3995 12.8839 16.6339C12.6495 16.8683 12.3315 17 12 17C11.6685 17 11.3505 16.8683 11.1161 16.6339C10.8817 16.3995 10.75 16.0815 10.75 15.75C10.75 15.4185 10.8817 15.1005 11.1161 14.8661C11.3505 14.6317 11.6685 14.5 12 14.5ZM7.75 10.5C8.08152 10.5 8.39946 10.6317 8.63388 10.8661C8.8683 11.1005 9 11.4185 9 11.75C9 12.0815 8.8683 12.3995 8.63388 12.6339C8.39946 12.8683 8.08152 13 7.75 13C7.41848 13 7.10054 12.8683 6.86612 12.6339C6.6317 12.3995 6.5 12.0815 6.5 11.75C6.5 11.4185 6.6317 11.1005 6.86612 10.8661C7.10054 10.6317 7.41848 10.5 7.75 10.5ZM12 10.5C12.3315 10.5 12.6495 10.6317 12.8839 10.8661C13.1183 11.1005 13.25 11.4185 13.25 11.75C13.25 12.0815 13.1183 12.3995 12.8839 12.6339C12.6495 12.8683 12.3315 13 12 13C11.6685 13 11.3505 12.8683 11.1161 12.6339C10.8817 12.3995 10.75 12.0815 10.75 11.75C10.75 11.4185 10.8817 11.1005 11.1161 10.8661C11.3505 10.6317 11.6685 10.5 12 10.5ZM16.25 10.5C16.5815 10.5 16.8995 10.6317 17.1339 10.8661C17.3683 11.1005 17.5 11.4185 17.5 11.75C17.5 12.0815 17.3683 12.3995 17.1339 12.6339C16.8995 12.8683 16.5815 13 16.25 13C15.9185 13 15.6005 12.8683 15.3661 12.6339C15.1317 12.3995 15 12.0815 15 11.75C15 11.4185 15.1317 11.1005 15.3661 10.8661C15.6005 10.6317 15.9185 10.5 16.25 10.5ZM17.75 4.5H6.25C5.78587 4.5 5.34075 4.68437 5.01256 5.01256C4.68437 5.34075 4.5 5.78587 4.5 6.25V7H19.5V6.25C19.5 5.78587 19.3156 5.34075 18.9874 5.01256C18.6592 4.68437 18.2141 4.5 17.75 4.5Z' fill='%238B8C9E'/%3e%3c/svg%3e";
-  var DateIcon = img$3;
+var img$6 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M17.75 3C18.612 3 19.4386 3.34241 20.0481 3.9519C20.6576 4.5614 21 5.38805 21 6.25V17.75C21 18.612 20.6576 19.4386 20.0481 20.0481C19.4386 20.6576 18.612 21 17.75 21H6.25C5.38805 21 4.5614 20.6576 3.9519 20.0481C3.34241 19.4386 3 18.612 3 17.75V6.25C3 5.38805 3.34241 4.5614 3.9519 3.9519C4.5614 3.34241 5.38805 3 6.25 3H17.75ZM19.5 8.5H4.5V17.75C4.5 18.716 5.284 19.5 6.25 19.5H17.75C18.2141 19.5 18.6592 19.3156 18.9874 18.9874C19.3156 18.6592 19.5 18.2141 19.5 17.75V8.5ZM7.75 14.5C8.08152 14.5 8.39946 14.6317 8.63388 14.8661C8.8683 15.1005 9 15.4185 9 15.75C9 16.0815 8.8683 16.3995 8.63388 16.6339C8.39946 16.8683 8.08152 17 7.75 17C7.41848 17 7.10054 16.8683 6.86612 16.6339C6.6317 16.3995 6.5 16.0815 6.5 15.75C6.5 15.4185 6.6317 15.1005 6.86612 14.8661C7.10054 14.6317 7.41848 14.5 7.75 14.5ZM12 14.5C12.3315 14.5 12.6495 14.6317 12.8839 14.8661C13.1183 15.1005 13.25 15.4185 13.25 15.75C13.25 16.0815 13.1183 16.3995 12.8839 16.6339C12.6495 16.8683 12.3315 17 12 17C11.6685 17 11.3505 16.8683 11.1161 16.6339C10.8817 16.3995 10.75 16.0815 10.75 15.75C10.75 15.4185 10.8817 15.1005 11.1161 14.8661C11.3505 14.6317 11.6685 14.5 12 14.5ZM7.75 10.5C8.08152 10.5 8.39946 10.6317 8.63388 10.8661C8.8683 11.1005 9 11.4185 9 11.75C9 12.0815 8.8683 12.3995 8.63388 12.6339C8.39946 12.8683 8.08152 13 7.75 13C7.41848 13 7.10054 12.8683 6.86612 12.6339C6.6317 12.3995 6.5 12.0815 6.5 11.75C6.5 11.4185 6.6317 11.1005 6.86612 10.8661C7.10054 10.6317 7.41848 10.5 7.75 10.5ZM12 10.5C12.3315 10.5 12.6495 10.6317 12.8839 10.8661C13.1183 11.1005 13.25 11.4185 13.25 11.75C13.25 12.0815 13.1183 12.3995 12.8839 12.6339C12.6495 12.8683 12.3315 13 12 13C11.6685 13 11.3505 12.8683 11.1161 12.6339C10.8817 12.3995 10.75 12.0815 10.75 11.75C10.75 11.4185 10.8817 11.1005 11.1161 10.8661C11.3505 10.6317 11.6685 10.5 12 10.5ZM16.25 10.5C16.5815 10.5 16.8995 10.6317 17.1339 10.8661C17.3683 11.1005 17.5 11.4185 17.5 11.75C17.5 12.0815 17.3683 12.3995 17.1339 12.6339C16.8995 12.8683 16.5815 13 16.25 13C15.9185 13 15.6005 12.8683 15.3661 12.6339C15.1317 12.3995 15 12.0815 15 11.75C15 11.4185 15.1317 11.1005 15.3661 10.8661C15.6005 10.6317 15.9185 10.5 16.25 10.5ZM17.75 4.5H6.25C5.78587 4.5 5.34075 4.68437 5.01256 5.01256C4.68437 5.34075 4.5 5.78587 4.5 6.25V7H19.5V6.25C19.5 5.78587 19.3156 5.34075 18.9874 5.01256C18.6592 4.68437 18.2141 4.5 17.75 4.5Z' fill='%238B8C9E'/%3e%3c/svg%3e";
+  var DateIcon = img$6;
 
 const DateIconComponent$1 = () => {
   return jsx("img", {
@@ -2779,8 +3210,8 @@ const ControlPeriodInput = ({
   });
 };
 
-var img$2 = "data:image/svg+xml,%3csvg width='32' height='24' viewBox='0 0 32 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_6762_5474)'%3e%3crect width='32' height='24' rx='2' fill='white'/%3e%3cmask id='mask0_6762_5474' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='32' height='24'%3e%3crect width='32' height='24' rx='2' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask0_6762_5474)'%3e%3crect width='32' height='24' fill='%2330C6E0'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0001 16.8002C18.5249 16.8002 20.5716 14.6512 20.5716 12.0002C20.5716 9.34923 18.5249 7.2002 16.0001 7.2002C13.4754 7.2002 11.4287 9.34923 11.4287 12.0002C11.4287 14.6512 13.4754 16.8002 16.0001 16.8002Z' fill='%23FFCD4B'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.1352 20.5791L16.0001 17.6561L17.865 20.5791L18.3374 17.096L21.2255 18.8799L20.2118 15.5264L23.5511 15.818L21.252 13.2584L24.381 11.9998L21.252 10.7411L23.5511 8.1816L20.2118 8.47311L21.2255 5.11966L18.3374 6.90359L17.865 3.42041L16.0001 6.34344L14.1352 3.42041L13.6628 6.90359L10.7747 5.11966L11.7884 8.47311L8.44912 8.1816L10.7482 10.7411L7.61914 11.9998L10.7482 13.2584L8.44912 15.818L11.7884 15.5264L10.7747 18.8799L13.6628 17.096L14.1352 20.5791ZM21.3334 11.9998C21.3334 15.0926 18.9456 17.5998 16.0001 17.5998C13.0546 17.5998 10.6668 15.0926 10.6668 11.9998C10.6668 8.90698 13.0546 6.39978 16.0001 6.39978C18.9456 6.39978 21.3334 8.90698 21.3334 11.9998Z' fill='%23FFCD4B'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.52393 1.93343C1.52393 1.74934 1.67316 1.6001 1.85726 1.6001H2.7144C2.8985 1.6001 3.04774 1.74934 3.04774 1.93343V2.86676C3.04774 3.05086 2.8985 3.2001 2.7144 3.2001H1.85726C1.67316 3.2001 1.52393 3.05086 1.52393 2.86676V1.93343ZM1.52393 5.13343C1.52393 4.94934 1.67316 4.8001 1.85726 4.8001H2.7144C2.8985 4.8001 3.04774 4.94934 3.04774 5.13343V6.06676C3.04774 6.25086 2.8985 6.4001 2.7144 6.4001H1.85726C1.67316 6.4001 1.52393 6.25086 1.52393 6.06676V5.13343ZM1.85726 8.0001C1.67316 8.0001 1.52393 8.14934 1.52393 8.33343V9.26676C1.52393 9.45086 1.67316 9.6001 1.85726 9.6001H2.7144C2.8985 9.6001 3.04774 9.45086 3.04774 9.26676V8.33343C3.04774 8.14934 2.8985 8.0001 2.7144 8.0001H1.85726ZM1.52393 11.5334C1.52393 11.3493 1.67316 11.2001 1.85726 11.2001H2.7144C2.8985 11.2001 3.04774 11.3493 3.04774 11.5334V12.4668C3.04774 12.6509 2.8985 12.8001 2.7144 12.8001H1.85726C1.67316 12.8001 1.52393 12.6509 1.52393 12.4668V11.5334ZM1.85726 14.4001C1.67316 14.4001 1.52393 14.5493 1.52393 14.7334V15.6668C1.52393 15.8509 1.67316 16.0001 1.85726 16.0001H2.7144C2.8985 16.0001 3.04774 15.8509 3.04774 15.6668V14.7334C3.04774 14.5493 2.8985 14.4001 2.7144 14.4001H1.85726ZM1.52393 17.9334C1.52393 17.7493 1.67316 17.6001 1.85726 17.6001H2.7144C2.8985 17.6001 3.04774 17.7493 3.04774 17.9334V18.8668C3.04774 19.0509 2.8985 19.2001 2.7144 19.2001H1.85726C1.67316 19.2001 1.52393 19.0509 1.52393 18.8668V17.9334ZM1.85726 20.8001C1.67316 20.8001 1.52393 20.9493 1.52393 21.1334V22.0668C1.52393 22.2509 1.67316 22.4001 1.85726 22.4001H2.7144C2.8985 22.4001 3.04774 22.2509 3.04774 22.0668V21.1334C3.04774 20.9493 2.8985 20.8001 2.7144 20.8001H1.85726ZM3.04774 19.5334C3.04774 19.3493 3.19697 19.2001 3.38107 19.2001H4.23821C4.42231 19.2001 4.57154 19.3493 4.57154 19.5334V20.4668C4.57154 20.6509 4.42231 20.8001 4.23821 20.8001H3.38107C3.19697 20.8001 3.04774 20.6509 3.04774 20.4668V19.5334ZM3.38107 16.0001C3.19697 16.0001 3.04774 16.1493 3.04774 16.3334V17.2668C3.04774 17.4509 3.19697 17.6001 3.38107 17.6001H4.23821C4.42231 17.6001 4.57154 17.4509 4.57154 17.2668V16.3334C4.57154 16.1493 4.42231 16.0001 4.23821 16.0001H3.38107ZM3.04774 13.1334C3.04774 12.9493 3.19697 12.8001 3.38107 12.8001H4.23821C4.42231 12.8001 4.57154 12.9493 4.57154 13.1334V14.0668C4.57154 14.2509 4.42231 14.4001 4.23821 14.4001H3.38107C3.19697 14.4001 3.04774 14.2509 3.04774 14.0668V13.1334ZM3.38107 9.6001C3.19697 9.6001 3.04774 9.74934 3.04774 9.93343V10.8668C3.04774 11.0509 3.19697 11.2001 3.38107 11.2001H4.23821C4.42231 11.2001 4.57154 11.0509 4.57154 10.8668V9.93343C4.57154 9.74934 4.42231 9.6001 4.23821 9.6001H3.38107ZM3.04774 6.73343C3.04774 6.54934 3.19697 6.4001 3.38107 6.4001H4.23821C4.42231 6.4001 4.57154 6.54934 4.57154 6.73343V7.66676C4.57154 7.85086 4.42231 8.0001 4.23821 8.0001H3.38107C3.19697 8.0001 3.04774 7.85086 3.04774 7.66676V6.73343ZM3.38107 3.2001C3.19697 3.2001 3.04774 3.34934 3.04774 3.53343V4.46676C3.04774 4.65086 3.19697 4.8001 3.38107 4.8001H4.23821C4.42231 4.8001 4.57154 4.65086 4.57154 4.46676V3.53343C4.57154 3.34934 4.42231 3.2001 4.23821 3.2001H3.38107Z' fill='%23FFCD4B'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_6762_5474'%3e%3crect width='32' height='24' rx='4' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
-  var FlagKz = img$2;
+var img$5 = "data:image/svg+xml,%3csvg width='32' height='24' viewBox='0 0 32 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_6762_5474)'%3e%3crect width='32' height='24' rx='2' fill='white'/%3e%3cmask id='mask0_6762_5474' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='32' height='24'%3e%3crect width='32' height='24' rx='2' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask0_6762_5474)'%3e%3crect width='32' height='24' fill='%2330C6E0'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.0001 16.8002C18.5249 16.8002 20.5716 14.6512 20.5716 12.0002C20.5716 9.34923 18.5249 7.2002 16.0001 7.2002C13.4754 7.2002 11.4287 9.34923 11.4287 12.0002C11.4287 14.6512 13.4754 16.8002 16.0001 16.8002Z' fill='%23FFCD4B'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.1352 20.5791L16.0001 17.6561L17.865 20.5791L18.3374 17.096L21.2255 18.8799L20.2118 15.5264L23.5511 15.818L21.252 13.2584L24.381 11.9998L21.252 10.7411L23.5511 8.1816L20.2118 8.47311L21.2255 5.11966L18.3374 6.90359L17.865 3.42041L16.0001 6.34344L14.1352 3.42041L13.6628 6.90359L10.7747 5.11966L11.7884 8.47311L8.44912 8.1816L10.7482 10.7411L7.61914 11.9998L10.7482 13.2584L8.44912 15.818L11.7884 15.5264L10.7747 18.8799L13.6628 17.096L14.1352 20.5791ZM21.3334 11.9998C21.3334 15.0926 18.9456 17.5998 16.0001 17.5998C13.0546 17.5998 10.6668 15.0926 10.6668 11.9998C10.6668 8.90698 13.0546 6.39978 16.0001 6.39978C18.9456 6.39978 21.3334 8.90698 21.3334 11.9998Z' fill='%23FFCD4B'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.52393 1.93343C1.52393 1.74934 1.67316 1.6001 1.85726 1.6001H2.7144C2.8985 1.6001 3.04774 1.74934 3.04774 1.93343V2.86676C3.04774 3.05086 2.8985 3.2001 2.7144 3.2001H1.85726C1.67316 3.2001 1.52393 3.05086 1.52393 2.86676V1.93343ZM1.52393 5.13343C1.52393 4.94934 1.67316 4.8001 1.85726 4.8001H2.7144C2.8985 4.8001 3.04774 4.94934 3.04774 5.13343V6.06676C3.04774 6.25086 2.8985 6.4001 2.7144 6.4001H1.85726C1.67316 6.4001 1.52393 6.25086 1.52393 6.06676V5.13343ZM1.85726 8.0001C1.67316 8.0001 1.52393 8.14934 1.52393 8.33343V9.26676C1.52393 9.45086 1.67316 9.6001 1.85726 9.6001H2.7144C2.8985 9.6001 3.04774 9.45086 3.04774 9.26676V8.33343C3.04774 8.14934 2.8985 8.0001 2.7144 8.0001H1.85726ZM1.52393 11.5334C1.52393 11.3493 1.67316 11.2001 1.85726 11.2001H2.7144C2.8985 11.2001 3.04774 11.3493 3.04774 11.5334V12.4668C3.04774 12.6509 2.8985 12.8001 2.7144 12.8001H1.85726C1.67316 12.8001 1.52393 12.6509 1.52393 12.4668V11.5334ZM1.85726 14.4001C1.67316 14.4001 1.52393 14.5493 1.52393 14.7334V15.6668C1.52393 15.8509 1.67316 16.0001 1.85726 16.0001H2.7144C2.8985 16.0001 3.04774 15.8509 3.04774 15.6668V14.7334C3.04774 14.5493 2.8985 14.4001 2.7144 14.4001H1.85726ZM1.52393 17.9334C1.52393 17.7493 1.67316 17.6001 1.85726 17.6001H2.7144C2.8985 17.6001 3.04774 17.7493 3.04774 17.9334V18.8668C3.04774 19.0509 2.8985 19.2001 2.7144 19.2001H1.85726C1.67316 19.2001 1.52393 19.0509 1.52393 18.8668V17.9334ZM1.85726 20.8001C1.67316 20.8001 1.52393 20.9493 1.52393 21.1334V22.0668C1.52393 22.2509 1.67316 22.4001 1.85726 22.4001H2.7144C2.8985 22.4001 3.04774 22.2509 3.04774 22.0668V21.1334C3.04774 20.9493 2.8985 20.8001 2.7144 20.8001H1.85726ZM3.04774 19.5334C3.04774 19.3493 3.19697 19.2001 3.38107 19.2001H4.23821C4.42231 19.2001 4.57154 19.3493 4.57154 19.5334V20.4668C4.57154 20.6509 4.42231 20.8001 4.23821 20.8001H3.38107C3.19697 20.8001 3.04774 20.6509 3.04774 20.4668V19.5334ZM3.38107 16.0001C3.19697 16.0001 3.04774 16.1493 3.04774 16.3334V17.2668C3.04774 17.4509 3.19697 17.6001 3.38107 17.6001H4.23821C4.42231 17.6001 4.57154 17.4509 4.57154 17.2668V16.3334C4.57154 16.1493 4.42231 16.0001 4.23821 16.0001H3.38107ZM3.04774 13.1334C3.04774 12.9493 3.19697 12.8001 3.38107 12.8001H4.23821C4.42231 12.8001 4.57154 12.9493 4.57154 13.1334V14.0668C4.57154 14.2509 4.42231 14.4001 4.23821 14.4001H3.38107C3.19697 14.4001 3.04774 14.2509 3.04774 14.0668V13.1334ZM3.38107 9.6001C3.19697 9.6001 3.04774 9.74934 3.04774 9.93343V10.8668C3.04774 11.0509 3.19697 11.2001 3.38107 11.2001H4.23821C4.42231 11.2001 4.57154 11.0509 4.57154 10.8668V9.93343C4.57154 9.74934 4.42231 9.6001 4.23821 9.6001H3.38107ZM3.04774 6.73343C3.04774 6.54934 3.19697 6.4001 3.38107 6.4001H4.23821C4.42231 6.4001 4.57154 6.54934 4.57154 6.73343V7.66676C4.57154 7.85086 4.42231 8.0001 4.23821 8.0001H3.38107C3.19697 8.0001 3.04774 7.85086 3.04774 7.66676V6.73343ZM3.38107 3.2001C3.19697 3.2001 3.04774 3.34934 3.04774 3.53343V4.46676C3.04774 4.65086 3.19697 4.8001 3.38107 4.8001H4.23821C4.42231 4.8001 4.57154 4.65086 4.57154 4.46676V3.53343C4.57154 3.34934 4.42231 3.2001 4.23821 3.2001H3.38107Z' fill='%23FFCD4B'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_6762_5474'%3e%3crect width='32' height='24' rx='4' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+  var FlagKz = img$5;
 
 const ControlPhoneInput = _a => {
   var {
@@ -2859,6 +3290,13 @@ const TablePagination = () => {
   const pageSize = useGridSelector(apiRef, gridPageSizeSelector);
   const onPageChange = value => apiRef.current.setPage(value);
   const onRowsPerPageChange = event => apiRef.current.setPageSize(parseInt(event.target.value, 10));
+  const labelDisplayedRows = ({
+    from,
+    to,
+    count
+  }) => {
+    return `${from}–${to} из ${count !== -1 ? count : `более ${to}`}`;
+  };
   return jsxs(Box, Object.assign({
     px: 2,
     display: "flex",
@@ -2872,6 +3310,8 @@ const TablePagination = () => {
       rowsPerPageOptions: [10, 20, 50, 100],
       onPageChange: (event, value) => onPageChange(value),
       onRowsPerPageChange: onRowsPerPageChange,
+      labelRowsPerPage: "\u0421\u0442\u0440\u043E\u043A \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435",
+      labelDisplayedRows: labelDisplayedRows,
       ActionsComponent: undefined
     }), jsx(Pagination, {
       count: pageCount,
@@ -3002,24 +3442,54 @@ const usePagination = initialPageSize => {
 };
 var usePagination$1 = usePagination;
 
-const styles = {
+const StyledDataGrid = styled(DataGrid)(({
+  theme
+}) => ({
+  borderRadius: theme.spacing(3),
   width: '100%',
-  '& .MuiDataGrid-virtualScrollerContent': {
-    height: 'auto !important',
-    minHeight: '56px !important'
+  color: theme.palette.mode === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.85)',
+  '& .MuiDataGrid-columnsContainer': {
+    borderRadius: theme.spacing(3),
+    border: '1px solid rgba(38, 40, 66, 0.08)'
   },
-  '& .MuiDataGrid-virtualScrollerRenderZone': {
-    position: 'static'
+  '& .MuiDataGrid-columnHeaders': {
+    backgroundColor: '#F7F8FC',
+    borderTopLeftRadius: theme.spacing(3),
+    borderTopRightRadius: theme.spacing(3)
+  },
+  '& .MuiDataGrid-columnHeader, .MuiDataGrid-cell': {
+    maxHeight: '40px!important',
+    padding: theme.spacing(2.75, 2),
+    color: '#6D6E85',
+    '&.Sorted': {
+      color: '#262842'
+    },
+    '&:first-of-type': {
+      paddingLeft: theme.spacing(4)
+    },
+    borderRight: 0,
+    borderLeft: 0
+  },
+  '& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell': {
+    maxHeight: '40px!important',
+    padding: theme.spacing(1, 2),
+    '&:first-of-type': {
+      paddingLeft: theme.spacing(4)
+    }
   },
-  '& .MuiDataGrid-renderingZone': {
-    maxHeight: 'none !important'
+  '& .MuiDataGrid-row': {
+    '&:hover': {
+      backgroundColor: '#F7F8FC!important'
+    }
   },
   '& .MuiDataGrid-cell': {
-    maxHeight: 'none !important',
-    lineHeight: 'unset !important',
-    // whiteSpace: 'normal !important',
+    color: theme.palette.mode === 'light' ? 'rgba(0,0,0,.85)' : 'rgba(255,255,255,0.65)',
+    '&:focus': {
+      border: 0
+    },
     textOverflow: 'ellipsis',
     wordBreak: 'break-all',
+    overflow: 'hidden',
     '& .MuiDataGrid-actionsCell': {
       width: '100%',
       gridGap: '4px',
@@ -3029,29 +3499,68 @@ const styles = {
       }
     }
   },
-  '& .MuiDataGrid-row': {
-    maxHeight: 'none !important'
+  '& .MuiPaginationItem-root': {
+    borderRadius: 0
+  },
+  '& .MuiDataGrid-virtualScrollerRenderZone': {
+    position: 'static'
+  },
+  '& .MuiDataGrid-cell:focus-within, & .MuiDataGrid-cell:focus': {
+    outline: 'none !important'
+  },
+  '& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-columnHeader:focus': {
+    outline: 'none !important'
+  },
+  '& .MuiTablePagination-actions': {
+    display: 'none !important'
+  },
+  '& .MuiDataGrid-iconButtonContainer': {
+    '& img': {
+      visibility: 'visible !important',
+      opacity: '0.5!important'
+    }
   },
   '& .Sorted': {
     '& .MuiDataGrid-iconButtonContainer': {
-      visibility: 'visible',
-      width: 'auto',
-      '& svg': {
-        opacity: '1 !important'
-      }
-    },
-    '&.--desc': {
-      '& svg': {
-        transform: 'rotate(180deg)'
+      '& img': {
+        visibility: 'visible !important',
+        opacity: '1!important'
       }
     }
   }
-};
+}));
+
+var img$4 = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.47341 10.4087C3.3698 10.2747 3.32108 10.1063 3.33715 9.9377C3.35321 9.76909 3.43285 9.61291 3.55989 9.50088C3.68693 9.38886 3.85185 9.3294 4.02115 9.33457C4.19045 9.33974 4.35144 9.40915 4.47141 9.52872L8.00008 13.0574L11.5287 9.52872L11.5914 9.47338C11.7254 9.36978 11.8938 9.32106 12.0624 9.33712C12.231 9.35318 12.3872 9.43282 12.4992 9.55987C12.6113 9.68691 12.6707 9.85183 12.6656 10.0211C12.6604 10.1904 12.591 10.3514 12.4714 10.4714L8.47141 14.4714L8.40874 14.5267C8.28047 14.6262 8.12031 14.6755 7.95829 14.6653C7.79627 14.6551 7.64354 14.5862 7.52874 14.4714L3.52874 10.4714L3.47341 10.4087ZM12.5267 5.59138C12.6304 5.72538 12.6791 5.89379 12.663 6.0624C12.6469 6.23102 12.5673 6.3872 12.4403 6.49922C12.3132 6.61124 12.1483 6.67071 11.979 6.66554C11.8097 6.66037 11.6487 6.59095 11.5287 6.47138L8.00008 2.94272L4.47141 6.47138L4.40874 6.52672C4.27475 6.63032 4.10634 6.67905 3.93773 6.66298C3.76911 6.64692 3.61293 6.56728 3.50091 6.44024C3.38889 6.31319 3.32942 6.14827 3.33459 5.97897C3.33976 5.80967 3.40918 5.64869 3.52874 5.52872L7.52874 1.52872L7.59141 1.47338C7.71968 1.37388 7.87985 1.3246 8.04187 1.33479C8.20388 1.34498 8.35662 1.41393 8.47141 1.52872L12.4714 5.52872L12.5267 5.59138Z' fill='%23262842'/%3e%3c/svg%3e";
+  var SortIcon = img$4;
+
+var img$3 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg transform='matrix(1%2c 0%2c 0%2c 1%2c 0.05728%2c 0.935561)'%3e %3cpath d='M 3.473 9.409 C 3.37 9.275 3.321 9.106 3.337 8.938 C 3.353 8.769 3.433 8.613 3.56 8.501 C 3.687 8.389 3.852 8.329 4.021 8.335 C 4.19 8.34 4.351 8.409 4.471 8.529 L 8 12.057 L 11.529 8.529 L 11.591 8.473 C 11.725 8.37 11.894 8.321 12.062 8.337 C 12.231 8.353 12.387 8.433 12.499 8.56 C 12.611 8.687 12.671 8.852 12.666 9.021 C 12.66 9.19 12.591 9.351 12.471 9.471 L 8.471 13.471 L 8.409 13.527 C 8.28 13.626 8.12 13.676 7.958 13.665 C 7.796 13.655 7.644 13.586 7.529 13.471 L 3.529 9.471 L 3.473 9.409 Z' fill='%23262842' style='fill-opacity: 0.6%3b'/%3e %3cpath d='M 12.472 4.636 C 12.575 4.77 12.624 4.939 12.608 5.107 C 12.592 5.276 12.512 5.432 12.385 5.544 C 12.258 5.656 12.093 5.716 11.924 5.71 C 11.755 5.705 11.594 5.636 11.474 5.516 L 7.945 1.988 L 4.416 5.516 L 4.354 5.572 C 4.22 5.675 4.051 5.724 3.883 5.708 C 3.714 5.692 3.558 5.612 3.446 5.485 C 3.334 5.358 3.274 5.193 3.28 5.024 C 3.285 4.855 3.354 4.694 3.474 4.574 L 7.474 0.574 L 7.536 0.518 C 7.665 0.419 7.825 0.37 7.987 0.38 C 8.149 0.39 8.302 0.459 8.416 0.574 L 12.416 4.574 L 12.472 4.636 Z' fill='%23262842' style='fill-opacity: 1%3b'/%3e %3c/g%3e%3c/svg%3e";
+  var SortAscIcon = img$3;
+
+var img$2 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg transform='matrix(1%2c 0%2c 0%2c 1%2c 0.05728%2c 0.935561)'%3e %3cpath d='M 3.473 9.409 C 3.37 9.275 3.321 9.106 3.337 8.938 C 3.353 8.769 3.433 8.613 3.56 8.501 C 3.687 8.389 3.852 8.329 4.021 8.335 C 4.19 8.34 4.351 8.409 4.471 8.529 L 8 12.057 L 11.529 8.529 L 11.591 8.473 C 11.725 8.37 11.894 8.321 12.062 8.337 C 12.231 8.353 12.387 8.433 12.499 8.56 C 12.611 8.687 12.671 8.852 12.666 9.021 C 12.66 9.19 12.591 9.351 12.471 9.471 L 8.471 13.471 L 8.409 13.527 C 8.28 13.626 8.12 13.676 7.958 13.665 C 7.796 13.655 7.644 13.586 7.529 13.471 L 3.529 9.471 L 3.473 9.409 Z' fill='%23262842' style='fill-opacity: 1%3b'/%3e %3cpath d='M 12.472 4.636 C 12.575 4.77 12.624 4.939 12.608 5.107 C 12.592 5.276 12.512 5.432 12.385 5.544 C 12.258 5.656 12.093 5.716 11.924 5.71 C 11.755 5.705 11.594 5.636 11.474 5.516 L 7.945 1.988 L 4.416 5.516 L 4.354 5.572 C 4.22 5.675 4.051 5.724 3.883 5.708 C 3.714 5.692 3.558 5.612 3.446 5.485 C 3.334 5.358 3.274 5.193 3.28 5.024 C 3.285 4.855 3.354 4.694 3.474 4.574 L 7.474 0.574 L 7.536 0.518 C 7.665 0.419 7.825 0.37 7.987 0.38 C 8.149 0.39 8.302 0.459 8.416 0.574 L 12.416 4.574 L 12.472 4.636 Z' fill='%23262842' style='fill-opacity: 0.6%3b'/%3e %3c/g%3e%3c/svg%3e";
+  var SortDescIcon = img$2;
 
 /**
  * Main data display component. MUI DataGrid used
  * @category Common UI components
  */
+const SortIconComponent$1 = () => {
+  return jsx("img", {
+    src: SortIcon,
+    alt: ""
+  });
+};
+const SortAscIconComponent$1 = () => {
+  return jsx("img", {
+    src: SortAscIcon,
+    alt: ""
+  });
+};
+const SortDescIconComponent$1 = () => {
+  return jsx("img", {
+    src: SortDescIcon,
+    alt: ""
+  });
+};
 const Table = ({
   columns,
   rows,
@@ -3085,11 +3594,24 @@ const Table = ({
     pageSize: _mode === 'server' ? size : _pagination ? pageSize : rowCount,
     onPageSizeChange: _mode === 'server' ? onSizeChange : handlePageSizeChange,
     components: {
-      Pagination: TablePagination$1
+      BaseTooltip: Tooltip,
+      Pagination: TablePagination$1,
+      ColumnUnsortedIcon: _a => {
+        __rest(_a, ["sortingOrder"]);
+        return jsx(SortIconComponent$1, {});
+      },
+      ColumnSortedDescendingIcon: _a => {
+        __rest(_a, ["sortingOrder"]);
+        return jsx(SortDescIconComponent$1, {});
+      },
+      ColumnSortedAscendingIcon: _a => {
+        __rest(_a, ["sortingOrder"]);
+        return jsx(SortAscIconComponent$1, {});
+      }
     }
   };
   if (_mode === 'server') {
-    tableProps['sortModel'] = [];
+    // tableProps['sortModel'] = [];
     tableProps['onColumnHeaderClick'] = onColumnHeaderClick;
     tableProps['page'] = page;
     tableProps['onPageChange'] = onPageChange;
@@ -3098,9 +3620,10 @@ const Table = ({
   return jsx(Box, Object.assign({
     mt: disableMargin ? 0 : 2
   }, {
-    children: jsx(DataGrid, Object.assign({
-      sx: styles,
+    children: jsx(StyledDataGrid, Object.assign({
       autoHeight: true,
+      headerHeight: 40,
+      rowHeight: 40,
       hideFooterPagination: !_pagination,
       hideFooter: !_pagination,
       disableSelectionOnClick: true,
@@ -3108,6 +3631,7 @@ const Table = ({
       showCellRightBorder: true,
       loading: loading,
       rows: rows,
+      disableColumnMenu: true,
       columns: getSortedColumns(columns),
       rowCount: rowCount,
       rowsPerPageOptions: [10, 20, 50, 100],
@@ -3207,7 +3731,7 @@ const useTableSorting = () => {
   const sortParams = useMemo(() => searchParams.getAll('sort').map(param => param.split(',')), [searchParams]);
   const onSortChanged = useCallback(sortKey => {
     setSearchParams(params => {
-      console.log(sortKey, params.get('page'));
+      // console.log(sortKey, params.get('page'));
       params.delete('sort');
       let keyFound = false;
       sortParams.forEach(([key, value]) => {
@@ -3238,6 +3762,33 @@ const useTableSorting = () => {
 };
 var useTableSorting$1 = useTableSorting;
 
+const TableSortLabel = styled(MuiTableSortLabel)(({
+  active
+}) => ({
+  '.MuiSvgIcon-root': {
+    opacity: active ? 1 : 0.5,
+    marginTop: '4%'
+  }
+}));
+
+const SortIconComponent = () => {
+  return jsx("img", {
+    src: SortIcon,
+    alt: ""
+  });
+};
+const SortAscIconComponent = () => {
+  return jsx("img", {
+    src: SortAscIcon,
+    alt: ""
+  });
+};
+const SortDescIconComponent = () => {
+  return jsx("img", {
+    src: SortDescIcon,
+    alt: ""
+  });
+};
 function TableInner({
   columns = [],
   rows = [],
@@ -3247,7 +3798,8 @@ function TableInner({
   loading = false,
   onRowClick,
   emptyDataText,
-  verticalAlign = 'middle'
+  verticalAlign = 'middle',
+  labelRowsPerPage
 }, ref) {
   const {
     page,
@@ -3259,99 +3811,127 @@ function TableInner({
     onSortChanged,
     getColumnSorting
   } = useTableSorting$1();
-  return jsxs(TableContainer, Object.assign({
+  const labelDisplayedRows = ({
+    from,
+    to,
+    count
+  }) => {
+    return `${from}–${to} из ${count !== -1 ? count : `более ${to}`}`;
+  };
+  return jsx(Box, Object.assign({
     sx: {
-      position: 'relative',
-      overflow: 'visible'
+      overflow: 'auto'
     }
   }, {
-    children: [jsx(Backdrop, Object.assign({
-      open: loading,
+    children: jsxs(TableContainer, Object.assign({
       sx: {
-        position: 'absolute',
-        top: 0,
-        left: 0
+        width: '100%',
+        display: 'table',
+        tableLayout: 'fixed'
       }
     }, {
-      children: jsx(Loader, {})
-    })), jsxs(MuiTable, Object.assign({
-      ref: ref
-    }, {
-      children: [jsx(TableHead, {
-        children: jsx(TableRow, {
-          children: columns.map((column, index) => {
-            const sortDirection = column.sortKey ? getColumnSorting(column.sortKey) : false;
-            return jsx(TableCell, Object.assign({
+      children: [jsx(Backdrop, Object.assign({
+        open: loading,
+        sx: {
+          position: 'absolute',
+          top: 0,
+          left: 0
+        }
+      }, {
+        children: jsx(Loader, {})
+      })), jsxs(MuiTable, Object.assign({
+        ref: ref
+      }, {
+        children: [jsx(TableHead, {
+          children: jsx(TableRow, {
+            children: columns.map((column, index) => {
+              const sortDirection = column.sortKey ? getColumnSorting(column.sortKey) : false;
+              return jsx(TableCell, Object.assign({
+                align: column.align ? column.align : 'left',
+                sortDirection: sortDirection,
+                sx: {
+                  width: column.width ? `${column.width}%` : 'unset'
+                }
+              }, {
+                children: jsx(TableSortLabel, Object.assign({
+                  active: !!sortDirection,
+                  hideSortIcon: !column.sortKey,
+                  direction: sortDirection || 'asc',
+                  IconComponent: sortDirection === 'asc' ? SortAscIconComponent : sortDirection === 'desc' ? SortDescIconComponent : SortIconComponent,
+                  onClick: () => column.sortKey ? onSortChanged(column.sortKey) : {}
+                }, {
+                  children: column.label
+                }))
+              }), index);
+            })
+          })
+        }), jsx(TableBody, {
+          children: rows.length ? rows.map((row, index) => jsx(TableRow, Object.assign({
+            hover: true,
+            onClick: onRowClick ? () => onRowClick(row) : row.onClick,
+            sx: {
+              verticalAlign
+            }
+          }, {
+            children: columns.map((column, idx) => jsx(TableCell, Object.assign({
               align: column.align ? column.align : 'left',
-              sortDirection: sortDirection,
               sx: {
-                width: column.width ? `${column.width}%` : 'unset'
+                maxWidth: column.width ? `${column.width}%` : 'unset'
               }
             }, {
-              children: jsx(TableSortLabel, Object.assign({
-                active: !!sortDirection,
-                hideSortIcon: !column.sortKey,
-                direction: sortDirection || 'asc',
-                onClick: () => column.sortKey ? onSortChanged(column.sortKey) : {}
+              children: jsx(Box, Object.assign({
+                sx: {
+                  maxWidth: '90%',
+                  overflow: 'hidden',
+                  whiteSpace: 'nowrap',
+                  textOverflow: 'ellipsis'
+                }
               }, {
-                children: column.label
+                children: jsx(Box, {
+                  children: column.renderCell ? column.renderCell(row, index) : row[column.id]
+                })
               }))
-            }), index);
-          })
-        })
-      }), jsx(TableBody, {
-        children: rows.length ? rows.map((row, index) => jsx(TableRow, Object.assign({
-          hover: true,
-          onClick: onRowClick ? () => onRowClick(row) : row.onClick,
-          sx: {
-            verticalAlign
-          }
-        }, {
-          children: columns.map((column, idx) => jsx(TableCell, Object.assign({
-            align: column.align ? column.align : 'left',
+            }), idx))
+          }), index)) : jsx(TableRow, Object.assign({
             sx: {
-              width: column.width ? `${column.width}%` : 'unset'
+              verticalAlign
             }
           }, {
-            children: column.renderCell ? column.renderCell(row, index) : row[column.id]
-          }), idx))
-        }), index)) : jsx(TableRow, Object.assign({
-          sx: {
-            verticalAlign
-          }
-        }, {
-          children: jsx(TableCell, Object.assign({
-            align: "center",
-            colSpan: columns.length
-          }, {
-            children: emptyDataText !== null && emptyDataText !== void 0 ? emptyDataText : 'Нет данных'
+            children: jsx(TableCell, Object.assign({
+              align: "center",
+              colSpan: columns.length
+            }, {
+              children: emptyDataText !== null && emptyDataText !== void 0 ? emptyDataText : 'Нет данных'
+            }))
           }))
-        }))
-      }), pagination || children ? jsx(TableFooter, {
-        children: jsxs(TableRow, {
-          children: [children && jsx(TableCell, Object.assign({
-            colSpan: columns.length,
-            sx: {
-              background: '#F0F0F7',
-              px: 4,
-              py: 3
-            }
-          }, {
-            children: children
-          })), pagination && !!rows.length ? jsx(MuiTablePagination, {
-            rowsPerPageOptions: [5, 10, 25],
-            count: totalCount,
-            rowsPerPage: +size,
-            page: +page,
-            sx: {
-              borderBottom: 'none'
-            },
-            onPageChange: (_, page) => onPageChange(page),
-            onRowsPerPageChange: event => onSizeChange(+event.target.value)
-          }) : null]
-        })
-      }) : null]
-    }))]
+        }), pagination || children ? jsx(TableFooter, {
+          children: jsxs(TableRow, {
+            children: [children && jsx(TableCell, Object.assign({
+              colSpan: columns.length,
+              sx: {
+                background: '#F0F0F7',
+                px: 4,
+                py: 3
+              }
+            }, {
+              children: children
+            })), pagination && !!rows.length ? jsx(MuiTablePagination, {
+              rowsPerPageOptions: [5, 10, 25],
+              count: totalCount,
+              rowsPerPage: +size,
+              page: +page,
+              sx: {
+                borderBottom: 'none'
+              },
+              labelRowsPerPage: labelRowsPerPage,
+              labelDisplayedRows: labelRowsPerPage ? labelDisplayedRows : undefined,
+              onPageChange: (_, page) => onPageChange(page),
+              onRowsPerPageChange: event => onSizeChange(+event.target.value)
+            }) : null]
+          })
+        }) : null]
+      }))]
+    }))
   }));
 }
 const SimpleTable = /*#__PURE__*/forwardRef(TableInner);
@@ -6491,869 +7071,475 @@ const MultiplePropertyFiller = ({
     })) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ? jsx(ControlAceEditor, {
       name: name,
       control: control,
-      label: valueLabel,
-      parseValue: true,
-      hideErrorMessage: true,
-      useCleanValue: true,
-      mode: propertyType === PropertyType.ANY ? 'text' : 'json'
-    }) : jsx(ControlInput, {
-      required: true,
-      hideErrorMessage: true,
-      control: control,
-      name: name,
-      label: valueLabel
-    })), fillOption === 'json_valid' && jsx(ControlAceEditor, {
-      name: name,
-      control: control,
-      label: valueLabel,
-      parseValue: true,
-      validateJson: true,
-      hideErrorMessage: true
-    })
-    // <JsonEditor validate name={name} ref={ref} useParsedValue />
-    , fillOption === 'widget' && jsx(MultiplePropertyWidget$1, {
-      property: property,
-      name: name,
-      useExpression: useExpression,
-      required: required,
-      label: label,
-      entityReferenceDefinitionSources: entityReferenceDefinitionSources,
-      entityReferenceValueComponent: entityReferenceValueComponent,
-      fileReferenceValueComponent: fileReferenceValueComponent
-    }), error && jsx(FormHelperText, Object.assign({
-      error: true
-    }, {
-      children: error.message
-    }))]
-  });
-};
-
-const DefinitionFiller = ({
-  properties,
-  dataFieldName,
-  useExpression: _useExpression = false,
-  title,
-  entityReferenceDefinitionSources,
-  entityReferenceValueComponent,
-  fileReferenceValueComponent
-}) => {
-  const stepperData = useMemo(() => {
-    if (properties) {
-      return properties.map(property => {
-        var _a;
-        const propertyType = typeof property.propertyType === 'string' ? property.propertyType : (_a = property['propertyType']) === null || _a === void 0 ? void 0 : _a['value'];
-        return {
-          label: jsxs(Box, Object.assign({
-            display: "flex",
-            flexDirection: "column"
-          }, {
-            children: [jsxs("b", {
-              children: [property.name, property.isRequired ? '*' : '']
-            }), jsxs("span", {
-              children: [property.key, " | ", property.isMultiple ? 'multiple' : 'single', " |", ' ', propertyType]
-            })]
-          })),
-          content: property.isMultiple ? jsx(MultiplePropertyFiller, {
-            property: property,
-            name: `${dataFieldName}.${property.key}`,
-            useExpression: _useExpression,
-            label: property.name,
-            required: property.isRequired,
-            entityReferenceValueComponent: entityReferenceValueComponent,
-            fileReferenceValueComponent: fileReferenceValueComponent,
-            entityReferenceDefinitionSources: entityReferenceDefinitionSources
-          }) : jsx(PropertyFiller, {
-            property: property,
-            name: `${dataFieldName}.${property.key}`,
-            useExpression: _useExpression,
-            label: property.name,
-            required: property.isRequired,
-            entityReferenceDefinitionSources: entityReferenceDefinitionSources,
-            entityReferenceValueComponent: entityReferenceValueComponent,
-            fileReferenceValueComponent: fileReferenceValueComponent
-          })
-        };
-      });
-    }
-    return [];
-  }, [properties, dataFieldName, _useExpression, entityReferenceValueComponent, entityReferenceDefinitionSources, fileReferenceValueComponent]);
-  return jsx(LocalizationProvider, Object.assign({
-    dateAdapter: AdapterDateFns
-  }, {
-    children: jsxs(Grid, Object.assign({
-      container: true,
-      direction: "column",
-      spacing: 2
-    }, {
-      children: [title && jsx(Grid, Object.assign({
-        xs: 12
-      }, {
-        children: jsx("div", Object.assign({
-          style: {
-            fontWeight: '600'
-          }
-        }, {
-          children: title
-        }))
-      })), jsx(StepperView, {
-        data: stepperData
-      })]
-    }))
-  }));
-};
-
-const FileDefinitionValueView = ({
-  property,
-  data
-}) => {
-  const {
-    name
-  } = property;
-  const downloadFile = useCallback((contentBase64, fileName) => {
-    const linkSource = contentBase64;
-    const downloadLink = document.createElement('a');
-    document.body.appendChild(downloadLink);
-    downloadLink.href = linkSource;
-    downloadLink.target = '_self';
-    downloadLink.download = fileName;
-    downloadLink.click();
-  }, []);
-  return jsx(Button, Object.assign({
-    component: "label",
-    variant: "contained",
-    size: "large",
-    color: "primary",
-    onClick: () => downloadFile(data, name)
-  }, {
-    children: "Download File"
-  }));
-};
-var FileDefinitionValueView$1 = FileDefinitionValueView;
-
-const PropertyValueComponent = ({
-  property,
-  data,
-  properties
-}) => {
-  const defaultRender = value => jsx(Box, Object.assign({
-    style: {
-      backgroundColor: '#fff',
-      border: '1px solid #ccc',
-      borderRadius: '4px',
-      padding: '4px',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
-    }
-  }, {
-    children: value === null ? 'null' : value.toString()
-  }));
-  switch (property.propertyType) {
-    case PropertyType.JSON:
-      return jsx(JsonView, {
-        value: data
-      });
-    case PropertyType.ENTITY:
-      return jsx(DefinitionValueView, {
-        properties: properties,
-        data: data
-      });
-    case PropertyType.ANY:
-      // TODO need to prefetch data and show as is
-      return typeof data === 'object' ? jsx(JsonView, {
-        value: data
-      }) : defaultRender(data);
-    case PropertyType.FILE_REFERENCE:
-      return data === null ? defaultRender(data) : jsx(Button, Object.assign({
-        component: Link,
-        color: "primary",
-        variant: "contained",
-        target: "_blank",
-        to: data,
-        sx: {
-          marginTop: 4
-        }
-      }, {
-        children: "Download via link"
-      }));
-    case PropertyType.FILE:
-      return data === null ? defaultRender(data) : jsx(FileDefinitionValueView$1, {
-        data: data,
-        property: property
-      });
-    default:
-      return defaultRender(data);
-  }
-};
-const PropertyDataView = ({
-  property,
-  data,
-  hasBackground: _hasBackground = false
-}) => {
-  const properties = useMemo(() => {
-    if (property.propertyType === PropertyType.ENTITY) {
-      if (Array.isArray(property.properties)) {
-        return property.properties;
-      }
-      return propertiesObjectToArray(property.properties);
-    }
-    return [];
-  }, [property]);
-  return jsx(Box, Object.assign({
-    style: {
-      backgroundColor: _hasBackground ? '#f1f1f1' : 'none'
-    }
-  }, {
-    children: jsx(PropertyValueComponent, {
-      property: property,
-      data: data,
-      properties: properties
+      label: valueLabel,
+      parseValue: true,
+      hideErrorMessage: true,
+      useCleanValue: true,
+      mode: propertyType === PropertyType.ANY ? 'text' : 'json'
+    }) : jsx(ControlInput, {
+      required: true,
+      hideErrorMessage: true,
+      control: control,
+      name: name,
+      label: valueLabel
+    })), fillOption === 'json_valid' && jsx(ControlAceEditor, {
+      name: name,
+      control: control,
+      label: valueLabel,
+      parseValue: true,
+      validateJson: true,
+      hideErrorMessage: true
     })
-  }));
+    // <JsonEditor validate name={name} ref={ref} useParsedValue />
+    , fillOption === 'widget' && jsx(MultiplePropertyWidget$1, {
+      property: property,
+      name: name,
+      useExpression: useExpression,
+      required: required,
+      label: label,
+      entityReferenceDefinitionSources: entityReferenceDefinitionSources,
+      entityReferenceValueComponent: entityReferenceValueComponent,
+      fileReferenceValueComponent: fileReferenceValueComponent
+    }), error && jsx(FormHelperText, Object.assign({
+      error: true
+    }, {
+      children: error.message
+    }))]
+  });
 };
-var PropertyDataView$1 = PropertyDataView;
 
-const DefinitionValueView = ({
+const DefinitionFiller = ({
   properties,
-  data
+  dataFieldName,
+  useExpression: _useExpression = false,
+  title,
+  entityReferenceDefinitionSources,
+  entityReferenceValueComponent,
+  fileReferenceValueComponent
 }) => {
   const stepperData = useMemo(() => {
-    if (properties && data) {
+    if (properties) {
       return properties.map(property => {
-        const {
-          key,
-          name,
-          isMultiple,
-          propertyType
-        } = property;
-        const value = data[property.key] ? data[property.key] : null;
+        var _a;
+        const propertyType = typeof property.propertyType === 'string' ? property.propertyType : (_a = property['propertyType']) === null || _a === void 0 ? void 0 : _a['value'];
         return {
           label: jsxs(Box, Object.assign({
             display: "flex",
             flexDirection: "column"
           }, {
-            children: [jsx("b", {
-              children: name
+            children: [jsxs("b", {
+              children: [property.name, property.isRequired ? '*' : '']
             }), jsxs("span", {
-              children: [key, " | ", isMultiple ? 'multiple' : 'single', " | ", propertyType]
+              children: [property.key, " | ", property.isMultiple ? 'multiple' : 'single', " |", ' ', propertyType]
             })]
           })),
-          content: isMultiple && Array.isArray(value) && property.propertyType !== PropertyType.ANY ? jsx(Fragment, {
-            children: value.map((itemValue, index) => jsx(Box, Object.assign({
-              mb: 2
-            }, {
-              children: jsx(PropertyDataView$1, {
-                property: property,
-                data: itemValue,
-                hasBackground: true
-              })
-            }), index))
-          }) : jsx(PropertyDataView$1, {
+          content: property.isMultiple ? jsx(MultiplePropertyFiller, {
             property: property,
-            data: value
+            name: `${dataFieldName}.${property.key}`,
+            useExpression: _useExpression,
+            label: property.name,
+            required: property.isRequired,
+            entityReferenceValueComponent: entityReferenceValueComponent,
+            fileReferenceValueComponent: fileReferenceValueComponent,
+            entityReferenceDefinitionSources: entityReferenceDefinitionSources
+          }) : jsx(PropertyFiller, {
+            property: property,
+            name: `${dataFieldName}.${property.key}`,
+            useExpression: _useExpression,
+            label: property.name,
+            required: property.isRequired,
+            entityReferenceDefinitionSources: entityReferenceDefinitionSources,
+            entityReferenceValueComponent: entityReferenceValueComponent,
+            fileReferenceValueComponent: fileReferenceValueComponent
           })
         };
       });
     }
     return [];
-  }, [properties, data]);
-  return jsx(Grid, Object.assign({
-    container: true,
-    direction: "column",
-    spacing: 2
-  }, {
-    children: jsx(StepperView, {
-      data: stepperData
-    })
-  }));
-};
-
-const StyledBox = styled(Box)(({
-  theme
-}) => ({
-  backgroundColor: '#eee',
-  fontSize: '14px',
-  padding: '0 8px',
-  borderRadius: '10px',
-  width: 'fit-content',
-  '&.success': {
-    backgroundColor: '#a9dfa9'
-  },
-  '&.error': {
-    backgroundColor: '#ff7e7e'
-  },
-  '&.warning': {
-    backgroundColor: theme.palette.warning.main
-  }
-}));
-const Status = ({
-  text,
-  status: _status = 'default'
-}) => {
-  return jsx(StyledBox, Object.assign({
-    className: classnames('root', {
-      [_status]: true
-    })
-  }, {
-    children: text
-  }));
-};
-
-const PropertyStep = ({
-  properties,
-  parentKey: _parentKey = '',
-  activePath: _activePath = '',
-  prefix: _prefix = '',
-  onClick
-}) => {
-  const handleClick = path => {
-    if (_prefix) {
-      onClick(`${_prefix}.${path}`);
-    } else {
-      onClick(path);
-    }
-  };
-  return jsx(Stepper, Object.assign({
-    orientation: "vertical",
-    onClick: event => event.stopPropagation()
-  }, {
-    children: properties && properties.map(property => {
-      var _a;
-      const fullPropertyPath = _parentKey ? `${_parentKey}.${property.key}` : property.key;
-      const propertyType = (_a = property.propertyType['value']) !== null && _a !== void 0 ? _a : property.propertyType;
-      return jsxs(Step, Object.assign({
-        expanded: true,
-        onClick: () => handleClick(fullPropertyPath)
-      }, {
-        children: [jsx(StepLabel, Object.assign({
-          StepIconProps: {
-            icon: '',
-            completed: false,
-            active: _activePath === fullPropertyPath
-          }
-        }, {
-          children: jsxs(Box, Object.assign({
-            sx: {
-              propertyStepLabel: {
-                '&:hover': {
-                  fontWeight: '600',
-                  cursor: 'pointer'
-                }
-              }
-            }
-          }, {
-            children: [property.name, " - ", property.key, " - ", propertyType]
-          }))
-        })), jsx(StepContent, {
-          children: jsx("div", {
-            children: propertyType === PropertyType.ENTITY && jsx(PropertyStep, {
-              onClick: onClick,
-              activePath: _activePath,
-              properties: property.properties,
-              parentKey: fullPropertyPath
-            }, property.key)
-          })
-        })]
-      }), property.key);
-    })
-  }));
-};
-var PropertyStep$1 = PropertyStep;
-
-const JsonPathPicker = ({
-  open: _open = false,
-  onClose,
-  onPaste,
-  properties
-}) => {
-  const [selectedPropertyPath, setSelectedPropertyPath] = useState('');
-  const onCopy = () => {
-    navigator.clipboard.writeText(`$(${selectedPropertyPath})`);
-    toast.success('Copied!');
-  };
-  const handlePaste = () => {
-    onPaste(`$(${selectedPropertyPath})`);
-    toast.success('Pasted!');
-  };
-  return jsxs(Dialog, Object.assign({
-    open: _open,
-    onClose: onClose,
-    fullWidth: true,
-    maxWidth: "md"
-  }, {
-    children: [jsx(DialogTitle, {
-      children: "JSON path picker"
-    }), jsxs(DialogContent, {
-      children: [(properties === null || properties === void 0 ? void 0 : properties.length) ? properties.map((propEl, index) => jsxs("div", {
-        children: [jsx(Typography, Object.assign({
-          variant: "h6"
-        }, {
-          children: propEl.title
-        })), jsx(PropertyStep$1, {
-          properties: propEl.properties,
-          prefix: propEl.pathPrefix,
-          onClick: setSelectedPropertyPath,
-          activePath: selectedPropertyPath
-        })]
-      }, index)) : jsx(Typography, {
-        children: "Please, add properties"
-      }), selectedPropertyPath && jsxs(Typography, Object.assign({
-        variant: "h6",
-        gutterBottom: true
-      }, {
-        children: ["Selected path : $(", selectedPropertyPath, ")"]
-      }))]
-    }), jsxs(DialogActions, {
-      children: [jsx(Button, Object.assign({
-        variant: "contained",
-        color: "primary",
-        onClick: onCopy
-      }, {
-        children: "Copy"
-      })), jsx(Button, Object.assign({
-        variant: "contained",
-        color: "primary",
-        onClick: handlePaste
-      }, {
-        children: "Paste"
-      })), jsx(Button, Object.assign({
-        variant: "contained",
-        color: "secondary",
-        onClick: onClose
+  }, [properties, dataFieldName, _useExpression, entityReferenceValueComponent, entityReferenceDefinitionSources, fileReferenceValueComponent]);
+  return jsx(LocalizationProvider, Object.assign({
+    dateAdapter: AdapterDateFns
+  }, {
+    children: jsxs(Grid, Object.assign({
+      container: true,
+      direction: "column",
+      spacing: 2
+    }, {
+      children: [title && jsx(Grid, Object.assign({
+        xs: 12
       }, {
-        children: "Close"
-      }))]
-    })]
+        children: jsx("div", Object.assign({
+          style: {
+            fontWeight: '600'
+          }
+        }, {
+          children: title
+        }))
+      })), jsx(StepperView, {
+        data: stepperData
+      })]
+    }))
   }));
 };
 
-const SidebarContext = /*#__PURE__*/createContext({
-  collapsed: false,
-  toggleCollapse: () => {
-    console.log('collapse toggle');
-  }
-});
-const useSidebarContext = () => useContext(SidebarContext);
-const SidebarContextProvider = ({
-  children
+const FileDefinitionValueView = ({
+  property,
+  data
 }) => {
-  const [collapsed, setCollapsed] = useState(localStorage.getItem('sidebar_collapsed') === 'true');
-  const toggleCollapse = useCallback(() => {
-    setCollapsed(!collapsed);
-    localStorage.setItem('sidebar_collapsed', `${!collapsed}`);
-    window.dispatchEvent(new CustomEvent('sidebar_collapsed', {
-      detail: {
-        collapsed: !collapsed
-      }
-    }));
-  }, [collapsed]);
-  const toggleRootElementLink = useCallback((name, isCollapsed) => {
-    localStorage.setItem(`${name.toLowerCase()}_collapsed`, `${!isCollapsed}`);
+  const {
+    name
+  } = property;
+  const downloadFile = useCallback((contentBase64, fileName) => {
+    const linkSource = contentBase64;
+    const downloadLink = document.createElement('a');
+    document.body.appendChild(downloadLink);
+    downloadLink.href = linkSource;
+    downloadLink.target = '_self';
+    downloadLink.download = fileName;
+    downloadLink.click();
   }, []);
-  return jsx(SidebarContext.Provider, Object.assign({
-    value: {
-      collapsed,
-      toggleCollapse,
-      toggleRootElementLink
-    }
+  return jsx(Button, Object.assign({
+    component: "label",
+    variant: "contained",
+    size: "large",
+    color: "primary",
+    onClick: () => downloadFile(data, name)
   }, {
-    children: children
+    children: "Download File"
   }));
 };
+var FileDefinitionValueView$1 = FileDefinitionValueView;
 
-const baseThemeOptions = {
-  spacing: 4,
-  palette: {
-    primary: {
-      main: '#E0613A',
-      dark: '#d9512e',
-      light: '#E0613A'
-    },
-    secondary: {
-      main: '#007994',
-      dark: '#262842',
-      light: '#cbe8ee'
-    },
-    text: {
-      disabled: '#A9A9B8'
-    },
-    success: {
-      main: '#2DB77B',
-      light: '#DBFCEE'
-    },
-    grey: {
-      700: '#101F2B'
-    }
-  },
-  typography: {
-    fontSize: 14,
-    allVariants: {
-      fontFamily: ['Euclid', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(',')
-    },
-    h1: {
-      fontWeight: 400
-    },
-    h3: {
-      fontWeight: 500
-    },
-    h4: {
-      fontWeight: 500
+const PropertyValueComponent = ({
+  property,
+  data,
+  properties
+}) => {
+  const defaultRender = value => jsx(Box, Object.assign({
+    style: {
+      backgroundColor: '#fff',
+      border: '1px solid #ccc',
+      borderRadius: '4px',
+      padding: '4px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
     }
-  }
-};
-var baseTheme = createTheme(baseThemeOptions);
-
-const inputThemeOptions = {
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          lineHeight: 1.429
-        }
-      }
-    },
-    MuiInputBase: {
-      styleOverrides: {
-        root: {
-          borderRadius: baseTheme.spacing(3),
-          minWidth: baseTheme.spacing(25),
-          background: baseTheme.palette.background.default
-          // height: 40
-        },
-
-        // sizeSmall: {
-        //   padding: baseTheme.spacing(1, 0, 1, 4),
-        // },
-        input: {
-          minWidth: baseTheme.spacing(25)
-          // padding: 0,
-          // height: '32px',
-        }
-      }
-    },
-
-    MuiSelect: {
-      styleOverrides: {
-        nativeInput: {
-          padding: 0,
-          height: '32px'
-        }
-      }
-    },
-    MuiTextField: {
-      styleOverrides: {
-        root: {
-          minWidth: baseTheme.spacing(25)
-        }
-      }
-    },
-    MuiInputLabel: {
-      styleOverrides: {
-        root: {
-          position: 'relative',
-          overflow: 'initial',
-          transform: 'none',
-          marginBottom: baseTheme.spacing(1),
-          fontWeight: 500,
-          fontSize: '14px',
-          lineHeight: '20px',
-          pointerEvents: 'auto'
-        }
-      }
-    },
-    MuiOutlinedInput: {
-      styleOverrides: {
-        root: {
-          borderRadius: baseTheme.spacing(3),
-          minWidth: baseTheme.spacing(25)
-        },
-        notchedOutline: {
-          top: 0,
-          '& legend': {
-            display: 'none',
-            transition: 'none'
-          }
-        }
-      }
-    },
-    MuiAutocomplete: {
-      styleOverrides: {
-        paper: {
-          marginTop: 8,
-          borderRadius: 12,
-          boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.04)'
-        },
-        listbox: {
-          '::-webkit-scrollbar': {
-            width: '6px',
-            backgroundColor: 'white'
-          },
-          '::-webkit-scrollbar-thumb': {
-            borderRadius: '10px',
-            backgroundColor: 'rgba(38, 40, 66, 0.24)'
-          }
-        }
-      }
-    },
-    MuiMenu: {
-      styleOverrides: {
-        list: {
-          paddingTop: 0,
-          paddingBottom: 0,
-          background: 'white',
-          '& li.Mui-selected': {
-            background: 'rgba(38, 40, 66, 0.08) !important'
-          }
-        }
-      }
-    },
-    MuiPopover: {
-      styleOverrides: {
-        paper: {
-          marginTop: 8,
-          borderRadius: 12,
-          boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.04)'
-        }
-      }
-    },
-    MuiFormLabel: {
-      styleOverrides: {
-        root: {
-          fontSize: 14,
-          fontWeight: 500
-        },
-        asterisk: {
-          color: '#D6331F',
-          '&$error': {
-            color: '#D6331F'
-          }
+  }, {
+    children: value === null ? 'null' : value.toString()
+  }));
+  switch (property.propertyType) {
+    case PropertyType.JSON:
+      return jsx(JsonView, {
+        value: data
+      });
+    case PropertyType.ENTITY:
+      return jsx(DefinitionValueView, {
+        properties: properties,
+        data: data
+      });
+    case PropertyType.ANY:
+      // TODO need to prefetch data and show as is
+      return typeof data === 'object' ? jsx(JsonView, {
+        value: data
+      }) : defaultRender(data);
+    case PropertyType.FILE_REFERENCE:
+      return data === null ? defaultRender(data) : jsx(Button, Object.assign({
+        component: Link,
+        color: "primary",
+        variant: "contained",
+        target: "_blank",
+        to: data,
+        sx: {
+          marginTop: 4
         }
+      }, {
+        children: "Download via link"
+      }));
+    case PropertyType.FILE:
+      return data === null ? defaultRender(data) : jsx(FileDefinitionValueView$1, {
+        data: data,
+        property: property
+      });
+    default:
+      return defaultRender(data);
+  }
+};
+const PropertyDataView = ({
+  property,
+  data,
+  hasBackground: _hasBackground = false
+}) => {
+  const properties = useMemo(() => {
+    if (property.propertyType === PropertyType.ENTITY) {
+      if (Array.isArray(property.properties)) {
+        return property.properties;
       }
+      return propertiesObjectToArray(property.properties);
     }
-  }
+    return [];
+  }, [property]);
+  return jsx(Box, Object.assign({
+    style: {
+      backgroundColor: _hasBackground ? '#f1f1f1' : 'none'
+    }
+  }, {
+    children: jsx(PropertyValueComponent, {
+      property: property,
+      data: data,
+      properties: properties
+    })
+  }));
 };
-var inputThemeOptions$1 = inputThemeOptions;
+var PropertyDataView$1 = PropertyDataView;
 
-const tableThemeOptions = {
-  components: {
-    MuiTableContainer: {
-      styleOverrides: {
-        root: {
-          borderRadius: baseTheme.spacing(3),
-          border: '1px solid rgba(38, 40, 66, 0.08)'
-        }
-      }
-    },
-    MuiTableHead: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#F7F8FC'
-        }
-      }
-    },
-    MuiTableCell: {
-      styleOverrides: {
-        root: {
-          minHeight: 48,
-          padding: baseTheme.spacing(1, 2),
-          '&:first-of-type': {
-            paddingLeft: baseTheme.spacing(4)
-          }
-        },
-        head: {
-          maxHeight: '40px',
-          padding: baseTheme.spacing(2.75, 2),
-          color: '#6D6E85'
-        },
-        body: {
-          wordBreak: 'break-all'
-        }
-      }
-    },
-    MuiTableSortLabel: {
-      styleOverrides: {
-        root: {
-          maxHeight: '24px',
-          lineHeight: 1
-        }
-      }
+const DefinitionValueView = ({
+  properties,
+  data
+}) => {
+  const stepperData = useMemo(() => {
+    if (properties && data) {
+      return properties.map(property => {
+        const {
+          key,
+          name,
+          isMultiple,
+          propertyType
+        } = property;
+        const value = data[property.key] ? data[property.key] : null;
+        return {
+          label: jsxs(Box, Object.assign({
+            display: "flex",
+            flexDirection: "column"
+          }, {
+            children: [jsx("b", {
+              children: name
+            }), jsxs("span", {
+              children: [key, " | ", isMultiple ? 'multiple' : 'single', " | ", propertyType]
+            })]
+          })),
+          content: isMultiple && Array.isArray(value) && property.propertyType !== PropertyType.ANY ? jsx(Fragment, {
+            children: value.map((itemValue, index) => jsx(Box, Object.assign({
+              mb: 2
+            }, {
+              children: jsx(PropertyDataView$1, {
+                property: property,
+                data: itemValue,
+                hasBackground: true
+              })
+            }), index))
+          }) : jsx(PropertyDataView$1, {
+            property: property,
+            data: value
+          })
+        };
+      });
     }
+    return [];
+  }, [properties, data]);
+  return jsx(Grid, Object.assign({
+    container: true,
+    direction: "column",
+    spacing: 2
+  }, {
+    children: jsx(StepperView, {
+      data: stepperData
+    })
+  }));
+};
+
+const StyledBox = styled(Box)(({
+  theme
+}) => ({
+  backgroundColor: '#eee',
+  fontSize: '14px',
+  padding: '0 8px',
+  borderRadius: '10px',
+  width: 'fit-content',
+  '&.success': {
+    backgroundColor: '#a9dfa9'
+  },
+  '&.error': {
+    backgroundColor: '#ff7e7e'
+  },
+  '&.warning': {
+    backgroundColor: theme.palette.warning.main
   }
+}));
+const Status = ({
+  text,
+  status: _status = 'default'
+}) => {
+  return jsx(StyledBox, Object.assign({
+    className: classnames('root', {
+      [_status]: true
+    })
+  }, {
+    children: text
+  }));
 };
-var tableThemeOptions$1 = tableThemeOptions;
 
-const stepperThemeOptions = {
-  components: {
-    MuiStepIcon: {
-      styleOverrides: {
-        root: {
-          fontSize: '20px',
-          color: baseTheme.palette.text.disabled,
-          '&.Mui-active, &.Mui-completed': {
-            color: baseTheme.palette.secondary.main
-          }
-        }
-      }
+const PropertyStep = ({
+  properties,
+  parentKey: _parentKey = '',
+  activePath: _activePath = '',
+  prefix: _prefix = '',
+  onClick
+}) => {
+  const handleClick = path => {
+    if (_prefix) {
+      onClick(`${_prefix}.${path}`);
+    } else {
+      onClick(path);
     }
-  }
+  };
+  return jsx(Stepper, Object.assign({
+    orientation: "vertical",
+    onClick: event => event.stopPropagation()
+  }, {
+    children: properties && properties.map(property => {
+      var _a;
+      const fullPropertyPath = _parentKey ? `${_parentKey}.${property.key}` : property.key;
+      const propertyType = (_a = property.propertyType['value']) !== null && _a !== void 0 ? _a : property.propertyType;
+      return jsxs(Step, Object.assign({
+        expanded: true,
+        onClick: () => handleClick(fullPropertyPath)
+      }, {
+        children: [jsx(StepLabel, Object.assign({
+          StepIconProps: {
+            icon: '',
+            completed: false,
+            active: _activePath === fullPropertyPath
+          }
+        }, {
+          children: jsxs(Box, Object.assign({
+            sx: {
+              propertyStepLabel: {
+                '&:hover': {
+                  fontWeight: '600',
+                  cursor: 'pointer'
+                }
+              }
+            }
+          }, {
+            children: [property.name, " - ", property.key, " - ", propertyType]
+          }))
+        })), jsx(StepContent, {
+          children: jsx("div", {
+            children: propertyType === PropertyType.ENTITY && jsx(PropertyStep, {
+              onClick: onClick,
+              activePath: _activePath,
+              properties: property.properties,
+              parentKey: fullPropertyPath
+            }, property.key)
+          })
+        })]
+      }), property.key);
+    })
+  }));
 };
-var stepperThemeOptions$1 = stepperThemeOptions;
+var PropertyStep$1 = PropertyStep;
 
-const typographyThemeOptions = {
-  components: {
-    MuiTypography: {
-      styleOverrides: {
-        h1: {
-          [baseTheme.breakpoints.up('lg')]: {
-            fontSize: '1.5rem'
-          }
-        },
-        h3: {
-          fontSize: '1.25rem',
-          [baseTheme.breakpoints.up('lg')]: {
-            fontSize: '1.125rem'
-          }
-        },
-        h4: {
-          fontSize: '1rem',
-          [baseTheme.breakpoints.up('lg')]: {
-            fontSize: '1rem'
-          }
-        },
-        subtitle2: {
-          color: '#6D6E85'
-        }
-      }
-    }
-  }
+const JsonPathPicker = ({
+  open: _open = false,
+  onClose,
+  onPaste,
+  properties
+}) => {
+  const [selectedPropertyPath, setSelectedPropertyPath] = useState('');
+  const onCopy = () => {
+    navigator.clipboard.writeText(`$(${selectedPropertyPath})`);
+    toast.success('Copied!');
+  };
+  const handlePaste = () => {
+    onPaste(`$(${selectedPropertyPath})`);
+    toast.success('Pasted!');
+  };
+  return jsxs(Dialog, Object.assign({
+    open: _open,
+    onClose: onClose,
+    fullWidth: true,
+    maxWidth: "md"
+  }, {
+    children: [jsx(DialogTitle, {
+      children: "JSON path picker"
+    }), jsxs(DialogContent, {
+      children: [(properties === null || properties === void 0 ? void 0 : properties.length) ? properties.map((propEl, index) => jsxs("div", {
+        children: [jsx(Typography, Object.assign({
+          variant: "h6"
+        }, {
+          children: propEl.title
+        })), jsx(PropertyStep$1, {
+          properties: propEl.properties,
+          prefix: propEl.pathPrefix,
+          onClick: setSelectedPropertyPath,
+          activePath: selectedPropertyPath
+        })]
+      }, index)) : jsx(Typography, {
+        children: "Please, add properties"
+      }), selectedPropertyPath && jsxs(Typography, Object.assign({
+        variant: "h6",
+        gutterBottom: true
+      }, {
+        children: ["Selected path : $(", selectedPropertyPath, ")"]
+      }))]
+    }), jsxs(DialogActions, {
+      children: [jsx(Button, Object.assign({
+        variant: "contained",
+        color: "primary",
+        onClick: onCopy
+      }, {
+        children: "Copy"
+      })), jsx(Button, Object.assign({
+        variant: "contained",
+        color: "primary",
+        onClick: handlePaste
+      }, {
+        children: "Paste"
+      })), jsx(Button, Object.assign({
+        variant: "contained",
+        color: "secondary",
+        onClick: onClose
+      }, {
+        children: "Close"
+      }))]
+    })]
+  }));
 };
-var typographyThemeOptions$1 = typographyThemeOptions;
 
-const arsenalTheme = () => {
-  if (document) {
-    const url = "https://dev-qa-arsenal-frontend-fonts-bucket.s3.eu-north-1.amazonaws.com/fonts.css";
-    const fontsLink = document.querySelectorAll(`link[href="${url}"]`);
-    if (!fontsLink.length) {
-      const link = document.createElement('link');
-      link.href = url;
-      link.rel = 'stylesheet';
-      document.head.appendChild(link);
-    }
+const SidebarContext = /*#__PURE__*/createContext({
+  collapsed: false,
+  toggleCollapse: () => {
+    console.log('collapse toggle');
   }
-  return responsiveFontSizes(createTheme(baseTheme, {
-    components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, inputThemeOptions$1.components), tableThemeOptions$1.components), stepperThemeOptions$1.components), typographyThemeOptions$1.components), {
-      MuiToolbar: {
-        styleOverrides: {
-          root: {
-            [baseTheme.breakpoints.up('sm')]: {
-              minHeight: '56px'
-            }
-          }
-        }
-      },
-      // MuiBackdrop: {
-      //   styleOverrides: {
-      //     root: {
-      //       backgroundColor: 'rgba(0, 0, 0, 0.2)',
-      //     },
-      //   },
-      // },
-      MuiAppBar: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none',
-            backgroundColor: '#007F9B'
-          }
-        }
-      },
-      MuiButton: {
-        styleOverrides: {
-          root: {
-            borderRadius: baseTheme.spacing(2.5),
-            padding: baseTheme.spacing(2.5, 4),
-            lineHeight: '20px',
-            fontSize: '1rem',
-            textTransform: 'none'
-          },
-          outlined: {
-            color: '#262842',
-            backgroundColor: '#FFFFFF !important',
-            border: '1px solid rgba(38, 40, 66, 0.12)'
-          },
-          text: {
-            color: baseTheme.palette.secondary.dark
-          }
-        }
-      },
-      MuiDialog: {
-        styleOverrides: {
-          root: {
-            '& .MuiModal-backdrop': {
-              background: 'rgba(28, 55, 77, 0.5)',
-              backdropFilter: 'blur(2px)'
-            }
-          },
-          paper: {
-            borderRadius: baseTheme.spacing(3)
-          },
-          paperWidthXs: {
-            maxWidth: 500
-          }
-        }
-      },
-      // MuiPaper: {
-      //   styleOverrides: {
-      //     root: {
-      //       borderRadius: baseTheme.spacing(3),
-      //     },
-      //   },
-      // },
-      MuiDialogContent: {
-        styleOverrides: {
-          root: {
-            color: '#6D6E85'
-          }
-        }
-      },
-      MuiDialogActions: {
-        styleOverrides: {
-          root: {
-            background: '#F7F8FC',
-            borderTop: '1px solid rgba(38, 40, 66, 0.08)',
-            padding: baseTheme.spacing(3, 6)
-          }
-        }
-      },
-      MuiTabs: {
-        styleOverrides: {
-          root: {
-            minHeight: '38px'
-          },
-          indicator: {
-            backgroundColor: baseTheme.palette.secondary.main
-          }
-        }
-      },
-      MuiTab: {
-        styleOverrides: {
-          root: {
-            fontSize: 14,
-            fontWeight: 500,
-            textTransform: 'none',
-            padding: '10px 12px',
-            lineHeight: '1.125rem',
-            minHeight: '38px',
-            color: '#8B8C9E',
-            '&.Mui-selected': {
-              color: baseTheme.palette.secondary.main
-            }
-          }
-        }
+});
+const useSidebarContext = () => useContext(SidebarContext);
+const SidebarContextProvider = ({
+  children
+}) => {
+  const [collapsed, setCollapsed] = useState(localStorage.getItem('sidebar_collapsed') === 'true');
+  const toggleCollapse = useCallback(() => {
+    setCollapsed(!collapsed);
+    localStorage.setItem('sidebar_collapsed', `${!collapsed}`);
+    window.dispatchEvent(new CustomEvent('sidebar_collapsed', {
+      detail: {
+        collapsed: !collapsed
       }
-    })
+    }));
+  }, [collapsed]);
+  const toggleRootElementLink = useCallback((name, isCollapsed) => {
+    localStorage.setItem(`${name.toLowerCase()}_collapsed`, `${!isCollapsed}`);
+  }, []);
+  return jsx(SidebarContext.Provider, Object.assign({
+    value: {
+      collapsed,
+      toggleCollapse,
+      toggleRootElementLink
+    }
+  }, {
+    children: children
   }));
 };
-const theme = arsenalTheme();
 
 const drawerWidth = 248;
 const Container = styled('div')({
@@ -8039,4 +8225,33 @@ const Breadcrumbs = ({
   }));
 };
 
-export { AlertDialog, BackButton, Breadcrumbs, ContentLayout, ControlAceEditor, ControlArrayInput, ControlAutocomplete, ControlCheckbox, ControlDate, ControlDateTime, ControlDebouncedInput, ControlInput, ControlNumberInput, ControlPeriodInput, ControlPhoneInput, ControlQueryAutocomplete, ControlRadio, ControlSelect, ControlSwitch, ControlTime, CopyButton, CreateDefinition, CreatePropertiesList, CreatePropertiesListContext, CreatePropertyFormFields, DATE_DEFAULT_FORMAT, DATE_TIME_DEFAULT_FORMAT, DEFAULT_DATE_VALIDATION_ERROR_TEXT, DEFAULT_ERROR_TEXT, DEFAULT_REQUIRED_ERROR_TEXT, DefinitionFiller, DefinitionValueView, InfoItem, JsonModalView, JsonPathPicker, JsonView, Loader, MenuIcon, MultiplePropertyFiller, PropertyFiller, PropertyType, PropertyValueField, RoundingMode, RouteTabs, Sidebar, SimpleTable, Status, StepperView, TIME_DEFAULT_FORMAT, TabPanel, Table, TableAction, TableActionCell, ViewPropertiesList, ViewProperty, capitalize, deepParseJson, defaultDefinitionArrayValue, defaultDefinitionObjectValue, digitsOnly, floatsOnly, formatDefinitionData, formatTableRowValue, getDemPropertyDateFormat, getEntityStarterValue, getJsonStringValue, getMultiplePropertyFillOptions, getSinglePropertyFillOptions, isDateType, isExpression, isPropertyValueEmpty, numberFormat, propertiesArrayToObject, propertiesObjectToArray, removeArrayItem, safeParseJson, sortArrayOfObjects, theme, useDebounce, useToggle, validateJson };
+const OverflowTip = ({
+  children
+}) => {
+  const [isOverflowed, setIsOverflow] = useState(false);
+  const handleRect = useCallback(node => {
+    setIsOverflow((node === null || node === void 0 ? void 0 : node.scrollWidth) > (node === null || node === void 0 ? void 0 : node.clientWidth));
+    const change = () => {
+      setIsOverflow((node === null || node === void 0 ? void 0 : node.scrollWidth) > (node === null || node === void 0 ? void 0 : node.clientWidth));
+    };
+    window.addEventListener('resize', change);
+  }, []);
+  return jsx(Tooltip, Object.assign({
+    title: children,
+    arrow: true,
+    disableHoverListener: !isOverflowed
+  }, {
+    children: jsx("div", Object.assign({
+      ref: handleRect,
+      style: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+      }
+    }, {
+      children: children
+    }))
+  }));
+};
+
+export { AlertDialog, BackButton, Breadcrumbs, ContentLayout, ControlAceEditor, ControlArrayInput, ControlAutocomplete, ControlCheckbox, ControlDate, ControlDateTime, ControlDebouncedInput, ControlInput, ControlNumberInput, ControlPeriodInput, ControlPhoneInput, ControlQueryAutocomplete, ControlRadio, ControlSelect, ControlSwitch, ControlTime, CopyButton, CreateDefinition, CreatePropertiesList, CreatePropertiesListContext, CreatePropertyFormFields, DATE_DEFAULT_FORMAT, DATE_TIME_DEFAULT_FORMAT, DEFAULT_DATE_VALIDATION_ERROR_TEXT, DEFAULT_ERROR_TEXT, DEFAULT_REQUIRED_ERROR_TEXT, DefinitionFiller, DefinitionValueView, InfoItem, JsonModalView, JsonPathPicker, JsonView, Loader, MenuIcon, MultiplePropertyFiller, OverflowTip, PropertyFiller, PropertyType, PropertyValueField, RoundingMode, RouteTabs, Sidebar, SimpleTable, Status, StepperView, TIME_DEFAULT_FORMAT, TabPanel, Table, TableAction, TableActionCell, ViewPropertiesList, ViewProperty, capitalize, deepParseJson, defaultDefinitionArrayValue, defaultDefinitionObjectValue, digitsOnly, floatsOnly, formatDefinitionData, formatTableRowValue, getDemPropertyDateFormat, getEntityStarterValue, getJsonStringValue, getMultiplePropertyFillOptions, getSinglePropertyFillOptions, isDateType, isExpression, isPropertyValueEmpty, numberFormat, propertiesArrayToObject, propertiesObjectToArray, removeArrayItem, safeParseJson, sortArrayOfObjects, theme, useDebounce, useToggle, validateJson };