@atlaskit/media-card 73.7.0 → 74.1.0

package/dist/cjs/root/ui/iconMessage/index.js

@@ -11,24 +11,22 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styled = require("./styled");
+var _iconMessageWrapper = require("./iconMessageWrapper");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _styled2 = require("../../styled");
-
 var IconMessage = function IconMessage(_ref) {
   var messageDescriptor = _ref.messageDescriptor,
       _ref$animated = _ref.animated,
       animated = _ref$animated === void 0 ? false : _ref$animated,
       _ref$reducedFont = _ref.reducedFont,
       reducedFont = _ref$reducedFont === void 0 ? false : _ref$reducedFont;
-  return /*#__PURE__*/_react.default.createElement(_styled.IconMessageWrapper, {
+  return /*#__PURE__*/_react.default.createElement(_iconMessageWrapper.IconMessageWrapper, {
     animated: animated,
     reducedFont: reducedFont
-  }, /*#__PURE__*/_react.default.createElement(_styled2.FormattedMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messageDescriptor)));
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messageDescriptor)));
 };
 
 exports.IconMessage = IconMessage;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconMessageWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var breatheAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n 0% { opacity: 1}\n 50% { opacity: 0.3 }\n 100% { opacity: 1; }"])));
+var animatedStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  animation-name: ", ";\n  animation-duration: 3.5s;\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n"])), breatheAnimation);
+
+var getStylesBasedOnProps = function getStylesBasedOnProps(_ref) {
+  var animated = _ref.animated,
+      reducedFont = _ref.reducedFont;
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  opacity: 1;\n  font-weight: 450;\n  ", "\n  color: ", ";\n  text-align: center;\n  ", "\n  margin-bottom: -1em;\n  padding: 3px 10px;\n"])), reducedFont ? 'font-size: 0.7em;' : '', _colors.N300, animated ? animatedStyles : '');
+};
+
+var iconMessageWrapperStyles = function iconMessageWrapperStyles(props) {
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), getStylesBasedOnProps(props));
+};
+
+exports.iconMessageWrapperStyles = iconMessageWrapperStyles;
+iconMessageWrapperStyles.displayName = 'IconMessageWrapper';

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

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

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

@@ -0,0 +1,25 @@
+"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) {
+  var breakpoint = props.breakpoint,
+      hasTitleBox = props.hasTitleBox;
+  return (0, _react.jsx)("div", {
+    id: "iconWrapper",
+    css: (0, _styles.iconWrapperStyles)({
+      breakpoint: breakpoint,
+      hasTitleBox: hasTitleBox
+    })
+  }, props.children);
+};
+
+exports.IconWrapper = IconWrapper;

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

@@ -5,12 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconWrapper = void 0;
+exports.iconWrapperStyles = void 0;
 exports.titleBoxHeight = titleBoxHeight;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _common = require("../common");
 
@@ -27,11 +27,11 @@ function titleBoxHeight(hasTitleBox, breakpoint) {
   return "".concat(marginBottom, "px");
 }
 
-var IconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
+var iconWrapperStyles = function iconWrapperStyles(_ref) {
   var hasTitleBox = _ref.hasTitleBox,
       breakpoint = _ref.breakpoint;
-  return "\n    position: absolute;\n    width: 100%;\n    height: calc(100% - ".concat(titleBoxHeight(hasTitleBox, breakpoint), ");\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n");
-});
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100%;\n  height: calc(100% - ", ");\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), titleBoxHeight(hasTitleBox, breakpoint));
+};
 
-exports.IconWrapper = IconWrapper;
-IconWrapper.displayName = 'MediaIconWrapper';
+exports.iconWrapperStyles = iconWrapperStyles;
+iconWrapperStyles.displayName = 'MediaIconWrapper';

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

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

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.warningIconWrapperStyles = exports.loadingRateLimitedTextWrapperStyles = exports.loadingRateLimitedContainerStyles = exports.errorWrapperStyles = exports.couldntLoadWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _styles = require("../progressBar/styles");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var loadingRateLimitedContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n"])));
+exports.loadingRateLimitedContainerStyles = loadingRateLimitedContainerStyles;
+var warningIconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  justify-content: center;\n  display: flex;\n  /* Required to allow end users to select text in the error message */\n  cursor: auto;\n  user-select: text;\n  > svg {\n    width: 45px;\n  }\n"])));
+exports.warningIconWrapperStyles = warningIconWrapperStyles;
+
+var loadingRateLimitedTextWrapperStyles = function loadingRateLimitedTextWrapperStyles(_ref) {
+  var breakpoint = _ref.breakpoint,
+      positionBottom = _ref.positionBottom;
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 10px;\n  overflow: hidden;\n  color: ", ";\n  display: block;\n  width: 100%;\n  text-align: center;\n  ", "\n"])), _colors.N300, (0, _styles.generateResponsiveStyles)(breakpoint, positionBottom, false, 1));
+};
+
+exports.loadingRateLimitedTextWrapperStyles = loadingRateLimitedTextWrapperStyles;
+loadingRateLimitedTextWrapperStyles.displayName = 'LoadingRateLimitedTextWrapper';
+var couldntLoadWrapperStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 550;\n"])));
+exports.couldntLoadWrapperStyles = couldntLoadWrapperStyles;
+var errorWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 350;\n"])));
+exports.errorWrapperStyles = errorWrapperStyles;

package/dist/cjs/root/ui/newFileExperience/newFileExperienceWrapper.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NewFileExperienceWrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _cardConstants = require("../../../root/card/cardConstants");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var NewFileExperienceWrapper = function NewFileExperienceWrapper(props) {
+  var testId = props.testId,
+      dimensions = props.dimensions,
+      appearance = props.appearance,
+      onClick = props.onClick,
+      onMouseEnter = props.onMouseEnter,
+      innerRef = props.innerRef,
+      breakpoint = props.breakpoint,
+      mediaCardCursor = props.mediaCardCursor,
+      disableOverlay = props.disableOverlay,
+      selected = props.selected,
+      displayBackground = props.displayBackground,
+      isPlayButtonClickable = props.isPlayButtonClickable,
+      isTickBoxSelectable = props.isTickBoxSelectable,
+      shouldDisplayTooltip = props.shouldDisplayTooltip;
+  return (0, _react.jsx)("div", {
+    id: "newFileExperienceWrapper",
+    className: _cardConstants.newFileExperienceClassName,
+    "data-testid": testId,
+    css: (0, _styles.newFileExperienceWrapperStyles)({
+      breakpoint: breakpoint,
+      dimensions: dimensions,
+      appearance: appearance,
+      disableOverlay: disableOverlay,
+      displayBackground: displayBackground,
+      selected: selected,
+      isPlayButtonClickable: isPlayButtonClickable,
+      isTickBoxSelectable: isTickBoxSelectable,
+      shouldDisplayTooltip: shouldDisplayTooltip,
+      mediaCardCursor: mediaCardCursor
+    }),
+    ref: innerRef,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
+  }, props.children);
+};
+
+exports.NewFileExperienceWrapper = NewFileExperienceWrapper;

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.newFileExperienceWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _selection = require("@atlaskit/editor-shared-styles/selection");
+
+var _styles = require("../../../styles");
+
+var _styles2 = require(".././blanket/styles");
+
+var _styles3 = require(".././actionsBar/styles");
+
+var _styles4 = require("../styles");
+
+var _templateObject;
+
+var newFileExperienceWrapperStyles = function newFileExperienceWrapperStyles(_ref) {
+  var breakpoint = _ref.breakpoint,
+      dimensions = _ref.dimensions,
+      appearance = _ref.appearance,
+      disableOverlay = _ref.disableOverlay,
+      displayBackground = _ref.displayBackground,
+      selected = _ref.selected,
+      isPlayButtonClickable = _ref.isPlayButtonClickable,
+      isTickBoxSelectable = _ref.isTickBoxSelectable,
+      shouldDisplayTooltip = _ref.shouldDisplayTooltip,
+      mediaCardCursor = _ref.mediaCardCursor;
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n    ", "\n    ", "\n    &:hover .", " {\n    ", "\n  }\n  &:hover .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n"])), (0, _styles.transition)(), (0, _constants.fontFamily)(), (0, _styles4.getWrapperDimensions)(dimensions, appearance), displayBackground ? "background-color: ".concat(_colors.N20, ";") : '', _mediaUi.borderRadius, (0, _styles4.getCursorStyle)(mediaCardCursor), (0, _styles4.getWrapperShadow)(disableOverlay, selected), (0, _styles4.generateResponsiveStyles)(breakpoint), _selection.hideNativeBrowserTextSelectionStyles, (0, _styles4.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles4.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip ? "> div { width: 100%; height: 100% }" : '');
+};
+
+exports.newFileExperienceWrapperStyles = newFileExperienceWrapperStyles;
+newFileExperienceWrapperStyles.displayName = 'NewFileExperienceWrapper';

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

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

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

@@ -11,10 +11,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _vidPlay = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-play"));
 
-var _styled = require("./styled");
+var _playButtonWrapper = require("./playButtonWrapper");
+
+var _playButtonBackground = require("./playButtonBackground");
 
 var PlayButton = function PlayButton() {
-  return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, null, /*#__PURE__*/_react.default.createElement(_styled.Background, null), /*#__PURE__*/_react.default.createElement(_vidPlay.default, {
+  return /*#__PURE__*/_react.default.createElement(_playButtonWrapper.PlayButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_playButtonBackground.PlayButtonBackground, null), /*#__PURE__*/_react.default.createElement(_vidPlay.default, {
     label: "play",
     size: "large"
   }));

package/dist/cjs/root/ui/playButton/playButtonBackground.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlayButtonBackground = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var PlayButtonBackground = function PlayButtonBackground() {
+  return (0, _react.jsx)("div", {
+    css: _styles.backgroundStyles,
+    className: _styles.bkgClassName
+  });
+};
+
+exports.PlayButtonBackground = PlayButtonBackground;

package/dist/cjs/root/ui/playButton/playButtonWrapper.js

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

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.playButtonWrapperStyles = exports.playButtonClassName = exports.fixedPlayButtonStyles = exports.bkgClassName = exports.backgroundStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _templateObject, _templateObject2;
+
+var playButtonClassName = 'media-card-play-button';
+exports.playButtonClassName = playButtonClassName;
+var bkgClassName = 'play-icon-background';
+exports.bkgClassName = bkgClassName;
+var discSize = 48;
+var discSizeHover = 56;
+var fixedPlayButtonStyles = "\n  .".concat(bkgClassName, " {\n    width: ").concat(discSizeHover, "px;\n    height: ").concat(discSizeHover, "px;\n  }\n");
+exports.fixedPlayButtonStyles = fixedPlayButtonStyles;
+var playButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  span {\n    position: absolute;\n  }\n"])), _colors.N0);
+exports.playButtonWrapperStyles = playButtonWrapperStyles;
+var backgroundStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background: ", ";\n  border-radius: 100%;\n"])), discSize, discSize, _colors.N90A);
+exports.backgroundStyles = backgroundStyles;

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';