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

package/build/legacy/dynamicFlow/DynamicFlow.js

@@ -200,7 +200,7 @@ var DynamicFlowComponent = function (_a) {
     }, [httpClient, JSON.stringify(initialStep), JSON.stringify(initialAction)]);
     var getErrorResponse = useErrorResponse();
     var handleResponse = function (response, fetchType, actionResult) { return __awaiter(void 0, void 0, void 0, function () {
-        var errorResponse, result, error_3;
+        var isInitialRequest, errorResponse, result, error_3;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -210,7 +210,8 @@ var DynamicFlowComponent = function (_a) {
                         return [2 /*return*/];
                     }
                     if (!!response.ok) return [3 /*break*/, 2];
-                    return [4 /*yield*/, getErrorResponse(response, fetchType)];
+                    isInitialRequest = step === undefined;
+                    return [4 /*yield*/, getErrorResponse(response, fetchType, isInitialRequest)];
                 case 1:
                     errorResponse = _a.sent();
                     void updateAfterError(errorResponse);

package/build/legacy/dynamicFlow/stories/dev-tools/Examples.story.js

@@ -1,25 +1,57 @@
+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 { examples } from '@wise/dynamic-flow-fixtures';
 import DynamicFlow from '../../DynamicFlow';
-import { getObjectKeys } from '../fixtureHttpClient';
-var storyMap = {};
-var allStepNames = getObjectKeys(examples);
+export default {
+    title: 'Dev Tools/Examples',
+    component: DynamicFlow,
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {},
+};
+Object.keys(examples).forEach(function (e) {
+    return e;
+});
 var httpClient = function (input, init) {
     action('httpClient')(input, init);
     return fetch(input, init);
 };
-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("Dev Tools/".concat(group), module).addParameters({
-            chromatic: { disableSnapshot: true },
-        }));
-        storyMap[group].add(name_1, function () { return (_jsx(DynamicFlow, { flowId: "storybook", 
-            // eslint-disable-next-line import/namespace
-            initialStep: examples[stepName], httpClient: httpClient, loaderConfig: { size: 'xl', initial: true, submission: false }, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, stepName)); });
-    }
-});
+var defaultProps = {
+    flowId: 'storybook',
+    httpClient: httpClient,
+    loaderConfig: { size: 'xl', initial: true, submission: false },
+    onCompletion: action('onCompletion'),
+    onError: action('onError'),
+    onEvent: action('onEvent'),
+    onLog: action('onLog'),
+};
+export var CameraCapture = {
+    render: function () { return _jsx(DynamicFlow, __assign({}, defaultProps, { initialStep: examples.cameraCapture })); },
+};
+export var RecipientUpdate = {
+    render: function () { return _jsx(DynamicFlow, __assign({}, defaultProps, { initialStep: examples.recipientUpdate })); },
+};
+export var SingleFileUpload = {
+    render: function () { return _jsx(DynamicFlow, __assign({}, defaultProps, { initialStep: examples.singleFileUpload })); },
+};
+export var RecipientCreation = {
+    render: function () { return _jsx(DynamicFlow, __assign({}, defaultProps, { initialStep: examples.recipientCreation })); },
+};
+export var StepValidationErrors = {
+    render: function () { return (_jsx(DynamicFlow, __assign({}, defaultProps, { initialStep: examples.stepValidationErrors }))); },
+};
+export var RecipientCreationWithInitialModel = {
+    render: function () { return (_jsx(DynamicFlow, __assign({}, defaultProps, { initialStep: examples.recipientCreationWithInitialModel }))); },
+};

package/build/legacy/dynamicFlow/stories/dev-tools/Features.story.js

@@ -1,33 +1,58 @@
+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 { features } from '@wise/dynamic-flow-fixtures';
 import DynamicFlow from '../../DynamicFlow';
-var storyMap = {};
-var selectedStepNames = [
-    'actionResponse',
-    'arrayUploadBase64',
-    'external',
-    'multiSelect',
-    'persistAsync',
-    'polling',
-    'search',
-    'modal',
-];
 var httpClient = function (input, init) {
     action('httpClient')(input, init);
     return fetch(input, init);
 };
-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("Dev Tools/".concat(group), module).addParameters({
-            chromatic: { disableSnapshot: true },
-        }));
-        storyMap[group].add(name_1, function () { return (_jsx(DynamicFlow, { flowId: "storybook", 
-            // eslint-disable-next-line import/namespace
-            initialStep: features[stepName], httpClient: httpClient, loaderConfig: { size: 'xl', initial: true, submission: false }, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, stepName)); });
-    }
-});
+var meta = {
+    component: DynamicFlow,
+    title: 'Dev Tools/Features',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {},
+};
+export default meta;
+var defaultProps = {
+    flowId: 'storybook',
+    httpClient: httpClient,
+    loaderConfig: { size: 'xl', initial: true, submission: false },
+    onCompletion: action('onCompletion'),
+    onError: action('onError'),
+    onEvent: action('onEvent'),
+    onLog: action('onLog'),
+};
+export var ActionResponse = {
+    render: function () { return _jsx(DynamicFlow, __assign({}, defaultProps, { initialStep: features.actionResponse })); },
+};
+export var ArrayUploadBase64 = {
+    render: function () { return _jsx(DynamicFlow, __assign({}, defaultProps, { initialStep: features.arrayUploadBase64 })); },
+};
+export var External = {
+    render: function () { return _jsx(DynamicFlow, __assign({}, defaultProps, { initialStep: features.external })); },
+};
+export var MultiSelect = {
+    render: function () { return _jsx(DynamicFlow, __assign({}, defaultProps, { initialStep: features.multiSelect })); },
+};
+export var PersistAsync = {
+    render: function () { return _jsx(DynamicFlow, __assign({}, defaultProps, { initialStep: features.persistAsync })); },
+};
+export var Polling = {
+    render: function () { return _jsx(DynamicFlow, __assign({}, defaultProps, { initialStep: features.polling })); },
+};
+export var Modal = {
+    render: function () { return _jsx(DynamicFlow, __assign({}, defaultProps, { initialStep: features.modal })); },
+};

package/build/legacy/dynamicFlow/stories/dev-tools/SearchFeature.story.js

@@ -46,14 +46,20 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable react/forbid-dom-props */
 import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react';
 import DynamicFlow from '../../DynamicFlow';
 import { abortableDelay } from '../../../../test-utils/fetch-utils';
-var storyMap = {};
-var group = 'Dev Tools';
-storyMap[group] || (storyMap[group] = storiesOf("".concat(group, "/Features/Search (not static)"), module).addParameters({
-    chromatic: { disableSnapshot: true },
-}));
+var meta = {
+    component: DynamicFlow,
+    title: 'Dev Tools/Features/Search (not static)',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {},
+    decorators: [
+        function (Story) { return (_jsxs(_Fragment, { children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsxs("ul", { children: [_jsx("li", { children: "If your search term has 3 or fewer characters, the search results will take 2 seconds to load." }), _jsx("li", { children: "If your search term has more than 3 characters, the search results will take 1 second to load." }), _jsx("li", { children: "If your search term is \"nothing\", then the search results will take 1 second to load, but will be empty." }), _jsx("li", { children: "If your search term is \"error\", then the search results will take 1 second to load, with a status 500." })] }) }), _jsx(Story, {})] })); },
+    ],
+};
+export default meta;
 var step = function (control) {
     if (control === void 0) { control = undefined; }
     return ({
@@ -84,8 +90,12 @@ var step = function (control) {
         ],
     });
 };
-storyMap[group].add('Search', function () { return (_jsxs(_Fragment, { children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsxs("ul", { children: [_jsx("li", { children: "If your search term has 3 or fewer characters, the search results will take 2 seconds to load." }), _jsx("li", { children: "If your search term has more than 3 characters, the search results will take 1 second to load." }), _jsx("li", { children: "If your search term is \"nothing\", then the search results will take 1 second to load, but will be empty." }), _jsx("li", { children: "If your search term is \"error\", then the search results will take 1 second to load, with a status 500." })] }) }), _jsx(DynamicFlow, { flowId: "storybook", initialStep: step(), httpClient: httpClient, loaderConfig: { size: 'xl', initial: true, submission: false }, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, "search")] })); });
-storyMap[group].add('Search - Inline', function () { return (_jsxs(_Fragment, { children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsxs("ul", { children: [_jsx("li", { children: "If your search term has 3 or fewer characters, the search results will take 2 seconds to load." }), _jsx("li", { children: "If your search term has more than 3 characters, the search results will take 1 second to load." }), _jsx("li", { children: "If your search term is \"nothing\", then the search results will take 1 second to load, but will be empty." }), _jsx("li", { children: "If your search term is \"error\", then the search results will take 1 second to load, with a status 500." })] }) }), _jsx(DynamicFlow, { flowId: "storybook", initialStep: step('inline'), httpClient: httpClient, loaderConfig: { size: 'xl', initial: true, submission: false }, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, "search")] })); });
+export var Search = {
+    render: function () { return (_jsx(DynamicFlow, { flowId: "storybook", initialStep: step(), httpClient: httpClient, loaderConfig: { size: 'xl', initial: true, submission: false }, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, "search")); },
+};
+export var SearchInline = {
+    render: function () { return (_jsx(DynamicFlow, { flowId: "storybook", initialStep: step('inline'), httpClient: httpClient, loaderConfig: { size: 'xl', initial: true, submission: false }, onCompletion: action('onCompletion'), onError: action('onError'), onEvent: action('onEvent'), onLog: action('onLog') }, "search")); },
+};
 var httpClient = function (input, init) { return __awaiter(void 0, void 0, void 0, function () {
     var query, signal, delay;
     var _a;

package/build/legacy/dynamicFlow/tests/DynamicFlow.InitialAction.spec.js

@@ -451,15 +451,16 @@ describe('e2E: Given a DynamicFlow component with a "initialAction" prop', funct
         }); });
     });
     describe('when the initial action returns an error response with empty body', function () {
-        it('should render a generic error message', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var httpClient;
+        it('should trigger onError, failing the flow', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var httpClient, onError;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         httpClient = jest.fn(function () { return getMockJsonResponse(null, { status: 500 }); });
-                        renderComponent({ httpClient: httpClient });
+                        onError = jest.fn();
+                        renderComponent({ httpClient: httpClient, onError: onError });
                         return [4 /*yield*/, waitFor(function () {
-                                expect(screen.getByText('Something went wrong, please try again.')).toBeInTheDocument();
+                                expect(onError).toHaveBeenCalled();
                             })];
                     case 1:
                         _a.sent();

package/build/legacy/dynamicFlow/tests/DynamicFlow.legacy.spec.js

@@ -296,8 +296,8 @@ describe('Given a component for rendering a dynamic flow', function () {
                     }
                 });
             }); });
-            it('should NOT trigger onError callback', function () {
-                expect(onError).not.toHaveBeenCalled();
+            it('should trigger onError callback with the status code (because it is the initial request)', function () {
+                expect(onError).toHaveBeenCalledWith(expect.objectContaining({ arbitraryKey: 'Not Authorized' }), 401);
             });
         });
         describe('but the response is not JSON', function () {
@@ -311,8 +311,8 @@ describe('Given a component for rendering a dynamic flow', function () {
                     }
                 });
             }); });
-            it('should NOT trigger onError callback', function () {
-                expect(onError).not.toHaveBeenCalled();
+            it('should still trigger onError callback with the status code (because it is the initial request)', function () {
+                expect(onError).toHaveBeenCalledWith(expect.anything(), 500);
             });
         });
     });

package/build/legacy/dynamicFlow/utils/useErrorResponse.js

@@ -39,7 +39,7 @@ import genericErrorMessages from '../../../common/messages/generic-error.message
 import { useIntl } from 'react-intl';
 export var useErrorResponse = function () {
     var formatMessage = useIntl().formatMessage;
-    return function (response, fetchType) { return __awaiter(void 0, void 0, void 0, function () {
+    return function (response, fetchType, isInitialRequest) { return __awaiter(void 0, void 0, void 0, function () {
         var errorResponse, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -51,7 +51,7 @@ export var useErrorResponse = function () {
                     return [2 /*return*/, errorResponse];
                 case 2:
                     error_1 = _a.sent();
-                    if (fetchType === 'submission') {
+                    if (fetchType === 'submission' && !isInitialRequest) {
                         return [2 /*return*/, { error: formatMessage(genericErrorMessages.genericErrorRetryHint) }];
                     }
                     throw error_1;

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

@@ -0,0 +1,234 @@
+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 { createElement as _createElement } from "react";
+// This file is generated by `build-visual-tests.mjs`. It should not be in version control.
+import { action } from '@storybook/addon-actions';
+import { generated } from '@wise/dynamic-flow-fixtures';
+import DynamicFlow from '../dynamicFlow';
+var meta = {
+    component: DynamicFlow,
+    title: 'Visual Tests/Generated',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+    argTypes: {},
+};
+export default meta;
+var defaultProps = {
+    flowId: "storybook",
+    httpClient: fetch,
+    onCompletion: function () { return action('onCompletion'); },
+    onError: function (error) {
+        action('onError');
+        console.error(error);
+    },
+    onEvent: function () { return action('onEvent'); },
+    onLog: function () { return action('onLog'); }
+};
+export var alert = {
+    name: 'Alert',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "alert", initialStep: JSON.parse(generated.alert) }));
+    }
+};
+export var align = {
+    name: 'Align',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "align", initialStep: JSON.parse(generated.align) }));
+    }
+};
+export var box = {
+    name: 'Box',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "box", initialStep: JSON.parse(generated.box) }));
+    }
+};
+export var button = {
+    name: 'Button',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "button", initialStep: JSON.parse(generated.button) }));
+    }
+};
+export var checkbox = {
+    name: 'Checkbox',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "checkbox", initialStep: JSON.parse(generated.checkbox) }));
+    }
+};
+export var columns = {
+    name: 'Columns',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "columns", initialStep: JSON.parse(generated.columns) }));
+    }
+};
+export var copyable = {
+    name: 'Copyable',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "copyable", initialStep: JSON.parse(generated.copyable) }));
+    }
+};
+export var date = {
+    name: 'Date',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "date", initialStep: JSON.parse(generated.date) }));
+    }
+};
+export var datelookup = {
+    name: 'Date Lookup',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "datelookup", initialStep: JSON.parse(generated.datelookup) }));
+    }
+};
+export var decision = {
+    name: 'Decision',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "decision", initialStep: JSON.parse(generated.decision) }));
+    }
+};
+export var heading = {
+    name: 'Heading',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "heading", initialStep: JSON.parse(generated.heading) }));
+    }
+};
+export var image = {
+    name: 'Image',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "image", initialStep: JSON.parse(generated.image) }));
+    }
+};
+export var instructions = {
+    name: 'Instructions',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "instructions", initialStep: JSON.parse(generated.instructions) }));
+    }
+};
+export var integer = {
+    name: 'Integer',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "integer", initialStep: JSON.parse(generated.integer) }));
+    }
+};
+export var list = {
+    name: 'List',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "list", initialStep: JSON.parse(generated.list) }));
+    }
+};
+export var margin = {
+    name: 'Margin',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "margin", initialStep: JSON.parse(generated.margin) }));
+    }
+};
+export var markdown = {
+    name: 'Markdown',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "markdown", initialStep: JSON.parse(generated.markdown) }));
+    }
+};
+export var modal = {
+    name: 'Modal',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "modal", initialStep: JSON.parse(generated.modal) }));
+    }
+};
+export var multiselect = {
+    name: 'Multi Select',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "multiselect", initialStep: JSON.parse(generated.multiselect) }));
+    }
+};
+export var number = {
+    name: 'Number',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "number", initialStep: JSON.parse(generated.number) }));
+    }
+};
+export var paragraph = {
+    name: 'Paragraph',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "paragraph", initialStep: JSON.parse(generated.paragraph) }));
+    }
+};
+export var password = {
+    name: 'Password',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "password", initialStep: JSON.parse(generated.password) }));
+    }
+};
+export var phonenumber = {
+    name: 'Phone Number',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "phonenumber", initialStep: JSON.parse(generated.phonenumber) }));
+    }
+};
+export var radio = {
+    name: 'Radio',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "radio", initialStep: JSON.parse(generated.radio) }));
+    }
+};
+export var repeatable = {
+    name: 'Repeatable',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "repeatable", initialStep: JSON.parse(generated.repeatable) }));
+    }
+};
+export var review = {
+    name: 'Review',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "review", initialStep: JSON.parse(generated.review) }));
+    }
+};
+export var search = {
+    name: 'Search',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "search", initialStep: JSON.parse(generated.search) }));
+    }
+};
+export var segmented = {
+    name: 'Segmented',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "segmented", initialStep: JSON.parse(generated.segmented) }));
+    }
+};
+export var select = {
+    name: 'Select',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "select", initialStep: JSON.parse(generated.select) }));
+    }
+};
+export var tabs = {
+    name: 'Tabs',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "tabs", initialStep: JSON.parse(generated.tabs) }));
+    }
+};
+export var text = {
+    name: 'Text',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "text", initialStep: JSON.parse(generated.text) }));
+    }
+};
+export var textarea = {
+    name: 'Text Area',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "textarea", initialStep: JSON.parse(generated.textarea) }));
+    }
+};
+export var upload = {
+    name: 'Upload',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "upload", initialStep: JSON.parse(generated.upload) }));
+    }
+};

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

@@ -0,0 +1,132 @@
+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 { createElement as _createElement } from "react";
+// This file is generated by `build-visual-tests.mjs`. It should not be in version control.
+import { action } from '@storybook/addon-actions';
+import { layouts } from '@wise/dynamic-flow-fixtures';
+import DynamicFlow from '../dynamicFlow';
+var meta = {
+    component: DynamicFlow,
+    title: 'Visual Tests/Layouts',
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+    argTypes: {},
+};
+export default meta;
+var defaultProps = {
+    flowId: "storybook",
+    httpClient: fetch,
+    onCompletion: function () { return action('onCompletion'); },
+    onError: function (error) {
+        action('onError');
+        console.error(error);
+    },
+    onEvent: function () { return action('onEvent'); },
+    onLog: function () { return action('onLog'); }
+};
+export var alert = {
+    name: 'Alert',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "alert", initialStep: layouts.alert }));
+    }
+};
+export var box = {
+    name: 'Box',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "box", initialStep: layouts.box }));
+    }
+};
+export var button = {
+    name: 'Button',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "button", initialStep: layouts.button }));
+    }
+};
+export var columns = {
+    name: 'Columns',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "columns", initialStep: layouts.columns }));
+    }
+};
+export var decision = {
+    name: 'Decision',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "decision", initialStep: layouts.decision }));
+    }
+};
+export var divider = {
+    name: 'Divider',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "divider", initialStep: layouts.divider }));
+    }
+};
+export var form = {
+    name: 'Form',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "form", initialStep: layouts.form }));
+    }
+};
+export var heading = {
+    name: 'Heading',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "heading", initialStep: layouts.heading }));
+    }
+};
+export var image = {
+    name: 'Image',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "image", initialStep: layouts.image }));
+    }
+};
+export var instructions = {
+    name: 'Instructions',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "instructions", initialStep: layouts.instructions }));
+    }
+};
+export var loadingIndicator = {
+    name: 'Loading Indicator',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "loadingIndicator", initialStep: layouts.loadingIndicator }));
+    }
+};
+export var margin = {
+    name: 'Margin',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "margin", initialStep: layouts.margin }));
+    }
+};
+export var markdown = {
+    name: 'Markdown',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "markdown", initialStep: layouts.markdown }));
+    }
+};
+export var paragraph = {
+    name: 'Paragraph',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "paragraph", initialStep: layouts.paragraph }));
+    }
+};
+export var review = {
+    name: 'Review',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "review", initialStep: layouts.review }));
+    }
+};
+export var statusList = {
+    name: 'List',
+    render: function () {
+        return _createElement(DynamicFlow, __assign({}, defaultProps, { key: "statusList", initialStep: layouts.statusList }));
+    }
+};