@ntbjs/react-components 2.0.0-rc.13 → 2.0.0-rc.26

package/build/AssetAction-d081e4b7.js

@@ -0,0 +1,2377 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var lodash = require('lodash');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var React = require('react');
+var useMergedRefs = require('@restart/hooks/useMergedRefs');
+var ResizeObserver = require('resize-observer-polyfill');
+var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-d229cf98.js');
+var styled = require('styled-components');
+var Instructions = require('./Instructions-af191987.js');
+var Alert = require('./Alert-8a511bdc.js');
+var Badge = require('./Badge-aa4cd9c1.js');
+var Popover = require('./Popover-c4be47ea.js');
+require('./Tab-ccbca1f2.js');
+require('./Tabs-b06c0e24.js');
+var Tooltip = require('./Tooltip-d5882b82.js');
+require('./VerificationStatusIcon-9876b68f.js');
+var react = require('@floating-ui/react');
+var polished = require('polished');
+var ContextMenu = require('./ContextMenu-82f9d728.js');
+require('./AssetPreviewTopBar-623cfa18.js');
+require('./ProgressBar-2d26c1fb.js');
+require('./InfoCard-d0fdf377.js');
+var ActionButton = require('./ActionButton-03dc5f67.js');
+require('./Button-2e26f5da.js');
+require('./Checkbox-0b8faf49.js');
+require('./CompactAutocompleteSelect-797778cb.js');
+require('./CompactStarRating-da21b53f.js');
+require('./CompactTextInput-d56aec71.js');
+require('./MultiSelect-d7920eb1.js');
+require('./Radio-150fb2c9.js');
+require('./TextArea-26d3c8a1.js');
+require('./TextInput-3a567daa.js');
+require('./Switch-d2d6e9ec.js');
+var ContextMenuItem = require('./ContextMenuItem-3967010d.js');
+
+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 useMergedRefs__default = /*#__PURE__*/_interopDefaultLegacy(useMergedRefs);
+var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _path$3;
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
+function SvgCheckRectangleFilled(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M10.146 17.622l9.412-9.412-1.87-1.869-7.542 7.543-3.805-3.805-1.869 1.87 5.674 5.673zM2.67 24.03q-1.101 0-1.886-.784T0 21.36V2.67Q0 1.569.784.784T2.67 0h18.69q1.101 0 1.886.784t.784 1.886v18.69q0 1.101-.784 1.886t-1.886.784H2.67z"
+  })));
+}
+
+var _path$2;
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
+function SvgHeadset(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M9 21H5q-.825 0-1.413-.587Q3 19.825 3 19v-7q0-1.875.712-3.513.713-1.637 1.926-2.85 1.212-1.212 2.85-1.925Q10.125 3 12 3t3.513.712q1.637.713 2.85 1.925 1.212 1.213 1.925 2.85Q21 10.125 21 12v7q0 .825-.587 1.413Q19.825 21 19 21h-4v-8h4v-1q0-2.925-2.038-4.963Q14.925 5 12 5T7.038 7.037Q5 9.075 5 12v1h4zm-2-6H5v4h2zm10 0v4h2v-4zm0 0h2-2zM7 15H5z"
+  })));
+}
+
+var _path$1;
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
+function SvgLayers(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "-1 0 24 24"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M11.16 23.622L0 14.942l2.046-1.55 9.114 7.068 9.114-7.068 2.046 1.55-11.16 8.68zm0-6.262L0 8.68 11.16 0l11.16 8.68-11.16 8.68z"
+  })));
+}
+
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function SvgPlay(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "-3 -0.25 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M0 23.52V0l18.48 11.76L0 23.52z"
+  })));
+}
+
+const 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
+  })
+};
+const assetShapeWithLayout = {
+  ...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
+};
+
+const AssetGalleryBase$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: relative;
+`;
+const GroupLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
+  display: flex;
+  align-items: flex-end;
+  position: absolute;
+  padding-bottom: 4px;
+  box-sizing: border-box;
+`;
+const AssetGalleryCardBase = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  z-index: 1;
+  will-change: transform, width, height;
+
+  &:hover {
+    z-index: 2;
+  }
+`;
+
+var build = {exports: {}};
+
+(()=>{var e={296:(e,t,r)=>{var o=/^\s+|\s+$/g,n=/^[-+]0x[0-9a-f]+$/i,i=/^0b[01]+$/i,c=/^0o[0-7]+$/i,u=parseInt,s="object"==typeof r.g&&r.g&&r.g.Object===Object&&r.g,l="object"==typeof self&&self&&self.Object===Object&&self,a=s||l||Function("return this")(),f=Object.prototype.toString,p=Math.max,y=Math.min,b=function(){return a.Date.now()};function d(e){var t=typeof e;return !!e&&("object"==t||"function"==t)}function h(e){if("number"==typeof e)return e;if(function(e){return "symbol"==typeof e||function(e){return !!e&&"object"==typeof e}(e)&&"[object Symbol]"==f.call(e)}(e))return NaN;if(d(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=d(t)?t+"":t;}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(o,"");var r=i.test(e);return r||c.test(e)?u(e.slice(2),r?2:8):n.test(e)?NaN:+e}e.exports=function(e,t,r){var o,n,i,c,u,s,l=0,a=!1,f=!1,v=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function m(t){var r=o,i=n;return o=n=void 0,l=t,c=e.apply(i,r)}function O(e){var r=e-s;return void 0===s||r>=t||r<0||f&&e-l>=i}function w(){var e=b();if(O(e))return g(e);u=setTimeout(w,function(e){var r=t-(e-s);return f?y(r,i-(e-l)):r}(e));}function g(e){return u=void 0,v&&o?m(e):(o=n=void 0,c)}function P(){var e=b(),r=O(e);if(o=arguments,n=this,s=e,r){if(void 0===u)return function(e){return l=e,u=setTimeout(w,t),a?m(e):c}(s);if(f)return u=setTimeout(w,t),m(s)}return void 0===u&&(u=setTimeout(w,t)),c}return t=h(t)||0,d(r)&&(a=!!r.leading,i=(f="maxWait"in r)?p(h(r.maxWait)||0,t):i,v="trailing"in r?!!r.trailing:v),P.cancel=function(){void 0!==u&&clearTimeout(u),l=0,o=s=n=u=void 0;},P.flush=function(){return void 0===u?c:g(b())},P};},96:(e,t,r)=>{var o="Expected a function",n=NaN,i="[object Symbol]",c=/^\s+|\s+$/g,u=/^[-+]0x[0-9a-f]+$/i,s=/^0b[01]+$/i,l=/^0o[0-7]+$/i,a=parseInt,f="object"==typeof r.g&&r.g&&r.g.Object===Object&&r.g,p="object"==typeof self&&self&&self.Object===Object&&self,y=f||p||Function("return this")(),b=Object.prototype.toString,d=Math.max,h=Math.min,v=function(){return y.Date.now()};function m(e){var t=typeof e;return !!e&&("object"==t||"function"==t)}function O(e){if("number"==typeof e)return e;if(function(e){return "symbol"==typeof e||function(e){return !!e&&"object"==typeof e}(e)&&b.call(e)==i}(e))return n;if(m(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=m(t)?t+"":t;}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(c,"");var r=s.test(e);return r||l.test(e)?a(e.slice(2),r?2:8):u.test(e)?n:+e}e.exports=function(e,t,r){var n=!0,i=!0;if("function"!=typeof e)throw new TypeError(o);return m(r)&&(n="leading"in r?!!r.leading:n,i="trailing"in r?!!r.trailing:i),function(e,t,r){var n,i,c,u,s,l,a=0,f=!1,p=!1,y=!0;if("function"!=typeof e)throw new TypeError(o);function b(t){var r=n,o=i;return n=i=void 0,a=t,u=e.apply(o,r)}function w(e){var r=e-l;return void 0===l||r>=t||r<0||p&&e-a>=c}function g(){var e=v();if(w(e))return P(e);s=setTimeout(g,function(e){var r=t-(e-l);return p?h(r,c-(e-a)):r}(e));}function P(e){return s=void 0,y&&n?b(e):(n=i=void 0,u)}function j(){var e=v(),r=w(e);if(n=arguments,i=this,l=e,r){if(void 0===s)return function(e){return a=e,s=setTimeout(g,t),f?b(e):u}(l);if(p)return s=setTimeout(g,t),b(l)}return void 0===s&&(s=setTimeout(g,t)),u}return t=O(t)||0,m(r)&&(f=!!r.leading,c=(p="maxWait"in r)?d(O(r.maxWait)||0,t):c,y="trailing"in r?!!r.trailing:y),j.cancel=function(){void 0!==s&&clearTimeout(s),a=0,n=l=i=s=void 0;},j.flush=function(){return void 0===s?u:P(v())},j}(e,t,{leading:n,maxWait:t,trailing:i})};},703:(e,t,r)=>{var o=r(414);function n(){}function i(){}i.resetWarningCache=n,e.exports=function(){function e(e,t,r,n,i,c){if(c!==o){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}e.isRequired=e;var r={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:n};return r.PropTypes=r,r};},697:(e,t,r)=>{e.exports=r(703)();},414:e=>{e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";}},t={};function r(o){var n=t[o];if(void 0!==n)return n.exports;var i=t[o]={exports:{}};return e[o](i,i.exports,r),i.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]});},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0});};var o={};(()=>{r.r(o),r.d(o,{LazyLoadComponent:()=>Y,LazyLoadImage:()=>ne,trackWindowScroll:()=>D});const e=React__default["default"];var t=r.n(e),n=r(697);function i(){return "undefined"!=typeof window&&"IntersectionObserver"in window&&"isIntersecting"in window.IntersectionObserverEntry.prototype}function c(e){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c(e)}function u(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o);}return r}function s(e,t,r){return (t=a(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,a(o.key),o);}}function a(e){var t=function(e,t){if("object"!==c(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==c(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return "symbol"===c(t)?t:String(t)}function f(e,t){return f=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},f(e,t)}function p(e){return p=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},p(e)}var y=function(e){e.forEach((function(e){e.isIntersecting&&e.target.onVisible();}));},b={},d=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&f(e,t);}(h,e);var r,o,n,a,d=(n=h,a=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=p(n);if(a){var r=p(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===c(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function h(e){var t;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,h),(t=d.call(this,e)).supportsObserver=!e.scrollPosition&&e.useIntersectionObserver&&i(),t.supportsObserver){var r=e.threshold;t.observer=function(e){return b[e]=b[e]||new IntersectionObserver(y,{rootMargin:e+"px"}),b[e]}(r);}return t}return r=h,o=[{key:"componentDidMount",value:function(){this.placeholder&&this.observer&&(this.placeholder.onVisible=this.props.onVisible,this.observer.observe(this.placeholder)),this.supportsObserver||this.updateVisibility();}},{key:"componentWillUnmount",value:function(){this.observer&&this.placeholder&&this.observer.unobserve(this.placeholder);}},{key:"componentDidUpdate",value:function(){this.supportsObserver||this.updateVisibility();}},{key:"getPlaceholderBoundingBox",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.props.scrollPosition,t=this.placeholder.getBoundingClientRect(),r=this.placeholder.style,o=parseInt(r.getPropertyValue("margin-left"),10)||0,n=parseInt(r.getPropertyValue("margin-top"),10)||0;return {bottom:e.y+t.bottom+n,left:e.x+t.left+o,right:e.x+t.right+o,top:e.y+t.top+n}}},{key:"isPlaceholderInViewport",value:function(){if("undefined"==typeof window||!this.placeholder)return !1;var e=this.props,t=e.scrollPosition,r=e.threshold,o=this.getPlaceholderBoundingBox(t),n=t.y+window.innerHeight,i=t.x,c=t.x+window.innerWidth,u=t.y;return Boolean(u-r<=o.bottom&&n+r>=o.top&&i-r<=o.right&&c+r>=o.left)}},{key:"updateVisibility",value:function(){this.isPlaceholderInViewport()&&this.props.onVisible();}},{key:"render",value:function(){var e=this,r=this.props,o=r.className,n=r.height,i=r.placeholder,c=r.style,l=r.width;if(i&&"function"!=typeof i.type)return t().cloneElement(i,{ref:function(t){return e.placeholder=t}});var a=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?u(Object(r),!0).forEach((function(t){s(e,t,r[t]);})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t));}));}return e}({display:"inline-block"},c);return void 0!==l&&(a.width=l),void 0!==n&&(a.height=n),t().createElement("span",{className:o,ref:function(t){return e.placeholder=t},style:a},i)}}],o&&l(r.prototype,o),Object.defineProperty(r,"prototype",{writable:!1}),h}(t().Component);d.propTypes={onVisible:n.PropTypes.func.isRequired,className:n.PropTypes.string,height:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.string]),placeholder:n.PropTypes.element,threshold:n.PropTypes.number,useIntersectionObserver:n.PropTypes.bool,scrollPosition:n.PropTypes.shape({x:n.PropTypes.number.isRequired,y:n.PropTypes.number.isRequired}),width:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.string])},d.defaultProps={className:"",placeholder:null,threshold:100,useIntersectionObserver:!0};const h=d;var v=r(296),m=r.n(v),O=r(96),w=r.n(O),g=function(e){var t=getComputedStyle(e,null);return t.getPropertyValue("overflow")+t.getPropertyValue("overflow-y")+t.getPropertyValue("overflow-x")};const P=function(e){if(!(e instanceof HTMLElement))return window;for(var t=e;t&&t instanceof HTMLElement;){if(/(scroll|auto)/.test(g(t)))return t;t=t.parentNode;}return window};function j(e){return j="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},j(e)}var T=["delayMethod","delayTime"];function S(){return S=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);}return e},S.apply(this,arguments)}function E(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,(n=function(e,t){if("object"!==j(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==j(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(o.key),"symbol"===j(n)?n:String(n)),o);}var n;}function L(e,t){return L=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},L(e,t)}function _(e,t){if(t&&("object"===j(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return I(e)}function I(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function x(e){return x=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},x(e)}var R=function(){return "undefined"==typeof window?0:window.scrollX||window.pageXOffset},k=function(){return "undefined"==typeof window?0:window.scrollY||window.pageYOffset};const D=function(e){var r=function(r){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&L(e,t);}(l,r);var o,n,c,u,s=(c=l,u=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=x(c);if(u){var r=x(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return _(this,e)});function l(e){var r;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,l),(r=s.call(this,e)).useIntersectionObserver=e.useIntersectionObserver&&i(),r.useIntersectionObserver)return _(r);var o=r.onChangeScroll.bind(I(r));return "debounce"===e.delayMethod?r.delayedScroll=m()(o,e.delayTime):"throttle"===e.delayMethod&&(r.delayedScroll=w()(o,e.delayTime)),r.state={scrollPosition:{x:R(),y:k()}},r.baseComponentRef=t().createRef(),r}return o=l,(n=[{key:"componentDidMount",value:function(){this.addListeners();}},{key:"componentWillUnmount",value:function(){this.removeListeners();}},{key:"componentDidUpdate",value:function(){"undefined"==typeof window||this.useIntersectionObserver||P(this.baseComponentRef.current)!==this.scrollElement&&(this.removeListeners(),this.addListeners());}},{key:"addListeners",value:function(){"undefined"==typeof window||this.useIntersectionObserver||(this.scrollElement=P(this.baseComponentRef.current),this.scrollElement.addEventListener("scroll",this.delayedScroll,{passive:!0}),window.addEventListener("resize",this.delayedScroll,{passive:!0}),this.scrollElement!==window&&window.addEventListener("scroll",this.delayedScroll,{passive:!0}));}},{key:"removeListeners",value:function(){"undefined"==typeof window||this.useIntersectionObserver||(this.scrollElement.removeEventListener("scroll",this.delayedScroll),window.removeEventListener("resize",this.delayedScroll),this.scrollElement!==window&&window.removeEventListener("scroll",this.delayedScroll));}},{key:"onChangeScroll",value:function(){this.useIntersectionObserver||this.setState({scrollPosition:{x:R(),y:k()}});}},{key:"render",value:function(){var r=this.props,o=(r.delayMethod,r.delayTime,function(e,t){if(null==e)return {};var r,o,n=function(e,t){if(null==e)return {};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r]);}return n}(r,T)),n=this.useIntersectionObserver?null:this.state.scrollPosition;return t().createElement(e,S({forwardRef:this.baseComponentRef,scrollPosition:n},o))}}])&&E(o.prototype,n),Object.defineProperty(o,"prototype",{writable:!1}),l}(t().Component);return r.propTypes={delayMethod:n.PropTypes.oneOf(["debounce","throttle"]),delayTime:n.PropTypes.number,useIntersectionObserver:n.PropTypes.bool},r.defaultProps={delayMethod:"throttle",delayTime:300,useIntersectionObserver:!0},r};function C(e){return C="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},C(e)}function B(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,(n=function(e,t){if("object"!==C(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==C(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(o.key),"symbol"===C(n)?n:String(n)),o);}var n;}function M(e,t){return M=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},M(e,t)}function N(e){return N=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},N(e)}var V=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&M(e,t);}(u,e);var r,o,n,i,c=(n=u,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=N(n);if(i){var r=N(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===C(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function u(e){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,u),c.call(this,e)}return r=u,(o=[{key:"render",value:function(){return t().createElement(h,this.props)}}])&&B(r.prototype,o),Object.defineProperty(r,"prototype",{writable:!1}),u}(t().Component);const W=D(V);function z(e){return z="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},z(e)}function $(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,(n=function(e,t){if("object"!==z(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==z(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(o.key),"symbol"===z(n)?n:String(n)),o);}var n;}function U(e,t){return U=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},U(e,t)}function F(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function q(e){return q=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},q(e)}var H=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&U(e,t);}(s,e);var r,o,n,c,u=(n=s,c=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=q(n);if(c){var r=q(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===z(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return F(e)}(this,e)});function s(e){var t;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),t=u.call(this,e);var r=e.afterLoad,o=e.beforeLoad,n=e.scrollPosition,i=e.visibleByDefault;return t.state={visible:i},i&&(o(),r()),t.onVisible=t.onVisible.bind(F(t)),t.isScrollTracked=Boolean(n&&Number.isFinite(n.x)&&n.x>=0&&Number.isFinite(n.y)&&n.y>=0),t}return r=s,(o=[{key:"componentDidUpdate",value:function(e,t){t.visible!==this.state.visible&&this.props.afterLoad();}},{key:"onVisible",value:function(){this.props.beforeLoad(),this.setState({visible:!0});}},{key:"render",value:function(){if(this.state.visible)return this.props.children;var e=this.props,r=e.className,o=e.delayMethod,n=e.delayTime,c=e.height,u=e.placeholder,s=e.scrollPosition,l=e.style,a=e.threshold,f=e.useIntersectionObserver,p=e.width;return this.isScrollTracked||f&&i()?t().createElement(h,{className:r,height:c,onVisible:this.onVisible,placeholder:u,scrollPosition:s,style:l,threshold:a,useIntersectionObserver:f,width:p}):t().createElement(W,{className:r,delayMethod:o,delayTime:n,height:c,onVisible:this.onVisible,placeholder:u,style:l,threshold:a,width:p})}}])&&$(r.prototype,o),Object.defineProperty(r,"prototype",{writable:!1}),s}(t().Component);H.propTypes={afterLoad:n.PropTypes.func,beforeLoad:n.PropTypes.func,useIntersectionObserver:n.PropTypes.bool,visibleByDefault:n.PropTypes.bool},H.defaultProps={afterLoad:function(){return {}},beforeLoad:function(){return {}},useIntersectionObserver:!0,visibleByDefault:!1};const Y=H;function X(e){return X="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},X(e)}var A=["afterLoad","beforeLoad","delayMethod","delayTime","effect","placeholder","placeholderSrc","scrollPosition","threshold","useIntersectionObserver","visibleByDefault","wrapperClassName","wrapperProps"];function G(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o);}return r}function J(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?G(Object(r),!0).forEach((function(t){K(e,t,r[t]);})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):G(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t));}));}return e}function K(e,t,r){return (t=ee(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function Q(){return Q=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);}return e},Q.apply(this,arguments)}function Z(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,ee(o.key),o);}}function ee(e){var t=function(e,t){if("object"!==X(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==X(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return "symbol"===X(t)?t:String(t)}function te(e,t){return te=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},te(e,t)}function re(e){return re=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},re(e)}var oe=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&te(e,t);}(u,e);var r,o,n,i,c=(n=u,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return !1}}(),function(){var e,t=re(n);if(i){var r=re(this).constructor;e=Reflect.construct(t,arguments,r);}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"===X(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function u(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,u),(t=c.call(this,e)).state={loaded:!1},t}return r=u,(o=[{key:"onImageLoad",value:function(){var e=this;return this.state.loaded?null:function(t){e.props.onLoad(t),e.props.afterLoad(),e.setState({loaded:!0});}}},{key:"getImg",value:function(){var e=this.props,r=(e.afterLoad,e.beforeLoad,e.delayMethod,e.delayTime,e.effect,e.placeholder,e.placeholderSrc,e.scrollPosition,e.threshold,e.useIntersectionObserver,e.visibleByDefault,e.wrapperClassName,e.wrapperProps,function(e,t){if(null==e)return {};var r,o,n=function(e,t){if(null==e)return {};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r]);}return n}(e,A));return t().createElement("img",Q({},r,{onLoad:this.onImageLoad()}))}},{key:"getLazyLoadImage",value:function(){var e=this.props,r=e.beforeLoad,o=e.className,n=e.delayMethod,i=e.delayTime,c=e.height,u=e.placeholder,s=e.scrollPosition,l=e.style,a=e.threshold,f=e.useIntersectionObserver,p=e.visibleByDefault,y=e.width;return t().createElement(Y,{beforeLoad:r,className:o,delayMethod:n,delayTime:i,height:c,placeholder:u,scrollPosition:s,style:l,threshold:a,useIntersectionObserver:f,visibleByDefault:p,width:y},this.getImg())}},{key:"getWrappedLazyLoadImage",value:function(e){var r=this.props,o=r.effect,n=r.height,i=r.placeholderSrc,c=r.width,u=r.wrapperClassName,s=r.wrapperProps,l=this.state.loaded,a=l?" lazy-load-image-loaded":"",f=l||!i?{}:{backgroundImage:"url(".concat(i,")"),backgroundSize:"100% 100%"};return t().createElement("span",Q({className:u+" lazy-load-image-background "+o+a,style:J(J({},f),{},{color:"transparent",display:"inline-block",height:n,width:c})},s),e)}},{key:"render",value:function(){var e=this.props,t=e.effect,r=e.placeholderSrc,o=e.visibleByDefault,n=e.wrapperClassName,i=e.wrapperProps,c=this.getLazyLoadImage();return (t||r)&&!o||n||i?this.getWrappedLazyLoadImage(c):c}}])&&Z(r.prototype,o),Object.defineProperty(r,"prototype",{writable:!1}),u}(t().Component);oe.propTypes={onLoad:n.PropTypes.func,afterLoad:n.PropTypes.func,beforeLoad:n.PropTypes.func,delayMethod:n.PropTypes.string,delayTime:n.PropTypes.number,effect:n.PropTypes.string,placeholderSrc:n.PropTypes.string,threshold:n.PropTypes.number,useIntersectionObserver:n.PropTypes.bool,visibleByDefault:n.PropTypes.bool,wrapperClassName:n.PropTypes.string,wrapperProps:n.PropTypes.object},oe.defaultProps={onLoad:function(){},afterLoad:function(){return {}},beforeLoad:function(){return {}},delayMethod:"throttle",delayTime:300,effect:"",placeholderSrc:null,threshold:100,useIntersectionObserver:!0,visibleByDefault:!1,wrapperClassName:""};const ne=oe;})(),build.exports=o;})();
+
+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);
+
+const convertMsToHMS = ms => {
+  const seconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const secondsLeft = seconds % 60;
+  const minutesLeft = minutes % 60;
+  let hmsString = '';
+  if (hours) {
+    hmsString += hours < 10 ? `0${hours}:` : `${hours}:`;
+  }
+  hmsString += `${minutesLeft < 10 ? `0${minutesLeft}` : `${minutesLeft}`}:`;
+  hmsString += secondsLeft < 10 ? `0${secondsLeft}` : `${secondsLeft}`;
+  return hmsString;
+};
+
+const shouldForwardProp$1 = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const SummaryCard$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  width: ${props => props.width ? `${props.width}px` : '100%'};
+  ${props => props.view === 'compact' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')) : 'background: transparent'};
+
+  ${props => props.$useBorder ? props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-500')}`, `1px solid ${props.theme.getColor('gray-300')}`) : null}
+`;
+const Gutter = styled__default["default"].div.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).attrs(defaultTheme.applyDefaultTheme)`
+  ${props => {
+  if (props.renderAsMargin) {
+    return styled.css`
+        margin-bottom: ${props.$gutter || 8}px;
+      `;
+  } else {
+    return styled.css`
+        padding-bottom: ${props.$gutter || 8}px;
+      `;
+  }
+}}
+  padding-bottom: ${props => props.$gutter || 8}px;
+`;
+const Header = styled__default["default"].div.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+`;
+const HeaderLeft = styled__default["default"].div.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  > * {
+    margin-right: 4px;
+  }
+`;
+const HeaderRight = styled__default["default"].div.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  > * {
+    margin-left: 4px;
+  }
+`;
+const Title = styled__default["default"].span.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).attrs(defaultTheme.applyDefaultTheme)`
+  display: inline-block;
+  padding: 0 16px;
+  font: normal normal 500 14px/19px Roboto;
+  letter-spacing: 0.28px;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
+`;
+const Description = styled__default["default"].span.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).attrs(defaultTheme.applyDefaultTheme)`
+  padding: 0 16px;
+  text-align: left;
+  font: normal normal normal 12px/16px Roboto;
+  letter-spacing: 0.24px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
+`;
+const Instruction = styled__default["default"].div.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).attrs(defaultTheme.applyDefaultTheme)``;
+const Footer = styled__default["default"].div.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+`;
+const FooterLeft = styled__default["default"].div.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  > * {
+    margin-right: 4px;
+  }
+`;
+const FooterRight = styled__default["default"].div.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  > * {
+    margin-left: 4px;
+  }
+`;
+styled__default["default"](react.FloatingArrow).withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).attrs(defaultTheme.applyDefaultTheme)`
+  ${props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
+`;
+
+const SummaryCard = React__default["default"].forwardRef(function AssetSummaryCard({
+  activeSummaryCard,
+  title,
+  description,
+  instructions,
+  instructionsType,
+  headerLeft,
+  headerRight,
+  footerLeft,
+  footerRight,
+  width,
+  useBorder,
+  view,
+  ...props
+}, forwardedRef) {
+  const shouldRenderInstructions = !!instructions;
+  const shouldRenderHeader = !!headerLeft || !!headerRight;
+  const shouldRenderFooter = !!footerLeft || !!footerRight;
+  const shouldAddGutterAfterInstructions = shouldRenderInstructions && shouldRenderFooter;
+  const shouldAddGutterAfterTitle = !!title && (!!description || !!instructions || shouldRenderFooter);
+  if (!activeSummaryCard) return null;
+  return React__default["default"].createElement(SummaryCard$1, _rollupPluginBabelHelpers._extends({
+    ref: forwardedRef,
+    width: width,
+    useBorder: useBorder
+  }, props, {
+    view: view
+  }), shouldRenderHeader && React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(Gutter, {
+    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(Instructions.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" ? {
+  activeSummaryCard: defaultTheme.PropTypes.bool,
+  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,
+  view: defaultTheme.PropTypes.string
+} : {};
+SummaryCard.defaultProps = {
+  title: '',
+  description: '',
+  instructions: '',
+  instructionsType: 'info',
+  headerLeft: null,
+  headerRight: null,
+  footerLeft: null,
+  footerRight: null,
+  useBorder: false,
+  activeSummaryCard: false
+};
+
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const AssetGalleryWrapper$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  ${props => props.disabled && styled.css`
+      cursor: not-allowed;
+    `};
+`;
+const Reference = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  width: 100%;
+  height: 100%;
+`;
+const AssetGalleryCompactCard$2 = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  display: block;
+  height: 100%;
+  padding-left: ${props => props.selected ? 1 : 0}px;
+  padding-right: ${props => props.selected ? 1 : 0}px;
+  padding-top: ${props => props.selected ? 1 : 0}px;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'))};
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))};
+
+  ${props => props.disabled && styled.css`
+      pointer-events: none;
+      opacity: 0.4;
+    `};
+
+  ${props => props.extendedSelectMode && styled.css`
+      cursor: pointer;
+    `}
+  video {
+    width: 100%;
+    height: 100%;
+  }
+
+  .audio {
+    display: flex;
+    justify-content: center;
+    svg {
+      width: 25%;
+    }
+  }
+`;
+const Figure$1 = styled__default["default"].figure`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  .lazy-load-image-background {
+    display: block !important;
+  }
+
+  img {
+    display: block;
+    height: 100%;
+    width: 100%;
+    ${props => props.$hasHeightAndWidth ? styled.css`
+            object-fit: cover;
+          ` : styled.css`
+            object-fit: contain;
+          `}
+  }
+`;
+const FigureOverlayBackdrop$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  inset: 0;
+  opacity: ${props => props.selected ? 0.6 : 0};
+  background-color: ${props => props.selected ? '#ACCEF7' : 'transparent'};
+`;
+const Overlay$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`;
+const OverlayBackdrop$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  transition: opacity 220ms;
+
+  ${props => !props.selected ? styled.css`
+          background: radial-gradient(
+            ellipse at center,
+            rgba(0, 0, 0, 0.3) 27%,
+            rgba(0, 0, 0, 0.5) 60%,
+            rgba(0, 0, 0, 0.7) 90%
+          );
+        ` : null}
+  ${props => (props.selected || props.$softSelected) && styled.css`
+      opacity: 1;
+    `}
+    ${Overlay$1}:hover & {
+    opacity: 1;
+  }
+`;
+const OverlayInfo$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 15px 50px 10px 12px;
+  color: ${props => props.theme.getColor('gray-100')};
+  & span {
+    overflow: hidden;
+    word-wrap: break-word;
+  }
+`;
+const OverlayCompleted = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  transition: border-color 120ms;
+  border: 3px solid;
+  ${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));
+}};
+`;
+const OverlayHasError = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  transition: border-color 120ms;
+  border: 3px solid;
+  ${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));
+}}
+`;
+const OverlaySelected$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  transition: border-color 120ms;
+  border-style: solid;
+  border-width: 3px;
+
+  ${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) {
+    if (props.customSelectedBorder) {
+      return props.theme.themeProp('border-color', props.customSelectedBorder[0], props.customSelectedBorder[1]);
+    } else {
+      return props.theme.themeProp('border-color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
+    }
+  }
+  return props.theme.themeProp('border-color', 'transparent', 'transparent');
+}};
+`;
+const OverlayInfoTop$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  padding: 8px;
+  display: flex;
+`;
+const OverlayInfoTopActions$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: opacity 220ms;
+  z-index: 99999;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'))}
+
+  opacity: ${props => props.$isOverlayHovered ? 1 : 0};
+`;
+const OverlayInfoTopLeft = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  opacity: 1;
+  display: ${props => props?.$collapseExtraInfo ? 'none' : 'block'};
+
+  ${Overlay$1}:hover & {
+    opacity: 0;
+  }
+`;
+const OverlayInfoTopWarning$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  margin-left: auto;
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  padding: ${props => props.type === 'error' ? 0 : '3px 4px'};
+  background-color: ${props => props.type === 'error' ? props.theme.getColor('red-500') : props.theme.getColor('gray-100')};
+  opacity: 1;
+
+  svg {
+    width: 100%;
+    color: ${props => props.type === 'error' ? props.theme.getColor('gray-100') : props.theme.getColor('gray-700')};
+  }
+
+  ${Overlay$1}:hover & {
+    opacity: 0;
+  }
+`;
+const OverlayInfoBottom$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 8px;
+  display: flex;
+`;
+const OverlayInfoBottomSelectButton$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  opacity: ${props => props.selected ? 1 : 0};
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: opacity 220ms;
+  height: 24px;
+
+  > svg {
+    width: 24px;
+    height: 24px;
+    transition: opacity 120ms;
+    opacity: ${props => props.selected ? 1 : 0.5};
+  }
+
+  ${Overlay$1}:hover & {
+    opacity: 1;
+  }
+`;
+const OverlayInfoBottomMediaIcon$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  margin-left: auto;
+  opacity: 1;
+
+  ${Overlay$1}:hover & {
+    opacity: 0;
+  }
+`;
+const ConsumerDefinedOverlay$1 = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+`;
+styled__default["default"].div`
+  margin: 4px;
+`;
+styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
+  padding: 4px 8px;
+  border-radius: 4px;
+`;
+const StyledFloatingArrow$1 = styled__default["default"](react.FloatingArrow).withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)`
+  ${props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
+`;
+
+const AssetActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 1rem;
+  font-weight: 500;
+  display: flex;
+  flex-direction: column;
+  padding: 2px;
+  gap: 8px;
+`;
+
+const AssetActionsBase = React__default["default"].forwardRef(function AssetActionsBase({
+  actions,
+  asset,
+  ...props
+}, forwardedRef) {
+  const assetActions = actions.map((action, index) => React__default["default"].createElement(AssetAction$1, _rollupPluginBabelHelpers._extends({
+    key: `index_${action.title}`,
+    ref: forwardedRef
+  }, props, {
+    action: action,
+    asset: asset,
+    itemKey: `${index}-${action.title}`
+  })));
+  return React__default["default"].createElement(AssetActions, null, assetActions);
+});
+AssetActionsBase.propTypes = process.env.NODE_ENV !== "production" ? {
+  actions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
+  asset: defaultTheme.PropTypes.object
+} : {};
+AssetActionsBase.defaultProps = {};
+
+const ComputedRootComponent$1 = ({
+  component,
+  asset,
+  ...props
+}) => {
+  const newProps = lodash.mapKeys(lodash.omit(props, ['theme', 'extendedSelectMode']), (_, key) => 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, _rollupPluginBabelHelpers._extends({
+    ref: newProps.ref
+  }, newProps));
+};
+const AssetGalleryCompactCard = props => {
+  const {
+    asset,
+    activeSummaryCard,
+    displayIcon,
+    selectable,
+    hasHeightAndWidth,
+    selected,
+    customSelectedBorder,
+    extendedSelectMode,
+    onAssetSelected,
+    onAssetUnselected,
+    softSelected,
+    component,
+    scrollPosition,
+    collapseExtraInfo
+  } = props;
+  const ARROW_WIDTH = 30;
+  const ARROW_HEIGHT = 15;
+  const GAP = 8;
+  const arrowRef = React.useRef(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [placement] = React.useState('bottom');
+  const [isOverlayHovered, setIsOverlayHovered] = React.useState(false);
+  const [openedSubActions, updateOpenedSubActions] = React.useState([]);
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = react.useFloating({
+    placement,
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: react.autoUpdate,
+    middleware: [react.offset(ARROW_HEIGHT + GAP), react.flip({
+      padding: 5
+    }), react.shift({
+      padding: 5
+    }), react.arrow({
+      element: arrowRef
+    })]
+  });
+  const {
+    isMounted,
+    styles
+  } = react.useTransitionStyles(context, {
+    initial: {
+      transform: 'translateY(-8px)',
+      opacity: 0
+    },
+    duration: {
+      open: 200,
+      close: 100
+    }
+  });
+  const hover = react.useHover(context, {
+    restMs: 100
+  });
+  const dismiss = react.useDismiss(context, {
+    referencePress: true,
+    ancestorScroll: true,
+    windowScroll: true,
+    windowBlur: true
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = react.useInteractions([dismiss, hover]);
+  React.useEffect(() => {
+    const newOpenedSubActions = (asset?.actions ?? []).map(() => false);
+    updateOpenedSubActions(newOpenedSubActions);
+  }, [asset]);
+  React.useEffect(() => {
+    if (!isOverlayHovered && openedSubActions?.length) {
+      updateOpenedSubActions(openedSubActions.map(() => false));
+    }
+  }, [isOverlayHovered]);
+  const mouseHasEnteredOverlay = React.useCallback(() => {
+    setIsOverlayHovered(true);
+  }, []);
+  const mouseHasLeftOverlay = React.useCallback(() => {
+    setIsOverlayHovered(false);
+  }, []);
+  const isAnySubActionsOpened = React.useMemo(() => {
+    return openedSubActions.some(isOpened => 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);
+    }
+  }
+  function onContextMenu(event) {
+    event.preventDefault();
+    asset.onContextMenu(event);
+  }
+  React.useEffect(() => {
+    if (lodash.isFunction(asset.onContextMenu)) {
+      if (cardRef.current) {
+        cardRef.current.addEventListener('contextmenu', onContextMenu);
+      }
+      return () => {
+        if (cardRef.current) {
+          cardRef.current.removeEventListener('contextmenu', onContextMenu);
+        }
+      };
+    }
+  }, []);
+  function onDragstart(event) {
+    asset.onDragstart(event);
+  }
+  React.useEffect(() => {
+    if (lodash.isFunction(asset.onDragstart)) {
+      if (dragRef.current) {
+        dragRef.current.addEventListener('dragstart', onDragstart);
+      }
+      return () => {
+        if (dragRef.current) {
+          dragRef.current.removeEventListener('dragstart', onDragstart);
+        }
+      };
+    }
+  }, []);
+  const videoPlayerRef = React.useRef();
+  const cardRef = React.useRef();
+  const dragRef = React.useRef(null);
+  const overlayCompactRef = react.useMergeRefs([cardRef, refs.setReference]);
+  function onMouseEnter(event) {
+    if (videoPlayerRef.current) {
+      const playPromise = videoPlayerRef.current.play();
+      if (playPromise !== undefined) {
+        playPromise.then(() => {}).catch(() => {});
+      }
+    }
+    if (lodash.isFunction(asset.onMouseEnter)) {
+      asset.onMouseEnter(event, asset);
+    }
+  }
+  function onMouseLeave() {
+    if (videoPlayerRef.current) {
+      videoPlayerRef.current.pause();
+    }
+  }
+  const renderPreview = asset => {
+    let previewContent = null;
+    if (asset?.fileType?.toLowerCase() === 'video') {
+      previewContent = React__default["default"].createElement(build.exports.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?.fileType?.toLowerCase() === 'audio') {
+      previewContent = React__default["default"].createElement(build.exports.LazyLoadComponent, {
+        scrollPosition: scrollPosition
+      }, React__default["default"].createElement("div", {
+        className: "audio"
+      }, React__default["default"].createElement(SvgHeadset, null)));
+    } else {
+      previewContent = React__default["default"].createElement(build.exports.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$1, {
+      hasHeightAndWidth: hasHeightAndWidth
+    }, previewContent, React__default["default"].createElement(FigureOverlayBackdrop$1, {
+      selected: selected
+    }));
+  };
+  React.useEffect(() => {
+    if (softSelected) {
+      cardRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      });
+    }
+  }, [softSelected]);
+  const renderVersionsBadge = React.useCallback(() => {
+    if (!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]);
+  const renderVerificationBadge = React.useCallback(() => {
+    if (!asset?.verifications) return null;
+    return asset?.verifications;
+  }, [asset]);
+  const renderdynamicBadge = React.useCallback(() => {
+    if (asset?.verifications) return renderVerificationBadge();
+    if (asset?.versions) return renderVersionsBadge();
+    return null;
+  });
+  const renderBadge = () => {
+    switch (displayIcon) {
+      case 'versions':
+        return renderVersionsBadge();
+      case 'verifications':
+        return renderVerificationBadge();
+      case 'dynamic':
+        return renderdynamicBadge();
+      default:
+        return null;
+    }
+  };
+  const renderMediaBadge = React.useCallback(() => {
+    let badgeIcon = null;
+    let badgeContent = null;
+    if (asset?.fileType === 'video') {
+      badgeIcon = React__default["default"].createElement(SvgPlay, null);
+    }
+    if (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]);
+  const renderSummaryCardHeaderLeft = React.useCallback(() => {
+    return React__default["default"].createElement(React__default["default"].Fragment, null, renderVersionsBadge(), renderMediaBadge());
+  }, [asset]);
+  const renderPopoverContent = React.useCallback(() => {
+    return React__default["default"].createElement(SummaryCard, {
+      activeSummaryCard: activeSummaryCard,
+      title: asset?.title || '',
+      description: asset?.description || '',
+      instructions: asset?.imageRights || '',
+      instructionsType: 'warning',
+      headerRight: asset?.summary?.headerRight || '',
+      headerLeft: React__default["default"].createElement(React__default["default"].Fragment, null, renderSummaryCardHeaderLeft(), asset?.summary?.headerLeft || ''),
+      footerLeft: asset?.summary?.footerLeft || '',
+      footerRight: asset?.summary?.footerRight || '',
+      width: 375,
+      view: 'compact'
+    });
+  }, [asset]);
+  return React__default["default"].createElement(AssetGalleryWrapper$1, {
+    disabled: asset.disabled
+  }, React__default["default"].createElement(AssetGalleryCompactCard$2, _rollupPluginBabelHelpers._extends({
+    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
+  }, getReferenceProps()), React__default["default"].createElement(Reference, {
+    ref: refs.setReference
+  }, asset.previewUrl && renderPreview(asset)), React__default["default"].createElement(Overlay$1, _rollupPluginBabelHelpers._extends({
+    ref: overlayCompactRef,
+    onMouseEnter: mouseHasEnteredOverlay,
+    onMouseLeave: mouseHasLeftOverlay,
+    style: {
+      height: '100%'
+    }
+  }, getReferenceProps()), React__default["default"].createElement(OverlayBackdrop$1, {
+    softSelected: softSelected,
+    selected: selected
+  }), asset?.actions && React__default["default"].createElement(OverlayInfoTopActions$1, {
+    $isOverlayHovered: isOverlayHovered
+  }, React__default["default"].createElement(AssetActionsBase, {
+    actions: asset.actions,
+    asset: asset
+  })), React__default["default"].createElement(OverlayInfo$1, null, isOverlayHovered && React__default["default"].createElement("span", null, asset.title), React__default["default"].createElement(OverlayInfoTop$1, null, React__default["default"].createElement(OverlayInfoTopLeft, {
+    collapseExtraInfo: collapseExtraInfo
+  }, renderBadge()), asset?.note?.title && React__default["default"].createElement(OverlayInfoTopWarning$1, {
+    type: asset?.note?.type
+  }, React__default["default"].createElement(Instructions.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,
+    customSelectedBorder: customSelectedBorder
+  }), isOpen && isOverlayHovered && isMounted && activeSummaryCard && !isAnySubActionsOpened && React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
+    ref: refs.setFloating,
+    style: floatingStyles
+  }, getFloatingProps()), React__default["default"].createElement("div", {
+    style: styles,
+    className: "floating"
+  }, renderPopoverContent(), React__default["default"].createElement(StyledFloatingArrow$1, {
+    ref: arrowRef,
+    context: context,
+    width: ARROW_WIDTH,
+    height: ARROW_HEIGHT
+  })))), asset.overlay && React__default["default"].createElement(ConsumerDefinedOverlay$1, null, asset.overlay)));
+};
+AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  asset: defaultTheme.PropTypes.shape(assetShapeWithLayout).isRequired,
+  hasHeightAndWidth: defaultTheme.PropTypes.bool,
+  selectable: defaultTheme.PropTypes.bool,
+  selected: defaultTheme.PropTypes.bool,
+  customSelectedBorder: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string),
+  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,
+  activeSummaryCard: defaultTheme.PropTypes.bool,
+  displayIcon: defaultTheme.PropTypes.oneOf(['dynamic', 'versions', 'verifications', ''])
+} : {};
+var AssetGalleryCompactCard$1 = build.exports.trackWindowScroll(React__default["default"].memo(AssetGalleryCompactCard, (prevProps, nextProps) => {
+  const reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth', 'collapseExtraInfo'];
+  return reactiveProps.every(propKey => lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey));
+}));
+
+const AssetGalleryWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  ${props => props.disabled && styled.css`
+      cursor: not-allowed;
+    `};
+`;
+const AssetGalleryGridCard$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: block;
+  position: relative;
+  height: 100%;
+  margin: 0;
+  box-sizing: border-box;
+  border-width: ${props => {
+  const {
+    selected,
+    softSelected,
+    hasError,
+    completed
+  } = props;
+  return selected || softSelected || hasError || completed ? 3 : 1;
+}}px;
+  border-style: solid;
+  text-decoration: none;
+  cursor: pointer;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'))}
+
+  ${props => props.disabled && styled.css`
+      pointer-events: none;
+      opacity: 0.4;
+    `};
+
+  ${props => props.extendedSelectMode && styled.css`
+      cursor: pointer;
+    `}
+
+  ${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) {
+    if (props.customSelectedBorder) {
+      return props.theme.themeProp('border-color', props.customSelectedBorder[0], props.customSelectedBorder[1]);
+    } else {
+      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'));
+}};
+`;
+const ContentWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: ${props => props.selected || props.softSelected ? 4 : 0}px;
+  padding-top: 35px;
+  height: 100%;
+`;
+const Asset = styled__default["default"].div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  padding: 0 36px;
+  min-height: 200px;
+  box-sizing: border-box;
+
+  video {
+    display: block;
+  }
+
+  .audio {
+    display: flex;
+    justify-content: center;
+    svg {
+      width: 25%;
+    }
+  }
+`;
+const Figure = styled__default["default"].figure`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin: 0;
+
+  img,
+  video,
+  .audio {
+    display: block;
+    max-height: 200px;
+    width: 100%;
+    box-sizing: border-box;
+
+    ${props => props.hasHeightAndWidth ? styled.css`
+            object-fit: cover;
+          ` : styled.css`
+            object-fit: contain;
+          `}
+  }
+
+  .audio {
+    display: flex;
+    height: 200px;
+    justify-content: center;
+    svg {
+      width: 25%;
+    }
+  }
+`;
+const FigureOverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  inset: 0;
+  opacity: ${props => props.selected ? 0.6 : 0};
+  background-color: ${props => props.selected ? '#ACCEF7' : 'transparent'};
+`;
+const Overlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`;
+const OverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  transition: opacity 220ms;
+  ${props => !props.selected ? styled.css`
+          background: radial-gradient(
+            ellipse at center,
+            rgba(0, 0, 0, 0.3) 27%,
+            rgba(0, 0, 0, 0.5) 60%,
+            rgba(0, 0, 0, 0.7) 90%
+          );
+        ` : null}
+
+  ${props => (props.selected || props.softSelected) && styled.css`
+      opacity: 1;
+    `}
+
+  ${Overlay}:hover & {
+    opacity: 1;
+  }
+
+  ${AssetGalleryGridCard$2}:hover & {
+    opacity: 1;
+  }
+`;
+const OverlayInfo = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 15px 12px 10px;
+  color: ${props => props.theme.getColor('gray-100')};
+`;
+const OverlaySelected = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+`;
+const OverlayInfoTop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  padding: 8px;
+  display: flex;
+`;
+const OverlayInfoTopVersions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  opacity: 1;
+
+  ${AssetGalleryGridCard$2}:hover & {
+    opacity: 0;
+  }
+`;
+const OverlayInfoTopWarning = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  margin-left: auto;
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  padding: ${props => props.type === 'error' ? 0 : '4px'};
+  background-color: ${props => props.type === 'error' ? props.theme.getColor('red-500') : props.theme.getColor('gray-100')};
+  opacity: 1;
+
+  svg {
+    width: 100%;
+    color: ${props => props.type === 'error' ? props.theme.getColor('gray-100') : props.theme.getColor('gray-700')};
+  }
+
+  ${AssetGalleryGridCard$2}:hover & {
+    opacity: 0;
+  }
+`;
+const OverlayInfoTopActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: opacity 220ms;
+  z-index: 99999;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'))}
+
+  opacity: ${props => props.isCardHovered ? 1 : 0};
+`;
+const OverlayInfoBottom = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 8px;
+  display: flex;
+`;
+const OverlayInfoBottomSelectButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  opacity: ${props => props.selected ? 1 : 0};
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: opacity 220ms;
+
+  > svg {
+    width: 23px;
+    height: 100%;
+    transition: opacity 120ms;
+    opacity: ${props => props.selected ? 1 : 0.5};
+  }
+
+  ${Overlay}:hover & {
+    opacity: 1;
+  }
+
+  ${AssetGalleryGridCard$2}:hover & {
+    opacity: 1;
+  }
+`;
+const OverlayInfoBottomMediaIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  margin-left: auto;
+  opacity: 1;
+  ${AssetGalleryGridCard$2}:hover & {
+    opacity: 0;
+  }
+`;
+const ConsumerDefinedOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+`;
+const Fragment = styled__default["default"].div`
+  margin: 4px;
+`;
+
+const ComputedRootComponent = ({
+  component,
+  asset,
+  ...props
+}) => {
+  const newProps = lodash.mapKeys(lodash.omit(props, ['theme', 'extendedSelectMode']), (_, key) => 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, _rollupPluginBabelHelpers._extends({
+    ref: newProps.ref
+  }, newProps));
+};
+const ComputedActionButton = React__default["default"].forwardRef(function ComputedActionButton({
+  component,
+  className,
+  subActions = [],
+  isSubActionsOpened,
+  ...props
+}, forwardedRef) {
+  const newProps = props;
+  if (!lodash.isEmpty(subActions)) {
+    const contextMenuItems = subActions.map((subAction, key) => {
+      const {
+        onClick,
+        title,
+        icon
+      } = subAction;
+      return React__default["default"].createElement(ContextMenuItem.ContextMenuItem, {
+        key: key,
+        onClickEffect: onClick,
+        title: title,
+        icon: icon
+      });
+    });
+    const 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,
+      actionWidthHeight: newProps.actionWidthHeight
+    }));
+  } 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'],
+      actionWidthHeight: newProps.actionWidthHeight
+    });
+  }
+  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(), {
+        ...lodash.omit(newProps, 'icon')
+      });
+    }
+  }
+  return React__default["default"].createElement(React__default["default"].Fragment, null, newProps.children);
+});
+const AssetGalleryGridCard = props => {
+  const {
+    asset,
+    selectable,
+    selected,
+    customSelectedBorder,
+    extendedSelectMode,
+    onAssetSelected,
+    onAssetUnselected,
+    softSelected,
+    component,
+    scrollPosition
+  } = props;
+  const [isCardHovered, setIsCardHovered] = React__default["default"].useState(false);
+  const [openedSubActions, updateOpenedSubActions] = React__default["default"].useState([]);
+  React.useEffect(() => {
+    const newOpenedSubActions = (asset?.actions ?? []).map(() => false);
+    updateOpenedSubActions(newOpenedSubActions);
+  }, [asset]);
+  React.useEffect(() => {
+    if (!isCardHovered && openedSubActions?.length) {
+      updateOpenedSubActions(openedSubActions.map(() => false));
+    }
+  }, [isCardHovered]);
+  const mouseHasEnteredCard = React.useCallback(() => {
+    setIsCardHovered(true);
+  }, []);
+  const mouseHasLeftCard = React.useCallback(() => {
+    setIsCardHovered(false);
+  }, []);
+  const onSubActionsViewToggle = React.useCallback(actionIndex => {
+    const newOpenedSubActions = openedSubActions.map((isOpened, index) => {
+      if (index !== actionIndex) {
+        return false;
+      }
+      return !isOpened;
+    });
+    updateOpenedSubActions(newOpenedSubActions);
+  }, [openedSubActions]);
+  const videoPlayerRef = React.useRef();
+  const cardRef = React.useRef();
+  const dragRef = React.useRef(null);
+  function onMouseEnter(event) {
+    if (videoPlayerRef.current) {
+      const playPromise = videoPlayerRef.current.play();
+      if (playPromise !== undefined) {
+        playPromise.then(() => {}).catch(() => {});
+      }
+    }
+    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);
+  }
+  const onActionClick = React.useCallback((event, action, index) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (lodash.isFunction(action?.onClick)) {
+      action.onClick(asset);
+    }
+    if (!lodash.isEmpty(action?.subActions)) {
+      onSubActionsViewToggle(index);
+    }
+  }, [onSubActionsViewToggle]);
+  const shouldOpenSubActions = React.useCallback(actionIndex => openedSubActions[actionIndex], [openedSubActions]);
+  function onContextMenu(event) {
+    event.preventDefault();
+    asset.onContextMenu(event);
+  }
+  function renderPreview(asset) {
+    let previewContent = null;
+    if (asset.fileType?.toLowerCase() === 'video') {
+      previewContent = React__default["default"].createElement(build.exports.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.fileType?.toLowerCase() === 'audio') {
+      previewContent = React__default["default"].createElement(build.exports.LazyLoadComponent, {
+        scrollPosition: scrollPosition
+      }, React__default["default"].createElement("div", {
+        className: "audio"
+      }, React__default["default"].createElement(SvgHeadset, null)));
+    } else {
+      previewContent = React__default["default"].createElement(build.exports.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?.note?.title && React__default["default"].createElement(OverlayInfoTopWarning, {
+      type: asset?.note?.type
+    }, React__default["default"].createElement(Instructions.SvgWarningCircle, null)), React__default["default"].createElement(OverlayInfoTopActions, {
+      isCardHovered: isCardHovered
+    }, asset.actions && asset.actions.map((action, index) => React__default["default"].createElement(Tooltip.Tooltip, {
+      key: `${asset.key}-${action.title}`,
+      content: action.title
+    }, React__default["default"].createElement(Fragment, {
+      key: `${asset.key}-${action.title}`,
+      as: ComputedActionButton,
+      component: action.component,
+      className: action.className,
+      icon: action.icon,
+      isCardHovered: isCardHovered,
+      isSubActionsOpened: shouldOpenSubActions(index),
+      onClick: event => onActionClick(event, action, index),
+      subActions: action?.subActions,
+      actionWidthHeight: action.actionWidthHeight
+    }))))), 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,
+      customSelectedBorder: customSelectedBorder
+    })), asset.overlay && React__default["default"].createElement(ConsumerDefinedOverlay, null, asset.overlay));
+  }
+  React.useEffect(() => {
+    if (lodash.isFunction(asset.onContextMenu)) {
+      if (cardRef.current) {
+        cardRef.current.addEventListener('contextmenu', onContextMenu);
+      }
+      return () => {
+        if (cardRef.current) {
+          cardRef.current.removeEventListener('contextmenu', onContextMenu);
+        }
+      };
+    }
+  }, []);
+  function onDragstart(event) {
+    asset.onDragstart(event);
+  }
+  React.useEffect(() => {
+    if (lodash.isFunction(asset.onDragstart)) {
+      if (dragRef.current) {
+        dragRef.current.addEventListener('dragstart', onDragstart);
+      }
+      return () => {
+        if (dragRef.current) {
+          dragRef.current.removeEventListener('dragstart', onDragstart);
+        }
+      };
+    }
+  }, []);
+  React.useEffect(() => {
+    if (softSelected) {
+      cardRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      });
+    }
+  }, [softSelected]);
+  const renderVersionsBadge = React.useCallback(() => {
+    if (!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]);
+  const renderMediaBadge = React.useCallback(() => {
+    let badgeIcon = null;
+    let badgeContent = null;
+    if (asset?.fileType === 'video') {
+      badgeIcon = React__default["default"].createElement(SvgPlay, null);
+    }
+    if (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]);
+  const renderSummary = React.useCallback(() => {
+    return React__default["default"].createElement(SummaryCard, {
+      activeSummaryCard: true,
+      title: asset?.title || '',
+      description: asset?.description || '',
+      instructions: asset?.imageRights || '',
+      instructionsType: 'warning',
+      footerLeft: asset?.summary?.footerLeft || '',
+      footerRight: asset?.summary?.footerRight || '',
+      compact: false
+    });
+  }, [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?.completed,
+    $hasError: asset?.hasError,
+    customSelectedBorder: customSelectedBorder
+  }, React__default["default"].createElement(ContentWrapper, {
+    layout: asset.layout,
+    ref: cardRef,
+    $softSelected: softSelected,
+    selected: selected,
+    customSelectedBorder: customSelectedBorder
+  }, 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,
+  customSelectedBorder: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string),
+  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 = build.exports.trackWindowScroll(React__default["default"].memo(AssetGalleryGridCard, (prevProps, nextProps) => {
+  const reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
+  return reactiveProps.every(propKey => lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey));
+}));
+
+const AssetGalleryBase = React__default["default"].forwardRef(function AssetGalleryBase({
+  assets: assetsProp,
+  activeSummaryCard,
+  displayIcon,
+  viewMode,
+  thumbnailMaxHeight,
+  selectable,
+  customSelectedBorder,
+  selectedAssetKeys,
+  onAssetSelected,
+  onAssetUnselected,
+  softSelectable,
+  softSelectedAssetKey,
+  scrollElement: scrollElementProp,
+  onAssetSoftSelectedChanged,
+  component,
+  ...props
+}, forwardedRef) {
+  const assetGalleryDOMNode = React.useRef();
+  const assetGalleryCompactRef = useMergedRefs__default["default"](forwardedRef, assetGalleryDOMNode);
+  const assetGalleryWidth = React.useRef(0);
+  const minimumRowAspectRatio = React.useRef(0);
+  const calculatedAssets = React.useRef([]);
+  const [assets, setAssets] = React.useState([]);
+  const MAXIMUM_ROW_HEIGHT = React.useMemo(() => viewMode === 'grid' ? 450 : thumbnailMaxHeight, [viewMode, thumbnailMaxHeight]);
+  const SPACE_BETWEEN_ASSETS = 8;
+  const SPACE_UNDER_ASSETS = 8;
+  const PRIMARY_SCROLL_BUFFER_HEIGHT = 1500;
+  const SECONDARY_SCROLL_BUFFER_HEIGHT = 500;
+  const GRID_VIEW_MODE_ASSET_MIN_WIDTH = 300;
+  const GRID_VIEW_MODE_ASSET_HEIGHT = 427;
+  const MISSING_WIDTH_PLACEHOLDER = 1920;
+  const MISSING_HEIGHT_PLACEHOLDER = 1080;
+  const isBrowser = typeof window !== 'undefined';
+  const scrollElement = scrollElementProp || window;
+  const previousYOffset = React.useRef(isBrowser ? scrollElement.pageYOffset : 0);
+  const latestYOffset = React.useRef(isBrowser ? scrollElement.pageYOffset : 0);
+  const scrollDirection = React.useRef('down');
+  MultiLevelCheckboxSelect.useIsomorphicLayoutEffect(() => {
+    if (!assetGalleryDOMNode.current) return;
+    const throttledOnResize = lodash.throttle(onResize, 1);
+    const resizeObserver = new ResizeObserver__default["default"](throttledOnResize);
+    resizeObserver.observe(assetGalleryDOMNode.current);
+    function onResize(entries) {
+      entries.forEach(entry => {
+        if (assetGalleryWidth.current === entry.contentRect.width) return;
+        window.requestAnimationFrame(() => {
+          assetGalleryWidth.current = entry.contentRect.width;
+          main();
+        });
+      });
+    }
+    return () => {
+      resizeObserver.unobserve(assetGalleryDOMNode.current);
+    };
+  }, [assetsProp, assetGalleryDOMNode, MAXIMUM_ROW_HEIGHT]);
+  React.useEffect(() => {
+    main();
+  }, [MAXIMUM_ROW_HEIGHT, assetsProp]);
+  const main = () => {
+    calculateAssetGalleryAspectRatio();
+    calculateLayout();
+    calculateVisibility();
+  };
+  const calculateAssetGalleryAspectRatio = () => {
+    if (assetGalleryWidth.current > 0) {
+      minimumRowAspectRatio.current = calculateAspectRatio(assetGalleryWidth.current, MAXIMUM_ROW_HEIGHT);
+    }
+  };
+  const calculateLayout = () => {
+    const assetsWithoutAKey = assetsProp.filter(a => !a.key);
+    if (assetsWithoutAKey.length > 0) {
+      assetsProp = assetsProp.filter(a => a.key);
+      assetsWithoutAKey.forEach(a => console.warn('Omitted asset from the gallery because it was missing the unique `key` property.', a));
+    }
+    if (viewMode === 'grid' && assetGalleryWidth.current > 0) {
+      let row = [];
+      let translateX = 0;
+      let translateY = 0;
+      const computedAssets = [];
+      let lastGroup = null;
+      const desiredAssetCountInRow = Math.floor(assetGalleryWidth.current / GRID_VIEW_MODE_ASSET_MIN_WIDTH) || 1;
+      const desiredAssetWidth = assetGalleryWidth.current / desiredAssetCountInRow - SPACE_BETWEEN_ASSETS + SPACE_BETWEEN_ASSETS / desiredAssetCountInRow;
+      assetsProp.forEach((asset, index) => {
+        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[index + 1]?.group && assetsProp[index + 1].group !== asset.group) {
+          row.forEach(rowAsset => {
+            computedAssets.push({
+              ...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) {
+        let row = [];
+        let translateX = 0;
+        let translateY = 0;
+        let rowAspectRatio = 0;
+        let lastGroup = null;
+        const computedAssets = [];
+        assetsProp.forEach((asset, index) => {
+          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 || assetsProp[index + 1]?.group && assetsProp[index + 1].group !== asset.group) {
+            rowAspectRatio = Math.max(rowAspectRatio, minimumRowAspectRatio.current);
+            const totalDesiredWidthOfImages = assetGalleryWidth.current - SPACE_BETWEEN_ASSETS * (row.length - 1);
+            const rowHeight = totalDesiredWidthOfImages / rowAspectRatio;
+            row.forEach(rowAsset => {
+              const assetWidth = rowHeight * calculateAspectRatio(rowAsset.width || MISSING_WIDTH_PLACEHOLDER, rowAsset.height || MISSING_HEIGHT_PLACEHOLDER);
+              computedAssets.push({
+                ...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;
+  }
+  const totalGalleryHeight = React.useMemo(() => {
+    if (assets.length === 0) {
+      return 0;
+    }
+    const lastAsset = assets[assets.length - 1];
+    if (assets.length < 8) {
+      return (lastAsset.layout.translateY + lastAsset.layout.height) * 2;
+    }
+    return lastAsset.layout.translateY + lastAsset.layout.height;
+  }, [assets]);
+  React.useEffect(() => {
+    const throttledOnScroll = lodash.throttle(onScroll, 200);
+    scrollElement.addEventListener('scroll', throttledOnScroll, false);
+    return () => scrollElement.removeEventListener('scroll', throttledOnScroll, false);
+  }, [assetGalleryDOMNode, calculatedAssets]);
+  function onScroll() {
+    setScrollPositionAndDirection();
+    calculateVisibility();
+  }
+  function setScrollPositionAndDirection() {
+    const newYOffset = scrollElement.pageYOffset;
+    previousYOffset.current = latestYOffset.current;
+    latestYOffset.current = newYOffset;
+    scrollDirection.current = latestYOffset.current > previousYOffset.current ? 'down' : 'up';
+  }
+  const calculateVisibility = () => {
+    if (!assetGalleryDOMNode.current) return;
+    const bufferTop = scrollDirection.current === 'up' ? PRIMARY_SCROLL_BUFFER_HEIGHT : SECONDARY_SCROLL_BUFFER_HEIGHT;
+    const bufferBottom = scrollDirection.current === 'up' ? SECONDARY_SCROLL_BUFFER_HEIGHT : PRIMARY_SCROLL_BUFFER_HEIGHT;
+    const containerOffset = getOffsetTop(assetGalleryDOMNode.current);
+    const scrollerHeight = scrollElement.innerHeight;
+    const yOffset = latestYOffset.current;
+    const minTranslateYPlusHeight = yOffset - containerOffset - bufferTop;
+    const maxTranslateY = yOffset - containerOffset + scrollerHeight + bufferBottom;
+    const finalizedAssets = calculatedAssets.current.map(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) {
+    let offsetTop = 0;
+    do {
+      if (!isNaN(elem.offsetTop)) {
+        offsetTop += elem.offsetTop;
+      }
+      elem = elem.offsetParent;
+    } while (elem);
+    return offsetTop;
+  }
+  const handleKeyPress = React.useCallback(e => {
+    function isElementVisible(el) {
+      const rect = el.getBoundingClientRect(),
+        vWidth = scrollElement.innerWidth || document.documentElement.clientWidth,
+        vHeight = scrollElement.innerHeight || document.documentElement.clientHeight,
+        efp = function (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() {
+      const visibleAssets = assets.filter(asset => asset.layout.show);
+      for (let 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') {
+      const previousAssetIndex = assets.findIndex(asset => asset.key === softSelectedAssetKey) - 1;
+      const previousAsset = assets[previousAssetIndex];
+      if (previousAsset) {
+        if (previousAsset.layout.show) {
+          onAssetSoftSelectedChanged(previousAsset.key);
+        } else {
+          softSelectFirstVisibleAsset();
+        }
+      }
+      return;
+    }
+    if (e.key === 'ArrowRight') {
+      const nextAssetIndex = assets.findIndex(asset => asset.key === softSelectedAssetKey) + 1;
+      const 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]);
+  const handleClick = React.useCallback(() => {
+    onAssetSoftSelectedChanged(null);
+  }, []);
+  React.useEffect(() => {
+    if (softSelectable) {
+      document.addEventListener('keydown', handleKeyPress);
+    }
+    return () => document.removeEventListener('keydown', handleKeyPress);
+  }, [softSelectable, handleKeyPress]);
+  React.useEffect(() => {
+    if (softSelectable && softSelectedAssetKey !== null) {
+      document.addEventListener('click', handleClick, true);
+    }
+    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, _rollupPluginBabelHelpers._extends({
+    ref: assetGalleryCompactRef,
+    style: {
+      height: `${totalGalleryHeight}px`
+    },
+    className: props.className
+  }, props), assets.map(asset => asset.layout.show && React__default["default"].createElement(React__default["default"].Fragment, {
+    key: `asset-gallery-${asset.layout.type}-${asset.key}`
+  }, asset.layout.type === 'groupLabel' && React__default["default"].createElement(GroupLabel, {
+    style: {
+      transform: `translate3d(${asset.layout.translateX}px,${asset.layout.translateY}px, 0)`,
+      height: `${asset.layout.height}px`
+    }
+  }, asset.title), asset.layout.type === 'asset' && React__default["default"].createElement(AssetGalleryCardBase, {
+    style: {
+      transform: `translate3d(${asset.layout.translateX}px, ${asset.layout.translateY}px, 0)`,
+      width: `${asset.layout.width}px`,
+      height: `${asset.layout.height}px`,
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, viewMode === 'grid' ? React__default["default"].createElement(AssetGalleryGridCard$1, {
+    asset: asset,
+    selectable: 'selectable' in asset ? asset.selectable : selectable,
+    selected: selectedAssetKeys.includes(asset.key),
+    customSelectedBorder: customSelectedBorder,
+    extendedSelectMode: Boolean(selectedAssetKeys.length),
+    onAssetSelected: onAssetSelected,
+    onAssetUnselected: onAssetUnselected,
+    $softSelected: softSelectedAssetKey === asset.key,
+    component: component
+  }) : React__default["default"].createElement(AssetGalleryCompactCard$1, {
+    asset: asset,
+    activeSummaryCard: activeSummaryCard,
+    displayIcon: displayIcon,
+    $hasHeightAndWidth: asset.layout.hasHeightAndWidth,
+    $collapseExtraInfo: asset.layout.width < 90,
+    selectable: 'selectable' in asset ? asset.selectable : selectable,
+    selected: selectedAssetKeys.includes(asset.key),
+    customSelectedBorder: customSelectedBorder,
+    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)),
+  activeSummaryCard: defaultTheme.PropTypes.bool,
+  displayIcon: defaultTheme.PropTypes.string,
+  viewMode: defaultTheme.PropTypes.oneOf(['compact', 'grid']),
+  thumbnailMaxHeight: defaultTheme.PropTypes.number,
+  selectable: defaultTheme.PropTypes.bool,
+  customSelectedBorder: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string),
+  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
+} : {};
+
+const AssetGallery = React__default["default"].forwardRef(function AssetGallery({
+  assets,
+  activeSummaryCard,
+  viewMode,
+  thumbnailMaxHeight,
+  selectable,
+  customSelectedBorder,
+  selectedAssetKeys,
+  onSelectedChanged,
+  softSelectable,
+  scrollElement,
+  onSoftSelectedChanged,
+  component,
+  displayIcon,
+  ...props
+}, forwardedRef) {
+  const [selectedAssetKeysInternalState, setSelectedAssetKeysInternalState] = React.useState(selectedAssetKeys || []);
+  const [softSelectedAssetKeyInternalState, setSoftSelectedAssetKeyInternalState] = React.useState(null);
+  React.useEffect(() => {
+    setSelectedAssetKeysInternalState(selectedAssetKeys || []);
+  }, [selectedAssetKeys]);
+  React.useEffect(() => {
+    setSelectedAssetKeysInternalState(current => {
+      return current.filter(c => assets.some(a => a.key === c));
+    });
+  }, [assets.length]);
+  React.useEffect(() => {
+    if (selectedAssetKeys === selectedAssetKeysInternalState) return;
+    if (lodash.isFunction(onSelectedChanged)) {
+      onSelectedChanged(selectedAssetKeysInternalState);
+    }
+  }, [selectedAssetKeysInternalState]);
+  React.useEffect(() => {
+    if (lodash.isFunction(onSoftSelectedChanged)) {
+      onSoftSelectedChanged(softSelectedAssetKeyInternalState);
+    }
+  }, [softSelectedAssetKeyInternalState]);
+  const onSelected = React.useCallback(assetKey => {
+    setSelectedAssetKeysInternalState(currentState => [...currentState, assetKey]);
+  }, []);
+  const onUnselected = React.useCallback(assetKey => {
+    setSelectedAssetKeysInternalState(currentState => currentState.filter(filteredAssetKey => filteredAssetKey !== assetKey));
+  }, []);
+  const onAssetSoftSelectedChanged = React.useCallback((assetKey = null) => {
+    setSoftSelectedAssetKeyInternalState(assetKey);
+  }, []);
+  return React__default["default"].createElement(AssetGalleryBase, _rollupPluginBabelHelpers._extends({
+    ref: forwardedRef,
+    assets: assets,
+    activeSummaryCard: activeSummaryCard,
+    displayIcon: displayIcon,
+    thumbnailMaxHeight: thumbnailMaxHeight,
+    selectable: selectable,
+    customSelectedBorder: customSelectedBorder,
+    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)),
+  displayIcon: defaultTheme.PropTypes.string,
+  activeSummaryCard: defaultTheme.PropTypes.bool,
+  viewMode: defaultTheme.PropTypes.oneOf(['compact', 'grid']),
+  thumbnailMaxHeight: defaultTheme.PropTypes.number,
+  selectable: defaultTheme.PropTypes.bool,
+  customSelectedBorder: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string),
+  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: [],
+  customSelectedBorder: [],
+  activeSummaryCard: false,
+  displayIcon: ''
+};
+
+const AssetAction$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+`;
+const AssetActionButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  border-radius: 50%;
+  width: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[0]}px` : 'auto'};
+  height: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[1]}px` : 'auto'};
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
+  svg {
+    pointer-events: none;
+    width: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[0] - 14}px` : 'auto'};
+    height: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[1] - 14}px` : 'auto'};
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
+  }
+`;
+const ActionTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 8px 12px;
+  white-space: nowrap;
+  color: white;
+  background: ${props => props.theme.getColor('gray-700')};
+`;
+const StyledFloatingArrow = styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)`
+  fill: ${props => props.theme.getColor('gray-700')};
+`;
+const Floating = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  pointer-events: none;
+`;
+
+const AssetAction = React__default["default"].forwardRef(function AssetAction({
+  action,
+  asset,
+  itemKey,
+  ...props
+}, forwardedRef) {
+  const ARROW_WIDTH = 10;
+  const ARROW_HEIGHT = 5;
+  const GAP = 3;
+  const arrowRef = React.useRef(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [placement] = React.useState('bottom');
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = react.useFloating({
+    placement,
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: react.autoUpdate,
+    middleware: [react.offset(ARROW_HEIGHT + GAP), react.flip({
+      padding: 5
+    }), react.shift({
+      padding: 5
+    }), react.arrow({
+      element: arrowRef
+    })]
+  });
+  const {
+    isMounted,
+    styles
+  } = react.useTransitionStyles(context, {
+    initial: {
+      transform: 'translateY(-8px)',
+      opacity: 0
+    },
+    duration: {
+      open: 200,
+      close: 100
+    }
+  });
+  const hover = react.useHover(context);
+  const dismiss = react.useDismiss(context, {
+    referencePress: true
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = react.useInteractions([dismiss, hover]);
+  const onActionClick = React.useCallback((e, action) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (lodash.isFunction(action?.onClick)) {
+      action.onClick(asset);
+    }
+  }, [action]);
+  return React__default["default"].createElement(AssetAction$2, _rollupPluginBabelHelpers._extends({
+    ref: forwardedRef
+  }, props), React__default["default"].createElement(AssetActionButton, _rollupPluginBabelHelpers._extends({
+    key: itemKey,
+    ref: refs.setReference
+  }, getReferenceProps(), {
+    onClick: e => onActionClick(e, action.onClick(asset), itemKey),
+    actionWidthHeight: action.actionWidthHeight
+  }), action.icon), isOpen && isMounted && React__default["default"].createElement(Floating, _rollupPluginBabelHelpers._extends({
+    className: "floating",
+    ref: refs.setFloating,
+    style: floatingStyles
+  }, getFloatingProps()), React__default["default"].createElement(ActionTitle, {
+    style: styles
+  }, action.title), React__default["default"].createElement(StyledFloatingArrow, {
+    ref: arrowRef,
+    context: context,
+    width: ARROW_WIDTH,
+    height: ARROW_HEIGHT
+  })));
+});
+AssetAction.propTypes = process.env.NODE_ENV !== "production" ? {
+  action: defaultTheme.PropTypes.shape({
+    icon: defaultTheme.PropTypes.node,
+    onClick: defaultTheme.PropTypes.func,
+    actionWidthHeight: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.number),
+    title: defaultTheme.PropTypes.string
+  }),
+  asset: defaultTheme.PropTypes.object,
+  itemKey: defaultTheme.PropTypes.string
+} : {};
+AssetAction.defaultProps = {};
+var AssetAction$1 = AssetAction;
+
+exports.AssetAction = AssetAction$1;
+exports.AssetActionsBase = AssetActionsBase;
+exports.AssetGallery = AssetGallery;
+exports.SummaryCard = SummaryCard;