@atlaskit/smart-card 23.14.0 → 23.14.2

package/dist/esm/view/CardWithUrl/loader.js

@@ -9,18 +9,15 @@ import { LoadingCardLink } from './component-lazy/LazyFallback';
 import { importWithRetry } from '../../utils';
 var LazyCardWithUrlContent = /*#__PURE__*/lazy(function () {
   return importWithRetry(function () {
-    return import(
-    /* webpackChunkName: "@atlaskit-internal_smartcard-urlcardcontent" */
-    './component-lazy/index');
+    return import( /* webpackChunkName: "@atlaskit-internal_smartcard-urlcardcontent" */'./component-lazy/index');
   });
 });
 export function CardWithURLRenderer(props) {
   var _useState = useState(function () {
-    return props.id ? props.id : uuid();
-  }),
-      _useState2 = _slicedToArray(_useState, 1),
-      id = _useState2[0];
-
+      return props.id ? props.id : uuid();
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    id = _useState2[0];
   useEffect(function () {
     // ComponentWillUnmount
     return function () {
@@ -29,27 +26,28 @@ export function CardWithURLRenderer(props) {
     };
   }, [id]);
   var url = props.url,
-      appearance = props.appearance,
-      isSelected = props.isSelected,
-      isFrameVisible = props.isFrameVisible,
-      onClick = props.onClick,
-      container = props.container,
-      onResolve = props.onResolve,
-      onError = props.onError,
-      testId = props.testId,
-      showActions = props.showActions,
-      inheritDimensions = props.inheritDimensions,
-      platform = props.platform,
-      embedIframeRef = props.embedIframeRef,
-      inlinePreloaderStyle = props.inlinePreloaderStyle,
-      createAnalyticsEvent = props.createAnalyticsEvent,
-      children = props.children,
-      ui = props.ui,
-      showHoverPreview = props.showHoverPreview,
-      showAuthTooltip = props.showAuthTooltip,
-      analyticsEvents = props.analyticsEvents,
-      placeholder = props.placeholder; // Wrapper around analytics.
+    appearance = props.appearance,
+    isSelected = props.isSelected,
+    isFrameVisible = props.isFrameVisible,
+    onClick = props.onClick,
+    container = props.container,
+    onResolve = props.onResolve,
+    onError = props.onError,
+    testId = props.testId,
+    showActions = props.showActions,
+    inheritDimensions = props.inheritDimensions,
+    platform = props.platform,
+    embedIframeRef = props.embedIframeRef,
+    inlinePreloaderStyle = props.inlinePreloaderStyle,
+    createAnalyticsEvent = props.createAnalyticsEvent,
+    children = props.children,
+    ui = props.ui,
+    showHoverPreview = props.showHoverPreview,
+    showAuthTooltip = props.showAuthTooltip,
+    analyticsEvents = props.analyticsEvents,
+    placeholder = props.placeholder;
 
+  // Wrapper around analytics.
   var dispatchAnalytics = useCallback(function (analyticsPayload) {
     if (analyticsPayload && analyticsPayload.attributes) {
       // Update if we haven't already set the display - possible
@@ -58,7 +56,6 @@ export function CardWithURLRenderer(props) {
         analyticsPayload.attributes.display = appearance;
       }
     }
-
     fireSmartLinkEvent(analyticsPayload, createAnalyticsEvent);
   }, [appearance, createAnalyticsEvent]);
   var analytics = useSmartLinkAnalytics(url !== null && url !== void 0 ? url : '', dispatchAnalytics, id);
@@ -66,12 +63,12 @@ export function CardWithURLRenderer(props) {
     var componentStack = info.componentStack;
     var errorInfo = {
       componentStack: componentStack
-    }; // NB: APIErrors are thrown in response to Object Resolver Service. We do not
+    };
+    // NB: APIErrors are thrown in response to Object Resolver Service. We do not
     // fire an event for these, as they do not cover failed UI render events.
     // The rest of the errors caught here are unexpected, and correlate
     // to the reliability of the smart-card front-end components.
     // Likewise, chunk loading errors are not caused by a failure of smart-card rendering.
-
     if (error.name === 'ChunkLoadError') {
       analytics.operational.chunkloadFailedEvent({
         display: appearance,
@@ -85,17 +82,15 @@ export function CardWithURLRenderer(props) {
         error: error,
         errorInfo: errorInfo
       });
-    } // Rethrow to hand control to the consumer of Smart-card.
-    // In the case of editor this allows the Smart Link to fallback to a blue link.
-
+    }
 
+    // Rethrow to hand control to the consumer of Smart-card.
+    // In the case of editor this allows the Smart Link to fallback to a blue link.
     throw error;
   }, [analytics.operational, analytics.ui, appearance, id]);
-
   if (!url) {
     throw new Error('@atlaskit/smart-card: url property is missing.');
   }
-
   var cardWithUrlProps = {
     id: id,
     url: url,
@@ -126,7 +121,6 @@ export function CardWithURLRenderer(props) {
     fallback: /*#__PURE__*/React.createElement(LoadingCardLink, cardWithUrlProps)
   }, /*#__PURE__*/React.createElement(LazyCardWithUrlContent, cardWithUrlProps, children)));
 }
-
 var ErrorFallback = function ErrorFallback() {
   return null;
 };

package/dist/esm/view/EmbedCard/EmbedResizeMessageListener.js

@@ -5,38 +5,27 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 import React from 'react';
 import { embedHeaderHeight } from './components/styled';
 export var EmbedResizeMessageListener = /*#__PURE__*/function (_React$Component) {
   _inherits(EmbedResizeMessageListener, _React$Component);
-
   var _super = _createSuper(EmbedResizeMessageListener);
-
   function EmbedResizeMessageListener() {
     var _this;
-
     _classCallCheck(this, EmbedResizeMessageListener);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "messageCallback", function (event) {
       var embedIframeRef = _this.props.embedIframeRef;
       var isFromExpectedIframe = embedIframeRef.current && event.source === embedIframeRef.current.contentWindow;
       var isStringData = typeof event.data === 'string';
-
       if (isFromExpectedIframe && isStringData) {
         try {
           var data = JSON.parse(event.data);
-
           if (data.method === 'resize' && typeof data.height === 'number') {
             _this.onEmbedHeightChange({
               height: data.height
@@ -45,16 +34,13 @@ export var EmbedResizeMessageListener = /*#__PURE__*/function (_React$Component)
         } catch (e) {}
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "onEmbedHeightChange", function (data) {
       var onHeightUpdate = _this.props.onHeightUpdate;
       var height = data.height + embedHeaderHeight;
       onHeightUpdate(height);
     });
-
     return _this;
   }
-
   _createClass(EmbedResizeMessageListener, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -71,6 +57,5 @@ export var EmbedResizeMessageListener = /*#__PURE__*/function (_React$Component)
       return this.props.children;
     }
   }]);
-
   return EmbedResizeMessageListener;
 }(React.Component);

package/dist/esm/view/EmbedCard/components/ExpandedFrame.js

@@ -3,31 +3,28 @@ import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Cont
 import { handleClickCommon } from '../../BlockCard/utils/handlers';
 export var ExpandedFrame = function ExpandedFrame(_ref) {
   var _ref$isPlaceholder = _ref.isPlaceholder,
-      isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
-      children = _ref.children,
-      onClick = _ref.onClick,
-      icon = _ref.icon,
-      text = _ref.text,
-      isSelected = _ref.isSelected,
-      isFrameVisible = _ref.isFrameVisible,
-      isVisible = _ref.isVisible,
-      href = _ref.href,
-      minWidth = _ref.minWidth,
-      maxWidth = _ref.maxWidth,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'expanded-frame' : _ref$testId,
-      inheritDimensions = _ref.inheritDimensions,
-      _ref$allowScrollBar = _ref.allowScrollBar,
-      allowScrollBar = _ref$allowScrollBar === void 0 ? false : _ref$allowScrollBar;
-
+    isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
+    children = _ref.children,
+    onClick = _ref.onClick,
+    icon = _ref.icon,
+    text = _ref.text,
+    isSelected = _ref.isSelected,
+    isFrameVisible = _ref.isFrameVisible,
+    isVisible = _ref.isVisible,
+    href = _ref.href,
+    minWidth = _ref.minWidth,
+    maxWidth = _ref.maxWidth,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'expanded-frame' : _ref$testId,
+    inheritDimensions = _ref.inheritDimensions,
+    _ref$allowScrollBar = _ref.allowScrollBar,
+    allowScrollBar = _ref$allowScrollBar === void 0 ? false : _ref$allowScrollBar;
   var isInteractive = function isInteractive() {
     return !isPlaceholder && (Boolean(href) || Boolean(onClick));
   };
-
   var handleClick = function handleClick(event) {
     return handleClickCommon(event, onClick);
   };
-
   var renderHeader = function renderHeader() {
     return /*#__PURE__*/React.createElement(Header, {
       className: "embed-header"
@@ -40,7 +37,6 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       onClick: handleClick
     }, text)));
   };
-
   var renderContent = function renderContent() {
     return /*#__PURE__*/React.createElement(Content, {
       "data-testid": "embed-content-wrapper",
@@ -48,7 +44,6 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       isInteractive: isInteractive()
     }, children);
   };
-
   if (!isPlaceholder && href) {
     return /*#__PURE__*/React.createElement(LinkWrapper, {
       className: className,
@@ -59,9 +54,11 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       maxWidth: maxWidth,
       isVisible: isVisible,
       "data-testid": testId,
-      "data-trello-do-not-use-override": testId // Due to limitations of testing library, we can't assert ::after
+      "data-trello-do-not-use-override": testId
+      // Due to limitations of testing library, we can't assert ::after
       ,
-      "data-is-selected": isSelected // Due to limitation of testing library, we can't match background colors #ebecf0 and rgb(235, 236, 240)
+      "data-is-selected": isSelected
+      // Due to limitation of testing library, we can't match background colors #ebecf0 and rgb(235, 236, 240)
       ,
       "data-is-frame-visible": isFrameVisible,
       inheritDimensions: inheritDimensions

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

@@ -1,12 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import React, { useEffect, useState, useRef } from 'react';
 import { getIframeSandboxAttribute } from '../../../utils';
 import { IframeDwellTracker } from './IframeDwellTracker';
 import { useFeatureFlag } from '@atlaskit/link-provider';
-
 function mergeRefs(refs) {
   return function (value) {
     refs.forEach(function (ref) {
@@ -18,58 +16,48 @@ function mergeRefs(refs) {
     });
   };
 }
-
 export var Frame = /*#__PURE__*/React.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 = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isIframeLoaded = _useState2[0],
-      setIframeLoaded = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isIframeLoaded = _useState2[0],
+    setIframeLoaded = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isMouseOver = _useState4[0],
-      setMouseOver = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    isMouseOver = _useState4[0],
+    setMouseOver = _useState4[1];
   var _useState5 = useState(true),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isWindowFocused = _useState6[0],
-      setWindowFocused = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    isWindowFocused = _useState6[0],
+    setWindowFocused = _useState6[1];
   var ref = useRef();
   var mergedRef = mergeRefs([iframeRef, ref]);
   var trackIframeDwellEvents = useFeatureFlag('trackIframeDwellEvents');
-
   var _useState7 = useState(0),
-      _useState8 = _slicedToArray(_useState7, 2),
-      percentVisible = _useState8[0],
-      setPercentVisible = _useState8[1];
+    _useState8 = _slicedToArray(_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 = useState([0.75, 0.8, 0.85, 0.9, 0.95, 1]),
-      _useState10 = _slicedToArray(_useState9, 1),
-      threshold = _useState10[0];
-
+    _useState10 = _slicedToArray(_useState9, 1),
+    threshold = _useState10[0];
   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);
@@ -86,19 +74,15 @@ export var Frame = /*#__PURE__*/React.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 () {
@@ -106,11 +90,9 @@ export var Frame = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
       window.removeEventListener('focus', onFocus);
     };
   }, [trackIframeDwellEvents, ref, onIframeFocus]);
-
   if (!url) {
     return null;
   }
-
   return jsx(React.Fragment, null, trackIframeDwellEvents ? jsx(IframeDwellTracker, {
     isIframeLoaded: isIframeLoaded,
     isMouseOver: isMouseOver,

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

@@ -1,8 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /** @jsx jsx */
 import { useEffect, useRef, useState } from 'react';
-
 /**
  * A kind of cheap logarithmic backoff. Fire analytics after the user has
  * dwelled for 5 seconds, then 10 seconds, and so on.
@@ -10,27 +8,27 @@ import { useEffect, useRef, useState } from 'react';
 var INTERVALS_TO_LOG = [5, 10, 15, 20, 25, 30, 45, 60, 90, 120, 180];
 export 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 = useState({
-    time: 0,
-    percentVisible: 0
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      dwell = _useState2[0],
-      setDwell = _useState2[1];
-
-  var dwellTimeoutId = useRef(); // fire analytics when the dwell timer reaches 5 seconds
-
+      time: 0,
+      percentVisible: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    dwell = _useState2[0],
+    setDwell = _useState2[1];
+  var dwellTimeoutId = useRef();
+
+  // fire analytics when the dwell timer reaches 5 seconds
   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
   useEffect(function () {
     var incrementDwellTime = function incrementDwellTime() {
       // callback is called on dwell state changes, so change percentVisible and time together
@@ -43,15 +41,12 @@ export 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);

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

@@ -3,18 +3,16 @@ import ImageLoader from 'react-render-image';
 import { Image } from './styled';
 export 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.createElement(ImageLoader, {
     src: src,
     loading: defaultIcon,

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

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
-
 import styled from '@emotion/styled';
 import { borderRadius as akBorderRadius, fontFamily } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
@@ -19,56 +17,45 @@ export var csssize = function csssize() {
   var unit = typeof value === 'number' ? 'px' : '';
   return "\n    width: ".concat(value).concat(unit, ";\n    height: ").concat(value).concat(unit, ";\n  ");
 };
-
 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(gridSize(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(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(gridSize(2), ");\n    height: calc(100% + ").concat(gridSize(1), ");\n    left: -").concat(gridSize(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 : '';
 }
-
 export var LinkWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
   return wrapperStyles(props);
 });
@@ -79,7 +66,6 @@ export var embedHeaderHeight = 32;
 export var Header = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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, ")"));
 export var IconWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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 {
@@ -88,7 +74,6 @@ export var IconWrapper = styled.div(_templateObject4 || (_templateObject4 = _tag
 });
 export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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 {
@@ -100,7 +85,6 @@ export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _tag
 // manage scrolling behaviour.
 export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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)", gridSize(4), gridSize(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 {