@wix/patterns 1.433.0 → 1.436.0

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

@@ -14,15 +14,16 @@ var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cj
  * - completed → green check, struck-through title, optional completed CTA
  * - disabled → muted bullet + disabled CTA (permission-denied)
  * - in-progress → "In progress" badge next to the title
- * - focused → blue surface, bold title, primary CTA
- * - hoverable rows tint blue on hover (handled in Stylable)
+ * - focused → bolder border, bold title, primary CTA (+ background tint if
+ *   `focusedBackground` is on)
  */
 const SetupStepRow = ({
   step,
   isFocused,
   expanded,
   onActivate,
-  renderStepContent
+  renderStepContent,
+  focusedBackground
 }) => {
   const {
     translate: t
@@ -35,15 +36,13 @@ const SetupStepRow = ({
   // Completed steps stay actionable when they carry a completed CTA (G2).
   const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;
   const clickable = !isCompleted && !isDisabled || showCompletedCta;
-  const hoverable = !isFocused && !isCompleted && !isDisabled;
   const handleClick = clickable ? onActivate : undefined;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-hook": `setup-step-${step.id}`,
     "data-focused": isFocused,
     className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.row, {
       focused: isFocused,
-      hoverable,
-      clickable
+      withBackground: !!focusedBackground
     }),
     onClick: handleClick,
     onKeyDown: clickable ? event => {
@@ -57,9 +56,28 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 58,
+      lineNumber: 61,
       columnNumber: 5
     }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.ClickableCard, {
+    skin: "outline",
+    hasPadding: false,
+    disabled: isDisabled,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 82,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    direction: "vertical",
+    padding: "6px",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 83,
+      columnNumber: 9
+    }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     align: "space-between",
     verticalAlign: "middle",
@@ -68,8 +86,8 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 83,
-      columnNumber: 7
+      lineNumber: 87,
+      columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     minHeight: "24px",
@@ -77,16 +95,16 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 89,
-      columnNumber: 9
+      lineNumber: 93,
+      columnNumber: 13
     }
   }, /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
     status: step.status,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 90,
-      columnNumber: 11
+      lineNumber: 94,
+      columnNumber: 15
     }
   }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     paddingLeft: "SP2",
@@ -96,8 +114,8 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 91,
-      columnNumber: 11
+      lineNumber: 95,
+      columnNumber: 15
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
     dataHook: `setup-step-title-${step.id}`,
@@ -109,23 +127,23 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 97,
-      columnNumber: 13
+      lineNumber: 101,
+      columnNumber: 17
     }
   }, isCompleted ? /*#__PURE__*/_react.default.createElement("del", {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 105,
-      columnNumber: 30
+      lineNumber: 109,
+      columnNumber: 34
     }
   }, step.title) : step.title), isInProgress && !isInlineExpanded && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     marginTop: "2px",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 108,
-      columnNumber: 15
+      lineNumber: 112,
+      columnNumber: 19
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
     size: "tiny",
@@ -134,8 +152,8 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 109,
-      columnNumber: 17
+      lineNumber: 113,
+      columnNumber: 21
     }
   }, t('cairo.setupWidget.step.inProgress'))))), showCta && (() => {
     const ctaNode = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -143,8 +161,8 @@ const SetupStepRow = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 119,
-        columnNumber: 15
+        lineNumber: 123,
+        columnNumber: 19
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.Button, {
       dataHook: `setup-step-cta-${step.id}`,
@@ -159,8 +177,8 @@ const SetupStepRow = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 120,
-        columnNumber: 17
+        lineNumber: 124,
+        columnNumber: 21
       }
     }, step.ctaLabel));
 
@@ -174,8 +192,8 @@ const SetupStepRow = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 138,
-        columnNumber: 15
+        lineNumber: 144,
+        columnNumber: 19
       }
     }, ctaNode) : ctaNode;
   })(), showCompletedCta && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -185,8 +203,8 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 154,
-      columnNumber: 11
+      lineNumber: 160,
+      columnNumber: 15
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
     dataHook: `setup-step-cta-${step.id}`,
@@ -198,8 +216,8 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 159,
-      columnNumber: 13
+      lineNumber: 165,
+      columnNumber: 17
     }
   }, step.completedCtaLabel))), isInlineExpanded && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     dataHook: `setup-step-content-${step.id}`,
@@ -211,23 +229,23 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 173,
-      columnNumber: 9
+      lineNumber: 179,
+      columnNumber: 13
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     marginBottom: "SP2",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 181,
-      columnNumber: 11
+      lineNumber: 187,
+      columnNumber: 15
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 182,
-      columnNumber: 13
+      lineNumber: 188,
+      columnNumber: 17
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
     onClick: event => event.stopPropagation(),
@@ -235,10 +253,10 @@ const SetupStepRow = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 187,
-      columnNumber: 11
+      lineNumber: 193,
+      columnNumber: 15
     }
-  }, renderStepContent == null ? void 0 : renderStepContent(step))));
+  }, renderStepContent == null ? void 0 : renderStepContent(step))))));
 };
 exports.SetupStepRow = SetupStepRow;
 //# sourceMappingURL=SetupStepRow.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_react2","_SetupStepIcon","_SetupWidgetStCss","_jsxFileName","SetupStepRow","step","isFocused","expanded","onActivate","renderStepContent","translate","t","useWixPatternsContainer","isInProgress","status","isCompleted","isDisabled","isInlineExpanded","expansionMode","showCta","ctaLabel","showCompletedCta","completedCtaLabel","clickable","hoverable","handleClick","undefined","default","createElement","id","className","st","classes","row","focused","onClick","onKeyDown","event","key","preventDefault","role","tabIndex","__self","__source","fileName","lineNumber","columnNumber","Box","align","verticalAlign","width","minHeight","SetupStepIcon","paddingLeft","paddingRight","gap","Text","dataHook","size","skin","weight","secondary","light","title","marginTop","Badge","type","ctaNode","Button","priority","disabled","ellipsis","stopPropagation","Tooltip","content","disabledTooltip","marginRight","completedCta","TextButton","direction","paddingBottom","marginBottom","Divider","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepRow.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Box,\n  Text,\n  Button,\n  TextButton,\n  Badge,\n  Divider,\n  Tooltip,\n} from '@wix/design-system';\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 SetupStepRowProps {\n  step: SetupWidgetStep;\n  /** Highlighted + bold row (the recommended (primary) or expanded step). */\n  isFocused: boolean;\n  /** Inline content is shown below the row. */\n  expanded: boolean;\n  onActivate: () => void;\n  /** Supplies the inline-expansion content (render prop on the widget). */\n  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;\n}\n\n/**\n * Desktop step row. Recreated from the existing Setup widget:\n * - completed → green check, struck-through title, optional completed CTA\n * - disabled → muted bullet + disabled CTA (permission-denied)\n * - in-progress → \"In progress\" badge next to the title\n * - focused → blue surface, bold title, primary CTA\n * - hoverable rows tint blue on hover (handled in Stylable)\n */\nexport const SetupStepRow = ({\n  step,\n  isFocused,\n  expanded,\n  onActivate,\n  renderStepContent,\n}: SetupStepRowProps) => {\n  const { translate: t } = useWixPatternsContainer();\n\n  const isInProgress = step.status === 'in-progress';\n  const isCompleted = step.status === 'completed';\n  const isDisabled = step.status === 'disabled';\n  const isInlineExpanded = expanded && step.expansionMode === 'inline';\n\n  const showCta = !isCompleted && !!step.ctaLabel && !isInlineExpanded;\n  // Completed steps stay actionable when they carry a completed CTA (G2).\n  const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;\n  const clickable = (!isCompleted && !isDisabled) || showCompletedCta;\n  const hoverable = !isFocused && !isCompleted && !isDisabled;\n\n  const handleClick = clickable ? onActivate : undefined;\n\n  return (\n    <div\n      data-hook={`setup-step-${step.id}`}\n      data-focused={isFocused}\n      className={st(classes.row, {\n        focused: isFocused,\n        hoverable,\n        clickable,\n      })}\n      onClick={handleClick}\n      onKeyDown={\n        clickable\n          ? (event: React.KeyboardEvent) => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onActivate();\n              }\n            }\n          : undefined\n      }\n      role={clickable ? 'button' : undefined}\n      tabIndex={clickable ? 0 : undefined}\n    >\n      {/* Reserve the CTA button's height (small button = 30px) so rows keep a\n          stable height whether or not they render a CTA — otherwise completed\n          rows (which drop the CTA) would shrink and the widget would reflow. */}\n      <Box\n        align=\"space-between\"\n        verticalAlign=\"middle\"\n        width=\"100%\"\n        minHeight=\"30px\"\n      >\n        <Box minHeight=\"24px\" verticalAlign=\"middle\">\n          <SetupStepIcon status={step.status} />\n          <Box\n            paddingLeft=\"SP2\"\n            paddingRight=\"SP2\"\n            verticalAlign=\"middle\"\n            gap=\"SP1\"\n          >\n            <Text\n              dataHook={`setup-step-title-${step.id}`}\n              size=\"small\"\n              skin={isDisabled ? 'disabled' : 'standard'}\n              weight={isFocused ? 'bold' : 'thin'}\n              secondary={isCompleted}\n              light={isCompleted}\n            >\n              {isCompleted ? <del>{step.title}</del> : step.title}\n            </Text>\n            {isInProgress && !isInlineExpanded && (\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        {showCta &&\n          (() => {\n            const ctaNode = (\n              <Box verticalAlign=\"middle\">\n                <Button\n                  dataHook={`setup-step-cta-${step.id}`}\n                  size=\"small\"\n                  priority={!isDisabled && !isFocused ? 'secondary' : 'primary'}\n                  disabled={isDisabled}\n                  ellipsis={false}\n                  onClick={(event: React.MouseEvent) => {\n                    event.stopPropagation();\n                    onActivate();\n                  }}\n                >\n                  {step.ctaLabel}\n                </Button>\n              </Box>\n            );\n\n            // Disabled steps explain why the CTA is disabled (G5).\n            return isDisabled ? (\n              <Tooltip\n                dataHook={`setup-step-disabled-tooltip-${step.id}`}\n                content={\n                  step.disabledTooltip ??\n                  // Translation-key id stays `lockedTooltip` until the\n                  // Translation Center key is renamed (TC follow-up to T2).\n                  t('cairo.setupWidget.step.lockedTooltip')\n                }\n              >\n                {ctaNode}\n              </Tooltip>\n            ) : (\n              ctaNode\n            );\n          })()}\n        {showCompletedCta && (\n          <Box\n            verticalAlign=\"middle\"\n            marginRight=\"SP2\"\n            className={st(classes.completedCta)}\n          >\n            <TextButton\n              dataHook={`setup-step-cta-${step.id}`}\n              size=\"small\"\n              onClick={(event: React.MouseEvent) => {\n                event.stopPropagation();\n                onActivate();\n              }}\n            >\n              {step.completedCtaLabel}\n            </TextButton>\n          </Box>\n        )}\n      </Box>\n      {isInlineExpanded && (\n        <Box\n          dataHook={`setup-step-content-${step.id}`}\n          direction=\"vertical\"\n          paddingLeft=\"SP5\"\n          paddingRight=\"SP1\"\n          paddingBottom=\"SP1\"\n          marginTop=\"SP2\"\n        >\n          <Box marginBottom=\"SP2\">\n            <Divider />\n          </Box>\n          {/* Stop clicks/keys inside the consumer widget from bubbling to the\n              row's toggle handler — otherwise interacting with the content\n              (e.g. an input) would collapse the card. */}\n          <div\n            onClick={(event) => event.stopPropagation()}\n            onKeyDown={(event) => event.stopPropagation()}\n          >\n            {renderStepContent?.(step)}\n          </div>\n        </Box>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_react2","_SetupStepIcon","_SetupWidgetStCss","_jsxFileName","SetupStepRow","step","isFocused","expanded","onActivate","renderStepContent","focusedBackground","translate","t","useWixPatternsContainer","isInProgress","status","isCompleted","isDisabled","isInlineExpanded","expansionMode","showCta","ctaLabel","showCompletedCta","completedCtaLabel","clickable","handleClick","undefined","default","createElement","id","className","st","classes","row","focused","withBackground","onClick","onKeyDown","event","key","preventDefault","role","tabIndex","__self","__source","fileName","lineNumber","columnNumber","ClickableCard","skin","hasPadding","disabled","Box","direction","padding","align","verticalAlign","width","minHeight","SetupStepIcon","paddingLeft","paddingRight","gap","Text","dataHook","size","weight","secondary","light","title","marginTop","Badge","type","ctaNode","Button","priority","ellipsis","stopPropagation","Tooltip","content","disabledTooltip","marginRight","completedCta","TextButton","paddingBottom","marginBottom","Divider","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepRow.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Box,\n  Text,\n  Button,\n  TextButton,\n  Badge,\n  Divider,\n  Tooltip,\n  ClickableCard,\n} from '@wix/design-system';\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 SetupStepRowProps {\n  step: SetupWidgetStep;\n  /** Highlighted + bold row (the recommended (primary) or expanded step). */\n  isFocused: boolean;\n  /** Inline content is shown below the row. */\n  expanded: boolean;\n  onActivate: () => void;\n  /** Supplies the inline-expansion content (render prop on the widget). */\n  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;\n  /** Tints the row's background when it's focused (off under the Harmony theme, see `useBmHarmonyTheme`). */\n  focusedBackground?: boolean;\n}\n\n/**\n * Desktop step row. Recreated from the existing Setup widget:\n * - completed → green check, struck-through title, optional completed CTA\n * - disabled → muted bullet + disabled CTA (permission-denied)\n * - in-progress → \"In progress\" badge next to the title\n * - focused → bolder border, bold title, primary CTA (+ background tint if\n *   `focusedBackground` is on)\n */\nexport const SetupStepRow = ({\n  step,\n  isFocused,\n  expanded,\n  onActivate,\n  renderStepContent,\n  focusedBackground,\n}: SetupStepRowProps) => {\n  const { translate: t } = useWixPatternsContainer();\n\n  const isInProgress = step.status === 'in-progress';\n  const isCompleted = step.status === 'completed';\n  const isDisabled = step.status === 'disabled';\n  const isInlineExpanded = expanded && step.expansionMode === 'inline';\n\n  const showCta = !isCompleted && !!step.ctaLabel && !isInlineExpanded;\n  // Completed steps stay actionable when they carry a completed CTA (G2).\n  const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;\n  const clickable = (!isCompleted && !isDisabled) || showCompletedCta;\n\n  const handleClick = clickable ? onActivate : undefined;\n\n  return (\n    <div\n      data-hook={`setup-step-${step.id}`}\n      data-focused={isFocused}\n      className={st(classes.row, {\n        focused: isFocused,\n        withBackground: !!focusedBackground,\n      })}\n      onClick={handleClick}\n      onKeyDown={\n        clickable\n          ? (event: React.KeyboardEvent) => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onActivate();\n              }\n            }\n          : undefined\n      }\n      role={clickable ? 'button' : undefined}\n      tabIndex={clickable ? 0 : undefined}\n    >\n      <ClickableCard skin=\"outline\" hasPadding={false} disabled={isDisabled}>\n        <Box direction=\"vertical\" padding=\"6px\">\n          {/* Reserve the CTA button's height (small button = 30px) so rows keep a\n              stable height whether or not they render a CTA — otherwise completed\n              rows (which drop the CTA) would shrink and the widget would reflow. */}\n          <Box\n            align=\"space-between\"\n            verticalAlign=\"middle\"\n            width=\"100%\"\n            minHeight=\"30px\"\n          >\n            <Box minHeight=\"24px\" verticalAlign=\"middle\">\n              <SetupStepIcon status={step.status} />\n              <Box\n                paddingLeft=\"SP2\"\n                paddingRight=\"SP2\"\n                verticalAlign=\"middle\"\n                gap=\"SP1\"\n              >\n                <Text\n                  dataHook={`setup-step-title-${step.id}`}\n                  size=\"small\"\n                  skin={isDisabled ? 'disabled' : 'standard'}\n                  weight={isFocused ? 'bold' : 'thin'}\n                  secondary={isCompleted}\n                  light={isCompleted}\n                >\n                  {isCompleted ? <del>{step.title}</del> : step.title}\n                </Text>\n                {isInProgress && !isInlineExpanded && (\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            {showCta &&\n              (() => {\n                const ctaNode = (\n                  <Box verticalAlign=\"middle\">\n                    <Button\n                      dataHook={`setup-step-cta-${step.id}`}\n                      size=\"small\"\n                      priority={\n                        !isDisabled && !isFocused ? 'secondary' : 'primary'\n                      }\n                      disabled={isDisabled}\n                      ellipsis={false}\n                      onClick={(event: React.MouseEvent) => {\n                        event.stopPropagation();\n                        onActivate();\n                      }}\n                    >\n                      {step.ctaLabel}\n                    </Button>\n                  </Box>\n                );\n\n                // Disabled steps explain why the CTA is disabled (G5).\n                return isDisabled ? (\n                  <Tooltip\n                    dataHook={`setup-step-disabled-tooltip-${step.id}`}\n                    content={\n                      step.disabledTooltip ??\n                      // Translation-key id stays `lockedTooltip` until the\n                      // Translation Center key is renamed (TC follow-up to T2).\n                      t('cairo.setupWidget.step.lockedTooltip')\n                    }\n                  >\n                    {ctaNode}\n                  </Tooltip>\n                ) : (\n                  ctaNode\n                );\n              })()}\n            {showCompletedCta && (\n              <Box\n                verticalAlign=\"middle\"\n                marginRight=\"SP2\"\n                className={st(classes.completedCta)}\n              >\n                <TextButton\n                  dataHook={`setup-step-cta-${step.id}`}\n                  size=\"small\"\n                  onClick={(event: React.MouseEvent) => {\n                    event.stopPropagation();\n                    onActivate();\n                  }}\n                >\n                  {step.completedCtaLabel}\n                </TextButton>\n              </Box>\n            )}\n          </Box>\n          {isInlineExpanded && (\n            <Box\n              dataHook={`setup-step-content-${step.id}`}\n              direction=\"vertical\"\n              paddingLeft=\"SP5\"\n              paddingRight=\"SP1\"\n              paddingBottom=\"SP1\"\n              marginTop=\"SP2\"\n            >\n              <Box marginBottom=\"SP2\">\n                <Divider />\n              </Box>\n              {/* Stop clicks/keys inside the consumer widget from bubbling to the\n                  row's toggle handler — otherwise interacting with the content\n                  (e.g. an input) would collapse the card. */}\n              <div\n                onClick={(event) => event.stopPropagation()}\n                onKeyDown={(event) => event.stopPropagation()}\n              >\n                {renderStepContent?.(step)}\n              </div>\n            </Box>\n          )}\n        </Box>\n      </ClickableCard>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -9,6 +9,7 @@ var _designSystem = require("@wix/design-system");
 var _react2 = require("@wix/bex-core/react");
 var _CardContainer = require("../CardContainer");
 var _useIsMobile = require("../../hooks/useIsMobile");
+var _useBmHarmonyTheme = require("../../hooks/useBmHarmonyTheme");
 var _useIntersectionObserver = require("../../hooks/useIntersectionObserver");
 var _SetupWidgetHeader = require("./SetupWidgetHeader");
 var _SetupStepRow = require("./SetupStepRow");
@@ -34,7 +35,7 @@ const StepViewTracker = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 72,
+      lineNumber: 73,
       columnNumber: 5
     }
   }, children);
@@ -53,6 +54,9 @@ const _SetupWidget = ({
     translate: t
   } = (0, _react2.useWixPatternsContainer)();
   const isMobile = (0, _useIsMobile.useIsMobile)();
+  // Harmony drops the focused-row background tint per UX — the outline-skin
+  // ClickableCard the row is built on has no tint of its own.
+  const isHarmonyTheme = (0, _useBmHarmonyTheme.useBmHarmonyTheme)();
   const {
     status
   } = state._loadTask.status;
@@ -97,7 +101,7 @@ const _SetupWidget = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 133,
+        lineNumber: 137,
         columnNumber: 7
       }
     }) : /*#__PURE__*/_react.default.createElement(_SetupStepRow.SetupStepRow, {
@@ -107,10 +111,11 @@ const _SetupWidget = ({
       expanded: expanded,
       onActivate: onActivate,
       renderStepContent: renderStepContent,
+      focusedBackground: !isHarmonyTheme,
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 142,
+        lineNumber: 146,
         columnNumber: 7
       }
     });
@@ -124,7 +129,7 @@ const _SetupWidget = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 156,
+        lineNumber: 161,
         columnNumber: 7
       }
     });
@@ -139,7 +144,7 @@ const _SetupWidget = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 163,
+        lineNumber: 168,
         columnNumber: 12
       }
     });
@@ -162,18 +167,18 @@ const _SetupWidget = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 179,
+      lineNumber: 184,
       columnNumber: 5
     }
   });
   const list = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     direction: "vertical",
-    gap: isMobile ? 'SP3' : 'SP1',
+    gap: isMobile ? 'SP3' : 'SP2',
     width: "100%",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 189,
+      lineNumber: 194,
       columnNumber: 5
     }
   }, state.steps.map(step => {
@@ -188,7 +193,7 @@ const _SetupWidget = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 192,
+        lineNumber: 197,
         columnNumber: 11
       }
     }) : renderLeaf(step);
@@ -199,7 +204,7 @@ const _SetupWidget = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 205,
+        lineNumber: 210,
         columnNumber: 11
       }
     }, node) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
@@ -207,7 +212,7 @@ const _SetupWidget = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 213,
+        lineNumber: 218,
         columnNumber: 11
       }
     }, node);
@@ -226,7 +231,7 @@ const _SetupWidget = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 231,
+        lineNumber: 236,
         columnNumber: 7
       }
     }, body);
@@ -246,7 +251,7 @@ const _SetupWidget = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 238,
+      lineNumber: 243,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -255,7 +260,7 @@ const _SetupWidget = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 251,
+      lineNumber: 256,
       columnNumber: 7
     }
   }, body));

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_designSystem","_react2","_CardContainer","_useIsMobile","_useIntersectionObserver","_SetupWidgetHeader","_SetupStepRow","_SetupStepCard","_SetupStepGroup","_AllCompleteState","_SetupWidgetSkeleton","_jsxFileName","StepViewTracker","stepId","onView","children","elementRef","useIntersectionObserver","default","createElement","ref","__self","__source","fileName","lineNumber","columnNumber","_SetupWidget","state","renderStepContent","onStepClick","onCompletedStepClick","onStepView","onAllCompleteClick","renderError","dataHook","translate","t","useWixPatternsContainer","isMobile","useIsMobile","status","_loadTask","activateStep","step","expansionMode","_toggleStep","id","activateChild","child","renderLeaf","isChild","expanded","_expandedStepId","onActivate","isFocused","_focusedStepId","SetupStepCard","key","isPrimary","SetupStepRow","_isAllComplete","AllCompleteState","onCtaClick","SetupWidgetSkeleton","_state$_loadTask$erro","Fragment","retry","_retry","error","errorStatus","header","SetupWidgetHeader","title","_title","completedCount","_completedCount","totalCount","_totalCount","progressPercentage","_progressPercentage","list","Box","direction","gap","width","steps","map","_step$steps","node","length","SetupStepGroup","_primaryStepId","onToggle","renderChild","body","CardContainer","errorState","subtitle","action","text","onClick","padding","SetupWidget","exports","observer"],"sources":["../../../../src/components/SetupWidget/SetupWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Box } from '@wix/design-system';\nimport { SetupWidgetState, SetupWidgetStep } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { CardContainer } from '../CardContainer';\nimport { useIsMobile } from '../../hooks/useIsMobile';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { SetupWidgetHeader } from './SetupWidgetHeader';\nimport { SetupStepRow } from './SetupStepRow';\nimport { SetupStepCard } from './SetupStepCard';\nimport { SetupStepGroup } from './SetupStepGroup';\nimport { AllCompleteState } from './AllCompleteState';\nimport { SetupWidgetSkeleton } from './SetupWidgetSkeleton';\n\nexport interface SetupWidgetProps {\n  /**\n   * A Setup widget state instance created with `useSetupWidget`. The widget\n   * owns loading / error / refetch; the state exposes the steps and a public\n   * API to change a step's status.\n   */\n  state: SetupWidgetState;\n  /**\n   * Inline-expansion content for a step, supplied at render time (the data does\n   * not carry it). Returned for the currently-expanded inline step.\n   */\n  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;\n  /** Fired when a `navigate` step (or its CTA) is activated. */\n  onStepClick?: (step: SetupWidgetStep) => void;\n  /**\n   * Fired when a *completed* step's CTA (or row) is activated — a distinct\n   * action from `onStepClick` (mirrors `onCompletedCtaClick` in dashboard-setup,\n   * which targets the step's separate `completedCta`).\n   */\n  onCompletedStepClick?: (step: SetupWidgetStep) => void;\n  /**\n   * Fired once when a step (or group) scrolls into view — for the consumer to\n   * report view telemetry (BI/dealer). The widget itself stays\n   * telemetry-agnostic. Click telemetry hooks into `onStepClick` /\n   * `onCompletedStepClick`.\n   */\n  onStepView?: (step: SetupWidgetStep) => void;\n  /** Fired when the \"all complete\" celebratory CTA is clicked. */\n  onAllCompleteClick?: () => void;\n  /**\n   * Replaces the default error UI when the initial load fails. Receives a\n   * `retry` callback (re-runs the load) and the thrown `error`. When omitted, a\n   * standard error card with a \"Try again\" retry is shown.\n   */\n  renderError?: (params: {\n    retry: () => void;\n    error: unknown;\n  }) => React.ReactNode;\n  /** Applies a data-hook attribute for tests. */\n  dataHook?: string;\n}\n\n// Fires `onView` once when the wrapped step scrolls into view. Only mounted\n// when the consumer passes `onStepView`, so view tracking adds no DOM/observer\n// overhead otherwise.\nconst StepViewTracker = ({\n  stepId,\n  onView,\n  children,\n}: {\n  stepId: string;\n  onView: () => void;\n  children: React.ReactNode;\n}) => {\n  const { elementRef } = useIntersectionObserver(onView);\n  return (\n    <div\n      ref={elementRef as React.RefObject<HTMLDivElement>}\n      data-hook={`setup-step-view-${stepId}`}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst _SetupWidget = ({\n  state,\n  renderStepContent,\n  onStepClick,\n  onCompletedStepClick,\n  onStepView,\n  onAllCompleteClick,\n  renderError,\n  dataHook,\n}: SetupWidgetProps) => {\n  const { translate: t } = useWixPatternsContainer();\n  const isMobile = useIsMobile();\n  const { status } = state._loadTask.status;\n\n  const activateStep = (step: SetupWidgetStep) => {\n    // Completed steps fire their own action (never expand) — distinct from the\n    // active/navigate `onStepClick`.\n    if (step.status === 'completed') {\n      onCompletedStepClick?.(step);\n      return;\n    }\n    if (step.expansionMode === 'inline') {\n      state._toggleStep(step.id);\n    } else {\n      onStepClick?.(step);\n    }\n  };\n\n  // Children of an aggregated group are leaf steps — they never toggle/expand;\n  // completed children fire the completed action, the rest navigate.\n  const activateChild = (child: SetupWidgetStep) => {\n    if (child.status === 'completed') {\n      onCompletedStepClick?.(child);\n    } else {\n      onStepClick?.(child);\n    }\n  };\n\n  const renderLeaf = (step: SetupWidgetStep, isChild = false) => {\n    const expanded =\n      !isChild &&\n      step.expansionMode === 'inline' &&\n      state._expandedStepId === step.id;\n    const onActivate = () =>\n      isChild ? activateChild(step) : activateStep(step);\n\n    // A single step is focused/highlighted at a time — the expanded step when\n    // one is open, otherwise the primary. (Highlighting `primary || expanded`\n    // would mark two rows once the user opens a non-primary inline step.)\n    const isFocused = !isChild && step.id === state._focusedStepId;\n\n    return isMobile ? (\n      <SetupStepCard\n        key={step.id}\n        step={step}\n        isPrimary={isFocused}\n        expanded={expanded}\n        onActivate={onActivate}\n        renderStepContent={renderStepContent}\n      />\n    ) : (\n      <SetupStepRow\n        key={step.id}\n        step={step}\n        isFocused={isFocused}\n        expanded={expanded}\n        onActivate={onActivate}\n        renderStepContent={renderStepContent}\n      />\n    );\n  };\n\n  // All-complete is a distinct success surface with its own card.\n  if (status === 'success' && state._isAllComplete) {\n    return (\n      <AllCompleteState dataHook={dataHook} onCtaClick={onAllCompleteClick} />\n    );\n  }\n\n  // Built-in loading skeleton, shaped like the widget (desktop card / mobile\n  // bare) so there's no layout jump when data resolves.\n  if (status === 'idle' || status === 'loading') {\n    return <SetupWidgetSkeleton isMobile={isMobile} dataHook={dataHook} />;\n  }\n\n  // Consumer-supplied error UI fully replaces the default error card.\n  if (status === 'error' && renderError) {\n    return (\n      <>\n        {renderError({\n          retry: () => state._retry(),\n          error: state._loadTask.errorStatus?.error,\n        })}\n      </>\n    );\n  }\n\n  const header = (\n    <SetupWidgetHeader\n      title={state._title}\n      completedCount={state._completedCount}\n      totalCount={state._totalCount}\n      progressPercentage={state._progressPercentage}\n      isMobile={isMobile}\n    />\n  );\n\n  const list = (\n    <Box direction=\"vertical\" gap={isMobile ? 'SP3' : 'SP1'} width=\"100%\">\n      {state.steps.map((step) => {\n        const node = step.steps?.length ? (\n          <SetupStepGroup\n            step={step}\n            isMobile={isMobile}\n            expanded={state._expandedStepId === step.id}\n            isPrimary={step.id === state._primaryStepId}\n            onToggle={() => state._toggleStep(step.id)}\n            renderChild={(child) => renderLeaf(child, true)}\n          />\n        ) : (\n          renderLeaf(step)\n        );\n\n        return onStepView ? (\n          <StepViewTracker\n            key={step.id}\n            stepId={step.id}\n            onView={() => onStepView(step)}\n          >\n            {node}\n          </StepViewTracker>\n        ) : (\n          <React.Fragment key={step.id}>{node}</React.Fragment>\n        );\n      })}\n    </Box>\n  );\n\n  const body = (\n    <>\n      {header}\n      {list}\n    </>\n  );\n\n  // Mobile success renders bare — no outer card (matches the mobile design;\n  // the consumer composes the surrounding page). Loading / error still flow\n  // through CardContainer so the widget owns those states everywhere.\n  if (isMobile && status === 'success') {\n    return (\n      <Box dataHook={dataHook} direction=\"vertical\" gap=\"SP3\" width=\"100%\">\n        {body}\n      </Box>\n    );\n  }\n\n  return (\n    <CardContainer\n      dataHook={dataHook}\n      status={status}\n      errorState={{\n        dataHook: 'error-state',\n        title: t('cairo.setupWidget.error.title'),\n        subtitle: t('cairo.setupWidget.error.subtitle'),\n        action: {\n          text: t('cairo.setupWidget.error.cta'),\n          onClick: () => state._retry(),\n        },\n      }}\n    >\n      <Box direction=\"vertical\" padding=\"SP6\">\n        {body}\n      </Box>\n    </CardContainer>\n  );\n};\n\nexport const SetupWidget = observer(_SetupWidget);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_designSystem","_react2","_CardContainer","_useIsMobile","_useBmHarmonyTheme","_useIntersectionObserver","_SetupWidgetHeader","_SetupStepRow","_SetupStepCard","_SetupStepGroup","_AllCompleteState","_SetupWidgetSkeleton","_jsxFileName","StepViewTracker","stepId","onView","children","elementRef","useIntersectionObserver","default","createElement","ref","__self","__source","fileName","lineNumber","columnNumber","_SetupWidget","state","renderStepContent","onStepClick","onCompletedStepClick","onStepView","onAllCompleteClick","renderError","dataHook","translate","t","useWixPatternsContainer","isMobile","useIsMobile","isHarmonyTheme","useBmHarmonyTheme","status","_loadTask","activateStep","step","expansionMode","_toggleStep","id","activateChild","child","renderLeaf","isChild","expanded","_expandedStepId","onActivate","isFocused","_focusedStepId","SetupStepCard","key","isPrimary","SetupStepRow","focusedBackground","_isAllComplete","AllCompleteState","onCtaClick","SetupWidgetSkeleton","_state$_loadTask$erro","Fragment","retry","_retry","error","errorStatus","header","SetupWidgetHeader","title","_title","completedCount","_completedCount","totalCount","_totalCount","progressPercentage","_progressPercentage","list","Box","direction","gap","width","steps","map","_step$steps","node","length","SetupStepGroup","_primaryStepId","onToggle","renderChild","body","CardContainer","errorState","subtitle","action","text","onClick","padding","SetupWidget","exports","observer"],"sources":["../../../../src/components/SetupWidget/SetupWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Box } from '@wix/design-system';\nimport { SetupWidgetState, SetupWidgetStep } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { CardContainer } from '../CardContainer';\nimport { useIsMobile } from '../../hooks/useIsMobile';\nimport { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { SetupWidgetHeader } from './SetupWidgetHeader';\nimport { SetupStepRow } from './SetupStepRow';\nimport { SetupStepCard } from './SetupStepCard';\nimport { SetupStepGroup } from './SetupStepGroup';\nimport { AllCompleteState } from './AllCompleteState';\nimport { SetupWidgetSkeleton } from './SetupWidgetSkeleton';\n\nexport interface SetupWidgetProps {\n  /**\n   * A Setup widget state instance created with `useSetupWidget`. The widget\n   * owns loading / error / refetch; the state exposes the steps and a public\n   * API to change a step's status.\n   */\n  state: SetupWidgetState;\n  /**\n   * Inline-expansion content for a step, supplied at render time (the data does\n   * not carry it). Returned for the currently-expanded inline step.\n   */\n  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;\n  /** Fired when a `navigate` step (or its CTA) is activated. */\n  onStepClick?: (step: SetupWidgetStep) => void;\n  /**\n   * Fired when a *completed* step's CTA (or row) is activated — a distinct\n   * action from `onStepClick` (mirrors `onCompletedCtaClick` in dashboard-setup,\n   * which targets the step's separate `completedCta`).\n   */\n  onCompletedStepClick?: (step: SetupWidgetStep) => void;\n  /**\n   * Fired once when a step (or group) scrolls into view — for the consumer to\n   * report view telemetry (BI/dealer). The widget itself stays\n   * telemetry-agnostic. Click telemetry hooks into `onStepClick` /\n   * `onCompletedStepClick`.\n   */\n  onStepView?: (step: SetupWidgetStep) => void;\n  /** Fired when the \"all complete\" celebratory CTA is clicked. */\n  onAllCompleteClick?: () => void;\n  /**\n   * Replaces the default error UI when the initial load fails. Receives a\n   * `retry` callback (re-runs the load) and the thrown `error`. When omitted, a\n   * standard error card with a \"Try again\" retry is shown.\n   */\n  renderError?: (params: {\n    retry: () => void;\n    error: unknown;\n  }) => React.ReactNode;\n  /** Applies a data-hook attribute for tests. */\n  dataHook?: string;\n}\n\n// Fires `onView` once when the wrapped step scrolls into view. Only mounted\n// when the consumer passes `onStepView`, so view tracking adds no DOM/observer\n// overhead otherwise.\nconst StepViewTracker = ({\n  stepId,\n  onView,\n  children,\n}: {\n  stepId: string;\n  onView: () => void;\n  children: React.ReactNode;\n}) => {\n  const { elementRef } = useIntersectionObserver(onView);\n  return (\n    <div\n      ref={elementRef as React.RefObject<HTMLDivElement>}\n      data-hook={`setup-step-view-${stepId}`}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst _SetupWidget = ({\n  state,\n  renderStepContent,\n  onStepClick,\n  onCompletedStepClick,\n  onStepView,\n  onAllCompleteClick,\n  renderError,\n  dataHook,\n}: SetupWidgetProps) => {\n  const { translate: t } = useWixPatternsContainer();\n  const isMobile = useIsMobile();\n  // Harmony drops the focused-row background tint per UX — the outline-skin\n  // ClickableCard the row is built on has no tint of its own.\n  const isHarmonyTheme = useBmHarmonyTheme();\n  const { status } = state._loadTask.status;\n\n  const activateStep = (step: SetupWidgetStep) => {\n    // Completed steps fire their own action (never expand) — distinct from the\n    // active/navigate `onStepClick`.\n    if (step.status === 'completed') {\n      onCompletedStepClick?.(step);\n      return;\n    }\n    if (step.expansionMode === 'inline') {\n      state._toggleStep(step.id);\n    } else {\n      onStepClick?.(step);\n    }\n  };\n\n  // Children of an aggregated group are leaf steps — they never toggle/expand;\n  // completed children fire the completed action, the rest navigate.\n  const activateChild = (child: SetupWidgetStep) => {\n    if (child.status === 'completed') {\n      onCompletedStepClick?.(child);\n    } else {\n      onStepClick?.(child);\n    }\n  };\n\n  const renderLeaf = (step: SetupWidgetStep, isChild = false) => {\n    const expanded =\n      !isChild &&\n      step.expansionMode === 'inline' &&\n      state._expandedStepId === step.id;\n    const onActivate = () =>\n      isChild ? activateChild(step) : activateStep(step);\n\n    // A single step is focused/highlighted at a time — the expanded step when\n    // one is open, otherwise the primary. (Highlighting `primary || expanded`\n    // would mark two rows once the user opens a non-primary inline step.)\n    const isFocused = !isChild && step.id === state._focusedStepId;\n\n    return isMobile ? (\n      <SetupStepCard\n        key={step.id}\n        step={step}\n        isPrimary={isFocused}\n        expanded={expanded}\n        onActivate={onActivate}\n        renderStepContent={renderStepContent}\n      />\n    ) : (\n      <SetupStepRow\n        key={step.id}\n        step={step}\n        isFocused={isFocused}\n        expanded={expanded}\n        onActivate={onActivate}\n        renderStepContent={renderStepContent}\n        focusedBackground={!isHarmonyTheme}\n      />\n    );\n  };\n\n  // All-complete is a distinct success surface with its own card.\n  if (status === 'success' && state._isAllComplete) {\n    return (\n      <AllCompleteState dataHook={dataHook} onCtaClick={onAllCompleteClick} />\n    );\n  }\n\n  // Built-in loading skeleton, shaped like the widget (desktop card / mobile\n  // bare) so there's no layout jump when data resolves.\n  if (status === 'idle' || status === 'loading') {\n    return <SetupWidgetSkeleton isMobile={isMobile} dataHook={dataHook} />;\n  }\n\n  // Consumer-supplied error UI fully replaces the default error card.\n  if (status === 'error' && renderError) {\n    return (\n      <>\n        {renderError({\n          retry: () => state._retry(),\n          error: state._loadTask.errorStatus?.error,\n        })}\n      </>\n    );\n  }\n\n  const header = (\n    <SetupWidgetHeader\n      title={state._title}\n      completedCount={state._completedCount}\n      totalCount={state._totalCount}\n      progressPercentage={state._progressPercentage}\n      isMobile={isMobile}\n    />\n  );\n\n  const list = (\n    <Box direction=\"vertical\" gap={isMobile ? 'SP3' : 'SP2'} width=\"100%\">\n      {state.steps.map((step) => {\n        const node = step.steps?.length ? (\n          <SetupStepGroup\n            step={step}\n            isMobile={isMobile}\n            expanded={state._expandedStepId === step.id}\n            isPrimary={step.id === state._primaryStepId}\n            onToggle={() => state._toggleStep(step.id)}\n            renderChild={(child) => renderLeaf(child, true)}\n          />\n        ) : (\n          renderLeaf(step)\n        );\n\n        return onStepView ? (\n          <StepViewTracker\n            key={step.id}\n            stepId={step.id}\n            onView={() => onStepView(step)}\n          >\n            {node}\n          </StepViewTracker>\n        ) : (\n          <React.Fragment key={step.id}>{node}</React.Fragment>\n        );\n      })}\n    </Box>\n  );\n\n  const body = (\n    <>\n      {header}\n      {list}\n    </>\n  );\n\n  // Mobile success renders bare — no outer card (matches the mobile design;\n  // the consumer composes the surrounding page). Loading / error still flow\n  // through CardContainer so the widget owns those states everywhere.\n  if (isMobile && status === 'success') {\n    return (\n      <Box dataHook={dataHook} direction=\"vertical\" gap=\"SP3\" width=\"100%\">\n        {body}\n      </Box>\n    );\n  }\n\n  return (\n    <CardContainer\n      dataHook={dataHook}\n      status={status}\n      errorState={{\n        dataHook: 'error-state',\n        title: t('cairo.setupWidget.error.title'),\n        subtitle: t('cairo.setupWidget.error.subtitle'),\n        action: {\n          text: t('cairo.setupWidget.error.cta'),\n          onClick: () => state._retry(),\n        },\n      }}\n    >\n      <Box direction=\"vertical\" padding=\"SP6\">\n        {body}\n      </Box>\n    </CardContainer>\n  );\n};\n\nexport const SetupWidget = observer(_SetupWidget);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/SetupWidget/SetupWidget.st.css

@@ -1,12 +1,8 @@
 @property st-global(--wds-color-border-dark-secondary);
-@property st-global(--wds-color-border-standard-primary);
-@property st-global(--wds-color-border-standard-secondary);
 @property st-global(--wds-color-fill-standard-tertiary);
 @property st-global(--wds-color-fill-standard-tertiary-hover);
 @property st-global(--wsr-color-D60);
 @property st-global(--wsr-color-D80);
-@property st-global(--wsr-color-B30);
-@property st-global(--wsr-color-B40);
 @property st-global(--wsr-color-B60);
 @property st-global(--wds-color-text-standard-primary);
 @property st-global(--wds-color-text-disabled);
@@ -14,48 +10,43 @@
 @property st-global(--wsr-color-D10);
 @property st-global(--wsr-color-D10-30);
 @property st-global(--wsr-color-O10);
-@property st-global(--wds-space-100);
-@property st-global(--wds-border-radius-200);
 @property st-global(--wds-border-radius-400);
+@property st-global(--wds-clickable-card-outline-border-color);
+@property st-global(--wds-color-border-standard-primary-active);
+@property st-global(--wsr-color-B10);
+@property st-global(--wds-color-fill-surface-default);
 
 .root {}
 
 /* ---------------------------------------------------------------------------
- * Desktop step row — bordered card with hover/focus tinting. Hover only
- * applies to rows that are actually interactive (not focused / completed /
- * locked), gated by the `hoverable` state.
- *
- * Every var() carries the WDS fallback chain — semantic --wds token →
- * legacy --wsr token → hard-coded value — so the widget renders correctly
- * even when no theme stylesheet is loaded (same chains WDS ships itself).
+ * Desktop step row — border/background come from the nested WDS
+ * <ClickableCard skin="outline"> (SetupStepRow.tsx / SetupStepGroup.tsx); this
+ * class only handles this row's own layout and the focused-row border/
+ * background, which ClickableCard has no className/style prop to override
+ * directly. --wds-clickable-card-outline-border-color and --wds-color-fill-
+ * surface-default are the custom properties ClickableCard's own outline skin
+ * reads internally for border and background respectively — setting them
+ * here cascades down into it despite ClickableCard exposing no styling hook
+ * on its visible root element. The background tint (the `withBackground`
+ * state) is on unless the Harmony theme is active (`useBmHarmonyTheme`,
+ * SetupWidget.tsx) — it isn't part of the outline skin itself.
  * ------------------------------------------------------------------------- */
 .row {
-  -st-states: focused, hoverable, clickable;
+  -st-states: focused, withBackground;
 
   display: flex;
   flex-direction: column;
-  /* nearest default-theme token to the ~7-8px row padding; matches the SP1
-   * inner gaps for a consistent 6px rhythm */
-  padding: var(--wds-space-100, 6px);
-  border-radius: var(--wds-border-radius-200, 4px);
-  border: 1px solid var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));
-  background-color: var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));
   /* clip (not hidden) keeps focus rings on the inner CTA from being cut off */
   overflow: clip;
+  --wds-clickable-card-outline-border-color: var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));
 }
 
-.row:clickable {
-  cursor: pointer;
-}
-
-.row:hoverable:hover {
-  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
-  border-color: var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE));
+.row:focused {
+  --wds-clickable-card-outline-border-color: var(--wds-color-border-standard-primary-active, var(--wsr-color-B10, #116DFF));
 }
 
-.row:focused {
-  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
-  border-color: var(--wds-color-border-standard-primary, var(--wsr-color-B30, #A8CAFF));
+.row:focused:withBackground {
+  --wds-color-fill-surface-default: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
 }
 
 /* Completed step's CTA is revealed on row hover/focus (desktop), mirroring the