@atlaskit/smart-card 16.2.1 → 17.1.0

package/dist/cjs/view/FlexibleCard/components/container/index.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getContainerStyles = exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _constants = require("../../../../constants");
+
+var _flexible = require("../../../../utils/flexible");
+
+var _token = require("../../../../utils/token");
+
+var _templateObject, _templateObject2;
+
+var elevationStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), _token.tokens.elevation);
+
+var getGap = function getGap(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+      return '1.25rem';
+
+    case _constants.SmartLinkSize.Large:
+      return '1rem';
+
+    case _constants.SmartLinkSize.Medium:
+      return '.5rem';
+
+    case _constants.SmartLinkSize.Small:
+    default:
+      return '.25rem';
+  }
+};
+
+var getPadding = function getPadding(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+      return '1.5rem';
+
+    case _constants.SmartLinkSize.Large:
+      return '1.25rem';
+
+    case _constants.SmartLinkSize.Medium:
+      return '1rem';
+
+    case _constants.SmartLinkSize.Small:
+    default:
+      return '.5rem';
+  }
+};
+
+var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding) {
+  return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n  ", "\n  ", "\n  ", "\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(_token.tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles);
+};
+
+exports.getContainerStyles = getContainerStyles;
+
+var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry) {
+  return _react.default.Children.map(children, function (child) {
+    if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiBlock)(child)) {
+      var blockSize = child.props.size;
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        retry: (0, _flexible.isFlexibleUiTitleBlock)(child) ? retry : undefined,
+        size: blockSize || containerSize,
+        status: status,
+        theme: containerTheme
+      });
+    }
+  });
+};
+
+var Container = function Container(_ref) {
+  var children = _ref.children,
+      _ref$hideBackground = _ref.hideBackground,
+      hideBackground = _ref$hideBackground === void 0 ? false : _ref$hideBackground,
+      _ref$hideElevation = _ref.hideElevation,
+      hideElevation = _ref$hideElevation === void 0 ? false : _ref$hideElevation,
+      _ref$hidePadding = _ref.hidePadding,
+      hidePadding = _ref$hidePadding === void 0 ? false : _ref$hidePadding,
+      retry = _ref.retry,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+      status = _ref.status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-links-container' : _ref$testId,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref$theme;
+  return (0, _core.jsx)("div", {
+    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
+    "data-smart-link-container": true,
+    "data-testid": testId
+  }, renderChildren(children, size, theme, status, retry));
+};
+
+var _default = Container;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/container/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
+
+var _constants = require("../../../../../constants");
+
+var MAX_COUNT = 4;
+
+var AvatarGroup = function AvatarGroup(_ref) {
+  var _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$maxCount = _ref.maxCount,
+      maxCount = _ref$maxCount === void 0 ? MAX_COUNT : _ref$maxCount,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-avatar-group' : _ref$testId;
+
+  if (!items.length) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
+    maxCount: maxCount,
+    appearance: "stack",
+    size: "small",
+    data: items,
+    testId: testId
+  });
+};
+
+var _default = AvatarGroup;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/FlexibleCard/components/elements/badge/index.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _token = require("../../../../../utils/token");
+
+var _utils = require("../../utils");
+
+var _constants = require("../../../../../constants");
+
+var _messages = require("../../../../../messages");
+
+var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
+
+var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon"));
+
+var _templateObject, _templateObject2, _templateObject3, _messageMapper;
+
+var badgeStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  min-width: fit-content;\n"])));
+var iconStyles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", "\n  span,\n  svg {\n    line-height: 0;\n  }\n"])), _token.tokens.badgeIcon, (0, _utils.getIconSizeStyles)('1rem'));
+var labelStyles = (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n"])), _token.tokens.badgeText);
+var messageMapper = (_messageMapper = {}, (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityBlocker, _messages.messages.priority_blocker), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityCritical, _messages.messages.priority_critical), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityHigh, _messages.messages.priority_high), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityHighest, _messages.messages.priority_highest), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityLow, _messages.messages.priority_low), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityLowest, _messages.messages.priority_lowest), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMajor, _messages.messages.priority_major), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMedium, _messages.messages.priority_medium), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMinor, _messages.messages.priority_minor), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityTrivial, _messages.messages.priority_trivial), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityUndefined, _messages.messages.priority_undefined), _messageMapper);
+
+var getFormattedMessageOrLabel = function getFormattedMessageOrLabel(icon, content) {
+  if (icon) {
+    var descriptor = messageMapper[icon];
+
+    if (descriptor) {
+      return (0, _utils.getFormattedMessage)({
+        descriptor: descriptor
+      });
+    }
+  }
+
+  return content;
+};
+
+var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
+  if (icon) {
+    return (0, _core.jsx)(_atlaskitIcon.default, {
+      icon: icon,
+      label: icon,
+      testId: "".concat(testId, "-icon")
+    });
+  }
+};
+
+var renderImageIcon = function renderImageIcon(url, testId) {
+  if (url) {
+    return (0, _core.jsx)(_imageIcon.default, {
+      testId: testId,
+      url: url
+    });
+  }
+};
+
+var Badge = function Badge(_ref) {
+  var icon = _ref.icon,
+      url = _ref.url,
+      label = _ref.label,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId;
+  var formattedMessageOrLabel = getFormattedMessageOrLabel(icon, label);
+  var badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
+
+  if (!formattedMessageOrLabel || !badgeIcon) {
+    return null;
+  }
+
+  return (0, _core.jsx)("div", {
+    css: badgeStyles,
+    "data-fit-to-content": true,
+    "data-smart-element-badge": true,
+    "data-testid": testId
+  }, (0, _core.jsx)("span", {
+    css: iconStyles
+  }, badgeIcon), (0, _core.jsx)("span", {
+    css: labelStyles,
+    "data-testid": "".concat(testId, "-label")
+  }, formattedMessageOrLabel));
+};
+
+var _default = Badge;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/elements/badge/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/FlexibleCard/components/elements/date-time/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _core = require("@emotion/core");
+
+var _utils = require("../../utils");
+
+var _token = require("../../../../../utils/token");
+
+var _intlUtils = require("@formatjs/intl-utils");
+
+var _messages = require("../../../../../messages");
+
+var _templateObject;
+
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(1));
+var typeToDescriptorMap = {
+  created: _messages.messages.created_on,
+  modified: _messages.messages.modified_on
+};
+
+var DateTime = function DateTime(_ref) {
+  var date = _ref.date,
+      type = _ref.type,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-date-time' : _ref$testId;
+
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+      formatRelativeTime = _useIntl.formatRelativeTime;
+
+  if (!type || !date) {
+    return null;
+  }
+
+  var _selectUnit = (0, _intlUtils.selectUnit)(date, Date.now()),
+      value = _selectUnit.value,
+      unit = _selectUnit.unit;
+
+  var context = formatRelativeTime(value, unit, {
+    numeric: 'auto'
+  });
+  return (0, _core.jsx)("span", {
+    css: styles,
+    "data-smart-element-date-time": true,
+    "data-testid": testId
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type], {
+    values: {
+      context: context
+    }
+  })));
+};
+
+var _default = DateTime;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/elements/date-time/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/FlexibleCard/components/elements/icon/index.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
+
+var _core = require("@emotion/core");
+
+var _constants = require("../../../../../constants");
+
+var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon"));
+
+var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
+
+var _utils = require("../../utils");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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 getPositionStyles = function getPositionStyles(size, position) {
+  switch (position) {
+    case _constants.SmartLinkPosition.Center:
+      return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        align-self: center;\n      "])));
+
+    case _constants.SmartLinkPosition.Top:
+    default:
+      return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        align-self: flex-start;\n        margin: 0;\n      "])));
+  }
+};
+
+var getWidth = function getWidth(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+      return '2rem';
+
+    case _constants.SmartLinkSize.Large:
+      return '1.5rem';
+
+    case _constants.SmartLinkSize.Medium:
+      return '1rem';
+
+    case _constants.SmartLinkSize.Small:
+    default:
+      return '.75rem';
+  }
+};
+
+var getIconStyles = function getIconStyles(size, position, width) {
+  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), getPositionStyles(size, position), (0, _utils.getIconSizeStyles)(width));
+};
+
+var getCustomRenderStyles = function getCustomRenderStyles(value) {
+  return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  line-height: ", ";\n  font-size: ", ";\n  text-align: center;\n  text-overflow: clip;\n  -webkit-box-orient: unset;\n  span {\n    margin: 0;\n    padding: 0;\n    vertical-align: baseline;\n  }\n"])), (0, _utils.getTruncateStyles)(1, value), value, value);
+};
+
+var renderAtlaskitIcon = function renderAtlaskitIcon(icon, label, testId) {
+  if (icon) {
+    return (0, _core.jsx)(_atlaskitIcon.default, {
+      icon: icon,
+      label: label,
+      testId: "".concat(testId, "-icon")
+    });
+  }
+};
+
+var renderDefaultIcon = function renderDefaultIcon(label, testId) {
+  return (0, _core.jsx)(_link.default, {
+    label: label,
+    testId: "".concat(testId, "-default")
+  });
+};
+
+var renderImageIcon = function renderImageIcon(defaultIcon, icon, url, testId) {
+  if (url) {
+    return (0, _core.jsx)(_imageIcon.default, {
+      defaultIcon: defaultIcon,
+      testId: testId,
+      url: url
+    });
+  }
+};
+
+var Icon = function Icon(_ref) {
+  var icon = _ref.icon,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Link' : _ref$label,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? _constants.SmartLinkPosition.Top : _ref$position,
+      render = _ref.render,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-icon' : _ref$testId,
+      url = _ref.url;
+  var element = (0, _react.useMemo)(function () {
+    var defaultIcon = renderDefaultIcon(label, testId);
+    return (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, icon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
+  }, [icon, label, render, testId, url]);
+  var width = getWidth(size);
+  var styles = getIconStyles(size, position, width);
+  var renderStyles = render ? getCustomRenderStyles(width) : undefined;
+  return (0, _core.jsx)("div", {
+    css: [styles, renderStyles],
+    "data-fit-to-content": true,
+    "data-smart-element-icon": true,
+    "data-testid": testId
+  }, element);
+};
+
+var _default = Icon;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/elements/icon/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/FlexibleCard/components/elements/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = exports.SubscriberCount = exports.State = exports.ProgrammingLanguage = exports.Priority = exports.ModifiedOn = exports.ModifiedBy = exports.LinkIcon = exports.CreatedOn = exports.CreatedBy = exports.CommentCount = exports.CollaboratorGroup = exports.AuthorGroup = void 0;
+
+var _utils = require("./utils");
+
+var _constants = require("../../../../constants");
+
+// Attention: Keep the export name and element name the same.
+// This will help reducing the code for mapping elements inside
+// createElement and renderElementItems
+var AuthorGroup = (0, _utils.createElement)(_constants.ElementName.AuthorGroup);
+exports.AuthorGroup = AuthorGroup;
+var CollaboratorGroup = (0, _utils.createElement)(_constants.ElementName.CollaboratorGroup);
+exports.CollaboratorGroup = CollaboratorGroup;
+var CommentCount = (0, _utils.createElement)(_constants.ElementName.CommentCount);
+exports.CommentCount = CommentCount;
+var CreatedBy = (0, _utils.createElement)(_constants.ElementName.CreatedBy);
+exports.CreatedBy = CreatedBy;
+var CreatedOn = (0, _utils.createElement)(_constants.ElementName.CreatedOn);
+exports.CreatedOn = CreatedOn;
+var LinkIcon = (0, _utils.createElement)(_constants.ElementName.LinkIcon);
+exports.LinkIcon = LinkIcon;
+var ModifiedBy = (0, _utils.createElement)(_constants.ElementName.ModifiedBy);
+exports.ModifiedBy = ModifiedBy;
+var ModifiedOn = (0, _utils.createElement)(_constants.ElementName.ModifiedOn);
+exports.ModifiedOn = ModifiedOn;
+var Priority = (0, _utils.createElement)(_constants.ElementName.Priority);
+exports.Priority = Priority;
+var ProgrammingLanguage = (0, _utils.createElement)(_constants.ElementName.ProgrammingLanguage);
+exports.ProgrammingLanguage = ProgrammingLanguage;
+var State = (0, _utils.createElement)(_constants.ElementName.State);
+exports.State = State;
+var SubscriberCount = (0, _utils.createElement)(_constants.ElementName.SubscriberCount);
+exports.SubscriberCount = SubscriberCount;
+var Title = (0, _utils.createElement)(_constants.ElementName.Title);
+exports.Title = Title;

package/dist/cjs/view/FlexibleCard/components/elements/link/index.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _constants = require("../../../../../constants");
+
+var _utils = require("../../utils");
+
+var _token = require("../../../../../utils/token");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var DEFAULT_MAX_LINES = 2;
+var MAXIMUM_MAX_LINES = 2;
+var MINIMUM_MAX_LINES = 1;
+var containerStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n"])));
+
+var getThemeStyles = function getThemeStyles(theme) {
+  switch (theme) {
+    case _constants.SmartLinkTheme.Black:
+      return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blackLink, _token.tokens.blackLinkPressed, _token.tokens.blackLink);
+
+    case _constants.SmartLinkTheme.Link:
+    default:
+      return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blueLink, _token.tokens.blueLinkPressed, _token.tokens.blueLink);
+  }
+};
+
+var getAnchorStyles = function getAnchorStyles(size, theme, maxLines) {
+  var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
+  return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size)), getThemeStyles(theme));
+};
+
+var getMaxLines = function getMaxLines(maxLines) {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+
+  return maxLines;
+};
+
+var Link = function Link(_ref) {
+  var _ref$maxLines = _ref.maxLines,
+      maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-link' : _ref$testId,
+      text = _ref.text,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref$theme,
+      url = _ref.url;
+  return (0, _core.jsx)("span", {
+    css: containerStyles
+  }, (0, _core.jsx)(_tooltip.default, {
+    content: text,
+    testId: "".concat(testId, "-tooltip"),
+    tag: "span"
+  }, (0, _core.jsx)("a", {
+    css: getAnchorStyles(size, theme, getMaxLines(maxLines)),
+    "data-smart-element-link": true,
+    "data-testid": testId,
+    href: url
+  }, text)));
+};
+
+var _default = Link;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/elements/link/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+
+var _templateObject;
+
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: inherit;\n"])));
+
+var Lozenge = function Lozenge(_ref) {
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+      text = _ref.text,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
+
+  if (!text) {
+    return null;
+  }
+
+  return (0, _core.jsx)("span", {
+    css: styles,
+    "data-fit-to-content": true,
+    "data-smart-element-lozenge": true
+  }, (0, _core.jsx)(_lozenge.default, {
+    appearance: appearance,
+    testId: testId
+  }, text));
+};
+
+var _default = Lozenge;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});