@wise/dynamic-flow-client-internal 5.29.0-experimental-6048bca → 5.29.0-experimental-cadf60b

package/build/main.mjs

@@ -1792,10 +1792,6 @@ var isIOSWebKit = () => {
   const mtp = navigator.maxTouchPoints;
   return _isIOSResult = navigator.platform === "MacIntel" && mtp !== void 0 && mtp > 0;
 };
-var getRect = (element) => {
-  const { offsetWidth, offsetHeight } = element;
-  return { width: offsetWidth, height: offsetHeight };
-};
 var defaultKeyExtractor = (index) => index;
 var defaultRangeExtractor = (range) => {
   const start = Math.max(range.startIndex - range.overscan, 0);
@@ -1807,43 +1803,6 @@ var defaultRangeExtractor = (range) => {
   }
   return arr;
 };
-var observeElementRect = (instance, cb) => {
-  const element = instance.scrollElement;
-  if (!element) {
-    return;
-  }
-  const targetWindow = instance.targetWindow;
-  if (!targetWindow) {
-    return;
-  }
-  const handler = (rect) => {
-    const { width, height } = rect;
-    cb({ width: Math.round(width), height: Math.round(height) });
-  };
-  handler(getRect(element));
-  if (!targetWindow.ResizeObserver) {
-    return () => {
-    };
-  }
-  const observer = new targetWindow.ResizeObserver((entries) => {
-    const run = () => {
-      const entry = entries[0];
-      if (entry == null ? void 0 : entry.borderBoxSize) {
-        const box = entry.borderBoxSize[0];
-        if (box) {
-          handler({ width: box.inlineSize, height: box.blockSize });
-          return;
-        }
-      }
-      handler(getRect(element));
-    };
-    instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
-  });
-  observer.observe(element, { box: "border-box" });
-  return () => {
-    observer.unobserve(element);
-  };
-};
 var addEventListenerOptions = {
   passive: true
 };
@@ -1897,10 +1856,6 @@ var observeOffset = (instance, cb, readOffset) => {
     fallback == null ? void 0 : fallback.cancel();
   };
 };
-var observeElementOffset = (instance, cb) => observeOffset(instance, cb, (el) => {
-  const { horizontal, isRtl } = instance.options;
-  return horizontal ? el.scrollLeft * (isRtl && -1 || 1) : el.scrollTop;
-});
 var observeWindowOffset = (instance, cb) => observeOffset(
   instance,
   cb,
@@ -1943,7 +1898,6 @@ var scrollWithAdjustments = (offset, {
   });
 };
 var windowScroll = scrollWithAdjustments;
-var elementScroll = scrollWithAdjustments;
 var Virtualizer = class {
   constructor(opts) {
     this.unsubs = [];
@@ -3186,13 +3140,6 @@ function useVirtualizerBase(_a) {
   });
   return instance;
 }
-function useVirtualizer(options) {
-  return useVirtualizerBase(__spreadValues({
-    observeElementRect,
-    observeElementOffset,
-    scrollToFn: elementScroll
-  }, options));
-}
 function useWindowVirtualizer(options) {
   return useVirtualizerBase(__spreadValues({
     getScrollElement: () => typeof document !== "undefined" ? window : null,
@@ -3205,7 +3152,7 @@ function useWindowVirtualizer(options) {
 
 // ../renderers/src/CollectionRenderer/components/ContentComponent.tsx
 import { ProcessIndicator, Button as Button4 } from "@transferwise/components";
-import { useRef as useRef4, useEffect as useEffect7, useLayoutEffect as useLayoutEffect2, useState as useState8 } from "react";
+import { useRef as useRef4, useEffect as useEffect7, useLayoutEffect as useLayoutEffect2 } from "react";
 
 // ../renderers/src/step/StepFooter.tsx
 import { Button as Button3 } from "@transferwise/components";
@@ -3265,7 +3212,7 @@ var FooterWithScrollButton = ({ footer }) => {
     ] })
   ] });
 };
-var useIsElementVisible = (elementRef, root = null) => {
+var useIsElementVisible = (elementRef) => {
   const [isVisible, setIsVisible] = useState7(false);
   useEffect6(() => {
     const element = elementRef.current;
@@ -3274,11 +3221,11 @@ var useIsElementVisible = (elementRef, root = null) => {
       ([entry]) => {
         setIsVisible(entry.isIntersecting);
       },
-      { root, rootMargin: "1px" }
+      { rootMargin: "1px" }
     );
     observer.observe(element);
     return () => observer.disconnect();
-  }, [elementRef, root]);
+  }, [elementRef]);
   return isVisible;
 };
 
@@ -3300,40 +3247,12 @@ var collection_messages_default = defineMessages5({
   }
 });
 
-// ../renderers/src/CollectionRenderer/components/getScrollableAncestor.ts
-var SCROLLABLE_OVERFLOW_VALUES = /* @__PURE__ */ new Set(["auto", "overlay", "scroll"]);
-var getScrollableAncestor = (element) => {
-  var _a;
-  const view = element == null ? void 0 : element.ownerDocument.defaultView;
-  let ancestor = (_a = element == null ? void 0 : element.parentElement) != null ? _a : null;
-  if (!view) {
-    return null;
-  }
-  while (ancestor) {
-    const { overflowY } = view.getComputedStyle(ancestor);
-    const hasScrollableOverflow = SCROLLABLE_OVERFLOW_VALUES.has(overflowY);
-    if (hasScrollableOverflow && ancestor.scrollHeight > ancestor.clientHeight) {
-      return ancestor;
-    }
-    ancestor = ancestor.parentElement;
-  }
-  return null;
-};
-
 // ../renderers/src/CollectionRenderer/components/ContentComponent.tsx
 import { jsx as jsx36, jsxs as jsxs7 } from "react/jsx-runtime";
 var ContentComponent = (props) => {
   const { state, status, SectionHeader, Item } = props;
-  const contentRef = useRef4(null);
-  const [scrollElement, setScrollElement] = useState8(null);
-  useLayoutEffect2(() => {
-    const nextScrollElement = getScrollableAncestor(contentRef.current);
-    setScrollElement(
-      (currentScrollElement) => currentScrollElement === nextScrollElement ? currentScrollElement : nextScrollElement
-    );
-  }, []);
   const endOfContentRef = useRef4(null);
-  const isBottomVisible = useIsElementVisible(endOfContentRef, scrollElement);
+  const isBottomVisible = useIsElementVisible(endOfContentRef);
   useEffect7(() => {
     const shouldAutoLoad = isBottomVisible && status.type === "idle" && state.afterSectionsProps.length === 0;
     if (shouldAutoLoad && status.loadMore) {
@@ -3365,90 +3284,51 @@ var ContentComponent = (props) => {
     var _a, _b;
     listOffsetRef.current = (_b = (_a = listRef.current) == null ? void 0 : _a.offsetTop) != null ? _b : 0;
   });
-  return /* @__PURE__ */ jsxs7("div", { ref: contentRef, children: [
+  const virtualizer = useWindowVirtualizer({
+    count: stateCount,
+    estimateSize: () => 120,
+    overscan: 10,
+    // eslint-disable-next-line react-hooks/refs
+    scrollMargin: listOffsetRef.current
+  });
+  return /* @__PURE__ */ jsxs7("div", { ref: listRef, children: [
     state.beforeSections,
-    scrollElement ? /* @__PURE__ */ jsx36(
-      ElementVirtualizedItems,
-      {
-        Item,
-        SectionHeader,
-        items,
-        scrollElement,
-        stateCount
-      }
-    ) : /* @__PURE__ */ jsx36(
-      WindowVirtualizedItems,
+    /* @__PURE__ */ jsx36(
+      "div",
       {
-        Item,
-        SectionHeader,
-        items,
-        stateCount
+        style: {
+          height: `${virtualizer.getTotalSize()}px`,
+          width: "100%",
+          position: "relative"
+        },
+        children: virtualizer.getVirtualItems().map((item) => {
+          const i = items[item.index];
+          if (!i) {
+            return null;
+          }
+          return /* @__PURE__ */ jsx36(
+            "div",
+            {
+              ref: virtualizer.measureElement,
+              "data-index": item.index,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`
+              },
+              children: i.type === "header" ? /* @__PURE__ */ jsx36(SectionHeader, __spreadValues({}, i)) : /* @__PURE__ */ jsx36(Item, __spreadValues({}, i.item))
+            },
+            item.key
+          );
+        })
       }
     ),
     /* @__PURE__ */ jsx36("div", { ref: endOfContentRef, className: "d-flex m-x-auto m-y-2", children: /* @__PURE__ */ jsx36(PaginationComponent, { status, state }) }),
     state.afterSections
   ] });
 };
-var WindowVirtualizedItems = (props) => {
-  const { stateCount } = props;
-  const virtualItemsRef = useRef4(null);
-  const virtualizer = useWindowVirtualizer({
-    count: stateCount,
-    estimateSize: () => 120,
-    overscan: 10
-  });
-  return /* @__PURE__ */ jsx36(VirtualizedItems, __spreadProps(__spreadValues({}, props), { virtualItemsRef, virtualizer }));
-};
-var ElementVirtualizedItems = (props) => {
-  const { scrollElement, stateCount } = props;
-  const virtualItemsRef = useRef4(null);
-  const virtualizer = useVirtualizer({
-    count: stateCount,
-    getScrollElement: () => scrollElement,
-    estimateSize: () => 120,
-    overscan: 10
-  });
-  return /* @__PURE__ */ jsx36(VirtualizedItems, __spreadProps(__spreadValues({}, props), { virtualItemsRef, virtualizer }));
-};
-var VirtualizedItems = ({
-  Item,
-  SectionHeader,
-  items,
-  virtualItemsRef,
-  virtualizer
-}) => /* @__PURE__ */ jsx36(
-  "div",
-  {
-    ref: virtualItemsRef,
-    style: {
-      height: `${virtualizer.getTotalSize()}px`,
-      width: "100%",
-      position: "relative"
-    },
-    children: virtualizer.getVirtualItems().map((item) => {
-      const i = items[item.index];
-      if (!i) {
-        return null;
-      }
-      return /* @__PURE__ */ jsx36(
-        "div",
-        {
-          ref: virtualizer.measureElement,
-          "data-index": item.index,
-          style: {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%",
-            transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`
-          },
-          children: i.type === "header" ? /* @__PURE__ */ jsx36(SectionHeader, __spreadValues({}, i)) : /* @__PURE__ */ jsx36(Item, __spreadValues({}, i.item))
-        },
-        item.key
-      );
-    })
-  }
-);
 var PaginationComponent = ({
   status,
   state
@@ -3747,11 +3627,11 @@ var CollectionRenderer_default = CollectionRenderer;
 var import_classnames11 = __toESM(require_classnames());
 
 // ../renderers/src/utils/useIsCollapsed.ts
-import { useEffect as useEffect8, useState as useState9 } from "react";
+import { useEffect as useEffect8, useState as useState8 } from "react";
 var COLLAPSE_QUERY = "(max-width: 767.98px)";
 var supportsMatchMedia = () => typeof window !== "undefined" && !!window.matchMedia;
 var useIsCollapsed = () => {
-  const [collapsed, setCollapsed] = useState9(
+  const [collapsed, setCollapsed] = useState8(
     () => supportsMatchMedia() && window.matchMedia(COLLAPSE_QUERY).matches
   );
   useEffect8(() => {
@@ -3805,7 +3685,7 @@ var ColumnsRenderer_default = ColumnsRenderer;
 import { DateInput, DateLookup } from "@transferwise/components";
 
 // ../renderers/src/hooks/useAvailabilityRules.ts
-import { useState as useState10 } from "react";
+import { useState as useState9 } from "react";
 import { useIntl as useIntl7 } from "react-intl";
 
 // ../renderers/src/messages/date-input.messages.ts
@@ -3850,7 +3730,7 @@ var dateToDateString = (date) => {
 var useAvailabilityRules = (availability) => {
   var _a, _b;
   const { formatMessage } = useIntl7();
-  const [focusedDate, setFocusedDate] = useState10(null);
+  const [focusedDate, setFocusedDate] = useState9(null);
   const unavailableMessage = (_b = (_a = focusedDate ? getUnavailableDateReason(focusedDate, availability) : null) != null ? _a : availability == null ? void 0 : availability.message) != null ? _b : formatMessage(date_input_messages_default.unavailableDates);
   const onDateSelect = ({ date }) => {
     setFocusedDate(date);
@@ -4008,7 +3888,7 @@ import { ListItem as ListItem7 } from "@transferwise/components";
 
 // ../renderers/src/DecisionRenderer/DecisionWrapper.tsx
 import { Header as Header3, SearchInput } from "@transferwise/components";
-import { useState as useState11 } from "react";
+import { useState as useState10 } from "react";
 import { useIntl as useIntl9 } from "react-intl";
 
 // ../renderers/src/messages/filter.messages.ts
@@ -4156,7 +4036,7 @@ var UnfilteredDecisionList = (_a) => {
 };
 var FilteredDecisionList = (props) => {
   const { formatMessage } = useIntl9();
-  const [query, setQuery] = useState11("");
+  const [query, setQuery] = useState10("");
   const { control, options, renderDecisionList: renderDecisionList2 } = props;
   const filteredOptions = (query == null ? void 0 : query.length) > 0 ? filterAndSortItems(options, query) : options;
   const isGrouped = isGroupedDecision(options);
@@ -4421,7 +4301,7 @@ var HeadingRenderer_default = HeadingRenderer;
 // ../renderers/src/ImageRenderer/UrlImage.tsx
 var import_classnames16 = __toESM(require_classnames());
 import { Image } from "@transferwise/components";
-import { useEffect as useEffect10, useState as useState12 } from "react";
+import { useEffect as useEffect10, useState as useState11 } from "react";
 
 // ../renderers/src/utils/api-utils.ts
 function isRelativePath(url = "") {
@@ -4442,7 +4322,7 @@ function UrlImage({
   uri,
   httpClient
 }) {
-  const [imageSource, setImageSource] = useState12("");
+  const [imageSource, setImageSource] = useState11("");
   useEffect10(() => {
     if (!uri.startsWith("urn:")) {
       void getImageSource(httpClient, uri).then(setImageSource);
@@ -4787,7 +4667,7 @@ var mapAvatarMediaSize = (size) => {
 // ../renderers/src/ModalLayoutRenderer.tsx
 var import_classnames22 = __toESM(require_classnames());
 import { Button as Button6, Modal as Modal2 } from "@transferwise/components";
-import { useState as useState13 } from "react";
+import { useState as useState12 } from "react";
 import { jsx as jsx65, jsxs as jsxs16 } from "react/jsx-runtime";
 var ModalLayoutRenderer = {
   canRenderType: "modal-layout",
@@ -4795,7 +4675,7 @@ var ModalLayoutRenderer = {
 };
 var ModalLayoutRenderer_default = ModalLayoutRenderer;
 function DFModal({ content, margin, trigger, control, tags }) {
-  const [visible, setVisible] = useState13(false);
+  const [visible, setVisible] = useState12(false);
   const { children, title } = content;
   return /* @__PURE__ */ jsxs16("div", { className: (0, import_classnames22.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     /* @__PURE__ */ jsx65(Button6, { v2: true, priority: "tertiary", block: true, onClick: () => setVisible(true), children: trigger.title }),
@@ -4940,7 +4820,7 @@ function assertCurrencyCodeIsString(currencyCode) {
 
 // ../renderers/src/MultiSelectInputRenderer/InlineComponent.tsx
 import { ListItem as ListItem9, SearchInput as SearchInput2 } from "@transferwise/components";
-import { useState as useState14 } from "react";
+import { useState as useState13 } from "react";
 import { useIntl as useIntl12 } from "react-intl";
 
 // ../renderers/src/utils/items-with-index.ts
@@ -4966,7 +4846,7 @@ function InlineComponent(props) {
     onSelect
   } = props;
   const optionsWithIndex = zipWithIndex(options);
-  const [query, setQuery] = useState14("");
+  const [query, setQuery] = useState13("");
   const { formatMessage } = useIntl12();
   const filtered = tags == null ? void 0 : tags.includes("filtered");
   const filteredOptions = query ? filterAndSortItems(optionsWithIndex, filtered ? query : "") : optionsWithIndex;
@@ -5041,7 +4921,7 @@ function InlineComponent(props) {
 
 // ../renderers/src/MultiSelectInputRenderer/DefaultComponent.tsx
 import { SelectInput, SelectInputOptionContent } from "@transferwise/components";
-import { useState as useState15 } from "react";
+import { useState as useState14 } from "react";
 import { useIntl as useIntl13 } from "react-intl";
 
 // ../renderers/src/messages/multi-select.messages.ts
@@ -5058,7 +4938,7 @@ var multi_select_messages_default = defineMessages10({
 import { jsx as jsx69 } from "react/jsx-runtime";
 function DefaultComponent(props) {
   const { formatMessage } = useIntl13();
-  const [stagedIndices, setStagedIndices] = useState15();
+  const [stagedIndices, setStagedIndices] = useState14();
   const {
     id,
     autoComplete,
@@ -5513,7 +5393,7 @@ var ProgressRenderer = {
 var import_classnames26 = __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";
+import { useState as useState15 } from "react";
 import { useIntl as useIntl15 } from "react-intl";
 
 // ../renderers/src/messages/repeatable.messages.ts
@@ -5563,7 +5443,7 @@ function Repeatable(props) {
     onRemove
   } = props;
   const { formatMessage } = useIntl15();
-  const [openModalType, setOpenModalType] = useState16(null);
+  const [openModalType, setOpenModalType] = useState15(null);
   const { ref } = useScrollToError(validationState, features);
   const onAddItem = () => {
     onAdd();
@@ -5787,7 +5667,7 @@ var ReviewRenderer_default = ReviewRenderer2;
 
 // ../renderers/src/SearchRenderer/BlockSearchRendererComponent.tsx
 import { Input as Input5, InputGroup as InputGroup4, List, ListItem as ListItem11, Markdown as Markdown6 } from "@transferwise/components";
-import { useState as useState17 } from "react";
+import { useState as useState16 } from "react";
 import { useIntl as useIntl18 } from "react-intl";
 
 // ../renderers/src/messages/search.messages.ts
@@ -5830,7 +5710,7 @@ function BlockSearchRendererComponent({
   trackEvent,
   onChange
 }) {
-  const [hasSearched, setHasSearched] = useState17(false);
+  const [hasSearched, setHasSearched] = useState16(false);
   const { formatMessage } = useIntl18();
   return /* @__PURE__ */ jsxs24("div", { className: getMargin(margin), children: [
     /* @__PURE__ */ jsx81(
@@ -5925,7 +5805,7 @@ var BlockSearchRendererComponent_default = BlockSearchRendererComponent;
 // ../renderers/src/SearchRenderer/InlineSearchRendererComponent.tsx
 import { Markdown as Markdown7, Typeahead } from "@transferwise/components";
 import { Search as Search3 } from "@transferwise/icons";
-import { useState as useState18 } from "react";
+import { useState as useState17 } from "react";
 import { useIntl as useIntl19 } from "react-intl";
 import { jsx as jsx82 } from "react/jsx-runtime";
 function InlineSearchRenderer({
@@ -5941,7 +5821,7 @@ function InlineSearchRenderer({
   onChange,
   trackEvent
 }) {
-  const [hasSearched, setHasSearched] = useState18(false);
+  const [hasSearched, setHasSearched] = useState17(false);
   const intl = useIntl19();
   return /* @__PURE__ */ jsx82("div", { className: getMargin(margin), children: /* @__PURE__ */ jsx82(
     FieldInput_default,
@@ -6661,7 +6541,7 @@ function StepRendererComponent(props) {
 // ../renderers/src/TabsRenderer.tsx
 var import_classnames33 = __toESM(require_classnames());
 import { Chips as Chips2, SegmentedControl as SegmentedControl2, Tabs as Tabs2 } from "@transferwise/components";
-import { useState as useState19 } from "react";
+import { useState as useState18 } from "react";
 import { jsx as jsx99, jsxs as jsxs39 } from "react/jsx-runtime";
 var TabsRenderer = {
   canRenderType: "tabs",
@@ -6680,7 +6560,7 @@ var TabsRenderer = {
   }
 };
 function TabsRendererComponent({ uid, margin, tabs, control, tags }) {
-  const [selectedIndex, setSelectedIndex] = useState19(0);
+  const [selectedIndex, setSelectedIndex] = useState18(0);
   return /* @__PURE__ */ jsx99("div", { className: (0, import_classnames33.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: /* @__PURE__ */ jsx99(
     Tabs2,
     {
@@ -6701,7 +6581,7 @@ function TabsRendererComponent({ uid, margin, tabs, control, tags }) {
 }
 function SegmentedTabsRendererComponent({ uid, margin, tabs, control, tags }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = useState19(0);
+  const [selectedIndex, setSelectedIndex] = useState18(0);
   return /* @__PURE__ */ jsxs39("div", { className: (0, import_classnames33.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     /* @__PURE__ */ jsx99(
       SegmentedControl2,
@@ -6723,7 +6603,7 @@ function SegmentedTabsRendererComponent({ uid, margin, tabs, control, tags }) {
 }
 function ChipsTabsRendererComponent({ margin, tabs, control, tags }) {
   var _a;
-  const [selectedIndex, setSelectedIndex] = useState19(0);
+  const [selectedIndex, setSelectedIndex] = useState18(0);
   return /* @__PURE__ */ jsxs39("div", { className: (0, import_classnames33.default)(getMargin(margin), controlAndTagsToCSSClass({ control, tags })), children: [
     /* @__PURE__ */ jsx99("div", { className: "chips-container", children: /* @__PURE__ */ jsx99(
       Chips2,
@@ -6748,6 +6628,7 @@ import {
   TextArea,
   TextareaWithDisplayFormat
 } from "@transferwise/components";
+import WithDisplayFormatModule from "@transferwise/components/build/WithDisplayFormat/WithDisplayFormat";
 import { jsx as jsx100 } from "react/jsx-runtime";
 var commonKeys = [
   "autoComplete",
@@ -6763,13 +6644,18 @@ var commonKeys = [
   "value"
 ];
 function VariableTextInput(inputProps) {
-  const { id, value, control, onChange } = inputProps;
+  const { id, value, control, displayFormat, onChange } = inputProps;
   const commonProps = __spreadProps(__spreadValues({}, pick(inputProps, ...commonKeys)), { name: id });
+  if (control === "ssn-input" || displayFormat === "***-***-***" || displayFormat === "***-**-****") {
+    return /* @__PURE__ */ jsx100(SsnInput, __spreadProps(__spreadValues({}, commonProps), { onChange }));
+  }
   switch (control) {
     case "email":
       return /* @__PURE__ */ jsx100(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "email", onChange }));
     case "password":
       return /* @__PURE__ */ jsx100(TextInput, __spreadProps(__spreadValues({}, commonProps), { type: "password", onChange }));
+    case "ssn-input":
+      return /* @__PURE__ */ jsx100(SsnInput, __spreadProps(__spreadValues({}, commonProps), { onChange }));
     case "numeric": {
       const numericProps = __spreadProps(__spreadValues({}, commonProps), { type: "number", onWheel });
       return /* @__PURE__ */ jsx100(
@@ -6790,10 +6676,21 @@ function VariableTextInput(inputProps) {
   }
 }
 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" ? TextareaWithDisplayFormat : InputWithDisplayFormat;
   const InputWithoutPattern = control === "textarea" ? TextArea : Input6;
-  return displayFormat ? /* @__PURE__ */ jsx100(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ jsx100(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { onChange: (e) => onChange(e.target.value) }));
+  return displayFormat ? /* @__PURE__ */ jsx100(InputWithPattern, __spreadProps(__spreadValues({ displayPattern: displayFormat }, commonProps), { onChange })) : /* @__PURE__ */ jsx100(InputWithoutPattern, __spreadProps(__spreadValues({}, commonProps), { type, onChange: (e) => onChange(e.target.value) }));
+}
+function SsnInput(props) {
+  const _a = props, { onChange, type: _type } = _a, commonProps = __objRest(_a, ["onChange", "type"]);
+  return /* @__PURE__ */ jsx100(
+    "input",
+    __spreadProps(__spreadValues({}, commonProps), {
+      className: "form-control np-form-control np-form-control--size-auto np-input np-input--shape-rectangle",
+      type: "password",
+      onChange: (event) => onChange(event.target.value.replace(/[^0-9]/g, ""))
+    })
+  );
 }
 
 // ../renderers/src/TextInputRenderer.tsx
@@ -7005,7 +6902,7 @@ var LargeUploadRenderer = {
 // ../renderers/src/UpsellRenderer.tsx
 var import_classnames35 = __toESM(require_classnames());
 import { Nudge } from "@transferwise/components";
-import { useState as useState20 } from "react";
+import { useState as useState19 } from "react";
 import { jsx as jsx104 } from "react/jsx-runtime";
 var UpsellRenderer = {
   canRenderType: "upsell",
@@ -7013,7 +6910,7 @@ var UpsellRenderer = {
 };
 function UpsellRendererComponent(props) {
   const { text, callToAction, media, margin, onDismiss, control, tags } = props;
-  const [isVisible, setIsVisible] = useState20(true);
+  const [isVisible, setIsVisible] = useState19(true);
   return isVisible ? /* @__PURE__ */ jsx104(
     Nudge,
     {