@wise/dynamic-flow-client-internal 3.12.0-experimental-kyc-camera-ebd94d5 → 3.12.0-experimental-rendererfor-4f35dc5

package/build/dynamicFlow/DynamicFlow.js

@@ -61,13 +61,13 @@ import { DynamicFlow as DynamicFlowCoreLegacy, DynamicFlowRevamp as DynamicFlowC
 export function DynamicFlowLegacy(props) {
     var _a = props.customFetch, customFetch = _a === void 0 ? globalThis.fetch : _a;
     var coreProps = __assign(__assign({}, props), { httpClient: customFetch });
-    return (_jsx("div", { id: "df-legacy", children: _jsx(DynamicFlowCoreLegacy, __assign({}, coreProps)) }));
+    return _jsx(DynamicFlowCoreLegacy, __assign({}, coreProps));
 }
 export function DynamicFlowRevamp(props) {
     var _a = props.customFetch, customFetch = _a === void 0 ? globalThis.fetch : _a;
     var httpClient = useWiseHttpClient(customFetch);
     var coreProps = __assign(__assign({}, props), { httpClient: httpClient });
-    return (_jsx("div", { id: "df-revamp", children: _jsx(DynamicFlowCoreRevamp, __assign({}, coreProps)) }));
+    return _jsx(DynamicFlowCoreRevamp, __assign({}, coreProps));
 }
 /**
  * DynamicFragment is like DynamicFlowRevamp, but it also accepts a ForwardedRef.

package/build/main.js

@@ -58,13 +58,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function DynamicFlowLegacy(props) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "df-legacy", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dynamic_flow_client.DynamicFlow, __spreadValues({}, coreProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dynamic_flow_client.DynamicFlow, __spreadValues({}, coreProps));
 }
 function DynamicFlowRevamp(props) {
   const { customFetch = globalThis.fetch } = props;
   const httpClient = useWiseHttpClient(customFetch);
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: "df-revamp", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dynamic_flow_client.DynamicFlowRevamp, __spreadValues({}, coreProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dynamic_flow_client.DynamicFlowRevamp, __spreadValues({}, coreProps));
 }
 var DynamicFragment = (0, import_react.forwardRef)(function DynamicFragment2(props, ref) {
   const { customFetch = globalThis.fetch } = props;

package/build/main.min.js

@@ -1 +1 @@
-"use strict";var p=Object.defineProperty,C=Object.defineProperties,u=Object.getOwnPropertyDescriptor,R=Object.getOwnPropertyDescriptors,I=Object.getOwnPropertyNames,F=Object.getOwnPropertySymbols;var D=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var w=(t,o,e)=>o in t?p(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,n=(t,o)=>{for(var e in o||(o={}))D.call(o,e)&&w(t,e,o[e]);if(F)for(var e of F(o))W.call(o,e)&&w(t,e,o[e]);return t},c=(t,o)=>C(t,R(o));var L=(t,o)=>{for(var e in o)p(t,e,{get:o[e],enumerable:!0})},x=(t,o,e,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of I(o))!D.call(t,a)&&a!==e&&p(t,a,{get:()=>o[a],enumerable:!(i=u(o,a))||i.enumerable});return t};var b=t=>x(p({},"__esModule",{value:!0}),t);var A={};L(A,{DynamicFlow:()=>s,DynamicFlowLegacy:()=>s,DynamicFlowRevamp:()=>f,DynamicFragment:()=>g,JsonSchemaForm:()=>l.JsonSchemaForm,isValidSchema:()=>l.isValidSchema,makeCustomFetch:()=>S,translations:()=>l.translations});module.exports=b(A);var d=require("@wise/dynamic-flow-client"),l=require("@wise/dynamic-flow-client");var y=require("react"),h=require("react-intl"),r=require("@wise/dynamic-flow-client");var m=require("react/jsx-runtime");function s(t){let{customFetch:o=globalThis.fetch}=t,e=c(n({},t),{httpClient:o});return(0,m.jsx)("div",{id:"df-legacy",children:(0,m.jsx)(r.DynamicFlow,n({},e))})}function f(t){let{customFetch:o=globalThis.fetch}=t,e=P(o),i=c(n({},t),{httpClient:e});return(0,m.jsx)("div",{id:"df-revamp",children:(0,m.jsx)(r.DynamicFlowRevamp,n({},i))})}var g=(0,y.forwardRef)(function(o,e){let{customFetch:i=globalThis.fetch}=o,a=P(i),v=c(n({},o),{httpClient:a});return(0,m.jsx)(r.DynamicFragmentWise,c(n({},v),{ref:e}))}),P=t=>{let{locale:o}=(0,h.useIntl)();return(0,y.useCallback)(async(e,i={})=>{let a=new Headers(i.headers);return a.set("accept-language",o),t(e,c(n({},i),{credentials:"include",headers:a}))},[t,o])};var S=d.makeHttpClient;
+"use strict";var l=Object.defineProperty,R=Object.defineProperties,d=Object.getOwnPropertyDescriptor,v=Object.getOwnPropertyDescriptors,W=Object.getOwnPropertyNames,F=Object.getOwnPropertySymbols;var D=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var w=(t,o,e)=>o in t?l(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,i=(t,o)=>{for(var e in o||(o={}))D.call(o,e)&&w(t,e,o[e]);if(F)for(var e of F(o))I.call(o,e)&&w(t,e,o[e]);return t},c=(t,o)=>R(t,v(o));var L=(t,o)=>{for(var e in o)l(t,e,{get:o[e],enumerable:!0})},x=(t,o,e,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of W(o))!D.call(t,a)&&a!==e&&l(t,a,{get:()=>o[a],enumerable:!(n=d(o,a))||n.enumerable});return t};var b=t=>x(l({},"__esModule",{value:!0}),t);var A={};L(A,{DynamicFlow:()=>y,DynamicFlowLegacy:()=>y,DynamicFlowRevamp:()=>f,DynamicFragment:()=>P,JsonSchemaForm:()=>r.JsonSchemaForm,isValidSchema:()=>r.isValidSchema,makeCustomFetch:()=>S,translations:()=>r.translations});module.exports=b(A);var C=require("@wise/dynamic-flow-client"),r=require("@wise/dynamic-flow-client");var p=require("react"),h=require("react-intl"),m=require("@wise/dynamic-flow-client");var s=require("react/jsx-runtime");function y(t){let{customFetch:o=globalThis.fetch}=t,e=c(i({},t),{httpClient:o});return(0,s.jsx)(m.DynamicFlow,i({},e))}function f(t){let{customFetch:o=globalThis.fetch}=t,e=g(o),n=c(i({},t),{httpClient:e});return(0,s.jsx)(m.DynamicFlowRevamp,i({},n))}var P=(0,p.forwardRef)(function(o,e){let{customFetch:n=globalThis.fetch}=o,a=g(n),u=c(i({},o),{httpClient:a});return(0,s.jsx)(m.DynamicFragmentWise,c(i({},u),{ref:e}))}),g=t=>{let{locale:o}=(0,h.useIntl)();return(0,p.useCallback)(async(e,n={})=>{let a=new Headers(n.headers);return a.set("accept-language",o),t(e,c(i({},n),{credentials:"include",headers:a}))},[t,o])};var S=C.makeHttpClient;

package/build/main.mjs

@@ -34,13 +34,13 @@ import { jsx } from "react/jsx-runtime";
 function DynamicFlowLegacy(props) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
-  return /* @__PURE__ */ jsx("div", { id: "df-legacy", children: /* @__PURE__ */ jsx(DynamicFlowCoreLegacy, __spreadValues({}, coreProps)) });
+  return /* @__PURE__ */ jsx(DynamicFlowCoreLegacy, __spreadValues({}, coreProps));
 }
 function DynamicFlowRevamp(props) {
   const { customFetch = globalThis.fetch } = props;
   const httpClient = useWiseHttpClient(customFetch);
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient });
-  return /* @__PURE__ */ jsx("div", { id: "df-revamp", children: /* @__PURE__ */ jsx(DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
+  return /* @__PURE__ */ jsx(DynamicFlowCoreRevamp, __spreadValues({}, coreProps));
 }
 var DynamicFragment = forwardRef(function DynamicFragment2(props, ref) {
   const { customFetch = globalThis.fetch } = props;

package/build/stories/Examples.story.js

@@ -1,20 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { storiesOf } from '@storybook/react';
 import { examples } from '@wise/dynamic-flow-fixtures';
 import DynamicFlowSideBySide from './utils/DynamicFlowSideBySide';
-import { getObjectKeys } from './utils/fixtureHttpClient';
-var storyMap = {};
-var allStepNames = getObjectKeys(examples);
-allStepNames.forEach(function (stepName) {
-    // eslint-disable-next-line import/namespace
-    var label = examples[stepName].id;
-    if (label) {
-        var _a = label.split('/'), group = _a[0], name_1 = _a[1];
-        storyMap[group] || (storyMap[group] = storiesOf("Examples/".concat(group), module).addParameters({
-            chromatic: { disableSnapshot: true },
-        }));
-        storyMap[group].add(name_1, function () { return (
-        // eslint-disable-next-line import/namespace
-        _jsx(DynamicFlowSideBySide, { initialStep: examples[stepName] }, stepName)); });
-    }
-});
+export default {
+    title: 'Examples',
+    component: DynamicFlowSideBySide,
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {},
+};
+export var CameraCapture = {
+    render: function () { return (_jsx(DynamicFlowSideBySide, { initialStep: examples.cameraCapture }, "camera-capture")); },
+};
+export var RecipientUpdate = {
+    render: function () { return (_jsx(DynamicFlowSideBySide, { initialStep: examples.recipientUpdate }, "recipient-update")); },
+};
+export var SingleFileUpload = {
+    render: function () { return (_jsx(DynamicFlowSideBySide, { initialStep: examples.singleFileUpload }, "single-file-upload")); },
+};
+export var RecipientCreation = {
+    render: function () { return (_jsx(DynamicFlowSideBySide, { initialStep: examples.recipientCreation }, "recipient-creation")); },
+};
+export var StepValidationErrors = {
+    render: function () { return (_jsx(DynamicFlowSideBySide, { initialStep: examples.stepValidationErrors }, "step-validation")); },
+};
+export var RecipientCreationWithInitialModel = {
+    render: function () { return (_jsx(DynamicFlowSideBySide, { initialStep: examples.recipientCreationWithInitialModel }, "recipient-creation-initial-model")); },
+};

package/build/stories/Features.story.js

@@ -1,27 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { storiesOf } from '@storybook/react';
 import { features } from '@wise/dynamic-flow-fixtures';
 import DynamicFlowSideBySide from './utils/DynamicFlowSideBySide';
-var storyMap = {};
-var selectedStepNames = [
-    'actionResponse',
-    'arrayUploadBase64',
-    'external',
-    'persistAsync',
-    'polling',
-    'search',
-    'modal',
-];
-selectedStepNames.forEach(function (stepName) {
-    // eslint-disable-next-line import/namespace
-    var label = features[stepName].id;
-    if (label) {
-        var _a = label.split('/'), group = _a[0], name_1 = _a[1];
-        storyMap[group] || (storyMap[group] = storiesOf("Examples/".concat(group), module).addParameters({
-            chromatic: { disableSnapshot: true },
-        }));
-        storyMap[group].add(name_1, function () { return (
-        // eslint-disable-next-line import/namespace
-        _jsx(DynamicFlowSideBySide, { initialStep: features[stepName] }, stepName)); });
-    }
-});
+var meta = {
+    component: DynamicFlowSideBySide,
+    title: 'Dev Tools/Features',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {},
+};
+export default meta;
+export var ActionResponse = {
+    render: function () { return (_jsx(DynamicFlowSideBySide, { initialStep: features.actionResponse }, "actionResponse")); },
+};
+export var ArrayUploadBase64 = {
+    render: function () { return (_jsx(DynamicFlowSideBySide, { initialStep: features.arrayUploadBase64 }, "arrayUploadBase64")); },
+};
+export var External = {
+    render: function () { return _jsx(DynamicFlowSideBySide, { initialStep: features.external }, "external"); },
+};
+export var PersistAsync = {
+    render: function () { return _jsx(DynamicFlowSideBySide, { initialStep: features.persistAsync }, "persistAsync"); },
+};
+export var Polling = {
+    render: function () { return _jsx(DynamicFlowSideBySide, { initialStep: features.polling }, "polling"); },
+};
+export var Search = {
+    render: function () { return _jsx(DynamicFlowSideBySide, { initialStep: features.search }, "search"); },
+};
+export var Modal = {
+    render: function () { return _jsx(DynamicFlowSideBySide, { initialStep: features.modal }, "modal"); },
+};

package/build/stories/visual-tests/generated.story.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { generated } from '@wise/dynamic-flow-fixtures';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+var meta = {
+    component: DynamicFlowSideBySide,
+    title: 'Visual Tests/Generated',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+    argTypes: {},
+};
+export default meta;
+export var alert = {
+    name: 'Alert',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.alert) }, "alert");
+    }
+};
+export var align = {
+    name: 'Align',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.align) }, "align");
+    }
+};
+export var box = {
+    name: 'Box',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.box) }, "box");
+    }
+};
+export var button = {
+    name: 'Button',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.button) }, "button");
+    }
+};
+export var checkbox = {
+    name: 'Checkbox',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.checkbox) }, "checkbox");
+    }
+};
+export var columns = {
+    name: 'Columns',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.columns) }, "columns");
+    }
+};
+export var copyable = {
+    name: 'Copyable',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.copyable) }, "copyable");
+    }
+};
+export var date = {
+    name: 'Date',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.date) }, "date");
+    }
+};
+export var datelookup = {
+    name: 'Date Lookup',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.datelookup) }, "datelookup");
+    }
+};
+export var decision = {
+    name: 'Decision',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.decision) }, "decision");
+    }
+};
+export var heading = {
+    name: 'Heading',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.heading) }, "heading");
+    }
+};
+export var image = {
+    name: 'Image',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.image) }, "image");
+    }
+};
+export var instructions = {
+    name: 'Instructions',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.instructions) }, "instructions");
+    }
+};
+export var integer = {
+    name: 'Integer',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.integer) }, "integer");
+    }
+};
+export var list = {
+    name: 'List',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.list) }, "list");
+    }
+};
+export var margin = {
+    name: 'Margin',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.margin) }, "margin");
+    }
+};
+export var markdown = {
+    name: 'Markdown',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.markdown) }, "markdown");
+    }
+};
+export var modal = {
+    name: 'Modal',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.modal) }, "modal");
+    }
+};
+export var multiselect = {
+    name: 'Multi Select',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.multiselect) }, "multiselect");
+    }
+};
+export var number = {
+    name: 'Number',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.number) }, "number");
+    }
+};
+export var paragraph = {
+    name: 'Paragraph',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.paragraph) }, "paragraph");
+    }
+};
+export var password = {
+    name: 'Password',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.password) }, "password");
+    }
+};
+export var phonenumber = {
+    name: 'Phone Number',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.phonenumber) }, "phonenumber");
+    }
+};
+export var radio = {
+    name: 'Radio',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.radio) }, "radio");
+    }
+};
+export var repeatable = {
+    name: 'Repeatable',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.repeatable) }, "repeatable");
+    }
+};
+export var review = {
+    name: 'Review',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.review) }, "review");
+    }
+};
+export var search = {
+    name: 'Search',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.search) }, "search");
+    }
+};
+export var segmented = {
+    name: 'Segmented',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.segmented) }, "segmented");
+    }
+};
+export var select = {
+    name: 'Select',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.select) }, "select");
+    }
+};
+export var tabs = {
+    name: 'Tabs',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.tabs) }, "tabs");
+    }
+};
+export var text = {
+    name: 'Text',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.text) }, "text");
+    }
+};
+export var textarea = {
+    name: 'Text Area',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.textarea) }, "textarea");
+    }
+};
+export var upload = {
+    name: 'Upload',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: JSON.parse(generated.upload) }, "upload");
+    }
+};

package/build/stories/visual-tests/layouts.story.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { layouts } from '@wise/dynamic-flow-fixtures';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+var meta = {
+    component: DynamicFlowSideBySide,
+    title: 'Visual Tests/Layouts',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+    argTypes: {},
+};
+export default meta;
+export var alert = {
+    name: 'Alert',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.alert }, "alert");
+    }
+};
+export var box = {
+    name: 'Box',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.box }, "box");
+    }
+};
+export var button = {
+    name: 'Button',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.button }, "button");
+    }
+};
+export var columns = {
+    name: 'Columns',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.columns }, "columns");
+    }
+};
+export var decision = {
+    name: 'Decision',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.decision }, "decision");
+    }
+};
+export var divider = {
+    name: 'Divider',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.divider }, "divider");
+    }
+};
+export var form = {
+    name: 'Form',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.form }, "form");
+    }
+};
+export var heading = {
+    name: 'Heading',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.heading }, "heading");
+    }
+};
+export var image = {
+    name: 'Image',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.image }, "image");
+    }
+};
+export var instructions = {
+    name: 'Instructions',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.instructions }, "instructions");
+    }
+};
+export var loadingIndicator = {
+    name: 'Loading Indicator',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.loadingIndicator }, "loadingIndicator");
+    }
+};
+export var margin = {
+    name: 'Margin',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.margin }, "margin");
+    }
+};
+export var markdown = {
+    name: 'Markdown',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.markdown }, "markdown");
+    }
+};
+export var paragraph = {
+    name: 'Paragraph',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.paragraph }, "paragraph");
+    }
+};
+export var review = {
+    name: 'Review',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.review }, "review");
+    }
+};
+export var statusList = {
+    name: 'List',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: layouts.statusList }, "statusList");
+    }
+};

package/build/stories/visual-tests/schemas.story.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { schemas } from '@wise/dynamic-flow-fixtures';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+var meta = {
+    component: DynamicFlowSideBySide,
+    title: 'Visual Tests/Schemas',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+    argTypes: {},
+};
+export default meta;
+export var allOf = {
+    name: 'AllOf',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.allOf }, "allOf");
+    }
+};
+export var array = {
+    name: 'Array',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.array }, "array");
+    }
+};
+export var arrayUpload = {
+    name: 'Array Upload',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.arrayUpload }, "arrayUpload");
+    }
+};
+export var blob = {
+    name: 'Blob',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.blob }, "blob");
+    }
+};
+export var boolean = {
+    name: 'Boolean',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.boolean }, "boolean");
+    }
+};
+export var hidden = {
+    name: 'Hidden',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.hidden }, "hidden");
+    }
+};
+export var integer = {
+    name: 'Integer',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.integer }, "integer");
+    }
+};
+export var multiSelect = {
+    name: 'Multi Select',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.multiSelect }, "multiSelect");
+    }
+};
+export var number = {
+    name: 'Number',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.number }, "number");
+    }
+};
+export var object = {
+    name: 'Object',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.object }, "object");
+    }
+};
+export var oneOf = {
+    name: 'OneOf',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.oneOf }, "oneOf");
+    }
+};
+export var string = {
+    name: 'String',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: schemas.string }, "string");
+    }
+};

package/build/stories/visual-tests/step.story.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { step } from '@wise/dynamic-flow-fixtures';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+var meta = {
+    component: DynamicFlowSideBySide,
+    title: 'Visual Tests/Step',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+    argTypes: {},
+};
+export default meta;
+export var basic = {
+    name: 'Basic',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: step.basic }, "basic");
+    }
+};
+export var globalError = {
+    name: 'Error',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: step.globalError }, "globalError");
+    }
+};
+export var validationError = {
+    name: 'Validation',
+    render: function () {
+        return _jsx(DynamicFlowSideBySide, { initialStep: step.validationError }, "validationError");
+    }
+};

package/build/types/index.d.ts

@@ -1,4 +1,4 @@
-export type { DynamicFlowProps, Step, InitialAction, InitialActionRevamp, DynamicFragmentController, } from '@wise/dynamic-flow-client';
+export type { DynamicFlowProps, Step, InitialAction, DynamicFragmentController, Renderers, RendererFor, } from '@wise/dynamic-flow-client';
 export { translations, JsonSchemaForm, isValidSchema } from '@wise/dynamic-flow-client';
 export type { DynamicFlowLegacyProps as WiseDynamicFlowProps, DynamicFlowLegacyProps, DynamicFlowRevampProps, } from './dynamicFlow/DynamicFlow';
 export { DynamicFlowLegacy as DynamicFlow, DynamicFlowLegacy, DynamicFlowRevamp, DynamicFragment, } from './dynamicFlow/DynamicFlow';

package/build/types/stories/Examples.story.d.ts

@@ -1 +1,20 @@
-export {};
+import DynamicFlowSideBySide from './utils/DynamicFlowSideBySide';
+import { StoryObj } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: typeof DynamicFlowSideBySide;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+    argTypes: {};
+};
+export default _default;
+type Story = StoryObj<typeof DynamicFlowSideBySide>;
+export declare const CameraCapture: Story;
+export declare const RecipientUpdate: Story;
+export declare const SingleFileUpload: Story;
+export declare const RecipientCreation: Story;
+export declare const StepValidationErrors: Story;
+export declare const RecipientCreationWithInitialModel: Story;

package/build/types/stories/Features.story.d.ts

@@ -1 +1,12 @@
-export {};
+import { Meta, StoryObj } from '@storybook/react';
+import DynamicFlowSideBySide from './utils/DynamicFlowSideBySide';
+declare const meta: Meta<typeof DynamicFlowSideBySide>;
+export default meta;
+type Story = StoryObj<typeof DynamicFlowSideBySide>;
+export declare const ActionResponse: Story;
+export declare const ArrayUploadBase64: Story;
+export declare const External: Story;
+export declare const PersistAsync: Story;
+export declare const Polling: Story;
+export declare const Search: Story;
+export declare const Modal: Story;

package/build/types/stories/visual-tests/generated.story.d.ts

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+declare const meta: Meta<typeof DynamicFlowSideBySide>;
+export default meta;
+type Story = StoryObj<typeof DynamicFlowSideBySide>;
+export declare const alert: Story;
+export declare const align: Story;
+export declare const box: Story;
+export declare const button: Story;
+export declare const checkbox: Story;
+export declare const columns: Story;
+export declare const copyable: Story;
+export declare const date: Story;
+export declare const datelookup: Story;
+export declare const decision: Story;
+export declare const heading: Story;
+export declare const image: Story;
+export declare const instructions: Story;
+export declare const integer: Story;
+export declare const list: Story;
+export declare const margin: Story;
+export declare const markdown: Story;
+export declare const modal: Story;
+export declare const multiselect: Story;
+export declare const number: Story;
+export declare const paragraph: Story;
+export declare const password: Story;
+export declare const phonenumber: Story;
+export declare const radio: Story;
+export declare const repeatable: Story;
+export declare const review: Story;
+export declare const search: Story;
+export declare const segmented: Story;
+export declare const select: Story;
+export declare const tabs: Story;
+export declare const text: Story;
+export declare const textarea: Story;
+export declare const upload: Story;

package/build/types/stories/visual-tests/layouts.story.d.ts

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+declare const meta: Meta<typeof DynamicFlowSideBySide>;
+export default meta;
+type Story = StoryObj<typeof DynamicFlowSideBySide>;
+export declare const alert: Story;
+export declare const box: Story;
+export declare const button: Story;
+export declare const columns: Story;
+export declare const decision: Story;
+export declare const divider: Story;
+export declare const form: Story;
+export declare const heading: Story;
+export declare const image: Story;
+export declare const instructions: Story;
+export declare const loadingIndicator: Story;
+export declare const margin: Story;
+export declare const markdown: Story;
+export declare const paragraph: Story;
+export declare const review: Story;
+export declare const statusList: Story;

package/build/types/stories/visual-tests/schemas.story.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+declare const meta: Meta<typeof DynamicFlowSideBySide>;
+export default meta;
+type Story = StoryObj<typeof DynamicFlowSideBySide>;
+export declare const allOf: Story;
+export declare const array: Story;
+export declare const arrayUpload: Story;
+export declare const blob: Story;
+export declare const boolean: Story;
+export declare const hidden: Story;
+export declare const integer: Story;
+export declare const multiSelect: Story;
+export declare const number: Story;
+export declare const object: Story;
+export declare const oneOf: Story;
+export declare const string: Story;

package/build/types/stories/visual-tests/step.story.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DynamicFlowSideBySide from '../utils/DynamicFlowSideBySide';
+declare const meta: Meta<typeof DynamicFlowSideBySide>;
+export default meta;
+type Story = StoryObj<typeof DynamicFlowSideBySide>;
+export declare const basic: Story;
+export declare const globalError: Story;
+export declare const validationError: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "3.12.0-experimental-kyc-camera-ebd94d5",
+  "version": "3.12.0-experimental-rendererfor-4f35dc5",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.min.js",
@@ -25,15 +25,17 @@
     "@babel/preset-env": "7.24.7",
     "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
+    "@chromatic-com/storybook": "1.5.0",
     "@formatjs/cli": "^6.2.12",
-    "@storybook/addon-a11y": "7.6.19",
-    "@storybook/addon-actions": "7.6.19",
-    "@storybook/addon-essentials": "7.6.19",
-    "@storybook/addon-interactions": "7.6.19",
-    "@storybook/addon-links": "7.6.19",
-    "@storybook/react": "7.6.19",
-    "@storybook/react-webpack5": "7.6.19",
-    "@storybook/testing-library": "0.2.2",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-webpack5": "^8.1.10",
+    "@storybook/test": "^8.1.10",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "6.4.6",
     "@testing-library/react": "14.3.1",
@@ -58,20 +60,21 @@
     "jest-watch-typeahead": "^2.2.2",
     "npm-run-all2": "5.0.2",
     "postcss": "^8.4.38",
-    "postcss-cli": "^10.1.0",
+    "postcss-cli": "^11.0.0",
     "postcss-import": "^15.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.6.8",
-    "storybook": "7.6.19",
+    "storybook": "8.1.10",
     "stylelint": "16.6.1",
-    "stylelint-config-standard": "36.0.0",
-    "stylelint-no-unsupported-browser-features": "5.0.4",
+    "stylelint-config-standard": "36.0.1",
+    "stylelint-no-unsupported-browser-features": "8.0.1",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
+    "tsx": "4.15.6",
     "typescript": "5.4.5",
     "webpack": "5.92.0",
     "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-types": "2.15.2"
+    "@wise/dynamic-flow-types": "2.15.3-experimental-rendererfor-4f35dc5"
   },
   "peerDependencies": {
     "react": "^18",
@@ -79,14 +82,15 @@
     "react-intl": "^6"
   },
   "dependencies": {
-    "@wise/dynamic-flow-client": "3.12.0-experimental-kyc-camera-ebd94d5"
+    "@wise/dynamic-flow-client": "3.12.0-experimental-rendererfor-4f35dc5"
   },
   "scripts": {
-    "dev": "storybook dev -p 3005",
+    "dev": "pnpm build:visual-tests && storybook dev -p 3005",
     "build": "rm -rf build && npm-run-all build:*",
     "build:types": "tsc --project ./tsconfig.types.json",
     "build:js": "node ./scripts/build.mjs",
     "build:css": "postcss src/main.css -o build/main.css",
+    "build:visual-tests": "tsx ./scripts/build-visual-tests.mjs",
     "test": "pnpm test:once",
     "test:once": "jest --config jest.config.js --env=jsdom --passWithNoTests",
     "test:coverage": "jest --config jest.config.js --env=jsdom --coverage",
@@ -96,6 +100,6 @@
     "lint": "npm-run-all lint:ts lint:css",
     "lint:ts": "eslint 'src/**/*.{js,jsx,ts,tsx}' --quiet",
     "lint:css": "stylelint --allow-empty-input './src/**/*.css'",
-    "build-storybook": "storybook build -c .storybook --disable-telemetry"
+    "build-storybook": "pnpm build:visual-tests && storybook build -c .storybook --disable-telemetry"
   }
 }

package/build/stories/VisualTests.story.js

@@ -1,39 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react';
-import { step, layouts, schemas, generatedJson as generatedFixtures, } from '@wise/dynamic-flow-fixtures';
-import { getObjectKeys } from './utils/fixtureHttpClient';
-import DynamicFlowSideBySide from './utils/DynamicFlowSideBySide';
-var fixtures = __assign(__assign(__assign({}, step), layouts), schemas);
-var storyMap = {};
-var allStepNames = getObjectKeys(fixtures);
-allStepNames.forEach(function (stepName) {
-    var label = fixtures[stepName].id;
-    if (label) {
-        var _a = label.split('/'), group = _a[0], name_1 = _a[1];
-        storyMap[group] || (storyMap[group] = storiesOf("Visual Tests/".concat(group), module));
-        storyMap[group].add(name_1, function () { return (_jsx(DynamicFlowSideBySide, { initialStep: fixtures[stepName] }, stepName)); });
-    }
-});
-storyMap.generated || (storyMap.generated = storiesOf("Visual Tests/Generated", module));
-Object.keys(generatedFixtures).forEach(function (fixtureName) {
-    var _a;
-    var initialStep = JSON.parse(
-    // eslint-disable-next-line import/namespace
-    generatedFixtures[fixtureName]);
-    (_a = storyMap.generated) === null || _a === void 0 ? void 0 : _a.add(initialStep.id ? initialStep.id.replaceAll(/([A-Z])/g, ' $1').trim() : 'Invalid id', function () {
-        action('Render Step')(initialStep);
-        return _jsx(DynamicFlowSideBySide, { initialStep: initialStep }, fixtureName);
-    });
-});

package/build/types/stories/VisualTests.story.d.ts

@@ -1 +0,0 @@
-export {};