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

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

@@ -0,0 +1,338 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var polished = require('polished');
+var styled = require('styled-components');
+var defaultTheme = require('../../../../../utils/defaultTheme.js');
+var react = require('@floating-ui/react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  ${0};
+`), props => props.disabled && styled.css(_t2 || (_t2 = _`
+      cursor: not-allowed;
+    `)));
+const Reference = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+  width: 100%;
+  height: 100%;
+`));
+const AssetGalleryCompactCard = styled__default["default"].div.attrs(defaultTheme.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 && styled.css(_t5 || (_t5 = _`
+      pointer-events: none;
+      opacity: 0.4;
+    `)), props => props.extendedSelectMode && styled.css(_t6 || (_t6 = _`
+      cursor: pointer;
+    `)));
+const Figure = styled__default["default"].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 ? styled.css(_t8 || (_t8 = _`
+            object-fit: cover;
+          `)) : styled.css(_t9 || (_t9 = _`
+            object-fit: contain;
+          `)));
+const FigureOverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`));
+const OverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.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 ? styled.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) && styled.css(_t14 || (_t14 = _`
+      opacity: 1;
+    `)), Overlay);
+const OverlayInfo = styled__default["default"].div.attrs(defaultTheme.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__default["default"].div.attrs(defaultTheme.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'), polished.rgba(props.theme.getColor('emerald-500'), 0.7));
+});
+const OverlayHasError = styled__default["default"].div.attrs(defaultTheme.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'), polished.rgba(props.theme.getColor('red-500'), 0.7));
+});
+const OverlaySelected = styled__default["default"].div.attrs(defaultTheme.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', polished.rgba(props.theme.getColor('gray-100'), 0.5), polished.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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t19 || (_t19 = _`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  padding: 8px;
+  display: flex;
+`));
+const OverlayInfoTopActions = styled__default["default"].div.attrs(defaultTheme.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__default["default"].div.attrs(defaultTheme.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__default["default"].div.attrs(defaultTheme.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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 8px;
+  display: flex;
+`));
+const OverlayInfoBottomSelectButton = styled__default["default"].div.attrs(defaultTheme.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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t25 || (_t25 = _`
+  margin-left: auto;
+  opacity: 1;
+
+  ${0}:hover & {
+    opacity: 0;
+  }
+`), Overlay);
+const ConsumerDefinedOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t26 || (_t26 = _`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+`));
+styled__default["default"].div(_t27 || (_t27 = _`
+  margin: 4px;
+`));
+styled__default["default"].div.attrs(defaultTheme.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__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_t29 || (_t29 = _`
+  ${0}
+`), props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white')));
+
+exports.AssetGalleryCompactCard = AssetGalleryCompactCard;
+exports.AssetGalleryWrapper = AssetGalleryWrapper;
+exports.ConsumerDefinedOverlay = ConsumerDefinedOverlay;
+exports.Figure = Figure;
+exports.FigureOverlayBackdrop = FigureOverlayBackdrop;
+exports.Overlay = Overlay;
+exports.OverlayBackdrop = OverlayBackdrop;
+exports.OverlayCompleted = OverlayCompleted;
+exports.OverlayHasError = OverlayHasError;
+exports.OverlayInfo = OverlayInfo;
+exports.OverlayInfoBottom = OverlayInfoBottom;
+exports.OverlayInfoBottomMediaIcon = OverlayInfoBottomMediaIcon;
+exports.OverlayInfoBottomSelectButton = OverlayInfoBottomSelectButton;
+exports.OverlayInfoTop = OverlayInfoTop;
+exports.OverlayInfoTopActions = OverlayInfoTopActions;
+exports.OverlayInfoTopLeft = OverlayInfoTopLeft;
+exports.OverlayInfoTopWarning = OverlayInfoTopWarning;
+exports.OverlaySelected = OverlaySelected;
+exports.Reference = Reference;
+exports.StyledFloatingArrow = StyledFloatingArrow;