@ntbjs/react-components 1.3.0-rc.8 → 2.0.0-rc.3

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

@@ -0,0 +1,392 @@
+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) || '',
+      compact: false
+    });
+  }, [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

@@ -0,0 +1,302 @@
+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,
+  _t10,
+  _t11,
+  _t12,
+  _t13,
+  _t14,
+  _t15,
+  _t16,
+  _t17,
+  _t18,
+  _t19,
+  _t20,
+  _t21,
+  _t22,
+  _t23,
+  _t24,
+  _t25,
+  _t26;
+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(_t10 || (_t10 = _`
+            object-fit: contain;
+          `)));
+const FigureOverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
+  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)(_t12 || (_t12 = _`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`));
+const OverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_t13 || (_t13 = _`
+  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(_t14 || (_t14 = _`
+          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(_t15 || (_t15 = _`
+      opacity: 1;
+    `)), Overlay, AssetGalleryGridCard);
+const OverlayInfo = styled.div.attrs(applyDefaultTheme)(_t16 || (_t16 = _`
+  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)(_t17 || (_t17 = _`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+`));
+const OverlayInfoTop = styled.div.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  padding: 8px;
+  display: flex;
+`));
+const OverlayInfoTopVersions = styled.div.attrs(applyDefaultTheme)(_t19 || (_t19 = _`
+  opacity: 1;
+
+  ${0}:hover & {
+    opacity: 0;
+  }
+`), AssetGalleryGridCard);
+const OverlayInfoTopWarning = styled.div.attrs(applyDefaultTheme)(_t20 || (_t20 = _`
+  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)(_t21 || (_t21 = _`
+  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)(_t22 || (_t22 = _`
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 8px;
+  display: flex;
+`));
+const OverlayInfoBottomSelectButton = styled.div.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
+  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)(_t24 || (_t24 = _`
+  margin-left: auto;
+  opacity: 1;
+  ${0}:hover & {
+    opacity: 0;
+  }
+`), AssetGalleryGridCard);
+const ConsumerDefinedOverlay = styled.div.attrs(applyDefaultTheme)(_t25 || (_t25 = _`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+`));
+const Fragment = styled.div(_t26 || (_t26 = _`
+  margin: 4px;
+`));
+
+export { Asset, AssetGalleryGridCard, AssetGalleryWrapper, ConsumerDefinedOverlay, ContentWrapper, Figure, FigureOverlayBackdrop, Fragment, Overlay, OverlayBackdrop, OverlayInfo, OverlayInfoBottom, OverlayInfoBottomMediaIcon, OverlayInfoBottomSelectButton, OverlayInfoTop, OverlayInfoTopActions, OverlayInfoTopVersions, OverlayInfoTopWarning, OverlaySelected };