@wise/dynamic-flow-client 4.5.7 → 4.6.0

package/build/main.js

@@ -1090,6 +1090,7 @@ function getChildren(node) {
     case "form-section":
     case "step":
     case "modal-content":
+    case "section":
       return node.childrenProps;
     case "columns":
       return [...node.startChildrenProps, ...node.endChildrenProps];
@@ -1715,6 +1716,17 @@ var getSearchState = ({
   return { type: "results", results: rendererResults };
 };
 
+// src/revamp/renderers/mappers/sectionComponentToProps.ts
+var sectionComponentToProps = (component, rendererMapperProps) => {
+  const childrenProps = component.components.map(
+    (c) => componentToRendererProps(c, rendererMapperProps)
+  );
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "type", "title", "margin", "control", "callToAction")), rendererMapperProps), {
+    children: childrenProps.map(rendererMapperProps.render),
+    childrenProps
+  });
+};
+
 // src/revamp/renderers/mappers/selectInputComponentToProps.ts
 var selectInputComponentToProps = (component, rendererMapperProps) => {
   const { autoComplete, options, selectedIndex, onSelect } = component;
@@ -1852,6 +1864,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return reviewComponentToProps(component, rendererMapperProps);
     case "search":
       return searchComponentToProps(component, rendererMapperProps);
+    case "section":
+      return sectionComponentToProps(component, rendererMapperProps);
     case "select":
       return selectInputComponentToProps(component, rendererMapperProps);
     case "status-list":
@@ -1944,6 +1958,10 @@ var createRootDomainComponent = (updateComponent) => {
       this._update((draft) => {
         draft.stepComponent = stepComponent;
       });
+    },
+    getRefreshUrl() {
+      var _a, _b, _c, _d;
+      return (_d = (_c = (_a = this.stepComponent) == null ? void 0 : _a.step.refreshUrl) != null ? _c : (_b = this.stepComponent) == null ? void 0 : _b.step.refreshFormUrl) != null ? _d : null;
     }
   };
   return rootComponent;
@@ -2808,6 +2826,35 @@ var statusListLayoutToComponent = (uid, { control, items, margin = "md", title }
   title
 });
 
+// src/revamp/domain/components/SectionComponent.ts
+var createSectionComponent = (props) => {
+  return __spreadProps(__spreadValues({}, props), {
+    type: "section",
+    getChildren() {
+      return this.components;
+    }
+  });
+};
+
+// src/revamp/domain/mappers/layout/sectionLayoutToComponent.ts
+var sectionLayoutToComponent = (uid, { control, title, components, callToAction, margin = "md" }, mapperProps, schemaComponents) => {
+  var _a;
+  return createSectionComponent({
+    uid,
+    control,
+    title,
+    components: components.map(
+      (component, index) => mapLayoutToComponent(`${uid}.section-${index}`, component, mapperProps, schemaComponents)
+    ),
+    margin,
+    callToAction: getDomainLayerCallToAction(
+      callToAction,
+      mapperProps.onBehavior,
+      (_a = mapperProps.step.actions) != null ? _a : []
+    )
+  });
+};
+
 // src/revamp/domain/mappers/mapLayoutToComponent.ts
 var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
   switch (layout.type) {
@@ -2847,6 +2894,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
       return reviewLayoutToComponent(uid, layout, mapperProps);
     case "search":
       return searchLayoutToComponent(uid, layout, mapperProps);
+    case "section":
+      return sectionLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "status-list":
       return statusListLayoutToComponent(uid, layout, mapperProps);
     default:
@@ -3025,14 +3074,14 @@ var getStepPolling = ({
 
 // src/revamp/domain/features/refreshAfter/getStepRefreshAfter.ts
 var ONE_SECOND = 1e3;
-var getStepRefreshAfter = ({ refreshAfter, onRefresh }) => {
+var getStepRefreshAfter = ({ refreshAfter, onBehavior }) => {
   const targetTime = new Date(refreshAfter).getTime();
   if (typeof refreshAfter !== "string" || Number.isNaN(targetTime)) {
     throw new Error(`Invalid refreshAfter value: ${String(refreshAfter)}`);
   }
   const timeLeft = Math.max(targetTime - Date.now(), ONE_SECOND);
   const timeout = setTimeout(() => {
-    void onRefresh("refreshAfter");
+    void onBehavior({ type: "refresh", schemaId: "refreshAfter" });
   }, timeLeft);
   return {
     stop: () => clearTimeout(timeout)
@@ -3181,13 +3230,17 @@ var isOrWasValid = (getErrors, previous, current) => {
 };
 
 // src/revamp/domain/features/refresh/getPerformRefresh.ts
-var getPerformRefresh = (schema, onRefresh) => {
+var getPerformRefresh = (schema, onBehavior) => {
   var _a, _b;
   if ("refreshStepOnChange" in schema && ((_a = schema.refreshStepOnChange) != null ? _a : false) || "refreshFormOnChange" in schema && ((_b = schema.refreshFormOnChange) != null ? _b : false)) {
     const { $id, analyticsId, refreshUrl, refreshFormUrl } = schema;
     const schemaId = analyticsId != null ? analyticsId : $id;
     return () => {
-      void onRefresh(schemaId, refreshUrl != null ? refreshUrl : refreshFormUrl);
+      void onBehavior({
+        type: "refresh",
+        schemaId,
+        url: refreshUrl != null ? refreshUrl : refreshFormUrl
+      });
     };
   }
   return void 0;
@@ -3712,69 +3765,6 @@ var getPerformPersisAsyncFn = (schemaMapperProps, mapperProps) => {
 };
 var schemaHasValidationMessages = (schema) => Boolean("validationMessages" in schema && schema.validationMessages);
 
-// src/revamp/domain/features/summary/summary-utils.ts
-var getSummariser = (schema) => (value) => {
-  const { summary, icon, image } = schema;
-  const stringValueOrNull = isString(value) ? value : null;
-  return summaryIfProvides(summary, { value: stringValueOrNull, icon, image });
-};
-var getConstSummary = (schema, model) => {
-  const { summary, icon, image } = schema;
-  const value = isString(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 && mapSpecImage(image != null ? image : void 0) || void 0
-  };
-};
-
-// src/revamp/domain/mappers/schema/utils/mapCommonSchemaProps.ts
-var mapCommonSchemaProps = (schemaMapperProps) => {
-  var _a;
-  const { uid, schemaId, schema, required, validationErrors } = schemaMapperProps;
-  const { $id, analyticsId, control, description, icon, image, keywords, title, hidden } = schema;
-  return __spreadValues(__spreadValues(__spreadValues({
-    uid,
-    id: $id != null ? $id : uid,
-    schemaId,
-    analyticsId: (_a = analyticsId != null ? analyticsId : $id) != null ? _a : "",
-    control,
-    description,
-    disabled: schemaHasDisabled(schema) ? schema.disabled : false,
-    errors: isString(validationErrors) ? [validationErrors] : void 0,
-    hidden: Boolean(hidden),
-    icon,
-    image: mapSpecImage(image),
-    keywords,
-    required: Boolean(required),
-    title,
-    summariser: getSummariser(schema)
-  }, schemaHasHelp(schema) ? { help: schema.help.markdown } : {}), schemaHasPlaceholder(schema) ? { placeholder: schema.placeholder } : {}), schema.alert ? { alert: mapSchemaAlert(schema.alert) } : {});
-};
-var schemaHasDisabled = (schema) => Boolean("disabled" in schema && schema.disabled !== void 0);
-var schemaHasHelp = (schema) => Boolean("help" in schema && schema.help);
-var schemaHasPlaceholder = (schema) => Boolean("placeholder" in schema && schema.placeholder);
-
 // src/revamp/domain/features/validationAsync/getPerformValidationAsync.ts
 var getPerformValidationAsync = ({
   httpClient,
@@ -3852,11 +3842,74 @@ var getValidationAsyncFn = (schemaMapperProps, mapperProps) => {
 };
 var schemaHasValidationAsync = (schema) => Boolean("validationAsync" in schema && schema.validationAsync);
 
+// src/revamp/domain/features/summary/summary-utils.ts
+var getSummariser = (schema) => (value) => {
+  const { summary, icon, image } = schema;
+  const stringValueOrNull = isString(value) ? value : null;
+  return summaryIfProvides(summary, { value: stringValueOrNull, icon, image });
+};
+var getConstSummary = (schema, model) => {
+  const { summary, icon, image } = schema;
+  const value = isString(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 && mapSpecImage(image != null ? image : void 0) || void 0
+  };
+};
+
+// src/revamp/domain/mappers/schema/utils/mapCommonSchemaProps.ts
+var mapCommonSchemaProps = (schemaMapperProps) => {
+  var _a;
+  const { uid, schemaId, schema, required, validationErrors } = schemaMapperProps;
+  const { $id, analyticsId, control, description, icon, image, keywords, title, hidden } = schema;
+  return __spreadValues(__spreadValues(__spreadValues({
+    uid,
+    id: $id != null ? $id : uid,
+    schemaId,
+    analyticsId: (_a = analyticsId != null ? analyticsId : $id) != null ? _a : "",
+    control,
+    description,
+    disabled: schemaHasDisabled(schema) ? schema.disabled : false,
+    errors: isString(validationErrors) ? [validationErrors] : void 0,
+    hidden: Boolean(hidden),
+    icon,
+    image: mapSpecImage(image),
+    keywords,
+    required: Boolean(required),
+    title,
+    summariser: getSummariser(schema)
+  }, schemaHasHelp(schema) ? { help: schema.help.markdown } : {}), schemaHasPlaceholder(schema) ? { placeholder: schema.placeholder } : {}), schema.alert ? { alert: mapSchemaAlert(schema.alert) } : {});
+};
+var schemaHasDisabled = (schema) => Boolean("disabled" in schema && schema.disabled !== void 0);
+var schemaHasHelp = (schema) => Boolean("help" in schema && schema.help);
+var schemaHasPlaceholder = (schema) => Boolean("placeholder" in schema && schema.placeholder);
+
 // src/revamp/domain/mappers/schema/numberSchemaToComponent.ts
 var numberSchemaToComponent = (schemaMapperProps, mapperProps) => {
   const { schema, model, localValue, required = false } = schemaMapperProps;
   const { autocompleteHint, validationMessages, default: defaultValue, maximum, minimum } = schema;
-  const { getErrorMessageFunctions, updateComponent, onRefresh, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
     schemaMapperProps,
@@ -3883,7 +3936,7 @@ var numberSchemaToComponent = (schemaMapperProps, mapperProps) => {
       persistedState,
       validationAsyncState,
       performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onRefresh),
+      performRefresh: getPerformRefresh(schema, onBehavior),
       performValidationAsync,
       onValueChange
     }),
@@ -4502,7 +4555,7 @@ var arraySchemaToMultiSelectComponent = (schemaMapperProps, mapperProps) => {
     };
   });
   const { maxItems, minItems, title, validationMessages } = schema;
-  const { getErrorMessageFunctions, onRefresh, onValueChange, updateComponent } = mapperProps;
+  const { getErrorMessageFunctions, onBehavior, onValueChange, updateComponent } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
@@ -4525,7 +4578,7 @@ var arraySchemaToMultiSelectComponent = (schemaMapperProps, mapperProps) => {
       title,
       validationAsyncState,
       performValidationAsync,
-      performRefresh: getPerformRefresh(schema, onRefresh),
+      performRefresh: getPerformRefresh(schema, onBehavior),
       onValueChange
     }),
     updateComponent
@@ -4864,8 +4917,8 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
 var booleanSchemaToComponent = (schemaMapperProps, mapperProps) => {
   const { schema, localValue, model } = schemaMapperProps;
   const { default: defaultValue } = schema;
-  const { updateComponent, onRefresh, onValueChange } = mapperProps;
-  const performRefresh = getPerformRefresh(schema, onRefresh);
+  const { updateComponent, onBehavior, onValueChange } = mapperProps;
+  const performRefresh = getPerformRefresh(schema, onBehavior);
   const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
     schemaMapperProps,
     mapperProps
@@ -5047,7 +5100,7 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
 var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
   const { schema, localValue, model, required = false } = schemaMapperProps;
   const { autocompleteHint, validationMessages, default: defaultValue, maximum, minimum } = schema;
-  const { getErrorMessageFunctions, updateComponent, onRefresh, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
     schemaMapperProps,
@@ -5075,7 +5128,7 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
       value,
       validationAsyncState,
       performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onRefresh),
+      performRefresh: getPerformRefresh(schema, onBehavior),
       performValidationAsync,
       onValueChange
     }),
@@ -5354,7 +5407,7 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
       )
     };
   });
-  const { getErrorMessageFunctions, updateComponent, trackEvent, onRefresh, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, updateComponent, trackEvent, onBehavior, onValueChange } = mapperProps;
   const { validationMessages } = schema;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   return createSelectInputComponent(
@@ -5363,7 +5416,7 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
       checks: schema.hidden ? [] : [getRequiredCheck(required, errorMessageFunctions)],
       options,
       initialModel,
-      performRefresh: getPerformRefresh(schema, onRefresh),
+      performRefresh: getPerformRefresh(schema, onBehavior),
       onValueChange,
       trackEvent
     }),
@@ -5494,7 +5547,7 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
     maximum: maximumDate,
     suggestions
   } = schema;
-  const { getErrorMessageFunctions, updateComponent, onRefresh, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(schema.validationMessages);
   const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
     schemaMapperProps,
@@ -5526,7 +5579,7 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
       persistedState,
       validationAsyncState,
       performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onRefresh),
+      performRefresh: getPerformRefresh(schema, onBehavior),
       performValidationAsync,
       onValueChange
     }),
@@ -5539,7 +5592,7 @@ var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
   var _a;
   const { schema, localValue, model, required = false } = schemaMapperProps;
   const { accepts, autocompleteHint, cameraConfig, hidden, maxSize, source, validationMessages } = schema;
-  const { getErrorMessageFunctions, updateComponent, onRefresh, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const { performPersistAsync } = getPersistAsyncInitialState(schemaMapperProps, mapperProps);
   const persistedState = performPersistAsync ? getInitialPersistedState(null, model) : getInitialPersistedState();
@@ -5562,7 +5615,7 @@ var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
       value,
       persistedState,
       performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onRefresh),
+      performRefresh: getPerformRefresh(schema, onBehavior),
       onValueChange
     }),
     updateComponent
@@ -5698,7 +5751,7 @@ var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
     suggestions,
     validationMessages
   } = schema;
-  const { getErrorMessageFunctions, updateComponent, onRefresh, onValueChange, logEvent } = mapperProps;
+  const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange, logEvent } = mapperProps;
   const controlForLegacyFormat = getControlForLegacyFormat(format);
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
@@ -5735,7 +5788,7 @@ var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
       persistedState,
       validationAsyncState,
       performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onRefresh),
+      performRefresh: getPerformRefresh(schema, onBehavior),
       performValidationAsync,
       onValueChange
     }),
@@ -5856,7 +5909,7 @@ var mapStepToComponent = (_a) => {
     "onPoll",
     "onBehavior"
   ]);
-  var _a2, _b2;
+  var _a2;
   const { step, stepLocalValue, updateComponent } = restProps;
   const {
     id,
@@ -5881,17 +5934,15 @@ var mapStepToComponent = (_a) => {
       });
     }
   } : void 0;
-  const refreshUrl = (_b2 = step.refreshUrl) != null ? _b2 : step.refreshFormUrl;
   const stepId = id || key;
   if (stepId === void 0) {
     throw new Error("Step must have an id or a key");
   }
   const uid = `${rootUid}.${stepId != null ? stepId : "step"}`;
-  const onRefresh = async (schemaId, url) => restProps.onRefresh(schemaId, url != null ? url : refreshUrl);
   const stepPolling = polling ? getStepPolling({ pollingConfig: polling, onBehavior, onPoll }) : void 0;
-  const stepRefreshAfter = refreshAfter ? getStepRefreshAfter({ refreshAfter, onRefresh }) : void 0;
+  const stepRefreshAfter = refreshAfter ? getStepRefreshAfter({ refreshAfter, onBehavior }) : void 0;
   const externalConfirmation = (external == null ? void 0 : external.url) ? createExternalConfirmation(`${uid}-external-confirmation`, external == null ? void 0 : external.url, updateComponent) : void 0;
-  const mapperProps = __spreadProps(__spreadValues({}, restProps), { trackEvent, onBehavior, onRefresh });
+  const mapperProps = __spreadProps(__spreadValues({}, restProps), { trackEvent, onBehavior });
   const referencedSchemaIds = getReferencedSchemaId(step);
   const schemaComponents = mapStepSchemas(
     uid,
@@ -6445,7 +6496,6 @@ function useDynamicFlowCore(props) {
     logEvent,
     httpClient,
     onBehavior,
-    onRefresh,
     onPoll,
     onValueChange
   });
@@ -6528,6 +6578,10 @@ function useDynamicFlowCore(props) {
         }
         break;
       }
+      case "refresh": {
+        await onRefresh(behavior.schemaId, behavior.url);
+        break;
+      }
       case "link": {
         onLink(behavior.url);
         break;
@@ -6626,14 +6680,14 @@ function useDynamicFlowCore(props) {
     }
   }, []);
   const onRefresh = (0, import_react3.useCallback)(
-    async (schemaId, refreshUrl = "", errorsOverride) => {
-      var _a2;
+    async (schemaId, refreshUrl, errorsOverride) => {
+      var _a2, _b;
       try {
         rootComponentRef.current.setLoadingState("refreshing");
         const model = (_a2 = await rootComponentRef.current.getSubmittableValue()) != null ? _a2 : null;
         const command = await executeRefresh({
           abortSignal: abortCurrentAndGetNewAbortSignal(),
-          url: refreshUrl,
+          url: (_b = refreshUrl != null ? refreshUrl : rootComponentRef.current.getRefreshUrl()) != null ? _b : "",
           model,
           schemaId,
           etag: etagRef.current,

package/build/main.mjs

@@ -1047,6 +1047,7 @@ function getChildren(node) {
     case "form-section":
     case "step":
     case "modal-content":
+    case "section":
       return node.childrenProps;
     case "columns":
       return [...node.startChildrenProps, ...node.endChildrenProps];
@@ -1672,6 +1673,17 @@ var getSearchState = ({
   return { type: "results", results: rendererResults };
 };
 
+// src/revamp/renderers/mappers/sectionComponentToProps.ts
+var sectionComponentToProps = (component, rendererMapperProps) => {
+  const childrenProps = component.components.map(
+    (c) => componentToRendererProps(c, rendererMapperProps)
+  );
+  return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "type", "title", "margin", "control", "callToAction")), rendererMapperProps), {
+    children: childrenProps.map(rendererMapperProps.render),
+    childrenProps
+  });
+};
+
 // src/revamp/renderers/mappers/selectInputComponentToProps.ts
 var selectInputComponentToProps = (component, rendererMapperProps) => {
   const { autoComplete, options, selectedIndex, onSelect } = component;
@@ -1809,6 +1821,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return reviewComponentToProps(component, rendererMapperProps);
     case "search":
       return searchComponentToProps(component, rendererMapperProps);
+    case "section":
+      return sectionComponentToProps(component, rendererMapperProps);
     case "select":
       return selectInputComponentToProps(component, rendererMapperProps);
     case "status-list":
@@ -1901,6 +1915,10 @@ var createRootDomainComponent = (updateComponent) => {
       this._update((draft) => {
         draft.stepComponent = stepComponent;
       });
+    },
+    getRefreshUrl() {
+      var _a, _b, _c, _d;
+      return (_d = (_c = (_a = this.stepComponent) == null ? void 0 : _a.step.refreshUrl) != null ? _c : (_b = this.stepComponent) == null ? void 0 : _b.step.refreshFormUrl) != null ? _d : null;
     }
   };
   return rootComponent;
@@ -2765,6 +2783,35 @@ var statusListLayoutToComponent = (uid, { control, items, margin = "md", title }
   title
 });
 
+// src/revamp/domain/components/SectionComponent.ts
+var createSectionComponent = (props) => {
+  return __spreadProps(__spreadValues({}, props), {
+    type: "section",
+    getChildren() {
+      return this.components;
+    }
+  });
+};
+
+// src/revamp/domain/mappers/layout/sectionLayoutToComponent.ts
+var sectionLayoutToComponent = (uid, { control, title, components, callToAction, margin = "md" }, mapperProps, schemaComponents) => {
+  var _a;
+  return createSectionComponent({
+    uid,
+    control,
+    title,
+    components: components.map(
+      (component, index) => mapLayoutToComponent(`${uid}.section-${index}`, component, mapperProps, schemaComponents)
+    ),
+    margin,
+    callToAction: getDomainLayerCallToAction(
+      callToAction,
+      mapperProps.onBehavior,
+      (_a = mapperProps.step.actions) != null ? _a : []
+    )
+  });
+};
+
 // src/revamp/domain/mappers/mapLayoutToComponent.ts
 var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
   switch (layout.type) {
@@ -2804,6 +2851,8 @@ var mapLayoutToComponent = (uid, layout, mapperProps, schemaComponents) => {
       return reviewLayoutToComponent(uid, layout, mapperProps);
     case "search":
       return searchLayoutToComponent(uid, layout, mapperProps);
+    case "section":
+      return sectionLayoutToComponent(uid, layout, mapperProps, schemaComponents);
     case "status-list":
       return statusListLayoutToComponent(uid, layout, mapperProps);
     default:
@@ -2982,14 +3031,14 @@ var getStepPolling = ({
 
 // src/revamp/domain/features/refreshAfter/getStepRefreshAfter.ts
 var ONE_SECOND = 1e3;
-var getStepRefreshAfter = ({ refreshAfter, onRefresh }) => {
+var getStepRefreshAfter = ({ refreshAfter, onBehavior }) => {
   const targetTime = new Date(refreshAfter).getTime();
   if (typeof refreshAfter !== "string" || Number.isNaN(targetTime)) {
     throw new Error(`Invalid refreshAfter value: ${String(refreshAfter)}`);
   }
   const timeLeft = Math.max(targetTime - Date.now(), ONE_SECOND);
   const timeout = setTimeout(() => {
-    void onRefresh("refreshAfter");
+    void onBehavior({ type: "refresh", schemaId: "refreshAfter" });
   }, timeLeft);
   return {
     stop: () => clearTimeout(timeout)
@@ -3138,13 +3187,17 @@ var isOrWasValid = (getErrors, previous, current) => {
 };
 
 // src/revamp/domain/features/refresh/getPerformRefresh.ts
-var getPerformRefresh = (schema, onRefresh) => {
+var getPerformRefresh = (schema, onBehavior) => {
   var _a, _b;
   if ("refreshStepOnChange" in schema && ((_a = schema.refreshStepOnChange) != null ? _a : false) || "refreshFormOnChange" in schema && ((_b = schema.refreshFormOnChange) != null ? _b : false)) {
     const { $id, analyticsId, refreshUrl, refreshFormUrl } = schema;
     const schemaId = analyticsId != null ? analyticsId : $id;
     return () => {
-      void onRefresh(schemaId, refreshUrl != null ? refreshUrl : refreshFormUrl);
+      void onBehavior({
+        type: "refresh",
+        schemaId,
+        url: refreshUrl != null ? refreshUrl : refreshFormUrl
+      });
     };
   }
   return void 0;
@@ -3669,69 +3722,6 @@ var getPerformPersisAsyncFn = (schemaMapperProps, mapperProps) => {
 };
 var schemaHasValidationMessages = (schema) => Boolean("validationMessages" in schema && schema.validationMessages);
 
-// src/revamp/domain/features/summary/summary-utils.ts
-var getSummariser = (schema) => (value) => {
-  const { summary, icon, image } = schema;
-  const stringValueOrNull = isString(value) ? value : null;
-  return summaryIfProvides(summary, { value: stringValueOrNull, icon, image });
-};
-var getConstSummary = (schema, model) => {
-  const { summary, icon, image } = schema;
-  const value = isString(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 && mapSpecImage(image != null ? image : void 0) || void 0
-  };
-};
-
-// src/revamp/domain/mappers/schema/utils/mapCommonSchemaProps.ts
-var mapCommonSchemaProps = (schemaMapperProps) => {
-  var _a;
-  const { uid, schemaId, schema, required, validationErrors } = schemaMapperProps;
-  const { $id, analyticsId, control, description, icon, image, keywords, title, hidden } = schema;
-  return __spreadValues(__spreadValues(__spreadValues({
-    uid,
-    id: $id != null ? $id : uid,
-    schemaId,
-    analyticsId: (_a = analyticsId != null ? analyticsId : $id) != null ? _a : "",
-    control,
-    description,
-    disabled: schemaHasDisabled(schema) ? schema.disabled : false,
-    errors: isString(validationErrors) ? [validationErrors] : void 0,
-    hidden: Boolean(hidden),
-    icon,
-    image: mapSpecImage(image),
-    keywords,
-    required: Boolean(required),
-    title,
-    summariser: getSummariser(schema)
-  }, schemaHasHelp(schema) ? { help: schema.help.markdown } : {}), schemaHasPlaceholder(schema) ? { placeholder: schema.placeholder } : {}), schema.alert ? { alert: mapSchemaAlert(schema.alert) } : {});
-};
-var schemaHasDisabled = (schema) => Boolean("disabled" in schema && schema.disabled !== void 0);
-var schemaHasHelp = (schema) => Boolean("help" in schema && schema.help);
-var schemaHasPlaceholder = (schema) => Boolean("placeholder" in schema && schema.placeholder);
-
 // src/revamp/domain/features/validationAsync/getPerformValidationAsync.ts
 var getPerformValidationAsync = ({
   httpClient,
@@ -3809,11 +3799,74 @@ var getValidationAsyncFn = (schemaMapperProps, mapperProps) => {
 };
 var schemaHasValidationAsync = (schema) => Boolean("validationAsync" in schema && schema.validationAsync);
 
+// src/revamp/domain/features/summary/summary-utils.ts
+var getSummariser = (schema) => (value) => {
+  const { summary, icon, image } = schema;
+  const stringValueOrNull = isString(value) ? value : null;
+  return summaryIfProvides(summary, { value: stringValueOrNull, icon, image });
+};
+var getConstSummary = (schema, model) => {
+  const { summary, icon, image } = schema;
+  const value = isString(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 && mapSpecImage(image != null ? image : void 0) || void 0
+  };
+};
+
+// src/revamp/domain/mappers/schema/utils/mapCommonSchemaProps.ts
+var mapCommonSchemaProps = (schemaMapperProps) => {
+  var _a;
+  const { uid, schemaId, schema, required, validationErrors } = schemaMapperProps;
+  const { $id, analyticsId, control, description, icon, image, keywords, title, hidden } = schema;
+  return __spreadValues(__spreadValues(__spreadValues({
+    uid,
+    id: $id != null ? $id : uid,
+    schemaId,
+    analyticsId: (_a = analyticsId != null ? analyticsId : $id) != null ? _a : "",
+    control,
+    description,
+    disabled: schemaHasDisabled(schema) ? schema.disabled : false,
+    errors: isString(validationErrors) ? [validationErrors] : void 0,
+    hidden: Boolean(hidden),
+    icon,
+    image: mapSpecImage(image),
+    keywords,
+    required: Boolean(required),
+    title,
+    summariser: getSummariser(schema)
+  }, schemaHasHelp(schema) ? { help: schema.help.markdown } : {}), schemaHasPlaceholder(schema) ? { placeholder: schema.placeholder } : {}), schema.alert ? { alert: mapSchemaAlert(schema.alert) } : {});
+};
+var schemaHasDisabled = (schema) => Boolean("disabled" in schema && schema.disabled !== void 0);
+var schemaHasHelp = (schema) => Boolean("help" in schema && schema.help);
+var schemaHasPlaceholder = (schema) => Boolean("placeholder" in schema && schema.placeholder);
+
 // src/revamp/domain/mappers/schema/numberSchemaToComponent.ts
 var numberSchemaToComponent = (schemaMapperProps, mapperProps) => {
   const { schema, model, localValue, required = false } = schemaMapperProps;
   const { autocompleteHint, validationMessages, default: defaultValue, maximum, minimum } = schema;
-  const { getErrorMessageFunctions, updateComponent, onRefresh, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
     schemaMapperProps,
@@ -3840,7 +3893,7 @@ var numberSchemaToComponent = (schemaMapperProps, mapperProps) => {
       persistedState,
       validationAsyncState,
       performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onRefresh),
+      performRefresh: getPerformRefresh(schema, onBehavior),
       performValidationAsync,
       onValueChange
     }),
@@ -4459,7 +4512,7 @@ var arraySchemaToMultiSelectComponent = (schemaMapperProps, mapperProps) => {
     };
   });
   const { maxItems, minItems, title, validationMessages } = schema;
-  const { getErrorMessageFunctions, onRefresh, onValueChange, updateComponent } = mapperProps;
+  const { getErrorMessageFunctions, onBehavior, onValueChange, updateComponent } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const { performValidationAsync, validationAsyncState } = getValidationAsyncInitialState(
     schemaMapperProps,
@@ -4482,7 +4535,7 @@ var arraySchemaToMultiSelectComponent = (schemaMapperProps, mapperProps) => {
       title,
       validationAsyncState,
       performValidationAsync,
-      performRefresh: getPerformRefresh(schema, onRefresh),
+      performRefresh: getPerformRefresh(schema, onBehavior),
       onValueChange
     }),
     updateComponent
@@ -4821,8 +4874,8 @@ var createBooleanInputComponent = (booleanInputProps, updateComponent) => {
 var booleanSchemaToComponent = (schemaMapperProps, mapperProps) => {
   const { schema, localValue, model } = schemaMapperProps;
   const { default: defaultValue } = schema;
-  const { updateComponent, onRefresh, onValueChange } = mapperProps;
-  const performRefresh = getPerformRefresh(schema, onRefresh);
+  const { updateComponent, onBehavior, onValueChange } = mapperProps;
+  const performRefresh = getPerformRefresh(schema, onBehavior);
   const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
     schemaMapperProps,
     mapperProps
@@ -5004,7 +5057,7 @@ var createIntegerInputComponent = (integerInputProps, updateComponent) => {
 var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
   const { schema, localValue, model, required = false } = schemaMapperProps;
   const { autocompleteHint, validationMessages, default: defaultValue, maximum, minimum } = schema;
-  const { getErrorMessageFunctions, updateComponent, onRefresh, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
     schemaMapperProps,
@@ -5032,7 +5085,7 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
       value,
       validationAsyncState,
       performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onRefresh),
+      performRefresh: getPerformRefresh(schema, onBehavior),
       performValidationAsync,
       onValueChange
     }),
@@ -5311,7 +5364,7 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
       )
     };
   });
-  const { getErrorMessageFunctions, updateComponent, trackEvent, onRefresh, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, updateComponent, trackEvent, onBehavior, onValueChange } = mapperProps;
   const { validationMessages } = schema;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   return createSelectInputComponent(
@@ -5320,7 +5373,7 @@ var oneOfSchemaToComponent = (schemaMapperProps, mapperProps) => {
       checks: schema.hidden ? [] : [getRequiredCheck(required, errorMessageFunctions)],
       options,
       initialModel,
-      performRefresh: getPerformRefresh(schema, onRefresh),
+      performRefresh: getPerformRefresh(schema, onBehavior),
       onValueChange,
       trackEvent
     }),
@@ -5451,7 +5504,7 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
     maximum: maximumDate,
     suggestions
   } = schema;
-  const { getErrorMessageFunctions, updateComponent, onRefresh, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(schema.validationMessages);
   const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
     schemaMapperProps,
@@ -5483,7 +5536,7 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
       persistedState,
       validationAsyncState,
       performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onRefresh),
+      performRefresh: getPerformRefresh(schema, onBehavior),
       performValidationAsync,
       onValueChange
     }),
@@ -5496,7 +5549,7 @@ var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
   var _a;
   const { schema, localValue, model, required = false } = schemaMapperProps;
   const { accepts, autocompleteHint, cameraConfig, hidden, maxSize, source, validationMessages } = schema;
-  const { getErrorMessageFunctions, updateComponent, onRefresh, onValueChange } = mapperProps;
+  const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange } = mapperProps;
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const { performPersistAsync } = getPersistAsyncInitialState(schemaMapperProps, mapperProps);
   const persistedState = performPersistAsync ? getInitialPersistedState(null, model) : getInitialPersistedState();
@@ -5519,7 +5572,7 @@ var stringSchemaToUploadInputComponent = (schemaMapperProps, mapperProps) => {
       value,
       persistedState,
       performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onRefresh),
+      performRefresh: getPerformRefresh(schema, onBehavior),
       onValueChange
     }),
     updateComponent
@@ -5655,7 +5708,7 @@ var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
     suggestions,
     validationMessages
   } = schema;
-  const { getErrorMessageFunctions, updateComponent, onRefresh, onValueChange, logEvent } = mapperProps;
+  const { getErrorMessageFunctions, updateComponent, onBehavior, onValueChange, logEvent } = mapperProps;
   const controlForLegacyFormat = getControlForLegacyFormat(format);
   const errorMessageFunctions = getErrorMessageFunctions(validationMessages);
   const { performPersistAsync, persistedState } = getPersistAsyncInitialState(
@@ -5692,7 +5745,7 @@ var stringSchemaToTextInputComponent = (schemaMapperProps, mapperProps) => {
       persistedState,
       validationAsyncState,
       performPersistAsync,
-      performRefresh: getPerformRefresh(schema, onRefresh),
+      performRefresh: getPerformRefresh(schema, onBehavior),
       performValidationAsync,
       onValueChange
     }),
@@ -5813,7 +5866,7 @@ var mapStepToComponent = (_a) => {
     "onPoll",
     "onBehavior"
   ]);
-  var _a2, _b2;
+  var _a2;
   const { step, stepLocalValue, updateComponent } = restProps;
   const {
     id,
@@ -5838,17 +5891,15 @@ var mapStepToComponent = (_a) => {
       });
     }
   } : void 0;
-  const refreshUrl = (_b2 = step.refreshUrl) != null ? _b2 : step.refreshFormUrl;
   const stepId = id || key;
   if (stepId === void 0) {
     throw new Error("Step must have an id or a key");
   }
   const uid = `${rootUid}.${stepId != null ? stepId : "step"}`;
-  const onRefresh = async (schemaId, url) => restProps.onRefresh(schemaId, url != null ? url : refreshUrl);
   const stepPolling = polling ? getStepPolling({ pollingConfig: polling, onBehavior, onPoll }) : void 0;
-  const stepRefreshAfter = refreshAfter ? getStepRefreshAfter({ refreshAfter, onRefresh }) : void 0;
+  const stepRefreshAfter = refreshAfter ? getStepRefreshAfter({ refreshAfter, onBehavior }) : void 0;
   const externalConfirmation = (external == null ? void 0 : external.url) ? createExternalConfirmation(`${uid}-external-confirmation`, external == null ? void 0 : external.url, updateComponent) : void 0;
-  const mapperProps = __spreadProps(__spreadValues({}, restProps), { trackEvent, onBehavior, onRefresh });
+  const mapperProps = __spreadProps(__spreadValues({}, restProps), { trackEvent, onBehavior });
   const referencedSchemaIds = getReferencedSchemaId(step);
   const schemaComponents = mapStepSchemas(
     uid,
@@ -6402,7 +6453,6 @@ function useDynamicFlowCore(props) {
     logEvent,
     httpClient,
     onBehavior,
-    onRefresh,
     onPoll,
     onValueChange
   });
@@ -6485,6 +6535,10 @@ function useDynamicFlowCore(props) {
         }
         break;
       }
+      case "refresh": {
+        await onRefresh(behavior.schemaId, behavior.url);
+        break;
+      }
       case "link": {
         onLink(behavior.url);
         break;
@@ -6583,14 +6637,14 @@ function useDynamicFlowCore(props) {
     }
   }, []);
   const onRefresh = useCallback2(
-    async (schemaId, refreshUrl = "", errorsOverride) => {
-      var _a2;
+    async (schemaId, refreshUrl, errorsOverride) => {
+      var _a2, _b;
       try {
         rootComponentRef.current.setLoadingState("refreshing");
         const model = (_a2 = await rootComponentRef.current.getSubmittableValue()) != null ? _a2 : null;
         const command = await executeRefresh({
           abortSignal: abortCurrentAndGetNewAbortSignal(),
-          url: refreshUrl,
+          url: (_b = refreshUrl != null ? refreshUrl : rootComponentRef.current.getRefreshUrl()) != null ? _b : "",
           model,
           schemaId,
           etag: etagRef.current,

package/build/types/legacy/dynamicFlow/utils/useLoader.d.ts

@@ -2,7 +2,7 @@ import type { DynamicFlowProps } from '../../dynamic-flow-types';
 type LoadingState = 'idle' | 'initial' | 'refresh' | 'submission';
 export declare function useLoader(loaderConfig: DynamicFlowProps['loaderConfig'], initialState: LoadingState): {
     isLoading: boolean;
-    setLoadingState: import("react").Dispatch<import("react").SetStateAction<"initial" | "idle" | "submission" | "refresh">>;
+    setLoadingState: import("react").Dispatch<import("react").SetStateAction<"initial" | "idle" | "refresh" | "submission">>;
     loader: import("react/jsx-runtime").JSX.Element | null;
 };
 export {};

package/build/types/revamp/domain/components/RootDomainComponent.d.ts

@@ -20,5 +20,6 @@ export type RootDomainComponent = BaseComponent & {
     hasStep: () => boolean;
     stop: () => void;
     setStep: (stepComponent: StepDomainComponent) => void;
+    getRefreshUrl: () => string | null;
 };
 export declare const createRootDomainComponent: (updateComponent: UpdateComponent) => RootDomainComponent;

package/build/types/revamp/domain/components/SectionComponent.d.ts

@@ -0,0 +1,9 @@
+import { BaseLayoutComponent, DomainComponent, CallToAction } from "../types";
+export type SectionComponent = BaseLayoutComponent & {
+    type: 'section';
+    title: string;
+    components: DomainComponent[];
+    callToAction?: CallToAction;
+    getChildren: () => DomainComponent[];
+};
+export declare const createSectionComponent: (props: Pick<SectionComponent, "uid" | "title" | "control" | "components" | "callToAction" | "margin">) => SectionComponent;

package/build/types/revamp/domain/components/StatusListComponent.d.ts

@@ -1,4 +1,4 @@
-import type { BaseLayoutComponent } from '../types';
+import type { BaseLayoutComponent, CallToAction } from '../types';
 export type StatusListComponent = BaseLayoutComponent & {
     type: 'status-list';
     items: StatusListItem[];
@@ -13,12 +13,7 @@ export type StatusListItem = {
         text: string;
     };
     status?: 'not-done' | 'pending' | 'done';
-    callToAction?: StatusListItemCallToAction;
+    callToAction?: CallToAction;
     tag?: string;
 };
-export type StatusListItemCallToAction = {
-    accessibilityDescription?: string;
-    title: string;
-    onClick: () => void;
-};
 export declare const createStatusListComponent: (statusListProps: Pick<StatusListComponent, "uid" | "control" | "items" | "margin" | "title">) => StatusListComponent;

package/build/types/revamp/domain/features/refresh/getPerformRefresh.d.ts

@@ -1,7 +1,7 @@
 import type { Schema } from '@wise/dynamic-flow-types/build/next';
-import type { LocalValue, OnRefresh } from '../../types';
+import type { LocalValue, OnBehavior } from '../../types';
 export type PerformRefresh = () => void;
-export declare const getPerformRefresh: (schema: Schema, onRefresh: OnRefresh) => PerformRefresh | undefined;
+export declare const getPerformRefresh: (schema: Schema, onBehavior: OnBehavior) => PerformRefresh | undefined;
 type DebouncedPerformRefresh<V extends LocalValue> = {
     (prevValue: V, updatedValue: V): void;
     cancel: () => void;

package/build/types/revamp/domain/features/refreshAfter/getStepRefreshAfter.d.ts

@@ -1,10 +1,10 @@
-import { OnRefresh } from '../../types';
+import { OnBehavior } from '../../types';
 export type StepRefreshAfter = {
     stop: () => void;
 };
 type Props = {
     refreshAfter: string;
-    onRefresh: OnRefresh;
+    onBehavior: OnBehavior;
 };
-export declare const getStepRefreshAfter: ({ refreshAfter, onRefresh }: Props) => StepRefreshAfter;
+export declare const getStepRefreshAfter: ({ refreshAfter, onBehavior }: Props) => StepRefreshAfter;
 export {};

package/build/types/revamp/domain/mappers/layout/sectionLayoutToComponent.d.ts

@@ -0,0 +1,5 @@
+import { SectionLayout } from '@wise/dynamic-flow-types/build/next';
+import { SectionComponent } from '../../components/SectionComponent';
+import { SchemaComponent } from '../../types';
+import { MapperProps } from '../schema/types';
+export declare const sectionLayoutToComponent: (uid: string, { control, title, components, callToAction, margin }: SectionLayout, mapperProps: MapperProps, schemaComponents: SchemaComponent[]) => SectionComponent;

package/build/types/revamp/domain/mappers/schema/arraySchemaToComponent/arraySchemaToMultiSelectComponent.d.ts

@@ -1,4 +1,4 @@
-import type { OneOfSchema, ArraySchemaList, Model } from '@wise/dynamic-flow-types/build/next';
+import type { ArraySchemaList, Model, OneOfSchema } from '@wise/dynamic-flow-types/build/next';
 import type { MapperProps, SchemaMapperProps } from '../types';
 export declare const arraySchemaToMultiSelectComponent: (schemaMapperProps: SchemaMapperProps & {
     schema: ArraySchemaList & {

package/build/types/revamp/domain/mappers/schema/tests/test-utils.d.ts

@@ -10,12 +10,10 @@ export declare const getMockMapperProps: (mapperProps?: Partial<MapperProps>) =>
     getErrorMessageFunctions: import("../../types").GetErrorMessageFunctions | jest.Mock<any, any, any>;
     httpClient: typeof fetch | jest.Mock<any, any, any>;
     onBehavior: import("../../../types").OnBehavior | jest.Mock<any, any, any>;
-    onRefresh: import("../../../types").OnRefresh | jest.Mock<any, any, any>;
     onValueChange: import("../../../types").OnValueChange | jest.Mock<any, any, any>;
     updateComponent: import("../../../types").UpdateComponent | jest.Mock<any, any, any>;
     trackEvent: import("../../../features/events").AnalyticsEventDispatcher | jest.Mock<any, any, any>;
     logEvent: import("../../../features/events").LoggingEventDispatcher | jest.Mock<any, any, any>;
-    onAction: jest.Mock<any, any, any>;
     onLink: jest.Mock<any, any, any>;
 };
 export declare const getMockSchemaMapperProps: <S extends Schema>(schemaMapperProps: Partial<SchemaMapperProps> & {

package/build/types/revamp/domain/mappers/schema/types.d.ts

@@ -1,7 +1,7 @@
 import type { Step as DFStep, Model, Schema, ValidationError } from '@wise/dynamic-flow-types/build/next';
 import type { HttpClient } from '../../../types';
 import type { AnalyticsEventDispatcher, LoggingEventDispatcher } from '../../features/events';
-import type { LocalValue, OnBehavior, OnRefresh, OnValueChange, UpdateComponent } from '../../types';
+import type { LocalValue, OnBehavior, OnValueChange, UpdateComponent } from '../../types';
 import type { GetErrorMessageFunctions, PersistAsyncConfig } from '../types';
 export type MapperProps = {
     stepLocalValue: LocalValue;
@@ -9,7 +9,6 @@ export type MapperProps = {
     getErrorMessageFunctions: GetErrorMessageFunctions;
     httpClient: HttpClient;
     onBehavior: OnBehavior;
-    onRefresh: OnRefresh;
     onValueChange: OnValueChange;
     updateComponent: UpdateComponent;
     trackEvent: AnalyticsEventDispatcher;

package/build/types/revamp/domain/types.d.ts

@@ -29,6 +29,7 @@ import type { RepeatableComponent } from './components/RepeatableComponent';
 import type { ReviewComponent } from './components/ReviewComponent';
 import type { RootDomainComponent } from './components/RootDomainComponent';
 import type { SearchComponent } from './components/searchComponent/SearchComponent';
+import type { SectionComponent } from './components/SectionComponent';
 import type { SelectInputComponent } from './components/SelectInputComponent';
 import type { StatusListComponent } from './components/StatusListComponent';
 import type { ExternalConfirmationComponent } from './components/step/ExternalConfirmationComponent';
@@ -38,7 +39,7 @@ import type { TupleComponent } from './components/TupleComponent';
 import type { UploadInputComponent } from './components/UploadInputComponent';
 export type DomainComponent = SchemaComponent | LayoutComponent | RootDomainComponent | StepDomainComponent;
 export type SchemaComponent = AllOfComponent | BooleanInputComponent | ConstComponent | DateInputComponent | IntegerInputComponent | MultiSelectComponent | MultiUploadInputComponent | NumberInputComponent | ObjectComponent | RepeatableComponent | SelectInputComponent | TextInputComponent | TupleComponent | UploadInputComponent;
-export type LayoutComponent = AlertComponent | BoxComponent | ButtonComponent | ColumnsComponent | ContainerComponent | DecisionComponent | DividerComponent | ExternalConfirmationComponent | FormComponent | HeadingComponent | ImageComponent | InstructionsComponent | ListComponent | LoadingIndicatorComponent | MarkdownComponent | ModalComponent | ModalContentComponent | ParagraphComponent | ReviewComponent | SearchComponent | StatusListComponent;
+export type LayoutComponent = AlertComponent | BoxComponent | ButtonComponent | ColumnsComponent | ContainerComponent | DecisionComponent | DividerComponent | ExternalConfirmationComponent | FormComponent | HeadingComponent | ImageComponent | InstructionsComponent | ListComponent | LoadingIndicatorComponent | MarkdownComponent | ModalComponent | ModalContentComponent | ParagraphComponent | ReviewComponent | SearchComponent | SectionComponent | StatusListComponent;
 export type LocalValue = LocalValuePrimitive | LocalValueObject | LocalValueArray;
 export type LocalValuePrimitive = string | number | boolean | File | null;
 export interface LocalValueObject extends Record<string, LocalValuePrimitive | LocalValueObject | LocalValueArray> {
@@ -57,9 +58,14 @@ export type CallToAction = {
     href: string;
     onClick: () => void;
 };
-export type Behavior = ActionBehavior | LinkBehavior | ModalBehavior | DismissBehavior | {
+export type Behavior = ActionBehavior | RefreshBehavior | LinkBehavior | ModalBehavior | DismissBehavior | {
     type: 'none';
 };
+type RefreshBehavior = {
+    type: 'refresh';
+    schemaId?: string;
+    url?: string;
+};
 export type BaseComponent = {
     type: string;
     uid: string;
@@ -107,7 +113,6 @@ export type BaseInputComponent<LV extends LocalValue> = BaseSchemaComponent<LV>
 export type UpdateComponent = () => void;
 export type OnBehavior = (behavior: Behavior) => Promise<void>;
 export type OnAction = (action: Action) => Promise<void>;
-export type OnRefresh = (schemaId: string | undefined, url?: string) => Promise<void> | void;
 export type OnPoll = (url: string, errorBehavior: Behavior, signal: AbortSignal) => Promise<boolean>;
 export type OnLink = (url: string) => boolean;
 export type OnValueChange = () => void;
@@ -161,3 +166,4 @@ export type SupportingValues = {
     value?: string;
     subvalue?: string;
 };
+export {};

package/build/types/revamp/renderers/mappers/sectionComponentToProps.d.ts

@@ -0,0 +1,4 @@
+import { SectionRendererProps } from '@wise/dynamic-flow-types/build/renderers';
+import { SectionComponent } from '../../domain/components/SectionComponent';
+import { RendererMapperProps } from './componentToRendererProps';
+export declare const sectionComponentToProps: (component: SectionComponent, rendererMapperProps: RendererMapperProps) => SectionRendererProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "4.5.7",
+  "version": "4.6.0",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -36,19 +36,12 @@
     "@babel/preset-env": "7.27.2",
     "@babel/preset-react": "7.27.1",
     "@babel/preset-typescript": "7.27.1",
-    "@chromatic-com/storybook": "3.2.6",
+    "@chromatic-com/storybook": "4.0.0",
     "@formatjs/cli": "^6.7.1",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-webpack5": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/types": "^8.6.14",
+    "@storybook/addon-a11y": "^9.0.4",
+    "@storybook/addon-docs": "^9.0.4",
+    "@storybook/addon-links": "^9.0.4",
+    "@storybook/react-vite": "9.0.4",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
@@ -57,8 +50,8 @@
     "@transferwise/formatting": "^2.13.1",
     "@transferwise/icons": "3.22.0",
     "@transferwise/neptune-css": "14.24.4",
-    "@types/node": "22.15.23",
     "@types/jest": "29.5.14",
+    "@types/node": "22.15.23",
     "@types/react": "18.3.23",
     "@types/react-dom": "18.3.7",
     "@types/react-intl": "3.0.0",
@@ -66,6 +59,7 @@
     "@wise/components-theming": "^1.6.3",
     "babel-jest": "29.7.0",
     "esbuild": "0.25.5",
+    "eslint-plugin-storybook": "9.0.4",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-fetch-mock": "^3.0.3",
@@ -77,14 +71,13 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.8.9",
-    "storybook": "^8.6.14",
+    "storybook": "^9.0.4",
     "stylelint": "16.19.1",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.4",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
     "tsx": "4.19.4",
     "typescript": "5.8.3",
-    "webpack": "5.99.9",
     "@wise/dynamic-flow-fixtures": "0.0.1",
     "@wise/dynamic-flow-renderers": "0.0.0"
   },
@@ -102,7 +95,7 @@
     "classnames": "2.5.1",
     "react-webcam": "^7.2.0",
     "screenfull": "^5.2.0",
-    "@wise/dynamic-flow-types": "3.3.5"
+    "@wise/dynamic-flow-types": "3.4.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3003",
@@ -123,6 +116,7 @@
     "lint": "npm-run-all lint:ts lint:css",
     "lint:ts": "eslint 'src/**/*.{js,jsx,ts,tsx}' --quiet",
     "lint:css": "stylelint './src/**/*.css'",
-    "build-storybook": "pnpm build:visual-tests && storybook build -c .storybook --disable-telemetry"
+    "build-storybook": "pnpm build:visual-tests && storybook build -c .storybook --disable-telemetry",
+    "audit-i18n": "tsx ./scripts/audit-i18n.mjs"
   }
 }