@wise/dynamic-flow-client-internal 4.1.0 → 4.2.1-experimental-6bb6f02

package/build/i18n/cs.json

@@ -0,0 +1,33 @@
+{
+  "df.wise.ArraySchema.addItem": "Uložit",
+  "df.wise.ArraySchema.addItemTitle": "Add Item",
+  "df.wise.ArraySchema.editItem": "Uložit",
+  "df.wise.ArraySchema.maxItemsError": "Přidejte {maxItems} nebo méně.",
+  "df.wise.ArraySchema.minItemsError": "Přidejte alespoň {minItems}.",
+  "df.wise.ArraySchema.removeItem": "Odstranit",
+  "df.wise.ControlFeedback.maxLength": "Zadejte {maxLength} nebo méně znaků.",
+  "df.wise.ControlFeedback.maximum": "Zadejte číslo, které je {maximum} nebo menší.",
+  "df.wise.ControlFeedback.maximumDate": "Zadejte datum, které je v den nebo před {maximum}.",
+  "df.wise.ControlFeedback.minLength": "Zadejte alespoň {minLength} znaků.",
+  "df.wise.ControlFeedback.minimum": "Zadejte číslo, které je {minimum} nebo více.",
+  "df.wise.ControlFeedback.minimumDate": "Zadejte datum, které je v den nebo po {minimum}.",
+  "df.wise.ControlFeedback.pattern": "Zadejte to prosím ve správném formátu.",
+  "df.wise.ControlFeedback.patternDate": "Zadejte prosím datum ve správném formátu.",
+  "df.wise.ControlFeedback.required": "Vyplňte prosím toto pole.",
+  "df.wise.ControlFeedback.type": "Nesprávný typ",
+  "df.wise.DynamicParagraph.copied": "Zkopírováno do schránky",
+  "df.wise.DynamicParagraph.copy": "Kopírovat",
+  "df.wise.ErrorBoundary.errorAlert": "Něco se pokazilo.",
+  "df.wise.ErrorBoundary.retry": "Zkusit znovu",
+  "df.wise.ExternalConfirmation.cancel": "Zrušit",
+  "df.wise.ExternalConfirmation.description": "Please confirm you want to open **{origin}** in a new browser tab.",
+  "df.wise.ExternalConfirmation.open": "Open in new tab",
+  "df.wise.ExternalConfirmation.title": "Please confirm",
+  "df.wise.Help.ariaLabel": "Pro více informací klikněte sem.",
+  "df.wise.MultiSelect.summary": "{first} a {count} více",
+  "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Pardon, tento soubor je příliš velký. Nahrajte prosím menší soubor.",
+  "df.wise.MultipleFileUploadSchema.maxItemsError": "Nahrajte {maxItems} nebo méně souborů.",
+  "df.wise.MultipleFileUploadSchema.minItemsError": "Nahrajte prosím alespoň {minItems} soubor(y).",
+  "df.wise.PersistAsyncSchema.genericError": "Něco se pokazilo. Prosím, zkuste to znovu.",
+  "df.wise.SearchLayout.loading": "Načítání..."
+}

package/build/i18n/uk.json

@@ -0,0 +1,33 @@
+{
+  "df.wise.ArraySchema.addItem": "Заощаджуйте",
+  "df.wise.ArraySchema.addItemTitle": "Add Item",
+  "df.wise.ArraySchema.editItem": "Заощаджуйте",
+  "df.wise.ArraySchema.maxItemsError": "Додайте {maxItems} або менше.",
+  "df.wise.ArraySchema.minItemsError": "Додайте принаймні {minItems}.",
+  "df.wise.ArraySchema.removeItem": "Вилучити",
+  "df.wise.ControlFeedback.maxLength": "Будь ласка, введіть {maxLength} або менше символів.",
+  "df.wise.ControlFeedback.maximum": "Введіть число, що дорівнює {maximum}, або менше.",
+  "df.wise.ControlFeedback.maximumDate": "Введіть дату, що припадає на {maximum}, або ранішу.",
+  "df.wise.ControlFeedback.minLength": "Мінімальна кількість символів: {minLength}.",
+  "df.wise.ControlFeedback.minimum": "Введіть число, що дорівнює {minimum}, або більше.",
+  "df.wise.ControlFeedback.minimumDate": "Введіть дату, що припадає на {minimum}, або пізнішу.",
+  "df.wise.ControlFeedback.pattern": "Введіть значення в правильному форматі.",
+  "df.wise.ControlFeedback.patternDate": "Введіть дату в правильному форматі.",
+  "df.wise.ControlFeedback.required": "Заповніть це поле.",
+  "df.wise.ControlFeedback.type": "Неправильний тип",
+  "df.wise.DynamicParagraph.copied": "Скопійовано в буфер обміну",
+  "df.wise.DynamicParagraph.copy": "Копіювати",
+  "df.wise.ErrorBoundary.errorAlert": "Сталася помилка.",
+  "df.wise.ErrorBoundary.retry": "Повторити спробу",
+  "df.wise.ExternalConfirmation.cancel": "Скасувати",
+  "df.wise.ExternalConfirmation.description": "Підтвердьте, що ви бажаєте відкрити **{origin}** в новій вкладці браузера.",
+  "df.wise.ExternalConfirmation.open": "Відкрити в новій вкладці",
+  "df.wise.ExternalConfirmation.title": "Підтвердьте",
+  "df.wise.Help.ariaLabel": "Натисніть тут, щоб дізнатися більше.",
+  "df.wise.MultiSelect.summary": "{first} і ще {count}",
+  "df.wise.MultipleFileUploadSchema.maxFileSizeError": "Вибачте, але цей файл завеликий. Будь ласка, завантажте файл меншого розміру.",
+  "df.wise.MultipleFileUploadSchema.maxItemsError": "Будь ласка, завантажте {maxItems} або менше файлів.",
+  "df.wise.MultipleFileUploadSchema.minItemsError": "Будь ласка, завантажте принаймні {minItems} файл(ів).",
+  "df.wise.PersistAsyncSchema.genericError": "Щось сталося. Спробуйте ще раз.",
+  "df.wise.SearchLayout.loading": "Завантаження…"
+}

package/build/main.js

@@ -53201,14 +53201,31 @@ var DynamicIcon_default = DynamicIcon;
 var import_components7 = require("@transferwise/components");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function NavigationOptionMedia({ icon, image }) {
+  const iconNode = getIconNode(icon);
+  const imageNode = getImageNode(image);
+  if (imageNode) {
+    if (iconNode) {
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_components7.AvatarView, { badge: { asset: iconNode }, children: imageNode });
+    }
+    return imageNode;
+  }
+  if (iconNode) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_components7.AvatarView, { children: iconNode });
+  }
+  return null;
+}
+var getIconNode = (icon) => {
   if (!isNullish(icon)) {
     if ("name" in icon) {
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_components7.Avatar, { type: import_components7.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DynamicIcon_default, { name: icon.name }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DynamicIcon_default, { name: icon.name });
     }
     if (icon.text) {
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_components7.Avatar, { type: import_components7.AvatarType.INITIALS, children: icon.text });
+      return icon.text;
     }
   }
+  return null;
+};
+var getImageNode = (image) => {
   if (image) {
     const { accessibilityDescription, uri } = image;
     if (!uri.startsWith("urn:")) {
@@ -53216,7 +53233,7 @@ function NavigationOptionMedia({ icon, image }) {
     }
   }
   return null;
-}
+};
 
 // ../renderers/src/DecisionRenderer.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
@@ -53233,7 +53250,7 @@ var DecisionRenderer = {
           content: description,
           disabled,
           media: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(NavigationOptionMedia, { icon, image }),
-          showMediaCircle: false,
+          showMediaCircle: Boolean(icon),
           showMediaAtAllSizes: true,
           onClick
         },
@@ -53492,13 +53509,13 @@ function getIconAvatar({ icon, image }) {
     }
   }
   if (isFlagIcon2(icon)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components13.Avatar, { type: import_components13.AvatarType.ICON, size, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DynamicIcon_default, { name: icon.name }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components13.AvatarView, { size, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DynamicIcon_default, { name: icon.name }) });
   }
   if (isNamedIcon2(icon)) {
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DynamicIcon_default, { name: icon.name });
   }
   if (icon && "text" in icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components13.Avatar, { type: import_components13.AvatarType.ICON, size, children: icon.text });
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components13.AvatarView, { size, children: icon.text });
   }
   return null;
 }
@@ -54936,7 +54953,7 @@ function BackButton({ title, onClick }) {
       onClick,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "sr-only", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_components38.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_icons3.ArrowLeft, { size: "24" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_components38.AvatarView, { interactive: true, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_icons3.ArrowLeft, { size: "24" }) })
       ]
     }
   ) });
@@ -55059,7 +55076,14 @@ var ListRenderer = {
     items.map((props) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DesignSystemListItem, __spreadValues({}, props), props.title))
   ] })
 };
-var DesignSystemListItem = ({ title, subtitle, value, subvalue, icon, image }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+var DesignSystemListItem = ({
+  title,
+  subtitle,
+  value,
+  subvalue,
+  icon,
+  image
+}) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
   "label",
   {
     className: (0, import_classnames6.default)("np-option p-a-2", {
@@ -55084,7 +55108,7 @@ var DesignSystemListItem = ({ title, subtitle, value, subvalue, icon, image }) =
 );
 var ListItemMedia = ({ icon, image }) => {
   if (icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "circle circle-sm text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(NavigationOptionMedia, { icon, image }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "circle circle-sm text-primary circle-inverse", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(NavigationOptionMedia, { icon, image }) });
   }
   if (image) {
     return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(NavigationOptionMedia, { icon, image }) });

package/build/main.mjs

@@ -53192,17 +53192,34 @@ function DynamicIcon({ name }) {
 var DynamicIcon_default = DynamicIcon;
 
 // ../renderers/src/components/icon/NavigationOptionMedia.tsx
-import { Avatar, AvatarType } from "@transferwise/components";
+import { AvatarView } from "@transferwise/components";
 import { jsx as jsx30 } from "react/jsx-runtime";
 function NavigationOptionMedia({ icon, image }) {
+  const iconNode = getIconNode(icon);
+  const imageNode = getImageNode(image);
+  if (imageNode) {
+    if (iconNode) {
+      return /* @__PURE__ */ jsx30(AvatarView, { badge: { asset: iconNode }, children: imageNode });
+    }
+    return imageNode;
+  }
+  if (iconNode) {
+    return /* @__PURE__ */ jsx30(AvatarView, { children: iconNode });
+  }
+  return null;
+}
+var getIconNode = (icon) => {
   if (!isNullish(icon)) {
     if ("name" in icon) {
-      return /* @__PURE__ */ jsx30(Avatar, { type: AvatarType.ICON, children: /* @__PURE__ */ jsx30(DynamicIcon_default, { name: icon.name }) });
+      return /* @__PURE__ */ jsx30(DynamicIcon_default, { name: icon.name });
     }
     if (icon.text) {
-      return /* @__PURE__ */ jsx30(Avatar, { type: AvatarType.INITIALS, children: icon.text });
+      return icon.text;
     }
   }
+  return null;
+};
+var getImageNode = (image) => {
   if (image) {
     const { accessibilityDescription, uri } = image;
     if (!uri.startsWith("urn:")) {
@@ -53210,7 +53227,7 @@ function NavigationOptionMedia({ icon, image }) {
     }
   }
   return null;
-}
+};
 
 // ../renderers/src/DecisionRenderer.tsx
 import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -53227,7 +53244,7 @@ var DecisionRenderer = {
           content: description,
           disabled,
           media: /* @__PURE__ */ jsx31(NavigationOptionMedia, { icon, image }),
-          showMediaCircle: false,
+          showMediaCircle: Boolean(icon),
           showMediaAtAllSizes: true,
           onClick
         },
@@ -53475,7 +53492,7 @@ var onWheel = (event) => {
 };
 
 // ../renderers/src/utils/getIconAvatar.tsx
-import { Avatar as Avatar2, AvatarType as AvatarType2 } from "@transferwise/components";
+import { AvatarView as AvatarView2 } from "@transferwise/components";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var size = 24;
 function getIconAvatar({ icon, image }) {
@@ -53486,13 +53503,13 @@ function getIconAvatar({ icon, image }) {
     }
   }
   if (isFlagIcon2(icon)) {
-    return /* @__PURE__ */ jsx41(Avatar2, { type: AvatarType2.ICON, size, children: /* @__PURE__ */ jsx41(DynamicIcon_default, { name: icon.name }) });
+    return /* @__PURE__ */ jsx41(AvatarView2, { size, children: /* @__PURE__ */ jsx41(DynamicIcon_default, { name: icon.name }) });
   }
   if (isNamedIcon2(icon)) {
     return /* @__PURE__ */ jsx41(DynamicIcon_default, { name: icon.name });
   }
   if (icon && "text" in icon) {
-    return /* @__PURE__ */ jsx41(Avatar2, { type: AvatarType2.ICON, size, children: icon.text });
+    return /* @__PURE__ */ jsx41(AvatarView2, { size, children: icon.text });
   }
   return null;
 }
@@ -53617,17 +53634,17 @@ function DFModal({ content, margin, trigger }) {
 import { SelectInput, SelectInputOptionContent } from "@transferwise/components";
 
 // ../renderers/src/SelectInputRenderer/OptionMedia.tsx
-import { Avatar as Avatar3, AvatarType as AvatarType3 } from "@transferwise/components";
+import { Avatar as Avatar2, AvatarType as AvatarType2 } from "@transferwise/components";
 import { jsx as jsx46 } from "react/jsx-runtime";
 function OptionMedia({ icon, image }) {
   if (image && !image.uri.startsWith("urn:")) {
     return /* @__PURE__ */ jsx46("img", { src: image.uri, alt: image.accessibilityDescription || "", width: "64px" });
   }
   if (icon && "name" in icon) {
-    return /* @__PURE__ */ jsx46(Avatar3, { type: AvatarType3.ICON, children: /* @__PURE__ */ jsx46(DynamicIcon_default, { name: icon.name }) });
+    return /* @__PURE__ */ jsx46(Avatar2, { type: AvatarType2.ICON, children: /* @__PURE__ */ jsx46(DynamicIcon_default, { name: icon.name }) });
   }
   if (icon && "text" in icon) {
-    return /* @__PURE__ */ jsx46(Avatar3, { type: AvatarType3.INITIALS, children: icon.text });
+    return /* @__PURE__ */ jsx46(Avatar2, { type: AvatarType2.INITIALS, children: icon.text });
   }
   return null;
 }
@@ -54922,7 +54939,7 @@ var getReviewAction = (callToAction) => {
 import { Alert as Alert2, Title } from "@transferwise/components";
 
 // ../renderers/src/step/BackButton.tsx
-import { Avatar as Avatar4 } from "@transferwise/components";
+import { AvatarView as AvatarView3 } from "@transferwise/components";
 import { ArrowLeft } from "@transferwise/icons";
 import { jsx as jsx67, jsxs as jsxs32 } from "react/jsx-runtime";
 function BackButton({ title, onClick }) {
@@ -54936,7 +54953,7 @@ function BackButton({ title, onClick }) {
       onClick,
       children: [
         /* @__PURE__ */ jsx67("span", { className: "sr-only", children: title }),
-        /* @__PURE__ */ jsx67(Avatar4, { type: "icon", children: /* @__PURE__ */ jsx67(ArrowLeft, { size: "24" }) })
+        /* @__PURE__ */ jsx67(AvatarView3, { interactive: true, children: /* @__PURE__ */ jsx67(ArrowLeft, { size: "24" }) })
       ]
     }
   ) });
@@ -55059,7 +55076,14 @@ var ListRenderer = {
     items.map((props) => /* @__PURE__ */ jsx70(DesignSystemListItem, __spreadValues({}, props), props.title))
   ] })
 };
-var DesignSystemListItem = ({ title, subtitle, value, subvalue, icon, image }) => /* @__PURE__ */ jsx70(
+var DesignSystemListItem = ({
+  title,
+  subtitle,
+  value,
+  subvalue,
+  icon,
+  image
+}) => /* @__PURE__ */ jsx70(
   "label",
   {
     className: (0, import_classnames6.default)("np-option p-a-2", {
@@ -55084,7 +55108,7 @@ var DesignSystemListItem = ({ title, subtitle, value, subvalue, icon, image }) =
 );
 var ListItemMedia = ({ icon, image }) => {
   if (icon) {
-    return /* @__PURE__ */ jsx70("div", { className: "circle circle-sm text-primary", children: /* @__PURE__ */ jsx70(NavigationOptionMedia, { icon, image }) });
+    return /* @__PURE__ */ jsx70("div", { className: "circle circle-sm text-primary circle-inverse", children: /* @__PURE__ */ jsx70(NavigationOptionMedia, { icon, image }) });
   }
   if (image) {
     return /* @__PURE__ */ jsx70("div", { className: "np-option__no-media-circle", children: /* @__PURE__ */ jsx70(NavigationOptionMedia, { icon, image }) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "4.1.0",
+  "version": "4.2.1-experimental-6bb6f02",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -30,29 +30,29 @@
     "url": "git+https://github.com/transferwise/dynamic-flow.git"
   },
   "devDependencies": {
-    "@babel/core": "7.26.7",
+    "@babel/core": "7.26.9",
     "@babel/plugin-syntax-flow": "7.26.0",
     "@babel/plugin-transform-react-jsx": "7.25.9",
-    "@babel/preset-env": "7.26.7",
+    "@babel/preset-env": "7.26.9",
     "@babel/preset-react": "7.26.3",
     "@babel/preset-typescript": "7.26.0",
-    "@chromatic-com/storybook": "3.2.4",
-    "@formatjs/cli": "^6.5.1",
-    "@storybook/addon-a11y": "^8.5.4",
-    "@storybook/addon-actions": "^8.5.4",
-    "@storybook/addon-essentials": "^8.5.4",
-    "@storybook/addon-interactions": "^8.5.4",
-    "@storybook/addon-links": "^8.5.4",
+    "@chromatic-com/storybook": "3.2.5",
+    "@formatjs/cli": "^6.6.1",
+    "@storybook/addon-a11y": "^8.6.3",
+    "@storybook/addon-actions": "^8.6.3",
+    "@storybook/addon-essentials": "^8.6.3",
+    "@storybook/addon-interactions": "^8.6.3",
+    "@storybook/addon-links": "^8.6.3",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/react": "^8.5.4",
-    "@storybook/react-webpack5": "^8.5.4",
-    "@storybook/test": "^8.5.4",
+    "@storybook/react": "^8.6.3",
+    "@storybook/react-webpack5": "^8.6.3",
+    "@storybook/test": "^8.6.3",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.93.1",
-    "@transferwise/formatting": "^2.13.0",
+    "@transferwise/components": "46.94.0",
+    "@transferwise/formatting": "^2.13.1",
     "@transferwise/icons": "3.18.0",
     "@transferwise/neptune-css": "14.22.0",
     "@types/jest": "29.5.14",
@@ -68,22 +68,22 @@
     "jest-fetch-mock": "^3.0.3",
     "jest-watch-typeahead": "^2.2.2",
     "npm-run-all2": "7.0.2",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.3",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-intl": "6.8.9",
-    "storybook": "^8.5.4",
-    "stylelint": "16.14.0",
+    "storybook": "^8.6.3",
+    "stylelint": "16.15.0",
     "stylelint-config-standard": "36.0.1",
-    "stylelint-no-unsupported-browser-features": "8.0.2",
+    "stylelint-no-unsupported-browser-features": "8.0.4",
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
-    "tsx": "4.19.2",
-    "typescript": "5.7.3",
-    "webpack": "5.97.1",
+    "tsx": "4.19.3",
+    "typescript": "5.8.2",
+    "webpack": "5.98.0",
     "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-types": "3.0.0",
+    "@wise/dynamic-flow-types": "3.1.0-experimental-6bb6f02",
     "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
@@ -98,8 +98,8 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-client": "4.0.1",
-    "@wise/dynamic-flow-types": "3.0.0"
+    "@wise/dynamic-flow-client": "4.1.0-experimental-6bb6f02",
+    "@wise/dynamic-flow-types": "3.1.0-experimental-6bb6f02"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",