@atlaskit/media-card 73.6.0 → 74.0.0

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

@@ -1,43 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WarningIconWrapper = exports.LoadingRateLimitedTextWrapper = exports.LoadingRateLimitedContainer = exports.ErrorWrapper = exports.CouldntLoadWrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _styled = require("../progressBar/styled");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-var LoadingRateLimitedContainer = _styledComponents.default.div(_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.LoadingRateLimitedContainer = LoadingRateLimitedContainer;
-
-var WarningIconWrapper = _styledComponents.default.div(_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.WarningIconWrapper = WarningIconWrapper;
-
-var LoadingRateLimitedTextWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
-  var breakpoint = _ref.breakpoint,
-      positionBottom = _ref.positionBottom;
-  return "\n    margin-top: 10px;\n    overflow: hidden;\n    color: ".concat(_colors.N300, ";\n    display: block;\n    width:100%;\n    text-align:center;\n    ").concat((0, _styled.generateResponsiveStyles)(breakpoint, positionBottom, false, 1), "\n  ");
-});
-
-exports.LoadingRateLimitedTextWrapper = LoadingRateLimitedTextWrapper;
-LoadingRateLimitedTextWrapper.displayName = 'LoadingRateLimitedTextWrapper';
-
-var CouldntLoadWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 550;\n"])));
-
-exports.CouldntLoadWrapper = CouldntLoadWrapper;
-
-var ErrorWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 350;\n"])));
-
-exports.ErrorWrapper = ErrorWrapper;

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

@@ -1,38 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.playButtonClassName = exports.fixedPlayButtonStyles = exports.Wrapper = exports.Background = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _templateObject, _templateObject2;
-
-var playButtonClassName = 'media-card-play-button';
-exports.playButtonClassName = playButtonClassName;
-var bkgClassName = 'play-icon-background';
-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 Wrapper = _styledComponents.default.div.attrs({
-  className: playButtonClassName
-})(_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.Wrapper = Wrapper;
-Wrapper.displayName = 'PlayButtonWrapper';
-
-var Background = _styledComponents.default.div.attrs({
-  className: bkgClassName
-})(_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.Background = Background;
-Background.displayName = 'PlayButtonBackground';

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

@@ -1,37 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.tickboxFixedStyles = exports.tickBoxClassName = exports.Wrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-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 ? "\n      background-color: ".concat(_colors.B200, ";\n      color: white;\n    ") : "";
-};
-
-var Wrapper = _styledComponents.default.div.attrs({
-  className: tickBoxClassName
-})(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
-  var selected = _ref.selected;
-  return "\n    ".concat((0, _styles.transition)(), "\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\n    /* Enforce dimensions and position of \"tick\" icon */\n    span {\n      display: block;\n      svg {\n        height: 14px;\n      }\n    }\n    ").concat(getSelectedStyles(selected), "\n  ");
-});
-
-exports.Wrapper = Wrapper;
-Wrapper.displayName = 'TickBoxWrapper';

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

@@ -1,67 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TitleBoxWrapper = exports.TitleBoxIcon = exports.TitleBoxHeader = exports.TitleBoxFooter = exports.ErrorMessageWrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-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 "\n    height: ".concat(height, "px;\n    padding: ").concat(verticalPadding, "px ").concat(horizontalPadding, "px;\n  ");
-};
-
-var HEX_REGEX = /^#[0-9A-F]{6}$/i;
-
-var TitleBoxWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
-  var breakpoint = _ref.breakpoint,
-      titleBoxBgColor = _ref.titleBoxBgColor;
-  return "\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    background-color: ".concat((0, _mixins.rgba)(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 0.8), ";\n    color: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    ").concat(generateResponsiveStyles(breakpoint), "\n  ");
-});
-
-exports.TitleBoxWrapper = TitleBoxWrapper;
-TitleBoxWrapper.displayName = 'TitleBoxWrapper';
-var infoStyles = "\n  white-space: nowrap;\n  overflow: hidden;\n";
-var iconOverlapStyles = "\n  padding-right: 10px;\n";
-
-var TitleBoxHeader = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref2) {
-  var hasIconOverlap = _ref2.hasIconOverlap;
-  return "\n    font-weight: 600;\n    ".concat(infoStyles, "\n    ").concat(hasIconOverlap && iconOverlapStyles, "\n  ");
-});
-
-exports.TitleBoxHeader = TitleBoxHeader;
-TitleBoxHeader.displayName = 'FailedTitleBoxHeader';
-
-var TitleBoxFooter = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref3) {
-  var hasIconOverlap = _ref3.hasIconOverlap;
-  return "\n    text-overflow: ellipsis;\n    ".concat(infoStyles, "\n    ").concat(hasIconOverlap && iconOverlapStyles, "\n  ");
-});
-
-exports.TitleBoxFooter = TitleBoxFooter;
-TitleBoxFooter.displayName = 'TitleBoxFooter';
-
-var TitleBoxIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 4px;\n  bottom: 0px;\n"])));
-
-exports.TitleBoxIcon = TitleBoxIcon;
-TitleBoxIcon.displayName = 'TitleBoxIcon';
-
-var ErrorMessageWrapper = _styledComponents.default.div(_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.ErrorMessageWrapper = ErrorMessageWrapper;

package/dist/cjs/utils/errorIcon/styled.js

@@ -1,18 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ErrorIconWrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject;
-
-var ErrorIconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  color: #ff991f;\n"])));
-
-exports.ErrorIconWrapper = ErrorIconWrapper;

package/dist/cjs/utils/fileIcon/styled.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FileTypeIcon = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _mediaUi = require("@atlaskit/media-ui");
-
-var _templateObject;
-
-var FileTypeIcon = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  float: left;\n  margin-right: 6px;\n  position: relative;\n  top: 1px;\n  img {\n    ", ";\n  }\n"])), (0, _mediaUi.size)('12px !important'));
-
-exports.FileTypeIcon = FileTypeIcon;

package/dist/cjs/utils/lightCards/styled.js

@@ -1,43 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.blinkLoadingAnimation = exports.Wrapper = exports.AnimatedWrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _mediaUi = require("@atlaskit/media-ui");
-
-var _components = require("@atlaskit/theme/components");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _templateObject, _templateObject2, _templateObject3;
-
-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; }
-
-var blinkLoadingAnimation = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0%{\n    opacity: 1;\n  }\n\n  50%{\n    opacity: 0.6;\n  }\n\n  100%{\n    opacity: 1;\n  }\n"])));
-exports.blinkLoadingAnimation = blinkLoadingAnimation;
-
-var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", " background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n\n  ", "\n"])), _mediaUi.center, (0, _components.themed)({
-  light: _colors.N20,
-  dark: _colors.DN50
-}), (0, _components.themed)({
-  light: _colors.N50,
-  dark: _colors.DN100
-}), _mediaUi.borderRadius, function (props) {
-  return "\n      width: ".concat(props.dimensions.width, ";\n      height: ").concat(props.dimensions.height, ";\n    ");
-});
-
-exports.Wrapper = Wrapper;
-var AnimatedWrapper = (0, _styledComponents.default)(Wrapper)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  > span {\n    animation: ", " 0.8s infinite;\n  }\n"])), blinkLoadingAnimation);
-exports.AnimatedWrapper = AnimatedWrapper;

package/dist/cjs/utils/progressBar/styled.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ProgressWrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _mediaUi = require("@atlaskit/media-ui");
-
-var _templateObject;
-
-var ProgressWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " z-index: 30;\n  overflow: hidden;\n  background-color: rgba(255, 255, 255, 0.3);\n\n  .progressBar {\n    width: 0%;\n    height: 3px;\n    transition: width 0.25s ease-in;\n    background-color: white;\n  }\n"])), _mediaUi.borderRadius);
-
-exports.ProgressWrapper = ProgressWrapper;

package/dist/es2019/root/ui/actionsBar/styled.js

@@ -1,23 +0,0 @@
-import styled from 'styled-components';
-import { transition } from '../../../styles';
-export const actionsBarClassName = 'media-card-actions-bar';
-export const fixedActionBarStyles = `
-  opacity: 1;
-`;
-export const Wrapper = styled.div.attrs({
-  className: actionsBarClassName
-})`
-  ${({
-  isFixed
-}) => `
-    ${isFixed ? fixedActionBarStyles : 'opacity: 0;'}
-    ${transition()}
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-  `}
-`;
-Wrapper.displayName = 'ActionsBarWrapper';

package/dist/es2019/root/ui/blanket/styled.js

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-import { transition } from '../../../styles';
-import { N90A } from '@atlaskit/theme/colors';
-export const blanketClassName = 'media-card-blanket';
-export const fixedBlanketStyles = `
-  background-color: ${N90A};
-`;
-export const Blanket = styled.div.attrs({
-  className: blanketClassName
-})`
-  ${({
-  isFixed
-}) => `
-    ${transition()}
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    max-width: 100%;
-    left: 0;
-    top: 0;
-    ${isFixed ? fixedBlanketStyles : ''}
-  `}
-`;
-Blanket.displayName = 'Blanket';

package/dist/es2019/root/ui/iconMessage/styled.js

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-import { keyframes } from 'styled-components';
-import { N300 } from '@atlaskit/theme/colors';
-const breatheAnimation = keyframes`
- 0% { opacity: 1}
- 50% { opacity: 0.3 }
- 100% { opacity: 1; }`;
-const animatedStyles = `
-  animation-name: ${breatheAnimation};
-  animation-duration: 3.5s;
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
-`;
-export const IconMessageWrapper = styled.div`
-  ${({
-  animated,
-  reducedFont
-}) => `
-    overflow: hidden;
-    opacity: 1;
-    font-weight: 450;
-    ${reducedFont ? 'font-size: 0.7em;' : ''}
-    color: ${N300};
-    text-align:center;
-    ${animated ? animatedStyles : ''}
-    margin-bottom: -1em;
-    padding: 3px 10px;
-`}
-`;
-IconMessageWrapper.displayName = 'IconMessageWrapper';

package/dist/es2019/root/ui/iconWrapper/styled.js

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-import { getTitleBoxHeight } from '../common';
-export function titleBoxHeight(hasTitleBox, breakpoint) {
-  // there is no titlebox
-  if (!hasTitleBox) {
-    return `0px`;
-  } // calculate height of the titlebox
-
-
-  const marginBottom = getTitleBoxHeight(breakpoint);
-  return `${marginBottom}px`;
-}
-export const IconWrapper = styled.div`
-  ${({
-  hasTitleBox,
-  breakpoint
-}) => `
-    position: absolute;
-    width: 100%;
-    height: calc(100% - ${titleBoxHeight(hasTitleBox, breakpoint)});
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-`}
-`;
-IconWrapper.displayName = 'MediaIconWrapper';

package/dist/es2019/root/ui/loadingRateLimited/loadingRateLimited.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import { errorIcon } from '@atlaskit/media-ui/errorIcon';
-import { WarningIconWrapper, LoadingRateLimitedContainer, CouldntLoadWrapper, ErrorWrapper, LoadingRateLimitedTextWrapper } from './styled';
-import { FormattedMessageWrapper } from '../../styled';
-import { messages } from '@atlaskit/media-ui';
-import { FormattedMessage } from 'react-intl-next';
-import { Breakpoint } from '../common';
-export const LoadingRateLimited = ({
-  breakpoint = Breakpoint.SMALL,
-  positionBottom = true
-}) => {
-  return /*#__PURE__*/React.createElement(LoadingRateLimitedContainer, null, /*#__PURE__*/React.createElement(WarningIconWrapper, null, errorIcon), /*#__PURE__*/React.createElement(LoadingRateLimitedTextWrapper, {
-    breakpoint: breakpoint,
-    positionBottom: positionBottom
-  }, /*#__PURE__*/React.createElement(CouldntLoadWrapper, null, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.couldnt_load_file))), /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.error_429)))));
-};

package/dist/es2019/root/ui/loadingRateLimited/styled.js

@@ -1,43 +0,0 @@
-import styled from 'styled-components';
-import { generateResponsiveStyles } from '../progressBar/styled';
-import { N300 } from '@atlaskit/theme/colors';
-export const LoadingRateLimitedContainer = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-`;
-export const WarningIconWrapper = styled.div`
-  width: 100%;
-  justify-content: center;
-  display: flex;
-  /* Required to allow end users to select text in the error message */
-  cursor: auto;
-  user-select: text;
-  > svg {
-    width: 45px;
-  }
-`;
-export const LoadingRateLimitedTextWrapper = styled.div`
-  ${({
-  breakpoint,
-  positionBottom
-}) => `
-    margin-top: 10px;
-    overflow: hidden;
-    color: ${N300};
-    display: block;
-    width:100%;
-    text-align:center;
-    ${generateResponsiveStyles(breakpoint, positionBottom, false, 1)}
-  `}
-`;
-LoadingRateLimitedTextWrapper.displayName = 'LoadingRateLimitedTextWrapper';
-export const CouldntLoadWrapper = styled.div`
-  font-weight: 550;
-`;
-export const ErrorWrapper = styled.div`
-  font-weight: 350;
-`;

package/dist/es2019/root/ui/styled.js

@@ -1,134 +0,0 @@
-import styled from 'styled-components';
-import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
-import { getDefaultCardDimensions } from '../../utils/cardDimensions';
-import { fontFamily } from '@atlaskit/theme/constants';
-import { borderRadius } from '@atlaskit/media-ui';
-import { N20, N60A } from '@atlaskit/theme/colors';
-import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
-import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
-import { transition } from '../../styles';
-import { tickBoxClassName, tickboxFixedStyles } from './tickBox/styled';
-import { fixedBlanketStyles, blanketClassName } from './blanket/styled';
-import { fixedActionBarStyles, actionsBarClassName } from './actionsBar/styled';
-import { fixedPlayButtonStyles, playButtonClassName } from './playButton/styled';
-import { Breakpoint, responsiveSettings } from './common';
-const breakpointSizes = [[Breakpoint.SMALL, 599], [Breakpoint.LARGE, Infinity]];
-export const calcBreakpointSize = (wrapperWidth = 0) => {
-  const [breakpoint] = breakpointSizes.find(([_breakpoint, limit]) => wrapperWidth <= limit) || [Breakpoint.SMALL];
-  return breakpoint;
-};
-
-const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
-  const setting = responsiveSettings[breakpoint];
-  return `
-    font-size: ${setting.fontSize}px;
-    line-height: ${setting.lineHeight}px;
-  `;
-};
-
-const getWrapperDimensions = (dimensions, appearance) => {
-  const {
-    width,
-    height
-  } = dimensions || {};
-  const {
-    width: defaultWidth,
-    height: defaultHeight
-  } = getDefaultCardDimensions(appearance);
-  return `
-    width: ${getCSSUnitValue(width || defaultWidth)};
-    max-width: 100%;
-    height: ${getCSSUnitValue(height || defaultHeight)};
-    max-height: 100%;
-  `;
-}; // This is a trick to simulate the blue border without affecting the dimensions.
-// CSS outline has no 'radius', therefore we can't achieve the same effect with it
-
-
-const getWrapperShadow = (disableOverlay, selected) => {
-  const withOverlayShadow = !disableOverlay ? `0 1px 1px ${N60A}, 0 0 1px 0 ${N60A}` : '';
-  const selectedShadow = selected ? akEditorSelectedBoxShadow : '';
-  const shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
-  return shadow ? `box-shadow: ${shadow};` : '';
-};
-
-const getCursorStyle = cursor => `cursor: ${cursor};`;
-
-const getClickablePlayButtonStyles = isPlayButtonClickable => {
-  if (!isPlayButtonClickable) {
-    return '';
-  }
-
-  return `
-    &:hover .${playButtonClassName} {
-      ${fixedPlayButtonStyles}
-    }
-  `;
-};
-
-const getSelectableTickBoxStyles = isTickBoxSelectable => {
-  if (!isTickBoxSelectable) {
-    return '';
-  }
-
-  return `
-    &:hover .${tickBoxClassName} {
-      ${tickboxFixedStyles}
-    }
-  `;
-};
-
-export const NewFileExperienceWrapper = styled.div`
-  ${({
-  breakpoint,
-  dimensions,
-  appearance,
-  disableOverlay,
-  displayBackground,
-  selected,
-  isPlayButtonClickable,
-  isTickBoxSelectable,
-  shouldDisplayTooltip,
-  mediaCardCursor
-}) => `
-    ${transition()}
-    box-sizing: border-box;
-    * {
-      box-sizing: border-box;
-    }
-    position: relative;
-    font-family: ${fontFamily()};
-    ${getWrapperDimensions(dimensions, appearance)}
-    ${displayBackground ? `background-color: ${N20};` : ''}
-    ${borderRadius}
-    ${getCursorStyle(mediaCardCursor)}
-    ${getWrapperShadow(disableOverlay, selected)}
-    ${generateResponsiveStyles(breakpoint)}
-    ${hideNativeBrowserTextSelectionStyles}
-
-    /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */
-    ${getClickablePlayButtonStyles(isPlayButtonClickable)}
-    ${getSelectableTickBoxStyles(isTickBoxSelectable)}
-    &:hover .${blanketClassName} {
-      ${fixedBlanketStyles}
-    }
-
-    &:hover .${actionsBarClassName} {
-      ${fixedActionBarStyles}
-    }
-
-    /* Tooltip does not support percentage dimensions. We enforce them here */
-    ${shouldDisplayTooltip ? `> div { width: 100%; height: 100% }` : ''}
-`}
-`;
-NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
-export const CardImageContainer = styled.div`
-  display: flex;
-  position: relative;
-  max-width: 100%;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-  overflow: hidden;
-  ${borderRadius}
-`;

package/dist/es2019/root/ui/tickBox/styled.js

@@ -1,41 +0,0 @@
-import styled from 'styled-components';
-import { transition } from '../../../styles';
-import { B200, N0, N100 } from '@atlaskit/theme/colors';
-export const tickBoxClassName = 'media-card-tickbox';
-export const tickboxFixedStyles = `
-  background-color: ${N0};
-  color: ${N100};
-`;
-
-const getSelectedStyles = selected => selected ? `
-      background-color: ${B200};
-      color: white;
-    ` : ``;
-
-export const Wrapper = styled.div.attrs({
-  className: tickBoxClassName
-})`
-  ${({
-  selected
-}) => `
-    ${transition()}
-    font-size: 14px;
-    width: 14px;
-    height: 14px;
-    position: absolute;
-    top: 7px;
-    left: 7px;
-    border-radius: 20px;
-    color: transparent;
-
-    /* Enforce dimensions and position of "tick" icon */
-    span {
-      display: block;
-      svg {
-        height: 14px;
-      }
-    }
-    ${getSelectedStyles(selected)}
-  `}
-`;
-Wrapper.displayName = 'TickBoxWrapper';