@wix/patterns 1.414.0 → 1.415.0

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

@@ -0,0 +1,257 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SetupWidget = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _mobxReactLite = require("mobx-react-lite");
+var _designSystem = require("@wix/design-system");
+var _react2 = require("@wix/bex-core/react");
+var _CardContainer = require("../CardContainer");
+var _useIsMobile = require("../../hooks/useIsMobile");
+var _useIntersectionObserver = require("../../hooks/useIntersectionObserver");
+var _SetupWidgetHeader = require("./SetupWidgetHeader");
+var _SetupStepRow = require("./SetupStepRow");
+var _SetupStepCard = require("./SetupStepCard");
+var _SetupStepGroup = require("./SetupStepGroup");
+var _AllCompleteState = require("./AllCompleteState");
+var _SetupWidgetSkeleton = require("./SetupWidgetSkeleton");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupWidget.tsx";
+// Fires `onView` once when the wrapped step scrolls into view. Only mounted
+// when the consumer passes `onStepView`, so view tracking adds no DOM/observer
+// overhead otherwise.
+const StepViewTracker = ({
+  stepId,
+  onView,
+  children
+}) => {
+  const {
+    elementRef
+  } = (0, _useIntersectionObserver.useIntersectionObserver)(onView);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: elementRef,
+    "data-hook": `setup-step-view-${stepId}`,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 72,
+      columnNumber: 5
+    }
+  }, children);
+};
+const _SetupWidget = ({
+  state,
+  renderStepContent,
+  onStepClick,
+  onCompletedStepClick,
+  onStepView,
+  onAllCompleteClick,
+  renderError,
+  dataHook
+}) => {
+  const {
+    translate: t
+  } = (0, _react2.useWixPatternsContainer)();
+  const isMobile = (0, _useIsMobile.useIsMobile)();
+  const {
+    status
+  } = state._loadTask.status;
+  const activateStep = step => {
+    // Completed steps fire their own action (never expand) — distinct from the
+    // active/navigate `onStepClick`.
+    if (step.status === 'completed') {
+      onCompletedStepClick == null || onCompletedStepClick(step);
+      return;
+    }
+    if (step.expansionMode === 'inline') {
+      state._toggleStep(step.id);
+    } else {
+      onStepClick == null || onStepClick(step);
+    }
+  };
+
+  // Children of an aggregated group are leaf steps — they never toggle/expand;
+  // completed children fire the completed action, the rest navigate.
+  const activateChild = child => {
+    if (child.status === 'completed') {
+      onCompletedStepClick == null || onCompletedStepClick(child);
+    } else {
+      onStepClick == null || onStepClick(child);
+    }
+  };
+  const renderLeaf = (step, isChild = false) => {
+    const expanded = !isChild && step.expansionMode === 'inline' && state._expandedStepId === step.id;
+    const onActivate = () => isChild ? activateChild(step) : activateStep(step);
+    return isMobile ? /*#__PURE__*/_react.default.createElement(_SetupStepCard.SetupStepCard, {
+      key: step.id,
+      step: step,
+      isPrimary: !isChild && step.id === state._primaryStepId,
+      expanded: expanded,
+      onActivate: onActivate,
+      renderStepContent: renderStepContent,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 128,
+        columnNumber: 7
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_SetupStepRow.SetupStepRow, {
+      key: step.id,
+      step: step,
+      isFocused: !isChild && (step.id === state._primaryStepId || expanded),
+      expanded: expanded,
+      onActivate: onActivate,
+      renderStepContent: renderStepContent,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 137,
+        columnNumber: 7
+      }
+    });
+  };
+
+  // All-complete is a distinct success surface with its own card.
+  if (status === 'success' && state._isAllComplete) {
+    return /*#__PURE__*/_react.default.createElement(_AllCompleteState.AllCompleteState, {
+      dataHook: dataHook,
+      onCtaClick: onAllCompleteClick,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 151,
+        columnNumber: 7
+      }
+    });
+  }
+
+  // Built-in loading skeleton, shaped like the widget (desktop card / mobile
+  // bare) so there's no layout jump when data resolves.
+  if (status === 'idle' || status === 'loading') {
+    return /*#__PURE__*/_react.default.createElement(_SetupWidgetSkeleton.SetupWidgetSkeleton, {
+      isMobile: isMobile,
+      dataHook: dataHook,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 158,
+        columnNumber: 12
+      }
+    });
+  }
+
+  // Consumer-supplied error UI fully replaces the default error card.
+  if (status === 'error' && renderError) {
+    var _state$_loadTask$erro;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderError({
+      retry: () => state._retry(),
+      error: (_state$_loadTask$erro = state._loadTask.errorStatus) == null ? void 0 : _state$_loadTask$erro.error
+    }));
+  }
+  const header = /*#__PURE__*/_react.default.createElement(_SetupWidgetHeader.SetupWidgetHeader, {
+    title: state._title,
+    completedCount: state._completedCount,
+    totalCount: state._totalCount,
+    progressPercentage: state._progressPercentage,
+    isMobile: isMobile,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 174,
+      columnNumber: 5
+    }
+  });
+  const list = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    direction: "vertical",
+    gap: isMobile ? 'SP3' : 'SP1',
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 184,
+      columnNumber: 5
+    }
+  }, state.steps.map(step => {
+    var _step$steps;
+    const node = (_step$steps = step.steps) != null && _step$steps.length ? /*#__PURE__*/_react.default.createElement(_SetupStepGroup.SetupStepGroup, {
+      step: step,
+      isMobile: isMobile,
+      expanded: state._expandedStepId === step.id,
+      isPrimary: step.id === state._primaryStepId,
+      onToggle: () => state._toggleStep(step.id),
+      renderChild: child => renderLeaf(child, true),
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 187,
+        columnNumber: 11
+      }
+    }) : renderLeaf(step);
+    return onStepView ? /*#__PURE__*/_react.default.createElement(StepViewTracker, {
+      key: step.id,
+      stepId: step.id,
+      onView: () => onStepView(step),
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 200,
+        columnNumber: 11
+      }
+    }, node) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: step.id,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 208,
+        columnNumber: 11
+      }
+    }, node);
+  }));
+  const body = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, header, list);
+
+  // Mobile success renders bare — no outer card (matches the mobile design;
+  // the consumer composes the surrounding page). Loading / error still flow
+  // through CardContainer so the widget owns those states everywhere.
+  if (isMobile && status === 'success') {
+    return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      dataHook: dataHook,
+      direction: "vertical",
+      gap: "SP3",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 226,
+        columnNumber: 7
+      }
+    }, body);
+  }
+  return /*#__PURE__*/_react.default.createElement(_CardContainer.CardContainer, {
+    dataHook: dataHook,
+    status: status,
+    errorState: {
+      dataHook: 'error-state',
+      title: t('cairo.setupWidget.error.title'),
+      subtitle: t('cairo.setupWidget.error.subtitle'),
+      action: {
+        text: t('cairo.setupWidget.error.cta'),
+        onClick: () => state._retry()
+      }
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 233,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    direction: "vertical",
+    padding: "SP6",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 246,
+      columnNumber: 7
+    }
+  }, body));
+};
+const SetupWidget = exports.SetupWidget = (0, _mobxReactLite.observer)(_SetupWidget);
+//# sourceMappingURL=SetupWidget.js.map

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

@@ -0,0 +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","SetupStepCard","key","isPrimary","_primaryStepId","SetupStepRow","isFocused","_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","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    return isMobile ? (\n      <SetupStepCard\n        key={step.id}\n        step={step}\n        isPrimary={!isChild && step.id === state._primaryStepId}\n        expanded={expanded}\n        onActivate={onActivate}\n        renderStepContent={renderStepContent}\n      />\n    ) : (\n      <SetupStepRow\n        key={step.id}\n        step={step}\n        isFocused={!isChild && (step.id === state._primaryStepId || expanded)}\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":[]}

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

@@ -0,0 +1,95 @@
+@property st-global(--wds-color-border-dark-secondary);
+@property st-global(--wds-color-border-standard-primary);
+@property st-global(--wds-color-border-standard-secondary);
+@property st-global(--wds-color-fill-standard-tertiary);
+@property st-global(--wds-color-fill-standard-tertiary-hover);
+@property st-global(--wsr-color-D60);
+@property st-global(--wsr-color-D80);
+@property st-global(--wsr-color-B30);
+@property st-global(--wsr-color-B40);
+@property st-global(--wsr-color-B60);
+@property st-global(--wds-space-100);
+@property st-global(--wds-border-radius-200);
+@property st-global(--wds-border-radius-400);
+
+.root {}
+
+/* ---------------------------------------------------------------------------
+ * Desktop step row — bordered card with hover/focus tinting. Hover only
+ * applies to rows that are actually interactive (not focused / completed /
+ * locked), gated by the `hoverable` state.
+ *
+ * Every var() carries the WDS fallback chain — semantic --wds token →
+ * legacy --wsr token → hard-coded value — so the widget renders correctly
+ * even when no theme stylesheet is loaded (same chains WDS ships itself).
+ * ------------------------------------------------------------------------- */
+.row {
+  -st-states: focused, hoverable, clickable;
+
+  display: flex;
+  flex-direction: column;
+  /* nearest default-theme token to the ~7-8px row padding; matches the SP1
+   * inner gaps for a consistent 6px rhythm */
+  padding: var(--wds-space-100, 6px);
+  border-radius: var(--wds-border-radius-200, 4px);
+  border: 1px solid var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));
+  background-color: var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));
+  /* clip (not hidden) keeps focus rings on the inner CTA from being cut off */
+  overflow: clip;
+}
+
+.row:clickable {
+  cursor: pointer;
+}
+
+.row:hoverable:hover {
+  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
+  border-color: var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE));
+}
+
+.row:focused {
+  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
+  border-color: var(--wds-color-border-standard-primary, var(--wsr-color-B30, #A8CAFF));
+}
+
+/* Completed step's CTA is revealed on row hover/focus (desktop), mirroring the
+ * existing Setup widget. It still occupies space so the row height is stable. */
+.completedCta {
+  opacity: 0;
+  transition: opacity 0.25s ease-in-out;
+}
+
+.row:hover .completedCta,
+.row:focus-within .completedCta {
+  opacity: 1;
+}
+
+/* ---------------------------------------------------------------------------
+ * Mobile step card — shadowed card; the focused (primary) card gets a soft
+ * blue surface so the screen has one clear next-action target.
+ * ------------------------------------------------------------------------- */
+.card {
+  -st-states: primary, clickable;
+
+  display: block;
+  width: 100%;
+  border: none;
+  border-radius: var(--wds-border-radius-400, 8px);
+  background-color: var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));
+  box-shadow: 0 0 6px 0 rgba(0, 6, 36, 0.1), 0 2px 4px 0 rgba(0, 6, 36, 0.05);
+  overflow: clip;
+  box-sizing: border-box;
+  text-align: start;
+  font: inherit;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+.card:primary {
+  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
+}
+
+.card:clickable {
+  cursor: pointer;
+}

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

@@ -0,0 +1,39 @@
+"use strict";
+
+exports.__esModule = true;
+exports.vars = exports.style = exports.stVars = exports.st = exports.namespace = exports.layers = exports.keyframes = exports.cssStates = exports.containers = exports.classes = void 0;
+var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
+// @ts-nocheck
+
+var _namespace_ = "SetupWidget713352316";
+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": "SetupWidget713352316__root",
+  "row": "SetupWidget713352316__row",
+  "completedCta": "SetupWidget713352316__completedCta",
+  "card": "SetupWidget713352316__card"
+};
+var keyframes = exports.keyframes = {};
+var layers = exports.layers = {};
+var containers = exports.containers = {};
+var stVars = exports.stVars = {};
+var vars = exports.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"
+};
+//# sourceMappingURL=SetupWidget.st.css.js.map

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

@@ -0,0 +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_ = \"SetupWidget713352316\";\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\":\"SetupWidget713352316__root\",\"row\":\"SetupWidget713352316__row\",\"completedCta\":\"SetupWidget713352316__completedCta\",\"card\":\"SetupWidget713352316__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,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;AAA4B,CAAC;AAC7K,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":[]}

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

@@ -0,0 +1,45 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _unidriver = require("../../unidriver");
+var _unidriver2 = require("@wix/design-system/dist/testkit/unidriver");
+var _default = (base, body) => {
+  const tryAgainButton = () => (0, _unidriver2.TextButtonUniDriver)(base.$(`[data-hook="error-card-state-action-button"]`), body);
+  const stepCta = id => (0, _unidriver2.ButtonUniDriver)(base.$(`[data-hook="setup-step-cta-${id}"]`), body);
+  return {
+    /** Widget title text. */
+    getTitle: () => base.$(`[data-hook="setup-widget-title"]`).text(),
+    /** "X/Y completed" progress label text. */
+    getProgressLabel: () => base.$(`[data-hook="setup-widget-progress"]`).text(),
+    /** Titles of all rendered steps, in order. */
+    getStepTitles: () => base.$$(`[data-hook^="setup-step-title-"]`).map(el => el.text()),
+    /** Whether a given step row/card is rendered. */
+    stepExists: id => base.$(`[data-hook="setup-step-${id}"]`).exists(),
+    /** Click a step's row/card (triggers inline toggle or navigate). */
+    clickStep: id => base.$(`[data-hook="setup-step-${id}"]`).click(),
+    /** Click a step's CTA button. */
+    clickStepCta: id => stepCta(id).click(),
+    /** Whether a step's CTA is rendered. */
+    stepCtaExists: id => base.$(`[data-hook="setup-step-cta-${id}"]`).exists(),
+    /** Whether a disabled step's permission tooltip wraps its CTA. */
+    disabledTooltipExists: id => base.$(`[data-hook="setup-step-disabled-tooltip-${id}"]`).exists(),
+    /** Whether a step's inline-expansion content is shown. */
+    isStepExpanded: id => base.$(`[data-hook="setup-step-content-${id}"]`).exists(),
+    /** Whether an aggregated group's children are shown. */
+    isGroupExpanded: id => base.$(`[data-hook="setup-step-children-${id}"]`).exists(),
+    /** Click an arbitrary element by data-hook within the widget. */
+    clickByDataHook: dataHook => base.$(`[data-hook="${dataHook}"]`).click(),
+    /** Whether the all-complete success surface is shown. */
+    isAllComplete: () => base.$(`[data-hook="setup-all-complete"]`).exists(),
+    /** Whether the loading skeleton is shown. */
+    isLoading: () => base.$(`[data-hook="setup-widget-skeleton"]`).exists(),
+    /** Whether the error state is shown. */
+    isError: () => base.$(`[data-hook="error-card-state"]`).exists(),
+    /** Click the error state's "try again" button (refetches). */
+    clickTryAgain: () => tryAgainButton().click(),
+    ...(0, _unidriver.baseUniDriverFactory)(base)
+  };
+};
+exports.default = _default;
+//# sourceMappingURL=SetupWidget.uni.driver.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_unidriver","require","_unidriver2","_default","base","body","tryAgainButton","TextButtonUniDriver","$","stepCta","id","ButtonUniDriver","getTitle","text","getProgressLabel","getStepTitles","$$","map","el","stepExists","exists","clickStep","click","clickStepCta","stepCtaExists","disabledTooltipExists","isStepExpanded","isGroupExpanded","clickByDataHook","dataHook","isAllComplete","isLoading","isError","clickTryAgain","baseUniDriverFactory","exports","default"],"sources":["../../../../src/components/SetupWidget/SetupWidget.uni.driver.ts"],"sourcesContent":["import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport { baseUniDriverFactory } from '../../unidriver';\nimport {\n  ButtonUniDriver,\n  TextButtonUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nexport default (base: UniDriver, body: UniDriver) => {\n  const tryAgainButton = () =>\n    TextButtonUniDriver(\n      base.$(`[data-hook=\"error-card-state-action-button\"]`),\n      body,\n    );\n\n  const stepCta = (id: string) =>\n    ButtonUniDriver(base.$(`[data-hook=\"setup-step-cta-${id}\"]`), body);\n\n  return {\n    /** Widget title text. */\n    getTitle: () => base.$(`[data-hook=\"setup-widget-title\"]`).text(),\n    /** \"X/Y completed\" progress label text. */\n    getProgressLabel: () =>\n      base.$(`[data-hook=\"setup-widget-progress\"]`).text(),\n    /** Titles of all rendered steps, in order. */\n    getStepTitles: () =>\n      base.$$(`[data-hook^=\"setup-step-title-\"]`).map((el) => el.text()),\n    /** Whether a given step row/card is rendered. */\n    stepExists: (id: string) =>\n      base.$(`[data-hook=\"setup-step-${id}\"]`).exists(),\n    /** Click a step's row/card (triggers inline toggle or navigate). */\n    clickStep: (id: string) => base.$(`[data-hook=\"setup-step-${id}\"]`).click(),\n    /** Click a step's CTA button. */\n    clickStepCta: (id: string) => stepCta(id).click(),\n    /** Whether a step's CTA is rendered. */\n    stepCtaExists: (id: string) =>\n      base.$(`[data-hook=\"setup-step-cta-${id}\"]`).exists(),\n    /** Whether a disabled step's permission tooltip wraps its CTA. */\n    disabledTooltipExists: (id: string) =>\n      base.$(`[data-hook=\"setup-step-disabled-tooltip-${id}\"]`).exists(),\n    /** Whether a step's inline-expansion content is shown. */\n    isStepExpanded: (id: string) =>\n      base.$(`[data-hook=\"setup-step-content-${id}\"]`).exists(),\n    /** Whether an aggregated group's children are shown. */\n    isGroupExpanded: (id: string) =>\n      base.$(`[data-hook=\"setup-step-children-${id}\"]`).exists(),\n    /** Click an arbitrary element by data-hook within the widget. */\n    clickByDataHook: (dataHook: string) =>\n      base.$(`[data-hook=\"${dataHook}\"]`).click(),\n    /** Whether the all-complete success surface is shown. */\n    isAllComplete: () => base.$(`[data-hook=\"setup-all-complete\"]`).exists(),\n    /** Whether the loading skeleton is shown. */\n    isLoading: () => base.$(`[data-hook=\"setup-widget-skeleton\"]`).exists(),\n    /** Whether the error state is shown. */\n    isError: () => base.$(`[data-hook=\"error-card-state\"]`).exists(),\n    /** Click the error state's \"try again\" button (refetches). */\n    clickTryAgain: () => tryAgainButton().click(),\n    ...baseUniDriverFactory(base),\n  };\n};\n"],"mappings":";;;;AACA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAGmD,IAAAE,QAAA,GAEpCA,CAACC,IAAe,EAAEC,IAAe,KAAK;EACnD,MAAMC,cAAc,GAAGA,CAAA,KACrB,IAAAC,+BAAmB,EACjBH,IAAI,CAACI,CAAC,CAAC,8CAA8C,CAAC,EACtDH,IACF,CAAC;EAEH,MAAMI,OAAO,GAAIC,EAAU,IACzB,IAAAC,2BAAe,EAACP,IAAI,CAACI,CAAC,CAAC,8BAA8BE,EAAE,IAAI,CAAC,EAAEL,IAAI,CAAC;EAErE,OAAO;IACL;IACAO,QAAQ,EAAEA,CAAA,KAAMR,IAAI,CAACI,CAAC,CAAC,kCAAkC,CAAC,CAACK,IAAI,CAAC,CAAC;IACjE;IACAC,gBAAgB,EAAEA,CAAA,KAChBV,IAAI,CAACI,CAAC,CAAC,qCAAqC,CAAC,CAACK,IAAI,CAAC,CAAC;IACtD;IACAE,aAAa,EAAEA,CAAA,KACbX,IAAI,CAACY,EAAE,CAAC,kCAAkC,CAAC,CAACC,GAAG,CAAEC,EAAE,IAAKA,EAAE,CAACL,IAAI,CAAC,CAAC,CAAC;IACpE;IACAM,UAAU,EAAGT,EAAU,IACrBN,IAAI,CAACI,CAAC,CAAC,0BAA0BE,EAAE,IAAI,CAAC,CAACU,MAAM,CAAC,CAAC;IACnD;IACAC,SAAS,EAAGX,EAAU,IAAKN,IAAI,CAACI,CAAC,CAAC,0BAA0BE,EAAE,IAAI,CAAC,CAACY,KAAK,CAAC,CAAC;IAC3E;IACAC,YAAY,EAAGb,EAAU,IAAKD,OAAO,CAACC,EAAE,CAAC,CAACY,KAAK,CAAC,CAAC;IACjD;IACAE,aAAa,EAAGd,EAAU,IACxBN,IAAI,CAACI,CAAC,CAAC,8BAA8BE,EAAE,IAAI,CAAC,CAACU,MAAM,CAAC,CAAC;IACvD;IACAK,qBAAqB,EAAGf,EAAU,IAChCN,IAAI,CAACI,CAAC,CAAC,2CAA2CE,EAAE,IAAI,CAAC,CAACU,MAAM,CAAC,CAAC;IACpE;IACAM,cAAc,EAAGhB,EAAU,IACzBN,IAAI,CAACI,CAAC,CAAC,kCAAkCE,EAAE,IAAI,CAAC,CAACU,MAAM,CAAC,CAAC;IAC3D;IACAO,eAAe,EAAGjB,EAAU,IAC1BN,IAAI,CAACI,CAAC,CAAC,mCAAmCE,EAAE,IAAI,CAAC,CAACU,MAAM,CAAC,CAAC;IAC5D;IACAQ,eAAe,EAAGC,QAAgB,IAChCzB,IAAI,CAACI,CAAC,CAAC,eAAeqB,QAAQ,IAAI,CAAC,CAACP,KAAK,CAAC,CAAC;IAC7C;IACAQ,aAAa,EAAEA,CAAA,KAAM1B,IAAI,CAACI,CAAC,CAAC,kCAAkC,CAAC,CAACY,MAAM,CAAC,CAAC;IACxE;IACAW,SAAS,EAAEA,CAAA,KAAM3B,IAAI,CAACI,CAAC,CAAC,qCAAqC,CAAC,CAACY,MAAM,CAAC,CAAC;IACvE;IACAY,OAAO,EAAEA,CAAA,KAAM5B,IAAI,CAACI,CAAC,CAAC,gCAAgC,CAAC,CAACY,MAAM,CAAC,CAAC;IAChE;IACAa,aAAa,EAAEA,CAAA,KAAM3B,cAAc,CAAC,CAAC,CAACgB,KAAK,CAAC,CAAC;IAC7C,GAAG,IAAAY,+BAAoB,EAAC9B,IAAI;EAC9B,CAAC;AACH,CAAC;AAAA+B,OAAA,CAAAC,OAAA,GAAAjC,QAAA","ignoreList":[]}

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

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SetupWidgetHeader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _react2 = require("@wix/bex-core/react");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupWidgetHeader.tsx";
+/**
+ * Widget header: title + "X/Y completed" ratio + progress bar.
+ * - Desktop: title left, ratio + bar inline on the right.
+ * - Mobile: large heading stacked above the ratio and a full-width bar.
+ */
+const SetupWidgetHeader = ({
+  title,
+  completedCount,
+  totalCount,
+  progressPercentage,
+  isMobile
+}) => {
+  const {
+    translate: t
+  } = (0, _react2.useWixPatternsContainer)();
+  const resolvedTitle = title ?? t('cairo.setupWidget.title');
+  const ratioLabel = t('cairo.setupWidget.progress.label', {
+    completed: completedCount,
+    total: totalCount
+  });
+  if (isMobile) {
+    return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      direction: "vertical",
+      gap: "SP2",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 35,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Heading, {
+      dataHook: "setup-widget-title",
+      size: "large",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 36,
+        columnNumber: 9
+      }
+    }, resolvedTitle), /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+      dataHook: "setup-widget-progress",
+      size: "small",
+      secondary: true,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 39,
+        columnNumber: 9
+      }
+    }, ratioLabel), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      width: "100%",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 42,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.LinearProgressBar, {
+      skin: "standard",
+      value: progressPercentage,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 43,
+        columnNumber: 11
+      }
+    })));
+  }
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    align: "space-between",
+    verticalAlign: "middle",
+    marginBottom: "SP4",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 50,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Heading, {
+    dataHook: "setup-widget-title",
+    size: "medium",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 51,
+      columnNumber: 7
+    }
+  }, resolvedTitle), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    gap: "SP1",
+    verticalAlign: "middle",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 54,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    dataHook: "setup-widget-progress",
+    size: "tiny",
+    weight: "thin",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 55,
+      columnNumber: 9
+    }
+  }, ratioLabel), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    width: 220,
+    marginLeft: "-8px",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 58,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.LinearProgressBar, {
+    skin: "standard",
+    value: progressPercentage,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 59,
+      columnNumber: 11
+    }
+  }))));
+};
+exports.SetupWidgetHeader = SetupWidgetHeader;
+//# sourceMappingURL=SetupWidgetHeader.js.map

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

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