@atlaskit/smart-card 34.6.6 → 34.7.0

package/dist/cjs/view/EmbedCard/components/styledOld.js

@@ -0,0 +1,261 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.maxAvatarCount = exports.embedHeaderHeight = exports.ellipsis = exports.csssize = exports.className = exports.borderRadius = exports.Wrapper = exports.UsersWrapper = exports.TooltipWrapper = exports.Title = exports.Thumbnail = exports.TextWrapper = exports.ResolvedViewIconWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Description = exports.ContentWrapper = exports.Content = exports.Byline = exports.AlertWrapper = exports.ActionsWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var colors = _colors;
+var _utils = require("../../common/utils");
+var _templateObject, _templateObject2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var className = exports.className = 'media-card-frame';
+var borderRadius = exports.borderRadius = "\n  border-radius: ".concat("var(--ds-border-radius, 3px)", ";\n");
+var wrapperBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-200, 8px)", ";\n");
+var contentBorderRadius = "\n  border-radius: ".concat("var(--ds-border-radius-100, 4px)", ";\n");
+var ellipsis = exports.ellipsis = function ellipsis() {
+  var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
+  var unit = typeof maxWidth === 'number' ? 'px' : '';
+  return "\n    max-width: ".concat(maxWidth).concat(unit, ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  ");
+};
+var csssize = exports.csssize = function csssize() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
+  var unit = typeof value === 'number' ? 'px' : '';
+  return "\n    width: ".concat(value).concat(unit, ";\n    height: ").concat(value).concat(unit, ";\n  ");
+};
+function minWidth(_ref) {
+  var minWidth = _ref.minWidth;
+  if (minWidth) {
+    return "min-width: ".concat(minWidth, "px;");
+  } else {
+    return '';
+  }
+}
+function maxWidth(_ref2) {
+  var maxWidth = _ref2.maxWidth;
+  if (maxWidth) {
+    return "max-width: ".concat(maxWidth, "px; margin: 0 auto;");
+  } else {
+    return 'margin: 0 auto;';
+  }
+}
+function getInteractiveStyles(_ref3) {
+  var isInteractive = _ref3.isInteractive,
+    frameStyle = _ref3.frameStyle;
+  return isInteractive ? "\n      &:hover {\n        ".concat(frameStyle !== 'hide' && visibleStyles, "\n\n      }\n      &:active {\n        background-color: ", "var(--ds-background-selected, ".concat(colors.B50, ")"), ";\n      }\n    ") : '';
+}
+function selected(_ref4) {
+  var isSelected = _ref4.isSelected,
+    frameStyle = _ref4.frameStyle;
+  return isSelected && frameStyle !== 'hide' ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ", "var(--ds-border-selected, ".concat(colors.B100, ")"), ";\n      content: '';\n      border: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(wrapperBorderRadius, "\n    }\n    ") : isSelected && frameStyle === 'hide' ? contentBorderRadius : '';
+}
+var height = function height(_ref5) {
+  var inheritDimensions = _ref5.inheritDimensions;
+  return inheritDimensions ? 'height: 100%;' : "height: ".concat((0, _utils.gs)(54));
+};
+var wrapperStyles = function wrapperStyles(props) {
+  return "\n  ".concat(wrapperBorderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ", "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)", ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n    ").concat(wrapperBorderRadius, "\n\n    ").concat(wrapperSizing(props), "\n  }\n");
+};
+
+// if frameStyle !== 'show' then set the width of the frame to be
+// 100% of the content +16px and position it left -8px to make it appear
+// outside the container
+var wrapperSizing = function wrapperSizing(_ref6) {
+  var frameStyle = _ref6.frameStyle;
+  return frameStyle === 'show' ? "\n    box-sizing: border-box;\n    width: 100%;" : "\n    width: calc(100% + ".concat("var(--ds-space-200, 16px)", ");\n    left: ", "var(--ds-space-negative-100, -8px)", ";");
+};
+var visibleStyles = "\n  &:after {\n    border: 1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"), ";\n    background-color: ", "var(--ds-surface-raised, white)", ";\n  }\n  .embed-header {\n    opacity: 1;\n  }");
+function visible(_ref7) {
+  var frameStyle = _ref7.frameStyle;
+  return frameStyle === 'show' ? visibleStyles : '';
+}
+
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var LinkWrapper = exports.LinkWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", " &:hover {\n\t\ttext-decoration: none;\n\t}\n"])), function (props) {
+  return wrapperStyles(props);
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+var Wrapper = exports.Wrapper = _styled.default.div(function (props) {
+  return wrapperStyles(props);
+}, {
+  // We are keeping this margin as a hardcoded variable as it is not a standard token size and needs
+  // to be thoroughly checked with a designer so that we do not miss an unintended visual change
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginTop: '10px'
+});
+var embedHeaderHeight = exports.embedHeaderHeight = 32;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var Header = exports.Header = _styled.default.div({
+  height: "".concat(embedHeaderHeight, "px"),
+  position: 'absolute',
+  zIndex: 1,
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  color: "var(--ds-icon, ".concat(colors.N300, ")"),
+  opacity: 0,
+  transition: '300ms opacity cubic-bezier(0.15, 1, 0.3, 1)'
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+function (_ref8) {
+  var frameStyle = _ref8.frameStyle;
+  return frameStyle === 'show' ? "\n        box-sizing: border-box;\n        padding: 0 ".concat("var(--ds-space-100, 8px)", ";\n      ") : '';
+});
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var IconWrapper = exports.IconWrapper = _styled.default.div(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+borderRadius,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+csssize(16),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+function (_ref9) {
+  var isPlaceholder = _ref9.isPlaceholder;
+  if (isPlaceholder) {
+    return "\n\t\t\t".concat("\n      background-color: ", "var(--ds-skeleton, ".concat(colors.N30, ")"), ";\n    ");
+  } else {
+    return '';
+  }
+}, {
+  marginRight: "var(--ds-space-050, 4px)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var TextWrapper = exports.TextWrapper = _styled.default.div(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+function (_ref10) {
+  var isPlaceholder = _ref10.isPlaceholder;
+  if (isPlaceholder) {
+    return "\n        ".concat(borderRadius, "\n        width: 125px;\n        height: 12px;\n", "\n        background-color: ", "var(--ds-skeleton, ".concat(colors.N30, ")"), ";\n      ");
+  } else {
+    return '';
+  }
+}, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  color: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+ellipsis('none'));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var TooltipWrapper = exports.TooltipWrapper = _styled.default.div({
+  overflow: 'hidden'
+});
+// NB: `overflow` is kept as `hidden` since
+// the internal contents of the `iframe` should
+// manage scrolling behaviour.
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var Content = exports.Content = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\tborder: 1px solid ", ";\n\tbackground-color: ", ";\n\tposition: absolute;\n\tz-index: 1;\n\twidth: 100%;\n\ttransition: box-shadow 0.3s;\n\n\t> .calc-height > div > div {\n\t\tleft: unset !important;\n\t\twidth: unset !important;\n\t\theight: unset !important;\n\t\tposition: initial !important;\n\t\tpadding-bottom: unset !important;\n\t}\n\t> .embed-preview > div {\n\t\tmargin: 0 auto;\n\t}\n\n\t", "\n\n\t", "\n\n  ", "\n"])), contentBorderRadius, "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-surface-raised, white)", function (_ref11) {
+  var allowScrollBar = _ref11.allowScrollBar,
+    removeOverflow = _ref11.removeOverflow;
+  if (removeOverflow) {
+    return '';
+  }
+  return allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;';
+}, function (_ref12) {
+  var frameStyle = _ref12.frameStyle;
+  return frameStyle === 'show' ? "\n        width: calc(100% - ".concat("var(--ds-space-200, 16px)", " - 2px);\n        margin: 0 ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)", ";\n      ") : '';
+}, function (_ref13) {
+  var frameStyle = _ref13.frameStyle;
+  return frameStyle === 'hide' ? 'height: 100%;' : "\n        height: calc(100% - ".concat("var(--ds-space-400, 32px)", ");\n        top: ", "var(--ds-space-400, 32px)", ";\n      ");
+});
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+var Image = exports.Image = _styled.default.img(function (_ref14) {
+  var size = _ref14.size;
+  return csssize(size);
+}, borderRadius, {
+  overflow: 'hidden'
+});
+var maxAvatarCount = exports.maxAvatarCount = 6;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var ContentWrapper = exports.ContentWrapper = _styled.default.div({
+  display: 'flex',
+  flexDirection: 'row',
+  boxSizing: 'border-box',
+  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-150, 12px)")
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var Title = exports.Title = _styled.default.div({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  color: "var(--ds-text, ".concat(colors.N900, ")"),
+  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  maxHeight: "".concat(20 * 4, "px"),
+  overflow: 'hidden'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var Byline = exports.Byline = _styled.default.div({
+  marginTop: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  color: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+ellipsis('100%'));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var Description = exports.Description = _styled.default.div({
+  marginTop: "calc(".concat("var(--ds-space-100, 8px)", " - 1px)"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  color: "var(--ds-text, ".concat(colors.N800, ")"),
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  maxHeight: "".concat(18 * 3, "px"),
+  overflow: 'hidden'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var ResolvedViewIconWrapper = exports.ResolvedViewIconWrapper = _styled.default.div({
+  marginTop: "var(--ds-space-050, 4px)"
+});
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+var Thumbnail = exports.Thumbnail = _styled.default.div(borderRadius, csssize(48), function (props) {
+  return {
+    float: 'right',
+    margin: "var(--ds-space-050, 4px)".concat(" 0 ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-150, 12px)"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    backgroundColor: "var(--ds-skeleton, ".concat(colors.N30, ")"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    backgroundImage: "url(".concat(props.src, ")"),
+    backgroundSize: 'cover'
+  };
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var UsersWrapper = exports.UsersWrapper = _styled.default.div({
+  marginTop: "var(--ds-space-100, 8px)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var ActionsWrapper = exports.ActionsWrapper = _styled.default.div({
+  marginTop: "var(--ds-space-100, 8px)",
+  textAlign: 'right',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> *': {
+    marginTop: "var(--ds-space-050, 4px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> * + *': {
+    marginLeft: "var(--ds-space-050, 4px)"
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var AlertWrapper = exports.AlertWrapper = _styled.default.div({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  zIndex: maxAvatarCount + 1
+});

package/dist/cjs/view/EmbedCard/views/ErroredView.compiled.css

@@ -0,0 +1,13 @@
+._11c81il0{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18m915vq{overflow-y:hidden}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0ccj1k{display:-webkit-box}
+._1reo15vq{overflow-x:hidden}
+._1yyjkb7n{-webkit-line-clamp:1}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._c71l183y{max-height:21px}
+._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
+._sudp1e54{-webkit-box-orient:vertical}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/cjs/view/EmbedCard/views/ErroredView.js

@@ -1,69 +1,61 @@
+/* ErroredView.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmbedCardErroredView = void 0;
-var _react = require("@emotion/react");
+require("./ErroredView.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../messages");
-var _utils = require("../../common/utils");
 var _ErrorFrame = require("../components/ErrorFrame");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var messageStyles = (0, _react.css)({
-  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-regular, 400)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginLeft: (0, _utils.gs)(0.5),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  marginRight: (0, _utils.gs)(0.5),
-  display: '-webkit-box',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  WebkitLineClamp: 1,
-  WebkitBoxOrient: 'vertical',
-  // Fallback options.
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  maxHeight: (0, _utils.gs)(3)
-});
-var boxStyles = (0, _primitives.xcss)({
-  paddingLeft: 'space.050',
-  paddingRight: 'space.050'
-});
-var EmbedCardErroredView = exports.EmbedCardErroredView = function EmbedCardErroredView(_ref) {
+var _ErroredViewOld = require("./ErroredViewOld");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  messageStyles: "_11c81il0 _1reo15vq _18m915vq _k48pi7a9 _18u01b66 _2hwx1b66 _1e0ccj1k _1yyjkb7n _sudp1e54 _1bto1l2s _c71l183y",
+  boxStyles: "_19bv1b66 _u5f31b66"
+};
+var EmbedCardErroredViewNew = function EmbedCardErroredViewNew(_ref) {
   var onRetry = _ref.onRetry,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'embed-card-errored-view' : _ref$testId,
     inheritDimensions = _ref.inheritDimensions;
-  return (0, _react.jsx)(_ErrorFrame.Frame, {
+  return /*#__PURE__*/React.createElement(_ErrorFrame.Frame, {
     inheritDimensions: inheritDimensions,
     compact: true,
     isSelected: isSelected,
     testId: testId
-  }, (0, _react.jsx)(_error.default, {
+  }, /*#__PURE__*/React.createElement(_error.default, {
     LEGACY_size: "small",
     color: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
     label: "error-icon"
-  }), (0, _react.jsx)(_primitives.Box, {
-    xcss: boxStyles
-  }, (0, _react.jsx)(_primitives.Inline, {
-    xcss: messageStyles
-  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.could_not_load_link))), (0, _react.jsx)(_button.default, {
+  }), /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.boxStyles
+  }, /*#__PURE__*/React.createElement(_compiled.Inline, {
+    xcss: styles.messageStyles
+  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.messages.could_not_load_link))), /*#__PURE__*/React.createElement(_button.default, {
     testId: "err-view-retry",
     appearance: "link",
     spacing: "none",
     onClick: onRetry
-  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.try_again)));
+  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again)));
+};
+var EmbedCardErroredView = exports.EmbedCardErroredView = function EmbedCardErroredView(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(EmbedCardErroredViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_ErroredViewOld.EmbedCardErroredViewOld, props);
+  }
 };

package/dist/cjs/view/EmbedCard/views/ErroredViewOld.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmbedCardErroredViewOld = void 0;
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
+var _primitives = require("@atlaskit/primitives");
+var _colors = require("@atlaskit/theme/colors");
+var _messages = require("../../../messages");
+var _utils = require("../../common/utils");
+var _ErrorFrame = require("../components/ErrorFrame");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var messageStyles = (0, _react.css)({
+  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-regular, 400)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginLeft: (0, _utils.gs)(0.5),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginRight: (0, _utils.gs)(0.5),
+  display: '-webkit-box',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: 'vertical',
+  // Fallback options.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  maxHeight: (0, _utils.gs)(3)
+});
+var boxStyles = (0, _primitives.xcss)({
+  paddingLeft: 'space.050',
+  paddingRight: 'space.050'
+});
+var EmbedCardErroredViewOld = exports.EmbedCardErroredViewOld = function EmbedCardErroredViewOld(_ref) {
+  var onRetry = _ref.onRetry,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'embed-card-errored-view' : _ref$testId,
+    inheritDimensions = _ref.inheritDimensions;
+  return (0, _react.jsx)(_ErrorFrame.Frame, {
+    inheritDimensions: inheritDimensions,
+    compact: true,
+    isSelected: isSelected,
+    testId: testId
+  }, (0, _react.jsx)(_error.default, {
+    LEGACY_size: "small",
+    color: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
+    label: "error-icon"
+  }), (0, _react.jsx)(_primitives.Box, {
+    xcss: boxStyles
+  }, (0, _react.jsx)(_primitives.Inline, {
+    xcss: messageStyles
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.could_not_load_link))), (0, _react.jsx)(_button.default, {
+    testId: "err-view-retry",
+    appearance: "link",
+    spacing: "none",
+    onClick: onRetry
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.try_again)));
+};

package/dist/cjs/view/EmbedCard/views/ResolvedView.js

@@ -5,22 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmbedCardResolvedView = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tokens = require("@atlaskit/tokens");
 var _utils = require("../../../utils");
 var _ExpandedFrame = require("../components/ExpandedFrame");
 var _Frame = require("../components/Frame");
 var _ImageIcon = require("../components/ImageIcon");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.default.forwardRef(function (_ref, embedIframeRef) {
+var _ResolvedViewOld = require("./ResolvedViewOld");
+var EmbedCardResolvedViewNew = /*#__PURE__*/_react.default.forwardRef(function (_ref, embedIframeRef) {
   var link = _ref.link,
     context = _ref.context,
     onClick = _ref.onClick,
@@ -39,7 +34,7 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.
   var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
   var text = title || (context === null || context === void 0 ? void 0 : context.text);
   var linkGlyph = _react.default.useMemo(function () {
-    return (0, _react2.jsx)(_link.default, {
+    return /*#__PURE__*/_react.default.createElement(_link.default, {
       label: "icon",
       LEGACY_size: "small",
       testId: "embed-card-fallback-icon",
@@ -50,7 +45,7 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.
     if ( /*#__PURE__*/_react.default.isValidElement(iconFromContext)) {
       return iconFromContext;
     }
-    return (0, _react2.jsx)(_ImageIcon.ImageIcon, {
+    return /*#__PURE__*/_react.default.createElement(_ImageIcon.ImageIcon, {
       src: src,
       default: linkGlyph
     });
@@ -60,7 +55,7 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.
   if (previewUrl && isSupportTheming) {
     previewUrl = (0, _utils.getPreviewUrlWithTheme)(previewUrl, themeState);
   }
-  return (0, _react2.jsx)(_ExpandedFrame.ExpandedFrame, {
+  return /*#__PURE__*/_react.default.createElement(_ExpandedFrame.ExpandedFrame, {
     isSelected: isSelected,
     frameStyle: frameStyle,
     href: link,
@@ -70,7 +65,7 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.
     onClick: onClick,
     inheritDimensions: inheritDimensions,
     setOverflow: false
-  }, (0, _react2.jsx)(_Frame.Frame, {
+  }, /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
     url: previewUrl,
     isTrusted: isTrusted,
     testId: testId,
@@ -79,4 +74,15 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.
     onIframeFocus: onIframeFocus,
     title: text
   }));
+});
+var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(EmbedCardResolvedViewNew, (0, _extends2.default)({}, props, {
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_ResolvedViewOld.EmbedCardResolvedViewOld, (0, _extends2.default)({}, props, {
+      ref: ref
+    }));
+  }
 });

package/dist/cjs/view/EmbedCard/views/ResolvedViewOld.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmbedCardResolvedViewOld = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
+var _tokens = require("@atlaskit/tokens");
+var _utils = require("../../../utils");
+var _ExpandedFrame = require("../components/ExpandedFrame");
+var _Frame = require("../components/Frame");
+var _ImageIcon = require("../components/ImageIcon");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var EmbedCardResolvedViewOld = exports.EmbedCardResolvedViewOld = /*#__PURE__*/_react.default.forwardRef(function (_ref, embedIframeRef) {
+  var link = _ref.link,
+    context = _ref.context,
+    onClick = _ref.onClick,
+    isSelected = _ref.isSelected,
+    frameStyle = _ref.frameStyle,
+    preview = _ref.preview,
+    title = _ref.title,
+    isTrusted = _ref.isTrusted,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'embed-card-resolved-view' : _ref$testId,
+    inheritDimensions = _ref.inheritDimensions,
+    onIframeDwell = _ref.onIframeDwell,
+    onIframeFocus = _ref.onIframeFocus,
+    isSupportTheming = _ref.isSupportTheming;
+  var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
+  var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
+  var text = title || (context === null || context === void 0 ? void 0 : context.text);
+  var linkGlyph = _react.default.useMemo(function () {
+    return (0, _react2.jsx)(_link.default, {
+      label: "icon",
+      LEGACY_size: "small",
+      testId: "embed-card-fallback-icon",
+      color: "currentColor"
+    });
+  }, []);
+  var icon = _react.default.useMemo(function () {
+    if ( /*#__PURE__*/_react.default.isValidElement(iconFromContext)) {
+      return iconFromContext;
+    }
+    return (0, _react2.jsx)(_ImageIcon.ImageIcon, {
+      src: src,
+      default: linkGlyph
+    });
+  }, [src, linkGlyph, iconFromContext]);
+  var themeState = (0, _tokens.useThemeObserver)();
+  var previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
+  if (previewUrl && isSupportTheming) {
+    previewUrl = (0, _utils.getPreviewUrlWithTheme)(previewUrl, themeState);
+  }
+  return (0, _react2.jsx)(_ExpandedFrame.ExpandedFrame, {
+    isSelected: isSelected,
+    frameStyle: frameStyle,
+    href: link,
+    testId: testId,
+    icon: icon,
+    text: text,
+    onClick: onClick,
+    inheritDimensions: inheritDimensions,
+    setOverflow: false
+  }, (0, _react2.jsx)(_Frame.Frame, {
+    url: previewUrl,
+    isTrusted: isTrusted,
+    testId: testId,
+    ref: embedIframeRef,
+    onIframeDwell: onIframeDwell,
+    onIframeFocus: onIframeFocus,
+    title: text
+  }));
+});