@atlaskit/media-card 73.8.0 → 74.0.0

package/dist/cjs/utils/cardActions/cardActionsDropdownMenu.js

@@ -29,12 +29,12 @@ var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/more"));
 
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
 
-var _styled = require("./styled");
-
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _analytics = require("../analytics");
 
+var _cardActionButton = require("./cardActionButton");
+
 var _excluded = ["triggerRef"];
 
 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); }
@@ -46,7 +46,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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 CardActionButtonWithProps = function CardActionButtonWithProps(props) {
-  return /*#__PURE__*/_react.default.createElement(_styled.CardActionButton, props);
+  return /*#__PURE__*/_react.default.createElement(_cardActionButton.CardActionButton, props);
 };
 
 var CardActionButtonWithAnalytics = (0, _analyticsNext.withAnalyticsEvents)({

package/dist/cjs/utils/cardActions/cardActionsView.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,12 +17,14 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 
-var _styled = require("./styled");
+var _react2 = require("react");
 
 var _cardActionIconButton = require("./cardActionIconButton");
 
+var _styles = require("./styles");
+
 var _cardActionsDropdownMenu = require("./cardActionsDropdownMenu");
 
 var _preventClickThrough = require("../preventClickThrough");
@@ -33,16 +33,12 @@ var _analytics = require("../analytics");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-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 _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 CardActionIconButtonWithProps = function CardActionIconButtonWithProps(props) {
-  return /*#__PURE__*/_react.default.createElement(_cardActionIconButton.CardActionIconButton, props);
+  return (0, _react.jsx)(_cardActionIconButton.CardActionIconButton, props);
 };
 
 var CardActionsView = /*#__PURE__*/function (_Component) {
@@ -66,7 +62,9 @@ var CardActionsView = /*#__PURE__*/function (_Component) {
 
       var primaryAction = actions.find(actionWithIcon);
       var otherActions = actions.filter(actionNotEqualTo(primaryAction));
-      return /*#__PURE__*/_react.default.createElement(_preventClickThrough.PreventClickThrough, null, /*#__PURE__*/_react.default.createElement(_styled.Wrapper, null, primaryAction ? this.renderActionIconButton(primaryAction, true) : null, this.renderOtherActionButtons(otherActions)));
+      return (0, _react.jsx)(_preventClickThrough.PreventClickThrough, null, (0, _react.jsx)("div", {
+        css: _styles.wrapperStyles
+      }, primaryAction ? this.renderActionIconButton(primaryAction, true) : null, this.renderOtherActionButtons(otherActions)));
     }
   }, {
     key: "renderActionIconButton",
@@ -89,7 +87,7 @@ var CardActionsView = /*#__PURE__*/function (_Component) {
           }
         })
       })(CardActionIconButtonWithProps);
-      return /*#__PURE__*/_react.default.createElement(CardActionIconButtonWithAnalytics, {
+      return (0, _react.jsx)(CardActionIconButtonWithAnalytics, {
         icon: icon,
         triggerColor: triggerColor,
         onClick: function onClick() {
@@ -114,7 +112,7 @@ var CardActionsView = /*#__PURE__*/function (_Component) {
         if (firstActionWithIcon && otherActions.length === 0) {
           return this.renderActionIconButton(firstActionWithIcon, false);
         } else {
-          return /*#__PURE__*/_react.default.createElement(_cardActionsDropdownMenu.CardActionsDropdownMenu, {
+          return (0, _react.jsx)(_cardActionsDropdownMenu.CardActionsDropdownMenu, {
             actions: actions,
             triggerColor: triggerColor,
             onOpenChange: onToggle,
@@ -125,7 +123,7 @@ var CardActionsView = /*#__PURE__*/function (_Component) {
     }
   }]);
   return CardActionsView;
-}(_react.Component);
+}(_react2.Component);
 
 exports.CardActionsView = CardActionsView;
 

package/dist/cjs/utils/cardActions/index.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "CardActionIconButton", {
 Object.defineProperty(exports, "CardActionIconButtonVariant", {
   enumerable: true,
   get: function get() {
-    return _styled.CardActionIconButtonVariant;
+    return _styles.CardActionIconButtonVariant;
   }
 });
 Object.defineProperty(exports, "CardActionsDropdownMenu", {
@@ -40,4 +40,4 @@ var _cardActionIconButton = require("./cardActionIconButton");
 
 var _cardActionsDropdownMenu = require("./cardActionsDropdownMenu");
 
-var _styled = require("./styled");
+var _styles = require("./styles");

package/dist/cjs/utils/cardActions/{styled.js → styles.js}

@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.CardActionIconButtonVariant = exports.CardActionButton = void 0;
+exports.wrapperStyles = exports.cardActionButtonStyles = exports.CardActionIconButtonVariant = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -19,8 +19,8 @@ var _styles = require("../../styles");
 
 var _templateObject, _templateObject2;
 
-var Wrapper = (0, _styledComponents.default)(_styles.Root)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  line-height: 0;\n"])));
-exports.Wrapper = Wrapper;
+var wrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  display: flex;\n  position: relative;\n  line-height: 0;\n"])), (0, _styles.rootStyles)());
+exports.wrapperStyles = wrapperStyles;
 var CardActionIconButtonVariant;
 exports.CardActionIconButtonVariant = CardActionIconButtonVariant;
 
@@ -33,9 +33,9 @@ var getVariantStyles = function getVariantStyles(variant) {
   return variant === 'filled' ? "\n    background: ".concat(_colors.N0, ";\n    margin-right: 8px;\n    opacity: 0.8;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      opacity: 0.6;\n    }\n  ") : "\n    &:hover {\n      background-color: rgba(9, 30, 66, 0.06);\n    }\n  ";
 };
 
-var CardActionButton = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
+var cardActionButtonStyles = function cardActionButtonStyles(_ref) {
   var variant = _ref.variant;
-  return "\n    ".concat(_mediaUi.center, " ").concat(_mediaUi.borderRadius, " ").concat((0, _mediaUi.size)(26), " color: ").concat(_colors.N500, ";\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    ").concat(getVariantStyles(variant), "\n  ");
-});
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), _mediaUi.center, _mediaUi.borderRadius, (0, _mediaUi.size)(26), _colors.N500, getVariantStyles(variant));
+};
 
-exports.CardActionButton = CardActionButton;
+exports.cardActionButtonStyles = cardActionButtonStyles;

package/dist/cjs/utils/errorIcon/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,15 +19,13 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
+var _react = require("@emotion/react");
 
-var _styled = require("./styled");
+var _react2 = require("react");
 
-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); }
+var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
 
-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 _styles = require("./styles");
 
 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); }; }
 
@@ -49,14 +45,16 @@ var ErrorIcon = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var size = this.props.size;
-      return /*#__PURE__*/_react.default.createElement(_styled.ErrorIconWrapper, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
+      return (0, _react.jsx)("div", {
+        css: _styles.errorIconWrapperStyles
+      }, (0, _react.jsx)(_warning.default, {
         label: "Error",
         size: size
       }));
     }
   }]);
   return ErrorIcon;
-}(_react.Component);
+}(_react2.Component);
 
 exports.ErrorIcon = ErrorIcon;
 (0, _defineProperty2.default)(ErrorIcon, "defaultProps", {

package/dist/cjs/utils/errorIcon/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.errorIconWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _templateObject;
+
+var errorIconWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  color: #ff991f;\n"])));
+exports.errorIconWrapperStyles = errorIconWrapperStyles;

package/dist/cjs/utils/fileIcon/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,15 +17,13 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _mediaTypeIcon = require("../mediaTypeIcon");
+var _react = require("@emotion/react");
 
-var _styled = require("./styled");
+var _react2 = require("react");
 
-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); }
+var _mediaTypeIcon = require("../mediaTypeIcon");
 
-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 _styles = require("./styles");
 
 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); }; }
 
@@ -53,25 +49,24 @@ var FileIcon = /*#__PURE__*/function (_Component) {
           iconUrl = _this$props.iconUrl,
           style = _this$props.style;
       var type = mediaType || 'unknown';
-
-      var defaultIcon = /*#__PURE__*/_react.default.createElement(_mediaTypeIcon.MediaTypeIcon, {
+      var defaultIcon = (0, _react.jsx)(_mediaTypeIcon.MediaTypeIcon, {
         type: mediaType,
         size: "small",
         className: fileTypeIconClass
       });
-
-      var icon = iconUrl ? /*#__PURE__*/_react.default.createElement("img", {
+      var icon = iconUrl ? (0, _react.jsx)("img", {
         src: iconUrl,
         className: "custom-icon",
         alt: type
       }) : defaultIcon;
-      return /*#__PURE__*/_react.default.createElement(_styled.FileTypeIcon, {
+      return (0, _react.jsx)("div", {
+        css: _styles.fileTypeIconStyles,
         style: style,
         className: fileTypeIconClass
       }, icon);
     }
   }]);
   return FileIcon;
-}(_react.Component);
+}(_react2.Component);
 
 exports.FileIcon = FileIcon;

package/dist/cjs/utils/fileIcon/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fileTypeIconStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _templateObject;
+
+var fileTypeIconStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  float: left;\n  margin-right: 6px;\n  position: relative;\n  top: 1px;\n  img {\n    ", ";\n  }\n"])), (0, _mediaUi.size)('12px !important'));
+exports.fileTypeIconStyles = fileTypeIconStyles;

package/dist/cjs/utils/lightCards/cardError.js

@@ -25,7 +25,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _errorIcon = require("../errorIcon");
 
-var _styled = require("./styled");
+var _lightCardWrappers = require("./lightCardWrappers");
 
 var _getDimensionsWithDefault = require("./getDimensionsWithDefault");
 
@@ -51,7 +51,7 @@ var CardError = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var dimensions = (0, _getDimensionsWithDefault.getDimensionsWithDefault)(this.props.dimensions);
-      return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
+      return /*#__PURE__*/_react.default.createElement(_lightCardWrappers.Wrapper, {
         dimensions: dimensions
       }, this.icon);
     }

package/dist/cjs/utils/lightCards/cardLoading.js

@@ -23,7 +23,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _getDimensionsWithDefault = require("./getDimensionsWithDefault");
 
-var _styled = require("./styled");
+var _lightCardWrappers = require("./lightCardWrappers");
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
@@ -59,14 +59,14 @@ var CardLoading = /*#__PURE__*/function (_Component) {
       var dimensions = (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensionsProp);
 
       if ((0, _mediaCommon.getMediaFeatureFlag)('newCardExperience', featureFlags)) {
-        return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
+        return /*#__PURE__*/_react.default.createElement(_lightCardWrappers.Wrapper, {
           "data-testid": testId || 'media-card-loading',
           "data-test-loading": true,
           dimensions: dimensions
         }, /*#__PURE__*/_react.default.createElement(_spinner.default, null));
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styled.AnimatedWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_lightCardWrappers.AnimatedWrapper, {
         "data-testid": testId || 'media-card-loading',
         "data-test-loading": true,
         dimensions: dimensions

package/dist/cjs/utils/lightCards/lightCardWrappers.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.AnimatedWrapper = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+var _components = require("@atlaskit/theme/components");
+
+/**@jsx jsx */
+var Wrapper = function Wrapper(props) {
+  var theme = (0, _components.useGlobalTheme)();
+  return (0, _react.jsx)("div", (0, _extends2.default)({
+    css: (0, _styles.wrapperStyles)({
+      dimensions: props.dimensions,
+      theme: theme
+    })
+  }, props), props.children);
+};
+
+exports.Wrapper = Wrapper;
+
+var AnimatedWrapper = function AnimatedWrapper(props) {
+  var theme = (0, _components.useGlobalTheme)();
+  return (0, _react.jsx)("div", (0, _extends2.default)({
+    css: (0, _styles.animatedWrapperStyles)({
+      dimensions: props.dimensions,
+      theme: theme
+    })
+  }, props), props.children);
+};
+
+exports.AnimatedWrapper = AnimatedWrapper;

package/dist/cjs/utils/lightCards/styles.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapperStyles = exports.blinkLoadingAnimation = exports.animatedWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _components = require("@atlaskit/theme/components");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var blinkLoadingAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0%{\n    opacity: 1;\n  }\n\n  50%{\n    opacity: 0.6;\n  }\n\n  100%{\n    opacity: 1;\n  }\n"])));
+exports.blinkLoadingAnimation = blinkLoadingAnimation;
+
+var wrapperStyles = function wrapperStyles(_ref) {
+  var dimensions = _ref.dimensions,
+      theme = _ref.theme;
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), _mediaUi.center, (0, _components.themed)({
+    light: _colors.N20,
+    dark: _colors.DN50
+  })({
+    theme: theme
+  }), (0, _components.themed)({
+    light: _colors.N50,
+    dark: _colors.DN100
+  })({
+    theme: theme
+  }), _mediaUi.borderRadius, dimensions.width, dimensions.height);
+};
+
+exports.wrapperStyles = wrapperStyles;
+
+var animatedWrapperStyles = function animatedWrapperStyles(props) {
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  > span {\n    animation: ", " 0.8s infinite;\n  }\n"])), wrapperStyles(props), blinkLoadingAnimation);
+};
+
+exports.animatedWrapperStyles = animatedWrapperStyles;

package/dist/cjs/utils/mediaTypeIcon/iconWrapper.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconWrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var IconWrapper = function IconWrapper(props) {
+  return (0, _react.jsx)("div", {
+    id: "iconWrapper",
+    css: (0, _styles.iconWrapperStyles)(props)
+  }, props.children);
+};
+
+exports.IconWrapper = IconWrapper;

package/dist/cjs/utils/mediaTypeIcon/index.js

@@ -31,7 +31,7 @@ var _document = _interopRequireDefault(require("@atlaskit/icon/glyph/document"))
 
 var _page = _interopRequireDefault(require("@atlaskit/icon/glyph/page"));
 
-var _styled = require("./styled");
+var _iconWrapper = require("./iconWrapper");
 
 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); }; }
 
@@ -66,7 +66,7 @@ var MediaTypeIcon = /*#__PURE__*/function (_React$Component) {
           size = _this$props$size === void 0 ? 'small' : _this$props$size,
           className = _this$props.className;
       var Icon = type && icons[type] || icons.unknown;
-      return /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_iconWrapper.IconWrapper, {
         type: type || 'unknown'
       }, /*#__PURE__*/_react.default.createElement(Icon, {
         label: "media-type",

package/dist/cjs/utils/mediaTypeIcon/{styled.js → styles.js}

@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconWrapper = void 0;
+exports.iconWrapperStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -25,9 +25,13 @@ var typeToColorMap = {
 
 };
 
-var IconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  color: ", ";\n"])), function (_ref) {
+var getWrapperColor = function getWrapperColor(_ref) {
   var type = _ref.type;
   return typeToColorMap[type] || typeToColorMap.unknown;
-});
+};
+
+var iconWrapperStyles = function iconWrapperStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  color: ", ";\n"])), getWrapperColor(props));
+};
 
-exports.IconWrapper = IconWrapper;
+exports.iconWrapperStyles = iconWrapperStyles;

package/dist/cjs/utils/mediaTypeIcon/types.js

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

package/dist/cjs/utils/progressBar/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,13 +17,11 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _styled = require("./styled");
+var _react = require("@emotion/react");
 
-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); }
+var _react2 = require("react");
 
-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 _styles = require("./styles");
 
 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); }; }
 
@@ -52,13 +48,15 @@ var ProgressBar = /*#__PURE__*/function (_Component) {
       var progressBarStyle = {
         width: "".concat(progress * 100, "%")
       };
-      return /*#__PURE__*/_react.default.createElement(_styled.ProgressWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react.jsx)("div", {
+        css: _styles.progressWrapperStyles
+      }, (0, _react.jsx)("div", {
         className: 'progressBar',
         style: progressBarStyle
       }));
     }
   }]);
   return ProgressBar;
-}(_react.Component);
+}(_react2.Component);
 
 exports.ProgressBar = ProgressBar;

package/dist/cjs/utils/progressBar/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.progressWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _templateObject;
+
+var progressWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " z-index: 30;\n  overflow: hidden;\n  background-color: rgba(255, 255, 255, 0.3);\n\n  .progressBar {\n    width: 0%;\n    height: 3px;\n    transition: width 0.25s ease-in;\n    background-color: white;\n  }\n"])), _mediaUi.borderRadius);
+exports.progressWrapperStyles = progressWrapperStyles;

package/dist/cjs/utils/ufoExperiences.js

@@ -11,8 +11,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _ufo = require("@atlaskit/ufo");
 
-var _version = require("../version.json");
-
 var _analytics = require("./analytics");
 
 var _mediaClient = require("@atlaskit/media-client");
@@ -21,6 +19,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 packageName = "@atlaskit/media-card";
+var packageVersion = "74.0.0";
 var concurrentExperience;
 
 var getExperience = function getExperience(id) {
@@ -81,8 +81,8 @@ exports.completeUfoExperience = completeUfoExperience;
 var succeedUfoExperience = function succeedUfoExperience(id, properties) {
   getExperience(id).success({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
-      packageName: _version.name,
-      packageVersion: _version.version,
+      packageName: packageName,
+      packageVersion: packageVersion,
       mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
       mediaRegion: (0, _mediaClient.getMediaRegion)()
     })
@@ -92,8 +92,8 @@ var succeedUfoExperience = function succeedUfoExperience(id, properties) {
 var failUfoExperience = function failUfoExperience(id, properties) {
   getExperience(id).failure({
     metadata: _objectSpread(_objectSpread({}, properties), {}, {
-      packageName: _version.name,
-      packageVersion: _version.version,
+      packageName: packageName,
+      packageVersion: packageVersion,
       mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
       mediaRegion: (0, _mediaClient.getMediaRegion)()
     })

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "73.8.0",
+	"version": "74.0.0",
 	"sideEffects": false
 }