@atlaskit/smart-card 34.7.0 → 34.8.0

package/dist/cjs/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/error-state/main.js

@@ -1,14 +1,27 @@
+/* main.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AutomationModalErrorState = void 0;
-var _react = _interopRequireDefault(require("react"));
+require("./main.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _reactIntlNext = require("react-intl-next");
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _AutomationModalErrorStateOld = require("./AutomationModalErrorStateOld");
 var _errorIcon = _interopRequireDefault(require("./error-icon"));
+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 styles = {
+  errorState: "_y3gn1h6o _19pk1jfw",
+  imageContainer: "_1e0c1ule _p12f7iqz _c71lplmo _otyr1ejb _19pk1b66",
+  description: "_p12f1gwv"
+};
 var i18n = (0, _reactIntlNext.defineMessages)({
   errorDescription: {
     id: 'automation-menu.modal.error.description',
@@ -21,30 +34,22 @@ var i18n = (0, _reactIntlNext.defineMessages)({
     description: 'Alternative text for the image that renders when there is an error.'
   }
 });
-var errorStateStyles = (0, _primitives.xcss)({
-  textAlign: 'center',
-  marginTop: 'space.500'
-});
-var imageContainerStyles = (0, _primitives.xcss)({
-  display: 'block',
-  maxWidth: '116px',
-  maxHeight: '156px',
-  marginBottom: 'space.300',
-  marginTop: 'space.050'
-});
-var descriptionStyles = (0, _primitives.xcss)({
-  maxWidth: '360px'
-});
-var AutomationModalErrorState = exports.AutomationModalErrorState = function AutomationModalErrorState() {
+var AutomationModalErrorStateNew = function AutomationModalErrorStateNew() {
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
-    xcss: errorStateStyles,
+  return /*#__PURE__*/React.createElement(_compiled.Stack, {
+    xcss: styles.errorState,
     alignInline: "center",
     alignBlock: "center"
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: imageContainerStyles
-  }, /*#__PURE__*/_react.default.createElement(_errorIcon.default, null)), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: descriptionStyles
+  }, /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.imageContainer
+  }, /*#__PURE__*/React.createElement(_errorIcon.default, null)), /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.description
   }, formatMessage(i18n.errorDescription)));
+};
+var AutomationModalErrorState = exports.AutomationModalErrorState = function AutomationModalErrorState() {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AutomationModalErrorStateNew, null);
+  }
+  return /*#__PURE__*/React.createElement(_AutomationModalErrorStateOld.AutomationModalErrorStateOld, null);
 };

package/dist/cjs/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/execution-state-message/AutomationModalExecutionStateOld.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutomationModalExecutionStateOld = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _primitives = require("@atlaskit/primitives");
+var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
+var _menuContext = require("../../menu-context");
+var i18n = (0, _reactIntlNext.defineMessages)({
+  ruleExecutionSuccessMessage: {
+    id: 'automation-menu.success-state.message',
+    defaultMessage: 'Your automation is in progress',
+    description: 'Message that is displayed when a users automation rule has been successfully queued.'
+  },
+  ruleExecutionErrorMessage: {
+    id: 'automation-menu.modal.error.description',
+    defaultMessage: 'Oops we ran into a problem',
+    description: "Description for the error section shown when rules can't be executed"
+  }
+});
+var messageStyling = (0, _primitives.xcss)({
+  marginInline: 'space.300',
+  marginTop: 'space.100',
+  // The ModalFooter comes with a lot of built in margin, want to nudge the error message in to the footer a bit
+  marginBottom: 'space.negative.100'
+});
+var AutomationModalExecutionStateOld = exports.AutomationModalExecutionStateOld = function AutomationModalExecutionStateOld() {
+  var _useAutomationMenu = (0, _menuContext.useAutomationMenu)(),
+    ruleExecutionState = _useAutomationMenu.ruleExecutionState;
+  if (ruleExecutionState === 'FAILURE') {
+    return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      xcss: messageStyling
+    }, /*#__PURE__*/_react.default.createElement(_sectionMessage.default, {
+      appearance: "error"
+    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, i18n.ruleExecutionErrorMessage)));
+  } else {
+    return null;
+  }
+};

package/dist/cjs/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/execution-state-message/main.compiled.css

@@ -0,0 +1,3 @@
+._195g1ejb{margin-inline:var(--ds-space-300,24px)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._otyrx0bf{margin-bottom:var(--ds-space-negative-100,-8px)}

package/dist/cjs/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/execution-state-message/main.js

@@ -1,15 +1,26 @@
+/* main.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AutomationModalExecutionState = void 0;
-var _react = _interopRequireDefault(require("react"));
+require("./main.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _reactIntlNext = require("react-intl-next");
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
 var _menuContext = require("../../menu-context");
+var _AutomationModalExecutionStateOld = require("./AutomationModalExecutionStateOld");
+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 styles = {
+  messageStyling: "_195g1ejb _19pku2gc _otyrx0bf"
+};
 var i18n = (0, _reactIntlNext.defineMessages)({
   ruleExecutionSuccessMessage: {
     id: 'automation-menu.success-state.message',
@@ -22,22 +33,22 @@ var i18n = (0, _reactIntlNext.defineMessages)({
     description: "Description for the error section shown when rules can't be executed"
   }
 });
-var messageStyling = (0, _primitives.xcss)({
-  marginInline: 'space.300',
-  marginTop: 'space.100',
-  // The ModalFooter comes with a lot of built in margin, want to nudge the error message in to the footer a bit
-  marginBottom: 'space.negative.100'
-});
-var AutomationModalExecutionState = exports.AutomationModalExecutionState = function AutomationModalExecutionState() {
+var AutomationModalExecutionStateNew = function AutomationModalExecutionStateNew() {
   var _useAutomationMenu = (0, _menuContext.useAutomationMenu)(),
     ruleExecutionState = _useAutomationMenu.ruleExecutionState;
   if (ruleExecutionState === 'FAILURE') {
-    return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-      xcss: messageStyling
-    }, /*#__PURE__*/_react.default.createElement(_sectionMessage.default, {
+    return /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: styles.messageStyling
+    }, /*#__PURE__*/React.createElement(_sectionMessage.default, {
       appearance: "error"
-    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, i18n.ruleExecutionErrorMessage)));
+    }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, i18n.ruleExecutionErrorMessage)));
   } else {
     return null;
   }
+};
+var AutomationModalExecutionState = exports.AutomationModalExecutionState = function AutomationModalExecutionState() {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AutomationModalExecutionStateNew, null);
+  }
+  return /*#__PURE__*/React.createElement(_AutomationModalExecutionStateOld.AutomationModalExecutionStateOld, null);
 };

package/dist/cjs/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/header/AutomationModalHeaderOld.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutomationModalHeaderOld = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _manualTriggerIcon = _interopRequireDefault(require("@atlaskit/legacy-custom-icons/manual-trigger-icon"));
+var _modalDialog = require("@atlaskit/modal-dialog");
+var _primitives = require("@atlaskit/primitives");
+var _colors = require("@atlaskit/theme/colors");
+var _menuContext = require("../../menu-context");
+var i18n = (0, _reactIntlNext.defineMessages)({
+  modalHeaderIconLabel: {
+    id: 'automation-menu.modal.header.icon.label',
+    defaultMessage: 'Automation modal header icon',
+    description: 'A label for the icon in the header of the automation modal.'
+  }
+});
+var iconStyle = (0, _primitives.xcss)({
+  marginRight: 'space.150',
+  backgroundColor: 'color.background.accent.green.subtlest',
+  borderRadius: 'border.radius'
+});
+var modalDescriptionStyle = (0, _primitives.xcss)({
+  marginTop: 'space.150'
+});
+var AutomationModalHeaderOld = exports.AutomationModalHeaderOld = function AutomationModalHeaderOld(_ref) {
+  var modalTitle = _ref.modalTitle,
+    modalDescription = _ref.modalDescription;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useAutomationMenu = (0, _menuContext.useAutomationMenu)(),
+    initialised = _useAutomationMenu.initialised,
+    rules = _useAutomationMenu.rules;
+  var _useModal = (0, _modalDialog.useModal)(),
+    titleId = _useModal.titleId;
+  var showDescription = initialised && rules.length > 0 && !!modalDescription;
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_primitives.Stack, null, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    alignBlock: "center"
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: iconStyle,
+    paddingInline: "space.050",
+    paddingBlock: "space.025"
+  }, /*#__PURE__*/_react.default.createElement(_manualTriggerIcon.default, {
+    size: "small",
+    label: formatMessage(i18n.modalHeaderIconLabel),
+    primaryColor: "var(--ds-icon-accent-green, ".concat(_colors.G50, ")")
+  })), /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "medium",
+    id: titleId
+  }, modalTitle)), showDescription && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: modalDescriptionStyle
+  }, modalDescription)));
+};

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

@@ -0,0 +1,5 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._18zr1b66{padding-inline:var(--ds-space-050,4px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._19pkutpp{margin-top:var(--ds-space-150,9pt)}
+._2hwxutpp{margin-right:var(--ds-space-150,9pt)}

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

@@ -1,18 +1,30 @@
+/* main.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AutomationModalHeader = void 0;
-var _react = _interopRequireDefault(require("react"));
+require("./main.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _reactIntlNext = require("react-intl-next");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _manualTriggerIcon = _interopRequireDefault(require("@atlaskit/legacy-custom-icons/manual-trigger-icon"));
 var _modalDialog = require("@atlaskit/modal-dialog");
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
 var _menuContext = require("../../menu-context");
+var _AutomationModalHeaderOld = require("./AutomationModalHeaderOld");
+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 styles = {
+  iconStyle: "_2rkoglpi _18zr1b66 _1rjcv77o _2hwxutpp",
+  modalDescriptionStyle: "_19pkutpp"
+};
 var i18n = (0, _reactIntlNext.defineMessages)({
   modalHeaderIconLabel: {
     id: 'automation-menu.modal.header.icon.label',
@@ -20,15 +32,7 @@ var i18n = (0, _reactIntlNext.defineMessages)({
     description: 'A label for the icon in the header of the automation modal.'
   }
 });
-var iconStyle = (0, _primitives.xcss)({
-  marginRight: 'space.150',
-  backgroundColor: 'color.background.accent.green.subtlest',
-  borderRadius: 'border.radius'
-});
-var modalDescriptionStyle = (0, _primitives.xcss)({
-  marginTop: 'space.150'
-});
-var AutomationModalHeader = exports.AutomationModalHeader = function AutomationModalHeader(_ref) {
+var AutomationModalHeaderNew = function AutomationModalHeaderNew(_ref) {
   var modalTitle = _ref.modalTitle,
     modalDescription = _ref.modalDescription;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
@@ -39,20 +43,27 @@ var AutomationModalHeader = exports.AutomationModalHeader = function AutomationM
   var _useModal = (0, _modalDialog.useModal)(),
     titleId = _useModal.titleId;
   var showDescription = initialised && rules.length > 0 && !!modalDescription;
-  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_primitives.Stack, null, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+  return /*#__PURE__*/React.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/React.createElement(_compiled.Stack, null, /*#__PURE__*/React.createElement(_compiled.Inline, {
     alignBlock: "center"
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: iconStyle,
-    paddingInline: "space.050",
-    paddingBlock: "space.025"
-  }, /*#__PURE__*/_react.default.createElement(_manualTriggerIcon.default, {
+  }, /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.iconStyle
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    ,
+    backgroundColor: "color.background.accent.green.subtlest"
+  }, /*#__PURE__*/React.createElement(_manualTriggerIcon.default, {
     size: "small",
     label: formatMessage(i18n.modalHeaderIconLabel),
     primaryColor: "var(--ds-icon-accent-green, ".concat(_colors.G50, ")")
-  })), /*#__PURE__*/_react.default.createElement(_heading.default, {
+  })), /*#__PURE__*/React.createElement(_heading.default, {
     size: "medium",
     id: titleId
-  }, modalTitle)), showDescription && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: modalDescriptionStyle
+  }, modalTitle)), showDescription && /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.modalDescriptionStyle
   }, modalDescription)));
+};
+var AutomationModalHeader = exports.AutomationModalHeader = function AutomationModalHeader(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AutomationModalHeaderNew, props);
+  }
+  return /*#__PURE__*/React.createElement(_AutomationModalHeaderOld.AutomationModalHeaderOld, props);
 };

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutomationModalRuleOld = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _menu = require("@atlaskit/menu");
+var _primitives = require("@atlaskit/primitives");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _menuContext = require("../../menu-context");
+var ruleButtonStyle = (0, _primitives.xcss)({
+  borderColor: 'color.border',
+  borderStyle: 'solid',
+  borderWidth: 'border.width',
+  borderRadius: 'border.radius'
+});
+var selectedRuleButtonStyle = (0, _primitives.xcss)({
+  backgroundColor: 'color.background.accent.blue.subtlest',
+  borderColor: 'color.border.accent.blue',
+  borderStyle: 'solid',
+  borderWidth: 'border.width.outline',
+  borderRadius: 'border.radius'
+});
+var ruleNameStyle = (0, _primitives.xcss)({
+  // Using this to increase the height of the button itself.
+  height: '28px'
+});
+var AutomationModalRuleOld = exports.AutomationModalRuleOld = function AutomationModalRuleOld(_ref) {
+  var rule = _ref.rule,
+    selectedRule = _ref.selectedRule,
+    setSelectedRule = _ref.setSelectedRule;
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useAutomationMenu = (0, _menuContext.useAutomationMenu)(),
+    analyticsSource = _useAutomationMenu.analyticsSource,
+    invokingRuleId = _useAutomationMenu.invokingRuleId;
+  var isSelectedRule = (selectedRule === null || selectedRule === void 0 ? void 0 : selectedRule.id) === rule.id;
+  var isExecuting = rule.id === invokingRuleId;
+  var ruleOnClick = function ruleOnClick() {
+    createAnalyticsEvent({
+      type: 'sendUIEvent',
+      data: {
+        action: 'clicked',
+        actionSubject: 'button',
+        actionSubjectId: 'selectManualTriggerAutomation',
+        source: analyticsSource,
+        attributes: {
+          ruleId: rule.id.toString()
+        }
+      }
+    }).fire();
+    setSelectedRule(rule);
+  };
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: isSelectedRule ? selectedRuleButtonStyle : ruleButtonStyle
+  }, /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, {
+    isDisabled: !!invokingRuleId,
+    iconBefore: isExecuting ? /*#__PURE__*/_react.default.createElement(_spinner.default, {
+      size: "small"
+    }) : null,
+    onClick: ruleOnClick
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+    xcss: ruleNameStyle,
+    alignBlock: "center"
+  }, rule.name)));
+};

package/dist/cjs/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/cjs/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/rule/main.js

@@ -1,34 +1,30 @@
+/* main.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AutomationModalRule = void 0;
-var _react = _interopRequireDefault(require("react"));
+require("./main.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _menu = require("@atlaskit/menu");
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _menuContext = require("../../menu-context");
-var ruleButtonStyle = (0, _primitives.xcss)({
-  borderColor: 'color.border',
-  borderStyle: 'solid',
-  borderWidth: 'border.width',
-  borderRadius: 'border.radius'
-});
-var selectedRuleButtonStyle = (0, _primitives.xcss)({
-  backgroundColor: 'color.background.accent.blue.subtlest',
-  borderColor: 'color.border.accent.blue',
-  borderStyle: 'solid',
-  borderWidth: 'border.width.outline',
-  borderRadius: 'border.radius'
-});
-var ruleNameStyle = (0, _primitives.xcss)({
-  // Using this to increase the height of the button itself.
-  height: '28px'
-});
-var AutomationModalRule = exports.AutomationModalRule = function AutomationModalRule(_ref) {
+var _AutomationModalRuleOld = require("./AutomationModalRuleOld");
+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 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;
@@ -54,16 +50,23 @@ var AutomationModalRule = exports.AutomationModalRule = function AutomationModal
     }).fire();
     setSelectedRule(rule);
   };
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: isSelectedRule ? selectedRuleButtonStyle : ruleButtonStyle
-  }, /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, {
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: isSelectedRule ? styles.selectedRuleButtonStyle : styles.ruleButtonStyle,
+    backgroundColor: isSelectedRule ? 'color.background.accent.blue.subtlest' : undefined
+  }, /*#__PURE__*/React.createElement(_menu.ButtonItem, {
     isDisabled: !!invokingRuleId,
-    iconBefore: isExecuting ? /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    iconBefore: isExecuting ? /*#__PURE__*/React.createElement(_spinner.default, {
       size: "small"
     }) : null,
     onClick: ruleOnClick
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
-    xcss: ruleNameStyle,
+  }, /*#__PURE__*/React.createElement(_compiled.Stack, {
+    xcss: styles.ruleNameStyle,
     alignBlock: "center"
   }, rule.name)));
+};
+var AutomationModalRule = exports.AutomationModalRule = function AutomationModalRule(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AutomationModalRuleNew, props);
+  }
+  return /*#__PURE__*/React.createElement(_AutomationModalRuleOld.AutomationModalRuleOld, props);
 };

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutomationModalRuleListOld = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _menu = require("@atlaskit/menu");
+var _primitives = require("@atlaskit/primitives");
+var _menuContext = require("../../menu-context");
+var _emptyState = require("../empty-state");
+var _rule = require("../rule");
+var AutomationModalRuleListOld = exports.AutomationModalRuleListOld = function AutomationModalRuleListOld(_ref) {
+  var selectedRule = _ref.selectedRule,
+    setSelectedRule = _ref.setSelectedRule;
+  var _useAutomationMenu = (0, _menuContext.useAutomationMenu)(),
+    rules = _useAutomationMenu.rules;
+  if (rules.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(_emptyState.AutomationModalEmptyState, null);
+  }
+  return /*#__PURE__*/_react.default.createElement(_menu.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+    space: "space.050"
+  }, rules.map(function (rule) {
+    return /*#__PURE__*/_react.default.createElement(_rule.AutomationModalRule, {
+      key: "manual-rule-".concat(rule.id),
+      rule: rule,
+      selectedRule: selectedRule,
+      setSelectedRule: setSelectedRule
+    });
+  })));
+};

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

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.AutomationModalRuleList = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _menu = require("@atlaskit/menu");
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _menuContext = require("../../menu-context");
 var _emptyState = require("../empty-state");
 var _rule = require("../rule");
-var AutomationModalRuleList = exports.AutomationModalRuleList = function AutomationModalRuleList(_ref) {
+var _AutomationModalRuleListOld = require("./AutomationModalRuleListOld");
+var AutomationModalRuleListNew = function AutomationModalRuleListNew(_ref) {
   var selectedRule = _ref.selectedRule,
     setSelectedRule = _ref.setSelectedRule;
   var _useAutomationMenu = (0, _menuContext.useAutomationMenu)(),
@@ -19,7 +21,7 @@ var AutomationModalRuleList = exports.AutomationModalRuleList = function Automat
   if (rules.length === 0) {
     return /*#__PURE__*/_react.default.createElement(_emptyState.AutomationModalEmptyState, null);
   }
-  return /*#__PURE__*/_react.default.createElement(_menu.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+  return /*#__PURE__*/_react.default.createElement(_menu.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
     space: "space.050"
   }, rules.map(function (rule) {
     return /*#__PURE__*/_react.default.createElement(_rule.AutomationModalRule, {
@@ -29,4 +31,10 @@ var AutomationModalRuleList = exports.AutomationModalRuleList = function Automat
       setSelectedRule: setSelectedRule
     });
   })));
+};
+var AutomationModalRuleList = exports.AutomationModalRuleList = function AutomationModalRuleList(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(AutomationModalRuleListNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_AutomationModalRuleListOld.AutomationModalRuleListOld, props);
 };

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

@@ -10,13 +10,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _automation = _interopRequireDefault(require("@atlaskit/icon/core/automation"));
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _useAnalyticsEvents2 = require("../../../../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../../../../constants");
 var _messages = require("../../../../../messages");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _modal = require("../../../../../state/modal");
 var _action = _interopRequireDefault(require("../action"));
+var _AutomationActionOld = _interopRequireDefault(require("./AutomationActionOld"));
 var _manualTriggersIcon = _interopRequireDefault(require("./manual-triggers-icon"));
 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); }
@@ -26,7 +28,7 @@ var AutomationModal = /*#__PURE__*/(0, _react.lazy)(function () {
     return _interopRequireWildcard(require( /* 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 = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
@@ -54,7 +56,7 @@ var AutomationAction = function AutomationAction(props) {
       values: {
         name: objectName,
         b: function b(chunks) {
-          return /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+          return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
             as: "strong"
           }, chunks);
         },
@@ -97,4 +99,10 @@ var AutomationAction = function AutomationAction(props) {
     }
   })));
 };
+var AutomationAction = function AutomationAction(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(AutomationActionNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_AutomationActionOld.default, props);
+};
 var _default = exports.default = AutomationAction;