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

package/build/main.mjs

@@ -64,7 +64,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];
@@ -82,7 +82,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();
@@ -105,14 +105,14 @@ var require_classnames = __commonJS({
         return value + newClass;
       }
       if (typeof module !== "undefined" && module.exports) {
-        classNames36.default = classNames36;
-        module.exports = classNames36;
+        classNames37.default = classNames37;
+        module.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;
       }
     })();
   }
@@ -127,7 +127,7 @@ import { useDynamicFlow } from "@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.30.0" : "0.0.0"
+  typeof process !== "undefined" ? "5.32.0" : "0.0.0"
 );
 
 // src/dynamicFlow/context-menu/useContextMenu.tsx
@@ -1535,6 +1535,7 @@ var getSupportingValues = (supportingValues) => {
 };
 
 // ../renderers/src/CheckboxInputRenderer.tsx
+var import_classnames11 = __toESM(require_classnames());
 import { jsx as jsx34 } from "react/jsx-runtime";
 var CheckboxInputRenderer = {
   canRenderType: "input-checkbox",
@@ -1589,36 +1590,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__ */ jsx34("div", { ref, children: /* @__PURE__ */ jsx34(
     ListItem3,
-    __spreadProps(__spreadValues({
-      title,
-      subtitle: description,
-      additionalInfo: getAdditionalText(additionalText),
-      media: getMedia(media, false),
-      disabled,
-      prompt: getInlineAlertOrValidation(validationState, inlineAlert),
+    __spreadProps(__spreadValues({}, getListItemProps(props)), {
       control: /* @__PURE__ */ jsx34(ListItem3.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__ */ jsx34("div", { ref, children: /* @__PURE__ */ jsx34(
+    ListItem3,
+    __spreadProps(__spreadValues({}, getListItemProps(props)), {
+      control: /* @__PURE__ */ jsx34(ListItem3.Switch, { checked: value, onClick: () => onChange(!value) })
+    })
+  ) });
+};
+var getListItemProps = (props) => {
   const {
     additionalText,
     description,
@@ -1626,27 +1617,23 @@ var SwitchItemComponent = (props) => {
     inlineAlert,
     media,
     supportingValues,
+    tags,
     title,
-    validationState,
-    value,
-    features,
-    onChange
+    validationState
   } = props;
-  const { ref } = useScrollToError(validationState, features);
-  return /* @__PURE__ */ jsx34("div", { ref, children: /* @__PURE__ */ jsx34(
-    ListItem3,
-    __spreadProps(__spreadValues({
-      title,
-      subtitle: description,
-      additionalInfo: getAdditionalText(additionalText),
-      media: getMedia(media, false),
-      disabled,
-      prompt: getInlineAlertOrValidation(validationState, inlineAlert),
-      control: /* @__PURE__ */ jsx34(ListItem3.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") {
@@ -3756,7 +3743,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
 import { useEffect as useEffect8, useState as useState9 } from "react";
@@ -3795,7 +3782,7 @@ function ColumnsRendererComponent(props) {
   return /* @__PURE__ */ jsxs9(
     "div",
     {
-      className: (0, import_classnames11.default)(
+      className: (0, import_classnames12.default)(
         "df-columns-renderer-container",
         getMargin(margin),
         {
@@ -4153,11 +4140,11 @@ var GroupedDecisionList = (_a) => {
 };
 
 // ../renderers/src/DecisionRenderer/DecisionWrapper.tsx
-var import_classnames12 = __toESM(require_classnames());
+var import_classnames13 = __toESM(require_classnames());
 import { Fragment as Fragment5, jsx as jsx49, jsxs as jsxs11 } from "react/jsx-runtime";
 var DecisionWrapper = (props) => {
   const { margin, control, title, tags } = props;
-  return /* @__PURE__ */ jsxs11("div", { className: (0, import_classnames12.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+  return /* @__PURE__ */ jsxs11("div", { className: (0, import_classnames13.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     title && /* @__PURE__ */ jsx49(Header3, { as: "h2", title }),
     control === "filtered" ? /* @__PURE__ */ jsx49(FilteredDecisionList, __spreadValues({}, props)) : /* @__PURE__ */ jsx49(UnfilteredDecisionList, __spreadValues({}, props))
   ] });
@@ -4237,7 +4224,7 @@ var renderDecisionList = ({ options, control }) => {
 var DecisionRenderer_default = DecisionRenderer;
 
 // ../renderers/src/DividerRenderer.tsx
-var import_classnames13 = __toESM(require_classnames());
+var import_classnames14 = __toESM(require_classnames());
 import { Divider } from "@transferwise/components";
 import { jsx as jsx51 } from "react/jsx-runtime";
 var mapControlToLevel = (control) => {
@@ -4255,7 +4242,7 @@ var DividerRenderer = {
   render: ({ margin, control, tags }) => /* @__PURE__ */ jsx51(
     Divider,
     {
-      className: (0, import_classnames13.default)(
+      className: (0, import_classnames14.default)(
         "m-t-0",
         "d-block",
         getMargin(margin),
@@ -4355,11 +4342,11 @@ function getOrigin(url) {
 var ExternalConfirmationRenderer_default = ExternalConfirmationRenderer;
 
 // ../renderers/src/FormRenderer.tsx
-var import_classnames14 = __toESM(require_classnames());
+var import_classnames15 = __toESM(require_classnames());
 import { jsx as jsx53 } from "react/jsx-runtime";
 var FormRenderer = {
   canRenderType: "form",
-  render: ({ children, margin, control, tags }) => /* @__PURE__ */ jsx53("div", { className: (0, import_classnames14.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children })
+  render: ({ children, margin, control, tags }) => /* @__PURE__ */ jsx53("div", { className: (0, import_classnames15.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children })
 };
 var FormRenderer_default = FormRenderer;
 
@@ -4383,7 +4370,7 @@ var FormSectionRenderer = {
 var FormSectionRenderer_default = FormSectionRenderer;
 
 // ../renderers/src/HeadingRenderer.tsx
-var import_classnames15 = __toESM(require_classnames());
+var import_classnames16 = __toESM(require_classnames());
 import { Display, Title } from "@transferwise/components";
 import { jsx as jsx55 } from "react/jsx-runtime";
 var HeadingRenderer = {
@@ -4392,7 +4379,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)
   );
@@ -4431,7 +4418,7 @@ var getTitleTypeBySize = (size) => {
 var HeadingRenderer_default = HeadingRenderer;
 
 // ../renderers/src/ImageRenderer/UrlImage.tsx
-var import_classnames16 = __toESM(require_classnames());
+var import_classnames17 = __toESM(require_classnames());
 import { Image } from "@transferwise/components";
 import { useEffect as useEffect10, useState as useState12 } from "react";
 
@@ -4463,7 +4450,7 @@ function UrlImage({
   return /* @__PURE__ */ jsx56(
     "div",
     {
-      className: (0, import_classnames16.default)(
+      className: (0, import_classnames17.default)(
         "df-image",
         align,
         size || "md",
@@ -4526,7 +4513,7 @@ var ImageRenderer = {
 var ImageRenderer_default = ImageRenderer;
 
 // ../renderers/src/InstructionsRenderer.tsx
-var import_classnames17 = __toESM(require_classnames());
+var import_classnames18 = __toESM(require_classnames());
 import { Header as Header5, InstructionsList } from "@transferwise/components";
 import { jsx as jsx58, jsxs as jsxs14 } from "react/jsx-runtime";
 var doContext = ["positive", "neutral", "proposition"];
@@ -4536,7 +4523,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__ */ jsxs14("div", { className: (0, import_classnames17.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+    return /* @__PURE__ */ jsxs14("div", { className: (0, import_classnames18.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
       title ? /* @__PURE__ */ jsx58(Header5, { title }) : null,
       /* @__PURE__ */ jsx58(InstructionsList, { dos, donts })
     ] });
@@ -4621,7 +4608,7 @@ var IntegerInputRenderer = {
 var IntegerInputRenderer_default = IntegerInputRenderer;
 
 // ../renderers/src/ListRenderer.tsx
-var import_classnames18 = __toESM(require_classnames());
+var import_classnames19 = __toESM(require_classnames());
 import { ListItem as ListItem8 } from "@transferwise/components";
 
 // ../renderers/src/components/Header.tsx
@@ -4642,7 +4629,7 @@ var getHeaderAction = (callToAction) => {
 import { jsx as jsx61, jsxs as jsxs15 } from "react/jsx-runtime";
 var ListRenderer = {
   canRenderType: "list",
-  render: ({ callToAction, control, margin, items, tags, title }) => /* @__PURE__ */ jsxs15("div", { className: (0, import_classnames18.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+  render: ({ callToAction, control, margin, items, tags, title }) => /* @__PURE__ */ jsxs15("div", { className: (0, import_classnames19.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     /* @__PURE__ */ jsx61(Header, { title, callToAction }),
     items.map((item) => {
       var _a, _b;
@@ -4680,7 +4667,7 @@ var ListRenderer = {
 var ListRenderer_default = ListRenderer;
 
 // ../renderers/src/LoadingIndicatorRenderer.tsx
-var import_classnames19 = __toESM(require_classnames());
+var import_classnames20 = __toESM(require_classnames());
 import { Loader } from "@transferwise/components";
 import { jsx as jsx62 } from "react/jsx-runtime";
 var LoadingIndicatorRenderer = {
@@ -4690,7 +4677,7 @@ var LoadingIndicatorRenderer = {
     {
       size,
       classNames: {
-        "tw-loader": (0, import_classnames19.default)(
+        "tw-loader": (0, import_classnames20.default)(
           "tw-loader",
           "m-x-auto",
           getMargin(margin),
@@ -4704,7 +4691,7 @@ var LoadingIndicatorRenderer = {
 var LoadingIndicatorRenderer_default = LoadingIndicatorRenderer;
 
 // ../renderers/src/MarkdownRenderer.tsx
-var import_classnames20 = __toESM(require_classnames());
+var import_classnames21 = __toESM(require_classnames());
 import { Markdown as Markdown4 } from "@transferwise/components";
 import { jsx as jsx63 } from "react/jsx-runtime";
 var MarkdownRenderer = {
@@ -4714,14 +4701,14 @@ var MarkdownRenderer = {
     return /* @__PURE__ */ jsx63(
       "div",
       {
-        className: (0, import_classnames20.default)(
+        className: (0, import_classnames21.default)(
           getTextAlignmentAndMargin({ align, margin }),
           controlAndTagsToCSSClass({ control, tags })
         ),
         children: /* @__PURE__ */ jsx63(
           Markdown4,
           {
-            className: (0, import_classnames20.default)("df-markdown", {
+            className: (0, import_classnames21.default)("df-markdown", {
               "np-text-body-large": isLarge,
               "np-text-body-default": !isLarge
             }),
@@ -4736,7 +4723,7 @@ var MarkdownRenderer = {
 var MarkdownRenderer_default = MarkdownRenderer;
 
 // ../renderers/src/MediaRenderer.tsx
-var import_classnames21 = __toESM(require_classnames());
+var import_classnames22 = __toESM(require_classnames());
 import { jsx as jsx64 } from "react/jsx-runtime";
 var MediaRenderer = {
   canRenderType: "media",
@@ -4763,7 +4750,7 @@ var AvatarMediaRendererComponent = ({
   return /* @__PURE__ */ jsx64(
     "div",
     {
-      className: (0, import_classnames21.default)(
+      className: (0, import_classnames22.default)(
         "df-media-layout-avatar",
         align,
         getMargin(margin),
@@ -4814,7 +4801,7 @@ var mapAvatarMediaSize = (size) => {
 };
 
 // ../renderers/src/ModalLayoutRenderer.tsx
-var import_classnames22 = __toESM(require_classnames());
+var import_classnames23 = __toESM(require_classnames());
 import { Button as Button6, Modal as Modal2 } from "@transferwise/components";
 import { useState as useState13 } from "react";
 import { jsx as jsx65, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -4826,7 +4813,7 @@ var ModalLayoutRenderer_default = ModalLayoutRenderer;
 function DFModal({ content, margin, trigger, control, tags }) {
   const [visible, setVisible] = useState13(false);
   const { children, title } = content;
-  return /* @__PURE__ */ jsxs16("div", { className: (0, import_classnames22.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+  return /* @__PURE__ */ jsxs16("div", { className: (0, import_classnames23.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     /* @__PURE__ */ jsx65(Button6, { v2: true, priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
     /* @__PURE__ */ jsx65(
       Modal2,
@@ -5258,7 +5245,7 @@ import { Status, UploadInput } from "@transferwise/components";
 
 // ../renderers/src/components/UploadFieldInput.tsx
 import { InlineAlert as InlineAlert2 } from "@transferwise/components";
-var import_classnames23 = __toESM(require_classnames());
+var import_classnames24 = __toESM(require_classnames());
 import { jsx as jsx72, jsxs as jsxs18 } from "react/jsx-runtime";
 function UploadFieldInput({
   id,
@@ -5278,7 +5265,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"
@@ -5439,7 +5426,7 @@ var NumberInputRenderer = {
 var NumberInputRenderer_default = NumberInputRenderer;
 
 // ../renderers/src/ParagraphRenderer.tsx
-var import_classnames24 = __toESM(require_classnames());
+var import_classnames25 = __toESM(require_classnames());
 import { Button as Button7, Input as Input4 } from "@transferwise/components";
 import { useIntl as useIntl14 } from "react-intl";
 
@@ -5475,7 +5462,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)
   );
@@ -5506,7 +5493,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__ */ jsx75(Button7, { v2: true, block: true, onClick: copy, children: formatMessage(paragraph_messages_default.copy) })
@@ -5515,7 +5502,7 @@ function CopyableParagraph({
 var ParagraphRenderer_default = ParagraphRenderer;
 
 // ../renderers/src/ProgressRenderer.tsx
-var import_classnames25 = __toESM(require_classnames());
+var import_classnames26 = __toESM(require_classnames());
 import { ProgressBar } from "@transferwise/components";
 import { jsx as jsx76 } from "react/jsx-runtime";
 var ProgressRenderer = {
@@ -5525,7 +5512,7 @@ var ProgressRenderer = {
       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__ */ jsx76(LabelContentWithHelp, { text: title, help }) : title,
         description,
         progress: {
@@ -5539,7 +5526,7 @@ var ProgressRenderer = {
 };
 
 // ../renderers/src/RepeatableRenderer.tsx
-var import_classnames26 = __toESM(require_classnames());
+var import_classnames27 = __toESM(require_classnames());
 import { Button as Button8, Header as Header6, InlineAlert as InlineAlert3, Modal as Modal4, NavigationOption } from "@transferwise/components";
 import { Plus } from "@transferwise/icons";
 import { useState as useState16 } from "react";
@@ -5622,7 +5609,7 @@ function Repeatable(props) {
       /* @__PURE__ */ jsxs20(
         "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: [
@@ -5687,14 +5674,14 @@ function ItemSummaryOption({
 var RepeatableRenderer_default = RepeatableRenderer;
 
 // ../renderers/src/ReviewLegacyRenderer.tsx
-var import_classnames27 = __toESM(require_classnames());
+var import_classnames28 = __toESM(require_classnames());
 import { DefinitionList } from "@transferwise/components";
 import { Fragment as Fragment10, jsx as jsx78, jsxs as jsxs21 } from "react/jsx-runtime";
 var ReviewRenderer = {
   canRenderType: "review",
   render: ({ callToAction, control, fields, margin, title, trackEvent, tags }) => {
     const orientation = mapControlToDefinitionListLayout(control);
-    return /* @__PURE__ */ jsxs21("div", { className: (0, import_classnames27.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+    return /* @__PURE__ */ jsxs21("div", { className: (0, import_classnames28.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
       /* @__PURE__ */ jsx78(Header, { title, callToAction }),
       /* @__PURE__ */ jsx78("div", { className: margin, children: /* @__PURE__ */ jsx78(
         DefinitionList,
@@ -5744,7 +5731,7 @@ var getFieldLabel = (label, help, onClick) => {
 };
 
 // ../renderers/src/ReviewRenderer.tsx
-var import_classnames28 = __toESM(require_classnames());
+var import_classnames29 = __toESM(require_classnames());
 import { ListItem as ListItem10, Markdown as Markdown5, Popover } from "@transferwise/components";
 import { QuestionMarkCircle } from "@transferwise/icons";
 import { useIntl as useIntl16 } from "react-intl";
@@ -5770,7 +5757,7 @@ var Review = ({
   trackEvent
 }) => {
   const intl = useIntl16();
-  return /* @__PURE__ */ jsxs22("div", { className: (0, import_classnames28.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+  return /* @__PURE__ */ jsxs22("div", { className: (0, import_classnames29.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     /* @__PURE__ */ jsx79(Header, { title, callToAction }),
     fields.map((field) => {
       var _a, _b, _c;
@@ -6058,7 +6045,7 @@ var SearchRenderer = {
 var SearchRenderer_default = SearchRenderer;
 
 // ../renderers/src/SectionRenderer.tsx
-var import_classnames29 = __toESM(require_classnames());
+var import_classnames30 = __toESM(require_classnames());
 import { Header as Header7 } from "@transferwise/components";
 
 // ../renderers/src/utils/getHeaderAction.tsx
@@ -6090,7 +6077,7 @@ var SectionRenderer = {
     return /* @__PURE__ */ jsxs25(
       "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__ */ jsx84(Header7, { title: title != null ? title : "", action: getHeaderAction2(callToAction) }),
           children
@@ -6430,12 +6417,12 @@ var SelectInputRenderer = {
 var SelectInputRenderer_default = SelectInputRenderer;
 
 // ../renderers/src/StatusListRenderer.tsx
-var import_classnames30 = __toESM(require_classnames());
+var import_classnames31 = __toESM(require_classnames());
 import { AvatarView as AvatarView4, Header as Header9, ListItem as ListItem13 } from "@transferwise/components";
 import { jsx as jsx91, jsxs as jsxs31 } from "react/jsx-runtime";
 var StatusListRenderer = {
   canRenderType: "status-list",
-  render: ({ margin, items, title, control, tags }) => /* @__PURE__ */ jsxs31("div", { className: (0, import_classnames30.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+  render: ({ margin, items, title, control, tags }) => /* @__PURE__ */ jsxs31("div", { className: (0, import_classnames31.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     title ? /* @__PURE__ */ jsx91(Header9, { title }) : null,
     items.map((item) => {
       const { callToAction, description, title: itemTitle } = item;
@@ -6484,7 +6471,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
 import { useTheme } from "@wise/components-theming";
@@ -6634,7 +6621,7 @@ function SplashCelebrationStepRendererComponent(props) {
   return /* @__PURE__ */ jsxs36(
     "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__ */ jsx96(TopBar, { back, toolbar, tags }),
         title || description ? /* @__PURE__ */ jsx96("div", { className: "m-b-4", children: /* @__PURE__ */ jsx96(StepHeader, { title, description, tags }) }) : void 0,
@@ -6646,7 +6633,7 @@ function SplashCelebrationStepRendererComponent(props) {
 }
 
 // ../renderers/src/step/SplashStepRenderer.tsx
-var import_classnames32 = __toESM(require_classnames());
+var import_classnames33 = __toESM(require_classnames());
 import { jsx as jsx97, jsxs as jsxs37 } from "react/jsx-runtime";
 var SplashStepRenderer = {
   canRenderType: "step",
@@ -6658,7 +6645,7 @@ function SplashStepRendererComponent(props) {
   return /* @__PURE__ */ jsxs37(
     "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__ */ jsx97(TopBar, { back, toolbar, tags }),
         title || description ? /* @__PURE__ */ jsx97("div", { className: "m-b-4", children: /* @__PURE__ */ jsx97(StepHeader, { title, description, tags }) }) : void 0,
@@ -6688,7 +6675,7 @@ function StepRendererComponent(props) {
 }
 
 // ../renderers/src/TabsRenderer.tsx
-var import_classnames33 = __toESM(require_classnames());
+var import_classnames34 = __toESM(require_classnames());
 import { Chips as Chips2, SegmentedControl as SegmentedControl2, Tabs as Tabs2 } from "@transferwise/components";
 import { useState as useState19 } from "react";
 import { jsx as jsx99, jsxs as jsxs39 } from "react/jsx-runtime";
@@ -6710,7 +6697,7 @@ var TabsRenderer = {
 };
 function TabsRendererComponent({ uid, margin, tabs, control, tags }) {
   const [selectedIndex, setSelectedIndex] = useState19(0);
-  return /* @__PURE__ */ jsx99("div", { className: (0, import_classnames33.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx99("div", { className: (0, import_classnames34.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: /* @__PURE__ */ jsx99(
     Tabs2,
     {
       name: uid,
@@ -6731,7 +6718,7 @@ function TabsRendererComponent({ uid, margin, tabs, control, tags }) {
 function SegmentedTabsRendererComponent({ uid, margin, tabs, control, tags }) {
   var _a;
   const [selectedIndex, setSelectedIndex] = useState19(0);
-  return /* @__PURE__ */ jsxs39("div", { className: (0, import_classnames33.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+  return /* @__PURE__ */ jsxs39("div", { className: (0, import_classnames34.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     /* @__PURE__ */ jsx99(
       SegmentedControl2,
       {
@@ -6753,7 +6740,7 @@ function SegmentedTabsRendererComponent({ uid, margin, tabs, control, tags }) {
 function ChipsTabsRendererComponent({ margin, tabs, control, tags }) {
   var _a;
   const [selectedIndex, setSelectedIndex] = useState19(0);
-  return /* @__PURE__ */ jsxs39("div", { className: (0, import_classnames33.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
+  return /* @__PURE__ */ jsxs39("div", { className: (0, import_classnames34.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     /* @__PURE__ */ jsx99("div", { className: "chips-container", children: /* @__PURE__ */ jsx99(
       Chips2,
       {
@@ -7108,12 +7095,12 @@ function TextInputRendererComponent(props) {
 var TextInputRenderer_default = TextInputRenderer;
 
 // ../renderers/src/UpdatableRenderer.tsx
-var import_classnames34 = __toESM(require_classnames());
+var import_classnames35 = __toESM(require_classnames());
 import { jsx as jsx102 } from "react/jsx-runtime";
 var UpdatableRenderer = {
   canRenderType: "updatable",
   render: ({ children, control, margin, tags }) => {
-    return /* @__PURE__ */ jsx102("div", { className: (0, import_classnames34.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children });
+    return /* @__PURE__ */ jsx102("div", { className: (0, import_classnames35.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children });
   }
 };
 
@@ -7260,7 +7247,7 @@ var LargeUploadRenderer = {
 };
 
 // ../renderers/src/UpsellRenderer.tsx
-var import_classnames35 = __toESM(require_classnames());
+var import_classnames36 = __toESM(require_classnames());
 import { Nudge } from "@transferwise/components";
 import { useState as useState22 } from "react";
 import { jsx as jsx104 } from "react/jsx-runtime";
@@ -7274,7 +7261,7 @@ function UpsellRendererComponent(props) {
   return isVisible ? /* @__PURE__ */ jsx104(
     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({
@@ -7713,6 +7700,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"
 };
 
@@ -7763,6 +7752,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"
 };
 
@@ -7865,6 +7856,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"
 };
 
@@ -7915,6 +7908,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"
 };
 
@@ -7965,6 +7960,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"
 };
 
@@ -8015,6 +8012,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"
 };
 
@@ -8065,6 +8064,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"
 };
 
@@ -8115,6 +8116,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"
 };
 
@@ -8165,6 +8168,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"
 };
 
@@ -8215,6 +8220,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"
 };
 
@@ -8265,6 +8272,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"
 };
 
@@ -8315,6 +8324,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"
 };
 
@@ -8365,6 +8376,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"
 };
 
@@ -8415,6 +8428,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"
 };
 
@@ -8465,6 +8480,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"
 };
 
@@ -8515,6 +8532,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"
 };
 
@@ -8565,6 +8584,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"
 };