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

package/dist/index.es.js

@@ -136,7 +136,6 @@ import ListItemSecondaryAction$1 from '@material-ui/core/ListItemSecondaryAction
 import GetAppIcon from '@material-ui/icons/GetApp';
 import { useDropzone } from 'react-dropzone';
 import ListSubheader from '@material-ui/core/ListSubheader';
-import useDeepCompareEffect from 'use-deep-compare-effect';
 import Input from '@material-ui/core/Input';
 import TableContainer$1 from '@material-ui/core/TableContainer';
 import { VideoPlayer } from '@vidispine/vdt-videojs-react';
@@ -276,7 +275,7 @@ function useThemeContext() {
   return context;
 }
 
-var styles$2z = function styles(theme) {
+var styles$2A = function styles(theme) {
   return {
     button: {
       borderRadius: 0,
@@ -313,7 +312,7 @@ function LayoutButtonGroup(_ref) {
   }, /*#__PURE__*/React__default.createElement(ViewHeadlineIcon, null)));
 }
 
-var LayoutButtonGroup$1 = withStyles(styles$2z, {
+var LayoutButtonGroup$1 = withStyles(styles$2A, {
   name: 'VdtLayoutButtonGroup'
 })(LayoutButtonGroup);
 
@@ -425,7 +424,7 @@ var useMenu = function useMenu() {
 
 var _excluded$1q = ["AlertProps"];
 
-var styles$2y = function styles() {
+var styles$2z = function styles() {
   return {};
 };
 
@@ -446,7 +445,7 @@ function useSnackbarAlert() {
     var severity = _ref.severity,
         message = _ref.message;
     setAlert(function () {
-      return withStyles(styles$2y)(function (_ref2) {
+      return withStyles(styles$2z)(function (_ref2) {
         var AlertProps = _ref2.AlertProps,
             props = _objectWithoutProperties(_ref2, _excluded$1q);
 
@@ -1574,16 +1573,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;
@@ -1631,7 +1628,7 @@ function CheckboxField(_ref) {
   }, FormControlHelperTextProps), error || submitError));
 }
 
-var CheckboxField$1 = withStyles(styles$2x, {
+var CheckboxField$1 = withStyles(styles$2y, {
   name: 'VdtCheckboxField'
 })(CheckboxField);
 
@@ -1639,7 +1636,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),
@@ -1655,9 +1652,7 @@ function DefaultFormLabel(_ref) {
   return /*#__PURE__*/React.createElement(FormLabel, _extends$4({
     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;
@@ -1779,13 +1774,13 @@ function CheckboxGroupField(_ref2) {
   }, FormHelperTextProps), error || submitError));
 }
 
-var CheckboxGroupField$1 = withStyles(styles$2w, {
+var CheckboxGroupField$1 = 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),
@@ -1855,14 +1850,14 @@ function RadioField(_ref) {
   }, FormHelperTextProps), error || submitError));
 }
 
-var RadioField$1 = withStyles(styles$2v, {
+var RadioField$1 = 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),
@@ -1937,14 +1932,14 @@ function SelectField(_ref) {
   }, FormHelperTextProps), touched && (error || submitError) ? error || submitError : ''));
 }
 
-var SelectField$1 = withStyles(styles$2u, {
+var SelectField$1 = 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),
@@ -1996,13 +1991,13 @@ function TextField(_ref) {
   }, props)));
 }
 
-var TextField$1 = withStyles(styles$2t, {
+var TextField$1 = 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),
@@ -2102,13 +2097,13 @@ function Slider(_ref) {
   }, FormHelperTextProps), error || submitError));
 }
 
-var SliderField = withStyles(styles$2s, {
+var SliderField = 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),
@@ -2250,7 +2245,7 @@ function TagField(_ref) {
   }, FormHelperTextProps), error || submitError));
 }
 
-var TagField$1 = withStyles(styles$2r, {
+var TagField$1 = withStyles(styles$2s, {
   name: 'VdtTagField'
 })(TagField);
 
@@ -2260,7 +2255,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(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),
@@ -2317,11 +2312,11 @@ function DateField(_ref) {
   }, props)));
 }
 
-var DateField$1 = withStyles$1(styles$2q, {
+var DateField$1 = withStyles$1(styles$2r, {
   name: 'VdtDateField'
 })(DateField);
 
-var styles$2p = function styles(theme) {
+var styles$2q = function styles(theme) {
   return {
     root: {
       marginTop: theme.spacing(1),
@@ -2367,7 +2362,7 @@ function SwitchField(_ref) {
   }, FormControlLabelProps)));
 }
 
-var SwitchField$1 = withStyles(styles$2p, {
+var SwitchField$1 = withStyles(styles$2q, {
   name: 'VdtSwitchField'
 })(SwitchField);
 
@@ -2377,7 +2372,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(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;
@@ -2397,9 +2392,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,
@@ -2477,7 +2470,7 @@ function AutocompleteField(_ref2) {
   }, props));
 }
 
-var AutocompleteField$1 = withStyles$1(styles$2o, {
+var AutocompleteField$1 = withStyles$1(styles$2p, {
   name: 'VdtAutocompleteField'
 })(AutocompleteField);
 
@@ -3301,7 +3294,7 @@ var FormButtons = withStyles({}, {
     fullWidth: true
   }, SubmitButtonProps), loginText));
 });
-var styles$2n = function styles() {
+var styles$2o = function styles() {
   return {
     root: {}
   };
@@ -3399,13 +3392,13 @@ LoginForm.defaultProps = {
   FormButtonsProps: {}
 };
 
-var Component$T = withStyles(styles$2n, {
+var Component$U = 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',
@@ -3488,7 +3481,7 @@ var ExpandedFormControlLabel = /*#__PURE__*/React.forwardRef(function (props, re
     }, labelCount))
   );
 });
-var ExpandedFormControlLabel$1 = withStyles$1(styles$2m, {
+var ExpandedFormControlLabel$1 = withStyles$1(styles$2n, {
   name: 'VdtExpandedFormControlLabel'
 })(ExpandedFormControlLabel);
 
@@ -3552,7 +3545,7 @@ var onGetToken = /*#__PURE__*/function () {
   };
 }();
 
-var styles$2l = function styles(theme) {
+var styles$2m = function styles(theme) {
   return {
     root: {
       height: 20,
@@ -3583,7 +3576,7 @@ function FilterFormLabel(_ref) {
   }, /*#__PURE__*/React__default.createElement(IconComponent, null)));
 }
 
-var FilterFormLabel$1 = withStyles(styles$2l, {
+var FilterFormLabel$1 = withStyles(styles$2m, {
   name: 'VdtFilterFormLabel'
 })(FilterFormLabel);
 
@@ -3676,7 +3669,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(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),
@@ -3886,7 +3879,7 @@ function FilterCard(_ref4) {
   }, FormProps))) : null;
 }
 
-var FilterCard$1 = withStyles(styles$2k, {
+var FilterCard$1 = withStyles(styles$2l, {
   name: 'VdtFilterCard'
 })(FilterCard);
 
@@ -4306,7 +4299,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
@@ -4453,7 +4446,7 @@ function SearchInputFieldSelect(_ref) {
   })));
 }
 
-var SearchInputFieldSelect$1 = withStyles(styles$2j, {
+var SearchInputFieldSelect$1 = withStyles(styles$2k, {
   name: 'VdtSearchInputFieldSelect'
 })(SearchInputFieldSelect);
 
@@ -4509,7 +4502,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,
@@ -4657,10 +4650,10 @@ Sort.defaultProps = {
   options: []
 };
 
-var Component$S = withStyles(styles$2i, {
+var Component$T = withStyles(styles$2j, {
   name: 'VdtSort'
 })(Sort);
-Component$S.displayName = 'Sort';
+Component$T.displayName = 'Sort';
 
 var _excluded$18 = ["onSubmit", "onChange", "options", "name", "label"];
 
@@ -4920,7 +4913,7 @@ function JobList(_ref) {
         return handleDelete(index);
       }
     });
-  })), /*#__PURE__*/React__default.createElement(Component$S, {
+  })), /*#__PURE__*/React__default.createElement(Component$T, {
     options: sortOptions,
     initialSort: initialSort,
     onChange: onChangeSort,
@@ -5389,7 +5382,7 @@ function JobTaskTableRow(_ref4) {
   }, duration !== undefined ? humanizeDuration(duration) : '-')));
 }
 
-var styles$2h = {
+var styles$2i = {
   root: {},
   TableHead: {},
   TableBody: {}
@@ -5461,7 +5454,7 @@ JobTaskTable.defaultProps = {
   JobTaskTableRowComponent: JobTaskTableRow,
   JobTaskTableRowProps: {}
 };
-var JobTaskTable$1 = withStyles(styles$2h, {
+var JobTaskTable$1 = withStyles(styles$2i, {
   name: 'VdtJobTaskTable'
 })(JobTaskTable);
 
@@ -5527,7 +5520,7 @@ function JobMenu(_ref) {
   }))));
 }
 
-var styles$2g = {
+var styles$2h = {
   root: {},
   CardContent: {
     height: 'calc(100% - 70px)',
@@ -5674,7 +5667,7 @@ JobCard.defaultProps = {
   JobMenuComponent: JobMenu,
   JobMenuProps: {}
 };
-var JobCard$1 = withStyles(styles$2g, {
+var JobCard$1 = withStyles(styles$2h, {
   name: 'VdtJobCard'
 })(JobCard);
 
@@ -6023,7 +6016,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: {
@@ -6057,7 +6050,7 @@ function MediaBadge(_ref) {
   }, children);
 }
 
-var MediaBadge$1 = withStyles(styles$2f, {
+var MediaBadge$1 = withStyles(styles$2g, {
   name: 'VdtMediaBadge'
 })(MediaBadge);
 
@@ -6165,7 +6158,7 @@ var generateBadges = function generateBadges(_ref) {
   return _toConsumableArray(new Set(badges)); // remove duplicates
 };
 
-var styles$2e = function styles() {
+var styles$2f = function styles() {
   return {
     root: {}
   };
@@ -6198,11 +6191,11 @@ function MediaBadges(_ref2) {
   }));
 }
 
-var MediaBadges$1 = withStyles(styles$2e, {
+var MediaBadges$1 = withStyles(styles$2f, {
   name: 'VdtMediaBadges'
 })(MediaBadges);
 
-var styles$2d = function styles(theme) {
+var styles$2e = function styles(theme) {
   return {
     root: {
       display: 'flex'
@@ -6255,7 +6248,7 @@ function ShapeTagCard(_ref) {
     className: classes.description
   }, shapeTag.description)));
 }
-var ShapeTagCard$1 = withStyles(styles$2d, {
+var ShapeTagCard$1 = withStyles(styles$2e, {
   name: 'VdtShapeTagCard'
 })(ShapeTagCard);
 ShapeTagCard.propTypes = {
@@ -6395,7 +6388,7 @@ var AccordionDetails = withStyles(function (theme) {
   };
 })(MuiAccordionDetails);
 
-var styles$2c = function styles(theme) {
+var styles$2d = function styles(theme) {
   return {
     root: {},
     Accordion: {},
@@ -6506,7 +6499,7 @@ function ShapeTagListAccordion(_ref3) {
     })));
   })));
 }
-var ShapeTagListAccordion$1 = withStyles(styles$2c, {
+var ShapeTagListAccordion$1 = withStyles(styles$2d, {
   name: 'VdtShapeTagListAccordion'
 })(ShapeTagListAccordion);
 ShapeTagListAccordion.propTypes = {
@@ -6652,7 +6645,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), {}, {
@@ -6874,7 +6867,7 @@ function TranscodeDialog(_ref6) {
     }, ShapeTagListProps)));
   })));
 }
-var TranscodeDialog$1 = withStyles(styles$2b, {
+var TranscodeDialog$1 = withStyles(styles$2c, {
   name: 'VdtTranscodeDialog'
 })(TranscodeDialog);
 TranscodeDialog.propTypes = {
@@ -7056,28 +7049,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) {
@@ -7229,10 +7202,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) {
@@ -7270,11 +7248,11 @@ function ConfidenceSlider(_ref) {
   }, SliderProps)));
 }
 
-var ConfidenceSlider$1 = withStyles(styles$2a, {
+var ConfidenceSlider$1 = withStyles(styles$2b, {
   name: 'VdtConfidenceSlider'
 })(ConfidenceSlider);
 
-var styles$29 = {
+var styles$2a = {
   Button: {
     minWidth: 0
   },
@@ -7301,7 +7279,7 @@ function EditButton(_ref) {
   }, ButtonProps), /*#__PURE__*/React__default.createElement(IconComponent, null));
 }
 
-var EditButton$1 = withStyles(styles$29)(EditButton);
+var EditButton$1 = withStyles(styles$2a)(EditButton);
 
 var _excluded$15 = ["itemId", "video", "sampleRate", "onSuccess", "onError", "sameAsStartText", "laterThanEndText"],
     _excluded2$c = ["startText", "endText", "uuid", "timespan"],
@@ -7545,7 +7523,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(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: {}
 };
 
@@ -7606,7 +7584,7 @@ function ItemTimespanEdit(_ref) {
   }, props));
 }
 
-var ItemTimespanEdit$1 = withStyles(styles$28, {
+var ItemTimespanEdit$1 = withStyles(styles$29, {
   name: 'VdtItemTimespanEdit'
 })(ItemTimespanEdit);
 
@@ -7789,7 +7767,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',
@@ -7930,11 +7908,11 @@ function ItemTimespanInterval(_ref) {
   );
 }
 
-var ItemTimespanInterval$1 = withStyles(styles$27, {
+var ItemTimespanInterval$1 = withStyles(styles$28, {
   name: 'VdtItemTimespanInterval'
 })(ItemTimespanInterval);
 
-var styles$26 = {
+var styles$27 = {
   root: {},
   ItemTimespanIntervalContainer: {},
   ItemTimespanInterval: {},
@@ -7995,12 +7973,12 @@ function ItemTimespanList(_ref) {
   }));
 }
 
-var ItemTimespanList$1 = withStyles(styles$26, {
+var ItemTimespanList$1 = 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: {
@@ -8077,11 +8055,11 @@ function ItemTimespanSearchInput(_ref) {
   }, props));
 }
 
-var ItemTimespanSearchInput$1 = withStyles(styles$25, {
+var ItemTimespanSearchInput$1 = withStyles(styles$26, {
   name: 'VdtItemTimespanSearchInput'
 })(ItemTimespanSearchInput);
 
-var styles$24 = function styles(theme) {
+var styles$25 = function styles(theme) {
   return {
     root: {},
     header: {
@@ -8239,11 +8217,11 @@ function ItemTimespanBox(_ref) {
   }, ItemTimespanListProps)));
 }
 
-var ItemTimespanBox$1 = withStyles(styles$24, {
+var ItemTimespanBox$1 = withStyles(styles$25, {
   name: 'VdtItemTimespanBox'
 })(ItemTimespanBox);
 
-var styles$23 = {
+var styles$24 = {
   FormControl: {},
   InputLabel: {},
   Select: {},
@@ -8281,7 +8259,7 @@ function ItemTimespanSelection(_ref) {
   })));
 }
 
-var ItemTimespanSelection$1 = withStyles(styles$23, {
+var ItemTimespanSelection$1 = withStyles(styles$24, {
   name: 'VdtItemTimespanSelection'
 })(ItemTimespanSelection);
 
@@ -8342,7 +8320,7 @@ var useItemTimespan = function useItemTimespan(_ref) {
   };
 };
 
-var styles$22 = function styles(theme) {
+var styles$23 = function styles(theme) {
   return {
     root: {},
     ItemTimespanSelection: {
@@ -8409,7 +8387,7 @@ function ItemTimespan$1(_ref) {
   }, timespanOptionValue, ItemTimespanBoxProps)));
 }
 
-var ItemTimespan = withStyles(styles$22, {
+var ItemTimespan = withStyles(styles$23, {
   name: 'VdtItemTimespan'
 })(ItemTimespan$1);
 
@@ -8431,7 +8409,7 @@ var PERMISSIONS = {
   NONE: 'NONE'
 };
 
-var styles$21 = function styles(theme) {
+var styles$22 = function styles(theme) {
   return {
     root: {},
     recipientRoot: {
@@ -8839,7 +8817,7 @@ function EntityAccessEdit(_ref6) {
   }, grantAccessText)));
 }
 
-var EntityAccessEdit$1 = withStyles(styles$21, {
+var EntityAccessEdit$1 = withStyles(styles$22, {
   name: 'VdtEntityAccessEdit'
 })(EntityAccessEdit);
 
@@ -9158,7 +9136,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(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',
@@ -9224,7 +9202,7 @@ function ItemMetadataFieldRow(_ref) {
   }, props))));
 }
 
-var ItemMetadataFieldRow$1 = withStyles(styles$20, {
+var ItemMetadataFieldRow$1 = withStyles(styles$21, {
   name: 'VdtItemMetadataFieldRow'
 })(ItemMetadataFieldRow);
 
@@ -9307,7 +9285,7 @@ var defaultGetFieldProps = function defaultGetFieldProps(_ref) {
   };
 };
 
-var styles$1$ = {
+var styles$20 = {
   root: {
     tableLayout: 'fixed'
   },
@@ -9424,7 +9402,7 @@ function PureItemMetadataFieldGroupRow(_ref4) {
 var ItemMetadataFieldGroupRow = withStyles(FieldGroupRowStyles, {
   name: 'VdtItemMetadataFieldGroupRow'
 })(PureItemMetadataFieldGroupRow);
-var ItemMetadataFormTable = withStyles(styles$1$, {
+var ItemMetadataFormTable = withStyles(styles$20, {
   name: 'VdtItemMetadataFormTable'
 })(PureItemMetadataFormTable);
 
@@ -9548,7 +9526,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(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,
@@ -9614,7 +9592,7 @@ function ItemMetadataListFieldItem(_ref) {
   }));
 }
 
-var ItemMetadataListFieldItem$1 = withStyles(styles$1_, {
+var ItemMetadataListFieldItem$1 = withStyles(styles$1$, {
   name: 'VdtItemMetadataListFieldItem'
 })(ItemMetadataListFieldItem);
 
@@ -9626,7 +9604,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(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
@@ -9715,7 +9693,7 @@ function ItemMetadataListFieldGroupItem(_ref) {
   }))));
 }
 
-var ItemMetadataListFieldGroupItem$1 = withStyles(styles$1Z, {
+var ItemMetadataListFieldGroupItem$1 = withStyles(styles$1_, {
   name: 'VdtItemMetadataListFieldGroupItem'
 })(ItemMetadataListFieldGroupItem);
 
@@ -9723,7 +9701,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%',
@@ -9780,7 +9758,7 @@ function ItemMetadataList(_ref) {
   }));
 }
 
-var ItemMetadataList$1 = withStyles(styles$1Y, {
+var ItemMetadataList$1 = withStyles(styles$1Z, {
   name: 'VdtItemMetadataList'
 })(ItemMetadataList);
 
@@ -15553,7 +15531,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(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'
@@ -15586,7 +15564,7 @@ function TableRow(_ref) {
   }, value !== undefined ? formatValue(value) : ''));
 }
 
-var TableRow$1 = withStyles(styles$1X)(TableRow);
+var TableRow$1 = withStyles(styles$1Y)(TableRow);
 
 function AudioComponentTypeTableBody(_ref) {
   var className = _ref.className,
@@ -15912,7 +15890,7 @@ function ShapeTypeTableBody(_ref2) {
   }));
 }
 
-var styles$1W = function styles() {
+var styles$1X = function styles() {
   return {
     MenuIconButton: {},
     MenuIcon: {},
@@ -16000,7 +15978,7 @@ function ItemShapeMenu(_ref) {
   }));
 }
 
-var ItemShapeMenu$1 = withStyles(styles$1W, {
+var ItemShapeMenu$1 = withStyles(styles$1X, {
   name: 'VdtItemShapeMenu'
 })(ItemShapeMenu);
 
@@ -16064,7 +16042,7 @@ function ItemShapeRow(_ref) {
   })))))));
 }
 
-var styles$1V = function styles() {
+var styles$1W = function styles() {
   return {
     root: {
       width: '100%'
@@ -16129,10 +16107,10 @@ ItemShapeTable.defaultProps = {
   canExpand: true
 };
 
-var Component$R = withStyles(styles$1V, {
+var Component$S = withStyles(styles$1W, {
   name: 'VdtItemShapeTable'
 })(ItemShapeTable);
-Component$R.displayName = 'ItemShapeTable';
+Component$S.displayName = 'ItemShapeTable';
 
 var _excluded$Z = ["itemId", "hidden"];
 var queryParams$2 = {
@@ -16173,7 +16151,7 @@ function ItemShapeTab(_ref) {
 
     hiddenRef.current = hidden;
   }, [hidden, onRefresh]);
-  return /*#__PURE__*/React__default.createElement(Component$R, _extends$4({
+  return /*#__PURE__*/React__default.createElement(Component$S, _extends$4({
     itemId: itemId,
     itemType: itemType,
     onRemove: onRemove
@@ -16205,7 +16183,7 @@ function MetadataTypeTableBody(_ref) {
   }));
 }
 
-var styles$1U = function styles() {
+var styles$1V = function styles() {
   return {
     root: {
       width: '100%'
@@ -16251,10 +16229,10 @@ ItemSourceTable.defaultProps = {
   classes: {}
 };
 
-var Component$Q = withStyles(styles$1U, {
+var Component$R = withStyles(styles$1V, {
   name: 'VdtItemSourceTable'
 })(ItemSourceTable);
-Component$Q.displayName = 'ItemSourceTable';
+Component$R.displayName = 'ItemSourceTable';
 
 var queryParams$1 = {
   content: ['shape', 'metadata'],
@@ -16268,7 +16246,7 @@ function ItemSourceTab(_ref) {
   return /*#__PURE__*/React__default.createElement(GetItem, {
     itemId: itemId,
     queryParams: queryParams$1
-  }, /*#__PURE__*/React__default.createElement(Component$Q, null));
+  }, /*#__PURE__*/React__default.createElement(Component$R, null));
 }
 
 function ItemPosterDialog(_ref) {
@@ -16322,7 +16300,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(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,
@@ -16371,10 +16349,10 @@ MediaCardThumbnailLabel.defaultProps = {
   style: {}
 };
 
-var Component$P = withStyles(styles$1T, {
+var Component$Q = 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);
@@ -16393,7 +16371,7 @@ function MediaCardDurationLabel(_ref) {
   var seconds = Number(label);
   if (seconds === 0) return null;
   var formattedDuration = formatDurationSeconds(seconds);
-  return /*#__PURE__*/React__default.createElement(Component$P, {
+  return /*#__PURE__*/React__default.createElement(Component$Q, {
     className: className,
     classes: classes,
     style: style,
@@ -16402,7 +16380,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: {
@@ -16649,16 +16627,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,
@@ -16668,12 +16646,12 @@ MediaCardThumbnail.defaultProps = {
   ScrubLabelProps: {}
 };
 
-var Component$O = withStyles(styles$1S, {
+var Component$P = 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: {
@@ -16691,7 +16669,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.createElement("div", {
@@ -16719,7 +16697,7 @@ function ItemPosterList(_ref) {
   }));
 }
 
-var ItemPosterList$1 = withStyles(styles$1R, {
+var ItemPosterList$1 = withStyles(styles$1S, {
   name: 'VdtItemPosterList'
 })(ItemPosterList);
 
@@ -16893,7 +16871,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,
@@ -16954,12 +16932,12 @@ MimeTypeIcon.defaultProps = {
   collectionIcon: FolderIcon
 };
 
-var Component$N = withStyles(styles$1Q, {
+var Component$O = 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'
   },
@@ -16976,7 +16954,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,
@@ -17017,20 +16995,20 @@ MediaCardAvatar.defaultProps = {
   avatar: undefined,
   skeleton: false,
   variant: 'square',
-  MimeTypeComponent: Component$N,
+  MimeTypeComponent: Component$O,
   MimeTypeProps: {},
   SkeletonProps: {},
   AvatarProps: {}
 };
 
-var Component$M = withStyles(styles$1P, {
+var Component$N = 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',
@@ -17078,7 +17056,7 @@ function MediaCardCard(_ref) {
   }, CardProps), children);
 }
 
-var MediaCardCard$1 = withStyles(styles$1O, {
+var MediaCardCard$1 = withStyles(styles$1P, {
   name: 'VdtMediaCardCard'
 })(MediaCardCard);
 
@@ -17202,7 +17180,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,
@@ -17247,7 +17225,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: {}
   };
@@ -17380,10 +17358,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: {},
@@ -17394,10 +17372,10 @@ MediaCard.defaultProps = {
   MenuProps: {}
 };
 
-var Component$L = withStyles(styles$1N, {
+var Component$M = withStyles(styles$1O, {
   name: 'VdtMediaCard'
 })(MediaCard);
-Component$L.displayName = 'MediaCard';
+Component$M.displayName = 'MediaCard';
 
 function CollectionAvatar() {
   return /*#__PURE__*/React__default.createElement(Avatar$1, {
@@ -17406,7 +17384,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,
@@ -17476,7 +17454,7 @@ CollectionCard.defaultProps = {
     joinValue: ', ',
     flat: true
   },
-  MediaCardComponent: Component$L,
+  MediaCardComponent: Component$M,
   AvatarComponent: CollectionAvatar,
   ThumbnailComponent: null,
   MenuComponent: null,
@@ -17490,12 +17468,12 @@ CollectionCard.defaultProps = {
   }
 };
 
-var Component$K = withStyles(styles$1M, {
+var Component$L = 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',
@@ -17616,8 +17594,13 @@ ImageCollage.defaultProps = {
   }
 };
 
+var Component$K = withStyles(styles$1M, {
+  name: 'VdtImageCollage'
+})(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: {
@@ -17699,7 +17682,7 @@ function CollectionCardThumbnail(_ref) {
       width: width,
       backgroundColor: thumbnailUrls.length ? undefined : primaryColor
     }
-  }, /*#__PURE__*/React__default.createElement(ImageCollage, _extends$4({
+  }, /*#__PURE__*/React__default.createElement(Component$K, _extends$4({
     className: "VdtCollectionCardThumbnail-image",
     urls: thumbnailUrls,
     onError: handleError
@@ -17730,7 +17713,7 @@ CollectionCardThumbnail.propTypes = {
   ImageCollageProps: PropTypes$1.objectOf(PropTypes$1.any)
 };
 CollectionCardThumbnail.defaultProps = {
-  className: undefined,
+  className: '',
   classes: {},
   component: 'div',
   height: 180,
@@ -17742,7 +17725,7 @@ CollectionCardThumbnail.defaultProps = {
   ImageCollageProps: {}
 };
 
-var Component$J = withStyles(styles$1K, {
+var Component$J = withStyles(styles$1L, {
   name: 'VdtCollectionCardThumbnail'
 })(CollectionCardThumbnail);
 Component$J.displayName = 'CollectionCardThumbnail';
@@ -17750,7 +17733,7 @@ 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(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) {
@@ -17815,7 +17798,7 @@ CollectionGrid.defaultProps = {
   className: undefined,
   classes: {},
   collectionListType: {},
-  CollectionCardComponent: Component$K,
+  CollectionCardComponent: Component$L,
   CollectionCardProps: {},
   GridContainerProps: {},
   GridItemProps: {},
@@ -17823,7 +17806,7 @@ CollectionGrid.defaultProps = {
   onCollectionClick: null
 };
 
-var Component$I = withStyles(styles$1J, {
+var Component$I = withStyles(styles$1K, {
   name: 'VdtCollectionGrid'
 })(CollectionGrid);
 Component$I.displayName = 'CollectionGrid';
@@ -17844,7 +17827,7 @@ var defaultMetadataToProps = function defaultMetadataToProps(_ref) {
   });
 };
 
-var styles$1I = function styles() {
+var styles$1J = function styles() {
   return {
     root: {}
   };
@@ -17938,13 +17921,13 @@ CollectionRow.defaultProps = {
   TableRowProps: {}
 };
 
-var Component$H = withStyles(styles$1I, {
+var Component$H = withStyles(styles$1J, {
   name: 'VdtCollectionRow'
 })(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: {}
   };
@@ -18017,7 +18000,7 @@ CollectionTable.defaultProps = {
   onRowClick: undefined
 };
 
-var Component$G = withStyles(styles$1H, {
+var Component$G = withStyles(styles$1I, {
   name: 'VdtCollectionTable'
 })(CollectionTable);
 Component$G.displayName = 'CollectionTable';
@@ -18783,17 +18766,17 @@ withDrop.defaultProps = {
   acceptedEntityTypes: ACCEPTED_ENTITY_TYPES
 };
 
-var styles$1G = {
+var styles$1H = {
   isDragging: {
     opacity: 0.5,
     cursor: 'move'
   }
 };
-var TreeItemDraggable = compose(withStyles$1(styles$1G, {
+var TreeItemDraggable = compose(withStyles$1(styles$1H, {
   name: 'VdtTreeItemDraggable'
 }), withDrag)(TreeItem);
 
-var styles$1F = function styles() {
+var styles$1G = function styles() {
   return {
     root: {}
   };
@@ -18820,7 +18803,7 @@ function ItemLabel(_ref) {
     className: clsx(className, classes.root, 'VdtItemLabel-root'),
     display: "flex",
     alignItems: "flex-end"
-  }, /*#__PURE__*/React__default.createElement(Component$N, {
+  }, /*#__PURE__*/React__default.createElement(Component$O, {
     mimeType: mimeType
   }), /*#__PURE__*/React__default.createElement(Typography, {
     style: {
@@ -18829,11 +18812,11 @@ function ItemLabel(_ref) {
   }, label));
 }
 
-var ItemLabel$1 = withStyles$1(styles$1F, {
+var ItemLabel$1 = withStyles$1(styles$1G, {
   name: 'VdtItemLabel'
 })(ItemLabel);
 
-var styles$1E = function styles(theme) {
+var styles$1F = function styles(theme) {
   return {
     isOver: {
       backgroundColor: theme.palette.primary.main
@@ -18841,11 +18824,11 @@ var styles$1E = function styles(theme) {
   };
 };
 
-var ItemLabelDroppable = compose(withStyles$1(styles$1E, {
+var ItemLabelDroppable = compose(withStyles$1(styles$1F, {
   name: 'VdtItemLabelDroppable'
 }), withDrop)(ItemLabel$1);
 
-var styles$1D = {
+var styles$1E = {
   root: {}
 };
 
@@ -18883,11 +18866,11 @@ function ItemTreeItem(_ref) {
   }, TreeItemProps));
 }
 
-var ItemTreeItem$1 = withStyles$1(styles$1D, {
+var ItemTreeItem$1 = withStyles$1(styles$1E, {
   name: 'VdtItemTreeItem'
 })(ItemTreeItem);
 
-var styles$1C = {
+var styles$1D = {
   root: {}
 };
 
@@ -18919,11 +18902,11 @@ function CollectionLabel(_ref) {
   }, collectionLabel));
 }
 
-var CollectionLabel$1 = withStyles$1(styles$1C, {
+var CollectionLabel$1 = withStyles$1(styles$1D, {
   name: 'CollectionLabel'
 })(CollectionLabel);
 
-var styles$1B = function styles(theme) {
+var styles$1C = function styles(theme) {
   return {
     isOver: {
       backgroundColor: theme.palette.primary.main
@@ -18931,7 +18914,7 @@ var styles$1B = function styles(theme) {
   };
 };
 
-var CollectionLabelDroppable = compose(withStyles$1(styles$1B, {
+var CollectionLabelDroppable = compose(withStyles$1(styles$1C, {
   name: 'VdtCollectionLabelDroppable'
 }), withDrop)(CollectionLabel$1);
 
@@ -18970,7 +18953,7 @@ var getStateWithParentCollection = function getStateWithParentCollection(state,
   });
 };
 
-var styles$1A = {
+var styles$1B = {
   root: {}
 };
 function CollectionTreeList(_ref) {
@@ -19245,7 +19228,7 @@ function CollectionTreeList(_ref) {
   }) : undefined);
 }
 
-var Component$F = withStyles(styles$1A, {
+var Component$F = withStyles(styles$1B, {
   name: 'VdtCollectionTreeList'
 })(CollectionTreeList);
 Component$F.displayName = 'CollectionTreeList';
@@ -19253,7 +19236,7 @@ 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(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'
@@ -19416,7 +19399,7 @@ CollectionListItem.defaultProps = {
   onClick: undefined,
   ActionComponent: undefined,
   ActionProps: {},
-  AvatarComponent: Component$M,
+  AvatarComponent: Component$N,
   AvatarProps: {},
   ListItemProps: {},
   parseMetadataOptions: {
@@ -19426,12 +19409,12 @@ CollectionListItem.defaultProps = {
   skeleton: false
 };
 
-var Component$E = withStyles(styles$1z, {
+var Component$E = withStyles(styles$1A, {
   name: 'VdtCollectionListItem'
 })(CollectionListItem);
 Component$E.displayName = 'CollectionListItem';
 
-var styles$1y = function styles() {
+var styles$1z = function styles() {
   return {
     root: {
       width: '100%'
@@ -19476,7 +19459,7 @@ CollectionList.defaultProps = {
   CollectionListItemProps: {}
 };
 
-var Component$D = withStyles(styles$1y, {
+var Component$D = withStyles(styles$1z, {
   name: 'VdtCollectionList'
 })(CollectionList);
 Component$D.displayName = 'CollectionList';
@@ -19684,7 +19667,7 @@ var CollectionAccessTab$1 = withStyles({}, {
   name: 'VdtCollectionAccessTab'
 })(CollectionAccessTab);
 
-var styles$1x = function styles() {
+var styles$1y = function styles() {
   return {
     root: {}
   };
@@ -19773,12 +19756,12 @@ CollectionCreateDialog.defaultProps = {
   onSuccess: undefined
 };
 
-var Component$C = withStyles(styles$1x, {
+var Component$C = withStyles(styles$1y, {
   name: 'VdtCollectionCreateDialog'
 })(CollectionCreateDialog);
 Component$C.displayName = 'CollectionCreateDialog';
 
-var styles$1w = function styles(theme) {
+var styles$1x = function styles(theme) {
   return {
     root: {
       alignItems: 'center',
@@ -20044,7 +20027,7 @@ SearchInput.defaultProps = {
   inputRef: undefined
 };
 
-var Component$B = withStyles(styles$1w, {
+var Component$B = withStyles(styles$1x, {
   name: 'VdtSearchInput'
 })(SearchInput);
 Component$B.displayName = 'SearchInput';
@@ -20059,41 +20042,39 @@ function PaginationWrapper$1(_ref) {
   var _props$collectionList = props.collectionListType.hits,
       count = _props$collectionList === void 0 ? 0 : _props$collectionList;
   return /*#__PURE__*/React__default.createElement(PaginationComponent, _extends$4({
-    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.createElement(Component$B, _extends$4({
-    submitting: isLoading
-  }, props));
-} // TODO: Rename to SelectCollection
+    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$G : _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 = useSearch({
     queryParams: {
       field: ['collectionId', 'title', '__user'],
@@ -20142,15 +20123,19 @@ function CollectionSearchPicker(_ref2) {
     return check(id);
   };
 
-  return /*#__PURE__*/React__default.createElement(SearchCollection, _extends$4({
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clsx(classes.root, 'VdtCollectionSearchPicker', className)
+  }, /*#__PURE__*/React__default.createElement(SearchCollection, _extends$4({
     itemSearchDocument: itemSearchDocument,
     matrixParams: matrixParams,
-    queryParams: queryParams
+    queryParams: queryParams // eslint-disable-next-line react/jsx-props-no-spreading
+
   }, SearchCollectionProps), /*#__PURE__*/React__default.createElement(SearchInputWrapper$1, _extends$4({
     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.createElement(CollectionTableComponent, _extends$4({
     onRowClick: handleRowClick,
     onCheck: onCheck,
@@ -20164,18 +20149,60 @@ function CollectionSearchPicker(_ref2) {
     }, {
       label: ownerLabelText,
       value: '__user'
-    }]
+    }] // eslint-disable-next-line react/jsx-props-no-spreading
+
   }, CollectionTableProps)), /*#__PURE__*/React__default.createElement(PaginationWrapper$1, _extends$4({
     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 = 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 = 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; }
 
@@ -20391,7 +20418,7 @@ AddToCollectionDialog.propTypes = {
 AddToCollectionDialog.defaultProps = {
   classes: {},
   className: undefined,
-  CollectionPickerComponent: CollectionSearchPicker$1,
+  CollectionPickerComponent: Component$A,
   CreateCollectionComponent: CreateCollection,
   onClose: function onClose() {},
   onSubmit: defaultOnSubmit$1,
@@ -20413,10 +20440,10 @@ AddToCollectionDialog.defaultProps = {
   SearchCollectionIcon: SearchIcon
 };
 
-var Component$A = withStyles(styles$1v, {
+var Component$z = withStyles(styles$1v, {
   name: 'VdtAddToCollectionDialog'
 })(AddToCollectionDialog);
-Component$A.displayName = 'AddToCollectionDialog';
+Component$z.displayName = 'AddToCollectionDialog';
 
 var defaultOnConfirm = function defaultOnConfirm(_ref) {
   var collectionId = _ref.collectionId,
@@ -20508,10 +20535,10 @@ RemoveFromCollectionDialog.defaultProps = {
   confirmText: 'Remove'
 };
 
-var Component$z = withStyles(styles$1u, {
+var Component$y = withStyles(styles$1u, {
   name: 'VdtRemoveFromCollectionDialog'
 })(RemoveFromCollectionDialog);
-Component$z.displayName = 'RemoveFromCollectionDialog';
+Component$y.displayName = 'RemoveFromCollectionDialog';
 
 var _excluded$M = ["className", "classes", "ListItemTextComponent", "collectionId", "collectionType", "showUser", "showDate"];
 
@@ -20680,7 +20707,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() {
@@ -20904,13 +20931,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 ? ListItemAvatar : _ref4$ListItemAvatarC,
       props = _objectWithoutProperties(_ref4, _excluded2$8);
@@ -21515,10 +21542,10 @@ function CollectionContent(_ref3) {
   }));
 }
 
-var Component$y = withStyles(styles$1q, {
+var Component$x = withStyles(styles$1q, {
   name: 'VdtCollectionContent'
 })(CollectionContent);
-Component$y.displayName = 'CollectionContent';
+Component$x.displayName = 'CollectionContent';
 
 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; }
 
@@ -21584,7 +21611,7 @@ function ActionComponent$1(_ref) {
     primary: removeText
   }))), /*#__PURE__*/React__default.createElement(Dialog$1, {
     open: openDialog
-  }, /*#__PURE__*/React__default.createElement(Component$z, {
+  }, /*#__PURE__*/React__default.createElement(Component$y, {
     collectionId: collectionId,
     entityId: itemId,
     entityType: "item",
@@ -22216,7 +22243,7 @@ ItemListItem.defaultProps = {
   onClick: undefined,
   ActionComponent: undefined,
   ActionProps: {},
-  AvatarComponent: Component$M,
+  AvatarComponent: Component$N,
   AvatarProps: {},
   ListItemProps: {},
   ListItemAvatarProps: {},
@@ -22228,10 +22255,10 @@ ItemListItem.defaultProps = {
   skeleton: false
 };
 
-var Component$x = withStyles(styles$1o, {
+var Component$w = withStyles(styles$1o, {
   name: 'VdtItemListItem'
 })(ItemListItem);
-Component$x.displayName = 'ItemListItem';
+Component$w.displayName = 'ItemListItem';
 
 var styles$1n = function styles() {
   return {
@@ -22269,14 +22296,14 @@ ItemList.defaultProps = {
   className: undefined,
   classes: {},
   itemListType: {},
-  ItemListItemComponent: Component$x,
+  ItemListItemComponent: Component$w,
   ItemListItemProps: {}
 };
 
-var Component$w = withStyles(styles$1n, {
+var Component$v = withStyles(styles$1n, {
   name: 'VdtItemList'
 })(ItemList);
-Component$w.displayName = 'ItemList';
+Component$v.displayName = 'ItemList';
 
 function ItemRelationRemoveDialog(_ref) {
   var open = _ref.open,
@@ -22588,7 +22615,7 @@ ItemRelationsTab.defaultProps = {
     var message = _ref6.message;
     return console.error(message);
   },
-  ItemListComponent: Component$w,
+  ItemListComponent: Component$v,
   ItemListProps: {},
   onRemove: function onRemove() {},
   onAdd: function onAdd() {},
@@ -22773,10 +22800,10 @@ ItemTabs.defaultProps = {
   tabs: []
 };
 
-var Component$v = withStyles(styles$1i, {
+var Component$u = withStyles(styles$1i, {
   name: 'VdtItemTabs'
 })(ItemTabs);
-Component$v.displayName = 'ItemTabs';
+Component$u.displayName = 'ItemTabs';
 
 var _excluded$E = ["itemType", "MediaCardComponent", "metadataToProps", "parseMetadataOpts", "parseHighlightOpts", "titleSelector", "subheaderSelector", "imageSelector", "contentSelector", "avatarSelector", "labelRightBottomSelector", "ThumbnailProps"];
 
@@ -22877,7 +22904,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;
@@ -22968,7 +22995,7 @@ function ItemCardClone(_ref) {
   }), /*#__PURE__*/React__default.createElement(ItemCardComponent, _extends$4({}, props, {
     itemId: itemType.id,
     itemType: itemType,
-    MediaCardComponent: Component$L,
+    MediaCardComponent: Component$M,
     ThumbnailComponent: null
   })));
 }
@@ -24018,10 +24045,10 @@ ItemSidecarDialog.defaultProps = {
   ItemSidecarUploadProps: {}
 };
 
-var Component$u = withStyles(styles$1f, {
+var Component$t = withStyles(styles$1f, {
   name: 'VdtItemSidecarDialog'
 })(ItemSidecarDialog);
-Component$u.displayName = 'ItemSidecarDialog';
+Component$t.displayName = 'ItemSidecarDialog';
 
 var styles$1e = function styles() {
   return {
@@ -24476,10 +24503,6 @@ function ItemCompoundMetadataTable(_ref) {
       rowsPerPage = _React$useState6[0],
       setRowsPerPage = _React$useState6[1];
 
-  useDeepCompareEffect(function () {
-    setGroupFields(values.group);
-  }, [values]);
-
   var _useCompoundMetadata = useCompoundMetadata(itemId, values, groups, groupFields, setGroupFields, onRefresh, onSuccess, onError),
       tableColumns = _useCompoundMetadata.tableColumns,
       _onChange = _useCompoundMetadata.onChange,
@@ -25175,10 +25198,10 @@ function ItemPlayer(_ref2) {
   }, ItemVideoPlayerProps))));
 }
 
-var Component$t = withStyles(styles$18, {
+var Component$s = withStyles(styles$18, {
   name: 'VdtItemPlayer'
 })(ItemPlayer);
-Component$t.displayName = 'ItemPlayer';
+Component$s.displayName = 'ItemPlayer';
 
 function ownKeys$j(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; }
 
@@ -27619,7 +27642,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);
@@ -27835,7 +27862,7 @@ function SavedSearchList(_ref) {
       accessTranslate = _ref.accessTranslate,
       props = _objectWithoutProperties(_ref, _excluded$t);
 
-  return /*#__PURE__*/React__default.createElement(CollectionSearchPicker$1, _extends$4({
+  return /*#__PURE__*/React__default.createElement(Component$A, _extends$4({
     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
@@ -28170,10 +28197,10 @@ SpellCheck.defaultProps = {
   onClick: function onClick() {}
 };
 
-var Component$s = withStyles(styles$Y, {
+var Component$r = withStyles(styles$Y, {
   name: 'VdtSpellCheck'
 })(SpellCheck);
-Component$s.displayName = 'SpellCheck';
+Component$r.displayName = 'SpellCheck';
 
 var _excluded$s = ["isFocused"],
     _excluded2$4 = ["inputRef"];
@@ -28704,6 +28731,7 @@ SearchField.propTypes = {
    */
   className: PropTypes$1.string,
   theme: PropTypes$1.objectOf(PropTypes$1.any),
+  // eslint-disable-next-line react/forbid-prop-types
   defaultValue: PropTypes$1.arrayOf(PropTypes$1.object),
   modifiers: PropTypes$1.arrayOf(PropTypes$1.any),
   loadOptions: PropTypes$1.func,
@@ -28745,10 +28773,10 @@ SearchField.defaultProps = {
   ProgressProps: {}
 };
 
-var Component$r = withStyles(styles$X, {
+var Component$q = withStyles(styles$X, {
   name: 'VdtSearchField'
 })(SearchField);
-Component$r.displayName = 'SearchField';
+Component$q.displayName = 'SearchField';
 
 var styles$W = function styles() {
   return {
@@ -30790,10 +30818,10 @@ QueryBuilder.defaultProps = {
   QueryEntryProps: {}
 };
 
-var Component$q = withStyles(styles$M, {
+var Component$p = withStyles(styles$M, {
   name: 'VdtQueryBuilder'
 })(QueryBuilder);
-Component$q.displayName = 'QueryBuilder';
+Component$p.displayName = 'QueryBuilder';
 
 function ownKeys$a(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; }
 
@@ -30855,7 +30883,7 @@ function QueryBuilderCard(_ref) {
     variant: "outlined",
     elevation: 0,
     square: true
-  }, PaperProps), /*#__PURE__*/React__default.createElement(Component$q, _extends$4({
+  }, PaperProps), /*#__PURE__*/React__default.createElement(Component$p, _extends$4({
     query: queryBuilderQuery,
     fields: fields,
     groups: groups,
@@ -30917,10 +30945,10 @@ QueryBuilderCard.defaultProps = {
   searchButtonProps: {}
 };
 
-var Component$p = withStyles(styles$L, {
+var Component$o = withStyles(styles$L, {
   name: 'VdtQueryBuilderCard'
 })(QueryBuilderCard);
-Component$p.displayName = 'QueryBuilderCard';
+Component$o.displayName = 'QueryBuilderCard';
 
 var _excluded$j = ["entityType", "entity", "entityComponents"];
 
@@ -30931,7 +30959,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(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(_defaultEntityCompone, ITEM$2, ItemCard), _defineProperty(_defaultEntityCompone, COLLECTION$2, Component$K), _defaultEntityCompone);
+var defaultEntityComponents = (_defaultEntityCompone = {}, _defineProperty(_defaultEntityCompone, ITEM$2, ItemCard), _defineProperty(_defaultEntityCompone, COLLECTION$2, Component$L), _defaultEntityCompone);
 function EntityCard(_ref) {
   var entityType = _ref.entityType,
       entity = _ref.entity,
@@ -30964,7 +30992,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,
@@ -31024,7 +31052,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,
@@ -31373,7 +31401,7 @@ EntityDeleteDialog.defaultProps = {
     'noauth-url': true
   },
   DialogProps: {},
-  CollectionCardComponent: Component$K,
+  CollectionCardComponent: Component$L,
   CollectionCardProps: {},
   ItemCardComponent: ItemCard,
   ItemCardProps: {},
@@ -31381,10 +31409,10 @@ EntityDeleteDialog.defaultProps = {
   classes: {}
 };
 
-var Component$o = withStyles(styles$I, {
+var Component$n = withStyles(styles$I, {
   name: 'VdtEntityDeleteDialog'
 })(EntityDeleteDialog);
-Component$o.displayName = 'EntityDeleteDialog';
+Component$n.displayName = 'EntityDeleteDialog';
 
 var getPlayerFromRef = function getPlayerFromRef(playerRef) {
   if (!playerRef || !playerRef.current) return undefined;
@@ -32273,7 +32301,7 @@ BinList.defaultProps = {
   },
   ActionComponent: BinListMenu,
   ActionProps: {},
-  AddToCollectionDialogComponent: Component$A,
+  AddToCollectionDialogComponent: Component$z,
   AddToCollectionDialogProps: {},
   BinContentComponent: BinContentDroppable,
   BinContentProps: {},
@@ -32284,15 +32312,15 @@ BinList.defaultProps = {
   BinProps: {}
 };
 
-var Component$n = withStyles(styles$E, {
+var Component$m = withStyles(styles$E, {
   name: 'VdtBinList'
 })(BinList);
-Component$n.displayName = 'BinList';
+Component$m.displayName = 'BinList';
 
-var Component$m = withStyles(styles$F, {
+var Component$l = withStyles(styles$F, {
   name: 'VdtBinListMenu'
 })(BinListMenu);
-Component$m.displayName = 'BinListMenu';
+Component$l.displayName = 'BinListMenu';
 
 var LoadMoreTreeItem = withStyles$1({}, {
   name: 'VdtLoadMoreTreeItem'
@@ -33230,7 +33258,7 @@ function UploadListItem(_ref) {
       _ref$DeleteIcon = _ref.DeleteIcon,
       DeleteIcon$1 = _ref$DeleteIcon === void 0 ? DeleteIcon : _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,
@@ -33460,7 +33488,7 @@ function UploadCollectionPicker(_ref2) {
     });
   };
 
-  return /*#__PURE__*/React__default.createElement(Component$A, _extends$4({
+  return /*#__PURE__*/React__default.createElement(Component$z, _extends$4({
     className: "VdtUploadCollectionPicker-root",
     entities: [],
     titleText: "Upload To Collection",
@@ -34131,7 +34159,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,
@@ -34145,10 +34173,10 @@ MediaCardFullWidth.defaultProps = {
   ActionsProps: {}
 };
 
-var Component$l = withStyles(styles$u, {
+var Component$k = withStyles(styles$u, {
   name: 'VdtMediaCardFullWidth'
 })(MediaCardFullWidth);
-Component$l.displayName = 'MediaCardFullWidth';
+Component$k.displayName = 'MediaCardFullWidth';
 
 function ownKeys$1(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; }
 
@@ -34633,10 +34661,10 @@ UserTable.defaultProps = {
   userColumnLabels: DEFAULT_COLUMN_LABELS
 };
 
-var Component$k = withStyles(styles$r, {
+var Component$j = withStyles(styles$r, {
   name: 'VdtUserTable'
 })(UserTable);
-Component$k.displayName = 'UserTable';
+Component$j.displayName = 'UserTable';
 
 var styles$q = function styles(theme) {
   return {
@@ -34927,10 +34955,10 @@ GroupRelationList.defaultProps = {
   addButtonText: 'Add'
 };
 
-var Component$j = withStyles(styles$q, {
+var Component$i = withStyles(styles$q, {
   name: 'VdtGroupRelationList'
 })(GroupRelationList);
-Component$j.displayName = 'GroupRelationList';
+Component$i.displayName = 'GroupRelationList';
 
 var styles$p = function styles(theme) {
   return {
@@ -35176,19 +35204,19 @@ UserDetails.defaultProps = {
   onChangePassword: undefined,
   DetailsComponent: UserData$1,
   DetailsProps: {},
-  GroupsComponent: Component$j,
+  GroupsComponent: Component$i,
   GroupsProps: {},
-  RolesComponent: Component$j,
+  RolesComponent: Component$i,
   RolesProps: {},
   MenuComponent: UserMenu,
   MenuProps: {},
   lockedUsers: ['admin', 'vidinetviewer']
 };
 
-var Component$i = withStyles(styles$o, {
+var Component$h = withStyles(styles$o, {
   name: 'VdtUserDetails'
 })(UserDetails);
-Component$i.displayName = 'UserDetails';
+Component$h.displayName = 'UserDetails';
 
 function PasswordField(props) {
   var _React$useState = React__default.useState(false),
@@ -35413,10 +35441,10 @@ CreateUserDialog$1.defaultProps = {
   CreateUserFormProps: {}
 };
 
-var Component$h = withStyles(styles$m, {
+var Component$g = withStyles(styles$m, {
   name: 'VdtCreateUserDialog'
 })(CreateUserDialog$1);
-Component$h.displayName = 'CreateUserDialog';
+Component$g.displayName = 'CreateUserDialog';
 
 var styles$l = function styles(theme) {
   return {
@@ -35548,10 +35576,10 @@ EditUserDialog.defaultProps = {
   }
 };
 
-var Component$g = withStyles(styles$k, {
+var Component$f = withStyles(styles$k, {
   name: 'VdtEditUserDialog'
 })(EditUserDialog);
-Component$g.displayName = 'EditUserDialog';
+Component$f.displayName = 'EditUserDialog';
 
 var styles$j = function styles(theme) {
   return {
@@ -35663,10 +35691,10 @@ CreateUserDialog.defaultProps = {
   onSubmit: undefined
 };
 
-var Component$f = withStyles(styles$i, {
+var Component$e = withStyles(styles$i, {
   name: 'VdtChangeUserPasswordDialog'
 })(CreateUserDialog);
-Component$f.displayName = 'ChangeUserPasswordDialog';
+Component$e.displayName = 'ChangeUserPasswordDialog';
 
 var styles$h = function styles(theme) {
   return {
@@ -35945,10 +35973,10 @@ UserRelationList.defaultProps = {
   addButtonText: 'Add'
 };
 
-var Component$e = withStyles(styles$h, {
+var Component$d = withStyles(styles$h, {
   name: 'VdtUserRelationList'
 })(UserRelationList);
-Component$e.displayName = 'UserRelationList';
+Component$d.displayName = 'UserRelationList';
 
 var styles$g = function styles(theme) {
   return {
@@ -36095,10 +36123,10 @@ UserAvatarButton.defaultProps = {
   localeSelectProps: {}
 };
 
-var Component$d = withStyles(styles$g, {
+var Component$c = withStyles(styles$g, {
   name: 'VdtUserAvatarButton'
 })(UserAvatarButton);
-Component$d.displayName = 'UserAvatarButton';
+Component$c.displayName = 'UserAvatarButton';
 
 var _excluded$2 = ["classes", "group", "columns", "onClick"];
 
@@ -36224,10 +36252,10 @@ GroupTable.defaultProps = {
   }
 };
 
-var Component$c = withStyles(styles$e, {
+var Component$b = withStyles(styles$e, {
   name: 'VdtGroupTable'
 })(GroupTable);
-Component$c.displayName = 'GroupTable';
+Component$b.displayName = 'GroupTable';
 
 var styles$d = function styles(theme) {
   return {
@@ -36519,13 +36547,13 @@ GroupDetails.defaultProps = {
   onRemoveFromParent: undefined,
   DetailsComponent: GroupData$1,
   DetailsProps: {},
-  UsersComponent: Component$e,
+  UsersComponent: Component$d,
   UsersProps: {},
-  RolesComponent: Component$j,
+  RolesComponent: Component$i,
   RolesProps: {},
-  ParentGroupsComponent: Component$j,
+  ParentGroupsComponent: Component$i,
   ParentGroupsProps: {},
-  ChildGroupsComponent: Component$j,
+  ChildGroupsComponent: Component$i,
   ChildGroupsProps: {},
   MenuComponent: GroupMenu,
   MenuProps: {},
@@ -36533,10 +36561,10 @@ GroupDetails.defaultProps = {
   lockedUsers: ['admin', 'vidinetviewer']
 };
 
-var Component$b = withStyles(styles$c, {
+var Component$a = withStyles(styles$c, {
   name: 'VdtGroupDetails'
 })(GroupDetails);
-Component$b.displayName = 'GroupDetails';
+Component$a.displayName = 'GroupDetails';
 
 function ownKeys(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; }
 
@@ -36819,10 +36847,10 @@ CreateGroupDialog.defaultProps = {
   CreateGroupFormProps: {}
 };
 
-var Component$a = withStyles(styles$a, {
+var Component$9 = withStyles(styles$a, {
   name: 'VdtCreateGroupDialog'
 })(CreateGroupDialog);
-Component$a.displayName = 'CreateGroupDialog';
+Component$9.displayName = 'CreateGroupDialog';
 
 var styles$9 = function styles(theme) {
   return {
@@ -36940,10 +36968,10 @@ EditGroupDialog.defaultProps = {
   EditGroupFormProps: {}
 };
 
-var Component$9 = withStyles(styles$8, {
+var Component$8 = withStyles(styles$8, {
   name: 'VdtEditGroupDialog'
 })(EditGroupDialog);
-Component$9.displayName = 'EditGroupDialog';
+Component$8.displayName = 'EditGroupDialog';
 
 var styles$7 = function styles() {
   return {
@@ -37091,15 +37119,10 @@ DragScroll.defaultProps = {
   classes: {}
 };
 
-var Component$8 = withStyles(styles$7, {
+var Component$7 = withStyles(styles$7, {
   name: 'VdtDragScroll'
 })(DragScroll);
-Component$8.displayName = 'DragScroll';
-
-var Component$7 = withStyles(styles$1L, {
-  name: 'VdtImageCollage'
-})(ImageCollage);
-Component$7.displayName = 'ImageCollage';
+Component$7.displayName = 'DragScroll';
 
 var actions = {
   DELETE: 'DELETE',
@@ -38116,4 +38139,4 @@ var Component = withStyles(styles, {
 })(EventTimeline);
 Component.displayName = 'EventTimeline';
 
-export { AddRelationDialog$1 as AddRelationDialog, Component$A as AddToCollectionDialog, AutocompleteConstraintField$1 as AutocompleteConstraintField, AutocompleteField$1 as AutocompleteField, BatonAnalysisDialog$1 as BatonAnalysisDialog, BatonFormComponent as BatonAnalysisForm, Component$n as BinList, Component$m as BinListMenu, ChangePasswordDialog$1 as ChangePasswordDialog, ChangePasswordForm$1 as ChangePasswordForm, Component$f as ChangeUserPasswordDialog, CheckboxField$1 as CheckboxField, CheckboxGroupField$1 as CheckboxGroupField, CollectionAccessTab$1 as CollectionAccessTab, Component$K as CollectionCard, Component$J as CollectionCardThumbnail, Component$y as CollectionContent, Component$C as CollectionCreateDialog, Component$I as CollectionGrid, Component$D as CollectionList, Component$E as CollectionListItem, CollectionMetadataEdit, CollectionMetadataTab$1 as CollectionMetadataTab, Component$H as CollectionRow, CollectionSearchPicker$1 as CollectionSearchPicker, Component$G as CollectionTable, Component$F as CollectionTreeList, Component$a as CreateGroupDialog, Component$h as CreateUserDialog, DateField$1 as DateField, DragAndDropContext, DragAndDropProvider, Component$8 as DragScroll, COLLECTION$3 as ENTITY_TREE_COLLECTION, ITEM$3 as ENTITY_TREE_ITEM, JOIN_CHARACTER$1 as ENTITY_TREE_JOIN_CHARACTER, ROOT as ENTITY_TREE_ROOT, Component$9 as EditGroupDialog, Component$g as EditUserDialog, EntityCard, EntityComment$1 as EntityComment, Component$o as EntityDeleteDialog, EntityGrid, EntityGridItemDraggable$1 as EntityGridItemDraggable, EntityTable, EntityTableRowDraggable$1 as EntityTableRowDraggable, EntityTree$1 as EntityTree, EntityTreeContext, EntityTreeList, Component$5 as Event, Component$4 as EventContainer, Component$3 as EventMarker, Component$2 as EventMarkerThumbnail, Component$1 as EventMarkerTimeline, Component as EventTimeline, ExpandedFormControlLabel$1 as ExpandedFormControlLabel, FILE, FieldGroupDesigner$1 as FieldGroupDesigner, FieldIcon$1 as FieldIcon, FilterCard$1 as FilterCard, FilterForm, FilterFormLabel$1 as FilterFormLabel, FolderListTree, FolderTree, Component$b as GroupDetails, Component$j as GroupRelationList, Component$c as GroupTable, Component$7 as ImageCollage, ItemAccessTab$1 as ItemAccessTab, ItemCard, ItemCompoundMetadataTab$1 as ItemCompoundMetadataTab, ItemCompoundMetadataTable$1 as ItemCompoundMetadataTable, ItemFieldGroupTab$1 as ItemFieldGroupTab, ItemFileShareDialog$1 as ItemFileShareDialog, ItemGrid, ItemGridDroppable, ItemImagePlayer$1 as ItemImagePlayer, Component$w as ItemList, Component$x as ItemListItem, ItemMetadataFieldGroupRow, ItemMetadataFieldRow$1 as ItemMetadataFieldRow, ItemMetadataFieldRow$1 as ItemMetadataFormRow, ItemMetadataFormTable, ItemMetadataTab$1 as ItemMetadataTab, ItemParentsTab$1 as ItemParentsTab, Component$t as ItemPlayer, ItemPoster, ItemPosterTab, ItemRelationRemoveDialog$1 as ItemRelationRemoveDialog, ItemRelationsTab$1 as ItemRelationsTab, ItemRow, ItemSearchPicker$1 as ItemSearchPicker, ItemShapeTab, Component$R as ItemShapeTable, Component$u as ItemSidecarDialog, ItemSidecarDownload, ItemSidecarUpload, ItemSourceTab, Component$Q as ItemSourceTable, ItemTable, Component$v as ItemTabs, ItemTimespan as ItemTimespanTab, ItemTreeItem$1 as ItemTreeItem, ItemVideoPlayer$1 as ItemVideoPlayer, JOIN_CHARACTER, JobCard$1 as JobCard, JobDataTable$1 as JobDataTable, JobFooter, JobFooterContext, JobFooterContextProvider, JobList$1 as JobList, JobRow$1 as JobRow, JobRowButton, JobTable$1 as JobTable, JobTaskTable$1 as JobTaskTable, LOAD_MORE, LayoutButtonGroup$1 as LayoutButtonGroup, Component$T as LoginForm, MediaBadge$1 as MediaBadge, MediaBadges$1 as MediaBadges, Component$L as MediaCard, MediaCardActions, Component$M as MediaCardAvatar, MediaCardCard$1 as MediaCardCard, MediaCardCheckbox, MediaCardContent, MediaCardDurationLabel, Component$l as MediaCardFullWidth, MediaCardHeader, MediaCardMenu, Component$O as MediaCardThumbnail, Component$P as MediaCardThumbnailLabel, Component$N as MimeTypeIcon, PREFIX, SearchPagination as Pagination, SearchPaginationActions as PaginationActions, QueryBetween, Component$q as QueryBuilder, Component$p as QueryBuilderCard, QueryContains, QueryEntry, QueryEquals, QueryField, QueryGroup, QueryInput, QueryOperator, RadioField$1 as RadioField, Component$z as RemoveFromCollectionDialog, STORAGE, SavedSearch$1 as SavedSearch, FolderRow$1 as SavedSearchFolder, Component$r as SearchField, Component$B as SearchInput, SearchInputFieldSelect$1 as SearchInputFieldSelect, SearchResultRow, SearchResultTable, SearchSuggestions$1 as SearchSuggestions, SelectField$1 as SelectField, SelectedEntityWrapper, SelectedFile, SelectedFileWrapper, SelectedStorage, SelectedStorageWrapper, Component$6 as SelectedToolbar, ShapeTagCard$1 as ShapeTagCard, ShapeTagListAccordion$1 as ShapeTagListAccordion, SliderField, Component$S as Sort, SortMenuItem, Component$s as SpellCheck, Storage, StorageList, StorageListTree, StorageTree, SubmitButton, SwitchField$1 as SwitchField, TagField$1 as TagField, TextField$1 as TextField, ThemeContext, ThemeProvider, TranscodeDialog$1 as TranscodeDialog, Upload$1 as Upload, UploadEditor$1 as UploadEditor, UploadForm$1 as UploadForm, UploadListItem$1 as UploadListItem, Component$d as UserAvatarButton, Component$i as UserDetails, Component$e as UserRelationList, Component$k as UserTable, extractEntityInfo, onGetToken, useConfirmationDialog, useDraggedComponent, useMediaCardContext, useMenu, useSnackbarAlert, useThemeContext, withDrag, withDrop };
+export { AddRelationDialog$1 as AddRelationDialog, Component$z as AddToCollectionDialog, AutocompleteConstraintField$1 as AutocompleteConstraintField, AutocompleteField$1 as AutocompleteField, BatonAnalysisDialog$1 as BatonAnalysisDialog, BatonFormComponent as BatonAnalysisForm, Component$m as BinList, Component$l as BinListMenu, ChangePasswordDialog$1 as ChangePasswordDialog, ChangePasswordForm$1 as ChangePasswordForm, Component$e as ChangeUserPasswordDialog, CheckboxField$1 as CheckboxField, CheckboxGroupField$1 as CheckboxGroupField, CollectionAccessTab$1 as CollectionAccessTab, Component$L as CollectionCard, Component$J as CollectionCardThumbnail, Component$x as CollectionContent, Component$C as CollectionCreateDialog, Component$I as CollectionGrid, Component$D as CollectionList, Component$E as CollectionListItem, CollectionMetadataEdit, CollectionMetadataTab$1 as CollectionMetadataTab, Component$H as CollectionRow, Component$A as CollectionSearchPicker, Component$G as CollectionTable, Component$F as CollectionTreeList, Component$9 as CreateGroupDialog, Component$g as CreateUserDialog, DateField$1 as DateField, DragAndDropContext, DragAndDropProvider, Component$7 as DragScroll, COLLECTION$3 as ENTITY_TREE_COLLECTION, ITEM$3 as ENTITY_TREE_ITEM, JOIN_CHARACTER$1 as ENTITY_TREE_JOIN_CHARACTER, ROOT as ENTITY_TREE_ROOT, Component$8 as EditGroupDialog, Component$f as EditUserDialog, EntityCard, EntityComment$1 as EntityComment, Component$n as EntityDeleteDialog, EntityGrid, EntityGridItemDraggable$1 as EntityGridItemDraggable, EntityTable, EntityTableRowDraggable$1 as EntityTableRowDraggable, EntityTree$1 as EntityTree, EntityTreeContext, EntityTreeList, Component$5 as Event, Component$4 as EventContainer, Component$3 as EventMarker, Component$2 as EventMarkerThumbnail, Component$1 as EventMarkerTimeline, Component as EventTimeline, ExpandedFormControlLabel$1 as ExpandedFormControlLabel, FILE, FieldGroupDesigner$1 as FieldGroupDesigner, FieldIcon$1 as FieldIcon, FilterCard$1 as FilterCard, FilterForm, FilterFormLabel$1 as FilterFormLabel, FolderListTree, FolderTree, Component$a as GroupDetails, Component$i as GroupRelationList, Component$b as GroupTable, Component$K as ImageCollage, ItemAccessTab$1 as ItemAccessTab, ItemCard, ItemCompoundMetadataTab$1 as ItemCompoundMetadataTab, ItemCompoundMetadataTable$1 as ItemCompoundMetadataTable, ItemFieldGroupTab$1 as ItemFieldGroupTab, ItemFileShareDialog$1 as ItemFileShareDialog, ItemGrid, ItemGridDroppable, ItemImagePlayer$1 as ItemImagePlayer, Component$v as ItemList, Component$w as ItemListItem, ItemMetadataFieldGroupRow, ItemMetadataFieldRow$1 as ItemMetadataFieldRow, ItemMetadataFieldRow$1 as ItemMetadataFormRow, ItemMetadataFormTable, ItemMetadataTab$1 as ItemMetadataTab, ItemParentsTab$1 as ItemParentsTab, Component$s as ItemPlayer, ItemPoster, ItemPosterTab, ItemRelationRemoveDialog$1 as ItemRelationRemoveDialog, ItemRelationsTab$1 as ItemRelationsTab, ItemRow, ItemSearchPicker$1 as ItemSearchPicker, ItemShapeTab, Component$S as ItemShapeTable, Component$t as ItemSidecarDialog, ItemSidecarDownload, ItemSidecarUpload, ItemSourceTab, Component$R as ItemSourceTable, ItemTable, Component$u as ItemTabs, ItemTimespan as ItemTimespanTab, ItemTreeItem$1 as ItemTreeItem, ItemVideoPlayer$1 as ItemVideoPlayer, JOIN_CHARACTER, JobCard$1 as JobCard, JobDataTable$1 as JobDataTable, JobFooter, JobFooterContext, JobFooterContextProvider, JobList$1 as JobList, JobRow$1 as JobRow, JobRowButton, JobTable$1 as JobTable, JobTaskTable$1 as JobTaskTable, LOAD_MORE, LayoutButtonGroup$1 as LayoutButtonGroup, Component$U as LoginForm, MediaBadge$1 as MediaBadge, MediaBadges$1 as MediaBadges, Component$M as MediaCard, MediaCardActions, Component$N as MediaCardAvatar, MediaCardCard$1 as MediaCardCard, MediaCardCheckbox, MediaCardContent, MediaCardDurationLabel, Component$k as MediaCardFullWidth, MediaCardHeader, MediaCardMenu, Component$P as MediaCardThumbnail, Component$Q as MediaCardThumbnailLabel, Component$O as MimeTypeIcon, PREFIX, SearchPagination as Pagination, SearchPaginationActions as PaginationActions, QueryBetween, Component$p as QueryBuilder, Component$o as QueryBuilderCard, QueryContains, QueryEntry, QueryEquals, QueryField, QueryGroup, QueryInput, QueryOperator, RadioField$1 as RadioField, Component$y as RemoveFromCollectionDialog, STORAGE, SavedSearch$1 as SavedSearch, FolderRow$1 as SavedSearchFolder, Component$q as SearchField, Component$B as SearchInput, SearchInputFieldSelect$1 as SearchInputFieldSelect, SearchResultRow, SearchResultTable, SearchSuggestions$1 as SearchSuggestions, SelectField$1 as SelectField, SelectedEntityWrapper, SelectedFile, SelectedFileWrapper, SelectedStorage, SelectedStorageWrapper, Component$6 as SelectedToolbar, ShapeTagCard$1 as ShapeTagCard, ShapeTagListAccordion$1 as ShapeTagListAccordion, SliderField, Component$T as Sort, SortMenuItem, Component$r as SpellCheck, Storage, StorageList, StorageListTree, StorageTree, SubmitButton, SwitchField$1 as SwitchField, TagField$1 as TagField, TextField$1 as TextField, ThemeContext, ThemeProvider, TranscodeDialog$1 as TranscodeDialog, Upload$1 as Upload, UploadEditor$1 as UploadEditor, UploadForm$1 as UploadForm, UploadListItem$1 as UploadListItem, Component$c as UserAvatarButton, Component$h as UserDetails, Component$d as UserRelationList, Component$j as UserTable, extractEntityInfo, onGetToken, useConfirmationDialog, useDraggedComponent, useMediaCardContext, useMenu, useSnackbarAlert, useThemeContext, withDrag, withDrop };