@zeniai/web-components 3.16.66 → 3.16.67

package/dist/ReimbursementDetailPage-Bvf_nc_u.js

@@ -1,1514 +0,0 @@
-import { u as zt, j as t, C as Rt } from "./vendor-.pnpm-DtFedGku.js";
-import { useState as C, useRef as Ae, useEffect as oe, useContext as Nt, useMemo as Dt, useCallback as Lt } from "react";
-import a from "@emotion/styled";
-import { RoomProvider as Ot } from "@liveblocks/react";
-import { zeniDate as Wt, getNextNthWorkingDay as _t, isBulkProcessing as Ft } from "@zeniai/client-epic-state";
-import { dz as Kt, dB as Ut, u as Vt, fa as Et, R as p, a as et, T as Gt, i as Ht, N as Yt, aN as Pe, aO as Be, aP as ze, j as h, aE as Re, k as qt, ae as Xt, ik as Jt, is as Ne, S as n, il as De, hv as g, hx as b, ao as x, a5 as Le, hu as Oe, t as K, iq as We, ap as Qt, m as Zt, ir as ne, eQ as eo, e as to, b as oo, av as no, K as ao, p as tt, y as ot, C as U, E as ro, e_ as io, G as so, iF as lo, iE as co, D as c, _ as po, X as mo } from "./index-BUq811J_.js";
-import uo from "./InvoiceUploadSection-D7cfFBMZ.js";
-import { g as ho, u as f, s as yo } from "./types-DyvtCprH.js";
-const l = {
-  labelWidth: new p(120, 160, 160),
-  largeLabelWidth: new p(150, 235, 235),
-  rightMargin: new p(c[3], c[8]),
-  leftMargin: new p(c[3], c[6]),
-  invoiceRightMargin: new p(c[3], c[6]),
-  invoiceLeftMargin: new p(c[3], c[8]),
-  topMargin: new p(c[3], 0),
-  bottomMargin: new p(c[4], 27),
-  activityBottomMargin: new p(96, 0),
-  totalBottomMargin: new p(c[5], c[3]),
-  formBottomMargin: new p(c[5], c[3]),
-  navBarHeight: new p(44, 62),
-  closeMarginTop: new p(0, 0),
-  closeMarginRight: new p(c[3], c[8]),
-  rightSectionWidth: new p(100, 58),
-  leftSectionWidth: new p(100, 42),
-  footerButtonWidth: new p(120, 165),
-  right: new p(c[3], c[0]),
-  actionsContainerRight: new p(c[0], c[6]),
-  otherActionsContainerBottom: new p(58, 44),
-  duplicateBannerWrapperMarginTop: new p(c[5], c[3]),
-  duplicateBannerWrapperMarginRight: new p(c[3], c[8]),
-  duplicateBannerWrapperMarginBottom: new p(c[5], c[3]),
-  duplicateBannerWrapperMarginLeft: new p(c[3], c[6])
-}, go = {
-  formTitle: new no("h6Regular", "h5Regular")
-}, dn = ({
-  remiDetails: e,
-  uploadInvoiceEndPoint: V,
-  authParams: nt,
-  isAdmin: re,
-  signedInUser: ie,
-  showApproveRejectBtns: se,
-  isRealTimeApprovalEnabled: le,
-  isReimbursementCommentingEnabled: m,
-  isShowDeletedReimbursementEnabled: de,
-  isSignedInUserReimbursementCreator: at,
-  updateEditRealTimeApproverClicked: ce,
-  onSaveRealTimeApprovals: pe,
-  redirectToReimbursementListScreen: E,
-  redirectToEditableReimbursementScreen: rt,
-  onDuplicateLineClick: it,
-  approveOrRejectRemi: me,
-  deleteReimbursement: st,
-  cancelAndDeleteReport: ue,
-  handleZeniLogoClick: lt,
-  onAddNewRule: he
-}) => {
-  const d = Kt(), dt = Ut().analytics, r = Vt(), ye = zt(), [ct, M] = C(!1), [G, H] = C(!1), [pt, Y] = C(!1), [q, X] = C("approved"), R = Ae(null), [S, J] = C({
-    title: "",
-    description: "",
-    primaryButtonText: "",
-    secondaryButtonText: ""
-  }), [k, mt] = C(
-    null
-  ), [ut, N] = C(!1), u = `dashboard_${d.currentTenant?.companyId}`, ge = Ae({}), be = (s) => {
-    const i = ge.current[s];
-    i != null && setTimeout(
-      () => yo(i, R.current),
-      100
-    );
-  };
-  oe(() => {
-    (e.deleteStatus.fetchState === "Completed" || e.approvalUpdateStatus.fetchState === "Completed" || e.cancelAndDeleteStatus.fetchState === "Completed") && E();
-  }, [e, E]), oe(() => {
-    const s = window.location.hash;
-    if (s && s.startsWith("#L")) {
-      const i = s.substring(1);
-      be(i);
-    }
-  }, []);
-  const ht = () => {
-    E();
-  };
-  Et({
-    componentName: "reimbursement.details"
-  });
-  const yt = {
-    onOkClick: () => {
-      M(!1), S.primaryButtonText === o.buttons.delete ? st?.() : S.title === o.cancelReportTitle ? ue?.() : S.title === o.cancelAndDeleteReportTitle && ue?.(!0);
-    },
-    onCancelClick: () => {
-      M(!1);
-    }
-  }, j = l.labelWidth.value(r), A = l.largeLabelWidth.value(r), xe = et.getLocalizedStrings(), {
-    common: {
-      texts: { comments: gt },
-      strings: { empty: fe }
-    },
-    collaboration: {
-      threads: {
-        placeholder: { addANewComment: bt, replyAComment: xt },
-        tooltip: { resolveComment: ft, unResolveComment: wt }
-      }
-    },
-    dateFormat: we
-  } = xe, { reimbursementDetail: o, bulkActions: D } = xe.spendManagement.reimbursement, Q = e.remiDetails?.reportTitle, $ = e.remiDetails?.lines ?? [], L = e.remiDetails?.reimbursementInfo.stage, O = e.remiDetails?.reimbursementInfo.billStatus, W = e.remiDetails?.reimbursementInfo.billPaymentStatus, ve = L?.code === "paid", vt = ve ? L : O?.code == "approved" && W?.code ? W : O, w = bo(e.remiDetails), P = O?.code == "approved" && W?.code ? W : O, _ = e.remiDetails?.isDeleted ?? !1, Te = e.remiDetails?.amount, $e = e.remiDetails?.amount.amount ?? 0, Se = () => {
-    J({
-      title: e.remiDetails?.reimbursementInfo.stage.code === "draft" ? o.deleteDraftTitle : o.deleteReportTitle,
-      description: o.deleteAlertDescription,
-      primaryButtonText: o.buttons.delete,
-      secondaryButtonText: o.buttons.cancel
-    }), M(!0);
-  }, Tt = () => {
-    J({
-      title: o.cancelReportTitle,
-      description: o.cancelAlertDescription,
-      primaryButtonText: o.buttons.yes,
-      secondaryButtonText: o.buttons.no
-    }), M(!0);
-  }, $t = () => {
-    J({
-      title: o.cancelAndDeleteReportTitle,
-      description: o.cancelAndDeleteAlertDescription,
-      primaryButtonText: o.buttons.yes,
-      secondaryButtonText: o.buttons.no
-    }), M(!0);
-  }, je = () => {
-    rt();
-  }, St = {
-    onOkClick: (s) => {
-      Y(!1), me({
-        reimbursementId: e.remiDetails?.id ?? "",
-        type: "rejected",
-        description: s
-      });
-    },
-    onCancelClick: () => {
-      Y(!1);
-    }
-  }, jt = () => {
-    e.remiDetails?.reimbursementInfo.billStatus.code === "rejected" ? je() : (X("approved"), me({
-      reimbursementId: e.remiDetails?.id ?? "",
-      type: "approved"
-    }));
-  }, It = () => {
-    e.remiDetails?.reimbursementInfo.billStatus.code === "rejected" ? (X("delete"), Se()) : (X("rejected"), Y(!0));
-  }, Ct = e.remiDetails?.reimbursementInfo.paymentDate != null ? Wt(
-    _t(
-      e.remiDetails.reimbursementInfo.paymentDate.toDate(),
-      [0, 6],
-      e.achSameDayMaxDays
-    ).toDateString()
-  ) : void 0, Z = e.remiDetails?.reimbursementInfo.expectedDepositDate ?? Ct, kt = e.remiDetails?.lines?.some((s) => {
-    const i = s.lineDetail;
-    return i?.account?.isDeleted === !0 && i?.account?.isBillEditableCoaAccountType === !1;
-  }) ?? !1, Ie = e.remiDetails?.reimbursementInfo.billStatus.code === "pending_approval" && at && !kt, Mt = e.remiDetails?.reimbursementInfo.billStatus.code !== "rejected" && e.remiDetails?.reimbursementInfo.billPaymentStatus.code !== "paid", ee = vt?.code, At = ho(
-    e.duplicateLineByLineId
-  ), Ce = e.duplicateReimbursementStatus.fetchState === "Completed" && At > 0, { requestToOpenThread: te, setRequestToOpenThread: ke, setOpenThread: F } = Nt(Gt), { threads: B, isLoading: I } = Ht(
-    {
-      application: "dashboard",
-      companyId: d.currentTenant?.companyId,
-      tab: "reimbursement",
-      entityId: e.remiDetails?.id,
-      isGlobalComment: !1
-    },
-    "both",
-    !1
-  ), Pt = Dt(() => B.filter(
-    (s) => s.resolved === !1 && !s.id.includes(Yt)
-  ), [B]).length, Bt = Lt(
-    (s, i) => {
-      F(i), N(!1);
-    },
-    [F, N]
-  );
-  oe(() => {
-    te?.threadId != null && B.length > 0 && !I && (F(te.threadId), ke(null));
-  }, [
-    te,
-    B,
-    I,
-    F,
-    ke
-  ]);
-  const y = {
-    application: "dashboard",
-    companyId: d.currentTenant?.companyId,
-    tab: "reimbursement",
-    entityId: e.remiDetails?.id
-  }, z = Ft(
-    e.remiDetails?.bulkProcessingDetail?.type
-  );
-  return /* @__PURE__ */ t.jsxs(Vo, { windowSize: r, ref: R, children: [
-    ct ? /* @__PURE__ */ t.jsx(
-      Pe,
-      {
-        titleComponent: /* @__PURE__ */ t.jsx(ze, { children: S.title }),
-        descriptionComponent: /* @__PURE__ */ t.jsx(Be, { children: S.description }),
-        primaryButtonText: S.primaryButtonText,
-        proceedButtonVariant: "danger",
-        secondaryButtonText: S.secondaryButtonText,
-        action: yt
-      }
-    ) : null,
-    pt ? /* @__PURE__ */ t.jsx(
-      Pe,
-      {
-        titleComponent: /* @__PURE__ */ t.jsx(ze, { children: `${o.rejectRemiTitlePrefix} ${e.remiDetails?.reportTitle ?? ""} by ${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""}` }),
-        descriptionComponent: /* @__PURE__ */ t.jsx(Be, { children: o.rejectRemiDescription }),
-        primaryButtonText: o.buttons.send,
-        secondaryButtonText: o.buttons.cancel,
-        action: St,
-        isEditPopup: !0,
-        isNotesIncluded: !0,
-        notesPlaceholder: o.rejectRejectReasonPlaceholder
-      }
-    ) : null,
-    /* @__PURE__ */ t.jsxs(
-      Lo,
-      {
-        windowSize: r,
-        "data-testid": h(
-          "reimbursement-detail-page-nav-bar-container"
-        ),
-        children: [
-          r !== "small" ? /* @__PURE__ */ t.jsx(
-            Re,
-            {
-              "data-testid": h(
-                "reimbursement-detail-page-nav-bar-left"
-              ),
-              style: { width: "42%" },
-              title: "",
-              leftSideComponent: /* @__PURE__ */ t.jsx(
-                Oo,
-                {
-                  onClick: () => lt?.(),
-                  "data-testid": h(
-                    "remi-detail-page-nav-bar-zeni-logo"
-                  )
-                }
-              ),
-              enableTitleOnScroll: !1,
-              backgroundColor: ye.colors.background,
-              keepBackgroundOnScroll: !0,
-              scrollableContent: R,
-              source: "ReimbursementDetailPage"
-            }
-          ) : null,
-          r !== "small" ? /* @__PURE__ */ t.jsx(Ro, {}) : null,
-          /* @__PURE__ */ t.jsx(
-            Re,
-            {
-              "data-testid": h(
-                "reimbursement-detail-page-nav-bar-right"
-              ),
-              title: Q ?? fe,
-              leftSideComponent: /* @__PURE__ */ t.jsx(t.Fragment, {}),
-              style: { width: r !== "small" ? "58%" : "100%" },
-              rightSideComponent: /* @__PURE__ */ t.jsxs(_o, { children: [
-                m ? /* @__PURE__ */ t.jsxs(
-                  Fo,
-                  {
-                    isDisabled: I,
-                    onClick: I ? () => null : (s) => {
-                      s.preventDefault(), s.stopPropagation(), mt({
-                        roomId: u,
-                        companyId: d.currentTenant?.companyId ?? "",
-                        companyName: d.currentTenant?.companyName ?? "",
-                        entityType: "reimbursement.details",
-                        entityId: e.remiDetails?.id ?? ""
-                      }), N(!0), dt.trackCommentActivity(
-                        "reimbursement",
-                        // pageName
-                        "clicked",
-                        // activityType
-                        d.currentTenant?.companyName ?? "",
-                        // tenantName
-                        d.controllersList.controllers.map(
-                          (i) => Xt(i)
-                        ),
-                        // controllerName
-                        void 0,
-                        // status
-                        void 0,
-                        // createdBy
-                        "page icon"
-                        // source
-                      );
-                    },
-                    "data-testid": h("remi-comments-section"),
-                    children: [
-                      /* @__PURE__ */ t.jsx(
-                        qt,
-                        {
-                          count: I ? void 0 : Pt,
-                          isLoading: I,
-                          style: { left: "12px" }
-                        }
-                      ),
-                      /* @__PURE__ */ t.jsx(Ko, {})
-                    ]
-                  }
-                ) : null,
-                /* @__PURE__ */ t.jsx(
-                  Uo,
-                  {
-                    size: r,
-                    onClick: () => ht(),
-                    "data-testid": h("remi-detail-page-close"),
-                    children: /* @__PURE__ */ t.jsx(Wo, {})
-                  }
-                )
-              ] }),
-              scrollableContent: R,
-              enableTitleOnScroll: r !== "small",
-              scrollThreshold: 64,
-              source: "ReimbursementDetailPage"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ t.jsxs(Jo, { children: [
-      r === "small" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-        /* @__PURE__ */ t.jsx(qe, { windowSize: r, children: /* @__PURE__ */ t.jsx(Xe, { windowsSize: r, children: Q }) }),
-        e.createdBy?.userId != null ? /* @__PURE__ */ t.jsx(
-          Ee,
-          {
-            windowSize: r,
-            children: `${o.by} ${e.createdBy.firstName} ${e.createdBy.lastName}`
-          }
-        ) : null,
-        de && w != null ? /* @__PURE__ */ t.jsx(
-          Ge,
-          {
-            color: w.color,
-            bgColor: w.bgColor,
-            borderColor: w.borderColor,
-            children: w.value
-          }
-        ) : null,
-        P?.code != null ? r === "small" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(
-            Jt,
-            {
-              progressSectionObj: P,
-              createDate: e.remiDetails?.createTime,
-              paymentDate: Z,
-              scheduleDate: e.remiDetails?.reimbursementInfo.paymentDate,
-              approvedDate: e.latestApprovedDate,
-              isFrozen: _
-            }
-          ),
-          z ? /* @__PURE__ */ t.jsx(
-            Ne,
-            {
-              variant: "warning",
-              style: { margin: `${n.sp5} ${n.sp3}` },
-              title: D.duplicateWarning.title,
-              description: D.duplicateWarning.description
-            }
-          ) : Ce ? /* @__PURE__ */ t.jsxs(_e, { size: r, children: [
-            /* @__PURE__ */ t.jsx(Ve, {}),
-            /* @__PURE__ */ t.jsxs(Ke, { children: [
-              /* @__PURE__ */ t.jsx(Fe, { children: o.thereSeems }),
-              /* @__PURE__ */ t.jsx(Ue, { children: o.pleaseFind })
-            ] })
-          ] }) : null
-        ] }) : /* @__PURE__ */ t.jsx(Ye, { windowSize: r, children: /* @__PURE__ */ t.jsx(
-          De,
-          {
-            progressSectionObj: P,
-            createDate: e.remiDetails?.createTime,
-            paymentDate: Z,
-            scheduleDate: e.remiDetails?.reimbursementInfo.paymentDate,
-            approvedDate: e.latestApprovedDate,
-            isFrozen: _
-          }
-        ) }) : null
-      ] }) : null,
-      $.map((s, i) => {
-        const v = e.duplicateLineByLineId[s.lineId];
-        return /* @__PURE__ */ t.jsxs(Ze, { windowSize: r, children: [
-          /* @__PURE__ */ t.jsx(Yo, { windowSize: r, children: /* @__PURE__ */ t.jsx(
-            qo,
-            {
-              bottomSeperator: $.length !== 1,
-              windowSize: r,
-              children: /* @__PURE__ */ t.jsx(
-                uo,
-                {
-                  showAutofill: !1,
-                  uploadInvoiceEndPoint: V,
-                  authParams: nt,
-                  entityId: e.remiDetails?.id,
-                  file: s.file,
-                  showTitlebar: !0,
-                  showTitlebarIcon: !1,
-                  pdfTitle: $.length > 1 ? `#${i + 1} Receipt` : "Receipt",
-                  style: {
-                    width: "auto",
-                    padding: 0,
-                    height: $.length - 1 === i || i === 0 ? 760 : 451
-                  },
-                  onInvoiceUpload: () => {
-                    console.log("onInvoiceUpload");
-                  },
-                  noAttachmentText: o.noReceiptAttached,
-                  type: "reimbursement"
-                }
-              )
-            }
-          ) }),
-          /* @__PURE__ */ t.jsxs(Ho, { windowSize: r, children: [
-            i === 0 && r !== "small" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-              /* @__PURE__ */ t.jsxs(qe, { windowSize: r, children: [
-                /* @__PURE__ */ t.jsx(Xe, { windowsSize: r, children: Q }),
-                de && w != null ? /* @__PURE__ */ t.jsx(
-                  Ge,
-                  {
-                    color: w.color,
-                    bgColor: w.bgColor,
-                    borderColor: w.borderColor,
-                    children: w.value
-                  }
-                ) : null
-              ] }),
-              e.createdBy?.userId != null ? /* @__PURE__ */ t.jsx(
-                Ee,
-                {
-                  windowSize: r,
-                  children: `By ${e.createdBy.firstName} ${e.createdBy.lastName}`
-                }
-              ) : null,
-              P?.code != null ? /* @__PURE__ */ t.jsx(Ye, { windowSize: r, children: /* @__PURE__ */ t.jsx(
-                De,
-                {
-                  progressSectionObj: P,
-                  createDate: e.remiDetails?.createTime,
-                  paymentDate: Z,
-                  scheduleDate: e.remiDetails?.reimbursementInfo.paymentDate,
-                  approvedDate: e.latestApprovedDate,
-                  isFrozen: _
-                }
-              ) }) : null,
-              z ? /* @__PURE__ */ t.jsx(
-                Ne,
-                {
-                  variant: "warning",
-                  style: {
-                    margin: `${n.sp3} ${n.sp8} ${n.sp3} ${n.sp6}`
-                  },
-                  title: D.duplicateWarning.title,
-                  description: D.duplicateWarning.description
-                }
-              ) : Ce ? /* @__PURE__ */ t.jsxs(_e, { size: r, children: [
-                /* @__PURE__ */ t.jsx(Ve, {}),
-                /* @__PURE__ */ t.jsxs(Ke, { children: [
-                  /* @__PURE__ */ t.jsx(Fe, { children: o.thereSeems }),
-                  /* @__PURE__ */ t.jsx(Ue, { children: o.pleaseFind })
-                ] })
-              ] }) : null
-            ] }) : null,
-            /* @__PURE__ */ t.jsxs(
-              $o,
-              {
-                windowSize: r,
-                ref: (Me) => {
-                  Me != null && (ge.current[`L${s.lineId}`] = Me);
-                },
-                children: [
-                  r !== "small" ? /* @__PURE__ */ t.jsx(To, { children: /* @__PURE__ */ t.jsx(So, { children: $.length > 1 ? `#${i + 1} ${o.reimbursement}` : o.reimbursement }) }) : null,
-                  /* @__PURE__ */ t.jsxs(jo, { windowSize: r, children: [
-                    v?.duplicateLineId != null ? /* @__PURE__ */ t.jsxs(wo, { children: [
-                      o.thisExpenseReview,
-                      " ",
-                      /* @__PURE__ */ t.jsx(
-                        vo,
-                        {
-                          onClick: () => {
-                            if (v.isDuplicateWithinTransaction && v.duplicateLineId != null)
-                              return be(
-                                `L${v.duplicateLineId}`
-                              );
-                            v.duplicateTransactionId != null && v.duplicateLineId != null && it(
-                              v.duplicateTransactionId,
-                              v.duplicateLineId
-                            );
-                          },
-                          "data-testid": h(
-                            "remi-view-duplicate-expense"
-                          ),
-                          children: o.viewOriginalExpense
-                        }
-                      )
-                    ] }) : null,
-                    /* @__PURE__ */ t.jsx(
-                      g,
-                      {
-                        isThreadAllowed: m,
-                        dashboardTabKey: b({
-                          type: "details",
-                          key: s.type === o.mileageKey ? `${i}.mileage.reimbursementType` : `${i}.out_of_pocket.reimbursementType`
-                        }),
-                        roomId: u,
-                        companyId: d.currentTenant?.companyId ?? "",
-                        companyName: d.currentTenant?.companyName ?? "",
-                        entityId: e.remiDetails?.id ?? "",
-                        dashboardOptionType: "reimbursement",
-                        filterMetaData: {
-                          ...y,
-                          entityType: `reimbursement.details.${f(
-                            "reimbursementType",
-                            i,
-                            s.type === o.mileageKey ? "mileage" : "out_of_pocket"
-                          )}`
-                        },
-                        style: {
-                          borderRadius: v?.duplicateLineId == null ? `${n.sp2} ${n.sp2} 0 0` : "0 0 0 0"
-                        },
-                        children: /* @__PURE__ */ t.jsx(
-                          x,
-                          {
-                            label: {
-                              label: o.reimbursementType,
-                              width: A
-                            },
-                            text: s.type === o.mileageKey ? o.mileage : o.outOfPocket,
-                            style: {
-                              width: "auto",
-                              borderRadius: v?.duplicateLineId == null ? `${n.sp2} ${n.sp2} 0 0` : "0 0 0 0"
-                            }
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ t.jsx(T, {}),
-                    s.type === o.mileageKey ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                      /* @__PURE__ */ t.jsx(
-                        g,
-                        {
-                          isThreadAllowed: m,
-                          dashboardTabKey: b({
-                            type: "details",
-                            key: `${i}.mileage.transactionDate`
-                          }),
-                          roomId: u,
-                          companyId: d.currentTenant?.companyId ?? "",
-                          companyName: d.currentTenant?.companyName ?? "",
-                          entityId: e.remiDetails?.id ?? "",
-                          dashboardOptionType: "reimbursement",
-                          filterMetaData: {
-                            ...y,
-                            entityType: `reimbursement.details.${f(
-                              "transactionDate",
-                              i,
-                              "mileage"
-                            )}`
-                          },
-                          children: /* @__PURE__ */ t.jsx(
-                            x,
-                            {
-                              label: {
-                                label: o.transactionDate,
-                                width: A
-                              },
-                              text: s.transactionDate?.format(
-                                we.visual.MMMDCommaYYYYformat
-                              ) ?? o.emptyValue,
-                              style: { width: "auto" }
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ t.jsx(T, {}),
-                      /* @__PURE__ */ t.jsx(
-                        g,
-                        {
-                          isThreadAllowed: m,
-                          dashboardTabKey: b({
-                            type: "details",
-                            key: `${i}.mileage.distanceInMiles`
-                          }),
-                          roomId: u,
-                          companyId: d.currentTenant?.companyId ?? "",
-                          companyName: d.currentTenant?.companyName ?? "",
-                          entityId: e.remiDetails?.id ?? "",
-                          dashboardOptionType: "reimbursement",
-                          filterMetaData: {
-                            ...y,
-                            entityType: `reimbursement.details.${f(
-                              "distanceInMiles",
-                              i,
-                              "mileage"
-                            )}`
-                          },
-                          children: /* @__PURE__ */ t.jsx(
-                            x,
-                            {
-                              label: {
-                                label: o.distanceInMiles,
-                                width: A
-                              },
-                              text: s.distanceMileage.value.toString() ?? o.emptyValue,
-                              style: { width: "auto" }
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ t.jsx(T, {}),
-                      /* @__PURE__ */ t.jsx(
-                        g,
-                        {
-                          isThreadAllowed: m,
-                          dashboardTabKey: b({
-                            type: "details",
-                            key: `${i}.mileage.amount`
-                          }),
-                          roomId: u,
-                          companyId: d.currentTenant?.companyId ?? "",
-                          companyName: d.currentTenant?.companyName ?? "",
-                          entityId: e.remiDetails?.id ?? "",
-                          dashboardOptionType: "reimbursement",
-                          filterMetaData: {
-                            ...y,
-                            entityType: `reimbursement.details.${f(
-                              "amount",
-                              i,
-                              "mileage"
-                            )}`
-                          },
-                          children: /* @__PURE__ */ t.jsx(
-                            x,
-                            {
-                              label: {
-                                label: o.amount,
-                                width: j
-                              },
-                              text: s.homeCurrencyConversions != null ? Le(
-                                "0,0[.]00",
-                                s.homeCurrencyConversions
-                              ) : o.emptyValue,
-                              style: { width: "auto" }
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ t.jsx(T, {}),
-                      /* @__PURE__ */ t.jsx(
-                        g,
-                        {
-                          isThreadAllowed: m,
-                          dashboardTabKey: b({
-                            type: "details",
-                            key: `${i}.mileage.memo`
-                          }),
-                          roomId: u,
-                          companyId: d.currentTenant?.companyId ?? "",
-                          companyName: d.currentTenant?.companyName ?? "",
-                          entityId: e.remiDetails?.id ?? "",
-                          dashboardOptionType: "reimbursement",
-                          filterMetaData: {
-                            ...y,
-                            entityType: `reimbursement.details.${f(
-                              "memo",
-                              i,
-                              "mileage"
-                            )}`
-                          },
-                          children: /* @__PURE__ */ t.jsx(
-                            x,
-                            {
-                              label: {
-                                label: o.memo,
-                                width: j
-                              },
-                              text: s.description ?? o.emptyValue,
-                              style: { width: "auto" }
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ t.jsx(T, {}),
-                      /* @__PURE__ */ t.jsx(
-                        g,
-                        {
-                          isThreadAllowed: m,
-                          dashboardTabKey: b({
-                            type: "details",
-                            key: `${i}.mileage.class`
-                          }),
-                          roomId: u,
-                          companyId: d.currentTenant?.companyId ?? "",
-                          companyName: d.currentTenant?.companyName ?? "",
-                          entityId: e.remiDetails?.id ?? "",
-                          dashboardOptionType: "reimbursement",
-                          filterMetaData: {
-                            ...y,
-                            entityType: `reimbursement.details.${f(
-                              "class",
-                              i,
-                              "mileage"
-                            )}`
-                          },
-                          style: {
-                            borderRadius: `0 0 ${n.sp2} ${n.sp2}`
-                          },
-                          children: /* @__PURE__ */ t.jsx(
-                            x,
-                            {
-                              label: {
-                                label: o.department,
-                                width: j
-                              },
-                              text: s.lineDetail.class?.className ?? o.emptyValue,
-                              style: {
-                                width: "auto",
-                                borderRadius: `0 0 ${n.sp2} ${n.sp2}`
-                              }
-                            }
-                          )
-                        }
-                      )
-                    ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-                      /* @__PURE__ */ t.jsx(
-                        g,
-                        {
-                          isThreadAllowed: m,
-                          dashboardTabKey: b({
-                            type: "details",
-                            key: `${i}.out_of_pocket.merchant`
-                          }),
-                          roomId: u,
-                          companyId: d.currentTenant?.companyId ?? "",
-                          companyName: d.currentTenant?.companyName ?? "",
-                          entityId: e.remiDetails?.id ?? "",
-                          dashboardOptionType: "reimbursement",
-                          filterMetaData: {
-                            ...y,
-                            entityType: `reimbursement.details.${f(
-                              "merchant",
-                              i,
-                              "out_of_pocket"
-                            )}`
-                          },
-                          children: /* @__PURE__ */ t.jsx(
-                            x,
-                            {
-                              label: {
-                                label: o.merchant,
-                                width: A
-                              },
-                              text: s.merchant?.name ?? o.emptyValue,
-                              style: { width: "auto" }
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ t.jsx(T, {}),
-                      /* @__PURE__ */ t.jsx(
-                        g,
-                        {
-                          isThreadAllowed: m,
-                          dashboardTabKey: b({
-                            type: "details",
-                            key: `${i}.out_of_pocket.transactionDate`
-                          }),
-                          roomId: u,
-                          companyId: d.currentTenant?.companyId ?? "",
-                          companyName: d.currentTenant?.companyName ?? "",
-                          entityId: e.remiDetails?.id ?? "",
-                          dashboardOptionType: "reimbursement",
-                          filterMetaData: {
-                            ...y,
-                            entityType: `reimbursement.details.${f(
-                              "transactionDate",
-                              i,
-                              "out_of_pocket"
-                            )}`
-                          },
-                          children: /* @__PURE__ */ t.jsx(
-                            x,
-                            {
-                              label: {
-                                label: o.transactionDate,
-                                width: A
-                              },
-                              text: s.transactionDate?.format(
-                                we.visual.MMMDCommaYYYYformat
-                              ) ?? o.emptyValue,
-                              style: { width: "auto" }
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ t.jsx(T, {}),
-                      /* @__PURE__ */ t.jsx(
-                        g,
-                        {
-                          isThreadAllowed: m,
-                          dashboardTabKey: b({
-                            type: "details",
-                            key: `${i}.out_of_pocket.amount`
-                          }),
-                          roomId: u,
-                          companyId: d.currentTenant?.companyId ?? "",
-                          companyName: d.currentTenant?.companyName ?? "",
-                          entityId: e.remiDetails?.id ?? "",
-                          dashboardOptionType: "reimbursement",
-                          filterMetaData: {
-                            ...y,
-                            entityType: `reimbursement.details.${f(
-                              "amount",
-                              i,
-                              "out_of_pocket"
-                            )}`
-                          },
-                          children: /* @__PURE__ */ t.jsx(
-                            x,
-                            {
-                              label: {
-                                label: o.amount,
-                                width: j
-                              },
-                              text: s.homeCurrencyConversions != null ? Le(
-                                "0,0[.]00",
-                                s.homeCurrencyConversions
-                              ) : o.emptyValue,
-                              style: { width: "auto" }
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ t.jsx(T, {}),
-                      /* @__PURE__ */ t.jsx(
-                        g,
-                        {
-                          isThreadAllowed: m,
-                          dashboardTabKey: b({
-                            type: "details",
-                            key: `${i}.out_of_pocket.memo`
-                          }),
-                          roomId: u,
-                          companyId: d.currentTenant?.companyId ?? "",
-                          companyName: d.currentTenant?.companyName ?? "",
-                          entityId: e.remiDetails?.id ?? "",
-                          dashboardOptionType: "reimbursement",
-                          filterMetaData: {
-                            ...y,
-                            entityType: `reimbursement.details.${f(
-                              "memo",
-                              i,
-                              "out_of_pocket"
-                            )}`
-                          },
-                          children: /* @__PURE__ */ t.jsx(
-                            x,
-                            {
-                              label: {
-                                label: o.memo,
-                                width: j
-                              },
-                              text: s.description ?? o.emptyValue,
-                              style: { width: "auto" }
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ t.jsx(T, {}),
-                      /* @__PURE__ */ t.jsx(
-                        g,
-                        {
-                          isThreadAllowed: m,
-                          dashboardTabKey: b({
-                            type: "details",
-                            key: `${i}.out_of_pocket.account`
-                          }),
-                          roomId: u,
-                          companyId: d.currentTenant?.companyId ?? "",
-                          companyName: d.currentTenant?.companyName ?? "",
-                          entityId: e.remiDetails?.id ?? "",
-                          dashboardOptionType: "reimbursement",
-                          filterMetaData: {
-                            ...y,
-                            entityType: `reimbursement.details.${f(
-                              "account",
-                              i,
-                              "out_of_pocket"
-                            )}`
-                          },
-                          children: /* @__PURE__ */ t.jsx(
-                            x,
-                            {
-                              label: {
-                                label: o.category,
-                                width: j
-                              },
-                              text: s.lineDetail.account?.accountName ?? o.emptyValue,
-                              style: { width: "auto" }
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ t.jsx(T, {}),
-                      /* @__PURE__ */ t.jsx(
-                        g,
-                        {
-                          isThreadAllowed: m,
-                          dashboardTabKey: b({
-                            type: "details",
-                            key: `${i}.out_of_pocket.class`
-                          }),
-                          roomId: u,
-                          companyId: d.currentTenant?.companyId ?? "",
-                          companyName: d.currentTenant?.companyName ?? "",
-                          entityId: e.remiDetails?.id ?? "",
-                          dashboardOptionType: "reimbursement",
-                          filterMetaData: {
-                            ...y,
-                            entityType: `reimbursement.details.${f(
-                              "class",
-                              i,
-                              "out_of_pocket"
-                            )}`
-                          },
-                          style: {
-                            borderRadius: `0 0 ${n.sp2} ${n.sp2}`
-                          },
-                          children: /* @__PURE__ */ t.jsx(
-                            x,
-                            {
-                              label: {
-                                label: o.department,
-                                width: j
-                              },
-                              text: s.lineDetail.class?.className ?? o.emptyValue,
-                              style: {
-                                width: "auto",
-                                borderRadius: `0 0 ${n.sp2} ${n.sp2}`
-                              }
-                            }
-                          )
-                        }
-                      )
-                    ] })
-                  ] })
-                ]
-              }
-            ),
-            $.length !== 1 && $.length === i + 1 && /* @__PURE__ */ t.jsxs(Go, { windowSize: r, children: [
-              /* @__PURE__ */ t.jsxs(Je, { windowSize: r, children: [
-                /* @__PURE__ */ t.jsx(Qe, { children: o.total }),
-                /* @__PURE__ */ t.jsx(
-                  Oe,
-                  {
-                    amount: Te,
-                    integerStyles: K.h6Regular.cssObject,
-                    decimalStyles: K.standardRegular.cssObject
-                  }
-                )
-              ] }),
-              e.remiDetails && /* @__PURE__ */ t.jsx(
-                We,
-                {
-                  amount: $e,
-                  activities: e.remiActivities,
-                  stage: L?.code ?? "draft",
-                  onAddNewRule: he,
-                  entity: "reimbursement",
-                  realTimeApproval: {
-                    allApprovers: e.filteredApprovers,
-                    filteredAttributes: e.filteredAttributes,
-                    allAccountingClass: e.allAccountingClasses,
-                    isRealTimeApproverEditMode: e.realTimeApproval.isEditMode ?? !1,
-                    realTimeApprovalSaveStatus: {
-                      fetchState: e.realTimeApproval.fetchState,
-                      error: e.realTimeApproval.error
-                    },
-                    approvalListFetchState: e.approverListFetchState.fetchState,
-                    attributeSubTypeToUserIdMapping: e.attributeSubTypeToUserIdMapping,
-                    isAdmin: re,
-                    signedInUserId: ie?.userId,
-                    showRealTimeApproval: le,
-                    entityApprovalId: e.remiActivities[0]?.entityApprovalId ?? e.remiDetails.entityApprovalId,
-                    updateEditMode: ce,
-                    onSaveRealTimeApprovals: pe
-                  },
-                  historicActivities: e.remiHistory.activities
-                }
-              )
-            ] })
-          ] })
-        ] }, s.lineId);
-      }),
-      $.length === 1 && /* @__PURE__ */ t.jsxs(Ze, { windowSize: r, children: [
-        /* @__PURE__ */ t.jsx(He, {}),
-        /* @__PURE__ */ t.jsxs(xo, { windowSize: r, children: [
-          /* @__PURE__ */ t.jsx(Eo, { windowSize: r, children: /* @__PURE__ */ t.jsxs(Je, { windowSize: r, children: [
-            /* @__PURE__ */ t.jsx(Qe, { children: o.total }),
-            /* @__PURE__ */ t.jsx(
-              Oe,
-              {
-                amount: Te,
-                integerStyles: K.h6Regular.cssObject,
-                decimalStyles: K.standardRegular.cssObject
-              }
-            )
-          ] }) }),
-          e.remiDetails && /* @__PURE__ */ t.jsx(fo, { windowSize: r, children: /* @__PURE__ */ t.jsx(
-            We,
-            {
-              amount: $e,
-              activities: e.remiActivities,
-              stage: L?.code ?? "draft",
-              onAddNewRule: he,
-              entity: "reimbursement",
-              historicActivities: e.remiHistory.activities,
-              realTimeApproval: {
-                allApprovers: e.filteredApprovers,
-                allAccountingClass: e.allAccountingClasses,
-                filteredAttributes: e.filteredAttributes,
-                isRealTimeApproverEditMode: e.realTimeApproval.isEditMode ?? !1,
-                realTimeApprovalSaveStatus: {
-                  fetchState: e.realTimeApproval.fetchState,
-                  error: e.realTimeApproval.error
-                },
-                approvalListFetchState: e.approverListFetchState.fetchState,
-                attributeSubTypeToUserIdMapping: e.attributeSubTypeToUserIdMapping,
-                isAdmin: re,
-                signedInUserId: ie?.userId,
-                showRealTimeApproval: le,
-                entityApprovalId: e.remiActivities[0]?.entityApprovalId ?? e.remiDetails.entityApprovalId,
-                updateEditMode: ce,
-                onSaveRealTimeApprovals: pe
-              }
-            }
-          ) })
-        ] })
-      ] }),
-      /* @__PURE__ */ t.jsx(Xo, {})
-    ] }),
-    ve || _ === !0 ? null : /* @__PURE__ */ t.jsxs(Do, { children: [
-      r !== "small" ? /* @__PURE__ */ t.jsx(He, {}) : null,
-      /* @__PURE__ */ t.jsx(
-        Co,
-        {
-          windowSize: r,
-          "data-testid": h("remi-detail-page-footer"),
-          onClick: (s) => {
-            s.stopPropagation(), G === !0 && H(!1);
-          },
-          children: /* @__PURE__ */ t.jsx(
-            Qt,
-            {
-              separatorStyle: { marginRight: n.sp4 },
-              showPrimaryButton: e.remiDetails?.reimbursementInfo.billStatus.code === "rejected" || se,
-              showCancel: e.remiDetails?.reimbursementInfo.billStatus.code === "rejected" || se,
-              cancelBtn: {
-                label: e.remiDetails?.reimbursementInfo.billStatus.code === "rejected" ? r === "small" ? o.buttons.delete : o.buttons.deleteReport : r === "small" ? o.buttons.reject : o.buttons.rejectReport,
-                isLoading: q === "rejected" && e.approvalUpdateStatus.fetchState === "In-Progress" || q === "delete" && e.deleteStatus.fetchState === "In-Progress",
-                onClick: It,
-                style: { width: l.footerButtonWidth.value(r) },
-                reverseSpinnerColor: !1
-              },
-              primaryBtn: {
-                label: e.remiDetails?.reimbursementInfo.billStatus.code === "rejected" ? r === "small" ? o.buttons.edit : o.buttons.editAndResubmit : r === "small" ? o.buttons.approve : o.buttons.approveReport,
-                isLoading: q === "approved" && e.approvalUpdateStatus.fetchState === "In-Progress",
-                onClick: jt,
-                style: { width: l.footerButtonWidth.value(r) },
-                isDisabled: e.approvalUpdateStatus.fetchState === "In-Progress" || e.realTimeApproval.isEditMode === !0
-              },
-              rightSideComponent: /* @__PURE__ */ t.jsx(Io, { children: /* @__PURE__ */ t.jsxs(No, { windowSize: r, children: [
-                !z && G ? /* @__PURE__ */ t.jsx(
-                  Rt,
-                  {
-                    onClickAway: () => H(!1),
-                    children: /* @__PURE__ */ t.jsxs(zo, { windowSize: r, children: [
-                      ee !== "processing" ? /* @__PURE__ */ t.jsx(
-                        ae,
-                        {
-                          onClick: Se,
-                          "data-testid": h(
-                            "remi-delete-action"
-                          ),
-                          children: o.buttons.deleteReport
-                        }
-                      ) : null,
-                      ee === "processing" ? /* @__PURE__ */ t.jsx(
-                        ae,
-                        {
-                          onClick: Tt,
-                          "data-testid": h(
-                            "remi-cancel-action"
-                          ),
-                          children: o.buttons.cancel
-                        }
-                      ) : null,
-                      ee === "processing" ? /* @__PURE__ */ t.jsx(
-                        ae,
-                        {
-                          onClick: $t,
-                          "data-testid": h(
-                            "remi-cancel-and-delete-action"
-                          ),
-                          children: o.buttons.cancelAndDelete
-                        }
-                      ) : null
-                    ] })
-                  }
-                ) : null,
-                /* @__PURE__ */ t.jsxs(Bo, { windowSize: r, children: [
-                  !z && Ie ? /* @__PURE__ */ t.jsx(
-                    Po,
-                    {
-                      onClick: je,
-                      "data-testid": h("remi-edit-button"),
-                      children: /* @__PURE__ */ t.jsx(Ao, {})
-                    }
-                  ) : null,
-                  !z && Mt === !0 ? /* @__PURE__ */ t.jsx(
-                    Mo,
-                    {
-                      windowSize: r,
-                      showEditIcon: Ie,
-                      children: /* @__PURE__ */ t.jsx(
-                        ko,
-                        {
-                          onClick: () => H(!G),
-                          "data-testid": h(
-                            "remi-more-actions-button"
-                          )
-                        }
-                      )
-                    }
-                  ) : null
-                ] })
-              ] }) }),
-              style: {
-                minHeight: 62
-              }
-            }
-          )
-        }
-      )
-    ] }),
-    m ? /* @__PURE__ */ t.jsx(Ot, { id: u, children: /* @__PURE__ */ t.jsx(
-      Zt,
-      {
-        isDrawerOpen: ut,
-        allowComposer: !0,
-        drawerTitle: gt,
-        threads: B,
-        autoExpand: !0,
-        autoFocus: !1,
-        filter: {
-          application: "dashboard",
-          companyId: k?.companyId ?? fe,
-          isGlobalComment: !1,
-          tab: "reimbursement"
-        },
-        isLoading: I,
-        threadMetadata: k ? {
-          companyName: k.companyName,
-          companyId: k.companyId,
-          entityId: k.entityId,
-          entityType: k.entityType,
-          isGlobalComment: !1,
-          application: "dashboard",
-          tab: "reimbursement",
-          url: window.location.href
-        } : void 0,
-        textOverrides: {
-          composerPlaceholder: bt,
-          replyComposerPlaceholder: xt,
-          threadResolve: ft,
-          threadUnResolve: wt
-        },
-        onThreadClick: (s, i) => Bt(s, i),
-        onCloseAllThreadsDrawer: () => N(!1),
-        drawerSectionStyle: {
-          width: "400px",
-          backgroundColor: ye.colors.background
-        }
-      }
-    ) }) : null
-  ] });
-}, bo = (e) => {
-  const V = et.getLocalizedStrings().spendManagement.billPay.billsByTabs;
-  if (e?.isDeleted === !0)
-    return {
-      value: V.tabsById.deleted,
-      color: ne.deleted.color,
-      bgColor: ne.deleted.bgColor,
-      borderColor: ne.deleted.borderColor,
-      code: "deleted"
-    };
-}, xo = a.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => l.rightSectionWidth.valuePercentage(e.windowSize)};
-`, fo = a.div`
-  margin-left: ${(e) => l.leftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => l.rightMargin.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => l.activityBottomMargin.valuePx(e.windowSize)};
-`, wo = a(ro)`
-  padding: ${n.sp2} ${n.sp0} ${n.sp2} ${n.sp4};
-  background-color: ${U.alertLight};
-  color: ${U.brandColorGoldDark};
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-`, vo = a.span`
-  border-bottom: 1px solid currentColor;
-  cursor: pointer;
-`, _e = a.div`
-  display: flex;
-  gap: ${n.sp2};
-  padding: ${n.sp3};
-  border-radius: ${n.sp2};
-  align-items: start;
-  margin-top: ${(e) => l.duplicateBannerWrapperMarginTop.valuePx(e.size)};
-  margin-right: ${(e) => l.duplicateBannerWrapperMarginRight.valuePx(e.size)};
-  margin-bottom: ${(e) => l.duplicateBannerWrapperMarginBottom.valuePx(e.size)};
-  margin-left: ${(e) => l.duplicateBannerWrapperMarginLeft.valuePx(e.size)};
-  background-color: ${U.alertLight};
-  border: 1px solid ${(e) => e.theme.colors.brandColorGoldDark};
-`, Fe = a(po)`
-  color: ${(e) => e.theme.colors.brandColorGoldDark};
-`, Ke = a.div`
-  width: 100%;
-`, Ue = a(tt)`
-  color: ${(e) => e.theme.colors.brandColorGoldDark};
-`, Ve = a(mo)`
-  width: ${n.sp4};
-  height: ${n.sp4};
-  color: ${U.brandColorGoldDark};
-`, Ee = a(tt)`
-  margin-bottom: ${(e) => l.bottomMargin.valuePx(e.windowSize)};
-  margin-left: ${(e) => l.leftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => l.rightMargin.valuePx(e.windowSize)};
-  color: ${(e) => e.theme.colors.primary};
-`, To = a.div`
-  display: flex;
-  justify-content: space-between;
-`, $o = a.div`
-  margin-left: ${(e) => l.leftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => l.rightMargin.valuePx(e.windowSize)};
-`, So = a(ot)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-bottom: ${n.sp3};
-`, jo = a.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${(e) => e.theme.colors.grey5};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  box-shadow: ${(e) => `${n.sp0} 2px ${n.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${n.sp2};
-  margin-bottom: ${(e) => l.formBottomMargin.valuePx(e.windowSize)};
-  z-index: 3;
-`, Io = a.div`
-  display: flex;
-  justify-content: flex-end;
-`, Co = a.div`
-  width: ${(e) => l.rightSectionWidth.valuePercentage(e.windowSize)};
-`, ko = a(co)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${n.sp5};
-  height: ${n.sp5};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Mo = a.div`
-  display: flex;
-  margin-left: ${(e) => e.windowSize === "small" ? e.showEditIcon === !0 ? n.sp3 : n.sp4 : n.sp5};
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.grey1};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Ao = a(lo)`
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  width: ${n.sp5};
-  height: ${n.sp5};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Po = a.div`
-  display: flex;
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.grey1};
-  margin-left: ${n.sp4};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Ge = a(ot)`
-  display: flex;
-  color: ${(e) => e.borderColor};
-  align-items: center;
-  justify-content: flex-end;
-  margin-left: ${n.sp3};
-  padding: 1px 6px 1px 6px;
-  border: ${(e) => `1px solid ${e.borderColor}`};
-  border-radius: ${n.sp1};
-  min-width: fit-content;
-  max-width: fit-content;
-`, Bo = a.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`, zo = a.div`
-  display: flex;
-  width: max-content;
-  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: ${n.sp1};
-  padding-bottom: ${n.sp1};
-  position: absolute;
-  bottom: ${(e) => l.otherActionsContainerBottom.valuePx(e.windowSize)};
-  z-index: 3;
-  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
-  border-radius: ${n.sp1};
-  right: ${(e) => l.right.valuePx(e.windowSize)};
-  box-shadow: ${(e) => `${n.sp0} 2px ${n.sp1} ${e.theme.colors.grey1} 3D`};
-`, Ro = a.div`
-  position: fixed;
-  top: 0;
-  left: 42vw;
-  width: 100%;
-  height: 100vh;
-  background: transparent;
-  box-shadow: 0 2px ${n.sp1} ${({ theme: e }) => e.colors.dropShadowNormal};
-  pointer-events: none;
-  z-index: 1;
-`, No = a.div`
-  width: auto;
-  justify-content: flex-end;
-  position: ${(e) => e.windowSize === "small" ? "static" : "relative"};
-  right: ${(e) => l.actionsContainerRight.valuePx(e.windowSize)};
-  height: 100%;
-  display: flex;
-`, ae = a(so)`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding-left: ${n.sp3};
-  padding-right: ${n.sp3};
-  height: ${n.sp6};
-  box-sizing: border-box;
-  &:hover {
-    background-color: ${(e) => e.theme.colors.background};
-  }
-`, Do = a.div`
-  display: flex;
-  width: 100%;
-  position: sticky;
-  bottom: 0;
-  z-index: 2;
-`, Lo = a.div`
-  min-height: ${(e) => l.navBarHeight.valuePx(e.windowSize)};
-  height: ${(e) => l.navBarHeight.valuePx(e.windowSize)};
-  display: flex;
-  align-items: center;
-  width: 100%;
-  justify-content: space-between;
-  position: fixed;
-  z-index: 4;
-`, Oo = a(eo)`
-  color: ${(e) => e.theme.colors.brandColorJade};
-  cursor: pointer;
-  width: ${n.sp4};
-  height: ${n.sp4};
-`, T = a.div`
-  display: flex;
-  flex: 1;
-  background-color: ${(e) => e.theme.colors.grey3};
-  min-height: 1px;
-  max-height: 1px;
-`, Wo = a(oo)`
-  cursor: pointer;
-  width: ${n.sp4};
-  height: ${n.sp4};
-  float: right;
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, _o = a.div`
-  margin-top: ${(e) => l.closeMarginTop.valuePx(e.windowSize)};
-  display: flex;
-  float: right;
-`, Fo = a.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Ko = a(to)`
-  display: flex;
-  width: ${n.sp4};
-  height: ${n.sp4};
-  align-items: center;
-  justify-content: center;
-`, Uo = a.div`
-  margin-top: ${(e) => l.closeMarginTop.valuePx(e.size)};
-  margin-left: ${n.sp5};
-`, Vo = a.div`
-  display: flex;
-  flex-direction: column;
-  width: 100vw;
-  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};
-  `}
-  height: 100vh;
-  overflow: scroll;
-`, He = a.div`
-  width: 42%;
-`, Eo = a.div`
-  margin-left: ${(e) => l.leftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => l.rightMargin.valuePx(e.windowSize)};
-`, Ye = a.div`
-  margin-bottom: ${(e) => l.bottomMargin.valuePx(e.windowSize)};
-  margin-left: ${(e) => l.leftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => l.rightMargin.valuePx(e.windowSize)};
-`, qe = a.div`
-  display: flex;
-  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
-  align-items: ${(e) => e.windowSize === "small" ? "unset" : "center"};
-  margin-top: ${(e) => l.topMargin.valuePx(e.windowSize)};
-  margin-left: ${(e) => l.leftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => l.rightMargin.valuePx(e.windowSize)};
-  width: ${(e) => e.windowSize === "small" ? "fit-content" : "unset"};
-`, Xe = a(ao)`
-  flex-grow: 1;
-  ${(e) => `${go.formTitle.style(e.windowsSize)}`};
-  color: ${(e) => e.theme.colors.primary};
-  word-break: break-all;
-`, Go = a.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: ${(e) => l.leftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => l.rightMargin.valuePx(e.windowSize)};
-`, Je = a.div`
-  padding: ${n.sp3};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: ${(e) => e.theme.colors.grey3};
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-  border-radius: ${n.sp2};
-  color: ${(e) => e.theme.colors.hero};
-  margin-bottom: ${(e) => l.totalBottomMargin.valuePx(e.windowSize)};
-  justify-content: space-between;
-`, Qe = a(io)`
-  display: flex;
-  width: 176px;
-  color: ${(e) => e.theme.colors.primary};
-`, Ho = a.div`
-  display: flex;
-  flex-direction: column;
-  width: ${(e) => l.rightSectionWidth.valuePercentage(e.windowSize)};
-`, Ze = a.div`
-  display: flex;
-  width: 100%;
-  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
-  align-items: ${(e) => e.windowSize === "small" ? "center" : "flex-start"};
-`, Yo = a.div`
-  width: ${(e) => l.leftSectionWidth.valuePercentage(e.windowSize)};
-`, qo = a.div`
-  background: ${(e) => e.theme.colors.grey3};
-  border-radius: ${n.sp2};
-  margin-top: ${(e) => l.topMargin.valuePx(e.windowSize)};
-  margin-left: ${(e) => l.invoiceLeftMargin.valuePx(e.windowSize)};
-  margin-right: ${(e) => l.invoiceRightMargin.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => e.bottomSeperator === !0 && e.windowSize !== "small" ? "107px" : n.sp5};
-`, Xo = a.div`
-  display: flex;
-  flex-direction: column;
-  height: ${n.sp11};
-`, Jo = a.div`
-  margin-top: 78px;
-`;
-export {
-  dn as default
-};