@atlaskit/media-card 73.6.0 → 74.0.0

package/dist/cjs/root/cardViewWrapper.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _styles = require("./styles");
+
+/**@jsx jsx */
+var Wrapper = function Wrapper(props) {
+  var testId = props.testId,
+      shouldUsePointerCursor = props.shouldUsePointerCursor,
+      breakpointSize = props.breakpointSize,
+      dimensions = props.dimensions,
+      onClick = props.onClick,
+      onMouseEnter = props.onMouseEnter,
+      innerRef = props.innerRef;
+  return (0, _react.jsx)("div", {
+    id: "cardViewWrapper",
+    "data-testid": testId,
+    css: (0, _styles.wrapperStyles)({
+      shouldUsePointerCursor: shouldUsePointerCursor,
+      breakpointSize: breakpointSize,
+      dimensions: dimensions
+    }),
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    ref: innerRef
+  }, props.children);
+};
+
+exports.Wrapper = Wrapper;

package/dist/cjs/root/inlinePlayer.js

@@ -7,12 +7,12 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.inlinePlayerClassName = exports.getPreferredVideoArtifact = exports.InlinePlayerBase = exports.InlinePlayer = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.getPreferredVideoArtifact = exports.InlinePlayerBase = exports.InlinePlayer = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -35,20 +35,20 @@ var _mediaClient = require("@atlaskit/media-client");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
-var _styled = require("./styled");
-
 var _ = require("..");
 
 var _cardLoading = require("../utils/lightCards/cardLoading");
 
 var _progressBar = require("./ui/progressBar/progressBar");
 
-var _styled2 = require("./ui/styled");
+var _styles = require("./ui/styles");
 
 var _isValidPercentageUnit = require("../utils/isValidPercentageUnit");
 
 var _getElementDimension = require("../utils/getElementDimension");
 
+var _inlinePlayerWrapper = require("./inlinePlayerWrapper");
+
 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; }
@@ -57,9 +57,6 @@ 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 inlinePlayerClassName = 'media-card-inline-player';
-exports.inlinePlayerClassName = inlinePlayerClassName;
-
 var getPreferredVideoArtifact = function getPreferredVideoArtifact(fileState) {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
     var artifacts = fileState.artifacts;
@@ -316,7 +313,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
     key: "breakpoint",
     get: function get() {
       var width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || _.defaultImageCardDimensions.width;
-      return (0, _styled2.calcBreakpointSize)(parseInt("".concat(width), 10));
+      return (0, _styles.calcBreakpointSize)(parseInt("".concat(width), 10));
     }
   }, {
     key: "render",
@@ -332,7 +329,8 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
           identifier = _this$props4.identifier,
           forwardRef = _this$props4.forwardRef,
           autoplay = _this$props4.autoplay,
-          cardPreview = _this$props4.cardPreview;
+          cardPreview = _this$props4.cardPreview,
+          onFullscreenChange = _this$props4.onFullscreenChange;
       var _this$state = this.state,
           fileSrc = _this$state.fileSrc,
           isUploading = _this$state.isUploading,
@@ -345,10 +343,11 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styled.InlinePlayerWrapper, {
-        className: inlinePlayerClassName,
-        "data-testid": testId || 'media-card-inline-player',
-        selected: selected,
+      return /*#__PURE__*/_react.default.createElement(_inlinePlayerWrapper.InlinePlayerWrapper, {
+        testId: testId || 'media-card-inline-player',
+        selected: {
+          selected: selected
+        },
         onClick: onClick,
         innerRef: forwardRef || undefined,
         dimensions: dimensions
@@ -356,6 +355,7 @@ var InlinePlayerBase = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
           type: "video",
           src: fileSrc,
+          onFullscreenChange: onFullscreenChange,
           fileId: identifier.id,
           isAutoPlay: autoplay,
           isHDAvailable: false,

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