@wise/dynamic-flow-client-internal 4.35.0 → 4.36.0

package/build/i18n/it.json

@@ -36,7 +36,7 @@
   "df.wise.filter.noResults": "Nessun risultato",
   "df.wise.filter.placeholder": "Inizia a digitare per cercare",
   "df.wise.filter.results": "Risultati della ricerca",
-  "df.wise.group.all": "Tutte",
+  "df.wise.group.all": "Tutti",
   "df.wise.group.currencies-with-account-details": "Valute con estremi del conto",
   "df.wise.group.popular": "Popolari",
   "df.wise.group.recent": "Recenti"

package/build/main.css

@@ -248,7 +248,7 @@ button.df-back-btn {
 }
 .df-columns-renderer-container {
   display: flex;
-  gap: var(--size-16);
+  gap: var(--size-4);
   flex-direction: column;
 }
 .df-columns-renderer-column,
@@ -260,9 +260,10 @@ button.df-back-btn {
 .df-columns-renderer-bias-end .df-columns-renderer-column:nth-child(2) {
   flex: 2;
 }
-@media (width >= 768px) {
+@media (width >=768px) {
   .df-columns-renderer-container {
     flex-direction: row;
+    gap: var(--size-16);
   }
 }
 .df-image .df-illustration {

package/build/main.js

@@ -62,7 +62,7 @@ __export(index_exports, {
   DynamicFlowLegacy: () => DynamicFlowLegacy,
   DynamicFlowRevamp: () => DynamicFlowRevamp,
   DynamicForm: () => DynamicForm,
-  Header: () => Header11,
+  Header: () => Header12,
   JsonSchemaForm: () => import_dynamic_flow_client4.JsonSchemaForm,
   Media: () => Media2,
   findRendererPropsByType: () => import_dynamic_flow_client4.findRendererPropsByType,
@@ -1602,7 +1602,7 @@ var MarkdownRenderer = {
   render: ({ content, align, margin, size }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     import_components23.Markdown,
     {
-      className: size === "sm" ? "np-text-body-default" : "np-text-body-large",
+      className: ["xs", "sm"].includes(size) ? "np-text-body-default" : "np-text-body-large",
       config: { link: { target: "_blank" } },
       children: content
     }
@@ -2060,7 +2060,13 @@ var ParagraphRenderer = {
 };
 function Paragraph({ align, control, margin, size, text }) {
   const className = getTextAlignmentAndMargin({ align, margin });
-  return control === "copyable" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(CopyableParagraph, { className, align, text }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: `${size === "sm" ? "np-text-body-default" : "np-text-body-large"} ${className}`, children: text });
+  return control === "copyable" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(CopyableParagraph, { className, align, text }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    "p",
+    {
+      className: `${["xs", "sm"].includes(size) ? "np-text-body-default" : "np-text-body-large"} ${className}`,
+      children: text
+    }
+  );
 }
 function CopyableParagraph({
   text,
@@ -3021,19 +3027,23 @@ var StepRenderer = {
   render: StepRendererComponent
 };
 function StepRendererComponent(props) {
-  const { back, description, error, title, children, toolbar, footer } = props;
+  const { back, description, error, title, children, toolbar, footer, tags } = props;
   const hasFooter = footer && Array.isArray(footer) && footer.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TopBar, { back, toolbar }),
-    title || description ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "m-b-4", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_components47.Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
-      description ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "text-xs-center np-text-body-large", children: description }) : void 0
-    ] }) : void 0,
+    title || description ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "m-b-4", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Header10, { title, description, tags }) }) : void 0,
     error ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_components47.Alert, { type: "negative", className: "m-b-2", message: error }) : null,
     children,
     hasFooter ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "df-step-fixed__footer", children: footer }) : void 0
   ] });
 }
+var Header10 = ({ title, description, tags }) => {
+  const alignment = (tags == null ? void 0 : tags.includes("header-start")) ? "text-xs-left" : "text-xs-center";
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_components47.Title, { as: "h1", type: "title-section", className: `${alignment} m-b-2`, children: title }) : void 0,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: `${alignment} np-text-body-large`, children: description }) : void 0
+  ] });
+};
 
 // ../renderers/src/TabsRenderer.tsx
 var import_components48 = require("@transferwise/components");
@@ -3700,7 +3710,7 @@ var getWiseRenderers = () => [
 ];
 
 // src/dynamicFlow/renderers.ts
-var Header11 = Header7;
+var Header12 = Header7;
 var Media2 = Media;
 var getMargin2 = getMargin;
 var getListItemRenderers2 = getListItemRenderers;
@@ -4063,7 +4073,7 @@ var it_default = {
   "df.wise.filter.noResults": "Nessun risultato",
   "df.wise.filter.placeholder": "Inizia a digitare per cercare",
   "df.wise.filter.results": "Risultati della ricerca",
-  "df.wise.group.all": "Tutte",
+  "df.wise.group.all": "Tutti",
   "df.wise.group.currencies-with-account-details": "Valute con estremi del conto",
   "df.wise.group.popular": "Popolari",
   "df.wise.group.recent": "Recenti"
@@ -4558,7 +4568,7 @@ var import_dynamic_flow_client2 = 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" ? "4.35.0" : "0.0.0"
+  typeof process !== "undefined" ? "4.36.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts

package/build/main.mjs

@@ -1562,7 +1562,7 @@ var MarkdownRenderer = {
   render: ({ content, align, margin, size }) => /* @__PURE__ */ jsx42("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ jsx42(
     Markdown3,
     {
-      className: size === "sm" ? "np-text-body-default" : "np-text-body-large",
+      className: ["xs", "sm"].includes(size) ? "np-text-body-default" : "np-text-body-large",
       config: { link: { target: "_blank" } },
       children: content
     }
@@ -2020,7 +2020,13 @@ var ParagraphRenderer = {
 };
 function Paragraph({ align, control, margin, size, text }) {
   const className = getTextAlignmentAndMargin({ align, margin });
-  return control === "copyable" ? /* @__PURE__ */ jsx50(CopyableParagraph, { className, align, text }) : /* @__PURE__ */ jsx50("p", { className: `${size === "sm" ? "np-text-body-default" : "np-text-body-large"} ${className}`, children: text });
+  return control === "copyable" ? /* @__PURE__ */ jsx50(CopyableParagraph, { className, align, text }) : /* @__PURE__ */ jsx50(
+    "p",
+    {
+      className: `${["xs", "sm"].includes(size) ? "np-text-body-default" : "np-text-body-large"} ${className}`,
+      children: text
+    }
+  );
 }
 function CopyableParagraph({
   text,
@@ -2975,25 +2981,29 @@ function SplashStepRendererComponent(props) {
 
 // ../renderers/src/step/StepRenderer.tsx
 import { Alert as Alert2, Title as Title2 } from "@transferwise/components";
-import { jsx as jsx70, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx70, jsxs as jsxs28 } from "react/jsx-runtime";
 var StepRenderer = {
   canRenderType: "step",
   render: StepRendererComponent
 };
 function StepRendererComponent(props) {
-  const { back, description, error, title, children, toolbar, footer } = props;
+  const { back, description, error, title, children, toolbar, footer, tags } = props;
   const hasFooter = footer && Array.isArray(footer) && footer.length > 0;
   return /* @__PURE__ */ jsxs28("div", { children: [
     /* @__PURE__ */ jsx70(TopBar, { back, toolbar }),
-    title || description ? /* @__PURE__ */ jsxs28("div", { className: "m-b-4", children: [
-      title ? /* @__PURE__ */ jsx70(Title2, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
-      description ? /* @__PURE__ */ jsx70("p", { className: "text-xs-center np-text-body-large", children: description }) : void 0
-    ] }) : void 0,
+    title || description ? /* @__PURE__ */ jsx70("div", { className: "m-b-4", children: /* @__PURE__ */ jsx70(Header10, { title, description, tags }) }) : void 0,
     error ? /* @__PURE__ */ jsx70(Alert2, { type: "negative", className: "m-b-2", message: error }) : null,
     children,
     hasFooter ? /* @__PURE__ */ jsx70("div", { className: "df-step-fixed__footer", children: footer }) : void 0
   ] });
 }
+var Header10 = ({ title, description, tags }) => {
+  const alignment = (tags == null ? void 0 : tags.includes("header-start")) ? "text-xs-left" : "text-xs-center";
+  return /* @__PURE__ */ jsxs28(Fragment10, { children: [
+    title ? /* @__PURE__ */ jsx70(Title2, { as: "h1", type: "title-section", className: `${alignment} m-b-2`, children: title }) : void 0,
+    description ? /* @__PURE__ */ jsx70("p", { className: `${alignment} np-text-body-large`, children: description }) : void 0
+  ] });
+};
 
 // ../renderers/src/TabsRenderer.tsx
 import { Chips, SegmentedControl as SegmentedControl2, Tabs as Tabs2 } from "@transferwise/components";
@@ -3332,13 +3342,13 @@ var shouldUseAvatar = (control, tags) => {
 };
 
 // ../renderers/src/NewListItem/NewDecisionRenderer.tsx
-import { Fragment as Fragment10, jsx as jsx77 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx77 } from "react/jsx-runtime";
 var DecisionRenderer2 = {
   canRenderType: "decision",
   render: (props) => /* @__PURE__ */ jsx77(DecisionWrapper, __spreadProps(__spreadValues({}, props), { renderDecisionList: renderDecisionList2 }))
 };
 var renderDecisionList2 = ({ options, control }) => {
-  return /* @__PURE__ */ jsx77(Fragment10, { children: options.map((_a) => {
+  return /* @__PURE__ */ jsx77(Fragment11, { children: options.map((_a) => {
     var _b = _a, { disabled, onClick } = _b, rest = __objRest(_b, ["disabled", "onClick"]);
     const {
       description,
@@ -3503,12 +3513,12 @@ var getHelpControl = (help) => {
 var NewReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/NewListItem/NewStatusListRenderer.tsx
-import { AvatarView as AvatarView4, Header as Header10, ListItem as ListItem8 } from "@transferwise/components";
+import { AvatarView as AvatarView4, Header as Header11, ListItem as ListItem8 } from "@transferwise/components";
 import { jsx as jsx81, jsxs as jsxs32 } from "react/jsx-runtime";
 var NewStatusListRenderer = {
   canRenderType: "status-list",
   render: ({ margin, items, title }) => /* @__PURE__ */ jsxs32("div", { className: getMargin(margin), children: [
-    title ? /* @__PURE__ */ jsx81(Header10, { title }) : null,
+    title ? /* @__PURE__ */ jsx81(Header11, { title }) : null,
     items.map((item) => {
       const { callToAction, description, icon, status, title: itemTitle } = item;
       return /* @__PURE__ */ jsx81(
@@ -3666,7 +3676,7 @@ var getWiseRenderers = () => [
 ];
 
 // src/dynamicFlow/renderers.ts
-var Header11 = Header7;
+var Header12 = Header7;
 var Media2 = Media;
 var getMargin2 = getMargin;
 var getListItemRenderers2 = getListItemRenderers;
@@ -4029,7 +4039,7 @@ var it_default = {
   "df.wise.filter.noResults": "Nessun risultato",
   "df.wise.filter.placeholder": "Inizia a digitare per cercare",
   "df.wise.filter.results": "Risultati della ricerca",
-  "df.wise.group.all": "Tutte",
+  "df.wise.group.all": "Tutti",
   "df.wise.group.currencies-with-account-details": "Valute con estremi del conto",
   "df.wise.group.popular": "Popolari",
   "df.wise.group.recent": "Recenti"
@@ -4528,7 +4538,7 @@ import {
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "4.35.0" : "0.0.0"
+  typeof process !== "undefined" ? "4.36.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -4699,7 +4709,7 @@ export {
   DynamicFlowLegacy,
   DynamicFlowRevamp,
   DynamicForm,
-  Header11 as Header,
+  Header12 as Header,
   JsonSchemaForm,
   Media2 as Media,
   findRendererPropsByType,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "4.35.0",
+  "version": "4.36.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -43,9 +43,9 @@
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@transferwise/components": "46.112.1",
+    "@transferwise/components": "46.113.1",
     "@transferwise/formatting": "^2.13.4",
-    "@transferwise/icons": "3.22.4",
+    "@transferwise/icons": "4.0.0",
     "@transferwise/neptune-css": "14.25.1",
     "@types/jest": "30.0.0",
     "@types/react": "18.3.26",
@@ -56,6 +56,7 @@
     "currency-flags": "4.0.7",
     "esbuild": "0.25.9",
     "eslint-plugin-storybook": "9.1.15",
+    "framer-motion": "^12.23.22",
     "jest": "30.2.0",
     "jest-environment-jsdom": "30.2.0",
     "jest-fetch-mock": "^3.0.3",
@@ -74,14 +75,14 @@
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
     "tsx": "4.20.6",
     "typescript": "5.9.3",
+    "@wise/dynamic-flow-types": "3.18.0",
     "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-fixtures": "0.0.1",
-    "@wise/dynamic-flow-types": "3.18.0"
+    "@wise/dynamic-flow-fixtures": "0.0.1"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
     "@transferwise/formatting": "^2",
-    "@transferwise/icons": "^3.18.0",
+    "@transferwise/icons": "^3 || ^4",
     "@transferwise/neptune-css": "^14.22.0",
     "@wise/art": "^2.19.0",
     "@wise/components-theming": "^0.7.1 || ^1",
@@ -91,7 +92,7 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-client": "4.20.0",
+    "@wise/dynamic-flow-client": "4.20.1",
     "@wise/dynamic-flow-types": "3.18.0"
   },
   "scripts": {