@atlaskit/media-card 73.8.0 → 74.0.0

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    cursor: inherit;\n    pointer-events: none;\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/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: ${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';

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

@@ -1,81 +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;
-    cursor: inherit;
-    pointer-events: none;
-    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"])));