@ntbjs/react-components 0.0.1-beta.8 → 1.0.0

package/AssetGallery-493397de.js

@@ -1,970 +0,0 @@
-import { P as PropTypes, d as _objectSpread2, s as styleInject, a as applyDefaultTheme, _ as _taggedTemplateLiteral, b as _objectWithoutProperties, e as _slicedToArray, c as _extends$5, f as _toConsumableArray } from './defaultTheme-f1063879.js';
-import * as React from 'react';
-import React__default, { useMemo, useRef, useState, useLayoutEffect, useEffect, useCallback } from 'react';
-import { isFunction, omit, get, throttle } from 'lodash';
-import { LazyLoadComponent, LazyLoadImage } from 'react-lazy-load-image-component';
-import { A as ActionButton } from './ActionButton-dfa33fb3.js';
-import './Popover-ca8883c5.js';
-import { T as Tooltip } from './Tooltip-be5c2611.js';
-import styled, { css } from 'styled-components';
-
-var toFnRef = function toFnRef(ref) {
-  return !ref || typeof ref === 'function' ? ref : function (value) {
-    ref.current = value;
-  };
-};
-
-function mergeRefs(refA, refB) {
-  var a = toFnRef(refA);
-  var b = toFnRef(refB);
-  return function (value) {
-    if (a) a(value);
-    if (b) b(value);
-  };
-}
-/**
- * Create and returns a single callback ref composed from two other Refs.
- *
- * ```tsx
- * const Button = React.forwardRef((props, ref) => {
- *   const [element, attachRef] = useCallbackRef<HTMLButtonElement>();
- *   const mergedRef = useMergedRefs(ref, attachRef);
- *
- *   return <button ref={mergedRef} {...props}/>
- * })
- * ```
- *
- * @param refA A Callback or mutable Ref
- * @param refB A Callback or mutable Ref
- * @category refs
- */
-
-function useMergedRefs(refA, refB) {
-  return useMemo(function () {
-    return mergeRefs(refA, refB);
-  }, [refA, refB]);
-}
-
-var 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']).isRequired,
-  group: PropTypes.string,
-  actions: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    icon: PropTypes.element.isRequired,
-    onClick: PropTypes.func.isRequired,
-    component: PropTypes.func
-  })),
-  overlay: PropTypes.element,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  onMouseEnter: PropTypes.func
-};
-var assetShapeWithLayout = _objectSpread2(_objectSpread2({}, 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
-});
-
-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);
-
-var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
-var AssetGalleryCompactCard$2 = styled.div.attrs(applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  ", ";\n  ", ";\n\n  ", "\n\n  video {\n    width: 100%;\n    height: 100%;\n  }\n"])), function (props) {
-  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
-}, function (props) {
-  return props.disabled && css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n      pointer-events: none;\n      opacity: 0.4;\n    "])));
-}, function (props) {
-  return props.extendedSelectMode && css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
-});
-var Figure = styled.figure(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  margin: 0;\n  width: 100%;\n  height: 100%;\n\n  .lazy-load-image-background {\n    display: block !important;\n  }\n\n  img {\n    display: block;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n"])), function (props) {
-  return props.hasHeightAndWidth ? css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n            object-fit: cover;\n          "]))) : css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n            object-fit: contain;\n          "])));
-});
-var Overlay = styled.div.attrs(applyDefaultTheme)(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n"])));
-var OverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  opacity: 0;\n  background: linear-gradient(rgba(0, 0, 0, 0.6), transparent 70%, rgba(0, 0, 0, 0.6));\n  transition: opacity 220ms;\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), Overlay);
-var OverlayInfo = styled.div.attrs(applyDefaultTheme)(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 15px 12px 10px;\n  color: ", ";\n"])), function (props) {
-  return props.theme.getColor('gray-100');
-});
-var OverlayInfoTopTitleAndFileType = styled.div.attrs(applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-var OverlayInfoTopTitle = styled.div.attrs(applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  font-family: ", ";\n  font-weight: 400;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
-  return props.theme.primaryFontFamily;
-}, Overlay);
-var OverlayInfoTopFileType = styled.div.attrs(applyDefaultTheme)(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  width: auto;\n  max-width: 19px;\n  max-height: 19px;\n"])));
-var OverlayInfoTopNote = styled.div.attrs(applyDefaultTheme)(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n  display: flex;\n  padding-top: 5px;\n  transform: translate3d(0, -100%, 0);\n  transition: transform 250ms;\n\n  svg {\n    max-width: 20px;\n    max-height: 20px;\n    width: auto;\n    flex-shrink: 0;\n  }\n\n  ", ":hover && {\n    ", "\n  }\n"])), Overlay, function (props) {
-  var _props$assetTitle;
-
-  return ((_props$assetTitle = props.assetTitle) === null || _props$assetTitle === void 0 ? void 0 : _props$assetTitle.trim().length) > 0 ? css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n            transform: translate3d(0, 0, 0);\n          "]))) : css(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral(["\n            transform: translate3d(0, -100%, 0);\n          "])));
-});
-var OverlayInfoTopNoteTitle = styled.div.attrs(applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-weight: 400;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  margin-left: 5px;\n  opacity: 0;\n  transition: opacity 250ms;\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
-  return props.theme.primaryFontFamily;
-}, Overlay);
-var OverlaySelected$1 = styled.div.attrs(applyDefaultTheme)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 4px solid\n    ", ";\n"])), function (props) {
-  return props.selected ? props.theme.getColor('orange-500') : 'transparent';
-});
-var OverlayInfoBottom = styled.div.attrs(applyDefaultTheme)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-var OverlayInfoBottomSelectButton = styled.div.attrs(applyDefaultTheme)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  opacity: ", ";\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: opacity 220ms;\n\n  > svg {\n    width: 23px;\n    height: 100%;\n    transition: color 120ms;\n    color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
-  return props.selected ? 1 : 0;
-}, function (props) {
-  return props.selected ? props.theme.getColor('orange-500') : 'inherit';
-}, Overlay);
-var OverlayInfoBottomActions = styled.div.attrs(applyDefaultTheme)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin-left: auto;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), Overlay);
-var ConsumerDefinedOverlay$1 = styled.div.attrs(applyDefaultTheme)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n"])));
-var Fragment$1 = styled.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral([""])));
-
-function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
-
-var _ref$4 = /*#__PURE__*/React.createElement("path", {
-  fill: "currentColor",
-  d: "M12 0a12 12 0 1012 12A12 12 0 0012 0zM9.6 18l-6-6 1.69-1.69L9.6 14.6l9.11-9.1 1.69 1.7z",
-  fillOpacity: 0.9
-});
-
-function SvgCheckCircleFilled(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24"
-  }, props), _ref$4);
-}
-
-function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-
-var _ref$3 = /*#__PURE__*/React.createElement("path", {
-  fill: "currentColor",
-  d: "M10.8 15.6h2.4V18h-2.4zm0-9.6h2.4v7.2h-2.4zm1.188-6A12 12 0 1024 12 11.994 11.994 0 0011.988 0zM12 21.6a9.6 9.6 0 119.6-9.6 9.597 9.597 0 01-9.6 9.6z"
-});
-
-function SvgWarningCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24"
-  }, props), _ref$3);
-}
-
-function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-
-var _ref$2 = /*#__PURE__*/React.createElement("path", {
-  fill: "currentColor",
-  d: "M3.43 6.24l9 5.76-9 5.76V6.24M0 0v24l18.86-12z"
-});
-
-function SvgPlay(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 18.86 24"
-  }, props), _ref$2);
-}
-
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-
-var _ref$1 = /*#__PURE__*/React.createElement("path", {
-  fill: "currentColor",
-  d: "M21 0H3A3 3 0 00.05 2.9V21A3 3 0 003 24h18.1a3 3 0 002.95-3V3A3.11 3.11 0 0021 0zm0 21H3V3h18.1v18zm-6-6v-4.52a1.56 1.56 0 00-1.55-1.55h-3.01v7.58h2.94A1.47 1.47 0 0014.93 15zm-3-4.52h1.54V15H12zm6 3.08h1.55V12H18v-1.52h1.55V9.07h-2.94v7.58h1.55v-3.09zm-12.07 0h1.56A1.55 1.55 0 009 12v-1.52a1.56 1.56 0 00-1.51-1.55H4.4v7.58h1.54zm0-3.08h1.56V12H5.94z"
-});
-
-function SvgPdf(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24"
-  }, props), _ref$1);
-}
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var _ref = /*#__PURE__*/React.createElement("path", {
-  fill: "currentColor",
-  d: "M12 0H2.4A2.4 2.4 0 000 2.4v19.2A2.4 2.4 0 002.39 24H16.8a2.41 2.41 0 002.4-2.4V7.2zM2.4 21.6V2.4h8.4v6h6v13.2z"
-});
-
-function SvgFile(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 19.2 24"
-  }, props), _ref);
-}
-
-var ComputedRootComponent$1 = function ComputedRootComponent(_ref) {
-  var component = _ref.component,
-      asset = _ref.asset,
-      props = _objectWithoutProperties(_ref, ["component", "asset"]);
-
-  var newProps = omit(props, ['theme', 'extendedSelectMode']);
-
-  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, newProps);
-};
-
-var ComputedActionButton$1 = React__default.forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
-  var component = _ref2.component,
-      props = _objectWithoutProperties(_ref2, ["component"]);
-
-  var newProps = props;
-  newProps.children = React__default.createElement(ActionButton, {
-    ref: forwardedRef,
-    icon: newProps.icon,
-    onClick: newProps.onClick
-  });
-
-  if (component) {
-    if (!isFunction(component)) throw Error('Expected a function in component-prop');
-
-    if (React__default.isValidElement(component())) {
-      return React__default.cloneElement(component(), _objectSpread2({}, omit(newProps, 'icon')));
-    }
-  }
-
-  return React__default.createElement(React__default.Fragment, null, newProps.children);
-});
-
-var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
-  var _asset$note;
-
-  var asset = props.asset,
-      selectable = props.selectable,
-      hasHeightAndWidth = props.hasHeightAndWidth,
-      selected = props.selected,
-      extendedSelectMode = props.extendedSelectMode,
-      onAssetSelected = props.onAssetSelected,
-      onAssetUnselected = props.onAssetUnselected,
-      component = props.component;
-
-  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);
-  }
-
-  function onActionClick(event, action) {
-    event.preventDefault();
-    event.stopPropagation();
-    action.onClick(asset);
-  }
-
-  var videoPlayerRef = useRef();
-
-  function onMouseEnter(event) {
-    event.stopPropagation();
-
-    if (videoPlayerRef.current) {
-      var playPromise = videoPlayerRef.current.play();
-
-      if (playPromise !== undefined) {
-        playPromise.then(function () {})["catch"](function () {});
-      }
-    }
-
-    if (isFunction(asset.onMouseEnter)) {
-      asset.onMouseEnter(event, asset);
-    }
-  }
-
-  function onMouseLeave(event) {
-    event.stopPropagation();
-
-    if (videoPlayerRef.current) {
-      videoPlayerRef.current.pause();
-    }
-  }
-
-  return React__default.createElement(AssetGalleryCompactCard$2, {
-    as: ComputedRootComponent$1,
-    component: component,
-    disabled: asset.disabled,
-    asset: asset,
-    onClick: onClick,
-    extendedSelectMode: extendedSelectMode,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default.createElement(LazyLoadComponent, null, React__default.createElement("video", {
-    ref: videoPlayerRef,
-    loop: true,
-    muted: true
-  }, React__default.createElement("source", {
-    src: asset.previewUrl,
-    type: "video/mp4"
-  }))) : React__default.createElement(Figure, {
-    hasHeightAndWidth: hasHeightAndWidth
-  }, React__default.createElement(LazyLoadImage, {
-    alt: asset.title,
-    src: asset.previewUrl,
-    height: "100%",
-    width: "100%",
-    effect: "opacity",
-    threshold: 700
-  }))), React__default.createElement(Overlay, null, React__default.createElement(OverlayBackdrop, null), React__default.createElement(OverlayInfo, null, React__default.createElement("div", null, React__default.createElement(OverlayInfoTopTitleAndFileType, null, React__default.createElement(OverlayInfoTopTitle, {
-    title: asset.title
-  }, asset.title || "\xA0"), asset.fileType === 'video' && React__default.createElement(OverlayInfoTopFileType, {
-    as: SvgPlay
-  }), asset.fileType === 'pdf' && React__default.createElement(OverlayInfoTopFileType, {
-    as: SvgPdf
-  }), asset.fileType === 'file' && React__default.createElement(OverlayInfoTopFileType, {
-    as: SvgFile
-  })), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default.createElement(OverlayInfoTopNote, {
-    title: asset.note.title,
-    assetTitle: asset.title
-  }, asset.note.icon ? asset.note.icon : React__default.createElement(SvgWarningCircle, null), React__default.createElement(OverlayInfoTopNoteTitle, null, asset.note.title))), React__default.createElement(OverlayInfoBottom, null, selectable && React__default.createElement(OverlayInfoBottomSelectButton, {
-    selected: selected
-  }, React__default.createElement(SvgCheckCircleFilled, {
-    onClick: onSelectClick
-  })), React__default.createElement(OverlayInfoBottomActions, null, asset.actions && asset.actions.map(function (action) {
-    return React__default.createElement(Tooltip, {
-      key: "".concat(asset.key, "-").concat(action.title),
-      content: action.title
-    }, React__default.createElement(Fragment$1, {
-      as: ComputedActionButton$1,
-      component: action.component,
-      icon: action.icon,
-      onClick: function onClick(event) {
-        return onActionClick(event, action);
-      }
-    }));
-  })))), selectable && React__default.createElement(OverlaySelected$1, {
-    selected: selected
-  })), 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.isRequired,
-  selectable: PropTypes.bool,
-  selected: PropTypes.bool,
-  extendedSelectMode: PropTypes.bool,
-  onAssetSelected: PropTypes.func.isRequired,
-  onAssetUnselected: PropTypes.func.isRequired,
-  component: PropTypes.func
-} : {};
-AssetGalleryCompactCard.defaultProps = {};
-var AssetGalleryCompactCard$1 = React__default.memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
-  var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth'];
-  return reactiveProps.every(function (propKey) {
-    return get(prevProps, propKey) === get(nextProps, propKey);
-  });
-});
-
-var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
-var AssetGalleryGridCard$2 = styled.div.attrs(applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  margin: 0;\n  ", "\n  border: 1px solid;\n  ", ";\n  ", "\n  box-sizing: border-box;\n  text-decoration: none;\n"])), function (props) {
-  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
-}, function (props) {
-  return props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
-}, function (props) {
-  return props.extendedSelectMode && css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n      cursor: pointer;\n    "])));
-});
-var Note = styled.div.attrs(applyDefaultTheme)(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 9px 15px 7px;\n\n  svg {\n    max-width: 18px;\n    max-height: 18px;\n    width: auto;\n    flex-shrink: 0;\n  }\n"])));
-var NoteTitle = styled.div.attrs(applyDefaultTheme)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  text-transform: uppercase;\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.4;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  margin-left: 5px;\n"])), function (props) {
-  return props.theme.secondaryFontFamily;
-});
-var Asset = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-top: 35px;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  video {\n    display: block;\n    width: 100%;\n    height: 200px;\n  }\n"])));
-var AssetFigure = styled.figure(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin: 0;\n  width: 100%;\n  height: 200px;\n\n  img {\n    object-fit: contain;\n    height: 100%;\n    width: 100%;\n  }\n"])));
-var Info = styled.div.attrs(applyDefaultTheme)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.7;\n  padding: 15px 15px 5px;\n"])), function (props) {
-  return props.theme.primaryFontFamily;
-});
-var InfoTitle = styled.div.attrs(applyDefaultTheme)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  font-weight: 500;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  margin-bottom: 4px;\n"])));
-var InfoFileType = styled.div.attrs(applyDefaultTheme)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  width: auto;\n  max-width: 18px;\n  max-height: 18px;\n"])));
-var InfoDescription = styled.div.attrs(applyDefaultTheme)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"])));
-var Bottom = styled.div.attrs(applyDefaultTheme)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-top: auto;\n  padding: 0 10px 10px;\n"])));
-var BottomSelectButton = styled.div.attrs(applyDefaultTheme)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  opacity: ", ";\n  flex-shrink: 0;\n  cursor: pointer;\n  transition: opacity 220ms;\n\n  > svg {\n    width: 23px;\n    height: 100%;\n    transition: color 120ms;\n    color: ", ";\n  }\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), function (props) {
-  return props.selected ? 1 : 0;
-}, function (props) {
-  return props.selected ? props.theme.getColor('orange-500') : 'inherit';
-}, AssetGalleryGridCard$2);
-var BottomActions = styled.div.attrs(applyDefaultTheme)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n  opacity: 0;\n  transition: opacity 220ms;\n\n  ", ":hover & {\n    opacity: 1;\n  }\n"])), AssetGalleryGridCard$2);
-var OverlaySelected = styled.div.attrs(applyDefaultTheme)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  right: -1px;\n  pointer-events: none;\n  transition: border-color 120ms;\n  border: 4px solid\n    ", ";\n"])), function (props) {
-  return props.selected ? props.theme.getColor('orange-500') : 'transparent';
-});
-var ConsumerDefinedOverlay = styled.div.attrs(applyDefaultTheme)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n"])));
-var Fragment = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral([""])));
-
-var ComputedRootComponent = function ComputedRootComponent(_ref) {
-  var component = _ref.component,
-      asset = _ref.asset,
-      props = _objectWithoutProperties(_ref, ["component", "asset"]);
-
-  var newProps = omit(props, ['theme', 'extendedSelectMode']);
-
-  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, newProps);
-};
-
-ComputedRootComponent.propTypes = process.env.NODE_ENV !== "production" ? {} : {};
-var ComputedActionButton = React__default.forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
-  var component = _ref2.component,
-      props = _objectWithoutProperties(_ref2, ["component"]);
-
-  var newProps = props;
-  newProps.children = React__default.createElement(ActionButton, {
-    ref: forwardedRef,
-    icon: newProps.icon,
-    onClick: newProps.onClick
-  });
-
-  if (component) {
-    if (!isFunction(component)) throw Error('Expected a function in component-prop');
-
-    if (React__default.isValidElement(component())) {
-      return React__default.cloneElement(component(), _objectSpread2({}, omit(newProps, 'icon')));
-    }
-  }
-
-  return React__default.createElement(React__default.Fragment, null, newProps.children);
-});
-
-var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
-  var _asset$note;
-
-  var asset = props.asset,
-      selectable = props.selectable,
-      selected = props.selected,
-      extendedSelectMode = props.extendedSelectMode,
-      onAssetSelected = props.onAssetSelected,
-      onAssetUnselected = props.onAssetUnselected,
-      component = props.component;
-  var videoPlayerRef = useRef();
-
-  function onMouseEnter(event) {
-    event.stopPropagation();
-
-    if (videoPlayerRef.current) {
-      var playPromise = videoPlayerRef.current.play();
-
-      if (playPromise !== undefined) {
-        playPromise.then(function () {})["catch"](function () {});
-      }
-    }
-
-    if (isFunction(asset.onMouseEnter)) {
-      asset.onMouseEnter(event, asset);
-    }
-  }
-
-  function onMouseLeave(event) {
-    event.stopPropagation();
-
-    if (videoPlayerRef.current) {
-      videoPlayerRef.current.pause();
-    }
-  }
-
-  function onClick(event) {
-    if (extendedSelectMode) {
-      return onSelectClick(event);
-    }
-
-    if (isFunction(asset.onClick)) {
-      asset.onClick(event, asset);
-    }
-  }
-
-  function onSelectClick(event) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (selected) {
-      return onAssetUnselected(asset.key);
-    }
-
-    return onAssetSelected(asset.key);
-  }
-
-  function onActionClick(event, action) {
-    event.preventDefault();
-    event.stopPropagation();
-    action.onClick(asset);
-  }
-
-  return React__default.createElement(AssetGalleryGridCard$2, {
-    as: ComputedRootComponent,
-    component: component,
-    asset: asset,
-    disabled: asset.disabled,
-    hasHeightAndWidth: asset.layout.hasHeightAndWidth,
-    onClick: onClick,
-    extendedSelectMode: extendedSelectMode,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  }, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default.createElement(Note, {
-    title: asset.note.title
-  }, asset.note.icon ? asset.note.icon : React__default.createElement(SvgWarningCircle, null), React__default.createElement(NoteTitle, null, asset.note.title)), React__default.createElement(Asset, {
-    "data-id": "ss"
-  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default.createElement(LazyLoadComponent, null, React__default.createElement("video", {
-    ref: videoPlayerRef,
-    loop: true,
-    muted: true
-  }, React__default.createElement("source", {
-    src: asset.previewUrl,
-    type: "video/mp4"
-  }))) : React__default.createElement(AssetFigure, null, React__default.createElement(LazyLoadImage, {
-    alt: asset.title,
-    src: asset.previewUrl,
-    height: "100%",
-    width: "100%",
-    effect: "opacity",
-    threshold: 700
-  })))), React__default.createElement(Info, null, React__default.createElement("div", {
-    style: {
-      display: 'flex'
-    }
-  }, React__default.createElement(InfoTitle, {
-    title: asset.title
-  }, asset.title || '—'), asset.fileType === 'video' && React__default.createElement(InfoFileType, {
-    as: SvgPlay
-  }), asset.fileType === 'pdf' && React__default.createElement(InfoFileType, {
-    as: SvgPdf
-  }), asset.fileType === 'file' && React__default.createElement(InfoFileType, {
-    as: SvgFile
-  })), React__default.createElement(InfoDescription, null, asset.description)), React__default.createElement(Bottom, null, selectable && React__default.createElement(BottomSelectButton, {
-    selected: selected
-  }, React__default.createElement(SvgCheckCircleFilled, {
-    onClick: onSelectClick
-  })), React__default.createElement(BottomActions, null, asset.actions && asset.actions.map(function (action) {
-    return React__default.createElement(Tooltip, {
-      key: "".concat(asset.key, "-").concat(action.title),
-      content: action.title
-    }, React__default.createElement(Fragment, {
-      as: ComputedActionButton,
-      component: action.component,
-      icon: action.icon,
-      onClick: function onClick(event) {
-        return onActionClick(event, action);
-      }
-    }));
-  }))), selectable && React__default.createElement(OverlaySelected, {
-    selected: selected
-  }), asset.overlay && React__default.createElement(ConsumerDefinedOverlay, null, asset.overlay));
-};
-
-AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
-  asset: PropTypes.shape(assetShapeWithLayout).isRequired,
-  selectable: PropTypes.bool,
-  selected: PropTypes.bool,
-  extendedSelectMode: PropTypes.bool,
-  onAssetSelected: PropTypes.func.isRequired,
-  onAssetUnselected: PropTypes.func.isRequired,
-  component: PropTypes.func
-} : {};
-AssetGalleryGridCard.defaultProps = {};
-var AssetGalleryGridCard$1 = React__default.memo(AssetGalleryGridCard, function (prevProps, nextProps) {
-  var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'asset.previewUrl', 'asset.overlay'];
-  return reactiveProps.every(function (propKey) {
-    return get(prevProps, propKey) === get(nextProps, propKey);
-  });
-});
-
-var _templateObject, _templateObject2, _templateObject3;
-var AssetGalleryBase$1 = styled.div.attrs(applyDefaultTheme)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-var GroupLabel = styled.div.attrs(applyDefaultTheme)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  ", "\n  display: flex;\n  align-items: flex-end;\n  position: absolute;\n  padding-bottom: 4px;\n  box-sizing: border-box;\n"])), function (props) {
-  return props.theme.primaryFontFamily;
-}, function (props) {
-  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
-});
-var AssetGalleryCardBase = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  margin: 0;\n  overflow: hidden;\n  will-change: transform, width, height;\n"])));
-
-var AssetGalleryBase = React__default.forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
-  var assetsProp = _ref.assets,
-      viewMode = _ref.viewMode,
-      thumbnailMaxHeight = _ref.thumbnailMaxHeight,
-      selectable = _ref.selectable,
-      selectedAssetKeys = _ref.selectedAssetKeys,
-      onAssetSelected = _ref.onAssetSelected,
-      onAssetUnselected = _ref.onAssetUnselected,
-      component = _ref.component,
-      props = _objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "component"]);
-
-  var assetGalleryDOMNode = useRef();
-  var assetGalleryCompactRef = useMergedRefs(forwardedRef, assetGalleryDOMNode);
-  var assetGalleryWidth = useRef(0);
-  var minimumRowAspectRatio = useRef(0);
-  var calculatedAssets = useRef([]);
-
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      assets = _useState2[0],
-      setAssets = _useState2[1];
-
-  var MAXIMUM_ROW_HEIGHT = useMemo(function () {
-    return viewMode === 'grid' ? 450 : thumbnailMaxHeight;
-  }, [viewMode, thumbnailMaxHeight]);
-  var SPACE_BETWEEN_ASSETS = 8;
-  var SPACE_UNDER_ASSETS = 8;
-  var PRIMARY_SCROLL_BUFFER_HEIGHT = 700;
-  var SECONDARY_SCROLL_BUFFER_HEIGHT = 300;
-  var GRID_VIEW_MODE_ASSET_MIN_WIDTH = 300;
-  var GRID_VIEW_MODE_ASSET_HEIGHT = 403;
-  var MISSING_WIDTH_PLACEHOLDER = 1920;
-  var MISSING_HEIGHT_PLACEHOLDER = 1080;
-  var previousYOffset = useRef(window.pageYOffset);
-  var latestYOffset = useRef(window.pageYOffset);
-  var scrollDirection = useRef('down');
-  useLayoutEffect(function () {
-    if (!assetGalleryDOMNode.current) return;
-    var throttledOnResize = throttle(onResize, 1);
-    var resizeObserver = new ResizeObserver(throttledOnResize);
-    resizeObserver.observe(assetGalleryDOMNode.current);
-
-    function onResize(entries) {
-      entries.forEach(function (entry) {
-        if (assetGalleryWidth.current === entry.contentRect.width) return;
-        window.requestAnimationFrame(function () {
-          assetGalleryWidth.current = entry.contentRect.width;
-          main();
-        });
-      });
-    }
-
-    return function () {
-      return resizeObserver.unobserve(assetGalleryDOMNode.current);
-    };
-  }, [assetsProp, assetGalleryDOMNode, MAXIMUM_ROW_HEIGHT]);
-  useEffect(function () {
-    main();
-  }, [MAXIMUM_ROW_HEIGHT, assetsProp]);
-
-  var main = function main() {
-    calculateAssetGalleryAspectRatio();
-    calculateLayout();
-    calculateVisibility();
-  };
-
-  var calculateAssetGalleryAspectRatio = function calculateAssetGalleryAspectRatio() {
-    if (assetGalleryWidth.current > 0) {
-      minimumRowAspectRatio.current = calculateAspectRatio(assetGalleryWidth.current, MAXIMUM_ROW_HEIGHT);
-    }
-  };
-
-  var calculateLayout = function calculateLayout() {
-    if (viewMode === 'grid' && assetGalleryWidth.current > 0) {
-      var row = [];
-      var translateX = 0;
-      var translateY = 0;
-      var computedAssets = [];
-      var lastGroup = null;
-      var desiredAssetCountInRow = Math.floor(assetGalleryWidth.current / GRID_VIEW_MODE_ASSET_MIN_WIDTH) || 1;
-      var desiredAssetWidth = assetGalleryWidth.current / desiredAssetCountInRow - SPACE_BETWEEN_ASSETS + SPACE_BETWEEN_ASSETS / desiredAssetCountInRow;
-      assetsProp.forEach(function (asset, index) {
-        var _assetsProp;
-
-        if (asset.group && asset.group !== lastGroup) {
-          computedAssets.push({
-            title: asset.group,
-            key: asset.key,
-            layout: {
-              type: 'groupLabel',
-              height: 50,
-              translateX: Math.round(translateX),
-              translateY: Math.round(translateY)
-            }
-          });
-          lastGroup = asset.group;
-          translateY += 50 + SPACE_UNDER_ASSETS;
-        }
-
-        row.push(asset);
-
-        if (row.length === desiredAssetCountInRow || index + 1 === assetsProp.length || (_assetsProp = assetsProp[index + 1]) !== null && _assetsProp !== void 0 && _assetsProp.group && assetsProp[index + 1].group !== asset.group) {
-          row.forEach(function (rowAsset) {
-            computedAssets.push(_objectSpread2(_objectSpread2({}, rowAsset), {}, {
-              layout: {
-                type: 'asset',
-                width: Math.round(desiredAssetWidth),
-                height: Math.round(GRID_VIEW_MODE_ASSET_HEIGHT),
-                translateX: Math.round(translateX),
-                translateY: Math.round(translateY)
-              }
-            }));
-            translateX += desiredAssetWidth + SPACE_BETWEEN_ASSETS;
-          });
-          row = [];
-          translateX = 0;
-          translateY += GRID_VIEW_MODE_ASSET_HEIGHT + SPACE_UNDER_ASSETS;
-        }
-      });
-      calculatedAssets.current = computedAssets;
-    } else {
-      if (minimumRowAspectRatio.current > 0) {
-        var _row = [];
-        var _translateX = 0;
-        var _translateY = 0;
-        var rowAspectRatio = 0;
-        var _lastGroup = null;
-        var _computedAssets = [];
-        assetsProp.forEach(function (asset, index) {
-          var _assetsProp2;
-
-          if (asset.group && asset.group !== _lastGroup) {
-            _computedAssets.push({
-              title: asset.group,
-              key: asset.key,
-              layout: {
-                type: 'groupLabel',
-                height: 50,
-                translateX: Math.round(_translateX),
-                translateY: Math.round(_translateY)
-              }
-            });
-
-            _lastGroup = asset.group;
-            _translateY += 50 + SPACE_UNDER_ASSETS;
-          }
-
-          rowAspectRatio += calculateAspectRatio(asset.width || MISSING_WIDTH_PLACEHOLDER, asset.height || MISSING_HEIGHT_PLACEHOLDER);
-
-          _row.push(asset);
-
-          if (rowAspectRatio >= minimumRowAspectRatio.current || index + 1 === assetsProp.length || (_assetsProp2 = assetsProp[index + 1]) !== null && _assetsProp2 !== void 0 && _assetsProp2.group && assetsProp[index + 1].group !== asset.group) {
-            rowAspectRatio = Math.max(rowAspectRatio, minimumRowAspectRatio.current);
-            var totalDesiredWidthOfImages = assetGalleryWidth.current - SPACE_BETWEEN_ASSETS * (_row.length - 1);
-            var rowHeight = totalDesiredWidthOfImages / rowAspectRatio;
-
-            _row.forEach(function (rowAsset) {
-              var assetWidth = rowHeight * calculateAspectRatio(rowAsset.width || MISSING_WIDTH_PLACEHOLDER, rowAsset.height || MISSING_HEIGHT_PLACEHOLDER);
-
-              _computedAssets.push(_objectSpread2(_objectSpread2({}, rowAsset), {}, {
-                layout: {
-                  type: 'asset',
-                  width: Math.round(assetWidth),
-                  height: Math.round(rowHeight),
-                  translateX: Math.round(_translateX),
-                  translateY: Math.round(_translateY),
-                  hasHeightAndWidth: Boolean(rowAsset.width && rowAsset.height)
-                }
-              }));
-
-              _translateX += assetWidth + SPACE_BETWEEN_ASSETS;
-            });
-
-            _row = [];
-            rowAspectRatio = 0;
-            _translateY += rowHeight + SPACE_UNDER_ASSETS;
-            _translateX = 0;
-          }
-        });
-        calculatedAssets.current = _computedAssets;
-      }
-    }
-  };
-
-  function calculateAspectRatio(width, height) {
-    return width / height;
-  }
-
-  var totalGalleryHeight = useMemo(function () {
-    if (assets.length === 0) {
-      return 0;
-    }
-
-    var lastAsset = assets[assets.length - 1];
-    return lastAsset.layout.translateY + lastAsset.layout.height;
-  }, [assets]);
-  useEffect(function () {
-    var throttledOnScroll = throttle(onScroll, 200);
-    window.addEventListener('scroll', throttledOnScroll, false);
-    return function () {
-      return window.removeEventListener('scroll', throttledOnScroll, false);
-    };
-  }, [assetGalleryDOMNode, calculatedAssets]);
-
-  function onScroll() {
-    setScrollPositionAndDirection();
-    calculateVisibility();
-  }
-
-  function setScrollPositionAndDirection() {
-    var newYOffset = window.pageYOffset;
-    previousYOffset.current = latestYOffset.current;
-    latestYOffset.current = newYOffset;
-    scrollDirection.current = latestYOffset.current > previousYOffset.current ? 'down' : 'up';
-  }
-
-  var calculateVisibility = function calculateVisibility() {
-    if (!assetGalleryDOMNode.current) return;
-    var bufferTop = scrollDirection.current === 'up' ? PRIMARY_SCROLL_BUFFER_HEIGHT : SECONDARY_SCROLL_BUFFER_HEIGHT;
-    var bufferBottom = scrollDirection.current === 'up' ? SECONDARY_SCROLL_BUFFER_HEIGHT : PRIMARY_SCROLL_BUFFER_HEIGHT;
-    var containerOffset = getOffsetTop(assetGalleryDOMNode.current);
-    var scrollerHeight = window.innerHeight;
-    var yOffset = latestYOffset.current;
-    var minTranslateYPlusHeight = yOffset - containerOffset - bufferTop;
-    var maxTranslateY = yOffset - containerOffset + scrollerHeight + bufferBottom;
-    var finalizedAssets = calculatedAssets.current.map(function (asset) {
-      if (asset.layout.translateY + asset.layout.height < minTranslateYPlusHeight || asset.layout.translateY > maxTranslateY) {
-        asset.layout.show = false;
-      } else {
-        asset.layout.show = true;
-      }
-
-      return asset;
-    });
-    setAssets(finalizedAssets);
-  };
-
-  function getOffsetTop(elem) {
-    var offsetTop = 0;
-
-    do {
-      if (!isNaN(elem.offsetTop)) {
-        offsetTop += elem.offsetTop;
-      }
-
-      elem = elem.offsetParent;
-    } while (elem);
-
-    return offsetTop;
-  }
-
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(AssetGalleryBase$1, _extends$5({
-    ref: assetGalleryCompactRef,
-    style: {
-      height: "".concat(totalGalleryHeight, "px")
-    },
-    className: props.className
-  }, props), assets.map(function (asset) {
-    return asset.layout.show && React__default.createElement(React__default.Fragment, {
-      key: "asset-gallery-".concat(asset.layout.type, "-").concat(asset.key)
-    }, asset.layout.type === 'groupLabel' && React__default.createElement(GroupLabel, {
-      style: {
-        transform: "translate3d(".concat(asset.layout.translateX, "px,").concat(asset.layout.translateY, "px, 0)"),
-        height: "".concat(asset.layout.height, "px")
-      }
-    }, asset.title), asset.layout.type === 'asset' && React__default.createElement(AssetGalleryCardBase, {
-      style: {
-        transform: "translate3d(".concat(asset.layout.translateX, "px, ").concat(asset.layout.translateY, "px, 0)"),
-        width: "".concat(asset.layout.width, "px"),
-        height: "".concat(asset.layout.height, "px")
-      }
-    }, viewMode === 'grid' ? React__default.createElement(AssetGalleryGridCard$1, {
-      asset: asset,
-      selectable: selectable,
-      selected: selectedAssetKeys.includes(asset.key),
-      extendedSelectMode: Boolean(selectedAssetKeys.length),
-      onAssetSelected: onAssetSelected,
-      onAssetUnselected: onAssetUnselected,
-      component: component
-    }) : React__default.createElement(AssetGalleryCompactCard$1, {
-      asset: asset,
-      hasHeightAndWidth: asset.layout.hasHeightAndWidth,
-      selectable: selectable,
-      selected: selectedAssetKeys.includes(asset.key),
-      extendedSelectMode: Boolean(selectedAssetKeys.length),
-      onAssetSelected: onAssetSelected,
-      onAssetUnselected: onAssetUnselected,
-      component: component
-    })));
-  })));
-});
-AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
-  assets: PropTypes.arrayOf(PropTypes.shape(assetShape)),
-  viewMode: PropTypes.oneOf(['compact', 'grid']),
-  thumbnailMaxHeight: PropTypes.number,
-  selectable: PropTypes.bool,
-  selectedAssetKeys: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
-  onAssetSelected: PropTypes.func.isRequired,
-  onAssetUnselected: PropTypes.func.isRequired,
-  component: PropTypes.func,
-  className: PropTypes.string
-} : {};
-
-var AssetGallery = React__default.forwardRef(function AssetGallery(_ref, forwardedRef) {
-  var assets = _ref.assets,
-      viewMode = _ref.viewMode,
-      thumbnailMaxHeight = _ref.thumbnailMaxHeight,
-      selectable = _ref.selectable,
-      selectedAssetKeys = _ref.selectedAssetKeys,
-      onSelectedChanged = _ref.onSelectedChanged,
-      component = _ref.component,
-      props = _objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "component"]);
-
-  var _useState = useState(selectedAssetKeys || []),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedAssetKeysInternalState = _useState2[0],
-      setSelectedAssetKeysInternalState = _useState2[1];
-
-  useEffect(function () {
-    setSelectedAssetKeysInternalState(selectedAssetKeys || []);
-  }, [selectedAssetKeys]);
-  useEffect(function () {
-    if (selectedAssetKeys === selectedAssetKeysInternalState) return;
-
-    if (isFunction(onSelectedChanged)) {
-      onSelectedChanged(selectedAssetKeysInternalState);
-    }
-  }, [selectedAssetKeysInternalState]);
-  var onSelected = useCallback(function (assetKey) {
-    setSelectedAssetKeysInternalState(function (currentState) {
-      return [].concat(_toConsumableArray(currentState), [assetKey]);
-    });
-  }, []);
-  var onUnselected = useCallback(function (assetKey) {
-    setSelectedAssetKeysInternalState(function (currentState) {
-      return currentState.filter(function (filteredAssetKey) {
-        return filteredAssetKey !== assetKey;
-      });
-    });
-  }, []);
-  return React__default.createElement(AssetGalleryBase, _extends$5({
-    ref: forwardedRef,
-    assets: assets,
-    thumbnailMaxHeight: thumbnailMaxHeight,
-    selectable: selectable,
-    selectedAssetKeys: selectedAssetKeysInternalState,
-    onAssetSelected: onSelected,
-    onAssetUnselected: onUnselected,
-    component: component,
-    viewMode: viewMode
-  }, props));
-});
-AssetGallery.propTypes = process.env.NODE_ENV !== "production" ? {
-  assets: PropTypes.arrayOf(PropTypes.shape(assetShape)),
-  viewMode: PropTypes.oneOf(['compact', 'grid']),
-  thumbnailMaxHeight: PropTypes.number,
-  selectable: PropTypes.bool,
-  selectedAssetKeys: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
-  onSelectedChanged: PropTypes.func,
-  component: PropTypes.func
-} : {};
-AssetGallery.defaultProps = {
-  assets: [],
-  viewMode: 'compact',
-  thumbnailMaxHeight: 300,
-  selectedAssetKeys: []
-};
-
-export { AssetGallery as A };