@wise/dynamic-flow-client-internal 4.14.1 → 4.15.1

package/README.md

@@ -71,6 +71,18 @@ return (
 );
 ```
 
+#### Container-based image sizes
+
+To enable container queries for image layout components, add the following class name to the `className` property of the `DynamicFlow` component:
+
+```tsx
+<DynamicFlow
+  className="df-prefer-container-queries"
+  {...allOtherProps}
+/>
+```
+
+
 ### For non-CRAB apps
 
 You'll need to merge the '@transferwise/components' translations with the '@wise/dynamic-flow-client' translations.

package/build/i18n/nl.json

@@ -15,19 +15,19 @@
   "df.wise.ControlFeedback.patternDate": "Voer een datum in de juiste indeling in.",
   "df.wise.ControlFeedback.required": "Vul dit veld in.",
   "df.wise.ControlFeedback.type": "Onjuist type",
-  "df.wise.DynamicParagraph.copied": "Naar klembord gekopiëerd",
+  "df.wise.DynamicParagraph.copied": "Naar klembord gekopieerd",
   "df.wise.DynamicParagraph.copy": "Kopiëren",
   "df.wise.ErrorBoundary.errorAlert": "Er is iets misgegaan.",
   "df.wise.ErrorBoundary.retry": "Opnieuw proberen",
   "df.wise.ExternalConfirmation.cancel": "Annuleren",
   "df.wise.ExternalConfirmation.description": "Bevestig dat je **{origin}** in een nieuw browsertabblad wilt openen.",
   "df.wise.ExternalConfirmation.open": "In nieuw tabblad openen",
-  "df.wise.ExternalConfirmation.title": "Bevestig",
+  "df.wise.ExternalConfirmation.title": "Bevestigen",
   "df.wise.Help.ariaLabel": "Klik hier voor meer informatie.",
   "df.wise.MultiSelect.summary": "{first} en nog {count}",
   "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Het bestand is te groot. Upload een kleiner bestand.",
   "df.wise.MultipleFileUploadSchema.maxItemsError": "Upload {maxItems} of minder bestanden.",
-  "df.wise.MultipleFileUploadSchema.minItemsError": "Upload mimimaal {minItems} bestand(en).",
-  "df.wise.PersistAsyncSchema.genericError": "Er ging iets mis, probeer het a. u. b. opnieuw.",
+  "df.wise.MultipleFileUploadSchema.minItemsError": "Upload minimaal {minItems} bestand(en).",
+  "df.wise.PersistAsyncSchema.genericError": "Er is iets misgegaan, probeer het opnieuw.",
   "df.wise.SearchLayout.loading": "Laden..."
 }

package/build/main.css

@@ -287,39 +287,63 @@ button.df-back-btn {
   height: auto;
   width: 100%;
 }
-/* narrow screens */
+/* wide screens (or default) */
 .df-image.xs img {
-  width: 50px;
+  width: 100px;
 }
 .df-image.sm img {
-  width: 100px;
+  width: 200px;
 }
 .df-image.md img {
-  width: 200px;
+  width: 300px;
 }
 .df-image.lg img {
-  width: 300px;
+  width: 500px;
 }
-/* wide screens */
-@media (width >=576px) {
+.df-image.xl img {
+  max-width: 600px;
+}
+/* narrow screens */
+@media (width <576px) {
   .df-image.xs img {
-    width: 100px;
+    width: 50px;
   }
 
   .df-image.sm img {
-    width: 200px;
+    width: 100px;
   }
 
   .df-image.md img {
-    width: 300px;
+    width: 200px;
   }
 
   .df-image.lg img {
-    width: 500px;
+    width: 300px;
+  }
+}
+/**
+  * This speficies the container for container queries about width.
+  * We don't use it by default, but integrations can specify it using the className prop in the DF component.
+ */
+.df-prefer-container-queries {
+  container-type: inline-size;
+}
+/* narrow container */
+@container (max-width: 576px) {
+  .df-image.xs img {
+    width: 50px;
   }
 
-  .df-image.xl img {
-    max-width: 600px;
+  .df-image.sm img {
+    width: 100px;
+  }
+
+  .df-image.md img {
+    width: 200px;
+  }
+
+  .df-image.lg img {
+    width: 300px;
   }
 }
 .df-back-btn .tw-avatar__content {

package/build/main.js

@@ -665,7 +665,7 @@ var translations = languages.reduce(
 var i18n_default = translations;
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_react_intl16 = require("react-intl");
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
 
@@ -3171,6 +3171,81 @@ var SectionRenderer = {
 };
 var SectionRenderer_default = SectionRenderer;
 
+// ../renderers/src/TabsRenderer.tsx
+var import_components43 = require("@transferwise/components");
+var import_react13 = require("react");
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var TabsRenderer = {
+  canRenderType: "tabs",
+  render: (props) => {
+    switch (props.control) {
+      case "segmented":
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SegmentedTabsRendererComponent, __spreadValues({}, props));
+      case "chips":
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ChipsTabsRendererComponent, __spreadValues({}, props));
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TabsRendererComponent, __spreadValues({}, props));
+    }
+  }
+};
+function TabsRendererComponent({ uid, margin, tabs }) {
+  const [selectedIndex, setSelectedIndex] = (0, import_react13.useState)(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    import_components43.Tabs,
+    {
+      name: uid,
+      selected: selectedIndex != null ? selectedIndex : 0,
+      tabs: tabs.map((option) => ({
+        title: option.title,
+        disabled: false,
+        content: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "m-t-2", children: [
+          " ",
+          option.children,
+          " "
+        ] })
+      })),
+      onTabSelect: setSelectedIndex
+    }
+  ) });
+}
+function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
+  var _a;
+  const [selectedIndex, setSelectedIndex] = (0, import_react13.useState)(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      import_components43.SegmentedControl,
+      {
+        name: uid,
+        value: String(selectedIndex),
+        mode: "view",
+        segments: tabs.map((tab, index) => ({
+          id: String(index),
+          value: String(index),
+          label: tab.title,
+          controls: `${uid}-children`
+        })),
+        onChange: (value) => setSelectedIndex(Number(value))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { id: `${uid}-children`, className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
+  ] });
+}
+function ChipsTabsRendererComponent({ uid, margin, tabs }) {
+  var _a;
+  const [selectedIndex, setSelectedIndex] = (0, import_react13.useState)(0);
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      import_components43.Chips,
+      {
+        chips: tabs.map((tab, index) => ({ label: tab.title, value: index })),
+        selected: selectedIndex,
+        onChange: ({ selectedValue }) => setSelectedIndex(Number(selectedValue))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
+  ] });
+}
+
 // ../renderers/src/getWiseRenderers.ts
 var getWiseRenderers = () => [
   AlertRenderer_default,
@@ -3203,6 +3278,7 @@ var getWiseRenderers = () => [
   SelectInputRenderer_default,
   SectionRenderer_default,
   StatusListRenderer_default,
+  TabsRenderer,
   TextInputRenderer_default,
   UploadInputRenderer,
   SplashStepRenderer,
@@ -3211,17 +3287,20 @@ var getWiseRenderers = () => [
 ];
 
 // ../renderers/src/ModalContentRenderer.tsx
-var import_components43 = require("@transferwise/components");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_components44 = require("@transferwise/components");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var ModalContentRenderer = {
   canRenderType: "modal-content",
   render: ({ title, children, open, onClose }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_components43.Modal, { open, title, body: children, onClose });
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_components44.Modal, { open, title, body: children, onClose });
   }
 };
 
 // src/dynamicFlow/telemetry/app-version.ts
-var appVersion = "4.14.1";
+var appVersion = (
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  typeof process !== "undefined" ? "4.15.1" : "0.0.0"
+);
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
 var getLogEvent = (onLog) => (level, message, extra) => {
@@ -3260,15 +3339,16 @@ var getTrackEvent = (onEvent, onAnalytics, onThemeChange) => (name, properties)
 };
 
 // src/dynamicFlow/DynamicFlow.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var wiseRenderers = getWiseRenderers();
 function DynamicFlowLegacy(props) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_dynamic_flow_client2.DynamicFlow, __spreadValues({}, coreProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_dynamic_flow_client2.DynamicFlow, __spreadValues({}, coreProps));
 }
 function DynamicFlowRevamp(props) {
   const {
+    className = "",
     customFetch = globalThis.fetch,
     renderers,
     onAnalytics,
@@ -3278,12 +3358,12 @@ function DynamicFlowRevamp(props) {
     onThemeChange
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react13.useMemo)(
+  const mergedRenderers = (0, import_react14.useMemo)(
     () => [ModalContentRenderer, ...renderers != null ? renderers : [], ...wiseRenderers],
     [renderers]
   );
-  const logEvent = (0, import_react13.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react13.useMemo)(
+  const logEvent = (0, import_react14.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react14.useMemo)(
     () => getTrackEvent(onEvent, onAnalytics, onThemeChange),
     [onEvent, onAnalytics, onThemeChange]
   );
@@ -3294,10 +3374,11 @@ function DynamicFlowRevamp(props) {
     onLog: logEvent,
     onLink
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_dynamic_flow_client2.DynamicFlowCoreRevamp, __spreadValues({}, coreProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_dynamic_flow_client2.DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
 }
-var DynamicForm = (0, import_react13.forwardRef)(function DynamicForm2(props, ref) {
+var DynamicForm = (0, import_react14.forwardRef)(function DynamicForm2(props, ref) {
   const {
+    className = "",
     customFetch = globalThis.fetch,
     renderers,
     onAnalytics,
@@ -3307,12 +3388,12 @@ var DynamicForm = (0, import_react13.forwardRef)(function DynamicForm2(props, re
     onThemeChange
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react13.useMemo)(
+  const mergedRenderers = (0, import_react14.useMemo)(
     () => [ModalContentRenderer, ...renderers != null ? renderers : [], ...wiseRenderers],
     [renderers]
   );
-  const logEvent = (0, import_react13.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react13.useMemo)(
+  const logEvent = (0, import_react14.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react14.useMemo)(
     () => getTrackEvent(onEvent, onAnalytics, onThemeChange),
     [onEvent, onAnalytics, onThemeChange]
   );
@@ -3323,11 +3404,11 @@ var DynamicForm = (0, import_react13.forwardRef)(function DynamicForm2(props, re
     onLog: logEvent,
     onLink
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_dynamic_flow_client2.DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref }));
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_dynamic_flow_client2.DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
 });
 var useWiseHttpClient = (httpClient) => {
   const { locale } = (0, import_react_intl16.useIntl)();
-  return (0, import_react13.useCallback)(
+  return (0, import_react14.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);

package/build/main.mjs

@@ -3147,6 +3147,81 @@ var SectionRenderer = {
 };
 var SectionRenderer_default = SectionRenderer;
 
+// ../renderers/src/TabsRenderer.tsx
+import { Chips, SegmentedControl as SegmentedControl2, Tabs as Tabs2 } from "@transferwise/components";
+import { useState as useState8 } from "react";
+import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
+var TabsRenderer = {
+  canRenderType: "tabs",
+  render: (props) => {
+    switch (props.control) {
+      case "segmented":
+        return /* @__PURE__ */ jsx60(SegmentedTabsRendererComponent, __spreadValues({}, props));
+      case "chips":
+        return /* @__PURE__ */ jsx60(ChipsTabsRendererComponent, __spreadValues({}, props));
+      default:
+        return /* @__PURE__ */ jsx60(TabsRendererComponent, __spreadValues({}, props));
+    }
+  }
+};
+function TabsRendererComponent({ uid, margin, tabs }) {
+  const [selectedIndex, setSelectedIndex] = useState8(0);
+  return /* @__PURE__ */ jsx60("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx60(
+    Tabs2,
+    {
+      name: uid,
+      selected: selectedIndex != null ? selectedIndex : 0,
+      tabs: tabs.map((option) => ({
+        title: option.title,
+        disabled: false,
+        content: /* @__PURE__ */ jsxs25("div", { className: "m-t-2", children: [
+          " ",
+          option.children,
+          " "
+        ] })
+      })),
+      onTabSelect: setSelectedIndex
+    }
+  ) });
+}
+function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
+  var _a;
+  const [selectedIndex, setSelectedIndex] = useState8(0);
+  return /* @__PURE__ */ jsxs25("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ jsx60(
+      SegmentedControl2,
+      {
+        name: uid,
+        value: String(selectedIndex),
+        mode: "view",
+        segments: tabs.map((tab, index) => ({
+          id: String(index),
+          value: String(index),
+          label: tab.title,
+          controls: `${uid}-children`
+        })),
+        onChange: (value) => setSelectedIndex(Number(value))
+      }
+    ),
+    /* @__PURE__ */ jsx60("div", { id: `${uid}-children`, className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
+  ] });
+}
+function ChipsTabsRendererComponent({ uid, margin, tabs }) {
+  var _a;
+  const [selectedIndex, setSelectedIndex] = useState8(0);
+  return /* @__PURE__ */ jsxs25("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ jsx60(
+      Chips,
+      {
+        chips: tabs.map((tab, index) => ({ label: tab.title, value: index })),
+        selected: selectedIndex,
+        onChange: ({ selectedValue }) => setSelectedIndex(Number(selectedValue))
+      }
+    ),
+    /* @__PURE__ */ jsx60("div", { className: "m-t-2", children: (_a = tabs[selectedIndex]) == null ? void 0 : _a.children })
+  ] });
+}
+
 // ../renderers/src/getWiseRenderers.ts
 var getWiseRenderers = () => [
   AlertRenderer_default,
@@ -3179,6 +3254,7 @@ var getWiseRenderers = () => [
   SelectInputRenderer_default,
   SectionRenderer_default,
   StatusListRenderer_default,
+  TabsRenderer,
   TextInputRenderer_default,
   UploadInputRenderer,
   SplashStepRenderer,
@@ -3188,16 +3264,19 @@ var getWiseRenderers = () => [
 
 // ../renderers/src/ModalContentRenderer.tsx
 import { Modal as Modal4 } from "@transferwise/components";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var ModalContentRenderer = {
   canRenderType: "modal-content",
   render: ({ title, children, open, onClose }) => {
-    return /* @__PURE__ */ jsx60(Modal4, { open, title, body: children, onClose });
+    return /* @__PURE__ */ jsx61(Modal4, { open, title, body: children, onClose });
   }
 };
 
 // src/dynamicFlow/telemetry/app-version.ts
-var appVersion = "4.14.1";
+var appVersion = (
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  typeof process !== "undefined" ? "4.15.1" : "0.0.0"
+);
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
 var getLogEvent = (onLog) => (level, message, extra) => {
@@ -3236,15 +3315,16 @@ var getTrackEvent = (onEvent, onAnalytics, onThemeChange) => (name, properties)
 };
 
 // src/dynamicFlow/DynamicFlow.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var wiseRenderers = getWiseRenderers();
 function DynamicFlowLegacy(props) {
   const { customFetch = globalThis.fetch } = props;
   const coreProps = __spreadProps(__spreadValues({}, props), { httpClient: customFetch });
-  return /* @__PURE__ */ jsx61(DynamicFlowCoreLegacy, __spreadValues({}, coreProps));
+  return /* @__PURE__ */ jsx62(DynamicFlowCoreLegacy, __spreadValues({}, coreProps));
 }
 function DynamicFlowRevamp(props) {
   const {
+    className = "",
     customFetch = globalThis.fetch,
     renderers,
     onAnalytics,
@@ -3270,10 +3350,11 @@ function DynamicFlowRevamp(props) {
     onLog: logEvent,
     onLink
   });
-  return /* @__PURE__ */ jsx61(DynamicFlowCoreRevamp, __spreadValues({}, coreProps));
+  return /* @__PURE__ */ jsx62("div", { className, children: /* @__PURE__ */ jsx62(DynamicFlowCoreRevamp, __spreadValues({}, coreProps)) });
 }
 var DynamicForm = forwardRef(function DynamicForm2(props, ref) {
   const {
+    className = "",
     customFetch = globalThis.fetch,
     renderers,
     onAnalytics,
@@ -3299,7 +3380,7 @@ var DynamicForm = forwardRef(function DynamicForm2(props, ref) {
     onLog: logEvent,
     onLink
   });
-  return /* @__PURE__ */ jsx61(DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref }));
+  return /* @__PURE__ */ jsx62("div", { className, children: /* @__PURE__ */ jsx62(DynamicFormCore, __spreadProps(__spreadValues({}, coreProps), { ref })) });
 });
 var useWiseHttpClient = (httpClient) => {
   const { locale } = useIntl9();

package/build/types/dynamicFlow/DynamicFlow.d.ts

@@ -13,6 +13,7 @@ export declare function DynamicFlowLegacy(props: DynamicFlowLegacyProps): import
 type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 export type OnThemeChange = (theme: Theming['theme']) => void;
 export type DynamicFlowRevampProps = (MakeOptional<Omit<DynamicFlowRevampPropsWithInitialAction, 'httpClient'>, 'renderers' | 'onLink'> | MakeOptional<Omit<DynamicFlowRevampPropsWithInitialStep, 'httpClient'>, 'renderers' | 'onLink'>) & {
+    className?: string;
     customFetch?: DynamicFlowCoreRevampProps['httpClient'];
     onAnalytics?: DynamicFlowCoreRevampProps['onEvent'];
     onThemeChange?: OnThemeChange;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "4.14.1",
+  "version": "4.15.1",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -36,39 +36,39 @@
     "@babel/preset-env": "7.27.2",
     "@babel/preset-react": "7.27.1",
     "@babel/preset-typescript": "7.27.1",
-    "@chromatic-com/storybook": "4.0.0",
+    "@chromatic-com/storybook": "4.0.1",
     "@formatjs/cli": "^6.7.2",
-    "@storybook/react-vite": "9.0.10",
+    "@storybook/react-vite": "9.0.12",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@transferwise/components": "46.98.1",
     "@transferwise/formatting": "^2.13.1",
-    "@transferwise/icons": "3.22.0",
+    "@transferwise/icons": "3.22.2",
     "@transferwise/neptune-css": "14.24.4",
     "@types/jest": "29.5.14",
     "@types/react": "18.3.23",
     "@types/react-dom": "18.3.7",
     "@wise/art": "2.21.2",
     "@wise/components-theming": "^1.6.3",
-    "babel-jest": "29.7.0",
+    "babel-jest": "30.0.2",
     "currency-flags": "4.0.7",
     "esbuild": "0.25.5",
-    "eslint-plugin-storybook": "9.0.10",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
+    "eslint-plugin-storybook": "9.0.12",
+    "jest": "30.0.2",
+    "jest-environment-jsdom": "30.0.2",
     "jest-fetch-mock": "^3.0.3",
-    "jest-watch-typeahead": "^2.2.2",
+    "jest-watch-typeahead": "^3.0.1",
     "npm-run-all2": "7.0.2",
-    "postcss": "^8.5.5",
+    "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
-    "postcss-import": "^16.1.0",
+    "postcss-import": "^16.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.8.9",
-    "storybook": "^9.0.10",
-    "stylelint": "16.20.0",
+    "storybook": "^9.0.12",
+    "stylelint": "16.21.0",
     "stylelint-config-standard": "36.0.1",
     "stylelint-no-unsupported-browser-features": "8.0.4",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
@@ -76,7 +76,7 @@
     "typescript": "5.8.3",
     "@wise/dynamic-flow-fixtures": "0.0.1",
     "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-types": "3.5.1"
+    "@wise/dynamic-flow-types": "3.6.1"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.92.0",
@@ -91,8 +91,8 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-client": "4.7.1",
-    "@wise/dynamic-flow-types": "3.5.1"
+    "@wise/dynamic-flow-client": "4.8.1",
+    "@wise/dynamic-flow-types": "3.6.1"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",