@atlaskit/smart-card 34.5.2 → 34.6.0

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

@@ -1,12 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @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';
@@ -89,7 +82,7 @@ const LozengeAction = ({
       setErrorMessage(undefined);
     }
   }, [action.read, invoke, isLoaded, text, fireEvent]);
-  const trigger = useCallback(props => jsx(LozengeActionTrigger, _extends({}, props, {
+  const trigger = useCallback(props => /*#__PURE__*/React.createElement(LozengeActionTrigger, _extends({}, props, {
     appearance: selected.appearance,
     isOpen: isOpen,
     testId: testId,
@@ -131,7 +124,7 @@ const LozengeAction = ({
   }, [action === null || action === void 0 ? void 0 : action.update, invoke, linkId, reload, url, fireEvent]);
   const dropdownItemGroup = useMemo(() => {
     if (errorMessage) {
-      return jsx(LozengeActionError, {
+      return /*#__PURE__*/React.createElement(LozengeActionError, {
         errorMessage: errorMessage,
         testId: testId,
         url: url,
@@ -139,14 +132,14 @@ const LozengeAction = ({
       });
     }
     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/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/LozengeActionErrorOld.js

@@ -0,0 +1,71 @@
+/**
+ * @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';
+const MAX_LINE_NUMBER = 8;
+const LozengeActionErrorOld = ({
+  errorMessage,
+  testId,
+  maxLineNumber = MAX_LINE_NUMBER,
+  invokePreviewAction
+}) => {
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
+  const invoke = useInvokeClientAction({});
+  const isPreviewAvailable = invokePreviewAction !== undefined;
+  const handlePreviewOpen = useCallback(() => {
+    if (isPreviewAvailable) {
+      fireEvent('ui.button.clicked.smartLinkStatusOpenPreview', {});
+      if (invokePreviewAction) {
+        invoke(invokePreviewAction);
+      }
+    }
+  }, [isPreviewAvailable, invoke, invokePreviewAction, fireEvent]);
+  const content = useMemo(() => {
+    return jsx(Fragment, null, jsx("div", {
+      css: contentStyles
+    }, jsx(ErrorIcon, {
+      testId: `${testId}-icon`,
+      LEGACY_size: "medium",
+      color: `var(--ds-icon-danger, ${R500})`,
+      LEGACY_secondaryColor: `var(--ds-background-danger, ${R50})`,
+      label: 'error',
+      spacing: "spacious"
+    }), jsx("span", {
+      css: textStyles(maxLineNumber),
+      "data-testid": `${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": `${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": `${testId}-error-item-group`
+    }, jsx(DropdownItemGroup, null, jsx(DropdownItem, {
+      testId: `${testId}-error`
+    }, content)))
+  );
+};
+export default LozengeActionErrorOld;

package/dist/es2019/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}
+._ngc01fxt >div, ._1t4p1fxt >span{color:var(--ds-text,#172b4d)}
+._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){._102k16q4{max-height:calc(var(--_t4prqe)*1rem)}}

package/dist/es2019/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';
 const MAX_LINE_NUMBER = 8;
-const LozengeActionError = ({
+const contentStyles = null;
+const linkStyles = null;
+const textStylesBase = null;
+const dropdownItemGroupStyles = null;
+const LozengeActionErrorNew = ({
   errorMessage,
   testId,
   maxLineNumber = MAX_LINE_NUMBER,
@@ -35,37 +37,43 @@ const LozengeActionError = ({
       }
     }
   }, [isPreviewAvailable, invoke, invokePreviewAction, fireEvent]);
+  const dynamicCss = null;
   const content = useMemo(() => {
-    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 _ngc01fxt _1t4p1fxt"])
+    }, /*#__PURE__*/React.createElement(ErrorIcon, {
       testId: `${testId}-icon`,
       LEGACY_size: "medium",
       color: `var(--ds-icon-danger, ${R500})`,
       LEGACY_secondaryColor: `var(--ds-background-danger, ${R50})`,
       label: 'error',
       spacing: "spacious"
-    }), jsx("span", {
-      css: textStyles(maxLineNumber),
-      "data-testid": `${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": `${testId}-error-message`,
+      className: ax(["_11c81doa _1reo15vq _18m915vq _o5724jg8 _1e0ccj1k _1bto1l2s _1nmz1hna _sudp1e54", "_1yyj1n6p _102k16q4"]),
+      style: {
+        "--_t4prqe": ix(maxLineNumber)
+      }
+    }, 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": `${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": `${testId}-error-item-group`
-    }, jsx(DropdownItemGroup, null, jsx(DropdownItem, {
-      testId: `${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": `${testId}-error-item-group`,
+    className: ax(["_14hp1wdt _6pup1kw7 _1eo073ad"])
+  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
+    testId: `${testId}-error`
+  }, content)));
+};
+const 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/es2019/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 const dropdownItemGroupStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -17,7 +21,6 @@ export const dropdownItemGroupStyles = css({
 const 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 @@ const 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 const contentStyles = css(sharedBlockStyles, {
   marginTop: "var(--ds-space-025, 2px)",
@@ -36,6 +42,9 @@ export const 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 const linkStyles = css(sharedBlockStyles, {
   cursor: 'pointer',
@@ -44,8 +53,11 @@ export const 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 const textStyles = maxLines => css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1rem',
   whiteSpace: 'normal'
 },

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

@@ -0,0 +1,25 @@
+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';
+const LozengeActionItemsGroupOld = ({
+  items,
+  testId,
+  onClick
+}) =>
+// 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": `${testId}-item-group`
+}, jsx(DropdownItemGroup, null, items.map((item, idx) => jsx(LozengeActionItem, _extends({}, item, {
+  key: idx,
+  onClick: onClick,
+  testId: `${testId}-item-${idx}`
+})))));
+export default LozengeActionItemsGroupOld;

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

@@ -0,0 +1,12 @@
+
+._kewe1ano button{padding:var(--ds-space-075,6px) var(--ds-space-150,9pt)}._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}
+._z29hu4to button:focus, ._wlxpu4to button:focus-visible{box-shadow:inset 2px 0 0 var(--ds-border-selected,#0c66e4)}
+._6pup1kw7 button:hover{background-color:inherit}

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

@@ -1,25 +1,30 @@
+/* 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';
-const LozengeActionItemsGroup = ({
+import LozengeActionItemsGroupOld from './LozengeActionItemsGroupOld';
+const dropdownItemGroupStyles = null;
+const LozengeActionItemsGroupNew = ({
   items,
   testId,
   onClick
-}) =>
-// 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": `${testId}-item-group`
-}, jsx(DropdownItemGroup, null, items.map((item, idx) => jsx(LozengeActionItem, _extends({}, item, {
+}) => /*#__PURE__*/React.createElement("span", {
+  "data-testid": `${testId}-item-group`,
+  className: ax(["_c71l1mjv _18m91wug _kewe1ano _1pv01r31 _1m1b1r31 _qh55glyw _lt2aglyw _ph3k1o36 _1twe1o36 _1ll7166n _qprf166n _n6y8usvi _109gusvi _z29hu4to _wlxpu4to _d4lf1f4h _14hp1wdt _6pup1kw7"])
+}, /*#__PURE__*/React.createElement(DropdownItemGroup, null, items.map((item, idx) => /*#__PURE__*/React.createElement(LozengeActionItem, _extends({}, item, {
   key: idx,
   onClick: onClick,
   testId: `${testId}-item-${idx}`
 })))));
+const 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/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-trigger/LozengeActionTriggerOld.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @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';
+const chevronDownStyles = xcss({
+  marginLeft: 'space.075',
+  display: 'flex'
+});
+const LozengeActionTriggerOld = ({
+  appearance,
+  isOpen,
+  testId,
+  text,
+  triggerRef,
+  ...props
+}) => {
+  const [isBold, setIsBold] = useState(false);
+  const onMouseEnter = useCallback(() => setIsBold(true), []);
+  const onMouseLeave = useCallback(() => setIsBold(false), []);
+  const lozenge = useMemo(() => 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": `${testId}--trigger`,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    ref: triggerRef
+  }), lozenge);
+};
+export default LozengeActionTriggerOld;

package/dist/es2019/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}
+._1ejj1vm4:focus-visible, ._1u6l1vm4:focus-within, ._6ssh1vm4[aria-expanded=true]{box-shadow:0 0 0 2px var(--ds-border-focused,#388bff)}
+._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}

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

@@ -1,21 +1,23 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useMemo, useState } from 'react';
+import "./index.compiled.css";
+import * as React from 'react';
+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 { jsx } from '@emotion/react';
+import { useCallback, useMemo, useState } from 'react';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
-import { triggerButtonStyles, triggerLozengeStyles } from '../styled';
+import LozengeActionTriggerOld from './LozengeActionTriggerOld';
 const chevronDownStyles = xcss({
   marginLeft: 'space.075',
   display: 'flex'
 });
-const LozengeActionTrigger = ({
+const triggerLozengeStyles = null;
+const triggerButtonStyles = null;
+const LozengeActionTriggerNew = ({
   appearance,
   isOpen,
   testId,
@@ -26,30 +28,36 @@ const LozengeActionTrigger = ({
   const [isBold, setIsBold] = useState(false);
   const onMouseEnter = useCallback(() => setIsBold(true), []);
   const onMouseLeave = useCallback(() => setIsBold(false), []);
-  const lozenge = useMemo(() => jsx(Lozenge, {
+  const lozenge = useMemo(() => /*#__PURE__*/React.createElement(Lozenge, {
     appearance: appearance,
     isBold: isBold
-  }, jsx("span", {
-    css: triggerLozengeStyles
-  }, jsx("span", null, text), jsx(Box, {
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax(["_4cvr1h6o _1e0c1txw"])
+  }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: chevronDownStyles
-  }, jsx(ChevronDownIcon, {
+  }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
     color: "currentColor",
     label: "options",
     LEGACY_size: "medium",
     LEGACY_margin: "-4px -8px -4px -7px"
   })))), [appearance, isBold, text]);
-  return jsx("button", _extends({
+  return /*#__PURE__*/React.createElement("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": `${testId}--trigger`,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
-    ref: triggerRef
+    ref: triggerRef,
+    className: ax(["_kkk2n7od _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _18s8v77o _15vhn7od _1dqonqa1 _189eyh40 _1h6d1j28 _bfhk18uv _syazn7od _80omtlke _ect4n7od _1wybn7od _zg8ln7od _k48pn7od _vwz4idpf _1p1dn7od _mizu1r31 _1guj1r31 _p8tl1r31 _ra3xglyw _pbhaglyw _1q2vglyw _128m1o36 _11ow1o36 _j8b81o36 _1bas14y2 _19h614y2 _1d3914y2 _1ejj1vm4 _1u6l1vm4 _6ssh1vm4"])
   }), lozenge);
 };
+const LozengeActionTrigger = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(LozengeActionTriggerNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(LozengeActionTriggerOld, props);
+  }
+};
 export default LozengeActionTrigger;

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

@@ -1,19 +1,20 @@
+/* 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';
+/**
+ * @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 const triggerButtonStyles = css({
   all: 'unset',
   backgroundColor: 'transparent',
   color: 'unset',
   cursor: 'pointer',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontFamily: 'unset',
   fontSize: 'unset',
   fontStyle: 'unset',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontWeight: 'unset',
   fontVariant: 'unset',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   padding: 0,
   textTransform: 'unset',
@@ -27,12 +28,18 @@ export const triggerButtonStyles = css({
   }
 });
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const triggerLozengeStyles = css({
   alignItems: 'center',
   display: 'flex'
 });
 
+/**
+ * @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 const dropdownItemGroupStyles = css({
   maxHeight: '300px',