@atlaskit/media-card 79.0.0 → 79.0.1

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

@@ -1,65 +1,19 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { errorMessageWrapperStyles, newTitleBoxIconStyles, titleBoxFooterStyles, titleBoxHeaderStyles, titleBoxIconStyles, titleBoxWrapperStyles } from './styles';
+import { TitleBoxWrapper as CompiledTitleBoxWrapper, TitleBoxHeader as CompiledTitleBoxHeader, TitleBoxFooter as CompiledTitleBoxFooter, TitleBoxIcon as CompiledTitleBoxIcon, ErrorMessageWrapper as CompiledErrorMessageWrapper } from './titleBoxComponents-compiled';
+import { TitleBoxWrapper as EmotionTitleBoxWrapper, TitleBoxHeader as EmotionTitleBoxHeader, TitleBoxFooter as EmotionTitleBoxFooter, TitleBoxIcon as EmotionTitleBoxIcon, ErrorMessageWrapper as EmotionErrorMessageWrapper } from './titleBoxComponents-emotion';
 export var TitleBoxWrapper = function TitleBoxWrapper(props) {
-  var breakpoint = props.breakpoint,
-    titleBoxBgColor = props.titleBoxBgColor,
-    hidden = props.hidden;
-  return jsx("div", {
-    id: "titleBoxWrapper",
-    "data-testid": "media-title-box"
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: titleBoxWrapperStyles({
-      breakpoint: breakpoint,
-      display: hidden ? 'none' : 'flex',
-      titleBoxBgColor: titleBoxBgColor
-    })
-  }, props.children);
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledTitleBoxWrapper, props) : /*#__PURE__*/React.createElement(EmotionTitleBoxWrapper, props);
 };
 export var TitleBoxHeader = function TitleBoxHeader(props) {
-  var hasIconOverlap = props.hasIconOverlap;
-  return jsx("div", {
-    id: "titleBoxHeader",
-    "data-testid": "title-box-header"
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: titleBoxHeaderStyles({
-      hasIconOverlap: hasIconOverlap
-    })
-  }, props.children);
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledTitleBoxHeader, props) : /*#__PURE__*/React.createElement(EmotionTitleBoxHeader, props);
 };
 export var TitleBoxFooter = function TitleBoxFooter(props) {
-  var hasIconOverlap = props.hasIconOverlap;
-  return jsx("div", {
-    id: "titleBoxFooter",
-    "data-testid": "title-box-footer"
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: titleBoxFooterStyles({
-      hasIconOverlap: hasIconOverlap
-    })
-  }, props.children);
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledTitleBoxFooter, props) : /*#__PURE__*/React.createElement(EmotionTitleBoxFooter, props);
 };
 export var TitleBoxIcon = function TitleBoxIcon(props) {
-  return jsx("div", {
-    id: "titleBoxIcon",
-    "data-testid": "title-box-icon",
-    css: fg('platform-visual-refresh-icons') ?
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    newTitleBoxIconStyles :
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    titleBoxIconStyles
-  }, props.children);
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledTitleBoxIcon, props) : /*#__PURE__*/React.createElement(EmotionTitleBoxIcon, props);
 };
 export var 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 jsx("div", {
-    css: errorMessageWrapperStyles
-  }, props.children);
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledErrorMessageWrapper, props) : /*#__PURE__*/React.createElement(EmotionErrorMessageWrapper, props);
 };

package/dist/esm/card/ui/unhandledErrorCard/contentLoadingErrorMessage.js

@@ -0,0 +1,13 @@
+import React from 'react';
+export var ContentLoadingErrorMessage = function ContentLoadingErrorMessage(_ref) {
+  var isHidden = _ref.isHidden;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+    React.createElement("p", {
+      style: {
+        display: isHidden ? 'none' : 'block'
+      }
+    }, "We couldn't load this content")
+  );
+};

package/dist/esm/card/ui/unhandledErrorCard/index.js

@@ -1,99 +1,7 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { Component } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import WarningIcon from '@atlaskit/icon/core/migration/warning--editor-warning';
-import { N20, N800, Y500 } from '@atlaskit/theme/colors';
-import { center, borderRadius } from '@atlaskit/media-ui';
-import { defaultImageCardDimensions } from '../../../utils';
-var isPercentage = function isPercentage(value) {
-  return /^\d+(\.\d+)?%$/.test(value);
-};
-var shouldShowText = function shouldShowText(_ref) {
-  var width = _ref.width,
-    height = _ref.height;
-  if (isPercentage(width) || isPercentage(height)) {
-    return false;
-  }
-  return parseInt(width, 10) >= 240 && parseInt(height, 10) >= 90;
-};
-var normalizeDimension = function normalizeDimension(value, defaultValue) {
-  var sValue = value.toString();
-  return isPercentage(sValue) ? sValue : isNaN(parseInt(sValue, 10)) ? defaultValue + 'px' : parseInt(sValue, 10) + 'px';
-};
-var getConvertedDimension = function getConvertedDimension(dimensions) {
-  var _dimensions$width = dimensions.width,
-    width = _dimensions$width === void 0 ? defaultImageCardDimensions.width : _dimensions$width,
-    _dimensions$height = dimensions.height,
-    height = _dimensions$height === void 0 ? defaultImageCardDimensions.height : _dimensions$height;
-  return {
-    width: normalizeDimension(width, defaultImageCardDimensions.width),
-    height: normalizeDimension(height, defaultImageCardDimensions.height)
-  };
-};
-var wrapperStyles = function wrapperStyles() {
-  var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultImageCardDimensions;
-  try {
-    return css(
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    center,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    borderRadius, {
-      background: "var(--ds-background-neutral, ".concat(N20, ")"),
-      color: "var(--ds-text-subtle, ".concat(N800, ")"),
-      maxHeight: '100%',
-      maxWidth: '100%'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    getConvertedDimension(dimensions), {
-      display: 'flex',
-      flexDirection: 'column',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      p: {
-        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-        textAlign: 'center',
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        display: shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'
-      }
-    });
-  } catch (e) {
-    return null;
-  }
-};
-export var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
-  function UnhandledErrorCard() {
-    _classCallCheck(this, UnhandledErrorCard);
-    return _callSuper(this, UnhandledErrorCard, arguments);
-  }
-  _inherits(UnhandledErrorCard, _Component);
-  return _createClass(UnhandledErrorCard, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        dimensions = _this$props.dimensions,
-        onClick = _this$props.onClick;
-      return (
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Ignored via go/DSP-18766
-        jsx("div", {
-          css: wrapperStyles(dimensions),
-          onClick: onClick
-        }, jsx(WarningIcon, {
-          label: "Error",
-          color: "var(--ds-icon-warning, ".concat(Y500, ")"),
-          LEGACY_size: "medium",
-          spacing: "spacious"
-        }), jsx("p", null, "We couldn't load this content"))
-      );
-    }
-  }]);
-}(Component);
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { UnhandledErrorCard as CompiledUnhanldedErrorCard } from './unhandledErrorCard-compiled';
+import { UnhandledErrorCard as EmotionUnhanldedErrorCard } from './unhandledErrorCard-emotion';
+export var UnhandledErrorCard = function UnhandledErrorCard(props) {
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledUnhanldedErrorCard, props) : /*#__PURE__*/React.createElement(EmotionUnhanldedErrorCard, props);
+};

package/dist/esm/card/ui/unhandledErrorCard/unhandledErrorCard-compiled.compiled.css

@@ -0,0 +1,11 @@
+
+._1i7v1oud p{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rko1l7b{border-radius:3px}._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._31ku1h6o p{text-align:center}
+._4cvr1h6o{align-items:center}
+._bfhklslw{background-color:var(--_1jkcdu5)}
+._c71l1osq{max-height:100%}
+._p12f1osq{max-width:100%}
+._syaz1dfj{color:var(--_i2cu7k)}

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

@@ -0,0 +1,78 @@
+/* unhandledErrorCard-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import "./unhandledErrorCard-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; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { Component } from 'react';
+import WarningIcon from '@atlaskit/icon/core/migration/warning--editor-warning';
+import { N20, N800, Y500 } from '@atlaskit/theme/colors';
+import { defaultImageCardDimensions } from '../../../utils';
+import { ContentLoadingErrorMessage } from './contentLoadingErrorMessage';
+var isPercentage = function isPercentage(value) {
+  return /^\d+(\.\d+)?%$/.test(value);
+};
+var shouldShowText = function shouldShowText(_ref) {
+  var width = _ref.width,
+    height = _ref.height;
+  if (isPercentage(width) || isPercentage(height)) {
+    return false;
+  }
+  return parseInt(width, 10) >= 240 && parseInt(height, 10) >= 90;
+};
+var normalizeDimension = function normalizeDimension(value, defaultValue) {
+  var sValue = value.toString();
+  return isPercentage(sValue) ? sValue : isNaN(parseInt(sValue, 10)) ? defaultValue + 'px' : parseInt(sValue, 10) + 'px';
+};
+var getConvertedDimension = function getConvertedDimension(dimensions) {
+  var _dimensions$width = dimensions.width,
+    width = _dimensions$width === void 0 ? defaultImageCardDimensions.width : _dimensions$width,
+    _dimensions$height = dimensions.height,
+    height = _dimensions$height === void 0 ? defaultImageCardDimensions.height : _dimensions$height;
+  return {
+    width: normalizeDimension(width, defaultImageCardDimensions.width),
+    height: normalizeDimension(height, defaultImageCardDimensions.height)
+  };
+};
+var wrapperStyle = null;
+export var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
+  function UnhandledErrorCard() {
+    _classCallCheck(this, UnhandledErrorCard);
+    return _callSuper(this, UnhandledErrorCard, arguments);
+  }
+  _inherits(UnhandledErrorCard, _Component);
+  return _createClass(UnhandledErrorCard, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        _this$props$dimension = _this$props.dimensions,
+        dimensions = _this$props$dimension === void 0 ? defaultImageCardDimensions : _this$props$dimension,
+        onClick = _this$props.onClick;
+      var convertedDimensions = getConvertedDimension(dimensions);
+      var hideText = !shouldShowText(getConvertedDimension(dimensions));
+      return /*#__PURE__*/React.createElement("div", {
+        onClick: onClick,
+        className: ax(["_2rko1l7b _1e0c1txw _4cvr1h6o _1bah1h6o _bfhklslw _syaz1dfj _c71l1osq _p12f1osq _2lx21bp4 _1i7v1oud _31ku1h6o"]),
+        style: _objectSpread(_objectSpread({}, convertedDimensions), {}, {
+          "--_1jkcdu5": ix("var(--ds-background-neutral, ".concat(N20, ")")),
+          "--_i2cu7k": ix("var(--ds-text-subtle, ".concat(N800, ")"))
+        })
+      }, /*#__PURE__*/React.createElement(WarningIcon, {
+        label: "Error",
+        color: "var(--ds-icon-warning, ".concat(Y500, ")"),
+        LEGACY_size: "medium",
+        spacing: "spacious"
+      }), /*#__PURE__*/React.createElement(ContentLoadingErrorMessage, {
+        isHidden: hideText
+      }));
+    }
+  }]);
+}(Component);

package/dist/esm/card/ui/unhandledErrorCard/unhandledErrorCard-emotion.js

@@ -0,0 +1,101 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Component } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import WarningIcon from '@atlaskit/icon/core/migration/warning--editor-warning';
+import { N20, N800, Y500 } from '@atlaskit/theme/colors';
+import { center, borderRadius } from '@atlaskit/media-ui';
+import { defaultImageCardDimensions } from '../../../utils';
+import { ContentLoadingErrorMessage } from './contentLoadingErrorMessage';
+var isPercentage = function isPercentage(value) {
+  return /^\d+(\.\d+)?%$/.test(value);
+};
+var shouldShowText = function shouldShowText(_ref) {
+  var width = _ref.width,
+    height = _ref.height;
+  if (isPercentage(width) || isPercentage(height)) {
+    return false;
+  }
+  return parseInt(width, 10) >= 240 && parseInt(height, 10) >= 90;
+};
+var normalizeDimension = function normalizeDimension(value, defaultValue) {
+  var sValue = value.toString();
+  return isPercentage(sValue) ? sValue : isNaN(parseInt(sValue, 10)) ? defaultValue + 'px' : parseInt(sValue, 10) + 'px';
+};
+var getConvertedDimension = function getConvertedDimension(dimensions) {
+  var _dimensions$width = dimensions.width,
+    width = _dimensions$width === void 0 ? defaultImageCardDimensions.width : _dimensions$width,
+    _dimensions$height = dimensions.height,
+    height = _dimensions$height === void 0 ? defaultImageCardDimensions.height : _dimensions$height;
+  return {
+    width: normalizeDimension(width, defaultImageCardDimensions.width),
+    height: normalizeDimension(height, defaultImageCardDimensions.height)
+  };
+};
+var wrapperStyles = function wrapperStyles() {
+  var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultImageCardDimensions;
+  try {
+    return css(
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    center,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    borderRadius, {
+      background: "var(--ds-background-neutral, ".concat(N20, ")"),
+      color: "var(--ds-text-subtle, ".concat(N800, ")"),
+      maxHeight: '100%',
+      maxWidth: '100%'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    getConvertedDimension(dimensions), {
+      display: 'flex',
+      flexDirection: 'column',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      p: {
+        font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+        textAlign: 'center'
+      }
+    });
+  } catch (e) {
+    return null;
+  }
+};
+export var UnhandledErrorCard = /*#__PURE__*/function (_Component) {
+  function UnhandledErrorCard() {
+    _classCallCheck(this, UnhandledErrorCard);
+    return _callSuper(this, UnhandledErrorCard, arguments);
+  }
+  _inherits(UnhandledErrorCard, _Component);
+  return _createClass(UnhandledErrorCard, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        dimensions = _this$props.dimensions,
+        onClick = _this$props.onClick;
+      var isErrorHidden = !shouldShowText(getConvertedDimension(dimensions !== null && dimensions !== void 0 ? dimensions : defaultImageCardDimensions));
+      return (
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Ignored via go/DSP-18766
+        jsx("div", {
+          css: wrapperStyles(dimensions),
+          onClick: onClick
+        }, jsx(WarningIcon, {
+          label: "Error",
+          color: "var(--ds-icon-warning, ".concat(Y500, ")"),
+          LEGACY_size: "medium",
+          spacing: "spacious"
+        }), jsx(ContentLoadingErrorMessage, {
+          isHidden: isErrorHidden
+        }))
+      );
+    }
+  }]);
+}(Component);

package/dist/esm/card/ui/wrapper/imageContainer-compiled.compiled.css

@@ -0,0 +1,12 @@
+
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._c71l1osq{max-height:100%}
+._kqswh2mm{position:relative}
+._p12f1osq{max-width:100%}

package/dist/esm/card/ui/wrapper/imageContainer-compiled.js

@@ -0,0 +1,32 @@
+/* imageContainer-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./imageContainer-compiled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fileCardImageViewSelector } from '../../classnames';
+var imageContainerStyles = null;
+var imageContainerCenterStyles = null;
+export var ImageContainer = function ImageContainer(_ref) {
+  var children = _ref.children,
+    mediaName = _ref.mediaName,
+    status = _ref.status,
+    progress = _ref.progress,
+    selected = _ref.selected,
+    source = _ref.source,
+    centerElements = _ref.centerElements;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": fileCardImageViewSelector
+    /**
+     * This wrapper MUST add the classname in order to allow the editor to prevent bubbling up the click event.
+     * See the method isInteractiveElement in source platform/packages/editor/renderer/src/ui/Renderer/click-to-edit.ts
+     * Also, many other consumer tests rely on this selector.
+     */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: ax(["_1reo15vq _18m915vq _2rko1sit _1e0c1txw _kqswh2mm _p12f1osq _1bsb1osq _4t3i1osq _c71l1osq", centerElements && "_2lx21bp4 _1bah1h6o _4cvr1h6o", fileCardImageViewSelector]),
+    "data-test-media-name": mediaName,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    "data-test-selected": selected,
+    "data-test-source": source
+  }, children);
+};

package/dist/esm/card/ui/wrapper/imageContainer-emotion.js

@@ -0,0 +1,48 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx, css } from '@emotion/react';
+import { fileCardImageViewSelector } from '../../classnames';
+var imageContainerStyles = css({
+  display: 'flex',
+  position: 'relative',
+  maxWidth: '100%',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden',
+  borderRadius: "var(--ds-border-radius, 3px)"
+});
+var imageContainerCenterStyles = css({
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+export var ImageContainer = function ImageContainer(_ref) {
+  var children = _ref.children,
+    mediaName = _ref.mediaName,
+    status = _ref.status,
+    progress = _ref.progress,
+    selected = _ref.selected,
+    source = _ref.source,
+    centerElements = _ref.centerElements;
+  return jsx("div", {
+    css: [imageContainerStyles, centerElements && imageContainerCenterStyles],
+    "data-testid": fileCardImageViewSelector
+    /**
+     * This wrapper MUST add the classname in order to allow the editor to prevent bubbling up the click event.
+     * See the method isInteractiveElement in source platform/packages/editor/renderer/src/ui/Renderer/click-to-edit.ts
+     * Also, many other consumer tests rely on this selector.
+     */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: fileCardImageViewSelector,
+    "data-test-media-name": mediaName,
+    "data-test-status": status,
+    "data-test-progress": progress,
+    "data-test-selected": selected,
+    "data-test-source": source
+  }, children);
+};

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

@@ -1,48 +1,7 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx, css } from '@emotion/react';
-import { fileCardImageViewSelector } from '../../classnames';
-var imageContainerStyles = css({
-  display: 'flex',
-  position: 'relative',
-  maxWidth: '100%',
-  width: '100%',
-  height: '100%',
-  maxHeight: '100%',
-  overflow: 'hidden',
-  borderRadius: "var(--ds-border-radius, 3px)"
-});
-var imageContainerCenterStyles = css({
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
-export var ImageContainer = function ImageContainer(_ref) {
-  var children = _ref.children,
-    mediaName = _ref.mediaName,
-    status = _ref.status,
-    progress = _ref.progress,
-    selected = _ref.selected,
-    source = _ref.source,
-    centerElements = _ref.centerElements;
-  return jsx("div", {
-    css: [imageContainerStyles, centerElements && imageContainerCenterStyles],
-    "data-testid": fileCardImageViewSelector
-    /**
-     * This wrapper MUST add the classname in order to allow the editor to prevent bubbling up the click event.
-     * See the method isInteractiveElement in source platform/packages/editor/renderer/src/ui/Renderer/click-to-edit.ts
-     * Also, many other consumer tests rely on this selector.
-     */
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: fileCardImageViewSelector,
-    "data-test-media-name": mediaName,
-    "data-test-status": status,
-    "data-test-progress": progress,
-    "data-test-selected": selected,
-    "data-test-source": source
-  }, children);
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { ImageContainer as CompiledImageContainer } from './imageContainer-compiled';
+import { ImageContainer as EmotionImageContainer } from './imageContainer-compiled';
+export var ImageContainer = function ImageContainer(props) {
+  return fg('platform_media_compiled') ? /*#__PURE__*/React.createElement(CompiledImageContainer, props) : /*#__PURE__*/React.createElement(EmotionImageContainer, props);
 };

package/dist/esm/card/ui/wrapper/wrapper-compiled.compiled.css

@@ -0,0 +1,24 @@
+
+._2rko1l7b{border-radius:3px}
+button:focus+._1hlmuwsq{outline:var(--_jz8ahf)}._10pb1osq>div{height:100%}
+._14r11j28::-moz-selection, ._1np21j28 ::-moz-selection{background-color:transparent}
+._16qs64c8{box-shadow:var(--ds-shadow-raised,0 1px 1px rgba(9,30,66,.31),0 0 1px 0 rgba(9,30,66,.31))}
+._16qs666x{box-shadow:0 0 0 1px var(--ds-border-selected,#0c66e4)}
+._16qshzij{box-shadow:0 0 0 1px var(--ds-border-selected,#0c66e4),var(--ds-shadow-raised,0 1px 1px rgba(9,30,66,.31),0 0 1px 0 rgba(9,30,66,.31))}
+._19zy8vuz:hover .media-card-play-button .play-icon-background{height:56px}
+._1p1y1j28::selection, ._1rk81j28 ::selection{background-color:transparent}
+._1rquusvi *{box-sizing:border-box}
+._1xp5rcbj:hover .media-card-tickbox{color:var(--_13xf2t5)}
+._1y898vuz:hover .media-card-play-button .play-icon-background{width:56px}
+._1yf91flm:hover .media-card-tickbox{background-color:var(--_mt8cm6)}
+._80omtlke{cursor:pointer}
+._80omv00u{cursor:wait}
+._9m3z1osq>div{width:100%}
+._bfhklslw{background-color:var(--_1jkcdu5)}
+._c71l1osq{max-height:100%}
+._ect41sbm{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._eg5415te:hover .media-card-blanket{background-color:var(--_1vvetkq)}
+._kqswh2mm{position:relative}
+._mts3kb7n:focus-within .media-card-actions-bar, ._1ntskb7n:hover .media-card-actions-bar{opacity:1}
+._p12f1osq{max-width:100%}
+._vchhusvi{box-sizing:border-box}

package/dist/esm/card/ui/wrapper/wrapper-compiled.js

@@ -0,0 +1,86 @@
+/* wrapper-compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./wrapper-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 { newFileExperienceClassName } from '../../cardConstants';
+import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
+import { N0, N100, N20, N60A, N90A, B100 } from '@atlaskit/theme/colors';
+import { getDefaultCardDimensions } from '../../../utils/cardDimensions';
+import { getCSSUnitValue } from '../../../utils/getCSSUnitValue';
+var wrapperStyles = null;
+var backgroundStyle = null;
+var cursorStyleMap = {
+  pointer: "_80omtlke",
+  wait: "_80omv00u"
+};
+var shadowStyleMap = {
+  withOverlay: "_16qs64c8",
+  selected: "_16qs666x",
+  selectedWithOverlay: "_16qshzij"
+};
+var getShadowKey = function getShadowKey(disableOverlay, selected) {
+  if (!disableOverlay && selected) {
+    return 'selectedWithOverlay';
+  }
+  if (!disableOverlay) {
+    return 'withOverlay';
+  }
+  if (selected) {
+    return 'selected';
+  }
+  return '';
+};
+var hideNativeBrowserTextSelectionStyles = null;
+var clickableButtonPlayButtonStyles = null;
+var selectableTickboxStyle = null;
+var tooltipStyle = null;
+var getResponsiveStyles = function getResponsiveStyles(breakpoint) {
+  // dynamically setting the properties to avoid ratcheting build errors. These need to be removed however for the compiled transformation.
+  return breakpoint === "small" ? _defineProperty(_defineProperty({}, 'fontSize', '11x'), 'lineHeight', '14px') : _defineProperty(_defineProperty({}, 'fontSize', '14px'), 'lineHeight', '22px');
+};
+export var Wrapper = function Wrapper(props) {
+  var testId = props.testId,
+    dimensions = props.dimensions,
+    appearance = props.appearance,
+    onClick = props.onClick,
+    onMouseEnter = props.onMouseEnter,
+    innerRef = props.innerRef,
+    breakpoint = props.breakpoint,
+    mediaCardCursor = props.mediaCardCursor,
+    disableOverlay = props.disableOverlay,
+    selected = props.selected,
+    displayBackground = props.displayBackground,
+    isPlayButtonClickable = props.isPlayButtonClickable,
+    isTickBoxSelectable = props.isTickBoxSelectable,
+    shouldDisplayTooltip = props.shouldDisplayTooltip;
+  var defaultImageCardDimensions = getDefaultCardDimensions(appearance);
+  var width = getCSSUnitValue((dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) || defaultImageCardDimensions.width);
+  var height = getCSSUnitValue((dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) || defaultImageCardDimensions.height);
+  var wrapperShadowKey = getShadowKey(disableOverlay, selected);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: "newFileExperienceWrapper"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: ax(["_2rko1l7b _vchhusvi _kqswh2mm _ect41sbm _p12f1osq _c71l1osq _1hlmuwsq _1rquusvi _eg5415te _mts3kb7n _1ntskb7n", displayBackground && "_bfhklslw", mediaCardCursor && cursorStyleMap[mediaCardCursor], wrapperShadowKey && shadowStyleMap[wrapperShadowKey], selected && "_1p1y1j28 _1rk81j28 _14r11j28 _1np21j28", isPlayButtonClickable && "_1y898vuz _19zy8vuz", isTickBoxSelectable && "_1yf91flm _1xp5rcbj", shouldDisplayTooltip && "_9m3z1osq _10pb1osq", newFileExperienceClassName]),
+    "data-testid": testId,
+    ref: innerRef,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
+  }, VcMediaWrapperProps, {
+    style: _objectSpread(_objectSpread({
+      width: width,
+      height: height
+    }, getResponsiveStyles(breakpoint)), {}, {
+      "--_1vvetkq": ix("var(--ds-background-input, ".concat(N90A, ")")),
+      "--_jz8ahf": ix("solid 2px ".concat("var(--ds-border-focused, ".concat(B100, ")"))),
+      "--_1jkcdu5": ix("var(--ds-background-neutral, ".concat(N20, ")")),
+      "--_mt8cm6": ix("var(--ds-background-input, ".concat(N0, ")")),
+      "--_13xf2t5": ix("var(--ds-icon-subtle, ".concat(N100, ")"))
+    })
+  }), props.children);
+};
+Wrapper.displayName = 'NewFileExperienceWrapper';