@ntbjs/react-components 1.1.1 → 1.2.0-rc.2

package/AssetGallery-52724211.js

@@ -0,0 +1,1846 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-c137e17f.js');
+var React = require('react');
+var lodash = require('lodash');
+var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
+var ResizeObserver = require('resize-observer-polyfill');
+var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
+var warningCircle = require('./warning-circle-24522402.js');
+var Alert = require('./Alert-96814023.js');
+var Badge = require('./Badge-fa94dca8.js');
+var Popover = require('./Popover-155cbac8.js');
+require('./Tab-8fec1dba.js');
+require('./Tabs-96e366bf.js');
+var Tooltip = require('./Tooltip-a175e9f5.js');
+require('./VerificationStatusIcon-a88b1f8d.js');
+var ActionButton = require('./ActionButton-761050a9.js');
+require('./Button-5071dc6b.js');
+require('./Checkbox-dd2cf216.js');
+require('./CompactAutocompleteSelect-d4147107.js');
+require('./CompactStarRating-ca1943af.js');
+require('./CompactTextInput-c5e38aae.js');
+require('./MultiSelect-87614192.js');
+require('./Radio-dd81f5d4.js');
+require('./TextArea-4d90d02c.js');
+require('./TextInput-e6035fb0.js');
+require('./Switch-c004ea6d.js');
+var ContextMenu = require('./ContextMenu-bd818e55.js');
+var ContextMenuItem = require('./ContextMenuItem-10af8b2f.js');
+var styled = require('styled-components');
+var polished = require('polished');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n['default'] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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), _ref$3);
+}
+
+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), _ref$2);
+}
+
+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), _ref$1);
+}
+
+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), _ref);
+}
+
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+var assetShape = {
+  key: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]).isRequired,
+  previewUrl: defaultTheme.PropTypes.string,
+  title: defaultTheme.PropTypes.string,
+  note: defaultTheme.PropTypes.shape({
+    icon: defaultTheme.PropTypes.element,
+    message: defaultTheme.PropTypes.string
+  }),
+  width: defaultTheme.PropTypes.number,
+  height: defaultTheme.PropTypes.number,
+  fileType: defaultTheme.PropTypes.oneOf(['image', 'video', 'pdf', 'file', 'audio']).isRequired,
+  fileTypeIconPosition: defaultTheme.PropTypes.oneOf(['top-left', 'top-right']),
+  group: defaultTheme.PropTypes.string,
+  actions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape({
+    title: defaultTheme.PropTypes.string.isRequired,
+    icon: defaultTheme.PropTypes.element.isRequired,
+    onClick: defaultTheme.PropTypes.func.isRequired,
+    className: defaultTheme.PropTypes.shape,
+    component: defaultTheme.PropTypes.func
+  })),
+  overlay: defaultTheme.PropTypes.element,
+  completed: defaultTheme.PropTypes.bool,
+  hasError: defaultTheme.PropTypes.bool,
+  disabled: defaultTheme.PropTypes.bool,
+  onClick: defaultTheme.PropTypes.func,
+  onContextMenu: defaultTheme.PropTypes.func,
+  onMouseEnter: defaultTheme.PropTypes.func,
+  summary: defaultTheme.PropTypes.shape({
+    title: defaultTheme.PropTypes.string,
+    description: defaultTheme.PropTypes.string,
+    instructions: defaultTheme.PropTypes.string,
+    instructionsType: defaultTheme.PropTypes.oneOf(['warning', 'error', 'info']),
+    headerLeft: defaultTheme.PropTypes.node,
+    headerRight: defaultTheme.PropTypes.node,
+    footerLeft: defaultTheme.PropTypes.node,
+    footerRight: defaultTheme.PropTypes.node
+  })
+};
+var assetShapeWithLayout = defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, assetShape), {}, {
+  layout: defaultTheme.PropTypes.shape({
+    width: defaultTheme.PropTypes.number.isRequired,
+    height: defaultTheme.PropTypes.number.isRequired,
+    translateX: defaultTheme.PropTypes.number.isRequired,
+    translateY: defaultTheme.PropTypes.number.isRequired,
+    type: defaultTheme.PropTypes.oneOf(['groupLabel', 'asset']).isRequired,
+    hasHeightAndWidth: defaultTheme.PropTypes.bool
+  }).isRequired
+});
+
+var css_248z = ".lazy-load-image-background.opacity {\n  opacity: 0;\n}\n\n.lazy-load-image-background.opacity.lazy-load-image-loaded {\n  opacity: 1;\n  transition: opacity .3s;\n}\n";
+defaultTheme.styleInject(css_248z);
+
+var convertMsToHMS = function convertMsToHMS(ms) {
+  var seconds = Math.floor(ms / 1000);
+  var minutes = Math.floor(seconds / 60);
+  var hours = Math.floor(minutes / 60);
+  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$3, _templateObject2$3, _templateObject3$3, _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$3 || (_templateObject$3 = 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.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) {
+  if (props.renderAsMargin) {
+    return styled.css(_templateObject3$3 || (_templateObject3$3 = defaultTheme._taggedTemplateLiteral(["\n        margin-bottom: ", "px;\n      "])), props.gutter || 8);
+  } else {
+    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$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) {
+  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"])));
+
+var SummaryCard = React__default['default'].forwardRef(function AssetSummaryCard(_ref, forwardedRef) {
+  var 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, ["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);
+  return React__default['default'].createElement(SummaryCard$1, defaultTheme._extends({
+    ref: forwardedRef,
+    width: width,
+    useBorder: useBorder
+  }, 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, {
+    gutter: shouldRenderHeader ? 8 : 16
+  }), 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, {
+    gutter: 16
+  }), 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,
+    verticalPadding: 12,
+    horizontalPadding: 16,
+    width: width,
+    lineClamp: 1
+  })), 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, {
+    gutter: 16
+  }));
+});
+SummaryCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: defaultTheme.PropTypes.string,
+  description: defaultTheme.PropTypes.string,
+  instructions: defaultTheme.PropTypes.string,
+  instructionsType: defaultTheme.PropTypes.oneOf(['warning', 'error', 'info']),
+  headerLeft: defaultTheme.PropTypes.node,
+  headerRight: defaultTheme.PropTypes.node,
+  footerLeft: defaultTheme.PropTypes.node,
+  footerRight: defaultTheme.PropTypes.node,
+  width: defaultTheme.PropTypes.number,
+  useBorder: defaultTheme.PropTypes.bool
+} : {};
+SummaryCard.defaultProps = {
+  title: '',
+  description: '',
+  instructions: '',
+  instructionsType: 'info',
+  headerLeft: null,
+  headerRight: null,
+  footerLeft: null,
+  footerRight: null,
+  useBorder: false
+};
+
+var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1;
+var AssetGalleryWrapper$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
+  return props.disabled && styled.css(_templateObject2$2 || (_templateObject2$2 = defaultTheme._taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
+});
+var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$2 || (_templateObject3$2 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  padding: ", "px;\n  box-sizing: border-box;\n  cursor: pointer;\n  ", ";\n  ", ";\n\n  ", "\n  video {\n    width: 100%;\n    height: 100%;\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    svg {\n      width: 25%;\n    }\n  }\n"])), function (props) {
+  return props.selected ? 3 : 0;
+}, function (props) {
+  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
+}, function (props) {
+  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(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
+});
+var Figure$1 = styled__default['default'].figure(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\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  video,\n  .audio {\n    display: block;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  .audio {\n    display: flex;\n    justify-content: center;\n    svg {\n      width: 25%;\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)(_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)(_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  ", "\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(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 1;\n    "])));
+}, Overlay$1);
+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 12px 10px;\n  color: ", ";\n"])), function (props) {
+  return props.theme.getColor('gray-100');
+});
+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)(_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)(_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)(_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 OverlayInfoTopVersions$1 = 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)(_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 : '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)(_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)(_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 ComputedRootComponent$1 = function ComputedRootComponent(_ref) {
+  var component = _ref.component,
+      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']));
+    }
+  }
+
+  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
+    }));
+  } 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']
+    });
+  }
+
+  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 = props.asset,
+      selectable = props.selectable,
+      hasHeightAndWidth = props.hasHeightAndWidth,
+      selected = props.selected,
+      extendedSelectMode = props.extendedSelectMode,
+      onAssetSelected = props.onAssetSelected,
+      onAssetUnselected = props.onAssetUnselected,
+      softSelected = props.softSelected,
+      component = props.component,
+      scrollPosition = props.scrollPosition,
+      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;
+    });
+    updateOpenedSubActions(newOpenedSubActions);
+  }, [asset]);
+  React.useEffect(function () {
+    if (!isOverlayHovered && openedSubActions !== null && openedSubActions !== void 0 && openedSubActions.length) {
+      updateOpenedSubActions(openedSubActions.map(function () {
+        return false;
+      }));
+    }
+  }, [isOverlayHovered]);
+  var mouseHasEnteredOverlay = React.useCallback(function () {
+    setIsOverlayHovered(true);
+  }, []);
+  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);
+        }
+      };
+    }
+  }, []);
+
+  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);
+        }
+      };
+    }
+  }, []);
+  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);
+    }
+  }
+
+  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, {
+        scrollPosition: scrollPosition
+      }, React__default['default'].createElement("video", {
+        ref: videoPlayerRef,
+        loop: true,
+        muted: true
+      }, 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, {
+        scrollPosition: scrollPosition
+      }, React__default['default'].createElement("div", {
+        className: "audio"
+      }, React__default['default'].createElement(SvgHeadset, null)));
+    } else {
+      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%",
+        width: "100%",
+        delayMethod: "debounce",
+        delayTime: 0,
+        threshold: 1500,
+        scrollPosition: scrollPosition
+      });
+    }
+
+    return React__default['default'].createElement(Figure$1, {
+      hasHeightAndWidth: hasHeightAndWidth
+    }, previewContent, React__default['default'].createElement(FigureOverlayBackdrop$1, {
+      selected: selected
+    }));
+  };
+
+  React.useEffect(function () {
+    if (softSelected) {
+      cardRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      });
+    }
+  }, [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),
+      badgeContent: asset.versions,
+      backgroundColors: ['black', 'black'],
+      colors: ['#f7f8f9', '#f7f8f9'],
+      fontSize: 12,
+      fontWeight: 500,
+      lineHeight: 16,
+      verticalPadding: 4,
+      horizontalPadding: 8
+    });
+  }, [asset]);
+  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);
+    }
+
+    if (asset !== null && asset !== void 0 && asset.duration) {
+      badgeContent = convertMsToHMS(asset.duration);
+    }
+
+    if (!badgeIcon && !badgeContent) return null;
+    return React__default['default'].createElement(Badge.Badge, {
+      badgeIcon: badgeIcon,
+      badgeContent: badgeContent,
+      backgroundColors: ['black', 'black'],
+      colors: ['#f7f8f9', '#f7f8f9'],
+      fontSize: 12,
+      fontWeight: 500,
+      lineHeight: 16,
+      verticalPadding: 4,
+      horizontalPadding: 8,
+      minWidth: 32,
+      height: 24
+    });
+  }, [asset]);
+  var renderSummaryCardHeaderLeft = React.useCallback(function () {
+    return React__default['default'].createElement(React__default['default'].Fragment, null, renderVersionsBadge(), renderMediaBadge());
+  }, [asset]);
+  var renderPopoverContent = React.useCallback(function () {
+    var _asset$summary = asset.summary,
+        title = _asset$summary.title,
+        description = _asset$summary.description,
+        instructions = _asset$summary.instructions,
+        instructionsType = _asset$summary.instructionsType,
+        headerLeft = _asset$summary.headerLeft,
+        headerRight = _asset$summary.headerRight,
+        footerLeft = _asset$summary.footerLeft,
+        footerRight = _asset$summary.footerRight;
+    return React__default['default'].createElement(SummaryCard, {
+      title: title ? title : '',
+      description: description ? description : '',
+      instructions: instructions ? instructions : '',
+      instructionsType: instructionsType ? instructionsType : '',
+      headerRight: headerRight,
+      headerLeft: React__default['default'].createElement(React__default['default'].Fragment, null, renderSummaryCardHeaderLeft(), headerLeft),
+      footerLeft: footerLeft,
+      footerRight: footerRight,
+      width: 375
+    });
+  }, [asset]);
+  return React__default['default'].createElement(AssetGalleryWrapper$1, {
+    disabled: asset.disabled
+  }, React__default['default'].createElement(AssetGalleryCompactCard$2, {
+    as: ComputedRootComponent$1,
+    component: component,
+    disabled: asset.disabled,
+    asset: asset,
+    onClick: onClick,
+    extendedSelectMode: extendedSelectMode,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    draggable: asset.draggable,
+    innerRef: dragRef,
+    selected: selected
+  }, asset.previewUrl && renderPreview(asset), 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
+  }, 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: 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);
+      }
+    }));
+  })), React__default['default'].createElement(OverlayInfo$1, null, React__default['default'].createElement(OverlayInfoTop$1, null, React__default['default'].createElement(OverlayInfoTopVersions$1, {
+    collapseExtraInfo: collapseExtraInfo
+  }, 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$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(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
+  }))), asset.overlay && React__default['default'].createElement(ConsumerDefinedOverlay$1, null, asset.overlay)));
+};
+
+AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  asset: defaultTheme.PropTypes.shape(assetShapeWithLayout).isRequired,
+  hasHeightAndWidth: defaultTheme.PropTypes.bool.isRequired,
+  selectable: defaultTheme.PropTypes.bool,
+  selected: defaultTheme.PropTypes.bool,
+  extendedSelectMode: defaultTheme.PropTypes.bool,
+  onAssetSelected: defaultTheme.PropTypes.func.isRequired,
+  onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
+  softSelected: defaultTheme.PropTypes.bool.isRequired,
+  component: defaultTheme.PropTypes.func,
+  scrollPosition: defaultTheme.PropTypes.number,
+  collapseExtraInfo: defaultTheme.PropTypes.bool
+} : {};
+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, _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$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 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 selected = props.selected,
+      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 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      pointer-events: none;\n      opacity: 0.4;\n    "])));
+}, function (props) {
+  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) {
+  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) {
+  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) {
+  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) {
+  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) {
+  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) {
+  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) {
+  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) {
+  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 ComputedRootComponent = function ComputedRootComponent(_ref) {
+  var component = _ref.component,
+      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']));
+    }
+  }
+
+  return React__default['default'].createElement(AssetGalleryGridCard$2, defaultTheme._extends({
+    ref: newProps.ref
+  }, newProps));
+};
+
+ComputedRootComponent.propTypes = process.env.NODE_ENV !== "production" ? {} : {};
+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, ["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
+    }));
+  } 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']
+    });
+  }
+
+  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 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];
+
+  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;
+    });
+    updateOpenedSubActions(newOpenedSubActions);
+  }, [asset]);
+  React.useEffect(function () {
+    if (!isCardHovered && openedSubActions !== null && openedSubActions !== void 0 && openedSubActions.length) {
+      updateOpenedSubActions(openedSubActions.map(function () {
+        return false;
+      }));
+    }
+  }, [isCardHovered]);
+  var mouseHasEnteredCard = React.useCallback(function () {
+    setIsCardHovered(true);
+  }, []);
+  var mouseHasLeftCard = React.useCallback(function () {
+    setIsCardHovered(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 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);
+    }
+  }, [onSubActionsViewToggle]);
+  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, {
+        scrollPosition: scrollPosition
+      }, React__default['default'].createElement("video", {
+        ref: videoPlayerRef,
+        loop: true,
+        muted: true
+      }, 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, {
+        scrollPosition: scrollPosition
+      }, React__default['default'].createElement("div", {
+        className: "audio"
+      }, React__default['default'].createElement(SvgHeadset, null)));
+    } else {
+      previewContent = React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
+        alt: asset.title,
+        src: asset.previewUrl,
+        height: "100%",
+        width: "100%",
+        delayMethod: "debounce",
+        delayTime: 0,
+        threshold: 1500,
+        scrollPosition: scrollPosition
+      });
+    }
+
+    return React__default['default'].createElement(Figure, {
+      selected: selected
+    }, previewContent, React__default['default'].createElement(FigureOverlayBackdrop, {
+      selected: selected
+    }), React__default['default'].createElement(Overlay, {
+      ref: cardRef
+    }, 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, {
+      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(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, {
+        key: "".concat(asset.key, "-").concat(action.title),
+        content: action.title
+      }, React__default['default'].createElement(Fragment, {
+        as: ComputedActionButton,
+        component: action.component,
+        className: action.className,
+        icon: action.icon,
+        isCardHovered: isCardHovered,
+        isSubActionsOpened: shouldOpenSubActions(index),
+        onClick: function onClick(event) {
+          return onActionClick(event, action, index);
+        },
+        subActions: action === null || action === void 0 ? void 0 : action.subActions
+      }));
+    }))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
+      selected: selected
+    }, React__default['default'].createElement(SvgCheckRectangleFilled, {
+      onClick: onSelectClick
+    })), 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));
+  }
+
+  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);
+        }
+      };
+    }
+  }, []);
+
+  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);
+        }
+      };
+    }
+  }, []);
+  React.useEffect(function () {
+    if (softSelected) {
+      cardRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      });
+    }
+  }, [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),
+      badgeContent: asset.versions,
+      backgroundColors: ['black', 'black'],
+      colors: ['#f7f8f9', '#f7f8f9'],
+      fontSize: 12,
+      fontWeight: 500,
+      lineHeight: 16,
+      verticalPadding: 4,
+      horizontalPadding: 8
+    });
+  }, [asset]);
+  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);
+    }
+
+    if (asset !== null && asset !== void 0 && asset.duration) {
+      badgeContent = convertMsToHMS(asset.duration);
+    }
+
+    if (!badgeIcon && !badgeContent) return null;
+    return React__default['default'].createElement(Badge.Badge, {
+      badgeIcon: badgeIcon,
+      badgeContent: badgeContent,
+      backgroundColors: ['black', 'black'],
+      colors: ['#f7f8f9', '#f7f8f9'],
+      fontSize: 12,
+      fontWeight: 500,
+      lineHeight: 16,
+      verticalPadding: 4,
+      horizontalPadding: 8,
+      minWidth: 32,
+      height: 24
+    });
+  }, [asset]);
+  var renderSummary = React.useCallback(function () {
+    var _asset$summary = asset.summary,
+        title = _asset$summary.title,
+        description = _asset$summary.description,
+        instructions = _asset$summary.instructions,
+        instructionsType = _asset$summary.instructionsType,
+        footerLeft = _asset$summary.footerLeft,
+        footerRight = _asset$summary.footerRight;
+    return React__default['default'].createElement(SummaryCard, {
+      title: title ? title : '',
+      description: description ? description : '',
+      instructions: instructions ? instructions : '',
+      instructionsType: instructionsType ? instructionsType : '',
+      footerLeft: footerLeft,
+      footerRight: footerRight
+    });
+  }, [asset]);
+  return React__default['default'].createElement(AssetGalleryWrapper, {
+    disabled: asset.disabled
+  }, React__default['default'].createElement(AssetGalleryGridCard$2, {
+    as: ComputedRootComponent,
+    component: component,
+    asset: asset,
+    disabled: asset.disabled,
+    onClick: onClick,
+    extendedSelectMode: extendedSelectMode,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    draggable: asset.draggable,
+    innerRef: dragRef,
+    selected: selected,
+    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, {
+    layout: asset.layout,
+    ref: cardRef,
+    softSelected: softSelected,
+    selected: selected
+  }, 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,
+  selected: defaultTheme.PropTypes.bool,
+  extendedSelectMode: defaultTheme.PropTypes.bool,
+  onAssetSelected: defaultTheme.PropTypes.func.isRequired,
+  onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
+  softSelected: defaultTheme.PropTypes.bool.isRequired,
+  component: defaultTheme.PropTypes.func,
+  scrollPosition: defaultTheme.PropTypes.number
+} : {};
+AssetGalleryGridCard.defaultProps = {};
+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 _templateObject, _templateObject2, _templateObject3;
+var AssetGalleryBase$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n"])));
+var GroupLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  ", "\n  display: flex;\n  align-items: flex-end;\n  position: absolute;\n  padding-bottom: 4px;\n  box-sizing: border-box;\n"])), function (props) {
+  return props.theme.primaryFontFamily;
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
+});
+var AssetGalleryCardBase = styled__default['default'].div(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  margin: 0;\n  z-index: 1;\n  will-change: transform, width, height;\n\n  &:hover {\n    z-index: 2;\n  }\n"])));
+
+var AssetGalleryBase = React__default['default'].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
+  var assetsProp = _ref.assets,
+      viewMode = _ref.viewMode,
+      thumbnailMaxHeight = _ref.thumbnailMaxHeight,
+      selectable = _ref.selectable,
+      selectedAssetKeys = _ref.selectedAssetKeys,
+      onAssetSelected = _ref.onAssetSelected,
+      onAssetUnselected = _ref.onAssetUnselected,
+      softSelectable = _ref.softSelectable,
+      softSelectedAssetKey = _ref.softSelectedAssetKey,
+      scrollElementProp = _ref.scrollElement,
+      onAssetSoftSelectedChanged = _ref.onAssetSoftSelectedChanged,
+      component = _ref.component,
+      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "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];
+
+  var MAXIMUM_ROW_HEIGHT = React.useMemo(function () {
+    return viewMode === 'grid' ? 450 : thumbnailMaxHeight;
+  }, [viewMode, thumbnailMaxHeight]);
+  var SPACE_BETWEEN_ASSETS = 8;
+  var SPACE_UNDER_ASSETS = 8;
+  var PRIMARY_SCROLL_BUFFER_HEIGHT = 1500;
+  var SECONDARY_SCROLL_BUFFER_HEIGHT = 500;
+  var GRID_VIEW_MODE_ASSET_MIN_WIDTH = 300;
+  var GRID_VIEW_MODE_ASSET_HEIGHT = 427;
+  var MISSING_WIDTH_PLACEHOLDER = 1920;
+  var MISSING_HEIGHT_PLACEHOLDER = 1080;
+  var isBrowser = typeof window !== 'undefined';
+  var scrollElement = scrollElementProp || window;
+  var previousYOffset = React.useRef(isBrowser ? scrollElement.pageYOffset : 0);
+  var latestYOffset = React.useRef(isBrowser ? scrollElement.pageYOffset : 0);
+  var scrollDirection = React.useRef('down');
+  useIsomorphicLayoutEffect(function () {
+    if (!assetGalleryDOMNode.current) return;
+    var throttledOnResize = lodash.throttle(onResize, 1);
+    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;
+        window.requestAnimationFrame(function () {
+          assetGalleryWidth.current = entry.contentRect.width;
+          main();
+        });
+      });
+    }
+
+    return function () {
+      resizeObserver.unobserve(assetGalleryDOMNode.current);
+    };
+  }, [assetsProp, assetGalleryDOMNode, MAXIMUM_ROW_HEIGHT]);
+  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;
+      });
+      assetsWithoutAKey.forEach(function (a) {
+        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;
+      var translateY = 0;
+      var computedAssets = [];
+      var lastGroup = null;
+      var desiredAssetCountInRow = Math.floor(assetGalleryWidth.current / GRID_VIEW_MODE_ASSET_MIN_WIDTH) || 1;
+      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,
+            key: asset.key,
+            layout: {
+              type: 'groupLabel',
+              height: 50,
+              translateX: Math.round(translateX),
+              translateY: Math.round(translateY)
+            }
+          });
+          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), {}, {
+              layout: {
+                type: 'asset',
+                width: Math.round(desiredAssetWidth),
+                height: Math.round(GRID_VIEW_MODE_ASSET_HEIGHT),
+                translateX: Math.round(translateX),
+                translateY: Math.round(translateY)
+              }
+            }));
+            translateX += desiredAssetWidth + SPACE_BETWEEN_ASSETS;
+          });
+          row = [];
+          translateX = 0;
+          translateY += GRID_VIEW_MODE_ASSET_HEIGHT + SPACE_UNDER_ASSETS;
+        }
+      });
+      calculatedAssets.current = computedAssets;
+    } else {
+      if (minimumRowAspectRatio.current > 0) {
+        var _row = [];
+        var _translateX = 0;
+        var _translateY = 0;
+        var rowAspectRatio = 0;
+        var _lastGroup = null;
+        var _computedAssets = [];
+        assetsProp.forEach(function (asset, index) {
+          var _assetsProp2;
+
+          if (asset.group && asset.group !== _lastGroup) {
+            _computedAssets.push({
+              title: asset.group,
+              key: asset.key,
+              layout: {
+                type: 'groupLabel',
+                height: 50,
+                translateX: Math.round(_translateX),
+                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',
+                  width: Math.round(assetWidth),
+                  height: Math.round(rowHeight),
+                  translateX: Math.round(_translateX),
+                  translateY: Math.round(_translateY),
+                  hasHeightAndWidth: Boolean(rowAsset.width && rowAsset.height)
+                }
+              }));
+
+              _translateX += assetWidth + SPACE_BETWEEN_ASSETS;
+            });
+
+            _row = [];
+            rowAspectRatio = 0;
+            _translateY += rowHeight + SPACE_UNDER_ASSETS;
+            _translateX = 0;
+          }
+        });
+        calculatedAssets.current = _computedAssets;
+      }
+    }
+  };
+
+  function calculateAspectRatio(width, height) {
+    return width / height;
+  }
+
+  var totalGalleryHeight = React.useMemo(function () {
+    if (assets.length === 0) {
+      return 0;
+    }
+
+    var lastAsset = assets[assets.length - 1];
+    return lastAsset.layout.translateY + lastAsset.layout.height;
+  }, [assets]);
+  React.useEffect(function () {
+    var throttledOnScroll = lodash.throttle(onScroll, 200);
+    scrollElement.addEventListener('scroll', throttledOnScroll, false);
+    return function () {
+      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;
+    var bufferBottom = scrollDirection.current === 'up' ? SECONDARY_SCROLL_BUFFER_HEIGHT : PRIMARY_SCROLL_BUFFER_HEIGHT;
+    var containerOffset = getOffsetTop(assetGalleryDOMNode.current);
+    var scrollerHeight = scrollElement.innerHeight;
+    var yOffset = latestYOffset.current;
+    var minTranslateYPlusHeight = yOffset - containerOffset - bufferTop;
+    var maxTranslateY = yOffset - containerOffset + scrollerHeight + bufferBottom;
+    var finalizedAssets = calculatedAssets.current.map(function (asset) {
+      if (scrollElement.self == window && (asset.layout.translateY + asset.layout.height < minTranslateYPlusHeight || asset.layout.translateY > maxTranslateY)) {
+        asset.layout.show = false;
+      } 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);
+      };
+
+      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);
+          break;
+        }
+      }
+    }
+
+    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);
+        } else {
+          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);
+        } else {
+          softSelectFirstVisibleAsset();
+        }
+      }
+
+      return;
+    }
+
+    if (e.key === 'Enter') {
+      if (softSelectedAssetKey === null) return;
+
+      if (selectedAssetKeys.includes(softSelectedAssetKey)) {
+        onAssetUnselected(softSelectedAssetKey);
+      } else {
+        onAssetSelected(softSelectedAssetKey);
+      }
+    }
+  }, [assets, softSelectedAssetKey, onAssetSoftSelectedChanged, selectedAssetKeys, assetGalleryCompactRef]);
+  var handleClick = React.useCallback(function () {
+    onAssetSoftSelectedChanged(null);
+  }, []);
+  React.useEffect(function () {
+    if (softSelectable) {
+      document.addEventListener('keydown', handleKeyPress);
+    }
+
+    return function () {
+      return document.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [softSelectable, handleKeyPress]);
+  React.useEffect(function () {
+    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({
+    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, {
+      key: "asset-gallery-".concat(asset.layout.type, "-").concat(asset.key)
+    }, 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, {
+      style: {
+        transform: "translate3d(".concat(asset.layout.translateX, "px, ").concat(asset.layout.translateY, "px, 0)"),
+        width: "".concat(asset.layout.width, "px"),
+        height: "".concat(asset.layout.height, "px")
+      }
+    }, viewMode === 'grid' ? React__default['default'].createElement(AssetGalleryGridCard$1, {
+      asset: asset,
+      selectable: 'selectable' in asset ? asset.selectable : selectable,
+      selected: selectedAssetKeys.includes(asset.key),
+      extendedSelectMode: Boolean(selectedAssetKeys.length),
+      onAssetSelected: onAssetSelected,
+      onAssetUnselected: onAssetUnselected,
+      softSelected: softSelectedAssetKey === asset.key,
+      component: component
+    }) : React__default['default'].createElement(AssetGalleryCompactCard$1, {
+      asset: asset,
+      hasHeightAndWidth: asset.layout.hasHeightAndWidth,
+      collapseExtraInfo: asset.layout.width < 90,
+      selectable: 'selectable' in asset ? asset.selectable : selectable,
+      selected: selectedAssetKeys.includes(asset.key),
+      extendedSelectMode: Boolean(selectedAssetKeys.length),
+      onAssetSelected: onAssetSelected,
+      onAssetUnselected: onAssetUnselected,
+      softSelected: softSelectedAssetKey === asset.key,
+      component: component
+    })));
+  })));
+});
+AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
+  assets: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape(assetShape)),
+  viewMode: defaultTheme.PropTypes.oneOf(['compact', 'grid']),
+  thumbnailMaxHeight: defaultTheme.PropTypes.number,
+  selectable: defaultTheme.PropTypes.bool,
+  selectedAssetKeys: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string), defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number)]).isRequired,
+  scrollElement: defaultTheme.PropTypes.instanceOf(Element),
+  onAssetSelected: defaultTheme.PropTypes.func.isRequired,
+  onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
+  softSelectable: defaultTheme.PropTypes.bool,
+  softSelectedAssetKey: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]),
+  onAssetSoftSelectedChanged: defaultTheme.PropTypes.func.isRequired,
+  component: defaultTheme.PropTypes.func,
+  className: defaultTheme.PropTypes.string
+} : {};
+
+var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_ref, forwardedRef) {
+  var assets = _ref.assets,
+      viewMode = _ref.viewMode,
+      thumbnailMaxHeight = _ref.thumbnailMaxHeight,
+      selectable = _ref.selectable,
+      selectedAssetKeys = _ref.selectedAssetKeys,
+      onSelectedChanged = _ref.onSelectedChanged,
+      softSelectable = _ref.softSelectable,
+      scrollElement = _ref.scrollElement,
+      onSoftSelectedChanged = _ref.onSoftSelectedChanged,
+      component = _ref.component,
+      props = defaultTheme._objectWithoutProperties(_ref, ["assets", "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];
+
+  var _useState3 = React.useState(null),
+      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
+      softSelectedAssetKeyInternalState = _useState4[0],
+      setSoftSelectedAssetKeyInternalState = _useState4[1];
+
+  React.useEffect(function () {
+    setSelectedAssetKeysInternalState(selectedAssetKeys || []);
+  }, [selectedAssetKeys]);
+  React.useEffect(function () {
+    setSelectedAssetKeysInternalState(function (current) {
+      return current.filter(function (c) {
+        return assets.some(function (a) {
+          return a.key === c;
+        });
+      });
+    });
+  }, [assets.length]);
+  React.useEffect(function () {
+    if (selectedAssetKeys === selectedAssetKeysInternalState) return;
+
+    if (lodash.isFunction(onSelectedChanged)) {
+      onSelectedChanged(selectedAssetKeysInternalState);
+    }
+  }, [selectedAssetKeysInternalState]);
+  React.useEffect(function () {
+    if (lodash.isFunction(onSoftSelectedChanged)) {
+      onSoftSelectedChanged(softSelectedAssetKeyInternalState);
+    }
+  }, [softSelectedAssetKeyInternalState]);
+  var onSelected = React.useCallback(function (assetKey) {
+    setSelectedAssetKeysInternalState(function (currentState) {
+      return [].concat(defaultTheme._toConsumableArray(currentState), [assetKey]);
+    });
+  }, []);
+  var onUnselected = React.useCallback(function (assetKey) {
+    setSelectedAssetKeysInternalState(function (currentState) {
+      return currentState.filter(function (filteredAssetKey) {
+        return filteredAssetKey !== assetKey;
+      });
+    });
+  }, []);
+  var onAssetSoftSelectedChanged = React.useCallback(function () {
+    var assetKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    setSoftSelectedAssetKeyInternalState(assetKey);
+  }, []);
+  return React__default['default'].createElement(AssetGalleryBase, defaultTheme._extends({
+    ref: forwardedRef,
+    assets: assets,
+    thumbnailMaxHeight: thumbnailMaxHeight,
+    selectable: selectable,
+    selectedAssetKeys: selectedAssetKeysInternalState,
+    onAssetSelected: onSelected,
+    onAssetUnselected: onUnselected,
+    softSelectable: softSelectable,
+    softSelectedAssetKey: softSelectedAssetKeyInternalState,
+    scrollElement: scrollElement,
+    onAssetSoftSelectedChanged: onAssetSoftSelectedChanged,
+    component: component,
+    viewMode: viewMode
+  }, props));
+});
+AssetGallery.propTypes = process.env.NODE_ENV !== "production" ? {
+  assets: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.shape(assetShape)),
+  viewMode: defaultTheme.PropTypes.oneOf(['compact', 'grid']),
+  thumbnailMaxHeight: defaultTheme.PropTypes.number,
+  selectable: defaultTheme.PropTypes.bool,
+  selectedAssetKeys: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string), defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number)]),
+  onSelectedChanged: defaultTheme.PropTypes.func,
+  softSelectable: defaultTheme.PropTypes.bool,
+  scrollElement: defaultTheme.PropTypes.instanceOf(Element),
+  onSoftSelectedChanged: defaultTheme.PropTypes.func,
+  component: defaultTheme.PropTypes.func
+} : {};
+AssetGallery.defaultProps = {
+  assets: [],
+  viewMode: 'compact',
+  thumbnailMaxHeight: 300,
+  selectedAssetKeys: []
+};
+
+exports.AssetGallery = AssetGallery;
+exports.SummaryCard = SummaryCard;