@wix/patterns 1.423.0 → 1.424.0

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":"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","ignoreList":[]}

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

@@ -12,15 +12,21 @@ var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cj
  * green check when completed, muted dot when disabled, blue dot otherwise.
  */
 const SetupStepIcon = ({
-  status
+  status,
+  /**
+   * Top nudge that centers the 18px icon on a single line of text. Defaults to
+   * the desktop value; the mobile card centers the icon via its own wrapper and
+   * passes "0px" to drop the nudge.
+   */
+  marginTop = '3px'
 }) => {
   if (status === 'completed') {
     return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-      marginTop: "3px",
+      marginTop: marginTop,
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 17,
+        lineNumber: 24,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ConfirmSmall, {
@@ -30,18 +36,18 @@ const SetupStepIcon = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 18,
+        lineNumber: 25,
         columnNumber: 9
       }
     }));
   }
   const color = status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';
   return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    marginTop: "3px",
+    marginTop: marginTop,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 27,
+      lineNumber: 34,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.CircleSmallFilledSmall, {
@@ -51,7 +57,7 @@ const SetupStepIcon = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 28,
+      lineNumber: 35,
       columnNumber: 7
     }
   }));

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_wixUiIconsCommon","_jsxFileName","SetupStepIcon","status","default","createElement","Box","marginTop","__self","__source","fileName","lineNumber","columnNumber","ConfirmSmall","width","height","color","CircleSmallFilledSmall","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@wix/design-system';\nimport { ConfirmSmall, CircleSmallFilledSmall } from '@wix/wix-ui-icons-common';\nimport { SetupWidgetStepStatus } from '@wix/bex-core';\n\n/**\n * Leading status indicator for a step. Mirrors the existing Setup widget:\n * green check when completed, muted dot when disabled, blue dot otherwise.\n */\nexport const SetupStepIcon = ({\n  status,\n}: {\n  status: SetupWidgetStepStatus;\n}) => {\n  if (status === 'completed') {\n    return (\n      <Box marginTop=\"3px\">\n        <ConfirmSmall width=\"18px\" height=\"18px\" color=\"var(--wsr-color-G20)\" />\n      </Box>\n    );\n  }\n\n  const color =\n    status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';\n\n  return (\n    <Box marginTop=\"3px\">\n      <CircleSmallFilledSmall width=\"18px\" height=\"18px\" color={color} />\n    </Box>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAAgF,IAAAG,YAAA;AAGhF;AACA;AACA;AACA;AACO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC;AAGF,CAAC,KAAK;EACJ,IAAIA,MAAM,KAAK,WAAW,EAAE;IAC1B,oBACEP,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACN,aAAA,CAAAO,GAAG;MAACC,SAAS,EAAC,KAAK;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAT,YAAA;QAAAU,UAAA;QAAAC,YAAA;MAAA;IAAA,gBAClBhB,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACL,iBAAA,CAAAa,YAAY;MAACC,KAAK,EAAC,MAAM;MAACC,MAAM,EAAC,MAAM;MAACC,KAAK,EAAC,sBAAsB;MAAAR,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAT,YAAA;QAAAU,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CACpE,CAAC;EAEV;EAEA,MAAMI,KAAK,GACTb,MAAM,KAAK,UAAU,GAAG,sBAAsB,GAAG,sBAAsB;EAEzE,oBACEP,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACN,aAAA,CAAAO,GAAG;IAACC,SAAS,EAAC,KAAK;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAT,YAAA;MAAAU,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAClBhB,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACL,iBAAA,CAAAiB,sBAAsB;IAACH,KAAK,EAAC,MAAM;IAACC,MAAM,EAAC,MAAM;IAACC,KAAK,EAAEA,KAAM;IAAAR,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAT,YAAA;MAAAU,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAC/D,CAAC;AAEV,CAAC;AAACM,OAAA,CAAAhB,aAAA,GAAAA,aAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_wixUiIconsCommon","_jsxFileName","SetupStepIcon","status","marginTop","default","createElement","Box","__self","__source","fileName","lineNumber","columnNumber","ConfirmSmall","width","height","color","CircleSmallFilledSmall","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@wix/design-system';\nimport { ConfirmSmall, CircleSmallFilledSmall } from '@wix/wix-ui-icons-common';\nimport { SetupWidgetStepStatus } from '@wix/bex-core';\n\n/**\n * Leading status indicator for a step. Mirrors the existing Setup widget:\n * green check when completed, muted dot when disabled, blue dot otherwise.\n */\nexport const SetupStepIcon = ({\n  status,\n  /**\n   * Top nudge that centers the 18px icon on a single line of text. Defaults to\n   * the desktop value; the mobile card centers the icon via its own wrapper and\n   * passes \"0px\" to drop the nudge.\n   */\n  marginTop = '3px',\n}: {\n  status: SetupWidgetStepStatus;\n  marginTop?: string;\n}) => {\n  if (status === 'completed') {\n    return (\n      <Box marginTop={marginTop}>\n        <ConfirmSmall width=\"18px\" height=\"18px\" color=\"var(--wsr-color-G20)\" />\n      </Box>\n    );\n  }\n\n  const color =\n    status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';\n\n  return (\n    <Box marginTop={marginTop}>\n      <CircleSmallFilledSmall width=\"18px\" height=\"18px\" color={color} />\n    </Box>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAAgF,IAAAG,YAAA;AAGhF;AACA;AACA;AACA;AACO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,MAAM;EACN;AACF;AACA;AACA;AACA;EACEC,SAAS,GAAG;AAId,CAAC,KAAK;EACJ,IAAID,MAAM,KAAK,WAAW,EAAE;IAC1B,oBACEP,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACP,aAAA,CAAAQ,GAAG;MAACH,SAAS,EAAEA,SAAU;MAAAI,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAT,YAAA;QAAAU,UAAA;QAAAC,YAAA;MAAA;IAAA,gBACxBhB,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACN,iBAAA,CAAAa,YAAY;MAACC,KAAK,EAAC,MAAM;MAACC,MAAM,EAAC,MAAM;MAACC,KAAK,EAAC,sBAAsB;MAAAR,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAT,YAAA;QAAAU,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CACpE,CAAC;EAEV;EAEA,MAAMI,KAAK,GACTb,MAAM,KAAK,UAAU,GAAG,sBAAsB,GAAG,sBAAsB;EAEzE,oBACEP,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACP,aAAA,CAAAQ,GAAG;IAACH,SAAS,EAAEA,SAAU;IAAAI,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAT,YAAA;MAAAU,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACxBhB,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACN,iBAAA,CAAAiB,sBAAsB;IAACH,KAAK,EAAC,MAAM;IAACC,MAAM,EAAC,MAAM;IAACC,KAAK,EAAEA,KAAM;IAAAR,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAT,YAAA;MAAAU,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAC/D,CAAC;AAEV,CAAC;AAACM,OAAA,CAAAhB,aAAA,GAAAA,aAAA","ignoreList":[]}

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

@@ -169,6 +169,7 @@ const _SetupWidget = ({
   const list = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     direction: "vertical",
     gap: isMobile ? 'SP3' : 'SP1',
+    width: "100%",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
@@ -221,6 +222,7 @@ const _SetupWidget = ({
       dataHook: dataHook,
       direction: "vertical",
       gap: "SP3",
+      width: "100%",
       __self: void 0,
       __source: {
         fileName: _jsxFileName,

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","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'}>\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\">\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","_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":[]}

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

@@ -8,6 +8,12 @@
 @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);
+@property st-global(--wds-color-text-urgent);
+@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);
@@ -93,3 +99,40 @@
 .card:clickable {
   cursor: pointer;
 }
+
+/* 24px icon cell (matches the Figma spec): a single-line step row is then
+ * 24px + 2×12px padding = 48px tall. The 18px glyph is centered within it, so
+ * the icon lines up with the title (single line) or its first line (wrapped). */
+.stepIcon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 24px;
+}
+
+/* Trailing chevron that replaces the per-step CTA button on mobile. WDS has no
+ * dedicated icon-color token; icons take the text-standard color (the Figma
+ * variable is grouped as "Text & icon"). */
+.chevron {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
+}
+
+.chevronDisabled {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
+}
+
+/* "IN PROGRESS" label, rendered with a WDS <Text> (so it uses the design
+ * system's typography) but in the urgent orange. <Text> has no "urgent" skin,
+ * so we override the standard-text color token it reads — this beats the
+ * component's own color rule without !important — and uppercase the label to
+ * match the Figma spec. Using <Text> (not a Badge) keeps it flush with the
+ * title, with no badge padding/offset. */
+.inProgressLabel {
+  --wds-color-text-standard-primary: var(--wds-color-text-urgent, var(--wsr-color-O10, #FE620F));
+
+  text-transform: uppercase;
+}

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

@@ -5,17 +5,21 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "SetupWidget4051015157";
+var _namespace_ = "SetupWidget808034205";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "SetupWidget4051015157__root",
-  "row": "SetupWidget4051015157__row",
-  "completedCta": "SetupWidget4051015157__completedCta",
-  "card": "SetupWidget4051015157__card"
+  "root": "SetupWidget808034205__root",
+  "row": "SetupWidget808034205__row",
+  "completedCta": "SetupWidget808034205__completedCta",
+  "card": "SetupWidget808034205__card",
+  "stepIcon": "SetupWidget808034205__stepIcon",
+  "chevron": "SetupWidget808034205__chevron",
+  "chevronDisabled": "SetupWidget808034205__chevronDisabled",
+  "inProgressLabel": "SetupWidget808034205__inProgressLabel"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};
@@ -32,6 +36,12 @@ var vars = exports.vars = {
   "wsr-color-B30": "--wsr-color-B30",
   "wsr-color-B40": "--wsr-color-B40",
   "wsr-color-B60": "--wsr-color-B60",
+  "wds-color-text-standard-primary": "--wds-color-text-standard-primary",
+  "wds-color-text-disabled": "--wds-color-text-disabled",
+  "wds-color-text-urgent": "--wds-color-text-urgent",
+  "wsr-color-D10": "--wsr-color-D10",
+  "wsr-color-D10-30": "--wsr-color-D10-30",
+  "wsr-color-O10": "--wsr-color-O10",
   "wds-space-100": "--wds-space-100",
   "wds-border-radius-200": "--wds-border-radius-200",
   "wds-border-radius-400": "--wds-border-radius-400"

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

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/SetupWidget/SetupWidget.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"SetupWidget4051015157\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"SetupWidget4051015157__root\",\"row\":\"SetupWidget4051015157__row\",\"completedCta\":\"SetupWidget4051015157__completedCta\",\"card\":\"SetupWidget4051015157__card\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-border-dark-secondary\":\"--wds-color-border-dark-secondary\",\"wds-color-border-standard-primary\":\"--wds-color-border-standard-primary\",\"wds-color-border-standard-secondary\":\"--wds-color-border-standard-secondary\",\"wds-color-fill-standard-tertiary\":\"--wds-color-fill-standard-tertiary\",\"wds-color-fill-standard-tertiary-hover\":\"--wds-color-fill-standard-tertiary-hover\",\"wsr-color-D60\":\"--wsr-color-D60\",\"wsr-color-D80\":\"--wsr-color-D80\",\"wsr-color-B30\":\"--wsr-color-B30\",\"wsr-color-B40\":\"--wsr-color-B40\",\"wsr-color-B60\":\"--wsr-color-B60\",\"wds-space-100\":\"--wds-space-100\",\"wds-border-radius-200\":\"--wds-border-radius-200\",\"wds-border-radius-400\":\"--wds-border-radius-400\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,6BAA6B;EAAC,KAAK,EAAC,4BAA4B;EAAC,cAAc,EAAC,qCAAqC;EAAC,MAAM,EAAC;AAA6B,CAAC;AACjL,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,mCAAmC,EAAC,qCAAqC;EAAC,qCAAqC,EAAC,uCAAuC;EAAC,kCAAkC,EAAC,oCAAoC;EAAC,wCAAwC,EAAC,0CAA0C;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,uBAAuB,EAAC;AAAyB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/SetupWidget/SetupWidget.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"SetupWidget808034205\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"SetupWidget808034205__root\",\"row\":\"SetupWidget808034205__row\",\"completedCta\":\"SetupWidget808034205__completedCta\",\"card\":\"SetupWidget808034205__card\",\"stepIcon\":\"SetupWidget808034205__stepIcon\",\"chevron\":\"SetupWidget808034205__chevron\",\"chevronDisabled\":\"SetupWidget808034205__chevronDisabled\",\"inProgressLabel\":\"SetupWidget808034205__inProgressLabel\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-border-dark-secondary\":\"--wds-color-border-dark-secondary\",\"wds-color-border-standard-primary\":\"--wds-color-border-standard-primary\",\"wds-color-border-standard-secondary\":\"--wds-color-border-standard-secondary\",\"wds-color-fill-standard-tertiary\":\"--wds-color-fill-standard-tertiary\",\"wds-color-fill-standard-tertiary-hover\":\"--wds-color-fill-standard-tertiary-hover\",\"wsr-color-D60\":\"--wsr-color-D60\",\"wsr-color-D80\":\"--wsr-color-D80\",\"wsr-color-B30\":\"--wsr-color-B30\",\"wsr-color-B40\":\"--wsr-color-B40\",\"wsr-color-B60\":\"--wsr-color-B60\",\"wds-color-text-standard-primary\":\"--wds-color-text-standard-primary\",\"wds-color-text-disabled\":\"--wds-color-text-disabled\",\"wds-color-text-urgent\":\"--wds-color-text-urgent\",\"wsr-color-D10\":\"--wsr-color-D10\",\"wsr-color-D10-30\":\"--wsr-color-D10-30\",\"wsr-color-O10\":\"--wsr-color-O10\",\"wds-space-100\":\"--wds-space-100\",\"wds-border-radius-200\":\"--wds-border-radius-200\",\"wds-border-radius-400\":\"--wds-border-radius-400\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,sBAAsB;AACxC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,4BAA4B;EAAC,KAAK,EAAC,2BAA2B;EAAC,cAAc,EAAC,oCAAoC;EAAC,MAAM,EAAC,4BAA4B;EAAC,UAAU,EAAC,gCAAgC;EAAC,SAAS,EAAC,+BAA+B;EAAC,iBAAiB,EAAC,uCAAuC;EAAC,iBAAiB,EAAC;AAAuC,CAAC;AACvX,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,mCAAmC,EAAC,qCAAqC;EAAC,qCAAqC,EAAC,uCAAuC;EAAC,kCAAkC,EAAC,oCAAoC;EAAC,wCAAwC,EAAC,0CAA0C;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,yBAAyB,EAAC,2BAA2B;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,eAAe,EAAC,iBAAiB;EAAC,kBAAkB,EAAC,oBAAoB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,uBAAuB,EAAC;AAAyB,CAAC","ignoreList":[]}

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

@@ -28,13 +28,18 @@ const SetupWidgetHeader = ({
     total: totalCount
   });
   if (isMobile) {
+    // Mobile (per Figma): the "X/Y" ratio sits inline to the left of the bar
+    // (no "completed" word) to save vertical space. The ratio is just numbers,
+    // so it needs no translation.
+    const ratio = `${completedCount}/${totalCount}`;
     return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
       direction: "vertical",
-      gap: "SP2",
+      gap: "SP3",
+      width: "100%",
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 35,
+        lineNumber: 39,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.Heading, {
@@ -43,26 +48,36 @@ const SetupWidgetHeader = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 36,
+        lineNumber: 40,
         columnNumber: 9
       }
-    }, resolvedTitle), /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    }, resolvedTitle), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      width: "100%",
+      verticalAlign: "middle",
+      gap: "SP2",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 43,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
       dataHook: "setup-widget-progress",
       size: "small",
       secondary: true,
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 39,
-        columnNumber: 9
+        lineNumber: 44,
+        columnNumber: 11
       }
-    }, ratioLabel), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-      width: "100%",
+    }, ratio), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      flexGrow: 1,
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 42,
-        columnNumber: 9
+        lineNumber: 47,
+        columnNumber: 11
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.LinearProgressBar, {
       skin: "standard",
@@ -70,10 +85,10 @@ const SetupWidgetHeader = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 43,
-        columnNumber: 11
+        lineNumber: 48,
+        columnNumber: 13
       }
-    })));
+    }))));
   }
   return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     align: "space-between",
@@ -82,7 +97,7 @@ const SetupWidgetHeader = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 50,
+      lineNumber: 56,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Heading, {
@@ -91,7 +106,7 @@ const SetupWidgetHeader = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 51,
+      lineNumber: 57,
       columnNumber: 7
     }
   }, resolvedTitle), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -100,7 +115,7 @@ const SetupWidgetHeader = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 54,
+      lineNumber: 60,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
@@ -110,7 +125,7 @@ const SetupWidgetHeader = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 55,
+      lineNumber: 61,
       columnNumber: 9
     }
   }, ratioLabel), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -119,7 +134,7 @@ const SetupWidgetHeader = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 58,
+      lineNumber: 64,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.LinearProgressBar, {
@@ -128,7 +143,7 @@ const SetupWidgetHeader = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 59,
+      lineNumber: 65,
       columnNumber: 11
     }
   }))));

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_react2","_jsxFileName","SetupWidgetHeader","title","completedCount","totalCount","progressPercentage","isMobile","translate","t","useWixPatternsContainer","resolvedTitle","ratioLabel","completed","total","default","createElement","Box","direction","gap","__self","__source","fileName","lineNumber","columnNumber","Heading","dataHook","size","Text","secondary","width","LinearProgressBar","skin","value","align","verticalAlign","marginBottom","weight","marginLeft","exports"],"sources":["../../../../src/components/SetupWidget/SetupWidgetHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Heading, Text, LinearProgressBar } from '@wix/design-system';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\n\nexport interface SetupWidgetHeaderProps {\n  /** Defaults to the translated \"Setup\" when omitted. */\n  title?: string | null;\n  completedCount: number;\n  totalCount: number;\n  progressPercentage: number;\n  isMobile: boolean;\n}\n\n/**\n * Widget header: title + \"X/Y completed\" ratio + progress bar.\n * - Desktop: title left, ratio + bar inline on the right.\n * - Mobile: large heading stacked above the ratio and a full-width bar.\n */\nexport const SetupWidgetHeader = ({\n  title,\n  completedCount,\n  totalCount,\n  progressPercentage,\n  isMobile,\n}: SetupWidgetHeaderProps) => {\n  const { translate: t } = useWixPatternsContainer();\n  const resolvedTitle = title ?? t('cairo.setupWidget.title');\n  const ratioLabel = t('cairo.setupWidget.progress.label', {\n    completed: completedCount,\n    total: totalCount,\n  });\n\n  if (isMobile) {\n    return (\n      <Box direction=\"vertical\" gap=\"SP2\">\n        <Heading dataHook=\"setup-widget-title\" size=\"large\">\n          {resolvedTitle}\n        </Heading>\n        <Text dataHook=\"setup-widget-progress\" size=\"small\" secondary>\n          {ratioLabel}\n        </Text>\n        <Box width=\"100%\">\n          <LinearProgressBar skin=\"standard\" value={progressPercentage} />\n        </Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Box align=\"space-between\" verticalAlign=\"middle\" marginBottom=\"SP4\">\n      <Heading dataHook=\"setup-widget-title\" size=\"medium\">\n        {resolvedTitle}\n      </Heading>\n      <Box gap=\"SP1\" verticalAlign=\"middle\">\n        <Text dataHook=\"setup-widget-progress\" size=\"tiny\" weight=\"thin\">\n          {ratioLabel}\n        </Text>\n        <Box width={220} marginLeft=\"-8px\">\n          <LinearProgressBar skin=\"standard\" value={progressPercentage} />\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAA8D,IAAAG,YAAA;AAW9D;AACA;AACA;AACA;AACA;AACO,MAAMC,iBAAiB,GAAGA,CAAC;EAChCC,KAAK;EACLC,cAAc;EACdC,UAAU;EACVC,kBAAkB;EAClBC;AACsB,CAAC,KAAK;EAC5B,MAAM;IAAEC,SAAS,EAAEC;EAAE,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAClD,MAAMC,aAAa,GAAGR,KAAK,IAAIM,CAAC,CAAC,yBAAyB,CAAC;EAC3D,MAAMG,UAAU,GAAGH,CAAC,CAAC,kCAAkC,EAAE;IACvDI,SAAS,EAAET,cAAc;IACzBU,KAAK,EAAET;EACT,CAAC,CAAC;EAEF,IAAIE,QAAQ,EAAE;IACZ,oBACEX,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACjB,aAAA,CAAAkB,GAAG;MAACC,SAAS,EAAC,UAAU;MAACC,GAAG,EAAC,KAAK;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAArB,YAAA;QAAAsB,UAAA;QAAAC,YAAA;MAAA;IAAA,gBACjC5B,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACjB,aAAA,CAAA0B,OAAO;MAACC,QAAQ,EAAC,oBAAoB;MAACC,IAAI,EAAC,OAAO;MAAAP,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAArB,YAAA;QAAAsB,UAAA;QAAAC,YAAA;MAAA;IAAA,GAChDb,aACM,CAAC,eACVf,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACjB,aAAA,CAAA6B,IAAI;MAACF,QAAQ,EAAC,uBAAuB;MAACC,IAAI,EAAC,OAAO;MAACE,SAAS;MAAAT,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAArB,YAAA;QAAAsB,UAAA;QAAAC,YAAA;MAAA;IAAA,GAC1DZ,UACG,CAAC,eACPhB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACjB,aAAA,CAAAkB,GAAG;MAACa,KAAK,EAAC,MAAM;MAAAV,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAArB,YAAA;QAAAsB,UAAA;QAAAC,YAAA;MAAA;IAAA,gBACf5B,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACjB,aAAA,CAAAgC,iBAAiB;MAACC,IAAI,EAAC,UAAU;MAACC,KAAK,EAAE3B,kBAAmB;MAAAc,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAArB,YAAA;QAAAsB,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CAC5D,CACF,CAAC;EAEV;EAEA,oBACE5B,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACjB,aAAA,CAAAkB,GAAG;IAACiB,KAAK,EAAC,eAAe;IAACC,aAAa,EAAC,QAAQ;IAACC,YAAY,EAAC,KAAK;IAAAhB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAArB,YAAA;MAAAsB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAClE5B,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACjB,aAAA,CAAA0B,OAAO;IAACC,QAAQ,EAAC,oBAAoB;IAACC,IAAI,EAAC,QAAQ;IAAAP,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAArB,YAAA;MAAAsB,UAAA;MAAAC,YAAA;IAAA;EAAA,GACjDb,aACM,CAAC,eACVf,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACjB,aAAA,CAAAkB,GAAG;IAACE,GAAG,EAAC,KAAK;IAACgB,aAAa,EAAC,QAAQ;IAAAf,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAArB,YAAA;MAAAsB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACnC5B,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACjB,aAAA,CAAA6B,IAAI;IAACF,QAAQ,EAAC,uBAAuB;IAACC,IAAI,EAAC,MAAM;IAACU,MAAM,EAAC,MAAM;IAAAjB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAArB,YAAA;MAAAsB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAC7DZ,UACG,CAAC,eACPhB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACjB,aAAA,CAAAkB,GAAG;IAACa,KAAK,EAAE,GAAI;IAACQ,UAAU,EAAC,MAAM;IAAAlB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAArB,YAAA;MAAAsB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAChC5B,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACjB,aAAA,CAAAgC,iBAAiB;IAACC,IAAI,EAAC,UAAU;IAACC,KAAK,EAAE3B,kBAAmB;IAAAc,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAArB,YAAA;MAAAsB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAC5D,CACF,CACF,CAAC;AAEV,CAAC;AAACe,OAAA,CAAArC,iBAAA,GAAAA,iBAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_react2","_jsxFileName","SetupWidgetHeader","title","completedCount","totalCount","progressPercentage","isMobile","translate","t","useWixPatternsContainer","resolvedTitle","ratioLabel","completed","total","ratio","default","createElement","Box","direction","gap","width","__self","__source","fileName","lineNumber","columnNumber","Heading","dataHook","size","verticalAlign","Text","secondary","flexGrow","LinearProgressBar","skin","value","align","marginBottom","weight","marginLeft","exports"],"sources":["../../../../src/components/SetupWidget/SetupWidgetHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Heading, Text, LinearProgressBar } from '@wix/design-system';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\n\nexport interface SetupWidgetHeaderProps {\n  /** Defaults to the translated \"Setup\" when omitted. */\n  title?: string | null;\n  completedCount: number;\n  totalCount: number;\n  progressPercentage: number;\n  isMobile: boolean;\n}\n\n/**\n * Widget header: title + \"X/Y completed\" ratio + progress bar.\n * - Desktop: title left, ratio + bar inline on the right.\n * - Mobile: large heading stacked above the ratio and a full-width bar.\n */\nexport const SetupWidgetHeader = ({\n  title,\n  completedCount,\n  totalCount,\n  progressPercentage,\n  isMobile,\n}: SetupWidgetHeaderProps) => {\n  const { translate: t } = useWixPatternsContainer();\n  const resolvedTitle = title ?? t('cairo.setupWidget.title');\n  const ratioLabel = t('cairo.setupWidget.progress.label', {\n    completed: completedCount,\n    total: totalCount,\n  });\n\n  if (isMobile) {\n    // Mobile (per Figma): the \"X/Y\" ratio sits inline to the left of the bar\n    // (no \"completed\" word) to save vertical space. The ratio is just numbers,\n    // so it needs no translation.\n    const ratio = `${completedCount}/${totalCount}`;\n    return (\n      <Box direction=\"vertical\" gap=\"SP3\" width=\"100%\">\n        <Heading dataHook=\"setup-widget-title\" size=\"large\">\n          {resolvedTitle}\n        </Heading>\n        <Box width=\"100%\" verticalAlign=\"middle\" gap=\"SP2\">\n          <Text dataHook=\"setup-widget-progress\" size=\"small\" secondary>\n            {ratio}\n          </Text>\n          <Box flexGrow={1}>\n            <LinearProgressBar skin=\"standard\" value={progressPercentage} />\n          </Box>\n        </Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Box align=\"space-between\" verticalAlign=\"middle\" marginBottom=\"SP4\">\n      <Heading dataHook=\"setup-widget-title\" size=\"medium\">\n        {resolvedTitle}\n      </Heading>\n      <Box gap=\"SP1\" verticalAlign=\"middle\">\n        <Text dataHook=\"setup-widget-progress\" size=\"tiny\" weight=\"thin\">\n          {ratioLabel}\n        </Text>\n        <Box width={220} marginLeft=\"-8px\">\n          <LinearProgressBar skin=\"standard\" value={progressPercentage} />\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/SkeletonCard/SkeletonCard.st.css.js

@@ -5,15 +5,15 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "SkeletonCard4040440223";
+var _namespace_ = "SkeletonCard3144351190";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "SkeletonCard4040440223__root",
-  "headerLoading": "SkeletonCard4040440223__headerLoading"
+  "root": "SkeletonCard3144351190__root",
+  "headerLoading": "SkeletonCard3144351190__headerLoading"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/SkeletonCard/SkeletonCard.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/SkeletonCard/SkeletonCard.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"SkeletonCard4040440223\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"SkeletonCard4040440223__root\",\"headerLoading\":\"SkeletonCard4040440223__headerLoading\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,wBAAwB;AAC1C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,8BAA8B;EAAC,eAAe,EAAC;AAAuC,CAAC;AAC7G,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/SkeletonCard/SkeletonCard.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"SkeletonCard3144351190\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"SkeletonCard3144351190__root\",\"headerLoading\":\"SkeletonCard3144351190__headerLoading\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,wBAAwB;AAC1C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,8BAA8B;EAAC,eAAe,EAAC;AAAuC,CAAC;AAC7G,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/SlidingModal/SlidingModal.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "SlidingModal2850071977";
+var _namespace_ = "SlidingModal538401435";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "SlidingModal2850071977__root"
+  "root": "SlidingModal538401435__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/SlidingModal/SlidingModal.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/SlidingModal/SlidingModal.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"SlidingModal2850071977\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"SlidingModal2850071977__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,wBAAwB;AAC1C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA8B,CAAC;AACrD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/SlidingModal/SlidingModal.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"SlidingModal538401435\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"SlidingModal538401435__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA6B,CAAC;AACpD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/Table/TableCompat.js

@@ -6,7 +6,7 @@ exports.TableCompat = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _mobxReactLite = require("mobx-react-lite");
-var _ = require("../..");
+var _TableV = require("./TableV2");
 var _state = require("../../state");
 var _react2 = require("@wix/bex-core/react");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/Table/TableCompat.tsx";
@@ -17,7 +17,7 @@ function _TableCompat(props) {
     collection: props.state,
     container
   }));
-  return /*#__PURE__*/_react.default.createElement(_.TableV2, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_TableV.TableV2, (0, _extends2.default)({}, props, {
     state: state,
     __self: this,
     __source: {