@wix/form-public 0.25.0 → 0.26.0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React31 = require('react');
+var React32 = require('react');
 var ReactDOM = require('react-dom');
 var camelCase = require('lodash.camelcase');
 var mapKeys = require('lodash.mapkeys');
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React31__namespace = /*#__PURE__*/_interopNamespace(React31);
+var React32__namespace = /*#__PURE__*/_interopNamespace(React32);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
 var mapKeys__default = /*#__PURE__*/_interopDefault(mapKeys);
@@ -4287,7 +4287,7 @@ var require_classnames = __commonJS({
 var RicosViewerContext;
 var init_ViewerContext = __esm({
   "../../node_modules/@wix/ricos/dist/es/ricos-context/viewer/ViewerContext.js"() {
-    RicosViewerContext = React31__namespace.default.createContext(null);
+    RicosViewerContext = React32__namespace.default.createContext(null);
   }
 });
 
@@ -5236,16 +5236,16 @@ var require_prop_types = __commonJS({
 // ../../node_modules/@babel/runtime/helpers/extends.js
 var require_extends = __commonJS({
   "../../node_modules/@babel/runtime/helpers/extends.js"(exports, module) {
-    function _extends6() {
-      return module.exports = _extends6 = Object.assign ? Object.assign.bind() : function(n) {
+    function _extends7() {
+      return module.exports = _extends7 = Object.assign ? Object.assign.bind() : function(n) {
         for (var e = 1; e < arguments.length; e++) {
           var t = arguments[e];
           for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
         }
         return n;
-      }, module.exports.__esModule = true, module.exports["default"] = module.exports, _extends6.apply(null, arguments);
+      }, module.exports.__esModule = true, module.exports["default"] = module.exports, _extends7.apply(null, arguments);
     }
-    module.exports = _extends6, module.exports.__esModule = true, module.exports["default"] = module.exports;
+    module.exports = _extends7, module.exports.__esModule = true, module.exports["default"] = module.exports;
   }
 });
 
@@ -5311,7 +5311,7 @@ var init_PropTypes = __esm({
 var TransitionGroupContext_default;
 var init_TransitionGroupContext = __esm({
   "../../node_modules/react-transition-group/esm/TransitionGroupContext.js"() {
-    TransitionGroupContext_default = React31__namespace.default.createContext(null);
+    TransitionGroupContext_default = React32__namespace.default.createContext(null);
   }
 });
 
@@ -5543,13 +5543,13 @@ var init_Transition = __esm({
         var _this$props = this.props, children = _this$props.children; _this$props.in; _this$props.mountOnEnter; _this$props.unmountOnExit; _this$props.appear; _this$props.enter; _this$props.exit; _this$props.timeout; _this$props.addEndListener; _this$props.onEnter; _this$props.onEntering; _this$props.onEntered; _this$props.onExit; _this$props.onExiting; _this$props.onExited; _this$props.nodeRef; var childProps = _objectWithoutPropertiesLoose(_this$props, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
         return (
           // allows for nested Transitions
-          /* @__PURE__ */ React31__namespace.default.createElement(TransitionGroupContext_default.Provider, {
+          /* @__PURE__ */ React32__namespace.default.createElement(TransitionGroupContext_default.Provider, {
             value: null
-          }, typeof children === "function" ? children(status, childProps) : React31__namespace.default.cloneElement(React31__namespace.default.Children.only(children), childProps))
+          }, typeof children === "function" ? children(status, childProps) : React32__namespace.default.cloneElement(React32__namespace.default.Children.only(children), childProps))
         );
       };
       return Transition2;
-    })(React31__namespace.default.Component);
+    })(React32__namespace.default.Component);
     Transition.contextType = TransitionGroupContext_default;
     Transition.propTypes = process.env.NODE_ENV !== "production" ? {
       /**
@@ -20519,7 +20519,6 @@ var INPUT_FIELD_TYPES = {
 var READONLY_FIELD_TYPES = {
   HEADER: "HEADER",
   RICH_TEXT: "RICH_TEXT",
-  SUBMIT_BUTTON: "SUBMIT_BUTTON",
   ECOM_CONTACT_DETAILS: "ECOM_CONTACT_DETAILS",
   ECOM_SHIPPING_DETAILS: "ECOM_SHIPPING_DETAILS",
   BOOKINGS_HEADER: "BOOKINGS_HEADER",
@@ -20530,8 +20529,7 @@ var READONLY_FIELD_TYPES = {
 // ../form-fields/dist/esm/constants/field-types.js
 var FIELD_TYPES = {
   ...INPUT_FIELD_TYPES,
-  ...READONLY_FIELD_TYPES
-};
+  ...READONLY_FIELD_TYPES};
 
 // ../form-fields/dist/esm/constants/empty-values.js
 var EMPTY_VALUE = null;
@@ -20547,49 +20545,56 @@ var Breakpoint = /* @__PURE__ */ (function(Breakpoint2) {
   return Breakpoint2;
 })({});
 var DEFAULT_BREAKPOINT = Breakpoint.LARGE;
-var FieldValidationContext = /* @__PURE__ */ React31.createContext(null);
-var useFieldValidation = () => React31.useContext(FieldValidationContext) || {};
+var FieldValidationContext = /* @__PURE__ */ React32.createContext(null);
+var useFieldValidation = () => React32.useContext(FieldValidationContext) || {};
 var FORM_STATUS = {
   BUSY: "BUSY",
   READY: "READY"
 };
-var FormStatusContext = /* @__PURE__ */ React31.createContext(void 0);
+var FormStatusContext = /* @__PURE__ */ React32.createContext(void 0);
 var FormStatusProvider = (_ref) => {
   let {
     children,
     onStatusChange
   } = _ref;
-  const previousFormStatus = React31.useRef(FORM_STATUS.READY);
-  const [fieldStatusByTarget, setFieldStatusByTarget] = React31.useState({});
-  const setFormStatus = React31.useCallback((target, status) => {
+  const previousFormStatus = React32.useRef(FORM_STATUS.READY);
+  const [fieldStatusByTarget, setFieldStatusByTarget] = React32.useState({});
+  const setFormStatus = React32.useCallback((target, status) => {
     setFieldStatusByTarget((previous) => ({
       ...previous,
       [target]: status
     }));
   }, []);
-  const currentFormStatus = React31.useMemo(() => {
+  const currentFormStatus = React32.useMemo(() => {
     const isFormBusy = Object.values(fieldStatusByTarget).some((status) => status === FORM_STATUS.BUSY);
     return isFormBusy ? FORM_STATUS.BUSY : FORM_STATUS.READY;
   }, [fieldStatusByTarget]);
-  React31.useEffect(() => {
+  React32.useEffect(() => {
     if (previousFormStatus.current !== currentFormStatus) {
       previousFormStatus.current = currentFormStatus;
       onStatusChange == null || onStatusChange(currentFormStatus);
     }
   }, [currentFormStatus, onStatusChange]);
-  const contextValue = React31.useMemo(() => {
+  const contextValue = React32.useMemo(() => {
     return {
       formStatus: currentFormStatus,
       setFormStatus
     };
   }, [currentFormStatus, setFormStatus]);
-  return /* @__PURE__ */ React31__namespace.default.createElement(FormStatusContext.Provider, {
+  return /* @__PURE__ */ React32__namespace.default.createElement(FormStatusContext.Provider, {
     value: contextValue
   }, children);
 };
-var WixRicosViewerContext = /* @__PURE__ */ React31.createContext(void 0);
+function useFormStatus() {
+  const context = React32.useContext(FormStatusContext);
+  if (context === void 0) {
+    throw new Error("useFormStatus must be used within a Form Status provider");
+  }
+  return context;
+}
+var WixRicosViewerContext = /* @__PURE__ */ React32.createContext(void 0);
 function useWixRicosViewer() {
-  const context = React31.useContext(WixRicosViewerContext);
+  const context = React32.useContext(WixRicosViewerContext);
   if (context === void 0) {
     throw new Error("useWixRicosViewer must be used within a WixRicosViewerContext.Provider");
   }
@@ -20651,7 +20656,7 @@ var link_viewer_default = {
 // ../../node_modules/@wix/ricos/dist/es/plugin-link/nodeViewDecorators/anchor.js
 var decorator = (anchorDecoration, element) => {
   const { anchor } = anchorDecoration.anchorData;
-  return /* @__PURE__ */ React31__namespace.default.createElement(
+  return /* @__PURE__ */ React32__namespace.default.createElement(
     "a",
     {
       key: `anchor-${element?.key}`,
@@ -20694,7 +20699,7 @@ var LINK_TYPE = "LINK";
 
 // ../../node_modules/@wix/ricos/dist/es/plugin-link/nodeViewDecorators/link.js
 var decorator2 = (element, linkDecoration, contextualData, node) => {
-  const { baseUrl } = React31.useContext(RicosViewerContext);
+  const { baseUrl } = React32.useContext(RicosViewerContext);
   const link = linkDecoration.linkData?.link;
   const target = link?.target || contextualData.anchorTarget;
   const rel = link?.rel || {};
@@ -20709,7 +20714,7 @@ var decorator2 = (element, linkDecoration, contextualData, node) => {
     type: Node_Type.TEXT,
     textData: node.textData
   });
-  return /* @__PURE__ */ React31__namespace.default.createElement(
+  return /* @__PURE__ */ React32__namespace.default.createElement(
     "a",
     {
       key: `link=${element.key}`,
@@ -20752,9 +20757,9 @@ var pluginLink = (config) => {
 
 // ../form-fields/dist/esm/ui/ricos-viewer/ricos-viewer.js
 var import_classnames3 = __toESM(require_classnames());
-var ConfigContext = /* @__PURE__ */ React31.createContext(null);
+var ConfigContext = /* @__PURE__ */ React32.createContext(null);
 function useConfig() {
-  const context = React31.useContext(ConfigContext);
+  const context = React32.useContext(ConfigContext);
   if (context === void 0) {
     throw new Error("useConfig must be used within a ConfigContext.Provider");
   }
@@ -20768,7 +20773,7 @@ var htmlAttributesPlugin = (_23) => ({
   type: "",
   nodeViewDecorators: [htmlAttributesDecorator],
   nodeViewRenderers: {
-    [Node_Type.EXTERNAL]: (__) => /* @__PURE__ */ React31__namespace.default.createElement(React31__namespace.default.Fragment, null)
+    [Node_Type.EXTERNAL]: (__) => /* @__PURE__ */ React32__namespace.default.createElement(React32__namespace.default.Fragment, null)
   }
 });
 var htmlAttributesDecorator = {
@@ -20779,13 +20784,13 @@ var htmlAttributesDecorator = {
       node
     } = _ref;
     if (((_node$textData = node.textData) == null ? void 0 : _node$textData.text) == null) {
-      return /* @__PURE__ */ React31__namespace.default.createElement(React31__namespace.default.Fragment, null);
+      return /* @__PURE__ */ React32__namespace.default.createElement(React32__namespace.default.Fragment, null);
     }
     const props = Object.fromEntries(Object.entries(((_node$externalData = node.externalData) == null ? void 0 : _node$externalData.fields) ?? []).map((_ref2) => {
       let [k, v] = _ref2;
       return [k, v.stringValue];
     }));
-    return /* @__PURE__ */ React31__namespace.default.createElement("span", props, (_node$textData2 = node.textData) == null ? void 0 : _node$textData2.text);
+    return /* @__PURE__ */ React32__namespace.default.createElement("span", props, (_node$textData2 = node.textData) == null ? void 0 : _node$textData2.text);
   }
 };
 
@@ -20804,10 +20809,10 @@ var RicosViewer = (_ref) => {
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ React31__namespace.default.createElement("div", {
+  return /* @__PURE__ */ React32__namespace.default.createElement("div", {
     className: (0, import_classnames3.default)(ricos_viewer_module_default.container, className),
     "data-hook": dataHook
-  }, /* @__PURE__ */ React31__namespace.default.createElement(WixRicosViewer, {
+  }, /* @__PURE__ */ React32__namespace.default.createElement(WixRicosViewer, {
     biSettings: {
       consumer: "Forms",
       platform: "Livesite",
@@ -20821,9 +20826,9 @@ var RicosViewer = (_ref) => {
     locale
   }));
 };
-var ricos_viewer_default = /* @__PURE__ */ React31__namespace.default.memo(RicosViewer);
+var ricos_viewer_default = /* @__PURE__ */ React32__namespace.default.memo(RicosViewer);
 function useRicosTheme(customTheme) {
-  return React31.useMemo(() => ({
+  return React32.useMemo(() => ({
     palette: {
       type: "rgb",
       bgColor: "var(--wix-forms-formInputBackgroundColor)",
@@ -20833,7 +20838,7 @@ function useRicosTheme(customTheme) {
     ...customTheme
   }), [customTheme]);
 }
-var UniqueFieldSuffixContext = /* @__PURE__ */ React31.createContext(void 0);
+var UniqueFieldSuffixContext = /* @__PURE__ */ React32.createContext(void 0);
 var UniqueFieldSuffixContextProvider = (_ref) => {
   let {
     parentId = "id",
@@ -20843,28 +20848,28 @@ var UniqueFieldSuffixContextProvider = (_ref) => {
     compId = "comp"
   } = useConfig();
   const uniqueId = `${compId}-${parentId.split("-").at(0)}`;
-  return /* @__PURE__ */ React31__namespace.default.createElement(UniqueFieldSuffixContext.Provider, {
+  return /* @__PURE__ */ React32__namespace.default.createElement(UniqueFieldSuffixContext.Provider, {
     value: uniqueId
   }, children);
 };
-var FocusedFieldContext = /* @__PURE__ */ React31.createContext(void 0);
+var FocusedFieldContext = /* @__PURE__ */ React32.createContext(void 0);
 var FocusedFieldProvider = (_ref) => {
   let {
     children
   } = _ref;
-  const [focusedFieldId, setFocusedFieldId] = React31__namespace.default.useState(void 0);
-  const contextValue = React31.useMemo(() => {
+  const [focusedFieldId, setFocusedFieldId] = React32__namespace.default.useState(void 0);
+  const contextValue = React32.useMemo(() => {
     return {
       focusedFieldId,
       setFocusedFieldId
     };
   }, [focusedFieldId, setFocusedFieldId]);
-  return /* @__PURE__ */ React31__namespace.default.createElement(FocusedFieldContext.Provider, {
+  return /* @__PURE__ */ React32__namespace.default.createElement(FocusedFieldContext.Provider, {
     value: contextValue
   }, children);
 };
 function useFocusedField() {
-  const context = React31.useContext(FocusedFieldContext);
+  const context = React32.useContext(FocusedFieldContext);
   if (context === void 0) {
     throw new Error("useFocusedField must be used within a FocusedFieldProvider");
   }
@@ -20872,14 +20877,14 @@ function useFocusedField() {
 }
 
 // ../form-fields/dist/esm/contexts/events-context.js
-var EventsContext = /* @__PURE__ */ React31.createContext(void 0);
+var EventsContext = /* @__PURE__ */ React32.createContext(void 0);
 var EventsProvider = (_ref) => {
   let {
     children
   } = _ref;
-  const [submitSuccessCounter, setSubmitSuccessCounter] = React31.useState(0);
-  const [submittedValues, setSubmittedValues] = React31.useState({});
-  const value = React31.useMemo(() => ({
+  const [submitSuccessCounter, setSubmitSuccessCounter] = React32.useState(0);
+  const [submittedValues, setSubmittedValues] = React32.useState({});
+  const value = React32.useMemo(() => ({
     submitSuccessCounter,
     submittedValues,
     fireSubmitSuccess: (values) => {
@@ -20887,12 +20892,12 @@ var EventsProvider = (_ref) => {
       setSubmittedValues(values || {});
     }
   }), [submitSuccessCounter, submittedValues]);
-  return /* @__PURE__ */ React31__namespace.default.createElement(EventsContext.Provider, {
+  return /* @__PURE__ */ React32__namespace.default.createElement(EventsContext.Provider, {
     value
   }, children);
 };
 var useEvents = () => {
-  const context = React31.useContext(EventsContext);
+  const context = React32.useContext(EventsContext);
   if (context === void 0) {
     throw new Error("useEvents must be used within a EventsProvider");
   }
@@ -20904,13 +20909,13 @@ var useSubmitSuccessTrigger = () => {
   } = useEvents();
   return fireSubmitSuccess;
 };
-var ScrollContext = /* @__PURE__ */ React31.createContext(void 0);
+var ScrollContext = /* @__PURE__ */ React32.createContext(void 0);
 var ScrollProvider = (_ref) => {
   let {
     children
   } = _ref;
-  const scrollViewRef = React31.useRef(null);
-  const value = React31.useMemo(() => ({
+  const scrollViewRef = React32.useRef(null);
+  const value = React32.useMemo(() => ({
     scrollTo: (element) => {
       if (element && scrollViewRef.current) {
         const {
@@ -20928,14 +20933,14 @@ var ScrollProvider = (_ref) => {
       }
     }
   }), []);
-  return /* @__PURE__ */ React31__namespace.default.createElement("div", {
+  return /* @__PURE__ */ React32__namespace.default.createElement("div", {
     ref: scrollViewRef
-  }, /* @__PURE__ */ React31__namespace.default.createElement(ScrollContext.Provider, {
+  }, /* @__PURE__ */ React32__namespace.default.createElement(ScrollContext.Provider, {
     value
   }, children));
 };
 function useScroll() {
-  const context = React31.useContext(ScrollContext);
+  const context = React32.useContext(ScrollContext);
   if (context === void 0) {
     throw new Error("useScroll must be used within a ScrollProvider");
   }
@@ -24351,9 +24356,9 @@ function initI18n({ icuOptions = {}, ...options }) {
 }
 
 // ../form-fields/dist/esm/contexts/translation-context.js
-var TranslationContext = /* @__PURE__ */ React31.createContext(void 0);
+var TranslationContext = /* @__PURE__ */ React32.createContext(void 0);
 function useTranslation() {
-  const context = React31.useContext(TranslationContext);
+  const context = React32.useContext(TranslationContext);
   if (context === void 0) {
     throw new Error("useTranslation must be used within a TranslationProvider");
   }
@@ -24375,18 +24380,18 @@ function generateUUID() {
   }
   return uuid;
 }
-var ExperimentsContext = /* @__PURE__ */ React31.createContext(void 0);
+var ExperimentsContext = /* @__PURE__ */ React32.createContext(void 0);
 var useExperiments = () => {
-  const experiments = React31.useContext(ExperimentsContext) || {};
+  const experiments = React32.useContext(ExperimentsContext) || {};
   return {
     experiments,
     isExperimentEnabled: (spec) => experiments[spec] === true || experiments[spec] === "true" || false
   };
 };
-var HttpClientContext = /* @__PURE__ */ React31.createContext(void 0);
-var FormContext = /* @__PURE__ */ React31.createContext(void 0);
+var HttpClientContext = /* @__PURE__ */ React32.createContext(void 0);
+var FormContext = /* @__PURE__ */ React32.createContext(void 0);
 function useForm() {
-  const context = React31.useContext(FormContext);
+  const context = React32.useContext(FormContext);
   if (context === void 0) {
     throw new Error("useForm must be used within a FormProvider");
   }
@@ -24394,9 +24399,9 @@ function useForm() {
 }
 
 // ../form-fields/dist/esm/contexts/panorama-context.js
-var PanoramaContext = /* @__PURE__ */ React31.createContext(void 0);
+var PanoramaContext = /* @__PURE__ */ React32.createContext(void 0);
 function usePanorama() {
-  const context = React31.useContext(PanoramaContext);
+  const context = React32.useContext(PanoramaContext);
   if (context === void 0) {
     throw new Error("usePanorama must be used within a PanoramaProvider");
   }
@@ -24415,37 +24420,40 @@ function usePanorama() {
     })
   };
 }
-var BiContext = /* @__PURE__ */ React31.createContext(void 0);
+var BiContext = /* @__PURE__ */ React32.createContext(void 0);
 function useBi() {
-  const context = React31.useContext(BiContext);
+  const context = React32.useContext(BiContext);
   if (context === void 0) {
     throw new Error("useBi must be used within a BiProvider");
   }
   return context;
 }
-var ForcedStateContext = /* @__PURE__ */ React31.createContext([]);
+var ForcedStateContext = /* @__PURE__ */ React32.createContext([]);
 var FALLBACK = {};
-var ExternalDataContext = /* @__PURE__ */ React31.createContext(void 0);
+var ExternalDataContext = /* @__PURE__ */ React32.createContext(void 0);
 var ExternalDataProvider = (_ref) => {
   let {
     children,
     externalData
   } = _ref;
-  return /* @__PURE__ */ React31__namespace.default.createElement(ExternalDataContext.Provider, {
+  return /* @__PURE__ */ React32__namespace.default.createElement(ExternalDataContext.Provider, {
     value: externalData ?? FALLBACK
   }, children);
 };
 function useExternalData() {
-  const context = React31.useContext(ExternalDataContext);
+  const context = React32.useContext(ExternalDataContext);
   if (context === void 0) {
     throw new Error("useExternalData must be used within a ExternalDataProvider");
   }
   return context;
 }
-var FieldActionsContext = /* @__PURE__ */ React31.createContext({});
-var FormFieldsContext = /* @__PURE__ */ React31.createContext(void 0);
+var FieldActionsContext = /* @__PURE__ */ React32.createContext({});
+function useFieldActions() {
+  return React32.useContext(FieldActionsContext);
+}
+var FormFieldsContext = /* @__PURE__ */ React32.createContext(void 0);
 function useFormFields() {
-  const context = React31.useContext(FormFieldsContext);
+  const context = React32.useContext(FormFieldsContext);
   if (context === void 0) {
     throw new Error("useFormFields must be used within a FormFieldsProvider");
   }
@@ -24453,7 +24461,7 @@ function useFormFields() {
 }
 
 // ../form-fields/dist/esm/ui/form/components/form/form-field.js
-var import_extends4 = __toESM(require_extends());
+var import_extends5 = __toESM(require_extends());
 
 // ../form-fields/dist/esm/ui/form/types/form-view.js
 function isInputField2(field) {
@@ -24497,7 +24505,7 @@ var InputField = (_ref) => {
   } = useFieldValidation();
   const form = useForm();
   const fieldValue = values[field.target];
-  const errorsByTarget = React31.useMemo(() => groupErrorsByTarget(errors), [errors]);
+  const errorsByTarget = React32.useMemo(() => groupErrorsByTarget(errors), [errors]);
   const fieldErrors = errorsByTarget == null ? void 0 : errorsByTarget[field.target];
   const fieldError = fieldErrors == null ? void 0 : fieldErrors[0];
   const {
@@ -24524,7 +24532,7 @@ var InputField = (_ref) => {
       field_target: field == null ? void 0 : field.target
     }));
   };
-  const handleChange = React31.useCallback((value) => {
+  const handleChange = React32.useCallback((value) => {
     if (fieldError) {
       validateFields2([{
         value,
@@ -24540,7 +24548,7 @@ var InputField = (_ref) => {
   if (!FieldComponent) {
     return null;
   }
-  return /* @__PURE__ */ React31__namespace.default.createElement(FieldComponent, (0, import_extends.default)({}, field.properties, {
+  return /* @__PURE__ */ React32__namespace.default.createElement(FieldComponent, (0, import_extends.default)({}, field.properties, {
     onChange: handleChange,
     onBlur: _onBlur,
     onFocus: _onFocus,
@@ -24576,7 +24584,7 @@ var ReadOnlyField = (_ref) => {
   if (!FieldComponent) {
     return null;
   }
-  return /* @__PURE__ */ React31__namespace.default.createElement(FieldComponent, (0, import_extends2.default)({}, field.properties, {
+  return /* @__PURE__ */ React32__namespace.default.createElement(FieldComponent, (0, import_extends2.default)({}, field.properties, {
     id: field.id,
     externalData,
     fieldType: field.fieldType,
@@ -24601,14 +24609,14 @@ var NestedFormField = (_ref) => {
   const externalData = useExternalData();
   const form = useForm();
   const fieldValue = values[field.target];
-  const errorsByTarget = React31.useMemo(() => groupErrorsByTarget(errors), [errors]);
+  const errorsByTarget = React32.useMemo(() => groupErrorsByTarget(errors), [errors]);
   const fieldErrors = errorsByTarget == null ? void 0 : errorsByTarget[field.target];
   const fieldError = fieldErrors == null ? void 0 : fieldErrors[0];
   const {
     requiredIndicator,
     requiredIndicatorPlacement
   } = form.requiredIndicatorProperties || {};
-  const handleChange = React31.useCallback((value) => {
+  const handleChange = React32.useCallback((value) => {
     if (!value) {
       value = null;
     }
@@ -24618,7 +24626,7 @@ var NestedFormField = (_ref) => {
   if (!FieldComponent) {
     return null;
   }
-  return /* @__PURE__ */ React31__namespace.default.createElement(FieldComponent, (0, import_extends3.default)({}, field.properties, {
+  return /* @__PURE__ */ React32__namespace.default.createElement(FieldComponent, (0, import_extends3.default)({}, field.properties, {
     onChange: handleChange,
     error: fieldError,
     errors: fieldErrors,
@@ -24634,6 +24642,130 @@ var NestedFormField = (_ref) => {
   }));
 };
 
+// ../form-fields/dist/esm/ui/form/components/form/submit-button-field.js
+var import_extends4 = __toESM(require_extends());
+
+// ../form-fields/dist/esm/fields/submit-button/submit-button/utils.js
+var getCurrentStep = (form, fieldId) => {
+  var _form$steps;
+  const stepCount = form != null && form.steps ? form.steps.length - 1 : 0;
+  const hasSteps = stepCount > 0;
+  const stepNumber = hasSteps && (form == null || (_form$steps = form.steps) == null ? void 0 : _form$steps.findIndex((step) => {
+    var _step$layout;
+    return (_step$layout = step.layout) == null || (_step$layout = _step$layout.large) == null || (_step$layout = _step$layout.items) == null ? void 0 : _step$layout.find((item) => item.fieldId === fieldId);
+  }));
+  const isLastStep = stepNumber === stepCount;
+  return {
+    hasSteps,
+    stepNumber,
+    isLastStep
+  };
+};
+
+// ../form-fields/dist/esm/fields/submit-button/submit-button/use-submit-button.js
+var useSubmitButton = (_ref) => {
+  let {
+    form,
+    id
+  } = _ref;
+  const {
+    hasSteps,
+    stepNumber,
+    isLastStep
+  } = getCurrentStep(form, id);
+  const {
+    inProgress,
+    actions
+  } = useFieldActions();
+  const [submitInProgress, setSubmitInProgress] = React32.useState(false);
+  const {
+    formStatus
+  } = useFormStatus();
+  const isDisabled = submitInProgress;
+  const isInProgress = inProgress || formStatus === FORM_STATUS.BUSY;
+  const showPreviousButton = hasSteps && stepNumber !== 0;
+  const showNextButton = hasSteps && !isLastStep;
+  const showSubmitButton = !hasSteps || hasSteps && isLastStep;
+  const handleSubmitClick = React32.useCallback(async () => {
+    if (isInProgress) {
+      return;
+    }
+    setSubmitInProgress(true);
+    try {
+      await (actions == null ? void 0 : actions.submitForm());
+    } catch (error2) {
+      console.error(error2);
+    }
+    setSubmitInProgress(false);
+  }, [actions, isInProgress]);
+  return {
+    handleSubmitClick,
+    isDisabled,
+    isInProgress,
+    showPreviousButton,
+    showNextButton,
+    showSubmitButton,
+    hasSteps
+  };
+};
+
+// ../form-fields/dist/esm/ui/form/components/form/submit-button-field.js
+var SubmitButtonField = (_ref) => {
+  let {
+    field,
+    FieldLayout
+  } = _ref;
+  const {
+    submitText,
+    nextText,
+    previousText,
+    text
+  } = field.properties;
+  const componentsById = useFormFields();
+  const externalData = useExternalData();
+  const form = useForm();
+  const {
+    actions
+  } = useFieldActions();
+  const {
+    handleSubmitClick,
+    isDisabled,
+    isInProgress,
+    showPreviousButton,
+    showNextButton,
+    showSubmitButton,
+    hasSteps
+  } = useSubmitButton({
+    form,
+    id: field.id
+  });
+  const submitButtonText = submitText || text || "";
+  const previousButtonText = previousText || "";
+  const nextButtonText = nextText || "";
+  const FieldComponent = componentsById[field.fieldType];
+  if (!FieldComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ React32__namespace.default.createElement(FieldComponent, (0, import_extends4.default)({}, field.properties, {
+    id: field.id,
+    externalData,
+    fieldType: field.fieldType,
+    FieldLayout,
+    hasSteps,
+    isDisabled,
+    isInProgress,
+    showPreviousButton,
+    showNextButton,
+    showSubmitButton,
+    submitText: submitButtonText,
+    previousText: previousButtonText,
+    nextText: nextButtonText,
+    onSubmitClick: handleSubmitClick,
+    onPreviousClick: () => actions == null ? void 0 : actions.setPreviousStep(),
+    onNextClick: () => actions == null ? void 0 : actions.setNextStep()
+  }));
+};
+
 // ../form-fields/dist/esm/services/multiline-address.js
 var isMultilineAddressField = (field) => {
   var _field$view3, _field$view4;
@@ -24648,18 +24780,24 @@ var FormField = (_ref) => {
     ...rest
   } = _ref;
   if (!isMultilineAddressField(field) && isNestedFormField(field)) {
-    return /* @__PURE__ */ React31__namespace.default.createElement(NestedFormField, (0, import_extends4.default)({}, rest, {
+    return /* @__PURE__ */ React32__namespace.default.createElement(NestedFormField, (0, import_extends5.default)({}, rest, {
       field,
       FieldLayout
     }));
   }
   if (isInputField2(field)) {
-    return /* @__PURE__ */ React31__namespace.default.createElement(InputField, (0, import_extends4.default)({}, rest, {
+    return /* @__PURE__ */ React32__namespace.default.createElement(InputField, (0, import_extends5.default)({}, rest, {
+      field,
+      FieldLayout
+    }));
+  }
+  if (field.fieldType === "SUBMIT_BUTTON") {
+    return /* @__PURE__ */ React32__namespace.default.createElement(SubmitButtonField, (0, import_extends5.default)({}, rest, {
       field,
       FieldLayout
     }));
   }
-  return /* @__PURE__ */ React31__namespace.default.createElement(ReadOnlyField, (0, import_extends4.default)({}, rest, {
+  return /* @__PURE__ */ React32__namespace.default.createElement(ReadOnlyField, (0, import_extends5.default)({}, rest, {
     field,
     FieldLayout
   }));
@@ -24675,7 +24813,7 @@ var createFormFields = (_ref) => {
     FieldLayout
   } = _ref;
   return form.fields.map((formField) => {
-    const component = /* @__PURE__ */ React31__namespace.default.createElement(FormField, {
+    const component = /* @__PURE__ */ React32__namespace.default.createElement(FormField, {
       key: formField.id,
       field: formField,
       values,
@@ -24710,19 +24848,19 @@ var Focusable = (_ref) => {
     children,
     fieldId
   } = _ref;
-  const viewRef = React31.useRef(null);
+  const viewRef = React32.useRef(null);
   const {
     scrollTo
   } = useScroll();
   const {
     focusedFieldId
   } = useFocusedField();
-  React31.useEffect(() => {
+  React32.useEffect(() => {
     if (viewRef.current && fieldId === focusedFieldId) {
       scrollTo(viewRef.current);
     }
   }, [scrollTo, fieldId, focusedFieldId]);
-  return /* @__PURE__ */ React31__namespace.default.createElement("div", {
+  return /* @__PURE__ */ React32__namespace.default.createElement("div", {
     ref: viewRef
   }, children);
 };
@@ -24745,17 +24883,17 @@ var Grid = (_ref) => {
     enableAnimations
   } = useConfig();
   const reactElementsByRow = getReactElementsByRow(items);
-  return /* @__PURE__ */ React31__namespace.default.createElement("div", {
+  return /* @__PURE__ */ React32__namespace.default.createElement("div", {
     className: grid_module_default.container,
     dir: isRTL ? "rtl" : ""
   }, reactElementsByRow.map((elements, index) => {
     var _elements$;
     const fieldId = (_elements$ = elements[0]) == null || (_elements$ = _elements$.props) == null || (_elements$ = _elements$.field) == null ? void 0 : _elements$.id;
     const key = isMobile && fieldId || index;
-    return /* @__PURE__ */ React31__namespace.default.createElement(Focusable, {
+    return /* @__PURE__ */ React32__namespace.default.createElement(Focusable, {
       key: fieldId,
       fieldId
-    }, /* @__PURE__ */ React31__namespace.default.createElement("div", {
+    }, /* @__PURE__ */ React32__namespace.default.createElement("div", {
       key,
       style: getGridStyle({
         layout
@@ -24769,7 +24907,7 @@ var Grid = (_ref) => {
 function getReactElementsByRow(items) {
   const reactElementsByRow = items.reduce((result2, item) => {
     const row = item.layout.row;
-    const element = /* @__PURE__ */ React31__namespace.default.cloneElement(item.component, {
+    const element = /* @__PURE__ */ React32__namespace.default.cloneElement(item.component, {
       key: item.id
     });
     if (result2[row]) {
@@ -24781,14 +24919,14 @@ function getReactElementsByRow(items) {
   }, []);
   return reactElementsByRow;
 }
-var FormViewContext = /* @__PURE__ */ React31.createContext(void 0);
+var FormViewContext = /* @__PURE__ */ React32.createContext(void 0);
 function useFieldView(fieldId) {
   const context = useFormView();
   const fieldView = context.fields.find((field) => field.id === fieldId);
   return fieldView;
 }
 function useFormView() {
-  const context = React31.useContext(FormViewContext);
+  const context = React32.useContext(FormViewContext);
   if (context === void 0) {
     throw new Error("useFormView must be used within a FormViewProvider");
   }
@@ -24796,7 +24934,7 @@ function useFormView() {
 }
 
 // ../form-fields/dist/esm/field-layout/default-field-layout.js
-var import_extends5 = __toESM(require_extends());
+var import_extends6 = __toESM(require_extends());
 
 // ../form-fields/dist/esm/field-layout/default-field-layout.module.scss
 var default_field_layout_module_default = {};
@@ -24825,7 +24963,7 @@ var DefaultFieldLayout = (_ref) => {
   const gridColumn = `${layout.column + 1} / span ${layout.width}`;
   const [labelRow, inputRow] = rows.map((currentRow) => `${currentRow} / span 1`);
   if ("children" in rest) {
-    return /* @__PURE__ */ React31__namespace.default.createElement("div", (0, import_extends5.default)({
+    return /* @__PURE__ */ React32__namespace.default.createElement("div", (0, import_extends6.default)({
       style: {
         gridRow,
         gridColumn
@@ -24837,13 +24975,13 @@ var DefaultFieldLayout = (_ref) => {
     renderInput,
     renderDescription
   } = rest;
-  return /* @__PURE__ */ React31__namespace.default.createElement(React31__namespace.default.Fragment, null, /* @__PURE__ */ React31__namespace.default.createElement("div", {
+  return /* @__PURE__ */ React32__namespace.default.createElement(React32__namespace.default.Fragment, null, /* @__PURE__ */ React32__namespace.default.createElement("div", {
     style: {
       gridRow: labelRow,
       gridColumn
     },
     className: default_field_layout_module_default.label
-  }, renderLabel()), /* @__PURE__ */ React31__namespace.default.createElement("div", (0, import_extends5.default)({
+  }, renderLabel()), /* @__PURE__ */ React32__namespace.default.createElement("div", (0, import_extends6.default)({
     style: {
       gridRow: inputRow,
       gridColumn
@@ -24869,18 +25007,18 @@ var FormRoot = (_ref) => {
     errors,
     FieldLayout: DefaultFieldLayout
   });
-  return /* @__PURE__ */ React31__namespace.default.createElement(Grid, {
+  return /* @__PURE__ */ React32__namespace.default.createElement(Grid, {
     isRTL,
     items: formFields,
     layout: form.grid
   });
 };
 var Form = (props) => {
-  return /* @__PURE__ */ React31__namespace.default.createElement(FormViewContext.Provider, {
+  return /* @__PURE__ */ React32__namespace.default.createElement(FormViewContext.Provider, {
     value: props.form
-  }, /* @__PURE__ */ React31__namespace.default.createElement(UniqueFieldSuffixContextProvider, {
+  }, /* @__PURE__ */ React32__namespace.default.createElement(UniqueFieldSuffixContextProvider, {
     parentId: props.form.parentId
-  }, /* @__PURE__ */ React31__namespace.default.createElement(FormRoot, props)));
+  }, /* @__PURE__ */ React32__namespace.default.createElement(FormRoot, props)));
 };
 
 // ../form-fields/dist/esm/utils/sort-fields.js
@@ -26862,19 +27000,19 @@ var initialState = {
   getCountryAddressForm: () => void 0,
   addressTemplates: void 0
 };
-var AddressFormsContext = /* @__PURE__ */ React31.createContext(initialState);
+var AddressFormsContext = /* @__PURE__ */ React32.createContext(initialState);
 var getAddressForm = (templates, country) => {
   var _templates$find, _templates$find2;
   return (templates == null || (_templates$find = templates.find((template) => template.country === country)) == null ? void 0 : _templates$find.template) || (templates == null || (_templates$find2 = templates.find((template) => template.country === "COMMON")) == null ? void 0 : _templates$find2.template);
 };
 function useAddressForms() {
-  const context = React31.useContext(AddressFormsContext);
+  const context = React32.useContext(AddressFormsContext);
   if (context === void 0) {
     throw new Error("useAddressForms must be used within a AddressFormsContext");
   }
   return context;
 }
-var FieldInitialDataContext = /* @__PURE__ */ React31.createContext(void 0);
+var FieldInitialDataContext = /* @__PURE__ */ React32.createContext(void 0);
 
 // ../form-fields/dist/esm/fields/vat-id/vat-id-validation.js
 init_esm2();
@@ -28868,8 +29006,8 @@ function acceptOnlyValidPayments({ field, fieldValue }) {
 
 // ../form-viewer/dist/esm/components/form/use-form-values.js
 var useFormValues = (form, values, onChange, config) => {
-  const normalizedValues = React31.useMemo(() => normalizeValues(form, fillEmptyValues(form, values), true, config), [form, values, config]);
-  React31.useEffect(() => {
+  const normalizedValues = React32.useMemo(() => normalizeValues(form, fillEmptyValues(form, values), true, config), [form, values, config]);
+  React32.useEffect(() => {
     const hasAnyValueChanged = !deepEqual(normalizedValues, values);
     if (hasAnyValueChanged) {
       onChange?.(normalizedValues);
@@ -28881,7 +29019,7 @@ var useFormView2 = (form, stepId, breakpoint) => {
   const { isMobile } = useConfig();
   const experiments = useExperiments();
   const useFieldsV2 = experiments.isExperimentEnabled(EXPERIMENTS.USE_FIELDS_V2);
-  return React31.useMemo(() => {
+  return React32.useMemo(() => {
     return (form?.steps || []).filter((step) => !stepId || stepId === step.id).map((step) => {
       return createFormView({
         form,
@@ -28894,7 +29032,7 @@ var useFormView2 = (form, stepId, breakpoint) => {
   }, [form, stepId, isMobile, breakpoint, useFieldsV2]);
 };
 var useReportFieldEdit = (form) => {
-  const lastChangedFields = React31.useRef([]);
+  const lastChangedFields = React32.useRef([]);
   const bi = useBi();
   return (changedValues) => {
     const changedFieldTargets = Object.keys(changedValues);
@@ -28914,7 +29052,7 @@ var useReportFieldEdit = (form) => {
 };
 var useScrollToFirstError = ({ form, handleStepChange, currentStepId }) => {
   const { setFocusedFieldId } = useFocusedField();
-  const scrollToFirstError = React31.useCallback((errors) => {
+  const scrollToFirstError = React32.useCallback((errors) => {
     const sortedFieldsInStep = getSortedFields(form, {
       stepId: currentStepId
     });
@@ -28923,7 +29061,7 @@ var useScrollToFirstError = ({ form, handleStepChange, currentStepId }) => {
     });
     setFocusedFieldId(fieldWithError?.id);
   }, [currentStepId, form, setFocusedFieldId]);
-  const handleScrollToFirstError = React31.useCallback((errors) => {
+  const handleScrollToFirstError = React32.useCallback((errors) => {
     const sortedFields = getSortedFields(form);
     const field = sortedFields?.find((_field) => {
       return errors.some((error2) => _field.target === error2.errorPath.split("/")[0]);
@@ -28998,12 +29136,12 @@ var getCheckoutMessage = (text) => {
     }
   };
 };
-var SubmitStatusContext = React31.createContext(void 0);
+var SubmitStatusContext = React32.createContext(void 0);
 var SubmitStatusProvider = ({ children }) => {
-  const [submitSuccessMessage, setSubmitSuccessMessage] = React31.useState();
-  const [submitFailureCode, setSubmitFailureCode] = React31.useState();
-  const [submitFailureMessage, setSubmitFailureMessage] = React31.useState();
-  const value = React31.useMemo(() => ({
+  const [submitSuccessMessage, setSubmitSuccessMessage] = React32.useState();
+  const [submitFailureCode, setSubmitFailureCode] = React32.useState();
+  const [submitFailureMessage, setSubmitFailureMessage] = React32.useState();
+  const value = React32.useMemo(() => ({
     submitSuccessMessage,
     submitFailureCode,
     submitFailureMessage,
@@ -29011,10 +29149,10 @@ var SubmitStatusProvider = ({ children }) => {
     setSubmitFailureCode,
     setSubmitFailureMessage
   }), [submitSuccessMessage, submitFailureCode, submitFailureMessage]);
-  return React31__namespace.default.createElement(SubmitStatusContext.Provider, { value }, children);
+  return React32__namespace.default.createElement(SubmitStatusContext.Provider, { value }, children);
 };
 var useSubmitStatus = () => {
-  const context = React31.useContext(SubmitStatusContext);
+  const context = React32.useContext(SubmitStatusContext);
   if (context === void 0) {
     throw new Error("useSubmitStatus must be used within a SubmitStatusProvider");
   }
@@ -29041,11 +29179,11 @@ var useSubmit = ({ validateAndScrollToError, submitAction, onSubmit, onSubmitSuc
   const { report } = useBi();
   const fireSubmitSuccess = useSubmitSuccessTrigger();
   const panorama = usePanorama();
-  const reportSubmitFormBi = React31.useCallback(({ status, id }) => report(submitFormClick({
+  const reportSubmitFormBi = React32.useCallback(({ status, id }) => report(submitFormClick({
     submission_status: status,
     submission_id: id ?? void 0
   })), [report]);
-  const handleSubmitSuccess = React31.useCallback((submission) => {
+  const handleSubmitSuccess = React32.useCallback((submission) => {
     const action = submitSettings?.submitSuccessAction;
     const checkoutId = submission?.orderDetails?.checkoutId;
     if (checkoutId && navigateToCheckout) {
@@ -29075,12 +29213,12 @@ var useSubmit = ({ validateAndScrollToError, submitAction, onSubmit, onSubmitSuc
     setSubmitFailureCode,
     setSubmitFailureMessage
   ]);
-  const handleSubmitFailure = React31.useCallback((error2) => {
+  const handleSubmitFailure = React32.useCallback((error2) => {
     const err = getErrorCode(error2);
     setSubmitFailureCode(err);
     setSubmitSuccessMessage(void 0);
   }, [setSubmitFailureCode, setSubmitSuccessMessage]);
-  const handleCustomErrorMessages = React31.useCallback((error2) => {
+  const handleCustomErrorMessages = React32.useCallback((error2) => {
     const errors = getErrorList(error2);
     const formCustomErrorMessage = getFormCustomErrorMessage(errors);
     if (formCustomErrorMessage) {
@@ -29092,7 +29230,7 @@ var useSubmit = ({ validateAndScrollToError, submitAction, onSubmit, onSubmitSuc
       handleScrollToFirstError?.(fieldCustomErrorMessages);
     }
   }, [setSubmitFailureMessage, onValidate, handleScrollToFirstError]);
-  const submitForm = React31.useCallback(async () => {
+  const submitForm = React32.useCallback(async () => {
     const errors = await validateAndScrollToError(values);
     onSubmit?.();
     reportSubmitFormBi({ status: BiFormSubmissionStatus.INIT });
@@ -29168,7 +29306,7 @@ var reportErrorChanges = ({ bi, existingErrors, newErrors, form }) => {
 var useValidation = ({ form, errorsRef, setErrors, validationMode }) => {
   const { addressTemplates } = useAddressForms();
   const externalData = useExternalData();
-  const validateFields2 = React31.useCallback(async (newValues) => {
+  const validateFields2 = React32.useCallback(async (newValues) => {
     const result2 = await validate(form, newValues, addressTemplates, validationMode);
     const _errors = result2?.errors || [];
     const additionalErrors = runAdditionalValidation({
@@ -29180,7 +29318,7 @@ var useValidation = ({ form, errorsRef, setErrors, validationMode }) => {
     setErrors(allErrors);
     return allErrors;
   }, [form, setErrors, addressTemplates, externalData, validationMode]);
-  const handleFieldValidation = React31.useCallback(async (fieldsToValidate) => {
+  const handleFieldValidation = React32.useCallback(async (fieldsToValidate) => {
     const fieldErrors = await getFieldErrors(fieldsToValidate, form, addressTemplates, externalData, validationMode);
     const otherErrors = (errorsRef.current ?? []).filter((error2) => {
       return !findErrorByNormalizedPath(fieldsToValidate, error2.errorPath);
@@ -29196,7 +29334,7 @@ var useValidation = ({ form, errorsRef, setErrors, validationMode }) => {
     externalData,
     validationMode
   ]);
-  const validateStep = React31.useCallback(async (stepId, newValues) => {
+  const validateStep = React32.useCallback(async (stepId, newValues) => {
     const items = form?.steps?.find((step) => step.id === stepId)?.layout?.large?.items || [];
     const validationErrors = await Promise.all(items.map(async (item) => {
       const field = form?.fields?.find((_field) => _field.id === item.fieldId);
@@ -29232,9 +29370,9 @@ var SubmitThankYouMessage = ({ messageText }) => {
   if (!messageText) {
     return null;
   }
-  return React31__namespace.default.createElement(ricos_viewer_default, { dataHook: DATA_HOOKS.SUBMIT_THANK_YOU_MESSAGE, content: messageText, customTheme, className: submit_status_message_module_default.thankYouMessage });
+  return React32__namespace.default.createElement(ricos_viewer_default, { dataHook: DATA_HOOKS.SUBMIT_THANK_YOU_MESSAGE, content: messageText, customTheme, className: submit_status_message_module_default.thankYouMessage });
 };
-var Error2 = ({ size, ...props }) => /* @__PURE__ */ React31__namespace.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: size || "24", height: size || "24", ...props }, /* @__PURE__ */ React31__namespace.createElement("path", { fillRule: "evenodd", d: "M11.5,3 C16.187,3 20,6.813 20,11.5 C20,16.187 16.187,20 11.5,20 C6.813,20 3,16.187 3,11.5 C3,6.813 6.813,3 11.5,3 Z M11.5,4 C7.364,4 4,7.364 4,11.5 C4,15.636 7.364,19 11.5,19 C15.636,19 19,15.636 19,11.5 C19,7.364 15.636,4 11.5,4 Z M12,14 L12,15 L11,15 L11,14 L12,14 Z M12,8 L12,13 L11,13 L11,8 L12,8 Z" }));
+var Error2 = ({ size, ...props }) => /* @__PURE__ */ React32__namespace.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: size || "24", height: size || "24", ...props }, /* @__PURE__ */ React32__namespace.createElement("path", { fillRule: "evenodd", d: "M11.5,3 C16.187,3 20,6.813 20,11.5 C20,16.187 16.187,20 11.5,20 C6.813,20 3,16.187 3,11.5 C3,6.813 6.813,3 11.5,3 Z M11.5,4 C7.364,4 4,7.364 4,11.5 C4,15.636 7.364,19 11.5,19 C15.636,19 19,15.636 19,11.5 C19,7.364 15.636,4 11.5,4 Z M12,14 L12,15 L11,15 L11,14 L12,14 Z M12,8 L12,13 L11,13 L11,8 L12,8 Z" }));
 Error2.displayName = "Error";
 var Error_default = Error2;
 
@@ -29247,10 +29385,10 @@ var SubmitErrorMessage = ({ errorMessageCode, errorMessage }) => {
   }
   const errorMessageKeyByCode = `${ERROR_MESSAGE_KEY}.${errorMessageCode}`;
   const errorMessageKey = i18n2.exists(`${TRANSLATIONS_NAMESPACE}:${errorMessageKeyByCode}`) ? errorMessageKeyByCode : ERROR_MESSAGE_KEY;
-  return React31__namespace.default.createElement(
+  return React32__namespace.default.createElement(
     "div",
     { className: submit_status_message_module_default.errorMessage, "data-hook": DATA_HOOKS.SUBMIT_ERROR_MESSAGE },
-    React31__namespace.default.createElement(Error_default, { className: submit_status_message_module_default.errorIcon, "aria-hidden": "true" }),
+    React32__namespace.default.createElement(Error_default, { className: submit_status_message_module_default.errorIcon, "aria-hidden": "true" }),
     errorMessage || t(errorMessageKey)
   );
 };
@@ -29270,8 +29408,8 @@ var transitionStyles = {
   exited: { opacity: 0 }
 };
 var FadeOut = ({ visible, children }) => {
-  const nodeRef = React31.useRef(null);
-  return React31__namespace.default.createElement(Transition_default, { nodeRef, in: visible, timeout: DURATION }, (state) => React31__namespace.default.createElement("div", { ref: nodeRef, style: {
+  const nodeRef = React32.useRef(null);
+  return React32__namespace.default.createElement(Transition_default, { nodeRef, in: visible, timeout: DURATION }, (state) => React32__namespace.default.createElement("div", { ref: nodeRef, style: {
     ...defaultStyle,
     ...transitionStyles[state]
   } }, [ENTERING, ENTERED, EXITING].includes(state) ? children : null));
@@ -29280,15 +29418,15 @@ var FadeOut = ({ visible, children }) => {
 // ../form-viewer/dist/esm/components/submit-status-message/submit-status-message.js
 var SubmitStatusMessage = () => {
   const { submitSuccessMessage, submitFailureCode, submitFailureMessage } = useSubmitStatus();
-  return React31__namespace.default.createElement(
+  return React32__namespace.default.createElement(
     "div",
     { role: "region", "aria-live": "polite" },
-    React31__namespace.default.createElement(
+    React32__namespace.default.createElement(
       FadeOut,
       { visible: !!submitSuccessMessage },
-      React31__namespace.default.createElement(SubmitThankYouMessage, { messageText: submitSuccessMessage })
+      React32__namespace.default.createElement(SubmitThankYouMessage, { messageText: submitSuccessMessage })
     ),
-    React31__namespace.default.createElement(SubmitErrorMessage, { errorMessageCode: submitFailureCode, errorMessage: submitFailureMessage })
+    React32__namespace.default.createElement(SubmitErrorMessage, { errorMessageCode: submitFailureCode, errorMessage: submitFailureMessage })
   );
 };
 var StepTitleA11y = ({ index = 0, total = 0 }) => {
@@ -29297,7 +29435,7 @@ var StepTitleA11y = ({ index = 0, total = 0 }) => {
     index: index + 1,
     total
   });
-  return total > 1 ? React31__namespace.default.createElement("span", { "aria-label": stepTitleA11y, "aria-live": "polite" }) : null;
+  return total > 1 ? React32__namespace.default.createElement("span", { "aria-label": stepTitleA11y, "aria-live": "polite" }) : null;
 };
 
 // ../form-viewer/dist/esm/components/form/form-root.js
@@ -29324,13 +29462,13 @@ var FormRoot2 = ({
   onStatusChange,
   validationMode
 }) => {
-  const formWithOverrides = React31.useMemo(() => applyAllOverrides(unprocessedForm, unprocessedValues, overrides), [unprocessedForm, unprocessedValues, overrides]);
+  const formWithOverrides = React32.useMemo(() => applyAllOverrides(unprocessedForm, unprocessedValues, overrides), [unprocessedForm, unprocessedValues, overrides]);
   const formId = formWithOverrides.id;
   const { setFocusedFieldId } = useFocusedField();
   const normalizedValues = useFormValues(formWithOverrides, unprocessedValues, onChange, config);
-  const valuesRef = React31.useRef(normalizedValues);
+  const valuesRef = React32.useRef(normalizedValues);
   valuesRef.current = normalizedValues;
-  const errorsRef = React31.useRef(errors);
+  const errorsRef = React32.useRef(errors);
   errorsRef.current = errors;
   const bi = useBi();
   const reportFieldEdit = useReportFieldEdit(formWithOverrides);
@@ -29359,7 +29497,7 @@ var FormRoot2 = ({
     });
     onValidate(newErrors);
   };
-  React31.useEffect(() => {
+  React32.useEffect(() => {
     bi.report(formView({ mode: readOnly ? "preview" : "live_site" }));
   }, []);
   const formViews = useFormView2(formWithOverrides, stepId, breakpoint);
@@ -29370,7 +29508,7 @@ var FormRoot2 = ({
     setErrors: _onValidate,
     validationMode
   });
-  const handleStepChange = React31.useCallback((step) => {
+  const handleStepChange = React32.useCallback((step) => {
     const newStepId = formWithOverrides.steps?.[step]?.id;
     if (newStepId) {
       const firstFieldInStep = getSortedFields(formWithOverrides, {
@@ -29385,17 +29523,17 @@ var FormRoot2 = ({
     handleStepChange,
     currentStepId: stepId
   });
-  const resetFormValues = React31.useCallback(() => {
+  const resetFormValues = React32.useCallback(() => {
     onChange(fillEmptyValues(formWithOverrides, {}));
   }, [formWithOverrides, onChange]);
-  const validateAndScrollToError = React31.useCallback(async (values) => {
+  const validateAndScrollToError = React32.useCallback(async (values) => {
     const validationErrors = await validateFields2(values);
     if (validationErrors && validationErrors.length) {
       handleScrollToFirstError(validationErrors);
     }
     return validationErrors;
   }, [validateFields2, handleScrollToFirstError]);
-  const submitAction = React31.useCallback(async (values) => {
+  const submitAction = React32.useCallback(async (values) => {
     const response = await actions?.submitForm?.(formId, values);
     return response?.submission;
   }, [actions, formId]);
@@ -29413,7 +29551,7 @@ var FormRoot2 = ({
     onValidate: _onValidate,
     handleScrollToFirstError
   });
-  React31.useImperativeHandle(forwardedRef, () => ({
+  React32.useImperativeHandle(forwardedRef, () => ({
     submit: submitForm,
     validate: async () => {
       const validationErrors = await validateFields2(normalizedValues);
@@ -29432,9 +29570,9 @@ var FormRoot2 = ({
     scrollToFirstError
   ]);
   const currentStep = getStepIndex(stepId, formWithOverrides.steps);
-  const setNextStep = React31.useCallback(() => handleStepChange(currentStep + 1), [currentStep, handleStepChange]);
-  const setPreviousStep = React31.useCallback(() => handleStepChange(currentStep - 1), [currentStep, handleStepChange]);
-  const fieldActions = React31.useMemo(() => actions ? {
+  const setNextStep = React32.useCallback(() => handleStepChange(currentStep + 1), [currentStep, handleStepChange]);
+  const setPreviousStep = React32.useCallback(() => handleStepChange(currentStep - 1), [currentStep, handleStepChange]);
+  const fieldActions = React32.useMemo(() => actions ? {
     actions: { ...actions, submitForm, setNextStep, setPreviousStep },
     formId,
     inProgress
@@ -29442,23 +29580,23 @@ var FormRoot2 = ({
   if (!formViews?.length || !currentView) {
     return null;
   }
-  return React31__namespace.default.createElement(
+  return React32__namespace.default.createElement(
     FieldValidationContext.Provider,
     { value: {
       validateFields: handleFieldValidation
     } },
-    React31__namespace.default.createElement(
+    React32__namespace.default.createElement(
       FieldActionsContext.Provider,
       { value: fieldActions },
-      React31__namespace.default.createElement(
+      React32__namespace.default.createElement(
         FormStatusProvider,
         { onStatusChange },
-        React31__namespace.default.createElement(
+        React32__namespace.default.createElement(
           "div",
           { "data-hook": DATA_HOOKS.FORM_ROOT },
-          React31__namespace.default.createElement(Form, { form: currentView, values: normalizedValues, onFieldChange, errors, dataHook: DATA_HOOKS.FORM_ROOT }),
-          React31__namespace.default.createElement(StepTitleA11y, { total: formWithOverrides.steps?.length, index: currentStep }),
-          React31__namespace.default.createElement(SubmitStatusMessage, null)
+          React32__namespace.default.createElement(Form, { form: currentView, values: normalizedValues, onFieldChange, errors, dataHook: DATA_HOOKS.FORM_ROOT }),
+          React32__namespace.default.createElement(StepTitleA11y, { total: formWithOverrides.steps?.length, index: currentStep }),
+          React32__namespace.default.createElement(SubmitStatusMessage, null)
         )
       )
     )
@@ -29471,8 +29609,8 @@ var dummyBi = {
   updateDefaults: () => dummyBi
 };
 var useFormBi = (form, bi, biFormFillSessionId) => {
-  const formEditSessionId = React31.useMemo(generateUUID, []);
-  return React31.useMemo(() => {
+  const formEditSessionId = React32.useMemo(generateUUID, []);
+  return React32.useMemo(() => {
     if (!bi) {
       return dummyBi;
     }
@@ -29502,12 +29640,12 @@ var useFormBi = (form, bi, biFormFillSessionId) => {
 
 // ../form-viewer/dist/esm/components/root/form-viewer-provider.js
 var FormViewerProvider = ({ i18n: i18n2, bi, biFormFillSessionId, form, isMobile, isEditor, isComposer, isRTL, compId, locale, regionalFormat, externalData, fields, forcedState, instance, children, httpClient, panorama, experiments, translationNamespace, currency, userData, WixRicosViewer, addressTemplates, atlasBaseUrl, fieldInitialData, enableAnimations }) => {
-  const translations = React31.useMemo(() => ({
+  const translations = React32.useMemo(() => ({
     t: i18n2.getFixedT(locale, translationNamespace),
     i18n: i18n2
   }), [locale, i18n2, translationNamespace]);
   const formBi = useFormBi(form, bi, biFormFillSessionId);
-  const config = React31.useMemo(() => ({
+  const config = React32.useMemo(() => ({
     locale,
     regionalFormat,
     instance,
@@ -29534,59 +29672,59 @@ var FormViewerProvider = ({ i18n: i18n2, bi, biFormFillSessionId, form, isMobile
     isRTL,
     enableAnimations
   ]);
-  const forcedViewState = React31.useMemo(() => forcedState ?? [], [forcedState]);
-  return React31__namespace.default.createElement(
+  const forcedViewState = React32.useMemo(() => forcedState ?? [], [forcedState]);
+  return React32__namespace.default.createElement(
     FormFieldsContext.Provider,
     { value: fields },
-    React31__namespace.default.createElement(
+    React32__namespace.default.createElement(
       HttpClientContext.Provider,
       { value: { httpClient } },
-      React31__namespace.default.createElement(
+      React32__namespace.default.createElement(
         PanoramaContext.Provider,
         { value: { panorama } },
-        React31__namespace.default.createElement(
+        React32__namespace.default.createElement(
           TranslationContext.Provider,
           { value: translations },
-          React31__namespace.default.createElement(
+          React32__namespace.default.createElement(
             ScrollProvider,
             null,
-            React31__namespace.default.createElement(
+            React32__namespace.default.createElement(
               FocusedFieldProvider,
               null,
-              React31__namespace.default.createElement(
+              React32__namespace.default.createElement(
                 FieldInitialDataContext.Provider,
                 { value: fieldInitialData },
-                React31__namespace.default.createElement(
+                React32__namespace.default.createElement(
                   BiContext.Provider,
                   { value: formBi },
-                  React31__namespace.default.createElement(
+                  React32__namespace.default.createElement(
                     ExternalDataProvider,
                     { externalData },
-                    React31__namespace.default.createElement(
+                    React32__namespace.default.createElement(
                       ConfigContext.Provider,
                       { value: config },
-                      React31__namespace.default.createElement(
+                      React32__namespace.default.createElement(
                         ForcedStateContext.Provider,
                         { value: forcedViewState },
-                        React31__namespace.default.createElement(
+                        React32__namespace.default.createElement(
                           FormContext.Provider,
                           { value: form },
-                          React31__namespace.default.createElement(
+                          React32__namespace.default.createElement(
                             AddressFormsContext.Provider,
                             { value: {
                               getCountryAddressForm: (country) => getAddressForm(addressTemplates, country),
                               addressTemplates
                             } },
-                            React31__namespace.default.createElement(
+                            React32__namespace.default.createElement(
                               ExperimentsContext.Provider,
                               { value: experiments },
-                              React31__namespace.default.createElement(
+                              React32__namespace.default.createElement(
                                 EventsProvider,
                                 null,
-                                React31__namespace.default.createElement(
+                                React32__namespace.default.createElement(
                                   WixRicosViewerContext.Provider,
                                   { value: WixRicosViewer },
-                                  React31__namespace.default.createElement(SubmitStatusProvider, null, children)
+                                  React32__namespace.default.createElement(SubmitStatusProvider, null, children)
                                 )
                               )
                             )
@@ -29625,17 +29763,17 @@ var DisabledFormOverlay = ({ content, isEditor }) => {
   if (isEditor || !content) {
     return null;
   }
-  return React31__namespace.default.createElement(ricos_viewer_default, { content, className: disabled_form_overlay_module_default.disabledFormOverlay, customTheme });
+  return React32__namespace.default.createElement(ricos_viewer_default, { content, className: disabled_form_overlay_module_default.disabledFormOverlay, customTheme });
 };
 
 // ../form-viewer/dist/esm/components/root/form-viewer-static.js
-var FormViewerStatic = React31.forwardRef(({ form, i18n: i18n2, isMobile, isRTL, config = null, readOnly = false, externalData, bi, biFormFillSessionId, translations, localeDataset, forcedState, httpClient, panorama, experiments, currency, fields, WixRicosViewer, breakpoint = Breakpoint.LARGE, allowFormDisable = true, fieldInitialData, enableAnimations, ...rest }, forwardedRef) => {
+var FormViewerStatic = React32.forwardRef(({ form, i18n: i18n2, isMobile, isRTL, config = null, readOnly = false, externalData, bi, biFormFillSessionId, translations, localeDataset, forcedState, httpClient, panorama, experiments, currency, fields, WixRicosViewer, breakpoint = Breakpoint.LARGE, allowFormDisable = true, fieldInitialData, enableAnimations, ...rest }, forwardedRef) => {
   const { locale = "en", regionalFormat = "en", userData } = config || {};
-  React31.useState(() => {
+  React32.useState(() => {
     translations && i18n2.addResources(locale, TRANSLATIONS_NAMESPACE, translations);
     localeDataset && i18n2.addResources(locale, TRANSLATIONS_NAMESPACE, localeDataset);
   });
-  const formWithValidSteps = React31.useMemo(() => ({
+  const formWithValidSteps = React32.useMemo(() => ({
     ...form,
     steps: form?.steps?.filter((step) => step.layout?.large?.items?.length) || []
   }), [form]);
@@ -29643,23 +29781,23 @@ var FormViewerStatic = React31.forwardRef(({ form, i18n: i18n2, isMobile, isRTL,
     return null;
   }
   const isDisabled = allowFormDisable && formWithValidSteps.properties?.disabled;
-  return React31__namespace.default.createElement(
-    React31__namespace.default.StrictMode,
+  return React32__namespace.default.createElement(
+    React32__namespace.default.StrictMode,
     null,
-    React31__namespace.default.createElement(
+    React32__namespace.default.createElement(
       FormViewerProvider,
       { httpClient, i18n: i18n2, bi, panorama, biFormFillSessionId, form: formWithValidSteps, locale, regionalFormat, isRTL, isMobile, isEditor: config?.isEditor, isComposer: config?.isComposer, externalData, fields, forcedState, instance: config?.instance, experiments, translationNamespace: TRANSLATIONS_NAMESPACE, currency, userData, WixRicosViewer, addressTemplates: config?.addressTemplates, atlasBaseUrl: config?.atlasBaseUrl, fieldInitialData, compId: config?.compId, enableAnimations },
-      React31__namespace.default.createElement(
+      React32__namespace.default.createElement(
         "form",
         { "aria-label": formWithValidSteps.properties?.name ?? "", id: `form-${formWithValidSteps.id}`, "data-hook": `form-${formWithValidSteps.id}`, className: (0, import_classnames5.default)({
           [form_viewer_static_module_default.readOnly]: readOnly,
           [form_viewer_static_module_default.disabled]: isDisabled && !config?.isEditor
         }), onSubmit: (e) => e.preventDefault() },
-        isDisabled && React31__namespace.default.createElement(DisabledFormOverlay, { content: formWithValidSteps.disabledFormMessage, isEditor: config?.isEditor }),
-        React31__namespace.default.createElement(
+        isDisabled && React32__namespace.default.createElement(DisabledFormOverlay, { content: formWithValidSteps.disabledFormMessage, isEditor: config?.isEditor }),
+        React32__namespace.default.createElement(
           "fieldset",
           { className: form_viewer_static_module_default.fieldsetReset, disabled: readOnly || isDisabled },
-          React31__namespace.default.createElement(FormRoot2, { form: formWithValidSteps, forwardedRef, config, breakpoint, ...rest })
+          React32__namespace.default.createElement(FormRoot2, { form: formWithValidSteps, forwardedRef, config, breakpoint, ...rest })
         )
       )
     )
@@ -29816,10 +29954,8 @@ var TimeInputMapper = (props) => {
 };
 var TextMapper = (props) => props;
 var SubmitButtonMapper = (props) => {
-  const { submitText } = props;
   return {
-    ...props,
-    text: submitText
+    ...props
   };
 };
 var ProductListMapper = (props) => {
@@ -30013,6 +30149,7 @@ function normalizeSchema(obj) {
   }
   return obj;
 }
+var LANGUAGE_CODE = "en";
 var mapFieldProps = (fields, mappers) => Object.fromEntries(
   Object.entries(fields).map(([fieldType, Component]) => [
     fieldType,
@@ -30031,26 +30168,31 @@ var Form2 = ({
   values,
   onChange,
   errors,
-  onValidate
+  onValidate,
+  submitForm
 }) => {
   const form = normalizeSchema(unformattedForm);
-  const siteConfig = {
-    locale: {
-      languageCode: "en"
+  const i18n2 = initI18n({ locale: LANGUAGE_CODE });
+  const [step, setStep] = React32.useState();
+  const actions = {
+    submitForm,
+    uploadFile: () => {
+      console.log("upload file not implemented");
     }
   };
-  const i18n2 = initI18n({ locale: siteConfig.locale.languageCode });
-  const mappedFieldProps = React31.useMemo(
+  const mappedFieldProps = React32.useMemo(
     () => mapFieldProps(fields, FIELD_PROP_MAP),
     [fields]
   );
-  const mappedFieldTypes = React31.useMemo(
+  const mappedFieldTypes = React32.useMemo(
     () => mapFieldTypes(mappedFieldProps, FIELD_TYPE_MAP),
     [mappedFieldProps]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
     FormViewerStatic,
     {
+      stepId: step,
+      onStepIdChange: setStep,
       form,
       values,
       onChange,
@@ -30060,9 +30202,10 @@ var Form2 = ({
       i18n: i18n2,
       WixRicosViewer: () => null,
       config: {
-        locale: siteConfig.locale.languageCode,
-        regionalFormat: siteConfig.locale.languageCode
-      }
+        locale: LANGUAGE_CODE,
+        regionalFormat: LANGUAGE_CODE
+      },
+      actions
     }
   );
 };