@atlaskit/media-card 81.10.11 → 81.10.13

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

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

package/dist/esm/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
-  var marginBottom = getTitleBoxHeight(breakpoint);
-  return "".concat(marginBottom, "px");
+  return "".concat(getTitleBoxHeight(breakpoint), "px");
 }
 export var iconWrapperStyles = function iconWrapperStyles(_ref) {
   var hasTitleBox = _ref.hasTitleBox,

package/dist/esm/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
+  var marginBottom = getTitleBoxHeight(breakpoint);
+  return "".concat(marginBottom, "px");
+}

package/dist/esm/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';
 var roundedRatio = function roundedRatio(ratio) {
   return Math.round(ratio * 100) / 100;
 };
-var DEFAULT_CROP_DIMENSIONS = {
-  maxWidth: '100%'
-};
-var DEFAULT_STRETCHY_FIT_DIMENSIONS = {
-  width: '100%',
-  maxHeight: '100%'
-};
 export var calculateDimensions = function calculateDimensions(imgElement, parentElement, resizeMode) {
   var naturalWidth = imgElement.naturalWidth,
     width = imgElement.width,
@@ -66,22 +61,4 @@ export var calculateDimensions = function calculateDimensions(imgElement, parent
     }
   }
   return {};
-};
-export var calculateInitialDimensions = function 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/esm/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 var calculateInitialDimensions = function 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/esm/card/ui/imageRenderer/default-crop-dimensions.js

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

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

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

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

@@ -1,4 +1,4 @@
-/* imageRendererV2.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* imageRendererV2.tsx generated by @compiled/babel-plugin v3.0.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./imageRendererV2.compiled.css";
@@ -6,13 +6,14 @@ import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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';
 var baseStyles = null;
 var backgroundStyles = null;
 export var ImageRenderer = function ImageRenderer(_ref) {

package/dist/esm/card/ui/imageRenderer/wrapper.js

@@ -1,4 +1,4 @@
-/* wrapper.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* wrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./wrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/card/ui/loadingBar/loadingBar.js

@@ -1,4 +1,4 @@
-/* loadingBar.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* loadingBar.tsx generated by @compiled/babel-plugin v3.0.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./loadingBar.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/card/ui/playButton/playButtonBackground-compiled.js

@@ -1,4 +1,4 @@
-/* playButtonBackground-compiled.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* playButtonBackground-compiled.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./playButtonBackground-compiled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/card/ui/playButton/playButtonWrapper-compiled.js

@@ -1,4 +1,4 @@
-/* playButtonWrapper-compiled.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* playButtonWrapper-compiled.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./playButtonWrapper-compiled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -0,0 +1,57 @@
+/* StyledBar-2.tsx generated by @compiled/babel-plugin v3.0.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./StyledBar-2.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
+var height = 3;
+var padding = 1;
+var width = 95; // %
+
+var smallSizeSettings = {
+  marginBottom: 4
+};
+var largeSizeSettings = {
+  marginBottom: 12
+};
+function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
+  var multiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  var setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
+  var marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
+  var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
+  var spacing = "".concat(marginBottom, "px");
+  return showOnTop ? {
+    top: spacing
+  } : {
+    bottom: spacing
+  };
+}
+var styledBarStyles = null;
+var styleChild = null;
+export var StyledBar = function StyledBar(props) {
+  var progress = props.progress,
+    breakpoint = props.breakpoint,
+    positionBottom = props.positionBottom,
+    showOnTop = props.showOnTop,
+    ariaLabel = props.ariaLabel;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "styledBar",
+    role: "progressbar",
+    "aria-valuenow": progress,
+    "aria-label": ariaLabel,
+    className: ax(["_1reo15vq _18m915vq _1yt4xh0m _2rkofajl _kqswstnw _1bsb1b7y _1ltv1ghs _bfhkrcrw _4t3i12iw _vchhusvi"]),
+    style: _objectSpread(_objectSpread({}, generateResponsiveStyles(breakpoint, positionBottom, showOnTop)), {}, {
+      "--_1xe2l1p": ix("".concat(width, "%")),
+      "--_15ce6z9": ix("".concat(height + padding * 2, "px")),
+      "--_cw4itz": ix("".concat(padding, "px"))
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "".concat(progress, "%")
+    },
+    className: ax(["_2rkofajl _bfhk1p0d _1e0c1ule _4t3i1osq"])
+  }));
+};
+StyledBar.displayName = 'StyledProgressBar';

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

@@ -0,0 +1,26 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
+
+// %
+var smallSizeSettings = {
+  marginBottom: 4
+};
+var largeSizeSettings = {
+  marginBottom: 12
+};
+export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
+  var multiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  var setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
+  var marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
+  var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
+  var spacing = "".concat(marginBottom, "px");
+  return showOnTop ? {
+    top: spacing
+  } : {
+    bottom: spacing
+  };
+}

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

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

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

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

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

@@ -1,57 +1,10 @@
-/* styledBar-compiled.tsx generated by @compiled/babel-plugin v2.0.0 */
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import "./styledBar-compiled.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { Breakpoint, getTitleBoxHeight, responsiveSettings } from '../common';
-var height = 3;
-var padding = 1;
-var width = 95; // %
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
-var smallSizeSettings = {
-  marginBottom: 4
-};
-var largeSizeSettings = {
-  marginBottom: 12
-};
-export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
-  var multiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
-  var setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
-  var marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
-  var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
-  var spacing = "".concat(marginBottom, "px");
-  return showOnTop ? {
-    top: spacing
-  } : {
-    bottom: spacing
-  };
-}
-var styledBarStyles = null;
-var styleChild = null;
-export var StyledBar = function StyledBar(props) {
-  var progress = props.progress,
-    breakpoint = props.breakpoint,
-    positionBottom = props.positionBottom,
-    showOnTop = props.showOnTop,
-    ariaLabel = props.ariaLabel;
-  return /*#__PURE__*/React.createElement("div", {
-    id: "styledBar",
-    role: "progressbar",
-    "aria-valuenow": progress,
-    "aria-label": ariaLabel,
-    className: ax(["_1reo15vq _18m915vq _1yt4xh0m _2rkofajl _kqswstnw _1bsb1b7y _1ltv1ghs _bfhkrcrw _4t3i12iw _vchhusvi"]),
-    style: _objectSpread(_objectSpread({}, generateResponsiveStyles(breakpoint, positionBottom, showOnTop)), {}, {
-      "--_1xe2l1p": ix("".concat(width, "%")),
-      "--_15ce6z9": ix("".concat(height + padding * 2, "px")),
-      "--_cw4itz": ix("".concat(padding, "px"))
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "".concat(progress, "%")
-    },
-    className: ax(["_2rkofajl _bfhk1p0d _1e0c1ule _4t3i1osq"])
-  }));
-};
+import { StyledBar } from './StyledBar-2';
+export var height = 3;
+export var padding = 1;
+export var width = 95;
 StyledBar.displayName = 'StyledProgressBar';

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

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

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

@@ -1,26 +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';
 var height = 3;
 var padding = 1;
-var width = 95; // %
-var left = (100 - width) / 2; // %
+var width = 95;
 
-var smallSizeSettings = {
-  marginBottom: 4
-};
-var largeSizeSettings = {
-  marginBottom: 12
-};
-export function generateResponsiveStyles(breakpoint, positionBottom, showOnTop) {
-  var multiplier = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
-  var setting = breakpoint === Breakpoint.SMALL ? smallSizeSettings : largeSizeSettings;
-  var marginPositionBottom = responsiveSettings[breakpoint].titleBox.verticalPadding;
-  var marginBottom = setting.marginBottom * multiplier + (positionBottom ? marginPositionBottom : getTitleBoxHeight(breakpoint));
-  return "\n    ".concat(showOnTop ? 'top' : 'bottom', ": ").concat(marginBottom, "px\n  ");
-}
+// %
+var left = (100 - width) / 2;
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var getStyledBarStylesBasedOnProps = function getStyledBarStylesBasedOnProps(_ref) {
@@ -30,8 +18,8 @@ var getStyledBarStylesBasedOnProps = function getStyledBarStylesBasedOnProps(_re
     showOnTop = _ref.showOnTop;
   return "\n".concat(borderRadius, "\noverflow: hidden;\nposition: absolute;\nwidth: ").concat(width, "%;\nleft: ").concat(left, "%;\nbackground-color: ").concat(rgba('#FFFFFF', 0.8), ";\nheight: ").concat(height + padding * 2, "px;\npadding: ").concat(padding, "px;\nbox-sizing: border-box;\n\n::before {\n  content: '';\n  width: ").concat(progress, "%;\n  height: 100%;\n  background-color: #44546F;\n  ").concat(borderRadius, "\n  display: block;\n}\n").concat(generateResponsiveStyles(breakpoint, positionBottom, showOnTop), "\n");
 };
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 export var styledBarStyles = function styledBarStyles(props) {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   return css(getStyledBarStylesBasedOnProps(props));

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

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

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

@@ -1,70 +1 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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';
-var breakpointSizes = [[Breakpoint.SMALL, 599], [Breakpoint.LARGE, Infinity]];
-export var calcBreakpointSize = function calcBreakpointSize() {
-  var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var _ref = breakpointSizes.find(function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 2),
-        _breakpoint = _ref4[0],
-        limit = _ref4[1];
-      return wrapperWidth <= limit;
-    }) || [Breakpoint.SMALL],
-    _ref2 = _slicedToArray(_ref, 1),
-    breakpoint = _ref2[0];
-  return breakpoint;
-};
-export var generateResponsiveStyles = function generateResponsiveStyles() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Breakpoint.SMALL;
-  var setting = responsiveSettings[breakpoint];
-  return "\n    font-size: ".concat(setting.fontSize, "px;\n    line-height: ").concat(setting.lineHeight, "px;\n  ");
-};
-export var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
-  var _ref5 = dimensions || {},
-    width = _ref5.width,
-    height = _ref5.height;
-  var _getDefaultCardDimens = getDefaultCardDimensions(appearance),
-    defaultWidth = _getDefaultCardDimens.width,
-    defaultHeight = _getDefaultCardDimens.height;
-  return "\n\t/* If container doesn't exists, it will fallback to this */\n\twidth: ".concat(getCSSUnitValue(width || defaultWidth), ";\n\n    max-width: 100%;\n    height: ").concat(getCSSUnitValue(height || defaultHeight), ";\n    max-height: 100%;\n  ");
-};
-
-// This is a trick to simulate the blue border without affecting the dimensions.
-// CSS outline has no 'radius', therefore we can't achieve the same effect with it
-export var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
-  var withOverlayShadow = !disableOverlay ? "var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)" : '';
-  var selectedShadow = selected ? akEditorSelectedBoxShadow : '';
-  var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
-  return shadow ? "box-shadow: ".concat(shadow, ";") : '';
-};
-export var getCursorStyle = function getCursorStyle(cursor) {
-  return !!cursor ? "cursor: ".concat(cursor, ";") : '';
-};
-export var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {
-  if (!isPlayButtonClickable) {
-    return '';
-  }
-  return "\n    &:hover .".concat(playButtonClassName, " {\n      ").concat(fixedPlayButtonStyles, "\n    }\n  ");
-};
-export var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSelectable) {
-  if (!isTickBoxSelectable) {
-    return '';
-  }
-  return "\n    &:hover .".concat(tickBoxClassName, " {\n      ").concat(tickboxFixedStyles, "\n    }\n  ");
-};
-var defaultTransitionDuration = '.3s';
-export var transition = function transition() {
-  var propertyName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';
-  return "\n  transition: ".concat(propertyName, " ").concat(defaultTransitionDuration, ";\n");
-};
-var hexToRgb = function hexToRgb(hex) {
-  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? "".concat(parseInt(result[1], 16), ",").concat(parseInt(result[2], 16), ",").concat(parseInt(result[3], 16)) : null;
-};
-export var rgba = function rgba(hex, opacity) {
-  return "rgba(".concat(hexToRgb(hex), ", ").concat(opacity, ")");
-};
+export var defaultTransitionDuration = '.3s';

package/dist/esm/card/ui/tickBox/tickBoxWrapper-compiled.js

@@ -1,4 +1,4 @@
-/* tickBoxWrapper-compiled.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* tickBoxWrapper-compiled.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./tickBoxWrapper-compiled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

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

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

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

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

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

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

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

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

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

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

@@ -1,11 +1,12 @@
-/* failedTitleBox.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* failedTitleBox.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./failedTitleBox.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 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';
 var errorMessageWrapperStyles = null;
 export var FailedTitleBox = function FailedTitleBox(_ref) {
   var breakpoint = _ref.breakpoint,

package/dist/esm/card/ui/titleBox/styles.js

@@ -1,59 +1,7 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
-var generateResponsiveStyles = function generateResponsiveStyles() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Breakpoint.SMALL;
-  var setting = responsiveSettings[breakpoint];
-  var verticalPadding = setting.titleBox.verticalPadding;
-  var horizontalPadding = setting.titleBox.horizontalPadding;
-  var height = getTitleBoxHeight(breakpoint);
-  return "height: ".concat(height, "px;\n    padding: ").concat(verticalPadding, "px ").concat(horizontalPadding, "px;");
-};
-export var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
-  var breakpoint = _ref.breakpoint,
-    _ref$display = _ref.display,
-    display = _ref$display === void 0 ? 'flex' : _ref$display;
-  return css({
-    position: 'absolute',
-    bottom: 0,
-    width: '100%',
-    backgroundColor: "var(--ds-surface, #FFFFFF)",
-    color: "var(--ds-text, #292A2E)",
-    cursor: 'inherit',
-    pointerEvents: 'none',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    display: display,
-    flexDirection: 'column',
-    justifyContent: 'center'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  generateResponsiveStyles(breakpoint));
-};
-titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
-var infoStyles = "white-space: nowrap;overflow: hidden;";
-var iconOverlapStyles = "padding-right: 10px;";
-export var titleBoxHeaderStyles = function titleBoxHeaderStyles(_ref2) {
-  var hasIconOverlap = _ref2.hasIconOverlap;
-  return css({
-    fontWeight: "var(--ds-font-weight-semibold, 600)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  infoStyles,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  hasIconOverlap && iconOverlapStyles);
-};
-titleBoxHeaderStyles.displayName = 'FailedTitleBoxHeader';
-export var titleBoxFooterStyles = function titleBoxFooterStyles(_ref3) {
-  var hasIconOverlap = _ref3.hasIconOverlap;
-  return css({
-    textOverflow: 'ellipsis'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  infoStyles,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  hasIconOverlap && iconOverlapStyles);
-};
-titleBoxFooterStyles.displayName = 'TitleBoxFooter';
+import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+export var infoStyles = "white-space: nowrap;overflow: hidden;";
+export var iconOverlapStyles = "padding-right: 10px;";
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var titleBoxIconStyles = css({

package/dist/esm/card/ui/titleBox/titleBox.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import { injectIntl } from 'react-intl';
 import LockFilledIcon from '@atlaskit/icon/core/lock-locked';
-import { Truncate } from '@atlaskit/media-ui/truncateText/truncate';
 import { formatDate } from '@atlaskit/media-ui/formatDate';
-import { TitleBoxWrapper, TitleBoxFooter, TitleBoxHeader, TitleBoxIcon } from './titleBoxComponents';
+import { Truncate } from '@atlaskit/media-ui/truncateText/truncate';
+import { TitleBoxFooter } from './TitleBoxFooter';
+import { TitleBoxHeader } from './TitleBoxHeader';
+import { TitleBoxIcon } from './TitleBoxIcon';
+import { TitleBoxWrapper } from './TitleBoxWrapper';
 var placeholderText = ' ';
 var isValidTimestamp = function isValidTimestamp(timeStamp) {
   return new Date(timeStamp).getTime() > 0;