@wise/dynamic-flow-client-internal 4.28.0 → 4.29.0

package/build/main.css

@@ -358,6 +358,21 @@ button.df-back-btn {
   display: flex;
   flex-direction: column;
 }
+.df-step-fixed__footer {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--size-8) 0;
+  background-color: var(--color-background-screen);
+}
+/* If we're in a drawer, we need to account for the bottom padding on the drawer content */
+.np-drawer-content .df-step-fixed__footer {
+  bottom: -16px;
+}
+.tw-modal-body--scrollable .df-step-fixed__footer {
+  bottom: -24px;
+}
 .chips-container {
   overflow-x: auto;
 }

package/build/main.js

@@ -396,25 +396,25 @@ var isNamedIcon = (name) => {
   const iconName = toCapitalisedCamelCase(name);
   return Object.keys(icons).includes(iconName);
 };
-function NamedIcon({ name }) {
+function NamedIcon({ name, size = 24 }) {
   if (!isNamedIcon(name)) {
     return null;
   }
   const iconName = toCapitalisedCamelCase(name);
   const Icon = icons[iconName];
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { size: 24 });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { size });
 }
 var toCapitalisedCamelCase = (value) => value.split("-").map(capitaliseFirstChar).join("");
 var capitaliseFirstChar = (value) => `${value[0].toUpperCase()}${value.slice(1)}`;
 
 // ../renderers/src/components/icon/DynamicIcon.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function DynamicIcon({ name }) {
+function DynamicIcon({ name, size }) {
   if (isFlagIcon(name)) {
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FlagIcon, { name });
   }
   if (isNamedIcon(name)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NamedIcon, { name });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NamedIcon, { name, size });
   }
   return null;
 }
@@ -436,25 +436,25 @@ var stringToURN = (uri) => {
   const [nameWithRQComponents, _] = uri.split("#");
   const [nameWithRComponent, qComponent] = nameWithRQComponents.split("?=");
   const [name, rComponent] = (_a = nameWithRComponent == null ? void 0 : nameWithRComponent.split("?+")) != null ? _a : ["", ""];
-  const rComponents = rComponent ? (_b = decodeURIComponent(rComponent)) == null ? void 0 : _b.split("&").map((c) => c.split("=")).map(([a, b]) => [a, b]) : void 0;
-  const qComponents = qComponent ? (_c = decodeURIComponent(qComponent)) == null ? void 0 : _c.split("&").map((c) => c.split("=")).map(([a, b]) => [a, b]) : void 0;
+  const rComponents = rComponent ? (_b = decodeURIComponent(rComponent)) == null ? void 0 : _b.split("&").map((c) => c.split("=")).reduce((acc, [key, value]) => __spreadProps(__spreadValues({}, acc), { [key]: value }), {}) : void 0;
+  const qComponents = qComponent ? (_c = decodeURIComponent(qComponent)) == null ? void 0 : _c.split("&").map((c) => c.split("=")).reduce((acc, [key, value]) => __spreadProps(__spreadValues({}, acc), { [key]: value }), {}) : void 0;
   return {
     name,
-    rComponents,
-    qComponents
+    rComponents: rComponents != null ? rComponents : {},
+    qComponents: qComponents != null ? qComponents : {}
   };
 };
 
 // ../renderers/src/components/Media/resolveMediaFromUri.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var resolveMediaFromUri = (uri, size) => {
-  var _a, _b;
-  const { name, qComponents = [] } = stringToURN(uri);
+  const { name, qComponents } = stringToURN(uri);
   if (isValidIconUrn(name)) {
-    const icon = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DynamicIcon_default, { name: name.replace("urn:wise:icons:", "") });
+    const icon = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DynamicIcon_default, { name: name.replace("urn:wise:icons:", ""), size: size === 48 ? 32 : size });
     return {
       icon,
-      backgroundColor: formatColor((_a = qComponents.find(([key]) => key === "background-color")) == null ? void 0 : _a[1])
+      color: formatColor(qComponents["foreground-color"]),
+      backgroundColor: formatColor(qComponents["background-color"])
     };
   }
   if (isUrnFlag(name)) {
@@ -466,7 +466,8 @@ var resolveMediaFromUri = (uri, size) => {
     const text = decodeURI(name.replace("data:text/plain,", ""));
     return {
       asset: text,
-      backgroundColor: formatColor((_b = qComponents.find(([key]) => key === "background-color")) == null ? void 0 : _b[1])
+      color: formatColor(qComponents["foreground-color"]),
+      backgroundColor: formatColor(qComponents["background-color"])
     };
   }
   if (!uri.startsWith("urn:")) {
@@ -502,7 +503,7 @@ var AvatarMedia = ({
   };
   const avatars = content.map(getRenderableAvatar);
   if (avatars.length === 1) {
-    const { badge, backgroundColor, asset, icon } = avatars[0];
+    const { badge, backgroundColor, color, asset, icon } = avatars[0];
     if (!asset && !icon) {
       return null;
     }
@@ -514,15 +515,15 @@ var AvatarMedia = ({
         badge: badge ? __spreadProps(__spreadValues({}, badge), {
           type: "reference"
         }) : void 0,
-        style: { backgroundColor },
+        style: { backgroundColor, color },
         children: icon != null ? icon : asset
       }
     );
   }
-  const avatarsWithoutBadges = avatars.filter(({ asset }) => asset).slice(0, 2).map((_a) => {
-    var _b = _a, { badge } = _b, rest = __objRest(_b, ["badge"]);
-    return __spreadValues({}, rest);
-  });
+  const avatarsWithoutBadges = avatars.filter(({ asset, icon }) => asset || icon).slice(0, 2).map(({ asset, icon, backgroundColor, color }) => ({
+    asset: icon != null ? icon : asset,
+    style: { backgroundColor, color }
+  }));
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_components6.AvatarLayout,
     {
@@ -966,7 +967,8 @@ var FilteredDecisionList = (props) => {
         onChange: (e) => {
           var _a;
           return setQuery((_a = e.target.value) != null ? _a : "");
-        }
+        },
+        className: "m-b-2"
       }
     ),
     isGrouped && query.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GroupedList, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
@@ -1286,9 +1288,8 @@ var import_react7 = require("react");
 
 // ../renderers/src/ImageRenderer/isAnimated.ts
 var isAnimated = (uri) => {
-  var _a;
   const { rComponents } = stringToURN(uri);
-  return (_a = rComponents == null ? void 0 : rComponents.some(([key, value]) => key === "type" && value === "animated")) != null ? _a : false;
+  return rComponents["type"] === "animated";
 };
 
 // ../renderers/src/ImageRenderer/SafeIllustration3D.tsx
@@ -2095,6 +2096,7 @@ function ItemSummaryOption({
       title: item.title,
       content: item.description,
       showMediaAtAllSizes: true,
+      showMediaCircle: false,
       onClick
     }
   );
@@ -2885,15 +2887,17 @@ var StepRenderer = {
   render: StepRendererComponent
 };
 function StepRendererComponent(props) {
-  const { back, description, error, title, children, toolbar } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+  const { back, description, error, title, children, toolbar, footer } = props;
+  const hasFooter = footer && Array.isArray(footer) && footer.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TopBar, { back, toolbar }),
     title || description ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "m-b-4", children: [
       title ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_components46.Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
       description ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "text-xs-center np-text-body-large", children: description }) : void 0
     ] }) : void 0,
     error ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_components46.Alert, { type: "negative", className: "m-b-2", message: error }) : void 0,
-    children
+    children,
+    hasFooter ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "df-step-fixed__footer", children: footer }) : void 0
   ] });
 }
 
@@ -4386,7 +4390,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.28.0" : "0.0.0"
+  typeof process !== "undefined" ? "4.29.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts

package/build/main.mjs

@@ -353,25 +353,25 @@ var isNamedIcon = (name) => {
   const iconName = toCapitalisedCamelCase(name);
   return Object.keys(icons).includes(iconName);
 };
-function NamedIcon({ name }) {
+function NamedIcon({ name, size = 24 }) {
   if (!isNamedIcon(name)) {
     return null;
   }
   const iconName = toCapitalisedCamelCase(name);
   const Icon = icons[iconName];
-  return /* @__PURE__ */ jsx10(Icon, { size: 24 });
+  return /* @__PURE__ */ jsx10(Icon, { size });
 }
 var toCapitalisedCamelCase = (value) => value.split("-").map(capitaliseFirstChar).join("");
 var capitaliseFirstChar = (value) => `${value[0].toUpperCase()}${value.slice(1)}`;
 
 // ../renderers/src/components/icon/DynamicIcon.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
-function DynamicIcon({ name }) {
+function DynamicIcon({ name, size }) {
   if (isFlagIcon(name)) {
     return /* @__PURE__ */ jsx11(FlagIcon, { name });
   }
   if (isNamedIcon(name)) {
-    return /* @__PURE__ */ jsx11(NamedIcon, { name });
+    return /* @__PURE__ */ jsx11(NamedIcon, { name, size });
   }
   return null;
 }
@@ -393,25 +393,25 @@ var stringToURN = (uri) => {
   const [nameWithRQComponents, _] = uri.split("#");
   const [nameWithRComponent, qComponent] = nameWithRQComponents.split("?=");
   const [name, rComponent] = (_a = nameWithRComponent == null ? void 0 : nameWithRComponent.split("?+")) != null ? _a : ["", ""];
-  const rComponents = rComponent ? (_b = decodeURIComponent(rComponent)) == null ? void 0 : _b.split("&").map((c) => c.split("=")).map(([a, b]) => [a, b]) : void 0;
-  const qComponents = qComponent ? (_c = decodeURIComponent(qComponent)) == null ? void 0 : _c.split("&").map((c) => c.split("=")).map(([a, b]) => [a, b]) : void 0;
+  const rComponents = rComponent ? (_b = decodeURIComponent(rComponent)) == null ? void 0 : _b.split("&").map((c) => c.split("=")).reduce((acc, [key, value]) => __spreadProps(__spreadValues({}, acc), { [key]: value }), {}) : void 0;
+  const qComponents = qComponent ? (_c = decodeURIComponent(qComponent)) == null ? void 0 : _c.split("&").map((c) => c.split("=")).reduce((acc, [key, value]) => __spreadProps(__spreadValues({}, acc), { [key]: value }), {}) : void 0;
   return {
     name,
-    rComponents,
-    qComponents
+    rComponents: rComponents != null ? rComponents : {},
+    qComponents: qComponents != null ? qComponents : {}
   };
 };
 
 // ../renderers/src/components/Media/resolveMediaFromUri.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
 var resolveMediaFromUri = (uri, size) => {
-  var _a, _b;
-  const { name, qComponents = [] } = stringToURN(uri);
+  const { name, qComponents } = stringToURN(uri);
   if (isValidIconUrn(name)) {
-    const icon = /* @__PURE__ */ jsx12(DynamicIcon_default, { name: name.replace("urn:wise:icons:", "") });
+    const icon = /* @__PURE__ */ jsx12(DynamicIcon_default, { name: name.replace("urn:wise:icons:", ""), size: size === 48 ? 32 : size });
     return {
       icon,
-      backgroundColor: formatColor((_a = qComponents.find(([key]) => key === "background-color")) == null ? void 0 : _a[1])
+      color: formatColor(qComponents["foreground-color"]),
+      backgroundColor: formatColor(qComponents["background-color"])
     };
   }
   if (isUrnFlag(name)) {
@@ -423,7 +423,8 @@ var resolveMediaFromUri = (uri, size) => {
     const text = decodeURI(name.replace("data:text/plain,", ""));
     return {
       asset: text,
-      backgroundColor: formatColor((_b = qComponents.find(([key]) => key === "background-color")) == null ? void 0 : _b[1])
+      color: formatColor(qComponents["foreground-color"]),
+      backgroundColor: formatColor(qComponents["background-color"])
     };
   }
   if (!uri.startsWith("urn:")) {
@@ -459,7 +460,7 @@ var AvatarMedia = ({
   };
   const avatars = content.map(getRenderableAvatar);
   if (avatars.length === 1) {
-    const { badge, backgroundColor, asset, icon } = avatars[0];
+    const { badge, backgroundColor, color, asset, icon } = avatars[0];
     if (!asset && !icon) {
       return null;
     }
@@ -471,15 +472,15 @@ var AvatarMedia = ({
         badge: badge ? __spreadProps(__spreadValues({}, badge), {
           type: "reference"
         }) : void 0,
-        style: { backgroundColor },
+        style: { backgroundColor, color },
         children: icon != null ? icon : asset
       }
     );
   }
-  const avatarsWithoutBadges = avatars.filter(({ asset }) => asset).slice(0, 2).map((_a) => {
-    var _b = _a, { badge } = _b, rest = __objRest(_b, ["badge"]);
-    return __spreadValues({}, rest);
-  });
+  const avatarsWithoutBadges = avatars.filter(({ asset, icon }) => asset || icon).slice(0, 2).map(({ asset, icon, backgroundColor, color }) => ({
+    asset: icon != null ? icon : asset,
+    style: { backgroundColor, color }
+  }));
   return /* @__PURE__ */ jsx13(
     AvatarLayout,
     {
@@ -923,7 +924,8 @@ var FilteredDecisionList = (props) => {
         onChange: (e) => {
           var _a;
           return setQuery((_a = e.target.value) != null ? _a : "");
-        }
+        },
+        className: "m-b-2"
       }
     ),
     isGrouped && query.length === 0 ? /* @__PURE__ */ jsx25(GroupedList, __spreadValues({}, props)) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
@@ -1246,9 +1248,8 @@ import { useState as useState5 } from "react";
 
 // ../renderers/src/ImageRenderer/isAnimated.ts
 var isAnimated = (uri) => {
-  var _a;
   const { rComponents } = stringToURN(uri);
-  return (_a = rComponents == null ? void 0 : rComponents.some(([key, value]) => key === "type" && value === "animated")) != null ? _a : false;
+  return rComponents["type"] === "animated";
 };
 
 // ../renderers/src/ImageRenderer/SafeIllustration3D.tsx
@@ -2055,6 +2056,7 @@ function ItemSummaryOption({
       title: item.title,
       content: item.description,
       showMediaAtAllSizes: true,
+      showMediaCircle: false,
       onClick
     }
   );
@@ -2839,21 +2841,23 @@ function SplashStepRendererComponent(props) {
 
 // ../renderers/src/step/StepRenderer.tsx
 import { Alert as Alert2, Title as Title2 } from "@transferwise/components";
-import { Fragment as Fragment10, jsx as jsx69, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs28 } from "react/jsx-runtime";
 var StepRenderer = {
   canRenderType: "step",
   render: StepRendererComponent
 };
 function StepRendererComponent(props) {
-  const { back, description, error, title, children, toolbar } = props;
-  return /* @__PURE__ */ jsxs28(Fragment10, { children: [
+  const { back, description, error, title, children, toolbar, footer } = props;
+  const hasFooter = footer && Array.isArray(footer) && footer.length > 0;
+  return /* @__PURE__ */ jsxs28("div", { children: [
     /* @__PURE__ */ jsx69(TopBar, { back, toolbar }),
     title || description ? /* @__PURE__ */ jsxs28("div", { className: "m-b-4", children: [
       title ? /* @__PURE__ */ jsx69(Title2, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
       description ? /* @__PURE__ */ jsx69("p", { className: "text-xs-center np-text-body-large", children: description }) : void 0
     ] }) : void 0,
     error ? /* @__PURE__ */ jsx69(Alert2, { type: "negative", className: "m-b-2", message: error }) : void 0,
-    children
+    children,
+    hasFooter ? /* @__PURE__ */ jsx69("div", { className: "df-step-fixed__footer", children: footer }) : void 0
   ] });
 }
 
@@ -3188,13 +3192,13 @@ var getAdditionalInfo = (additionalInfo) => {
 };
 
 // ../renderers/src/NewListItem/NewDecisionRenderer.tsx
-import { Fragment as Fragment11, jsx as jsx76 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx76 } from "react/jsx-runtime";
 var DecisionRenderer2 = {
   canRenderType: "decision",
   render: (props) => /* @__PURE__ */ jsx76(DecisionWrapper, __spreadProps(__spreadValues({}, props), { renderDecisionList: renderDecisionList2 }))
 };
 var renderDecisionList2 = ({ options, control }) => {
-  return /* @__PURE__ */ jsx76(Fragment11, { children: options.map((option) => {
+  return /* @__PURE__ */ jsx76(Fragment10, { children: options.map((option) => {
     const {
       description,
       disabled,
@@ -4356,7 +4360,7 @@ import {
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "4.28.0" : "0.0.0"
+  typeof process !== "undefined" ? "4.29.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "4.28.0",
+  "version": "4.29.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -74,9 +74,9 @@
     "stylelint-value-no-unknown-custom-properties": "6.0.1",
     "tsx": "4.20.5",
     "typescript": "5.9.2",
-    "@wise/dynamic-flow-fixtures": "0.0.1",
     "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-types": "3.13.0"
+    "@wise/dynamic-flow-types": "3.14.0",
+    "@wise/dynamic-flow-fixtures": "0.0.1"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
@@ -91,8 +91,8 @@
   },
   "dependencies": {
     "classnames": "2.5.1",
-    "@wise/dynamic-flow-client": "4.16.1",
-    "@wise/dynamic-flow-types": "3.13.0"
+    "@wise/dynamic-flow-client": "4.17.0",
+    "@wise/dynamic-flow-types": "3.14.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",