@atlaskit/smart-card 34.7.0 → 34.8.0

package/dist/esm/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/rule/main.compiled.css

@@ -0,0 +1,7 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._189e1bk5{border-width:var(--ds-border-width-outline,2px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d15qp{border-color:var(--ds-border-accent-blue,#1d7afc)}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
+._4t3i1f4h{height:28px}

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

@@ -1,27 +1,20 @@
-import React from 'react';
+/* main.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./main.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ButtonItem } from '@atlaskit/menu';
-import { Box, Stack, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Stack } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import { useAutomationMenu } from '../../menu-context';
-var ruleButtonStyle = xcss({
-  borderColor: 'color.border',
-  borderStyle: 'solid',
-  borderWidth: 'border.width',
-  borderRadius: 'border.radius'
-});
-var selectedRuleButtonStyle = xcss({
-  backgroundColor: 'color.background.accent.blue.subtlest',
-  borderColor: 'color.border.accent.blue',
-  borderStyle: 'solid',
-  borderWidth: 'border.width.outline',
-  borderRadius: 'border.radius'
-});
-var ruleNameStyle = xcss({
-  // Using this to increase the height of the button itself.
-  height: '28px'
-});
-export var AutomationModalRule = function AutomationModalRule(_ref) {
+import { AutomationModalRuleOld } from './AutomationModalRuleOld';
+var styles = {
+  ruleButtonStyle: "_2rkoglpi _1h6dmuej _1dqonqa1 _189ee4h9",
+  selectedRuleButtonStyle: "_2rkoglpi _1h6d15qp _1dqonqa1 _189e1bk5",
+  ruleNameStyle: "_4t3i1f4h"
+};
+var AutomationModalRuleNew = function AutomationModalRuleNew(_ref) {
   var rule = _ref.rule,
     selectedRule = _ref.selectedRule,
     setSelectedRule = _ref.setSelectedRule;
@@ -48,7 +41,8 @@ export var AutomationModalRule = function AutomationModalRule(_ref) {
     setSelectedRule(rule);
   };
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: isSelectedRule ? selectedRuleButtonStyle : ruleButtonStyle
+    xcss: isSelectedRule ? styles.selectedRuleButtonStyle : styles.ruleButtonStyle,
+    backgroundColor: isSelectedRule ? 'color.background.accent.blue.subtlest' : undefined
   }, /*#__PURE__*/React.createElement(ButtonItem, {
     isDisabled: !!invokingRuleId,
     iconBefore: isExecuting ? /*#__PURE__*/React.createElement(Spinner, {
@@ -56,7 +50,13 @@ export var AutomationModalRule = function AutomationModalRule(_ref) {
     }) : null,
     onClick: ruleOnClick
   }, /*#__PURE__*/React.createElement(Stack, {
-    xcss: ruleNameStyle,
+    xcss: styles.ruleNameStyle,
     alignBlock: "center"
   }, rule.name)));
+};
+export var AutomationModalRule = function AutomationModalRule(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AutomationModalRuleNew, props);
+  }
+  return /*#__PURE__*/React.createElement(AutomationModalRuleOld, props);
 };

package/dist/esm/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/rule-list/AutomationModalRuleListOld.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { MenuGroup } from '@atlaskit/menu';
+import { Stack } from '@atlaskit/primitives';
+import { useAutomationMenu } from '../../menu-context';
+import { AutomationModalEmptyState } from '../empty-state';
+import { AutomationModalRule } from '../rule';
+export var AutomationModalRuleListOld = function AutomationModalRuleListOld(_ref) {
+  var selectedRule = _ref.selectedRule,
+    setSelectedRule = _ref.setSelectedRule;
+  var _useAutomationMenu = useAutomationMenu(),
+    rules = _useAutomationMenu.rules;
+  if (rules.length === 0) {
+    return /*#__PURE__*/React.createElement(AutomationModalEmptyState, null);
+  }
+  return /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(Stack, {
+    space: "space.050"
+  }, rules.map(function (rule) {
+    return /*#__PURE__*/React.createElement(AutomationModalRule, {
+      key: "manual-rule-".concat(rule.id),
+      rule: rule,
+      selectedRule: selectedRule,
+      setSelectedRule: setSelectedRule
+    });
+  })));
+};

package/dist/esm/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/rule-list/main.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { MenuGroup } from '@atlaskit/menu';
-import { Stack } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Stack } from '@atlaskit/primitives/compiled';
 import { useAutomationMenu } from '../../menu-context';
 import { AutomationModalEmptyState } from '../empty-state';
 import { AutomationModalRule } from '../rule';
-export var AutomationModalRuleList = function AutomationModalRuleList(_ref) {
+import { AutomationModalRuleListOld } from './AutomationModalRuleListOld';
+var AutomationModalRuleListNew = function AutomationModalRuleListNew(_ref) {
   var selectedRule = _ref.selectedRule,
     setSelectedRule = _ref.setSelectedRule;
   var _useAutomationMenu = useAutomationMenu(),
@@ -22,4 +24,10 @@ export var AutomationModalRuleList = function AutomationModalRuleList(_ref) {
       setSelectedRule: setSelectedRule
     });
   })));
+};
+export var AutomationModalRuleList = function AutomationModalRuleList(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AutomationModalRuleListNew, props);
+  }
+  return /*#__PURE__*/React.createElement(AutomationModalRuleListOld, props);
 };

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

@@ -2,19 +2,21 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { lazy, useCallback } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import AutomationIcon from '@atlaskit/icon/core/automation';
-import { Text } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Text } from '@atlaskit/primitives/compiled';
 import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
 import { ActionName } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import { useSmartLinkModal } from '../../../../../state/modal';
 import Action from '../action';
+import AutomationActionOld from './AutomationActionOld';
 import AutomationManualTriggersGlyph from './manual-triggers-icon';
 import { getModalContent } from './utils';
 var AutomationModal = /*#__PURE__*/lazy(function () {
   return import( /* webpackChunkName: "@atlaskit-internal_smart-card-automation-modal" */'./automation-manual-triggers/manual-triggers-modal');
 });
-var AutomationAction = function AutomationAction(props) {
+var AutomationActionNew = function AutomationActionNew(props) {
   var _context$actions;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -85,4 +87,10 @@ var AutomationAction = function AutomationAction(props) {
     }
   })));
 };
+var AutomationAction = function AutomationAction(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AutomationActionNew, props);
+  }
+  return /*#__PURE__*/React.createElement(AutomationActionOld, props);
+};
 export default AutomationAction;

package/dist/esm/view/FlexibleCard/components/blocks/action-block/action-footer/ActionFooterOld.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import ErrorIcon from '@atlaskit/icon/utility/migration/error';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
+import MotionWrapper from '../../../common/motion-wrapper';
+var containerStyles = xcss({
+  all: 'unset',
+  borderRadius: 'border.radius',
+  margin: 'space.100',
+  marginBottom: 'space.0',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: '20px',
+  padding: 'space.075',
+  paddingInline: 'space.100',
+  width: '100%',
+  ':empty': {
+    display: 'none'
+  }
+});
+var errorStyles = xcss({
+  backgroundColor: 'color.background.danger'
+});
+var errorContentStyles = xcss({
+  paddingInlineStart: 'space.025'
+});
+var titleStyles = xcss({
+  color: 'color.text.subtle',
+  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)"
+});
+var getIcon = function getIcon(appearance) {
+  switch (appearance) {
+    case 'error':
+      return /*#__PURE__*/React.createElement(ErrorIcon, {
+        color: "var(--ds-icon-danger, #C9372C)",
+        spacing: "compact",
+        label: "Error",
+        LEGACY_size: "small",
+        testId: "action-error-icon",
+        LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)")
+      });
+    default:
+      return null;
+  }
+};
+export var ActionFooterOld = function ActionFooterOld(_ref) {
+  var message = _ref.message,
+    testId = _ref.testId;
+  if (!message) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: "".concat(testId, "-footer"),
+    xcss: [containerStyles, message.appearance === 'error' && errorStyles]
+  }, /*#__PURE__*/React.createElement(MotionWrapper, {
+    isFadeIn: true,
+    show: true,
+    showTransition: true
+  }, /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "start",
+    grow: "fill",
+    space: "space.075",
+    xcss: errorContentStyles
+  }, message.icon || getIcon(message.appearance), /*#__PURE__*/React.createElement(Box, {
+    xcss: titleStyles
+  }, message.title))));
+};

package/dist/esm/view/FlexibleCard/components/blocks/action-block/action-footer/index.compiled.css

@@ -0,0 +1,13 @@
+
+._kkk2n7od{all:unset}._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)}
+._18s8u2gc{margin:var(--ds-space-100,8px)}
+._1yt412x7{padding:var(--ds-space-075,6px)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._18zru2gc{padding-inline:var(--ds-space-100,8px)}
+._1bsb1osq{width:100%}
+._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
+._fiawglyw:empty{display:none}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._vwz4gktf{line-height:20px}

package/dist/esm/view/FlexibleCard/components/blocks/action-block/action-footer/index.js

@@ -1,31 +1,18 @@
-import React from 'react';
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import ErrorIcon from '@atlaskit/icon/utility/migration/error';
-import { Box, Inline, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import MotionWrapper from '../../../common/motion-wrapper';
-var containerStyles = xcss({
-  all: 'unset',
-  borderRadius: 'border.radius',
-  margin: 'space.100',
-  marginBottom: 'space.0',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '20px',
-  padding: 'space.075',
-  paddingInline: 'space.100',
-  width: '100%',
-  ':empty': {
-    display: 'none'
-  }
-});
-var errorStyles = xcss({
-  backgroundColor: 'color.background.danger'
-});
-var errorContentStyles = xcss({
-  paddingInlineStart: 'space.025'
-});
-var titleStyles = xcss({
-  color: 'color.text.subtle',
-  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)"
-});
+import { ActionFooterOld } from './ActionFooterOld';
+var containerStyles = null;
+var errorStyles = null;
+var styles = {
+  errorContentStyles: "_bozgv77o",
+  titleStyles: "_11c8qk37 _syaz1gjq"
+};
 var getIcon = function getIcon(appearance) {
   switch (appearance) {
     case 'error':
@@ -41,15 +28,15 @@ var getIcon = function getIcon(appearance) {
       return null;
   }
 };
-export var ActionFooter = function ActionFooter(_ref) {
+var ActionFooterNew = function ActionFooterNew(_ref) {
   var message = _ref.message,
     testId = _ref.testId;
   if (!message) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Box, {
-    testId: "".concat(testId, "-footer"),
-    xcss: [containerStyles, message.appearance === 'error' && errorStyles]
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testId": "".concat(testId, "-footer"),
+    className: ax(["_kkk2n7od _2rkoglpi _18s8u2gc _1yt412x7 _18zru2gc _otyrze3t _vwz4gktf _1bsb1osq _fiawglyw", message.appearance === 'error' && "_bfhk1gly"])
   }, /*#__PURE__*/React.createElement(MotionWrapper, {
     isFadeIn: true,
     show: true,
@@ -58,8 +45,14 @@ export var ActionFooter = function ActionFooter(_ref) {
     alignBlock: "start",
     grow: "fill",
     space: "space.075",
-    xcss: errorContentStyles
+    xcss: styles.errorContentStyles
   }, message.icon || getIcon(message.appearance), /*#__PURE__*/React.createElement(Box, {
-    xcss: titleStyles
+    xcss: styles.titleStyles
   }, message.title))));
+};
+export var ActionFooter = function ActionFooter(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ActionFooterNew, props);
+  }
+  return /*#__PURE__*/React.createElement(ActionFooterOld, props);
 };

package/dist/esm/view/FlexibleCard/components/blocks/action-block/index.js

@@ -6,11 +6,9 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { di } from 'react-magnetic-di';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { xcss } from '@atlaskit/primitives';
 import { SmartLinkSize } from '../../../../../constants';
 import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import * as Actions from '../../actions';
-import { getPrimitivesPaddingSpaceBySize } from '../../utils';
 import { ActionFooter } from './action-footer';
 import ActionBlockOld from './ActionBlockOld';
 var ignoreContainerPaddingStyles = null;
@@ -26,6 +24,24 @@ var sort = function sort(a, b) {
   }
   return idxA - idxB;
 };
+
+/**
+ * Get container padding based on smart link size
+ * To replace container/index.tsx getPadding() with space token for primitives
+ */
+export var getPrimitivesPaddingSpaceBySize = function getPrimitivesPaddingSpaceBySize(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return "var(--ds-space-300, 24px)";
+    case SmartLinkSize.Large:
+      return "var(--ds-space-250, 20px)";
+    case SmartLinkSize.Medium:
+      return "var(--ds-space-200, 16px)";
+    case SmartLinkSize.Small:
+    default:
+      return "var(--ds-space-100, 8px)";
+  }
+};
 var ActionBlockNew = function ActionBlockNew(_ref) {
   var blockRef = _ref.blockRef,
     onClickCallback = _ref.onClick,
@@ -72,11 +88,11 @@ var ActionBlockNew = function ActionBlockNew(_ref) {
         onError: onError,
         onLoadingChange: onLoadingChange,
         size: size
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/no-unsafe-design-token-usage
         ,
-        xcss: xcss({
+        style: padding && {
           paddingInline: padding
-        }),
+        },
         hideTooltip: isLoading
       }) : null;
     });
@@ -87,7 +103,6 @@ var ActionBlockNew = function ActionBlockNew(_ref) {
     className: ax(["_1e0c1txw _2lx21bp4 _vchhusvi _16jlkb7n _1bsb1osq _18u01ivi _2hwxc10g"])
   }, actions, /*#__PURE__*/React.createElement(ActionFooter, {
     message: message,
-    paddingInline: padding,
     testId: testId
   })) : null;
 };

package/dist/esm/view/FlexibleCard/components/blocks/ai-footer-block/resolved/ai-footer-metadata.js

@@ -2,13 +2,15 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { di } from 'react-magnetic-di';
 import AIIcon from '@atlaskit/icon/core/atlassian-intelligence';
-import { Box, Inline } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../../../../../../messages';
 import useAISummaryAction from '../../../../../../state/hooks/use-ai-summary-action';
 import LegacyAIIcon from '../../../../../common/ai-icon';
 import { InfoIcon } from '../icons/info';
-export var AIFooterMetadata = function AIFooterMetadata(_ref) {
+import { AIFooterMetadataOld } from './ai-footer-metadataOld';
+var AIFooterMetadataNew = function AIFooterMetadataNew(_ref) {
   var testId = _ref.testId,
     url = _ref.url;
   var _useAISummaryAction = useAISummaryAction(url),
@@ -36,4 +38,10 @@ export var AIFooterMetadata = function AIFooterMetadata(_ref) {
     LEGACY_fallbackIcon: LegacyAIIcon,
     color: "var(--ds-icon-subtle, #626F86)"
   }));
+};
+export var AIFooterMetadata = function AIFooterMetadata(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AIFooterMetadataNew, props);
+  }
+  return /*#__PURE__*/React.createElement(AIFooterMetadataOld, props);
 };

package/dist/esm/view/FlexibleCard/components/blocks/ai-footer-block/resolved/ai-footer-metadataOld.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { di } from 'react-magnetic-di';
+import AIIcon from '@atlaskit/icon/core/atlassian-intelligence';
+import { Box, Inline } from '@atlaskit/primitives';
+import Tooltip from '@atlaskit/tooltip';
+import { messages } from '../../../../../../messages';
+import useAISummaryAction from '../../../../../../state/hooks/use-ai-summary-action';
+import LegacyAIIcon from '../../../../../common/ai-icon';
+import { InfoIcon } from '../icons/info';
+export var AIFooterMetadataOld = function AIFooterMetadataOld(_ref) {
+  var testId = _ref.testId,
+    url = _ref.url;
+  var _useAISummaryAction = useAISummaryAction(url),
+    status = _useAISummaryAction.state.status;
+  if (status !== 'done') {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Inline, {
+    space: "space.100",
+    testId: testId,
+    alignInline: "end",
+    grow: "fill"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_summarized_info_short),
+    position: "bottom"
+  }, function (tooltipProps) {
+    return /*#__PURE__*/React.createElement(Box, tooltipProps, /*#__PURE__*/React.createElement(InfoIcon, {
+      label: "Information",
+      LEGACY_size: "small",
+      color: "var(--ds-icon-subtle, #626F86)"
+    }));
+  }), /*#__PURE__*/React.createElement(AIIcon, {
+    label: "AI",
+    LEGACY_size: "small",
+    LEGACY_fallbackIcon: LegacyAIIcon,
+    color: "var(--ds-icon-subtle, #626F86)"
+  }));
+};

package/dist/esm/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -4,7 +4,7 @@ var _excluded = ["actionGroup", "retry", "position", "testId", "title", "icon",
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { SmartLinkAlignment, SmartLinkDirection } from '../../../../../../constants';
 import { LinkIcon } from '../../../elements';
 import Block from '../../block';

package/dist/esm/view/FlexibleCard/components/common/motion-wrapper/index.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useRef, useState } from 'react';
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 export var MotionWrapper = function MotionWrapper(_ref) {
   var children = _ref.children,
     _ref$isFadeIn = _ref.isFadeIn,

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

@@ -8,11 +8,13 @@
 ._19l3oqnp img, ._1pr2oqnp span, ._1u5toqnp svg{max-height:.75rem}
 ._19l3viql img, ._1pr2viql span, ._1u5tviql svg{max-height:2rem}
 ._19pkidpf{margin-top:0}
+._1bah1h6o{justify-content:center}
 ._1bsb1j6v{width:1rem}
 ._1bsb1k8s{width:1.5rem}
 ._1bsboqnp{width:.75rem}
 ._1bsbviql{width:2rem}
 ._1btozryt{text-overflow:clip}
+._1e0c1txw{display:flex}
 ._1e0ccj1k{display:-webkit-box}
 ._1ipkidpf span{margin-top:0}
 ._1kdcidpf span{margin-right:0}
@@ -43,6 +45,7 @@
 ._1yyjkb7n{-webkit-line-clamp:1}
 ._2hwxidpf{margin-right:0}
 ._3glyidpf span{margin-bottom:0}
+._4cvr1h6o{align-items:center}
 ._4t3i1j6v{height:1rem}
 ._4t3i1k8s{height:1.5rem}
 ._4t3ioqnp{height:.75rem}

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

@@ -1,20 +1,24 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
+import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @compiled/shorthand-property-sorting */
 /* eslint-disable @atlaskit/design-system/use-tokens-typography */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
 
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';
 import { getIconWidth } from '../../utils';
 import IconOld from './IconOld';
+var styles = {
+  iconWrapperStyle: "_1e0c1txw _4cvr1h6o _1bah1h6o"
+};
 var positionStyleMap = {
   center: "_1wpz1h6o",
   top: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1wpz1y6m"
@@ -96,10 +100,6 @@ var IconNew = function IconNew(_ref) {
     return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId, fg('platform-smart-card-icon-migration') ? size : undefined) || renderAtlaskitIcon(icon, testId, fg('platform-smart-card-icon-migration') ? size : undefined) || defaultIcon;
   }, [overrideIcon, icon, label, render, testId, url, size]);
   var width = getIconWidth(size);
-
-  // const styles = getIconStyles(position, width);
-  // const renderStyles = render ? getCustomRenderStyles(width) : undefined;
-
   return /*#__PURE__*/React.createElement("div", {
     "data-fit-to-content": true,
     "data-smart-element": name,
@@ -109,7 +109,7 @@ var IconNew = function IconNew(_ref) {
     ,
     className: ax([!fg('platform-smart-card-icon-migration') && iconStylesMapOld[size], !fg('platform-smart-card-icon-migration') && positionStyleMap[position], render && !fg('platform-smart-card-icon-migration') && customRenderStyleMapOld[size], render && fg('platform-smart-card-icon-migration') && customRenderStyleMapNew[size], className])
   }, fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
-    xcss: iconWrapperStyle,
+    xcss: styles.iconWrapperStyle,
     style: {
       width: width,
       height: width
@@ -123,9 +123,4 @@ var Icon = function Icon(props) {
     return /*#__PURE__*/React.createElement(IconOld, props);
   }
 };
-var iconWrapperStyle = xcss({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-});
 export default Icon;

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

@@ -4,6 +4,7 @@
 ._189eyh40{border-width:2px}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
+._18u012x7{margin-left:var(--ds-space-075,6px)}
 ._18u0v77o{margin-left:var(--ds-space-025,2px)}
 ._19bvidpf{padding-left:0}
 ._19pkv77o{margin-top:var(--ds-space-025,2px)}

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

@@ -12,12 +12,11 @@ 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 { Box } from '@atlaskit/primitives/compiled';
 import LozengeActionTriggerOld from './LozengeActionTriggerOld';
-var chevronDownStyles = xcss({
-  marginLeft: 'space.075',
-  display: 'flex'
-});
+var styles = {
+  chevronDown: "_18u012x7 _1e0c1txw"
+};
 var triggerLozengeStyles = null;
 var triggerButtonStyles = null;
 var LozengeActionTriggerNew = function LozengeActionTriggerNew(_ref) {
@@ -45,7 +44,7 @@ var LozengeActionTriggerNew = function LozengeActionTriggerNew(_ref) {
       className: ax(["_4cvr1h6o _1e0c1txw"])
     }, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement(Box, {
       as: "span",
-      xcss: chevronDownStyles
+      xcss: styles.chevronDown
     }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
       color: "currentColor",
       label: "options",

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

@@ -11,6 +11,7 @@ export var triggerButtonStyles = css({
   color: 'unset',
   cursor: 'pointer',
   fontFamily: 'unset',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontSize: 'unset',
   fontStyle: 'unset',
   fontWeight: 'unset',

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

@@ -189,6 +189,7 @@ export var getPrimitivesInlineSpaceBySize = function getPrimitivesInlineSpaceByS
 /**
  * Get container padding based on smart link size
  * To replace container/index.tsx getPadding() with space token for primitives
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
  */
 export var getPrimitivesPaddingSpaceBySize = function getPrimitivesPaddingSpaceBySize(size) {
   switch (size) {