@atlaskit/media-card 73.6.0 → 74.0.0

package/dist/cjs/styles/index.js

@@ -5,7 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Root = exports.FadeinImage = void 0;
 Object.defineProperty(exports, "antialiased", {
   enumerable: true,
   get: function get() {
@@ -68,6 +67,7 @@ Object.defineProperty(exports, "easeOutExpo", {
     return _easing.easeOutExpo;
   }
 });
+exports.fadeinImageStyles = void 0;
 Object.defineProperty(exports, "hexToRgb", {
   enumerable: true,
   get: function get() {
@@ -80,6 +80,7 @@ Object.defineProperty(exports, "rgba", {
     return _mixins.rgba;
   }
 });
+exports.rootStyles = void 0;
 Object.defineProperty(exports, "spaceAround", {
   enumerable: true,
   get: function get() {
@@ -107,7 +108,7 @@ Object.defineProperty(exports, "withAppearance", {
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -123,14 +124,18 @@ var _animations = require("./animations");
 
 var _templateObject, _templateObject2;
 
-var Root = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  font-family: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n"])), (0, _constants.fontFamily)());
+var rootStyles = function rootStyles() {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  font-family: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n"])), (0, _constants.fontFamily)());
+};
 
-exports.Root = Root;
+exports.rootStyles = rootStyles;
 var cardShadow = "\n  box-shadow: 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24);\n";
 exports.cardShadow = cardShadow;
 
-var FadeinImage = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), _mediaUi.fadeIn);
+var fadeinImageStyles = function fadeinImageStyles() {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), _mediaUi.fadeIn);
+};
 
-exports.FadeinImage = FadeinImage;
-var _default = Root;
+exports.fadeinImageStyles = fadeinImageStyles;
+var _default = rootStyles;
 exports.default = _default;

package/dist/cjs/types.js

@@ -9,6 +9,5 @@ exports.MediaCardCursor = MediaCardCursor;
 
 (function (MediaCardCursor) {
   MediaCardCursor["Action"] = "pointer";
-  MediaCardCursor["NoAction"] = "default";
   MediaCardCursor["NotReady"] = "wait";
 })(MediaCardCursor || (exports.MediaCardCursor = MediaCardCursor = {}));

package/dist/cjs/utils/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractErrorInfo = exports.createAndFireMediaCardEvent = void 0;
+exports.extractErrorInfo = exports.createAndFireMediaCardEvent = exports.LOGGED_FEATURE_FLAG_KEYS = exports.LOGGED_FEATURE_FLAGS = void 0;
 exports.fireMediaCardEvent = fireMediaCardEvent;
 exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRenderCommencedEventPayload = exports.getFileAttributes = exports.getCopiedFilePayload = void 0;
 
@@ -23,6 +23,20 @@ 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 relevantFlags = {
+  newCardExperience: true,
+  captions: true,
+  timestampOnVideo: true,
+  observedWidth: true,
+  mediaInline: false,
+  folderUploads: false,
+  mediaUploadApiV2: true
+};
+var LOGGED_FEATURE_FLAGS = (0, _mediaCommon.filterFeatureFlagNames)(relevantFlags);
+exports.LOGGED_FEATURE_FLAGS = LOGGED_FEATURE_FLAGS;
+var LOGGED_FEATURE_FLAG_KEYS = (0, _mediaCommon.filterFeatureFlagKeysAllProducts)(relevantFlags);
+exports.LOGGED_FEATURE_FLAG_KEYS = LOGGED_FEATURE_FLAG_KEYS;
+
 var getFileAttributes = function getFileAttributes(metadata, fileStatus) {
   return {
     fileMediatype: metadata.mediaType,

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardActionButton = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var CardActionButton = function CardActionButton(props) {
+  return (0, _react.jsx)("div", {
+    id: "cardActionButton",
+    "data-testid": "media-card-primary-action",
+    css: (0, _styles.cardActionButtonStyles)(props),
+    style: props.style,
+    onClick: props.onClick,
+    onMouseDown: props.onMouseDown
+  }, props.children);
+};
+
+exports.CardActionButton = CardActionButton;

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

@@ -25,7 +25,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styled = require("./styled");
+var _cardActionButton = require("./cardActionButton");
 
 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); }
 
@@ -64,8 +64,7 @@ var CardActionIconButton = /*#__PURE__*/function (_Component) {
           triggerColor = _this$props.triggerColor,
           onClick = _this$props.onClick,
           variant = _this$props.variant;
-      return /*#__PURE__*/_react.default.createElement(_styled.CardActionButton, {
-        "data-testid": "media-card-primary-action",
+      return /*#__PURE__*/_react.default.createElement(_cardActionButton.CardActionButton, {
         onClick: onClick,
         onMouseDown: this.onMouseDown,
         style: {

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/getMediaCardCursor.js

@@ -7,10 +7,13 @@ exports.getMediaCardCursor = void 0;
 
 var _types = require("../types");
 
+/**
+ * When the returned value is undefined, we'd expect the media card to take the parent's cursor style.
+ */
 var getMediaCardCursor = function getMediaCardCursor(useInlinePlayer, useMediaViewer, isErrorStatus, hasCardPreview, mediaType) {
   // If error status or no action is requested = NoAction
   if (isErrorStatus || !useInlinePlayer && !useMediaViewer) {
-    return _types.MediaCardCursor.NoAction;
+    return;
   }
 
   if (!mediaType && (useInlinePlayer || useInlinePlayer && useMediaViewer)) {
@@ -23,7 +26,7 @@ var getMediaCardCursor = function getMediaCardCursor(useInlinePlayer, useMediaVi
     return _types.MediaCardCursor.Action;
   }
 
-  return _types.MediaCardCursor.NoAction;
+  return;
 };
 
 exports.getMediaCardCursor = getMediaCardCursor;

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;