@wise/dynamic-flow-client-internal 5.4.1 → 5.5.0

package/build/main.js

@@ -66,7 +66,7 @@ var require_classnames = __commonJS({
     (function() {
       "use strict";
       var hasOwn = {}.hasOwnProperty;
-      function classNames6() {
+      function classNames7() {
         var classes = "";
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
@@ -84,7 +84,7 @@ var require_classnames = __commonJS({
           return "";
         }
         if (Array.isArray(arg)) {
-          return classNames6.apply(null, arg);
+          return classNames7.apply(null, arg);
         }
         if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
           return arg.toString();
@@ -107,14 +107,14 @@ var require_classnames = __commonJS({
         return value + newClass;
       }
       if (typeof module2 !== "undefined" && module2.exports) {
-        classNames6.default = classNames6;
-        module2.exports = classNames6;
+        classNames7.default = classNames7;
+        module2.exports = classNames7;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames6;
+          return classNames7;
         });
       } else {
-        window.classNames = classNames6;
+        window.classNames = classNames7;
       }
     })();
   }
@@ -144,7 +144,7 @@ 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.4.1" : "0.0.0"
+  typeof process !== "undefined" ? "5.5.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -332,14 +332,14 @@ function AddressValidationButtonComponent(props) {
 var AddressValidationButtonRenderer_default = AddressValidationButtonRenderer;
 
 // ../renderers/src/ButtonRenderer/ButtonRenderer.tsx
-var import_components3 = require("@transferwise/components");
+var import_components6 = require("@transferwise/components");
 
 // ../renderers/src/utils/isButtonPriority.ts
 var validPriorities = ["primary", "secondary", "secondary-neutral", "tertiary"];
 var isButtonPriority = (control) => validPriorities.includes(control);
 
-// ../renderers/src/ButtonRenderer/mapButtonSize.tsx
-var mapButtonSize = (size) => {
+// ../renderers/src/ButtonRenderer/mapLegacyButtonSize.tsx
+var mapLegacyButtonSize = (size) => {
   if (!size) {
     return void 0;
   }
@@ -358,123 +358,15 @@ var mapButtonSize = (size) => {
 
 // ../renderers/src/ButtonRenderer/ButtonRenderer.tsx
 var import_react2 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ButtonRenderer = {
-  canRenderType: "button",
-  render: ButtonComponent
-};
-function ButtonComponent(props) {
-  const { control, context, disabled, margin, title, size, stepLoadingState, onClick } = props;
-  const [spinny, setSpinny] = (0, import_react2.useState)(false);
-  (0, import_react2.useEffect)(() => {
-    if (stepLoadingState === "idle") {
-      setSpinny(false);
-    }
-  }, [stepLoadingState]);
-  const loading = spinny && stepLoadingState !== "idle";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_components3.Button,
-    {
-      v2: true,
-      block: true,
-      className: getMargin(margin),
-      disabled,
-      priority: getPriority(control),
-      loading,
-      size: mapButtonSize(size),
-      sentiment: getSentiment(context),
-      onClick: () => {
-        setSpinny(true);
-        onClick();
-      },
-      children: title
-    }
-  );
-}
-var getSentiment = (context) => context === "negative" ? "negative" : "default";
-var getPriority = (control) => control && isButtonPriority(control) ? control : "secondary";
-
-// ../renderers/src/components/FieldInput.tsx
-var import_components5 = require("@transferwise/components");
-
-// ../renderers/src/components/Help.tsx
-var import_components4 = require("@transferwise/components");
-var import_react_intl4 = require("react-intl");
-
-// ../renderers/src/messages/help.messages.ts
-var import_react_intl3 = require("react-intl");
-var help_messages_default = (0, import_react_intl3.defineMessages)({
-  helpAria: {
-    id: "df.wise.Help.ariaLabel",
-    defaultMessage: "Click here for more info.",
-    description: "Aria label for help."
-  }
-});
-
-// ../renderers/src/components/Help.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function Help({ help, onClick }) {
-  const intl = (0, import_react_intl4.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_components4.Info,
-    {
-      content: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Markdown, { config: { link: { target: "_blank" } }, children: help }),
-      presentation: "POPOVER",
-      size: "sm",
-      "aria-label": intl.formatMessage(help_messages_default.helpAria),
-      onClick
-    }
-  );
-}
-var Help_default = Help;
-
-// ../renderers/src/components/LabelContentWithHelp.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function LabelContentWithHelp({ text, help }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-    text,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Help_default, { help })
-  ] });
-}
-
-// ../renderers/src/components/FieldInput.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function FieldInput({ id, children, label, validation, description, help }) {
-  const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LabelContentWithHelp, { text: label, help }) : label;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_components5.Field,
-    {
-      id,
-      label: labelContent,
-      description,
-      message: validation == null ? void 0 : validation.message,
-      sentiment: mapStatusToSentiment(validation),
-      children
-    }
-  );
-}
-var mapStatusToSentiment = (validation) => {
-  if (validation) {
-    if (validation.status === "valid") {
-      return "positive";
-    }
-    return "negative";
-  }
-  return void 0;
-};
-var FieldInput_default = FieldInput;
-
-// ../renderers/src/CheckboxInputRenderer.tsx
-var import_components11 = require("@transferwise/components");
 
 // ../renderers/src/utils/UrnFlag.tsx
 var import_art = require("@wise/art");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var countryUrnPrefix = "urn:wise:countries:";
 var currencyUrnPrefix = "urn:wise:currencies:";
 var isUrnFlag = (uri) => (uri.startsWith(countryUrnPrefix) || uri.startsWith(currencyUrnPrefix)) && uri.endsWith(":image");
 function UrnFlag({ size, urn }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_art.Flag, { code: getCode(urn), intrinsicSize: size });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_art.Flag, { code: getCode(urn), intrinsicSize: size });
 }
 var getCode = (urn) => {
   return urn.replace(countryUrnPrefix, "").replace(currencyUrnPrefix, "").replace(":image", "").split("?")[0];
@@ -482,19 +374,19 @@ var getCode = (urn) => {
 
 // ../renderers/src/components/icon/FlagIcon.tsx
 var import_art2 = require("@wise/art");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var isFlagIcon = (name) => name.startsWith("flag-");
 function FlagIcon({ name }) {
   if (!isFlagIcon(name)) {
     return null;
   }
   const code = name.substring(5);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_art2.Flag, { code, intrinsicSize: 24 });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_art2.Flag, { code, intrinsicSize: 24 });
 }
 
 // ../renderers/src/components/icon/NamedIcon.tsx
 var icons = __toESM(require("@transferwise/icons"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var isNamedIcon = (name) => {
   const iconName = toCapitalisedCamelCase(name);
   return Object.keys(icons).includes(iconName);
@@ -505,19 +397,19 @@ function NamedIcon({ name, size = 24 }) {
   }
   const iconName = toCapitalisedCamelCase(name);
   const Icon = icons[iconName];
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { size });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.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");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function DynamicIcon({ name, size }) {
   if (isFlagIcon(name)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FlagIcon, { name });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FlagIcon, { name });
   }
   if (isNamedIcon(name)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NamedIcon, { name, size });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NamedIcon, { name, size });
   }
   return null;
 }
@@ -549,11 +441,11 @@ var stringToURN = (uri) => {
 };
 
 // ../renderers/src/components/Media/resolveMediaFromUri.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var resolveMediaFromUri = (uri, size) => {
   const { name, qComponents } = stringToURN(uri);
   if (isValidIconUrn(name)) {
-    const icon = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DynamicIcon_default, { name: name.replace("urn:wise:icons:", ""), size: size === 48 ? 32 : size });
+    const icon = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DynamicIcon_default, { name: name.replace("urn:wise:icons:", ""), size: size === 48 ? 32 : size });
     return {
       icon,
       color: formatColor(qComponents["foreground-color"]),
@@ -562,7 +454,7 @@ var resolveMediaFromUri = (uri, size) => {
   }
   if (isUrnFlag(name)) {
     return {
-      asset: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(UrnFlag, { urn: name, size })
+      asset: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(UrnFlag, { urn: name, size })
     };
   }
   if (name.startsWith("data:text/plain,")) {
@@ -574,7 +466,7 @@ var resolveMediaFromUri = (uri, size) => {
     };
   }
   if (!uri.startsWith("urn:")) {
-    return { asset: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { src: uri, alt: "", width: `${size}px` }) };
+    return { asset: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { src: uri, alt: "", width: `${size}px` }) };
   }
   return { asset: void 0 };
 };
@@ -589,8 +481,8 @@ var formatColor = (color) => {
 };
 
 // ../renderers/src/components/Media/AvatarMedia.tsx
-var import_components6 = require("@transferwise/components");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_components3 = require("@transferwise/components");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var AvatarMedia = ({
   accessibilityDescription,
   content,
@@ -613,8 +505,8 @@ var AvatarMedia = ({
     if (!asset && !icon) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_components6.AvatarView,
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_components3.AvatarView,
       {
         "aria-label": accessibilityDescription,
         size,
@@ -628,8 +520,8 @@ var AvatarMedia = ({
     asset: icon != null ? icon : asset,
     style: { backgroundColor, color }
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_components6.AvatarLayout,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_components3.AvatarLayout,
     {
       "aria-label": accessibilityDescription,
       size,
@@ -647,7 +539,7 @@ var getBadge = ({
 }) => {
   if (backgroundColor || color) {
     return {
-      asset: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      asset: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "div",
         {
           className: "d-flex align-items-center justify-content-center",
@@ -669,12 +561,12 @@ var getBadge = ({
 };
 
 // ../renderers/src/utils/image-utils.tsx
-var import_components7 = require("@transferwise/components");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_components4 = require("@transferwise/components");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var getBadgedMedia = (iconNode, imageNode, size) => {
   if (iconNode && imageNode) {
     if (imageNode && iconNode) {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_components7.AvatarView, { size, badge: { asset: iconNode, type: "reference" }, children: imageNode });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components4.AvatarView, { size, badge: { asset: iconNode, type: "reference" }, children: imageNode });
     }
   }
   return null;
@@ -682,7 +574,7 @@ var getBadgedMedia = (iconNode, imageNode, size) => {
 var getIconNode = (icon) => {
   if (icon) {
     if ("name" in icon) {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DynamicIcon_default, { name: icon.name });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DynamicIcon_default, { name: icon.name });
     }
     if (icon.text) {
       return icon.text;
@@ -694,18 +586,18 @@ var getImageNode = (image, size) => {
   if (image) {
     const { accessibilityDescription, uri } = image;
     if (!uri.startsWith("urn:")) {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src: uri, alt: accessibilityDescription, width: `${size}px` });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src: uri, alt: accessibilityDescription, width: `${size}px` });
     }
     if (isUrnFlag(uri)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(UrnFlag, { urn: uri, accessibilityDescription, size });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(UrnFlag, { urn: uri, accessibilityDescription, size });
     }
   }
   return null;
 };
 
 // ../renderers/src/components/Media/LegacyMedia.tsx
-var import_components8 = require("@transferwise/components");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_components5 = require("@transferwise/components");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var LegacyMedia = ({ image, icon, preferAvatar, size }) => {
   const imageNode = getImageNode(image, size);
   const iconNode = getIconNode(icon);
@@ -714,11 +606,11 @@ var LegacyMedia = ({ image, icon, preferAvatar, size }) => {
     return badge;
   }
   if (imageNode) {
-    return preferAvatar ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_components8.AvatarView, { children: imageNode }) : imageNode;
+    return preferAvatar ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_components5.AvatarView, { children: imageNode }) : imageNode;
   }
   if (iconNode && icon) {
     if ("text" in icon || size === 48) {
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_components8.AvatarView, { size, children: iconNode });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_components5.AvatarView, { size, children: iconNode });
     }
     return iconNode;
   }
@@ -726,17 +618,17 @@ var LegacyMedia = ({ image, icon, preferAvatar, size }) => {
 };
 
 // ../renderers/src/components/Media/Media.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var Media = ({ media, preferAvatar = false, size }) => {
   switch (media == null ? void 0 : media.type) {
     case "avatar":
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AvatarMedia, __spreadProps(__spreadValues({}, media), { size }));
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AvatarMedia, __spreadProps(__spreadValues({}, media), { size }));
     case "image": {
       const { asset, icon } = resolveMediaFromUri(media.uri, size);
       return icon != null ? icon : asset;
     }
     case "legacy": {
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LegacyMedia, __spreadProps(__spreadValues({}, media), { preferAvatar, size }));
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LegacyMedia, __spreadProps(__spreadValues({}, media), { preferAvatar, size }));
     }
     default:
       return null;
@@ -744,15 +636,158 @@ var Media = ({ media, preferAvatar = false, size }) => {
 };
 
 // ../renderers/src/components/Media/OptionMedia.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var mediaSize = 48;
 function OptionMedia(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Media, __spreadProps(__spreadValues({}, props), { size: mediaSize }));
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Media, __spreadProps(__spreadValues({}, props), { size: mediaSize }));
 }
 
 // ../renderers/src/components/Media/getInlineMedia.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var getInlineMedia = (media) => media ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Media, { media, preferAvatar: false, size: 24 }) : null;
+
+// ../renderers/src/components/Media/getAddonStartMedia.ts
+var getAddonStartMedia = (media) => {
+  if (media.type === "avatar") {
+    if (media.content.length > 0 && media.content[0].type === "uri" && isValidIconUrn(media.content[0].uri)) {
+      return {
+        type: "icon",
+        value: getInlineMedia({
+          type: "image",
+          uri: media.content[0].uri
+        })
+      };
+    }
+    return void 0;
+  }
+  return { type: "icon", value: getInlineMedia(media) };
+};
+
+// ../renderers/src/ButtonRenderer/ButtonRenderer.tsx
+var import_classnames2 = __toESM(require_classnames());
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ButtonRenderer = {
+  canRenderType: "button",
+  render: ButtonComponent
+};
+function ButtonComponent(props) {
+  const {
+    control,
+    context,
+    disabled,
+    margin,
+    media,
+    tags,
+    title,
+    size,
+    stepLoadingState,
+    onClick
+  } = props;
+  const [spinny, setSpinny] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    if (stepLoadingState === "idle") {
+      setSpinny(false);
+    }
+  }, [stepLoadingState]);
+  const loading = spinny && stepLoadingState !== "idle";
+  const buttonProps = {
+    v2: true,
+    block: control !== "small",
+    className: (0, import_classnames2.default)(getMargin(margin), { "d-block": control === "small" }),
+    addonStart: control === "small" && media ? getAddonStartMedia(media) : void 0,
+    disabled,
+    priority: getPriority(control, tags),
+    loading,
+    size: control === "small" ? "sm" : mapLegacyButtonSize(size),
+    sentiment: getSentiment(context),
+    onClick: () => {
+      setSpinny(true);
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_components6.Button, __spreadProps(__spreadValues({}, buttonProps), { children: title }));
+}
+var getSentiment = (context) => context === "negative" ? "negative" : "default";
+var getPriority = (control, tags) => {
+  const tagPriority = tags == null ? void 0 : tags.find((tag) => isButtonPriority(tag));
+  if (tagPriority) {
+    return tagPriority;
+  }
+  return control && isButtonPriority(control) ? control : "secondary";
+};
+
+// ../renderers/src/components/FieldInput.tsx
+var import_components8 = require("@transferwise/components");
+
+// ../renderers/src/components/Help.tsx
+var import_components7 = require("@transferwise/components");
+var import_react_intl4 = require("react-intl");
+
+// ../renderers/src/messages/help.messages.ts
+var import_react_intl3 = require("react-intl");
+var help_messages_default = (0, import_react_intl3.defineMessages)({
+  helpAria: {
+    id: "df.wise.Help.ariaLabel",
+    defaultMessage: "Click here for more info.",
+    description: "Aria label for help."
+  }
+});
+
+// ../renderers/src/components/Help.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Help({ help, onClick }) {
+  const intl = (0, import_react_intl4.useIntl)();
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_components7.Info,
+    {
+      content: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components7.Markdown, { config: { link: { target: "_blank" } }, children: help }),
+      presentation: "POPOVER",
+      size: "sm",
+      "aria-label": intl.formatMessage(help_messages_default.helpAria),
+      onClick
+    }
+  );
+}
+var Help_default = Help;
+
+// ../renderers/src/components/LabelContentWithHelp.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function LabelContentWithHelp({ text, help }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
+    text,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Help_default, { help })
+  ] });
+}
+
+// ../renderers/src/components/FieldInput.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var getInlineMedia = (media) => media ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Media, { media, preferAvatar: false, size: 24 }) : null;
+function FieldInput({ id, children, label, validation, description, help }) {
+  const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LabelContentWithHelp, { text: label, help }) : label;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_components8.Field,
+    {
+      id,
+      label: labelContent,
+      description,
+      message: validation == null ? void 0 : validation.message,
+      sentiment: mapStatusToSentiment(validation),
+      children
+    }
+  );
+}
+var mapStatusToSentiment = (validation) => {
+  if (validation) {
+    if (validation.status === "valid") {
+      return "positive";
+    }
+    return "negative";
+  }
+  return void 0;
+};
+var FieldInput_default = FieldInput;
+
+// ../renderers/src/CheckboxInputRenderer.tsx
+var import_components11 = require("@transferwise/components");
 
 // ../renderers/src/utils/listItem/getMedia.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -878,14 +913,14 @@ var getInlineAlertOrValidation = (validationState, inlineAlert) => {
 var CheckboxInputRenderer_default = CheckboxInputRenderer;
 
 // ../renderers/src/ColumnsRenderer.tsx
-var import_classnames2 = __toESM(require_classnames());
+var import_classnames3 = __toESM(require_classnames());
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var ColumnsRenderer = {
   canRenderType: "columns",
   render: ({ bias, margin, startChildren, endChildren }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
-      className: (0, import_classnames2.default)("df-columns-renderer-container", getMargin(margin), {
+      className: (0, import_classnames3.default)("df-columns-renderer-container", getMargin(margin), {
         "df-columns-renderer-bias-start": bias === "start",
         "df-columns-renderer-bias-end": bias === "end"
       }),
@@ -1806,7 +1841,7 @@ var import_components27 = require("@transferwise/components");
 
 // ../renderers/src/components/UploadFieldInput.tsx
 var import_components26 = require("@transferwise/components");
-var import_classnames3 = __toESM(require_classnames());
+var import_classnames4 = __toESM(require_classnames());
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function UploadFieldInput({
   id,
@@ -1821,7 +1856,7 @@ function UploadFieldInput({
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
-      className: (0, import_classnames3.default)("form-group d-block", {
+      className: (0, import_classnames4.default)("form-group d-block", {
         "has-error": (validation == null ? void 0 : validation.status) === "invalid"
       }),
       children: [
@@ -1980,7 +2015,7 @@ function useSnackBarIfAvailable() {
 
 // ../renderers/src/ParagraphRenderer.tsx
 var import_components30 = require("@transferwise/components");
-var import_classnames4 = __toESM(require_classnames());
+var import_classnames5 = __toESM(require_classnames());
 
 // ../renderers/src/messages/paragraph.messages.ts
 var import_react_intl11 = require("react-intl");
@@ -2032,7 +2067,7 @@ function CopyableParagraph({
         type: "text",
         value: text,
         readOnly: true,
-        className: (0, import_classnames4.default)("text-ellipsis", inputAlignmentClasses)
+        className: (0, import_classnames5.default)("text-ellipsis", inputAlignmentClasses)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_components30.Button, { v2: true, block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
@@ -2043,7 +2078,7 @@ var ParagraphRenderer_default = ParagraphRenderer;
 // ../renderers/src/RepeatableRenderer.tsx
 var import_components31 = require("@transferwise/components");
 var import_icons = require("@transferwise/icons");
-var import_classnames5 = __toESM(require_classnames());
+var import_classnames6 = __toESM(require_classnames());
 var import_react11 = require("react");
 var import_react_intl14 = require("react-intl");
 
@@ -2121,7 +2156,7 @@ function Repeatable(props) {
     /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       "div",
       {
-        className: (0, import_classnames5.default)("form-group", {
+        className: (0, import_classnames6.default)("form-group", {
           "has-error": (validationState == null ? void 0 : validationState.status) === "invalid"
         }),
         children: [
@@ -2807,14 +2842,14 @@ function MediaToolbarButton(props) {
       onClick,
       children: [
         accessibilityDescription ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "sr-only", children: accessibilityDescription }) : null,
-        media ? (_a = getAddonStart(media)) == null ? void 0 : _a.value : null
+        media ? (_a = getAddonStartMedia(media)) == null ? void 0 : _a.value : null
       ]
     }
   );
 }
 function TextToolbarButton(props) {
   const { context, control, title, media, disabled, onClick } = props;
-  const addonStart = media ? getAddonStart(media) : void 0;
+  const addonStart = media ? getAddonStartMedia(media) : void 0;
   const priority = getPriority2(control);
   const sentiment = getSentiment2(context);
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
@@ -2832,21 +2867,6 @@ function TextToolbarButton(props) {
     }
   );
 }
-var getAddonStart = (media) => {
-  if (media.type === "avatar") {
-    if (media.content.length > 0 && media.content[0].type === "uri" && isValidIconUrn(media.content[0].uri)) {
-      return {
-        type: "icon",
-        value: getInlineMedia({
-          type: "image",
-          uri: media.content[0].uri
-        })
-      };
-    }
-    return void 0;
-  }
-  return { type: "icon", value: getInlineMedia(media) };
-};
 var getPriority2 = (control) => isKnownControl(control) ? control : "secondary";
 var prefersMedia = (control) => {
   return false;

package/build/main.mjs

@@ -60,7 +60,7 @@ var require_classnames = __commonJS({
     (function() {
       "use strict";
       var hasOwn = {}.hasOwnProperty;
-      function classNames6() {
+      function classNames7() {
         var classes = "";
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
@@ -78,7 +78,7 @@ var require_classnames = __commonJS({
           return "";
         }
         if (Array.isArray(arg)) {
-          return classNames6.apply(null, arg);
+          return classNames7.apply(null, arg);
         }
         if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
           return arg.toString();
@@ -101,14 +101,14 @@ var require_classnames = __commonJS({
         return value + newClass;
       }
       if (typeof module !== "undefined" && module.exports) {
-        classNames6.default = classNames6;
-        module.exports = classNames6;
+        classNames7.default = classNames7;
+        module.exports = classNames7;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames6;
+          return classNames7;
         });
       } else {
-        window.classNames = classNames6;
+        window.classNames = classNames7;
       }
     })();
   }
@@ -126,7 +126,7 @@ 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.4.1" : "0.0.0"
+  typeof process !== "undefined" ? "5.5.0" : "0.0.0"
 );
 
 // src/dynamicFlow/telemetry/getLogEvent.ts
@@ -320,8 +320,8 @@ import { Button as Button2 } from "@transferwise/components";
 var validPriorities = ["primary", "secondary", "secondary-neutral", "tertiary"];
 var isButtonPriority = (control) => validPriorities.includes(control);
 
-// ../renderers/src/ButtonRenderer/mapButtonSize.tsx
-var mapButtonSize = (size) => {
+// ../renderers/src/ButtonRenderer/mapLegacyButtonSize.tsx
+var mapLegacyButtonSize = (size) => {
   if (!size) {
     return void 0;
   }
@@ -340,123 +340,15 @@ var mapButtonSize = (size) => {
 
 // ../renderers/src/ButtonRenderer/ButtonRenderer.tsx
 import { useEffect as useEffect2, useState as useState2 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var ButtonRenderer = {
-  canRenderType: "button",
-  render: ButtonComponent
-};
-function ButtonComponent(props) {
-  const { control, context, disabled, margin, title, size, stepLoadingState, onClick } = props;
-  const [spinny, setSpinny] = useState2(false);
-  useEffect2(() => {
-    if (stepLoadingState === "idle") {
-      setSpinny(false);
-    }
-  }, [stepLoadingState]);
-  const loading = spinny && stepLoadingState !== "idle";
-  return /* @__PURE__ */ jsx4(
-    Button2,
-    {
-      v2: true,
-      block: true,
-      className: getMargin(margin),
-      disabled,
-      priority: getPriority(control),
-      loading,
-      size: mapButtonSize(size),
-      sentiment: getSentiment(context),
-      onClick: () => {
-        setSpinny(true);
-        onClick();
-      },
-      children: title
-    }
-  );
-}
-var getSentiment = (context) => context === "negative" ? "negative" : "default";
-var getPriority = (control) => control && isButtonPriority(control) ? control : "secondary";
-
-// ../renderers/src/components/FieldInput.tsx
-import { Field } from "@transferwise/components";
-
-// ../renderers/src/components/Help.tsx
-import { Info, Markdown } from "@transferwise/components";
-import { useIntl as useIntl2 } from "react-intl";
-
-// ../renderers/src/messages/help.messages.ts
-import { defineMessages as defineMessages2 } from "react-intl";
-var help_messages_default = defineMessages2({
-  helpAria: {
-    id: "df.wise.Help.ariaLabel",
-    defaultMessage: "Click here for more info.",
-    description: "Aria label for help."
-  }
-});
-
-// ../renderers/src/components/Help.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function Help({ help, onClick }) {
-  const intl = useIntl2();
-  return /* @__PURE__ */ jsx5(
-    Info,
-    {
-      content: /* @__PURE__ */ jsx5(Markdown, { config: { link: { target: "_blank" } }, children: help }),
-      presentation: "POPOVER",
-      size: "sm",
-      "aria-label": intl.formatMessage(help_messages_default.helpAria),
-      onClick
-    }
-  );
-}
-var Help_default = Help;
-
-// ../renderers/src/components/LabelContentWithHelp.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
-function LabelContentWithHelp({ text, help }) {
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    text,
-    /* @__PURE__ */ jsx6(Help_default, { help })
-  ] });
-}
-
-// ../renderers/src/components/FieldInput.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function FieldInput({ id, children, label, validation, description, help }) {
-  const labelContent = label && help ? /* @__PURE__ */ jsx7(LabelContentWithHelp, { text: label, help }) : label;
-  return /* @__PURE__ */ jsx7(
-    Field,
-    {
-      id,
-      label: labelContent,
-      description,
-      message: validation == null ? void 0 : validation.message,
-      sentiment: mapStatusToSentiment(validation),
-      children
-    }
-  );
-}
-var mapStatusToSentiment = (validation) => {
-  if (validation) {
-    if (validation.status === "valid") {
-      return "positive";
-    }
-    return "negative";
-  }
-  return void 0;
-};
-var FieldInput_default = FieldInput;
-
-// ../renderers/src/CheckboxInputRenderer.tsx
-import { Checkbox, ListItem as ListItem3 } from "@transferwise/components";
 
 // ../renderers/src/utils/UrnFlag.tsx
 import { Flag } from "@wise/art";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var countryUrnPrefix = "urn:wise:countries:";
 var currencyUrnPrefix = "urn:wise:currencies:";
 var isUrnFlag = (uri) => (uri.startsWith(countryUrnPrefix) || uri.startsWith(currencyUrnPrefix)) && uri.endsWith(":image");
 function UrnFlag({ size, urn }) {
-  return /* @__PURE__ */ jsx8(Flag, { code: getCode(urn), intrinsicSize: size });
+  return /* @__PURE__ */ jsx4(Flag, { code: getCode(urn), intrinsicSize: size });
 }
 var getCode = (urn) => {
   return urn.replace(countryUrnPrefix, "").replace(currencyUrnPrefix, "").replace(":image", "").split("?")[0];
@@ -464,19 +356,19 @@ var getCode = (urn) => {
 
 // ../renderers/src/components/icon/FlagIcon.tsx
 import { Flag as Flag2 } from "@wise/art";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var isFlagIcon = (name) => name.startsWith("flag-");
 function FlagIcon({ name }) {
   if (!isFlagIcon(name)) {
     return null;
   }
   const code = name.substring(5);
-  return /* @__PURE__ */ jsx9(Flag2, { code, intrinsicSize: 24 });
+  return /* @__PURE__ */ jsx5(Flag2, { code, intrinsicSize: 24 });
 }
 
 // ../renderers/src/components/icon/NamedIcon.tsx
 import * as icons from "@transferwise/icons";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var isNamedIcon = (name) => {
   const iconName = toCapitalisedCamelCase(name);
   return Object.keys(icons).includes(iconName);
@@ -487,19 +379,19 @@ function NamedIcon({ name, size = 24 }) {
   }
   const iconName = toCapitalisedCamelCase(name);
   const Icon = icons[iconName];
-  return /* @__PURE__ */ jsx10(Icon, { size });
+  return /* @__PURE__ */ jsx6(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";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function DynamicIcon({ name, size }) {
   if (isFlagIcon(name)) {
-    return /* @__PURE__ */ jsx11(FlagIcon, { name });
+    return /* @__PURE__ */ jsx7(FlagIcon, { name });
   }
   if (isNamedIcon(name)) {
-    return /* @__PURE__ */ jsx11(NamedIcon, { name, size });
+    return /* @__PURE__ */ jsx7(NamedIcon, { name, size });
   }
   return null;
 }
@@ -531,11 +423,11 @@ var stringToURN = (uri) => {
 };
 
 // ../renderers/src/components/Media/resolveMediaFromUri.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var resolveMediaFromUri = (uri, size) => {
   const { name, qComponents } = stringToURN(uri);
   if (isValidIconUrn(name)) {
-    const icon = /* @__PURE__ */ jsx12(DynamicIcon_default, { name: name.replace("urn:wise:icons:", ""), size: size === 48 ? 32 : size });
+    const icon = /* @__PURE__ */ jsx8(DynamicIcon_default, { name: name.replace("urn:wise:icons:", ""), size: size === 48 ? 32 : size });
     return {
       icon,
       color: formatColor(qComponents["foreground-color"]),
@@ -544,7 +436,7 @@ var resolveMediaFromUri = (uri, size) => {
   }
   if (isUrnFlag(name)) {
     return {
-      asset: /* @__PURE__ */ jsx12(UrnFlag, { urn: name, size })
+      asset: /* @__PURE__ */ jsx8(UrnFlag, { urn: name, size })
     };
   }
   if (name.startsWith("data:text/plain,")) {
@@ -556,7 +448,7 @@ var resolveMediaFromUri = (uri, size) => {
     };
   }
   if (!uri.startsWith("urn:")) {
-    return { asset: /* @__PURE__ */ jsx12("img", { src: uri, alt: "", width: `${size}px` }) };
+    return { asset: /* @__PURE__ */ jsx8("img", { src: uri, alt: "", width: `${size}px` }) };
   }
   return { asset: void 0 };
 };
@@ -572,7 +464,7 @@ var formatColor = (color) => {
 
 // ../renderers/src/components/Media/AvatarMedia.tsx
 import { AvatarLayout, AvatarView } from "@transferwise/components";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var AvatarMedia = ({
   accessibilityDescription,
   content,
@@ -595,7 +487,7 @@ var AvatarMedia = ({
     if (!asset && !icon) {
       return null;
     }
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx9(
       AvatarView,
       {
         "aria-label": accessibilityDescription,
@@ -610,7 +502,7 @@ var AvatarMedia = ({
     asset: icon != null ? icon : asset,
     style: { backgroundColor, color }
   }));
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx9(
     AvatarLayout,
     {
       "aria-label": accessibilityDescription,
@@ -629,7 +521,7 @@ var getBadge = ({
 }) => {
   if (backgroundColor || color) {
     return {
-      asset: /* @__PURE__ */ jsx13(
+      asset: /* @__PURE__ */ jsx9(
         "div",
         {
           className: "d-flex align-items-center justify-content-center",
@@ -652,11 +544,11 @@ var getBadge = ({
 
 // ../renderers/src/utils/image-utils.tsx
 import { AvatarView as AvatarView2 } from "@transferwise/components";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var getBadgedMedia = (iconNode, imageNode, size) => {
   if (iconNode && imageNode) {
     if (imageNode && iconNode) {
-      return /* @__PURE__ */ jsx14(AvatarView2, { size, badge: { asset: iconNode, type: "reference" }, children: imageNode });
+      return /* @__PURE__ */ jsx10(AvatarView2, { size, badge: { asset: iconNode, type: "reference" }, children: imageNode });
     }
   }
   return null;
@@ -664,7 +556,7 @@ var getBadgedMedia = (iconNode, imageNode, size) => {
 var getIconNode = (icon) => {
   if (icon) {
     if ("name" in icon) {
-      return /* @__PURE__ */ jsx14(DynamicIcon_default, { name: icon.name });
+      return /* @__PURE__ */ jsx10(DynamicIcon_default, { name: icon.name });
     }
     if (icon.text) {
       return icon.text;
@@ -676,10 +568,10 @@ var getImageNode = (image, size) => {
   if (image) {
     const { accessibilityDescription, uri } = image;
     if (!uri.startsWith("urn:")) {
-      return /* @__PURE__ */ jsx14("img", { src: uri, alt: accessibilityDescription, width: `${size}px` });
+      return /* @__PURE__ */ jsx10("img", { src: uri, alt: accessibilityDescription, width: `${size}px` });
     }
     if (isUrnFlag(uri)) {
-      return /* @__PURE__ */ jsx14(UrnFlag, { urn: uri, accessibilityDescription, size });
+      return /* @__PURE__ */ jsx10(UrnFlag, { urn: uri, accessibilityDescription, size });
     }
   }
   return null;
@@ -687,7 +579,7 @@ var getImageNode = (image, size) => {
 
 // ../renderers/src/components/Media/LegacyMedia.tsx
 import { AvatarView as AvatarView3 } from "@transferwise/components";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var LegacyMedia = ({ image, icon, preferAvatar, size }) => {
   const imageNode = getImageNode(image, size);
   const iconNode = getIconNode(icon);
@@ -696,11 +588,11 @@ var LegacyMedia = ({ image, icon, preferAvatar, size }) => {
     return badge;
   }
   if (imageNode) {
-    return preferAvatar ? /* @__PURE__ */ jsx15(AvatarView3, { children: imageNode }) : imageNode;
+    return preferAvatar ? /* @__PURE__ */ jsx11(AvatarView3, { children: imageNode }) : imageNode;
   }
   if (iconNode && icon) {
     if ("text" in icon || size === 48) {
-      return /* @__PURE__ */ jsx15(AvatarView3, { size, children: iconNode });
+      return /* @__PURE__ */ jsx11(AvatarView3, { size, children: iconNode });
     }
     return iconNode;
   }
@@ -708,17 +600,17 @@ var LegacyMedia = ({ image, icon, preferAvatar, size }) => {
 };
 
 // ../renderers/src/components/Media/Media.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Media = ({ media, preferAvatar = false, size }) => {
   switch (media == null ? void 0 : media.type) {
     case "avatar":
-      return /* @__PURE__ */ jsx16(AvatarMedia, __spreadProps(__spreadValues({}, media), { size }));
+      return /* @__PURE__ */ jsx12(AvatarMedia, __spreadProps(__spreadValues({}, media), { size }));
     case "image": {
       const { asset, icon } = resolveMediaFromUri(media.uri, size);
       return icon != null ? icon : asset;
     }
     case "legacy": {
-      return /* @__PURE__ */ jsx16(LegacyMedia, __spreadProps(__spreadValues({}, media), { preferAvatar, size }));
+      return /* @__PURE__ */ jsx12(LegacyMedia, __spreadProps(__spreadValues({}, media), { preferAvatar, size }));
     }
     default:
       return null;
@@ -726,15 +618,158 @@ var Media = ({ media, preferAvatar = false, size }) => {
 };
 
 // ../renderers/src/components/Media/OptionMedia.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var mediaSize = 48;
 function OptionMedia(props) {
-  return /* @__PURE__ */ jsx17(Media, __spreadProps(__spreadValues({}, props), { size: mediaSize }));
+  return /* @__PURE__ */ jsx13(Media, __spreadProps(__spreadValues({}, props), { size: mediaSize }));
 }
 
 // ../renderers/src/components/Media/getInlineMedia.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var getInlineMedia = (media) => media ? /* @__PURE__ */ jsx14(Media, { media, preferAvatar: false, size: 24 }) : null;
+
+// ../renderers/src/components/Media/getAddonStartMedia.ts
+var getAddonStartMedia = (media) => {
+  if (media.type === "avatar") {
+    if (media.content.length > 0 && media.content[0].type === "uri" && isValidIconUrn(media.content[0].uri)) {
+      return {
+        type: "icon",
+        value: getInlineMedia({
+          type: "image",
+          uri: media.content[0].uri
+        })
+      };
+    }
+    return void 0;
+  }
+  return { type: "icon", value: getInlineMedia(media) };
+};
+
+// ../renderers/src/ButtonRenderer/ButtonRenderer.tsx
+var import_classnames2 = __toESM(require_classnames());
+import { jsx as jsx15 } from "react/jsx-runtime";
+var ButtonRenderer = {
+  canRenderType: "button",
+  render: ButtonComponent
+};
+function ButtonComponent(props) {
+  const {
+    control,
+    context,
+    disabled,
+    margin,
+    media,
+    tags,
+    title,
+    size,
+    stepLoadingState,
+    onClick
+  } = props;
+  const [spinny, setSpinny] = useState2(false);
+  useEffect2(() => {
+    if (stepLoadingState === "idle") {
+      setSpinny(false);
+    }
+  }, [stepLoadingState]);
+  const loading = spinny && stepLoadingState !== "idle";
+  const buttonProps = {
+    v2: true,
+    block: control !== "small",
+    className: (0, import_classnames2.default)(getMargin(margin), { "d-block": control === "small" }),
+    addonStart: control === "small" && media ? getAddonStartMedia(media) : void 0,
+    disabled,
+    priority: getPriority(control, tags),
+    loading,
+    size: control === "small" ? "sm" : mapLegacyButtonSize(size),
+    sentiment: getSentiment(context),
+    onClick: () => {
+      setSpinny(true);
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsx15(Button2, __spreadProps(__spreadValues({}, buttonProps), { children: title }));
+}
+var getSentiment = (context) => context === "negative" ? "negative" : "default";
+var getPriority = (control, tags) => {
+  const tagPriority = tags == null ? void 0 : tags.find((tag) => isButtonPriority(tag));
+  if (tagPriority) {
+    return tagPriority;
+  }
+  return control && isButtonPriority(control) ? control : "secondary";
+};
+
+// ../renderers/src/components/FieldInput.tsx
+import { Field } from "@transferwise/components";
+
+// ../renderers/src/components/Help.tsx
+import { Info, Markdown } from "@transferwise/components";
+import { useIntl as useIntl2 } from "react-intl";
+
+// ../renderers/src/messages/help.messages.ts
+import { defineMessages as defineMessages2 } from "react-intl";
+var help_messages_default = defineMessages2({
+  helpAria: {
+    id: "df.wise.Help.ariaLabel",
+    defaultMessage: "Click here for more info.",
+    description: "Aria label for help."
+  }
+});
+
+// ../renderers/src/components/Help.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function Help({ help, onClick }) {
+  const intl = useIntl2();
+  return /* @__PURE__ */ jsx16(
+    Info,
+    {
+      content: /* @__PURE__ */ jsx16(Markdown, { config: { link: { target: "_blank" } }, children: help }),
+      presentation: "POPOVER",
+      size: "sm",
+      "aria-label": intl.formatMessage(help_messages_default.helpAria),
+      onClick
+    }
+  );
+}
+var Help_default = Help;
+
+// ../renderers/src/components/LabelContentWithHelp.tsx
+import { jsx as jsx17, jsxs as jsxs2 } from "react/jsx-runtime";
+function LabelContentWithHelp({ text, help }) {
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    text,
+    /* @__PURE__ */ jsx17(Help_default, { help })
+  ] });
+}
+
+// ../renderers/src/components/FieldInput.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
-var getInlineMedia = (media) => media ? /* @__PURE__ */ jsx18(Media, { media, preferAvatar: false, size: 24 }) : null;
+function FieldInput({ id, children, label, validation, description, help }) {
+  const labelContent = label && help ? /* @__PURE__ */ jsx18(LabelContentWithHelp, { text: label, help }) : label;
+  return /* @__PURE__ */ jsx18(
+    Field,
+    {
+      id,
+      label: labelContent,
+      description,
+      message: validation == null ? void 0 : validation.message,
+      sentiment: mapStatusToSentiment(validation),
+      children
+    }
+  );
+}
+var mapStatusToSentiment = (validation) => {
+  if (validation) {
+    if (validation.status === "valid") {
+      return "positive";
+    }
+    return "negative";
+  }
+  return void 0;
+};
+var FieldInput_default = FieldInput;
+
+// ../renderers/src/CheckboxInputRenderer.tsx
+import { Checkbox, ListItem as ListItem3 } from "@transferwise/components";
 
 // ../renderers/src/utils/listItem/getMedia.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
@@ -860,14 +895,14 @@ var getInlineAlertOrValidation = (validationState, inlineAlert) => {
 var CheckboxInputRenderer_default = CheckboxInputRenderer;
 
 // ../renderers/src/ColumnsRenderer.tsx
-var import_classnames2 = __toESM(require_classnames());
+var import_classnames3 = __toESM(require_classnames());
 import { jsx as jsx23, jsxs as jsxs3 } from "react/jsx-runtime";
 var ColumnsRenderer = {
   canRenderType: "columns",
   render: ({ bias, margin, startChildren, endChildren }) => /* @__PURE__ */ jsxs3(
     "div",
     {
-      className: (0, import_classnames2.default)("df-columns-renderer-container", getMargin(margin), {
+      className: (0, import_classnames3.default)("df-columns-renderer-container", getMargin(margin), {
         "df-columns-renderer-bias-start": bias === "start",
         "df-columns-renderer-bias-end": bias === "end"
       }),
@@ -1790,7 +1825,7 @@ var MultiSelectInputRenderer_default = MultiSelectInputRenderer;
 import { Status, UploadInput } from "@transferwise/components";
 
 // ../renderers/src/components/UploadFieldInput.tsx
-var import_classnames3 = __toESM(require_classnames());
+var import_classnames4 = __toESM(require_classnames());
 import { InlineAlert as InlineAlert2 } from "@transferwise/components";
 import { jsx as jsx45, jsxs as jsxs8 } from "react/jsx-runtime";
 function UploadFieldInput({
@@ -1806,7 +1841,7 @@ function UploadFieldInput({
   return /* @__PURE__ */ jsxs8(
     "div",
     {
-      className: (0, import_classnames3.default)("form-group d-block", {
+      className: (0, import_classnames4.default)("form-group d-block", {
         "has-error": (validation == null ? void 0 : validation.status) === "invalid"
       }),
       children: [
@@ -1964,7 +1999,7 @@ function useSnackBarIfAvailable() {
 }
 
 // ../renderers/src/ParagraphRenderer.tsx
-var import_classnames4 = __toESM(require_classnames());
+var import_classnames5 = __toESM(require_classnames());
 import { Button as Button5, Input as Input3 } from "@transferwise/components";
 
 // ../renderers/src/messages/paragraph.messages.ts
@@ -2017,7 +2052,7 @@ function CopyableParagraph({
         type: "text",
         value: text,
         readOnly: true,
-        className: (0, import_classnames4.default)("text-ellipsis", inputAlignmentClasses)
+        className: (0, import_classnames5.default)("text-ellipsis", inputAlignmentClasses)
       }
     ),
     /* @__PURE__ */ jsx48(Button5, { v2: true, block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
@@ -2026,7 +2061,7 @@ function CopyableParagraph({
 var ParagraphRenderer_default = ParagraphRenderer;
 
 // ../renderers/src/RepeatableRenderer.tsx
-var import_classnames5 = __toESM(require_classnames());
+var import_classnames6 = __toESM(require_classnames());
 import { Button as Button6, Header as Header3, InlineAlert as InlineAlert3, Modal as Modal4, NavigationOption } from "@transferwise/components";
 import { Plus } from "@transferwise/icons";
 import { useState as useState7 } from "react";
@@ -2106,7 +2141,7 @@ function Repeatable(props) {
     /* @__PURE__ */ jsxs10(
       "div",
       {
-        className: (0, import_classnames5.default)("form-group", {
+        className: (0, import_classnames6.default)("form-group", {
           "has-error": (validationState == null ? void 0 : validationState.status) === "invalid"
         }),
         children: [
@@ -2792,14 +2827,14 @@ function MediaToolbarButton(props) {
       onClick,
       children: [
         accessibilityDescription ? /* @__PURE__ */ jsx62("span", { className: "sr-only", children: accessibilityDescription }) : null,
-        media ? (_a = getAddonStart(media)) == null ? void 0 : _a.value : null
+        media ? (_a = getAddonStartMedia(media)) == null ? void 0 : _a.value : null
       ]
     }
   );
 }
 function TextToolbarButton(props) {
   const { context, control, title, media, disabled, onClick } = props;
-  const addonStart = media ? getAddonStart(media) : void 0;
+  const addonStart = media ? getAddonStartMedia(media) : void 0;
   const priority = getPriority2(control);
   const sentiment = getSentiment2(context);
   return /* @__PURE__ */ jsx62(
@@ -2817,21 +2852,6 @@ function TextToolbarButton(props) {
     }
   );
 }
-var getAddonStart = (media) => {
-  if (media.type === "avatar") {
-    if (media.content.length > 0 && media.content[0].type === "uri" && isValidIconUrn(media.content[0].uri)) {
-      return {
-        type: "icon",
-        value: getInlineMedia({
-          type: "image",
-          uri: media.content[0].uri
-        })
-      };
-    }
-    return void 0;
-  }
-  return { type: "icon", value: getInlineMedia(media) };
-};
 var getPriority2 = (control) => isKnownControl(control) ? control : "secondary";
 var prefersMedia = (control) => {
   return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/dynamic-flow-client-internal",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "description": "Dynamic Flow web client for Wise",
   "license": "Apache-2.0",
   "main": "./build/main.js",
@@ -69,9 +69,9 @@
     "typescript": "5.9.3",
     "vitest": "4.0.18",
     "vitest-fetch-mock": "0.4.5",
-    "@wise/dynamic-flow-renderers": "0.0.0",
-    "@wise/dynamic-flow-types": "4.5.1",
-    "@wise/dynamic-flow-fixtures": "0.0.1"
+    "@wise/dynamic-flow-types": "4.6.0",
+    "@wise/dynamic-flow-fixtures": "0.0.1",
+    "@wise/dynamic-flow-renderers": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/components": "^46.104.0",
@@ -85,8 +85,8 @@
     "react-intl": "^6 || ^7"
   },
   "dependencies": {
-    "@wise/dynamic-flow-client": "5.4.1",
-    "@wise/dynamic-flow-types": "4.5.1"
+    "@wise/dynamic-flow-types": "4.6.0",
+    "@wise/dynamic-flow-client": "5.5.0"
   },
   "scripts": {
     "dev": "pnpm build:visual-tests && storybook dev -p 3005",