@atlaskit/media-card 73.8.0 → 74.0.0

package/dist/cjs/root/inlinePlayerWrapper.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlinePlayerWrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var InlinePlayerWrapper = function InlinePlayerWrapper(props) {
+  var testId = props.testId,
+      selected = props.selected,
+      dimensions = props.dimensions,
+      onClick = props.onClick,
+      innerRef = props.innerRef;
+  return (0, _react.jsx)("div", {
+    id: "inlinePlayerWrapper",
+    "data-testid": testId,
+    className: _styles.inlinePlayerClassName,
+    css: (0, _styles.inlinePlayerWrapperStyles)({
+      selected: selected,
+      dimensions: dimensions
+    }),
+    onClick: onClick,
+    ref: innerRef
+  }, props.children);
+};
+
+exports.InlinePlayerWrapper = InlinePlayerWrapper;

package/dist/cjs/root/styles.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapperStyles = exports.inlinePlayerWrapperStyles = exports.inlinePlayerClassName = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _getCSSUnitValue = require("../utils/getCSSUnitValue");
+
+var _breakpoint = require("../utils/breakpoint");
+
+var _getSelectedBorderStyle = require("../styles/getSelectedBorderStyle");
+
+var _getDimensionsWithDefault = require("../utils/lightCards/getDimensionsWithDefault");
+
+var _templateObject, _templateObject2;
+
+var inlinePlayerClassName = 'media-card-inline-player';
+exports.inlinePlayerClassName = inlinePlayerClassName;
+
+var getWrapperHeight = function getWrapperHeight(dimensions) {
+  return dimensions && dimensions.height ? "height: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(dimensions.height), "; max-height: 100%;") : '';
+};
+
+var getWrapperWidth = function getWrapperWidth(dimensions) {
+  return dimensions && dimensions.width ? "width: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(dimensions.width), "; max-width: 100%;") : '';
+};
+
+var wrapperStyles = function wrapperStyles(_ref) {
+  var dimensions = _ref.dimensions,
+      _ref$breakpointSize = _ref.breakpointSize,
+      breakpointSize = _ref$breakpointSize === void 0 ? 'medium' : _ref$breakpointSize,
+      shouldUsePointerCursor = _ref.shouldUsePointerCursor;
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n      ", "\n  cursor: ", ";\n"])), (0, _breakpoint.breakpointStyles)({
+    breakpointSize: breakpointSize
+  }), getWrapperHeight(dimensions), getWrapperWidth(dimensions), shouldUsePointerCursor ? 'pointer' : 'default');
+};
+
+exports.wrapperStyles = wrapperStyles;
+wrapperStyles.displayName = 'CardViewWrapper';
+
+var inlinePlayerWrapperStyles = function inlinePlayerWrapperStyles(_ref2) {
+  var dimensions = _ref2.dimensions,
+      selected = _ref2.selected;
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  overflow: hidden;\n  border-radius: ", "px;\n  position: relative;\n  max-width: 100%;\n  max-height: 100%;\n\n  ", "\n\n  video {\n    width: 100%;\n    height: 100%;\n  }\n"])), (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensions).width || '100%', (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensions).height || 'auto', (0, _constants.borderRadius)(), (0, _getSelectedBorderStyle.getSelectedBorderStyle)(selected));
+};
+
+exports.inlinePlayerWrapperStyles = inlinePlayerWrapperStyles;
+inlinePlayerWrapperStyles.displayName = 'InlinePlayerWrapper';

package/dist/cjs/root/types.js

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

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

@@ -21,7 +21,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _cardActions = require("../../../utils/cardActions");
 
-var _styled = require("./styled");
+var _actionsBarWrapper = require("./actionsBarWrapper");
 
 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); }; }
 
@@ -48,7 +48,7 @@ var ActionsBar = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styled.Wrapper, {
+      return /*#__PURE__*/_react.default.createElement(_actionsBarWrapper.ActionsBarWrapper, {
         isFixed: isFixed
       }, /*#__PURE__*/_react.default.createElement(_cardActions.CardActionsView, {
         actions: actions,

package/dist/cjs/root/ui/actionsBar/actionsBarWrapper.js

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

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapperStyles = exports.fixedActionBarStyles = exports.actionsBarClassName = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _styles = require("../../../styles");
+
+var _templateObject;
+
+var actionsBarClassName = 'media-card-actions-bar';
+exports.actionsBarClassName = actionsBarClassName;
+var fixedActionBarStyles = "opacity: 1;";
+exports.fixedActionBarStyles = fixedActionBarStyles;
+
+var wrapperStyles = function wrapperStyles(isFixed) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n"])), isFixed ? fixedActionBarStyles : 'opacity: 0;', (0, _styles.transition)());
+};
+
+exports.wrapperStyles = wrapperStyles;
+wrapperStyles.displayName = 'ActionsBarWrapper';

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

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

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

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

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fixedBlanketStyles = exports.blanketStyles = exports.blanketClassName = 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 blanketClassName = 'media-card-blanket';
+exports.blanketClassName = blanketClassName;
+var fixedBlanketStyles = "background-color: ".concat(_colors.N90A, ";");
+exports.fixedBlanketStyles = fixedBlanketStyles;
+
+var blanketStyles = function blanketStyles(isFixed) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  left: 0;\n  top: 0;\n  ", "\n"])), (0, _styles.transition)(), isFixed ? fixedBlanketStyles : '');
+};
+
+exports.blanketStyles = blanketStyles;
+blanketStyles.displayName = 'Blanket';

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

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

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;