@wise/dynamic-flow-client-internal 5.28.1 → 5.28.2

package/build/i18n/index.js

@@ -0,0 +1,43 @@
+import { translations as coreTranslations } from '@wise/dynamic-flow-client';
+import cs from './cs.json';
+import de from './de.json';
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import hu from './hu.json';
+import id from './id.json';
+import it from './it.json';
+import ja from './ja.json';
+import nl from './nl.json';
+import pl from './pl.json';
+import pt from './pt.json';
+import ro from './ro.json';
+import ru from './ru.json';
+import th from './th.json';
+import tr from './tr.json';
+import zhCN from './zh_CN.json';
+import zhHK from './zh_HK.json';
+const wiseTranslations = {
+    cs,
+    en,
+    de,
+    es,
+    fr,
+    hu,
+    id,
+    it,
+    ja,
+    nl,
+    pl,
+    pt,
+    ro,
+    ru,
+    th,
+    tr,
+    zh: zhCN,
+    'zh-CN': zhCN,
+    'zh-HK': zhHK,
+};
+const languages = Array.from(new Set([...Object.keys(coreTranslations), ...Object.keys(wiseTranslations)]));
+const translations = languages.reduce((acc, lang) => (Object.assign(Object.assign({}, acc), { [lang]: Object.assign(Object.assign({}, coreTranslations[lang]), wiseTranslations[lang]) })), {});
+export default translations;

package/build/i18n/pt.json

@@ -20,7 +20,7 @@
   "df.wise.ControlFeedback.type": "Tipo incorreto",
   "df.wise.CopyFeedback.copy": "Copiado",
   "df.wise.CopyFeedback.copyFailed": "Falha ao copiar para área de transferência",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "Algumas datas estão indisponíveis.",
   "df.wise.DynamicParagraph.copied": "Copiado",
   "df.wise.DynamicParagraph.copy": "Copiar",
   "df.wise.ErrorBoundary.errorAlert": "Algo deu errado.",

package/build/i18n/ru.json

@@ -20,7 +20,7 @@
   "df.wise.ControlFeedback.type": "Неверный тип",
   "df.wise.CopyFeedback.copy": "Скопировано в буфер обмена",
   "df.wise.CopyFeedback.copyFailed": "Не удалось скопировать в буфер обмена",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "Некоторые даты недоступны.",
   "df.wise.DynamicParagraph.copied": "Скопировано в буфер обмена",
   "df.wise.DynamicParagraph.copy": "Копировать",
   "df.wise.ErrorBoundary.errorAlert": "Что-то пошло не так.",

package/build/i18n/zh_HK.json

@@ -20,7 +20,7 @@
   "df.wise.ControlFeedback.type": "錯誤的類型",
   "df.wise.CopyFeedback.copy": "複製到剪貼板",
   "df.wise.CopyFeedback.copyFailed": "無法複製到剪貼板",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "部分日期不適用。",
   "df.wise.DynamicParagraph.copied": "複製到剪貼板",
   "df.wise.DynamicParagraph.copy": "複製",
   "df.wise.ErrorBoundary.errorAlert": "出了些問題。",

package/build/index.js

@@ -0,0 +1,6 @@
+export { makeHttpClient as makeCustomFetch } from '@wise/dynamic-flow-client';
+export { DynamicFlow } from './dynamicFlow/DynamicFlow';
+export { DynamicFlowWithRef } from './dynamicFlow/DynamicFlowWithRef';
+export { findRendererPropsByType } from '@wise/dynamic-flow-client';
+export { createCollectionRenderer, getMargin, Header, Media } from './dynamicFlow/renderers';
+export { default as translations } from './i18n';

package/build/main.js

@@ -146,7 +146,7 @@ var import_dynamic_flow_client4 = require("@wise/dynamic-flow-client");
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.28.1" : "0.0.0"
+  typeof process !== "undefined" ? "5.28.2" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -7353,7 +7353,7 @@ var de_default = {
   "df.wise.ControlFeedback.type": "Falscher Typ",
   "df.wise.CopyFeedback.copy": "In Zwischenablage kopiert",
   "df.wise.CopyFeedback.copyFailed": "Kopieren in Zwischenablage fehlgeschlagen",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "Einige Daten sind nicht verf\xFCgbar.",
   "df.wise.DynamicParagraph.copied": "In Zwischenablage kopiert",
   "df.wise.DynamicParagraph.copy": "Kopieren",
   "df.wise.ErrorBoundary.errorAlert": "Da ist etwas schiefgegangen.",
@@ -7374,9 +7374,9 @@ var de_default = {
   "df.wise.filter.placeholder": "Gib etwas ein, um die Suche zu beginnen",
   "df.wise.filter.results": "Suchergebnisse",
   "df.wise.group.all": "Alle",
-  "df.wise.group.currencies-with-account-details": "Guthaben mit Bankverbindung",
+  "df.wise.group.currencies-with-account-details": "W\xE4hrungen mit Bankverbindung",
   "df.wise.group.popular": "Beliebt",
-  "df.wise.group.recent": "Neu",
+  "df.wise.group.recent": "K\xFCrzlich verwendet",
   "df.wise.step.scrollToBottom": "Nach unten scrollen"
 };
 
@@ -7503,7 +7503,7 @@ var fr_default = {
   "df.wise.ControlFeedback.type": "Type incorrect",
   "df.wise.CopyFeedback.copy": "Copi\xE9 dans le presse-papier",
   "df.wise.CopyFeedback.copyFailed": "Impossible de copier dans le presse-papier",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "Certaines dates ne sont pas disponibles.",
   "df.wise.DynamicParagraph.copied": "Copi\xE9 dans le presse-papier",
   "df.wise.DynamicParagraph.copy": "Copier",
   "df.wise.ErrorBoundary.errorAlert": "Une erreur s'est produite.",
@@ -7553,7 +7553,7 @@ var hu_default = {
   "df.wise.ControlFeedback.type": "Helytelen t\xEDpus",
   "df.wise.CopyFeedback.copy": "V\xE1g\xF3lapra m\xE1solva",
   "df.wise.CopyFeedback.copyFailed": "Nem siker\xFClt a v\xE1g\xF3lapra m\xE1solni",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "Egyes d\xE1tumok nem el\xE9rhet\u0151k.",
   "df.wise.DynamicParagraph.copied": "V\xE1g\xF3lapra m\xE1solva",
   "df.wise.DynamicParagraph.copy": "M\xE1sol\xE1s",
   "df.wise.ErrorBoundary.errorAlert": "Valami hiba t\xF6rt\xE9nt.",
@@ -7603,7 +7603,7 @@ var id_default = {
   "df.wise.ControlFeedback.type": "Tipe salah",
   "df.wise.CopyFeedback.copy": "Disalin ke clipboard",
   "df.wise.CopyFeedback.copyFailed": "Gagal menyalin ke clipboard",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "Beberapa tanggal tidak tersedia.",
   "df.wise.DynamicParagraph.copied": "Disalin ke clipboard",
   "df.wise.DynamicParagraph.copy": "Salin",
   "df.wise.ErrorBoundary.errorAlert": "Terjadi kesalahan.",
@@ -7853,7 +7853,7 @@ var pt_default = {
   "df.wise.ControlFeedback.type": "Tipo incorreto",
   "df.wise.CopyFeedback.copy": "Copiado",
   "df.wise.CopyFeedback.copyFailed": "Falha ao copiar para \xE1rea de transfer\xEAncia",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "Algumas datas est\xE3o indispon\xEDveis.",
   "df.wise.DynamicParagraph.copied": "Copiado",
   "df.wise.DynamicParagraph.copy": "Copiar",
   "df.wise.ErrorBoundary.errorAlert": "Algo deu errado.",
@@ -7953,7 +7953,7 @@ var ru_default = {
   "df.wise.ControlFeedback.type": "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0442\u0438\u043F",
   "df.wise.CopyFeedback.copy": "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u0432 \u0431\u0443\u0444\u0435\u0440 \u043E\u0431\u043C\u0435\u043D\u0430",
   "df.wise.CopyFeedback.copyFailed": "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0441\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0432 \u0431\u0443\u0444\u0435\u0440 \u043E\u0431\u043C\u0435\u043D\u0430",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "\u041D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0434\u0430\u0442\u044B \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B.",
   "df.wise.DynamicParagraph.copied": "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u0432 \u0431\u0443\u0444\u0435\u0440 \u043E\u0431\u043C\u0435\u043D\u0430",
   "df.wise.DynamicParagraph.copy": "\u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C",
   "df.wise.ErrorBoundary.errorAlert": "\u0427\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A.",
@@ -8153,7 +8153,7 @@ var zh_HK_default = {
   "df.wise.ControlFeedback.type": "\u932F\u8AA4\u7684\u985E\u578B",
   "df.wise.CopyFeedback.copy": "\u8907\u88FD\u5230\u526A\u8CBC\u677F",
   "df.wise.CopyFeedback.copyFailed": "\u7121\u6CD5\u8907\u88FD\u5230\u526A\u8CBC\u677F",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "\u90E8\u5206\u65E5\u671F\u4E0D\u9069\u7528\u3002",
   "df.wise.DynamicParagraph.copied": "\u8907\u88FD\u5230\u526A\u8CBC\u677F",
   "df.wise.DynamicParagraph.copy": "\u8907\u88FD",
   "df.wise.ErrorBoundary.errorAlert": "\u51FA\u4E86\u4E9B\u554F\u984C\u3002",

package/build/main.mjs

@@ -127,7 +127,7 @@ import { useDynamicFlow } from "@wise/dynamic-flow-client";
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.28.1" : "0.0.0"
+  typeof process !== "undefined" ? "5.28.2" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -7351,7 +7351,7 @@ var de_default = {
   "df.wise.ControlFeedback.type": "Falscher Typ",
   "df.wise.CopyFeedback.copy": "In Zwischenablage kopiert",
   "df.wise.CopyFeedback.copyFailed": "Kopieren in Zwischenablage fehlgeschlagen",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "Einige Daten sind nicht verf\xFCgbar.",
   "df.wise.DynamicParagraph.copied": "In Zwischenablage kopiert",
   "df.wise.DynamicParagraph.copy": "Kopieren",
   "df.wise.ErrorBoundary.errorAlert": "Da ist etwas schiefgegangen.",
@@ -7372,9 +7372,9 @@ var de_default = {
   "df.wise.filter.placeholder": "Gib etwas ein, um die Suche zu beginnen",
   "df.wise.filter.results": "Suchergebnisse",
   "df.wise.group.all": "Alle",
-  "df.wise.group.currencies-with-account-details": "Guthaben mit Bankverbindung",
+  "df.wise.group.currencies-with-account-details": "W\xE4hrungen mit Bankverbindung",
   "df.wise.group.popular": "Beliebt",
-  "df.wise.group.recent": "Neu",
+  "df.wise.group.recent": "K\xFCrzlich verwendet",
   "df.wise.step.scrollToBottom": "Nach unten scrollen"
 };
 
@@ -7501,7 +7501,7 @@ var fr_default = {
   "df.wise.ControlFeedback.type": "Type incorrect",
   "df.wise.CopyFeedback.copy": "Copi\xE9 dans le presse-papier",
   "df.wise.CopyFeedback.copyFailed": "Impossible de copier dans le presse-papier",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "Certaines dates ne sont pas disponibles.",
   "df.wise.DynamicParagraph.copied": "Copi\xE9 dans le presse-papier",
   "df.wise.DynamicParagraph.copy": "Copier",
   "df.wise.ErrorBoundary.errorAlert": "Une erreur s'est produite.",
@@ -7551,7 +7551,7 @@ var hu_default = {
   "df.wise.ControlFeedback.type": "Helytelen t\xEDpus",
   "df.wise.CopyFeedback.copy": "V\xE1g\xF3lapra m\xE1solva",
   "df.wise.CopyFeedback.copyFailed": "Nem siker\xFClt a v\xE1g\xF3lapra m\xE1solni",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "Egyes d\xE1tumok nem el\xE9rhet\u0151k.",
   "df.wise.DynamicParagraph.copied": "V\xE1g\xF3lapra m\xE1solva",
   "df.wise.DynamicParagraph.copy": "M\xE1sol\xE1s",
   "df.wise.ErrorBoundary.errorAlert": "Valami hiba t\xF6rt\xE9nt.",
@@ -7601,7 +7601,7 @@ var id_default = {
   "df.wise.ControlFeedback.type": "Tipe salah",
   "df.wise.CopyFeedback.copy": "Disalin ke clipboard",
   "df.wise.CopyFeedback.copyFailed": "Gagal menyalin ke clipboard",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "Beberapa tanggal tidak tersedia.",
   "df.wise.DynamicParagraph.copied": "Disalin ke clipboard",
   "df.wise.DynamicParagraph.copy": "Salin",
   "df.wise.ErrorBoundary.errorAlert": "Terjadi kesalahan.",
@@ -7851,7 +7851,7 @@ var pt_default = {
   "df.wise.ControlFeedback.type": "Tipo incorreto",
   "df.wise.CopyFeedback.copy": "Copiado",
   "df.wise.CopyFeedback.copyFailed": "Falha ao copiar para \xE1rea de transfer\xEAncia",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "Algumas datas est\xE3o indispon\xEDveis.",
   "df.wise.DynamicParagraph.copied": "Copiado",
   "df.wise.DynamicParagraph.copy": "Copiar",
   "df.wise.ErrorBoundary.errorAlert": "Algo deu errado.",
@@ -7951,7 +7951,7 @@ var ru_default = {
   "df.wise.ControlFeedback.type": "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0442\u0438\u043F",
   "df.wise.CopyFeedback.copy": "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u0432 \u0431\u0443\u0444\u0435\u0440 \u043E\u0431\u043C\u0435\u043D\u0430",
   "df.wise.CopyFeedback.copyFailed": "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0441\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0432 \u0431\u0443\u0444\u0435\u0440 \u043E\u0431\u043C\u0435\u043D\u0430",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "\u041D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0434\u0430\u0442\u044B \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B.",
   "df.wise.DynamicParagraph.copied": "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u0432 \u0431\u0443\u0444\u0435\u0440 \u043E\u0431\u043C\u0435\u043D\u0430",
   "df.wise.DynamicParagraph.copy": "\u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C",
   "df.wise.ErrorBoundary.errorAlert": "\u0427\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A.",
@@ -8151,7 +8151,7 @@ var zh_HK_default = {
   "df.wise.ControlFeedback.type": "\u932F\u8AA4\u7684\u985E\u578B",
   "df.wise.CopyFeedback.copy": "\u8907\u88FD\u5230\u526A\u8CBC\u677F",
   "df.wise.CopyFeedback.copyFailed": "\u7121\u6CD5\u8907\u88FD\u5230\u526A\u8CBC\u677F",
-  "df.wise.DateInput.unavailableDates": "Some dates are unavailable.",
+  "df.wise.DateInput.unavailableDates": "\u90E8\u5206\u65E5\u671F\u4E0D\u9069\u7528\u3002",
   "df.wise.DynamicParagraph.copied": "\u8907\u88FD\u5230\u526A\u8CBC\u677F",
   "df.wise.DynamicParagraph.copy": "\u8907\u88FD",
   "df.wise.ErrorBoundary.errorAlert": "\u51FA\u4E86\u4E9B\u554F\u984C\u3002",

package/build/stories/ButtonLoader.story.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { DynamicFlow } from '../dynamicFlow/DynamicFlow';
+import { fixtureHttpClient } from './utils/fixtureHttpClient';
+export default {
+    title: 'Initialisation',
+    component: DynamicFlow,
+};
+const onCompletion = action('onCompletion');
+const onError = action('onError');
+const onEvent = action('onEvent');
+const onLog = action('onLog');
+export const ButtonLoader = {
+    render: () => (_jsx(DynamicFlow, { flowId: "initialisation-telemetry", customFetch: fixtureHttpClient, initialStep: step, onCompletion: onCompletion, onError: onError, onEvent: onEvent, onLog: onLog })),
+};
+const step = {
+    id: 'convert-review',
+    title: 'Does everything look right?',
+    schemas: [
+        {
+            properties: {
+                quoteId: {
+                    const: '123',
+                },
+                profileId: {
+                    const: 6666,
+                },
+                context: {
+                    const: 'CONVERT',
+                },
+            },
+            displayOrder: ['quoteId', 'profileId', 'context'],
+            required: ['quoteId', 'profileId', 'context'],
+            hidden: true,
+            type: 'object',
+        },
+    ],
+    layout: [
+        {
+            components: [
+                {
+                    fields: [
+                        {
+                            label: "You're converting",
+                            value: '123 EUR',
+                        },
+                        {
+                            label: 'To',
+                            value: '101.61 GBP',
+                        },
+                        {
+                            label: 'Our fee',
+                            value: '6.15 EUR',
+                        },
+                        {
+                            label: 'Rate',
+                            value: '1 EUR = 0.8696 GBP',
+                        },
+                    ],
+                    title: 'Conversion details',
+                    callToAction: {
+                        title: 'Edit',
+                        behavior: {
+                            action: {
+                                exit: true,
+                                result: {
+                                    action: 'EDIT',
+                                },
+                            },
+                            type: 'action',
+                        },
+                        action: {
+                            exit: true,
+                            result: {
+                                action: 'EDIT',
+                            },
+                        },
+                    },
+                    control: 'horizontal',
+                    type: 'review',
+                },
+                {
+                    title: 'Convert',
+                    behavior: {
+                        action: {
+                            exit: true,
+                            result: {
+                                action: 'CONVERT',
+                            },
+                        },
+                        type: 'action',
+                    },
+                    control: 'primary',
+                    margin: 'xs',
+                    type: 'button',
+                    action: {
+                        exit: true,
+                        result: {
+                            action: 'CONVERT',
+                        },
+                    },
+                },
+            ],
+            control: 'bordered',
+            type: 'box',
+        },
+    ],
+    refreshUrl: '/v1/convert/review?refresh=true',
+};

package/build/stories/ContainerQueries.story.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { DynamicFlow } from '../dynamicFlow/DynamicFlow';
+import { Fragment } from 'react/jsx-runtime';
+export default {
+    component: ImageLayoutWithSize,
+    title: 'Dev Tools/Container Queries',
+    argTypes: {
+        width: {
+            options: ['100%', '900px', '600px', '575px', '400px'],
+            control: { type: 'select' },
+            description: 'Width of the div containing the DynamicFlow component',
+        },
+    },
+    args: {
+        width: '575px',
+    },
+};
+export function ImageLayoutWithSize({ width }) {
+    return _jsx(Fragment, { children: renderWithStep(imageLayoutStep, width) }, width);
+}
+function renderWithStep(step, width) {
+    const getDF = () => (_jsx(DynamicFlow, { flowId: "new-df-flow-id", className: "df-prefer-container-queries", customFetch: async (input, init) => {
+            action('httpClient')(input, init === null || init === void 0 ? void 0 : init.body);
+            return fetch(input, init);
+        }, initialStep: Object.assign(Object.assign({}, step), { title: `Dynamic Flow Step - ${width}`, description: `This is a DynamicFlow component inside a ${width}-wide <div> container. You can change the width in the Storybook controls.` }), onCompletion: action('onCompletion'), onEvent: action('onEvent'), onLog: action('onLog'), onError: (error) => {
+            action('onError');
+            console.error(error);
+        } }));
+    return (_jsxs("div", { className: "d-flex", children: [_jsx("div", { style: { flexGrow: 1, backgroundColor: '#EEE', textAlign: 'center' }, children: " NOT-DF " }), _jsx("div", { style: { width, backgroundColor: 'white' }, children: getDF() }), _jsx("div", { style: { flexGrow: 1, backgroundColor: '#EEE', textAlign: 'center' }, children: " NOT-DF " })] }));
+}
+const imageLayoutStep = {
+    id: 'step-id',
+    title: 'Dynamic Flow Step',
+    description: 'This is a step in the dynamic flow.',
+    schemas: [],
+    layout: [
+        {
+            type: 'image',
+            size: 'xs',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'sm',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'md',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'lg',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+        {
+            type: 'image',
+            size: 'xl',
+            content: {
+                uri: 'https://placehold.co/600x600?text=Cat',
+            },
+        },
+    ],
+};

package/build/stories/DynamicFlow.story.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { layouts, schemas, misc, step } from '@wise/dynamic-flow-fixtures';
+import { DynamicFlow } from '../index';
+import { fixtureHttpClient } from './utils/fixtureHttpClient';
+const fixtures = Object.assign(Object.assign(Object.assign(Object.assign({}, schemas), layouts), misc), step);
+function DynamicFlowRenderer({ initialStepName = '', }) {
+    const selectedStep = fixtures[initialStepName] || {};
+    const parsedStep = typeof selectedStep === 'string' ? JSON.parse(selectedStep) : selectedStep;
+    const props = {
+        flowId: 'storybook',
+        customFetch: fixtureHttpClient,
+        onCompletion: action('onCompletion'),
+        onError: action('onError'),
+        onEvent: action('onEvent'),
+        onLog: action('onLog'),
+    };
+    return (_jsx(DynamicFlow, Object.assign({}, props, { initialAction: { method: 'GET', url: `/steps/${initialStepName}` } }), parsedStep.id));
+}
+const meta = {
+    title: 'Multi-fixture',
+    component: DynamicFlowRenderer,
+};
+export const AllFixtures = {
+    argTypes: {
+        initialStepName: {
+            label: 'Initial Step',
+            control: 'select',
+            options: Object.keys(fixtures),
+        },
+    },
+    args: { initialStepName: Object.keys(fixtures)[1], revampEnabled: false },
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export default meta;

package/build/stories/DynamicFlowWithRef.story.js

@@ -0,0 +1,72 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { Button } from '@transferwise/components';
+import { useRef, useState } from 'react';
+import { DynamicFlowWithRef } from '..';
+import { fixtureHttpClient } from './utils/fixtureHttpClient';
+const step = {
+    id: 'dynamic-form-story',
+    title: 'Dynamic Form',
+    schemas: [
+        {
+            $id: '#form',
+            type: 'object',
+            displayOrder: ['name', 'city'],
+            required: ['name'],
+            properties: {
+                name: { type: 'string', title: 'Name', minLength: 2 },
+                city: {
+                    title: 'City',
+                    oneOf: [
+                        { title: 'London', const: 'London', icon: { name: 'flag-gb' } },
+                        { title: 'Paris', const: 'Paris', icon: { name: 'flag-fr' } },
+                        { title: 'New York', const: 'New York', icon: { name: 'flag-us' } },
+                    ],
+                },
+            },
+        },
+    ],
+    layout: [
+        {
+            type: 'form',
+            schemaId: '#form',
+        },
+    ],
+};
+function DynamicFlowWithRefStory() {
+    const ref = useRef(null);
+    const props = {
+        flowId: 'storybook',
+        analyticsId: 'storybook',
+        customFetch: fixtureHttpClient,
+        onValueChange: action('onValueChange'),
+        onError: action('onError'),
+        onEvent: action('onEvent'),
+        onLog: action('onLog'),
+    };
+    const [currentValue, setCurrentValue] = useState('');
+    const [isValid, setValid] = useState(null);
+    const backgroundColor = isValid === null ? '#eeeeee' : isValid ? '#eeffee' : '#ffeeee';
+    const validityText = isValid === null ? '' : isValid ? '✅ valid\n\n' : '❌ invalid\n\n';
+    return (_jsxs(_Fragment, { children: [_jsx(DynamicFlowWithRef, Object.assign({ ref: ref }, props, { initialStep: step, onValueChange: async () => {
+                    var _a;
+                    var _b;
+                    const newValue = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getValue()) !== null && _b !== void 0 ? _b : null;
+                    setCurrentValue(JSON.stringify(newValue, null, 2));
+                }, onCompletion: () => { } }), JSON.stringify(step)), _jsx(Button, { onClick: async () => {
+                    var _a;
+                    var _b;
+                    const ok = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : false;
+                    setValid(ok);
+                }, children: "validate()" }), _jsx("hr", {}), _jsxs("pre", { style: { backgroundColor }, children: [validityText, currentValue] })] }));
+}
+const meta = {
+    title: 'Dynamic Form',
+    component: DynamicFlowWithRefStory,
+};
+export const AllFixtures = {
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export default meta;

package/build/stories/Editable.story.js

@@ -0,0 +1,58 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { layouts, schemas } from '@wise/dynamic-flow-fixtures';
+import { useMemo, useState } from 'react';
+import { DynamicFlow } from '../dynamicFlow/DynamicFlow';
+const fixtures = Object.assign(Object.assign({}, schemas), layouts);
+export function Editable({ initialStepName = '' }) {
+    const selectedStep = fixtures[initialStepName] || {};
+    const selectedInitialStep = JSON.stringify(selectedStep, null, 2);
+    return _jsx(InteractiveDemo, { selectedInitialStep: selectedInitialStep }, selectedInitialStep);
+}
+function InteractiveDemo({ selectedInitialStep }) {
+    const [initialStatusCode, setInitialStatusCode] = useState(200);
+    const [initialStep, setInitialStep] = useState(selectedInitialStep);
+    const onTextAreaChange = (event) => {
+        setInitialStep(event.target.value);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("h3", { children: "Editable Demo" }), _jsx("p", { children: "You can specify a response status code and body, and DF will load your step below." }), _jsxs("fieldset", { children: [_jsx("label", { htmlFor: "status-code", children: "Response Status code: " }), _jsx(StatusCodeSelect, { id: "status-code", state: [initialStatusCode, setInitialStatusCode] })] }), _jsxs("fieldset", { children: [_jsx("label", { htmlFor: "textarea", children: "Response Body:" }), _jsx(InvalidJsonWarning, { initialStep: initialStep }), _jsx("textarea", { id: "textarea", wrap: "off", rows: 40, style: {
+                                    fontFamily: 'monospace',
+                                    fontSize: '0.9em',
+                                    width: '100%',
+                                    maxHeight: '200px',
+                                }, value: initialStep, onChange: onTextAreaChange })] })] }), isValidJson(initialStep) ? (_jsx(DynamicFlow, { flowId: "storybook", customFetch: fetch, initialStep: JSON.parse(initialStep), onCompletion: action('onCompletion'), onError: (error) => {
+                    action('onError')(error);
+                    console.error(error);
+                } }, `${initialStep}-${initialStatusCode}`)) : null] }));
+}
+function InvalidJsonWarning({ initialStep }) {
+    const validJson = useMemo(() => isValidJson(initialStep), [initialStep]);
+    return !validJson ? (_jsx("p", { children: "\u274C Invalid syntax or missing elements are preventing the JSON code you entered from being parsed." })) : null;
+}
+const isValidJson = (value) => {
+    try {
+        JSON.parse(value);
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+};
+function StatusCodeSelect({ id, state: [value, setValue], }) {
+    return (_jsxs("select", { id: id, value: value, onChange: (event) => setValue(Number.parseInt(event.target.value, 10)), children: [_jsx("option", { children: "200" }), _jsx("option", { children: "400" }), _jsx("option", { children: "500" })] }));
+}
+export default {
+    component: Editable,
+    title: 'Multi-fixture',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+    argTypes: {
+        initialStepName: {
+            label: 'Initial Step',
+            control: 'select',
+            options: Object.keys(fixtures),
+        },
+    },
+    args: { initialStepName: Object.keys(fixtures)[0] },
+};

package/build/stories/Initialisation.story.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from 'storybook/actions';
+import { DynamicFlow } from '../dynamicFlow/DynamicFlow';
+export default {
+    title: 'Initialisation',
+    component: DynamicFlow,
+};
+const mockFetch = async (url, init) => {
+    action('mockFetch')(url, init);
+    switch (url) {
+        case '/first-step':
+            return new Response(JSON.stringify({
+                id: 'first-step',
+                title: 'First Step',
+                layout: [],
+                schemas: [],
+            }));
+        default:
+            return new Response(null, { status: 404 });
+    }
+};
+const onCompletion = action('onCompletion');
+const onError = action('onError');
+const onEvent = action('onEvent');
+const onLog = action('onLog');
+const initialActionValid = { method: 'GET', url: '/first-step' };
+export const InitialisationWithSuccessfulStep = {
+    render: () => (_jsx(DynamicFlow, { flowId: "initialisation-telemetry", customFetch: mockFetch, initialAction: initialActionValid, onCompletion: onCompletion, onError: onError, onEvent: onEvent, onLog: onLog })),
+};
+const initialActionInvalid = { method: 'GET', url: '/invalid-step' };
+export const InitialisationWith404Step = {
+    render: () => (_jsx(DynamicFlow, { flowId: "initialisation-telemetry", customFetch: mockFetch, initialAction: initialActionInvalid, onCompletion: onCompletion, onError: onError, onEvent: onEvent, onLog: onLog })),
+};