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

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

@@ -0,0 +1,398 @@
+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

@@ -0,0 +1,311 @@
+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 };