@oatfi/ui 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -678,14 +678,17 @@ declare function UnderwritingStatus({ status, creditLimit, children, testId, }:
  * a trailing action.
  *
  * `$default` marks the selected method (accent border and tint); `$readonly` marks
- * one the borrower cannot edit here, such as an account managed through Plaid.
+ * one the borrower cannot edit here, such as an account managed through Plaid;
+ * `$edited` marks one carrying changes that have not been saved yet.
  */
-declare const MethodCard: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$default" | "$readonly"> & {
+declare const MethodCard: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$default" | "$readonly" | "$edited"> & {
     $default?: boolean;
     $readonly?: boolean;
-}, never> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$default" | "$readonly"> & {
+    $edited?: boolean;
+}, never> & Partial<Pick<styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$default" | "$readonly" | "$edited"> & {
     $default?: boolean;
     $readonly?: boolean;
+    $edited?: boolean;
 }, never>>> & string;
 declare const MethodBody: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 /** `$tight` for a card with no form fields under the header. */
@@ -699,6 +702,15 @@ declare const MethodTitle: styled_components_dist_types.IStyledComponentBase<"we
 declare const FieldsGrid: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 /** Accent-tinted note with a leading icon slot. */
 declare const Banner: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+/**
+ * Footer row for a step's actions.
+ *
+ * `space-between` is for the two-part footer a stepped flow has — Back on the
+ * left, status and the primary action on the right. A servicing screen that saves
+ * in place has no Back, and space-between then drops its lone action on the left,
+ * where it reads as the secondary half of a pair that isn't there. So a single
+ * child is pushed to the right instead; two or more keep the split.
+ */
 declare const FooterActions: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 declare const FooterRight: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 
@@ -733,11 +745,30 @@ interface ManualMethodValue {
     account: string;
     routing: string;
 }
+/**
+ * Where the row stands against what is stored.
+ *
+ * `saved` — on file and unchanged. `edited` — on file, with changes not yet
+ * written. A row the borrower has just added is neither: omit the prop.
+ *
+ * Only `edited` is marked. `saved` deliberately renders the same as a new row for
+ * now — the card stays quiet until the borrower actually changes something — but
+ * it remains a distinct value because the caller already tells the two apart, and
+ * marking a stored row is a change of copy here rather than a change of API.
+ *
+ * The caller owns the comparison, because only it knows what was loaded.
+ */
+type ManualMethodStatus = 'saved' | 'edited';
 interface ManualMethodCardProps {
     /** Zero-based; rendered as "Account {index + 1}". */
     index: number;
     value: ManualMethodValue;
     isDefault?: boolean;
+    /**
+     * Whether this account is already stored, and whether it has been changed
+     * since. Omit for a row the borrower has just added. Only `edited` is marked.
+     */
+    status?: ManualMethodStatus;
     /** Disables removal when this is the last remaining method. */
     trashDisabled?: boolean;
     disabled?: boolean;
@@ -755,8 +786,12 @@ interface ManualMethodCardProps {
  * Validation is the caller's: pass `accountError`/`routingError` and use
  * `onBlurField` to decide when to surface them. Onboarding shows errors on blur
  * and never while typing, which is worth keeping.
+ *
+ * A stored account is an ordinary editable field here — nothing about the inputs
+ * says the borrower is overwriting something real. `status` is what says it, and
+ * it is worth passing wherever saved accounts are rendered.
  */
-declare function ManualMethodCard({ index, value, isDefault, trashDisabled, disabled, accountError, routingError, onSelectDefault, onChangeField, onBlurField, onRemove, name, }: ManualMethodCardProps): react__default.JSX.Element;
+declare function ManualMethodCard({ index, value, isDefault, status, trashDisabled, disabled, accountError, routingError, onSelectDefault, onChangeField, onBlurField, onRemove, name, }: ManualMethodCardProps): react__default.JSX.Element;
 
 interface AchVerificationConsentProps {
     consentGiven?: boolean;
@@ -790,4 +825,4 @@ interface PreviewProps {
 declare function Preview({ branding, className }: PreviewProps): react__default.JSX.Element;
 
 export { AchVerificationConsent, AsteriskMark, AsteriskNote, AutocompleteInput, Badge, Banner, BaseInput, Body100, Body200, Body400, Button, ButtonContainer, CheckboxInput, CollapsibleSource, Container, 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 };
-export type { AchVerificationConsentProps, BadgeVariant, Branding, CollapsibleSourceProps, CurrencyInputProps, DateInputProps, DotsMenuOption, DotsMenuProps, DropDownProps, EmailInputProps, FileInputProps, FootnoteLink, FootnoteProps, LoaderProps, ManualMethodCardProps, ManualMethodValue, Option, PhoneInputProps, PlaidConnection, PlaidMethodCardProps, PlaidTileProps, PreviewProps, SSNInputProps, SearchDropdownProps, StepperProps, StepperStep, Tab, TabsProps, TaxIdInputProps, TermsDocumentProps, TextInputProps, Theme, ThemeBorder, ThemeColors, ThemeProviderProps, ThemeTypography, UnderwritingDecision, UnderwritingStatusProps, UploadZoneProps, UploadedFile };
+export type { AchVerificationConsentProps, BadgeVariant, Branding, CollapsibleSourceProps, CurrencyInputProps, DateInputProps, DotsMenuOption, DotsMenuProps, DropDownProps, EmailInputProps, FileInputProps, FootnoteLink, FootnoteProps, LoaderProps, ManualMethodCardProps, ManualMethodStatus, ManualMethodValue, Option, PhoneInputProps, PlaidConnection, PlaidMethodCardProps, PlaidTileProps, PreviewProps, SSNInputProps, SearchDropdownProps, StepperProps, StepperStep, Tab, TabsProps, TaxIdInputProps, TermsDocumentProps, TextInputProps, Theme, ThemeBorder, ThemeColors, ThemeProviderProps, ThemeTypography, UnderwritingDecision, UnderwritingStatusProps, UploadZoneProps, UploadedFile };

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 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';
@@ -2100,6 +2100,17 @@ const MethodCard = styled.div`
   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;
@@ -2164,6 +2175,10 @@ const FooterActions = styled.div`
   button {
     margin-top: 0;
   }
+
+  > :only-child {
+    margin-left: auto;
+  }
 `;
 const FooterRight = styled.div`
   display: flex;
@@ -2214,6 +2229,7 @@ function ManualMethodCard({
   index,
   value,
   isDefault = false,
+  status,
   trashDisabled = false,
   disabled = false,
   accountError,
@@ -2225,7 +2241,7 @@ function ManualMethodCard({
   name = "default-method"
 }) {
   const radioId = `default-${value.id}`;
-  return /* @__PURE__ */ jsxs(MethodCard, { $default: isDefault, children: [
+  return /* @__PURE__ */ jsxs(MethodCard, { $default: isDefault, $edited: status === "edited", children: [
     /* @__PURE__ */ jsx(
       RadioInput,
       {
@@ -2244,7 +2260,8 @@ function ManualMethodCard({
             "Account ",
             index + 1
           ] }),
-          isDefault && /* @__PURE__ */ jsx(Badge, { $variant: "filled", children: "Default" })
+          isDefault && /* @__PURE__ */ jsx(Badge, { $variant: "filled", children: "Default" }),
+          status === "edited" && /* @__PURE__ */ jsx(Badge, { $variant: "info", children: "Unsaved" })
         ] }),
         /* @__PURE__ */ jsx(
           IconButton$1,