@atlaskit/smart-card 34.5.2 → 34.6.0

package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -1,48 +1,34 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../constants");
 var _messages = require("../../../../../messages");
 var _utils = require("../../utils");
-var _templateObject;
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _AvatarGroupOld = _interopRequireDefault(require("./AvatarGroupOld"));
+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 MAX_COUNT = 4;
-var getStyles = function getStyles(size) {
-  var styles = (0, _react2.css)({
-    display: 'inline-flex',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    ul: {
-      marginRight: "var(--ds-space-100, 0.5rem)",
-      marginTop: 0
-    }
-  });
-  switch (size) {
-    case _constants.SmartLinkSize.XLarge:
-    case _constants.SmartLinkSize.Large:
-      // Default AK small size
-      return styles;
-    case _constants.SmartLinkSize.Medium:
-    case _constants.SmartLinkSize.Small:
-    default:
-      // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-      return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t", "\n\t\t\t\tli {\n\t\t\t\t\tspan,\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-height: 1.25rem;\n\t\t\t\t\t\tmax-width: 1.25rem;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), styles);
-  }
+var stylesMap = {
+  xlarge: "_1e0c116y _1kvxcxkx _102oidpf",
+  large: "_1e0c116y _1kvxcxkx _102oidpf",
+  medium: "_1e0c116y _1kvxcxkx _102oidpf _6fu61k92 _1rrq1k92 _udwj1k92 _10pr1k92",
+  small: "_1e0c116y _1kvxcxkx _102oidpf _6fu61k92 _1rrq1k92 _udwj1k92 _10pr1k92"
 };
 var getPersonNameWithPrefix = function getPersonNameWithPrefix(elementName, personName, intl) {
   switch (elementName) {
@@ -64,13 +50,13 @@ var getPersonNameWithPrefix = function getPersonNameWithPrefix(elementName, pers
  * @see AuthorGroup
  * @see CollaboratorGroup
  */
-var AvatarGroup = function AvatarGroup(_ref) {
+var AvatarGroupNew = function AvatarGroupNew(_ref) {
   var _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,
     _ref$maxCount = _ref.maxCount,
     maxCount = _ref$maxCount === void 0 ? MAX_COUNT : _ref$maxCount,
     name = _ref.name,
-    overrideCss = _ref.overrideCss,
+    className = _ref.className,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
     _ref$testId = _ref.testId,
@@ -105,14 +91,15 @@ var AvatarGroup = function AvatarGroup(_ref) {
   if (!data.length) {
     return null;
   }
-  return (0, _react2.jsx)("span", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: [getStyles(size), overrideCss],
+  return /*#__PURE__*/React.createElement("span", {
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-avatar-group": true,
     "data-testid": testId
-  }, (0, _react2.jsx)(_avatarGroup.default, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: (0, _runtime.ax)([stylesMap[size], className])
+  }, /*#__PURE__*/React.createElement(_avatarGroup.default, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",
@@ -120,4 +107,11 @@ var AvatarGroup = function AvatarGroup(_ref) {
     testId: testId
   }));
 };
+var AvatarGroup = function AvatarGroup(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AvatarGroupNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_AvatarGroupOld.default, props);
+  }
+};
 var _default = exports.default = AvatarGroup;

package/dist/cjs/view/FlexibleCard/components/elements/badge/BadgeOld.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _constants = require("../../../../../constants");
+var _messages = require("../../../../../messages");
+var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon"));
+var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
+var _utils = require("../../utils");
+var _templateObject, _messageMapper;
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var badgeStyles = (0, _react2.css)({
+  alignItems: 'center',
+  display: 'inline-flex',
+  minWidth: 'fit-content'
+});
+
+// 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 = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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)", (0, _utils.getIconSizeStyles)('1rem'));
+var labelStyles = (0, _react2.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 messageMapper = (_messageMapper = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityBlocker, _messages.messages.priority_blocker), _constants.IconType.PriorityCritical, _messages.messages.priority_critical), _constants.IconType.PriorityHigh, _messages.messages.priority_high), _constants.IconType.PriorityHighest, _messages.messages.priority_highest), _constants.IconType.PriorityLow, _messages.messages.priority_low), _constants.IconType.PriorityLowest, _messages.messages.priority_lowest), _constants.IconType.PriorityMajor, _messages.messages.priority_major), _constants.IconType.PriorityMedium, _messages.messages.priority_medium), _constants.IconType.PriorityMinor, _messages.messages.priority_minor), _constants.IconType.PriorityTrivial, _messages.messages.priority_trivial), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityUndefined, _messages.messages.priority_undefined));
+var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
+  if (icon) {
+    var descriptor = messageMapper[icon];
+    if (descriptor) {
+      return (0, _utils.getFormattedMessage)({
+        descriptor: descriptor
+      });
+    }
+  }
+};
+var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
+  if (icon) {
+    return (0, _react2.jsx)(_atlaskitIcon.default, {
+      icon: icon,
+      label: icon,
+      testId: "".concat(testId, "-icon")
+    });
+  }
+};
+var renderImageIcon = function renderImageIcon(url, testId) {
+  if (url) {
+    return (0, _react2.jsx)(_imageIcon.default, {
+      testId: testId,
+      url: url
+    });
+  }
+};
+
+/**
+ * A base element that displays some text with an associated icon.
+ * @internal
+ * @param {BadgeProps} BadgeProps - The props necessary for the Badge.
+ * @see CommentCount
+ * @see ViewCount
+ * @see ReactCount
+ * @see VoteCount
+ * @see SubscriberCount
+ * @see Priority
+ * @see ProgrammingLanguage
+ * @see Provider
+ */
+var BadgeOld = function BadgeOld(_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,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-badge' : _ref$testId,
+    url = _ref.url;
+  var formattedMessageOrLabel = getFormattedMessageFromIcon(icon) || label;
+  var badgeIcon = renderAtlaskitIcon(icon, testId) || renderImageIcon(url, testId);
+  if (!formattedMessageOrLabel || !badgeIcon) {
+    return null;
+  }
+  return (0, _react2.jsx)("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: [badgeStyles, overrideCss],
+    "data-fit-to-content": true,
+    "data-smart-element": name,
+    "data-smart-element-badge": true,
+    "data-testid": testId
+  }, !hideIcon && (0, _react2.jsx)("span", {
+    css: iconStyles
+  }, badgeIcon), (0, _react2.jsx)("span", {
+    css: labelStyles,
+    "data-testid": "".concat(testId, "-label")
+  }, formattedMessageOrLabel));
+};
+var _default = exports.default = BadgeOld;

package/dist/cjs/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/cjs/view/FlexibleCard/components/elements/badge/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,35 +6,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../constants");
 var _messages = require("../../../../../messages");
 var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon"));
 var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
 var _utils = require("../../utils");
-var _templateObject, _messageMapper;
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var badgeStyles = (0, _react2.css)({
-  alignItems: 'center',
-  display: 'inline-flex',
-  minWidth: 'fit-content'
-});
+var _BadgeOld = _interopRequireDefault(require("./BadgeOld"));
+var _messageMapper;
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
+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 = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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)", (0, _utils.getIconSizeStyles)('1rem'));
-var labelStyles = (0, _react2.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 = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityBlocker, _messages.messages.priority_blocker), _constants.IconType.PriorityCritical, _messages.messages.priority_critical), _constants.IconType.PriorityHigh, _messages.messages.priority_high), _constants.IconType.PriorityHighest, _messages.messages.priority_highest), _constants.IconType.PriorityLow, _messages.messages.priority_low), _constants.IconType.PriorityLowest, _messages.messages.priority_lowest), _constants.IconType.PriorityMajor, _messages.messages.priority_major), _constants.IconType.PriorityMedium, _messages.messages.priority_medium), _constants.IconType.PriorityMinor, _messages.messages.priority_minor), _constants.IconType.PriorityTrivial, _messages.messages.priority_trivial), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityUndefined, _messages.messages.priority_undefined));
 var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
   if (icon) {
@@ -47,7 +37,7 @@ var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
 };
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
   if (icon) {
-    return (0, _react2.jsx)(_atlaskitIcon.default, {
+    return /*#__PURE__*/_react.default.createElement(_atlaskitIcon.default, {
       icon: icon,
       label: icon,
       testId: "".concat(testId, "-icon")
@@ -56,7 +46,7 @@ var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
 };
 var renderImageIcon = function renderImageIcon(url, testId) {
   if (url) {
-    return (0, _react2.jsx)(_imageIcon.default, {
+    return /*#__PURE__*/_react.default.createElement(_imageIcon.default, {
       testId: testId,
       url: url
     });
@@ -76,13 +66,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;
@@ -91,18 +81,26 @@ var Badge = function Badge(_ref) {
   if (!formattedMessageOrLabel || !badgeIcon) {
     return null;
   }
-  return (0, _react2.jsx)("span", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: [badgeStyles, overrideCss],
+  return /*#__PURE__*/_react.default.createElement("span", {
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-badge": true,
     "data-testid": testId
-  }, !hideIcon && (0, _react2.jsx)("span", {
-    css: iconStyles
-  }, badgeIcon), (0, _react2.jsx)("span", {
-    css: labelStyles,
-    "data-testid": "".concat(testId, "-label")
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: (0, _runtime.ax)(["_4cvr1h6o _1e0c116y _1ul91ns9", className])
+  }, !hideIcon && /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _runtime.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.default.createElement("span", {
+    "data-testid": "".concat(testId, "-label"),
+    className: (0, _runtime.ax)(["_11c8qk37 _syaz131l _19bv1xvx _s7n4nkob"])
   }, formattedMessageOrLabel));
 };
+var Badge = function Badge(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(BadgeNew, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_BadgeOld.default, props);
+  }
+};
 var _default = exports.default = Badge;

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

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+var _intlUtils = require("@formatjs/intl-utils");
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("../../../../../messages");
+var _utils = require("../../utils");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var styles = (0, _react.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
+(0, _utils.getTruncateStyles)(1));
+var typeToDescriptorMap = {
+  created: {
+    relative: _messages.messages.created_on_relative,
+    absolute: _messages.messages.created_on_absolute
+  },
+  modified: {
+    relative: _messages.messages.modified_on_relative,
+    absolute: _messages.messages.modified_on_absolute
+  },
+  sent: {
+    relative: _messages.messages.sent_on_relative,
+    absolute: _messages.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 = (0, _reactIntlNext.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 = (0, _intlUtils.selectUnit)(date, Date.now()),
+      value = _selectUnit.value,
+      unit = _selectUnit.unit;
+    typeVariant = 'relative';
+    context = formatRelativeTime(value, unit, {
+      numeric: 'auto'
+    });
+  }
+  return (0, _react.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) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type][typeVariant], {
+    values: {
+      context: context
+    }
+  })));
+};
+var _default = exports.default = DateTimeOld;

package/dist/cjs/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/cjs/view/FlexibleCard/components/elements/date-time/index.js

@@ -1,28 +1,24 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = require("@emotion/react");
 var _intlUtils = require("@formatjs/intl-utils");
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _messages = require("../../../../../messages");
-var _utils = require("../../utils");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var styles = (0, _react.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
-(0, _utils.getTruncateStyles)(1));
+var _DateTimeOld = _interopRequireDefault(require("./DateTimeOld"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = null;
 var typeToDescriptorMap = {
   created: {
     relative: _messages.messages.created_on_relative,
@@ -46,10 +42,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,
@@ -79,17 +75,25 @@ var DateTime = function DateTime(_ref) {
       numeric: 'auto'
     });
   }
-  return (0, _react.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) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type][typeVariant], {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: (0, _runtime.ax)(["_11c8qk37 _1reo15vq _18m915vq _syaz131l _1e0ccj1k _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _102k1j6v", className])
+  }, text ? "".concat(text, " ").concat(context) : /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context: context
     }
   })));
 };
+var DateTime = function DateTime(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(DateTimeNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_DateTimeOld.default, props);
+  }
+};
 var _default = exports.default = DateTime;