@zeniai/web-components 3.17.11 → 3.17.12

package/dist/ReimbursementDetailPage-6oxKwuYO.js

@@ -0,0 +1,1514 @@
+import { u as zt, j as t, C as Rt } from "./vendor-.pnpm-B2klaOGU.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 Wt } from "@liveblocks/react";
+import { zeniDate as Ot, getNextNthWorkingDay as _t, isBulkProcessing as Ft } from "@zeniai/client-epic-state";
+import { dB as Kt, dD as Ut, u as Vt, fa as Et, R as p, a as et, T as Gt, d as Ht, N as Yt, aP as Pe, aQ as Be, aR as ze, e as h, aE as Re, h as qt, ae as Jt, il as Qt, it as Ne, S as n, im as De, hw as g, hy as b, an as x, a2 as Le, hv as We, t as K, ir as Oe, ao as Xt, i as Zt, is as ne, eQ as eo, l as to, b as oo, aw as no, J as ao, o as tt, w as ot, C as U, E as ro, e_ as io, F as so, iH as lo, iG as co, D as c, _ as po, X as mo } from "./index-HuMzFv1o.js";
+import uo from "./InvoiceUploadSection-BnJvmK58.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, J] = C("approved"), R = Ae(null), [S, Q] = 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, X = e.remiDetails?.reportTitle, $ = e.remiDetails?.lines ?? [], L = e.remiDetails?.reimbursementInfo.stage, W = e.remiDetails?.reimbursementInfo.billStatus, O = e.remiDetails?.reimbursementInfo.billPaymentStatus, ve = L?.code === "paid", vt = ve ? L : W?.code == "approved" && O?.code ? O : W, w = bo(e.remiDetails), P = W?.code == "approved" && O?.code ? O : W, _ = e.remiDetails?.isDeleted ?? !1, Te = e.remiDetails?.amount, $e = e.remiDetails?.amount.amount ?? 0, Se = () => {
+    Q({
+      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 = () => {
+    Q({
+      title: o.cancelReportTitle,
+      description: o.cancelAlertDescription,
+      primaryButtonText: o.buttons.yes,
+      secondaryButtonText: o.buttons.no
+    }), M(!0);
+  }, $t = () => {
+    Q({
+      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() : (J("approved"), me({
+      reimbursementId: e.remiDetails?.id ?? "",
+      type: "approved"
+    }));
+  }, It = () => {
+    e.remiDetails?.reimbursementInfo.billStatus.code === "rejected" ? (J("delete"), Se()) : (J("rejected"), Y(!0));
+  }, Ct = e.remiDetails?.reimbursementInfo.paymentDate != null ? Ot(
+    _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(
+                Wo,
+                {
+                  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: X ?? 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) => Jt(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(Oo, {})
+                  }
+                )
+              ] }),
+              scrollableContent: R,
+              enableTitleOnScroll: r !== "small",
+              scrollThreshold: 64,
+              source: "ReimbursementDetailPage"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(Qo, { children: [
+      r === "small" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        /* @__PURE__ */ t.jsx(qe, { windowSize: r, children: /* @__PURE__ */ t.jsx(Je, { windowsSize: r, children: X }) }),
+        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(
+            Qt,
+            {
+              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(Je, { windowsSize: r, children: X }),
+                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(Qe, { windowSize: r, children: [
+                /* @__PURE__ */ t.jsx(Xe, { children: o.total }),
+                /* @__PURE__ */ t.jsx(
+                  We,
+                  {
+                    amount: Te,
+                    integerStyles: K.h6Regular.cssObject,
+                    decimalStyles: K.standardRegular.cssObject
+                  }
+                )
+              ] }),
+              e.remiDetails && /* @__PURE__ */ t.jsx(
+                Oe,
+                {
+                  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(Qe, { windowSize: r, children: [
+            /* @__PURE__ */ t.jsx(Xe, { children: o.total }),
+            /* @__PURE__ */ t.jsx(
+              We,
+              {
+                amount: Te,
+                integerStyles: K.h6Regular.cssObject,
+                decimalStyles: K.standardRegular.cssObject
+              }
+            )
+          ] }) }),
+          e.remiDetails && /* @__PURE__ */ t.jsx(fo, { windowSize: r, children: /* @__PURE__ */ t.jsx(
+            Oe,
+            {
+              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(Jo, {})
+    ] }),
+    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(
+            Xt,
+            {
+              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(Wt, { 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;
+`, Wo = 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;
+`, Oo = 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"};
+`, Je = 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)};
+`, Qe = 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;
+`, Xe = 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};
+`, Jo = a.div`
+  display: flex;
+  flex-direction: column;
+  height: ${n.sp11};
+`, Qo = a.div`
+  margin-top: 78px;
+`;
+export {
+  dn as default
+};