npm - @ntbjs/react-components - Versions diffs - 0.0.1-beta.44 → 0.0.1-beta.46 - Mend

@ntbjs/react-components 0.0.1-beta.44 → 0.0.1-beta.46

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

Files changed (25) hide show

package/{ActionButton-10a681b9.js → ActionButton-9e502e55.js} +9 -9
package/{AssetGallery-bd8b2316.js → AssetGallery-247242ac.js} +319 -384
package/{Button-6f6b4ed4.js → Button-88652184.js} +34 -41
package/{Checkbox-791a409f.js → Checkbox-25c75a7c.js} +27 -35
package/{Popover-0ff13419.js → Popover-6ca643ba.js} +15 -15
package/{Radio-9271a4b6.js → Radio-1521b33c.js} +14 -17
package/{TextArea-70a74014.js → TextArea-a73b1729.js} +23 -30
package/{TextInput-770f2416.js → TextInput-143d6346.js} +25 -32
package/{Tooltip-85e7d561.js → Tooltip-25b6f5fa.js} +11 -11
package/data/Popover/index.js +2 -2
package/data/index.js +3 -3
package/{defaultTheme-18d7c1ee.js → defaultTheme-d8298500.js} +94 -105
package/icons/audio.svg +3 -0
package/icons/headset.svg +1 -0
package/inputs/ActionButton/index.js +2 -2
package/inputs/Button/index.js +2 -2
package/inputs/Checkbox/index.js +2 -2
package/inputs/Radio/index.js +2 -2
package/inputs/TextArea/index.js +2 -2
package/inputs/TextInput/index.js +2 -2
package/inputs/index.js +7 -7
package/package.json +10 -8
package/ssr/index.js +1 -3
package/widgets/AssetGallery/index.js +10 -10
package/widgets/index.js +10 -10

package/{AssetGallery-bd8b2316.js → AssetGallery-247242ac.js} RENAMED Viewed

@@ -1,18 +1,18 @@
 'use strict';
-var defaultTheme = require('./defaultTheme-18d7c1ee.js');
+var defaultTheme = require('./defaultTheme-d8298500.js');
 var React = require('react');
 var lodash = require('lodash');
 var ResizeObserver = require('resize-observer-polyfill');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
-var ActionButton = require('./ActionButton-10a681b9.js');
-require('./Button-6f6b4ed4.js');
-require('./Checkbox-791a409f.js');
-require('./Radio-9271a4b6.js');
-require('./TextArea-70a74014.js');
-require('./TextInput-770f2416.js');
-require('./Popover-0ff13419.js');
-var Tooltip = require('./Tooltip-85e7d561.js');
+var ActionButton = require('./ActionButton-9e502e55.js');
+require('./Button-88652184.js');
+require('./Checkbox-25c75a7c.js');
+require('./Radio-1521b33c.js');
+require('./TextArea-a73b1729.js');
+require('./TextInput-143d6346.js');
+require('./Popover-6ca643ba.js');
+var Tooltip = require('./Tooltip-25b6f5fa.js');
 var styled = require('styled-components');
 var polished = require('polished');
@@ -27,14 +27,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
@@ -92,7 +90,7 @@ var assetShape = {
   }),
   width: defaultTheme.PropTypes.number,
   height: defaultTheme.PropTypes.number,
-  fileType: defaultTheme.PropTypes.oneOf(['image', 'video', 'pdf', 'file']).isRequired,
+  fileType: defaultTheme.PropTypes.oneOf(['image', 'video', 'pdf', 'file', 'audio']).isRequired,
   fileTypeIconPosition: defaultTheme.PropTypes.oneOf(['top-left', 'top-right']),
   group: defaultTheme.PropTypes.string,
   actions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
@@ -124,233 +122,227 @@ var assetShapeWithLayout = defaultTheme._objectSpread2(defaultTheme._objectSprea
 var css_248z = ".lazy-load-image-background.opacity {\n  opacity: 0;\n}\n\n.lazy-load-image-background.opacity.lazy-load-image-loaded {\n  opacity: 1;\n  transition: opacity .3s;\n}\n";
 defaultTheme.styleInject(css_248z);
-var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
-var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  ", ";\n  ", ";\n\n  ", "\n  video {\n    width: 100%;\n    height: 100%;\n  }\n"])), function (props) {
+var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
+var AssetGalleryCompactCard$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  ", ";\n  ", ";\n\n  ", "\n  video {\n    width: 100%;\n    height: 100%;\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
 }, function (props) {
   return props.disabled && styled.css(_templateObject2$2 || (_templateObject2$2 = defaultTheme._taggedTemplateLiteral(["\n      pointer-events: none;\n      opacity: 0.4;\n    "])));
 }, function (props) {
   return props.extendedSelectMode && styled.css(_templateObject3$2 || (_templateObject3$2 = defaultTheme._taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
 });
-var Figure = styled__default['default'].figure(_templateObject4$1 || (_templateObject4$1 = defaultTheme._taggedTemplateLiteral(["\n  margin: 0;\n  width: 100%;\n  height: 100%;\n\n  .lazy-load-image-background {\n    display: block !important;\n  }\n\n  img {\n    display: block;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n"])), function (props) {
+var Figure = styled__default["default"].figure(_templateObject4$1 || (_templateObject4$1 = defaultTheme._taggedTemplateLiteral(["\n  margin: 0;\n  width: 100%;\n  height: 100%;\n\n  .lazy-load-image-background {\n    display: block !important;\n  }\n\n  img {\n    display: block;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n"])), function (props) {
   return props.hasHeightAndWidth ? styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n            object-fit: cover;\n          "]))) : styled.css(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n            object-fit: contain;\n          "])));
 });
-var Overlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n"])));
-var OverlayBackdrop = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  opacity: 0;\n  background: linear-gradient(rgba(0, 0, 0, 0.6), transparent 70%, rgba(0, 0, 0, 0.6));\n  transition: opacity 220ms;\n\n  ", "\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
+var Overlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n"])));
+var OverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  opacity: 0;\n  background: linear-gradient(rgba(0, 0, 0, 0.6), transparent 70%, rgba(0, 0, 0, 0.6));\n  transition: opacity 220ms;\n\n  ", "\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
   return props.softSelected && styled.css(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 1;\n    "])));
 }, Overlay);
-var OverlayInfo = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 15px 12px 10px;\n  color: ", ";\n"])), function (props) {
+var OverlayInfo = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 15px 12px 10px;\n  color: ", ";\n"])), function (props) {
   return props.theme.getColor('gray-100');
 });
-var OverlayInfoTopTitleAndFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n"])));
-var OverlayInfoTopTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n  flex-grow: 1;\n  font-family: ", ";\n  font-weight: 400;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  margin-right: 20px;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", "\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
+var OverlayInfoTopTitleAndFileType = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n"])));
+var OverlayInfoTopTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n  flex-grow: 1;\n  font-family: ", ";\n  font-weight: 400;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  margin-right: 20px;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", "\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
   return props.theme.primaryFontFamily;
 }, function (props) {
   return props.softSelected && styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 1;\n    "])));
 }, Overlay);
-var OverlayInfoTopFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n  flex-shrink: 0;\n  width: auto;\n  max-width: 19px;\n  max-height: 19px;\n"])));
-var OverlayInfoTopNoteAndFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$1 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n"])));
-var OverlayInfoTopNote = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  padding-top: 5px;\n  transform: translate3d(0, -100%, 0);\n  transition: transform 250ms;\n\n  svg {\n    max-width: 20px;\n    max-height: 20px;\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  ", ":hover && {\n    ", "\n  }\n"])), Overlay, function (props) {
+var OverlayInfoTopFileType = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n  flex-shrink: 0;\n  width: auto;\n  max-width: 19px;\n  max-height: 19px;\n"])));
+var OverlayInfoTopNoteAndFileType = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$1 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n"])));
+var OverlayInfoTopNote = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  padding-top: 5px;\n  transform: translate3d(0, -100%, 0);\n  transition: transform 250ms;\n\n  svg {\n    max-width: 20px;\n    max-height: 20px;\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  ", ":hover && {\n    ", "\n  }\n"])), Overlay, function (props) {
   var _props$assetTitle;
   return ((_props$assetTitle = props.assetTitle) === null || _props$assetTitle === void 0 ? void 0 : _props$assetTitle.trim().length) > 0 ? styled.css(_templateObject17$1 || (_templateObject17$1 = defaultTheme._taggedTemplateLiteral(["\n            transform: translate3d(0, 0, 0);\n          "]))) : styled.css(_templateObject18$1 || (_templateObject18$1 = defaultTheme._taggedTemplateLiteral(["\n            transform: translate3d(0, -100%, 0);\n          "])));
 });
-var OverlayInfoTopFileTypeTopLeft = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  padding-top: 5px;\n  transform: translate3d(0, -100%, 0);\n  transition: transform 250ms;\n  margin-right: 5px;\n\n  svg {\n    max-width: 20px;\n    max-height: 20px;\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  ", ":hover && {\n    ", "\n  }\n"])), Overlay, function (props) {
+var OverlayInfoTopFileTypeTopLeft = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  padding-top: 5px;\n  transform: translate3d(0, -100%, 0);\n  transition: transform 250ms;\n  margin-right: 5px;\n\n  svg {\n    max-width: 20px;\n    max-height: 20px;\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  ", ":hover && {\n    ", "\n  }\n"])), Overlay, function (props) {
   var _props$assetTitle2;
-  return ((_props$assetTitle2 = props.assetTitle) === null || _props$assetTitle2 === void 0 ? void 0 : _props$assetTitle2.trim().length) > 0 ? styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n            transform: translate3d(0, 0, 0);\n          "]))) : styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n            transform: translate3d(0, -100%, 0);\n          "])));
+  return ((_props$assetTitle2 = props.assetTitle) === null || _props$assetTitle2 === void 0 ? void 0 : _props$assetTitle2.trim().length) > 0 ? styled.css(_templateObject20$1 || (_templateObject20$1 = defaultTheme._taggedTemplateLiteral(["\n            transform: translate3d(0, 0, 0);\n          "]))) : styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n            transform: translate3d(0, -100%, 0);\n          "])));
 });
-var OverlayInfoTopNoteTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-weight: 400;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  margin-left: 5px;\n  opacity: 0;\n  transition: opacity 250ms;\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
+var OverlayInfoTopNoteTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-weight: 400;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  margin-left: 5px;\n  opacity: 0;\n  transition: opacity 250ms;\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
   return props.theme.primaryFontFamily;
 }, Overlay);
-var OverlayCompleted$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 4px solid\n    ", ";\n"])), function (props) {
+var OverlayCompleted$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 4px solid\n    ", ";\n"])), function (props) {
   return !props.softSelected && polished.rgba(props.theme.getColor('emerald-500'), 0.7);
 });
-var OverlayHasError$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 4px solid ", ";\n"])), function (props) {
+var OverlayHasError$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 4px solid ", ";\n"])), function (props) {
   return !props.softSelected && polished.rgba(props.theme.getColor('red-500'), 0.7);
 });
-var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 4px solid\n    ", ";\n"])), function (props) {
+var OverlaySelected$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 4px solid\n    ", ";\n"])), function (props) {
   return props.softSelected ? polished.rgba(props.theme.getColor('orange-500'), 0.5) : props.selected ? props.theme.getColor('orange-500') : 'transparent';
 });
-var OverlayInfoBottom = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n"])));
-var OverlayInfoBottomSelectButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n  opacity: ", ";\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: opacity 220ms;\n\n  > svg {\n    width: 23px;\n    height: 100%;\n    transition: color 120ms;\n    color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
+var OverlayInfoBottom = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n"])));
+var OverlayInfoBottomSelectButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n  opacity: ", ";\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: opacity 220ms;\n\n  > svg {\n    width: 23px;\n    height: 100%;\n    transition: color 120ms;\n    color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
   return props.selected ? 1 : 0;
 }, function (props) {
   return props.selected ? props.theme.getColor('orange-500') : 'inherit';
 }, Overlay);
-var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin-left: auto;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), Overlay);
-var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n"])));
-var Fragment$1 = styled__default['default'].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
-function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
-var _ref$4 = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M12 0a12 12 0 1012 12A12 12 0 0012 0zM9.6 18l-6-6 1.69-1.69L9.6 14.6l9.11-9.1 1.69 1.7z",
-  fillOpacity: 0.9
-});
+var OverlayInfoBottomActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin-left: auto;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), Overlay);
+var ConsumerDefinedOverlay$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n"])));
+var Fragment$1 = styled__default["default"].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
+var _path$6;
+function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
 function SvgCheckCircleFilled(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24"
-  }, props), _ref$4);
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M12 0a12 12 0 1012 12A12 12 0 0012 0zM9.6 18l-6-6 1.69-1.69L9.6 14.6l9.11-9.1 1.69 1.7z",
+    fillOpacity: 0.9
+  })));
 }
-function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-var _ref$3 = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M10.8 15.6h2.4V18h-2.4zm0-9.6h2.4v7.2h-2.4zm1.188-6A12 12 0 1024 12 11.994 11.994 0 0011.988 0zM12 21.6a9.6 9.6 0 119.6-9.6 9.597 9.597 0 01-9.6 9.6z"
-});
+var _path$5;
+function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 function SvgWarningCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24"
-  }, props), _ref$3);
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M10.8 15.6h2.4V18h-2.4zm0-9.6h2.4v7.2h-2.4zm1.188-6A12 12 0 1024 12 11.994 11.994 0 0011.988 0zM12 21.6a9.6 9.6 0 119.6-9.6 9.597 9.597 0 01-9.6 9.6z"
+  })));
 }
-function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-var _ref$2 = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M3.43 6.24l9 5.76-9 5.76V6.24M0 0v24l18.86-12z"
-});
+var _path$4;
+function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 function SvgPlay(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 18.86 24"
-  }, props), _ref$2);
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M3.43 6.24l9 5.76-9 5.76V6.24M0 0v24l18.86-12z"
+  })));
 }
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-var _ref$1 = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M21 0H3A3 3 0 00.05 2.9V21A3 3 0 003 24h18.1a3 3 0 002.95-3V3A3.11 3.11 0 0021 0zm0 21H3V3h18.1v18zm-6-6v-4.52a1.56 1.56 0 00-1.55-1.55h-3.01v7.58h2.94A1.47 1.47 0 0014.93 15zm-3-4.52h1.54V15H12zm6 3.08h1.55V12H18v-1.52h1.55V9.07h-2.94v7.58h1.55v-3.09zm-12.07 0h1.56A1.55 1.55 0 009 12v-1.52a1.56 1.56 0 00-1.51-1.55H4.4v7.58h1.54zm0-3.08h1.56V12H5.94z"
-});
+var _path$3;
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 function SvgPdf(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24"
-  }, props), _ref$1);
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M21 0H3A3 3 0 00.05 2.9V21A3 3 0 003 24h18.1a3 3 0 002.95-3V3A3.11 3.11 0 0021 0zm0 21H3V3h18.1v18zm-6-6v-4.52a1.56 1.56 0 00-1.55-1.55h-3.01v7.58h2.94A1.47 1.47 0 0014.93 15zm-3-4.52h1.54V15H12zm6 3.08h1.55V12H18v-1.52h1.55V9.07h-2.94v7.58h1.55v-3.09zm-12.07 0h1.56A1.55 1.55 0 009 12v-1.52a1.56 1.56 0 00-1.51-1.55H4.4v7.58h1.54zm0-3.08h1.56V12H5.94z"
+  })));
 }
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _path$2;
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function SvgFile(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 19.2 24"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M12 0H2.4A2.4 2.4 0 000 2.4v19.2A2.4 2.4 0 002.39 24H16.8a2.41 2.41 0 002.4-2.4V7.2zM2.4 21.6V2.4h8.4v6h6v13.2z"
+  })));
+}
-var _ref = /*#__PURE__*/React__namespace.createElement("path", {
-  fill: "currentColor",
-  d: "M12 0H2.4A2.4 2.4 0 000 2.4v19.2A2.4 2.4 0 002.39 24H16.8a2.41 2.41 0 002.4-2.4V7.2zM2.4 21.6V2.4h8.4v6h6v13.2z"
-});
+var _path$1;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function SvgAudio(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18.86 24"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M10 21q-1.65 0-2.825-1.175Q6 18.65 6 17q0-1.65 1.175-2.825Q8.35 13 10 13q.575 0 1.062.137.488.138.938.413V3h6v4h-4v10q0 1.65-1.175 2.825Q11.65 21 10 21z"
+  })));
+}
-function SvgFile(props) {
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function SvgHeadset(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 19.2 24"
-  }, props), _ref);
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M9 21H5q-.825 0-1.413-.587Q3 19.825 3 19v-7q0-1.875.712-3.513.713-1.637 1.926-2.85 1.212-1.212 2.85-1.925Q10.125 3 12 3t3.513.712q1.637.713 2.85 1.925 1.212 1.213 1.925 2.85Q21 10.125 21 12v7q0 .825-.587 1.413Q19.825 21 19 21h-4v-8h4v-1q0-2.925-2.038-4.963Q14.925 5 12 5T7.038 7.037Q5 9.075 5 12v1h4zm-2-6H5v4h2zm10 0v4h2v-4zm0 0h2-2zM7 15H5z"
+  })));
 }
+var _excluded$3 = ["component", "asset"],
+  _excluded2$1 = ["component", "className"];
 var ComputedRootComponent$1 = function ComputedRootComponent(_ref) {
   var component = _ref.component,
-      asset = _ref.asset,
-      props = defaultTheme._objectWithoutProperties(_ref, ["component", "asset"]);
+    asset = _ref.asset,
+    props = defaultTheme._objectWithoutProperties(_ref, _excluded$3);
   var newProps = lodash.omit(props, ['theme', 'extendedSelectMode']);
   if (component) {
     if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
-    if (React__default['default'].isValidElement(component(asset, newProps.children))) {
-      return React__default['default'].cloneElement(component(asset, newProps.children), lodash.omit(newProps, ['children']));
+    if (React__default["default"].isValidElement(component(asset, newProps.children))) {
+      return React__default["default"].cloneElement(component(asset, newProps.children), lodash.omit(newProps, ['children']));
     }
   }
-  return React__default['default'].createElement(AssetGalleryCompactCard$2, defaultTheme._extends({
+  return React__default["default"].createElement(AssetGalleryCompactCard$2, defaultTheme._extends({
     ref: newProps.innerRef
   }, newProps));
 };
-var ComputedActionButton$1 = React__default['default'].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
+var ComputedActionButton$1 = React__default["default"].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
   var component = _ref2.component,
-      className = _ref2.className,
-      props = defaultTheme._objectWithoutProperties(_ref2, ["component", "className"]);
+    className = _ref2.className,
+    props = defaultTheme._objectWithoutProperties(_ref2, _excluded2$1);
   var newProps = props;
-  newProps.children = React__default['default'].createElement(ActionButton.ActionButton, {
+  newProps.children = React__default["default"].createElement(ActionButton.ActionButton, {
     ref: forwardedRef,
     className: className,
     icon: newProps.icon,
     onClick: newProps.onClick
   });
   if (component) {
     if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
-    if (React__default['default'].isValidElement(component())) {
-      return React__default['default'].cloneElement(component(), defaultTheme._objectSpread2({}, lodash.omit(newProps, 'icon')));
+    if (React__default["default"].isValidElement(component())) {
+      return React__default["default"].cloneElement(component(), defaultTheme._objectSpread2({}, lodash.omit(newProps, 'icon')));
     }
   }
-  return React__default['default'].createElement(React__default['default'].Fragment, null, newProps.children);
+  return React__default["default"].createElement(React__default["default"].Fragment, null, newProps.children);
 });
 var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
   var _asset$note;
   var asset = props.asset,
-      selectable = props.selectable,
-      hasHeightAndWidth = props.hasHeightAndWidth,
-      selected = props.selected,
-      extendedSelectMode = props.extendedSelectMode,
-      onAssetSelected = props.onAssetSelected,
-      onAssetUnselected = props.onAssetUnselected,
-      softSelected = props.softSelected,
-      component = props.component,
-      scrollPosition = props.scrollPosition;
+    selectable = props.selectable,
+    hasHeightAndWidth = props.hasHeightAndWidth,
+    selected = props.selected,
+    extendedSelectMode = props.extendedSelectMode,
+    onAssetSelected = props.onAssetSelected,
+    onAssetUnselected = props.onAssetUnselected,
+    softSelected = props.softSelected,
+    component = props.component,
+    scrollPosition = props.scrollPosition;
   function onClick(event) {
     if (extendedSelectMode) {
       return onSelectClick(event);
     }
     if (lodash.isFunction(asset.onClick)) {
       asset.onClick(event, asset);
     }
   }
   function onSelectClick(event) {
     event.preventDefault();
     event.stopPropagation();
     if (selected) {
       return onAssetUnselected(asset.key);
     }
     if (selectable) {
       return onAssetSelected(asset.key);
     }
   }
   function onActionClick(event, action) {
     event.preventDefault();
     event.stopPropagation();
     action.onClick(asset);
   }
   function onContextMenu(event) {
     event.preventDefault();
     asset.onContextMenu(event);
   }
   React.useEffect(function () {
     if (lodash.isFunction(asset.onContextMenu)) {
       if (cardRef.current) {
         cardRef.current.addEventListener('contextmenu', onContextMenu);
       }
       return function () {
         if (cardRef.current) {
           cardRef.current.removeEventListener('contextmenu', onContextMenu);
@@ -358,17 +350,14 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       };
     }
   }, []);
   function onDragstart(event) {
     asset.onDragstart(event);
   }
   React.useEffect(function () {
     if (lodash.isFunction(asset.onDragstart)) {
       if (dragRef.current) {
         dragRef.current.addEventListener('dragstart', onDragstart);
       }
       return function () {
         if (dragRef.current) {
           dragRef.current.removeEventListener('dragstart', onDragstart);
@@ -379,60 +368,89 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
   var videoPlayerRef = React.useRef();
   var cardRef = React.useRef();
   var dragRef = React.useRef(null);
   function onMouseEnter(event) {
     event.stopPropagation();
     if (videoPlayerRef.current) {
       var playPromise = videoPlayerRef.current.play();
       if (playPromise !== undefined) {
         playPromise.then(function () {})["catch"](function () {});
       }
     }
     if (lodash.isFunction(asset.onMouseEnter)) {
       asset.onMouseEnter(event, asset);
     }
   }
   function onMouseLeave(event) {
     event.stopPropagation();
     if (videoPlayerRef.current) {
       videoPlayerRef.current.pause();
     }
   }
   var typeIcon = React.useMemo(function () {
     switch (asset.fileType) {
       case 'video':
         {
-          return React__default['default'].createElement(OverlayInfoTopFileType, {
+          return React__default["default"].createElement(OverlayInfoTopFileType, {
             as: SvgPlay
           });
         }
       case 'pdf':
         {
-          return React__default['default'].createElement(OverlayInfoTopFileType, {
+          return React__default["default"].createElement(OverlayInfoTopFileType, {
             as: SvgPdf
           });
         }
+      case 'audio':
+        {
+          return React__default["default"].createElement(OverlayInfoTopFileType, {
+            as: SvgAudio
+          });
+        }
       case 'file':
         {
-          return React__default['default'].createElement(OverlayInfoTopFileType, {
+          return React__default["default"].createElement(OverlayInfoTopFileType, {
             as: SvgFile
           });
         }
       default:
         {
           return null;
         }
     }
   }, [asset.fileType]);
+  var renderPreview = function renderPreview(asset) {
+    if (['video'].includes(asset.fileType)) {
+      return React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
+        scrollPosition: scrollPosition
+      }, React__default["default"].createElement("video", {
+        ref: videoPlayerRef,
+        loop: true,
+        muted: true
+      }, React__default["default"].createElement("source", {
+        src: asset.previewUrl,
+        type: "video/mp4"
+      })));
+    }
+    if (['audio'].includes(asset.fileType)) {
+      return React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
+        scrollPosition: scrollPosition
+      }, React__default["default"].createElement("div", {
+        className: "audio"
+      }, React__default["default"].createElement(SvgHeadset, null)));
+    }
+    return React__default["default"].createElement(Figure, {
+      hasHeightAndWidth: hasHeightAndWidth
+    }, React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
+      alt: asset.title,
+      src: asset.previewUrl,
+      height: "100%",
+      width: "100%",
+      delayMethod: "debounce",
+      delayTime: 0,
+      threshold: 1500,
+      scrollPosition: scrollPosition
+    }));
+  };
   React.useEffect(function () {
     if (softSelected) {
       cardRef.current.scrollIntoView({
@@ -441,7 +459,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       });
     }
   }, [softSelected]);
-  return React__default['default'].createElement(AssetGalleryCompactCard$2, {
+  return React__default["default"].createElement(AssetGalleryCompactCard$2, {
     as: ComputedRootComponent$1,
     component: component,
     disabled: asset.disabled,
@@ -452,47 +470,27 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     onMouseLeave: onMouseLeave,
     draggable: asset.draggable,
     innerRef: dragRef
-  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
-    scrollPosition: scrollPosition
-  }, React__default['default'].createElement("video", {
-    ref: videoPlayerRef,
-    loop: true,
-    muted: true
-  }, React__default['default'].createElement("source", {
-    src: asset.previewUrl,
-    type: "video/mp4"
-  }))) : React__default['default'].createElement(Figure, {
-    hasHeightAndWidth: hasHeightAndWidth
-  }, React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
-    alt: asset.title,
-    src: asset.previewUrl,
-    height: "100%",
-    width: "100%",
-    delayMethod: "debounce",
-    delayTime: 0,
-    threshold: 1500,
-    scrollPosition: scrollPosition
-  }))), React__default['default'].createElement(Overlay, {
+  }, asset.previewUrl && renderPreview(asset), React__default["default"].createElement(Overlay, {
     ref: cardRef
-  }, React__default['default'].createElement(OverlayBackdrop, {
+  }, React__default["default"].createElement(OverlayBackdrop, {
     softSelected: softSelected
-  }), React__default['default'].createElement(OverlayInfo, null, React__default['default'].createElement("div", null, React__default['default'].createElement(OverlayInfoTopTitleAndFileType, null, React__default['default'].createElement(OverlayInfoTopTitle, {
+  }), React__default["default"].createElement(OverlayInfo, null, React__default["default"].createElement("div", null, React__default["default"].createElement(OverlayInfoTopTitleAndFileType, null, React__default["default"].createElement(OverlayInfoTopTitle, {
     title: asset.title,
     softSelected: softSelected
-  }, asset.title || "\xA0"), (!asset.fileTypeIconPosition || asset.fileTypeIconPosition === 'top-right') && typeIcon), React__default['default'].createElement(OverlayInfoTopNoteAndFileType, null, asset.fileTypeIconPosition === 'top-left' && React__default['default'].createElement(OverlayInfoTopFileTypeTopLeft, {
+  }, asset.title || "\xA0"), (!asset.fileTypeIconPosition || asset.fileTypeIconPosition === 'top-right') && typeIcon), React__default["default"].createElement(OverlayInfoTopNoteAndFileType, null, asset.fileTypeIconPosition === 'top-left' && React__default["default"].createElement(OverlayInfoTopFileTypeTopLeft, {
     assetTitle: asset.title
-  }, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopNote, {
+  }, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default["default"].createElement(OverlayInfoTopNote, {
     title: asset.note.title,
     assetTitle: asset.title
-  }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
+  }, asset.note.icon ? asset.note.icon : React__default["default"].createElement(SvgWarningCircle, null), React__default["default"].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default["default"].createElement(OverlayInfoBottom, null, selectable && React__default["default"].createElement(OverlayInfoBottomSelectButton, {
     selected: selected
-  }, React__default['default'].createElement(SvgCheckCircleFilled, {
+  }, React__default["default"].createElement(SvgCheckCircleFilled, {
     onClick: onSelectClick
-  })), React__default['default'].createElement(OverlayInfoBottomActions, null, asset.actions && asset.actions.map(function (action) {
-    return React__default['default'].createElement(Tooltip.Tooltip, {
+  })), React__default["default"].createElement(OverlayInfoBottomActions, null, asset.actions && asset.actions.map(function (action) {
+    return React__default["default"].createElement(Tooltip.Tooltip, {
       key: "".concat(asset.key, "-").concat(action.title),
       content: action.title
-    }, React__default['default'].createElement(Fragment$1, {
+    }, React__default["default"].createElement(Fragment$1, {
       as: ComputedActionButton$1,
       component: action.component,
       className: action.className,
@@ -501,16 +499,15 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
         return onActionClick(event, action);
       }
     }));
-  })))), asset.completed && React__default['default'].createElement(OverlayCompleted$1, {
+  })))), asset.completed && React__default["default"].createElement(OverlayCompleted$1, {
     softSelected: softSelected
-  }), asset.hasError && React__default['default'].createElement(OverlayHasError$1, {
+  }), asset.hasError && React__default["default"].createElement(OverlayHasError$1, {
     softSelected: softSelected
-  }), selectable && React__default['default'].createElement(OverlaySelected$1, {
+  }), selectable && React__default["default"].createElement(OverlaySelected$1, {
     selected: selected,
     softSelected: softSelected
-  })), asset.overlay && React__default['default'].createElement(ConsumerDefinedOverlay$1, null, asset.overlay));
+  })), asset.overlay && React__default["default"].createElement(ConsumerDefinedOverlay$1, null, asset.overlay));
 };
 AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   asset: defaultTheme.PropTypes.shape(assetShapeWithLayout).isRequired,
   hasHeightAndWidth: defaultTheme.PropTypes.bool.isRequired,
@@ -524,178 +521,187 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   scrollPosition: defaultTheme.PropTypes.number
 } : {};
 AssetGalleryCompactCard.defaultProps = {};
-var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
+var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default["default"].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
   var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth'];
   return reactiveProps.every(function (propKey) {
     return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
   });
 }));
-var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
-var AssetGalleryGridCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  margin: 0;\n  ", "\n  border: 1px solid;\n  ", ";\n  ", "\n  box-sizing: border-box;\n  text-decoration: none;\n"])), function (props) {
+var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var AssetGalleryGridCard$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  margin: 0;\n  ", "\n  border: 1px solid;\n  ", ";\n  ", ";\n  ", "\n  box-sizing: border-box;\n  text-decoration: none;\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
 }, function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
 }, function (props) {
-  return props.extendedSelectMode && styled.css(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
+  return props.disabled && styled.css(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n      pointer-events: none;\n      opacity: 0.4;\n    "])));
+}, function (props) {
+  return props.extendedSelectMode && styled.css(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
 });
-var ContentWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: ", "px;\n"])), function (props) {
+var ContentWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: ", "px;\n"])), function (props) {
   return props.layout.height;
 });
-var Note = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 9px 15px 7px;\n\n  svg {\n    max-width: 18px;\n    max-height: 18px;\n    width: auto;\n    flex-shrink: 0;\n  }\n"])));
-var NoteTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  text-transform: uppercase;\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  margin-left: 5px;\n"])), function (props) {
+var Note = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 9px 15px 7px;\n\n  svg {\n    max-width: 18px;\n    max-height: 18px;\n    width: auto;\n    flex-shrink: 0;\n  }\n"])));
+var NoteTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  text-transform: uppercase;\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  margin-left: 5px;\n"])), function (props) {
   return props.theme.secondaryFontFamily;
 });
-var Asset = styled__default['default'].div(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  padding-top: 35px;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  video {\n    display: block;\n    width: 100%;\n    height: 200px;\n  }\n"])));
-var AssetFigure = styled__default['default'].figure(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  margin: 0;\n  width: 100%;\n  height: 200px;\n\n  img {\n    object-fit: contain;\n    height: 100%;\n    width: 100%;\n  }\n"])));
-var Info = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.7;\n  padding: 15px 15px 5px;\n"])), function (props) {
+var Asset = styled__default["default"].div(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  padding-top: 35px;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  video {\n    display: block;\n    width: 100%;\n    height: 200px;\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    height: 200px;\n    svg {\n      width: 25%;\n    }\n  }\n"])));
+var AssetFigure = styled__default["default"].figure(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  margin: 0;\n  width: 100%;\n  height: 200px;\n\n  img {\n    object-fit: contain;\n    height: 100%;\n    width: 100%;\n  }\n"])));
+var Info = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.7;\n  padding: 15px 15px 5px;\n"])), function (props) {
   return props.theme.primaryFontFamily;
 });
-var InfoTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n  flex-grow: 1;\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  margin-bottom: 4px;\n"])));
-var InfoFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  flex-shrink: 0;\n  width: auto;\n  max-width: 18px;\n  max-height: 18px;\n"])));
-var InfoDescription = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"])));
-var Bottom = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  margin-top: auto;\n  padding: 0 10px 10px;\n"])));
-var BottomSelectButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n  opacity: ", ";\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: opacity 220ms;\n\n  > svg {\n    width: 23px;\n    height: 100%;\n    transition: color 120ms;\n    color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
+var InfoTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  flex-grow: 1;\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  margin-bottom: 4px;\n"])));
+var InfoFileType = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  flex-shrink: 0;\n  width: auto;\n  max-width: 18px;\n  max-height: 18px;\n"])));
+var InfoDescription = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"])));
+var Bottom = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  margin-top: auto;\n  padding: 0 10px 10px;\n"])));
+var BottomSelectButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n  opacity: ", ";\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: opacity 220ms;\n\n  > svg {\n    width: 23px;\n    height: 100%;\n    transition: color 120ms;\n    color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
   return props.selected ? 1 : 0;
 }, function (props) {
   return props.selected ? props.theme.getColor('orange-500') : 'inherit';
 }, AssetGalleryGridCard$2);
-var BottomActions = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), AssetGalleryGridCard$2);
-var OverlayCompleted = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  right: -1px;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 4px solid\n    ", ";\n"])), function (props) {
+var BottomActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), AssetGalleryGridCard$2);
+var OverlayCompleted = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  right: -1px;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 4px solid\n    ", ";\n"])), function (props) {
   return !props.softSelected && polished.rgba(props.theme.getColor('emerald-500'), 0.7);
 });
-var OverlayHasError = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  right: -1px;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 4px solid ", ";\n"])), function (props) {
+var OverlayHasError = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  right: -1px;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 4px solid ", ";\n"])), function (props) {
   return !props.softSelected && polished.rgba(props.theme.getColor('red-500'), 0.7);
 });
-var OverlaySelected = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  right: -1px;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 4px solid\n    ", ";\n"])), function (props) {
+var OverlaySelected = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  right: -1px;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 4px solid\n    ", ";\n"])), function (props) {
   return props.softSelected ? polished.rgba(props.theme.getColor('orange-500'), 0.5) : props.selected ? props.theme.getColor('orange-500') : 'transparent';
 });
-var ConsumerDefinedOverlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n"])));
-var Fragment = styled__default['default'].div(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral([""])));
+var ConsumerDefinedOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n"])));
+var Fragment = styled__default["default"].div(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral([""])));
+var _excluded$2 = ["component", "asset"],
+  _excluded2 = ["component", "className"];
 var ComputedRootComponent = function ComputedRootComponent(_ref) {
   var component = _ref.component,
-      asset = _ref.asset,
-      props = defaultTheme._objectWithoutProperties(_ref, ["component", "asset"]);
+    asset = _ref.asset,
+    props = defaultTheme._objectWithoutProperties(_ref, _excluded$2);
   var newProps = lodash.omit(props, ['theme', 'extendedSelectMode']);
   if (component) {
     if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
-    if (React__default['default'].isValidElement(component(asset, newProps.children))) {
-      return React__default['default'].cloneElement(component(asset, newProps.children), lodash.omit(newProps, ['children']));
+    if (React__default["default"].isValidElement(component(asset, newProps.children))) {
+      return React__default["default"].cloneElement(component(asset, newProps.children), lodash.omit(newProps, ['children']));
     }
   }
-  return React__default['default'].createElement(AssetGalleryGridCard$2, defaultTheme._extends({
+  return React__default["default"].createElement(AssetGalleryGridCard$2, defaultTheme._extends({
     ref: newProps.innerRef
   }, newProps));
 };
 ComputedRootComponent.propTypes = process.env.NODE_ENV !== "production" ? {} : {};
-var ComputedActionButton = React__default['default'].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
+var ComputedActionButton = React__default["default"].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
   var component = _ref2.component,
-      className = _ref2.className,
-      props = defaultTheme._objectWithoutProperties(_ref2, ["component", "className"]);
+    className = _ref2.className,
+    props = defaultTheme._objectWithoutProperties(_ref2, _excluded2);
   var newProps = props;
-  newProps.children = React__default['default'].createElement(ActionButton.ActionButton, {
+  newProps.children = React__default["default"].createElement(ActionButton.ActionButton, {
     ref: forwardedRef,
     className: className,
     icon: newProps.icon,
     onClick: newProps.onClick
   });
   if (component) {
     if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
-    if (React__default['default'].isValidElement(component())) {
-      return React__default['default'].cloneElement(component(), defaultTheme._objectSpread2({}, lodash.omit(newProps, 'icon')));
+    if (React__default["default"].isValidElement(component())) {
+      return React__default["default"].cloneElement(component(), defaultTheme._objectSpread2({}, lodash.omit(newProps, 'icon')));
     }
   }
-  return React__default['default'].createElement(React__default['default'].Fragment, null, newProps.children);
+  return React__default["default"].createElement(React__default["default"].Fragment, null, newProps.children);
 });
 var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
   var _asset$note;
   var asset = props.asset,
-      selectable = props.selectable,
-      selected = props.selected,
-      extendedSelectMode = props.extendedSelectMode,
-      onAssetSelected = props.onAssetSelected,
-      onAssetUnselected = props.onAssetUnselected,
-      softSelected = props.softSelected,
-      component = props.component,
-      scrollPosition = props.scrollPosition;
+    selectable = props.selectable,
+    selected = props.selected,
+    extendedSelectMode = props.extendedSelectMode,
+    onAssetSelected = props.onAssetSelected,
+    onAssetUnselected = props.onAssetUnselected,
+    softSelected = props.softSelected,
+    component = props.component,
+    scrollPosition = props.scrollPosition;
   var videoPlayerRef = React.useRef();
   var cardRef = React.useRef();
   var dragRef = React.useRef(null);
   function onMouseEnter(event) {
     event.stopPropagation();
     if (videoPlayerRef.current) {
       var playPromise = videoPlayerRef.current.play();
       if (playPromise !== undefined) {
         playPromise.then(function () {})["catch"](function () {});
       }
     }
     if (lodash.isFunction(asset.onMouseEnter)) {
       asset.onMouseEnter(event, asset);
     }
   }
   function onMouseLeave(event) {
     event.stopPropagation();
     if (videoPlayerRef.current) {
       videoPlayerRef.current.pause();
     }
   }
   function onClick(event) {
     if (extendedSelectMode) {
       return onSelectClick(event);
     }
     if (lodash.isFunction(asset.onClick)) {
       asset.onClick(event, asset);
     }
   }
   function onSelectClick(event) {
     event.preventDefault();
     event.stopPropagation();
     if (selected) {
       return onAssetUnselected(asset.key);
     }
     return onAssetSelected(asset.key);
   }
   function onActionClick(event, action) {
     event.preventDefault();
     event.stopPropagation();
     action.onClick(asset);
   }
   function onContextMenu(event) {
     event.preventDefault();
     asset.onContextMenu(event);
   }
+  function renderPreview(asset) {
+    if (['video'].includes(asset.fileType)) {
+      return React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
+        scrollPosition: scrollPosition
+      }, React__default["default"].createElement("video", {
+        ref: videoPlayerRef,
+        loop: true,
+        muted: true
+      }, React__default["default"].createElement("source", {
+        src: asset.previewUrl,
+        type: "video/mp4"
+      })));
+    }
+    if (['audio'].includes(asset.fileType)) {
+      return React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
+        scrollPosition: scrollPosition
+      }, React__default["default"].createElement("div", {
+        className: "audio"
+      }, React__default["default"].createElement(SvgHeadset, null)));
+    }
+    return React__default["default"].createElement(AssetFigure, null, React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
+      alt: asset.title,
+      src: asset.previewUrl,
+      height: "100%",
+      width: "100%",
+      delayMethod: "debounce",
+      delayTime: 0,
+      threshold: 1500,
+      scrollPosition: scrollPosition
+    }));
+  }
   React.useEffect(function () {
     if (lodash.isFunction(asset.onContextMenu)) {
       if (cardRef.current) {
         cardRef.current.addEventListener('contextmenu', onContextMenu);
       }
       return function () {
         if (cardRef.current) {
           cardRef.current.removeEventListener('contextmenu', onContextMenu);
@@ -703,17 +709,14 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
       };
     }
   }, []);
   function onDragstart(event) {
     asset.onDragstart(event);
   }
   React.useEffect(function () {
     if (lodash.isFunction(asset.onDragstart)) {
       if (dragRef.current) {
         dragRef.current.addEventListener('dragstart', onDragstart);
       }
       return function () {
         if (dragRef.current) {
           dragRef.current.removeEventListener('dragstart', onDragstart);
@@ -729,7 +732,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
       });
     }
   }, [softSelected]);
-  return React__default['default'].createElement(AssetGalleryGridCard$2, {
+  return React__default["default"].createElement(AssetGalleryGridCard$2, {
     as: ComputedRootComponent,
     component: component,
     asset: asset,
@@ -741,52 +744,36 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     onMouseLeave: onMouseLeave,
     draggable: asset.draggable,
     innerRef: dragRef
-  }, React__default['default'].createElement(ContentWrapper, {
+  }, React__default["default"].createElement(ContentWrapper, {
     layout: asset.layout,
     ref: cardRef
-  }, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(Note, {
+  }, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default["default"].createElement(Note, {
     title: asset.note.title
-  }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(NoteTitle, null, asset.note.title)), React__default['default'].createElement(Asset, {
+  }, asset.note.icon ? asset.note.icon : React__default["default"].createElement(SvgWarningCircle, null), React__default["default"].createElement(NoteTitle, null, asset.note.title)), React__default["default"].createElement(Asset, {
     "data-id": "ss"
-  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
-    scrollPosition: scrollPosition
-  }, React__default['default'].createElement("video", {
-    ref: videoPlayerRef,
-    loop: true,
-    muted: true
-  }, React__default['default'].createElement("source", {
-    src: asset.previewUrl,
-    type: "video/mp4"
-  }))) : React__default['default'].createElement(AssetFigure, null, React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
-    alt: asset.title,
-    src: asset.previewUrl,
-    height: "100%",
-    width: "100%",
-    delayMethod: "debounce",
-    delayTime: 0,
-    threshold: 1500,
-    scrollPosition: scrollPosition
-  })))), React__default['default'].createElement(Info, null, React__default['default'].createElement("div", {
+  }, asset.previewUrl && renderPreview(asset)), React__default["default"].createElement(Info, null, React__default["default"].createElement("div", {
     style: {
       display: 'flex'
     }
-  }, React__default['default'].createElement(InfoTitle, {
+  }, React__default["default"].createElement(InfoTitle, {
     title: asset.title
-  }, asset.title || '—'), asset.fileType === 'video' && React__default['default'].createElement(InfoFileType, {
+  }, asset.title || '—'), asset.fileType === 'video' && React__default["default"].createElement(InfoFileType, {
     as: SvgPlay
-  }), asset.fileType === 'pdf' && React__default['default'].createElement(InfoFileType, {
+  }), asset.fileType === 'audio' && React__default["default"].createElement(InfoFileType, {
+    as: SvgAudio
+  }), asset.fileType === 'pdf' && React__default["default"].createElement(InfoFileType, {
     as: SvgPdf
-  }), asset.fileType === 'file' && React__default['default'].createElement(InfoFileType, {
+  }), asset.fileType === 'file' && React__default["default"].createElement(InfoFileType, {
     as: SvgFile
-  })), React__default['default'].createElement(InfoDescription, null, asset.description)), React__default['default'].createElement(Bottom, null, selectable && React__default['default'].createElement(BottomSelectButton, {
+  })), React__default["default"].createElement(InfoDescription, null, asset.description)), React__default["default"].createElement(Bottom, null, selectable && React__default["default"].createElement(BottomSelectButton, {
     selected: selected
-  }, React__default['default'].createElement(SvgCheckCircleFilled, {
+  }, React__default["default"].createElement(SvgCheckCircleFilled, {
     onClick: onSelectClick
-  })), React__default['default'].createElement(BottomActions, null, asset.actions && asset.actions.map(function (action) {
-    return React__default['default'].createElement(Tooltip.Tooltip, {
+  })), React__default["default"].createElement(BottomActions, null, asset.actions && asset.actions.map(function (action) {
+    return React__default["default"].createElement(Tooltip.Tooltip, {
       key: "".concat(asset.key, "-").concat(action.title),
       content: action.title
-    }, React__default['default'].createElement(Fragment, {
+    }, React__default["default"].createElement(Fragment, {
       as: ComputedActionButton,
       component: action.component,
       className: action.className,
@@ -795,16 +782,15 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
         return onActionClick(event, action);
       }
     }));
-  })))), asset.completed && React__default['default'].createElement(OverlayCompleted, {
+  })))), asset.completed && React__default["default"].createElement(OverlayCompleted, {
     softSelected: softSelected
-  }), asset.hasError && React__default['default'].createElement(OverlayHasError, {
+  }), asset.hasError && React__default["default"].createElement(OverlayHasError, {
     softSelected: softSelected
-  }), selectable && React__default['default'].createElement(OverlaySelected, {
+  }), selectable && React__default["default"].createElement(OverlaySelected, {
     selected: selected,
     softSelected: softSelected
-  }), asset.overlay && React__default['default'].createElement(ConsumerDefinedOverlay, null, asset.overlay));
+  }), asset.overlay && React__default["default"].createElement(ConsumerDefinedOverlay, null, asset.overlay));
 };
 AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
   asset: defaultTheme.PropTypes.shape(assetShapeWithLayout).isRequired,
   selectable: defaultTheme.PropTypes.bool,
@@ -817,7 +803,7 @@ AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
   scrollPosition: defaultTheme.PropTypes.number
 } : {};
 AssetGalleryGridCard.defaultProps = {};
-var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryGridCard, function (prevProps, nextProps) {
+var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default["default"].memo(AssetGalleryGridCard, function (prevProps, nextProps) {
   var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
   return reactiveProps.every(function (propKey) {
     return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
@@ -825,39 +811,37 @@ var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React
 }));
 var _templateObject, _templateObject2, _templateObject3;
-var AssetGalleryBase$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n"])));
-var GroupLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  ", "\n  display: flex;\n  align-items: flex-end;\n  position: absolute;\n  padding-bottom: 4px;\n  box-sizing: border-box;\n"])), function (props) {
+var AssetGalleryBase$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n"])));
+var GroupLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  ", "\n  display: flex;\n  align-items: flex-end;\n  position: absolute;\n  padding-bottom: 4px;\n  box-sizing: border-box;\n"])), function (props) {
   return props.theme.primaryFontFamily;
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
 });
-var AssetGalleryCardBase = styled__default['default'].div(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  margin: 0;\n  overflow: hidden;\n  will-change: transform, width, height;\n"])));
+var AssetGalleryCardBase = styled__default["default"].div(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  margin: 0;\n  overflow: hidden;\n  will-change: transform, width, height;\n"])));
-var AssetGalleryBase = React__default['default'].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
+var _excluded$1 = ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "onAssetSoftSelectedChanged", "component"];
+var AssetGalleryBase = React__default["default"].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
   var assetsProp = _ref.assets,
-      viewMode = _ref.viewMode,
-      thumbnailMaxHeight = _ref.thumbnailMaxHeight,
-      selectable = _ref.selectable,
-      selectedAssetKeys = _ref.selectedAssetKeys,
-      onAssetSelected = _ref.onAssetSelected,
-      onAssetUnselected = _ref.onAssetUnselected,
-      softSelectable = _ref.softSelectable,
-      softSelectedAssetKey = _ref.softSelectedAssetKey,
-      onAssetSoftSelectedChanged = _ref.onAssetSoftSelectedChanged,
-      component = _ref.component,
-      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "onAssetSoftSelectedChanged", "component"]);
+    viewMode = _ref.viewMode,
+    thumbnailMaxHeight = _ref.thumbnailMaxHeight,
+    selectable = _ref.selectable,
+    selectedAssetKeys = _ref.selectedAssetKeys,
+    onAssetSelected = _ref.onAssetSelected,
+    onAssetUnselected = _ref.onAssetUnselected,
+    softSelectable = _ref.softSelectable,
+    softSelectedAssetKey = _ref.softSelectedAssetKey,
+    onAssetSoftSelectedChanged = _ref.onAssetSoftSelectedChanged,
+    component = _ref.component,
+    props = defaultTheme._objectWithoutProperties(_ref, _excluded$1);
   var assetGalleryDOMNode = React.useRef();
   var assetGalleryCompactRef = useMergedRefs(forwardedRef, assetGalleryDOMNode);
   var assetGalleryWidth = React.useRef(0);
   var minimumRowAspectRatio = React.useRef(0);
   var calculatedAssets = React.useRef([]);
   var _useState = React.useState([]),
-      _useState2 = defaultTheme._slicedToArray(_useState, 2),
-      assets = _useState2[0],
-      setAssets = _useState2[1];
+    _useState2 = defaultTheme._slicedToArray(_useState, 2),
+    assets = _useState2[0],
+    setAssets = _useState2[1];
   var MAXIMUM_ROW_HEIGHT = React.useMemo(function () {
     return viewMode === 'grid' ? 450 : thumbnailMaxHeight;
   }, [viewMode, thumbnailMaxHeight]);
@@ -876,9 +860,8 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
   useIsomorphicLayoutEffect(function () {
     if (!assetGalleryDOMNode.current) return;
     var throttledOnResize = lodash.throttle(onResize, 1);
-    var resizeObserver = new ResizeObserver__default['default'](throttledOnResize);
+    var resizeObserver = new ResizeObserver__default["default"](throttledOnResize);
     resizeObserver.observe(assetGalleryDOMNode.current);
     function onResize(entries) {
       entries.forEach(function (entry) {
         if (assetGalleryWidth.current === entry.contentRect.width) return;
@@ -888,7 +871,6 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
         });
       });
     }
     return function () {
       resizeObserver.unobserve(assetGalleryDOMNode.current);
     };
@@ -896,24 +878,20 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
   React.useEffect(function () {
     main();
   }, [MAXIMUM_ROW_HEIGHT, assetsProp]);
   var main = function main() {
     calculateAssetGalleryAspectRatio();
     calculateLayout();
     calculateVisibility();
   };
   var calculateAssetGalleryAspectRatio = function calculateAssetGalleryAspectRatio() {
     if (assetGalleryWidth.current > 0) {
       minimumRowAspectRatio.current = calculateAspectRatio(assetGalleryWidth.current, MAXIMUM_ROW_HEIGHT);
     }
   };
   var calculateLayout = function calculateLayout() {
     var assetsWithoutAKey = assetsProp.filter(function (a) {
       return !a.key;
     });
     if (assetsWithoutAKey.length > 0) {
       assetsProp = assetsProp.filter(function (a) {
         return a.key;
@@ -922,7 +900,6 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
         return console.warn("Omitted asset from the gallery because it was missing the unique `key` property.", a);
       });
     }
     if (viewMode === 'grid' && assetGalleryWidth.current > 0) {
       var row = [];
       var translateX = 0;
@@ -933,7 +910,6 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       var desiredAssetWidth = assetGalleryWidth.current / desiredAssetCountInRow - SPACE_BETWEEN_ASSETS + SPACE_BETWEEN_ASSETS / desiredAssetCountInRow;
       assetsProp.forEach(function (asset, index) {
         var _assetsProp;
         if (asset.group && asset.group !== lastGroup) {
           computedAssets.push({
             title: asset.group,
@@ -948,9 +924,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
           lastGroup = asset.group;
           translateY += 50 + SPACE_UNDER_ASSETS;
         }
         row.push(asset);
         if (row.length === desiredAssetCountInRow || index + 1 === assetsProp.length || (_assetsProp = assetsProp[index + 1]) !== null && _assetsProp !== void 0 && _assetsProp.group && assetsProp[index + 1].group !== asset.group) {
           row.forEach(function (rowAsset) {
             computedAssets.push(defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, rowAsset), {}, {
@@ -980,7 +954,6 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
         var _computedAssets = [];
         assetsProp.forEach(function (asset, index) {
           var _assetsProp2;
           if (asset.group && asset.group !== _lastGroup) {
             _computedAssets.push({
               title: asset.group,
@@ -992,23 +965,17 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
                 translateY: Math.round(_translateY)
               }
             });
             _lastGroup = asset.group;
             _translateY += 50 + SPACE_UNDER_ASSETS;
           }
           rowAspectRatio += calculateAspectRatio(asset.width || MISSING_WIDTH_PLACEHOLDER, asset.height || MISSING_HEIGHT_PLACEHOLDER);
           _row.push(asset);
           if (rowAspectRatio >= minimumRowAspectRatio.current || index + 1 === assetsProp.length || (_assetsProp2 = assetsProp[index + 1]) !== null && _assetsProp2 !== void 0 && _assetsProp2.group && assetsProp[index + 1].group !== asset.group) {
             rowAspectRatio = Math.max(rowAspectRatio, minimumRowAspectRatio.current);
             var totalDesiredWidthOfImages = assetGalleryWidth.current - SPACE_BETWEEN_ASSETS * (_row.length - 1);
             var rowHeight = totalDesiredWidthOfImages / rowAspectRatio;
             _row.forEach(function (rowAsset) {
               var assetWidth = rowHeight * calculateAspectRatio(rowAsset.width || MISSING_WIDTH_PLACEHOLDER, rowAsset.height || MISSING_HEIGHT_PLACEHOLDER);
               _computedAssets.push(defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, rowAsset), {}, {
                 layout: {
                   type: 'asset',
@@ -1019,10 +986,8 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
                   hasHeightAndWidth: Boolean(rowAsset.width && rowAsset.height)
                 }
               }));
               _translateX += assetWidth + SPACE_BETWEEN_ASSETS;
             });
             _row = [];
             rowAspectRatio = 0;
             _translateY += rowHeight + SPACE_UNDER_ASSETS;
@@ -1033,16 +998,13 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       }
     }
   };
   function calculateAspectRatio(width, height) {
     return width / height;
   }
   var totalGalleryHeight = React.useMemo(function () {
     if (assets.length === 0) {
       return 0;
     }
     var lastAsset = assets[assets.length - 1];
     return lastAsset.layout.translateY + lastAsset.layout.height;
   }, [assets]);
@@ -1053,19 +1015,16 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       return window.removeEventListener('scroll', throttledOnScroll, false);
     };
   }, [assetGalleryDOMNode, calculatedAssets]);
   function onScroll() {
     setScrollPositionAndDirection();
     calculateVisibility();
   }
   function setScrollPositionAndDirection() {
     var newYOffset = window.pageYOffset;
     previousYOffset.current = latestYOffset.current;
     latestYOffset.current = newYOffset;
     scrollDirection.current = latestYOffset.current > previousYOffset.current ? 'down' : 'up';
   }
   var calculateVisibility = function calculateVisibility() {
     if (!assetGalleryDOMNode.current) return;
     var bufferTop = scrollDirection.current === 'up' ? PRIMARY_SCROLL_BUFFER_HEIGHT : SECONDARY_SCROLL_BUFFER_HEIGHT;
@@ -1081,44 +1040,35 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       } else {
         asset.layout.show = true;
       }
       return asset;
     });
     setAssets(finalizedAssets);
   };
   function getOffsetTop(elem) {
     var offsetTop = 0;
     do {
       if (!isNaN(elem.offsetTop)) {
         offsetTop += elem.offsetTop;
       }
       elem = elem.offsetParent;
     } while (elem);
     return offsetTop;
   }
   var handleKeyPress = React.useCallback(function (e) {
     function isElementVisible(el) {
       var rect = el.getBoundingClientRect(),
-          vWidth = window.innerWidth || document.documentElement.clientWidth,
-          vHeight = window.innerHeight || document.documentElement.clientHeight,
-          efp = function efp(x, y) {
-        return document.elementFromPoint(x, y);
-      };
+        vWidth = window.innerWidth || document.documentElement.clientWidth,
+        vHeight = window.innerHeight || document.documentElement.clientHeight,
+        efp = function efp(x, y) {
+          return document.elementFromPoint(x, y);
+        };
       if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) return false;
       return el.contains(efp(rect.left, rect.top)) || el.contains(efp(rect.right, rect.top)) || el.contains(efp(rect.right, rect.bottom)) || el.contains(efp(rect.left, rect.bottom));
     }
     function softSelectFirstVisibleAsset() {
       var visibleAssets = assets.filter(function (asset) {
         return asset.layout.show;
       });
       for (var i = 0; i < assetGalleryDOMNode.current.children.length; i++) {
         if (isElementVisible(assetGalleryDOMNode.current.children[i])) {
           onAssetSoftSelectedChanged(visibleAssets[i].key);
@@ -1126,22 +1076,18 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
         }
       }
     }
     if (assets.length === 0) return;
     if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
       if (softSelectedAssetKey === null) {
         softSelectFirstVisibleAsset();
         return;
       }
     }
     if (e.key === 'ArrowLeft') {
       var previousAssetIndex = assets.findIndex(function (asset) {
         return asset.key === softSelectedAssetKey;
       }) - 1;
       var previousAsset = assets[previousAssetIndex];
       if (previousAsset) {
         if (previousAsset.layout.show) {
           onAssetSoftSelectedChanged(previousAsset.key);
@@ -1149,16 +1095,13 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
           softSelectFirstVisibleAsset();
         }
       }
       return;
     }
     if (e.key === 'ArrowRight') {
       var nextAssetIndex = assets.findIndex(function (asset) {
         return asset.key === softSelectedAssetKey;
       }) + 1;
       var nextAsset = assets[nextAssetIndex];
       if (nextAsset) {
         if (nextAsset.layout.show) {
           onAssetSoftSelectedChanged(nextAsset.key);
@@ -1166,13 +1109,10 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
           softSelectFirstVisibleAsset();
         }
       }
       return;
     }
     if (e.key === 'Enter') {
       if (softSelectedAssetKey === null) return;
       if (selectedAssetKeys.includes(softSelectedAssetKey)) {
         onAssetUnselected(softSelectedAssetKey);
       } else {
@@ -1187,7 +1127,6 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
     if (softSelectable) {
       document.addEventListener('keydown', handleKeyPress);
     }
     return function () {
       return document.removeEventListener('keydown', handleKeyPress);
     };
@@ -1196,32 +1135,31 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
     if (softSelectable && softSelectedAssetKey !== null) {
       document.addEventListener('click', handleClick, true);
     }
     return function () {
       return document.removeEventListener('click', handleClick, true);
     };
   }, [softSelectable, softSelectedAssetKey, handleClick]);
-  return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(AssetGalleryBase$1, defaultTheme._extends({
+  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(AssetGalleryBase$1, defaultTheme._extends({
     ref: assetGalleryCompactRef,
     style: {
       height: "".concat(totalGalleryHeight, "px")
     },
     className: props.className
   }, props), assets.map(function (asset) {
-    return asset.layout.show && React__default['default'].createElement(React__default['default'].Fragment, {
+    return asset.layout.show && React__default["default"].createElement(React__default["default"].Fragment, {
       key: "asset-gallery-".concat(asset.layout.type, "-").concat(asset.key)
-    }, asset.layout.type === 'groupLabel' && React__default['default'].createElement(GroupLabel, {
+    }, asset.layout.type === 'groupLabel' && React__default["default"].createElement(GroupLabel, {
       style: {
         transform: "translate3d(".concat(asset.layout.translateX, "px,").concat(asset.layout.translateY, "px, 0)"),
         height: "".concat(asset.layout.height, "px")
       }
-    }, asset.title), asset.layout.type === 'asset' && React__default['default'].createElement(AssetGalleryCardBase, {
+    }, asset.title), asset.layout.type === 'asset' && React__default["default"].createElement(AssetGalleryCardBase, {
       style: {
         transform: "translate3d(".concat(asset.layout.translateX, "px, ").concat(asset.layout.translateY, "px, 0)"),
         width: "".concat(asset.layout.width, "px"),
         height: "".concat(asset.layout.height, "px")
       }
-    }, viewMode === 'grid' ? React__default['default'].createElement(AssetGalleryGridCard$1, {
+    }, viewMode === 'grid' ? React__default["default"].createElement(AssetGalleryGridCard$1, {
       asset: asset,
       selectable: 'selectable' in asset ? asset.selectable : selectable,
       selected: selectedAssetKeys.includes(asset.key),
@@ -1230,7 +1168,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       onAssetUnselected: onAssetUnselected,
       softSelected: softSelectedAssetKey === asset.key,
       component: component
-    }) : React__default['default'].createElement(AssetGalleryCompactCard$1, {
+    }) : React__default["default"].createElement(AssetGalleryCompactCard$1, {
       asset: asset,
       hasHeightAndWidth: asset.layout.hasHeightAndWidth,
       selectable: 'selectable' in asset ? asset.selectable : selectable,
@@ -1258,34 +1196,31 @@ AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
   className: defaultTheme.PropTypes.string
 } : {};
-var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_ref, forwardedRef) {
+var _excluded = ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "onSoftSelectedChanged", "component"];
+var AssetGallery = React__default["default"].forwardRef(function AssetGallery(_ref, forwardedRef) {
   var assets = _ref.assets,
-      viewMode = _ref.viewMode,
-      thumbnailMaxHeight = _ref.thumbnailMaxHeight,
-      selectable = _ref.selectable,
-      selectedAssetKeys = _ref.selectedAssetKeys,
-      onSelectedChanged = _ref.onSelectedChanged,
-      softSelectable = _ref.softSelectable,
-      onSoftSelectedChanged = _ref.onSoftSelectedChanged,
-      component = _ref.component,
-      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "onSoftSelectedChanged", "component"]);
+    viewMode = _ref.viewMode,
+    thumbnailMaxHeight = _ref.thumbnailMaxHeight,
+    selectable = _ref.selectable,
+    selectedAssetKeys = _ref.selectedAssetKeys,
+    onSelectedChanged = _ref.onSelectedChanged,
+    softSelectable = _ref.softSelectable,
+    onSoftSelectedChanged = _ref.onSoftSelectedChanged,
+    component = _ref.component,
+    props = defaultTheme._objectWithoutProperties(_ref, _excluded);
   var _useState = React.useState(selectedAssetKeys || []),
-      _useState2 = defaultTheme._slicedToArray(_useState, 2),
-      selectedAssetKeysInternalState = _useState2[0],
-      setSelectedAssetKeysInternalState = _useState2[1];
+    _useState2 = defaultTheme._slicedToArray(_useState, 2),
+    selectedAssetKeysInternalState = _useState2[0],
+    setSelectedAssetKeysInternalState = _useState2[1];
   var _useState3 = React.useState(null),
-      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
-      softSelectedAssetKeyInternalState = _useState4[0],
-      setSoftSelectedAssetKeyInternalState = _useState4[1];
+    _useState4 = defaultTheme._slicedToArray(_useState3, 2),
+    softSelectedAssetKeyInternalState = _useState4[0],
+    setSoftSelectedAssetKeyInternalState = _useState4[1];
   React.useEffect(function () {
     setSelectedAssetKeysInternalState(selectedAssetKeys || []);
   }, [selectedAssetKeys]);
   React.useEffect(function () {
     if (selectedAssetKeys === selectedAssetKeysInternalState) return;
     if (lodash.isFunction(onSelectedChanged)) {
       onSelectedChanged(selectedAssetKeysInternalState);
     }
@@ -1311,7 +1246,7 @@ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_r
     var assetKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     setSoftSelectedAssetKeyInternalState(assetKey);
   }, []);
-  return React__default['default'].createElement(AssetGalleryBase, defaultTheme._extends({
+  return React__default["default"].createElement(AssetGalleryBase, defaultTheme._extends({
     ref: forwardedRef,
     assets: assets,
     thumbnailMaxHeight: thumbnailMaxHeight,