npm - @vidispine/vdt-materialui - Versions diffs - 22.1.0-pre.3 → 22.1.0 - Mend

@vidispine/vdt-materialui 22.1.0-pre.3 → 22.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ require('core-js/es/string/replace-all');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var CssBaseline = require('@material-ui/core/CssBaseline');
-var styles$2A = require('@material-ui/core/styles');
+var styles$2B = require('@material-ui/core/styles');
 require('typeface-roboto');
 var clsx = require('clsx');
 var grey = require('@material-ui/core/colors/grey');
@@ -374,12 +374,12 @@ var VisibilityOff__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOff);
 var DescriptionIcon__default = /*#__PURE__*/_interopDefaultLegacy(DescriptionIcon);
 var RoleIcon__default = /*#__PURE__*/_interopDefaultLegacy(RoleIcon);
-var light = styles$2A.createTheme({
+var light = styles$2B.createTheme({
   palette: {
     type: 'light'
   }
 });
-var dark = styles$2A.createTheme({
+var dark = styles$2B.createTheme({
   palette: {
     type: 'dark'
   }
@@ -448,8 +448,8 @@ function ThemeProvider(_ref) {
   }, [isDefaultPalette, palette, theme, togglePalette]);
   return /*#__PURE__*/React__default["default"].createElement(ThemeContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React__default["default"].createElement(styles$2A.MuiThemeProvider, {
-    theme: styles$2A.createTheme(theme, {
+  }, /*#__PURE__*/React__default["default"].createElement(styles$2B.MuiThemeProvider, {
+    theme: styles$2B.createTheme(theme, {
       props: props
     })
   }, /*#__PURE__*/React__default["default"].createElement(CssBaseline__default["default"], null, children)));
@@ -465,7 +465,7 @@ function useThemeContext() {
   return context;
 }
-var styles$2z = function styles(theme) {
+var styles$2A = function styles(theme) {
   return {
     button: {
       borderRadius: 0,
@@ -502,7 +502,7 @@ function LayoutButtonGroup(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(ViewHeadlineIcon__default["default"], null)));
 }
-var LayoutButtonGroup$1 = styles$2A.withStyles(styles$2z, {
+var LayoutButtonGroup$1 = styles$2B.withStyles(styles$2A, {
   name: 'VdtLayoutButtonGroup'
 })(LayoutButtonGroup);
@@ -614,7 +614,7 @@ var useMenu = function useMenu() {
 var _excluded$1q = ["AlertProps"];
-var styles$2y = function styles() {
+var styles$2z = function styles() {
   return {};
 };
@@ -635,7 +635,7 @@ function useSnackbarAlert() {
     var severity = _ref.severity,
         message = _ref.message;
     setAlert(function () {
-      return styles$2A.withStyles(styles$2y)(function (_ref2) {
+      return styles$2B.withStyles(styles$2z)(function (_ref2) {
         var AlertProps = _ref2.AlertProps,
             props = _objectWithoutProperties__default["default"](_ref2, _excluded$1q);
@@ -1763,16 +1763,14 @@ var PropTypes$1 = propTypes$1.exports;
 var _excluded$1p = ["checked", "name", "onChange"],
     _excluded2$i = ["input", "meta", "label", "classes", "className", "FormControlProps", "FormControlLabelProps", "FormControlHelperTextProps"];
-var styles$2x = function styles(theme) {
+var styles$2y = function styles(theme) {
   return {
     root: {
       marginTop: theme.spacing(1),
       width: '100%'
     }
   };
-}; // TODO: Make a withFinalForm HOC for fields instead.
-// Fields should behave like mui fields by default
+};
 function CheckboxField(_ref) {
   var _ref$input = _ref.input;
@@ -1820,7 +1818,7 @@ function CheckboxField(_ref) {
   }, FormControlHelperTextProps), error || submitError));
 }
-var CheckboxField$1 = styles$2A.withStyles(styles$2x, {
+var CheckboxField$1 = styles$2B.withStyles(styles$2y, {
   name: 'VdtCheckboxField'
 })(CheckboxField);
@@ -1828,7 +1826,7 @@ var _excluded$1o = ["label"],
     _excluded2$h = ["value", "name", "onChange"],
     _excluded3$6 = ["value", "label"];
-var styles$2w = function styles(theme) {
+var styles$2x = function styles(theme) {
   return {
     root: {
       marginTop: theme.spacing(2),
@@ -1844,9 +1842,7 @@ function DefaultFormLabel(_ref) {
   return /*#__PURE__*/React__namespace.createElement(FormLabel__default["default"], _extends__default["default"]({
     component: "legend"
   }, props), label);
-} // TODO: Make a withFinalForm HOC for fields instead.
-// Fields should behave like mui fields by default
+}
 function CheckboxGroupField(_ref2) {
   var _ref2$input = _ref2.input;
@@ -1968,13 +1964,13 @@ function CheckboxGroupField(_ref2) {
   }, FormHelperTextProps), error || submitError));
 }
-var CheckboxGroupField$1 = styles$2A.withStyles(styles$2w, {
+var CheckboxGroupField$1 = styles$2B.withStyles(styles$2x, {
   name: 'VdtCheckboxGroupField'
 })(CheckboxGroupField);
 var _excluded$1n = ["value", "label"];
-var styles$2v = function styles(theme) {
+var styles$2w = function styles(theme) {
   return {
     root: {
       marginTop: theme.spacing(2),
@@ -2044,14 +2040,14 @@ function RadioField(_ref) {
   }, FormHelperTextProps), error || submitError));
 }
-var RadioField$1 = styles$2A.withStyles(styles$2v, {
+var RadioField$1 = styles$2B.withStyles(styles$2w, {
   name: 'VdtRadioField'
 })(RadioField);
 var _excluded$1m = ["input", "meta", "options", "label", "classes", "className", "FormControlProps", "InputLabelProps", "MenuItemProps", "FormHelperTextProps"],
     _excluded2$g = ["value", "label"];
-var styles$2u = function styles(theme) {
+var styles$2v = function styles(theme) {
   return {
     root: {
       marginTop: theme.spacing(1),
@@ -2126,14 +2122,14 @@ function SelectField(_ref) {
   }, FormHelperTextProps), touched && (error || submitError) ? error || submitError : ''));
 }
-var SelectField$1 = styles$2A.withStyles(styles$2u, {
+var SelectField$1 = styles$2B.withStyles(styles$2v, {
   name: 'VdtSelectField'
 })(SelectField);
 var _excluded$1l = ["name", "onChange", "value"],
     _excluded2$f = ["input", "meta", "helperText", "classes", "className", "FormControlProps"];
-var styles$2t = function styles(theme) {
+var styles$2u = function styles(theme) {
   return {
     root: {
       marginTop: theme.spacing(1),
@@ -2185,13 +2181,13 @@ function TextField(_ref) {
   }, props)));
 }
-var TextField$1 = styles$2A.withStyles(styles$2t, {
+var TextField$1 = styles$2B.withStyles(styles$2u, {
   name: 'VdtTextField'
 })(TextField);
 var _excluded$1k = ["input", "meta", "options", "label", "min", "max", "isRange", "step", "showMarks", "classes", "className", "FormControlProps", "FormLabelProps", "FormHelperTextProps", "exclude"];
-var styles$2s = function styles(theme) {
+var styles$2t = function styles(theme) {
   return {
     root: {
       marginTop: theme.spacing(2),
@@ -2291,13 +2287,13 @@ function Slider(_ref) {
   }, FormHelperTextProps), error || submitError));
 }
-var SliderField = styles$2A.withStyles(styles$2s, {
+var SliderField = styles$2B.withStyles(styles$2t, {
   name: 'VdtSliderField'
 })(Slider);
 var _excluded$1j = ["input", "meta", "options", "label", "classes", "className", "FormControlProps", "TextFieldProps", "InputLabelProps", "FormHelperTextProps", "AutocompleteProps"];
-var styles$2r = function styles(theme) {
+var styles$2s = function styles(theme) {
   return {
     root: {
       marginTop: theme.spacing(1),
@@ -2439,7 +2435,7 @@ function TagField(_ref) {
   }, FormHelperTextProps), error || submitError));
 }
-var TagField$1 = styles$2A.withStyles(styles$2r, {
+var TagField$1 = styles$2B.withStyles(styles$2s, {
   name: 'VdtTagField'
 })(TagField);
@@ -2449,7 +2445,7 @@ function ownKeys$U(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$U(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$U(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$U(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$2q = function styles(theme) {
+var styles$2r = function styles(theme) {
   return {
     root: {
       marginTop: theme.spacing(2),
@@ -2506,11 +2502,11 @@ function DateField(_ref) {
   }, props)));
 }
-var DateField$1 = core.withStyles(styles$2q, {
+var DateField$1 = core.withStyles(styles$2r, {
   name: 'VdtDateField'
 })(DateField);
-var styles$2p = function styles(theme) {
+var styles$2q = function styles(theme) {
   return {
     root: {
       marginTop: theme.spacing(1),
@@ -2556,7 +2552,7 @@ function SwitchField(_ref) {
   }, FormControlLabelProps)));
 }
-var SwitchField$1 = styles$2A.withStyles(styles$2p, {
+var SwitchField$1 = styles$2B.withStyles(styles$2q, {
   name: 'VdtSwitchField'
 })(SwitchField);
@@ -2566,7 +2562,7 @@ function ownKeys$T(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$T(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$T(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$T(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$2o = function styles() {};
+var styles$2p = function styles() {};
 var defaultGetOptionLabel = function defaultGetOptionLabel(opt) {
   return opt.label || opt;
@@ -2586,9 +2582,7 @@ var defaultGetValue = function defaultGetValue(_ref) {
   if (multiple && !Array.isArray(value)) return [value];
   if (!multiple && Array.isArray(value)) return value.join(', ');
   return value;
-}; // TODO: Make a withFinalForm HOC for fields instead.
-// Fields should behave like mui fields by default
+};
 function AutocompleteField(_ref2) {
   var _ref2$input = _ref2.input,
@@ -2666,7 +2660,7 @@ function AutocompleteField(_ref2) {
   }, props));
 }
-var AutocompleteField$1 = core.withStyles(styles$2o, {
+var AutocompleteField$1 = core.withStyles(styles$2p, {
   name: 'VdtAutocompleteField'
 })(AutocompleteField);
@@ -3349,7 +3343,7 @@ var isUrl = function isUrl() {
   return matches ? undefined : helperText;
 };
-var UrlField = styles$2A.withStyles({}, {
+var UrlField = styles$2B.withStyles({}, {
   name: 'VdtUrlField'
 })(function (_ref) {
   var _ref$name = _ref.name,
@@ -3369,7 +3363,7 @@ var UrlField = styles$2A.withStyles({}, {
     fullWidth: true
   }, FieldProps, props));
 });
-var UsernameField = styles$2A.withStyles({}, {
+var UsernameField = styles$2B.withStyles({}, {
   name: 'VdtUsernameField'
 })(function (_ref2) {
   var _ref2$name = _ref2.name,
@@ -3393,7 +3387,7 @@ var UsernameField = styles$2A.withStyles({}, {
     fullWidth: true
   }, FieldProps, props));
 });
-var PasswordField$1 = styles$2A.withStyles({}, {
+var PasswordField$1 = styles$2B.withStyles({}, {
   name: 'VdtPasswordField'
 })(function (_ref3) {
   var _ref3$name = _ref3.name,
@@ -3417,7 +3411,7 @@ var PasswordField$1 = styles$2A.withStyles({}, {
     fullWidth: true
   }, FieldProps, props));
 });
-var RememberMeField = styles$2A.withStyles({}, {
+var RememberMeField = styles$2B.withStyles({}, {
   name: 'VdtRememberMeField'
 })(function (_ref4) {
   var _ref4$name = _ref4.name,
@@ -3476,7 +3470,7 @@ function FormText(_ref6) {
   }, submitError || helperText));
 }
-var FormButtons = styles$2A.withStyles({}, {
+var FormButtons = styles$2B.withStyles({}, {
   name: 'VdtLoginFormButtons'
 })(function (_ref7) {
   var submitting = _ref7.submitting,
@@ -3490,7 +3484,7 @@ var FormButtons = styles$2A.withStyles({}, {
     fullWidth: true
   }, SubmitButtonProps), loginText));
 });
-var styles$2n = function styles() {
+var styles$2o = function styles() {
   return {
     root: {}
   };
@@ -3588,13 +3582,13 @@ LoginForm.defaultProps = {
   FormButtonsProps: {}
 };
-var Component$T = styles$2A.withStyles(styles$2n, {
+var Component$U = styles$2B.withStyles(styles$2o, {
   name: 'VdtLoginForm'
 })(LoginForm);
-Component$T.displayName = 'LoginForm';
+Component$U.displayName = 'LoginForm';
 var _excluded$1c = ["checked", "classes", "className", "control", "disabled", "inputRef", "label", "name", "onChange", "value"];
-var styles$2m = function styles(theme) {
+var styles$2n = function styles(theme) {
   return {
     root: {
       display: 'inline-flex',
@@ -3677,7 +3671,7 @@ var ExpandedFormControlLabel = /*#__PURE__*/React__namespace.forwardRef(function
     }, labelCount))
   );
 });
-var ExpandedFormControlLabel$1 = core.withStyles(styles$2m, {
+var ExpandedFormControlLabel$1 = core.withStyles(styles$2n, {
   name: 'VdtExpandedFormControlLabel'
 })(ExpandedFormControlLabel);
@@ -3741,7 +3735,7 @@ var onGetToken = /*#__PURE__*/function () {
   };
 }();
-var styles$2l = function styles(theme) {
+var styles$2m = function styles(theme) {
   return {
     root: {
       height: 20,
@@ -3772,7 +3766,7 @@ function FilterFormLabel(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(IconComponent, null)));
 }
-var FilterFormLabel$1 = styles$2A.withStyles(styles$2l, {
+var FilterFormLabel$1 = styles$2B.withStyles(styles$2m, {
   name: 'VdtFilterFormLabel'
 })(FilterFormLabel);
@@ -3865,7 +3859,7 @@ function ownKeys$S(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$S(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$S(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$S(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$2k = function styles(theme) {
+var styles$2l = function styles(theme) {
   return {
     header: {
       padding: theme.spacing(2),
@@ -4075,7 +4069,7 @@ function FilterCard(_ref4) {
   }, FormProps))) : null;
 }
-var FilterCard$1 = styles$2A.withStyles(styles$2k, {
+var FilterCard$1 = styles$2B.withStyles(styles$2l, {
   name: 'VdtFilterCard'
 })(FilterCard);
@@ -4229,7 +4223,7 @@ function JobRow(_ref) {
   })));
 }
-var JobRow$1 = styles$2A.withStyles({}, {
+var JobRow$1 = styles$2B.withStyles({}, {
   name: 'VdtJobRow'
 })(JobRow);
@@ -4290,7 +4284,7 @@ function JobTable(_ref2) {
   }))));
 }
-var JobTable$1 = styles$2A.withStyles({}, {
+var JobTable$1 = styles$2B.withStyles({}, {
   name: 'VdtJobTable'
 })(JobTable);
@@ -4495,7 +4489,7 @@ function SearchPagination(_ref) {
 var _excluded$1a = ["classes", "onSubmit", "fields", "value", "query", "fieldPlaceHolder", "queryPlaceHolder", "disableReset", "disableRequired", "fieldInputRef", "queryInputRef"];
-var styles$2j = function styles(theme) {
+var styles$2k = function styles(theme) {
   return {
     root: {
       backgroundColor: theme.palette.background.paper
@@ -4642,15 +4636,15 @@ function SearchInputFieldSelect(_ref) {
   })));
 }
-var SearchInputFieldSelect$1 = styles$2A.withStyles(styles$2j, {
+var SearchInputFieldSelect$1 = styles$2B.withStyles(styles$2k, {
   name: 'VdtSearchInputFieldSelect'
 })(SearchInputFieldSelect);
 var useStyles$2 = function useStyles(secondaryColor) {
-  return styles$2A.makeStyles({
+  return styles$2B.makeStyles({
     selected: {
       '&$selected': {
-        backgroundColor: styles$2A.alpha(secondaryColor, 0.16),
+        backgroundColor: styles$2B.alpha(secondaryColor, 0.16),
         color: secondaryColor
       }
     }
@@ -4698,7 +4692,7 @@ SortMenuItem.defaultProps = {
 };
 var _excluded$19 = ["classes", "caption", "options", "sortAsc", "sortDesc", "IconComponent", "MenuItemComponent", "onChange", "initialSort"];
-var styles$2i = function styles(theme) {
+var styles$2j = function styles(theme) {
   return {
     root: {
       color: theme.palette.secondary.main,
@@ -4846,10 +4840,10 @@ Sort.defaultProps = {
   options: []
 };
-var Component$S = styles$2A.withStyles(styles$2i, {
+var Component$T = styles$2B.withStyles(styles$2j, {
   name: 'VdtSort'
 })(Sort);
-Component$S.displayName = 'Sort';
+Component$T.displayName = 'Sort';
 var _excluded$18 = ["onSubmit", "onChange", "options", "name", "label"];
@@ -5109,7 +5103,7 @@ function JobList(_ref) {
         return handleDelete(index);
       }
     });
-  })), /*#__PURE__*/React__default["default"].createElement(Component$S, {
+  })), /*#__PURE__*/React__default["default"].createElement(Component$T, {
     options: sortOptions,
     initialSort: initialSort,
     onChange: onChangeSort,
@@ -5212,7 +5206,7 @@ function JobList(_ref) {
   }, JobTableProps))))));
 }
-var JobList$1 = styles$2A.withStyles({}, {
+var JobList$1 = styles$2B.withStyles({}, {
   name: 'VdtJobList'
 })(JobList);
@@ -5222,7 +5216,7 @@ var _excluded$17 = ["fields", "TableRowComponent", "TableRowProps"],
 function ownKeys$Q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$Q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Q(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var TableCellLabel$1 = styles$2A.withStyles(function (theme) {
+var TableCellLabel$1 = styles$2B.withStyles(function (theme) {
   return {
     root: _objectSpread$Q({
       borderStyle: 'none',
@@ -5231,7 +5225,7 @@ var TableCellLabel$1 = styles$2A.withStyles(function (theme) {
     }, theme.typography.body2)
   };
 })(TableCell__default["default"]);
-var TableCellValue$1 = styles$2A.withStyles(function (theme) {
+var TableCellValue$1 = styles$2B.withStyles(function (theme) {
   return {
     root: _objectSpread$Q({
       borderStyle: 'none',
@@ -5423,7 +5417,7 @@ JobDataTable.defaultProps = {
   TableComponent: ItemMetadataTable,
   TableProps: {}
 };
-var JobDataTable$1 = styles$2A.withStyles({}, {
+var JobDataTable$1 = styles$2B.withStyles({}, {
   name: 'VdtJobDataTable'
 })(JobDataTable);
@@ -5578,7 +5572,7 @@ function JobTaskTableRow(_ref4) {
   }, duration !== undefined ? humanizeDuration(duration) : '-')));
 }
-var styles$2h = {
+var styles$2i = {
   root: {},
   TableHead: {},
   TableBody: {}
@@ -5650,7 +5644,7 @@ JobTaskTable.defaultProps = {
   JobTaskTableRowComponent: JobTaskTableRow,
   JobTaskTableRowProps: {}
 };
-var JobTaskTable$1 = styles$2A.withStyles(styles$2h, {
+var JobTaskTable$1 = styles$2B.withStyles(styles$2i, {
   name: 'VdtJobTaskTable'
 })(JobTaskTable);
@@ -5716,7 +5710,7 @@ function JobMenu(_ref) {
   }))));
 }
-var styles$2g = {
+var styles$2h = {
   root: {},
   CardContent: {
     height: 'calc(100% - 70px)',
@@ -5863,7 +5857,7 @@ JobCard.defaultProps = {
   JobMenuComponent: JobMenu,
   JobMenuProps: {}
 };
-var JobCard$1 = styles$2A.withStyles(styles$2g, {
+var JobCard$1 = styles$2B.withStyles(styles$2h, {
   name: 'VdtJobCard'
 })(JobCard);
@@ -6212,7 +6206,7 @@ function VidispineIcon(props) {
   }, props));
 }
-var styles$2f = function styles(theme) {
+var styles$2g = function styles(theme) {
   var isLight = theme.palette.type === 'light';
   return {
     badge: {
@@ -6246,7 +6240,7 @@ function MediaBadge(_ref) {
   }, children);
 }
-var MediaBadge$1 = styles$2A.withStyles(styles$2f, {
+var MediaBadge$1 = styles$2B.withStyles(styles$2g, {
   name: 'VdtMediaBadge'
 })(MediaBadge);
@@ -6354,7 +6348,7 @@ var generateBadges = function generateBadges(_ref) {
   return _toConsumableArray__default["default"](new Set(badges)); // remove duplicates
 };
-var styles$2e = function styles() {
+var styles$2f = function styles() {
   return {
     root: {}
   };
@@ -6387,11 +6381,11 @@ function MediaBadges(_ref2) {
   }));
 }
-var MediaBadges$1 = styles$2A.withStyles(styles$2e, {
+var MediaBadges$1 = styles$2B.withStyles(styles$2f, {
   name: 'VdtMediaBadges'
 })(MediaBadges);
-var styles$2d = function styles(theme) {
+var styles$2e = function styles(theme) {
   return {
     root: {
       display: 'flex'
@@ -6444,7 +6438,7 @@ function ShapeTagCard(_ref) {
     className: classes.description
   }, shapeTag.description)));
 }
-var ShapeTagCard$1 = styles$2A.withStyles(styles$2d, {
+var ShapeTagCard$1 = styles$2B.withStyles(styles$2e, {
   name: 'VdtShapeTagCard'
 })(ShapeTagCard);
 ShapeTagCard.propTypes = {
@@ -6539,7 +6533,7 @@ var useExpand = function useExpand(initialState) {
   };
 };
-var Accordion = styles$2A.withStyles(function (theme) {
+var Accordion = styles$2B.withStyles(function (theme) {
   return {
     root: {
       border: theme.palette.type === 'light' ? '1px solid rgba(0, 0, 0, .125)' : '1px solid rgba(0, 0, 0, .3)',
@@ -6557,7 +6551,7 @@ var Accordion = styles$2A.withStyles(function (theme) {
     expanded: {}
   };
 })(MuiAccordion__default["default"]);
-var AccordionSummary = styles$2A.withStyles(function (theme) {
+var AccordionSummary = styles$2B.withStyles(function (theme) {
   return {
     root: {
       backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, .03)' : 'rgba(0, 0, 0, .1)',
@@ -6576,7 +6570,7 @@ var AccordionSummary = styles$2A.withStyles(function (theme) {
     expanded: {}
   };
 })(MuiAccordionSummary__default["default"]);
-var AccordionDetails = styles$2A.withStyles(function (theme) {
+var AccordionDetails = styles$2B.withStyles(function (theme) {
   return {
     root: {
       padding: theme.spacing(2)
@@ -6584,7 +6578,7 @@ var AccordionDetails = styles$2A.withStyles(function (theme) {
   };
 })(MuiAccordionDetails__default["default"]);
-var styles$2c = function styles(theme) {
+var styles$2d = function styles(theme) {
   return {
     root: {},
     Accordion: {},
@@ -6695,7 +6689,7 @@ function ShapeTagListAccordion(_ref3) {
     })));
   })));
 }
-var ShapeTagListAccordion$1 = styles$2A.withStyles(styles$2c, {
+var ShapeTagListAccordion$1 = styles$2B.withStyles(styles$2d, {
   name: 'VdtShapeTagListAccordion'
 })(ShapeTagListAccordion);
 ShapeTagListAccordion.propTypes = {
@@ -6841,7 +6835,7 @@ var useTranscodeResources = function useTranscodeResources(_ref4) {
   };
 };
-var styles$2b = function styles(theme) {
+var styles$2c = function styles(theme) {
   return {
     root: {},
     noResourceText: _objectSpread$L(_objectSpread$L({}, theme.typography.body1), {}, {
@@ -7063,7 +7057,7 @@ function TranscodeDialog(_ref6) {
     }, ShapeTagListProps)));
   })));
 }
-var TranscodeDialog$1 = styles$2A.withStyles(styles$2b, {
+var TranscodeDialog$1 = styles$2B.withStyles(styles$2c, {
   name: 'VdtTranscodeDialog'
 })(TranscodeDialog);
 TranscodeDialog.propTypes = {
@@ -7245,28 +7239,8 @@ var filterTimespanList = function filterTimespanList(_ref) {
         });
       }
     }
-  }); // console.log({ filteredTimespans });
-  return filteredTimespans; // return parsedTimespans.filter((timespanType) => {
-  //   const fieldList = Array.isArray(field) ? field : [field];
-  //   const fieldGroupList = Array.isArray(fieldGroup) ? fieldGroup : [fieldGroup];
-  //   const { group: groupList = [] } = timespanType;
-  //   const matchingGroups = groupList.filter(({ name }) => fieldGroupList.includes(name));
-  //   const matchingValues = matchingGroups.reduce((acc, groupFields) => {
-  //     Object.entries(groupFields).forEach(([fieldName, fieldValue]) => {
-  //       if (fieldList.includes(fieldName)) {
-  //         acc.push(fieldValue);
-  //       }
-  //     });
-  //     return acc;
-  //   }, []);
-  //   const timespanText = matchingValues.join('');
-  //   if (timespanText === '') return false;
-  //   if (filterText) {
-  //     return timespanText.toLowerCase().includes(filterText.toLowerCase());
-  //   }
-  //   return true;
-  // });
+  });
+  return filteredTimespans;
 };
 var sortTimespanList = function sortTimespanList(timespan1, timespan2) {
@@ -7418,10 +7392,15 @@ var useConfidenceSlider = function useConfidenceSlider(onChange) {
   return [confidenceValue, onChangeConfidenceValue];
 };
-var styles$2a = {
-  Typography: {},
-  Slider: {},
-  root: {}
+var styles$2b = function styles(theme) {
+  return {
+    Typography: {},
+    Slider: {},
+    root: {
+      marginLeft: theme.spacing(2),
+      marginRight: theme.spacing(2)
+    }
+  };
 };
 function ConfidenceSlider(_ref) {
@@ -7459,11 +7438,11 @@ function ConfidenceSlider(_ref) {
   }, SliderProps)));
 }
-var ConfidenceSlider$1 = styles$2A.withStyles(styles$2a, {
+var ConfidenceSlider$1 = styles$2B.withStyles(styles$2b, {
   name: 'VdtConfidenceSlider'
 })(ConfidenceSlider);
-var styles$29 = {
+var styles$2a = {
   Button: {
     minWidth: 0
   },
@@ -7490,7 +7469,7 @@ function EditButton(_ref) {
   }, ButtonProps), /*#__PURE__*/React__default["default"].createElement(IconComponent, null));
 }
-var EditButton$1 = styles$2A.withStyles(styles$29)(EditButton);
+var EditButton$1 = styles$2B.withStyles(styles$2a)(EditButton);
 var _excluded$15 = ["itemId", "video", "sampleRate", "onSuccess", "onError", "sameAsStartText", "laterThanEndText"],
     _excluded2$c = ["startText", "endText", "uuid", "timespan"],
@@ -7725,7 +7704,7 @@ function ItemTimespanForm(_ref) {
   }, cancelText)))));
 }
-var ItemTimespanForm$1 = styles$2A.withStyles({}, {
+var ItemTimespanForm$1 = styles$2B.withStyles({}, {
   name: 'VdtItemTimespanForm'
 })(ItemTimespanForm);
@@ -7734,7 +7713,7 @@ var _excluded$14 = ["className", "classes", "itemId", "sampleRate", "onSuccess",
 function ownKeys$I(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$I(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$I(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$I(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$28 = {
+var styles$29 = {
   Form: {}
 };
@@ -7795,7 +7774,7 @@ function ItemTimespanEdit(_ref) {
   }, props));
 }
-var ItemTimespanEdit$1 = styles$2A.withStyles(styles$28, {
+var ItemTimespanEdit$1 = styles$2B.withStyles(styles$29, {
   name: 'VdtItemTimespanEdit'
 })(ItemTimespanEdit);
@@ -7978,7 +7957,7 @@ var useItemTimespanInterval = function useItemTimespanInterval(_ref3) {
   };
 };
-var styles$27 = function styles(theme) {
+var styles$28 = function styles(theme) {
   return {
     root: {
       transition: 'background-color 0.3s ease-out',
@@ -8119,11 +8098,11 @@ function ItemTimespanInterval(_ref) {
   );
 }
-var ItemTimespanInterval$1 = styles$2A.withStyles(styles$27, {
+var ItemTimespanInterval$1 = styles$2B.withStyles(styles$28, {
   name: 'VdtItemTimespanInterval'
 })(ItemTimespanInterval);
-var styles$26 = {
+var styles$27 = {
   root: {},
   ItemTimespanIntervalContainer: {},
   ItemTimespanInterval: {},
@@ -8184,12 +8163,12 @@ function ItemTimespanList(_ref) {
   }));
 }
-var ItemTimespanList$1 = styles$2A.withStyles(styles$26, {
+var ItemTimespanList$1 = styles$2B.withStyles(styles$27, {
   name: 'VdtItemTimespanList'
 })(ItemTimespanList);
 var _excluded$13 = ["className", "classes", "onChange", "searchText", "SearchIconComponent", "CloseIconComponent", "inputRef"];
-var styles$25 = {
+var styles$26 = {
   TextField: {},
   InputAdornment: {},
   Button: {
@@ -8266,11 +8245,11 @@ function ItemTimespanSearchInput(_ref) {
   }, props));
 }
-var ItemTimespanSearchInput$1 = styles$2A.withStyles(styles$25, {
+var ItemTimespanSearchInput$1 = styles$2B.withStyles(styles$26, {
   name: 'VdtItemTimespanSearchInput'
 })(ItemTimespanSearchInput);
-var styles$24 = function styles(theme) {
+var styles$25 = function styles(theme) {
   return {
     root: {},
     header: {
@@ -8428,11 +8407,11 @@ function ItemTimespanBox(_ref) {
   }, ItemTimespanListProps)));
 }
-var ItemTimespanBox$1 = styles$2A.withStyles(styles$24, {
+var ItemTimespanBox$1 = styles$2B.withStyles(styles$25, {
   name: 'VdtItemTimespanBox'
 })(ItemTimespanBox);
-var styles$23 = {
+var styles$24 = {
   FormControl: {},
   InputLabel: {},
   Select: {},
@@ -8470,7 +8449,7 @@ function ItemTimespanSelection(_ref) {
   })));
 }
-var ItemTimespanSelection$1 = styles$2A.withStyles(styles$23, {
+var ItemTimespanSelection$1 = styles$2B.withStyles(styles$24, {
   name: 'VdtItemTimespanSelection'
 })(ItemTimespanSelection);
@@ -8531,7 +8510,7 @@ var useItemTimespan = function useItemTimespan(_ref) {
   };
 };
-var styles$22 = function styles(theme) {
+var styles$23 = function styles(theme) {
   return {
     root: {},
     ItemTimespanSelection: {
@@ -8598,7 +8577,7 @@ function ItemTimespan$1(_ref) {
   }, timespanOptionValue, ItemTimespanBoxProps)));
 }
-var ItemTimespan = styles$2A.withStyles(styles$22, {
+var ItemTimespan = styles$2B.withStyles(styles$23, {
   name: 'VdtItemTimespan'
 })(ItemTimespan$1);
@@ -8620,7 +8599,7 @@ var PERMISSIONS = {
   NONE: 'NONE'
 };
-var styles$21 = function styles(theme) {
+var styles$22 = function styles(theme) {
   return {
     root: {},
     recipientRoot: {
@@ -9028,14 +9007,14 @@ function EntityAccessEdit(_ref6) {
   }, grantAccessText)));
 }
-var EntityAccessEdit$1 = styles$2A.withStyles(styles$21, {
+var EntityAccessEdit$1 = styles$2B.withStyles(styles$22, {
   name: 'VdtEntityAccessEdit'
 })(EntityAccessEdit);
 function ownKeys$F(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$F(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$F(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$F(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var TableCellLabel = styles$2A.withStyles(function (theme) {
+var TableCellLabel = styles$2B.withStyles(function (theme) {
   return {
     root: _objectSpread$F({
       display: 'flex',
@@ -9044,14 +9023,14 @@ var TableCellLabel = styles$2A.withStyles(function (theme) {
     }, theme.typography.body2)
   };
 })(TableCell__default["default"]);
-var TableCellValue = styles$2A.withStyles(function (theme) {
+var TableCellValue = styles$2B.withStyles(function (theme) {
   return {
     root: _objectSpread$F({
       borderStyle: 'none'
     }, theme.typography.subtitle2)
   };
 })(TableCell__default["default"]);
-var Chip = styles$2A.withStyles(function () {
+var Chip = styles$2B.withStyles(function () {
   return {
     root: {
       borderStyle: 'none'
@@ -9193,7 +9172,7 @@ function EntityAccessTable(_ref3) {
   })));
 }
-var EntityAccessTable$1 = styles$2A.withStyles({}, {
+var EntityAccessTable$1 = styles$2B.withStyles({}, {
   name: 'VdtEntityAccessTable'
 })(EntityAccessTable);
@@ -9265,7 +9244,7 @@ function ItemAccessTab(_ref) {
   }, EntityAccessTableProps)));
 }
-var ItemAccessTab$1 = styles$2A.withStyles({}, {
+var ItemAccessTab$1 = styles$2B.withStyles({}, {
   name: 'VdtItemAccessTab'
 })(ItemAccessTab);
@@ -9347,7 +9326,7 @@ function ownKeys$E(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$E(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$E(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$E(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$20 = function styles(theme) {
+var styles$21 = function styles(theme) {
   return {
     root: {
       height: '42px',
@@ -9413,7 +9392,7 @@ function ItemMetadataFieldRow(_ref) {
   }, props))));
 }
-var ItemMetadataFieldRow$1 = styles$2A.withStyles(styles$20, {
+var ItemMetadataFieldRow$1 = styles$2B.withStyles(styles$21, {
   name: 'VdtItemMetadataFieldRow'
 })(ItemMetadataFieldRow);
@@ -9496,7 +9475,7 @@ var defaultGetFieldProps = function defaultGetFieldProps(_ref) {
   };
 };
-var styles$1$ = {
+var styles$20 = {
   root: {
     tableLayout: 'fixed'
   },
@@ -9610,10 +9589,10 @@ function PureItemMetadataFieldGroupRow(_ref4) {
   })))));
 }
-var ItemMetadataFieldGroupRow = styles$2A.withStyles(FieldGroupRowStyles, {
+var ItemMetadataFieldGroupRow = styles$2B.withStyles(FieldGroupRowStyles, {
   name: 'VdtItemMetadataFieldGroupRow'
 })(PureItemMetadataFieldGroupRow);
-var ItemMetadataFormTable = styles$2A.withStyles(styles$1$, {
+var ItemMetadataFormTable = styles$2B.withStyles(styles$20, {
   name: 'VdtItemMetadataFormTable'
 })(PureItemMetadataFormTable);
@@ -9652,7 +9631,7 @@ function ItemMetadataForm(_ref) {
   }, saveText)));
 }
-var ItemMetadataForm$1 = styles$2A.withStyles({}, {
+var ItemMetadataForm$1 = styles$2B.withStyles({}, {
   name: 'VdtItemMetadataForm'
 })(ItemMetadataForm);
@@ -9737,7 +9716,7 @@ function ownKeys$D(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$D(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$D(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$D(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$1_ = function styles(theme) {
+var styles$1$ = function styles(theme) {
   return {
     root: {
       padding: 0,
@@ -9803,7 +9782,7 @@ function ItemMetadataListFieldItem(_ref) {
   }));
 }
-var ItemMetadataListFieldItem$1 = styles$2A.withStyles(styles$1_, {
+var ItemMetadataListFieldItem$1 = styles$2B.withStyles(styles$1$, {
   name: 'VdtItemMetadataListFieldItem'
 })(ItemMetadataListFieldItem);
@@ -9815,7 +9794,7 @@ function ownKeys$C(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$C(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$C(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$C(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$1Z = function styles(theme) {
+var styles$1_ = function styles(theme) {
   return {
     root: {
       padding: 0
@@ -9904,7 +9883,7 @@ function ItemMetadataListFieldGroupItem(_ref) {
   }))));
 }
-var ItemMetadataListFieldGroupItem$1 = styles$2A.withStyles(styles$1Z, {
+var ItemMetadataListFieldGroupItem$1 = styles$2B.withStyles(styles$1_, {
   name: 'VdtItemMetadataListFieldGroupItem'
 })(ItemMetadataListFieldGroupItem);
@@ -9912,7 +9891,7 @@ var _excluded$$ = ["classes", "className", "fields", "groups", "showFieldName",
     _excluded2$9 = ["name"],
     _excluded3$2 = ["name"];
-var styles$1Y = function styles() {
+var styles$1Z = function styles() {
   return {
     root: {
       width: '100%',
@@ -9969,7 +9948,7 @@ function ItemMetadataList(_ref) {
   }));
 }
-var ItemMetadataList$1 = styles$2A.withStyles(styles$1Y, {
+var ItemMetadataList$1 = styles$2B.withStyles(styles$1Z, {
   name: 'VdtItemMetadataList'
 })(ItemMetadataList);
@@ -10063,7 +10042,7 @@ function ItemMetadataTab(_ref) {
   }))));
 }
-var ItemMetadataTab$1 = styles$2A.withStyles({}, {
+var ItemMetadataTab$1 = styles$2B.withStyles({}, {
   name: 'VdtItemMetadataTab'
 })(ItemMetadataTab);
@@ -10200,7 +10179,7 @@ function ItemFieldGroupTab(_ref) {
   }))));
 }
-var ItemFieldGroupTab$1 = styles$2A.withStyles({}, {
+var ItemFieldGroupTab$1 = styles$2B.withStyles({}, {
   name: 'VdtItemFieldGroupTab'
 })(ItemFieldGroupTab);
@@ -15742,7 +15721,7 @@ function ownKeys$B(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$B(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$B(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$B(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$1X = function styles(theme) {
+var styles$1Y = function styles(theme) {
   return {
     TableCellLabel: _objectSpread$B({
       borderStyle: 'none'
@@ -15775,7 +15754,7 @@ function TableRow(_ref) {
   }, value !== undefined ? formatValue(value) : ''));
 }
-var TableRow$1 = styles$2A.withStyles(styles$1X)(TableRow);
+var TableRow$1 = styles$2B.withStyles(styles$1Y)(TableRow);
 function AudioComponentTypeTableBody(_ref) {
   var className = _ref.className,
@@ -16101,7 +16080,7 @@ function ShapeTypeTableBody(_ref2) {
   }));
 }
-var styles$1W = function styles() {
+var styles$1X = function styles() {
   return {
     MenuIconButton: {},
     MenuIcon: {},
@@ -16189,7 +16168,7 @@ function ItemShapeMenu(_ref) {
   }));
 }
-var ItemShapeMenu$1 = styles$2A.withStyles(styles$1W, {
+var ItemShapeMenu$1 = styles$2B.withStyles(styles$1X, {
   name: 'VdtItemShapeMenu'
 })(ItemShapeMenu);
@@ -16253,7 +16232,7 @@ function ItemShapeRow(_ref) {
   })))))));
 }
-var styles$1V = function styles() {
+var styles$1W = function styles() {
   return {
     root: {
       width: '100%'
@@ -16318,10 +16297,10 @@ ItemShapeTable.defaultProps = {
   canExpand: true
 };
-var Component$R = styles$2A.withStyles(styles$1V, {
+var Component$S = styles$2B.withStyles(styles$1W, {
   name: 'VdtItemShapeTable'
 })(ItemShapeTable);
-Component$R.displayName = 'ItemShapeTable';
+Component$S.displayName = 'ItemShapeTable';
 var _excluded$Z = ["itemId", "hidden"];
 var queryParams$2 = {
@@ -16362,7 +16341,7 @@ function ItemShapeTab(_ref) {
     hiddenRef.current = hidden;
   }, [hidden, onRefresh]);
-  return /*#__PURE__*/React__default["default"].createElement(Component$R, _extends__default["default"]({
+  return /*#__PURE__*/React__default["default"].createElement(Component$S, _extends__default["default"]({
     itemId: itemId,
     itemType: itemType,
     onRemove: onRemove
@@ -16394,7 +16373,7 @@ function MetadataTypeTableBody(_ref) {
   }));
 }
-var styles$1U = function styles() {
+var styles$1V = function styles() {
   return {
     root: {
       width: '100%'
@@ -16440,10 +16419,10 @@ ItemSourceTable.defaultProps = {
   classes: {}
 };
-var Component$Q = styles$2A.withStyles(styles$1U, {
+var Component$R = styles$2B.withStyles(styles$1V, {
   name: 'VdtItemSourceTable'
 })(ItemSourceTable);
-Component$Q.displayName = 'ItemSourceTable';
+Component$R.displayName = 'ItemSourceTable';
 var queryParams$1 = {
   content: ['shape', 'metadata'],
@@ -16457,7 +16436,7 @@ function ItemSourceTab(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(vdtReact.GetItem, {
     itemId: itemId,
     queryParams: queryParams$1
-  }, /*#__PURE__*/React__default["default"].createElement(Component$Q, null));
+  }, /*#__PURE__*/React__default["default"].createElement(Component$R, null));
 }
 function ItemPosterDialog(_ref) {
@@ -16511,7 +16490,7 @@ function ItemPosterDialog(_ref) {
 function ownKeys$z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$z(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$1T = function styles(theme) {
+var styles$1U = function styles(theme) {
   return {
     root: {
       color: theme.palette.common.white,
@@ -16560,10 +16539,10 @@ MediaCardThumbnailLabel.defaultProps = {
   style: {}
 };
-var Component$P = styles$2A.withStyles(styles$1T, {
+var Component$Q = styles$2B.withStyles(styles$1U, {
   name: 'VdtMediaCardThumbnailLabel'
 })(MediaCardThumbnailLabel);
-Component$P.displayName = 'MediaCardThumbnailLabel';
+Component$Q.displayName = 'MediaCardThumbnailLabel';
 var formatDurationSeconds = function formatDurationSeconds(durationSeconds) {
   var hours = Math.floor(durationSeconds / 3600);
@@ -16582,7 +16561,7 @@ function MediaCardDurationLabel(_ref) {
   var seconds = Number(label);
   if (seconds === 0) return null;
   var formattedDuration = formatDurationSeconds(seconds);
-  return /*#__PURE__*/React__default["default"].createElement(Component$P, {
+  return /*#__PURE__*/React__default["default"].createElement(Component$Q, {
     className: className,
     classes: classes,
     style: style,
@@ -16591,7 +16570,7 @@ function MediaCardDurationLabel(_ref) {
 }
 var _excluded$Y = ["classes", "className", "component", "image", "height", "width", "primaryColor", "onClick", "labelLeftTop", "LabelComponentLeftTop", "LabelPropsLeftTop", "labelLeftBottom", "LabelComponentLeftBottom", "LabelPropsLeftBottom", "labelRightTop", "LabelComponentRightTop", "LabelPropsRightTop", "labelRightBottom", "LabelComponentRightBottom", "LabelPropsRightBottom", "innerProps", "scrubOnHover", "scrubOffsetProp", "scrubLabelLeftMargin", "ScrubLabelComponent", "ScrubLabelProps"];
-var styles$1S = function styles(theme) {
+var styles$1T = function styles(theme) {
   return {
     root: {},
     container: {
@@ -16838,16 +16817,16 @@ MediaCardThumbnail.defaultProps = {
   primaryColor: undefined,
   onClick: undefined,
   labelLeftTop: undefined,
-  LabelComponentLeftTop: Component$P,
+  LabelComponentLeftTop: Component$Q,
   LabelPropsLeftTop: {},
   labelLeftBottom: undefined,
-  LabelComponentLeftBottom: Component$P,
+  LabelComponentLeftBottom: Component$Q,
   LabelPropsLeftBottom: {},
   labelRightTop: undefined,
-  LabelComponentRightTop: Component$P,
+  LabelComponentRightTop: Component$Q,
   LabelPropsRightTop: {},
   labelRightBottom: undefined,
-  LabelComponentRightBottom: Component$P,
+  LabelComponentRightBottom: Component$Q,
   LabelPropsRightBottom: {},
   innerProps: {},
   scrubOnHover: true,
@@ -16857,12 +16836,12 @@ MediaCardThumbnail.defaultProps = {
   ScrubLabelProps: {}
 };
-var Component$O = styles$2A.withStyles(styles$1S, {
+var Component$P = styles$2B.withStyles(styles$1T, {
   name: 'VdtMediaCardThumbnail'
 })(MediaCardThumbnail);
-Component$O.displayName = 'MediaCardThumbnail';
+Component$P.displayName = 'MediaCardThumbnail';
-var styles$1R = function styles(theme) {
+var styles$1S = function styles(theme) {
   return {
     root: {},
     posterRoot: {
@@ -16880,7 +16859,7 @@ function ItemPosterList(_ref) {
       imgList = _ref$imgList === void 0 ? [] : _ref$imgList,
       handleOpen = _ref.handleOpen,
       _ref$MediaCardThumbna = _ref.MediaCardThumbnailComponent,
-      MediaCardThumbnailComponent = _ref$MediaCardThumbna === void 0 ? Component$O : _ref$MediaCardThumbna,
+      MediaCardThumbnailComponent = _ref$MediaCardThumbna === void 0 ? Component$P : _ref$MediaCardThumbna,
       _ref$MediaCardThumbna2 = _ref.MediaCardThumbnailProps,
       MediaCardThumbnailProps = _ref$MediaCardThumbna2 === void 0 ? {} : _ref$MediaCardThumbna2;
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -16908,7 +16887,7 @@ function ItemPosterList(_ref) {
   }));
 }
-var ItemPosterList$1 = styles$2A.withStyles(styles$1R, {
+var ItemPosterList$1 = styles$2B.withStyles(styles$1S, {
   name: 'VdtItemPosterList'
 })(ItemPosterList);
@@ -17082,7 +17061,7 @@ var IMAGE_MIMETYPE_PREFIX = 'image';
 var COLLECTION$4 = 'collection';
 var FILE$1 = 'file';
 var PLACEHOLDER = 'placeholder';
-var styles$1Q = {};
+var styles$1R = {};
 function MimeTypeIcon(_ref) {
   var className = _ref.className,
       classes = _ref.classes,
@@ -17143,12 +17122,12 @@ MimeTypeIcon.defaultProps = {
   collectionIcon: FolderIcon__default["default"]
 };
-var Component$N = styles$2A.withStyles(styles$1Q, {
+var Component$O = styles$2B.withStyles(styles$1R, {
   name: 'VdtMimeTypeIcon'
 })(MimeTypeIcon);
-Component$N.displayName = 'MimeTypeIcon';
+Component$O.displayName = 'MimeTypeIcon';
-var styles$1P = {
+var styles$1Q = {
   root: {
     transition: 'background-color .2s ease-out'
   },
@@ -17165,7 +17144,7 @@ function MediaCardAvatar(_ref) {
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'square' : _ref$variant,
       _ref$MimeTypeComponen = _ref.MimeTypeComponent,
-      MimeTypeComponent = _ref$MimeTypeComponen === void 0 ? Component$N : _ref$MimeTypeComponen,
+      MimeTypeComponent = _ref$MimeTypeComponen === void 0 ? Component$O : _ref$MimeTypeComponen,
       _ref$MimeTypeProps = _ref.MimeTypeProps,
       MimeTypeProps = _ref$MimeTypeProps === void 0 ? {} : _ref$MimeTypeProps,
       _ref$SkeletonProps = _ref.SkeletonProps,
@@ -17206,20 +17185,20 @@ MediaCardAvatar.defaultProps = {
   avatar: undefined,
   skeleton: false,
   variant: 'square',
-  MimeTypeComponent: Component$N,
+  MimeTypeComponent: Component$O,
   MimeTypeProps: {},
   SkeletonProps: {},
   AvatarProps: {}
 };
-var Component$M = styles$2A.withStyles(styles$1P, {
+var Component$N = styles$2B.withStyles(styles$1Q, {
   name: 'VdtMediaCardAvatar'
 })(MediaCardAvatar);
-Component$M.displayName = 'MediaCardAvatar';
+Component$N.displayName = 'MediaCardAvatar';
 var _excluded$W = ["className", "classes", "checked", "handleHover", "children", "innerProps"];
-var styles$1O = function styles(theme) {
+var styles$1P = function styles(theme) {
   return {
     root: {
       width: 'inherit',
@@ -17239,7 +17218,7 @@ var styles$1O = function styles(theme) {
         }
       },
       '& .MuiCardHeader-root': {
-        backgroundColor: theme.palette.type === 'dark' ? styles$2A.emphasize(theme.palette.background.paper, 0.1) : undefined,
+        backgroundColor: theme.palette.type === 'dark' ? styles$2B.emphasize(theme.palette.background.paper, 0.1) : undefined,
         color: theme.palette.type === 'dark' ? theme.palette.common.white : undefined
       }
     },
@@ -17267,7 +17246,7 @@ function MediaCardCard(_ref) {
   }, CardProps), children);
 }
-var MediaCardCard$1 = styles$2A.withStyles(styles$1O, {
+var MediaCardCard$1 = styles$2B.withStyles(styles$1P, {
   name: 'VdtMediaCardCard'
 })(MediaCardCard);
@@ -17294,7 +17273,7 @@ function MediaCardContent(_ref) {
   })))));
 }
-var useStyles$1 = styles$2A.makeStyles({
+var useStyles$1 = styles$2B.makeStyles({
   colorDefault: {
     color: function color(props) {
       return props.primaryColor;
@@ -17355,7 +17334,7 @@ function MediaCardMenu(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(MenuItem__default["default"], null, "First"), /*#__PURE__*/React__default["default"].createElement(MenuItem__default["default"], null, "Second"), /*#__PURE__*/React__default["default"].createElement(MenuItem__default["default"], null, "Third")));
 }
-var useStyles = styles$2A.makeStyles({
+var useStyles = styles$2B.makeStyles({
   root: {
     paddingLeft: 8,
     paddingRight: 0,
@@ -17391,7 +17370,7 @@ function MediaCardHeader(_ref) {
       handleChecked = _ref.handleChecked,
       avatar = _ref.avatar,
       _ref$AvatarComponent = _ref.AvatarComponent,
-      AvatarComponent = _ref$AvatarComponent === void 0 ? Component$M : _ref$AvatarComponent,
+      AvatarComponent = _ref$AvatarComponent === void 0 ? Component$N : _ref$AvatarComponent,
       _ref$AvatarProps = _ref.AvatarProps,
       AvatarProps = _ref$AvatarProps === void 0 ? {} : _ref$AvatarProps,
       _ref$MenuComponent = _ref.MenuComponent,
@@ -17436,7 +17415,7 @@ var _excluded$V = ["className", "classes", "onHover", "onCheck", "onClick", "che
  * MediaCard displays information, thumbnail and action buttons
  */
-var styles$1N = function styles() {
+var styles$1O = function styles() {
   return {
     root: {}
   };
@@ -17569,10 +17548,10 @@ MediaCard.defaultProps = {
   avatar: undefined,
   CardComponent: MediaCardCard$1,
   HeaderComponent: MediaCardHeader,
-  ThumbnailComponent: Component$O,
+  ThumbnailComponent: Component$P,
   ContentComponent: MediaCardContent,
   ActionsComponent: MediaCardActions,
-  AvatarComponent: Component$M,
+  AvatarComponent: Component$N,
   MenuComponent: MediaCardMenu,
   CardProps: {},
   HeaderProps: {},
@@ -17583,10 +17562,10 @@ MediaCard.defaultProps = {
   MenuProps: {}
 };
-var Component$L = styles$2A.withStyles(styles$1N, {
+var Component$M = styles$2B.withStyles(styles$1O, {
   name: 'VdtMediaCard'
 })(MediaCard);
-Component$L.displayName = 'MediaCard';
+Component$M.displayName = 'MediaCard';
 function CollectionAvatar() {
   return /*#__PURE__*/React__default["default"].createElement(core.Avatar, {
@@ -17595,7 +17574,7 @@ function CollectionAvatar() {
 }
 var _excluded$U = ["collectionType", "MediaCardComponent", "AvatarComponent", "ThumbnailComponent", "MenuComponent", "ContentComponent", "ActionsComponent", "metadataToProps", "parseMetadataOpts", "titleSelector", "subheaderSelector"];
-var styles$1M = {};
+var styles$1N = {};
 var metadataToProps$3 = function metadataToProps(_ref) {
   var collectionType = _ref.collectionType,
@@ -17665,7 +17644,7 @@ CollectionCard.defaultProps = {
     joinValue: ', ',
     flat: true
   },
-  MediaCardComponent: Component$L,
+  MediaCardComponent: Component$M,
   AvatarComponent: CollectionAvatar,
   ThumbnailComponent: null,
   MenuComponent: null,
@@ -17679,12 +17658,12 @@ CollectionCard.defaultProps = {
   }
 };
-var Component$K = styles$2A.withStyles(styles$1M, {
+var Component$L = styles$2B.withStyles(styles$1N, {
   name: 'VdtCollectionCard'
 })(CollectionCard);
-Component$K.displayName = 'CollectionCard';
+Component$L.displayName = 'CollectionCard';
-var styles$1L = {
+var styles$1M = {
   root: {
     display: 'flex',
     flexWrap: 'wrap',
@@ -17805,13 +17784,13 @@ ImageCollage.defaultProps = {
   }
 };
-var Component$J = styles$2A.withStyles(styles$1L, {
+var Component$K = styles$2B.withStyles(styles$1M, {
   name: 'VdtImageCollage'
 })(ImageCollage);
-Component$J.displayName = 'ImageCollage';
+Component$K.displayName = 'ImageCollage';
 var _excluded$T = ["classes", "className", "component", "height", "width", "primaryColor", "onClick", "onError", "innerProps", "ImageCollageProps"];
-var styles$1K = function styles() {
+var styles$1L = function styles() {
   return {
     root: {},
     isClickable: {
@@ -17893,7 +17872,7 @@ function CollectionCardThumbnail(_ref) {
       width: width,
       backgroundColor: thumbnailUrls.length ? undefined : primaryColor
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Component$J, _extends__default["default"]({
+  }, /*#__PURE__*/React__default["default"].createElement(Component$K, _extends__default["default"]({
     className: "VdtCollectionCardThumbnail-image",
     urls: thumbnailUrls,
     onError: handleError
@@ -17936,15 +17915,15 @@ CollectionCardThumbnail.defaultProps = {
   ImageCollageProps: {}
 };
-var Component$I = styles$2A.withStyles(styles$1K, {
+var Component$J = styles$2B.withStyles(styles$1L, {
   name: 'VdtCollectionCardThumbnail'
 })(CollectionCardThumbnail);
-Component$I.displayName = 'CollectionCardThumbnail';
+Component$J.displayName = 'CollectionCardThumbnail';
 function ownKeys$y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$y(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$1J = {
+var styles$1K = {
   root: {}
 };
 function CollectionGrid(_ref) {
@@ -18009,7 +17988,7 @@ CollectionGrid.defaultProps = {
   className: undefined,
   classes: {},
   collectionListType: {},
-  CollectionCardComponent: Component$K,
+  CollectionCardComponent: Component$L,
   CollectionCardProps: {},
   GridContainerProps: {},
   GridItemProps: {},
@@ -18017,10 +17996,10 @@ CollectionGrid.defaultProps = {
   onCollectionClick: null
 };
-var Component$H = styles$2A.withStyles(styles$1J, {
+var Component$I = styles$2B.withStyles(styles$1K, {
   name: 'VdtCollectionGrid'
 })(CollectionGrid);
-Component$H.displayName = 'CollectionGrid';
+Component$I.displayName = 'CollectionGrid';
 var _excluded$S = ["classes", "className", "options", "metadataToProps", "parseMetadataOpts", "selected", "onCheck", "onClick", "TableRowProps"];
@@ -18038,7 +18017,7 @@ var defaultMetadataToProps = function defaultMetadataToProps(_ref) {
   });
 };
-var styles$1I = function styles() {
+var styles$1J = function styles() {
   return {
     root: {}
   };
@@ -18132,13 +18111,13 @@ CollectionRow.defaultProps = {
   TableRowProps: {}
 };
-var Component$G = styles$2A.withStyles(styles$1I, {
+var Component$H = styles$2B.withStyles(styles$1J, {
   name: 'VdtCollectionRow'
 })(CollectionRow);
-Component$G.displayName = 'CollectionRow';
+Component$H.displayName = 'CollectionRow';
 var _excluded$R = ["classes", "className", "collectionListType", "RowComponent", "options", "onCheck", "selected", "onRowClick"];
-var styles$1H = function styles() {
+var styles$1I = function styles() {
   return {
     root: {}
   };
@@ -18204,17 +18183,17 @@ CollectionTable.defaultProps = {
   className: undefined,
   classes: {},
   collectionListType: {},
-  RowComponent: Component$G,
+  RowComponent: Component$H,
   options: [],
   onCheck: undefined,
   selected: undefined,
   onRowClick: undefined
 };
-var Component$F = styles$2A.withStyles(styles$1H, {
+var Component$G = styles$2B.withStyles(styles$1I, {
   name: 'VdtCollectionTable'
 })(CollectionTable);
-Component$F.displayName = 'CollectionTable';
+Component$G.displayName = 'CollectionTable';
 var LOAD_MORE$1 = 'LOAD_MORE';
 var ITEM$3 = 'ITEM';
@@ -18977,17 +18956,17 @@ withDrop.defaultProps = {
   acceptedEntityTypes: ACCEPTED_ENTITY_TYPES
 };
-var styles$1G = {
+var styles$1H = {
   isDragging: {
     opacity: 0.5,
     cursor: 'move'
   }
 };
-var TreeItemDraggable = vdtReact.compose(core.withStyles(styles$1G, {
+var TreeItemDraggable = vdtReact.compose(core.withStyles(styles$1H, {
   name: 'VdtTreeItemDraggable'
 }), withDrag)(TreeItem__default["default"]);
-var styles$1F = function styles() {
+var styles$1G = function styles() {
   return {
     root: {}
   };
@@ -19014,7 +18993,7 @@ function ItemLabel(_ref) {
     className: clsx__default["default"](className, classes.root, 'VdtItemLabel-root'),
     display: "flex",
     alignItems: "flex-end"
-  }, /*#__PURE__*/React__default["default"].createElement(Component$N, {
+  }, /*#__PURE__*/React__default["default"].createElement(Component$O, {
     mimeType: mimeType
   }), /*#__PURE__*/React__default["default"].createElement(core.Typography, {
     style: {
@@ -19023,11 +19002,11 @@ function ItemLabel(_ref) {
   }, label));
 }
-var ItemLabel$1 = core.withStyles(styles$1F, {
+var ItemLabel$1 = core.withStyles(styles$1G, {
   name: 'VdtItemLabel'
 })(ItemLabel);
-var styles$1E = function styles(theme) {
+var styles$1F = function styles(theme) {
   return {
     isOver: {
       backgroundColor: theme.palette.primary.main
@@ -19035,11 +19014,11 @@ var styles$1E = function styles(theme) {
   };
 };
-var ItemLabelDroppable = vdtReact.compose(core.withStyles(styles$1E, {
+var ItemLabelDroppable = vdtReact.compose(core.withStyles(styles$1F, {
   name: 'VdtItemLabelDroppable'
 }), withDrop)(ItemLabel$1);
-var styles$1D = {
+var styles$1E = {
   root: {}
 };
@@ -19077,11 +19056,11 @@ function ItemTreeItem(_ref) {
   }, TreeItemProps));
 }
-var ItemTreeItem$1 = core.withStyles(styles$1D, {
+var ItemTreeItem$1 = core.withStyles(styles$1E, {
   name: 'VdtItemTreeItem'
 })(ItemTreeItem);
-var styles$1C = {
+var styles$1D = {
   root: {}
 };
@@ -19113,11 +19092,11 @@ function CollectionLabel(_ref) {
   }, collectionLabel));
 }
-var CollectionLabel$1 = core.withStyles(styles$1C, {
+var CollectionLabel$1 = core.withStyles(styles$1D, {
   name: 'CollectionLabel'
 })(CollectionLabel);
-var styles$1B = function styles(theme) {
+var styles$1C = function styles(theme) {
   return {
     isOver: {
       backgroundColor: theme.palette.primary.main
@@ -19125,7 +19104,7 @@ var styles$1B = function styles(theme) {
   };
 };
-var CollectionLabelDroppable = vdtReact.compose(core.withStyles(styles$1B, {
+var CollectionLabelDroppable = vdtReact.compose(core.withStyles(styles$1C, {
   name: 'VdtCollectionLabelDroppable'
 }), withDrop)(CollectionLabel$1);
@@ -19164,7 +19143,7 @@ var getStateWithParentCollection = function getStateWithParentCollection(state,
   });
 };
-var styles$1A = {
+var styles$1B = {
   root: {}
 };
 function CollectionTreeList(_ref) {
@@ -19439,15 +19418,15 @@ function CollectionTreeList(_ref) {
   }) : undefined);
 }
-var Component$E = styles$2A.withStyles(styles$1A, {
+var Component$F = styles$2B.withStyles(styles$1B, {
   name: 'VdtCollectionTreeList'
 })(CollectionTreeList);
-Component$E.displayName = 'CollectionTreeList';
+Component$F.displayName = 'CollectionTreeList';
 function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$1z = function styles() {
+var styles$1A = function styles() {
   return {
     ListItemSecondaryAction: {
       visibility: 'hidden'
@@ -19610,7 +19589,7 @@ CollectionListItem.defaultProps = {
   onClick: undefined,
   ActionComponent: undefined,
   ActionProps: {},
-  AvatarComponent: Component$M,
+  AvatarComponent: Component$N,
   AvatarProps: {},
   ListItemProps: {},
   parseMetadataOptions: {
@@ -19620,12 +19599,12 @@ CollectionListItem.defaultProps = {
   skeleton: false
 };
-var Component$D = styles$2A.withStyles(styles$1z, {
+var Component$E = styles$2B.withStyles(styles$1A, {
   name: 'VdtCollectionListItem'
 })(CollectionListItem);
-Component$D.displayName = 'CollectionListItem';
+Component$E.displayName = 'CollectionListItem';
-var styles$1y = function styles() {
+var styles$1z = function styles() {
   return {
     root: {
       width: '100%'
@@ -19666,14 +19645,14 @@ CollectionList.defaultProps = {
   classes: {},
   collectionListType: {},
   onItemClick: undefined,
-  CollectionListItemComponent: Component$D,
+  CollectionListItemComponent: Component$E,
   CollectionListItemProps: {}
 };
-var Component$C = styles$2A.withStyles(styles$1y, {
+var Component$D = styles$2B.withStyles(styles$1z, {
   name: 'VdtCollectionList'
 })(CollectionList);
-Component$C.displayName = 'CollectionList';
+Component$D.displayName = 'CollectionList';
 function CollectionMetadataEdit(_ref) {
   var collectionId = _ref.collectionId,
@@ -19802,7 +19781,7 @@ function CollectionMetadataTab(_ref) {
   }))));
 }
-var CollectionMetadataTab$1 = styles$2A.withStyles({}, {
+var CollectionMetadataTab$1 = styles$2B.withStyles({}, {
   name: 'VdtCollectionMetadataTab'
 })(CollectionMetadataTab);
@@ -19874,11 +19853,11 @@ function CollectionAccessTab(_ref) {
   }, EntityAccessTableProps)));
 }
-var CollectionAccessTab$1 = styles$2A.withStyles({}, {
+var CollectionAccessTab$1 = styles$2B.withStyles({}, {
   name: 'VdtCollectionAccessTab'
 })(CollectionAccessTab);
-var styles$1x = function styles() {
+var styles$1y = function styles() {
   return {
     root: {}
   };
@@ -19967,12 +19946,12 @@ CollectionCreateDialog.defaultProps = {
   onSuccess: undefined
 };
-var Component$B = styles$2A.withStyles(styles$1x, {
+var Component$C = styles$2B.withStyles(styles$1y, {
   name: 'VdtCollectionCreateDialog'
 })(CollectionCreateDialog);
-Component$B.displayName = 'CollectionCreateDialog';
+Component$C.displayName = 'CollectionCreateDialog';
-var styles$1w = function styles(theme) {
+var styles$1x = function styles(theme) {
   return {
     root: {
       alignItems: 'center',
@@ -20238,10 +20217,10 @@ SearchInput.defaultProps = {
   inputRef: undefined
 };
-var Component$A = styles$2A.withStyles(styles$1w, {
+var Component$B = styles$2B.withStyles(styles$1x, {
   name: 'VdtSearchInput'
 })(SearchInput);
-Component$A.displayName = 'SearchInput';
+Component$B.displayName = 'SearchInput';
 var _excluded$N = ["PaginationComponent"];
@@ -20253,41 +20232,39 @@ function PaginationWrapper$1(_ref) {
   var _props$collectionList = props.collectionListType.hits,
       count = _props$collectionList === void 0 ? 0 : _props$collectionList;
   return /*#__PURE__*/React__default["default"].createElement(PaginationComponent, _extends__default["default"]({
-    count: count
+    count: count // eslint-disable-next-line react/jsx-props-no-spreading
   }, props));
 }
 function SearchInputWrapper$1(props) {
   var isLoading = props.isLoading;
-  return /*#__PURE__*/React__default["default"].createElement(Component$A, _extends__default["default"]({
-    submitting: isLoading
-  }, props));
-} // TODO: Rename to SelectCollection
+  return /*#__PURE__*/React__default["default"].createElement(Component$B, _extends__default["default"]({
+    submitting: isLoading // eslint-disable-next-line react/jsx-props-no-spreading
+  }, props));
+}
+var styles$1w = function styles() {
+  return {
+    root: {}
+  };
+};
 function CollectionSearchPicker(_ref2) {
-  var onChange = _ref2.onChange,
-      _ref2$onCheck = _ref2.onCheck,
-      onCheck = _ref2$onCheck === void 0 ? function () {} : _ref2$onCheck,
-      _ref2$CollectionTable = _ref2.CollectionTableComponent,
-      CollectionTableComponent = _ref2$CollectionTable === void 0 ? Component$F : _ref2$CollectionTable,
-      _ref2$CollectionTable2 = _ref2.CollectionTableProps,
-      CollectionTableProps = _ref2$CollectionTable2 === void 0 ? {} : _ref2$CollectionTable2,
+  var className = _ref2.className,
+      classes = _ref2.classes,
+      onChange = _ref2.onChange,
+      onCheck = _ref2.onCheck,
+      CollectionTableComponent = _ref2.CollectionTableComponent,
+      CollectionTableProps = _ref2.CollectionTableProps,
       searchProps = _ref2.searchProps,
-      _ref2$idLabelText = _ref2.idLabelText,
-      idLabelText = _ref2$idLabelText === void 0 ? 'Id' : _ref2$idLabelText,
-      _ref2$titleLabelText = _ref2.titleLabelText,
-      titleLabelText = _ref2$titleLabelText === void 0 ? 'Title' : _ref2$titleLabelText,
-      _ref2$ownerLabelText = _ref2.ownerLabelText,
-      ownerLabelText = _ref2$ownerLabelText === void 0 ? 'Owner' : _ref2$ownerLabelText,
-      _ref2$searchPlacehold = _ref2.searchPlaceholder,
-      searchPlaceholder = _ref2$searchPlacehold === void 0 ? 'Search collections' : _ref2$searchPlacehold,
-      _ref2$SearchInputProp = _ref2.SearchInputProps,
-      SearchInputProps = _ref2$SearchInputProp === void 0 ? {} : _ref2$SearchInputProp,
-      _ref2$PaginationProps = _ref2.PaginationProps,
-      PaginationProps = _ref2$PaginationProps === void 0 ? {} : _ref2$PaginationProps,
-      _ref2$SearchCollectio = _ref2.SearchCollectionProps,
-      SearchCollectionProps = _ref2$SearchCollectio === void 0 ? {} : _ref2$SearchCollectio;
+      idLabelText = _ref2.idLabelText,
+      titleLabelText = _ref2.titleLabelText,
+      ownerLabelText = _ref2.ownerLabelText,
+      searchPlaceholder = _ref2.searchPlaceholder,
+      SearchInputProps = _ref2.SearchInputProps,
+      PaginationProps = _ref2.PaginationProps,
+      SearchCollectionProps = _ref2.SearchCollectionProps;
   var defaultSearchProps = vdtReact.useSearch({
     queryParams: {
       field: ['collectionId', 'title', '__user'],
@@ -20336,15 +20313,19 @@ function CollectionSearchPicker(_ref2) {
     return check(id);
   };
-  return /*#__PURE__*/React__default["default"].createElement(vdtReact.SearchCollection, _extends__default["default"]({
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: clsx__default["default"](classes.root, 'VdtCollectionSearchPicker', className)
+  }, /*#__PURE__*/React__default["default"].createElement(vdtReact.SearchCollection, _extends__default["default"]({
     itemSearchDocument: itemSearchDocument,
     matrixParams: matrixParams,
-    queryParams: queryParams
+    queryParams: queryParams // eslint-disable-next-line react/jsx-props-no-spreading
   }, SearchCollectionProps), /*#__PURE__*/React__default["default"].createElement(SearchInputWrapper$1, _extends__default["default"]({
     onSubmit: function onSubmit(text) {
       return setSearchText("*".concat(text, "*"));
     },
-    searchPlaceholder: searchPlaceholder
+    searchPlaceholder: searchPlaceholder // eslint-disable-next-line react/jsx-props-no-spreading
   }, SearchInputProps)), /*#__PURE__*/React__default["default"].createElement(CollectionTableComponent, _extends__default["default"]({
     onRowClick: handleRowClick,
     onCheck: onCheck,
@@ -20358,18 +20339,60 @@ function CollectionSearchPicker(_ref2) {
     }, {
       label: ownerLabelText,
       value: '__user'
-    }]
+    }] // eslint-disable-next-line react/jsx-props-no-spreading
   }, CollectionTableProps)), /*#__PURE__*/React__default["default"].createElement(PaginationWrapper$1, _extends__default["default"]({
     onChangePage: onChangePage,
     onChangeRowsPerPage: onChangeRowsPerPage,
     page: page,
-    rowsPerPage: rowsPerPage
-  }, PaginationProps)));
+    rowsPerPage: rowsPerPage // eslint-disable-next-line react/jsx-props-no-spreading
+  }, PaginationProps))));
 }
+CollectionSearchPicker.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes$1.objectOf(PropTypes$1.string),
-var CollectionSearchPicker$1 = styles$2A.withStyles({}, {
+  /**
+   * @ignore
+   */
+  className: PropTypes$1.string,
+  onChange: PropTypes$1.func,
+  onCheck: PropTypes$1.func,
+  CollectionTableComponent: PropTypes$1.elementType,
+  CollectionTableProps: PropTypes$1.objectOf(PropTypes$1.any),
+  searchProps: PropTypes$1.objectOf(PropTypes$1.any),
+  idLabelText: PropTypes$1.string,
+  titleLabelText: PropTypes$1.string,
+  ownerLabelText: PropTypes$1.string,
+  searchPlaceholder: PropTypes$1.string,
+  SearchInputProps: PropTypes$1.objectOf(PropTypes$1.any),
+  PaginationProps: PropTypes$1.objectOf(PropTypes$1.any),
+  SearchCollectionProps: PropTypes$1.objectOf(PropTypes$1.any)
+};
+CollectionSearchPicker.defaultProps = {
+  className: undefined,
+  classes: {},
+  onChange: undefined,
+  onCheck: function onCheck() {},
+  CollectionTableComponent: Component$G,
+  CollectionTableProps: {},
+  searchProps: undefined,
+  idLabelText: 'Id',
+  titleLabelText: 'Title',
+  ownerLabelText: 'Owner',
+  searchPlaceholder: 'Search collections',
+  SearchInputProps: {},
+  PaginationProps: {},
+  SearchCollectionProps: {}
+};
+var Component$A = styles$2B.withStyles(styles$1w, {
   name: 'VdtCollectionSearchPicker'
 })(CollectionSearchPicker);
+Component$A.displayName = 'CollectionSearchPicker';
 function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -20585,7 +20608,7 @@ AddToCollectionDialog.propTypes = {
 AddToCollectionDialog.defaultProps = {
   classes: {},
   className: undefined,
-  CollectionPickerComponent: CollectionSearchPicker$1,
+  CollectionPickerComponent: Component$A,
   CreateCollectionComponent: CreateCollection,
   onClose: function onClose() {},
   onSubmit: defaultOnSubmit$1,
@@ -20607,7 +20630,7 @@ AddToCollectionDialog.defaultProps = {
   SearchCollectionIcon: SearchIcon__default["default"]
 };
-var Component$z = styles$2A.withStyles(styles$1v, {
+var Component$z = styles$2B.withStyles(styles$1v, {
   name: 'VdtAddToCollectionDialog'
 })(AddToCollectionDialog);
 Component$z.displayName = 'AddToCollectionDialog';
@@ -20702,7 +20725,7 @@ RemoveFromCollectionDialog.defaultProps = {
   confirmText: 'Remove'
 };
-var Component$y = styles$2A.withStyles(styles$1u, {
+var Component$y = styles$2B.withStyles(styles$1u, {
   name: 'VdtRemoveFromCollectionDialog'
 })(RemoveFromCollectionDialog);
 Component$y.displayName = 'RemoveFromCollectionDialog';
@@ -20874,7 +20897,7 @@ function CollectionContentCollection(_ref3) {
       _ref3$PaperProps = _ref3.PaperProps,
       PaperProps = _ref3$PaperProps === void 0 ? {} : _ref3$PaperProps,
       _ref3$IconComponent = _ref3.IconComponent,
-      IconComponent = _ref3$IconComponent === void 0 ? Component$N : _ref3$IconComponent;
+      IconComponent = _ref3$IconComponent === void 0 ? Component$O : _ref3$IconComponent;
   var isSelected = selected && selected.entityType === 'collection' && selected.entityId === collectionId;
   var onClickListItem = function onClickListItem() {
@@ -20912,7 +20935,7 @@ function CollectionContentCollection(_ref3) {
   }, ListItemMenuProps)));
 }
-var CollectionContentCollection$1 = styles$2A.withStyles(styles$1t, {
+var CollectionContentCollection$1 = styles$2B.withStyles(styles$1t, {
   name: 'VdtCollectionContentCollection'
 })(CollectionContentCollection);
@@ -21098,13 +21121,13 @@ var defaultListItemAvatarComponent = function defaultListItemAvatarComponent(_re
       _ref4$PaperProps = _ref4.PaperProps,
       PaperProps = _ref4$PaperProps === void 0 ? {} : _ref4$PaperProps,
       _ref4$ThumbnailCompon = _ref4.ThumbnailComponent,
-      ThumbnailComponent = _ref4$ThumbnailCompon === void 0 ? Component$O : _ref4$ThumbnailCompon,
+      ThumbnailComponent = _ref4$ThumbnailCompon === void 0 ? Component$P : _ref4$ThumbnailCompon,
       _ref4$ThumbnailProps = _ref4.ThumbnailProps,
       ThumbnailProps = _ref4$ThumbnailProps === void 0 ? {} : _ref4$ThumbnailProps,
       _ref4$ThumbnailLabelC = _ref4.ThumbnailLabelComponent,
-      ThumbnailLabelComponent = _ref4$ThumbnailLabelC === void 0 ? Component$P : _ref4$ThumbnailLabelC,
+      ThumbnailLabelComponent = _ref4$ThumbnailLabelC === void 0 ? Component$Q : _ref4$ThumbnailLabelC,
       _ref4$IconComponent = _ref4.IconComponent,
-      IconComponent = _ref4$IconComponent === void 0 ? Component$N : _ref4$IconComponent,
+      IconComponent = _ref4$IconComponent === void 0 ? Component$O : _ref4$IconComponent,
       _ref4$ListItemAvatarC = _ref4.ListItemAvatarComponent,
       ListItemAvatarComponent = _ref4$ListItemAvatarC === void 0 ? core.ListItemAvatar : _ref4$ListItemAvatarC,
       props = _objectWithoutProperties__default["default"](_ref4, _excluded2$8);
@@ -21316,7 +21339,7 @@ function CollectionContentItem(_ref7) {
   }, /*#__PURE__*/React__default["default"].createElement(icons.Wallpaper, null))));
 }
-var CollectionContentItem$1 = styles$2A.withStyles(styles$1s, {
+var CollectionContentItem$1 = styles$2B.withStyles(styles$1s, {
   name: 'VdtCollectionContentItem'
 })(CollectionContentItem);
@@ -21397,7 +21420,7 @@ CollectionContentSkeleton.defaultProps = {
   ListItemAvatarProps: {},
   ListItemTextProps: {}
 };
-var CollectionContentSkeleton$1 = styles$2A.withStyles(styles$1r, {
+var CollectionContentSkeleton$1 = styles$2B.withStyles(styles$1r, {
   name: 'VdtCollectionContentSkeleton'
 })(CollectionContentSkeleton);
@@ -21477,7 +21500,7 @@ function CollectionContentEntity(_ref) {
   }[entityType];
 }
-var CollectionContentEntity$1 = styles$2A.withStyles({}, {
+var CollectionContentEntity$1 = styles$2B.withStyles({}, {
   name: 'VdtCollectionContentEntity'
 })(CollectionContentEntity);
@@ -21519,13 +21542,13 @@ var collectionContentDroppableStyles = function collectionContentDroppableStyles
     canDrop: {
       boxShadow: "inset 0px 0px 1px 1px ".concat(theme.palette.primary.main),
       '&.VdtDroppable-isOver': {
-        backgroundColor: styles$2A.emphasize(theme.palette.background.paper, 0.05)
+        backgroundColor: styles$2B.emphasize(theme.palette.background.paper, 0.05)
       }
     }
   };
 };
-var CollectionContentDroppable = vdtReact.compose(styles$2A.withStyles(collectionContentDroppableStyles, {
+var CollectionContentDroppable = vdtReact.compose(styles$2B.withStyles(collectionContentDroppableStyles, {
   name: 'VdtCollectionContentDroppable'
 }), withDrop)(CollectionContentWrapper);
@@ -21533,7 +21556,7 @@ var CollectionContentEntityStyles = function CollectionContentEntityStyles(theme
   return {
     root: {
       marginBottom: theme.spacing(1.25),
-      backgroundColor: theme.palette.type === 'dark' ? styles$2A.emphasize(theme.palette.background.paper, 0.1) : undefined,
+      backgroundColor: theme.palette.type === 'dark' ? styles$2B.emphasize(theme.palette.background.paper, 0.1) : undefined,
       color: theme.palette.type === 'dark' ? theme.palette.common.white : undefined,
       borderColor: 'transparent',
       borderWidth: 0.7,
@@ -21560,7 +21583,7 @@ function CollectionContentEntityWrapper(_ref2) {
   }, /*#__PURE__*/React__default["default"].createElement(CollectionContentEntity$1, props));
 }
-var CollectionContentEntityDraggable = vdtReact.compose(styles$2A.withStyles(CollectionContentEntityStyles, {
+var CollectionContentEntityDraggable = vdtReact.compose(styles$2B.withStyles(CollectionContentEntityStyles, {
   name: 'VdtCollectionContentEntityDraggable'
 }), withDrag)(CollectionContentEntityWrapper);
 function CollectionContent(_ref3) {
@@ -21709,7 +21732,7 @@ function CollectionContent(_ref3) {
   }));
 }
-var Component$x = styles$2A.withStyles(styles$1q, {
+var Component$x = styles$2B.withStyles(styles$1q, {
   name: 'VdtCollectionContent'
 })(CollectionContent);
 Component$x.displayName = 'CollectionContent';
@@ -21911,7 +21934,7 @@ ItemParentsTab.defaultProps = {
     var message = _ref5.message;
     return console.error(message);
   },
-  CollectionListComponent: Component$C,
+  CollectionListComponent: Component$D,
   CollectionListProps: {},
   collectionListType: {
     collection: _toConsumableArray__default["default"](Array(3).keys()).map(function (id) {
@@ -21921,7 +21944,7 @@ ItemParentsTab.defaultProps = {
     })
   }
 };
-var ItemParentsTab$1 = styles$2A.withStyles(styles$1p, {
+var ItemParentsTab$1 = styles$2B.withStyles(styles$1p, {
   name: 'VdtItemParentsTab'
 })(ItemParentsTab);
@@ -22048,7 +22071,7 @@ function PaginationWrapper(props) {
 function SearchInputWrapper(props) {
   var isLoading = props.isLoading;
-  return /*#__PURE__*/React__default["default"].createElement(Component$A, _extends__default["default"]({
+  return /*#__PURE__*/React__default["default"].createElement(Component$B, _extends__default["default"]({
     submitting: isLoading
   }, props));
 }
@@ -22154,7 +22177,7 @@ function ItemSearchPicker(_ref) {
   }, PaginationProps)));
 }
-var ItemSearchPicker$1 = styles$2A.withStyles({}, {
+var ItemSearchPicker$1 = styles$2B.withStyles({}, {
   name: 'VdtItemSearchPicker'
 })(ItemSearchPicker);
@@ -22279,7 +22302,7 @@ AddRelationDialog.defaultProps = {
   open: false,
   setOpenDialog: function setOpenDialog() {}
 };
-var AddRelationDialog$1 = styles$2A.withStyles({}, {
+var AddRelationDialog$1 = styles$2B.withStyles({}, {
   name: 'VdtAddRelationDialog'
 })(AddRelationDialog);
@@ -22410,7 +22433,7 @@ ItemListItem.defaultProps = {
   onClick: undefined,
   ActionComponent: undefined,
   ActionProps: {},
-  AvatarComponent: Component$M,
+  AvatarComponent: Component$N,
   AvatarProps: {},
   ListItemProps: {},
   ListItemAvatarProps: {},
@@ -22422,7 +22445,7 @@ ItemListItem.defaultProps = {
   skeleton: false
 };
-var Component$w = styles$2A.withStyles(styles$1o, {
+var Component$w = styles$2B.withStyles(styles$1o, {
   name: 'VdtItemListItem'
 })(ItemListItem);
 Component$w.displayName = 'ItemListItem';
@@ -22467,7 +22490,7 @@ ItemList.defaultProps = {
   ItemListItemProps: {}
 };
-var Component$v = styles$2A.withStyles(styles$1n, {
+var Component$v = styles$2B.withStyles(styles$1n, {
   name: 'VdtItemList'
 })(ItemList);
 Component$v.displayName = 'ItemList';
@@ -22533,7 +22556,7 @@ ItemRelationRemoveDialog.defaultProps = {
   confirmText: 'Remove',
   rejectText: 'Cancel'
 };
-var ItemRelationRemoveDialog$1 = styles$2A.withStyles({}, {
+var ItemRelationRemoveDialog$1 = styles$2B.withStyles({}, {
   name: 'VdtItemRelationRemoveDialog'
 })(ItemRelationRemoveDialog);
@@ -22789,7 +22812,7 @@ ItemRelationsTab.defaultProps = {
   addText: 'Add new relation',
   direction: 'A'
 };
-var ItemRelationsTab$1 = styles$2A.withStyles(styles$1m, {
+var ItemRelationsTab$1 = styles$2B.withStyles(styles$1m, {
   name: 'VdtItemRelationsTab'
 })(ItemRelationsTab);
@@ -22829,7 +22852,7 @@ var styles$1l = function styles(theme) {
   };
 };
-var Tab = styles$2A.withStyles(styles$1l, {
+var Tab = styles$2B.withStyles(styles$1l, {
   name: 'VdtItemTabTab'
 })(Tab__default["default"]);
@@ -22862,7 +22885,7 @@ function TabPanel(_ref2) {
   }, props));
 }
-var TabPanel$1 = styles$2A.withStyles(styles$1k, {
+var TabPanel$1 = styles$2B.withStyles(styles$1k, {
   name: 'VdtItemTabTabPanel'
 })(TabPanel);
@@ -22878,7 +22901,7 @@ var styles$1j = {
     backgroundColor: 'unset'
   }
 };
-var Tabs = styles$2A.withStyles(styles$1j, {
+var Tabs = styles$2B.withStyles(styles$1j, {
   name: 'VdtItemTabTabs'
 })(Tabs__default["default"]);
@@ -22967,7 +22990,7 @@ ItemTabs.defaultProps = {
   tabs: []
 };
-var Component$u = styles$2A.withStyles(styles$1i, {
+var Component$u = styles$2B.withStyles(styles$1i, {
   name: 'VdtItemTabs'
 })(ItemTabs);
 Component$u.displayName = 'ItemTabs';
@@ -23071,7 +23094,7 @@ ItemCard.defaultProps = {
     arrayOnSingle: false,
     flat: true
   },
-  MediaCardComponent: Component$L,
+  MediaCardComponent: Component$M,
   titleSelector: function titleSelector() {
     var parsedMetadata = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     return parsedMetadata.title;
@@ -23162,7 +23185,7 @@ function ItemCardClone(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement(ItemCardComponent, _extends__default["default"]({}, props, {
     itemId: itemType.id,
     itemType: itemType,
-    MediaCardComponent: Component$L,
+    MediaCardComponent: Component$M,
     ThumbnailComponent: null
   })));
 }
@@ -23491,7 +23514,7 @@ ItemSidecarDownload$1.defaultProps = {
   ItemSidecarDownloadListItemProps: {}
 };
-var ItemSidecarDownload = styles$2A.withStyles(styles$1h, {
+var ItemSidecarDownload = styles$2B.withStyles(styles$1h, {
   name: 'VdtItemSidecarDownload'
 })(ItemSidecarDownload$1);
@@ -24077,7 +24100,7 @@ ItemSidecarUpload$1.defaultProps = {
   ItemSidecarUploadActionsProps: {}
 };
-var ItemSidecarUpload = styles$2A.withStyles(styles$1g, {
+var ItemSidecarUpload = styles$2B.withStyles(styles$1g, {
   name: 'VdtItemSidecarUpload'
 })(ItemSidecarUpload$1);
@@ -24212,7 +24235,7 @@ ItemSidecarDialog.defaultProps = {
   ItemSidecarUploadProps: {}
 };
-var Component$t = styles$2A.withStyles(styles$1f, {
+var Component$t = styles$2B.withStyles(styles$1f, {
   name: 'VdtItemSidecarDialog'
 })(ItemSidecarDialog);
 Component$t.displayName = 'ItemSidecarDialog';
@@ -24735,7 +24758,7 @@ function ItemCompoundMetadataTable(_ref) {
   }, "Save")));
 }
-var ItemCompoundMetadataTable$1 = styles$2A.withStyles(styles$1d, {
+var ItemCompoundMetadataTable$1 = styles$2B.withStyles(styles$1d, {
   name: 'VdtItemCompoundMetadataTable'
 })(ItemCompoundMetadataTable);
@@ -24812,7 +24835,7 @@ function ItemCompoundMetadataTab(_ref) {
   }))));
 }
-var ItemCompoundMetadataTab$1 = styles$2A.withStyles({}, {
+var ItemCompoundMetadataTab$1 = styles$2B.withStyles({}, {
   name: 'VdtItemCompoundMetadataTab'
 })(ItemCompoundMetadataTab);
@@ -24861,7 +24884,7 @@ function ItemAudioPlayer(_ref) {
   }, audioPlayerProps))));
 }
-var ItemAudioPlayer$1 = styles$2A.withStyles(styles$1c, {
+var ItemAudioPlayer$1 = styles$2B.withStyles(styles$1c, {
   name: 'VdtItemAudioPlayer'
 })(ItemAudioPlayer);
@@ -24929,7 +24952,7 @@ function ItemPdfViewer(_ref) {
   });
 }
-var ItemPdfViewer$1 = styles$2A.withStyles(styles$1b, {
+var ItemPdfViewer$1 = styles$2B.withStyles(styles$1b, {
   name: 'VdtItemPdfViewer'
 })(ItemPdfViewer);
@@ -24985,7 +25008,7 @@ function ItemImagePlayer(_ref) {
   }));
 }
-var ItemImagePlayer$1 = styles$2A.withStyles(styles$1a, {
+var ItemImagePlayer$1 = styles$2B.withStyles(styles$1a, {
   name: 'VdtItemImagePlayer'
 })(ItemImagePlayer);
@@ -25127,7 +25150,7 @@ function ItemVideoPlayer(_ref) {
   }, videoPlayerProps)))));
 }
-var ItemVideoPlayer$1 = styles$2A.withStyles(styles$19, {
+var ItemVideoPlayer$1 = styles$2B.withStyles(styles$19, {
   name: 'VdtItemVideoPlayer'
 })(ItemVideoPlayer);
@@ -25162,7 +25185,7 @@ var defaultShapeToLabel = function defaultShapeToLabel(shape) {
   return shape.tag;
 };
-var SourceSelection = styles$2A.withStyles({}, {
+var SourceSelection = styles$2B.withStyles({}, {
   name: 'VdtSourceSelection'
 })(function (_ref) {
   var currentValue = _ref.value,
@@ -25365,7 +25388,7 @@ function ItemPlayer(_ref2) {
   }, ItemVideoPlayerProps))));
 }
-var Component$s = styles$2A.withStyles(styles$18, {
+var Component$s = styles$2B.withStyles(styles$18, {
   name: 'VdtItemPlayer'
 })(ItemPlayer);
 Component$s.displayName = 'ItemPlayer';
@@ -25829,7 +25852,7 @@ function Editor(_ref) {
   }, "Delete"))));
 }
-var Editor$1 = styles$2A.withStyles(styles$17, {
+var Editor$1 = styles$2B.withStyles(styles$17, {
   name: 'VdtFieldGroupEditor'
 })(Editor);
@@ -25870,7 +25893,7 @@ function FieldIcon(_ref) {
   }));
 }
-var FieldIcon$1 = styles$2A.withStyles(styles$16, {
+var FieldIcon$1 = styles$2B.withStyles(styles$16, {
   name: 'VdtFieldGroupIcon'
 })(FieldIcon);
@@ -25901,7 +25924,7 @@ var styles$15 = function styles(theme) {
       height: '40px'
     },
     activeItem: {
-      backgroundColor: styles$2A.emphasize(theme.palette.background.paper, 0.1),
+      backgroundColor: styles$2B.emphasize(theme.palette.background.paper, 0.1),
       boxSizing: 'border-box',
       fontSize: '14px',
       userSelect: 'none',
@@ -26012,7 +26035,7 @@ function MyField(_ref2) {
   })));
 }
-var MyField$1 = styles$2A.withStyles(styles$15, {
+var MyField$1 = styles$2B.withStyles(styles$15, {
   name: 'VdtFieldGroupMyField'
 })(MyField);
@@ -26066,7 +26089,7 @@ function MyFieldList(_ref) {
   });
 }
-var MyFieldList$1 = styles$2A.withStyles(styles$14, {
+var MyFieldList$1 = styles$2B.withStyles(styles$14, {
   name: 'VdtFieldGroupMyFieldList'
 })(MyFieldList);
@@ -26836,7 +26859,7 @@ function FieldGroupDesigner(_ref2) {
   }, "Add"))));
 }
-var FieldGroupDesigner$1 = styles$2A.withStyles(styles$13, {
+var FieldGroupDesigner$1 = styles$2B.withStyles(styles$13, {
   name: 'VdtFieldGroupDesigner'
 })(FieldGroupDesigner);
@@ -26854,7 +26877,7 @@ var FILE = 'FILE';
 var PREFIX = 'PREFIX';
 var LOAD_MORE = 'LOAD_MORE';
 var JOIN_CHARACTER = '_';
-var SelectedFile = styles$2A.withStyles({}, {
+var SelectedFile = styles$2B.withStyles({}, {
   name: 'VdtSelectedFile'
 })(function (_ref) {
   var _ref$className = _ref.className,
@@ -26918,7 +26941,7 @@ function SelectedFileWrapper(_ref2) {
     fileId: fileType.id
   }, props)) : null;
 }
-var SelectedStorage = styles$2A.withStyles({}, {
+var SelectedStorage = styles$2B.withStyles({}, {
   name: 'VdtSelectedStorage'
 })(function (_ref4) {
   var _ref4$className = _ref4.className,
@@ -27173,7 +27196,7 @@ function FolderListTree(_ref11) {
     onListFilesMore: onListFilesMore
   }, FolderTreeProps));
 }
-var StorageTree = styles$2A.withStyles({}, {
+var StorageTree = styles$2B.withStyles({}, {
   name: 'VdtStorageTree'
 })(function (_ref14) {
   var _ref14$className = _ref14.className,
@@ -27441,7 +27464,7 @@ function SearchSuggestions(_ref) {
   }))) : null;
 }
-var SearchSuggestions$1 = styles$2A.withStyles(styles$12, {
+var SearchSuggestions$1 = styles$2B.withStyles(styles$12, {
   name: 'VdtSearchSuggestions'
 })(SearchSuggestions);
@@ -27650,7 +27673,7 @@ function ShareSearch(_ref) {
   }, props));
 }
-var ShareSearch$1 = styles$2A.withStyles(styles$11, {
+var ShareSearch$1 = styles$2B.withStyles(styles$11, {
   name: 'VdtShareSearch'
 })(ShareSearch);
@@ -27809,7 +27832,11 @@ function SavedSearchRow(_ref) {
     setAnchorEl(e.currentTarget);
   };
-  var handleMenuAction = function handleMenuAction(action, fieldType) {
+  var handleMenuAction = function handleMenuAction() {
+    var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {
+      return null;
+    };
+    var fieldType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     return function (e) {
       if (e.stopPropagation) e.stopPropagation();
       setAnchorEl(null);
@@ -28004,7 +28031,7 @@ function SavedSearchRow(_ref) {
   }, ListAccessProps)))));
 }
-var SavedSearchRow$1 = styles$2A.withStyles(styles$10, {
+var SavedSearchRow$1 = styles$2B.withStyles(styles$10, {
   name: 'VdtSavedSearchRow'
 })(SavedSearchRow);
@@ -28025,7 +28052,7 @@ function SavedSearchList(_ref) {
       accessTranslate = _ref.accessTranslate,
       props = _objectWithoutProperties__default["default"](_ref, _excluded$t);
-  return /*#__PURE__*/React__default["default"].createElement(CollectionSearchPicker$1, _extends__default["default"]({
+  return /*#__PURE__*/React__default["default"].createElement(Component$A, _extends__default["default"]({
     searchProps: searchProps,
     searchPlaceholder: searchPlaceholderText // TODO: Extract CollectionTableComponent to separate component to describe it's interface in a story
     // eslint-disable-next-line react/no-unstable-nested-components
@@ -28063,7 +28090,7 @@ function SavedSearchList(_ref) {
   }, props));
 }
-var SavedSearchList$1 = styles$2A.withStyles(styles$$, {
+var SavedSearchList$1 = styles$2B.withStyles(styles$$, {
   name: 'VdtSavedSearchList'
 })(SavedSearchList);
@@ -28135,7 +28162,7 @@ function SaveSearchForm(_ref) {
   }, saveText));
 }
-var SaveSearchForm$1 = styles$2A.withStyles(styles$_, {
+var SaveSearchForm$1 = styles$2B.withStyles(styles$_, {
   name: 'VdtSaveSearchForm'
 })(SaveSearchForm);
@@ -28206,7 +28233,7 @@ function SavedSearch(_ref) {
   }, SearchListProps)));
 }
-var SavedSearch$1 = styles$2A.withStyles(styles$Z, {
+var SavedSearch$1 = styles$2B.withStyles(styles$Z, {
   name: 'VdtSavedSearchList'
 })(SavedSearch);
@@ -28360,7 +28387,7 @@ SpellCheck.defaultProps = {
   onClick: function onClick() {}
 };
-var Component$r = styles$2A.withStyles(styles$Y, {
+var Component$r = styles$2B.withStyles(styles$Y, {
   name: 'VdtSpellCheck'
 })(SpellCheck);
 Component$r.displayName = 'SpellCheck';
@@ -28936,7 +28963,7 @@ SearchField.defaultProps = {
   ProgressProps: {}
 };
-var Component$q = styles$2A.withStyles(styles$X, {
+var Component$q = styles$2B.withStyles(styles$X, {
   name: 'VdtSearchField'
 })(SearchField);
 Component$q.displayName = 'SearchField';
@@ -29124,7 +29151,7 @@ function FolderRowContent(_ref) {
   }), children);
 }
-var FolderRowContentWrapper = vdtReact.compose(styles$2A.withStyles(folderRowContentStyles, {
+var FolderRowContentWrapper = vdtReact.compose(styles$2B.withStyles(folderRowContentStyles, {
   name: 'VdtFolderRowContentWrapper'
 }))(FolderRowContent);
@@ -29330,7 +29357,7 @@ function FolderRow(_ref2) {
   }));
 }
-var FolderRow$1 = styles$2A.withStyles(styles$V, {
+var FolderRow$1 = styles$2B.withStyles(styles$V, {
   name: 'VdtFolderRow'
 })(FolderRow);
@@ -29493,7 +29520,7 @@ QueryInput$1.defaultProps = {
   autoCompleteHoc: function autoCompleteHoc() {}
 };
-var QueryInput = styles$2A.withStyles(styles$U, {
+var QueryInput = styles$2B.withStyles(styles$U, {
   name: 'VdtQueryInput'
 })(QueryInput$1);
@@ -29583,7 +29610,7 @@ QueryBetween$1.defaultProps = {
   InputComponent: QueryInput
 };
-var QueryBetween = styles$2A.withStyles(styles$T, {
+var QueryBetween = styles$2B.withStyles(styles$T, {
   name: 'VdtQueryBetween'
 })(QueryBetween$1);
@@ -29732,7 +29759,7 @@ QueryContains$1.defaultProps = {
   InputComponent: QueryInput
 };
-var QueryContains = styles$2A.withStyles(styles$S, {
+var QueryContains = styles$2B.withStyles(styles$S, {
   name: 'VdtQueryContains'
 })(QueryContains$1);
@@ -29801,7 +29828,7 @@ QueryEquals$1.defaultProps = {
   InputComponent: QueryInput
 };
-var QueryEquals = styles$2A.withStyles(styles$R, {
+var QueryEquals = styles$2B.withStyles(styles$R, {
   name: 'VdtQueryEquals'
 })(QueryEquals$1);
@@ -30148,7 +30175,7 @@ QueryField$1.defaultProps = {
   PredicateComponentProps: {}
 };
-var QueryField = styles$2A.withStyles(styles$Q, {
+var QueryField = styles$2B.withStyles(styles$Q, {
   name: 'VdtQueryField'
 })(QueryField$1);
@@ -30329,7 +30356,7 @@ QueryGroup$1.defaultProps = {
   }
 };
-var QueryGroup = styles$2A.withStyles(styles$P, {
+var QueryGroup = styles$2B.withStyles(styles$P, {
   name: 'VdtQueryGroup'
 })(QueryGroup$1);
@@ -30508,7 +30535,7 @@ QueryOperator$1.defaultProps = {
   onChangeOperation: undefined
 };
-var QueryOperator = styles$2A.withStyles(styles$O, {
+var QueryOperator = styles$2B.withStyles(styles$O, {
   name: 'VdtQueryOperator'
 })(QueryOperator$1);
@@ -30527,8 +30554,8 @@ var styles$N = function styles(theme) {
     },
     queryGroup: {
       position: 'relative',
-      border: "1px solid ".concat(styles$2A.alpha(theme.palette.text.primary, 0.05)),
-      backgroundColor: styles$2A.alpha(theme.palette.text.primary, 0.02),
+      border: "1px solid ".concat(styles$2B.alpha(theme.palette.text.primary, 0.05)),
+      backgroundColor: styles$2B.alpha(theme.palette.text.primary, 0.02),
       borderRadius: '4px',
       margin: '1rem 1rem 1rem 0',
       '& .MuiTreeItem-iconContainer': {
@@ -30781,7 +30808,7 @@ QueryEntry$1.defaultProps = {
   onRemove: undefined
 };
-var QueryEntry = styles$2A.withStyles(styles$N, {
+var QueryEntry = styles$2B.withStyles(styles$N, {
   name: 'VdtQueryEntry'
 })(QueryEntry$1);
@@ -30981,7 +31008,7 @@ QueryBuilder.defaultProps = {
   QueryEntryProps: {}
 };
-var Component$p = styles$2A.withStyles(styles$M, {
+var Component$p = styles$2B.withStyles(styles$M, {
   name: 'VdtQueryBuilder'
 })(QueryBuilder);
 Component$p.displayName = 'QueryBuilder';
@@ -31108,7 +31135,7 @@ QueryBuilderCard.defaultProps = {
   searchButtonProps: {}
 };
-var Component$o = styles$2A.withStyles(styles$L, {
+var Component$o = styles$2B.withStyles(styles$L, {
   name: 'VdtQueryBuilderCard'
 })(QueryBuilderCard);
 Component$o.displayName = 'QueryBuilderCard';
@@ -31122,7 +31149,7 @@ function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ITEM$2 = 'item';
 var COLLECTION$2 = 'collection';
-var defaultEntityComponents = (_defaultEntityCompone = {}, _defineProperty__default["default"](_defaultEntityCompone, ITEM$2, ItemCard), _defineProperty__default["default"](_defaultEntityCompone, COLLECTION$2, Component$K), _defaultEntityCompone);
+var defaultEntityComponents = (_defaultEntityCompone = {}, _defineProperty__default["default"](_defaultEntityCompone, ITEM$2, ItemCard), _defineProperty__default["default"](_defaultEntityCompone, COLLECTION$2, Component$L), _defaultEntityCompone);
 function EntityCard(_ref) {
   var entityType = _ref.entityType,
       entity = _ref.entity,
@@ -31155,7 +31182,7 @@ function EntityGridItem(_ref) {
       entity = _ref.entity,
       index = _ref.index,
       _ref$CollectionCardCo = _ref.CollectionCardComponent,
-      CollectionCardComponent = _ref$CollectionCardCo === void 0 ? Component$K : _ref$CollectionCardCo,
+      CollectionCardComponent = _ref$CollectionCardCo === void 0 ? Component$L : _ref$CollectionCardCo,
       _ref$ItemCardComponen = _ref.ItemCardComponent,
       ItemCardComponent = _ref$ItemCardComponen === void 0 ? ItemCard : _ref$ItemCardComponen,
       _ref$CollectionCardPr = _ref.CollectionCardProps,
@@ -31215,7 +31242,7 @@ function EntityGrid(_ref) {
       _ref$EntityGridItemCo = _ref.EntityGridItemComponent,
       EntityGridItemComponent = _ref$EntityGridItemCo === void 0 ? EntityGridItemDraggable$1 : _ref$EntityGridItemCo,
       _ref$CollectionCardCo = _ref.CollectionCardComponent,
-      CollectionCardComponent = _ref$CollectionCardCo === void 0 ? Component$K : _ref$CollectionCardCo,
+      CollectionCardComponent = _ref$CollectionCardCo === void 0 ? Component$L : _ref$CollectionCardCo,
       _ref$ItemCardComponen = _ref.ItemCardComponent,
       ItemCardComponent = _ref$ItemCardComponen === void 0 ? ItemCard : _ref$ItemCardComponen,
       _ref$CollectionCardPr = _ref.CollectionCardProps,
@@ -31267,7 +31294,7 @@ function EntityTableRow(_ref) {
   var isCollection = entityType === 'COLLECTION';
   var isItem = entityType === 'ITEM';
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isCollection && /*#__PURE__*/React__default["default"].createElement(Component$G, _extends__default["default"]({
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isCollection && /*#__PURE__*/React__default["default"].createElement(Component$H, _extends__default["default"]({
     collectionId: entityId,
     collectionType: entity,
     options: collectionOptions,
@@ -31564,7 +31591,7 @@ EntityDeleteDialog.defaultProps = {
     'noauth-url': true
   },
   DialogProps: {},
-  CollectionCardComponent: Component$K,
+  CollectionCardComponent: Component$L,
   CollectionCardProps: {},
   ItemCardComponent: ItemCard,
   ItemCardProps: {},
@@ -31572,7 +31599,7 @@ EntityDeleteDialog.defaultProps = {
   classes: {}
 };
-var Component$n = styles$2A.withStyles(styles$I, {
+var Component$n = styles$2B.withStyles(styles$I, {
   name: 'VdtEntityDeleteDialog'
 })(EntityDeleteDialog);
 Component$n.displayName = 'EntityDeleteDialog';
@@ -31878,7 +31905,7 @@ function EntityCommentCard(_ref) {
   })))));
 }
-var EntityCommentCard$1 = styles$2A.withStyles(styles$H, {
+var EntityCommentCard$1 = styles$2B.withStyles(styles$H, {
   name: 'VdtEntityCommentCard'
 })(EntityCommentCard);
 EntityCommentCard.propTypes = {
@@ -32061,7 +32088,7 @@ function EntityComment(_ref) {
   }) : null));
 }
-var EntityComment$1 = styles$2A.withStyles(styles$G, {
+var EntityComment$1 = styles$2B.withStyles(styles$G, {
   name: 'VdtEntityComment'
 })(EntityComment);
 EntityComment.propTypes = {
@@ -32220,13 +32247,13 @@ var binContentDroppableStyles = function binContentDroppableStyles(theme) {
     canDrop: {
       boxShadow: "inset 0px 0px 1px 1px ".concat(theme.palette.primary.main),
       '&.VdtDroppable-isOver': {
-        backgroundColor: styles$2A.emphasize(theme.palette.background.paper, 0.05)
+        backgroundColor: styles$2B.emphasize(theme.palette.background.paper, 0.05)
       }
     }
   };
 };
-var BinContentDroppable = vdtReact.compose(styles$2A.withStyles(binContentDroppableStyles, {
+var BinContentDroppable = vdtReact.compose(styles$2B.withStyles(binContentDroppableStyles, {
   name: 'VdtBinContentDroppable'
 }), withDrop)(BinContent);
 var entityCardDraggableStyles = {
@@ -32234,7 +32261,7 @@ var entityCardDraggableStyles = {
     opacity: 0
   }
 };
-var EntityCardDraggable = vdtReact.compose(styles$2A.withStyles(entityCardDraggableStyles, {
+var EntityCardDraggable = vdtReact.compose(styles$2B.withStyles(entityCardDraggableStyles, {
   name: 'VdtEntityCardDraggable'
 }), withDrag)(EntityCard);
 var styles$E = {
@@ -32475,12 +32502,12 @@ BinList.defaultProps = {
   BinProps: {}
 };
-var Component$m = styles$2A.withStyles(styles$E, {
+var Component$m = styles$2B.withStyles(styles$E, {
   name: 'VdtBinList'
 })(BinList);
 Component$m.displayName = 'BinList';
-var Component$l = styles$2A.withStyles(styles$F, {
+var Component$l = styles$2B.withStyles(styles$F, {
   name: 'VdtBinListMenu'
 })(BinListMenu);
 Component$l.displayName = 'BinListMenu';
@@ -32580,7 +32607,7 @@ function EntityTreeList(_ref3) {
     return null;
   } : _ref3$onAdjustHits,
       _ref3$CollectionListC = _ref3.CollectionListComponent,
-      CollectionListComponent = _ref3$CollectionListC === void 0 ? Component$E : _ref3$CollectionListC,
+      CollectionListComponent = _ref3$CollectionListC === void 0 ? Component$F : _ref3$CollectionListC,
       _ref3$ItemComponent = _ref3.ItemComponent,
       ItemComponent = _ref3$ItemComponent === void 0 ? ItemTreeItem$1 : _ref3$ItemComponent,
       _ref3$LoadMoreCompone = _ref3.LoadMoreComponent,
@@ -33022,7 +33049,7 @@ function SplitButton(_ref) {
   }))))));
 }
-var SplitButton$1 = styles$2A.withStyles({}, {
+var SplitButton$1 = styles$2B.withStyles({}, {
   name: 'VdtSplitButton'
 })(SplitButton);
@@ -33239,7 +33266,7 @@ function UploadForm(_ref) {
   })));
 }
-var UploadForm$1 = styles$2A.withStyles(styles$C, {
+var UploadForm$1 = styles$2B.withStyles(styles$C, {
   name: 'VdtUploadForm'
 })(UploadForm);
@@ -33304,7 +33331,7 @@ function UploadEditor(_ref) {
   }, UploadFormProps))));
 }
-var UploadEditor$1 = styles$2A.withStyles(styles$B, {
+var UploadEditor$1 = styles$2B.withStyles(styles$B, {
   name: 'VdtUploadEditor'
 })(UploadEditor);
@@ -33336,7 +33363,7 @@ var styles$A = function styles(theme) {
       '&:not(:first-of-type)': {
         marginTop: theme.spacing(0.5)
       },
-      backgroundColor: styles$2A.emphasize(theme.palette.background.paper, 0.05),
+      backgroundColor: styles$2B.emphasize(theme.palette.background.paper, 0.05),
       '&:hover $fileListItemSecondaryAction': {
         visibility: 'visible'
       },
@@ -33352,7 +33379,7 @@ var styles$A = function styles(theme) {
     },
     fileListItemContainerHover: {
       '&:hover': {
-        backgroundColor: styles$2A.emphasize(theme.palette.background.paper, 0.1)
+        backgroundColor: styles$2B.emphasize(theme.palette.background.paper, 0.1)
       }
     },
     successIcon: {
@@ -33421,7 +33448,7 @@ function UploadListItem(_ref) {
       _ref$DeleteIcon = _ref.DeleteIcon,
       DeleteIcon = _ref$DeleteIcon === void 0 ? DeleteIcon__default["default"] : _ref$DeleteIcon,
       _ref$MimeTypeAvatarIc = _ref.MimeTypeAvatarIcon,
-      MimeTypeAvatarIcon = _ref$MimeTypeAvatarIc === void 0 ? Component$N : _ref$MimeTypeAvatarIc;
+      MimeTypeAvatarIcon = _ref$MimeTypeAvatarIc === void 0 ? Component$O : _ref$MimeTypeAvatarIc;
   var mimeType = file.type,
       size = file.size,
       name = file.name,
@@ -33504,7 +33531,7 @@ function UploadListItem(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(DeleteIcon, null))));
 }
-var UploadListItem$1 = styles$2A.withStyles(styles$A, {
+var UploadListItem$1 = styles$2B.withStyles(styles$A, {
   name: 'VdtUploadListItem'
 })(UploadListItem);
@@ -33597,7 +33624,7 @@ var styles$z = function styles(theme) {
       marginBottom: theme.spacing(1)
     },
     editorOpen: {
-      backgroundColor: styles$2A.emphasize(theme.palette.background.paper, 0.05)
+      backgroundColor: styles$2B.emphasize(theme.palette.background.paper, 0.05)
     },
     isEditing: {
       width: '50%'
@@ -33924,7 +33951,7 @@ function Upload(_ref4) {
   }, UploadCollectionPickerProps))));
 }
-var Upload$1 = styles$2A.withStyles(styles$z, {
+var Upload$1 = styles$2B.withStyles(styles$z, {
   name: 'VdtUpload'
 })(Upload);
@@ -33986,7 +34013,7 @@ function MediaCardExpand(_ref) {
   })));
 }
-var MediaCardExpand$1 = styles$2A.withStyles(styles$y, {
+var MediaCardExpand$1 = styles$2B.withStyles(styles$y, {
   name: 'VdtMediaCardExpand'
 })(MediaCardExpand);
@@ -34020,7 +34047,7 @@ function MediaCardFullWidthCard(_ref) {
   }, props), children);
 }
-var MediaCardFullWidthCard$1 = styles$2A.withStyles(styles$x, {
+var MediaCardFullWidthCard$1 = styles$2B.withStyles(styles$x, {
   name: 'VdtMediaCardFullWidthCard'
 })(MediaCardFullWidthCard);
@@ -34078,7 +34105,7 @@ function MediaCardFullWidthContent(_ref) {
   }, TypographyProps), content)));
 }
-var MediaCardFullWidthContent$1 = styles$2A.withStyles(styles$w, {
+var MediaCardFullWidthContent$1 = styles$2B.withStyles(styles$w, {
   name: 'VdtMediaCardFullWidthContent'
 })(MediaCardFullWidthContent);
@@ -34127,7 +34154,7 @@ function MediaCardFullWidthHeader(_ref) {
   }, props));
 }
-var MediaCardFullWidthHeader$1 = styles$2A.withStyles(styles$v, {
+var MediaCardFullWidthHeader$1 = styles$2B.withStyles(styles$v, {
   name: 'MediaCardFullWidthHeader'
 })(MediaCardFullWidthHeader);
@@ -34322,7 +34349,7 @@ MediaCardFullWidth.defaultProps = {
   expandedContent: undefined,
   CardComponent: MediaCardFullWidthCard$1,
   HeaderComponent: MediaCardFullWidthHeader$1,
-  ThumbnailComponent: Component$O,
+  ThumbnailComponent: Component$P,
   ContentComponent: MediaCardFullWidthContent$1,
   ExpandComponent: MediaCardExpand$1,
   ExpandedContentComponent: MediaCardFullWidthContent$1,
@@ -34336,7 +34363,7 @@ MediaCardFullWidth.defaultProps = {
   ActionsProps: {}
 };
-var Component$k = styles$2A.withStyles(styles$u, {
+var Component$k = styles$2B.withStyles(styles$u, {
   name: 'VdtMediaCardFullWidth'
 })(MediaCardFullWidth);
 Component$k.displayName = 'MediaCardFullWidth';
@@ -34666,7 +34693,7 @@ ChangePasswordForm.defaultProps = {
   noPwdTxt: 'No password set',
   noUserTxt: 'Cannot determine username'
 };
-var ChangePasswordForm$1 = styles$2A.withStyles(styles$t, {
+var ChangePasswordForm$1 = styles$2B.withStyles(styles$t, {
   name: 'VdtChangePasswordForm'
 })(ChangePasswordForm);
@@ -34716,7 +34743,7 @@ function ChangePasswordDialog(_ref) {
   }, props))));
 }
-var ChangePasswordDialog$1 = styles$2A.withStyles(styles$s, {
+var ChangePasswordDialog$1 = styles$2B.withStyles(styles$s, {
   name: 'VdtChangePasswordDialog'
 })(ChangePasswordDialog);
@@ -34746,7 +34773,7 @@ function UserRow(_ref) {
   }));
 }
-var UserRow$1 = styles$2A.withStyles({}, {
+var UserRow$1 = styles$2B.withStyles({}, {
   name: 'VdtUserRow'
 })(UserRow);
@@ -34824,7 +34851,7 @@ UserTable.defaultProps = {
   userColumnLabels: DEFAULT_COLUMN_LABELS
 };
-var Component$j = styles$2A.withStyles(styles$r, {
+var Component$j = styles$2B.withStyles(styles$r, {
   name: 'VdtUserTable'
 })(UserTable);
 Component$j.displayName = 'UserTable';
@@ -34840,7 +34867,7 @@ var styles$q = function styles(theme) {
         visibility: 'hidden'
       },
       '&:hover': {
-        backgroundColor: styles$2A.emphasize(theme.palette.background.paper, 0.1),
+        backgroundColor: styles$2B.emphasize(theme.palette.background.paper, 0.1),
         '& .MuiListItemSecondaryAction-root': {
           visibility: 'visible'
         }
@@ -35118,7 +35145,7 @@ GroupRelationList.defaultProps = {
   addButtonText: 'Add'
 };
-var Component$i = styles$2A.withStyles(styles$q, {
+var Component$i = styles$2B.withStyles(styles$q, {
   name: 'VdtGroupRelationList'
 })(GroupRelationList);
 Component$i.displayName = 'GroupRelationList';
@@ -35176,7 +35203,7 @@ function UserData(_ref2) {
   }))));
 }
-var UserData$1 = styles$2A.withStyles(styles$p, {
+var UserData$1 = styles$2B.withStyles(styles$p, {
   name: 'VdtUserData'
 })(UserData);
@@ -35376,7 +35403,7 @@ UserDetails.defaultProps = {
   lockedUsers: ['admin', 'vidinetviewer']
 };
-var Component$h = styles$2A.withStyles(styles$o, {
+var Component$h = styles$2B.withStyles(styles$o, {
   name: 'VdtUserDetails'
 })(UserDetails);
 Component$h.displayName = 'UserDetails';
@@ -35604,7 +35631,7 @@ CreateUserDialog$1.defaultProps = {
   CreateUserFormProps: {}
 };
-var Component$g = styles$2A.withStyles(styles$m, {
+var Component$g = styles$2B.withStyles(styles$m, {
   name: 'VdtCreateUserDialog'
 })(CreateUserDialog$1);
 Component$g.displayName = 'CreateUserDialog';
@@ -35739,7 +35766,7 @@ EditUserDialog.defaultProps = {
   }
 };
-var Component$f = styles$2A.withStyles(styles$k, {
+var Component$f = styles$2B.withStyles(styles$k, {
   name: 'VdtEditUserDialog'
 })(EditUserDialog);
 Component$f.displayName = 'EditUserDialog';
@@ -35854,7 +35881,7 @@ CreateUserDialog.defaultProps = {
   onSubmit: undefined
 };
-var Component$e = styles$2A.withStyles(styles$i, {
+var Component$e = styles$2B.withStyles(styles$i, {
   name: 'VdtChangeUserPasswordDialog'
 })(CreateUserDialog);
 Component$e.displayName = 'ChangeUserPasswordDialog';
@@ -35870,7 +35897,7 @@ var styles$h = function styles(theme) {
         visibility: 'hidden'
       },
       '&:hover': {
-        backgroundColor: styles$2A.emphasize(theme.palette.background.paper, 0.1),
+        backgroundColor: styles$2B.emphasize(theme.palette.background.paper, 0.1),
         '& .MuiListItemSecondaryAction-root': {
           visibility: 'visible'
         }
@@ -36136,7 +36163,7 @@ UserRelationList.defaultProps = {
   addButtonText: 'Add'
 };
-var Component$d = styles$2A.withStyles(styles$h, {
+var Component$d = styles$2B.withStyles(styles$h, {
   name: 'VdtUserRelationList'
 })(UserRelationList);
 Component$d.displayName = 'UserRelationList';
@@ -36286,7 +36313,7 @@ UserAvatarButton.defaultProps = {
   localeSelectProps: {}
 };
-var Component$c = styles$2A.withStyles(styles$g, {
+var Component$c = styles$2B.withStyles(styles$g, {
   name: 'VdtUserAvatarButton'
 })(UserAvatarButton);
 Component$c.displayName = 'UserAvatarButton';
@@ -36327,7 +36354,7 @@ function GroupRow(_ref) {
   }));
 }
-var GroupRow$1 = styles$2A.withStyles(styles$f, {
+var GroupRow$1 = styles$2B.withStyles(styles$f, {
   name: 'VdtGroupRow'
 })(GroupRow);
@@ -36415,7 +36442,7 @@ GroupTable.defaultProps = {
   }
 };
-var Component$b = styles$2A.withStyles(styles$e, {
+var Component$b = styles$2B.withStyles(styles$e, {
   name: 'VdtGroupTable'
 })(GroupTable);
 Component$b.displayName = 'GroupTable';
@@ -36490,7 +36517,7 @@ function GroupData(_ref) {
   })));
 }
-var GroupData$1 = styles$2A.withStyles(styles$d, {
+var GroupData$1 = styles$2B.withStyles(styles$d, {
   name: 'VdtGroupData'
 })(GroupData);
@@ -36724,7 +36751,7 @@ GroupDetails.defaultProps = {
   lockedUsers: ['admin', 'vidinetviewer']
 };
-var Component$a = styles$2A.withStyles(styles$c, {
+var Component$a = styles$2B.withStyles(styles$c, {
   name: 'VdtGroupDetails'
 })(GroupDetails);
 Component$a.displayName = 'GroupDetails';
@@ -37010,7 +37037,7 @@ CreateGroupDialog.defaultProps = {
   CreateGroupFormProps: {}
 };
-var Component$9 = styles$2A.withStyles(styles$a, {
+var Component$9 = styles$2B.withStyles(styles$a, {
   name: 'VdtCreateGroupDialog'
 })(CreateGroupDialog);
 Component$9.displayName = 'CreateGroupDialog';
@@ -37131,7 +37158,7 @@ EditGroupDialog.defaultProps = {
   EditGroupFormProps: {}
 };
-var Component$8 = styles$2A.withStyles(styles$8, {
+var Component$8 = styles$2B.withStyles(styles$8, {
   name: 'VdtEditGroupDialog'
 })(EditGroupDialog);
 Component$8.displayName = 'EditGroupDialog';
@@ -37282,7 +37309,7 @@ DragScroll.defaultProps = {
   classes: {}
 };
-var Component$7 = styles$2A.withStyles(styles$7, {
+var Component$7 = styles$2B.withStyles(styles$7, {
   name: 'VdtDragScroll'
 })(DragScroll);
 Component$7.displayName = 'DragScroll';
@@ -37372,7 +37399,7 @@ SelectedToolbar.defaultProps = {
   className: undefined
 };
-var Component$6 = styles$2A.withStyles(styles$6, {
+var Component$6 = styles$2B.withStyles(styles$6, {
   name: 'VdtSelectedToolbar'
 })(SelectedToolbar);
 Component$6.displayName = 'SelectedToolbar';
@@ -37391,10 +37418,10 @@ var styles$5 = function styles(theme) {
     },
     '@keyframes active': {
       '0%': {
-        borderColor: styles$2A.alpha(theme.palette.primary.main, 1)
+        borderColor: styles$2B.alpha(theme.palette.primary.main, 1)
       },
       '100%': {
-        borderColor: styles$2A.alpha(theme.palette.primary.main, 0)
+        borderColor: styles$2B.alpha(theme.palette.primary.main, 0)
       }
     }
   };
@@ -37463,7 +37490,7 @@ Event.defaultProps = {
   EventContentProps: {}
 };
-var Component$5 = styles$2A.withStyles(styles$5, {
+var Component$5 = styles$2B.withStyles(styles$5, {
   name: 'VdtEvent'
 })(Event);
 Component$5.displayName = 'Event';
@@ -37524,7 +37551,7 @@ EventContainer.defaultProps = {
   classes: {}
 };
-var Component$4 = styles$2A.withStyles(styles$4, {
+var Component$4 = styles$2B.withStyles(styles$4, {
   name: 'VdtEventContainer'
 })(EventContainer);
 Component$4.displayName = 'EventContainer';
@@ -37592,7 +37619,7 @@ EventMarker.defaultProps = {
   onClick: undefined
 };
-var Component$3 = styles$2A.withStyles(styles$3, {
+var Component$3 = styles$2B.withStyles(styles$3, {
   name: 'VdtEventMarker'
 })(EventMarker);
 Component$3.displayName = 'EventMarker';
@@ -37679,7 +37706,7 @@ EventMarkerThumbnail.defaultProps = {
   TooltipProps: {}
 };
-var Component$2 = styles$2A.withStyles(styles$2, {
+var Component$2 = styles$2B.withStyles(styles$2, {
   name: 'VdtEventMarkerThumbnail'
 })(EventMarkerThumbnail);
 Component$2.displayName = 'EventMarkerThumbnail';
@@ -37687,7 +37714,7 @@ Component$2.displayName = 'EventMarkerThumbnail';
 var styles$1 = function styles(theme) {
   return {
     root: {
-      backgroundColor: styles$2A.alpha(theme.palette.primary.main, 0.25),
+      backgroundColor: styles$2B.alpha(theme.palette.primary.main, 0.25),
       height: '5px',
       width: '100%',
       borderRadius: '2px',
@@ -37740,7 +37767,7 @@ EventMarkerTimeline.defaultProps = {
   length: undefined
 };
-var Component$1 = styles$2A.withStyles(styles$1, {
+var Component$1 = styles$2B.withStyles(styles$1, {
   name: 'VdtEventMarkerTimeline'
 })(EventMarkerTimeline);
 Component$1.displayName = 'EventMarkerTimeline';
@@ -38297,7 +38324,7 @@ EventTimeline.defaultProps = {
   itemSearchDocument: {}
 };
-var Component = styles$2A.withStyles(styles, {
+var Component = styles$2B.withStyles(styles, {
   name: 'VdtEventTimeline'
 })(EventTimeline);
 Component.displayName = 'EventTimeline';
@@ -38316,19 +38343,19 @@ exports.ChangeUserPasswordDialog = Component$e;
 exports.CheckboxField = CheckboxField$1;
 exports.CheckboxGroupField = CheckboxGroupField$1;
 exports.CollectionAccessTab = CollectionAccessTab$1;
-exports.CollectionCard = Component$K;
-exports.CollectionCardThumbnail = Component$I;
+exports.CollectionCard = Component$L;
+exports.CollectionCardThumbnail = Component$J;
 exports.CollectionContent = Component$x;
-exports.CollectionCreateDialog = Component$B;
-exports.CollectionGrid = Component$H;
-exports.CollectionList = Component$C;
-exports.CollectionListItem = Component$D;
+exports.CollectionCreateDialog = Component$C;
+exports.CollectionGrid = Component$I;
+exports.CollectionList = Component$D;
+exports.CollectionListItem = Component$E;
 exports.CollectionMetadataEdit = CollectionMetadataEdit;
 exports.CollectionMetadataTab = CollectionMetadataTab$1;
-exports.CollectionRow = Component$G;
-exports.CollectionSearchPicker = CollectionSearchPicker$1;
-exports.CollectionTable = Component$F;
-exports.CollectionTreeList = Component$E;
+exports.CollectionRow = Component$H;
+exports.CollectionSearchPicker = Component$A;
+exports.CollectionTable = Component$G;
+exports.CollectionTreeList = Component$F;
 exports.CreateGroupDialog = Component$9;
 exports.CreateUserDialog = Component$g;
 exports.DateField = DateField$1;
@@ -38369,7 +38396,7 @@ exports.FolderTree = FolderTree;
 exports.GroupDetails = Component$a;
 exports.GroupRelationList = Component$i;
 exports.GroupTable = Component$b;
-exports.ImageCollage = Component$J;
+exports.ImageCollage = Component$K;
 exports.ItemAccessTab = ItemAccessTab$1;
 exports.ItemCard = ItemCard;
 exports.ItemCompoundMetadataTab = ItemCompoundMetadataTab$1;
@@ -38395,12 +38422,12 @@ exports.ItemRelationsTab = ItemRelationsTab$1;
 exports.ItemRow = ItemRow;
 exports.ItemSearchPicker = ItemSearchPicker$1;
 exports.ItemShapeTab = ItemShapeTab;
-exports.ItemShapeTable = Component$R;
+exports.ItemShapeTable = Component$S;
 exports.ItemSidecarDialog = Component$t;
 exports.ItemSidecarDownload = ItemSidecarDownload;
 exports.ItemSidecarUpload = ItemSidecarUpload;
 exports.ItemSourceTab = ItemSourceTab;
-exports.ItemSourceTable = Component$Q;
+exports.ItemSourceTable = Component$R;
 exports.ItemTable = ItemTable;
 exports.ItemTabs = Component$u;
 exports.ItemTimespanTab = ItemTimespan;
@@ -38419,12 +38446,12 @@ exports.JobTable = JobTable$1;
 exports.JobTaskTable = JobTaskTable$1;
 exports.LOAD_MORE = LOAD_MORE;
 exports.LayoutButtonGroup = LayoutButtonGroup$1;
-exports.LoginForm = Component$T;
+exports.LoginForm = Component$U;
 exports.MediaBadge = MediaBadge$1;
 exports.MediaBadges = MediaBadges$1;
-exports.MediaCard = Component$L;
+exports.MediaCard = Component$M;
 exports.MediaCardActions = MediaCardActions;
-exports.MediaCardAvatar = Component$M;
+exports.MediaCardAvatar = Component$N;
 exports.MediaCardCard = MediaCardCard$1;
 exports.MediaCardCheckbox = MediaCardCheckbox;
 exports.MediaCardContent = MediaCardContent;
@@ -38432,9 +38459,9 @@ exports.MediaCardDurationLabel = MediaCardDurationLabel;
 exports.MediaCardFullWidth = Component$k;
 exports.MediaCardHeader = MediaCardHeader;
 exports.MediaCardMenu = MediaCardMenu;
-exports.MediaCardThumbnail = Component$O;
-exports.MediaCardThumbnailLabel = Component$P;
-exports.MimeTypeIcon = Component$N;
+exports.MediaCardThumbnail = Component$P;
+exports.MediaCardThumbnailLabel = Component$Q;
+exports.MimeTypeIcon = Component$O;
 exports.PREFIX = PREFIX;
 exports.Pagination = SearchPagination;
 exports.PaginationActions = SearchPaginationActions;
@@ -38454,7 +38481,7 @@ exports.STORAGE = STORAGE;
 exports.SavedSearch = SavedSearch$1;
 exports.SavedSearchFolder = FolderRow$1;
 exports.SearchField = Component$q;
-exports.SearchInput = Component$A;
+exports.SearchInput = Component$B;
 exports.SearchInputFieldSelect = SearchInputFieldSelect$1;
 exports.SearchResultRow = SearchResultRow;
 exports.SearchResultTable = SearchResultTable;
@@ -38469,7 +38496,7 @@ exports.SelectedToolbar = Component$6;
 exports.ShapeTagCard = ShapeTagCard$1;
 exports.ShapeTagListAccordion = ShapeTagListAccordion$1;
 exports.SliderField = SliderField;
-exports.Sort = Component$S;
+exports.Sort = Component$T;
 exports.SortMenuItem = SortMenuItem;
 exports.SpellCheck = Component$r;
 exports.Storage = Storage;