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

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

@@ -1,398 +0,0 @@
-import { extends as _extends, objectWithoutProperties as _objectWithoutProperties } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { get, isFunction, mapKeys, omit } 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 '../../../../../node_modules/react-lazy-load-image-component/src/effects/opacity.css.js';
-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, AssetGalleryCompactCard as AssetGalleryCompactCard$2, Reference, Overlay, OverlayBackdrop, OverlayInfoTopActions, OverlayInfo, OverlayInfoTop, OverlayInfoTopLeft, OverlayInfoTopWarning, OverlayInfoBottom, OverlayInfoBottomSelectButton, OverlayInfoBottomMediaIcon, OverlayCompleted, OverlayHasError, OverlaySelected, StyledFloatingArrow, ConsumerDefinedOverlay, Figure, FigureOverlayBackdrop } from './AssetGalleryCompactCard.styled.js';
-import { useFloating, autoUpdate, offset, flip, shift, arrow, useTransitionStyles, useHover, useDismiss, useInteractions, useMergeRefs } from '@floating-ui/react';
-import Badge from '../../../../data/Badge/Badge.js';
-import SummaryCard from '../../../SummaryCard/SummaryCard.js';
-import AssetActionsBase from '../../../AssetActionsBase/AssetActionsBase.js';
-import { r as react } from '../../../../../_virtual/index.js';
-
-const _excluded = ["component", "asset"];
-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(AssetGalleryCompactCard$2, _extends({
-    ref: newProps.ref
-  }, newProps));
-};
-const AssetGalleryCompactCard = props => {
-  var _asset$note, _asset$note2;
-  const {
-    asset,
-    activeSummaryCard,
-    displayIcon,
-    selectable,
-    hasHeightAndWidth,
-    selected,
-    extendedSelectMode,
-    onAssetSelected,
-    onAssetUnselected,
-    softSelected,
-    component,
-    scrollPosition,
-    collapseExtraInfo
-  } = props;
-  const ARROW_WIDTH = 30;
-  const ARROW_HEIGHT = 15;
-  const GAP = 8;
-  const arrowRef = react.exports.useRef(null);
-  const [isOpen, setIsOpen] = react.exports.useState(false);
-  const [placement] = react.exports.useState('bottom');
-  const [isOverlayHovered, setIsOverlayHovered] = react.exports.useState(false);
-  const [openedSubActions, updateOpenedSubActions] = react.exports.useState([]);
-  const {
-    refs,
-    floatingStyles,
-    context
-  } = useFloating({
-    placement,
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [offset(ARROW_HEIGHT + GAP), flip({
-      padding: 5
-    }), shift({
-      padding: 5
-    }), arrow({
-      element: arrowRef
-    })]
-  });
-  const {
-    isMounted,
-    styles
-  } = useTransitionStyles(context, {
-    initial: {
-      transform: 'translateY(-8px)',
-      opacity: 0
-    },
-    duration: {
-      open: 200,
-      close: 100
-    }
-  });
-  const hover = useHover(context, {
-    restMs: 100
-  });
-  const dismiss = useDismiss(context, {
-    referencePress: true,
-    ancestorScroll: true,
-    windowScroll: true,
-    windowBlur: true
-  });
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = useInteractions([dismiss, hover]);
-  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 (!isOverlayHovered && openedSubActions !== null && openedSubActions !== void 0 && openedSubActions.length) {
-      updateOpenedSubActions(openedSubActions.map(() => false));
-    }
-  }, [isOverlayHovered]);
-  const mouseHasEnteredOverlay = react.exports.useCallback(() => {
-    setIsOverlayHovered(true);
-  }, []);
-  const mouseHasLeftOverlay = react.exports.useCallback(() => {
-    setIsOverlayHovered(false);
-  }, []);
-  const isAnySubActionsOpened = react.exports.useMemo(() => {
-    return openedSubActions.some(isOpened => isOpened);
-  }, [openedSubActions]);
-  function onClick(event) {
-    if (extendedSelectMode) {
-      return onSelectClick(event);
-    }
-    if (isFunction(asset.onClick)) {
-      asset.onClick(event, asset);
-    }
-  }
-  function onSelectClick(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (selected) {
-      return onAssetUnselected(asset.key);
-    }
-    if (selectable) {
-      return onAssetSelected(asset.key);
-    }
-  }
-  function onContextMenu(event) {
-    event.preventDefault();
-    asset.onContextMenu(event);
-  }
-  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);
-        }
-      };
-    }
-  }, []);
-  const videoPlayerRef = react.exports.useRef();
-  const cardRef = react.exports.useRef();
-  const dragRef = react.exports.useRef(null);
-  const overlayCompactRef = useMergeRefs([cardRef, refs.setReference]);
-  function onMouseEnter(event) {
-    if (videoPlayerRef.current) {
-      const playPromise = videoPlayerRef.current.play();
-      if (playPromise !== undefined) {
-        playPromise.then(() => {}).catch(() => {});
-      }
-    }
-    if (isFunction(asset.onMouseEnter)) {
-      asset.onMouseEnter(event, asset);
-    }
-  }
-  function onMouseLeave() {
-    if (videoPlayerRef.current) {
-      videoPlayerRef.current.pause();
-    }
-  }
-  const renderPreview = asset => {
-    var _asset$fileType, _asset$fileType2;
-    let previewContent = null;
-    if ((asset === null || asset === void 0 || (_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 === null || asset === void 0 || (_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 === null || asset === void 0 ? void 0 : asset.title,
-        src: asset === null || asset === void 0 ? void 0 : asset.previewUrl,
-        height: "100%",
-        width: "100%",
-        delayMethod: "debounce",
-        delayTime: 0,
-        threshold: 1500,
-        scrollPosition: scrollPosition
-      });
-    }
-    return React.createElement(Figure, {
-      hasHeightAndWidth: hasHeightAndWidth
-    }, previewContent, React.createElement(FigureOverlayBackdrop, {
-      selected: selected
-    }));
-  };
-  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 renderVerificationBadge = react.exports.useCallback(() => {
-    if (!(asset !== null && asset !== void 0 && asset.verifications)) return null;
-    return asset === null || asset === void 0 ? void 0 : asset.verifications;
-  }, [asset]);
-  const renderdynamicBadge = react.exports.useCallback(() => {
-    if (asset !== null && asset !== void 0 && asset.verifications) return renderVerificationBadge();
-    if (asset !== null && asset !== void 0 && asset.versions) return renderVersionsBadge();
-    return null;
-  });
-  const renderBadge = () => {
-    switch (displayIcon) {
-      case 'versions':
-        return renderVersionsBadge();
-      case 'verifications':
-        return renderVerificationBadge();
-      case 'dynamic':
-        return renderdynamicBadge();
-      default:
-        return null;
-    }
-  };
-  const renderMediaBadge = react.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 renderSummaryCardHeaderLeft = react.exports.useCallback(() => {
-    return React.createElement(React.Fragment, null, renderVersionsBadge(), renderMediaBadge());
-  }, [asset]);
-  const renderPopoverContent = react.exports.useCallback(() => {
-    var _asset$summary, _asset$summary2, _asset$summary3, _asset$summary4;
-    return React.createElement(SummaryCard, {
-      activeSummaryCard: activeSummaryCard,
-      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',
-      headerRight: (asset === null || asset === void 0 || (_asset$summary = asset.summary) === null || _asset$summary === void 0 ? void 0 : _asset$summary.headerRight) || '',
-      headerLeft: React.createElement(React.Fragment, null, renderSummaryCardHeaderLeft(), (asset === null || asset === void 0 || (_asset$summary2 = asset.summary) === null || _asset$summary2 === void 0 ? void 0 : _asset$summary2.headerLeft) || ''),
-      footerLeft: (asset === null || asset === void 0 || (_asset$summary3 = asset.summary) === null || _asset$summary3 === void 0 ? void 0 : _asset$summary3.footerLeft) || '',
-      footerRight: (asset === null || asset === void 0 || (_asset$summary4 = asset.summary) === null || _asset$summary4 === void 0 ? void 0 : _asset$summary4.footerRight) || '',
-      width: 375,
-      compact: true
-    });
-  }, [asset]);
-  return React.createElement(AssetGalleryWrapper, {
-    disabled: asset.disabled
-  }, React.createElement(AssetGalleryCompactCard$2, _extends({
-    as: ComputedRootComponent,
-    component: component,
-    disabled: asset.disabled,
-    asset: asset,
-    onClick: onClick,
-    extendedSelectMode: extendedSelectMode,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    draggable: asset.draggable,
-    innerRef: dragRef,
-    selected: selected
-  }, getReferenceProps()), React.createElement(Reference, {
-    ref: refs.setReference
-  }, asset.previewUrl && renderPreview(asset)), React.createElement(Overlay, _extends({
-    ref: overlayCompactRef,
-    onMouseEnter: mouseHasEnteredOverlay,
-    onMouseLeave: mouseHasLeftOverlay,
-    style: {
-      height: '100%'
-    }
-  }, getReferenceProps()), React.createElement(OverlayBackdrop, {
-    softSelected: softSelected,
-    selected: selected
-  }), (asset === null || asset === void 0 ? void 0 : asset.actions) && React.createElement(OverlayInfoTopActions, {
-    isOverlayHovered: isOverlayHovered
-  }, React.createElement(AssetActionsBase, {
-    actions: asset.actions,
-    asset: asset
-  })), React.createElement(OverlayInfo, null, isOverlayHovered && React.createElement("span", null, asset.title), React.createElement(OverlayInfoTop, null, React.createElement(OverlayInfoTopLeft, {
-    collapseExtraInfo: collapseExtraInfo
-  }, renderBadge()), (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(OverlayInfoBottom, null, selectable && React.createElement(OverlayInfoBottomSelectButton, {
-    selected: selected
-  }, React.createElement(SvgCheckRectangleFilled, {
-    onClick: onSelectClick
-  })), React.createElement(OverlayInfoBottomMediaIcon, null, renderMediaBadge()))), asset.completed && React.createElement(OverlayCompleted, {
-    softSelected: softSelected
-  }), asset.hasError && React.createElement(OverlayHasError, {
-    softSelected: softSelected
-  }), selectable && React.createElement(OverlaySelected, {
-    selected: selected,
-    softSelected: softSelected
-  }), isOpen && isOverlayHovered && isMounted && activeSummaryCard && !isAnySubActionsOpened && React.createElement("div", _extends({
-    ref: refs.setFloating,
-    style: floatingStyles
-  }, getFloatingProps()), React.createElement("div", {
-    style: styles,
-    className: "floating"
-  }, renderPopoverContent(), React.createElement(StyledFloatingArrow, {
-    ref: arrowRef,
-    context: context,
-    width: ARROW_WIDTH,
-    height: ARROW_HEIGHT
-  })))), asset.overlay && React.createElement(ConsumerDefinedOverlay, null, asset.overlay)));
-};
-AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
-  asset: PropTypes.shape(assetShapeWithLayout).isRequired,
-  hasHeightAndWidth: PropTypes.bool,
-  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,
-  collapseExtraInfo: PropTypes.bool,
-  activeSummaryCard: PropTypes.bool,
-  displayIcon: PropTypes.oneOf(['versions', 'verifications', ''])
-} : {};
-var AssetGalleryCompactCard$1 = trackWindowScroll(React.memo(AssetGalleryCompactCard, (prevProps, nextProps) => {
-  const reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth', 'collapseExtraInfo'];
-  return reactiveProps.every(propKey => get(prevProps, propKey) === get(nextProps, propKey));
-}));
-
-export { AssetGalleryCompactCard$1 as default };

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

@@ -1,311 +0,0 @@
-import { rgba } from 'polished';
-import styled, { css } from 'styled-components';
-import { applyDefaultTheme } from '../../../../../utils/defaultTheme.js';
-import { FloatingArrow } from '@floating-ui/react';
-
-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,
-  _t27,
-  _t28,
-  _t29;
-const AssetGalleryWrapper = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
-  ${0};
-`), props => props.disabled && css(_t2 || (_t2 = _`
-      cursor: not-allowed;
-    `)));
-const Reference = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
-  width: 100%;
-  height: 100%;
-`));
-const AssetGalleryCompactCard = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
-  display: block;
-  height: 100%;
-  padding-left: ${0}px;
-  padding-right: ${0}px;
-  padding-top: ${0}px;
-  box-sizing: border-box;
-  cursor: pointer;
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0}
-  video {
-    width: 100%;
-    height: 100%;
-  }
-
-  .audio {
-    display: flex;
-    justify-content: center;
-    svg {
-      width: 25%;
-    }
-  }
-`), props => props.selected ? 1 : 0, props => props.selected ? 1 : 0, props => props.selected ? 1 : 0, props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300')), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')), props => props.disabled && css(_t5 || (_t5 = _`
-      pointer-events: none;
-      opacity: 0.4;
-    `)), props => props.extendedSelectMode && css(_t6 || (_t6 = _`
-      cursor: pointer;
-    `)));
-const Figure = styled.figure(_t7 || (_t7 = _`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-
-  .lazy-load-image-background {
-    display: block !important;
-  }
-
-  img {
-    display: block;
-    height: 100%;
-    width: 100%;
-    ${0}
-  }
-`), props => props.hasHeightAndWidth ? css(_t8 || (_t8 = _`
-            object-fit: cover;
-          `)) : css(_t9 || (_t9 = _`
-            object-fit: contain;
-          `)));
-const FigureOverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
-  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)(_t11 || (_t11 = _`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-`));
-const OverlayBackdrop = styled.div.attrs(applyDefaultTheme)(_t12 || (_t12 = _`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  opacity: 0;
-  transition: opacity 220ms;
-
-  ${0}
-  ${0}
-    ${0}:hover & {
-    opacity: 1;
-  }
-`), props => !props.selected ? css(_t13 || (_t13 = _`
-          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(_t14 || (_t14 = _`
-      opacity: 1;
-    `)), Overlay);
-const OverlayInfo = styled.div.attrs(applyDefaultTheme)(_t15 || (_t15 = _`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 15px 50px 10px 12px;
-  color: ${0};
-  & span {
-    overflow: hidden;
-    word-wrap: break-word;
-  }
-`), props => props.theme.getColor('gray-100'));
-const OverlayCompleted = styled.div.attrs(applyDefaultTheme)(_t16 || (_t16 = _`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-  transition: border-color 120ms;
-  border: 3px solid;
-  ${0};
-`), props => {
-  if (props.softSelected) return null;
-  return props.theme.themeProp('border-color', props.theme.getColor('emerald-500'), rgba(props.theme.getColor('emerald-500'), 0.7));
-});
-const OverlayHasError = styled.div.attrs(applyDefaultTheme)(_t17 || (_t17 = _`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-  transition: border-color 120ms;
-  border: 3px solid;
-  ${0}
-`), props => {
-  if (props.softSelected) return null;
-  return props.theme.themeProp('border-color', props.theme.getColor('red-600'), rgba(props.theme.getColor('red-500'), 0.7));
-});
-const OverlaySelected = styled.div.attrs(applyDefaultTheme)(_t18 || (_t18 = _`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-  transition: border-color 120ms;
-  border-style: solid;
-  border-width: 3px;
-
-  ${0};
-`), 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'));
-  }
-  return props.theme.themeProp('border-color', 'transparent', 'transparent');
-});
-const OverlayInfoTop = styled.div.attrs(applyDefaultTheme)(_t19 || (_t19 = _`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  padding: 8px;
-  display: flex;
-`));
-const OverlayInfoTopActions = styled.div.attrs(applyDefaultTheme)(_t20 || (_t20 = _`
-  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.isOverlayHovered ? 1 : 0);
-const OverlayInfoTopLeft = styled.div.attrs(applyDefaultTheme)(_t21 || (_t21 = _`
-  opacity: 1;
-  display: ${0};
-
-  ${0}:hover & {
-    opacity: 0;
-  }
-`), props => props !== null && props !== void 0 && props.collapseExtraInfo ? 'none' : 'block', Overlay);
-const OverlayInfoTopWarning = styled.div.attrs(applyDefaultTheme)(_t22 || (_t22 = _`
-  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 : '3px 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'), Overlay);
-const OverlayInfoBottom = styled.div.attrs(applyDefaultTheme)(_t23 || (_t23 = _`
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 8px;
-  display: flex;
-`));
-const OverlayInfoBottomSelectButton = styled.div.attrs(applyDefaultTheme)(_t24 || (_t24 = _`
-  opacity: ${0};
-  flex-shrink: 0;
-  cursor: pointer;
-  transition: opacity 220ms;
-  height: 24px;
-
-  > svg {
-    width: 24px;
-    height: 24px;
-    transition: opacity 120ms;
-    opacity: ${0};
-  }
-
-  ${0}:hover & {
-    opacity: 1;
-  }
-`), props => props.selected ? 1 : 0, props => props.selected ? 1 : 0.5, Overlay);
-const OverlayInfoBottomMediaIcon = styled.div.attrs(applyDefaultTheme)(_t25 || (_t25 = _`
-  margin-left: auto;
-  opacity: 1;
-
-  ${0}:hover & {
-    opacity: 0;
-  }
-`), Overlay);
-const ConsumerDefinedOverlay = styled.div.attrs(applyDefaultTheme)(_t26 || (_t26 = _`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-`));
-styled.div(_t27 || (_t27 = _`
-  margin: 4px;
-`));
-styled.div.attrs(applyDefaultTheme)(_t28 || (_t28 = _`
-  ${0}
-  padding: 4px 8px;
-  border-radius: 4px;
-`), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')));
-const StyledFloatingArrow = styled(FloatingArrow).attrs(applyDefaultTheme)(_t29 || (_t29 = _`
-  ${0}
-`), props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white')));
-
-export { AssetGalleryCompactCard, AssetGalleryWrapper, ConsumerDefinedOverlay, Figure, FigureOverlayBackdrop, Overlay, OverlayBackdrop, OverlayCompleted, OverlayHasError, OverlayInfo, OverlayInfoBottom, OverlayInfoBottomMediaIcon, OverlayInfoBottomSelectButton, OverlayInfoTop, OverlayInfoTopActions, OverlayInfoTopLeft, OverlayInfoTopWarning, OverlaySelected, Reference, StyledFloatingArrow };