@tesouro/embedded-components-react 0.2.175 → 0.2.177

package/dist/index.d.ts

@@ -1976,8 +1976,10 @@ interface GlCodeTableProps {
     /** Optional section heading rendered above the table. Omit when the host
      * already provides its own title. */
     title?: string;
+    /** Applied to the empty state's root element. Supplied by the caller, not decided here. */
+    emptyStateTestId?: string;
 }
-declare function GlCodeTable({ data, isLoading, isError, sorting, onSortingChange, pageSize, onPageSizeChange, pageSizeOptions, hasNextPage, hasPrevPage, onNextPage, onPrevPage, labels, title, onEdit, onDelete, onAddIntegration, onImportCsv, learnMoreHref, }: GlCodeTableProps): React.JSX.Element;
+declare function GlCodeTable({ data, isLoading, isError, sorting, onSortingChange, pageSize, onPageSizeChange, pageSizeOptions, hasNextPage, hasPrevPage, onNextPage, onPrevPage, labels, title, onEdit, onDelete, onAddIntegration, onImportCsv, learnMoreHref, emptyStateTestId, }: GlCodeTableProps): React.JSX.Element;
 
 /**
  * Props that the feature layer owns and wires internally — consumers cannot
@@ -1986,7 +1988,7 @@ declare function GlCodeTable({ data, isLoading, isError, sorting, onSortingChang
  * this `Omit` untouched via the `...tableProps` spread below — no explicit
  * feature-layer wiring needed when a new pass-through UI prop is added there.
  */
-type TableProps = Omit<GlCodeTableProps, 'data' | 'isLoading' | 'isError' | 'sorting' | 'onSortingChange' | 'pageSize' | 'onPageSizeChange' | 'pageSizeOptions' | 'hasNextPage' | 'hasPrevPage' | 'onNextPage' | 'onPrevPage'>;
+type TableProps = Omit<GlCodeTableProps, 'data' | 'isLoading' | 'isError' | 'sorting' | 'onSortingChange' | 'pageSize' | 'onPageSizeChange' | 'pageSizeOptions' | 'hasNextPage' | 'hasPrevPage' | 'onNextPage' | 'onPrevPage' | 'emptyStateTestId'>;
 /**
  * Public props for {@link GLCodeTableWidget}.
  *
@@ -3455,12 +3457,31 @@ declare function WidgetProvider(props: PropsWithChildren<WidgetProviderProps>):
 interface NoPolicyBannerLabels {
     Title: string;
     Body: string;
+    /**
+     * Heading for an org that *has* rules, none of which this editor can show. The
+     * plain `Title` would contradict the notice sitting directly above it, which
+     * has just said how many rules exist.
+     */
+    TitleWithUnlistedRules: string;
+    /** Body for that case. The notice above already explains the why. */
+    BodyWithUnlistedRules: string;
     CreateRule: string;
 }
 
 interface NoPolicyBannerProps {
     onCreateRule: () => void;
     disabled?: boolean;
+    /**
+     * Why Create rule is off, shown on hover and on keyboard focus. Omit it for the
+     * transient reasons that explain themselves on screen (a write in flight).
+     */
+    createRuleDisabledReason?: string;
+    /**
+     * Whether the org has rules that simply are not shown here. Switches the copy
+     * off the "none created yet" claim, which would contradict the notice that
+     * sits above this banner and has just counted them.
+     */
+    hasUnlistedRules?: boolean;
     labels?: Partial<NoPolicyBannerLabels>;
 }
 
@@ -3477,6 +3498,13 @@ interface GapCoverageAlertLabels {
 interface GapRange {
     id: string;
     label: string;
+    /**
+     * Why a new rule cannot take this range, for the link's tooltip. A range can be
+     * uncovered today and still be spoken for — a rule whose schedule has not
+     * started covers nothing yet but claims its range — in which case starting a
+     * rule here only ever ends in a rejected save. Omit for a range that is free.
+     */
+    blockedReason?: string;
 }
 interface GapCoverageAlertProps {
     gaps: GapRange[];

package/dist/lib/GlCodeTableWidget.d.ts

@@ -50,8 +50,10 @@ interface GlCodeTableProps {
     /** Optional section heading rendered above the table. Omit when the host
      * already provides its own title. */
     title?: string;
+    /** Applied to the empty state's root element. Supplied by the caller, not decided here. */
+    emptyStateTestId?: string;
 }
-declare function GlCodeTable({ data, isLoading, isError, sorting, onSortingChange, pageSize, onPageSizeChange, pageSizeOptions, hasNextPage, hasPrevPage, onNextPage, onPrevPage, labels, title, onEdit, onDelete, onAddIntegration, onImportCsv, learnMoreHref, }: GlCodeTableProps): React.JSX.Element;
+declare function GlCodeTable({ data, isLoading, isError, sorting, onSortingChange, pageSize, onPageSizeChange, pageSizeOptions, hasNextPage, hasPrevPage, onNextPage, onPrevPage, labels, title, onEdit, onDelete, onAddIntegration, onImportCsv, learnMoreHref, emptyStateTestId, }: GlCodeTableProps): React.JSX.Element;
 
 type AuthToken = string | undefined;
 interface Auth {
@@ -624,7 +626,7 @@ interface WidgetProviderProps extends WidgetProviderBaseProps {
  * this `Omit` untouched via the `...tableProps` spread below — no explicit
  * feature-layer wiring needed when a new pass-through UI prop is added there.
  */
-type TableProps = Omit<GlCodeTableProps, 'data' | 'isLoading' | 'isError' | 'sorting' | 'onSortingChange' | 'pageSize' | 'onPageSizeChange' | 'pageSizeOptions' | 'hasNextPage' | 'hasPrevPage' | 'onNextPage' | 'onPrevPage'>;
+type TableProps = Omit<GlCodeTableProps, 'data' | 'isLoading' | 'isError' | 'sorting' | 'onSortingChange' | 'pageSize' | 'onPageSizeChange' | 'pageSizeOptions' | 'hasNextPage' | 'hasPrevPage' | 'onNextPage' | 'onPrevPage' | 'emptyStateTestId'>;
 /**
  * Public props for {@link GLCodeTableWidget}.
  *

package/dist/lib/ReceivablesWidget.js

@@ -19,7 +19,7 @@ import "@radix-ui/react-label";
 import "@radix-ui/react-radio-group";
 import "@hookform/resolvers/zod";
 import "zod";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index321.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index326.js";
 import "@radix-ui/react-checkbox";
 import "@radix-ui/react-select";
 import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index90.js";
@@ -31,7 +31,7 @@ import "../libs/tesouro-embedded-components-react/shared/data-access/dist/lib/re
 import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index92.js";
 import "react-dom";
 import "@mui/x-data-grid";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index150.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index151.js";
 import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index83.js";
 import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index55.js";
 import "@mui/material";
@@ -43,7 +43,7 @@ import "@mui/material/Tooltip";
 import "@tanstack/react-table";
 import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index158.js";
 import "@radix-ui/react-avatar";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index250.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index233.js";
 import "@mui/icons-material/AddCircleOutline";
 import "@mui/icons-material/Delete";
 import "@mui/icons-material/Cancel";
@@ -51,15 +51,15 @@ import "@mui/icons-material/HourglassEmpty";
 import "@mui/icons-material/PaidOutlined";
 import "@emotion/react";
 import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index101.js";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index461.js";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index471.js";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index399.js";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index300.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index450.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index451.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index377.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index280.js";
 import "../packages/shared-ui-shadcn/dist/index.js";
 import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index86.js";
 import "@mui/icons-material/DangerousOutlined";
 import "@mui/x-date-pickers";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index293.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index217.js";
 import "@mui/icons-material/CheckCircleOutlineRounded";
 import "@mui/icons-material/HighlightOffRounded";
 import "@mui/icons-material/Add";
@@ -67,17 +67,17 @@ import "@mui/icons-material/DeleteForever";
 import "@mui/icons-material/AttachFile";
 import "@mui/icons-material/CloudUploadOutlined";
 import "@mui/icons-material/MoreVert";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index463.js";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index287.js";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index289.js";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index360.js";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index182.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index475.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index322.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index324.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index371.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index175.js";
 import "@mui/icons-material/Sync";
 import "@mui/icons-material/Search";
 import "@mui/icons-material/CalendarToday";
 import "react-day-picker";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index381.js";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index384.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index412.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index415.js";
 import "@mui/icons-material/BlockOutlined";
 import "@mui/icons-material/CheckOutlined";
 import "@mui/icons-material/ErrorOutlineOutlined";
@@ -86,25 +86,25 @@ import "@mui/icons-material/InsertDriveFileOutlined";
 import "@mui/icons-material/ReplayOutlined";
 import "@mui/icons-material/SendOutlined";
 import "@mui/icons-material/StarHalfOutlined";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index395.js";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index397.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index421.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index423.js";
 import "@radix-ui/react-accordion";
 import "@radix-ui/react-tooltip";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index269.js";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index365.js";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index437.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index253.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index359.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index433.js";
 import "@mui/icons-material/DriveFileRenameOutline";
 import "deep-eql";
 import "react-use";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index171.js";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index307.js";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index308.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index192.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index314.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index315.js";
 import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index56.js";
 import "react-script-hook";
 import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index54.js";
 import "@mui/icons-material/Money";
 import "@mui/icons-material/MonetizationOnOutlined";
-import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index196.js";
+import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index166.js";
 import "@mui/material/styles";
 import "@emotion/cache";
 import "../libs/tesouro-embedded-components-react/monite-sdk/dist/index106.js";

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/feature/dist/index2.js

@@ -20,7 +20,7 @@ import "../../../shared/feature/dist/lib/WidgetProvider/WidgetContext.js";
 import { WidgetProvider as T } from "../../../shared/feature/dist/lib/WidgetProvider/WidgetProvider.js";
 import "../../../shared/feature/dist/lib/WidgetProvider/WidgetTokenRefreshContext.js";
 import { useBankAccountsWidget as B } from "./index4.js";
-function U({
+function w({
   labels: o,
   accountDetailsLabels: r,
   featureLabels: n,
@@ -67,16 +67,23 @@ function U({
       )
     ] });
   const {
-    selectedAccountId: h,
-    onSelectAccount: w,
+    selectedAccountId: C,
+    onSelectAccount: U,
     ...f
   } = e;
   return /* @__PURE__ */ g(p, { children: [
     /* @__PURE__ */ t(b, {}),
-    /* @__PURE__ */ t(S, { labels: o, ...f })
+    /* @__PURE__ */ t(
+      S,
+      {
+        labels: o,
+        accountCardTestId: "bank-accounts-widget-account-card",
+        ...f
+      }
+    )
   ] });
 }
-function Q({
+function O({
   baseUrl: o,
   widgetToken: r,
   organizationId: n,
@@ -103,10 +110,10 @@ function Q({
       errorFallback: s,
       onError: d,
       analytics: m,
-      children: /* @__PURE__ */ t(U, { ...u })
+      children: /* @__PURE__ */ t(w, { ...u })
     }
   );
 }
 export {
-  Q as BankAccountsWidget
+  O as BankAccountsWidget
 };

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/ui/dist/index2.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as l, jsx as a, Fragment as M } from "react/jsx-runtime";
+import { jsxs as l, jsx as a, Fragment as I } from "react/jsx-runtime";
 import "@radix-ui/react-use-controllable-state";
 import "lucide-react";
 import "../../../../../packages/shared-ui-shadcn/dist/index.js";
@@ -7,10 +7,10 @@ import "react";
 import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
 import { InlineErrorAlert as O } from "../../../shared/ui/dist/lib/InlineErrorAlert/InlineErrorAlert.js";
 import "../../../shared/ui/dist/lib/OnboardingShell/OnboardingShellOverlayPortal.js";
-import { AccountCard as j, AddAccountCard as R } from "./index4.js";
-import { BankingHeader as U, AccountCardSkeleton as s } from "./index5.js";
-import { CreateAccountDialog as V } from "./index6.js";
-import { DEFAULT_LABELS as H } from "./index3.js";
+import { AccountCard as j, AddAccountCard as Q } from "./index4.js";
+import { BankingHeader as R, AccountCardSkeleton as o } from "./index5.js";
+import { CreateAccountDialog as U } from "./index6.js";
+import { DEFAULT_LABELS as V } from "./index3.js";
 function Z({
   labels: n,
   "data-testid": m,
@@ -22,48 +22,49 @@ function Z({
   shouldDisplayAvailableBalance: g,
   isBankingTaglineVisible: C,
   accountCards: r,
+  accountCardTestId: A,
   shouldDisplayAddAccountCard: t,
   isLoading: i,
-  isError: A,
-  isCreateOpen: h,
-  createForm: k,
-  legalCopy: f,
-  accessRows: L,
-  isTeamMembersLoading: w,
-  isTeamMembersError: D,
-  isCreateSubmitDisabled: E,
-  isCreateError: S,
+  isError: h,
+  isCreateOpen: k,
+  createForm: f,
+  legalCopy: L,
+  accessRows: w,
+  isTeamMembersLoading: D,
+  isTeamMembersError: E,
+  isCreateSubmitDisabled: S,
+  isCreateError: T,
   hasNicknameError: B,
   isSubmitting: N,
-  isCreateDisabled: T,
-  onCreateOpenChange: y,
-  onCreateFormChange: v,
-  onCreateSubmit: x,
-  onAddAccountClick: F
+  isCreateDisabled: y,
+  onCreateOpenChange: v,
+  onCreateFormChange: x,
+  onCreateSubmit: F,
+  onAddAccountClick: M
 }) {
-  const e = { ...H, ...n };
+  const e = { ...V, ...n };
   return /* @__PURE__ */ l("section", { className: "ttw:w-full", "data-testid": m, children: [
     /* @__PURE__ */ a(
-      V,
+      U,
       {
         labels: e,
-        open: h,
-        form: k,
-        legalCopy: f,
-        accessRows: L,
-        isTeamMembersLoading: w,
-        isTeamMembersError: D,
-        isSubmitDisabled: E,
+        open: k,
+        form: f,
+        legalCopy: L,
+        accessRows: w,
+        isTeamMembersLoading: D,
+        isTeamMembersError: E,
+        isSubmitDisabled: S,
         isSubmitting: N,
-        isError: S,
+        isError: T,
         hasNicknameError: B,
-        onOpenChange: y,
-        onFormChange: v,
-        onSubmit: x
+        onOpenChange: v,
+        onFormChange: x,
+        onSubmit: F
       }
     ),
     /* @__PURE__ */ a(
-      U,
+      R,
       {
         labels: e,
         title: c,
@@ -75,20 +76,28 @@ function Z({
         isBankingTaglineVisible: C
       }
     ),
-    A ? /* @__PURE__ */ a(O, { className: "ttw:mb-4", children: e.errorTitle }) : null,
+    h ? /* @__PURE__ */ a(O, { className: "ttw:mb-4", children: e.errorTitle }) : null,
     /* @__PURE__ */ l("div", { className: "ttw:flex ttw:flex-wrap ttw:gap-6", children: [
-      i ? /* @__PURE__ */ l(M, { children: [
-        /* @__PURE__ */ a(s, {}),
-        /* @__PURE__ */ a(s, {})
+      i ? /* @__PURE__ */ l(I, { children: [
+        /* @__PURE__ */ a(o, {}),
+        /* @__PURE__ */ a(o, {})
       ] }) : null,
       !i && r.length === 0 && !t ? /* @__PURE__ */ a("p", { className: "ttw:font-medium", children: e.emptyAccountsLabel }) : null,
-      i ? null : r.map((o) => /* @__PURE__ */ a(j, { labels: e, card: o }, o.id)),
+      i ? null : r.map((s) => /* @__PURE__ */ a(
+        j,
+        {
+          labels: e,
+          card: s,
+          testId: A
+        },
+        s.id
+      )),
       !i && t ? /* @__PURE__ */ a(
-        R,
+        Q,
         {
           labels: e,
-          disabled: T,
-          onClick: F
+          disabled: y,
+          onClick: M
         }
       ) : null
     ] })

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/ui/dist/index4.js

@@ -1,80 +1,87 @@
 "use client";
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { Button as i } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { EyeOffIcon as l, EyeIcon as w, CheckCircle2Icon as s, CopyIcon as o, PlusIcon as d } from "lucide-react";
+import { EyeOffIcon as l, EyeIcon as w, CheckCircle2Icon as o, CopyIcon as c, PlusIcon as d } from "lucide-react";
 import { formatOpenAccountAriaLabel as u } from "./index3.js";
 const m = "ttw:absolute ttw:inset-0 ttw:z-0 ttw:cursor-pointer ttw:rounded-xl ttw:border-0 ttw:bg-transparent ttw:outline-none focus-visible:ttw:ring-2 focus-visible:ttw:ring-ring focus-visible:ttw:ring-offset-2", n = "ttw:pointer-events-auto ttw:relative ttw:z-10 ttw:size-7 ttw:text-primary";
-function h({ labels: r, card: e }) {
-  return /* @__PURE__ */ a("article", { className: "ttw:relative ttw:flex ttw:h-[214px] ttw:w-80 ttw:cursor-pointer ttw:flex-col ttw:gap-3 ttw:rounded-xl ttw:border ttw:border-border ttw:bg-card ttw:p-4 ttw:transition-[border-color,box-shadow] ttw:duration-200 ttw:hover:border-primary ttw:hover:shadow-md", children: [
-    /* @__PURE__ */ t(
-      "button",
-      {
-        type: "button",
-        className: m,
-        "aria-label": u(e.name, r),
-        onClick: e.onSelect
-      }
-    ),
-    /* @__PURE__ */ a("div", { className: "ttw:pointer-events-none ttw:relative ttw:z-10 ttw:flex ttw:min-h-0 ttw:flex-1 ttw:flex-col ttw:gap-3", children: [
-      /* @__PURE__ */ a("div", { children: [
-        /* @__PURE__ */ t("p", { className: "ttw:truncate ttw:text-base ttw:font-bold ttw:text-foreground", children: e.name }),
-        /* @__PURE__ */ t("p", { className: "ttw:truncate ttw:text-2xl ttw:font-bold ttw:text-primary", children: e.balanceLabel })
-      ] }),
-      /* @__PURE__ */ a("div", { className: "ttw:space-y-1", children: [
-        /* @__PURE__ */ t("p", { className: "ttw:text-xs ttw:text-muted-foreground", children: r.accountNumberLabel }),
-        /* @__PURE__ */ a("div", { className: "ttw:flex ttw:items-center ttw:gap-1", children: [
-          /* @__PURE__ */ t("span", { className: "ttw:text-sm ttw:tracking-widest", children: e.isAccountNumberVisible ? e.accountNumberLabel : e.maskedAccountNumberLabel }),
-          /* @__PURE__ */ t(
-            i,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "icon",
-              className: n,
-              "aria-label": r.toggleAccountNumberVisibility,
-              onClick: e.onToggleAccountNumberVisibility,
-              children: e.isAccountNumberVisible ? /* @__PURE__ */ t(l, { className: "ttw:size-4" }) : /* @__PURE__ */ t(w, { className: "ttw:size-4" })
-            }
-          ),
-          /* @__PURE__ */ t(
-            i,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "icon",
-              className: n,
-              "aria-label": r.copyAccountNumber,
-              onClick: e.onCopyAccountNumber,
-              children: e.isAccountNumberCopied ? /* @__PURE__ */ t(s, { className: "ttw:size-4" }) : /* @__PURE__ */ t(o, { className: "ttw:size-4" })
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ a("div", { className: "ttw:space-y-1", children: [
-        /* @__PURE__ */ t("p", { className: "ttw:text-xs ttw:text-muted-foreground", children: r.routingNumberLabel }),
-        /* @__PURE__ */ a("div", { className: "ttw:flex ttw:items-center ttw:gap-1", children: [
-          /* @__PURE__ */ t("span", { className: "ttw:text-sm", children: e.routingNumberLabel }),
-          /* @__PURE__ */ t(
-            i,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "icon",
-              className: n,
-              "aria-label": r.copyRoutingNumber,
-              onClick: e.onCopyRoutingNumber,
-              children: e.isRoutingNumberCopied ? /* @__PURE__ */ t(s, { className: "ttw:size-4" }) : /* @__PURE__ */ t(o, { className: "ttw:size-4" })
-            }
-          )
+function h({ labels: r, card: e, testId: s }) {
+  return /* @__PURE__ */ a(
+    "article",
+    {
+      "data-testid": s,
+      className: "ttw:relative ttw:flex ttw:h-[214px] ttw:w-80 ttw:cursor-pointer ttw:flex-col ttw:gap-3 ttw:rounded-xl ttw:border ttw:border-border ttw:bg-card ttw:p-4 ttw:transition-[border-color,box-shadow] ttw:duration-200 ttw:hover:border-primary ttw:hover:shadow-md",
+      children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: m,
+            "aria-label": u(e.name, r),
+            onClick: e.onSelect
+          }
+        ),
+        /* @__PURE__ */ a("div", { className: "ttw:pointer-events-none ttw:relative ttw:z-10 ttw:flex ttw:min-h-0 ttw:flex-1 ttw:flex-col ttw:gap-3", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ t("p", { className: "ttw:truncate ttw:text-base ttw:font-bold ttw:text-foreground", children: e.name }),
+            /* @__PURE__ */ t("p", { className: "ttw:truncate ttw:text-2xl ttw:font-bold ttw:text-primary", children: e.balanceLabel })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "ttw:space-y-1", children: [
+            /* @__PURE__ */ t("p", { className: "ttw:text-xs ttw:text-muted-foreground", children: r.accountNumberLabel }),
+            /* @__PURE__ */ a("div", { className: "ttw:flex ttw:items-center ttw:gap-1", children: [
+              /* @__PURE__ */ t("span", { className: "ttw:text-sm ttw:tracking-widest", children: e.isAccountNumberVisible ? e.accountNumberLabel : e.maskedAccountNumberLabel }),
+              /* @__PURE__ */ t(
+                i,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  className: n,
+                  "aria-label": r.toggleAccountNumberVisibility,
+                  onClick: e.onToggleAccountNumberVisibility,
+                  children: e.isAccountNumberVisible ? /* @__PURE__ */ t(l, { className: "ttw:size-4" }) : /* @__PURE__ */ t(w, { className: "ttw:size-4" })
+                }
+              ),
+              /* @__PURE__ */ t(
+                i,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  className: n,
+                  "aria-label": r.copyAccountNumber,
+                  onClick: e.onCopyAccountNumber,
+                  children: e.isAccountNumberCopied ? /* @__PURE__ */ t(o, { className: "ttw:size-4" }) : /* @__PURE__ */ t(c, { className: "ttw:size-4" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "ttw:space-y-1", children: [
+            /* @__PURE__ */ t("p", { className: "ttw:text-xs ttw:text-muted-foreground", children: r.routingNumberLabel }),
+            /* @__PURE__ */ a("div", { className: "ttw:flex ttw:items-center ttw:gap-1", children: [
+              /* @__PURE__ */ t("span", { className: "ttw:text-sm", children: e.routingNumberLabel }),
+              /* @__PURE__ */ t(
+                i,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  className: n,
+                  "aria-label": r.copyRoutingNumber,
+                  onClick: e.onCopyRoutingNumber,
+                  children: e.isRoutingNumberCopied ? /* @__PURE__ */ t(o, { className: "ttw:size-4" }) : /* @__PURE__ */ t(c, { className: "ttw:size-4" })
+                }
+              )
+            ] })
+          ] })
         ] })
-      ] })
-    ] })
-  ] });
+      ]
+    }
+  );
 }
 function f({
   labels: r,
   disabled: e,
-  onClick: c
+  onClick: s
 }) {
   return /* @__PURE__ */ t("div", { className: "ttw:flex ttw:h-[214px] ttw:w-80 ttw:items-center ttw:justify-center ttw:rounded-xl ttw:border ttw:border-dashed ttw:border-primary ttw:bg-card ttw:p-4", children: /* @__PURE__ */ a(
     i,
@@ -83,7 +90,7 @@ function f({
       variant: "outline",
       className: "ttw:rounded-xl ttw:border-primary ttw:text-primary",
       disabled: e,
-      onClick: c,
+      onClick: s,
       children: [
         /* @__PURE__ */ t(d, { className: "ttw:size-4" }),
         r.addAccountButton