@zeniai/web-components 3.16.62 → 3.16.64

package/dist/EditReimbursementDetailPage-DWDYjBVQ.js

@@ -0,0 +1,4553 @@
+import { u as $t, d as it, m as Oe, 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 Po, F as un, l as Oo } from "./vendor-.pnpm-DtFedGku.js";
+import jt, { useEffect as fe, useState as Q, 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, iy as Nt, a as $e, R as s, hv as Se, hx as ve, aH as gn, ii as Lo, fj as nt, aQ as po, iz as yn, S as o, iA as co, gJ as Ge, D as r, j as q, fQ 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, iB as Wt, a5 as fr, az as yo, B as Mo, is as bn, at as Ro, L as Et, p as fo, z as xr, E as br, il as wr, hu as wn, t as zt, fn as $n, fu as $r, hB as Sr, _ as Vt, e_ as Sn, K as vn, w as Cn, hi as xo, aN as bo, aO as Tn, aP as kn, hH as vr, eP as Cr, ap as jn, aV as Tr, y as kr, aD as uo, iC as jr, b as In, V as wo, ba as Ir, bc as Pr, T as Or, i as Br, N as Ar, iD as Lr, aE as zo, k as Mr, ae as Rr, ik as zr, iq as Fo, m as Fr, eQ as Nr, e as Wr, aG as Er, iE as Vr, X as _r } from "./index-lPBSSV1q.js";
+import Pn from "./InvoiceUploadSection-141lrhah.js";
+import { u as Ie, w as Ft, l as $o, p as wt, s as No, g as Dr } from "./types-DyvtCprH.js";
+import { L as qr } from "./LabeledCreatableSingleSelectField-CUFubv6Z.js";
+import { C as Ur } from "./CurrencySelectField-D6O3zcTl.js";
+import { B as Hr } from "./BankAccountSection-_YJHKIZf.js";
+import { B as Kr, a as Gr } from "./BankAccountWarningSection-C6ufsg3M.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: Qr
+} = $e.getLocalizedStrings(), Zr = ({
+  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}`, P = $t(), {
+    formState: { errors: T },
+    getValues: O,
+    trigger: G
+  } = it(), B = Qr.strings.empty, k = O(
+    We(h, "distanceInMiles")
+  ), M = Wo.largeLabelWidth.value($), ie = O(We(h, "class")), oe = a.find(
+    (L) => L.classId === ie?.selectedOption
+  ), ae = We(h, "class"), ee = Oe(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 && Oe(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 ${P.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] = Q(!1), {
+    getValues: l,
+    formState: { errors: C }
+  } = it(), $ = $t(), c = ze(), p = d != null, b = l(e), P = `${b?.amount} ${b?.currency?.selectedOption}`, T = Oe(C, e) && Rt(C, `${e}.amount`) != null, O = Oe(C, e) && Rt(C, `${e}.currency`) != null, G = h === !0 ? T || O : !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: P
+              }
+            ) : /* @__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(
+                Ur,
+                {
+                  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])
+}, On = {
+  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 = Oe($, a.name) && Rt($, `${a.name}.amount`) != null, p = Oe($, a.name) && Rt($, `${a.name}.currency`) != null, b = a.showAmountCurrencyError === !0 ? c || p : !1, P = 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 O = null;
+      return u === !0 && l && x && (O = /* @__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: [
+            O,
+            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)
+              }
+            }
+          ),
+          P ? /* @__PURE__ */ t.jsx(ii, { size: C, hasError: P, 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) => `${On.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) => `${On.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: P
+}) => {
+  const T = ze(), O = 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 = Oe(k, ee), F = M(ye(u, "account")), Y = a.find(
+    (y) => y.qboId === F?.selectedOption || y.accountId === F?.selectedOption
+  ), H = ye(u, "account"), L = Oe(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: O.currentTenant?.companyId,
+    tab: "reimbursement",
+    entityId: c
+  }, xe = `dashboard_${O.currentTenant?.companyId}`, le = (y) => h.find((Te) => Te.id === y)?.name ?? y, Be = a.find(
+    (y) => y.qboId === i.account
+  ), Ae = (y) => [
+    P.expense?.qboId,
+    P.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: O.currentTenant?.companyId ?? re,
+        companyName: O.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(
+          qr,
+          {
+            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(Pt, {}),
+    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: O.currentTenant?.companyId ?? re,
+        companyName: O.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(Pt, {}),
+    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: O.currentTenant?.companyId ?? re,
+        companyName: O.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(Pt, {}),
+    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: O.currentTenant?.companyId ?? re,
+        companyName: O.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(Pt, {}),
+    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: O.currentTenant?.companyId ?? re,
+        companyName: O.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 && Oe(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: O.currentTenant?.companyId ?? re,
+        companyName: O.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 && Oe(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"};
+`, Pt = 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: P,
+  isReimbursementCommentingEnabled: T,
+  isAddReimbursementDisabled: O,
+  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] = Q(!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: P != null,
+              haveBorderRadius: c?.duplicateLineId == null,
+              children: [
+                /* @__PURE__ */ t.jsx(
+                  Ro,
+                  {
+                    isDisabled: P != null || O ? "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: P != null || O ? "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(Pi, {}),
+      me === K.outOfPocketKey ? /* @__PURE__ */ t.jsx(
+        gi,
+        {
+          lineIndex: h,
+          reimbursementId: M,
+          uncategorizedAccounts: ae,
+          isReimbursementCommentingEnabled: T,
+          isDisabled: P,
+          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: O,
+          accountsHierarchyList: ce,
+          classHierarchyList: J
+        }
+      ) : /* @__PURE__ */ t.jsx(
+        Zr,
+        {
+          lineIndex: h,
+          reimbursementId: M,
+          isReimbursementCommentingEnabled: T,
+          isDisabled: P,
+          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: O,
+          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"};
+`, Pi = n.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, Oi = (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: Oi(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: Ot }
+    }
+  },
+  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: P,
+  accountList: T,
+  classList: O,
+  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: Qe,
+  allCurrencies: Ze,
+  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(
+          Pn,
+          {
+            customError: ke ? D.requireReceipt : void 0,
+            analytics: le,
+            showAutofill: !1,
+            uploadInvoiceEndPoint: P,
+            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(() => Qe?.(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: O,
+          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: Ze,
+          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(
+          Qi,
+          {
+            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(
+            Zi,
+            {
+              shouldDisplay: F.length === 0,
+              windowSize: _,
+              hasError: Oe(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 ? `${Ot.bankRoutingNumber} ${D.emptyValue}
+  ${Ot.bankAccountNumber} ${D.emptyValue}` : `${Ot.bankRoutingNumber} ${a.bankRoutingNumberAch ?? D.emptyValue}, ${a.bankName ?? D.emptyValue}
+  ${Ot.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"};
+`, Qi = 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)};
+`, Zi = 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")
+}, Z = {
+  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: P,
+  setShowSkipAutoFill: T,
+  setShowBankAccountPage: O,
+  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 = Z.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, Qe = Math.max(
+    ...Object.keys(
+      e.editRemiInitialDetails?.lineDetailSection ?? {}
+    ).map((W) => Number(W)),
+    0
+  ), Ze = () => {
+    const W = le[le.length - 1], se = Fn(
+      le.length,
+      Number(W.lineId) > Qe ? String(Number(W.lineId) + 1) : String(Qe + 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] = Q({}), 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: P[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: Ze,
+        totalAmount: w,
+        showTotalAmountLoader: ce,
+        hasDuplicateLine: l,
+        totalNumberOfLines: le.length,
+        updateInvoiceUploadFetchState: ee,
+        clearTentativeNameForLine: U,
+        tentativeMerchantName: Le[W.lineId],
+        companyMileageConfigInfo: c,
+        defaultCurrency: x,
+        setShowBankAccountPage: O,
+        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(Zt, { 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(Zt, { windowSize: y }) : null,
+        /* @__PURE__ */ t.jsx(Xt, { windowSize: y, children: /* @__PURE__ */ t.jsxs(
+          ha,
+          {
+            windowSize: y,
+            onClick: () => {
+              pe === !1 && Ze();
+            },
+            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(Zt, { 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: () => O(!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 && O(!0);
+              },
+              hasError: Oe(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) => Z.leftMargin.valuePx(e.windowSize)};
+  margin-right: ${(e) => Z.rightMargin.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => Z.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"};
+`, Zt = 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) => Z.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) => Z.totalMarginBottom.valuePx(e.windowSize)};
+  margin-left: ${(e) => Z.leftMargin.valuePx(e.windowSize)};
+  margin-right: ${(e) => Z.rightMargin.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => Z.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) => Z.paymentToMarginTop.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => Z.paymentToMarginBottom.valuePx(e.windowSize)};
+  margin-left: ${(e) => Z.leftMargin.valuePx(e.windowSize)};
+  margin-right: ${(e) => Z.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) => Z.totalMarginBottom.valuePx(e.windowSize)};
+  margin-left: ${(e) => Z.leftMargin.valuePx(e.windowSize)};
+  margin-right: ${(e) => Z.rightMargin.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => Z.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) => Z.leftMargin.valuePx(e.windowSize)};
+  margin-right: ${(e) => Z.rightMargin.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => Z.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]
+    )
+  }), P = mn(
+    (U) => {
+      h?.(U), $();
+    },
+    [$, h]
+  ), T = a.link_account_no_microdeposit, { open: O } = cr({
+    token: T.linkToken ?? null,
+    onSuccess: P
+  });
+  fe(() => {
+    (rt((/* @__PURE__ */ new Date()).toISOString()).isAfter(T.expiration) || T.linkToken == null) && d?.("link_account_no_microdeposit");
+  }, []);
+  const [G, B] = Q(!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 && Tr.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 Po(c.colors.brandColorJadeLight) : new Po(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(
+          vr,
+          {
+            onClick: () => {
+              b.reset(), O();
+            },
+            title: k.connectYourBank,
+            subTitle: k.loginToBank,
+            header: k.setupAchPayments,
+            icon: {
+              element: /* @__PURE__ */ t.jsx(
+                Cr,
+                {
+                  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(kr)`
+  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};
+`, Pe = {
+  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(Zo, {});
+    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(Zo, {});
+  }
+}, 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;
+  }
+}, Pa = ({
+  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), P = 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(() => {
+    P === "In-Progress" && i === "Completed" && !a && w();
+  }, [
+    P,
+    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(Oa, { size: $ })
+    ) : null,
+    /* @__PURE__ */ t.jsx(
+      bo,
+      {
+        action: {
+          onOkClick: () => {
+            T ? (l(), e === "Error" && C(), p(!0)) : (v?.trackReimbursementReviewDuplicateReportReimbursement(
+              d,
+              u
+            ), h(!1), jr());
+          },
+          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 ? Pe.cancelButtonWidth.value($) : Pe.submitButtonWidth.value($),
+        secondaryButtonWidth: T ? Pe.cancelButtonWidth.value($) : Pe.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(Qo, {}),
+                /* @__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(Qo, {}),
+                /* @__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: Pe.containerWidth.value($),
+          maxWidth: "unset"
+        }
+      }
+    )
+  ] });
+}, Oa = n(In)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${(e) => e.theme.colors.hero};
+  position: fixed;
+  top: 19px;
+  right: ${(e) => Pe.styledCloseIconRight.valuePx(e.size)};
+  z-index: 11;
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Qo = n(Pr)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  min-width: ${o.sp4};
+  color: ${I.brandColorGoldDark};
+`, Zo = 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) => Pe.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) => Pe.confirmationPopUpTitleMarginTop.valuePx(e.size)};
+  padding-left: ${(e) => Pe.confirmationPopUpTitlePaddingLeftRight.valuePx(e.size)};
+  padding-right: ${(e) => Pe.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) => Pe.confirmationPopUpTitlePaddingLeftRight.valuePx(e.size)};
+  padding-right: ${(e) => Pe.confirmationPopUpTitlePaddingLeftRight.valuePx(e.size)};
+  margin-bottom: ${o.sp5};
+  margin-top: ${o.sp4};
+  white-space: pre-line;
+  width: -webkit-fill-available;
+`, Nn = n(Ir)`
+  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(
+      (P) => P.classId === l.mileage.class.selectedOption
+    ), $ = u.find(
+      (P) => P.qboId === l.outOfPocket.account.selectedOption || P.accountId === l.outOfPocket.account.selectedOption
+    ), c = w.find(
+      (P) => P.classId === l.outOfPocket.class.selectedOption
+    ), p = i.find(
+      (P) => P.id === l.outOfPocket.merchant.selectedOption
+    ), b = v.find(
+      (P) => P.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
+  };
+}, zl = ({
+  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: P,
+  fetchBankNameByRoutingStatus: T,
+  onUserBankDetailsUpdated: O,
+  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] = Q(!1), [He, Ke] = Q(!1), [Qe, Ze] = Q("save"), [ne, at] = Q(
+    ro(
+      e.lineDetailSection,
+      e.currencyConversionStatus
+    )
+  ), [pt, Xe] = Q(!1), [_, ht] = Q(
+    null
+  ), [W, se] = Q(!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((Qt) => {
+          ge[Qt.lineId] = {
+            lineId: Qt.lineId,
+            homeCurrencyConversions: Qt.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(
+    () => Oo((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] = Q(
+    x == null
+  ), [yt, Vn] = Q(1), [_n, _t] = Q(!1), [Dn, qn] = Q(""), [Dt, Un] = Q(null), [Hn, lt] = Q(!1), [Kn, vo] = Q(!1), [qt, Ut] = Q([]), [be, Tt] = Q({
+    title: "",
+    description: "",
+    primaryButtonText: "",
+    secondaryButtonText: ""
+  }), Gn = bt(
+    Oo(
+      (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 || Er(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);
+  }, Qn = (g) => {
+    qn(g), Tt({
+      title: f.deleteBankAccountTitle,
+      description: f.deleteBankAccountDescription,
+      primaryButtonText: f.buttons.delete,
+      secondaryButtonText: f.buttons.cancel
+    }), lt(!0);
+  }, Zn = () => {
+    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 {
+      Ze("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 && (Ze("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 = Dr(
+    e.duplicateLineByLineId
+  ), Gt = e.duplicateReimbursementStatus.fetchState === "Completed" && jo > 0, { requestToOpenThread: Yt, setRequestToOpenThread: Io, setOpenThread: Jt } = ur(Or), { threads: ft, isLoading: et } = Br(
+    {
+      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(Ar)
+  ), [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(
+    Lr,
+    {
+      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(
+                Pa,
+                {
+                  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(
+                      Pn,
+                      {
+                        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) => Rr(j)
+                                  ),
+                                  // controllerName
+                                  void 0,
+                                  // status
+                                  void 0,
+                                  // createdBy
+                                  "page icon"
+                                  // source
+                                );
+                              },
+                              children: [
+                                /* @__PURE__ */ t.jsx(
+                                  Mr,
+                                  {
+                                    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(
+                  zr,
+                  {
+                    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: Zn,
+                  onReceiptsUpload: F,
+                  currencyConversionStatus: e.currencyConversionStatus,
+                  setCurrentLineIdForUpload: Vn,
+                  setUploadedReceiptPayload: Un,
+                  updateInvoiceUploadFetchState: Ae,
+                  clearTentativeNameForLine: Le,
+                  defaultCurrency: a,
+                  companyMileageConfigInfo: d,
+                  isUserAdmin: u,
+                  setShowBankAccountPage: _t,
+                  bankAccounts: c,
+                  onDeleteBankAccount: Qn,
+                  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: Qe === "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 && Qe === "save" && e.saveStatus?.fetchState === "In-Progress"
+                            },
+                            rightSideComponent: /* @__PURE__ */ t.jsx(Ua, { children: /* @__PURE__ */ t.jsxs(Qa, { 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(
+                                        Za,
+                                        {
+                                          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(
+                Fr,
+                {
+                  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: P,
+            bankNameByRouting: $,
+            fetchBankNameByRoutingStatus: T,
+            onUserBankDetailsUpdated: O,
+            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(Vr)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${o.sp5};
+  height: ${o.sp5};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Ka = n(_r)`
+  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`};
+`, Qa = 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;
+`, Za = 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(Nr)`
+  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(Wr)`
+  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 {
+  zl as default,
+  rn as uniqueName
+};