@atlaskit/smart-card 26.55.1 → 26.56.0

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

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TitleWrapperClassName = exports.TitleWrapper = exports.RightIconPositionWrapper = exports.LozengeWrapper = exports.IconWrapper = exports.IconTitleWrapper = exports.IconPositionWrapper = exports.IconOverrides = exports.IconObjectOverrides = exports.IconEmptyWrapper = exports.EmojiWrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 // TODO: remove this override behaviour for @atlaskit/icon-object
 var IconObjectOverrides = exports.IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 3px;\n    left: 0;\n    line-height: 14px;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
 // TODO: remove this override behaviour for @atlaskit/icon
@@ -19,27 +17,55 @@ var IconOverrides = exports.IconOverrides = "\n\n  & > * > span {\n    height: 1
 // - @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.
-var IconWrapper = exports.IconWrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
+var IconWrapper = exports.IconWrapper = _styled.default.span({
+  userSelect: 'none'
+}, IconOverrides, IconObjectOverrides);
 
 // Wraps all emoji in Inline Links similar to icon
-var EmojiWrapper = exports.EmojiWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  margin-right: ", ";\n  user-select: none;\n  ", "\n  ", "\n"])), "var(--ds-space-025, 2px)", IconOverrides, IconObjectOverrides);
+var EmojiWrapper = exports.EmojiWrapper = _styled.default.span({
+  display: 'inline-block',
+  marginRight: "var(--ds-space-025, 2px)",
+  userSelect: '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.
-var IconTitleWrapper = exports.IconTitleWrapper = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: pre-wrap;\n  word-break: break-all;\n  box-decoration-break: clone;\n  padding: ", " ", ";\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)");
+var IconTitleWrapper = exports.IconTitleWrapper = _styled.default.span({
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all',
+  boxDecorationBreak: 'clone',
+  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
+});
 
 // TODO: Replace overrides with proper AtlasKit solution.
-var LozengeWrapper = exports.LozengeWrapper = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: 1px;\n  margin: 0 ", " 0 ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-025, 2px)");
-var RightIconPositionWrapper = exports.RightIconPositionWrapper = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-025, 2px)");
+var LozengeWrapper = exports.LozengeWrapper = _styled.default.span({
+  display: 'inline-block',
+  verticalAlign: '1px',
+  margin: "0 ".concat("var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-025, 2px)")
+});
+var RightIconPositionWrapper = exports.RightIconPositionWrapper = _styled.default.span({
+  marginLeft: "var(--ds-space-025, 2px)",
+  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.
-var IconPositionWrapper = exports.IconPositionWrapper = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-050, 4px)");
-var IconEmptyWrapper = exports.IconEmptyWrapper = _styled.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"])));
+var IconPositionWrapper = exports.IconPositionWrapper = _styled.default.span({
+  marginRight: "var(--ds-space-050, 4px)",
+  position: 'relative',
+  display: 'inline-block'
+});
+var IconEmptyWrapper = exports.IconEmptyWrapper = _styled.default.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.
 var TitleWrapperClassName = exports.TitleWrapperClassName = 'smart-link-title-wrapper';
-var TitleWrapper = exports.TitleWrapper = _styled.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)([""])));
+var TitleWrapper = exports.TitleWrapper = _styled.default.span({});

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

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SpinnerWrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _styled2 = require("../IconAndTitleLayout/styled");
-var _templateObject;
-var SpinnerWrapper = exports.SpinnerWrapper = (0, _styled.default)(_styled2.IconTitleWrapper)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  vertical-align: text-bottom;\n  padding: 0px;\n"])));
+var SpinnerWrapper = exports.SpinnerWrapper = (0, _styled.default)(_styled2.IconTitleWrapper)({
+  verticalAlign: 'text-bottom',
+  padding: '0px'
+});

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

@@ -5,13 +5,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NoLinkAppearance = exports.LowercaseAppearance = exports.LinkAppearance = exports.IconStyledButton = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
-var IconStyledButton = exports.IconStyledButton = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &&& {\n    text-align: initial;\n    display: inline;\n    vertical-align: baseline;\n    border-radius: ", ";\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n    padding: ", " ", ";\n    background-clip: padding-box;\n    box-decoration-break: clone;\n  }\n  > span {\n    display: inline;\n    overflow: initial;\n    text-overflow: initial;\n    white-space: initial;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])), "var(--ds-border-radius-100, 4px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)");
-var NoLinkAppearance = exports.NoLinkAppearance = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-left: ", ";\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
-var LowercaseAppearance = exports.LowercaseAppearance = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  text-transform: lowercase;\n"])));
-var LinkAppearance = exports.LinkAppearance = _styled.default.a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    text-decoration: none;\n  }\n"])), "var(--ds-link, ".concat(_colors.B400, ")"));
+var IconStyledButton = exports.IconStyledButton = _styled.default.span({
+  '&&&': {
+    textAlign: 'initial',
+    display: 'inline',
+    verticalAlign: 'baseline',
+    borderRadius: "var(--ds-border-radius-100, 4px)",
+    borderTopLeftRadius: '0px',
+    borderBottomLeftRadius: '0px',
+    padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
+    backgroundClip: 'padding-box',
+    boxDecorationBreak: 'clone'
+  },
+  '> span': {
+    display: 'inline',
+    overflow: 'initial',
+    textOverflow: 'initial',
+    whiteSpace: 'initial',
+    '> span': {
+      overflow: 'initial',
+      textOverflow: 'initial',
+      whiteSpace: 'initial'
+    }
+  }
+});
+var NoLinkAppearance = exports.NoLinkAppearance = _styled.default.span({
+  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+  marginLeft: "var(--ds-space-050, 4px)"
+});
+var LowercaseAppearance = exports.LowercaseAppearance = _styled.default.span({
+  textTransform: 'lowercase'
+});
+var LinkAppearance = exports.LinkAppearance = _styled.default.a({
+  color: "var(--ds-link, ".concat(_colors.B400, ")"),
+  '&:hover': {
+    textDecoration: 'none'
+  }
+});

package/dist/cjs/view/LinkUrl/LinkWarningModal/styled.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.breakWordsCss = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject;
-var breakWordsCss = exports.breakWordsCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  white-space: pre-line;\n  word-break: break-all;\n"])));
+var breakWordsCss = exports.breakWordsCss = (0, _react.css)({
+  whiteSpace: 'pre-line',
+  wordBreak: 'break-all'
+});

package/dist/cjs/view/LinkUrl/index.js

@@ -17,7 +17,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.55.1",
+  packageVersion: "26.56.0",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/common/Icon.js

@@ -5,14 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.blockCardIconImageClassName = exports.Icon = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 var _utils = require("./utils");
-var _templateObject, _templateObject2;
 /** @jsx jsx */
+
 /**
  * Class name for selecting non-flexible block card icon image
  *
@@ -24,13 +23,22 @@ var getImageStyles = function getImageStyles(isFlexibleUi) {
   if (isFlexibleUi) {
     return;
   }
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", ";\n    width: ", ";\n  "])), (0, _utils.gs)(2), (0, _utils.gs)(2));
+  return (0, _react.css)({
+    height: (0, _utils.gs)(2),
+    width: (0, _utils.gs)(2)
+  });
 };
 var getSpanStyles = function getSpanStyles(isFlexibleUi) {
   if (isFlexibleUi) {
     return;
   }
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    height: ", ";\n    width: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "])), (0, _utils.gs)(2.5), (0, _utils.gs)(2));
+  return (0, _react.css)({
+    height: (0, _utils.gs)(2.5),
+    width: (0, _utils.gs)(2),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  });
 };
 var Icon = exports.Icon = function Icon(_ref) {
   var url = _ref.url,

package/dist/cjs/view/common/ai-icon-loading/index.js

@@ -5,19 +5,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
 var _constants = require("../ai-prism/constants");
-var _templateObject;
 /** @jsx jsx */
+
 /**
  * The bulk of this file is originally from
  * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
  * with modifications
  */
 
-var bounce = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    transform: translateY(0);\n  }\n\n  // 200ms of 1200ms = 16.67%\n  16.67% {\n    transform: translateY(-2px);\n  }\n\n  // 400ms of 1200ms = 33.33%\n  33.33% {\n    transform: translateY(0px);\n  }\n"])));
+var bounce = (0, _react.keyframes)({
+  from: {
+    transform: 'translateY(0)'
+  },
+  '16.67%': {
+    transform: 'translateY(-2px)'
+  },
+  '33.33%': {
+    transform: 'translateY(0px)'
+  }
+});
 var BASE_DELAY = 400;
 var QUEUE_DELAY = 200;
 var animationStyles = (0, _react.css)({

package/dist/es2019/constants.js

@@ -145,6 +145,7 @@ export let ElementName = /*#__PURE__*/function (ElementName) {
  * Flexible UI action (button)
  */
 export let ActionName = /*#__PURE__*/function (ActionName) {
+  ActionName["CopyLinkAction"] = "CopyLinkAction";
   ActionName["DeleteAction"] = "DeleteAction";
   ActionName["EditAction"] = "EditAction";
   ActionName["FollowAction"] = "FollowAction";

package/dist/es2019/extractors/flexible/actions/extract-copy-link-action.js

@@ -0,0 +1,15 @@
+import { extractLink } from '@atlaskit/link-extractors';
+import { CardAction } from '../../../view/Card/types';
+import { canShowAction } from '../../../utils/actions/can-show-action';
+export const extractCopyLinkAction = (data, actionOptions) => {
+  if (!canShowAction(CardAction.CopyLinkAction, actionOptions)) {
+    return;
+  }
+  const url = extractLink(data);
+  if (!url) {
+    return;
+  }
+  return {
+    url
+  };
+};

package/dist/es2019/extractors/flexible/actions/index.js

@@ -2,8 +2,10 @@ import { ActionName } from '../../../constants';
 import { extractDownloadAction } from './extract-download-action';
 import { extractPreviewAction } from './extract-preview-action';
 import extractFollowAction from './extract-follow-action';
+import { extractCopyLinkAction } from './extract-copy-link-action';
 const extractActions = (response, data, actionOptions, id) => {
   const action = {
+    [ActionName.CopyLinkAction]: extractCopyLinkAction(data, actionOptions),
     [ActionName.DownloadAction]: extractDownloadAction(data, actionOptions),
     [ActionName.FollowAction]: extractFollowAction(response, actionOptions, id),
     [ActionName.PreviewAction]: extractPreviewAction(response, actionOptions)

package/dist/es2019/messages.js

@@ -45,6 +45,11 @@ export const messages = defineMessages({
     defaultMessage: "We cannot show the results of this summary as it goes against <a>Atlassian's Acceptable Use Policy</a>.",
     description: 'Shown when AI summary is summarising the link resource content and the content violates atlassians acceptable use policy.'
   },
+  ai_summary_error_hipaa_content_detected: {
+    id: 'fabric.linking.ai_summary_error_hipaa_content_detected',
+    defaultMessage: 'Atlassian Intelligence was unable to process your request as your content contains links to HIPAA restricted content.',
+    description: 'Shown when the AI summary is summarising the link resource content and the content contains HIPAA restricted content.'
+  },
   assigned_to: {
     id: 'fabric.linking.assigned_to',
     defaultMessage: 'Assigned to {context}',
@@ -145,6 +150,11 @@ export const messages = defineMessages({
     defaultMessage: 'Copy link',
     description: ''
   },
+  copied_url_to_clipboard: {
+    id: 'fabric.linking.copied_url_to_clipboard.nonfinal',
+    defaultMessage: 'Copied!',
+    description: 'Url has been copied to the clipboard'
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",

package/dist/es2019/state/hooks/use-ai-summary/ai-summary-service/index.js

@@ -5,6 +5,7 @@ import { addPath } from './utils';
 import { readStream } from './readStream';
 export class AISummaryService {
   constructor(props) {
+    var _props$product;
     _defineProperty(this, "state", {
       content: '',
       status: 'ready'
@@ -39,7 +40,7 @@ export class AISummaryService {
       headers: {
         'Content-Type': 'application/json;charset=UTF-8',
         'x-experience-id': 'smart-link',
-        'x-product': props.product || 'confluence',
+        'x-product': ((_props$product = props.product) === null || _props$product === void 0 ? void 0 : _props$product.toLowerCase()) || 'confluence',
         ...props.headers
       }
     };

package/dist/es2019/state/hooks/use-ai-summary/ai-summary-service/types.js

@@ -1 +1 @@
-export const errorMessages = ['NETWORK_ERROR', 'NO_ANSWER', 'RATE_LIMIT', 'NO_AGENT', 'PLUGIN_ERRORED', 'OPENAI_RATE_LIMIT_USER_ABUSE', 'ACCEPTABLE_USE_VIOLATIONS', 'AI_DISABLED', 'UNEXPECTED'];
+export const errorMessages = ['NETWORK_ERROR', 'NO_ANSWER', 'RATE_LIMIT', 'NO_AGENT', 'PLUGIN_ERRORED', 'OPENAI_RATE_LIMIT_USER_ABUSE', 'ACCEPTABLE_USE_VIOLATIONS', 'AI_DISABLED', 'UNEXPECTED', 'HIPAA_CONTENT_DETECTED'];

package/dist/es2019/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.55.1"
+  packageVersion: "26.56.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -10,11 +10,11 @@ import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
 import { messages } from '../../../../messages';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
-const contentStyles = css`
-  color: ${"var(--ds-text-subtlest, #626F86)"};
-  margin-top: 0.5rem;
-  font-size: 0.75rem;
-`;
+const contentStyles = css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  marginTop: "var(--ds-space-100, 0.5rem)",
+  fontSize: '0.75rem'
+});
 
 /**
  * This view represents a Block card that has an 'Unauthorized' status .

package/dist/es2019/view/BlockCard/views/styled.js

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 // TODO: Replace overrides with proper AtlasKit solution.
-export const LozengeBlockWrapper = styled.span`
-  & > span {
-    margin-left: ${"var(--ds-space-050, 4px)"};
+export const LozengeBlockWrapper = styled.span({
+  '& > span': {
+    marginLeft: "var(--ds-space-050, 4px)"
   }
-`;
+});

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

@@ -4,5 +4,6 @@ export let CardAction = /*#__PURE__*/function (CardAction) {
   CardAction["ViewAction"] = "ViewAction";
   CardAction["ChangeStatusAction"] = "ChangeStatusAction";
   CardAction["FollowAction"] = "FollowAction";
+  CardAction["CopyLinkAction"] = "CopyLinkAction";
   return CardAction;
 }({});

package/dist/es2019/view/EmbedCard/views/unresolved-view/styled.js

@@ -1,31 +1,31 @@
 import { css } from '@emotion/react';
 import { gs } from '../../../common/utils';
-export const containerStyles = css`
-  display: grid;
-  height: inherit;
-`;
-export const contentStyles = css`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin: auto;
-  padding: ${"var(--ds-space-200, 16px)"};
-  gap: ${"var(--ds-space-250, 20px)"};
-  max-width: ${gs(50)};
-`;
-export const imageStyles = css`
-  height: 120px;
-  width: 180px;
-  object-fit: contain;
-  object-position: center center;
-`;
-export const titleStyles = css`
-  text-align: center;
-  margin: 0;
-  padding: 0;
-`;
-export const descriptionStyles = css`
-  font-size: 1em;
-  text-align: center;
-`;
+export const containerStyles = css({
+  display: 'grid',
+  height: 'inherit'
+});
+export const contentStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  margin: 'auto',
+  padding: "var(--ds-space-200, 16px)",
+  gap: "var(--ds-space-250, 20px)",
+  maxWidth: gs(50)
+});
+export const imageStyles = css({
+  height: '120px',
+  width: '180px',
+  objectFit: 'contain',
+  objectPosition: 'center center'
+});
+export const titleStyles = css({
+  textAlign: 'center',
+  margin: 0,
+  padding: 0
+});
+export const descriptionStyles = css({
+  fontSize: '1em',
+  textAlign: 'center'
+});

package/dist/es2019/view/EmbedModal/components/embed-content/index.js

@@ -4,10 +4,10 @@ import { di } from 'react-magnetic-di';
 import { css, jsx } from '@emotion/react';
 import { getIframeSandboxAttribute } from '../../../../utils';
 import { IFrame } from '../../../EmbedCard/components/IFrame';
-const iframeCss = css`
-  width: 100%;
-  height: calc(100vh - 208px);
-`;
+const iframeCss = css({
+  width: '100%',
+  height: 'calc(100vh - 208px)'
+});
 const EmbedContent = ({
   isTrusted,
   name,

package/dist/es2019/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -8,35 +8,28 @@ import { sizeToButtonSpacing } from '../../../utils';
 const getButtonStyle = (size, iconOnly) => {
   switch (size) {
     case SmartLinkSize.Large:
-      return iconOnly ? css`
-            button,
-            button:hover,
-            button:focus,
-            button:active {
-              padding: 0;
-              > span {
-                margin: 0;
-              }
-            }
-          ` : '';
+      return iconOnly ? css({
+        'button, button:hover, button:focus, button:active': {
+          padding: 0,
+          '> span': {
+            margin: 0
+          }
+        }
+      }) : '';
     case SmartLinkSize.Small:
-      return css`
-        font-size: 0.75rem;
-        font-weight: 500;
-        line-height: 1rem;
-        button,
-        button:hover,
-        button:focus,
-        button:active {
-          line-height: 1rem;
-          ${iconOnly ? `
+      return css({
+        fontSize: '0.75rem',
+        fontWeight: 500,
+        lineHeight: '1rem',
+        'button, button:hover, button:focus, button:active': [{
+          lineHeight: '1rem'
+        }, iconOnly ? `
             padding: 0.125rem;
           ` : `
             padding-left: 0.25rem;
             padding-right: 0.25rem;
-          `}
-        }
-      `;
+          `]
+      });
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Medium:
     default:
@@ -54,7 +47,9 @@ const ActionButton = ({
   size,
   testId,
   tooltipMessage,
-  isDisabled
+  isDisabled,
+  href,
+  ariaLabel
 }) => {
   const iconOnly = !content;
   const onButtonClick = useCallback(handler => e => {
@@ -76,7 +71,9 @@ const ActionButton = ({
     isLoading: isLoading,
     onClick: onButtonClick(onClick),
     spacing: sizeToButtonSpacing[size],
-    testId: testId
+    testId: testId,
+    href: href,
+    "aria-label": ariaLabel
   }, content)));
 };
 export default ActionButton;

package/dist/es2019/view/FlexibleCard/components/actions/action/action-stack-item/index.js

@@ -46,7 +46,8 @@ const ActionStackItem = ({
   space: spaceOption,
   testId,
   tooltipMessage,
-  xcss
+  xcss,
+  tooltipOnHide
 }) => {
   const space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : getPrimitivesInlineSpaceBySize(size);
   const onClick = useCallback(() => {
@@ -65,6 +66,7 @@ const ActionStackItem = ({
   // Replace Box with Pressable once it becomes stable (currently beta)
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipMessage || content,
+    onHide: tooltipOnHide,
     hideTooltipOnMouseDown: true
   }, tooltipProps => /*#__PURE__*/React.createElement(Box, _extends({
     as: "button",

package/dist/es2019/view/FlexibleCard/components/actions/action/index.js

@@ -24,10 +24,14 @@ const Action = ({
   iconPosition = 'before',
   spaceInline,
   tooltipMessage,
+  tooltipOnHide,
   xcss,
   asDropDownItem,
   overrideCss,
-  isDisabled
+  isDisabled,
+  href,
+  ariaLabel,
+  wrapper: Wrapper
 }) => {
   if (!onClick) {
     return null;
@@ -54,7 +58,8 @@ const Action = ({
       size: size,
       testId: testId,
       tooltipMessage: tooltipMessage || content,
-      xcss: xcss
+      xcss: xcss,
+      tooltipOnHide: tooltipOnHide
     });
   }
   if (isDropdownItem) {
@@ -67,7 +72,7 @@ const Action = ({
       testId: testId
     });
   }
-  return jsx(ActionButton, {
+  const button = jsx(ActionButton, {
     appearance: appearance,
     content: content,
     iconAfter: iconAfter,
@@ -78,7 +83,10 @@ const Action = ({
     size: size,
     testId: testId,
     tooltipMessage: tooltipMessage || content,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    href: href,
+    ariaLabel: ariaLabel
   });
+  return Wrapper !== undefined ? jsx(Wrapper, null, button) : button;
 };
 export default Action;