@atlaskit/smart-card 34.6.6 → 34.7.0

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

@@ -1,362 +1,211 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-import * as colors from '@atlaskit/theme/colors';
-import { N40 } from '@atlaskit/theme/colors';
-import { gs as gridSize } from '../../common/utils';
+/* styled.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./styled.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+/* eslint-disable @atlaskit/ui-styling-standard/no-dynamic-styles */
+
+import { B100, B50, N30, N300, N40 } from '@atlaskit/theme/colors';
 export const className = 'media-card-frame';
-export const borderRadius = `
-  border-radius: ${"var(--ds-border-radius, 3px)"};
-`;
-const wrapperBorderRadius = `
-  border-radius: ${"var(--ds-border-radius-200, 8px)"};
-`;
-const contentBorderRadius = `
-  border-radius: ${"var(--ds-border-radius-100, 4px)"};
-`;
-export const ellipsis = (maxWidth = '100%') => {
-  const unit = typeof maxWidth === 'number' ? 'px' : '';
-  return `
-    max-width: ${maxWidth}${unit};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `;
-};
-export const csssize = (value = '100%') => {
-  const unit = typeof value === 'number' ? 'px' : '';
-  return `
-    width: ${value}${unit};
-    height: ${value}${unit};
-  `;
-};
-function minWidth({
-  minWidth
-}) {
-  if (minWidth) {
-    return `min-width: ${minWidth}px;`;
-  } else {
-    return '';
-  }
-}
-function maxWidth({
-  maxWidth
-}) {
-  if (maxWidth) {
-    return `max-width: ${maxWidth}px; margin: 0 auto;`;
-  } else {
-    return 'margin: 0 auto;';
-  }
-}
-function getInteractiveStyles({
-  isInteractive,
-  frameStyle
-}) {
-  return isInteractive ? `
-      &:hover {
-        ${frameStyle !== 'hide' && visibleStyles}
-
-      }
-      &:active {
-        background-color: ${`var(--ds-background-selected, ${colors.B50})`};
-      }
-    ` : '';
-}
-function selected({
-  isSelected,
-  frameStyle
-}) {
-  return isSelected && frameStyle !== 'hide' ? `
-    ${visibleStyles}
-    &::after {
-      cursor: pointer;
-      box-shadow: 0 0 0 3px ${`var(--ds-border-selected, ${colors.B100})`};
-      content: '';
-      border: none;
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      left: 0;
-      ${wrapperBorderRadius}
-    }
-    ` : isSelected && frameStyle === 'hide' ? contentBorderRadius : '';
-}
-const height = ({
-  inheritDimensions
-}) => inheritDimensions ? 'height: 100%;' : `height: ${gridSize(54)}`;
-const wrapperStyles = props => `
-  ${wrapperBorderRadius}
-  ${minWidth(props)}
-  ${maxWidth(props)}
-  ${getInteractiveStyles(props)}
-  ${visible(props)}
-  display: inline-flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  font-family: ${"var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"};
-  width: 100%;
-  user-select: none;
-  line-height: initial;
-  transition: background 0.3s;
-  position: relative;
-  ${height(props)};
-  ${selected(props)}
-
-  &:after {
-    content: '';
-    transition: background 0.3s, box-shadow 0.3s;
-    position: absolute;
-    height: calc(100% + ${"var(--ds-space-100, 8px)"});
-    ${wrapperBorderRadius}
-
-    ${wrapperSizing(props)}
-  }
-`;
-
-// 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
-const wrapperSizing = ({
-  frameStyle
-}) => frameStyle === 'show' ? `
-    box-sizing: border-box;
-    width: 100%;` : `
-    width: calc(100% + ${"var(--ds-space-200, 16px)"});
-    left: ${"var(--ds-space-negative-100, -8px)"};`;
-const visibleStyles = `
-  &:after {
-    border: 1px solid ${`var(--ds-border, ${N40})`};
-    background-color: ${"var(--ds-surface-raised, white)"};
-  }
-  .embed-header {
-    opacity: 1;
-  }`;
-function visible({
-  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
-export const LinkWrapper = styled.div`
-	${props => wrapperStyles(props)} &:hover {
-		text-decoration: none;
-	}
-`;
-
-// 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
-export const Wrapper = styled.div(props => 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'
-});
 export const embedHeaderHeight = 32;
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const Header = styled.div({
-  height: `${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, ${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
-({
-  frameStyle
-}) => frameStyle === 'show' ? `
-        box-sizing: border-box;
-        padding: 0 ${"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
-export const IconWrapper = styled.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
-({
-  isPlaceholder
-}) => {
-  if (isPlaceholder) {
-    return `
-			${/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */''}
-      background-color: ${`var(--ds-skeleton, ${colors.N30})`};
-    `;
-  } 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
+export const LinkWrapper = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  const {
+    isSelected,
+    frameStyle,
+    minWidth,
+    maxWidth,
+    isInteractive,
+    inheritDimensions,
+    ...__cmpldp
+  } = __cmplp;
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmpldp, {
+    style: {
+      ...__cmpls,
+      "--_10q0298": ix(__cmplp.minWidth, "px"),
+      "--_1et2rhb": ix(__cmplp.maxWidth, "px")
+    },
+    ref: __cmplr,
+    className: 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
-export const TextWrapper = styled.div(
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-({
-  isPlaceholder
-}) => {
-  if (isPlaceholder) {
-    return `
-        ${borderRadius}
-        width: 125px;
-        height: 12px;
-${/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */''}
-        background-color: ${`var(--ds-skeleton, ${colors.N30})`};
-      `;
-  } else {
-    return '';
-  }
-}, {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text-subtlest, ${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
-export const TooltipWrapper = styled.div({
-  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';
+}
+export const Wrapper = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  const {
+    isSelected,
+    frameStyle,
+    minWidth,
+    maxWidth,
+    isInteractive,
+    inheritDimensions,
+    ...__cmpldp
+  } = __cmplp;
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmpldp, {
+    style: {
+      ...__cmpls,
+      "--_10q0298": ix(__cmplp.minWidth, "px"),
+      "--_1et2rhb": ix(__cmplp.maxWidth, "px")
+    },
+    ref: __cmplr,
+    className: 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])
+  }));
 });
-// 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
-export const Content = styled.div`
-	${contentBorderRadius};
-	border: 1px solid ${`var(--ds-border, ${N40})`};
-	background-color: ${"var(--ds-surface-raised, white)"};
-	position: absolute;
-	z-index: 1;
-	width: 100%;
-	transition: box-shadow 0.3s;
-
-	> .calc-height > div > div {
-		left: unset !important;
-		width: unset !important;
-		height: unset !important;
-		position: initial !important;
-		padding-bottom: unset !important;
-	}
-	> .embed-preview > div {
-		margin: 0 auto;
-	}
-
-	${({
-  allowScrollBar,
-  removeOverflow
-}) => {
-  if (removeOverflow) {
-    return '';
-  }
-  return allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;';
-}}
 
-	${({
-  frameStyle
-}) => frameStyle === 'show' ? `
-        width: calc(100% - ${"var(--ds-space-200, 16px)"} - 2px);
-        margin: 0 ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"};
-      ` : ''}
-
-  ${({
-  frameStyle
-}) => frameStyle === 'hide' ? 'height: 100%;' : `
-        height: calc(100% - ${"var(--ds-space-400, 32px)"});
-        top: ${"var(--ds-space-400, 32px)"};
-      `}
-`;
-// 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
-export const Image = styled.img(({
-  size
-}) => 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') {
+  Wrapper.displayName = 'Wrapper';
+}
+export const Header = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  const {
+    frameStyle,
+    ...__cmpldp
+  } = __cmplp;
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmpldp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_v564ojwh _4t3izwfg _kqswstnw _1pbykb7n _1bsb1osq _1e0c1txw _4cvr1h6o _syazqjbk _tzy4idpf", __cmplp.frameStyle === 'show' && "_vchhusvi", __cmplp.frameStyle === 'show' && "_1yt4h8dc", __cmplp.className])
+  }));
 });
-export const maxAvatarCount = 6;
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const ContentWrapper = styled.div({
-  display: 'flex',
-  flexDirection: 'row',
-  boxSizing: 'border-box',
-  padding: `${"var(--ds-space-100, 8px)"} ${"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') {
+  Header.displayName = 'Header';
+}
+export const IconWrapper = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  const {
+    isPlaceholder,
+    ...__cmpldp
+  } = __cmplp;
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmpldp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: 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
-export const Title = styled.div({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  color: `var(--ds-text, ${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: `${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') {
+  IconWrapper.displayName = 'IconWrapper';
+}
+export const TextWrapper = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  const {
+    isPlaceholder,
+    ...__cmpldp
+  } = __cmplp;
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmpldp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: 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
-export const Byline = styled.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, ${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
-export const Description = styled.div({
-  marginTop: `calc(${"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, ${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: `${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') {
+  TextWrapper.displayName = 'TextWrapper';
+}
+export const TooltipWrapper = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: 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
-export const ResolvedViewIconWrapper = styled.div({
-  marginTop: "var(--ds-space-050, 4px)"
+// 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';
+}
+export const Content = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  const {
+    removeOverflow,
+    allowScrollBar,
+    frameStyle,
+    ...__cmpldp
+  } = __cmplp;
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmpldp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: 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])
+  }));
 });
-// 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
-export const Thumbnail = styled.div(borderRadius, csssize(48), props => ({
-  float: 'right',
-  margin: `${"var(--ds-space-050, 4px)"} 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, ${colors.N30})`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundImage: `url(${props.src})`,
-  backgroundSize: 'cover'
-}));
+if (process.env.NODE_ENV !== 'production') {
+  Content.displayName = 'Content';
+}
+const getSizeWithUnit = (value = '100%') => {
+  const unit = typeof value === 'number' ? 'px' : '';
+  return `${value}${unit}`;
+};
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const UsersWrapper = styled.div({
-  marginTop: "var(--ds-space-100, 8px)"
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
+export const Image = forwardRef(({
+  as: C = "img",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: {
+      ...__cmpls,
+      "--_rcxkve": ix(getSizeWithUnit(__cmplp.size))
+    },
+    ref: __cmplr,
+    className: 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
-export const ActionsWrapper = styled.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
+if (process.env.NODE_ENV !== 'production') {
+  Image.displayName = 'Image';
+}
+export const Thumbnail = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: {
+      ...__cmpls,
+      "--_13orr8u": ix(`url(${__cmplp.src})`)
+    },
+    ref: __cmplr,
+    className: ax(["_2rko1sit _18s81cq1 _1bsbckbl _4t3ickbl _1aaxusic _bfhkqrzy _1lrw1dfr _1itk2pcs", __cmplp.className])
+  }));
 });
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const AlertWrapper = styled.div({
-  position: 'absolute',
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  overflow: 'hidden',
-  pointerEvents: 'none',
-  zIndex: maxAvatarCount + 1
-});
+if (process.env.NODE_ENV !== 'production') {
+  Thumbnail.displayName = 'Thumbnail';
+}