@atlaskit/smart-card 16.3.0 → 17.2.0

package/dist/cjs/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -0,0 +1,326 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("../../../../../constants");
+
+var _importIconMapper;
+
+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 || (0, _typeof2.default)(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; }
+
+// prettier-ignore
+var importIconMapper = (_importIconMapper = {}, (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Archive, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/archive/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Audio, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/audio/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Blog, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/blog/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Code, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/source-code/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Document, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/document/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Executable, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/executable/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.File, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/generic/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Folder, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/folder/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Generic, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/generic/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.GIF, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/gif/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.GoogleDocs, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/google-doc/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.GoogleForms, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/google-form/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.GoogleSheets, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/google-sheet/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.GoogleSlides, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/google-slide/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Image, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/image/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.MSExcel, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/excel-spreadsheet/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.MSPowerpoint, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/powerpoint-presentation/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.MSWord, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/word-document/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PDF, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/pdf-document/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Presentation, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/presentation/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Sketch, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/sketch/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Spreadsheet, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/spreadsheet/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Template, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/document-filled'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Video, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-file-type/glyph/video/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Branch, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/branch/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Commit, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/commit/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Project, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/people-group'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PullRequest, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/pull-request/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Repo, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/code/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Bug, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/bug/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Change, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/changes/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Epic, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/epic/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Incident, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/incident/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Problem, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/problem/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.ServiceRequest, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/issue/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Story, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/story/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.SubTask, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/subtask/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Task, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-object/glyph/task/16'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Confluence, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/logo/confluence-icon'));
+  }).then(function (_ref) {
+    var ConfluenceIcon = _ref.ConfluenceIcon;
+    return {
+      default: ConfluenceIcon
+    };
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Jira, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/logo/jira-icon'));
+  }).then(function (_ref2) {
+    var JiraIcon = _ref2.JiraIcon;
+    return {
+      default: JiraIcon
+    };
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Default, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/link'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Error, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/error'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Forbidden, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/lock-filled'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Comment, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/comment'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PriorityBlocker, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-priority/glyph/priority-blocker'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PriorityCritical, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-priority/glyph/priority-critical'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PriorityHigh, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-priority/glyph/priority-high'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PriorityHighest, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-priority/glyph/priority-highest'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PriorityLow, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-priority/glyph/priority-low'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PriorityLowest, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-priority/glyph/priority-lowest'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PriorityMajor, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-priority/glyph/priority-major'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PriorityMedium, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-priority/glyph/priority-medium'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PriorityMinor, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-priority/glyph/priority-minor'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PriorityTrivial, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon-priority/glyph/priority-trivial'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.PriorityUndefined, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/question'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.ProgrammingLanguage, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/code'));
+  });
+}), (0, _defineProperty2.default)(_importIconMapper, _constants.IconType.Subscriber, function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('@atlaskit/icon/glyph/people'));
+  });
+}), _importIconMapper);
+
+var getIconImportFn = function getIconImportFn(icon) {
+  return importIconMapper[icon];
+};
+
+var importIcon = function importIcon(importFn) {
+  return (0, _reactLoadable.default)({
+    loader: function loader() {
+      return importFn().then(function (module) {
+        return module.default;
+      });
+    },
+    loading: function loading() {
+      return null;
+    }
+  }); // Because we're using dynamic loading here, TS will not be able to infer the type.
+};
+
+var AtlaskitIcon = function AtlaskitIcon(_ref3) {
+  var icon = _ref3.icon,
+      label = _ref3.label,
+      testId = _ref3.testId;
+  var importFn = getIconImportFn(icon);
+
+  if (!importFn) {
+    return null;
+  }
+
+  var ImportedIcon = importIcon(importFn);
+
+  switch (icon) {
+    case _constants.IconType.Confluence:
+    case _constants.IconType.Jira:
+      // Logo component has a different prop set from other icon components
+      return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
+        textColor: _colors.N700,
+        iconColor: _colors.B200,
+        iconGradientStart: _colors.B400,
+        iconGradientStop: _colors.B200
+      });
+
+    case _constants.IconType.Error:
+    case _constants.IconType.Forbidden:
+      return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
+        label: label,
+        testId: testId,
+        primaryColor: _colors.R400
+      });
+
+    default:
+      return /*#__PURE__*/_react.default.createElement(ImportedIcon, {
+        label: label,
+        testId: testId
+      });
+  }
+};
+
+var _default = AtlaskitIcon;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/common/atlaskit-icon/types.js

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

package/dist/cjs/view/FlexibleCard/components/common/image-icon/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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
+
+var _templateObject, _templateObject2;
+
+var placeholderShimmer = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
+var shimmer = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  user-select: none;\n\n  background: #f6f7f8;\n  background-image: linear-gradient(\n    to right,\n    #f6f7f8 0%,\n    #edeef1 20%,\n    #f6f7f8 40%,\n    #f6f7f8 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), placeholderShimmer);
+
+var ImageIcon = function ImageIcon(_ref) {
+  var defaultIcon = _ref.defaultIcon,
+      testId = _ref.testId,
+      url = _ref.url;
+  return (0, _core.jsx)(_reactRenderImage.default, {
+    src: url,
+    loading: (0, _core.jsx)("span", {
+      css: shimmer,
+      "data-testid": "".concat(testId, "-loading")
+    }),
+    loaded: (0, _core.jsx)("img", {
+      src: url,
+      "data-testid": "".concat(testId, "-image")
+    }),
+    errored: defaultIcon
+  });
+};
+
+var _default = ImageIcon;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/common/image-icon/types.js

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

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
+});