@oatfi/ui 0.4.0 → 0.6.0

package/dist/index.esm.js

@@ -1,7 +1,7 @@
-import { createTheme, ThemeProvider as ThemeProvider$2 } from '@mui/material/styles';
+import { createTheme, ThemeProvider as ThemeProvider$2, useTheme as useTheme$2, alpha } from '@mui/material/styles';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useMemo, useId, useRef, useState } from 'react';
-import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, useTheme as useTheme$1 } from 'styled-components';
+import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css } from 'styled-components';
 import { TextField, InputAdornment, IconButton, FormControl, InputLabel as InputLabel$1, Select, MenuItem, FormHelperText, Autocomplete, Box, CircularProgress } from '@mui/material';
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
@@ -10,6 +10,17 @@ import IconButton$1 from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem$1 from '@mui/material/MenuItem';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import DescriptionIcon from '@mui/icons-material/Description';
+import CircularProgress$1 from '@mui/material/CircularProgress';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import LinkIcon from '@mui/icons-material/Link';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import Box$1 from '@mui/material/Box';
+import Button$1 from '@mui/material/Button';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import Stack from '@mui/material/Stack';
+import LockIcon from '@mui/icons-material/Lock';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 
 const defaultTheme = {
   colors: {
@@ -429,7 +440,7 @@ const Container = styled.div`
   max-width: 1000px;
   margin: 0 auto;
 `;
-const Content = styled.div`
+const Content$1 = styled.div`
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
 `;
@@ -1023,6 +1034,14 @@ function SearchDropdown({
   );
 }
 
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
 const FileInputContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -1107,13 +1126,6 @@ const FileRequirements = styled.div`
   border: 1px solid ${({ theme }) => theme.border.color};
   border-radius: ${({ theme }) => theme.border.radius};
 `;
-const formatFileSize = (bytes) => {
-  if (bytes === 0) return "0 Bytes";
-  const k = 1024;
-  const sizes = ["Bytes", "KB", "MB", "GB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
-};
 function FileInput({
   label,
   error,
@@ -1481,7 +1493,7 @@ function Loader({ className, size, label = "Loading", testId }) {
   );
 }
 
-const Root = styled.footer`
+const Root$1 = styled.footer`
   margin-top: 2rem;
   padding-top: 0.75rem;
   border-top: ${({ theme }) => `${theme.border.width} solid ${theme.colors.border}`};
@@ -1506,7 +1518,7 @@ const Anchor = styled.a`
   }
 `;
 function Footnote({ title, text, links = [], className, testId }) {
-  return /* @__PURE__ */ jsxs(Root, { className, "data-testid": testId, children: [
+  return /* @__PURE__ */ jsxs(Root$1, { className, "data-testid": testId, children: [
     title && /* @__PURE__ */ jsx(Title, { children: title }),
     /* @__PURE__ */ jsxs("p", { style: { margin: 0 }, children: [
       text && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1574,6 +1586,785 @@ function DotsMenu({
   ] });
 }
 
+const AsteriskMark = styled.sup`
+  color: ${({ theme }) => theme.colors.accent};
+  font-weight: 600;
+  margin-left: 1px;
+  font-size: 0.95em;
+`;
+const AsteriskNote = styled.p`
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.secondary};
+  margin: 14px 4px 0;
+  line-height: 1.5;
+  font-style: italic;
+
+  .asterisk {
+    font-style: normal;
+    color: ${({ theme }) => theme.colors.accent};
+    font-weight: 600;
+    margin-right: 2px;
+  }
+`;
+
+const background = (theme, variant) => {
+  if (variant === "filled") return theme.colors.accent;
+  if (variant === "success" || variant === "neutral") return theme.colors.background;
+  return `${theme.colors.accent}14`;
+};
+const foreground = (theme, variant) => {
+  if (variant === "filled") return theme.colors.background;
+  if (variant === "success") return theme.colors.success;
+  if (variant === "neutral") return theme.colors.secondary;
+  return theme.colors.accent;
+};
+const outline = (theme, variant) => {
+  if (variant === "success") return `1px solid ${theme.colors.success}`;
+  if (variant === "neutral") return `1px solid ${theme.colors.border}`;
+  if (variant === "filled") return `1px solid ${theme.colors.accent}`;
+  return "none";
+};
+const Badge = styled.span`
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  background: ${({ theme, $variant }) => background(theme, $variant)};
+  color: ${({ theme, $variant }) => foreground(theme, $variant)};
+  border: ${({ theme, $variant }) => outline(theme, $variant)};
+`;
+
+const Zone = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  min-height: 100px;
+  border: 1px dashed ${({ theme }) => theme.colors.border};
+  border-radius: ${({ theme }) => theme.border.radius};
+  padding: 16px;
+  text-align: center;
+  background: ${({ theme }) => theme.colors.surface};
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+
+  ${({ $dragging, theme }) => $dragging && `
+    border-color: ${theme.colors.accent};
+    background: ${theme.colors.accent}14;
+  `}
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.accent};
+    background: ${({ theme }) => `${theme.colors.accent}14`};
+  }
+
+  &:focus-visible {
+    outline: none;
+    border-color: ${({ theme }) => theme.colors.accent};
+    box-shadow: 0 0 0 3px ${({ theme }) => `${theme.colors.accent}26`};
+  }
+`;
+const ZoneIcon = styled(CloudUploadIcon)`
+  color: ${({ theme }) => theme.colors.secondary};
+`;
+const ZoneText = styled.p`
+  font-size: 13px;
+  margin: 0;
+  color: ${({ theme }) => theme.colors.primary};
+
+  span {
+    color: ${({ theme }) => theme.colors.accent};
+  }
+`;
+const ZoneHint = styled.p`
+  font-size: 11px;
+  color: ${({ theme }) => theme.colors.secondary};
+  margin: 0;
+`;
+const HiddenInput = styled.input`
+  display: none;
+`;
+const FileList = styled.div`
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+const FileItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: ${({ theme }) => theme.colors.background};
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  border-radius: 4px;
+  font-size: 13px;
+
+  .file-icon {
+    color: ${({ theme }) => theme.colors.secondary};
+    font-size: 18px;
+    flex-shrink: 0;
+  }
+
+  .file-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: ${({ theme }) => theme.colors.primary};
+  }
+
+  .file-size {
+    color: ${({ theme }) => theme.colors.secondary};
+    font-size: 12px;
+    flex-shrink: 0;
+  }
+`;
+const RemoveButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: ${({ theme }) => theme.colors.secondary};
+  border-radius: 4px;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.surface};
+    color: ${({ theme }) => theme.colors.error};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  svg {
+    font-size: 16px;
+  }
+`;
+function UploadZone({
+  accept,
+  hint,
+  files = [],
+  onAdd,
+  onRemove,
+  removingIds,
+  disabled = false,
+  inputId,
+  testId
+}) {
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const openPicker = () => {
+    if (!disabled) inputRef.current?.click();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      openPicker();
+    }
+  };
+  const handleChange = (event) => {
+    if (event.target.files?.length) onAdd(event.target.files);
+    event.target.value = "";
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    setDragging(false);
+    if (disabled) return;
+    if (event.dataTransfer.files?.length) onAdd(event.dataTransfer.files);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Zone,
+      {
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-disabled": disabled,
+        $dragging: dragging,
+        onClick: openPicker,
+        onKeyDown: handleKeyDown,
+        onDragOver: (event) => {
+          event.preventDefault();
+          if (!disabled) setDragging(true);
+        },
+        onDragLeave: () => setDragging(false),
+        onDrop: handleDrop,
+        children: [
+          /* @__PURE__ */ jsx(
+            HiddenInput,
+            {
+              id: inputId,
+              ref: inputRef,
+              type: "file",
+              multiple: true,
+              accept,
+              disabled,
+              onChange: handleChange,
+              "data-testid": testId
+            }
+          ),
+          /* @__PURE__ */ jsx(ZoneIcon, { fontSize: "medium", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs(ZoneText, { children: [
+            "Drop files or ",
+            /* @__PURE__ */ jsx("span", { children: "browse" })
+          ] }),
+          /* @__PURE__ */ jsx(ZoneHint, { children: hint })
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ jsx(FileList, { children: files.map((file) => {
+      const isRemoving = removingIds?.has(file.id);
+      return /* @__PURE__ */ jsxs(FileItem, { children: [
+        /* @__PURE__ */ jsx(DescriptionIcon, { className: "file-icon", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "file-name", children: file.fileName }),
+        /* @__PURE__ */ jsx("span", { className: "file-size", children: formatFileSize(file.fileSize) }),
+        isRemoving ? /* @__PURE__ */ jsx(CircularProgress$1, { size: 16, color: "secondary" }) : /* @__PURE__ */ jsx(
+          RemoveButton,
+          {
+            type: "button",
+            "aria-label": `Remove ${file.fileName}`,
+            disabled,
+            onClick: () => onRemove(file.id),
+            children: /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": "true" })
+          }
+        )
+      ] }, file.id);
+    }) })
+  ] });
+}
+
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.colors.background};
+  border: 1px solid ${({ theme, $open }) => $open ? theme.colors.secondary : theme.colors.border};
+  border-radius: ${({ theme }) => theme.border.radius};
+  overflow: hidden;
+  transition: border-color 0.15s ease;
+
+  ${({ $open }) => $open && "grid-column: 1 / -1;"}
+`;
+const Summary = styled.button`
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: transparent;
+  border: none;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.surface};
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px ${({ theme }) => `${theme.colors.accent}40`};
+  }
+`;
+const SummaryText = styled.div`
+  flex: 1;
+  min-width: 0;
+`;
+const Chevron = styled(ExpandMoreIcon)`
+  color: ${({ theme }) => theme.colors.secondary};
+  transition: transform 0.2s ease;
+  transform: rotate(${({ $open }) => $open ? "180deg" : "0deg"});
+  flex-shrink: 0;
+`;
+const Content = styled.div`
+  padding: 12px 16px 14px;
+`;
+const Note = styled(AsteriskNote)`
+  margin: 4px 0 0;
+`;
+function CollapsibleSource({
+  title,
+  desc,
+  note,
+  open = false,
+  onToggle,
+  children,
+  testId
+}) {
+  const contentId = useId();
+  return /* @__PURE__ */ jsxs(Wrapper, { $open: open, children: [
+    /* @__PURE__ */ jsxs(
+      Summary,
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": contentId,
+        onClick: onToggle,
+        "data-testid": testId,
+        children: [
+          /* @__PURE__ */ jsxs(SummaryText, { children: [
+            /* @__PURE__ */ jsxs(FormSubtitle, { style: { margin: 0 }, children: [
+              title,
+              note ? /* @__PURE__ */ jsx(AsteriskMark, { "aria-hidden": "true", children: "*" }) : null
+            ] }),
+            desc ? /* @__PURE__ */ jsx(Body100, { color: "secondary", style: { margin: "2px 0 0" }, children: desc }) : null,
+            note ? /* @__PURE__ */ jsxs(Note, { children: [
+              /* @__PURE__ */ jsx("span", { className: "asterisk", "aria-hidden": "true", children: "*" }),
+              note
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsx(Chevron, { $open: open, "aria-hidden": "true" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(Content, { id: contentId, children })
+  ] });
+}
+
+const maskOf$1 = (plaidData) => {
+  const account = plaidData?.accounts?.[0];
+  return account?.mask || account?.accountMask || null;
+};
+function PlaidTile({ plaidData, onConnect, isConnecting = false, testId }) {
+  const { palette, shape } = useTheme$2();
+  const connected = Boolean(plaidData);
+  const institutionName = plaidData?.institution?.name || "Your bank";
+  const mask = maskOf$1(plaidData);
+  const accentColor = connected ? palette.success.dark : palette.primary.main;
+  return /* @__PURE__ */ jsxs(
+    Box$1,
+    {
+      component: "section",
+      "aria-labelledby": "plaid-tile-title",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "14px",
+        flexWrap: "wrap",
+        padding: "16px 18px",
+        marginBottom: "14px",
+        borderRadius: `${shape.borderRadius}px`,
+        border: `1px solid ${accentColor}`,
+        backgroundColor: connected ? alpha(palette.success.main, 0.08) : palette.background.default,
+        transition: "border-color 0.15s ease, background 0.15s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Box$1, { sx: { flex: 1, minWidth: 220 }, children: [
+          /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", gap: "10px", marginBottom: "2px" }, children: [
+            /* @__PURE__ */ jsx(FormSubtitle, { id: "plaid-tile-title", style: { margin: 0, fontWeight: 600 }, children: connected ? "Connected via Plaid" : "Connect via Plaid" }),
+            /* @__PURE__ */ jsx(Badge, { $variant: connected ? "success" : "info", children: connected ? "Verified" : "Recommended" })
+          ] }),
+          connected ? /* @__PURE__ */ jsxs(Body100, { style: { margin: 0, color: palette.success.dark, fontWeight: 500 }, children: [
+            institutionName,
+            mask ? ` \xB7\xB7\xB7\xB7${mask}` : ""
+          ] }) : /* @__PURE__ */ jsx(Body100, { color: "secondary", style: { margin: 0 }, children: "Securely link your bank in seconds. Best signal for fastest decisions." })
+        ] }),
+        connected ? /* @__PURE__ */ jsx(
+          Button$1,
+          {
+            size: "small",
+            variant: "outlined",
+            color: "inherit",
+            type: "button",
+            onClick: onConnect,
+            disabled: isConnecting,
+            "data-testid": testId,
+            startIcon: /* @__PURE__ */ jsx(RefreshIcon, { fontSize: "small" }),
+            sx: { flexShrink: 0, textTransform: "none" },
+            children: isConnecting ? "Connecting\u2026" : "Reconnect"
+          }
+        ) : /* @__PURE__ */ jsx(
+          Button$1,
+          {
+            size: "small",
+            variant: "contained",
+            color: "primary",
+            type: "button",
+            onClick: onConnect,
+            disabled: isConnecting,
+            "data-testid": testId,
+            startIcon: /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small" }),
+            sx: { flexShrink: 0, textTransform: "none" },
+            children: isConnecting ? "Connecting\u2026" : "Connect bank account"
+          }
+        )
+      ]
+    }
+  );
+}
+
+const Root = styled.div`
+  background-color: ${({ theme }) => theme.colors.surface};
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  border-radius: ${({ theme }) => theme.border.radius};
+  padding: 1.5rem;
+  overflow-y: auto;
+  max-height: 400px;
+  margin-bottom: 1rem;
+  font-size: 14px;
+  line-height: 1.6;
+`;
+function TermsDocument({ html, className, testId }) {
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      className,
+      "data-testid": testId,
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+}
+const HelperText = styled.span`
+  display: block;
+  font-size: 12.5px;
+  color: ${({ theme }) => theme.colors.secondary};
+  text-align: right;
+  margin-top: 0.5rem;
+`;
+
+const DECLINED = /* @__PURE__ */ new Set([
+  "CLOSED_NO_DECISION",
+  "DECLINED",
+  "DENIED",
+  "ERROR",
+  "N/A",
+  "REJECTED"
+]);
+function UnderwritingStatus({
+  status,
+  creditLimit,
+  children,
+  testId
+}) {
+  if (status === "PROCESSING") {
+    return /* @__PURE__ */ jsxs("div", { "data-testid": testId, children: [
+      /* @__PURE__ */ jsx(H3, { children: "Your application is being reviewed" }),
+      /* @__PURE__ */ jsxs(Stack, { width: "100%", alignItems: "center", gap: "16px", children: [
+        /* @__PURE__ */ jsx(Loader, {}),
+        /* @__PURE__ */ jsx(Body200, { children: "We are underwriting your business. This process can take a minute or two." })
+      ] })
+    ] });
+  }
+  if (status === "APPROVED") {
+    return /* @__PURE__ */ jsxs("div", { "data-testid": testId, children: [
+      /* @__PURE__ */ jsx(H3, { children: "Congrats!" }),
+      /* @__PURE__ */ jsxs(Body200, { children: [
+        "You have been approved.",
+        creditLimit ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " Your credit limit is: ",
+          creditLimit
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx(CheckRoundedIcon, { color: "success", sx: { fontSize: "5rem" } }) }),
+      children
+    ] });
+  }
+  if (status && DECLINED.has(status)) {
+    return /* @__PURE__ */ jsxs("div", { "data-testid": testId, children: [
+      /* @__PURE__ */ jsx(H3, { children: "Sorry, we cannot approve your application" }),
+      /* @__PURE__ */ jsx(Body200, { children: "We are sorry to inform you that we cannot approve your application. Please try again later." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(H3, { children: "Your application is being reviewed" }),
+    /* @__PURE__ */ jsx(Body200, { children: "We are reviewing your application and will reach out within 2 business days." })
+  ] });
+}
+
+const MethodCard = styled.div`
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  border-radius: ${({ theme }) => theme.border.radius};
+  border: 1px solid
+    ${({ theme, $default }) => $default ? theme.colors.accent : theme.colors.border};
+  background: ${({ theme, $default, $readonly }) => $default ? `${theme.colors.accent}14` : $readonly ? theme.colors.surface : theme.colors.background};
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+
+  /**
+   * The unsaved-edit bar. It thickens the left border rather than adding one, so
+   * the padding gives back the 2px it takes and the card's contents do not shift
+   * when it appears mid-keystroke. Declared last so it wins over the shorthand
+   * above, including on a $default card that already has an accent border.
+   */
+  ${({ theme, $edited }) => $edited && css`
+      border-left: 3px solid ${theme.colors.accent};
+      padding-left: 14px;
+    `}
+`;
+const MethodBody = styled.div`
+  flex: 1;
+  min-width: 0;
+`;
+const MethodHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: ${({ $tight }) => $tight ? "6px" : "12px"};
+`;
+const MethodTitle = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-size: 14px;
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.primary};
+`;
+const FieldsGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+
+  @media (max-width: 540px) {
+    grid-template-columns: 1fr;
+  }
+`;
+const Banner = styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 10px 14px;
+  background: ${({ theme }) => `${theme.colors.accent}14`};
+  border-left: 3px solid ${({ theme }) => theme.colors.accent};
+  border-radius: ${({ theme }) => theme.border.radius};
+  margin-bottom: 1.25rem;
+
+  svg {
+    color: ${({ theme }) => theme.colors.accent};
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+
+  p {
+    font-size: 13px;
+    color: ${({ theme }) => theme.colors.accent};
+    margin: 0;
+    line-height: 1.5;
+  }
+`;
+const FooterActions = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-top: 1.25rem;
+  flex-wrap: wrap;
+
+  button {
+    margin-top: 0;
+  }
+
+  > :only-child {
+    margin-left: auto;
+  }
+`;
+const FooterRight = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 14px;
+`;
+
+const maskOf = (plaidData) => {
+  const account = plaidData?.accounts?.[0];
+  return account?.mask || account?.accountMask || null;
+};
+function PlaidMethodCard({
+  plaidData,
+  isDefault = false,
+  onSelectDefault,
+  name = "default-method",
+  testId
+}) {
+  const institutionName = plaidData?.institution?.name || "Your bank";
+  const mask = maskOf(plaidData);
+  return /* @__PURE__ */ jsxs(MethodCard, { as: "label", htmlFor: "default-plaid", $default: isDefault, $readonly: true, children: [
+    /* @__PURE__ */ jsx(
+      RadioInput,
+      {
+        type: "radio",
+        id: "default-plaid",
+        name,
+        checked: isDefault,
+        onChange: onSelectDefault,
+        "data-testid": testId
+      }
+    ),
+    /* @__PURE__ */ jsxs(MethodBody, { children: [
+      /* @__PURE__ */ jsxs(MethodHeader, { $tight: true, children: [
+        /* @__PURE__ */ jsxs(MethodTitle, { children: [
+          institutionName,
+          /* @__PURE__ */ jsx(Badge, { $variant: "neutral", children: "Via Plaid" }),
+          isDefault && /* @__PURE__ */ jsx(Badge, { $variant: "filled", children: "Default" })
+        ] }),
+        /* @__PURE__ */ jsx(LockIcon, { fontSize: "small", titleAccess: "Managed via Plaid" })
+      ] }),
+      /* @__PURE__ */ jsx(Body200, { color: "secondary", style: { margin: 0 }, children: mask ? `Account \xB7\xB7\xB7\xB7${mask}` : "Connected account" })
+    ] })
+  ] });
+}
+
+function ManualMethodCard({
+  index,
+  value,
+  isDefault = false,
+  status,
+  trashDisabled = false,
+  disabled = false,
+  accountError,
+  routingError,
+  onSelectDefault,
+  onChangeField,
+  onBlurField,
+  onRemove,
+  name = "default-method"
+}) {
+  const radioId = `default-${value.id}`;
+  return /* @__PURE__ */ jsxs(MethodCard, { $default: isDefault, $edited: status === "edited", children: [
+    /* @__PURE__ */ jsx(
+      RadioInput,
+      {
+        type: "radio",
+        id: radioId,
+        name,
+        checked: isDefault,
+        onChange: onSelectDefault,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsxs(MethodBody, { children: [
+      /* @__PURE__ */ jsxs(MethodHeader, { children: [
+        /* @__PURE__ */ jsxs(MethodTitle, { children: [
+          /* @__PURE__ */ jsxs(Body200, { as: "label", htmlFor: radioId, style: { margin: 0, cursor: "pointer" }, children: [
+            "Account ",
+            index + 1
+          ] }),
+          isDefault && /* @__PURE__ */ jsx(Badge, { $variant: "filled", children: "Default" }),
+          status === "edited" && /* @__PURE__ */ jsx(Badge, { $variant: "info", children: "Unsaved" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          IconButton$1,
+          {
+            size: "small",
+            type: "button",
+            onClick: onRemove,
+            disabled: disabled || trashDisabled,
+            "aria-label": "Remove this account",
+            title: trashDisabled ? "At least one account is required" : "Remove this account",
+            children: /* @__PURE__ */ jsx(DeleteOutlineIcon, { fontSize: "small" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(FieldsGrid, { children: [
+        /* @__PURE__ */ jsx("div", { onBlur: () => onBlurField("account"), children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            label: "Account number",
+            placeholder: "Account number",
+            value: value.account,
+            onChange: (next) => onChangeField("account", next),
+            error: accountError,
+            disabled,
+            onlyNumbers: true
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { onBlur: () => onBlurField("routing"), children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            label: "Routing number",
+            placeholder: "Routing number",
+            value: value.routing,
+            onChange: (next) => onChangeField("routing", next),
+            error: routingError,
+            disabled,
+            onlyNumbers: true
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+
+const ConsentRow = styled.label`
+  display: flex;
+  align-items: center;
+  padding: 12px 14px;
+  background: ${({ theme }) => theme.colors.surface};
+  border-radius: ${({ theme }) => theme.border.radius};
+  margin: 1.25rem 0;
+  cursor: pointer;
+  gap: 10px;
+`;
+function AchVerificationConsent({
+  consentGiven = false,
+  onChange,
+  disabled = false,
+  actionLabel = "Continue",
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(ConsentRow, { children: [
+    /* @__PURE__ */ jsx(
+      CheckboxInput,
+      {
+        type: "checkbox",
+        checked: consentGiven,
+        onChange: (event) => onChange(event.target.checked),
+        disabled,
+        "data-testid": testId
+      }
+    ),
+    /* @__PURE__ */ jsxs(Body100, { style: { margin: 0 }, children: [
+      "By clicking ",
+      actionLabel,
+      ", I agree to the",
+      " ",
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://oatfi.com/payment-method-verification-consent",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: "payment method verification"
+        }
+      ),
+      " ",
+      "and acknowledge the",
+      " ",
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://oatfi.com/usa-patriot-act-disclosure-page",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: "USA PATRIOT Act disclosure"
+        }
+      ),
+      "."
+    ] })
+  ] });
+}
+
 const PreviewCard = styled.div`
   display: flex;
   gap: 2rem;
@@ -1645,5 +2436,5 @@ function Preview({ branding, className }) {
   return /* @__PURE__ */ jsx(ThemeProvider, { branding, children: /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(PreviewContent, {}) }) });
 }
 
-export { AutocompleteInput, BaseInput, Body100, Body200, Body400, Button, ButtonContainer, CheckboxInput, Container, Content, CurrencyInput, DateInput, DetailElement, DetailRow, DetailsContainer, DotsMenu, DropDown, DropdownContainer, DropdownItem, DropdownList, EmailInput, FileInput, FlexColumnWrapper, FlexRowWrapper, Footnote, Form, FormActions, FormCheckboxLabel, FormColumn, FormRow, FormSubtitle, FormTitle, H1, H2, H3, InputError, InputLabel, InputWrapper, Loader, NoResults, PhoneInput, Preview, RadioInput, SSNInput, SearchDropdown, SelectInput, StatusTag, Stepper, Tabs, TaxIdInput, TermsList, TextInput, ThemeProvider, buildMuiTheme, defaultTheme, mergeBranding, useTheme };
+export { AchVerificationConsent, AsteriskMark, AsteriskNote, AutocompleteInput, Badge, Banner, BaseInput, Body100, Body200, Body400, Button, ButtonContainer, CheckboxInput, CollapsibleSource, Container, Content$1 as Content, CurrencyInput, DateInput, DetailElement, DetailRow, DetailsContainer, DotsMenu, DropDown, DropdownContainer, DropdownItem, DropdownList, EmailInput, FieldsGrid, FileInput, FlexColumnWrapper, FlexRowWrapper, FooterActions, FooterRight, Footnote, Form, FormActions, FormCheckboxLabel, FormColumn, FormRow, FormSubtitle, FormTitle, H1, H2, H3, HelperText, InputError, InputLabel, InputWrapper, Loader, ManualMethodCard, MethodBody, MethodCard, MethodHeader, MethodTitle, NoResults, PhoneInput, PlaidMethodCard, PlaidTile, Preview, RadioInput, SSNInput, SearchDropdown, SelectInput, StatusTag, Stepper, Tabs, TaxIdInput, TermsDocument, TermsList, TextInput, ThemeProvider, UnderwritingStatus, UploadZone, buildMuiTheme, defaultTheme, mergeBranding, useTheme };
 //# sourceMappingURL=index.esm.js.map