@wise/dynamic-flow-client 2.8.9 → 2.8.10

package/build/main.js

@@ -2052,12 +2052,12 @@ var import_components2 = require("@transferwise/components");
 // src/legacy/layout/utils/getNavigationOptionMedia.tsx
 var import_components = require("@transferwise/components");
 
-// src/legacy/layout/icon/FlagIcon.tsx
+// src/common/icon/FlagIcon.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var isFlagIcon = (name) => isCurrencyFlagIcon(name) || isCountryFlagIcon(name);
 var isCurrencyFlagIcon = (name) => currencyCodes.some((currencyCode) => name === `flag-${currencyCode}`);
 var isCountryFlagIcon = (name) => countryCodes.some((countryCode) => name === `flag-${countryCode}`);
-var FlagIcon = ({ name }) => {
+function FlagIcon({ name }) {
   if (!isFlagIcon(name)) {
     return null;
   }
@@ -2067,10 +2067,11 @@ var FlagIcon = ({ name }) => {
     {
       src: `https://wise.com/web-art/assets/flags/${code}.svg`,
       alt: "",
-      "data-testid": `img-flag-${code}`
+      "data-testid": `img-flag-${code}`,
+      width: "24px"
     }
   );
-};
+}
 var currencyCodes = [
   "aed",
   "ars",
@@ -2254,30 +2255,27 @@ var countryCodes = [
   "zm"
 ];
 
-// src/legacy/layout/icon/NamedIcon.tsx
+// src/common/icon/NamedIcon.tsx
 var icons = __toESM(require("@transferwise/icons"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var isNamedIcon = (name) => {
   const iconName = toCapitalisedCamelCase(name);
   return Object.keys(icons).includes(iconName);
 };
-var NamedIcon = ({ name }) => {
+function NamedIcon({ name }) {
   if (!isNamedIcon(name)) {
     return null;
   }
   const iconName = toCapitalisedCamelCase(name);
   const Icon = icons[iconName];
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: 24 });
-};
+}
 var toCapitalisedCamelCase = (value) => value.split("-").map(capitaliseFirstChar).join("");
-var capitaliseFirstChar = (value) => {
-  var _a;
-  return `${(_a = value[0]) == null ? void 0 : _a.toUpperCase()}${value.slice(1)}`;
-};
+var capitaliseFirstChar = (value) => `${value[0].toUpperCase()}${value.slice(1)}`;
 
 // src/legacy/layout/icon/DynamicIcon.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var DynamicIcon = ({ type }) => {
+function DynamicIcon({ type }) {
   if (isFlagIcon(type)) {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FlagIcon, { name: type });
   }
@@ -2285,7 +2283,7 @@ var DynamicIcon = ({ type }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NamedIcon, { name: type });
   }
   return null;
-};
+}
 function isValidIconName(name) {
   return isNamedIcon(name) || isFlagIcon(name);
 }
@@ -2477,7 +2475,7 @@ var getButtonSize = (size) => {
 
 // src/legacy/layout/button/DynamicButton.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var DynamicButton = (props) => {
+function DynamicButton(props) {
   var _a;
   const { component, onAction } = props;
   const componentAction = component.action;
@@ -2493,12 +2491,12 @@ var DynamicButton = (props) => {
       priority,
       block: true,
       className,
-      disabled: component.disabled || componentAction.disabled || loading,
+      disabled: loading || component.disabled || componentAction.disabled,
       onClick: () => onAction(componentAction),
       children: (_a = component.title) != null ? _a : componentAction.title
     }
   );
-};
+}
 var DynamicButton_default = DynamicButton;
 
 // src/legacy/layout/columns/DynamicColumns.tsx
@@ -2558,22 +2556,19 @@ var import_components4 = require("@transferwise/components");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function DynamicDecision({ component, onAction }) {
   const { loading } = useDynamicFlow();
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getMargin(component.margin), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_components4.NavigationOptionsList, { children: component.options.map((option) => {
-    var _a;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_components4.NavigationOption,
-      {
-        title: option.title,
-        content: option.description,
-        disabled: (_a = option.disabled) != null ? _a : loading,
-        media: getNavigationOptionMedia(option),
-        showMediaCircle: false,
-        showMediaAtAllSizes: true,
-        onClick: () => onAction(option.action)
-      },
-      JSON.stringify(option)
-    );
-  }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getMargin(component.margin), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_components4.NavigationOptionsList, { children: component.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_components4.NavigationOption,
+    {
+      title: option.title,
+      content: option.description,
+      disabled: loading || option.disabled,
+      media: getNavigationOptionMedia(option),
+      showMediaCircle: false,
+      showMediaAtAllSizes: true,
+      onClick: () => onAction(option.action)
+    },
+    JSON.stringify(option)
+  )) }) });
 }
 var DynamicDecision_default = DynamicDecision;
 
@@ -3449,6 +3444,7 @@ ArraySchema.defaultProps = {
 var ArraySchema_default = ArraySchema;
 
 // src/legacy/jsonSchemaForm/objectSchema/ObjectSchema.tsx
+var import_components11 = require("@transferwise/components");
 var import_classnames3 = __toESM(require_classnames());
 var import_react14 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
@@ -3490,11 +3486,7 @@ function ObjectSchema(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
     props.schema.alert && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DynamicAlert_default, { component: props.schema.alert }),
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("fieldset", { children: [
-      props.schema.title && !props.hideTitle && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("legend", { children: [
-        " ",
-        props.schema.title,
-        " "
-      ] }),
+      props.schema.title && !props.hideTitle && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components11.Section, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components11.Header, { title: props.schema.title }) }),
       props.schema.description && !props.hideTitle && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { children: [
         " ",
         props.schema.description,
@@ -3532,12 +3524,12 @@ ObjectSchema.defaultProps = {
 var ObjectSchema_default = ObjectSchema;
 
 // src/legacy/jsonSchemaForm/oneOfSchema/OneOfSchema.tsx
-var import_components14 = require("@transferwise/components");
+var import_components15 = require("@transferwise/components");
 var import_classnames4 = __toESM(require_classnames());
 var import_react17 = require("react");
 
 // src/legacy/jsonSchemaForm/help/Help.tsx
-var import_components11 = require("@transferwise/components");
+var import_components12 = require("@transferwise/components");
 var import_react_intl13 = require("react-intl");
 
 // src/common/messages/help.messages.ts
@@ -3555,10 +3547,10 @@ var import_jsx_runtime26 = require("react/jsx-runtime");
 function Help(props) {
   const intl = (0, import_react_intl13.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_components11.Info,
+    import_components12.Info,
     {
       className: "m-l-1",
-      content: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_components11.Markdown, { children: props.help.markdown }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_components12.Markdown, { children: props.help.markdown }),
       presentation: "POPOVER",
       size: "sm",
       "aria-label": intl.formatMessage(help_messages_default.helpAria)
@@ -3571,7 +3563,7 @@ var Help_default = Help;
 var import_react16 = require("react");
 
 // src/legacy/formControl/FormControl.tsx
-var import_components12 = require("@transferwise/components");
+var import_components13 = require("@transferwise/components");
 var import_react15 = require("react");
 
 // src/legacy/formControl/utils/value-utils.ts
@@ -3851,7 +3843,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
     switch (type) {
       case FormControlType.RADIO:
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_components12.RadioGroup,
+          import_components13.RadioGroup,
           {
             radios: options.map(this.mapOption),
             name,
@@ -3861,7 +3853,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
         );
       case FormControlType.CHECKBOX:
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_components12.Checkbox,
+          import_components13.Checkbox,
           {
             checked: getSafeBooleanValue(value, { coerceValue: true }),
             disabled,
@@ -3876,7 +3868,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
       case FormControlType.SELECT: {
         const search = options.length >= 20;
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_components12.Select,
+          import_components13.Select,
           {
             id,
             selected: this.getSelectedOption(options),
@@ -3900,7 +3892,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
       }
       case FormControlType.TAB:
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_components12.Tabs,
+          import_components13.Tabs,
           {
             selected: ((_a = this.getSelectedOption(options)) == null ? void 0 : _a.value) || 0,
             tabs: options.map((option) => ({
@@ -3985,7 +3977,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
       case FormControlType.DATE:
       case FormControlType.DATETIME:
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_components12.DateInput,
+          import_components13.DateInput,
           {
             disabled,
             size,
@@ -3999,7 +3991,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
         );
       case FormControlType.DATELOOKUP: {
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_components12.DateLookup,
+          import_components13.DateLookup,
           {
             value: getSafeDateStringValue(value),
             min: minDate,
@@ -4017,7 +4009,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
       }
       case FormControlType.TEL:
         return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_components12.PhoneNumberInput,
+          import_components13.PhoneNumberInput,
           {
             disabled,
             countryCode,
@@ -4049,7 +4041,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
         };
         if (this.props.displayPattern) {
           return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            import_components12.TextareaWithDisplayFormat,
+            import_components13.TextareaWithDisplayFormat,
             __spreadProps(__spreadValues({
               displayPattern: this.props.displayPattern
             }, textareaProps), {
@@ -4071,7 +4063,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-expect-error - TODO: Remove this once Upload is migrated to TypeScript
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            import_components12.Upload,
+            import_components13.Upload,
             __spreadProps(__spreadValues({}, uploadProps), {
               usAccept: uploadProps.usAccept || "*",
               usDisabled: uploadProps.usDisabled || disabled,
@@ -4109,7 +4101,7 @@ var _FormControl = class _FormControl extends import_react15.PureComponent {
         };
         if (this.props.displayPattern) {
           return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            import_components12.InputWithDisplayFormat,
+            import_components13.InputWithDisplayFormat,
             __spreadProps(__spreadValues({
               displayPattern: this.props.displayPattern
             }, inputProps), {
@@ -4166,7 +4158,7 @@ _FormControl.defaultProps = {
 var FormControl = _FormControl;
 
 // src/legacy/jsonSchemaForm/schemaFormControl/utils/mapping-utils.tsx
-var import_components13 = require("@transferwise/components");
+var import_components14 = require("@transferwise/components");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var mapConstSchemaToOption = (schema, controlType) => {
   switch (controlType) {
@@ -4211,17 +4203,17 @@ var getIconPropertyForSelectOption = (icon) => {
 var getAvatarPropertyForRadioOption = ({ image, icon }) => {
   if (image == null ? void 0 : image.url) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components13.Avatar, { type: import_components13.AvatarType.THUMBNAIL, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { src: image.url, alt: "" }) })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components14.Avatar, { type: import_components14.AvatarType.THUMBNAIL, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { src: image.url, alt: "" }) })
     };
   }
   if ((icon == null ? void 0 : icon.name) && isValidIconName(icon.name)) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components13.Avatar, { type: import_components13.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DynamicIcon_default, { type: icon.name }) })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components14.Avatar, { type: import_components14.AvatarType.ICON, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DynamicIcon_default, { type: icon.name }) })
     };
   }
   if (icon == null ? void 0 : icon.text) {
     return {
-      avatar: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components13.Avatar, { type: import_components13.AvatarType.INITIALS, children: icon.text })
+      avatar: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components14.Avatar, { type: import_components14.AvatarType.INITIALS, children: icon.text })
     };
   }
   return null;
@@ -4505,7 +4497,7 @@ function getTitleAndHelp(schema, id) {
     schema.title,
     " ",
     helpElement
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components14.Header, { title: (_a = schema.title) != null ? _a : "" }) });
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components15.Header, { title: (_a = schema.title) != null ? _a : "" }) });
   return schema.title ? titleElement : helpElement;
 }
 function getValidations(props, schemaIndex) {
@@ -4545,7 +4537,7 @@ var import_classnames5 = __toESM(require_classnames());
 var import_react19 = require("react");
 
 // src/legacy/jsonSchemaForm/persistAsyncSchema/persistAsyncBlobSchema/UploadInputAdapter.tsx
-var import_components15 = require("@transferwise/components");
+var import_components16 = require("@transferwise/components");
 var import_react18 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function UploadInputAdapter(props) {
@@ -4563,7 +4555,7 @@ function UploadInputAdapter(props) {
     onCancel
   } = props;
   const onEvent = useEventDispatcher();
-  const files = (0, import_react18.useMemo)(() => fileId ? [{ id: fileId, status: import_components15.Status.SUCCEEDED }] : [], [fileId]);
+  const files = (0, import_react18.useMemo)(() => fileId ? [{ id: fileId, status: import_components16.Status.SUCCEEDED }] : [], [fileId]);
   const uploadFile = (formData) => {
     onEvent("Dynamic Flow - PersistAsync", { status: "pending", schemaId: id });
     return httpClient(String(httpOptions.url), {
@@ -4581,7 +4573,7 @@ function UploadInputAdapter(props) {
     });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_components15.UploadInput,
+    import_components16.UploadInput,
     {
       id,
       fileInputName: httpOptions.fileInputName,
@@ -4717,7 +4709,7 @@ var getSelectionFromModel = (schema, model) => {
 };
 
 // src/legacy/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfCheckboxControl.tsx
-var import_components16 = require("@transferwise/components");
+var import_components17 = require("@transferwise/components");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var PromotedOneOfCheckboxControl = (props) => {
   const { id, selection, setSelection } = props;
@@ -4729,13 +4721,13 @@ var PromotedOneOfCheckboxControl = (props) => {
   const toggleSelection = () => {
     setSelection(checked ? selectionWhenUnchecked : selectionWhenChecked);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_components16.Checkbox, { id, label: title, checked, onChange: toggleSelection }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "form-group", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_components17.Checkbox, { id, label: title, checked, onChange: toggleSelection }) });
 };
 PromotedOneOfCheckboxControl.defaultProps = {};
 var PromotedOneOfCheckboxControl_default = PromotedOneOfCheckboxControl;
 
 // src/legacy/jsonSchemaForm/promotedOneOfSchema/promotedOneOfControl/PromotedOneOfRadioControl.tsx
-var import_components17 = require("@transferwise/components");
+var import_components18 = require("@transferwise/components");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function PromotedOneOfRadioControl(props) {
   var _a, _b;
@@ -4756,7 +4748,7 @@ function PromotedOneOfRadioControl(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "form-group", children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { className: "control-label", htmlFor: id, children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-      import_components17.RadioGroup,
+      import_components18.RadioGroup,
       {
         name: "promoted-selection",
         selectedValue: selection,
@@ -4847,7 +4839,7 @@ function getOtherOneOf(schema) {
 var PromotedOneOfSchema_default = PromotedOneOfSchema;
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.tsx
-var import_components18 = require("@transferwise/components");
+var import_components19 = require("@transferwise/components");
 var import_react_intl15 = require("react-intl");
 
 // src/legacy/jsonSchemaForm/readOnlySchema/ReadOnlySchema.messages.js
@@ -4871,7 +4863,7 @@ function ReadOnlySchema({ schema, model }) {
   const { title = "" } = schema;
   const { formatMessage } = (0, import_react_intl15.useIntl)();
   const value = getValueForSchema({ schema, model, formatMessage });
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_components18.DefinitionList, { layout: import_components18.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_components19.DefinitionList, { layout: import_components19.Layout.VERTICAL_ONE_COLUMN, definitions: [{ title, value, key: "" }] });
 }
 var ReadOnlySchema_default = ReadOnlySchema;
 function getValueForSchema({
@@ -5096,7 +5088,7 @@ function DynamicForm({
 var DynamicForm_default = DynamicForm;
 
 // src/legacy/layout/heading/DynamicHeading.tsx
-var import_components19 = require("@transferwise/components");
+var import_components20 = require("@transferwise/components");
 var import_classnames6 = __toESM(require_classnames());
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var DynamicHeading = (props) => {
@@ -5123,30 +5115,30 @@ var DisplayHeading = ({ size, text, classes }) => {
   switch (size) {
     case "xs":
     case "sm":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components19.Display, { type: "display-small", className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components20.Display, { type: "display-small", className: classes, children: text });
     case "xl":
     case "lg":
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components19.Display, { type: "display-large", className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components20.Display, { type: "display-large", className: classes, children: text });
     case "md":
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components19.Display, { type: "display-medium", className: classes, children: text });
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components20.Display, { type: "display-medium", className: classes, children: text });
   }
 };
 var DynamicHeading_default = DynamicHeading;
 
 // src/legacy/layout/markdown/DynamicMarkdown.tsx
-var import_components20 = require("@transferwise/components");
+var import_components21 = require("@transferwise/components");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var DynamicMarkdown = ({ component }) => {
   const { content, align, margin } = component;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components20.Markdown, { config: { link: { target: "_blank" } }, children: content }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getTextAlignmentAndMargin({ align, margin }), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components21.Markdown, { config: { link: { target: "_blank" } }, children: content }) });
 };
 var DynamicInfo = ({ component }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getTextAlignmentAndMargin(component), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components20.Markdown, { config: { link: { target: "_blank" } }, children: component.markdown }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: getTextAlignmentAndMargin(component), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components21.Markdown, { config: { link: { target: "_blank" } }, children: component.markdown }) });
 };
 
 // src/legacy/layout/image/DynamicImage.tsx
-var import_components21 = require("@transferwise/components");
+var import_components22 = require("@transferwise/components");
 var import_react24 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function DynamicImage({ component: image }) {
@@ -5165,7 +5157,7 @@ function DynamicImage({ component: image }) {
   if (!imageSource) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_components21.Image, __spreadValues({ className: `img-responsive ${getMargin(margin || "md")}` }, imageProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `df-image ${size || "md"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_components22.Image, __spreadValues({ className: `img-responsive ${getMargin(margin || "md")}` }, imageProps)) });
 }
 var readImageBlobAsDataURL = (imageBlob) => (
   // we can safely assume the type of reader.result is string
@@ -5201,7 +5193,7 @@ var getImageSource = async (httpClient, imageUrl) => {
 var DynamicImage_default = DynamicImage;
 
 // src/legacy/layout/instructions/DynamicInstructions.tsx
-var import_components22 = require("@transferwise/components");
+var import_components23 = require("@transferwise/components");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var doContext = ["positive", "neutral"];
 var dontContext = ["warning", "negative"];
@@ -5210,8 +5202,8 @@ var DynamicInstructions = ({ component }) => {
   const dos = items.filter((item) => doContext.includes(item.context)).map(({ text }) => text);
   const donts = items.filter((item) => dontContext.includes(item.context)).map(({ text }) => text);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: getMargin(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_components22.Header, { title: component.title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_components22.InstructionsList, { dos, donts })
+    component.title ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_components23.Header, { title: component.title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_components23.InstructionsList, { dos, donts })
   ] });
 };
 var DynamicInstructions_default = DynamicInstructions;
@@ -5321,11 +5313,11 @@ function DynamicLayout(props) {
 var DynamicLayout_default = DynamicLayout;
 
 // src/legacy/layout/list/DynamicStatusList.tsx
-var import_components23 = require("@transferwise/components");
+var import_components24 = require("@transferwise/components");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var DynamicStatusList = ({ component }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: getMargin(component.margin || "md"), children: [
-    component.title ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components23.Header, { title: component.title }) : null,
+    component.title ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components24.Header, { title: component.title }) : null,
     component.items.map(mapListItemToSummary)
   ] });
 };
@@ -5335,7 +5327,7 @@ var mapListItemToSummary = ({ title, description, icon, status }) => {
     title,
     description
   }, (icon == null ? void 0 : icon.name) ? { icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DynamicIcon_default, { type: icon.name }) } : {}), status ? { status: statusMap[status] } : {});
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components23.Summary, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_components24.Summary, __spreadValues({}, props));
 };
 var statusListMap = {
   done: "done",
@@ -5351,12 +5343,12 @@ var statusMap = __spreadValues(__spreadValues({}, statusListMap), legacyStatusMa
 var DynamicStatusList_default = DynamicStatusList;
 
 // src/legacy/layout/loadingIndicator/DynamicLoadingIndicator.tsx
-var import_components24 = require("@transferwise/components");
+var import_components25 = require("@transferwise/components");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var DynamicLoadingIndicator = ({ component }) => {
   const { margin = "md", size = "md" } = component;
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-    import_components24.Loader,
+    import_components25.Loader,
     {
       size,
       classNames: {
@@ -5369,7 +5361,7 @@ var DynamicLoadingIndicator = ({ component }) => {
 var DynamicLoadingIndicator_default = DynamicLoadingIndicator;
 
 // src/legacy/layout/paragraph/DynamicParagraph.tsx
-var import_components26 = require("@transferwise/components");
+var import_components27 = require("@transferwise/components");
 var import_react_intl17 = require("react-intl");
 
 // src/common/messages/paragraph.messages.ts
@@ -5388,10 +5380,10 @@ var paragraph_messages_default = (0, import_react_intl16.defineMessages)({
 });
 
 // src/legacy/layout/paragraph/useSnackBarIfAvailable.ts
-var import_components25 = require("@transferwise/components");
+var import_components26 = require("@transferwise/components");
 var import_react25 = require("react");
 function useSnackBarIfAvailable() {
-  const context = (0, import_react25.useContext)(import_components25.SnackbarContext);
+  const context = (0, import_react25.useContext)(import_components26.SnackbarContext);
   return context ? context.createSnackbar : noop2;
 }
 function noop2() {
@@ -5432,7 +5424,7 @@ function CopyableDynamicParagraph({ component }) {
         style: { textOverflow: "ellipsis" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components26.Button, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components27.Button, { block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
   ] });
 }
 function noop3() {
@@ -5440,7 +5432,7 @@ function noop3() {
 var DynamicParagraph_default = DynamicParagraph;
 
 // src/legacy/layout/review/DynamicReview.tsx
-var import_components27 = require("@transferwise/components");
+var import_components28 = require("@transferwise/components");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var getDefinitions = (orientation, review) => review.fields.map(({ label, value, help }, index) => ({
   key: String(index),
@@ -5482,8 +5474,8 @@ function DynamicReview(props) {
   const callToAction = review.callToAction ? getReviewAction(review.callToAction.title, review.callToAction.action) : null;
   const legacyCallToAction = !callToAction && review.action ? getReviewAction(review.action.title || "", review.action) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: margin, children: [
-    review.title && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components27.Header, { title: review.title, action: callToAction || legacyCallToAction || void 0 }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components27.DefinitionList, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
+    review.title && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components28.Header, { title: review.title, action: callToAction || legacyCallToAction || void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components28.DefinitionList, { layout: orientation, definitions: getDefinitions(orientation, review) }) })
   ] });
 }
 var DynamicReview_default = DynamicReview;
@@ -5492,13 +5484,13 @@ var DynamicReview_default = DynamicReview;
 var import_react27 = require("react");
 
 // src/legacy/layout/search/SearchInput.tsx
-var import_components28 = require("@transferwise/components");
+var import_components29 = require("@transferwise/components");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var SearchInput = ({ title, value, onFocus, onChange }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("label", { className: "control-label d-inline", children: [
     title,
     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-      import_components28.Input,
+      import_components29.Input,
       {
         type: "text",
         value,
@@ -5511,7 +5503,7 @@ var SearchInput = ({ title, value, onFocus, onChange }) => {
 };
 
 // src/legacy/layout/search/SearchResults.tsx
-var import_components29 = require("@transferwise/components");
+var import_components30 = require("@transferwise/components");
 var import_react_intl19 = require("react-intl");
 
 // src/common/errorBoundary/ErrorBoundary.messages.ts
@@ -5535,9 +5527,9 @@ var SearchResults = ({ results, emptyMessage, onSelect }) => {
   if (results.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "m-t-2", children: emptyMessage });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components29.NavigationOptionsList, { children: results.map((result) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_components30.NavigationOptionsList, { children: results.map((result) => {
     return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      import_components29.NavigationOption,
+      import_components30.NavigationOption,
       {
         title: result.title,
         content: result.description,
@@ -5683,7 +5675,7 @@ function DynamicSearch({ component, onAction }) {
 var DynamicSearch_default = DynamicSearch;
 
 // src/legacy/layout/modal/DynamicModal.tsx
-var import_components30 = require("@transferwise/components");
+var import_components31 = require("@transferwise/components");
 var import_react28 = require("react");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var DynamicModal = (props) => {
@@ -5691,9 +5683,9 @@ var DynamicModal = (props) => {
   const { component, onAction } = props;
   const { margin = "md" } = component;
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: getTextAlignmentAndMargin({ margin }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_components30.Button, { priority: "tertiary", block: true, onClick: () => isVisible(true), children: component.trigger.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_components31.Button, { priority: "tertiary", block: true, onClick: () => isVisible(true), children: component.trigger.title }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-      import_components30.Modal,
+      import_components31.Modal,
       {
         scroll: "content",
         onClose: () => isVisible(false),
@@ -6236,7 +6228,7 @@ var CameraCapture_messages_default = (0, import_react_intl22.defineMessages)({
 });
 
 // src/legacy/step/cameraStep/cameraCapture/components/bottomBar/BottomBar.tsx
-var import_components31 = require("@transferwise/components");
+var import_components32 = require("@transferwise/components");
 var import_react_intl23 = require("react-intl");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var CaptureBottomBar = ({ onCapture }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "bottom-bar", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CaptureButton, { onClick: onCapture }) });
@@ -6247,24 +6239,24 @@ var ReviewBottomBar = ({
   const intl = (0, import_react_intl23.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "bottom-bar p-x-2", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "col-xs-12 col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-      import_components31.Button,
+      import_components32.Button,
       {
         className: "m-b-1",
         block: true,
-        size: import_components31.Size.MEDIUM,
-        type: import_components31.ControlType.ACCENT,
+        size: import_components32.Size.MEDIUM,
+        type: import_components32.ControlType.ACCENT,
         onClick: onSubmit,
         children: intl.formatMessage(CameraCapture_messages_default.reviewSubmit)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-      import_components31.Button,
+      import_components32.Button,
       {
         className: "m-b-2",
         block: true,
-        size: import_components31.Size.MEDIUM,
-        type: import_components31.ControlType.ACCENT,
-        priority: import_components31.Priority.SECONDARY,
+        size: import_components32.Size.MEDIUM,
+        type: import_components32.ControlType.ACCENT,
+        priority: import_components32.Priority.SECONDARY,
         onClick: onRetry,
         children: intl.formatMessage(CameraCapture_messages_default.reviewRetry)
       }
@@ -6316,13 +6308,13 @@ function OrientationLockOverlay() {
 var OrientationLockOverlay_default = OrientationLockOverlay;
 
 // src/legacy/step/cameraStep/cameraCapture/screens/cameraErrorScreen/CameraErrorScreen.tsx
-var import_components32 = require("@transferwise/components");
+var import_components33 = require("@transferwise/components");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 function CameraErrorScreen({ title, description, actionButton, onAction }) {
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "container p-t-5", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "row", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "col-md-6 col-md-offset-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("h2", { className: "text-xs-center m-b-3", children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-xs-center m-b-5", children: description }),
-    onAction && actionButton && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_components32.Button, { block: true, onClick: onAction, children: actionButton })
+    onAction && actionButton && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_components33.Button, { block: true, onClick: onAction, children: actionButton })
   ] }) }) });
 }
 var CameraErrorScreen_default = CameraErrorScreen;
@@ -6906,7 +6898,7 @@ function getOrigin(url) {
 }
 
 // src/legacy/dynamicFlow/BackButton.tsx
-var import_components34 = require("@transferwise/components");
+var import_components35 = require("@transferwise/components");
 var import_icons2 = require("@transferwise/icons");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 function BackButton({ title, action, onAction }) {
@@ -6922,7 +6914,7 @@ function BackButton({ title, action, onAction }) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "sr-only", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_components34.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_icons2.ArrowLeft, { size: "24" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_components35.Avatar, { type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_icons2.ArrowLeft, { size: "24" }) })
       ]
     }
   );
@@ -7090,19 +7082,19 @@ var getSchemaReference = (component) => {
 var isInlineSchema = (schema) => schema !== void 0 && typeof schema === "object" && !Object.hasOwnProperty.call(schema, "$ref");
 
 // src/legacy/dynamicFlow/utils/useLoader.tsx
-var import_components35 = require("@transferwise/components");
+var import_components36 = require("@transferwise/components");
 var import_react42 = require("react");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 function useLoader(loaderConfig, initialState) {
   const config = __spreadValues({
-    size: import_components35.Size.EXTRA_LARGE,
+    size: import_components36.Size.EXTRA_LARGE,
     initial: true,
     submission: false
   }, loaderConfig);
   const [loadingState, setLoadingState] = (0, import_react42.useState)(initialState);
   const shouldDisplayLoader = config.initial && loadingState === "initial" || config.submission && loadingState === "submission";
   const loader = shouldDisplayLoader ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-    import_components35.Loader,
+    import_components36.Loader,
     {
       size: config.size,
       classNames: { "tw-loader": "tw-loader m-x-auto" },
@@ -7116,20 +7108,20 @@ function useLoader(loaderConfig, initialState) {
 var import_react43 = require("react");
 
 // src/common/errorBoundary/ErrorBoundaryAlert.tsx
-var import_components36 = require("@transferwise/components");
+var import_components37 = require("@transferwise/components");
 var import_react_intl29 = require("react-intl");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 function ErrorBoundaryAlert({ onDismiss }) {
   const { formatMessage } = (0, import_react_intl29.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-    import_components36.Alert,
+    import_components37.Alert,
     {
       action: {
         text: formatMessage(ErrorBoundary_messages_default.retry),
         href: window.location.href
       },
       message: formatMessage(ErrorBoundary_messages_default.errorAlert),
-      type: import_components36.Sentiment.NEGATIVE,
+      type: import_components37.Sentiment.NEGATIVE,
       className: "m-b-3",
       onDismiss
     }