@feathery/react 2.39.0 → 2.39.1

package/cjs/{fthry_index.CaQDsoPD.js → fthry_index.BL8FLs1p.js}

@@ -21113,7 +21113,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 })));
+        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 })));
     else if (type === 'image')
         return jsx$1(Elements.ImageElement, exports.__assign({}, basicProps));
     else if (type === 'video')
@@ -22195,12 +22195,6 @@ var ShadowDomHtmlContent = function (_a) {
         } }));
 };
 
-/**
- * StyledContainer
- * This component applies all of the style properties to "Containers" which are used
- * around elements and other "Containers". This component is used by both hosted forms
- * and the editor to render "Containers".
- */
 var StyledContainer = React.forwardRef(function (_a, ref) {
     var _b, _c, _d, _e;
     var _node = _a.node, raw = _a.raw, _f = _a.css, css = _f === void 0 ? {} : _f, viewport = _a.viewport, component = _a.component, _children = _a.children, className = _a.className, _g = _a.viewportOnly, viewportOnly = _g === void 0 ? false : _g, _h = _a.editMode, editMode = _h === void 0 ? false : _h, breakpoint = _a.breakpoint, props = __rest$1(_a, ["node", "raw", "css", "viewport", "component", "children", "className", "viewportOnly", "editMode", "breakpoint"]);
@@ -39716,7 +39710,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.L8QqDrZ9.js'); }).then(function (n) { return n.AssistantChat; }); });
+var LazyAssistantChat = React.lazy(function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "AssistantChat" */ './fthry_AssistantChat.DQ0U08nB.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 () {
@@ -46314,9 +46308,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.BUzm9HxD.js'); }).then(function (n) { return n.script; });
+        /* webpackChunkName: "scriptjs" */ './fthry_script.CcpqD6sz.js'); }).then(function (n) { return n.script; });
         global.webfontloaderPromise = Promise.resolve().then(function () { return require(
-        /* webpackChunkName: "webfontloader" */ './fthry_webfontloader.B3eO9SnD.js'); }).then(function (n) { return n.webfontloader; });
+        /* webpackChunkName: "webfontloader" */ './fthry_webfontloader.DQj-dIFN.js'); }).then(function (n) { return n.webfontloader; });
         // Client-side tracking logic
         if (initState.userTracking === 'cookie') {
             var cookieKey = "feathery-user-id-".concat(sdkKey);
@@ -46462,7 +46456,7 @@ function getFieldValues() {
     return exports.__assign({}, exports.fieldValues);
 }
 function logFeatheryBadge() {
-    console.log('%c Feathery %c v' + "2.39.0" + ' ', // replaced with real version during build
+    console.log('%c Feathery %c v' + "2.39.1" + ' ', // 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;');
 }
 
@@ -47977,64 +47971,64 @@ breakpoint) {
 
 var fieldLoaders = {
     AddressLine1: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "AddressField" */ './fthry_index.Bde3s5tl.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "AddressField" */ './fthry_index.CBXhgNiq.js'); });
     },
     ButtonGroupField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "ButtonGroupField" */ './fthry_index.BEpOYeuD.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "ButtonGroupField" */ './fthry_index.0uHTYf8v.js'); });
     },
     CheckboxField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "CheckboxField" */ './fthry_index.DKe_zH6q.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "CheckboxField" */ './fthry_index.BTKHmnww.js'); });
     },
     CheckboxGroupField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "CheckboxGroupField" */ './fthry_index.BxTMSKYR.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "CheckboxGroupField" */ './fthry_index.C9MjO1_2.js'); });
     },
     ColorPickerField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "ColorPickerField" */ './fthry_index.Ca9y1U8W.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "ColorPickerField" */ './fthry_index.ZWEzxCxs.js'); });
     },
     CustomField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "CustomField" */ './fthry_index.IxpG538L.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "CustomField" */ './fthry_index.bd_dascE.js'); });
     },
     DateSelectorField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "DateSelectorField" */ './fthry_index.CznkErSr.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "DateSelectorField" */ './fthry_index.Bxvep-HH.js'); });
     },
     DropdownField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "DropdownField" */ './fthry_index.YyKms2Ty.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "DropdownField" */ './fthry_index.EDEcZRri.js'); });
     },
     DropdownMultiField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "DropdownMultiField" */ './fthry_index.BBz67wEv.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "DropdownMultiField" */ './fthry_index.C4fLOWzK.js'); });
     },
     FileUploadField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "FileUploadField" */ './fthry_index.xHwcINEA.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "FileUploadField" */ './fthry_index.2hec0Cyq.js'); });
     },
     MatrixField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "MatrixField" */ './fthry_index.DYCg5RsQ.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "MatrixField" */ './fthry_index.SCbU_F4C.js'); });
     },
     PasswordField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "PasswordField" */ './fthry_index.CLqeg1q-.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "PasswordField" */ './fthry_index.BvEoZLvr.js'); });
     },
     PaymentMethodField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "PaymentMethodField" */ './fthry_PaymentMethodField.B4dRDX90.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "PaymentMethodField" */ './fthry_PaymentMethodField.BCfRfF5k.js'); });
     },
-    PhoneField: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "PhoneField" */ './fthry_index.C7zyqnbf.js'); }); },
+    PhoneField: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "PhoneField" */ './fthry_index.iOhM0yii.js'); }); },
     PinInputField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "PinInputField" */ './fthry_index.TVlALn4r.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "PinInputField" */ './fthry_index.-lo4kt_U.js'); });
     },
-    QRScanner: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "QRScanner" */ './fthry_index.B9CMlFfK.js'); }); },
+    QRScanner: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "QRScanner" */ './fthry_index.DpAKJ8nY.js'); }); },
     RadioButtonGroupField: function () {
         return Promise.resolve().then(function () { return require(
-        /* webpackChunkName: "RadioButtonGroupField" */ './fthry_index.qxBbMcVu.js'); });
+        /* webpackChunkName: "RadioButtonGroupField" */ './fthry_index.hZwAxt4e.js'); });
     },
     RatingField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "RatingField" */ './fthry_index.Dly0rruo.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "RatingField" */ './fthry_index.D92_iqxj.js'); });
     },
     SignatureField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "SignatureField" */ './fthry_index.BwxSWwJZ.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "SignatureField" */ './fthry_index.KsIR58CL.js'); });
     },
     SliderField: function () {
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "SliderField" */ './fthry_index.D7IlFInQ.js'); });
+        return Promise.resolve().then(function () { return require(/* webpackChunkName: "SliderField" */ './fthry_index.Cc253N4g.js'); });
     },
-    TextField: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "TextField" */ './fthry_index.7DwrYriA.js'); }); },
-    TextArea: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "TextArea" */ './fthry_index.Dl1GeWM6.js'); }); }
+    TextField: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "TextField" */ './fthry_index.DRJnbdgq.js'); }); },
+    TextArea: function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "TextArea" */ './fthry_index.Bqr-JETA.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
@@ -48892,33 +48886,121 @@ function ButtonElement(_a) {
 
 var formerProgress;
 function SmoothBar(_a) {
-    var styles = _a.styles, percent = _a.percent;
-    var _b = __read(React.useState(formerProgress), 2), curProgress = _b[0], setCurProgress = _b[1];
+    var _b, _c;
+    var styles = _a.styles, percent = _a.percent, _d = _a.vertical, vertical = _d === void 0 ? false : _d;
+    var _e = __read(React.useState(formerProgress), 2), curProgress = _e[0], setCurProgress = _e[1];
     React.useEffect(function () {
-        // This allows the user to see a smooth progress bar animation from former progress amount to current amount
         if (percent !== curProgress) {
             setCurProgress(percent);
             formerProgress = percent;
         }
     }, [percent]);
-    return (jsx$1("div", exports.__assign({ css: exports.__assign({ height: '0.4rem', width: '100%', borderRadius: 0, display: 'flex', backgroundColor: '#e9ecef' }, styles.getTarget('barWrapper')) }, { children: jsx$1("div", { style: { width: "".concat(curProgress, "%") }, css: exports.__assign(exports.__assign({ transition: 'width 0.6s ease' }, styles.getTarget('barWrapper', true)), styles.getTarget('bar')) }) })));
+    var mainDim = vertical ? 'height' : 'width';
+    var crossDim = vertical ? 'width' : 'height';
+    return (jsx$1("div", exports.__assign({ css: exports.__assign((_b = {}, _b[crossDim] = '0.4rem', _b[mainDim] = '100%', _b.flexDirection = vertical ? 'column-reverse' : undefined, _b.borderRadius = 0, _b.display = 'flex', _b.backgroundColor = '#e9ecef', _b), styles.getTarget('barWrapper')) }, { children: jsx$1("div", { style: (_c = {}, _c[mainDim] = "".concat(curProgress, "%"), _c), css: exports.__assign(exports.__assign({ transition: "".concat(mainDim, " 0.6s ease") }, styles.getTarget('barWrapper', true)), styles.getTarget('bar')) }) })));
 }
 
 function SegmentBar(_a) {
-    var styles = _a.styles, percent = _a.percent, numSegments = _a.numSegments;
+    var _b, _c;
+    var styles = _a.styles, percent = _a.percent, numSegments = _a.numSegments, _d = _a.vertical, vertical = _d === void 0 ? false : _d;
+    var mainDim = vertical ? 'height' : 'width';
+    var crossDim = vertical ? 'width' : 'height';
+    var spacerProp = vertical ? 'marginBottom' : 'marginRight';
     var numFilled = Math.floor(percent / (100 / numSegments));
     var filledSegments = [];
     for (var i = 0; i < numFilled; i++) {
         var spacer = i === numSegments - 1 ? 0 : 5;
-        filledSegments.push(jsx$1("div", { css: exports.__assign(exports.__assign({ width: "calc(".concat(100 / numSegments, "% - ").concat(spacer, "px)"), marginRight: "".concat(spacer, "px"), borderRadius: '2px' }, styles.getTarget('barWrapper', true)), styles.getTarget('bar')) }, i));
+        filledSegments.push(jsx$1("div", { css: exports.__assign(exports.__assign((_b = {}, _b[mainDim] = "calc(".concat(100 / numSegments, "% - ").concat(spacer, "px)"), _b[spacerProp] = "".concat(spacer, "px"), _b.borderRadius = '2px', _b), styles.getTarget('barWrapper', true)), styles.getTarget('bar')) }, i));
     }
-    return (jsx$1("div", exports.__assign({ style: {
-            height: '0.4rem',
-            width: '100%',
-            display: 'flex',
-            backgroundColor: '#e9ecef',
-            borderRadius: '2px'
-        } }, { children: filledSegments })));
+    return (jsx$1("div", exports.__assign({ style: (_c = {},
+            _c[crossDim] = '0.4rem',
+            _c[mainDim] = '100%',
+            _c.flexDirection = vertical ? 'column-reverse' : undefined,
+            _c.display = 'flex',
+            _c.backgroundColor = '#e9ecef',
+            _c.borderRadius = '2px',
+            _c) }, { children: filledSegments })));
+}
+
+var CIRCLE_SIZE = 28;
+var CONNECTOR_GAP = 6;
+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.vertical, vertical = _e === void 0 ? false : _e, style = _a.style;
+    var barStyles = styles.getTarget('bar');
+    var showLabels = textPlacement !== 'none';
+    var steps = stepConfigs.map(function (s) { return s.label; });
+    var activeStep = stepKey
+        ? Math.max(0, stepConfigs.findIndex(function (s) { return s.step_key === stepKey; }))
+        : 0;
+    var mainDim = vertical ? 'height' : 'width';
+    var crossAlign = vertical ? 'alignItems' : 'justifyContent';
+    var circleStyleFor = function (isCompleted, isActive) {
+        if (isActive || isCompleted)
+            return exports.__assign(exports.__assign({}, barStyles), { color: '#fff' });
+        return { backgroundColor: '#e9ecef', color: '#888' };
+    };
+    var circleContent = function (isCompleted, index) {
+        return isCompleted ? (jsx$1("svg", exports.__assign({ width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2.5', strokeLinecap: 'round', strokeLinejoin: 'round' }, { children: jsx$1("polyline", { points: '20 6 9 17 4 12' }) }))) : (index + 1);
+    };
+    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 = stepConfigs === null || stepConfigs === void 0 ? void 0 : stepConfigs[index]) === null || _a === void 0 ? void 0 : _a.step_key;
+            var isClickable = isCompleted && !!onStepClick && !!sKey;
+            var connectorStyle = vertical
+                ? {
+                    width: '2px',
+                    flex: 1,
+                    marginTop: "".concat(CONNECTOR_GAP, "px"),
+                    marginBottom: "".concat(CONNECTOR_GAP, "px")
+                }
+                : {
+                    flex: 1,
+                    height: '2px',
+                    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));
+        });
+    };
+    var renderLabelItems = function () {
+        return steps.map(function (label, index) {
+            var _a;
+            var isLast = index === steps.length - 1;
+            return (jsxs(React.Fragment, { children: [jsx$1("div", exports.__assign({ style: (_a = {},
+                            _a[mainDim] = "".concat(CIRCLE_SIZE, "px"),
+                            _a.display = 'flex',
+                            _a[crossAlign] = 'center',
+                            _a.flexShrink = 0,
+                            _a) }, { children: jsx$1("span", exports.__assign({ css: exports.__assign(exports.__assign({ fontSize: '12px', whiteSpace: 'nowrap' }, (vertical ? {} : { textAlign: 'center' })), styles.getTarget('barContainer')) }, { children: label })) })), !isLast && (jsx$1("div", { style: exports.__assign({ flex: 1 }, (vertical
+                            ? {
+                                marginTop: "".concat(CONNECTOR_GAP, "px"),
+                                marginBottom: "".concat(CONNECTOR_GAP, "px")
+                            }
+                            : {
+                                marginLeft: "".concat(CONNECTOR_GAP, "px"),
+                                marginRight: "".concat(CONNECTOR_GAP, "px")
+                            })) }))] }, index));
+        });
+    };
+    if (vertical) {
+        // textPlacement 'bottom' → labels on left, 'top' → labels on right
+        var labelsOnLeft = textPlacement === 'bottom';
+        return (jsxs("div", exports.__assign({ style: exports.__assign({ display: 'flex', flexDirection: labelsOnLeft ? 'row-reverse' : 'row', height: '100%', gap: showLabels ? '10px' : '0' }, style) }, { children: [jsx$1("div", exports.__assign({ style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        width: "".concat(CIRCLE_SIZE, "px")
+                    } }, { children: renderNodes() })), showLabels && (jsx$1("div", exports.__assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: renderLabelItems() })))] })));
+    }
+    // Horizontal layout
+    var labelsOnTop = textPlacement === 'top';
+    var marginProp = labelsOnTop ? 'marginBottom' : 'marginTop';
+    return (jsxs("div", exports.__assign({ style: { display: 'flex', flexDirection: 'column', width: '100%' } }, { children: [showLabels && labelsOnTop && (jsx$1("div", exports.__assign({ style: (_b = { display: 'flex' }, _b[marginProp] = '6px', _b) }, { children: renderLabelItems() }))), jsx$1("div", exports.__assign({ style: { display: 'flex', alignItems: 'center' } }, { children: renderNodes() })), showLabels && !labelsOnTop && (jsx$1("div", exports.__assign({ style: (_c = { display: 'flex' }, _c[marginProp] = '6px', _c) }, { children: renderLabelItems() })))] })));
 }
 
 function applyProgressBarStyles(responsiveStyles) {
@@ -48937,9 +49019,14 @@ function applyProgressBarStyles(responsiveStyles) {
     return responsiveStyles;
 }
 function ProgressBarElement(_a) {
-    var _b, _c;
-    var element = _a.element, responsiveStyles = _a.responsiveStyles, progress = _a.progress, _d = _a.curDepth, curDepth = _d === void 0 ? 1 : _d, _e = _a.maxDepth, maxDepth = _e === void 0 ? 1 : _e, _f = _a.elementProps, elementProps = _f === void 0 ? {} : _f, children = _a.children;
+    var _b, _c, _d, _e, _f;
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, progress = _a.progress, _g = _a.curDepth, curDepth = _g === void 0 ? 1 : _g, _h = _a.maxDepth, maxDepth = _h === void 0 ? 1 : _h, stepKey = _a.stepKey, changeStep = _a.changeStep, _j = _a.elementProps, elementProps = _j === void 0 ? {} : _j, children = _a.children;
     var styles = React.useMemo(function () { return applyProgressBarStyles(responsiveStyles); }, [responsiveStyles]);
+    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) {
+        return (jsxs("div", exports.__assign({}, containerProps, { children: [children, jsx$1(StepperBar, { styles: styles, stepConfigs: (_d = (_c = element.properties) === null || _c === void 0 ? void 0 : _c.stepper_steps) !== null && _d !== void 0 ? _d : [], stepKey: stepKey, textPlacement: element.styles.percent_text_layout, onStepClick: changeStep, vertical: vertical, style: vertical ? { flex: 1 } : undefined })] })));
+    }
     var userProgress, userSegments;
     if (![null, undefined].includes(progress)) {
         if (typeof progress === 'number') {
@@ -48947,25 +49034,34 @@ function ProgressBarElement(_a) {
         }
         else {
             userProgress = progress.progress;
-            userSegments = (_b = progress.segments) !== null && _b !== void 0 ? _b : element.properties.num_segments;
+            userSegments = (_e = progress.segments) !== null && _e !== void 0 ? _e : element.properties.num_segments;
         }
     }
-    userProgress = userProgress !== null && userProgress !== void 0 ? userProgress : (_c = element.properties) === null || _c === void 0 ? void 0 : _c.progress;
+    userProgress = userProgress !== null && userProgress !== void 0 ? userProgress : (_f = element.properties) === null || _f === void 0 ? void 0 : _f.progress;
     var percent = isNum(userProgress)
         ? userProgress
         : Math.round((100 * (curDepth + 1)) / ((maxDepth || 1) + 1));
+    var textPlacement = element.styles.percent_text_layout;
+    var showText = textPlacement && textPlacement !== 'none';
     var BarComponent = userSegments ? SegmentBar : SmoothBar;
     var progressBarElements = [
-        jsx$1(BarComponent, { styles: styles, percent: percent, numSegments: userSegments }, 'progress')
+        jsx$1(BarComponent, { styles: styles, percent: percent, numSegments: userSegments, vertical: vertical }, 'progress')
     ];
-    var completionPercentage = (jsx$1("div", exports.__assign({ style: { width: '100%', textAlign: 'center' } }, { children: "".concat(percent, "% completed") }), 'completionPercentage'));
-    if (element.styles.percent_text_layout === 'top') {
+    var completionPercentage = vertical ? (jsx$1("div", exports.__assign({ style: {
+            display: 'flex',
+            alignItems: 'center',
+            padding: '0 8px',
+            whiteSpace: 'nowrap'
+        } }, { children: "".concat(percent, "% completed") }), 'completionPercentage')) : (jsx$1("div", exports.__assign({ style: { width: '100%', textAlign: 'center' } }, { children: "".concat(percent, "% completed") }), 'completionPercentage'));
+    if (textPlacement === 'top') {
         progressBarElements.unshift(completionPercentage);
     }
-    else if (element.styles.percent_text_layout === 'bottom') {
+    else if (textPlacement === 'bottom') {
         progressBarElements.push(completionPercentage);
     }
-    return (jsxs("div", exports.__assign({ css: exports.__assign({ display: 'flex', flexDirection: 'column', position: 'relative', width: '100%' }, styles.getTarget('barContainer')) }, elementProps, { children: [children, progressBarElements] })));
+    // When vertical with text beside the bar, switch to row layout
+    var flexDirection = vertical && showText ? 'row' : 'column';
+    return (jsxs("div", exports.__assign({}, containerProps, { css: exports.__assign(exports.__assign({}, containerProps.css), { flexDirection: flexDirection }) }, { children: [children, progressBarElements] })));
 }
 
 var shimmerFields = [
@@ -49112,7 +49208,7 @@ function ElementSkeleton(_a) {
 }
 var templateObject_1;
 
-var TableElement = React.lazy(function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "TableElement" */ './fthry_index.fFWtGd8u.js'); }); });
+var TableElement = React.lazy(function () { return Promise.resolve().then(function () { return require(/* webpackChunkName: "TableElement" */ './fthry_index.nVNuvtTk.js'); }); });
 var Basic = {
     ImageElement: ImageElement,
     VideoElement: VideoElement,

package/cjs/{fthry_index.BVr4Lcyo.js → fthry_index.BO0ubvlf.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.CaQDsoPD.js');
+var index = require('./fthry_index.BL8FLs1p.js');
 
 var ae = [
     { name: 'Abu Dhabi', code: 'AZ' },

package/cjs/{fthry_index.DKe_zH6q.js → fthry_index.BTKHmnww.js}

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

package/cjs/{fthry_index.Dl1GeWM6.js → fthry_index.Bqr-JETA.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var index$1 = require('./fthry_index.CaQDsoPD.js');
+var index$1 = require('./fthry_index.BL8FLs1p.js');
 var React = require('react');
-var Placeholder = require('./fthry_Placeholder.DWR5nO5t.js');
-var InlineTooltip = require('./fthry_InlineTooltip.CHwGV2ye.js');
+var Placeholder = require('./fthry_Placeholder.DEc4QJJ4.js');
+var InlineTooltip = require('./fthry_InlineTooltip.Di8A8FHv.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
 require('react-dom');
-require('./fthry_Overlay.BApTL35K.js');
+require('./fthry_Overlay.Da9Aifek.js');
 
 function TextArea(_a) {
     var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _b = _a.elementProps, elementProps = _b === void 0 ? {} : _b, _c = _a.required, required = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, editMode = _a.editMode, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, _f = _a.setRef, setRef = _f === void 0 ? function () { } : _f, _g = _a.rawValue, rawValue = _g === void 0 ? '' : _g, inlineError = _a.inlineError, _h = _a.repeatIndex, repeatIndex = _h === void 0 ? null : _h, children = _a.children;

package/cjs/{fthry_index.CLqeg1q-.js → fthry_index.BvEoZLvr.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-var index$1 = require('./fthry_index.CaQDsoPD.js');
+var index$1 = require('./fthry_index.BL8FLs1p.js');
 var React = require('react');
-var Placeholder = require('./fthry_Placeholder.DWR5nO5t.js');
-var InlineTooltip = require('./fthry_InlineTooltip.CHwGV2ye.js');
-var ShowEyeIcon = require('./fthry_ShowEyeIcon.CrWpuKPG.js');
+var Placeholder = require('./fthry_Placeholder.DEc4QJJ4.js');
+var InlineTooltip = require('./fthry_InlineTooltip.Di8A8FHv.js');
+var ShowEyeIcon = require('./fthry_ShowEyeIcon.DUuKQNq7.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
 require('react-dom');
-require('./fthry_Overlay.BApTL35K.js');
+require('./fthry_Overlay.Da9Aifek.js');
 
 function PasswordField(_a) {
     var _b;

package/cjs/{fthry_index.CznkErSr.js → fthry_index.Bxvep-HH.js}

@@ -1,17 +1,17 @@
 'use strict';
 
-var index$3 = require('./fthry_index.CaQDsoPD.js');
+var index$3 = require('./fthry_index.BL8FLs1p.js');
 var React = require('react');
-var Placeholder = require('./fthry_Placeholder.DWR5nO5t.js');
-var InlineTooltip = require('./fthry_InlineTooltip.CHwGV2ye.js');
+var Placeholder = require('./fthry_Placeholder.DEc4QJJ4.js');
+var InlineTooltip = require('./fthry_InlineTooltip.Di8A8FHv.js');
 var clsx = require('./fthry_clsx.BtxeOLZW.js');
 var ReactJSXRuntime = require('react/jsx-runtime');
 var ReactDOM = require('react-dom');
-var input = require('./fthry_input.C-RhGr8Z.js');
+var input = require('./fthry_input.Cem2OoEV.js');
 require('react-dom/client');
 require('jszip');
-require('./fthry_Overlay.BApTL35K.js');
-require('./fthry_index.Bq4ONiuv.js');
+require('./fthry_Overlay.Da9Aifek.js');
+require('./fthry_index.CIczM5LF.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);

package/cjs/{fthry_index.BBz67wEv.js → fthry_index.C4fLOWzK.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index$1 = require('./fthry_index.CaQDsoPD.js');
+var index$1 = require('./fthry_index.BL8FLs1p.js');
 var React = require('react');
-var InlineTooltip = require('./fthry_InlineTooltip.CHwGV2ye.js');
-var Placeholder$2 = require('./fthry_Placeholder.DWR5nO5t.js');
-var useSalesforceSync = require('./fthry_useSalesforceSync.BYr2Zkyy.js');
-var Overlay = require('./fthry_Overlay.BApTL35K.js');
+var InlineTooltip = require('./fthry_InlineTooltip.Di8A8FHv.js');
+var Placeholder$2 = require('./fthry_Placeholder.DEc4QJJ4.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.Bb_ko1ft.js');
+var Overlay = require('./fthry_Overlay.Da9Aifek.js');
 var ReactDOM = require('react-dom');
 require('react/jsx-runtime');
 require('react-dom/client');

package/cjs/{fthry_index.BxTMSKYR.js → fthry_index.C9MjO1_2.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var index$1 = require('./fthry_index.CaQDsoPD.js');
+var index$1 = require('./fthry_index.BL8FLs1p.js');
 var React = require('react');
-var FormControl = require('./fthry_FormControl.B6IeQ4Ds.js');
-var index = require('./fthry_index.DKe_zH6q.js');
-var InlineTooltip = require('./fthry_InlineTooltip.CHwGV2ye.js');
-var useSalesforceSync = require('./fthry_useSalesforceSync.BYr2Zkyy.js');
+var FormControl = require('./fthry_FormControl.CGLQxWcB.js');
+var index = require('./fthry_index.BTKHmnww.js');
+var InlineTooltip = require('./fthry_InlineTooltip.Di8A8FHv.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.Bb_ko1ft.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
 require('react-dom');
-require('./fthry_Overlay.BApTL35K.js');
+require('./fthry_Overlay.Da9Aifek.js');
 
 var applyCheckboxGroupStyles = function (element, responsiveStyles) {
     responsiveStyles.addTargets('checkboxGroup');

package/cjs/{fthry_index.Bde3s5tl.js → fthry_index.CBXhgNiq.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index$1 = require('./fthry_index.CaQDsoPD.js');
+var index$1 = require('./fthry_index.BL8FLs1p.js');
 var React = require('react');
-var Placeholder = require('./fthry_Placeholder.DWR5nO5t.js');
-var InlineTooltip = require('./fthry_InlineTooltip.CHwGV2ye.js');
-var Overlay = require('./fthry_Overlay.BApTL35K.js');
-var useElementSize = require('./fthry_useElementSize.7Vh9Fjsi.js');
+var Placeholder = require('./fthry_Placeholder.DEc4QJJ4.js');
+var InlineTooltip = require('./fthry_InlineTooltip.Di8A8FHv.js');
+var Overlay = require('./fthry_Overlay.Da9Aifek.js');
+var useElementSize = require('./fthry_useElementSize.BTm7mSxv.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');

package/cjs/{fthry_index.Bq4ONiuv.js → fthry_index.CIczM5LF.js}

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

package/cjs/{fthry_index.D7IlFInQ.js → fthry_index.Cc253N4g.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./fthry_index.CaQDsoPD.js');
+var index = require('./fthry_index.BL8FLs1p.js');
 var React = require('react');
-var styles = require('./fthry_styles.BD-5zYX4.js');
+var styles = require('./fthry_styles.C570g4Qk.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');

package/cjs/{fthry_index.Dly0rruo.js → fthry_index.D92_iqxj.js}

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

package/cjs/{fthry_index.7DwrYriA.js → fthry_index.DRJnbdgq.js}

@@ -1,18 +1,18 @@
 'use strict';
 
-var index$1 = require('./fthry_index.CaQDsoPD.js');
+var index$1 = require('./fthry_index.BL8FLs1p.js');
 var React = require('react');
-var Placeholder = require('./fthry_Placeholder.DWR5nO5t.js');
-var InlineTooltip = require('./fthry_InlineTooltip.CHwGV2ye.js');
-var Overlay = require('./fthry_Overlay.BApTL35K.js');
-var useElementSize = require('./fthry_useElementSize.7Vh9Fjsi.js');
-var ShowEyeIcon = require('./fthry_ShowEyeIcon.CrWpuKPG.js');
-var input = require('./fthry_input.C-RhGr8Z.js');
+var Placeholder = require('./fthry_Placeholder.DEc4QJJ4.js');
+var InlineTooltip = require('./fthry_InlineTooltip.Di8A8FHv.js');
+var Overlay = require('./fthry_Overlay.Da9Aifek.js');
+var useElementSize = require('./fthry_useElementSize.BTm7mSxv.js');
+var ShowEyeIcon = require('./fthry_ShowEyeIcon.DUuKQNq7.js');
+var input = require('./fthry_input.Cem2OoEV.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
 require('react-dom');
-require('./fthry_index.Bq4ONiuv.js');
+require('./fthry_index.CIczM5LF.js');
 
 function TextAutocomplete$1(_a) {
     var _b = _a.allOptions, allOptions = _b === void 0 ? [] : _b, showOptions = _a.showOptions, _c = _a.onSelect, onSelect = _c === void 0 ? function () { } : _c, _d = _a.onHide, onHide = _d === void 0 ? function () { } : _d, _e = _a.onInputFocus, onInputFocus = _e === void 0 ? function () { } : _e, _f = _a.value, value = _f === void 0 ? '' : _f, containerRef = _a.containerRef, responsiveStyles = _a.responsiveStyles, listItemRef = _a.listItemRef, children = _a.children;

package/cjs/{fthry_index.B9CMlFfK.js → fthry_index.DpAKJ8nY.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./fthry_index.CaQDsoPD.js');
+var index = require('./fthry_index.BL8FLs1p.js');
 var React = require('react');
-var styles = require('./fthry_styles.BD-5zYX4.js');
+var styles = require('./fthry_styles.C570g4Qk.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');

package/cjs/{fthry_index.YyKms2Ty.js → fthry_index.EDEcZRri.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./fthry_index.CaQDsoPD.js');
+var index = require('./fthry_index.BL8FLs1p.js');
 var React = require('react');
-var InlineTooltip = require('./fthry_InlineTooltip.CHwGV2ye.js');
-var index$1 = require('./fthry_index.BVr4Lcyo.js');
-var useSalesforceSync = require('./fthry_useSalesforceSync.BYr2Zkyy.js');
+var InlineTooltip = require('./fthry_InlineTooltip.Di8A8FHv.js');
+var index$1 = require('./fthry_index.BO0ubvlf.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.Bb_ko1ft.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
 require('react-dom');
-require('./fthry_Overlay.BApTL35K.js');
+require('./fthry_Overlay.Da9Aifek.js');
 
 function DropdownField(_a) {
     var _b, _c, _d;

package/cjs/{fthry_index.BwxSWwJZ.js → fthry_index.KsIR58CL.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./fthry_index.CaQDsoPD.js');
+var index = require('./fthry_index.BL8FLs1p.js');
 var React = require('react');
-var index$1 = require('./fthry_index.Bq4ONiuv.js');
+var index$1 = require('./fthry_index.CIczM5LF.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.B3eO9SnD.js'); }).then(function (n) { return n.webfontloader; });
+            /* webpackChunkName: "webfontloader" */ './fthry_webfontloader.DQj-dIFN.js'); }).then(function (n) { return n.webfontloader; });
         global.webfontloaderPromise.then(function (WebFont) {
             WebFont.load({ google: { families: ['La Belle Aurore'] } });
         });