@atlaskit/media-card 73.7.0 → 74.1.0

package/dist/cjs/root/ui/tickBox/tickBox.js

@@ -9,13 +9,13 @@ exports.TickBox = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styled = require("./styled");
-
 var _check = _interopRequireDefault(require("@atlaskit/icon/glyph/check"));
 
+var _tickBoxWrapper = require("./tickBoxWrapper");
+
 var TickBox = function TickBox(_ref) {
   var selected = _ref.selected;
-  return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
+  return /*#__PURE__*/_react.default.createElement(_tickBoxWrapper.TickBoxWrapper, {
     selected: selected
   }, /*#__PURE__*/_react.default.createElement(_check.default, {
     label: "tick"

package/dist/cjs/root/ui/tickBox/tickBoxWrapper.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TickBoxWrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var TickBoxWrapper = function TickBoxWrapper(props) {
+  return (0, _react.jsx)("div", {
+    id: "tickBoxWrapper",
+    css: (0, _styles.wrapperStyles)(props.selected),
+    className: _styles.tickBoxClassName
+  }, props.children);
+};
+
+exports.TickBoxWrapper = TickBoxWrapper;

package/dist/cjs/root/ui/tickBox/types.js

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

package/dist/cjs/root/ui/titleBox/failedTitleBox.js

@@ -9,7 +9,7 @@ exports.FailedTitleBox = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styled = require("./styled");
+var _reactIntlNext = require("react-intl-next");
 
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
 
@@ -17,21 +17,19 @@ var _mediaUi = require("@atlaskit/media-ui");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _reactIntlNext = require("react-intl-next");
-
-var _styled2 = require("../../styled");
+var _titleBoxComponents = require("./titleBoxComponents");
 
 var FailedTitleBox = function FailedTitleBox(_ref) {
   var breakpoint = _ref.breakpoint,
       _ref$customMessage = _ref.customMessage,
       customMessage = _ref$customMessage === void 0 ? _mediaUi.messages.failed_to_load : _ref$customMessage;
-  return /*#__PURE__*/_react.default.createElement(_styled.TitleBoxWrapper, {
+  return /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxWrapper, {
     breakpoint: breakpoint
-  }, /*#__PURE__*/_react.default.createElement(_styled.ErrorMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
+  }, /*#__PURE__*/_react.default.createElement(_titleBoxComponents.ErrorMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_warning.default, {
     label: 'Warning',
     size: 'small',
     primaryColor: _colors.R300
-  }), /*#__PURE__*/_react.default.createElement(_styled2.FormattedMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, customMessage))));
+  }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, customMessage))));
 };
 
 exports.FailedTitleBox = FailedTitleBox;

package/dist/cjs/root/ui/titleBox/styles.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.titleBoxWrapperStyles = exports.titleBoxIconStyles = exports.titleBoxHeaderStyles = exports.titleBoxFooterStyles = exports.errorMessageWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _common = require("../common");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _mixins = require("../../../styles/mixins");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var generateResponsiveStyles = function generateResponsiveStyles() {
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
+  var setting = _common.responsiveSettings[breakpoint];
+  var verticalPadding = setting.titleBox.verticalPadding;
+  var horizontalPadding = setting.titleBox.horizontalPadding;
+  var height = (0, _common.getTitleBoxHeight)(breakpoint);
+  return "height: ".concat(height, "px;\n    padding: ").concat(verticalPadding, "px ").concat(horizontalPadding, "px;");
+};
+
+var HEX_REGEX = /^#[0-9A-F]{6}$/i;
+
+var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
+  var breakpoint = _ref.breakpoint,
+      titleBoxBgColor = _ref.titleBoxBgColor;
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  background-color: ", ";\n  color: inherit;\n  cursor: inherit;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  ", "\n"])), (0, _mixins.rgba)(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 0.8), generateResponsiveStyles(breakpoint));
+};
+
+exports.titleBoxWrapperStyles = titleBoxWrapperStyles;
+titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
+var infoStyles = "white-space: nowrap;\n  overflow: hidden;";
+var iconOverlapStyles = "padding-right: 10px;";
+
+var titleBoxHeaderStyles = function titleBoxHeaderStyles(_ref2) {
+  var hasIconOverlap = _ref2.hasIconOverlap;
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  ", "\n  ", "\n"])), infoStyles, hasIconOverlap && iconOverlapStyles);
+};
+
+exports.titleBoxHeaderStyles = titleBoxHeaderStyles;
+titleBoxHeaderStyles.displayName = 'FailedTitleBoxHeader';
+
+var titleBoxFooterStyles = function titleBoxFooterStyles(_ref3) {
+  var hasIconOverlap = _ref3.hasIconOverlap;
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  text-overflow: ellipsis;\n  ", "\n  ", "\n"])), infoStyles, hasIconOverlap && iconOverlapStyles);
+};
+
+exports.titleBoxFooterStyles = titleBoxFooterStyles;
+titleBoxFooterStyles.displayName = 'TitleBoxFooter';
+var titleBoxIconStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 4px;\n  bottom: 0px;\n"])));
+exports.titleBoxIconStyles = titleBoxIconStyles;
+var errorMessageWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  span {\n    vertical-align: middle;\n    :nth-child(2) {\n      margin-left: 4px;\n      margin-right: 4px;\n    }\n  }\n"])));
+exports.errorMessageWrapperStyles = errorMessageWrapperStyles;

package/dist/cjs/root/ui/titleBox/titleBox.js

@@ -9,16 +9,16 @@ exports.TitleBox = exports.FormattedDate = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
-
 var _reactIntlNext = require("react-intl-next");
 
-var _styled = require("./styled");
+var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
 
 var _truncateText = require("@atlaskit/media-ui/truncateText");
 
 var _formatDate = require("@atlaskit/media-ui/formatDate");
 
+var _titleBoxComponents = require("./titleBoxComponents");
+
 var FormattedDate = (0, _reactIntlNext.injectIntl)(function (_ref) {
   var timestamp = _ref.timestamp,
       intl = _ref.intl;
@@ -39,18 +39,18 @@ var TitleBox = function TitleBox(_ref3) {
       breakpoint = _ref3.breakpoint,
       titleBoxBgColor = _ref3.titleBoxBgColor,
       titleBoxIcon = _ref3.titleBoxIcon;
-  return /*#__PURE__*/_react.default.createElement(_styled.TitleBoxWrapper, {
+  return /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxWrapper, {
     breakpoint: breakpoint,
     titleBoxBgColor: titleBoxBgColor
-  }, /*#__PURE__*/_react.default.createElement(_styled.TitleBoxHeader, {
+  }, /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxHeader, {
     hasIconOverlap: !!titleBoxIcon && !createdAt
   }, /*#__PURE__*/_react.default.createElement(_truncateText.Truncate, {
     text: name
-  })), createdAt ? /*#__PURE__*/_react.default.createElement(_styled.TitleBoxFooter, {
+  })), createdAt ? /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxFooter, {
     hasIconOverlap: !!titleBoxIcon
   }, /*#__PURE__*/_react.default.createElement(FormattedDate, {
     timestamp: createdAt
-  })) : null, titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/_react.default.createElement(_styled.TitleBoxIcon, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
+  })) : null, titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxIcon, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
     label: "",
     size: "small"
   })));

package/dist/cjs/root/ui/titleBox/titleBoxComponents.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleBoxWrapper = exports.TitleBoxIcon = exports.TitleBoxHeader = exports.TitleBoxFooter = exports.ErrorMessageWrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/** @jsx jsx */
+var TitleBoxWrapper = function TitleBoxWrapper(props) {
+  var breakpoint = props.breakpoint,
+      titleBoxBgColor = props.titleBoxBgColor;
+  return (0, _react.jsx)("div", {
+    id: "titleBoxWrapper",
+    css: (0, _styles.titleBoxWrapperStyles)({
+      breakpoint: breakpoint,
+      titleBoxBgColor: titleBoxBgColor
+    })
+  }, props.children);
+};
+
+exports.TitleBoxWrapper = TitleBoxWrapper;
+
+var TitleBoxHeader = function TitleBoxHeader(props) {
+  var hasIconOverlap = props.hasIconOverlap;
+  return (0, _react.jsx)("div", {
+    id: "titleBoxHeader",
+    css: (0, _styles.titleBoxHeaderStyles)({
+      hasIconOverlap: hasIconOverlap
+    })
+  }, props.children);
+};
+
+exports.TitleBoxHeader = TitleBoxHeader;
+
+var TitleBoxFooter = function TitleBoxFooter(props) {
+  var hasIconOverlap = props.hasIconOverlap;
+  return (0, _react.jsx)("div", {
+    id: "titleBoxFooter",
+    css: (0, _styles.titleBoxFooterStyles)({
+      hasIconOverlap: hasIconOverlap
+    })
+  }, props.children);
+};
+
+exports.TitleBoxFooter = TitleBoxFooter;
+
+var TitleBoxIcon = function TitleBoxIcon(props) {
+  return (0, _react.jsx)("div", {
+    id: "titleBoxIcon",
+    css: _styles.titleBoxIconStyles
+  }, props.children);
+};
+
+exports.TitleBoxIcon = TitleBoxIcon;
+
+var ErrorMessageWrapper = function ErrorMessageWrapper(props) {
+  return (0, _react.jsx)("div", {
+    css: _styles.errorMessageWrapperStyles
+  }, props.children);
+};
+
+exports.ErrorMessageWrapper = ErrorMessageWrapper;

package/dist/cjs/root/ui/titleBox/types.js

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

package/dist/cjs/styles/animations.js

@@ -9,9 +9,9 @@ exports.spin = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _templateObject;
 
-var spin = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  to { transform: rotate(360deg); }\n"])));
+var spin = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  to { transform: rotate(360deg); }\n"])));
 exports.spin = spin;

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/utils/analytics.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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;
+exports.getRenderSucceededEventPayload = exports.getRenderPreviewableCardPayload = exports.getRenderFailedFileStatusPayload = exports.getRenderFailedExternalUriPayload = exports.getRenderErrorRequestMetadata = exports.getRenderErrorFailReason = exports.getRenderErrorEventPayload = exports.getRenderErrorErrorReason = exports.getRenderErrorErrorDetail = exports.getRenderCommencedEventPayload = exports.getRemoteSuccessEventPayload = exports.getFileAttributes = exports.getCopiedFilePayload = exports.getCacheHitEventPayload = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -30,7 +30,8 @@ var relevantFlags = {
   observedWidth: true,
   mediaInline: false,
   folderUploads: false,
-  mediaUploadApiV2: false
+  mediaUploadApiV2: true,
+  memoryCacheLogging: true
 };
 var LOGGED_FEATURE_FLAGS = (0, _mediaCommon.filterFeatureFlagNames)(relevantFlags);
 exports.LOGGED_FEATURE_FLAGS = LOGGED_FEATURE_FLAGS;
@@ -94,6 +95,32 @@ var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fil
 
 exports.getRenderSucceededEventPayload = getRenderSucceededEventPayload;
 
+var getCacheHitEventPayload = function getCacheHitEventPayload(cardPreviewAttributes) {
+  return {
+    eventType: 'operational',
+    action: 'cache-hit',
+    actionSubject: 'mediaCardCache',
+    attributes: {
+      cardPreviewAttributes: cardPreviewAttributes
+    }
+  };
+};
+
+exports.getCacheHitEventPayload = getCacheHitEventPayload;
+
+var getRemoteSuccessEventPayload = function getRemoteSuccessEventPayload(cardPreviewAttributes) {
+  return {
+    eventType: 'operational',
+    action: 'Remote-success',
+    actionSubject: 'mediaCardCache',
+    attributes: {
+      cardPreviewAttributes: cardPreviewAttributes
+    }
+  };
+};
+
+exports.getRemoteSuccessEventPayload = getRemoteSuccessEventPayload;
+
 var getRenderFailedExternalUriPayload = function getRenderFailedExternalUriPayload(fileAttributes, performanceAttributes) {
   return {
     eventType: 'operational',

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

@@ -6,7 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 
 var _default = function _default() {
-  return document;
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  if (typeof window.document === 'undefined') {
+    return;
+  }
+
+  return window.document;
 };
 
 exports.default = _default;