@wix/patterns 1.413.0 → 1.415.0

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Box, Text, Button, TextButton, Badge, Divider, Tooltip, } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { SetupStepIcon } from './SetupStepIcon';
+import { st, classes } from './SetupWidget.st.css.js';
+/**
+ * Desktop step row. Recreated from the existing Setup widget:
+ * - completed → green check, struck-through title, optional completed CTA
+ * - disabled → muted bullet + disabled CTA (permission-denied)
+ * - in-progress → "In progress" badge next to the title
+ * - focused → blue surface, bold title, primary CTA
+ * - hoverable rows tint blue on hover (handled in Stylable)
+ */
+export const SetupStepRow = ({ step, isFocused, expanded, onActivate, renderStepContent, }) => {
+    const { translate: t } = useWixPatternsContainer();
+    const isInProgress = step.status === 'in-progress';
+    const isCompleted = step.status === 'completed';
+    const isDisabled = step.status === 'disabled';
+    const isInlineExpanded = expanded && step.expansionMode === 'inline';
+    const showCta = !isCompleted && !!step.ctaLabel && !isInlineExpanded;
+    // Completed steps stay actionable when they carry a completed CTA (G2).
+    const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;
+    const clickable = (!isCompleted && !isDisabled) || showCompletedCta;
+    const hoverable = !isFocused && !isCompleted && !isDisabled;
+    const handleClick = clickable ? onActivate : undefined;
+    return (React.createElement("div", { "data-hook": `setup-step-${step.id}`, className: st(classes.row, {
+            focused: isFocused,
+            hoverable,
+            clickable,
+        }), onClick: handleClick, onKeyDown: clickable
+            ? (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    onActivate();
+                }
+            }
+            : undefined, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined },
+        React.createElement(Box, { align: "space-between", verticalAlign: "middle", width: "100%", minHeight: "30px" },
+            React.createElement(Box, { minHeight: "24px", verticalAlign: "middle" },
+                React.createElement(SetupStepIcon, { status: step.status }),
+                React.createElement(Box, { paddingLeft: "SP2", paddingRight: "SP2", verticalAlign: "middle", gap: "SP1" },
+                    React.createElement(Text, { dataHook: `setup-step-title-${step.id}`, size: "small", skin: isDisabled ? 'disabled' : 'standard', weight: isFocused ? 'bold' : 'thin', secondary: isCompleted, light: isCompleted }, isCompleted ? React.createElement("del", null, step.title) : step.title),
+                    isInProgress && !isInlineExpanded && (React.createElement(Box, { marginTop: "2px" },
+                        React.createElement(Badge, { size: "tiny", skin: "urgent", type: "transparent" }, t('cairo.setupWidget.step.inProgress')))))),
+            showCta &&
+                (() => {
+                    const ctaNode = (React.createElement(Box, { verticalAlign: "middle" },
+                        React.createElement(Button, { dataHook: `setup-step-cta-${step.id}`, size: "small", priority: !isDisabled && !isFocused ? 'secondary' : 'primary', disabled: isDisabled, ellipsis: false, onClick: (event) => {
+                                event.stopPropagation();
+                                onActivate();
+                            } }, step.ctaLabel)));
+                    // Disabled steps explain why the CTA is disabled (G5).
+                    return isDisabled ? (React.createElement(Tooltip, { dataHook: `setup-step-disabled-tooltip-${step.id}`, content: step.disabledTooltip ??
+                            // Translation-key id stays `lockedTooltip` until the
+                            // Translation Center key is renamed (TC follow-up to T2).
+                            t('cairo.setupWidget.step.lockedTooltip') }, ctaNode)) : (ctaNode);
+                })(),
+            showCompletedCta && (React.createElement(Box, { verticalAlign: "middle", marginRight: "SP2", className: st(classes.completedCta) },
+                React.createElement(TextButton, { dataHook: `setup-step-cta-${step.id}`, size: "small", onClick: (event) => {
+                        event.stopPropagation();
+                        onActivate();
+                    } }, step.completedCtaLabel)))),
+        isInlineExpanded && (React.createElement(Box, { dataHook: `setup-step-content-${step.id}`, direction: "vertical", paddingLeft: "SP5", paddingRight: "SP1", paddingBottom: "SP1", marginTop: "SP2" },
+            React.createElement(Box, { marginBottom: "SP2" },
+                React.createElement(Divider, null)),
+            React.createElement("div", { onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation() }, renderStepContent?.(step))))));
+};
+//# sourceMappingURL=SetupStepRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SetupStepRow.js","sourceRoot":"","sources":["../../../../src/components/SetupWidget/SetupStepRow.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/SetupWidget/SetupWidget.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Box } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { CardContainer } from '../CardContainer';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
+import { SetupWidgetHeader } from './SetupWidgetHeader';
+import { SetupStepRow } from './SetupStepRow';
+import { SetupStepCard } from './SetupStepCard';
+import { SetupStepGroup } from './SetupStepGroup';
+import { AllCompleteState } from './AllCompleteState';
+import { SetupWidgetSkeleton } from './SetupWidgetSkeleton';
+// 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 } = useIntersectionObserver(onView);
+    return (React.createElement("div", { ref: elementRef, "data-hook": `setup-step-view-${stepId}` }, children));
+};
+const _SetupWidget = ({ state, renderStepContent, onStepClick, onCompletedStepClick, onStepView, onAllCompleteClick, renderError, dataHook, }) => {
+    const { translate: t } = useWixPatternsContainer();
+    const isMobile = 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?.(step);
+            return;
+        }
+        if (step.expansionMode === 'inline') {
+            state._toggleStep(step.id);
+        }
+        else {
+            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?.(child);
+        }
+        else {
+            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 ? (React.createElement(SetupStepCard, { key: step.id, step: step, isPrimary: !isChild && step.id === state._primaryStepId, expanded: expanded, onActivate: onActivate, renderStepContent: renderStepContent })) : (React.createElement(SetupStepRow, { key: step.id, step: step, isFocused: !isChild && (step.id === state._primaryStepId || expanded), expanded: expanded, onActivate: onActivate, renderStepContent: renderStepContent }));
+    };
+    // All-complete is a distinct success surface with its own card.
+    if (status === 'success' && state._isAllComplete) {
+        return (React.createElement(AllCompleteState, { dataHook: dataHook, onCtaClick: onAllCompleteClick }));
+    }
+    // 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 React.createElement(SetupWidgetSkeleton, { isMobile: isMobile, dataHook: dataHook });
+    }
+    // Consumer-supplied error UI fully replaces the default error card.
+    if (status === 'error' && renderError) {
+        return (React.createElement(React.Fragment, null, renderError({
+            retry: () => state._retry(),
+            error: state._loadTask.errorStatus?.error,
+        })));
+    }
+    const header = (React.createElement(SetupWidgetHeader, { title: state._title, completedCount: state._completedCount, totalCount: state._totalCount, progressPercentage: state._progressPercentage, isMobile: isMobile }));
+    const list = (React.createElement(Box, { direction: "vertical", gap: isMobile ? 'SP3' : 'SP1' }, state.steps.map((step) => {
+        const node = step.steps?.length ? (React.createElement(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) })) : (renderLeaf(step));
+        return onStepView ? (React.createElement(StepViewTracker, { key: step.id, stepId: step.id, onView: () => onStepView(step) }, node)) : (React.createElement(React.Fragment, { key: step.id }, node));
+    })));
+    const body = (React.createElement(React.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 (React.createElement(Box, { dataHook: dataHook, direction: "vertical", gap: "SP3" }, body));
+    }
+    return (React.createElement(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(),
+            },
+        } },
+        React.createElement(Box, { direction: "vertical", padding: "SP6" }, body)));
+};
+export const SetupWidget = observer(_SetupWidget);
+//# sourceMappingURL=SetupWidget.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SetupWidget.js","sourceRoot":"","sources":["../../../../src/components/SetupWidget/SetupWidget.tsx"],"names":[],"mappings":"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"}

package/dist/esm/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/esm/components/SetupWidget/SetupWidget.st.css.js

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+var _namespace_ = "SetupWidget713352316";
+var _style_ = classesRuntime.bind(null, _namespace_);
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st = _style_;
+export var namespace = _namespace_;
+export var classes = { "root": "SetupWidget713352316__root", "row": "SetupWidget713352316__row", "completedCta": "SetupWidget713352316__completedCta", "card": "SetupWidget713352316__card" };
+export var keyframes = {};
+export var layers = {};
+export var containers = {};
+export var stVars = {};
+export 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" };
+//# sourceMappingURL=SetupWidget.st.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SetupWidget.st.css.js","sourceRoot":"","sources":["../../../../src/components/SetupWidget/SetupWidget.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,sBAAsB,CAAC;AACzC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC;AAC3B,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,4BAA4B,EAAC,KAAK,EAAC,2BAA2B,EAAC,cAAc,EAAC,oCAAoC,EAAC,MAAM,EAAC,4BAA4B,EAAC,CAAC;AACrL,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,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,yBAAyB,EAAC,CAAC"}

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

@@ -0,0 +1,40 @@
+import { baseUniDriverFactory } from '../../unidriver';
+import { ButtonUniDriver, TextButtonUniDriver, } from '@wix/design-system/dist/testkit/unidriver';
+export default (base, body) => {
+    const tryAgainButton = () => TextButtonUniDriver(base.$(`[data-hook="error-card-state-action-button"]`), body);
+    const stepCta = (id) => 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(),
+        ...baseUniDriverFactory(base),
+    };
+};
+//# sourceMappingURL=SetupWidget.uni.driver.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SetupWidget.uni.driver.js","sourceRoot":"","sources":["../../../../src/components/SetupWidget/SetupWidget.uni.driver.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EACL,eAAe,EACf,mBAAmB,GACpB,MAAM,2CAA2C,CAAC;AAEnD,eAAe,CAAC,IAAe,EAAE,IAAe,EAAE,EAAE;IAClD,MAAM,cAAc,GAAG,GAAG,EAAE,CAC1B,mBAAmB,CACjB,IAAI,CAAC,CAAC,CAAC,8CAA8C,CAAC,EACtD,IAAI,CACL,CAAC;IAEJ,MAAM,OAAO,GAAG,CAAC,EAAU,EAAE,EAAE,CAC7B,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,8BAA8B,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IAEtE,OAAO;QACL,yBAAyB;QACzB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,IAAI,EAAE;QACjE,2CAA2C;QAC3C,gBAAgB,EAAE,GAAG,EAAE,CACrB,IAAI,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,IAAI,EAAE;QACtD,8CAA8C;QAC9C,aAAa,EAAE,GAAG,EAAE,CAClB,IAAI,CAAC,EAAE,CAAC,kCAAkC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;QACpE,iDAAiD;QACjD,UAAU,EAAE,CAAC,EAAU,EAAE,EAAE,CACzB,IAAI,CAAC,CAAC,CAAC,0BAA0B,EAAE,IAAI,CAAC,CAAC,MAAM,EAAE;QACnD,oEAAoE;QACpE,SAAS,EAAE,CAAC,EAAU,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,0BAA0B,EAAE,IAAI,CAAC,CAAC,KAAK,EAAE;QAC3E,iCAAiC;QACjC,YAAY,EAAE,CAAC,EAAU,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE;QACjD,wCAAwC;QACxC,aAAa,EAAE,CAAC,EAAU,EAAE,EAAE,CAC5B,IAAI,CAAC,CAAC,CAAC,8BAA8B,EAAE,IAAI,CAAC,CAAC,MAAM,EAAE;QACvD,kEAAkE;QAClE,qBAAqB,EAAE,CAAC,EAAU,EAAE,EAAE,CACpC,IAAI,CAAC,CAAC,CAAC,2CAA2C,EAAE,IAAI,CAAC,CAAC,MAAM,EAAE;QACpE,0DAA0D;QAC1D,cAAc,EAAE,CAAC,EAAU,EAAE,EAAE,CAC7B,IAAI,CAAC,CAAC,CAAC,kCAAkC,EAAE,IAAI,CAAC,CAAC,MAAM,EAAE;QAC3D,wDAAwD;QACxD,eAAe,EAAE,CAAC,EAAU,EAAE,EAAE,CAC9B,IAAI,CAAC,CAAC,CAAC,mCAAmC,EAAE,IAAI,CAAC,CAAC,MAAM,EAAE;QAC5D,iEAAiE;QACjE,eAAe,EAAE,CAAC,QAAgB,EAAE,EAAE,CACpC,IAAI,CAAC,CAAC,CAAC,eAAe,QAAQ,IAAI,CAAC,CAAC,KAAK,EAAE;QAC7C,yDAAyD;QACzD,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,MAAM,EAAE;QACxE,6CAA6C;QAC7C,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,MAAM,EAAE;QACvE,wCAAwC;QACxC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,MAAM,EAAE;QAChE,8DAA8D;QAC9D,aAAa,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC,KAAK,EAAE;QAC7C,GAAG,oBAAoB,CAAC,IAAI,CAAC;KAC9B,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Box, Heading, Text, LinearProgressBar } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+/**
+ * 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.
+ */
+export const SetupWidgetHeader = ({ title, completedCount, totalCount, progressPercentage, isMobile, }) => {
+    const { translate: t } = useWixPatternsContainer();
+    const resolvedTitle = title ?? t('cairo.setupWidget.title');
+    const ratioLabel = t('cairo.setupWidget.progress.label', {
+        completed: completedCount,
+        total: totalCount,
+    });
+    if (isMobile) {
+        return (React.createElement(Box, { direction: "vertical", gap: "SP2" },
+            React.createElement(Heading, { dataHook: "setup-widget-title", size: "large" }, resolvedTitle),
+            React.createElement(Text, { dataHook: "setup-widget-progress", size: "small", secondary: true }, ratioLabel),
+            React.createElement(Box, { width: "100%" },
+                React.createElement(LinearProgressBar, { skin: "standard", value: progressPercentage }))));
+    }
+    return (React.createElement(Box, { align: "space-between", verticalAlign: "middle", marginBottom: "SP4" },
+        React.createElement(Heading, { dataHook: "setup-widget-title", size: "medium" }, resolvedTitle),
+        React.createElement(Box, { gap: "SP1", verticalAlign: "middle" },
+            React.createElement(Text, { dataHook: "setup-widget-progress", size: "tiny", weight: "thin" }, ratioLabel),
+            React.createElement(Box, { width: 220, marginLeft: "-8px" },
+                React.createElement(LinearProgressBar, { skin: "standard", value: progressPercentage })))));
+};
+//# sourceMappingURL=SetupWidgetHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SetupWidgetHeader.js","sourceRoot":"","sources":["../../../../src/components/SetupWidget/SetupWidgetHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAW9D;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,KAAK,EACL,cAAc,EACd,UAAU,EACV,kBAAkB,EAClB,QAAQ,GACe,EAAE,EAAE;IAC3B,MAAM,EAAE,SAAS,EAAE,CAAC,EAAE,GAAG,uBAAuB,EAAE,CAAC;IACnD,MAAM,aAAa,GAAG,KAAK,IAAI,CAAC,CAAC,yBAAyB,CAAC,CAAC;IAC5D,MAAM,UAAU,GAAG,CAAC,CAAC,kCAAkC,EAAE;QACvD,SAAS,EAAE,cAAc;QACzB,KAAK,EAAE,UAAU;KAClB,CAAC,CAAC;IAEH,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,oBAAC,GAAG,IAAC,SAAS,EAAC,UAAU,EAAC,GAAG,EAAC,KAAK;YACjC,oBAAC,OAAO,IAAC,QAAQ,EAAC,oBAAoB,EAAC,IAAI,EAAC,OAAO,IAChD,aAAa,CACN;YACV,oBAAC,IAAI,IAAC,QAAQ,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,UAC1D,UAAU,CACN;YACP,oBAAC,GAAG,IAAC,KAAK,EAAC,MAAM;gBACf,oBAAC,iBAAiB,IAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,kBAAkB,GAAI,CAC5D,CACF,CACP,CAAC;KACH;IAED,OAAO,CACL,oBAAC,GAAG,IAAC,KAAK,EAAC,eAAe,EAAC,aAAa,EAAC,QAAQ,EAAC,YAAY,EAAC,KAAK;QAClE,oBAAC,OAAO,IAAC,QAAQ,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,IACjD,aAAa,CACN;QACV,oBAAC,GAAG,IAAC,GAAG,EAAC,KAAK,EAAC,aAAa,EAAC,QAAQ;YACnC,oBAAC,IAAI,IAAC,QAAQ,EAAC,uBAAuB,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,IAC7D,UAAU,CACN;YACP,oBAAC,GAAG,IAAC,KAAK,EAAE,GAAG,EAAE,UAAU,EAAC,MAAM;gBAChC,oBAAC,iBAAiB,IAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,kBAAkB,GAAI,CAC5D,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/SetupWidget/SetupWidgetSkeleton.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Card, Box, SkeletonGroup, SkeletonLine } from '@wix/design-system';
+const SKELETON_ROW_COUNT = 4;
+// Wrap in a full-width *vertical* Box: a flex column stretches the SkeletonGroup
+// to the container width, so the SkeletonLine's `%` resolves against the row/card
+// (a horizontal wrapper lets the group shrink to content, making lines narrow).
+const Line = ({ width }) => (React.createElement(Box, { direction: "vertical", width: "100%" },
+    React.createElement(SkeletonGroup, null,
+        React.createElement(SkeletonLine, { width: width }))));
+/**
+ * Built-in loading skeleton shaped like the widget — a header (title +
+ * progress bar) over a list of step-row placeholders. Mirrors the success
+ * layout (card-wrapped on desktop, bare on mobile) so there's no layout jump
+ * when the data resolves.
+ */
+export const SetupWidgetSkeleton = ({ isMobile, dataHook, }) => {
+    // Header skeleton mirrors SetupWidgetHeader's layout so the progress-bar area
+    // is reserved too (no jump when data resolves):
+    // - Mobile: title, ratio text, then a full-width bar — all stacked.
+    // - Desktop: title on the left; ratio + a 220px bar inline on the right.
+    const header = isMobile ? (React.createElement(Box, { direction: "vertical", gap: "SP2", marginBottom: "SP3" },
+        React.createElement(Line, { width: "60%" }),
+        React.createElement(Box, { width: "35%" },
+            React.createElement(Line, { width: "100%" })),
+        React.createElement(Line, { width: "100%" }))) : (
+    // No fixed widths: title and progress-bar lines each `flex={1}` (equal
+    // share), and the `gap` guarantees space between them at any card width.
+    React.createElement(Box, { verticalAlign: "middle", gap: "SP6", marginBottom: "SP4" },
+        React.createElement(Box, { flex: 1 },
+            React.createElement(Line, { width: "100%" })),
+        React.createElement(Box, { flex: 1 },
+            React.createElement(Line, { width: "100%" }))));
+    const body = (React.createElement(Box, { dataHook: "setup-widget-skeleton", direction: "vertical", width: "100%" },
+        header,
+        React.createElement(Box, { direction: "vertical", gap: isMobile ? 'SP3' : 'SP1' }, Array.from({ length: SKELETON_ROW_COUNT }).map((_, index) => (React.createElement(Box, { key: index, width: "100%", padding: isMobile ? 'SP4' : 'SP1', minHeight: "30px", verticalAlign: "middle", border: "1px solid", borderColor: "D60", borderRadius: isMobile ? '8px' : '4px' },
+            React.createElement(Line, { width: "40%" })))))));
+    // Mobile renders bare (no outer card), matching the success layout.
+    if (isMobile) {
+        return (React.createElement(Box, { dataHook: dataHook, direction: "vertical" }, body));
+    }
+    return (React.createElement(Card, { dataHook: dataHook },
+        React.createElement(Box, { direction: "vertical", padding: "SP6" }, body)));
+};
+//# sourceMappingURL=SetupWidgetSkeleton.js.map

package/dist/esm/components/SetupWidget/SetupWidgetSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SetupWidgetSkeleton.js","sourceRoot":"","sources":["../../../../src/components/SetupWidget/SetupWidgetSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE5E,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAE7B,iFAAiF;AACjF,kFAAkF;AAClF,gFAAgF;AAChF,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAqB,EAAE,EAAE,CAAC,CAC7C,oBAAC,GAAG,IAAC,SAAS,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM;IACpC,oBAAC,aAAa;QACZ,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAChB,CACZ,CACP,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,QAAQ,EACR,QAAQ,GAIT,EAAE,EAAE;IACH,8EAA8E;IAC9E,gDAAgD;IAChD,oEAAoE;IACpE,yEAAyE;IACzE,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CACxB,oBAAC,GAAG,IAAC,SAAS,EAAC,UAAU,EAAC,GAAG,EAAC,KAAK,EAAC,YAAY,EAAC,KAAK;QACpD,oBAAC,IAAI,IAAC,KAAK,EAAC,KAAK,GAAG;QACpB,oBAAC,GAAG,IAAC,KAAK,EAAC,KAAK;YACd,oBAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,CACjB;QAEN,oBAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,CACjB,CACP,CAAC,CAAC,CAAC;IACF,uEAAuE;IACvE,yEAAyE;IACzE,oBAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAC,YAAY,EAAC,KAAK;QAEtD,oBAAC,GAAG,IAAC,IAAI,EAAE,CAAC;YACV,oBAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,CACjB;QAEN,oBAAC,GAAG,IAAC,IAAI,EAAE,CAAC;YACV,oBAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,CACjB,CACF,CACP,CAAC;IAEF,MAAM,IAAI,GAAG,CACX,oBAAC,GAAG,IAAC,QAAQ,EAAC,uBAAuB,EAAC,SAAS,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM;QACpE,MAAM;QAGP,oBAAC,GAAG,IAAC,SAAS,EAAC,UAAU,EAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IACpD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5D,oBAAC,GAAG,IACF,GAAG,EAAE,KAAK,EACV,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EACjC,SAAS,EAAC,MAAM,EAChB,aAAa,EAAC,QAAQ,EACtB,MAAM,EAAC,WAAW,EAClB,WAAW,EAAC,KAAK,EACjB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;YAEtC,oBAAC,IAAI,IAAC,KAAK,EAAC,KAAK,GAAG,CAChB,CACP,CAAC,CACE,CACF,CACP,CAAC;IAEF,oEAAoE;IACpE,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,oBAAC,GAAG,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,UAAU,IAC1C,IAAI,CACD,CACP,CAAC;KACH;IAED,OAAO,CACL,oBAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ;QACtB,oBAAC,GAAG,IAAC,SAAS,EAAC,UAAU,EAAC,OAAO,EAAC,KAAK,IACpC,IAAI,CACD,CACD,CACR,CAAC;AACJ,CAAC,CAAC"}