@feathery/react 2.41.0 → 2.42.0

package/cjs/{fthry_index.C5nqE8kC.js → fthry_index.Cts348D4.js}

@@ -9235,7 +9235,7 @@ var IntegrationClient = /** @class */ (function () {
     };
     IntegrationClient.prototype.sendDocusignEnvelope = function (_a) {
         var _this = this;
-        var documents = _a.documents, fillData = _a.fillData, emailSubject = _a.emailSubject, emailBlurb = _a.emailBlurb, signers = _a.signers, existingEnvelopeId = _a.existingEnvelopeId;
+        var documents = _a.documents, libraryDocuments = _a.libraryDocuments, fillData = _a.fillData, emailSubject = _a.emailSubject, emailBlurb = _a.emailBlurb, signers = _a.signers, existingEnvelopeId = _a.existingEnvelopeId;
         var userId = initInfo().userId;
         var url = "".concat(API_URL, "docusign/envelope/");
         var options = {
@@ -9245,6 +9245,7 @@ var IntegrationClient = /** @class */ (function () {
                 fuser_key: userId,
                 form_key: this.formKey,
                 documents: documents,
+                library_documents: libraryDocuments,
                 fill_data: fillData,
                 email_subject: emailSubject,
                 email_blurb: emailBlurb,
@@ -18778,6 +18779,14 @@ function castHiddenVal(hfType, val) {
         case 'number_value':
             newVal = Number(val);
             break;
+        case 'boolean_value':
+            if (typeof val === 'boolean')
+                newVal = val;
+            else {
+                var lowered = String(val).trim().toLowerCase();
+                newVal = lowered === 'true' || lowered === 'yes' || lowered === '1';
+            }
+            break;
         default:
             newVal = String(val);
             break;
@@ -22355,7 +22364,7 @@ var Element$1 = function (_a) {
     if (elementOnView && onViewElements.includes(fieldId))
         basicProps.onView = function (inView) { return elementOnView(fieldId, inView); };
     if (type === 'progress_bar')
-        return (jsx$1(Elements.ProgressBarElement, exports.__assign({}, basicProps, { progress: userProgress, curDepth: curDepth, maxDepth: maxDepth, stepKey: activeStep === null || activeStep === void 0 ? void 0 : activeStep.key, changeStep: form.changeStep, runElementActions: runElementActions })));
+        return (jsx$1(Elements.ProgressBarElement, exports.__assign({}, basicProps, { progress: userProgress, curDepth: curDepth, maxDepth: maxDepth, stepKey: activeStep === null || activeStep === void 0 ? void 0 : activeStep.key, runElementActions: runElementActions, client: form.client })));
     else if (type === 'image')
         return jsx$1(Elements.ImageElement, exports.__assign({}, basicProps));
     else if (type === 'video')
@@ -41002,7 +41011,7 @@ function useTrackUserInteraction(formRef, activeStep, stepKey, formName) {
     }, [activeStep, stepKey, formName]);
 }
 
-var LazyAssistantChat = React.lazy(function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "AssistantChat" */ './fthry_AssistantChat.ZStzPnR-.js'); }).then(function (n) { return n.AssistantChat; }); });
+var LazyAssistantChat = React.lazy(function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "AssistantChat" */ './fthry_AssistantChat.BOyDRP1t.js'); }).then(function (n) { return n.AssistantChat; }); });
 var AssistantChat = function (props) { return (jsx$1(React.Suspense, exports.__assign({ fallback: null }, { children: jsx$1(LazyAssistantChat, exports.__assign({}, props)) }))); };
 
 var AssistantClient = /** @class */ (function () {
@@ -43732,6 +43741,7 @@ function Form(_a) {
         changeStep: function (nextStepKey) {
             return changeFormStep(nextStepKey, activeStep.key, false);
         },
+        client: client,
         updateFieldValues: updateFieldValues,
         submitCustom: function (values) { return client === null || client === void 0 ? void 0 : client.submitCustom(values); },
         elementOnView: elementOnView,
@@ -43776,8 +43786,7 @@ function Form(_a) {
     else if ([COLLAB_COMPLETED, COLLAB_DIRECT_DISABLED, NO_BUSINESS_EMAIL].includes(formOffReason.current))
         return jsx$1(FormOff, { reason: formOffReason.current, showCTA: false });
     else if (anyFinished) {
-        var completeState = formSettings.completionBehavior === 'show_completed_screen' ? (jsx$1(FormOff, { reason: FILLED_OUT, showCTA: formSettings.showBrand })) : null;
-        return completeState;
+        return formSettings.completionBehavior === 'show_completed_screen' ? (jsx$1(FormOff, { reason: FILLED_OUT, showCTA: formSettings.showBrand })) : null;
     }
     else if (!activeStep)
         return stepLoader;
@@ -46871,6 +46880,42 @@ var FeatheryClient = /** @class */ (function (_super) {
             });
         });
     };
+    // Lazily fetch the step keys the user has already completed. Queried only
+    // when a stepper element renders, so it stays out of the session payload.
+    FeatheryClient.prototype.fetchCompletedSteps = function () {
+        var _a;
+        return __awaiter$2(this, void 0, void 0, function () {
+            var _b, userId, collaboratorId, overrideUserId, params, url, response, data;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0: return [4 /*yield*/, initFormsPromise];
+                    case 1:
+                        _c.sent();
+                        _b = initInfo(), userId = _b.userId, collaboratorId = _b.collaboratorId, overrideUserId = _b.overrideUserId;
+                        params = {
+                            form_key: this.formKey,
+                            override: overrideUserId
+                        };
+                        if (userId)
+                            params.fuser_key = userId;
+                        if (collaboratorId)
+                            params.collaborator_user = collaboratorId;
+                        // @ts-expect-error encodeGetParams returns the encoded query string
+                        params = encodeGetParams(params);
+                        url = "".concat(API_URL, "panel/step/completion/?").concat(params);
+                        return [4 /*yield*/, this._fetch(url, {})];
+                    case 2:
+                        response = _c.sent();
+                        if (!response)
+                            return [2 /*return*/, []];
+                        return [4 /*yield*/, response.json().catch(function () { return ({}); })];
+                    case 3:
+                        data = _c.sent();
+                        return [2 /*return*/, (_a = data.completed_steps) !== null && _a !== void 0 ? _a : []];
+                }
+            });
+        });
+    };
     FeatheryClient.prototype.fetchSession = function (formPromise, block) {
         var _a, _b;
         if (formPromise === void 0) { formPromise = null; }
@@ -47201,6 +47246,10 @@ var FeatheryClient = /** @class */ (function (_super) {
             return __generator(this, function (_a) {
                 if (this.draft)
                     return [2 /*return*/];
+                // A 'complete' event means the step was submitted — record it so the
+                // stepper reflects which steps are completed vs merely skipped over.
+                if (eventData.event === 'complete')
+                    markStepCompleted(eventData.step_key);
                 if (!isInteractionDetected() || this.userEventQueue.isReplayingEvents()) {
                     return [2 /*return*/, this.userEventQueue.enqueue(eventData)];
                 }
@@ -47554,7 +47603,9 @@ var initState = {
     isTestEnv: false,
     initNoSave: false,
     theme: '',
-    region: ''
+    region: '',
+    completedSteps: new Set(),
+    completedStepsLoaded: new Set()
 };
 exports.fieldValues = {};
 var filePathMap = {};
@@ -47606,9 +47657,9 @@ function init(sdkKey, options) {
     if (runningInClient()) {
         // Dynamically load libraries that must be client side
         global.scriptjsLoadPromise = Promise.resolve().then(function () { return require(
-        /* webpackChunkName: "scriptjs" */ './fthry_script.hfuKeX0M.js'); }).then(function (n) { return n.script; });
+        /* webpackChunkName: "scriptjs" */ './fthry_script.C70Bm3qk.js'); }).then(function (n) { return n.script; });
         global.webfontloaderPromise = Promise.resolve().then(function () { return require(
-        /* webpackChunkName: "webfontloader" */ './fthry_webfontloader.BLyUiSYA.js'); }).then(function (n) { return n.webfontloader; });
+        /* webpackChunkName: "webfontloader" */ './fthry_webfontloader.CJNW-DFS.js'); }).then(function (n) { return n.webfontloader; });
         // Client-side tracking logic
         if (initState.userTracking === 'cookie') {
             var cookieKey = "feathery-user-id-".concat(sdkKey);
@@ -47753,8 +47804,49 @@ function getFieldValues() {
     // Make a copy so users can't set fieldValues directly
     return exports.__assign({}, exports.fieldValues);
 }
+function getCompletedStepKeys() {
+    // Make a copy so callers can't mutate the set directly
+    return new Set(initState.completedSteps);
+}
+// Record a step as completed once it has been submitted
+function markStepCompleted(stepKey) {
+    if (stepKey)
+        initState.completedSteps.add(stepKey);
+}
+// Fetch the user's completed steps for a form once (deduped per form key) and
+// seed them into init state. Triggered lazily by the stepper element when it
+// renders; the stepper re-renders itself once this resolves.
+function loadCompletedSteps(client) {
+    return __awaiter$2(this, void 0, void 0, function () {
+        var formKey;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    formKey = client === null || client === void 0 ? void 0 : client.formKey;
+                    if (!formKey || initState.completedStepsLoaded.has(formKey))
+                        return [2 /*return*/];
+                    initState.completedStepsLoaded.add(formKey);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, client.fetchCompletedSteps()];
+                case 2:
+                    // Merge rather than replace so steps already completed locally aren't
+                    // dropped (completion is monotonic — a step never becomes uncompleted)
+                    (_a.sent()).forEach(markStepCompleted);
+                    return [3 /*break*/, 4];
+                case 3:
+                    _a.sent();
+                    // Allow a retry on the next render if the request failed
+                    initState.completedStepsLoaded.delete(formKey);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    });
+}
 function logFeatheryBadge() {
-    console.log('%c Feathery %c v' + "2.41.0" + ' ', // replaced with real version during build
+    console.log('%c Feathery %c v' + "2.42.0" + ' ', // replaced with real version during build
     'background: #e2626e; color: white; padding: 2px 6px; border-radius: 3px 0 0 3px; font-weight: bold;', 'background: #fce7e9; color: #c5495a; padding: 2px 6px; border-radius: 0 3px 3px 0;');
 }
 
@@ -49269,64 +49361,64 @@ breakpoint) {
 
 var fieldLoaders = {
     AddressLine1: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "AddressField" */ './fthry_index.1oEFyAGP.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "AddressField" */ './fthry_index.C3bArUa4.js'); });
     },
     ButtonGroupField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "ButtonGroupField" */ './fthry_index.B-UU8i3N.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "ButtonGroupField" */ './fthry_index.LPXprTDf.js'); });
     },
     CheckboxField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "CheckboxField" */ './fthry_index.y4tmJzGh.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "CheckboxField" */ './fthry_index.DjWcky2z.js'); });
     },
     CheckboxGroupField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "CheckboxGroupField" */ './fthry_index.792DnHfR.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "CheckboxGroupField" */ './fthry_index.Bcl3u2bt.js'); });
     },
     ColorPickerField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "ColorPickerField" */ './fthry_index.BKVCeI8M.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "ColorPickerField" */ './fthry_index.DMa8KL_d.js'); });
     },
     CustomField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "CustomField" */ './fthry_index.CewNeOjM.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "CustomField" */ './fthry_index.pqZR4gSb.js'); });
     },
     DateSelectorField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "DateSelectorField" */ './fthry_index.CErEr18j.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "DateSelectorField" */ './fthry_index.C_KCwy5K.js'); });
     },
     DropdownField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "DropdownField" */ './fthry_index.BZV0QImG.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "DropdownField" */ './fthry_index.CW5rWtuZ.js'); });
     },
     DropdownMultiField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "DropdownMultiField" */ './fthry_index.DeDGU7A8.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "DropdownMultiField" */ './fthry_index.VXMfU8Ig.js'); });
     },
     FileUploadField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "FileUploadField" */ './fthry_index.Di7Giv3P.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "FileUploadField" */ './fthry_index.aU4Q-Vhi.js'); });
     },
     MatrixField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "MatrixField" */ './fthry_index.ClmLN_OD.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "MatrixField" */ './fthry_index.BEwwo45U.js'); });
     },
     PasswordField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "PasswordField" */ './fthry_index.BrR9-bMa.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "PasswordField" */ './fthry_index.JJYyApby.js'); });
     },
     PaymentMethodField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "PaymentMethodField" */ './fthry_PaymentMethodField.sRwR5_61.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "PaymentMethodField" */ './fthry_PaymentMethodField.DmbR79FW.js'); });
     },
-    PhoneField: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "PhoneField" */ './fthry_index.BZsqfLAY.js'); }); },
+    PhoneField: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "PhoneField" */ './fthry_index.pmG3XerW.js'); }); },
     PinInputField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "PinInputField" */ './fthry_index.BfKMhDL9.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "PinInputField" */ './fthry_index.DNNK_WNB.js'); });
     },
-    QRScanner: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "QRScanner" */ './fthry_index.x3euiywy.js'); }); },
+    QRScanner: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "QRScanner" */ './fthry_index.DcZhokGw.js'); }); },
     RadioButtonGroupField: function () {
         return Promise.resolve().then(function () { return require(
-        /* webpackChunkName: "RadioButtonGroupField" */ './fthry_index.Jpj4Glh5.js'); });
+        /* webpackChunkName: "RadioButtonGroupField" */ './fthry_index.B4iCcGUt.js'); });
     },
     RatingField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "RatingField" */ './fthry_index.CuRipLlH.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "RatingField" */ './fthry_index.DQ3tM-b4.js'); });
     },
     SignatureField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "SignatureField" */ './fthry_index.ZMlNlPA3.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "SignatureField" */ './fthry_index.DzpicfAn.js'); });
     },
     SliderField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "SliderField" */ './fthry_index.C-vFVU2N.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "SliderField" */ './fthry_index.l6iPtqf7.js'); });
     },
-    TextField: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "TextField" */ './fthry_index.C4KmumGc.js'); }); },
-    TextArea: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "TextArea" */ './fthry_index.BOC9Xno9.js'); }); }
+    TextField: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "TextField" */ './fthry_index.B8IGhOnl.js'); }); },
+    TextArea: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "TextArea" */ './fthry_index.BJAzpvPO.js'); }); }
 };
 var getPositionKey = function (element) { var _a; return ((_a = element.position) === null || _a === void 0 ? void 0 : _a.join(',')) || 'root'; };
 // Share the resolved component between preload and render. A separate
@@ -50239,7 +50331,7 @@ function SegmentBar(_a) {
 }
 
 var CIRCLE_SIZE = 28;
-var CONNECTOR_GAP = 6;
+var CONNECTOR_GAP = 4;
 function isFieldTruthy(fieldKey) {
     var val = getFieldValues()[fieldKey];
     if (Array.isArray(val))
@@ -50255,7 +50347,8 @@ function isStepVisible(step) {
 }
 function StepperBar(_a) {
     var _b, _c;
-    var styles = _a.styles, stepConfigs = _a.stepConfigs, stepKey = _a.stepKey, _d = _a.textPlacement, textPlacement = _d === void 0 ? 'bottom' : _d, onStepClick = _a.onStepClick, _e = _a.allowAllNavigation, allowAllNavigation = _e === void 0 ? false : _e, _f = _a.vertical, vertical = _f === void 0 ? false : _f, style = _a.style;
+    var _d;
+    var styles = _a.styles, stepConfigs = _a.stepConfigs, stepKey = _a.stepKey, _e = _a.textPlacement, textPlacement = _e === void 0 ? 'bottom' : _e, onStepClick = _a.onStepClick, _f = _a.allowAllNavigation, allowAllNavigation = _f === void 0 ? false : _f, _g = _a.vertical, vertical = _g === void 0 ? false : _g, style = _a.style;
     var barStyles = styles.getTarget('bar');
     var showLabels = textPlacement !== 'none';
     var visibleStepConfigs = stepConfigs.filter(isStepVisible);
@@ -50263,10 +50356,16 @@ function StepperBar(_a) {
     var activeStep = stepKey
         ? Math.max(0, visibleStepConfigs.findIndex(function (s) { return s.step_key === stepKey; }))
         : 0;
+    var completedStepKeys = getCompletedStepKeys();
     var mainDim = vertical ? 'height' : 'width';
     var crossAlign = vertical ? 'alignItems' : 'justifyContent';
+    // Halo around the active step's circle so it reads as the current step even
+    // though it shares the filled bar color with completed steps.
+    var activeRingColor = (_d = barStyles.backgroundColor) !== null && _d !== void 0 ? _d : '#888';
     var circleStyleFor = function (isCompleted, isActive) {
-        if (isActive || isCompleted)
+        if (isActive)
+            return exports.__assign(exports.__assign({}, barStyles), { color: '#fff', boxShadow: "0 0 0 2px #fff, 0 0 0 4px ".concat(activeRingColor) });
+        if (isCompleted)
             return exports.__assign(exports.__assign({}, barStyles), { color: '#fff' });
         return { backgroundColor: '#e9ecef', color: '#888' };
     };
@@ -50276,10 +50375,13 @@ function StepperBar(_a) {
     var renderNodes = function () {
         return steps.map(function (_, index) {
             var _a;
-            var isCompleted = index < activeStep;
             var isActive = index === activeStep;
             var isLast = index === steps.length - 1;
             var sKey = (_a = visibleStepConfigs === null || visibleStepConfigs === void 0 ? void 0 : visibleStepConfigs[index]) === null || _a === void 0 ? void 0 : _a.step_key;
+            // A step is completed only if it was actually submitted. Steps skipped
+            // over (navigated past without submitting) stay uncompleted even when
+            // they sit behind the current step.
+            var isCompleted = !!sKey && completedStepKeys.has(sKey);
             // With all-step navigation on, any step other than the current one is
             // clickable; otherwise only completed (already-visited) steps are.
             var isClickable = !!onStepClick &&
@@ -50299,7 +50401,9 @@ function StepperBar(_a) {
                     marginLeft: "".concat(CONNECTOR_GAP, "px"),
                     marginRight: "".concat(CONNECTOR_GAP, "px")
                 };
-            return (jsxs(React.Fragment, { children: [jsx$1("div", exports.__assign({ css: exports.__assign({ width: "".concat(CIRCLE_SIZE, "px"), height: "".concat(CIRCLE_SIZE, "px"), borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '13px', fontWeight: 600, flexShrink: 0, cursor: isClickable ? 'pointer' : 'default', transition: 'opacity 0.15s ease', '&:hover': isClickable ? { opacity: 0.7 } : {} }, circleStyleFor(isCompleted, isActive)), onClick: isClickable ? function () { return onStepClick(sKey); } : undefined }, { children: circleContent(isCompleted, index) })), !isLast && (jsx$1("div", { css: exports.__assign(exports.__assign({}, connectorStyle), (isCompleted ? barStyles : { backgroundColor: '#e9ecef' })) }))] }, index));
+            return (jsxs(React.Fragment, { children: [jsx$1("div", exports.__assign({ css: exports.__assign({ width: "".concat(CIRCLE_SIZE, "px"), height: "".concat(CIRCLE_SIZE, "px"), borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '13px', fontWeight: 600, flexShrink: 0, cursor: isClickable ? 'pointer' : 'default', transition: 'opacity 0.15s ease', '&:hover': isClickable ? { opacity: 0.7 } : {} }, circleStyleFor(isCompleted, isActive)), onClick: isClickable ? function () { return onStepClick(sKey); } : undefined }, { children: circleContent(isCompleted && !isActive, index) })), !isLast && (jsx$1("div", { css: exports.__assign(exports.__assign({}, connectorStyle), (index < activeStep
+                            ? barStyles
+                            : { backgroundColor: '#e9ecef' })) }))] }, index));
         });
     };
     var renderLabelItems = function () {
@@ -50355,25 +50459,30 @@ function applyProgressBarStyles(responsiveStyles) {
 }
 function ProgressBarElement(_a) {
     var _b, _c, _d, _e, _f, _g;
-    var element = _a.element, responsiveStyles = _a.responsiveStyles, progress = _a.progress, _h = _a.curDepth, curDepth = _h === void 0 ? 1 : _h, _j = _a.maxDepth, maxDepth = _j === void 0 ? 1 : _j, stepKey = _a.stepKey, changeStep = _a.changeStep, runElementActions = _a.runElementActions, _k = _a.elementProps, elementProps = _k === void 0 ? {} : _k, children = _a.children;
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, progress = _a.progress, _h = _a.curDepth, curDepth = _h === void 0 ? 1 : _h, _j = _a.maxDepth, maxDepth = _j === void 0 ? 1 : _j, stepKey = _a.stepKey, runElementActions = _a.runElementActions, client = _a.client, _k = _a.elementProps, elementProps = _k === void 0 ? {} : _k, children = _a.children;
     var styles = React.useMemo(function () { return applyProgressBarStyles(responsiveStyles); }, [responsiveStyles]);
+    var _l = __read(React.useReducer(function (x) { return x + 1; }, 0), 2), rerender = _l[1];
+    var isStepper = !!((_b = element.properties) === null || _b === void 0 ? void 0 : _b.stepper);
+    // Fetch prior step completion the first time a stepper renders (deduped per
+    // form inside loadCompletedSteps), then re-render this stepper to show it
+    React.useEffect(function () {
+        if (isStepper)
+            loadCompletedSteps(client).then(function () { return rerender(); });
+    }, [isStepper]);
     var vertical = element.styles.bar_direction === 'vertical';
     var containerProps = exports.__assign({ css: exports.__assign(exports.__assign({ display: 'flex', flexDirection: 'column', position: 'relative', width: '100%' }, (vertical && { height: '100%' })), styles.getTarget('barContainer')) }, elementProps);
-    if ((_b = element.properties) === null || _b === void 0 ? void 0 : _b.stepper) {
-        // When navigation to all steps is enabled, clicking a step validates and
-        // submits the current step before navigating to the clicked step; otherwise
-        // only already-visited steps are clickable and navigation happens directly.
+    if (isStepper) {
+        // Clicking a step navigates to it via a NEXT action. When navigation to all
+        // steps is enabled, the current step is validated & submitted first;
+        // otherwise only already-visited steps are clickable
         var allowAllNavigation = !!((_c = element.properties) === null || _c === void 0 ? void 0 : _c.navigate_to_all_steps);
-        var onStepClick = allowAllNavigation
-            ? function (targetStepKey) {
-                return runElementActions({
-                    element: element,
-                    elementType: 'progress_bar',
-                    actions: [{ type: ACTION_NEXT, next_step_key: targetStepKey }],
-                    submit: true
-                });
-            }
-            : changeStep;
+        var onStepClick = function (targetStepKey) {
+            return runElementActions({
+                element: element,
+                elementType: 'progress_bar',
+                actions: [{ type: ACTION_NEXT, next_step_key: targetStepKey }]
+            });
+        };
         return (jsxs("div", exports.__assign({}, containerProps, { children: [children, jsx$1(StepperBar, { styles: styles, stepConfigs: (_e = (_d = element.properties) === null || _d === void 0 ? void 0 : _d.stepper_steps) !== null && _e !== void 0 ? _e : [], stepKey: stepKey, textPlacement: element.styles.percent_text_layout, onStepClick: onStepClick, allowAllNavigation: allowAllNavigation, vertical: vertical, style: vertical ? { flex: 1 } : undefined })] })));
     }
     var userProgress, userSegments;
@@ -50557,7 +50666,7 @@ function ElementSkeleton(_a) {
 }
 var templateObject_1;
 
-var TableElement = React.lazy(function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "TableElement" */ './fthry_index.OWnm3N9F.js'); }); });
+var TableElement = React.lazy(function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "TableElement" */ './fthry_index.DJzIqovs.js'); }); });
 var Basic = {
     ImageElement: ImageElement,
     VideoElement: VideoElement,

package/cjs/{fthry_index.OWnm3N9F.js → fthry_index.DJzIqovs.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.C5nqE8kC.js');
+var index = require('./fthry_index.Cts348D4.js');
 var React = require('react');
 var ReactDOM = require('react-dom');
 require('react/jsx-runtime');

package/cjs/{fthry_index.BKVCeI8M.js → fthry_index.DMa8KL_d.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.C5nqE8kC.js');
+var index = require('./fthry_index.Cts348D4.js');
 var React = require('react');
 var ReactJSXRuntime = require('react/jsx-runtime');
 require('react-dom/client');

package/cjs/{fthry_index.BfKMhDL9.js → fthry_index.DNNK_WNB.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.C5nqE8kC.js');
+var index = require('./fthry_index.Cts348D4.js');
 var React = require('react');
 require('react/jsx-runtime');
 require('react-dom/client');

package/cjs/{fthry_index.CuRipLlH.js → fthry_index.DQ3tM-b4.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.C5nqE8kC.js');
+var index = require('./fthry_index.Cts348D4.js');
 var React = require('react');
 require('react/jsx-runtime');
 require('react-dom/client');

package/cjs/{fthry_index.x3euiywy.js → fthry_index.DcZhokGw.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./fthry_index.C5nqE8kC.js');
+var index = require('./fthry_index.Cts348D4.js');
 var React = require('react');
-var styles = require('./fthry_styles.Cwk2sjQL.js');
+var styles = require('./fthry_styles.BLUeHaH3.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');

package/cjs/{fthry_index.y4tmJzGh.js → fthry_index.DjWcky2z.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.C5nqE8kC.js');
+var index = require('./fthry_index.Cts348D4.js');
 var React = require('react');
 require('react/jsx-runtime');
 require('react-dom/client');

package/cjs/{fthry_index.ZMlNlPA3.js → fthry_index.DzpicfAn.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./fthry_index.C5nqE8kC.js');
+var index = require('./fthry_index.Cts348D4.js');
 var React = require('react');
-var index$1 = require('./fthry_index.CmrAr3T2.js');
+var index$1 = require('./fthry_index.Wf6EoIZb.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
@@ -1479,7 +1479,7 @@ function SignatureField(_a) {
     React.useEffect(function () {
         if (!global.webfontloaderPromise)
             global.webfontloaderPromise = Promise.resolve().then(function () { return require(
-            /* webpackChunkName: "webfontloader" */ './fthry_webfontloader.BLyUiSYA.js'); }).then(function (n) { return n.webfontloader; });
+            /* webpackChunkName: "webfontloader" */ './fthry_webfontloader.CJNW-DFS.js'); }).then(function (n) { return n.webfontloader; });
         global.webfontloaderPromise.then(function (WebFont) {
             WebFont.load({ google: { families: ['La Belle Aurore'] } });
         });

package/cjs/{fthry_index.BrR9-bMa.js → fthry_index.JJYyApby.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-var index$1 = require('./fthry_index.C5nqE8kC.js');
+var index$1 = require('./fthry_index.Cts348D4.js');
 var React = require('react');
-var Placeholder = require('./fthry_Placeholder.BMypFtTl.js');
-var InlineTooltip = require('./fthry_InlineTooltip.uDegsH9E.js');
-var ShowEyeIcon = require('./fthry_ShowEyeIcon.BkGAa4Ku.js');
+var Placeholder = require('./fthry_Placeholder.BZUp2I1J.js');
+var InlineTooltip = require('./fthry_InlineTooltip.Ddh8_6aY.js');
+var ShowEyeIcon = require('./fthry_ShowEyeIcon.D9DLoHqI.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
 require('react-dom');
-require('./fthry_Overlay.CUcDMC-q.js');
+require('./fthry_Overlay.Bd1qiy6-.js');
 
 function PasswordField(_a) {
     var _b;

package/cjs/{fthry_index.B-UU8i3N.js → fthry_index.LPXprTDf.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./fthry_index.C5nqE8kC.js');
+var index = require('./fthry_index.Cts348D4.js');
 var React = require('react');
-var InlineTooltip = require('./fthry_InlineTooltip.uDegsH9E.js');
-var useSalesforceSync = require('./fthry_useSalesforceSync.CnbWPLV2.js');
+var InlineTooltip = require('./fthry_InlineTooltip.Ddh8_6aY.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.CNNAgWe2.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
 require('react-dom');
-require('./fthry_Overlay.CUcDMC-q.js');
+require('./fthry_Overlay.Bd1qiy6-.js');
 
 function ButtonGroupField(_a) {
     var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, inlineError = _a.inlineError, _b = _a.fieldVal, fieldVal = _b === void 0 ? null : _b, _c = _a.repeatIndex, repeatIndex = _c === void 0 ? null : _c, editMode = _a.editMode, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.elementProps, elementProps = _e === void 0 ? {} : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, children = _a.children;

package/cjs/{fthry_index.DeDGU7A8.js → fthry_index.VXMfU8Ig.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index$1 = require('./fthry_index.C5nqE8kC.js');
+var index$1 = require('./fthry_index.Cts348D4.js');
 var React = require('react');
-var InlineTooltip = require('./fthry_InlineTooltip.uDegsH9E.js');
-var Placeholder$2 = require('./fthry_Placeholder.BMypFtTl.js');
-var useSalesforceSync = require('./fthry_useSalesforceSync.CnbWPLV2.js');
-var Overlay = require('./fthry_Overlay.CUcDMC-q.js');
+var InlineTooltip = require('./fthry_InlineTooltip.Ddh8_6aY.js');
+var Placeholder$2 = require('./fthry_Placeholder.BZUp2I1J.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.CNNAgWe2.js');
+var Overlay = require('./fthry_Overlay.Bd1qiy6-.js');
 var ReactDOM = require('react-dom');
 require('react/jsx-runtime');
 require('react-dom/client');

package/cjs/{fthry_index.CmrAr3T2.js → fthry_index.Wf6EoIZb.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.C5nqE8kC.js');
+var index = require('./fthry_index.Cts348D4.js');
 
 var propTypes = {exports: {}};
 

package/cjs/{fthry_index.Di7Giv3P.js → fthry_index.aU4Q-Vhi.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.C5nqE8kC.js');
+var index = require('./fthry_index.Cts348D4.js');
 var React = require('react');
 require('react/jsx-runtime');
 require('react-dom/client');

package/cjs/{fthry_index.C-vFVU2N.js → fthry_index.l6iPtqf7.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./fthry_index.C5nqE8kC.js');
+var index = require('./fthry_index.Cts348D4.js');
 var React = require('react');
-var styles = require('./fthry_styles.Cwk2sjQL.js');
+var styles = require('./fthry_styles.BLUeHaH3.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');

package/cjs/{fthry_index.BZsqfLAY.js → fthry_index.pmG3XerW.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index$1 = require('./fthry_index.C5nqE8kC.js');
+var index$1 = require('./fthry_index.Cts348D4.js');
 var React = require('react');
-var Placeholder = require('./fthry_Placeholder.BMypFtTl.js');
-var InlineTooltip = require('./fthry_InlineTooltip.uDegsH9E.js');
-var Overlay = require('./fthry_Overlay.CUcDMC-q.js');
-var useElementSize = require('./fthry_useElementSize.C3TLx2VP.js');
+var Placeholder = require('./fthry_Placeholder.BZUp2I1J.js');
+var InlineTooltip = require('./fthry_InlineTooltip.Ddh8_6aY.js');
+var Overlay = require('./fthry_Overlay.Bd1qiy6-.js');
+var useElementSize = require('./fthry_useElementSize.B4RuT8C5.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
@@ -1804,7 +1804,7 @@ function PhoneField(_a) {
             // origins. The .woff2 is vendored from country-flag-emoji-polyfill and
             // emitted as a sibling asset by webpack/rollup; `new URL(...,
             // import.meta.url)` resolves it relative to wherever the bundle is served.
-            var fontUrl = new URL('./TwemojiCountryFlags.woff2', (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('fthry_index.BZsqfLAY.js', document.baseURI).href)))
+            var fontUrl = new URL('./TwemojiCountryFlags.woff2', (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('fthry_index.pmG3XerW.js', document.baseURI).href)))
                 .href;
             f('Twemoji Country Flags', fontUrl);
         }

package/cjs/{fthry_index.CewNeOjM.js → fthry_index.pqZR4gSb.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index$1 = require('./fthry_index.C5nqE8kC.js');
+var index$1 = require('./fthry_index.Cts348D4.js');
 var React = require('react');
 require('react/jsx-runtime');
 require('react-dom/client');

package/cjs/{fthry_input.CaZ_ApZk.js → fthry_input.C3lHXfth.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./fthry_index.CmrAr3T2.js');
+var index = require('./fthry_index.Wf6EoIZb.js');
 
 /** Checks if value is string */
 function isString(str) {