@atlaskit/smart-card 26.42.7 → 26.42.9

package/dist/es2019/view/InlineCard/IconAndTitleLayout/index.js

@@ -1,124 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import ImageLoader from 'react-render-image';
-import { Icon, Shimmer } from '../Icon';
-import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper, TitleWrapperClassName } from './styled';
-import LinkIcon from '@atlaskit/icon/glyph/link';
-import { LinkAppearance, NoLinkAppearance } from '../styled';
-export class IconAndTitleLayout extends React.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "handleClick", event => {
-      const {
-        onClick
-      } = this.props;
-      if (onClick) {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-      }
-    });
-    _defineProperty(this, "handleKeyPress", event => {
-      const {
-        onClick
-      } = this.props;
-      if (event.key !== ' ' && event.key !== 'Enter') {
-        return;
-      }
-      if (onClick) {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-      }
-    });
-  }
-  renderAtlaskitIcon() {
-    const {
-      icon,
-      emoji
-    } = this.props;
-    if (emoji) {
-      return /*#__PURE__*/React.createElement(EmojiWrapper, null, emoji);
-    }
-    if (!icon || typeof icon === 'string') {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(IconWrapper, null, icon);
-  }
-  renderImageIcon(errored, testId) {
-    const {
-      icon: url
-    } = this.props;
-    if (!url || typeof url !== 'string') {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(ImageLoader, {
-      src: url,
-      loaded: /*#__PURE__*/React.createElement(Icon, {
-        className: "smart-link-icon",
-        src: url,
-        "data-testid": `${testId}-image`
-      }),
-      errored: errored,
-      loading: /*#__PURE__*/React.createElement(Shimmer, {
-        testId: `${testId}-loading`
-      })
-    });
-  }
-  renderIconPlaceholder(testId) {
-    const {
-      defaultIcon
-    } = this.props;
-    if (defaultIcon) {
-      return /*#__PURE__*/React.createElement(IconWrapper, null, defaultIcon);
-    }
-    return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(LinkIcon, {
-      label: "link",
-      size: "small",
-      testId: `${testId}-default`
-    }));
-  }
-  renderIcon(testId) {
-    // We render two kinds of icons here:
-    // - Image: acquired from either DAC or Teamwork Platform Apps;
-    // - Atlaskit Icon: an Atlaskit SVG;
-    // Each of these are scaled down to 12x12.
-    const icon = this.renderAtlaskitIcon();
-    if (icon) {
-      return icon;
-    }
-    const placeholder = this.renderIconPlaceholder(testId);
-    const image = this.renderImageIcon(placeholder, testId);
-    return image || placeholder;
-  }
-  render() {
-    const {
-      children,
-      title,
-      titleColor,
-      titleTextColor,
-      link,
-      rightSide,
-      testId = 'inline-card-icon-and-title'
-    } = this.props;
-    const titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, {
-      style: {
-        color: titleTextColor
-      },
-      className: TitleWrapperClassName
-    }, title));
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconTitleWrapper, {
-      style: {
-        color: titleColor
-      },
-      "data-testid": testId
-    }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
-      href: link,
-      onClick: this.handleClick,
-      onKeyPress: this.handleKeyPress
-    }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, this.props.rightSideSpacer && ' - ', rightSide) : null));
-  }
-}
-_defineProperty(IconAndTitleLayout, "defaultProps", {
-  rightSideSpacer: true
-});

package/dist/es2019/view/InlineCard/IconAndTitleLayout/styled.js

@@ -1,101 +0,0 @@
-import styled from '@emotion/styled';
-// TODO: remove this override behaviour for @atlaskit/icon-object
-export const IconObjectOverrides = `
-  & > span {
-    height: 16px;
-    width: 14px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    line-height: 14px;
-    & > svg {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-`;
-// TODO: remove this override behaviour for @atlaskit/icon
-export const IconOverrides = `
-  & > * > span {
-    height: 16px;
-    width: 14px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    & > svg {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-`;
-
-// Wraps all icons represented in Inline Links. Icons have three sources/types:
-// - JSON-LD: from the generator.icon property coming back from ORS.
-// - @atlaskit/icon: for lock icons, unauthorized, etc.
-// - @atlaskit/icon-object: for object icons, e.g. repository, branch, etc.
-// NB: the first set of overrides style icons imported from @atlaskit/icon-object correctly.
-// NB: the second set of overrides style icons imported from @atlaskit/icon correctly.
-export const IconWrapper = styled.span`
-  user-select: none;
-  ${IconOverrides}
-  ${IconObjectOverrides}
-`;
-
-// Wraps all emoji in Inline Links similar to icon
-export const EmojiWrapper = styled.span`
-  display: inline-block;
-  margin-right: ${"var(--ds-space-025, 2px)"};
-  user-select: none;
-  ${IconOverrides}
-  ${IconObjectOverrides}
-`;
-
-// The main 'wrapping' element, title of the content.
-// NB: `white-space` adds little whitespace before wrapping.
-// NB: `word-break` line breaks as soon as an overflow takes place.
-export const IconTitleWrapper = styled.span`
-  white-space: pre-wrap;
-  word-break: break-all;
-`;
-
-// TODO: Replace overrides with proper AtlasKit solution.
-export const LozengeWrapper = styled.span`
-  display: inline-block;
-  vertical-align: 1px;
-`;
-// TODO: Replace overrides with proper AtlasKit solution.
-export const LozengeBlockWrapper = styled.span`
-  & > span {
-    margin-left: ${"var(--ds-space-050, 4px)"};
-  }
-`;
-export const RightIconPositionWrapper = styled.span`
-  margin-left: ${"var(--ds-space-025, 2px)"};
-  margin-right: ${"var(--ds-space-050, 4px)"};
-  position: relative;
-  display: inline-block;
-`;
-
-// The following components are used to absolutely position icons in the vertical center.
-// - IconPositionWrapper: the `relative` parent which has no height in itself.
-// - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
-export const IconPositionWrapper = styled.span`
-  margin-right: ${"var(--ds-space-050, 4px)"};
-  position: relative;
-  display: inline-block;
-`;
-export const IconEmptyWrapper = styled.span`
-  width: 14px;
-  height: 100%;
-  display: inline-block;
-  opacity: 0;
-`;
-
-// With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,
-// To achieve same result we use classname instead.
-export const TitleWrapperClassName = 'smart-link-title-wrapper';
-export const TitleWrapper = styled.span``;

package/dist/es2019/view/InlineCard/ResolvedView/index.js

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Frame } from '../Frame';
-import Lozenge from '@atlaskit/lozenge';
-import { IconAndTitleLayout } from '../IconAndTitleLayout';
-import { LozengeWrapper, LozengeBlockWrapper } from '../IconAndTitleLayout/styled';
-import { HoverCard } from '../../../view/HoverCard/index';
-export class InlineCardResolvedView extends React.Component {
-  renderLozenge() {
-    const {
-      lozenge
-    } = this.props;
-    if (!lozenge) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(LozengeBlockWrapper, null, /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
-      testId: "inline-card-resolved-view-lozenge",
-      appearance: lozenge.appearance || 'default',
-      isBold: lozenge.isBold
-    }, lozenge.text)));
-  }
-  render() {
-    const {
-      id,
-      title = '',
-      isSelected,
-      onClick,
-      icon,
-      link,
-      testId = 'inline-card-resolved-view',
-      titleTextColor,
-      titlePrefix,
-      showHoverPreview = false,
-      showServerActions = false
-    } = this.props;
-    const inlineCardResolvedView = /*#__PURE__*/React.createElement(Frame, {
-      testId: testId,
-      link: link,
-      isSelected: isSelected,
-      onClick: onClick
-    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-      emoji: titlePrefix,
-      icon: icon,
-      title: title,
-      titleTextColor: titleTextColor
-    }), this.renderLozenge());
-    if (showHoverPreview && link) {
-      return /*#__PURE__*/React.createElement(HoverCard, {
-        id: id,
-        showServerActions: showServerActions,
-        url: link
-      }, inlineCardResolvedView);
-    }
-    return inlineCardResolvedView;
-  }
-}

package/dist/es2019/view/InlineCard/ResolvingView/index.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import { Frame } from '../Frame';
-import Spinner from '@atlaskit/spinner';
-import { IconAndTitleLayout } from '../IconAndTitleLayout';
-import { SpinnerWrapper } from './styled';
-import { IconTitleWrapper, RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
-export class InlineCardResolvingView extends React.Component {
-  render() {
-    const {
-      url,
-      onClick,
-      isSelected,
-      inlinePreloaderStyle,
-      testId = 'inline-card-resolving-view',
-      titleTextColor
-    } = this.props;
-    if (inlinePreloaderStyle === 'on-right-without-skeleton') {
-      return /*#__PURE__*/React.createElement(Frame, {
-        withoutBackground: true,
-        testId: testId,
-        onClick: onClick,
-        isSelected: isSelected
-      }, /*#__PURE__*/React.createElement(IconTitleWrapper, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapper, null, /*#__PURE__*/React.createElement(SpinnerWrapper, {
-        className: "inline-resolving-spinner"
-      }, /*#__PURE__*/React.createElement(Spinner, {
-        size: 14
-      })))));
-    } else {
-      return /*#__PURE__*/React.createElement(Frame, {
-        testId: testId,
-        onClick: onClick,
-        isSelected: isSelected
-      }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-        link: url,
-        title: url,
-        titleTextColor: titleTextColor
-      }, /*#__PURE__*/React.createElement(SpinnerWrapper, {
-        className: "inline-resolving-spinner"
-      }, /*#__PURE__*/React.createElement(Spinner, {
-        size: 14
-      }))));
-    }
-  }
-}

package/dist/es2019/view/InlineCard/ResolvingView/styled.js

@@ -1,6 +0,0 @@
-import styled from '@emotion/styled';
-import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
-export const SpinnerWrapper = styled(IconTitleWrapper)`
-  vertical-align: text-top;
-  margin-left: ${"var(--ds-space-025, 2px)"};
-`;

package/dist/es2019/view/InlineCard/UnauthorisedView/index.js

@@ -1,84 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import Button from '@atlaskit/button/custom-theme-button';
-import LockIcon from '@atlaskit/icon/glyph/lock-filled';
-import { N500, R400 } from '@atlaskit/theme/colors';
-import React from 'react';
-import { FormattedMessage } from 'react-intl-next';
-import { messages } from '../../../messages';
-import { Frame } from '../Frame';
-import { AKIconWrapper } from '../Icon';
-import { IconAndTitleLayout } from '../IconAndTitleLayout';
-import { IconStyledButton } from '../styled';
-import { HoverCard } from '../../HoverCard';
-const FallbackUnauthorizedIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
-  label: "error",
-  size: "small",
-  primaryColor: `var(--ds-icon-danger, ${R400})`
-}));
-export class InlineCardUnauthorizedView extends React.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "handleConnectAccount", event => {
-      const {
-        analytics,
-        extensionKey,
-        onAuthorise
-      } = this.props;
-      event.preventDefault();
-      event.stopPropagation();
-      if (onAuthorise) {
-        analytics === null || analytics === void 0 ? void 0 : analytics.track.appAccountAuthStarted({
-          extensionKey
-        });
-      }
-      return onAuthorise();
-    });
-    _defineProperty(this, "renderRightSide", () => {
-      const {
-        onAuthorise,
-        context
-      } = this.props;
-      return onAuthorise ? /*#__PURE__*/React.createElement(Button, {
-        spacing: "none",
-        appearance: "subtle-link",
-        component: IconStyledButton,
-        onClick: this.handleConnectAccount,
-        testId: "button-connect-account"
-      }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
-        values: {
-          context
-        }
-      }))) : undefined;
-    });
-  }
-  render() {
-    const {
-      url,
-      icon,
-      onAuthorise,
-      onClick,
-      isSelected,
-      testId = 'inline-card-unauthorized-view',
-      showAuthTooltip = false
-    } = this.props;
-    const inlineCardUnauthenticatedView = /*#__PURE__*/React.createElement(Frame, {
-      testId: testId,
-      isSelected: isSelected
-    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-      icon: icon ? icon : FallbackUnauthorizedIcon,
-      title: url,
-      link: url,
-      rightSide: this.renderRightSide(),
-      onClick: onClick,
-      titleColor: `var(--ds-text-subtle, ${N500})`
-    }));
-    if (onAuthorise && showAuthTooltip) {
-      return /*#__PURE__*/React.createElement(HoverCard, {
-        url: url,
-        id: this.props.id
-      }, inlineCardUnauthenticatedView);
-    }
-    return inlineCardUnauthenticatedView;
-  }
-}

package/dist/es2019/view/InlineCard/index.js

@@ -1,149 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
-import { extractInlineProps } from '../../extractors/inline';
-import { extractRequestAccessContext } from '../../extractors/common/context';
-import { CardLinkView } from '../LinkView';
-import { InlineCardErroredView } from './ErroredView';
-import { InlineCardForbiddenView } from './ForbiddenView';
-import { InlineCardResolvedView } from './ResolvedView';
-import { InlineCardResolvingView } from './ResolvingView';
-import { InlineCardUnauthorizedView } from './UnauthorisedView';
-import { extractProvider } from '@atlaskit/link-extractors';
-import { useFeatureFlag } from '@atlaskit/link-provider';
-import { getExtensionKey } from '../../state/helpers';
-export { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, InlineCardForbiddenView, InlineCardUnauthorizedView };
-export const InlineCard = ({
-  analytics,
-  id,
-  url,
-  cardState,
-  handleAuthorize,
-  handleFrameClick,
-  isSelected,
-  renderers,
-  onResolve,
-  onError,
-  testId,
-  inlinePreloaderStyle,
-  showHoverPreview,
-  showAuthTooltip,
-  showServerActions
-}) => {
-  var _details$meta;
-  const {
-    status,
-    details
-  } = cardState;
-  const cardDetails = details && details.data || getEmptyJsonLd();
-  const extensionKey = getExtensionKey(details);
-  const testIdWithStatus = testId ? `${testId}-${status}-view` : undefined;
-  const showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
-  if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
-    showHoverPreview = Boolean(showHoverPreviewFlag);
-  }
-  switch (status) {
-    case 'pending':
-    case 'resolving':
-      return /*#__PURE__*/React.createElement(InlineCardResolvingView, {
-        url: url,
-        isSelected: isSelected,
-        onClick: handleFrameClick,
-        testId: testIdWithStatus,
-        inlinePreloaderStyle: inlinePreloaderStyle
-      });
-    case 'resolved':
-      const resolvedProps = extractInlineProps(cardDetails, renderers);
-      if (onResolve) {
-        onResolve({
-          url,
-          title: resolvedProps.title
-        });
-      }
-      return /*#__PURE__*/React.createElement(InlineCardResolvedView, _extends({}, resolvedProps, {
-        id: id,
-        showHoverPreview: showHoverPreview,
-        showServerActions: showServerActions,
-        link: url,
-        isSelected: isSelected,
-        onClick: handleFrameClick,
-        testId: testIdWithStatus
-      }));
-    case 'unauthorized':
-      if (onError) {
-        onError({
-          url,
-          status
-        });
-      }
-      const provider = extractProvider(cardDetails);
-      return /*#__PURE__*/React.createElement(InlineCardUnauthorizedView, {
-        icon: provider && provider.icon,
-        context: provider && provider.text,
-        url: url,
-        isSelected: isSelected,
-        onClick: handleFrameClick,
-        onAuthorise: handleAuthorize,
-        testId: testIdWithStatus,
-        showAuthTooltip: showAuthTooltip,
-        id: id,
-        analytics: analytics,
-        extensionKey: extensionKey
-      });
-    case 'forbidden':
-      if (onError) {
-        onError({
-          url,
-          status
-        });
-      }
-      const providerForbidden = extractProvider(cardDetails);
-      const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
-      const requestAccessContext = extractRequestAccessContext({
-        jsonLd: cardMetadata,
-        url,
-        context: providerForbidden === null || providerForbidden === void 0 ? void 0 : providerForbidden.text
-      });
-      return /*#__PURE__*/React.createElement(InlineCardForbiddenView, {
-        url: url,
-        icon: providerForbidden && providerForbidden.icon,
-        context: providerForbidden === null || providerForbidden === void 0 ? void 0 : providerForbidden.text,
-        isSelected: isSelected,
-        onClick: handleFrameClick,
-        onAuthorise: handleAuthorize,
-        testId: testIdWithStatus,
-        requestAccessContext: requestAccessContext
-      });
-    case 'not_found':
-      if (onError) {
-        onError({
-          url,
-          status
-        });
-      }
-      const providerNotFound = extractProvider(cardDetails);
-      return /*#__PURE__*/React.createElement(InlineCardErroredView, {
-        url: url,
-        icon: providerNotFound && providerNotFound.icon,
-        isSelected: isSelected,
-        message: "Can't find link",
-        onClick: handleFrameClick,
-        testId: testIdWithStatus || 'inline-card-not-found-view'
-      });
-    case 'fallback':
-    case 'errored':
-    default:
-      if (onError) {
-        onError({
-          url,
-          status
-        });
-      }
-      return /*#__PURE__*/React.createElement(CardLinkView, {
-        link: url,
-        isSelected: isSelected,
-        onClick: handleFrameClick,
-        testId: testIdWithStatus || 'inline-card-errored-view'
-      });
-  }
-};

package/dist/es2019/view/InlineCard/styled.js

@@ -1,35 +0,0 @@
-import styled from '@emotion/styled';
-import { B400, N200 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
-const LINK_COLOR_DARK = '#4794FF';
-
-// By default buttons will hide overflow and ellipsis content instead of wrapping.
-// This basically turns the button back into inline content
-export const IconStyledButton = styled.span`
-  text-align: initial !important;
-  display: inline !important;
-
-  > span {
-    display: inline;
-    > span {
-      overflow: initial;
-      text-overflow: initial;
-      white-space: initial;
-    }
-  }
-`;
-export const NoLinkAppearance = styled.span`
-  color: ${themed({
-  light: `var(--ds-text-subtlest, ${N200})`,
-  dark: `var(--ds-text-subtlest, ${LINK_COLOR_DARK})`
-})};
-`;
-export const LowercaseAppearance = styled.span`
-  text-transform: lowercase;
-`;
-export const LinkAppearance = styled.a`
-  color: ${themed({
-  light: `var(--ds-link, ${B400})`,
-  dark: `var(--ds-link, ${LINK_COLOR_DARK})`
-})};
-`;

package/dist/es2019/view/InlineCard/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/view/InlineCard/ErroredView/index.js

@@ -1,82 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-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 { R300 } from '@atlaskit/theme/colors';
-import ErrorIcon from '@atlaskit/icon/glyph/error';
-import Button from '@atlaskit/button/custom-theme-button';
-import { Frame } from '../Frame';
-import { IconAndTitleLayout } from '../IconAndTitleLayout';
-import { AKIconWrapper } from '../Icon';
-import { messages } from '../../../messages';
-import { FormattedMessage } from 'react-intl-next';
-import { IconStyledButton, LowercaseAppearance } from '../styled';
-export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
-  _inherits(InlineCardErroredView, _React$Component);
-  var _super = _createSuper(InlineCardErroredView);
-  function InlineCardErroredView() {
-    var _this;
-    _classCallCheck(this, InlineCardErroredView);
-    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), "handleRetry", function (event) {
-      var onRetry = _this.props.onRetry;
-      if (onRetry) {
-        event.preventDefault();
-        event.stopPropagation();
-        onRetry();
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "renderRightSide", function () {
-      var _this$props = _this.props,
-        onRetry = _this$props.onRetry,
-        message = _this$props.message;
-      return !onRetry ? message : /*#__PURE__*/React.createElement(React.Fragment, null, message, ', ', /*#__PURE__*/React.createElement(Button, {
-        spacing: "none",
-        appearance: "subtle-link",
-        component: IconStyledButton,
-        onClick: _this.handleRetry,
-        role: "button"
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again, function (formattedMessage) {
-        return /*#__PURE__*/React.createElement(LowercaseAppearance, null, formattedMessage);
-      })));
-    });
-    return _this;
-  }
-  _createClass(InlineCardErroredView, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        url = _this$props2.url,
-        onClick = _this$props2.onClick,
-        isSelected = _this$props2.isSelected,
-        _this$props2$testId = _this$props2.testId,
-        testId = _this$props2$testId === void 0 ? 'inline-card-errored-view' : _this$props2$testId,
-        icon = _this$props2.icon;
-      return /*#__PURE__*/React.createElement(Frame, {
-        testId: testId,
-        isSelected: isSelected
-      }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-        icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
-          label: "error",
-          size: "small",
-          primaryColor: "var(--ds-icon-danger, ".concat(R300, ")"),
-          testId: "errored-view-default-icon"
-        })),
-        link: url,
-        title: url,
-        onClick: onClick,
-        rightSide: this.renderRightSide()
-      }));
-    }
-  }]);
-  return InlineCardErroredView;
-}(React.Component);