@atlaskit/smart-card 34.0.0 → 34.1.0

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/skeleton/main.js

@@ -1,82 +1,42 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx, keyframes } from '@emotion/react';
+/* main.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./main.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N20, N30 } from '@atlaskit/theme/colors';
-const AutomationSkeletonContainer = css({
-  paddingBlock: "var(--ds-space-025, 2px)"
-});
-const SkeletonContainer = css({
-  marginBlock: "var(--ds-space-100, 8px)",
-  marginInline: "var(--ds-space-250, 20px)",
-  display: 'flex'
-});
-const SkeletonIcon = css({
-  width: "var(--ds-space-200, 16px)",
-  height: "var(--ds-space-200, 16px)",
-  display: 'inline-block',
-  borderRadius: "var(--ds-space-025, 2px)",
-  backgroundColor: 'currentColor',
-  border: `${"var(--ds-space-025, 2px)"} solid transparent`,
-  opacity: 0.15
-});
-const MenuIcon = css({
-  width: '24px',
-  height: '24px',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-});
-const shimmer = keyframes({
-  '0%': {
-    backgroundPosition: '-300px 0'
-  },
-  '100%': {
-    backgroundPosition: '2000px 0'
-  }
-});
-const SkeletonText = css({
-  width: '85%',
-  height: "var(--ds-space-200, 16px)",
-  marginTop: "var(--ds-space-050, 4px)",
-  marginLeft: "var(--ds-space-150, 12px)",
-  animationDuration: '1s',
-  animationFillMode: 'forwards',
-  animationIterationCount: 'infinite',
-  animationName: shimmer,
-  animationTimingFunction: 'linear',
-  backgroundColor: `var(--ds-skeleton, ${N30})`,
-  backgroundImage: `linear-gradient(to right, ${`var(--ds-skeleton, ${N30})`} 10%, ${`var(--ds-skeleton-subtle, ${N20})`} 30%, ${`var(--ds-skeleton, ${N30})`} 50%)`,
-  backgroundRepeat: 'no-repeat'
-});
-const SkeletonLine = () => jsx("div", {
-  css: SkeletonContainer
-}, jsx("div", {
-  css: MenuIcon
-}, jsx("div", {
-  css: SkeletonIcon
-})), jsx("div", {
-  css: SkeletonText
+import { SkeletonOld } from './SkeletonOld';
+const AutomationSkeletonContainer = null;
+const SkeletonContainer = null;
+const SkeletonIcon = null;
+const MenuIcon = null;
+const shimmer = null;
+const SkeletonText = null;
+const SkeletonLine = () => /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1mouu2gc _195gv47k _1e0c1txw"])
+}, /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1bsb1tcg _4t3i1tcg _1e0c1txw _1bah1h6o _4cvr1h6o"])
+}, /*#__PURE__*/React.createElement("div", {
+  className: ax(["_2rkov77o _19it1i39 _1bsbpxbi _4t3ipxbi _1e0c1o8l _bfhk1r31 _tzy4nh7s"])
+})), /*#__PURE__*/React.createElement("div", {
+  className: ax(["_1bsb13sl _4t3ipxbi _19pk1b66 _18u0utpp _5sag9cwz _1o51q7pw _tip812c5 _j7hq1nls _1pglp3kn _bfhkqrzy _1itk34ia _12vemgnk"])
 }));
 const getSkeletonLines = lineCount => {
   const skeletonLines = [];
   for (let i = 0; i < lineCount; i++) {
-    skeletonLines.push(jsx(SkeletonLine, {
+    skeletonLines.push( /*#__PURE__*/React.createElement(SkeletonLine, {
       key: `skeleton-line-${i}`
     }));
   }
   return skeletonLines;
 };
-export const Skeleton = props => {
+export const SkeletonNew = props => {
   const {
     lineCount = 5
   } = props;
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/use-primitives
-    jsx("div", {
-      css: AutomationSkeletonContainer
-    }, getSkeletonLines(lineCount))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1rjcv77o"])
+  }, getSkeletonLines(lineCount));
+};
+export const Skeleton = props => {
+  return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(SkeletonNew, props) : /*#__PURE__*/React.createElement(SkeletonOld, props);
 };

package/dist/es2019/view/FlexibleCard/components/actions/view-related-links-action/index.js

@@ -1,12 +1,8 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { lazy, useCallback } 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 { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../../../messages';
@@ -29,7 +25,7 @@ const ViewRelatedLinksAction = ({
   const onClick = useCallback(() => {
     const ari = actionData === null || actionData === void 0 ? void 0 : actionData.ari;
     if (ari) {
-      modal.open(jsx(RelatedLinksModal, {
+      modal.open( /*#__PURE__*/React.createElement(RelatedLinksModal, {
         ari: ari,
         showModal: true,
         onClose: () => modal.close()
@@ -38,9 +34,9 @@ const ViewRelatedLinksAction = ({
     fireEvent('ui.button.clicked.relatedLinks', {});
     onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback();
   }, [actionData === null || actionData === void 0 ? void 0 : actionData.ari, fireEvent, modal, onClickCallback]);
-  return actionData ? jsx(Action, _extends({
-    content: jsx(FormattedMessage, messages.related_links_view_related_urls),
-    icon: jsx(RelatedLinksActionIcon, null),
+  return actionData ? /*#__PURE__*/React.createElement(Action, _extends({
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_view_related_urls),
+    icon: /*#__PURE__*/React.createElement(RelatedLinksActionIcon, null),
     onClick: onClick,
     testId: "smart-action-view-related-links-action",
     ariaLabel: "View most recent pages or content types coming from or found on this link"

package/dist/es2019/view/FlexibleCard/components/actions/view-related-links-action/related-links-action-icon/RelatedLinksActionIconOld.js

@@ -0,0 +1,23 @@
+/**
+ * @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 ChildIssuesIcon from '@atlaskit/icon/core/migration/child-issues';
+const rotateSvg = css({
+  transform: 'rotate(180deg)',
+  display: 'inline-block'
+});
+
+/**
+ * ChildIssuesIcon but 180 degrees rotated
+ */
+const RelatedLinksActionIconOld = () => jsx("span", {
+  css: rotateSvg
+}, jsx(ChildIssuesIcon, {
+  color: "currentColor",
+  spacing: "spacious",
+  label: "View recent links..."
+}));
+export default RelatedLinksActionIconOld;

package/dist/es2019/view/FlexibleCard/components/actions/view-related-links-action/related-links-action-icon/index.compiled.css

@@ -0,0 +1,2 @@
+._1e0c1o8l{display:inline-block}
+._t9ec1sub{transform:rotate(180deg)}

package/dist/es2019/view/FlexibleCard/components/actions/view-related-links-action/related-links-action-icon/index.js

@@ -1,23 +1,26 @@
-/**
- * @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 ChildIssuesIcon from '@atlaskit/icon/core/migration/child-issues';
-const rotateSvg = css({
-  transform: 'rotate(180deg)',
-  display: 'inline-block'
-});
+import { fg } from '@atlaskit/platform-feature-flags';
+import RelatedLinksActionIconOld from './RelatedLinksActionIconOld';
+const rotateSvg = null;
 
 /**
  * ChildIssuesIcon but 180 degrees rotated
  */
-const RelatedLinksActionIcon = () => jsx("span", {
-  css: rotateSvg
-}, jsx(ChildIssuesIcon, {
+const RelatedLinksActionIconNew = () => /*#__PURE__*/React.createElement("span", {
+  className: ax(["_t9ec1sub _1e0c1o8l"])
+}, /*#__PURE__*/React.createElement(ChildIssuesIcon, {
   color: "currentColor",
   spacing: "spacious",
   label: "View recent links..."
 }));
+const RelatedLinksActionIcon = () => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(RelatedLinksActionIconNew, null);
+  }
+  return /*#__PURE__*/React.createElement(RelatedLinksActionIconOld, null);
+};
 export default RelatedLinksActionIcon;

package/dist/es2019/view/FlexibleCard/components/utils.js

@@ -31,6 +31,10 @@ export const getFormattedMessageAsString = (intl, message, context) => {
     context
   }) : '';
 };
+
+/**
+ * @deprecated remove on FF bandicoots-compiled-migration-smartcard clean up
+ */
 const getIconDimensionStyles = value => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: value,
@@ -45,6 +49,10 @@ const getIconDimensionStyles = value => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   maxWidth: value
 });
+
+/**
+ * @deprecated remove on FF bandicoots-compiled-migration-smartcard clean up
+ */
 export const getIconSizeStyles = width => {
   const sizeStyles = getIconDimensionStyles(width);
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation

package/dist/es2019/view/LinkUrl/index.js

@@ -10,7 +10,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.0.0",
+  packageVersion: "34.1.0",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.0.0"
+  packageVersion: "34.1.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/FlexibleCard/components/actions/action/ActionOld.js

@@ -0,0 +1,104 @@
+/**
+ * @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 { SmartLinkSize } from '../../../../../constants';
+import ActionButton from './action-button';
+import ActionDropdownItem from './action-dropdown-item';
+import ActionIcon from './action-icon';
+import ActionStackItem from './action-stack-item';
+/**
+ * A base action that can be triggered with an on click.
+ * @internal
+ * @param {ActionProps} ActionProps - The props necessary for the Action.
+ */
+var ActionOld = function ActionOld(_ref) {
+  var as = _ref.as,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'subtle' : _ref$appearance,
+    content = _ref.content,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    onClick = _ref.onClick,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-action' : _ref$testId,
+    icon = _ref.icon,
+    _ref$iconPosition = _ref.iconPosition,
+    iconPosition = _ref$iconPosition === void 0 ? 'before' : _ref$iconPosition,
+    spaceInline = _ref.spaceInline,
+    tooltipMessage = _ref.tooltipMessage,
+    tooltipOnHide = _ref.tooltipOnHide,
+    hideTooltip = _ref.hideTooltip,
+    hideTooltipOnMouseDown = _ref.hideTooltipOnMouseDown,
+    xcss = _ref.xcss,
+    asDropDownItem = _ref.asDropDownItem,
+    overrideCss = _ref.overrideCss,
+    isDisabled = _ref.isDisabled,
+    href = _ref.href,
+    ariaLabel = _ref.ariaLabel,
+    Wrapper = _ref.wrapper;
+  if (!onClick) {
+    return null;
+  }
+  var isStackItem = as === 'stack-item';
+  var isDropdownItem = as === 'dropdown-item' || asDropDownItem;
+  var actionIcon = icon && jsx(ActionIcon, {
+    asStackItemIcon: isStackItem,
+    isDisabled: isDisabled,
+    icon: icon,
+    size: size,
+    testId: testId
+  });
+  var iconBefore = icon && iconPosition === 'before' ? actionIcon : undefined;
+  var iconAfter = icon && iconPosition === 'after' ? actionIcon : undefined;
+  if (isStackItem) {
+    return jsx(ActionStackItem, {
+      content: content,
+      icon: actionIcon,
+      space: spaceInline,
+      isDisabled: isDisabled,
+      isLoading: isLoading,
+      onClick: onClick,
+      size: size,
+      testId: testId,
+      tooltipMessage: tooltipMessage || content
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      ,
+      xcss: xcss,
+      tooltipOnHide: tooltipOnHide,
+      hideTooltipOnMouseDown: hideTooltipOnMouseDown,
+      hideTooltip: hideTooltip
+    });
+  }
+  if (isDropdownItem) {
+    return jsx(ActionDropdownItem, {
+      content: content,
+      iconAfter: iconAfter,
+      iconBefore: iconBefore,
+      isLoading: isLoading,
+      onClick: onClick,
+      testId: testId
+    });
+  }
+  var button = jsx(ActionButton, {
+    appearance: appearance,
+    content: content,
+    iconAfter: iconAfter,
+    iconBefore: iconBefore,
+    isLoading: isLoading,
+    onClick: onClick,
+    overrideCss: overrideCss,
+    size: size,
+    testId: testId,
+    tooltipMessage: tooltipMessage || content,
+    isDisabled: isDisabled,
+    href: href,
+    ariaLabel: ariaLabel
+  });
+  return Wrapper !== undefined ? jsx(Wrapper, null, button) : button;
+};
+export default ActionOld;

package/dist/esm/view/FlexibleCard/components/actions/action/action-button/ActionButtonOld.js

@@ -0,0 +1,84 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { LoadingButton } from '@atlaskit/button';
+import Tooltip from '@atlaskit/tooltip';
+import { SmartLinkSize } from '../../../../../../constants';
+import { sizeToButtonSpacing } from '../../../utils';
+var getButtonStyle = function getButtonStyle(size, iconOnly) {
+  switch (size) {
+    case SmartLinkSize.Large:
+      return iconOnly ? css({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+        'button, button:hover, button:focus, button:active': {
+          padding: 0,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+          '> span': {
+            margin: 0
+          }
+        }
+      }) : '';
+    case SmartLinkSize.Small:
+      return css({
+        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)",
+        fontWeight: "var(--ds-font-weight-medium, 500)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        'button, button:hover, button:focus, button:active': [{
+          // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+          lineHeight: 'inherit'
+        }, iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          "]
+      });
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Medium:
+    default:
+      return '';
+  }
+};
+var ActionButtonOld = function ActionButtonOld(_ref) {
+  var appearance = _ref.appearance,
+    content = _ref.content,
+    iconAfter = _ref.iconAfter,
+    iconBefore = _ref.iconBefore,
+    isLoading = _ref.isLoading,
+    onClick = _ref.onClick,
+    overrideCss = _ref.overrideCss,
+    size = _ref.size,
+    testId = _ref.testId,
+    tooltipMessage = _ref.tooltipMessage,
+    isDisabled = _ref.isDisabled,
+    href = _ref.href,
+    ariaLabel = _ref.ariaLabel;
+  var iconOnly = !content;
+  var onButtonClick = useCallback(function (handler) {
+    return function (e) {
+      e.preventDefault();
+      handler();
+    };
+  }, []);
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: [getButtonStyle(size, iconOnly), overrideCss],
+    "data-testid": "".concat(testId, "-button-wrapper")
+  }, jsx(Tooltip, {
+    content: tooltipMessage,
+    hideTooltipOnClick: true,
+    testId: "".concat(testId, "-tooltip")
+  }, jsx(LoadingButton, {
+    appearance: appearance,
+    iconAfter: iconAfter,
+    iconBefore: iconBefore,
+    isDisabled: isDisabled,
+    isLoading: isLoading,
+    onClick: onButtonClick(onClick),
+    spacing: sizeToButtonSpacing[size],
+    testId: testId,
+    href: href,
+    "aria-label": ariaLabel
+  }, content)));
+};
+export default ActionButtonOld;

package/dist/esm/view/FlexibleCard/components/actions/action/action-button/index.compiled.css

@@ -0,0 +1,16 @@
+._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)}
+._11lv1xvx button, ._192b1xvx button:active, ._vbn71xvx button:focus, ._wfu31xvx button:hover{padding-left:var(--ds-space-025,.125rem)}
+._11lvidpf button, ._192bidpf button:active, ._vbn7idpf button:focus, ._wfu3idpf button:hover{padding-left:0}
+._11lvpdf9 button, ._192bpdf9 button:active, ._vbn7pdf9 button:focus, ._wfu3pdf9 button:hover{padding-left:var(--ds-space-050,.25rem)}
+._1gfl1xvx button, ._or3f1xvx button:active, ._1ddv1xvx button:focus, ._1hha1xvx button:hover{padding-top:var(--ds-space-025,.125rem)}
+._1gflidpf button, ._or3fidpf button:active, ._1ddvidpf button:focus, ._1hhaidpf button:hover{padding-top:0}
+._1gqn1xvx button, ._1qdm1xvx button:active, ._df2r1xvx button:focus, ._j1tw1xvx button:hover{padding-bottom:var(--ds-space-025,.125rem)}
+._1gqnidpf button, ._1qdmidpf button:active, ._df2ridpf button:focus, ._j1twidpf button:hover{padding-bottom:0}
+._1i3bidpf button:active>span, ._13gwidpf button:focus>span, ._4wlcidpf button:hover>span, ._rehaidpf button>span{margin-top:0}
+._1vtwidpf button:active>span, ._ijvwidpf button:focus>span, ._tpwpidpf button:hover>span, ._1ad8idpf button>span{margin-left:0}
+._3kh9idpf button:active>span, ._i2vxidpf button:focus>span, ._8pvjidpf button:hover>span, ._1e1oidpf button>span{margin-bottom:0}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._mp2fidpf button:active>span, ._ro8midpf button:focus>span, ._1l0qidpf button:hover>span, ._1bnaidpf button>span{margin-right:0}
+._yhjm1xvx button, ._1trn1xvx button:active, ._1fst1xvx button:focus, ._1xce1xvx button:hover{padding-right:var(--ds-space-025,.125rem)}
+._yhjmidpf button, ._1trnidpf button:active, ._1fstidpf button:focus, ._1xceidpf button:hover{padding-right:0}
+._yhjmpdf9 button, ._1trnpdf9 button:active, ._1fstpdf9 button:focus, ._1xcepdf9 button:hover{padding-right:var(--ds-space-050,.25rem)}

package/dist/esm/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -1,58 +1,31 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { LoadingButton } from '@atlaskit/button';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkSize } from '../../../../../../constants';
 import { sizeToButtonSpacing } from '../../../utils';
-var getButtonStyle = function getButtonStyle(size, iconOnly) {
-  switch (size) {
-    case SmartLinkSize.Large:
-      return iconOnly ? css({
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-        'button, button:hover, button:focus, button:active': {
-          padding: 0,
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-          '> span': {
-            margin: 0
-          }
-        }
-      }) : '';
-    case SmartLinkSize.Small:
-      return css({
-        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)",
-        fontWeight: "var(--ds-font-weight-medium, 500)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        'button, button:hover, button:focus, button:active': [{
-          // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-          lineHeight: 'inherit'
-        }, iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          "]
-      });
-    case SmartLinkSize.XLarge:
-    case SmartLinkSize.Medium:
-    default:
-      return '';
-  }
-};
-var ActionButton = function ActionButton(_ref) {
+import ActionButtonOld from './ActionButtonOld';
+var IconOnlyLarge = null;
+var SizeSmall = null;
+var SizeSmallIconOnly = null;
+var SizeSmallNotIconOnly = null;
+var ActionButtonNew = function ActionButtonNew(_ref) {
   var appearance = _ref.appearance,
     content = _ref.content,
     iconAfter = _ref.iconAfter,
     iconBefore = _ref.iconBefore,
     isLoading = _ref.isLoading,
     onClick = _ref.onClick,
-    overrideCss = _ref.overrideCss,
     size = _ref.size,
     testId = _ref.testId,
     tooltipMessage = _ref.tooltipMessage,
     isDisabled = _ref.isDisabled,
     href = _ref.href,
-    ariaLabel = _ref.ariaLabel;
+    ariaLabel = _ref.ariaLabel,
+    className = _ref.className;
   var iconOnly = !content;
   var onButtonClick = useCallback(function (handler) {
     return function (e) {
@@ -60,15 +33,15 @@ var ActionButton = function ActionButton(_ref) {
       handler();
     };
   }, []);
-  return jsx("div", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: [getButtonStyle(size, iconOnly), overrideCss],
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax([size === SmartLinkSize.Large && iconOnly && "_1gflidpf _or3fidpf _1ddvidpf _1hhaidpf _yhjmidpf _1trnidpf _1fstidpf _1xceidpf _1gqnidpf _1qdmidpf _df2ridpf _j1twidpf _11lvidpf _192bidpf _vbn7idpf _wfu3idpf _1i3bidpf _13gwidpf _4wlcidpf _rehaidpf _mp2fidpf _ro8midpf _1l0qidpf _1bnaidpf _3kh9idpf _i2vxidpf _8pvjidpf _1e1oidpf _1vtwidpf _ijvwidpf _tpwpidpf _1ad8idpf", size === SmartLinkSize.Small && "_11c8qk37 _k48p1wq8", size === SmartLinkSize.Small && iconOnly && "_1gfl1xvx _or3f1xvx _1ddv1xvx _1hha1xvx _yhjm1xvx _1trn1xvx _1fst1xvx _1xce1xvx _1gqn1xvx _1qdm1xvx _df2r1xvx _j1tw1xvx _11lv1xvx _192b1xvx _vbn71xvx _wfu31xvx", size === SmartLinkSize.Small && !iconOnly && "_11lvpdf9 _192bpdf9 _vbn7pdf9 _wfu3pdf9 _yhjmpdf9 _1trnpdf9 _1fstpdf9 _1xcepdf9", className]),
     "data-testid": "".concat(testId, "-button-wrapper")
-  }, jsx(Tooltip, {
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipMessage,
     hideTooltipOnClick: true,
     testId: "".concat(testId, "-tooltip")
-  }, jsx(LoadingButton, {
+  }, /*#__PURE__*/React.createElement(LoadingButton, {
     appearance: appearance,
     iconAfter: iconAfter,
     iconBefore: iconBefore,
@@ -81,4 +54,7 @@ var ActionButton = function ActionButton(_ref) {
     "aria-label": ariaLabel
   }, content)));
 };
+var ActionButton = function ActionButton(props) {
+  return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(ActionButtonNew, props) : /*#__PURE__*/React.createElement(ActionButtonOld, props);
+};
 export default ActionButton;

package/dist/esm/view/FlexibleCard/components/actions/action/action-icon/ActionIconOld.js

@@ -0,0 +1,60 @@
+/**
+ * @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 { fg } from '@atlaskit/platform-feature-flags';
+import { SmartLinkSize } from '../../../../../../constants';
+import { getIconSizeStyles } from '../../../utils';
+var getIconWidth = function getIconWidth(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return '1.5rem';
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return '1rem';
+  }
+};
+var getIconStyles = function getIconStyles(isDisabled) {
+  return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    color: isDisabled ? "var(--ds-text-disabled, #6B778C)" : "var(--ds-icon, #44546F)"
+  });
+};
+var stackItemIconSizeStyles = getIconSizeStyles('20px');
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+var stackItemIconStyles = css(stackItemIconSizeStyles, {
+  display: 'inline-block',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: 0,
+  padding: "var(--ds-space-025, 2px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  'span,svg,img': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    lineHeight: 0
+  }
+});
+var newStackItemIconStyles = css({
+  display: 'inline-block',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: 0
+});
+var ActionIconOld = function ActionIconOld(_ref) {
+  var size = _ref.size,
+    testId = _ref.testId,
+    icon = _ref.icon,
+    isDisabled = _ref.isDisabled,
+    asStackItemIcon = _ref.asStackItemIcon;
+  return jsx("span", {
+    css: [
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    getIconStyles(isDisabled), !fg('platform-visual-refresh-icons') ? asStackItemIcon ? stackItemIconStyles :
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    getIconSizeStyles(getIconWidth(size)) : newStackItemIconStyles],
+    "data-testid": "".concat(testId, "-icon")
+  }, icon);
+};
+export default ActionIconOld;