@ntbjs/react-components 2.0.0-rc.29 → 2.0.0-rc.30

package/build/AssetGallery-63f721ec.js

@@ -1,1981 +0,0 @@
-import { _ as _extends$4 } from './_rollupPluginBabelHelpers-c245b26a.js';
-import { get, isFunction, mapKeys, omit, isEmpty, throttle } from 'lodash';
-import { P as PropTypes, a as applyDefaultTheme, s as styleInject } from './defaultTheme-1bcc2541.js';
-import * as React from 'react';
-import React__default, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
-import useMergedRefs from '@restart/hooks/useMergedRefs';
-import ResizeObserver from 'resize-observer-polyfill';
-import { u as useIsomorphicLayoutEffect } from './MultiLevelCheckboxSelect-d8044c88.js';
-import styled, { css } from 'styled-components';
-import { S as SvgWarningCircle } from './warning-circle-24f3efcd.js';
-import './Alert-e6847a22.js';
-import { B as Badge } from './Badge-d93586a9.js';
-import { P as Popover } from './Popover-20050b91.js';
-import './Tab-04d435c3.js';
-import './Tabs-74d1ea8a.js';
-import { T as Tooltip } from './Tooltip-c1d1199e.js';
-import './VerificationStatusIcon-49cb1c1b.js';
-import { S as SummaryCard } from './SummaryCard-24040650.js';
-import { rgba } from 'polished';
-import { FloatingArrow, useFloating, autoUpdate, offset, flip, shift, arrow, useTransitionStyles, useHover, useDismiss, useInteractions, useMergeRefs } from '@floating-ui/react';
-import { A as AssetActionsBase } from './AssetActionsBase-9e4c0735.js';
-import { A as ActionButton } from './ActionButton-4db754c3.js';
-import './Button-73eb8516.js';
-import './Checkbox-4a5fd716.js';
-import './CompactAutocompleteSelect-52c49513.js';
-import './CompactStarRating-9af2f427.js';
-import './CompactTextInput-42ca5d42.js';
-import './MultiSelect-9f497e62.js';
-import './Radio-73ca3ae2.js';
-import './TextArea-1e5b9201.js';
-import './TextInput-fab35842.js';
-import './Switch-ecf3122b.js';
-import { C as ContextMenu } from './ContextMenu-0f7134e4.js';
-import { C as ContextMenuItem } from './ContextMenuItem-ea411141.js';
-
-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.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.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.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.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.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "-1 0 24 24"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.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.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "-3 -0.25 24 24"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M0 23.52V0l18.48 11.76L0 23.52z"
-  })));
-}
-
-const assetShape = {
-  key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  previewUrl: PropTypes.string,
-  title: PropTypes.string,
-  note: PropTypes.shape({
-    icon: PropTypes.element,
-    message: PropTypes.string
-  }),
-  width: PropTypes.number,
-  height: PropTypes.number,
-  fileType: PropTypes.oneOf(['image', 'video', 'pdf', 'file', 'audio']).isRequired,
-  fileTypeIconPosition: PropTypes.oneOf(['top-left', 'top-right']),
-  group: PropTypes.string,
-  actions: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    icon: PropTypes.element.isRequired,
-    onClick: PropTypes.func.isRequired,
-    className: PropTypes.shape,
-    component: PropTypes.func
-  })),
-  overlay: PropTypes.element,
-  completed: PropTypes.bool,
-  hasError: PropTypes.bool,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  onContextMenu: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  summary: PropTypes.shape({
-    title: PropTypes.string,
-    description: PropTypes.string,
-    instructions: PropTypes.string,
-    instructionsType: PropTypes.oneOf(['warning', 'error', 'info']),
-    headerLeft: PropTypes.node,
-    headerRight: PropTypes.node,
-    footerLeft: PropTypes.node,
-    footerRight: PropTypes.node
-  })
-};
-const assetShapeWithLayout = {
-  ...assetShape,
-  layout: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
-    translateX: PropTypes.number.isRequired,
-    translateY: PropTypes.number.isRequired,
-    type: PropTypes.oneOf(['groupLabel', 'asset']).isRequired,
-    hasHeightAndWidth: PropTypes.bool
-  }).isRequired
-};
-
-const AssetGalleryBase$1 = styled.div.attrs(applyDefaultTheme)`
-  position: relative;
-`;
-const GroupLabel = styled.div.attrs(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.div.attrs(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;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";
-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 = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const AssetGalleryWrapper$1 = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  ${props => props.disabled && css`
-      cursor: not-allowed;
-    `};
-`;
-const Reference = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  width: 100%;
-  height: 100%;
-`;
-const AssetGalleryCompactCard$2 = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(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 && css`
-      pointer-events: none;
-      opacity: 0.4;
-    `};
-
-  ${props => props.extendedSelectMode && css`
-      cursor: pointer;
-    `}
-  video {
-    width: 100%;
-    height: 100%;
-  }
-
-  .audio {
-    display: flex;
-    justify-content: center;
-    svg {
-      width: 25%;
-    }
-  }
-`;
-const Figure$1 = styled.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 ? css`
-            object-fit: cover;
-          ` : css`
-            object-fit: contain;
-          `}
-  }
-`;
-const FigureOverlayBackdrop$1 = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: absolute;
-  inset: 0;
-  opacity: ${props => props.selected ? 0.6 : 0};
-  background-color: ${props => props.selected ? '#ACCEF7' : 'transparent'};
-`;
-const Overlay$1 = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-`;
-const OverlayBackdrop$1 = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  opacity: 0;
-  transition: opacity 220ms;
-
-  ${props => !props.selected ? 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) && css`
-      opacity: 1;
-    `}
-    ${Overlay$1}:hover & {
-    opacity: 1;
-  }
-`;
-const OverlayInfo$1 = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(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.div.withConfig({
-  shouldForwardProp
-}).attrs(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'), rgba(props.theme.getColor('emerald-500'), 0.7));
-}};
-`;
-const OverlayHasError = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(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'), rgba(props.theme.getColor('red-500'), 0.7));
-}}
-`;
-const OverlaySelected$1 = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(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', rgba(props.theme.getColor('gray-100'), 0.5), 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.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  padding: 8px;
-  display: flex;
-`;
-const OverlayInfoTopActions$1 = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(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.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  opacity: 1;
-  display: ${props => props?.$collapseExtraInfo ? 'none' : 'block'};
-
-  ${Overlay$1}:hover & {
-    opacity: 0;
-  }
-`;
-const OverlayInfoTopWarning$1 = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(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.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 8px;
-  display: flex;
-`;
-const OverlayInfoBottomSelectButton$1 = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(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.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  margin-left: auto;
-  opacity: 1;
-
-  ${Overlay$1}:hover & {
-    opacity: 0;
-  }
-`;
-const ConsumerDefinedOverlay$1 = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-`;
-styled.div`
-  margin: 4px;
-`;
-styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  ${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
-  padding: 4px 8px;
-  border-radius: 4px;
-`;
-const StyledFloatingArrow = styled(FloatingArrow).withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  ${props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
-`;
-
-const ComputedRootComponent$1 = ({
-  component,
-  asset,
-  ...props
-}) => {
-  const newProps = mapKeys(omit(props, ['theme', 'extendedSelectMode']), (_, key) => key === 'innerRef' ? 'ref' : key);
-  if (component) {
-    if (!isFunction(component)) throw Error('Expected a function in component-prop');
-    if (React__default.isValidElement(component(asset, newProps.children))) {
-      return React__default.cloneElement(component(asset, newProps.children), omit(newProps, ['children']));
-    }
-  }
-  return React__default.createElement(AssetGalleryCompactCard$2, _extends$4({
-    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 = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const [placement] = useState('bottom');
-  const [isOverlayHovered, setIsOverlayHovered] = useState(false);
-  const [openedSubActions, updateOpenedSubActions] = useState([]);
-  const {
-    refs,
-    floatingStyles,
-    context
-  } = useFloating({
-    placement,
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [offset(ARROW_HEIGHT + GAP), flip({
-      padding: 5
-    }), shift({
-      padding: 5
-    }), arrow({
-      element: arrowRef
-    })]
-  });
-  const {
-    isMounted,
-    styles
-  } = useTransitionStyles(context, {
-    initial: {
-      transform: 'translateY(-8px)',
-      opacity: 0
-    },
-    duration: {
-      open: 200,
-      close: 100
-    }
-  });
-  const hover = useHover(context, {
-    restMs: 100
-  });
-  const dismiss = useDismiss(context, {
-    referencePress: true,
-    ancestorScroll: true,
-    windowScroll: true,
-    windowBlur: true
-  });
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = useInteractions([dismiss, hover]);
-  useEffect(() => {
-    const newOpenedSubActions = (asset?.actions ?? []).map(() => false);
-    updateOpenedSubActions(newOpenedSubActions);
-  }, [asset]);
-  useEffect(() => {
-    if (!isOverlayHovered && openedSubActions?.length) {
-      updateOpenedSubActions(openedSubActions.map(() => false));
-    }
-  }, [isOverlayHovered]);
-  const mouseHasEnteredOverlay = useCallback(() => {
-    setIsOverlayHovered(true);
-  }, []);
-  const mouseHasLeftOverlay = useCallback(() => {
-    setIsOverlayHovered(false);
-  }, []);
-  const isAnySubActionsOpened = useMemo(() => {
-    return openedSubActions.some(isOpened => isOpened);
-  }, [openedSubActions]);
-  function onClick(event) {
-    if (extendedSelectMode) {
-      return onSelectClick(event);
-    }
-    if (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);
-  }
-  useEffect(() => {
-    if (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);
-  }
-  useEffect(() => {
-    if (isFunction(asset.onDragstart)) {
-      if (dragRef.current) {
-        dragRef.current.addEventListener('dragstart', onDragstart);
-      }
-      return () => {
-        if (dragRef.current) {
-          dragRef.current.removeEventListener('dragstart', onDragstart);
-        }
-      };
-    }
-  }, []);
-  const videoPlayerRef = useRef();
-  const cardRef = useRef();
-  const dragRef = useRef(null);
-  const overlayCompactRef = useMergeRefs([cardRef, refs.setReference]);
-  function onMouseEnter(event) {
-    if (videoPlayerRef.current) {
-      const playPromise = videoPlayerRef.current.play();
-      if (playPromise !== undefined) {
-        playPromise.then(() => {}).catch(() => {});
-      }
-    }
-    if (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.createElement(build.exports.LazyLoadComponent, {
-        scrollPosition: scrollPosition
-      }, React__default.createElement("video", {
-        ref: videoPlayerRef,
-        loop: true,
-        muted: true
-      }, React__default.createElement("source", {
-        src: asset.previewUrl,
-        type: "video/mp4"
-      })));
-    } else if (asset?.fileType?.toLowerCase() === 'audio') {
-      previewContent = React__default.createElement(build.exports.LazyLoadComponent, {
-        scrollPosition: scrollPosition
-      }, React__default.createElement("div", {
-        className: "audio"
-      }, React__default.createElement(SvgHeadset, null)));
-    } else {
-      previewContent = React__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.createElement(Figure$1, {
-      hasHeightAndWidth: hasHeightAndWidth
-    }, previewContent, React__default.createElement(FigureOverlayBackdrop$1, {
-      selected: selected
-    }));
-  };
-  useEffect(() => {
-    if (softSelected) {
-      cardRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest'
-      });
-    }
-  }, [softSelected]);
-  const renderVersionsBadge = useCallback(() => {
-    if (!asset?.versions) return null;
-    return React__default.createElement(Badge, {
-      badgeIcon: React__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 = useCallback(() => {
-    if (!asset?.verifications) return null;
-    return asset?.verifications;
-  }, [asset]);
-  const renderdynamicBadge = 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 = useCallback(() => {
-    let badgeIcon = null;
-    let badgeContent = null;
-    if (asset?.fileType === 'video') {
-      badgeIcon = React__default.createElement(SvgPlay, null);
-    }
-    if (asset?.duration) {
-      badgeContent = convertMsToHMS(asset.duration);
-    }
-    if (!badgeIcon && !badgeContent) return null;
-    return React__default.createElement(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 = useCallback(() => {
-    return React__default.createElement(React__default.Fragment, null, renderVersionsBadge(), renderMediaBadge());
-  }, [asset]);
-  const renderPopoverContent = useCallback(() => {
-    return React__default.createElement(SummaryCard, {
-      activeSummaryCard: activeSummaryCard,
-      title: asset?.title || '',
-      description: asset?.description || '',
-      instructions: asset?.imageRights || '',
-      instructionsType: 'warning',
-      headerRight: asset?.summary?.headerRight || '',
-      headerLeft: React__default.createElement(React__default.Fragment, null, renderSummaryCardHeaderLeft(), asset?.summary?.headerLeft || ''),
-      footerLeft: asset?.summary?.footerLeft || '',
-      footerRight: asset?.summary?.footerRight || '',
-      width: 375,
-      view: 'compact'
-    });
-  }, [asset]);
-  return React__default.createElement(AssetGalleryWrapper$1, {
-    disabled: asset.disabled
-  }, React__default.createElement(AssetGalleryCompactCard$2, _extends$4({
-    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.createElement(Reference, {
-    ref: refs.setReference
-  }, asset.previewUrl && renderPreview(asset)), React__default.createElement(Overlay$1, _extends$4({
-    ref: overlayCompactRef,
-    onMouseEnter: mouseHasEnteredOverlay,
-    onMouseLeave: mouseHasLeftOverlay,
-    style: {
-      height: '100%'
-    }
-  }, getReferenceProps()), React__default.createElement(OverlayBackdrop$1, {
-    softSelected: softSelected,
-    selected: selected
-  }), asset?.actions && React__default.createElement(OverlayInfoTopActions$1, {
-    $isOverlayHovered: isOverlayHovered
-  }, React__default.createElement(AssetActionsBase, {
-    actions: asset.actions,
-    asset: asset
-  })), React__default.createElement(OverlayInfo$1, null, isOverlayHovered && React__default.createElement("span", null, asset.title), React__default.createElement(OverlayInfoTop$1, null, React__default.createElement(OverlayInfoTopLeft, {
-    collapseExtraInfo: collapseExtraInfo
-  }, renderBadge()), asset?.note?.title && React__default.createElement(OverlayInfoTopWarning$1, {
-    type: asset?.note?.type
-  }, React__default.createElement(SvgWarningCircle, null))), React__default.createElement(OverlayInfoBottom$1, null, selectable && React__default.createElement(OverlayInfoBottomSelectButton$1, {
-    selected: selected
-  }, React__default.createElement(SvgCheckRectangleFilled, {
-    onClick: onSelectClick
-  })), React__default.createElement(OverlayInfoBottomMediaIcon$1, null, renderMediaBadge()))), asset.completed && React__default.createElement(OverlayCompleted, {
-    softSelected: softSelected
-  }), asset.hasError && React__default.createElement(OverlayHasError, {
-    softSelected: softSelected
-  }), selectable && React__default.createElement(OverlaySelected$1, {
-    selected: selected,
-    softSelected: softSelected,
-    customSelectedBorder: customSelectedBorder
-  }), isOpen && isOverlayHovered && isMounted && activeSummaryCard && !isAnySubActionsOpened && React__default.createElement("div", _extends$4({
-    ref: refs.setFloating,
-    style: floatingStyles
-  }, getFloatingProps()), React__default.createElement("div", {
-    style: styles,
-    className: "floating"
-  }, renderPopoverContent(), React__default.createElement(StyledFloatingArrow, {
-    ref: arrowRef,
-    context: context,
-    width: ARROW_WIDTH,
-    height: ARROW_HEIGHT
-  })))), asset.overlay && React__default.createElement(ConsumerDefinedOverlay$1, null, asset.overlay)));
-};
-AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
-  asset: PropTypes.shape(assetShapeWithLayout).isRequired,
-  hasHeightAndWidth: PropTypes.bool,
-  selectable: PropTypes.bool,
-  selected: PropTypes.bool,
-  customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
-  extendedSelectMode: PropTypes.bool,
-  onAssetSelected: PropTypes.func.isRequired,
-  onAssetUnselected: PropTypes.func.isRequired,
-  softSelected: PropTypes.bool.isRequired,
-  component: PropTypes.func,
-  scrollPosition: PropTypes.number,
-  collapseExtraInfo: PropTypes.bool,
-  activeSummaryCard: PropTypes.bool,
-  displayIcon: PropTypes.oneOf(['dynamic', 'versions', 'verifications', ''])
-} : {};
-var AssetGalleryCompactCard$1 = build.exports.trackWindowScroll(React__default.memo(AssetGalleryCompactCard, (prevProps, nextProps) => {
-  const reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth', 'collapseExtraInfo'];
-  return reactiveProps.every(propKey => get(prevProps, propKey) === get(nextProps, propKey));
-}));
-
-const AssetGalleryWrapper = styled.div.attrs(applyDefaultTheme)`
-  ${props => props.disabled && css`
-      cursor: not-allowed;
-    `};
-`;
-const AssetGalleryGridCard$2 = styled.div.attrs(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 && css`
-      pointer-events: none;
-      opacity: 0.4;
-    `};
-
-  ${props => props.extendedSelectMode && css`
-      cursor: pointer;
-    `}
-
-  ${props => {
-  if (props.$softSelected) {
-    return props.theme.themeProp('border-color', rgba(props.theme.getColor('gray-100'), 0.5), 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'), rgba(props.theme.getColor('emerald-500'), 0.7));
-  }
-  if (props.hasError) {
-    return props.theme.themeProp('border-color', props.theme.getColor('red-600'), 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.div.attrs(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.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.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 ? css`
-            object-fit: cover;
-          ` : css`
-            object-fit: contain;
-          `}
-  }
-
-  .audio {
-    display: flex;
-    height: 200px;
-    justify-content: center;
-    svg {
-      width: 25%;
-    }
-  }
-`;
-const FigureOverlayBackdrop = styled.div.attrs(applyDefaultTheme)`
-  position: absolute;
-  inset: 0;
-  opacity: ${props => props.selected ? 0.6 : 0};
-  background-color: ${props => props.selected ? '#ACCEF7' : 'transparent'};
-`;
-const Overlay = styled.div.attrs(applyDefaultTheme)`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-`;
-const OverlayBackdrop = styled.div.attrs(applyDefaultTheme)`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  opacity: 0;
-  transition: opacity 220ms;
-  ${props => !props.selected ? 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) && css`
-      opacity: 1;
-    `}
-
-  ${Overlay}:hover & {
-    opacity: 1;
-  }
-
-  ${AssetGalleryGridCard$2}:hover & {
-    opacity: 1;
-  }
-`;
-const OverlayInfo = styled.div.attrs(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.div.attrs(applyDefaultTheme)`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-`;
-const OverlayInfoTop = styled.div.attrs(applyDefaultTheme)`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  padding: 8px;
-  display: flex;
-`;
-const OverlayInfoTopVersions = styled.div.attrs(applyDefaultTheme)`
-  opacity: 1;
-
-  ${AssetGalleryGridCard$2}:hover & {
-    opacity: 0;
-  }
-`;
-const OverlayInfoTopWarning = styled.div.attrs(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.div.attrs(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.div.attrs(applyDefaultTheme)`
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 8px;
-  display: flex;
-`;
-const OverlayInfoBottomSelectButton = styled.div.attrs(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.div.attrs(applyDefaultTheme)`
-  margin-left: auto;
-  opacity: 1;
-  ${AssetGalleryGridCard$2}:hover & {
-    opacity: 0;
-  }
-`;
-const ConsumerDefinedOverlay = styled.div.attrs(applyDefaultTheme)`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-`;
-const Fragment = styled.div`
-  margin: 4px;
-`;
-
-const ComputedRootComponent = ({
-  component,
-  asset,
-  ...props
-}) => {
-  const newProps = mapKeys(omit(props, ['theme', 'extendedSelectMode']), (_, key) => key === 'innerRef' ? 'ref' : key);
-  if (component) {
-    if (!isFunction(component)) throw Error('Expected a function in component-prop');
-    if (React__default.isValidElement(component(asset, newProps.children))) {
-      return React__default.cloneElement(component(asset, newProps.children), omit(newProps, ['children']));
-    }
-  }
-  return React__default.createElement(AssetGalleryGridCard$2, _extends$4({
-    ref: newProps.ref
-  }, newProps));
-};
-const ComputedActionButton = React__default.forwardRef(function ComputedActionButton({
-  component,
-  className,
-  subActions = [],
-  isSubActionsOpened,
-  ...props
-}, forwardedRef) {
-  const newProps = props;
-  if (!isEmpty(subActions)) {
-    const contextMenuItems = subActions.map((subAction, key) => {
-      const {
-        onClick,
-        title,
-        icon
-      } = subAction;
-      return React__default.createElement(ContextMenuItem, {
-        key: key,
-        onClickEffect: onClick,
-        title: title,
-        icon: icon
-      });
-    });
-    const contextMenu = React__default.createElement(ContextMenu, null, contextMenuItems);
-    newProps.children = React__default.createElement(Popover, {
-      contextMenu: true,
-      content: contextMenu,
-      placement: 'bottom-end',
-      visible: isSubActionsOpened,
-      zIndex: 10001,
-      offset: [0, -8]
-    }, React__default.createElement(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.createElement(ActionButton, {
-      useShadow: true,
-      active: true,
-      ref: forwardedRef,
-      className: className,
-      icon: newProps.icon,
-      onClick: newProps.onClick,
-      backgroundColors: ['black', 'white'],
-      actionWidthHeight: newProps.actionWidthHeight
-    });
-  }
-  if (component) {
-    if (!isFunction(component)) throw Error('Expected a function in component-prop');
-    if (React__default.isValidElement(component())) {
-      return React__default.cloneElement(component(), {
-        ...omit(newProps, 'icon')
-      });
-    }
-  }
-  return React__default.createElement(React__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.useState(false);
-  const [openedSubActions, updateOpenedSubActions] = React__default.useState([]);
-  useEffect(() => {
-    const newOpenedSubActions = (asset?.actions ?? []).map(() => false);
-    updateOpenedSubActions(newOpenedSubActions);
-  }, [asset]);
-  useEffect(() => {
-    if (!isCardHovered && openedSubActions?.length) {
-      updateOpenedSubActions(openedSubActions.map(() => false));
-    }
-  }, [isCardHovered]);
-  const mouseHasEnteredCard = useCallback(() => {
-    setIsCardHovered(true);
-  }, []);
-  const mouseHasLeftCard = useCallback(() => {
-    setIsCardHovered(false);
-  }, []);
-  const onSubActionsViewToggle = useCallback(actionIndex => {
-    const newOpenedSubActions = openedSubActions.map((isOpened, index) => {
-      if (index !== actionIndex) {
-        return false;
-      }
-      return !isOpened;
-    });
-    updateOpenedSubActions(newOpenedSubActions);
-  }, [openedSubActions]);
-  const videoPlayerRef = useRef();
-  const cardRef = useRef();
-  const dragRef = useRef(null);
-  function onMouseEnter(event) {
-    if (videoPlayerRef.current) {
-      const playPromise = videoPlayerRef.current.play();
-      if (playPromise !== undefined) {
-        playPromise.then(() => {}).catch(() => {});
-      }
-    }
-    if (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 (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 = useCallback((event, action, index) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (isFunction(action?.onClick)) {
-      action.onClick(asset);
-    }
-    if (!isEmpty(action?.subActions)) {
-      onSubActionsViewToggle(index);
-    }
-  }, [onSubActionsViewToggle]);
-  const shouldOpenSubActions = 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.createElement(build.exports.LazyLoadComponent, {
-        scrollPosition: scrollPosition
-      }, React__default.createElement("video", {
-        ref: videoPlayerRef,
-        loop: true,
-        muted: true
-      }, React__default.createElement("source", {
-        src: asset.previewUrl,
-        type: "video/mp4"
-      })));
-    } else if (asset.fileType?.toLowerCase() === 'audio') {
-      previewContent = React__default.createElement(build.exports.LazyLoadComponent, {
-        scrollPosition: scrollPosition
-      }, React__default.createElement("div", {
-        className: "audio"
-      }, React__default.createElement(SvgHeadset, null)));
-    } else {
-      previewContent = React__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.createElement(Figure, {
-      selected: selected
-    }, previewContent, React__default.createElement(FigureOverlayBackdrop, {
-      selected: selected
-    }), React__default.createElement(Overlay, {
-      ref: cardRef
-    }, React__default.createElement(OverlayBackdrop, {
-      $softSelected: softSelected,
-      selected: selected
-    }), React__default.createElement(OverlayInfo, null, React__default.createElement(OverlayInfoTop, null, React__default.createElement(OverlayInfoTopVersions, null, renderVersionsBadge()), asset?.note?.title && React__default.createElement(OverlayInfoTopWarning, {
-      type: asset?.note?.type
-    }, React__default.createElement(SvgWarningCircle, null)), React__default.createElement(OverlayInfoTopActions, {
-      isCardHovered: isCardHovered
-    }, asset.actions && asset.actions.map((action, index) => React__default.createElement(Tooltip, {
-      key: `${asset.key}-${action.title}`,
-      content: action.title
-    }, React__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.createElement(OverlayInfoBottom, null, selectable && React__default.createElement(OverlayInfoBottomSelectButton, {
-      selected: selected
-    }, React__default.createElement(SvgCheckRectangleFilled, {
-      onClick: onSelectClick
-    })), React__default.createElement(OverlayInfoBottomMediaIcon, null, renderMediaBadge()))), selectable && React__default.createElement(OverlaySelected, {
-      selected: selected,
-      $softSelected: softSelected,
-      customSelectedBorder: customSelectedBorder
-    })), asset.overlay && React__default.createElement(ConsumerDefinedOverlay, null, asset.overlay));
-  }
-  useEffect(() => {
-    if (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);
-  }
-  useEffect(() => {
-    if (isFunction(asset.onDragstart)) {
-      if (dragRef.current) {
-        dragRef.current.addEventListener('dragstart', onDragstart);
-      }
-      return () => {
-        if (dragRef.current) {
-          dragRef.current.removeEventListener('dragstart', onDragstart);
-        }
-      };
-    }
-  }, []);
-  useEffect(() => {
-    if (softSelected) {
-      cardRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest'
-      });
-    }
-  }, [softSelected]);
-  const renderVersionsBadge = useCallback(() => {
-    if (!asset?.versions) return null;
-    return React__default.createElement(Badge, {
-      badgeIcon: React__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 = useCallback(() => {
-    let badgeIcon = null;
-    let badgeContent = null;
-    if (asset?.fileType === 'video') {
-      badgeIcon = React__default.createElement(SvgPlay, null);
-    }
-    if (asset?.duration) {
-      badgeContent = convertMsToHMS(asset.duration);
-    }
-    if (!badgeIcon && !badgeContent) return null;
-    return React__default.createElement(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 = useCallback(() => {
-    return React__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.createElement(AssetGalleryWrapper, {
-    disabled: asset.disabled
-  }, React__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.createElement(ContentWrapper, {
-    layout: asset.layout,
-    ref: cardRef,
-    $softSelected: softSelected,
-    selected: selected,
-    customSelectedBorder: customSelectedBorder
-  }, React__default.createElement(Asset, {
-    "data-id": "ss",
-    selected: selected
-  }, asset.previewUrl && renderPreview(asset)), renderSummary())));
-};
-AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
-  asset: PropTypes.shape(assetShapeWithLayout).isRequired,
-  selectable: PropTypes.bool,
-  selected: PropTypes.bool,
-  customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
-  extendedSelectMode: PropTypes.bool,
-  onAssetSelected: PropTypes.func.isRequired,
-  onAssetUnselected: PropTypes.func.isRequired,
-  softSelected: PropTypes.bool.isRequired,
-  component: PropTypes.func,
-  scrollPosition: PropTypes.number
-} : {};
-AssetGalleryGridCard.defaultProps = {};
-var AssetGalleryGridCard$1 = build.exports.trackWindowScroll(React__default.memo(AssetGalleryGridCard, (prevProps, nextProps) => {
-  const reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
-  return reactiveProps.every(propKey => get(prevProps, propKey) === get(nextProps, propKey));
-}));
-
-const AssetGalleryBase = React__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 = useRef();
-  const assetGalleryCompactRef = useMergedRefs(forwardedRef, assetGalleryDOMNode);
-  const assetGalleryWidth = useRef(0);
-  const minimumRowAspectRatio = useRef(0);
-  const calculatedAssets = useRef([]);
-  const [assets, setAssets] = useState([]);
-  const MAXIMUM_ROW_HEIGHT = 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 = useRef(isBrowser ? scrollElement.pageYOffset : 0);
-  const latestYOffset = useRef(isBrowser ? scrollElement.pageYOffset : 0);
-  const scrollDirection = useRef('down');
-  useIsomorphicLayoutEffect(() => {
-    if (!assetGalleryDOMNode.current) return;
-    const throttledOnResize = throttle(onResize, 1);
-    const resizeObserver = new ResizeObserver(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]);
-  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 = 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]);
-  useEffect(() => {
-    const throttledOnScroll = 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 = 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 = useCallback(() => {
-    onAssetSoftSelectedChanged(null);
-  }, []);
-  useEffect(() => {
-    if (softSelectable) {
-      document.addEventListener('keydown', handleKeyPress);
-    }
-    return () => document.removeEventListener('keydown', handleKeyPress);
-  }, [softSelectable, handleKeyPress]);
-  useEffect(() => {
-    if (softSelectable && softSelectedAssetKey !== null) {
-      document.addEventListener('click', handleClick, true);
-    }
-    return () => document.removeEventListener('click', handleClick, true);
-  }, [softSelectable, softSelectedAssetKey, handleClick]);
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(AssetGalleryBase$1, _extends$4({
-    ref: assetGalleryCompactRef,
-    style: {
-      height: `${totalGalleryHeight}px`
-    },
-    className: props.className
-  }, props), assets.map(asset => asset.layout.show && React__default.createElement(React__default.Fragment, {
-    key: `asset-gallery-${asset.layout.type}-${asset.key}`
-  }, asset.layout.type === 'groupLabel' && React__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.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.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.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: PropTypes.arrayOf(PropTypes.shape(assetShape)),
-  activeSummaryCard: PropTypes.bool,
-  displayIcon: PropTypes.string,
-  viewMode: PropTypes.oneOf(['compact', 'grid']),
-  thumbnailMaxHeight: PropTypes.number,
-  selectable: PropTypes.bool,
-  customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
-  selectedAssetKeys: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
-  scrollElement: PropTypes.instanceOf(Element),
-  onAssetSelected: PropTypes.func.isRequired,
-  onAssetUnselected: PropTypes.func.isRequired,
-  softSelectable: PropTypes.bool,
-  softSelectedAssetKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  onAssetSoftSelectedChanged: PropTypes.func.isRequired,
-  component: PropTypes.func,
-  className: PropTypes.string
-} : {};
-
-const AssetGallery = React__default.forwardRef(function AssetGallery({
-  assets,
-  activeSummaryCard,
-  viewMode,
-  thumbnailMaxHeight,
-  selectable,
-  customSelectedBorder,
-  selectedAssetKeys,
-  onSelectedChanged,
-  softSelectable,
-  scrollElement,
-  onSoftSelectedChanged,
-  component,
-  displayIcon,
-  ...props
-}, forwardedRef) {
-  const [selectedAssetKeysInternalState, setSelectedAssetKeysInternalState] = useState(selectedAssetKeys || []);
-  const [softSelectedAssetKeyInternalState, setSoftSelectedAssetKeyInternalState] = useState(null);
-  useEffect(() => {
-    setSelectedAssetKeysInternalState(selectedAssetKeys || []);
-  }, [selectedAssetKeys]);
-  useEffect(() => {
-    setSelectedAssetKeysInternalState(current => {
-      return current.filter(c => assets.some(a => a.key === c));
-    });
-  }, [assets.length]);
-  useEffect(() => {
-    if (selectedAssetKeys === selectedAssetKeysInternalState) return;
-    if (isFunction(onSelectedChanged)) {
-      onSelectedChanged(selectedAssetKeysInternalState);
-    }
-  }, [selectedAssetKeysInternalState]);
-  useEffect(() => {
-    if (isFunction(onSoftSelectedChanged)) {
-      onSoftSelectedChanged(softSelectedAssetKeyInternalState);
-    }
-  }, [softSelectedAssetKeyInternalState]);
-  const onSelected = useCallback(assetKey => {
-    setSelectedAssetKeysInternalState(currentState => [...currentState, assetKey]);
-  }, []);
-  const onUnselected = useCallback(assetKey => {
-    setSelectedAssetKeysInternalState(currentState => currentState.filter(filteredAssetKey => filteredAssetKey !== assetKey));
-  }, []);
-  const onAssetSoftSelectedChanged = useCallback((assetKey = null) => {
-    setSoftSelectedAssetKeyInternalState(assetKey);
-  }, []);
-  return React__default.createElement(AssetGalleryBase, _extends$4({
-    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: PropTypes.arrayOf(PropTypes.shape(assetShape)),
-  displayIcon: PropTypes.string,
-  activeSummaryCard: PropTypes.bool,
-  viewMode: PropTypes.oneOf(['compact', 'grid']),
-  thumbnailMaxHeight: PropTypes.number,
-  selectable: PropTypes.bool,
-  customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
-  selectedAssetKeys: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
-  onSelectedChanged: PropTypes.func,
-  softSelectable: PropTypes.bool,
-  scrollElement: PropTypes.instanceOf(Element),
-  onSoftSelectedChanged: PropTypes.func,
-  component: PropTypes.func
-} : {};
-AssetGallery.defaultProps = {
-  assets: [],
-  viewMode: 'compact',
-  thumbnailMaxHeight: 300,
-  selectedAssetKeys: [],
-  customSelectedBorder: [],
-  activeSummaryCard: false,
-  displayIcon: ''
-};
-
-export { AssetGallery as A };