@atlaskit/smart-card 34.1.1 → 34.2.0

package/dist/esm/view/EmbedCard/components/IFrame.js

@@ -1,15 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["childRef"];
+var _excluded = ["childRef", "className"];
 import React from 'react';
 /**
  * Iframe element isolated for DI purposes
  */
 export var IFrame = function IFrame(_ref) {
   var childRef = _ref.childRef,
+    className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
-  // eslint-disable-next-line jsx-a11y/iframe-has-title
-  return /*#__PURE__*/React.createElement("iframe", _extends({}, props, {
+  // eslint-disable-next-line jsx-a11y/iframe-has-title,@atlaskit/ui-styling-standard/no-classname-prop
+  return /*#__PURE__*/React.createElement("iframe", _extends({
+    className: className
+  }, props, {
     ref: childRef
   }));
 };

package/dist/esm/view/EmbedModal/components/embed-content/index.compiled.css

@@ -0,0 +1,2 @@
+._1bsb1osq{width:100%}
+._4t3i815d{height:calc(100vh - 13pc)}

package/dist/esm/view/EmbedModal/components/embed-content/index.js

@@ -1,16 +1,14 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { di } from 'react-magnetic-di';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getIframeSandboxAttribute } from '../../../../utils';
 import { IFrame } from '../../../EmbedCard/components/IFrame';
-var iframeCss = css({
-  width: '100%',
-  height: 'calc(100vh - 208px)'
-});
+import EmbedContentOld from './indexOld';
+var iframeCss = null;
 var EmbedContent = function EmbedContent(_ref) {
   var isTrusted = _ref.isTrusted,
     name = _ref.name,
@@ -18,13 +16,21 @@ var EmbedContent = function EmbedContent(_ref) {
     testId = _ref.testId;
   var sandbox = getIframeSandboxAttribute(isTrusted);
   var props = {
-    css: iframeCss,
     frameBorder: 0,
     name: name,
     sandbox: sandbox,
     src: src,
     'data-testid': "".concat(testId, "-embed")
   };
-  return jsx(IFrame, props);
+  return /*#__PURE__*/React.createElement(IFrame, _extends({}, props, {
+    className: ax(["_1bsb1osq _4t3i815d"])
+  }));
 };
-export default EmbedContent;
+var Exported = function Exported(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(EmbedContent, props);
+  } else {
+    return /*#__PURE__*/React.createElement(EmbedContentOld, props);
+  }
+};
+export default Exported;

package/dist/esm/view/EmbedModal/components/embed-content/indexOld.js

@@ -0,0 +1,30 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { di } from 'react-magnetic-di';
+import { getIframeSandboxAttribute } from '../../../../utils';
+import { IFrame } from '../../../EmbedCard/components/IFrame';
+var iframeCss = css({
+  width: '100%',
+  height: 'calc(100vh - 208px)'
+});
+var EmbedContent = function EmbedContent(_ref) {
+  var isTrusted = _ref.isTrusted,
+    name = _ref.name,
+    src = _ref.src,
+    testId = _ref.testId;
+  var sandbox = getIframeSandboxAttribute(isTrusted);
+  var props = {
+    css: iframeCss,
+    frameBorder: 0,
+    name: name,
+    sandbox: sandbox,
+    src: src,
+    'data-testid': "".concat(testId, "-embed")
+  };
+  return jsx(IFrame, props);
+};
+export default EmbedContent;

package/dist/esm/view/EmbedModal/components/link-info/index.compiled.css

@@ -0,0 +1,35 @@
+
+._1umo1bk4 h3{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._101p15vq h3{overflow-x:hidden}
+._12bo15vq h3{overflow-y:hidden}
+._16jlidpf{flex-grow:0}
+._16jlkb7n{flex-grow:1}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._1bah1yb4{justify-content:space-between}
+._1bsb1tcg, ._1xyl1tcg [data-smart-element-icon] img, ._1h1b1tcg [data-smart-element-icon] span, ._prfw1tcg [data-smart-element-icon] svg, ._mezj1tcg img, ._e2oo1tcg span, ._w8l51tcg svg{width:24px}
+._1e0c1txw{display:flex}
+._1flvcj1k h3{display:-webkit-box}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1r7d1hna h3{word-break:break-word}
+._1tke1tcg, ._x9xj1tcg [data-smart-element-icon] img, ._v5981tcg [data-smart-element-icon] span, ._z15s1tcg [data-smart-element-icon] svg, ._qci81tcg img, ._15iz1tcg span, ._erub1tcg svg{min-height:24px}
+._1ul91tcg, ._1ekg1tcg [data-smart-element-icon] img, ._jbhf1tcg [data-smart-element-icon] span, ._11hh1tcg [data-smart-element-icon] svg, ._1rg21tcg img, ._q7cv1tcg span, ._xwbj1tcg svg{min-width:24px}
+._1wkfkb7n h3{flex-shrink:1}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg, ._gire1tcg [data-smart-element-icon] img, ._yrry1tcg [data-smart-element-icon] span, ._1bnm1tcg [data-smart-element-icon] svg, ._bna71tcg img, ._1xjx1tcg span, ._17521tcg svg{height:24px}
+._4wztidpf h3{margin-bottom:0}
+._923e1wug h3{flex-basis:auto}
+._c71l1tcg, ._1q121tcg [data-smart-element-icon] img, ._2s1x1tcg [data-smart-element-icon] span, ._1rh41tcg [data-smart-element-icon] svg, ._19l31tcg img, ._1pr21tcg span, ._1u5t1tcg svg{max-height:24px}
+._c7bk1l2s h3{text-overflow:ellipsis}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._i0dl1wug{flex-basis:auto}
+._n3tddlk8{padding-bottom:14px}
+._p12f1tcg, ._1mj01tcg [data-smart-element-icon] img, ._1r9c1tcg [data-smart-element-icon] span, ._1xch1tcg [data-smart-element-icon] svg, ._rtys1tcg img, ._b8nk1tcg span, ._4x201tcg svg{max-width:24px}
+._r8nti7a9 h3{font-weight:var(--ds-font-weight-regular,400)}
+._shpw1e54 h3{-webkit-box-orient:vertical}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._uepwkb7n h3{-webkit-line-clamp:1}
+._yrj2kb7n h3{flex-grow:1}
+@media only screen and (max-width:980px){._3kllglyw .smart-link-resize-button{display:none}}
+@supports not (-webkit-line-clamp:1){._130wgktf h3{max-height:20px}}

package/dist/esm/view/EmbedModal/components/link-info/index.js

@@ -1,11 +1,7 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useMemo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Heading from '@atlaskit/heading';
 import DownloadIcon from '@atlaskit/icon/core/download';
@@ -16,11 +12,22 @@ import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut'
 import DownloadIconLegacy from '@atlaskit/icon/glyph/download';
 import VidFullScreenOffIcon from '@atlaskit/icon/glyph/vid-full-screen-off';
 import { useModal } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../../../../messages';
 import { Icon } from '../../../common/Icon';
 import { MAX_MODAL_SIZE } from '../../constants';
+import LinkInfoOld from './indexOld';
 import LinkInfoButton from './link-info-button';
-import { actionCss, containerStyles, iconCss, titleCss } from './styled';
+var containerStyles = null;
+var iconSize = '24px';
+
+// EDM-7328: CSS Specificity
+// An embed modal icon css for img, span, svg has specificity weight of 0-1-1.
+// Specify flex ui icon selector to increase specificity weight to 0-2-1.
+var iconCss = null;
+var height = '20px';
+var titleCss = null;
+var actionCss = null;
 var LinkInfo = function LinkInfo(_ref) {
   var icon = _ref.icon,
     providerName = _ref.providerName,
@@ -34,9 +41,9 @@ var LinkInfo = function LinkInfo(_ref) {
     onClose = _useModal.onClose;
   var downloadButton = useMemo(function () {
     if (onDownloadButtonClick) {
-      return jsx(LinkInfoButton, {
-        content: jsx(FormattedMessage, messages.download),
-        icon: jsx(DownloadIcon, {
+      return /*#__PURE__*/React.createElement(LinkInfoButton, {
+        content: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
+        icon: /*#__PURE__*/React.createElement(DownloadIcon, {
           label: messages.download.defaultMessage,
           LEGACY_fallbackIcon: DownloadIconLegacy,
           spacing: "spacious",
@@ -49,10 +56,10 @@ var LinkInfo = function LinkInfo(_ref) {
   }, [onDownloadButtonClick, testId]);
   var urlButton = useMemo(function () {
     if (onViewButtonClick) {
-      var content = providerName ? jsx(React.Fragment, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal);
-      return jsx(LinkInfoButton, {
+      var content = providerName ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.viewIn), " ", providerName) : /*#__PURE__*/React.createElement(FormattedMessage, messages.viewOriginal);
+      return /*#__PURE__*/React.createElement(LinkInfoButton, {
         content: content,
-        icon: jsx(ShortcutIcon, {
+        icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
           label: messages.viewOriginal.defaultMessage,
           spacing: "spacious",
           color: "currentColor"
@@ -65,56 +72,59 @@ var LinkInfo = function LinkInfo(_ref) {
   var sizeButton = useMemo(function () {
     var isFullScreen = size === MAX_MODAL_SIZE;
     var message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;
-    var icon = isFullScreen ? jsx(FullscreenExitIcon, {
+    var icon = isFullScreen ? /*#__PURE__*/React.createElement(FullscreenExitIcon, {
       LEGACY_fallbackIcon: VidFullScreenOffIcon,
       label: message.defaultMessage,
       spacing: "spacious",
       color: "currentColor"
-    }) : jsx(VidFullScreenOnIcon, {
+    }) : /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
       label: message.defaultMessage,
       spacing: "spacious",
       color: "currentColor"
     });
     return (
+      /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      jsx("span", {
+      React.createElement("span", {
         className: "smart-link-resize-button"
-      }, jsx(LinkInfoButton, {
-        content: jsx(FormattedMessage, message),
+      }, /*#__PURE__*/React.createElement(LinkInfoButton, {
+        content: /*#__PURE__*/React.createElement(FormattedMessage, message),
         icon: icon,
         onClick: onResizeButtonClick,
         testId: "".concat(testId, "-resize")
       }))
     );
   }, [onResizeButtonClick, size, testId]);
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      css: containerStyles
-    }, icon &&
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      css: iconCss,
-      "data-testid": "".concat(testId, "-icon")
-    }, jsx(Icon, icon)), jsx("div", {
-      css: titleCss
-    }, jsx(Heading, {
-      size: "medium",
-      testId: "".concat(testId, "-title")
-    }, title), jsx("span", {
-      tabIndex: 0
-    })), jsx("div", {
-      css: actionCss
-    }, downloadButton, urlButton, sizeButton, jsx(LinkInfoButton, {
-      content: jsx(FormattedMessage, messages.preview_close),
-      icon: jsx(CrossIcon, {
-        label: messages.preview_close.defaultMessage,
-        color: "currentColor",
-        spacing: "spacious"
-      }),
-      onClick: onClose,
-      testId: "".concat(testId, "-close")
-    })))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulpu2gc _4cvr1h6o _1e0c1txw _1bah1yb4 _ca0q1ejb _u5f31ejb _n3tddlk8 _19bv1ejb"])
+  }, icon && /*#__PURE__*/React.createElement("div", {
+    "data-testid": "".concat(testId, "-icon"),
+    className: ax(["_4t3i1tcg _gire1tcg _yrry1tcg _1bnm1tcg _bna71tcg _1xjx1tcg _17521tcg _1tke1tcg _x9xj1tcg _v5981tcg _z15s1tcg _qci81tcg _15iz1tcg _erub1tcg _c71l1tcg _1q121tcg _2s1x1tcg _1rh41tcg _19l31tcg _1pr21tcg _1u5t1tcg _1bsb1tcg _1xyl1tcg _1h1b1tcg _prfw1tcg _mezj1tcg _e2oo1tcg _w8l51tcg _1ul91tcg _1ekg1tcg _jbhf1tcg _11hh1tcg _1rg21tcg _q7cv1tcg _xwbj1tcg _p12f1tcg _1mj01tcg _1r9c1tcg _1xch1tcg _rtys1tcg _b8nk1tcg _4x201tcg"])
+  }, /*#__PURE__*/React.createElement(Icon, icon)), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _yrj2kb7n _1wkfkb7n _923e1wug _1umo1bk4 _101p15vq _12bo15vq _r8nti7a9 _1flvcj1k _4wztidpf _c7bk1l2s _1r7d1hna _uepwkb7n _shpw1e54 _130wgktf"])
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "medium",
+    testId: "".concat(testId, "-title")
+  }, title), /*#__PURE__*/React.createElement("span", {
+    tabIndex: 0
+  })), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _zulp1b66 _1e0c1txw _3kllglyw"])
+  }, downloadButton, urlButton, sizeButton, /*#__PURE__*/React.createElement(LinkInfoButton, {
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_close),
+    icon: /*#__PURE__*/React.createElement(CrossIcon, {
+      label: messages.preview_close.defaultMessage,
+      color: "currentColor",
+      spacing: "spacious"
+    }),
+    onClick: onClose,
+    testId: "".concat(testId, "-close")
+  })));
+};
+var Exported = function Exported(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(LinkInfo, props);
+  } else {
+    return /*#__PURE__*/React.createElement(LinkInfoOld, props);
+  }
 };
-export default LinkInfo;
+export default Exported;

package/dist/esm/view/EmbedModal/components/link-info/indexOld.js

@@ -0,0 +1,120 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useMemo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import Heading from '@atlaskit/heading';
+import DownloadIcon from '@atlaskit/icon/core/download';
+import FullscreenExitIcon from '@atlaskit/icon/core/fullscreen-exit';
+import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
+import VidFullScreenOnIcon from '@atlaskit/icon/core/migration/fullscreen-enter--vid-full-screen-on';
+import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import DownloadIconLegacy from '@atlaskit/icon/glyph/download';
+import VidFullScreenOffIcon from '@atlaskit/icon/glyph/vid-full-screen-off';
+import { useModal } from '@atlaskit/modal-dialog';
+import { messages } from '../../../../messages';
+import { Icon } from '../../../common/Icon';
+import { MAX_MODAL_SIZE } from '../../constants';
+import LinkInfoButton from './link-info-button';
+import { actionCss, containerStyles, iconCss, titleCss } from './styledOld';
+var LinkInfo = function LinkInfo(_ref) {
+  var icon = _ref.icon,
+    providerName = _ref.providerName,
+    onDownloadButtonClick = _ref.onDownloadButtonClick,
+    onResizeButtonClick = _ref.onResizeButtonClick,
+    onViewButtonClick = _ref.onViewButtonClick,
+    size = _ref.size,
+    testId = _ref.testId,
+    title = _ref.title;
+  var _useModal = useModal(),
+    onClose = _useModal.onClose;
+  var downloadButton = useMemo(function () {
+    if (onDownloadButtonClick) {
+      return jsx(LinkInfoButton, {
+        content: jsx(FormattedMessage, messages.download),
+        icon: jsx(DownloadIcon, {
+          label: messages.download.defaultMessage,
+          LEGACY_fallbackIcon: DownloadIconLegacy,
+          spacing: "spacious",
+          color: "currentColor"
+        }),
+        onClick: onDownloadButtonClick,
+        testId: "".concat(testId, "-download")
+      });
+    }
+  }, [onDownloadButtonClick, testId]);
+  var urlButton = useMemo(function () {
+    if (onViewButtonClick) {
+      var content = providerName ? jsx(React.Fragment, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal);
+      return jsx(LinkInfoButton, {
+        content: content,
+        icon: jsx(ShortcutIcon, {
+          label: messages.viewOriginal.defaultMessage,
+          spacing: "spacious",
+          color: "currentColor"
+        }),
+        onClick: onViewButtonClick,
+        testId: "".concat(testId, "-url")
+      });
+    }
+  }, [onViewButtonClick, providerName, testId]);
+  var sizeButton = useMemo(function () {
+    var isFullScreen = size === MAX_MODAL_SIZE;
+    var message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;
+    var icon = isFullScreen ? jsx(FullscreenExitIcon, {
+      LEGACY_fallbackIcon: VidFullScreenOffIcon,
+      label: message.defaultMessage,
+      spacing: "spacious",
+      color: "currentColor"
+    }) : jsx(VidFullScreenOnIcon, {
+      label: message.defaultMessage,
+      spacing: "spacious",
+      color: "currentColor"
+    });
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      jsx("span", {
+        className: "smart-link-resize-button"
+      }, jsx(LinkInfoButton, {
+        content: jsx(FormattedMessage, message),
+        icon: icon,
+        onClick: onResizeButtonClick,
+        testId: "".concat(testId, "-resize")
+      }))
+    );
+  }, [onResizeButtonClick, size, testId]);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      css: containerStyles
+    }, icon &&
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      css: iconCss,
+      "data-testid": "".concat(testId, "-icon")
+    }, jsx(Icon, icon)), jsx("div", {
+      css: titleCss
+    }, jsx(Heading, {
+      size: "medium",
+      testId: "".concat(testId, "-title")
+    }, title), jsx("span", {
+      tabIndex: 0
+    })), jsx("div", {
+      css: actionCss
+    }, downloadButton, urlButton, sizeButton, jsx(LinkInfoButton, {
+      content: jsx(FormattedMessage, messages.preview_close),
+      icon: jsx(CrossIcon, {
+        label: messages.preview_close.defaultMessage,
+        color: "currentColor",
+        spacing: "spacious"
+      }),
+      onClick: onClose,
+      testId: "".concat(testId, "-close")
+    })))
+  );
+};
+export default LinkInfo;

package/dist/esm/view/FlexibleCard/components/container/index.compiled.css

@@ -0,0 +1,38 @@
+._18s8v77o{margin:var(--ds-space-025,2px)}
+._19itn8v0{border:var(--_vzvmm2)}
+._1yt418y6{padding:var(--_1xumd0e)}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
+._zulp1jvo{gap:1.25rem 0}
+._zulp1qos{gap:.5rem 0}
+._zulpfzsm{gap:.25rem 0}
+._zulph3jc{gap:1rem 0}
+._19bv15sf{padding-left:calc(var(--preview-block-width) + 1.25rem)}
+._19bv1ltm{padding-left:calc(var(--preview-block-width) + .25rem)}
+._19bvf557{padding-left:calc(var(--preview-block-width) + 1rem)}
+._19bvqox2{padding-left:calc(var(--preview-block-width) + .5rem)}
+._1e0c1txw{display:flex}
+._1pcmkb7n:hover~.actions-button-group{opacity:1}
+._1reo15vq{overflow-x:hidden}
+._1t4ckb7n .has-action, ._1nxdkb7n a, ._xnbykb7n button{z-index:1}
+._1ul9idpf{min-width:0}
+._1yob1j6v{--container-gap-right:1rem}
+._1yob1k92{--container-gap-right:1.25rem}
+._1yob1kwk{--container-gap-right:.5rem}
+._1yob1wow{--container-gap-right:var(--_12k13bg)}
+._1yob6mu8{--container-gap-right:.25rem}
+._2lx21bp4{flex-direction:column}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._jb7v18y6{--container-padding:var(--_1xumd0e)}
+._kqswh2mm{position:relative}
+._nqwih2mm .has-action, ._18ywh2mm a, ._1nq3h2mm button{position:relative}
+._r37x1r5k{--preview-block-width:30%}
+._u5f315sf{padding-right:calc(var(--preview-block-width) + 1.25rem)}
+._u5f31ltm{padding-right:calc(var(--preview-block-width) + .25rem)}
+._u5f3f557{padding-right:calc(var(--preview-block-width) + 1rem)}
+._u5f3qox2{padding-right:calc(var(--preview-block-width) + .5rem)}
+._y5vk167t{--container-gap-left:var(--_73mooq)}
+._y5vk1j6v{--container-gap-left:1rem}
+._y5vk1k92{--container-gap-left:1.25rem}
+._y5vk1kwk{--container-gap-left:.5rem}
+._y5vk6mu8{--container-gap-left:.25rem}
+._1v7y1i6y .has-action:focus, ._ufn21i6y a:focus{outline-offset:var(--ds-space-negative-025,-2px)}