@atlaskit/media-card 73.6.0 → 74.0.0

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

@@ -1,79 +0,0 @@
-import styled from 'styled-components';
-import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
-import { N0 } from '@atlaskit/theme/colors';
-import { rgba } from '../../../styles/mixins';
-
-const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
-  const setting = responsiveSettings[breakpoint];
-  const verticalPadding = setting.titleBox.verticalPadding;
-  const horizontalPadding = setting.titleBox.horizontalPadding;
-  const height = getTitleBoxHeight(breakpoint);
-  return `
-    height: ${height}px;
-    padding: ${verticalPadding}px ${horizontalPadding}px;
-  `;
-};
-
-const HEX_REGEX = /^#[0-9A-F]{6}$/i;
-export const TitleBoxWrapper = styled.div`
-  ${({
-  breakpoint,
-  titleBoxBgColor
-}) => `
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    background-color: ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 0.8)};
-    color: inherit;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    ${generateResponsiveStyles(breakpoint)}
-  `}
-`;
-TitleBoxWrapper.displayName = 'TitleBoxWrapper';
-const infoStyles = `
-  white-space: nowrap;
-  overflow: hidden;
-`;
-const iconOverlapStyles = `
-  padding-right: 10px;
-`;
-export const TitleBoxHeader = styled.div`
-  ${({
-  hasIconOverlap
-}) => `
-    font-weight: 600;
-    ${infoStyles}
-    ${hasIconOverlap && iconOverlapStyles}
-  `}
-`;
-TitleBoxHeader.displayName = 'FailedTitleBoxHeader';
-export const TitleBoxFooter = styled.div`
-  ${({
-  hasIconOverlap
-}) => `
-    text-overflow: ellipsis;
-    ${infoStyles}
-    ${hasIconOverlap && iconOverlapStyles}
-  `}
-`;
-TitleBoxFooter.displayName = 'TitleBoxFooter';
-export const TitleBoxIcon = styled.div`
-  position: absolute;
-  right: 4px;
-  bottom: 0px;
-`;
-TitleBoxIcon.displayName = 'TitleBoxIcon';
-export const ErrorMessageWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  span {
-    vertical-align: middle;
-    :nth-child(2) {
-      margin-left: 4px;
-      margin-right: 4px;
-    }
-  }
-`;

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

@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-export const ErrorIconWrapper = styled.div`
-  display: flex;
-  color: #ff991f;
-`;

package/dist/esm/files/cardImageView/cardOverlay/styled.js

@@ -1,39 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-
-/**
- * Everything about this file change is just wrong.
- * Mostly because we do bad things with classes.
- * This is all wrong and hopefully will be removed from existence with card v3,
- * so please don’t be too sad about all this!
- */
-import styled from 'styled-components';
-import { rgba, centerX, easeOutCubic, transition, antialiased } from '../../../styles';
-import { borderRadius, size, ellipsis, absolute } from '@atlaskit/media-ui';
-import { themed } from '@atlaskit/theme/components';
-import * as colors from '@atlaskit/theme/colors';
-export var TickBox = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " ", " background-color: ", ";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  border-radius: 20px;\n  color: #798599; /* TODO FIL-3884: Align color with new design */\n  display: flex;\n  opacity: 0;\n\n  &.selected {\n    opacity: 1;\n    color: white;\n    background-color: #0052cc; /* TODO FIL-3884: Align with tickbox icons */\n  }\n\n  /* Enforce dimensions of \"tick\" icon */\n  svg {\n    position: absolute;\n    width: 14px;\n  }\n"])), size(14), transition(), rgba('#ffffff', 0.5));
-export var Overlay = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", " ", " ", " display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  background: transparent;\n  transition: 0.3s background ", ", 0.3s border-color;\n  padding: 16px;\n\n  ", " &:not(.persistent):hover, &.active {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n\n    .bottom-row {\n      .delete-btn {\n        display: flex;\n      }\n    }\n  }\n\n  &.noHover:hover {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  .file-type-icon {\n    display: block;\n  }\n\n  &:not(.persistent) {\n    &:not(.error, .noHover):hover {\n      background-color: ", ";\n    }\n\n    &.selectable {\n      &.selected {\n        background-color: ", ";\n\n        &:hover {\n          /* TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */\n        }\n\n        .title,\n        .bottom-row,\n        .file-size,\n        .more-btn {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.persistent {\n    &:not(.active) {\n      overflow: hidden;\n    }\n\n    .top-row {\n      .title {\n        transition: opacity 0.3s;\n        opacity: 0;\n        color: white;\n        visibility: hidden;\n      }\n    }\n\n    .bottom-row {\n      opacity: 0;\n      transition: transform 0.2s, opacity 0.5s;\n      /* This is the height of the overlay footer, needs to be present now since the parent uses flex and 100% doesn't look right anymore */\n      transform: translateY(35px);\n\n      .file-type-icon {\n        display: none;\n      }\n\n      .file-size {\n        color: white;\n        display: none;\n      }\n\n      .more-btn {\n        color: ", ";\n        display: none;\n\n        &:hover {\n          background-color: rgba(9, 30, 66, 0.2);\n        }\n      }\n\n      .delete-btn {\n        display: none;\n\n        &:hover {\n          background-color: rgba(9, 30, 66, 0.2);\n        }\n      }\n    }\n\n    &:hover,\n    &.active {\n      background-color: ", ";\n\n      .title {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      .file-type-icon,\n      .file-size {\n        display: block;\n      }\n\n      .more-btn {\n        ", " color: ", ";\n      }\n\n      .delete-btn {\n        display: flex;\n      }\n\n      .bottom-row {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    /* Selectable */\n    &.selectable {\n      &:hover {\n        .tickbox {\n          opacity: 1;\n        }\n      }\n\n      &.selected {\n        .tickbox {\n          background-color: ", " !important;\n          border-color: ", " !important;\n          color: white;\n        }\n      }\n    }\n  }\n\n  &.error {\n    .top-row {\n      overflow: visible;\n    }\n    &:hover,\n    &.active {\n      .top-row {\n        .title {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), size(), absolute(), borderRadius, easeOutCubic, function (_ref) {
-  var hasError = _ref.hasError,
-      noHover = _ref.noHover;
-
-  if (hasError || noHover) {
-    return "\n        cursor: default;\n\n        &:hover {\n          background: transparent;\n        }\n      ";
-  }
-
-  return '';
-}, colors.B400, colors.N800, rgba(colors.N900, 0.06), colors.B200, colors.N0, colors.N0, rgba(colors.N900, 0.5), centerX, colors.N0, colors.B200, colors.B200, colors.N800);
-export var ErrorLine = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 24px;\n  display: flex;\n  align-items: center;\n"])));
-export var LeftColumn = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  box-sizing: border-box;\n  vertical-align: middle;\n"])));
-export var TopRow = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
-export var BottomRow = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 16px;\n"])));
-export var RightColumn = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
-export var ErrorMessage = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", " display: inline-block;\n  vertical-align: middle;\n  font-weight: bold;\n  color: ", ";\n  font-size: 12px;\n  line-height: 15px;\n  overflow: hidden;\n  max-width: ~'calc(100% - 24px)';\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin: auto 3px;\n"])), antialiased, colors.N70);
-export var AltWrapper = styled(ErrorMessage)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-weight: normal;\n"])));
-export var TitleWrapper = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  word-wrap: break-word;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n"])), themed({
-  light: colors.N800,
-  dark: colors.DN900
-}));
-export var Subtitle = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", " font-size: 12px;\n  color: #5e6c84;\n"])), ellipsis('100px'));
-export var Metadata = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));

package/dist/esm/files/cardImageView/styled.js

@@ -1,34 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
-import styled from 'styled-components';
-import { absolute, borderRadius, size } from '@atlaskit/media-ui';
-import { themed } from '@atlaskit/theme/components';
-import { N20, DN50, N0 } from '@atlaskit/theme/colors';
-import { Root, cardShadow } from '../../styles';
-import { getSelectedBorderStyle } from '../../styles/getSelectedBorderStyle';
-
-var getShadowAttribute = function getShadowAttribute(props) {
-  var disableOverlay = props.disableOverlay;
-  return disableOverlay ? '' : cardShadow;
-};
-
-var getBackgroundColor = function getBackgroundColor(props) {
-  var mediaType = props.mediaType;
-  return "background: ".concat(mediaType === 'image' ? 'transparent' : themed({
-    light: N20,
-    dark: DN50
-  })(props), ";");
-};
-
-export var Wrapper = styled(Root)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n\n  line-height: normal;\n  position: relative;\n\n  ", "\n\n  ", " .wrapper {\n    ", ";\n    display: block;\n    height: inherit;\n    position: relative;\n\n    .img-wrapper {\n      position: relative;\n      width: inherit;\n      height: inherit;\n      overflow: hidden;\n      display: block;\n      ", "\n    }\n  }\n"])), getShadowAttribute, borderRadius, getBackgroundColor, getSelectedBorderStyle, size(), borderRadius, borderRadius);
-export var PlayIconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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: white;\n\n  /* we want to override default icon size and hover state */\n  &:hover > * {\n    width: 64px;\n    height: 64px;\n  }\n"])));
-export var PlayIconBackground = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: rgba(23, 43, 77, 0.7);\n  border-radius: 100%;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  width: 56px;\n  height: 56px;\n"])));
-var bodyHeight = 26;
-export var ProgressBarWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n"])));
-export var Overlay = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  border-radius: inherit;\n  background-color: rgba(9, 30, 66, 0.5);\n"])), absolute(), size());
-export var Title = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " width: 100%;\n  padding: 8px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  word-wrap: break-word;\n"])), absolute(), N0);
-export var Body = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 8px;\n  color: ", ";\n"])), N0);
-export var ProgressWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n\n  /*\n    force the height to always be 20px (the height of the cancel icon),\n    so that the height of the progress bar doesn't jump when cards with\n    and without a cancel icon are rendered side-by-side.\n  */\n  height: ", "px;\n\n  /*\n    vertically center the progress bar within the 20px, keeping the progress bar full width\n  */\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])), bodyHeight);
-export var CardActionsWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin-left: 4px;\n  /*\n    button must appear above overlay\n   */\n  z-index: 2;\n"])));

package/dist/esm/root/styled.js

@@ -1,36 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3;
-
-import styled from 'styled-components';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { getCSSUnitValue } from '../utils/getCSSUnitValue';
-import { breakpointStyles } from '../utils/breakpoint';
-import { getSelectedBorderStyle } from '../styles/getSelectedBorderStyle';
-import { getDimensionsWithDefault } from '../utils/lightCards/getDimensionsWithDefault';
-
-var getWrapperHeight = function getWrapperHeight(dimensions) {
-  return dimensions && dimensions.height ? "height: ".concat(getCSSUnitValue(dimensions.height), "; max-height: 100%;") : '';
-};
-
-var getWrapperWidth = function getWrapperWidth(dimensions) {
-  return dimensions && dimensions.width ? "width: ".concat(getCSSUnitValue(dimensions.width), "; max-width: 100%;") : '';
-};
-
-export var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
-  var dimensions = _ref.dimensions,
-      _ref$breakpointSize = _ref.breakpointSize,
-      breakpointSize = _ref$breakpointSize === void 0 ? 'medium' : _ref$breakpointSize,
-      shouldUsePointerCursor = _ref.shouldUsePointerCursor;
-  return "\n      ".concat(breakpointStyles({
-    breakpointSize: breakpointSize
-  }), "\n      ").concat(getWrapperHeight(dimensions), "\n      ").concat(getWrapperWidth(dimensions), "\n      cursor: ").concat(shouldUsePointerCursor ? 'pointer' : 'default', ";\n    ");
-});
-Wrapper.displayName = 'CardViewWrapper';
-export var InlinePlayerWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), function (props) {
-  return getDimensionsWithDefault(props.dimensions).width || '100%';
-}, function (props) {
-  return getDimensionsWithDefault(props.dimensions).height || 'auto';
-}, borderRadius(), getSelectedBorderStyle);
-InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
-export var FormattedMessageWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));

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

@@ -1,15 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
-import styled from 'styled-components';
-import { transition } from '../../../styles';
-export var actionsBarClassName = 'media-card-actions-bar';
-export var fixedActionBarStyles = "\n  opacity: 1;\n";
-export var Wrapper = styled.div.attrs({
-  className: actionsBarClassName
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
-  var isFixed = _ref.isFixed;
-  return "\n    ".concat(isFixed ? fixedActionBarStyles : 'opacity: 0;', "\n    ").concat(transition(), "\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: center;\n  ");
-});
-Wrapper.displayName = 'ActionsBarWrapper';

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

@@ -1,16 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
-import styled from 'styled-components';
-import { transition } from '../../../styles';
-import { N90A } from '@atlaskit/theme/colors';
-export var blanketClassName = 'media-card-blanket';
-export var fixedBlanketStyles = "\n  background-color: ".concat(N90A, ";\n");
-export var Blanket = styled.div.attrs({
-  className: blanketClassName
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
-  var isFixed = _ref.isFixed;
-  return "\n    ".concat(transition(), "\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    left: 0;\n    top: 0;\n    ").concat(isFixed ? fixedBlanketStyles : '', "\n  ");
-});
-Blanket.displayName = 'Blanket';

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

@@ -1,15 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2;
-
-import styled from 'styled-components';
-import { keyframes } from 'styled-components';
-import { N300 } from '@atlaskit/theme/colors';
-var breatheAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% { opacity: 1}\n 50% { opacity: 0.3 }\n 100% { opacity: 1; }"])));
-var animatedStyles = "\n  animation-name: ".concat(breatheAnimation, ";\n  animation-duration: 3.5s;\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n");
-export var IconMessageWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
-  var animated = _ref.animated,
-      reducedFont = _ref.reducedFont;
-  return "\n    overflow: hidden;\n    opacity: 1;\n    font-weight: 450;\n    ".concat(reducedFont ? 'font-size: 0.7em;' : '', "\n    color: ").concat(N300, ";\n    text-align:center;\n    ").concat(animated ? animatedStyles : '', "\n    margin-bottom: -1em;\n    padding: 3px 10px;\n");
-});
-IconMessageWrapper.displayName = 'IconMessageWrapper';

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

@@ -1,17 +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 var LoadingRateLimited = function LoadingRateLimited(_ref) {
-  var _ref$breakpoint = _ref.breakpoint,
-      breakpoint = _ref$breakpoint === void 0 ? Breakpoint.SMALL : _ref$breakpoint,
-      _ref$positionBottom = _ref.positionBottom,
-      positionBottom = _ref$positionBottom === void 0 ? true : _ref$positionBottom;
-  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/esm/root/ui/loadingRateLimited/styled.js

@@ -1,17 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-import styled from 'styled-components';
-import { generateResponsiveStyles } from '../progressBar/styled';
-import { N300 } from '@atlaskit/theme/colors';
-export var LoadingRateLimitedContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n"])));
-export var WarningIconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])));
-export var LoadingRateLimitedTextWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
-  var breakpoint = _ref.breakpoint,
-      positionBottom = _ref.positionBottom;
-  return "\n    margin-top: 10px;\n    overflow: hidden;\n    color: ".concat(N300, ";\n    display: block;\n    width:100%;\n    text-align:center;\n    ").concat(generateResponsiveStyles(breakpoint, positionBottom, false, 1), "\n  ");
-});
-LoadingRateLimitedTextWrapper.displayName = 'LoadingRateLimitedTextWrapper';
-export var CouldntLoadWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: 550;\n"])));
-export var ErrorWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-weight: 350;\n"])));

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

@@ -1,19 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2;
-
-import styled from 'styled-components';
-import { N0, N90A } from '@atlaskit/theme/colors';
-export var playButtonClassName = 'media-card-play-button';
-var bkgClassName = 'play-icon-background';
-var discSize = 48;
-var discSizeHover = 56;
-export var fixedPlayButtonStyles = "\n  .".concat(bkgClassName, " {\n    width: ").concat(discSizeHover, "px;\n    height: ").concat(discSizeHover, "px;\n  }\n");
-export var Wrapper = styled.div.attrs({
-  className: playButtonClassName
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), N0);
-Wrapper.displayName = 'PlayButtonWrapper';
-export var Background = styled.div.attrs({
-  className: bkgClassName
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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, N90A);
-Background.displayName = 'PlayButtonBackground';

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

@@ -1,98 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
-var _templateObject, _templateObject2;
-
-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';
-var breakpointSizes = [[Breakpoint.SMALL, 599], [Breakpoint.LARGE, Infinity]];
-export var calcBreakpointSize = function calcBreakpointSize() {
-  var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
-  var _ref = breakpointSizes.find(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-        _breakpoint = _ref4[0],
-        limit = _ref4[1];
-
-    return wrapperWidth <= limit;
-  }) || [Breakpoint.SMALL],
-      _ref2 = _slicedToArray(_ref, 1),
-      breakpoint = _ref2[0];
-
-  return breakpoint;
-};
-
-var generateResponsiveStyles = function generateResponsiveStyles() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Breakpoint.SMALL;
-  var setting = responsiveSettings[breakpoint];
-  return "\n    font-size: ".concat(setting.fontSize, "px;\n    line-height: ").concat(setting.lineHeight, "px;\n  ");
-};
-
-var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
-  var _ref5 = dimensions || {},
-      width = _ref5.width,
-      height = _ref5.height;
-
-  var _getDefaultCardDimens = getDefaultCardDimensions(appearance),
-      defaultWidth = _getDefaultCardDimens.width,
-      defaultHeight = _getDefaultCardDimens.height;
-
-  return "\n    width: ".concat(getCSSUnitValue(width || defaultWidth), ";\n    max-width: 100%;\n    height: ").concat(getCSSUnitValue(height || defaultHeight), ";\n    max-height: 100%;\n  ");
-}; // 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
-
-
-var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
-  var withOverlayShadow = !disableOverlay ? "0 1px 1px ".concat(N60A, ", 0 0 1px 0 ").concat(N60A) : '';
-  var selectedShadow = selected ? akEditorSelectedBoxShadow : '';
-  var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
-  return shadow ? "box-shadow: ".concat(shadow, ";") : '';
-};
-
-var getCursorStyle = function getCursorStyle(cursor) {
-  return "cursor: ".concat(cursor, ";");
-};
-
-var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {
-  if (!isPlayButtonClickable) {
-    return '';
-  }
-
-  return "\n    &:hover .".concat(playButtonClassName, " {\n      ").concat(fixedPlayButtonStyles, "\n    }\n  ");
-};
-
-var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSelectable) {
-  if (!isTickBoxSelectable) {
-    return '';
-  }
-
-  return "\n    &:hover .".concat(tickBoxClassName, " {\n      ").concat(tickboxFixedStyles, "\n    }\n  ");
-};
-
-export var NewFileExperienceWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(transition(), "\n    box-sizing: border-box;\n    * {\n      box-sizing: border-box;\n    }\n    position: relative;\n    font-family: ").concat(fontFamily(), ";\n    ").concat(getWrapperDimensions(dimensions, appearance), "\n    ").concat(displayBackground ? "background-color: ".concat(N20, ";") : '', "\n    ").concat(borderRadius, "\n    ").concat(getCursorStyle(mediaCardCursor), "\n    ").concat(getWrapperShadow(disableOverlay, selected), "\n    ").concat(generateResponsiveStyles(breakpoint), "\n    ").concat(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(blanketClassName, " {\n      ").concat(fixedBlanketStyles, "\n    }\n\n    &:hover .").concat(actionsBarClassName, " {\n      ").concat(fixedActionBarStyles, "\n    }\n\n    /* Tooltip does not support percentage dimensions. We enforce them here */\n    ").concat(shouldDisplayTooltip ? "> div { width: 100%; height: 100% }" : '', "\n");
-});
-NewFileExperienceWrapper.displayName = 'NewFileExperienceWrapper';
-export var CardImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), borderRadius);

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

@@ -1,21 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
-import styled from 'styled-components';
-import { transition } from '../../../styles';
-import { B200, N0, N100 } from '@atlaskit/theme/colors';
-export var tickBoxClassName = 'media-card-tickbox';
-export var tickboxFixedStyles = "\n  background-color: ".concat(N0, ";\n  color: ").concat(N100, ";\n");
-
-var getSelectedStyles = function getSelectedStyles(selected) {
-  return selected ? "\n      background-color: ".concat(B200, ";\n      color: white;\n    ") : "";
-};
-
-export var Wrapper = styled.div.attrs({
-  className: tickBoxClassName
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
-  var selected = _ref.selected;
-  return "\n    ".concat(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  ");
-});
-Wrapper.displayName = 'TickBoxWrapper';

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

@@ -1,40 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-import styled from 'styled-components';
-import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
-import { N0 } from '@atlaskit/theme/colors';
-import { rgba } from '../../../styles/mixins';
-
-var generateResponsiveStyles = function generateResponsiveStyles() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Breakpoint.SMALL;
-  var setting = responsiveSettings[breakpoint];
-  var verticalPadding = setting.titleBox.verticalPadding;
-  var horizontalPadding = setting.titleBox.horizontalPadding;
-  var height = 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;
-export var TitleBoxWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 0.8), ";\n    color: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    ").concat(generateResponsiveStyles(breakpoint), "\n  ");
-});
-TitleBoxWrapper.displayName = 'TitleBoxWrapper';
-var infoStyles = "\n  white-space: nowrap;\n  overflow: hidden;\n";
-var iconOverlapStyles = "\n  padding-right: 10px;\n";
-export var TitleBoxHeader = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
-  var hasIconOverlap = _ref2.hasIconOverlap;
-  return "\n    font-weight: 600;\n    ".concat(infoStyles, "\n    ").concat(hasIconOverlap && iconOverlapStyles, "\n  ");
-});
-TitleBoxHeader.displayName = 'FailedTitleBoxHeader';
-export var TitleBoxFooter = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref3) {
-  var hasIconOverlap = _ref3.hasIconOverlap;
-  return "\n    text-overflow: ellipsis;\n    ".concat(infoStyles, "\n    ").concat(hasIconOverlap && iconOverlapStyles, "\n  ");
-});
-TitleBoxFooter.displayName = 'TitleBoxFooter';
-export var TitleBoxIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 4px;\n  bottom: 0px;\n"])));
-TitleBoxIcon.displayName = 'TitleBoxIcon';
-export var ErrorMessageWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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"])));

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

@@ -1,6 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
-import styled from 'styled-components';
-export var ErrorIconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  color: #ff991f;\n"])));

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

@@ -1,7 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
-import styled from 'styled-components';
-import { size } from '@atlaskit/media-ui';
-export var FileTypeIcon = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  float: left;\n  margin-right: 6px;\n  position: relative;\n  top: 1px;\n  img {\n    ", ";\n  }\n"])), size('12px !important'));

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

@@ -1,19 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3;
-
-import styled, { keyframes } from 'styled-components';
-import { center, borderRadius } from '@atlaskit/media-ui';
-import { themed } from '@atlaskit/theme/components';
-import { N20, DN50, N50, DN100 } from '@atlaskit/theme/colors';
-export var blinkLoadingAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0%{\n    opacity: 1;\n  }\n\n  50%{\n    opacity: 0.6;\n  }\n\n  100%{\n    opacity: 1;\n  }\n"])));
-export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", " background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n\n  ", "\n"])), center, themed({
-  light: N20,
-  dark: DN50
-}), themed({
-  light: N50,
-  dark: DN100
-}), borderRadius, function (props) {
-  return "\n      width: ".concat(props.dimensions.width, ";\n      height: ").concat(props.dimensions.height, ";\n    ");
-});
-export var AnimatedWrapper = styled(Wrapper)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  > span {\n    animation: ", " 0.8s infinite;\n  }\n"])), blinkLoadingAnimation);

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

@@ -1,7 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
-import styled from 'styled-components';
-import { borderRadius } from '@atlaskit/media-ui';
-export var ProgressWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), borderRadius);

package/dist/types/files/cardImageView/cardOverlay/styled.d.ts

@@ -1,23 +0,0 @@
-/**
- * Everything about this file change is just wrong.
- * Mostly because we do bad things with classes.
- * This is all wrong and hopefully will be removed from existence with card v3,
- * so please don’t be too sad about all this!
- */
-import { HTMLAttributes, ComponentClass } from 'react';
-export interface OverlayProps {
-    hasError?: boolean;
-    noHover?: boolean;
-}
-export declare const TickBox: ComponentClass<HTMLAttributes<{}> & OverlayProps>;
-export declare const Overlay: ComponentClass<HTMLAttributes<{}> & OverlayProps>;
-export declare const ErrorLine: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
-export declare const LeftColumn: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
-export declare const TopRow: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
-export declare const BottomRow: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
-export declare const RightColumn: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
-export declare const ErrorMessage: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
-export declare const AltWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
-export declare const TitleWrapper: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
-export declare const Subtitle: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;
-export declare const Metadata: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>;