@feathery/react 2.38.0 → 2.39.1

package/dist/{fthry_index.CBlXw7TW.js → fthry_index.Bv0Rd4n8.js}

@@ -6107,12 +6107,12 @@ function requireUtils () {
 	        return response;
 	    });
 	}
-	function createHttpHelpers(sdkKey, formId, userId, getFieldValues, updateFieldData, offlineHandler) {
+	function createHttpHelpers(sdkKey, entityId, userId, getFieldValues, updateFieldData, offlineHandler, entityType = 'form') {
 	    const helpers = {};
 	    ['get', 'patch', 'post', 'put', 'delete'].forEach((method) => (helpers[method] = async (url, data, headers) => {
 	        if (!url)
 	            return {};
-	        const response = await (0, api_1.runCustomRequest)(sdkKey, formId, { method: method.toUpperCase(), url, data, headers }, userId, getFieldValues?.(), offlineHandler);
+	        const response = await (0, api_1.runCustomRequest)(sdkKey, entityId, { method: method.toUpperCase(), url, data, headers }, userId, getFieldValues?.(), offlineHandler, entityType);
 	        if (!response)
 	            return {};
 	        if (response.field_values && updateFieldData) {
@@ -6128,7 +6128,7 @@ function requireUtils () {
 	    helpers.connect = async (name, data, headers) => {
 	        if (!name)
 	            return {};
-	        const response = await (0, api_1.runCustomRequest)(sdkKey, formId, { name, data, headers }, userId, getFieldValues?.(), offlineHandler);
+	        const response = await (0, api_1.runCustomRequest)(sdkKey, entityId, { name, data, headers }, userId, getFieldValues?.(), offlineHandler, entityType);
 	        if (!response)
 	            return {};
 	        if (response.field_values && updateFieldData) {
@@ -6215,7 +6215,7 @@ function requireApi () {
 	    let meetingUrl;
 	    let variantPerFile;
 	    let variantMode;
-	    let confidenceScoresCompleted;
+	    let waitForConfidenceScores;
 	    if (typeof options === 'object') {
 	        runAsync = !options.waitForCompletion;
 	        pages = options.pages;
@@ -6223,7 +6223,7 @@ function requireApi () {
 	        meetingUrl = options.meetingUrl;
 	        variantPerFile = options.variantPerFile;
 	        variantMode = options.variantMode;
-	        confidenceScoresCompleted = options.confidenceScoresCompleted;
+	        waitForConfidenceScores = options.waitForConfidenceScores;
 	    }
 	    else {
 	        // deprecated usage, options is runAsync
@@ -6247,7 +6247,7 @@ function requireApi () {
 	        body: JSON.stringify(data),
 	    });
 	    const response = await res?.json();
-	    const pollUrl = `${(0, utils_1.getStaticUrl)()}ai/vision/completion/?fid=${userId}&eid=${extractionId}&evid=${variantId ?? ''}&poll_ids=${(response?.poll_ids ?? []).join(',')}&wait_for_confidence_scores=${confidenceScoresCompleted ?? false}`;
+	    const pollUrl = `${(0, utils_1.getStaticUrl)()}ai/vision/completion/?fid=${userId}&eid=${extractionId}&evid=${variantId ?? ''}&poll_ids=${(response?.poll_ids ?? []).join(',')}&wait_for_confidence_scores=${waitForConfidenceScores ?? false}`;
 	    const CHECK_INTERVAL = pollCheckInterval ?? 2000;
 	    const MAX_TIME = pollMaxTime ?? 3 * 60 * 1000;
 	    if (runAsync) {
@@ -6360,10 +6360,9 @@ function requireApi () {
 	    };
 	    await (0, utils_1.apiFetch)(sdkKey, url, data);
 	}
-	function runCustomRequest(sdkKey, formId, payload, userId, fieldValues, offlineHandler) {
-	    const data = {
+	function runCustomRequest(sdkKey, entityId, payload, userId, fieldValues, offlineHandler, entityType = 'form') {
+	    let data = {
 	        fuser_key: userId,
-	        form_key: formId,
 	        name: payload.name,
 	        method: payload.method,
 	        url: payload.url,
@@ -6371,7 +6370,15 @@ function requireApi () {
 	        headers: payload.headers,
 	        field_values: fieldValues,
 	    };
-	    const url = `${(0, utils_1.getStaticUrl)()}custom_request/`;
+	    let url;
+	    if (entityType === 'extraction') {
+	        data.extraction_id = entityId;
+	        url = `${(0, utils_1.getStaticUrl)()}ai/custom_request/`;
+	    }
+	    else {
+	        data.form_key = entityId;
+	        url = `${(0, utils_1.getStaticUrl)()}custom_request/`;
+	    }
 	    const options = {
 	        headers: { 'Content-Type': 'application/json' },
 	        method: 'POST',
@@ -16914,8 +16921,8 @@ function inRepeat(elementKey, parentKey, addCommaToElement) {
  */
 function getRepeatedContainer(step, element) {
     return getRepeatedContainers(step).find(function (subgrid) {
-        var elKey = getPositionKey(element);
-        var subgridKey = getPositionKey(subgrid);
+        var elKey = getPositionKey$1(element);
+        var subgridKey = getPositionKey$1(subgrid);
         return inRepeat(elKey, subgridKey);
     });
 }
@@ -16935,8 +16942,8 @@ function getRepeatedContainers(step) {
  */
 function getFieldsInRepeat(step, repeatContainer) {
     return step.servar_fields.filter(function (field) {
-        var positionKey = getPositionKey(field);
-        var repeatKey = getPositionKey(repeatContainer);
+        var positionKey = getPositionKey$1(field);
+        var repeatKey = getPositionKey$1(repeatContainer);
         return inRepeat(positionKey, repeatKey);
     });
 }
@@ -17012,7 +17019,7 @@ var getTextVariables = function (el) {
 };
 var repeatCountByTextVariables = function (step, repeatKey) {
     var textVariables = [];
-    __spreadArray(__spreadArray([], __read(step.buttons), false), __read(step.texts), false).filter(function (el) { return repeatKey && inRepeat(getPositionKey(el), repeatKey, true); })
+    __spreadArray(__spreadArray([], __read(step.buttons), false), __read(step.texts), false).filter(function (el) { return repeatKey && inRepeat(getPositionKey$1(el), repeatKey, true); })
         .forEach(function (el) {
         textVariables = __spreadArray(__spreadArray([], __read(textVariables), false), __read(getTextVariables(el)), false);
     });
@@ -17028,7 +17035,7 @@ var repeatCountByFields = function (step, repeatKey) {
     var repeatableServars = step.servar_fields.filter(function (field) {
         return field.servar.repeated &&
             repeatKey &&
-            inRepeat(getPositionKey(field), repeatKey, true);
+            inRepeat(getPositionKey$1(field), repeatKey, true);
     });
     var count = 0;
     repeatableServars.forEach(function (servar) {
@@ -17059,13 +17066,13 @@ var stepElementTypes = [
     'videos',
     'tables'
 ];
-var getPositionKey = function (node) {
+var getPositionKey$1 = function (node) {
     if (!node.position)
         return null;
     return node.position.join(',') || 'root';
 };
 function _collectHideFlags(step, element, visiblePositions, hiddenPositions, repeatKeys, internalId) {
-    var elKey = getPositionKey(element);
+    var elKey = getPositionKey$1(element);
     var repeatKey = repeatKeys.find(function (key) { return inRepeat(elKey, key, true); });
     var numRepeats = Math.max(repeatCountByFields(step, repeatKey), repeatCountByTextVariables(step, repeatKey), 1);
     var curRepeats = repeatKey ? numRepeats : 1;
@@ -17100,7 +17107,7 @@ function _collectHideFlags(step, element, visiblePositions, hiddenPositions, rep
 }
 function getVisiblePositions(step, internalId) {
     var repeatGrids = getRepeatedContainers(step);
-    var repeatKeys = repeatGrids.map(getPositionKey);
+    var repeatKeys = repeatGrids.map(getPositionKey$1);
     var visiblePositions = {};
     // Efficient data structure for tracking hidden elements
     var hiddenPositions = {};
@@ -17129,7 +17136,7 @@ function getVisibleElements(step, visiblePositions, elementTypes, repeat) {
     return elementTypes.flatMap(function (type) {
         return step[type].flatMap(function (el) {
             var repeatGrid = getRepeatedContainer(step, el);
-            var elKey = getPositionKey(el);
+            var elKey = getPositionKey$1(el);
             var elements = [];
             var flags = visiblePositions[elKey];
             flags.forEach(function (flag, index) {
@@ -21085,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')
@@ -22167,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"]);
@@ -22944,7 +22945,7 @@ var Subgrid = function (_a) {
         var children = (node.children || []).map(function (child, i) {
             var _a, _b;
             var fieldKey = (_b = (_a = child.servar) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : '';
-            return (jsx$1(Subgrid, { tree: child, axis: node.axis, form: form, viewport: viewport }, getPositionKey(child) + ':' + i + ':' + fieldKey));
+            return (jsx$1(Subgrid, { tree: child, axis: node.axis, form: form, viewport: viewport }, getPositionKey$1(child) + ':' + i + ':' + fieldKey));
         });
         if (props.embed_calendly && ((_c = form.calendly) === null || _c === void 0 ? void 0 : _c.api_key)) {
             children.push(jsx$1(CalendlyEmbed, { form: form, successStep: props.calendly_success_step }, 'calendly'));
@@ -22963,7 +22964,7 @@ var buildStepGrid = function (step, viewport, visiblePositions) {
     var map = buildGridMap(step);
     var repeatGrids = getRepeatedContainers(step);
     var repeatKeys = repeatGrids.map(function (repeatGrid) {
-        return getPositionKey(repeatGrid);
+        return getPositionKey$1(repeatGrid);
     });
     var tree = buildGridTree(map, [], visiblePositions, repeatKeys, undefined, false);
     return { map: map, tree: tree };
@@ -23021,7 +23022,7 @@ var buildGridMap = function (step) {
                 return (rootSubgrid = obj);
             }
         }
-        var previous = map[getPositionKey(obj)];
+        var previous = map[getPositionKey$1(obj)];
         var prevObj = {};
         if (previous) {
             prevObj.width = previous.width;
@@ -23030,14 +23031,14 @@ var buildGridMap = function (step) {
         if (type !== 'subgrids') {
             prevObj.isElement = true;
         }
-        map[getPositionKey(obj)] = __assign(__assign({}, obj), prevObj);
+        map[getPositionKey$1(obj)] = __assign(__assign({}, obj), prevObj);
     };
     stepElementTypes.forEach(function (type) { var _a; return (_a = step[type]) === null || _a === void 0 ? void 0 : _a.forEach(function (obj) { return addObjectsToMap(obj, type); }); });
     map.root = __assign({ step: step }, rootSubgrid);
     return map;
 };
 var buildGridTree = function (gridMap, position, visiblePositions, repeatKeys, repeatIndex, lastRepeat) {
-    var positionKey = getPositionKey({ position: position });
+    var positionKey = getPositionKey$1({ position: position });
     var node = __assign({}, gridMap[positionKey]);
     if (!node)
         return;
@@ -23045,7 +23046,7 @@ var buildGridTree = function (gridMap, position, visiblePositions, repeatKeys, r
     node.lastRepeat = lastRepeat;
     var i = 0;
     var nextPos = __spreadArray(__spreadArray([], __read(position), false), [i], false);
-    var nextPosKey = getPositionKey({ position: nextPos });
+    var nextPosKey = getPositionKey$1({ position: nextPos });
     var hasNextChild = gridMap[nextPosKey];
     if (hasNextChild)
         node.children = [];
@@ -23061,7 +23062,7 @@ var buildGridTree = function (gridMap, position, visiblePositions, repeatKeys, r
         }
         i = i + 1;
         nextPos = __spreadArray(__spreadArray([], __read(position), false), [i], false);
-        nextPosKey = getPositionKey({ position: nextPos });
+        nextPosKey = getPositionKey$1({ position: nextPos });
         hasNextChild = gridMap[nextPosKey];
     };
     while (hasNextChild) {
@@ -39688,7 +39689,7 @@ function useTrackUserInteraction(formRef, activeStep, stepKey, formName) {
     }, [activeStep, stepKey, formName]);
 }
 
-var LazyAssistantChat = lazy(function () { return import(/* webpackChunkName: "AssistantChat" */ './fthry_AssistantChat.BpIazy4D.js').then(function (n) { return n.A; }); });
+var LazyAssistantChat = lazy(function () { return import(/* webpackChunkName: "AssistantChat" */ './fthry_AssistantChat.D_blXDVn.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 () {
@@ -40388,7 +40389,7 @@ function Form(_a) {
         return changed;
     };
     var getNewStep = function (newKey) { return __awaiter$2(_this, void 0, void 0, function () {
-        var newStep, nextStep, nextKey, fields, newHash, _a, curDepth, maxDepth, oldKey;
+        var newStep, nextStep, nextKey, fields, newVisiblePositions, newHash, _a, curDepth, maxDepth, oldKey;
         var _this = this;
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         return __generator(this, function (_o) {
@@ -40415,11 +40416,13 @@ function Form(_a) {
                     fields = (_b = internalState[_internalId]) === null || _b === void 0 ? void 0 : _b.fields;
                     if (!fields || !Object.isSealed(fields))
                         fields = Object.seal(getAllFields(fieldKeys, Object.keys(hiddenFields), _internalId));
+                    newVisiblePositions = getVisiblePositions(newStep, _internalId);
+                    preloadStepFields(newStep, newVisiblePositions).catch(function () { });
                     setFormInternalState(_internalId, {
                         language: language !== null && language !== void 0 ? language : initState.language,
                         currentStep: newStep,
                         previousStepName: (_c = activeStep === null || activeStep === void 0 ? void 0 : activeStep.key) !== null && _c !== void 0 ? _c : '',
-                        visiblePositions: getVisiblePositions(newStep, _internalId),
+                        visiblePositions: newVisiblePositions,
                         client: client,
                         fields: fields,
                         products: Object.seal(getSimplifiedProducts(integrations === null || integrations === void 0 ? void 0 : integrations.stripe, updateFieldValues, client)),
@@ -40658,7 +40661,7 @@ function Form(_a) {
             // Only resets if value differs from default, minimizes unnecessary updates.
             var newFieldVals_1 = {};
             activeStep.servar_fields.forEach(function (sf) {
-                var key = getPositionKey(sf);
+                var key = getPositionKey$1(sf);
                 var flags = visiblePositions[key];
                 var isRepeated = !!getRepeatedContainer(activeStep, sf);
                 if (isRepeated) {
@@ -46284,9 +46287,9 @@ function init(sdkKey, options) {
     if (runningInClient()) {
         // Dynamically load libraries that must be client side
         global.scriptjsLoadPromise = import(
-        /* webpackChunkName: "scriptjs" */ './fthry_script.4UR41bnG.js').then(function (n) { return n.s; });
+        /* webpackChunkName: "scriptjs" */ './fthry_script.CdqUz_xN.js').then(function (n) { return n.s; });
         global.webfontloaderPromise = import(
-        /* webpackChunkName: "webfontloader" */ './fthry_webfontloader.n8GaR_jB.js').then(function (n) { return n.w; });
+        /* webpackChunkName: "webfontloader" */ './fthry_webfontloader.CUla19Cs.js').then(function (n) { return n.w; });
         // Client-side tracking logic
         if (initState.userTracking === 'cookie') {
             var cookieKey = "feathery-user-id-".concat(sdkKey);
@@ -46432,7 +46435,7 @@ function getFieldValues() {
     return __assign({}, fieldValues);
 }
 function logFeatheryBadge() {
-    console.log('%c Feathery %c v' + "2.38.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;');
 }
 
@@ -47945,40 +47948,124 @@ breakpoint) {
     return styles.getTarget('inner-container', undefined, viewport === 'mobile');
 };
 
-var AddressLine1 = lazy(function () { return import(/* webpackChunkName: "AddressField" */ './fthry_index.B020qTL1.js'); });
-var ButtonGroupField = lazy(function () { return import(/* webpackChunkName: "ButtonGroupField" */ './fthry_index.BZZHsN5a.js'); });
-var CheckboxField = lazy(function () { return import(/* webpackChunkName: "CheckboxField" */ './fthry_index.-9Pe_RZJ.js'); });
-var CheckboxGroupField = lazy(function () {
-    return import(/* webpackChunkName: "CheckboxGroupField" */ './fthry_index.BQlKGMSZ.js');
-});
-var ColorPickerField = lazy(function () { return import(/* webpackChunkName: "ColorPickerField" */ './fthry_index.BZuK2sQ5.js'); });
-var CustomField = lazy(function () { return import(/* webpackChunkName: "CustomField" */ './fthry_index.DOOj6cJp.js'); });
-var DateSelectorField = lazy(function () {
-    return import(/* webpackChunkName: "DateSelectorField" */ './fthry_index.B_AxehyW.js');
-});
-var DropdownField = lazy(function () { return import(/* webpackChunkName: "DropdownField" */ './fthry_index.CaQYjI5I.js'); });
-var DropdownMultiField = lazy(function () {
-    return import(/* webpackChunkName: "DropdownMultiField" */ './fthry_index.P0AejkY4.js');
-});
-var FileUploadField = lazy(function () { return import(/* webpackChunkName: "FileUploadField" */ './fthry_index.DHPFNhgl.js'); });
-var MatrixField = lazy(function () { return import(/* webpackChunkName: "MatrixField" */ './fthry_index.DPAdqFeT.js'); });
-var PasswordField = lazy(function () { return import(/* webpackChunkName: "PasswordField" */ './fthry_index.D7Lb5Krw.js'); });
-var PaymentMethodField = lazy(function () {
-    return import(/* webpackChunkName: "PaymentMethodField" */ './fthry_PaymentMethodField.iCQc8h5O.js');
-});
-var PhoneField = lazy(function () { return import(/* webpackChunkName: "PhoneField" */ './fthry_index.08-lgbei.js'); });
-var PinInputField = lazy(function () { return import(/* webpackChunkName: "PinInputField" */ './fthry_index.CQfKbwaC.js'); });
-var QRScanner = lazy(function () { return import(/* webpackChunkName: "QRScanner" */ './fthry_index.BH5ZPwTL.js'); });
-var RadioButtonGroupField = lazy(function () {
-    return import(
-    /* webpackChunkName: "RadioButtonGroupField" */ './fthry_index.mxecJ9_a.js');
-});
-var RatingField = lazy(function () { return import(/* webpackChunkName: "RatingField" */ './fthry_index.Ca770hPU.js'); });
-var SignatureField = lazy(function () { return import(/* webpackChunkName: "SignatureField" */ './fthry_index.B2UzR5GS.js'); });
-var SliderField = lazy(function () { return import(/* webpackChunkName: "SliderField" */ './fthry_index.DL46TGQr.js'); });
-var TextField = lazy(function () { return import(/* webpackChunkName: "TextField" */ './fthry_index.BOItLjiR.js'); });
-var TextArea = lazy(function () { return import(/* webpackChunkName: "TextArea" */ './fthry_index.DIIoaRob.js'); });
-var Fields = {
+var fieldLoaders = {
+    AddressLine1: function () {
+        return import(/* webpackChunkName: "AddressField" */ './fthry_index.DGbZqMXK.js');
+    },
+    ButtonGroupField: function () {
+        return import(/* webpackChunkName: "ButtonGroupField" */ './fthry_index.BTgeVAmS.js');
+    },
+    CheckboxField: function () {
+        return import(/* webpackChunkName: "CheckboxField" */ './fthry_index.DKKxZ5bF.js');
+    },
+    CheckboxGroupField: function () {
+        return import(/* webpackChunkName: "CheckboxGroupField" */ './fthry_index.Bbc3lP0x.js');
+    },
+    ColorPickerField: function () {
+        return import(/* webpackChunkName: "ColorPickerField" */ './fthry_index.C2RescJg.js');
+    },
+    CustomField: function () {
+        return import(/* webpackChunkName: "CustomField" */ './fthry_index.CXcuEd6j.js');
+    },
+    DateSelectorField: function () {
+        return import(/* webpackChunkName: "DateSelectorField" */ './fthry_index.2IgipsEM.js');
+    },
+    DropdownField: function () {
+        return import(/* webpackChunkName: "DropdownField" */ './fthry_index.Bydv6C9o.js');
+    },
+    DropdownMultiField: function () {
+        return import(/* webpackChunkName: "DropdownMultiField" */ './fthry_index.B-nybZYJ.js');
+    },
+    FileUploadField: function () {
+        return import(/* webpackChunkName: "FileUploadField" */ './fthry_index.CswL31zQ.js');
+    },
+    MatrixField: function () {
+        return import(/* webpackChunkName: "MatrixField" */ './fthry_index.DVeINBpy.js');
+    },
+    PasswordField: function () {
+        return import(/* webpackChunkName: "PasswordField" */ './fthry_index.YWqg41F5.js');
+    },
+    PaymentMethodField: function () {
+        return import(/* webpackChunkName: "PaymentMethodField" */ './fthry_PaymentMethodField.DU5n1W6P.js');
+    },
+    PhoneField: function () { return import(/* webpackChunkName: "PhoneField" */ './fthry_index.CZ9WEIQj.js'); },
+    PinInputField: function () {
+        return import(/* webpackChunkName: "PinInputField" */ './fthry_index.BsBSZ5eS.js');
+    },
+    QRScanner: function () { return import(/* webpackChunkName: "QRScanner" */ './fthry_index.CXEINKN6.js'); },
+    RadioButtonGroupField: function () {
+        return import(
+        /* webpackChunkName: "RadioButtonGroupField" */ './fthry_index.C7DKIdK3.js');
+    },
+    RatingField: function () {
+        return import(/* webpackChunkName: "RatingField" */ './fthry_index.B9DIVIQU.js');
+    },
+    SignatureField: function () {
+        return import(/* webpackChunkName: "SignatureField" */ './fthry_index.DxbE60cC.js');
+    },
+    SliderField: function () {
+        return import(/* webpackChunkName: "SliderField" */ './fthry_index.BfNP3Kp1.js');
+    },
+    TextField: function () { return import(/* webpackChunkName: "TextField" */ './fthry_index.BM2ld3tG.js'); },
+    TextArea: function () { return import(/* webpackChunkName: "TextArea" */ './fthry_index.mqd6gAHS.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
+// React.lazy wrapper can still suspend on its first render even after an
+// external import() preload has resolved.
+var createPreloadableField = function (load) {
+    var Component = null;
+    var preloadPromise = null;
+    var loadError = null;
+    var preload = function () {
+        if (!preloadPromise) {
+            loadError = null;
+            preloadPromise = load()
+                .then(function (module) {
+                Component = module.default;
+                return module;
+            })
+                .catch(function (error) {
+                preloadPromise = null;
+                loadError = error;
+                throw error;
+            });
+        }
+        return preloadPromise;
+    };
+    var Field = function (props) {
+        if (Component)
+            return React__default.createElement(Component, props);
+        if (loadError)
+            throw loadError;
+        throw preload();
+    };
+    Field.preload = preload;
+    return Field;
+};
+var AddressLine1 = createPreloadableField(fieldLoaders.AddressLine1);
+var ButtonGroupField = createPreloadableField(fieldLoaders.ButtonGroupField);
+var CheckboxField = createPreloadableField(fieldLoaders.CheckboxField);
+var CheckboxGroupField = createPreloadableField(fieldLoaders.CheckboxGroupField);
+var ColorPickerField = createPreloadableField(fieldLoaders.ColorPickerField);
+var CustomField = createPreloadableField(fieldLoaders.CustomField);
+var DateSelectorField = createPreloadableField(fieldLoaders.DateSelectorField);
+var DropdownField = createPreloadableField(fieldLoaders.DropdownField);
+var DropdownMultiField = createPreloadableField(fieldLoaders.DropdownMultiField);
+var FileUploadField = createPreloadableField(fieldLoaders.FileUploadField);
+var MatrixField = createPreloadableField(fieldLoaders.MatrixField);
+var PasswordField = createPreloadableField(fieldLoaders.PasswordField);
+var PaymentMethodField = createPreloadableField(fieldLoaders.PaymentMethodField);
+var PhoneField = createPreloadableField(fieldLoaders.PhoneField);
+var PinInputField = createPreloadableField(fieldLoaders.PinInputField);
+var QRScanner = createPreloadableField(fieldLoaders.QRScanner);
+var RadioButtonGroupField = createPreloadableField(fieldLoaders.RadioButtonGroupField);
+var RatingField = createPreloadableField(fieldLoaders.RatingField);
+var SignatureField = createPreloadableField(fieldLoaders.SignatureField);
+var SliderField = createPreloadableField(fieldLoaders.SliderField);
+var TextField = createPreloadableField(fieldLoaders.TextField);
+var TextArea = createPreloadableField(fieldLoaders.TextArea);
+var preloadableFields = {
     AddressLine1: AddressLine1,
     ButtonGroupField: ButtonGroupField,
     CheckboxField: CheckboxField,
@@ -48002,6 +48089,71 @@ var Fields = {
     TextField: TextField,
     TextArea: TextArea
 };
+var getFieldComponentKey = function (servarType) {
+    switch (servarType) {
+        case 'matrix':
+            return 'MatrixField';
+        case 'date_selector':
+            return 'DateSelectorField';
+        case 'signature':
+            return 'SignatureField';
+        case 'qr_scanner':
+            return 'QRScanner';
+        case 'custom':
+            return 'CustomField';
+        case 'file_upload':
+            return 'FileUploadField';
+        case 'button_group':
+            return 'ButtonGroupField';
+        case 'checkbox':
+            return 'CheckboxField';
+        case 'dropdown':
+        case 'gmap_state':
+        case 'gmap_country':
+            return 'DropdownField';
+        case 'dropdown_multi':
+            return 'DropdownMultiField';
+        case 'pin_input':
+            return 'PinInputField';
+        case 'multiselect':
+            return 'CheckboxGroupField';
+        case 'select':
+            return 'RadioButtonGroupField';
+        case 'hex_color':
+            return 'ColorPickerField';
+        case 'slider':
+            return 'SliderField';
+        case 'rating':
+            return 'RatingField';
+        case 'password':
+            return 'PasswordField';
+        case 'text_area':
+            return 'TextArea';
+        case 'phone_number':
+            return 'PhoneField';
+        case 'gmap_line_1':
+        case 'gmap_city':
+            return 'AddressLine1';
+        case 'payment_method':
+            return 'PaymentMethodField';
+        default:
+            return 'TextField';
+    }
+};
+var preloadStepFields = function (step, visiblePositions) {
+    var fieldComponentKeys = new Set();
+    step.servar_fields.forEach(function (element) {
+        var _a;
+        var visibleFlags = visiblePositions[getPositionKey(element)];
+        if (visibleFlags === null || visibleFlags === void 0 ? void 0 : visibleFlags.some(Boolean)) {
+            fieldComponentKeys.add(getFieldComponentKey((_a = element.servar) === null || _a === void 0 ? void 0 : _a.type));
+        }
+    });
+    return Promise.all(Array.from(fieldComponentKeys).map(function (key) {
+        return preloadableFields[key].preload();
+    }));
+};
+var Fields = __assign({}, preloadableFields);
 var justifyContentTextAlignMap = {
     'flex-start': 'left',
     center: 'center',
@@ -48365,6 +48517,15 @@ function applyImageStyles(element, responsiveStyles) {
     responsiveStyles.applyWidth('dimension');
     return responsiveStyles;
 }
+function getImmediateDocumentUrl(_a) {
+    var editMode = _a.editMode, imageFieldSource = _a.imageFieldSource, sourceImage = _a.sourceImage;
+    if (imageFieldSource && typeof imageFieldSource === 'string') {
+        return imageFieldSource;
+    }
+    if (!imageFieldSource)
+        return sourceImage || PLACEHOLDER_IMAGE;
+    return editMode ? PLACEHOLDER_IMAGE : '';
+}
 function ImageElement(_a) {
     var _b, _c;
     var element = _a.element, responsiveStyles = _a.responsiveStyles, _d = _a.elementProps, elementProps = _d === void 0 ? {} : _d, editMode = _a.editMode, children = _a.children;
@@ -48373,29 +48534,26 @@ function ImageElement(_a) {
     if (Array.isArray(imageFieldSource)) {
         imageFieldSource = imageFieldSource[(_c = element.repeat) !== null && _c !== void 0 ? _c : 0];
     }
-    var hasSourceImage = !!element.properties.source_image && !imageFieldSource;
-    var _e = __read(useState(editMode && !hasSourceImage ? PLACEHOLDER_IMAGE : ''), 2), documentUrl = _e[0], setDocumentUrl = _e[1];
-    var _f = __read(useState(''), 2), documentType = _f[0], setDocumentType = _f[1];
-    var _g = __read(useState(true), 2), applyWidth = _g[0], setApplyWidth = _g[1];
+    var shouldResolveImageSource = Boolean(imageFieldSource && typeof imageFieldSource !== 'string');
+    var immediateDocumentUrl = getImmediateDocumentUrl({
+        editMode: editMode,
+        imageFieldSource: imageFieldSource,
+        sourceImage: element.properties.source_image
+    });
+    var _e = __read(useState(null), 2), resolvedDocumentData = _e[0], setResolvedDocumentData = _e[1];
+    var _f = __read(useState(true), 2), applyWidth = _f[0], setApplyWidth = _f[1];
     var styles = useMemo(function () { return applyImageStyles(element, responsiveStyles); }, [responsiveStyles]);
     useEffect(function () {
-        if (imageFieldSource) {
-            if (typeof imageFieldSource === 'string') {
-                setDocumentType('');
-                setDocumentUrl(imageFieldSource);
-            }
-            else {
-                getRenderData(imageFieldSource).then(function (data) {
-                    setDocumentType(data.type);
-                    setDocumentUrl(data.url);
-                });
-            }
-        }
-        else {
-            setDocumentUrl(element.properties.source_image || PLACEHOLDER_IMAGE);
-            setDocumentType('');
-        }
-    }, [imageFieldSource, element.properties.source_image]);
+        if (!shouldResolveImageSource)
+            return;
+        getRenderData(imageFieldSource).then(setResolvedDocumentData);
+    }, [imageFieldSource, shouldResolveImageSource]);
+    var documentUrl = shouldResolveImageSource && resolvedDocumentData
+        ? resolvedDocumentData.url
+        : immediateDocumentUrl;
+    var documentType = shouldResolveImageSource && resolvedDocumentData
+        ? resolvedDocumentData.type
+        : '';
     var displayPDF = documentUrl && documentType === 'application/pdf';
     return (jsxs("div", __assign({ css: __assign(__assign({ width: '100%', height: '100%' }, styles.getTarget('imageContainer')), { maxHeight: '100%', position: 'relative', display: 'flex', alignItems: 'center' }) }, { children: [children, displayPDF ? (jsx$1("embed", __assign({ type: 'application/pdf', width: '100%', height: '100%', alt: '', "aria-label": element.properties.aria_label, src: documentUrl + '#view=FitH', css: __assign(__assign({ border: 'none', objectFit: 'contain', width: '100%', maxWidth: '100%', height: '100%', maxHeight: '100%' }, styles.getTarget('image')), (applyWidth ? styles.getTarget('dimension') : {})), onLoad: function () { return setApplyWidth(false); } }, elementProps))) : (jsx$1("img", __assign({ src: documentUrl || undefined, alt: '', "aria-label": element.properties.aria_label, css: __assign(__assign({ objectFit: 'contain', width: '100%', maxWidth: '100%', height: '100%', maxHeight: '100%' }, styles.getTarget('image')), (applyWidth ? styles.getTarget('dimension') : {})), onLoad: function () { return setApplyWidth(false); } }, elementProps)))] })));
 }
@@ -48707,33 +48865,121 @@ 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 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 __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 = 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__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) {
@@ -48752,9 +48998,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') {
@@ -48762,25 +49013,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 = [
@@ -48927,7 +49187,7 @@ function ElementSkeleton(_a) {
 }
 var templateObject_1;
 
-var TableElement = lazy(function () { return import(/* webpackChunkName: "TableElement" */ './fthry_index.JhHnGxYn.js'); });
+var TableElement = lazy(function () { return import(/* webpackChunkName: "TableElement" */ './fthry_index.CsVcvrP3.js'); });
 var Basic = {
     ImageElement: ImageElement,
     VideoElement: VideoElement,