@atlaskit/smart-card 34.5.2 → 34.6.0

package/dist/esm/view/FlexibleCard/components/elements/badge/index.compiled.css

@@ -0,0 +1,30 @@
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._16jlidpf{flex-grow:0}
+._19bv1xvx{padding-left:var(--ds-space-025,.125rem)}
+._19l31j6v img, ._1pr21j6v span, ._1u5t1j6v svg{max-height:1rem}
+._1bsb1j6v{width:1rem}
+._1e0c116y{display:inline-flex}
+._1jtnidpf img, ._13t3idpf span, ._rm9uidpf svg{line-height:0}
+._1o9zidpf{flex-shrink:0}
+._1rg21j6v img, ._q7cv1j6v span, ._xwbj1j6v svg{min-width:1rem}
+._1tke1j6v{min-height:1rem}
+._1ul91j6v{min-width:1rem}
+._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
+._4cvr1h6o{align-items:center}
+._4t3i1j6v{height:1rem}
+._5jw9idpf svg{padding-bottom:0}
+._7wy9idpf svg{padding-left:0}
+._bna71j6v img, ._1xjx1j6v span, ._17521j6v svg{height:1rem}
+._c71l1j6v{max-height:1rem}
+._i0dl1wug{flex-basis:auto}
+._i2i3idpf svg{padding-top:0}
+._mezj1j6v img, ._e2oo1j6v span, ._w8l51j6v svg{width:1rem}
+._p12f1j6v{max-width:1rem}
+._qci81j6v img, ._15iz1j6v span, ._erub1j6v svg{min-height:1rem}
+._rtqbnkob img, ._e4kmnkob span, ._z239nkob svg{vertical-align:middle}
+._rtys1j6v img, ._b8nk1j6v span, ._4x201j6v svg{max-width:1rem}
+._s7n4nkob{vertical-align:middle}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._syaz1oju{color:var(--ds-icon-subtle,#626f86)}
+._uhasidpf svg{padding-right:0}
+._vwz4idpf{line-height:0}

package/dist/esm/view/FlexibleCard/components/elements/badge/index.js

@@ -1,33 +1,23 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _messageMapper;
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
+var _messageMapper;
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { IconType } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';
-import { getFormattedMessage, getIconSizeStyles } from '../../utils';
-var badgeStyles = css({
-  alignItems: 'center',
-  display: 'inline-flex',
-  minWidth: 'fit-content'
-});
+import { getFormattedMessage } from '../../utils';
+import BadgeOld from './BadgeOld';
+var badgeStyles = null;
+var iconStyles = null;
+// ${getIconSizeStyles('1rem')}
 
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-var iconStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tcolor: ", ";\n\tline-height: 0;\n\tvertical-align: middle;\n\t", "\n\timg,\n  span,\n  svg {\n\t\tline-height: 0;\n\t\tvertical-align: middle;\n\t}\n"])), "var(--ds-icon-subtle, #626F86)", getIconSizeStyles('1rem'));
-var labelStyles = css({
-  color: "var(--ds-text-subtlest, #626F86)",
-  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)",
-  paddingLeft: "var(--ds-space-025, 0.125rem)",
-  verticalAlign: 'middle'
-});
+var labelStyles = null;
 var messageMapper = (_messageMapper = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_messageMapper, IconType.PriorityBlocker, messages.priority_blocker), IconType.PriorityCritical, messages.priority_critical), IconType.PriorityHigh, messages.priority_high), IconType.PriorityHighest, messages.priority_highest), IconType.PriorityLow, messages.priority_low), IconType.PriorityLowest, messages.priority_lowest), IconType.PriorityMajor, messages.priority_major), IconType.PriorityMedium, messages.priority_medium), IconType.PriorityMinor, messages.priority_minor), IconType.PriorityTrivial, messages.priority_trivial), _defineProperty(_messageMapper, IconType.PriorityUndefined, messages.priority_undefined));
 var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
   if (icon) {
@@ -41,7 +31,7 @@ var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
 };
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
   if (icon) {
-    return jsx(AtlaskitIcon, {
+    return /*#__PURE__*/React.createElement(AtlaskitIcon, {
       icon: icon,
       label: icon,
       testId: "".concat(testId, "-icon")
@@ -50,7 +40,7 @@ var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
 };
 var renderImageIcon = function renderImageIcon(url, testId) {
   if (url) {
-    return jsx(ImageIcon, {
+    return /*#__PURE__*/React.createElement(ImageIcon, {
       testId: testId,
       url: url
     });
@@ -70,13 +60,13 @@ var renderImageIcon = function renderImageIcon(url, testId) {
  * @see ProgrammingLanguage
  * @see Provider
  */
-var Badge = function Badge(_ref) {
+var BadgeNew = function BadgeNew(_ref) {
   var _ref$hideIcon = _ref.hideIcon,
     hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
     icon = _ref.icon,
     label = _ref.label,
     name = _ref.name,
-    overrideCss = _ref.overrideCss,
+    className = _ref.className,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId,
     url = _ref.url;
@@ -85,18 +75,26 @@ var Badge = function Badge(_ref) {
   if (!formattedMessageOrLabel || !badgeIcon) {
     return null;
   }
-  return jsx("span", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: [badgeStyles, overrideCss],
+  return /*#__PURE__*/React.createElement("span", {
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-badge": true,
     "data-testid": testId
-  }, !hideIcon && jsx("span", {
-    css: iconStyles
-  }, badgeIcon), jsx("span", {
-    css: labelStyles,
-    "data-testid": "".concat(testId, "-label")
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax(["_4cvr1h6o _1e0c116y _1ul91ns9", className])
+  }, !hideIcon && /*#__PURE__*/React.createElement("span", {
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _syaz1oju _vwz4idpf _s7n4nkob _4t3i1j6v _1tke1j6v _c71l1j6v _1bsb1j6v _1ul91j6v _p12f1j6v _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71j6v _1xjx1j6v _17521j6v _qci81j6v _15iz1j6v _erub1j6v _19l31j6v _1pr21j6v _1u5t1j6v _mezj1j6v _e2oo1j6v _w8l51j6v _1rg21j6v _q7cv1j6v _xwbj1j6v _rtys1j6v _b8nk1j6v _4x201j6v _1jtnidpf _13t3idpf _rm9uidpf _rtqbnkob _e4kmnkob _z239nkob"])
+  }, badgeIcon), /*#__PURE__*/React.createElement("span", {
+    "data-testid": "".concat(testId, "-label"),
+    className: ax(["_11c8qk37 _syaz131l _19bv1xvx _s7n4nkob"])
   }, formattedMessageOrLabel));
 };
+var Badge = function Badge(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(BadgeNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(BadgeOld, props);
+  }
+};
 export default Badge;

package/dist/esm/view/FlexibleCard/components/elements/date-time/DateTimeOld.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @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 { selectUnit } from '@formatjs/intl-utils';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import { messages } from '../../../../../messages';
+import { getTruncateStyles } from '../../utils';
+var styles = css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  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-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+getTruncateStyles(1));
+var typeToDescriptorMap = {
+  created: {
+    relative: messages.created_on_relative,
+    absolute: messages.created_on_absolute
+  },
+  modified: {
+    relative: messages.modified_on_relative,
+    absolute: messages.modified_on_absolute
+  },
+  sent: {
+    relative: messages.sent_on_relative,
+    absolute: messages.sent_on_absolute
+  }
+};
+
+/**
+ * A base element that displays an ISO Timestamp in text.
+ * @internal
+ * @param {DateTimeProps} DateTimeProps - The props necessary for the DateTime element.
+ * @see CreatedOn
+ * @see ModifiedOn
+ * @see SentOn
+ */
+var DateTimeOld = function DateTimeOld(_ref) {
+  var date = _ref.date,
+    name = _ref.name,
+    overrideCss = _ref.overrideCss,
+    type = _ref.type,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-date-time' : _ref$testId,
+    text = _ref.text;
+  var _useIntl = useIntl(),
+    formatRelativeTime = _useIntl.formatRelativeTime,
+    formatDate = _useIntl.formatDate;
+  if (!type || !date) {
+    return null;
+  }
+  var isLongerThenWeek = Math.abs(date.getTime() - Date.now()) > 1000 * 60 * 60 * 24 * 7;
+  var context;
+  var typeVariant;
+  if (isLongerThenWeek) {
+    typeVariant = 'absolute';
+    context = formatDate(date, {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  } else {
+    var _selectUnit = selectUnit(date, Date.now()),
+      value = _selectUnit.value,
+      unit = _selectUnit.unit;
+    typeVariant = 'relative';
+    context = formatRelativeTime(value, unit, {
+      numeric: 'auto'
+    });
+  }
+  return jsx("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: [styles, overrideCss],
+    "data-separator": true,
+    "data-smart-element": name,
+    "data-smart-element-date-time": true,
+    "data-testid": testId
+  }, text ? "".concat(text, " ").concat(context) : jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
+    values: {
+      context: context
+    }
+  })));
+};
+export default DateTimeOld;

package/dist/esm/view/FlexibleCard/components/elements/date-time/index.compiled.css

@@ -0,0 +1,10 @@
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0ccj1k{display:-webkit-box}
+._1nmz1hna{word-break:break-word}
+._1reo15vq{overflow-x:hidden}
+._1yyjkb7n{-webkit-line-clamp:1}
+._sudp1e54{-webkit-box-orient:vertical}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+@supports not (-webkit-line-clamp:1){._102k1j6v{max-height:1rem}}

package/dist/esm/view/FlexibleCard/components/elements/date-time/index.js

@@ -1,20 +1,14 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @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 "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { selectUnit } from '@formatjs/intl-utils';
 import { FormattedMessage, useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../../../../../messages';
-import { getTruncateStyles } from '../../utils';
-var styles = css({
-  color: "var(--ds-text-subtlest, #626F86)",
-  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-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-getTruncateStyles(1));
+import DateTimeOld from './DateTimeOld';
+var styles = null;
 var typeToDescriptorMap = {
   created: {
     relative: messages.created_on_relative,
@@ -38,10 +32,10 @@ var typeToDescriptorMap = {
  * @see ModifiedOn
  * @see SentOn
  */
-var DateTime = function DateTime(_ref) {
+var DateTimeNew = function DateTimeNew(_ref) {
   var date = _ref.date,
     name = _ref.name,
-    overrideCss = _ref.overrideCss,
+    className = _ref.className,
     type = _ref.type,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-date-time' : _ref$testId,
@@ -71,17 +65,25 @@ var DateTime = function DateTime(_ref) {
       numeric: 'auto'
     });
   }
-  return jsx("span", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: [styles, overrideCss],
+  return /*#__PURE__*/React.createElement("span", {
     "data-separator": true,
     "data-smart-element": name,
     "data-smart-element-date-time": true,
     "data-testid": testId
-  }, text ? "".concat(text, " ").concat(context) : jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax(["_11c8qk37 _1reo15vq _18m915vq _syaz131l _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k1j6v", className])
+  }, text ? "".concat(text, " ").concat(context) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context: context
     }
   })));
 };
+var DateTime = function DateTime(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(DateTimeNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(DateTimeOld, props);
+  }
+};
 export default DateTime;

package/dist/esm/view/FlexibleCard/components/elements/icon/IconOld.js

@@ -0,0 +1,143 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @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 { css, jsx } from '@emotion/react';
+import LinkIcon from '@atlaskit/icon/core/migration/link';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
+import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
+import AtlaskitIcon from '../../common/atlaskit-icon';
+import ImageIcon from '../../common/image-icon';
+import { getIconSizeStyles, getIconWidth, getTruncateStyles } from '../../utils';
+var getPositionStyles = function getPositionStyles(position) {
+  switch (position) {
+    case SmartLinkPosition.Center:
+      return css({
+        alignSelf: 'center'
+      });
+    case SmartLinkPosition.Top:
+    default:
+      return css({
+        alignSelf: 'flex-start',
+        margin: 0
+      });
+  }
+};
+var getIconStyles = function getIconStyles(position, width) {
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    css(getPositionStyles(position), getIconSizeStyles(width))
+  );
+};
+var getCustomRenderStyles = function getCustomRenderStyles(value) {
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    css(getTruncateStyles(1, value), {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
+      lineHeight: value,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      fontSize: value,
+      textAlign: 'center',
+      textOverflow: 'clip',
+      WebkitBoxOrient: 'unset',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+      span: {
+        margin: 0,
+        padding: 0,
+        verticalAlign: 'baseline'
+      }
+    })
+  );
+};
+var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
+  var size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : SmartLinkSize.Medium;
+  if (icon) {
+    return jsx(AtlaskitIcon, _extends({
+      icon: icon,
+      testId: "".concat(testId, "-icon")
+    }, fg('platform-smart-card-icon-migration') && {
+      size: size
+    }));
+  }
+};
+var renderDefaultIcon = function renderDefaultIcon(label, testId) {
+  return jsx(LinkIcon, {
+    label: label,
+    testId: "".concat(testId, "-default"),
+    color: "currentColor"
+  });
+};
+var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
+  var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : SmartLinkSize.Medium;
+  var width = size === SmartLinkSize.Large ? "var(--ds-space-300, 24px)" : "var(--ds-space-200, 16px)";
+  if (url) {
+    return jsx(ImageIcon, _extends({
+      defaultIcon: defaultIcon,
+      testId: testId,
+      url: url
+    }, fg('platform-smart-card-icon-migration') && {
+      width: width,
+      height: width
+    }));
+  }
+};
+
+/**
+ * A base element that displays an Icon or favicon.
+ * @internal
+ * @param {IconProps} IconProps - The props necessary for the Icon element.
+ * @see LinkIcon
+ */
+var IconOld = function IconOld(_ref) {
+  var icon = _ref.icon,
+    overrideIcon = _ref.overrideIcon,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Link' : _ref$label,
+    name = _ref.name,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? SmartLinkPosition.Top : _ref$position,
+    overrideCss = _ref.overrideCss,
+    render = _ref.render,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-icon' : _ref$testId,
+    url = _ref.url;
+  var element = useMemo(function () {
+    var defaultIcon = renderDefaultIcon(label, testId);
+    return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId, fg('platform-smart-card-icon-migration') ? size : undefined) || renderAtlaskitIcon(icon, testId, fg('platform-smart-card-icon-migration') ? size : undefined) || defaultIcon;
+  }, [overrideIcon, icon, label, render, testId, url, size]);
+  var width = getIconWidth(size);
+  var styles = getIconStyles(position, width);
+  var renderStyles = render ? getCustomRenderStyles(width) : undefined;
+  return jsx("div", {
+    css: [
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
+    !fg('platform-smart-card-icon-migration') && styles,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
+    renderStyles,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
+    overrideCss],
+    "data-fit-to-content": true,
+    "data-smart-element": name,
+    "data-smart-element-icon": true,
+    "data-testid": testId
+  }, fg('platform-smart-card-icon-migration') ? jsx(Box, {
+    xcss: iconWrapperStyle,
+    style: {
+      width: width,
+      height: width
+    }
+  }, element) : element);
+};
+var iconWrapperStyle = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
+export default IconOld;

package/dist/esm/view/FlexibleCard/components/elements/icon/index.compiled.css

@@ -0,0 +1,89 @@
+._11c81bk4{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)}
+._11c81p5s{font:var(--ds-font-heading-large,normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._16jlidpf{flex-grow:0}
+._18m915vq{overflow-y:hidden}
+._18u0idpf{margin-left:0}
+._19l31j6v img, ._1pr21j6v span, ._1u5t1j6v svg{max-height:1rem}
+._19l31k8s img, ._1pr21k8s span, ._1u5t1k8s svg{max-height:1.5rem}
+._19l3oqnp img, ._1pr2oqnp span, ._1u5toqnp svg{max-height:.75rem}
+._19l3viql img, ._1pr2viql span, ._1u5tviql svg{max-height:2rem}
+._19pkidpf{margin-top:0}
+._1bsb1j6v{width:1rem}
+._1bsb1k8s{width:1.5rem}
+._1bsboqnp{width:.75rem}
+._1bsbviql{width:2rem}
+._1btozryt{text-overflow:clip}
+._1e0ccj1k{display:-webkit-box}
+._1ipkidpf span{margin-top:0}
+._1kdcidpf span{margin-right:0}
+._1m2uidpf span{padding-bottom:0}
+._1nmz1hna{word-break:break-word}
+._1o9zidpf{flex-shrink:0}
+._1oh2idpf span{padding-top:0}
+._1reo15vq{overflow-x:hidden}
+._1rg21j6v img, ._q7cv1j6v span, ._xwbj1j6v svg{min-width:1rem}
+._1rg21k8s img, ._q7cv1k8s span, ._xwbj1k8s svg{min-width:1.5rem}
+._1rg2oqnp img, ._q7cvoqnp span, ._xwbjoqnp svg{min-width:.75rem}
+._1rg2viql img, ._q7cvviql span, ._xwbjviql svg{min-width:2rem}
+._1tke1j6v{min-height:1rem}
+._1tke1k8s{min-height:1.5rem}
+._1tkeoqnp{min-height:.75rem}
+._1tkeviql{min-height:2rem}
+._1ul91j6v{min-width:1rem}
+._1ul91k8s{min-width:1.5rem}
+._1ul9oqnp{min-width:.75rem}
+._1ul9viql{min-width:2rem}
+._1w2uidpf span{margin-left:0}
+._1wpz1h6o{align-self:center}
+._1wpz1y6m{align-self:flex-start}
+._1wyb1j6v{font-size:1rem}
+._1wyb1k8s{font-size:1.5rem}
+._1wyboqnp{font-size:.75rem}
+._1wybviql{font-size:2rem}
+._1yyjkb7n{-webkit-line-clamp:1}
+._2hwxidpf{margin-right:0}
+._3glyidpf span{margin-bottom:0}
+._4t3i1j6v{height:1rem}
+._4t3i1k8s{height:1.5rem}
+._4t3ioqnp{height:.75rem}
+._4t3iviql{height:2rem}
+._5jw9idpf svg{padding-bottom:0}
+._7wy9idpf svg{padding-left:0}
+._99ztidpf span{padding-right:0}
+._9n9oidpf span{padding-left:0}
+._bna71j6v img, ._1xjx1j6v span, ._17521j6v svg{height:1rem}
+._bna71k8s img, ._1xjx1k8s span, ._17521k8s svg{height:1.5rem}
+._bna7oqnp img, ._1xjxoqnp span, ._1752oqnp svg{height:.75rem}
+._bna7viql img, ._1xjxviql span, ._1752viql svg{height:2rem}
+._c71l1j6v{max-height:1rem}
+._c71l1k8s{max-height:1.5rem}
+._c71loqnp{max-height:.75rem}
+._c71lviql{max-height:2rem}
+._e4km18uv span{vertical-align:initial}
+._i0dl1wug{flex-basis:auto}
+._i2i3idpf svg{padding-top:0}
+._mezj1j6v img, ._e2oo1j6v span, ._w8l51j6v svg{width:1rem}
+._mezj1k8s img, ._e2oo1k8s span, ._w8l51k8s svg{width:1.5rem}
+._mezjoqnp img, ._e2oooqnp span, ._w8l5oqnp svg{width:.75rem}
+._mezjviql img, ._e2ooviql span, ._w8l5viql svg{width:2rem}
+._otyridpf{margin-bottom:0}
+._p12f1j6v{max-width:1rem}
+._p12f1k8s{max-width:1.5rem}
+._p12foqnp{max-width:.75rem}
+._p12fviql{max-width:2rem}
+._qci81j6v img, ._15iz1j6v span, ._erub1j6v svg{min-height:1rem}
+._qci81k8s img, ._15iz1k8s span, ._erub1k8s svg{min-height:1.5rem}
+._qci8oqnp img, ._15izoqnp span, ._eruboqnp svg{min-height:.75rem}
+._qci8viql img, ._15izviql span, ._erubviql svg{min-height:2rem}
+._rtys1j6v img, ._b8nk1j6v span, ._4x201j6v svg{max-width:1rem}
+._rtys1k8s img, ._b8nk1k8s span, ._4x201k8s svg{max-width:1.5rem}
+._rtysoqnp img, ._b8nkoqnp span, ._4x20oqnp svg{max-width:.75rem}
+._rtysviql img, ._b8nkviql span, ._4x20viql svg{max-width:2rem}
+._sudpn7od{-webkit-box-orient:unset}
+._uhasidpf svg{padding-right:0}
+._vwz41j6v{line-height:1rem}
+._vwz41k8s{line-height:1.5rem}
+._vwz4oqnp{line-height:.75rem}
+._vwz4viql{line-height:2rem}
+._y3gn1h6o{text-align:center}
+@supports not (-webkit-line-clamp:1){._102k1j6v{max-height:1rem}._102k1k8s{max-height:1.5rem}._102koqnp{max-height:.75rem}._102kptym{max-height:calc(var(--ds-space-200, 1pc)*1)}._102kviql{max-height:2rem}._102kz42d{max-height:calc(var(--ds-space-300, 24px)*1)}}