@wix/patterns 1.440.0 → 1.443.0

package/dist/cjs/components/SetupWidget/SetupStepGroup.js

@@ -8,6 +8,7 @@ var _designSystem = require("@wix/design-system");
 var _lazy = require("@wix/wix-ui-icons-common/lazy");
 var _react2 = require("@wix/bex-core/react");
 var _SetupStepIcon = require("./SetupStepIcon");
+var _SetupStepSecondaryCta = require("./SetupStepSecondaryCta");
 var _SetupWidgetStCss = require("./SetupWidget.st.css.js");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupStepGroup.tsx";
 /**
@@ -23,6 +24,7 @@ const SetupStepGroup = ({
   expanded,
   isPrimary,
   onToggle,
+  onSecondaryActivate,
   renderChild
 }) => {
   const {
@@ -35,6 +37,20 @@ const SetupStepGroup = ({
   const anyInProgress = children.some(c => c.status === 'in-progress');
   const isFocused = expanded || isPrimary;
   const Chevron = expanded ? _lazy.ChevronUp : _lazy.ChevronDown;
+
+  // Mobile cards have no per-step action area, so the group's secondary action
+  // is desktop-only — and a finished group drops it, like a completed leaf does.
+  const secondaryCtaNode = step.secondaryCta && onSecondaryActivate && !isMobile && !allCompleted ? /*#__PURE__*/_react.default.createElement(_SetupStepSecondaryCta.SetupStepSecondaryCta, {
+    stepId: step.id,
+    cta: step.secondaryCta,
+    onActivate: onSecondaryActivate,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 54,
+      columnNumber: 7
+    }
+  }) : null;
   const headerContent = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     align: "space-between",
     verticalAlign: "middle",
@@ -43,7 +59,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 47,
+      lineNumber: 62,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -53,7 +69,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 53,
+      lineNumber: 68,
       columnNumber: 7
     }
   }, isMobile ? /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -61,7 +77,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 59,
+      lineNumber: 74,
       columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
@@ -69,7 +85,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 60,
+      lineNumber: 75,
       columnNumber: 13
     }
   })) : /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
@@ -77,7 +93,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 63,
+      lineNumber: 78,
       columnNumber: 11
     }
   }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -88,7 +104,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 67,
+      lineNumber: 82,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
@@ -98,7 +114,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 73,
+      lineNumber: 88,
       columnNumber: 11
     }
   }, step.title), anyInProgress && !allCompleted && (isMobile ? /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
@@ -108,7 +124,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 83,
+      lineNumber: 98,
       columnNumber: 15
     }
   }, t('cairo.setupWidget.step.inProgress')) : /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -116,7 +132,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 91,
+      lineNumber: 106,
       columnNumber: 15
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
@@ -126,7 +142,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 92,
+      lineNumber: 107,
       columnNumber: 17
     }
   }, t('cairo.setupWidget.step.inProgress')))))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -135,10 +151,10 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 99,
+      lineNumber: 114,
       columnNumber: 7
     }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Tag, {
+  }, secondaryCtaNode, /*#__PURE__*/_react.default.createElement(_designSystem.Tag, {
     id: `setup-step-counter-${step.id}`,
     skin: "neutral",
     removable: false,
@@ -146,7 +162,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 100,
+      lineNumber: 116,
       columnNumber: 9
     }
   }, t('cairo.setupWidget.aggregated.counter', {
@@ -157,7 +173,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 108,
+      lineNumber: 124,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(Chevron, {
@@ -166,7 +182,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 109,
+      lineNumber: 125,
       columnNumber: 11
     }
   }))));
@@ -186,7 +202,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 116,
+      lineNumber: 132,
       columnNumber: 5
     }
   }, isMobile ? headerContent : /*#__PURE__*/_react.default.createElement(_designSystem.ClickableCard, {
@@ -195,7 +211,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 131,
+      lineNumber: 147,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -204,7 +220,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 132,
+      lineNumber: 148,
       columnNumber: 11
     }
   }, headerContent)));
@@ -217,7 +233,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 141,
+      lineNumber: 157,
       columnNumber: 5
     }
   }, children.map(child => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
@@ -225,7 +241,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 149,
+      lineNumber: 165,
       columnNumber: 9
     }
   }, renderChild(child))));
@@ -236,7 +252,7 @@ const SetupStepGroup = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 156,
+        lineNumber: 172,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -245,7 +261,7 @@ const SetupStepGroup = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 157,
+        lineNumber: 173,
         columnNumber: 9
       }
     }, header, childList));
@@ -256,7 +272,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 166,
+      lineNumber: 182,
       columnNumber: 5
     }
   }, header, childList);

package/dist/cjs/components/SetupWidget/SetupStepGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_lazy","_react2","_SetupStepIcon","_SetupWidgetStCss","_jsxFileName","SetupStepGroup","step","isMobile","expanded","isPrimary","onToggle","renderChild","translate","t","useWixPatternsContainer","children","steps","total","length","completed","filter","c","status","allCompleted","anyInProgress","some","isFocused","Chevron","ChevronUp","ChevronDown","headerContent","default","createElement","Box","align","verticalAlign","width","minHeight","__self","__source","fileName","lineNumber","columnNumber","gap","undefined","className","st","classes","stepIcon","SetupStepIcon","paddingLeft","direction","Text","dataHook","id","size","weight","title","inProgressLabel","marginTop","Badge","skin","type","Tag","removable","height","header","role","tabIndex","onClick","onKeyDown","event","key","preventDefault","style","cursor","ClickableCard","hasPadding","padding","childList","map","child","Fragment","card","row","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Text, Badge, Tag, ClickableCard } from '@wix/design-system';\nimport { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common/lazy';\nimport { SetupWidgetStep } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { SetupStepIcon } from './SetupStepIcon';\nimport { st, classes } from './SetupWidget.st.css.js';\n\nexport interface SetupStepGroupProps {\n  step: SetupWidgetStep;\n  isMobile: boolean;\n  /** The group's children are shown. */\n  expanded: boolean;\n  /** The recommended/focused row. */\n  isPrimary: boolean;\n  onToggle: () => void;\n  /** Renders a single child step (the parent supplies the row/card). */\n  renderChild: (child: SetupWidgetStep) => React.ReactNode;\n}\n\n/**\n * Aggregated group row (e.g. \"Stores\", \"Bookings\"). Collapsed: icon + title +\n * an \"x/y\" counter + chevron. Expanded: the children render indented below.\n * Completion / in-progress are derived from the children (mirrors\n * `AggregatedByGroupStep` in dashboard-setup). The toggle lives on the header\n * only, so clicking a child doesn't collapse the group.\n */\nexport const SetupStepGroup = ({\n  step,\n  isMobile,\n  expanded,\n  isPrimary,\n  onToggle,\n  renderChild,\n}: SetupStepGroupProps) => {\n  const { translate: t } = useWixPatternsContainer();\n\n  const children = step.steps ?? [];\n  const total = children.length;\n  const completed = children.filter((c) => c.status === 'completed').length;\n  const allCompleted = total > 0 && completed === total;\n  const anyInProgress = children.some((c) => c.status === 'in-progress');\n  const isFocused = expanded || isPrimary;\n  const Chevron = expanded ? ChevronUp : ChevronDown;\n\n  const headerContent = (\n    <Box\n      align=\"space-between\"\n      verticalAlign=\"middle\"\n      width=\"100%\"\n      minHeight=\"30px\"\n    >\n      <Box\n        minHeight=\"24px\"\n        verticalAlign=\"middle\"\n        gap={isMobile ? 'SP1' : undefined}\n      >\n        {isMobile ? (\n          <Box className={st(classes.stepIcon)}>\n            <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />\n          </Box>\n        ) : (\n          <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />\n        )}\n        {/* Mobile cards stack the badge under the title (matches\n            SetupStepCard); desktop rows keep it inline next to it. */}\n        <Box\n          paddingLeft={isMobile ? undefined : 'SP2'}\n          direction={isMobile ? 'vertical' : 'horizontal'}\n          verticalAlign={isMobile ? undefined : 'middle'}\n          gap=\"SP1\"\n        >\n          <Text\n            dataHook={`setup-step-title-${step.id}`}\n            size=\"small\"\n            weight={isFocused ? 'bold' : 'thin'}\n          >\n            {step.title}\n          </Text>\n          {anyInProgress &&\n            !allCompleted &&\n            (isMobile ? (\n              <Text\n                size=\"tiny\"\n                weight=\"normal\"\n                className={st(classes.inProgressLabel)}\n              >\n                {t('cairo.setupWidget.step.inProgress')}\n              </Text>\n            ) : (\n              <Box marginTop=\"2px\">\n                <Badge size=\"tiny\" skin=\"urgent\" type=\"transparent\">\n                  {t('cairo.setupWidget.step.inProgress')}\n                </Badge>\n              </Box>\n            ))}\n        </Box>\n      </Box>\n      <Box verticalAlign=\"middle\" gap=\"SP1\">\n        <Tag\n          id={`setup-step-counter-${step.id}`}\n          skin=\"neutral\"\n          removable={false}\n          size=\"small\"\n        >\n          {t('cairo.setupWidget.aggregated.counter', { completed, total })}\n        </Tag>\n        <Box dataHook={`setup-step-chevron-${step.id}`}>\n          <Chevron width=\"20\" height=\"20\" />\n        </Box>\n      </Box>\n    </Box>\n  );\n\n  const header = (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={onToggle}\n      onKeyDown={(event: React.KeyboardEvent) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          onToggle();\n        }\n      }}\n      style={{ cursor: 'pointer' }}\n    >\n      {isMobile ? (\n        headerContent\n      ) : (\n        <ClickableCard skin=\"outline\" hasPadding={false}>\n          <Box direction=\"vertical\" padding=\"6px\">\n            {headerContent}\n          </Box>\n        </ClickableCard>\n      )}\n    </div>\n  );\n\n  const childList = expanded && (\n    <Box\n      dataHook={`setup-step-children-${step.id}`}\n      direction=\"vertical\"\n      gap={isMobile ? 'SP3' : 'SP1'}\n      paddingLeft=\"SP5\"\n      marginTop={isMobile ? 'SP3' : 'SP1'}\n    >\n      {children.map((child) => (\n        <React.Fragment key={child.id}>{renderChild(child)}</React.Fragment>\n      ))}\n    </Box>\n  );\n\n  if (isMobile) {\n    return (\n      <div data-hook={`setup-step-${step.id}`} className={st(classes.card)}>\n        <Box direction=\"vertical\" padding=\"SP2\">\n          {header}\n          {childList}\n        </Box>\n      </div>\n    );\n  }\n\n  return (\n    <div data-hook={`setup-step-${step.id}`} className={st(classes.row)}>\n      {header}\n      {childList}\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_lazy","_react2","_SetupStepIcon","_SetupStepSecondaryCta","_SetupWidgetStCss","_jsxFileName","SetupStepGroup","step","isMobile","expanded","isPrimary","onToggle","onSecondaryActivate","renderChild","translate","t","useWixPatternsContainer","children","steps","total","length","completed","filter","c","status","allCompleted","anyInProgress","some","isFocused","Chevron","ChevronUp","ChevronDown","secondaryCtaNode","secondaryCta","default","createElement","SetupStepSecondaryCta","stepId","id","cta","onActivate","__self","__source","fileName","lineNumber","columnNumber","headerContent","Box","align","verticalAlign","width","minHeight","gap","undefined","className","st","classes","stepIcon","SetupStepIcon","paddingLeft","direction","Text","dataHook","size","weight","title","inProgressLabel","marginTop","Badge","skin","type","Tag","removable","height","header","role","tabIndex","onClick","onKeyDown","event","key","preventDefault","style","cursor","ClickableCard","hasPadding","padding","childList","map","child","Fragment","card","row","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Text, Badge, Tag, ClickableCard } from '@wix/design-system';\nimport { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common/lazy';\nimport { SetupWidgetStep } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { SetupStepIcon } from './SetupStepIcon';\nimport { SetupStepSecondaryCta } from './SetupStepSecondaryCta';\nimport { st, classes } from './SetupWidget.st.css.js';\n\nexport interface SetupStepGroupProps {\n  step: SetupWidgetStep;\n  isMobile: boolean;\n  /** The group's children are shown. */\n  expanded: boolean;\n  /** The recommended/focused row. */\n  isPrimary: boolean;\n  onToggle: () => void;\n  /** Fires when the group's `secondaryCta` icon button is clicked. */\n  onSecondaryActivate?: () => void;\n  /** Renders a single child step (the parent supplies the row/card). */\n  renderChild: (child: SetupWidgetStep) => React.ReactNode;\n}\n\n/**\n * Aggregated group row (e.g. \"Stores\", \"Bookings\"). Collapsed: icon + title +\n * an \"x/y\" counter + chevron. Expanded: the children render indented below.\n * Completion / in-progress are derived from the children (mirrors\n * `AggregatedByGroupStep` in dashboard-setup). The toggle lives on the header\n * only, so clicking a child doesn't collapse the group.\n */\nexport const SetupStepGroup = ({\n  step,\n  isMobile,\n  expanded,\n  isPrimary,\n  onToggle,\n  onSecondaryActivate,\n  renderChild,\n}: SetupStepGroupProps) => {\n  const { translate: t } = useWixPatternsContainer();\n\n  const children = step.steps ?? [];\n  const total = children.length;\n  const completed = children.filter((c) => c.status === 'completed').length;\n  const allCompleted = total > 0 && completed === total;\n  const anyInProgress = children.some((c) => c.status === 'in-progress');\n  const isFocused = expanded || isPrimary;\n  const Chevron = expanded ? ChevronUp : ChevronDown;\n\n  // Mobile cards have no per-step action area, so the group's secondary action\n  // is desktop-only — and a finished group drops it, like a completed leaf does.\n  const secondaryCtaNode =\n    step.secondaryCta && onSecondaryActivate && !isMobile && !allCompleted ? (\n      <SetupStepSecondaryCta\n        stepId={step.id}\n        cta={step.secondaryCta}\n        onActivate={onSecondaryActivate}\n      />\n    ) : null;\n\n  const headerContent = (\n    <Box\n      align=\"space-between\"\n      verticalAlign=\"middle\"\n      width=\"100%\"\n      minHeight=\"30px\"\n    >\n      <Box\n        minHeight=\"24px\"\n        verticalAlign=\"middle\"\n        gap={isMobile ? 'SP1' : undefined}\n      >\n        {isMobile ? (\n          <Box className={st(classes.stepIcon)}>\n            <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />\n          </Box>\n        ) : (\n          <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />\n        )}\n        {/* Mobile cards stack the badge under the title (matches\n            SetupStepCard); desktop rows keep it inline next to it. */}\n        <Box\n          paddingLeft={isMobile ? undefined : 'SP2'}\n          direction={isMobile ? 'vertical' : 'horizontal'}\n          verticalAlign={isMobile ? undefined : 'middle'}\n          gap=\"SP1\"\n        >\n          <Text\n            dataHook={`setup-step-title-${step.id}`}\n            size=\"small\"\n            weight={isFocused ? 'bold' : 'thin'}\n          >\n            {step.title}\n          </Text>\n          {anyInProgress &&\n            !allCompleted &&\n            (isMobile ? (\n              <Text\n                size=\"tiny\"\n                weight=\"normal\"\n                className={st(classes.inProgressLabel)}\n              >\n                {t('cairo.setupWidget.step.inProgress')}\n              </Text>\n            ) : (\n              <Box marginTop=\"2px\">\n                <Badge size=\"tiny\" skin=\"urgent\" type=\"transparent\">\n                  {t('cairo.setupWidget.step.inProgress')}\n                </Badge>\n              </Box>\n            ))}\n        </Box>\n      </Box>\n      <Box verticalAlign=\"middle\" gap=\"SP1\">\n        {secondaryCtaNode}\n        <Tag\n          id={`setup-step-counter-${step.id}`}\n          skin=\"neutral\"\n          removable={false}\n          size=\"small\"\n        >\n          {t('cairo.setupWidget.aggregated.counter', { completed, total })}\n        </Tag>\n        <Box dataHook={`setup-step-chevron-${step.id}`}>\n          <Chevron width=\"20\" height=\"20\" />\n        </Box>\n      </Box>\n    </Box>\n  );\n\n  const header = (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={onToggle}\n      onKeyDown={(event: React.KeyboardEvent) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          onToggle();\n        }\n      }}\n      style={{ cursor: 'pointer' }}\n    >\n      {isMobile ? (\n        headerContent\n      ) : (\n        <ClickableCard skin=\"outline\" hasPadding={false}>\n          <Box direction=\"vertical\" padding=\"6px\">\n            {headerContent}\n          </Box>\n        </ClickableCard>\n      )}\n    </div>\n  );\n\n  const childList = expanded && (\n    <Box\n      dataHook={`setup-step-children-${step.id}`}\n      direction=\"vertical\"\n      gap={isMobile ? 'SP3' : 'SP1'}\n      paddingLeft=\"SP5\"\n      marginTop={isMobile ? 'SP3' : 'SP1'}\n    >\n      {children.map((child) => (\n        <React.Fragment key={child.id}>{renderChild(child)}</React.Fragment>\n      ))}\n    </Box>\n  );\n\n  if (isMobile) {\n    return (\n      <div data-hook={`setup-step-${step.id}`} className={st(classes.card)}>\n        <Box direction=\"vertical\" padding=\"SP2\">\n          {header}\n          {childList}\n        </Box>\n      </div>\n    );\n  }\n\n  return (\n    <div data-hook={`setup-step-${step.id}`} className={st(classes.row)}>\n      {header}\n      {childList}\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/SetupWidget/SetupStepRow.js

@@ -7,6 +7,7 @@ var _react = _interopRequireDefault(require("react"));
 var _designSystem = require("@wix/design-system");
 var _react2 = require("@wix/bex-core/react");
 var _SetupStepIcon = require("./SetupStepIcon");
+var _SetupStepSecondaryCta = require("./SetupStepSecondaryCta");
 var _SetupWidgetStCss = require("./SetupWidget.st.css.js");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupStepRow.tsx";
 /**
@@ -22,6 +23,7 @@ const SetupStepRow = ({
   isFocused,
   expanded,
   onActivate,
+  onSecondaryActivate,
   renderStepContent,
   focusedBackground
 }) => {
@@ -37,6 +39,46 @@ const SetupStepRow = ({
   const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;
   const clickable = !isCompleted && !isDisabled || showCompletedCta;
   const handleClick = clickable ? onActivate : undefined;
+  const ctaNode = showCta && /*#__PURE__*/_react.default.createElement(_designSystem.ClickableCard.Action, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 66,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Button, {
+    dataHook: `setup-step-cta-${step.id}`,
+    size: "small",
+    priority: !isDisabled && !isFocused ? 'secondary' : 'primary',
+    disabled: isDisabled,
+    ellipsis: false,
+    onClick: event => {
+      event.stopPropagation();
+      onActivate();
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 67,
+      columnNumber: 7
+    }
+  }, step.ctaLabel));
+
+  // The step's extra icon-only action. Dropped on completed steps (their CTA is
+  // gone too) and while the step is inline-expanded, so the row keeps a single
+  // trailing action.
+  const secondaryCtaNode = step.secondaryCta && onSecondaryActivate && !isCompleted && !isInlineExpanded ? /*#__PURE__*/_react.default.createElement(_SetupStepSecondaryCta.SetupStepSecondaryCta, {
+    stepId: step.id,
+    cta: step.secondaryCta,
+    disabled: isDisabled,
+    onActivate: onSecondaryActivate,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 91,
+      columnNumber: 7
+    }
+  }) : null;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-hook": `setup-step-${step.id}`,
     "data-focused": isFocused,
@@ -47,7 +89,7 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 61,
+      lineNumber: 100,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.ClickableCard, {
@@ -58,7 +100,7 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 69,
+      lineNumber: 108,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -67,7 +109,7 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 75,
+      lineNumber: 114,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -78,7 +120,7 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 79,
+      lineNumber: 118,
       columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -87,7 +129,7 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 85,
+      lineNumber: 124,
       columnNumber: 13
     }
   }, /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
@@ -95,7 +137,7 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 86,
+      lineNumber: 125,
       columnNumber: 15
     }
   }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -106,7 +148,7 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 87,
+      lineNumber: 126,
       columnNumber: 15
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
@@ -119,14 +161,14 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 93,
+      lineNumber: 132,
       columnNumber: 17
     }
   }, isCompleted ? /*#__PURE__*/_react.default.createElement("del", {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 101,
+      lineNumber: 140,
       columnNumber: 34
     }
   }, step.title) : step.title), isInProgress && !isInlineExpanded && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -134,7 +176,7 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 104,
+      lineNumber: 143,
       columnNumber: 19
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
@@ -144,72 +186,53 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 105,
+      lineNumber: 144,
       columnNumber: 21
     }
-  }, t('cairo.setupWidget.step.inProgress'))))), showCta && (() => {
-    const ctaNode = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-      verticalAlign: "middle",
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 115,
-        columnNumber: 19
-      }
-    }, /*#__PURE__*/_react.default.createElement(_designSystem.ClickableCard.Action, {
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 116,
-        columnNumber: 21
-      }
-    }, /*#__PURE__*/_react.default.createElement(_designSystem.Button, {
-      dataHook: `setup-step-cta-${step.id}`,
-      size: "small",
-      priority: !isDisabled && !isFocused ? 'secondary' : 'primary',
-      disabled: isDisabled,
-      ellipsis: false,
-      onClick: event => {
-        event.stopPropagation();
-        onActivate();
-      },
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 117,
-        columnNumber: 23
-      }
-    }, step.ctaLabel)));
-
-    // Disabled steps explain why the CTA is disabled (G5).
-    return isDisabled ? /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
-      dataHook: `setup-step-disabled-tooltip-${step.id}`,
-      content: step.disabledTooltip ??
-      // Translation-key id stays `lockedTooltip` until the
-      // Translation Center key is renamed (TC follow-up to T2).
-      t('cairo.setupWidget.step.lockedTooltip'),
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 138,
-        columnNumber: 19
-      }
-    }, ctaNode) : ctaNode;
-  })(), showCompletedCta && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+  }, t('cairo.setupWidget.step.inProgress'))))), (secondaryCtaNode || showCta) && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    verticalAlign: "middle",
+    gap: "SP1",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 152,
+      columnNumber: 15
+    }
+  }, secondaryCtaNode, showCta && isDisabled ? /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+    dataHook: `setup-step-disabled-tooltip-${step.id}`,
+    content: step.disabledTooltip ??
+    // Translation-key id stays `lockedTooltip` until the
+    // Translation Center key is renamed (TC follow-up to T2).
+    t('cairo.setupWidget.step.lockedTooltip'),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 156,
+      columnNumber: 19
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    verticalAlign: "middle",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 165,
+      columnNumber: 21
+    }
+  }, ctaNode)) : ctaNode), showCompletedCta && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     verticalAlign: "middle",
     marginRight: "SP2",
     className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.completedCta),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 154,
+      lineNumber: 173,
       columnNumber: 15
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.ClickableCard.Action, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 159,
+      lineNumber: 178,
       columnNumber: 17
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
@@ -222,7 +245,7 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 160,
+      lineNumber: 179,
       columnNumber: 19
     }
   }, step.completedCtaLabel)))), isInlineExpanded && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -235,7 +258,7 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 175,
+      lineNumber: 194,
       columnNumber: 13
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -243,21 +266,21 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 183,
+      lineNumber: 202,
       columnNumber: 15
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 184,
+      lineNumber: 203,
       columnNumber: 17
     }
   })), /*#__PURE__*/_react.default.createElement(_designSystem.ClickableCard.Action, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 189,
+      lineNumber: 208,
       columnNumber: 15
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -267,7 +290,7 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 190,
+      lineNumber: 209,
       columnNumber: 17
     }
   }, renderStepContent == null ? void 0 : renderStepContent(step)))))));