@zeniai/web-components 3.16.58 → 3.16.59

package/dist/EditReimbursementDetailPage-9QGyjLZ_.js

@@ -1,4554 +0,0 @@
-import { u as $t, d as it, m as Pe, j as t, an as Rt, C as sn, k as cn, o as sr, g as dn, aD as cr, h as dr, b as Oo, F as un, l as Po } from "./vendor-.pnpm-Q8NJHkXi.js";
-import jt, { useEffect as fe, useState as Z, useRef as bt, useCallback as mn, useMemo as xt, useContext as ur } from "react";
-import n from "@emotion/styled";
-import { RoomProvider as mr } from "@liveblocks/react";
-import { dateNow as mo, zeniDate as rt, toAmount as pn, getNextNthWorkingDay as hn, defaultVendorCurrency as Bo, reduceAnyFetchState as pr, toReimbursementTypeCode as Ao } from "@zeniai/client-epic-state";
-import { u as ze, dz as St, ir as Nt, a as $e, R as s, ht as Se, hv as ve, aH as gn, ia as Lo, fh as nt, aQ as po, is as yn, S as o, it as co, gH as Ge, D as r, j as q, fO as hr, o as fn, aB as gr, C as I, A as vt, av as ho, Z as xn, G as go, ag as yr, iu as Wt, a5 as fr, az as yo, B as Mo, ik as bn, at as Ro, L as Et, p as fo, z as xr, E as br, id as wr, hs as wn, t as zt, fl as $n, fs as $r, hz as Sr, _ as Vt, eY as Sn, K as vn, w as Cn, hg as xo, aN as bo, aO as Tn, aP as kn, eN as vr, ap as jn, aV as Cr, y as Tr, aD as uo, iv as kr, b as In, V as wo, ba as jr, bc as Ir, T as Or, i as Pr, N as Br, iw as Ar, aE as zo, k as Lr, ae as Mr, ic as Rr, ii as Fo, m as zr, eO as Fr, e as Nr, aG as Wr, ix as Er, X as Vr } from "./index-C-vae5Od.js";
-import On from "./InvoiceUploadSection-GG67d0Yh.js";
-import { u as Ie, w as Ft, l as $o, p as wt, s as No, g as _r } from "./types-DyvtCprH.js";
-import { L as Dr } from "./LabeledCreatableSingleSelectField-CoX4tsOe.js";
-import { C as qr } from "./CurrencySelectField-CMjTteKh.js";
-import { S as Ur } from "./SetUpDefaultSection-Ctk1p37V.js";
-import { B as Hr } from "./BankAccountSection-xFi5FA6H.js";
-import { B as Kr, a as Gr } from "./BankAccountWarningSection-s4VG2O0j.js";
-import { S as Yr } from "./radio-default-CiSgisfh.js";
-const We = (e, i) => `${e}.${i}`, Wo = {
-  largeLabelWidth: new s(120, 120, 160),
-  paddingBottom: new s(r[3], r[2]),
-  paddingLeft: new s(r[3], r[4])
-}, {
-  spendManagement: {
-    reimbursement: { reimbursementDetail: je }
-  },
-  dateFormat: Jr,
-  common: Zr
-} = $e.getLocalizedStrings(), Qr = ({
-  lineIndex: e,
-  mileage: i,
-  classList: a,
-  defaultCurrency: d,
-  sectionId: h,
-  isReimbursementCommentingEnabled: v,
-  isDisabled: u,
-  isAddReimbursementDisabled: w,
-  companyMileageConfigInfo: x,
-  reimbursementId: l,
-  classHierarchyList: C
-}) => {
-  const $ = ze(), c = St(), p = Nt(), b = `dashboard_${c.currentTenant?.companyId}`, O = $t(), {
-    formState: { errors: T },
-    getValues: P,
-    trigger: G
-  } = it(), B = Zr.strings.empty, k = P(
-    We(h, "distanceInMiles")
-  ), M = Wo.largeLabelWidth.value($), ie = P(We(h, "class")), oe = a.find(
-    (L) => L.classId === ie?.selectedOption
-  ), ae = We(h, "class"), ee = Pe(T, ae);
-  fe(() => {
-    ie?.selectedOption != null && (oe?.isDeleted === !0 || ee) && G(ae);
-  }, [
-    ie?.selectedOption,
-    oe?.isDeleted,
-    a
-  ]);
-  const U = {
-    application: "dashboard",
-    companyId: c.currentTenant?.companyId,
-    tab: "reimbursement",
-    entityId: l
-  }, F = (L) => a.filter((J) => J.classId === L)[0]?.accountingClassNumber, Y = a.find((L) => L.classId === i.class), H = {
-    valueContainer: (L) => ({
-      ...L,
-      padding: `2px ${o.sp3} !important`,
-      overflow: "unset"
-    }),
-    singleValue: () => ({
-      margin: 0
-    })
-  };
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx(
-      Se,
-      {
-        isThreadAllowed: v && l != null,
-        dashboardTabKey: ve({
-          type: "details",
-          key: `${e}.mileage.transactionDate`
-        }),
-        roomId: b,
-        companyId: c.currentTenant?.companyId ?? B,
-        companyName: c.currentTenant?.companyName ?? B,
-        entityId: l,
-        dashboardOptionType: "reimbursement",
-        filterMetaData: {
-          ...U,
-          entityType: `reimbursement.details.${Ie(
-            "transactionDate",
-            e,
-            "mileage"
-          )}`
-        },
-        fieldThreadTargetElement: p?.sharedRef?.contentWrapperRef,
-        children: /* @__PURE__ */ t.jsx(
-          gn,
-          {
-            isDisabled: u,
-            label: {
-              label: je.transactionDate,
-              width: M
-            },
-            style: {
-              paddingBottom: Wo.paddingBottom.valuePx($),
-              width: "auto"
-            },
-            dateField: {
-              name: We(h, "transactionDate"),
-              placeholder: je.datePlaceholder,
-              defaultValue: i?.transactionDate,
-              dateFormat: Jr.visual.defaultInput,
-              autoComplete: "off",
-              maxDate: mo(),
-              registerOptions: {
-                required: !0,
-                validate: (L) => !!L
-              }
-            }
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t.jsx(It, {}),
-    /* @__PURE__ */ t.jsx(
-      Se,
-      {
-        isThreadAllowed: v && l != null,
-        dashboardTabKey: ve({
-          type: "details",
-          key: `${e}.mileage.distanceInMiles`
-        }),
-        roomId: b,
-        companyId: c.currentTenant?.companyId ?? B,
-        companyName: c.currentTenant?.companyName ?? B,
-        entityId: l,
-        dashboardOptionType: "reimbursement",
-        filterMetaData: {
-          ...U,
-          entityType: `reimbursement.details.${Ie(
-            "distanceInMiles",
-            e,
-            "mileage"
-          )}`
-        },
-        fieldThreadTargetElement: p?.sharedRef?.contentWrapperRef,
-        children: /* @__PURE__ */ t.jsx(
-          Lo,
-          {
-            isDisabled: w ? "disabled" : void 0,
-            style: { width: "auto" },
-            label: { label: je.distanceInMiles, width: M },
-            formattedTextField: {
-              type: "number",
-              name: We(h, "distanceInMiles"),
-              placeholder: je.addMiles,
-              defaultValue: i.distanceInMiles,
-              registerOptions: {
-                required: !0,
-                validate: (L) => L != null ? L > 0 : !0,
-                min: 0.01
-              },
-              returnValueType: "floatValue",
-              allowNegative: !1,
-              isNumericString: !1,
-              decimalScale: 2
-            }
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t.jsx(It, {}),
-    /* @__PURE__ */ t.jsx(
-      Se,
-      {
-        isThreadAllowed: v && l != null,
-        dashboardTabKey: ve({
-          type: "details",
-          key: `${e}.mileage.amount`
-        }),
-        roomId: b,
-        companyId: c.currentTenant?.companyId ?? B,
-        companyName: c.currentTenant?.companyName ?? B,
-        entityId: l,
-        dashboardOptionType: "reimbursement",
-        filterMetaData: {
-          ...U,
-          entityType: `reimbursement.details.${Ie(
-            "amount",
-            e,
-            "mileage"
-          )}`
-        },
-        fieldThreadTargetElement: p?.sharedRef?.contentWrapperRef,
-        children: /* @__PURE__ */ t.jsx(
-          Lo,
-          {
-            isDisabled: "disabled",
-            label: {
-              label: je.amount,
-              width: M
-            },
-            formattedTextField: {
-              type: "number",
-              name: We(`${h}.amount`, "amount"),
-              defaultValue: i.amount?.amount,
-              placeholder: nt(je.amount),
-              returnValueType: "floatValue",
-              prefix: i.amount?.currencySymbol,
-              allowNegative: !1,
-              isNumericString: !1,
-              registerOptions: {
-                required: !0,
-                validate: (L) => L != null ? L > 0 : !0
-              },
-              autoComplete: "off",
-              decimalSeparator: ".",
-              decimalScale: 2,
-              fixedDecimalScale: !1,
-              thousandSeparator: !0
-            },
-            style: { width: "auto" },
-            additionalInfoLabel: k != null && x?.mileageUnitAmount != null ? `${d.currencySymbol}${x?.mileageUnitAmount} per mile x ${k}` : void 0
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t.jsx(It, {}),
-    /* @__PURE__ */ t.jsx(
-      Se,
-      {
-        isThreadAllowed: v && l != null,
-        dashboardTabKey: ve({
-          type: "details",
-          key: `${e}.mileage.memo`
-        }),
-        roomId: b,
-        companyId: c.currentTenant?.companyId ?? B,
-        companyName: c.currentTenant?.companyName ?? B,
-        entityId: l,
-        dashboardOptionType: "reimbursement",
-        filterMetaData: {
-          ...U,
-          entityType: `reimbursement.details.${Ie(
-            "memo",
-            e,
-            "mileage"
-          )}`
-        },
-        fieldThreadTargetElement: p?.sharedRef?.contentWrapperRef,
-        children: /* @__PURE__ */ t.jsx(
-          po,
-          {
-            isDisabled: u,
-            label: {
-              label: je.memo,
-              width: M
-            },
-            style: { width: "auto" },
-            text: {
-              type: "text",
-              name: We(h, "memo"),
-              placeholder: nt(je.memo),
-              defaultValue: i.memo,
-              autoComplete: "off",
-              options: {
-                pattern: yn
-              }
-            }
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t.jsx(It, {}),
-    /* @__PURE__ */ t.jsx(
-      Se,
-      {
-        isThreadAllowed: v && l != null,
-        dashboardTabKey: ve({
-          type: "details",
-          key: `${e}.mileage.class`
-        }),
-        roomId: b,
-        companyId: c.currentTenant?.companyId ?? B,
-        companyName: c.currentTenant?.companyName ?? B,
-        entityId: l,
-        dashboardOptionType: "reimbursement",
-        filterMetaData: {
-          ...U,
-          entityType: `reimbursement.details.${Ie(
-            "class",
-            e,
-            "mileage"
-          )}`
-        },
-        fieldThreadTargetElement: p?.sharedRef?.contentWrapperRef,
-        style: {
-          borderRadius: `0 0 ${o.sp2} ${o.sp2}`
-        },
-        children: /* @__PURE__ */ t.jsx(
-          co,
-          {
-            isLoading: !1,
-            label: {
-              label: je.department,
-              width: M
-            },
-            additionalLabelInfo: oe?.isDeleted === !0 && Pe(T, We(h, "class")) ? je.deletedClassError : void 0,
-            groupedSingleSelectField: {
-              shouldShowChevronIcon: !1,
-              name: We(h, "class"),
-              placeholder: nt(je.department),
-              valueToId: (L) => F(L),
-              defaultValue: {
-                selectedOption: Y?.classId,
-                allOptions: Ge(C, [])
-              },
-              style: {
-                width: "100%"
-              },
-              customStyleConfig: H,
-              registerOptions: {
-                required: !0,
-                validate: (L) => a.find(
-                  (J) => J.classId === L?.selectedOption
-                )?.isDeleted === !0 ? je.deletedClassError : !0
-              }
-            },
-            style: {
-              borderBottom: `1px solid ${O.colors.grey3}`,
-              borderBottomLeftRadius: o.sp2,
-              borderBottomRightRadius: o.sp2
-            },
-            fullWidthSelect: !0
-          },
-          We(h, "class")
-        )
-      }
-    )
-  ] });
-}, It = n.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, Eo = {
-  amounWidth: new s(50, 30),
-  currencyWidth: new s(50, 70)
-};
-function Xr({
-  name: e,
-  placeHolder: i,
-  defaultValue: a,
-  isDisabled: d,
-  showAmountCurrencyError: h,
-  style: v,
-  allCurrencies: u
-}) {
-  const [w, x] = Z(!1), {
-    getValues: l,
-    formState: { errors: C }
-  } = it(), $ = $t(), c = ze(), p = d != null, b = l(e), O = `${b?.amount} ${b?.currency?.selectedOption}`, T = Pe(C, e) && Rt(C, `${e}.amount`) != null, P = Pe(C, e) && Rt(C, `${e}.currency`) != null, G = h === !0 ? T || P : !1, B = !G && w === !1;
-  return fe(() => {
-    B === !1 && x(!0);
-  }, [B]), /* @__PURE__ */ t.jsx(
-    sn,
-    {
-      onClickAway: () => p === !1 && !G && x(!1),
-      children: /* @__PURE__ */ t.jsx(
-        ti,
-        {
-          style: v,
-          isDisabled: p,
-          tabIndex: B && !p ? 0 : void 0,
-          onClick: () => p === !1 && x(!0),
-          "data-testid": q("currency-amount-field", e),
-          children: /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-            b?.amount != null ? /* @__PURE__ */ t.jsx(
-              Vo,
-              {
-                className: "amount-field",
-                isVisible: B,
-                children: O
-              }
-            ) : /* @__PURE__ */ t.jsx(
-              Vo,
-              {
-                className: "amount-field amount-placeholder",
-                isVisible: B,
-                children: i?.name
-              }
-            ),
-            /* @__PURE__ */ t.jsxs(ei, { isVisible: !B, children: [
-              /* @__PURE__ */ t.jsx(
-                hr,
-                {
-                  type: "number",
-                  name: `${e}.amount`,
-                  defaultValue: a?.amount,
-                  placeholder: i?.amount,
-                  returnValueType: "floatValue",
-                  allowNegative: !1,
-                  isNumericString: !1,
-                  registerOptions: {
-                    required: !0,
-                    validate: (k) => k != null ? k > 0 : !0
-                  },
-                  autoComplete: "off",
-                  decimalSeparator: ".",
-                  decimalScale: 2,
-                  fixedDecimalScale: !1,
-                  thousandSeparator: !0,
-                  isDisabled: d,
-                  style: {
-                    display: "flex",
-                    flexGrow: 1,
-                    width: Eo.amounWidth.valuePercentage(c),
-                    cursor: "inherit"
-                  },
-                  bgColor: $.colors.background,
-                  isFieldError: T,
-                  shouldHighlightZeroAmount: !0
-                }
-              ),
-              B ? null : /* @__PURE__ */ t.jsx(oi, {}),
-              /* @__PURE__ */ t.jsx(
-                qr,
-                {
-                  name: `${e}.currency`,
-                  registerOptions: {
-                    validate: (k) => k != null && k.selectedOption != null
-                  },
-                  defaultValue: {
-                    allOptions: u.map((k) => ({
-                      label: c === "small" ? k.currencyCode : `${k.currencyCode} - ${k.currency}`,
-                      value: k.currencyCode,
-                      countryCode: k.countryCode
-                    })),
-                    selectedOption: a?.currencyCode
-                  },
-                  controlStyle: {
-                    justifyContent: "flex-start",
-                    backgroundColor: $.colors.background
-                  },
-                  isDisabled: d,
-                  style: {
-                    width: Eo.currencyWidth.valuePercentage(c),
-                    flexGrow: 1
-                  },
-                  isOptionRemovable: !1
-                }
-              )
-            ] })
-          ] })
-        }
-      )
-    }
-  );
-}
-const ei = n.div`
-  display: ${(e) => e.isVisible ? "flex" : "none"};
-  width: 100%;
-  input {
-    text-align: left;
-  }
-`, ti = n.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  position: relative;
-  width: 100%;
-  background-color: ${(e) => e.theme.colors.grey5};
-  outline: none;
-  outline-width: 0;
-  input {
-    text-align: right;
-  }
-`, oi = n.div`
-  background-color: ${(e) => e.theme.colors.grey5};
-  min-width: ${o.sp3};
-`, Vo = n(fn)`
-  display: ${(e) => e.isVisible ? "flex" : "none"};
-  padding: 0 ${o.sp3};
-  border-radius: ${o.sp1};
-  height: 100%;
-  align-items: center;
-  width: 100%;
-  justify-content: flex-end;
-  color: ${(e) => e.theme.colors.primary};
-  &.amount-placeholder {
-    color: ${(e) => e.theme.colors.grey1};
-  }
-`, De = {
-  width: new s(343, 580, 726),
-  height: new s(r[6], r[6]),
-  controlHeight: new s(r[6], r[6]),
-  paddingTopBottom: new s(r[2], r[2]),
-  marginTop: new s(r[2], r[2]),
-  marginBottom: new s(r[2], r[2]),
-  marginRight: new s(r[2], r[2]),
-  labelMarginLeft: new s(r[3], r[4]),
-  labelMarginRight: new s(r[3], r[4]),
-  labelMarginTop: new s(r[2], r[2])
-}, Pn = {
-  infoLabel: new ho("extraSmallRegular", "smallRegular")
-};
-function ni({
-  isDisabled: e,
-  label: i,
-  currencyAmountField: a,
-  style: d,
-  errorInfoLabel: h,
-  isAdditionalInfoLabelLoading: v,
-  showAdditionalLabelTooltip: u = !1,
-  additionalLabelTooltip: w,
-  additionalInfoLabel: x,
-  showAdditionalInfoLabel: l = !0
-}) {
-  const C = ze(), {
-    formState: { errors: $ }
-  } = it(), c = Pe($, a.name) && Rt($, `${a.name}.amount`) != null, p = Pe($, a.name) && Rt($, `${a.name}.currency`) != null, b = a.showAmountCurrencyError === !0 ? c || p : !1, O = c || p || b, T = () => {
-    if (v === !0)
-      return /* @__PURE__ */ t.jsx(si, { children: /* @__PURE__ */ t.jsx(vt, { size: "Small", start: !0 }) });
-    if (l && x || b) {
-      let P = null;
-      return u === !0 && l && x && (P = /* @__PURE__ */ t.jsx(
-        xn,
-        {
-          placement: C === "small" ? "bottom" : "right",
-          maxWidth: "364px",
-          title: /* @__PURE__ */ t.jsx(li, { children: w ?? "" }),
-          children: /* @__PURE__ */ t.jsx(di, { children: /* @__PURE__ */ t.jsx(ui, {}) })
-        }
-      )), /* @__PURE__ */ t.jsxs(
-        ci,
-        {
-          size: C,
-          isError: b,
-          hasToolTip: u,
-          children: [
-            P,
-            x
-          ]
-        }
-      );
-    }
-  };
-  return /* @__PURE__ */ t.jsxs(
-    ri,
-    {
-      size: C,
-      style: d,
-      isDisabled: e != null,
-      isAmountError: c,
-      isCurrencyError: p,
-      "data-testid": q(
-        "labeled-currency-amount-field",
-        a.name
-      ),
-      children: [
-        /* @__PURE__ */ t.jsx(
-          gr,
-          {
-            isDisabled: e,
-            label: i.label,
-            htmlFor: a.name,
-            style: {
-              marginLeft: De.labelMarginLeft.value(C),
-              marginRight: De.labelMarginRight.value(C),
-              marginTop: De.labelMarginTop.value(C),
-              width: i.width ?? "auto"
-            }
-          }
-        ),
-        /* @__PURE__ */ t.jsxs(ai, { labelWidth: i.width, children: [
-          /* @__PURE__ */ t.jsx(
-            Xr,
-            {
-              ...a,
-              isDisabled: e,
-              style: {
-                flexGrow: 1,
-                height: De.controlHeight.value(C)
-              }
-            }
-          ),
-          O ? /* @__PURE__ */ t.jsx(ii, { size: C, hasError: O, children: h }) : null,
-          T()
-        ] })
-      ]
-    }
-  );
-}
-const ri = n.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background-color: ${(e) => e.theme.colors.grey5};
-  width: ${(e) => De.width.valuePx(e.size)};
-  min-height: ${(e) => De.height.valuePx(e.size)};
-  padding-right: ${(e) => De.marginRight.valuePx(e.size)};
-  padding-top: ${(e) => De.paddingTopBottom.valuePx(e.size)};
-  padding-bottom: ${(e) => De.paddingTopBottom.valuePx(e.size)};
-
-  :first-of-type {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-  }
-
-  :last-of-type {
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-  }
-
-  &:focus-within {
-    z-index: 2;
-    outline: 1px solid ${(e) => e.theme.colors.primary};
-
-    .amount-field {
-      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.theme.colors.background};
-    }
-
-    input:nth-of-type(1) {
-      background-color: ${(e) => e.isAmountError ? I.importantLight : e.theme.colors.background};
-    }
-
-    input:nth-of-type(2) {
-      background-color: ${(e) => e.isCurrencyError ? I.importantLight : e.theme.colors.background};
-    }
-  }
-  input {
-    text-align: left;
-    background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.theme.colors.background};
-  }
-
-  input:nth-of-type(1) {
-    background-color: ${(e) => e.isAmountError ? I.importantLight : e.theme.colors.background};
-  }
-
-  input:nth-of-type(2) {
-    background-color: ${(e) => e.isCurrencyError ? I.importantLight : e.theme.colors.background};
-  }
-
-  &:hover {
-    z-index: 1;
-    outline: 1px solid
-      ${(e) => e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary};
-    input,
-    .amount-field {
-      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.theme.colors.background};
-    }
-
-    input:nth-of-type(1) {
-      background-color: ${(e) => e.isAmountError ? I.importantLight : e.theme.colors.background};
-    }
-
-    input:nth-of-type(2) {
-      background-color: ${(e) => e.isCurrencyError ? I.importantLight : e.theme.colors.background};
-    }
-  }
-`, ii = n.label`
-  color: ${(e) => e.hasError === !0 ? I.important : e.additionalInfoTextColor != null ? e.additionalInfoTextColor : e.theme.colors.grey1};
-  width: auto;
-  ${(e) => `${Pn.infoLabel.style(e.size)}`};
-  padding-right: ${o.sp3};
-  text-align: right;
-`, ai = n.div`
-  display: flex;
-  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
-  justify-content: flex-end;
-  flex-direction: column;
-  position: relative;
-`, li = n(go)`
-  padding: 12px;
-  color: ${(e) => e.theme.colors.grey1};
-  background: ${(e) => e.theme.colors.overlayColor};
-  border-radius: ${o.sp1};
-`, si = n.div`
-  padding-right: ${o.sp3};
-  padding-top: ${o.sp1};
-  display: flex;
-  justify-content: flex-end;
-`, ci = n.label`
-  display: flex;
-  justify-content: flex-end;
-  color: ${(e) => e.isError ? I.important : e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.isError ? I.importantDark : e.theme.colors.primary};
-  }
-  ${(e) => `${Pn.infoLabel.style(e.size)}`};
-  padding-right: ${o.sp3};
-  text-align: right;
-  margin-top: ${(e) => e.hasToolTip === !0 ? o.sp1 : o.sp0};
-`, di = n.div`
-  display: flex;
-  margin-right: ${o.sp2};
-  margin-top: 2px;
-  align-items: center;
-`, ui = n(yr)`
-  width: ${o.sp3};
-  height: ${o.sp3};
-  color: inherit;
-`, ye = (e, i) => `${e}.${i}`, Lt = {
-  largeLabelWidth: new s(120, 120, 160),
-  smallLabelWidth: new s(85, 85, 160),
-  paddingBottom: new s(r[3], r[2]),
-  paddingLeft: new s(r[3], r[4]),
-  autoFillIconLeft: new s(-r[2], -r[4])
-}, {
-  dateFormat: mi,
-  common: Bn,
-  spendManagement: {
-    reimbursement: { reimbursementDetail: te }
-  }
-} = $e.getLocalizedStrings(), {
-  strings: { empty: re }
-} = Bn, pi = (e, i) => {
-  const a = e.slice(1);
-  let d = !1;
-  return a.forEach((h) => {
-    h.account?.qboId != null && h.account?.qboId === i && (d = !0);
-  }), d;
-}, hi = (e) => e.charAt(0).toLowerCase() + e.slice(1), gi = ({
-  lineIndex: e,
-  outOfPocket: i,
-  accountList: a,
-  classList: d,
-  merchantList: h,
-  isAddReimbursementDisabled: v,
-  sectionId: u,
-  isReimbursementCommentingEnabled: w,
-  isDisabled: x,
-  autoFields: l = [],
-  accountsHierarchyList: C,
-  classHierarchyList: $,
-  reimbursementId: c,
-  tentativeMerchantName: p,
-  allCurrencies: b,
-  uncategorizedAccounts: O
-}) => {
-  const T = ze(), P = St(), G = Nt(), B = $t(), {
-    formState: { errors: k },
-    getValues: M,
-    trigger: ie
-  } = it(), oe = M(ye(u, "class")), ae = d.find(
-    (y) => y.classId === oe?.selectedOption
-  ), ee = ye(u, "class"), U = Pe(k, ee), F = M(ye(u, "account")), Y = a.find(
-    (y) => y.qboId === F?.selectedOption || y.accountId === F?.selectedOption
-  ), H = ye(u, "account"), L = Pe(k, H);
-  fe(() => {
-    oe?.selectedOption != null && (ae?.isDeleted === !0 || U) && ie(ee);
-  }, [
-    oe?.selectedOption,
-    ae?.isDeleted,
-    d
-  ]), fe(() => {
-    F?.selectedOption != null && (Y?.isDeleted === !0 || L) && ie(H);
-  }, [
-    F?.selectedOption,
-    Y?.isDeleted,
-    a
-  ]);
-  const ce = i.isCategoryUpdateSelected != null && i.recommendedAccount != null && //if category was autofilled but subsequetly updated, isCategoryFirstTimeAutofilled will be false
-  !i.isCategoryFirstTimeAutofilled && // if R2 or R3 selected, don't show the checkbox
-  !pi(
-    i.recommendations,
-    i.account
-  ), J = i.isRetainedCategorySelected != null && i.retainedAccount != null, V = Lt.largeLabelWidth.value(T), de = Lt.smallLabelWidth.value(T), _e = h.map(
-    (y) => y.id ?? re
-  ), ue = {
-    application: "dashboard",
-    companyId: P.currentTenant?.companyId,
-    tab: "reimbursement",
-    entityId: c
-  }, xe = `dashboard_${P.currentTenant?.companyId}`, le = (y) => h.find((Te) => Te.id === y)?.name ?? y, Be = a.find(
-    (y) => y.qboId === i.account
-  ), Ae = (y) => [
-    O.expense?.qboId,
-    O.income?.qboId
-  ].includes(y), Le = d.find((y) => y.classId === i.class), me = {
-    valueContainer: (y) => ({
-      ...y,
-      padding: `2px ${o.sp3} !important`,
-      overflow: "unset"
-    }),
-    singleValue: () => ({
-      margin: 0
-    })
-  }, Me = (y) => a.filter((he) => he.qboId === y)[0]?.qboId, pe = (y) => d.filter((he) => he.classId === y)[0]?.accountingClassNumber, Ce = $e.getLocalizedStrings().spendManagement.reimbursement.reimbursementDetail.tooltip.category.replace(
-    "__based__",
-    hi(i?.recommendedAccount?.reason ?? re)
-  ), Ye = Wt(
-    C,
-    i.recommendations
-  );
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    p != null || l.includes("merchant") ? /* @__PURE__ */ t.jsx(ct, { children: /* @__PURE__ */ t.jsx(ut, { windowSize: T, children: /* @__PURE__ */ t.jsx(dt, {}) }) }) : null,
-    /* @__PURE__ */ t.jsx(
-      Se,
-      {
-        isThreadAllowed: w && c != null,
-        dashboardTabKey: ve({
-          type: "details",
-          key: `${e}.out_of_pocket.merchant`
-        }),
-        roomId: xe,
-        companyId: P.currentTenant?.companyId ?? re,
-        companyName: P.currentTenant?.companyName ?? re,
-        entityId: c,
-        dashboardOptionType: "reimbursement",
-        filterMetaData: {
-          ...ue,
-          entityType: `reimbursement.details.${Ie(
-            "merchant",
-            e,
-            "out_of_pocket"
-          )}`
-        },
-        fieldThreadTargetElement: G?.sharedRef?.contentWrapperRef,
-        children: /* @__PURE__ */ t.jsx(
-          Dr,
-          {
-            isDisabled: x != null || v ? "disabled" : void 0,
-            label: {
-              label: te.merchant,
-              width: V
-            },
-            style: {
-              width: "auto"
-            },
-            creatableSingleSelectField: {
-              name: ye(u, "merchant"),
-              placeholder: te.merchantPlaceholder,
-              defaultValue: {
-                selectedOption: i.merchant ?? re,
-                allOptions: _e
-              },
-              registerOptions: {
-                required: !0,
-                validate: (y) => !!y.selectedOption
-              }
-            },
-            isOptionRemovable: !0,
-            addIconInCreateLabel: !0,
-            getLabelForId: le
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t.jsx(Ot, {}),
-    l.includes("transactionDate") ? /* @__PURE__ */ t.jsx(ct, { children: /* @__PURE__ */ t.jsx(ut, { windowSize: T, children: /* @__PURE__ */ t.jsx(dt, {}) }) }) : null,
-    /* @__PURE__ */ t.jsx(
-      Se,
-      {
-        isThreadAllowed: w && c != null,
-        dashboardTabKey: ve({
-          type: "details",
-          key: `${e}.out_of_pocket.transactionDate`
-        }),
-        roomId: xe,
-        companyId: P.currentTenant?.companyId ?? re,
-        companyName: P.currentTenant?.companyName ?? re,
-        entityId: c,
-        dashboardOptionType: "reimbursement",
-        filterMetaData: {
-          ...ue,
-          entityType: `reimbursement.details.${Ie(
-            "transactionDate",
-            e,
-            "out_of_pocket"
-          )}`
-        },
-        fieldThreadTargetElement: G?.sharedRef?.contentWrapperRef,
-        children: /* @__PURE__ */ t.jsx(
-          gn,
-          {
-            isDisabled: x,
-            label: {
-              label: te.transactionDate,
-              width: V
-            },
-            style: {
-              paddingBottom: Lt.paddingBottom.valuePx(T),
-              width: "auto"
-            },
-            dateField: {
-              name: ye(u, "transactionDate"),
-              placeholder: te.datePlaceholder,
-              defaultValue: i?.transactionDate,
-              dateFormat: mi.visual.defaultInput,
-              autoComplete: "off",
-              maxDate: mo(),
-              registerOptions: {
-                required: !0,
-                validate: (y) => !!y
-              }
-            }
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t.jsx(Ot, {}),
-    l.includes("amount") ? /* @__PURE__ */ t.jsx(ct, { children: /* @__PURE__ */ t.jsx(ut, { windowSize: T, isTwoLined: !0, children: /* @__PURE__ */ t.jsx(dt, {}) }) }) : null,
-    /* @__PURE__ */ t.jsx(
-      Se,
-      {
-        isThreadAllowed: w && c != null,
-        dashboardTabKey: ve({
-          type: "details",
-          key: `${e}.out_of_pocket.amount`
-        }),
-        roomId: xe,
-        companyId: P.currentTenant?.companyId ?? re,
-        companyName: P.currentTenant?.companyName ?? re,
-        entityId: c,
-        dashboardOptionType: "reimbursement",
-        filterMetaData: {
-          ...ue,
-          entityType: `reimbursement.details.${Ie(
-            "amount",
-            e,
-            "out_of_pocket"
-          )}`
-        },
-        fieldThreadTargetElement: G?.sharedRef?.contentWrapperRef,
-        children: /* @__PURE__ */ t.jsx(
-          ni,
-          {
-            isDisabled: x != null || v ? "disabled" : void 0,
-            label: { label: te.amount, width: de },
-            style: { width: "auto" },
-            currencyAmountField: {
-              style: { height: o.sp6 },
-              name: `${u}.amount`,
-              defaultValue: {
-                amount: i.amount.amount,
-                currencyCode: i.amount.currencyCode,
-                currencySymbol: i.amount.currencySymbol
-              },
-              placeHolder: {
-                amount: te.addAmount,
-                name: te.addAmount
-              },
-              allCurrencies: b,
-              showAmountCurrencyError: !0
-            },
-            showAdditionalInfoLabel: !0,
-            showAdditionalLabelTooltip: !0,
-            additionalLabelTooltip: te.amountExchangeRateTooltip,
-            isAdditionalInfoLabelLoading: i.isConvertedCurrencyLoading === !0,
-            additionalInfoLabel: !cn(i.homeCurrencyDetails, i.amount) && i.amount.currencyCode !== Bn.currency.currencyCode && i.homeCurrencyDetails?.amount !== 0 ? `${fr(
-              "0,0[.]00",
-              i.homeCurrencyDetails
-            )} ${i.homeCurrencyDetails?.currencyCode}` : void 0
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t.jsx(Ot, {}),
-    l.includes("memo") ? /* @__PURE__ */ t.jsx(ct, { children: /* @__PURE__ */ t.jsx(ut, { windowSize: T, children: /* @__PURE__ */ t.jsx(dt, {}) }) }) : null,
-    /* @__PURE__ */ t.jsx(
-      Se,
-      {
-        isThreadAllowed: w && c != null,
-        dashboardTabKey: ve({
-          type: "details",
-          key: `${e}.out_of_pocket.memo`
-        }),
-        roomId: xe,
-        companyId: P.currentTenant?.companyId ?? re,
-        companyName: P.currentTenant?.companyName ?? re,
-        entityId: c,
-        dashboardOptionType: "reimbursement",
-        filterMetaData: {
-          ...ue,
-          entityType: `reimbursement.details.${Ie(
-            "memo",
-            e,
-            "out_of_pocket"
-          )}`
-        },
-        fieldThreadTargetElement: G?.sharedRef?.contentWrapperRef,
-        children: /* @__PURE__ */ t.jsx(
-          po,
-          {
-            isDisabled: x,
-            label: {
-              label: te.memo,
-              width: V
-            },
-            style: { width: "auto" },
-            text: {
-              type: "text",
-              name: ye(u, "memo"),
-              placeholder: nt(te.memo),
-              defaultValue: i.memo,
-              autoComplete: "off",
-              options: {
-                pattern: yn
-              }
-            }
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t.jsx(Ot, {}),
-    l.includes("account") ? /* @__PURE__ */ t.jsx(ct, { children: /* @__PURE__ */ t.jsx(ut, { windowSize: T, children: /* @__PURE__ */ t.jsx(dt, {}) }) }) : null,
-    /* @__PURE__ */ t.jsx(
-      Se,
-      {
-        isThreadAllowed: w && c != null,
-        dashboardTabKey: ve({
-          type: "details",
-          key: `${e}.out_of_pocket.account`
-        }),
-        roomId: xe,
-        companyId: P.currentTenant?.companyId ?? re,
-        companyName: P.currentTenant?.companyName ?? re,
-        entityId: c,
-        dashboardOptionType: "reimbursement",
-        filterMetaData: {
-          ...ue,
-          entityType: `reimbursement.details.${Ie(
-            "account",
-            e,
-            "out_of_pocket"
-          )}`
-        },
-        fieldThreadTargetElement: G?.sharedRef?.contentWrapperRef,
-        children: /* @__PURE__ */ t.jsx(
-          co,
-          {
-            label: {
-              label: te.category,
-              width: V
-            },
-            additionalLabelInfo: Y?.isDeleted === !0 && Pe(k, ye(u, "account")) ? te.deletedCategoryError : void 0,
-            groupedSingleSelectField: {
-              shouldShowChevronIcon: ce || J,
-              name: ye(u, "account"),
-              placeholder: te.categoryPlaceholder,
-              valueToId: (y) => Me(y),
-              defaultValue: {
-                selectedOption: Be?.qboId ?? Be?.accountId,
-                allOptions: Ye
-              },
-              style: {
-                width: "100%"
-              },
-              customStyleConfig: me,
-              registerOptions: {
-                required: !0,
-                validate: (y) => a.find(
-                  (he) => he.qboId === y?.selectedOption || he.accountId === y?.selectedOption
-                )?.isDeleted === !0 ? te.deletedCategoryError : !0
-              }
-            },
-            disableCurrentOption: Ae,
-            style: {
-              borderBottom: `1px solid ${B.colors.grey3}`,
-              minHeight: o.sp6,
-              boxSizing: "initial"
-            },
-            fullWidthSelect: !0,
-            isLoading: i.isRecommendationLoading,
-            recommendationCheckboxField: ce ? {
-              tooltipProps: { text: Ce },
-              label: {
-                label: i.recommendedAccount?.accountName ?? re
-              },
-              checkBoxField: {
-                name: ye(u, "isCategoryUpdateSelected"),
-                defaultChecked: !!i.isCategoryUpdateSelected
-              }
-            } : void 0,
-            retainCheckboxField: J ? {
-              label: {
-                label: i.retainedAccount?.accountName ?? re
-              },
-              checkBoxField: {
-                name: ye(u, "isRetainedCategorySelected"),
-                defaultChecked: !!i.isRetainedCategorySelected
-              }
-            } : void 0
-          },
-          ye(u, "account")
-        )
-      }
-    ),
-    l.includes("class") ? /* @__PURE__ */ t.jsx(ct, { children: /* @__PURE__ */ t.jsx(ut, { windowSize: T, children: /* @__PURE__ */ t.jsx(dt, {}) }) }) : null,
-    /* @__PURE__ */ t.jsx(
-      Se,
-      {
-        isThreadAllowed: w && c != null,
-        dashboardTabKey: ve({
-          type: "details",
-          key: `${e}.out_of_pocket.class`
-        }),
-        roomId: xe,
-        companyId: P.currentTenant?.companyId ?? re,
-        companyName: P.currentTenant?.companyName ?? re,
-        entityId: c,
-        dashboardOptionType: "reimbursement",
-        filterMetaData: {
-          ...ue,
-          entityType: `reimbursement.details.${Ie(
-            "class",
-            e,
-            "out_of_pocket"
-          )}`
-        },
-        fieldThreadTargetElement: G?.sharedRef?.contentWrapperRef,
-        style: {
-          borderRadius: `0 0 ${o.sp2} ${o.sp2}`
-        },
-        children: /* @__PURE__ */ t.jsx(
-          co,
-          {
-            isLoading: !1,
-            label: {
-              label: te.department,
-              width: V
-            },
-            additionalLabelInfo: ae?.isDeleted === !0 && Pe(k, ye(u, "class")) ? te.deletedClassError : void 0,
-            groupedSingleSelectField: {
-              shouldShowChevronIcon: !1,
-              name: ye(u, "class"),
-              placeholder: nt(te.department),
-              valueToId: (y) => pe(y),
-              defaultValue: {
-                selectedOption: Le?.classId,
-                allOptions: Ge($, [])
-              },
-              style: {
-                width: "100%"
-              },
-              customStyleConfig: me,
-              registerOptions: {
-                required: !0,
-                validate: (y) => d.find(
-                  (he) => he.classId === y?.selectedOption
-                )?.isDeleted === !0 ? te.deletedClassError : !0
-              }
-            },
-            style: {
-              borderBottom: `1px solid ${B.colors.grey3}`,
-              borderBottomLeftRadius: o.sp2,
-              borderBottomRightRadius: o.sp2
-            },
-            fullWidthSelect: !0
-          },
-          ye(u, "class")
-        )
-      }
-    )
-  ] });
-}, ct = n.span`
-  position: relative;
-`, dt = n(yo)`
-  color: ${(e) => e.theme.colors.primary};
-  width: ${o.sp3};
-  height: ${o.sp3};
-`, ut = n.div`
-  z-index: 2;
-  left: ${(e) => Lt.autoFillIconLeft.valuePx(e.windowSize)};
-  position: absolute;
-  top: ${(e) => e.isTwoLined === !0 ? o.sp5 : "22px"};
-`, Ot = n.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, tt = (e, i) => `${e}.${i}`, qe = {
-  paddingTop: new s(r[5], r[4]),
-  marginBottom: new s(r[3], r[3]),
-  labelPaddingLeft: new s(r[3], r[4]),
-  buttonWidth: new s(70, 70),
-  containerRightMargin: new s(r[3], r[8]),
-  containerLeftMargin: new s(r[3], r[6]),
-  deleteConfirmationTextMarginBottom: new s(r[2], r[0])
-}, K = $e.getLocalizedStrings().spendManagement.reimbursement.reimbursementDetail, yi = ({
-  lineData: e,
-  currencyConversionState: i,
-  recommendationFetchState: a,
-  remiStage: d,
-  lineIndex: h,
-  accountList: v,
-  classList: u,
-  merchantList: w,
-  hasFile: x,
-  defaultCurrency: l,
-  hasMultipleLineItems: C,
-  fileRequiredLineIds: $,
-  duplicateLineDetails: c,
-  remiStatus: p,
-  sectionId: b,
-  isDisabled: O,
-  isReimbursementCommentingEnabled: T,
-  isAddReimbursementDisabled: P,
-  style: G,
-  autoFields: B = [],
-  analytics: k,
-  reimbursementId: M,
-  tentativeMerchantName: ie,
-  companyMileageConfigInfo: oe,
-  uncategorizedAccounts: ae,
-  removeDuplicateReimbursementForLine: ee,
-  scrollToSection: U,
-  onDuplicateLineClick: F,
-  onRemoveReimbursement: Y,
-  clearTentativeNameForLine: H,
-  allCurrencies: L,
-  accountsHierarchyList: ce,
-  classHierarchyList: J
-}) => {
-  const V = ze(), de = St(), _e = Nt(), ue = $e.getLocalizedStrings().common.strings.empty, xe = {
-    application: "dashboard",
-    companyId: de.currentTenant?.companyId,
-    tab: "reimbursement",
-    entityId: M
-  }, le = `dashboard_${de.currentTenant?.companyId}`, { getValues: Be } = it(), [Ae, Le] = Z(!1), me = Be(
-    tt(b, "reimbursementType")
-  );
-  return /* @__PURE__ */ t.jsxs(vi, { style: G, windowSize: V, children: [
-    /* @__PURE__ */ t.jsxs(
-      xi,
-      {
-        hasFile: x,
-        windowSize: V,
-        showDeleteConfirmation: Ae,
-        children: [
-          /* @__PURE__ */ t.jsx(Ti, { windowSize: V, children: C ? `#${h + 1} ${K.reimbursement}` : K.reimbursement }),
-          Ae ? /* @__PURE__ */ t.jsxs(Si, { windowSize: V, children: [
-            /* @__PURE__ */ t.jsx($i, { windowSize: V, children: K.deleteConfirmation }),
-            /* @__PURE__ */ t.jsxs(fi, { children: [
-              /* @__PURE__ */ t.jsx(
-                Mo,
-                {
-                  label: K.buttons.cancel,
-                  onClick: () => Le(!1),
-                  style: {
-                    width: qe.buttonWidth.value(V),
-                    marginLeft: V === "small" ? o.sp0 : o.sp4,
-                    marginRight: o.sp3
-                  },
-                  size: "small",
-                  variant: "secondary",
-                  "data-testid": q(
-                    "delete-remi-button",
-                    K.buttons.cancel
-                  )
-                }
-              ),
-              /* @__PURE__ */ t.jsx(
-                Mo,
-                {
-                  label: K.buttons.remove,
-                  onClick: () => {
-                    k?.trackReimbursementDeleteReimbursementLine(
-                      e.lineId,
-                      M
-                    ), H?.(e.lineId ?? "1"), Le(!1), ee(e.lineId), Y(h);
-                  },
-                  style: { width: qe.buttonWidth.value(V) },
-                  size: "small",
-                  variant: "danger",
-                  "data-testid": q(
-                    "delete-remi-button",
-                    K.buttons.remove
-                  )
-                }
-              )
-            ] })
-          ] }) : C && (d === "draft" || p === "rejected") ? /* @__PURE__ */ t.jsx(
-            bi,
-            {
-              className: "deleteIconWrapper",
-              windowSize: V,
-              onClick: () => Le(!0),
-              "data-testid": q(
-                "delete-remi-button",
-                e.lineId
-              ),
-              children: /* @__PURE__ */ t.jsx(
-                xn,
-                {
-                  enterDelay: 600,
-                  title: K.deleteReimbursement,
-                  placement: "top-end",
-                  children: /* @__PURE__ */ t.jsx(wi, {})
-                }
-              )
-            }
-          ) : null
-        ]
-      }
-    ),
-    $.includes(e.lineId) ? /* @__PURE__ */ t.jsx(
-      bn,
-      {
-        title: K.missingReceipt,
-        description: K.missingReceiptDescription,
-        style: { marginBottom: o.sp3 }
-      }
-    ) : null,
-    /* @__PURE__ */ t.jsxs(ki, { windowSize: V, children: [
-      c?.duplicateLineId != null ? /* @__PURE__ */ t.jsxs(Ci, { children: [
-        K.thisExpense,
-        " ",
-        c.isDuplicateWithinTransaction ? /* @__PURE__ */ t.jsx(
-          _o,
-          {
-            "data-testid": q(
-              "view-duplicate-transaction-expense"
-            ),
-            onClick: () => (k?.trackReimbursementViewDuplicateExpense(
-              !0,
-              M
-            ), U(
-              c.duplicateLineId
-            )),
-            children: K.viewOriginalExpense
-          }
-        ) : /* @__PURE__ */ t.jsx(
-          _o,
-          {
-            "data-testid": q("view-duplicate-expense"),
-            onClick: () => {
-              c.duplicateTransactionId != null && c.duplicateLineId != null && (k?.trackReimbursementViewDuplicateExpense(
-                !1,
-                M
-              ), F(
-                c.duplicateTransactionId,
-                c.duplicateLineId
-              ));
-            },
-            children: K.viewOriginalExpense
-          }
-        )
-      ] }) : null,
-      /* @__PURE__ */ t.jsx(
-        Se,
-        {
-          isThreadAllowed: T && M != null,
-          dashboardTabKey: ve({
-            type: "details",
-            key: me === K.mileageKey ? `${h}.mileage.reimbursementType` : `${h}.out_of_pocket.reimbursementType`
-          }),
-          roomId: le,
-          companyId: de.currentTenant?.companyId ?? ue,
-          companyName: de.currentTenant?.companyName ?? ue,
-          entityId: M,
-          dashboardOptionType: "reimbursement",
-          filterMetaData: {
-            ...xe,
-            entityType: `reimbursement.details.${Ie(
-              "reimbursementType",
-              h,
-              me === K.mileageKey ? "mileage" : "out_of_pocket"
-            )}`
-          },
-          fieldThreadTargetElement: _e?.sharedRef?.contentWrapperRef,
-          style: {
-            borderRadius: c?.duplicateLineId != null ? "0 0 0 0" : `${o.sp2} ${o.sp2} 0 0`
-          },
-          children: /* @__PURE__ */ t.jsxs(
-            Ii,
-            {
-              isDisabled: O != null,
-              haveBorderRadius: c?.duplicateLineId == null,
-              children: [
-                /* @__PURE__ */ t.jsx(
-                  Ro,
-                  {
-                    isDisabled: O != null || P ? "disabled" : void 0,
-                    isContainerClickable: !0,
-                    label: {
-                      label: K.outOfPocket
-                    },
-                    style: {
-                      padding: `${o.sp3} ${o.sp0}`,
-                      paddingLeft: qe.labelPaddingLeft.value(V),
-                      borderTopLeftRadius: "inherit"
-                    },
-                    showOutline: !(T && M != null),
-                    radioField: {
-                      name: tt(b, "reimbursementType"),
-                      id: `${tt(b, "reimbursementType")}.${K.outOfPocketKey}`,
-                      value: K.outOfPocketKey
-                    }
-                  }
-                ),
-                /* @__PURE__ */ t.jsx(ji, {}),
-                /* @__PURE__ */ t.jsx(
-                  Ro,
-                  {
-                    isDisabled: O != null || P ? "disabled" : void 0,
-                    isContainerClickable: !0,
-                    label: {
-                      label: K.mileage
-                    },
-                    style: {
-                      padding: `${o.sp3} ${o.sp0}`,
-                      paddingLeft: qe.labelPaddingLeft.value(V),
-                      borderTopRightRadius: "inherit"
-                    },
-                    showOutline: !(T && M != null),
-                    radioField: {
-                      name: tt(b, "reimbursementType"),
-                      id: `${tt(b, "reimbursementType")}.${K.mileageKey}`,
-                      value: K.mileageKey
-                    }
-                  }
-                )
-              ]
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ t.jsx(Oi, {}),
-      me === K.outOfPocketKey ? /* @__PURE__ */ t.jsx(
-        gi,
-        {
-          lineIndex: h,
-          reimbursementId: M,
-          uncategorizedAccounts: ae,
-          isReimbursementCommentingEnabled: T,
-          isDisabled: O,
-          outOfPocket: {
-            transactionDate: e.outOfPocket.transactionDate != null ? rt(
-              e.outOfPocket.transactionDate.toDateString()
-            ) : void 0,
-            account: e.outOfPocket.account.selectedOption,
-            isConvertedCurrencyLoading: i?.fetchState === "In-Progress",
-            isRecommendationLoading: a === "In-Progress",
-            homeCurrencyDetails: e.homeCurrencyConversions,
-            class: e.outOfPocket.class.selectedOption,
-            amount: {
-              amount: e.outOfPocket.amount?.amount ?? 0,
-              currencyCode: e.outOfPocket.amount?.currencyCode ?? "USD",
-              currencySymbol: e.outOfPocket.amount?.currencySymbol ?? "$"
-            },
-            memo: e.outOfPocket.memo,
-            merchant: e.outOfPocket.merchant.selectedOption,
-            recommendations: e.outOfPocket.recommendations,
-            recommendedAccount: e.outOfPocket.recommendedAccount,
-            //account to show in update to checkbox
-            isCategoryUpdateSelected: e.outOfPocket.isCategoryUpdateSelected,
-            //update to checkbox is ticked
-            isCategoryFirstTimeAutofilled: e.outOfPocket.isCategoryFirstTimeAutofilled,
-            retainedAccount: e.outOfPocket.retainedAccount,
-            //account to show in retain checkbox
-            isRetainedCategorySelected: e.outOfPocket.isRetainedCategorySelected
-            //retain checkbox is selected
-          },
-          sectionId: tt(b, "outOfPocket"),
-          accountList: v,
-          classList: u,
-          autoFields: B,
-          merchantList: w,
-          tentativeMerchantName: ie,
-          allCurrencies: L,
-          isAddReimbursementDisabled: P,
-          accountsHierarchyList: ce,
-          classHierarchyList: J
-        }
-      ) : /* @__PURE__ */ t.jsx(
-        Qr,
-        {
-          lineIndex: h,
-          reimbursementId: M,
-          isReimbursementCommentingEnabled: T,
-          isDisabled: O,
-          mileage: {
-            transactionDate: e.mileage.transactionDate != null ? rt(e.mileage.transactionDate.toDateString()) : void 0,
-            class: e.mileage.class.selectedOption,
-            distanceInMiles: e.mileage.distanceInMiles,
-            amount: {
-              amount: e.mileage.amount?.amount ?? 0,
-              currencyCode: e.mileage.amount?.currencyCode ?? "USD",
-              currencySymbol: e.mileage.amount?.currencySymbol ?? "$"
-            },
-            memo: e.mileage.memo
-          },
-          classList: u,
-          sectionId: tt(b, "mileage"),
-          companyMileageConfigInfo: oe,
-          defaultCurrency: l,
-          isAddReimbursementDisabled: P,
-          classHierarchyList: J
-        }
-      )
-    ] })
-  ] });
-}, fi = n.div``, xi = n.div`
-  //when file is present and it's a small window, we don't have to show the title and delete icon. Delete icon will be displayed inside the invoice title, next to replace
-  //https://www.figma.com/file/ERKhHKvXKZSfIUruWfHqwU/New-Reimbursement-Mobile-Ver-1.0?type=design&node-id=419%3A6356&mode=design&t=upxphJ6HQRaue6wK-1
-  display: ${(e) => e.hasFile && e.windowSize === "small" ? "none" : "flex"};
-  justify-content: ${(e) => e.windowSize === "small" ? e.showDeleteConfirmation ? "center" : "flex-end" : "space-between"};
-  margin-bottom: ${o.sp3};
-  align-items: center;
-`, bi = n.div`
-  width: ${o.sp3};
-  height: ${o.sp3};
-  cursor: pointer;
-  display: none;
-  color: ${(e) => e.windowSize === "small" ? I.important : e.theme.colors.hero};
-  &:hover {
-    color: ${I.important};
-  }
-`, _o = n.span`
-  border-bottom: 1px solid currentColor;
-  cursor: pointer;
-`, wi = n(xr)`
-  width: ${o.sp3};
-  height: ${o.sp3};
-  cursor: pointer;
-`, $i = n.div`
-  margin-bottom: ${(e) => qe.deleteConfirmationTextMarginBottom.valuePx(e.windowSize)};
-`, Si = n(fo)`
-  color: ${(e) => e.theme.colors.hero};
-  display: flex;
-  align-items: center;
-  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
-`, vi = n.div`
-  display: flex;
-  flex-direction: column;
-  padding-top: ${(e) => qe.paddingTop.valuePx(e.windowSize)};
-  margin-right: ${(e) => qe.containerRightMargin.valuePx(e.windowSize)};
-  margin-left: ${(e) => qe.containerLeftMargin.valuePx(e.windowSize)};
-  .deleteIconWrapper {
-    ${(e) => e.windowSize === "small" && `
-    display: block;
-  `}
-  }
-  &:hover {
-    .deleteIconWrapper {
-      display: block;
-    }
-  }
-`, Ci = n(br)`
-  padding: ${o.sp2} ${o.sp0} ${o.sp2} ${o.sp4};
-  background-color: ${I.alertLight};
-  color: ${I.brandColorGoldDark};
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-`, Ti = n(Et)`
-  color: ${(e) => e.theme.colors.primary};
-  display: ${(e) => e.windowSize === "small" ? "none" : "unset"};
-`, ki = n.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${o.sp2};
-  margin-bottom: ${(e) => qe.marginBottom.valuePx(e.windowSize)};
-`, ji = n.div`
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-width: 1px;
-  max-width: 1px;
-`, Ii = n.div`
-  display: flex;
-  flex-direction: row;
-  border-top-left-radius: ${(e) => e.haveBorderRadius ? "inherit" : "unset"};
-  border-top-right-radius: ${(e) => e.haveBorderRadius ? "inherit" : "unset"};
-`, Oi = n.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, Pi = (e, i) => `${e}.${i}`, mt = {
-  labelWidth: new s(120, 160, 160),
-  paddingBottom: new s(r[3], r[3]),
-  paddingTop: new s(12, r[3]),
-  marginBottom: new s(12, r[3]),
-  containerRightMargin: new s(r[3], r[8]),
-  containerLeftMargin: new s(r[3], r[6])
-}, An = ({
-  isReimbursementCommentingEnabled: e,
-  sectionId: i,
-  isDisabled: a,
-  reportTitle: d,
-  reimbursementId: h,
-  style: v
-}) => {
-  const u = ze(), w = St(), x = Nt(), l = `dashboard_${w.currentTenant?.companyId}`, C = $e.getLocalizedStrings(), $ = C.spendManagement.reimbursement.reimbursementDetail, c = C.common.strings.empty, p = mt.labelWidth.value(u);
-  return /* @__PURE__ */ t.jsxs(Bi, { style: v, windowSize: u, children: [
-    /* @__PURE__ */ t.jsx(Li, { windowSize: u, children: $.whatFor }),
-    /* @__PURE__ */ t.jsx(Ai, { children: /* @__PURE__ */ t.jsx(
-      Se,
-      {
-        isThreadAllowed: e && h != null,
-        dashboardTabKey: ve({
-          type: "details",
-          key: "whatFor"
-        }),
-        roomId: l,
-        companyId: w.currentTenant?.companyId ?? c,
-        companyName: w.currentTenant?.companyName ?? c,
-        entityId: h,
-        dashboardOptionType: "reimbursement",
-        filterMetaData: {
-          application: "dashboard",
-          companyId: w.currentTenant?.companyId,
-          tab: "reimbursement",
-          entityId: h,
-          entityType: "reimbursement.details.whatFor"
-        },
-        fieldThreadTargetElement: x?.sharedRef?.contentWrapperRef,
-        style: {
-          borderRadius: o.sp2
-        },
-        children: /* @__PURE__ */ t.jsx(
-          po,
-          {
-            isDisabled: a,
-            label: {
-              label: $.reportTitle,
-              width: p
-            },
-            text: {
-              type: "text",
-              name: Pi(i, "reportTitle"),
-              placeholder: $.lunchWithClient,
-              defaultValue: d,
-              autoComplete: "off",
-              options: {
-                required: !0,
-                validate: (b) => !!b
-              }
-            },
-            style: { width: "auto", borderRadius: o.sp2 }
-          }
-        )
-      }
-    ) })
-  ] });
-}, Bi = n.div`
-  display: flex;
-  flex-direction: column;
-  padding-top: ${(e) => mt.paddingTop.valuePx(e.windowSize)};
-  padding-bottom: ${(e) => mt.paddingBottom.valuePx(e.windowSize)};
-  margin-right: ${(e) => mt.containerRightMargin.valuePx(e.windowSize)};
-  margin-left: ${(e) => mt.containerLeftMargin.valuePx(e.windowSize)};
-`, Ai = n.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${o.sp2};
-`, Li = n(Et)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-bottom: ${(e) => mt.marginBottom.valuePx(e.windowSize)};
-`, N = {
-  largeLabelWidth: new s(120, 120, 220),
-  marginTop: new s(28, 8),
-  paymentToMarginTop: new s(0, r[4]),
-  marginBottom: new s(r[5], r[4]),
-  paymentToMarginBottom: new s(12, r[3]),
-  totalMarginBottom: new s(r[3], r[3]),
-  reimbursementSectionLeftMargin: new s(r[3], r[6]),
-  reimbursementSectionRightMargin: new s(r[3], r[8]),
-  invoiceSectionLeftMargin: new s(r[3], r[8]),
-  invoiceSectionRightMargin: new s(r[3], r[6]),
-  rightSectionWidth: new s(100, 58),
-  firstOrLastItemHeight: new s(390, 760),
-  itemHeight: new s(390, 459),
-  duplicateBannerWrapperMarginTop: new s(r[5], r[3]),
-  duplicateBannerWrapperMarginRight: new s(r[3], r[8]),
-  duplicateBannerWrapperMarginBottom: new s(r[5], r[3]),
-  duplicateBannerWrapperMarginLeft: new s(r[3], r[6])
-}, Mi = {
-  total: new ho("largeMedium", "h6Medium")
-}, {
-  spendManagement: {
-    reimbursement: { reimbursementDetail: D },
-    billPay: {
-      vendorCreation: { achDetails: Pt }
-    }
-  },
-  common: {
-    currency: { currencyCode: Bt }
-  }
-} = $e.getLocalizedStrings(), Ln = (e) => {
-  let i = 0, a = Bt;
-  if ("recommendationFetchState" in e && e.recommendationFetchState != null) {
-    const d = e;
-    i = d.outOfPocket.amount ?? 0, a = d.outOfPocket.currencyCode ?? Bt;
-  } else {
-    const d = e;
-    i = d.outOfPocket.amount?.amount ?? 0, a = d.outOfPocket.amount?.currencyCode ?? Bt;
-  }
-  return (e.homeCurrencyConversions?.currencyCode ?? Bt) !== a && (i = e.homeCurrencyConversions?.amount ?? 0), i;
-}, Ri = ({
-  remiUploadStatus: e,
-  progressSectionObj: i,
-  reimbursementId: a,
-  createDate: d,
-  scheduleDate: h,
-  paymentDate: v,
-  hasDuplicateLine: u,
-  approvedDate: w,
-  isFirstOrLastListItem: x,
-  index: l,
-  reimbursementSectionRef: C,
-  showSkipAutoFill: $,
-  lineData: c,
-  currencyConversionState: p,
-  authParams: b,
-  uploadInvoiceEndPoint: O,
-  accountList: T,
-  classList: P,
-  merchantList: G,
-  remiStage: B,
-  autoFieldsByLineId: k,
-  isReimbursementCommentingEnabled: M,
-  isAutoFieldsExist: ie,
-  totalAmount: oe,
-  showTotalAmountLoader: ae,
-  totalNumberOfLines: ee,
-  defaultCurrency: U,
-  bankAccounts: F,
-  fileRequiredLineIds: Y,
-  isAddReimbursementDisabled: H,
-  duplicateLineByLineId: L,
-  remiStatus: ce,
-  file: J,
-  uncategorizedAccounts: V,
-  reportTitle: de,
-  recommendationFetchState: _e,
-  tentativeMerchantName: ue,
-  paymentTo: xe,
-  analytics: le,
-  companyMileageConfigInfo: Be,
-  loggedInUserDepartmentId: Ae,
-  isSignedInUserReimbursementCreator: Le,
-  setShowBankAccountPage: me,
-  setRefByLineId: Me,
-  setCurrentLineIdForUpload: pe,
-  onDuplicateLineClick: Ce,
-  setUploadedReceiptPayload: Ye,
-  removeDuplicateReimbursementForLine: y,
-  onReceiptsUpload: Te,
-  scrollToSection: he,
-  onRemoveReimbursement: Ue,
-  onAddReimbursement: Re,
-  clearTentativeNameForLine: Je,
-  onReplaceClick: Fe,
-  onDeleteBankAccount: He,
-  updateInvoiceUploadFetchState: Ke,
-  removeFileFromLine: Ze,
-  allCurrencies: Qe,
-  accountsHierarchyList: ne,
-  classHierarchyList: at
-}) => {
-  const {
-    formState: { errors: pt }
-  } = it(), Xe = bt(null);
-  fe(() => (Me((R) => ({
-    ...R,
-    [`L${c.lineId}`]: Xe.current
-  })), () => {
-    Me((R) => ({
-      ...R,
-      [`L${c.lineId}`]: null
-    }));
-  }), [c.lineId, Me]);
-  const _ = ze(), ht = B === "draft" ? D.newReimbursementTitle : D.editReimbursementTitle, W = N.largeLabelWidth.value(_), se = (R) => R.outOfPocket.account.selectedOption == null && (R.outOfPocket.amount == null || R.outOfPocket.amount.amount == 0) && (R.outOfPocket.class.selectedOption == null || R.outOfPocket.class.selectedOption === Ae) && (R.outOfPocket.memo === "" || R.outOfPocket.memo == null) && R.outOfPocket.merchant.selectedOption == null && R.outOfPocket.transactionDate == null, Ct = F.map((R) => R.bankAccountId), ke = c.reimbursementType === D.outOfPocketKey && Ln(c) >= 75 && J == null;
-  return /* @__PURE__ */ t.jsxs(ea, { ref: C, windowSize: _, children: [
-    /* @__PURE__ */ t.jsx(
-      ta,
-      {
-        ref: (R) => {
-          R != null && (Xe.current = R);
-        },
-        windowSize: _,
-        bottomSeperator: ee !== 1,
-        showSkipAutoFill: $,
-        isFirstItem: l === 0,
-        children: /* @__PURE__ */ t.jsx(
-          On,
-          {
-            customError: ke ? D.requireReceipt : void 0,
-            analytics: le,
-            showAutofill: !1,
-            uploadInvoiceEndPoint: O,
-            authParams: b,
-            entityId: H ? "" : void 0,
-            file: J,
-            style: {
-              width: "auto",
-              padding: 0,
-              height: x ? N.firstOrLastItemHeight.valuePx(_) : N.itemHeight.valuePx(_),
-              margin: _ === "small" ? o.sp0 : void 0
-            },
-            updateInvoiceUploadFetchState: Ke,
-            onInvoiceUpload: (R) => {
-              c.reimbursementType === D.outOfPocketKey && !se(c) ? (pe(Number(c.lineId)), Ye(
-                R
-              ), Fe?.()) : Te(
-                R,
-                Number(c.lineId),
-                !0
-              );
-            },
-            dropFilePlaceholder: {
-              upload: D.dropReceipt.upload,
-              receipt: D.dropReceipt.receipt
-            },
-            showInfoText: !1,
-            showTitlebar: !0,
-            showTitlebarIcon: !H,
-            pdfTitle: ee > 1 ? `#${l + 1} Receipt` : "Receipt",
-            onDeleteClick: () => {
-              Ke?.("In-Progress"), setTimeout(() => Ze?.(Number(c.lineId)));
-            },
-            onReplaceClick: () => {
-              pe(Number(c.lineId)), Fe?.();
-            },
-            allowMultiFiles: ee === l + 1,
-            type: "reimbursement"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t.jsxs(Xi, { windowSize: _, children: [
-      l === 0 && _ !== "small" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-        /* @__PURE__ */ t.jsx(qi, { children: ht }),
-        /* @__PURE__ */ t.jsx(oa, { children: /* @__PURE__ */ t.jsx(
-          wr,
-          {
-            progressSectionObj: i,
-            createDate: d,
-            paymentDate: v,
-            scheduleDate: h,
-            approvedDate: w,
-            isBillUploaded: a != null ? !0 : e === "Completed"
-          }
-        ) }),
-        ie && /* @__PURE__ */ t.jsxs(Ni, { children: [
-          /* @__PURE__ */ t.jsx(zi, {}),
-          /* @__PURE__ */ t.jsx(Di, { children: D.banner })
-        ] }),
-        u && /* @__PURE__ */ t.jsxs(Wi, { size: _, children: [
-          /* @__PURE__ */ t.jsx(Fi, {}),
-          /* @__PURE__ */ t.jsxs(Vi, { children: [
-            /* @__PURE__ */ t.jsx(Ei, { children: D.thereSeems }),
-            /* @__PURE__ */ t.jsx(_i, { children: D.pleaseFind })
-          ] })
-        ] }),
-        /* @__PURE__ */ t.jsx(
-          An,
-          {
-            isReimbursementCommentingEnabled: M,
-            sectionId: Ft,
-            reportTitle: de,
-            reimbursementId: a
-          }
-        )
-      ] }) : null,
-      /* @__PURE__ */ t.jsx(
-        yi,
-        {
-          analytics: le,
-          reimbursementId: a,
-          onDuplicateLineClick: Ce,
-          uncategorizedAccounts: V,
-          sectionId: `${$o}.${l}`,
-          scrollToSection: he,
-          lineIndex: l,
-          lineData: c,
-          accountList: T,
-          classList: P,
-          merchantList: G,
-          autoFields: c.lineId != null ? k[c.lineId] : [],
-          currencyConversionState: p,
-          recommendationFetchState: _e,
-          onRemoveReimbursement: Ue,
-          hasMultipleLineItems: ee > 1,
-          clearTentativeNameForLine: Je,
-          tentativeMerchantName: ue,
-          hasFile: J != null,
-          companyMileageConfigInfo: Be,
-          defaultCurrency: U,
-          remiStage: B,
-          remiStatus: ce,
-          fileRequiredLineIds: Y,
-          allCurrencies: Qe,
-          isReimbursementCommentingEnabled: M,
-          isAddReimbursementDisabled: H,
-          accountsHierarchyList: ne,
-          classHierarchyList: at,
-          duplicateLineDetails: L[c.lineId],
-          removeDuplicateReimbursementForLine: y
-        }
-      ),
-      ee !== 1 && ee === l + 1 && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-        /* @__PURE__ */ t.jsxs(Hi, { windowSize: _, children: [
-          /* @__PURE__ */ t.jsx(Ki, { children: D.total }),
-          ae ? /* @__PURE__ */ t.jsx(Gi, { windowSize: _, children: /* @__PURE__ */ t.jsx(Yi, { children: /* @__PURE__ */ t.jsx(
-            vt,
-            {
-              size: "Standard",
-              start: !0,
-              style: { display: "flex" }
-            }
-          ) }) }) : /* @__PURE__ */ t.jsx(
-            wn,
-            {
-              amount: pn(oe, "USD", "$"),
-              integerStyles: zt.h6Regular.cssObject,
-              decimalStyles: zt.standardRegular.cssObject
-            }
-          )
-        ] }),
-        /* @__PURE__ */ t.jsxs(
-          Zi,
-          {
-            windowSize: _,
-            onClick: () => {
-              H === !1 && Re();
-            },
-            isDisabled: H,
-            "data-testid": q("add-reimbursement-row"),
-            children: [
-              /* @__PURE__ */ t.jsx(qo, {}),
-              /* @__PURE__ */ t.jsx(Do, { children: D.addReimbursement })
-            ]
-          }
-        ),
-        Le ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(Ui, { windowSize: _, children: D.receivePaymentTo }),
-          /* @__PURE__ */ t.jsx(
-            Ji,
-            {
-              windowSize: _,
-              shouldDisplay: F.length > 0,
-              children: /* @__PURE__ */ t.jsx(
-                $n,
-                {
-                  label: {
-                    label: D.yourBankAccount,
-                    width: W
-                  },
-                  style: {
-                    width: "auto"
-                  },
-                  singleSelectField: {
-                    singleSelect: {
-                      name: wt,
-                      placeholder: nt(
-                        D.yourBankAccount
-                      ),
-                      showValueEyeIcon: !H,
-                      menuPlacement: "top",
-                      maxMenuHeight: 308,
-                      showEyeIconOnSelect: !1,
-                      onDelete: He,
-                      getTooltipInfo: (R) => Mn(F, R),
-                      onClickCreateBankAccount: () => me(!0),
-                      getLabelForId: (R) => zn(F, R),
-                      isOptionRemovable: !1,
-                      showDeleteIcon: !0,
-                      showAddBankAccountOption: !0,
-                      isDisabled: H ? "readonly" : void 0,
-                      showTickMark: !1,
-                      alwaysShowEyeTooltip: !0
-                    },
-                    defaultValue: {
-                      selectedOption: xe,
-                      allOptions: Ct
-                    },
-                    registerOptions: {
-                      required: !0,
-                      validate: (R) => !!R.selectedOption
-                    }
-                  },
-                  isFunctional: !0
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ t.jsxs(
-            Qi,
-            {
-              shouldDisplay: F.length === 0,
-              windowSize: _,
-              hasError: Pe(pt, wt),
-              onClick: () => {
-                H === !1 && me(!0);
-              },
-              isDisabled: H,
-              "data-testid": q(
-                "remi-add-bank-account-container"
-              ),
-              children: [
-                /* @__PURE__ */ t.jsx(qo, {}),
-                /* @__PURE__ */ t.jsx(Do, { children: D.addBankAccount })
-              ]
-            }
-          )
-        ] }) : null
-      ] })
-    ] })
-  ] });
-}, Mn = (e, i) => {
-  const a = Rn(e, i);
-  return a == null ? `${Pt.bankRoutingNumber} ${D.emptyValue}
-  ${Pt.bankAccountNumber} ${D.emptyValue}` : `${Pt.bankRoutingNumber} ${a.bankRoutingNumberAch ?? D.emptyValue}, ${a.bankName ?? D.emptyValue}
-  ${Pt.bankAccountNumber} ${a.bankAccountNumber ?? D.emptyValue}`;
-}, Rn = (e, i) => e.find((a) => a.bankAccountId === i), zn = (e, i) => {
-  const a = Rn(e, i);
-  return a == null ? D.selectBankAccount : a.bankAccountName ? a.bankAccountName : a.maskedAccountNumber ? a.maskedAccountNumber : a.bankName && a.bankAccountNumber ? `${a.bankName} ${D.accountNameConnector}${a.bankAccountNumber.slice(
-    a.bankAccountNumber.length - 4
-  )}` : D.selectBankAccount;
-}, zi = n(yo)`
-  color: ${(e) => e.theme.colors.primary};
-  width: ${o.sp3};
-  height: ${o.sp3};
-`, Fi = n(Sr)`
-  width: ${o.sp4};
-  height: ${o.sp4};
-  color: ${I.brandColorGoldDark};
-`, Ni = n.div`
-  display: flex;
-  gap: ${o.sp2};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  padding: ${o.sp3};
-  border-radius: ${o.sp2};
-  align-items: center;
-  margin: 0 ${o.sp8} 0 ${o.sp6};
-`, Wi = n.div`
-  display: flex;
-  gap: ${o.sp2};
-  padding: ${o.sp3};
-  border-radius: ${o.sp2};
-  align-items: start;
-  margin-top: ${(e) => N.duplicateBannerWrapperMarginTop.valuePx(e.size)};
-  margin-right: ${(e) => N.duplicateBannerWrapperMarginRight.valuePx(e.size)};
-  margin-bottom: ${(e) => N.duplicateBannerWrapperMarginBottom.valuePx(e.size)};
-  margin-left: ${(e) => N.duplicateBannerWrapperMarginLeft.valuePx(e.size)};
-  background-color: ${I.alertLight};
-  border: 1px solid ${(e) => e.theme.colors.brandColorGoldDark};
-`, Ei = n(Vt)`
-  color: ${(e) => e.theme.colors.brandColorGoldDark};
-`, Vi = n.div`
-  width: 100%;
-`, _i = n(fo)`
-  color: ${(e) => e.theme.colors.brandColorGoldDark};
-`, Di = n.span`
-  color: ${(e) => e.theme.colors.hero};
-`, qi = n($r)`
-  letter-spacing: -0.02em;
-  color: ${(e) => e.theme.colors.primary};
-  margin: ${o.sp3} ${o.sp8} ${o.sp3} ${o.sp6};
-`, Ui = n(Et)`
-  letter-spacing: -0.02em;
-  color: ${(e) => e.theme.colors.primary};
-  margin-top: ${(e) => N.paymentToMarginTop.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => N.paymentToMarginBottom.valuePx(e.windowSize)};
-  margin-left: ${(e) => N.reimbursementSectionLeftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => N.reimbursementSectionRightMargin.valuePx(e.windowSize)};
-`, Hi = n.div`
-  padding: ${o.sp3};
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: ${(e) => e.theme.colors.grey3};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  border-radius: ${o.sp2};
-  color: ${(e) => e.theme.colors.hero};
-  margin-top: ${(e) => N.totalMarginBottom.valuePx(e.windowSize)};
-  margin-left: ${(e) => N.reimbursementSectionLeftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => N.reimbursementSectionRightMargin.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => N.totalMarginBottom.valuePx(e.windowSize)};
-  justify-content: space-between;
-`, Ki = n(Sn)`
-  display: flex;
-  width: 176px;
-  color: ${(e) => e.theme.colors.primary};
-`, Gi = n(vn)`
-  display: flex;
-  width: calc(100% - 176px);
-  justify-content: flex-end;
-  color: ${(e) => e.theme.colors.primary};
-  ${(e) => `${Mi.total.style(e.windowSize)}`};
-`, Yi = n.div`
-  padding-right: ${o.sp3};
-  height: 30px;
-  display: flex;
-  justify-content: flex-end;
-`, Ji = n.div`
-  margin-left: ${(e) => N.reimbursementSectionLeftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => N.reimbursementSectionRightMargin.valuePx(e.windowSize)};
-  margin-bottom: ${o.sp3};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  border-radius: ${o.sp2};
-  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
-  display: ${(e) => e.shouldDisplay ? "unset" : "none"};
-`, Zi = n.div`
-  padding: ${o.sp3};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid
-    ${(e) => e.hasError === !0 ? I.important : e.theme.colors.hero};
-  border-radius: ${o.sp2};
-  color: ${(e) => e.hasError === !0 ? I.important : e.theme.colors.hero};
-  cursor: ${(e) => e.isDisabled ? "default" : "pointer"};
-  &:hover {
-    color: ${(e) => e.isDisabled ? e.theme.colors.hero : e.hasError === !0 ? I.important : e.theme.colors.primary};
-    border: 1px solid
-      ${(e) => e.isDisabled ? e.theme.colors.grey3 : e.hasError === !0 ? I.important : e.theme.colors.primary};
-  }
-  margin-top: ${(e) => N.totalMarginBottom.valuePx(e.windowSize)};
-  margin-left: ${(e) => N.reimbursementSectionLeftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => N.reimbursementSectionRightMargin.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => N.marginBottom.valuePx(e.windowSize)};
-`, Qi = n.div`
-  padding: ${o.sp3};
-  display: ${(e) => e.shouldDisplay ? "flex" : "none"};
-  align-items: center;
-  justify-content: center;
-  border: 1px solid
-    ${(e) => e.hasError === !0 ? I.important : e.theme.colors.hero};
-  border-radius: ${o.sp2};
-  color: ${(e) => e.hasError === !0 ? I.important : e.theme.colors.hero};
-  cursor: pointer;
-  &:hover {
-    color: ${(e) => e.isDisabled ? e.theme.colors.hero : e.hasError === !0 ? I.important : e.theme.colors.primary};
-    border: 1px solid
-      ${(e) => e.isDisabled ? e.theme.colors.grey3 : e.hasError === !0 ? I.important : e.theme.colors.primary};
-  }
-  margin-left: ${(e) => N.reimbursementSectionLeftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => N.reimbursementSectionRightMargin.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => N.marginBottom.valuePx(e.windowSize)};
-`, Do = n(Vt)`
-  color: inherit;
-`, qo = n(Cn)`
-  margin-right: ${o.sp2};
-  width: ${o.sp3};
-  height: ${o.sp3};
-`, Xi = n.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => N.rightSectionWidth.valuePercentage(e.windowSize)};
-`, ea = n.div`
-  display: flex;
-  width: 100%;
-  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
-`, ta = n.div`
-  height: 100%;
-  background: ${(e) => e.theme.colors.grey3};
-  border-radius: ${o.sp2};
-  width: ${(e) => e.windowSize === "small" ? "auto" : "42%"};
-  margin-left: ${(e) => N.invoiceSectionLeftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => N.invoiceSectionRightMargin.valuePx(e.windowSize)};
-  visibility: ${(e) => e.showSkipAutoFill ? "hidden" : "unset"};
-  margin-bottom: ${(e) => e.bottomSeperator === !0 && e.windowSize !== "small" ? e.isFirstItem ? "102px" : o.sp10 : 0};
-  margin-top: ${(e) => N.marginTop.valuePx(e.windowSize)};
-`, oa = n.div`
-  padding: ${o.sp2} ${o.sp8} ${o.sp0} ${o.sp6};
-`, na = {
-  total: new ho("largeMedium", "h6Medium")
-}, Q = {
-  largeLabelWidth: new s(120, 120, 220),
-  marginBottom: new s(r[5], r[4]),
-  addBankAccountMarginBottom: new s(r[5], r[5]),
-  marginTop: new s(r[0], 78),
-  paymentToMarginTop: new s(0, r[4]),
-  totalMarginBottom: new s(r[3], r[3]),
-  rightMargin: new s(r[3], r[8]),
-  leftMargin: new s(r[3], r[6]),
-  paymentToMarginBottom: new s(12, r[3])
-}, ot = $e.getLocalizedStrings().spendManagement.reimbursement.reimbursementDetail, ra = ({
-  remiDetails: e,
-  isUserAdmin: i,
-  authParams: a,
-  uploadInvoiceEndPoint: d,
-  showSkipAutoFill: h,
-  isReimbursementCommentingEnabled: v,
-  isAutoFieldsExist: u,
-  totalAmount: w,
-  defaultCurrency: x,
-  hasDuplicateLine: l,
-  bankAccounts: C,
-  fileRequiredLineIds: $,
-  companyMileageConfigInfo: c,
-  analytics: p,
-  reimbursementId: b,
-  currencyConversionStatus: O,
-  setShowSkipAutoFill: T,
-  setShowBankAccountPage: P,
-  removeDuplicateReimbursementForLine: G,
-  onReceiptsUpload: B,
-  setCurrentLineIdForUpload: k,
-  onDuplicateLineClick: M,
-  setUploadedReceiptPayload: ie,
-  removeFileFromLine: oe,
-  onReplaceClick: ae,
-  updateInvoiceUploadFetchState: ee,
-  clearTentativeNameForLine: U,
-  onDeleteBankAccount: F,
-  uncategorizedAccounts: Y,
-  isSignedInUserReimbursementCreator: H,
-  duplicateLineByLineId: L,
-  showTotalAmountLoader: ce,
-  scrollContainerRef: J
-}) => {
-  const {
-    control: V,
-    formState: { errors: de }
-  } = it(), { fields: _e, append: ue, remove: xe } = sr({
-    name: $o,
-    control: V
-  }), le = _e, Be = bt(null), Ae = (W) => {
-    setTimeout(() => {
-      xe(W);
-    });
-  }, { tentativeMerchantNameByLineId: Le, remiStage: me, remiStatus: Me } = e, pe = !H || me === "pending_approval" && Me !== "rejected" && i || me === "pending_approval" && Me === "rejected", Ce = pe ? e.paymentToBankAccountDetail != null ? [e.paymentToBankAccountDetail] : [] : C, Ye = Ce.map((W) => W.bankAccountId), y = ze(), Te = Q.largeLabelWidth.value(y), he = e.whatForSection.reportTitle, Ue = e.accountList.accounts, Re = e.accountsHierarchyList, Je = e.classHierarchyList, Fe = e.classList.classes, He = e.merchantList.merchants, Ke = e.addRemiAutoFieldsByLineId, Ze = Math.max(
-    ...Object.keys(
-      e.editRemiInitialDetails?.lineDetailSection ?? {}
-    ).map((W) => Number(W)),
-    0
-  ), Qe = () => {
-    const W = le[le.length - 1], se = Fn(
-      le.length,
-      Number(W.lineId) > Ze ? String(Number(W.lineId) + 1) : String(Ze + 1),
-      Re,
-      Je,
-      He,
-      x,
-      e.allCurrencies,
-      e.loggedInUserDepartmentId
-    );
-    setTimeout(() => {
-      ue(se, { shouldFocus: !1 });
-    }), k(Number(se.lineId)), T(!0), setTimeout(
-      () => No(
-        Be.current,
-        J?.current
-      ),
-      50
-    );
-  }, [ne, at] = Z({}), pt = mn(
-    (W) => {
-      const se = ne[`L${W}`];
-      se != null && No(se, J?.current);
-    },
-    [ne, J]
-  ), Xe = e.reimbursementInfo?.billStatus.code == "approved" && e.reimbursementInfo?.billPaymentStatus.code ? e.reimbursementInfo?.billPaymentStatus : e.reimbursementInfo?.billStatus, _ = e.reimbursementInfo?.paymentDate != null ? rt(
-    hn(
-      e.reimbursementInfo.paymentDate.toDate(),
-      [0, 6],
-      e.achSameDayMaxDays
-    ).toDateString()
-  ) : void 0, ht = e.reimbursementInfo?.expectedDepositDate ?? _;
-  return /* @__PURE__ */ t.jsxs(sa, { windowSize: y, showSkipAutoFill: h, children: [
-    le.map((W, se) => /* @__PURE__ */ t.jsx(
-      Ri,
-      {
-        removeDuplicateReimbursementForLine: G,
-        onDuplicateLineClick: M,
-        scrollToSection: pt,
-        setRefByLineId: at,
-        duplicateLineByLineId: L,
-        reimbursementId: b,
-        remiUploadStatus: e.uploadStatus,
-        uncategorizedAccounts: Y,
-        progressSectionObj: Xe,
-        createDate: e.createTime,
-        paymentDate: ht,
-        scheduleDate: e.reimbursementInfo?.paymentDate,
-        approvedDate: e.latestApprovedDate,
-        isFirstOrLastListItem: le.length - 1 === se || se === 0,
-        index: se,
-        reimbursementSectionRef: Be,
-        remiStage: me,
-        remiStatus: Me,
-        authParams: a,
-        file: W.file,
-        uploadInvoiceEndPoint: d,
-        showSkipAutoFill: h,
-        lineData: W,
-        currencyConversionState: O[W.lineId],
-        recommendationFetchState: e.lineDetailSection[W.lineId]?.recommendationFetchState,
-        setCurrentLineIdForUpload: k,
-        setUploadedReceiptPayload: ie,
-        onReplaceClick: ae,
-        onReceiptsUpload: B,
-        removeFileFromLine: oe,
-        isReimbursementCommentingEnabled: v,
-        isAutoFieldsExist: u,
-        reportTitle: he,
-        accountList: Ue,
-        classList: Fe,
-        merchantList: He,
-        autoFieldsByLineId: Ke,
-        onRemoveReimbursement: Ae,
-        onAddReimbursement: Qe,
-        totalAmount: w,
-        showTotalAmountLoader: ce,
-        hasDuplicateLine: l,
-        totalNumberOfLines: le.length,
-        updateInvoiceUploadFetchState: ee,
-        clearTentativeNameForLine: U,
-        tentativeMerchantName: Le[W.lineId],
-        companyMileageConfigInfo: c,
-        defaultCurrency: x,
-        setShowBankAccountPage: P,
-        paymentTo: e.paymentTo,
-        bankAccounts: Ce,
-        onDeleteBankAccount: F,
-        analytics: p,
-        fileRequiredLineIds: $,
-        allCurrencies: e.allCurrencies,
-        loggedInUserDepartmentId: e.loggedInUserDepartmentId,
-        isAddReimbursementDisabled: pe,
-        accountsHierarchyList: Re,
-        classHierarchyList: Je,
-        isSignedInUserReimbursementCreator: H
-      },
-      W.lineId
-    )),
-    le.length === 1 && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      /* @__PURE__ */ t.jsxs(eo, { children: [
-        y !== "small" ? /* @__PURE__ */ t.jsx(Qt, { windowSize: y }) : null,
-        /* @__PURE__ */ t.jsx(Xt, { windowSize: y, children: /* @__PURE__ */ t.jsxs(ca, { windowSize: y, children: [
-          /* @__PURE__ */ t.jsx(da, { children: ot.total }),
-          ce ? /* @__PURE__ */ t.jsx(ma, { windowSize: y, children: /* @__PURE__ */ t.jsx(pa, { children: /* @__PURE__ */ t.jsx(
-            vt,
-            {
-              size: "Standard",
-              start: !0,
-              style: { display: "flex" }
-            }
-          ) }) }) : /* @__PURE__ */ t.jsx(
-            wn,
-            {
-              amount: pn(
-                w,
-                Bo.currencyCode,
-                Bo.currencySymbol
-              ),
-              integerStyles: zt.h6Regular.cssObject,
-              decimalStyles: zt.standardRegular.cssObject
-            }
-          )
-        ] }) })
-      ] }),
-      /* @__PURE__ */ t.jsxs(eo, { children: [
-        y !== "small" ? /* @__PURE__ */ t.jsx(Qt, { windowSize: y }) : null,
-        /* @__PURE__ */ t.jsx(Xt, { windowSize: y, children: /* @__PURE__ */ t.jsxs(
-          ha,
-          {
-            windowSize: y,
-            onClick: () => {
-              pe === !1 && Qe();
-            },
-            isDisabled: pe,
-            "data-testid": q("add-reimbursement-container"),
-            children: [
-              /* @__PURE__ */ t.jsx(Ho, {}),
-              /* @__PURE__ */ t.jsx(Uo, { children: ot.addReimbursement })
-            ]
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ t.jsxs(eo, { children: [
-        y !== "small" ? /* @__PURE__ */ t.jsx(Qt, { windowSize: y }) : null,
-        H ? /* @__PURE__ */ t.jsxs(Xt, { windowSize: y, children: [
-          /* @__PURE__ */ t.jsx(ua, { windowSize: y, children: ot.receivePaymentTo }),
-          /* @__PURE__ */ t.jsx(
-            la,
-            {
-              windowSize: y,
-              shouldDisplay: Ce.length > 0,
-              children: /* @__PURE__ */ t.jsx(
-                $n,
-                {
-                  label: {
-                    label: ot.yourBankAccount,
-                    width: Te
-                  },
-                  style: {
-                    width: "auto"
-                  },
-                  singleSelectField: {
-                    singleSelect: {
-                      name: wt,
-                      placeholder: nt(
-                        ot.yourBankAccount
-                      ),
-                      showValueEyeIcon: !pe,
-                      menuPlacement: "top",
-                      maxMenuHeight: 308,
-                      showEyeIconOnSelect: !1,
-                      onDelete: F,
-                      getTooltipInfo: (W) => Mn(Ce, W),
-                      onClickCreateBankAccount: () => P(!0),
-                      getLabelForId: (W) => zn(Ce, W),
-                      isOptionRemovable: !1,
-                      showDeleteIcon: !0,
-                      showAddBankAccountOption: !0,
-                      isDisabled: pe ? "readonly" : void 0,
-                      showTickMark: !1,
-                      alwaysShowEyeTooltip: !0
-                    },
-                    defaultValue: {
-                      selectedOption: e.paymentTo,
-                      allOptions: Ye
-                    },
-                    registerOptions: {
-                      required: !0,
-                      validate: (W) => !!W.selectedOption
-                    }
-                  },
-                  isFunctional: !0
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ t.jsxs(
-            ga,
-            {
-              shouldDisplay: Ce.length === 0,
-              windowSize: y,
-              onClick: () => {
-                pe === !1 && P(!0);
-              },
-              hasError: Pe(de, wt),
-              isDisabled: pe,
-              "data-testid": q(
-                "remi-add-bank-account-container"
-              ),
-              children: [
-                /* @__PURE__ */ t.jsx(Ho, {}),
-                /* @__PURE__ */ t.jsx(Uo, { children: ot.addBankAccount })
-              ]
-            }
-          )
-        ] }) : null
-      ] })
-    ] })
-  ] });
-}, Fn = (e, i, a, d, h, v, u, w) => {
-  const x = ia(
-    a,
-    d,
-    h,
-    v,
-    u,
-    w
-  );
-  return {
-    lineIndex: e,
-    lineId: i,
-    reimbursementType: ot.outOfPocketKey,
-    file: void 0,
-    outOfPocket: x,
-    mileage: aa(
-      d,
-      v,
-      w
-    )
-  };
-}, ia = (e, i, a, d, h, v) => ({
-  transactionDate: void 0,
-  class: {
-    allOptions: Ge(i, []).map((u) => ({
-      ...u,
-      options: u.options.filter(
-        (w) => w.isDeleted !== !0
-      )
-    })),
-    selectedOption: v
-  },
-  account: {
-    allOptions: Wt(e, []).map(
-      (u) => ({
-        ...u,
-        options: u.options.filter(
-          (w) => w.isDeleted !== !0
-        )
-      })
-    ),
-    selectedOption: void 0
-  },
-  amount: {
-    amount: 0,
-    currencyCode: d.currencyCode,
-    currencySymbol: d.currencySymbol,
-    currency: {
-      allOptions: h.map((u) => ({
-        label: `${u.currencyCode} - ${u.currency}`,
-        value: u.currencyCode,
-        countryCode: xo(
-          u.countryCode
-        )
-      })),
-      selectedOption: d.currencyCode ?? $e.getLocalizedStrings().common.currency.currencyCode
-    }
-  },
-  memo: void 0,
-  merchant: {
-    allOptions: a.map((u) => u.id).filter((u) => !!u),
-    selectedOption: void 0
-  },
-  recommendations: [],
-  isCategoryUpdateSelected: !1,
-  isCategoryFirstTimeAutofilled: !1,
-  isRetainedCategorySelected: !1
-}), aa = (e, i, a) => ({
-  transactionDate: void 0,
-  class: {
-    allOptions: Ge(e, []).map((d) => ({
-      ...d,
-      options: d.options.filter(
-        (h) => h.isDeleted !== !0
-      )
-    })),
-    selectedOption: a
-  },
-  distanceInMiles: void 0,
-  amount: {
-    amount: 0,
-    currencyCode: i.currencyCode,
-    currencySymbol: i.currencySymbol
-  },
-  memo: void 0
-}), la = n.div`
-  margin-left: ${(e) => Q.leftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => Q.rightMargin.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => Q.addBankAccountMarginBottom.valuePx(e.windowSize)};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  border-radius: ${o.sp2};
-  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
-  display: ${(e) => e.shouldDisplay ? "inherit" : "none"};
-`, Qt = n.div`
-  width: ${(e) => e.windowSize === "small" ? "100%" : "42%"};
-`, Xt = n.div`
-  width: ${(e) => e.windowSize === "small" ? "100%" : "58%"};
-`, sa = n.div`
-  display: ${(e) => e.windowSize === "small" && e.showSkipAutoFill ? "none" : "flex"};
-  flex-direction: column;
-  margin-top: ${(e) => Q.marginTop.valuePx(e.windowSize)};
-`, ca = n.div`
-  padding: ${o.sp3};
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: ${(e) => e.theme.colors.grey3};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  border-radius: ${o.sp2};
-  color: ${(e) => e.theme.colors.hero};
-  margin-top: ${(e) => Q.totalMarginBottom.valuePx(e.windowSize)};
-  margin-left: ${(e) => Q.leftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => Q.rightMargin.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => Q.totalMarginBottom.valuePx(e.windowSize)};
-`, da = n(Sn)`
-  display: flex;
-  width: 176px;
-  color: ${(e) => e.theme.colors.primary};
-`, ua = n(Et)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-top: ${(e) => Q.paymentToMarginTop.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => Q.paymentToMarginBottom.valuePx(e.windowSize)};
-  margin-left: ${(e) => Q.leftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => Q.rightMargin.valuePx(e.windowSize)};
-`, ma = n(vn)`
-  display: flex;
-  width: calc(100% - 176px);
-  justify-content: flex-end;
-  color: ${(e) => e.theme.colors.primary};
-  ${(e) => `${na.total.style(e.windowSize)}`};
-`, pa = n.div`
-  padding-right: ${o.sp3};
-  height: 30px;
-  display: flex;
-  justify-content: flex-end;
-`, ha = n.div`
-  padding: ${o.sp3};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid
-    ${(e) => e.hasError === !0 ? I.important : e.theme.colors.hero};
-  border-radius: ${o.sp2};
-
-  color: ${(e) => e.hasError === !0 ? I.important : e.theme.colors.hero};
-  cursor: ${(e) => e.isDisabled ? "default" : "pointer"};
-  &:hover {
-    color: ${(e) => e.isDisabled ? e.theme.colors.hero : e.hasError === !0 ? I.important : e.theme.colors.primary};
-    border: 1px solid
-      ${(e) => e.isDisabled ? e.theme.colors.grey3 : e.hasError === !0 ? I.important : e.theme.colors.primary};
-  }
-  margin-top: ${(e) => Q.totalMarginBottom.valuePx(e.windowSize)};
-  margin-left: ${(e) => Q.leftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => Q.rightMargin.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => Q.marginBottom.valuePx(e.windowSize)};
-`, ga = n.div`
-  padding: ${o.sp3};
-  display: ${(e) => e.shouldDisplay ? "flex" : "none"};
-  align-items: center;
-  justify-content: center;
-  border: 1px solid
-    ${(e) => e.hasError === !0 ? I.important : e.theme.colors.hero};
-  border-radius: ${o.sp2};
-  color: ${(e) => e.hasError === !0 ? I.important : e.theme.colors.hero};
-  cursor: ${(e) => e.isDisabled ? "default" : "pointer"};
-  &:hover {
-    color: ${(e) => e.isDisabled ? e.theme.colors.hero : e.hasError === !0 ? I.important : e.theme.colors.primary};
-    border: 1px solid
-      ${(e) => e.isDisabled ? e.theme.colors.grey3 : e.hasError === !0 ? I.important : e.theme.colors.primary};
-  }
-  margin-left: ${(e) => Q.leftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => Q.rightMargin.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => Q.addBankAccountMarginBottom.valuePx(e.windowSize)};
-`, Uo = n(Vt)`
-  color: inherit;
-`, Ho = n(Cn)`
-  margin-right: ${o.sp2};
-  width: ${o.sp3};
-  height: ${o.sp3};
-`, eo = n.div`
-  display: flex;
-  width: 100%;
-`, Ve = {
-  buttonWidth: new s(140, 140),
-  paddingLeft: new s(r[3], r[6]),
-  paddingRight: new s(r[3], r[8]),
-  marginbottom: new s(r[4], r[5]),
-  subTitleMarginbottom: new s(r[2], r[3]),
-  orSeperatorTopBottomMargin: new s(r[6], 44),
-  iconWidthHeight: new s(20, r[4])
-}, Ko = "userBankAccountPage", Mt = "bankAccountSection", ya = (e) => ({
-  [Mt]: {
-    bankRoutingNumber: e?.bankRoutingNumber,
-    bankName: e?.bankName,
-    bankAccountNumber: e?.bankAccountNumber,
-    confirmedBankAccountNumber: e?.confirmedBankAccountNumber,
-    bankAccountName: e?.bankAccountName
-  }
-}), Go = (e) => `${e}_form`, fa = ({
-  bankAccountCreationState: e,
-  setShowBankAccountPage: i,
-  plaidConnectionDetails: a,
-  onFetchLinkTokenClick: d,
-  onEstablishConnectionClick: h,
-  bankAccountToCreate: v,
-  fetchBankNameByRoutingStatus: u,
-  isDisabled: w,
-  onSaveHandler: x,
-  onUserBankDetailsUpdated: l,
-  onFetchBankName: C,
-  onBackClick: $
-}) => {
-  const c = $t(), p = ze(), b = dn({
-    mode: "onBlur",
-    reValidateMode: "onChange",
-    defaultValues: xt(
-      () => ya(v),
-      [v]
-    )
-  }), O = mn(
-    (U) => {
-      h?.(U), $();
-    },
-    [$, h]
-  ), T = a.link_account_no_microdeposit, { open: P } = cr({
-    token: T.linkToken ?? null,
-    onSuccess: O
-  });
-  fe(() => {
-    (rt((/* @__PURE__ */ new Date()).toISOString()).isAfter(T.expiration) || T.linkToken == null) && d?.("link_account_no_microdeposit");
-  }, []);
-  const [G, B] = Z(!1), k = $e.getLocalizedStrings().spendManagement.reimbursement.reimbursementDetail, M = $e.getLocalizedStrings().common.footer, ie = {
-    onOkClick: () => {
-      B(!1), b.reset(), $();
-    },
-    onCancelClick: () => {
-      B(!1);
-    }
-  }, oe = async (U, F) => {
-    const Y = F[Mt].bankRoutingNumber;
-    l(F), U === `${Mt}.bankRoutingNumber` && Y?.length === 9 && Cr.test(Y) === !0 && C?.(Y);
-  };
-  fe(() => {
-    const U = b.watch((F, { name: Y }) => {
-      Y != null && F != null && dr(() => oe(Y, F));
-    });
-    return () => {
-      U.unsubscribe();
-    };
-  }), fe(() => {
-    e?.fetchState === "Completed" && $();
-  }, [
-    e?.fetchState,
-    $,
-    i
-  ]);
-  const ae = b.handleSubmit((U) => {
-    u.fetchState !== "In-Progress" && x();
-  }), ee = c.mode === "light" ? new Oo(c.colors.brandColorJadeLight) : new Oo(c.colors.brandColorJadeDark);
-  return /* @__PURE__ */ t.jsxs(xa, { children: [
-    /* @__PURE__ */ t.jsxs(Ta, { windowSize: p, children: [
-      G === !0 ? /* @__PURE__ */ t.jsx(
-        bo,
-        {
-          titleComponent: /* @__PURE__ */ t.jsx(kn, { children: k.discardTitle }),
-          descriptionComponent: /* @__PURE__ */ t.jsx(Tn, { children: k.discardDescription }),
-          primaryButtonText: k.buttons.delete,
-          secondaryButtonText: k.buttons.cancel,
-          action: ie
-        }
-      ) : null,
-      /* @__PURE__ */ t.jsx(
-        Kr,
-        {
-          header: k.addBankAccount,
-          isDirty: b.formState.isDirty,
-          onBackClick: $,
-          setShowConfirmationPopup: B
-        }
-      ),
-      /* @__PURE__ */ t.jsx(ba, {}),
-      /* @__PURE__ */ t.jsxs(ka, { size: p, children: [
-        /* @__PURE__ */ t.jsx(
-          Ur,
-          {
-            onClick: () => {
-              b.reset(), P();
-            },
-            title: k.connectYourBank,
-            subTitle: k.loginToBank,
-            header: k.setupAchPayments,
-            icon: {
-              element: /* @__PURE__ */ t.jsx(
-                vr,
-                {
-                  width: Ve.iconWidthHeight.valuePx(p),
-                  height: Ve.iconWidthHeight.valuePx(p)
-                }
-              ),
-              color: ee
-            },
-            style: {
-              width: "unset",
-              rowGap: p === "small" ? o.sp2 : void 0
-            }
-          }
-        ),
-        /* @__PURE__ */ t.jsxs(wa, { windowSize: p, children: [
-          /* @__PURE__ */ t.jsx($a, {}),
-          /* @__PURE__ */ t.jsx(va, { children: /* @__PURE__ */ t.jsx(Ca, { children: k.or }) })
-        ] }),
-        /* @__PURE__ */ t.jsx(Sa, { windowSize: p, children: k.saveAccountManually })
-      ] }),
-      /* @__PURE__ */ t.jsx(ja, { size: p, children: /* @__PURE__ */ t.jsx(un, { ...b, children: /* @__PURE__ */ t.jsxs("form", { id: Go(Ko), onSubmit: ae, children: [
-        e?.fetchState === "Error" && e.error?.code === 409 ? /* @__PURE__ */ t.jsx(
-          Gr,
-          {
-            warningText: k.accountExistWarning
-          }
-        ) : null,
-        /* @__PURE__ */ t.jsx(
-          Hr,
-          {
-            bankAccountToCreate: v,
-            fetchBankNameByRoutingStatus: u,
-            sectionId: Mt
-          }
-        )
-      ] }) }) })
-    ] }),
-    /* @__PURE__ */ t.jsx(
-      jn,
-      {
-        formId: Go(Ko),
-        primaryBtn: {
-          label: k.saveAccount,
-          isLoading: e.fetchState === "In-Progress",
-          style: { width: Ve.buttonWidth.value(p) },
-          isDisabled: w != null
-        },
-        cancelBtn: {
-          label: M.cancel,
-          style: { width: Ve.buttonWidth.value(p) },
-          shouldResetOnCancel: !1,
-          onClick: () => {
-            b.formState.isDirty ? B(!0) : (B(!1), b.reset(), $());
-          }
-        }
-      }
-    )
-  ] });
-}, xa = n.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-`, ba = n.div`
-  margin: ${o.sp2} 0;
-  position: relative;
-`, wa = n.div`
-  margin: ${(e) => Ve.orSeperatorTopBottomMargin.valuePx(e.windowSize)} 0;
-  position: relative;
-`, $a = n.div`
-  background: ${(e) => e.theme.colors.grey2};
-  height: 1px;
-`, Sa = n(Tr)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-bottom: ${(e) => Ve.subTitleMarginbottom.valuePx(e.windowSize)};
-`, va = n.div`
-  display: flex;
-  justify-content: center;
-`, Ca = n(go)`
-  background: ${(e) => e.theme.colors.background};
-  border: 1px solid ${(e) => e.theme.colors.grey2};
-  border-radius: ${o.sp5};
-  width: 43px;
-  height: 25px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${(e) => e.theme.colors.grey1};
-  top: -11px;
-  position: absolute;
-`, Ta = n.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-`, ka = n.div`
-  padding-left: ${(e) => Ve.paddingLeft.valuePx(e.size)};
-  padding-right: ${(e) => Ve.paddingRight.valuePx(e.size)};
-`, ja = n.div`
-  padding-left: ${(e) => Ve.paddingLeft.valuePx(e.size)};
-  padding-right: ${(e) => Ve.paddingRight.valuePx(e.size)};
-  padding-bottom: ${o.sp3};
-`, Oe = {
-  containerWidth: new s(343, 544),
-  confirmationPopUpTitleMarginTop: new s(r[6], r[7]),
-  confirmationPopUpTitlePaddingLeftRight: new s(r[5], r[8]),
-  submitButtonWidth: new s(145, 156),
-  cancelButtonWidth: new s(121, 121),
-  errorLineItemGap: new s(r[2], 12),
-  styledCloseIconRight: new s(r[3], r[8])
-}, { footer: Yo } = $e.getLocalizedStrings().common, we = $e.getLocalizedStrings().spendManagement.reimbursement.reimbursementDetail.duplicatePopUpInfo, Jo = ({ fetchState: e }) => {
-  switch (e) {
-    case "Not-Started":
-      return /* @__PURE__ */ t.jsx(Qo, {});
-    case "In-Progress":
-      return /* @__PURE__ */ t.jsx(
-        vt,
-        {
-          size: "Small",
-          start: !0,
-          style: {
-            alignItems: "center",
-            display: "flex"
-          }
-        }
-      );
-    case "Completed":
-      return /* @__PURE__ */ t.jsx(Nn, {});
-    default:
-      return /* @__PURE__ */ t.jsx(Qo, {});
-  }
-}, Ia = (e) => {
-  switch (e) {
-    case "Not-Started":
-      return we.detectDuplicates;
-    case "In-Progress":
-      return we.detectingDuplicates;
-    case "Completed":
-      return we.noDuplicatesFound;
-    default:
-      return we.detectDuplicates;
-  }
-}, Oa = ({
-  submitFetchState: e,
-  duplicateReimbursementStatus: i,
-  hasDuplicateLine: a,
-  numberOfDuplicateLines: d,
-  setShowDuplicatePopup: h,
-  analytics: v,
-  reimbursementId: u,
-  submitReport: w,
-  fetchDuplicateReimbursement: x,
-  clearDuplicateReimbursementDetail: l,
-  clearRemiSaveStatus: C
-}) => {
-  const $ = ze(), [c, p] = jt.useState(!0), b = uo(e), O = uo(
-    i
-  );
-  jt.useEffect(() => {
-    setTimeout(() => {
-      c && (p(!1), i === "Not-Started" && x());
-    }, 2e3);
-  }, [
-    i,
-    x,
-    c
-  ]), jt.useEffect(() => {
-    b === "In-Progress" && e === "Completed" && (l(), h(!1));
-  }, [
-    e,
-    b,
-    h,
-    l
-  ]), jt.useEffect(() => {
-    O === "In-Progress" && i === "Completed" && !a && w();
-  }, [
-    O,
-    i,
-    a,
-    w
-  ]);
-  const T = i === "Error" || e === "Error";
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    T ? (
-      //onClick will be automatically handled by the ClickAwayListener inside ConfirmationPopup component
-      /* @__PURE__ */ t.jsx(Pa, { size: $ })
-    ) : null,
-    /* @__PURE__ */ t.jsx(
-      bo,
-      {
-        action: {
-          onOkClick: () => {
-            T ? (l(), e === "Error" && C(), p(!0)) : (v?.trackReimbursementReviewDuplicateReportReimbursement(
-              d,
-              u
-            ), h(!1), kr());
-          },
-          onCancelClick: () => {
-            T ? (l(), e === "Error" && C(), h(!1)) : (v?.trackReimbursementSubmitAnywayDuplicateReimbursement(
-              d,
-              u
-            ), w());
-          }
-        },
-        shouldClickAway: T,
-        isSecondaryLoading: e === "In-Progress",
-        secondaryButtonVariant: "secondary",
-        primaryButtonText: T ? Yo.resubmit : we.primaryButtonText,
-        secondaryButtonText: T ? Yo.cancel : we.secondaryButtonText,
-        primaryButtonWidth: T ? Oe.cancelButtonWidth.value($) : Oe.submitButtonWidth.value($),
-        secondaryButtonWidth: T ? Oe.cancelButtonWidth.value($) : Oe.submitButtonWidth.value($),
-        descriptionComponent: /* @__PURE__ */ t.jsx(La, { size: $, children: /* @__PURE__ */ t.jsxs(
-          Ba,
-          {
-            hasDuplicate: a,
-            duplicateReimbursementStatus: i,
-            children: [
-              /* @__PURE__ */ t.jsxs(oo, { isDisabled: !1, isSuccess: !c, children: [
-                c ? /* @__PURE__ */ t.jsx(
-                  vt,
-                  {
-                    size: "Small",
-                    start: !0,
-                    style: {
-                      alignItems: "center",
-                      display: "flex"
-                    }
-                  }
-                ) : /* @__PURE__ */ t.jsx(Nn, {}),
-                /* @__PURE__ */ t.jsx(to, { isDisabled: !1, children: c ? we.reviewingExpenses : we.reviewedAllExpenses })
-              ] }),
-              a || i === "Error" ? /* @__PURE__ */ t.jsxs(en, { size: $, children: [
-                /* @__PURE__ */ t.jsx(Zo, {}),
-                /* @__PURE__ */ t.jsx(Xo, { children: i === "Error" ? we.failedToDetect : `${d} ${we.duplicateExpensesFound}` })
-              ] }) : /* @__PURE__ */ t.jsxs(
-                oo,
-                {
-                  isDisabled: i === "Not-Started",
-                  isSuccess: i === "Completed" && d === 0,
-                  children: [
-                    /* @__PURE__ */ t.jsx(Jo, { fetchState: i }),
-                    /* @__PURE__ */ t.jsx(
-                      to,
-                      {
-                        isDisabled: i === "Not-Started",
-                        children: Ia(i)
-                      }
-                    )
-                  ]
-                }
-              ),
-              e === "Error" ? /* @__PURE__ */ t.jsxs(en, { size: $, children: [
-                /* @__PURE__ */ t.jsx(Zo, {}),
-                /* @__PURE__ */ t.jsx(Xo, { children: we.failedToSubmit })
-              ] }) : a || i === "Error" ? null : /* @__PURE__ */ t.jsxs(
-                oo,
-                {
-                  isDisabled: e === "Not-Started",
-                  isSuccess: e === "Completed",
-                  children: [
-                    /* @__PURE__ */ t.jsx(Jo, { fetchState: e }),
-                    /* @__PURE__ */ t.jsx(to, { isDisabled: e === "Not-Started", children: e === "Not-Started" ? we.submitReport : we.submittingReport })
-                  ]
-                }
-              )
-            ]
-          }
-        ) }),
-        titleComponent: /* @__PURE__ */ t.jsx(Aa, { size: $, children: we.title }),
-        showFooter: a || T,
-        containerStyle: {
-          width: Oe.containerWidth.value($),
-          maxWidth: "unset"
-        }
-      }
-    )
-  ] });
-}, Pa = n(In)`
-  width: ${o.sp4};
-  height: ${o.sp4};
-  color: ${(e) => e.theme.colors.hero};
-  position: fixed;
-  top: 19px;
-  right: ${(e) => Oe.styledCloseIconRight.valuePx(e.size)};
-  z-index: 11;
-  cursor: pointer;
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Zo = n(Ir)`
-  width: ${o.sp4};
-  height: ${o.sp4};
-  min-width: ${o.sp4};
-  color: ${I.brandColorGoldDark};
-`, Qo = n(Yr)`
-  width: ${o.sp3};
-  height: ${o.sp3};
-  min-width: ${o.sp3};
-  color: ${(e) => e.theme.colors.grey3};
-`, to = n.div`
-  color: ${(e) => e.isDisabled ? e.theme.colors.grey2 : e.theme.colors.primary};
-  text-align: left;
-`, Xo = n.div`
-  color: ${I.brandColorGoldDark};
-`, oo = n.div`
-  display: flex;
-  align-items: center;
-  gap: ${(e) => e.isSuccess ? o.sp2 : o.sp3};
-  border: 1px solid
-    ${(e) => e.isDisabled ? e.theme.colors.grey3 : e.theme.colors.primary};
-  padding: ${o.sp3};
-  border-radius: ${o.sp2};
-`, Ba = n.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${o.sp3};
-  margin-bottom: ${(e) => e.hasDuplicate || e.duplicateReimbursementStatus === "Error" ? 0 : o.sp3};
-`, en = n.div`
-  display: flex;
-  align-items: center;
-  gap: ${(e) => Oe.errorLineItemGap.valuePx(e.size)};
-  border: 1px solid ${(e) => e.theme.colors.brandColorGold};
-  background-color: ${I.alertLight};
-  padding: ${o.sp3};
-  border-radius: ${o.sp2};
-  text-align: left;
-`, Aa = n(wo)`
-  margin-top: ${(e) => Oe.confirmationPopUpTitleMarginTop.valuePx(e.size)};
-  padding-left: ${(e) => Oe.confirmationPopUpTitlePaddingLeftRight.valuePx(e.size)};
-  padding-right: ${(e) => Oe.confirmationPopUpTitlePaddingLeftRight.valuePx(e.size)};
-  color: ${(e) => e.theme.colors.primary};
-  word-break: break-word;
-  width: ${(e) => e.size === "small" ? "max-content" : "-webkit-fill-available"};
-`, La = n(fn)`
-  color: ${(e) => e.theme.colors.hero};
-  padding-left: ${(e) => Oe.confirmationPopUpTitlePaddingLeftRight.valuePx(e.size)};
-  padding-right: ${(e) => Oe.confirmationPopUpTitlePaddingLeftRight.valuePx(e.size)};
-  margin-bottom: ${o.sp5};
-  margin-top: ${o.sp4};
-  white-space: pre-line;
-  width: -webkit-fill-available;
-`, Nn = n(jr)`
-  width: ${o.sp4};
-  height: ${o.sp4};
-  min-width: ${o.sp4};
-  color: ${I.success};
-`, X = {
-  rightMargin: new s(r[3], r[8]),
-  leftMargin: new s(r[3], r[6]),
-  bottomMargin: new s(56, 56),
-  closeMarginTop: new s(0, 19),
-  closeMarginRight: new s(r[3], r[8]),
-  rightSectionWidth: new s(100, 58),
-  leftSectionWidth: new s(100, 42),
-  footerButtonWidth: new s(120, 165),
-  right: new s(r[3], r[0]),
-  actionsContainerRight: new s(r[0], r[6]),
-  otherActionsContainerBottom: new s(58, 44),
-  duplicateBannerWrapperMarginTop: new s(r[5], r[3]),
-  duplicateBannerWrapperMarginRight: new s(r[3], r[8]),
-  duplicateBannerWrapperMarginBottom: new s(r[5], r[3]),
-  duplicateBannerWrapperMarginLeft: new s(r[3], r[6]),
-  navBarWidth: new s(100, 58)
-}, {
-  spendManagement: {
-    reimbursement: { reimbursementDetail: f, bulkActions: tn }
-  },
-  common: {
-    currency: { currencyCode: Ee, currencySymbol: At },
-    texts: { comments: Ma },
-    strings: { empty: Ra }
-  },
-  collaboration: {
-    threads: {
-      placeholder: { addANewComment: za, replyAComment: Fa },
-      tooltip: { resolveComment: Na, unResolveComment: Wa }
-    }
-  },
-  dateFormat: on
-} = $e.getLocalizedStrings(), nn = "editReimbursementDetailPage", rn = (e) => `${e}_form`, Ea = (e, i, a, d, h, v, u, w, x) => {
-  const l = e.outOfPocket, C = e.mileage, $ = l.merchant, c = l.recommendations;
-  return {
-    lineIndex: v,
-    lineId: e?.lineId ?? String(v + 1),
-    reimbursementType: e?.type ?? f.outOfPocketKey,
-    file: e?.file,
-    homeCurrencyConversions: {
-      amount: e?.homeCurrencyConversions?.amount ?? 0,
-      currencyCode: e?.homeCurrencyConversions?.currencyCode ?? u.currencyCode,
-      currencySymbol: e?.homeCurrencyConversions?.currencySymbol ?? u.currencySymbol
-    },
-    outOfPocket: {
-      recommendedAccount: l.recommendedAccount,
-      //account to show in update to checkbox
-      isCategoryUpdateSelected: l.isCategoryUpdateSelected ?? !1,
-      //update to checkbox is ticked
-      isCategoryFirstTimeAutofilled: l.isCategoryFirstTimeAutofilled ?? !1,
-      retainedAccount: l.retainedAccount,
-      //account to show in retain checkbox
-      isRetainedCategorySelected: l.isRetainedCategorySelected ?? !1,
-      //retain checkbox is selected
-      recommendations: c ?? [],
-      transactionDate: l?.transactionDate?.toDate() ?? void 0,
-      class: {
-        allOptions: Ge(a, []).map(
-          (p) => ({
-            ...p,
-            options: p.options.filter(
-              (b) => b.isDeleted !== !0
-            )
-          })
-        ),
-        selectedOption: l?.lineDetail?.class?.classId ?? x
-      },
-      account: {
-        allOptions: Wt(
-          i,
-          c
-        ).map((p) => ({
-          ...p,
-          options: p.options.filter(
-            (b) => b.isDeleted !== !0
-          )
-        })),
-        selectedOption: l.lineDetail?.account?.qboId ?? l.lineDetail?.account?.accountId
-      },
-      amount: {
-        amount: l?.amount ?? 0,
-        currencyCode: l?.currencyCode ?? u.currencyCode,
-        currencySymbol: l?.currencySymbol ?? u.currencySymbol,
-        currency: {
-          allOptions: w.map((p) => ({
-            label: `${p.currencyCode} - ${p.currency}`,
-            value: p.currencyCode,
-            countryCode: xo(
-              p.countryCode
-            )
-          })),
-          selectedOption: l?.currencyCode ?? u.currencyCode ?? Ee
-        }
-      },
-      memo: l?.description ?? void 0,
-      merchant: {
-        allOptions: d.map((p) => p.id).filter((p) => !!p),
-        selectedOption: $?.id ? $?.id : $?.name ? $?.name : e?.lineId != null ? h[e?.lineId] : void 0
-      }
-    },
-    mileage: {
-      transactionDate: C?.transactionDate?.toDate(),
-      class: {
-        allOptions: Ge(a, []).map(
-          (p) => ({
-            ...p,
-            options: p.options.filter(
-              (b) => b.isDeleted !== !0
-            )
-          })
-        ),
-        selectedOption: C?.lineDetail?.class?.classId
-      },
-      distanceInMiles: C?.distanceMileage?.value,
-      amount: {
-        amount: C?.amount ?? 0,
-        currencyCode: C?.currencyCode ?? u.currencyCode,
-        currencySymbol: C?.currencySymbol ?? u.currencySymbol
-      },
-      memo: C?.description
-    }
-  };
-}, no = (e, i, a) => {
-  const d = [];
-  return Object.values(e.lineDetailSection).forEach(
-    (h, v) => {
-      h?.lineId != null && d.push(
-        Ea(
-          h,
-          e.accountsHierarchyList,
-          e.classHierarchyList,
-          e.merchantList.merchants,
-          e.tentativeMerchantNameByLineId,
-          v,
-          i,
-          e.allCurrencies,
-          e.loggedInUserDepartmentId
-        )
-      );
-    }
-  ), d.length === 0 && d.push(
-    Fn(
-      0,
-      "1",
-      e.accountsHierarchyList,
-      e.classHierarchyList,
-      e.merchantList.merchants,
-      i,
-      e.allCurrencies,
-      e.loggedInUserDepartmentId
-    )
-  ), {
-    [Ft]: {
-      reportTitle: e.whatForSection.reportTitle
-    },
-    [$o]: d,
-    [wt]: {
-      selectedOption: e.paymentTo,
-      allOptions: a.map((h) => h.bankAccountId)
-    }
-  };
-}, ro = (e, i) => {
-  const a = (d) => d.lineId == null || i[d.lineId]?.fetchState === "In-Progress" ? 0 : (i[d.lineId]?.fetchState === "Completed", d.type === f.mileageKey ? d?.mileage?.amount ?? 0 : d?.outOfPocket?.currencyCode !== Ee && d.homeCurrencyConversions?.amount !== d?.outOfPocket?.amount ? d.homeCurrencyConversions?.amount ?? 0 : d?.outOfPocket?.amount ?? 0);
-  return Object.values(e).reduce((d, h) => d + a(h), 0);
-}, io = (e, i, a, d, h, v, u, w) => {
-  const x = {};
-  return e.lineInfo.forEach((l) => {
-    const C = w.find(
-      (O) => O.classId === l.mileage.class.selectedOption
-    ), $ = u.find(
-      (O) => O.qboId === l.outOfPocket.account.selectedOption || O.accountId === l.outOfPocket.account.selectedOption
-    ), c = w.find(
-      (O) => O.classId === l.outOfPocket.class.selectedOption
-    ), p = i.find(
-      (O) => O.id === l.outOfPocket.merchant.selectedOption
-    ), b = v.find(
-      (O) => O.currencyCode === l.outOfPocket.amount?.currency.selectedOption
-    )?.currencySymbol;
-    x[l.lineId] = {
-      fileId: l.file?.fileId,
-      lineId: l.lineId,
-      type: l.reimbursementType,
-      homeCurrencyConversions: l.homeCurrencyConversions ?? {
-        amount: 0,
-        currencyCode: "USD",
-        currencySymbol: "$"
-      },
-      mileage: {
-        description: l.mileage.memo ?? "",
-        lineDetail: {
-          class: C
-        },
-        transactionDate: l.mileage.transactionDate != null ? rt(l.mileage.transactionDate.toDateString()) : void 0,
-        amount: l.mileage.amount?.amount ?? 0,
-        currencyCode: l.mileage.amount?.currencyCode ?? b,
-        currencySymbol: l.mileage.amount?.currencySymbol ?? b,
-        distanceMileage: {
-          unit: "miles",
-          value: l.mileage.distanceInMiles ?? 0
-        }
-      },
-      outOfPocket: {
-        description: l.outOfPocket.memo ?? "",
-        lineDetail: {
-          class: c,
-          account: $
-        },
-        transactionDate: l.outOfPocket.transactionDate != null ? rt(l.outOfPocket.transactionDate.toDateString()) : void 0,
-        amount: l.outOfPocket.amount?.amount ?? 0,
-        currencyCode: l.outOfPocket.amount?.currency.selectedOption ?? b,
-        currencySymbol: b,
-        merchant: l.outOfPocket.merchant.selectedOption != null ? {
-          id: p?.id ?? "",
-          name: p?.name ?? l.outOfPocket.merchant.selectedOption
-        } : void 0,
-        recommendations: l.outOfPocket.recommendations,
-        recommendedAccount: l.outOfPocket.recommendedAccount,
-        isCategoryUpdateSelected: l.outOfPocket.isCategoryUpdateSelected,
-        isCategoryFirstTimeAutofilled: l.outOfPocket.isCategoryFirstTimeAutofilled,
-        isRetainedCategorySelected: l.outOfPocket.isRetainedCategorySelected,
-        retainedAccount: l.outOfPocket.retainedAccount
-      }
-    };
-  }), {
-    whatForSection: {
-      reportTitle: e.whatFor.reportTitle
-    },
-    updatesByLineId: x,
-    totalAmount: {
-      amount: d,
-      ...a
-    },
-    currencyConversionStateByLineId: h,
-    paymentTo: e.paymentTo.selectedOption
-  };
-}, Fl = ({
-  remiDetails: e,
-  authParams: i,
-  defaultCurrency: a,
-  companyMileageConfigInfo: d,
-  uploadInvoiceEndPoint: h,
-  isReimbursementCommentingEnabled: v,
-  isUserAdmin: u,
-  analytics: w,
-  reimbursementId: x,
-  plaidConnectionDetails: l,
-  bankAccountCreationState: C,
-  bankNameByRouting: $,
-  bankAccounts: c,
-  isSignedInUserReimbursementCreator: p,
-  uncategorizedAccounts: b,
-  bankAccountToCreate: O,
-  fetchBankNameByRoutingStatus: T,
-  onUserBankDetailsUpdated: P,
-  onFetchBankName: G,
-  onSaveBankAccount: B,
-  fetchDuplicateReimbursement: k,
-  clearDuplicateReimbursementDetail: M,
-  clearRemiSaveStatus: ie,
-  removeDuplicateReimbursementForLine: oe,
-  onDuplicateLineClick: ae,
-  onExistingMerchantChange: ee,
-  onNewMerchantChange: U,
-  onReceiptsUpload: F,
-  saveRemiDetails: Y,
-  submitRemiDetails: H,
-  discardReimbursementDetailsFromLocalStore: L,
-  onReimbursementDetailsChanged: ce,
-  updateReimbursementType: J,
-  onHomeCurrencyConversionUpdate: V,
-  redirectToReimbursementListScreen: de,
-  redirectToReimbursementDetailScreen: _e,
-  deleteReimbursement: ue,
-  removeFileFromLine: xe,
-  onZeniLogoClick: le,
-  onAmountChanged: Be,
-  updateInvoiceUploadFetchState: Ae,
-  clearTentativeNameForLine: Le,
-  onAddNewRule: me,
-  onFetchLinkTokenClick: Me,
-  onEstablishConnectionClick: pe,
-  deleteBankAccount: Ce,
-  onBackClickFromBankAccountPage: Ye
-}) => {
-  const y = bt(null), Te = bt(null), he = uo(e.uploadStatus), Ue = $t(), Re = St(), [Je, Fe] = Z(!1), [He, Ke] = Z(!1), [Ze, Qe] = Z("save"), [ne, at] = Z(
-    ro(
-      e.lineDetailSection,
-      e.currencyConversionStatus
-    )
-  ), [pt, Xe] = Z(!1), [_, ht] = Z(
-    null
-  ), [W, se] = Z(!1), Ct = `dashboard_${Re.currentTenant?.companyId}`, ke = dn({
-    mode: "all",
-    reValidateMode: "onChange",
-    defaultValues: xt(
-      () => no(e, a, c),
-      [e, a, c]
-    ),
-    values: xt(
-      () => no(e, a, c),
-      [e, a, c]
-    ),
-    resetOptions: {
-      keepErrors: !0
-    },
-    shouldFocusError: !0
-  }), { isDirty: R, dirtyFields: Wn } = ke.formState, En = async (g, j) => {
-    const { lineInfo: m } = j, S = Number(g.split(".")[1]);
-    if (g.includes("reportTitle") || g.includes("memo"))
-      return;
-    if (g.includes("reimbursementType")) {
-      const z = m[S].mileage, E = m[S].outOfPocket;
-      m[S] = {
-        ...m[S],
-        outOfPocket: {
-          transactionDate: E.transactionDate ?? void 0,
-          class: {
-            allOptions: E.class.allOptions ?? Ge(e.classHierarchyList, []),
-            selectedOption: E.class.selectedOption ?? void 0
-          },
-          account: {
-            allOptions: E.account.allOptions ?? Wt(
-              e.accountsHierarchyList,
-              []
-            ).map((ge) => ({
-              ...ge,
-              options: ge.options.filter(
-                (st) => st.isDeleted !== !0
-              )
-            })),
-            selectedOption: E.account.selectedOption ?? void 0
-          },
-          amount: E.amount ?? {
-            amount: 0,
-            currencyCode: a.currencyCode,
-            currencySymbol: a.currencySymbol,
-            currency: {
-              allOptions: e.allCurrencies.map((ge) => ({
-                label: `${ge.currencyCode} - ${ge.currency}`,
-                value: ge.currencyCode,
-                countryCode: xo(
-                  ge.countryCode
-                )
-              })),
-              selectedOption: a.currencyCode ?? Ee
-            }
-          },
-          memo: E.memo ?? void 0,
-          merchant: E.merchant ?? void 0,
-          recommendations: E.recommendations ?? [],
-          recommendedAccount: E.recommendedAccount ?? void 0,
-          isCategoryUpdateSelected: E.isCategoryUpdateSelected ?? !1,
-          isCategoryFirstTimeAutofilled: E.isCategoryFirstTimeAutofilled ?? !1,
-          retainedAccount: E.retainedAccount ?? void 0,
-          isRetainedCategorySelected: E.isRetainedCategorySelected ?? !1
-        },
-        mileage: {
-          transactionDate: z.transactionDate ?? void 0,
-          class: {
-            allOptions: z.class.allOptions ?? Ge(e.classHierarchyList, []),
-            selectedOption: z.class.selectedOption ?? e.loggedInUserDepartmentId
-          },
-          distanceInMiles: z.distanceInMiles,
-          amount: {
-            amount: z?.amount?.amount ?? 0,
-            currencyCode: z?.amount?.currencyCode ?? Ee,
-            currencySymbol: z?.amount?.currencySymbol ?? At
-          },
-          memo: z.memo ?? void 0
-        }
-      };
-    } else if (g.includes("mileage.distanceInMiles")) {
-      const { distanceInMiles: z } = m[S].mileage, E = d?.mileageUnitAmount ?? 0;
-      m[S].mileage = {
-        ...m[S].mileage,
-        amount: {
-          amount: z != null ? z * E : 0,
-          currencyCode: a.currencyCode,
-          currencySymbol: a.currencySymbol
-        }
-      };
-    } else if (g.includes("outOfPocket.amount") && m[S].lineId) {
-      const z = m[S].outOfPocket.amount, E = e.allCurrencies.find(
-        (ge) => ge.currencyCode === z?.currency.selectedOption
-      )?.currencySymbol;
-      if (z?.currencyCode !== z?.currency.selectedOption) {
-        const ge = z?.currency?.allOptions || [];
-        m[S].outOfPocket.amount = {
-          currency: {
-            allOptions: ge,
-            selectedOption: z?.currency?.selectedOption
-          },
-          amount: m[S].outOfPocket?.amount?.amount ?? 0,
-          currencyCode: z?.currency.selectedOption ?? Ee,
-          currencySymbol: E ?? At
-        };
-      }
-      if (z?.currency.selectedOption !== Ee)
-        Xe(!0), Gn(m[S].lineId, Ee);
-      else {
-        const ge = {};
-        m.forEach((Zt) => {
-          ge[Zt.lineId] = {
-            lineId: Zt.lineId,
-            homeCurrencyConversions: Zt.homeCurrencyConversions
-          };
-        }), m[S].homeCurrencyConversions = {
-          amount: z.amount ?? 0,
-          currencyCode: z?.currency.selectedOption ?? Ee,
-          currencySymbol: E ?? At
-        };
-        const st = ro(
-          ge,
-          e.currencyConversionStatus
-        );
-        ne !== st && at(st);
-      }
-    } else if (g.includes("outOfPocket.isRetainedCategorySelected"))
-      //retain checkbox is true
-      m[S].outOfPocket.isRetainedCategorySelected === !0 && (m[S].outOfPocket.isCategoryUpdateSelected = !1, m[S].outOfPocket.account.selectedOption = m[S].outOfPocket.retainedAccount?.qboId);
-    else if (g.includes("outOfPocket.isCategoryUpdateSelected"))
-      if (
-        //update to checkbox is true
-        m[S].outOfPocket.isCategoryUpdateSelected === !0
-      )
-        m[S].outOfPocket.account.selectedOption = m[S].outOfPocket.recommendedAccount?.qboId, m[S].outOfPocket.isRetainedCategorySelected = !1;
-      else {
-        const z = m[S].lineId, E = e.editRemiInitialDetails.lineDetailSection[z]?.lineDetail?.account?.qboId;
-        m[S].outOfPocket.account.selectedOption = E, m[S].outOfPocket.isRetainedCategorySelected = !1;
-      }
-    else g.includes("outOfPocket.account") && (m[S].outOfPocket.recommendations.length > 0 && (m[S].outOfPocket.recommendedAccount = m[S].outOfPocket.recommendations[0].account), //account value is same as update to checkbox
-    m[S].outOfPocket.recommendedAccount?.qboId != null && m[S].outOfPocket.account.selectedOption === m[S].outOfPocket.recommendedAccount?.qboId ? m[S].outOfPocket.isCategoryUpdateSelected = !0 : m[S].outOfPocket.isCategoryUpdateSelected = !1, //account value is same as retain to checkbox
-    m[S].outOfPocket.retainedAccount?.qboId != null && m[S].outOfPocket.account.selectedOption === m[S].outOfPocket.retainedAccount?.qboId ? m[S].outOfPocket.isRetainedCategorySelected = !0 : m[S].outOfPocket.isRetainedCategorySelected = !1, m[S].outOfPocket.isCategoryFirstTimeAutofilled = !1);
-    const kt = io(
-      { ...j, lineInfo: m },
-      e.merchantList.merchants,
-      a,
-      ne,
-      e.currencyConversionStatus,
-      e.allCurrencies,
-      e.accountList.accounts,
-      e.classList.classes
-    );
-    if (ce?.(kt), g.includes("outOfPocket.merchant")) {
-      const z = m[S].lineId, E = m[S].outOfPocket.merchant.selectedOption ?? "";
-      m[S].outOfPocket.merchant.allOptions.find(
-        (st) => st === E
-      ) != null ? ee(E, z) : U(E, z);
-    }
-  }, So = xt(
-    () => Po((g, j) => En(g, j), 300),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      //these needs to be added because these fetchState were coming as "In-Progress" because of debounce
-      e.accountList.fetchState,
-      e.classList.fetchState,
-      e.merchantList.fetchState
-    ]
-  );
-  fe(() => {
-    const g = ke.watch((j, { name: m }) => {
-      m != null && j != null && So(m, j);
-    });
-    return () => {
-      g.unsubscribe();
-    };
-  }, [So, ke]), fe(() => {
-    const g = pr(
-      Object.values(e.currencyConversionStatus)
-    ), j = g.fetchState === "In-Progress" || g.fetchState === "Error";
-    Xe(j);
-  }, [e.currencyConversionStatus]), fe(() => {
-    for (const j in e.currencyConversionStatus) {
-      const m = e.lineDetailSection[j], S = e.lineDetailSection[j];
-      e.currencyConversionStatus[j].fetchState === "Completed" && S != null && m.type !== f.mileageKey && !cn(
-        m?.homeCurrencyConversions,
-        S.homeCurrencyConversions
-      ) && V(
-        {
-          amount: m?.homeCurrencyConversions?.amount ?? 0,
-          currencyCode: m?.homeCurrencyConversions?.currencyCode ?? Ee,
-          currencySymbol: m?.homeCurrencyConversions?.currencySymbol ?? At
-        },
-        j,
-        x
-      );
-    }
-    const g = ro(
-      e.lineDetailSection,
-      e.currencyConversionStatus
-    );
-    ne !== g && at(g);
-  }, [e.currencyConversionStatus, e.lineDetailSection]), fe(() => {
-    (e.saveStatus?.fetchState === "Completed" || e.deleteStatus.fetchState === "Completed") && (L(x), de?.());
-  }, [
-    e.saveStatus?.fetchState,
-    e.deleteStatus.fetchState,
-    x,
-    L,
-    de
-  ]);
-  const A = ze(), [Ne, gt] = Z(
-    x == null
-  ), [yt, Vn] = Z(1), [_n, _t] = Z(!1), [Dn, qn] = Z(""), [Dt, Un] = Z(null), [Hn, lt] = Z(!1), [Kn, vo] = Z(!1), [qt, Ut] = Z([]), [be, Tt] = Z({
-    title: "",
-    description: "",
-    primaryButtonText: "",
-    secondaryButtonText: ""
-  }), Gn = bt(
-    Po(
-      (g, j) => Be(g, j),
-      500,
-      {
-        trailing: !0
-      }
-    )
-  ).current;
-  fe(() => {
-    he === "In-Progress" && (e.uploadStatus === "Completed" ? (ke.reset(
-      no(e, a, c),
-      { keepDefaultValues: !0 }
-    ), Fe(!1), gt(!1)) : e.uploadStatus === "Error" && Fe(!1));
-  }, [
-    he,
-    e.uploadStatus,
-    ke,
-    e,
-    Je,
-    Fe,
-    Ne,
-    a,
-    c,
-    w
-  ]), fe(() => {
-    e.uploadStatus === "In-Progress" && Ne === !1 && Fe(!0);
-  }, [e.uploadStatus, Fe, Ne]);
-  const Ht = e.remiStage === "draft" ? f.newReimbursementTitle : f.editReimbursementTitle, Yn = {
-    onOkClick: () => {
-      if (lt(!1), be.primaryButtonText === f.buttons.discard)
-        L(x), e.remiStage === "draft" ? de?.() : _e?.();
-      else if (be.primaryButtonText === f.buttons.delete)
-        be.title === f.deleteBankAccountTitle ? Ce?.(Dn) : ue?.();
-      else if (be.primaryButtonText === f.buttons.yes && Dt != null) {
-        const g = qt.filter(
-          (j) => j !== yt.toString()
-        );
-        Ut(
-          g
-        ), F(Dt, yt, !0);
-      }
-    },
-    onCancelClick: () => {
-      if (lt(!1), be.secondaryButtonText === f.buttons.no) {
-        const g = qt.filter(
-          (j) => j !== yt.toString()
-        );
-        Ut(
-          g
-        ), F(
-          Dt,
-          yt,
-          !1
-        );
-      }
-    }
-  }, Co = () => {
-    R || Wr(Wn) ? (Tt({
-      title: f.discardTitle,
-      description: f.discardDescription,
-      primaryButtonText: f.buttons.discard,
-      secondaryButtonText: f.buttons.cancel
-    }), lt(!0)) : (L(x), de?.());
-  }, Jn = () => {
-    Tt({
-      title: e.remiStage === "draft" ? f.deleteDraftTitle : f.deleteReportTitle,
-      description: f.deleteAlertDescription,
-      primaryButtonText: f.buttons.delete,
-      secondaryButtonText: f.buttons.cancel
-    }), lt(!0);
-  }, Zn = (g) => {
-    qn(g), Tt({
-      title: f.deleteBankAccountTitle,
-      description: f.deleteBankAccountDescription,
-      primaryButtonText: f.buttons.delete,
-      secondaryButtonText: f.buttons.cancel
-    }), lt(!0);
-  }, Qn = () => {
-    Tt({
-      title: f.overwriteTitle,
-      description: f.overwriteDescription,
-      primaryButtonText: f.buttons.yes,
-      secondaryButtonText: f.buttons.no
-    }), lt(!0);
-  }, Xn = () => {
-    let g = !0;
-    const j = [];
-    return Object.values(e.lineDetailSection).forEach((m, S) => {
-      m.type === f.outOfPocketKey && Ln(m) >= 75 && m.file == null && (j.push(m.lineId), g = !1);
-    }), Ut(j), g;
-  }, To = () => {
-    if (u && e.remiStage === "pending_approval" && e.remiStatus !== "rejected")
-      Co();
-    else {
-      Qe("save");
-      const g = ke.getValues(), j = io(
-        g,
-        e.merchantList.merchants,
-        a,
-        ne,
-        e.currencyConversionStatus,
-        e.allCurrencies,
-        e.accountList.accounts,
-        e.classList.classes
-      );
-      ce?.(j);
-      const m = j.whatForSection?.reportTitle;
-      m != null && m.length > 0 ? Y(
-        e.remiStatus === "rejected" ? "pending_approval" : "draft"
-      ) : ke.trigger(`${Ft}.reportTitle`, {
-        shouldFocus: !0
-      });
-    }
-  };
-  let Kt = !1;
-  Object.values(e.addRemiAutoFieldsByLineId).forEach((g) => {
-    g.length > 0 && (Kt = !0);
-  });
-  let ko = [];
-  if (e.remiId == null) {
-    const g = ne ?? 0;
-    g > 0 && (ko = e.approvalRules.allApprovalRules?.filter((j) => {
-      const m = j.criteria[0].range;
-      if (m.max != null) {
-        if (m.min.amount < g && m.max.amount >= g)
-          return j;
-      } else if (m.min.amount < g)
-        return j;
-      return null;
-    }).map((j) => ({
-      ...j,
-      stepsWithStatus: j.steps.map((m) => ({
-        ...m,
-        actorsActivity: [],
-        isOriginalApprovalStep: !0
-      })),
-      isRealTimeApprovalEnabled: !1
-    })));
-  }
-  const er = (g) => {
-    const j = Xn();
-    return ke.handleSubmit(() => {
-      j && (Qe("submit"), w?.trackReimbursementSubmitReimbursement(
-        e.createTime?.format(
-          on.analytics.MMMDashDDDashYYYYFormat
-        ) ?? mo().format(on.analytics.MMMDashDDDashYYYYFormat),
-        a.currencyCode,
-        ne,
-        x
-      ), M(), vo(!0));
-    })(g);
-  }, tr = () => {
-    const g = ke.getValues(), j = io(
-      g,
-      e.merchantList.merchants,
-      a,
-      ne,
-      e.currencyConversionStatus,
-      e.allCurrencies,
-      e.accountList.accounts,
-      e.classList.classes
-    );
-    ce?.(j), H();
-  }, or = e.reimbursementInfo?.billStatus.code == "approved" && e.reimbursementInfo?.billPaymentStatus.code ? e.reimbursementInfo?.billPaymentStatus : e.reimbursementInfo?.billStatus, nr = e.reimbursementInfo?.paymentDate != null ? rt(
-    hn(
-      e.reimbursementInfo.paymentDate.toDate(),
-      [0, 6],
-      e.achSameDayMaxDays
-    ).toDateString()
-  ) : void 0, rr = e.reimbursementInfo?.expectedDepositDate ?? nr, ir = x != null && e.remiStage === "draft", jo = _r(
-    e.duplicateLineByLineId
-  ), Gt = e.duplicateReimbursementStatus.fetchState === "Completed" && jo > 0, { requestToOpenThread: Yt, setRequestToOpenThread: Io, setOpenThread: Jt } = ur(Or), { threads: ft, isLoading: et } = Pr(
-    {
-      application: "dashboard",
-      companyId: Re.currentTenant?.companyId,
-      tab: "reimbursement",
-      entityId: x,
-      // Use remiId here
-      isGlobalComment: !1
-    },
-    "both",
-    !1
-  );
-  fe(() => {
-    Yt?.threadId != null && ft.length > 0 && !et && (Jt(Yt.threadId), Io(null));
-  }, [
-    Yt,
-    ft,
-    et,
-    Jt,
-    Io
-  ]);
-  const ar = xt(() => x == null ? [] : ft.filter(
-    (g) => g.resolved === !1 && !g.id.includes(Br)
-  ), [ft, x]).length, lr = (g, j) => {
-    Jt(j);
-    const m = g.entityType.split("."), S = parseInt(m[2]);
-    if (isNaN(S)) {
-      se(!1);
-      return;
-    }
-    const kt = `${S + 1}`, z = e.lineDetailSection[S + 1].type;
-    m.includes(f.mileageKey) && z === f.outOfPocketKey ? J(
-      Ao(f.mileageKey),
-      kt,
-      x
-    ) : m.includes(f.outOfPocketKey) && z === f.mileageKey && J(
-      Ao(f.outOfPocketKey),
-      kt,
-      x
-    ), se(!1);
-  };
-  return /* @__PURE__ */ t.jsx(_a, { ref: y, children: /* @__PURE__ */ t.jsx(
-    Ar,
-    {
-      sharedItems: {
-        sharedFunctions: void 0,
-        sharedRef: { contentWrapperRef: Te.current ?? null }
-      },
-      children: /* @__PURE__ */ t.jsxs(un, { ...ke, children: [
-        /* @__PURE__ */ t.jsx(
-          "form",
-          {
-            id: rn(nn),
-            onSubmit: (g) => er(g),
-            children: /* @__PURE__ */ t.jsxs(fl, { windowSize: A, ref: Te, children: [
-              Hn ? /* @__PURE__ */ t.jsx(
-                bo,
-                {
-                  titleComponent: /* @__PURE__ */ t.jsx(kn, { children: be.title }),
-                  descriptionComponent: /* @__PURE__ */ t.jsx(Tn, { children: be.description }),
-                  primaryButtonText: be.primaryButtonText,
-                  secondaryButtonText: be.secondaryButtonText,
-                  action: Yn,
-                  proceedButtonVariant: be.title === f.deleteBankAccountTitle || be.title === f.deleteDraftTitle || be.title === f.deleteReportTitle || be.title === f.discardTitle ? "danger" : "primary",
-                  isEditPopup: be.title === f.deleteBankAccountTitle
-                }
-              ) : null,
-              Kn ? /* @__PURE__ */ t.jsx(
-                Oa,
-                {
-                  reimbursementId: x,
-                  submitFetchState: e.saveStatus?.fetchState ?? "Not-Started",
-                  duplicateReimbursementStatus: e.duplicateReimbursementStatus.fetchState,
-                  hasDuplicateLine: Gt,
-                  numberOfDuplicateLines: jo,
-                  setShowDuplicatePopup: vo,
-                  submitReport: tr,
-                  fetchDuplicateReimbursement: k,
-                  clearDuplicateReimbursementDetail: M,
-                  clearRemiSaveStatus: ie,
-                  analytics: w
-                }
-              ) : null,
-              Je ? /* @__PURE__ */ t.jsx(ln, { windowSize: A }) : null,
-              Ne ? /* @__PURE__ */ t.jsxs(
-                ln,
-                {
-                  windowSize: A,
-                  "data-testid": q("skip-autofill-section"),
-                  children: [
-                    A === "small" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                      /* @__PURE__ */ t.jsx(el, { children: /* @__PURE__ */ t.jsx(
-                        so,
-                        {
-                          partOfSkipAutoFill: !0,
-                          size: A,
-                          onClick: () => gt(!1),
-                          "data-testid": q(
-                            "close-invoice-upload"
-                          ),
-                          children: /* @__PURE__ */ t.jsx(lo, { withOverlay: !0, children: /* @__PURE__ */ t.jsx(ao, {}) })
-                        }
-                      ) }),
-                      /* @__PURE__ */ t.jsx(ol, { children: Ht })
-                    ] }) : null,
-                    /* @__PURE__ */ t.jsx(
-                      On,
-                      {
-                        showAutofill: Ne,
-                        analytics: w,
-                        onSkipAutofill: () => {
-                          w?.trackReimbursementSkipAutofill(), gt(!1);
-                        },
-                        uploadInvoiceEndPoint: h,
-                        authParams: i,
-                        style: {
-                          width: X.leftSectionWidth.valuePercentage(A),
-                          boxSizing: "border-box",
-                          backgroundColor: A === "small" ? Ue.colors.grey4 : "unset",
-                          padding: A === "small" ? `${o.sp5} ${o.sp3}` : `78px ${o.sp6} 15px ${o.sp8}`,
-                          margin: A === "small" ? o.sp0 : void 0
-                        },
-                        onInvoiceUpload: (g) => F(
-                          g,
-                          yt,
-                          !0
-                        ),
-                        dropFilePlaceholder: {
-                          upload: f.dropReceipt.upload,
-                          single: f.dropReceipt.single,
-                          or: f.dropReceipt.or,
-                          multiple: f.dropReceipt.multiple,
-                          receipts: f.dropReceipt.receipts
-                        },
-                        updateInvoiceUploadFetchState: Ae,
-                        showInfoText: !1,
-                        allowMultiFiles: Ne,
-                        type: "reimbursement"
-                      }
-                    ),
-                    A !== "small" ? /* @__PURE__ */ t.jsx(tl, { children: /* @__PURE__ */ t.jsx(
-                      so,
-                      {
-                        partOfSkipAutoFill: !0,
-                        onClick: () => gt(!1),
-                        "data-testid": q(
-                          "close-invoice-upload"
-                        ),
-                        children: /* @__PURE__ */ t.jsx(lo, { withOverlay: !0, children: /* @__PURE__ */ t.jsx(ao, {}) })
-                      }
-                    ) }) : null
-                  ]
-                }
-              ) : null,
-              /* @__PURE__ */ t.jsxs(
-                ml,
-                {
-                  windowSize: A,
-                  "data-testid": q(
-                    "edit-reimbursement-detail-page-nav-bar-container"
-                  ),
-                  children: [
-                    A !== "small" ? /* @__PURE__ */ t.jsx(
-                      zo,
-                      {
-                        style: { width: "42%" },
-                        "data-testid": q(
-                          "edit-reimbursement-detail-page-left-nav-bar"
-                        ),
-                        title: "",
-                        leftSideComponent: /* @__PURE__ */ t.jsx(
-                          pl,
-                          {
-                            "data-testid": q(
-                              "zeni-logo-spend-management-reimbursement-detail-page"
-                            ),
-                            onClick: le
-                          }
-                        ),
-                        enableTitleOnScroll: !1,
-                        scrollableContent: y,
-                        backgroundColor: Ue.colors.background,
-                        keepBackgroundOnScroll: !0,
-                        source: "EditReimbursementDetailPage"
-                      }
-                    ) : null,
-                    A !== "small" ? /* @__PURE__ */ t.jsx(Da, {}) : null,
-                    /* @__PURE__ */ t.jsx(
-                      zo,
-                      {
-                        style: { width: X.navBarWidth.valuePercentage(A) },
-                        "data-testid": q(
-                          "edit-reimbursement-detail-page-right-nav-bar"
-                        ),
-                        source: "EditReimbursementDetailPage",
-                        title: Ht,
-                        leftSideComponent: /* @__PURE__ */ t.jsx(t.Fragment, {}),
-                        rightSideComponent: Ne != !0 ? /* @__PURE__ */ t.jsxs(hl, { children: [
-                          v && x != null ? /* @__PURE__ */ t.jsxs(
-                            gl,
-                            {
-                              isDisabled: et,
-                              "data-testid": q(
-                                "remi-comment-button"
-                              ),
-                              onClick: et ? () => null : (g) => {
-                                g.preventDefault(), g.stopPropagation(), ht({
-                                  roomId: Ct,
-                                  companyId: Re.currentTenant?.companyId ?? "",
-                                  companyName: Re.currentTenant?.companyName ?? "",
-                                  entityType: "reimbursement.details",
-                                  entityId: x
-                                }), se(!0), w?.trackCommentActivity(
-                                  "reimbursement",
-                                  // pageName
-                                  "clicked",
-                                  // activityType
-                                  Re.currentTenant?.companyName ?? "",
-                                  // tenantName
-                                  Re.controllersList.controllers.map(
-                                    (j) => Mr(j)
-                                  ),
-                                  // controllerName
-                                  void 0,
-                                  // status
-                                  void 0,
-                                  // createdBy
-                                  "page icon"
-                                  // source
-                                );
-                              },
-                              children: [
-                                /* @__PURE__ */ t.jsx(
-                                  Lr,
-                                  {
-                                    count: et ? void 0 : ar,
-                                    isLoading: et,
-                                    style: { left: "12px" }
-                                  }
-                                ),
-                                /* @__PURE__ */ t.jsx(yl, {})
-                              ]
-                            }
-                          ) : null,
-                          /* @__PURE__ */ t.jsx(
-                            so,
-                            {
-                              size: A,
-                              onClick: () => Co(),
-                              "data-testid": q("close-nav-bar"),
-                              children: /* @__PURE__ */ t.jsx(lo, { withOverlay: !1, children: /* @__PURE__ */ t.jsx(ao, {}) })
-                            }
-                          )
-                        ] }) : null,
-                        enableTitleOnScroll: A !== "small",
-                        scrollThreshold: 64,
-                        scrollableContent: y,
-                        backgroundColor: Ue.colors.grey4
-                      }
-                    )
-                  ]
-                }
-              ),
-              A === "small" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                /* @__PURE__ */ t.jsx(ul, { children: Ht }),
-                /* @__PURE__ */ t.jsx(
-                  Rr,
-                  {
-                    progressSectionObj: or,
-                    createDate: e.createTime,
-                    paymentDate: rr,
-                    scheduleDate: e.reimbursementInfo?.paymentDate,
-                    approvedDate: e.latestApprovedDate,
-                    isBillUploaded: x != null ? !0 : e.uploadStatus === "Completed"
-                  }
-                ),
-                Kt && /* @__PURE__ */ t.jsxs(il, { children: [
-                  /* @__PURE__ */ t.jsx(rl, {}),
-                  /* @__PURE__ */ t.jsx(al, { children: f.banner })
-                ] }),
-                e.isProcessing ? /* @__PURE__ */ t.jsx(
-                  bn,
-                  {
-                    variant: "warning",
-                    style: {
-                      margin: A === "small" ? `${o.sp5} ${o.sp3}` : `${o.sp3} ${o.sp8} ${o.sp3} ${o.sp6}`
-                    },
-                    title: tn.duplicateWarning.title,
-                    description: tn.duplicateWarning.description
-                  }
-                ) : Gt ? /* @__PURE__ */ t.jsxs(ll, { size: A, children: [
-                  /* @__PURE__ */ t.jsx(Ka, {}),
-                  /* @__PURE__ */ t.jsxs(cl, { children: [
-                    /* @__PURE__ */ t.jsx(sl, { children: f.thereSeems }),
-                    /* @__PURE__ */ t.jsx(dl, { children: f.pleaseFind })
-                  ] })
-                ] }) : null,
-                /* @__PURE__ */ t.jsx(
-                  An,
-                  {
-                    isReimbursementCommentingEnabled: v,
-                    sectionId: Ft,
-                    reimbursementId: e.remiId,
-                    reportTitle: e.whatForSection.reportTitle
-                  }
-                )
-              ] }) : null,
-              /* @__PURE__ */ t.jsx(
-                ra,
-                {
-                  onDuplicateLineClick: ae,
-                  reimbursementId: x,
-                  remiDetails: e,
-                  uploadInvoiceEndPoint: h,
-                  authParams: i,
-                  showSkipAutoFill: Ne,
-                  setShowSkipAutoFill: gt,
-                  isReimbursementCommentingEnabled: v,
-                  isAutoFieldsExist: Kt,
-                  totalAmount: ne,
-                  removeFileFromLine: xe,
-                  onReplaceClick: Qn,
-                  onReceiptsUpload: F,
-                  currencyConversionStatus: e.currencyConversionStatus,
-                  setCurrentLineIdForUpload: Vn,
-                  setUploadedReceiptPayload: Un,
-                  updateInvoiceUploadFetchState: Ae,
-                  clearTentativeNameForLine: Le,
-                  defaultCurrency: a,
-                  companyMileageConfigInfo: d,
-                  isUserAdmin: u,
-                  setShowBankAccountPage: _t,
-                  bankAccounts: c,
-                  onDeleteBankAccount: Zn,
-                  analytics: w,
-                  fileRequiredLineIds: qt,
-                  isSignedInUserReimbursementCreator: p,
-                  uncategorizedAccounts: b,
-                  showTotalAmountLoader: pt,
-                  duplicateLineByLineId: e.duplicateLineByLineId,
-                  hasDuplicateLine: Gt,
-                  removeDuplicateReimbursementForLine: oe,
-                  scrollContainerRef: y
-                }
-              ),
-              /* @__PURE__ */ t.jsxs(
-                xl,
-                {
-                  showSkipAutoFill: Ne,
-                  windowSize: A,
-                  children: [
-                    A !== "small" ? /* @__PURE__ */ t.jsx(an, {}) : null,
-                    /* @__PURE__ */ t.jsx(bl, { windowSize: A, children: /* @__PURE__ */ t.jsxs(wl, { windowSize: A, children: [
-                      e.remiId !== void 0 && /* @__PURE__ */ t.jsx(
-                        Fo,
-                        {
-                          amount: ne ?? 0,
-                          activities: e.remiActivities,
-                          stage: e.remiStage ?? "draft",
-                          onAddNewRule: me,
-                          entity: "reimbursement",
-                          historicActivities: e.remiHistory.activities
-                        }
-                      ),
-                      e.remiId == null && ne != null && ne > 0 ? /* @__PURE__ */ t.jsx(
-                        Fo,
-                        {
-                          amount: ne ?? 0,
-                          activities: ko,
-                          stage: "draft",
-                          entity: "reimbursement",
-                          historicActivities: e.remiHistory.activities
-                        }
-                      ) : null
-                    ] }) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ t.jsx($l, {}),
-              /* @__PURE__ */ t.jsxs(
-                nl,
-                {
-                  showSkipAutoFill: Ne,
-                  windowSize: A,
-                  children: [
-                    A !== "small" ? /* @__PURE__ */ t.jsx(an, {}) : null,
-                    /* @__PURE__ */ t.jsx(
-                      qa,
-                      {
-                        windowSize: A,
-                        onClick: (g) => {
-                          g.stopPropagation(), He === !0 && Ke(!1);
-                        },
-                        children: /* @__PURE__ */ t.jsx(
-                          jn,
-                          {
-                            formId: rn(nn),
-                            separatorStyle: { marginRight: o.sp4 },
-                            showCancel: p,
-                            cancelBtn: {
-                              label: u && e.remiStage === "pending_approval" && e.remiStatus !== "rejected" ? A === "small" ? f.buttons.discard : f.buttons.discardChanges : A === "small" ? f.buttons.save : f.buttons.saveChanges,
-                              isLoading: Ze === "save" && e.saveStatus?.fetchState === "In-Progress",
-                              onClick: To,
-                              style: { width: X.footerButtonWidth.value(A) },
-                              reverseSpinnerColor: !1
-                            },
-                            primaryBtn: {
-                              label: Va(
-                                p,
-                                u,
-                                e,
-                                A
-                              ),
-                              isDisabled: !p,
-                              style: {
-                                width: p ? X.footerButtonWidth.value(A) : "auto"
-                              },
-                              type: p ? "submit" : "button",
-                              onClick: p ? () => null : To,
-                              isLoading: !p && Ze === "save" && e.saveStatus?.fetchState === "In-Progress"
-                            },
-                            rightSideComponent: /* @__PURE__ */ t.jsx(Ua, { children: /* @__PURE__ */ t.jsxs(Za, { windowSize: A, children: [
-                              He ? /* @__PURE__ */ t.jsx(
-                                sn,
-                                {
-                                  onClickAway: () => Ke(!1),
-                                  children: /* @__PURE__ */ t.jsx(
-                                    Ja,
-                                    {
-                                      windowSize: A,
-                                      "data-testid": q(
-                                        "remi-other-actions-container"
-                                      ),
-                                      children: /* @__PURE__ */ t.jsx(
-                                        Qa,
-                                        {
-                                          onClick: Jn,
-                                          "data-testid": q(
-                                            "delete-report-action"
-                                          ),
-                                          children: f.buttons.deleteReport
-                                        }
-                                      )
-                                    }
-                                  )
-                                }
-                              ) : null,
-                              /* @__PURE__ */ t.jsx(Ya, { windowSize: A, children: ir === !0 ? /* @__PURE__ */ t.jsx(
-                                Ga,
-                                {
-                                  windowSize: A,
-                                  "data-testid": q(
-                                    "more-details-button"
-                                  ),
-                                  children: /* @__PURE__ */ t.jsx(
-                                    Ha,
-                                    {
-                                      onClick: () => Ke(!He)
-                                    }
-                                  )
-                                }
-                              ) : null })
-                            ] }) }),
-                            style: {
-                              minHeight: 62
-                            }
-                          }
-                        )
-                      }
-                    )
-                  ]
-                }
-              ),
-              v && x != null ? /* @__PURE__ */ t.jsx(mr, { id: Ct, children: /* @__PURE__ */ t.jsx(
-                zr,
-                {
-                  isDrawerOpen: W,
-                  allowComposer: !0,
-                  drawerTitle: Ma,
-                  threads: ft,
-                  autoExpand: !0,
-                  autoFocus: !1,
-                  filter: {
-                    application: "dashboard",
-                    companyId: _?.companyId ?? Ra,
-                    isGlobalComment: !1,
-                    tab: "reimbursement"
-                  },
-                  isLoading: et,
-                  threadMetadata: _ ? {
-                    companyName: _.companyName,
-                    companyId: _.companyId,
-                    entityId: _.entityId,
-                    entityType: _.entityType,
-                    isGlobalComment: !1,
-                    application: "dashboard",
-                    tab: "reimbursement",
-                    url: window.location.href
-                  } : void 0,
-                  textOverrides: {
-                    composerPlaceholder: za,
-                    replyComposerPlaceholder: Fa,
-                    threadResolve: Na,
-                    threadUnResolve: Wa
-                  },
-                  onThreadClick: (g, j) => lr(g, j),
-                  onCloseAllThreadsDrawer: () => se(!1),
-                  drawerSectionStyle: {
-                    width: "400px",
-                    backgroundColor: Ue.colors.background
-                  }
-                }
-              ) }) : null
-            ] })
-          }
-        ),
-        _n ? /* @__PURE__ */ t.jsx(Xa, { windowSize: A, children: /* @__PURE__ */ t.jsx(
-          fa,
-          {
-            bankAccountCreationState: C,
-            setShowBankAccountPage: _t,
-            plaidConnectionDetails: l,
-            onFetchLinkTokenClick: Me,
-            onEstablishConnectionClick: pe,
-            onSaveHandler: B,
-            bankAccountToCreate: O,
-            bankNameByRouting: $,
-            fetchBankNameByRoutingStatus: T,
-            onUserBankDetailsUpdated: P,
-            onFetchBankName: G,
-            onBackClick: () => {
-              Ye(), _t(!1);
-            }
-          }
-        ) }) : null
-      ] })
-    }
-  ) });
-}, Va = (e, i, a, d) => e ? a.reimbursementId != null && a.remiStage === "pending_approval" ? f.buttons.resubmit : f.buttons.submit : i && a.remiStage === "pending_approval" && a.remiStatus !== "rejected" ? d === "small" ? f.buttons.discard : f.buttons.discardChanges : d === "small" ? f.buttons.save : f.buttons.saveChanges, _a = n.div`
-  position: relative;
-  height: 100vh;
-  overflow-y: scroll;
-`, Da = n.div`
-  position: fixed;
-  top: 0;
-  left: 42vw;
-  width: 100%;
-  height: 100vh;
-  background: transparent;
-  box-shadow: 0 2px ${o.sp1} ${({ theme: e }) => e.colors.dropShadowNormal};
-  pointer-events: none;
-  z-index: 3;
-`, qa = n.div`
-  width: ${(e) => X.rightSectionWidth.valuePercentage(e.windowSize)};
-`, Ua = n.div`
-  display: flex;
-  justify-content: flex-end;
-`, Ha = n(Er)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${o.sp5};
-  height: ${o.sp5};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Ka = n(Vr)`
-  width: ${o.sp4};
-  height: ${o.sp4};
-  color: ${I.brandColorGoldDark};
-`, Ga = n.div`
-  display: flex;
-  margin-left: ${(e) => e.windowSize === "small" ? o.sp4 : o.sp5};
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.grey1};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Ya = n.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`, Ja = n.div`
-  display: flex;
-  width: auto;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey5};
-  color: ${(e) => e.theme.colors.hero};
-  cursor: pointer;
-  padding-top: ${o.sp1};
-  padding-bottom: ${o.sp1};
-  position: absolute;
-  bottom: ${(e) => X.otherActionsContainerBottom.valuePx(e.windowSize)};
-  z-index: 3;
-  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
-  border-radius: ${o.sp1};
-  right: ${(e) => X.right.valuePx(e.windowSize)};
-  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.grey1} 3D`};
-`, Za = n.div`
-  width: 100%;
-  justify-content: flex-end;
-  position: ${(e) => e.windowSize === "small" ? "static" : "relative"};
-  right: ${(e) => X.actionsContainerRight.valuePx(e.windowSize)};
-  height: 100%;
-  display: flex;
-`, Qa = n(go)`
-  display: flex;
-  align-items: center;
-  width: -webkit-fill-available;
-  padding-left: ${o.sp3};
-  padding-right: ${o.sp3};
-  height: ${o.sp6};
-  box-sizing: border-box;
-  &:hover {
-    background-color: ${(e) => e.theme.colors.background};
-  }
-`, Xa = n.div`
-  overflow-y: auto;
-  z-index: 5;
-  height: 100vh;
-  position: fixed;
-  background: ${(e) => e.theme.colors.grey4};
-  width: ${(e) => X.rightSectionWidth.valuePercentage(e.windowSize)};
-  right: 0;
-  top: 0;
-`, el = n.div`
-  background: ${(e) => e.theme.colors.grey4};
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: end;
-`, tl = n.div`
-  width: 58%;
-`, ol = n(wo)`
-  padding: ${o.sp3} ${o.sp3} 0 ${o.sp3};
-  background: ${(e) => e.theme.colors.grey4};
-  color: ${(e) => e.theme.colors.primary};
-`, nl = n.div`
-  display: ${(e) => e.windowSize === "small" && e.showSkipAutoFill ? "none" : "flex"};
-  width: 100%;
-  position: fixed;
-  bottom: 0;
-  z-index: 3;
-`, an = n.div`
-  width: 42%;
-`, rl = n(yo)`
-  color: ${(e) => e.theme.colors.primary};
-  width: ${o.sp3};
-  height: ${o.sp3};
-`, il = n.div`
-  display: flex;
-  gap: ${o.sp2};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  padding: ${o.sp3};
-  border-radius: ${o.sp2};
-  align-items: center;
-  margin: ${o.sp3};
-`, al = n.span`
-  color: ${(e) => e.theme.colors.hero};
-`, ll = n.div`
-  display: flex;
-  gap: ${o.sp2};
-  padding: ${o.sp3};
-  border-radius: ${o.sp2};
-  align-items: start;
-  margin-top: ${(e) => X.duplicateBannerWrapperMarginTop.valuePx(e.size)};
-  margin-right: ${(e) => X.duplicateBannerWrapperMarginRight.valuePx(e.size)};
-  margin-bottom: ${(e) => X.duplicateBannerWrapperMarginBottom.valuePx(e.size)};
-  margin-left: ${(e) => X.duplicateBannerWrapperMarginLeft.valuePx(e.size)};
-  background-color: ${I.alertLight};
-  border: 1px solid ${(e) => e.theme.colors.brandColorGoldDark};
-`, sl = n(Vt)`
-  color: ${(e) => e.theme.colors.brandColorGoldDark};
-`, cl = n.div`
-  width: 100%;
-`, dl = n(fo)`
-  color: ${(e) => e.theme.colors.brandColorGoldDark};
-`, ul = n(wo)`
-  letter-spacing: -0.02em;
-  color: ${(e) => e.theme.colors.primary};
-  margin: ${o.sp3};
-`, ln = n.div`
-  display: flex;
-  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
-  height: 100vh;
-  visibility: inherit;
-  width: 100%;
-  background-color: ${I.overlayDark};
-  z-index: 11; // This is to ensure that the skip autofill section is above the AI CFO icon whose value is 10
-  position: fixed;
-`, ml = n.div`
-  z-index: 3;
-  min-height: 62px;
-  height: 62px;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  justify-content: space-between;
-  position: fixed;
-`, pl = n(Fr)`
-  display: flex;
-  color: ${(e) => e.theme.colors.brandColorJade};
-  cursor: pointer;
-  width: ${o.sp4};
-  height: ${o.sp4};
-`, ao = n(In)`
-  cursor: pointer;
-  width: ${o.sp4};
-  height: ${o.sp4};
-  float: right;
-  color: inherit;
-`, lo = n.div`
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.withOverlay ? I.primaryDark : e.theme.colors.primary};
-  }
-`, hl = n.div`
-  margin-top: ${(e) => X.closeMarginTop.valuePx(e.windowSize)};
-  display: flex;
-  float: right;
-`, gl = n.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  float: right;
-  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, yl = n(Nr)`
-  display: flex;
-  width: ${o.sp4};
-  height: ${o.sp4};
-  align-items: center;
-  justify-content: center;
-`, so = n.div`
-  margin-top: ${(e) => e.partOfSkipAutoFill === !0 ? X.closeMarginTop.valuePx(e.size) : 0};
-  margin-left: ${o.sp5};
-  margin-right: ${(e) => e.partOfSkipAutoFill === !0 ? X.closeMarginRight.valuePx(e.size) : 0};
-`, fl = n.div`
-  display: flex;
-  flex-direction: column;
-  width: 100vw;
-  overflow-x: hidden;
-  background: -webkit-linear-gradient(
-    to right,
-    ${(e) => e.theme.colors.background} 42%,
-    ${(e) => e.theme.colors.grey4} 42%
-  );
-  background: -moz-linear-gradient(
-    to right,
-    ${(e) => e.theme.colors.background} 42%,
-    ${(e) => e.theme.colors.grey4} 42%
-  );
-  background: -o-linear-gradient(
-    to right,
-    ${(e) => e.theme.colors.background} 42%,
-    ${(e) => e.theme.colors.grey4} 42%
-  );
-  background: linear-gradient(
-    to right,
-    ${(e) => e.theme.colors.background} 42%,
-    ${(e) => e.theme.colors.grey4} 42%
-  );
-  ${(e) => e.windowSize === "small" && `
-    background: ${e.theme.colors.grey4};
-  `}
-  min-height: 100vh;
-`, xl = n.div`
-  display: ${(e) => e.windowSize === "small" && e.showSkipAutoFill ? "none" : "flex"};
-  width: 100%;
-  margin-bottom: ${(e) => X.bottomMargin.valuePx(e.windowSize)};
-`, bl = n.div`
-  width: ${(e) => X.rightSectionWidth.valuePercentage(e.windowSize)};
-`, wl = n.div`
-  margin-left: ${(e) => X.leftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => X.rightMargin.valuePx(e.windowSize)};
-`, $l = n.div`
-  display: flex;
-  flex-direction: column;
-  height: ${o.sp11};
-`;
-export {
-  Fl as default,
-  rn as uniqueName
-};