@atlaskit/smart-card 34.0.0 → 34.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/smart-card
 
+## 34.1.0
+
+### Minor Changes
+
+- [#102113](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102113)
+  [`73750905491ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/73750905491ce) -
+  [ux] Migrate FlexibleCard actions to use compiled
+
+## 34.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 34.0.0
 
 ### Major Changes

package/dist/cjs/utils/analytics/analytics.js

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

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

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _constants = require("../../../../../constants");
+var _actionButton = _interopRequireDefault(require("./action-button"));
+var _actionDropdownItem = _interopRequireDefault(require("./action-dropdown-item"));
+var _actionIcon = _interopRequireDefault(require("./action-icon"));
+var _actionStackItem = _interopRequireDefault(require("./action-stack-item"));
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+/**
+ * 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 ? _constants.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 && (0, _react.jsx)(_actionIcon.default, {
+    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 (0, _react.jsx)(_actionStackItem.default, {
+      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 (0, _react.jsx)(_actionDropdownItem.default, {
+      content: content,
+      iconAfter: iconAfter,
+      iconBefore: iconBefore,
+      isLoading: isLoading,
+      onClick: onClick,
+      testId: testId
+    });
+  }
+  var button = (0, _react.jsx)(_actionButton.default, {
+    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 ? (0, _react.jsx)(Wrapper, null, button) : button;
+};
+var _default = exports.default = ActionOld;

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

@@ -0,0 +1,95 @@
+"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;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _button = require("@atlaskit/button");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _constants = require("../../../../../../constants");
+var _utils = require("../../../utils");
+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; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var getButtonStyle = function getButtonStyle(size, iconOnly) {
+  switch (size) {
+    case _constants.SmartLinkSize.Large:
+      return iconOnly ? (0, _react2.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 _constants.SmartLinkSize.Small:
+      return (0, _react2.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 _constants.SmartLinkSize.XLarge:
+    case _constants.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 = (0, _react.useCallback)(function (handler) {
+    return function (e) {
+      e.preventDefault();
+      handler();
+    };
+  }, []);
+  return (0, _react2.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")
+  }, (0, _react2.jsx)(_tooltip.default, {
+    content: tooltipMessage,
+    hideTooltipOnClick: true,
+    testId: "".concat(testId, "-tooltip")
+  }, (0, _react2.jsx)(_button.LoadingButton, {
+    appearance: appearance,
+    iconAfter: iconAfter,
+    iconBefore: iconBefore,
+    isDisabled: isDisabled,
+    isLoading: isLoading,
+    onClick: onButtonClick(onClick),
+    spacing: _utils.sizeToButtonSpacing[size],
+    testId: testId,
+    href: href,
+    "aria-label": ariaLabel
+  }, content)));
+};
+var _default = exports.default = ActionButtonOld;

package/dist/cjs/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/cjs/view/FlexibleCard/components/actions/action/action-button/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");
@@ -6,64 +7,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _button = require("@atlaskit/button");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../../../../../../constants");
 var _utils = require("../../../utils");
+var _ActionButtonOld = _interopRequireDefault(require("./ActionButtonOld"));
 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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var getButtonStyle = function getButtonStyle(size, iconOnly) {
-  switch (size) {
-    case _constants.SmartLinkSize.Large:
-      return iconOnly ? (0, _react2.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 _constants.SmartLinkSize.Small:
-      return (0, _react2.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 _constants.SmartLinkSize.XLarge:
-    case _constants.SmartLinkSize.Medium:
-    default:
-      return '';
-  }
-};
-var ActionButton = function ActionButton(_ref) {
+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 = (0, _react.useCallback)(function (handler) {
     return function (e) {
@@ -71,15 +43,15 @@ var ActionButton = function ActionButton(_ref) {
       handler();
     };
   }, []);
-  return (0, _react2.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.default.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: (0, _runtime.ax)([size === _constants.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 === _constants.SmartLinkSize.Small && "_11c8qk37 _k48p1wq8", size === _constants.SmartLinkSize.Small && iconOnly && "_1gfl1xvx _or3f1xvx _1ddv1xvx _1hha1xvx _yhjm1xvx _1trn1xvx _1fst1xvx _1xce1xvx _1gqn1xvx _1qdm1xvx _df2r1xvx _j1tw1xvx _11lv1xvx _192b1xvx _vbn71xvx _wfu31xvx", size === _constants.SmartLinkSize.Small && !iconOnly && "_11lvpdf9 _192bpdf9 _vbn7pdf9 _wfu3pdf9 _yhjmpdf9 _1trnpdf9 _1fstpdf9 _1xcepdf9", className]),
     "data-testid": "".concat(testId, "-button-wrapper")
-  }, (0, _react2.jsx)(_tooltip.default, {
+  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: tooltipMessage,
     hideTooltipOnClick: true,
     testId: "".concat(testId, "-tooltip")
-  }, (0, _react2.jsx)(_button.LoadingButton, {
+  }, /*#__PURE__*/_react.default.createElement(_button.LoadingButton, {
     appearance: appearance,
     iconAfter: iconAfter,
     iconBefore: iconBefore,
@@ -92,4 +64,7 @@ var ActionButton = function ActionButton(_ref) {
     "aria-label": ariaLabel
   }, content)));
 };
+var ActionButton = function ActionButton(props) {
+  return (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/_react.default.createElement(ActionButtonNew, props) : /*#__PURE__*/_react.default.createElement(_ActionButtonOld.default, props);
+};
 var _default = exports.default = ActionButton;

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

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _constants = require("../../../../../../constants");
+var _utils = require("../../../utils");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var getIconWidth = function getIconWidth(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Large:
+      return '1.5rem';
+    case _constants.SmartLinkSize.Medium:
+    case _constants.SmartLinkSize.Small:
+    default:
+      return '1rem';
+  }
+};
+var getIconStyles = function getIconStyles(isDisabled) {
+  return (0, _react.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 = (0, _utils.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 = (0, _react.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 = (0, _react.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 (0, _react.jsx)("span", {
+    css: [
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    getIconStyles(isDisabled), !(0, _platformFeatureFlags.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
+    (0, _utils.getIconSizeStyles)(getIconWidth(size)) : newStackItemIconStyles],
+    "data-testid": "".concat(testId, "-icon")
+  }, icon);
+};
+var _default = exports.default = ActionIconOld;

package/dist/cjs/view/FlexibleCard/components/actions/action/action-icon/index.compiled.css

@@ -0,0 +1,50 @@
+._16jlidpf{flex-grow:0}
+._19bvv77o{padding-left:var(--ds-space-025,2px)}
+._19l31j6v img, ._1pr21j6v span, ._1u5t1j6v svg{max-height:1rem}
+._19l31k8s img, ._1pr21k8s span, ._1u5t1k8s svg{max-height:1.5rem}
+._19l3gktf img, ._1pr2gktf span, ._1u5tgktf svg{max-height:20px}
+._1bsb1j6v{width:1rem}
+._1bsb1k8s{width:1.5rem}
+._1bsbgktf{width:20px}
+._1e0c1o8l{display:inline-block}
+._1o9zidpf{flex-shrink:0}
+._1rg21j6v img, ._q7cv1j6v span, ._xwbj1j6v svg{min-width:1rem}
+._1rg21k8s img, ._q7cv1k8s span, ._xwbj1k8s svg{min-width:1.5rem}
+._1rg2gktf img, ._q7cvgktf span, ._xwbjgktf svg{min-width:20px}
+._1tke1j6v{min-height:1rem}
+._1tke1k8s{min-height:1.5rem}
+._1tkegktf{min-height:20px}
+._1ul91j6v{min-width:1rem}
+._1ul91k8s{min-width:1.5rem}
+._1ul9gktf{min-width:20px}
+._4t3i1j6v{height:1rem}
+._4t3i1k8s{height:1.5rem}
+._4t3igktf{height:20px}
+._5jw9idpf svg{padding-bottom:0}
+._7wy9idpf svg{padding-left:0}
+._bna71j6v img, ._1xjx1j6v span, ._17521j6v svg{height:1rem}
+._bna71k8s img, ._1xjx1k8s span, ._17521k8s svg{height:1.5rem}
+._bna7gktf img, ._1xjxgktf span, ._1752gktf svg{height:20px}
+._c71l1j6v{max-height:1rem}
+._c71l1k8s{max-height:1.5rem}
+._c71lgktf{max-height:20px}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._i0dl1wug{flex-basis:auto}
+._i2i3idpf svg{padding-top:0}
+._mezj1j6v img, ._e2oo1j6v span, ._w8l51j6v svg{width:1rem}
+._mezj1k8s img, ._e2oo1k8s span, ._w8l51k8s svg{width:1.5rem}
+._mezjgktf img, ._e2oogktf span, ._w8l5gktf svg{width:20px}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._p12f1j6v{max-width:1rem}
+._p12f1k8s{max-width:1.5rem}
+._p12fgktf{max-width:20px}
+._qci81j6v img, ._15iz1j6v span, ._erub1j6v svg{min-height:1rem}
+._qci81k8s img, ._15iz1k8s span, ._erub1k8s svg{min-height:1.5rem}
+._qci8gktf img, ._15izgktf span, ._erubgktf svg{min-height:20px}
+._rtys1j6v img, ._b8nk1j6v span, ._4x201j6v svg{max-width:1rem}
+._rtys1k8s img, ._b8nk1k8s span, ._4x201k8s svg{max-width:1.5rem}
+._rtysgktf img, ._b8nkgktf span, ._4x20gktf svg{max-width:20px}
+._syaz2oi6{color:var(--ds-text-disabled,#6b778c)}
+._syazwdcn{color:var(--ds-icon,#44546f)}
+._u5f3v77o{padding-right:var(--ds-space-025,2px)}
+._uhasidpf svg{padding-right:0}

package/dist/cjs/view/FlexibleCard/components/actions/action/action-icon/index.js

@@ -1,19 +1,20 @@
+/* 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;
-var _react = require("@emotion/react");
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../../constants");
-var _utils = require("../../../utils");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+var _ActionIconOld = _interopRequireDefault(require("./ActionIconOld"));
+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 getIconWidth = function getIconWidth(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
@@ -25,43 +26,35 @@ var getIconWidth = function getIconWidth(size) {
       return '1rem';
   }
 };
-var getIconStyles = function getIconStyles(isDisabled) {
-  return (0, _react.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 iconSizeStyleMap = {
+  '1.5rem': "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1k8s _1tke1k8s _c71l1k8s _1bsb1k8s _1ul91k8s _p12f1k8s _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71k8s _1xjx1k8s _17521k8s _qci81k8s _15iz1k8s _erub1k8s _19l31k8s _1pr21k8s _1u5t1k8s _mezj1k8s _e2oo1k8s _w8l51k8s _1rg21k8s _q7cv1k8s _xwbj1k8s _rtys1k8s _b8nk1k8s _4x201k8s",
+  '1rem': "_16jlidpf _1o9zidpf _i0dl1wug _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",
+  '20px': "_16jlidpf _1o9zidpf _i0dl1wug _4t3igktf _1tkegktf _c71lgktf _1bsbgktf _1ul9gktf _p12fgktf _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7gktf _1xjxgktf _1752gktf _qci8gktf _15izgktf _erubgktf _19l3gktf _1pr2gktf _1u5tgktf _mezjgktf _e2oogktf _w8l5gktf _1rg2gktf _q7cvgktf _xwbjgktf _rtysgktf _b8nkgktf _4x20gktf"
 };
-var stackItemIconSizeStyles = (0, _utils.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 = (0, _react.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 = (0, _react.css)({
-  display: 'inline-block',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 0
-});
-var ActionIcon = function ActionIcon(_ref) {
+var stackItemIconStyles = null;
+var newStackItemIconStyles = null;
+var iconStyleMap = {
+  true: "_syaz2oi6",
+  false: "_syazwdcn"
+};
+var ActionIconNew = function ActionIconNew(_ref) {
   var size = _ref.size,
     testId = _ref.testId,
     icon = _ref.icon,
     isDisabled = _ref.isDisabled,
     asStackItemIcon = _ref.asStackItemIcon;
-  return (0, _react.jsx)("span", {
-    css: [
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    getIconStyles(isDisabled), !(0, _platformFeatureFlags.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
-    (0, _utils.getIconSizeStyles)(getIconWidth(size)) : newStackItemIconStyles],
-    "data-testid": "".concat(testId, "-icon")
+  if (!(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
+    return /*#__PURE__*/React.createElement("span", {
+      "data-testid": "".concat(testId, "-icon"),
+      className: (0, _runtime.ax)([iconStyleMap[isDisabled ? 'true' : 'false'], asStackItemIcon && "_1e0c1o8l _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o", asStackItemIcon && iconSizeStyleMap['20px'], !asStackItemIcon && iconSizeStyleMap[getIconWidth(size)]])
+    }, icon);
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": "".concat(testId, "-icon"),
+    className: (0, _runtime.ax)([iconStyleMap[isDisabled ? 'true' : 'false'], "_1e0c1o8l"])
   }, icon);
 };
+var ActionIcon = function ActionIcon(props) {
+  return (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(ActionIconNew, props) : /*#__PURE__*/React.createElement(_ActionIconOld.default, props);
+};
 var _default = exports.default = ActionIcon;