@wise/dynamic-flow-client 5.2.0-exp-bits-29346f3 → 5.3.0

package/build/i18n/uk.json

@@ -1,6 +1,6 @@
 {
   "dynamicFlows.ArraySchema.addItem": "Зберегти",
-  "dynamicFlows.ArraySchema.addItemTitle": "Add Item",
+  "dynamicFlows.ArraySchema.addItemTitle": "Додати позицію",
   "dynamicFlows.ArraySchema.editItem": "Зберегти",
   "dynamicFlows.ArraySchema.maxItemsError": "Додайте {maxItems} або менше.",
   "dynamicFlows.ArraySchema.minItemsError": "Додайте принаймні {minItems}.",
@@ -24,7 +24,7 @@
   "dynamicFlows.ExternalConfirmation.open": "Відкрити в новій вкладці",
   "dynamicFlows.ExternalConfirmation.title": "Підтвердьте",
   "dynamicFlows.FileUploadSchema.maxFileSizeError": "Вибачте, але цей файл завеликий. Завантажте менший файл.",
-  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Sorry, that file format is not supported. Please upload a different file.",
+  "dynamicFlows.FileUploadSchema.wrongFileTypeError": "Цей формат файлу не підтримується. Завантажте інший файл.",
   "dynamicFlows.Help.ariaLabel": "Натисніть тут, щоб дізнатися більше.",
   "dynamicFlows.MultiSelect.summary": "{first} і ще {count}",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "Вибачте, але цей файл завеликий. Завантажте менший файл.",

package/build/main.css

@@ -14,7 +14,11 @@
 .df-box-renderer-width-lg {
   width: 100%;
 }
-@media screen and (width >= 768px) {
+@media screen and (width >=768px) {
+  .df-box-renderer-border {
+    padding: var(--size-24);
+  }
+
   .df-box-renderer-width-xs {
     width: 33.33%;
   }
@@ -31,7 +35,7 @@
     width: 83.33%;
   }
 }
-@media screen and (width >= 990px) {
+@media screen and (width >=990px) {
   .df-box-renderer-width-xs {
     width: 25%;
   }

package/build/main.js

@@ -789,6 +789,7 @@ var isNull = (value) => value === null;
 var isUndefined = (value) => typeof value === "undefined";
 var isNullish = (v) => isNull(v) || isUndefined(v);
 var isFile = (value) => value instanceof File;
+var isValidDate = (value) => isString(value) && /^\d{4}-\d{2}-\d{2}$/.test(value);
 
 // src/renderers/utils.ts
 function findRendererPropsByType(root, type, predicate = () => true) {
@@ -828,6 +829,7 @@ var getChildren = (node) => {
     case "input-date":
     case "decision":
     case "divider":
+    case "formatted-value":
     case "heading":
     case "hidden":
     case "image":
@@ -1275,6 +1277,29 @@ var externalComponentToProps = (component, rendererMapperProps) => {
   }, rendererMapperProps);
 };
 
+// src/renderers/mappers/formattedValueComponentToProps.ts
+var formattedValueComponentToProps = (component, rendererMapperProps) => {
+  return __spreadValues(__spreadProps(__spreadValues({
+    type: "formatted-value"
+  }, pick(
+    component,
+    "format",
+    "uid",
+    "analyticsId",
+    "control",
+    "description",
+    "help",
+    "media",
+    "tags",
+    "title"
+    // for now, we don't want to pass `value` down to the renderer to avoid the "WhateverComponent".
+    // 'value',
+  )), {
+    validationState: getValidationState(component.errors, void 0),
+    onChange: component.onChange.bind(component)
+  }), rendererMapperProps);
+};
+
 // src/renderers/mappers/formComponentToProps.ts
 var formComponentToProps = (component, rendererMapperProps) => {
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
@@ -1438,10 +1463,28 @@ var pickValidationState = (states) => {
   return definedStates[0];
 };
 
+// src/renderers/mappers/utils/selectInputOptionsToProps.ts
+var selectInputOptionsToProps = (options, children, rendererMapperProps) => {
+  return options.map((option, index) => {
+    const child = children[index];
+    const optionChildrenProps = child ? componentToRendererProps(child, rendererMapperProps) : null;
+    const optionChildren = optionChildrenProps ? rendererMapperProps.render(optionChildrenProps) : null;
+    return __spreadProps(__spreadValues({}, option), {
+      children: optionChildren,
+      childrenProps: optionChildrenProps
+    });
+  });
+};
+
 // src/renderers/mappers/multiSelectComponentToProps.ts
 var multiSelectInputComponentToProps = (component, rendererMapperProps) => {
-  const { autoComplete, maxItems, minItems, options, selectedIndices, onSelect } = component;
+  const { autoComplete, maxItems, minItems, selectedIndices, onSelect } = component;
   const _a = inputComponentToProps(component, "input-multi-select"), { required, value } = _a, props = __objRest(_a, ["required", "value"]);
+  const options = selectInputOptionsToProps(
+    component.options,
+    component.getChildren(),
+    rendererMapperProps
+  );
   return __spreadProps(__spreadValues(__spreadValues({}, props), rendererMapperProps), {
     autoComplete,
     maxItems,
@@ -1782,10 +1825,15 @@ var sectionComponentToProps = (component, rendererMapperProps) => {
 
 // src/renderers/mappers/selectInputComponentToProps.ts
 var selectInputComponentToProps = (component, rendererMapperProps) => {
-  const { autoComplete, options, selectedIndex, onSelect } = component;
+  const { autoComplete, selectedIndex, onSelect } = component;
   const selectedChild = component.getSelectedChild();
   const childrenProps = selectedChild ? componentToRendererProps(selectedChild, rendererMapperProps) : null;
   const _a = inputComponentToProps(component, "input-select"), { value } = _a, props = __objRest(_a, ["value"]);
+  const options = selectInputOptionsToProps(
+    component.options,
+    component.getChildren(),
+    rendererMapperProps
+  );
   return __spreadProps(__spreadValues(__spreadValues({}, props), rendererMapperProps), {
     autoComplete,
     options,
@@ -1907,6 +1955,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return dividerComponentToProps(component, rendererMapperProps);
     case "external-confirmation":
       return externalComponentToProps(component, rendererMapperProps);
+    case "formatted-value":
+      return formattedValueComponentToProps(component, rendererMapperProps);
     case "form":
       return formComponentToProps(component, rendererMapperProps);
     case "heading":
@@ -3978,6 +4028,12 @@ var getRequiredCheck = (required, messageFunctions) => (value) => {
   }
   return isNullish(value) ? messageFunctions.required() : null;
 };
+var getValidDateCheck = (required, messageFunctions) => (value) => {
+  if (required && !isValidDate(value)) {
+    return messageFunctions.required();
+  }
+  return null;
+};
 
 // src/domain/mappers/utils/getAutocompleteString.ts
 var getAutocompleteString = (hints) => {
@@ -5569,6 +5625,83 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
   );
 };
 
+// src/domain/components/FormattedValueComponent.ts
+var createFormattedValueComponent = (props, updateComponent) => {
+  const {
+    uid,
+    schemaId,
+    analyticsId,
+    alert,
+    control,
+    description,
+    errors,
+    format,
+    help,
+    hidden,
+    media,
+    summariser,
+    title,
+    tags,
+    value,
+    schemaOnChange
+  } = props;
+  const update = getInputUpdateFunction(updateComponent);
+  return {
+    type: "formatted-value",
+    kind: "input",
+    uid,
+    schemaId,
+    analyticsId,
+    alert,
+    control,
+    description,
+    errors,
+    format,
+    help,
+    hidden,
+    media,
+    title,
+    tags,
+    value,
+    async getSubmittableValue() {
+      return this.getSubmittableValueSync();
+    },
+    getSubmittableValueSync() {
+      return this.getLocalValue();
+    },
+    getSummary() {
+      return summariser(this.getLocalValue());
+    },
+    getLocalValue() {
+      return this.value;
+    },
+    validate() {
+      return true;
+    },
+    onChange(newValue) {
+      update(this, (draft) => {
+        draft.value = newValue;
+      });
+      void (schemaOnChange == null ? void 0 : schemaOnChange());
+    }
+  };
+};
+
+// src/domain/mappers/schema/objectSchemaToComponent/objectSchemaToFormattedValueComponent.ts
+var objectSchemaToFormattedValueComponent = (schemaMapperProps, mapperProps) => {
+  const { onBehavior } = mapperProps;
+  const { schema } = schemaMapperProps;
+  const { format } = schema;
+  return createFormattedValueComponent(
+    __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
+      format,
+      value: schemaMapperProps.model,
+      schemaOnChange: getSchemaOnChange(schema, onBehavior)
+    }),
+    mapperProps.updateComponent
+  );
+};
+
 // src/domain/components/MoneyInputComponent.ts
 var createMoneyInputComponent = (moneyInputProps, updateComponent) => {
   const _a = moneyInputProps, {
@@ -6196,7 +6329,7 @@ var createPersistAsyncComponent = (props, performPersistAsync, schemaOnChange, u
 };
 
 // src/domain/mappers/schema/persistAsyncSchemaToComponent.ts
-var isSupported = (type) => ["boolean", "text", "date", "integer", "number", "upload"].includes(type);
+var isSupported = (type) => ["const", "boolean", "text", "date", "integer", "number", "upload"].includes(type);
 var persistAsyncSchemaToComponent = (schemaMapperProps, mapperProps) => {
   const { uid, schema, model, localValue } = schemaMapperProps;
   const { persistAsync, tags } = schema;
@@ -6295,8 +6428,10 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
       return this.getSubmittableValueSync();
     },
     getSubmittableValueSync() {
-      var _a2;
-      return (_a2 = this.getLocalValue()) != null ? _a2 : null;
+      if (isValidDate(this.getLocalValue())) {
+        return this.getLocalValue();
+      }
+      return null;
     },
     getSummary() {
       return summariser(this.getLocalValue());
@@ -6360,6 +6495,7 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
       autoComplete: getAutocompleteString(autocompleteHint),
       checks: schema.hidden ? [] : [
         getRequiredCheck(required, errorMessageFunctions),
+        getValidDateCheck(required, errorMessageFunctions),
         getAboveMaximumDateCheck(schema, errorMessageFunctions),
         getBelowMinimumDateCheck(schema, errorMessageFunctions)
       ],
@@ -6588,9 +6724,16 @@ var mapSchemaToComponent = (schemaMapperProps, mapperProps) => {
     return booleanSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
   }
   if (isObjectSchema(schema)) {
-    if (schema.format === "money") {
+    const { format } = schema;
+    if (format === "money") {
       return objectSchemaToMoneyInputComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
     }
+    if (format != null && Object.keys(schema.properties).length === 0) {
+      return objectSchemaToFormattedValueComponent(
+        __spreadProps(__spreadValues({}, schemaMapperProps), { schema: __spreadProps(__spreadValues({}, schema), { format }) }),
+        mapperProps
+      );
+    }
     return objectSchemaToObjectComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
   }
   if (isIntegerSchema(schema)) {
@@ -7726,16 +7869,7 @@ function useDynamicFlowController(props) {
   }
   return {
     rootComponent: rootComponentRef.current,
-    cancelFlow: closeWithCancellation,
-    navigateBack: () => {
-      var _a2;
-      if (((_a2 = rootComponentRef.current.stepStack) == null ? void 0 : _a2.length) > 1) {
-        rootComponentRef.current.navigateBack();
-      } else {
-        closeWithCancellation();
-      }
-      rootComponentRef.current.setLoadingState("idle");
-    }
+    cancel: closeWithCancellation
   };
 }
 var useRerender = () => {
@@ -7764,7 +7898,7 @@ var normaliseFlowId = (flowId) => flowId.toLowerCase().replace(/[^a-z-]/g, "-");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var className = "dynamic-flow";
 function useDynamicFlow(props) {
-  var _a, _b, _c;
+  var _a;
   const { flowId, renderers, httpClient, onEvent, onError, onLog } = props;
   const normalisedFlowId = normaliseFlowId(flowId);
   const scrollToTop = (0, import_react4.useMemo)(
@@ -7775,7 +7909,7 @@ function useDynamicFlow(props) {
     var _a2;
     return new FeatureFlags((_a2 = props.features) != null ? _a2 : {});
   }, []);
-  const { rootComponent, cancelFlow, navigateBack } = useDynamicFlowController(__spreadProps(__spreadValues({}, props), {
+  const { rootComponent, cancel } = useDynamicFlowController(__spreadProps(__spreadValues({}, props), {
     features,
     scrollToTop
   }));
@@ -7792,13 +7926,12 @@ function useDynamicFlow(props) {
     stepLoadingState: rootComponent.getLoadingState()
   });
   return {
-    title: (_c = (_b = rootComponent.getStep()) == null ? void 0 : _b.title) != null ? _c : "",
-    getSubmittableValue: async () => rootComponent.getSubmittableValue(),
-    validate: () => rootComponent.validate(),
-    rootComponent,
-    cancelFlow,
-    navigateBack,
-    component: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    controller: {
+      getSubmittableValue: async () => rootComponent.getSubmittableValue(),
+      validate: () => rootComponent.validate(),
+      cancel
+    },
+    view: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ErrorBoundary_default,
       {
         onError: (error) => {
@@ -7817,5 +7950,5 @@ function useDynamicFlow(props) {
 // src/DynamicFlowCore.tsx
 function DynamicFlowCore(props) {
   const df = useDynamicFlow(props);
-  return df.component;
+  return df.view;
 }

package/build/main.mjs

@@ -762,6 +762,7 @@ var isNull = (value) => value === null;
 var isUndefined = (value) => typeof value === "undefined";
 var isNullish = (v) => isNull(v) || isUndefined(v);
 var isFile = (value) => value instanceof File;
+var isValidDate = (value) => isString(value) && /^\d{4}-\d{2}-\d{2}$/.test(value);
 
 // src/renderers/utils.ts
 function findRendererPropsByType(root, type, predicate = () => true) {
@@ -801,6 +802,7 @@ var getChildren = (node) => {
     case "input-date":
     case "decision":
     case "divider":
+    case "formatted-value":
     case "heading":
     case "hidden":
     case "image":
@@ -1248,6 +1250,29 @@ var externalComponentToProps = (component, rendererMapperProps) => {
   }, rendererMapperProps);
 };
 
+// src/renderers/mappers/formattedValueComponentToProps.ts
+var formattedValueComponentToProps = (component, rendererMapperProps) => {
+  return __spreadValues(__spreadProps(__spreadValues({
+    type: "formatted-value"
+  }, pick(
+    component,
+    "format",
+    "uid",
+    "analyticsId",
+    "control",
+    "description",
+    "help",
+    "media",
+    "tags",
+    "title"
+    // for now, we don't want to pass `value` down to the renderer to avoid the "WhateverComponent".
+    // 'value',
+  )), {
+    validationState: getValidationState(component.errors, void 0),
+    onChange: component.onChange.bind(component)
+  }), rendererMapperProps);
+};
+
 // src/renderers/mappers/formComponentToProps.ts
 var formComponentToProps = (component, rendererMapperProps) => {
   const childrenProps = component.getChildren().map((c) => componentToRendererProps(c, rendererMapperProps));
@@ -1411,10 +1436,28 @@ var pickValidationState = (states) => {
   return definedStates[0];
 };
 
+// src/renderers/mappers/utils/selectInputOptionsToProps.ts
+var selectInputOptionsToProps = (options, children, rendererMapperProps) => {
+  return options.map((option, index) => {
+    const child = children[index];
+    const optionChildrenProps = child ? componentToRendererProps(child, rendererMapperProps) : null;
+    const optionChildren = optionChildrenProps ? rendererMapperProps.render(optionChildrenProps) : null;
+    return __spreadProps(__spreadValues({}, option), {
+      children: optionChildren,
+      childrenProps: optionChildrenProps
+    });
+  });
+};
+
 // src/renderers/mappers/multiSelectComponentToProps.ts
 var multiSelectInputComponentToProps = (component, rendererMapperProps) => {
-  const { autoComplete, maxItems, minItems, options, selectedIndices, onSelect } = component;
+  const { autoComplete, maxItems, minItems, selectedIndices, onSelect } = component;
   const _a = inputComponentToProps(component, "input-multi-select"), { required, value } = _a, props = __objRest(_a, ["required", "value"]);
+  const options = selectInputOptionsToProps(
+    component.options,
+    component.getChildren(),
+    rendererMapperProps
+  );
   return __spreadProps(__spreadValues(__spreadValues({}, props), rendererMapperProps), {
     autoComplete,
     maxItems,
@@ -1755,10 +1798,15 @@ var sectionComponentToProps = (component, rendererMapperProps) => {
 
 // src/renderers/mappers/selectInputComponentToProps.ts
 var selectInputComponentToProps = (component, rendererMapperProps) => {
-  const { autoComplete, options, selectedIndex, onSelect } = component;
+  const { autoComplete, selectedIndex, onSelect } = component;
   const selectedChild = component.getSelectedChild();
   const childrenProps = selectedChild ? componentToRendererProps(selectedChild, rendererMapperProps) : null;
   const _a = inputComponentToProps(component, "input-select"), { value } = _a, props = __objRest(_a, ["value"]);
+  const options = selectInputOptionsToProps(
+    component.options,
+    component.getChildren(),
+    rendererMapperProps
+  );
   return __spreadProps(__spreadValues(__spreadValues({}, props), rendererMapperProps), {
     autoComplete,
     options,
@@ -1880,6 +1928,8 @@ var getComponentProps = (component, rendererMapperProps) => {
       return dividerComponentToProps(component, rendererMapperProps);
     case "external-confirmation":
       return externalComponentToProps(component, rendererMapperProps);
+    case "formatted-value":
+      return formattedValueComponentToProps(component, rendererMapperProps);
     case "form":
       return formComponentToProps(component, rendererMapperProps);
     case "heading":
@@ -3951,6 +4001,12 @@ var getRequiredCheck = (required, messageFunctions) => (value) => {
   }
   return isNullish(value) ? messageFunctions.required() : null;
 };
+var getValidDateCheck = (required, messageFunctions) => (value) => {
+  if (required && !isValidDate(value)) {
+    return messageFunctions.required();
+  }
+  return null;
+};
 
 // src/domain/mappers/utils/getAutocompleteString.ts
 var getAutocompleteString = (hints) => {
@@ -5542,6 +5598,83 @@ var integerSchemaToComponent = (schemaMapperProps, mapperProps) => {
   );
 };
 
+// src/domain/components/FormattedValueComponent.ts
+var createFormattedValueComponent = (props, updateComponent) => {
+  const {
+    uid,
+    schemaId,
+    analyticsId,
+    alert,
+    control,
+    description,
+    errors,
+    format,
+    help,
+    hidden,
+    media,
+    summariser,
+    title,
+    tags,
+    value,
+    schemaOnChange
+  } = props;
+  const update = getInputUpdateFunction(updateComponent);
+  return {
+    type: "formatted-value",
+    kind: "input",
+    uid,
+    schemaId,
+    analyticsId,
+    alert,
+    control,
+    description,
+    errors,
+    format,
+    help,
+    hidden,
+    media,
+    title,
+    tags,
+    value,
+    async getSubmittableValue() {
+      return this.getSubmittableValueSync();
+    },
+    getSubmittableValueSync() {
+      return this.getLocalValue();
+    },
+    getSummary() {
+      return summariser(this.getLocalValue());
+    },
+    getLocalValue() {
+      return this.value;
+    },
+    validate() {
+      return true;
+    },
+    onChange(newValue) {
+      update(this, (draft) => {
+        draft.value = newValue;
+      });
+      void (schemaOnChange == null ? void 0 : schemaOnChange());
+    }
+  };
+};
+
+// src/domain/mappers/schema/objectSchemaToComponent/objectSchemaToFormattedValueComponent.ts
+var objectSchemaToFormattedValueComponent = (schemaMapperProps, mapperProps) => {
+  const { onBehavior } = mapperProps;
+  const { schema } = schemaMapperProps;
+  const { format } = schema;
+  return createFormattedValueComponent(
+    __spreadProps(__spreadValues({}, mapCommonSchemaProps(schemaMapperProps)), {
+      format,
+      value: schemaMapperProps.model,
+      schemaOnChange: getSchemaOnChange(schema, onBehavior)
+    }),
+    mapperProps.updateComponent
+  );
+};
+
 // src/domain/components/MoneyInputComponent.ts
 var createMoneyInputComponent = (moneyInputProps, updateComponent) => {
   const _a = moneyInputProps, {
@@ -6169,7 +6302,7 @@ var createPersistAsyncComponent = (props, performPersistAsync, schemaOnChange, u
 };
 
 // src/domain/mappers/schema/persistAsyncSchemaToComponent.ts
-var isSupported = (type) => ["boolean", "text", "date", "integer", "number", "upload"].includes(type);
+var isSupported = (type) => ["const", "boolean", "text", "date", "integer", "number", "upload"].includes(type);
 var persistAsyncSchemaToComponent = (schemaMapperProps, mapperProps) => {
   const { uid, schema, model, localValue } = schemaMapperProps;
   const { persistAsync, tags } = schema;
@@ -6268,8 +6401,10 @@ var createDateInputComponent = (textInputProps, updateComponent) => {
       return this.getSubmittableValueSync();
     },
     getSubmittableValueSync() {
-      var _a2;
-      return (_a2 = this.getLocalValue()) != null ? _a2 : null;
+      if (isValidDate(this.getLocalValue())) {
+        return this.getLocalValue();
+      }
+      return null;
     },
     getSummary() {
       return summariser(this.getLocalValue());
@@ -6333,6 +6468,7 @@ var stringSchemaToDateInputComponent = (schemaMapperProps, mapperProps) => {
       autoComplete: getAutocompleteString(autocompleteHint),
       checks: schema.hidden ? [] : [
         getRequiredCheck(required, errorMessageFunctions),
+        getValidDateCheck(required, errorMessageFunctions),
         getAboveMaximumDateCheck(schema, errorMessageFunctions),
         getBelowMinimumDateCheck(schema, errorMessageFunctions)
       ],
@@ -6561,9 +6697,16 @@ var mapSchemaToComponent = (schemaMapperProps, mapperProps) => {
     return booleanSchemaToComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
   }
   if (isObjectSchema(schema)) {
-    if (schema.format === "money") {
+    const { format } = schema;
+    if (format === "money") {
       return objectSchemaToMoneyInputComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
     }
+    if (format != null && Object.keys(schema.properties).length === 0) {
+      return objectSchemaToFormattedValueComponent(
+        __spreadProps(__spreadValues({}, schemaMapperProps), { schema: __spreadProps(__spreadValues({}, schema), { format }) }),
+        mapperProps
+      );
+    }
     return objectSchemaToObjectComponent(__spreadProps(__spreadValues({}, schemaMapperProps), { schema }), mapperProps);
   }
   if (isIntegerSchema(schema)) {
@@ -7699,16 +7842,7 @@ function useDynamicFlowController(props) {
   }
   return {
     rootComponent: rootComponentRef.current,
-    cancelFlow: closeWithCancellation,
-    navigateBack: () => {
-      var _a2;
-      if (((_a2 = rootComponentRef.current.stepStack) == null ? void 0 : _a2.length) > 1) {
-        rootComponentRef.current.navigateBack();
-      } else {
-        closeWithCancellation();
-      }
-      rootComponentRef.current.setLoadingState("idle");
-    }
+    cancel: closeWithCancellation
   };
 }
 var useRerender = () => {
@@ -7737,7 +7871,7 @@ var normaliseFlowId = (flowId) => flowId.toLowerCase().replace(/[^a-z-]/g, "-");
 import { jsx as jsx6 } from "react/jsx-runtime";
 var className = "dynamic-flow";
 function useDynamicFlow(props) {
-  var _a, _b, _c;
+  var _a;
   const { flowId, renderers, httpClient, onEvent, onError, onLog } = props;
   const normalisedFlowId = normaliseFlowId(flowId);
   const scrollToTop = useMemo2(
@@ -7748,7 +7882,7 @@ function useDynamicFlow(props) {
     var _a2;
     return new FeatureFlags((_a2 = props.features) != null ? _a2 : {});
   }, []);
-  const { rootComponent, cancelFlow, navigateBack } = useDynamicFlowController(__spreadProps(__spreadValues({}, props), {
+  const { rootComponent, cancel } = useDynamicFlowController(__spreadProps(__spreadValues({}, props), {
     features,
     scrollToTop
   }));
@@ -7765,13 +7899,12 @@ function useDynamicFlow(props) {
     stepLoadingState: rootComponent.getLoadingState()
   });
   return {
-    title: (_c = (_b = rootComponent.getStep()) == null ? void 0 : _b.title) != null ? _c : "",
-    getSubmittableValue: async () => rootComponent.getSubmittableValue(),
-    validate: () => rootComponent.validate(),
-    rootComponent,
-    cancelFlow,
-    navigateBack,
-    component: /* @__PURE__ */ jsx6(
+    controller: {
+      getSubmittableValue: async () => rootComponent.getSubmittableValue(),
+      validate: () => rootComponent.validate(),
+      cancel
+    },
+    view: /* @__PURE__ */ jsx6(
       ErrorBoundary_default,
       {
         onError: (error) => {
@@ -7790,7 +7923,7 @@ function useDynamicFlow(props) {
 // src/DynamicFlowCore.tsx
 function DynamicFlowCore(props) {
   const df = useDynamicFlow(props);
-  return df.component;
+  return df.view;
 }
 export {
   DynamicFlowCore as DynamicFlow,

package/build/types/DynamicFlowCore.d.ts

@@ -1,5 +1,2 @@
 import type { DynamicFlowCoreProps } from './types';
-/**
- * @deprecated Use `useDynamicFlow` hook instead.
- */
 export declare function DynamicFlowCore(props: DynamicFlowCoreProps): import("react/jsx-runtime").JSX.Element;

package/build/types/domain/components/FormattedValueComponent.d.ts

@@ -0,0 +1,16 @@
+import { JsonElement } from '@wise/dynamic-flow-types/spec';
+import { SchemaOnChange } from '../features/schema-on-change/getSchemaOnChange';
+import type { BaseSchemaComponent, InlineAlert, LocalValue, RepeatableSummary, UpdateComponent } from '../types';
+export type FormattedValueComponent = BaseSchemaComponent<JsonElement> & {
+    type: 'formatted-value';
+    kind: 'input';
+    format: string;
+    alert?: InlineAlert;
+    errors: string[] | undefined;
+    value: JsonElement;
+    onChange: (newValue: JsonElement) => void;
+};
+export declare const createFormattedValueComponent: (props: Pick<FormattedValueComponent, "uid" | "schemaId" | "analyticsId" | "alert" | "control" | "description" | "errors" | "format" | "help" | "hidden" | "media" | "title" | "tags" | "value"> & {
+    summariser: (value: LocalValue | null) => RepeatableSummary;
+    schemaOnChange: SchemaOnChange | undefined;
+}, updateComponent: UpdateComponent) => FormattedValueComponent;

package/build/types/domain/features/validation/value-checks.d.ts

@@ -23,4 +23,5 @@ export declare const getAboveMaximumDateCheck: GetIsInvalidCheck<StringSchema, s
 export declare const getBelowMinimumDateCheck: GetIsInvalidCheck<StringSchema, string | null>;
 export declare const getNotAdheringToPatternCheck: GetIsInvalidCheck<StringSchema, string | null>;
 export declare const getRequiredCheck: (required: boolean, messageFunctions: ErrorMessageFunctions) => IsInvalidCheck<LocalValue | null>;
+export declare const getValidDateCheck: (required: boolean, messageFunctions: ErrorMessageFunctions) => IsInvalidCheck<string | null>;
 export {};

package/build/types/domain/mappers/schema/objectSchemaToComponent/objectSchemaToFormattedValueComponent.d.ts

@@ -0,0 +1,7 @@
+import type { ObjectSchema } from '@wise/dynamic-flow-types/spec';
+import type { MapperProps, SchemaMapperProps } from '../types';
+export declare const objectSchemaToFormattedValueComponent: (schemaMapperProps: SchemaMapperProps & {
+    schema: ObjectSchema & {
+        format: string;
+    };
+}, mapperProps: MapperProps) => import("../../../components/FormattedValueComponent").FormattedValueComponent;

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

@@ -471,6 +471,31 @@ export declare const oneOfSchemaToComponent: (schemaMapperProps: SchemaMapperPro
     onUpload: (value: File | null) => Promise<void>;
 } & {
     kind: "input";
+}) | (import("../../../types").BaseComponent & {
+    schemaId?: string;
+    isSchemaReferencedInStep?: boolean;
+    control?: string;
+    description?: string;
+    help?: string;
+    hidden: boolean;
+    media?: import("../../../types").Media;
+    title?: string;
+    tags?: string[];
+    getLocalValue: () => import("@wise/dynamic-flow-types/spec").JsonElement;
+    getSubmittableValueSync: () => import("@wise/dynamic-flow-types/spec").Model;
+    getSummary: () => import("../../../types").RepeatableSummary;
+    getSubmittableValue: () => Promise<import("@wise/dynamic-flow-types/spec").Model>;
+    validate: () => boolean;
+} & {
+    type: "formatted-value";
+    kind: "input";
+    format: string;
+    alert?: import("../../../types").InlineAlert;
+    errors: string[] | undefined;
+    value: import("@wise/dynamic-flow-types/spec").JsonElement;
+    onChange: (newValue: import("@wise/dynamic-flow-types/spec").JsonElement) => void;
+} & {
+    kind: "input";
 }) | (import("../../../types").BaseComponent & {
     schemaId?: string;
     isSchemaReferencedInStep?: boolean;

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

@@ -484,6 +484,31 @@ export declare const persistAsyncSchemaToComponent: (schemaMapperProps: SchemaMa
     onUpload: (value: File | null) => Promise<void>;
 } & {
     kind: "input";
+}) | (import("../../types").BaseComponent & {
+    schemaId?: string;
+    isSchemaReferencedInStep?: boolean;
+    control?: string;
+    description?: string;
+    help?: string;
+    hidden: boolean;
+    media?: import("../../types").Media;
+    title?: string;
+    tags?: string[];
+    getLocalValue: () => import("@wise/dynamic-flow-types/spec").JsonElement;
+    getSubmittableValueSync: () => import("@wise/dynamic-flow-types/spec").Model;
+    getSummary: () => import("../../types").RepeatableSummary;
+    getSubmittableValue: () => Promise<import("@wise/dynamic-flow-types/spec").Model>;
+    validate: () => boolean;
+} & {
+    type: "formatted-value";
+    kind: "input";
+    format: string;
+    alert?: import("../../types").InlineAlert;
+    errors: string[] | undefined;
+    value: import("@wise/dynamic-flow-types/spec").JsonElement;
+    onChange: (newValue: import("@wise/dynamic-flow-types/spec").JsonElement) => void;
+} & {
+    kind: "input";
 }) | (import("../../types").BaseComponent & {
     schemaId?: string;
     isSchemaReferencedInStep?: boolean;

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

@@ -10,6 +10,7 @@ import type { ContainerComponent } from './components/ContainerComponent';
 import type { DateInputComponent } from './components/DateInputComponent';
 import type { DecisionComponent } from './components/DecisionComponent';
 import type { DividerComponent } from './components/DividerComponent';
+import type { FormattedValueComponent } from './components/FormattedValueComponent';
 import type { FormComponent } from './components/FormComponent';
 import type { HeadingComponent } from './components/HeadingComponent';
 import type { ImageComponent } from './components/ImageComponent';
@@ -41,7 +42,7 @@ import type { TabsComponent } from './components/TabsComponent';
 import type { TextInputComponent } from './components/TextInputComponent';
 import type { TupleComponent } from './components/TupleComponent';
 import type { UploadInputComponent } from './components/UploadInputComponent';
-export type DomainComponent = RootDomainComponent | StepDomainComponent | PersistAsyncComponent | AllOfComponent | BooleanInputComponent | ConstComponent | DateInputComponent | IntegerInputComponent | MultiSelectComponent | MultiUploadInputComponent | NumberInputComponent | ObjectComponent | RepeatableComponent | SelectInputComponent | TextInputComponent | TupleComponent | UploadInputComponent | AlertComponent | BoxComponent | ButtonComponent | ColumnsComponent | ContainerComponent | DecisionComponent | DividerComponent | ExternalConfirmationComponent | FormComponent | HeadingComponent | ImageComponent | InstructionsComponent | ListComponent | LoadingIndicatorComponent | MarkdownComponent | ModalLayoutComponent | ModalComponent | MoneyInputComponent | ParagraphComponent | ProgressComponent | ReviewComponent | SearchComponent | SectionComponent | StatusListComponent | TabsComponent;
+export type DomainComponent = RootDomainComponent | StepDomainComponent | PersistAsyncComponent | AllOfComponent | BooleanInputComponent | ConstComponent | DateInputComponent | IntegerInputComponent | MultiSelectComponent | MultiUploadInputComponent | NumberInputComponent | ObjectComponent | RepeatableComponent | SelectInputComponent | TextInputComponent | TupleComponent | UploadInputComponent | AlertComponent | BoxComponent | ButtonComponent | ColumnsComponent | ContainerComponent | DecisionComponent | DividerComponent | ExternalConfirmationComponent | FormattedValueComponent | FormComponent | HeadingComponent | ImageComponent | InstructionsComponent | ListComponent | LoadingIndicatorComponent | MarkdownComponent | ModalLayoutComponent | ModalComponent | MoneyInputComponent | ParagraphComponent | ProgressComponent | ReviewComponent | SearchComponent | SectionComponent | StatusListComponent | TabsComponent;
 export type SchemaComponent = DomainComponent & {
     kind: 'input';
 };

package/build/types/renderers/mappers/formattedValueComponentToProps.d.ts

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

package/build/types/renderers/mappers/multiSelectComponentToProps.d.ts

@@ -1,4 +1,4 @@
-import type { MultiSelectComponent } from '../../domain/components/MultiSelectInputComponent';
 import type { MultiSelectInputRendererProps } from '@wise/dynamic-flow-types/renderers';
+import type { MultiSelectComponent } from '../../domain/components/MultiSelectInputComponent';
 import { RendererMapperProps } from './componentToRendererProps';
 export declare const multiSelectInputComponentToProps: (component: MultiSelectComponent, rendererMapperProps: RendererMapperProps) => MultiSelectInputRendererProps;

package/build/types/renderers/mappers/selectInputComponentToProps.d.ts

@@ -1,4 +1,4 @@
-import type { SelectInputComponent } from '../../domain/components/SelectInputComponent';
 import type { SelectInputRendererProps } from '@wise/dynamic-flow-types/renderers';
+import type { SelectInputComponent } from '../../domain/components/SelectInputComponent';
 import { type RendererMapperProps } from './componentToRendererProps';
 export declare const selectInputComponentToProps: (component: SelectInputComponent, rendererMapperProps: RendererMapperProps) => SelectInputRendererProps;

package/build/types/renderers/mappers/utils/selectInputOptionsToProps.d.ts

@@ -0,0 +1,5 @@
+import type { SelectInputRendererOption } from '@wise/dynamic-flow-types/renderers';
+import { SelectInputOption } from '../../../domain/components/SelectInputComponent';
+import { SchemaComponent } from '../../../domain/types';
+import { RendererMapperProps } from '../componentToRendererProps';
+export declare const selectInputOptionsToProps: (options: SelectInputOption[], children: SchemaComponent[], rendererMapperProps: RendererMapperProps) => SelectInputRendererOption[];

package/build/types/useDynamicFlow.d.ts

@@ -3,11 +3,10 @@ import type { DynamicFlowCoreProps } from './types';
  * @experimental This hook may be changed or removed in the future without notice.
  */
 export declare function useDynamicFlow(props: DynamicFlowCoreProps): {
-    title: string;
-    getSubmittableValue: () => Promise<import("@wise/dynamic-flow-types/spec").JsonElement>;
-    validate: () => boolean;
-    rootComponent: import("./domain/components/RootDomainComponent").RootDomainComponent;
-    cancelFlow: () => void;
-    navigateBack: () => void;
-    component: import("react/jsx-runtime").JSX.Element;
+    controller: {
+        getSubmittableValue: () => Promise<import("@wise/dynamic-flow-types/spec").JsonElement>;
+        validate: () => boolean;
+        cancel: () => void;
+    };
+    view: import("react/jsx-runtime").JSX.Element;
 };

package/build/types/useDynamicFlowController.d.ts

@@ -10,7 +10,6 @@ type UseDynamicFlowCoreProps = Omit<DynamicFlowCoreProps, 'renderers' | 'feature
 };
 export declare function useDynamicFlowController(props: UseDynamicFlowCoreProps): {
     rootComponent: RootDomainComponent;
-    cancelFlow: () => void;
-    navigateBack: () => void;
+    cancel: () => void;
 };
 export {};

package/build/types/utils/type-validators.d.ts

@@ -8,3 +8,4 @@ export declare const isNull: (value: unknown) => value is null;
 export declare const isUndefined: (value: unknown) => value is undefined;
 export declare const isNullish: (v: unknown) => v is null | undefined;
 export declare const isFile: (value: unknown) => value is File;
+export declare const isValidDate: (value: string | null) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client",
-  "version": "5.2.0-exp-bits-29346f3",
+  "version": "5.3.0",
   "description": "Dynamic Flow web client",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.3",
-    "@formatjs/cli": "^6.9.0",
+    "@formatjs/cli": "^6.11.0",
     "@storybook/addon-a11y": "^10.1.11",
     "@storybook/addon-docs": "^10.1.11",
     "@storybook/addon-links": "^10.1.11",
@@ -41,21 +41,21 @@
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.1",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "^46.118.0",
+    "@transferwise/components": "^46.121.1",
     "@transferwise/formatting": "^2.13.4",
-    "@transferwise/icons": "4.0.1",
+    "@transferwise/icons": "4.0.2",
     "@transferwise/navigation-ui": "4.41.0",
-    "@transferwise/neptune-css": "14.26.0",
-    "@types/node": "22.19.3",
+    "@transferwise/neptune-css": "14.26.1",
+    "@types/node": "22.19.7",
     "@types/react": "18.3.27",
     "@types/react-dom": "18.3.7",
     "@types/react-intl": "3.0.0",
     "@vitejs/plugin-react": "5.1.2",
-    "@wise/art": "2.25.0",
-    "@wise/components-theming": "^1.9.1",
+    "@wise/art": "2.26.0",
+    "@wise/components-theming": "^1.10.0",
     "esbuild": "0.27.0",
     "eslint-plugin-storybook": "10.1.11",
-    "framer-motion": "^12.23.26",
+    "framer-motion": "^12.26.2",
     "npm-run-all2": "8.0.4",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
@@ -70,10 +70,10 @@
     "stylelint-value-no-unknown-custom-properties": "6.1.0",
     "tsx": "4.21.0",
     "typescript": "5.9.3",
-    "vitest": "4.0.16",
+    "vitest": "4.0.17",
     "vitest-fetch-mock": "0.4.5",
-    "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-fixtures": "0.0.1"
+    "@wise/dynamic-flow-fixtures": "0.0.1",
+    "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
@@ -86,7 +86,7 @@
     "react-intl": "^6"
   },
   "dependencies": {
-    "@wise/dynamic-flow-types": "4.2.0-exp-bits-29346f3"
+    "@wise/dynamic-flow-types": "4.4.0"
   },
   "scripts": {
     "dev": "EXCLUDE_VISUAL_TESTS=true pnpm storybook dev -p 3003",

package/build/types/utils/useFeatureFlags.d.ts

@@ -1,2 +0,0 @@
-import { FeatureFlags } from '../domain/mappers/utils/FeatureFlags';
-export declare const useFeatureFlags: (features: Record<string, unknown> | undefined) => FeatureFlags;