@atlaskit/smart-card 34.6.6 → 34.7.0

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

@@ -1,3 +1,4 @@
+/* styled.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,257 +6,219 @@ 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
+exports.embedHeaderHeight = exports.className = exports.Wrapper = exports.TooltipWrapper = exports.Thumbnail = exports.TextWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Content = void 0;
+require("./styled.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _colors = require("@atlaskit/theme/colors");
+var _excluded = ["as", "style"],
+  _excluded2 = ["isSelected", "frameStyle", "minWidth", "maxWidth", "isInteractive", "inheritDimensions"],
+  _excluded3 = ["as", "style"],
+  _excluded4 = ["isSelected", "frameStyle", "minWidth", "maxWidth", "isInteractive", "inheritDimensions"],
+  _excluded5 = ["as", "style"],
+  _excluded6 = ["frameStyle"],
+  _excluded7 = ["as", "style"],
+  _excluded8 = ["isPlaceholder"],
+  _excluded9 = ["as", "style"],
+  _excluded10 = ["isPlaceholder"],
+  _excluded11 = ["as", "style"],
+  _excluded12 = ["as", "style"],
+  _excluded13 = ["removeOverflow", "allowScrollBar", "frameStyle"],
+  _excluded14 = ["as", "style"],
+  _excluded15 = ["as", "style"];
+/* eslint-disable @atlaskit/ui-styling-standard/no-dynamic-styles */
 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; }
+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) { (0, _defineProperty2.default)(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; }
 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
+var LinkWrapper = exports.LinkWrapper = (0, _react.forwardRef)(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "div" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var isSelected = __cmplp.isSelected,
+    frameStyle = __cmplp.frameStyle,
+    minWidth = __cmplp.minWidth,
+    maxWidth = __cmplp.maxWidth,
+    isInteractive = __cmplp.isInteractive,
+    inheritDimensions = __cmplp.inheritDimensions,
+    __cmpldp = (0, _objectWithoutProperties2.default)(__cmplp, _excluded2);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmpldp, {
+    style: _objectSpread(_objectSpread({}, __cmpls), {}, {
+      "--_10q0298": (0, _runtime.ix)(__cmplp.minWidth, "px"),
+      "--_1et2rhb": (0, _runtime.ix)(__cmplp.maxWidth, "px")
+    }),
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_19pkidpf _2hwx1wug _otyridpf _18u01wug _v5641y8x _1e0c116y _2lx21bp4 _vchhusvi _ect41sbm _1bsb1osq _uiztglyw _vwz44jg8 _kqswh2mm _qc5o94zs _14mjpd34 _aetrb3bt _18postnw _1qdg1rgy _9oik18uv _1bnxglyw _jf4cnqa1", __cmplp.isSelected && __cmplp.frameStyle === 'hide' ? "_2rkoiti9" : "_2rkopd34", __cmplp.minWidth && "_1ul91pd6", __cmplp.maxWidth && "_p12f1ayu", __cmplp.isInteractive && __cmplp.frameStyle !== 'hide' && "_1u3rh6cr", __cmplp.isInteractive && __cmplp.frameStyle !== 'hide' && "_4tpuhp5a", __cmplp.isInteractive && __cmplp.frameStyle !== 'hide' ? "_x148kb7n" : "_x148idpf", __cmplp.isInteractive && "_1di629zg", __cmplp.frameStyle === 'show' || __cmplp.isSelected && __cmplp.frameStyle !== 'hide' ? "_1ifikb7n" : "_1ifiidpf", __cmplp.inheritDimensions ? "_4t3i1osq" : "_4t3ik5xz", __cmplp.frameStyle === 'show' && "_631ousvi", __cmplp.frameStyle === 'show' ? "_z0ai1osq" : "_z0aie9lw", __cmplp.frameStyle !== 'show' ? "_19dox0bf" : __cmplp.isSelected ? "_19doidpf" : "_19do1kw7", __cmplp.frameStyle === 'show' || __cmplp.isSelected && __cmplp.frameStyle !== 'hide' ? "_eq43h6cr" : "_eq431kw7", __cmplp.frameStyle === 'show' || __cmplp.isSelected && __cmplp.frameStyle !== 'hide' ? "_1hfkhp5a" : "_1hfk1kw7", __cmplp.isSelected && __cmplp.frameStyle !== 'hide' ? "_6syztlke" : "_6syz1kw7", __cmplp.isSelected && __cmplp.frameStyle !== 'hide' ? "_8x3umqxb" : "_8x3u1kw7", __cmplp.className])
+  }));
 });
 
-// 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'
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
+if (process.env.NODE_ENV !== 'production') {
+  LinkWrapper.displayName = 'LinkWrapper';
+}
+var Wrapper = exports.Wrapper = (0, _react.forwardRef)(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "div" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref2, _excluded3);
+  var isSelected = __cmplp.isSelected,
+    frameStyle = __cmplp.frameStyle,
+    minWidth = __cmplp.minWidth,
+    maxWidth = __cmplp.maxWidth,
+    isInteractive = __cmplp.isInteractive,
+    inheritDimensions = __cmplp.inheritDimensions,
+    __cmpldp = (0, _objectWithoutProperties2.default)(__cmplp, _excluded4);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmpldp, {
+    style: _objectSpread(_objectSpread({}, __cmpls), {}, {
+      "--_10q0298": (0, _runtime.ix)(__cmplp.minWidth, "px"),
+      "--_1et2rhb": (0, _runtime.ix)(__cmplp.maxWidth, "px")
+    }),
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_19pkidpf _2hwx1wug _otyridpf _18u01wug _v5641y8x _1e0c116y _2lx21bp4 _vchhusvi _ect41sbm _1bsb1osq _uiztglyw _vwz44jg8 _kqswh2mm _19pk19bv _qc5o94zs _14mjpd34 _aetrb3bt _18postnw _1qdg1rgy", __cmplp.isSelected && __cmplp.frameStyle === 'hide' ? "_2rkoiti9" : "_2rkopd34", __cmplp.minWidth && "_1ul91pd6", __cmplp.maxWidth && "_p12f1ayu", __cmplp.isInteractive && __cmplp.frameStyle !== 'hide' && "_1u3rh6cr", __cmplp.isInteractive && __cmplp.frameStyle !== 'hide' && "_4tpuhp5a", __cmplp.isInteractive && __cmplp.frameStyle !== 'hide' ? "_x148kb7n" : "_x148idpf", __cmplp.isInteractive && "_1di629zg", __cmplp.frameStyle === 'show' || __cmplp.isSelected && __cmplp.frameStyle !== 'hide' ? "_1ifikb7n" : "_1ifiidpf", __cmplp.inheritDimensions ? "_4t3i1osq" : "_4t3ik5xz", __cmplp.frameStyle === 'show' && "_631ousvi", __cmplp.frameStyle === 'show' ? "_z0ai1osq" : "_z0aie9lw", __cmplp.frameStyle !== 'show' ? "_19dox0bf" : __cmplp.isSelected ? "_19doidpf" : "_19do1kw7", __cmplp.frameStyle === 'show' || __cmplp.isSelected && __cmplp.frameStyle !== 'hide' ? "_eq43h6cr" : "_eq431kw7", __cmplp.frameStyle === 'show' ? "_1hfkhp5a" : "_1hfk1kw7", __cmplp.isSelected && __cmplp.frameStyle !== 'hide' ? "_6syztlke" : "_6syz1kw7", __cmplp.isSelected && __cmplp.frameStyle !== 'hide' ? "_8x3umqxb" : "_8x3u1kw7", __cmplp.className])
+  }));
 });
-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
+if (process.env.NODE_ENV !== 'production') {
+  Wrapper.displayName = 'Wrapper';
+}
+var Header = exports.Header = (0, _react.forwardRef)(function (_ref3, __cmplr) {
+  var _ref3$as = _ref3.as,
+    C = _ref3$as === void 0 ? "div" : _ref3$as,
+    __cmpls = _ref3.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref3, _excluded5);
+  var frameStyle = __cmplp.frameStyle,
+    __cmpldp = (0, _objectWithoutProperties2.default)(__cmplp, _excluded6);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmpldp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_v564ojwh _4t3izwfg _kqswstnw _1pbykb7n _1bsb1osq _1e0c1txw _4cvr1h6o _syazqjbk _tzy4idpf", __cmplp.frameStyle === 'show' && "_vchhusvi", __cmplp.frameStyle === 'show' && "_1yt4h8dc", __cmplp.className])
+  }));
 });
 
-// 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
+if (process.env.NODE_ENV !== 'production') {
+  Header.displayName = 'Header';
+}
+var IconWrapper = exports.IconWrapper = (0, _react.forwardRef)(function (_ref4, __cmplr) {
+  var _ref4$as = _ref4.as,
+    C = _ref4$as === void 0 ? "div" : _ref4$as,
+    __cmpls = _ref4.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref4, _excluded7);
+  var isPlaceholder = __cmplp.isPlaceholder,
+    __cmpldp = (0, _objectWithoutProperties2.default)(__cmplp, _excluded8);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmpldp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_2rko1sit _1bsb7vkz _4t3i7vkz _2hwx1b66", __cmplp.isPlaceholder && "_bfhkqrzy", __cmplp.className])
+  }));
 });
 
-// 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
+if (process.env.NODE_ENV !== 'production') {
+  IconWrapper.displayName = 'IconWrapper';
+}
+var TextWrapper = exports.TextWrapper = (0, _react.forwardRef)(function (_ref5, __cmplr) {
+  var _ref5$as = _ref5.as,
+    C = _ref5$as === void 0 ? "div" : _ref5$as,
+    __cmpls = _ref5.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref5, _excluded9);
+  var isPlaceholder = __cmplp.isPlaceholder,
+    __cmpldp = (0, _objectWithoutProperties2.default)(__cmplp, _excluded10);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmpldp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_11c8qk37 _1reo15vq _18m915vq _syaz1rc1 _1bto1l2s _o5721q9c", __cmplp.isPlaceholder && "_2rko1sit", __cmplp.isPlaceholder && "_1bsb176v", __cmplp.isPlaceholder && "_4t3i1crf", __cmplp.isPlaceholder && "_bfhkqrzy", __cmplp.className])
+  }));
 });
 
-// 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
+if (process.env.NODE_ENV !== 'production') {
+  TextWrapper.displayName = 'TextWrapper';
+}
+var TooltipWrapper = exports.TooltipWrapper = (0, _react.forwardRef)(function (_ref6, __cmplr) {
+  var _ref6$as = _ref6.as,
+    C = _ref6$as === void 0 ? "div" : _ref6$as,
+    __cmpls = _ref6.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref6, _excluded11);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq", __cmplp.className])
+  }));
 });
 
-// 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)"
+// NB: `overflow` is kept as `hidden` since
+// the internal contents of the `iframe` should
+// manage scrolling behaviour.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
+if (process.env.NODE_ENV !== 'production') {
+  TooltipWrapper.displayName = 'TooltipWrapper';
+}
+var Content = exports.Content = (0, _react.forwardRef)(function (_ref7, __cmplr) {
+  var _ref7$as = _ref7.as,
+    C = _ref7$as === void 0 ? "div" : _ref7$as,
+    __cmpls = _ref7.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref7, _excluded12);
+  var removeOverflow = __cmplp.removeOverflow,
+    allowScrollBar = __cmplp.allowScrollBar,
+    frameStyle = __cmplp.frameStyle,
+    __cmpldp = (0, _objectWithoutProperties2.default)(__cmplp, _excluded13);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmpldp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_2rkoiti9 _19ith6cr _v56414ba _bfhkhp5a _kqswstnw _1pbykb7n _hlq8idpf _rd9b1wug _1g4jidpf _jk3p1wug", !__cmplp.removeOverflow && (__cmplp.allowScrollBar ? "_1reo1wug _18m91wug" : "_1reo15vq _18m915vq"), __cmplp.frameStyle === 'show' ? "_1bsbwgg2" : "_1bsb1osq", __cmplp.frameStyle === 'show' && "_18s81xf9", __cmplp.frameStyle === 'hide' ? "_4t3i1osq" : "_4t3i1j2a", __cmplp.frameStyle !== 'hide' && "_154ixy5q", __cmplp.className])
+  }));
 });
+if (process.env.NODE_ENV !== 'production') {
+  Content.displayName = 'Content';
+}
+var getSizeWithUnit = function getSizeWithUnit() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
+  var unit = typeof value === 'number' ? 'px' : '';
+  return "".concat(value).concat(unit);
+};
 
-// 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
+var Image = exports.Image = (0, _react.forwardRef)(function (_ref8, __cmplr) {
+  var _ref8$as = _ref8.as,
+    C = _ref8$as === void 0 ? "img" : _ref8$as,
+    __cmpls = _ref8.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref8, _excluded14);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: _objectSpread(_objectSpread({}, __cmpls), {}, {
+      "--_rcxkve": (0, _runtime.ix)(getSizeWithUnit(__cmplp.size))
+    }),
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_2rko1sit _1reo15vq _18m915vq _1bsb17ym _4t3i17ym", __cmplp.className])
+  }));
 });
 
-// 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
-});
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
+if (process.env.NODE_ENV !== 'production') {
+  Image.displayName = 'Image';
+}
+var Thumbnail = exports.Thumbnail = (0, _react.forwardRef)(function (_ref9, __cmplr) {
+  var _ref9$as = _ref9.as,
+    C = _ref9$as === void 0 ? "div" : _ref9$as,
+    __cmpls = _ref9.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref9, _excluded15);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: _objectSpread(_objectSpread({}, __cmpls), {}, {
+      "--_13orr8u": (0, _runtime.ix)("url(".concat(__cmplp.src, ")"))
+    }),
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_2rko1sit _18s81cq1 _1bsbckbl _4t3ickbl _1aaxusic _bfhkqrzy _1lrw1dfr _1itk2pcs", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Thumbnail.displayName = 'Thumbnail';
+}