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

package/build/i18n/uk.json

@@ -1,11 +1,11 @@
 {
   "df.wise.ArraySchema.addItem": "Зберегти",
-  "df.wise.ArraySchema.addItemTitle": "Add Item",
+  "df.wise.ArraySchema.addItemTitle": "Додати позицію",
   "df.wise.ArraySchema.editItem": "Зберегти",
   "df.wise.ArraySchema.maxItemsError": "Додайте {maxItems} або менше.",
   "df.wise.ArraySchema.minItemsError": "Додайте принаймні {minItems}.",
   "df.wise.ArraySchema.removeItem": "Вилучити",
-  "df.wise.ButtonLayout.buttonLoadingMessage": "This might take a few seconds",
+  "df.wise.ButtonLayout.buttonLoadingMessage": "Це може зайняти кілька секунд",
   "df.wise.ControlFeedback.maxLength": "Максимальна кількість символів: {maxLength}.",
   "df.wise.ControlFeedback.maximum": "Введіть число, що менше або дорівнює {maximum}.",
   "df.wise.ControlFeedback.maximumDate": "Введіть дату, що припадає на {maximum}, або ранішу.",
@@ -35,7 +35,7 @@
   "df.wise.SearchLayout.loading": "Завантаження…",
   "df.wise.back.label": "Назад",
   "df.wise.filter.noResults": "Нічого не знайдено",
-  "df.wise.filter.placeholder": "Start typing to search",
+  "df.wise.filter.placeholder": "Почніть вводити текст для пошуку",
   "df.wise.filter.results": "Результати пошуку",
   "df.wise.group.all": "Усе",
   "df.wise.group.currencies-with-account-details": "Валюти з реквізитами рахунків",

package/build/main.css

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

package/build/main.js

@@ -135,6 +135,9 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_dynamic_flow_client3 = require("@wise/dynamic-flow-client");
 
+// src/dynamicFlow/useDynamicFlowWise.tsx
+var import_dynamic_flow_client = require("@wise/dynamic-flow-client");
+
 // ../renderers/src/AlertRenderer.tsx
 var import_components = require("@transferwise/components");
 
@@ -3727,13 +3730,12 @@ var getWiseRenderers = () => [
 ];
 
 // src/dynamicFlow/useDynamicFlowWise.tsx
-var import_dynamic_flow_client = require("@wise/dynamic-flow-client");
 var import_react21 = require("react");
 
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.1.2" : "0.0.0"
+  typeof process !== "undefined" ? "5.3.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -3766,39 +3768,13 @@ var getTrackEvent = (onEvent, onAnalytics) => (name, properties) => {
   }
 };
 
-// src/dynamicFlow/useWiseHttpClient.tsx
-var import_react19 = require("react");
-var import_react_intl26 = require("react-intl");
-var useWiseHttpClient = (httpClient) => {
-  const { locale } = (0, import_react_intl26.useIntl)();
-  return (0, import_react19.useCallback)(
-    async (input, init = {}) => {
-      const headers = new Headers(init.headers);
-      headers.set("accept-language", locale);
-      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || void 0;
-      if (timeZone) {
-        headers.set("time-zone", timeZone);
-      }
-      const requestInit = __spreadProps(__spreadValues({}, init), { credentials: "include", headers });
-      return httpClient(input, requestInit).catch(handleRejection);
-    },
-    [httpClient, locale]
-  );
-};
-var handleRejection = (error) => {
-  if (error instanceof Error && error.message === "SCA_MODAL_CLOSED") {
-    return new Response(JSON.stringify({ validation: {} }), { status: 400 });
-  }
-  throw error;
-};
-
 // src/dynamicFlow/useOnCopy.tsx
-var import_react20 = require("react");
-var import_react_intl28 = require("react-intl");
+var import_react19 = require("react");
+var import_react_intl27 = require("react-intl");
 
 // src/dynamicFlow/messages.ts
-var import_react_intl27 = require("react-intl");
-var messages_default = (0, import_react_intl27.defineMessages)({
+var import_react_intl26 = require("react-intl");
+var messages_default = (0, import_react_intl26.defineMessages)({
   copied: {
     id: "df.wise.CopyFeedback.copy",
     defaultMessage: "Copied to clipboard",
@@ -3813,9 +3789,9 @@ var messages_default = (0, import_react_intl27.defineMessages)({
 
 // src/dynamicFlow/useOnCopy.tsx
 var useOnCopy = () => {
-  const { formatMessage } = (0, import_react_intl28.useIntl)();
+  const { formatMessage } = (0, import_react_intl27.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
-  return (0, import_react20.useCallback)(
+  return (0, import_react19.useCallback)(
     (copiedContent) => {
       if (copiedContent) {
         createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -3827,7 +3803,34 @@ var useOnCopy = () => {
   );
 };
 
+// src/dynamicFlow/useWiseHttpClient.tsx
+var import_react20 = require("react");
+var import_react_intl28 = require("react-intl");
+var useWiseHttpClient = (httpClient) => {
+  const { locale } = (0, import_react_intl28.useIntl)();
+  return (0, import_react20.useCallback)(
+    async (input, init = {}) => {
+      const headers = new Headers(init.headers);
+      headers.set("accept-language", locale);
+      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || void 0;
+      if (timeZone) {
+        headers.set("time-zone", timeZone);
+      }
+      const requestInit = __spreadProps(__spreadValues({}, init), { credentials: "include", headers });
+      return httpClient(input, requestInit).catch(handleRejection);
+    },
+    [httpClient, locale]
+  );
+};
+var handleRejection = (error) => {
+  if (error instanceof Error && error.message === "SCA_MODAL_CLOSED") {
+    return new Response(JSON.stringify({ validation: {} }), { status: 400 });
+  }
+  throw error;
+};
+
 // src/dynamicFlow/useDynamicFlowWise.tsx
+var wiseRenderers = getWiseRenderers();
 var useDynamicFlowWise = (props) => {
   const {
     customFetch = globalThis.fetch,
@@ -3866,11 +3869,10 @@ var openLinkInNewTab = (url) => {
 
 // src/dynamicFlow/DynamicFlow.tsx
 var import_jsx_runtime82 = require("react/jsx-runtime");
-var wiseRenderers = getWiseRenderers();
 function DynamicFlow(props) {
   const { className = "" } = props;
   const df = useDynamicFlowWise(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className, children: df.component });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className, children: df.view });
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
@@ -3884,13 +3886,13 @@ var DynamicFlowWithRef = (0, import_react22.forwardRef)(function DynamicFlowWith
     () => ({
       getValue: async () => {
         var _a;
-        return (_a = await df.getSubmittableValue()) != null ? _a : null;
+        return (_a = await df.controller.getSubmittableValue()) != null ? _a : null;
       },
-      validate: () => df.validate()
+      validate: () => df.controller.validate()
     }),
-    []
+    [df]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className, children: df.component });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className, children: df.view });
 });
 
 // src/index.ts

package/build/main.mjs

@@ -117,6 +117,9 @@ var require_classnames = __commonJS({
 // src/index.ts
 import { makeHttpClient } from "@wise/dynamic-flow-client";
 
+// src/dynamicFlow/useDynamicFlowWise.tsx
+import { useDynamicFlow } from "@wise/dynamic-flow-client";
+
 // ../renderers/src/AlertRenderer.tsx
 import { Alert } from "@transferwise/components";
 
@@ -3718,13 +3721,12 @@ var getWiseRenderers = () => [
 ];
 
 // src/dynamicFlow/useDynamicFlowWise.tsx
-import { useDynamicFlow } from "@wise/dynamic-flow-client";
 import { useMemo as useMemo2 } from "react";
 
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.1.2" : "0.0.0"
+  typeof process !== "undefined" ? "5.3.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -3757,35 +3759,9 @@ var getTrackEvent = (onEvent, onAnalytics) => (name, properties) => {
   }
 };
 
-// src/dynamicFlow/useWiseHttpClient.tsx
+// src/dynamicFlow/useOnCopy.tsx
 import { useCallback } from "react";
 import { useIntl as useIntl15 } from "react-intl";
-var useWiseHttpClient = (httpClient) => {
-  const { locale } = useIntl15();
-  return useCallback(
-    async (input, init = {}) => {
-      const headers = new Headers(init.headers);
-      headers.set("accept-language", locale);
-      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || void 0;
-      if (timeZone) {
-        headers.set("time-zone", timeZone);
-      }
-      const requestInit = __spreadProps(__spreadValues({}, init), { credentials: "include", headers });
-      return httpClient(input, requestInit).catch(handleRejection);
-    },
-    [httpClient, locale]
-  );
-};
-var handleRejection = (error) => {
-  if (error instanceof Error && error.message === "SCA_MODAL_CLOSED") {
-    return new Response(JSON.stringify({ validation: {} }), { status: 400 });
-  }
-  throw error;
-};
-
-// src/dynamicFlow/useOnCopy.tsx
-import { useCallback as useCallback2 } from "react";
-import { useIntl as useIntl16 } from "react-intl";
 
 // src/dynamicFlow/messages.ts
 import { defineMessages as defineMessages12 } from "react-intl";
@@ -3804,9 +3780,9 @@ var messages_default = defineMessages12({
 
 // src/dynamicFlow/useOnCopy.tsx
 var useOnCopy = () => {
-  const { formatMessage } = useIntl16();
+  const { formatMessage } = useIntl15();
   const createSnackBar = useSnackBarIfAvailable();
-  return useCallback2(
+  return useCallback(
     (copiedContent) => {
       if (copiedContent) {
         createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -3818,7 +3794,34 @@ var useOnCopy = () => {
   );
 };
 
+// src/dynamicFlow/useWiseHttpClient.tsx
+import { useCallback as useCallback2 } from "react";
+import { useIntl as useIntl16 } from "react-intl";
+var useWiseHttpClient = (httpClient) => {
+  const { locale } = useIntl16();
+  return useCallback2(
+    async (input, init = {}) => {
+      const headers = new Headers(init.headers);
+      headers.set("accept-language", locale);
+      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone || void 0;
+      if (timeZone) {
+        headers.set("time-zone", timeZone);
+      }
+      const requestInit = __spreadProps(__spreadValues({}, init), { credentials: "include", headers });
+      return httpClient(input, requestInit).catch(handleRejection);
+    },
+    [httpClient, locale]
+  );
+};
+var handleRejection = (error) => {
+  if (error instanceof Error && error.message === "SCA_MODAL_CLOSED") {
+    return new Response(JSON.stringify({ validation: {} }), { status: 400 });
+  }
+  throw error;
+};
+
 // src/dynamicFlow/useDynamicFlowWise.tsx
+var wiseRenderers = getWiseRenderers();
 var useDynamicFlowWise = (props) => {
   const {
     customFetch = globalThis.fetch,
@@ -3857,11 +3860,10 @@ var openLinkInNewTab = (url) => {
 
 // src/dynamicFlow/DynamicFlow.tsx
 import { jsx as jsx82 } from "react/jsx-runtime";
-var wiseRenderers = getWiseRenderers();
 function DynamicFlow(props) {
   const { className = "" } = props;
   const df = useDynamicFlowWise(props);
-  return /* @__PURE__ */ jsx82("div", { className, children: df.component });
+  return /* @__PURE__ */ jsx82("div", { className, children: df.view });
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
@@ -3878,13 +3880,13 @@ var DynamicFlowWithRef = forwardRef(function DynamicFlowWithRef2(props, ref) {
     () => ({
       getValue: async () => {
         var _a;
-        return (_a = await df.getSubmittableValue()) != null ? _a : null;
+        return (_a = await df.controller.getSubmittableValue()) != null ? _a : null;
       },
-      validate: () => df.validate()
+      validate: () => df.controller.validate()
     }),
-    []
+    [df]
   );
-  return /* @__PURE__ */ jsx83("div", { className, children: df.component });
+  return /* @__PURE__ */ jsx83("div", { className, children: df.view });
 });
 
 // src/index.ts

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

@@ -3,5 +3,4 @@ export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>
 export type Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
-export declare const wiseRenderers: import("@wise/dynamic-flow-types/renderers").Renderers;
 export declare function DynamicFlow(props: DynamicFlowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -16,7 +16,7 @@ export type DynamicFlowRef = {
 };
 /**
  * DynamicFlowWithRef is like DynamicFlow, but it also accepts a ForwardedRef.
- * This ref conforms to the DynamicFormController type, containing two functions: `getValue` and `validate`.
+ * This ref conforms to the DynamicFlowRef type, containing two functions: `getValue` and `validate`.
  * @experimental This component may be changed in the future without notice.
  */
 export declare const DynamicFlowWithRef: ForwardRefExoticComponent<DynamicFlowWithRefProps & RefAttributes<DynamicFlowRef>>;

package/package.json

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