@atlaskit/media-ui 18.0.0 → 19.0.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @atlaskit/media-ui
 
+## 19.0.0
+
+### Major Changes
+
+- [`09a6d800330`](https://bitbucket.org/atlassian/atlassian-frontend/commits/09a6d800330) - Remove `fadeInKeyframe` export
+
+### Minor Changes
+
+- [`da72247beeb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da72247beeb) - remove styled-components from media-ui
+- [`a5cabf7f670`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a5cabf7f670) - CustomMediaPlayer accepts poster property
+- [`beb3969bd64`](https://bitbucket.org/atlassian/atlassian-frontend/commits/beb3969bd64) - [ux] Change the media floating toolbar view switcher dropdown text to Change view
+
+### Patch Changes
+
+- [`2b2425c9758`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b2425c9758) - [ux] Fixed Icon and Title padding for media inline component
+
+## 18.1.1
+
+### Patch Changes
+
+- [`9ca8f7e9d74`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9ca8f7e9d74) - Revert extra image visibility style for media card
+
+## 18.1.0
+
+### Minor Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - [ux] Displaying the control bar including the timestamp by default for videos that have been processed.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - [ux] Making the control bar for videos adaptive (controls change based on video size)
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Refactor solution for fixing media card images overlaps with creating preview message
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - fixed confluence embed smartlink icon
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - add shimer placeholder
+
+## 18.0.1
+
+### Patch Changes
+
+- [`c55c736ecea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c55c736ecea) - Patch VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489
+
 ## 18.0.0
 
 ### Major Changes

package/dist/cjs/BlockCard/actions/PreviewAction.js

@@ -28,13 +28,16 @@ var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("../../messages");
 
+var _excluded = ["popupMountPointId", "onClose"],
+    _excluded2 = ["details"];
+
 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /*
   Explanatory note:
@@ -66,7 +69,7 @@ function _previewFunction() {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            popupMountPointId = _ref.popupMountPointId, _onClose = _ref.onClose, rest = (0, _objectWithoutProperties2.default)(_ref, ["popupMountPointId", "onClose"]);
+            popupMountPointId = _ref.popupMountPointId, _onClose = _ref.onClose, rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
             popupMountPoint = document.getElementById(popupMountPointId);
 
             if (!popupMountPoint) {
@@ -108,7 +111,7 @@ function _previewFunction() {
 
 var _default = function _default(_ref2) {
   var details = _ref2.details,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, ["details"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   return {
     id: 'preview-content',
     text: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview),

package/dist/cjs/BlockCard/components/Frame.js

@@ -17,9 +17,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _utils = require("../utils");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Frame = function Frame() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {

package/dist/cjs/BlockCard/components/Thumbnail.js

@@ -13,9 +13,9 @@ var _core = require("@emotion/core");
 
 var _utils = require("../utils");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var Thumbnail = function Thumbnail(props) {
   return props.color ? (0, _core.jsx)(ThumbnailWithBackground, props) : (0, _core.jsx)(ThumbnailDefault, props);

package/dist/cjs/BlockCard/views/ErroredView.js

@@ -41,9 +41,9 @@ var _UnresolvedText = require("../components/UnresolvedText");
 
 var _RetryAction = require("../actions/RetryAction");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var textDescriptionProps = _objectSpread({}, _messages.messages.could_not_load_link);
 

package/dist/cjs/BlockCard/views/NotFoundView.js

@@ -39,9 +39,9 @@ var _UnresolvedText = require("../components/UnresolvedText");
 
 var _handlers = require("../utils/handlers");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var textDescriptionProps = _objectSpread({}, _messages.messages.not_found_description);
 

package/dist/cjs/BlockCard/views/UnauthorizedView.js

@@ -35,9 +35,9 @@ var _handlers = require("../utils/handlers");
 
 var _Link = require("../components/Link");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var textBylineProps = _objectSpread({}, _messages.messages.connect_link_account_card_description);
 

package/dist/cjs/EmbedCard/components/styled.js

@@ -11,7 +11,7 @@ exports.maxAvatarCount = exports.embedHeaderHeight = exports.className = exports
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _mixins = require("../../mixins");
 
@@ -21,7 +21,7 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _utils = require("../../BlockCard/utils");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
 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); }
 
@@ -65,15 +65,15 @@ function selected(_ref4) {
   return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ").concat(colors.B100, ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(_mixins.borderRadius, "\n    }\n    ") : '';
 }
 
-var wrapperStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ", ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  height: 100%;\n  ", "\n  ", "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ", ");\n    height: calc(100% + ", ");\n    left: -", ";\n    ", "\n  }\n"])), _mixins.borderRadius, minWidth, maxWidth, getinteractiveStyles, visible, (0, _constants.fontFamily)(), function (_ref5) {
+var height = function height(_ref5) {
   var inheritDimensions = _ref5.inheritDimensions;
+  return inheritDimensions ? 'height: 100%;' : "height: ".concat((0, _utils.gs)(54));
+};
+
+var wrapperStyles = function wrapperStyles(props) {
+  return "\n  ".concat(_mixins.borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getinteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ").concat((0, _utils.gs)(2), ");\n    height: calc(100% + ").concat((0, _utils.gs)(1), ");\n    left: -").concat((0, _utils.gs)(1), ";\n    ").concat(_mixins.borderRadius, "\n  }\n");
+};
 
-  if (inheritDimensions) {
-    return "\n      height: 100%;\n    ";
-  } else {
-    return "height: ".concat((0, _utils.gs)(54));
-  }
-}, selected, (0, _utils.gs)(2), (0, _utils.gs)(1), (0, _utils.gs)(1), _mixins.borderRadius);
 var visibleStyles = "\n  background-color: ".concat(colors.N30, ";\n\n  &:after {\n    background: ").concat(colors.N30, " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
 
 function visible(_ref6) {
@@ -81,21 +81,25 @@ function visible(_ref6) {
   return isVisible ? visibleStyles : '';
 }
 
-var LinkWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), wrapperStyles);
+var LinkWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
+  return wrapperStyles(props);
+});
 
 exports.LinkWrapper = LinkWrapper;
 
-var Wrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  margin-top: 10px;\n"])), wrapperStyles);
+var Wrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  margin-top: 10px;\n"])), function (props) {
+  return wrapperStyles(props);
+});
 
 exports.Wrapper = Wrapper;
 var embedHeaderHeight = 32;
 exports.embedHeaderHeight = embedHeaderHeight;
 
-var Header = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  opacity: 0;\n  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);\n"])), embedHeaderHeight, colors.N300);
+var Header = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  opacity: 0;\n  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);\n"])), embedHeaderHeight, colors.N300);
 
 exports.Header = Header;
 
-var IconWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), _mixins.borderRadius, (0, _mixins.size)(16), function (_ref7) {
+var IconWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), _mixins.borderRadius, (0, _mixins.size)(16), function (_ref7) {
   var isPlaceholder = _ref7.isPlaceholder;
 
   if (isPlaceholder) {
@@ -107,7 +111,7 @@ var IconWrapper = _styledComponents.default.div(_templateObject5 || (_templateOb
 
 exports.IconWrapper = IconWrapper;
 
-var TextWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", " color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  ", ";\n"])), function (_ref8) {
+var TextWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", " color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  ", ";\n"])), function (_ref8) {
   var isPlaceholder = _ref8.isPlaceholder;
 
   if (isPlaceholder) {
@@ -122,7 +126,7 @@ exports.TextWrapper = TextWrapper;
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-var Content = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  ", "\n  ", "\n  background-color: white;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), _mixins.borderRadius, cardShadow, (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
+var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  ", "\n  ", "\n  background-color: white;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), _mixins.borderRadius, cardShadow, (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {
@@ -134,7 +138,7 @@ var Content = _styledComponents.default.div(_templateObject7 || (_templateObject
 
 exports.Content = Content;
 
-var Image = _styledComponents.default.img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref10) {
+var Image = _styled.default.img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref10) {
   var size = _ref10.size;
   return (0, _mixins.size)(size);
 }, _mixins.borderRadius);
@@ -143,41 +147,41 @@ exports.Image = Image;
 var maxAvatarCount = 6;
 exports.maxAvatarCount = maxAvatarCount;
 
-var ContentWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 12px 12px 12px;\n"])));
+var ContentWrapper = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 12px 12px 12px;\n"])));
 
 exports.ContentWrapper = ContentWrapper;
 
-var Title = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), colors.N900, 20 / 16, 20 * 4);
+var Title = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), colors.N900, 20 / 16, 20 * 4);
 
 exports.Title = Title;
 
-var Byline = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), colors.N300, 16 / 12, (0, _mixins.ellipsis)('100%'));
+var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), colors.N300, 16 / 12, (0, _mixins.ellipsis)('100%'));
 
 exports.Byline = Byline;
 
-var Description = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), colors.N800, 18 / 12, 18 * 3);
+var Description = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), colors.N800, 18 / 12, 18 * 3);
 
 exports.Description = Description;
 
-var ResolvedViewIconWrapper = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n"])));
+var ResolvedViewIconWrapper = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n"])));
 
 exports.ResolvedViewIconWrapper = ResolvedViewIconWrapper;
 
-var Thumbnail = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), _mixins.borderRadius, (0, _mixins.size)(48), colors.N30, function (_ref11) {
+var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), _mixins.borderRadius, (0, _mixins.size)(48), colors.N30, function (_ref11) {
   var src = _ref11.src;
   return src;
 });
 
 exports.Thumbnail = Thumbnail;
 
-var UsersWrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n"])));
+var UsersWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n"])));
 
 exports.UsersWrapper = UsersWrapper;
 
-var ActionsWrapper = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  text-align: right;\n\n  > * {\n    margin-top: 4px;\n  }\n\n  > * + * {\n    margin-left: 4px;\n  }\n"])));
+var ActionsWrapper = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  text-align: right;\n\n  > * {\n    margin-top: 4px;\n  }\n\n  > * + * {\n    margin-left: 4px;\n  }\n"])));
 
 exports.ActionsWrapper = ActionsWrapper;
 
-var AlertWrapper = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  /* z-index has to be 1 higher than the number of avatars in the avatar stack */\n  z-index: ", ";\n"])), maxAvatarCount + 1);
+var AlertWrapper = _styled.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  /* z-index has to be 1 higher than the number of avatars in the avatar stack */\n  z-index: ", ";\n"])), maxAvatarCount + 1);
 
 exports.AlertWrapper = AlertWrapper;

package/dist/cjs/EmbedCard/views/ResolvedView.js

@@ -32,22 +32,28 @@ var EmbedCardResolvedView = /*#__PURE__*/_react.default.forwardRef(function (_re
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'embed-card-resolved-view' : _ref$testId,
       inheritDimensions = _ref.inheritDimensions;
-  var src = typeof (context === null || context === void 0 ? void 0 : context.icon) === 'string' ? context.icon : undefined;
+  var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
+  var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
   var text = title || (context === null || context === void 0 ? void 0 : context.text);
 
   var linkGlyph = _react.default.useMemo(function () {
     return (0, _core.jsx)(_link.default, {
       label: "icon",
-      size: "small"
+      size: "small",
+      testId: "embed-card-fallback-icon"
     });
   }, []);
 
   var icon = _react.default.useMemo(function () {
+    if ( /*#__PURE__*/_react.default.isValidElement(iconFromContext)) {
+      return iconFromContext;
+    }
+
     return (0, _core.jsx)(_ImageIcon.ImageIcon, {
       src: src,
       default: linkGlyph
     });
-  }, [src, linkGlyph]);
+  }, [src, linkGlyph, iconFromContext]);
 
   return (0, _core.jsx)(_ExpandedFrame.ExpandedFrame, {
     isSelected: isSelected,

package/dist/cjs/InlineCard/Frame/index.js

@@ -1,107 +1,71 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Frame = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
+var _components = require("@atlaskit/theme/components");
 
 var _styled = require("./styled");
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
-
-var Frame = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Frame, _React$Component);
-
-  var _super = _createSuper(Frame);
-
-  function Frame() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, Frame);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+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 Frame = function Frame(props) {
+  var isSelected = props.isSelected,
+      children = props.children,
+      onClick = props.onClick,
+      link = props.link,
+      withoutBackground = props.withoutBackground,
+      withoutHover = props.withoutHover,
+      testId = props.testId,
+      className = props.className;
+  var handleClick = (0, _react.useCallback)(function (event) {
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    }
+  }, [onClick]);
+  var handleKeyPress = (0, _react.useCallback)(function (event) {
+    if (event.key !== ' ' && event.key !== 'Enter') {
+      return;
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (event) {
-      var onClick = _this.props.onClick;
-
-      if (onClick) {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyPress", function (event) {
-      if (event.key !== ' ' && event.key !== 'Enter') {
-        return;
-      }
-
-      var onClick = _this.props.onClick;
-
-      if (onClick) {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseDown", function (e) {
-      e.preventDefault();
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(Frame, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          isSelected = _this$props.isSelected,
-          children = _this$props.children,
-          onClick = _this$props.onClick,
-          link = _this$props.link,
-          withoutBackground = _this$props.withoutBackground,
-          withoutHover = _this$props.withoutHover,
-          testId = _this$props.testId,
-          className = _this$props.className;
-      var isInteractive = Boolean(onClick);
-      return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
-        href: link,
-        withoutBackground: withoutBackground,
-        withoutHover: withoutHover,
-        isSelected: isSelected,
-        isInteractive: isInteractive,
-        tabIndex: isInteractive ? 0 : undefined,
-        role: isInteractive ? 'button' : undefined,
-        onClick: this.handleClick,
-        onMouseDown: this.handleMouseDown,
-        onKeyPress: this.handleKeyPress,
-        "data-testid": testId,
-        className: className
-      }, children);
+    if (onClick) {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
     }
-  }]);
-  return Frame;
-}(_react.default.Component);
+  }, [onClick]); // prevent default on mousedown to avoid inline card losing focus
+
+  var handleMouseDown = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+  }, []);
+  var isInteractive = Boolean(onClick); // TODO Theming doesn't work right now in editor. Required React context does not trickle down atm.
+  //  It will be worked as part of https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-154
+
+  return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
+    theme: (0, _components.useGlobalTheme)(),
+    href: link,
+    withoutBackground: withoutBackground,
+    withoutHover: withoutHover,
+    isSelected: isSelected,
+    isInteractive: isInteractive,
+    tabIndex: isInteractive ? 0 : undefined,
+    role: isInteractive ? 'button' : undefined,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    onKeyPress: handleKeyPress,
+    "data-testid": testId,
+    className: className
+  }, children);
+};
 
 exports.Frame = Frame;

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

@@ -9,7 +9,7 @@ exports.Wrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -19,7 +19,7 @@ var _elevation = require("@atlaskit/theme/elevation");
 
 var _components = require("@atlaskit/theme/components");
 
-var _styled = require("../IconAndTitleLayout/styled");
+var _styled2 = require("../IconAndTitleLayout/styled");
 
 var _templateObject;
 
@@ -70,7 +70,7 @@ var withoutHover = function withoutHover(_ref3) {
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 
 
-var Wrapper = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ", "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  ", "\n  ", ";\n  ", "\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  &:hover ", " {\n    text-decoration: ", ";\n  }\n"])), function (props) {
+var Wrapper = _styled.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 16px;\n  padding: 1px 0.24em 2px 0.24em;\n  ", "\n  display: inline;\n  box-decoration-break: clone;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  ", "\n  ", ";\n  ", "\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n\n  &:hover span.", " {\n    text-decoration: ", ";\n  }\n"])), function (props) {
   return props.withoutBackground ? "padding-left: 0; margin-left:-2px;" : '';
 }, (0, _constants.borderRadius)(), (0, _components.themed)({
   light: _colors.B400,
@@ -82,7 +82,13 @@ var Wrapper = _styledComponents.default.a(_templateObject || (_templateObject =
   });
 }, function (props) {
   return props.withoutBackground ? '' : (0, _elevation.e100)();
-}, isInteractive, isSelected, withoutHover, _styled.TitleWrapper, function (_ref4) {
+}, function (props) {
+  return isInteractive(props);
+}, function (props) {
+  return isSelected(props);
+}, function (props) {
+  return withoutHover(props);
+}, _styled2.TitleWrapperClassName, function (_ref4) {
   var withoutHover = _ref4.withoutHover;
   return withoutHover ? 'none' : 'underline';
 });

package/dist/cjs/InlineCard/Icon.js

@@ -5,26 +5,33 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Icon = exports.AKIconWrapper = void 0;
+exports.Shimmer = exports.Icon = exports.AKIconWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _templateObject, _templateObject2;
+var _core = require("@emotion/core");
 
-// TODO: Figure out a more scalable/responsive solution
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var placeholderShimmer = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-position: -20px 0;\n  }\n\n  100% {\n    background-position: 20px 0;\n  }\n"]))); // TODO: Figure out a more scalable/responsive solution
 // for vertical alignment.
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
-var Icon = _styledComponents.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"]))); // Used for 'untrue' icons which claim to be 16x16 but
+
+var Icon = _styled.default.img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"]))); // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
 
 
 exports.Icon = Icon;
 
-var AKIconWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: -2px;\n"])));
+var AKIconWrapper = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: -2px;\n"])));
+
+exports.AKIconWrapper = AKIconWrapper;
+
+var Shimmer = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\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: 40px 14px;\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);
 
-exports.AKIconWrapper = AKIconWrapper;
+exports.Shimmer = Shimmer;