@atlaskit/media-card 73.8.0 → 74.0.0

package/report.api.md

@@ -0,0 +1,269 @@
+## API Report File for "@atlaskit/media-card"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { Component } from 'react';
+import { FileDetails } from '@atlaskit/media-client';
+import { FileIdentifier } from '@atlaskit/media-client';
+import { FileItem } from '@atlaskit/media-client';
+import { FileState } from '@atlaskit/media-client';
+import { Identifier } from '@atlaskit/media-client';
+import { ImageResizeMode } from '@atlaskit/media-client';
+import { MediaClient } from '@atlaskit/media-client';
+import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { MediaViewerDataSource } from '@atlaskit/media-viewer';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { NumericalCardDimensions } from '@atlaskit/media-common';
+import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
+import { SSR } from '@atlaskit/media-common';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { WithMediaClientConfigProps } from '@atlaskit/media-client';
+import { WrappedComponentProps } from 'react-intl-next';
+
+export declare const Card: React_2.FC<CardWithMediaClientConfigProps>;
+
+export declare interface CardAction {
+  label?: string;
+  handler: CardEventHandler;
+  icon?: ReactNode;
+}
+
+export declare type CardAppearance = 'auto' | 'image' | 'square' | 'horizontal';
+
+declare type CardBaseProps = CardProps &
+  WithAnalyticsEventsProps &
+  Partial<WrappedComponentProps>;
+
+export declare interface CardDimensions {
+  width?: CardDimensionValue;
+  height?: CardDimensionValue;
+}
+
+export declare type CardDimensionValue = number | string;
+
+export declare class CardError extends Component<ErrorCardProps, {}> {
+  static defaultProps: {
+    size: string;
+  };
+  render(): JSX.Element;
+  get icon(): JSX.Element;
+}
+
+export declare interface CardEvent {
+  event: MouseEvent_2<HTMLElement>;
+  mediaItemDetails?: FileDetails;
+}
+
+export declare type CardEventHandler = (item?: FileItem, event?: Event) => void;
+
+export declare interface CardEventProps {
+  readonly onClick?: CardOnClickCallback;
+  readonly onMouseEnter?: (result: CardEvent) => void;
+  /** Callback function to be called when video enters and exit fullscreen.
+   * `fullscreen = true` indicates video enters fullscreen
+   * `fullscreen = false` indicates video exits fullscreen
+   */
+  readonly onFullscreenChange?: (fullscreen: boolean) => void;
+}
+
+export declare class CardLoading extends Component<StaticCardProps, {}> {
+  render(): JSX.Element;
+}
+
+export declare interface CardOnClickCallback {
+  (result: CardEvent, analyticsEvent?: UIAnalyticsEvent): void;
+}
+
+export declare interface CardPreview {
+  dataURI: string;
+  orientation?: number;
+  source: CardPreviewSource;
+}
+
+declare type CardPreviewSource =
+  | 'local'
+  | 'remote'
+  | 'ssr-server'
+  | 'ssr-client'
+  | 'ssr-data'
+  | 'cache-local'
+  | 'cache-remote'
+  | 'cache-ssr-client'
+  | 'cache-ssr-server'
+  | 'external';
+
+export declare interface CardProps extends SharedCardProps, CardEventProps {
+  readonly mediaClient: MediaClient;
+  readonly identifier: Identifier;
+  readonly isLazy?: boolean;
+  readonly useInlinePlayer?: boolean;
+  readonly shouldOpenMediaViewer?: boolean;
+  readonly mediaViewerDataSource?: MediaViewerDataSource;
+  readonly contextId?: string;
+  readonly shouldEnableDownloadButton?: boolean;
+  readonly ssr?: SSR;
+}
+
+export declare interface CardState {
+  status: CardStatus;
+  isCardVisible: boolean;
+  shouldAutoplay?: boolean;
+  isPlayingFile: boolean;
+  mediaViewerSelectedItem?: Identifier;
+  fileState?: FileState;
+  progress?: number;
+  cardPreview?: CardPreview;
+  error?: MediaCardError;
+  cardRef: HTMLDivElement | null;
+  isBannedLocalPreview: boolean;
+  previewDidRender: boolean;
+}
+
+export declare type CardStatus =
+  | 'uploading'
+  | 'loading'
+  | 'processing'
+  | 'loading-preview'
+  | 'complete'
+  | 'error'
+  | 'failed-processing';
+
+declare type CardWithMediaClientConfigProps = WithMediaClientConfigProps<
+  CardBaseProps
+>;
+
+export declare const defaultImageCardDimensions: {
+  width: number;
+  height: number;
+};
+
+declare type ErrorBoundaryComponent = React_2.ComponentType<{
+  data?: {
+    [k: string]: any;
+  };
+}>;
+
+declare interface ErrorCardProps extends StaticCardProps {
+  readonly size: 'small' | 'medium' | 'large' | 'xlarge';
+}
+
+export declare const fileCardImageViewSelectedSelector =
+  'media-file-card-view-selected';
+
+export declare const fileCardImageViewSelector = 'media-file-card-view';
+
+declare type ImageLoadPrimaryReason =
+  | 'cache-remote-uri'
+  | 'cache-local-uri'
+  | 'local-uri'
+  | 'remote-uri'
+  | 'external-uri'
+  | 'unknown-uri';
+
+export declare const inlinePlayerClassName = 'media-card-inline-player';
+
+declare type LocalPreviewPrimaryReason =
+  | 'local-preview-get'
+  | 'local-preview-unsupported'
+  | 'local-preview-rejected'
+  | 'local-preview-image'
+  | 'local-preview-video';
+
+declare class MediaCardError extends Error {
+  readonly primaryReason: MediaCardErrorPrimaryReason;
+  readonly secondaryError?: Error | undefined;
+  constructor(
+    primaryReason: MediaCardErrorPrimaryReason,
+    secondaryError?: Error | undefined,
+  );
+}
+
+declare type MediaCardErrorPrimaryReason =
+  | 'upload'
+  | 'metadata-fetch'
+  | 'error-file-state'
+  | RemotePreviewPrimaryReason
+  | LocalPreviewPrimaryReason
+  | ImageLoadPrimaryReason
+  | SsrPreviewPrimaryReason
+  | 'preview-fetch';
+
+export declare class MediaInlineCard extends React_2.PureComponent<
+  MediaInlineCardWithMediaClientConfigProps & MediaInlineCardLoaderState,
+  MediaInlineCardLoaderState
+> {
+  static displayName: string;
+  static MediaInlineCard?: MediaInlineCardWithMediaClientConfigComponent;
+  static ErrorBoundary?: ErrorBoundaryComponent;
+  isMounted: boolean;
+  state: MediaInlineCardLoaderState;
+  componentDidMount(): Promise<void>;
+  componentWillUnmount(): Promise<void>;
+  render(): JSX.Element;
+}
+
+declare interface MediaInlineCardLoaderState {
+  MediaInlineCard?: MediaInlineCardWithMediaClientConfigComponent;
+  ErrorBoundary?: ErrorBoundaryComponent;
+}
+
+declare interface MediaInlineCardProps {
+  identifier: FileIdentifier;
+  mediaClient: MediaClient;
+  shouldOpenMediaViewer?: boolean;
+  isSelected?: boolean;
+  onClick?: React_2.EventHandler<React_2.MouseEvent | React_2.KeyboardEvent>;
+  mediaViewerDataSource?: MediaViewerDataSource;
+}
+
+declare type MediaInlineCardWithMediaClientConfigComponent = React_2.ComponentType<
+  MediaInlineCardWithMediaClientConfigProps
+>;
+
+declare type MediaInlineCardWithMediaClientConfigProps = WithMediaClientConfigProps<
+  MediaInlineCardProps
+>;
+
+export declare const newFileExperienceClassName = 'new-file-experience-wrapper';
+
+export { NumericalCardDimensions };
+
+declare type RemotePreviewPrimaryReason =
+  | 'remote-preview-fetch'
+  | 'remote-preview-not-ready';
+
+export declare interface SharedCardProps {
+  readonly disableOverlay?: boolean;
+  readonly resizeMode?: ImageResizeMode;
+  readonly featureFlags?: MediaFeatureFlags;
+  readonly appearance?: CardAppearance;
+  readonly dimensions?: CardDimensions;
+  readonly originalDimensions?: NumericalCardDimensions;
+  readonly actions?: Array<CardAction>;
+  readonly selectable?: boolean;
+  readonly selected?: boolean;
+  readonly alt?: string;
+  readonly testId?: string;
+  readonly titleBoxBgColor?: string;
+  readonly titleBoxIcon?: TitleBoxIcon;
+}
+
+declare type SsrPreviewPrimaryReason =
+  | 'ssr-client-uri'
+  | 'ssr-client-load'
+  | 'ssr-server-uri'
+  | 'ssr-server-load';
+
+declare interface StaticCardProps {
+  dimensions?: CardDimensions;
+  testId?: string;
+  featureFlags?: MediaFeatureFlags;
+}
+
+export declare type TitleBoxIcon = 'LockFilledIcon';
+
+export {};
+```

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

@@ -1,86 +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.TopRow = exports.TitleWrapper = exports.TickBox = exports.Subtitle = exports.RightColumn = exports.Overlay = exports.Metadata = exports.LeftColumn = exports.ErrorMessage = exports.ErrorLine = exports.BottomRow = exports.AltWrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _styles = require("../../../styles");
-
-var _mediaUi = require("@atlaskit/media-ui");
-
-var _components = require("@atlaskit/theme/components");
-
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-
-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 TickBox = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _mediaUi.size)(14), (0, _styles.transition)(), (0, _styles.rgba)('#ffffff', 0.5));
-
-exports.TickBox = TickBox;
-
-var Overlay = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _mediaUi.size)(), (0, _mediaUi.absolute)(), _mediaUi.borderRadius, _styles.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, (0, _styles.rgba)(colors.N900, 0.06), colors.B200, colors.N0, colors.N0, (0, _styles.rgba)(colors.N900, 0.5), _styles.centerX, colors.N0, colors.B200, colors.B200, colors.N800);
-
-exports.Overlay = Overlay;
-
-var ErrorLine = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 24px;\n  display: flex;\n  align-items: center;\n"])));
-
-exports.ErrorLine = ErrorLine;
-
-var LeftColumn = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  position: relative;\n  box-sizing: border-box;\n  vertical-align: middle;\n"])));
-
-exports.LeftColumn = LeftColumn;
-
-var TopRow = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
-
-exports.TopRow = TopRow;
-
-var BottomRow = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  height: 16px;\n"])));
-
-exports.BottomRow = BottomRow;
-
-var RightColumn = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)([""])));
-
-exports.RightColumn = RightColumn;
-
-var ErrorMessage = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.antialiased, colors.N70);
-
-exports.ErrorMessage = ErrorMessage;
-var AltWrapper = (0, _styledComponents.default)(ErrorMessage)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: normal;\n"])));
-exports.AltWrapper = AltWrapper;
-
-var TitleWrapper = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  word-wrap: break-word;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n"])), (0, _components.themed)({
-  light: colors.N800,
-  dark: colors.DN900
-}));
-
-exports.TitleWrapper = TitleWrapper;
-
-var Subtitle = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-size: 12px;\n  color: #5e6c84;\n"])), (0, _mediaUi.ellipsis)('100px'));
-
-exports.Subtitle = Subtitle;
-
-var Metadata = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
-
-exports.Metadata = Metadata;

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

@@ -1,73 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Wrapper = exports.Title = exports.ProgressWrapper = exports.ProgressBarWrapper = exports.PlayIconWrapper = exports.PlayIconBackground = exports.Overlay = exports.CardActionsWrapper = exports.Body = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _mediaUi = require("@atlaskit/media-ui");
-
-var _components = require("@atlaskit/theme/components");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _styles = require("../../styles");
-
-var _getSelectedBorderStyle = require("../../styles/getSelectedBorderStyle");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
-var getShadowAttribute = function getShadowAttribute(props) {
-  var disableOverlay = props.disableOverlay;
-  return disableOverlay ? '' : _styles.cardShadow;
-};
-
-var getBackgroundColor = function getBackgroundColor(props) {
-  var mediaType = props.mediaType;
-  return "background: ".concat(mediaType === 'image' ? 'transparent' : (0, _components.themed)({
-    light: _colors.N20,
-    dark: _colors.DN50
-  })(props), ";");
-};
-
-var Wrapper = (0, _styledComponents.default)(_styles.Root)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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, _mediaUi.borderRadius, getBackgroundColor, _getSelectedBorderStyle.getSelectedBorderStyle, (0, _mediaUi.size)(), _mediaUi.borderRadius, _mediaUi.borderRadius);
-exports.Wrapper = Wrapper;
-
-var PlayIconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (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: white;\n\n  /* we want to override default icon size and hover state */\n  &:hover > * {\n    width: 64px;\n    height: 64px;\n  }\n"])));
-
-exports.PlayIconWrapper = PlayIconWrapper;
-
-var PlayIconBackground = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])));
-
-exports.PlayIconBackground = PlayIconBackground;
-var bodyHeight = 26;
-
-var ProgressBarWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n"])));
-
-exports.ProgressBarWrapper = ProgressBarWrapper;
-
-var Overlay = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  border-radius: inherit;\n  background-color: rgba(9, 30, 66, 0.5);\n"])), (0, _mediaUi.absolute)(), (0, _mediaUi.size)());
-
-exports.Overlay = Overlay;
-
-var Title = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", " width: 100%;\n  padding: 8px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  word-wrap: break-word;\n"])), (0, _mediaUi.absolute)(), _colors.N0);
-
-exports.Title = Title;
-
-var Body = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 8px;\n  color: ", ";\n"])), _colors.N0);
-
-exports.Body = Body;
-
-var ProgressWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\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);
-
-exports.ProgressWrapper = ProgressWrapper;
-
-var CardActionsWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 4px;\n  /*\n    button must appear above overlay\n   */\n  z-index: 2;\n"])));
-
-exports.CardActionsWrapper = CardActionsWrapper;

package/dist/cjs/root/styled.js

@@ -1,58 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Wrapper = exports.InlinePlayerWrapper = exports.FormattedMessageWrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _getCSSUnitValue = require("../utils/getCSSUnitValue");
-
-var _breakpoint = require("../utils/breakpoint");
-
-var _getSelectedBorderStyle = require("../styles/getSelectedBorderStyle");
-
-var _getDimensionsWithDefault = require("../utils/lightCards/getDimensionsWithDefault");
-
-var _templateObject, _templateObject2, _templateObject3;
-
-var getWrapperHeight = function getWrapperHeight(dimensions) {
-  return dimensions && dimensions.height ? "height: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(dimensions.height), "; max-height: 100%;") : '';
-};
-
-var getWrapperWidth = function getWrapperWidth(dimensions) {
-  return dimensions && dimensions.width ? "width: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(dimensions.width), "; max-width: 100%;") : '';
-};
-
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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((0, _breakpoint.breakpointStyles)({
-    breakpointSize: breakpointSize
-  }), "\n      ").concat(getWrapperHeight(dimensions), "\n      ").concat(getWrapperWidth(dimensions), "\n      cursor: ").concat(shouldUsePointerCursor ? 'pointer' : 'default', ";\n    ");
-});
-
-exports.Wrapper = Wrapper;
-Wrapper.displayName = 'CardViewWrapper';
-
-var InlinePlayerWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  overflow: hidden;\n  border-radius: ", "px;\n  position: relative;\n  max-width: 100%;\n  max-height: 100%;\n\n  ", "\n\n  video {\n    width: 100%;\n    height: 100%;\n  }\n"])), function (props) {
-  return (0, _getDimensionsWithDefault.getDimensionsWithDefault)(props.dimensions).width || '100%';
-}, function (props) {
-  return (0, _getDimensionsWithDefault.getDimensionsWithDefault)(props.dimensions).height || 'auto';
-}, (0, _constants.borderRadius)(), _getSelectedBorderStyle.getSelectedBorderStyle);
-
-exports.InlinePlayerWrapper = InlinePlayerWrapper;
-InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
-
-var FormattedMessageWrapper = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
-
-exports.FormattedMessageWrapper = FormattedMessageWrapper;

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

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

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

@@ -1,33 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fixedBlanketStyles = exports.blanketClassName = exports.Blanket = 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 blanketClassName = 'media-card-blanket';
-exports.blanketClassName = blanketClassName;
-var fixedBlanketStyles = "\n  background-color: ".concat(_colors.N90A, ";\n");
-exports.fixedBlanketStyles = fixedBlanketStyles;
-
-var Blanket = _styledComponents.default.div.attrs({
-  className: blanketClassName
-})(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
-  var isFixed = _ref.isFixed;
-  return "\n    ".concat((0, _styles.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  ");
-});
-
-exports.Blanket = Blanket;
-Blanket.displayName = 'Blanket';

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

@@ -1,34 +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.IconMessageWrapper = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _templateObject, _templateObject2;
-
-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 breatheAnimation = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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");
-
-var IconMessageWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N300, ";\n    text-align:center;\n    ").concat(animated ? animatedStyles : '', "\n    margin-bottom: -1em;\n    padding: 3px 10px;\n");
-});
-
-exports.IconMessageWrapper = IconMessageWrapper;
-IconMessageWrapper.displayName = 'IconMessageWrapper';

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