@vidispine/vdt-mui 22.4.0-pre.6 → 22.4.0-pre.7

package/dist/index.es.js

@@ -7,12 +7,13 @@ import { Fragment, forwardRef, createElement, useMemo, useState, useCallback, us
 import clsx from 'clsx';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import PropTypes from 'prop-types';
-import { Skeleton, Avatar, ListItemAvatar, ListItemButton, ListItemSecondaryAction, IconButton, ListItemText, ListItem, Typography, List, ListSubheader, createTheme, ThemeProvider as ThemeProvider$1, FormGroup, FormControlLabel, Checkbox, FormControl, FormHelperText, InputLabel, Input, FilledInput, OutlinedInput, TextField, MenuItem, CircularProgress, Autocomplete, Chip, RadioGroup as RadioGroup$1, Radio, Switch, Slider as Slider$1 } from '@mui/material';
+import { Skeleton, Avatar, ListItemAvatar, ListItemButton, ListItemSecondaryAction, IconButton, ListItemText, ListItem, Typography, List, ListSubheader, createTheme, ThemeProvider as ThemeProvider$1, Box, Stack, TablePagination as TablePagination$1, ButtonBase, MenuItem, Menu, FormGroup, FormControlLabel, Checkbox, FormControl, FormHelperText, InputLabel, Input, FilledInput, OutlinedInput, TextField, CircularProgress, Autocomplete, Chip, RadioGroup as RadioGroup$1, Radio, Switch, Slider as Slider$1 } from '@mui/material';
 import VidispinePropTypes from '@vidispine/proptypes';
-import { parseMetadataType } from '@vidispine/vdt-js';
-import { Folder, NoteAdd, Audiotrack, Image, Movie, InsertDriveFile, LibraryBooks, LibraryMusic, VideoLibrary, PhotoLibrary, Delete } from '@mui/icons-material';
+import { parseMetadataType, parseShapeType, parseTranscodePreset } from '@vidispine/vdt-js';
+import { Folder, NoteAdd, Audiotrack, Image, Movie, InsertDriveFile, LibraryBooks, LibraryMusic, VideoLibrary, PhotoLibrary, Delete, FirstPage, KeyboardArrowLeft, KeyboardArrowRight, LastPage, ArrowDropDown } from '@mui/icons-material';
 import CssBaseline from '@mui/material/CssBaseline';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { alpha } from '@mui/material/styles';
 
 var uuidv4 = function uuidv4() {
   return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, function (c) {
@@ -22,11 +23,11 @@ var uuidv4 = function uuidv4() {
   });
 };
 
-var _excluded$c = ["className", "classes", "components", "componentProps"];
+var _excluded$g = ["className", "classes", "components", "componentProps"];
 
-function ownKeys$v(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 ownKeys$D(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$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 pascalToCamelCase = function pascalToCamelCase(str) {
   if (str === undefined || typeof str !== 'string') return undefined;
@@ -54,9 +55,9 @@ var withOverrideRef = function withOverrideRef(Component) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
     var _props$componentProps;
 
-    return /*#__PURE__*/jsx(Component, _objectSpread$v({
-      componentProps: _objectSpread$v(_objectSpread$v({}, (props === null || props === void 0 ? void 0 : props.componentProps) || {}), {}, {
-        root: _objectSpread$v(_objectSpread$v({}, (props === null || props === void 0 ? void 0 : (_props$componentProps = props.componentProps) === null || _props$componentProps === void 0 ? void 0 : _props$componentProps.root) || {}), {}, {
+    return /*#__PURE__*/jsx(Component, _objectSpread$D({
+      componentProps: _objectSpread$D(_objectSpread$D({}, (props === null || props === void 0 ? void 0 : props.componentProps) || {}), {}, {
+        root: _objectSpread$D(_objectSpread$D({}, (props === null || props === void 0 ? void 0 : (_props$componentProps = props.componentProps) === null || _props$componentProps === void 0 ? void 0 : _props$componentProps.root) || {}), {}, {
           ref: ref
         })
       })
@@ -71,7 +72,7 @@ var withOverrides = function withOverrides(defaultComponents, _ref2) {
           classes = props.classes,
           components = props.components,
           componentProps = props.componentProps,
-          rest = _objectWithoutProperties(props, _excluded$c);
+          rest = _objectWithoutProperties(props, _excluded$g);
 
       var childComponents = Object.entries(defaultComponents || {}).map(function (_ref3) {
         var _ref4 = _slicedToArray(_ref3, 2),
@@ -83,7 +84,7 @@ var withOverrides = function withOverrides(defaultComponents, _ref2) {
         } : components === null || components === void 0 ? void 0 : components[componentName];
         return _defineProperty({}, componentName, overriddenComponent || defaultComponent);
       }).reduce(function (curr, obj) {
-        return _objectSpread$v(_objectSpread$v({}, curr), obj);
+        return _objectSpread$D(_objectSpread$D({}, curr), obj);
       }, {});
       var childComponentsProps = Object.entries(childComponents).map(function (_ref6) {
         var _ref7 = _slicedToArray(_ref6, 1),
@@ -96,13 +97,13 @@ var withOverrides = function withOverrides(defaultComponents, _ref2) {
           className: className,
           classes: classes
         });
-        return _defineProperty({}, pascalToCamelCase(componentName), _objectSpread$v(_objectSpread$v({}, overrideProps), {}, {
+        return _defineProperty({}, pascalToCamelCase(componentName), _objectSpread$D(_objectSpread$D({}, overrideProps), {}, {
           className: overrideClassName
         }));
       }).reduce(function (curr, obj) {
-        return _objectSpread$v(_objectSpread$v({}, curr), obj);
+        return _objectSpread$D(_objectSpread$D({}, curr), obj);
       }, {});
-      return /*#__PURE__*/jsx(Component, _objectSpread$v({
+      return /*#__PURE__*/jsx(Component, _objectSpread$D({
         components: childComponents,
         componentProps: childComponentsProps
       }, rest));
@@ -110,23 +111,23 @@ var withOverrides = function withOverrides(defaultComponents, _ref2) {
   };
 };
 
-var _excluded$b = ["mediaType"];
+var _excluded$f = ["mediaType"];
 
-function ownKeys$u(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 ownKeys$C(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$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; }
+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; }
 
 function CollectionEntityIcon(_ref) {
   _ref.mediaType;
-      var props = _objectWithoutProperties(_ref, _excluded$b);
+      var props = _objectWithoutProperties(_ref, _excluded$f);
 
-  return /*#__PURE__*/jsx(Folder, _objectSpread$u({}, props));
+  return /*#__PURE__*/jsx(Folder, _objectSpread$C({}, props));
 }
 
-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 ownKeys$B(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$i = function styles() {
+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$o = function styles() {
   return {
     root: {
       display: 'flex'
@@ -139,11 +140,11 @@ var styles$i = function styles() {
   };
 };
 var MediaIconRoot = /*#__PURE__*/forwardRef(function (props, ref) {
-  return /*#__PURE__*/createElement('span', _objectSpread$t({
+  return /*#__PURE__*/createElement('span', _objectSpread$B({
     ref: ref
   }, props));
 });
-var defaultComponents$i = {
+var defaultComponents$o = {
   Root: MediaIconRoot,
   PlaceholderIcon: NoteAdd,
   AudioIcon: Audiotrack,
@@ -151,7 +152,7 @@ var defaultComponents$i = {
   VideoIcon: Movie,
   FileIcon: InsertDriveFile
 };
-var name$i = 'VdtMediaIcon';
+var name$o = 'VdtMediaIcon';
 function MediaIcon(_ref) {
   var type = _ref.type,
       components = _ref.components,
@@ -163,8 +164,8 @@ function MediaIcon(_ref) {
       VideoIcon = components.VideoIcon,
       FileIcon = components.FileIcon;
   var lowerCaseType = (type || '').toLowerCase();
-  return /*#__PURE__*/jsxs(Root, _objectSpread$t(_objectSpread$t({}, componentProps.root), {}, {
-    children: [lowerCaseType === 'video' && /*#__PURE__*/jsx(VideoIcon, _objectSpread$t({}, componentProps.videoIcon)), lowerCaseType === 'audio' && /*#__PURE__*/jsx(AudioIcon, _objectSpread$t({}, componentProps.audioIcon)), lowerCaseType === 'image' && /*#__PURE__*/jsx(ImageIcon, _objectSpread$t({}, componentProps.imageIcon)), !['video', 'audio', 'image'].includes(lowerCaseType) && (typeof mediaType === 'string' ? /*#__PURE__*/jsx(FileIcon, _objectSpread$t({}, componentProps.fileIcon)) : /*#__PURE__*/jsx(PlaceholderIcon, _objectSpread$t({}, componentProps.placeholderIcon)))]
+  return /*#__PURE__*/jsxs(Root, _objectSpread$B(_objectSpread$B({}, componentProps.root), {}, {
+    children: [lowerCaseType === 'video' && /*#__PURE__*/jsx(VideoIcon, _objectSpread$B({}, componentProps.videoIcon)), lowerCaseType === 'audio' && /*#__PURE__*/jsx(AudioIcon, _objectSpread$B({}, componentProps.audioIcon)), lowerCaseType === 'image' && /*#__PURE__*/jsx(ImageIcon, _objectSpread$B({}, componentProps.imageIcon)), !['video', 'audio', 'image'].includes(lowerCaseType) && (typeof mediaType === 'string' ? /*#__PURE__*/jsx(FileIcon, _objectSpread$B({}, componentProps.fileIcon)) : /*#__PURE__*/jsx(PlaceholderIcon, _objectSpread$B({}, componentProps.placeholderIcon)))]
   }));
 }
 MediaIcon.propTypes = {
@@ -217,40 +218,40 @@ MediaIcon.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$i = withOverrides(defaultComponents$i, {
-  name: name$i
+var ComponentWithOverrides$o = withOverrides(defaultComponents$o, {
+  name: name$o
 })(MediaIcon);
-var Component$i = withStyles(styles$i, {
-  name: name$i
-})(ComponentWithOverrides$i);
-Component$i.displayName = 'MediaIcon';
+var Component$o = withStyles(styles$o, {
+  name: name$o
+})(ComponentWithOverrides$o);
+Component$o.displayName = 'MediaIcon';
 
-var _excluded$a = ["mediaType"];
+var _excluded$e = ["mediaType"];
 
-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; }
+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; }
 
-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; }
+function _objectSpread$A(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$A(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$A(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function ItemEntityIcon(_ref) {
   var mediaType = _ref.mediaType,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
-  return mediaType && typeof mediaType === 'string' ? /*#__PURE__*/jsx(Component$i, _objectSpread$s({
+  return mediaType && typeof mediaType === 'string' ? /*#__PURE__*/jsx(Component$o, _objectSpread$A({
     type: mediaType
-  }, props)) : /*#__PURE__*/jsx(InsertDriveFile, _objectSpread$s({}, props));
+  }, props)) : /*#__PURE__*/jsx(InsertDriveFile, _objectSpread$A({}, props));
 }
 
-var _excluded$9 = ["mediaType"];
+var _excluded$d = ["mediaType"];
 
-function ownKeys$r(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 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$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 
 function LibraryEntityIcon(_ref) {
   var mediaType = _ref.mediaType,
-      props = _objectWithoutProperties(_ref, _excluded$9);
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
-  return /*#__PURE__*/jsx(Component$i, _objectSpread$r({
+  return /*#__PURE__*/jsx(Component$o, _objectSpread$z({
     type: mediaType,
     components: {
       PlaceholderIcon: LibraryBooks,
@@ -262,23 +263,23 @@ function LibraryEntityIcon(_ref) {
   }, props));
 }
 
-var _excluded$8 = ["mediaType"];
+var _excluded$c = ["mediaType"];
 
-function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function 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$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 
 function PlaceholderEntityIcon(_ref) {
   _ref.mediaType;
-      var props = _objectWithoutProperties(_ref, _excluded$8);
+      var props = _objectWithoutProperties(_ref, _excluded$c);
 
-  return /*#__PURE__*/jsx(NoteAdd, _objectSpread$q({}, props));
+  return /*#__PURE__*/jsx(NoteAdd, _objectSpread$y({}, props));
 }
 
-function ownKeys$p(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 ownKeys$x(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$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$h = function styles(theme) {
+function _objectSpread$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$n = function styles(theme) {
   return {
     root: {
       display: 'flex',
@@ -291,18 +292,18 @@ var styles$h = function styles(theme) {
   };
 };
 var EntityIconRoot = /*#__PURE__*/forwardRef(function (props, ref) {
-  return /*#__PURE__*/createElement('span', _objectSpread$p({
+  return /*#__PURE__*/createElement('span', _objectSpread$x({
     ref: ref
   }, props));
 });
-var defaultComponents$h = {
+var defaultComponents$n = {
   Root: EntityIconRoot,
   PlaceholderIcon: PlaceholderEntityIcon,
   ItemIcon: ItemEntityIcon,
   CollectionIcon: CollectionEntityIcon,
   LibraryIcon: LibraryEntityIcon
 };
-var name$h = 'VdtEntityIcon';
+var name$n = 'VdtEntityIcon';
 function EntityIcon(_ref) {
   var entityType = _ref.entityType,
       mediaType = _ref.mediaType,
@@ -314,14 +315,14 @@ function EntityIcon(_ref) {
       CollectionIcon = components.CollectionIcon,
       LibraryIcon = components.LibraryIcon;
   var lowerCaseEntityType = entityType === null || entityType === void 0 ? void 0 : entityType.toLowerCase();
-  return /*#__PURE__*/jsxs(Root, _objectSpread$p(_objectSpread$p({}, componentProps.root), {}, {
-    children: [lowerCaseEntityType === 'item' && /*#__PURE__*/jsx(ItemIcon, _objectSpread$p({
+  return /*#__PURE__*/jsxs(Root, _objectSpread$x(_objectSpread$x({}, componentProps.root), {}, {
+    children: [lowerCaseEntityType === 'item' && /*#__PURE__*/jsx(ItemIcon, _objectSpread$x({
       mediaType: mediaType
-    }, componentProps.itemIcon)), lowerCaseEntityType === 'collection' && /*#__PURE__*/jsx(CollectionIcon, _objectSpread$p({
+    }, componentProps.itemIcon)), lowerCaseEntityType === 'collection' && /*#__PURE__*/jsx(CollectionIcon, _objectSpread$x({
       mediaType: mediaType
-    }, componentProps.collectionIcon)), lowerCaseEntityType === 'library' && /*#__PURE__*/jsx(LibraryIcon, _objectSpread$p({
+    }, componentProps.collectionIcon)), lowerCaseEntityType === 'library' && /*#__PURE__*/jsx(LibraryIcon, _objectSpread$x({
       mediaType: mediaType
-    }, componentProps.libraryIcon)), !['item', 'collection', 'library'].includes(lowerCaseEntityType) && /*#__PURE__*/jsx(PlaceholderIcon, _objectSpread$p({}, componentProps.placeholderIcon))]
+    }, componentProps.libraryIcon)), !['item', 'collection', 'library'].includes(lowerCaseEntityType) && /*#__PURE__*/jsx(PlaceholderIcon, _objectSpread$x({}, componentProps.placeholderIcon))]
   }));
 }
 EntityIcon.propTypes = {
@@ -377,17 +378,17 @@ EntityIcon.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$h = withOverrides(defaultComponents$h, {
-  name: name$h
+var ComponentWithOverrides$n = withOverrides(defaultComponents$n, {
+  name: name$n
 })(EntityIcon);
-var Component$h = withStyles(styles$h, {
-  name: name$h
-})(ComponentWithOverrides$h);
-Component$h.displayName = 'EntityIcon';
+var Component$n = withStyles(styles$n, {
+  name: name$n
+})(ComponentWithOverrides$n);
+Component$n.displayName = 'EntityIcon';
 
-function ownKeys$o(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 ownKeys$w(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$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function LoadingSlot(_ref) {
   var variant = _ref.variant;
@@ -401,7 +402,7 @@ function LoadingSlot(_ref) {
   });
 }
 
-var styles$g = function styles(theme) {
+var styles$m = function styles(theme) {
   return {
     root: {
       transition: 'background-color .2s ease-out',
@@ -412,11 +413,11 @@ var styles$g = function styles(theme) {
     }
   };
 };
-var defaultComponents$g = {
+var defaultComponents$m = {
   Root: Avatar,
-  Icon: Component$h
+  Icon: Component$n
 };
-var name$g = 'VdtEntityAvatar';
+var name$m = 'VdtEntityAvatar';
 function EntityAvatar(_ref2) {
   var entityType = _ref2.entityType,
       mediaType = _ref2.mediaType,
@@ -427,7 +428,7 @@ function EntityAvatar(_ref2) {
       componentProps = _ref2.componentProps;
   var Avatar = components.Root,
       Icon = components.Icon;
-  return /*#__PURE__*/jsx(Avatar, _objectSpread$o(_objectSpread$o({
+  return /*#__PURE__*/jsx(Avatar, _objectSpread$w(_objectSpread$w({
     variant: variant,
     sx: isLoading ? {
       backgroundColor: 'unset !important'
@@ -435,7 +436,7 @@ function EntityAvatar(_ref2) {
   }, componentProps.root), {}, {
     children: isLoading ? loadingSlot && loadingSlot({
       variant: variant
-    }) : /*#__PURE__*/jsx(Icon, _objectSpread$o(_objectSpread$o({
+    }) : /*#__PURE__*/jsx(Icon, _objectSpread$w(_objectSpread$w({
       entityType: entityType
     }, mediaType ? {
       mediaType: mediaType
@@ -508,26 +509,26 @@ EntityAvatar.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$g = withOverrides(defaultComponents$g, {
-  name: name$g
+var ComponentWithOverrides$m = withOverrides(defaultComponents$m, {
+  name: name$m
 })(EntityAvatar);
-var Component$g = withStyles(styles$g, {
-  name: name$g
-})(ComponentWithOverrides$g);
-Component$g.displayName = 'EntityAvatar';
+var Component$m = withStyles(styles$m, {
+  name: name$m
+})(ComponentWithOverrides$m);
+Component$m.displayName = 'EntityAvatar';
 
-var _excluded$7 = ["itemType", "collectionType", "isLoading", "variant"];
+var _excluded$b = ["itemType", "collectionType", "isLoading", "variant"];
 
-function ownKeys$n(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 ownKeys$v(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$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function EntityListItemAvatar(_ref) {
   var itemType = _ref.itemType,
       collectionType = _ref.collectionType,
       isLoading = _ref.isLoading,
       variant = _ref.variant,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+      props = _objectWithoutProperties(_ref, _excluded$b);
 
   var _ref2 = itemType || collectionType || {},
       metadata = _ref2.metadata;
@@ -541,8 +542,8 @@ function EntityListItemAvatar(_ref) {
       mimeType = _parseMetadataType.mimeType;
 
   var mediaType = typeof mimeType === 'string' ? mimeType.split('/')[0] : undefined;
-  return /*#__PURE__*/jsx(ListItemAvatar, _objectSpread$n(_objectSpread$n({}, props), {}, {
-    children: /*#__PURE__*/jsx(Component$g, {
+  return /*#__PURE__*/jsx(ListItemAvatar, _objectSpread$v(_objectSpread$v({}, props), {}, {
+    children: /*#__PURE__*/jsx(Component$m, {
       entityType: entityType,
       mediaType: mediaType,
       isLoading: isLoading,
@@ -551,18 +552,18 @@ function EntityListItemAvatar(_ref) {
   }));
 }
 
-var _excluded$6 = ["itemType", "collectionType", "onClick", "isLoading"];
+var _excluded$a = ["itemType", "collectionType", "onClick", "isLoading"];
 
-function ownKeys$m(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 ownKeys$u(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$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 
 function EntityListItemButton(_ref) {
   var itemType = _ref.itemType,
       collectionType = _ref.collectionType,
       _onClick = _ref.onClick,
       isLoading = _ref.isLoading,
-      props = _objectWithoutProperties(_ref, _excluded$6);
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
   var entity = itemType && {
     itemType: itemType
@@ -571,7 +572,7 @@ function EntityListItemButton(_ref) {
   };
   var isClickable = !isLoading && !!_onClick;
   var OptionalButtonComponent = isClickable ? ListItemButton : Fragment;
-  var OptionalButtonProps = isClickable ? _objectSpread$m({
+  var OptionalButtonProps = isClickable ? _objectSpread$u({
     role: undefined,
     onClick: function onClick(e) {
       return _onClick(e, entity);
@@ -579,14 +580,14 @@ function EntityListItemButton(_ref) {
   }, props) : {
     children: props === null || props === void 0 ? void 0 : props.children
   };
-  return /*#__PURE__*/jsx(OptionalButtonComponent, _objectSpread$m({}, OptionalButtonProps));
+  return /*#__PURE__*/jsx(OptionalButtonComponent, _objectSpread$u({}, OptionalButtonProps));
 }
 
-var _excluded$5 = ["itemType", "collectionType", "onDelete", "isLoading"];
+var _excluded$9 = ["itemType", "collectionType", "onDelete", "isLoading"];
 
-function ownKeys$l(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 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$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 
 function LoadingDelete() {
   return /*#__PURE__*/jsx("div", {
@@ -605,7 +606,7 @@ function EntityListItemSecondaryAction(_ref) {
       collectionType = _ref.collectionType,
       onDelete = _ref.onDelete,
       isLoading = _ref.isLoading,
-      props = _objectWithoutProperties(_ref, _excluded$5);
+      props = _objectWithoutProperties(_ref, _excluded$9);
 
   var entity = itemType && {
     itemType: itemType
@@ -619,7 +620,7 @@ function EntityListItemSecondaryAction(_ref) {
     return onDelete(e, entity);
   };
 
-  return /*#__PURE__*/jsx(ListItemSecondaryAction, _objectSpread$l(_objectSpread$l({}, props), {}, {
+  return /*#__PURE__*/jsx(ListItemSecondaryAction, _objectSpread$t(_objectSpread$t({}, props), {}, {
     children: onDelete && (isLoading ? /*#__PURE__*/jsx(LoadingDelete, {}) : /*#__PURE__*/jsx(IconButton, {
       onClick: handleDelete,
       children: /*#__PURE__*/jsx(Delete, {})
@@ -627,11 +628,11 @@ function EntityListItemSecondaryAction(_ref) {
   }));
 }
 
-var _excluded$4 = ["itemType", "collectionType", "primary", "secondary", "isLoading"];
+var _excluded$8 = ["itemType", "collectionType", "primary", "secondary", "isLoading"];
 
-function ownKeys$k(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 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; }
 
-function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 
 function EntityListItemText(_ref) {
   var itemType = _ref.itemType,
@@ -639,7 +640,7 @@ function EntityListItemText(_ref) {
       primary = _ref.primary,
       secondary = _ref.secondary,
       isLoading = _ref.isLoading,
-      props = _objectWithoutProperties(_ref, _excluded$4);
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
   var _ref2 = itemType || collectionType || {},
       id = _ref2.id;
@@ -677,7 +678,7 @@ function EntityListItemText(_ref) {
 
   var primaryText = getText(primary);
   var secondaryText = getText(secondary);
-  return /*#__PURE__*/jsx(ListItemText, _objectSpread$k({
+  return /*#__PURE__*/jsx(ListItemText, _objectSpread$s({
     primary: isLoading ? /*#__PURE__*/jsx(Skeleton, {
       width: 60
     }) : primaryText || id,
@@ -687,10 +688,10 @@ function EntityListItemText(_ref) {
   }, props));
 }
 
-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; }
+function ownKeys$r(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$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$f = function styles() {
+function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$l = function styles() {
   return {
     root: {},
     listItemButton: {},
@@ -699,14 +700,14 @@ var styles$f = function styles() {
     listItemSecondaryAction: {}
   };
 };
-var defaultComponents$f = {
+var defaultComponents$l = {
   Root: ListItem,
   ListItemButton: EntityListItemButton,
   ListItemAvatar: EntityListItemAvatar,
   ListItemText: EntityListItemText,
   ListItemSecondaryAction: EntityListItemSecondaryAction
 };
-var name$f = 'VdtCollectionListItem';
+var name$l = 'VdtCollectionListItem';
 function CollectionListItem(_ref) {
   var collectionType = _ref.collectionType,
       primary = _ref.primary,
@@ -723,25 +724,25 @@ function CollectionListItem(_ref) {
       ListItemButton = components.ListItemButton,
       ListItemSecondaryAction = components.ListItemSecondaryAction;
   var isClickable = !isLoading && !!onClick && !!ListItemButton;
-  return /*#__PURE__*/jsxs(ListItem, _objectSpread$j(_objectSpread$j({
+  return /*#__PURE__*/jsxs(ListItem, _objectSpread$r(_objectSpread$r({
     disablePadding: isClickable
   }, componentProps.root), {}, {
-    children: [/*#__PURE__*/jsxs(ListItemButton, _objectSpread$j(_objectSpread$j({
+    children: [/*#__PURE__*/jsxs(ListItemButton, _objectSpread$r(_objectSpread$r({
       collectionType: collectionType,
       onClick: onClick,
       isLoading: isLoading
     }, componentProps.listItemButton), {}, {
-      children: [/*#__PURE__*/jsx(ListItemAvatar, _objectSpread$j({
+      children: [/*#__PURE__*/jsx(ListItemAvatar, _objectSpread$r({
         collectionType: collectionType,
         variant: avatarVariant,
         isLoading: isLoading
-      }, componentProps.listItemAvatar)), /*#__PURE__*/jsx(ListItemText, _objectSpread$j({
+      }, componentProps.listItemAvatar)), /*#__PURE__*/jsx(ListItemText, _objectSpread$r({
         collectionType: collectionType,
         primary: primary,
         secondary: secondary,
         isLoading: isLoading
       }, componentProps.listItemText))]
-    })), /*#__PURE__*/jsx(ListItemSecondaryAction, _objectSpread$j({
+    })), /*#__PURE__*/jsx(ListItemSecondaryAction, _objectSpread$r({
       collectionType: collectionType,
       onDelete: onDelete,
       isLoading: isLoading
@@ -845,17 +846,17 @@ CollectionListItem.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$f = withOverrides(defaultComponents$f, {
-  name: name$f
+var ComponentWithOverrides$l = withOverrides(defaultComponents$l, {
+  name: name$l
 })(CollectionListItem);
-var Component$f = withStyles(styles$f, {
-  name: name$f
-})(ComponentWithOverrides$f);
-Component$f.displayName = 'CollectionListItem';
+var Component$l = withStyles(styles$l, {
+  name: name$l
+})(ComponentWithOverrides$l);
+Component$l.displayName = 'CollectionListItem';
 
-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 ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$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; }
+function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function EmptySlot$2() {
   return /*#__PURE__*/jsx(Typography, {
@@ -863,7 +864,7 @@ function EmptySlot$2() {
   });
 }
 
-var styles$e = function styles() {
+var styles$k = function styles() {
   return {
     root: {
       width: '100%'
@@ -872,12 +873,12 @@ var styles$e = function styles() {
     listItem: {}
   };
 };
-var defaultComponents$e = {
+var defaultComponents$k = {
   Root: List,
   ListSubheader: ListSubheader,
-  ListItem: Component$f
+  ListItem: Component$l
 };
-var name$e = 'VdtCollectionList';
+var name$k = 'VdtCollectionList';
 function CollectionList(_ref) {
   var collectionListType = _ref.collectionListType,
       primary = _ref.primary,
@@ -911,14 +912,14 @@ function CollectionList(_ref) {
       };
     })) || [];
   }, [collectionListType.collection]);
-  return /*#__PURE__*/jsxs(List, _objectSpread$i(_objectSpread$i({
+  return /*#__PURE__*/jsxs(List, _objectSpread$q(_objectSpread$q({
     dense: dense
   }, componentProps.root), {}, {
-    children: [/*#__PURE__*/jsx(ListSubheader, _objectSpread$i({}, componentProps.listSubheader)), /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsx(ListSubheader, _objectSpread$q({}, componentProps.listSubheader)), /*#__PURE__*/jsxs(Fragment$1, {
       children: [!isLoading && listItems.length === 0 && showSlot(emptySlot), (isLoading ? loadingListItems : listItems).map(function (_ref2) {
         var key = _ref2.key,
             collectionType = _ref2.collectionType;
-        return /*#__PURE__*/jsx(ListItem, _objectSpread$i({
+        return /*#__PURE__*/jsx(ListItem, _objectSpread$q({
           collectionType: collectionType,
           primary: primary,
           secondary: secondary,
@@ -1044,18 +1045,18 @@ CollectionList.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$e = withOverrides(defaultComponents$e, {
-  name: name$e
+var ComponentWithOverrides$k = withOverrides(defaultComponents$k, {
+  name: name$k
 })(CollectionList);
-var Component$e = withStyles(styles$e, {
-  name: name$e
-})(ComponentWithOverrides$e);
-Component$e.displayName = 'CollectionList';
+var Component$k = withStyles(styles$k, {
+  name: name$k
+})(ComponentWithOverrides$k);
+Component$k.displayName = 'CollectionList';
 
-function ownKeys$h(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 ownKeys$p(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$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$d = function styles() {
+function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$j = function styles() {
   return {
     root: {},
     listItemButton: {},
@@ -1064,14 +1065,14 @@ var styles$d = function styles() {
     listItemSecondaryAction: {}
   };
 };
-var defaultComponents$d = {
+var defaultComponents$j = {
   Root: ListItem,
   ListItemButton: EntityListItemButton,
   ListItemAvatar: EntityListItemAvatar,
   ListItemText: EntityListItemText,
   ListItemSecondaryAction: EntityListItemSecondaryAction
 };
-var name$d = 'VdtItemListItem';
+var name$j = 'VdtItemListItem';
 function ItemListItem(_ref) {
   var itemType = _ref.itemType,
       primary = _ref.primary,
@@ -1088,25 +1089,25 @@ function ItemListItem(_ref) {
       ListItemButton = components.ListItemButton,
       ListItemSecondaryAction = components.ListItemSecondaryAction;
   var isClickable = !isLoading && !!onClick && !!ListItemButton;
-  return /*#__PURE__*/jsxs(ListItem, _objectSpread$h(_objectSpread$h({
+  return /*#__PURE__*/jsxs(ListItem, _objectSpread$p(_objectSpread$p({
     disablePadding: isClickable
   }, componentProps.root), {}, {
-    children: [/*#__PURE__*/jsxs(ListItemButton, _objectSpread$h(_objectSpread$h({
+    children: [/*#__PURE__*/jsxs(ListItemButton, _objectSpread$p(_objectSpread$p({
       itemType: itemType,
       onClick: onClick,
       isLoading: isLoading
     }, componentProps.listItemButton), {}, {
-      children: [/*#__PURE__*/jsx(ListItemAvatar, _objectSpread$h({
+      children: [/*#__PURE__*/jsx(ListItemAvatar, _objectSpread$p({
         itemType: itemType,
         variant: avatarVariant,
         isLoading: isLoading
-      }, componentProps.listItemAvatar)), /*#__PURE__*/jsx(ListItemText, _objectSpread$h({
+      }, componentProps.listItemAvatar)), /*#__PURE__*/jsx(ListItemText, _objectSpread$p({
         itemType: itemType,
         primary: primary,
         secondary: secondary,
         isLoading: isLoading
       }, componentProps.listItemText))]
-    })), /*#__PURE__*/jsx(ListItemSecondaryAction, _objectSpread$h({
+    })), /*#__PURE__*/jsx(ListItemSecondaryAction, _objectSpread$p({
       itemType: itemType,
       onDelete: onDelete,
       isLoading: isLoading
@@ -1210,17 +1211,17 @@ ItemListItem.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$d = withOverrides(defaultComponents$d, {
-  name: name$d
+var ComponentWithOverrides$j = withOverrides(defaultComponents$j, {
+  name: name$j
 })(ItemListItem);
-var Component$d = withStyles(styles$d, {
-  name: name$d
-})(ComponentWithOverrides$d);
-Component$d.displayName = 'ItemListItem';
+var Component$j = withStyles(styles$j, {
+  name: name$j
+})(ComponentWithOverrides$j);
+Component$j.displayName = 'ItemListItem';
 
-function ownKeys$g(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 ownKeys$o(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$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function EmptySlot$1() {
   return /*#__PURE__*/jsx(Typography, {
@@ -1228,7 +1229,7 @@ function EmptySlot$1() {
   });
 }
 
-var styles$c = function styles() {
+var styles$i = function styles() {
   return {
     root: {
       width: '100%'
@@ -1239,15 +1240,15 @@ var styles$c = function styles() {
     collectionListItem: {}
   };
 };
-var defaultComponents$c = {
+var defaultComponents$i = {
   Root: List,
   ListSubheader: ListSubheader,
   ListItem: null,
   // Override either CollectionListItem or ItemListItem
-  CollectionListItem: withOverrideRef(Component$f),
-  ItemListItem: withOverrideRef(Component$d)
+  CollectionListItem: withOverrideRef(Component$l),
+  ItemListItem: withOverrideRef(Component$j)
 };
-var name$c = 'VdtEntityList';
+var name$i = 'VdtEntityList';
 function EntityList(_ref) {
   var entities = _ref.entities,
       primary = _ref.primary,
@@ -1291,7 +1292,7 @@ function EntityList(_ref) {
     if (itemType) {
       return {
         component: ItemListItem,
-        props: _objectSpread$g(_objectSpread$g({
+        props: _objectSpread$o(_objectSpread$o({
           itemType: itemType
         }, componentProps.listItem), componentProps.itemListItem)
       };
@@ -1300,7 +1301,7 @@ function EntityList(_ref) {
     if (collectionType) {
       return {
         component: CollectionListItem,
-        props: _objectSpread$g(_objectSpread$g({
+        props: _objectSpread$o(_objectSpread$o({
           collectionType: collectionType
         }, componentProps.listItem), componentProps.collectionListItem)
       };
@@ -1313,10 +1314,10 @@ function EntityList(_ref) {
     };
   };
 
-  return /*#__PURE__*/jsxs(List, _objectSpread$g(_objectSpread$g({
+  return /*#__PURE__*/jsxs(List, _objectSpread$o(_objectSpread$o({
     dense: dense
   }, componentProps.root), {}, {
-    children: [/*#__PURE__*/jsx(ListSubheader, _objectSpread$g({}, componentProps.listSubheader)), /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsx(ListSubheader, _objectSpread$o({}, componentProps.listSubheader)), /*#__PURE__*/jsxs(Fragment$1, {
       children: [!isLoading && listItems.length === 0 && showSlot(emptySlot), (isLoading ? loadingListItems : listItems).map(function (_ref4) {
         var key = _ref4.key,
             itemType = _ref4.itemType,
@@ -1329,7 +1330,7 @@ function EntityList(_ref) {
             ListItemComponent = _getListItem.component,
             listItemProps = _getListItem.props;
 
-        return /*#__PURE__*/jsx(ListItemComponent, _objectSpread$g({
+        return /*#__PURE__*/jsx(ListItemComponent, _objectSpread$o({
           primary: primary,
           secondary: secondary,
           avatarVariant: avatarVariant,
@@ -1465,19 +1466,19 @@ EntityList.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$c = withOverrides(defaultComponents$c, {
-  name: name$c
+var ComponentWithOverrides$i = withOverrides(defaultComponents$i, {
+  name: name$i
 })(EntityList);
-var Component$c = withStyles(styles$c, {
-  name: name$c
-})(ComponentWithOverrides$c);
-Component$c.displayName = 'EntityList';
+var Component$i = withStyles(styles$i, {
+  name: name$i
+})(ComponentWithOverrides$i);
+Component$i.displayName = 'EntityList';
 
-var _excluded$3 = ["themes", "defaultPaletteKey", "lightPaletteKey", "darkPaletteKey", "systemPaletteKey", "localStoragePaletteKey", "MuiThemeProviderProps", "CssBaselineProps", "children"];
+var _excluded$7 = ["themes", "defaultPaletteKey", "lightPaletteKey", "darkPaletteKey", "systemPaletteKey", "localStoragePaletteKey", "MuiThemeProviderProps", "CssBaselineProps", "children"];
 
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var light = createTheme({
   palette: {
     type: 'light'
@@ -1500,7 +1501,7 @@ function ThemeProvider(_ref) {
       MuiThemeProviderProps = _ref.MuiThemeProviderProps,
       CssBaselineProps = _ref.CssBaselineProps,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$3);
+      props = _objectWithoutProperties(_ref, _excluded$7);
 
   var prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   var preferredMode = useMemo(function () {
@@ -1547,7 +1548,7 @@ function ThemeProvider(_ref) {
   }, [palette, themes, updatePalette]);
   var isDefaultPalette = palette === defaultPaletteKey;
   var contextValue = useMemo(function () {
-    return _objectSpread$f({
+    return _objectSpread$n({
       theme: theme,
       palette: palette,
       updatePalette: updatePalette,
@@ -1559,10 +1560,10 @@ function ThemeProvider(_ref) {
   }, [isDefaultPalette, palette, theme, themes, togglePalette, updatePalette]);
   return /*#__PURE__*/jsx(ThemeContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/jsxs(ThemeProvider$1, _objectSpread$f(_objectSpread$f({
-      theme: createTheme(_objectSpread$f(_objectSpread$f({}, theme), props))
+    children: /*#__PURE__*/jsxs(ThemeProvider$1, _objectSpread$n(_objectSpread$n({
+      theme: createTheme(_objectSpread$n(_objectSpread$n({}, theme), props))
     }, MuiThemeProviderProps), {}, {
-      children: [/*#__PURE__*/jsx(CssBaseline, _objectSpread$f({
+      children: [/*#__PURE__*/jsx(CssBaseline, _objectSpread$n({
         enableColorScheme: true
       }, CssBaselineProps)), children]
     }))
@@ -1605,202 +1606,1003 @@ ThemeProvider.defaultProps = {
   children: null
 };
 
-function ownKeys$e(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$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$b = {
-  root: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    pointerEvents: 'none',
-    width: 'inherit',
-    height: '100%'
-  }
-};
-function ImageSlot(_ref) {
-  var image = _ref.image,
-      height = _ref.height,
-      width = _ref.width,
-      amountOfImages = _ref.amountOfImages,
-      showSingleStretched = _ref.showSingleStretched,
-      _onError = _ref.onError;
-  var src = image.src,
-      alt = image.alt;
-  var objectFit = amountOfImages === 1 && showSingleStretched ? 'contain' : 'cover';
-  return /*#__PURE__*/jsx("img", {
-    src: src,
-    alt: alt || src,
-    style: {
-      width: width,
-      height: height,
-      objectFit: objectFit
-    },
-    onError: function onError(e) {
-      return _onError(e, image);
-    }
-  }, "".concat(src, "-").concat(alt));
-}
+function ownKeys$m(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; }
 
-var getAmounts = function getAmounts(_ref2) {
-  var amountOfImages = _ref2.amountOfImages,
-      maxColumns = _ref2.maxColumns;
-  var amountOfColumns = Math.min(maxColumns, amountOfImages);
-  var amountOfRows = Math.ceil(amountOfImages / amountOfColumns);
-  var amountOfImagesOnLastRow = amountOfImages % amountOfColumns || amountOfColumns;
+function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$h = function styles(theme) {
+  var isLight = theme.palette.mode === 'light';
   return {
-    amountOfImages: amountOfImages,
-    amountOfColumns: amountOfColumns,
-    amountOfRows: amountOfRows,
-    amountOfImagesOnLastRow: amountOfImagesOnLastRow
+    root: {
+      height: '1rem',
+      borderColor: theme.palette.primary.main,
+      borderWidth: 1.45,
+      borderStyle: 'solid',
+      backgroundColor: isLight ? 'unset' : 'rgba(0, 0, 0, .15)',
+      padding: '0 4px',
+      borderRadius: 2.5,
+      whiteSpace: 'nowrap',
+      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+      fontWeight: 900,
+      fontSize: '0.7rem',
+      letterSpacing: '0.08em',
+      textTransform: 'uppercase',
+      minWidth: 32,
+      textAlign: 'center',
+      userSelect: 'none'
+    }
   };
 };
-
-var getImageWidth = function getImageWidth(index, showLastRowStretched, _ref3) {
-  var amountOfImages = _ref3.amountOfImages,
-      amountOfColumns = _ref3.amountOfColumns,
-      amountOfRows = _ref3.amountOfRows,
-      amountOfImagesOnLastRow = _ref3.amountOfImagesOnLastRow;
-  var isLastRow = Math.ceil((index + 1) / amountOfColumns) === amountOfRows;
-  var width = "".concat(100 / Math.max(Math.min(isLastRow && showLastRowStretched ? amountOfImagesOnLastRow : amountOfColumns, amountOfImages), 1), "%");
-  return width;
-};
-
-var ImageCollageRoot = /*#__PURE__*/forwardRef(function (props, ref) {
-  return /*#__PURE__*/createElement('div', _objectSpread$e({
-    ref: ref
-  }, props));
-});
-var defaultComponents$b = {
-  Root: ImageCollageRoot
+var defaultComponents$h = {
+  Root: Box
 };
-var name$b = 'VdtImageCollage';
-function ImageCollage(_ref4) {
-  var images = _ref4.images,
-      maxImages = _ref4.maxImages,
-      maxColumns = _ref4.maxColumns,
-      showSingleStretched = _ref4.showSingleStretched,
-      showLastRowStretched = _ref4.showLastRowStretched,
-      imageSlot = _ref4.imageSlot,
-      onError = _ref4.onError,
-      components = _ref4.components,
-      componentProps = _ref4.componentProps;
-  var Root = components.Root;
-
-  if (!(images !== null && images !== void 0 && images.length) || maxImages < 0 || maxColumns < 0) {
-    return null;
-  }
-
-  var amountOfImages = Math.min(maxImages, images.length);
-  var amounts = getAmounts({
-    amountOfImages: amountOfImages,
-    maxColumns: maxColumns
-  });
-  var height = "".concat(100 / ((amounts === null || amounts === void 0 ? void 0 : amounts.amountOfRows) || 1), "%");
-  return /*#__PURE__*/jsx(Root, _objectSpread$e(_objectSpread$e({}, componentProps.root), {}, {
-    children: images.slice(0, maxImages).map(function (image, index) {
-      var width = getImageWidth(index, showLastRowStretched, amounts);
-      return showSlot(imageSlot, {
-        image: image,
-        height: height,
-        width: width,
-        amountOfImages: amountOfImages,
-        showSingleStretched: showSingleStretched,
-        onError: onError
-      });
-    })
+var name$h = 'MediaBadge';
+function MediaBadge(_ref) {
+  var text = _ref.text,
+      components = _ref.components,
+      componentProps = _ref.componentProps;
+  var Box = components.Root;
+  return /*#__PURE__*/jsx(Box, _objectSpread$m(_objectSpread$m({
+    component: "span"
+  }, componentProps.root), {}, {
+    children: text
   }));
 }
-ImageCollage.propTypes = {
-  /**
-   * Image urls to show
-   */
-  images: PropTypes.arrayOf(PropTypes.shape({
-    url: PropTypes.string,
-    alt: PropTypes.string
-  })),
-
+MediaBadge.propTypes = {
   /**
-   * Max amount of columns to display
+   * Text to show as badge
    */
-  maxColumns: PropTypes.number,
+  text: PropTypes.string,
+  // Overrides
 
   /**
-   * Max amount of images to display
+   * Override styles with className
    */
-  maxImages: PropTypes.number,
+  className: PropTypes.string,
 
   /**
-   * Whether to stretch full width or follow height for single image
+   * Override or extend the styles applied to the component
    */
-  showSingleStretched: PropTypes.bool,
+  classes: PropTypes.instanceOf(Object),
 
   /**
-   * Whether to stretch full width or follow height for last images
+   * Replace internal components
    */
-  showLastRowStretched: PropTypes.bool,
+  components: PropTypes.shape({
+    Root: PropTypes.elementType,
+    Badge: PropTypes.elementType
+  }),
 
   /**
-   * Callback for error
+   * Add internal component props
    */
-  onError: PropTypes.func,
+  componentProps: PropTypes.shape({
+    root: PropTypes.instanceOf(Object),
+    badge: PropTypes.instanceOf(Object)
+  })
+};
+MediaBadge.defaultProps = {
+  text: undefined,
+  classes: undefined,
+  className: undefined,
+  components: undefined,
+  componentProps: undefined
+};
+
+var ComponentWithOverrides$h = withOverrides(defaultComponents$h, {
+  name: name$h
+})(MediaBadge);
+var Component$h = withStyles(styles$h, {
+  name: name$h
+})(ComponentWithOverrides$h);
+Component$h.displayName = 'MediaBadge';
+
+function ownKeys$l(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$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$g = function styles() {
+  return {
+    root: {
+      alignItems: 'center'
+    },
+    mediaBadge: {}
+  };
+};
+var defaultComponents$g = {
+  Root: Stack,
+  MediaBadge: Component$h
+};
+var name$g = 'MediaBadgeStack';
+var defaultGenerateBadges = function defaultGenerateBadges(input) {
+  var _ref = input || {},
+      containerFormat = _ref.containerFormat,
+      videoFormat = _ref.videoFormat,
+      audioFormat = _ref.audioFormat,
+      videoCodec = _ref.videoCodec,
+      audioCodec = _ref.audioCodec,
+      height = _ref.height,
+      fieldOrder = _ref.fieldOrder,
+      audioChannels = _ref.audioChannels,
+      colorPrimaries = _ref.colorPrimaries,
+      textFormat = _ref.textFormat,
+      frameRate = _ref.frameRate,
+      aspectRatio = _ref.aspectRatio;
+
+  var badges = [];
+  if (containerFormat) badges.push(containerFormat);
+  if (videoFormat) badges.push(videoFormat);else if (videoCodec) badges.push(videoCodec);
+  if (audioFormat) badges.push(audioFormat);else if (audioCodec) badges.push(audioCodec);
+
+  if (height) {
+    var heightFieldOrder = "".concat(height).concat(fieldOrder ? fieldOrder[0] : 'px');
+
+    switch (height) {
+      case 720:
+        badges.push('HD Ready');
+        break;
+
+      case 1080:
+        badges.push('Full HD');
+        break;
+
+      case 1440:
+        badges.push('Quad HD');
+        break;
+
+      case 2160:
+        badges.push('4K UHD');
+        break;
+
+      case 4320:
+        badges.push('8K UHD');
+        break;
+    }
+
+    if (height > 0 && height < 720) {
+      badges.push('SD');
+    }
+
+    badges.push(heightFieldOrder);
+  }
+
+  if (audioChannels) {
+    switch (audioChannels) {
+      case 1:
+        badges.push('Mono');
+        break;
+
+      case 2:
+        badges.push('Stereo');
+        break;
+
+      case 3:
+        badges.push('2.1');
+        break;
+
+      case 6:
+        badges.push('5.1');
+        break;
+
+      case 8:
+        badges.push('7.1');
+        break;
+    }
+  }
+
+  if (colorPrimaries) {
+    switch (colorPrimaries) {
+      case 'BT.2020':
+      case 'REC.2020':
+        badges.push('HDR');
+        break;
+
+      case 'BT.709':
+      case 'REC.709':
+        badges.push('SDR');
+        break;
+    }
+  }
+
+  if (textFormat) {
+    badges.push('CC');
+  }
+
+  if (frameRate) {
+    try {
+      if (frameRate.match(/\d/)) {
+        badges.push("".concat(frameRate, "fps"));
+      } else {
+        badges.push(frameRate);
+      }
+    } catch (e) {// Figure out which to really throw on
+    }
+  }
+
+  if (aspectRatio) badges.push(aspectRatio);
+  return _toConsumableArray(new Set(badges)); // remove duplicates
+};
+function MediaBadgeStack(_ref2) {
+  var input = _ref2.input,
+      direction = _ref2.direction,
+      spacing = _ref2.spacing,
+      dividerSlot = _ref2.dividerSlot,
+      generateBadges = _ref2.generateBadges,
+      components = _ref2.components,
+      componentProps = _ref2.componentProps;
+  var Root = components.Root,
+      MediaBadge = components.MediaBadge;
+  var badges = useMemo(function () {
+    return generateBadges(input);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [input]);
+  return /*#__PURE__*/jsx(Root, _objectSpread$l(_objectSpread$l({
+    direction: direction,
+    spacing: spacing > 0 ? spacing : 0,
+    divider: dividerSlot
+  }, componentProps.root), {}, {
+    children: badges.map(function (badge) {
+      return /*#__PURE__*/jsx(MediaBadge, _objectSpread$l({
+        text: badge
+      }, componentProps.mediaBadge), badge);
+    })
+  }));
+}
+MediaBadgeStack.propTypes = {
+  /**
+   * The input to create badges of
+   */
+  input: PropTypes.shape({
+    containerFormat: PropTypes.string,
+    videoFormat: PropTypes.string,
+    audioFormat: PropTypes.string,
+    videoCodec: PropTypes.string,
+    height: PropTypes.number,
+    fieldOrder: PropTypes.string,
+    audioChannels: PropTypes.number,
+    colorPrimaries: PropTypes.string,
+    textFormat: PropTypes.string,
+    frameRate: PropTypes.string,
+    aspectRatio: PropTypes.string
+  }),
+
+  /**
+   * Direction the badges should be displayed
+   */
+  direction: PropTypes.oneOf(['column', 'row']),
+
+  /**
+   * Defines the space between immediate children.
+   */
+  spacing: PropTypes.number,
+
+  /**
+   * Add a divider component between badges
+   */
+  dividerSlot: PropTypes.node,
+
+  /**
+   * Replace the function that generates the badges
+   */
+  generateBadges: PropTypes.func,
+  // Overrides
+
+  /**
+   * Override styles with className
+   */
+  className: PropTypes.string,
+
+  /**
+   * Override or extend the styles applied to the component
+   */
+  classes: PropTypes.instanceOf(Object),
+
+  /**
+   * Replace internal components
+   */
+  components: PropTypes.shape({
+    Root: PropTypes.elementType,
+    MediaBadge: PropTypes.elementType
+  }),
+
+  /**
+   * Add internal component props
+   */
+  componentProps: PropTypes.shape({
+    root: PropTypes.instanceOf(Object),
+    mediaBadge: PropTypes.instanceOf(Object)
+  })
+};
+MediaBadgeStack.defaultProps = {
+  input: {},
+  direction: 'row',
+  spacing: 1,
+  dividerSlot: undefined,
+  generateBadges: defaultGenerateBadges,
+  classes: undefined,
+  className: undefined,
+  components: undefined,
+  componentProps: undefined
+};
+
+var ComponentWithOverrides$g = withOverrides(defaultComponents$g, {
+  name: name$g
+})(MediaBadgeStack);
+var Component$g = withStyles(styles$g, {
+  name: name$g
+})(ComponentWithOverrides$g);
+Component$g.displayName = 'MediaBadgeStack';
+
+function ownKeys$k(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$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$f = {
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    pointerEvents: 'none',
+    width: 'inherit',
+    height: '100%'
+  }
+};
+function ImageSlot(_ref) {
+  var image = _ref.image,
+      height = _ref.height,
+      width = _ref.width,
+      amountOfImages = _ref.amountOfImages,
+      showSingleStretched = _ref.showSingleStretched,
+      _onError = _ref.onError;
+  var src = image.src,
+      alt = image.alt;
+  var objectFit = amountOfImages === 1 && showSingleStretched ? 'contain' : 'cover';
+  return /*#__PURE__*/jsx("img", {
+    src: src,
+    alt: alt || src,
+    style: {
+      width: width,
+      height: height,
+      objectFit: objectFit
+    },
+    onError: function onError(e) {
+      return _onError(e, image);
+    }
+  }, "".concat(src, "-").concat(alt));
+}
+
+var getAmounts = function getAmounts(_ref2) {
+  var amountOfImages = _ref2.amountOfImages,
+      maxColumns = _ref2.maxColumns;
+  var amountOfColumns = Math.min(maxColumns, amountOfImages);
+  var amountOfRows = Math.ceil(amountOfImages / amountOfColumns);
+  var amountOfImagesOnLastRow = amountOfImages % amountOfColumns || amountOfColumns;
+  return {
+    amountOfImages: amountOfImages,
+    amountOfColumns: amountOfColumns,
+    amountOfRows: amountOfRows,
+    amountOfImagesOnLastRow: amountOfImagesOnLastRow
+  };
+};
+
+var getImageWidth = function getImageWidth(index, showLastRowStretched, _ref3) {
+  var amountOfImages = _ref3.amountOfImages,
+      amountOfColumns = _ref3.amountOfColumns,
+      amountOfRows = _ref3.amountOfRows,
+      amountOfImagesOnLastRow = _ref3.amountOfImagesOnLastRow;
+  var isLastRow = Math.ceil((index + 1) / amountOfColumns) === amountOfRows;
+  var width = "".concat(100 / Math.max(Math.min(isLastRow && showLastRowStretched ? amountOfImagesOnLastRow : amountOfColumns, amountOfImages), 1), "%");
+  return width;
+};
+
+var ImageCollageRoot = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/createElement('div', _objectSpread$k({
+    ref: ref
+  }, props));
+});
+var defaultComponents$f = {
+  Root: ImageCollageRoot
+};
+var name$f = 'VdtImageCollage';
+function ImageCollage(_ref4) {
+  var images = _ref4.images,
+      maxImages = _ref4.maxImages,
+      maxColumns = _ref4.maxColumns,
+      showSingleStretched = _ref4.showSingleStretched,
+      showLastRowStretched = _ref4.showLastRowStretched,
+      imageSlot = _ref4.imageSlot,
+      onError = _ref4.onError,
+      components = _ref4.components,
+      componentProps = _ref4.componentProps;
+  var Root = components.Root;
+
+  if (!(images !== null && images !== void 0 && images.length) || maxImages < 0 || maxColumns < 0) {
+    return null;
+  }
+
+  var amountOfImages = Math.min(maxImages, images.length);
+  var amounts = getAmounts({
+    amountOfImages: amountOfImages,
+    maxColumns: maxColumns
+  });
+  var height = "".concat(100 / ((amounts === null || amounts === void 0 ? void 0 : amounts.amountOfRows) || 1), "%");
+  return /*#__PURE__*/jsx(Root, _objectSpread$k(_objectSpread$k({}, componentProps.root), {}, {
+    children: images.slice(0, maxImages).map(function (image, index) {
+      var width = getImageWidth(index, showLastRowStretched, amounts);
+      return showSlot(imageSlot, {
+        image: image,
+        height: height,
+        width: width,
+        amountOfImages: amountOfImages,
+        showSingleStretched: showSingleStretched,
+        onError: onError
+      });
+    })
+  }));
+}
+ImageCollage.propTypes = {
+  /**
+   * Image urls to show
+   */
+  images: PropTypes.arrayOf(PropTypes.shape({
+    url: PropTypes.string,
+    alt: PropTypes.string
+  })),
+
+  /**
+   * Max amount of columns to display
+   */
+  maxColumns: PropTypes.number,
+
+  /**
+   * Max amount of images to display
+   */
+  maxImages: PropTypes.number,
+
+  /**
+   * Whether to stretch full width or follow height for single image
+   */
+  showSingleStretched: PropTypes.bool,
+
+  /**
+   * Whether to stretch full width or follow height for last images
+   */
+  showLastRowStretched: PropTypes.bool,
+
+  /**
+   * Callback for error
+   */
+  onError: PropTypes.func,
+
+  /**
+   * Slot to show image
+   */
+  imageSlot: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
+  // Overrides
+
+  /**
+   * Override or extend the styles applied to the component
+   */
+  classes: PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * Override styles with className
+   */
+  className: PropTypes.string,
+
+  /**
+   * Replace internal components
+   */
+  components: PropTypes.shape({
+    Root: PropTypes.elementType
+  }),
+
+  /**
+   * Add internal component props
+   */
+  componentProps: PropTypes.shape({
+    root: PropTypes.instanceOf(Object)
+  })
+};
+ImageCollage.defaultProps = {
+  images: [],
+  maxColumns: 2,
+  maxImages: 4,
+  showSingleStretched: true,
+  showLastRowStretched: true,
+  onError: function onError() {
+    return null;
+  },
+  imageSlot: ImageSlot,
+  className: undefined,
+  classes: undefined,
+  components: undefined,
+  componentProps: undefined
+};
+
+var ComponentWithOverrides$f = withOverrides(defaultComponents$f, {
+  name: name$f
+})(ImageCollage);
+var Component$f = withStyles(styles$f, {
+  name: name$f
+})(ComponentWithOverrides$f);
+Component$f.displayName = 'ImageCollage';
+
+function TablePaginationActions(_ref) {
+  var className = _ref.className,
+      count = _ref.count,
+      page = _ref.page,
+      rowsPerPage = _ref.rowsPerPage,
+      onPageChange = _ref.onPageChange;
+  return /*#__PURE__*/jsxs(Box, {
+    className: className,
+    children: [/*#__PURE__*/jsx(IconButton, {
+      onClick: function onClick(e) {
+        return onPageChange(e, {
+          value: 0
+        });
+      },
+      disabled: page === 0,
+      children: /*#__PURE__*/jsx(FirstPage, {})
+    }), /*#__PURE__*/jsx(IconButton, {
+      onClick: function onClick(e) {
+        return onPageChange(e, {
+          value: page - 1
+        });
+      },
+      disabled: page === 0,
+      children: /*#__PURE__*/jsx(KeyboardArrowLeft, {})
+    }), /*#__PURE__*/jsx(IconButton, {
+      onClick: function onClick(e) {
+        return onPageChange(e, {
+          value: page + 1
+        });
+      },
+      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+      children: /*#__PURE__*/jsx(KeyboardArrowRight, {})
+    }), /*#__PURE__*/jsx(IconButton, {
+      onClick: function onClick(e) {
+        return onPageChange(e, {
+          value: Math.max(0, Math.ceil(count / rowsPerPage) - 1)
+        });
+      },
+      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+      children: /*#__PURE__*/jsx(LastPage, {})
+    })]
+  });
+}
+
+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; }
+
+function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$e = function styles() {
+  return {
+    root: {
+      '& .MuiTablePagination-spacer': {
+        flex: 'none'
+      }
+    },
+    tablePaginationActions: {}
+  };
+};
+var defaultComponents$e = {
+  Root: TablePagination$1,
+  TablePaginationActions: TablePaginationActions
+};
+var name$e = 'VdtTablePagination';
+function TablePagination(_ref) {
+  var count = _ref.count,
+      page = _ref.page,
+      rowsPerPage = _ref.rowsPerPage,
+      initialRowsPerPageOptions = _ref.rowsPerPageOptions,
+      onPageChange = _ref.onPageChange,
+      _onRowsPerPageChange = _ref.onRowsPerPageChange,
+      components = _ref.components,
+      componentProps = _ref.componentProps;
+  var Root = components.Root,
+      TablePaginationActions = components.TablePaginationActions;
+  var rowsPerPageOptions = !initialRowsPerPageOptions.includes(rowsPerPage) ? [].concat(_toConsumableArray(initialRowsPerPageOptions), [rowsPerPage]).sort(function (a, b) {
+    return a - b;
+  }) : initialRowsPerPageOptions;
+  var maxPage = Math.ceil(count / rowsPerPage) - 1;
+  return /*#__PURE__*/jsx(Root, _objectSpread$j({
+    component: "div",
+    count: count,
+    page: Math.max(0, Math.min(page, maxPage)),
+    rowsPerPage: rowsPerPage,
+    onPageChange: onPageChange,
+    onRowsPerPageChange: function onRowsPerPageChange(e, _ref2) {
+      var value = _ref2.props.value;
+
+      _onRowsPerPageChange(e, {
+        value: value
+      });
+    },
+    ActionsComponent: TablePaginationActions,
+    rowsPerPageOptions: rowsPerPageOptions
+  }, componentProps.root));
+}
+TablePagination.propTypes = {
+  /**
+   * The total amount of entities
+   */
+  count: PropTypes.number,
+
+  /**
+   * Current page
+   */
+  page: PropTypes.number,
 
   /**
-   * Slot to show image
+   * Number of rows shown per page
    */
-  imageSlot: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
-  // Overrides
+  rowsPerPage: PropTypes.number,
 
   /**
-   * Override or extend the styles applied to the component
+   * An array of options for how many rows should be shown per page
    */
-  classes: PropTypes.objectOf(PropTypes.string),
+  rowsPerPageOptions: PropTypes.arrayOf(Number),
+
+  /**
+   * Callback for when the page changes
+   */
+  onPageChange: PropTypes.func,
+
+  /**
+   * Callback for when the user selects from the rowsPerPageOptions
+   */
+  onRowsPerPageChange: PropTypes.func,
+  // Overrides
 
   /**
    * Override styles with className
    */
   className: PropTypes.string,
 
+  /**
+   * Override or extend the styles applied to the component
+   */
+  classes: PropTypes.instanceOf(Object),
+
   /**
    * Replace internal components
    */
   components: PropTypes.shape({
-    Root: PropTypes.elementType
+    Root: PropTypes.elementType,
+    TablePaginationActions: PropTypes.elementType
   }),
 
   /**
    * Add internal component props
    */
   componentProps: PropTypes.shape({
-    root: PropTypes.instanceOf(Object)
+    root: PropTypes.instanceOf(Object),
+    tablePaginationActions: PropTypes.instanceOf(Object)
   })
 };
-ImageCollage.defaultProps = {
-  images: [],
-  maxColumns: 2,
-  maxImages: 4,
-  showSingleStretched: true,
-  showLastRowStretched: true,
-  onError: function onError() {
+TablePagination.defaultProps = {
+  count: 0,
+  page: 0,
+  rowsPerPage: 10,
+  rowsPerPageOptions: [10, 25, 50, 100],
+  onPageChange: function onPageChange() {
+    return null;
+  },
+  onRowsPerPageChange: function onRowsPerPageChange() {
     return null;
   },
-  imageSlot: ImageSlot,
   className: undefined,
   classes: undefined,
   components: undefined,
   componentProps: undefined
 };
 
-var ComponentWithOverrides$b = withOverrides(defaultComponents$b, {
-  name: name$b
-})(ImageCollage);
-var Component$b = withStyles(styles$b, {
-  name: name$b
-})(ComponentWithOverrides$b);
-Component$b.displayName = 'ImageCollage';
+var ComponentWithOverrides$e = withOverrides(defaultComponents$e, {
+  name: name$e
+})(TablePagination);
+var Component$e = withStyles(styles$e, {
+  name: name$e
+})(ComponentWithOverrides$e);
+Component$e.displayName = 'TablePagination';
 
-function ownKeys$d(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; }
+var _excluded$6 = ["classes", "onClick", "disabled", "label", "optionLabel", "descending"];
 
-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; }
+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; }
+
+function SortButtonBase(_ref) {
+  _ref.classes;
+      var onClick = _ref.onClick,
+      disabled = _ref.disabled,
+      label = _ref.label,
+      optionLabel = _ref.optionLabel,
+      descending = _ref.descending,
+      props = _objectWithoutProperties(_ref, _excluded$6);
+
+  return /*#__PURE__*/jsxs(ButtonBase, _objectSpread$i(_objectSpread$i({
+    onClick: onClick,
+    disabled: disabled
+  }, props), {}, {
+    children: [/*#__PURE__*/jsx(Typography, {
+      variant: "caption",
+      color: disabled ? 'textSecondary' : 'textPrimary',
+      children: "".concat(label, ": ").concat(optionLabel)
+    }), /*#__PURE__*/jsx(Box, {
+      sx: [function (theme) {
+        var _theme$palette, _theme$palette$second;
+
+        return _objectSpread$i({
+          marginRight: '-2px',
+          marginLeft: '4px',
+          color: (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : (_theme$palette$second = _theme$palette.secondary) === null || _theme$palette$second === void 0 ? void 0 : _theme$palette$second.main,
+          transition: 'transform .2s ease-out'
+        }, props.sx || {});
+      }, !descending && {
+        transform: 'rotate(180deg)'
+      }],
+      children: /*#__PURE__*/jsx(ArrowDropDown, {})
+    })]
+  }));
+}
+
+var _excluded$5 = ["value", "label", "selected", "onClick"];
+
+function ownKeys$h(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$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function SortMenuItem(_ref) {
+  var value = _ref.value,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? '' : _ref$label,
+      selected = _ref.selected,
+      _onClick = _ref.onClick,
+      props = _objectWithoutProperties(_ref, _excluded$5);
+
+  return /*#__PURE__*/jsx(MenuItem, _objectSpread$h(_objectSpread$h({
+    selected: selected,
+    onClick: function onClick(e) {
+      return _onClick(e, value);
+    },
+    dense: true,
+    sx: function sx(theme) {
+      var _theme$palette, _theme$palette$second, _theme$palette2, _theme$palette2$secon;
+
+      return _objectSpread$h({
+        '&$selected': {
+          backgroundColor: theme.palette && alpha((_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : (_theme$palette$second = _theme$palette.secondary) === null || _theme$palette$second === void 0 ? void 0 : _theme$palette$second.main, 0.16),
+          color: (_theme$palette2 = theme.palette) === null || _theme$palette2 === void 0 ? void 0 : (_theme$palette2$secon = _theme$palette2.secondary) === null || _theme$palette2$secon === void 0 ? void 0 : _theme$palette2$secon.main
+        }
+      }, props.sx || {});
+    }
+  }, props), {}, {
+    children: /*#__PURE__*/jsx(Typography, {
+      variant: "caption",
+      children: label
+    })
+  }));
+}
+
+function ownKeys$g(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$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$d = function styles(theme) {
+  var _theme$palette;
+
+  return {
+    root: {
+      color: (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette.secondary.main,
+      paddingLeft: 9,
+      paddingRight: 9,
+      borderRadius: 4
+    },
+    menu: {
+      minWidth: 150,
+      marginTop: 4
+    },
+    menuItem: {},
+    buttonBase: {}
+  };
+};
+var defaultComponents$d = {
+  Root: Box,
+  Menu: Menu,
+  MenuItem: SortMenuItem,
+  ButtonBase: SortButtonBase
+};
+var name$d = 'VdtSort';
+function Sort(_ref) {
+  var caption = _ref.caption,
+      options = _ref.options,
+      sortAsc = _ref.sortAsc,
+      sortDesc = _ref.sortDesc,
+      initialSort = _ref.initialSort,
+      onChange = _ref.onChange,
+      components = _ref.components,
+      componentProps = _ref.componentProps;
+  var Root = components.Root,
+      Menu = components.Menu,
+      MenuItem = components.MenuItem,
+      ButtonBase = components.ButtonBase;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      anchorEl = _useState2[0],
+      setAnchorEl = _useState2[1];
+
+  var handleOpen = function handleOpen(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+
+  var _useState3 = useState(initialSort || {
+    option: {},
+    direction: sortDesc
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      sortState = _useState4[0],
+      setSortState = _useState4[1];
+
+  var handleMenuItemClick = function handleMenuItemClick(event, newValue) {
+    var option = sortState.option,
+        direction = sortState.direction;
+
+    if (newValue !== option.value) {
+      option = options.find(function (o) {
+        return o.value === newValue;
+      });
+    } else {
+      direction = direction === sortDesc ? sortAsc : sortDesc;
+    }
+
+    setSortState({
+      option: option,
+      direction: direction
+    });
+    if (onChange) onChange(event, {
+      value: option.value,
+      direction: direction
+    });
+    handleClose();
+  };
+
+  var isDisabled = options === undefined || options.length === 0;
+  return /*#__PURE__*/jsxs(Root, _objectSpread$g(_objectSpread$g({}, componentProps.root), {}, {
+    children: [/*#__PURE__*/jsx(ButtonBase, _objectSpread$g({
+      onClick: handleOpen,
+      disabled: isDisabled,
+      label: caption,
+      optionLabel: sortState.option.label || '',
+      descending: sortState.direction !== sortAsc
+    }, componentProps.buttonBase)), /*#__PURE__*/jsx(Menu, _objectSpread$g(_objectSpread$g({
+      anchorEl: anchorEl,
+      keepMounted: true,
+      open: Boolean(anchorEl),
+      onClose: handleClose,
+      elevation: 1,
+      marginThreshold: 0,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      PaperProps: {
+        style: {
+          minWidth: 150,
+          marginTop: 4
+        }
+      }
+    }, componentProps.menu), {}, {
+      children: options.map(function (option) {
+        return /*#__PURE__*/jsx(MenuItem, _objectSpread$g({
+          value: option.value,
+          label: option.label,
+          onClick: handleMenuItemClick,
+          selected: option.value === sortState.option.value
+        }, componentProps.menuItem), option.value);
+      })
+    }))]
+  }));
+}
+Sort.propTypes = {
+  /**
+   * Text shown before sort options
+   */
+  caption: PropTypes.string,
+
+  /**
+   * Value string for ascending sort
+   */
+  sortAsc: PropTypes.string,
+
+  /**
+   * Value string for descending sort
+   */
+  sortDesc: PropTypes.string,
+
+  /**
+   * Function that is called when sort option is changed
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Array of sort options
+   */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    // eslint-disable-next-line react/forbid-prop-types
+    value: PropTypes.any,
+    label: PropTypes.string
+  })),
+
+  /**
+   * Initial sort option
+   */
+  initialSort: PropTypes.shape({
+    option: PropTypes.shape({
+      // eslint-disable-next-line react/forbid-prop-types
+      value: PropTypes.any,
+      label: PropTypes.string
+    }),
+    direction: PropTypes.string
+  }),
+  // Overrides
+
+  /**
+   * Override styles with className
+   */
+  className: PropTypes.string,
+
+  /**
+   * Override or extend the styles applied to the component
+   */
+  classes: PropTypes.instanceOf(Object),
+
+  /**
+   * Replace internal components
+   */
+  components: PropTypes.shape({
+    Root: PropTypes.elementType,
+    Menu: PropTypes.elementType,
+    MenuItem: PropTypes.elementType,
+    ButtonBase: PropTypes.elementType
+  }),
+
+  /**
+   * Add internal component props
+   */
+  componentProps: PropTypes.shape({
+    root: PropTypes.instanceOf(Object),
+    menu: PropTypes.instanceOf(Object),
+    menuItem: PropTypes.instanceOf(Object),
+    buttonBase: PropTypes.instanceOf(Object)
+  })
+};
+Sort.defaultProps = {
+  caption: 'Sort by',
+  sortAsc: 'ascending',
+  sortDesc: 'descending',
+  onChange: undefined,
+  initialSort: undefined,
+  options: [],
+  className: undefined,
+  classes: undefined,
+  components: undefined,
+  componentProps: undefined
+};
+
+var ComponentWithOverrides$d = withOverrides(defaultComponents$d, {
+  name: name$d
+})(Sort);
+var Component$d = withStyles(styles$d, {
+  name: name$d
+})(ComponentWithOverrides$d);
+Component$d.displayName = 'Sort';
+
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function EmptySlot() {
   return /*#__PURE__*/jsx(Typography, {
@@ -1808,7 +2610,7 @@ function EmptySlot() {
   });
 }
 
-var styles$a = function styles() {
+var styles$c = function styles() {
   return {
     root: {
       width: '100%'
@@ -1817,12 +2619,12 @@ var styles$a = function styles() {
     listItem: {}
   };
 };
-var defaultComponents$a = {
+var defaultComponents$c = {
   Root: List,
   ListSubheader: ListSubheader,
-  ListItem: Component$d
+  ListItem: Component$j
 };
-var name$a = 'VdtItemList';
+var name$c = 'VdtItemList';
 function ItemList(_ref) {
   var itemListType = _ref.itemListType,
       primary = _ref.primary,
@@ -1856,14 +2658,14 @@ function ItemList(_ref) {
       };
     })) || [];
   }, [itemListType.item]);
-  return /*#__PURE__*/jsxs(List, _objectSpread$d(_objectSpread$d({
+  return /*#__PURE__*/jsxs(List, _objectSpread$f(_objectSpread$f({
     dense: dense
   }, componentProps.root), {}, {
-    children: [/*#__PURE__*/jsx(ListSubheader, _objectSpread$d({}, componentProps.listSubheader)), /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsx(ListSubheader, _objectSpread$f({}, componentProps.listSubheader)), /*#__PURE__*/jsxs(Fragment$1, {
       children: [!isLoading && listItems.length === 0 && showSlot(emptySlot), (isLoading ? loadingListItems : listItems).map(function (_ref2) {
         var key = _ref2.key,
             itemType = _ref2.itemType;
-        return /*#__PURE__*/jsx(ListItem, _objectSpread$d({
+        return /*#__PURE__*/jsx(ListItem, _objectSpread$f({
           itemType: itemType,
           primary: primary,
           secondary: secondary,
@@ -1988,21 +2790,21 @@ ItemList.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$a = withOverrides(defaultComponents$a, {
-  name: name$a
+var ComponentWithOverrides$c = withOverrides(defaultComponents$c, {
+  name: name$c
 })(ItemList);
-var Component$a = withStyles(styles$a, {
-  name: name$a
-})(ComponentWithOverrides$a);
-Component$a.displayName = 'ItemList';
+var Component$c = withStyles(styles$c, {
+  name: name$c
+})(ComponentWithOverrides$c);
+Component$c.displayName = 'ItemList';
 
-var _excluded$2 = ["id", "value", "defaultValue", "required", "disabled", "options", "fullWidth", "orientation", "labelPlacement", "justifyContent", "size", "onChange", "FormControlLabelComponent", "formControlLabelProps", "CheckboxComponent", "checkboxProps"],
+var _excluded$4 = ["id", "value", "defaultValue", "required", "disabled", "options", "fullWidth", "orientation", "labelPlacement", "justifyContent", "size", "onChange", "FormControlLabelComponent", "formControlLabelProps", "CheckboxComponent", "checkboxProps"],
     _excluded2$2 = ["vdtClassNames", "className", "autoComplete", "autoFocus", "rows", "type"],
     _excluded3$1 = ["name", "value", "label", "disabled"];
 
-function ownKeys$c(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 ownKeys$e(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$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; }
+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 CheckboxGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
       value = _ref.value,
@@ -2024,7 +2826,7 @@ var CheckboxGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
       CheckboxComponent = _ref$CheckboxComponen === void 0 ? Checkbox : _ref$CheckboxComponen,
       _ref$checkboxProps = _ref.checkboxProps,
       checkboxProps = _ref$checkboxProps === void 0 ? {} : _ref$checkboxProps,
-      props = _objectWithoutProperties(_ref, _excluded$2);
+      props = _objectWithoutProperties(_ref, _excluded$4);
 
   var className = props.vdtClassNames;
       props.className;
@@ -2046,8 +2848,8 @@ var CheckboxGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return v !== checkboxValue;
     }) : [].concat(_toConsumableArray(localValue), [checkboxValue]);
     valueRef.current = newValue;
-    onChange(_objectSpread$c(_objectSpread$c({}, e), {}, {
-      target: _objectSpread$c(_objectSpread$c({}, e.target), {}, {
+    onChange(_objectSpread$e(_objectSpread$e({}, e), {}, {
+      target: _objectSpread$e(_objectSpread$e({}, e.target), {}, {
         value: newValue
       })
     }), {
@@ -2056,14 +2858,14 @@ var CheckboxGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
 
   var isControlled = value !== undefined;
-  return /*#__PURE__*/jsx(FormGroup, _objectSpread$c(_objectSpread$c({
+  return /*#__PURE__*/jsx(FormGroup, _objectSpread$e(_objectSpread$e({
     ref: ref,
     className: className,
     row: orientation === 'horizontal',
     onChange: handleOnChange,
     role: "group",
     sx: {
-      '&': _objectSpread$c({
+      '&': _objectSpread$e({
         width: '100%'
       }, orientation === 'horizontal' && justifyContent ? {
         justifyContent: justifyContent
@@ -2077,7 +2879,7 @@ var CheckboxGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
           optionDisabled = _ref2.disabled,
           optionProps = _objectWithoutProperties(_ref2, _excluded3$1);
 
-      return /*#__PURE__*/jsx(FormControlLabelComponent, _objectSpread$c({
+      return /*#__PURE__*/jsx(FormControlLabelComponent, _objectSpread$e({
         label: optionLabel || optionValue,
         labelPlacement: labelPlacement,
         size: size,
@@ -2085,7 +2887,7 @@ var CheckboxGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
           '&': {
             overflow: 'hidden'
           },
-          '& .MuiFormControlLabel-label': _objectSpread$c(_objectSpread$c(_objectSpread$c({}, size === 'small' ? {
+          '& .MuiFormControlLabel-label': _objectSpread$e(_objectSpread$e(_objectSpread$e({}, size === 'small' ? {
             fontSize: '0.8rem'
           } : {}), orientation === 'horizontal' ? {
             textAlign: 'center',
@@ -2096,7 +2898,7 @@ var CheckboxGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
             textOverflow: 'ellipsis'
           })
         },
-        control: /*#__PURE__*/jsx(CheckboxComponent, _objectSpread$c(_objectSpread$c(_objectSpread$c({
+        control: /*#__PURE__*/jsx(CheckboxComponent, _objectSpread$e(_objectSpread$e(_objectSpread$e({
           id: "".concat(id, "-").concat(optionName || optionValue),
           value: optionValue
         }, isControlled ? {
@@ -2112,10 +2914,10 @@ var CheckboxGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-function ownKeys$b(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 ownKeys$d(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$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$9 = function styles() {
+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$b = function styles() {
   return {
     root: {},
     formHelperText: {},
@@ -2186,7 +2988,7 @@ var styles$9 = function styles() {
     checkbox: {}
   };
 };
-var defaultComponents$9 = {
+var defaultComponents$b = {
   Root: FormControl,
   FormHelperText: FormHelperText,
   InputLabel: InputLabel,
@@ -2197,7 +2999,7 @@ var defaultComponents$9 = {
   FormControlLabel: FormControlLabel,
   Checkbox: Checkbox
 };
-var name$9 = 'VdtCheckboxGroupInput';
+var name$b = 'VdtCheckboxGroupInput';
 function CheckboxGroupInput(_ref) {
   var inputName = _ref.name,
       label = _ref.label,
@@ -2234,40 +3036,40 @@ function CheckboxGroupInput(_ref) {
     outlined: OutlinedInput
   }[variant];
   var inputComponentProps = {
-    standard: _objectSpread$b({
+    standard: _objectSpread$d({
       disableUnderline: true
     }, componentProps.input),
-    filled: _objectSpread$b({
+    filled: _objectSpread$d({
       disableUnderline: true
     }, componentProps.filledInput),
-    outlined: _objectSpread$b({
+    outlined: _objectSpread$d({
       label: label,
       notched: true
     }, componentProps.outlinedInput)
   }[variant];
   var isError = !!error;
   var errorText = (error || '').trim();
-  return /*#__PURE__*/jsxs(FormControl, _objectSpread$b(_objectSpread$b({
+  return /*#__PURE__*/jsxs(FormControl, _objectSpread$d(_objectSpread$d({
     error: isError,
     required: required,
     disabled: disabled,
     variant: variant,
     fullWidth: fullWidth
   }, componentProps.root), {}, {
-    children: [/*#__PURE__*/jsx(InputLabel, _objectSpread$b(_objectSpread$b({
+    children: [/*#__PURE__*/jsx(InputLabel, _objectSpread$d(_objectSpread$d({
       htmlFor: inputName,
       id: "".concat(inputName, "-label"),
       shrink: true
     }, componentProps.inputLabel), {}, {
       children: label
-    })), /*#__PURE__*/jsx(InputComponent, _objectSpread$b({
+    })), /*#__PURE__*/jsx(InputComponent, _objectSpread$d({
       id: inputName,
       name: inputName,
       fullWidth: fullWidth,
       size: size,
       inputComponent: FormGroup,
       "aria-describedby": "".concat(inputName, "-describedby"),
-      inputProps: _objectSpread$b({
+      inputProps: _objectSpread$d({
         value: value,
         defaultValue: defaultValue,
         options: options,
@@ -2284,7 +3086,7 @@ function CheckboxGroupInput(_ref) {
         checkboxProps: componentProps.checkbox,
         vdtClassNames: componentProps.formGroup.className
       }, componentProps.formGroup)
-    }, inputComponentProps)), (errorText || helperText) && /*#__PURE__*/jsx(FormHelperText, _objectSpread$b(_objectSpread$b({
+    }, inputComponentProps)), (errorText || helperText) && /*#__PURE__*/jsx(FormHelperText, _objectSpread$d(_objectSpread$d({
       id: "".concat(inputName, "-describedby")
     }, componentProps.formHelperText), {}, {
       children: isError ? errorText : helperText
@@ -2457,18 +3259,18 @@ CheckboxGroupInput.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$9 = withOverrides(defaultComponents$9, {
-  name: name$9
+var ComponentWithOverrides$b = withOverrides(defaultComponents$b, {
+  name: name$b
 })(CheckboxGroupInput);
-var Component$9 = withStyles(styles$9, {
-  name: name$9
-})(ComponentWithOverrides$9);
-Component$9.displayName = 'CheckboxGroupInput';
+var Component$b = withStyles(styles$b, {
+  name: name$b
+})(ComponentWithOverrides$b);
+Component$b.displayName = 'CheckboxGroupInput';
 
-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; }
+function ownKeys$c(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$8 = function styles() {
+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$a = function styles() {
   return {
     root: {
       // Show label correctly with ellipsis
@@ -2481,11 +3283,11 @@ var styles$8 = function styles() {
     menuItem: {}
   };
 };
-var defaultComponents$8 = {
+var defaultComponents$a = {
   Root: TextField,
   MenuItem: MenuItem
 };
-var name$8 = 'VdtSelectInput';
+var name$a = 'VdtSelectInput';
 function SelectInput(_ref) {
   var inputName = _ref.name,
       label = _ref.label,
@@ -2522,7 +3324,7 @@ function SelectInput(_ref) {
   var isControlled = value !== undefined;
   var isError = !!error;
   var errorText = (error || '').trim();
-  return /*#__PURE__*/jsx(TextField, _objectSpread$a(_objectSpread$a(_objectSpread$a({
+  return /*#__PURE__*/jsx(TextField, _objectSpread$c(_objectSpread$c(_objectSpread$c({
     id: inputName,
     name: inputName,
     label: label
@@ -2549,7 +3351,7 @@ function SelectInput(_ref) {
     onFocus: onFocus
   }, componentProps.root), {}, {
     children: options === null || options === void 0 ? void 0 : options.map(function (option) {
-      return /*#__PURE__*/jsx(MenuItem, _objectSpread$a(_objectSpread$a(_objectSpread$a({}, option), componentProps.menuItem), {}, {
+      return /*#__PURE__*/jsx(MenuItem, _objectSpread$c(_objectSpread$c(_objectSpread$c({}, option), componentProps.menuItem), {}, {
         children: (option === null || option === void 0 ? void 0 : option.label) || (option === null || option === void 0 ? void 0 : option.value)
       }), option === null || option === void 0 ? void 0 : option.value);
     })
@@ -2704,26 +3506,26 @@ SelectInput.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$8 = withOverrides(defaultComponents$8, {
-  name: name$8
+var ComponentWithOverrides$a = withOverrides(defaultComponents$a, {
+  name: name$a
 })(SelectInput);
-var Component$8 = withStyles(styles$8, {
-  name: name$8
-})(ComponentWithOverrides$8);
-Component$8.displayName = 'SelectInput';
+var Component$a = withStyles(styles$a, {
+  name: name$a
+})(ComponentWithOverrides$a);
+Component$a.displayName = 'SelectInput';
 
-function ownKeys$9(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 ownKeys$b(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$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 styles$7 = function styles() {
+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$9 = function styles() {
   return {
     root: {}
   };
 };
-var defaultComponents$7 = {
+var defaultComponents$9 = {
   Root: TextField
 };
-var name$7 = 'VdtTextInput';
+var name$9 = 'VdtTextInput';
 function TextInput(_ref) {
   var inputName = _ref.name,
       label = _ref.label,
@@ -2756,7 +3558,7 @@ function TextInput(_ref) {
   var isControlled = value !== undefined;
   var isError = !!error;
   var errorText = (error || '').trim();
-  return /*#__PURE__*/jsx(TextField, _objectSpread$9(_objectSpread$9({
+  return /*#__PURE__*/jsx(TextField, _objectSpread$b(_objectSpread$b({
     id: inputName,
     name: inputName,
     label: label
@@ -2912,18 +3714,18 @@ TextInput.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$7 = withOverrides(defaultComponents$7, {
-  name: name$7
+var ComponentWithOverrides$9 = withOverrides(defaultComponents$9, {
+  name: name$9
 })(TextInput);
-var Component$7 = withStyles(styles$7, {
-  name: name$7
-})(ComponentWithOverrides$7);
-Component$7.displayName = 'TextInput';
+var Component$9 = withStyles(styles$9, {
+  name: name$9
+})(ComponentWithOverrides$9);
+Component$9.displayName = 'TextInput';
 
-function ownKeys$8(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 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; }
 
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$6 = function styles() {
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$8 = function styles() {
   return {
     root: {},
     formHelperText: {},
@@ -3035,14 +3837,14 @@ var styles$6 = function styles() {
     chip: {}
   };
 };
-var defaultComponents$6 = {
+var defaultComponents$8 = {
   Root: FormControl,
   FormHelperText: FormHelperText,
   Autocomplete: Autocomplete,
   TextField: TextField,
   Chip: Chip
 };
-var name$6 = 'VdtTagInput';
+var name$8 = 'VdtTagInput';
 function TagInput(_ref) {
   var inputName = _ref.name,
       label = _ref.label,
@@ -3102,12 +3904,12 @@ function TagInput(_ref) {
   var isControlled = value !== undefined;
   var isError = !!error;
   var errorText = (error || '').trim();
-  return /*#__PURE__*/jsxs(FormControl, _objectSpread$8(_objectSpread$8({
+  return /*#__PURE__*/jsxs(FormControl, _objectSpread$a(_objectSpread$a({
     error: isError,
     required: required,
     fullWidth: fullWidth
   }, componentProps.root), {}, {
-    children: [/*#__PURE__*/jsx(Autocomplete, _objectSpread$8(_objectSpread$8({
+    children: [/*#__PURE__*/jsx(Autocomplete, _objectSpread$a(_objectSpread$a({
       id: inputName,
       name: inputName,
       value: value
@@ -3143,7 +3945,7 @@ function TagInput(_ref) {
       disableClearable: true,
       renderTags: function renderTags(values, getTagProps) {
         return values.map(function (v, index) {
-          return /*#__PURE__*/jsx(Chip, _objectSpread$8(_objectSpread$8({
+          return /*#__PURE__*/jsx(Chip, _objectSpread$a(_objectSpread$a({
             label: _getOptionLabel(v) || v,
             size: size
           }, getTagProps({
@@ -3154,13 +3956,13 @@ function TagInput(_ref) {
       renderInput: function renderInput(params) {
         var _componentProps$textF;
 
-        return /*#__PURE__*/jsx(TextField, _objectSpread$8(_objectSpread$8({}, params), {}, {
+        return /*#__PURE__*/jsx(TextField, _objectSpread$a(_objectSpread$a({}, params), {}, {
           label: label,
           error: isError,
           required: required,
           variant: variant,
           size: size,
-          InputProps: _objectSpread$8(_objectSpread$8({}, params.InputProps), {}, {
+          InputProps: _objectSpread$a(_objectSpread$a({}, params.InputProps), {}, {
             endAdornment: /*#__PURE__*/jsxs(Fragment$1, {
               children: [loading ? /*#__PURE__*/jsx(CircularProgress, {
                 color: "inherit",
@@ -3171,7 +3973,7 @@ function TagInput(_ref) {
           fullWidth: true
         }, componentProps.textField));
       }
-    }, componentProps.autocomplete)), (errorText || helperText) && /*#__PURE__*/jsx(FormHelperText, _objectSpread$8(_objectSpread$8({}, componentProps.formHelperText), {}, {
+    }, componentProps.autocomplete)), (errorText || helperText) && /*#__PURE__*/jsx(FormHelperText, _objectSpread$a(_objectSpread$a({}, componentProps.formHelperText), {}, {
       children: isError ? errorText : helperText
     }))]
   }));
@@ -3348,21 +4150,21 @@ TagInput.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$6 = withOverrides(defaultComponents$6, {
-  name: name$6
+var ComponentWithOverrides$8 = withOverrides(defaultComponents$8, {
+  name: name$8
 })(TagInput);
-var Component$6 = withStyles(styles$6, {
-  name: name$6
-})(ComponentWithOverrides$6);
-Component$6.displayName = 'TagInput';
+var Component$8 = withStyles(styles$8, {
+  name: name$8
+})(ComponentWithOverrides$8);
+Component$8.displayName = 'TagInput';
 
-var _excluded$1 = ["id", "value", "defaultValue", "disabled", "options", "orientation", "labelPlacement", "justifyContent", "size", "onChange", "FormControlLabelComponent", "formControlLabelProps", "RadioComponent", "radioProps"],
+var _excluded$3 = ["id", "value", "defaultValue", "disabled", "options", "orientation", "labelPlacement", "justifyContent", "size", "onChange", "FormControlLabelComponent", "formControlLabelProps", "RadioComponent", "radioProps"],
     _excluded2$1 = ["vdtClassNames", "className", "autoComplete", "autoFocus", "rows", "type"],
     _excluded3 = ["name", "value", "label", "disabled"];
 
-function ownKeys$7(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 ownKeys$9(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 RadioGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
       value = _ref.value,
@@ -3382,7 +4184,7 @@ var RadioGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
       RadioComponent = _ref$RadioComponent === void 0 ? Radio : _ref$RadioComponent,
       _ref$radioProps = _ref.radioProps,
       radioProps = _ref$radioProps === void 0 ? {} : _ref$radioProps,
-      props = _objectWithoutProperties(_ref, _excluded$1);
+      props = _objectWithoutProperties(_ref, _excluded$3);
 
   var className = props.vdtClassNames;
       props.className;
@@ -3401,7 +4203,7 @@ var RadioGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
 
   var isControlled = value !== undefined;
-  return /*#__PURE__*/jsx(RadioGroup$1, _objectSpread$7(_objectSpread$7(_objectSpread$7({
+  return /*#__PURE__*/jsx(RadioGroup$1, _objectSpread$9(_objectSpread$9(_objectSpread$9({
     ref: ref,
     id: id,
     className: className
@@ -3414,7 +4216,7 @@ var RadioGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     size: size,
     onChange: handleChange,
     sx: {
-      '&': _objectSpread$7({
+      '&': _objectSpread$9({
         width: '100%'
       }, orientation === 'horizontal' && justifyContent ? {
         justifyContent: justifyContent
@@ -3428,7 +4230,7 @@ var RadioGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
           optionDisabled = _ref2.disabled,
           optionProps = _objectWithoutProperties(_ref2, _excluded3);
 
-      return /*#__PURE__*/jsx(FormControlLabelComponent, _objectSpread$7({
+      return /*#__PURE__*/jsx(FormControlLabelComponent, _objectSpread$9({
         label: optionLabel,
         labelPlacement: labelPlacement,
         size: size,
@@ -3436,7 +4238,7 @@ var RadioGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
           '&': {
             overflow: 'hidden'
           },
-          '& .MuiFormControlLabel-label': _objectSpread$7(_objectSpread$7(_objectSpread$7({}, size === 'small' ? {
+          '& .MuiFormControlLabel-label': _objectSpread$9(_objectSpread$9(_objectSpread$9({}, size === 'small' ? {
             fontSize: '0.8rem'
           } : {}), orientation === 'horizontal' ? {
             textAlign: 'center',
@@ -3447,7 +4249,7 @@ var RadioGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
             textOverflow: 'ellipsis'
           })
         },
-        control: /*#__PURE__*/jsx(RadioComponent, _objectSpread$7(_objectSpread$7({
+        control: /*#__PURE__*/jsx(RadioComponent, _objectSpread$9(_objectSpread$9({
           id: "".concat(id, "-").concat(optionName || optionValue),
           value: optionValue,
           disabled: optionDisabled || disabled,
@@ -3458,10 +4260,10 @@ var RadioGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-function ownKeys$6(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 ownKeys$8(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$5 = function styles() {
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$7 = function styles() {
   return {
     root: {},
     formHelperText: {},
@@ -3534,7 +4336,7 @@ var styles$5 = function styles() {
     radio: {}
   };
 };
-var defaultComponents$5 = {
+var defaultComponents$7 = {
   Root: FormControl,
   FormHelperText: FormHelperText,
   InputLabel: InputLabel,
@@ -3545,7 +4347,7 @@ var defaultComponents$5 = {
   FormControlLabel: FormControlLabel,
   Radio: Radio
 };
-var name$5 = 'VdtRadioGroupInput';
+var name$7 = 'VdtRadioGroupInput';
 function RadioGroupInput(_ref) {
   var inputName = _ref.name,
       label = _ref.label,
@@ -3582,39 +4384,39 @@ function RadioGroupInput(_ref) {
     outlined: OutlinedInput
   }[variant];
   var inputComponentProps = {
-    standard: _objectSpread$6({
+    standard: _objectSpread$8({
       disableUnderline: true
     }, componentProps.input),
-    filled: _objectSpread$6({
+    filled: _objectSpread$8({
       disableUnderline: true
     }, componentProps.filledInput),
-    outlined: _objectSpread$6({
+    outlined: _objectSpread$8({
       label: label,
       notched: true
     }, componentProps.outlinedInput)
   }[variant];
   var isError = !!error;
   var errorText = (error || '').trim();
-  return /*#__PURE__*/jsxs(FormControl, _objectSpread$6(_objectSpread$6({
+  return /*#__PURE__*/jsxs(FormControl, _objectSpread$8(_objectSpread$8({
     error: isError,
     required: required,
     disabled: disabled,
     variant: variant,
     fullWidth: fullWidth
   }, componentProps.root), {}, {
-    children: [/*#__PURE__*/jsx(InputLabel, _objectSpread$6(_objectSpread$6({
+    children: [/*#__PURE__*/jsx(InputLabel, _objectSpread$8(_objectSpread$8({
       htmlFor: inputName,
       id: "".concat(inputName, "-label"),
       shrink: true
     }, componentProps.inputLabel), {}, {
       children: label
-    })), /*#__PURE__*/jsx(InputComponent, _objectSpread$6({
+    })), /*#__PURE__*/jsx(InputComponent, _objectSpread$8({
       id: inputName,
       name: inputName,
       fullWidth: fullWidth,
       size: size,
       inputComponent: RadioGroup,
-      inputProps: _objectSpread$6({
+      inputProps: _objectSpread$8({
         value: value,
         defaultValue: defaultValue,
         options: options,
@@ -3631,7 +4433,7 @@ function RadioGroupInput(_ref) {
         radioProps: componentProps.radio,
         vdtClassNames: componentProps.radioGroup.className
       }, componentProps.radioGroup)
-    }, inputComponentProps)), (errorText || helperText) && /*#__PURE__*/jsx(FormHelperText, _objectSpread$6(_objectSpread$6({}, componentProps.formHelperText), {}, {
+    }, inputComponentProps)), (errorText || helperText) && /*#__PURE__*/jsx(FormHelperText, _objectSpread$8(_objectSpread$8({}, componentProps.formHelperText), {}, {
       children: isError ? errorText : helperText
     }))]
   }));
@@ -3803,18 +4605,18 @@ RadioGroupInput.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$5 = withOverrides(defaultComponents$5, {
-  name: name$5
+var ComponentWithOverrides$7 = withOverrides(defaultComponents$7, {
+  name: name$7
 })(RadioGroupInput);
-var Component$5 = withStyles(styles$5, {
-  name: name$5
-})(ComponentWithOverrides$5);
-Component$5.displayName = 'RadioGroupInput';
+var Component$7 = withStyles(styles$7, {
+  name: name$7
+})(ComponentWithOverrides$7);
+Component$7.displayName = 'RadioGroupInput';
 
-function ownKeys$5(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 ownKeys$7(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$4 = function styles(theme) {
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$6 = function styles(theme) {
   return {
     root: {},
     formControlLabel: {
@@ -3826,13 +4628,13 @@ var styles$4 = function styles(theme) {
     "switch": {}
   };
 };
-var defaultComponents$4 = {
+var defaultComponents$6 = {
   Root: FormControl,
   FormControlLabel: FormControlLabel,
   FormHelperText: FormHelperText,
   Switch: Switch
 };
-var name$4 = 'VdtSwitchInput';
+var name$6 = 'VdtSwitchInput';
 function SwitchInput(_ref) {
   var inputName = _ref.name,
       label = _ref.label,
@@ -3870,16 +4672,16 @@ function SwitchInput(_ref) {
 
   var isError = !!error;
   var errorText = (error || '').trim();
-  return /*#__PURE__*/jsxs(FormControl, _objectSpread$5(_objectSpread$5({
+  return /*#__PURE__*/jsxs(FormControl, _objectSpread$7(_objectSpread$7({
     error: isError,
     required: required,
     disabled: disabled,
     fullWidth: fullWidth
   }, componentProps.root), {}, {
-    children: [/*#__PURE__*/jsx(FormControlLabel, _objectSpread$5({
+    children: [/*#__PURE__*/jsx(FormControlLabel, _objectSpread$7({
       label: required ? "".concat(label, " *") : label,
       labelPlacement: !label ? 'end' : labelPlacement,
-      control: /*#__PURE__*/jsx(Switch, _objectSpread$5(_objectSpread$5({
+      control: /*#__PURE__*/jsx(Switch, _objectSpread$7(_objectSpread$7({
         id: inputName,
         name: inputName,
         checked: value,
@@ -3892,7 +4694,7 @@ function SwitchInput(_ref) {
         onBlur: onBlur,
         onFocus: onFocus
       }, componentProps["switch"]))
-    }, componentProps.formControlLabel)), (errorText || helperText) && /*#__PURE__*/jsx(FormHelperText, _objectSpread$5(_objectSpread$5({
+    }, componentProps.formControlLabel)), (errorText || helperText) && /*#__PURE__*/jsx(FormHelperText, _objectSpread$7(_objectSpread$7({
       sx: fullWidth ? {
         textAlign: mapLabelPlacementToTextAlign[labelPlacement]
       } : {}
@@ -4021,18 +4823,18 @@ SwitchInput.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$4 = withOverrides(defaultComponents$4, {
-  name: name$4
+var ComponentWithOverrides$6 = withOverrides(defaultComponents$6, {
+  name: name$6
 })(SwitchInput);
-var Component$4 = withStyles(styles$4, {
-  name: name$4
-})(ComponentWithOverrides$4);
-Component$4.displayName = 'SwitchInput';
+var Component$6 = withStyles(styles$6, {
+  name: name$6
+})(ComponentWithOverrides$6);
+Component$6.displayName = 'SwitchInput';
 
-function ownKeys$4(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 ownKeys$6(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$3 = function styles(theme) {
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$5 = function styles(theme) {
   return {
     root: {},
     formControlLabel: {
@@ -4044,13 +4846,13 @@ var styles$3 = function styles(theme) {
     checkbox: {}
   };
 };
-var defaultComponents$3 = {
+var defaultComponents$5 = {
   Root: FormControl,
   FormControlLabel: FormControlLabel,
   FormHelperText: FormHelperText,
   Checkbox: Checkbox
 };
-var name$3 = 'VdtCheckboxInput';
+var name$5 = 'VdtCheckboxInput';
 function CheckboxInput(_ref) {
   var inputName = _ref.name,
       label = _ref.label,
@@ -4095,16 +4897,16 @@ function CheckboxInput(_ref) {
   var isControlled = value !== undefined;
   var isError = !!error;
   var errorText = (error || '').trim();
-  return /*#__PURE__*/jsxs(FormControl, _objectSpread$4(_objectSpread$4({
+  return /*#__PURE__*/jsxs(FormControl, _objectSpread$6(_objectSpread$6({
     error: isError,
     required: required,
     disabled: disabled,
     fullWidth: fullWidth
   }, componentProps.root), {}, {
-    children: [/*#__PURE__*/jsx(FormControlLabel, _objectSpread$4({
+    children: [/*#__PURE__*/jsx(FormControlLabel, _objectSpread$6({
       label: required ? "".concat(label, " *") : label,
       labelPlacement: !label ? 'end' : labelPlacement,
-      control: /*#__PURE__*/jsx(Checkbox, _objectSpread$4(_objectSpread$4(_objectSpread$4({
+      control: /*#__PURE__*/jsx(Checkbox, _objectSpread$6(_objectSpread$6(_objectSpread$6({
         id: inputName,
         name: inputName
       }, isControlled ? {
@@ -4120,7 +4922,7 @@ function CheckboxInput(_ref) {
         onBlur: onBlur,
         onFocus: onFocus
       }, componentProps.checkbox))
-    }, componentProps.formControlLabel)), (errorText || helperText) && /*#__PURE__*/jsx(FormHelperText, _objectSpread$4(_objectSpread$4({
+    }, componentProps.formControlLabel)), (errorText || helperText) && /*#__PURE__*/jsx(FormHelperText, _objectSpread$6(_objectSpread$6({
       sx: fullWidth ? {
         textAlign: mapLabelPlacementToTextAlign[labelPlacement]
       } : {}
@@ -4257,26 +5059,26 @@ CheckboxInput.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$3 = withOverrides(defaultComponents$3, {
-  name: name$3
+var ComponentWithOverrides$5 = withOverrides(defaultComponents$5, {
+  name: name$5
 })(CheckboxInput);
-var Component$3 = withStyles(styles$3, {
-  name: name$3
-})(ComponentWithOverrides$3);
-Component$3.displayName = 'CheckboxInput';
+var Component$5 = withStyles(styles$5, {
+  name: name$5
+})(ComponentWithOverrides$5);
+Component$5.displayName = 'CheckboxInput';
 
-function ownKeys$3(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 ownKeys$5(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$2 = function styles() {
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$4 = function styles() {
   return {
     root: {}
   };
 };
-var defaultComponents$2 = {
+var defaultComponents$4 = {
   Root: TextField
 };
-var name$2 = 'VdtDateTimeInput';
+var name$4 = 'VdtDateTimeInput';
 function DateTimeInput(_ref) {
   var inputName = _ref.name,
       label = _ref.label,
@@ -4306,7 +5108,7 @@ function DateTimeInput(_ref) {
 
   var isControlled = value !== undefined;
   var isError = !!error;
-  return /*#__PURE__*/jsx(TextField, _objectSpread$3(_objectSpread$3({
+  return /*#__PURE__*/jsx(TextField, _objectSpread$5(_objectSpread$5({
     id: inputName,
     name: inputName,
     label: label
@@ -4450,20 +5252,20 @@ DateTimeInput.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$2 = withOverrides(defaultComponents$2, {
-  name: name$2
+var ComponentWithOverrides$4 = withOverrides(defaultComponents$4, {
+  name: name$4
 })(DateTimeInput);
-var Component$2 = withStyles(styles$2, {
-  name: name$2
-})(ComponentWithOverrides$2);
-Component$2.displayName = 'DateTimeInput';
+var Component$4 = withStyles(styles$4, {
+  name: name$4
+})(ComponentWithOverrides$4);
+Component$4.displayName = 'DateTimeInput';
 
-var _excluded = ["id", "value", "defaultValue", "options", "range", "min", "max", "step", "marks", "infiniteMin", "infiniteMax", "infiniteDiff", "showMarks", "showTooltip", "valueFromOptions", "onChange"],
+var _excluded$2 = ["id", "value", "defaultValue", "options", "range", "min", "max", "step", "marks", "infiniteMin", "infiniteMax", "infiniteDiff", "showMarks", "showTooltip", "valueFromOptions", "onChange"],
     _excluded2 = ["vdtClassNames", "className", "autoComplete", "rows", "type"];
 
-function ownKeys$2(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 ownKeys$4(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var INFINITE_MIN_LABEL = 'Min';
 var INFINITE_MIN_VALUE = -Number.MAX_SAFE_INTEGER;
 var INFINITE_MAX_LABEL = 'Max';
@@ -4491,7 +5293,7 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
       showTooltip = _ref.showTooltip,
       valueFromOptions = _ref.valueFromOptions,
       onChange = _ref.onChange,
-      props = _objectWithoutProperties(_ref, _excluded);
+      props = _objectWithoutProperties(_ref, _excluded$2);
 
   var className = props.vdtClassNames;
       props.className;
@@ -4603,7 +5405,7 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var isControlled = value !== undefined;
   var localValue = isControlled ? range && [Math.min.apply(Math, _toConsumableArray(value || valueRef.current)), Math.max.apply(Math, _toConsumableArray(value || valueRef.current))] || value : valueRef.current;
-  return /*#__PURE__*/jsx(Slider$1, _objectSpread$2(_objectSpread$2(_objectSpread$2({
+  return /*#__PURE__*/jsx(Slider$1, _objectSpread$4(_objectSpread$4(_objectSpread$4({
     id: id,
     ref: ref,
     className: className
@@ -4661,10 +5463,10 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, sliderProps));
 });
 
-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; }
+function ownKeys$3(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles$1 = function styles() {
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$3 = function styles() {
   return {
     root: {},
     formHelperText: {},
@@ -4715,7 +5517,7 @@ var styles$1 = function styles() {
     }
   };
 };
-var defaultComponents$1 = {
+var defaultComponents$3 = {
   Root: FormControl,
   FormHelperText: FormHelperText,
   InputLabel: InputLabel,
@@ -4724,7 +5526,7 @@ var defaultComponents$1 = {
   OutlinedInput: OutlinedInput,
   Slider: Slider
 };
-var name$1 = 'VdtSliderInput';
+var name$3 = 'VdtSliderInput';
 function SliderInput(_ref) {
   var inputName = _ref.name,
       label = _ref.label,
@@ -4766,20 +5568,20 @@ function SliderInput(_ref) {
     outlined: OutlinedInput
   }[variant];
   var inputComponentProps = {
-    standard: _objectSpread$1({
+    standard: _objectSpread$3({
       disableUnderline: true
     }, componentProps.input),
-    filled: _objectSpread$1({
+    filled: _objectSpread$3({
       disableUnderline: true
     }, componentProps.filledInput),
-    outlined: _objectSpread$1({
+    outlined: _objectSpread$3({
       label: label,
       notched: true
     }, componentProps.outlinedInput)
   }[variant];
   var isError = !!error;
   var errorText = (error || '').trim();
-  return /*#__PURE__*/jsxs(FormControl, _objectSpread$1(_objectSpread$1({
+  return /*#__PURE__*/jsxs(FormControl, _objectSpread$3(_objectSpread$3({
     error: isError,
     required: required,
     disabled: disabled,
@@ -4787,18 +5589,18 @@ function SliderInput(_ref) {
     size: size,
     fullWidth: true
   }, componentProps.root), {}, {
-    children: [/*#__PURE__*/jsx(InputLabel, _objectSpread$1(_objectSpread$1({
+    children: [/*#__PURE__*/jsx(InputLabel, _objectSpread$3(_objectSpread$3({
       htmlFor: inputName,
       id: "".concat(inputName, "-label"),
       shrink: true
     }, componentProps.inputLabel), {}, {
       children: label
-    })), /*#__PURE__*/jsx(InputComponent, _objectSpread$1({
+    })), /*#__PURE__*/jsx(InputComponent, _objectSpread$3({
       id: inputName,
       name: inputName,
       size: size,
       inputComponent: Slider,
-      inputProps: _objectSpread$1({
+      inputProps: _objectSpread$3({
         value: value,
         defaultValue: defaultValue,
         options: options,
@@ -4820,7 +5622,7 @@ function SliderInput(_ref) {
         'aria-labelledby': "".concat(inputName, "-label"),
         vdtClassNames: componentProps.slider.className
       }, componentProps.slider)
-    }, inputComponentProps)), (errorText || helperText) && /*#__PURE__*/jsx(FormHelperText, _objectSpread$1(_objectSpread$1({}, componentProps.formHelperText), {}, {
+    }, inputComponentProps)), (errorText || helperText) && /*#__PURE__*/jsx(FormHelperText, _objectSpread$3(_objectSpread$3({}, componentProps.formHelperText), {}, {
       children: isError ? errorText : helperText
     }))]
   }));
@@ -5047,26 +5849,26 @@ SliderInput.defaultProps = {
   componentProps: undefined
 };
 
-var ComponentWithOverrides$1 = withOverrides(defaultComponents$1, {
-  name: name$1
+var ComponentWithOverrides$3 = withOverrides(defaultComponents$3, {
+  name: name$3
 })(SliderInput);
-var Component$1 = withStyles(styles$1, {
-  name: name$1
-})(ComponentWithOverrides$1);
-Component$1.displayName = 'SliderInput';
+var Component$3 = withStyles(styles$3, {
+  name: name$3
+})(ComponentWithOverrides$3);
+Component$3.displayName = 'SliderInput';
 
-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; }
+function ownKeys$2(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var styles = function styles() {
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$2 = function styles() {
   return {
     root: {}
   };
 };
-var defaultComponents = {
+var defaultComponents$2 = {
   Root: TextField
 };
-var name = 'VdtNumberInput';
+var name$2 = 'VdtNumberInput';
 function NumberInput(_ref) {
   var inputName = _ref.name,
       label = _ref.label,
@@ -5098,7 +5900,7 @@ function NumberInput(_ref) {
   var isControlled = value !== undefined;
   var isError = !!error;
   var errorText = (error || '').trim();
-  return /*#__PURE__*/jsx(TextField, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsx(TextField, _objectSpread$2(_objectSpread$2({
     id: inputName,
     name: inputName,
     label: label
@@ -5243,12 +6045,192 @@ NumberInput.defaultProps = {
   componentProps: undefined
 };
 
+var ComponentWithOverrides$2 = withOverrides(defaultComponents$2, {
+  name: name$2
+})(NumberInput);
+var Component$2 = withStyles(styles$2, {
+  name: name$2
+})(ComponentWithOverrides$2);
+Component$2.displayName = 'NumberInput';
+
+var _excluded$1 = ["shape", "components", "componentProps"];
+
+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; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles$1 = function styles() {
+  return {
+    root: {}
+  };
+};
+var defaultComponents$1 = {
+  Root: Component$g
+};
+var name$1 = 'ShapeMediaBadges';
+function ShapeMediaBadges(_ref) {
+  var shape = _ref.shape,
+      components = _ref.components,
+      componentProps = _ref.componentProps,
+      props = _objectWithoutProperties(_ref, _excluded$1);
+
+  var Root = components.Root;
+  return /*#__PURE__*/jsx(Root, _objectSpread$1(_objectSpread$1({
+    input: parseShapeType(shape)
+  }, props), componentProps.root));
+}
+ShapeMediaBadges.propTypes = {
+  /**
+   * A shape type to generate badges from
+   */
+  shape: VidispinePropTypes.ShapeType,
+
+  /**
+   * Direction the badges should be displayed
+   */
+  direction: PropTypes.oneOf(['column', 'row']),
+
+  /**
+   * Defines the space between immediate children.
+   */
+  spacing: PropTypes.number,
+
+  /**
+   * Add a divider component between badges
+   */
+  dividerSlot: PropTypes.node,
+  // Overrides
+
+  /**
+   * Override styles with className
+   */
+  className: PropTypes.string,
+
+  /**
+   * Override or extend the styles applied to the component
+   */
+  classes: PropTypes.instanceOf(Object),
+
+  /**
+   * Replace internal components
+   */
+  components: PropTypes.shape({
+    Root: PropTypes.elementType
+  }),
+
+  /**
+   * Add internal component props
+   */
+  componentProps: PropTypes.shape({
+    root: PropTypes.instanceOf(Object)
+  })
+};
+ShapeMediaBadges.defaultProps = {
+  shape: {},
+  direction: 'row',
+  spacing: 1,
+  dividerSlot: undefined,
+  classes: undefined,
+  className: undefined,
+  components: undefined,
+  componentProps: undefined
+};
+
+var ComponentWithOverrides$1 = withOverrides(defaultComponents$1, {
+  name: name$1
+})(ShapeMediaBadges);
+var Component$1 = withStyles(styles$1, {
+  name: name$1
+})(ComponentWithOverrides$1);
+Component$1.displayName = 'ShapeMediaBadges';
+
+var _excluded = ["transcodePreset", "components", "componentProps"];
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var styles = function styles() {
+  return {
+    root: {}
+  };
+};
+var defaultComponents = {
+  Root: Component$g
+};
+var name = 'TranscodePresetMediaBadges';
+function TranscodePresetMediaBadges(_ref) {
+  var transcodePreset = _ref.transcodePreset,
+      components = _ref.components,
+      componentProps = _ref.componentProps,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var Root = components.Root;
+  return /*#__PURE__*/jsx(Root, _objectSpread(_objectSpread({
+    input: parseTranscodePreset(transcodePreset)
+  }, props), componentProps.root));
+}
+TranscodePresetMediaBadges.propTypes = {
+  /**
+   * A transcode preset type to generate badges from
+   */
+  transcodePreset: VidispinePropTypes.TranscodePresetType,
+
+  /**
+   * Direction the badges should be displayed
+   */
+  direction: PropTypes.oneOf(['column', 'row']),
+
+  /**
+   * Defines the space between immediate children.
+   */
+  spacing: PropTypes.number,
+
+  /**
+   * Add a divider component between badges
+   */
+  dividerSlot: PropTypes.node,
+  // Overrides
+
+  /**
+   * Override styles with className
+   */
+  className: PropTypes.string,
+
+  /**
+   * Override or extend the styles applied to the component
+   */
+  classes: PropTypes.instanceOf(Object),
+
+  /**
+   * Replace internal components
+   */
+  components: PropTypes.shape({
+    Root: PropTypes.elementType
+  }),
+
+  /**
+   * Add internal component props
+   */
+  componentProps: PropTypes.shape({
+    root: PropTypes.instanceOf(Object)
+  })
+};
+TranscodePresetMediaBadges.defaultProps = {
+  transcodePreset: undefined,
+  direction: 'row',
+  spacing: 1,
+  dividerSlot: undefined,
+  classes: undefined,
+  className: undefined,
+  components: undefined,
+  componentProps: undefined
+};
+
 var ComponentWithOverrides = withOverrides(defaultComponents, {
   name: name
-})(NumberInput);
+})(TranscodePresetMediaBadges);
 var Component = withStyles(styles, {
   name: name
 })(ComponentWithOverrides);
-Component.displayName = 'NumberInput';
+Component.displayName = 'TranscodePresetMediaBadges';
 
-export { Component$9 as CheckboxGroupInput, Component$3 as CheckboxInput, Component$e as CollectionList, Component$f as CollectionListItem, Component$2 as DateTimeInput, Component$g as EntityAvatar, Component$h as EntityIcon, Component$c as EntityList, Component$b as ImageCollage, Component$a as ItemList, Component$d as ItemListItem, Component$i as MediaIcon, Component as NumberInput, Component$5 as RadioGroupInput, Component$8 as SelectInput, Component$1 as SliderInput, Component$4 as SwitchInput, Component$6 as TagInput, Component$7 as TextInput, ThemeProvider, useThemeContext };
+export { Component$b as CheckboxGroupInput, Component$5 as CheckboxInput, Component$k as CollectionList, Component$l as CollectionListItem, Component$4 as DateTimeInput, Component$m as EntityAvatar, Component$n as EntityIcon, Component$i as EntityList, Component$f as ImageCollage, Component$c as ItemList, Component$j as ItemListItem, Component$h as MediaBadge, Component$g as MediaBadgeStack, Component$o as MediaIcon, Component$2 as NumberInput, Component$7 as RadioGroupInput, Component$a as SelectInput, Component$1 as ShapeMediaBadges, Component$3 as SliderInput, Component$d as Sort, Component$6 as SwitchInput, Component$e as TablePagination, Component$8 as TagInput, Component$9 as TextInput, ThemeProvider, Component as TranscodePresetMediaBadges, useThemeContext };