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

package/esm/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.js

@@ -1,392 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { get, isEmpty, isFunction, omit, mapKeys } from 'lodash';
-import PropTypes from '../../../../../node_modules/prop-types/index.js';
-import React from '../../../../../node_modules/react/index.js';
-import { trackWindowScroll, LazyLoadComponent, LazyLoadImage } from 'react-lazy-load-image-component';
-import { ReactComponent as SvgCheckRectangleFilled } from '../../../../../icons/check-rectangle-filled.svg.js';
-import { ReactComponent as SvgHeadset } from '../../../../../icons/headset.svg.js';
-import { ReactComponent as SvgLayers } from '../../../../../icons/layers.svg.js';
-import { ReactComponent as SvgPlay } from '../../../../../icons/play.svg.js';
-import { ReactComponent as SvgWarningCircle } from '../../../../../icons/warning-circle.svg.js';
-import { convertMsToHMS } from '../../../../../utils/dateTime.js';
-import { assetShapeWithLayout } from '../../asset.propType.js';
-import { AssetGalleryWrapper, AssetGalleryGridCard as AssetGalleryGridCard$2, ContentWrapper, Asset, Figure, FigureOverlayBackdrop, Overlay, OverlayBackdrop, OverlayInfo, OverlayInfoTop, OverlayInfoTopVersions, OverlayInfoTopWarning, OverlayInfoTopActions, Fragment, OverlayInfoBottom, OverlayInfoBottomSelectButton, OverlayInfoBottomMediaIcon, OverlaySelected, ConsumerDefinedOverlay } from './AssetGalleryGridCard.styled.js';
-import ContextMenuItem from '../../../ContextMenu/ContextMenuItem/ContextMenuItem.js';
-import ContextMenu from '../../../ContextMenu/ContextMenu.js';
-import Popover from '../../../../data/Popover/Popover.js';
-import ActionButton from '../../../../inputs/ActionButton/ActionButton.js';
-import Badge from '../../../../data/Badge/Badge.js';
-import SummaryCard from '../../../SummaryCard/SummaryCard.js';
-import Tooltip from '../../../../data/Tooltip/Tooltip.js';
-import { r as react } from '../../../../../_virtual/index.js';
-
-const _excluded = ["component", "asset"],
-  _excluded2 = ["component", "className", "subActions", "isSubActionsOpened"];
-const ComputedRootComponent = _ref => {
-  let {
-      component,
-      asset
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  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.isValidElement(component(asset, newProps.children))) {
-      return React.cloneElement(component(asset, newProps.children), omit(newProps, ['children']));
-    }
-  }
-  return React.createElement(AssetGalleryGridCard$2, _extends({
-    ref: newProps.ref
-  }, newProps));
-};
-const ComputedActionButton = React.forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
-  let {
-      component,
-      className,
-      subActions = [],
-      isSubActionsOpened
-    } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded2);
-  const newProps = props;
-  if (!isEmpty(subActions)) {
-    const contextMenuItems = subActions.map((subAction, key) => {
-      const {
-        onClick,
-        title,
-        icon
-      } = subAction;
-      return React.createElement(ContextMenuItem, {
-        key: key,
-        onClickEffect: onClick,
-        title: title,
-        icon: icon
-      });
-    });
-    const contextMenu = React.createElement(ContextMenu, null, contextMenuItems);
-    newProps.children = React.createElement(Popover, {
-      contextMenu: true,
-      content: contextMenu,
-      placement: 'bottom-end',
-      visible: isSubActionsOpened,
-      zIndex: 10001,
-      offset: [0, -8]
-    }, React.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.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.isValidElement(component())) {
-      return React.cloneElement(component(), _objectSpread2({}, omit(newProps, 'icon')));
-    }
-  }
-  return React.createElement(React.Fragment, null, newProps.children);
-});
-const AssetGalleryGridCard = props => {
-  const {
-    asset,
-    selectable,
-    selected,
-    extendedSelectMode,
-    onAssetSelected,
-    onAssetUnselected,
-    softSelected,
-    component,
-    scrollPosition
-  } = props;
-  const [isCardHovered, setIsCardHovered] = React.useState(false);
-  const [openedSubActions, updateOpenedSubActions] = React.useState([]);
-  react.exports.useEffect(() => {
-    var _asset$actions;
-    const newOpenedSubActions = ((_asset$actions = asset === null || asset === void 0 ? void 0 : asset.actions) !== null && _asset$actions !== void 0 ? _asset$actions : []).map(() => false);
-    updateOpenedSubActions(newOpenedSubActions);
-  }, [asset]);
-  react.exports.useEffect(() => {
-    if (!isCardHovered && openedSubActions !== null && openedSubActions !== void 0 && openedSubActions.length) {
-      updateOpenedSubActions(openedSubActions.map(() => false));
-    }
-  }, [isCardHovered]);
-  const mouseHasEnteredCard = react.exports.useCallback(() => {
-    setIsCardHovered(true);
-  }, []);
-  const mouseHasLeftCard = react.exports.useCallback(() => {
-    setIsCardHovered(false);
-  }, []);
-  const onSubActionsViewToggle = react.exports.useCallback(actionIndex => {
-    const newOpenedSubActions = openedSubActions.map((isOpened, index) => {
-      if (index !== actionIndex) {
-        return false;
-      }
-      return !isOpened;
-    });
-    updateOpenedSubActions(newOpenedSubActions);
-  }, [openedSubActions]);
-  const videoPlayerRef = react.exports.useRef();
-  const cardRef = react.exports.useRef();
-  const dragRef = react.exports.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 = react.exports.useCallback((event, action, index) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (isFunction(action === null || action === void 0 ? void 0 : action.onClick)) {
-      action.onClick(asset);
-    }
-    if (!isEmpty(action === null || action === void 0 ? void 0 : action.subActions)) {
-      onSubActionsViewToggle(index);
-    }
-  }, [onSubActionsViewToggle]);
-  const shouldOpenSubActions = react.exports.useCallback(actionIndex => openedSubActions[actionIndex], [openedSubActions]);
-  function onContextMenu(event) {
-    event.preventDefault();
-    asset.onContextMenu(event);
-  }
-  function renderPreview(asset) {
-    var _asset$fileType, _asset$fileType2, _asset$note, _asset$note2;
-    let previewContent = null;
-    if (((_asset$fileType = asset.fileType) === null || _asset$fileType === void 0 ? void 0 : _asset$fileType.toLowerCase()) === 'video') {
-      previewContent = React.createElement(LazyLoadComponent, {
-        scrollPosition: scrollPosition
-      }, React.createElement("video", {
-        ref: videoPlayerRef,
-        loop: true,
-        muted: true
-      }, React.createElement("source", {
-        src: asset.previewUrl,
-        type: "video/mp4"
-      })));
-    } else if (((_asset$fileType2 = asset.fileType) === null || _asset$fileType2 === void 0 ? void 0 : _asset$fileType2.toLowerCase()) === 'audio') {
-      previewContent = React.createElement(LazyLoadComponent, {
-        scrollPosition: scrollPosition
-      }, React.createElement("div", {
-        className: "audio"
-      }, React.createElement(SvgHeadset, null)));
-    } else {
-      previewContent = React.createElement(LazyLoadImage, {
-        alt: asset.title,
-        src: asset.previewUrl,
-        height: "100%",
-        width: "100%",
-        delayMethod: "debounce",
-        delayTime: 0,
-        threshold: 1500,
-        scrollPosition: scrollPosition
-      });
-    }
-    return React.createElement(Figure, {
-      selected: selected
-    }, previewContent, React.createElement(FigureOverlayBackdrop, {
-      selected: selected
-    }), React.createElement(Overlay, {
-      ref: cardRef
-    }, React.createElement(OverlayBackdrop, {
-      $softSelected: softSelected,
-      selected: selected
-    }), React.createElement(OverlayInfo, null, React.createElement(OverlayInfoTop, null, React.createElement(OverlayInfoTopVersions, null, renderVersionsBadge()), (asset === null || asset === void 0 || (_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React.createElement(OverlayInfoTopWarning, {
-      type: asset === null || asset === void 0 || (_asset$note2 = asset.note) === null || _asset$note2 === void 0 ? void 0 : _asset$note2.type
-    }, React.createElement(SvgWarningCircle, null)), React.createElement(OverlayInfoTopActions, {
-      isCardHovered: isCardHovered
-    }, asset.actions && asset.actions.map((action, index) => React.createElement(Tooltip, {
-      key: `${asset.key}-${action.title}`,
-      content: action.title
-    }, React.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 === null || action === void 0 ? void 0 : action.subActions,
-      actionWidthHeight: action.actionWidthHeight
-    }))))), React.createElement(OverlayInfoBottom, null, selectable && React.createElement(OverlayInfoBottomSelectButton, {
-      selected: selected
-    }, React.createElement(SvgCheckRectangleFilled, {
-      onClick: onSelectClick
-    })), React.createElement(OverlayInfoBottomMediaIcon, null, renderMediaBadge()))), selectable && React.createElement(OverlaySelected, {
-      selected: selected,
-      $softSelected: softSelected
-    })), asset.overlay && React.createElement(ConsumerDefinedOverlay, null, asset.overlay));
-  }
-  react.exports.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);
-  }
-  react.exports.useEffect(() => {
-    if (isFunction(asset.onDragstart)) {
-      if (dragRef.current) {
-        dragRef.current.addEventListener('dragstart', onDragstart);
-      }
-      return () => {
-        if (dragRef.current) {
-          dragRef.current.removeEventListener('dragstart', onDragstart);
-        }
-      };
-    }
-  }, []);
-  react.exports.useEffect(() => {
-    if (softSelected) {
-      cardRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest'
-      });
-    }
-  }, [softSelected]);
-  const renderVersionsBadge = react.exports.useCallback(() => {
-    if (!(asset !== null && asset !== void 0 && asset.versions)) return null;
-    return React.createElement(Badge, {
-      badgeIcon: React.createElement(SvgLayers, null),
-      badgeContent: asset.versions,
-      backgroundColors: ['black', 'black'],
-      colors: ['#f7f8f9', '#f7f8f9'],
-      fontSize: 12,
-      fontWeight: 500,
-      lineHeight: 16,
-      verticalPadding: 4,
-      horizontalPadding: 8
-    });
-  }, [asset]);
-  const renderMediaBadge = react.exports.useCallback(() => {
-    let badgeIcon = null;
-    let badgeContent = null;
-    if ((asset === null || asset === void 0 ? void 0 : asset.fileType) === 'video') {
-      badgeIcon = React.createElement(SvgPlay, null);
-    }
-    if (asset !== null && asset !== void 0 && asset.duration) {
-      badgeContent = convertMsToHMS(asset.duration);
-    }
-    if (!badgeIcon && !badgeContent) return null;
-    return React.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 = react.exports.useCallback(() => {
-    var _asset$summary, _asset$summary2;
-    return React.createElement(SummaryCard, {
-      activeSummaryCard: true,
-      title: (asset === null || asset === void 0 ? void 0 : asset.title) || '',
-      description: (asset === null || asset === void 0 ? void 0 : asset.description) || '',
-      instructions: (asset === null || asset === void 0 ? void 0 : asset.imageRights) || '',
-      instructionsType: 'warning',
-      footerLeft: (asset === null || asset === void 0 || (_asset$summary = asset.summary) === null || _asset$summary === void 0 ? void 0 : _asset$summary.footerLeft) || '',
-      footerRight: (asset === null || asset === void 0 || (_asset$summary2 = asset.summary) === null || _asset$summary2 === void 0 ? void 0 : _asset$summary2.footerRight) || '',
-      view: 'grid'
-    });
-  }, [asset]);
-  return React.createElement(AssetGalleryWrapper, {
-    disabled: asset.disabled
-  }, React.createElement(AssetGalleryGridCard$2, {
-    as: ComputedRootComponent,
-    component: component,
-    asset: asset,
-    disabled: asset.disabled,
-    onClick: onClick,
-    extendedSelectMode: extendedSelectMode,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    draggable: asset.draggable,
-    innerRef: dragRef,
-    selected: selected,
-    $softSelected: softSelected,
-    completed: asset === null || asset === void 0 ? void 0 : asset.completed,
-    $hasError: asset === null || asset === void 0 ? void 0 : asset.hasError
-  }, React.createElement(ContentWrapper, {
-    layout: asset.layout,
-    ref: cardRef,
-    $softSelected: softSelected,
-    selected: selected
-  }, React.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,
-  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 = trackWindowScroll(React.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));
-}));
-
-export { AssetGalleryGridCard$1 as default };

package/esm/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js

@@ -1,302 +0,0 @@
-import { rgba } from 'polished';
-import styled, { css } from 'styled-components';
-import { applyDefaultTheme } from '../../../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _t7,
-  _t8,
-  _t9,
-  _t0,
-  _t1,
-  _t10,
-  _t11,
-  _t12,
-  _t13,
-  _t14,
-  _t15,
-  _t16,
-  _t17,
-  _t18,
-  _t19,
-  _t20,
-  _t21,
-  _t22,
-  _t23,
-  _t24;
-const AssetGalleryWrapper = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
-  ${0};
-`), props => props.disabled && css(_t2 || (_t2 = _`
-      cursor: not-allowed;
-    `)));
-const AssetGalleryGridCard = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
-  display: block;
-  position: relative;
-  height: 100%;
-  margin: 0;
-  box-sizing: border-box;
-  border-width: ${0}px;
-  border-style: solid;
-  text-decoration: none;
-  cursor: pointer;
-
-  ${0}
-
-  ${0};
-
-  ${0}
-
-  ${0};
-`), props => {
-  const {
-    selected,
-    softSelected,
-    hasError,
-    completed
-  } = props;
-  return selected || softSelected || hasError || completed ? 3 : 1;
-}, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')), props => props.disabled && css(_t4 || (_t4 = _`
-      pointer-events: none;
-      opacity: 0.4;
-    `)), props => props.extendedSelectMode && css(_t5 || (_t5 = _`
-      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) {
-    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)(_t6 || (_t6 = _`
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  padding: ${0}px;
-  padding-top: 35px;
-  height: 100%;
-`), props => props.selected || props.$softSelected ? 4 : 0);
-const Asset = styled.div(_t7 || (_t7 = _`
-  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(_t8 || (_t8 = _`
-  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;
-
-    ${0}
-  }
-
-  .audio {
-    display: flex;
-    height: 200px;
-    justify-content: center;
-    svg {
-      width: 25%;
-    }
-  }
-`), props => props.hasHeightAndWidth ? css(_t9 || (_t9 = _`
-            object-fit: cover;
-          `)) : css(_t0 || (_t0 = _`
-            object-fit: contain;
-          `)));
-const FigureOverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_t1 || (_t1 = _`
-  position: absolute;
-  inset: 0;
-  opacity: ${0};
-  background-color: ${0};
-`), props => props.selected ? 0.6 : 0, props => props.selected ? '#ACCEF7' : 'transparent');
-const Overlay = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-`));
-const OverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  opacity: 0;
-  transition: opacity 220ms;
-  ${0}
-
-  ${0}
-
-  ${0}:hover & {
-    opacity: 1;
-  }
-
-  ${0}:hover & {
-    opacity: 1;
-  }
-`), props => !props.selected ? css(_t12 || (_t12 = _`
-          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(_t13 || (_t13 = _`
-      opacity: 1;
-    `)), Overlay, AssetGalleryGridCard);
-const OverlayInfo = styled.div.attrs(applyDefaultTheme)(_t14 || (_t14 = _`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 15px 12px 10px;
-  color: ${0};
-`), props => props.theme.getColor('gray-100'));
-const OverlaySelected = styled.div.attrs(applyDefaultTheme)(_t15 || (_t15 = _`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-`));
-const OverlayInfoTop = styled.div.attrs(applyDefaultTheme)(_t16 || (_t16 = _`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  padding: 8px;
-  display: flex;
-`));
-const OverlayInfoTopVersions = styled.div.attrs(applyDefaultTheme)(_t17 || (_t17 = _`
-  opacity: 1;
-
-  ${0}:hover & {
-    opacity: 0;
-  }
-`), AssetGalleryGridCard);
-const OverlayInfoTopWarning = styled.div.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
-  margin-left: auto;
-  height: 24px;
-  width: 24px;
-  border-radius: 50%;
-  box-sizing: border-box;
-  padding: ${0};
-  background-color: ${0};
-  opacity: 1;
-
-  svg {
-    width: 100%;
-    color: ${0};
-  }
-
-  ${0}:hover & {
-    opacity: 0;
-  }
-`), props => props.type === 'error' ? 0 : '4px', props => props.type === 'error' ? props.theme.getColor('red-500') : props.theme.getColor('gray-100'), props => props.type === 'error' ? props.theme.getColor('gray-100') : props.theme.getColor('gray-700'), AssetGalleryGridCard);
-const OverlayInfoTopActions = styled.div.attrs(applyDefaultTheme)(_t19 || (_t19 = _`
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 4px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  transition: opacity 220ms;
-  z-index: 99999;
-  ${0}
-
-  opacity: ${0};
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')), props => props.isCardHovered ? 1 : 0);
-const OverlayInfoBottom = styled.div.attrs(applyDefaultTheme)(_t20 || (_t20 = _`
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 8px;
-  display: flex;
-`));
-const OverlayInfoBottomSelectButton = styled.div.attrs(applyDefaultTheme)(_t21 || (_t21 = _`
-  opacity: ${0};
-  flex-shrink: 0;
-  cursor: pointer;
-  transition: opacity 220ms;
-
-  > svg {
-    width: 23px;
-    height: 100%;
-    transition: opacity 120ms;
-    opacity: ${0};
-  }
-
-  ${0}:hover & {
-    opacity: 1;
-  }
-
-  ${0}:hover & {
-    opacity: 1;
-  }
-`), props => props.selected ? 1 : 0, props => props.selected ? 1 : 0.5, Overlay, AssetGalleryGridCard);
-const OverlayInfoBottomMediaIcon = styled.div.attrs(applyDefaultTheme)(_t22 || (_t22 = _`
-  margin-left: auto;
-  opacity: 1;
-  ${0}:hover & {
-    opacity: 0;
-  }
-`), AssetGalleryGridCard);
-const ConsumerDefinedOverlay = styled.div.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-`));
-const Fragment = styled.div(_t24 || (_t24 = _`
-  margin: 4px;
-`));
-
-export { Asset, AssetGalleryGridCard, AssetGalleryWrapper, ConsumerDefinedOverlay, ContentWrapper, Figure, FigureOverlayBackdrop, Fragment, Overlay, OverlayBackdrop, OverlayInfo, OverlayInfoBottom, OverlayInfoBottomMediaIcon, OverlayInfoBottomSelectButton, OverlayInfoTop, OverlayInfoTopActions, OverlayInfoTopVersions, OverlayInfoTopWarning, OverlaySelected };