@atlaskit/media-card 73.8.0 → 74.0.0

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

@@ -5,14 +5,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ProgressBar = void 0;
+exports.getNormalizedProgress = exports.ProgressBar = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styled = require("./styled");
+var _styledBar = require("./styledBar");
 
 var _common = require("../common");
 
+var getNormalizedProgress = function getNormalizedProgress(progress) {
+  return Math.min(1, Math.max(0, progress || 0)) * 100;
+};
+
+exports.getNormalizedProgress = getNormalizedProgress;
+
 var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
       _ref$breakpoint = _ref.breakpoint,
@@ -21,9 +27,8 @@ var ProgressBar = function ProgressBar(_ref) {
       positionBottom = _ref$positionBottom === void 0 ? false : _ref$positionBottom,
       _ref$showOnTop = _ref.showOnTop,
       showOnTop = _ref$showOnTop === void 0 ? false : _ref$showOnTop;
-  var normalizedProgress = Math.min(1, Math.max(0, progress || 0)) * 100;
-  return /*#__PURE__*/_react.default.createElement(_styled.StyledBar, {
-    progress: normalizedProgress,
+  return /*#__PURE__*/_react.default.createElement(_styledBar.StyledBar, {
+    progress: getNormalizedProgress(progress),
     breakpoint: breakpoint,
     positionBottom: positionBottom,
     showOnTop: showOnTop

package/dist/cjs/root/ui/progressBar/styledBar.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledBar = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var StyledBar = function StyledBar(props) {
+  var progress = props.progress,
+      breakpoint = props.breakpoint,
+      positionBottom = props.positionBottom,
+      showOnTop = props.showOnTop;
+  return (0, _react.jsx)("div", {
+    id: "styledBar",
+    css: (0, _styles.styledBarStyles)({
+      progress: progress,
+      breakpoint: breakpoint,
+      positionBottom: positionBottom,
+      showOnTop: showOnTop
+    })
+  });
+};
+
+exports.StyledBar = StyledBar;

package/dist/cjs/root/ui/progressBar/{styled.js → styles.js}

@@ -5,12 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledBar = void 0;
 exports.generateResponsiveStyles = generateResponsiveStyles;
+exports.styledBarStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
@@ -43,13 +43,17 @@ function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
   return "\n    ".concat(showOnTop ? 'top' : 'bottom', ": ").concat(marginBottom, "px\n  ");
 }
 
-var StyledBar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
+var getStyledBarStylesBasedOnProps = function getStyledBarStylesBasedOnProps(_ref) {
   var progress = _ref.progress,
       breakpoint = _ref.breakpoint,
       positionBottom = _ref.positionBottom,
       showOnTop = _ref.showOnTop;
-  return "\n    ".concat(_mediaUi.borderRadius, "\n    overflow: hidden;\n    position: absolute;\n    width: ").concat(width, "%;\n    left: ").concat(left, "%;\n    background-color: ").concat((0, _mixins.rgba)(_colors.N0, 0.8), ";\n    height: ").concat(height + padding * 2, "px;\n    padding: ").concat(padding, "px;\n    box-sizing: border-box;\n\n    ::before {\n      content: '';\n      width: ").concat(progress, "%;\n      height: 100%;\n      background-color: ").concat(_colors.N400, ";\n      ").concat(_mediaUi.borderRadius, "\n      display: block;\n    }\n\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom, showOnTop), "\n");
-});
+  return "\n".concat(_mediaUi.borderRadius, "\noverflow: hidden;\nposition: absolute;\nwidth: ").concat(width, "%;\nleft: ").concat(left, "%;\nbackground-color: ").concat((0, _mixins.rgba)(_colors.N0, 0.8), ";\nheight: ").concat(height + padding * 2, "px;\npadding: ").concat(padding, "px;\nbox-sizing: border-box;\n\n::before {\n  content: '';\n  width: ").concat(progress, "%;\n  height: 100%;\n  background-color: ").concat(_colors.N400, ";\n  ").concat(_mediaUi.borderRadius, "\n  display: block;\n}\n").concat(generateResponsiveStyles(breakpoint, positionBottom, showOnTop), "\n");
+};
+
+var styledBarStyles = function styledBarStyles(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n  "])), getStyledBarStylesBasedOnProps(props));
+};
 
-exports.StyledBar = StyledBar;
-StyledBar.displayName = 'StyledProgressBar';
+exports.styledBarStyles = styledBarStyles;
+styledBarStyles.displayName = 'StyledProgressBar';

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

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

package/dist/cjs/root/ui/{styled.js → styles.js}

@@ -5,19 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.calcBreakpointSize = exports.NewFileExperienceWrapper = exports.CardImageContainer = void 0;
+exports.getWrapperShadow = exports.getWrapperDimensions = exports.getSelectableTickBoxStyles = exports.getCursorStyle = exports.getClickablePlayButtonStyles = exports.generateResponsiveStyles = exports.cardImageContainerStyles = exports.calcBreakpointSize = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _getCSSUnitValue = require("../../utils/getCSSUnitValue");
-
-var _cardDimensions = require("../../utils/cardDimensions");
-
-var _constants = require("@atlaskit/theme/constants");
+var _react = require("@emotion/react");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
@@ -25,21 +19,17 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _consts = require("@atlaskit/editor-shared-styles/consts");
 
-var _selection = require("@atlaskit/editor-shared-styles/selection");
-
-var _styles = require("../../styles");
-
-var _styled = require("./tickBox/styled");
+var _getCSSUnitValue = require("../../utils/getCSSUnitValue");
 
-var _styled2 = require("./blanket/styled");
+var _cardDimensions = require("../../utils/cardDimensions");
 
-var _styled3 = require("./actionsBar/styled");
+var _styles = require("./tickBox/styles");
 
-var _styled4 = require("./playButton/styled");
+var _styles2 = require("./playButton/styles");
 
 var _common = require("./common");
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 var breakpointSizes = [[_common.Breakpoint.SMALL, 599], [_common.Breakpoint.LARGE, Infinity]];
 
@@ -67,6 +57,8 @@ var generateResponsiveStyles = function generateResponsiveStyles() {
   return "\n    font-size: ".concat(setting.fontSize, "px;\n    line-height: ").concat(setting.lineHeight, "px;\n  ");
 };
 
+exports.generateResponsiveStyles = generateResponsiveStyles;
+
 var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
   var _ref5 = dimensions || {},
       width = _ref5.width,
@@ -81,6 +73,8 @@ var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance)
 // CSS outline has no 'radius', therefore we can't achieve the same effect with it
 
 
+exports.getWrapperDimensions = getWrapperDimensions;
+
 var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
   var withOverlayShadow = !disableOverlay ? "0 1px 1px ".concat(_colors.N60A, ", 0 0 1px 0 ").concat(_colors.N60A) : '';
   var selectedShadow = selected ? _consts.akEditorSelectedBoxShadow : '';
@@ -88,43 +82,32 @@ var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
   return shadow ? "box-shadow: ".concat(shadow, ";") : '';
 };
 
+exports.getWrapperShadow = getWrapperShadow;
+
 var getCursorStyle = function getCursorStyle(cursor) {
   return !!cursor ? "cursor: ".concat(cursor, ";") : '';
 };
 
+exports.getCursorStyle = getCursorStyle;
+
 var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {
   if (!isPlayButtonClickable) {
     return '';
   }
 
-  return "\n    &:hover .".concat(_styled4.playButtonClassName, " {\n      ").concat(_styled4.fixedPlayButtonStyles, "\n    }\n  ");
+  return "\n    &:hover .".concat(_styles2.playButtonClassName, " {\n      ").concat(_styles2.fixedPlayButtonStyles, "\n    }\n  ");
 };
 
+exports.getClickablePlayButtonStyles = getClickablePlayButtonStyles;
+
 var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSelectable) {
   if (!isTickBoxSelectable) {
     return '';
   }
 
-  return "\n    &:hover .".concat(_styled.tickBoxClassName, " {\n      ").concat(_styled.tickboxFixedStyles, "\n    }\n  ");
+  return "\n    &:hover .".concat(_styles.tickBoxClassName, " {\n      ").concat(_styles.tickboxFixedStyles, "\n    }\n  ");
 };
 
-var NewFileExperienceWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref6) {
-  var breakpoint = _ref6.breakpoint,
-      dimensions = _ref6.dimensions,
-      appearance = _ref6.appearance,
-      disableOverlay = _ref6.disableOverlay,
-      displayBackground = _ref6.displayBackground,
-      selected = _ref6.selected,
-      isPlayButtonClickable = _ref6.isPlayButtonClickable,
-      isTickBoxSelectable = _ref6.isTickBoxSelectable,
-      shouldDisplayTooltip = _ref6.shouldDisplayTooltip,
-      mediaCardCursor = _ref6.mediaCardCursor;
-  return "\n    ".concat((0, _styles.transition)(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat((0, _constants.fontFamily)(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(_colors.N20, ";") : '', "\n    ").concat(_mediaUi.borderRadius, "\n    ").concat(getCursorStyle(mediaCardCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(_selection.hideNativeBrowserTextSelectionStyles, "\n\n    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ").concat(getClickablePlayButtonStyles(isPlayButtonClickable), "\n    ").concat(getSelectableTickBoxStyles(isTickBoxSelectable), "\n    &:hover .").concat(_styled2.blanketClassName, " {\n      ").concat(_styled2.fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(_styled3.actionsBarClassName, " {\n      ").concat(_styled3.fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { width: 100%; height: 100% }" : '', "\n");
-});
-
-exports.NewFileExperienceWrapper = NewFileExperienceWrapper;
-NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
-
-var CardImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), _mediaUi.borderRadius);
-
-exports.CardImageContainer = CardImageContainer;
+exports.getSelectableTickBoxStyles = getSelectableTickBoxStyles;
+var cardImageContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), _mediaUi.borderRadius);
+exports.cardImageContainerStyles = cardImageContainerStyles;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapperStyles = exports.tickboxFixedStyles = exports.tickBoxClassName = exports.getSelectedStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _styles = require("../../../styles");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _templateObject;
+
+var tickBoxClassName = 'media-card-tickbox';
+exports.tickBoxClassName = tickBoxClassName;
+var tickboxFixedStyles = "\n  background-color: ".concat(_colors.N0, ";\n  color: ").concat(_colors.N100, ";\n");
+exports.tickboxFixedStyles = tickboxFixedStyles;
+
+var getSelectedStyles = function getSelectedStyles(selected) {
+  return selected ? "background-color: ".concat(_colors.B200, ";\n      color: white;") : "";
+};
+
+exports.getSelectedStyles = getSelectedStyles;
+
+var wrapperStyles = function wrapperStyles(selected) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  font-size: 14px;\n  width: 14px;\n  height: 14px;\n  position: absolute;\n  top: 7px;\n  left: 7px;\n  border-radius: 20px;\n  color: transparent;\n  /* Enforce dimensions and position of \"tick\" icon */\n  span {\n    display: block;\n    svg {\n      height: 14px;\n    }\n  }\n  ", "\n"])), (0, _styles.transition)(), getSelectedStyles(selected));
+};
+
+exports.wrapperStyles = wrapperStyles;
+wrapperStyles.displayName = 'TickBoxWrapper';

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/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: {