@atlaskit/media-card 73.6.0 → 74.0.0

package/dist/es2019/root/cardView.js

@@ -1,36 +1,38 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
+import SpinnerIcon from '@atlaskit/spinner';
+import Tooltip from '@atlaskit/tooltip';
+import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
+import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
 import { FileCardImageView } from '../files';
 import { breakpointSize } from '../utils/breakpoint';
 import { defaultImageCardDimensions, getDefaultCardDimensions } from '../utils/cardDimensions';
 import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
 import { getCSSUnitValue } from '../utils/getCSSUnitValue';
 import { getElementDimension } from '../utils/getElementDimension';
-import { Wrapper } from './styled';
 import { createAndFireMediaCardEvent } from '../utils/analytics';
 import { attachDetailsToActions } from '../actions';
 import { getErrorMessage } from '../utils/getErrorMessage';
-import { toHumanReadableMediaSize, messages } from '@atlaskit/media-ui';
-import { NewFileExperienceWrapper, CardImageContainer, calcBreakpointSize } from './ui/styled';
+import { cardImageContainerStyles, calcBreakpointSize } from './ui/styles';
 import { ImageRenderer } from './ui/imageRenderer/imageRenderer';
 import { TitleBox } from './ui/titleBox/titleBox';
 import { FailedTitleBox } from './ui/titleBox/failedTitleBox';
 import { ProgressBar } from './ui/progressBar/progressBar';
 import { PlayButton } from './ui/playButton/playButton';
 import { TickBox } from './ui/tickBox/tickBox';
-import { Blanket } from './ui/blanket/styled';
+import { Blanket } from './ui/blanket/blanket';
 import { ActionsBar } from './ui/actionsBar/actionsBar';
-import Tooltip from '@atlaskit/tooltip';
-import { IconWrapper } from './ui/iconWrapper/styled';
-import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
-import SpinnerIcon from '@atlaskit/spinner';
+import { IconWrapper } from './ui/iconWrapper/iconWrapper';
 import { PreviewUnavailable, CreatingPreview, FailedToUpload, PreviewCurrentlyUnavailable, FailedToLoad } from './ui/iconMessage';
-import { isRateLimitedError, isPollingError } from '@atlaskit/media-client';
-import { newFileExperienceClassName } from './card/cardConstants';
 import { isUploadError } from '../errors';
-import { MediaCardCursor } from '../types';
+import { NewFileExperienceWrapper } from './ui/newFileExperience/newFileExperienceWrapper';
+import { Wrapper } from './cardViewWrapper';
 
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
@@ -124,9 +126,8 @@ export class CardViewBase extends React.Component {
       const isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
 
       const shouldDisplayTooltip = !disableOverlay;
-      return /*#__PURE__*/React.createElement(NewFileExperienceWrapper, {
-        className: newFileExperienceClassName,
-        "data-testid": testId || 'media-card-view',
+      return jsx(NewFileExperienceWrapper, {
+        testId: testId || 'media-card-view',
         dimensions: dimensions,
         appearance: appearance,
         onClick: onClick,
@@ -140,7 +141,7 @@ export class CardViewBase extends React.Component {
         isPlayButtonClickable: isPlayButtonClickable,
         isTickBoxSelectable: isTickBoxSelectable,
         shouldDisplayTooltip: shouldDisplayTooltip
-      }, shouldDisplayTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
+      }, shouldDisplayTooltip ? jsx(Tooltip, {
         content: name,
         position: "bottom",
         tag: 'div'
@@ -176,7 +177,7 @@ export class CardViewBase extends React.Component {
       const actionsWithDetails = metadata && actions ? attachDetailsToActions(actions, metadata) : [];
       const errorMessage = getErrorMessage(status);
       const fileSize = !size ? '' : toHumanReadableMediaSize(size);
-      return /*#__PURE__*/React.createElement(FileCardImageView, {
+      return jsx(FileCardImageView, {
         error: errorMessage,
         dimensions: dimensions,
         selectable: selectable,
@@ -238,7 +239,7 @@ export class CardViewBase extends React.Component {
 
         case 'processing':
           return { ...defaultConfig,
-            iconMessage: !didImageRender && !isZeroSize ? /*#__PURE__*/React.createElement(CreatingPreview, {
+            iconMessage: !didImageRender && !isZeroSize ? jsx(CreatingPreview, {
               disableAnimation: disableAnimation
             }) : undefined
           };
@@ -261,14 +262,14 @@ export class CardViewBase extends React.Component {
           } = error || {};
 
           if (isRateLimitedError(secondaryError) || isPollingError(secondaryError)) {
-            iconMessage = /*#__PURE__*/React.createElement(PreviewCurrentlyUnavailable, null);
+            iconMessage = jsx(PreviewCurrentlyUnavailable, null);
           } else if (isUploadError(error)) {
-            iconMessage = /*#__PURE__*/React.createElement(FailedToUpload, null);
+            iconMessage = jsx(FailedToUpload, null);
             customTitleMessage = messages.failed_to_upload;
           } else if (!metadata) {
-            iconMessage = /*#__PURE__*/React.createElement(FailedToLoad, null);
+            iconMessage = jsx(FailedToLoad, null);
           } else {
-            iconMessage = /*#__PURE__*/React.createElement(PreviewUnavailable, null);
+            iconMessage = jsx(PreviewUnavailable, null);
           }
 
           if (!disableOverlay) {
@@ -321,7 +322,8 @@ export class CardViewBase extends React.Component {
         name
       } = metadata || {};
       const hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardImageContainer, {
+      return jsx(React.Fragment, null, jsx("div", {
+        css: cardImageContainerStyles,
         className: "media-file-card-view",
         "data-testid": "media-file-card-view",
         "data-test-media-name": name,
@@ -403,8 +405,8 @@ export class CardViewBase extends React.Component {
       testId
     } = this.props;
     const wrapperDimensions = dimensions ? dimensions : getDefaultCardDimensions(appearance);
-    return /*#__PURE__*/React.createElement(Wrapper, {
-      "data-testid": testId || 'media-card-view',
+    return jsx(Wrapper, {
+      testId: testId || 'media-card-view',
       shouldUsePointerCursor: true,
       breakpointSize: breakpointSize(this.width),
       dimensions: wrapperDimensions,
@@ -415,10 +417,10 @@ export class CardViewBase extends React.Component {
   }
 
   renderSpinner(hasTitleBox) {
-    return /*#__PURE__*/React.createElement(IconWrapper, {
+    return jsx(IconWrapper, {
       breakpoint: this.breakpoint,
       hasTitleBox: hasTitleBox
-    }, /*#__PURE__*/React.createElement(SpinnerIcon, null));
+    }, jsx(SpinnerIcon, null));
   }
 
   shouldRenderPlayButton() {
@@ -438,16 +440,16 @@ export class CardViewBase extends React.Component {
   }
 
   renderPlayButton(hasTitleBox) {
-    return /*#__PURE__*/React.createElement(IconWrapper, {
+    return jsx(IconWrapper, {
       breakpoint: this.breakpoint,
       hasTitleBox: hasTitleBox
-    }, /*#__PURE__*/React.createElement(PlayButton, null), ";");
+    }, jsx(PlayButton, null));
   } //This Blanket will provide a shadow backround for uploading status by
   //setting isFixed.
 
 
   renderBlanket(isFixed) {
-    return /*#__PURE__*/React.createElement(Blanket, {
+    return jsx(Blanket, {
       isFixed: isFixed
     });
   }
@@ -462,7 +464,7 @@ export class CardViewBase extends React.Component {
       name,
       createdAt
     } = metadata || {};
-    return !!name && /*#__PURE__*/React.createElement(TitleBox, {
+    return !!name && jsx(TitleBox, {
       name: name,
       createdAt: createdAt,
       breakpoint: this.breakpoint,
@@ -472,7 +474,7 @@ export class CardViewBase extends React.Component {
   }
 
   renderFailedTitleBox(customMessage) {
-    return /*#__PURE__*/React.createElement(FailedTitleBox, {
+    return jsx(FailedTitleBox, {
       breakpoint: this.breakpoint,
       customMessage: customMessage
     });
@@ -482,7 +484,7 @@ export class CardViewBase extends React.Component {
     const {
       progress
     } = this.props;
-    return /*#__PURE__*/React.createElement(ProgressBar, {
+    return jsx(ProgressBar, {
       progress: progress,
       breakpoint: this.breakpoint,
       positionBottom: positionBottom
@@ -501,7 +503,7 @@ export class CardViewBase extends React.Component {
       nativeLazyLoad,
       forceSyncDisplay
     } = this.props;
-    return !!cardPreview && /*#__PURE__*/React.createElement(ImageRenderer, {
+    return !!cardPreview && jsx(ImageRenderer, {
       cardPreview: cardPreview,
       mediaType: mediaType,
       alt: alt,
@@ -518,7 +520,7 @@ export class CardViewBase extends React.Component {
     const {
       selected
     } = this.props;
-    return /*#__PURE__*/React.createElement(TickBox, {
+    return jsx(TickBox, {
       selected: selected
     });
   }
@@ -532,10 +534,10 @@ export class CardViewBase extends React.Component {
       mimeType,
       name
     } = metadata || {};
-    return /*#__PURE__*/React.createElement(IconWrapper, {
+    return jsx(IconWrapper, {
       breakpoint: this.breakpoint,
       hasTitleBox: hasTitleBox
-    }, /*#__PURE__*/React.createElement(MimeTypeIcon, {
+    }, jsx(MimeTypeIcon, {
       testId: 'media-card-file-type-icon',
       mediaType: mediaType,
       mimeType: mimeType,
@@ -555,7 +557,7 @@ export class CardViewBase extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(ActionsBar, {
+    return jsx(ActionsBar, {
       actions: actionsWithDetails
     });
   }
@@ -563,8 +565,7 @@ export class CardViewBase extends React.Component {
 }
 
 _defineProperty(CardViewBase, "defaultProps", {
-  appearance: 'auto',
-  mediaCardCursor: MediaCardCursor.NoAction
+  appearance: 'auto'
 });
 
 export const CardView = withAnalyticsEvents({

package/dist/es2019/root/cardViewWrapper.js

@@ -0,0 +1,26 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapperStyles } from './styles';
+export const Wrapper = props => {
+  const {
+    testId,
+    shouldUsePointerCursor,
+    breakpointSize,
+    dimensions,
+    onClick,
+    onMouseEnter,
+    innerRef
+  } = props;
+  return jsx("div", {
+    id: "cardViewWrapper",
+    "data-testid": testId,
+    css: wrapperStyles({
+      shouldUsePointerCursor,
+      breakpointSize,
+      dimensions
+    }),
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    ref: innerRef
+  }, props.children);
+};

package/dist/es2019/root/inlinePlayer.js

@@ -4,14 +4,13 @@ import React from 'react';
 import { Component } from 'react';
 import { globalMediaEventEmitter } from '@atlaskit/media-client';
 import { CustomMediaPlayer, InactivityDetector } from '@atlaskit/media-ui';
-import { InlinePlayerWrapper } from './styled';
 import { defaultImageCardDimensions } from '..';
 import { CardLoading } from '../utils/lightCards/cardLoading';
 import { ProgressBar } from './ui/progressBar/progressBar';
-import { calcBreakpointSize } from './ui/styled';
+import { calcBreakpointSize } from './ui/styles';
 import { isValidPercentageUnit } from '../utils/isValidPercentageUnit';
 import { getElementDimension } from '../utils/getElementDimension';
-export const inlinePlayerClassName = 'media-card-inline-player';
+import { InlinePlayerWrapper } from './inlinePlayerWrapper';
 export const getPreferredVideoArtifact = fileState => {
   if (fileState.status === 'processed' || fileState.status === 'processing') {
     const {
@@ -217,7 +216,8 @@ export class InlinePlayerBase extends Component {
       identifier,
       forwardRef,
       autoplay,
-      cardPreview
+      cardPreview,
+      onFullscreenChange
     } = this.props;
     const {
       fileSrc,
@@ -233,15 +233,17 @@ export class InlinePlayerBase extends Component {
     }
 
     return /*#__PURE__*/React.createElement(InlinePlayerWrapper, {
-      className: inlinePlayerClassName,
-      "data-testid": testId || 'media-card-inline-player',
-      selected: selected,
+      testId: testId || 'media-card-inline-player',
+      selected: {
+        selected
+      },
       onClick: onClick,
       innerRef: forwardRef || undefined,
       dimensions: dimensions
     }, /*#__PURE__*/React.createElement(InactivityDetector, null, checkMouseMovement => /*#__PURE__*/React.createElement(CustomMediaPlayer, {
       type: "video",
       src: fileSrc,
+      onFullscreenChange: onFullscreenChange,
       fileId: identifier.id,
       isAutoPlay: autoplay,
       isHDAvailable: false,

package/dist/es2019/root/inlinePlayerWrapper.js

@@ -0,0 +1,23 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { inlinePlayerWrapperStyles, inlinePlayerClassName } from './styles';
+export const InlinePlayerWrapper = props => {
+  const {
+    testId,
+    selected,
+    dimensions,
+    onClick,
+    innerRef
+  } = props;
+  return jsx("div", {
+    id: "inlinePlayerWrapper",
+    "data-testid": testId,
+    className: inlinePlayerClassName,
+    css: inlinePlayerWrapperStyles({
+      selected,
+      dimensions
+    }),
+    onClick: onClick,
+    ref: innerRef
+  }, props.children);
+};

package/dist/es2019/root/{styled.js → styles.js}

@@ -1,46 +1,45 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 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';
+export const inlinePlayerClassName = 'media-card-inline-player';
 
 const getWrapperHeight = dimensions => dimensions && dimensions.height ? `height: ${getCSSUnitValue(dimensions.height)}; max-height: 100%;` : '';
 
 const getWrapperWidth = dimensions => dimensions && dimensions.width ? `width: ${getCSSUnitValue(dimensions.width)}; max-width: 100%;` : '';
 
-export const Wrapper = styled.div`
-  ${({
+export const wrapperStyles = ({
   dimensions,
   breakpointSize = 'medium',
   shouldUsePointerCursor
-}) => {
-  return `
-      ${breakpointStyles({
-    breakpointSize
-  })}
-      ${getWrapperHeight(dimensions)}
+}) => css`
+  ${breakpointStyles({
+  breakpointSize
+})}
+  ${getWrapperHeight(dimensions)}
       ${getWrapperWidth(dimensions)}
-      cursor: ${shouldUsePointerCursor ? 'pointer' : 'default'};
-    `;
-}};
+  cursor: ${shouldUsePointerCursor ? 'pointer' : 'default'};
 `;
-Wrapper.displayName = 'CardViewWrapper';
-export const InlinePlayerWrapper = styled.div`
-  width: ${props => getDimensionsWithDefault(props.dimensions).width || '100%'};
-  height: ${props => getDimensionsWithDefault(props.dimensions).height || 'auto'};
+wrapperStyles.displayName = 'CardViewWrapper';
+export const inlinePlayerWrapperStyles = ({
+  dimensions,
+  selected
+}) => css`
+  width: ${getDimensionsWithDefault(dimensions).width || '100%'};
+  height: ${getDimensionsWithDefault(dimensions).height || 'auto'};
   overflow: hidden;
   border-radius: ${borderRadius()}px;
   position: relative;
   max-width: 100%;
   max-height: 100%;
 
-  ${getSelectedBorderStyle}
+  ${getSelectedBorderStyle(selected)}
 
   video {
     width: 100%;
     height: 100%;
   }
 `;
-InlinePlayerWrapper.displayName = 'InlinePlayerWrapper';
-export const FormattedMessageWrapper = styled.span``;
+inlinePlayerWrapperStyles.displayName = 'InlinePlayerWrapper';

package/dist/es2019/root/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CardActionIconButtonVariant, CardActionsView } from '../../../utils/cardActions';
-import { Wrapper } from './styled';
+import { ActionsBarWrapper } from './actionsBarWrapper';
 export class ActionsBar extends React.Component {
   render() {
     const {
@@ -12,7 +12,7 @@ export class ActionsBar extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(Wrapper, {
+    return /*#__PURE__*/React.createElement(ActionsBarWrapper, {
       isFixed: isFixed
     }, /*#__PURE__*/React.createElement(CardActionsView, {
       actions: actions,

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

@@ -0,0 +1,10 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapperStyles, actionsBarClassName } from './styles';
+export const ActionsBarWrapper = props => {
+  return jsx("div", {
+    id: "actionsBarWrapper",
+    css: wrapperStyles(props.isFixed),
+    className: actionsBarClassName
+  }, props.children);
+};

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { blanketStyles, blanketClassName } from './styles';
+export const Blanket = props => {
+  const {
+    isFixed
+  } = props;
+  return jsx("div", {
+    css: blanketStyles(isFixed),
+    className: blanketClassName
+  });
+};

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

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

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

@@ -0,0 +1,16 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { iconMessageWrapperStyles } from './styles';
+export const IconMessageWrapper = props => {
+  const {
+    animated,
+    reducedFont
+  } = props;
+  return jsx("div", {
+    id: "iconMessageWrapper",
+    css: iconMessageWrapperStyles({
+      animated: animated,
+      reducedFont: reducedFont
+    })
+  }, props.children);
+};

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

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { IconMessageWrapper } from './styled';
+import { IconMessageWrapper } from './iconMessageWrapper';
 import { messages } from '@atlaskit/media-ui';
 import { FormattedMessage } from 'react-intl-next';
-import { FormattedMessageWrapper } from '../../styled';
 export const IconMessage = ({
   messageDescriptor,
   animated = false,
@@ -12,7 +11,7 @@ export const IconMessage = ({
   return /*#__PURE__*/React.createElement(IconMessageWrapper, {
     animated: animated,
     reducedFont: reducedFont
-  }, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor)));
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor)));
 };
 export const CreatingPreview = ({
   disableAnimation

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

@@ -0,0 +1,32 @@
+import { css, keyframes } from '@emotion/react';
+import { N300 } from '@atlaskit/theme/colors';
+const breatheAnimation = keyframes`
+ 0% { opacity: 1}
+ 50% { opacity: 0.3 }
+ 100% { opacity: 1; }`;
+const animatedStyles = css`
+  animation-name: ${breatheAnimation};
+  animation-duration: 3.5s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+`;
+
+const getStylesBasedOnProps = ({
+  animated,
+  reducedFont
+}) => css`
+  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;
+`;
+
+export const iconMessageWrapperStyles = props => css`
+  ${getStylesBasedOnProps(props)}
+`;
+iconMessageWrapperStyles.displayName = 'IconMessageWrapper';

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,16 @@
+/**@jsx jsx */
+import { jsx } from '@emotion/react';
+import { iconWrapperStyles } from './styles';
+export const IconWrapper = props => {
+  const {
+    breakpoint,
+    hasTitleBox
+  } = props;
+  return jsx("div", {
+    id: "iconWrapper",
+    css: iconWrapperStyles({
+      breakpoint,
+      hasTitleBox
+    })
+  }, props.children);
+};

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

@@ -0,0 +1,25 @@
+import { css } from '@emotion/react';
+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 iconWrapperStyles = ({
+  hasTitleBox,
+  breakpoint
+}) => css`
+  position: absolute;
+  width: 100%;
+  height: calc(100% - ${titleBoxHeight(hasTitleBox, breakpoint)});
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+iconWrapperStyles.displayName = 'MediaIconWrapper';

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

@@ -0,0 +1 @@
+export {};

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

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