@atlaskit/media-card 81.10.12 → 81.10.13

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

@@ -1,77 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transition = exports.rgba = exports.getWrapperShadow = exports.getWrapperDimensions = exports.getSelectableTickBoxStyles = exports.getCursorStyle = exports.getClickablePlayButtonStyles = exports.generateResponsiveStyles = exports.calcBreakpointSize = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _consts = require("@atlaskit/editor-shared-styles/consts");
-var _getCSSUnitValue = require("../../utils/getCSSUnitValue");
-var _cardDimensions = require("../../utils/cardDimensions");
-var _styles = require("./tickBox/styles");
-var _styles2 = require("./playButton/styles");
-var _common = require("./common");
-var breakpointSizes = [[_common.Breakpoint.SMALL, 599], [_common.Breakpoint.LARGE, Infinity]];
-var calcBreakpointSize = exports.calcBreakpointSize = function calcBreakpointSize() {
-  var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var _ref = breakpointSizes.find(function (_ref3) {
-      var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-        _breakpoint = _ref4[0],
-        limit = _ref4[1];
-      return wrapperWidth <= limit;
-    }) || [_common.Breakpoint.SMALL],
-    _ref2 = (0, _slicedToArray2.default)(_ref, 1),
-    breakpoint = _ref2[0];
-  return breakpoint;
-};
-var generateResponsiveStyles = exports.generateResponsiveStyles = function generateResponsiveStyles() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
-  var setting = _common.responsiveSettings[breakpoint];
-  return "\n    font-size: ".concat(setting.fontSize, "px;\n    line-height: ").concat(setting.lineHeight, "px;\n  ");
-};
-var getWrapperDimensions = exports.getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
-  var _ref5 = dimensions || {},
-    width = _ref5.width,
-    height = _ref5.height;
-  var _getDefaultCardDimens = (0, _cardDimensions.getDefaultCardDimensions)(appearance),
-    defaultWidth = _getDefaultCardDimens.width,
-    defaultHeight = _getDefaultCardDimens.height;
-  return "\n\t/* If container doesn't exists, it will fallback to this */\n\twidth: ".concat((0, _getCSSUnitValue.getCSSUnitValue)(width || defaultWidth), ";\n\n    max-width: 100%;\n    height: ").concat((0, _getCSSUnitValue.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
-var getWrapperShadow = exports.getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
-  var withOverlayShadow = !disableOverlay ? "var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)" : '';
-  var selectedShadow = selected ? _consts.akEditorSelectedBoxShadow : '';
-  var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
-  return shadow ? "box-shadow: ".concat(shadow, ";") : '';
-};
-var getCursorStyle = exports.getCursorStyle = function getCursorStyle(cursor) {
-  return !!cursor ? "cursor: ".concat(cursor, ";") : '';
-};
-var getClickablePlayButtonStyles = exports.getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {
-  if (!isPlayButtonClickable) {
-    return '';
-  }
-  return "\n    &:hover .".concat(_styles2.playButtonClassName, " {\n      ").concat(_styles2.fixedPlayButtonStyles, "\n    }\n  ");
-};
-var getSelectableTickBoxStyles = exports.getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSelectable) {
-  if (!isTickBoxSelectable) {
-    return '';
-  }
-  return "\n    &:hover .".concat(_styles.tickBoxClassName, " {\n      ").concat(_styles.tickboxFixedStyles, "\n    }\n  ");
-};
-var defaultTransitionDuration = '.3s';
-var transition = exports.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;
-};
-var rgba = exports.rgba = function rgba(hex, opacity) {
-  return "rgba(".concat(hexToRgb(hex), ", ").concat(opacity, ")");
-};
+exports.defaultTransitionDuration = void 0;
+var defaultTransitionDuration = exports.defaultTransitionDuration = '.3s';

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorMessageWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _titleBoxComponentsCompiled = require("./titleBoxComponents-compiled");
+var ErrorMessageWrapper = exports.ErrorMessageWrapper = function ErrorMessageWrapper(props) {
+  return /*#__PURE__*/_react.default.createElement(_titleBoxComponentsCompiled.ErrorMessageWrapper, props);
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleBoxFooter = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _titleBoxComponentsCompiled = require("./titleBoxComponents-compiled");
+var TitleBoxFooter = exports.TitleBoxFooter = function TitleBoxFooter(props) {
+  return /*#__PURE__*/_react.default.createElement(_titleBoxComponentsCompiled.TitleBoxFooter, props);
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleBoxHeader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _titleBoxComponentsCompiled = require("./titleBoxComponents-compiled");
+var TitleBoxHeader = exports.TitleBoxHeader = function TitleBoxHeader(props) {
+  return /*#__PURE__*/_react.default.createElement(_titleBoxComponentsCompiled.TitleBoxHeader, props);
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleBoxIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _titleBoxComponentsCompiled = require("./titleBoxComponents-compiled");
+var TitleBoxIcon = exports.TitleBoxIcon = function TitleBoxIcon(props) {
+  return /*#__PURE__*/_react.default.createElement(_titleBoxComponentsCompiled.TitleBoxIcon, props);
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleBoxWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _titleBoxComponentsCompiled = require("./titleBoxComponents-compiled");
+var TitleBoxWrapper = exports.TitleBoxWrapper = function TitleBoxWrapper(props) {
+  return /*#__PURE__*/_react.default.createElement(_titleBoxComponentsCompiled.TitleBoxWrapper, props);
+};

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

@@ -12,15 +12,16 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _statusWarning = _interopRequireDefault(require("@atlaskit/icon/core/status-warning"));
 var _messages = require("@atlaskit/media-ui/messages");
-var _titleBoxComponents = require("./titleBoxComponents");
+var _ErrorMessageWrapper = require("./ErrorMessageWrapper");
+var _TitleBoxWrapper = require("./TitleBoxWrapper");
 var errorMessageWrapperStyles = null;
 var FailedTitleBox = exports.FailedTitleBox = function FailedTitleBox(_ref) {
   var breakpoint = _ref.breakpoint,
     _ref$customMessage = _ref.customMessage,
     customMessage = _ref$customMessage === void 0 ? _messages.messages.failed_to_load : _ref$customMessage;
-  return /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxWrapper, {
+  return /*#__PURE__*/_react.default.createElement(_TitleBoxWrapper.TitleBoxWrapper, {
     breakpoint: breakpoint
-  }, /*#__PURE__*/_react.default.createElement(_titleBoxComponents.ErrorMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_statusWarning.default, {
+  }, /*#__PURE__*/_react.default.createElement(_ErrorMessageWrapper.ErrorMessageWrapper, null, /*#__PURE__*/_react.default.createElement(_statusWarning.default, {
     label: 'Warning',
     color: "var(--ds-text-danger, #AE2E24)",
     size: "small"

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

@@ -3,64 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBoxWrapperStyles = exports.titleBoxIconStyles = exports.titleBoxHeaderStyles = exports.titleBoxFooterStyles = exports.newTitleBoxIconStyles = exports.errorMessageWrapperStyles = void 0;
+exports.titleBoxIconStyles = exports.newTitleBoxIconStyles = exports.infoStyles = exports.iconOverlapStyles = exports.errorMessageWrapperStyles = void 0;
 var _react = require("@emotion/react");
-var _common = require("../common");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var generateResponsiveStyles = function generateResponsiveStyles() {
-  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
-  var setting = _common.responsiveSettings[breakpoint];
-  var verticalPadding = setting.titleBox.verticalPadding;
-  var horizontalPadding = setting.titleBox.horizontalPadding;
-  var height = (0, _common.getTitleBoxHeight)(breakpoint);
-  return "height: ".concat(height, "px;\n    padding: ").concat(verticalPadding, "px ").concat(horizontalPadding, "px;");
-};
-var titleBoxWrapperStyles = exports.titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
-  var breakpoint = _ref.breakpoint,
-    _ref$display = _ref.display,
-    display = _ref$display === void 0 ? 'flex' : _ref$display;
-  return (0, _react.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;";
-var titleBoxHeaderStyles = exports.titleBoxHeaderStyles = function titleBoxHeaderStyles(_ref2) {
-  var hasIconOverlap = _ref2.hasIconOverlap;
-  return (0, _react.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';
-var titleBoxFooterStyles = exports.titleBoxFooterStyles = function titleBoxFooterStyles(_ref3) {
-  var hasIconOverlap = _ref3.hasIconOverlap;
-  return (0, _react.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';
+var infoStyles = exports.infoStyles = "white-space: nowrap;overflow: hidden;";
+var iconOverlapStyles = exports.iconOverlapStyles = "padding-right: 10px;";
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var titleBoxIconStyles = exports.titleBoxIconStyles = (0, _react.css)({

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

@@ -8,9 +8,12 @@ exports.TitleBox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _lockLocked = _interopRequireDefault(require("@atlaskit/icon/core/lock-locked"));
-var _truncate = require("@atlaskit/media-ui/truncateText/truncate");
 var _formatDate = require("@atlaskit/media-ui/formatDate");
-var _titleBoxComponents = require("./titleBoxComponents");
+var _truncate = require("@atlaskit/media-ui/truncateText/truncate");
+var _TitleBoxFooter = require("./TitleBoxFooter");
+var _TitleBoxHeader = require("./TitleBoxHeader");
+var _TitleBoxIcon = require("./TitleBoxIcon");
+var _TitleBoxWrapper = require("./TitleBoxWrapper");
 var placeholderText = ' ';
 var isValidTimestamp = function isValidTimestamp(timeStamp) {
   return new Date(timeStamp).getTime() > 0;
@@ -24,20 +27,20 @@ var TitleBox = exports.TitleBox = (0, _reactIntl.injectIntl)(function (_ref) {
     titleBoxIcon = _ref.titleBoxIcon,
     _hidden = _ref.hidden,
     intl = _ref.intl;
-  return /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxWrapper, {
+  return /*#__PURE__*/_react.default.createElement(_TitleBoxWrapper.TitleBoxWrapper, {
     breakpoint: breakpoint,
     titleBoxBgColor: titleBoxBgColor
-  }, /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxHeader, {
+  }, /*#__PURE__*/_react.default.createElement(_TitleBoxHeader.TitleBoxHeader, {
     hasIconOverlap: !!titleBoxIcon && !createdAt
   }, /*#__PURE__*/_react.default.createElement(_truncate.Truncate, {
     text: name !== null && name !== void 0 ? name : placeholderText
-  })), /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxFooter, {
+  })), /*#__PURE__*/_react.default.createElement(_TitleBoxFooter.TitleBoxFooter, {
     hasIconOverlap: !!titleBoxIcon
     // Suppressing it here because of a timezone mismatch in the createdAt text
     // that can cause a late mutation in the attachments strip view
     ,
     suppressHydrationWarning: true
-  }, createdAt !== undefined && isValidTimestamp(createdAt) ? (0, _formatDate.formatDate)(createdAt, (_intl$locale = intl === null || intl === void 0 ? void 0 : intl.locale) !== null && _intl$locale !== void 0 ? _intl$locale : 'en') : placeholderText), titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/_react.default.createElement(_titleBoxComponents.TitleBoxIcon, null, /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
+  }, createdAt !== undefined && isValidTimestamp(createdAt) ? (0, _formatDate.formatDate)(createdAt, (_intl$locale = intl === null || intl === void 0 ? void 0 : intl.locale) !== null && _intl$locale !== void 0 ? _intl$locale : 'en') : placeholderText), titleBoxIcon === 'LockFilledIcon' && /*#__PURE__*/_react.default.createElement(_TitleBoxIcon.TitleBoxIcon, null, /*#__PURE__*/_react.default.createElement(_lockLocked.default, {
     color: "currentColor",
     label: "",
     size: "small"

package/dist/cjs/card/ui/titleBox/titleBoxComponents-compiled.js

@@ -9,7 +9,7 @@ exports.TitleBoxWrapper = exports.TitleBoxIcon = exports.TitleBoxHeader = export
 require("./titleBoxComponents-compiled.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _styles = require("../styles");
+var _rgba = require("../rgba");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var smallLineHeight = 14;
 var smallVerticalPadding = 4;
@@ -27,7 +27,7 @@ var TitleBoxWrapper = exports.TitleBoxWrapper = function TitleBoxWrapper(props)
   var breakpoint = props.breakpoint,
     titleBoxBgColor = props.titleBoxBgColor,
     hidden = props.hidden;
-  var color = titleBoxBgColor && (0, _styles.rgba)(HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : '#FFFFFF', 1);
+  var color = titleBoxBgColor && (0, _rgba.rgba)(HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : '#FFFFFF', 1);
   return /*#__PURE__*/React.createElement("div", {
     id: "titleBoxWrapper",
     "data-testid": "media-title-box",
@@ -45,6 +45,8 @@ TitleBoxWrapper.displayName = 'TitleBoxWrapper';
 var infoStyles = null;
 var iconOverlapStyle = null;
 var titleBoxHeaderStyles = null;
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports -- Retain shared module-local Compiled styles across title-box components.
 var TitleBoxHeader = exports.TitleBoxHeader = function TitleBoxHeader(props) {
   var hasIconOverlap = props.hasIconOverlap;
   return /*#__PURE__*/React.createElement("div", {
@@ -57,6 +59,8 @@ var TitleBoxHeader = exports.TitleBoxHeader = function TitleBoxHeader(props) {
 };
 TitleBoxHeader.displayName = 'FailedTitleBoxHeader';
 var titleBoxFooterStyles = null;
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports -- Retain shared module-local Compiled styles across title-box components.
 var TitleBoxFooter = exports.TitleBoxFooter = function TitleBoxFooter(props) {
   var hasIconOverlap = props.hasIconOverlap,
     suppressHydrationWarning = props.suppressHydrationWarning;
@@ -71,6 +75,8 @@ var TitleBoxFooter = exports.TitleBoxFooter = function TitleBoxFooter(props) {
 };
 TitleBoxFooter.displayName = 'TitleBoxFooter';
 var titleBoxIconStyles = null;
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports -- Retain shared module-local Compiled styles across title-box components.
 var TitleBoxIcon = exports.TitleBoxIcon = function TitleBoxIcon(props) {
   return /*#__PURE__*/React.createElement("div", {
     id: "titleBoxIcon",
@@ -79,6 +85,8 @@ var TitleBoxIcon = exports.TitleBoxIcon = function TitleBoxIcon(props) {
   }, props.children);
 };
 var errorMessageWrapperStyles = null;
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports -- Retain shared module-local Compiled styles across title-box components.
 var ErrorMessageWrapper = exports.ErrorMessageWrapper = function ErrorMessageWrapper(props) {
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   return /*#__PURE__*/React.createElement("div", {

package/dist/cjs/card/ui/titleBox/titleBoxFooterStyles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.titleBoxFooterStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var infoStyles = "white-space: nowrap;overflow: hidden;";
+var iconOverlapStyles = "padding-right: 10px;";
+var titleBoxFooterStyles = exports.titleBoxFooterStyles = function titleBoxFooterStyles(_ref) {
+  var hasIconOverlap = _ref.hasIconOverlap;
+  return (0, _react.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';

package/dist/cjs/card/ui/titleBox/titleBoxHeaderStyles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.titleBoxHeaderStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var infoStyles = "white-space: nowrap;overflow: hidden;";
+var iconOverlapStyles = "padding-right: 10px;";
+var titleBoxHeaderStyles = exports.titleBoxHeaderStyles = function titleBoxHeaderStyles(_ref) {
+  var hasIconOverlap = _ref.hasIconOverlap;
+  return (0, _react.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';

package/dist/cjs/card/ui/titleBox/titleBoxWrapperStyles.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.titleBoxWrapperStyles = void 0;
+var _react = require("@emotion/react");
+var _common = require("../common");
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var generateResponsiveStyles = function generateResponsiveStyles() {
+  var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
+  var setting = _common.responsiveSettings[breakpoint];
+  var verticalPadding = setting.titleBox.verticalPadding;
+  var horizontalPadding = setting.titleBox.horizontalPadding;
+  var height = (0, _common.getTitleBoxHeight)(breakpoint);
+  return "height: ".concat(height, "px;\n    padding: ").concat(verticalPadding, "px ").concat(horizontalPadding, "px;");
+};
+var titleBoxWrapperStyles = exports.titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
+  var breakpoint = _ref.breakpoint,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'flex' : _ref$display;
+  return (0, _react.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';

package/dist/cjs/card/ui/transition.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transition = void 0;
+var _styles = require("./styles");
+var transition = exports.transition = function transition() {
+  var propertyName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';
+  return "\n  transition: ".concat(propertyName, " ").concat(_styles.defaultTransitionDuration, ";\n");
+};

package/dist/cjs/card/ui/unhandledErrorCard/unhandledErrorCard-compiled.js

@@ -17,7 +17,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _statusWarning = _interopRequireDefault(require("@atlaskit/icon/core/status-warning"));
-var _utils = require("../../../utils");
+var _cardDimensions = require("../../../utils/cardDimensions");
 var _contentLoadingErrorMessage = require("./contentLoadingErrorMessage");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -39,12 +39,12 @@ var normalizeDimension = function normalizeDimension(value, defaultValue) {
 };
 var getConvertedDimension = function getConvertedDimension(dimensions) {
   var _dimensions$width = dimensions.width,
-    width = _dimensions$width === void 0 ? _utils.defaultImageCardDimensions.width : _dimensions$width,
+    width = _dimensions$width === void 0 ? _cardDimensions.defaultImageCardDimensions.width : _dimensions$width,
     _dimensions$height = dimensions.height,
-    height = _dimensions$height === void 0 ? _utils.defaultImageCardDimensions.height : _dimensions$height;
+    height = _dimensions$height === void 0 ? _cardDimensions.defaultImageCardDimensions.height : _dimensions$height;
   return {
-    width: normalizeDimension(width, _utils.defaultImageCardDimensions.width),
-    height: normalizeDimension(height, _utils.defaultImageCardDimensions.height)
+    width: normalizeDimension(width, _cardDimensions.defaultImageCardDimensions.width),
+    height: normalizeDimension(height, _cardDimensions.defaultImageCardDimensions.height)
   };
 };
 var wrapperStyle = null;
@@ -59,7 +59,7 @@ var UnhandledErrorCard = exports.UnhandledErrorCard = /*#__PURE__*/function (_Co
     value: function render() {
       var _this$props = this.props,
         _this$props$dimension = _this$props.dimensions,
-        dimensions = _this$props$dimension === void 0 ? _utils.defaultImageCardDimensions : _this$props$dimension,
+        dimensions = _this$props$dimension === void 0 ? _cardDimensions.defaultImageCardDimensions : _this$props$dimension,
         onClick = _this$props.onClick;
       var convertedDimensions = getConvertedDimension(dimensions);
       var hideText = !shouldShowText(getConvertedDimension(dimensions));

package/dist/cjs/card/ui/wrapper/styles.js

@@ -7,12 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.wrapperStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _mixins = require("@atlaskit/media-ui/mixins");
 var _selection = require("@atlaskit/editor-shared-styles/selection");
-var _styles = require("../styles");
+var _mixins = require("@atlaskit/media-ui/mixins");
+var _styles = require("../actionsBar/styles");
 var _styles2 = require("../blanket/styles");
-var _styles3 = require("../actionsBar/styles");
+var _generateResponsiveStyles = require("../generateResponsiveStyles");
+var _getClickablePlayButtonStyles = require("../getClickablePlayButtonStyles");
+var _getCursorStyle = require("../getCursorStyle");
+var _getSelectableTickBoxStyles = require("../getSelectableTickBoxStyles");
+var _getWrapperDimensions = require("../getWrapperDimensions");
+var _getWrapperShadow = require("../getWrapperShadow");
+var _transition = require("../transition");
 var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var wrapperStyles = exports.wrapperStyles = function wrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
     dimensions = _ref.dimensions,
@@ -24,6 +31,6 @@ var wrapperStyles = exports.wrapperStyles = function wrapperStyles(_ref) {
     isTickBoxSelectable = _ref.isTickBoxSelectable,
     shouldDisplayTooltip = _ref.shouldDisplayTooltip,
     mediaCardCursor = _ref.mediaCardCursor;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\tbox-sizing: border-box;\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tposition: relative;\n\tfont-family: ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\n\t/* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n\t\t", "\n\t}\n\t&:hover .", ", &:focus-within .", " {\n\t\t", "\n\t}\n\n\t/* Tooltip does not support percentage dimensions. We enforce them here.\n\t   Guard skips top-layer elements (eg tooltip, modal); ':where()' keeps specificity unchanged. */\n\t", "\n\n\tbutton:focus + & {\n\t\toutline: solid 2px ", ";\n\t}\n"])), (0, _styles.transition)(), "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", (0, _styles.getWrapperDimensions)(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, #0515240F)", ";"), _mixins.borderRadius, (0, _styles.getCursorStyle)(mediaCardCursor), (0, _styles.getWrapperShadow)(disableOverlay, selected), (0, _styles.generateResponsiveStyles)(breakpoint), selected ? _selection.hideNativeBrowserTextSelectionStyles : '', (0, _styles.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div:not(:where([popover], dialog)) { width: 100%; height: 100%; }", "var(--ds-border-focused, #4688EC)");
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\tbox-sizing: border-box;\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tposition: relative;\n\tfont-family: ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\n\t/* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n\t\t", "\n\t}\n\t&:hover .", ", &:focus-within .", " {\n\t\t", "\n\t}\n\n\t/* Tooltip does not support percentage dimensions. We enforce them here.\n\t   Guard skips top-layer elements (eg tooltip, modal); ':where()' keeps specificity unchanged. */\n\t", "\n\n\tbutton:focus + & {\n\t\toutline: solid 2px ", ";\n\t}\n"])), (0, _transition.transition)(), "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)", (0, _getWrapperDimensions.getWrapperDimensions)(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, #0515240F)", ";"), _mixins.borderRadius, (0, _getCursorStyle.getCursorStyle)(mediaCardCursor), (0, _getWrapperShadow.getWrapperShadow)(disableOverlay, selected), (0, _generateResponsiveStyles.generateResponsiveStyles)(breakpoint), selected ? _selection.hideNativeBrowserTextSelectionStyles : '', (0, _getClickablePlayButtonStyles.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _getSelectableTickBoxStyles.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles.actionsBarClassName, _styles.actionsBarClassName, _styles.fixedActionBarStyles, shouldDisplayTooltip && "> div:not(:where([popover], dialog)) { width: 100%; height: 100%; }", "var(--ds-border-focused, #4688EC)");
 };
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

package/dist/cjs/card/useBreakpoint.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useBreakpoint = void 0;
 var _react = require("react");
-var _styles = require("./ui/styles");
-var _utils = require("../utils");
+var _cardDimensions = require("../utils/cardDimensions");
+var _getElementDimension = require("../utils/getElementDimension");
+var _isValidPercentageUnit = require("../utils/isValidPercentageUnit");
+var _calcBreakpointSize = require("./ui/calcBreakpointSize");
 // Hook to calculate the breakpoint based on the width of the element
 var useBreakpoint = exports.useBreakpoint = function useBreakpoint() {
   var dimensionWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -14,16 +16,16 @@ var useBreakpoint = exports.useBreakpoint = function useBreakpoint() {
   var breakpoint = (0, _react.useMemo)(function () {
     var widthToCalculate;
     if (dimensionWidth) {
-      if ((0, _utils.isValidPercentageUnit)(dimensionWidth) && divRef.current) {
-        var width = (0, _utils.getElementDimension)(divRef.current, 'width');
-        widthToCalculate = width || _utils.defaultImageCardDimensions.width;
+      if ((0, _isValidPercentageUnit.isValidPercentageUnit)(dimensionWidth) && divRef.current) {
+        var width = (0, _getElementDimension.getElementDimension)(divRef.current, 'width');
+        widthToCalculate = width || _cardDimensions.defaultImageCardDimensions.width;
       } else {
         widthToCalculate = dimensionWidth;
       }
     } else {
-      widthToCalculate = _utils.defaultImageCardDimensions.width;
+      widthToCalculate = _cardDimensions.defaultImageCardDimensions.width;
     }
-    return (0, _styles.calcBreakpointSize)(parseInt("".concat(widthToCalculate), 10));
+    return (0, _calcBreakpointSize.calcBreakpointSize)(parseInt("".concat(widthToCalculate), 10));
   }, [dimensionWidth, divRef]);
   return breakpoint;
 };

package/dist/cjs/ensureMediaCardError.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ensureMediaCardError = void 0;
+var _MediaCardError = require("./MediaCardError");
+var _isMediaCardError = require("./isMediaCardError");
+// In a try/catch statement, the error caught is the type of unknown.
+// We can use this helper to ensure that the error handled is the type of MediaCardError if unsure
+// If updatePrimaryReason is true, if it's a MediaCardError already, it will update it's primary reason
+var ensureMediaCardError = exports.ensureMediaCardError = function ensureMediaCardError(primaryReason, error, updatePrimaryReason) {
+  if ((0, _isMediaCardError.isMediaCardError)(error)) {
+    if (updatePrimaryReason && error.primaryReason !== primaryReason) {
+      return new _MediaCardError.MediaCardError(primaryReason, error.secondaryError);
+    }
+    return error;
+  }
+  return new _MediaCardError.MediaCardError(primaryReason, error);
+};