@vidispine/vdt-materialui 21.4.0-pre.1 → 21.4.0-pre.2

package/dist/index.js

@@ -6,7 +6,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var styles$2o = require('@material-ui/core/styles');
+var styles$2p = require('@material-ui/core/styles');
 var CssBaseline = _interopDefault(require('@material-ui/core/CssBaseline'));
 require('typeface-roboto');
 var clsx = _interopDefault(require('clsx'));
@@ -137,6 +137,9 @@ var ListItemSecondaryAction = _interopDefault(require('@material-ui/core/ListIte
 var ListItemAvatar = _interopDefault(require('@material-ui/core/ListItemAvatar'));
 var reactDropzone = require('react-dropzone');
 var ListSubheader = _interopDefault(require('@material-ui/core/ListSubheader'));
+var TableContainer = _interopDefault(require('@material-ui/core/TableContainer'));
+var Input$1 = _interopDefault(require('@material-ui/core/Input'));
+var useDeepCompareEffect = _interopDefault(require('use-deep-compare-effect'));
 var DialogContentText = _interopDefault(require('@material-ui/core/DialogContentText'));
 var TextFieldsIcon = _interopDefault(require('@material-ui/icons/TextFields'));
 var ThumbsUpDownIcon = _interopDefault(require('@material-ui/icons/ThumbsUpDown'));
@@ -2069,12 +2072,12 @@ var entryUnbind = function entryUnbind(CONSTRUCTOR, METHOD) {
 
 var replaceAll = entryUnbind('String', 'replaceAll');
 
-var light = styles$2o.createMuiTheme({
+var light = styles$2p.createMuiTheme({
   palette: {
     type: 'light'
   }
 });
-var dark = styles$2o.createMuiTheme({
+var dark = styles$2p.createMuiTheme({
   palette: {
     type: 'dark'
   }
@@ -2142,8 +2145,8 @@ var ThemeProvider = function ThemeProvider(_ref) {
       togglePalette: togglePalette,
       isDefaultPalette: isDefaultPalette
     }
-  }, /*#__PURE__*/React__default.createElement(styles$2o.MuiThemeProvider, {
-    theme: styles$2o.createMuiTheme(theme, {
+  }, /*#__PURE__*/React__default.createElement(styles$2p.MuiThemeProvider, {
+    theme: styles$2p.createMuiTheme(theme, {
       props: props
     })
   }, /*#__PURE__*/React__default.createElement(CssBaseline, null, children)));
@@ -2196,7 +2199,7 @@ function LayoutButtonGroup(_ref) {
   }, /*#__PURE__*/React__default.createElement(ViewHeadlineIcon, null)));
 }
 
-var LayoutButtonGroup$1 = styles$2o.withStyles(styles, {
+var LayoutButtonGroup$1 = styles$2p.withStyles(styles, {
   name: 'VdtLayoutButtonGroup'
 })(LayoutButtonGroup);
 
@@ -3564,7 +3567,7 @@ SelectedToolbar.defaultProps = {
   onClear: undefined,
   className: undefined
 };
-var SelectedToolbar$1 = styles$2o.withStyles(styles$1, {
+var SelectedToolbar$1 = styles$2p.withStyles(styles$1, {
   name: 'VdtSelectedToolbar'
 })(SelectedToolbar);
 
@@ -3671,7 +3674,7 @@ function UserAvatarButton(_ref) {
   }, signOutText)));
 }
 
-var UserAvatarButton$1 = styles$2o.withStyles(styles$2, {
+var UserAvatarButton$1 = styles$2p.withStyles(styles$2, {
   name: 'VdtUserAvatarButton'
 })(UserAvatarButton);
 UserAvatarButton.propTypes = {
@@ -3759,7 +3762,7 @@ MimeTypeIcon.defaultProps = {
   collectionIcon: FolderIcon
 };
 
-var MimeTypeIcon$1 = styles$2o.withStyles(styles$3, {
+var MimeTypeIcon$1 = styles$2p.withStyles(styles$3, {
   name: 'VdtMimeTypeIcon'
 })(MimeTypeIcon);
 
@@ -3893,7 +3896,7 @@ function useSnackbarAlert() {
     var severity = _ref.severity,
         message = _ref.message;
     setAlert(function () {
-      return styles$2o.withStyles(styles$4)(function (_ref2) {
+      return styles$2p.withStyles(styles$4)(function (_ref2) {
         var AlertProps = _ref2.AlertProps,
             props = _objectWithoutProperties(_ref2, _excluded$2);
 
@@ -3977,7 +3980,7 @@ var CheckboxField = function CheckboxField(_ref) {
   }, FormControlHelperTextProps), error || submitError));
 };
 
-var CheckboxField$1 = styles$2o.withStyles(styles$5, {
+var CheckboxField$1 = styles$2p.withStyles(styles$5, {
   name: 'VdtCheckboxField'
 })(CheckboxField);
 
@@ -4123,7 +4126,7 @@ var CheckboxGroupField = function CheckboxGroupField(_ref2) {
   }, FormHelperTextProps), error || submitError));
 };
 
-var CheckboxGroupField$1 = styles$2o.withStyles(styles$6, {
+var CheckboxGroupField$1 = styles$2p.withStyles(styles$6, {
   name: 'VdtCheckboxGroupField'
 })(CheckboxGroupField);
 
@@ -4205,7 +4208,7 @@ var RadioField = function RadioField(_ref) {
   }, FormHelperTextProps), error || submitError));
 };
 
-var RadioField$1 = styles$2o.withStyles(styles$7, {
+var RadioField$1 = styles$2p.withStyles(styles$7, {
   name: 'VdtRadioField'
 })(RadioField);
 
@@ -4292,7 +4295,7 @@ var SelectField = function SelectField(_ref) {
   }, FormHelperTextProps), touched && (error || submitError) ? error || submitError : ''));
 };
 
-var SelectField$1 = styles$2o.withStyles(styles$8, {
+var SelectField$1 = styles$2p.withStyles(styles$8, {
   name: 'VdtSelectField'
 })(SelectField);
 
@@ -4353,7 +4356,7 @@ var TextField = function TextField(_ref) {
   }, props)));
 };
 
-var TextField$1 = styles$2o.withStyles(styles$9, {
+var TextField$1 = styles$2p.withStyles(styles$9, {
   name: 'VdtTextField'
 })(TextField);
 
@@ -4463,7 +4466,7 @@ var Slider = function Slider(_ref) {
   }, FormHelperTextProps), error || submitError));
 };
 
-var SliderField = styles$2o.withStyles(styles$a, {
+var SliderField = styles$2p.withStyles(styles$a, {
   name: 'VdtSliderField'
 })(Slider);
 
@@ -4615,7 +4618,7 @@ var TagField = function TagField(_ref) {
   }, FormHelperTextProps), error || submitError));
 };
 
-var TagField$1 = styles$2o.withStyles(styles$b, {
+var TagField$1 = styles$2p.withStyles(styles$b, {
   name: 'VdtTagField'
 })(TagField);
 
@@ -4732,7 +4735,7 @@ var SwitchField = function SwitchField(_ref) {
   }, FormControlLabelProps)));
 };
 
-var SwitchField$1 = styles$2o.withStyles(styles$d, {
+var SwitchField$1 = styles$2p.withStyles(styles$d, {
   name: 'VdtSwitchField'
 })(SwitchField);
 
@@ -5416,7 +5419,7 @@ var isUrl = function isUrl() {
   return matches ? undefined : helperText;
 };
 
-var UrlField = styles$2o.withStyles({}, {
+var UrlField = styles$2p.withStyles({}, {
   name: 'VdtUrlField'
 })(function (_ref) {
   var _ref$name = _ref.name,
@@ -5437,7 +5440,7 @@ var UrlField = styles$2o.withStyles({}, {
 
   }, FieldProps, props));
 });
-var UsernameField = styles$2o.withStyles({}, {
+var UsernameField = styles$2p.withStyles({}, {
   name: 'VdtUsernameField'
 })(function (_ref2) {
   var _ref2$name = _ref2.name,
@@ -5462,7 +5465,7 @@ var UsernameField = styles$2o.withStyles({}, {
 
   }, FieldProps, props));
 });
-var PasswordField = styles$2o.withStyles({}, {
+var PasswordField = styles$2p.withStyles({}, {
   name: 'VdtPasswordField'
 })(function (_ref3) {
   var _ref3$name = _ref3.name,
@@ -5487,7 +5490,7 @@ var PasswordField = styles$2o.withStyles({}, {
 
   }, FieldProps, props));
 });
-var RememberMeField = styles$2o.withStyles({}, {
+var RememberMeField = styles$2p.withStyles({}, {
   name: 'VdtRememberMeField'
 })(function (_ref4) {
   var _ref4$name = _ref4.name,
@@ -5551,7 +5554,7 @@ var FormText = function FormText(_ref6) {
   }, submitError || helperText));
 };
 
-var FormButtons = styles$2o.withStyles({}, {
+var FormButtons = styles$2p.withStyles({}, {
   name: 'VdtLoginFormButtons'
 })(function (_ref7) {
   var submitting = _ref7.submitting,
@@ -5809,7 +5812,7 @@ function FilterFormLabel(_ref) {
   }, /*#__PURE__*/React__default.createElement(IconComponent, null)));
 }
 
-var FilterFormLabel$1 = styles$2o.withStyles(styles$g, {
+var FilterFormLabel$1 = styles$2p.withStyles(styles$g, {
   name: 'VdtFilterFormLabel'
 })(FilterFormLabel);
 
@@ -6115,7 +6118,7 @@ function FilterCard(_ref4) {
   }, FormProps))) : null;
 }
 
-var FilterCard$1 = styles$2o.withStyles(styles$h, {
+var FilterCard$1 = styles$2p.withStyles(styles$h, {
   name: 'VdtFilterCard'
 })(FilterCard);
 
@@ -6241,7 +6244,7 @@ function JobRow(_ref) {
   })));
 }
 
-var JobRow$1 = styles$2o.withStyles({}, {
+var JobRow$1 = styles$2p.withStyles({}, {
   name: 'VdtJobRow'
 })(JobRow);
 
@@ -6303,7 +6306,7 @@ function JobTable(_ref2) {
   }))));
 }
 
-var JobTable$1 = styles$2o.withStyles({}, {
+var JobTable$1 = styles$2p.withStyles({}, {
   name: 'VdtJobTable'
 })(JobTable);
 
@@ -6357,11 +6360,14 @@ function JobFooter(_ref) {
       _ref$startTimeFromMin = _ref.startTimeFromMinutes,
       startTimeFromMinutes = _ref$startTimeFromMin === void 0 ? 10 : _ref$startTimeFromMin,
       _ref$JobTableComponen = _ref.JobTableComponent,
-      JobTableComponent = _ref$JobTableComponen === void 0 ? JobTable$1 : _ref$JobTableComponen;
+      JobTableComponent = _ref$JobTableComponen === void 0 ? JobTable$1 : _ref$JobTableComponen,
+      showJobList = _ref.showJobList,
+      setShowJobList = _ref.setShowJobList;
 
   var _useExpand = useExpand(defaultExpanded),
       expanded = _useExpand.expanded,
-      onToggle = _useExpand.onToggle;
+      onToggle = _useExpand.onToggle,
+      onClose = _useExpand.onClose;
 
   var _React$useState = React__default.useState({
     first: 1,
@@ -6397,9 +6403,18 @@ function JobFooter(_ref) {
     return function () {
       return clearInterval(interval);
     };
-  }, [onRefresh, refreshInterval]); // eslint-disable-next-line max-len
+  }, [onRefresh, refreshInterval]);
 
-  if (!hasLoaded || matrixParams.state === ALL_STATES && jobs.length === 0) return null;
+  var onHideJobs = function onHideJobs() {
+    onClose();
+    setShowJobList(false);
+  };
+
+  React__default.useEffect(function () {
+    setShowJobList(true);
+  }, [jobs.length, setShowJobList]); // eslint-disable-next-line max-len
+
+  if (!hasLoaded || !showJobList || matrixParams.state === ALL_STATES && jobs.length === 0) return null;
   return /*#__PURE__*/React__default.createElement(core.AppBar, {
     color: "inherit",
     position: "fixed",
@@ -6449,7 +6464,9 @@ function JobFooter(_ref) {
   }, jobs.length > 0 ? /*#__PURE__*/React__default.createElement(JobTableComponent, {
     jobs: jobs,
     hideHeader: true
-  }) : /*#__PURE__*/React__default.createElement("span", null, "No jobs found"))));
+  }) : /*#__PURE__*/React__default.createElement("span", null, "No jobs found"), /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onHideJobs
+  }, "Close"))));
 }
 
 function SearchPaginationActions(_ref) {
@@ -6520,10 +6537,10 @@ function SearchPagination(_ref) {
 }
 
 var useStyles = function useStyles(secondaryColor) {
-  return styles$2o.makeStyles({
+  return styles$2p.makeStyles({
     selected: {
       '&$selected': {
-        backgroundColor: styles$2o.alpha(secondaryColor, 0.16),
+        backgroundColor: styles$2p.alpha(secondaryColor, 0.16),
         color: secondaryColor
       }
     }
@@ -6724,7 +6741,7 @@ Sort.defaultProps = {
   initialSort: undefined,
   options: []
 };
-var Sort$1 = styles$2o.withStyles(styles$i, {
+var Sort$1 = styles$2p.withStyles(styles$i, {
   name: 'VdtSort'
 })(Sort);
 
@@ -6979,7 +6996,7 @@ function SearchInputFieldSelect(_ref) {
   })));
 }
 
-var SearchInputFieldSelect$1 = styles$2o.withStyles(styles$j, {
+var SearchInputFieldSelect$1 = styles$2p.withStyles(styles$j, {
   name: 'VdtSearchInputFieldSelect'
 })(SearchInputFieldSelect);
 
@@ -7245,13 +7262,13 @@ function JobList(_ref) {
   }, JobTableProps))))));
 }
 
-var JobList$1 = styles$2o.withStyles({}, {
+var JobList$1 = styles$2p.withStyles({}, {
   name: 'VdtJobList'
 })(JobList);
 
 var _excluded$l = ["fields", "TableRowComponent", "TableRowProps"],
     _excluded2$5 = ["label", "value"];
-var TableCellLabel = styles$2o.withStyles(function (theme) {
+var TableCellLabel = styles$2p.withStyles(function (theme) {
   return {
     root: _objectSpread2({
       borderStyle: 'none',
@@ -7260,7 +7277,7 @@ var TableCellLabel = styles$2o.withStyles(function (theme) {
     }, theme.typography.body2)
   };
 })(TableCell);
-var TableCellValue = styles$2o.withStyles(function (theme) {
+var TableCellValue = styles$2p.withStyles(function (theme) {
   return {
     root: _objectSpread2({
       borderStyle: 'none',
@@ -7456,7 +7473,7 @@ JobDataTable.defaultProps = {
   TableComponent: ItemMetadataTable,
   TableProps: {}
 };
-var JobDataTable$1 = styles$2o.withStyles({}, {
+var JobDataTable$1 = styles$2p.withStyles({}, {
   name: 'VdtJobDataTable'
 })(JobDataTable);
 
@@ -7681,7 +7698,7 @@ JobTaskTable.defaultProps = {
   JobTaskTableRowComponent: JobTaskTableRow,
   JobTaskTableRowProps: {}
 };
-var JobTaskTable$1 = styles$2o.withStyles(styles$k, {
+var JobTaskTable$1 = styles$2p.withStyles(styles$k, {
   name: 'VdtJobTaskTable'
 })(JobTaskTable);
 
@@ -7896,7 +7913,7 @@ JobCard.defaultProps = {
   JobMenuComponent: JobMenu,
   JobMenuProps: {}
 };
-var JobCard$1 = styles$2o.withStyles(styles$l, {
+var JobCard$1 = styles$2p.withStyles(styles$l, {
   name: 'VdtJobCard'
 })(JobCard);
 
@@ -7944,6 +7961,11 @@ var JobFooterContextProvider = function JobFooterContextProvider(_ref) {
       matrixParams = _React$useState4[0],
       setMatrixParams = _React$useState4[1];
 
+  var _React$useState5 = React__default.useState(true),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      showJobList = _React$useState6[0],
+      setShowJobList = _React$useState6[1];
+
   var _useApi = vdtReact.useApi(vdtApi.job.listJob),
       onListJob = _useApi.request,
       _useApi$data = _useApi.data;
@@ -8003,13 +8025,17 @@ var JobFooterContextProvider = function JobFooterContextProvider(_ref) {
       queryParams: queryParams,
       matrixParams: matrixParams,
       setQueryParams: setQueryParams,
-      setMatrixParams: setMatrixParams
+      setMatrixParams: setMatrixParams,
+      showJobList: showJobList,
+      setShowJobList: setShowJobList
     }
   }, children, /*#__PURE__*/React__default.createElement(JobFooterComponent, _extends({
     jobs: jobs,
     isLoading: isLoading,
     hasLoaded: hasLoaded,
-    onListJob: onListJob // eslint-disable-next-line react/jsx-props-no-spreading
+    onListJob: onListJob,
+    showJobList: showJobList,
+    setShowJobList: setShowJobList // eslint-disable-next-line react/jsx-props-no-spreading
 
   }, JobFooterProps)));
 };
@@ -8269,7 +8295,7 @@ function MediaBadge(_ref) {
   }, children);
 }
 
-var MediaBadge$1 = styles$2o.withStyles(styles$m, {
+var MediaBadge$1 = styles$2p.withStyles(styles$m, {
   name: 'VdtMediaBadge'
 })(MediaBadge);
 
@@ -8411,7 +8437,7 @@ function MediaBadges(_ref2) {
   }));
 }
 
-var MediaBadges$1 = styles$2o.withStyles(styles$n, {
+var MediaBadges$1 = styles$2p.withStyles(styles$n, {
   name: 'VdtMediaBadges'
 })(MediaBadges);
 
@@ -8469,7 +8495,7 @@ function ShapeTagCard(_ref) {
     className: classes.description
   }, shapeTag.description)));
 }
-var ShapeTagCard$1 = styles$2o.withStyles(styles$o, {
+var ShapeTagCard$1 = styles$2p.withStyles(styles$o, {
   name: 'VdtShapeTagCard'
 })(ShapeTagCard);
 ShapeTagCard.propTypes = {
@@ -8560,7 +8586,7 @@ var useExpand$1 = function useExpand(initialState) {
   };
 };
 
-var Accordion = styles$2o.withStyles(function (theme) {
+var Accordion = styles$2p.withStyles(function (theme) {
   return {
     root: {
       border: theme.palette.type === 'light' ? '1px solid rgba(0, 0, 0, .125)' : '1px solid rgba(0, 0, 0, .3)',
@@ -8578,7 +8604,7 @@ var Accordion = styles$2o.withStyles(function (theme) {
     expanded: {}
   };
 })(MuiAccordion);
-var AccordionSummary = styles$2o.withStyles(function (theme) {
+var AccordionSummary = styles$2p.withStyles(function (theme) {
   return {
     root: {
       backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, .03)' : 'rgba(0, 0, 0, .1)',
@@ -8597,7 +8623,7 @@ var AccordionSummary = styles$2o.withStyles(function (theme) {
     expanded: {}
   };
 })(MuiAccordionSummary);
-var AccordionDetails = styles$2o.withStyles(function (theme) {
+var AccordionDetails = styles$2p.withStyles(function (theme) {
   return {
     root: {
       padding: theme.spacing(2)
@@ -8717,7 +8743,7 @@ function ShapeTagListAccordion(_ref3) {
     })));
   })));
 }
-var ShapeTagListAccordion$1 = styles$2o.withStyles(styles$p, {
+var ShapeTagListAccordion$1 = styles$2p.withStyles(styles$p, {
   name: 'VdtShapeTagListAccordion'
 })(ShapeTagListAccordion);
 ShapeTagListAccordion.propTypes = {
@@ -9083,7 +9109,7 @@ function TranscodeDialog(_ref6) {
     }, ShapeTagListProps)));
   })));
 }
-var TranscodeDialog$1 = styles$2o.withStyles(styles$q, {
+var TranscodeDialog$1 = styles$2p.withStyles(styles$q, {
   name: 'VdtTranscodeDialog'
 })(TranscodeDialog);
 TranscodeDialog.propTypes = {
@@ -9262,7 +9288,7 @@ function ItemTimespanSearchInput(_ref) {
   }, props));
 }
 
-var ItemTimespanSearchInput$1 = styles$2o.withStyles(styles$r, {
+var ItemTimespanSearchInput$1 = styles$2p.withStyles(styles$r, {
   name: 'VdtItemTimespanSearchInput'
 })(ItemTimespanSearchInput);
 
@@ -9375,7 +9401,7 @@ function ItemTimespanForm(_ref) {
   }, cancelText)))));
 }
 
-var ItemTimespanForm$1 = styles$2o.withStyles({}, {
+var ItemTimespanForm$1 = styles$2p.withStyles({}, {
   name: 'VdtItemTimespanForm'
 })(ItemTimespanForm);
 
@@ -9562,7 +9588,7 @@ function ItemTimespanEdit(_ref) {
   }, props));
 }
 
-var ItemTimespanEdit$1 = styles$2o.withStyles(styles$s, {
+var ItemTimespanEdit$1 = styles$2p.withStyles(styles$s, {
   name: 'VdtItemTimespanEdit'
 })(ItemTimespanEdit);
 
@@ -9810,7 +9836,7 @@ function ItemTimespanInterval(_ref) {
   }, /*#__PURE__*/React__default.createElement(EditIcon, null)))))));
 }
 
-var ItemTimespanInterval$1 = styles$2o.withStyles(styles$t, {
+var ItemTimespanInterval$1 = styles$2p.withStyles(styles$t, {
   name: 'VdtItemTimespanInterval'
 })(ItemTimespanInterval);
 
@@ -9948,7 +9974,7 @@ function ItemTimespanList(_ref) {
   }));
 }
 
-var ItemTimespanList$1 = styles$2o.withStyles(styles$u, {
+var ItemTimespanList$1 = styles$2p.withStyles(styles$u, {
   name: 'VdtItemTimespanList'
 })(ItemTimespanList);
 
@@ -10012,7 +10038,7 @@ function ConfidenceSlider(_ref) {
   }, SliderProps)));
 }
 
-var ConfidenceSlider$1 = styles$2o.withStyles(styles$v, {
+var ConfidenceSlider$1 = styles$2p.withStyles(styles$v, {
   name: 'VdtConfidenceSlider'
 })(ConfidenceSlider);
 
@@ -10044,7 +10070,7 @@ function EditButton(_ref) {
   }, ButtonProps), /*#__PURE__*/React__default.createElement(IconComponent, null));
 }
 
-var EditButton$1 = styles$2o.withStyles(styles$w)(EditButton);
+var EditButton$1 = styles$2p.withStyles(styles$w)(EditButton);
 
 var parseTimespanList = function parseTimespanList(_ref) {
   var _ref$itemType = _ref.itemType,
@@ -10420,7 +10446,7 @@ function ItemTimespanBox(_ref) {
   }, ItemTimespanListProps)));
 }
 
-var ItemTimespanBox$1 = styles$2o.withStyles(styles$x, {
+var ItemTimespanBox$1 = styles$2p.withStyles(styles$x, {
   name: 'VdtItemTimespanBox'
 })(ItemTimespanBox);
 
@@ -10462,7 +10488,7 @@ var ItemTimespanSelection = function ItemTimespanSelection(_ref) {
   })));
 };
 
-var ItemTimespanSelection$1 = styles$2o.withStyles(styles$y, {
+var ItemTimespanSelection$1 = styles$2p.withStyles(styles$y, {
   name: 'VdtItemTimespanSelection'
 })(ItemTimespanSelection);
 
@@ -10588,7 +10614,7 @@ function ItemTimespan(_ref) {
   }, timespanOptionValue, ItemTimespanBoxProps)));
 }
 
-var ItemTimespan$1 = styles$2o.withStyles(styles$z, {
+var ItemTimespan$1 = styles$2p.withStyles(styles$z, {
   name: 'VdtItemTimespan'
 })(ItemTimespan);
 
@@ -10731,7 +10757,7 @@ function ItemVideoPlayer(_ref) {
   }, videoPlayerProps)))));
 }
 
-var ItemVideoPlayer$1 = styles$2o.withStyles(styles$A, {
+var ItemVideoPlayer$1 = styles$2p.withStyles(styles$A, {
   name: 'VdtItemVideoPlayer'
 })(ItemVideoPlayer);
 
@@ -10781,7 +10807,7 @@ function ItemAudioPlayer(_ref) {
   }, audioPlayerProps))));
 }
 
-var ItemAudioPlayer$1 = styles$2o.withStyles(styles$B, {
+var ItemAudioPlayer$1 = styles$2p.withStyles(styles$B, {
   name: 'VdtItemAudioPlayer'
 })(ItemAudioPlayer);
 
@@ -10818,7 +10844,7 @@ function ItemImagePlayer(_ref) {
   }));
 }
 
-var ItemImagePlayer$1 = styles$2o.withStyles(styles$C, {
+var ItemImagePlayer$1 = styles$2p.withStyles(styles$C, {
   name: 'VdtItemImagePlayer'
 })(ItemImagePlayer);
 
@@ -10938,7 +10964,7 @@ function ItemPdfViewer(_ref) {
   });
 }
 
-var ItemPdfViewer$1 = styles$2o.withStyles(styles$D, {
+var ItemPdfViewer$1 = styles$2p.withStyles(styles$D, {
   name: 'VdtItemPdfViewer'
 })(ItemPdfViewer);
 
@@ -10988,7 +11014,7 @@ var defaultShapeToLabel = function defaultShapeToLabel(shape) {
   return shape.tag;
 };
 
-var SourceSelection = styles$2o.withStyles({}, {
+var SourceSelection = styles$2p.withStyles({}, {
   name: 'VdtSourceSelection'
 })(function (_ref) {
   var currentValue = _ref.value,
@@ -11184,7 +11210,7 @@ function ItemPlayer(_ref2) {
   }, ItemVideoPlayerProps))));
 }
 
-var TableCellLabel$1 = styles$2o.withStyles(function (theme) {
+var TableCellLabel$1 = styles$2p.withStyles(function (theme) {
   return {
     root: _objectSpread2({
       display: 'flex',
@@ -11193,14 +11219,14 @@ var TableCellLabel$1 = styles$2o.withStyles(function (theme) {
     }, theme.typography.body2)
   };
 })(TableCell);
-var TableCellValue$1 = styles$2o.withStyles(function (theme) {
+var TableCellValue$1 = styles$2p.withStyles(function (theme) {
   return {
     root: _objectSpread2({
       borderStyle: 'none'
     }, theme.typography.subtitle2)
   };
 })(TableCell);
-var Chip = styles$2o.withStyles(function () {
+var Chip = styles$2p.withStyles(function () {
   return {
     root: {
       borderStyle: 'none'
@@ -11344,7 +11370,7 @@ function EntityAccessTable(_ref3) {
   })));
 }
 
-var EntityAccessTable$1 = styles$2o.withStyles({}, {
+var EntityAccessTable$1 = styles$2p.withStyles({}, {
   name: 'VdtEntityAccessTable'
 })(EntityAccessTable);
 
@@ -11772,7 +11798,7 @@ function EntityAccessEdit(_ref6) {
   }, grantAccessText)));
 }
 
-var EntityAccessEdit$1 = styles$2o.withStyles(styles$E, {
+var EntityAccessEdit$1 = styles$2p.withStyles(styles$E, {
   name: 'VdtEntityAccessEdit'
 })(EntityAccessEdit);
 
@@ -11845,7 +11871,7 @@ function ItemAccessTab(_ref) {
   }, EntityAccessTableProps)));
 }
 
-var ItemAccessTab$1 = styles$2o.withStyles({}, {
+var ItemAccessTab$1 = styles$2p.withStyles({}, {
   name: 'VdtItemAccessTab'
 })(ItemAccessTab);
 
@@ -11938,7 +11964,7 @@ function ItemMetadataFieldRow(_ref) {
   }, props))));
 }
 
-var ItemMetadataFieldRow$1 = styles$2o.withStyles(styles$F, {
+var ItemMetadataFieldRow$1 = styles$2p.withStyles(styles$F, {
   name: 'VdtItemMetadataFieldRow'
 })(ItemMetadataFieldRow);
 
@@ -12135,10 +12161,10 @@ var PureItemMetadataFieldGroupRow = function PureItemMetadataFieldGroupRow(_ref4
   })))));
 };
 
-var ItemMetadataFieldGroupRow = styles$2o.withStyles(FieldGroupRowStyles, {
+var ItemMetadataFieldGroupRow = styles$2p.withStyles(FieldGroupRowStyles, {
   name: 'VdtItemMetadataFieldGroupRow'
 })(PureItemMetadataFieldGroupRow);
-var ItemMetadataFormTable = styles$2o.withStyles(styles$G, {
+var ItemMetadataFormTable = styles$2p.withStyles(styles$G, {
   name: 'VdtItemMetadataFormTable'
 })(PureItemMetadataFormTable);
 
@@ -12177,7 +12203,7 @@ function ItemMetadataForm(_ref) {
   }, saveText)));
 }
 
-var ItemMetadataForm$1 = styles$2o.withStyles({}, {
+var ItemMetadataForm$1 = styles$2p.withStyles({}, {
   name: 'VdtItemMetadataForm'
 })(ItemMetadataForm);
 
@@ -12376,7 +12402,7 @@ var ItemMetadataListFieldItem = function ItemMetadataListFieldItem(_ref) {
   }));
 };
 
-var ItemMetadataListFieldItem$1 = styles$2o.withStyles(styles$H, {
+var ItemMetadataListFieldItem$1 = styles$2p.withStyles(styles$H, {
   name: 'VdtItemMetadataListFieldItem'
 })(ItemMetadataListFieldItem);
 
@@ -12473,7 +12499,7 @@ var ItemMetadataListFieldGroupItem = function ItemMetadataListFieldGroupItem(_re
   }))));
 };
 
-var ItemMetadataListFieldGroupItem$1 = styles$2o.withStyles(styles$I, {
+var ItemMetadataListFieldGroupItem$1 = styles$2p.withStyles(styles$I, {
   name: 'VdtItemMetadataListFieldGroupItem'
 })(ItemMetadataListFieldGroupItem);
 
@@ -12538,7 +12564,7 @@ var ItemMetadataList = function ItemMetadataList(_ref) {
   }));
 };
 
-var ItemMetadataList$1 = styles$2o.withStyles(styles$J, {
+var ItemMetadataList$1 = styles$2p.withStyles(styles$J, {
   name: 'VdtItemMetadataList'
 })(ItemMetadataList);
 
@@ -12632,7 +12658,7 @@ function ItemMetadataTab(_ref) {
   }))));
 }
 
-var ItemMetadataTab$1 = styles$2o.withStyles({}, {
+var ItemMetadataTab$1 = styles$2p.withStyles({}, {
   name: 'VdtItemMetadataTab'
 })(ItemMetadataTab);
 
@@ -12770,7 +12796,7 @@ function ItemFieldGroupTab(_ref) {
   }))));
 }
 
-var ItemFieldGroupTab$1 = styles$2o.withStyles({}, {
+var ItemFieldGroupTab$1 = styles$2p.withStyles({}, {
   name: 'VdtItemFieldGroupTab'
 })(ItemFieldGroupTab);
 
@@ -18349,7 +18375,7 @@ var TableRow$1 = function TableRow(_ref) {
   );
 };
 
-var TableRow$2 = styles$2o.withStyles(styles$K)(TableRow$1);
+var TableRow$2 = styles$2p.withStyles(styles$K)(TableRow$1);
 
 var TableHead = function TableHead(_ref) {
   var children = _ref.children;
@@ -18766,7 +18792,7 @@ function ItemShapeMenu(_ref) {
   }));
 }
 
-var ItemShapeMenu$1 = styles$2o.withStyles(styles$L, {
+var ItemShapeMenu$1 = styles$2p.withStyles(styles$L, {
   name: 'VdtItemShapeMenu'
 })(ItemShapeMenu);
 
@@ -18896,7 +18922,7 @@ ItemShapeTable.defaultProps = {
   canExpand: true
 };
 
-var ItemShapeTable$1 = styles$2o.withStyles(styles$M, {
+var ItemShapeTable$1 = styles$2p.withStyles(styles$M, {
   name: 'VdtItemShapeTable'
 })(ItemShapeTable);
 
@@ -19018,7 +19044,7 @@ ItemSourceTable.defaultProps = {
   classes: {}
 };
 
-var ItemSourceTable$1 = styles$2o.withStyles(styles$N, {
+var ItemSourceTable$1 = styles$2p.withStyles(styles$N, {
   name: 'VdtItemSourceTable'
 })(ItemSourceTable);
 
@@ -19086,7 +19112,7 @@ MediaCardThumbnailLabel.defaultProps = {
   style: {}
 };
 
-var MediaCardThumbnailLabel$1 = styles$2o.withStyles(styles$O, {
+var MediaCardThumbnailLabel$1 = styles$2p.withStyles(styles$O, {
   name: 'VdtMediaCardThumbnailLabel'
 })(MediaCardThumbnailLabel);
 
@@ -19388,7 +19414,7 @@ MediaCardThumbnail.defaultProps = {
   ScrubLabelProps: {}
 };
 
-var MediaCardThumbnail$1 = styles$2o.withStyles(styles$P, {
+var MediaCardThumbnail$1 = styles$2p.withStyles(styles$P, {
   name: 'VdtMediaCardThumbnail'
 })(MediaCardThumbnail);
 
@@ -19439,7 +19465,7 @@ function ItemPosterList(_ref) {
   }));
 }
 
-var ItemPosterList$1 = styles$2o.withStyles(styles$Q, {
+var ItemPosterList$1 = styles$2p.withStyles(styles$Q, {
   name: 'VdtItemPosterList'
 })(ItemPosterList);
 
@@ -20743,7 +20769,7 @@ var styles$R = function styles(theme) {
         }
       },
       '& .MuiCardHeader-root': {
-        backgroundColor: theme.palette.type === 'dark' ? styles$2o.emphasize(theme.palette.background.paper, 0.1) : undefined,
+        backgroundColor: theme.palette.type === 'dark' ? styles$2p.emphasize(theme.palette.background.paper, 0.1) : undefined,
         color: theme.palette.type === 'dark' ? theme.palette.common.white : undefined
       }
     },
@@ -20772,7 +20798,7 @@ function MediaCardCard(_ref) {
   }, CardProps), children);
 }
 
-var MediaCardCard$1 = styles$2o.withStyles(styles$R, {
+var MediaCardCard$1 = styles$2p.withStyles(styles$R, {
   name: 'VdtMediaCardCard'
 })(MediaCardCard);
 
@@ -20842,11 +20868,11 @@ MediaCardAvatar.defaultProps = {
   SkeletonProps: {},
   AvatarProps: {}
 };
-var MediaCardAvatar$1 = styles$2o.withStyles(styles$S, {
+var MediaCardAvatar$1 = styles$2p.withStyles(styles$S, {
   name: 'VdtMediaCardAvatar'
 })(MediaCardAvatar);
 
-var useStyles$1 = styles$2o.makeStyles({
+var useStyles$1 = styles$2p.makeStyles({
   colorDefault: {
     color: function color(props) {
       return props.primaryColor;
@@ -20907,7 +20933,7 @@ function MediaCardMenu(_ref) {
   }, /*#__PURE__*/React__default.createElement(MenuItem, null, "First"), /*#__PURE__*/React__default.createElement(MenuItem, null, "Second"), /*#__PURE__*/React__default.createElement(MenuItem, null, "Third")));
 }
 
-var useStyles$2 = styles$2o.makeStyles({
+var useStyles$2 = styles$2p.makeStyles({
   root: {
     paddingLeft: 8,
     paddingRight: 0,
@@ -23025,7 +23051,7 @@ CollectionListItem.defaultProps = {
   },
   skeleton: false
 };
-var CollectionListItem$1 = styles$2o.withStyles(styles$11, {
+var CollectionListItem$1 = styles$2p.withStyles(styles$11, {
   name: 'VdtCollectionListItem'
 })(CollectionListItem);
 
@@ -23072,7 +23098,7 @@ CollectionList.defaultProps = {
   CollectionListItemComponent: CollectionListItem$1,
   CollectionListItemProps: {}
 };
-var CollectionList$1 = styles$2o.withStyles(styles$12, {
+var CollectionList$1 = styles$2p.withStyles(styles$12, {
   name: 'VdtCollectionList'
 })(CollectionList);
 
@@ -23203,7 +23229,7 @@ function CollectionMetadataTab(_ref) {
   }))));
 }
 
-var CollectionMetadataTab$1 = styles$2o.withStyles({}, {
+var CollectionMetadataTab$1 = styles$2p.withStyles({}, {
   name: 'VdtCollectionMetadataTab'
 })(CollectionMetadataTab);
 
@@ -23276,7 +23302,7 @@ function CollectionAccessTab(_ref) {
   }, EntityAccessTableProps)));
 }
 
-var CollectionAccessTab$1 = styles$2o.withStyles({}, {
+var CollectionAccessTab$1 = styles$2p.withStyles({}, {
   name: 'VdtCollectionAccessTab'
 })(CollectionAccessTab);
 
@@ -23335,7 +23361,7 @@ function CollectionCreateDialog(_ref) {
   }, createText)));
 }
 
-var CollectionCreateDialog$1 = styles$2o.withStyles({}, {
+var CollectionCreateDialog$1 = styles$2p.withStyles({}, {
   name: 'VdtCollectionCreateDialog'
 })(CollectionCreateDialog);
 
@@ -23606,7 +23632,7 @@ SearchInput.defaultProps = {
   CloseIconComponent: CloseIcon,
   inputRef: undefined
 };
-var SearchInput$1 = styles$2o.withStyles(styles$13, {
+var SearchInput$1 = styles$2p.withStyles(styles$13, {
   name: 'VdtSearchInput'
 })(SearchInput);
 
@@ -23739,7 +23765,7 @@ function CollectionSearchPicker(_ref2) {
   }, PaginationProps)));
 }
 
-var CollectionSearchPicker$1 = styles$2o.withStyles({}, {
+var CollectionSearchPicker$1 = styles$2p.withStyles({}, {
   name: 'VdtCollectionSearchPicker'
 })(CollectionSearchPicker);
 
@@ -23784,7 +23810,7 @@ function defaultOnCreate(entities, collectionDocument) {
   });
 }
 
-var CreateCollection = styles$2o.withStyles({}, {
+var CreateCollection = styles$2p.withStyles({}, {
   name: 'VdtCreateCollection'
 })(function (_ref2) {
   var collectionDocument = _ref2.collectionDocument,
@@ -23978,7 +24004,7 @@ AddToCollectionDialog.defaultProps = {
   CreateCollectionIcon: CreateNewFolderIcon,
   SearchCollectionIcon: SearchIcon
 };
-var AddToCollectionDialog$1 = styles$2o.withStyles({}, {
+var AddToCollectionDialog$1 = styles$2p.withStyles({}, {
   name: 'VdtAddToCollectionDialog'
 })(AddToCollectionDialog);
 
@@ -24460,7 +24486,7 @@ function CollectionContentItem(_ref4) {
   }, /*#__PURE__*/React__default.createElement(icons.Wallpaper, null))));
 }
 
-var CollectionContentItem$1 = styles$2o.withStyles(styles$14, {
+var CollectionContentItem$1 = styles$2p.withStyles(styles$14, {
   name: 'VdtCollectionContentItem'
 })(CollectionContentItem);
 
@@ -24671,7 +24697,7 @@ function CollectionContentCollection(_ref3) {
   }, ListItemMenuProps)));
 }
 
-var CollectionContentCollection$1 = styles$2o.withStyles(styles$15, {
+var CollectionContentCollection$1 = styles$2p.withStyles(styles$15, {
   name: 'VdtCollectionContentCollection'
 })(CollectionContentCollection);
 
@@ -24757,7 +24783,7 @@ CollectionContentSkeleton.defaultProps = {
   ListItemAvatarProps: {},
   ListItemTextProps: {}
 };
-var CollectionContentSkeleton$1 = styles$2o.withStyles(styles$16, {
+var CollectionContentSkeleton$1 = styles$2p.withStyles(styles$16, {
   name: 'VdtCollectionContentSkeleton'
 })(CollectionContentSkeleton);
 
@@ -24842,7 +24868,7 @@ function CollectionContentEntity(_ref) {
   }[entityType]);
 }
 
-var CollectionContentEntity$1 = styles$2o.withStyles({}, {
+var CollectionContentEntity$1 = styles$2p.withStyles({}, {
   name: 'VdtCollectionContentEntity'
 })(CollectionContentEntity);
 
@@ -24885,13 +24911,13 @@ var collectionContentDroppableStyles = function collectionContentDroppableStyles
     canDrop: {
       boxShadow: "inset 0px 0px 1px 1px ".concat(theme.palette.primary.main),
       '&.VdtDroppable-isOver': {
-        backgroundColor: styles$2o.emphasize(theme.palette.background.paper, 0.05)
+        backgroundColor: styles$2p.emphasize(theme.palette.background.paper, 0.05)
       }
     }
   };
 };
 
-var CollectionContentDroppable = vdtReact.compose(styles$2o.withStyles(collectionContentDroppableStyles, {
+var CollectionContentDroppable = vdtReact.compose(styles$2p.withStyles(collectionContentDroppableStyles, {
   name: 'VdtCollectionContentDroppable'
 }), withDrop)(CollectionContentWrapper);
 
@@ -24899,7 +24925,7 @@ var CollectionContentEntityStyles = function CollectionContentEntityStyles(theme
   return {
     root: {
       marginBottom: theme.spacing(1.25),
-      backgroundColor: theme.palette.type === 'dark' ? styles$2o.emphasize(theme.palette.background.paper, 0.1) : undefined,
+      backgroundColor: theme.palette.type === 'dark' ? styles$2p.emphasize(theme.palette.background.paper, 0.1) : undefined,
       color: theme.palette.type === 'dark' ? theme.palette.common.white : undefined,
       borderColor: 'transparent',
       borderWidth: 0.7,
@@ -24925,7 +24951,7 @@ var CollectionContentEntityWrapper = function CollectionContentEntityWrapper(_re
   }, /*#__PURE__*/React__default.createElement(CollectionContentEntity$1, props));
 };
 
-var CollectionContentEntityDraggable = vdtReact.compose(styles$2o.withStyles(CollectionContentEntityStyles, {
+var CollectionContentEntityDraggable = vdtReact.compose(styles$2p.withStyles(CollectionContentEntityStyles, {
   name: 'VdtCollectionContentEntityDraggable'
 }), withDrag)(CollectionContentEntityWrapper);
 
@@ -25078,7 +25104,7 @@ function CollectionContent(_ref3) {
   }));
 }
 
-var CollectionContent$1 = styles$2o.withStyles(styles$17, {
+var CollectionContent$1 = styles$2p.withStyles(styles$17, {
   name: 'VdtCollectionContent'
 })(CollectionContent);
 
@@ -25286,7 +25312,7 @@ ItemParentsTab.defaultProps = {
     })
   }
 };
-var ItemParentsTab$1 = styles$2o.withStyles(styles$18, {
+var ItemParentsTab$1 = styles$2p.withStyles(styles$18, {
   name: 'VdtItemParentsTab'
 })(ItemParentsTab);
 
@@ -25430,7 +25456,7 @@ ItemListItem.defaultProps = {
   },
   skeleton: false
 };
-var ItemListItem$1 = styles$2o.withStyles(styles$19, {
+var ItemListItem$1 = styles$2p.withStyles(styles$19, {
   name: 'VdtItemListItem'
 })(ItemListItem);
 
@@ -25475,7 +25501,7 @@ ItemList.defaultProps = {
   ItemListItemComponent: ItemListItem$1,
   ItemListItemProps: {}
 };
-var ItemList$1 = styles$2o.withStyles(styles$1a, {
+var ItemList$1 = styles$2p.withStyles(styles$1a, {
   name: 'VdtItemList'
 })(ItemList);
 
@@ -25541,7 +25567,7 @@ ItemRelationRemoveDialog.defaultProps = {
   confirmText: 'Remove',
   rejectText: 'Cancel'
 };
-var ItemRelationRemoveDialog$1 = styles$2o.withStyles({}, {
+var ItemRelationRemoveDialog$1 = styles$2p.withStyles({}, {
   name: 'VdtItemRelationRemoveDialog'
 })(ItemRelationRemoveDialog);
 
@@ -25782,7 +25808,7 @@ function ItemSearchPicker(_ref) {
   }, PaginationProps)));
 }
 
-var ItemSearchPicker$1 = styles$2o.withStyles({}, {
+var ItemSearchPicker$1 = styles$2p.withStyles({}, {
   name: 'VdtItemSearchPicker'
 })(ItemSearchPicker);
 
@@ -25908,7 +25934,7 @@ AddRelationDialog.defaultProps = {
   open: false,
   setOpenDialog: function setOpenDialog() {}
 };
-var AddRelationDialog$1 = styles$2o.withStyles({}, {
+var AddRelationDialog$1 = styles$2p.withStyles({}, {
   name: 'VdtAddRelationDialog'
 })(AddRelationDialog);
 
@@ -26162,7 +26188,7 @@ ItemRelationsTab.defaultProps = {
   addText: 'Add new relation',
   direction: 'A'
 };
-var ItemRelationsTab$1 = styles$2o.withStyles(styles$1b, {
+var ItemRelationsTab$1 = styles$2p.withStyles(styles$1b, {
   name: 'VdtItemRelationsTab'
 })(ItemRelationsTab);
 
@@ -26196,7 +26222,7 @@ var TabPanel = function TabPanel(_ref2) {
   }, props));
 };
 
-var TabPanel$1 = styles$2o.withStyles(styles$1c, {
+var TabPanel$1 = styles$2p.withStyles(styles$1c, {
   name: 'VdtItemTabTabPanel'
 })(TabPanel);
 
@@ -26212,7 +26238,7 @@ var styles$1d = {
     backgroundColor: 'unset'
   }
 };
-var Tabs = styles$2o.withStyles(styles$1d, {
+var Tabs = styles$2p.withStyles(styles$1d, {
   name: 'VdtItemTabTabs'
 })(Tabs$1);
 
@@ -26252,7 +26278,7 @@ var styles$1e = function styles(theme) {
   };
 };
 
-var Tab = styles$2o.withStyles(styles$1e, {
+var Tab = styles$2p.withStyles(styles$1e, {
   name: 'VdtItemTabTab'
 })(Tab$1);
 
@@ -26341,7 +26367,7 @@ ItemTabs.defaultProps = {
   tabs: []
 };
 
-var index$1 = styles$2o.withStyles(styles$1f, {
+var index$1 = styles$2p.withStyles(styles$1f, {
   name: 'VdtItemTabs'
 })(ItemTabs);
 
@@ -26865,7 +26891,7 @@ ItemSidecarDownload.defaultProps = {
   ItemSidecarDownloadListItemProps: {}
 };
 
-var ItemSidecarDownload$1 = styles$2o.withStyles(styles$1g, {
+var ItemSidecarDownload$1 = styles$2p.withStyles(styles$1g, {
   name: 'VdtItemSidecarDownload'
 })(ItemSidecarDownload);
 
@@ -27455,7 +27481,7 @@ ItemSidecarUpload.defaultProps = {
   ItemSidecarUploadActionsProps: {}
 };
 
-var ItemSidecarUpload$1 = styles$2o.withStyles(styles$1h, {
+var ItemSidecarUpload$1 = styles$2p.withStyles(styles$1h, {
   name: 'VdtItemSidecarUpload'
 })(ItemSidecarUpload);
 
@@ -27592,7 +27618,7 @@ ItemSidecarDialog.defaultProps = {
   ItemSidecarUploadProps: {}
 };
 
-var index$2 = styles$2o.withStyles(styles$1i, {
+var index$2 = styles$2p.withStyles(styles$1i, {
   name: 'VdtItemSidecarDialog'
 })(ItemSidecarDialog);
 
@@ -27610,10 +27636,10 @@ var styles$1j = function styles(theme) {
     },
     '@keyframes active': {
       '0%': {
-        borderColor: styles$2o.alpha(theme.palette.primary.main, 1)
+        borderColor: styles$2p.alpha(theme.palette.primary.main, 1)
       },
       '100%': {
-        borderColor: styles$2o.alpha(theme.palette.primary.main, 0)
+        borderColor: styles$2p.alpha(theme.palette.primary.main, 0)
       }
     }
   };
@@ -27683,7 +27709,7 @@ Event.defaultProps = {
   EventContentProps: {}
 };
 
-var Event$1 = styles$2o.withStyles(styles$1j, {
+var Event$1 = styles$2p.withStyles(styles$1j, {
   name: 'VdtEvent'
 })(Event);
 
@@ -27743,7 +27769,7 @@ EventContainer.defaultProps = {
   classes: {}
 };
 
-var EventContainer$1 = styles$2o.withStyles(styles$1k, {
+var EventContainer$1 = styles$2p.withStyles(styles$1k, {
   name: 'VdtEventContainer'
 })(EventContainer);
 
@@ -27810,7 +27836,7 @@ EventMarker.defaultProps = {
   onClick: undefined
 };
 
-var EventMarker$1 = styles$2o.withStyles(styles$1l, {
+var EventMarker$1 = styles$2p.withStyles(styles$1l, {
   name: 'VdtEventMarker'
 })(EventMarker);
 
@@ -27903,14 +27929,14 @@ EventMarkerThumbnail.defaultProps = {
   TooltipProps: {}
 };
 
-var EventMarkerThumbnail$1 = styles$2o.withStyles(styles$1m, {
+var EventMarkerThumbnail$1 = styles$2p.withStyles(styles$1m, {
   name: 'VdtEventMarkerThumbnail'
 })(EventMarkerThumbnail);
 
 var styles$1n = function styles(theme) {
   return {
     root: {
-      backgroundColor: styles$2o.alpha(theme.palette.primary.main, 0.25),
+      backgroundColor: styles$2p.alpha(theme.palette.primary.main, 0.25),
       height: '5px',
       width: '100%',
       borderRadius: '2px',
@@ -27963,7 +27989,7 @@ EventMarkerTimeline.defaultProps = {
   length: undefined
 };
 
-var EventMarkerTimeline$1 = styles$2o.withStyles(styles$1n, {
+var EventMarkerTimeline$1 = styles$2p.withStyles(styles$1n, {
   name: 'VdtEventMarkerTimeline'
 })(EventMarkerTimeline);
 
@@ -28512,7 +28538,7 @@ EventTimeline.defaultProps = {
   itemSearchDocument: {}
 };
 
-var index$3 = styles$2o.withStyles(styles$1o, {
+var index$3 = styles$2p.withStyles(styles$1o, {
   name: 'VdtEventTimeline'
 })(EventTimeline);
 
@@ -28924,7 +28950,203 @@ ItemFileShareDialog.defaultProps = {
   onShareFile: defaultOnShareFile
 };
 
-var styles$1q = {
+var _excluded$U = ["classes", "className", "itemId", "groups", "isEditing", "onRefresh", "onSuccess", "onError", "editJoinValue", "formatValue", "rowsPerPageOptions"];
+
+var styles$1q = function styles() {
+  return {
+    root: {
+      width: '100%',
+      overflowX: 'auto',
+      display: 'grid'
+    },
+    table: {
+      maxWidth: '100%'
+    }
+  };
+};
+
+var ItemCompoundMetadataTable = function ItemCompoundMetadataTable(_ref) {
+  var classes = _ref.classes,
+      className = _ref.className,
+      itemId = _ref.itemId,
+      _ref$groups = _ref.groups,
+      groups = _ref$groups === void 0 ? [] : _ref$groups,
+      isEditing = _ref.isEditing,
+      onRefresh = _ref.onRefresh,
+      onSuccess = _ref.onSuccess,
+      onError = _ref.onError,
+      editJoinValue = _ref.editJoinValue,
+      formatValue = _ref.formatValue,
+      _ref$rowsPerPageOptio = _ref.rowsPerPageOptions,
+      rowsPerPageOptions = _ref$rowsPerPageOptio === void 0 ? [5, 10, 25] : _ref$rowsPerPageOptio,
+      values = _objectWithoutProperties(_ref, _excluded$U);
+
+  var _React$useState = React__default.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      groupFields = _React$useState2[0],
+      setGroupFields = _React$useState2[1];
+
+  var _React$useState3 = React__default.useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      page = _React$useState4[0],
+      setPage = _React$useState4[1];
+
+  var _React$useState5 = React__default.useState(5),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      rowsPerPage = _React$useState6[0],
+      setRowsPerPage = _React$useState6[1];
+
+  useDeepCompareEffect(function () {
+    setGroupFields(values.group);
+  }, [values]);
+
+  var _useCompoundMetadata = vdtReact.useCompoundMetadata(itemId, values, groups, groupFields, setGroupFields, onRefresh, onSuccess, onError),
+      tableColumns = _useCompoundMetadata.tableColumns,
+      _onChange = _useCompoundMetadata.onChange,
+      onSubmit = _useCompoundMetadata.onSubmit;
+
+  var handleChangePage = function handleChangePage(event, newPage) {
+    setPage(newPage);
+  };
+
+  var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
+    setRowsPerPage(event.target.value);
+    setPage(0);
+  };
+
+  var getKey = function getKey(name, index) {
+    return "".concat(name, "_").concat(Math.random(), "_").concat(index);
+  };
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, groupFields && groupFields.map(function (group, groupIndex) {
+    return /*#__PURE__*/React__default.createElement(Paper, {
+      className: classes.root,
+      key: getKey(group.name, groupIndex)
+    }, /*#__PURE__*/React__default.createElement(TableContainer, {
+      className: classes.table
+    }, /*#__PURE__*/React__default.createElement(Table, {
+      size: "medium"
+    }, /*#__PURE__*/React__default.createElement(TableHead$1, null, /*#__PURE__*/React__default.createElement(TableRow$3, null, tableColumns.map(function (row) {
+      return /*#__PURE__*/React__default.createElement(TableCell, {
+        key: row.name
+      }, row.name);
+    }))), /*#__PURE__*/React__default.createElement(TableBody, null, group.group.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(function (row, rowIndex) {
+      return /*#__PURE__*/React__default.createElement(TableRow$3, {
+        key: getKey(row.name, rowIndex)
+      }, tableColumns.map(function (field, fieldIndex) {
+        return /*#__PURE__*/React__default.createElement(TableCell, {
+          key: getKey(field.name, fieldIndex)
+        }, isEditing ? /*#__PURE__*/React__default.createElement(Input$1, {
+          value: row[field.name],
+          name: field.name,
+          onChange: function onChange(e) {
+            return _onChange(e, row, groupIndex, page * rowsPerPage + fieldIndex);
+          }
+        }) : row[field.name]);
+      }));
+    })))), /*#__PURE__*/React__default.createElement(TablePagination, {
+      rowsPerPageOptions: rowsPerPageOptions,
+      component: "div",
+      count: group.group.length,
+      rowsPerPage: rowsPerPage,
+      page: page,
+      onPageChange: handleChangePage,
+      onRowsPerPageChange: handleChangeRowsPerPage
+    }));
+  }), isEditing && /*#__PURE__*/React__default.createElement(core.Box, {
+    m: 2
+  }, /*#__PURE__*/React__default.createElement(core.Button, {
+    fullWidth: true,
+    variant: "outlined",
+    onClick: function onClick() {
+      return onSubmit(groupFields);
+    },
+    color: "primary"
+  }, "Save")));
+};
+
+var ItemCompoundMetadataTable$1 = styles$2p.withStyles(styles$1q, {
+  name: 'VdtItemCompoundMetadataTable'
+})(ItemCompoundMetadataTable);
+
+function ItemCompoundMetadataTab(_ref) {
+  var itemId = _ref.itemId,
+      groups = _ref.groups,
+      _ref$editingLabel = _ref.editingLabel,
+      editingLabel = _ref$editingLabel === void 0 ? function (isEditing) {
+    return isEditing ? 'Cancel' : 'Edit';
+  } : _ref$editingLabel,
+      _ref$showEditMetadata = _ref.showEditMetadata,
+      showEditMetadata = _ref$showEditMetadata === void 0 ? true : _ref$showEditMetadata,
+      onError = _ref.onError,
+      _ref$useContentPaths = _ref.useContentPaths,
+      useContentPaths = _ref$useContentPaths === void 0 ? false : _ref$useContentPaths,
+      formatValue = _ref.formatValue;
+  var queryParams = React__default.useMemo(function () {
+    if (useContentPaths) {
+      var groupPathParams = groups ? groups.map(function (g) {
+        return g.name;
+      }).map(function (name) {
+        return "metadata.timespan.group[name=".concat(name, "]");
+      }).join(',') : undefined;
+      return {
+        p: [groupPathParams].join(',')
+      };
+    }
+
+    return {
+      group: groups ? groups.map(function (_ref2) {
+        var name = _ref2.name;
+        return name;
+      }) : [],
+      content: 'metadata'
+    };
+  }, [groups, useContentPaths]);
+
+  var _React$useState = React__default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isEditing = _React$useState2[0],
+      setIsEditing = _React$useState2[1];
+
+  var toggleEdit = function toggleEdit() {
+    return setIsEditing(!isEditing);
+  };
+
+  var _useAddMetadataFieldA = vdtReact.useAddMetadataFieldAttributes({
+    groups: groups
+  }),
+      groupsWithAttributes = _useAddMetadataFieldA.groupsWithAttributes;
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showEditMetadata && /*#__PURE__*/React__default.createElement(Box, {
+    display: "flex",
+    justifyContent: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(FormControlLabel, {
+    control: /*#__PURE__*/React__default.createElement(Switch, {
+      checked: isEditing,
+      onChange: toggleEdit
+    }),
+    label: editingLabel(isEditing),
+    labelPlacement: "start"
+  })), groupsWithAttributes.length > 0 && /*#__PURE__*/React__default.createElement(vdtReact.GetItem, {
+    itemId: itemId,
+    queryParams: queryParams
+  }, /*#__PURE__*/React__default.createElement(vdtReact.MetadataType, {
+    joinValue: ", "
+  }, /*#__PURE__*/React__default.createElement(ItemCompoundMetadataTable$1, {
+    itemId: itemId,
+    groups: groupsWithAttributes,
+    formatValue: formatValue,
+    isEditing: isEditing,
+    onSuccess: toggleEdit,
+    onError: onError
+  }))));
+}
+
+var ItemCompoundMetadataTab$1 = styles$2p.withStyles({}, {
+  name: 'VdtItemCompoundMetadataTab'
+})(ItemCompoundMetadataTab);
+
+var styles$1r = {
   root: {
     '& > *': {
       marginTop: '20px',
@@ -29380,11 +29602,11 @@ function Editor(_ref) {
   }, "Delete"))));
 }
 
-var Editor$1 = styles$2o.withStyles(styles$1q, {
+var Editor$1 = styles$2p.withStyles(styles$1r, {
   name: 'VdtFieldGroupEditor'
 })(Editor);
 
-var styles$1r = {
+var styles$1s = {
   iconContainer: {
     width: '40px',
     height: '40px',
@@ -29421,11 +29643,11 @@ function FieldIcon(_ref) {
   }));
 }
 
-var FieldIcon$1 = styles$2o.withStyles(styles$1r, {
+var FieldIcon$1 = styles$2p.withStyles(styles$1s, {
   name: 'VdtFieldGroupIcon'
 })(FieldIcon);
 
-var styles$1s = function styles(theme) {
+var styles$1t = function styles(theme) {
   return {
     fieldTitle: {
       lineHeight: '40px',
@@ -29448,7 +29670,7 @@ var styles$1s = function styles(theme) {
       height: '40px'
     },
     activeItem: {
-      backgroundColor: styles$2o.emphasize(theme.palette.background.paper, 0.1),
+      backgroundColor: styles$2p.emphasize(theme.palette.background.paper, 0.1),
       boxSizing: 'border-box',
       fontSize: '14px',
       userSelect: 'none',
@@ -29560,11 +29782,11 @@ function MyField(_ref2) {
   })));
 }
 
-var MyField$1 = styles$2o.withStyles(styles$1s, {
+var MyField$1 = styles$2p.withStyles(styles$1t, {
   name: 'VdtFieldGroupMyField'
 })(MyField);
 
-var styles$1t = {
+var styles$1u = {
   droppable: {
     height: 600
   }
@@ -29614,11 +29836,11 @@ function MyFieldList(_ref) {
   });
 }
 
-var MyFieldList$1 = styles$2o.withStyles(styles$1t, {
+var MyFieldList$1 = styles$2p.withStyles(styles$1u, {
   name: 'VdtFieldGroupMyFieldList'
 })(MyFieldList);
 
-var _excluded$U = ["groupName", "orderedFieldIds"];
+var _excluded$V = ["groupName", "orderedFieldIds"];
 var vFetch = vdtApi.utils.vFetch,
     isRequired = vdtApi.utils.isRequired;
 function updateGroupFieldOrder(_ref) {
@@ -29626,7 +29848,7 @@ function updateGroupFieldOrder(_ref) {
       groupName = _ref$groupName === void 0 ? isRequired() : _ref$groupName,
       _ref$orderedFieldIds = _ref.orderedFieldIds,
       orderedFieldIds = _ref$orderedFieldIds === void 0 ? isRequired() : _ref$orderedFieldIds,
-      props = _objectWithoutProperties(_ref, _excluded$U);
+      props = _objectWithoutProperties(_ref, _excluded$V);
 
   var path = "/API/metadata-field/field-group/".concat(groupName, "/metadata/order");
   return vFetch(_objectSpread2({
@@ -29649,7 +29871,7 @@ function uuidv4$1() {
   });
 }
 
-var styles$1u = {
+var styles$1v = {
   data: {
     display: 'flex',
     width: '100%'
@@ -30388,11 +30610,11 @@ function FieldGroupDesigner(_ref2) {
   }, "Add"))));
 }
 
-var FieldGroupDesigner$1 = styles$2o.withStyles(styles$1u, {
+var FieldGroupDesigner$1 = styles$2p.withStyles(styles$1v, {
   name: 'VdtFieldGroupDesigner'
 })(FieldGroupDesigner);
 
-var _excluded$V = ["entityId", "SelectedFileComponent"],
+var _excluded$W = ["entityId", "SelectedFileComponent"],
     _excluded2$d = ["entityId", "SelectedStorageComponent"],
     _excluded3$5 = ["selected", "SelectedEntities"],
     _excluded4$1 = ["file"],
@@ -30402,7 +30624,7 @@ var FILE = 'FILE';
 var PREFIX = 'PREFIX';
 var LOAD_MORE$1 = 'LOAD_MORE';
 var JOIN_CHARACTER$1 = '_';
-var SelectedFile = styles$2o.withStyles({}, {
+var SelectedFile = styles$2p.withStyles({}, {
   name: 'VdtSelectedFile'
 })(function (_ref) {
   var _ref$className = _ref.className,
@@ -30442,7 +30664,7 @@ function SelectedFileWrapper(_ref2) {
   var entityId = _ref2.entityId,
       _ref2$SelectedFileCom = _ref2.SelectedFileComponent,
       SelectedFileComponent = _ref2$SelectedFileCom === void 0 ? SelectedFile : _ref2$SelectedFileCom,
-      props = _objectWithoutProperties(_ref2, _excluded$V);
+      props = _objectWithoutProperties(_ref2, _excluded$W);
 
   var _React$useState = React__default.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -30468,7 +30690,7 @@ function SelectedFileWrapper(_ref2) {
 
   }, props)) : null;
 }
-var SelectedStorage = styles$2o.withStyles({}, {
+var SelectedStorage = styles$2p.withStyles({}, {
   name: 'VdtSelectedStorage'
 })(function (_ref4) {
   var _ref4$className = _ref4.className,
@@ -30730,7 +30952,7 @@ function FolderListTree(_ref11) {
 
   }, FolderTreeProps));
 }
-var StorageTree = styles$2o.withStyles({}, {
+var StorageTree = styles$2p.withStyles({}, {
   name: 'VdtStorageTree'
 })(function (_ref14) {
   var _ref14$className = _ref14.className,
@@ -30954,7 +31176,7 @@ function StorageListTree(_ref20) {
   , StorageListProps));
 }
 
-var styles$1v = function styles(theme) {
+var styles$1w = function styles(theme) {
   return {
     popper: {
       backgroundColor: theme.palette.background["default"],
@@ -31006,11 +31228,11 @@ function SearchSuggestions(_ref) {
   }))) : null;
 }
 
-var SearchSuggestions$1 = styles$2o.withStyles(styles$1v, {
+var SearchSuggestions$1 = styles$2p.withStyles(styles$1w, {
   name: 'VdtSearchSuggestions'
 })(SearchSuggestions);
 
-var _excluded$W = ["options", "metadataToProps", "parseMetadataOpts", "selected", "onCheck", "onClick"];
+var _excluded$X = ["options", "metadataToProps", "parseMetadataOpts", "selected", "onCheck", "onClick"];
 
 var metadataToProps$4 = function metadataToProps(_ref) {
   var searchResultEntryType = _ref.searchResultEntryType,
@@ -31048,7 +31270,7 @@ function SearchResultRow(_ref4) {
       selected = _ref4.selected,
       onCheck = _ref4.onCheck,
       onClick = _ref4.onClick,
-      innerProps = _objectWithoutProperties(_ref4, _excluded$W);
+      innerProps = _objectWithoutProperties(_ref4, _excluded$X);
 
   var searchResultEntryType = innerProps.searchResultEntryType;
   var rowValues = React__default.useMemo(function () {
@@ -31086,7 +31308,7 @@ function SearchResultRow(_ref4) {
   }));
 }
 
-var _excluded$X = ["searchResultType", "RowComponent", "options", "onCheck", "onRowClick"];
+var _excluded$Y = ["searchResultType", "RowComponent", "options", "onCheck", "onRowClick"];
 function SearchResultTable(_ref) {
   var _ref$searchResultType = _ref.searchResultType,
       searchResultType = _ref$searchResultType === void 0 ? {} : _ref$searchResultType,
@@ -31096,7 +31318,7 @@ function SearchResultTable(_ref) {
       options = _ref$options === void 0 ? [] : _ref$options,
       onCheck = _ref.onCheck,
       onRowClick = _ref.onRowClick,
-      innerProps = _objectWithoutProperties(_ref, _excluded$X);
+      innerProps = _objectWithoutProperties(_ref, _excluded$Y);
 
   var _searchResultType$ent = searchResultType.entry,
       entryList = _searchResultType$ent === void 0 ? [] : _searchResultType$ent;
@@ -31147,11 +31369,11 @@ function FolderMultipleIcon(props) {
   }, props));
 }
 
-var _excluded$Y = ["collectionId"];
+var _excluded$Z = ["collectionId"];
 
 function SavedSearchAccessList(_ref) {
   var collectionId = _ref.collectionId,
-      props = _objectWithoutProperties(_ref, _excluded$Y);
+      props = _objectWithoutProperties(_ref, _excluded$Z);
 
   var _useEntityAccess = vdtReact.useEntityAccess({
     entityId: collectionId,
@@ -31178,8 +31400,8 @@ function SavedSearchAccessList(_ref) {
   }, props));
 }
 
-var _excluded$Z = ["classes", "collectionId"];
-var styles$1w = {
+var _excluded$_ = ["classes", "collectionId"];
+var styles$1x = {
   actionsSubmit: {
     width: '100%'
   },
@@ -31191,7 +31413,7 @@ var styles$1w = {
 function ShareSearch(_ref) {
   var classes = _ref.classes,
       collectionId = _ref.collectionId,
-      props = _objectWithoutProperties(_ref, _excluded$Z);
+      props = _objectWithoutProperties(_ref, _excluded$_);
 
   var handleSubmit = function handleSubmit(args) {
     return vdtApi.access.createEntityAccess(_objectSpread2(_objectSpread2({}, args), {}, {
@@ -31215,14 +31437,14 @@ function ShareSearch(_ref) {
   }, props));
 }
 
-var ShareSearch$1 = styles$2o.withStyles(styles$1w, {
+var ShareSearch$1 = styles$2p.withStyles(styles$1x, {
   name: 'VdtShareSearch'
 })(ShareSearch);
 
 var SHARE_MENU = 'SHARE_MENU';
 var LISTACCESS_MENU = 'LISTACCESS_MENU';
 
-var styles$1x = function styles(theme) {
+var styles$1y = function styles(theme) {
   return {
     root: {
       '&:hover $SubmitSearchIcon': {
@@ -31572,12 +31794,12 @@ function SavedSearchRow(_ref) {
   }, ListAccessProps)))));
 }
 
-var SavedSearchRow$1 = styles$2o.withStyles(styles$1x, {
+var SavedSearchRow$1 = styles$2p.withStyles(styles$1y, {
   name: 'VdtSavedSearchRow'
 })(SavedSearchRow);
 
-var _excluded$_ = ["searchProps", "searchPlaceholderText", "onSelect", "onDelete", "onUpdateSearchMetadata", "RowComponent", "RowProps", "accessTranslate"];
-var styles$1y = {};
+var _excluded$$ = ["searchProps", "searchPlaceholderText", "onSelect", "onDelete", "onUpdateSearchMetadata", "RowComponent", "RowProps", "accessTranslate"];
+var styles$1z = {};
 
 function SavedSearchList(_ref) {
   var searchProps = _ref.searchProps,
@@ -31591,7 +31813,7 @@ function SavedSearchList(_ref) {
       _ref$RowProps = _ref.RowProps,
       RowProps = _ref$RowProps === void 0 ? {} : _ref$RowProps,
       accessTranslate = _ref.accessTranslate,
-      props = _objectWithoutProperties(_ref, _excluded$_);
+      props = _objectWithoutProperties(_ref, _excluded$$);
 
   return /*#__PURE__*/React__default.createElement(CollectionSearchPicker$1, _extends({
     searchProps: searchProps,
@@ -31631,11 +31853,11 @@ function SavedSearchList(_ref) {
   }, props));
 }
 
-var SavedSearchList$1 = styles$2o.withStyles(styles$1y, {
+var SavedSearchList$1 = styles$2p.withStyles(styles$1z, {
   name: 'VdtSavedSearchList'
 })(SavedSearchList);
 
-var styles$1z = function styles(theme) {
+var styles$1A = function styles(theme) {
   return {
     root: {
       paddingTop: theme.spacing(1),
@@ -31703,11 +31925,11 @@ function SaveSearchForm(_ref) {
   }, saveText));
 }
 
-var SaveSearchForm$1 = styles$2o.withStyles(styles$1z, {
+var SaveSearchForm$1 = styles$2p.withStyles(styles$1A, {
   name: 'VdtSaveSearchForm'
 })(SaveSearchForm);
 
-var styles$1A = function styles(theme) {
+var styles$1B = function styles(theme) {
   return {
     root: {
       padding: theme.spacing(2)
@@ -31776,11 +31998,11 @@ function SavedSearch(_ref) {
   }, SearchListProps)));
 }
 
-var SavedSearch$1 = styles$2o.withStyles(styles$1A, {
+var SavedSearch$1 = styles$2p.withStyles(styles$1B, {
   name: 'VdtSavedSearchList'
 })(SavedSearch);
 
-var styles$1B = function styles(theme) {
+var styles$1C = function styles(theme) {
   return {
     suggestion: {
       '&:hover': {
@@ -31913,7 +32135,7 @@ function SpellCheck(_ref4) {
   }));
 }
 
-var SpellCheck$1 = styles$2o.withStyles(styles$1B, {
+var SpellCheck$1 = styles$2p.withStyles(styles$1C, {
   name: 'VdtSpellCheck'
 })(SpellCheck);
 
@@ -40049,10 +40271,10 @@ var SelectCreatable$1 = makeCreatableSelect(Select);
 var SelectCreatableState = manageState(SelectCreatable$1);
 var AsyncCreatable = makeAsyncSelect(SelectCreatableState);
 
-var _excluded$$ = ["isFocused"],
+var _excluded$10 = ["isFocused"],
     _excluded2$e = ["inputRef"];
 
-var styles$1C = function styles(theme) {
+var styles$1D = function styles(theme) {
   return {
     root: {
       width: '100%',
@@ -40125,7 +40347,7 @@ var styles$1C = function styles(theme) {
 
 var createTabelDefaultStyles = function createTabelDefaultStyles(_ref) {
   var isFocused = _ref.isFocused,
-      props = _objectWithoutProperties(_ref, _excluded$$);
+      props = _objectWithoutProperties(_ref, _excluded$10);
 
   return function (theme) {
     return _objectSpread2({
@@ -40567,7 +40789,7 @@ function SearchField(_ref5) {
   , SearchIconsProps)));
 }
 
-var SearchField$1 = styles$2o.withStyles(styles$1C, {
+var SearchField$1 = styles$2p.withStyles(styles$1D, {
   withTheme: true,
   name: 'VdtSearchField'
 })(SearchField);
@@ -40623,7 +40845,7 @@ SearchField.defaultProps = {
   ProgressProps: {}
 };
 
-var styles$1D = function styles() {
+var styles$1E = function styles() {
   return {
     root: {
       marginRight: 4,
@@ -40732,11 +40954,11 @@ function AddFolderRow(_ref) {
   }, /*#__PURE__*/React__default.createElement(CancelIcon, null)));
 }
 
-var AddFolderRow$1 = core.withStyles(styles$1D, {
+var AddFolderRow$1 = core.withStyles(styles$1E, {
   name: 'VdtAddFolderRow'
 })(AddFolderRow);
 
-var _excluded$10 = ["classes", "id", "queryParams", "markerProps", "childFolders", "metadata", "itemSearchDocument", "folderDepth", "type", "hideSubFolderSharing", "onSelect", "onRemoveItem", "indentationValues", "indentationProps", "FolderRowContentComponent", "FolderRowContentProps", "AddRowComponent", "AddRowProps", "FolderRowContentWrapperComponent", "FolderRowContentWrapperProps"];
+var _excluded$11 = ["classes", "id", "queryParams", "markerProps", "childFolders", "metadata", "itemSearchDocument", "folderDepth", "type", "hideSubFolderSharing", "onSelect", "onRemoveItem", "indentationValues", "indentationProps", "FolderRowContentComponent", "FolderRowContentProps", "AddRowComponent", "AddRowProps", "FolderRowContentWrapperComponent", "FolderRowContentWrapperProps"];
 var defaultmarkerProps = {
   markerValue: 'savedSearch',
   markerField: 'eidr_referentType'
@@ -40748,7 +40970,7 @@ var defaultIndentationProps = {
   defalutNewRowIndentation: 10
 };
 
-var styles$1E = function styles() {
+var styles$1F = function styles() {
   return {
     root: {
       display: 'flex',
@@ -40802,7 +41024,7 @@ function FolderRowContent(_ref) {
   }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children));
 }
 
-var FolderRowContentWrapper = vdtReact.compose(styles$2o.withStyles(folderRowContentStyles, {
+var FolderRowContentWrapper = vdtReact.compose(styles$2p.withStyles(folderRowContentStyles, {
   name: 'VdtFolderRowContentWrapper'
 }))(FolderRowContent);
 
@@ -40841,7 +41063,7 @@ function FolderRow(_ref2) {
       FolderRowContentWrapperComponent = _ref2$FolderRowConten3 === void 0 ? FolderRowContentWrapper : _ref2$FolderRowConten3,
       _ref2$FolderRowConten4 = _ref2.FolderRowContentWrapperProps,
       FolderRowContentWrapperProps = _ref2$FolderRowConten4 === void 0 ? {} : _ref2$FolderRowConten4,
-      props = _objectWithoutProperties(_ref2, _excluded$10);
+      props = _objectWithoutProperties(_ref2, _excluded$11);
 
   var _React$useState = React__default.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -41015,14 +41237,14 @@ function FolderRow(_ref2) {
   }));
 }
 
-var FolderRow$1 = styles$2o.withStyles(styles$1E, {
+var FolderRow$1 = styles$2p.withStyles(styles$1F, {
   name: 'VdtFolderRow'
 })(FolderRow);
 
-var _excluded$11 = ["value", "onChange"],
+var _excluded$12 = ["value", "onChange"],
     _excluded2$f = ["value", "onChange"],
     _excluded3$6 = ["displayType", "withAutocomplete", "autoCompleteHoc", "type"];
-var styles$1F = function styles() {
+var styles$1G = function styles() {
   return {
     root: {
       '& .MuiFormHelperText-root': {
@@ -41048,7 +41270,7 @@ function withUpdateOnBlur(InputComponent) {
   return function (_ref) {
     var value = _ref.value,
         onChange = _ref.onChange,
-        props = _objectWithoutProperties(_ref, _excluded$11);
+        props = _objectWithoutProperties(_ref, _excluded$12);
 
     var _React$useState = React__default.useState(value),
         _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -41180,12 +41402,12 @@ QueryInput.defaultProps = {
   autoCompleteHoc: function autoCompleteHoc() {}
 };
 
-var QueryInput$1 = styles$2o.withStyles(styles$1F, {
+var QueryInput$1 = styles$2p.withStyles(styles$1G, {
   name: 'VdtQueryInput'
 })(QueryInput);
 
-var _excluded$12 = ["classes", "className", "field", "onChange", "InputComponent"];
-var styles$1G = function styles(theme) {
+var _excluded$13 = ["classes", "className", "field", "onChange", "InputComponent"];
+var styles$1H = function styles(theme) {
   return {
     root: {
       width: '50%'
@@ -41203,7 +41425,7 @@ function QueryBetween(_ref) {
       field = _ref.field,
       _onChange = _ref.onChange,
       InputComponent = _ref.InputComponent,
-      props = _objectWithoutProperties(_ref, _excluded$12);
+      props = _objectWithoutProperties(_ref, _excluded$13);
 
   var betweenField = function betweenField(min, max) {
     return {
@@ -41272,12 +41494,12 @@ QueryBetween.defaultProps = {
   InputComponent: QueryInput$1
 };
 
-var QueryBetween$1 = styles$2o.withStyles(styles$1G, {
+var QueryBetween$1 = styles$2p.withStyles(styles$1H, {
   name: 'VdtQueryBetween'
 })(QueryBetween);
 
-var _excluded$13 = ["classes", "className", "field", "onChange", "InputComponent"];
-var styles$1H = function styles() {
+var _excluded$14 = ["classes", "className", "field", "onChange", "InputComponent"];
+var styles$1I = function styles() {
   return {
     root: {}
   };
@@ -41288,7 +41510,7 @@ function QueryEquals(_ref) {
       field = _ref.field,
       _onChange = _ref.onChange,
       InputComponent = _ref.InputComponent,
-      props = _objectWithoutProperties(_ref, _excluded$13);
+      props = _objectWithoutProperties(_ref, _excluded$14);
 
   var equalsField = function equalsField(value) {
     return {
@@ -41342,12 +41564,12 @@ QueryEquals.defaultProps = {
   InputComponent: QueryInput$1
 };
 
-var QueryEquals$1 = styles$2o.withStyles(styles$1H, {
+var QueryEquals$1 = styles$2p.withStyles(styles$1I, {
   name: 'VdtQueryEquals'
 })(QueryEquals);
 
-var _excluded$14 = ["classes", "className", "field", "onChange", "InputComponent"];
-var styles$1I = function styles() {
+var _excluded$15 = ["classes", "className", "field", "onChange", "InputComponent"];
+var styles$1J = function styles() {
   return {
     root: {}
   };
@@ -41358,7 +41580,7 @@ function QueryContains(_ref) {
       field = _ref.field,
       _onChange = _ref.onChange,
       InputComponent = _ref.InputComponent,
-      props = _objectWithoutProperties(_ref, _excluded$14);
+      props = _objectWithoutProperties(_ref, _excluded$15);
 
   var equalsField = function equalsField(value) {
     return {
@@ -41412,11 +41634,11 @@ QueryContains.defaultProps = {
   InputComponent: QueryInput$1
 };
 
-var QueryContains$1 = styles$2o.withStyles(styles$1I, {
+var QueryContains$1 = styles$2p.withStyles(styles$1J, {
   name: 'VdtQueryContains'
 })(QueryContains);
 
-var _excluded$15 = ["value", "options", "onChange", "equalsText", "containsText", "betweenText"];
+var _excluded$16 = ["value", "options", "onChange", "equalsText", "containsText", "betweenText"];
 var defaultPredicates = {
   equals: {
     label: 'Equals',
@@ -41520,7 +41742,7 @@ function PredicatePicker(_ref2) {
       equalsText = _ref2.equalsText,
       containsText = _ref2.containsText,
       betweenText = _ref2.betweenText,
-      props = _objectWithoutProperties(_ref2, _excluded$15);
+      props = _objectWithoutProperties(_ref2, _excluded$16);
 
   return /*#__PURE__*/React__default.createElement(Select$1, _extends({
     value: value,
@@ -41538,7 +41760,7 @@ function PredicatePicker(_ref2) {
   }));
 }
 
-var styles$1J = function styles(theme) {
+var styles$1K = function styles(theme) {
   return {
     root: {
       '& > *': {
@@ -41763,7 +41985,7 @@ QueryField.defaultProps = {
   PredicateComponentProps: {}
 };
 
-var QueryField$1 = styles$2o.withStyles(styles$1J, {
+var QueryField$1 = styles$2p.withStyles(styles$1K, {
   name: 'VdtQueryField'
 })(QueryField);
 
@@ -41774,7 +41996,7 @@ var stopProp = function stopProp(f) {
   };
 };
 
-var styles$1K = function styles(theme) {
+var styles$1L = function styles(theme) {
   return {
     root: {},
     errorButton: {
@@ -41945,7 +42167,7 @@ QueryGroup.defaultProps = {
   }
 };
 
-var QueryGroup$1 = styles$2o.withStyles(styles$1K, {
+var QueryGroup$1 = styles$2p.withStyles(styles$1L, {
   name: 'VdtQueryGroup'
 })(QueryGroup);
 
@@ -41956,7 +42178,7 @@ var stopProp$1 = function stopProp(f) {
   };
 };
 
-var styles$1L = function styles(theme) {
+var styles$1M = function styles(theme) {
   return {
     root: {},
     errorButton: {
@@ -42124,7 +42346,7 @@ QueryOperator.defaultProps = {
   onChangeOperation: undefined
 };
 
-var QueryOperator$1 = styles$2o.withStyles(styles$1L, {
+var QueryOperator$1 = styles$2p.withStyles(styles$1M, {
   name: 'VdtQueryOperator'
 })(QueryOperator);
 
@@ -42202,9 +42424,9 @@ var useQueryBuilder = function useQueryBuilder(path) {
   };
 };
 
-var _excluded$16 = ["canExpandpath", "path", "fields", "groups", "defaultField", "defaultGroup", "not", "nodeId", "canExpand", "parentGroup", "onRemove"],
+var _excluded$17 = ["canExpandpath", "path", "fields", "groups", "defaultField", "defaultGroup", "not", "nodeId", "canExpand", "parentGroup", "onRemove"],
     _excluded2$g = ["uuid"];
-var styles$1M = function styles(theme) {
+var styles$1N = function styles(theme) {
   return {
     root: {
       '&:focus > .MuiTreeItem-content .MuiTreeItem-label': {
@@ -42217,8 +42439,8 @@ var styles$1M = function styles(theme) {
     },
     queryGroup: {
       position: 'relative',
-      border: "1px solid ".concat(styles$2o.alpha(theme.palette.text.primary, 0.05)),
-      backgroundColor: styles$2o.alpha(theme.palette.text.primary, 0.02),
+      border: "1px solid ".concat(styles$2p.alpha(theme.palette.text.primary, 0.05)),
+      backgroundColor: styles$2p.alpha(theme.palette.text.primary, 0.02),
       borderRadius: '4px',
       margin: '1rem 1rem 1rem 0',
       '& .MuiTreeItem-iconContainer': {
@@ -42253,7 +42475,7 @@ function QueryEntry(_ref) {
       canExpand = _ref.canExpand,
       parentGroup = _ref.parentGroup,
       onRemove = _ref.onRemove,
-      props = _objectWithoutProperties(_ref, _excluded$16);
+      props = _objectWithoutProperties(_ref, _excluded$17);
 
   var expandNode = props.expandNode,
       OperatorComponent = props.OperatorComponent,
@@ -42476,13 +42698,13 @@ QueryEntry.defaultProps = {
   onRemove: undefined
 };
 
-var QueryEntry$1 = styles$2o.withStyles(styles$1M, {
+var QueryEntry$1 = styles$2p.withStyles(styles$1N, {
   name: 'VdtQueryEntry'
 })(QueryEntry);
 
-var _excluded$17 = ["uuid"],
+var _excluded$18 = ["uuid"],
     _excluded2$h = ["uuid", "predicate"];
-var styles$1N = function styles(theme) {
+var styles$1O = function styles(theme) {
   return {
     root: {},
     treeRoot: {
@@ -42499,7 +42721,7 @@ var styles$1N = function styles(theme) {
 var queryToItemSearchDocument = function queryToItemSearchDocument(query) {
   function toGroupOrOperator(_ref) {
     var uuid = _ref.uuid,
-        entry = _objectWithoutProperties(_ref, _excluded$17);
+        entry = _objectWithoutProperties(_ref, _excluded$18);
 
     var isOperator = entry.operation;
 
@@ -42673,11 +42895,11 @@ QueryBuilder.defaultProps = {
   QueryEntryProps: {}
 };
 
-var QueryBuilder$1 = styles$2o.withStyles(styles$1N, {
+var QueryBuilder$1 = styles$2p.withStyles(styles$1O, {
   name: 'VdtQueryBuilder'
 })(QueryBuilder);
 
-var styles$1O = function styles(theme) {
+var styles$1P = function styles(theme) {
   return {
     root: {
       padding: theme.spacing(1)
@@ -42804,7 +43026,7 @@ QueryBuilderCard.defaultProps = {
   searchButtonProps: {}
 };
 
-var index$4 = styles$2o.withStyles(styles$1O, {
+var index$4 = styles$2p.withStyles(styles$1P, {
   name: 'VdtQueryBuilderCard'
 })(QueryBuilderCard);
 
@@ -42867,11 +43089,11 @@ function BinListMenu(_ref) {
   })))));
 }
 
-var BinListMenu$1 = styles$2o.withStyles({}, {
+var BinListMenu$1 = styles$2p.withStyles({}, {
   name: 'VdtBinListMenu'
 })(BinListMenu);
 
-var _excluded$18 = ["entityType", "entity", "entityComponents"];
+var _excluded$19 = ["entityType", "entity", "entityComponents"];
 
 var _defaultEntityCompone;
 var ITEM$1 = 'item';
@@ -42882,7 +43104,7 @@ function EntityCard(_ref) {
       entity = _ref.entity,
       _ref$entityComponents = _ref.entityComponents,
       entityComponents = _ref$entityComponents === void 0 ? defaultEntityComponents : _ref$entityComponents,
-      props = _objectWithoutProperties(_ref, _excluded$18);
+      props = _objectWithoutProperties(_ref, _excluded$19);
 
   if (!entityType) return null;
 
@@ -42903,7 +43125,7 @@ function EntityCard(_ref) {
   , entityProps);
 }
 
-var _excluded$19 = ["children", "classes", "className"];
+var _excluded$1a = ["children", "classes", "className"];
 var BIN_ENTITY_TYPE = 'BIN';
 
 var BinItemMenu = function BinItemMenu(_ref) {
@@ -42922,7 +43144,7 @@ var BinContent = function BinContent(_ref2) {
   var children = _ref2.children,
       classes = _ref2.classes,
       className = _ref2.className,
-      props = _objectWithoutProperties(_ref2, _excluded$19);
+      props = _objectWithoutProperties(_ref2, _excluded$1a);
 
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: clsx(className, classes.root)
@@ -42943,13 +43165,13 @@ var binContentDroppableStyles = function binContentDroppableStyles(theme) {
     canDrop: {
       boxShadow: "inset 0px 0px 1px 1px ".concat(theme.palette.primary.main),
       '&.VdtDroppable-isOver': {
-        backgroundColor: styles$2o.emphasize(theme.palette.background.paper, 0.05)
+        backgroundColor: styles$2p.emphasize(theme.palette.background.paper, 0.05)
       }
     }
   };
 };
 
-var BinContentDroppable = vdtReact.compose(styles$2o.withStyles(binContentDroppableStyles, {
+var BinContentDroppable = vdtReact.compose(styles$2p.withStyles(binContentDroppableStyles, {
   name: 'VdtBinContentDroppable'
 }), withDrop)(BinContent);
 var entityCardDraggableStyles = {
@@ -42957,10 +43179,10 @@ var entityCardDraggableStyles = {
     opacity: 0
   }
 };
-var EntityCardDraggable = vdtReact.compose(styles$2o.withStyles(entityCardDraggableStyles, {
+var EntityCardDraggable = vdtReact.compose(styles$2p.withStyles(entityCardDraggableStyles, {
   name: 'VdtEntityCardDraggable'
 }), withDrag)(EntityCard);
-var styles$1P = {
+var styles$1Q = {
   root: {
     minWidth: 340
   }
@@ -43149,11 +43371,11 @@ function BinList(_ref3) {
   }, AddToCollectionDialogProps))));
 }
 
-var BinList$1 = styles$2o.withStyles(styles$1P, {
+var BinList$1 = styles$2p.withStyles(styles$1Q, {
   name: 'VdtBinList'
 })(BinList);
 
-var _excluded$1a = ["entityType", "entityId", "entity", "index", "CollectionCardComponent", "ItemCardComponent", "CollectionCardProps", "ItemCardProps"];
+var _excluded$1b = ["entityType", "entityId", "entity", "index", "CollectionCardComponent", "ItemCardComponent", "CollectionCardProps", "ItemCardProps"];
 function EntityGridItem(_ref) {
   var entityType = _ref.entityType,
       entityId = _ref.entityId,
@@ -43167,7 +43389,7 @@ function EntityGridItem(_ref) {
       CollectionCardProps = _ref$CollectionCardPr === void 0 ? {} : _ref$CollectionCardPr,
       _ref$ItemCardProps = _ref.ItemCardProps,
       ItemCardProps = _ref$ItemCardProps === void 0 ? {} : _ref$ItemCardProps,
-      props = _objectWithoutProperties(_ref, _excluded$1a);
+      props = _objectWithoutProperties(_ref, _excluded$1b);
 
   var isCollection = entityType === 'COLLECTION';
   var isItem = entityType === 'ITEM';
@@ -43188,8 +43410,8 @@ function EntityGridItem(_ref) {
   }, ItemCardProps)));
 }
 
-var _excluded$1b = ["className", "classes", "isDragging"];
-var styles$1Q = {
+var _excluded$1c = ["className", "classes", "isDragging"];
+var styles$1R = {
   root: {},
   rootIsDragging: {
     opacity: 0.5,
@@ -43201,7 +43423,7 @@ var EntityGridItemDraggable = function EntityGridItemDraggable(_ref) {
   var className = _ref.className,
       classes = _ref.classes,
       isDragging = _ref.isDragging,
-      props = _objectWithoutProperties(_ref, _excluded$1b);
+      props = _objectWithoutProperties(_ref, _excluded$1c);
 
   return /*#__PURE__*/React__default.createElement(EntityGridItem, _extends({
     className: clsx(classes.root, 'VdtEntityGridItemDraggable-root', isDragging && classes.rootIsDragging, isDragging && 'VdtEntityGridItemDraggable-rootIsDragging', className) // eslint-disable-next-line react/jsx-props-no-spreading
@@ -43209,7 +43431,7 @@ var EntityGridItemDraggable = function EntityGridItemDraggable(_ref) {
   }, props));
 };
 
-var EntityGridItemDraggable$1 = vdtReact.compose(withDrag, core.withStyles(styles$1Q, {
+var EntityGridItemDraggable$1 = vdtReact.compose(withDrag, core.withStyles(styles$1R, {
   name: 'VdtEntityGridItemDraggable'
 }))(EntityGridItemDraggable);
 
@@ -43260,7 +43482,7 @@ function EntityGrid(_ref) {
   }));
 }
 
-var _excluded$1c = ["entityType", "entityId", "entity", "collectionOptions", "itemOptions", "onCollectionClick", "onItemClick"];
+var _excluded$1d = ["entityType", "entityId", "entity", "collectionOptions", "itemOptions", "onCollectionClick", "onItemClick"];
 function EntityTableRow(_ref) {
   var entityType = _ref.entityType,
       entityId = _ref.entityId,
@@ -43271,7 +43493,7 @@ function EntityTableRow(_ref) {
       itemOptions = _ref$itemOptions === void 0 ? [] : _ref$itemOptions,
       onCollectionClick = _ref.onCollectionClick,
       onItemClick = _ref.onItemClick,
-      props = _objectWithoutProperties(_ref, _excluded$1c);
+      props = _objectWithoutProperties(_ref, _excluded$1d);
 
   var isCollection = entityType === 'COLLECTION';
   var isItem = entityType === 'ITEM';
@@ -43290,8 +43512,8 @@ function EntityTableRow(_ref) {
   }, props)));
 }
 
-var _excluded$1d = ["className", "classes", "isDragging"];
-var styles$1R = {
+var _excluded$1e = ["className", "classes", "isDragging"];
+var styles$1S = {
   root: {},
   rootIsDragging: {
     opacity: 0.5,
@@ -43303,7 +43525,7 @@ var EntityTableRowDraggable = function EntityTableRowDraggable(_ref) {
   var className = _ref.className,
       classes = _ref.classes,
       isDragging = _ref.isDragging,
-      props = _objectWithoutProperties(_ref, _excluded$1d);
+      props = _objectWithoutProperties(_ref, _excluded$1e);
 
   return /*#__PURE__*/React__default.createElement(EntityTableRow, _extends({
     className: clsx(classes.root, 'VdtEntityTableRowDraggable-root', isDragging && classes.rootIsDragging, isDragging && 'VdtEntityTableRowDraggable-rootIsDragging', className) // eslint-disable-next-line react/jsx-props-no-spreading
@@ -43311,7 +43533,7 @@ var EntityTableRowDraggable = function EntityTableRowDraggable(_ref) {
   }, props));
 };
 
-var EntityTableRowDraggable$1 = vdtReact.compose(withDrag, core.withStyles(styles$1R, {
+var EntityTableRowDraggable$1 = vdtReact.compose(withDrag, core.withStyles(styles$1S, {
   name: 'VdtEntityTableRowDraggable'
 }))(EntityTableRowDraggable);
 
@@ -43384,7 +43606,7 @@ function EntityTable(_ref) {
   }) : null));
 }
 
-var styles$1S = function styles() {
+var styles$1T = function styles() {
   return {
     root: {},
     entityCard: {
@@ -43520,7 +43742,7 @@ function EntityDeleteDialog(_ref) {
   }, confirmButtonText)));
 }
 
-var EntityDeleteDialog$1 = styles$2o.withStyles(styles$1S, 'VdtEntityDeleteDialog')(EntityDeleteDialog);
+var EntityDeleteDialog$1 = styles$2p.withStyles(styles$1T, 'VdtEntityDeleteDialog')(EntityDeleteDialog);
 EntityDeleteDialog.propTypes = {
   open: propTypes.bool,
   onClose: propTypes.func,
@@ -43749,7 +43971,7 @@ var useComments = function useComments(_ref) {
   };
 };
 
-var styles$1T = function styles(theme) {
+var styles$1U = function styles(theme) {
   return {
     root: {
       display: 'flex',
@@ -43875,7 +44097,7 @@ function EntityCommentCard(_ref) {
   })))));
 }
 
-var EntityCommentCard$1 = styles$2o.withStyles(styles$1T, {
+var EntityCommentCard$1 = styles$2p.withStyles(styles$1U, {
   name: 'VdtEntityCommentCard'
 })(EntityCommentCard);
 EntityCommentCard.propTypes = {
@@ -43903,7 +44125,7 @@ EntityCommentCard.defaultProps = {
   UserIconComponent: UserIcon
 };
 
-var styles$1U = function styles(theme) {
+var styles$1V = function styles(theme) {
   return {
     root: {
       paddingTop: theme.spacing(2)
@@ -44055,7 +44277,7 @@ function EntityComment(_ref) {
   }) : null));
 }
 
-var EntityComment$1 = styles$2o.withStyles(styles$1U, {
+var EntityComment$1 = styles$2p.withStyles(styles$1V, {
   name: 'VdtEntityComment'
 })(EntityComment);
 EntityComment.propTypes = {
@@ -44346,7 +44568,7 @@ var EntityTreeList = function EntityTreeList(_ref3) {
   }, DropZoneProps)));
 };
 
-var _excluded$1e = ["entry"];
+var _excluded$1f = ["entry"];
 var defaultSearchState = {
   interval: 'generic',
   queryParams: {
@@ -44377,7 +44599,7 @@ var defaultSearchState = {
     }]
   }
 };
-var styles$1V = {
+var styles$1W = {
   root: {}
 };
 
@@ -44470,7 +44692,7 @@ var EntityTree = function EntityTree(_ref) {
 
         var _data$entry = data.entry,
             newEntries = _data$entry === void 0 ? [] : _data$entry,
-            newEntryProps = _objectWithoutProperties(data, _excluded$1e);
+            newEntryProps = _objectWithoutProperties(data, _excluded$1f);
 
         setSearchResultType(function (old) {
           return _objectSpread2(_objectSpread2({}, newEntryProps), {}, {
@@ -44542,7 +44764,7 @@ var EntityTree = function EntityTree(_ref) {
   }, EntityTreeListProps))));
 };
 
-var EntityTree$1 = core.withStyles(styles$1V, {
+var EntityTree$1 = core.withStyles(styles$1W, {
   name: 'VdtEntityTree'
 })(EntityTree);
 
@@ -44565,7 +44787,7 @@ function LinearProgressWithLabel(props) {
   }, "".concat(Math.round(value), "%"))));
 }
 
-var styles$1W = function styles(theme) {
+var styles$1X = function styles(theme) {
   return {
     fileListItemSecondaryAction: {
       visibility: 'hidden'
@@ -44575,7 +44797,7 @@ var styles$1W = function styles(theme) {
       '&:not(:first-of-type)': {
         marginTop: theme.spacing(0.5)
       },
-      backgroundColor: styles$2o.emphasize(theme.palette.background.paper, 0.05),
+      backgroundColor: styles$2p.emphasize(theme.palette.background.paper, 0.05),
       '&:hover $fileListItemSecondaryAction': {
         visibility: 'visible'
       },
@@ -44591,7 +44813,7 @@ var styles$1W = function styles(theme) {
     },
     fileListItemContainerHover: {
       '&:hover': {
-        backgroundColor: styles$2o.emphasize(theme.palette.background.paper, 0.1)
+        backgroundColor: styles$2p.emphasize(theme.palette.background.paper, 0.1)
       }
     },
     successIcon: {
@@ -44744,15 +44966,15 @@ function UploadListItem(_ref) {
   }, /*#__PURE__*/React__default.createElement(DeleteIcon$1, null))));
 }
 
-var UploadListItem$1 = styles$2o.withStyles(styles$1W, {
+var UploadListItem$1 = styles$2p.withStyles(styles$1X, {
   name: 'VdtUploadListItem'
 })(UploadListItem);
 
-var _excluded$1f = ["path", "files"];
+var _excluded$1g = ["path", "files"];
 function UploadListFolder(_ref) {
   var path = _ref.path,
       descendants = _ref.files,
-      props = _objectWithoutProperties(_ref, _excluded$1f);
+      props = _objectWithoutProperties(_ref, _excluded$1g);
 
   var totalBytes = descendants.reduce(function (total, f) {
     return total + f.file.size || 0;
@@ -44779,7 +45001,7 @@ function UploadListFolder(_ref) {
   }, props));
 }
 
-var styles$1X = function styles(theme) {
+var styles$1Y = function styles(theme) {
   return {
     form: {
       '& > *': {
@@ -44854,11 +45076,11 @@ function UploadForm(_ref) {
   })));
 }
 
-var UploadForm$1 = styles$2o.withStyles(styles$1X, {
+var UploadForm$1 = styles$2p.withStyles(styles$1Y, {
   name: 'VdtUploadForm'
 })(UploadForm);
 
-var styles$1Y = function styles(theme) {
+var styles$1Z = function styles(theme) {
   return {
     root: {
       backgroundColor: theme.palette.action.selected,
@@ -44916,11 +45138,11 @@ function UploadEditor(_ref) {
   }, UploadFormProps))));
 }
 
-var UploadEditor$1 = styles$2o.withStyles(styles$1Y, {
+var UploadEditor$1 = styles$2p.withStyles(styles$1Z, {
   name: 'VdtUploadEditor'
 })(UploadEditor);
 
-var _excluded$1g = ["fileTree", "files"];
+var _excluded$1h = ["fileTree", "files"];
 
 function fileToPathTree(file) {
   var result = {};
@@ -44947,7 +45169,7 @@ function parseFilesIntoTree(files) {
 function FileTreeNode(_ref) {
   var fileTree = _ref.fileTree,
       files = _ref.files,
-      props = _objectWithoutProperties(_ref, _excluded$1g);
+      props = _objectWithoutProperties(_ref, _excluded$1h);
 
   var clickFile = props.clickFile,
       removeFile = props.removeFile,
@@ -45158,14 +45380,14 @@ function SplitButton(_ref) {
   }))))));
 }
 
-var SplitButton$1 = styles$2o.withStyles({}, {
+var SplitButton$1 = styles$2p.withStyles({}, {
   name: 'VdtSplitButton'
 })(SplitButton);
 
-var _excluded$1h = ["selected", "startIndex", "onClickFile", "removeFiles"],
+var _excluded$1i = ["selected", "startIndex", "onClickFile", "removeFiles"],
     _excluded2$i = ["onSubmit"];
 
-var styles$1Z = function styles(theme) {
+var styles$1_ = function styles(theme) {
   return {
     root: {
       paddingLeft: theme.spacing(2),
@@ -45217,7 +45439,7 @@ var styles$1Z = function styles(theme) {
       marginBottom: theme.spacing(1)
     },
     editorOpen: {
-      backgroundColor: styles$2o.emphasize(theme.palette.background.paper, 0.05)
+      backgroundColor: styles$2p.emphasize(theme.palette.background.paper, 0.05)
     },
     isEditing: {
       width: '50%'
@@ -45239,7 +45461,7 @@ function ExtendedFileTree(_ref) {
       startIndex = _ref$startIndex === void 0 ? 0 : _ref$startIndex,
       onClickFile = _ref.onClickFile,
       removeFiles = _ref.removeFiles,
-      rest = _objectWithoutProperties(_ref, _excluded$1h);
+      rest = _objectWithoutProperties(_ref, _excluded$1i);
 
   var handleClickFile = function handleClickFile(idx) {
     return onClickFile(idx + startIndex);
@@ -45553,15 +45775,15 @@ function Upload(_ref4) {
   }, UploadCollectionPickerProps))));
 }
 
-var Upload$1 = styles$2o.withStyles(styles$1Z, {
+var Upload$1 = styles$2p.withStyles(styles$1_, {
   name: 'VdtUpload'
 })(Upload);
 
-var _excluded$1i = ["children"];
+var _excluded$1j = ["children"];
 var MediaCardContext = /*#__PURE__*/React__default.createContext();
 var MediaCardProvider = function MediaCardProvider(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1i);
+      props = _objectWithoutProperties(_ref, _excluded$1j);
 
   return /*#__PURE__*/React__default.createElement(MediaCardContext.Provider, {
     value: props
@@ -45577,9 +45799,9 @@ var useMediaCardContext = function useMediaCardContext() {
   return context;
 };
 
-var _excluded$1j = ["classes", "className", "title", "titleTypographyProps", "subheader", "subheaderTypographyProps"];
+var _excluded$1k = ["classes", "className", "title", "titleTypographyProps", "subheader", "subheaderTypographyProps"];
 
-var styles$1_ = function styles(theme) {
+var styles$1$ = function styles(theme) {
   return {
     root: {
       paddingLeft: theme.spacing(2),
@@ -45607,7 +45829,7 @@ function MediaCardFullWidthHeader(_ref) {
       subheaderTypographyProps = _ref$subheaderTypogra === void 0 ? {
     noWrap: true
   } : _ref$subheaderTypogra,
-      props = _objectWithoutProperties(_ref, _excluded$1j);
+      props = _objectWithoutProperties(_ref, _excluded$1k);
 
   return /*#__PURE__*/React__default.createElement(CardHeader, _extends({
     className: className,
@@ -45623,11 +45845,11 @@ function MediaCardFullWidthHeader(_ref) {
   }, props));
 }
 
-var MediaCardFullWidthHeader$1 = styles$2o.withStyles(styles$1_, {
+var MediaCardFullWidthHeader$1 = styles$2p.withStyles(styles$1$, {
   name: 'MediaCardFullWidthHeader'
 })(MediaCardFullWidthHeader);
 
-var styles$1$ = function styles(theme) {
+var styles$20 = function styles(theme) {
   return {
     root: {
       paddingBottom: theme.spacing(1),
@@ -45679,13 +45901,13 @@ function MediaCardFullWidthContent(_ref) {
   }, TypographyProps), content)));
 }
 
-var MediaCardFullWidthContent$1 = styles$2o.withStyles(styles$1$, {
+var MediaCardFullWidthContent$1 = styles$2p.withStyles(styles$20, {
   name: 'VdtMediaCardFullWidthContent'
 })(MediaCardFullWidthContent);
 
-var _excluded$1k = ["className", "classes", "selected", "children"];
+var _excluded$1l = ["className", "classes", "selected", "children"];
 
-var styles$20 = function styles(theme) {
+var styles$21 = function styles(theme) {
   return {
     root: {
       width: '100%',
@@ -45705,7 +45927,7 @@ function MediaCardFullWidthCard(_ref) {
       classes = _ref.classes,
       selected = _ref.selected,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1k);
+      props = _objectWithoutProperties(_ref, _excluded$1l);
 
   return /*#__PURE__*/React__default.createElement(Card, _extends({
     className: clsx(classes.root, _defineProperty({}, classes.selected, selected), 'VdtMediaCardFullWidthCard-root', className),
@@ -45714,11 +45936,11 @@ function MediaCardFullWidthCard(_ref) {
   }, props), children);
 }
 
-var MediaCardFullWidthCard$1 = styles$2o.withStyles(styles$20, {
+var MediaCardFullWidthCard$1 = styles$2p.withStyles(styles$21, {
   name: 'VdtMediaCardFullWidthCard'
 })(MediaCardFullWidthCard);
 
-var styles$21 = function styles(theme) {
+var styles$22 = function styles(theme) {
   return {
     root: {
       height: '100%',
@@ -45756,12 +45978,12 @@ function MediaCardExpand(_ref) {
   })));
 }
 
-var MediaCardExpand$1 = styles$2o.withStyles(styles$21, {
+var MediaCardExpand$1 = styles$2p.withStyles(styles$22, {
   name: 'VdtMediaCardExpand'
 })(MediaCardExpand);
 
-var _excluded$1l = ["className", "classes", "onClick", "onExpand", "expanded", "defaultExpanded", "onSelect", "selected", "defaultSelected", "title", "subheader", "image", "content", "expandedContent", "CardComponent", "CardProps", "HeaderComponent", "HeaderProps", "ThumbnailComponent", "ThumbnailProps", "ContentComponent", "ContentProps", "ExpandedContentComponent", "ExpandedContentProps", "ExpandComponent", "ExpandProps", "ActionsComponent", "ActionsProps"];
-var styles$22 = function styles(theme) {
+var _excluded$1m = ["className", "classes", "onClick", "onExpand", "expanded", "defaultExpanded", "onSelect", "selected", "defaultSelected", "title", "subheader", "image", "content", "expandedContent", "CardComponent", "CardProps", "HeaderComponent", "HeaderProps", "ThumbnailComponent", "ThumbnailProps", "ContentComponent", "ContentProps", "ExpandedContentComponent", "ExpandedContentProps", "ExpandComponent", "ExpandProps", "ActionsComponent", "ActionsProps"];
+var styles$23 = function styles(theme) {
   return {
     root: {
       width: '100%',
@@ -45807,7 +46029,7 @@ function MediaCardFullWidth(_ref) {
       ExpandProps = _ref.ExpandProps,
       ActionsComponent = _ref.ActionsComponent,
       ActionsProps = _ref.ActionsProps,
-      props = _objectWithoutProperties(_ref, _excluded$1l);
+      props = _objectWithoutProperties(_ref, _excluded$1m);
 
   var _useToggleOnClick = useToggleOnClick(defaultExpanded, onExpand, controlledExpanded),
       _useToggleOnClick2 = _slicedToArray(_useToggleOnClick, 2),
@@ -45976,7 +46198,7 @@ MediaCardFullWidth.defaultProps = {
   ActionsProps: {}
 };
 
-var index$5 = styles$2o.withStyles(styles$22, {
+var index$5 = styles$2p.withStyles(styles$23, {
   name: 'VdtMediaCardFullWidth'
 })(MediaCardFullWidth);
 
@@ -46036,7 +46258,7 @@ function reducer(state, action) {
   }
 }
 
-var styles$23 = function styles(theme) {
+var styles$24 = function styles(theme) {
   return {
     root: {},
     FormControl: {
@@ -46302,13 +46524,13 @@ ChangePasswordForm.defaultProps = {
   noPwdTxt: 'No password set',
   noUserTxt: 'Cannot determine username'
 };
-var ChangePasswordForm$1 = styles$2o.withStyles(styles$23, {
+var ChangePasswordForm$1 = styles$2p.withStyles(styles$24, {
   name: 'VdtChangePasswordForm'
 })(ChangePasswordForm);
 
-var _excluded$1m = ["classes", "username", "onClose", "onSuccess", "changePasswordTxt"];
+var _excluded$1n = ["classes", "username", "onClose", "onSuccess", "changePasswordTxt"];
 
-var styles$24 = function styles(theme) {
+var styles$25 = function styles(theme) {
   return {
     DialogTitle: {
       margin: 0,
@@ -46330,7 +46552,7 @@ function ChangePasswordDialog(_ref) {
       _onSuccess = _ref.onSuccess,
       _ref$changePasswordTx = _ref.changePasswordTxt,
       changePasswordTxt = _ref$changePasswordTx === void 0 ? 'Change Password' : _ref$changePasswordTx,
-      props = _objectWithoutProperties(_ref, _excluded$1m);
+      props = _objectWithoutProperties(_ref, _excluded$1n);
 
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DialogTitle, {
     disableTypography: true,
@@ -46353,11 +46575,11 @@ function ChangePasswordDialog(_ref) {
   }, props))));
 }
 
-var ChangePasswordDialog$1 = styles$2o.withStyles(styles$24, {
+var ChangePasswordDialog$1 = styles$2p.withStyles(styles$25, {
   name: 'VdtChangePasswordDialog'
 })(ChangePasswordDialog);
 
-var _excluded$1n = ["user", "columns", "onClick"];
+var _excluded$1o = ["user", "columns", "onClick"];
 
 function UserRow(_ref) {
   var _ref$user = _ref.user,
@@ -46365,7 +46587,7 @@ function UserRow(_ref) {
       _ref$columns = _ref.columns,
       columns = _ref$columns === void 0 ? [] : _ref$columns,
       onClick = _ref.onClick,
-      TableRowProps = _objectWithoutProperties(_ref, _excluded$1n);
+      TableRowProps = _objectWithoutProperties(_ref, _excluded$1o);
 
   return /*#__PURE__*/React__default.createElement(core.TableRow, _extends({
     onClick: onClick !== undefined ? function () {
@@ -46384,7 +46606,7 @@ function UserRow(_ref) {
   }));
 }
 
-var UserRow$1 = styles$2o.withStyles({}, {
+var UserRow$1 = styles$2p.withStyles({}, {
   name: 'VdtUserRow'
 })(UserRow);
 
@@ -46405,7 +46627,7 @@ var DEFAULT_COLUMN_LABELS$2 = {
   realName: 'Real name',
   disabled: 'Status'
 };
-var styles$25 = function styles() {
+var styles$26 = function styles() {
   return {
     root: {}
   };
@@ -46463,11 +46685,11 @@ UserTable.defaultProps = {
   userColumnLabels: DEFAULT_COLUMN_LABELS$2
 };
 
-var index$6 = styles$2o.withStyles(styles$25, {
+var index$6 = styles$2p.withStyles(styles$26, {
   name: 'VdtUserTable'
 })(UserTable);
 
-var styles$26 = function styles(theme) {
+var styles$27 = function styles(theme) {
   return {
     root: {
       display: 'flex',
@@ -46478,7 +46700,7 @@ var styles$26 = function styles(theme) {
         visibility: 'hidden'
       },
       '&:hover': {
-        backgroundColor: styles$2o.emphasize(theme.palette.background.paper, 0.1),
+        backgroundColor: styles$2p.emphasize(theme.palette.background.paper, 0.1),
         '& .MuiListItemSecondaryAction-root': {
           visibility: 'visible'
         }
@@ -46775,11 +46997,11 @@ GroupRelationList.defaultProps = {
   addButtonText: 'Add'
 };
 
-var GroupRealtionList = styles$2o.withStyles(styles$26, {
+var GroupRealtionList = styles$2p.withStyles(styles$27, {
   name: 'VdtGroupRelationList'
 })(GroupRelationList);
 
-var styles$27 = function styles(theme) {
+var styles$28 = function styles(theme) {
   return {
     root: {
       display: 'flex',
@@ -46832,11 +47054,11 @@ function UserData(_ref2) {
   }))));
 }
 
-var UserData$1 = styles$2o.withStyles(styles$27, {
+var UserData$1 = styles$2p.withStyles(styles$28, {
   name: 'VdtUserData'
 })(UserData);
 
-var _excluded$1o = ["user", "onToggleDisabled", "onEdit", "onChangePassword", "onDelete", "editUserText", "changePasswordText", "deleteUserText", "enableUsertext", "disableUsertext"];
+var _excluded$1p = ["user", "onToggleDisabled", "onEdit", "onChangePassword", "onDelete", "editUserText", "changePasswordText", "deleteUserText", "enableUsertext", "disableUsertext"];
 function UserMenu(_ref) {
   var user = _ref.user,
       onToggleDisabled = _ref.onToggleDisabled,
@@ -46853,7 +47075,7 @@ function UserMenu(_ref) {
       enableUsertext = _ref$enableUsertext === void 0 ? 'Enable User' : _ref$enableUsertext,
       _ref$disableUsertext = _ref.disableUsertext,
       disableUsertext = _ref$disableUsertext === void 0 ? 'Disable User' : _ref$disableUsertext,
-      props = _objectWithoutProperties(_ref, _excluded$1o);
+      props = _objectWithoutProperties(_ref, _excluded$1p);
 
   return (
     /*#__PURE__*/
@@ -46878,7 +47100,7 @@ function UserMenu(_ref) {
   );
 }
 
-var styles$28 = function styles(theme) {
+var styles$29 = function styles(theme) {
   return {
     root: {
       display: 'grid',
@@ -47045,7 +47267,7 @@ UserDetails.defaultProps = {
   lockedUsers: ['admin', 'vidinetviewer']
 };
 
-var index$7 = styles$2o.withStyles(styles$28, {
+var index$7 = styles$2p.withStyles(styles$29, {
   name: 'VdtUserDetails'
 })(UserDetails);
 
@@ -47072,7 +47294,7 @@ function PasswordField$1(props) {
   }, props));
 }
 
-var styles$29 = function styles(theme) {
+var styles$2a = function styles(theme) {
   return {
     root: {
       display: 'flex',
@@ -47197,11 +47419,11 @@ function CreateUserForm(_ref) {
   }, submitText))));
 }
 
-var CreateUserForm$1 = core.withStyles(styles$29, {
+var CreateUserForm$1 = core.withStyles(styles$2a, {
   name: 'VdtCreateUserForm'
 })(CreateUserForm);
 
-var styles$2a = function styles() {
+var styles$2b = function styles() {
   return {
     root: {},
     DialogTitle: {},
@@ -47276,11 +47498,11 @@ CreateUserDialog.defaultProps = {
   CreateUserFormProps: {}
 };
 
-var index$8 = styles$2o.withStyles(styles$2a, {
+var index$8 = styles$2p.withStyles(styles$2b, {
   name: 'VdtCreateUserDialog'
 })(CreateUserDialog);
 
-var styles$2b = function styles(theme) {
+var styles$2c = function styles(theme) {
   return {
     root: {
       display: 'flex',
@@ -47349,11 +47571,11 @@ function EditUserForm(_ref) {
   }, submitText)));
 }
 
-var EditUserForm$1 = core.withStyles(styles$2b, {
+var EditUserForm$1 = core.withStyles(styles$2c, {
   name: 'VdtEditUserForm'
 })(EditUserForm);
 
-var styles$2c = function styles() {
+var styles$2d = function styles() {
   return {
     root: {}
   };
@@ -47388,11 +47610,11 @@ CreateUserDialog$1.defaultProps = {
   classes: {}
 };
 
-var index$9 = styles$2o.withStyles(styles$2c, {
+var index$9 = styles$2p.withStyles(styles$2d, {
   name: 'VdtEditUserDialog'
 })(CreateUserDialog$1);
 
-var styles$2d = function styles(theme) {
+var styles$2e = function styles(theme) {
   return {
     root: {
       display: 'flex',
@@ -47457,11 +47679,11 @@ function UserPasswordForm(_ref) {
   }, submitText)));
 }
 
-var UserPasswordForm$1 = core.withStyles(styles$2d, {
+var UserPasswordForm$1 = core.withStyles(styles$2e, {
   name: 'VdtUserPasswordForm'
 })(UserPasswordForm);
 
-var styles$2e = function styles() {
+var styles$2f = function styles() {
   return {
     root: {}
   };
@@ -47502,11 +47724,11 @@ CreateUserDialog$2.defaultProps = {
   onSubmit: undefined
 };
 
-var index$a = styles$2o.withStyles(styles$2e, {
+var index$a = styles$2p.withStyles(styles$2f, {
   name: 'VdtChangeUserPasswordDialog'
 })(CreateUserDialog$2);
 
-var styles$2f = function styles(theme) {
+var styles$2g = function styles(theme) {
   return {
     root: {
       display: 'flex',
@@ -47517,7 +47739,7 @@ var styles$2f = function styles(theme) {
         visibility: 'hidden'
       },
       '&:hover': {
-        backgroundColor: styles$2o.emphasize(theme.palette.background.paper, 0.1),
+        backgroundColor: styles$2p.emphasize(theme.palette.background.paper, 0.1),
         '& .MuiListItemSecondaryAction-root': {
           visibility: 'visible'
         }
@@ -47802,13 +48024,13 @@ UserRelationList.defaultProps = {
   addButtonText: 'Add'
 };
 
-var UserRelationList$1 = styles$2o.withStyles(styles$2f, {
+var UserRelationList$1 = styles$2p.withStyles(styles$2g, {
   name: 'VdtUserRelationList'
 })(UserRelationList);
 
-var _excluded$1p = ["classes", "group", "columns", "onClick"];
+var _excluded$1q = ["classes", "group", "columns", "onClick"];
 
-var styles$2g = function styles() {
+var styles$2h = function styles() {
   return {
     TableRow: {},
     TableCell: {}
@@ -47822,7 +48044,7 @@ function GroupRow(_ref) {
       _ref$columns = _ref.columns,
       columns = _ref$columns === void 0 ? [] : _ref$columns,
       onClick = _ref.onClick,
-      TableRowProps = _objectWithoutProperties(_ref, _excluded$1p);
+      TableRowProps = _objectWithoutProperties(_ref, _excluded$1q);
 
   return /*#__PURE__*/React__default.createElement(core.TableRow, _extends({
     onClick: onClick !== undefined ? function () {
@@ -47843,11 +48065,11 @@ function GroupRow(_ref) {
   }));
 }
 
-var GroupRow$1 = styles$2o.withStyles(styles$2g, {
+var GroupRow$1 = styles$2p.withStyles(styles$2h, {
   name: 'VdtGroupRow'
 })(GroupRow);
 
-var styles$2h = function styles() {
+var styles$2i = function styles() {
   return {
     root: {},
     TableContainer: {},
@@ -47932,11 +48154,11 @@ GroupTable.defaultProps = {
   }
 };
 
-var index$b = styles$2o.withStyles(styles$2h, {
+var index$b = styles$2p.withStyles(styles$2i, {
   name: 'VdtGroupTable'
 })(GroupTable);
 
-var styles$2i = function styles(theme) {
+var styles$2j = function styles(theme) {
   return {
     root: {
       display: 'flex',
@@ -48006,11 +48228,11 @@ function GroupData(_ref) {
   })));
 }
 
-var GroupData$1 = styles$2o.withStyles(styles$2i, {
+var GroupData$1 = styles$2p.withStyles(styles$2j, {
   name: 'VdtGroupData'
 })(GroupData);
 
-var _excluded$1q = ["groupType", "onEdit", "onDelete", "editGroupText", "deleteGroupText"];
+var _excluded$1r = ["groupType", "onEdit", "onDelete", "editGroupText", "deleteGroupText"];
 function GroupMenu(_ref) {
   var groupType = _ref.groupType,
       onEdit = _ref.onEdit,
@@ -48019,7 +48241,7 @@ function GroupMenu(_ref) {
       editGroupText = _ref$editGroupText === void 0 ? 'Edit Group' : _ref$editGroupText,
       _ref$deleteGroupText = _ref.deleteGroupText,
       deleteGroupText = _ref$deleteGroupText === void 0 ? 'Delete Group' : _ref$deleteGroupText,
-      props = _objectWithoutProperties(_ref, _excluded$1q);
+      props = _objectWithoutProperties(_ref, _excluded$1r);
 
   return (
     /*#__PURE__*/
@@ -48036,7 +48258,7 @@ function GroupMenu(_ref) {
   );
 }
 
-var styles$2j = function styles(theme) {
+var styles$2k = function styles(theme) {
   return {
     root: {
       display: 'grid',
@@ -48255,11 +48477,11 @@ GroupDetails.defaultProps = {
   lockedUsers: ['admin', 'vidinetviewer']
 };
 
-var index$c = styles$2o.withStyles(styles$2j, {
+var index$c = styles$2p.withStyles(styles$2k, {
   name: 'VdtGroupDetails'
 })(GroupDetails);
 
-var styles$2k = function styles(theme) {
+var styles$2l = function styles(theme) {
   return {
     root: {
       display: 'flex',
@@ -48451,11 +48673,11 @@ function CreateGroupForm(_ref) {
   }, submitText)));
 }
 
-var CreateGroupForm$1 = core.withStyles(styles$2k, {
+var CreateGroupForm$1 = core.withStyles(styles$2l, {
   name: 'VdtCreateGroupForm'
 })(CreateGroupForm);
 
-var styles$2l = function styles() {
+var styles$2m = function styles() {
   return {
     root: {},
     DialogTitle: {},
@@ -48541,11 +48763,11 @@ CreateGroupDialog.defaultProps = {
   CreateGroupFormProps: {}
 };
 
-var index$d = styles$2o.withStyles(styles$2l, {
+var index$d = styles$2p.withStyles(styles$2m, {
   name: 'VdtCreateGroupDialog'
 })(CreateGroupDialog);
 
-var styles$2m = function styles(theme) {
+var styles$2n = function styles(theme) {
   return {
     root: {
       display: 'flex',
@@ -48604,11 +48826,11 @@ function EditGroupForm(_ref) {
   }, submitText)));
 }
 
-var EditGroupForm$1 = core.withStyles(styles$2m, {
+var EditGroupForm$1 = core.withStyles(styles$2n, {
   name: 'VdtEditGroupForm'
 })(EditGroupForm);
 
-var styles$2n = function styles() {
+var styles$2o = function styles() {
   return {
     root: {},
     DialogTitle: {},
@@ -48662,7 +48884,7 @@ CreateUserDialog$3.defaultProps = {
   EditGroupFormProps: {}
 };
 
-var index$e = styles$2o.withStyles(styles$2n, {
+var index$e = styles$2p.withStyles(styles$2o, {
   name: 'VdtEditGroupDialog'
 })(CreateUserDialog$3);
 
@@ -48733,6 +48955,8 @@ exports.GroupRelationList = GroupRealtionList;
 exports.GroupTable = index$b;
 exports.ItemAccessTab = ItemAccessTab$1;
 exports.ItemCard = ItemCard;
+exports.ItemCompoundMetadataTab = ItemCompoundMetadataTab$1;
+exports.ItemCompoundMetadataTable = ItemCompoundMetadataTable$1;
 exports.ItemFieldGroupTab = ItemFieldGroupTab$1;
 exports.ItemFileShareDialog = ItemFileShareDialog$1;
 exports.ItemGrid = ItemGrid;