@feathery/react 2.39.0 → 2.39.2

package/dist/{fthry_index.DgVE4qW7.js → fthry_index.DeeoucaO.js}

@@ -21092,7 +21092,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, __assign({}, basicProps, { progress: userProgress, curDepth: curDepth, maxDepth: maxDepth })));
+        return (jsx$1(Elements.ProgressBarElement, __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, __assign({}, basicProps));
     else if (type === 'video')
@@ -22174,12 +22174,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 = 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"]);
@@ -39695,7 +39689,7 @@ function useTrackUserInteraction(formRef, activeStep, stepKey, formName) {
     }, [activeStep, stepKey, formName]);
 }
 
-var LazyAssistantChat = lazy(function () { return import(/* webpackChunkName: "AssistantChat" */ './fthry_AssistantChat.B4O7bQrp.js').then(function (n) { return n.A; }); });
+var LazyAssistantChat = lazy(function () { return import(/* webpackChunkName: "AssistantChat" */ './fthry_AssistantChat.884z0Zp7.js').then(function (n) { return n.A; }); });
 var AssistantChat = function (props) { return (jsx$1(Suspense, __assign({ fallback: null }, { children: jsx$1(LazyAssistantChat, __assign({}, props)) }))); };
 
 var AssistantClient = /** @class */ (function () {
@@ -46293,9 +46287,9 @@ function init(sdkKey, options) {
     if (runningInClient()) {
         // Dynamically load libraries that must be client side
         global.scriptjsLoadPromise = import(
-        /* webpackChunkName: "scriptjs" */ './fthry_script.C4MOLOaj.js').then(function (n) { return n.s; });
+        /* webpackChunkName: "scriptjs" */ './fthry_script.6jrHgqMU.js').then(function (n) { return n.s; });
         global.webfontloaderPromise = import(
-        /* webpackChunkName: "webfontloader" */ './fthry_webfontloader.CT2fb2Df.js').then(function (n) { return n.w; });
+        /* webpackChunkName: "webfontloader" */ './fthry_webfontloader.CF84T5ds.js').then(function (n) { return n.w; });
         // Client-side tracking logic
         if (initState.userTracking === 'cookie') {
             var cookieKey = "feathery-user-id-".concat(sdkKey);
@@ -46441,7 +46435,7 @@ function getFieldValues() {
     return __assign({}, 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.2" + ' ', // 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;');
 }
 
@@ -47956,64 +47950,64 @@ breakpoint) {
 
 var fieldLoaders = {
     AddressLine1: function () {
-        return import(/* webpackChunkName: "AddressField" */ './fthry_index.BXAOPQ-N.js');
+        return import(/* webpackChunkName: "AddressField" */ './fthry_index.CCS5seyf.js');
     },
     ButtonGroupField: function () {
-        return import(/* webpackChunkName: "ButtonGroupField" */ './fthry_index.ebPmN15E.js');
+        return import(/* webpackChunkName: "ButtonGroupField" */ './fthry_index.COTa1fqp.js');
     },
     CheckboxField: function () {
-        return import(/* webpackChunkName: "CheckboxField" */ './fthry_index.BK2Hnx9K.js');
+        return import(/* webpackChunkName: "CheckboxField" */ './fthry_index.CTKw49iT.js');
     },
     CheckboxGroupField: function () {
-        return import(/* webpackChunkName: "CheckboxGroupField" */ './fthry_index.DHr6yAT3.js');
+        return import(/* webpackChunkName: "CheckboxGroupField" */ './fthry_index.Diz_2Nyp.js');
     },
     ColorPickerField: function () {
-        return import(/* webpackChunkName: "ColorPickerField" */ './fthry_index.BitwCfs0.js');
+        return import(/* webpackChunkName: "ColorPickerField" */ './fthry_index.BiCTg964.js');
     },
     CustomField: function () {
-        return import(/* webpackChunkName: "CustomField" */ './fthry_index.slanwBPP.js');
+        return import(/* webpackChunkName: "CustomField" */ './fthry_index.B7XCRUoo.js');
     },
     DateSelectorField: function () {
-        return import(/* webpackChunkName: "DateSelectorField" */ './fthry_index.CRbJuR5X.js');
+        return import(/* webpackChunkName: "DateSelectorField" */ './fthry_index.Bc-4LJH9.js');
     },
     DropdownField: function () {
-        return import(/* webpackChunkName: "DropdownField" */ './fthry_index.BFwgxX3L.js');
+        return import(/* webpackChunkName: "DropdownField" */ './fthry_index.DNIBLjwI.js');
     },
     DropdownMultiField: function () {
-        return import(/* webpackChunkName: "DropdownMultiField" */ './fthry_index.CCXpngi5.js');
+        return import(/* webpackChunkName: "DropdownMultiField" */ './fthry_index.CrCg7lJr.js');
     },
     FileUploadField: function () {
-        return import(/* webpackChunkName: "FileUploadField" */ './fthry_index.OjuYAGjs.js');
+        return import(/* webpackChunkName: "FileUploadField" */ './fthry_index.I0vC5XAf.js');
     },
     MatrixField: function () {
-        return import(/* webpackChunkName: "MatrixField" */ './fthry_index.BqX45OG8.js');
+        return import(/* webpackChunkName: "MatrixField" */ './fthry_index.CJOc-fiI.js');
     },
     PasswordField: function () {
-        return import(/* webpackChunkName: "PasswordField" */ './fthry_index.BwsOm7hb.js');
+        return import(/* webpackChunkName: "PasswordField" */ './fthry_index.CzqvVKao.js');
     },
     PaymentMethodField: function () {
-        return import(/* webpackChunkName: "PaymentMethodField" */ './fthry_PaymentMethodField.BiBx9LjH.js');
+        return import(/* webpackChunkName: "PaymentMethodField" */ './fthry_PaymentMethodField.BebObmRD.js');
     },
-    PhoneField: function () { return import(/* webpackChunkName: "PhoneField" */ './fthry_index.DtBZRH06.js'); },
+    PhoneField: function () { return import(/* webpackChunkName: "PhoneField" */ './fthry_index.DPHqqGOo.js'); },
     PinInputField: function () {
-        return import(/* webpackChunkName: "PinInputField" */ './fthry_index.w7Nx6zNo.js');
+        return import(/* webpackChunkName: "PinInputField" */ './fthry_index.C0pEDMdM.js');
     },
-    QRScanner: function () { return import(/* webpackChunkName: "QRScanner" */ './fthry_index.tw8xNWZc.js'); },
+    QRScanner: function () { return import(/* webpackChunkName: "QRScanner" */ './fthry_index.KgxY79Zs.js'); },
     RadioButtonGroupField: function () {
         return import(
-        /* webpackChunkName: "RadioButtonGroupField" */ './fthry_index.W8pRYyDi.js');
+        /* webpackChunkName: "RadioButtonGroupField" */ './fthry_index.B_5l52vt.js');
     },
     RatingField: function () {
-        return import(/* webpackChunkName: "RatingField" */ './fthry_index.CNjt1dpv.js');
+        return import(/* webpackChunkName: "RatingField" */ './fthry_index.YZT4cLIz.js');
     },
     SignatureField: function () {
-        return import(/* webpackChunkName: "SignatureField" */ './fthry_index.DTkLn4V9.js');
+        return import(/* webpackChunkName: "SignatureField" */ './fthry_index.75rkS5d5.js');
     },
     SliderField: function () {
-        return import(/* webpackChunkName: "SliderField" */ './fthry_index.k6djaqmS.js');
+        return import(/* webpackChunkName: "SliderField" */ './fthry_index.BIx1vkLQ.js');
     },
-    TextField: function () { return import(/* webpackChunkName: "TextField" */ './fthry_index.CUa6fIIV.js'); },
-    TextArea: function () { return import(/* webpackChunkName: "TextArea" */ './fthry_index.DUEiyRBT.js'); }
+    TextField: function () { return import(/* webpackChunkName: "TextField" */ './fthry_index.CApxuM0r.js'); },
+    TextArea: function () { return import(/* webpackChunkName: "TextArea" */ './fthry_index.NeC1jkrE.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
@@ -48871,33 +48865,135 @@ function ButtonElement(_a) {
 
 var formerProgress;
 function SmoothBar(_a) {
-    var styles = _a.styles, percent = _a.percent;
-    var _b = __read(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(useState(formerProgress), 2), curProgress = _e[0], setCurProgress = _e[1];
     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", __assign({ css: __assign({ height: '0.4rem', width: '100%', borderRadius: 0, display: 'flex', backgroundColor: '#e9ecef' }, styles.getTarget('barWrapper')) }, { children: jsx$1("div", { style: { width: "".concat(curProgress, "%") }, css: __assign(__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", __assign({ css: __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: __assign(__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: __assign(__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: __assign(__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", __assign({ style: {
-            height: '0.4rem',
-            width: '100%',
-            display: 'flex',
-            backgroundColor: '#e9ecef',
-            borderRadius: '2px'
-        } }, { children: filledSegments })));
+    return (jsx$1("div", __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 isFieldTruthy(fieldKey) {
+    var val = getFieldValues()[fieldKey];
+    if (Array.isArray(val))
+        return val.length > 0;
+    return !!val;
+}
+function isStepVisible(step) {
+    var cond = step.visibility_condition;
+    if (!cond || !step.visibility_field)
+        return true;
+    var truthy = isFieldTruthy(step.visibility_field);
+    return cond === 'show' ? truthy : !truthy;
+}
+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 visibleStepConfigs = stepConfigs.filter(isStepVisible);
+    var steps = visibleStepConfigs.map(function (s) { return s.label; });
+    var activeStep = stepKey
+        ? Math.max(0, visibleStepConfigs.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 __assign(__assign({}, barStyles), { color: '#fff' });
+        return { backgroundColor: '#e9ecef', color: '#888' };
+    };
+    var circleContent = function (isCompleted, index) {
+        return isCompleted ? (jsx$1("svg", __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 = visibleStepConfigs === null || visibleStepConfigs === void 0 ? void 0 : visibleStepConfigs[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__default.Fragment, { children: [jsx$1("div", __assign({ css: __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: __assign(__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__default.Fragment, { children: [jsx$1("div", __assign({ style: (_a = {},
+                            _a[mainDim] = "".concat(CIRCLE_SIZE, "px"),
+                            _a.display = 'flex',
+                            _a[crossAlign] = 'center',
+                            _a.flexShrink = 0,
+                            _a) }, { children: jsx$1("span", __assign({ css: __assign(__assign({ fontSize: '12px', whiteSpace: 'nowrap' }, (vertical ? {} : { textAlign: 'center' })), styles.getTarget('barContainer')) }, { children: label })) })), !isLast && (jsx$1("div", { style: __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", __assign({ style: __assign({ display: 'flex', flexDirection: labelsOnLeft ? 'row-reverse' : 'row', height: '100%', gap: showLabels ? '10px' : '0' }, style) }, { children: [jsx$1("div", __assign({ style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        width: "".concat(CIRCLE_SIZE, "px")
+                    } }, { children: renderNodes() })), showLabels && (jsx$1("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: renderLabelItems() })))] })));
+    }
+    // Horizontal layout
+    var labelsOnTop = textPlacement === 'top';
+    var marginProp = labelsOnTop ? 'marginBottom' : 'marginTop';
+    return (jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column', width: '100%' } }, { children: [showLabels && labelsOnTop && (jsx$1("div", __assign({ style: (_b = { display: 'flex' }, _b[marginProp] = '6px', _b) }, { children: renderLabelItems() }))), jsx$1("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: renderNodes() })), showLabels && !labelsOnTop && (jsx$1("div", __assign({ style: (_c = { display: 'flex' }, _c[marginProp] = '6px', _c) }, { children: renderLabelItems() })))] })));
 }
 
 function applyProgressBarStyles(responsiveStyles) {
@@ -48916,9 +49012,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 = useMemo(function () { return applyProgressBarStyles(responsiveStyles); }, [responsiveStyles]);
+    var vertical = element.styles.bar_direction === 'vertical';
+    var containerProps = __assign({ css: __assign(__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", __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') {
@@ -48926,25 +49027,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", __assign({ style: { width: '100%', textAlign: 'center' } }, { children: "".concat(percent, "% completed") }), 'completionPercentage'));
-    if (element.styles.percent_text_layout === 'top') {
+    var completionPercentage = vertical ? (jsx$1("div", __assign({ style: {
+            display: 'flex',
+            alignItems: 'center',
+            padding: '0 8px',
+            whiteSpace: 'nowrap'
+        } }, { children: "".concat(percent, "% completed") }), 'completionPercentage')) : (jsx$1("div", __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", __assign({ css: __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", __assign({}, containerProps, { css: __assign(__assign({}, containerProps.css), { flexDirection: flexDirection }) }, { children: [children, progressBarElements] })));
 }
 
 var shimmerFields = [
@@ -49091,7 +49201,7 @@ function ElementSkeleton(_a) {
 }
 var templateObject_1;
 
-var TableElement = lazy(function () { return import(/* webpackChunkName: "TableElement" */ './fthry_index.BYoImnvU.js'); });
+var TableElement = lazy(function () { return import(/* webpackChunkName: "TableElement" */ './fthry_index.DlskLXaD.js'); });
 var Basic = {
     ImageElement: ImageElement,
     VideoElement: VideoElement,

package/dist/{fthry_index.DHr6yAT3.js → fthry_index.Diz_2Nyp.js}

@@ -1,14 +1,14 @@
-import { j as jsxs, _ as __assign, a as jsx, b as iosScrollOnFocus, r as resetStyles } from './fthry_index.DgVE4qW7.js';
+import { j as jsxs, _ as __assign, a as jsx, b as iosScrollOnFocus, r as resetStyles } from './fthry_index.DeeoucaO.js';
 import { useRef, useMemo, useEffect } from 'react';
-import { F as FormControl } from './fthry_FormControl.BEWaNHn3.js';
-import { applyCheckableInputStyles, composeCheckableInputStyle, applyHeightWidthMarginByFontSize } from './fthry_index.BK2Hnx9K.js';
-import { I as InlineTooltip } from './fthry_InlineTooltip.CP92bAZA.js';
-import { u as useSalesforceSync } from './fthry_useSalesforceSync.Bj6SvTIc.js';
+import { F as FormControl } from './fthry_FormControl.CTESUYeJ.js';
+import { applyCheckableInputStyles, composeCheckableInputStyle, applyHeightWidthMarginByFontSize } from './fthry_index.CTKw49iT.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.nfGgJEKf.js';
+import { u as useSalesforceSync } from './fthry_useSalesforceSync.BafOPFGx.js';
 import 'react/jsx-runtime';
 import 'react-dom/client';
 import 'jszip';
 import 'react-dom';
-import './fthry_Overlay.D_UvdjmJ.js';
+import './fthry_Overlay.DnqeyVo3.js';
 
 var applyCheckboxGroupStyles = function (element, responsiveStyles) {
     responsiveStyles.addTargets('checkboxGroup');

package/dist/{fthry_index.BYoImnvU.js → fthry_index.DlskLXaD.js}

@@ -1,4 +1,4 @@
-import { k as __rest, a as jsx, _ as __assign, j as jsxs, q as Fragment, c as __read, t as featheryDoc, f as fieldValues, z as stringifyWithNull, U as __values, L as __spreadArray } from './fthry_index.DgVE4qW7.js';
+import { k as __rest, a as jsx, _ as __assign, j as jsxs, q as Fragment, c as __read, t as featheryDoc, f as fieldValues, z as stringifyWithNull, U as __values, L as __spreadArray } from './fthry_index.DeeoucaO.js';
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import 'react/jsx-runtime';

package/dist/{fthry_index.OjuYAGjs.js → fthry_index.I0vC5XAf.js}

@@ -1,4 +1,4 @@
-import { j as jsxs, _ as __assign, a as jsx, c as __read, I as isEmptyArray, J as toList, K as useThumbnailData, L as __spreadArray, i as imgMaxSizeStyles, l as __awaiter, m as __generator, M as downloadFile, N as CloseIcon, b as iosScrollOnFocus, F as FORM_Z_INDEX, O as justRemove } from './fthry_index.DgVE4qW7.js';
+import { j as jsxs, _ as __assign, a as jsx, c as __read, I as isEmptyArray, J as toList, K as useThumbnailData, L as __spreadArray, i as imgMaxSizeStyles, l as __awaiter, m as __generator, M as downloadFile, N as CloseIcon, b as iosScrollOnFocus, F as FORM_Z_INDEX, O as justRemove } from './fthry_index.DeeoucaO.js';
 import { useRef, useState, useEffect } from 'react';
 import 'react/jsx-runtime';
 import 'react-dom/client';

package/dist/{fthry_index.tw8xNWZc.js → fthry_index.KgxY79Zs.js}

@@ -1,6 +1,6 @@
-import { l as __awaiter, m as __generator, L as __spreadArray, c as __read, U as __values, p as featheryWindow, V as loadQRScanner, W as throttle, a as jsx, j as jsxs, _ as __assign, q as Fragment, E as ErrorInput, X as qrPromise } from './fthry_index.DgVE4qW7.js';
+import { l as __awaiter, m as __generator, L as __spreadArray, c as __read, U as __values, p as featheryWindow, V as loadQRScanner, W as throttle, a as jsx, j as jsxs, _ as __assign, q as Fragment, E as ErrorInput, X as qrPromise } from './fthry_index.DeeoucaO.js';
 import React__default, { useEffect, useCallback } from 'react';
-import { S as SliderStyles, a as Slider } from './fthry_styles.BQL5_8xd.js';
+import { S as SliderStyles, a as Slider } from './fthry_styles.T5bAbNxN.js';
 import 'react/jsx-runtime';
 import 'react-dom/client';
 import 'jszip';

package/dist/{fthry_index.DUEiyRBT.js → fthry_index.NeC1jkrE.js}

@@ -1,12 +1,12 @@
-import { c as __read, u as useBorder, j as jsxs, _ as __assign, h as hoverStylesGuard, a as jsx, r as resetStyles } from './fthry_index.DgVE4qW7.js';
+import { c as __read, u as useBorder, j as jsxs, _ as __assign, h as hoverStylesGuard, a as jsx, r as resetStyles } from './fthry_index.DeeoucaO.js';
 import { memo, useState, useRef } from 'react';
-import { P as Placeholder } from './fthry_Placeholder.CsY-scXc.js';
-import { I as InlineTooltip } from './fthry_InlineTooltip.CP92bAZA.js';
+import { P as Placeholder } from './fthry_Placeholder.DCCeoyfo.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.nfGgJEKf.js';
 import 'react/jsx-runtime';
 import 'react-dom/client';
 import 'jszip';
 import 'react-dom';
-import './fthry_Overlay.D_UvdjmJ.js';
+import './fthry_Overlay.DnqeyVo3.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/dist/{fthry_index.CNjt1dpv.js → fthry_index.YZT4cLIz.js}

@@ -1,4 +1,4 @@
-import { a as jsx, _ as __assign, c as __read, j as jsxs, E as ErrorInput } from './fthry_index.DgVE4qW7.js';
+import { a as jsx, _ as __assign, c as __read, j as jsxs, E as ErrorInput } from './fthry_index.DeeoucaO.js';
 import { useState } from 'react';
 import 'react/jsx-runtime';
 import 'react-dom/client';

package/dist/{fthry_input.D94H5xWk.js → fthry_input.D7VVukkT.js}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { P as PropTypes } from './fthry_index.DJwLQi_x.js';
+import { P as PropTypes } from './fthry_index.By7AocA5.js';
 
 /** Checks if value is string */
 function isString(str) {

package/dist/{fthry_mermaid-O7DHMXV3.D_D0ytjk.js → fthry_mermaid-O7DHMXV3.DSccfc1D.js}

@@ -1,9 +1,9 @@
-export { u as Mermaid } from './fthry_AssistantChat.B4O7bQrp.js';
-import './fthry_index.DgVE4qW7.js';
+export { u as Mermaid } from './fthry_AssistantChat.884z0Zp7.js';
+import './fthry_index.DeeoucaO.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'react-dom/client';
 import 'jszip';
 import 'react-dom';
 import './fthry_clsx.ChV9xqsO.js';
-import './fthry_index.D5kSN9-t.js';
+import './fthry_index.CvPGodEw.js';

package/dist/{fthry_script.C4MOLOaj.js → fthry_script.6jrHgqMU.js}

@@ -1,4 +1,4 @@
-import { C as getDefaultExportFromCjs } from './fthry_index.DgVE4qW7.js';
+import { C as getDefaultExportFromCjs } from './fthry_index.DeeoucaO.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/{fthry_styles.BQL5_8xd.js → fthry_styles.T5bAbNxN.js}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState, useMemo } from 'react';
-import { Y as cls, j as jsxs, q as Fragment, a as jsx, G as Global, e as css, g as __makeTemplateObject } from './fthry_index.DgVE4qW7.js';
+import { Y as cls, j as jsxs, q as Fragment, a as jsx, G as Global, e as css, g as __makeTemplateObject } from './fthry_index.DeeoucaO.js';
 import { flushSync } from 'react-dom';
 
 function canUseDom() {

package/dist/{fthry_useElementSize.C7pCjEY0.js → fthry_useElementSize.B8cKWlMG.js}

@@ -1,4 +1,4 @@
-import { c as __read, p as featheryWindow } from './fthry_index.DgVE4qW7.js';
+import { c as __read, p as featheryWindow } from './fthry_index.DeeoucaO.js';
 import { useState, useLayoutEffect } from 'react';
 
 function useElementSize(anchorRef) {

package/dist/{fthry_useSalesforceSync.Bj6SvTIc.js → fthry_useSalesforceSync.BafOPFGx.js}

@@ -1,4 +1,4 @@
-import { c as __read, l as __awaiter, m as __generator, o as FeatheryClient } from './fthry_index.DgVE4qW7.js';
+import { c as __read, l as __awaiter, m as __generator, o as FeatheryClient } from './fthry_index.DeeoucaO.js';
 import { useState, useEffect } from 'react';
 
 function useSalesforceSync(salesforceSync, editMode) {

package/dist/{fthry_webfontloader.CT2fb2Df.js → fthry_webfontloader.CF84T5ds.js}

@@ -1,4 +1,4 @@
-import { C as getDefaultExportFromCjs } from './fthry_index.DgVE4qW7.js';
+import { C as getDefaultExportFromCjs } from './fthry_index.DeeoucaO.js';
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {

package/dist/index.js

@@ -1,4 +1,4 @@
-export { aM as AssistantChat, aE as Elements, aN as Feathery, aD as Form, aK as LoginForm, aO as StyledContainer, aI as getFieldValues, aF as init, aJ as renderAt, ay as setFieldValues, aH as updateTheme, aG as updateUserId, aL as useAuthClient } from './fthry_index.DgVE4qW7.js';
+export { aM as AssistantChat, aE as Elements, aN as Feathery, aD as Form, aK as LoginForm, aO as StyledContainer, aI as getFieldValues, aF as init, aJ as renderAt, ay as setFieldValues, aH as updateTheme, aG as updateUserId, aL as useAuthClient } from './fthry_index.DeeoucaO.js';
 import 'react-dom/client';
 import 'react/jsx-runtime';
 import 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feathery/react",
-  "version": "2.39.0",
+  "version": "2.39.2",
   "description": "React library for Feathery",
   "author": "Boyang Dun",
   "license": "MIT",