@wix/patterns 1.422.0 → 1.424.0

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

@@ -5,16 +5,18 @@ exports.__esModule = true;
 exports.SetupStepCard = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _designSystem = require("@wix/design-system");
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
 var _react2 = require("@wix/bex-core/react");
 var _SetupStepIcon = require("./SetupStepIcon");
 var _SetupWidgetStCss = require("./SetupWidget.st.css.js");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupStepCard.tsx";
 /**
- * Mobile step card. Phase-1 layout ("matching desktop"): shadowed card, the
- * focused card gets a soft blue surface, an "In progress" badge sits under the
- * title, completed cards strike the title and drop the CTA. Story-only
- * experiment knobs (peach shell / colored bullet / hero art / full-screen
- * modal) are intentionally omitted — those are consumer/page concerns.
+ * Mobile step card (per Figma "Support FW on mobile"). 12px padding, a 24px
+ * icon cell and a trailing chevron that replaces the per-step CTA button: a
+ * right chevron for navigate / completed (with a completed action) steps, and a
+ * down/up chevron for inline-expandable steps. The whole card is the click
+ * target. Collapsed cards are a bare title + chevron; an expanded inline card
+ * adds a divider, its description, and the consumer content below the header.
  */
 const SetupStepCard = ({
   step,
@@ -32,8 +34,50 @@ const SetupStepCard = ({
   const isInline = step.expansionMode === 'inline';
   const isInlineExpanded = expanded && isInline;
 
-  // The whole card toggles inline steps; navigate steps act via the CTA.
-  const clickable = isInline && !isCompleted && !isDisabled;
+  // Completed steps stay actionable only when they carry a completed action.
+  const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;
+  // Inline steps toggle; navigate steps act; completed steps fire their action.
+  const isTogglable = isInline && !isCompleted && !isDisabled;
+  const isNavigable = !isInline && !isCompleted && !isDisabled;
+  const clickable = isTogglable || isNavigable || showCompletedCta;
+
+  // Disabled steps show a muted chevron (with a permission tooltip); completed
+  // steps without an action show none. Everything actionable shows a chevron.
+  const showChevron = clickable || isDisabled;
+  const ChevronIcon = isInline ? isInlineExpanded ? _wixUiIconsCommon.ChevronUp : _wixUiIconsCommon.ChevronDown : _wixUiIconsCommon.ChevronRight;
+  const chevron = showChevron && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    dataHook: `setup-step-cta-${step.id}`,
+    verticalAlign: "middle",
+    className: (0, _SetupWidgetStCss.st)(isDisabled ? _SetupWidgetStCss.classes.chevronDisabled : _SetupWidgetStCss.classes.chevron),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 61,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(ChevronIcon, {
+    width: "18",
+    height: "18",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 66,
+      columnNumber: 7
+    }
+  }));
+
+  // The description only belongs to the expanded inline state. Non-inline steps
+  // keep theirs (if provided) inline below the header.
+  const description = step.description && !isCompleted && /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "small",
+    secondary: true,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 73,
+      columnNumber: 5
+    }
+  }, step.description);
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-hook": `setup-step-${step.id}`,
     "data-focused": isPrimary,
@@ -53,44 +97,66 @@ const SetupStepCard = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 51,
+      lineNumber: 79,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     direction: "vertical",
     gap: "SP2",
-    padding: "SP4",
+    padding: "SP2",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 69,
+      lineNumber: 97,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    gap: "SP2",
-    verticalAlign: "top",
+    align: "space-between",
+    verticalAlign: "middle",
+    gap: "SP1",
+    width: "100%",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 70,
+      lineNumber: 98,
       columnNumber: 9
     }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    verticalAlign: "middle",
+    gap: "SP1",
+    flexGrow: 1,
+    minWidth: 0,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.stepIcon),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 105,
+      columnNumber: 13
+    }
   }, /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
     status: step.status,
+    marginTop: "0px",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 71,
-      columnNumber: 11
+      lineNumber: 106,
+      columnNumber: 15
     }
-  }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+  })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     direction: "vertical",
     gap: "SP1",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 72,
-      columnNumber: 11
+      lineNumber: 110,
+      columnNumber: 13
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
     dataHook: `setup-step-title-${step.id}`,
@@ -101,50 +167,53 @@ const SetupStepCard = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 73,
-      columnNumber: 13
+      lineNumber: 111,
+      columnNumber: 15
     }
   }, isCompleted ? /*#__PURE__*/_react.default.createElement("del", {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 80,
-      columnNumber: 30
+      lineNumber: 118,
+      columnNumber: 32
     }
-  }, step.title) : step.title), isInProgress && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+  }, step.title) : step.title), isInProgress && /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "tiny",
+    weight: "normal",
+    className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.inProgressLabel),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 83,
-      columnNumber: 15
+      lineNumber: 121,
+      columnNumber: 17
     }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
-    size: "tiny",
-    skin: "urgent",
-    type: "transparent",
+  }, t('cairo.setupWidget.step.inProgress')))), 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: 84,
-      columnNumber: 17
+      lineNumber: 132,
+      columnNumber: 13
     }
-  }, t('cairo.setupWidget.step.inProgress'))))), !isCompleted && step.description && /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
-    size: "small",
-    secondary: true,
+  }, chevron) : chevron), isInlineExpanded && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 93,
-      columnNumber: 11
+      lineNumber: 152,
+      columnNumber: 13
     }
-  }, step.description), isInlineExpanded && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+  }), description, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     dataHook: `setup-step-content-${step.id}`,
     direction: "vertical",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 99,
-      columnNumber: 11
+      lineNumber: 154,
+      columnNumber: 13
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     onClick: event => event.stopPropagation(),
@@ -152,70 +221,10 @@ const SetupStepCard = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 103,
-      columnNumber: 13
-    }
-  }, renderStepContent == null ? void 0 : renderStepContent(step))), !isCompleted && !isInlineExpanded && step.ctaLabel && (() => {
-    const ctaButton = /*#__PURE__*/_react.default.createElement(_designSystem.Button, {
-      dataHook: `setup-step-cta-${step.id}`,
-      fullWidth: true,
-      size: "medium",
-      priority: isPrimary ? 'primary' : 'secondary',
-      disabled: isDisabled,
-      onClick: event => {
-        event.stopPropagation();
-        onActivate();
-      },
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 117,
-        columnNumber: 15
-      }
-    }, 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: 134,
-        columnNumber: 15
-      }
-    }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 143,
-        columnNumber: 17
-      }
-    }, ctaButton)) : ctaButton;
-  })(), isCompleted && step.completedCtaLabel && !isDisabled && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 151,
-      columnNumber: 11
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
-    dataHook: `setup-step-cta-${step.id}`,
-    size: "small",
-    onClick: event => {
-      event.stopPropagation();
-      onActivate();
-    },
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 152,
-      columnNumber: 13
+      lineNumber: 161,
+      columnNumber: 15
     }
-  }, step.completedCtaLabel))));
+  }, renderStepContent == null ? void 0 : renderStepContent(step)))), !isInline && description));
 };
 exports.SetupStepCard = SetupStepCard;
 //# sourceMappingURL=SetupStepCard.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_react2","_SetupStepIcon","_SetupWidgetStCss","_jsxFileName","SetupStepCard","step","isPrimary","expanded","onActivate","renderStepContent","translate","t","useWixPatternsContainer","isInProgress","status","isCompleted","isDisabled","isInline","expansionMode","isInlineExpanded","clickable","default","createElement","id","className","st","classes","card","primary","onClick","undefined","role","tabIndex","onKeyDown","event","key","preventDefault","__self","__source","fileName","lineNumber","columnNumber","Box","direction","gap","padding","verticalAlign","SetupStepIcon","Text","dataHook","size","weight","skin","secondary","title","Badge","type","description","stopPropagation","ctaLabel","ctaButton","Button","fullWidth","priority","disabled","Tooltip","content","disabledTooltip","completedCtaLabel","TextButton","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepCard.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Box,\n  Text,\n  Button,\n  TextButton,\n  Badge,\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 SetupStepCardProps {\n  step: SetupWidgetStep;\n  /** The recommended next step — soft blue surface + primary CTA. */\n  isPrimary: boolean;\n  /** Inline content is shown below the header. */\n  expanded: boolean;\n  onActivate: () => void;\n  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;\n}\n\n/**\n * Mobile step card. Phase-1 layout (\"matching desktop\"): shadowed card, the\n * focused card gets a soft blue surface, an \"In progress\" badge sits under the\n * title, completed cards strike the title and drop the CTA. Story-only\n * experiment knobs (peach shell / colored bullet / hero art / full-screen\n * modal) are intentionally omitted — those are consumer/page concerns.\n */\nexport const SetupStepCard = ({\n  step,\n  isPrimary,\n  expanded,\n  onActivate,\n  renderStepContent,\n}: SetupStepCardProps) => {\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 isInline = step.expansionMode === 'inline';\n  const isInlineExpanded = expanded && isInline;\n\n  // The whole card toggles inline steps; navigate steps act via the CTA.\n  const clickable = isInline && !isCompleted && !isDisabled;\n\n  return (\n    <div\n      data-hook={`setup-step-${step.id}`}\n      data-focused={isPrimary}\n      className={st(classes.card, { primary: isPrimary, clickable })}\n      onClick={clickable ? onActivate : undefined}\n      role={clickable ? 'button' : undefined}\n      tabIndex={clickable ? 0 : undefined}\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    >\n      <Box direction=\"vertical\" gap=\"SP2\" padding=\"SP4\">\n        <Box gap=\"SP2\" verticalAlign=\"top\">\n          <SetupStepIcon status={step.status} />\n          <Box direction=\"vertical\" gap=\"SP1\">\n            <Text\n              dataHook={`setup-step-title-${step.id}`}\n              size=\"small\"\n              weight={isPrimary ? 'bold' : 'thin'}\n              skin={isDisabled ? 'disabled' : 'standard'}\n              secondary={isCompleted}\n            >\n              {isCompleted ? <del>{step.title}</del> : step.title}\n            </Text>\n            {isInProgress && (\n              <Box>\n                <Badge size=\"tiny\" skin=\"urgent\" type=\"transparent\">\n                  {t('cairo.setupWidget.step.inProgress')}\n                </Badge>\n              </Box>\n            )}\n          </Box>\n        </Box>\n\n        {!isCompleted && step.description && (\n          <Text size=\"small\" secondary>\n            {step.description}\n          </Text>\n        )}\n\n        {isInlineExpanded && (\n          <Box dataHook={`setup-step-content-${step.id}`} direction=\"vertical\">\n            {/* Stop clicks/keys inside the consumer widget from bubbling to\n                the card's toggle handler — otherwise interacting with the\n                content (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\n        {!isCompleted &&\n          !isInlineExpanded &&\n          step.ctaLabel &&\n          (() => {\n            const ctaButton = (\n              <Button\n                dataHook={`setup-step-cta-${step.id}`}\n                fullWidth\n                size=\"medium\"\n                priority={isPrimary ? 'primary' : 'secondary'}\n                disabled={isDisabled}\n                onClick={(event: React.MouseEvent) => {\n                  event.stopPropagation();\n                  onActivate();\n                }}\n              >\n                {step.ctaLabel}\n              </Button>\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                <Box>{ctaButton}</Box>\n              </Tooltip>\n            ) : (\n              ctaButton\n            );\n          })()}\n\n        {isCompleted && step.completedCtaLabel && !isDisabled && (\n          <Box>\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    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_wixUiIconsCommon","_react2","_SetupStepIcon","_SetupWidgetStCss","_jsxFileName","SetupStepCard","step","isPrimary","expanded","onActivate","renderStepContent","translate","t","useWixPatternsContainer","isInProgress","status","isCompleted","isDisabled","isInline","expansionMode","isInlineExpanded","showCompletedCta","completedCtaLabel","isTogglable","isNavigable","clickable","showChevron","ChevronIcon","ChevronUp","ChevronDown","ChevronRight","chevron","default","createElement","Box","dataHook","id","verticalAlign","className","st","classes","chevronDisabled","__self","__source","fileName","lineNumber","columnNumber","width","height","description","Text","size","secondary","card","primary","onClick","undefined","role","tabIndex","onKeyDown","event","key","preventDefault","direction","gap","padding","align","flexGrow","minWidth","stepIcon","SetupStepIcon","marginTop","weight","skin","title","inProgressLabel","Tooltip","content","disabledTooltip","Fragment","Divider","stopPropagation","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepCard.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Text, Divider, Tooltip } from '@wix/design-system';\nimport { ChevronRight, ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common';\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 SetupStepCardProps {\n  step: SetupWidgetStep;\n  /** The recommended next step — soft blue surface + bold title. */\n  isPrimary: boolean;\n  /** Inline content is shown below the header. */\n  expanded: boolean;\n  onActivate: () => void;\n  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;\n}\n\n/**\n * Mobile step card (per Figma \"Support FW on mobile\"). 12px padding, a 24px\n * icon cell and a trailing chevron that replaces the per-step CTA button: a\n * right chevron for navigate / completed (with a completed action) steps, and a\n * down/up chevron for inline-expandable steps. The whole card is the click\n * target. Collapsed cards are a bare title + chevron; an expanded inline card\n * adds a divider, its description, and the consumer content below the header.\n */\nexport const SetupStepCard = ({\n  step,\n  isPrimary,\n  expanded,\n  onActivate,\n  renderStepContent,\n}: SetupStepCardProps) => {\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 isInline = step.expansionMode === 'inline';\n  const isInlineExpanded = expanded && isInline;\n\n  // Completed steps stay actionable only when they carry a completed action.\n  const showCompletedCta =\n    isCompleted && !!step.completedCtaLabel && !isDisabled;\n  // Inline steps toggle; navigate steps act; completed steps fire their action.\n  const isTogglable = isInline && !isCompleted && !isDisabled;\n  const isNavigable = !isInline && !isCompleted && !isDisabled;\n  const clickable = isTogglable || isNavigable || showCompletedCta;\n\n  // Disabled steps show a muted chevron (with a permission tooltip); completed\n  // steps without an action show none. Everything actionable shows a chevron.\n  const showChevron = clickable || isDisabled;\n\n  const ChevronIcon = isInline\n    ? isInlineExpanded\n      ? ChevronUp\n      : ChevronDown\n    : ChevronRight;\n\n  const chevron = showChevron && (\n    <Box\n      dataHook={`setup-step-cta-${step.id}`}\n      verticalAlign=\"middle\"\n      className={st(isDisabled ? classes.chevronDisabled : classes.chevron)}\n    >\n      <ChevronIcon width=\"18\" height=\"18\" />\n    </Box>\n  );\n\n  // The description only belongs to the expanded inline state. Non-inline steps\n  // keep theirs (if provided) inline below the header.\n  const description = step.description && !isCompleted && (\n    <Text size=\"small\" secondary>\n      {step.description}\n    </Text>\n  );\n\n  return (\n    <div\n      data-hook={`setup-step-${step.id}`}\n      data-focused={isPrimary}\n      className={st(classes.card, { primary: isPrimary, clickable })}\n      onClick={clickable ? onActivate : undefined}\n      role={clickable ? 'button' : undefined}\n      tabIndex={clickable ? 0 : undefined}\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    >\n      <Box direction=\"vertical\" gap=\"SP2\" padding=\"SP2\">\n        <Box\n          align=\"space-between\"\n          verticalAlign=\"middle\"\n          gap=\"SP1\"\n          width=\"100%\"\n        >\n          <Box verticalAlign=\"middle\" gap=\"SP1\" flexGrow={1} minWidth={0}>\n            <Box className={st(classes.stepIcon)}>\n              <SetupStepIcon status={step.status} marginTop=\"0px\" />\n            </Box>\n            {/* Title + \"In progress\" badge stack together so the icon centers\n                against the whole block (matches the Figma in-progress card). */}\n            <Box direction=\"vertical\" gap=\"SP1\">\n              <Text\n                dataHook={`setup-step-title-${step.id}`}\n                size=\"small\"\n                weight={isPrimary ? 'bold' : 'thin'}\n                skin={isDisabled ? 'disabled' : 'standard'}\n                secondary={isCompleted}\n              >\n                {isCompleted ? <del>{step.title}</del> : step.title}\n              </Text>\n              {isInProgress && (\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>\n          </Box>\n          {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              {chevron}\n            </Tooltip>\n          ) : (\n            chevron\n          )}\n        </Box>\n\n        {/* Expanded inline step: a divider separates the header from the\n            description and the consumer-supplied content. */}\n        {isInlineExpanded && (\n          <>\n            <Divider />\n            {description}\n            <Box\n              dataHook={`setup-step-content-${step.id}`}\n              direction=\"vertical\"\n            >\n              {/* Stop clicks/keys inside the consumer widget from bubbling to\n                  the card's toggle handler — otherwise interacting with the\n                  content (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        )}\n\n        {/* Non-inline steps render their description (if any) under the row. */}\n        {!isInline && description}\n      </Box>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AAAsD,IAAAM,YAAA;AAYtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC,UAAU;EACVC;AACkB,CAAC,KAAK;EACxB,MAAM;IAAEC,SAAS,EAAEC;EAAE,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAElD,MAAMC,YAAY,GAAGR,IAAI,CAACS,MAAM,KAAK,aAAa;EAClD,MAAMC,WAAW,GAAGV,IAAI,CAACS,MAAM,KAAK,WAAW;EAC/C,MAAME,UAAU,GAAGX,IAAI,CAACS,MAAM,KAAK,UAAU;EAC7C,MAAMG,QAAQ,GAAGZ,IAAI,CAACa,aAAa,KAAK,QAAQ;EAChD,MAAMC,gBAAgB,GAAGZ,QAAQ,IAAIU,QAAQ;;EAE7C;EACA,MAAMG,gBAAgB,GACpBL,WAAW,IAAI,CAAC,CAACV,IAAI,CAACgB,iBAAiB,IAAI,CAACL,UAAU;EACxD;EACA,MAAMM,WAAW,GAAGL,QAAQ,IAAI,CAACF,WAAW,IAAI,CAACC,UAAU;EAC3D,MAAMO,WAAW,GAAG,CAACN,QAAQ,IAAI,CAACF,WAAW,IAAI,CAACC,UAAU;EAC5D,MAAMQ,SAAS,GAAGF,WAAW,IAAIC,WAAW,IAAIH,gBAAgB;;EAEhE;EACA;EACA,MAAMK,WAAW,GAAGD,SAAS,IAAIR,UAAU;EAE3C,MAAMU,WAAW,GAAGT,QAAQ,GACxBE,gBAAgB,GACdQ,2BAAS,GACTC,6BAAW,GACbC,8BAAY;EAEhB,MAAMC,OAAO,GAAGL,WAAW,iBACzB9B,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAClC,aAAA,CAAAmC,GAAG;IACFC,QAAQ,EAAE,kBAAkB7B,IAAI,CAAC8B,EAAE,EAAG;IACtCC,aAAa,EAAC,QAAQ;IACtBC,SAAS,EAAE,IAAAC,oBAAE,EAACtB,UAAU,GAAGuB,yBAAO,CAACC,eAAe,GAAGD,yBAAO,CAACT,OAAO,CAAE;IAAAW,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEtElD,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAACN,WAAW;IAACoB,KAAK,EAAC,IAAI;IAACC,MAAM,EAAC,IAAI;IAAAN,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAClC,CACN;;EAED;EACA;EACA,MAAMG,WAAW,GAAG3C,IAAI,CAAC2C,WAAW,IAAI,CAACjC,WAAW,iBAClDpB,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAClC,aAAA,CAAAmD,IAAI;IAACC,IAAI,EAAC,OAAO;IAACC,SAAS;IAAAV,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,GACzBxC,IAAI,CAAC2C,WACF,CACP;EAED,oBACErD,MAAA,CAAAoC,OAAA,CAAAC,aAAA;IACE,aAAW,cAAc3B,IAAI,CAAC8B,EAAE,EAAG;IACnC,gBAAc7B,SAAU;IACxB+B,SAAS,EAAE,IAAAC,oBAAE,EAACC,yBAAO,CAACa,IAAI,EAAE;MAAEC,OAAO,EAAE/C,SAAS;MAAEkB;IAAU,CAAC,CAAE;IAC/D8B,OAAO,EAAE9B,SAAS,GAAGhB,UAAU,GAAG+C,SAAU;IAC5CC,IAAI,EAAEhC,SAAS,GAAG,QAAQ,GAAG+B,SAAU;IACvCE,QAAQ,EAAEjC,SAAS,GAAG,CAAC,GAAG+B,SAAU;IACpCG,SAAS,EACPlC,SAAS,GACJmC,KAA0B,IAAK;MAC9B,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;QAC9CD,KAAK,CAACE,cAAc,CAAC,CAAC;QACtBrD,UAAU,CAAC,CAAC;MACd;IACF,CAAC,GACD+C,SACL;IAAAd,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEDlD,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAClC,aAAA,CAAAmC,GAAG;IAAC6B,SAAS,EAAC,UAAU;IAACC,GAAG,EAAC,KAAK;IAACC,OAAO,EAAC,KAAK;IAAAvB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAC/ClD,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAClC,aAAA,CAAAmC,GAAG;IACFgC,KAAK,EAAC,eAAe;IACrB7B,aAAa,EAAC,QAAQ;IACtB2B,GAAG,EAAC,KAAK;IACTjB,KAAK,EAAC,MAAM;IAAAL,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEZlD,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAClC,aAAA,CAAAmC,GAAG;IAACG,aAAa,EAAC,QAAQ;IAAC2B,GAAG,EAAC,KAAK;IAACG,QAAQ,EAAE,CAAE;IAACC,QAAQ,EAAE,CAAE;IAAA1B,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAC7DlD,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAClC,aAAA,CAAAmC,GAAG;IAACI,SAAS,EAAE,IAAAC,oBAAE,EAACC,yBAAO,CAAC6B,QAAQ,CAAE;IAAA3B,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACnClD,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAC/B,cAAA,CAAAoE,aAAa;IAACvD,MAAM,EAAET,IAAI,CAACS,MAAO;IAACwD,SAAS,EAAC,KAAK;IAAA7B,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAClD,CAAC,eAGNlD,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAClC,aAAA,CAAAmC,GAAG;IAAC6B,SAAS,EAAC,UAAU;IAACC,GAAG,EAAC,KAAK;IAAAtB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACjClD,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAClC,aAAA,CAAAmD,IAAI;IACHf,QAAQ,EAAE,oBAAoB7B,IAAI,CAAC8B,EAAE,EAAG;IACxCe,IAAI,EAAC,OAAO;IACZqB,MAAM,EAAEjE,SAAS,GAAG,MAAM,GAAG,MAAO;IACpCkE,IAAI,EAAExD,UAAU,GAAG,UAAU,GAAG,UAAW;IAC3CmC,SAAS,EAAEpC,WAAY;IAAA0B,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEtB9B,WAAW,gBAAGpB,MAAA,CAAAoC,OAAA,CAAAC,aAAA;IAAAS,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAAMxC,IAAI,CAACoE,KAAW,CAAC,GAAGpE,IAAI,CAACoE,KAC1C,CAAC,EACN5D,YAAY,iBACXlB,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAClC,aAAA,CAAAmD,IAAI;IACHC,IAAI,EAAC,MAAM;IACXqB,MAAM,EAAC,QAAQ;IACflC,SAAS,EAAE,IAAAC,oBAAE,EAACC,yBAAO,CAACmC,eAAe,CAAE;IAAAjC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEtClC,CAAC,CAAC,mCAAmC,CAClC,CAEL,CACF,CAAC,EACLK,UAAU,gBACTrB,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAClC,aAAA,CAAA6E,OAAO;IACNzC,QAAQ,EAAE,+BAA+B7B,IAAI,CAAC8B,EAAE,EAAG;IACnDyC,OAAO,EACLvE,IAAI,CAACwE,eAAe;IACpB;IACA;IACAlE,CAAC,CAAC,sCAAsC,CACzC;IAAA8B,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEAf,OACM,CAAC,GAEVA,OAEC,CAAC,EAILX,gBAAgB,iBACfxB,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAArC,MAAA,CAAAoC,OAAA,CAAA+C,QAAA,qBACEnF,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAClC,aAAA,CAAAiF,OAAO;IAAAtC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAAC,EACVG,WAAW,eACZrD,MAAA,CAAAoC,OAAA,CAAAC,aAAA,CAAClC,aAAA,CAAAmC,GAAG;IACFC,QAAQ,EAAE,sBAAsB7B,IAAI,CAAC8B,EAAE,EAAG;IAC1C2B,SAAS,EAAC,UAAU;IAAArB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAKpBlD,MAAA,CAAAoC,OAAA,CAAAC,aAAA;IACEsB,OAAO,EAAGK,KAAK,IAAKA,KAAK,CAACqB,eAAe,CAAC,CAAE;IAC5CtB,SAAS,EAAGC,KAAK,IAAKA,KAAK,CAACqB,eAAe,CAAC,CAAE;IAAAvC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE7CpC,iBAAiB,oBAAjBA,iBAAiB,CAAGJ,IAAI,CACtB,CACF,CACL,CACH,EAGA,CAACY,QAAQ,IAAI+B,WACX,CACF,CAAC;AAEV,CAAC;AAACiC,OAAA,CAAA7E,aAAA,GAAAA,aAAA","ignoreList":[]}

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

@@ -56,7 +56,7 @@ const SetupStepGroup = ({
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     align: "space-between",
-    verticalAlign: isMobile ? 'top' : 'middle',
+    verticalAlign: "middle",
     width: "100%",
     minHeight: "30px",
     __self: void 0,
@@ -67,30 +67,48 @@ const SetupStepGroup = ({
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     minHeight: "24px",
-    verticalAlign: isMobile ? 'top' : 'middle',
+    verticalAlign: "middle",
+    gap: isMobile ? 'SP1' : undefined,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
       lineNumber: 65,
       columnNumber: 9
     }
+  }, isMobile ? /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.stepIcon),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 71,
+      columnNumber: 13
+    }
   }, /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
     status: allCompleted ? 'completed' : 'upcoming',
+    marginTop: "0px",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 66,
-      columnNumber: 11
+      lineNumber: 72,
+      columnNumber: 15
+    }
+  })) : /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
+    status: allCompleted ? 'completed' : 'upcoming',
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 78,
+      columnNumber: 13
     }
   }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    paddingLeft: "SP2",
+    paddingLeft: isMobile ? undefined : 'SP2',
     direction: isMobile ? 'vertical' : 'horizontal',
-    verticalAlign: isMobile ? 'top' : 'middle',
+    verticalAlign: isMobile ? undefined : 'middle',
     gap: "SP1",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 69,
+      lineNumber: 82,
       columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
@@ -100,16 +118,26 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 75,
+      lineNumber: 88,
       columnNumber: 13
     }
-  }, step.title), anyInProgress && !allCompleted && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    marginTop: isMobile ? undefined : '2px',
+  }, step.title), anyInProgress && !allCompleted && (isMobile ? /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "tiny",
+    weight: "normal",
+    className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.inProgressLabel),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 83,
-      columnNumber: 15
+      lineNumber: 98,
+      columnNumber: 17
+    }
+  }, t('cairo.setupWidget.step.inProgress')) : /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    marginTop: "2px",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 106,
+      columnNumber: 17
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
     size: "tiny",
@@ -118,16 +146,16 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 84,
-      columnNumber: 17
+      lineNumber: 107,
+      columnNumber: 19
     }
-  }, t('cairo.setupWidget.step.inProgress'))))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+  }, t('cairo.setupWidget.step.inProgress')))))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     verticalAlign: "middle",
     gap: "SP1",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 91,
+      lineNumber: 114,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Tag, {
@@ -138,7 +166,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 92,
+      lineNumber: 115,
       columnNumber: 11
     }
   }, t('cairo.setupWidget.aggregated.counter', {
@@ -149,7 +177,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 100,
+      lineNumber: 123,
       columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(Chevron, {
@@ -158,7 +186,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 101,
+      lineNumber: 124,
       columnNumber: 13
     }
   })))));
@@ -166,12 +194,12 @@ const SetupStepGroup = ({
     dataHook: `setup-step-children-${step.id}`,
     direction: "vertical",
     gap: isMobile ? 'SP3' : 'SP1',
-    paddingLeft: isMobile ? 'SP4' : 'SP5',
+    paddingLeft: "SP5",
     marginTop: isMobile ? 'SP3' : 'SP1',
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 109,
+      lineNumber: 132,
       columnNumber: 5
     }
   }, children.map(child => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
@@ -179,7 +207,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 117,
+      lineNumber: 140,
       columnNumber: 9
     }
   }, renderChild(child))));
@@ -190,16 +218,16 @@ const SetupStepGroup = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 124,
+        lineNumber: 147,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
       direction: "vertical",
-      padding: "SP4",
+      padding: "SP2",
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 125,
+        lineNumber: 148,
         columnNumber: 9
       }
     }, header, childList));
@@ -210,7 +238,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 134,
+      lineNumber: 157,
       columnNumber: 5
     }
   }, header, childList);

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_wixUiIconsCommon","_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","header","default","createElement","role","tabIndex","onClick","onKeyDown","event","key","preventDefault","style","cursor","__self","__source","fileName","lineNumber","columnNumber","Box","align","verticalAlign","width","minHeight","SetupStepIcon","paddingLeft","direction","gap","Text","dataHook","id","size","weight","title","marginTop","undefined","Badge","skin","type","Tag","removable","height","childList","map","child","Fragment","className","st","classes","card","padding","row","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Text, Badge, Tag } from '@wix/design-system';\nimport { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common';\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 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      <Box\n        align=\"space-between\"\n        verticalAlign={isMobile ? 'top' : 'middle'}\n        width=\"100%\"\n        minHeight=\"30px\"\n      >\n        <Box minHeight=\"24px\" verticalAlign={isMobile ? 'top' : 'middle'}>\n          <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />\n          {/* Mobile cards stack the badge under the title (matches\n              SetupStepCard); desktop rows keep it inline next to it. */}\n          <Box\n            paddingLeft=\"SP2\"\n            direction={isMobile ? 'vertical' : 'horizontal'}\n            verticalAlign={isMobile ? 'top' : '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 && !allCompleted && (\n              <Box marginTop={isMobile ? undefined : '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    </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={isMobile ? 'SP4' : '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=\"SP4\">\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","_wixUiIconsCommon","_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","header","default","createElement","role","tabIndex","onClick","onKeyDown","event","key","preventDefault","style","cursor","__self","__source","fileName","lineNumber","columnNumber","Box","align","verticalAlign","width","minHeight","gap","undefined","className","st","classes","stepIcon","SetupStepIcon","marginTop","paddingLeft","direction","Text","dataHook","id","size","weight","title","inProgressLabel","Badge","skin","type","Tag","removable","height","childList","map","child","Fragment","card","padding","row","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Text, Badge, Tag } from '@wix/design-system';\nimport { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common';\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 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      <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\n                status={allCompleted ? 'completed' : 'upcoming'}\n                marginTop=\"0px\"\n              />\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    </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":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AAAsD,IAAAM,YAAA;AActD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,cAAc,GAAGA,CAAC;EAC7BC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC;AACmB,CAAC,KAAK;EACzB,MAAM;IAAEC,SAAS,EAAEC;EAAE,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAElD,MAAMC,QAAQ,GAAGT,IAAI,CAACU,KAAK,IAAI,EAAE;EACjC,MAAMC,KAAK,GAAGF,QAAQ,CAACG,MAAM;EAC7B,MAAMC,SAAS,GAAGJ,QAAQ,CAACK,MAAM,CAAEC,CAAC,IAAKA,CAAC,CAACC,MAAM,KAAK,WAAW,CAAC,CAACJ,MAAM;EACzE,MAAMK,YAAY,GAAGN,KAAK,GAAG,CAAC,IAAIE,SAAS,KAAKF,KAAK;EACrD,MAAMO,aAAa,GAAGT,QAAQ,CAACU,IAAI,CAAEJ,CAAC,IAAKA,CAAC,CAACC,MAAM,KAAK,aAAa,CAAC;EACtE,MAAMI,SAAS,GAAGlB,QAAQ,IAAIC,SAAS;EACvC,MAAMkB,OAAO,GAAGnB,QAAQ,GAAGoB,2BAAS,GAAGC,6BAAW;EAElD,MAAMC,MAAM,gBACVlC,MAAA,CAAAmC,OAAA,CAAAC,aAAA;IACEC,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE,CAAE;IACZC,OAAO,EAAEzB,QAAS;IAClB0B,SAAS,EAAGC,KAA0B,IAAK;MACzC,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;QAC9CD,KAAK,CAACE,cAAc,CAAC,CAAC;QACtB7B,QAAQ,CAAC,CAAC;MACZ;IACF,CAAE;IACF8B,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAU,CAAE;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAE7BlD,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACjC,aAAA,CAAAgD,GAAG;IACFC,KAAK,EAAC,eAAe;IACrBC,aAAa,EAAC,QAAQ;IACtBC,KAAK,EAAC,MAAM;IACZC,SAAS,EAAC,MAAM;IAAAT,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEhBlD,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACjC,aAAA,CAAAgD,GAAG;IACFI,SAAS,EAAC,MAAM;IAChBF,aAAa,EAAC,QAAQ;IACtBG,GAAG,EAAE7C,QAAQ,GAAG,KAAK,GAAG8C,SAAU;IAAAX,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEjCvC,QAAQ,gBACPX,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACjC,aAAA,CAAAgD,GAAG;IAACO,SAAS,EAAE,IAAAC,oBAAE,EAACC,yBAAO,CAACC,QAAQ,CAAE;IAAAf,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACnClD,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAAC9B,cAAA,CAAAwD,aAAa;IACZpC,MAAM,EAAEC,YAAY,GAAG,WAAW,GAAG,UAAW;IAChDoC,SAAS,EAAC,KAAK;IAAAjB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,CAChB,CACE,CAAC,gBAENlD,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAAC9B,cAAA,CAAAwD,aAAa;IAACpC,MAAM,EAAEC,YAAY,GAAG,WAAW,GAAG,UAAW;IAAAmB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAClE,eAGDlD,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACjC,aAAA,CAAAgD,GAAG;IACFa,WAAW,EAAErD,QAAQ,GAAG8C,SAAS,GAAG,KAAM;IAC1CQ,SAAS,EAAEtD,QAAQ,GAAG,UAAU,GAAG,YAAa;IAChD0C,aAAa,EAAE1C,QAAQ,GAAG8C,SAAS,GAAG,QAAS;IAC/CD,GAAG,EAAC,KAAK;IAAAV,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAETlD,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACjC,aAAA,CAAA+D,IAAI;IACHC,QAAQ,EAAE,oBAAoBzD,IAAI,CAAC0D,EAAE,EAAG;IACxCC,IAAI,EAAC,OAAO;IACZC,MAAM,EAAExC,SAAS,GAAG,MAAM,GAAG,MAAO;IAAAgB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEnCxC,IAAI,CAAC6D,KACF,CAAC,EACN3C,aAAa,IACZ,CAACD,YAAY,KACZhB,QAAQ,gBACPX,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACjC,aAAA,CAAA+D,IAAI;IACHG,IAAI,EAAC,MAAM;IACXC,MAAM,EAAC,QAAQ;IACfZ,SAAS,EAAE,IAAAC,oBAAE,EAACC,yBAAO,CAACY,eAAe,CAAE;IAAA1B,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEtCjC,CAAC,CAAC,mCAAmC,CAClC,CAAC,gBAEPjB,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACjC,aAAA,CAAAgD,GAAG;IAACY,SAAS,EAAC,KAAK;IAAAjB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAClBlD,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACjC,aAAA,CAAAsE,KAAK;IAACJ,IAAI,EAAC,MAAM;IAACK,IAAI,EAAC,QAAQ;IAACC,IAAI,EAAC,aAAa;IAAA7B,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAChDjC,CAAC,CAAC,mCAAmC,CACjC,CACJ,CACN,CACA,CACF,CAAC,eACNjB,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACjC,aAAA,CAAAgD,GAAG;IAACE,aAAa,EAAC,QAAQ;IAACG,GAAG,EAAC,KAAK;IAAAV,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACnClD,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACjC,aAAA,CAAAyE,GAAG;IACFR,EAAE,EAAE,sBAAsB1D,IAAI,CAAC0D,EAAE,EAAG;IACpCM,IAAI,EAAC,SAAS;IACdG,SAAS,EAAE,KAAM;IACjBR,IAAI,EAAC,OAAO;IAAAvB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEXjC,CAAC,CAAC,sCAAsC,EAAE;IAAEM,SAAS;IAAEF;EAAM,CAAC,CAC5D,CAAC,eACNrB,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACjC,aAAA,CAAAgD,GAAG;IAACgB,QAAQ,EAAE,sBAAsBzD,IAAI,CAAC0D,EAAE,EAAG;IAAAtB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAC7ClD,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACL,OAAO;IAACuB,KAAK,EAAC,IAAI;IAACwB,MAAM,EAAC,IAAI;IAAAhC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAC9B,CACF,CACF,CACF,CACN;EAED,MAAM6B,SAAS,GAAGnE,QAAQ,iBACxBZ,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACjC,aAAA,CAAAgD,GAAG;IACFgB,QAAQ,EAAE,uBAAuBzD,IAAI,CAAC0D,EAAE,EAAG;IAC3CH,SAAS,EAAC,UAAU;IACpBT,GAAG,EAAE7C,QAAQ,GAAG,KAAK,GAAG,KAAM;IAC9BqD,WAAW,EAAC,KAAK;IACjBD,SAAS,EAAEpD,QAAQ,GAAG,KAAK,GAAG,KAAM;IAAAmC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEnC/B,QAAQ,CAAC6D,GAAG,CAAEC,KAAK,iBAClBjF,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACpC,MAAA,CAAAmC,OAAK,CAAC+C,QAAQ;IAACxC,GAAG,EAAEuC,KAAK,CAACb,EAAG;IAAAtB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAAEnC,WAAW,CAACkE,KAAK,CAAkB,CACpE,CACE,CACN;EAED,IAAItE,QAAQ,EAAE;IACZ,oBACEX,MAAA,CAAAmC,OAAA,CAAAC,aAAA;MAAK,aAAW,cAAc1B,IAAI,CAAC0D,EAAE,EAAG;MAACV,SAAS,EAAE,IAAAC,oBAAE,EAACC,yBAAO,CAACuB,IAAI,CAAE;MAAArC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAxC,YAAA;QAAAyC,UAAA;QAAAC,YAAA;MAAA;IAAA,gBACnElD,MAAA,CAAAmC,OAAA,CAAAC,aAAA,CAACjC,aAAA,CAAAgD,GAAG;MAACc,SAAS,EAAC,UAAU;MAACmB,OAAO,EAAC,KAAK;MAAAtC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAxC,YAAA;QAAAyC,UAAA;QAAAC,YAAA;MAAA;IAAA,GACpChB,MAAM,EACN6C,SACE,CACF,CAAC;EAEV;EAEA,oBACE/E,MAAA,CAAAmC,OAAA,CAAAC,aAAA;IAAK,aAAW,cAAc1B,IAAI,CAAC0D,EAAE,EAAG;IAACV,SAAS,EAAE,IAAAC,oBAAE,EAACC,yBAAO,CAACyB,GAAG,CAAE;IAAAvC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,GACjEhB,MAAM,EACN6C,SACE,CAAC;AAEV,CAAC;AAACO,OAAA,CAAA7E,cAAA,GAAAA,cAAA","ignoreList":[]}