@wise/dynamic-flow-client-internal 3.24.4 → 3.26.0

package/build/main.js

@@ -900,8 +900,8 @@ var useRendererHttpClient = () => {
 var import_components = require("@transferwise/components");
 
 // ../renderers/src/utils/layout-utils.ts
-var getMargin = (size) => {
-  switch (size) {
+var getMargin = (size2) => {
+  switch (size2) {
     case "xs":
       return "m-b-0";
     case "sm":
@@ -1122,7 +1122,7 @@ function ButtonRendererComponent({
   disabled,
   margin,
   title,
-  size,
+  size: size2,
   onClick
 }) {
   const className = getMargin(margin);
@@ -1136,7 +1136,7 @@ function ButtonRendererComponent({
       className,
       disabled: isLoading || disabled,
       priority: mapControl(control),
-      size: mapSize(size),
+      size: mapSize(size2),
       type,
       onClick,
       children: title
@@ -1161,11 +1161,11 @@ var mapControl = (control) => {
       return "secondary";
   }
 };
-var mapSize = (size) => {
-  if (!size) {
+var mapSize = (size2) => {
+  if (!size2) {
     return void 0;
   }
-  switch (size) {
+  switch (size2) {
     case "xs":
     case "sm":
       return "sm";
@@ -1462,15 +1462,15 @@ var HeadingRenderer = {
   render: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Heading, __spreadValues({}, props))
 };
 function Heading(props) {
-  const { text, size, align, margin, control } = props;
+  const { text, size: size2, align, margin, control } = props;
   const className = getTextAlignmentAndMargin({ align, margin });
-  return control === "display" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DisplayHeading, { size, text, className }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StandardHeading, { size, text, className });
+  return control === "display" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DisplayHeading, { size: size2, text, className }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StandardHeading, { size: size2, text, className });
 }
-function DisplayHeading({ size, text, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components10.Display, { type: getDisplayType(size), className, children: text });
+function DisplayHeading({ size: size2, text, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components10.Display, { type: getDisplayType(size2), className, children: text });
 }
-function StandardHeading({ size, text, className }) {
-  switch (size) {
+function StandardHeading({ size: size2, text, className }) {
+  switch (size2) {
     case "xs":
       return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h5", { className, children: text });
     case "sm":
@@ -1484,8 +1484,8 @@ function StandardHeading({ size, text, className }) {
       return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className, children: text });
   }
 }
-var getDisplayType = (size) => {
-  switch (size) {
+var getDisplayType = (size2) => {
+  switch (size2) {
     case "xs":
     case "sm":
       return "display-small";
@@ -1520,7 +1520,7 @@ var ImageRenderer_default = ImageRenderer;
 function ImageRendererComponent({
   accessibilityDescription,
   margin,
-  size,
+  size: size2,
   url
 }) {
   const [imageSource, setImageSource] = (0, import_react5.useState)("");
@@ -1528,7 +1528,7 @@ function ImageRendererComponent({
   (0, import_react5.useEffect)(() => {
     void getImageSource(httpClient, url).then(setImageSource);
   }, [url, httpClient]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: `df-image ${size2 || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_components11.Image,
     {
       className: `img-responsive ${getMargin(margin)}`,
@@ -1590,7 +1590,7 @@ var InstructionsRenderer = {
 var InstructionsRenderer_default = InstructionsRenderer;
 
 // ../renderers/src/IntegerInputRenderer.tsx
-var import_components13 = require("@transferwise/components");
+var import_components14 = require("@transferwise/components");
 
 // ../renderers/src/utils/input-utils.ts
 var onWheel = (event) => {
@@ -1599,13 +1599,71 @@ var onWheel = (event) => {
   }
 };
 
-// ../renderers/src/IntegerInputRenderer.tsx
+// ../renderers/src/utils/getIconAvatar.tsx
+var import_components13 = require("@transferwise/components");
 var import_jsx_runtime25 = require("react/jsx-runtime");
+var size = 24;
+function getIconAvatar({ icon, image }) {
+  if (image == null ? void 0 : image.url) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "img",
+      {
+        src: image.url,
+        alt: image.accessibilityDescription,
+        width: `${size}px`,
+        height: `${size}px`
+      }
+    );
+  }
+  if (isFlagIcon2(icon)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components13.Avatar, { type: import_components13.AvatarType.ICON, size, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DynamicIcon_default, { name: icon.name }) });
+  }
+  if (isNamedIcon2(icon)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DynamicIcon_default, { name: icon.name });
+  }
+  if (icon && "text" in icon) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components13.Avatar, { type: import_components13.AvatarType.ICON, size, children: icon.text });
+  }
+  return null;
+}
+var isNamedIcon2 = (icon) => icon ? "name" in icon : false;
+var isFlagIcon2 = (icon) => isNamedIcon2(icon) && icon.name.startsWith("flag-");
+
+// ../renderers/src/utils/getInputGroupAddonStart.tsx
+var getInputGroupAddonStart = ({ icon, image }) => {
+  const content = getIconAvatar({ icon, image });
+  return content ? { content } : void 0;
+};
+
+// ../renderers/src/IntegerInputRenderer.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var IntegerInputRenderer = {
   canRenderType: "input-integer",
   render: (props) => {
-    const _a = props, { id, label, description, help, type, validationState, value, onChange } = _a, rest = __objRest(_a, ["id", "label", "description", "help", "type", "validationState", "value", "onChange"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    const _a = props, {
+      id,
+      label,
+      description,
+      help,
+      icon,
+      image,
+      type,
+      validationState,
+      value,
+      onChange
+    } = _a, rest = __objRest(_a, [
+      "id",
+      "label",
+      "description",
+      "help",
+      "icon",
+      "image",
+      "type",
+      "validationState",
+      "value",
+      "onChange"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       FieldInput_default,
       {
         id,
@@ -1613,8 +1671,8 @@ var IntegerInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          import_components13.Input,
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_components14.InputGroup, { addonStart: getInputGroupAddonStart({ icon, image }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          import_components14.Input,
           __spreadValues({
             id,
             name: id,
@@ -1628,7 +1686,7 @@ var IntegerInputRenderer = {
             },
             onWheel
           }, rest)
-        )
+        ) })
       }
     );
   }
@@ -1636,14 +1694,14 @@ var IntegerInputRenderer = {
 var IntegerInputRenderer_default = IntegerInputRenderer;
 
 // ../renderers/src/LoadingIndicatorRenderer.tsx
-var import_components14 = require("@transferwise/components");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_components15 = require("@transferwise/components");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var LoadingIndicatorRenderer = {
   canRenderType: "loading-indicator",
-  render: ({ margin, size }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_components14.Loader,
+  render: ({ margin, size: size2 }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_components15.Loader,
     {
-      size,
+      size: size2,
       classNames: { "tw-loader": `tw-loader m-x-auto ${getMargin(margin)}` },
       "data-testid": "loading-indicator"
     }
@@ -1652,30 +1710,30 @@ var LoadingIndicatorRenderer = {
 var LoadingIndicatorRenderer_default = LoadingIndicatorRenderer;
 
 // ../renderers/src/MarkdownRenderer.tsx
-var import_components15 = require("@transferwise/components");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_components16 = require("@transferwise/components");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var MarkdownRenderer = {
   canRenderType: "markdown",
-  render: ({ content, align, margin }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_components15.Markdown, { config: { link: { target: "_blank" } }, children: content }) })
+  render: ({ content, align, margin }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components16.Markdown, { config: { link: { target: "_blank" } }, children: content }) })
 };
 var MarkdownRenderer_default = MarkdownRenderer;
 
 // ../renderers/src/ModalRenderer.tsx
-var import_components16 = require("@transferwise/components");
+var import_components17 = require("@transferwise/components");
 var import_react6 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var ModalRenderer = {
   canRenderType: "modal",
-  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DFModal, __spreadValues({}, props))
+  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DFModal, __spreadValues({}, props))
 };
 var ModalRenderer_default = ModalRenderer;
 function DFModal({ content, margin, trigger }) {
   const [visible, setVisible] = (0, import_react6.useState)(false);
   const { components, title } = content;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components16.Button, { priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      import_components16.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_components17.Button, { priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      import_components17.Modal,
       {
         scroll: "content",
         open: visible,
@@ -1689,20 +1747,20 @@ function DFModal({ content, margin, trigger }) {
 }
 
 // ../renderers/src/MultiSelectInputRenderer.tsx
-var import_components18 = require("@transferwise/components");
+var import_components19 = require("@transferwise/components");
 
 // ../renderers/src/SelectInputRenderer/OptionMedia.tsx
-var import_components17 = require("@transferwise/components");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_components18 = require("@transferwise/components");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function OptionMedia({ icon, image }) {
   if (image == null ? void 0 : image.url) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { src: image.url, alt: image.accessibilityDescription || "", width: "64px" });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: image.url, alt: image.accessibilityDescription || "", width: "64px" });
   }
   if (icon && "name" in icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_components17.Avatar, { type: import_components17.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DynamicIcon_default, { name: icon.name }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components18.Avatar, { type: import_components18.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DynamicIcon_default, { name: icon.name }) });
   }
   if (icon && "text" in icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_components17.Avatar, { type: import_components17.AvatarType.INITIALS, children: icon.text });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components18.Avatar, { type: import_components18.AvatarType.INITIALS, children: icon.text });
   }
   return null;
 }
@@ -1722,16 +1780,17 @@ var multi_select_messages_default = (0, import_react_intl3.defineMessages)({
 
 // ../renderers/src/MultiSelectInputRenderer.tsx
 var import_react7 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var MultiSelectInputRenderer = {
   canRenderType: "input-multi-select",
-  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MultiSelectInputRendererComponent, __spreadValues({}, props))
+  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MultiSelectInputRendererComponent, __spreadValues({}, props))
 };
 function MultiSelectInputRendererComponent(props) {
   const { formatMessage } = (0, import_react_intl4.useIntl)();
   const [stagedIndices, setStagedIndices] = (0, import_react7.useState)();
   const {
     id,
+    autoComplete,
     description,
     disabled,
     label,
@@ -1766,11 +1825,12 @@ function MultiSelectInputRendererComponent(props) {
     const contentProps = {
       title: option.title,
       description: option.description,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(OptionMedia, { icon: option.icon, image: option.image })
+      icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(OptionMedia, { icon: option.icon, image: option.image })
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components18.SelectInputOptionContent, __spreadValues({}, contentProps));
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_components19.SelectInputOptionContent, __spreadValues({}, contentProps));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  const extraProps = { autoComplete };
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     FieldInput_default,
     {
       id,
@@ -1778,9 +1838,9 @@ function MultiSelectInputRendererComponent(props) {
       help,
       description,
       validation: validationState,
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        import_components18.SelectInput,
-        {
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        import_components19.SelectInput,
+        __spreadValues({
           id,
           items: options.map((option, index) => {
             var _a, _b, _c;
@@ -1809,7 +1869,7 @@ function MultiSelectInputRendererComponent(props) {
               setStagedIndices(void 0);
             }
           }
-        }
+        }, extraProps)
       )
     }
   );
@@ -1817,12 +1877,12 @@ function MultiSelectInputRendererComponent(props) {
 var MultiSelectInputRenderer_default = MultiSelectInputRenderer;
 
 // ../renderers/src/MultiUploadInputRenderer.tsx
-var import_components20 = require("@transferwise/components");
+var import_components21 = require("@transferwise/components");
 
 // ../renderers/src/components/UploadFieldInput.tsx
-var import_components19 = require("@transferwise/components");
+var import_components20 = require("@transferwise/components");
 var import_classnames3 = __toESM(require_classnames());
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function UploadFieldInput({
   id,
   children,
@@ -1831,18 +1891,18 @@ function UploadFieldInput({
   help,
   validation
 }) {
-  const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LabelContentWithHelp, { text: label, help }) : label;
+  const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       className: (0, import_classnames3.default)("form-group d-block", {
         "has-error": (validation == null ? void 0 : validation.status) === "invalid"
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { htmlFor: id, className: "control-label", children: labelContent }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("label", { htmlFor: id, className: "control-label", children: labelContent }),
         children,
-        (validation == null ? void 0 : validation.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_components19.InlineAlert, { type: "negative", id: descriptionId, children: validation.message })
+        (validation == null ? void 0 : validation.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_components20.InlineAlert, { type: "negative", id: descriptionId, children: validation.message })
       ]
     }
   );
@@ -1874,7 +1934,7 @@ var getFileType = (base64Url) => {
 var getRandomId = () => Math.random().toString(36).substring(2);
 
 // ../renderers/src/MultiUploadInputRenderer.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var MultiUploadInputRenderer = {
   canRenderType: "input-upload-multi",
   render: (props) => {
@@ -1901,7 +1961,7 @@ var MultiUploadInputRenderer = {
     };
     const onDeleteFile = async (fileId) => onDelete(String(fileId));
     const descriptionId = description ? `${id}-description` : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       UploadFieldInput_default,
       {
         id,
@@ -1909,8 +1969,8 @@ var MultiUploadInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          import_components20.UploadInput,
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          import_components21.UploadInput,
           {
             id,
             "aria-describedby": descriptionId,
@@ -1932,13 +1992,35 @@ var MultiUploadInputRenderer = {
 var MultiUploadInputRenderer_default = MultiUploadInputRenderer;
 
 // ../renderers/src/NumberInputRenderer.tsx
-var import_components21 = require("@transferwise/components");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_components22 = require("@transferwise/components");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var NumberInputRenderer = {
   canRenderType: "input-number",
   render: (props) => {
-    const _a = props, { id, label, description, help, type, validationState, value, onChange } = _a, rest = __objRest(_a, ["id", "label", "description", "help", "type", "validationState", "value", "onChange"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    const _a = props, {
+      id,
+      label,
+      description,
+      help,
+      icon,
+      image,
+      type,
+      validationState,
+      value,
+      onChange
+    } = _a, rest = __objRest(_a, [
+      "id",
+      "label",
+      "description",
+      "help",
+      "icon",
+      "image",
+      "type",
+      "validationState",
+      "value",
+      "onChange"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       FieldInput_default,
       {
         id,
@@ -1946,8 +2028,8 @@ var NumberInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          import_components21.Input,
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_components22.InputGroup, { addonStart: getInputGroupAddonStart({ icon, image }), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          import_components22.Input,
           __spreadValues({
             id,
             name: id,
@@ -1959,7 +2041,7 @@ var NumberInputRenderer = {
             },
             onWheel
           }, rest)
-        )
+        ) })
       }
     );
   }
@@ -1970,16 +2052,16 @@ var NumberInputRenderer_default = NumberInputRenderer;
 var import_react_intl6 = require("react-intl");
 
 // ../renderers/src/hooks/useSnackBarIfAvailable.ts
-var import_components22 = require("@transferwise/components");
+var import_components23 = require("@transferwise/components");
 var import_react8 = require("react");
 function useSnackBarIfAvailable() {
-  const context = (0, import_react8.useContext)(import_components22.SnackbarContext);
+  const context = (0, import_react8.useContext)(import_components23.SnackbarContext);
   return context ? context.createSnackbar : () => {
   };
 }
 
 // ../renderers/src/ParagraphRenderer.tsx
-var import_components23 = require("@transferwise/components");
+var import_components24 = require("@transferwise/components");
 var import_classnames4 = __toESM(require_classnames());
 
 // ../renderers/src/messages/paragraph.messages.ts
@@ -1998,17 +2080,17 @@ var paragraph_messages_default = (0, import_react_intl5.defineMessages)({
 });
 
 // ../renderers/src/ParagraphRenderer.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var ParagraphRenderer = {
   canRenderType: "paragraph",
-  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Paragraph, __spreadValues({}, props))
+  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Paragraph, __spreadValues({}, props))
 };
 function Paragraph({ align, control, margin, text }) {
   const className = getTextAlignmentAndMargin({ align, margin });
-  return control === "copyable" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CopyableParagraph, { className, align, text }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StandardParagraph, { className, text });
+  return control === "copyable" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CopyableParagraph, { className, align, text }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(StandardParagraph, { className, text });
 }
 function StandardParagraph({ text, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: `np-text-body-large ${className}`, children: text });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: `np-text-body-large ${className}`, children: text });
 }
 function CopyableParagraph({
   text,
@@ -2022,9 +2104,9 @@ function CopyableParagraph({
     });
   };
   const inputAlignmentClasses = getTextAlignmentAndMargin({ align, margin: "sm" });
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      import_components23.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      import_components24.Input,
       {
         type: "text",
         value: text,
@@ -2032,13 +2114,13 @@ function CopyableParagraph({
         className: (0, import_classnames4.default)("text-ellipsis", inputAlignmentClasses)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_components23.Button, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_components24.Button, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
   ] });
 }
 var ParagraphRenderer_default = ParagraphRenderer;
 
 // ../renderers/src/RepeatableRenderer.tsx
-var import_components24 = require("@transferwise/components");
+var import_components25 = require("@transferwise/components");
 var import_react9 = require("react");
 var import_icons = require("@transferwise/icons");
 var import_react_intl8 = require("react-intl");
@@ -2070,10 +2152,10 @@ var repeatable_messages_default = (0, import_react_intl7.defineMessages)({
 
 // ../renderers/src/RepeatableRenderer.tsx
 var import_classnames5 = __toESM(require_classnames());
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var RepeatableRenderer = {
   canRenderType: "repeatable",
-  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Repeatable, __spreadValues({}, props))
+  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Repeatable, __spreadValues({}, props))
 };
 function Repeatable(props) {
   const {
@@ -2112,40 +2194,40 @@ function Repeatable(props) {
   const onCancelEdit = () => {
     setOpenModalType(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_components24.Header, { title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_components25.Header, { title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "div",
       {
         className: (0, import_classnames5.default)("form-group", {
           "has-error": (validationState == null ? void 0 : validationState.status) === "invalid"
         }),
         children: [
-          items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            import_components24.NavigationOption,
+          items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemSummaryOption, { item, onClick: () => onEditItem(index) }, item.id)),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            import_components25.NavigationOption,
             {
-              media: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_icons.Plus, {}),
+              media: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_icons.Plus, {}),
               title: addItemTitle || formatMessage(repeatable_messages_default.addItemTitle),
               showMediaAtAllSizes: true,
               onClick: () => onAddItem()
             }
           ),
-          (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_components24.InlineAlert, { type: "negative", children: validationState.message })
+          (validationState == null ? void 0 : validationState.status) === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_components25.InlineAlert, { type: "negative", children: validationState.message })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      import_components24.Modal,
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      import_components25.Modal,
       {
         open: openModalType !== null,
         title: (openModalType === "add" ? addItemTitle : editItemTitle) || formatMessage(repeatable_messages_default.addItemTitle),
-        body: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "m-b-2", children: editableItem }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_components24.Button, { priority: "primary", block: true, className: "m-b-2", onClick: () => onSaveItem(), children: formatMessage(repeatable_messages_default.addItem) }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_components24.Button, { priority: "secondary", type: "negative", block: true, onClick: () => onRemoveItem(), children: formatMessage(repeatable_messages_default.removeItem) })
+        body: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "m-b-2", children: editableItem }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_components25.Button, { priority: "primary", block: true, className: "m-b-2", onClick: () => onSaveItem(), children: formatMessage(repeatable_messages_default.addItem) }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_components25.Button, { priority: "secondary", type: "negative", block: true, onClick: () => onRemoveItem(), children: formatMessage(repeatable_messages_default.removeItem) })
           ] })
         ] }),
         onClose: () => onCancelEdit()
@@ -2157,10 +2239,10 @@ function ItemSummaryOption({
   item,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_components24.NavigationOption,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_components25.NavigationOption,
     {
-      media: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(NavigationOptionMedia, __spreadValues({}, item)),
+      media: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(NavigationOptionMedia, __spreadValues({}, item)),
       title: item.title,
       content: item.description,
       showMediaAtAllSizes: true,
@@ -2171,7 +2253,7 @@ function ItemSummaryOption({
 var RepeatableRenderer_default = RepeatableRenderer;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
-var import_components26 = require("@transferwise/components");
+var import_components27 = require("@transferwise/components");
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
 var import_react_intl10 = require("react-intl");
@@ -2197,8 +2279,8 @@ var generic_error_messages_default = (0, import_react_intl9.defineMessages)({
 });
 
 // ../renderers/src/SearchRenderer/ErrorResult.tsx
-var import_components25 = require("@transferwise/components");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_components26 = require("@transferwise/components");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function ErrorResult({ state }) {
   const intl = (0, import_react_intl10.useIntl)();
   const buttonVisualProps = {
@@ -2206,11 +2288,11 @@ function ErrorResult({ state }) {
     size: "sm",
     style: { marginTop: "-2px", padding: "0", width: "auto", display: "inline" }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "m-t-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: "m-t-2", children: [
     intl.formatMessage(generic_error_messages_default.genericError),
     "\xA0",
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      import_components25.Button,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      import_components26.Button,
       __spreadProps(__spreadValues({}, buttonVisualProps), {
         onClick: () => {
           state.onRetry();
@@ -2236,7 +2318,7 @@ var search_messages_default = (0, import_react_intl11.defineMessages)({
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 var import_react_intl12 = require("react-intl");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function BlockSearchRendererComponent({
   id,
   isLoading,
@@ -2249,9 +2331,9 @@ function BlockSearchRendererComponent({
   const [hasSearched, setHasSearched] = (0, import_react10.useState)(false);
   const trackEvent = useTrackEvent();
   const { formatMessage } = (0, import_react_intl12.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: getMargin(margin), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-      import_components26.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: getMargin(margin), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      import_components27.Input,
       {
         id,
         name: id,
@@ -2267,7 +2349,7 @@ function BlockSearchRendererComponent({
         }
       }
     ) }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: formatMessage(search_messages_default.loading) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SearchResultContent, { state, onChange })
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: formatMessage(search_messages_default.loading) }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SearchResultContent, { state, onChange })
   ] });
 }
 function SearchResultContent({
@@ -2276,27 +2358,27 @@ function SearchResultContent({
 }) {
   switch (state.type) {
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ErrorResult, { state });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ErrorResult, { state });
     case "results":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SearchResults, { state, onChange });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SearchResults, { state, onChange });
     case "noResults":
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(EmptySearchResult, { state });
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(EmptySearchResult, { state });
     case "pending":
     default:
       return null;
   }
 }
 function EmptySearchResult({ state }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_components26.Markdown, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_components27.Markdown, { className: "m-t-2", config: { link: { target: "_blank" } }, children: state.message });
 }
 function SearchResults({
   state
 }) {
   const trackEvent = useTrackEvent();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_components26.NavigationOptionsList, { children: state.results.map((result) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_components27.NavigationOptionsList, { children: state.results.map((result) => {
     const { icon, image } = result;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-      import_components26.NavigationOption,
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      import_components27.NavigationOption,
       {
         title: result.title,
         content: result.description,
@@ -2317,11 +2399,11 @@ function SearchResults({
 var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
-var import_components27 = require("@transferwise/components");
+var import_components28 = require("@transferwise/components");
 var import_icons2 = require("@transferwise/icons");
 var import_react11 = require("react");
 var import_react_intl13 = require("react-intl");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function InlineSearchRenderer({
   id,
   isLoading,
@@ -2333,18 +2415,18 @@ function InlineSearchRenderer({
   const [hasSearched, setHasSearched] = (0, import_react11.useState)(false);
   const trackEvent = useTrackEvent();
   const intl = (0, import_react_intl13.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_components27.Typeahead,
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    import_components28.Typeahead,
     {
       id: "typeahead-input-id",
       intl,
       name: "typeahead-input-name",
       size: "md",
       maxHeight: 100,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TypeaheadFooter, { state, isLoading }),
+      footer: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TypeaheadFooter, { state, isLoading }),
       multiple: false,
       clearable: false,
-      addon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons2.Search, { size: 24 }),
+      addon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons2.Search, { size: 24 }),
       options: state.type === "results" ? state.results.map(mapResultToTypeaheadOption) : [],
       minQueryLength: 1,
       onChange: (values) => {
@@ -2381,29 +2463,29 @@ function mapResultToTypeaheadOption(result) {
 function TypeaheadFooter({ state, isLoading }) {
   const { formatMessage } = (0, import_react_intl13.useIntl)();
   if (state.type === "noResults") {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_components27.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_components28.Markdown, { className: "m-t-2 m-x-2", config: { link: { target: "_blank" } }, children: state.message });
   }
   if (state.type === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ErrorResult, { state }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "m-t-2 m-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ErrorResult, { state }) });
   }
   if (state.type === "pending" || isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "m-t-2 m-x-2", children: formatMessage(search_messages_default.loading) });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "m-t-2 m-x-2", children: formatMessage(search_messages_default.loading) });
   }
   return null;
 }
 var InlineSearchRendererComponent_default = InlineSearchRenderer;
 
 // ../renderers/src/SearchRenderer/SearchRenderer.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var SearchRenderer = {
   canRenderType: "search",
-  render: (props) => props.control === "inline" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(InlineSearchRendererComponent_default, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BlockSearchRendererComponent_default, __spreadValues({}, props))
+  render: (props) => props.control === "inline" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(InlineSearchRendererComponent_default, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(BlockSearchRendererComponent_default, __spreadValues({}, props))
 };
 var SearchRenderer_default = SearchRenderer;
 
 // ../renderers/src/SelectInputRenderer/RadioInputRendererComponent.tsx
-var import_components28 = require("@transferwise/components");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_components29 = require("@transferwise/components");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function RadioInputRendererComponent(props) {
   const {
     id,
@@ -2417,8 +2499,8 @@ function RadioInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       FieldInput_default,
       {
         id,
@@ -2426,8 +2508,8 @@ function RadioInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
-        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          import_components28.RadioGroup,
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_components29.RadioGroup,
           {
             name: id,
             radios: options.map((option, index) => ({
@@ -2435,7 +2517,7 @@ function RadioInputRendererComponent(props) {
               value: index,
               secondary: option.description,
               disabled: option.disabled || disabled,
-              avatar: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(OptionMedia, { icon: option.icon, image: option.image })
+              avatar: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(OptionMedia, { icon: option.icon, image: option.image })
             })),
             selectedValue: selectedIndex != null ? selectedIndex : void 0,
             onChange: onSelect
@@ -2449,9 +2531,9 @@ function RadioInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
-var import_components29 = require("@transferwise/components");
+var import_components30 = require("@transferwise/components");
 var import_react12 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function TabInputRendererComponent(props) {
   const {
     id,
@@ -2470,8 +2552,8 @@ function TabInputRendererComponent(props) {
       onSelect(0);
     }
   }, [selectedIndex, onSelect, options.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       FieldInput_default,
       {
         id,
@@ -2479,8 +2561,8 @@ function TabInputRendererComponent(props) {
         help,
         description,
         validation: validationState,
-        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          import_components29.Tabs,
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          import_components30.Tabs,
           {
             name: id,
             selected: selectedIndex != null ? selectedIndex : 0,
@@ -2488,7 +2570,7 @@ function TabInputRendererComponent(props) {
               title: option.title,
               // if we pass null, we get some props-types console errors
               // eslint-disable-next-line react/jsx-no-useless-fragment
-              content: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, {}),
+              content: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, {}),
               disabled: option.disabled || disabled
             })),
             onTabSelect: onSelect
@@ -2503,28 +2585,11 @@ var isValidIndex = (index, options) => index !== null && index >= 0 && index < o
 
 // ../renderers/src/SelectInputRenderer/SelectInputRendererComponent.tsx
 var import_components31 = require("@transferwise/components");
-
-// ../renderers/src/SelectInputRenderer/SelectTriggerMedia.tsx
-var import_components30 = require("@transferwise/components");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-function SelectTriggerMedia({ icon, image }) {
-  if (image == null ? void 0 : image.url) {
-    return null;
-  }
-  if (icon && "name" in icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components30.Avatar, { type: import_components30.AvatarType.ICON, size: 24, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DynamicIcon_default, { name: icon.name }) });
-  }
-  if (icon && "text" in icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components30.Avatar, { type: import_components30.AvatarType.ICON, size: 24, children: icon.text });
-  }
-  return null;
-}
-
-// ../renderers/src/SelectInputRenderer/SelectInputRendererComponent.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function SelectInputRendererComponent(props) {
   const {
     id,
+    autoComplete,
     children,
     description,
     disabled,
@@ -2556,7 +2621,7 @@ function SelectInputRendererComponent(props) {
     const contentProps = withinTrigger ? {
       title: option.title,
       note: option.description,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectTriggerMedia, { icon: option.icon, image: option.image })
+      icon: getIconAvatar(option)
     } : {
       title: option.title,
       description: option.description,
@@ -2564,6 +2629,7 @@ function SelectInputRendererComponent(props) {
     };
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components31.SelectInputOptionContent, __spreadValues({}, contentProps));
   };
+  const extraProps = { autoComplete };
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       FieldInput_default,
@@ -2575,7 +2641,7 @@ function SelectInputRendererComponent(props) {
         validation: validationState,
         children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           import_components31.SelectInput,
-          {
+          __spreadValues({
             name: id,
             placeholder,
             items,
@@ -2585,7 +2651,7 @@ function SelectInputRendererComponent(props) {
             filterable: items.length >= 8,
             onChange: onSelect,
             onClear: required ? void 0 : () => onSelect(null)
-          }
+          }, extraProps)
         )
       }
     ),
@@ -2712,6 +2778,9 @@ var mapStatus = (status) => {
   return status;
 };
 
+// ../renderers/src/TextInputRenderer.tsx
+var import_components35 = require("@transferwise/components");
+
 // ../renderers/src/components/VariableTextInput.tsx
 var import_components34 = require("@transferwise/components");
 var import_jsx_runtime47 = require("react/jsx-runtime");
@@ -2793,6 +2862,8 @@ var TextInputRenderer = {
       description,
       help,
       error,
+      icon,
+      image,
       maxLength,
       minLength,
       type,
@@ -2805,6 +2876,8 @@ var TextInputRenderer = {
       "description",
       "help",
       "error",
+      "icon",
+      "image",
       "maxLength",
       "minLength",
       "type",
@@ -2821,7 +2894,7 @@ var TextInputRenderer = {
         description,
         validation: validationState,
         help,
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(VariableTextInput_default, { control, inputProps })
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_components35.InputGroup, { addonStart: getInputGroupAddonStart({ icon, image }), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(VariableTextInput_default, { control, inputProps }) })
       }
     );
   }
@@ -2829,7 +2902,7 @@ var TextInputRenderer = {
 var TextInputRenderer_default = TextInputRenderer;
 
 // ../renderers/src/UploadInputRenderer.tsx
-var import_components35 = require("@transferwise/components");
+var import_components36 = require("@transferwise/components");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var UploadInputRenderer = {
   canRenderType: "input-upload",
@@ -2854,7 +2927,7 @@ var UploadInputRenderer = {
           description: void 0,
           validation: validationState,
           children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            import_components35.UploadInput,
+            import_components36.UploadInput,
             {
               id,
               description,
@@ -2919,7 +2992,7 @@ var LargeUploadRenderer = {
         validation: validationState,
         help,
         children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_components35.Upload,
+          import_components36.Upload,
           __spreadProps(__spreadValues({}, uploadProps), {
             usAccept: getAcceptsString(accepts),
             usDisabled: disabled,
@@ -2934,16 +3007,16 @@ var LargeUploadRenderer = {
 };
 
 // ../renderers/src/ReviewRenderer.tsx
-var import_components36 = require("@transferwise/components");
+var import_components37 = require("@transferwise/components");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var ReviewRenderer = {
   canRenderType: "review",
   render: ({ callToAction, control, fields, margin, title }) => {
     const orientation = mapControlToDefinitionListLayout(control);
     return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: getMargin(margin), children: [
-      (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components36.Header, { title: title != null ? title : "", action: getReviewAction(callToAction) }),
+      (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components37.Header, { title: title != null ? title : "", action: getReviewAction(callToAction) }),
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-        import_components36.DefinitionList,
+        import_components37.DefinitionList,
         {
           layout: orientation,
           definitions: fields.map(({ label, value, help }, index) => ({
@@ -3041,7 +3114,7 @@ var external_confirmation_messages_default = (0, import_react_intl14.defineMessa
 });
 
 // ../renderers/src/step/ExternalConfirmationDialog.tsx
-var import_components37 = require("@transferwise/components");
+var import_components38 = require("@transferwise/components");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function ExternalConfirmationDialog({
   external,
@@ -3050,10 +3123,10 @@ function ExternalConfirmationDialog({
   const { formatMessage } = (0, import_react_intl15.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "df-box-renderer-width-lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("h2", { className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.title) }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_components37.Markdown, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(external.url) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_components38.Markdown, { config: { link: { target: "_blank" } }, className: "text-xs-center m-b-5", children: formatMessage(external_confirmation_messages_default.description, { origin: getOrigin(external.url) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "df-box-renderer-fixed-width", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "df-box-renderer-width-lg", children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        import_components37.Button,
+        import_components38.Button,
         {
           block: true,
           className: "m-b-2",
@@ -3066,7 +3139,7 @@ function ExternalConfirmationDialog({
           children: formatMessage(external_confirmation_messages_default.open)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_components37.Button, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onClose, children: formatMessage(external_confirmation_messages_default.cancel) })
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_components38.Button, { block: true, className: "m-b-2", priority: "tertiary", size: "md", onClick: onClose, children: formatMessage(external_confirmation_messages_default.cancel) })
     ] }) })
   ] }) });
 }
@@ -3095,7 +3168,7 @@ function useExternal(url) {
 }
 
 // ../renderers/src/step/BackButton.tsx
-var import_components38 = require("@transferwise/components");
+var import_components39 = require("@transferwise/components");
 var import_icons3 = require("@transferwise/icons");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function BackButton({ title, onClick }) {
@@ -3109,7 +3182,7 @@ function BackButton({ title, onClick }) {
       onClick,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "sr-only", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components38.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons3.ArrowLeft, { size: "24" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components39.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons3.ArrowLeft, { size: "24" }) })
       ]
     }
   ) });
@@ -3117,7 +3190,7 @@ function BackButton({ title, onClick }) {
 var BackButton_default = BackButton;
 
 // ../renderers/src/step/StepRenderer.tsx
-var import_components39 = require("@transferwise/components");
+var import_components40 = require("@transferwise/components");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var StepRenderer = {
   canRenderType: "step",
@@ -3133,10 +3206,10 @@ function StepRendererComponent(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(StepRendererContextProvider, { value, children: [
     back ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(BackButton_default, __spreadValues({}, back)) : null,
     title || description ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "m-b-4", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components39.Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
+      title ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components40.Title, { as: "h1", type: "title-section", className: "text-xs-center m-b-2", children: title }) : void 0,
       description ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "text-xs-center np-text-body-large", children: description }) : void 0
     ] }) : void 0,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components39.Alert, { type: "negative", className: "m-b-2", message: error }) : void 0,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components40.Alert, { type: "negative", className: "m-b-2", message: error }) : void 0,
     children
   ] });
 }