@atlaskit/media-card 81.10.12 → 81.10.13

package/dist/es2019/card/ui/getCursorStyle.js

@@ -0,0 +1 @@
+export const getCursorStyle = cursor => !!cursor ? `cursor: ${cursor};` : '';

package/dist/es2019/card/ui/getSelectableTickBoxStyles.js

@@ -0,0 +1,11 @@
+import { tickBoxClassName, tickboxFixedStyles } from './tickBox/styles';
+export const getSelectableTickBoxStyles = isTickBoxSelectable => {
+  if (!isTickBoxSelectable) {
+    return '';
+  }
+  return `
+    &:hover .${tickBoxClassName} {
+      ${tickboxFixedStyles}
+    }
+  `;
+};

package/dist/es2019/card/ui/getWrapperDimensions.js

@@ -0,0 +1,20 @@
+import { getDefaultCardDimensions } from '../../utils/cardDimensions';
+import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
+export const getWrapperDimensions = (dimensions, appearance) => {
+  const {
+    width,
+    height
+  } = dimensions || {};
+  const {
+    width: defaultWidth,
+    height: defaultHeight
+  } = getDefaultCardDimensions(appearance);
+  return `
+	/* If container doesn't exists, it will fallback to this */
+	width: ${getCSSUnitValue(width || defaultWidth)};
+
+    max-width: 100%;
+    height: ${getCSSUnitValue(height || defaultHeight)};
+    max-height: 100%;
+  `;
+};

package/dist/es2019/card/ui/getWrapperShadow.js

@@ -0,0 +1,9 @@
+import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
+// 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
+export const getWrapperShadow = (disableOverlay, selected) => {
+  const withOverlayShadow = !disableOverlay ? `${"var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)"}` : '';
+  const selectedShadow = selected ? akEditorSelectedBoxShadow : '';
+  const shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
+  return shadow ? `box-shadow: ${shadow};` : '';
+};

package/dist/es2019/card/ui/iconMessage/CheckInternetConnection.js

@@ -0,0 +1,7 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { messages } from '@atlaskit/media-ui/messages';
+import { IconMessage } from './IconMessage';
+export const CheckInternetConnection = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+  messageDescriptor: messages.check_internet_connection
+}));

package/dist/es2019/card/ui/iconMessage/CreatingPreview.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { messages } from '@atlaskit/media-ui/messages';
+import { IconMessage } from './IconMessage';
+export const CreatingPreview = ({
+  disableAnimation
+}) => /*#__PURE__*/React.createElement(IconMessage, {
+  messageDescriptor: messages.creating_preview,
+  animated: !disableAnimation
+});

package/dist/es2019/card/ui/iconMessage/FailedToLoad.js

@@ -0,0 +1,7 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { messages } from '@atlaskit/media-ui/messages';
+import { IconMessage } from './IconMessage';
+export const FailedToLoad = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+  messageDescriptor: messages.failed_to_load
+}));

package/dist/es2019/card/ui/iconMessage/FailedToUpload.js

@@ -0,0 +1,7 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { messages } from '@atlaskit/media-ui/messages';
+import { IconMessage } from './IconMessage';
+export const FailedToUpload = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+  messageDescriptor: messages.failed_to_upload
+}));

package/dist/es2019/card/ui/iconMessage/IconMessage.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { IconMessageWrapper } from './iconMessageWrapper';
+export const IconMessage = ({
+  messageDescriptor,
+  animated = false
+}) => {
+  return /*#__PURE__*/React.createElement(IconMessageWrapper, {
+    animated: animated
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messageDescriptor)));
+};

package/dist/es2019/card/ui/iconMessage/PreviewUnavailable.js

@@ -0,0 +1,7 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { messages } from '@atlaskit/media-ui/messages';
+import { IconMessage } from './IconMessage';
+export const PreviewUnavailable = props => /*#__PURE__*/React.createElement(IconMessage, _extends({}, props, {
+  messageDescriptor: messages.preview_unavailable
+}));

package/dist/es2019/card/ui/iconWrapper/IconWrapper-2.js

@@ -0,0 +1,30 @@
+/* IconWrapper-2.tsx generated by @compiled/babel-plugin v3.0.1 */
+import "./IconWrapper-2.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { getTitleBoxHeight } from '../common';
+function titleBoxHeight(hasTitleBox, breakpoint) {
+  // there is no titlebox
+  if (!hasTitleBox) {
+    return `0px`;
+  }
+
+  // calculate height of the titlebox
+  const marginBottom = getTitleBoxHeight(breakpoint);
+  return `${marginBottom}px`;
+}
+const iconWrapperStyles = null;
+export const IconWrapper = props => {
+  const {
+    breakpoint,
+    hasTitleBox
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "iconWrapper",
+    style: {
+      height: `calc(100% - ${titleBoxHeight(hasTitleBox, breakpoint)})`
+    },
+    className: ax(["_kqswstnw _1bsb1osq _1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o"])
+  }, props.children);
+};
+IconWrapper.displayName = 'MediaIconWrapper';

package/dist/es2019/card/ui/iconWrapper/iconWrapper-compiled.js

@@ -1,30 +1,7 @@
-/* iconWrapper-compiled.tsx generated by @compiled/babel-plugin v3.0.1 */
-import "./iconWrapper-compiled.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-import { getTitleBoxHeight } from '../common';
-export function titleBoxHeight(hasTitleBox, breakpoint) {
-  // there is no titlebox
-  if (!hasTitleBox) {
-    return `0px`;
-  }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
-  // calculate height of the titlebox
-  const marginBottom = getTitleBoxHeight(breakpoint);
-  return `${marginBottom}px`;
-}
-const iconWrapperStyles = null;
-export const IconWrapper = props => {
-  const {
-    breakpoint,
-    hasTitleBox
-  } = props;
-  return /*#__PURE__*/React.createElement("div", {
-    id: "iconWrapper",
-    style: {
-      height: `calc(100% - ${titleBoxHeight(hasTitleBox, breakpoint)})`
-    },
-    className: ax(["_kqswstnw _1bsb1osq _1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o"])
-  }, props.children);
-};
+import { IconWrapper } from './IconWrapper-2';
 IconWrapper.displayName = 'MediaIconWrapper';

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

@@ -1,3 +1,3 @@
 import React from 'react';
-import { IconWrapper as CompiledIconWrapper } from './iconWrapper-compiled';
+import { IconWrapper as CompiledIconWrapper } from './IconWrapper-2';
 export const IconWrapper = props => /*#__PURE__*/React.createElement(CompiledIconWrapper, props);

package/dist/es2019/card/ui/iconWrapper/{styles.js → iconWrapperStyles.js}

@@ -1,15 +1,11 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import { getTitleBoxHeight } from '../common';
-export function titleBoxHeight(hasTitleBox, breakpoint) {
-  // there is no titlebox
+function titleBoxHeight(hasTitleBox, breakpoint) {
   if (!hasTitleBox) {
-    return `0px`;
+    return '0px';
   }
-
-  // calculate height of the titlebox
-  const marginBottom = getTitleBoxHeight(breakpoint);
-  return `${marginBottom}px`;
+  return `${getTitleBoxHeight(breakpoint)}px`;
 }
 export const iconWrapperStyles = ({
   hasTitleBox,

package/dist/es2019/card/ui/iconWrapper/titleBoxHeight.js

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+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`;
+}

package/dist/es2019/card/ui/imageRenderer/{helpers.js → calculateDimensions.js}

@@ -1,14 +1,9 @@
 import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { DEFAULT_CROP_DIMENSIONS } from './default-crop-dimensions';
+import { DEFAULT_STRETCHY_FIT_DIMENSIONS } from './default-stretchy-fit-dimensions';
 const roundedRatio = ratio => {
   return Math.round(ratio * 100) / 100;
 };
-const DEFAULT_CROP_DIMENSIONS = {
-  maxWidth: '100%'
-};
-const DEFAULT_STRETCHY_FIT_DIMENSIONS = {
-  width: '100%',
-  maxHeight: '100%'
-};
 export const calculateDimensions = (imgElement, parentElement, resizeMode) => {
   const {
     naturalWidth,
@@ -69,22 +64,4 @@ export const calculateDimensions = (imgElement, parentElement, resizeMode) => {
     }
   }
   return {};
-};
-export const calculateInitialDimensions = resizeMode => {
-  if (resizeMode === 'fit' || resizeMode === 'full-fit') {
-    return {
-      maxWidth: `100%`,
-      maxHeight: `100%`
-    };
-  }
-  if (resizeMode === 'stretchy-fit') {
-    // assume the image is landscape
-    return DEFAULT_STRETCHY_FIT_DIMENSIONS;
-  }
-
-  // resizeMode === 'crop'
-  // assume the image is landscape
-  return fg('media-perf-uplift-mutation-fix') ? DEFAULT_CROP_DIMENSIONS : {
-    width: '100%'
-  };
 };

package/dist/es2019/card/ui/imageRenderer/calculateInitialDimensions.js

@@ -0,0 +1,21 @@
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { DEFAULT_CROP_DIMENSIONS } from './default-crop-dimensions';
+import { DEFAULT_STRETCHY_FIT_DIMENSIONS } from './default-stretchy-fit-dimensions';
+export const calculateInitialDimensions = resizeMode => {
+  if (resizeMode === 'fit' || resizeMode === 'full-fit') {
+    return {
+      maxWidth: `100%`,
+      maxHeight: `100%`
+    };
+  }
+  if (resizeMode === 'stretchy-fit') {
+    // assume the image is landscape
+    return DEFAULT_STRETCHY_FIT_DIMENSIONS;
+  }
+
+  // resizeMode === 'crop'
+  // assume the image is landscape
+  return fg('media-perf-uplift-mutation-fix') ? DEFAULT_CROP_DIMENSIONS : {
+    width: '100%'
+  };
+};

package/dist/es2019/card/ui/imageRenderer/default-crop-dimensions.js

@@ -0,0 +1,3 @@
+export const DEFAULT_CROP_DIMENSIONS = {
+  maxWidth: '100%'
+};

package/dist/es2019/card/ui/imageRenderer/default-stretchy-fit-dimensions.js

@@ -0,0 +1,4 @@
+export const DEFAULT_STRETCHY_FIT_DIMENSIONS = {
+  width: '100%',
+  maxHeight: '100%'
+};

package/dist/es2019/card/ui/imageRenderer/imageRendererV2.js

@@ -2,13 +2,14 @@
 import "./imageRendererV2.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
-import { calculateDimensions, calculateInitialDimensions } from './helpers';
-import { useCurrentValueRef } from '../../../utils/useCurrentValueRef';
-import { ImageRendererWrapper } from './wrapper';
 import { isFileIdentifier } from '@atlaskit/media-client';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import UFOCustomData from '@atlaskit/react-ufo/custom-data';
 import { useInteractionContext } from '@atlaskit/react-ufo/interaction-context';
+import { useCurrentValueRef } from '../../../utils/useCurrentValueRef';
+import { calculateDimensions } from './calculateDimensions';
+import { calculateInitialDimensions } from './calculateInitialDimensions';
+import { ImageRendererWrapper } from './wrapper';
 const baseStyles = null;
 const backgroundStyles = null;
 export const ImageRenderer = ({

package/dist/es2019/card/ui/progressBar/StyledBar-2.js

@@ -0,0 +1,54 @@
+/* StyledBar-2.tsx generated by @compiled/babel-plugin v3.0.1 */
+import "./StyledBar-2.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
+const height = 3;
+const padding = 1;
+const width = 95; // %
+
+const smallSizeSettings = {
+  marginBottom: 4
+};
+const largeSizeSettings = {
+  marginBottom: 12
+};
+function generateResponsiveStyles(breakpoint, positionBottom, showOnTop, multiplier = 1) {
+  const setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
+  const marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
+  const marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
+  const spacing = `${marginBottom}px`;
+  return showOnTop ? {
+    top: spacing
+  } : {
+    bottom: spacing
+  };
+}
+const styledBarStyles = null;
+const styleChild = null;
+export const StyledBar = props => {
+  const {
+    progress,
+    breakpoint,
+    positionBottom,
+    showOnTop,
+    ariaLabel
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "styledBar",
+    role: "progressbar",
+    "aria-valuenow": progress,
+    "aria-label": ariaLabel,
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ...generateResponsiveStyles(breakpoint, positionBottom, showOnTop)
+    },
+    className: ax(["_1reo15vq _18m915vq _ca0qt94y _u5f3t94y _n3tdt94y _19bvt94y _2rkofajl _kqswstnw _1bsb1lk2 _1ltv1ghs _bfhkrcrw _4t3i14y2 _vchhusvi"])
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: `${progress}%`
+    },
+    className: ax(["_2rkofajl _bfhk1p0d _1e0c1ule _4t3i1osq"])
+  }));
+};
+StyledBar.displayName = 'StyledProgressBar';

package/dist/es2019/card/ui/progressBar/generateResponsiveStyles.js

@@ -0,0 +1,25 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
+
+// %
+const smallSizeSettings = {
+  marginBottom: 4
+};
+const largeSizeSettings = {
+  marginBottom: 12
+};
+export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop, multiplier = 1) {
+  const setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
+  const marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
+  const marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
+  const spacing = `${marginBottom}px`;
+  return showOnTop ? {
+    top: spacing
+  } : {
+    bottom: spacing
+  };
+}

package/dist/es2019/card/ui/progressBar/getNormalizedProgress.js

@@ -0,0 +1,3 @@
+export const getNormalizedProgress = progress => {
+  return Math.min(1, Math.max(0, progress || 0)) * 100;
+};

package/dist/es2019/card/ui/progressBar/progressBar.js

@@ -1,9 +1,7 @@
 import React from 'react';
-import { StyledBar } from './styledBar';
 import { Breakpoint } from '../common';
-export const getNormalizedProgress = progress => {
-  return Math.min(1, Math.max(0, progress || 0)) * 100;
-};
+import { getNormalizedProgress } from './getNormalizedProgress';
+import { StyledBar } from './styledBar';
 export const ProgressBar = ({
   progress,
   breakpoint = Breakpoint.SMALL,

package/dist/es2019/card/ui/progressBar/styledBar-compiled.js

@@ -1,54 +1,10 @@
-/* styledBar-compiled.tsx generated by @compiled/babel-plugin v3.0.1 */
-import "./styledBar-compiled.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
-const height = 3;
-const padding = 1;
-const width = 95; // %
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
-const smallSizeSettings = {
-  marginBottom: 4
-};
-const largeSizeSettings = {
-  marginBottom: 12
-};
-export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop, multiplier = 1) {
-  const setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
-  const marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
-  const marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
-  const spacing = `${marginBottom}px`;
-  return showOnTop ? {
-    top: spacing
-  } : {
-    bottom: spacing
-  };
-}
-const styledBarStyles = null;
-const styleChild = null;
-export const StyledBar = props => {
-  const {
-    progress,
-    breakpoint,
-    positionBottom,
-    showOnTop,
-    ariaLabel
-  } = props;
-  return /*#__PURE__*/React.createElement("div", {
-    id: "styledBar",
-    role: "progressbar",
-    "aria-valuenow": progress,
-    "aria-label": ariaLabel,
-    style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      ...generateResponsiveStyles(breakpoint, positionBottom, showOnTop)
-    },
-    className: ax(["_1reo15vq _18m915vq _ca0qt94y _u5f3t94y _n3tdt94y _19bvt94y _2rkofajl _kqswstnw _1bsb1lk2 _1ltv1ghs _bfhkrcrw _4t3i14y2 _vchhusvi"])
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: `${progress}%`
-    },
-    className: ax(["_2rkofajl _bfhk1p0d _1e0c1ule _4t3i1osq"])
-  }));
-};
+import { StyledBar } from './StyledBar-2';
+export const height = 3;
+export const padding = 1;
+export const width = 95;
 StyledBar.displayName = 'StyledProgressBar';

package/dist/es2019/card/ui/progressBar/styledBar.js

@@ -1,3 +1,3 @@
 import React from 'react';
-import { StyledBar as CompiledStyledBar } from './styledBar-compiled';
+import { StyledBar as CompiledStyledBar } from './StyledBar-2';
 export const StyledBar = props => /*#__PURE__*/React.createElement(CompiledStyledBar, props);

package/dist/es2019/card/ui/progressBar/{styles.js → styledBarStyles.js}

@@ -1,27 +1,14 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import { borderRadius } from '@atlaskit/media-ui/mixins';
-import { rgba } from '../styles';
-import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
+import { rgba } from '../rgba';
+import { generateResponsiveStyles } from './generateResponsiveStyles';
 const height = 3;
 const padding = 1;
-const width = 95; // %
-const left = (100 - width) / 2; // %
+const width = 95;
 
-const smallSizeSettings = {
-  marginBottom: 4
-};
-const largeSizeSettings = {
-  marginBottom: 12
-};
-export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop, multiplier = 1) {
-  const setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
-  const marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
-  const marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
-  return `
-    ${showOnTop ? 'top' : 'bottom'}: ${marginBottom}px
-  `;
-}
+// %
+const left = (100 - width) / 2;
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 const getStyledBarStylesBasedOnProps = ({
@@ -50,8 +37,8 @@ box-sizing: border-box;
 }
 ${generateResponsiveStyles(breakpoint, positionBottom, showOnTop)}
 `;
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 export const styledBarStyles = props => {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   return css(getStyledBarStylesBasedOnProps(props));

package/dist/es2019/card/ui/rgba.js

@@ -0,0 +1,5 @@
+const hexToRgb = hex => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? `${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)}` : null;
+};
+export const rgba = (hex, opacity) => `rgba(${hexToRgb(hex)}, ${opacity})`;

package/dist/es2019/card/ui/styles.js

@@ -1,75 +1 @@
-import { akEditorSelectedBoxShadow } from '@atlaskit/editor-shared-styles/consts';
-import { getCSSUnitValue } from '../../utils/getCSSUnitValue';
-import { getDefaultCardDimensions } from '../../utils/cardDimensions';
-import { tickBoxClassName, tickboxFixedStyles } from './tickBox/styles';
-import { fixedPlayButtonStyles, playButtonClassName } from './playButton/styles';
-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;
-};
-export const generateResponsiveStyles = (breakpoint = Breakpoint.SMALL) => {
-  const setting = responsiveSettings[breakpoint];
-  return `
-    font-size: ${setting.fontSize}px;
-    line-height: ${setting.lineHeight}px;
-  `;
-};
-export const getWrapperDimensions = (dimensions, appearance) => {
-  const {
-    width,
-    height
-  } = dimensions || {};
-  const {
-    width: defaultWidth,
-    height: defaultHeight
-  } = getDefaultCardDimensions(appearance);
-  return `
-	/* If container doesn't exists, it will fallback to this */
-	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
-export const getWrapperShadow = (disableOverlay, selected) => {
-  const withOverlayShadow = !disableOverlay ? `${"var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)"}` : '';
-  const selectedShadow = selected ? akEditorSelectedBoxShadow : '';
-  const shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
-  return shadow ? `box-shadow: ${shadow};` : '';
-};
-export const getCursorStyle = cursor => !!cursor ? `cursor: ${cursor};` : '';
-export const getClickablePlayButtonStyles = isPlayButtonClickable => {
-  if (!isPlayButtonClickable) {
-    return '';
-  }
-  return `
-    &:hover .${playButtonClassName} {
-      ${fixedPlayButtonStyles}
-    }
-  `;
-};
-export const getSelectableTickBoxStyles = isTickBoxSelectable => {
-  if (!isTickBoxSelectable) {
-    return '';
-  }
-  return `
-    &:hover .${tickBoxClassName} {
-      ${tickboxFixedStyles}
-    }
-  `;
-};
-const defaultTransitionDuration = '.3s';
-export const transition = (propertyName = 'all') => `
-  transition: ${propertyName} ${defaultTransitionDuration};
-`;
-const hexToRgb = hex => {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? `${parseInt(result[1], 16)},${parseInt(result[2], 16)},${parseInt(result[3], 16)}` : null;
-};
-export const rgba = (hex, opacity) => `rgba(${hexToRgb(hex)}, ${opacity})`;
+export const defaultTransitionDuration = '.3s';

package/dist/es2019/card/ui/titleBox/ErrorMessageWrapper.js

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ErrorMessageWrapper as CompiledErrorMessageWrapper } from './titleBoxComponents-compiled';
+export const ErrorMessageWrapper = props => /*#__PURE__*/React.createElement(CompiledErrorMessageWrapper, props);

package/dist/es2019/card/ui/titleBox/TitleBoxFooter.js

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TitleBoxFooter as CompiledTitleBoxFooter } from './titleBoxComponents-compiled';
+export const TitleBoxFooter = props => /*#__PURE__*/React.createElement(CompiledTitleBoxFooter, props);

package/dist/es2019/card/ui/titleBox/TitleBoxHeader.js

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TitleBoxHeader as CompiledTitleBoxHeader } from './titleBoxComponents-compiled';
+export const TitleBoxHeader = props => /*#__PURE__*/React.createElement(CompiledTitleBoxHeader, props);

package/dist/es2019/card/ui/titleBox/TitleBoxIcon.js

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TitleBoxIcon as CompiledTitleBoxIcon } from './titleBoxComponents-compiled';
+export const TitleBoxIcon = props => /*#__PURE__*/React.createElement(CompiledTitleBoxIcon, props);

package/dist/es2019/card/ui/titleBox/TitleBoxWrapper.js

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TitleBoxWrapper as CompiledTitleBoxWrapper } from './titleBoxComponents-compiled';
+export const TitleBoxWrapper = props => /*#__PURE__*/React.createElement(CompiledTitleBoxWrapper, props);

package/dist/es2019/card/ui/titleBox/failedTitleBox.js

@@ -5,7 +5,8 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import EditorWarningIcon from '@atlaskit/icon/core/status-warning';
 import { messages } from '@atlaskit/media-ui/messages';
-import { ErrorMessageWrapper, TitleBoxWrapper } from './titleBoxComponents';
+import { ErrorMessageWrapper } from './ErrorMessageWrapper';
+import { TitleBoxWrapper } from './TitleBoxWrapper';
 const errorMessageWrapperStyles = null;
 export const FailedTitleBox = ({
   breakpoint,