@ntbjs/react-components 1.3.0-rc.59 → 1.3.0-rc.6-patch.1

package/{AssetAction-9622c4f9.js → AssetGallery-f24a8bb1.js}

@@ -1,37 +1,35 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-cd01e6c2.js');
+var defaultTheme = require('./defaultTheme-44832997.js');
 var lodash = require('lodash');
 var React = require('react');
 var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
 var ResizeObserver = require('resize-observer-polyfill');
-var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-3d5d5f2c.js');
+var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-b145322d.js');
 var styled = require('styled-components');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
-var Instructions = require('./Instructions-dbd4514c.js');
-var Alert = require('./Alert-d69a3f95.js');
-var Badge = require('./Badge-e984e6f5.js');
-var Popover = require('./Popover-52d29ca6.js');
-require('./Tab-e43241f0.js');
-require('./Tabs-cfc08c6b.js');
-var Tooltip = require('./Tooltip-a68a7e49.js');
-require('./VerificationStatusIcon-7b0e23fe.js');
-var react = require('@floating-ui/react');
+var warningCircle = require('./warning-circle-24522402.js');
+var Alert = require('./Alert-347a66eb.js');
+var Badge = require('./Badge-b5d734ce.js');
+var Popover = require('./Popover-ec433aaf.js');
+require('./Tab-91278790.js');
+require('./Tabs-2a0f1d84.js');
+var Tooltip = require('./Tooltip-978b6cdd.js');
+require('./VerificationStatusIcon-ad0159e3.js');
+var ActionButton = require('./ActionButton-dea072f4.js');
+require('./Button-211d92ec.js');
+require('./Checkbox-b6f6fabf.js');
+require('./CompactAutocompleteSelect-15a10abb.js');
+require('./CompactStarRating-821494e0.js');
+require('./CompactTextInput-ca8a67af.js');
+require('./MultiSelect-b2459602.js');
+require('./Radio-2ab61f91.js');
+require('./TextArea-8c8757d9.js');
+require('./TextInput-4cac4342.js');
+require('./Switch-e3289575.js');
+var ContextMenu = require('./ContextMenu-d269f2b4.js');
+var ContextMenuItem = require('./ContextMenuItem-960e1acf.js');
 var polished = require('polished');
-var ContextMenu = require('./ContextMenu-4eb8fdc5.js');
-require('./AssetPreviewTopBar-b1fe3188.js');
-var ActionButton = require('./ActionButton-b2345555.js');
-require('./Button-090fb526.js');
-require('./Checkbox-ad9c9e54.js');
-require('./CompactAutocompleteSelect-26949125.js');
-require('./CompactStarRating-65bf27e5.js');
-require('./CompactTextInput-60edc635.js');
-require('./MultiSelect-cdfe6ffa.js');
-require('./Radio-55db4781.js');
-require('./TextArea-44b4d3c4.js');
-require('./TextInput-c3c71881.js');
-require('./Switch-04ecd8d0.js');
-var ContextMenuItem = require('./ContextMenuItem-c536b460.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -44,12 +42,14 @@ 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);
 }
 
@@ -58,52 +58,60 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _path$3;
-function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
+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.146 17.622l9.412-9.412-1.87-1.869-7.542 7.543-3.805-3.805-1.869 1.87 5.674 5.673zM2.67 24.03q-1.101 0-1.886-.784T0 21.36V2.67Q0 1.569.784.784T2.67 0h18.69q1.101 0 1.886.784t.784 1.886v18.69q0 1.101-.784 1.886t-1.886.784H2.67z"
+});
+
 function SvgCheckRectangleFilled(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M10.146 17.622l9.412-9.412-1.87-1.869-7.542 7.543-3.805-3.805-1.869 1.87 5.674 5.673zM2.67 24.03q-1.101 0-1.886-.784T0 21.36V2.67Q0 1.569.784.784T2.67 0h18.69q1.101 0 1.886.784t.784 1.886v18.69q0 1.101-.784 1.886t-1.886.784H2.67z"
-  })));
+  }, props), _ref$3);
 }
 
-var _path$2;
-function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
+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", {
+  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"
+});
+
 function SvgHeadset(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 24 24"
-  }, props), _path$2 || (_path$2 = /*#__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"
-  })));
+  }, props), _ref$2);
 }
 
-var _path$1;
-function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
+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: "M11.16 23.622L0 14.942l2.046-1.55 9.114 7.068 9.114-7.068 2.046 1.55-11.16 8.68zm0-6.262L0 8.68 11.16 0l11.16 8.68-11.16 8.68z"
+});
+
 function SvgLayers(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "-1 0 24 24"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M11.16 23.622L0 14.942l2.046-1.55 9.114 7.068 9.114-7.068 2.046 1.55-11.16 8.68zm0-6.262L0 8.68 11.16 0l11.16 8.68-11.16 8.68z"
-  })));
+  }, props), _ref$1);
 }
 
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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 _ref = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M0 23.52V0l18.48 11.76L0 23.52z"
+});
+
 function SvgPlay(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "-3 -0.25 24 24"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M0 23.52V0l18.48 11.76L0 23.52z"
-  })));
+  }, props), _ref);
 }
 
 var assetShape = {
@@ -155,14 +163,14 @@ var assetShapeWithLayout = defaultTheme._objectSpread2(defaultTheme._objectSprea
   }).isRequired
 });
 
-var _templateObject$5, _templateObject2$4, _templateObject3$4;
-var AssetGalleryBase$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$5 || (_templateObject$5 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n"])));
-var GroupLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2$4 || (_templateObject2$4 = 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 _templateObject$3, _templateObject2$3, _templateObject3$3;
+var AssetGalleryBase$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$3 || (_templateObject$3 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n"])));
+var GroupLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2$3 || (_templateObject2$3 = 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.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$4 || (_templateObject3$4 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  margin: 0;\n  z-index: 1;\n  will-change: transform, width, height;\n\n  &:hover {\n    z-index: 2;\n  }\n"])));
+var AssetGalleryCardBase = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$3 || (_templateObject3$3 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  margin: 0;\n  z-index: 1;\n  will-change: transform, width, height;\n\n  &:hover {\n    z-index: 2;\n  }\n"])));
 
 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);
@@ -174,85 +182,79 @@ var convertMsToHMS = function convertMsToHMS(ms) {
   var secondsLeft = seconds % 60;
   var minutesLeft = minutes % 60;
   var hmsString = '';
+
   if (hours) {
     hmsString += hours < 10 ? "0".concat(hours, ":") : "".concat(hours, ":");
   }
+
   hmsString += "".concat(minutesLeft < 10 ? "0".concat(minutesLeft) : "".concat(minutesLeft), ":");
   hmsString += secondsLeft < 10 ? "0".concat(secondsLeft) : "".concat(secondsLeft);
   return hmsString;
 };
 
-var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2;
-var SummaryCard$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$4 || (_templateObject$4 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 4px;\n  width: ", ";\n  ", ";\n\n  ", "\n"])), function (props) {
+var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2;
+var SummaryCard$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n\n  ", "\n"])), function (props) {
   return props.width ? "".concat(props.width, "px") : '100%';
-}, function (props) {
-  return props.compact ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')) : 'background: transparent';
 }, function (props) {
   return props.useBorder ? props.theme.themeProp('border', "1px solid ".concat(props.theme.getColor('gray-500')), "1px solid ".concat(props.theme.getColor('gray-300'))) : null;
 });
-var Gutter = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2$3 || (_templateObject2$3 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  padding-bottom: ", "px;\n"])), function (props) {
+var Gutter = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2$2 || (_templateObject2$2 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  padding-bottom: ", "px;\n"])), function (props) {
   if (props.renderAsMargin) {
-    return styled.css(_templateObject3$3 || (_templateObject3$3 = defaultTheme._taggedTemplateLiteral(["\n        margin-bottom: ", "px;\n      "])), props.gutter || 8);
+    return styled.css(_templateObject3$2 || (_templateObject3$2 = defaultTheme._taggedTemplateLiteral(["\n        margin-bottom: ", "px;\n      "])), props.gutter || 8);
   } else {
-    return styled.css(_templateObject4$3 || (_templateObject4$3 = defaultTheme._taggedTemplateLiteral(["\n        padding-bottom: ", "px;\n      "])), props.gutter || 8);
+    return styled.css(_templateObject4$2 || (_templateObject4$2 = defaultTheme._taggedTemplateLiteral(["\n        padding-bottom: ", "px;\n      "])), props.gutter || 8);
   }
 }, function (props) {
   return props.gutter || 8;
 });
-var Header = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5$3 || (_templateObject5$3 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px;\n"])));
-var HeaderLeft = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6$2 || (_templateObject6$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  > * {\n    margin-right: 4px;\n  }\n"])));
-var HeaderRight = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7$2 || (_templateObject7$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  > * {\n    margin-left: 4px;\n  }\n"])));
-var Title = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject8$2 || (_templateObject8$2 = defaultTheme._taggedTemplateLiteral(["\n  display: inline-block;\n  padding: 0 16px;\n  font: normal normal 500 14px/19px Roboto;\n  letter-spacing: 0.28px;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n\n  ", ";\n"])), function (props) {
+var Header = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5$2 || (_templateObject5$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px;\n"])));
+var HeaderLeft = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6$2 || (_templateObject6$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  > * {\n    margin-right: 4px;\n  }\n"])));
+var HeaderRight = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7$2 || (_templateObject7$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  > * {\n    margin-left: 4px;\n  }\n"])));
+var Title = styled__default['default'].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject8$2 || (_templateObject8$2 = defaultTheme._taggedTemplateLiteral(["\n  display: inline-block;\n  padding: 0 16px;\n  font: normal normal 500 14px/19px Roboto;\n  letter-spacing: 0.28px;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n\n  ", ";\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
 });
-var Description = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject9$2 || (_templateObject9$2 = defaultTheme._taggedTemplateLiteral(["\n  padding: 0 16px;\n  text-align: left;\n  font: normal normal normal 12px/16px Roboto;\n  letter-spacing: 0.24px;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n\n  ", ";\n"])), function (props) {
+var Description = styled__default['default'].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject9$2 || (_templateObject9$2 = defaultTheme._taggedTemplateLiteral(["\n  padding: 0 16px;\n  text-align: left;\n  font: normal normal normal 12px/16px Roboto;\n  letter-spacing: 0.24px;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n\n  ", ";\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
 });
-var Instruction = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$2 || (_templateObject10$2 = defaultTheme._taggedTemplateLiteral([""])));
-var Footer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$2 || (_templateObject11$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px;\n"])));
-var FooterLeft = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12$2 || (_templateObject12$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  > * {\n    margin-right: 4px;\n  }\n"])));
-var FooterRight = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13$2 || (_templateObject13$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  > * {\n    margin-left: 4px;\n  }\n"])));
-styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_templateObject14$2 || (_templateObject14$2 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
-  return props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'));
-});
+var Instruction = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$2 || (_templateObject10$2 = defaultTheme._taggedTemplateLiteral([""])));
+var Footer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$2 || (_templateObject11$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px;\n"])));
+var FooterLeft = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12$2 || (_templateObject12$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  > * {\n    margin-right: 4px;\n  }\n"])));
+var FooterRight = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13$2 || (_templateObject13$2 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  > * {\n    margin-left: 4px;\n  }\n"])));
 
-var _excluded$6 = ["activeSummaryCard", "title", "description", "instructions", "instructionsType", "headerLeft", "headerRight", "footerLeft", "footerRight", "width", "useBorder", "view"];
-var SummaryCard = React__default["default"].forwardRef(function AssetSummaryCard(_ref, forwardedRef) {
+var SummaryCard = React__default['default'].forwardRef(function AssetSummaryCard(_ref, forwardedRef) {
   var activeSummaryCard = _ref.activeSummaryCard,
-    title = _ref.title,
-    description = _ref.description,
-    instructions = _ref.instructions,
-    instructionsType = _ref.instructionsType,
-    headerLeft = _ref.headerLeft,
-    headerRight = _ref.headerRight,
-    footerLeft = _ref.footerLeft,
-    footerRight = _ref.footerRight,
-    width = _ref.width,
-    useBorder = _ref.useBorder,
-    view = _ref.view,
-    props = defaultTheme._objectWithoutProperties(_ref, _excluded$6);
+      title = _ref.title,
+      description = _ref.description,
+      instructions = _ref.instructions,
+      instructionsType = _ref.instructionsType,
+      headerLeft = _ref.headerLeft,
+      headerRight = _ref.headerRight,
+      footerLeft = _ref.footerLeft,
+      footerRight = _ref.footerRight,
+      width = _ref.width,
+      useBorder = _ref.useBorder,
+      props = defaultTheme._objectWithoutProperties(_ref, ["activeSummaryCard", "title", "description", "instructions", "instructionsType", "headerLeft", "headerRight", "footerLeft", "footerRight", "width", "useBorder"]);
+
   var shouldRenderInstructions = !!instructions;
   var shouldRenderHeader = !!headerLeft || !!headerRight;
   var shouldRenderFooter = !!footerLeft || !!footerRight;
   var shouldAddGutterAfterInstructions = shouldRenderInstructions && shouldRenderFooter;
   var shouldAddGutterAfterTitle = !!title && (!!description || !!instructions || shouldRenderFooter);
   if (!activeSummaryCard) return null;
-  return React__default["default"].createElement(SummaryCard$1, defaultTheme._extends({
+  return React__default['default'].createElement(SummaryCard$1, defaultTheme._extends({
     ref: forwardedRef,
     width: width,
     useBorder: useBorder
-  }, props, {
-    view: view
-  }), shouldRenderHeader && React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(Gutter, {
+  }, props), shouldRenderHeader && React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(Gutter, {
     gutter: 8
-  }), React__default["default"].createElement(Header, null, React__default["default"].createElement(HeaderLeft, null, headerLeft), React__default["default"].createElement(HeaderRight, null, headerRight))), React__default["default"].createElement(Gutter, {
+  }), React__default['default'].createElement(Header, null, React__default['default'].createElement(HeaderLeft, null, headerLeft), React__default['default'].createElement(HeaderRight, null, headerRight))), React__default['default'].createElement(Gutter, {
     gutter: shouldRenderHeader ? 8 : 16
-  }), title && React__default["default"].createElement(Title, null, title), shouldAddGutterAfterTitle && React__default["default"].createElement(Gutter, {
+  }), title && React__default['default'].createElement(Title, null, title), shouldAddGutterAfterTitle && React__default['default'].createElement(Gutter, {
     gutter: 4
-  }), description && React__default["default"].createElement(Description, null, description), React__default["default"].createElement(Gutter, {
+  }), description && React__default['default'].createElement(Description, null, description), React__default['default'].createElement(Gutter, {
     gutter: 16
-  }), shouldRenderInstructions && React__default["default"].createElement(Instruction, null, React__default["default"].createElement(Alert.Alert, {
-    icon: React__default["default"].createElement(Instructions.SvgWarningCircle, null),
+  }), shouldRenderInstructions && React__default['default'].createElement(Instruction, null, React__default['default'].createElement(Alert.Alert, {
+    icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null),
     alertMessage: instructions,
     type: instructionsType,
     fontSize: 12,
@@ -260,9 +262,9 @@ var SummaryCard = React__default["default"].forwardRef(function AssetSummaryCard
     horizontalPadding: 16,
     width: width,
     lineClamp: 1
-  })), shouldAddGutterAfterInstructions && React__default["default"].createElement(Gutter, {
+  })), shouldAddGutterAfterInstructions && React__default['default'].createElement(Gutter, {
     gutter: 16
-  }), shouldRenderFooter && React__default["default"].createElement(Footer, null, React__default["default"].createElement(FooterLeft, null, footerLeft), React__default["default"].createElement(FooterRight, null, footerRight)), shouldRenderFooter && React__default["default"].createElement(Gutter, {
+  }), shouldRenderFooter && React__default['default'].createElement(Footer, null, React__default['default'].createElement(FooterLeft, null, footerLeft), React__default['default'].createElement(FooterRight, null, footerRight)), shouldRenderFooter && React__default['default'].createElement(Gutter, {
     gutter: 16
   }));
 });
@@ -277,8 +279,7 @@ SummaryCard.propTypes = process.env.NODE_ENV !== "production" ? {
   footerLeft: defaultTheme.PropTypes.node,
   footerRight: defaultTheme.PropTypes.node,
   width: defaultTheme.PropTypes.number,
-  useBorder: defaultTheme.PropTypes.bool,
-  view: defaultTheme.PropTypes.string
+  useBorder: defaultTheme.PropTypes.bool
 } : {};
 SummaryCard.defaultProps = {
   title: '',
@@ -293,12 +294,11 @@ SummaryCard.defaultProps = {
   activeSummaryCard: false
 };
 
-var _templateObject$3, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2, _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$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27, _templateObject28, _templateObject29;
-var AssetGalleryWrapper$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$3 || (_templateObject$3 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
-  return props.disabled && styled.css(_templateObject2$2 || (_templateObject2$2 = defaultTheme._taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
+var _templateObject$1, _templateObject2$1, _templateObject3$1, _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$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1;
+var AssetGalleryWrapper$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
+  return props.disabled && styled.css(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
 });
-var Reference = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$2 || (_templateObject3$2 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n"])));
-var AssetGalleryCompactCard$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4$2 || (_templateObject4$2 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  box-sizing: border-box;\n  cursor: pointer;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", "\n  video {\n    width: 100%;\n    height: 100%;\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
+var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  box-sizing: border-box;\n  cursor: pointer;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", "\n  video {\n    width: 100%;\n    height: 100%;\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
   return props.selected ? 1 : 0;
 }, function (props) {
   return props.selected ? 1 : 0;
@@ -309,198 +309,189 @@ var AssetGalleryCompactCard$2 = styled__default["default"].div.attrs(defaultThem
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
 }, function (props) {
-  return props.disabled && styled.css(_templateObject5$2 || (_templateObject5$2 = defaultTheme._taggedTemplateLiteral(["\n      pointer-events: none;\n      opacity: 0.4;\n    "])));
+  return props.disabled && styled.css(_templateObject4$1 || (_templateObject4$1 = defaultTheme._taggedTemplateLiteral(["\n      pointer-events: none;\n      opacity: 0.4;\n    "])));
 }, function (props) {
-  return props.extendedSelectMode && styled.css(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
+  return props.extendedSelectMode && styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
 });
-var Figure$1 = styled__default["default"].figure(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\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(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n            object-fit: cover;\n          "]))) : styled.css(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n            object-fit: contain;\n          "])));
+var Figure$1 = styled__default['default'].figure(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\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(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n            object-fit: cover;\n          "]))) : styled.css(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n            object-fit: contain;\n          "])));
 });
-var FigureOverlayBackdrop$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  inset: 0;\n  opacity: ", ";\n  background-color: ", ";\n"])), function (props) {
+var FigureOverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  inset: 0;\n  opacity: ", ";\n  background-color: ", ";\n"])), function (props) {
   return props.selected ? 0.6 : 0;
 }, function (props) {
   return props.selected ? '#ACCEF7' : 'transparent';
 });
-var Overlay$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n"])));
-var OverlayBackdrop$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", "\n  ", "\n    ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
-  return !props.selected ? styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n          background: radial-gradient(\n            ellipse at center,\n            rgba(0, 0, 0, 0.3) 27%,\n            rgba(0, 0, 0, 0.5) 60%,\n            rgba(0, 0, 0, 0.7) 90%\n          );\n        "]))) : null;
+var Overlay$1 = 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"])));
+var OverlayBackdrop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", "\n  ", "\n    ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
+  return !props.selected ? styled.css(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n          background: radial-gradient(\n            ellipse at center,\n            rgba(0, 0, 0, 0.3) 27%,\n            rgba(0, 0, 0, 0.5) 60%,\n            rgba(0, 0, 0, 0.7) 90%\n          );\n        "]))) : null;
 }, function (props) {
-  return (props.selected || props.softSelected) && styled.css(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 1;\n    "])));
+  return (props.selected || props.softSelected) && styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 1;\n    "])));
 }, Overlay$1);
-var OverlayInfo$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$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 50px 10px 12px;\n  color: ", ";\n  & span {\n    overflow: hidden;\n    word-wrap: break-word;\n  }\n"])), function (props) {
+var OverlayInfo$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14$1 || (_templateObject14$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 50px 10px 12px;\n  color: ", ";\n  & span {\n    overflow: hidden;\n    word-wrap: break-word;\n  }\n"])), function (props) {
   return props.theme.getColor('gray-100');
 });
-var OverlayCompleted = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = 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: 3px solid;\n  ", ";\n"])), function (props) {
+var OverlayCompleted = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$1 = 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: 3px solid;\n  ", ";\n"])), function (props) {
   if (props.softSelected) return null;
   return props.theme.themeProp('border-color', props.theme.getColor('emerald-500'), polished.rgba(props.theme.getColor('emerald-500'), 0.7));
 });
-var OverlayHasError = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17$1 || (_templateObject17$1 = 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: 3px solid;\n  ", "\n"])), function (props) {
+var OverlayHasError = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = 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: 3px solid;\n  ", "\n"])), function (props) {
   if (props.softSelected) return null;
   return props.theme.themeProp('border-color', props.theme.getColor('red-600'), polished.rgba(props.theme.getColor('red-500'), 0.7));
 });
-var OverlaySelected$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18$1 || (_templateObject18$1 = 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-style: solid;\n  border-width: 3px;\n\n  ", ";\n"])), function (props) {
+var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17$1 || (_templateObject17$1 = 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-style: solid;\n  border-width: 3px;\n\n  ", ";\n"])), function (props) {
   if (props.softSelected) {
     return props.theme.themeProp('border-color', polished.rgba(props.theme.getColor('gray-100'), 0.5), polished.rgba(props.theme.getColor('gray-700'), 0.5));
   }
+
   if (props.selected) {
     return props.theme.themeProp('border-color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
   }
+
   return props.theme.themeProp('border-color', 'transparent', 'transparent');
 });
-var OverlayInfoTop$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  padding: 8px;\n  display: flex;\n"])));
-var OverlayInfoTopActions$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20$1 || (_templateObject20$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  transition: opacity 220ms;\n  z-index: 99999;\n  ", "\n\n  opacity: ", ";\n"])), function (props) {
+var OverlayInfoTop$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18$1 || (_templateObject18$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  padding: 8px;\n  display: flex;\n"])));
+var OverlayInfoTopActions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  transition: opacity 220ms;\n  z-index: 99999;\n  ", "\n\n  opacity: ", ";\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
 }, function (props) {
   return props.isOverlayHovered ? 1 : 0;
 });
-var OverlayInfoTopLeft = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21$1 || (_templateObject21$1 = defaultTheme._taggedTemplateLiteral(["\n  opacity: 1;\n  display: ", ";\n\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), function (props) {
+var OverlayInfoTopLeft = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20$1 || (_templateObject20$1 = defaultTheme._taggedTemplateLiteral(["\n  opacity: 1;\n  display: ", ";\n\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), function (props) {
   return props !== null && props !== void 0 && props.collapseExtraInfo ? 'none' : 'block';
 }, Overlay$1);
-var OverlayInfoTopWarning$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22$1 || (_templateObject22$1 = defaultTheme._taggedTemplateLiteral(["\n  margin-left: auto;\n  height: 24px;\n  width: 24px;\n  border-radius: 50%;\n  box-sizing: border-box;\n  padding: ", ";\n  background-color: ", ";\n  opacity: 1;\n\n  svg {\n    width: 100%;\n    color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), function (props) {
+var OverlayInfoTopWarning$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21$1 || (_templateObject21$1 = defaultTheme._taggedTemplateLiteral(["\n  margin-left: auto;\n  height: 24px;\n  width: 24px;\n  border-radius: 50%;\n  box-sizing: border-box;\n  padding: ", ";\n  background-color: ", ";\n  opacity: 1;\n\n  svg {\n    width: 100%;\n    color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), function (props) {
   return props.type === 'error' ? 0 : '3px 4px';
 }, function (props) {
   return props.type === 'error' ? props.theme.getColor('red-500') : props.theme.getColor('gray-100');
 }, function (props) {
   return props.type === 'error' ? props.theme.getColor('gray-100') : props.theme.getColor('gray-700');
 }, Overlay$1);
-var OverlayInfoBottom$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23$1 || (_templateObject23$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  padding: 8px;\n  display: flex;\n"])));
-var OverlayInfoBottomSelectButton$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24$1 || (_templateObject24$1 = defaultTheme._taggedTemplateLiteral(["\n  opacity: ", ";\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: opacity 220ms;\n  height: 24px;\n\n  > svg {\n    width: 24px;\n    height: 24px;\n    transition: opacity 120ms;\n    opacity: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
+var OverlayInfoBottom$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22$1 || (_templateObject22$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  padding: 8px;\n  display: flex;\n"])));
+var OverlayInfoBottomSelectButton$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23$1 || (_templateObject23$1 = defaultTheme._taggedTemplateLiteral(["\n  opacity: ", ";\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: opacity 220ms;\n  height: 24px;\n\n  > svg {\n    width: 24px;\n    height: 24px;\n    transition: opacity 120ms;\n    opacity: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
   return props.selected ? 1 : 0;
 }, function (props) {
   return props.selected ? 1 : 0.5;
 }, Overlay$1);
-var OverlayInfoBottomMediaIcon$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25$1 || (_templateObject25$1 = defaultTheme._taggedTemplateLiteral(["\n  margin-left: auto;\n  opacity: 1;\n\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), Overlay$1);
-var ConsumerDefinedOverlay$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26$1 || (_templateObject26$1 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n"])));
-styled__default["default"].div(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n  margin: 4px;\n"])));
-styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  padding: 4px 8px;\n  border-radius: 4px;\n"])), function (props) {
-  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
-});
-var StyledFloatingArrow$1 = styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
-  return props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'));
-});
-
-var _templateObject$2;
-var AssetActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n  display: flex;\n  flex-direction: column;\n  padding: 2px;\n  gap: 8px;\n"])), function (props) {
-  return props.theme.primaryFontFamily;
-});
-
-var _excluded$5 = ["actions", "asset"];
-var AssetActionsBase = React__default["default"].forwardRef(function AssetActionsBase(_ref, forwardedRef) {
-  var actions = _ref.actions,
-    asset = _ref.asset,
-    props = defaultTheme._objectWithoutProperties(_ref, _excluded$5);
-  var assetActions = actions.map(function (action, index) {
-    return React__default["default"].createElement(AssetAction$1, defaultTheme._extends({
-      key: "index_".concat(action.title),
-      ref: forwardedRef
-    }, props, {
-      action: action,
-      asset: asset,
-      itemKey: "".concat(index, "-").concat(action.title)
-    }));
-  });
-  return React__default["default"].createElement(AssetActions, null, assetActions);
-});
-AssetActionsBase.propTypes = process.env.NODE_ENV !== "production" ? {
-  actions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
-  asset: defaultTheme.PropTypes.object
-} : {};
-AssetActionsBase.defaultProps = {};
+var OverlayInfoBottomMediaIcon$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24$1 || (_templateObject24$1 = defaultTheme._taggedTemplateLiteral(["\n  margin-left: auto;\n  opacity: 1;\n\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), Overlay$1);
+var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25$1 || (_templateObject25$1 = 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(_templateObject26$1 || (_templateObject26$1 = defaultTheme._taggedTemplateLiteral(["\n  margin: 4px;\n"])));
 
-var _excluded$4 = ["component", "asset"];
 var ComputedRootComponent$1 = function ComputedRootComponent(_ref) {
   var component = _ref.component,
-    asset = _ref.asset,
-    props = defaultTheme._objectWithoutProperties(_ref, _excluded$4);
+      asset = _ref.asset,
+      props = defaultTheme._objectWithoutProperties(_ref, ["component", "asset"]);
+
   var newProps = lodash.mapKeys(lodash.omit(props, ['theme', 'extendedSelectMode']), function (_, key) {
     return key === 'innerRef' ? 'ref' : key;
   });
+
   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.ref
   }, newProps));
 };
+
+var ComputedActionButton$1 = React__default['default'].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
+  var component = _ref2.component,
+      className = _ref2.className,
+      _ref2$subActions = _ref2.subActions,
+      subActions = _ref2$subActions === void 0 ? [] : _ref2$subActions,
+      isSubActionsOpened = _ref2.isSubActionsOpened,
+      props = defaultTheme._objectWithoutProperties(_ref2, ["component", "className", "subActions", "isSubActionsOpened"]);
+
+  var newProps = props;
+
+  if (!lodash.isEmpty(subActions)) {
+    var contextMenuItems = subActions.map(function (subAction, key) {
+      var onClick = subAction.onClick,
+          title = subAction.title,
+          icon = subAction.icon;
+      return React__default['default'].createElement(ContextMenuItem.ContextMenuItem, {
+        key: key,
+        onClickEffect: onClick,
+        title: title,
+        icon: icon
+      });
+    });
+    var contextMenu = React__default['default'].createElement(ContextMenu.ContextMenu, null, contextMenuItems);
+    newProps.children = React__default['default'].createElement(Popover.Popover, {
+      contextMenu: true,
+      content: contextMenu,
+      placement: 'bottom-end',
+      visible: isSubActionsOpened,
+      zIndex: 10001,
+      offset: [0, -8]
+    }, React__default['default'].createElement(ActionButton.ActionButton, {
+      useShadow: true,
+      active: true,
+      ref: forwardedRef,
+      className: className,
+      icon: newProps.icon,
+      backgroundColors: ['black', 'white'],
+      onClick: newProps.onClick,
+      buttonWidthHeight: newProps.actionButtonWidthHeight
+    }));
+  } else {
+    newProps.children = React__default['default'].createElement(ActionButton.ActionButton, {
+      useShadow: true,
+      active: true,
+      ref: forwardedRef,
+      className: className,
+      icon: newProps.icon,
+      onClick: newProps.onClick,
+      backgroundColors: ['black', 'white'],
+      buttonWidthHeight: newProps.actionButtonWidthHeight
+    });
+  }
+
+  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')));
+    }
+  }
+
+  return React__default['default'].createElement(React__default['default'].Fragment, null, newProps.children);
+});
+
 var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
-  var _asset$note, _asset$note2;
+  var _asset$note, _asset$note2, _asset$note3, _asset$note4;
+
   var asset = props.asset,
-    activeSummaryCard = props.activeSummaryCard,
-    displayIcon = props.displayIcon,
-    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,
-    collapseExtraInfo = props.collapseExtraInfo;
-  var ARROW_WIDTH = 30;
-  var ARROW_HEIGHT = 15;
-  var GAP = 8;
-  var arrowRef = React.useRef(null);
-  var _useState = React.useState(false),
-    _useState2 = defaultTheme._slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var _useState3 = React.useState('bottom'),
-    _useState4 = defaultTheme._slicedToArray(_useState3, 1),
-    placement = _useState4[0];
-  var _useState5 = React.useState(false),
-    _useState6 = defaultTheme._slicedToArray(_useState5, 2),
-    isOverlayHovered = _useState6[0],
-    setIsOverlayHovered = _useState6[1];
-  var _useState7 = React.useState([]),
-    _useState8 = defaultTheme._slicedToArray(_useState7, 2),
-    openedSubActions = _useState8[0],
-    updateOpenedSubActions = _useState8[1];
-  var _useFloating = react.useFloating({
-      placement: placement,
-      open: isOpen,
-      onOpenChange: setIsOpen,
-      whileElementsMounted: react.autoUpdate,
-      middleware: [react.offset(ARROW_HEIGHT + GAP), react.flip({
-        padding: 5
-      }), react.shift({
-        padding: 5
-      }), react.arrow({
-        element: arrowRef
-      })]
-    }),
-    refs = _useFloating.refs,
-    floatingStyles = _useFloating.floatingStyles,
-    context = _useFloating.context;
-  var _useTransitionStyles = react.useTransitionStyles(context, {
-      initial: {
-        transform: 'translateY(-8px)',
-        opacity: 0
-      },
-      duration: {
-        open: 200,
-        close: 100
-      }
-    }),
-    isMounted = _useTransitionStyles.isMounted,
-    styles = _useTransitionStyles.styles;
-  var hover = react.useHover(context, {
-    restMs: 100
-  });
-  var dismiss = react.useDismiss(context, {
-    referencePress: true,
-    ancestorScroll: true,
-    windowScroll: true,
-    windowBlur: true
-  });
-  var _useInteractions = react.useInteractions([dismiss, hover]),
-    getReferenceProps = _useInteractions.getReferenceProps,
-    getFloatingProps = _useInteractions.getFloatingProps;
+      activeSummaryCard = props.activeSummaryCard,
+      displayVersionCount = props.displayVersionCount,
+      displayVerificationIcon = props.displayVerificationIcon,
+      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,
+      collapseExtraInfo = props.collapseExtraInfo;
+
+  var _React$useState = React__default['default'].useState(false),
+      _React$useState2 = defaultTheme._slicedToArray(_React$useState, 2),
+      isOverlayHovered = _React$useState2[0],
+      setIsOverlayHovered = _React$useState2[1];
+
+  var _React$useState3 = React__default['default'].useState([]),
+      _React$useState4 = defaultTheme._slicedToArray(_React$useState3, 2),
+      openedSubActions = _React$useState4[0],
+      updateOpenedSubActions = _React$useState4[1];
+
   React.useEffect(function () {
     var _asset$actions;
+
     var newOpenedSubActions = ((_asset$actions = asset === null || asset === void 0 ? void 0 : asset.actions) !== null && _asset$actions !== void 0 ? _asset$actions : []).map(function () {
       return false;
     });
@@ -519,38 +510,72 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
   var mouseHasLeftOverlay = React.useCallback(function () {
     setIsOverlayHovered(false);
   }, []);
+  var onSubActionsViewToggle = React.useCallback(function (actionIndex) {
+    var newOpenedSubActions = openedSubActions.map(function (isOpened, index) {
+      if (index !== actionIndex) {
+        return false;
+      }
+
+      return !isOpened;
+    });
+    updateOpenedSubActions(newOpenedSubActions);
+  }, [openedSubActions]);
+  var shouldOpenSubActions = React.useCallback(function (actionIndex) {
+    return openedSubActions[actionIndex];
+  }, [openedSubActions]);
   var isAnySubActionsOpened = React.useMemo(function () {
     return openedSubActions.some(function (isOpened) {
       return isOpened;
     });
   }, [openedSubActions]);
+
   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);
     }
   }
+
+  var onActionClick = React.useCallback(function (event, action, index) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (lodash.isFunction(action === null || action === void 0 ? void 0 : action.onClick)) {
+      action.onClick(asset);
+    }
+
+    if (!lodash.isEmpty(action === null || action === void 0 ? void 0 : action.subActions)) {
+      onSubActionsViewToggle(index);
+    }
+  }, [onSubActionsViewToggle]);
+
   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);
@@ -558,14 +583,17 @@ 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);
@@ -576,45 +604,51 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
   var videoPlayerRef = React.useRef();
   var cardRef = React.useRef();
   var dragRef = React.useRef(null);
-  var overlayCompactRef = react.useMergeRefs([cardRef, refs.setReference]);
+
   function onMouseEnter(event) {
     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() {
     if (videoPlayerRef.current) {
       videoPlayerRef.current.pause();
     }
   }
+
   var renderPreview = function renderPreview(asset) {
     var _asset$fileType, _asset$fileType2;
+
     var previewContent = null;
+
     if ((asset === null || asset === void 0 ? void 0 : (_asset$fileType = asset.fileType) === null || _asset$fileType === void 0 ? void 0 : _asset$fileType.toLowerCase()) === 'video') {
-      previewContent = React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
+      previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
         scrollPosition: scrollPosition
-      }, React__default["default"].createElement("video", {
+      }, React__default['default'].createElement("video", {
         ref: videoPlayerRef,
         loop: true,
         muted: true
-      }, React__default["default"].createElement("source", {
+      }, React__default['default'].createElement("source", {
         src: asset.previewUrl,
         type: "video/mp4"
       })));
     } else if ((asset === null || asset === void 0 ? void 0 : (_asset$fileType2 = asset.fileType) === null || _asset$fileType2 === void 0 ? void 0 : _asset$fileType2.toLowerCase()) === 'audio') {
-      previewContent = React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
+      previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
         scrollPosition: scrollPosition
-      }, React__default["default"].createElement("div", {
+      }, React__default['default'].createElement("div", {
         className: "audio"
-      }, React__default["default"].createElement(SvgHeadset, null)));
+      }, React__default['default'].createElement(SvgHeadset, null)));
     } else {
-      previewContent = React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
+      previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
         alt: asset === null || asset === void 0 ? void 0 : asset.title,
         src: asset === null || asset === void 0 ? void 0 : asset.previewUrl,
         height: "100%",
@@ -625,12 +659,14 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
         scrollPosition: scrollPosition
       });
     }
-    return React__default["default"].createElement(Figure$1, {
+
+    return React__default['default'].createElement(Figure$1, {
       hasHeightAndWidth: hasHeightAndWidth
-    }, previewContent, React__default["default"].createElement(FigureOverlayBackdrop$1, {
+    }, previewContent, React__default['default'].createElement(FigureOverlayBackdrop$1, {
       selected: selected
     }));
   };
+
   React.useEffect(function () {
     if (softSelected) {
       cardRef.current.scrollIntoView({
@@ -641,8 +677,8 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
   }, [softSelected]);
   var renderVersionsBadge = React.useCallback(function () {
     if (!(asset !== null && asset !== void 0 && asset.versions)) return null;
-    return React__default["default"].createElement(Badge.Badge, {
-      badgeIcon: React__default["default"].createElement(SvgLayers, null),
+    return React__default['default'].createElement(Badge.Badge, {
+      badgeIcon: React__default['default'].createElement(SvgLayers, null),
       badgeContent: asset.versions,
       backgroundColors: ['black', 'black'],
       colors: ['#f7f8f9', '#f7f8f9'],
@@ -657,34 +693,20 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     if (!(asset !== null && asset !== void 0 && asset.verifications)) return null;
     return asset === null || asset === void 0 ? void 0 : asset.verifications;
   }, [asset]);
-  var renderdynamicBadge = React.useCallback(function () {
-    if (asset !== null && asset !== void 0 && asset.verifications) return renderVerificationBadge();
-    if (asset !== null && asset !== void 0 && asset.versions) return renderVersionsBadge();
-    return null;
-  });
-  var renderBadge = function renderBadge() {
-    switch (displayIcon) {
-      case 'versions':
-        return renderVersionsBadge();
-      case 'verifications':
-        return renderVerificationBadge();
-      case 'dynamic':
-        return renderdynamicBadge();
-      default:
-        return null;
-    }
-  };
   var renderMediaBadge = React.useCallback(function () {
     var badgeIcon = null;
     var badgeContent = null;
+
     if ((asset === null || asset === void 0 ? void 0 : asset.fileType) === 'video') {
-      badgeIcon = React__default["default"].createElement(SvgPlay, null);
+      badgeIcon = React__default['default'].createElement(SvgPlay, null);
     }
+
     if (asset !== null && asset !== void 0 && asset.duration) {
       badgeContent = convertMsToHMS(asset.duration);
     }
+
     if (!badgeIcon && !badgeContent) return null;
-    return React__default["default"].createElement(Badge.Badge, {
+    return React__default['default'].createElement(Badge.Badge, {
       badgeIcon: badgeIcon,
       badgeContent: badgeContent,
       backgroundColors: ['black', 'black'],
@@ -699,27 +721,27 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     });
   }, [asset]);
   var renderSummaryCardHeaderLeft = React.useCallback(function () {
-    return React__default["default"].createElement(React__default["default"].Fragment, null, renderVersionsBadge(), renderMediaBadge());
+    return React__default['default'].createElement(React__default['default'].Fragment, null, renderVersionsBadge(), renderMediaBadge());
   }, [asset]);
   var renderPopoverContent = React.useCallback(function () {
-    var _asset$summary, _asset$summary2, _asset$summary3, _asset$summary4;
-    return React__default["default"].createElement(SummaryCard, {
+    var _asset$summary, _asset$summary2, _asset$summary3, _asset$summary4, _asset$summary5, _asset$summary6, _asset$summary7, _asset$summary8;
+
+    return React__default['default'].createElement(SummaryCard, {
       activeSummaryCard: activeSummaryCard,
-      title: (asset === null || asset === void 0 ? void 0 : asset.title) || '',
-      description: (asset === null || asset === void 0 ? void 0 : asset.description) || '',
-      instructions: (asset === null || asset === void 0 ? void 0 : asset.imageRights) || '',
-      instructionsType: 'warning',
-      headerRight: (asset === null || asset === void 0 ? void 0 : (_asset$summary = asset.summary) === null || _asset$summary === void 0 ? void 0 : _asset$summary.headerRight) || '',
-      headerLeft: React__default["default"].createElement(React__default["default"].Fragment, null, renderSummaryCardHeaderLeft(), (asset === null || asset === void 0 ? void 0 : (_asset$summary2 = asset.summary) === null || _asset$summary2 === void 0 ? void 0 : _asset$summary2.headerLeft) || ''),
-      footerLeft: (asset === null || asset === void 0 ? void 0 : (_asset$summary3 = asset.summary) === null || _asset$summary3 === void 0 ? void 0 : _asset$summary3.footerLeft) || '',
-      footerRight: (asset === null || asset === void 0 ? void 0 : (_asset$summary4 = asset.summary) === null || _asset$summary4 === void 0 ? void 0 : _asset$summary4.footerRight) || '',
-      width: 375,
-      compact: true
+      title: (asset === null || asset === void 0 ? void 0 : (_asset$summary = asset.summary) === null || _asset$summary === void 0 ? void 0 : _asset$summary.title) || '',
+      description: (asset === null || asset === void 0 ? void 0 : (_asset$summary2 = asset.summary) === null || _asset$summary2 === void 0 ? void 0 : _asset$summary2.description) || '',
+      instructions: (asset === null || asset === void 0 ? void 0 : (_asset$summary3 = asset.summary) === null || _asset$summary3 === void 0 ? void 0 : _asset$summary3.instructions) || '',
+      instructionsType: (asset === null || asset === void 0 ? void 0 : (_asset$summary4 = asset.summary) === null || _asset$summary4 === void 0 ? void 0 : _asset$summary4.instructionsType) || '',
+      headerRight: (asset === null || asset === void 0 ? void 0 : (_asset$summary5 = asset.summary) === null || _asset$summary5 === void 0 ? void 0 : _asset$summary5.headerRight) || '',
+      headerLeft: React__default['default'].createElement(React__default['default'].Fragment, null, renderSummaryCardHeaderLeft(), (asset === null || asset === void 0 ? void 0 : (_asset$summary6 = asset.summary) === null || _asset$summary6 === void 0 ? void 0 : _asset$summary6.headerLeft) || ''),
+      footerLeft: (asset === null || asset === void 0 ? void 0 : (_asset$summary7 = asset.summary) === null || _asset$summary7 === void 0 ? void 0 : _asset$summary7.footerLeft) || '',
+      footerRight: (asset === null || asset === void 0 ? void 0 : (_asset$summary8 = asset.summary) === null || _asset$summary8 === void 0 ? void 0 : _asset$summary8.footerRight) || '',
+      width: 375
     });
   }, [asset]);
-  return React__default["default"].createElement(AssetGalleryWrapper$1, {
+  return React__default['default'].createElement(AssetGalleryWrapper$1, {
     disabled: asset.disabled
-  }, React__default["default"].createElement(AssetGalleryCompactCard$2, defaultTheme._extends({
+  }, React__default['default'].createElement(AssetGalleryCompactCard$2, {
     as: ComputedRootComponent$1,
     component: component,
     disabled: asset.disabled,
@@ -731,51 +753,95 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     draggable: asset.draggable,
     innerRef: dragRef,
     selected: selected
-  }, getReferenceProps()), React__default["default"].createElement(Reference, {
-    ref: refs.setReference
-  }, asset.previewUrl && renderPreview(asset)), React__default["default"].createElement(Overlay$1, defaultTheme._extends({
-    ref: overlayCompactRef,
+  }, asset.previewUrl && renderPreview(asset), activeSummaryCard ? React__default['default'].createElement(Popover.Popover, {
+    content: renderPopoverContent(),
+    placement: 'bottom',
+    visible: isOverlayHovered && !isAnySubActionsOpened,
+    zIndex: 10000
+  }, React__default['default'].createElement(Overlay$1, {
+    ref: cardRef,
     onMouseEnter: mouseHasEnteredOverlay,
-    onMouseLeave: mouseHasLeftOverlay,
-    style: {
-      height: '100%'
-    }
-  }, getReferenceProps()), React__default["default"].createElement(OverlayBackdrop$1, {
+    onMouseLeave: mouseHasLeftOverlay
+  }, React__default['default'].createElement(OverlayBackdrop$1, {
     softSelected: softSelected,
     selected: selected
-  }), (asset === null || asset === void 0 ? void 0 : asset.actions) && React__default["default"].createElement(OverlayInfoTopActions$1, {
+  }), React__default['default'].createElement(OverlayInfoTopActions$1, {
     isOverlayHovered: isOverlayHovered
-  }, React__default["default"].createElement(AssetActionsBase, {
-    actions: asset.actions,
-    asset: asset
-  })), React__default["default"].createElement(OverlayInfo$1, null, isOverlayHovered && React__default["default"].createElement("span", null, asset.title), React__default["default"].createElement(OverlayInfoTop$1, null, React__default["default"].createElement(OverlayInfoTopLeft, {
+  }, asset.actions && asset.actions.map(function (action, index) {
+    return React__default['default'].createElement(Tooltip.Tooltip, {
+      key: "".concat(asset.key, "-").concat(action.title),
+      content: React__default['default'].createElement("span", null, action.title)
+    }, React__default['default'].createElement(Fragment$1, {
+      key: "".concat(asset.key, "-").concat(action.title),
+      as: ComputedActionButton$1,
+      component: action.component,
+      className: action.className,
+      icon: action.icon,
+      isSubActionsOpened: shouldOpenSubActions(index),
+      subActions: action.subActions,
+      onClick: function onClick(event) {
+        return onActionClick(event, action, index);
+      },
+      actionButtonWidthHeight: action.actionButtonWidthHeight
+    }));
+  })), React__default['default'].createElement(OverlayInfo$1, null, React__default['default'].createElement(OverlayInfoTop$1, null, React__default['default'].createElement(OverlayInfoTopLeft, {
     collapseExtraInfo: collapseExtraInfo
-  }, renderBadge()), (asset === null || asset === void 0 ? void 0 : (_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default["default"].createElement(OverlayInfoTopWarning$1, {
+  }, displayVersionCount && renderVersionsBadge() || displayVerificationIcon && renderVerificationBadge()), (asset === null || asset === void 0 ? void 0 : (_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopWarning$1, {
     type: asset === null || asset === void 0 ? void 0 : (_asset$note2 = asset.note) === null || _asset$note2 === void 0 ? void 0 : _asset$note2.type
-  }, React__default["default"].createElement(Instructions.SvgWarningCircle, null))), React__default["default"].createElement(OverlayInfoBottom$1, null, selectable && React__default["default"].createElement(OverlayInfoBottomSelectButton$1, {
+  }, React__default['default'].createElement(warningCircle.SvgWarningCircle, null))), React__default['default'].createElement(OverlayInfoBottom$1, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton$1, {
+    selected: selected
+  }, React__default['default'].createElement(SvgCheckRectangleFilled, {
+    onClick: onSelectClick
+  })), React__default['default'].createElement(OverlayInfoBottomMediaIcon$1, null, renderMediaBadge()))), asset.completed && React__default['default'].createElement(OverlayCompleted, {
+    softSelected: softSelected
+  }), asset.hasError && React__default['default'].createElement(OverlayHasError, {
+    softSelected: softSelected
+  }), selectable && React__default['default'].createElement(OverlaySelected$1, {
+    selected: selected,
+    softSelected: softSelected
+  }))) : React__default['default'].createElement(Overlay$1, {
+    ref: cardRef,
+    onMouseEnter: mouseHasEnteredOverlay,
+    onMouseLeave: mouseHasLeftOverlay
+  }, React__default['default'].createElement(OverlayBackdrop$1, {
+    softSelected: softSelected,
+    selected: selected
+  }), React__default['default'].createElement(OverlayInfoTopActions$1, {
+    isOverlayHovered: isOverlayHovered
+  }, asset.actions && asset.actions.map(function (action, index) {
+    return React__default['default'].createElement(Tooltip.Tooltip, {
+      key: "".concat(asset.key, "-").concat(action.title),
+      content: React__default['default'].createElement("span", null, action.title)
+    }, React__default['default'].createElement(Fragment$1, {
+      as: ComputedActionButton$1,
+      component: action.component,
+      className: action.className,
+      icon: action.icon,
+      isSubActionsOpened: shouldOpenSubActions(index),
+      subActions: action.subActions,
+      onClick: function onClick(event) {
+        return onActionClick(event, action, index);
+      },
+      actionButtonWidthHeight: action.actionButtonWidthHeight
+    }));
+  })), React__default['default'].createElement(OverlayInfo$1, null, isOverlayHovered && React__default['default'].createElement("span", null, asset.title), React__default['default'].createElement(OverlayInfoTop$1, null, React__default['default'].createElement(OverlayInfoTopLeft, {
+    collapseExtraInfo: collapseExtraInfo
+  }, displayVersionCount && renderVersionsBadge() || displayVerificationIcon && renderVerificationBadge()), (asset === null || asset === void 0 ? void 0 : (_asset$note3 = asset.note) === null || _asset$note3 === void 0 ? void 0 : _asset$note3.title) && React__default['default'].createElement(OverlayInfoTopWarning$1, {
+    type: asset === null || asset === void 0 ? void 0 : (_asset$note4 = asset.note) === null || _asset$note4 === void 0 ? void 0 : _asset$note4.type
+  }, React__default['default'].createElement(warningCircle.SvgWarningCircle, null))), React__default['default'].createElement(OverlayInfoBottom$1, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton$1, {
     selected: selected
-  }, React__default["default"].createElement(SvgCheckRectangleFilled, {
+  }, React__default['default'].createElement(SvgCheckRectangleFilled, {
     onClick: onSelectClick
-  })), React__default["default"].createElement(OverlayInfoBottomMediaIcon$1, null, renderMediaBadge()))), asset.completed && React__default["default"].createElement(OverlayCompleted, {
+  })), React__default['default'].createElement(OverlayInfoBottomMediaIcon$1, null, renderMediaBadge()))), 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$1, {
+  }), selectable && React__default['default'].createElement(OverlaySelected$1, {
     selected: selected,
     softSelected: softSelected
-  }), isOpen && isOverlayHovered && isMounted && activeSummaryCard && !isAnySubActionsOpened && React__default["default"].createElement("div", defaultTheme._extends({
-    ref: refs.setFloating,
-    style: floatingStyles
-  }, getFloatingProps()), React__default["default"].createElement("div", {
-    style: styles,
-    className: "floating"
-  }, renderPopoverContent(), React__default["default"].createElement(StyledFloatingArrow$1, {
-    ref: arrowRef,
-    context: context,
-    width: ARROW_WIDTH,
-    height: ARROW_HEIGHT
-  })))), 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,
@@ -789,140 +855,150 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   scrollPosition: defaultTheme.PropTypes.number,
   collapseExtraInfo: defaultTheme.PropTypes.bool,
   activeSummaryCard: defaultTheme.PropTypes.bool,
-  displayIcon: defaultTheme.PropTypes.oneOf(['versions', 'verifications', ''])
+  actionButtonWidthHeight: defaultTheme.PropTypes.array
 } : {};
-var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default["default"].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
+AssetGalleryCompactCard.defaultProps = {};
+var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
   var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth', 'collapseExtraInfo'];
   return reactiveProps.every(function (propKey) {
     return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
   });
 }));
 
-var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
-var AssetGalleryWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
-  return props.disabled && styled.css(_templateObject2$1 || (_templateObject2$1 = defaultTheme._taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+var AssetGalleryWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
+  return props.disabled && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
 });
-var AssetGalleryGridCard$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  position: relative;\n  height: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border-width: ", "px;\n  border-style: solid;\n  text-decoration: none;\n  cursor: pointer;\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  ", ";\n"])), function (props) {
+var AssetGalleryGridCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  position: relative;\n  height: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border-width: ", "px;\n  border-style: solid;\n  text-decoration: none;\n  cursor: pointer;\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  ", ";\n"])), function (props) {
   var selected = props.selected,
-    softSelected = props.softSelected,
-    hasError = props.hasError,
-    completed = props.completed;
+      softSelected = props.softSelected,
+      hasError = props.hasError,
+      completed = props.completed;
   return selected || softSelected || hasError || completed ? 3 : 1;
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
 }, function (props) {
-  return props.disabled && styled.css(_templateObject4$1 || (_templateObject4$1 = defaultTheme._taggedTemplateLiteral(["\n      pointer-events: none;\n      opacity: 0.4;\n    "])));
+  return props.disabled && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      pointer-events: none;\n      opacity: 0.4;\n    "])));
 }, function (props) {
-  return props.extendedSelectMode && styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
+  return props.extendedSelectMode && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
 }, function (props) {
   if (props.softSelected) {
     return props.theme.themeProp('border-color', polished.rgba(props.theme.getColor('gray-100'), 0.5), polished.rgba(props.theme.getColor('gray-700'), 0.5));
   }
+
   if (props.selected) {
     return props.theme.themeProp('border-color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
   }
+
   if (props.completed) {
     return props.theme.themeProp('border-color', props.theme.getColor('emerald-500'), polished.rgba(props.theme.getColor('emerald-500'), 0.7));
   }
+
   if (props.hasError) {
     return props.theme.themeProp('border-color', props.theme.getColor('red-600'), polished.rgba(props.theme.getColor('red-500'), 0.7));
   }
+
   return props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
 });
-var ContentWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: ", "px;\n  padding-top: 35px;\n  height: 100%;\n"])), function (props) {
+var ContentWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  padding: ", "px;\n  padding-top: 35px;\n  height: 100%;\n"])), function (props) {
   return props.selected || props.softSelected ? 4 : 0;
 });
-var Asset = styled__default["default"].div(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n  padding: 0 36px;\n  min-height: 200px;\n  box-sizing: border-box;\n\n  video {\n    display: block;\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    svg {\n      width: 25%;\n    }\n  }\n"])));
-var Figure = styled__default["default"].figure(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin: 0;\n\n  img,\n  video,\n  .audio {\n    display: block;\n    max-height: 200px;\n    width: 100%;\n    box-sizing: border-box;\n\n    ", "\n  }\n\n  .audio {\n    display: flex;\n    height: 200px;\n    justify-content: center;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
+var Asset = styled__default['default'].div(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n  padding: 0 36px;\n  min-height: 200px;\n  box-sizing: border-box;\n\n  video {\n    display: block;\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    svg {\n      width: 25%;\n    }\n  }\n"])));
+var Figure = styled__default['default'].figure(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin: 0;\n\n  img,\n  video,\n  .audio {\n    display: block;\n    max-height: 200px;\n    width: 100%;\n    box-sizing: border-box;\n\n    ", "\n  }\n\n  .audio {\n    display: flex;\n    height: 200px;\n    justify-content: center;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
   return props.hasHeightAndWidth ? styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n            object-fit: cover;\n          "]))) : styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n            object-fit: contain;\n          "])));
 });
-var FigureOverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  inset: 0;\n  opacity: ", ";\n  background-color: ", ";\n"])), function (props) {
+var FigureOverlayBackdrop = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  inset: 0;\n  opacity: ", ";\n  background-color: ", ";\n"])), function (props) {
   return props.selected ? 0.6 : 0;
 }, function (props) {
   return props.selected ? '#ACCEF7' : 'transparent';
 });
-var Overlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = 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)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  opacity: 0;\n  transition: opacity 220ms;\n  ", "\n\n  ", "\n\n  ", ":hover & {\n    opacity: 1;\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
+var Overlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = 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)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  opacity: 0;\n  transition: opacity 220ms;\n  ", "\n\n  ", "\n\n  ", ":hover & {\n    opacity: 1;\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
   return !props.selected ? styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n          background: radial-gradient(\n            ellipse at center,\n            rgba(0, 0, 0, 0.3) 27%,\n            rgba(0, 0, 0, 0.5) 60%,\n            rgba(0, 0, 0, 0.7) 90%\n          );\n        "]))) : null;
 }, function (props) {
   return (props.selected || props.softSelected) && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 1;\n    "])));
 }, Overlay, AssetGalleryGridCard$2);
-var OverlayInfo = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = 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)(_templateObject16 || (_templateObject16 = 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 OverlaySelected = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n"])));
-var OverlayInfoTop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  padding: 8px;\n  display: flex;\n"])));
-var OverlayInfoTopVersions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n  opacity: 1;\n\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), AssetGalleryGridCard$2);
-var OverlayInfoTopWarning = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n  margin-left: auto;\n  height: 24px;\n  width: 24px;\n  border-radius: 50%;\n  box-sizing: border-box;\n  padding: ", ";\n  background-color: ", ";\n  opacity: 1;\n\n  svg {\n    width: 100%;\n    color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), function (props) {
+var OverlaySelected = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n"])));
+var OverlayInfoTop = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  padding: 8px;\n  display: flex;\n"])));
+var OverlayInfoTopVersions = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n  opacity: 1;\n\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), AssetGalleryGridCard$2);
+var OverlayInfoTopWarning = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n  margin-left: auto;\n  height: 24px;\n  width: 24px;\n  border-radius: 50%;\n  box-sizing: border-box;\n  padding: ", ";\n  background-color: ", ";\n  opacity: 1;\n\n  svg {\n    width: 100%;\n    color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), function (props) {
   return props.type === 'error' ? 0 : '4px';
 }, function (props) {
   return props.type === 'error' ? props.theme.getColor('red-500') : props.theme.getColor('gray-100');
 }, function (props) {
   return props.type === 'error' ? props.theme.getColor('gray-100') : props.theme.getColor('gray-700');
 }, AssetGalleryGridCard$2);
-var OverlayInfoTopActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  transition: opacity 220ms;\n  z-index: 99999;\n  ", "\n\n  opacity: ", ";\n"])), function (props) {
+var OverlayInfoTopActions = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  transition: opacity 220ms;\n  z-index: 99999;\n  ", "\n\n  opacity: ", ";\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
 }, function (props) {
   return props.isCardHovered ? 1 : 0;
 });
-var OverlayInfoBottom = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  padding: 8px;\n  display: flex;\n"])));
-var OverlayInfoBottomSelectButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = 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: opacity 120ms;\n    opacity: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
+var OverlayInfoBottom = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  padding: 8px;\n  display: flex;\n"])));
+var OverlayInfoBottomSelectButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = 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: opacity 120ms;\n    opacity: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
   return props.selected ? 1 : 0;
 }, function (props) {
   return props.selected ? 1 : 0.5;
 }, Overlay, AssetGalleryGridCard$2);
-var OverlayInfoBottomMediaIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n  margin-left: auto;\n  opacity: 1;\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), AssetGalleryGridCard$2);
-var ConsumerDefinedOverlay = 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"])));
-var Fragment = styled__default["default"].div(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n  margin: 4px;\n"])));
+var OverlayInfoBottomMediaIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n  margin-left: auto;\n  opacity: 1;\n  ", ":hover & {\n    opacity: 0;\n  }\n"])), AssetGalleryGridCard$2);
+var ConsumerDefinedOverlay = 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"])));
+var Fragment = styled__default['default'].div(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n  margin: 4px;\n"])));
 
-var _excluded$3 = ["component", "asset"],
-  _excluded2 = ["component", "className", "subActions", "isSubActionsOpened"];
 var ComputedRootComponent = function ComputedRootComponent(_ref) {
   var component = _ref.component,
-    asset = _ref.asset,
-    props = defaultTheme._objectWithoutProperties(_ref, _excluded$3);
+      asset = _ref.asset,
+      props = defaultTheme._objectWithoutProperties(_ref, ["component", "asset"]);
+
   var newProps = lodash.mapKeys(lodash.omit(props, ['theme', 'extendedSelectMode']), function (_, key) {
     return key === 'innerRef' ? 'ref' : key;
   });
+
   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.ref
   }, newProps));
 };
-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,
-    _ref2$subActions = _ref2.subActions,
-    subActions = _ref2$subActions === void 0 ? [] : _ref2$subActions,
-    isSubActionsOpened = _ref2.isSubActionsOpened,
-    props = defaultTheme._objectWithoutProperties(_ref2, _excluded2);
+      className = _ref2.className,
+      _ref2$subActions = _ref2.subActions,
+      subActions = _ref2$subActions === void 0 ? [] : _ref2$subActions,
+      isSubActionsOpened = _ref2.isSubActionsOpened,
+      props = defaultTheme._objectWithoutProperties(_ref2, ["component", "className", "subActions", "isSubActionsOpened"]);
+
   var newProps = props;
+
   if (!lodash.isEmpty(subActions)) {
     var contextMenuItems = subActions.map(function (subAction, key) {
       var onClick = subAction.onClick,
-        title = subAction.title,
-        icon = subAction.icon;
-      return React__default["default"].createElement(ContextMenuItem.ContextMenuItem, {
+          title = subAction.title,
+          icon = subAction.icon;
+      return React__default['default'].createElement(ContextMenuItem.ContextMenuItem, {
         key: key,
         onClickEffect: onClick,
         title: title,
         icon: icon
       });
     });
-    var contextMenu = React__default["default"].createElement(ContextMenu.ContextMenu, null, contextMenuItems);
-    newProps.children = React__default["default"].createElement(Popover.Popover, {
+    var contextMenu = React__default['default'].createElement(ContextMenu.ContextMenu, null, contextMenuItems);
+    newProps.children = React__default['default'].createElement(Popover.Popover, {
       contextMenu: true,
       content: contextMenu,
       placement: 'bottom-end',
       visible: isSubActionsOpened,
       zIndex: 10001,
       offset: [0, -8]
-    }, React__default["default"].createElement(ActionButton.ActionButton, {
+    }, React__default['default'].createElement(ActionButton.ActionButton, {
       useShadow: true,
       active: true,
       ref: forwardedRef,
@@ -930,10 +1006,10 @@ var ComputedActionButton = React__default["default"].forwardRef(function Compute
       icon: newProps.icon,
       backgroundColors: ['black', 'white'],
       onClick: newProps.onClick,
-      actionWidthHeight: newProps.actionWidthHeight
+      buttonWidthHeight: newProps.actionButtonWidthHeight
     }));
   } else {
-    newProps.children = React__default["default"].createElement(ActionButton.ActionButton, {
+    newProps.children = React__default['default'].createElement(ActionButton.ActionButton, {
       useShadow: true,
       active: true,
       ref: forwardedRef,
@@ -941,37 +1017,45 @@ var ComputedActionButton = React__default["default"].forwardRef(function Compute
       icon: newProps.icon,
       onClick: newProps.onClick,
       backgroundColors: ['black', 'white'],
-      actionWidthHeight: newProps.actionWidthHeight
+      buttonWidthHeight: newProps.actionButtonWidthHeight
     });
   }
+
   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 = 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;
-  var _React$useState = React__default["default"].useState(false),
-    _React$useState2 = defaultTheme._slicedToArray(_React$useState, 2),
-    isCardHovered = _React$useState2[0],
-    setIsCardHovered = _React$useState2[1];
-  var _React$useState3 = React__default["default"].useState([]),
-    _React$useState4 = defaultTheme._slicedToArray(_React$useState3, 2),
-    openedSubActions = _React$useState4[0],
-    updateOpenedSubActions = _React$useState4[1];
+      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 _React$useState = React__default['default'].useState(false),
+      _React$useState2 = defaultTheme._slicedToArray(_React$useState, 2),
+      isCardHovered = _React$useState2[0],
+      setIsCardHovered = _React$useState2[1];
+
+  var _React$useState3 = React__default['default'].useState([]),
+      _React$useState4 = defaultTheme._slicedToArray(_React$useState3, 2),
+      openedSubActions = _React$useState4[0],
+      updateOpenedSubActions = _React$useState4[1];
+
   React.useEffect(function () {
     var _asset$actions;
+
     var newOpenedSubActions = ((_asset$actions = asset === null || asset === void 0 ? void 0 : asset.actions) !== null && _asset$actions !== void 0 ? _asset$actions : []).map(function () {
       return false;
     });
@@ -995,6 +1079,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
       if (index !== actionIndex) {
         return false;
       }
+
       return !isOpened;
     });
     updateOpenedSubActions(newOpenedSubActions);
@@ -1002,46 +1087,60 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
   var videoPlayerRef = React.useRef();
   var cardRef = React.useRef();
   var dragRef = React.useRef(null);
+
   function onMouseEnter(event) {
     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);
     }
+
     mouseHasEnteredCard();
   }
+
   function onMouseLeave() {
     if (videoPlayerRef.current) {
       videoPlayerRef.current.pause();
     }
+
     mouseHasLeftCard();
   }
+
   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);
   }
+
   var onActionClick = React.useCallback(function (event, action, index) {
     event.preventDefault();
     event.stopPropagation();
+
     if (lodash.isFunction(action === null || action === void 0 ? void 0 : action.onClick)) {
       action.onClick(asset);
     }
+
     if (!lodash.isEmpty(action === null || action === void 0 ? void 0 : action.subActions)) {
       onSubActionsViewToggle(index);
     }
@@ -1049,32 +1148,36 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
   var shouldOpenSubActions = React.useCallback(function (actionIndex) {
     return openedSubActions[actionIndex];
   }, [openedSubActions]);
+
   function onContextMenu(event) {
     event.preventDefault();
     asset.onContextMenu(event);
   }
+
   function renderPreview(asset) {
     var _asset$fileType, _asset$fileType2, _asset$note, _asset$note2;
+
     var previewContent = null;
+
     if (((_asset$fileType = asset.fileType) === null || _asset$fileType === void 0 ? void 0 : _asset$fileType.toLowerCase()) === 'video') {
-      previewContent = React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
+      previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
         scrollPosition: scrollPosition
-      }, React__default["default"].createElement("video", {
+      }, React__default['default'].createElement("video", {
         ref: videoPlayerRef,
         loop: true,
         muted: true
-      }, React__default["default"].createElement("source", {
+      }, React__default['default'].createElement("source", {
         src: asset.previewUrl,
         type: "video/mp4"
       })));
     } else if (((_asset$fileType2 = asset.fileType) === null || _asset$fileType2 === void 0 ? void 0 : _asset$fileType2.toLowerCase()) === 'audio') {
-      previewContent = React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
+      previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
         scrollPosition: scrollPosition
-      }, React__default["default"].createElement("div", {
+      }, React__default['default'].createElement("div", {
         className: "audio"
-      }, React__default["default"].createElement(SvgHeadset, null)));
+      }, React__default['default'].createElement(SvgHeadset, null)));
     } else {
-      previewContent = React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
+      previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
         alt: asset.title,
         src: asset.previewUrl,
         height: "100%",
@@ -1085,24 +1188,25 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
         scrollPosition: scrollPosition
       });
     }
-    return React__default["default"].createElement(Figure, {
+
+    return React__default['default'].createElement(Figure, {
       selected: selected
-    }, previewContent, React__default["default"].createElement(FigureOverlayBackdrop, {
+    }, previewContent, React__default['default'].createElement(FigureOverlayBackdrop, {
       selected: selected
-    }), React__default["default"].createElement(Overlay, {
+    }), React__default['default'].createElement(Overlay, {
       ref: cardRef
-    }, React__default["default"].createElement(OverlayBackdrop, {
+    }, React__default['default'].createElement(OverlayBackdrop, {
       $softSelected: softSelected,
       selected: selected
-    }), React__default["default"].createElement(OverlayInfo, null, React__default["default"].createElement(OverlayInfoTop, null, React__default["default"].createElement(OverlayInfoTopVersions, null, renderVersionsBadge()), (asset === null || asset === void 0 ? void 0 : (_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default["default"].createElement(OverlayInfoTopWarning, {
+    }), React__default['default'].createElement(OverlayInfo, null, React__default['default'].createElement(OverlayInfoTop, null, React__default['default'].createElement(OverlayInfoTopVersions, null, renderVersionsBadge()), (asset === null || asset === void 0 ? void 0 : (_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopWarning, {
       type: asset === null || asset === void 0 ? void 0 : (_asset$note2 = asset.note) === null || _asset$note2 === void 0 ? void 0 : _asset$note2.type
-    }, React__default["default"].createElement(Instructions.SvgWarningCircle, null)), React__default["default"].createElement(OverlayInfoTopActions, {
+    }, React__default['default'].createElement(warningCircle.SvgWarningCircle, null)), React__default['default'].createElement(OverlayInfoTopActions, {
       isCardHovered: isCardHovered
     }, asset.actions && asset.actions.map(function (action, index) {
-      return React__default["default"].createElement(Tooltip.Tooltip, {
+      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, {
         key: "".concat(asset.key, "-").concat(action.title),
         as: ComputedActionButton,
         component: action.component,
@@ -1114,22 +1218,24 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
           return onActionClick(event, action, index);
         },
         subActions: action === null || action === void 0 ? void 0 : action.subActions,
-        actionWidthHeight: action.actionWidthHeight
+        actionButtonWidthHeight: action.actionButtonWidthHeight
       }));
-    }))), React__default["default"].createElement(OverlayInfoBottom, null, selectable && React__default["default"].createElement(OverlayInfoBottomSelectButton, {
+    }))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
       selected: selected
-    }, React__default["default"].createElement(SvgCheckRectangleFilled, {
+    }, React__default['default'].createElement(SvgCheckRectangleFilled, {
       onClick: onSelectClick
-    })), React__default["default"].createElement(OverlayInfoBottomMediaIcon, null, renderMediaBadge()))), selectable && React__default["default"].createElement(OverlaySelected, {
+    })), React__default['default'].createElement(OverlayInfoBottomMediaIcon, null, renderMediaBadge()))), 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));
   }
+
   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);
@@ -1137,14 +1243,17 @@ 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);
@@ -1162,8 +1271,8 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
   }, [softSelected]);
   var renderVersionsBadge = React.useCallback(function () {
     if (!(asset !== null && asset !== void 0 && asset.versions)) return null;
-    return React__default["default"].createElement(Badge.Badge, {
-      badgeIcon: React__default["default"].createElement(SvgLayers, null),
+    return React__default['default'].createElement(Badge.Badge, {
+      badgeIcon: React__default['default'].createElement(SvgLayers, null),
       badgeContent: asset.versions,
       backgroundColors: ['black', 'black'],
       colors: ['#f7f8f9', '#f7f8f9'],
@@ -1177,14 +1286,17 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
   var renderMediaBadge = React.useCallback(function () {
     var badgeIcon = null;
     var badgeContent = null;
+
     if ((asset === null || asset === void 0 ? void 0 : asset.fileType) === 'video') {
-      badgeIcon = React__default["default"].createElement(SvgPlay, null);
+      badgeIcon = React__default['default'].createElement(SvgPlay, null);
     }
+
     if (asset !== null && asset !== void 0 && asset.duration) {
       badgeContent = convertMsToHMS(asset.duration);
     }
+
     if (!badgeIcon && !badgeContent) return null;
-    return React__default["default"].createElement(Badge.Badge, {
+    return React__default['default'].createElement(Badge.Badge, {
       badgeIcon: badgeIcon,
       badgeContent: badgeContent,
       backgroundColors: ['black', 'black'],
@@ -1199,21 +1311,21 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     });
   }, [asset]);
   var renderSummary = React.useCallback(function () {
-    var _asset$summary, _asset$summary2;
-    return React__default["default"].createElement(SummaryCard, {
+    var _asset$summary, _asset$summary2, _asset$summary3, _asset$summary4, _asset$summary5, _asset$summary6;
+
+    return React__default['default'].createElement(SummaryCard, {
       activeSummaryCard: true,
-      title: (asset === null || asset === void 0 ? void 0 : asset.title) || '',
-      description: (asset === null || asset === void 0 ? void 0 : asset.description) || '',
-      instructions: (asset === null || asset === void 0 ? void 0 : asset.imageRights) || '',
-      instructionsType: 'warning',
-      footerLeft: (asset === null || asset === void 0 ? void 0 : (_asset$summary = asset.summary) === null || _asset$summary === void 0 ? void 0 : _asset$summary.footerLeft) || '',
-      footerRight: (asset === null || asset === void 0 ? void 0 : (_asset$summary2 = asset.summary) === null || _asset$summary2 === void 0 ? void 0 : _asset$summary2.footerRight) || '',
-      compact: false
+      title: (asset === null || asset === void 0 ? void 0 : (_asset$summary = asset.summary) === null || _asset$summary === void 0 ? void 0 : _asset$summary.title) || '',
+      description: (asset === null || asset === void 0 ? void 0 : (_asset$summary2 = asset.summary) === null || _asset$summary2 === void 0 ? void 0 : _asset$summary2.description) || '',
+      instructions: (asset === null || asset === void 0 ? void 0 : (_asset$summary3 = asset.summary) === null || _asset$summary3 === void 0 ? void 0 : _asset$summary3.instructions) || '',
+      instructionsType: (asset === null || asset === void 0 ? void 0 : (_asset$summary4 = asset.summary) === null || _asset$summary4 === void 0 ? void 0 : _asset$summary4.instructionsType) || '',
+      footerLeft: (asset === null || asset === void 0 ? void 0 : (_asset$summary5 = asset.summary) === null || _asset$summary5 === void 0 ? void 0 : _asset$summary5.footerLeft) || '',
+      footerRight: (asset === null || asset === void 0 ? void 0 : (_asset$summary6 = asset.summary) === null || _asset$summary6 === void 0 ? void 0 : _asset$summary6.footerRight) || ''
     });
   }, [asset]);
-  return React__default["default"].createElement(AssetGalleryWrapper, {
+  return React__default['default'].createElement(AssetGalleryWrapper, {
     disabled: asset.disabled
-  }, React__default["default"].createElement(AssetGalleryGridCard$2, {
+  }, React__default['default'].createElement(AssetGalleryGridCard$2, {
     as: ComputedRootComponent,
     component: component,
     asset: asset,
@@ -1228,16 +1340,17 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     $softSelected: softSelected,
     completed: asset === null || asset === void 0 ? void 0 : asset.completed,
     $hasError: asset === null || asset === void 0 ? void 0 : asset.hasError
-  }, React__default["default"].createElement(ContentWrapper, {
+  }, React__default['default'].createElement(ContentWrapper, {
     layout: asset.layout,
     ref: cardRef,
     $softSelected: softSelected,
     selected: selected
-  }, React__default["default"].createElement(Asset, {
+  }, React__default['default'].createElement(Asset, {
     "data-id": "ss",
     selected: selected
   }, asset.previewUrl && renderPreview(asset)), renderSummary())));
 };
+
 AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
   asset: defaultTheme.PropTypes.shape(assetShapeWithLayout).isRequired,
   selectable: defaultTheme.PropTypes.bool,
@@ -1250,39 +1363,42 @@ 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);
   });
 }));
 
-var _excluded$2 = ["assets", "activeSummaryCard", "displayIcon", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "scrollElement", "onAssetSoftSelectedChanged", "component"];
-var AssetGalleryBase = React__default["default"].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
+var AssetGalleryBase = React__default['default'].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
   var assetsProp = _ref.assets,
-    activeSummaryCard = _ref.activeSummaryCard,
-    displayIcon = _ref.displayIcon,
-    viewMode = _ref.viewMode,
-    thumbnailMaxHeight = _ref.thumbnailMaxHeight,
-    selectable = _ref.selectable,
-    selectedAssetKeys = _ref.selectedAssetKeys,
-    onAssetSelected = _ref.onAssetSelected,
-    onAssetUnselected = _ref.onAssetUnselected,
-    softSelectable = _ref.softSelectable,
-    softSelectedAssetKey = _ref.softSelectedAssetKey,
-    scrollElementProp = _ref.scrollElement,
-    onAssetSoftSelectedChanged = _ref.onAssetSoftSelectedChanged,
-    component = _ref.component,
-    props = defaultTheme._objectWithoutProperties(_ref, _excluded$2);
+      activeSummaryCard = _ref.activeSummaryCard,
+      displayVersionCount = _ref.displayVersionCount,
+      displayVerificationIcon = _ref.displayVerificationIcon,
+      viewMode = _ref.viewMode,
+      thumbnailMaxHeight = _ref.thumbnailMaxHeight,
+      selectable = _ref.selectable,
+      selectedAssetKeys = _ref.selectedAssetKeys,
+      onAssetSelected = _ref.onAssetSelected,
+      onAssetUnselected = _ref.onAssetUnselected,
+      softSelectable = _ref.softSelectable,
+      softSelectedAssetKey = _ref.softSelectedAssetKey,
+      scrollElementProp = _ref.scrollElement,
+      onAssetSoftSelectedChanged = _ref.onAssetSoftSelectedChanged,
+      component = _ref.component,
+      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "activeSummaryCard", "displayVersionCount", "displayVerificationIcon", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "scrollElement", "onAssetSoftSelectedChanged", "component"]);
+
   var assetGalleryDOMNode = React.useRef();
   var assetGalleryCompactRef = useMergedRefs.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]);
@@ -1302,8 +1418,9 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
   MultiLevelCheckboxSelect.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;
@@ -1313,6 +1430,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
         });
       });
     }
+
     return function () {
       resizeObserver.unobserve(assetGalleryDOMNode.current);
     };
@@ -1320,20 +1438,24 @@ 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;
@@ -1342,6 +1464,7 @@ 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;
@@ -1352,6 +1475,7 @@ 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,
@@ -1366,7 +1490,9 @@ 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), {}, {
@@ -1396,6 +1522,7 @@ 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,
@@ -1407,17 +1534,23 @@ 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',
@@ -1428,8 +1561,10 @@ 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;
@@ -1440,17 +1575,17 @@ 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];
-    if (assets.length < 8) {
-      return (lastAsset.layout.translateY + lastAsset.layout.height) * 2;
-    }
     return lastAsset.layout.translateY + lastAsset.layout.height;
   }, [assets]);
   React.useEffect(function () {
@@ -1460,16 +1595,19 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
       return scrollElement.removeEventListener('scroll', throttledOnScroll, false);
     };
   }, [assetGalleryDOMNode, calculatedAssets]);
+
   function onScroll() {
     setScrollPositionAndDirection();
     calculateVisibility();
   }
+
   function setScrollPositionAndDirection() {
     var newYOffset = scrollElement.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;
@@ -1485,35 +1623,44 @@ 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 = scrollElement.innerWidth || document.documentElement.clientWidth,
-        vHeight = scrollElement.innerHeight || document.documentElement.clientHeight,
-        efp = function efp(x, y) {
-          return document.elementFromPoint(x, y);
-        };
+          vWidth = scrollElement.innerWidth || document.documentElement.clientWidth,
+          vHeight = scrollElement.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);
@@ -1521,18 +1668,22 @@ 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);
@@ -1540,13 +1691,16 @@ 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);
@@ -1554,10 +1708,13 @@ 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 {
@@ -1572,6 +1729,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
     if (softSelectable) {
       document.addEventListener('keydown', handleKeyPress);
     }
+
     return function () {
       return document.removeEventListener('keydown', handleKeyPress);
     };
@@ -1580,25 +1738,26 @@ 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"),
@@ -1606,7 +1765,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
         display: 'flex',
         justifyContent: 'center'
       }
-    }, 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),
@@ -1615,10 +1774,11 @@ 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,
       activeSummaryCard: activeSummaryCard,
-      displayIcon: displayIcon,
+      displayVersionCount: displayVersionCount,
+      displayVerificationIcon: displayVerificationIcon,
       hasHeightAndWidth: asset.layout.hasHeightAndWidth,
       collapseExtraInfo: asset.layout.width < 90,
       selectable: 'selectable' in asset ? asset.selectable : selectable,
@@ -1634,7 +1794,8 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
 AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
   assets: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape(assetShape)),
   activeSummaryCard: defaultTheme.PropTypes.bool,
-  displayIcon: defaultTheme.PropTypes.string,
+  displayVersionCount: defaultTheme.PropTypes.bool,
+  displayVerificationIcon: defaultTheme.PropTypes.bool,
   viewMode: defaultTheme.PropTypes.oneOf(['compact', 'grid']),
   thumbnailMaxHeight: defaultTheme.PropTypes.number,
   selectable: defaultTheme.PropTypes.bool,
@@ -1649,29 +1810,32 @@ AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
   className: defaultTheme.PropTypes.string
 } : {};
 
-var _excluded$1 = ["assets", "activeSummaryCard", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "scrollElement", "onSoftSelectedChanged", "component", "displayIcon"];
-var AssetGallery = React__default["default"].forwardRef(function AssetGallery(_ref, forwardedRef) {
+var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_ref, forwardedRef) {
   var assets = _ref.assets,
-    activeSummaryCard = _ref.activeSummaryCard,
-    viewMode = _ref.viewMode,
-    thumbnailMaxHeight = _ref.thumbnailMaxHeight,
-    selectable = _ref.selectable,
-    selectedAssetKeys = _ref.selectedAssetKeys,
-    onSelectedChanged = _ref.onSelectedChanged,
-    softSelectable = _ref.softSelectable,
-    scrollElement = _ref.scrollElement,
-    onSoftSelectedChanged = _ref.onSoftSelectedChanged,
-    component = _ref.component,
-    displayIcon = _ref.displayIcon,
-    props = defaultTheme._objectWithoutProperties(_ref, _excluded$1);
+      activeSummaryCard = _ref.activeSummaryCard,
+      displayVersionCount = _ref.displayVersionCount,
+      displayVerificationIcon = _ref.displayVerificationIcon,
+      viewMode = _ref.viewMode,
+      thumbnailMaxHeight = _ref.thumbnailMaxHeight,
+      selectable = _ref.selectable,
+      selectedAssetKeys = _ref.selectedAssetKeys,
+      onSelectedChanged = _ref.onSelectedChanged,
+      softSelectable = _ref.softSelectable,
+      scrollElement = _ref.scrollElement,
+      onSoftSelectedChanged = _ref.onSoftSelectedChanged,
+      component = _ref.component,
+      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "activeSummaryCard", "displayVersionCount", "displayVerificationIcon", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "scrollElement", "onSoftSelectedChanged", "component"]);
+
   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]);
@@ -1686,6 +1850,7 @@ var AssetGallery = React__default["default"].forwardRef(function AssetGallery(_r
   }, [assets.length]);
   React.useEffect(function () {
     if (selectedAssetKeys === selectedAssetKeysInternalState) return;
+
     if (lodash.isFunction(onSelectedChanged)) {
       onSelectedChanged(selectedAssetKeysInternalState);
     }
@@ -1711,11 +1876,12 @@ 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,
     activeSummaryCard: activeSummaryCard,
-    displayIcon: displayIcon,
+    displayVersionCount: displayVersionCount,
+    displayVerificationIcon: displayVerificationIcon,
     thumbnailMaxHeight: thumbnailMaxHeight,
     selectable: selectable,
     selectedAssetKeys: selectedAssetKeysInternalState,
@@ -1731,7 +1897,8 @@ var AssetGallery = React__default["default"].forwardRef(function AssetGallery(_r
 });
 AssetGallery.propTypes = process.env.NODE_ENV !== "production" ? {
   assets: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape(assetShape)),
-  displayIcon: defaultTheme.PropTypes.string,
+  displayVersionCount: defaultTheme.PropTypes.bool,
+  displayVerificationIcon: defaultTheme.PropTypes.bool,
   activeSummaryCard: defaultTheme.PropTypes.bool,
   viewMode: defaultTheme.PropTypes.oneOf(['compact', 'grid']),
   thumbnailMaxHeight: defaultTheme.PropTypes.number,
@@ -1749,130 +1916,8 @@ AssetGallery.defaultProps = {
   thumbnailMaxHeight: 300,
   selectedAssetKeys: [],
   activeSummaryCard: false,
-  displayIcon: ''
+  displayVerificationIcon: true
 };
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var AssetAction$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n"])), function (props) {
-  return props.theme.primaryFontFamily;
-});
-var AssetActionButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);\n  ", ";\n  svg {\n    pointer-events: none;\n    width: ", ";\n    height: ", ";\n    ", ";\n  }\n"])), function (props) {
-  return props.actionWidthHeight ? "".concat(props.actionWidthHeight[0], "px") : 'auto';
-}, function (props) {
-  return props.actionWidthHeight ? "".concat(props.actionWidthHeight[1], "px") : 'auto';
-}, function (props) {
-  return props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
-}, function (props) {
-  return props.actionWidthHeight ? "".concat(props.actionWidthHeight[0] - 14, "px") : 'auto';
-}, function (props) {
-  return props.actionWidthHeight ? "".concat(props.actionWidthHeight[1] - 14, "px") : 'auto';
-}, function (props) {
-  return props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
-});
-var ActionTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 14px;\n  border-radius: 4px;\n  padding: 8px 12px;\n  white-space: nowrap;\n  color: white;\n  background: ", ";\n"])), function (props) {
-  return props.theme.getColor('gray-700');
-});
-var StyledFloatingArrow = styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  fill: ", ";\n"])), function (props) {
-  return props.theme.getColor('gray-700');
-});
-var Floating = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
-
-var _excluded = ["action", "asset", "itemKey"];
-var AssetAction = React__default["default"].forwardRef(function AssetAction(_ref, forwardedRef) {
-  var action = _ref.action,
-    asset = _ref.asset,
-    itemKey = _ref.itemKey,
-    props = defaultTheme._objectWithoutProperties(_ref, _excluded);
-  var ARROW_WIDTH = 10;
-  var ARROW_HEIGHT = 5;
-  var GAP = 3;
-  var arrowRef = React.useRef(null);
-  var _useState = React.useState(false),
-    _useState2 = defaultTheme._slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var _useState3 = React.useState('bottom'),
-    _useState4 = defaultTheme._slicedToArray(_useState3, 1),
-    placement = _useState4[0];
-  var _useFloating = react.useFloating({
-      placement: placement,
-      open: isOpen,
-      onOpenChange: setIsOpen,
-      whileElementsMounted: react.autoUpdate,
-      middleware: [react.offset(ARROW_HEIGHT + GAP), react.flip({
-        padding: 5
-      }), react.shift({
-        padding: 5
-      }), react.arrow({
-        element: arrowRef
-      })]
-    }),
-    refs = _useFloating.refs,
-    floatingStyles = _useFloating.floatingStyles,
-    context = _useFloating.context;
-  var _useTransitionStyles = react.useTransitionStyles(context, {
-      initial: {
-        transform: 'translateY(-8px)',
-        opacity: 0
-      },
-      duration: {
-        open: 200,
-        close: 100
-      }
-    }),
-    isMounted = _useTransitionStyles.isMounted,
-    styles = _useTransitionStyles.styles;
-  var hover = react.useHover(context);
-  var dismiss = react.useDismiss(context, {
-    referencePress: true
-  });
-  var _useInteractions = react.useInteractions([dismiss, hover]),
-    getReferenceProps = _useInteractions.getReferenceProps,
-    getFloatingProps = _useInteractions.getFloatingProps;
-  var onActionClick = React.useCallback(function (e, action) {
-    e.preventDefault();
-    e.stopPropagation();
-    if (lodash.isFunction(action === null || action === void 0 ? void 0 : action.onClick)) {
-      action.onClick(asset);
-    }
-  }, [action]);
-  return React__default["default"].createElement(AssetAction$2, defaultTheme._extends({
-    ref: forwardedRef
-  }, props), React__default["default"].createElement(AssetActionButton, defaultTheme._extends({
-    key: itemKey,
-    ref: refs.setReference
-  }, getReferenceProps(), {
-    onClick: function onClick(e) {
-      return onActionClick(e, action.onClick(asset), itemKey);
-    },
-    actionWidthHeight: action.actionWidthHeight
-  }), action.icon), isOpen && isMounted && React__default["default"].createElement(Floating, defaultTheme._extends({
-    className: "floating",
-    ref: refs.setFloating,
-    style: floatingStyles
-  }, getFloatingProps()), React__default["default"].createElement(ActionTitle, {
-    style: styles
-  }, action.title), React__default["default"].createElement(StyledFloatingArrow, {
-    ref: arrowRef,
-    context: context,
-    width: ARROW_WIDTH,
-    height: ARROW_HEIGHT
-  })));
-});
-AssetAction.propTypes = process.env.NODE_ENV !== "production" ? {
-  action: defaultTheme.PropTypes.shape({
-    icon: defaultTheme.PropTypes.node,
-    onClick: defaultTheme.PropTypes.func,
-    actionWidthHeight: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number),
-    title: defaultTheme.PropTypes.string
-  }),
-  asset: defaultTheme.PropTypes.object,
-  itemKey: defaultTheme.PropTypes.string
-} : {};
-AssetAction.defaultProps = {};
-var AssetAction$1 = AssetAction;
-
-exports.AssetAction = AssetAction$1;
-exports.AssetActionsBase = AssetActionsBase;
 exports.AssetGallery = AssetGallery;
 exports.SummaryCard = SummaryCard;