@atlaskit/smart-card 23.14.0 → 23.14.2

package/dist/cjs/view/EmbedCard/components/Frame.js

@@ -1,31 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Frame = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("@emotion/react");
-
 var _react2 = _interopRequireWildcard(require("react"));
-
 var _utils = require("../../../utils");
-
 var _IframeDwellTracker = require("./IframeDwellTracker");
-
 var _linkProvider = require("@atlaskit/link-provider");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /** @jsx jsx */
+
 function mergeRefs(refs) {
   return function (value) {
     refs.forEach(function (ref) {
@@ -37,58 +27,48 @@ function mergeRefs(refs) {
     });
   };
 }
-
 var Frame = /*#__PURE__*/_react2.default.forwardRef(function (_ref, iframeRef) {
   var url = _ref.url,
-      _ref$isTrusted = _ref.isTrusted,
-      isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
-      testId = _ref.testId,
-      onIframeDwell = _ref.onIframeDwell,
-      onIframeFocus = _ref.onIframeFocus;
-
+    _ref$isTrusted = _ref.isTrusted,
+    isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
+    testId = _ref.testId,
+    onIframeDwell = _ref.onIframeDwell,
+    onIframeFocus = _ref.onIframeFocus;
   var _useState = (0, _react2.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isIframeLoaded = _useState2[0],
-      setIframeLoaded = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isIframeLoaded = _useState2[0],
+    setIframeLoaded = _useState2[1];
   var _useState3 = (0, _react2.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isMouseOver = _useState4[0],
-      setMouseOver = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isMouseOver = _useState4[0],
+    setMouseOver = _useState4[1];
   var _useState5 = (0, _react2.useState)(true),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      isWindowFocused = _useState6[0],
-      setWindowFocused = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isWindowFocused = _useState6[0],
+    setWindowFocused = _useState6[1];
   var ref = (0, _react2.useRef)();
   var mergedRef = mergeRefs([iframeRef, ref]);
   var trackIframeDwellEvents = (0, _linkProvider.useFeatureFlag)('trackIframeDwellEvents');
-
   var _useState7 = (0, _react2.useState)(0),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      percentVisible = _useState8[0],
-      setPercentVisible = _useState8[1];
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    percentVisible = _useState8[0],
+    setPercentVisible = _useState8[1];
+
   /**
    * These are the 'percent visible' thresholds at which the intersectionObserver will
    * trigger a state change. Eg. when the user scrolls and moves from 74% to 76%, or
    * vice versa. It's in a state object so that its static for the useEffect
    */
-
-
   var _useState9 = (0, _react2.useState)([0.75, 0.8, 0.85, 0.9, 0.95, 1]),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 1),
-      threshold = _useState10[0];
-
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 1),
+    threshold = _useState10[0];
   (0, _react2.useEffect)(function () {
     if (!trackIframeDwellEvents) {
       return;
     }
-
     if (!ref || !ref.current) {
       return;
     }
-
     var observer = new IntersectionObserver(function (entries) {
       entries.forEach(function (entry) {
         setPercentVisible(entry === null || entry === void 0 ? void 0 : entry.intersectionRatio);
@@ -105,19 +85,15 @@ var Frame = /*#__PURE__*/_react2.default.forwardRef(function (_ref, iframeRef) {
     if (!trackIframeDwellEvents) {
       return;
     }
-
     var onBlur = function onBlur() {
       setWindowFocused(false);
-
       if (document.activeElement === ref.current) {
         onIframeFocus && onIframeFocus();
       }
     };
-
     var onFocus = function onFocus() {
       setWindowFocused(true);
     };
-
     window.addEventListener('blur', onBlur);
     window.addEventListener('focus', onFocus);
     return function () {
@@ -125,11 +101,9 @@ var Frame = /*#__PURE__*/_react2.default.forwardRef(function (_ref, iframeRef) {
       window.removeEventListener('focus', onFocus);
     };
   }, [trackIframeDwellEvents, ref, onIframeFocus]);
-
   if (!url) {
     return null;
   }
-
   return (0, _react.jsx)(_react2.default.Fragment, null, trackIframeDwellEvents ? (0, _react.jsx)(_IframeDwellTracker.IframeDwellTracker, {
     isIframeLoaded: isIframeLoaded,
     isMouseOver: isMouseOver,
@@ -166,5 +140,4 @@ var Frame = /*#__PURE__*/_react2.default.forwardRef(function (_ref, iframeRef) {
     sandbox: (0, _utils.getIframeSandboxAttribute)(isTrusted)
   }));
 });
-
 exports.Frame = Frame;

package/dist/cjs/view/EmbedCard/components/IframeDwellTracker.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.IframeDwellTracker = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
-
 /** @jsx jsx */
 
 /**
@@ -18,30 +14,29 @@ var _react = require("react");
  * dwelled for 5 seconds, then 10 seconds, and so on.
  */
 var INTERVALS_TO_LOG = [5, 10, 15, 20, 25, 30, 45, 60, 90, 120, 180];
-
 var IframeDwellTracker = function IframeDwellTracker(_ref) {
   var isIframeLoaded = _ref.isIframeLoaded,
-      isMouseOver = _ref.isMouseOver,
-      isWindowFocused = _ref.isWindowFocused,
-      iframePercentVisible = _ref.iframePercentVisible,
-      onIframeDwell = _ref.onIframeDwell;
-
+    isMouseOver = _ref.isMouseOver,
+    isWindowFocused = _ref.isWindowFocused,
+    iframePercentVisible = _ref.iframePercentVisible,
+    onIframeDwell = _ref.onIframeDwell;
   var _useState = (0, _react.useState)({
-    time: 0,
-    percentVisible: 0
-  }),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      dwell = _useState2[0],
-      setDwell = _useState2[1];
-
-  var dwellTimeoutId = (0, _react.useRef)(); // fire analytics when the dwell timer reaches 5 seconds
+      time: 0,
+      percentVisible: 0
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    dwell = _useState2[0],
+    setDwell = _useState2[1];
+  var dwellTimeoutId = (0, _react.useRef)();
 
+  // fire analytics when the dwell timer reaches 5 seconds
   (0, _react.useEffect)(function () {
     if (dwell.time > 0 && INTERVALS_TO_LOG.includes(dwell.time)) {
       onIframeDwell && onIframeDwell(dwell.time, dwell.percentVisible);
     }
-  }, [dwell, onIframeDwell]); // start and stop tracking dwell time
+  }, [dwell, onIframeDwell]);
 
+  // start and stop tracking dwell time
   (0, _react.useEffect)(function () {
     var incrementDwellTime = function incrementDwellTime() {
       // callback is called on dwell state changes, so change percentVisible and time together
@@ -54,15 +49,12 @@ var IframeDwellTracker = function IframeDwellTracker(_ref) {
         };
       });
     };
-
     if (isIframeLoaded && isMouseOver && isWindowFocused && iframePercentVisible > 0.75) {
       if (dwellTimeoutId.current) {
         clearInterval(dwellTimeoutId.current);
       }
-
       dwellTimeoutId.current = setInterval(incrementDwellTime, 1000);
     }
-
     return function () {
       if (dwellTimeoutId.current) {
         clearInterval(dwellTimeoutId.current);
@@ -71,5 +63,4 @@ var IframeDwellTracker = function IframeDwellTracker(_ref) {
   }, [setDwell, isMouseOver, isWindowFocused, isIframeLoaded, iframePercentVisible]);
   return null;
 };
-
 exports.IframeDwellTracker = IframeDwellTracker;

package/dist/cjs/view/EmbedCard/components/ImageIcon.js

@@ -1,32 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageIcon = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
-
 var _styled = require("./styled");
-
 var ImageIcon = function ImageIcon(_ref) {
   var _ref$alt = _ref.alt,
-      alt = _ref$alt === void 0 ? '' : _ref$alt,
-      src = _ref.src,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 16 : _ref$size,
-      title = _ref.title,
-      defaultIcon = _ref.default;
-
+    alt = _ref$alt === void 0 ? '' : _ref$alt,
+    src = _ref.src,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 16 : _ref$size,
+    title = _ref.title,
+    defaultIcon = _ref.default;
   // TODO: do we need this?
   if (!src) {
     return defaultIcon || null;
   }
-
   return /*#__PURE__*/_react.default.createElement(_reactRenderImage.default, {
     src: src,
     loading: defaultIcon,
@@ -40,5 +33,4 @@ var ImageIcon = function ImageIcon(_ref) {
     errored: defaultIcon
   });
 };
-
 exports.ImageIcon = ImageIcon;

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -1,150 +1,111 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.maxAvatarCount = exports.embedHeaderHeight = exports.ellipsis = exports.csssize = exports.className = exports.cardShadow = exports.borderRadius = exports.Wrapper = exports.UsersWrapper = exports.Title = exports.Thumbnail = exports.TextWrapper = exports.ResolvedViewIconWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Description = exports.ContentWrapper = exports.Content = exports.Byline = exports.AlertWrapper = exports.ActionsWrapper = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _constants = require("@atlaskit/theme/constants");
-
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-
 var _utils = require("../../common/utils");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var className = 'media-card-frame';
 exports.className = className;
 var cardShadow = "";
 exports.cardShadow = cardShadow;
 var borderRadius = "\n  border-radius: ".concat((0, _constants.borderRadius)(), "px;\n");
 exports.borderRadius = borderRadius;
-
 var ellipsis = function ellipsis() {
   var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
   var unit = typeof maxWidth === 'number' ? 'px' : '';
   return "\n    max-width: ".concat(maxWidth).concat(unit, ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  ");
 };
-
 exports.ellipsis = ellipsis;
-
 var csssize = function csssize() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
   var unit = typeof value === 'number' ? 'px' : '';
   return "\n    width: ".concat(value).concat(unit, ";\n    height: ").concat(value).concat(unit, ";\n  ");
 };
-
 exports.csssize = csssize;
-
 function minWidth(_ref) {
   var minWidth = _ref.minWidth;
-
   if (minWidth) {
     return "min-width: ".concat(minWidth, "px;");
   } else {
     return '';
   }
 }
-
 function maxWidth(_ref2) {
   var maxWidth = _ref2.maxWidth;
-
   if (maxWidth) {
     return "max-width: ".concat(maxWidth, "px; margin: 0 auto;");
   } else {
     return 'margin: 0 auto;';
   }
 }
-
 function getinteractiveStyles(_ref3) {
   var isInteractive = _ref3.isInteractive,
-      isFrameVisible = _ref3.isFrameVisible;
+    isFrameVisible = _ref3.isFrameVisible;
   var visibleFrameStyles = isFrameVisible ? visibleStyles : '';
   var interactiveFrameStyles = isInteractive ? "\n  &:hover {\n    ".concat(visibleStyles, "\n  }\n  &:active {\n    background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n  }\n") : '';
   return "".concat(visibleFrameStyles).concat(interactiveFrameStyles);
 }
-
 function selected(_ref4) {
   var isSelected = _ref4.isSelected;
   return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(borderRadius, "\n    }\n    ") : '';
 }
-
 var height = function height(_ref5) {
   var inheritDimensions = _ref5.inheritDimensions;
   return inheritDimensions ? 'height: 100%;' : "height: ".concat((0, _utils.gs)(54));
 };
-
 var wrapperStyles = function wrapperStyles(props) {
   return "\n  ".concat(borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getinteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ").concat((0, _utils.gs)(2), ");\n    height: calc(100% + ").concat((0, _utils.gs)(1), ");\n    left: -").concat((0, _utils.gs)(1), ";\n    ").concat(borderRadius, "\n  }\n");
 };
-
 var visibleStyles = "\n  background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";\n\n  &:after {\n    background: ", "var(--ds-background-neutral, ".concat(colors.N30, ")"), " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
-
 function visible(_ref6) {
   var isVisible = _ref6.isVisible;
   return isVisible ? visibleStyles : '';
 }
-
 var LinkWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
   return wrapperStyles(props);
 });
-
 exports.LinkWrapper = LinkWrapper;
-
 var Wrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  margin-top: 10px;\n"])), function (props) {
   return wrapperStyles(props);
 });
-
 exports.Wrapper = Wrapper;
 var embedHeaderHeight = 32;
 exports.embedHeaderHeight = embedHeaderHeight;
-
 var Header = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  opacity: 0;\n  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);\n"])), embedHeaderHeight, "var(--ds-icon, ".concat(colors.N300, ")"));
-
 exports.Header = Header;
-
 var IconWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), borderRadius, csssize(16), function (_ref7) {
   var isPlaceholder = _ref7.isPlaceholder;
-
   if (isPlaceholder) {
     return "\n      background-color: ".concat("var(--ds-skeleton, ".concat(colors.N30, ")"), ";\n    ");
   } else {
     return '';
   }
 });
-
 exports.IconWrapper = IconWrapper;
-
 var TextWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", " color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  ", ";\n"])), function (_ref8) {
   var isPlaceholder = _ref8.isPlaceholder;
-
   if (isPlaceholder) {
     return "\n        ".concat(borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ", "var(--ds-skeleton, ".concat(colors.N30, ")"), ";\n      ");
   } else {
     return '';
   }
 }, "var(--ds-text-subtlest, ".concat(colors.N300, ")"), ellipsis('none'));
-
 exports.TextWrapper = TextWrapper;
-
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
 var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n\n  ", "\n"])), borderRadius, cardShadow, "var(--ds-surface-raised, white)", (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
-
   if (isInteractive) {
     return "\n          .".concat(className, ":hover & {\n            box-shadow: ", "var(--ds-shadow-overlay, 0 4px 8px -2px rgba(23, 43, 77, 0.32), 0 0 1px rgba(23, 43, 77, 0.25))", ";\n          }\n        ");
   } else {
@@ -154,53 +115,32 @@ var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _t
   var allowScrollBar = _ref10.allowScrollBar;
   return allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;';
 });
-
 exports.Content = Content;
-
 var Image = _styled.default.img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref11) {
   var size = _ref11.size;
   return csssize(size);
 }, borderRadius);
-
 exports.Image = Image;
 var maxAvatarCount = 6;
 exports.maxAvatarCount = maxAvatarCount;
-
 var ContentWrapper = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 12px 12px 12px;\n"])));
-
 exports.ContentWrapper = ContentWrapper;
-
 var Title = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N900, ")"), 20 / 16, 20 * 4);
-
 exports.Title = Title;
-
 var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), "var(--ds-text-subtlest, ".concat(colors.N300, ")"), 16 / 12, ellipsis('100%'));
-
 exports.Byline = Byline;
-
 var Description = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), 18 / 12, 18 * 3);
-
 exports.Description = Description;
-
 var ResolvedViewIconWrapper = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n"])));
-
 exports.ResolvedViewIconWrapper = ResolvedViewIconWrapper;
-
 var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref12) {
   var src = _ref12.src;
   return src;
 });
-
 exports.Thumbnail = Thumbnail;
-
 var UsersWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n"])));
-
 exports.UsersWrapper = UsersWrapper;
-
 var ActionsWrapper = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  text-align: right;\n\n  > * {\n    margin-top: 4px;\n  }\n\n  > * + * {\n    margin-left: 4px;\n  }\n"])));
-
 exports.ActionsWrapper = ActionsWrapper;
-
 var AlertWrapper = _styled.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  /* z-index has to be 1 higher than the number of avatars in the avatar stack */\n  z-index: ", ";\n"])), maxAvatarCount + 1);
-
 exports.AlertWrapper = AlertWrapper;