@wise/dynamic-flow-client-internal 5.17.0 → 5.19.0

package/build/main.js

@@ -35,7 +35,11 @@ var __objRest = (source, exclude) => {
   return target;
 };
 var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  try {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  } catch (e) {
+    throw mod = 0, e;
+  }
 };
 var __export = (target, all) => {
   for (var name in all)
@@ -141,7 +145,7 @@ var import_dynamic_flow_client4 = require("@wise/dynamic-flow-client");
 // src/dynamicFlow/telemetry/app-version.ts
 var appVersion = (
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeof process !== "undefined" ? "5.17.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.19.0" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -226,27 +230,29 @@ var useDFContextMenu = (controller) => {
         }
       },
       {
-        label: "Open in Sandbox",
+        label: "Copy step JSON",
         onClick: () => {
-          openInSandbox(getEncodedCurrentStep());
+          copyToClipboard(getCurrentStep());
         }
       },
       {
-        label: "Open in Sandbox (with model)",
+        label: "Open in Studio (experimental)",
         onClick: () => {
-          void getEncodedCurrentStepWithModel().then(openInSandbox);
+          openIn("studio", getEncodedCurrentStep());
         }
       },
       {
-        label: "Copy step JSON",
+        label: "Open in Sandbox",
         onClick: () => {
-          copyToClipboard(getCurrentStep());
+          openIn("sandbox", getEncodedCurrentStep());
         }
       },
       {
-        label: "Copy step JSON (with model)",
+        label: "Open in Sandbox (with model)",
         onClick: () => {
-          void getCurrentStepWithModel().then(copyToClipboard);
+          void getEncodedCurrentStepWithModel().then(
+            (base64Step) => openIn("sandbox", base64Step)
+          );
         }
       }
     ] : []
@@ -257,9 +263,9 @@ var toBase64 = (str) => {
   const binString = Array.from(bytes, (b) => String.fromCharCode(b)).join("");
   return btoa(binString);
 };
-var openInSandbox = (base64Step) => {
+var openIn = (editor, base64Step) => {
   if (base64Step) {
-    window.open(`https://df.wise.com/sandbox#${base64Step}`, "_blank", "noopener,noreferrer");
+    window.open(`https://df.wise.com/${editor}#${base64Step}`, "_blank", "noopener,noreferrer");
   }
 };
 var openVersionPage = (version) => {
@@ -323,56 +329,10 @@ var recursivelyRemoveNullish = (element) => {
 };
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
-var import_react24 = require("react");
-
-// src/dynamicFlow/telemetry/getLogEvent.ts
-var getLogEvent = (onLog) => (level, message, extra) => {
-  const extraWithVersion = __spreadProps(__spreadValues({}, extra), {
-    dfWiseVersion: appVersion
-  });
-  if (level !== "info" && onLog) {
-    if (onLog) {
-      onLog(level, message, extraWithVersion);
-    } else {
-      logToRollbar(level, message, extraWithVersion);
-    }
-  }
-};
-var logToRollbar = (level, message, extra) => {
-  try {
-    const rollbar = typeof window.Rollbar !== "undefined" ? window.Rollbar : void 0;
-    rollbar == null ? void 0 : rollbar[level](message, extra);
-  } catch (error) {
-    console.error("Failed to log to Rollbar", error);
-  }
-};
+var import_react26 = require("react");
 
-// src/dynamicFlow/telemetry/getTrackEvent.ts
-var import_dynamic_flow_client = require("@wise/dynamic-flow-client");
-var prefix = "Dynamic Flow - ";
-var getTrackEvent = (onEvent, onAnalytics) => (name, properties) => {
-  onEvent == null ? void 0 : onEvent(name, properties);
-  if (includeInAnalytics(name)) {
-    onAnalytics == null ? void 0 : onAnalytics(name, properties);
-  }
-};
-var includeInAnalytics = (name) => {
-  const eventName = name.startsWith(prefix) ? name.slice(prefix.length) : name;
-  if (isCoreEventName(eventName)) {
-    return true;
-  }
-  if (eventName in customEventsToAnalytics) {
-    return customEventsToAnalytics[eventName];
-  }
-  return true;
-};
-var isCoreEventName = (eventName) => {
-  return import_dynamic_flow_client.eventNames.includes(eventName);
-};
-var customEventsToAnalytics = {
-  "Theme Required": false
-  // Excluded from analytics
-};
+// src/dynamicFlow/getMergedRenderers.tsx
+var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
 
 // ../renderers/src/AlertRenderer.tsx
 var import_components = require("@transferwise/components");
@@ -423,10 +383,10 @@ var AlertRenderer = {
 };
 var mapCtaToAlertAction = (callToAction) => {
   if (callToAction) {
-    return __spreadValues(__spreadValues({
+    return __spreadValues({
       text: callToAction.title,
       "aria-label": callToAction.accessibilityDescription
-    }, "onClick" in callToAction ? { onClick: callToAction.onClick } : {}), callToAction.href ? { href: callToAction.href, target: "_blank" } : {});
+    }, callToAction.getAnchorProps());
   }
   return void 0;
 };
@@ -911,6 +871,18 @@ var getPriority = (control, tags) => {
 
 // ../renderers/src/components/FieldInput.tsx
 var import_components8 = require("@transferwise/components");
+var import_react4 = require("react");
+
+// ../renderers/src/utils/scroll-to-if-not-visible.ts
+var scrollToIfNotVisible = (ref) => {
+  const rect = ref == null ? void 0 : ref.getBoundingClientRect();
+  if (!ref || !rect) {
+    return;
+  }
+  if (rect.bottom > window.innerHeight || rect.top < 0) {
+    ref.scrollIntoView({ behavior: "instant" });
+  }
+};
 
 // ../renderers/src/components/Help.tsx
 var import_components7 = require("@transferwise/components");
@@ -954,28 +926,47 @@ function LabelContentWithHelp({ text, help }) {
 
 // ../renderers/src/components/FieldInput.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-function FieldInput({ id, children, label, validation, description, help }) {
+function FieldInput({
+  id,
+  children,
+  label,
+  validation,
+  description,
+  help,
+  loadingState = "idle",
+  inlineAlert
+}) {
   const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LabelContentWithHelp, { text: label, help }) : label;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  const message = validation == null ? void 0 : validation.message;
+  const ref = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (message) {
+      scrollToIfNotVisible(ref.current);
+    }
+  }, [message]);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_components8.Field,
     {
       id,
       label: labelContent,
       description,
-      message: validation == null ? void 0 : validation.message,
-      sentiment: mapStatusToSentiment(validation),
+      message: message != null ? message : inlineAlert == null ? void 0 : inlineAlert.content,
+      messageLoading: loadingState !== "idle",
+      sentiment: mapStatusToSentiment(validation, inlineAlert == null ? void 0 : inlineAlert.context),
       children
     }
-  );
+  ) });
 }
-var mapStatusToSentiment = (validation) => {
-  if (validation) {
-    if (validation.status === "valid") {
-      return "positive";
+var mapStatusToSentiment = (validation, defaultContext) => {
+  if (validation == null ? void 0 : validation.message) {
+    switch (validation.status) {
+      case "valid":
+        return "positive";
+      case "invalid":
+        return "negative";
     }
-    return "negative";
   }
-  return void 0;
+  return defaultContext;
 };
 var FieldInput_default = FieldInput;
 
@@ -1043,7 +1034,19 @@ var CheckboxComponent = (props) => {
     "value"
   ]);
   const checkboxProps = __spreadProps(__spreadValues({}, rest), { label: title, secondary: description, checked: value });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FieldInput_default, { id, label: "", description: "", validation: validationState, help, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components11.Checkbox, __spreadValues({ id }, checkboxProps)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    FieldInput_default,
+    {
+      id,
+      label: "",
+      description: "",
+      validation: validationState,
+      help,
+      inlineAlert: rest.inlineAlert,
+      loadingState: rest.fieldLoadingState,
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components11.Checkbox, __spreadValues({ id }, checkboxProps))
+    }
+  );
 };
 var CheckboxItemComponent = (props) => {
   const {
@@ -1098,7 +1101,7 @@ var SwitchItemComponent = (props) => {
   );
 };
 var getInlineAlertOrValidation = (validationState, inlineAlert) => {
-  if (validationState && validationState.status === "invalid") {
+  if ((validationState == null ? void 0 : validationState.status) === "invalid") {
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components11.ListItem.Prompt, { sentiment: "negative", children: validationState.message });
   }
   return getInlineAlert(inlineAlert);
@@ -1235,6 +1238,8 @@ var DateInputRenderer = {
         label: title,
         description,
         validation: validationState,
+        inlineAlert: props.inlineAlert,
+        loadingState: props.fieldLoadingState,
         help,
         children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VariableDateInput_default, { control, inputProps })
       }
@@ -1250,6 +1255,7 @@ var import_components16 = require("@transferwise/components");
 var import_components13 = require("@transferwise/components");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var getAdditionalInfo = (additionalInfo) => {
+  var _a, _b;
   if (!additionalInfo) {
     return void 0;
   }
@@ -1258,12 +1264,9 @@ var getAdditionalInfo = (additionalInfo) => {
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       import_components13.ListItem.AdditionalInfo,
       {
-        action: {
-          label: text,
-          href,
-          onClick,
-          target: "_blank"
-        }
+        action: __spreadValues({
+          label: text
+        }, (_b = (_a = additionalInfo.getAnchorProps) == null ? void 0 : _a.call(additionalInfo)) != null ? _b : { onClick })
       }
     );
   }
@@ -1278,7 +1281,7 @@ var shouldUseAvatar = (control, tags) => {
 
 // ../renderers/src/DecisionRenderer/DecisionWrapper.tsx
 var import_components15 = require("@transferwise/components");
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_intl8 = require("react-intl");
 
 // ../renderers/src/messages/filter.messages.ts
@@ -1424,7 +1427,7 @@ var UnfilteredDecisionList = (_a) => {
 };
 var FilteredDecisionList = (props) => {
   const { formatMessage } = (0, import_react_intl8.useIntl)();
-  const [query, setQuery] = (0, import_react4.useState)("");
+  const [query, setQuery] = (0, import_react5.useState)("");
   const { control, options, renderDecisionList: renderDecisionList2 } = props;
   const filteredOptions = (query == null ? void 0 : query.length) > 0 ? filterAndSortDecisionOptions(options, query) : options;
   const isGrouped = isGroupedDecision(options);
@@ -1466,7 +1469,7 @@ var renderDecisionList = ({ options, control }) => {
       disabled,
       media,
       title: itemTitle,
-      href,
+      getAnchorProps,
       additionalText,
       inlineAlert,
       supportingValues,
@@ -1484,7 +1487,7 @@ var renderDecisionList = ({ options, control }) => {
         media: getMedia(media, shouldUseAvatar(control, tags)),
         prompt: getInlineAlert(inlineAlert),
         additionalInfo: additionalText ? getAdditionalInfo({ text: additionalText }) : void 0,
-        control: href ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components16.ListItem.Navigation, { href, target: "_blank" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components16.ListItem.Navigation, { onClick })
+        control: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components16.ListItem.Navigation, __spreadValues({}, getAnchorProps()))
       },
       JSON.stringify(rest)
     );
@@ -1541,7 +1544,7 @@ var external_confirmation_messages_default = (0, import_react_intl9.defineMessag
 
 // ../renderers/src/ExternalConfirmationRenderer.tsx
 var import_react_intl10 = require("react-intl");
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var ExternalConfirmationRenderer = {
   canRenderType: "external-confirmation",
@@ -1554,7 +1557,7 @@ function ExternalConfirmationRendererComponent({
   onCancel
 }) {
   const { formatMessage } = (0, import_react_intl10.useIntl)();
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     open();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -1668,7 +1671,7 @@ var HeadingRenderer_default = HeadingRenderer;
 
 // ../renderers/src/ImageRenderer/UrlImage.tsx
 var import_components21 = require("@transferwise/components");
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // ../renderers/src/utils/api-utils.ts
 function isRelativePath(url = "") {
@@ -1687,8 +1690,8 @@ function UrlImage({
   uri,
   httpClient
 }) {
-  const [imageSource, setImageSource] = (0, import_react6.useState)("");
-  (0, import_react6.useEffect)(() => {
+  const [imageSource, setImageSource] = (0, import_react7.useState)("");
+  (0, import_react7.useEffect)(() => {
     if (!uri.startsWith("urn:")) {
       void getImageSource(httpClient, uri).then(setImageSource);
     }
@@ -1751,7 +1754,7 @@ function UrnFlagImage({
 
 // ../renderers/src/ImageRenderer/UrnIllustration.tsx
 var import_art4 = require("@wise/art");
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // ../renderers/src/ImageRenderer/isAnimated.ts
 var isAnimated = (uri) => {
@@ -1761,9 +1764,9 @@ var isAnimated = (uri) => {
 
 // ../renderers/src/ImageRenderer/SafeIllustration3D.tsx
 var import_art3 = require("@wise/art");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var Illustration3DErrorBoundary = class extends import_react7.Component {
+var Illustration3DErrorBoundary = class extends import_react8.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -1801,7 +1804,7 @@ function UrnIllustration({
   size,
   uri
 }) {
-  const [has3DFailed, setHas3DFailed] = (0, import_react8.useState)(false);
+  const [has3DFailed, setHas3DFailed] = (0, import_react9.useState)(false);
   const illustrationSize = getIllustrationSize(size);
   const illustrationName = getIllustrationName(uri);
   const illustration3DName = getIllustration3DName(uri);
@@ -1924,6 +1927,8 @@ var IntegerInputRenderer = {
         label: title,
         description,
         validation: validationState,
+        inlineAlert: props.inlineAlert,
+        loadingState: props.fieldLoadingState,
         help,
         children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_components23.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           import_components23.Input,
@@ -1957,33 +1962,17 @@ var getCTAControl = (callToAction, { ctaSecondary, fullyInteractive }) => {
   if (!callToAction) {
     return void 0;
   }
-  const { accessibilityDescription, href, title, context, onClick } = callToAction;
+  const { accessibilityDescription, title, context } = callToAction;
   const { priority, sentiment } = getPriorityAndSentiment(ctaSecondary, context);
-  if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      import_components24.ListItem.Button,
-      {
-        href,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        partiallyInteractive: !fullyInteractive,
-        priority,
-        "aria-description": accessibilityDescription,
-        sentiment,
-        children: title
-      }
-    );
-  }
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_components24.ListItem.Button,
-    {
-      "aria-description": accessibilityDescription,
+    __spreadProps(__spreadValues({}, callToAction.getAnchorProps()), {
       partiallyInteractive: !fullyInteractive,
       priority,
+      "aria-description": accessibilityDescription,
       sentiment,
-      onClick,
       children: title
-    }
+    })
   );
 };
 var getPriorityAndSentiment = (ctaSecondary, context) => {
@@ -2001,20 +1990,10 @@ var getHeaderAction = (callToAction) => {
   if (!callToAction) {
     return void 0;
   }
-  const { accessibilityDescription, href, title, onClick } = callToAction;
-  return href ? {
-    "aria-label": accessibilityDescription,
-    text: title,
-    href,
-    target: "_blank"
-  } : {
-    "aria-label": accessibilityDescription,
-    text: title,
-    onClick: (event) => {
-      event.preventDefault();
-      onClick();
-    }
-  };
+  return __spreadValues({
+    "aria-label": callToAction.accessibilityDescription,
+    text: callToAction.title
+  }, callToAction.getAnchorProps());
 };
 
 // ../renderers/src/ListRenderer.tsx
@@ -2139,7 +2118,7 @@ var mapAvatarMediaSize = (size) => {
 
 // ../renderers/src/ModalLayoutRenderer.tsx
 var import_components29 = require("@transferwise/components");
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var ModalLayoutRenderer = {
   canRenderType: "modal-layout",
@@ -2147,7 +2126,7 @@ var ModalLayoutRenderer = {
 };
 var ModalLayoutRenderer_default = ModalLayoutRenderer;
 function DFModal({ content, margin, trigger }) {
-  const [visible, setVisible] = (0, import_react9.useState)(false);
+  const [visible, setVisible] = (0, import_react10.useState)(false);
   const { children, title } = content;
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components29.Button, { v2: true, priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
@@ -2177,7 +2156,7 @@ var ModalRenderer = {
 
 // ../renderers/src/MoneyInputRenderer.tsx
 var import_components31 = require("@transferwise/components");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_intl11 = require("react-intl");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var groupingTags2 = Object.keys(group_messages_default).filter((key) => key !== "all");
@@ -2200,7 +2179,7 @@ function MoneyInputRendererComponent(props) {
     onAmountChange,
     onCurrencyChange
   } = props;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!isValidIndex(selectedCurrencyIndex, currencies.length)) {
       onCurrencyChange(0);
     }
@@ -2342,7 +2321,7 @@ function InlineComponent(props) {
 
 // ../renderers/src/MultiSelectInputRenderer/DefaultComponent.tsx
 var import_components33 = require("@transferwise/components");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_intl13 = require("react-intl");
 
 // ../renderers/src/messages/multi-select.messages.ts
@@ -2359,7 +2338,7 @@ var multi_select_messages_default = (0, import_react_intl12.defineMessages)({
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function DefaultComponent(props) {
   const { formatMessage } = (0, import_react_intl13.useIntl)();
-  const [stagedIndices, setStagedIndices] = (0, import_react11.useState)();
+  const [stagedIndices, setStagedIndices] = (0, import_react12.useState)();
   const {
     id,
     autoComplete,
@@ -2517,6 +2496,7 @@ var MultiSelectInputRenderer = {
 var import_components36 = require("@transferwise/components");
 
 // ../renderers/src/components/UploadFieldInput.tsx
+var import_react13 = require("react");
 var import_components35 = require("@transferwise/components");
 var import_classnames4 = __toESM(require_classnames());
 var import_jsx_runtime57 = require("react/jsx-runtime");
@@ -2530,9 +2510,17 @@ function UploadFieldInput({
 }) {
   const labelContent = label && help ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(LabelContentWithHelp, { text: label, help }) : label;
   const descriptionId = description ? `${id}-description` : void 0;
+  const message = validation == null ? void 0 : validation.message;
+  const ref = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
+    if (message) {
+      scrollToIfNotVisible(ref.current);
+    }
+  }, [message]);
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "div",
     {
+      ref,
       className: (0, import_classnames4.default)("form-group d-block", {
         "has-error": (validation == null ? void 0 : validation.status) === "invalid"
       }),
@@ -2657,6 +2645,8 @@ var NumberInputRenderer = {
         label: title,
         description,
         validation: validationState,
+        inlineAlert: props.inlineAlert,
+        loadingState: props.fieldLoadingState,
         help,
         children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_components37.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           import_components37.Input,
@@ -2683,9 +2673,9 @@ var import_react_intl15 = require("react-intl");
 
 // ../renderers/src/hooks/useSnackBarIfAvailable.ts
 var import_components38 = require("@transferwise/components");
-var import_react12 = require("react");
+var import_react14 = require("react");
 function useSnackBarIfAvailable() {
-  const context = (0, import_react12.useContext)(import_components38.SnackbarContext);
+  const context = (0, import_react14.useContext)(import_components38.SnackbarContext);
   return context ? context.createSnackbar : () => {
   };
 }
@@ -2779,7 +2769,7 @@ var ProgressRenderer = {
 var import_components41 = require("@transferwise/components");
 var import_icons = require("@transferwise/icons");
 var import_classnames6 = __toESM(require_classnames());
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_react_intl17 = require("react-intl");
 
 // ../renderers/src/messages/repeatable.messages.ts
@@ -2828,7 +2818,7 @@ function Repeatable(props) {
     onRemove
   } = props;
   const { formatMessage } = (0, import_react_intl17.useIntl)();
-  const [openModalType, setOpenModalType] = (0, import_react13.useState)(null);
+  const [openModalType, setOpenModalType] = (0, import_react15.useState)(null);
   const onAddItem = () => {
     onAdd();
     setOpenModalType("add");
@@ -3047,7 +3037,7 @@ var ReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 var import_components45 = require("@transferwise/components");
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_react_intl22 = require("react-intl");
 
 // ../renderers/src/messages/search.messages.ts
@@ -3109,7 +3099,7 @@ function BlockSearchRendererComponent({
   trackEvent,
   onChange
 }) {
-  const [hasSearched, setHasSearched] = (0, import_react14.useState)(false);
+  const [hasSearched, setHasSearched] = (0, import_react16.useState)(false);
   const { formatMessage } = (0, import_react_intl22.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_components45.InputGroup, { addonStart: { content: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_icons3.Search, { size: 24 }) }, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
@@ -3190,7 +3180,7 @@ var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
 var import_components46 = require("@transferwise/components");
 var import_icons4 = require("@transferwise/icons");
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_react_intl23 = require("react-intl");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 function InlineSearchRenderer({
@@ -3203,7 +3193,7 @@ function InlineSearchRenderer({
   title,
   trackEvent
 }) {
-  const [hasSearched, setHasSearched] = (0, import_react15.useState)(false);
+  const [hasSearched, setHasSearched] = (0, import_react17.useState)(false);
   const intl = (0, import_react_intl23.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FieldInput_default, { id, description: "", validation: void 0, help: "", label: title, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     import_components46.Typeahead,
@@ -3363,7 +3353,7 @@ function RadioInputRendererComponent(props) {
 
 // ../renderers/src/SelectInputRenderer/TabInputRendererComponent.tsx
 var import_components49 = require("@transferwise/components");
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 function TabInputRendererComponent(props) {
   const {
@@ -3378,7 +3368,7 @@ function TabInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!isValidIndex2(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3491,7 +3481,7 @@ function SelectInputRendererComponent(props) {
 }
 
 // ../renderers/src/SelectInputRenderer/SegmentedInputRendererComponent.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 var import_components51 = require("@transferwise/components");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 function SegmentedInputRendererComponent(props) {
@@ -3506,7 +3496,7 @@ function SegmentedInputRendererComponent(props) {
     validationState,
     onSelect
   } = props;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isValidIndex3(selectedIndex, options.length)) {
       onSelect(0);
     }
@@ -3624,7 +3614,7 @@ var StatusListRenderer = {
   render: ({ margin, items, title }) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: getMargin(margin), children: [
     title ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_components53.Header, { title }) : null,
     items.map((item) => {
-      const { callToAction, description, icon, status, title: itemTitle } = item;
+      const { callToAction, description, title: itemTitle } = item;
       return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
         import_components53.ListItem,
         {
@@ -3634,12 +3624,9 @@ var StatusListRenderer = {
           additionalInfo: callToAction ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
             import_components53.ListItem.AdditionalInfo,
             {
-              action: {
-                href: callToAction.href,
-                onClick: callToAction.href ? void 0 : callToAction.onClick,
-                label: callToAction.title,
-                target: "_blank"
-              }
+              action: __spreadValues({
+                label: callToAction.title
+              }, callToAction.getAnchorProps())
             }
           ) : void 0
         },
@@ -3674,12 +3661,12 @@ var StatusListRenderer_default = StatusListRenderer;
 
 // ../renderers/src/utils/useCustomTheme.ts
 var import_components_theming = require("@wise/components-theming");
-var import_react18 = require("react");
+var import_react20 = require("react");
 var ThemeRequiredEventName = "Theme Required";
 var useCustomTheme = (theme, trackEvent) => {
   const theming = (0, import_components_theming.useTheme)();
-  const previousTheme = (0, import_react18.useMemo)(() => theming.theme, []);
-  (0, import_react18.useEffect)(() => {
+  const previousTheme = (0, import_react20.useMemo)(() => theming.theme, []);
+  (0, import_react20.useEffect)(() => {
     theming.setTheme(theme);
     trackEvent(ThemeRequiredEventName, { theme });
     return theme !== previousTheme ? () => {
@@ -3692,7 +3679,7 @@ var useCustomTheme = (theme, trackEvent) => {
 
 // ../renderers/src/step/StepFooter.tsx
 var import_components54 = require("@transferwise/components");
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_react_intl25 = require("react-intl");
 
 // ../renderers/src/messages/step.messages.ts
@@ -3720,7 +3707,7 @@ var DefaultFooter = ({ footer }) => {
 };
 var FooterWithScrollButton = ({ footer }) => {
   const { formatMessage } = (0, import_react_intl25.useIntl)();
-  const endOfLayoutRef = (0, import_react19.useRef)(null);
+  const endOfLayoutRef = (0, import_react21.useRef)(null);
   const isElementVisible = useIsElementVisible(endOfLayoutRef);
   const scrollButton = /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     import_components54.Button,
@@ -3749,8 +3736,8 @@ var FooterWithScrollButton = ({ footer }) => {
   ] });
 };
 var useIsElementVisible = (elementRef) => {
-  const [isVisible, setIsVisible] = (0, import_react19.useState)(false);
-  (0, import_react19.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react21.useState)(false);
+  (0, import_react21.useEffect)(() => {
     const element = elementRef.current;
     if (!element) return;
     const observer = new IntersectionObserver(([entry]) => {
@@ -3934,7 +3921,7 @@ function StepRendererComponent(props) {
 
 // ../renderers/src/TabsRenderer.tsx
 var import_components59 = require("@transferwise/components");
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var TabsRenderer = {
   canRenderType: "tabs",
@@ -3953,7 +3940,7 @@ var TabsRenderer = {
   }
 };
 function TabsRendererComponent({ uid, margin, tabs }) {
-  const [selectedIndex, setSelectedIndex] = (0, import_react20.useState)(0);
+  const [selectedIndex, setSelectedIndex] = (0, import_react22.useState)(0);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: getMargin(margin), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     import_components59.Tabs,
     {
@@ -3974,7 +3961,7 @@ function TabsRendererComponent({ uid, margin, tabs }) {
 }
 function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = (0, import_react20.useState)(0);
+  const [selectedIndex, setSelectedIndex] = (0, import_react22.useState)(0);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       import_components59.SegmentedControl,
@@ -3996,7 +3983,7 @@ function SegmentedTabsRendererComponent({ uid, margin, tabs }) {
 }
 function ChipsTabsRendererComponent({ margin, tabs }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = (0, import_react20.useState)(0);
+  const [selectedIndex, setSelectedIndex] = (0, import_react22.useState)(0);
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "chips-container", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       import_components59.Chips,
@@ -4104,6 +4091,8 @@ var TextInputRenderer = {
         label: title,
         description,
         validation: validationState,
+        inlineAlert: props.inlineAlert,
+        loadingState: props.fieldLoadingState,
         help,
         children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_components61.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(VariableTextInput, __spreadValues({}, inputProps)) })
       }
@@ -4233,7 +4222,7 @@ var LargeUploadRenderer = {
 
 // ../renderers/src/UpsellRenderer.tsx
 var import_components63 = require("@transferwise/components");
-var import_react21 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -4241,19 +4230,16 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss } = props;
-  const [isVisible, setIsVisible] = (0, import_react21.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react23.useState)(true);
   return isVisible ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     import_components63.Nudge,
     {
       className: getMargin(margin),
       mediaName: getMediaName(media),
       title: text,
-      action: {
-        href: callToAction.href,
-        onClick: callToAction.href ? void 0 : callToAction.onClick,
-        target: callToAction.href ? "_blank" : void 0,
+      action: __spreadValues({
         text: callToAction.title
-      },
+      }, callToAction.getAnchorProps()),
       onDismiss: onDismiss ? () => {
         setIsVisible(false);
         onDismiss();
@@ -4263,7 +4249,7 @@ function UpsellRendererComponent(props) {
 }
 var urnPrefix2 = "urn:wise:illustrations:";
 var getMediaName = (media) => {
-  if (media && media.type === "image" && media.uri.startsWith(urnPrefix2)) {
+  if ((media == null ? void 0 : media.type) === "image" && media.uri.startsWith(urnPrefix2)) {
     const mediaName = media.uri.substring(urnPrefix2.length);
     if (supportedMediaNames.includes(mediaName)) {
       return mediaName;
@@ -4382,8 +4368,117 @@ var InitialLoadingStateRenderer = {
   )
 };
 
+// src/dynamicFlow/DynamicFlowModal.tsx
+var import_dynamic_flow_client = require("@wise/dynamic-flow-client");
+var import_components66 = require("@transferwise/components");
+var import_jsx_runtime92 = require("react/jsx-runtime");
+function DynamicFlowModal(props) {
+  const _a = props, { className = "" } = _a, rest = __objRest(_a, ["className"]);
+  const dfProps = useWiseToCoreProps(rest);
+  const df = (0, import_dynamic_flow_client.useDynamicFlowModal)(dfProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    import_components66.Modal,
+    __spreadProps(__spreadValues({
+      className: `dynamic-flow-modal ${className}`,
+      disableDimmerClickToClose: true
+    }, df.modal), {
+      body: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "dynamic-flow-modal", children: df.modal.body })
+    })
+  );
+}
+
+// src/dynamicFlow/getMergedRenderers.tsx
+var import_jsx_runtime93 = require("react/jsx-runtime");
+var wiseRenderers = getWiseRenderers();
+var getMergedRenderers = (props) => {
+  var _d, _e;
+  const _a = props, { initialAction, initialStep } = _a, restProps = __objRest(_a, ["initialAction", "initialStep"]);
+  const subflowFeatures = __spreadProps(__spreadValues({}, props.features), { nativeBack: true });
+  const subflowRenderer = (0, import_dynamic_flow_client2.getDynamicSubflowRenderer)({
+    Component: (_b) => {
+      var _c = _b, { presentation, initialRequest } = _c, rest = __objRest(_c, ["presentation", "initialRequest"]);
+      const action = {
+        url: initialRequest.url,
+        method: initialRequest.method,
+        data: initialRequest.body
+      };
+      return presentation.type === "push" ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(DynamicFlow, __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), { features: subflowFeatures, initialAction: action })) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+        DynamicFlowModal,
+        __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), {
+          features: subflowFeatures,
+          initialAction: action
+        })
+      );
+    }
+  });
+  const loadingStateRenderer = ((_d = props.features) == null ? void 0 : _d.initialLoader) ? [InitialLoadingStateRenderer] : [];
+  return [...(_e = props.renderers) != null ? _e : [], subflowRenderer, ...loadingStateRenderer, ...wiseRenderers];
+};
+
+// src/dynamicFlow/telemetry/getLogEvent.ts
+var getLogEvent = (onLog) => (level, message, extra) => {
+  const extraWithVersion = __spreadProps(__spreadValues({}, extra), {
+    dfWiseVersion: appVersion
+  });
+  if (level !== "info" && onLog) {
+    if (onLog) {
+      onLog(level, message, extraWithVersion);
+    } else {
+      logToRollbar(level, message, extraWithVersion);
+    }
+  }
+};
+var logToRollbar = (level, message, extra) => {
+  try {
+    const rollbar = typeof window.Rollbar !== "undefined" ? window.Rollbar : void 0;
+    rollbar == null ? void 0 : rollbar[level](message, extra);
+  } catch (error) {
+    console.error("Failed to log to Rollbar", error);
+  }
+};
+
+// src/dynamicFlow/telemetry/getTrackEvent.ts
+var import_dynamic_flow_client3 = require("@wise/dynamic-flow-client");
+
+// src/dynamicFlow/telemetry/dispatchAnalyticsEvent.ts
+var dispatchAnalyticsEvent = (eventName, properties) => {
+  const props = __spreadValues({ dfFallbackAnalytics: true }, properties);
+  if (typeof window !== "undefined" && window.mixpanel && typeof window.mixpanel.track === "function") {
+    window.mixpanel.track(eventName, props);
+  }
+};
+
+// src/dynamicFlow/telemetry/getTrackEvent.ts
+var prefix = "Dynamic Flow - ";
+var getTrackEvent = (onEvent, onAnalytics) => {
+  const dispatchAnalytics = !onAnalytics && !onEvent ? dispatchAnalyticsEvent : onAnalytics;
+  return (name, properties) => {
+    onEvent == null ? void 0 : onEvent(name, properties);
+    if (includeInAnalytics(name)) {
+      dispatchAnalytics == null ? void 0 : dispatchAnalytics(name, properties);
+    }
+  };
+};
+var includeInAnalytics = (name) => {
+  const eventName = name.startsWith(prefix) ? name.slice(prefix.length) : name;
+  if (isCoreEventName(eventName)) {
+    return true;
+  }
+  if (eventName in customEventsToAnalytics) {
+    return customEventsToAnalytics[eventName];
+  }
+  return true;
+};
+var isCoreEventName = (eventName) => {
+  return import_dynamic_flow_client3.eventNames.includes(eventName);
+};
+var customEventsToAnalytics = {
+  "Theme Required": false
+  // Excluded from analytics
+};
+
 // src/dynamicFlow/useOnCopy.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_react_intl29 = require("react-intl");
 
 // src/dynamicFlow/messages.ts
@@ -4405,7 +4500,7 @@ var messages_default = (0, import_react_intl28.defineMessages)({
 var useOnCopy = () => {
   const { formatMessage } = (0, import_react_intl29.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
-  return (0, import_react22.useCallback)(
+  return (0, import_react24.useCallback)(
     (copiedContent) => {
       if (copiedContent) {
         createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -4418,11 +4513,11 @@ var useOnCopy = () => {
 };
 
 // src/dynamicFlow/useWiseHttpClient.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 var import_react_intl30 = require("react-intl");
 var useWiseHttpClient = (httpClient) => {
   const { locale } = (0, import_react_intl30.useIntl)();
-  return (0, import_react23.useCallback)(
+  return (0, import_react25.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
@@ -4443,54 +4538,10 @@ var handleRejection = (error) => {
   throw error;
 };
 
-// src/dynamicFlow/getMergedRenderers.tsx
-var import_dynamic_flow_client3 = require("@wise/dynamic-flow-client");
-
-// src/dynamicFlow/DynamicFlowModal.tsx
-var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
-var import_components66 = require("@transferwise/components");
-var import_jsx_runtime92 = require("react/jsx-runtime");
-function DynamicFlowModal(props) {
-  const _a = props, { className = "" } = _a, rest = __objRest(_a, ["className"]);
-  const dfProps = useWiseToCoreProps(rest);
-  const df = (0, import_dynamic_flow_client2.useDynamicFlowModal)(dfProps);
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-    import_components66.Modal,
-    __spreadProps(__spreadValues({
-      className: `dynamic-flow-modal ${className}`,
-      disableDimmerClickToClose: true
-    }, df.modal), {
-      body: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "dynamic-flow-modal", children: df.modal.body })
-    })
-  );
-}
-
-// src/dynamicFlow/getMergedRenderers.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
-var wiseRenderers = getWiseRenderers();
-var getMergedRenderers = (props) => {
-  var _d, _e;
-  const _a = props, { initialAction, initialStep } = _a, restProps = __objRest(_a, ["initialAction", "initialStep"]);
-  const subflowFeatures = __spreadProps(__spreadValues({}, props.features), { nativeBack: true });
-  const subflowRenderer = (0, import_dynamic_flow_client3.getDynamicSubflowRenderer)({
-    Component: (_b) => {
-      var _c = _b, { presentation, initialRequest } = _c, rest = __objRest(_c, ["presentation", "initialRequest"]);
-      const action = {
-        url: initialRequest.url,
-        method: initialRequest.method,
-        data: initialRequest.body
-      };
-      return presentation.type === "push" ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(DynamicFlow, __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), { features: subflowFeatures, initialAction: action })) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
-        DynamicFlowModal,
-        __spreadProps(__spreadValues(__spreadValues({}, restProps), rest), {
-          features: subflowFeatures,
-          initialAction: action
-        })
-      );
-    }
-  });
-  const loadingStateRenderer = ((_d = props.features) == null ? void 0 : _d.initialLoader) ? [InitialLoadingStateRenderer] : [];
-  return [...(_e = props.renderers) != null ? _e : [], subflowRenderer, ...loadingStateRenderer, ...wiseRenderers];
+// src/dynamicFlow/useCreateSnackBar.tsx
+var useCreateSnackBar = () => {
+  const createSnackBar = useSnackBarIfAvailable();
+  return createSnackBar;
 };
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
@@ -4503,12 +4554,14 @@ var useWiseToCoreProps = (props) => {
     onAnalytics,
     onEvent,
     onLink = openLinkInNewTab,
+    onNotification,
     onLog
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react24.useMemo)(() => getMergedRenderers(props), [renderers]);
-  const logEvent = (0, import_react24.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react24.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
+  const mergedRenderers = (0, import_react26.useMemo)(() => getMergedRenderers(props), [renderers]);
+  const createSnackBar = useCreateSnackBar();
+  const logEvent = (0, import_react26.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react26.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = useOnCopy();
   return __spreadProps(__spreadValues({}, props), {
     httpClient,
@@ -4517,6 +4570,7 @@ var useWiseToCoreProps = (props) => {
     onEvent: trackEvent,
     onLog: logEvent,
     onCopy,
+    onNotification: onNotification != null ? onNotification : createSnackBar,
     onLink
   });
 };
@@ -4552,14 +4606,14 @@ function DynamicFlow(props) {
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
-var import_react25 = require("react");
+var import_react27 = require("react");
 var import_dynamic_flow_client5 = require("@wise/dynamic-flow-client");
 var import_jsx_runtime95 = require("react/jsx-runtime");
-var DynamicFlowWithRef = (0, import_react25.forwardRef)(function DynamicFlowWithRef2(props, ref) {
+var DynamicFlowWithRef = (0, import_react27.forwardRef)(function DynamicFlowWithRef2(props, ref) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = (0, import_dynamic_flow_client5.useDynamicFlow)(dfProps);
-  (0, import_react25.useImperativeHandle)(
+  (0, import_react27.useImperativeHandle)(
     ref,
     () => ({
       getValue: async () => {
@@ -5356,7 +5410,7 @@ var zh_CN_default = {
   "df.wise.ControlFeedback.required": "\u8BF7\u586B\u5199\u6B64\u5B57\u6BB5\u3002",
   "df.wise.ControlFeedback.type": "\u7C7B\u578B\u9519\u8BEF",
   "df.wise.CopyFeedback.copy": "\u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F",
-  "df.wise.CopyFeedback.copyFailed": "\u590D\u5236\u5230\u526A\u8D34\u677F\u5931\u8D25",
+  "df.wise.CopyFeedback.copyFailed": "\u65E0\u6CD5\u590D\u5236\u5230\u526A\u8D34\u677F",
   "df.wise.DynamicParagraph.copied": "\u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F",
   "df.wise.DynamicParagraph.copy": "\u590D\u5236",
   "df.wise.ErrorBoundary.errorAlert": "\u51FA\u9519\u4E86\u3002",
@@ -5371,7 +5425,7 @@ var zh_CN_default = {
   "df.wise.MultipleFileUploadSchema.maxItemsError": "\u8BF7\u4E0A\u4F20\u4E0D\u8D85\u8FC7 {maxItems} \u4E2A\u6587\u4EF6\u3002",
   "df.wise.MultipleFileUploadSchema.minItemsError": "\u8BF7\u4E0A\u4F20\u81F3\u5C11 {minItems} \u4E2A\u6587\u4EF6\u3002",
   "df.wise.PersistAsyncSchema.genericError": "\u51FA\u9519\u4E86\uFF0C\u8BF7\u91CD\u8BD5\u3002",
-  "df.wise.SearchLayout.loading": "\u6B63\u5728\u52A0\u8F7D\u2026",
+  "df.wise.SearchLayout.loading": "\u6B63\u5728\u52A0\u8F7D\u2026\u2026",
   "df.wise.back.label": "\u8FD4\u56DE",
   "df.wise.filter.noResults": "\u6682\u65E0\u7ED3\u679C",
   "df.wise.filter.placeholder": "\u5F00\u59CB\u8F93\u5165\u4EE5\u641C\u7D22",