@zeniai/web-components 3.16.84 → 3.16.85

package/dist/AccountRow-DkqztgeG.js

@@ -0,0 +1,1012 @@
+import { j as e, b as x, u as I } from "./vendor-.pnpm-DtFedGku.js";
+import { useState as rt } from "react";
+import { css as ct } from "@emotion/react";
+import s from "@emotion/styled";
+import { S as o, J as lt, bd as dt, aq as ut, j, D as h, a as xt, a5 as E, Z as f, aL as ht, bb as pt, p as w, C as m, gm as Z, gn as K, w as mt, G as X, u as gt, B as ft, E as T, ag as yt, gh as jt } from "./index-BrQvJ7aX.js";
+import { S as wt } from "./clock-CJkylEKt.js";
+const Ct = s.div`
+  position: relative;
+  ${(t) => t.showTreeLine === !0 && t.collapsed !== !0 ? `&::after {
+      content: "";
+      position: absolute;
+      top: 25px;
+      left: 12px;
+      border-left: 1px dotted ${t.theme.colors.grey1};
+      height: 12px;
+    ` : ""};
+`, $t = s.div`
+  display: flex;
+  min-width: ${o.sp4};
+  width: ${o.sp4};
+  height: ${o.sp4};
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 12px;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  color: ${(t) => t.colour.toString()};
+`, St = s(ut)`
+  text-align: center;
+  color: ${(t) => t.colour.toString()};
+`, bt = s.div`
+  svg {
+    path {
+      stroke-width: 2;
+    }
+  }
+`, vt = s(dt)`
+  margin-top: 6px;
+  width: 12px;
+  height: 12px;
+`, kt = s(lt)`
+  margin-top: ${o.sp1};
+  margin-left: 2px;
+  width: 12px;
+  height: 12px;
+`;
+function Bt({
+  firstLetter: t,
+  color: n,
+  showIcon: a,
+  showCollapsedIcon: i,
+  showTreeLine: l = !1,
+  className: d
+}) {
+  return /* @__PURE__ */ e.jsx(Ct, { showTreeLine: l, collapsed: i, children: /* @__PURE__ */ e.jsx($t, { colour: n, className: d, children: /* @__PURE__ */ e.jsx(bt, { children: a === !0 ? i === !0 ? /* @__PURE__ */ e.jsx(kt, {}) : /* @__PURE__ */ e.jsx(vt, {}) : /* @__PURE__ */ e.jsx(St, { colour: n, className: d, children: t }) }) }) });
+}
+const Et = s.div`
+  display: flex;
+  flex: 1 1 auto;
+  max-height: 1px;
+  background-color: ${(t) => t.isScrolling ? "transparent" : t.theme.colors.hero};
+`, It = s.div`
+  display: flex;
+  flex: 1 1 auto;
+  height: 1px;
+  width: 100%;
+`, Tt = s.div`
+  flex: 1 1 auto;
+  height: 1px;
+  width: 100%;
+`;
+function Wt({
+  kind: t,
+  isScrolling: n
+}) {
+  switch (t) {
+    case "section_separator":
+      return /* @__PURE__ */ e.jsx(Et, { isScrolling: n });
+    case "account_separator":
+      return /* @__PURE__ */ e.jsx(
+        Pt,
+        {
+          "data-testid": j("account-separator", t)
+        }
+      );
+  }
+}
+const Pt = () => /* @__PURE__ */ e.jsx(It, { children: /* @__PURE__ */ e.jsx(Tt, { className: "part-separator" }) }), u = {
+  timeframeHeight: h[10],
+  leftHeadingWidth: 386,
+  leftTimeframeWidth: 161,
+  leftLabelWidth: 190,
+  bankBalanceWidth: 128,
+  bankBalanceTimeframeWidth: 126,
+  bankBalanceRightWidth: h[4],
+  bankBalanceRightTimeframeWidth: h[4],
+  clearedBalanceWidth: 144,
+  clearedBalanceTimeframeWidth: 142,
+  varianceWidth: 193,
+  varianceTimeframeWidth: 180,
+  varianceNumberWidth: 112,
+  varianceNumberLoadingWidth: 130,
+  variancePercentageWidth: h[10],
+  statusWidth: 144,
+  statusTimeframeWidth: 142,
+  tickLeftMargin: h[4],
+  circleRadius: h[4],
+  spacerLineWidth: h[5],
+  wrapperPadding: h[8]
+};
+function Ne(t) {
+  switch (t) {
+    case "timeframe_headers":
+      return h[12];
+    case "title_string_only":
+      return h[8];
+    case "ac_group_report":
+      return h[8];
+    case "total":
+      return h[8];
+    case "section":
+      return h[0];
+    case "loading_in_progress":
+      return h[8];
+    default:
+      return h[0];
+  }
+}
+function De() {
+  return !0;
+}
+const _t = s.div`
+  display: flex;
+  flex-direction: column;
+  height: ${(t) => t.heightValue}px;
+  justify-content: flex-start;
+  align-items: center;
+  padding-right: ${u.wrapperPadding}px;
+  cursor: pointer;
+  .part-separator {
+    background-color: ${(t) => t.isLastRow ? t.theme.colors.hero : t.isSelectedRow ? t.theme.colors.primary : t.theme.colors.grey3};
+  }
+  .any-text-container {
+    ${(t) => t.isSelectedRow ? ct`
+            color: ${t.theme.colors.primary};
+          ` : null}
+  }
+
+  .bank-icon-container {
+    display: none;
+  }
+
+  &:hover {
+    .part-separator {
+      background-color: ${(t) => t.theme.colors.primary};
+    }
+    .any-text-container {
+      color: ${(t) => t.theme.colors.primary};
+    }
+    .bank-icon-container {
+      display: flex;
+    }
+  }
+`, Lt = s.div`
+  height: ${o.sp8};
+`, Nt = s.div`
+  width: 100%;
+  height: ${(t) => t.heightValue - 1}px;
+  user-select: none;
+  display: flex;
+  flex: 1 1 auto;
+  flex-flow: row;
+  justify-content: flex-start;
+  align-items: center;
+`, Dt = s.div`
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: flex-start;
+  align-items: center;
+  gap: ${o.sp2};
+  margin-left: ${o.sp4};
+`, Rt = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${o.sp1};
+  margin-top: ${o.sp1};
+`, At = s(w)`
+  user-select: none;
+  clear: both;
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: left;
+  color: ${(t) => t.theme.colors.hero};
+  width: ${u.leftLabelWidth}px;
+  min-width: ${u.leftLabelWidth}px;
+`, Vt = s.div`
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  align-items: center;
+  color: ${(t) => t.theme.colors.hero};
+`, Ht = s(w)`
+  width: ${u.bankBalanceWidth}px;
+  min-width: ${u.bankBalanceWidth}px;
+  text-align: right;
+`, Ft = s.div`
+  width: ${u.bankBalanceRightWidth}px;
+  min-width: ${u.bankBalanceRightWidth}px;
+`, Mt = s(w)`
+  width: ${u.clearedBalanceWidth}px;
+  min-width: ${u.clearedBalanceWidth}px;
+  text-align: right;
+`, Ot = s(w)`
+  width: ${u.statusWidth}px;
+  min-width: ${u.statusWidth}px;
+  height: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+`, Ut = s.div`
+  display: flex;
+  flex-direction: row;
+  min-width: ${u.spacerLineWidth}px;
+  width: ${u.spacerLineWidth}px;
+  align-items: center;
+`, Qt = s.div`
+  width: 1px;
+  margin-left: ${o.sp3};
+  height: ${(t) => t.heightValue}px;
+  background-color: ${(t) => t.theme.colors.grey3};
+`, zt = s.div`
+  display: flex;
+  flex-shrink: 0;
+  width: ${u.varianceTimeframeWidth}px;
+  min-width: ${u.varianceTimeframeWidth}px;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  text-align: center;
+  gap: ${o.sp2};
+  margin-left: ${u.tickLeftMargin}px;
+`, qt = s(w)`
+  border-radius: ${o.sp1};
+  color: ${(t) => t.textColor.hex()};
+  min-width: ${u.varianceNumberWidth}px;
+  text-align: right;
+`, Gt = s(w)`
+  border-radius: ${o.sp1};
+  padding: ${o.sp0} ${o.sp1};
+  justify-content: center;
+  text-align: center;
+  color: ${(t) => t.textColor.hex()};
+  background-color: ${(t) => t.bgColor.hex()};
+  min-width: ${u.variancePercentageWidth}px;
+`, Jt = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`, Zt = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`, Kt = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${o.sp1};
+`, Xt = s(T)`
+  color: ${m.success};
+`, G = s(T)`
+  color: ${m.success};
+`, Yt = s(jt)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  color: ${m.success};
+`, v = s(w)`
+  text-align: right;
+`, te = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+`, ee = s(mt)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, ne = s(w)`
+  text-align: right;
+  color: ${m.important};
+  cursor: pointer;
+  text-decoration: underline;
+`, oe = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-start;
+`, se = s.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${o.sp1};
+  align-items: center;
+`, ae = s.div`
+  padding-top: ${o.sp1};
+  &:hover {
+    color: ${(t) => t.theme.colors.primary};
+  }
+`, ie = s(wt)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, A = s(yt)`
+  width: 12px;
+  height: 12px;
+  color: ${(t) => t.iconColor.hex()};
+  margin-top: ${o.sp1};
+`, C = s.div`
+  display: flex;
+  gap: ${o.sp1};
+`, V = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`, J = s(w)`
+  color: ${(t) => t.theme.colors.hero};
+`, H = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${o.sp1};
+`, F = s(T)`
+  color: ${(t) => t.textColor.hex()};
+`, M = s(T)`
+  color: ${(t) => t.textColor.hex()};
+`, O = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`, U = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`, k = s(T)`
+  color: ${(t) => t.textColor.hex()};
+`, re = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`, ce = s(X)`
+  color: ${(t) => t.theme.colors.hero};
+`, le = s(X)`
+  color: ${m.brandColorPearl};
+`, de = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`, ue = s(Z)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  margin-top: 2px;
+`, xe = s(Z)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, he = s(K)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  margin-top: 2px;
+`, pe = s(K)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  margin-top: 2px;
+`, {
+  expenseAutomation: {
+    accountRecon: { reconciliation: r }
+  },
+  common: {
+    strings: { hyphen: p, percentage: me }
+  }
+} = xt.getLocalizedStrings();
+function Re({
+  height: t,
+  accountRecon: n,
+  isLastRow: a,
+  isSelectedRow: i,
+  onReviewClicked: l,
+  onOpenDrawerClicked: d,
+  onConnectClicked: c,
+  onReconnectClicked: g,
+  onStatementAddClicked: S
+}) {
+  const L = gt(), W = I(), b = n.accountReconEntity.account.accountName, y = n.accountReconEntity.balance, N = n.accountReconEntity.clearedBalance, et = n.accountReconEntity.variance, nt = n.accountReconEntity.variancePercentage, ot = () => {
+    c?.(n.accountReconEntity.account.accountId);
+  }, st = () => {
+    g?.(n.accountReconEntity.account.accountId);
+  }, at = () => {
+    S?.(n.accountReconEntity.account.accountId);
+  }, Q = () => {
+    l?.(n.accountReconEntity.account.accountId);
+  }, [it, D] = rt(!1), z = n.accountConnectionStatus === "connected" || n.connectionInProgress === !0 ? "plaid" : n.accountReconEntity.statementStatus?.code === "uploaded" || n.statementParseInProgress === !0 ? "bank_statement" : "plaid", B = z === "plaid" ? n.accountReconEntity.balanceDataStatus?.code === "in_progress" || n.connectionInProgress === !0 : n.accountReconEntity.statementDataStatus?.code === "parsing" || n.statementParseInProgress === !0;
+  let q = t;
+  return a && (q = t + h[8]), /* @__PURE__ */ e.jsxs(
+    _t,
+    {
+      "data-testid": j(
+        "account-recon-row-root-container",
+        n.accountReconEntity.account.accountName
+      ),
+      heightValue: q,
+      isLastRow: a,
+      windowSize: L,
+      isSelectedRow: i,
+      onClick: () => {
+        it !== !0 && d?.(
+          n.accountReconEntity.account.accountId
+        );
+      },
+      children: [
+        /* @__PURE__ */ e.jsxs(
+          Nt,
+          {
+            isClickable: !0,
+            "data-testid": j("total-row-container"),
+            heightValue: t,
+            children: [
+              /* @__PURE__ */ e.jsxs(Dt, { children: [
+                /* @__PURE__ */ e.jsx(
+                  Bt,
+                  {
+                    firstLetter: b.charAt(0),
+                    color: new x(W.colors.hero),
+                    showIcon: !1,
+                    showCollapsedIcon: !1,
+                    className: "any-text-container"
+                  }
+                ),
+                /* @__PURE__ */ e.jsx(Rt, { children: /* @__PURE__ */ e.jsx(
+                  f,
+                  {
+                    enterDelay: 600,
+                    title: b,
+                    style: { padding: `${o.sp1} ${o.sp2}` },
+                    placement: "bottom",
+                    children: /* @__PURE__ */ e.jsx(At, { className: "any-text-container", children: b })
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ e.jsxs(Vt, { children: [
+                /* @__PURE__ */ e.jsx(Ht, { children: /* @__PURE__ */ e.jsx(
+                  we,
+                  {
+                    lastUpdatedAt: n.accountReconEntity.reconciliationId != null ? n.accountReconEntity.reconUpdatedAt : n.accountReconEntity.accountUpdatedAt,
+                    setIsHovering: D,
+                    statementStatus: n.accountReconEntity.statementStatus.code,
+                    accountId: n.accountReconEntity.account.accountId,
+                    bankBalance: y,
+                    bankConnection: n.accountConnectionStatus,
+                    onConnectClicked: ot,
+                    onStatementAddClicked: at,
+                    isLoading: B,
+                    onReconnectClicked: st
+                  }
+                ) }),
+                /* @__PURE__ */ e.jsx(Ft, { children: /* @__PURE__ */ e.jsx(
+                  ke,
+                  {
+                    statementStatus: n.accountReconEntity.statementStatus.code,
+                    statementParseInProgress: n.statementParseInProgress,
+                    connectionInProgress: n.connectionInProgress,
+                    bankStatusCode: n.accountConnectionStatus
+                  }
+                ) }),
+                /* @__PURE__ */ e.jsx(Mt, { children: /* @__PURE__ */ e.jsx(
+                  Ce,
+                  {
+                    clearedBalance: N,
+                    isLoading: B
+                  }
+                ) }),
+                /* @__PURE__ */ e.jsx(
+                  ge,
+                  {
+                    isLoading: B,
+                    variance: et,
+                    variancePercentage: nt,
+                    reconciliationStatusCode: n.accountReconEntity.reconciliationStatus?.code
+                  }
+                ),
+                /* @__PURE__ */ e.jsx(Ut, { children: /* @__PURE__ */ e.jsx(Qt, { heightValue: t }) }),
+                /* @__PURE__ */ e.jsx(
+                  Ot,
+                  {
+                    onMouseEnter: () => {
+                      D(!0);
+                    },
+                    onMouseLeave: () => {
+                      D(!1);
+                    },
+                    children: z === "plaid" ? /* @__PURE__ */ e.jsx(
+                      ye,
+                      {
+                        accountRecon: n,
+                        isLoading: B,
+                        onReviewClicked: Q
+                      }
+                    ) : /* @__PURE__ */ e.jsx(
+                      je,
+                      {
+                        accountRecon: n,
+                        isLoading: B,
+                        onReviewClicked: Q
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsx(Wt, { kind: "account_separator", isScrolling: !1 }),
+        a ? /* @__PURE__ */ e.jsx(Lt, {}) : null
+      ]
+    }
+  );
+}
+const ge = ({
+  variance: t,
+  variancePercentage: n,
+  reconciliationStatusCode: a,
+  isLoading: i
+}) => {
+  const l = I(), {
+    varianceColor: d,
+    variancePercentageColor: c,
+    variancePercentageContainerColor: g
+  } = fe(l, t, a), S = i ? p : t != null && t.amount === 0 ? "0%" : n != null ? n === 0 ? "0%" : `${n.toFixed(2)}${me}` : p;
+  return /* @__PURE__ */ e.jsxs(zt, { children: [
+    /* @__PURE__ */ e.jsx(qt, { textColor: d, className: "any-text-container", children: t == null || i ? p : E("0,0", t) }),
+    /* @__PURE__ */ e.jsx(
+      Gt,
+      {
+        textColor: c,
+        bgColor: g,
+        className: "any-text-container",
+        children: S
+      }
+    )
+  ] });
+}, fe = (t, n, a, i) => {
+  let l, d, c;
+  return n != null && n.amount === 0 && a != null && a === "reconciled" ? (l = new x(m.success), d = new x(m.success), c = new x(m.successLight)) : i === !0 ? (l = new x(t.colors.primary), d = new x(t.colors.primary), c = new x(t.colors.grey2)) : (l = new x(t.colors.hero), d = new x(t.colors.hero), c = new x(t.colors.background)), {
+    varianceColor: l,
+    variancePercentageColor: d,
+    variancePercentageContainerColor: c
+  };
+}, ye = ({
+  accountRecon: t,
+  isLoading: n,
+  onReviewClicked: a
+}) => {
+  const i = t.accountReconEntity.reconciliationStatus, l = t.accountConnectionStatus, d = t.accountReconEntity.reconciliationId != null ? t.accountReconEntity.reconUpdatedAt : t.accountReconEntity.accountUpdatedAt, c = d != null ? `${d.utc(!0).fromNow().toLowerCase()}` : p;
+  if (n)
+    return /* @__PURE__ */ e.jsx(Se, {});
+  if (t.accountReconEntity.balanceDataStatus?.code === "not_found") {
+    let g = "";
+    return t.accountReconEntity.balance == null && t.accountReconEntity.clearedBalance == null ? g = r.status.balanceNotFound : t.accountReconEntity.balance == null ? g = r.status.bankBalanceNotFound : g = r.status.clearedBalanceNotFound, /* @__PURE__ */ e.jsx($e, { status: g, tooltipText: c });
+  }
+  if (l === "reconnect" || l === "not_connected")
+    return /* @__PURE__ */ e.jsx(
+      R,
+      {
+        tooltipText: c,
+        showTooltip: d != null
+      }
+    );
+  if (i == null && l === "connected" && t.accountReconEntity.balance != null && t.accountReconEntity.clearedBalance != null)
+    return /* @__PURE__ */ e.jsx(
+      P,
+      {
+        buttonLabel: r.status.review,
+        isDisabled: !1,
+        dataTestId: j(
+          "status-button",
+          t.accountReconEntity.account.accountId
+        ),
+        tooltipText: c,
+        onClick: a
+      }
+    );
+  if (i != null)
+    switch (i.code) {
+      case "save_for_later":
+      case "pending":
+        return /* @__PURE__ */ e.jsx(
+          P,
+          {
+            buttonLabel: r.status.review,
+            isDisabled: !1,
+            dataTestId: j(
+              "status-button",
+              t.accountReconEntity.account.accountId
+            ),
+            tooltipText: c,
+            onClick: a
+          }
+        );
+      case "reconciled":
+        return /* @__PURE__ */ e.jsx(
+          _,
+          {
+            isQBO: !1,
+            user: t.accountReconEntity.user,
+            tooltipText: c
+          }
+        );
+      case "in_progress":
+        return /* @__PURE__ */ e.jsx(tt, { tooltipText: c });
+      case "failed":
+        return /* @__PURE__ */ e.jsx(Y, { tooltipText: c });
+      case "reconciled_on_qbo":
+        return /* @__PURE__ */ e.jsx(_, { isQBO: !0, tooltipText: c });
+      default:
+        return null;
+    }
+  else
+    return /* @__PURE__ */ e.jsx(
+      R,
+      {
+        showTooltip: d != null,
+        tooltipText: c
+      }
+    );
+}, je = ({
+  accountRecon: t,
+  isLoading: n,
+  onReviewClicked: a
+}) => {
+  const i = t.accountReconEntity.reconciliationStatus, l = t.accountReconEntity.statementDataStatus?.code === "validated" || t.accountReconEntity.statementDataStatus?.code === "processed", d = t.accountReconEntity.reconUpdatedAt, c = d != null ? `${d.utc(!0).fromNow().toLowerCase()}` : p;
+  if (t.accountReconEntity.statementDataStatus?.code === "parsing_failed" || t.accountReconEntity.statementDataStatus?.code === "validation_failed" || t.accountReconEntity.statementDataStatus?.code === "processing_failed")
+    return /* @__PURE__ */ e.jsx(
+      ve,
+      {
+        code: t.accountReconEntity.statementDataStatus?.code,
+        tooltipText: c,
+        errorMessage: t.accountReconEntity.errorMessage?.errorShort
+      }
+    );
+  if (n)
+    return /* @__PURE__ */ e.jsx(be, {});
+  if (i == null && l && t.accountReconEntity.balance != null && t.accountReconEntity.clearedBalance != null)
+    return /* @__PURE__ */ e.jsx(
+      P,
+      {
+        buttonLabel: r.status.review,
+        isDisabled: !1,
+        dataTestId: j(
+          "status-button",
+          t.accountReconEntity.account.accountId
+        ),
+        tooltipText: c,
+        onClick: a
+      }
+    );
+  if (i != null)
+    switch (i.code) {
+      case "save_for_later":
+      case "pending":
+        return /* @__PURE__ */ e.jsx(
+          P,
+          {
+            buttonLabel: r.status.review,
+            isDisabled: !1,
+            dataTestId: j(
+              "status-button",
+              t.accountReconEntity.account.accountId
+            ),
+            tooltipText: c,
+            onClick: a
+          }
+        );
+      case "reconciled":
+        return /* @__PURE__ */ e.jsx(
+          _,
+          {
+            isQBO: !1,
+            user: t.accountReconEntity.user,
+            tooltipText: c
+          }
+        );
+      case "reconciled_on_qbo":
+        return /* @__PURE__ */ e.jsx(_, { isQBO: !0, tooltipText: c });
+      case "in_progress":
+        return /* @__PURE__ */ e.jsx(tt, { tooltipText: c });
+      case "failed":
+        return /* @__PURE__ */ e.jsx(Y, { tooltipText: c });
+      default:
+        return null;
+    }
+  else
+    return /* @__PURE__ */ e.jsx(
+      R,
+      {
+        showTooltip: d != null,
+        tooltipText: c
+      }
+    );
+}, P = ({
+  buttonLabel: t,
+  isDisabled: n,
+  tooltipText: a,
+  dataTestId: i,
+  onClick: l
+}) => /* @__PURE__ */ e.jsx(
+  f,
+  {
+    title: /* @__PURE__ */ e.jsx($, { tooltipText: a }),
+    style: { padding: `${o.sp1} ${o.sp2}` },
+    maxWidth: "105px",
+    placement: "bottom",
+    children: /* @__PURE__ */ e.jsx(Jt, { children: /* @__PURE__ */ e.jsx(
+      ft,
+      {
+        label: t,
+        size: "standard",
+        variant: "secondary",
+        style: { padding: `${o.sp1} 12px` },
+        disabled: n,
+        "data-testid": i,
+        onClick: (d) => {
+          d.stopPropagation(), l();
+        }
+      }
+    ) })
+  }
+), _ = ({
+  user: t,
+  isQBO: n,
+  tooltipText: a
+}) => /* @__PURE__ */ e.jsx(
+  f,
+  {
+    title: /* @__PURE__ */ e.jsx($, { tooltipText: a }),
+    style: { padding: `${o.sp1} ${o.sp2}` },
+    maxWidth: "105px",
+    placement: "bottom",
+    children: /* @__PURE__ */ e.jsxs(Zt, { children: [
+      /* @__PURE__ */ e.jsxs(Kt, { children: [
+        /* @__PURE__ */ e.jsx(Yt, {}),
+        /* @__PURE__ */ e.jsx(Xt, { children: n ? r.status.reconciledVia : r.status.reconciledBy })
+      ] }),
+      n ? /* @__PURE__ */ e.jsx(G, { children: r.status.QBOUser }) : t && /* @__PURE__ */ e.jsxs(G, { children: [
+        t.firstName,
+        " ",
+        t.lastName
+      ] })
+    ] })
+  }
+), we = ({
+  bankBalance: t,
+  bankConnection: n,
+  statementStatus: a,
+  lastUpdatedAt: i,
+  fromDrawer: l = !1,
+  onConnectClicked: d,
+  onReconnectClicked: c,
+  isLoading: g,
+  accountId: S,
+  onStatementAddClicked: L,
+  setIsHovering: W
+}) => {
+  const b = Be();
+  if (l === !0)
+    return /* @__PURE__ */ e.jsx(v, { className: "any-text-container", children: E("0,0", t) ?? p });
+  if (g === !0)
+    return /* @__PURE__ */ e.jsx(v, { className: "any-text-container", children: p });
+  if (n === "reconnect") {
+    const y = i != null ? `${i.utc(!0).fromNow()}` : p;
+    return /* @__PURE__ */ e.jsxs(oe, { children: [
+      /* @__PURE__ */ e.jsxs(se, { children: [
+        /* @__PURE__ */ e.jsx(ae, { children: /* @__PURE__ */ e.jsx(
+          f,
+          {
+            title: /* @__PURE__ */ e.jsx($, { tooltipText: y }),
+            placement: "bottom",
+            style: { padding: `2px ${o.sp2}` },
+            children: /* @__PURE__ */ e.jsx(ie, {})
+          }
+        ) }),
+        /* @__PURE__ */ e.jsx(v, { className: "any-text-container", children: t != null ? E("0,0", t) : p })
+      ] }),
+      /* @__PURE__ */ e.jsx(
+        ne,
+        {
+          "data-testid": j(
+            "account-reconciliation-reconnect-button",
+            S
+          ),
+          onClick: (N) => {
+            N.stopPropagation(), c?.();
+          },
+          children: r.connect.reconnnect
+        }
+      )
+    ] });
+  } else return n === "connected" || a === "uploaded" ? /* @__PURE__ */ e.jsx(v, { className: "any-text-container", children: E("0,0", t) ?? p }) : /* @__PURE__ */ e.jsx(
+    te,
+    {
+      "data-testid": j(
+        "account-reconciliation-connect-button",
+        S
+      ),
+      onMouseEnter: () => {
+        W(!0);
+      },
+      onMouseLeave: () => {
+        W(!1);
+      },
+      children: /* @__PURE__ */ e.jsx(ht, { controller: b.length > 0, children: /* @__PURE__ */ e.jsx(
+        f,
+        {
+          title: r.tooltips.selectSource,
+          style: { padding: `${o.sp1} ${o.sp2}` },
+          maxWidth: "105px",
+          placement: "bottom",
+          children: /* @__PURE__ */ e.jsx(
+            pt,
+            {
+              moreIconType: "custom",
+              customIcon: /* @__PURE__ */ e.jsx(ee, {}),
+              options: b,
+              customStyleConfig: {
+                option: () => ({
+                  ".option-container": {
+                    justifyContent: "flex-start"
+                  }
+                }),
+                valueContainer: () => ({
+                  height: o.sp3,
+                  ".more-icon": {
+                    width: o.sp3,
+                    height: o.sp3
+                  }
+                })
+              },
+              menuPlacement: "auto",
+              onOptionSelection: (y) => {
+                y === "bank_connection" ? d?.() : y === "statement" && L?.();
+              },
+              valueToIcon: (y) => y === "bank_connection" ? /* @__PURE__ */ e.jsx(ue, {}) : y === "statement" ? /* @__PURE__ */ e.jsx(he, {}) : null
+            }
+          )
+        }
+      ) })
+    }
+  );
+}, Ce = ({
+  clearedBalance: t,
+  isLoading: n
+}) => t != null && n === !1 ? /* @__PURE__ */ e.jsx(v, { className: "any-text-container", children: E("0,0", t) ?? p }) : /* @__PURE__ */ e.jsx(v, { className: "any-text-container", children: p }), Y = ({ tooltipText: t }) => {
+  const n = new x(m.important);
+  return /* @__PURE__ */ e.jsx(
+    f,
+    {
+      title: /* @__PURE__ */ e.jsx($, { tooltipText: t }),
+      style: { padding: `${o.sp1} ${o.sp2}` },
+      maxWidth: "105px",
+      placement: "bottom",
+      children: /* @__PURE__ */ e.jsx(C, { children: /* @__PURE__ */ e.jsxs(V, { children: [
+        /* @__PURE__ */ e.jsx(A, { iconColor: n }),
+        /* @__PURE__ */ e.jsx(H, { children: /* @__PURE__ */ e.jsx(F, { textColor: n, children: r.status.reconciliationFailed }) }),
+        /* @__PURE__ */ e.jsx(O, { children: /* @__PURE__ */ e.jsx(M, { textColor: n, children: r.status.reconcileViaQBO }) })
+      ] }) })
+    }
+  );
+}, $e = ({
+  status: t,
+  tooltipText: n
+}) => {
+  const a = new x(m.brandColorGoldDark);
+  return /* @__PURE__ */ e.jsx(
+    f,
+    {
+      title: /* @__PURE__ */ e.jsx($, { tooltipText: n }),
+      style: { padding: `${o.sp1} ${o.sp2}` },
+      maxWidth: "105px",
+      placement: "bottom",
+      children: /* @__PURE__ */ e.jsxs(C, { children: [
+        /* @__PURE__ */ e.jsx(A, { iconColor: a }),
+        /* @__PURE__ */ e.jsxs(V, { children: [
+          /* @__PURE__ */ e.jsx(H, { children: /* @__PURE__ */ e.jsx(F, { textColor: a, children: t }) }),
+          /* @__PURE__ */ e.jsx(O, { children: /* @__PURE__ */ e.jsx(M, { textColor: a, children: r.status.reconcileViaQBO }) })
+        ] })
+      ] })
+    }
+  );
+}, tt = ({ tooltipText: t }) => {
+  const n = I(), a = new x(n.colors.grey1);
+  return /* @__PURE__ */ e.jsx(
+    f,
+    {
+      title: /* @__PURE__ */ e.jsx($, { tooltipText: t }),
+      style: { padding: `${o.sp1} ${o.sp2}` },
+      maxWidth: "105px",
+      placement: "bottom",
+      children: /* @__PURE__ */ e.jsx(C, { children: /* @__PURE__ */ e.jsxs(U, { children: [
+        /* @__PURE__ */ e.jsx(k, { textColor: a, children: r.status.autoReconInProgress }),
+        /* @__PURE__ */ e.jsx(k, { textColor: a, children: r.status.isInProgress })
+      ] }) })
+    }
+  );
+}, Se = () => {
+  const t = I(), n = new x(t.colors.grey1);
+  return /* @__PURE__ */ e.jsx(C, { children: /* @__PURE__ */ e.jsxs(U, { children: [
+    /* @__PURE__ */ e.jsx(k, { textColor: n, children: r.status.balanceSyncInProgress }),
+    /* @__PURE__ */ e.jsx(k, { textColor: n, children: r.status.isInProgress })
+  ] }) });
+}, be = () => {
+  const t = I(), n = new x(t.colors.grey1);
+  return /* @__PURE__ */ e.jsx(C, { children: /* @__PURE__ */ e.jsxs(U, { children: [
+    /* @__PURE__ */ e.jsx(k, { textColor: n, children: r.status.statementSyncInProgress }),
+    /* @__PURE__ */ e.jsx(k, { textColor: n, children: r.status.isInProgress })
+  ] }) });
+}, ve = ({
+  code: t,
+  tooltipText: n,
+  errorMessage: a
+}) => {
+  const i = new x(m.important), l = Ee(t, "list", a);
+  return /* @__PURE__ */ e.jsx(
+    f,
+    {
+      title: /* @__PURE__ */ e.jsx($, { tooltipText: n }),
+      style: { padding: `${o.sp1} ${o.sp2}` },
+      maxWidth: "105px",
+      placement: "bottom",
+      children: /* @__PURE__ */ e.jsxs(C, { children: [
+        /* @__PURE__ */ e.jsx(A, { iconColor: i }),
+        /* @__PURE__ */ e.jsxs(V, { children: [
+          /* @__PURE__ */ e.jsx(H, { children: /* @__PURE__ */ e.jsx(F, { textColor: i, children: l }) }),
+          /* @__PURE__ */ e.jsx(O, { children: /* @__PURE__ */ e.jsx(M, { textColor: i, children: r.status.failed }) })
+        ] })
+      ] })
+    }
+  );
+}, R = ({
+  showTooltip: t,
+  tooltipText: n
+}) => t == !1 ? /* @__PURE__ */ e.jsx(C, { children: /* @__PURE__ */ e.jsx(J, { children: p }) }) : /* @__PURE__ */ e.jsx(
+  f,
+  {
+    title: /* @__PURE__ */ e.jsx($, { tooltipText: n }),
+    style: { padding: `${o.sp1} ${o.sp2}` },
+    maxWidth: "105px",
+    placement: "bottom",
+    children: /* @__PURE__ */ e.jsx(C, { children: /* @__PURE__ */ e.jsx(J, { children: p }) })
+  }
+), $ = ({ tooltipText: t }) => /* @__PURE__ */ e.jsxs(re, { children: [
+  /* @__PURE__ */ e.jsx(ce, { children: r.tooltips.lastUpdated }),
+  /* @__PURE__ */ e.jsx(le, { children: t })
+] }), ke = ({
+  statementStatus: t,
+  statementParseInProgress: n,
+  bankStatusCode: a,
+  connectionInProgress: i
+}) => {
+  let l = t === "uploaded" || n === !0 ? /* @__PURE__ */ e.jsx(pe, {}) : null;
+  return l = a === "connected" || a === "reconnect" || i === !0 ? /* @__PURE__ */ e.jsx(xe, {}) : l, /* @__PURE__ */ e.jsx(de, { className: "bank-icon-container", children: l });
+};
+function Be() {
+  const t = [];
+  return t.push({
+    label: r.menu.bankConnection,
+    value: "bank_connection"
+  }), t.push({
+    label: r.menu.statement,
+    value: "statement"
+  }), t;
+}
+const Ee = (t, n, a) => {
+  if (a != null && n === "drawer")
+    return a;
+  let i = "";
+  switch (t) {
+    case "parsing_failed":
+      i = r.status.statementParseError;
+      break;
+    case "validation_failed":
+      i = r.status.statementValidationFailed;
+      break;
+    case "processing_failed":
+      i = r.status.statementProcessingFailed;
+      break;
+    default:
+      i = r.status.statementParseError;
+      break;
+  }
+  return n === "drawer" && (i = i + " " + r.status.failed), i;
+};
+export {
+  Re as A,
+  Bt as C,
+  we as S,
+  Ee as a,
+  Ce as b,
+  u as c,
+  fe as d,
+  Ne as g,
+  De as i
+};