@wise/dynamic-flow-client-internal 5.31.0 → 5.32.0

package/build/main.js

@@ -70,7 +70,7 @@ var require_classnames = __commonJS({
     (function() {
       "use strict";
       var hasOwn = {}.hasOwnProperty;
-      function classNames36() {
+      function classNames37() {
         var classes = "";
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
@@ -88,7 +88,7 @@ var require_classnames = __commonJS({
           return "";
         }
         if (Array.isArray(arg)) {
-          return classNames36.apply(null, arg);
+          return classNames37.apply(null, arg);
         }
         if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
           return arg.toString();
@@ -111,14 +111,14 @@ var require_classnames = __commonJS({
         return value + newClass;
       }
       if (typeof module2 !== "undefined" && module2.exports) {
-        classNames36.default = classNames36;
-        module2.exports = classNames36;
+        classNames37.default = classNames37;
+        module2.exports = classNames37;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames36;
+          return classNames37;
         });
       } else {
-        window.classNames = classNames36;
+        window.classNames = classNames37;
       }
     })();
   }
@@ -146,7 +146,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.31.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.32.0" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -336,7 +336,7 @@ var recursivelyRemoveNullish = (element) => {
 };
 
 // src/dynamicFlow/useWiseToCoreProps.tsx
-var import_react30 = require("react");
+var import_react32 = require("react");
 
 // src/dynamicFlow/getMergedRenderers.tsx
 var import_dynamic_flow_client2 = require("@wise/dynamic-flow-client");
@@ -1551,6 +1551,7 @@ var getSupportingValues = (supportingValues) => {
 };
 
 // ../renderers/src/CheckboxInputRenderer.tsx
+var import_classnames11 = __toESM(require_classnames());
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var CheckboxInputRenderer = {
   canRenderType: "input-checkbox",
@@ -1605,36 +1606,26 @@ var CheckboxComponent = (props) => {
   );
 };
 var CheckboxItemComponent = (props) => {
-  const {
-    additionalText,
-    description,
-    disabled,
-    inlineAlert,
-    media,
-    supportingValues,
-    title,
-    validationState,
-    value,
-    features,
-    onChange
-  } = props;
+  const { validationState, value, features, onChange } = props;
   const { ref } = useScrollToError(validationState, features);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     import_components14.ListItem,
-    __spreadProps(__spreadValues({
-      title,
-      subtitle: description,
-      additionalInfo: getAdditionalText(additionalText),
-      media: getMedia(media, false),
-      disabled,
-      prompt: getInlineAlertOrValidation(validationState, inlineAlert),
+    __spreadProps(__spreadValues({}, getListItemProps(props)), {
       control: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_components14.ListItem.Checkbox, { checked: value, onChange: () => onChange(!value) })
-    }, getSupportingValues(supportingValues)), {
-      className: controlAndTagsToCSSClass(props)
     })
   ) });
 };
 var SwitchItemComponent = (props) => {
+  const { validationState, value, features, onChange } = props;
+  const { ref } = useScrollToError(validationState, features);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_components14.ListItem,
+    __spreadProps(__spreadValues({}, getListItemProps(props)), {
+      control: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_components14.ListItem.Switch, { checked: value, onClick: () => onChange(!value) })
+    })
+  ) });
+};
+var getListItemProps = (props) => {
   const {
     additionalText,
     description,
@@ -1642,27 +1633,23 @@ var SwitchItemComponent = (props) => {
     inlineAlert,
     media,
     supportingValues,
+    tags,
     title,
-    validationState,
-    value,
-    features,
-    onChange
+    validationState
   } = props;
-  const { ref } = useScrollToError(validationState, features);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    import_components14.ListItem,
-    __spreadProps(__spreadValues({
-      title,
-      subtitle: description,
-      additionalInfo: getAdditionalText(additionalText),
-      media: getMedia(media, false),
-      disabled,
-      prompt: getInlineAlertOrValidation(validationState, inlineAlert),
-      control: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_components14.ListItem.Switch, { checked: value, onClick: () => onChange(!value) })
-    }, getSupportingValues(supportingValues)), {
-      className: controlAndTagsToCSSClass(props)
-    })
-  ) });
+  const spotlight = (tags == null ? void 0 : tags.includes("spotlight-active")) ? "active" : (tags == null ? void 0 : tags.includes("spotlight-inactive")) ? "inactive" : void 0;
+  return __spreadValues({
+    additionalInfo: getAdditionalText(additionalText),
+    className: (0, import_classnames11.default)(controlAndTagsToCSSClass(props), {
+      "m-b-1": spotlight
+    }),
+    disabled,
+    media: getMedia(media, false),
+    prompt: getInlineAlertOrValidation(validationState, inlineAlert),
+    spotlight,
+    subtitle: description,
+    title
+  }, getSupportingValues(supportingValues));
 };
 var getInlineAlertOrValidation = (validationState, inlineAlert) => {
   if ((validationState == null ? void 0 : validationState.status) === "invalid") {
@@ -3767,7 +3754,7 @@ var CollectionRenderer = createCollectionRenderer(() => true);
 var CollectionRenderer_default = CollectionRenderer;
 
 // ../renderers/src/ColumnsRenderer.tsx
-var import_classnames11 = __toESM(require_classnames());
+var import_classnames12 = __toESM(require_classnames());
 
 // ../renderers/src/utils/useIsCollapsed.ts
 var import_react10 = require("react");
@@ -3806,7 +3793,7 @@ function ColumnsRendererComponent(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
-      className: (0, import_classnames11.default)(
+      className: (0, import_classnames12.default)(
         "df-columns-renderer-container",
         getMargin(margin),
         {
@@ -4164,11 +4151,11 @@ var GroupedDecisionList = (_a) => {
 };
 
 // ../renderers/src/DecisionRenderer/DecisionWrapper.tsx
-var import_classnames12 = __toESM(require_classnames());
+var import_classnames13 = __toESM(require_classnames());
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var DecisionWrapper = (props) => {
   const { margin, control, title, tags } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: (0, import_classnames12.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: (0, import_classnames13.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components25.Header, { as: "h2", title }),
     control === "filtered" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FilteredDecisionList, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(UnfilteredDecisionList, __spreadValues({}, props))
   ] });
@@ -4249,7 +4236,7 @@ var DecisionRenderer_default = DecisionRenderer;
 
 // ../renderers/src/DividerRenderer.tsx
 var import_components27 = require("@transferwise/components");
-var import_classnames13 = __toESM(require_classnames());
+var import_classnames14 = __toESM(require_classnames());
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var mapControlToLevel = (control) => {
   switch (control) {
@@ -4266,7 +4253,7 @@ var DividerRenderer = {
   render: ({ margin, control, tags }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     import_components27.Divider,
     {
-      className: (0, import_classnames13.default)(
+      className: (0, import_classnames14.default)(
         "m-t-0",
         "d-block",
         getMargin(margin),
@@ -4366,11 +4353,11 @@ function getOrigin(url) {
 var ExternalConfirmationRenderer_default = ExternalConfirmationRenderer;
 
 // ../renderers/src/FormRenderer.tsx
-var import_classnames14 = __toESM(require_classnames());
+var import_classnames15 = __toESM(require_classnames());
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var FormRenderer = {
   canRenderType: "form",
-  render: ({ children, margin, control, tags }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: (0, import_classnames14.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children })
+  render: ({ children, margin, control, tags }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: (0, import_classnames15.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children })
 };
 var FormRenderer_default = FormRenderer;
 
@@ -4395,7 +4382,7 @@ var FormSectionRenderer_default = FormSectionRenderer;
 
 // ../renderers/src/HeadingRenderer.tsx
 var import_components30 = require("@transferwise/components");
-var import_classnames15 = __toESM(require_classnames());
+var import_classnames16 = __toESM(require_classnames());
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var HeadingRenderer = {
   canRenderType: "heading",
@@ -4403,7 +4390,7 @@ var HeadingRenderer = {
 };
 function Heading(props) {
   const { text, size, align, margin, control } = props;
-  const className = (0, import_classnames15.default)(
+  const className = (0, import_classnames16.default)(
     getTextAlignmentAndMargin({ align, margin }),
     controlAndTagsToCSSClass(props)
   );
@@ -4443,7 +4430,7 @@ var HeadingRenderer_default = HeadingRenderer;
 
 // ../renderers/src/ImageRenderer/UrlImage.tsx
 var import_components31 = require("@transferwise/components");
-var import_classnames16 = __toESM(require_classnames());
+var import_classnames17 = __toESM(require_classnames());
 var import_react14 = require("react");
 
 // ../renderers/src/utils/api-utils.ts
@@ -4474,7 +4461,7 @@ function UrlImage({
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
-      className: (0, import_classnames16.default)(
+      className: (0, import_classnames17.default)(
         "df-image",
         align,
         size || "md",
@@ -4538,7 +4525,7 @@ var ImageRenderer_default = ImageRenderer;
 
 // ../renderers/src/InstructionsRenderer.tsx
 var import_components32 = require("@transferwise/components");
-var import_classnames17 = __toESM(require_classnames());
+var import_classnames18 = __toESM(require_classnames());
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var doContext = ["positive", "neutral", "proposition"];
 var dontContext = ["warning", "negative"];
@@ -4547,7 +4534,7 @@ var InstructionsRenderer = {
   render: ({ items, margin, title, control, tags }) => {
     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_runtime58.jsxs)("div", { className: (0, import_classnames17.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: (0, import_classnames18.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
       title ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components32.Header, { title }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components32.InstructionsList, { dos, donts })
     ] });
@@ -4633,7 +4620,7 @@ var IntegerInputRenderer_default = IntegerInputRenderer;
 
 // ../renderers/src/ListRenderer.tsx
 var import_components35 = require("@transferwise/components");
-var import_classnames18 = __toESM(require_classnames());
+var import_classnames19 = __toESM(require_classnames());
 
 // ../renderers/src/components/Header.tsx
 var import_components34 = require("@transferwise/components");
@@ -4653,7 +4640,7 @@ var getHeaderAction = (callToAction) => {
 var import_jsx_runtime61 = require("react/jsx-runtime");
 var ListRenderer = {
   canRenderType: "list",
-  render: ({ callToAction, control, margin, items, tags, title }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: (0, import_classnames18.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+  render: ({ callToAction, control, margin, items, tags, title }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: (0, import_classnames19.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Header, { title, callToAction }),
     items.map((item) => {
       var _a, _b;
@@ -4692,7 +4679,7 @@ var ListRenderer_default = ListRenderer;
 
 // ../renderers/src/LoadingIndicatorRenderer.tsx
 var import_components36 = require("@transferwise/components");
-var import_classnames19 = __toESM(require_classnames());
+var import_classnames20 = __toESM(require_classnames());
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var LoadingIndicatorRenderer = {
   canRenderType: "loading-indicator",
@@ -4701,7 +4688,7 @@ var LoadingIndicatorRenderer = {
     {
       size,
       classNames: {
-        "tw-loader": (0, import_classnames19.default)(
+        "tw-loader": (0, import_classnames20.default)(
           "tw-loader",
           "m-x-auto",
           getMargin(margin),
@@ -4716,7 +4703,7 @@ var LoadingIndicatorRenderer_default = LoadingIndicatorRenderer;
 
 // ../renderers/src/MarkdownRenderer.tsx
 var import_components37 = require("@transferwise/components");
-var import_classnames20 = __toESM(require_classnames());
+var import_classnames21 = __toESM(require_classnames());
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var MarkdownRenderer = {
   canRenderType: "markdown",
@@ -4725,14 +4712,14 @@ var MarkdownRenderer = {
     return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       "div",
       {
-        className: (0, import_classnames20.default)(
+        className: (0, import_classnames21.default)(
           getTextAlignmentAndMargin({ align, margin }),
           controlAndTagsToCSSClass({ control, tags })
         ),
         children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           import_components37.Markdown,
           {
-            className: (0, import_classnames20.default)("df-markdown", {
+            className: (0, import_classnames21.default)("df-markdown", {
               "np-text-body-large": isLarge,
               "np-text-body-default": !isLarge
             }),
@@ -4747,7 +4734,7 @@ var MarkdownRenderer = {
 var MarkdownRenderer_default = MarkdownRenderer;
 
 // ../renderers/src/MediaRenderer.tsx
-var import_classnames21 = __toESM(require_classnames());
+var import_classnames22 = __toESM(require_classnames());
 var import_jsx_runtime64 = require("react/jsx-runtime");
 var MediaRenderer = {
   canRenderType: "media",
@@ -4774,7 +4761,7 @@ var AvatarMediaRendererComponent = ({
   return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "div",
     {
-      className: (0, import_classnames21.default)(
+      className: (0, import_classnames22.default)(
         "df-media-layout-avatar",
         align,
         getMargin(margin),
@@ -4826,7 +4813,7 @@ var mapAvatarMediaSize = (size) => {
 
 // ../renderers/src/ModalLayoutRenderer.tsx
 var import_components38 = require("@transferwise/components");
-var import_classnames22 = __toESM(require_classnames());
+var import_classnames23 = __toESM(require_classnames());
 var import_react15 = require("react");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var ModalLayoutRenderer = {
@@ -4837,7 +4824,7 @@ var ModalLayoutRenderer_default = ModalLayoutRenderer;
 function DFModal({ content, margin, trigger, control, tags }) {
   const [visible, setVisible] = (0, import_react15.useState)(false);
   const { children, title } = content;
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: (0, import_classnames22.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: (0, import_classnames23.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_components38.Button, { v2: true, priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
     /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       import_components38.Modal,
@@ -5269,7 +5256,7 @@ var import_components45 = require("@transferwise/components");
 
 // ../renderers/src/components/UploadFieldInput.tsx
 var import_components44 = require("@transferwise/components");
-var import_classnames23 = __toESM(require_classnames());
+var import_classnames24 = __toESM(require_classnames());
 var import_jsx_runtime72 = require("react/jsx-runtime");
 function UploadFieldInput({
   id,
@@ -5289,7 +5276,7 @@ function UploadFieldInput({
     "div",
     {
       ref,
-      className: (0, import_classnames23.default)(
+      className: (0, import_classnames24.default)(
         "form-group d-block",
         {
           "has-error": (validation == null ? void 0 : validation.status) === "invalid"
@@ -5451,7 +5438,7 @@ var NumberInputRenderer_default = NumberInputRenderer;
 
 // ../renderers/src/ParagraphRenderer.tsx
 var import_components48 = require("@transferwise/components");
-var import_classnames24 = __toESM(require_classnames());
+var import_classnames25 = __toESM(require_classnames());
 var import_react_intl25 = require("react-intl");
 
 // ../renderers/src/hooks/useSnackBarIfAvailable.ts
@@ -5486,7 +5473,7 @@ var ParagraphRenderer = {
 };
 function Paragraph(props) {
   const { align, control, margin, size, text } = props;
-  const className = (0, import_classnames24.default)(
+  const className = (0, import_classnames25.default)(
     getTextAlignmentAndMargin({ align, margin }),
     controlAndTagsToCSSClass(props)
   );
@@ -5517,7 +5504,7 @@ function CopyableParagraph({
         type: "text",
         value: text,
         readOnly: true,
-        className: (0, import_classnames24.default)("text-ellipsis", inputAlignmentClasses)
+        className: (0, import_classnames25.default)("text-ellipsis", inputAlignmentClasses)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_components48.Button, { v2: true, block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
@@ -5527,7 +5514,7 @@ var ParagraphRenderer_default = ParagraphRenderer;
 
 // ../renderers/src/ProgressRenderer.tsx
 var import_components49 = require("@transferwise/components");
-var import_classnames25 = __toESM(require_classnames());
+var import_classnames26 = __toESM(require_classnames());
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var ProgressRenderer = {
   canRenderType: "progress",
@@ -5536,7 +5523,7 @@ var ProgressRenderer = {
       import_components49.ProgressBar,
       {
         id: uid,
-        className: (0, import_classnames25.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })),
+        className: (0, import_classnames26.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })),
         title: title && help ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(LabelContentWithHelp, { text: title, help }) : title,
         description,
         progress: {
@@ -5552,7 +5539,7 @@ var ProgressRenderer = {
 // ../renderers/src/RepeatableRenderer.tsx
 var import_components50 = require("@transferwise/components");
 var import_icons2 = require("@transferwise/icons");
-var import_classnames26 = __toESM(require_classnames());
+var import_classnames27 = __toESM(require_classnames());
 var import_react20 = require("react");
 var import_react_intl27 = require("react-intl");
 
@@ -5633,7 +5620,7 @@ function Repeatable(props) {
       /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
         "div",
         {
-          className: (0, import_classnames26.default)("form-group", {
+          className: (0, import_classnames27.default)("form-group", {
             "has-error": (validationState == null ? void 0 : validationState.status) === "invalid"
           }),
           children: [
@@ -5699,13 +5686,13 @@ var RepeatableRenderer_default = RepeatableRenderer;
 
 // ../renderers/src/ReviewLegacyRenderer.tsx
 var import_components51 = require("@transferwise/components");
-var import_classnames27 = __toESM(require_classnames());
+var import_classnames28 = __toESM(require_classnames());
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var ReviewRenderer = {
   canRenderType: "review",
   render: ({ callToAction, control, fields, margin, title, trackEvent, tags }) => {
     const orientation = mapControlToDefinitionListLayout(control);
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: (0, import_classnames27.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: (0, import_classnames28.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
       /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Header, { title, callToAction }),
       /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: margin, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         import_components51.DefinitionList,
@@ -5757,7 +5744,7 @@ var getFieldLabel = (label, help, onClick) => {
 // ../renderers/src/ReviewRenderer.tsx
 var import_components52 = require("@transferwise/components");
 var import_icons3 = require("@transferwise/icons");
-var import_classnames28 = __toESM(require_classnames());
+var import_classnames29 = __toESM(require_classnames());
 var import_react_intl28 = require("react-intl");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var IGNORED_CONTROLS = [
@@ -5781,7 +5768,7 @@ var Review = ({
   trackEvent
 }) => {
   const intl = (0, import_react_intl28.useIntl)();
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: (0, import_classnames28.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: (0, import_classnames29.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Header, { title, callToAction }),
     fields.map((field) => {
       var _a, _b, _c;
@@ -6070,7 +6057,7 @@ var SearchRenderer_default = SearchRenderer;
 
 // ../renderers/src/SectionRenderer.tsx
 var import_components56 = require("@transferwise/components");
-var import_classnames29 = __toESM(require_classnames());
+var import_classnames30 = __toESM(require_classnames());
 
 // ../renderers/src/utils/getHeaderAction.tsx
 var getHeaderAction2 = (callToAction) => {
@@ -6101,7 +6088,7 @@ var SectionRenderer = {
     return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
       "section",
       {
-        className: (0, import_classnames29.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })),
+        className: (0, import_classnames30.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })),
         children: [
           (title || callToAction) && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_components56.Header, { title: title != null ? title : "", action: getHeaderAction2(callToAction) }),
           children
@@ -6442,11 +6429,11 @@ var SelectInputRenderer_default = SelectInputRenderer;
 
 // ../renderers/src/StatusListRenderer.tsx
 var import_components62 = require("@transferwise/components");
-var import_classnames30 = __toESM(require_classnames());
+var import_classnames31 = __toESM(require_classnames());
 var import_jsx_runtime91 = require("react/jsx-runtime");
 var StatusListRenderer = {
   canRenderType: "status-list",
-  render: ({ margin, items, title, control, tags }) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: (0, import_classnames30.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+  render: ({ margin, items, title, control, tags }) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: (0, import_classnames31.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     title ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_components62.Header, { title }) : null,
     items.map((item) => {
       const { callToAction, description, title: itemTitle } = item;
@@ -6495,7 +6482,7 @@ var mapStatus = (status) => {
 var StatusListRenderer_default = StatusListRenderer;
 
 // ../renderers/src/step/SplashCelebrationStepRenderer.tsx
-var import_classnames31 = __toESM(require_classnames());
+var import_classnames32 = __toESM(require_classnames());
 
 // ../renderers/src/utils/useCustomTheme.ts
 var import_components_theming = require("@wise/components-theming");
@@ -6645,7 +6632,7 @@ function SplashCelebrationStepRendererComponent(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
     "div",
     {
-      className: (0, import_classnames31.default)("splash-screen", "m-t-5", controlAndTagsToCSSClass({ control, tags })),
+      className: (0, import_classnames32.default)("splash-screen", "m-t-5", controlAndTagsToCSSClass({ control, tags })),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TopBar, { back, toolbar, tags }),
         title || description ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "m-b-4", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(StepHeader, { title, description, tags }) }) : void 0,
@@ -6657,7 +6644,7 @@ function SplashCelebrationStepRendererComponent(props) {
 }
 
 // ../renderers/src/step/SplashStepRenderer.tsx
-var import_classnames32 = __toESM(require_classnames());
+var import_classnames33 = __toESM(require_classnames());
 var import_jsx_runtime97 = require("react/jsx-runtime");
 var SplashStepRenderer = {
   canRenderType: "step",
@@ -6669,7 +6656,7 @@ function SplashStepRendererComponent(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
     "div",
     {
-      className: (0, import_classnames32.default)("splash-screen", "m-t-5", controlAndTagsToCSSClass({ control, tags })),
+      className: (0, import_classnames33.default)("splash-screen", "m-t-5", controlAndTagsToCSSClass({ control, tags })),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(TopBar, { back, toolbar, tags }),
         title || description ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "m-b-4", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(StepHeader, { title, description, tags }) }) : void 0,
@@ -6700,7 +6687,7 @@ function StepRendererComponent(props) {
 
 // ../renderers/src/TabsRenderer.tsx
 var import_components67 = require("@transferwise/components");
-var import_classnames33 = __toESM(require_classnames());
+var import_classnames34 = __toESM(require_classnames());
 var import_react26 = require("react");
 var import_jsx_runtime99 = require("react/jsx-runtime");
 var TabsRenderer = {
@@ -6721,7 +6708,7 @@ var TabsRenderer = {
 };
 function TabsRendererComponent({ uid, margin, tabs, control, tags }) {
   const [selectedIndex, setSelectedIndex] = (0, import_react26.useState)(0);
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: (0, import_classnames33.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: (0, import_classnames34.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
     import_components67.Tabs,
     {
       name: uid,
@@ -6742,7 +6729,7 @@ function TabsRendererComponent({ uid, margin, tabs, control, tags }) {
 function SegmentedTabsRendererComponent({ uid, margin, tabs, control, tags }) {
   var _a;
   const [selectedIndex, setSelectedIndex] = (0, import_react26.useState)(0);
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: (0, import_classnames33.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: (0, import_classnames34.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
       import_components67.SegmentedControl,
       {
@@ -6764,7 +6751,7 @@ function SegmentedTabsRendererComponent({ uid, margin, tabs, control, tags }) {
 function ChipsTabsRendererComponent({ margin, tabs, control, tags }) {
   var _a;
   const [selectedIndex, setSelectedIndex] = (0, import_react26.useState)(0);
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: (0, import_classnames33.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: (0, import_classnames34.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "chips-container", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
       import_components67.Chips,
       {
@@ -6779,9 +6766,101 @@ function ChipsTabsRendererComponent({ margin, tabs, control, tags }) {
 
 // ../renderers/src/TextInputRenderer.tsx
 var import_components69 = require("@transferwise/components");
+var import_react28 = require("react");
 
 // ../renderers/src/components/VariableTextInput.tsx
 var import_components68 = require("@transferwise/components");
+var import_icons7 = require("@transferwise/icons");
+var import_react_intl36 = require("react-intl");
+var import_react27 = require("react");
+
+// ../renderers/src/messages/ssn-input.messages.ts
+var import_react_intl35 = require("react-intl");
+var ssn_input_messages_default = (0, import_react_intl35.defineMessages)({
+  showValue: {
+    id: "df.wise.ssnInput.showValue",
+    defaultMessage: "Show value",
+    description: "Accessible label for showing a masked SSN or SIN value"
+  },
+  hideValue: {
+    id: "df.wise.ssnInput.hideValue",
+    defaultMessage: "Hide value",
+    description: "Accessible label for hiding an SSN or SIN value"
+  }
+});
+
+// ../renderers/src/components/ssnInputUtils.ts
+function formatSsnValue(rawValue, displayFormat, isVisible) {
+  if (!displayFormat) {
+    return isVisible ? rawValue : "\u2022".repeat(rawValue.length);
+  }
+  const formattedValue = displayFormat.split("").reduce(
+    ({ display, digitsUsed }, character) => {
+      if (character === "*") {
+        return digitsUsed < rawValue.length ? {
+          display: `${display}${isVisible ? rawValue[digitsUsed] : "\u2022"}`,
+          digitsUsed: digitsUsed + 1
+        } : { display, digitsUsed };
+      }
+      return digitsUsed > 0 && digitsUsed < rawValue.length ? { display: `${display}${character}`, digitsUsed } : { display, digitsUsed };
+    },
+    { display: "", digitsUsed: 0 }
+  ).display;
+  const displayFormatDigitCount = displayFormat.split("").filter((character) => character === "*").length;
+  const extraValue = rawValue.slice(displayFormatDigitCount);
+  return `${formattedValue}${isVisible ? extraValue : "\u2022".repeat(extraValue.length)}`;
+}
+function getRawOffset(displayValue, displayOffset, rawValueLength) {
+  return Math.min(
+    displayValue.slice(0, displayOffset).split("").filter((character) => character === "\u2022" || /\d/.test(character)).length,
+    rawValueLength
+  );
+}
+function replaceSsnSelection(rawValue, displayValue, insertedValue, start, end) {
+  const startOffset = getRawOffset(displayValue, start, rawValue.length);
+  const endOffset = getRawOffset(displayValue, end, rawValue.length);
+  if (!insertedValue) {
+    return void 0;
+  }
+  return {
+    value: `${rawValue.slice(0, startOffset)}${insertedValue}${rawValue.slice(endOffset)}`,
+    caret: startOffset + insertedValue.length
+  };
+}
+function deleteSsnSelection(rawValue, displayValue, start, end, backward) {
+  let startOffset = getRawOffset(displayValue, start, rawValue.length);
+  let endOffset = getRawOffset(displayValue, end, rawValue.length);
+  if (startOffset === endOffset) {
+    if (backward) {
+      startOffset = Math.max(0, startOffset - 1);
+    } else {
+      endOffset = Math.min(rawValue.length, endOffset + 1);
+    }
+  }
+  return {
+    value: `${rawValue.slice(0, startOffset)}${rawValue.slice(endOffset)}`,
+    caret: startOffset
+  };
+}
+function getDisplayOffset(displayValue, rawOffset) {
+  if (rawOffset === 0) {
+    return 0;
+  }
+  let displayOffset = 0;
+  let digitsSeen = 0;
+  for (const character of displayValue) {
+    if (character === "\u2022" || /\d/.test(character)) {
+      digitsSeen += 1;
+      if (digitsSeen === rawOffset) {
+        return displayOffset + 1;
+      }
+    }
+    displayOffset += 1;
+  }
+  return displayOffset;
+}
+
+// ../renderers/src/components/VariableTextInput.tsx
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var commonKeys = [
   "autoComplete",
@@ -6797,13 +6876,15 @@ var commonKeys = [
   "value"
 ];
 function VariableTextInput(inputProps) {
-  const { id, value, control, onChange } = inputProps;
+  const { id, value, control, onChange, isSsnVisible } = inputProps;
   const commonProps = __spreadProps(__spreadValues({}, pick(inputProps, ...commonKeys)), { name: id });
   switch (control) {
     case "email":
       return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "email", onChange }));
     case "password":
       return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "password", onChange }));
+    case "ssn-input":
+      return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SsnInput, __spreadProps(__spreadValues({}, commonProps), { isVisible: isSsnVisible, onChange }));
     case "numeric": {
       const numericProps = __spreadProps(__spreadValues({}, commonProps), { type: "number", onWheel });
       return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
@@ -6823,74 +6904,207 @@ function VariableTextInput(inputProps) {
     }
   }
 }
+function SsnInputToggle({
+  isVisible,
+  onClick
+}) {
+  const { formatMessage } = (0, import_react_intl36.useIntl)();
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+    import_components68.IconButton,
+    {
+      priority: "minimal",
+      size: 24,
+      "aria-label": formatMessage(isVisible ? ssn_input_messages_default.hideValue : ssn_input_messages_default.showValue),
+      "aria-pressed": isVisible,
+      onClick,
+      children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_icons7.EyeShut, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_icons7.Eye, { size: 24 })
+    }
+  );
+}
 function TextInput(props) {
-  const _a = props, { control, displayFormat, onChange } = _a, commonProps = __objRest(_a, ["control", "displayFormat", "onChange"]);
+  const _a = props, { control, displayFormat, onChange, type } = _a, commonProps = __objRest(_a, ["control", "displayFormat", "onChange", "type"]);
   const InputWithPattern = control === "textarea" ? import_components68.TextareaWithDisplayFormat : import_components68.InputWithDisplayFormat;
   const InputWithoutPattern = control === "textarea" ? import_components68.TextArea : import_components68.Input;
-  return displayFormat ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { onChange: (e) => onChange(e.target.value) }));
+  return displayFormat ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { type, onChange: (e) => onChange(e.target.value) }));
+}
+function SsnInput(props) {
+  const _a = props, { displayFormat = "", isVisible = false, onChange, value = "" } = _a, commonProps = __objRest(_a, ["displayFormat", "isVisible", "onChange", "value"]);
+  const [editVersion, setEditVersion] = (0, import_react27.useState)(0);
+  const inputRef = (0, import_react27.useRef)(null);
+  const selection = (0, import_react27.useRef)({ start: 0, end: 0 });
+  const pendingCaret = (0, import_react27.useRef)(null);
+  const rawValue = value.replace(/\D/g, "");
+  const formattedValue = formatSsnValue(rawValue, displayFormat, isVisible);
+  const scheduleCaret = (rawOffset) => {
+    pendingCaret.current = rawOffset;
+    setEditVersion((version) => version + 1);
+  };
+  const replaceSelection = (insertedValue, start, end) => {
+    const result = replaceSsnSelection(rawValue, formattedValue, insertedValue, start, end);
+    if (!result) {
+      return;
+    }
+    scheduleCaret(result.caret);
+    onChange(result.value);
+  };
+  const deleteSelection = (start, end, backward) => {
+    const result = deleteSsnSelection(rawValue, formattedValue, start, end, backward);
+    scheduleCaret(result.caret);
+    onChange(result.value);
+  };
+  (0, import_react27.useLayoutEffect)(() => {
+    if (pendingCaret.current === null || !inputRef.current) {
+      return;
+    }
+    inputRef.current.setSelectionRange(
+      getDisplayOffset(formattedValue, pendingCaret.current),
+      getDisplayOffset(formattedValue, pendingCaret.current)
+    );
+    pendingCaret.current = null;
+  }, [editVersion, formattedValue, rawValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+    "input",
+    __spreadProps(__spreadValues({
+      ref: inputRef
+    }, commonProps), {
+      className: "form-control np-form-control np-input np-input--shape-rectangle",
+      type: "text",
+      inputMode: "numeric",
+      value: formattedValue,
+      onChange: (event) => {
+        const nextValue = event.currentTarget.value;
+        const inputType = event.nativeEvent.inputType;
+        const start = selection.current.start;
+        const end = selection.current.end;
+        if (isVisible || /^\d+$/.test(nextValue)) {
+          const nextRawValue = nextValue.replace(/\D/g, "");
+          scheduleCaret(nextRawValue.length);
+          onChange(nextRawValue);
+        } else if ((inputType == null ? void 0 : inputType.startsWith("delete")) || nextValue.length < formattedValue.length) {
+          deleteSelection(start, end, inputType === "deleteContentBackward");
+        } else {
+          replaceSelection(nextValue.replace(/\D/g, ""), start, end);
+        }
+      },
+      onSelect: (event) => {
+        var _a2, _b;
+        selection.current = {
+          start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
+          end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
+        };
+      },
+      onKeyDown: (event) => {
+        var _a2, _b;
+        selection.current = {
+          start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
+          end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
+        };
+        if (/^\d$/.test(event.key)) {
+          event.preventDefault();
+          replaceSelection(event.key, selection.current.start, selection.current.end);
+        } else if (event.key === "Backspace") {
+          event.preventDefault();
+          deleteSelection(selection.current.start, selection.current.end, true);
+        } else if (event.key === "Delete") {
+          event.preventDefault();
+          deleteSelection(selection.current.start, selection.current.end, false);
+        }
+      },
+      onPaste: (event) => {
+        var _a2, _b;
+        event.preventDefault();
+        selection.current = {
+          start: (_a2 = event.currentTarget.selectionStart) != null ? _a2 : 0,
+          end: (_b = event.currentTarget.selectionEnd) != null ? _b : 0
+        };
+        const pastedValue = event.clipboardData.getData("text").replace(/\D/g, "");
+        replaceSelection(pastedValue, selection.current.start, selection.current.end);
+      }
+    })
+  );
 }
 
 // ../renderers/src/TextInputRenderer.tsx
 var import_jsx_runtime101 = require("react/jsx-runtime");
 var TextInputRenderer = {
   canRenderType: "input-text",
-  render: (props) => {
-    const _a = props, {
+  render: (props) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(TextInputRendererComponent, __spreadValues({}, props))
+};
+function TextInputRendererComponent(props) {
+  const [isSsnVisible, setIsSsnVisible] = (0, import_react28.useState)(false);
+  const _a = props, {
+    id,
+    title,
+    description,
+    help,
+    media,
+    validationState,
+    value: initialValue,
+    onChange
+  } = _a, rest = __objRest(_a, [
+    "id",
+    "title",
+    "description",
+    "help",
+    "media",
+    "validationState",
+    "value",
+    "onChange"
+  ]);
+  const value = initialValue != null ? initialValue : "";
+  const isSsnInput = props.control === "ssn-input";
+  const inputProps = __spreadProps(__spreadValues({}, rest), {
+    value,
+    id,
+    isSsnVisible,
+    onChange: (newValue) => {
+      if ((value != null ? value : "") !== (newValue != null ? newValue : "")) {
+        onChange(newValue);
+      }
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+    FieldInput_default,
+    {
       id,
-      title,
+      label: title,
       description,
+      validation: validationState,
+      inlineAlert: props.inlineAlert,
+      loadingState: props.fieldLoadingState,
       help,
-      media,
-      validationState,
-      value: initialValue,
-      onChange
-    } = _a, rest = __objRest(_a, [
-      "id",
-      "title",
-      "description",
-      "help",
-      "media",
-      "validationState",
-      "value",
-      "onChange"
-    ]);
-    const value = initialValue != null ? initialValue : "";
-    const inputProps = __spreadProps(__spreadValues({}, rest), {
-      value,
-      id,
-      onChange: (newValue) => {
-        if ((value != null ? value : "") !== (newValue != null ? newValue : "")) {
-          onChange(newValue);
+      features: props.features,
+      control: props.control,
+      tags: props.tags,
+      children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+        import_components69.InputGroup,
+        {
+          addonStart: getInputGroupAddonStart(media),
+          addonEnd: isSsnInput ? {
+            interactive: true,
+            content: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+              SsnInputToggle,
+              {
+                isVisible: isSsnVisible,
+                onClick: () => setIsSsnVisible((visible) => !visible)
+              }
+            )
+          } : void 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(VariableTextInput, __spreadValues({}, inputProps))
         }
-      }
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
-      FieldInput_default,
-      {
-        id,
-        label: title,
-        description,
-        validation: validationState,
-        inlineAlert: props.inlineAlert,
-        loadingState: props.fieldLoadingState,
-        help,
-        features: props.features,
-        control: props.control,
-        tags: props.tags,
-        children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(import_components69.InputGroup, { addonStart: getInputGroupAddonStart(media), children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(VariableTextInput, __spreadValues({}, inputProps)) })
-      }
-    );
-  }
-};
+      )
+    }
+  );
+}
 var TextInputRenderer_default = TextInputRenderer;
 
 // ../renderers/src/UpdatableRenderer.tsx
-var import_classnames34 = __toESM(require_classnames());
+var import_classnames35 = __toESM(require_classnames());
 var import_jsx_runtime102 = require("react/jsx-runtime");
 var UpdatableRenderer = {
   canRenderType: "updatable",
   render: ({ children, control, margin, tags }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: (0, import_classnames34.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children });
+    return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: (0, import_classnames35.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children });
   }
 };
 
@@ -7038,8 +7252,8 @@ var LargeUploadRenderer = {
 
 // ../renderers/src/UpsellRenderer.tsx
 var import_components71 = require("@transferwise/components");
-var import_classnames35 = __toESM(require_classnames());
-var import_react27 = require("react");
+var import_classnames36 = __toESM(require_classnames());
+var import_react29 = require("react");
 var import_jsx_runtime104 = require("react/jsx-runtime");
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -7047,11 +7261,11 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss, control, tags } = props;
-  const [isVisible, setIsVisible] = (0, import_react27.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react29.useState)(true);
   return isVisible ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     import_components71.Nudge,
     {
-      className: (0, import_classnames35.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })),
+      className: (0, import_classnames36.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })),
       mediaName: getMediaName(media),
       title: text,
       action: __spreadValues({
@@ -7276,12 +7490,12 @@ var customEventsToAnalytics = {
 };
 
 // src/dynamicFlow/useOnCopy.tsx
-var import_react28 = require("react");
-var import_react_intl36 = require("react-intl");
+var import_react30 = require("react");
+var import_react_intl38 = require("react-intl");
 
 // src/dynamicFlow/messages.ts
-var import_react_intl35 = require("react-intl");
-var messages_default = (0, import_react_intl35.defineMessages)({
+var import_react_intl37 = require("react-intl");
+var messages_default = (0, import_react_intl37.defineMessages)({
   copied: {
     id: "df.wise.CopyFeedback.copy",
     defaultMessage: "Copied to clipboard",
@@ -7296,9 +7510,9 @@ var messages_default = (0, import_react_intl35.defineMessages)({
 
 // src/dynamicFlow/useOnCopy.tsx
 var useOnCopy = () => {
-  const { formatMessage } = (0, import_react_intl36.useIntl)();
+  const { formatMessage } = (0, import_react_intl38.useIntl)();
   const createSnackBar = useSnackBarIfAvailable();
-  return (0, import_react28.useCallback)(
+  return (0, import_react30.useCallback)(
     (copiedContent) => {
       if (copiedContent) {
         createSnackBar({ text: formatMessage(messages_default.copied) });
@@ -7311,11 +7525,11 @@ var useOnCopy = () => {
 };
 
 // src/dynamicFlow/useWiseHttpClient.tsx
-var import_react29 = require("react");
-var import_react_intl37 = require("react-intl");
+var import_react31 = require("react");
+var import_react_intl39 = require("react-intl");
 var useWiseHttpClient = (httpClient) => {
-  const { locale } = (0, import_react_intl37.useIntl)();
-  return (0, import_react29.useCallback)(
+  const { locale } = (0, import_react_intl39.useIntl)();
+  return (0, import_react31.useCallback)(
     async (input, init = {}) => {
       const headers = new Headers(init.headers);
       headers.set("accept-language", locale);
@@ -7356,10 +7570,10 @@ var useWiseToCoreProps = (props) => {
     onLog
   } = props;
   const httpClient = useWiseHttpClient(customFetch);
-  const mergedRenderers = (0, import_react30.useMemo)(() => getMergedRenderers(props), [renderers]);
+  const mergedRenderers = (0, import_react32.useMemo)(() => getMergedRenderers(props), [renderers]);
   const createSnackBar = useCreateSnackBar();
-  const logEvent = (0, import_react30.useMemo)(() => getLogEvent(onLog), [onLog]);
-  const trackEvent = (0, import_react30.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
+  const logEvent = (0, import_react32.useMemo)(() => getLogEvent(onLog), [onLog]);
+  const trackEvent = (0, import_react32.useMemo)(() => getTrackEvent(onEvent, onAnalytics), [onEvent, onAnalytics]);
   const onCopy = useOnCopy();
   return __spreadProps(__spreadValues({}, props), {
     httpClient,
@@ -7407,14 +7621,14 @@ function DynamicFlow(props) {
 }
 
 // src/dynamicFlow/DynamicFlowWithRef.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 var import_dynamic_flow_client5 = require("@wise/dynamic-flow-client");
 var import_jsx_runtime109 = require("react/jsx-runtime");
-var DynamicFlowWithRef = (0, import_react31.forwardRef)(function DynamicFlowWithRef2(props, ref) {
+var DynamicFlowWithRef = (0, import_react33.forwardRef)(function DynamicFlowWithRef2(props, ref) {
   const { className = "" } = props;
   const dfProps = useWiseToCoreProps(props);
   const df = (0, import_dynamic_flow_client5.useDynamicFlow)(dfProps);
-  (0, import_react31.useImperativeHandle)(
+  (0, import_react33.useImperativeHandle)(
     ref,
     () => ({
       getValue: () => {
@@ -7487,6 +7701,8 @@ var cs_default = {
   "df.wise.group.currencies-with-account-details": "M\u011Bny s detaily \xFA\u010Dtu",
   "df.wise.group.popular": "Popul\xE1rn\xED",
   "df.wise.group.recent": "Ned\xE1vn\xE9",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "P\u0159ej\xEDt na konec"
 };
 
@@ -7537,6 +7753,8 @@ var de_default = {
   "df.wise.group.currencies-with-account-details": "W\xE4hrungen mit Bankverbindung",
   "df.wise.group.popular": "Beliebt",
   "df.wise.group.recent": "K\xFCrzlich verwendet",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "Nach unten scrollen"
 };
 
@@ -7587,6 +7805,8 @@ var en_default = {
   "df.wise.group.currencies-with-account-details": "Currencies with account details",
   "df.wise.group.popular": "Popular",
   "df.wise.group.recent": "Recent",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "Scroll to bottom"
 };
 
@@ -7637,6 +7857,8 @@ var es_default = {
   "df.wise.group.currencies-with-account-details": "Divisas con datos de cuenta",
   "df.wise.group.popular": "Populares",
   "df.wise.group.recent": "Recientes",
+  "df.wise.ssnInput.hideValue": "Ocultar valor",
+  "df.wise.ssnInput.showValue": "Mostrar valor",
   "df.wise.step.scrollToBottom": "Despl\xE1zate hasta abajo"
 };
 
@@ -7687,6 +7909,8 @@ var fr_default = {
   "df.wise.group.currencies-with-account-details": "Devises avec num\xE9ros de compte",
   "df.wise.group.popular": "Populaires",
   "df.wise.group.recent": "R\xE9cents",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "Faire d\xE9filer vers le bas"
 };
 
@@ -7737,6 +7961,8 @@ var hu_default = {
   "df.wise.group.currencies-with-account-details": "P\xE9nznemek sz\xE1mlaadatokkal",
   "df.wise.group.popular": "N\xE9pszer\u0171",
   "df.wise.group.recent": "Legut\xF3bbi",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "G\xF6rgess legalulra"
 };
 
@@ -7787,6 +8013,8 @@ var id_default = {
   "df.wise.group.currencies-with-account-details": "Mata uang dengan detail rekening",
   "df.wise.group.popular": "Populer",
   "df.wise.group.recent": "Terbaru",
+  "df.wise.ssnInput.hideValue": "Sembunyikan nilai",
+  "df.wise.ssnInput.showValue": "Tampilkan nilai",
   "df.wise.step.scrollToBottom": "Gulir ke bawah"
 };
 
@@ -7837,6 +8065,8 @@ var it_default = {
   "df.wise.group.currencies-with-account-details": "Valute con estremi del conto",
   "df.wise.group.popular": "Popolari",
   "df.wise.group.recent": "Recenti",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "Scorri fino in fondo"
 };
 
@@ -7887,6 +8117,8 @@ var ja_default = {
   "df.wise.group.currencies-with-account-details": "\u53E3\u5EA7\u60C5\u5831\u3092\u53D6\u5F97\u3067\u304D\u308B\u901A\u8CA8",
   "df.wise.group.popular": "\u4EBA\u6C17",
   "df.wise.group.recent": "\u6700\u8FD1",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "\u4E0B\u307E\u3067\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B"
 };
 
@@ -7937,6 +8169,8 @@ var nl_default = {
   "df.wise.group.currencies-with-account-details": "Valuta's met rekeninggegevens",
   "df.wise.group.popular": "Populair",
   "df.wise.group.recent": "Recent",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "Scrol omlaag"
 };
 
@@ -7987,6 +8221,8 @@ var pl_default = {
   "df.wise.group.currencies-with-account-details": "Waluty z danymi bankowymi",
   "df.wise.group.popular": "Popularne",
   "df.wise.group.recent": "Ostatnie",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "Przewi\u0144 w d\xF3\u0142"
 };
 
@@ -8037,6 +8273,8 @@ var pt_default = {
   "df.wise.group.currencies-with-account-details": "Moedas com dados de conta",
   "df.wise.group.popular": "Popular",
   "df.wise.group.recent": "Recente",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "Descer at\xE9 o final da p\xE1gina"
 };
 
@@ -8087,6 +8325,8 @@ var ro_default = {
   "df.wise.group.currencies-with-account-details": "Monede cu detalii de cont",
   "df.wise.group.popular": "Populare",
   "df.wise.group.recent": "Recente",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "Deruleaz\u0103 \xEEn jos"
 };
 
@@ -8137,6 +8377,8 @@ var ru_default = {
   "df.wise.group.currencies-with-account-details": "\u0412\u0430\u043B\u044E\u0442\u044B \u0441 \u0440\u0435\u043A\u0432\u0438\u0437\u0438\u0442\u0430\u043C\u0438 \u0441\u0447\u0435\u0442\u0430",
   "df.wise.group.popular": "\u041F\u043E\u043F\u0443\u043B\u044F\u0440\u043D\u044B\u0435",
   "df.wise.group.recent": "\u041D\u0435\u0434\u0430\u0432\u043D\u0438\u0435",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0439\u0442\u0435 \u0432\u043D\u0438\u0437"
 };
 
@@ -8187,6 +8429,8 @@ var th_default = {
   "df.wise.group.currencies-with-account-details": "\u0E2A\u0E01\u0E38\u0E25\u0E40\u0E07\u0E34\u0E19\u0E15\u0E48\u0E32\u0E07\u0E46 \u0E1E\u0E23\u0E49\u0E2D\u0E21\u0E23\u0E32\u0E22\u0E25\u0E30\u0E40\u0E2D\u0E35\u0E22\u0E14\u0E1A\u0E31\u0E0D\u0E0A\u0E35",
   "df.wise.group.popular": "\u0E2A\u0E01\u0E38\u0E25\u0E22\u0E2D\u0E14\u0E19\u0E34\u0E22\u0E21",
   "df.wise.group.recent": "\u0E25\u0E48\u0E32\u0E2A\u0E38\u0E14",
+  "df.wise.ssnInput.hideValue": "\u0E0B\u0E48\u0E2D\u0E19\u0E04\u0E48\u0E32",
+  "df.wise.ssnInput.showValue": "\u0E41\u0E2A\u0E14\u0E07\u0E04\u0E48\u0E32",
   "df.wise.step.scrollToBottom": "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E14\u0E49\u0E32\u0E19\u0E25\u0E48\u0E32\u0E07"
 };
 
@@ -8237,6 +8481,8 @@ var tr_default = {
   "df.wise.group.currencies-with-account-details": "Hesap bilgileri olan bakiyeler",
   "df.wise.group.popular": "Pop\xFCler",
   "df.wise.group.recent": "Yak\u0131n zamanl\u0131",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "A\u015Fa\u011F\u0131 kayd\u0131r"
 };
 
@@ -8287,6 +8533,8 @@ var zh_CN_default = {
   "df.wise.group.currencies-with-account-details": "\u5E26\u6709\u8D26\u6237\u8BE6\u7EC6\u4FE1\u606F\u7684\u8D27\u5E01",
   "df.wise.group.popular": "\u70ED\u95E8",
   "df.wise.group.recent": "\u6700\u8FD1",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "\u6EDA\u52A8\u5230\u5E95\u90E8"
 };
 
@@ -8337,6 +8585,8 @@ var zh_HK_default = {
   "df.wise.group.currencies-with-account-details": "\u63D0\u4F9B\u5E33\u6236\u8CC7\u6599\u7684\u8CA8\u5E63",
   "df.wise.group.popular": "\u71B1\u9580",
   "df.wise.group.recent": "\u6700\u8FD1\u7684",
+  "df.wise.ssnInput.hideValue": "Hide value",
+  "df.wise.ssnInput.showValue": "Show value",
   "df.wise.step.scrollToBottom": "\u6ED1\u52D5\u5230\u6700\u5E95\u90E8"
 };