@oatfi/ui 0.3.0 → 0.5.0

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 var styles = require('@mui/material/styles');
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var styled = require('styled-components');
 var material = require('@mui/material');
 var CalendarMonthIcon = require('@mui/icons-material/CalendarMonth');
@@ -12,6 +12,17 @@ var IconButton = require('@mui/material/IconButton');
 var Menu = require('@mui/material/Menu');
 var MenuItem = require('@mui/material/MenuItem');
 var MoreVertIcon = require('@mui/icons-material/MoreVert');
+var DescriptionIcon = require('@mui/icons-material/Description');
+var CircularProgress = require('@mui/material/CircularProgress');
+var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
+var LinkIcon = require('@mui/icons-material/Link');
+var RefreshIcon = require('@mui/icons-material/Refresh');
+var Box = require('@mui/material/Box');
+var Button$1 = require('@mui/material/Button');
+var CheckRoundedIcon = require('@mui/icons-material/CheckRounded');
+var Stack = require('@mui/material/Stack');
+var LockIcon = require('@mui/icons-material/Lock');
+var DeleteOutlineIcon = require('@mui/icons-material/DeleteOutline');
 
 const defaultTheme = {
   colors: {
@@ -219,8 +230,8 @@ const GlobalStyle = styled.createGlobalStyle`
   }
 `;
 function ThemeProvider({ branding, children }) {
-  const theme = react.useMemo(() => mergeBranding(branding), [branding]);
-  const muiTheme = react.useMemo(() => buildMuiTheme(theme), [theme]);
+  const theme = React.useMemo(() => mergeBranding(branding), [branding]);
+  const muiTheme = React.useMemo(() => buildMuiTheme(theme), [theme]);
   return /* @__PURE__ */ jsxRuntime.jsxs(styled.ThemeProvider, { theme, children: [
     /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, {}),
     /* @__PURE__ */ jsxRuntime.jsx(styles.ThemeProvider, { theme: muiTheme, children })
@@ -431,7 +442,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;
 `;
@@ -814,7 +825,7 @@ function CurrencyInput({
   name,
   testId
 }) {
-  const reactId = react.useId();
+  const reactId = React.useId();
   const inputId = `${reactId}-input`;
   const errorId = `${reactId}-error`;
   const handleChange = (e) => {
@@ -859,7 +870,7 @@ function DateInput({
   min,
   max
 }) {
-  const inputRef = react.useRef(null);
+  const inputRef = React.useRef(null);
   const handleIconClick = () => {
     const input = inputRef.current;
     if (!input) return;
@@ -919,7 +930,7 @@ function DropDown({
   name,
   testId
 }) {
-  const reactId = react.useId();
+  const reactId = React.useId();
   const labelId = `${reactId}-label`;
   const selectId = `${reactId}-select`;
   const selectDisplayProps = {
@@ -1025,6 +1036,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;
@@ -1109,13 +1128,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,
@@ -1130,9 +1142,9 @@ function FileInput({
   name,
   testId
 }) {
-  const fileInputRef = react.useRef(null);
-  const [dragOver, setDragOver] = react.useState(false);
-  const reactId = react.useId();
+  const fileInputRef = React.useRef(null);
+  const [dragOver, setDragOver] = React.useState(false);
+  const reactId = React.useId();
   const inputId = `${reactId}-input`;
   const errorId = `${reactId}-error`;
   const requirementsId = `${reactId}-requirements`;
@@ -1437,8 +1449,8 @@ function Tabs({
   onTabChange,
   testId
 }) {
-  const [activeTab, setActiveTab] = react.useState(defaultActiveTab);
-  const baseId = react.useId();
+  const [activeTab, setActiveTab] = React.useState(defaultActiveTab);
+  const baseId = React.useId();
   const handleTabClick = (index) => {
     setActiveTab(index);
     onTabChange?.(index);
@@ -1483,15 +1495,55 @@ function Loader({ className, size, label = "Loading", testId }) {
   );
 }
 
+const Root$1 = styled.footer`
+  margin-top: 2rem;
+  padding-top: 0.75rem;
+  border-top: ${({ theme }) => `${theme.border.width} solid ${theme.colors.border}`};
+  text-align: center;
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: ${({ theme }) => theme.colors.secondary};
+`;
+const Title = styled.p`
+  margin: 0 0 0.25rem;
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.primary};
+`;
+const Anchor = styled.a`
+  color: ${({ theme }) => theme.colors.accent};
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    text-decoration: underline;
+  }
+`;
+function Footnote({ title, text, links = [], className, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root$1, { className, "data-testid": testId, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(Title, { children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: 0 }, children: [
+      text && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        text,
+        " "
+      ] }),
+      links.map((link, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+        index > 0 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " \xB7 " }),
+        /* @__PURE__ */ jsxRuntime.jsx(Anchor, { href: link.href, target: "_blank", rel: "noopener noreferrer", children: link.label })
+      ] }, link.href))
+    ] })
+  ] });
+}
+
 function DotsMenu({
   options,
   iconSize = "medium",
   ariaLabel = "more",
   testId
 }) {
-  const [anchorEl, setAnchorEl] = react.useState(null);
+  const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
-  const baseId = react.useId();
+  const baseId = React.useId();
   const buttonId = `${baseId}-button`;
   const menuId = `${baseId}-menu`;
   const handleClick = (event) => {
@@ -1536,6 +1588,768 @@ 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 = React.useRef(null);
+  const [dragging, setDragging] = React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            HiddenInput,
+            {
+              id: inputId,
+              ref: inputRef,
+              type: "file",
+              multiple: true,
+              accept,
+              disabled,
+              onChange: handleChange,
+              "data-testid": testId
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ZoneIcon, { fontSize: "medium", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ZoneText, { children: [
+            "Drop files or ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "browse" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ZoneHint, { children: hint })
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(FileList, { children: files.map((file) => {
+      const isRemoving = removingIds?.has(file.id);
+      return /* @__PURE__ */ jsxRuntime.jsxs(FileItem, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DescriptionIcon, { className: "file-icon", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "file-name", children: file.fileName }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "file-size", children: formatFileSize(file.fileSize) }),
+        isRemoving ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, { size: 16, color: "secondary" }) : /* @__PURE__ */ jsxRuntime.jsx(
+          RemoveButton,
+          {
+            type: "button",
+            "aria-label": `Remove ${file.fileName}`,
+            disabled,
+            onClick: () => onRemove(file.id),
+            children: /* @__PURE__ */ jsxRuntime.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 = React.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $open: open, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Summary,
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": contentId,
+        onClick: onToggle,
+        "data-testid": testId,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SummaryText, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(FormSubtitle, { style: { margin: 0 }, children: [
+              title,
+              note ? /* @__PURE__ */ jsxRuntime.jsx(AsteriskMark, { "aria-hidden": "true", children: "*" }) : null
+            ] }),
+            desc ? /* @__PURE__ */ jsxRuntime.jsx(Body100, { color: "secondary", style: { margin: "2px 0 0" }, children: desc }) : null,
+            note ? /* @__PURE__ */ jsxRuntime.jsxs(Note, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "asterisk", "aria-hidden": "true", children: "*" }),
+              note
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Chevron, { $open: open, "aria-hidden": "true" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.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 } = styles.useTheme();
+  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__ */ jsxRuntime.jsxs(
+    Box,
+    {
+      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 ? styles.alpha(palette.success.main, 0.08) : palette.background.default,
+        transition: "border-color 0.15s ease, background 0.15s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { flex: 1, minWidth: 220 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: "10px", marginBottom: "2px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(FormSubtitle, { id: "plaid-tile-title", style: { margin: 0, fontWeight: 600 }, children: connected ? "Connected via Plaid" : "Connect via Plaid" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Badge, { $variant: connected ? "success" : "info", children: connected ? "Verified" : "Recommended" })
+          ] }),
+          connected ? /* @__PURE__ */ jsxRuntime.jsxs(Body100, { style: { margin: 0, color: palette.success.dark, fontWeight: 500 }, children: [
+            institutionName,
+            mask ? ` \xB7\xB7\xB7\xB7${mask}` : ""
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(Body100, { color: "secondary", style: { margin: 0 }, children: "Securely link your bank in seconds. Best signal for fastest decisions." })
+        ] }),
+        connected ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button$1,
+          {
+            size: "small",
+            variant: "outlined",
+            color: "inherit",
+            type: "button",
+            onClick: onConnect,
+            disabled: isConnecting,
+            "data-testid": testId,
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(RefreshIcon, { fontSize: "small" }),
+            sx: { flexShrink: 0, textTransform: "none" },
+            children: isConnecting ? "Connecting\u2026" : "Reconnect"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          Button$1,
+          {
+            size: "small",
+            variant: "contained",
+            color: "primary",
+            type: "button",
+            onClick: onConnect,
+            disabled: isConnecting,
+            "data-testid": testId,
+            startIcon: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { "data-testid": testId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(H3, { children: "Your application is being reviewed" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Stack, { width: "100%", alignItems: "center", gap: "16px", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Loader, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(Body200, { children: "We are underwriting your business. This process can take a minute or two." })
+      ] })
+    ] });
+  }
+  if (status === "APPROVED") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": testId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(H3, { children: "Congrats!" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Body200, { children: [
+        "You have been approved.",
+        creditLimit ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " Your credit limit is: ",
+          creditLimit
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(CheckRoundedIcon, { color: "success", sx: { fontSize: "5rem" } }) }),
+      children
+    ] });
+  }
+  if (status && DECLINED.has(status)) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": testId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(H3, { children: "Sorry, we cannot approve your application" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Body200, { children: "We are sorry to inform you that we cannot approve your application. Please try again later." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": testId, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(H3, { children: "Your application is being reviewed" }),
+    /* @__PURE__ */ jsxRuntime.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;
+`;
+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;
+  }
+`;
+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__ */ jsxRuntime.jsxs(MethodCard, { as: "label", htmlFor: "default-plaid", $default: isDefault, $readonly: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RadioInput,
+      {
+        type: "radio",
+        id: "default-plaid",
+        name,
+        checked: isDefault,
+        onChange: onSelectDefault,
+        "data-testid": testId
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(MethodBody, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(MethodHeader, { $tight: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(MethodTitle, { children: [
+          institutionName,
+          /* @__PURE__ */ jsxRuntime.jsx(Badge, { $variant: "neutral", children: "Via Plaid" }),
+          isDefault && /* @__PURE__ */ jsxRuntime.jsx(Badge, { $variant: "filled", children: "Default" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(LockIcon, { fontSize: "small", titleAccess: "Managed via Plaid" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Body200, { color: "secondary", style: { margin: 0 }, children: mask ? `Account \xB7\xB7\xB7\xB7${mask}` : "Connected account" })
+    ] })
+  ] });
+}
+
+function ManualMethodCard({
+  index,
+  value,
+  isDefault = false,
+  trashDisabled = false,
+  disabled = false,
+  accountError,
+  routingError,
+  onSelectDefault,
+  onChangeField,
+  onBlurField,
+  onRemove,
+  name = "default-method"
+}) {
+  const radioId = `default-${value.id}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(MethodCard, { $default: isDefault, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RadioInput,
+      {
+        type: "radio",
+        id: radioId,
+        name,
+        checked: isDefault,
+        onChange: onSelectDefault,
+        disabled
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(MethodBody, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(MethodHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(MethodTitle, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Body200, { as: "label", htmlFor: radioId, style: { margin: 0, cursor: "pointer" }, children: [
+            "Account ",
+            index + 1
+          ] }),
+          isDefault && /* @__PURE__ */ jsxRuntime.jsx(Badge, { $variant: "filled", children: "Default" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            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__ */ jsxRuntime.jsx(DeleteOutlineIcon, { fontSize: "small" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(FieldsGrid, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { onBlur: () => onBlurField("account"), children: /* @__PURE__ */ jsxRuntime.jsx(
+          TextInput,
+          {
+            label: "Account number",
+            placeholder: "Account number",
+            value: value.account,
+            onChange: (next) => onChangeField("account", next),
+            error: accountError,
+            disabled,
+            onlyNumbers: true
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { onBlur: () => onBlurField("routing"), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ConsentRow, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CheckboxInput,
+      {
+        type: "checkbox",
+        checked: consentGiven,
+        onChange: (event) => onChange(event.target.checked),
+        disabled,
+        "data-testid": testId
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(Body100, { style: { margin: 0 }, children: [
+      "By clicking ",
+      actionLabel,
+      ", I agree to the",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: "https://oatfi.com/payment-method-verification-consent",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: "payment method verification"
+        }
+      ),
+      " ",
+      "and acknowledge the",
+      " ",
+      /* @__PURE__ */ jsxRuntime.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;
@@ -1562,9 +2376,9 @@ const SideColumn = styled.div`
   min-width: 0;
 `;
 function PreviewContent() {
-  const [name, setName] = react.useState("Acme Corporation");
-  const [plan, setPlan] = react.useState("growth");
-  const [autopay, setAutopay] = react.useState(true);
+  const [name, setName] = React.useState("Acme Corporation");
+  const [plan, setPlan] = React.useState("growth");
+  const [autopay, setAutopay] = React.useState(true);
   return /* @__PURE__ */ jsxRuntime.jsxs(PreviewCard, { "data-testid": "oatfi-ui-preview", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(MainColumn, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
@@ -1607,7 +2421,12 @@ function Preview({ branding, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { branding, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(PreviewContent, {}) }) });
 }
 
+exports.AchVerificationConsent = AchVerificationConsent;
+exports.AsteriskMark = AsteriskMark;
+exports.AsteriskNote = AsteriskNote;
 exports.AutocompleteInput = AutocompleteInput;
+exports.Badge = Badge;
+exports.Banner = Banner;
 exports.BaseInput = BaseInput;
 exports.Body100 = Body100;
 exports.Body200 = Body200;
@@ -1615,8 +2434,9 @@ exports.Body400 = Body400;
 exports.Button = Button;
 exports.ButtonContainer = ButtonContainer;
 exports.CheckboxInput = CheckboxInput;
+exports.CollapsibleSource = CollapsibleSource;
 exports.Container = Container;
-exports.Content = Content;
+exports.Content = Content$1;
 exports.CurrencyInput = CurrencyInput;
 exports.DateInput = DateInput;
 exports.DetailElement = DetailElement;
@@ -1628,9 +2448,13 @@ exports.DropdownContainer = DropdownContainer;
 exports.DropdownItem = DropdownItem;
 exports.DropdownList = DropdownList;
 exports.EmailInput = EmailInput;
+exports.FieldsGrid = FieldsGrid;
 exports.FileInput = FileInput;
 exports.FlexColumnWrapper = FlexColumnWrapper;
 exports.FlexRowWrapper = FlexRowWrapper;
+exports.FooterActions = FooterActions;
+exports.FooterRight = FooterRight;
+exports.Footnote = Footnote;
 exports.Form = Form;
 exports.FormActions = FormActions;
 exports.FormCheckboxLabel = FormCheckboxLabel;
@@ -1641,12 +2465,20 @@ exports.FormTitle = FormTitle;
 exports.H1 = H1;
 exports.H2 = H2;
 exports.H3 = H3;
+exports.HelperText = HelperText;
 exports.InputError = InputError;
 exports.InputLabel = InputLabel;
 exports.InputWrapper = InputWrapper;
 exports.Loader = Loader;
+exports.ManualMethodCard = ManualMethodCard;
+exports.MethodBody = MethodBody;
+exports.MethodCard = MethodCard;
+exports.MethodHeader = MethodHeader;
+exports.MethodTitle = MethodTitle;
 exports.NoResults = NoResults;
 exports.PhoneInput = PhoneInput;
+exports.PlaidMethodCard = PlaidMethodCard;
+exports.PlaidTile = PlaidTile;
 exports.Preview = Preview;
 exports.RadioInput = RadioInput;
 exports.SSNInput = SSNInput;
@@ -1656,9 +2488,12 @@ exports.StatusTag = StatusTag;
 exports.Stepper = Stepper;
 exports.Tabs = Tabs;
 exports.TaxIdInput = TaxIdInput;
+exports.TermsDocument = TermsDocument;
 exports.TermsList = TermsList;
 exports.TextInput = TextInput;
 exports.ThemeProvider = ThemeProvider;
+exports.UnderwritingStatus = UnderwritingStatus;
+exports.UploadZone = UploadZone;
 exports.buildMuiTheme = buildMuiTheme;
 exports.defaultTheme = defaultTheme;
 exports.mergeBranding = mergeBranding;