@zeniai/web-components 3.16.86 → 3.16.87

package/dist/AccountReconDetailsDrawerPage-aYf6TvuI.js

@@ -1,687 +0,0 @@
-import { g as ge, j as t, F as ye, u as je } from "./vendor-.pnpm-D5gxGIYo.js";
-import { useState as g, useCallback as A, useRef as Se, useEffect as S } from "react";
-import o from "@emotion/styled";
-import { usePlaidLink as Ce } from "react-plaid-link";
-import { zeniDate as Z, toReconciliationAccountSource as $e, uploadAccountStatementIntoDocumentAI as we } from "@zeniai/client-epic-state";
-import { aP as ke, a as ve, aQ as be, aR as De, S as a, J as Pe, k as ee, E as te, b as Te, aL as Ee, b9 as Ie, fS as Be, l1 as G, d$ as ne, o as c, a2 as Ae, eP as oe, gn as ae, ax as _e, C as se, bc as Le } from "./index-CHni923I.js";
-import { a as Fe, S as Me, b as Ve, d as Oe } from "./AccountRow-xHV9Yzsk.js";
-const h = {
-  containerPaddingLeft: a.sp4,
-  containerPaddingRight: a.sp4,
-  navBarHeight: a.sp10,
-  navBarPaddingRight: a.sp4,
-  navBarPaddingLeft: a.sp4,
-  balanceContainerWidth: 114,
-  sourceContainerWidth: 400
-}, Ue = o.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey4};
-  overflow-x: hidden;
-  width: 100%;
-  height: 100vh;
-  position: relative;
-  gap: ${a.sp5};
-`, Re = o.div`
-  display: flex;
-  flex: 0 0 auto;
-  width: ${a.sp4};
-`, Ne = o.div`
-  min-height: ${h.navBarHeight};
-  position: sticky;
-  background-color: ${(e) => e.theme.colors.grey4};
-  border-bottom: 1px solid transparent;
-  z-index: 2;
-  top: ${a.sp0};
-  width: 100%;
-`, We = o(Te)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${a.sp4};
-  height: ${a.sp4};
-  min-height: ${a.sp3};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-  flex: 0 0 auto;
-`, Ye = o.div`
-  padding-left: ${h.containerPaddingLeft};
-  padding-right: ${h.containerPaddingRight};
-`, ze = o.div`
-  position: relative;
-  min-height: 62px;
-`, He = o.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding-right: ${h.navBarPaddingRight};
-  padding-left: ${h.navBarPaddingLeft};
-  height: 100%;
-`, qe = o(Pe)`
-  display: flex;
-  flex: 1 1 0;
-  justify-content: center;
-  flex-direction: column;
-`, Je = o(ee)`
-  display: flex;
-  color: ${(e) => e.theme.colors.primary};
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-`, re = o(te)`
-  display: flex;
-  color: ${(e) => e.theme.colors.hero};
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-`, Qe = o.div`
-  display: flex;
-  flex: 0 0 auto;
-  justify-content: center;
-  align-items: center;
-`, Ge = o.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: ${a.sp5};
-`, Ke = o.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: ${a.sp2};
-  padding: ${a.sp3};
-  background-color: ${(e) => e.theme.colors.background};
-  border-radius: ${a.sp2};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-`, Xe = o.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  min-width: ${h.balanceContainerWidth}px;
-`, Y = o(te)`
-  display: flex;
-  color: ${(e) => e.theme.colors.hero};
-  align-items: center;
-  justify-content: flex-end;
-`, Ze = o(c)`
-  color: ${(e) => e.theme.colors.primary};
-  text-align: left;
-`, et = o.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  min-width: ${h.balanceContainerWidth}px;
-`, tt = o(c)`
-  display: flex;
-  color: ${(e) => e.theme.colors.primary};
-  align-items: center;
-  justify-content: flex-start;
-`, nt = o.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: ${a.sp1};
-`, ot = o.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  min-width: ${h.balanceContainerWidth}px;
-`, at = o(c)`
-  display: flex;
-  color: ${(e) => e.theme.colors.grey3};
-  align-items: center;
-  justify-content: flex-start;
-`, st = o(c)`
-  height: ${a.sp4};
-  border-radius: ${a.sp1};
-  color: ${(e) => e.textColor.hex()};
-  text-align: right;
-`, rt = o(c)`
-  border-radius: ${a.sp1};
-  padding: ${a.sp0} ${a.sp1};
-  justify-content: center;
-  text-align: center;
-  color: ${(e) => e.textColor.hex()};
-  background-color: ${(e) => e.bgColor.hex()};
-`, it = o.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  gap: ${a.sp1};
-`, ct = o(c)`
-  display: flex;
-  color: ${(e) => e.theme.colors.primary};
-  align-items: center;
-  justify-content: flex-end;
-`, lt = o(_e)`
-  margin-left: 2px;
-  width: 12px;
-  height: 12px;
-  color: ${(e) => e.theme.colors.primary};
-`, dt = o.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  min-width: ${h.sourceContainerWidth}px;
-  gap: ${a.sp2};
-`, ut = o(ee)`
-  display: flex;
-  color: ${(e) => e.theme.colors.primary};
-  align-items: center;
-  justify-content: flex-end;
-  padding-bottom: ${a.sp2};
-`, pt = o.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: ${a.sp2};
-  width: 100%;
-`, b = o.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: ${a.sp2};
-  width: 100%;
-`, _ = o(c)`
-  display: flex;
-  color: ${(e) => e.theme.colors.hero};
-  align-items: center;
-  justify-content: flex-end;
-`, L = o(c)`
-  display: flex;
-  color: ${(e) => e.theme.colors.primary};
-  align-items: center;
-  justify-content: flex-end;
-  gap: ${a.sp1};
-`, y = o(c)`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: ${a.sp1};
-`, z = o.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  gap: ${a.sp1};
-`, ht = o(Le)`
-  width: ${a.sp3};
-  height: ${a.sp3};
-  color: ${se.success};
-`, ie = o(oe)`
-  width: ${a.sp3};
-  height: ${a.sp3};
-  color: ${(e) => e.theme.colors.primary};
-`, ce = o(ae)`
-  width: ${a.sp3};
-  height: ${a.sp3};
-  color: ${(e) => e.theme.colors.primary};
-`, mt = o(oe)`
-  margin-top: 2px;
-  width: ${a.sp3};
-  height: ${a.sp3};
-  color: ${(e) => e.theme.colors.primary};
-`, xt = o(ae)`
-  margin-top: 2px;
-  width: ${a.sp3};
-  height: ${a.sp3};
-  color: ${(e) => e.theme.colors.primary};
-`, ft = o(c)`
-  display: flex;
-  color: ${se.success};
-  align-items: center;
-  justify-content: flex-end;
-`, gt = o(c)`
-  text-align: right;
-  color: ${(e) => e.status === "connected" ? e.theme.colors.success : e.status === "reconnect" ? e.theme.colors.important : e.theme.colors.link};
-  cursor: pointer;
-  text-decoration: underline;
-`, {
-  common: u,
-  dateFormat: K,
-  expenseAutomation: { accountRecon: s }
-} = ve.getLocalizedStrings(), yt = (e, n) => `${e}.${n}`, jt = "accountReconDrawerDetailsPage", le = "accountReconDrawerDetailsSection";
-function Lt({
-  accountReconciliation: e,
-  plaidConnectionDetails: n,
-  monthYearPeriod: l,
-  openFilePicker: d,
-  filesEndPoint: f,
-  authParams: C,
-  onDismissClick: $,
-  onFetchLinkTokenClick: D,
-  onEstablishConnectionClick: P,
-  onSelectSourceType: F,
-  onDeleteFile: T,
-  onEditFileName: M,
-  onStatementUploadSuccess: V,
-  onUploadWindowOpenedOnce: O
-}) {
-  const m = ge({
-    mode: "all",
-    reValidateMode: "onChange",
-    defaultValues: X(e),
-    resetOptions: {
-      keepDirtyValues: !0,
-      keepErrors: !0
-    },
-    values: X(e)
-  }), w = m.handleSubmit(() => {
-  }), [p, k] = g(
-    void 0
-  ), E = n.link_account_no_microdeposit, v = n.update_account, r = p === "update_account" ? v : E, [x, U] = g(r.linkToken ?? null), [j, i] = g(!1), [I, R] = g(!1), [N, W] = g(void 0), [de, H] = g(void 0), ue = A(() => {
-    k("link_account_no_microdeposit");
-  }, []), pe = A(() => {
-    k("update_account"), D(
-      "update_account",
-      e.paymentAccountId
-    );
-  }, [e.paymentAccountId]), he = {
-    onOkClick: () => {
-      N != null && (T(N), W(void 0)), H(void 0), R(!1);
-    },
-    onCancelClick: () => {
-      W(void 0), R(!1);
-    }
-  }, q = Se(p);
-  S(() => {
-    q.current = p;
-  }, [p]);
-  const me = A(
-    (B) => {
-      P(
-        B,
-        e.accountReconEntity.account.accountId,
-        q.current
-      ), k(void 0), i(!1);
-    },
-    [
-      P,
-      e.accountReconEntity.account.accountId
-    ]
-  ), xe = A((B, fe) => {
-    B != null && console.log("Plaid Connection Error", B, fe), k(void 0), i(!1);
-  }, []), { open: J, ready: Q } = Ce({
-    token: x,
-    onSuccess: me,
-    onExit: xe
-  });
-  return S(() => {
-    (Z((/* @__PURE__ */ new Date()).toISOString()).isAfter(r.expiration) || r.linkToken == null) && r.fetchStatus.fetchState === "Not-Started" && D("link_account_no_microdeposit");
-  }, [r.fetchStatus.fetchState]), S(() => {
-    !j && p != null && r.linkToken === x && r.fetchStatus.fetchState === "Completed" && Q && i(!0);
-  }, [
-    Q,
-    x,
-    r.fetchStatus.fetchState,
-    r.linkToken,
-    p,
-    j
-  ]), S(() => {
-    r.fetchStatus.fetchState === "Completed" && r.linkToken != null && r.linkToken !== x && U(r.linkToken);
-  }, [r.fetchStatus.fetchState, r.linkToken, x]), S(() => {
-    j && J();
-  }, [j, J]), /* @__PURE__ */ t.jsxs(Ue, { children: [
-    /* @__PURE__ */ t.jsx(Ne, { children: /* @__PURE__ */ t.jsx(ze, { children: /* @__PURE__ */ t.jsxs(He, { children: [
-      /* @__PURE__ */ t.jsx(Re, {}),
-      /* @__PURE__ */ t.jsxs(qe, { children: [
-        /* @__PURE__ */ t.jsx(Je, { children: e.accountReconEntity.account.accountName }),
-        /* @__PURE__ */ t.jsx(re, { children: /* @__PURE__ */ t.jsx(bt, { monthYearPeriod: l }) })
-      ] }),
-      /* @__PURE__ */ t.jsx(Qe, { children: /* @__PURE__ */ t.jsx(We, { onClick: $ }) })
-    ] }) }) }),
-    /* @__PURE__ */ t.jsxs(Ye, { children: [
-      /* @__PURE__ */ t.jsx(ye, { ...m, children: /* @__PURE__ */ t.jsx(
-        "form",
-        {
-          style: { width: "100%" },
-          id: jt,
-          onSubmit: w,
-          children: /* @__PURE__ */ t.jsx(
-            St,
-            {
-              monthYearPeriod: l,
-              accountReconciliation: e,
-              filesEndPoint: f,
-              openFilePicker: d,
-              authParams: C,
-              onConnectClick: ue,
-              onReconnectClick: pe,
-              onSelectSourceType: F,
-              onDeleteFile: T,
-              onEditFileName: M,
-              onStatementUploadSuccess: V,
-              onUploadWindowOpenedOnce: O,
-              showConfirmationPopup: I,
-              setShowConfirmationPopup: R,
-              deleteFileId: N,
-              setDeleteFileId: W,
-              uploadErrorMessage: de,
-              setUploadErrorMessage: H
-            }
-          )
-        }
-      ) }),
-      I === !0 || e.statementDeleteStatus.fetchState === "In-Progress" ? /* @__PURE__ */ t.jsx(
-        ke,
-        {
-          titleComponent: /* @__PURE__ */ t.jsx(De, { children: s.reconciliation.drawer.deleteConfirmation.heading }),
-          descriptionComponent: /* @__PURE__ */ t.jsx(be, { children: s.reconciliation.drawer.deleteConfirmation.description }),
-          isLoading: e.statementDeleteStatus.fetchState === "In-Progress",
-          primaryButtonText: u.confirm,
-          secondaryButtonText: u.cancel,
-          action: he
-        }
-      ) : null
-    ] })
-  ] });
-}
-const St = ({
-  monthYearPeriod: e,
-  accountReconciliation: n,
-  filesEndPoint: l,
-  authParams: d,
-  openFilePicker: f,
-  onConnectClick: C,
-  onReconnectClick: $,
-  setDeleteFileId: D,
-  setShowConfirmationPopup: P,
-  onEditFileName: F,
-  onSelectSourceType: T,
-  onStatementUploadSuccess: M,
-  onUploadWindowOpenedOnce: V,
-  uploadErrorMessage: O,
-  setUploadErrorMessage: m
-}) => {
-  const [w, p] = g(!1), E = (n.localData?.accountSource ?? "plaid") === "plaid" ? n.accountReconEntity.reconciliationId != null ? n.accountReconEntity.reconUpdatedAt : n.accountReconEntity.accountUpdatedAt : n.accountReconEntity.reconUpdatedAt, v = [];
-  v.push({
-    label: s.reconciliation.menu.bankConnection,
-    value: "plaid"
-  }), v.push({
-    label: s.reconciliation.menu.statement,
-    value: "bank_statement"
-  });
-  const r = n.localData?.accountSource, x = n.accountConnectionStatus === "connected" || n.connectionInProgress === !0 ? "plaid" : n.accountReconEntity.statementStatus?.code === "uploaded" || n.statementParseInProgress === !0 || w ? "bank_statement" : void 0;
-  S(() => {
-    n.accountReconEntity.statementStatus.code === "uploaded" && (n.accountReconEntity.statementDataStatus?.code === "validation_failed" || n.accountReconEntity.statementDataStatus?.code === "parsing_failed" || n.accountReconEntity.statementDataStatus?.code === "processing_failed") && m(
-      Fe(
-        n.accountReconEntity.statementDataStatus?.code,
-        "drawer",
-        n.accountReconEntity.errorMessage?.errorShort
-      )
-    );
-  }, [
-    n.accountReconEntity.statementStatus.code,
-    n.accountReconEntity.statementDataStatus?.code,
-    n.accountReconEntity.errorMessage?.errorShort,
-    m
-  ]);
-  const U = ["reconciled", "in_progress", "reconciled_via_qbo"], j = n.accountReconEntity.reconciliationStatus != null && U.includes(
-    n.accountReconEntity.reconciliationStatus.code
-  );
-  return /* @__PURE__ */ t.jsxs(Ge, { children: [
-    /* @__PURE__ */ t.jsxs(Ke, { children: [
-      /* @__PURE__ */ t.jsxs(Xe, { children: [
-        /* @__PURE__ */ t.jsx(Y, { children: s.reconciliation.headers.bankBalance }),
-        /* @__PURE__ */ t.jsx(Ze, { children: /* @__PURE__ */ t.jsx(
-          Me,
-          {
-            bankBalance: n.accountReconEntity.balance,
-            bankConnection: n.accountConnectionStatus,
-            isLoading: !1,
-            fromDrawer: !0,
-            accountId: n.accountReconEntity.account.accountId,
-            statementStatus: n.accountReconEntity.statementStatus.code,
-            onStatementAddClicked: () => {
-            },
-            setIsHovering: () => {
-            }
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ t.jsxs(et, { children: [
-        /* @__PURE__ */ t.jsx(Y, { children: s.reconciliation.headers.clearedBalance }),
-        /* @__PURE__ */ t.jsx(tt, { children: /* @__PURE__ */ t.jsx(
-          Ve,
-          {
-            clearedBalance: n.accountReconEntity.clearedBalance,
-            isLoading: !1
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ t.jsxs(ot, { children: [
-        /* @__PURE__ */ t.jsx(Y, { children: s.reconciliation.headers.variance }),
-        /* @__PURE__ */ t.jsx(at, { children: /* @__PURE__ */ t.jsx(
-          kt,
-          {
-            variance: n.accountReconEntity.variance,
-            variancePercentage: n.accountReconEntity.variancePercentage
-          }
-        ) })
-      ] })
-    ] }),
-    /* @__PURE__ */ t.jsxs(dt, { children: [
-      /* @__PURE__ */ t.jsxs(ut, { children: [
-        " ",
-        s.reconciliation.drawer.source,
-        " "
-      ] }),
-      /* @__PURE__ */ t.jsxs(pt, { children: [
-        /* @__PURE__ */ t.jsxs(b, { children: [
-          /* @__PURE__ */ t.jsx(_, { children: s.reconciliation.drawer.labels.type }),
-          /* @__PURE__ */ t.jsx(L, { children: x != null ? /* @__PURE__ */ t.jsx(y, { children: x === "plaid" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-            /* @__PURE__ */ t.jsx(ie, {}),
-            s.reconciliation.menu.bankConnection
-          ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-            /* @__PURE__ */ t.jsx(ce, {}),
-            s.reconciliation.menu.statement
-          ] }) }) : /* @__PURE__ */ t.jsx(Ee, { controller: !0, children: /* @__PURE__ */ t.jsx(
-            Ie,
-            {
-              moreIconType: "custom",
-              customIcon: /* @__PURE__ */ t.jsx(Ct, { selectedSourceType: r }),
-              options: v,
-              customStyleConfig: {
-                option: () => ({
-                  ".option-container": {
-                    justifyContent: "flex-start"
-                  }
-                }),
-                valueContainer: () => ({
-                  height: a.sp5,
-                  width: "180px"
-                })
-              },
-              menuPlacement: "bottom",
-              onOptionSelection: (i) => {
-                T($e(i));
-              },
-              valueToIcon: (i) => i === "plaid" ? /* @__PURE__ */ t.jsx(mt, {}) : i === "bank_statement" ? /* @__PURE__ */ t.jsx(xt, {}) : null
-            }
-          ) }) })
-        ] }),
-        r === "bank_statement" ? /* @__PURE__ */ t.jsx(b, { children: /* @__PURE__ */ t.jsx(
-          Be,
-          {
-            name: yt(le, "file"),
-            file: n.accountReconEntity.statementMetaData?.file,
-            showPhotoPicker: !1,
-            isDisabled: j,
-            sizeLimit: 1e7,
-            onFileSizeError: (i) => {
-              i && m(u.fileElementPicker.sizeLimit);
-            },
-            deleteFileStatusById: {},
-            updateFileStatusById: {},
-            filesEndPoint: l,
-            authParams: d,
-            acceptableTypes: ["application/pdf"],
-            placeholderText: s.reconciliation.drawer.downloadPlaceholder,
-            autoOpenFilePicker: f,
-            accountStatementUpload: {
-              uploadHelper: we,
-              metadataPayload: {
-                accountId: n.accountReconEntity.account.accountId,
-                monthYearPeriod: e
-              },
-              errorMessage: O,
-              onUploadError: (i) => {
-                m(i?.message);
-              },
-              onUploadSuccess: (i) => {
-                M(i), p(!1);
-              },
-              onUploadStart: () => {
-                p(!0), m(void 0);
-              },
-              onUploadWindowOpenedOnce: () => {
-                V();
-              }
-            },
-            onDeleteFile: (i) => {
-              D(i), P(!0);
-            },
-            onEditFileName: (i, I) => {
-              F(i, I);
-            }
-          }
-        ) }) : null,
-        /* @__PURE__ */ t.jsxs(b, { children: [
-          /* @__PURE__ */ t.jsx(_, { children: s.reconciliation.drawer.labels.status }),
-          /* @__PURE__ */ t.jsx(L, { children: r !== "bank_statement" ? /* @__PURE__ */ t.jsx(
-            $t,
-            {
-              status: n.accountConnectionStatus,
-              connectionInProgress: n.connectionInProgress,
-              onConnectClick: C,
-              onReconnectClick: $
-            }
-          ) : /* @__PURE__ */ t.jsx(
-            wt,
-            {
-              uploadInProgress: w,
-              status: n.accountReconEntity.statementDataStatus?.code
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ t.jsxs(b, { children: [
-          /* @__PURE__ */ t.jsx(_, { children: s.reconciliation.drawer.labels.accountType }),
-          /* @__PURE__ */ t.jsx(L, { children: /* @__PURE__ */ t.jsx(
-            vt,
-            {
-              accountSubType: G(
-                n.accountReconEntity.account.accountSubType ?? ""
-              )
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ t.jsxs(b, { children: [
-          /* @__PURE__ */ t.jsx(_, { children: s.reconciliation.drawer.labels.lastUpdated }),
-          /* @__PURE__ */ t.jsx(L, { children: /* @__PURE__ */ t.jsx(
-            ne,
-            {
-              isLoading: w,
-              customStyle: {
-                height: "20px",
-                width: "100px"
-              },
-              position: "left",
-              children: E != null ? /* @__PURE__ */ t.jsx(y, { children: G(E.utc(!0).fromNow()) }) : u.strings.hyphen
-            }
-          ) })
-        ] })
-      ] })
-    ] })
-  ] });
-}, Ct = ({
-  selectedSourceType: e
-}) => /* @__PURE__ */ t.jsxs(it, { children: [
-  e == null || e === "plaid" ? /* @__PURE__ */ t.jsx(ie, {}) : /* @__PURE__ */ t.jsx(ce, {}),
-  /* @__PURE__ */ t.jsx(ct, { children: e == null || e === "plaid" ? s.reconciliation.menu.bankConnection : s.reconciliation.menu.statement }),
-  /* @__PURE__ */ t.jsx(lt, {})
-] }), $t = ({
-  status: e,
-  connectionInProgress: n,
-  onConnectClick: l,
-  onReconnectClick: d
-}) => n ? /* @__PURE__ */ t.jsx(z, { children: s.reconciliation.drawer.values.connecting }) : e === "connected" ? /* @__PURE__ */ t.jsxs(z, { children: [
-  /* @__PURE__ */ t.jsx(ht, {}),
-  /* @__PURE__ */ t.jsx(ft, { children: s.reconciliation.drawer.values.connected })
-] }) : /* @__PURE__ */ t.jsx(
-  z,
-  {
-    onClick: e === "reconnect" ? d : l,
-    children: /* @__PURE__ */ t.jsx(gt, { status: e, children: e === "reconnect" ? s.reconciliation.drawer.values.reconnect : s.reconciliation.drawer.values.connect })
-  }
-), wt = ({
-  status: e,
-  uploadInProgress: n
-}) => n ? /* @__PURE__ */ t.jsx(
-  ne,
-  {
-    isLoading: n,
-    customStyle: {
-      height: "20px",
-      width: "100px"
-    },
-    position: "left",
-    children: /* @__PURE__ */ t.jsx(t.Fragment, {})
-  }
-) : e == null ? /* @__PURE__ */ t.jsx(y, { children: u.strings.hyphen }) : e === "parsing" ? /* @__PURE__ */ t.jsx(y, { children: s.reconciliation.drawer.values.statementParsing }) : e === "validated" ? /* @__PURE__ */ t.jsx(y, { children: s.reconciliation.drawer.values.uploaded }) : /* @__PURE__ */ t.jsx(y, { children: u.strings.hyphen }), kt = ({
-  variance: e,
-  variancePercentage: n,
-  reconciliationStatusCode: l
-}) => {
-  const d = je(), {
-    varianceColor: f,
-    variancePercentageColor: C,
-    variancePercentageContainerColor: $
-  } = Oe(d, e, l, !0);
-  return /* @__PURE__ */ t.jsxs(nt, { children: [
-    /* @__PURE__ */ t.jsx(st, { textColor: f, children: Ae("0,0", e) ?? u.strings.hyphen }),
-    /* @__PURE__ */ t.jsxs(
-      rt,
-      {
-        textColor: C,
-        bgColor: $,
-        children: [
-          n != null ? n === 0 ? "0" : n.toFixed(2) : null,
-          n != null ? u.strings.percentage : null
-        ]
-      }
-    )
-  ] });
-}, vt = ({ accountSubType: e }) => {
-  const n = e != null ? e.replace("_", " ") : u.strings.hyphen;
-  return /* @__PURE__ */ t.jsx(y, { children: n });
-}, bt = ({
-  monthYearPeriod: e
-}) => /* @__PURE__ */ t.jsx(re, { children: Dt(e) }), Dt = (e) => {
-  const { month: n, year: l } = e, d = Z(`${l}-${String(n).padStart(2, "0")}-01`);
-  let f = d.endOf("month");
-  return `${d.format(K.visual.DMMMYYYYFormat)} ${u.strings.hyphen} ${f.format(K.visual.DMMMYYYYFormat)}`;
-}, X = (e) => ({
-  [le]: {
-    file: e.accountReconEntity.statementMetaData?.file,
-    selectedType: e.localData?.accountSource
-  }
-});
-export {
-  Lt as default,
-  yt as uniqueName
-};