@atlaskit/smart-card 34.5.2 → 34.6.1

package/dist/esm/view/FlexibleCard/components/elements/lozenge/LozengeOld.js

@@ -0,0 +1,58 @@
+/**
+ * @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 AtlaskitLozenge from '@atlaskit/lozenge';
+import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
+import LozengeAction from './lozenge-action';
+var styles = css({
+  display: 'inline-flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: 'inherit'
+});
+
+/**
+ * A base element that displays a Lozenge.
+ * @internal
+ * @param {LozengeProps} LozengeProps - The props necessary for the Lozenge element.
+ * @see State
+ */
+var LozengeOld = function LozengeOld(_ref) {
+  var action = _ref.action,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    name = _ref.name,
+    overrideCss = _ref.overrideCss,
+    style = _ref.style,
+    text = _ref.text,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
+  var ui = useFlexibleUiOptionContext();
+  if (!text) {
+    return null;
+  }
+  var lozenge = action ? jsx(LozengeAction, {
+    action: action,
+    appearance: appearance,
+    testId: testId,
+    text: text,
+    zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
+  }) : jsx(AtlaskitLozenge, {
+    appearance: appearance
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: style,
+    testId: "".concat(testId, "-lozenge")
+  }, text);
+  return jsx("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: [styles, overrideCss],
+    "data-fit-to-content": true,
+    "data-smart-element": name,
+    "data-smart-element-lozenge": true,
+    "data-testid": testId
+  }, lozenge);
+};
+export default LozengeOld;

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

@@ -0,0 +1,2 @@
+._1e0c116y{display:inline-flex}
+._vwz41kw7{line-height:inherit}

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

@@ -1,17 +1,13 @@
-/**
- * @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 "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import AtlaskitLozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import LozengeAction from './lozenge-action';
-var styles = css({
-  display: 'inline-flex',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 'inherit'
-});
+import LozengeOld from './LozengeOld';
+var styles = null;
 
 /**
  * A base element that displays a Lozenge.
@@ -19,12 +15,12 @@ var styles = css({
  * @param {LozengeProps} LozengeProps - The props necessary for the Lozenge element.
  * @see State
  */
-var Lozenge = function Lozenge(_ref) {
+var LozengeNew = function LozengeNew(_ref) {
   var action = _ref.action,
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     name = _ref.name,
-    overrideCss = _ref.overrideCss,
+    className = _ref.className,
     style = _ref.style,
     text = _ref.text,
     _ref$testId = _ref.testId,
@@ -33,26 +29,34 @@ var Lozenge = function Lozenge(_ref) {
   if (!text) {
     return null;
   }
-  var lozenge = action ? jsx(LozengeAction, {
+  var lozenge = action ? /*#__PURE__*/React.createElement(LozengeAction, {
     action: action,
     appearance: appearance,
     testId: testId,
     text: text,
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
-  }) : jsx(AtlaskitLozenge, {
+  }) : /*#__PURE__*/React.createElement(AtlaskitLozenge, {
     appearance: appearance
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: style,
     testId: "".concat(testId, "-lozenge")
   }, text);
-  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-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
     "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax(["_1e0c116y _vwz41kw7", className])
   }, lozenge);
 };
+var Lozenge = function Lozenge(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(LozengeNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(LozengeOld, props);
+  }
+};
 export default Lozenge;

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/index.js

@@ -2,14 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import { useAnalyticsEvents } from '../../../../../../common/analytics/generated/use-analytics-events';
 import extractLozengeActionItems from '../../../../../../extractors/action/extract-lozenge-action-items';
@@ -140,7 +133,7 @@ var LozengeAction = function LozengeAction(_ref) {
     };
   }(), [action.read, invoke, isLoaded, text, fireEvent]);
   var trigger = useCallback(function (props) {
-    return jsx(LozengeActionTrigger, _extends({}, props, {
+    return /*#__PURE__*/React.createElement(LozengeActionTrigger, _extends({}, props, {
       appearance: selected.appearance,
       isOpen: isOpen,
       testId: testId,
@@ -208,7 +201,7 @@ var LozengeAction = function LozengeAction(_ref) {
   }(), [action === null || action === void 0 ? void 0 : action.update, invoke, linkId, reload, url, fireEvent]);
   var dropdownItemGroup = useMemo(function () {
     if (errorMessage) {
-      return jsx(LozengeActionError, {
+      return /*#__PURE__*/React.createElement(LozengeActionError, {
         errorMessage: errorMessage,
         testId: testId,
         url: url,
@@ -216,14 +209,14 @@ var LozengeAction = function LozengeAction(_ref) {
       });
     }
     if (items && items.length > 0) {
-      return jsx(LozengeActionItemsGroup, {
+      return /*#__PURE__*/React.createElement(LozengeActionItemsGroup, {
         testId: testId,
         items: items,
         onClick: handleItemClick
       });
     }
   }, [errorMessage, handleItemClick, items, invokePreviewAction, testId, url]);
-  return jsx(DropdownMenu, {
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
     isLoading: isLoading,
     isOpen: isOpen,
     onOpenChange: handleOpenChange,

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/LozengeActionErrorOld.js

@@ -0,0 +1,70 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Fragment, useCallback, 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 { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import { R50, R500 } from '@atlaskit/theme/colors';
+import { useAnalyticsEvents } from '../../../../../../../common/analytics/generated/use-analytics-events';
+import { messages } from '../../../../../../../messages';
+import useInvokeClientAction from '../../../../../../../state/hooks/use-invoke-client-action';
+import { getFormattedMessage } from '../../../../utils';
+import { contentStyles, dropdownItemGroupStyles, linkStyles, textStyles } from './styled';
+var MAX_LINE_NUMBER = 8;
+var LozengeActionErrorOld = function LozengeActionErrorOld(_ref) {
+  var errorMessage = _ref.errorMessage,
+    testId = _ref.testId,
+    _ref$maxLineNumber = _ref.maxLineNumber,
+    maxLineNumber = _ref$maxLineNumber === void 0 ? MAX_LINE_NUMBER : _ref$maxLineNumber,
+    invokePreviewAction = _ref.invokePreviewAction;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  var invoke = useInvokeClientAction({});
+  var isPreviewAvailable = invokePreviewAction !== undefined;
+  var handlePreviewOpen = useCallback(function () {
+    if (isPreviewAvailable) {
+      fireEvent('ui.button.clicked.smartLinkStatusOpenPreview', {});
+      if (invokePreviewAction) {
+        invoke(invokePreviewAction);
+      }
+    }
+  }, [isPreviewAvailable, invoke, invokePreviewAction, fireEvent]);
+  var content = useMemo(function () {
+    return jsx(Fragment, null, jsx("div", {
+      css: contentStyles
+    }, jsx(ErrorIcon, {
+      testId: "".concat(testId, "-icon"),
+      LEGACY_size: "medium",
+      color: "var(--ds-icon-danger, ".concat(R500, ")"),
+      LEGACY_secondaryColor: "var(--ds-background-danger, ".concat(R50, ")"),
+      label: 'error',
+      spacing: "spacious"
+    }), jsx("span", {
+      css: textStyles(maxLineNumber),
+      "data-testid": "".concat(testId, "-error-message")
+    }, typeof errorMessage === 'string' ? errorMessage : getFormattedMessage(errorMessage))), isPreviewAvailable ?
+    // 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: linkStyles
+    }, jsx("a", {
+      target: "_blank",
+      "data-testid": "".concat(testId, "-open-embed"),
+      onClick: handlePreviewOpen
+    }, jsx(FormattedMessage, messages.open_issue_in_jira))) : null);
+  }, [errorMessage, handlePreviewOpen, isPreviewAvailable, maxLineNumber, 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("span", {
+      css: dropdownItemGroupStyles,
+      "data-testid": "".concat(testId, "-error-item-group")
+    }, jsx(DropdownItemGroup, null, jsx(DropdownItem, {
+      testId: "".concat(testId, "-error")
+    }, content)))
+  );
+};
+export default LozengeActionErrorOld;

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/index.compiled.css

@@ -0,0 +1,27 @@
+._11c81doa{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._pqme1oud >div, ._102e1oud >span{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulpcxkx{gap:var(--ds-space-100,.5rem)}
+._14hp1wdt button{width:220px}
+._18m915vq{overflow-y:hidden}
+._18u0xy5q{margin-left:var(--ds-space-400,2pc)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._19pkv77o{margin-top:var(--ds-space-025,2px)}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
+._1e0ccj1k{display:-webkit-box}
+._1nmz1hna{word-break:break-word}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._1yyj1n6p{-webkit-line-clamp:var(--_t4prqe)}
+._2lx2vrvc{flex-direction:row}
+._4cvr1h6o{align-items:center}
+._4cvr1y6m{align-items:flex-start}
+._80omtlke{cursor:pointer}
+._ngc01o8f >div, ._1t4p1o8f >span{color:var(--_ggxzyp)}
+._o5724jg8{white-space:normal}
+._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
+._sudp1e54{-webkit-box-orient:vertical}
+._1eo073ad button:hover{cursor:default}
+._6pup1kw7 button:hover{background-color:inherit}
+@supports not (-webkit-line-clamp:1){._102k1hw0{max-height:var(--_hm3wc5)}}

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/index.js

@@ -1,22 +1,24 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, useCallback, 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 { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
-import { R50, R500 } from '@atlaskit/theme/colors';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N800, R50, R500 } from '@atlaskit/theme/colors';
 import { useAnalyticsEvents } from '../../../../../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../../../../../messages';
 import useInvokeClientAction from '../../../../../../../state/hooks/use-invoke-client-action';
 import { getFormattedMessage } from '../../../../utils';
-import { contentStyles, dropdownItemGroupStyles, linkStyles, textStyles } from './styled';
+import LozengeActionErrorOld from './LozengeActionErrorOld';
 var MAX_LINE_NUMBER = 8;
-var LozengeActionError = function LozengeActionError(_ref) {
+var contentStyles = null;
+var linkStyles = null;
+var textStylesBase = null;
+var dropdownItemGroupStyles = null;
+var LozengeActionErrorNew = function LozengeActionErrorNew(_ref) {
   var errorMessage = _ref.errorMessage,
     testId = _ref.testId,
     _ref$maxLineNumber = _ref.maxLineNumber,
@@ -34,37 +36,47 @@ var LozengeActionError = function LozengeActionError(_ref) {
       }
     }
   }, [isPreviewAvailable, invoke, invokePreviewAction, fireEvent]);
+  var dynamicCss = null;
   var content = useMemo(function () {
-    return jsx(Fragment, null, jsx("div", {
-      css: contentStyles
-    }, jsx(ErrorIcon, {
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: ax(["_zulpcxkx _11c81doa _1reo15vq _18m915vq _1e0c1txw _1ul9idpf _2lx2vrvc _19pkv77o _4cvr1y6m _pqme1oud _102e1oud _ngc01o8f _1t4p1o8f"]),
+      style: {
+        "--_ggxzyp": ix("var(--ds-text, ".concat(N800, ")"))
+      }
+    }, /*#__PURE__*/React.createElement(ErrorIcon, {
       testId: "".concat(testId, "-icon"),
       LEGACY_size: "medium",
       color: "var(--ds-icon-danger, ".concat(R500, ")"),
       LEGACY_secondaryColor: "var(--ds-background-danger, ".concat(R50, ")"),
       label: 'error',
       spacing: "spacious"
-    }), jsx("span", {
-      css: textStyles(maxLineNumber),
-      "data-testid": "".concat(testId, "-error-message")
-    }, typeof errorMessage === 'string' ? errorMessage : getFormattedMessage(errorMessage))), isPreviewAvailable ?
-    // 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: linkStyles
-    }, jsx("a", {
+    }), /*#__PURE__*/React.createElement("span", {
+      "data-testid": "".concat(testId, "-error-message"),
+      className: ax(["_11c81doa _1reo15vq _18m915vq _o5724jg8 _1e0ccj1k _1bto1l2s _1nmz1hna _sudp1e54", "_1yyj1n6p _102k1hw0"]),
+      style: {
+        "--_t4prqe": ix(maxLineNumber),
+        "--_hm3wc5": ix("calc(".concat(maxLineNumber, " * 1rem)"))
+      }
+    }, typeof errorMessage === 'string' ? errorMessage : getFormattedMessage(errorMessage))), isPreviewAvailable ? /*#__PURE__*/React.createElement("div", {
+      className: ax(["_zulpcxkx _1reo15vq _18m915vq _11c81oud _1e0c1txw _1ul9idpf _2lx2vrvc _4cvr1h6o _80omtlke _19pku2gc _18u0xy5q _otyrv77o"])
+    }, /*#__PURE__*/React.createElement("a", {
       target: "_blank",
       "data-testid": "".concat(testId, "-open-embed"),
       onClick: handlePreviewOpen
-    }, jsx(FormattedMessage, messages.open_issue_in_jira))) : null);
-  }, [errorMessage, handlePreviewOpen, isPreviewAvailable, maxLineNumber, 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("span", {
-      css: dropdownItemGroupStyles,
-      "data-testid": "".concat(testId, "-error-item-group")
-    }, jsx(DropdownItemGroup, null, jsx(DropdownItem, {
-      testId: "".concat(testId, "-error")
-    }, content)))
-  );
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.open_issue_in_jira))) : null);
+  }, [errorMessage, handlePreviewOpen, isPreviewAvailable, testId, dynamicCss]);
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": "".concat(testId, "-error-item-group"),
+    className: ax(["_14hp1wdt _6pup1kw7 _1eo073ad"])
+  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
+    testId: "".concat(testId, "-error")
+  }, content)));
+};
+var LozengeActionError = function LozengeActionError(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(LozengeActionErrorNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(LozengeActionErrorOld, props);
+  }
 };
 export default LozengeActionError;

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/styled.js

@@ -1,8 +1,12 @@
+/* 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 } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 import { getTruncateStyles } from '../../../../utils';
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var dropdownItemGroupStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -17,7 +21,6 @@ export var dropdownItemGroupStyles = css({
 var sharedBlockStyles = css({
   display: 'flex',
   gap: "var(--ds-space-100, 0.5rem)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1rem',
   minWidth: 0,
   overflow: 'hidden',
@@ -25,6 +28,9 @@ var sharedBlockStyles = css({
   alignItems: 'center'
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 export var contentStyles = css(sharedBlockStyles, {
   marginTop: "var(--ds-space-025, 2px)",
@@ -36,6 +42,9 @@ export var contentStyles = css(sharedBlockStyles, {
   }
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 export var linkStyles = css(sharedBlockStyles, {
   cursor: 'pointer',
@@ -44,9 +53,12 @@ export var linkStyles = css(sharedBlockStyles, {
   marginLeft: "var(--ds-space-400, 32px)",
   marginBottom: "var(--ds-space-025, 2px)"
 });
+
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 export var textStyles = function textStyles(maxLines) {
   return css({
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '1rem',
     whiteSpace: 'normal'
   },

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-items-group/LozengeActionItemsGroupOld.js

@@ -0,0 +1,29 @@
+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 { jsx } from '@emotion/react';
+import { DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import LozengeActionItem from '../lozenge-action-item';
+import { dropdownItemGroupStyles } from '../styled';
+var LozengeActionItemsGroupOld = function LozengeActionItemsGroupOld(_ref) {
+  var items = _ref.items,
+    testId = _ref.testId,
+    onClick = _ref.onClick;
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("span", {
+      css: dropdownItemGroupStyles,
+      "data-testid": "".concat(testId, "-item-group")
+    }, jsx(DropdownItemGroup, null, items.map(function (item, idx) {
+      return jsx(LozengeActionItem, _extends({}, item, {
+        key: idx,
+        onClick: onClick,
+        testId: "".concat(testId, "-item-").concat(idx)
+      }));
+    })))
+  );
+};
+export default LozengeActionItemsGroupOld;

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-items-group/index.compiled.css

@@ -0,0 +1,12 @@
+
+._keweg4wb button{padding:var(--_1puzam4)}._14hp1wdt button{width:220px}
+._18m91wug{overflow-y:auto}
+._c71l1mjv{max-height:300px}
+._d4lf1f4h button{min-height:28px}
+._1ll7166n button:focus, ._qprf166n button:focus-visible{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._1pv01r31 button:focus, ._1m1b1r31 button:focus-visible{outline-color:currentColor}
+._n6y8usvi button:focus, ._109gusvi button:focus-visible{box-sizing:border-box}
+._ph3k1o36 button:focus, ._1twe1o36 button:focus-visible{outline-width:medium}
+._qh55glyw button:focus, ._lt2aglyw button:focus-visible{outline-style:none}
+._z29h1bda button:focus, ._wlxp1bda button:focus-visible{box-shadow:var(--_1uho1ce)}
+._6pup1kw7 button:hover{background-color:inherit}

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-items-group/index.js

@@ -1,29 +1,37 @@
+/* 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 { jsx } from '@emotion/react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import LozengeActionItem from '../lozenge-action-item';
-import { dropdownItemGroupStyles } from '../styled';
-var LozengeActionItemsGroup = function LozengeActionItemsGroup(_ref) {
+import LozengeActionItemsGroupOld from './LozengeActionItemsGroupOld';
+var dropdownItemGroupStyles = null;
+var LozengeActionItemsGroupNew = function LozengeActionItemsGroupNew(_ref) {
   var items = _ref.items,
     testId = _ref.testId,
     onClick = _ref.onClick;
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("span", {
-      css: dropdownItemGroupStyles,
-      "data-testid": "".concat(testId, "-item-group")
-    }, jsx(DropdownItemGroup, null, items.map(function (item, idx) {
-      return jsx(LozengeActionItem, _extends({}, item, {
-        key: idx,
-        onClick: onClick,
-        testId: "".concat(testId, "-item-").concat(idx)
-      }));
-    })))
-  );
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": "".concat(testId, "-item-group"),
+    className: ax(["_c71l1mjv _18m91wug _keweg4wb _1pv01r31 _1m1b1r31 _qh55glyw _lt2aglyw _ph3k1o36 _1twe1o36 _1ll7166n _qprf166n _n6y8usvi _109gusvi _z29h1bda _wlxp1bda _d4lf1f4h _14hp1wdt _6pup1kw7"]),
+    style: {
+      "--_1puzam4": ix("var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-150, 12px)")),
+      "--_1uho1ce": ix("inset 2px 0 0 ".concat("var(--ds-border-selected, #0C66E4)"))
+    }
+  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, items.map(function (item, idx) {
+    return /*#__PURE__*/React.createElement(LozengeActionItem, _extends({}, item, {
+      key: idx,
+      onClick: onClick,
+      testId: "".concat(testId, "-item-").concat(idx)
+    }));
+  })));
+};
+var LozengeActionItemsGroup = function LozengeActionItemsGroup(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(LozengeActionItemsGroupNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(LozengeActionItemsGroupOld, props);
+  }
 };
 export default LozengeActionItemsGroup;

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/LozengeActionTriggerOld.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["appearance", "isOpen", "testId", "text", "triggerRef"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useMemo, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import Lozenge from '@atlaskit/lozenge';
+import { Box, xcss } from '@atlaskit/primitives';
+import { triggerButtonStyles, triggerLozengeStyles } from '../styled';
+var chevronDownStyles = xcss({
+  marginLeft: 'space.075',
+  display: 'flex'
+});
+var LozengeActionTriggerOld = function LozengeActionTriggerOld(_ref) {
+  var appearance = _ref.appearance,
+    isOpen = _ref.isOpen,
+    testId = _ref.testId,
+    text = _ref.text,
+    triggerRef = _ref.triggerRef,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isBold = _useState2[0],
+    setIsBold = _useState2[1];
+  var onMouseEnter = useCallback(function () {
+    return setIsBold(true);
+  }, []);
+  var onMouseLeave = useCallback(function () {
+    return setIsBold(false);
+  }, []);
+  var lozenge = useMemo(function () {
+    return jsx(Lozenge, {
+      appearance: appearance,
+      isBold: isBold
+    }, jsx("span", {
+      css: triggerLozengeStyles
+    }, jsx("span", null, text), jsx(Box, {
+      as: "span",
+      xcss: chevronDownStyles
+    }, jsx(ChevronDownIcon, {
+      color: "currentColor",
+      label: "options",
+      LEGACY_size: "medium",
+      LEGACY_margin: "-4px -8px -4px -7px"
+    }))));
+  }, [appearance, isBold, text]);
+  return jsx("button", _extends({
+    type: "button"
+  }, props, {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    css: triggerButtonStyles,
+    "data-action-open": isOpen,
+    "data-testid": "".concat(testId, "--trigger"),
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    ref: triggerRef
+  }), lozenge);
+};
+export default LozengeActionTriggerOld;

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/index.compiled.css

@@ -0,0 +1,26 @@
+
+._kkk2n7od{all:unset}
+._18s8v77o{margin:var(--ds-space-025,2px)}
+._15vhn7od{font-variant:unset}
+._189eyh40{border-width:2px}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}
+._19bvidpf{padding-left:0}
+._1e0c1txw{display:flex}
+._1p1dn7od{text-transform:unset}
+._1wybn7od{font-size:unset}
+._4cvr1h6o{align-items:center}
+._80omtlke{cursor:pointer}
+._bfhk18uv{background-color:initial}
+._ca0qidpf{padding-top:0}
+._ect4n7od{font-family:unset}
+._k48pn7od{font-weight:unset}
+._n3tdidpf{padding-bottom:0}
+._syazn7od{color:unset}
+._u5f3idpf{padding-right:0}
+._vwz4idpf{line-height:0}
+._zg8ln7od{font-style:unset}
+._1bas14y2:focus-visible, ._19h614y2:focus-within, ._1d3914y2[aria-expanded=true]{border-radius:5px}._128m1o36:focus-visible, ._11ow1o36:focus-within, ._j8b81o36[aria-expanded=true]{outline-width:medium}
+._1ejjo89b:focus-visible, ._1u6lo89b:focus-within, ._6ssho89b[aria-expanded=true]{box-shadow:var(--_sq39bb)}
+._mizu1r31:focus-visible, ._1guj1r31:focus-within, ._p8tl1r31[aria-expanded=true]{outline-color:currentColor}
+._ra3xglyw:focus-visible, ._pbhaglyw:focus-within, ._1q2vglyw[aria-expanded=true]{outline-style:none}