@wise/dynamic-flow-client 3.1.0-beta-81cefd.37 → 3.1.1

package/build/main.js

@@ -8612,7 +8612,7 @@ var translations = {
 var i18n_default = translations;
 
 // src/revamp/DynamicFlowWise.tsx
-var import_react56 = require("react");
+var import_react58 = require("react");
 var import_react_intl36 = require("react-intl");
 
 // src/revamp/wise/renderers/AlertRenderer.tsx
@@ -8818,29 +8818,49 @@ var BoxRenderer_default = BoxRenderer;
 
 // src/revamp/wise/renderers/ButtonRenderer.tsx
 var import_components42 = require("@transferwise/components");
+
+// src/revamp/renderers/LoadingContext.tsx
+var import_react50 = require("react");
+var LoadingContext = (0, import_react50.createContext)({ loadingState: "idle" });
+var LoadingContextProvider = LoadingContext.Provider;
+var useLoadingContext = () => {
+  const { loadingState } = (0, import_react50.useContext)(LoadingContext);
+  return { loadingState, isLoading: loadingState !== "idle" };
+};
+
+// src/revamp/wise/renderers/ButtonRenderer.tsx
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var ButtonRenderer = {
   canRenderType: "button",
-  render: ({ control, context, disabled, margin, title, size, onClick }) => {
-    const className = getMargin2(margin);
-    const priority = mapControl(control);
-    const type = priority === "tertiary" ? void 0 : mapContext(context);
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-      import_components42.Button,
-      {
-        block: true,
-        className,
-        disabled,
-        priority: mapControl(control),
-        size: mapSize(size),
-        type,
-        onClick,
-        children: title
-      }
-    );
-  }
+  render: ButtonRendererComponent
 };
-var ButtonRenderer_default = ButtonRenderer;
+function ButtonRendererComponent({
+  control,
+  context,
+  disabled,
+  margin,
+  title,
+  size,
+  onClick
+}) {
+  const className = getMargin2(margin);
+  const priority = mapControl(control);
+  const type = priority === "tertiary" ? void 0 : mapContext(context);
+  const { isLoading } = useLoadingContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+    import_components42.Button,
+    {
+      block: true,
+      className,
+      disabled: isLoading || disabled,
+      priority: mapControl(control),
+      size: mapSize(size),
+      type,
+      onClick,
+      children: title
+    }
+  );
+}
 var mapContext = (context) => {
   switch (context) {
     case "neutral":
@@ -8875,6 +8895,7 @@ var mapSize = (size) => {
       return "md";
   }
 };
+var ButtonRenderer_default = ButtonRenderer;
 
 // src/revamp/wise/renderers/ColumnsRenderer.tsx
 var import_classnames11 = __toESM(require_classnames());
@@ -9246,21 +9267,25 @@ function NavigationOptionMedia({ icon, image }) {
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var DecisionRenderer = {
   canRenderType: "decision",
-  render: ({ margin, options }) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: getMargin2(margin), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_components45.NavigationOptionsList, { children: options.map(({ description, disabled, icon, image, title, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  render: DecisionRendererComponent
+};
+var DecisionRenderer_default = DecisionRenderer;
+function DecisionRendererComponent({ margin, options }) {
+  const { isLoading } = useLoadingContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: getMargin2(margin), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_components45.NavigationOptionsList, { children: options.map(({ description, disabled, icon, image, title, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     import_components45.NavigationOption,
     {
       title,
       content: description,
-      disabled,
+      disabled: isLoading || disabled,
       media: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(NavigationOptionMedia, { icon, image }),
       showMediaCircle: false,
       showMediaAtAllSizes: true,
       onClick
     },
     JSON.stringify(title)
-  )) }) })
-};
-var DecisionRenderer_default = DecisionRenderer;
+  )) }) });
+}
 
 // src/revamp/wise/renderers/DividerRenderer.tsx
 var import_jsx_runtime90 = require("react/jsx-runtime");
@@ -9345,7 +9370,7 @@ var HeadingRenderer_default = HeadingRenderer;
 
 // src/revamp/wise/renderers/ImageRenderer.tsx
 var import_components48 = require("@transferwise/components");
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_jsx_runtime94 = require("react/jsx-runtime");
 var ImageRenderer = {
   canRenderType: "image",
@@ -9358,9 +9383,9 @@ function ImageRendererComponent({
   size,
   url
 }) {
-  const [imageSource, setImageSource] = (0, import_react50.useState)("");
+  const [imageSource, setImageSource] = (0, import_react51.useState)("");
   const httpClient = useHttpClient();
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     void getImageSource2(httpClient, url).then(setImageSource);
   }, [url, httpClient]);
   return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
@@ -9487,7 +9512,7 @@ var MarkdownRenderer_default = MarkdownRenderer;
 
 // src/revamp/wise/renderers/ModalRenderer.tsx
 var import_components53 = require("@transferwise/components");
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_jsx_runtime99 = require("react/jsx-runtime");
 var ModalRenderer = {
   canRenderType: "modal",
@@ -9495,7 +9520,7 @@ var ModalRenderer = {
 };
 var ModalRenderer_default = ModalRenderer;
 function DFModal({ content, margin, trigger }) {
-  const [visible, setVisible] = (0, import_react51.useState)(false);
+  const [visible, setVisible] = (0, import_react52.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: getMargin2(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_components53.Button, { priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
     /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
@@ -9658,9 +9683,9 @@ var import_react_intl32 = require("react-intl");
 
 // src/revamp/wise/renderers/hooks/useSnackBarIfAvailable.ts
 var import_components57 = require("@transferwise/components");
-var import_react52 = require("react");
+var import_react53 = require("react");
 function useSnackBarIfAvailable2() {
-  const context = (0, import_react52.useContext)(import_components57.SnackbarContext);
+  const context = (0, import_react53.useContext)(import_components57.SnackbarContext);
   return context ? context.createSnackbar : () => {
   };
 }
@@ -9709,7 +9734,7 @@ var ParagraphRenderer_default = ParagraphRenderer;
 
 // src/revamp/wise/renderers/RepeatableRenderer.tsx
 var import_components59 = require("@transferwise/components");
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_icons3 = require("@transferwise/icons");
 var import_react_intl33 = require("react-intl");
 var import_classnames14 = __toESM(require_classnames());
@@ -9733,7 +9758,7 @@ function Repeatable(props) {
     onRemove
   } = props;
   const { formatMessage } = (0, import_react_intl33.useIntl)();
-  const [openModalType, setOpenModalType] = (0, import_react53.useState)(null);
+  const [openModalType, setOpenModalType] = (0, import_react54.useState)(null);
   const onAddItem = () => {
     onAdd();
     setOpenModalType("add");
@@ -10377,7 +10402,7 @@ var getWiseRenderers = () => [
 ];
 
 // src/revamp/DynamicFlowCore.tsx
-var import_react55 = require("react");
+var import_react57 = require("react");
 var import_react_intl35 = require("react-intl");
 
 // src/revamp/domain/features/events/getAnalyticsEventDispatcher.ts
@@ -10646,8 +10671,85 @@ var CoreContainerRenderer = {
   render: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_jsx_runtime117.Fragment, { children })
 };
 
+// src/revamp/renderers/StepRenderer.tsx
+var import_react55 = require("react");
+var import_jsx_runtime118 = require("react/jsx-runtime");
+var StepRenderer = {
+  canRenderType: "step",
+  render: StepRendererComponent
+};
+function StepRendererComponent({ children, loadingState }) {
+  const value = (0, import_react55.useMemo)(() => ({ loadingState }), [loadingState]);
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(LoadingContextProvider, { value, children });
+}
+
 // src/revamp/step/Step.tsx
-var import_react54 = require("react");
+var import_react56 = require("react");
+
+// src/revamp/domain/features/validation/validation-functions.ts
+var validateComponents = (components) => components.reduce((acc, component) => component.validate() && acc, true);
+var getLocalValueValidator = (checks) => (currentValue) => checks.map((check) => check(currentValue)).filter(isString2);
+
+// src/revamp/domain/features/summary/summary-utils.ts
+var getSummariser = (schema) => (value) => {
+  const { summary, icon, image } = schema;
+  const stringValueOrNull = isString2(value) ? value : null;
+  return summaryIfProvides(summary, { value: stringValueOrNull, icon, image });
+};
+var getConstSummary = (schema, model) => {
+  const { summary, icon, image } = schema;
+  const value = isString2(model) ? model : null;
+  return summaryIfProvides(summary, { value, icon, image });
+};
+var summariseFromChildren = (components) => components.reduce(
+  (acc, component) => mergeSummaries(acc, component.getSummary()),
+  {}
+);
+var mergeSummaries = (summaryA, summaryB) => {
+  var _a, _b, _c, _d;
+  return {
+    title: (_a = summaryA.title) != null ? _a : summaryB.title,
+    description: (_b = summaryA.description) != null ? _b : summaryB.description,
+    icon: (_c = summaryA.icon) != null ? _c : summaryB.icon,
+    image: (_d = summaryA.image) != null ? _d : summaryB.image
+  };
+};
+var summaryIfProvides = (summary, { value, icon, image }) => {
+  if (!summary) {
+    return {};
+  }
+  return {
+    title: summary.providesTitle && value || void 0,
+    description: summary.providesDescription && value || void 0,
+    icon: summary.providesIcon && icon || void 0,
+    image: summary.providesImage && image || void 0
+  };
+};
+
+// src/revamp/domain/components/StepDomainComponent.ts
+var createStepComponent = (containerProps) => __spreadProps(__spreadValues({}, containerProps), {
+  type: "step",
+  getChildren() {
+    return this.components;
+  },
+  async getSubmittableValue() {
+    return getSubmittableData(this.components);
+  },
+  getSummary() {
+    return summariseFromChildren(this.getChildren());
+  },
+  getLocalValue() {
+    return getLocalValues(this.components);
+  },
+  validate() {
+    return validateComponents(this.getChildren());
+  }
+});
+var createEmptyStepComponent = () => createStepComponent({
+  uid: "",
+  loadingState: "idle",
+  components: []
+});
 
 // src/revamp/domain/components/AlertComponent.ts
 var createAlertComponent = (alertProps) => __spreadProps(__spreadValues({
@@ -10741,46 +10843,6 @@ var headingLayoutToComponent = (uid, { align = "left", margin = "md", size = "md
   text
 });
 
-// src/revamp/domain/features/summary/summary-utils.ts
-var getSummariser = (schema) => (value) => {
-  const { summary, icon, image } = schema;
-  const stringValueOrNull = isString2(value) ? value : null;
-  return summaryIfProvides(summary, { value: stringValueOrNull, icon, image });
-};
-var getConstSummary = (schema, model) => {
-  const { summary, icon, image } = schema;
-  const value = isString2(model) ? model : null;
-  return summaryIfProvides(summary, { value, icon, image });
-};
-var summariseFromChildren = (components) => components.reduce(
-  (acc, component) => mergeSummaries(acc, component.getSummary()),
-  {}
-);
-var mergeSummaries = (summaryA, summaryB) => {
-  var _a, _b, _c, _d;
-  return {
-    title: (_a = summaryA.title) != null ? _a : summaryB.title,
-    description: (_b = summaryA.description) != null ? _b : summaryB.description,
-    icon: (_c = summaryA.icon) != null ? _c : summaryB.icon,
-    image: (_d = summaryA.image) != null ? _d : summaryB.image
-  };
-};
-var summaryIfProvides = (summary, { value, icon, image }) => {
-  if (!summary) {
-    return {};
-  }
-  return {
-    title: summary.providesTitle && value || void 0,
-    description: summary.providesDescription && value || void 0,
-    icon: summary.providesIcon && icon || void 0,
-    image: summary.providesImage && image || void 0
-  };
-};
-
-// src/revamp/domain/features/validation/validation-functions.ts
-var validateComponents = (components) => components.reduce((acc, component) => component.validate() && acc, true);
-var getLocalValueValidator = (checks) => (currentValue) => checks.map((check) => check(currentValue)).filter(isString2);
-
 // src/revamp/domain/components/BoxComponent.ts
 var createBoxComponent = (boxProps) => __spreadProps(__spreadValues({}, boxProps), {
   type: "box",
@@ -10826,9 +10888,7 @@ var createButtonComponent = (buttonProps) => __spreadProps(__spreadValues({
 
 // src/revamp/domain/mappers/layout/buttonLayoutToComponent.ts
 var buttonLayoutToComponent = (uid, { action, context, control, disabled, margin = "md", pinOrder, size, title }, { onAction, step }) => {
-  var _a;
-  const refAction = (action == null ? void 0 : action.$ref) ? (_a = step == null ? void 0 : step.actions) == null ? void 0 : _a.find((a) => a.$id === (action == null ? void 0 : action.$ref)) : void 0;
-  const mergedAction = __spreadValues(__spreadValues({}, action), refAction);
+  const mergedAction = (action == null ? void 0 : action.$ref) ? __spreadValues(__spreadValues({}, getActionByReference(action.$ref, step == null ? void 0 : step.actions)), action) : action;
   return createButtonComponent({
     uid,
     context: getButtonContext({ context, action: mergedAction }),
@@ -10866,6 +10926,13 @@ var getButtonContext = ({ context, action }) => {
   }
   return (action == null ? void 0 : action.type) ? mapLegacyActionTypeToContext(action.type) : "neutral";
 };
+var getActionByReference = ($ref, actions = []) => {
+  const action = actions.find((a) => a.$id === $ref);
+  if (!action) {
+    throw new Error("Action reference not found in actions array.");
+  }
+  return action;
+};
 
 // src/revamp/domain/components/ColumnsComponent.ts
 var createColumnsComponent = (columnsProps) => __spreadProps(__spreadValues({}, columnsProps), {
@@ -11003,6 +11070,7 @@ var getComponentPersistAsync = (update, performPersistAsync) => (
         }
         update((draft) => {
           draft.errors = [error.message];
+          draft.persistedState.lastSubmitted = null;
         });
         throw error;
       }
@@ -11165,6 +11233,7 @@ var createNumberInputComponent = (numberInputProps, updateComponent) => {
   if (performPersistAsync) {
     const persist = getComponentPersistAsync(update, performPersistAsync);
     return __spreadProps(__spreadValues({}, numberComponent), {
+      isPersisted: true,
       onBlur() {
         if (this.validate()) {
           persist(this.persistedState, this.getLocalValue()).catch(() => {
@@ -11875,6 +11944,7 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
   if (performPersistAsync) {
     const persist = getComponentPersistAsync(update, performPersistAsync);
     return __spreadProps(__spreadValues({}, integerComponent), {
+      isPersisted: true,
       onBlur() {
         if (this.validate()) {
           persist(this.persistedState, this.getLocalValue()).catch(() => {
@@ -11938,27 +12008,35 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
 };
 
 // src/revamp/domain/components/utils/isPartialLocalValueMatch.ts
-var isPartialLocalValueMatch = (partialValue, value) => {
-  if (isArray2(partialValue) && isArray2(value)) {
-    return partialValue.every(
-      (_, index) => isPartialLocalValueMatch(partialValue[index], value[index])
-    );
+var isPartialLocalValueMatch = (partialValue, component) => {
+  if (isArray2(partialValue) && component.type === "repeatable") {
+    const children = component.getChildren();
+    return partialValue.every((value, index) => {
+      const childComponent = children[index];
+      return childComponent ? isPartialLocalValueMatch(value, childComponent) : false;
+    });
   }
-  if (isObjectLocalValue(partialValue) && isObjectLocalValue(value)) {
-    const allKeys = Array.from(/* @__PURE__ */ new Set([...Object.keys(partialValue), ...Object.keys(value)]));
+  if (isObjectLocalValue(partialValue) && component.type === "object") {
+    const allKeys = Array.from(
+      /* @__PURE__ */ new Set([...Object.keys(partialValue), ...Object.keys(component.componentMap)])
+    );
     const matchingKeys = allKeys.filter(
-      (key) => !isNullish3(partialValue[key]) && !isNullish3(value[key])
+      (key) => !isNullish3(partialValue[key]) && !isNullish3(component.componentMap[key])
+    );
+    return matchingKeys.every(
+      (key) => isPartialLocalValueMatch(partialValue[key], component.componentMap[key])
     );
-    return matchingKeys.every((key) => isPartialLocalValueMatch(partialValue[key], value[key]));
   }
-  return partialValue === value;
-};
-var pickIndexOfFirstMatch = (arr) => {
-  if (arr.length > 0 && arr.every((e) => e === arr[0])) {
-    return null;
+  const componentValue = component.getLocalValue();
+  if (partialValue instanceof File && componentValue instanceof File) {
+    return areEquivalentFiles(partialValue, componentValue);
   }
-  return arr.findIndex((e) => e);
+  if ("isPersisted" in component && component.isPersisted) {
+    return true;
+  }
+  return partialValue === componentValue;
 };
+var areEquivalentFiles = (fileA, fileB) => fileA.name === fileB.name && fileA.type === fileB.type && fileA.size === fileB.size;
 
 // src/revamp/domain/components/SelectInputComponent.ts
 var createSelectInputComponent = (selectProps, updateComponent) => {
@@ -11980,11 +12058,10 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
     "summariser"
   ]);
   const children = options.map((option) => option.component);
-  const selectedIndex = pickIndexOfFirstMatch(
-    options.map(
-      (option) => isPartialLocalValueMatch(selectProps.initialValue, option.component.getLocalValue())
-    )
+  const matchingOptions = options.map(
+    (option) => isPartialLocalValueMatch(selectProps.initialValue, option.component)
   );
+  const selectedIndex = matchingOptions.filter(isTrue).length === 1 ? matchingOptions.indexOf(true) : null;
   const update = getInputUpdateFunction(uid, updateComponent);
   const getValidationErrors = getLocalValueValidator(checks);
   const getAndSetValidationErrors = (currentValue) => {
@@ -12051,6 +12128,7 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
   }
   const persist = getComponentPersistAsync(update, performPersistAsync);
   return __spreadProps(__spreadValues({}, selectComponent), {
+    isPersisted: true,
     onSelect(updatedIndex) {
       selectComponent.onSelect.call(this, updatedIndex);
       const isValid = getValidationErrors(this.getLocalValue()).length === 0;
@@ -12064,6 +12142,7 @@ var createSelectInputComponent = (selectProps, updateComponent) => {
     }
   });
 };
+var isTrue = (value) => value;
 
 // src/revamp/domain/mappers/schema/oneOfSchemaToComponent/oneOfSchemaToComponent.ts
 var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
@@ -12196,6 +12275,7 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
   if (performPersistAsync) {
     const persist = getComponentPersistAsync(update, performPersistAsync);
     return __spreadProps(__spreadValues({}, dateInputComponent), {
+      isPersisted: true,
       onChange(updatedValue) {
         dateInputComponent.onChange.call(this, updatedValue);
         const isValid = getValidationErrors(updatedValue).length === 0;
@@ -12345,6 +12425,7 @@ var createUploadInputComponent = (uploadInputProps, updateComponent) => {
   const persist = getComponentPersistAsync(update, performPersistAsync);
   return __spreadProps(__spreadValues({}, uploadComponent), {
     format,
+    isPersisted: true,
     async onUpload(file) {
       update((draft) => {
         draft.errors = [];
@@ -12462,6 +12543,7 @@ var createTextInputComponent = (textInputProps, updateComponent) => {
   if (performPersistAsync) {
     const persist = getComponentPersistAsync(update, performPersistAsync);
     return __spreadProps(__spreadValues({}, inputComponent), {
+      isPersisted: true,
       onBlur() {
         if (this.validate()) {
           persist(this.persistedState, this.getLocalValue()).catch(() => {
@@ -12811,6 +12893,7 @@ var createMultiUploadInputComponent = (uploadInputProps, updateComponent) => {
   const persist = getComponentMultiPersistAsync(update, performPersistAsync);
   return __spreadProps(__spreadValues({}, uploadComponent), {
     format,
+    isPersisted: true,
     async onUpload(file, fileId) {
       await uploadComponent.onUpload.call(this, file, fileId);
       const submission = format === "blob" ? file : await toBase642(file);
@@ -12961,6 +13044,7 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
   if (performPersistAsync) {
     const persist = getComponentPersistAsync(update, performPersistAsync);
     return __spreadProps(__spreadValues({}, booleanComponent), {
+      isPersisted: true,
       onChange(updatedValue) {
         booleanComponent.onChange.call(this, updatedValue);
         persist(this.persistedState, this.getLocalValue()).catch(() => {
@@ -13139,7 +13223,7 @@ var formLayoutToComponent = (uid, { schemaId, schema: schemaRef, control, margin
   const id = schemaId != null ? schemaId : schemaRef == null ? void 0 : schemaRef.$ref;
   const schema = schemas.find((s) => s.$id === id);
   if (!schema) {
-    throw new Error("Bad layout schemaId");
+    throw new Error("Schema not found in schemas array.");
   }
   return createFormComponent({
     uid,
@@ -13573,36 +13657,41 @@ var mapLayoutToComponent = (uid, layout, mapperProps) => {
   }
 };
 
-// src/revamp/domain/mappers/mapStepToComponents.ts
-var mapStepToComponents = (_a) => {
+// src/revamp/domain/mappers/mapStepToComponent.ts
+var mapStepToComponent = (_a) => {
   var _b = _a, {
+    loadingState,
     displayStepTitle
   } = _b, mapperProps = __objRest(_b, [
+    "loadingState",
     "displayStepTitle"
   ]);
   const { id, key, title, layout = [], errors } = mapperProps.step;
   const stepId = id || key;
   const uid = stepId != null ? stepId : "step";
-  const heading = title && displayStepTitle && headingLayoutToComponent(`${uid}.title`, {
-    // prefix step id or flow id
+  const heading = title && displayStepTitle ? headingLayoutToComponent(`${uid}.title`, {
     type: "heading",
     text: title,
     align: "center",
     size: "lg"
-  });
-  const stepError = (errors == null ? void 0 : errors.error) && alertLayoutToComponent(`${uid}.global-error`, {
+  }) : void 0;
+  const stepError = (errors == null ? void 0 : errors.error) ? alertLayoutToComponent(`${uid}.global-error`, {
     type: "alert",
     markdown: errors.error,
     context: "negative"
-  });
-  const stepComponents = [...heading ? [heading] : [], ...stepError ? [stepError] : []];
+  }) : void 0;
+  const additionalComponents = [...heading ? [heading] : [], ...stepError ? [stepError] : []];
   const layoutComponents = layout.map(
     (layoutComponent, index) => mapLayoutToComponent(`${uid}.layout-${index}`, layoutComponent, mapperProps)
   );
   if (stepId === void 0) {
     throw new Error("Step must have an id or a key");
   }
-  return [...stepComponents, ...layoutComponents];
+  return createStepComponent({
+    uid,
+    loadingState,
+    components: [...additionalComponents, ...layoutComponents]
+  });
 };
 
 // src/revamp/utils/findComponent.ts
@@ -13625,11 +13714,13 @@ var flattenComponents = (components) => components.reduce((acc, component) => {
 }, []);
 
 // src/revamp/step/Step.tsx
-var import_jsx_runtime118 = require("react/jsx-runtime");
+var import_jsx_runtime119 = require("react/jsx-runtime");
+var emptyStepComponent = createEmptyStepComponent();
 function Step({
   localValue: initialLocalValue,
   step,
   displayStepTitle = true,
+  loadingState,
   getErrorMessageFunctions,
   render,
   httpClient,
@@ -13639,27 +13730,36 @@ function Step({
   triggerRefresh
 }) {
   var _a;
-  const [components, setComponents] = (0, import_react54.useState)([]);
-  const componentsRef = (0, import_react54.useRef)([]);
-  const updateComponent = (0, import_react54.useCallback)((id, update) => {
-    const componentTree = componentsRef.current;
-    update(findComponent(componentTree, id));
-    setComponents(() => {
-      const newComponentTree = [...componentTree];
-      componentsRef.current = newComponentTree;
-      return newComponentTree;
+  const [stepComponent, setStepComponent] = (0, import_react56.useState)(emptyStepComponent);
+  const stepComponentRef = (0, import_react56.useRef)(emptyStepComponent);
+  const updateComponent = (0, import_react56.useCallback)(
+    (id, update) => {
+      update(findComponent([stepComponentRef.current], id));
+      setStepComponent(() => {
+        const newStepDomainComponent = __spreadValues({}, stepComponentRef.current);
+        stepComponentRef.current = newStepDomainComponent;
+        return newStepDomainComponent;
+      });
+    },
+    []
+  );
+  (0, import_react56.useEffect)(() => {
+    setStepComponent(() => {
+      const newStepDomainComponent = __spreadProps(__spreadValues({}, stepComponentRef.current), { loadingState });
+      stepComponentRef.current = newStepDomainComponent;
+      return newStepDomainComponent;
     });
-  }, []);
-  const onAction = (0, import_react54.useCallback)(
+  }, [loadingState]);
+  const onAction = (0, import_react56.useCallback)(
     async (action) => {
       var _a2;
       const skipValidation = action.method === "GET" || Boolean(action.skipValidation);
-      const canSubmit = skipValidation || validateComponents(componentsRef.current);
+      const canSubmit = skipValidation || stepComponentRef.current.validate();
       if (canSubmit) {
         try {
-          const model = await getSubmittableData(componentsRef.current);
+          const model = await stepComponentRef.current.getSubmittableValue();
           const payload = mergeModels(model, (_a2 = action.data) != null ? _a2 : null);
-          const localValue = getLocalValues(componentsRef.current);
+          const localValue = stepComponentRef.current.getLocalValue();
           void triggerSubmission(action, payload, localValue);
         } catch (e) {
           if (true) {
@@ -13670,23 +13770,24 @@ function Step({
     },
     [triggerSubmission]
   );
-  const onRefresh = (0, import_react54.useCallback)(
+  const onRefresh = (0, import_react56.useCallback)(
     async (schemaId, url) => {
       var _a2;
       const refreshUrl = (_a2 = url != null ? url : step.refreshUrl) != null ? _a2 : step.refreshFormUrl;
       if (refreshUrl) {
-        const model = await getSubmittableData(componentsRef.current);
-        const localValue = getLocalValues(componentsRef.current);
+        const model = await stepComponentRef.current.getSubmittableValue();
+        const localValue = stepComponentRef.current.getLocalValue();
         void triggerRefresh({ refreshUrl, model, localValue, schemaId });
       }
     },
     [step.refreshUrl, step.refreshFormUrl, triggerRefresh]
   );
-  (0, import_react54.useEffect)(() => {
-    const initialComponents = mapStepToComponents({
+  (0, import_react56.useEffect)(() => {
+    const initialComponent = mapStepToComponent({
       stepLocalValue: initialLocalValue,
       step,
       displayStepTitle,
+      loadingState,
       updateComponent,
       getErrorMessageFunctions,
       trackEvent,
@@ -13695,13 +13796,12 @@ function Step({
       onAction,
       onRefresh
     });
-    setComponents(initialComponents);
-    componentsRef.current = initialComponents;
+    setStepComponent(initialComponent);
+    stepComponentRef.current = initialComponent;
     if (step.key) {
       logEvent("warning", 'Step.key is deprecated, please use "id" instead');
     }
   }, [
-    initialLocalValue,
     step,
     displayStepTitle,
     updateComponent,
@@ -13712,13 +13812,20 @@ function Step({
     logEvent,
     onRefresh
   ]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     trackEvent("Step Shown");
   }, [(_a = step.id) != null ? _a : step.key]);
-  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_jsx_runtime118.Fragment, { children: components.map(render) });
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_jsx_runtime119.Fragment, { children: render(stepComponent) });
 }
 var Step_default = Step;
 
+// src/revamp/renderers/stepComponentToProps.ts
+var stepComponentToProps = ({ loadingState }, children) => ({
+  type: "step",
+  loadingState,
+  children
+});
+
 // src/revamp/renderers/mappers/alertComponentToProps.ts
 var alertComponentToProps = ({
   context,
@@ -13855,54 +13962,6 @@ var hiddenComponentToProps = () => ({
   type: "hidden"
 });
 
-// src/revamp/renderers/mappers/searchComponentToProps.ts
-var searchComponentToProps = (component) => {
-  const { uid, control, emptyMessage, error, isLoading, margin, query, results, title } = component;
-  const onChange = component.onChange.bind(component);
-  const onSelect = component.onSelect.bind(component);
-  const state = getSearchState({
-    emptyMessage,
-    error,
-    query,
-    results,
-    onChange,
-    onSelect
-  });
-  return {
-    type: "search",
-    id: uid,
-    control,
-    isLoading,
-    margin,
-    query,
-    state,
-    title,
-    onChange
-  };
-};
-var getSearchState = ({
-  emptyMessage,
-  error,
-  query,
-  results,
-  onChange,
-  onSelect
-}) => {
-  if (!query) {
-    return { type: "pending" };
-  }
-  if (error) {
-    return { type: "error", onRetry: () => onChange(query) };
-  }
-  if (results.length === 0) {
-    return { type: "noResults", message: emptyMessage };
-  }
-  const rendererResults = results.map((result) => __spreadProps(__spreadValues({}, result), {
-    onClick: () => onSelect(result)
-  }));
-  return { type: "results", results: rendererResults };
-};
-
 // src/revamp/renderers/mappers/imageComponentToProps.ts
 var imageComponentToProps = ({
   accessibilityDescription,
@@ -13973,6 +14032,34 @@ var modalComponentToProps = ({ control, margin, trigger }, components) => ({
   trigger
 });
 
+// src/revamp/renderers/mappers/multiUploadInputComponentToProps.ts
+var multiUploadInputComponentToProps = (component) => {
+  const { accepts, fileMap, maxSize, minItems, maxItems, uploadLabel } = component;
+  const findIdByValue = (file) => Object.keys(fileMap).find((id) => fileMap[id] === file);
+  const fileList = Object.values(fileMap).map((file) => {
+    var _a;
+    return {
+      id: (_a = findIdByValue(file)) != null ? _a : "",
+      file
+    };
+  });
+  return __spreadProps(__spreadValues({}, inputComponentToProps(component, "input-upload-multi")), {
+    accepts,
+    maxSize,
+    minItems,
+    maxItems,
+    uploadLabel,
+    value: fileList,
+    onUpload: component.onUpload.bind(component),
+    onDelete: component.onDelete.bind(component)
+  });
+};
+
+// src/revamp/renderers/mappers/numberInputComponentToProps.ts
+var numberInputComponentToProps = (component) => __spreadProps(__spreadValues({}, inputComponentToProps(component, "input-number")), {
+  onChange: component.onChange.bind(component)
+});
+
 // src/revamp/renderers/mappers/objectComponentToProps.ts
 var objectComponentToProps = ({ control, description, help, title }, children) => ({
   type: "form-section",
@@ -13997,34 +14084,6 @@ var paragraphComponentToProps = ({
   text
 });
 
-// src/revamp/renderers/mappers/numberInputComponentToProps.ts
-var numberInputComponentToProps = (component) => __spreadProps(__spreadValues({}, inputComponentToProps(component, "input-number")), {
-  onChange: component.onChange.bind(component)
-});
-
-// src/revamp/renderers/mappers/uploadInputComponentToProps.ts
-var uploadInputComponentToProps = (component) => {
-  const { accepts, maxSize } = component;
-  return __spreadProps(__spreadValues({}, inputComponentToProps(component, "input-upload")), {
-    accepts,
-    maxSize,
-    onUpload: component.onUpload.bind(component)
-  });
-};
-
-// src/revamp/renderers/mappers/selectInputComponentToProps.ts
-var selectInputComponentToProps = (component, children) => {
-  var _b;
-  const { options, selectedIndex, onSelect } = component;
-  const _a = inputComponentToProps(component, "input-select"), { value } = _a, props = __objRest(_a, ["value"]);
-  return __spreadProps(__spreadValues({}, props), {
-    options,
-    selectedIndex,
-    onSelect: onSelect.bind(component),
-    children: (_b = children[selectedIndex != null ? selectedIndex : -1]) != null ? _b : null
-  });
-};
-
 // src/revamp/renderers/mappers/repeatableComponentToProps.ts
 var repeatableComponentToProps = (component, children, editableItemChildren) => {
   const {
@@ -14087,6 +14146,67 @@ var reviewComponentToProps = ({
   title
 });
 
+// src/revamp/renderers/mappers/searchComponentToProps.ts
+var searchComponentToProps = (component) => {
+  const { uid, control, emptyMessage, error, isLoading, margin, query, results, title } = component;
+  const onChange = component.onChange.bind(component);
+  const onSelect = component.onSelect.bind(component);
+  const state = getSearchState({
+    emptyMessage,
+    error,
+    query,
+    results,
+    onChange,
+    onSelect
+  });
+  return {
+    type: "search",
+    id: uid,
+    control,
+    isLoading,
+    margin,
+    query,
+    state,
+    title,
+    onChange
+  };
+};
+var getSearchState = ({
+  emptyMessage,
+  error,
+  query,
+  results,
+  onChange,
+  onSelect
+}) => {
+  if (!query) {
+    return { type: "pending" };
+  }
+  if (error) {
+    return { type: "error", onRetry: () => onChange(query) };
+  }
+  if (results.length === 0) {
+    return { type: "noResults", message: emptyMessage };
+  }
+  const rendererResults = results.map((result) => __spreadProps(__spreadValues({}, result), {
+    onClick: () => onSelect(result)
+  }));
+  return { type: "results", results: rendererResults };
+};
+
+// src/revamp/renderers/mappers/selectInputComponentToProps.ts
+var selectInputComponentToProps = (component, children) => {
+  var _b;
+  const { options, selectedIndex, onSelect } = component;
+  const _a = inputComponentToProps(component, "input-select"), { value } = _a, props = __objRest(_a, ["value"]);
+  return __spreadProps(__spreadValues({}, props), {
+    options,
+    selectedIndex,
+    onSelect: onSelect.bind(component),
+    children: (_b = children[selectedIndex != null ? selectedIndex : -1]) != null ? _b : null
+  });
+};
+
 // src/revamp/renderers/mappers/statusListComponentToProps.ts
 var statusListComponentToProps = ({
   control,
@@ -14107,26 +14227,13 @@ var textInputComponentToProps = (component) => __spreadProps(__spreadValues({},
   onChange: component.onChange.bind(component)
 });
 
-// src/revamp/renderers/mappers/multiUploadInputComponentToProps.ts
-var multiUploadInputComponentToProps = (component) => {
-  const { accepts, fileMap, maxSize, minItems, maxItems, uploadLabel } = component;
-  const findIdByValue = (file) => Object.keys(fileMap).find((id) => fileMap[id] === file);
-  const fileList = Object.values(fileMap).map((file) => {
-    var _a;
-    return {
-      id: (_a = findIdByValue(file)) != null ? _a : "",
-      file
-    };
-  });
-  return __spreadProps(__spreadValues({}, inputComponentToProps(component, "input-upload-multi")), {
+// src/revamp/renderers/mappers/uploadInputComponentToProps.ts
+var uploadInputComponentToProps = (component) => {
+  const { accepts, maxSize } = component;
+  return __spreadProps(__spreadValues({}, inputComponentToProps(component, "input-upload")), {
     accepts,
     maxSize,
-    minItems,
-    maxItems,
-    uploadLabel,
-    value: fileList,
-    onUpload: component.onUpload.bind(component),
-    onDelete: component.onDelete.bind(component)
+    onUpload: component.onUpload.bind(component)
   });
 };
 
@@ -14137,6 +14244,8 @@ var componentToRendererProps = (component, nestedContent) => {
     return hiddenComponentToProps();
   }
   switch (component.type) {
+    case "step":
+      return stepComponentToProps(component, children);
     case "alert":
       return alertComponentToProps(component);
     case "all-of":
@@ -14203,7 +14312,7 @@ var componentToRendererProps = (component, nestedContent) => {
 };
 
 // src/revamp/step/utils/getRenderFunction.tsx
-var import_jsx_runtime119 = require("react/jsx-runtime");
+var import_jsx_runtime120 = require("react/jsx-runtime");
 var getRenderFunction = (renderers2) => {
   function ComponentRenderer(props) {
     const { type } = props;
@@ -14242,7 +14351,7 @@ var getRenderFunction = (renderers2) => {
       children: component.getChildren().map(render)
     };
   };
-  const render = (component) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+  const render = (component) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
     ComponentRenderer,
     __spreadValues({}, componentToRendererProps(component, getNestedContent(component))),
     component.uid
@@ -14337,7 +14446,7 @@ var formatDateOptions = {
 };
 
 // src/revamp/DynamicFlowCore.tsx
-var import_jsx_runtime120 = require("react/jsx-runtime");
+var import_jsx_runtime121 = require("react/jsx-runtime");
 function DynamicFlowCore(props) {
   var _a;
   const {
@@ -14353,20 +14462,21 @@ function DynamicFlowCore(props) {
     onLog
   } = props;
   const { formatMessage, locale } = (0, import_react_intl35.useIntl)();
-  const getErrorMessageFunctions = (0, import_react55.useMemo)(
+  const getErrorMessageFunctions = (0, import_react57.useMemo)(
     () => getSchemaErrorMessageFunction(formatMessage, locale),
     [formatMessage, locale]
   );
-  (0, import_react55.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     var _a2;
     if (!initialStep && initialAction) {
       void triggerSubmission(initialAction, (_a2 = initialAction.data) != null ? _a2 : {}, null);
     }
   }, []);
-  const [step, setStep] = (0, import_react55.useState)(initialStep != null ? initialStep : null);
-  const localValueRef = (0, import_react55.useRef)(null);
-  const [etag, setEtag] = (0, import_react55.useState)(null);
-  const abortControllerRef = (0, import_react55.useRef)(new AbortController());
+  const [step, setStep] = (0, import_react57.useState)(initialStep != null ? initialStep : null);
+  const localValueRef = (0, import_react57.useRef)(null);
+  const [etag, setEtag] = (0, import_react57.useState)(null);
+  const abortControllerRef = (0, import_react57.useRef)(new AbortController());
+  const [loadingState, setLoadingState] = (0, import_react57.useState)(initialStep ? "idle" : "loading");
   const abortCurrentAndGetNewAbortSignal = () => {
     abortControllerRef.current.abort();
     abortControllerRef.current = new AbortController();
@@ -14374,26 +14484,27 @@ function DynamicFlowCore(props) {
   };
   const stepId = (_a = step == null ? void 0 : step.id) != null ? _a : step == null ? void 0 : step.key;
   const stepAnalytics = step == null ? void 0 : step.analytics;
-  const trackEvent = (0, import_react55.useMemo)(
+  const trackEvent = (0, import_react57.useMemo)(
     () => getAnalyticsEventDispatcher({ flowId, stepId, analytics: stepAnalytics, onEvent }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [flowId, stepId, JSON.stringify(stepAnalytics), onEvent]
   );
-  const logEvent = (0, import_react55.useMemo)(() => getLoggingEventDispatcher(onLog), [onLog]);
-  (0, import_react55.useEffect)(() => trackEvent("Flow Started"), []);
-  const closeWithError = (0, import_react55.useCallback)(
+  const logEvent = (0, import_react57.useMemo)(() => getLoggingEventDispatcher(onLog), [onLog]);
+  (0, import_react57.useEffect)(() => trackEvent("Flow Started"), []);
+  const closeWithError = (0, import_react57.useCallback)(
     (error, analytics) => {
       trackEvent("Flow Failed", __spreadValues({}, analytics));
       onError(error);
     },
     [onError, trackEvent]
   );
-  const triggerSubmission = (0, import_react55.useCallback)(
+  const triggerSubmission = (0, import_react57.useCallback)(
     async (action, model, localValue) => {
       if (true) {
         console.log("\u23EF\uFE0F triggerSubmission", JSON.stringify({ action, model }, null, 2));
       }
       try {
+        setLoadingState("loading");
         const command = await executeSubmission({
           action,
           model,
@@ -14410,11 +14521,13 @@ function DynamicFlowCore(props) {
           }
           case "replace-step": {
             localValueRef.current = null;
+            setLoadingState("idle");
             setStep(command.step);
             setEtag(command.etag);
             break;
           }
           case "error": {
+            setLoadingState("idle");
             const genericErrorMessage = getErrorMessageFunctions().genericErrorWithRetry();
             const { errors = { error: genericErrorMessage } } = command.body;
             if (step) {
@@ -14438,6 +14551,7 @@ function DynamicFlowCore(props) {
               });
               switch (refreshCommand.type) {
                 case "refresh-step":
+                  setLoadingState("idle");
                   setStep(__spreadProps(__spreadValues({}, refreshCommand.step), { errors }));
                   setEtag(refreshCommand.etag);
                   break;
@@ -14456,7 +14570,7 @@ function DynamicFlowCore(props) {
     },
     [httpClient, trackEvent, onCompletion, getErrorMessageFunctions, step, etag, closeWithError]
   );
-  const triggerRefresh = (0, import_react55.useCallback)(
+  const triggerRefresh = (0, import_react57.useCallback)(
     async ({
       refreshUrl,
       model,
@@ -14468,6 +14582,7 @@ function DynamicFlowCore(props) {
       }
       try {
         localValueRef.current = localValue;
+        setLoadingState("loading");
         const command = await executeRefresh({
           abortSignal: abortCurrentAndGetNewAbortSignal(),
           url: refreshUrl,
@@ -14477,6 +14592,7 @@ function DynamicFlowCore(props) {
           httpClient,
           trackEvent
         });
+        setLoadingState("idle");
         switch (command.type) {
           case "refresh-step":
             setStep(command.step);
@@ -14495,16 +14611,17 @@ function DynamicFlowCore(props) {
     },
     [etag, httpClient, trackEvent, closeWithError]
   );
-  const render = (0, import_react55.useMemo)(
-    () => getRenderFunction([CoreContainerRenderer, ...renderers2]),
+  const render = (0, import_react57.useMemo)(
+    () => getRenderFunction([CoreContainerRenderer, ...renderers2, StepRenderer]),
     [renderers2]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(ErrorBoundary_default, { onError, children: step ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ErrorBoundary_default, { onError: closeWithError, children: step ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     Step_default,
     {
       displayStepTitle,
       step,
       localValue: localValueRef.current,
+      loadingState,
       getErrorMessageFunctions,
       render,
       httpClient,
@@ -14517,16 +14634,16 @@ function DynamicFlowCore(props) {
 }
 
 // src/revamp/DynamicFlowWise.tsx
-var import_jsx_runtime121 = require("react/jsx-runtime");
+var import_jsx_runtime122 = require("react/jsx-runtime");
 var renderers = getWiseRenderers();
 function DynamicFlowWise(props) {
   const { httpClient } = props;
   const { locale } = (0, import_react_intl36.useIntl)();
-  const wiseHttpClient = (0, import_react56.useMemo)(
+  const wiseHttpClient = (0, import_react58.useMemo)(
     () => makeWiseHttpClient(httpClient, locale),
     [httpClient, locale]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(HttpClientProvider, { httpClient: wiseHttpClient, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(DynamicFlowCore, __spreadProps(__spreadValues({}, props), { renderers })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(HttpClientProvider, { httpClient: wiseHttpClient, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(DynamicFlowCore, __spreadProps(__spreadValues({}, props), { renderers })) });
 }
 var DynamicFlowWise_default = DynamicFlowWise;
 var makeWiseHttpClient = (httpClient, locale) => async (input, init) => httpClient(