@wix/form-public 0.25.0 → 0.27.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import * as React31 from 'react';
-import React31__default, { createContext, forwardRef, useState, useMemo, useRef, useEffect, useCallback, useImperativeHandle, useContext } from 'react';
+import * as React32 from 'react';
+import React32__default, { createContext, forwardRef, useState, useMemo, useRef, useEffect, useCallback, useImperativeHandle, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import camelCase from 'lodash.camelcase';
 import mapKeys from 'lodash.mapkeys';
@@ -4261,7 +4261,7 @@ var require_classnames = __commonJS({
 var RicosViewerContext;
 var init_ViewerContext = __esm({
   "../../node_modules/@wix/ricos/dist/es/ricos-context/viewer/ViewerContext.js"() {
-    RicosViewerContext = React31__default.createContext(null);
+    RicosViewerContext = React32__default.createContext(null);
   }
 });
 
@@ -5210,16 +5210,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;
   }
 });
 
@@ -5285,7 +5285,7 @@ var init_PropTypes = __esm({
 var TransitionGroupContext_default;
 var init_TransitionGroupContext = __esm({
   "../../node_modules/react-transition-group/esm/TransitionGroupContext.js"() {
-    TransitionGroupContext_default = React31__default.createContext(null);
+    TransitionGroupContext_default = React32__default.createContext(null);
   }
 });
 
@@ -5517,13 +5517,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__default.createElement(TransitionGroupContext_default.Provider, {
+          /* @__PURE__ */ React32__default.createElement(TransitionGroupContext_default.Provider, {
             value: null
-          }, typeof children === "function" ? children(status, childProps) : React31__default.cloneElement(React31__default.Children.only(children), childProps))
+          }, typeof children === "function" ? children(status, childProps) : React32__default.cloneElement(React32__default.Children.only(children), childProps))
         );
       };
       return Transition2;
-    })(React31__default.Component);
+    })(React32__default.Component);
     Transition.contextType = TransitionGroupContext_default;
     Transition.propTypes = process.env.NODE_ENV !== "production" ? {
       /**
@@ -20493,7 +20493,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",
@@ -20504,8 +20503,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;
@@ -20557,10 +20555,17 @@ var FormStatusProvider = (_ref) => {
       setFormStatus
     };
   }, [currentFormStatus, setFormStatus]);
-  return /* @__PURE__ */ React31__default.createElement(FormStatusContext.Provider, {
+  return /* @__PURE__ */ React32__default.createElement(FormStatusContext.Provider, {
     value: contextValue
   }, children);
 };
+function useFormStatus() {
+  const context = useContext(FormStatusContext);
+  if (context === void 0) {
+    throw new Error("useFormStatus must be used within a Form Status provider");
+  }
+  return context;
+}
 var WixRicosViewerContext = /* @__PURE__ */ createContext(void 0);
 function useWixRicosViewer() {
   const context = useContext(WixRicosViewerContext);
@@ -20625,7 +20630,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__default.createElement(
+  return /* @__PURE__ */ React32__default.createElement(
     "a",
     {
       key: `anchor-${element?.key}`,
@@ -20683,7 +20688,7 @@ var decorator2 = (element, linkDecoration, contextualData, node) => {
     type: Node_Type.TEXT,
     textData: node.textData
   });
-  return /* @__PURE__ */ React31__default.createElement(
+  return /* @__PURE__ */ React32__default.createElement(
     "a",
     {
       key: `link=${element.key}`,
@@ -20742,7 +20747,7 @@ var htmlAttributesPlugin = (_23) => ({
   type: "",
   nodeViewDecorators: [htmlAttributesDecorator],
   nodeViewRenderers: {
-    [Node_Type.EXTERNAL]: (__) => /* @__PURE__ */ React31__default.createElement(React31__default.Fragment, null)
+    [Node_Type.EXTERNAL]: (__) => /* @__PURE__ */ React32__default.createElement(React32__default.Fragment, null)
   }
 });
 var htmlAttributesDecorator = {
@@ -20753,13 +20758,13 @@ var htmlAttributesDecorator = {
       node
     } = _ref;
     if (((_node$textData = node.textData) == null ? void 0 : _node$textData.text) == null) {
-      return /* @__PURE__ */ React31__default.createElement(React31__default.Fragment, null);
+      return /* @__PURE__ */ React32__default.createElement(React32__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__default.createElement("span", props, (_node$textData2 = node.textData) == null ? void 0 : _node$textData2.text);
+    return /* @__PURE__ */ React32__default.createElement("span", props, (_node$textData2 = node.textData) == null ? void 0 : _node$textData2.text);
   }
 };
 
@@ -20778,10 +20783,10 @@ var RicosViewer = (_ref) => {
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ React31__default.createElement("div", {
+  return /* @__PURE__ */ React32__default.createElement("div", {
     className: (0, import_classnames3.default)(ricos_viewer_module_default.container, className),
     "data-hook": dataHook
-  }, /* @__PURE__ */ React31__default.createElement(WixRicosViewer, {
+  }, /* @__PURE__ */ React32__default.createElement(WixRicosViewer, {
     biSettings: {
       consumer: "Forms",
       platform: "Livesite",
@@ -20795,7 +20800,7 @@ var RicosViewer = (_ref) => {
     locale
   }));
 };
-var ricos_viewer_default = /* @__PURE__ */ React31__default.memo(RicosViewer);
+var ricos_viewer_default = /* @__PURE__ */ React32__default.memo(RicosViewer);
 function useRicosTheme(customTheme) {
   return useMemo(() => ({
     palette: {
@@ -20817,7 +20822,7 @@ var UniqueFieldSuffixContextProvider = (_ref) => {
     compId = "comp"
   } = useConfig();
   const uniqueId = `${compId}-${parentId.split("-").at(0)}`;
-  return /* @__PURE__ */ React31__default.createElement(UniqueFieldSuffixContext.Provider, {
+  return /* @__PURE__ */ React32__default.createElement(UniqueFieldSuffixContext.Provider, {
     value: uniqueId
   }, children);
 };
@@ -20826,14 +20831,14 @@ var FocusedFieldProvider = (_ref) => {
   let {
     children
   } = _ref;
-  const [focusedFieldId, setFocusedFieldId] = React31__default.useState(void 0);
+  const [focusedFieldId, setFocusedFieldId] = React32__default.useState(void 0);
   const contextValue = useMemo(() => {
     return {
       focusedFieldId,
       setFocusedFieldId
     };
   }, [focusedFieldId, setFocusedFieldId]);
-  return /* @__PURE__ */ React31__default.createElement(FocusedFieldContext.Provider, {
+  return /* @__PURE__ */ React32__default.createElement(FocusedFieldContext.Provider, {
     value: contextValue
   }, children);
 };
@@ -20861,7 +20866,7 @@ var EventsProvider = (_ref) => {
       setSubmittedValues(values || {});
     }
   }), [submitSuccessCounter, submittedValues]);
-  return /* @__PURE__ */ React31__default.createElement(EventsContext.Provider, {
+  return /* @__PURE__ */ React32__default.createElement(EventsContext.Provider, {
     value
   }, children);
 };
@@ -20902,9 +20907,9 @@ var ScrollProvider = (_ref) => {
       }
     }
   }), []);
-  return /* @__PURE__ */ React31__default.createElement("div", {
+  return /* @__PURE__ */ React32__default.createElement("div", {
     ref: scrollViewRef
-  }, /* @__PURE__ */ React31__default.createElement(ScrollContext.Provider, {
+  }, /* @__PURE__ */ React32__default.createElement(ScrollContext.Provider, {
     value
   }, children));
 };
@@ -24405,7 +24410,7 @@ var ExternalDataProvider = (_ref) => {
     children,
     externalData
   } = _ref;
-  return /* @__PURE__ */ React31__default.createElement(ExternalDataContext.Provider, {
+  return /* @__PURE__ */ React32__default.createElement(ExternalDataContext.Provider, {
     value: externalData ?? FALLBACK
   }, children);
 };
@@ -24417,6 +24422,9 @@ function useExternalData() {
   return context;
 }
 var FieldActionsContext = /* @__PURE__ */ createContext({});
+function useFieldActions() {
+  return useContext(FieldActionsContext);
+}
 var FormFieldsContext = /* @__PURE__ */ createContext(void 0);
 function useFormFields() {
   const context = useContext(FormFieldsContext);
@@ -24427,7 +24435,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) {
@@ -24514,7 +24522,7 @@ var InputField = (_ref) => {
   if (!FieldComponent) {
     return null;
   }
-  return /* @__PURE__ */ React31__default.createElement(FieldComponent, (0, import_extends.default)({}, field.properties, {
+  return /* @__PURE__ */ React32__default.createElement(FieldComponent, (0, import_extends.default)({}, field.properties, {
     onChange: handleChange,
     onBlur: _onBlur,
     onFocus: _onFocus,
@@ -24550,7 +24558,7 @@ var ReadOnlyField = (_ref) => {
   if (!FieldComponent) {
     return null;
   }
-  return /* @__PURE__ */ React31__default.createElement(FieldComponent, (0, import_extends2.default)({}, field.properties, {
+  return /* @__PURE__ */ React32__default.createElement(FieldComponent, (0, import_extends2.default)({}, field.properties, {
     id: field.id,
     externalData,
     fieldType: field.fieldType,
@@ -24592,7 +24600,7 @@ var NestedFormField = (_ref) => {
   if (!FieldComponent) {
     return null;
   }
-  return /* @__PURE__ */ React31__default.createElement(FieldComponent, (0, import_extends3.default)({}, field.properties, {
+  return /* @__PURE__ */ React32__default.createElement(FieldComponent, (0, import_extends3.default)({}, field.properties, {
     onChange: handleChange,
     error: fieldError,
     errors: fieldErrors,
@@ -24608,6 +24616,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] = 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 = 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__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;
@@ -24622,18 +24754,24 @@ var FormField = (_ref) => {
     ...rest
   } = _ref;
   if (!isMultilineAddressField(field) && isNestedFormField(field)) {
-    return /* @__PURE__ */ React31__default.createElement(NestedFormField, (0, import_extends4.default)({}, rest, {
+    return /* @__PURE__ */ React32__default.createElement(NestedFormField, (0, import_extends5.default)({}, rest, {
       field,
       FieldLayout
     }));
   }
   if (isInputField2(field)) {
-    return /* @__PURE__ */ React31__default.createElement(InputField, (0, import_extends4.default)({}, rest, {
+    return /* @__PURE__ */ React32__default.createElement(InputField, (0, import_extends5.default)({}, rest, {
+      field,
+      FieldLayout
+    }));
+  }
+  if (field.fieldType === "SUBMIT_BUTTON") {
+    return /* @__PURE__ */ React32__default.createElement(SubmitButtonField, (0, import_extends5.default)({}, rest, {
       field,
       FieldLayout
     }));
   }
-  return /* @__PURE__ */ React31__default.createElement(ReadOnlyField, (0, import_extends4.default)({}, rest, {
+  return /* @__PURE__ */ React32__default.createElement(ReadOnlyField, (0, import_extends5.default)({}, rest, {
     field,
     FieldLayout
   }));
@@ -24649,7 +24787,7 @@ var createFormFields = (_ref) => {
     FieldLayout
   } = _ref;
   return form.fields.map((formField) => {
-    const component = /* @__PURE__ */ React31__default.createElement(FormField, {
+    const component = /* @__PURE__ */ React32__default.createElement(FormField, {
       key: formField.id,
       field: formField,
       values,
@@ -24672,6 +24810,8 @@ var getGridStyle = (_ref) => {
     layout
   } = _ref;
   return {
+    display: "grid",
+    width: "100%",
     gridTemplateColumns: `repeat(${layout.columns}, 1fr)`,
     gridAutoRows: "minmax(min-content, max-content) 1fr"
   };
@@ -24696,7 +24836,7 @@ var Focusable = (_ref) => {
       scrollTo(viewRef.current);
     }
   }, [scrollTo, fieldId, focusedFieldId]);
-  return /* @__PURE__ */ React31__default.createElement("div", {
+  return /* @__PURE__ */ React32__default.createElement("div", {
     ref: viewRef
   }, children);
 };
@@ -24719,17 +24859,17 @@ var Grid = (_ref) => {
     enableAnimations
   } = useConfig();
   const reactElementsByRow = getReactElementsByRow(items);
-  return /* @__PURE__ */ React31__default.createElement("div", {
+  return /* @__PURE__ */ React32__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__default.createElement(Focusable, {
+    return /* @__PURE__ */ React32__default.createElement(Focusable, {
       key: fieldId,
       fieldId
-    }, /* @__PURE__ */ React31__default.createElement("div", {
+    }, /* @__PURE__ */ React32__default.createElement("div", {
       key,
       style: getGridStyle({
         layout
@@ -24743,7 +24883,7 @@ var Grid = (_ref) => {
 function getReactElementsByRow(items) {
   const reactElementsByRow = items.reduce((result2, item) => {
     const row = item.layout.row;
-    const element = /* @__PURE__ */ React31__default.cloneElement(item.component, {
+    const element = /* @__PURE__ */ React32__default.cloneElement(item.component, {
       key: item.id
     });
     if (result2[row]) {
@@ -24770,7 +24910,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 = {};
@@ -24799,7 +24939,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__default.createElement("div", (0, import_extends5.default)({
+    return /* @__PURE__ */ React32__default.createElement("div", (0, import_extends6.default)({
       style: {
         gridRow,
         gridColumn
@@ -24811,13 +24951,13 @@ var DefaultFieldLayout = (_ref) => {
     renderInput,
     renderDescription
   } = rest;
-  return /* @__PURE__ */ React31__default.createElement(React31__default.Fragment, null, /* @__PURE__ */ React31__default.createElement("div", {
+  return /* @__PURE__ */ React32__default.createElement(React32__default.Fragment, null, /* @__PURE__ */ React32__default.createElement("div", {
     style: {
       gridRow: labelRow,
       gridColumn
     },
     className: default_field_layout_module_default.label
-  }, renderLabel()), /* @__PURE__ */ React31__default.createElement("div", (0, import_extends5.default)({
+  }, renderLabel()), /* @__PURE__ */ React32__default.createElement("div", (0, import_extends6.default)({
     style: {
       gridRow: inputRow,
       gridColumn
@@ -24843,18 +24983,18 @@ var FormRoot = (_ref) => {
     errors,
     FieldLayout: DefaultFieldLayout
   });
-  return /* @__PURE__ */ React31__default.createElement(Grid, {
+  return /* @__PURE__ */ React32__default.createElement(Grid, {
     isRTL,
     items: formFields,
     layout: form.grid
   });
 };
 var Form = (props) => {
-  return /* @__PURE__ */ React31__default.createElement(FormViewContext.Provider, {
+  return /* @__PURE__ */ React32__default.createElement(FormViewContext.Provider, {
     value: props.form
-  }, /* @__PURE__ */ React31__default.createElement(UniqueFieldSuffixContextProvider, {
+  }, /* @__PURE__ */ React32__default.createElement(UniqueFieldSuffixContextProvider, {
     parentId: props.form.parentId
-  }, /* @__PURE__ */ React31__default.createElement(FormRoot, props)));
+  }, /* @__PURE__ */ React32__default.createElement(FormRoot, props)));
 };
 
 // ../form-fields/dist/esm/utils/sort-fields.js
@@ -28985,7 +29125,7 @@ var SubmitStatusProvider = ({ children }) => {
     setSubmitFailureCode,
     setSubmitFailureMessage
   }), [submitSuccessMessage, submitFailureCode, submitFailureMessage]);
-  return React31__default.createElement(SubmitStatusContext.Provider, { value }, children);
+  return React32__default.createElement(SubmitStatusContext.Provider, { value }, children);
 };
 var useSubmitStatus = () => {
   const context = useContext(SubmitStatusContext);
@@ -29206,9 +29346,9 @@ var SubmitThankYouMessage = ({ messageText }) => {
   if (!messageText) {
     return null;
   }
-  return React31__default.createElement(ricos_viewer_default, { dataHook: DATA_HOOKS.SUBMIT_THANK_YOU_MESSAGE, content: messageText, customTheme, className: submit_status_message_module_default.thankYouMessage });
+  return React32__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.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: size || "24", height: size || "24", ...props }, /* @__PURE__ */ React31.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.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: size || "24", height: size || "24", ...props }, /* @__PURE__ */ React32.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;
 
@@ -29221,10 +29361,10 @@ var SubmitErrorMessage = ({ errorMessageCode, errorMessage }) => {
   }
   const errorMessageKeyByCode = `${ERROR_MESSAGE_KEY}.${errorMessageCode}`;
   const errorMessageKey = i18n2.exists(`${TRANSLATIONS_NAMESPACE}:${errorMessageKeyByCode}`) ? errorMessageKeyByCode : ERROR_MESSAGE_KEY;
-  return React31__default.createElement(
+  return React32__default.createElement(
     "div",
     { className: submit_status_message_module_default.errorMessage, "data-hook": DATA_HOOKS.SUBMIT_ERROR_MESSAGE },
-    React31__default.createElement(Error_default, { className: submit_status_message_module_default.errorIcon, "aria-hidden": "true" }),
+    React32__default.createElement(Error_default, { className: submit_status_message_module_default.errorIcon, "aria-hidden": "true" }),
     errorMessage || t(errorMessageKey)
   );
 };
@@ -29245,7 +29385,7 @@ var transitionStyles = {
 };
 var FadeOut = ({ visible, children }) => {
   const nodeRef = useRef(null);
-  return React31__default.createElement(Transition_default, { nodeRef, in: visible, timeout: DURATION }, (state) => React31__default.createElement("div", { ref: nodeRef, style: {
+  return React32__default.createElement(Transition_default, { nodeRef, in: visible, timeout: DURATION }, (state) => React32__default.createElement("div", { ref: nodeRef, style: {
     ...defaultStyle,
     ...transitionStyles[state]
   } }, [ENTERING, ENTERED, EXITING].includes(state) ? children : null));
@@ -29254,15 +29394,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__default.createElement(
+  return React32__default.createElement(
     "div",
     { role: "region", "aria-live": "polite" },
-    React31__default.createElement(
+    React32__default.createElement(
       FadeOut,
       { visible: !!submitSuccessMessage },
-      React31__default.createElement(SubmitThankYouMessage, { messageText: submitSuccessMessage })
+      React32__default.createElement(SubmitThankYouMessage, { messageText: submitSuccessMessage })
     ),
-    React31__default.createElement(SubmitErrorMessage, { errorMessageCode: submitFailureCode, errorMessage: submitFailureMessage })
+    React32__default.createElement(SubmitErrorMessage, { errorMessageCode: submitFailureCode, errorMessage: submitFailureMessage })
   );
 };
 var StepTitleA11y = ({ index = 0, total = 0 }) => {
@@ -29271,7 +29411,7 @@ var StepTitleA11y = ({ index = 0, total = 0 }) => {
     index: index + 1,
     total
   });
-  return total > 1 ? React31__default.createElement("span", { "aria-label": stepTitleA11y, "aria-live": "polite" }) : null;
+  return total > 1 ? React32__default.createElement("span", { "aria-label": stepTitleA11y, "aria-live": "polite" }) : null;
 };
 
 // ../form-viewer/dist/esm/components/form/form-root.js
@@ -29416,23 +29556,23 @@ var FormRoot2 = ({
   if (!formViews?.length || !currentView) {
     return null;
   }
-  return React31__default.createElement(
+  return React32__default.createElement(
     FieldValidationContext.Provider,
     { value: {
       validateFields: handleFieldValidation
     } },
-    React31__default.createElement(
+    React32__default.createElement(
       FieldActionsContext.Provider,
       { value: fieldActions },
-      React31__default.createElement(
+      React32__default.createElement(
         FormStatusProvider,
         { onStatusChange },
-        React31__default.createElement(
+        React32__default.createElement(
           "div",
           { "data-hook": DATA_HOOKS.FORM_ROOT },
-          React31__default.createElement(Form, { form: currentView, values: normalizedValues, onFieldChange, errors, dataHook: DATA_HOOKS.FORM_ROOT }),
-          React31__default.createElement(StepTitleA11y, { total: formWithOverrides.steps?.length, index: currentStep }),
-          React31__default.createElement(SubmitStatusMessage, null)
+          React32__default.createElement(Form, { form: currentView, values: normalizedValues, onFieldChange, errors, dataHook: DATA_HOOKS.FORM_ROOT }),
+          React32__default.createElement(StepTitleA11y, { total: formWithOverrides.steps?.length, index: currentStep }),
+          React32__default.createElement(SubmitStatusMessage, null)
         )
       )
     )
@@ -29509,58 +29649,58 @@ var FormViewerProvider = ({ i18n: i18n2, bi, biFormFillSessionId, form, isMobile
     enableAnimations
   ]);
   const forcedViewState = useMemo(() => forcedState ?? [], [forcedState]);
-  return React31__default.createElement(
+  return React32__default.createElement(
     FormFieldsContext.Provider,
     { value: fields },
-    React31__default.createElement(
+    React32__default.createElement(
       HttpClientContext.Provider,
       { value: { httpClient } },
-      React31__default.createElement(
+      React32__default.createElement(
         PanoramaContext.Provider,
         { value: { panorama } },
-        React31__default.createElement(
+        React32__default.createElement(
           TranslationContext.Provider,
           { value: translations },
-          React31__default.createElement(
+          React32__default.createElement(
             ScrollProvider,
             null,
-            React31__default.createElement(
+            React32__default.createElement(
               FocusedFieldProvider,
               null,
-              React31__default.createElement(
+              React32__default.createElement(
                 FieldInitialDataContext.Provider,
                 { value: fieldInitialData },
-                React31__default.createElement(
+                React32__default.createElement(
                   BiContext.Provider,
                   { value: formBi },
-                  React31__default.createElement(
+                  React32__default.createElement(
                     ExternalDataProvider,
                     { externalData },
-                    React31__default.createElement(
+                    React32__default.createElement(
                       ConfigContext.Provider,
                       { value: config },
-                      React31__default.createElement(
+                      React32__default.createElement(
                         ForcedStateContext.Provider,
                         { value: forcedViewState },
-                        React31__default.createElement(
+                        React32__default.createElement(
                           FormContext.Provider,
                           { value: form },
-                          React31__default.createElement(
+                          React32__default.createElement(
                             AddressFormsContext.Provider,
                             { value: {
                               getCountryAddressForm: (country) => getAddressForm(addressTemplates, country),
                               addressTemplates
                             } },
-                            React31__default.createElement(
+                            React32__default.createElement(
                               ExperimentsContext.Provider,
                               { value: experiments },
-                              React31__default.createElement(
+                              React32__default.createElement(
                                 EventsProvider,
                                 null,
-                                React31__default.createElement(
+                                React32__default.createElement(
                                   WixRicosViewerContext.Provider,
                                   { value: WixRicosViewer },
-                                  React31__default.createElement(SubmitStatusProvider, null, children)
+                                  React32__default.createElement(SubmitStatusProvider, null, children)
                                 )
                               )
                             )
@@ -29599,7 +29739,7 @@ var DisabledFormOverlay = ({ content, isEditor }) => {
   if (isEditor || !content) {
     return null;
   }
-  return React31__default.createElement(ricos_viewer_default, { content, className: disabled_form_overlay_module_default.disabledFormOverlay, customTheme });
+  return React32__default.createElement(ricos_viewer_default, { content, className: disabled_form_overlay_module_default.disabledFormOverlay, customTheme });
 };
 
 // ../form-viewer/dist/esm/components/root/form-viewer-static.js
@@ -29617,23 +29757,23 @@ var FormViewerStatic = forwardRef(({ form, i18n: i18n2, isMobile, isRTL, config
     return null;
   }
   const isDisabled = allowFormDisable && formWithValidSteps.properties?.disabled;
-  return React31__default.createElement(
-    React31__default.StrictMode,
+  return React32__default.createElement(
+    React32__default.StrictMode,
     null,
-    React31__default.createElement(
+    React32__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__default.createElement(
+      React32__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__default.createElement(DisabledFormOverlay, { content: formWithValidSteps.disabledFormMessage, isEditor: config?.isEditor }),
-        React31__default.createElement(
+        isDisabled && React32__default.createElement(DisabledFormOverlay, { content: formWithValidSteps.disabledFormMessage, isEditor: config?.isEditor }),
+        React32__default.createElement(
           "fieldset",
           { className: form_viewer_static_module_default.fieldsetReset, disabled: readOnly || isDisabled },
-          React31__default.createElement(FormRoot2, { form: formWithValidSteps, forwardedRef, config, breakpoint, ...rest })
+          React32__default.createElement(FormRoot2, { form: formWithValidSteps, forwardedRef, config, breakpoint, ...rest })
         )
       )
     )
@@ -29790,10 +29930,8 @@ var TimeInputMapper = (props) => {
 };
 var TextMapper = (props) => props;
 var SubmitButtonMapper = (props) => {
-  const { submitText } = props;
   return {
-    ...props,
-    text: submitText
+    ...props
   };
 };
 var ProductListMapper = (props) => {
@@ -29987,6 +30125,7 @@ function normalizeSchema(obj) {
   }
   return obj;
 }
+var LANGUAGE_CODE = "en";
 var mapFieldProps = (fields, mappers) => Object.fromEntries(
   Object.entries(fields).map(([fieldType, Component]) => [
     fieldType,
@@ -30005,15 +30144,18 @@ 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] = useState();
+  const actions = {
+    submitForm,
+    uploadFile: () => {
+      console.log("upload file not implemented");
     }
   };
-  const i18n2 = initI18n({ locale: siteConfig.locale.languageCode });
   const mappedFieldProps = useMemo(
     () => mapFieldProps(fields, FIELD_PROP_MAP),
     [fields]
@@ -30025,6 +30167,8 @@ var Form2 = ({
   return /* @__PURE__ */ jsx(
     FormViewerStatic,
     {
+      stepId: step,
+      onStepIdChange: setStep,
       form,
       values,
       onChange,
@@ -30034,9 +30178,10 @@ var Form2 = ({
       i18n: i18n2,
       WixRicosViewer: () => null,
       config: {
-        locale: siteConfig.locale.languageCode,
-        regionalFormat: siteConfig.locale.languageCode
-      }
+        locale: LANGUAGE_CODE,
+        regionalFormat: LANGUAGE_CODE
+      },
+      actions
     }
   );
 };